@svgrid/grid 2.2.16 → 2.2.17

package/src/SvSlider.svelte

@@ -39,6 +39,8 @@
     labels = 'none',
     showValue = false,
     disabled = false,
+    readonly = false,
+    size = 'md',
     orientation = 'horizontal',
     name,
     ariaLabel,
@@ -60,7 +62,7 @@
   // in the headless `createSlider` core; the component keeps the DOM measuring.
   const slider = createSlider({
     value: () => value,
-    onChange: (v) => onChange?.(v),
+    onChange: (v) => { if (readonly) return; onChange?.(v) },
     min: () => min,
     max: () => max,
     step: () => step,
@@ -69,6 +71,11 @@
     disabled: () => disabled,
     ariaLabel: () => ariaLabel ?? label,
     rtl: () => resolvedDir === 'rtl',
+    id: () => uid,
+    invalid: () => invalid,
+    required: () => required,
+    error: () => error,
+    hint: () => hint,
   })
   const lo = $derived(slider.lo)
   const hi = $derived(slider.hi)
@@ -87,7 +94,7 @@
   // The rect is measured here (a DOM concern) and passed INTO the core.
   let trackEl: HTMLDivElement | null = null
   function onTrackDown(e: PointerEvent) {
-    if (disabled) return
+    if (disabled || readonly) return
     slider.pointerDown({ x: e.clientX, y: e.clientY }, trackEl!.getBoundingClientRect())
     trackEl?.setPointerCapture(e.pointerId)
   }
@@ -102,8 +109,9 @@
 
 <SvField id={uid} {label} {hint} {error} {required} {dir}>
 <div
-  class="sv-slider sv-slider--{orientation}"
+  class="sv-slider sv-slider--{orientation} sv-slider--{size}"
   class:is-disabled={disabled}
