@svgrid/grid 1.2.22 → 1.2.24

package/src/SvAutoComplete.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+  /**
+   * SvAutoComplete - a free-text input with a live-filtered suggestion list.
+   * Unlike SvComboBox, it accepts ANY value (the text), suggestions are just
+   * shortcuts. Parity: Smart `smart-input` (autocomplete). Emits the text string.
+   *
+   * One styled renderer over the headless `createAutocomplete` core; only
+   * portal/measure render concerns live here.
+   */
+  import { anchoredRect, portalToBody, type AnchoredRect } from './popover'
+  import { type ListOption } from './list-option'
+  import { createAutocomplete } from './createAutocomplete.svelte'
+
+  type Props = {
+    value?: string
+    onChange?: (value: string) => void
+    /** Suggestions - strings or {value,label} (label is shown, value inserted). */
+    suggestions?: ReadonlyArray<string | ListOption>
+    minChars?: number
+    placeholder?: string
+    disabled?: boolean
+    name?: string
+    size?: 'sm' | 'md' | 'lg'
+    ariaLabel?: string
+  }
+
+  let { value = '', onChange, suggestions = [], minChars = 1, placeholder, disabled = false, name, size = 'md', ariaLabel }: Props = $props()
+
+  let fieldEl = $state<HTMLInputElement | null>(null)
+  let panelEl = $state<HTMLDivElement | null>(null)
+  let rect = $state<AnchoredRect>({ top: 0, left: 0, width: 0, openUpward: false })
+
+  const ac = createAutocomplete({
+    value: () => value,
+    onChange: (v) => onChange?.(v),
+    suggestions: () => suggestions,
+    minChars: () => minChars,
+    disabled: () => disabled,
+    ariaLabel: () => ariaLabel,
+    focusInput: () => fieldEl?.focus(),
+  })
+
+  function updatePos() {
+    if (!fieldEl) return
+    rect = anchoredRect(fieldEl.getBoundingClientRect(), { estimatedHeight: Math.min(ac.filtered.length, 8) * 34 + 8 })
+  }
+
+  $effect(() => {
+    if (!ac.open) return
+    updatePos()
+    const rp = () => updatePos()
+    window.addEventListener('scroll', rp, true); window.addEventListener('resize', rp)
+    const od = (e: PointerEvent) => { const t = e.target as Node | null; if (t && (fieldEl?.contains(t) || panelEl?.contains(t))) return; ac.close() }
+    document.addEventListener('pointerdown', od, true)
+    return () => { window.removeEventListener('scroll', rp, true); window.removeEventListener('resize', rp); document.removeEventListener('pointerdown', od, true) }
+  })
+</script>
+
+<input
+  bind:this={fieldEl}
+  class="sv-ac sv-ac--{size}"
+  type="text"
+  {placeholder}
+  {...ac.inputProps()}
+/>
+
+{#if ac.open}
+  <div bind:this={panelEl} class="sv-ddl__panel" use:portalToBody style:position="fixed" style:top={`${rect.top}px`} style:left={`${rect.left}px`} style:min-width={`${rect.width}px`} {...ac.listboxProps()}>
+    {#each ac.filtered as opt, i (opt.value)}
+      <!-- svelte-ignore a11y_click_events_have_key_events a11y_interactive_supports_focus -->
+      <div class="sv-ddl__opt" class:is-active={ac.isActive(i)} {...ac.optionProps(i)}>{opt.label}</div>
+    {/each}
+  </div>
+{/if}
+{#if name}<input type="hidden" {name} value={value} />{/if}
+
+<style>
+  .sv-ac {
+    --_accent: var(--sg-accent, #2563eb);
+    box-sizing: border-box; width: 220px;
+    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);
+    font: inherit; padding: 0 10px; outline: none;
+  }
+  .sv-ac--sm { height: 28px; font-size: 12px; }
+  .sv-ac--md { height: 34px; font-size: 13px; }
+  .sv-ac--lg { height: 40px; font-size: 15px; }
+  .sv-ac:focus { border-color: var(--_accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 22%, transparent); }
+</style>

package/src/SvButton.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+  /**
+   * SvButton - the base button primitive for the SvGrid UI kit. Variants, sizes,
+   * loading + icon slots. Pure `--sg-*` theming. Parity: Smart `smart-button`.
+   */
+  import type { Snippet } from 'svelte'
+
+  type Props = {
+    variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger'
+    size?: 'sm' | 'md' | 'lg'
+    type?: 'button' | 'submit' | 'reset'
+    disabled?: boolean
+    loading?: boolean
+    /** Stretch to the container width. */
+    block?: boolean
+    href?: string
+    ariaLabel?: string
+    onclick?: (e: MouseEvent) => void
+    children?: Snippet
+    /** Leading icon snippet. */
+    icon?: Snippet
+  }
+
+  let {
+    variant = 'primary',
+    size = 'md',
+    type = 'button',
+    disabled = false,
+    loading = false,
+    block = false,
+    href,
+    ariaLabel,
+    onclick,
+    children,
+    icon,
+  }: Props = $props()
+
+  const isDisabled = $derived(disabled || loading)
+</script>
+
+<svelte:element
+  this={href && !isDisabled ? 'a' : 'button'}
+  class="sv-btn sv-btn--{variant} sv-btn--{size}"
+  class:sv-btn--block={block}
+  class:is-loading={loading}
+  role={href ? 'button' : undefined}
+  href={href && !isDisabled ? href : undefined}
+  type={href ? undefined : type}
+  disabled={href ? undefined : isDisabled}
+  aria-disabled={isDisabled}
+  aria-label={ariaLabel}
+  aria-busy={loading}
+  onclick={(e: MouseEvent) => { if (isDisabled) { e.preventDefault(); return } onclick?.(e) }}
+>
+  {#if loading}<span class="sv-btn__spinner" aria-hidden="true"></span>{/if}
+  {#if icon}<span class="sv-btn__icon">{@render icon()}</span>{/if}
+  {#if children}<span class="sv-btn__label">{@render children()}</span>{/if}
+</svelte:element>
+
+<style>
+  .sv-btn {
+    --_accent: var(--sg-accent, #2563eb);
+    --_on-accent: var(--sg-on-accent, #fff);
+    --_border: var(--sg-border, #cbd5e1);
+    --_radius: var(--sg-radius, 8px);
+    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
+    font: inherit; font-weight: 600; line-height: 1; white-space: nowrap;
+    border: 1px solid transparent; border-radius: var(--_radius); cursor: pointer;
+    text-decoration: none; user-select: none; transition: background 0.12s, border-color 0.12s, opacity 0.12s;
+  }
+  .sv-btn--sm { padding: 5px 10px; font-size: 12px; }
+  .sv-btn--md { padding: 8px 14px; font-size: 13px; }
+  .sv-btn--lg { padding: 11px 18px; font-size: 15px; }
+  .sv-btn--block { width: 100%; }
+  .sv-btn[disabled], .sv-btn[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; }
+
+  .sv-btn--primary { background: var(--_accent); color: var(--_on-accent); }
+  .sv-btn--primary:hover:not([disabled]):not([aria-disabled='true']) { background: color-mix(in srgb, var(--_accent) 88%, #000); }
+  .sv-btn--secondary { background: var(--sg-header-bg, #f1f5f9); color: var(--sg-fg, #0f172a); border-color: var(--_border); }
+  .sv-btn--secondary:hover:not([disabled]) { background: var(--sg-row-hover-bg, #e2e8f0); }
+  .sv-btn--outline { background: transparent; color: var(--_accent); border-color: var(--_accent); }
+  .sv-btn--outline:hover:not([disabled]) { background: color-mix(in srgb, var(--_accent) 10%, transparent); }
+  .sv-btn--ghost { background: transparent; color: var(--sg-fg, #0f172a); }
+  .sv-btn--ghost:hover:not([disabled]) { background: var(--sg-row-hover-bg, rgba(0,0,0,0.05)); }
+  .sv-btn--danger { background: var(--sg-danger, #dc2626); color: #fff; }
+  .sv-btn--danger:hover:not([disabled]) { background: color-mix(in srgb, var(--sg-danger, #dc2626) 88%, #000); }
+
+  .sv-btn:focus-visible { outline: 2px solid var(--sg-focus-ring, var(--_accent)); outline-offset: 2px; }
+
+  .sv-btn__spinner {
+    width: 13px; height: 13px; border-radius: 50%;
+    border: 2px solid currentColor; border-top-color: transparent;
+    animation: sv-btn-spin 0.6s linear infinite;
+  }
+  .sv-btn__icon { display: inline-flex; }
+  @keyframes sv-btn-spin { to { transform: rotate(360deg); } }
+</style>

package/src/SvCalendar.svelte

@@ -0,0 +1,409 @@
+<script lang="ts" module>
+  // Public types now live with the headless core and are re-exported here so the
+  // component's module entry point (and @svgrid/grid) keeps the same surface.
+  export type { CalendarValue, CalendarPreset, CalendarAnimation, DisplayMode } from './createCalendar.svelte'
+</script>
+
+<script lang="ts">
+  /**
+   * SvCalendar - a themeable, accessible month/year/decade calendar. It is a thin
+   * styled renderer over the headless `createCalendar` core (the same split as
+   * `createSvGrid` / <SvGrid>): the core owns the reactive state + interaction +
+   * ARIA (built on the framework-free ./datetime engine), while this component
+   * keeps the render-only concerns - the WAAPI view-change animation, mouse-wheel
+   * navigation, and DOM refs. All visuals come from the grid's `--sg-*` tokens.
+   *
+   * Parity target: Smart `smart-calendar` (selectionModes, min/max, restricted /
+   * important dates, week numbers, firstDayOfWeek, drill navigation, keyboard).
+   */
+  import { untrack } from 'svelte'
+  import {
+    createCalendar,
+    type CalendarValue,
+    type CalendarPreset,
+    type CalendarAnimation,
+    type DisplayMode,
+  } from './createCalendar.svelte'
+  import type { SelectionMode } from './datetime/date-selection'
+  import type { RestrictOptions } from './datetime/date-restrict'
+  import type { DateLike } from './datetime/date-core'
+
+  type NameFormat = 'narrow' | 'short' | 'long'
+
+  type Props = {
+    /** Selected value(s). Single Date for one/zeroOrOne, array for multi modes. */
+    value?: CalendarValue
+    /** Fires with the full selected-day list on every change. */
+    onChange?: (dates: Date[]) => void
+    /** Fires when the visible month/year/decade page changes. */
+    onNavigate?: (viewDate: Date, displayMode: DisplayMode) => void
+    selectionMode?: SelectionMode
+    min?: DateLike | null
+    max?: DateLike | null
+    /** Non-selectable dates (list or predicate). */
+    restrictedDates?: RestrictOptions['restrictedDates']
+    /** Highlighted (but still selectable) dates. */
+    importantDates?: ReadonlyArray<DateLike> | ((d: Date) => boolean) | null
+    /** 0 = Sunday .. 6 = Saturday. */
+    firstDayOfWeek?: number
+    weeks?: number
+    weekNumbers?: boolean
+    /** Number of month panels side by side. */
+    months?: number
+    hideDayNames?: boolean
+    hideOtherMonthDays?: boolean
+    dayNameFormat?: NameFormat
+    monthNameFormat?: NameFormat
+    /** Show the Today / Clear footer. */
+    footer?: boolean
+    disabled?: boolean
+    readonly?: boolean
+    locale?: string
+    name?: string
+    /** Which drill level to open on. */
+    displayMode?: DisplayMode
+    /** Animate month/year navigation + drill (opt-in). `true` = 'slide'. This is
+     *  an explicit opt-in, so it plays regardless of the OS "reduce motion"
+     *  setting - pass 'none' (or gate it yourself) to suppress it. */
+    animate?: boolean | CalendarAnimation
+    /** Change the visible month/year/decade with the mouse wheel over the grid. */
+    wheelNavigation?: boolean
+    /** Per-day tooltip text (shown as the native title on the day button). */
+    dateTooltip?: (date: Date) => string | null | undefined
+    /** One-click shortcuts (e.g. Today, Last 7 days) shown in a side rail. */
+    presets?: ReadonlyArray<CalendarPreset>
+  }
+
+  let {
+    value = null,
+    onChange,
+    onNavigate,
+    selectionMode = 'one',
+    min = null,
+    max = null,
+    restrictedDates = null,
+    importantDates = null,
+    firstDayOfWeek = 0,
+    weeks = 6,
+    weekNumbers = false,
+    months = 1,
+    hideDayNames = false,
+    hideOtherMonthDays = false,
+    dayNameFormat = 'short',
+    monthNameFormat = 'long',
+    footer = false,
+    disabled = false,
+    readonly = false,
+    locale = typeof navigator !== 'undefined' ? navigator.language : 'en-US',
+    name,
+    displayMode = 'month',
+    animate = false,
+    wheelNavigation = false,
+    dateTooltip,
+    presets,
+  }: Props = $props()
+
+  // The headless core owns all reactive state, selection, navigation, keyboard
+  // and ARIA. Reactive inputs are passed as getters; callbacks as closures.
+  const cal = createCalendar({
+    value: () => value,
+    onChange: (d) => onChange?.(d),
+    onNavigate: (v, m) => onNavigate?.(v, m),
+    selectionMode: () => selectionMode,
+    min: () => min,
+    max: () => max,
+    restrictedDates: () => restrictedDates,
+    importantDates: () => importantDates,
+    firstDayOfWeek: () => firstDayOfWeek,
+    weeks: () => weeks,
+    months: () => months,
+    displayMode: () => displayMode,
+    disabled: () => disabled,
+    readonly: () => readonly,
+    locale: () => locale,
+    dayNameFormat: () => dayNameFormat,
+    monthNameFormat: () => monthNameFormat,
+    dateTooltip: () => dateTooltip,
+  })
+
+  // --- View-change animation (framework-native Web Animations API) -----------
+  // A render concern kept out of the core: we animate a wrapper element instead
+  // of re-keying the grid, so day cells stay mounted (keyboard focus +
+  // interactivity are preserved). The core exposes `navToken` (bumps on each
+  // navigation) + `navDir` (why it changed); an effect replays a short keyframe
+  // on the new content.
+  const animKind = $derived<CalendarAnimation>(animate === true ? 'slide' : animate || 'none')
+  let animEl = $state<HTMLElement | undefined>()
+  let animPrimed = false // skip the very first (mount) run
+  // Note: `animate` is an explicit opt-in, so we honor it even under the OS
+  // "reduce motion" setting. Pass animate="none" (or gate it yourself on
+  // prefers-reduced-motion) if you want it suppressed for that audience.
+  function playAnim() {
+    if (animKind === 'none' || !animEl || typeof animEl.animate !== 'function') return
+    const slide = animKind === 'slide'
+    // A month grid barely changes shape between months, so the movement has to be
+    // pronounced to read as a transition. Slide the new content a clear distance +
+    // fade; drills zoom. A mid-keyframe holds the offset briefly for legibility.
+    const D = 34
+    const navDir = cal.navDir
+    const from =
+      !slide ? { opacity: 0, transform: 'scale(0.98)' }
+      : navDir === 'next' ? { transform: `translateX(${D}px)`, opacity: 0 }
+      : navDir === 'prev' ? { transform: `translateX(-${D}px)`, opacity: 0 }
+      : navDir === 'drillDown' ? { transform: 'scale(0.85)', opacity: 0 }
+      : navDir === 'drillUp' ? { transform: 'scale(1.14)', opacity: 0 }
+      : { opacity: 0 }
+    animEl.animate([from, { transform: 'none', opacity: 1 }], {
+      duration: slide && (navDir === 'next' || navDir === 'prev') ? 300 : 220,
+      easing: 'cubic-bezier(0.16, 1, 0.3, 1)',
+    })
+  }
+  $effect(() => {
+    cal.navToken // re-run after each navigation's DOM update
+    if (!animPrimed) { animPrimed = true; return }
+    untrack(playAnim)
+  })
+
+  // Mouse-wheel navigation (opt-in). Non-passive so we can prevent page scroll.
+  function wheelNav(node: HTMLElement) {
+    const onWheel = (e: WheelEvent) => {
+      if (!wheelNavigation || disabled) return
+      e.preventDefault()
+      cal.step(e.deltaY > 0 || e.deltaX > 0 ? 1 : -1)
+    }
+    node.addEventListener('wheel', onWheel, { passive: false })
+    return { destroy: () => node.removeEventListener('wheel', onWheel) }
+  }
+</script>
+
+<div
+  class="sv-cal"
+  class:sv-cal--disabled={disabled}
+  class:sv-cal--with-presets={presets && presets.length}
+  class:sv-cal--band={selectionMode === 'range' || selectionMode === 'week'}
+  role="group"
+  aria-label="Calendar"
+  aria-disabled={disabled}
+>
+  {#if presets && presets.length}
+    <div class="sv-cal__presets" role="group" aria-label="Shortcuts">
+      {#each presets as p, i (i)}
+        <button class="sv-cal__preset" {...cal.presetProps(p)}>{p.label}</button>
+      {/each}
+    </div>
+  {/if}
+
+  <div class="sv-cal__main" use:wheelNav>
+  <div class="sv-cal__header">
+    <button class="sv-cal__nav" {...cal.navProps(-1)}>
+      <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6" /></svg>
+    </button>
+    <button class="sv-cal__title" {...cal.titleProps()}>{cal.title}</button>
+    <button class="sv-cal__nav" {...cal.navProps(1)}>
+      <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6" /></svg>
+    </button>
+  </div>
+
+  <div class="sv-cal__view" bind:this={animEl}>
+  {#if cal.mode === 'month'}
+    <div class="sv-cal__panels" {...cal.gridProps()}>
+      {#each cal.panels as panel (panel.month.getTime())}
+        <div class="sv-cal__panel">
+          {#if months > 1}<div class="sv-cal__panel-title">{panel.title}</div>{/if}
+          {#if !hideDayNames}
+            <div class="sv-cal__weekdays" role="row">
+              {#if weekNumbers}<span class="sv-cal__wk-head" aria-hidden="true">#</span>{/if}
+              {#each cal.weekdayHeaders as wh (wh.weekday)}
+                <span class="sv-cal__weekday" role="columnheader">{wh.label}</span>
+              {/each}
+            </div>
+          {/if}
+          {#each panel.matrix as week, wi (wi)}
+            <div class="sv-cal__week" role="row">
+              {#if weekNumbers}<span class="sv-cal__wk" aria-hidden="true">{week[0]?.week}</span>{/if}
+              {#each week as cell (cell.date.getTime())}
+                {@const st = cal.dayState(cell.date, panel.month)}
+                {#if st.outside && hideOtherMonthDays}
+                  <span class="sv-cal__day sv-cal__day--empty" role="gridcell" aria-hidden="true"></span>
+                {:else}
+                  <button
+                    class="sv-cal__day"
+                    class:is-selected={st.selected}
+                    class:is-today={st.today}
+                    class:is-outside={st.outside}
+                    class:is-important={st.important}
+                    class:is-preview={st.preview}
+                    class:is-focused={st.focused}
+                    {...cal.dayProps(cell, panel.month)}
+                  >{cell.date.getDate()}</button>
+                {/if}
+              {/each}
+            </div>
+          {/each}
+        </div>
+      {/each}
+    </div>
+  {:else if cal.mode === 'year'}
+    <div class="sv-cal__grid-mode" {...cal.gridProps()}>
+      {#each cal.yearCells as yc (yc.index)}
+        <button
+          class="sv-cal__cell"
+          class:is-today={yc.current}
+          class:is-selected={yc.selected}
+          {...cal.monthCellProps(yc.index)}
+        >{yc.label}</button>
+      {/each}
+    </div>
+  {:else}
+    <div class="sv-cal__grid-mode" {...cal.gridProps()}>
+      {#each cal.decadeCells as dc (dc.year)}
+        <button
+          class="sv-cal__cell"
+          class:is-outside={dc.outside}
+          class:is-today={dc.current}
+          class:is-selected={dc.selected}
+          {...cal.yearCellProps(dc.year)}
+        >{dc.year}</button>
+      {/each}
+    </div>
+  {/if}
+  </div>
+
+  {#if footer}
+    <div class="sv-cal__footer">
+      <button type="button" class="sv-cal__foot-btn" onclick={cal.goToday} disabled={disabled}>Today</button>
+      {#if cal.canClear}
+        <button type="button" class="sv-cal__foot-btn" onclick={cal.clearSelection} disabled={disabled}>Clear</button>
+      {/if}
+    </div>
+  {/if}
+  </div>
+
+  {#if name}<input type="hidden" {name} value={cal.selectedDates.map((d) => d.toISOString()).join(',')} />{/if}
+</div>
+
+<style>
+  .sv-cal {
+    --_accent: var(--sg-accent, #2563eb);
+    --_bg: var(--sg-bg, #fff);
+    --_fg: var(--sg-fg, #0f172a);
+    --_muted: var(--sg-muted, #64748b);
+    --_border: var(--sg-border, #e2e8f0);
+    --_hover: var(--sg-row-hover-bg, rgba(37, 99, 235, 0.08));
+    --_radius: var(--sg-radius, 8px);
+    display: inline-flex;
+    gap: 10px;
+    padding: 10px;
+    width: max-content;
+    background: var(--_bg);
+    color: var(--_fg);
+    border: 1px solid var(--_border);
+    border-radius: calc(var(--_radius) + 4px);
+    font-size: 13px;
+    user-select: none;
+  }
+  .sv-cal--disabled { opacity: 0.55; pointer-events: none; }
+  .sv-cal__main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
+  /* Clip so animated content slides in from the edge (not past the border). Day
+     focus outlines use outline-offset:-2px, so they stay inside and aren't clipped. */
+  .sv-cal__view { display: block; overflow: hidden; }
+  /* Quick-shortcut rail (Today / Last 7 days / ...) shown when `presets` is set. */
+  .sv-cal__presets {
+    display: flex; flex-direction: column; gap: 2px;
+    padding-right: 10px; border-right: 1px solid var(--_border);
+    min-width: 118px; align-self: stretch;
+  }
+  .sv-cal__preset {
+    text-align: left; padding: 6px 10px; font: inherit; font-size: 12px; font-weight: 550;
+    background: none; border: 0; border-radius: var(--_radius); color: inherit; cursor: pointer; white-space: nowrap;
+  }
+  .sv-cal__preset:hover:not(:disabled) { background: var(--_hover); color: var(--_accent); }
+  .sv-cal__preset:disabled { opacity: 0.5; cursor: default; }
+
+  .sv-cal__header { display: flex; align-items: center; gap: 4px; }
+  .sv-cal__title {
+    flex: 1; text-align: center; font-weight: 650; font-size: 13.5px;
+    background: none; border: 0; color: inherit; cursor: pointer;
+    padding: 6px 8px; border-radius: var(--_radius);
+  }
+  .sv-cal__title:hover:not(:disabled) { background: var(--_hover); }
+  .sv-cal__title:disabled { cursor: default; }
+  .sv-cal__nav {
+    display: grid; place-items: center; width: 30px; height: 30px;
+    background: none; border: 0; color: var(--_muted); cursor: pointer; border-radius: var(--_radius);
+  }
+  .sv-cal__nav:hover:not(:disabled) { background: var(--_hover); color: var(--_fg); }
+  .sv-cal__nav:disabled { opacity: 0.4; cursor: default; }
+
+  .sv-cal__panels { display: flex; gap: 14px; }
+  .sv-cal__panel-title { text-align: center; font-weight: 600; font-size: 12.5px; margin-bottom: 4px; color: var(--_muted); }
+  .sv-cal__weekdays, .sv-cal__week {
+    display: grid;
+    grid-template-columns: repeat(7, 34px);
+  }
+  .sv-cal__weekdays:has(.sv-cal__wk-head), .sv-cal__week:has(.sv-cal__wk) {
+    grid-template-columns: 26px repeat(7, 34px);
+  }
+  .sv-cal__weekday, .sv-cal__wk-head {
+    display: grid; place-items: center; height: 28px;
+    font-size: 11px; font-weight: 600; color: var(--_muted); text-transform: uppercase; letter-spacing: 0.02em;
+  }
+  .sv-cal__wk {
+    display: grid; place-items: center; height: 34px;
+    font-size: 10.5px; color: var(--_muted); opacity: 0.7;
+  }
+  .sv-cal__day {
+    display: grid; place-items: center; width: 34px; height: 34px; box-sizing: border-box;
+    background: none; border: 0; color: inherit; cursor: pointer;
+    border-radius: var(--_radius); font-size: 12.5px; position: relative;
+  }
+  .sv-cal__day--empty { visibility: hidden; }
+  /* Hover only NON-selected days with the neutral hover fill; hovering a selected
+     day keeps the accent (a bare :hover would swap in the neutral bg while the
+     text stays --sg-on-accent -> invisible on themes like shadcn). */
+  .sv-cal__day:hover:not(:disabled):not(.is-selected) { background: var(--_hover); }
+  .sv-cal__day.is-selected:hover:not(:disabled) { background: color-mix(in srgb, var(--_accent) 86%, var(--_fg)); }
+  .sv-cal__day.is-outside { color: var(--_muted); opacity: 0.55; }
+  .sv-cal__day.is-today { font-weight: 750; box-shadow: inset 0 0 0 1px var(--_accent); }
+  .sv-cal__day.is-important::after {
+    content: ''; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
+    width: 4px; height: 4px; border-radius: 50%; background: var(--sg-danger, #dc2626);
+  }
+  .sv-cal__day.is-preview { background: color-mix(in srgb, var(--_accent) 16%, transparent); border-radius: 0; }
+  .sv-cal__day.is-selected {
+    background: var(--_accent); color: var(--sg-on-accent, #fff); font-weight: 650;
+  }
+  /* Discrete selection (single / many / ...): inset each selected pill so adjacent
+     picked days keep a visible gap. Range / week modes stay a connected band. */
+  .sv-cal:not(.sv-cal--band) .sv-cal__day.is-selected { background-clip: content-box; padding: 2px; }
+  .sv-cal__day.is-selected.is-important::after { background: var(--sg-on-accent, #fff); }
+  .sv-cal__day:disabled { color: var(--_muted); opacity: 0.35; cursor: default; text-decoration: line-through; }
+  .sv-cal__day.is-focused:focus-visible,
+  .sv-cal__day:focus-visible,
+  .sv-cal__cell:focus-visible {
+    outline: 2px solid var(--sg-focus-ring, var(--_accent)); outline-offset: -2px;
+  }
+
+  .sv-cal__grid-mode {
+    display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
+    min-width: 252px;
+  }
+  .sv-cal__cell {
+    height: 44px; display: grid; place-items: center;
+    background: none; border: 0; color: inherit; cursor: pointer;
+    border-radius: var(--_radius); font-size: 12.5px;
+  }
+  .sv-cal__cell:hover:not(:disabled):not(.is-selected) { background: var(--_hover); }
+  .sv-cal__cell.is-selected:hover:not(:disabled) { background: color-mix(in srgb, var(--_accent) 86%, var(--_fg)); }
+  .sv-cal__cell.is-outside { color: var(--_muted); opacity: 0.5; }
+  .sv-cal__cell.is-today { box-shadow: inset 0 0 0 1px var(--_accent); font-weight: 700; }
+  .sv-cal__cell.is-selected { background: var(--_accent); color: var(--sg-on-accent, #fff); font-weight: 650; }
+
+  .sv-cal__footer { display: flex; justify-content: center; gap: 8px; border-top: 1px solid var(--_border); padding-top: 8px; margin-top: 2px; }
+  .sv-cal__foot-btn {
+    padding: 5px 12px; font: inherit; font-size: 12px; font-weight: 600;
+    background: none; border: 1px solid var(--_border); border-radius: var(--_radius);
+    color: var(--_accent); cursor: pointer;
+  }
+  .sv-cal__foot-btn:hover:not(:disabled) { background: var(--_hover); }
+</style>