@lyeve-labs/ui-kit 0.11.2 → 0.13.0

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

@@ -0,0 +1,38 @@
+/**
+   * The page frame: the gutter, the content cap, the centring and the section
+   * rhythm, all owned by the shell so a page cannot pick its own.
+   *
+   * Nothing in the library owned the frame, so every page built one. Across one
+   * app 31 of 35 pages restate the gutter in four spellings, five content caps
+   * are in use with no rule for choosing between them, and one page renders
+   * against the left edge of the window because it set a cap and forgot
+   * `mx-auto`. Centring and `w-full` come with the gutter here, in PAGE_PAD, so
+   * there is no order of props that leaves them out.
+   *
+   * The shell renders no landmark of its own. An app shell already owns `main`,
+   * `nav` and the rest, and a second `main` changes what a landmark query
+   * matches for every assistive technology reading the page.
+   */
+import type { Snippet } from 'svelte';
+import { type PageWidth } from '../internal/layout.js';
+interface Props {
+    /** The page's only h1, rendered through PageHeader. */
+    title: string;
+    description?: string;
+    /** Content cap. narrow, default, wide, full. */
+    width?: PageWidth;
+    /**
+     * A full-height page that manages its own scrolling, for instance a split
+     * pane or a canvas. No gutter, no cap, and the title renders compact.
+     */
+    fill?: boolean;
+    /** Rendered above the title at one fixed distance. */
+    breadcrumb?: Snippet;
+    /** Right-aligned controls in the title row. */
+    actions?: Snippet;
+    class?: string;
+    children: Snippet;
+}
+declare const PageShell: import("svelte").Component<Props, {}, "">;
+type PageShell = ReturnType<typeof PageShell>;
+export default PageShell;

package/dist/components/Pagination.svelte

@@ -19,38 +19,63 @@
   let from = $derived(Math.min((safePage - 1) * perPage + 1, safeTotal));
   let to = $derived(Math.min(safePage * perPage, safeTotal));
 
