@loidolt/theme-svelte 0.4.0 → 0.6.0

package/dist/components/OTPInput.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+  import {
+    PinInput as PinInputPrimitive,
+    REGEXP_ONLY_DIGITS,
+    REGEXP_ONLY_DIGITS_AND_CHARS,
+    type PinInputRootProps,
+  } from 'bits-ui';
+  import { cx } from '../utils.js';
+
+  type Props = Omit<
+    PinInputRootProps,
+    | 'children'
+    | 'maxlength'
+    | 'value'
+    | 'onValueChange'
+    | 'onComplete'
+    | 'inputId'
+    | 'inputRef'
+    | 'pattern'
+    | 'inputmode'
+    | 'textalign'
+    | 'ref'
+    | 'class'
+  > & {
+    value?: string;
+    /** Number of characters in the code. */
+    length?: number;
+    /** `numeric` accepts digits and opens the number pad; `alphanumeric` accepts letters too. */
+    type?: 'numeric' | 'alphanumeric';
+    /** Accessible name of the input, e.g. "Verification code". */
+    label: string;
+    /** Draw a gap after every `groupSize` characters — `3` renders a six-digit code as 123 456. */
+    groupSize?: number;
+    /** Show dots instead of the characters. */
+    mask?: boolean;
+    /** The id of the underlying input, so a `Field` label can point at it. */
+    id?: string;
+    onValueChange?: (value: string) => void;
+    /** Called with the code once every cell is filled. */
+    onComplete?: (value: string) => void;
+    class?: string;
+    cellClass?: string;
+    /** The hidden input that holds the code. */
+    ref?: HTMLInputElement | null;
+  };
+
+  let {
+    value = $bindable(''),
+    length = 6,
+    type = 'numeric',
+    label,
+    groupSize,
+    mask = false,
+    id,
+    onValueChange,
+    onComplete,
+    class: className,
+    cellClass,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+
+  // Codes are often copied as "123-456" or "123 456"; keep only what the field accepts.
+  const pasteTransformer = (text: string) => text.replace(/[\s-]/g, '');
+</script>
+
+<PinInputPrimitive.Root
+  bind:value
+  bind:inputRef={ref}
+  maxlength={length}
+  inputId={id}
+  pattern={type === 'numeric' ? REGEXP_ONLY_DIGITS : REGEXP_ONLY_DIGITS_AND_CHARS}
+  inputmode={type === 'numeric' ? 'numeric' : 'text'}
+  aria-label={label}
+  {pasteTransformer}
+  {onValueChange}
+  onComplete={(code: string) => onComplete?.(code)}
+  class={cx('ldt-otp-input', className)}
+  {...rest}
+>
+  {#snippet children({ cells })}
+    {#each cells as cell, index (index)}
+      {#if groupSize && index > 0 && index % groupSize === 0}<span
+          class="ldt-otp-input__gap"
+          aria-hidden="true"
+        ></span>{/if}
+      <PinInputPrimitive.Cell {cell} class={cx('ldt-otp-input__cell', cellClass)}>
+        {#if cell.char}{mask ? '•' : cell.char}{/if}{#if cell.hasFakeCaret}<span
+            class="ldt-otp-input__caret"
+          ></span>{/if}
+      </PinInputPrimitive.Cell>
+    {/each}
+  {/snippet}
+</PinInputPrimitive.Root>

package/dist/components/OTPInput.svelte.d.ts

@@ -0,0 +1,26 @@
+import { type PinInputRootProps } from 'bits-ui';
+type Props = Omit<PinInputRootProps, 'children' | 'maxlength' | 'value' | 'onValueChange' | 'onComplete' | 'inputId' | 'inputRef' | 'pattern' | 'inputmode' | 'textalign' | 'ref' | 'class'> & {
+    value?: string;
+    /** Number of characters in the code. */
+    length?: number;
+    /** `numeric` accepts digits and opens the number pad; `alphanumeric` accepts letters too. */
+    type?: 'numeric' | 'alphanumeric';
+    /** Accessible name of the input, e.g. "Verification code". */
+    label: string;
+    /** Draw a gap after every `groupSize` characters — `3` renders a six-digit code as 123 456. */
+    groupSize?: number;
+    /** Show dots instead of the characters. */
+    mask?: boolean;
+    /** The id of the underlying input, so a `Field` label can point at it. */
+    id?: string;
+    onValueChange?: (value: string) => void;
+    /** Called with the code once every cell is filled. */
+    onComplete?: (value: string) => void;
+    class?: string;
+    cellClass?: string;
+    /** The hidden input that holds the code. */
+    ref?: HTMLInputElement | null;
+};
+declare const OTPInput: import("svelte").Component<Props, {}, "value" | "ref">;
+type OTPInput = ReturnType<typeof OTPInput>;
+export default OTPInput;

package/dist/components/PasswordInput.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLInputAttributes } from 'svelte/elements';
+  import { cx } from '../utils.js';
+
+  interface Props extends Omit<HTMLInputAttributes, 'value' | 'type'> {
+    value?: string;
+    /** Whether the password is shown as plain text. */
+    visible?: boolean;
+    onVisibleChange?: (visible: boolean) => void;
+    /**
+     * Accessible name of the reveal button. It stays the same in both states and `aria-pressed`
+     * reports which one is active — changing the name as well would announce the state twice.
+     */
+    toggleLabel?: string;
+    /** Custom button content; receives whether the password is visible. */
+    toggle?: Snippet<[boolean]>;
+    /** Draws the full box instead of the default underline. */
+    boxed?: boolean;
+    /** Lands on the wrapper; the rest props land on the input. */
+    class?: string;
+    inputClass?: string;
+    ref?: HTMLInputElement | null;
+  }
+
+  const generatedId = $props.id();
+
+  let {
+    value = $bindable(''),
+    visible = $bindable(false),
+    onVisibleChange,
+    toggleLabel = 'Show password',
+    toggle,
+    boxed = false,
+    autocomplete = 'current-password',
+    id = generatedId,
+    disabled,
+    class: className,
+    inputClass,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+
+  function flip() {
+    visible = !visible;
+    onVisibleChange?.(visible);
+  }
+</script>
+
+<div
+  class={cx('ldt-password-input', boxed && 'ldt-password-input--boxed', className)}
+  data-disabled={disabled ? '' : undefined}
+>
+  <input
+    bind:this={ref}
+    bind:value
+    {id}
+    {disabled}
+    {autocomplete}
+    type={visible ? 'text' : 'password'}
+    class={cx('ldt-password-input__input', inputClass)}
+    autocapitalize="off"
+    spellcheck="false"
+    {...rest}
+  />
+  <button
+    type="button"
+    class="ldt-password-input__toggle"
+    aria-label={toggleLabel}
+    aria-pressed={visible}
+    aria-controls={id}
+    {disabled}
+    onclick={flip}
+  >
+    {#if toggle}{@render toggle(visible)}{:else}
+      <svg
+        viewBox="0 0 20 20"
+        width="18"
+        height="18"
+        aria-hidden="true"
+        focusable="false"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.5"
+        ><path d="M1.5 10S4.6 4 10 4s8.5 6 8.5 6-3.1 6-8.5 6-8.5-6-8.5-6Z" /><circle
+          cx="10"
+          cy="10"
+          r="2.6"
+        />{#if visible}<path d="m3 17 14-14" />{/if}</svg
+      >
+    {/if}
+  </button>
+</div>

package/dist/components/PasswordInput.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { Snippet } from 'svelte';
+import type { HTMLInputAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLInputAttributes, 'value' | 'type'> {
+    value?: string;
+    /** Whether the password is shown as plain text. */
+    visible?: boolean;
+    onVisibleChange?: (visible: boolean) => void;
+    /**
+     * Accessible name of the reveal button. It stays the same in both states and `aria-pressed`
+     * reports which one is active — changing the name as well would announce the state twice.
+     */
+    toggleLabel?: string;
+    /** Custom button content; receives whether the password is visible. */
+    toggle?: Snippet<[boolean]>;
+    /** Draws the full box instead of the default underline. */
+    boxed?: boolean;
+    /** Lands on the wrapper; the rest props land on the input. */
+    class?: string;
+    inputClass?: string;
+    ref?: HTMLInputElement | null;
+}
+declare const PasswordInput: import("svelte").Component<Props, {}, "value" | "ref" | "visible">;
+type PasswordInput = ReturnType<typeof PasswordInput>;
+export default PasswordInput;

package/dist/components/Progress.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { HTMLAttributes } from 'svelte/elements';
+  import type { ControlSize, StatusVariant } from '../types.js';
   import { cx } from '../utils.js';
 
   interface Props extends HTMLAttributes<HTMLDivElement> {
@@ -7,6 +8,18 @@
     value?: number;
     max?: number;
     label?: string;
+    /** Colours the bar by outcome — `success` when done, `error` when a run failed part-way. */
+    variant?: 'default' | StatusVariant;
+    /** Bar thickness. */
+    size?: ControlSize;
+    /** Show the formatted value after the bar. */
+    showValue?: boolean;
+    /**
+     * Text for the value, shown by `showValue` and spoken as `aria-valuetext` — "3 of 12 sheets"
+     * says more than 25%. Defaults to a whole percentage.
+     */
+    formatValue?: (value: number, max: number) => string;
+    /** Lands on the progressbar element. */
     class?: string;
     ref?: HTMLDivElement | null;
   }
@@ -15,6 +28,10 @@
     value,
     max = 100,
     label = 'Progress',
+    variant = 'default',
+    size = 'md',
+    showValue = false,
+    formatValue,
     class: className,
     ref = $bindable(null),
     ...rest
@@ -24,20 +41,46 @@
   // A non-positive `max` would make every ratio Infinity or NaN.
   const safeMax = $derived(Number.isFinite(max) && max > 0 ? max : 100);
   const clamped = $derived(Math.max(0, Math.min(safeMax, value ?? 0)));
+  const text = $derived(
+    indeterminate
+      ? undefined
+      : formatValue
+        ? formatValue(clamped, safeMax)
+        : `${Math.round((clamped / safeMax) * 100)}%`
+  );
 </script>
 
-<div
-  bind:this={ref}
-  class={cx('ldt-progress', indeterminate && 'ldt-progress--indeterminate', className)}
-  role="progressbar"
-  aria-label={label}
-  aria-valuenow={indeterminate ? undefined : clamped}
-  aria-valuemin="0"
-  aria-valuemax={safeMax}
-  {...rest}
->
+{#snippet bar()}
   <div
-    class="ldt-progress__bar"
-    style:--ldt-progress-value={indeterminate ? undefined : clamped / safeMax}
-  ></div>
-</div>
+    bind:this={ref}
+    class={cx(
+      'ldt-progress',
+      indeterminate && 'ldt-progress--indeterminate',
+      variant !== 'default' && `ldt-progress--${variant}`,
+      size !== 'md' && `ldt-progress--${size}`,
+      className
+    )}
+    role="progressbar"
+    aria-label={label}
+    aria-valuenow={indeterminate ? undefined : clamped}
+    aria-valuemin="0"
+    aria-valuemax={safeMax}
+    aria-valuetext={formatValue ? text : undefined}
+    {...rest}
+  >
+    <div
+      class="ldt-progress__bar"
+      style:--ldt-progress-value={indeterminate ? undefined : clamped / safeMax}
+    ></div>
+  </div>
+{/snippet}
+
+{#if showValue}
+  <div class="ldt-progress-field">
+    {@render bar()}
+    <!-- The progressbar already reports its value; this is the sighted copy. -->
+    <span class="ldt-progress-field__value" aria-hidden="true">{text ?? ''}</span>
+  </div>
+{:else}
+  {@render bar()}
+{/if}

package/dist/components/Progress.svelte.d.ts

@@ -1,9 +1,22 @@
 import type { HTMLAttributes } from 'svelte/elements';
+import type { ControlSize, StatusVariant } from '../types.js';
 interface Props extends HTMLAttributes<HTMLDivElement> {
     /** Omit (or pass `undefined`) for an indeterminate bar. */
     value?: number;
     max?: number;
     label?: string;
+    /** Colours the bar by outcome — `success` when done, `error` when a run failed part-way. */
+    variant?: 'default' | StatusVariant;
+    /** Bar thickness. */
+    size?: ControlSize;
+    /** Show the formatted value after the bar. */
+    showValue?: boolean;
+    /**
+     * Text for the value, shown by `showValue` and spoken as `aria-valuetext` — "3 of 12 sheets"
+     * says more than 25%. Defaults to a whole percentage.
+     */
+    formatValue?: (value: number, max: number) => string;
+    /** Lands on the progressbar element. */
     class?: string;
     ref?: HTMLDivElement | null;
 }

package/dist/components/RadioGroup.svelte

@@ -1,11 +1,12 @@
 <script lang="ts" generics="T extends string = string">
   import type { HTMLFieldsetAttributes } from 'svelte/elements';
-  import type { Option, Orientation } from '../types.js';
+  import type { ChoiceOption, Orientation } from '../types.js';
   import { cx } from '../utils.js';
 
   interface Props extends HTMLFieldsetAttributes {
     value?: T;
-    options: Option<T>[];
+    /** Choices. A `description` renders under its label and is read after it. */
+    options: ChoiceOption<T>[];
     /** Shared `name` for the inputs. Defaults to an SSR-stable generated id. */
     name?: string;
     /** Visible group label, rendered as a `<legend>`. */
@@ -35,15 +36,28 @@
 <fieldset bind:this={ref} class={cx('ldt-fieldset', className)} {...rest}>
   {#if label}<legend class="ldt-legend">{label}</legend>{/if}
   <div class={cx('ldt-radio-group', orientation === 'vertical' && 'ldt-radio-group--vertical')}>
-    {#each options as option (option.value)}<label class="ldt-choice"
+    {#each options as option, index (option.value)}
+      {@const labelId = `${generatedName}-${index}-label`}
+      {@const descriptionId = option.description
+        ? `${generatedName}-${index}-description`
+        : undefined}
+      <label class={cx('ldt-choice', option.description && 'ldt-choice--described')}
         ><input
           type="radio"
           {name}
           value={option.value}
           bind:group={value}
           disabled={option.disabled}
+          aria-labelledby={option.description ? labelId : undefined}
+          aria-describedby={descriptionId}
           onchange={() => onValueChange?.(option.value)}
-        />{option.label}</label
-      >{/each}
+        /><span class="ldt-choice__text"
+          ><span id={labelId}>{option.label}</span>{#if option.description}<span
+              class="ldt-choice__description"
+              id={descriptionId}>{option.description}</span
+            >{/if}</span
+        ></label
+      >
+    {/each}
   </div>
 </fieldset>

package/dist/components/RadioGroup.svelte.d.ts

@@ -1,9 +1,10 @@
 import type { HTMLFieldsetAttributes } from 'svelte/elements';
-import type { Option, Orientation } from '../types.js';
+import type { ChoiceOption, Orientation } from '../types.js';
 declare function $$render<T extends string = string>(): {
     props: HTMLFieldsetAttributes & {
         value?: T;
-        options: Option<T>[];
+        /** Choices. A `description` renders under its label and is read after it. */
+        options: ChoiceOption<T>[];
         /** Shared `name` for the inputs. Defaults to an SSR-stable generated id. */
         name?: string;
         /** Visible group label, rendered as a `<legend>`. */

package/dist/components/Select.svelte

@@ -1,11 +1,12 @@
 <script lang="ts" generics="T extends string = string">
   import type { HTMLSelectAttributes } from 'svelte/elements';
-  import type { Option } from '../types.js';
+  import { isOptionGroup, type OptionEntry } from '../internal/options.js';
   import { cx } from '../utils.js';
 
   interface Props extends Omit<HTMLSelectAttributes, 'value'> {
     value?: T | '';
-    options: Option<T>[];
+    /** Options, optionally in labelled groups — rendered as native `<optgroup>`s. */
+    options: OptionEntry<T>[];
     /**
      * Empty-choice text. Selectable again after a real choice unless the field is `required`,
      * so a user can undo their selection.
@@ -51,7 +52,16 @@
 >
   {#if placeholder}<option value="" disabled={required} hidden={required}>{placeholder}</option
     >{/if}
-  {#each options as option (option.value)}<option value={option.value} disabled={option.disabled}
-      >{option.label}</option
-    >{/each}
+  {#each options as entry (isOptionGroup(entry) ? `group:${entry.label}` : entry.value)}
+    {#if isOptionGroup(entry)}
+      <optgroup label={entry.label} disabled={entry.disabled}>
+        {#each entry.options as option (option.value)}<option
+            value={option.value}
+            disabled={option.disabled}>{option.label}</option
+          >{/each}
+      </optgroup>
+    {:else}
+      <option value={entry.value} disabled={entry.disabled}>{entry.label}</option>
+    {/if}
+  {/each}
 </select>

package/dist/components/Select.svelte.d.ts

@@ -1,9 +1,10 @@
 import type { HTMLSelectAttributes } from 'svelte/elements';
-import type { Option } from '../types.js';
+import { type OptionEntry } from '../internal/options.js';
 declare function $$render<T extends string = string>(): {
     props: Omit<HTMLSelectAttributes, "value"> & {
         value?: T | "";
-        options: Option<T>[];
+        /** Options, optionally in labelled groups — rendered as native `<optgroup>`s. */
+        options: OptionEntry<T>[];
         /**
          * Empty-choice text. Selectable again after a real choice unless the field is `required`,
          * so a user can undo their selection.