@streamscloud/kit 0.2.42 → 0.9.1

package/dist/ui/date-picker/cmp.date-picker-calendar.svelte.d.ts

@@ -0,0 +1,59 @@
+type Props = {
+    selectedDate: Date | null;
+    minDate?: Date | null;
+    maxDate?: Date | null;
+    locale: string;
+    /** ISO order: 1=Mon..7=Sun. */
+    firstDayOfWeek: number;
+    on: {
+        select: (date: Date) => void;
+    };
+};
+/**
+ * Internal calendar panel used by DatePicker. Self-contained: owns the visible month state,
+ * locale-aware weekday/month labels (via Intl.DateTimeFormat) and first day of week (via
+ * Intl.Locale.getWeekInfo). Stateless about the picked value — receives the current `selectedDate`
+ * plus optional `min`/`max` range and emits `on.select(date)` for the parent to commit.
+ *
+ * The public CSS API is scoped to this component and is intentionally NOT re-exposed through
+ * DatePicker's surface — callers customize the input separately.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--date-picker-calendar--width` | Panel width | `17.5rem` |
+ * | `--sc-kit--date-picker-calendar--padding` | Panel padding | `var(--sc-kit--space--3)` |
+ * | `--sc-kit--date-picker-calendar--background` | Panel background | `var(--sc-kit--color--bg--panel)` |
+ * | `--sc-kit--date-picker-calendar--border-color` | Panel border color | `var(--sc-kit--color--border)` |
+ * | `--sc-kit--date-picker-calendar--border-radius` | Panel border radius | `var(--sc-kit--radius--md)` |
+ * | `--sc-kit--date-picker-calendar--shadow` | Panel shadow | `var(--sc-kit--shadow--lg)` |
+ * | `--sc-kit--date-picker-calendar--nav--gap` | Margin below nav row | `var(--sc-kit--space--2)` |
+ * | `--sc-kit--date-picker-calendar--nav--btn-size` | Nav button size | `1.75rem` |
+ * | `--sc-kit--date-picker-calendar--nav--btn-color` | Nav button icon color | `var(--sc-kit--color--text--muted)` |
+ * | `--sc-kit--date-picker-calendar--nav--btn-color--hover` | Nav button icon color on hover | `var(--sc-kit--color--text--primary)` |
+ * | `--sc-kit--date-picker-calendar--nav--btn-background--hover` | Nav button background on hover | `var(--sc-kit--color--bg--hover)` |
+ * | `--sc-kit--date-picker-calendar--nav--btn-icon-size` | Nav button icon size | `0.75rem` |
+ * | `--sc-kit--date-picker-calendar--nav--btn-border-radius` | Nav button border radius | `var(--sc-kit--radius--sm)` |
+ * | `--sc-kit--date-picker-calendar--nav--label-font-size` | Month/year label font size | `var(--sc-kit--font-size--md)` |
+ * | `--sc-kit--date-picker-calendar--nav--label-font-weight` | Month/year label font weight | `var(--sc-kit--font-weight--semibold)` |
+ * | `--sc-kit--date-picker-calendar--nav--label-color` | Month/year label color | `var(--sc-kit--color--text--primary)` |
+ * | `--sc-kit--date-picker-calendar--grid--gap` | Grid gap between cells | `2px` |
+ * | `--sc-kit--date-picker-calendar--weekday--font-size` | Weekday header font size | `0.625rem` |
+ * | `--sc-kit--date-picker-calendar--weekday--color` | Weekday header color | `var(--sc-kit--color--text--muted)` |
+ * | `--sc-kit--date-picker-calendar--weekday--letter-spacing` | Weekday header letter spacing | `var(--sc-kit--letter-spacing--wide)` |
+ * | `--sc-kit--date-picker-calendar--weekday--padding-block` | Weekday header vertical padding | `var(--sc-kit--space--1)` |
+ * | `--sc-kit--date-picker-calendar--cell--size` | Day cell height | `2rem` |
+ * | `--sc-kit--date-picker-calendar--cell--font-size` | Day cell font size | `var(--sc-kit--font-size--sm)` |
+ * | `--sc-kit--date-picker-calendar--cell--color` | Day cell text color | `var(--sc-kit--color--text--primary)` |
+ * | `--sc-kit--date-picker-calendar--cell--border-radius` | Day cell border radius | `var(--sc-kit--radius--sm)` |
+ * | `--sc-kit--date-picker-calendar--cell--background--hover` | Day cell background on hover | `var(--sc-kit--color--bg--hover)` |
+ * | `--sc-kit--date-picker-calendar--cell--color--outside` | Out-of-month day color | `var(--sc-kit--color--text--muted)` |
+ * | `--sc-kit--date-picker-calendar--cell--color--today` | Today text color | `var(--sc-kit--color--accent)` |
+ * | `--sc-kit--date-picker-calendar--cell--font-weight--today` | Today font weight | `var(--sc-kit--font-weight--semibold)` |
+ * | `--sc-kit--date-picker-calendar--cell--background--selected` | Selected day background | `var(--sc-kit--color--accent)` |
+ * | `--sc-kit--date-picker-calendar--cell--color--selected` | Selected day text color | `var(--sc-kit--color--text--on-accent)` |
+ * | `--sc-kit--date-picker-calendar--cell--color--disabled` | Disabled day color | `var(--sc-kit--color--text--placeholder)` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/date-picker/cmp.date-picker.svelte

@@ -0,0 +1,331 @@
+<script lang="ts">import { InputClearButton } from '../_internal/input-clear-button';
+import { Icon, IconSlot } from '../icon';
+import DatePickerCalendar from './cmp.date-picker-calendar.svelte';
+import { DatePickerLocalization } from './date-picker-localization';
+import { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';
+import IconCalendar from '@fluentui/svg-icons/icons/calendar_16_regular.svg?raw';
+const { size = 'md', placeholder = '', disabled = false, readonly = false, inert = false, error = false, borderless = false, min, max, locale, name, id = null, autofocus = false, 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedby, 'aria-required': ariaRequired, icon, ...mode } = $props();
+const localization = new DatePickerLocalization();
+/** Resolved locale: explicit prop or `'en-US'` default. */
+const resolvedLocale = $derived(locale ?? 'en-US');
+/**
+ * Resolved first day of week (ISO 1=Mon..7=Sun).
+ * - No locale passed: hardcoded Monday (predictable default).
+ * - Locale passed (even `'en-US'`): derived from `Intl.Locale.getWeekInfo()`, fallback to Monday on missing API.
+ */
+const resolvedFirstDayOfWeek = $derived.by(() => {
+    if (locale === undefined) {
+        return 1;
+    }
+    try {
+        const loc = new Intl.Locale(locale);
+        return loc.getWeekInfo?.().firstDay ?? 1;
+    }
+    catch {
+        return 1;
+    }
+});
+const toDate = (v) => {
+    if (v === null || v === undefined) {
+        return null;
+    }
+    const d = v instanceof Date ? new Date(v.getTime()) : new Date(v);
+    return Number.isNaN(d.getTime()) ? null : d;
+};
+const selectedDate = $derived(toDate(mode.value));
+const minDate = $derived(toDate(min ?? null));
+const maxDate = $derived(toDate(max ?? null));
+const triggerFmt = $derived(new Intl.DateTimeFormat(resolvedLocale, { dateStyle: 'medium' }));
+const triggerLabel = $derived(selectedDate ? triggerFmt.format(selectedDate) : '');
+let open = $state(false);
+let triggerEl = $state.raw(undefined);
+let panelEl = $state.raw(undefined);
+const emit = (date) => {
+    const iso = date ? date.toISOString() : null;
+    if (mode.clearable) {
+        mode.on?.change?.(iso);
+    }
+    else if (iso !== null) {
+        mode.on?.change?.(iso);
+    }
+};
+const toggleOpen = () => {
+    open = !open;
+};
+const handleSelect = (date) => {
+    emit(date);
+    open = false;
+    triggerEl?.focus();
+};
+const handleClearClick = () => {
+    if (!mode.clearable) {
+        return;
+    }
+    emit(null);
+};
+// Floating UI: position on open, auto-update on scroll/resize, cleanup on close.
+$effect(() => {
+    if (!open || !triggerEl || !panelEl) {
+        return;
+    }
+    const trigger = triggerEl;
+    const panel = panelEl;
+    const update = async () => {
+        const result = await computePosition(trigger, panel, {
+            placement: 'bottom-start',
+            middleware: [offset(4), flip(), shift({ padding: 8 })]
+        });
+        Object.assign(panel.style, {
+            position: 'absolute',
+            left: `${result.x}px`,
+            top: `${result.y}px`
+        });
+    };
+    return autoUpdate(trigger, panel, update);
+});
+// Dismiss listeners: only active while open.
+$effect(() => {
+    if (!open) {
+        return;
+    }
+    const handleClickOutside = (e) => {
+        const target = e.target;
+        if (!target) {
+            return;
+        }
+        if (triggerEl?.contains(target) || panelEl?.contains(target)) {
+            return;
+        }
+        open = false;
+    };
+    const handleKey = (e) => {
+        if (e.key === 'Escape') {
+            e.preventDefault();
+            open = false;
+            triggerEl?.focus();
+        }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener('keydown', handleKey);
+    return () => {
+        document.removeEventListener('mousedown', handleClickOutside);
+        document.removeEventListener('keydown', handleKey);
+    };
+});
+</script>
+
+<!-- svelte-ignore a11y_autofocus -->
+<div
+  class="date-picker date-picker--{size}"
+  class:date-picker--open={open}
+  class:date-picker--error={error}
+  class:date-picker--disabled={disabled}
+  class:date-picker--readonly={readonly}
+  class:date-picker--inert={inert}
+  class:date-picker--borderless={borderless}>
+  <button
+    bind:this={triggerEl}
+    type="button"
+    class="date-picker__trigger"
+    id={id}
+    disabled={disabled}
+    inert={inert}
+    autofocus={autofocus}
+    aria-haspopup="dialog"
+    aria-expanded={open}
+    aria-label={ariaLabel ?? name}
+    aria-describedby={ariaDescribedby}
+    onclick={readonly ? undefined : toggleOpen}>
+    {#if icon}
+      <span class="date-picker__icon date-picker__icon--leading" aria-hidden="true"><IconSlot icon={icon} /></span>
+    {/if}
+    <span class="date-picker__value" class:date-picker__value--placeholder={!selectedDate}>
+      {triggerLabel || placeholder}
+    </span>
+    {#if mode.clearable && selectedDate && !disabled && !readonly && !inert}
+      <InputClearButton size={size} aria-label={localization.clearDate} on={{ clear: handleClearClick }} />
+    {:else if !icon}
+      <span class="date-picker__icon date-picker__icon--trailing" aria-hidden="true">
+        <Icon src={IconCalendar} />
+      </span>
+    {/if}
+  </button>
+
+  {#if name}
+    <input type="hidden" name={name} value={selectedDate ? selectedDate.toISOString() : ''} aria-required={ariaRequired ? 'true' : undefined} />
+  {/if}
+
+  {#if open}
+    <div bind:this={panelEl} class="date-picker__panel">
+      <DatePickerCalendar
+        selectedDate={selectedDate}
+        minDate={minDate}
+        maxDate={maxDate}
+        locale={resolvedLocale}
+        firstDayOfWeek={resolvedFirstDayOfWeek}
+        on={{ select: handleSelect }} />
+    </div>
+  {/if}
+</div>
+
+<!--
+@component
+DatePicker — single-day calendar picker built on Floating UI for positioning. Discriminated by
+`clearable`: `clearable: true` allows clearing to `null` and shows a clear (X) button;
+`clearable: false` requires a value and renders no clear control. Emits ISO 8601 strings via
+`on.change` from local midnight of the picked day.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--date-picker--height` | Trigger height | per size |
+| `--sc-kit--date-picker--padding-inline` | Trigger horizontal padding | per size |
+| `--sc-kit--date-picker--gap` | Gap between value and icon/clear | `var(--sc-kit--space--2)` |
+| `--sc-kit--date-picker--width` | Trigger width | `100%` |
+| `--sc-kit--date-picker--background` | Trigger background | `var(--sc-kit--color--bg--field)` |
+| `--sc-kit--date-picker--background--disabled` | Trigger background when disabled | `var(--sc-kit--color--bg--field-alt)` |
+| `--sc-kit--date-picker--border-color` | Trigger border color | `var(--sc-kit--color--border--field)` |
+| `--sc-kit--date-picker--border-color--error` | Trigger border color in error state | `var(--sc-kit--color--danger)` |
+| `--sc-kit--date-picker--border-radius` | Trigger border radius | `var(--sc-kit--radius--sm)` |
+| `--sc-kit--date-picker--underline-color` | Inset bottom-underline indicator (transparent default, accent when open, danger on error) | `transparent` |
+| `--sc-kit--date-picker--font-size` | Trigger font size | per size |
+| `--sc-kit--date-picker--color` | Trigger text color | `var(--sc-kit--color--text--primary)` |
+| `--sc-kit--date-picker--placeholder--color` | Placeholder text color | `var(--sc-kit--color--text--placeholder)` |
+| `--sc-kit--date-picker--icon--color` | Leading / trailing icon color (does NOT affect inner affordances) | `var(--sc-kit--color--text--muted)` |
+| `--sc-kit--date-picker--icon--size` | Leading / trailing icon size (does NOT affect inner affordances) | per size |
+-->
+
+<style>@charset "UTF-8";
+.date-picker {
+  /* TRIGGER — public CSS API resolved with defaults (this block IS the API documentation) */
+  --_dp--height: var(--sc-kit--date-picker--height, var(--sc-kit--field--height--md));
+  --_dp--padding-inline: var(--sc-kit--date-picker--padding-inline, var(--sc-kit--field--padding-inline--md));
+  --_dp--gap: var(--sc-kit--date-picker--gap, var(--sc-kit--space--2));
+  --_dp--width: var(--sc-kit--date-picker--width, 100%);
+  --_dp--background: var(--sc-kit--date-picker--background, var(--sc-kit--color--bg--field));
+  --_dp--background-disabled: var(--sc-kit--date-picker--background--disabled, var(--sc-kit--color--bg--field-alt));
+  --_dp--border-color: var(--sc-kit--date-picker--border-color, var(--sc-kit--color--border--field));
+  --_dp--border-color-error: var(--sc-kit--date-picker--border-color--error, var(--sc-kit--color--danger));
+  --_dp--border-radius: var(--sc-kit--date-picker--border-radius, var(--sc-kit--radius--sm));
+  --_dp--underline-color: var(--sc-kit--date-picker--underline-color, transparent);
+  --_dp--font-size: var(--sc-kit--date-picker--font-size, var(--sc-kit--font-size--md));
+  --_dp--color: var(--sc-kit--date-picker--color, var(--sc-kit--color--text--primary));
+  --_dp--placeholder-color: var(--sc-kit--date-picker--placeholder--color, var(--sc-kit--color--text--placeholder));
+  --_dp--icon-color: var(--sc-kit--date-picker--icon--color, var(--sc-kit--color--text--muted));
+  --_dp--icon-size: var(--sc-kit--date-picker--icon--size, var(--sc-kit--field--icon--size--md));
+  --_--input-affordance--opacity: 0;
+  --_--input-affordance--scale: 0;
+}
+.date-picker:where(:hover), .date-picker:where(:focus-within) {
+  --_--input-affordance--opacity: 1;
+  --_--input-affordance--scale: 1;
+}
+.date-picker {
+  position: relative;
+  display: inline-block;
+  width: var(--_dp--width);
+  max-width: 100%;
+}
+.date-picker--open {
+  --_--input-affordance--opacity: 1;
+  --_--input-affordance--scale: 1;
+}
+.date-picker--sm {
+  --sc-kit--date-picker--height: var(--sc-kit--field--height--sm);
+  --sc-kit--date-picker--padding-inline: var(--sc-kit--field--padding-inline--sm);
+  --sc-kit--date-picker--font-size: var(--sc-kit--font-size--sm);
+  --sc-kit--date-picker--icon--size: var(--sc-kit--field--icon--size--sm);
+}
+.date-picker--md {
+  --sc-kit--date-picker--height: var(--sc-kit--field--height--md);
+  --sc-kit--date-picker--padding-inline: var(--sc-kit--field--padding-inline--md);
+  --sc-kit--date-picker--font-size: var(--sc-kit--font-size--md);
+  --sc-kit--date-picker--icon--size: var(--sc-kit--field--icon--size--md);
+}
+.date-picker--lg {
+  --sc-kit--date-picker--height: var(--sc-kit--field--height--lg);
+  --sc-kit--date-picker--padding-inline: var(--sc-kit--field--padding-inline--lg);
+  --sc-kit--date-picker--font-size: var(--sc-kit--font-size--lg);
+  --sc-kit--date-picker--icon--size: var(--sc-kit--field--icon--size--lg);
+}
+.date-picker--open {
+  --sc-kit--date-picker--underline-color: var(--sc-kit--color--accent);
+}
+.date-picker--error {
+  --sc-kit--date-picker--border-color: var(--_dp--border-color-error);
+  --sc-kit--date-picker--underline-color: var(--sc-kit--color--danger);
+}
+.date-picker--disabled, .date-picker--readonly, .date-picker--inert {
+  --sc-kit--date-picker--underline-color: unset;
+  --_--input-affordance--opacity: 0;
+  --_--input-affordance--scale: 0;
+}
+.date-picker--disabled {
+  --sc-kit--date-picker--background: var(--_dp--background-disabled);
+  --sc-kit--date-picker--color: var(--sc-kit--color--text--muted);
+}
+.date-picker--readonly .date-picker__trigger, .date-picker--inert .date-picker__trigger {
+  cursor: default;
+}
+.date-picker--borderless {
+  --sc-kit--date-picker--background: transparent;
+  --sc-kit--date-picker--border-color: transparent;
+  --sc-kit--date-picker--underline-color: transparent;
+}
+.date-picker__trigger {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: var(--_dp--height);
+  padding: 0 var(--_dp--padding-inline);
+  background: var(--_dp--background);
+  border: 1px solid var(--_dp--border-color);
+  border-radius: var(--_dp--border-radius);
+  color: var(--_dp--color);
+  font-family: inherit;
+  font-size: var(--_dp--font-size);
+  line-height: var(--sc-kit--leading--tight);
+  box-shadow: inset 0 -0.13em var(--_dp--underline-color);
+  cursor: pointer;
+  transition: background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), border-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), color var(--sc-kit--duration--base) var(--sc-kit--ease--default), box-shadow var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.date-picker__trigger:disabled {
+  background: var(--_dp--background-disabled);
+  cursor: default;
+}
+.date-picker__trigger:focus-visible {
+  outline: 2px solid var(--sc-kit--color--border--focus);
+  outline-offset: 2px;
+}
+.date-picker__value {
+  flex: 1;
+  min-width: 0;
+  text-align: left;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.date-picker__value--placeholder {
+  color: var(--_dp--placeholder-color);
+}
+.date-picker__icon {
+  --sc-kit--icon--color: var(--_dp--icon-color);
+  --sc-kit--icon--size: var(--_dp--icon-size);
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+}
+.date-picker__icon--leading {
+  margin-inline-end: var(--_dp--gap);
+}
+.date-picker__icon--trailing {
+  margin-inline-start: var(--_dp--gap);
+}
+.date-picker__panel {
+  z-index: var(--sc-kit--z-index--popover);
+}</style>

package/dist/ui/date-picker/cmp.date-picker.svelte.d.ts

@@ -0,0 +1,82 @@
+import { type IconProp } from '../icon';
+import type { LikeDate } from './types';
+type BaseProps = {
+    /** @default 'md' */
+    size?: 'sm' | 'md' | 'lg';
+    placeholder?: string;
+    disabled?: boolean;
+    /** Non-clickable but still visible. Trigger button is disabled (like `disabled`) but cursor stays default. */
+    readonly?: boolean;
+    /** Visual display mode — non-focusable, no hover/focus animations, hidden clear button. */
+    inert?: boolean;
+    error?: boolean;
+    /** Strip border + background + focus underline. */
+    borderless?: boolean;
+    /** Earliest selectable date (inclusive). */
+    min?: LikeDate;
+    /** Latest selectable date (inclusive). */
+    max?: LikeDate;
+    /**
+     * BCP-47 locale tag. Drives month/weekday labels, trigger date formatting AND first day of week.
+     * When omitted, uses an opinionated default: `en-US` formatting + Monday-first calendar.
+     * When passed (even `'en-US'`), first day of week is derived from the locale via `Intl.Locale.getWeekInfo()`.
+     */
+    locale?: string;
+    /** Native form name. When set, a hidden input with the ISO value is rendered for form submission. */
+    name?: string;
+    id?: string | null;
+    autofocus?: boolean;
+    'aria-label'?: string;
+    'aria-describedby'?: string;
+    'aria-required'?: boolean;
+    /**
+     * Leading icon shown to the left of the value. Pass either a raw SVG string (used with `<Icon src={...} />`) or a `Snippet` for fully custom content.
+     * When set, the default calendar icon on the right is suppressed (the clear button still shows when applicable).
+     */
+    icon?: IconProp;
+};
+type ClearableProps = BaseProps & {
+    /** Value can be cleared to `null`. Trigger shows a clear (X) button when set. */
+    clearable: true;
+    value: LikeDate | null | undefined;
+    on?: {
+        change?: (value: string | null) => void;
+    };
+};
+type RequiredProps = BaseProps & {
+    /** Value is required. No clear button. */
+    clearable: false;
+    value: LikeDate;
+    on?: {
+        change?: (value: string) => void;
+    };
+};
+type Props = ClearableProps | RequiredProps;
+/**
+ * DatePicker — single-day calendar picker built on Floating UI for positioning. Discriminated by
+ * `clearable`: `clearable: true` allows clearing to `null` and shows a clear (X) button;
+ * `clearable: false` requires a value and renders no clear control. Emits ISO 8601 strings via
+ * `on.change` from local midnight of the picked day.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--date-picker--height` | Trigger height | per size |
+ * | `--sc-kit--date-picker--padding-inline` | Trigger horizontal padding | per size |
+ * | `--sc-kit--date-picker--gap` | Gap between value and icon/clear | `var(--sc-kit--space--2)` |
+ * | `--sc-kit--date-picker--width` | Trigger width | `100%` |
+ * | `--sc-kit--date-picker--background` | Trigger background | `var(--sc-kit--color--bg--field)` |
+ * | `--sc-kit--date-picker--background--disabled` | Trigger background when disabled | `var(--sc-kit--color--bg--field-alt)` |
+ * | `--sc-kit--date-picker--border-color` | Trigger border color | `var(--sc-kit--color--border--field)` |
+ * | `--sc-kit--date-picker--border-color--error` | Trigger border color in error state | `var(--sc-kit--color--danger)` |
+ * | `--sc-kit--date-picker--border-radius` | Trigger border radius | `var(--sc-kit--radius--sm)` |
+ * | `--sc-kit--date-picker--underline-color` | Inset bottom-underline indicator (transparent default, accent when open, danger on error) | `transparent` |
+ * | `--sc-kit--date-picker--font-size` | Trigger font size | per size |
+ * | `--sc-kit--date-picker--color` | Trigger text color | `var(--sc-kit--color--text--primary)` |
+ * | `--sc-kit--date-picker--placeholder--color` | Placeholder text color | `var(--sc-kit--color--text--placeholder)` |
+ * | `--sc-kit--date-picker--icon--color` | Leading / trailing icon color (does NOT affect inner affordances) | `var(--sc-kit--color--text--muted)` |
+ * | `--sc-kit--date-picker--icon--size` | Leading / trailing icon size (does NOT affect inner affordances) | per size |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/date-picker/date-picker-localization.d.ts

@@ -0,0 +1,6 @@
+export declare class DatePickerLocalization {
+    get clearDate(): string;
+    get chooseDate(): string;
+    get previousMonth(): string;
+    get nextMonth(): string;
+}

package/dist/ui/date-picker/date-picker-localization.js

@@ -0,0 +1,33 @@
+import { AppLocale } from '../../core/locale';
+export class DatePickerLocalization {
+    get clearDate() {
+        return loc.clearDate[AppLocale.current];
+    }
+    get chooseDate() {
+        return loc.chooseDate[AppLocale.current];
+    }
+    get previousMonth() {
+        return loc.previousMonth[AppLocale.current];
+    }
+    get nextMonth() {
+        return loc.nextMonth[AppLocale.current];
+    }
+}
+const loc = {
+    clearDate: {
+        en: 'Clear date',
+        no: 'Fjern dato'
+    },
+    chooseDate: {
+        en: 'Choose date',
+        no: 'Velg dato'
+    },
+    previousMonth: {
+        en: 'Previous month',
+        no: 'Forrige måned'
+    },
+    nextMonth: {
+        en: 'Next month',
+        no: 'Neste måned'
+    }
+};

package/dist/ui/date-picker/index.d.ts

@@ -0,0 +1,2 @@
+export { default as DatePicker } from './cmp.date-picker.svelte';
+export type { LikeDate } from './types';

package/dist/ui/date-picker/index.js

@@ -0,0 +1 @@
+export { default as DatePicker } from './cmp.date-picker.svelte';

package/dist/ui/date-picker/types.d.ts

@@ -0,0 +1 @@
+export type LikeDate = string | number | Date;

package/dist/ui/dialog/cmp.dialog-button.svelte

@@ -1,18 +1,25 @@
 <script lang="ts">import { default as Button } from '../button/cmp.button.svelte';
-let { type = 'button', disabled = false, autofocus = false, variant = 'primary', on, children } = $props();
+let { type = 'button', disabled = false, variant = 'primary', icon, on, children } = $props();
 </script>
 
 <div class="dialog-button">
-  <Button type={type} disabled={disabled} autofocus={autofocus} variant={variant} on={on}>
+  <Button type={type} disabled={disabled} variant={variant} icon={icon} on={on}>
     {@render children()}
   </Button>
 </div>
 
 <!--
 @component
-A dialog-specific action button with a minimum width preset. Defaults to the `primary` variant.
+DialogButton — action button for a dialog footer with a minimum width preset. Defaults to the `primary` variant. Wraps `<Button>` and exposes the same callback / disabled / type / icon contract.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--dialog-button--min-width` | Minimum button width | `8em` |
+
+(Plus every public CSS variable exposed by `<Button>` — set them on this element or any ancestor.)
 -->
 
 <style>.dialog-button {
-  --sc-kit--button--min-width: 8em;
+  --sc-kit--button--min-width: var(--sc-kit--dialog-button--min-width, 8em);
 }</style>

package/dist/ui/dialog/cmp.dialog-button.svelte.d.ts

@@ -1,18 +1,29 @@
-import type { ButtonVariant } from '../button/resources/types';
+import type { ButtonVariant } from '../button/types';
+import type { IconProp } from '../icon';
 import type { Snippet } from 'svelte';
 type Props = {
     /** @default 'button' */
     type?: 'button' | 'submit' | 'reset';
     disabled?: boolean;
-    autofocus?: boolean;
     /** Button color variant @default 'primary' */
     variant?: ButtonVariant;
+    /** Leading icon — passed through to Button. */
+    icon?: IconProp;
     on?: {
         click?: (e: MouseEvent) => void;
     };
     children: Snippet;
 };
-/** A dialog-specific action button with a minimum width preset. Defaults to the `primary` variant. */
+/**
+ * DialogButton — action button for a dialog footer with a minimum width preset. Defaults to the `primary` variant. Wraps `<Button>` and exposes the same callback / disabled / type / icon contract.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--dialog-button--min-width` | Minimum button width | `8em` |
+ *
+ * (Plus every public CSS variable exposed by `<Button>` — set them on this element or any ancestor.)
+ */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;
 export default Cmp;

package/dist/ui/dialog/cmp.dialog-cancel-button.svelte

@@ -3,16 +3,23 @@ let { disabled = false, on, children } = $props();
 </script>
 
 <div class="dialog-cancel-button">
-  <Button type="button" disabled={disabled} variant="standard" on={on}>
+  <Button type="button" disabled={disabled} variant="secondary" on={on}>
     {@render children()}
   </Button>
 </div>
 
 <!--
 @component
-A dialog-specific cancel button using the `standard` variant with a minimum width preset.
+DialogCancelButton — cancel button for a dialog footer using the `secondary` variant with a minimum width preset. Wraps `<Button>` and exposes a click callback.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--dialog-cancel-button--min-width` | Minimum button width | `8em` |
+
+(Plus every public CSS variable exposed by `<Button>` — set them on this element or any ancestor.)
 -->
 
 <style>.dialog-cancel-button {
-  --sc-kit--button--min-width: 8em;
+  --sc-kit--button--min-width: var(--sc-kit--dialog-cancel-button--min-width, 8em);
 }</style>

package/dist/ui/dialog/cmp.dialog-cancel-button.svelte.d.ts

@@ -6,7 +6,16 @@ type Props = {
     };
     children: Snippet;
 };
-/** A dialog-specific cancel button using the `standard` variant with a minimum width preset. */
+/**
+ * DialogCancelButton — cancel button for a dialog footer using the `secondary` variant with a minimum width preset. Wraps `<Button>` and exposes a click callback.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--dialog-cancel-button--min-width` | Minimum button width | `8em` |
+ *
+ * (Plus every public CSS variable exposed by `<Button>` — set them on this element or any ancestor.)
+ */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;
 export default Cmp;