+  class:is-readonly={readonly}
   dir={resolvedDir}
 >
   <!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -126,14 +134,14 @@
     {/each}
 
     {#if range}
-      <div class="sv-slider__thumb" style:--p={`${pct(lo)}%`} {...slider.thumbProps(0)}>
+      <div class="sv-slider__thumb" style:--p={`${pct(lo)}%`} {...slider.thumbProps(0)} aria-readonly={readonly ? 'true' : undefined}>
         {#if showValue}<span class="sv-slider__bubble">{fmt(lo)}</span>{/if}
       </div>
-      <div class="sv-slider__thumb" style:--p={`${pct(hi)}%`} {...slider.thumbProps(1)}>
+      <div class="sv-slider__thumb" style:--p={`${pct(hi)}%`} {...slider.thumbProps(1)} aria-readonly={readonly ? 'true' : undefined}>
         {#if showValue}<span class="sv-slider__bubble">{fmt(hi)}</span>{/if}
       </div>
     {:else}
-      <div class="sv-slider__thumb" style:--p={`${pct(hi)}%`} {...slider.thumbProps(0)}>
+      <div class="sv-slider__thumb" style:--p={`${pct(hi)}%`} {...slider.thumbProps(0)} aria-readonly={readonly ? 'true' : undefined}>
         {#if showValue}<span class="sv-slider__bubble">{fmt(hi)}</span>{/if}
       </div>
     {/if}
@@ -152,15 +160,20 @@
 </SvField>
 
 <style>
-  .sv-slider { --_accent: var(--sg-accent, #2563eb); --_track: var(--sg-border, #e2e8f0); padding: 10px; }
+  .sv-slider { --_accent: var(--sg-accent, #2563eb); --_track: var(--sg-border, #e2e8f0); --_th: 16px; --_trk: 6px; padding: 10px; }
+  .sv-slider--sm { --_th: 13px; --_trk: 4px; }
+  .sv-slider--lg { --_th: 20px; --_trk: 8px; }
   .sv-slider--horizontal { width: 240px; }
+  .sv-slider--horizontal.sv-slider--sm { width: 180px; }
+  .sv-slider--horizontal.sv-slider--lg { width: 300px; }
   .sv-slider--vertical { height: 200px; width: 40px; }
   .sv-slider.is-disabled { opacity: 0.5; pointer-events: none; }
+  .sv-slider.is-readonly .sv-slider__track, .sv-slider.is-readonly .sv-slider__thumb { cursor: default; }
   .sv-slider__track {
     position: relative; background: var(--_track); border-radius: 999px; cursor: pointer; touch-action: none;
   }
-  .sv-slider--horizontal .sv-slider__track { height: 6px; }
-  .sv-slider--vertical .sv-slider__track { width: 6px; height: 100%; margin: 0 auto; }
+  .sv-slider--horizontal .sv-slider__track { height: var(--_trk); }
+  .sv-slider--vertical .sv-slider__track { width: var(--_trk); height: 100%; margin: 0 auto; }
   .sv-slider__scale { position: relative; height: 15px; margin-top: 8px; font-size: 11px; color: var(--sg-muted, #64748b); font-variant-numeric: tabular-nums; }
   .sv-slider__scale--ends { display: flex; justify-content: space-between; }
   .sv-slider__scale-lbl { position: absolute; inset-inline-start: var(--p); transform: translateX(-50%); white-space: nowrap; }
@@ -168,7 +181,7 @@
   .sv-slider--horizontal .sv-slider__fill { inset-inline-start: var(--a); inset-inline-end: calc(100% - var(--b)); top: 0; bottom: 0; }
   .sv-slider--vertical .sv-slider__fill { bottom: var(--a); top: calc(100% - var(--b)); left: 0; right: 0; }
   .sv-slider__thumb {
-    position: absolute; width: 16px; height: 16px; border-radius: 50%;
+    position: absolute; width: var(--_th); height: var(--_th); border-radius: 50%;
     background: #fff; border: 2px solid var(--_accent); box-shadow: 0 1px 3px rgba(0,0,0,0.25);
     cursor: grab; touch-action: none;
   }

package/src/SvSpinner.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  /**
+   * SvSpinner - a dedicated indeterminate loading spinner (distinct from the
+   * determinate SvProgress bars). Sizeable, colorable, and it respects
+   * `prefers-reduced-motion`. Give it a `label` for screen readers.
+   *
+   * ```svelte
+   * <SvSpinner size="lg" label="Loading results" />
+   * ```
+   */
+  type Props = {
+    /** Diameter in px, or a named size. Default `md` (20px). */
+    size?: 'sm' | 'md' | 'lg' | number
+    /** Stroke color (defaults to the accent token). */
+    color?: string
+    /** Accessible label; when omitted the spinner is `aria-hidden`. */
+    label?: string
+  }
+
+  let { size = 'md', color, label }: Props = $props()
+  const px = $derived(typeof size === 'number' ? size : size === 'sm' ? 15 : size === 'lg' ? 28 : 20)
+</script>
+
+<span
+  class="sv-spinner"
+  role={label ? 'status' : undefined}
+  aria-label={label}
+  aria-hidden={label ? undefined : 'true'}
+  style:width={`${px}px`}
+  style:height={`${px}px`}
+  style:color={color}
+></span>
+
+<style>
+  .sv-spinner {
+    display: inline-block; box-sizing: border-box; flex: none; border-radius: 50%;
+    border: 2px solid color-mix(in srgb, currentcolor 25%, transparent);
+    border-top-color: currentcolor; color: var(--sg-accent, #2563eb);
+    animation: sv-spinner-rot 0.6s linear infinite;
+  }
+  @keyframes sv-spinner-rot { to { transform: rotate(360deg); } }
+  @media (prefers-reduced-motion: reduce) { .sv-spinner { animation-duration: 1.4s; } }
+</style>

package/src/SvStack.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  /**
+   * SvStack - a vertical flex layout primitive: stacks children in a column with a
+   * consistent `gap` and optional cross-axis `align`. The building block for form
+   * rows, card bodies, and sidebars. (For a horizontal row use SvGroup.)
+   *
+   * ```svelte
+   * <SvStack gap={12}><A /><B /><C /></SvStack>
+   * ```
+   */
+  import type { Snippet } from 'svelte'
+
+  type Props = {
+    /** Gap between children (px, or any CSS length). Default 12. */
+    gap?: number | string
+    /** Cross-axis alignment. */
+    align?: 'start' | 'center' | 'end' | 'stretch'
+    /** Main-axis distribution. */
+    justify?: 'start' | 'center' | 'end' | 'between' | 'around'
+    /** Wrapping element tag. Default `div`. */
+    as?: string
+    children?: Snippet
+  }
+
+  let { gap = 12, align = 'stretch', justify = 'start', as = 'div', children }: Props = $props()
+  const g = $derived(typeof gap === 'number' ? `${gap}px` : gap)
+  const alignMap = { start: 'flex-start', center: 'center', end: 'flex-end', stretch: 'stretch' } as const
+  const justifyMap = { start: 'flex-start', center: 'center', end: 'flex-end', between: 'space-between', around: 'space-around' } as const
+</script>
+
+<svelte:element this={as} class="sv-stack" style:gap={g} style:align-items={alignMap[align]} style:justify-content={justifyMap[justify]}>
+  {@render children?.()}
+</svelte:element>
+
+<style>
+  .sv-stack { display: flex; flex-direction: column; min-width: 0; }
+</style>

package/src/SvSwitchButton.svelte

@@ -20,6 +20,7 @@
     checked = false,
     onChange,
     disabled = false,
+    readonly = false,
     size = 'md',
     name,
     ariaLabel,
@@ -40,7 +41,7 @@
   // The styled switch is just a renderer over the headless core.
   const sw = createSwitch({
     checked: () => checked,
-    onChange: (v) => onChange?.(v),
+    onChange: (v) => { if (readonly) return; onChange?.(v) },
     disabled: () => disabled,
     ariaLabel: () => ariaLabel,
     id: () => uid,
@@ -53,9 +54,12 @@
 
 <SvField id={uid} {label} {hint} {error} {required} {dir}>
   <button
+    role="switch"
     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}
@@ -77,6 +81,7 @@
   .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;

package/src/SvTagsInput.svelte

@@ -33,6 +33,7 @@
     disabled = false,
     unique = true,
     max = Infinity,
+    size = 'md',
     name,
     ariaLabel,
     invalid = false,
@@ -68,7 +69,7 @@
 </script>
 
 <SvField id={uid} {label} {hint} {error} {required} {dir}>
-  <div class="sv-tags" class:is-disabled={disabled} class:is-invalid={invalid} {...ti.rootProps()}>
+  <div class="sv-tags sv-tags--{size}" 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>
@@ -89,20 +90,23 @@
 <style>
   .sv-tags {
     --_accent: var(--sg-accent, #2563eb);
-    display: flex; flex-wrap: wrap; gap: 5px; align-items: center; width: 280px; min-height: 34px; padding: 4px 6px;
+    --_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: 22px; padding-block: 0; padding-inline: 8px 4px;
+    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: 12px; font-weight: 600;
+    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: 13px; height: 24px; }
+  .sv-tags__input { flex: 1; min-width: 80px; border: 0; background: none; outline: none; color: inherit; font: inherit; font-size: var(--_fs); height: 24px; }
 </style>

package/src/SvText.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+  /**
+   * SvText - the workhorse text primitive: a paragraph or inline span with
+   * consistent size / weight / colour tokens, optional truncation and line
+   * clamping. Themes from the shared `--sg-*` tokens.
+   *
+   * <SvText size="sm" tone="muted">Last synced 2 minutes ago</SvText>
+   * <SvText clamp={2}>A long description that wraps then ellipsises...</SvText>
+   */
+  import type { Snippet } from 'svelte'
+
+  type Props = {
+    /** Font size step. */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+    /** Font weight. */
+    weight?: 'normal' | 'medium' | 'semibold' | 'bold'
+    /** Semantic colour. */
+    tone?: 'default' | 'muted' | 'accent' | 'success' | 'warning' | 'error'
+    /** Text alignment. */
+    align?: 'start' | 'center' | 'end'
+    /** Truncate to a single line with an ellipsis. */
+    truncate?: boolean
+    /** Clamp to N lines with an ellipsis (overrides truncate). */
+    clamp?: number
+    /** Render inline (`span`) instead of a block (`p`). */
+    inline?: boolean
+    /** Override the element/tag. */
+    as?: string
+    children?: Snippet
+  }
+
+  let {
+    size = 'md', weight = 'normal', tone = 'default', align,
+    truncate = false, clamp, inline = false, as, children,
+  }: Props = $props()
+
+  const sizeMap = { xs: '11px', sm: '13px', md: '14px', lg: '16px', xl: '20px' } as const
+  const weightMap = { normal: 400, medium: 500, semibold: 600, bold: 700 } as const
+  const toneMap = {
+    default: 'var(--sg-fg, #0f172a)',
+    muted: 'var(--sg-muted, #64748b)',
+    accent: 'var(--sg-accent, #2563eb)',
+    success: 'var(--sg-success, #16a34a)',
+    warning: 'var(--sg-warning, #d97706)',
+    error: 'var(--sg-danger, #dc2626)',
+  } as const
+  const alignMap = { start: 'left', center: 'center', end: 'right' } as const
+
+  const tag = $derived(as ?? (inline ? 'span' : 'p'))
+</script>
+
+<svelte:element
+  this={tag}
+  class="sv-text"
+  class:is-truncate={truncate && !clamp}
+  class:is-clamp={clamp != null}
+  style:font-size={sizeMap[size]}
+  style:font-weight={weightMap[weight]}
+  style:color={toneMap[tone]}
+  style:text-align={align ? alignMap[align] : undefined}
+  style:--sv-text-clamp={clamp}
+>
+  {@render children?.()}
+</svelte:element>
+
+<style>
+  .sv-text { margin: 0; font-family: var(--sg-font, inherit); line-height: 1.5; }
+  .sv-text.is-truncate { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+  .sv-text.is-clamp {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: var(--sv-text-clamp, 2);
+    line-clamp: var(--sv-text-clamp, 2);
+    overflow: hidden;
+  }
+</style>

package/src/SvTextInput.svelte

@@ -4,9 +4,14 @@
    * (label / hint / error / RTL / a11y via SvField). Handles `text`, `email`,
    * `url`, `tel` and `search`. As a grid cell editor it honours the interaction
    * contract: Enter commits, Escape cancels. Parity: Smart `smart-input`.
+   *
+   * The control box, size, invalid state, clear button and leading/trailing
+   * adornments are all owned by SvField's `frame` mode, so they behave identically
+   * across the text-input family.
    */
+  import type { Snippet } from 'svelte'
   import SvField from './SvField.svelte'
-  import { editorAria, nextEditorId, type SvEditorProps } from './editor-contract'
+  import { editorAria, nextEditorId, type EditorAction, type SvEditorProps } from './editor-contract'
 
   type Props = SvEditorProps & {
     value?: string
@@ -23,6 +28,22 @@
     autocomplete?: AutoFill
     /** Autofocus + select on mount (used when mounted as a cell editor). */
     autofocus?: boolean
+    /** Select the whole value whenever the field is focused. */
+    selectOnFocus?: boolean
+    /** Leading adornment (icon/button) inside the field. */
+    leading?: Snippet
+    /** Trailing adornment (icon/button) inside the field. */
+    trailing?: Snippet
+    /** Plain-text affix at the start (e.g. a `$` or protocol). */
+    prefix?: string
+    /** Plain-text affix at the end (e.g. a unit). */
+    suffix?: string
+    /** `floating` animates the label up on focus/value. Default `static`. */
+    labelMode?: 'static' | 'floating'
+    /** Compact in-field action buttons (lookup/generate/copy...). */
+    actions?: EditorAction[]
+    /** Stretch to the container width. */
+    block?: boolean
   }
 
   let {
@@ -46,8 +67,17 @@
     hint,
     dir,
     id,
+    loading = false,
     autocomplete,
     autofocus = false,
+    selectOnFocus = false,
+    leading,
+    trailing,
+    prefix,
+    suffix,
+    labelMode = 'static',
+    actions,
+    block = false,
   }: Props = $props()
 
   const autoId = nextEditorId('sv-text')
@@ -68,48 +98,50 @@
   function mountFocus(node: HTMLInputElement) {
     if (autofocus) { node.focus(); node.select() }
   }
+  function onFocus(e: FocusEvent) {
+    if (selectOnFocus) (e.currentTarget as HTMLInputElement).select()
+  }
 </script>
 
-<SvField id={uid} {label} {hint} {error} {required} {dir}>
-  <div class="sv-text sv-text--{size}" class:is-disabled={disabled}>
-    <div class="sv-text__field" class:is-invalid={invalid}>
-      <input
-        use:mountFocus
-        class="sv-text__input"
-        {type}
-        {value}
-        {placeholder}
-        {disabled}
-        {readonly}
-        {maxlength}
-        {autocomplete}
-        oninput={onInput}
-        onkeydown={onKeydown}
-        {...editorAria({ id: uid, invalid, required, error, hint, ariaLabel })}
-      />
-      {#if clearable && value && !disabled && !readonly}
-        <button class="sv-text__clear" type="button" tabindex="-1" aria-label="Clear" onclick={() => set('')}>&times;</button>
-      {/if}
-    </div>
-    {#if name}<input type="hidden" {name} value={value} />{/if}
-  </div>
+<SvField
+  frame
+  id={uid}
+  {label}
+  {hint}
+  {error}
+  {required}
+  {dir}
+  {size}
+  {invalid}
+  {disabled}
+  {readonly}
+  {loading}
+  {block}
+  {leading}
+  {trailing}
+  {prefix}
+  {suffix}
+  {labelMode}
+  filled={!!value}
+  {actions}
+  clearable={clearable}
+  showClear={!!value}
+  onclear={() => set('')}
+>
+  <input
+    use:mountFocus
+    class="sv-text__input"
+    {type}
+    {value}
+    placeholder={labelMode === 'floating' ? undefined : placeholder}
+    {disabled}
+    {readonly}
+    {maxlength}
+    {autocomplete}
+    oninput={onInput}
+    onkeydown={onKeydown}
+    onfocus={onFocus}
+    {...editorAria({ id: uid, invalid, required, error, hint, ariaLabel })}
+  />
+  {#if name}<input type="hidden" {name} value={value} />{/if}
 </SvField>
-
-<style>
-  .sv-text { --_accent: var(--sg-accent, #2563eb); display: inline-flex; flex-direction: column; width: 220px; }
-  .sv-text.is-disabled { opacity: 0.6; }
-  .sv-text__field {
-    display: flex; align-items: center;
-    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-text__field:focus-within { border-color: var(--_accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 22%, transparent); }
-  .sv-text__field.is-invalid { border-color: var(--sg-danger, #dc2626); }
-  .sv-text__field.is-invalid:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--sg-danger, #dc2626) 22%, transparent); }
-  .sv-text__input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: inherit; font: inherit; padding: 0 10px; }
-  .sv-text--sm .sv-text__field { height: 28px; font-size: 12px; }
-  .sv-text--md .sv-text__field { height: 34px; font-size: 13px; }
-  .sv-text--lg .sv-text__field { height: 40px; font-size: 15px; }
-  .sv-text__clear { display: grid; place-items: center; width: 28px; align-self: stretch; background: none; border: 0; color: var(--sg-muted, #64748b); cursor: pointer; font-size: 17px; line-height: 1; }
-  .sv-text__clear:hover { color: var(--sg-fg, #0f172a); }
-</style>

package/src/SvTimePicker.svelte

@@ -11,7 +11,8 @@
    * and ARIA; this component keeps the DOM-bound pointer capture + hit-testing.
    * All visuals come from `--sg-*` tokens so every theme applies for free.
    */
-  import { resolveMessages, type EditorDir } from './editor-contract'
+  import SvField from './SvField.svelte'
+  import { nextEditorId, resolveMessages, type EditorDir, type EditorSize } from './editor-contract'
   import { createTimePicker, type TimeValue, type TimeFormat, type TimeSelection } from './createTimePicker.svelte'
 
   /** User-facing strings (localizable via `messages`). */
@@ -38,6 +39,16 @@
     dir?: EditorDir
     /** Override the built-in strings (group label + AM/PM/Now). */
     messages?: Partial<TimeMessages>
+    // Optional field chrome: when any of label/hint/error is set, the dial is
+    // wrapped in <SvField> so it gains a label/hint/error line; otherwise it
+    // renders bare (as embedded inside SvDateTimePicker's popover).
+    label?: string
+    hint?: string
+    error?: string
+    required?: boolean
+    invalid?: boolean
+    size?: EditorSize
+    id?: string
   }
 
   let {
@@ -53,8 +64,18 @@
     selection = 'hour',
     dir,
     messages,
+    label,
+    hint,
+    error,
+    required = false,
+    invalid = false,
+    id,
   }: Props = $props()
 
+  const autoId = nextEditorId('sv-tp')
+  const uid = $derived(id ?? autoId)
+  const hasChrome = $derived(!!(label || hint || error))
+
   const M = $derived(resolveMessages(DEFAULT_MESSAGES, messages))
   const resolvedDir = $derived(dir === 'ltr' || dir === 'rtl' ? dir : undefined)
 
@@ -107,7 +128,8 @@
   }
 </script>
 
-<div class="sv-tp" class:sv-tp--disabled={disabled} role="group" aria-label={M.label} dir={resolvedDir}>
+{#snippet dialBody()}
+<div class="sv-tp" class:sv-tp--disabled={disabled} class:sv-tp--invalid={invalid} id={uid} role="group" aria-label={label ?? M.label} dir={resolvedDir}>
   <div class="sv-tp__head">
     <button class="sv-tp__seg" class:is-active={tp.selection === 'hour'} {...tp.segProps('hour')}>
       {String(tp.displayHour).padStart(2, '0')}
@@ -159,6 +181,13 @@
 
   {#if name}<input type="hidden" {name} value={`${String(tp.hours).padStart(2, '0')}:${tp.mm}`} />{/if}
 </div>
+{/snippet}
+
+{#if hasChrome}
+  <SvField id={uid} {label} {hint} {error} {required} {dir}>{@render dialBody()}</SvField>
+{:else}
+  {@render dialBody()}
+{/if}
 
 <style>
   .sv-tp {
@@ -175,6 +204,7 @@
     border: 1px solid var(--_border); border-radius: calc(var(--_radius) + 4px);
     user-select: none;
   }
+  .sv-tp--invalid { border-color: var(--sg-danger, #dc2626); }
   .sv-tp--disabled { opacity: 0.55; pointer-events: none; }
 
   .sv-tp__head { display: flex; align-items: center; gap: 2px; font-variant-numeric: tabular-nums; }

package/src/SvTitle.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  /**
+   * SvTitle - a heading primitive. `order` sets the semantic level (h1-h6) and,
+   * by default, the visual size; pass `size` to decouple the two (e.g. an h2 that
+   * looks like an h4). Themes from the shared `--sg-*` tokens.
+   *
+   * <SvTitle order={1}>Dashboard</SvTitle>
+   * <SvTitle order={3} size={5}>Small but semantic h3</SvTitle>
+   */
+  import type { Snippet } from 'svelte'
+
+  type Level = 1 | 2 | 3 | 4 | 5 | 6
+
+  type Props = {
+    /** Semantic heading level (h1-h6). */
+    order?: Level
+    /** Visual size step, defaults to `order`. */
+    size?: Level
+    /** Text alignment. */
+    align?: 'start' | 'center' | 'end'
+    /** Truncate to a single line with an ellipsis. */
+    truncate?: boolean
+    children?: Snippet
+  }
+
+  let { order = 2, size, align, truncate = false, children }: Props = $props()
+
+  // px + weight per visual step - a compact, balanced type scale.
+  const sizeMap = { 1: '30px', 2: '24px', 3: '20px', 4: '17px', 5: '15px', 6: '13px' } as const
+  const weightMap = { 1: 700, 2: 700, 3: 600, 4: 600, 5: 600, 6: 600 } as const
+  const alignMap = { start: 'left', center: 'center', end: 'right' } as const
+
+  const step = $derived(size ?? order)
+  const tag = $derived(`h${order}`)
+</script>
+
+<svelte:element
+  this={tag}
+  class="sv-title"
+  class:is-truncate={truncate}
+  style:font-size={sizeMap[step]}
+  style:font-weight={weightMap[step]}
+  style:text-align={align ? alignMap[align] : undefined}
+>
+  {@render children?.()}
+</svelte:element>
+
+<style>
+  .sv-title {
+    margin: 0;
+    font-family: var(--sg-font, inherit);
+    color: var(--sg-fg, #0f172a);
+    line-height: 1.25;
+    letter-spacing: -0.01em;
+  }
+  .sv-title.is-truncate { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+</style>