-  function pageNumbers(current: number, last: number): (number | '…')[] {
+  /**
+   * The elided run is the sentinel string 'gap', never the horizontal-ellipsis
+   * character.
+   *
+   * The glyph used to be both the value here and the text of the span that
+   * rendered it, and that span carried no aria-hidden, so a screen reader read
+   * "horizontal ellipsis" aloud between two page numbers. The gap is decoration:
+   * it says nothing the page numbers either side do not already say.
+   */
+  type PageSlot = number | 'gap';
+
+  function pageNumbers(current: number, last: number): PageSlot[] {
     if (last <= 7) return Array.from({ length: last }, (_, i) => i + 1);
-    const pages: (number | '…')[] = [1];
-    if (current > 3) pages.push('…');
+    const pages: PageSlot[] = [1];
+    if (current > 3) pages.push('gap');
     for (let i = Math.max(2, current - 1); i <= Math.min(last - 1, current + 1); i++) {
       pages.push(i);
     }
-    if (current < last - 2) pages.push('…');
+    if (current < last - 2) pages.push('gap');
     pages.push(last);
     return pages;
   }
 
+  /**
+   * A page number is unique in the list, so it is its own key. Both gaps are
+   * spelled 'gap', so they take their position as well. Keying on the index
+   * alone made every slot change identity when a page was inserted ahead of it.
+   */
+  function slotKey(slot: PageSlot, index: number): string {
+    return slot === 'gap' ? `gap-${index}` : `page-${slot}`;
+  }
+
   let nums = $derived(pageNumbers(safePage, totalPages));
 
   const btnBase =
     'inline-flex items-center justify-center w-7 h-7 rounded text-xs font-medium transition-colors duration-150';
 </script>
 
-{#if totalPages > 1}
-  <div class="flex items-center gap-3 {cls}">
-    <span class="text-xs text-faint shrink-0">
-      {total === 0 ? 'No results' : `${from}–${to} of ${total}`}
-    </span>
+<!-- The summary renders whenever there is a count to state, and the page
+     buttons only when there is more than one page. The whole component used to
+     be behind `totalPages > 1`, and an empty list has one page, so the 'No
+     results' line below could never appear and a single page of results showed
+     no count at all. -->
+<div class="flex flex-wrap items-center gap-x-3 gap-y-2 {cls}">
+  <span class="text-xs text-faint shrink-0">
+    {safeTotal === 0 ? 'No results' : `${from} to ${to} of ${safeTotal}`}
+  </span>
 
-    <div class="flex items-center gap-0.5 ml-auto">
+  {#if totalPages > 1}
+    <div class="flex flex-wrap items-center gap-0.5 ml-auto">
       <button
         type="button"
         disabled={safePage <= 1}
         onclick={() => onchange(safePage - 1)}
         aria-label="Previous page"
         class="{btnBase} text-muted hover:text-fg hover:bg-surface-2
-          disabled:opacity-30 disabled:cursor-not-allowed"
+            disabled:opacity-30 disabled:cursor-not-allowed"
       >
         <svg
           width="14"
@@ -67,16 +92,32 @@
         </svg>
       </button>
 
-      {#each nums as n, i (i)}
-        {#if n === '…'}
-          <span class="w-7 text-center text-xs text-faint">…</span>
+      {#each nums as n, i (slotKey(n, i))}
+        {#if n === 'gap'}
+          <!-- Three drawn dots, not the ellipsis character: a font glyph lands
+               at a different optical weight from every other icon here, and the
+               character is what the screen reader was speaking. -->
+          <span class="inline-flex w-7 items-center justify-center text-faint" aria-hidden="true">
+            <svg
+              width="14"
+              height="14"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path d="M5 12h.01M12 12h.01M19 12h.01" />
+            </svg>
+          </span>
         {:else}
           <button
             type="button"
             onclick={() => onchange(n as number)}
             aria-current={safePage === n ? 'page' : undefined}
             class="{btnBase}
-              {safePage === n
+                {safePage === n
               ? 'bg-brand text-ink'
               : 'text-muted hover:text-fg hover:bg-surface-2'}"
           >
@@ -108,5 +149,5 @@
         </svg>
       </button>
     </div>
-  </div>
-{/if}
+  {/if}
+</div>

package/dist/components/Panel.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+  /**
+   * A grouping inside a page: a heading, an optional description and a body,
+   * on a lighter surface than Card.
+   *
+   * An audit counted 63 hand-rolled card surfaces across 31 files in nine
+   * paddings while Card itself was used zero times. Many of them did not want
+   * a Card. They wanted a labelled group inside a page, and reaching for a
+   * card meant a box on a box, so each one was written out by hand and each
+   * one picked its own padding. Panel is that group: it takes Card's surface
+   * and Card's padding scale from the shared layout contract, so a panel and a
+   * card sitting on the same page agree, and it adds a `plain` variant for the
+   * groups that wanted the heading and the rhythm without the box at all.
+   *
+   * The heading is a real h2 or h3. A page's outline is what a screen reader
+   * navigates by, and a styled div appears in no heading list.
+   */
+  import type { Component, Snippet } from 'svelte';
+  import { CARD_PAD, CARD_SURFACE, sectionHeading } from '../internal/layout.js';
+
+  type Pad = 'none' | 'sm' | 'md';
+  type Variant = 'bordered' | 'plain';
+
+  interface Props {
+    heading?: string;
+    /** 2 directly under a page title, 3 inside a card or another panel. */
+    headingLevel?: 2 | 3;
+    description?: string;
+    /** Drawn before the heading. */
+    icon?: Component<{ size?: number; class?: string }>;
+    pad?: Pad;
+    /** A quiet variant with no border, for a grouping that needs separation but not a box. */
+    variant?: Variant;
+    class?: string;
+    actions?: Snippet;
+    children: Snippet;
+  }
+
+  let {
+    heading = undefined,
+    headingLevel = 3,
+    description = undefined,
+    icon = undefined,
+    pad = 'md',
+    variant = 'bordered',
+    class: klass = '',
+    actions,
+    children,
+  }: Props = $props();
+
+  /**
+   * `plain` states nothing at all rather than turning the border off.
+   *
+   * A `border-0` after `border border-line` is two utilities for one property,
+   * and which of them wins is decided by the order Tailwind emits them and not
+   * by the order they were written here.
+   */
+  const SURFACE: Record<Variant, string> = {
+    bordered: CARD_SURFACE,
+    plain: '',
+  };
+
+  /**
+   * Padding and variant stay independent, so `plain` is not silently also a
+   * padding change. A plain panel usually takes `pad="none"`: with no box to
+   * inset from, an inset only pushes its heading out of line with the page.
+   */
+  const surface = $derived(`${SURFACE[variant]} ${CARD_PAD[pad]}`.trim());
+</script>
+
+<div class="flex flex-col gap-stack {surface} {klass}">
+  {#snippet headingText()}
+    {#if icon}
+      {@const Icon = icon}
+      <span class="shrink-0 text-muted" aria-hidden="true"><Icon size={16} /></span>
+    {/if}
+    {heading}
+  {/snippet}
+
+  {#if heading || description || actions}
+    <div class="flex flex-wrap items-start justify-between gap-4">
+      <div class="flex min-w-0 flex-col gap-1">
+        <!-- Two branches rather than one dynamic element: the level is a
+             document structure decision, and both headings this can produce
+             should be readable in the file. -->
+        {#if heading && headingLevel === 2}
+          <h2 class="{sectionHeading(2)} flex items-center gap-2">{@render headingText()}</h2>
+        {:else if heading}
+          <h3 class="{sectionHeading(3)} flex items-center gap-2">{@render headingText()}</h3>
+        {/if}
+        {#if description}<p class="text-sm text-muted">{description}</p>{/if}
+      </div>
+
+      {#if actions}
+        <div class="flex shrink-0 items-center gap-2">{@render actions()}</div>
+      {/if}
+    </div>
+  {/if}
+
+  <div>{@render children()}</div>
+</div>

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

@@ -0,0 +1,39 @@
+/**
+   * A grouping inside a page: a heading, an optional description and a body,
+   * on a lighter surface than Card.
+   *
+   * An audit counted 63 hand-rolled card surfaces across 31 files in nine
+   * paddings while Card itself was used zero times. Many of them did not want
+   * a Card. They wanted a labelled group inside a page, and reaching for a
+   * card meant a box on a box, so each one was written out by hand and each
+   * one picked its own padding. Panel is that group: it takes Card's surface
+   * and Card's padding scale from the shared layout contract, so a panel and a
+   * card sitting on the same page agree, and it adds a `plain` variant for the
+   * groups that wanted the heading and the rhythm without the box at all.
+   *
+   * The heading is a real h2 or h3. A page's outline is what a screen reader
+   * navigates by, and a styled div appears in no heading list.
+   */
+import type { Component, Snippet } from 'svelte';
+type Pad = 'none' | 'sm' | 'md';
+type Variant = 'bordered' | 'plain';
+interface Props {
+    heading?: string;
+    /** 2 directly under a page title, 3 inside a card or another panel. */
+    headingLevel?: 2 | 3;
+    description?: string;
+    /** Drawn before the heading. */
+    icon?: Component<{
+        size?: number;
+        class?: string;
+    }>;
+    pad?: Pad;
+    /** A quiet variant with no border, for a grouping that needs separation but not a box. */
+    variant?: Variant;
+    class?: string;
+    actions?: Snippet;
+    children: Snippet;
+}
+declare const Panel: Component<Props, {}, "">;
+type Panel = ReturnType<typeof Panel>;
+export default Panel;

package/dist/components/PasswordInput.svelte

@@ -0,0 +1,139 @@
+<script lang="ts">
+  import { Eye, EyeOff } from '@lucide/svelte';
+  import {
+    CONTROL_BASE,
+    FIELD_ERROR,
+    FIELD_HINT,
+    FIELD_LABEL,
+    FIELD_WRAP,
+    controlBorder,
+    describedBy,
+  } from '../internal/field.js';
+
+  interface Props {
+    value?: string;
+    id?: string;
+    name?: string;
+    label?: string;
+    /** Renders the label to screen readers only. For a row of secrets where the visible name is a table cell. */
+    labelHidden?: boolean;
+    hint?: string;
+    error?: string;
+    placeholder?: string;
+    required?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    autocomplete?: 'new-password' | 'current-password' | 'off';
+    /** False for a field whose value must never be shown, for instance on a shared screen. */
+    revealable?: boolean;
+    class?: string;
+    /** Lands on the control, not on the wrapper, which is where `class` goes. */
+    controlClass?: string;
+    oninput?: (e: Event & { currentTarget: HTMLInputElement }) => void;
+    onchange?: (e: Event & { currentTarget: HTMLInputElement }) => void;
+  }
+
+  let {
+    value = $bindable(''),
+    id = undefined,
+    name = undefined,
+    label = undefined,
+    labelHidden = false,
+    hint = undefined,
+    error = undefined,
+    placeholder = '',
+    required = false,
+    disabled = false,
+    readonly = false,
+    autocomplete = 'new-password',
+    revealable = true,
+    class: klass = '',
+    controlClass = '',
+    oninput = undefined,
+    onchange = undefined,
+  }: Props = $props();
+
+  /**
+   * $props.id() returns the same string on the server and on the client. A
+   * random one does not, so `aria-controls` on the reveal button named an
+   * element that never existed after hydration and the relationship was
+   * silently dropped.
+   */
+  const uid = $props.id();
+  const fieldId = $derived(id ?? uid);
+
+  let revealed = $state(false);
+
+  /**
+   * A form reset, or a save that empties the field, leaves the component
+   * mounted. Without this the last secret typed stayed legible on screen under
+   * a value that no longer existed.
+   */
+  $effect(() => {
+    if (value === '') revealed = false;
+  });
+
+  // A disabled field hands over nothing, including a look at what it holds.
+  const showToggle = $derived(revealable && !disabled);
+
+  function handleInput(e: Event & { currentTarget: HTMLInputElement }) {
+    value = e.currentTarget.value;
+    oninput?.(e);
+  }
+</script>
+
+<div class="{FIELD_WRAP} {klass}">
+  {#if label}
+    <label for={fieldId} class="{FIELD_LABEL} {labelHidden ? 'sr-only' : ''}">
+      {label}{#if required}<span class="ml-0.5 text-danger" aria-hidden="true">*</span>{/if}
+    </label>
+  {/if}
+
+  <div class="relative">
+    <!-- pr-10 overrides the px-3 CONTROL_BASE states, because `pr` is emitted
+         after `px` and so wins. Without it a long key ran under the button and
+         the operator could not read the end of what they had pasted. -->
+    <input
+      id={fieldId}
+      type={revealed ? 'text' : 'password'}
+      {name}
+      {placeholder}
+      {required}
+      {disabled}
+      {readonly}
+      {autocomplete}
+      {value}
+      oninput={handleInput}
+      {onchange}
+      aria-invalid={error ? 'true' : undefined}
+      aria-describedby={describedBy(fieldId, error, hint)}
+      class="{CONTROL_BASE} {controlBorder(!!error)} {showToggle ? 'pr-10' : ''} {controlClass}"
+    />
+
+    {#if showToggle}
+      <!-- type="button" is load bearing. A button inside a form defaults to
+           type="submit", so a reveal control on a login form posted the form
+           on the first click and the user never saw what they had typed. -->
+      <button
+        type="button"
+        onclick={() => (revealed = !revealed)}
+        aria-pressed={revealed}
+        aria-controls={fieldId}
+        aria-label={revealed ? 'Hide password' : 'Show password'}
+        class="absolute top-1/2 right-1 flex -translate-y-1/2 items-center justify-center rounded-md p-1.5 text-faint outline-none transition-colors duration-150 hover:text-fg focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand"
+      >
+        {#if revealed}
+          <EyeOff size={15} aria-hidden="true" />
+        {:else}
+          <Eye size={15} aria-hidden="true" />
+        {/if}
+      </button>
+    {/if}
+  </div>
+
+  {#if error}
+    <p id="{fieldId}-error" class={FIELD_ERROR}>{error}</p>
+  {:else if hint}
+    <p id="{fieldId}-hint" class={FIELD_HINT}>{hint}</p>
+  {/if}
+</div>

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

@@ -0,0 +1,29 @@
+interface Props {
+    value?: string;
+    id?: string;
+    name?: string;
+    label?: string;
+    /** Renders the label to screen readers only. For a row of secrets where the visible name is a table cell. */
+    labelHidden?: boolean;
+    hint?: string;
+    error?: string;
+    placeholder?: string;
+    required?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    autocomplete?: 'new-password' | 'current-password' | 'off';
+    /** False for a field whose value must never be shown, for instance on a shared screen. */
+    revealable?: boolean;
+    class?: string;
+    /** Lands on the control, not on the wrapper, which is where `class` goes. */
+    controlClass?: string;
+    oninput?: (e: Event & {
+        currentTarget: HTMLInputElement;
+    }) => void;
+    onchange?: (e: Event & {
+        currentTarget: HTMLInputElement;
+    }) => void;
+}
+declare const PasswordInput: import("svelte").Component<Props, {}, "value">;
+type PasswordInput = ReturnType<typeof PasswordInput>;
+export default PasswordInput;

package/dist/components/Radio.svelte

@@ -1,10 +1,35 @@
 <script lang="ts">
-  import { FIELD_HINT } from '../internal/field.js';
+  import type { Component } from 'svelte';
+  import { FIELD_ERROR, FIELD_HINT, FIELD_WRAP } from '../internal/field.js';
+  import {
+    CHOICE_DESCRIPTION,
+    CHOICE_FOCUS,
+    CHOICE_ICON_PX,
+    CHOICE_INPUT,
+    CHOICE_LABEL_STACK,
+    choiceBox,
+    choiceIcon,
+    choiceLabel,
+    choiceWrap,
+    type ChoiceSize,
+    type ChoiceVariant,
+  } from '../internal/choice.js';
+
   interface Props {
     value: string;
     group?: string;
     label?: string;
+    /** Screen-reader-only label, for a radio in a table cell whose column header is the visible name. */
+    labelHidden?: boolean;
+    /** Secondary line under the label. */
+    description?: string;
     hint?: string;
+    error?: string;
+    /** Drawn before the label. */
+    icon?: Component<{ size?: number; class?: string }>;
+    size?: ChoiceSize;
+    /** 'card' draws a bordered option whose whole surface is the target. */
+    variant?: ChoiceVariant;
     required?: boolean;
     disabled?: boolean;
     id?: string;
@@ -17,7 +42,13 @@
     value,
     group = $bindable(''),
     label = undefined,
+    labelHidden = false,
+    description = undefined,
     hint = undefined,
+    error = undefined,
+    icon: Icon = undefined,
+    size = 'md',
+    variant = 'inline',
     required = false,
     disabled = false,
     id = undefined,
@@ -26,43 +57,132 @@
     onchange = undefined,
   }: Props = $props();
 
+  /**
+   * The selected dot. Only a radio draws one, so it is not part of the shared
+   * choice contract, but it still steps with the ring: an 8px dot inside a 14px
+   * ring leaves a hairline of background and reads as a solid filled circle.
+   */
+  const DOT: Record<ChoiceSize, string> = {
+    sm: 'h-1.5 w-1.5',
+    md: 'h-2 w-2',
+    lg: 'h-2.5 w-2.5',
+  };
+
+  // $props.id() and not a random string: a random id differs between the server
+  // render and hydration, so every aria-describedby built from it points at an
+  // element that does not exist on the client.
+  const uid = $props.id();
+  const fieldId = $derived(id ?? uid);
+
+  // Error, then hint, then description. A screen reader announces one message,
+  // so the most urgent one has to win rather than the last one rendered. This
+  // is the only route an error takes: aria-invalid is not supported on role
+  // radio, and one option out of a set is not the thing that is invalid. A
+  // group marks itself invalid on the fieldset that holds the options.
+  const messageId = $derived(
+    error
+      ? `${fieldId}-error`
+      : hint
+        ? `${fieldId}-hint`
+        : description
+          ? `${fieldId}-description`
+          : undefined,
+  );
+
+  const selected = $derived(group === value);
+
+  // A card fills its column. An inline option must not: stretched to the full
+  // width of the field wrapper, the label swallows the empty space beside it
+  // and a stray click far from the ring selects the option.
+  const rootClass = $derived(variant === 'card' ? FIELD_WRAP : `${FIELD_WRAP} items-start`);
+
   function handleChange() {
+    // Disabled is enforced here as well as on the input. The native attribute
+    // is what stops a real click, and it is the only thing that does, so a
+    // change arriving any other way - a synthetic event, a script driving the
+    // node - would still move the bound value with nothing on screen to say so.
+    if (disabled) return;
     group = value;
     onchange?.(value);
   }
 </script>
 
-<label
-  class="inline-flex cursor-pointer select-none items-start gap-2.5
-    {disabled ? 'cursor-not-allowed opacity-50' : ''} {cls}"
->
-  <span class="relative mt-0.5 flex shrink-0 items-center justify-center">
-    <input
-      type="radio"
-      {id}
-      {name}
-      {value}
-      {required}
-      {disabled}
-      checked={group === value}
-      onchange={handleChange}
-      class="peer absolute inset-0 m-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed"
-    />
-    <span
-      class="pointer-events-none flex h-4 w-4 items-center justify-center rounded-full border-2 transition-colors duration-150
-        {group === value
-        ? 'border-brand bg-surface-2'
-        : 'border-line bg-surface-2 peer-focus-visible:border-brand'}"
-    >
-      {#if group === value}
-        <span class="h-2 w-2 rounded-full bg-brand"></span>
-      {/if}
-    </span>
+{#snippet control()}
+  <input
+    type="radio"
+    id={fieldId}
+    {name}
+    {value}
+    {required}
+    {disabled}
+    checked={selected}
+    aria-labelledby={label ? `${fieldId}-label` : undefined}
+    aria-describedby={messageId}
+    onchange={handleChange}
+    class={CHOICE_INPUT}
+  />
+{/snippet}
+
+{#snippet mark()}
+  <span class="{choiceBox('radio', size, selected, false)} mt-0.5">
+    {#if selected}
+      <span class="{DOT[size]} rounded-full bg-brand"></span>
+    {/if}
   </span>
-  {#if label || hint}
-    <span class="flex flex-col gap-0.5">
-      {#if label}<span class="text-sm text-fg">{label}</span>{/if}
-      {#if hint}<span class={FIELD_HINT}>{hint}</span>{/if}
+{/snippet}
+
+{#snippet body()}
+  {#if label || description || Icon}
+    <span class={CHOICE_LABEL_STACK}>
+      {#if label || Icon}
+        <span class="flex items-center gap-2">
+          {#if Icon}
+            <span class={choiceIcon(size)}><Icon size={CHOICE_ICON_PX[size]} /></span>
+          {/if}
+          {#if label}
+            <!-- Named by aria-labelledby rather than by the wrapping label, so
+                 the description below stays a description. Read as the label's
+                 own text it became part of the name, and the reader heard the
+                 whole paragraph before it reached the selected state. -->
+            <span id="{fieldId}-label" class="{choiceLabel(size)} {labelHidden ? 'sr-only' : ''}">
+              {label}{#if required}<span class="ml-0.5 text-danger" aria-hidden="true">*</span>{/if}
+            </span>
+          {/if}
+        </span>
+      {/if}
+      {#if description}
+        <span id="{fieldId}-description" class={CHOICE_DESCRIPTION}>{description}</span>
+      {/if}
     </span>
   {/if}
-</label>
+{/snippet}
+
+<div class="{rootClass} {cls}">
+  {#if variant === 'card'}
+    <!-- The input covers the whole card, so the card surface is the element the
+         peer ring can reach and the ring inside it is not. That is deliberate:
+         one control gets one focus indicator, and a ring on the box drawn
+         inside a ring on the card reads as two separate things to focus. -->
+    <label class="relative block">
+      {@render control()}
+      <span class="{choiceWrap('card', selected, disabled)} {CHOICE_FOCUS}">
+        {@render mark()}
+        {@render body()}
+      </span>
+    </label>
+  {:else}
+    <label class={choiceWrap('inline', selected, disabled)}>
+      <span class="relative flex shrink-0 items-center justify-center">
+        {@render control()}
+        {@render mark()}
+      </span>
+      {@render body()}
+    </label>
+  {/if}
+
+  {#if error}
+    <p id="{fieldId}-error" class={FIELD_ERROR}>{error}</p>
+  {:else if hint}
+    <p id="{fieldId}-hint" class={FIELD_HINT}>{hint}</p>
+  {/if}
+</div>