@mhmo91/schmancy 0.10.41 → 0.10.43

package/types/src/calendar/calendar.d.ts

@@ -0,0 +1,108 @@
+import { PropertyValues } from 'lit';
+import { SchmancyElement } from '@mixins/index';
+/** Fired on every provisional change (including range hover-preview). */
+export type SchmancyCalendarInputEvent = CustomEvent<{
+    value: string | null;
+    start: string | null;
+    end: string | null;
+}>;
+/** Fired on a committed change: single click | second range endpoint | clear. */
+export type SchmancyCalendarChangeEvent = CustomEvent<{
+    value: string | null;
+    start: string | null;
+    end: string | null;
+}>;
+/** Fired as the dominant in-view month changes while scrolling. */
+export type SchmancyCalendarNavigateEvent = CustomEvent<{
+    month: string;
+}>;
+/**
+ * A presentational calendar primitive with continuous vertical month-scroll.
+ * Supports single-date and date-range selection. No form-association.
+ *
+ * @element schmancy-calendar
+ * @fires input  - Every provisional change (incl. range hover-preview)
+ * @fires change - Committed change: single click | second range endpoint | clear
+ * @fires navigate - Dominant in-view month changed while scrolling
+ *
+ * @csspart scroll          - The scrollable container
+ * @csspart month-label     - Sticky month/year label
+ * @csspart weekday         - Weekday header cell
+ * @csspart grid            - Day grid for a month
+ * @csspart day             - Individual day cell
+ * @csspart day-selected    - A selected day (single mode, or both endpoints)
+ * @csspart day-range-start - Range start day
+ * @csspart day-range-end   - Range end day
+ * @csspart day-in-range    - Day inside the selected range (exclusive of endpoints)
+ * @csspart day-preview     - Day inside the hover-preview range
+ * @csspart day-today       - Today's date
+ * @csspart day-disabled    - Disabled (out-of-bounds) day
+ */
+export declare class SchmancyCalendar extends SchmancyElement {
+    static styles: import("lit").CSSResult[];
+    mode: 'single' | 'range';
+    type: 'date' | 'datetime-local';
+    value?: string | null;
+    start?: string | null;
+    end?: string | null;
+    min?: string;
+    max?: string;
+    month?: string;
+    /** BCP-47 locale tag; week-start derived from it. Stored as `calLocale` to avoid conflicting with the base-class `locale` getter. */
+    calLocale?: string;
+    disabled: boolean;
+    readonly: boolean;
+    /** The month the scroller is currently anchored to ('YYYY-MM'). */
+    private anchorMonth;
+    /** In range mode: the first click (pending second endpoint). */
+    private pendingStart;
+    /** In range mode: day the pointer is hovering over (for preview). */
+    private hoverDate;
+    /**
+     * Emits the dominant month string whenever a scroll event occurs.
+     * Fed by both the DOM scroller's fromEvent (via scrollerReady$) and any
+     * future direct pushes. Merging both into a single debounced pipeline
+     * satisfies ONE_PIPELINE_ONE_SUBSCRIBE.
+     */
+    private readonly scroll$;
+    /**
+     * Emits the scroller HTMLElement once it is available in the DOM
+     * (from updated()). switchMap converts it into the fromEvent stream,
+     * which feeds scroll$ — all inside the single connectedCallback pipeline.
+     */
+    private readonly scrollerReady$;
+    connectedCallback(): void;
+    updated(changed: PropertyValues): void;
+    private scrollerAttached;
+    /** The scroll window start month. */
+    private windowStart;
+    /** The scroll window end month. */
+    private windowEnd;
+    /** Resolve the best anchor month from current props. */
+    private resolveAnchor;
+    /** All months in the scroll window as 'YYYY-MM' strings. */
+    private months;
+    /** Days of the week starting from the locale's first day (BCP-47 derived). */
+    private weekdayHeaders;
+    private dominantMonth;
+    private scrollToMonth;
+    private isSelected;
+    private isRangeStart;
+    private isRangeEnd;
+    private isInRange;
+    private isInPreview;
+    private isToday;
+    private isDisabled;
+    private handleDayClick;
+    private handleDayHover;
+    private handleKeyDown;
+    private emit;
+    render(): import("lit-html").TemplateResult<1>;
+    private renderMonth;
+    private renderDay;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'schmancy-calendar': SchmancyCalendar;
+    }
+}

package/types/src/calendar/calendar.test.d.ts

