@streamscloud/kit 0.2.42 → 0.9.1

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

@@ -4,6 +4,14 @@ type Props = {
     controller: DialogController<boolean, boolean>;
     data: ConfirmationDialogData;
 };
+/**
+ * Internal view for `openConfirmationDialog`. Renders the Dialog body + Yes/No footer. The Yes button's
+ * Button variant is derived from `data.style` (`alert → danger`, `warning → warning`, `info → primary`)
+ * so the confirmation reads the same as the surrounding banner color.
+ *
+ * Use the imperative `openConfirmationDialog({ title, text, style, icon })` from the package barrel —
+ * never render this view directly.
+ */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;
 export default Cmp;

package/dist/ui/cropper/image-editor-dialog/cmp.image-editor-dialog.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import { FileWithBlobDataHelper } from '../../../core/files';
-import { Toastr } from '../../../core/toastr';
 import { Dialog, DialogButton, DialogCancelButton } from '../../dialog';
+import { Toastr } from '../../toast';
 import { ImgCropper, ImgCropperControls, ImgCropperToolbar, ImgCropperView } from '../img-cropper';
 import { ImageEditorDialogLocalization } from './image-editor-dialog-localization';
 import { untrack } from 'svelte';

package/dist/ui/cropper/image-editor-dialog/crop-and-resize.d.ts

@@ -0,0 +1,36 @@
+import type { FileWithBlobUrl } from '../../../core/files';
+import type { ImageEditorDynamicAspectRatio } from './types';
+export type CropAndResizeOptions = {
+    /** Fixed aspect ratio, or dynamic selector, or omit for free crop. */
+    aspectRatio?: number | ImageEditorDynamicAspectRatio;
+    /** Crop/scale mode inside the editor canvas. @default 'cover' */
+    mode?: 'contain' | 'cover';
+    /** Fill color in `contain` mode (transparent letterbox by default). */
+    fillColor?: string;
+    /**
+     * After cropping, downscale to fit these limits. `max1` / `max2` are not tied to width /
+     * height — the longer side matches the larger limit. Pass `false` to disable resize.
+     * @default `{ max1: 1600, max2: 1000 }`
+     */
+    resize?: {
+        max1: number;
+        max2: number;
+    } | false;
+};
+/**
+ * Opens the kit's image editor dialog, lets the user crop, and (optionally) downscales the
+ * result before returning. Composable opt-in helper — call it explicitly from a consumer's
+ * select handler when image cropping is needed before upload.
+ *
+ * Returns `null` when the user cancels the dialog.
+ *
+ * @example
+ * ```ts
+ * const cropped = await cropAndResizeImage(file, {
+ *   aspectRatio: 1,
+ *   resize: { max1: 400, max2: 400 }
+ * });
+ * if (cropped) store.add(cropped);
+ * ```
+ */
+export declare const cropAndResizeImage: (file: File, options?: CropAndResizeOptions) => Promise<FileWithBlobUrl | null>;

package/dist/ui/cropper/image-editor-dialog/crop-and-resize.js

@@ -0,0 +1,47 @@
+import { FileWithBlobDataHelper, resizeBlob } from '../../../core/files';
+import { openImageEditorDialog } from './index';
+const DEFAULT_RESIZE_LIMITS = { max1: 1600, max2: 1000 };
+/**
+ * Opens the kit's image editor dialog, lets the user crop, and (optionally) downscales the
+ * result before returning. Composable opt-in helper — call it explicitly from a consumer's
+ * select handler when image cropping is needed before upload.
+ *
+ * Returns `null` when the user cancels the dialog.
+ *
+ * @example
+ * ```ts
+ * const cropped = await cropAndResizeImage(file, {
+ *   aspectRatio: 1,
+ *   resize: { max1: 400, max2: 400 }
+ * });
+ * if (cropped) store.add(cropped);
+ * ```
+ */
+export const cropAndResizeImage = async (file, options = {}) => {
+    const sourceUrl = URL.createObjectURL(file);
+    try {
+        const result = await openImageEditorDialog({
+            url: sourceUrl,
+            aspectRatio: options.aspectRatio,
+            mode: options.mode,
+            fillColor: options.fillColor
+        });
+        if (result.wasCanceled) {
+            return null;
+        }
+        const cropped = result.value.croppedFile;
+        if (options.resize === false) {
+            return cropped;
+        }
+        const limits = options.resize ?? DEFAULT_RESIZE_LIMITS;
+        const resizedBlob = await resizeBlob(cropped, limits);
+        // Already-fitting blob? `resizeBlob` returns the same instance — short-circuit.
+        if (resizedBlob === cropped) {
+            return cropped;
+        }
+        return FileWithBlobDataHelper.fromBlob(resizedBlob, { id: cropped.id });
+    }
+    finally {
+        URL.revokeObjectURL(sourceUrl);
+    }
+};

