@mhmo91/schmancy 0.10.42 → 0.10.43

package/types/src/form/fields/date-range/date-range-dialog.d.ts

@@ -1,40 +1,36 @@
 import { SchmancyElement } from '@mixins/index';
-import { PresetCategory } from './date-range-presets';
+export interface DateRangeDialogPreset {
+    id: string;
+    label: string;
+    start: string;
+    end: string;
+}
 /**
- * Dialog content component for date range selection
+ * Picker panel for `<schmancy-date-range>`.
  *
- * Redesigned with chip-based horizontal flow layout:
- * - Quick Select: Today, Yesterday, This Week, This Month
- * - Days: Last 7/14/30/60/90 Days
- * - Periods: Last Week, Last Month, Last Quarter, Last Year
- * - Year to Date: This Week, This Month, This Quarter, This Year, YTD
- * - Custom Range: Manual date inputs at the bottom
+ * Layout: sticky chip quick-rail → continuous-scroll calendar → secondary typed path.
+ * Emits composed events that `<schmancy-date-range>` bridges into its own
+ * `input`/`change` events.
  *
  * @element schmancy-date-range-dialog
+ * @fires calendar-input  - Provisional sweep from the calendar   { start, end }
+ * @fires calendar-change - Committed endpoint from the calendar   { start, end }
+ * @fires preset-select   - A chip was clicked                     { id, label, start, end }
  */
 export declare class SchmancyDateRangeDialog extends SchmancyElement {
     static styles: import("lit").CSSResult[];
     type: 'date' | 'datetime-local';
-    dateFrom: {
-        label: string;
-        value: string;
-    };
-    dateTo: {
-        label: string;
-        value: string;
-    };
-    minDate?: string;
-    maxDate?: string;
-    activePreset: string | null;
-    presetCategories: PresetCategory[];
-    /**
-     * Reorganizes presets into the new grouped layout
-     */
-    private getPresetGroups;
-    private handleFromDateChange;
-    private handleToDateChange;
-    private handlePresetSelection;
-    private applyManualDateSelection;
+    start: string | null;
+    end: string | null;
+    min?: string;
+    max?: string;
+    preset: string | null;
+    presets: DateRangeDialogPreset[];
+    private handleCalendarInput;
+    private handleCalendarChange;
+    private handlePresetClick;
+    private handleFromChange;
+    private handleToChange;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/types/src/form/fields/date-range/date-range.d.ts

@@ -1,100 +1,69 @@
 import { PropertyValues } from 'lit';
 import './date-range-dialog';
+import type { DateRangeDialogPreset } from './date-range-dialog';
+export type SchmancyDateRangeInputEvent = CustomEvent<{
+    start: string | null;
+    end: string | null;
+}>;
 export type SchmancyDateRangeChangeEvent = CustomEvent<{
-    dateFrom: string;
-    dateTo: string;
+    start: string | null;
+    end: string | null;
+    preset: string | null;
 }>;
 declare const SchmancyDateRange_base: import("@mixins/index").Constructor<import("@mixins/index").IFormFieldMixin> & import("@mixins/index").Constructor<import("@mixins/index").ITailwindElementMixin> & import("@mixins/index").Constructor<import("lit").LitElement> & import("@mixins/index").Constructor<import("@mixins/index").IBaseMixin>;
 /**
- * A date range selector that supports presets and manual date input.
+ * A date range selector composing `<schmancy-calendar mode="range">` with a
+ * sticky preset chip quick-rail and a secondary typed-entry path.
+ *
+ * Public API: flat ISO `start`/`end`, `preset` read-back, `presets` array.
+ * FormData: `${name}.start` / `${name}.end` (empty endpoint omitted).
  *
  * @element schmancy-date-range
- * @fires change - Fired when the date range changes with dateFrom and dateTo values
+ * @fires input  - Provisional sweep preview  { start, end }
+ * @fires change - Committed range change      { start, end, preset }
  */
 export declare class SchmancyDateRange extends SchmancyDateRange_base {
     type: 'date' | 'datetime-local';
-    dateFrom: {
-        label: string;
-        value: string;
-    };
-    dateTo: {
-        label: string;
-        value: string;
-    };
-    minDate?: string;
-    maxDate?: string;
-    customPresets: Array<{
-        label: string;
-        dateFrom: string;
-        dateTo: string;
-    }>;
-    format?: string;
+    start: string | null;
+    end: string | null;
+    presets: DateRangeDialogPreset[];
+    /** Selected preset id; null = custom range. Reflects to attribute. */
+    preset: string | null;
+    min?: string;
+    max?: string;
     placeholder: string;
     clearable: boolean;
     step?: 'day' | 'week' | 'month' | 'year' | number;
-    /** When true, collapses to just an icon button on mobile screens */
+    /** Collapses to an icon-only button on narrow viewports. */
     collapse: boolean;
     private readonly open$;
     private readonly close$;
     private readonly announce$;
     private isOpen;
-    private selectedDateRange;
-    private activePreset;
     private announceMessage;
-    private presetRanges;
-    private presetCategories;
-    private memoizedPresets;
+    private startDefault;
+    private endDefault;
+    private presetDefault;
     disconnectedCallback(): void;
     connectedCallback(): void;
-    updated(changedProps: PropertyValues): void;
     willUpdate(changed: PropertyValues): void;
-    /**
-     * Date-range validity is `both dates non-empty` when required.
-     * (Order/range constraints are out of scope here — they belong to a
-     * domain-specific schema layer.)
-     */
     checkValidity(): boolean;
-    /**
-     * Override — emit `${name}From` and `${name}To` flat-suffix entries (the
-     * plan's chosen multi-entry encoding; native to JS consumers without
-     * server-side bracket parsing).
-     */
     toFormEntries(): Array<[string, FormDataEntryValue]>;
-    /** `dirty` tracks the underlying date strings, not the wide-union value. */
-    private dateFromDefault;
-    private dateToDefault;
-    firstUpdated(changed: PropertyValues): void;
     get dirty(): boolean;
+    firstUpdated(changed: PropertyValues): void;
     resetForm(): void;
-    private initPresetRanges;
-    private getDateFormat;
-    /**
-     * Creates a concise display format for the selected date range
-     */
-    private updateSelectedDateRange;
-    private setDateRange;
+    private commitRange;
+    private displayLabel;
     private toggleDropdown;
-    /**
-     * Shifts the date range based on the step property
-     */
     private shiftDateRange;
-    /**
-     * Handle keyboard navigation for accessibility
-     */
-    private handleKeyboardNavigation;
-    /**
-     * Checks if the current date range matches any predefined preset,
-     * and updates the activePreset accordingly
-     */
-    private checkAndUpdateActivePreset;
-    /**
-     * Check if we can navigate backward
-     */
+    private handleKeyDown;
     private canNavigateBackward;
-    /**
-     * Check if we can navigate forward
-     */
     private canNavigateForward;
     render(): import("lit-html").TemplateResult<1>;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'schmancy-date-range': SchmancyDateRange;
+    }
+}
 export {};