@@ -0,0 +1 @@
+import './calendar';

package/types/src/calendar/index.d.ts

@@ -0,0 +1,2 @@
+export { SchmancyCalendar } from './calendar';
+export type { SchmancyCalendarInputEvent, SchmancyCalendarChangeEvent, SchmancyCalendarNavigateEvent } from './calendar';

package/types/src/directives/cursor-glow.d.ts

@@ -13,7 +13,7 @@ export interface CursorGlowOptions {
  *
  * @example
  * ```html
- * <schmancy-surface type="glass" ${cursorGlow()}>content</schmancy-surface>
+ * <schmancy-surface type="container" ${cursorGlow()}>content</schmancy-surface>
  * <div ${cursorGlow({ radius: 300, intensity: 0.2 })}>hero panel</div>
  * ```
  */

package/types/src/directives/hummingbird.d.ts

@@ -116,9 +116,9 @@ declare class HummingbirdDirective extends AsyncDirective {
     private pulseRings;
     private tickHovering;
     /**
- * Check if an element is sufficiently visible (opacity > 0.5 and not hidden)
- * Uses 0.5 threshold to wait for CSS transitions to be halfway done
- */
+     * Check if an element is sufficiently visible (opacity > 0.5 and not hidden)
+     * Uses 0.5 threshold to wait for CSS transitions to be halfway done
+     */
     private isElementVisible;
     /** Check if element is within the viewport bounds (with padding so bird doesn't fly to edges) */
     private isInViewport;

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.d.ts

@@ -3,23 +3,24 @@ import { TSurfaceColor } from '@schmancy/types';
 export declare const SchmancySurfaceTypeContext: {
     __context__: TSurfaceColor;
 };
-export type { SchmancySurfaceRounded, SchmancySurfaceElevation } from '@mixins/surface.mixin';
 declare const SchmancySurface_base: import("@mixins/index").Constructor<import("@mixins/surface.mixin").ISurfaceMixin> & typeof SchmancyElement;
 /**
  * `<schmancy-surface>` component
  *
- * Styled container that supports rounding, elevation, and background/text color variants.
- * Sizing is the consumer's responsibility — use Tailwind utilities (`class="w-full h-full"`)
- * on the element directly.
+ * Color-variant container that paints a background and establishes the inherited
+ * text color for descendants. Corner radius, shadow depth, and cursor behavior
+ * are the consumer's responsibility — apply stock Tailwind classes directly on
+ * the element.
  *
- * SurfaceMixin automatically provides surfaceStyles CSS.
+ * Sizing is the consumer's responsibility — use Tailwind utilities
+ * (`class="w-full h-full"`) on the element directly.
  *
  * @element schmancy-surface
  * @slot - Default slot for projecting child content.
  *
  * @example
- * <schmancy-surface class="w-full h-full" rounded="all" elevation="3" type="surfaceBright" scroller>
- *   <p>Your scrollable content here</p>
+ * <schmancy-surface type="surfaceBright" class="rounded-2xl shadow-lg w-full">
+ *   <p>Content here</p>
  * </schmancy-surface>
  */
 export declare class SchmancySurface extends SchmancySurface_base {
@@ -37,3 +38,4 @@ declare global {
         'schmancy-surface': SchmancySurface;
     }
 }
+export {};

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

@@ -1,27 +1,22 @@
 /**
- * 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;
 /**
- * Surface rounded corner styles
- */
-export declare const surfaceRoundedStyles: import("lit").CSSResult;
-/**
- * Luminous glow elevation — replaces M3 dark drop shadows with primary-colored glow.
- * No ::after tint overlay — depth comes from glow intensity, not surface tint.
- */
-export declare const surfaceElevationStyles: import("lit").CSSResult;
-/**
- * Surface clickable styles - luminous hover, spring active
- */
-export declare const surfaceClickableStyles: import("lit").CSSResult;
-/**
- * Combined surface styles - includes all surface styling capabilities
+ * Combined surface styles — type variants only.
+ * Corner radius, shadow, and cursor are stock Tailwind classes applied by the consumer.
  */
 export declare const surfaceStyles: 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
      *

package/types/src/window/window.d.ts

@@ -36,7 +36,6 @@ export default class SchmancyWindow extends SchmancyElement {
     private get isBottomCorner();
     private get closedClipPath();
     private get openClipPath();
-    private get elevation();
     private applyContainerPosition;
     private static readonly VALID_CORNERS;
     private loadPosition;