svelte-kit-vice/src/uix/eidos/components/password-field/password-field-caps-lock-indicator.svelte

<script lang="ts">
	import { getActiveUix } from '$active-uix';
	import * as PasswordField from '$soma/components/password-field';
	import { PASSWORD_FIELD_LANGS } from '$soma/components/password-field/langs';
	import type { PasswordFieldCapsLockIndicatorProps } from './types';

	let {
		ref = $bindable(null),
		children: outerChildren,
		...rest
	}: PasswordFieldCapsLockIndicatorProps = $props();

	const uix = getActiveUix();
	const capsLabel = $derived(uix.langs.ts(PASSWORD_FIELD_LANGS.CAPS_WARNING));
</script>

<PasswordField.CapsLockIndicator {...rest} bind:ref>
	{#snippet children({ isActive })}
		{#if outerChildren}
			{@render outerChildren({ isActive })}
		{:else}
			<span data-password-field-caps-lock-glyph aria-hidden="true">⇪</span>
			<span data-password-field-caps-lock-text>{isActive ? capsLabel : ''}</span>
		{/if}
	{/snippet}
</PasswordField.CapsLockIndicator>