@svgrid/grid 2.6.16 → 2.6.17

package/dist/SvSwitchButton.svelte

@@ -1,108 +1,108 @@
-<script lang="ts">
-  /**
-   * SvSwitchButton - an on/off sliding switch (ARIA `switch`). Parity: Smart
-   * `smart-switch-button`. Controlled via `checked` + `onChange`; keyboard
-   * togglable; optional inline on/off labels.
-   */
-  import SvField from './SvField.svelte'
-  import { nextEditorId, type SvEditorProps } from './editor-contract'
-  import { createSwitch } from './createSwitch.svelte'
-
-  type Props = SvEditorProps & {
-    checked?: boolean
-    onChange?: (checked: boolean) => void
-    /** Optional labels rendered inside the track. */
-    onLabel?: string
-    offLabel?: string
-  }
-
-  let {
-    checked = false,
-    onChange,
-    disabled = false,
-    readonly = false,
-    size = 'md',
-    name,
-    ariaLabel,
-    invalid = false,
-    required = false,
-    error,
-    label,
-    hint,
-    dir,
-    id,
-    onLabel,
-    offLabel,
-  }: Props = $props()
-
-  const autoId = nextEditorId('sv-switch')
-  const uid = $derived(id ?? autoId)
-
-  // The styled switch is just a renderer over the headless core.
-  const sw = createSwitch({
-    checked: () => checked,
-    onChange: (v) => { if (readonly) return; onChange?.(v) },
-    disabled: () => disabled,
-    ariaLabel: () => ariaLabel,
-    id: () => uid,
-    invalid: () => invalid,
-    required: () => required,
-    error: () => error,
-    hint: () => hint,
-  })
-</script>
-
-<SvField id={uid} {label} {hint} {error} {required} {dir}>
-  <!-- role="switch" arrives via switchProps(), which the a11y pass cannot see through -->
-  <!-- svelte-ignore a11y_role_supports_aria_props_implicit -->
-  <button
-    class="sv-switch sv-switch--{size}"
-    class:is-on={checked}
-    class:is-readonly={readonly}
-    {...sw.switchProps()}
-    aria-readonly={readonly ? 'true' : undefined}
-  >
-    <span class="sv-switch__track">
-      {#if onLabel || offLabel}
-        <span class="sv-switch__txt sv-switch__txt--on">{onLabel ?? ''}</span>
-        <span class="sv-switch__txt sv-switch__txt--off">{offLabel ?? ''}</span>
-      {/if}
-      <span class="sv-switch__thumb"></span>
-    </span>
-    {#if name}<input type="hidden" {name} value={checked ? 'true' : 'false'} />{/if}
-  </button>
-</SvField>
-
-<style>
-  .sv-switch {
-    --_accent: var(--sg-accent, #2563eb);
-    --_h: 22px; --_w: 40px;
-    display: inline-flex; align-items: center; background: none; border: 0; padding: 2px; cursor: pointer;
-  }
-  .sv-switch--sm { --_h: 18px; --_w: 32px; }
-  .sv-switch--lg { --_h: 28px; --_w: 52px; }
-  .sv-switch[disabled] { opacity: 0.5; cursor: not-allowed; }
-  .sv-switch.is-readonly { cursor: default; }
-  .sv-switch__track {
-    position: relative; width: var(--_w); height: var(--_h); border-radius: 999px;
-    background: var(--sg-border, #cbd5e1); transition: background 0.16s;
-    display: inline-flex; align-items: center;
-  }
-  .sv-switch.is-on .sv-switch__track { background: var(--_accent); }
-  .sv-switch__thumb {
-    position: absolute; inset-inline-start: 2px; top: 50%; transform: translateY(-50%);
-    width: calc(var(--_h) - 4px); height: calc(var(--_h) - 4px); border-radius: 50%;
-    background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: inset-inline-start 0.16s;
-  }
-  .sv-switch.is-on .sv-switch__thumb { inset-inline-start: calc(var(--_w) - var(--_h) + 2px); }
-  .sv-switch__txt {
-    position: absolute; font-size: 9px; font-weight: 700; color: #fff; text-transform: uppercase;
-    top: 50%; transform: translateY(-50%);
-  }
-  .sv-switch__txt--on { inset-inline-start: 6px; opacity: 0; }
-  .sv-switch__txt--off { inset-inline-end: 5px; color: var(--sg-muted, #64748b); }
-  .sv-switch.is-on .sv-switch__txt--on { opacity: 1; }
-  .sv-switch.is-on .sv-switch__txt--off { opacity: 0; }
-  .sv-switch:focus-visible { outline: none; }
-  .sv-switch:focus-visible .sv-switch__track { outline: 2px solid var(--sg-focus-ring, var(--_accent)); outline-offset: 2px; }
-</style>
+<script lang="ts">
+  /**
+   * SvSwitchButton - an on/off sliding switch (ARIA `switch`). Parity: Smart
+   * `smart-switch-button`. Controlled via `checked` + `onChange`; keyboard
+   * togglable; optional inline on/off labels.
+   */
+  import SvField from './SvField.svelte'
+  import { nextEditorId, type SvEditorProps } from './editor-contract'
+  import { createSwitch } from './createSwitch.svelte'
+
+  type Props = SvEditorProps & {
+    checked?: boolean
+    onChange?: (checked: boolean) => void
+    /** Optional labels rendered inside the track. */
+    onLabel?: string
+    offLabel?: string
+  }
+
+  let {
+    checked = false,
+    onChange,
+    disabled = false,
+    readonly = false,
+    size = 'md',
+    name,
+    ariaLabel,
+    invalid = false,
+    required = false,
+    error,
+    label,
+    hint,
+    dir,
+    id,
+    onLabel,
+    offLabel,
+  }: Props = $props()
+
+  const autoId = nextEditorId('sv-switch')
+  const uid = $derived(id ?? autoId)
+
+  // The styled switch is just a renderer over the headless core.
+  const sw = createSwitch({
+    checked: () => checked,
+    onChange: (v) => { if (readonly) return; onChange?.(v) },
+    disabled: () => disabled,
+    ariaLabel: () => ariaLabel,
+    id: () => uid,
+    invalid: () => invalid,
+    required: () => required,
+    error: () => error,
+    hint: () => hint,
+  })
+</script>
+
+<SvField id={uid} {label} {hint} {error} {required} {dir}>
+  <!-- role="switch" arrives via switchProps(), which the a11y pass cannot see through -->
+  <!-- svelte-ignore a11y_role_supports_aria_props_implicit -->
+  <button
+    class="sv-switch sv-switch--{size}"
+    class:is-on={checked}
+    class:is-readonly={readonly}
+    {...sw.switchProps()}
+    aria-readonly={readonly ? 'true' : undefined}
+  >
+    <span class="sv-switch__track">
+      {#if onLabel || offLabel}
+        <span class="sv-switch__txt sv-switch__txt--on">{onLabel ?? ''}</span>
+        <span class="sv-switch__txt sv-switch__txt--off">{offLabel ?? ''}</span>
+      {/if}
+      <span class="sv-switch__thumb"></span>
+    </span>
+    {#if name}<input type="hidden" {name} value={checked ? 'true' : 'false'} />{/if}
+  </button>
+</SvField>
+
+<style>
+  .sv-switch {
+    --_accent: var(--sg-accent, #2563eb);
+    --_h: 22px; --_w: 40px;
+    display: inline-flex; align-items: center; background: none; border: 0; padding: 2px; cursor: pointer;
+  }
+  .sv-switch--sm { --_h: 18px; --_w: 32px; }
+  .sv-switch--lg { --_h: 28px; --_w: 52px; }
+  .sv-switch[disabled] { opacity: 0.5; cursor: not-allowed; }
+  .sv-switch.is-readonly { cursor: default; }
+  .sv-switch__track {
+    position: relative; width: var(--_w); height: var(--_h); border-radius: 999px;
+    background: var(--sg-border, #cbd5e1); transition: background 0.16s;
+    display: inline-flex; align-items: center;
+  }
+  .sv-switch.is-on .sv-switch__track { background: var(--_accent); }
+  .sv-switch__thumb {
+    position: absolute; inset-inline-start: 2px; top: 50%; transform: translateY(-50%);
+    width: calc(var(--_h) - 4px); height: calc(var(--_h) - 4px); border-radius: 50%;
+    background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: inset-inline-start 0.16s;
+  }
+  .sv-switch.is-on .sv-switch__thumb { inset-inline-start: calc(var(--_w) - var(--_h) + 2px); }
+  .sv-switch__txt {
+    position: absolute; font-size: 9px; font-weight: 700; color: #fff; text-transform: uppercase;
+    top: 50%; transform: translateY(-50%);
+  }
+  .sv-switch__txt--on { inset-inline-start: 6px; opacity: 0; }
+  .sv-switch__txt--off { inset-inline-end: 5px; color: var(--sg-muted, #64748b); }
+  .sv-switch.is-on .sv-switch__txt--on { opacity: 1; }
+  .sv-switch.is-on .sv-switch__txt--off { opacity: 0; }
+  .sv-switch:focus-visible { outline: none; }
+  .sv-switch:focus-visible .sv-switch__track { outline: 2px solid var(--sg-focus-ring, var(--_accent)); outline-offset: 2px; }
+</style>

package/dist/SvSwitchButton.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type SvEditorProps } from './editor-contract';
+import { type SvEditorProps } from './editor-contract.js';
 type Props = SvEditorProps & {
     checked?: boolean;
     onChange?: (checked: boolean) => void;

package/dist/SvTabs.svelte.d.ts

@@ -1,4 +1,4 @@
-export type { TabItem } from './createTabs.svelte';
+export type { TabItem } from './createTabs.svelte.js';
 /**
    * SvTabs - a WAI-ARIA tabs widget with roving tabindex + arrow-key navigation,
    * four `tabPosition`s (top / bottom / left / right) and optional closable tabs.
@@ -9,8 +9,8 @@ export type { TabItem } from './createTabs.svelte';
    * `createTabs` core; this component is one styled renderer over it.
    */
 import type { Snippet } from 'svelte';
-import { type EditorDir } from './editor-contract';
-import { type TabItem } from './createTabs.svelte';
+import { type EditorDir } from './editor-contract.js';
+import { type TabItem } from './createTabs.svelte.js';
 type Props = {
     tabs: ReadonlyArray<TabItem>;
     value?: string;

package/dist/SvTagsInput.svelte

@@ -1,115 +1,115 @@
-<script lang="ts">
-  /**
-   * SvTagsInput - editable token/chips input. Type + Enter/comma to add,
-   * Backspace to remove the last, click × to remove a chip. Parity: Smart
-   * `smart-tags` / `smart-input` token mode. Emits string[].
-   *
-   * One styled renderer over the headless `createTagsInput` core (draft +
-   * add/remove + keyboard).
-   */
-  import SvField from './SvField.svelte'
-  import { nextEditorId, resolveMessages, type SvEditorProps } from './editor-contract'
-  import { createTagsInput } from './createTagsInput.svelte'
-
-  /** User-facing strings (localizable via `messages`). */
-  type TagsMessages = { add: string; remove: string }
-  const DEFAULT_MESSAGES: TagsMessages = { add: 'Add tag', remove: 'Remove' }
-
-  type Props = SvEditorProps & {
-    value?: string[]
-    onChange?: (tags: string[]) => void
-    placeholder?: string
-    /** Reject duplicate tags. Default true. */
-    unique?: boolean
-    max?: number
-    /** Override the built-in strings (draft + remove aria-labels). */
-    messages?: Partial<TagsMessages>
-  }
-
-  let {
-    value = $bindable<string[]>([]),
-    onChange,
-    placeholder = 'Add tag…',
-    disabled = false,
-    unique = true,
-    max = Infinity,
-    size = 'md',
-    name,
-    ariaLabel,
-    block = false,
-    invalid = false,
-    required = false,
-    error,
-    label,
-    hint,
-    dir,
-    id,
-    messages,
-  }: Props = $props()
-
-  const autoId = nextEditorId('sv-tags')
-  const uid = $derived(id ?? autoId)
-  const M = $derived(resolveMessages(DEFAULT_MESSAGES, messages))
-
-  const ti = createTagsInput({
-    value: () => value,
-    // Write `value` (so `bind:value` works) AND fire `onChange` (callback users).
-    onChange: (t) => { value = t; onChange?.(t) },
-    disabled: () => disabled,
-    unique: () => unique,
-    max: () => max,
-    ariaLabel: () => ariaLabel,
-    addLabel: () => M.add,
-    removeLabel: () => M.remove,
-    id: () => uid,
-    invalid: () => invalid,
-    required: () => required,
-    error: () => error,
-    hint: () => hint,
-  })
-</script>
-
-<SvField id={uid} {label} {hint} {error} {required} {dir}>
-  <div class="sv-tags sv-tags--{size}" class:is-block={block} class:is-disabled={disabled} class:is-invalid={invalid} {...ti.rootProps()}>
-    {#each value as tag, i (tag + i)}
-      <span class="sv-tags__chip" {...ti.tagProps(i)}>
-        <span class="sv-tags__label">{tag}</span>
-        {#if !disabled}
-          <button class="sv-tags__x" {...ti.removeProps(i)}>&times;</button>
-        {/if}
-      </span>
-    {/each}
-    <input
-      class="sv-tags__input"
-      placeholder={value.length ? '' : placeholder}
-      {...ti.inputProps()}
-    />
-    {#if name}<input type="hidden" {name} value={value.join(',')} />{/if}
-  </div>
-</SvField>
-
-<style>
-  .sv-tags {
-    --_accent: var(--sg-accent, #2563eb);
-    --_minh: 34px; --_chip-h: 22px; --_fs: 13px;
-    display: flex; flex-wrap: wrap; gap: 5px; align-items: center; width: 280px; min-height: var(--_minh); padding: 4px 6px;
-    background: var(--sg-input-bg, #fff); color: var(--sg-fg, #0f172a);
-    border: 1px solid var(--sg-input-border, var(--sg-border, #cbd5e1)); border-radius: var(--sg-radius, 8px);
-  }
-  .sv-tags--sm { --_minh: 28px; --_chip-h: 19px; --_fs: 12px; }
-  .sv-tags--lg { --_minh: 40px; --_chip-h: 26px; --_fs: 15px; }
-  .sv-tags:focus-within { border-color: var(--_accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 22%, transparent); }
-  .sv-tags.is-invalid { border-color: var(--sg-danger, #dc2626); }
-  .sv-tags.is-invalid:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--sg-danger, #dc2626) 22%, transparent); }
-  .sv-tags.is-disabled { opacity: 0.6; }
-  .sv-tags__chip {
-    display: inline-flex; align-items: center; gap: 4px; height: var(--_chip-h); padding-block: 0; padding-inline: 8px 4px;
-    background: color-mix(in srgb, var(--_accent) 14%, transparent); color: var(--_accent);
-    border-radius: 5px; font-size: calc(var(--_fs) - 1px); font-weight: 600;
-  }
-  .sv-tags__x { background: none; border: 0; color: inherit; cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; opacity: 0.7; }
-  .sv-tags__x:hover { opacity: 1; }
-  .sv-tags__input { flex: 1; min-width: 80px; border: 0; background: none; outline: none; color: inherit; font: inherit; font-size: var(--_fs); height: 24px; }
-  /* Fill the container - see `block` in SvEditorProps. */
-  .sv-tags.is-block { width: 100%; max-width: 100%; }
-</style>
+<script lang="ts">
+  /**
+   * SvTagsInput - editable token/chips input. Type + Enter/comma to add,
+   * Backspace to remove the last, click × to remove a chip. Parity: Smart
+   * `smart-tags` / `smart-input` token mode. Emits string[].
+   *
+   * One styled renderer over the headless `createTagsInput` core (draft +
+   * add/remove + keyboard).
+   */
+  import SvField from './SvField.svelte'
+  import { nextEditorId, resolveMessages, type SvEditorProps } from './editor-contract'
+  import { createTagsInput } from './createTagsInput.svelte'
+
+  /** User-facing strings (localizable via `messages`). */
+  type TagsMessages = { add: string; remove: string }
+  const DEFAULT_MESSAGES: TagsMessages = { add: 'Add tag', remove: 'Remove' }
+
+  type Props = SvEditorProps & {
+    value?: string[]
+    onChange?: (tags: string[]) => void
+    placeholder?: string
+    /** Reject duplicate tags. Default true. */
+    unique?: boolean
+    max?: number
+    /** Override the built-in strings (draft + remove aria-labels). */
+    messages?: Partial<TagsMessages>
+  }
+
+  let {
+    value = $bindable<string[]>([]),
+    onChange,
+    placeholder = 'Add tag…',
+    disabled = false,
+    unique = true,
+    max = Infinity,
+    size = 'md',
+    name,
+    ariaLabel,
+    block = false,
+    invalid = false,
+    required = false,
+    error,
+    label,
+    hint,
+    dir,
+    id,
+    messages,
+  }: Props = $props()
+
+  const autoId = nextEditorId('sv-tags')
+  const uid = $derived(id ?? autoId)
+  const M = $derived(resolveMessages(DEFAULT_MESSAGES, messages))
+
+  const ti = createTagsInput({
+    value: () => value,
+    // Write `value` (so `bind:value` works) AND fire `onChange` (callback users).
+    onChange: (t) => { value = t; onChange?.(t) },
+    disabled: () => disabled,
+    unique: () => unique,
+    max: () => max,
+    ariaLabel: () => ariaLabel,
+    addLabel: () => M.add,
+    removeLabel: () => M.remove,
+    id: () => uid,
+    invalid: () => invalid,
+    required: () => required,
+    error: () => error,
+    hint: () => hint,
+  })
+</script>
+
+<SvField id={uid} {label} {hint} {error} {required} {dir}>
+  <div class="sv-tags sv-tags--{size}" class:is-block={block} class:is-disabled={disabled} class:is-invalid={invalid} {...ti.rootProps()}>
+    {#each value as tag, i (tag + i)}
+      <span class="sv-tags__chip" {...ti.tagProps(i)}>
+        <span class="sv-tags__label">{tag}</span>
+        {#if !disabled}
+          <button class="sv-tags__x" {...ti.removeProps(i)}>&times;</button>
+        {/if}
+      </span>
+    {/each}
+    <input
+      class="sv-tags__input"
+      placeholder={value.length ? '' : placeholder}
+      {...ti.inputProps()}
+    />
+    {#if name}<input type="hidden" {name} value={value.join(',')} />{/if}
+  </div>
+</SvField>
+
+<style>
+  .sv-tags {
+    --_accent: var(--sg-accent, #2563eb);
+    --_minh: 34px; --_chip-h: 22px; --_fs: 13px;
+    display: flex; flex-wrap: wrap; gap: 5px; align-items: center; width: 280px; min-height: var(--_minh); padding: 4px 6px;
+    background: var(--sg-input-bg, #fff); color: var(--sg-fg, #0f172a);
+    border: 1px solid var(--sg-input-border, var(--sg-border, #cbd5e1)); border-radius: var(--sg-radius, 8px);
+  }
+  .sv-tags--sm { --_minh: 28px; --_chip-h: 19px; --_fs: 12px; }
+  .sv-tags--lg { --_minh: 40px; --_chip-h: 26px; --_fs: 15px; }
+  .sv-tags:focus-within { border-color: var(--_accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 22%, transparent); }
+  .sv-tags.is-invalid { border-color: var(--sg-danger, #dc2626); }
+  .sv-tags.is-invalid:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--sg-danger, #dc2626) 22%, transparent); }
+  .sv-tags.is-disabled { opacity: 0.6; }
+  .sv-tags__chip {
+    display: inline-flex; align-items: center; gap: 4px; height: var(--_chip-h); padding-block: 0; padding-inline: 8px 4px;
+    background: color-mix(in srgb, var(--_accent) 14%, transparent); color: var(--_accent);
+    border-radius: 5px; font-size: calc(var(--_fs) - 1px); font-weight: 600;
+  }
+  .sv-tags__x { background: none; border: 0; color: inherit; cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; opacity: 0.7; }
+  .sv-tags__x:hover { opacity: 1; }
+  .sv-tags__input { flex: 1; min-width: 80px; border: 0; background: none; outline: none; color: inherit; font: inherit; font-size: var(--_fs); height: 24px; }
+  /* Fill the container - see `block` in SvEditorProps. */
+  .sv-tags.is-block { width: 100%; max-width: 100%; }
+</style>

package/dist/SvTagsInput.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type SvEditorProps } from './editor-contract';
+import { type SvEditorProps } from './editor-contract.js';
 /** User-facing strings (localizable via `messages`). */
 type TagsMessages = {
     add: string;

package/dist/SvTextArea.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type SvEditorProps } from './editor-contract';
+import { type SvEditorProps } from './editor-contract.js';
 type Props = SvEditorProps & {
     value?: string;
     onChange?: (value: string) => void;