package/types/src/form/fields/date-range/date-range.test.d.ts

@@ -1 +1,2 @@
 import './date-range';
+import '../../../overlay/overlay.component';

package/types/src/form/fields/date-range/index.d.ts

@@ -1,2 +1,2 @@
 export * from './date-range';
-export * from './date-utils';
+export * from './date-range-dialog';

package/types/src/index.d.ts

@@ -5,6 +5,7 @@ export * from './badge';
 export * from './boat';
 export * from './busy';
 export * from './button';
+export * from './calendar';
 export * from './card';
 export * from './form/fields/checkbox';
 export * from './form/fields/chips';

package/types/src/surface/surface.styles.d.ts

@@ -1,11 +1,18 @@
 /**
- * Luminous Glass surface type styles.
+ * Surface type styles — tonal depth model.
  *
- * Depth model: blur intensity + opacity replaces M3 tonal hierarchy.
- * - solid:    opaque ground (0 blur, 100% opacity)
- * - subtle:   frosted panel (4px blur, ~72% opacity)
- * - glass:    full frosted glass (20px blur, ~55% opacity)
- * - luminous: glass + glow halo (24px blur, ~22% opacity)
+ * Constants (single source of truth):
+ *   --glass-material: blur(16px) saturate(180%)
+ *   --glass-opacity:  72%
+ *
+ * Rationale: `blur(16px) saturate(180%)` is the `glass` recipe's
+ * blur+saturate pair — the readable mid-point. Opacity is raised to 72%
+ * (from the prior `glass` recipe's 55%) so that lighter tonal levels
+ * (`surface`, `surfaceDim`, `surfaceBright`) satisfy the M3 contained-text
+ * readability contract: at 72% the base tint is dominant enough that the
+ * lighter tones still carry readable foreground text across light and dark
+ * schemes. Darker tones (`container`…`containerHighest`) gain a slight
+ * opacity boost for free — no readability regression there.
  */
 export declare const surfaceTypeStyles: import("lit").CSSResult;
 /**

package/types/src/types/surface.d.ts

@@ -1,27 +1,22 @@
 /**
- * Luminous Glass surface types.
+ * Surface vocabulary — three closed sets covering every `type` value
+ * `<schmancy-surface>` accepts.
  *
- * Structural types control depth via blur intensity and opacity.
- * Nothing is opaque — every layer is translucent glass:
- * - `solid`    — Dense glass, barely translucent (highest readability, 2px blur)
- * - `subtle`   — Frosted glass panel (8px blur, 65% opacity)
- * - `glass`    — Full frosted glass with shimmer highlight (16px blur, 30% opacity)
- * - `luminous` — Glass + animated glow halo for hero panels (24px blur, 22% opacity)
+ * Tonal names express depth: each renders one constant glass material
+ * (`backdrop-filter: var(--glass-material)`) whose base tint is the
+ * matching M3 tonal token (`--glass-base`). Depth is tone, not blur.
  *
- * Semantic types apply tinted glass for status/role:
- * - `primary`, `secondary`, `tertiary`, `error`, `success`, `warning`, `info`
+ * Semantic names apply a translucent role tint (`primary`…`info`).
+ * Utility names cover the no-paint and border-only cases.
  *
- * Utility types:
- * - `transparent` — No background
- * - `outlined`    — Border only with luminous hover
+ * The exact `--glass-material` and `--glass-opacity` values are the
+ * single source of truth in `surface.styles.ts` and documented in
+ * `skills/schmancy/surface.md`.
  */