package/dist/ui/cropper/image-editor-dialog/index.d.ts

@@ -8,8 +8,8 @@ import type { ImageEditorDialogOptions, ImageEditorDialogResult } from './types'
  * - **`contain`** — image is fitted inside the canvas with optional fill color.
  *
  * ### Aspect ratio
- * - `number` — fixed ratio, no dropdown.
- * - `ImageEditorDynamicAspectRatio` — dropdown with supported ratios. `allowFreeCrop: true`
+ * - `number` — fixed ratio, no popover.
+ * - `ImageEditorDynamicAspectRatio` — popover with supported ratios. `allowFreeCrop: true`
  *   adds a free-ratio option; `initial` is optional when free crop is enabled.
  * - Omitted — free crop (no ratio constraint on the selection).
  *
@@ -19,3 +19,5 @@ import type { ImageEditorDialogOptions, ImageEditorDialogResult } from './types'
  */
 export declare const openImageEditorDialog: (options: ImageEditorDialogOptions) => Promise<DialogResult<ImageEditorDialogResult>>;
 export type { CroppedFile, ImageEditorDialogOptions, ImageEditorDialogResult, ImageEditorDynamicAspectRatio } from './types';
+export { cropAndResizeImage } from './crop-and-resize';
+export type { CropAndResizeOptions } from './crop-and-resize';

package/dist/ui/cropper/image-editor-dialog/index.js

@@ -8,8 +8,8 @@ import { default as ImageEditorDialog } from './cmp.image-editor-dialog.svelte';
  * - **`contain`** — image is fitted inside the canvas with optional fill color.
  *
  * ### Aspect ratio
- * - `number` — fixed ratio, no dropdown.
- * - `ImageEditorDynamicAspectRatio` — dropdown with supported ratios. `allowFreeCrop: true`
+ * - `number` — fixed ratio, no popover.
+ * - `ImageEditorDynamicAspectRatio` — popover with supported ratios. `allowFreeCrop: true`
  *   adds a free-ratio option; `initial` is optional when free crop is enabled.
  * - Omitted — free crop (no ratio constraint on the selection).
  *
@@ -23,3 +23,4 @@ export const openImageEditorDialog = async (options) => {
         data: options
     });
 };
+export { cropAndResizeImage } from './crop-and-resize';

package/dist/ui/cropper/img-cropper/cmp.img-cropper-controls.svelte

