@svgrid/grid 2.2.16 → 2.2.18

package/dist/SvCollapsible.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+  /**
+   * SvCollapsible - a single show/hide region with an accessible trigger (the
+   * standalone form of one accordion item). The header toggles the panel with a
+   * rotating chevron; the panel animates its height open/closed and respects
+   * `prefers-reduced-motion`.
+   *
+   * ```svelte
+   * <SvCollapsible title="Advanced options" bind:open>
+   *   ...content...
+   * </SvCollapsible>
+   * ```
+   */
+  import type { Snippet } from 'svelte'
+  import { nextEditorId } from './editor-contract'
+
+  type Props = {
+    /** Header text (ignored when a `header` snippet is given). */
+    title?: string
+    /** Open state (bindable). */
+    open?: boolean
+    onOpenChange?: (open: boolean) => void
+    disabled?: boolean
+    /** Custom header content (replaces `title`). */
+    header?: Snippet
+    children?: Snippet
+  }
+
+  let { title, open = $bindable(false), onOpenChange, disabled = false, header, children }: Props = $props()
+
+  const uid = nextEditorId('sv-collapse')
+  function toggle() {
+    if (disabled) return
+    open = !open
+    onOpenChange?.(open)
+  }
+</script>
+
+<div class="sv-collapse" class:is-open={open} class:is-disabled={disabled}>
+  <button
+    class="sv-collapse__trigger"
+    type="button"
+    {disabled}
+    aria-expanded={open}
+    aria-controls={`${uid}-panel`}
+    id={`${uid}-trigger`}
+    onclick={toggle}
+  >
+    <span class="sv-collapse__label">{#if header}{@render header()}{:else}{title}{/if}</span>
+    <svg class="sv-collapse__chev" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>
+  </button>
+  <div class="sv-collapse__region" id={`${uid}-panel`} role="region" aria-labelledby={`${uid}-trigger`} inert={!open}>
+    <div class="sv-collapse__content">{@render children?.()}</div>
+  </div>
+</div>
+
+<style>
+  .sv-collapse { border: 1px solid var(--sg-border, #e2e8f0); border-radius: 10px; background: var(--sg-bg, #fff); }
+  .sv-collapse__trigger {
+    display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; box-sizing: border-box;
+    padding: 11px 14px; background: none; border: 0; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 600;
+    color: var(--sg-fg, #0f172a); text-align: start;
+  }
+  .sv-collapse__trigger:hover:not(:disabled) { background: var(--sg-row-hover-bg, #f1f5f9); border-radius: 10px; }
+  .sv-collapse__trigger:disabled { opacity: 0.55; cursor: not-allowed; }
+  .sv-collapse__trigger:focus-visible { outline: 2px solid var(--sg-focus-ring, var(--sg-accent, #2563eb)); outline-offset: -2px; border-radius: 10px; }
+  .sv-collapse__label { min-width: 0; }
+  .sv-collapse__chev { flex: none; color: var(--sg-muted, #64748b); transition: transform 0.16s ease; }
+  .sv-collapse.is-open .sv-collapse__chev { transform: rotate(180deg); }
+  .sv-collapse__region { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.18s ease; }
+  .sv-collapse.is-open .sv-collapse__region { grid-template-rows: 1fr; }
+  .sv-collapse__content { overflow: hidden; padding: 0 14px; min-height: 0; }
+  .sv-collapse.is-open .sv-collapse__content { padding-bottom: 13px; }
+  @media (prefers-reduced-motion: reduce) { .sv-collapse__region, .sv-collapse__chev { transition: none; } }
+</style>

package/dist/SvCollapsible.svelte.d.ts

@@ -0,0 +1,27 @@
+/**
+   * SvCollapsible - a single show/hide region with an accessible trigger (the
+   * standalone form of one accordion item). The header toggles the panel with a
+   * rotating chevron; the panel animates its height open/closed and respects
+   * `prefers-reduced-motion`.
+   *
+   * ```svelte
+   * <SvCollapsible title="Advanced options" bind:open>
+   *   ...content...
+   * </SvCollapsible>
+   * ```
+   */
+import type { Snippet } from 'svelte';
+type Props = {
+    /** Header text (ignored when a `header` snippet is given). */
+    title?: string;
+    /** Open state (bindable). */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    disabled?: boolean;
+    /** Custom header content (replaces `title`). */
+    header?: Snippet;
+    children?: Snippet;
+};
+declare const SvCollapsible: import("svelte").Component<Props, {}, "open">;
+type SvCollapsible = ReturnType<typeof SvCollapsible>;
+export default SvCollapsible;

package/dist/SvColorInput.svelte

@@ -26,6 +26,8 @@
     autoOpen?: boolean
     /** Override the built-in popover strings. */
     messages?: Partial<ColorMessages>
+    /** Stretch to the container width (otherwise hugs its content). */
+    block?: boolean
   }
 
   let {
@@ -44,8 +46,10 @@
     hint,
     dir,
     id,
+    loading = false,
     autoOpen = false,
     messages,
+    block = false,
   }: Props = $props()
 
   const autoId = nextEditorId('sv-color')
@@ -100,12 +104,11 @@
   }
 </script>
 
-<SvField id={uid} {label} {hint} {error} {required} {dir}>
+<SvField frame id={uid} {label} {hint} {error} {required} {dir} {size} {invalid} {disabled} {readonly} {loading} {block} width={block ? undefined : 'fit-content'}>
   <button
     bind:this={triggerEl}
-    class="sv-color sv-color--{size}"
+    class="sv-color__trigger"
     class:is-disabled={disabled}
-    class:is-invalid={invalid}
     {...col.swatchProps()}
     use:focusOpen
   >
@@ -153,22 +156,13 @@
 {#if name}<input type="hidden" {name} value={col.normalized} />{/if}
 
 <style>
-  .sv-color {
-    --_accent: var(--sg-accent, #2563eb);
-    display: inline-flex; align-items: center; gap: 8px;
-    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);
-    padding: 0 10px; cursor: pointer; font: inherit;
+  .sv-color__trigger {
+    display: flex; align-items: center; gap: 8px; width: 100%; height: 100%;
+    background: none; border: 0; padding: 0 10px; cursor: pointer; font: inherit; color: inherit;
   }
-  .sv-color--sm { height: 28px; font-size: 12px; }
-  .sv-color--md { height: 34px; font-size: 13px; }
-  .sv-color--lg { height: 40px; font-size: 15px; }
-  .sv-color.is-disabled { opacity: 0.6; cursor: not-allowed; }
-  .sv-color.is-invalid { border-color: var(--sg-danger, #dc2626); }
-  .sv-color.is-invalid:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--sg-danger, #dc2626) 22%, transparent); }
-  .sv-color:focus-visible { outline: 2px solid var(--sg-focus-ring, var(--_accent)); outline-offset: 2px; }
+  .sv-color__trigger.is-disabled { cursor: not-allowed; }
   .sv-color__swatch { width: 18px; height: 18px; border-radius: 4px; border: 1px solid rgba(0,0,0,0.15); flex: none; }
-  .sv-color__hex { font-variant-numeric: tabular-nums; text-transform: lowercase; }
+  .sv-color__hex { font-variant-numeric: tabular-nums; text-transform: lowercase; white-space: nowrap; }
 
   :global(.sv-color__panel) {
     z-index: 2147483647; width: 208px; padding: 12px;

package/dist/SvColorInput.svelte.d.ts

@@ -13,6 +13,8 @@ type Props = SvEditorProps & {
     autoOpen?: boolean;
     /** Override the built-in popover strings. */
     messages?: Partial<ColorMessages>;
+    /** Stretch to the container width (otherwise hugs its content). */
+    block?: boolean;
 };
 declare const SvColorInput: import("svelte").Component<Props, {}, "value">;
 type SvColorInput = ReturnType<typeof SvColorInput>;

package/dist/SvComboBox.svelte

@@ -8,11 +8,13 @@
    * keyboard + ARIA); only portal/measure/scroll render concerns live here.
    */
   import { anchoredRect, portalToBody, popIn, type AnchoredRect } from './popover'
+  import { startPanelResize } from './panel-resize'
   import { createDismissableLayer } from './a11y/dismissable'
-  import { groupOptions, type ListOption } from './list-option'
+  import { groupOptions, normalizeOptions, type ListOption } from './list-option'
   import SvField from './SvField.svelte'
   import { nextEditorId, resolveMessages, type SvEditorProps } from './editor-contract'
   import { createCombobox } from './createCombobox.svelte'
+  import type { Snippet } from 'svelte'
 
   /** User-facing strings (localizable via `messages`). */
   type ComboMessages = { noResults: string; loading: string; typeMore: string }
@@ -24,6 +26,11 @@
     onChange?: (value: string | number | null) => void
     placeholder?: string
     autoOpen?: boolean
+    /** Show a clear (x) button when a value is selected. */
+    clearable?: boolean
+    /** Show a bottom drag grip so the user can resize the open panel's height
+     *  (hidden when the panel flips upward, where there is no room to grow). */
+    resizable?: boolean
     /** Load options from a server as the user types (debounced). Disables local
      *  filtering; the returned list is shown as-is. */
     loadOptions?: (query: string) => Promise<ListOption[]>
@@ -33,6 +40,14 @@
     debounce?: number
     /** Override the built-in strings (empty-state / loading text). */
     messages?: Partial<ComboMessages>
+    /** Custom render for each option (receives the ListOption). */
+    item?: Snippet<[ListOption]>
+    /** Content pinned above the option list. */
+    header?: Snippet
+    /** Content pinned below the option list. */
+    footer?: Snippet
+    /** Shown when the (non-loading) list is empty; overrides the default text. */
+    noData?: Snippet
   }
 
   let {
@@ -41,6 +56,9 @@
     onChange,
     placeholder = 'Select…',
     disabled = false,
+    readonly = false,
+    clearable = false,
+    resizable = false,
     name,
     size = 'md',
     ariaLabel,
@@ -51,11 +69,16 @@
     hint,
     dir,
     id,
+    loading: loadingProp = false,
     autoOpen = false,
     loadOptions,
     minLength = 1,
     debounce = 250,
     messages,
+    item,
+    header,
+    footer,
+    noData,
   }: Props = $props()
 
   const autoId = nextEditorId('sv-combo')
@@ -66,6 +89,14 @@
   let fieldEl = $state<HTMLDivElement | null>(null)
   let panelEl = $state<HTMLDivElement | null>(null)
   let rect = $state<AnchoredRect>({ top: 0, left: 0, width: 0, openUpward: false, maxHeight: 0, availHeight: 0 })
+  // User-chosen panel height (px) once they drag the resize grip; null = auto.
+  let userHeight = $state<number | null>(null)
+  // Default comfortable cap (px) before the list scrolls; the grip can grow past it.
+  const DEFAULT_CAP = 288
+  const panelMaxH = $derived(
+    resizable && userHeight != null ? Math.min(userHeight, rect.availHeight) : Math.min(rect.availHeight, DEFAULT_CAP),
+  )
+  const showGrip = $derived(resizable && !rect.openUpward)
 
   // Remote data source: fetch options as the query changes (debounced).
   let remoteOptions = $state<ListOption[]>([])
@@ -73,13 +104,14 @@
   let searched = $state(false)
   let debTimer: ReturnType<typeof setTimeout> | undefined
   let reqSeq = 0
-  const effectiveOptions = $derived(loadOptions ? remoteOptions : options)
+  const effectiveOptions = $derived(normalizeOptions(loadOptions ? remoteOptions : options))
 
   const combo = createCombobox({
     options: () => effectiveOptions,
     value: () => value,
     onChange: (v) => onChange?.(v),
     disabled: () => disabled,
+    readonly: () => readonly,
     ariaLabel: () => ariaLabel,
     localFilter: () => !loadOptions,
     focusInput: () => inputEl?.focus(),
@@ -114,8 +146,20 @@
     // estimatedHeight only picks the flip direction (up vs down); the panel's
     // real max-height comes from availHeight below, so it takes its natural
     // content height (options + group labels) and scrolls only when it truly
-    // overflows the room - never from an estimate that under-counts a row.
-    rect = anchoredRect(fieldEl.getBoundingClientRect(), { estimatedHeight: Math.min(combo.filtered.length, 8) * 34 + 12 })
+    // overflows the room - never from an estimate that under-counts a row. When
+    // the user has dragged the grip, anchor the flip decision to THAT height.
+    const est = resizable && userHeight != null ? userHeight : Math.min(combo.filtered.length, 8) * 34 + 12
+    rect = anchoredRect(fieldEl.getBoundingClientRect(), { estimatedHeight: est })
+  }
+
+  function startResize(e: PointerEvent) {
+    if (!panelEl) return
+    startPanelResize(e, {
+      startHeight: panelEl.clientHeight,
+      min: 96,
+      max: () => rect.availHeight,
+      onHeight: (h) => { userHeight = h; updatePos() },
+    })
   }
 
   // Position + reposition + outside-click close are render concerns (need the DOM).
@@ -137,7 +181,7 @@
   function focusOpen(node: HTMLInputElement) { if (autoOpen) { node.focus() } }
 </script>
 
-<SvField id={uid} {label} {hint} {error} {required} {dir}>
+<SvField id={uid} {label} {hint} {error} {required} {dir} loading={loadingProp || loading}>
   <div bind:this={fieldEl} class="sv-combo sv-combo--{size}" class:is-open={combo.open} class:is-disabled={disabled} class:is-invalid={invalid}>
     <input
       bind:this={inputEl}
@@ -147,6 +191,11 @@
       {...combo.inputProps()}
       use:focusOpen
     />
+    {#if clearable && combo.value != null && !disabled && !readonly}
+      <button type="button" class="sv-combo__clear" tabindex="-1" aria-label="Clear" onclick={() => { combo.clear(); inputEl?.focus() }}>
+        <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18" /></svg>
+      </button>
+    {/if}
     <button class="sv-combo__chev" {...combo.triggerProps()}>
       <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6" /></svg>
     </button>
@@ -154,7 +203,8 @@
 </SvField>
 
 {#if combo.open}
-  <div bind:this={panelEl} class="sv-ddl__panel" use:portalToBody use:popIn={{ up: rect.openUpward }} style:position="fixed" style:top={rect.openUpward ? undefined : `${rect.top}px`} style:bottom={rect.openUpward ? `${rect.bottom}px` : undefined} style:left={`${rect.left}px`} style:min-width={`${rect.width}px`} style:max-height={`${Math.min(rect.availHeight, 288)}px`} {...combo.listboxProps()}>
+  <div bind:this={panelEl} class="sv-ddl__panel" class:is-resizable={showGrip} use:portalToBody use:popIn={{ up: rect.openUpward }} style:position="fixed" style:top={rect.openUpward ? undefined : `${rect.top}px`} style:bottom={rect.openUpward ? `${rect.bottom}px` : undefined} style:left={`${rect.left}px`} style:min-width={`${rect.width}px`} style:max-height={`${panelMaxH}px`} style:height={resizable && userHeight != null && !rect.openUpward ? `${panelMaxH}px` : undefined} {...combo.listboxProps()}>
+    {#if header}<div class="sv-ddl__header">{@render header()}</div>{/if}
     {#if loading}
       <div class="sv-ddl__empty sv-ddl__loading"><svg class="sv-ddl__spin" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M21 12a9 9 0 1 1-6.2-8.6" /></svg>{M.loading}</div>
     {:else if loadOptions && !searched && combo.query.trim().length < minLength}
@@ -162,14 +212,23 @@
     {:else if combo.filtered.length}
       {#each groupOptions(combo.filtered) as g (g.group ?? ' ')}
         {#if g.group != null}<div class="sv-ddl__group-label" aria-hidden="true">{g.group}</div>{/if}
-        {#each g.options as opt (opt.value)}
+        {#each g.options as opt (opt.index)}
           <!-- svelte-ignore a11y_click_events_have_key_events a11y_interactive_supports_focus -->
-          <div class="sv-ddl__opt" class:is-active={combo.isActive(opt.index)} class:is-selected={combo.isSelected(opt)} class:is-disabled={opt.disabled} {...combo.optionProps(opt.index)}>{opt.label}</div>
+          <div class="sv-ddl__opt" class:is-active={combo.isActive(opt.index)} class:is-selected={combo.isSelected(opt)} class:is-disabled={opt.disabled} {...combo.optionProps(opt.index)}>{#if item}{@render item(opt)}{:else}{opt.label}{/if}</div>
         {/each}
       {/each}
+    {:else if noData}
+      {@render noData()}
     {:else}
       <div class="sv-ddl__empty">{M.noResults}</div>
     {/if}
+    {#if footer}<div class="sv-ddl__footer">{@render footer()}</div>{/if}
+    {#if showGrip}
+      <!-- svelte-ignore a11y_no_static_element_interactions -->
+      <div class="sv-ddl__grip" onpointerdown={startResize} title="Drag to resize" aria-hidden="true">
+        <span class="sv-ddl__grip-dots"></span>
+      </div>
+    {/if}
   </div>
 {/if}
 {#if name}<input type="hidden" {name} value={value ?? ''} />{/if}
@@ -189,10 +248,28 @@
   .sv-combo.is-invalid.is-open, .sv-combo.is-invalid:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--sg-danger, #dc2626) 22%, transparent); }
   .sv-combo.is-disabled { opacity: 0.6; }
   .sv-combo__input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: inherit; font: inherit; padding-block: 0; padding-inline: 10px 4px; }
+  .sv-combo__clear { display: grid; place-items: center; width: 22px; align-self: center; flex: none; background: none; border: 0; color: var(--sg-muted, #64748b); cursor: pointer; border-radius: 4px; }
+  .sv-combo__clear:hover { color: var(--sg-danger, #dc2626); }
   .sv-combo__chev { display: grid; place-items: center; width: 28px; align-self: stretch; background: none; border: 0; color: var(--sg-muted, #64748b); cursor: pointer; }
   :global(.sv-ddl__empty) { padding: 8px 10px; color: var(--sg-muted, #94a3b8); font-size: 13px; }
+  :global(.sv-ddl__header) { padding: 8px 10px; border-bottom: 1px solid var(--sg-border, #e2e8f0); font-size: 12.5px; color: var(--sg-muted, #64748b); }
+  :global(.sv-ddl__footer) { padding: 8px 10px; border-top: 1px solid var(--sg-border, #e2e8f0); font-size: 12.5px; }
   :global(.sv-ddl__loading) { display: flex; align-items: center; gap: 7px; }
   :global(.sv-ddl__spin) { animation: sv-combo-spin 0.7s linear infinite; }
   @keyframes sv-combo-spin { to { transform: rotate(360deg); } }
   @media (prefers-reduced-motion: reduce) { :global(.sv-ddl__spin) { animation: none; } }
+  /* Bottom resize grip (shared "····" handle - see SvDropDownList / panel-resize). */
+  :global(.sv-ddl__panel.is-resizable) { padding-bottom: 0; }
+  :global(.sv-ddl__grip) {
+    position: sticky; bottom: 0; z-index: 1; margin: 2px -4px -4px; height: 15px;
+    display: flex; align-items: center; justify-content: center; cursor: ns-resize;
+    background: var(--sg-bg, #fff); border-top: 1px solid var(--sg-border, #e2e8f0);
+    border-radius: 0 0 10px 10px; touch-action: none;
+  }
+  :global(.sv-ddl__grip-dots) {
+    width: 26px; height: 4px; color: var(--sg-muted, #94a3b8); opacity: 0.6;
+    background-image: radial-gradient(currentColor 1px, transparent 1.6px);
+    background-size: 6px 4px; background-position: center; background-repeat: repeat-x;
+  }
+  :global(.sv-ddl__grip:hover .sv-ddl__grip-dots) { opacity: 1; }
 </style>

package/dist/SvComboBox.svelte.d.ts

@@ -1,5 +1,6 @@
 import { type ListOption } from './list-option';
 import { type SvEditorProps } from './editor-contract';
+import type { Snippet } from 'svelte';
 /** User-facing strings (localizable via `messages`). */
 type ComboMessages = {
     noResults: string;
@@ -12,6 +13,11 @@ type Props = SvEditorProps & {
     onChange?: (value: string | number | null) => void;
     placeholder?: string;
     autoOpen?: boolean;
+    /** Show a clear (x) button when a value is selected. */
+    clearable?: boolean;
+    /** Show a bottom drag grip so the user can resize the open panel's height
+     *  (hidden when the panel flips upward, where there is no room to grow). */
+    resizable?: boolean;
     /** Load options from a server as the user types (debounced). Disables local
      *  filtering; the returned list is shown as-is. */
     loadOptions?: (query: string) => Promise<ListOption[]>;
@@ -21,6 +27,14 @@ type Props = SvEditorProps & {
     debounce?: number;
     /** Override the built-in strings (empty-state / loading text). */
     messages?: Partial<ComboMessages>;
+    /** Custom render for each option (receives the ListOption). */
+    item?: Snippet<[ListOption]>;
+    /** Content pinned above the option list. */
+    header?: Snippet;
+    /** Content pinned below the option list. */
+    footer?: Snippet;
+    /** Shown when the (non-loading) list is empty; overrides the default text. */
+    noData?: Snippet;
 };
 declare const SvComboBox: import("svelte").Component<Props, {}, "">;
 type SvComboBox = ReturnType<typeof SvComboBox>;

package/dist/SvCountryInput.svelte

@@ -29,7 +29,7 @@
   }
 
   let {
-    value = null,
+    value = $bindable<string | null>(null),
     onChange,
     showDial = false,
     placeholder = 'Select country…',
@@ -58,7 +58,7 @@
 
   const ci = createCountryInput({
     value: () => value,
-    onChange: (c) => onChange?.(c),
+    onChange: (c) => { value = c; onChange?.(c) },
     disabled: () => disabled,
     ariaLabel: () => ariaLabel,
     searchLabel: () => M.search,

package/dist/SvCountryInput.svelte.d.ts

@@ -13,6 +13,6 @@ type Props = SvEditorProps & {
     /** Override the built-in strings (search + empty-state). */
     messages?: Partial<CountryMessages>;
 };
-declare const SvCountryInput: import("svelte").Component<Props, {}, "">;
+declare const SvCountryInput: import("svelte").Component<Props, {}, "value">;
 type SvCountryInput = ReturnType<typeof SvCountryInput>;
 export default SvCountryInput;