-/** New Luminous Glass types */
-export type TSurfaceColorNew = 'solid' | 'subtle' | 'glass' | 'luminous' | 'transparent' | 'outlined' | 'primary' | 'secondary' | 'tertiary' | 'error' | 'success' | 'warning' | 'info';
-/**
- * @deprecated Legacy M3 types — mapped to new Luminous Glass equivalents.
- * - surface, surfaceDim, surfaceBright, containerLowest → solid
- * - containerLow, container → subtle
- * - containerHigh, containerHighest, glassOforim → glass
- */
-export type TSurfaceColorLegacy = 'surface' | 'surfaceDim' | 'surfaceBright' | 'containerLowest' | 'containerLow' | 'container' | 'containerHigh' | 'containerHighest' | 'glassOforim';
-export type TSurfaceColor = TSurfaceColorNew | TSurfaceColorLegacy;
+/** M3 tonal depth names — eight levels, lightest to highest */
+export declare const SURFACE_TONAL: readonly ["surface", "surfaceDim", "surfaceBright", "containerLowest", "containerLow", "container", "containerHigh", "containerHighest"];
+/** Role-tinted glass names */
+export declare const SURFACE_SEMANTIC: readonly ["primary", "secondary", "tertiary", "error", "success", "warning", "info"];
+/** No-paint and border-only utility names */
+export declare const SURFACE_UTILITY: readonly ["transparent", "outlined"];
+export type TSurfaceColor = (typeof SURFACE_TONAL)[number] | (typeof SURFACE_SEMANTIC)[number] | (typeof SURFACE_UTILITY)[number];

package/types/src/utils/number.d.ts

@@ -101,7 +101,7 @@ export declare class Numbers {
      * @param maxDenominator The maximum allowed denominator (default: 4)
      * @returns A formatted string representing the mixed fraction
      */
-    formatMixedFraction(number: number, format?: "unicode" | "ascii" | "superscript", precision?: number, maxDenominator?: number): string;
+    formatMixedFraction(number: number, format?: 'unicode' | 'ascii' | 'superscript', precision?: number, maxDenominator?: number): string;
     /**
      * Gets the Unicode fraction character if available
      *