@@ -31,37 +31,38 @@ Can be placed anywhere in the layout.
 <style>.img-cropper-controls {
   --_img-cropper-controls--background: var(--sc-kit--img-cropper-controls--background, transparent);
   width: 15rem;
-  padding: 0.3125rem;
+  padding: var(--sc-kit--space--1);
   display: flex;
-  gap: 0.625rem;
+  gap: var(--sc-kit--space--3);
   background: var(--_img-cropper-controls--background);
 }
 .img-cropper-controls__button {
-  font-size: 0.75rem;
-  padding: 0.25rem 1rem;
-  border-radius: 0.25rem;
+  font-size: var(--sc-kit--font-size--sm);
+  padding: var(--sc-kit--space--1) var(--sc-kit--space--4);
+  border-radius: var(--sc-kit--radius--sm);
   max-width: 8rem;
-  height: 2rem;
+  height: var(--sc-kit--field--height--md);
   display: inline-flex;
   flex: 1;
   justify-content: center;
   align-items: center;
   cursor: pointer;
-  transition: background-color linear 0.2s, color linear 0.2s;
+  transition: background-color var(--sc-kit--duration--base) linear, color var(--sc-kit--duration--base) linear;
 }
 .img-cropper-controls__button--apply {
-  color: #ffffff;
-  background: #0cce6b;
+  color: var(--sc-kit--color--text--on-accent);
+  background: var(--sc-kit--color--success);
+  border: 0;
 }
 .img-cropper-controls__button--apply:hover {
-  background: #0bbc60;
+  background: var(--sc-kit--color--success--hover);
 }
 .img-cropper-controls__button--cancel {
-  color: light-dark(#2e2e2e, #ffffff);
-  background: light-dark(#ffffff, #222222);
-  border: 1px solid light-dark(#e5e7eb, #242424);
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+  color: var(--sc-kit--color--text--primary);
+  background: var(--sc-kit--color--bg--panel);
+  border: 1px solid var(--sc-kit--color--border);
+  box-shadow: var(--sc-kit--shadow--card);
 }
 .img-cropper-controls__button--cancel:hover {
-  background: light-dark(#f9fafb, #242424);
+  background: var(--sc-kit--color--bg--hover);
 }</style>

package/dist/ui/cropper/img-cropper/cmp.img-cropper-toolbar.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import { ColorPicker } from '../../color-picker';
-import { Dropdown } from '../../dropdown';
 import { Icon } from '../../icon';
 import { IconText } from '../../icon-text';
+import { Popover } from '../../popover';
 import { ImgCropperToolbarLocalization } from './img-cropper-toolbar-localization';
 import IconArrowMove from '@fluentui/svg-icons/icons/arrow_move_20_regular.svg?raw';
 import IconReset from '@fluentui/svg-icons/icons/arrow_reset_20_regular.svg?raw';
@@ -50,7 +50,7 @@ const selectedRatioLabel = $derived.by(() => {
   {#if cropper.ratioOptions}
     <div class="img-cropper-toolbar__ratio">
       <span class="img-cropper-toolbar__label">{loc.ratio}</span>
-      <Dropdown position="top" panel={false}>
+      <Popover position="top" panel={false}>
         {#snippet trigger()}
           <div class="img-cropper-toolbar__ratio-trigger">{selectedRatioLabel}</div>
         {/snippet}
@@ -61,7 +61,7 @@ const selectedRatioLabel = $derived.by(() => {
             </button>
           {/each}
         </div>
-      </Dropdown>
+      </Popover>
     </div>
   {/if}
 
@@ -91,7 +91,7 @@ const selectedRatioLabel = $derived.by(() => {
 <!--
 @component
 Toolbar with image manipulation buttons: Move, Crop, Zoom In/Out, Rotate, Reset.
-Shows aspect ratio dropdown when `cropper.ratioOptions` is set, and fill color
+Shows aspect ratio popover when `cropper.ratioOptions` is set, and fill color
 picker when `cropper.showFillColor` is true (derived from `mode === 'contain'`).
 
 ### Props
@@ -110,13 +110,10 @@ picker when `cropper.showFillColor` is true (derived from `mode === 'contain'`).
 -->
 
 <style>.img-cropper-toolbar {
-  --_img-cropper-toolbar--color: var(--sc-kit--img-cropper-toolbar--color, light-dark(#2e2e2e, #ffffff));
-  --_img-cropper-toolbar--background: var(--sc-kit--img-cropper-toolbar--background, light-dark(#ffffff, #222222));
-  --_img-cropper-toolbar--border-color: var(--sc-kit--img-cropper-toolbar--border-color, light-dark(#e5e7eb, #242424));
-  --_img-cropper-toolbar--active-color: var(
-    --sc-kit--img-cropper-toolbar--active-color,
-    light-dark(#144ab0, #5a8dec)
-  );
+  --_img-cropper-toolbar--color: var(--sc-kit--img-cropper-toolbar--color, var(--sc-kit--color--text--primary));
+  --_img-cropper-toolbar--background: var(--sc-kit--img-cropper-toolbar--background, var(--sc-kit--color--bg--panel));
+  --_img-cropper-toolbar--border-color: var(--sc-kit--img-cropper-toolbar--border-color, var(--sc-kit--color--border));
+  --_img-cropper-toolbar--active-color: var(--sc-kit--img-cropper-toolbar--active-color, var(--sc-kit--color--accent));
   container-type: inline-size;
   display: flex;
   align-items: center;
@@ -192,7 +189,7 @@ picker when `cropper.showFillColor` is true (derived from `mode === 'contain'`).
   color: var(--_img-cropper-toolbar--color);
 }
 .img-cropper-toolbar__ratio-item:hover {
-  background: light-dark(#f9fafb, #242424);
+  background: var(--sc-kit--color--bg--hover);
 }
 .img-cropper-toolbar__fill {
   display: flex;

package/dist/ui/cropper/img-cropper/cmp.img-cropper-toolbar.svelte.d.ts

@@ -6,7 +6,7 @@ type Props = {
 };
 /**
  * Toolbar with image manipulation buttons: Move, Crop, Zoom In/Out, Rotate, Reset.
- * Shows aspect ratio dropdown when `cropper.ratioOptions` is set, and fill color
+ * Shows aspect ratio popover when `cropper.ratioOptions` is set, and fill color
  * picker when `cropper.showFillColor` is true (derived from `mode === 'contain'`).
  *
  * ### Props

package/dist/ui/cropper/img-cropper/cmp.img-cropper.svelte

@@ -1,5 +1,5 @@
-<script lang="ts">import { Toastr } from '../../../core/toastr';
-import { Loading } from '../../loading';
+<script lang="ts">import { Spinner } from '../../spinner';
+import { Toastr } from '../../toast';
 import { default as ImgCropperControls } from './cmp.img-cropper-controls.svelte';
 import { ImgCropperLocalization } from './img-cropper-localization';
 const { src, cropper, showControls = true } = $props();
@@ -57,7 +57,7 @@ const observeResize = (el) => {
 
 <div class="img-cropper" use:observeResize style:--img-cropper--fill-color={cropper.fillColor || undefined}>
   {#if cropper.loading || !cropper.ready}
-    <Loading positionAbsoluteCenter={true} />
+    <Spinner position="absolute-center" size="lg" />
   {/if}
 
   {#if cropperLoaded}
@@ -125,7 +125,7 @@ Aspect ratio is configured on the `ImgCropper` instance via the `aspectRatio` op
 
 - **Fixed number** (e.g. `16/9`) — locks the crop selection to this ratio.
 - **Dynamic object** (`ImgCropperDynamicAspectRatio`) — provides a list of `supported`
-  ratios and an optional `initial` value. The toolbar renders a ratio dropdown when
+  ratios and an optional `initial` value. The toolbar renders a ratio popover when
   multiple options are available. `allowFreeCrop: true` adds a free-ratio option
   that lets the user draw an unconstrained selection.
 - **Omitted** — defaults to free crop (no ratio constraint on the selection).

package/dist/ui/cropper/img-cropper/cmp.img-cropper.svelte.d.ts

@@ -29,7 +29,7 @@ type Props = {
  *
  * - **Fixed number** (e.g. `16/9`) — locks the crop selection to this ratio.
  * - **Dynamic object** (`ImgCropperDynamicAspectRatio`) — provides a list of `supported`
- * ratios and an optional `initial` value. The toolbar renders a ratio dropdown when
+ * ratios and an optional `initial` value. The toolbar renders a ratio popover when
  * multiple options are available. `allowFreeCrop: true` adds a free-ratio option
  * that lets the user draw an unconstrained selection.
  * - **Omitted** — defaults to free crop (no ratio constraint on the selection).

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

@@ -0,0 +1,294 @@
+<script lang="ts">import { Icon } from '../icon';
+import { DatePickerLocalization } from './date-picker-localization';
+import IconChevronLeft from '@fluentui/svg-icons/icons/chevron_left_16_regular.svg?raw';
+import IconChevronRight from '@fluentui/svg-icons/icons/chevron_right_16_regular.svg?raw';
+import { untrack } from 'svelte';
+const { selectedDate, minDate = null, maxDate = null, locale, firstDayOfWeek, on } = $props();
+const localization = new DatePickerLocalization();
+const localDay = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
+const todayInit = new Date();
+let viewYear = $state(todayInit.getFullYear());
+let viewMonth = $state(todayInit.getMonth());
+$effect(() => {
+    untrack(() => {
+        if (selectedDate) {
+            viewYear = selectedDate.getFullYear();
+            viewMonth = selectedDate.getMonth();
+        }
+    });
+});
+/** ISO firstDayOfWeek (1=Mon..7=Sun) converted to JS getDay() space (0=Sun..6=Sat). */
+const firstDayJs = $derived(firstDayOfWeek === 7 ? 0 : firstDayOfWeek);
+const monthYearFmt = $derived(new Intl.DateTimeFormat(locale, { year: 'numeric', month: 'long' }));
+const weekdayFmt = $derived(new Intl.DateTimeFormat(locale, { weekday: 'short' }));
+const weekdays = $derived.by(() => {
+    const labels = [];
+    for (let i = 0; i < 7; i++) {
+        // 2024-01-07 is a Sunday (JS day 0). Walk 7 days starting from firstDayJs.
+        const ref = new Date(2024, 0, 7 + ((firstDayJs + i) % 7));
+        labels.push(weekdayFmt.format(ref));
+    }
+    return labels;
+});
+const grid = $derived.by(() => {
+    const first = new Date(viewYear, viewMonth, 1);
+    const shift = (first.getDay() - firstDayJs + 7) % 7;
+    const firstCell = new Date(viewYear, viewMonth, 1 - shift);
+    const minTs = minDate ? localDay(minDate) : null;
+    const maxTs = maxDate ? localDay(maxDate) : null;
+    const todayTs = localDay(new Date());
+    const selectedTs = selectedDate ? localDay(selectedDate) : null;
+    const weeks = [];
+    for (let w = 0; w < 6; w++) {
+        const row = [];
+        for (let d = 0; d < 7; d++) {
+            const cellDate = new Date(firstCell);
+            cellDate.setDate(firstCell.getDate() + w * 7 + d);
+            const cellTs = localDay(cellDate);
+            row.push({
+                date: cellDate,
+                day: cellDate.getDate(),
+                outside: cellDate.getMonth() !== viewMonth,
+                isDisabled: (minTs !== null && cellTs < minTs) || (maxTs !== null && cellTs > maxTs),
+                isToday: cellTs === todayTs,
+                isSelected: selectedTs !== null && cellTs === selectedTs
+            });
+        }
+        weeks.push(row);
+    }
+    return weeks;
+});
+const prevMonth = () => {
+    if (viewMonth === 0) {
+        viewMonth = 11;
+        viewYear -= 1;
+    }
+    else {
+        viewMonth -= 1;
+    }
+};
+const nextMonth = () => {
+    if (viewMonth === 11) {
+        viewMonth = 0;
+        viewYear += 1;
+    }
+    else {
+        viewMonth += 1;
+    }
+};
+const handleSelect = (cell) => {
+    if (cell.isDisabled) {
+        return;
+    }
+    on.select(new Date(cell.date.getFullYear(), cell.date.getMonth(), cell.date.getDate()));
+};
+</script>
+
+<div class="date-picker-calendar" role="dialog" aria-label={localization.chooseDate}>
+  <div class="date-picker-calendar__nav">
+    <button type="button" class="date-picker-calendar__nav-btn" aria-label={localization.previousMonth} onclick={prevMonth}>
+      <Icon src={IconChevronLeft} />
+    </button>
+    <span class="date-picker-calendar__nav-label">{monthYearFmt.format(new Date(viewYear, viewMonth, 1))}</span>
+    <button type="button" class="date-picker-calendar__nav-btn" aria-label={localization.nextMonth} onclick={nextMonth}>
+      <Icon src={IconChevronRight} />
+    </button>
+  </div>
+  <div class="date-picker-calendar__grid">
+    {#each weekdays as wd (wd)}
+      <span class="date-picker-calendar__weekday">{wd}</span>
+    {/each}
+    {#each grid as week, wi (wi)}
+      {#each week as cell, ci (wi + ':' + ci)}
+        <button
+          type="button"
+          class="date-picker-calendar__cell"
+          class:date-picker-calendar__cell--outside={cell.outside}
+          class:date-picker-calendar__cell--today={cell.isToday}
+          class:date-picker-calendar__cell--selected={cell.isSelected}
+          class:date-picker-calendar__cell--disabled={cell.isDisabled}
+          disabled={cell.isDisabled}
+          onclick={() => handleSelect(cell)}>
+          {cell.day}
+        </button>
+      {/each}
+    {/each}
+  </div>
+</div>
+
+<!--
+@component
+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)` |
+-->
+
+<style>.date-picker-calendar {
+  /* PANEL */
+  --_dpc--width: var(--sc-kit--date-picker-calendar--width, 17.5rem);
+  --_dpc--padding: var(--sc-kit--date-picker-calendar--padding, var(--sc-kit--space--3));
+  --_dpc--background: var(--sc-kit--date-picker-calendar--background, var(--sc-kit--color--bg--panel));
+  --_dpc--border-color: var(--sc-kit--date-picker-calendar--border-color, var(--sc-kit--color--border));
+  --_dpc--border-radius: var(--sc-kit--date-picker-calendar--border-radius, var(--sc-kit--radius--md));
+  --_dpc--shadow: var(--sc-kit--date-picker-calendar--shadow, var(--sc-kit--shadow--lg));
+  /* NAV */
+  --_dpc--nav-gap: var(--sc-kit--date-picker-calendar--nav--gap, var(--sc-kit--space--2));
+  --_dpc--nav-btn-size: var(--sc-kit--date-picker-calendar--nav--btn-size, 1.75rem);
+  --_dpc--nav-btn-color: var(--sc-kit--date-picker-calendar--nav--btn-color, var(--sc-kit--color--text--muted));
+  --_dpc--nav-btn-color-hover: var(--sc-kit--date-picker-calendar--nav--btn-color--hover, var(--sc-kit--color--text--primary));
+  --_dpc--nav-btn-background-hover: var(--sc-kit--date-picker-calendar--nav--btn-background--hover, var(--sc-kit--color--bg--hover));
+  --_dpc--nav-btn-icon-size: var(--sc-kit--date-picker-calendar--nav--btn-icon-size, 0.75rem);
+  --_dpc--nav-btn-border-radius: var(--sc-kit--date-picker-calendar--nav--btn-border-radius, var(--sc-kit--radius--sm));
+  --_dpc--nav-label-font-size: var(--sc-kit--date-picker-calendar--nav--label-font-size, var(--sc-kit--font-size--md));
+  --_dpc--nav-label-font-weight: var(--sc-kit--date-picker-calendar--nav--label-font-weight, var(--sc-kit--font-weight--semibold));
+  --_dpc--nav-label-color: var(--sc-kit--date-picker-calendar--nav--label-color, var(--sc-kit--color--text--primary));
+  /* GRID + WEEKDAYS */
+  --_dpc--grid-gap: var(--sc-kit--date-picker-calendar--grid--gap, 2px);
+  --_dpc--weekday-font-size: var(--sc-kit--date-picker-calendar--weekday--font-size, 0.625rem);
+  --_dpc--weekday-color: var(--sc-kit--date-picker-calendar--weekday--color, var(--sc-kit--color--text--muted));
+  --_dpc--weekday-letter-spacing: var(--sc-kit--date-picker-calendar--weekday--letter-spacing, var(--sc-kit--letter-spacing--wide));
+  --_dpc--weekday-padding-block: var(--sc-kit--date-picker-calendar--weekday--padding-block, var(--sc-kit--space--1));
+  /* CELL */
+  --_dpc--cell-size: var(--sc-kit--date-picker-calendar--cell--size, 2rem);
+  --_dpc--cell-font-size: var(--sc-kit--date-picker-calendar--cell--font-size, var(--sc-kit--font-size--sm));
+  --_dpc--cell-color: var(--sc-kit--date-picker-calendar--cell--color, var(--sc-kit--color--text--primary));
+  --_dpc--cell-border-radius: var(--sc-kit--date-picker-calendar--cell--border-radius, var(--sc-kit--radius--sm));
+  --_dpc--cell-background-hover: var(--sc-kit--date-picker-calendar--cell--background--hover, var(--sc-kit--color--bg--hover));
+  --_dpc--cell-color-outside: var(--sc-kit--date-picker-calendar--cell--color--outside, var(--sc-kit--color--text--muted));
+  --_dpc--cell-color-today: var(--sc-kit--date-picker-calendar--cell--color--today, var(--sc-kit--color--accent));
+  --_dpc--cell-font-weight-today: var(--sc-kit--date-picker-calendar--cell--font-weight--today, var(--sc-kit--font-weight--semibold));
+  --_dpc--cell-background-selected: var(--sc-kit--date-picker-calendar--cell--background--selected, var(--sc-kit--color--accent));
+  --_dpc--cell-color-selected: var(--sc-kit--date-picker-calendar--cell--color--selected, var(--sc-kit--color--text--on-accent));
+  --_dpc--cell-color-disabled: var(--sc-kit--date-picker-calendar--cell--color--disabled, var(--sc-kit--color--text--placeholder));
+  box-sizing: border-box;
+  width: var(--_dpc--width);
+  padding: var(--_dpc--padding);
+  background: var(--_dpc--background);
+  border: 1px solid var(--_dpc--border-color);
+  border-radius: var(--_dpc--border-radius);
+  box-shadow: var(--_dpc--shadow);
+}
+.date-picker-calendar__nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--_dpc--nav-gap);
+}
+.date-picker-calendar__nav-btn {
+  --sc-kit--icon--size: var(--_dpc--nav-btn-icon-size);
+  --sc-kit--icon--color: var(--_dpc--nav-btn-color);
+  box-sizing: border-box;
+  width: var(--_dpc--nav-btn-size);
+  height: var(--_dpc--nav-btn-size);
+  border: none;
+  background: transparent;
+  border-radius: var(--_dpc--nav-btn-border-radius);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.date-picker-calendar__nav-btn:hover {
+  --sc-kit--icon--color: var(--_dpc--nav-btn-color-hover);
+  background: var(--_dpc--nav-btn-background-hover);
+}
+.date-picker-calendar__nav-label {
+  font-size: var(--_dpc--nav-label-font-size);
+  font-weight: var(--_dpc--nav-label-font-weight);
+  color: var(--_dpc--nav-label-color);
+  text-overflow: ellipsis;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.date-picker-calendar__grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: var(--_dpc--grid-gap);
+}
+.date-picker-calendar__weekday {
+  display: block;
+  width: 100%;
+  text-align: center;
+  font-size: var(--_dpc--weekday-font-size);
+  color: var(--_dpc--weekday-color);
+  text-transform: uppercase;
+  letter-spacing: var(--_dpc--weekday-letter-spacing);
+  padding: var(--_dpc--weekday-padding-block) 0;
+}
+.date-picker-calendar__cell {
+  box-sizing: border-box;
+  width: 100%;
+  height: var(--_dpc--cell-size);
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--_dpc--cell-color);
+  font-family: inherit;
+  font-size: var(--_dpc--cell-font-size);
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+  border-radius: var(--_dpc--cell-border-radius);
+  cursor: pointer;
+  transition: background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.date-picker-calendar__cell:hover:not(:disabled):not(.date-picker-calendar__cell--selected) {
+  background: var(--_dpc--cell-background-hover);
+}
+.date-picker-calendar__cell--outside {
+  color: var(--_dpc--cell-color-outside);
+}
+.date-picker-calendar__cell--today {
+  color: var(--_dpc--cell-color-today);
+  font-weight: var(--_dpc--cell-font-weight-today);
+}
+.date-picker-calendar__cell--selected {
+  background: var(--_dpc--cell-background-selected);
+  color: var(--_dpc--cell-color-selected);
+}
+.date-picker-calendar__cell--disabled, .date-picker-calendar__cell:disabled {
+  color: var(--_dpc--cell-color-disabled);
+  cursor: default;
+  text-decoration: line-through;
+}</style>