@waggylabs/yumekit 0.4.3-beta.37 → 0.4.3-beta.39

package/CHANGELOG.md

@@ -35,6 +35,7 @@ Delete any empty sections before publishing.
 
 ### Added
 
+- New `y-stepper` component — a multi-step wizard that guides users through a sequential flow. Step content is provided via named slots defined in the `items` JSON array (`{ label, slot, description?, icon?, status? }`). Supports `current` (zero-based active step index), `orientation` (`"horizontal"` | `"vertical"`), `position` (`"start"` | `"end"` — controls whether indicators appear before or after the content), `size` (`"small"` | `"medium"` | `"large"`), `linear` (restricts free navigation), and `editable` (allows returning to completed steps). Methods: `next()`, `previous()`, `goTo(index)`, `complete(index?)`, `reset()`. Events: cancelable `change`, `complete`, `finish`. Full ARIA support with `role="list"`, `aria-current="step"`, `aria-controls`/`aria-labelledby` linkage, and keyboard navigation.
 - New `y-gallery` component — a media gallery that accepts `<img>` or `<figure>` children and arranges them in `grid`, `row`, `column`, or `masonry` layouts. Supports `columns`, `gap` (`"small"` | `"medium"` | `"large"` or any CSS length), `aspect-ratio`, `expandable` (lightbox with prev/next navigation), `loop`, and `size` attributes. The expanded view uses `<y-icon>` for nav arrows and supports `data-src` for full-resolution images, `<figcaption>` captions, and image counter. Icon slots (`expand-prev-icon`, `expand-next-icon`, `expand-close-icon`) allow custom icons. Fires `expand`, `close`, and `navigate` events.
 - New `y-colorpicker` component — a standalone color picker widget with a 2D saturation/brightness canvas, hue slider, optional alpha slider, format selector, and channel inputs. Supports `value` (`#hex`, `rgb()`, `rgba()`, `hsl()`, `hsla()`, `hsv()`, `hsva()`), `format` (`"hex"` | `"rgb"` | `"hsl"` | `"hsv"`), `formats` (JSON array of available formats), `show-alpha` (alpha channel), and `size` attributes.
 - New `y-color` component — a form-associated color input with a trigger/popup pattern (like `<y-date>`). Renders a color swatch preview and value string in the trigger; opens a `<y-colorpicker>` popup on click. Supports `value`, `format`, `formats`, `show-alpha`, `placeholder`, `name`, `disabled`, `invalid`, `clearable`, `size`, and `label-position` attributes. Uses `ElementInternals` for `FormData` participation.

package/README.md

@@ -17,7 +17,7 @@
 
 ## Overview
 
-YumeKit is a collection of 32 production-ready custom elements built with native Web Components. It works with any framework — or none at all — and ships with a comprehensive design token system, built-in theming, an icon registry, and full TypeScript support.
+YumeKit is a collection of 33 production-ready custom elements built with native Web Components. It works with any framework — or none at all — and ships with a comprehensive design token system, built-in theming, an icon registry, and full TypeScript support.
 
 - **Zero dependencies** — built entirely on web standards
 - **Framework-agnostic** — works with React, Vue, Svelte, or plain HTML
@@ -98,6 +98,7 @@ Then use the `<y-theme>` component to apply a theme:
 | Select       | `<y-select>`       | Select / dropdown input                             |
 | Slider       | `<y-slider>`       | Range slider input                                  |
 | Stack        | `<y-stack>`        | Layout container (row, column, grid, masonry)       |
+| Stepper      | `<y-stepper>`      | Multi-step wizard with sequential flow              |
 | Switch       | `<y-switch>`       | Toggle switch                                       |
 | Table        | `<y-table>`        | Sortable data table                                 |
 | Textarea     | `<y-textarea>`     | Multi-line text input                               |

package/dist/components/y-appbar.d.ts

@@ -0,0 +1,66 @@
+export class YumeAppbar extends HTMLElement {
+    static get observedAttributes(): string[];
+    _onCollapseClick(): void;
+    _onMediaChange(e: any): void;
+    _idCounter: number;
+    _mql: MediaQueryList;
+    _isMobile: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: any, oldVal: any, newVal: any): void;
+    set collapsed(val: boolean);
+    /** Whether the sidebar is currently collapsed. */
+    get collapsed(): boolean;
+    set items(val: any);
+    /** Nav items array parsed from the "items" attribute. */
+    get items(): any;
+    set menuDirection(val: string);
+    /**
+     * Direction menus pop out from nav buttons:
+     * "right", "down", or unset (auto: vertical → right, horizontal → down).
+     */
+    get menuDirection(): string;
+    /** Whether the appbar is currently rendering in mobile mode. */
+    get mobile(): boolean;
+    set mobileBreakpoint(val: string);
+    /**
+     * Override the mobile breakpoint (in pixels) for this instance.
+     * Falls back to the CSS variable --component-appbar-mobile-breakpoint (default 768).
+     */
+    get mobileBreakpoint(): string;
+    set orientation(val: string);
+    /** Layout orientation: "vertical" | "horizontal" (default "vertical"). */
+    get orientation(): string;
+    set size(val: string);
+    /** Size variant: "small" | "medium" | "large" (default "medium"). */
+    get size(): string;
+    set history(val: string);
+    /**
+     * Navigation mode: omit for pushState (SPA-friendly), set to "false" for full-page navigation.
+     * Regardless of this setting, a cancelable "navigate" event is always dispatched first.
+     */
+    get history(): string;
+    set sticky(val: string | false);
+    /** Sticky position: "start" | "end" | false. */
+    get sticky(): string | false;
+    /** Toggles the collapsed state of the sidebar. */
+    toggle(): void;
+    render(): void;
+    _buildCollapseButton(cfg: any, isCollapsed: any): HTMLElement;
+    _buildHeader(): HTMLDivElement;
+    _buildNavItem(item: any, cfg: any, isVertical: any, isCollapsed: any, menuDir: any): HTMLDivElement;
+    _getBreakpointPx(): number;
+    _initRender(): void;
+    _isItemActive(item: any): boolean;
+    _makeSlot(name: any): HTMLSlotElement;
+    _renderDesktop(): void;
+    _renderMobile(): void;
+    _setupMediaQuery(): void;
+    _teardownMediaQuery(): void;
+    /**
+     * Convert appbar nav items to y-menu item format.
+     * Maps `href` → `url` and recursively converts children.
+     */
+    _toMenuItems(items: any): any;
+    _uid(prefix: any): string;
+}

package/dist/components/y-avatar.d.ts

@@ -0,0 +1,23 @@
+export class YumeAvatar extends HTMLElement {
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
+    set alt(val: string);
+    /** Initials fallback text when no src is provided (default "AN"). */
+    get alt(): string;
+    set color(val: string);
+    /** Color theme for the initials avatar background. */
+    get color(): string;
+    set shape(val: string);
+    /** Shape of the avatar: "circle" | "square" | "rounded" (default "circle"). */
+    get shape(): string;
+    set size(val: string);
+    /** Avatar size: "small" | "medium" | "large" (default "medium"). */
+    get size(): string;
+    set src(val: string);
+    /** Image URL. When set, renders an <img> instead of initials. */
+    get src(): string;
+    render(): void;
+    _buildStyleSheet(dimensions: any, borderRadius: any, bgColor: any, textColor: any): CSSStyleSheet;
+    _getDimensions(size: any): any;
+    _getInitials(alt: any): any;
+}

package/dist/components/y-badge.d.ts

@@ -0,0 +1,25 @@
+export class YumeBadge extends HTMLElement {
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
+    set alignment(val: string);
+    /** Horizontal alignment of the badge: "left" | "right" (default "right"). */
+    get alignment(): string;
+    set color(val: string);
+    /** Color theme: "primary" | "secondary" | "base" | "success" | "warning" | "error" | "help". */
+    get color(): string;
+    set position(val: string);
+    /** Vertical position of the badge: "top" | "bottom" (default "top"). */
+    get position(): string;
+    set size(val: string);
+    /** Badge size: "small" | "medium" | "large" (default "small"). */
+    get size(): string;
+    set value(val: string);
+    /** The text content displayed inside the badge. */
+    get value(): string;
+    render(): void;
+    _getBadgeColors(color: any): any;
+    _getBadgePosition(position: any, alignment: any): string;
+    _getSizeAttributes(size: any): any;
+    _hasTargetContent(): boolean;
+}

package/dist/components/y-banner.d.ts

@@ -0,0 +1,38 @@
+export class YumeBanner extends HTMLElement {
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
+    set color(val: string);
+    /** Semantic color for the banner background. */
+    get color(): string;
+    set icon(val: string);
+    /** Icon name passed to an internal y-icon. */
+    get icon(): string;
+    set position(val: string);
+    /** Position mode: "push" (in-flow) or "overlap" (over content). */
+    get position(): string;
+    set sticky(val: boolean);
+    /** When true with position="overlap", fixes to viewport top on scroll. */
+    get sticky(): boolean;
+    set dismissable(val: boolean);
+    /** Whether the banner shows a close button. */
+    get dismissable(): boolean;
+    set dismissed(val: boolean);
+    /** Whether the banner is currently dismissed (hidden). */
+    get dismissed(): boolean;
+    set size(val: string);
+    /** Controls padding, icon size, and font size. */
+    get size(): string;
+    /** Hides the banner and fires the dismiss event. */
+    dismiss(): void;
+    /** Shows the banner if it is currently dismissed. */
+    show(): void;
+    render(): void;
+    _bindSlotListeners(): void;
+    _updateSlotVisibility(): void;
+    _applyDismissedState(): void;
+    _getAriaLabel(color: any): any;
+    _getIconSize(size: any): any;
+    _getColorVars(color: any): any;
+    _buildStyles(color: any, size: any): string;
+}

package/dist/components/y-button-group.d.ts

@@ -0,0 +1,13 @@
+export class YumeButtonGroup extends HTMLElement {
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
+    set orientation(val: string);
+    /** Layout direction: "horizontal" | "vertical" (default "horizontal"). */
+    get orientation(): string;
+    _applyStyles(): void;
+    _styleEl: HTMLStyleElement;
+    _getRadius(): string;
+    _render(): void;
+    _updateChildren(): void;
+}

package/dist/components/y-button.d.ts

@@ -0,0 +1,65 @@
+export class YumeButton extends HTMLElement {
+    static get observedAttributes(): string[];
+    selectedValues: Set<any>;
+    connectedCallback(): void;
+    attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
+    set href(val: string);
+    /** URL to navigate to. When set, the internal element renders as an <a> instead of <button>. */
+    get href(): string;
+    set target(val: string);
+    /** Anchor target (e.g. "_blank"). Only applies when href is set. */
+    get target(): string;
+    set rel(val: string);
+    /** Anchor rel attribute (e.g. "noopener noreferrer"). Only applies when href is set. */
+    get rel(): string;
+    set color(val: string);
+    /** Color theme for the button (default "base"). */
+    get color(): string;
+    set disabled(val: boolean);
+    /** Whether the button is disabled. */
+    get disabled(): boolean;
+    set name(val: string);
+    /** The form name of the button. */
+    get name(): string;
+    set size(val: string);
+    /** Size: "small" | "medium" | "large" (default "medium"). */
+    get size(): string;
+    set styleType(val: string);
+    /** Visual style: "filled" | "outlined" | "flat" (default "outlined"). */
+    get styleType(): string;
+    set type(val: string);
+    /** Button type: "button" | "submit" | "reset" (default "button"). */
+    get type(): string;
+    set value(newVal: any);
+    /** The current selected value(s), comma-separated when 'multiple' is set. */
+    get value(): any;
+    /**
+     * Sets the button options from an array of objects.
+     * @param {Array<Object>} options
+     */
+    setOptions(options: Array<any>): void;
+    _addEventListeners(): void;
+    _applyCustomColorStyles(color: any, styleType: any, size: any): void;
+    _applyFilledInteractionStyles(vars: any): void;
+    _applyInteractionStyles(vars: any, styleType: any): void;
+    _applySizeStyles(size: any): void;
+    _applyStyles(): void;
+    _applyUnfilledInteractionStyles(vars: any, styleType: any): void;
+    _getColorVarsMap(): {
+        primary: string[];
+        secondary: string[];
+        base: string[];
+        success: string[];
+        error: string[];
+        warning: string[];
+        help: string[];
+    };
+    _handleClick(): void;
+    _init(): void;
+    _manageSlotVisibility(slotName: any, selector: any): void;
+    _proxyNativeOnClick(): void;
+    _render(): void;
+    button: any;
+    _updateButtonAttributes(): void;
+    _updateStyles(): void;
+}

package/dist/components/y-card.d.ts

@@ -0,0 +1,16 @@
+export class YumeCard extends HTMLElement {
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
+    set color(val: string);
+    /** Color theme for the card surface. */
+    get color(): string;
+    set raised(val: boolean);
+    /** Whether the card uses a raised shadow instead of a border. */
+    get raised(): boolean;
+    render(): void;
+    _bindSlotListeners(slotsConfig: any): void;
+    _buildStyleSheet(): CSSStyleSheet;
+    _updateColorStyles(): void;
+    _updateElevationStyles(): void;
+}

package/dist/components/y-checkbox.d.ts

@@ -0,0 +1,32 @@
+export class YumeCheckbox extends HTMLElement {
+    static formAssociated: boolean;
+    static get observedAttributes(): string[];
+    _internals: ElementInternals;
+    connectedCallback(): void;
+    attributeChangedCallback(name: any): void;
+    set checked(val: boolean);
+    /** @type {boolean} Whether the checkbox is checked. */
+    get checked(): boolean;
+    set disabled(val: boolean);
+    /** @type {boolean} Whether the checkbox is disabled. */
+    get disabled(): boolean;
+    set indeterminate(val: boolean);
+    /** @type {boolean} Whether the checkbox is in an indeterminate state. */
+    get indeterminate(): boolean;
+    set labelPosition(val: string);
+    /** @type {string} Label position: "top" | "bottom" | "left" | "right" (default "right"). */
+    get labelPosition(): string;
+    set name(val: string | null);
+    /** @type {string|null} The form name of the checkbox. */
+    get name(): string | null;
+    set value(val: string);
+    /** @type {string} The form value submitted when checked. Defaults to "on". */
+    get value(): string;
+    /** Toggles the checked state and dispatches a "change" event. */
+    toggle(): void;
+    render(): void;
+    _bindCheckboxListeners(): void;
+    _buildStyleSheet(): CSSStyleSheet;
+    _updateIcon(): void;
+    _updateState(): void;
+}

package/dist/components/y-color.d.ts

@@ -0,0 +1,46 @@
+export class YumeColor extends HTMLElement {
+    static formAssociated: boolean;
+    static get observedAttributes(): string[];
+    _internals: ElementInternals;
+    _onDocumentClick(): void;
+    _onPointerDown: () => void;
+    _clickInsidePopup: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: any, oldVal: any, newVal: any): void;
+    set clearable(v: boolean);
+    get clearable(): boolean;
+    set disabled(v: boolean);
+    get disabled(): boolean;
+    set format(v: string);
+    get format(): string;
+    set formats(v: any);
+    get formats(): any;
+    set invalid(v: boolean);
+    get invalid(): boolean;
+    set labelPosition(v: string);
+    get labelPosition(): string;
+    set name(v: string);
+    get name(): string;
+    set placeholder(v: string);
+    get placeholder(): string;
+    set showAlpha(v: boolean);
+    get showAlpha(): boolean;
+    set size(v: string);
+    get size(): string;
+    set value(v: string);
+    get value(): string;
+    clear(): void;
+    close(): void;
+    open(): void;
+    render(): void;
+    _bindListeners(): void;
+    _fromPicker: boolean;
+    _buildStyles(isDisabled: any): string;
+    _positionPopup(popup: any, trigger: any): void;
+    _setOpen(open: any): void;
+    _syncPickerValue(): void;
+    _updateClearBtn(): void;
+    _updateDisplay(): void;
+    _updateValidationState(): void;
+}

package/dist/components/y-colorpicker.d.ts

@@ -0,0 +1,73 @@
+export class YumeColorpicker extends HTMLElement {
+    static get observedAttributes(): string[];
+    _h: number;
+    _s: number;
+    _v: number;
+    _a: number;
+    _dragging: string;
+    _rendered: boolean;
+    _updatingValue: boolean;
+    _drawnHue: number;
+    _onPointerMove: (e: any) => void;
+    _onPointerUp: () => void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: any, oldVal: any, newVal: any): void;
+    set value(val: string);
+    get value(): string;
+    set format(val: string);
+    get format(): string;
+    set formats(val: any);
+    get formats(): any;
+    set showAlpha(val: boolean);
+    get showAlpha(): boolean;
+    set size(val: string);
+    get size(): string;
+    setColor(value: any): void;
+    render(): void;
+    _canvas: Element;
+    _canvasHandle: Element;
+    _hueSlider: Element;
+    _hueThumb: Element;
+    _alphaSlider: Element;
+    _alphaThumb: Element;
+    _formatSelect: Element;
+    _channelInputs: Element;
+    _swatchPreview: Element;
+    _parseAndApply(str: any): void;
+    _formatColor(fmt: any): string;
+    _getColorRepresentations(): {
+        hex: string;
+        rgb: string;
+        hsl: string;
+        hsv: string;
+    };
+    _drawCanvas(): void;
+    _getChannelFields(): any[];
+    _rebuildInputs(): void;
+    _updateAll(): void;
+    _updateAlphaThumb(): void;
+    _updateAriaValues(): void;
+    _updateCanvasHandle(): void;
+    _updateHueThumb(): void;
+    _updateInputValues(): void;
+    _updateSwatch(): void;
+    _bindEvents(): void;
+    _addGlobalListeners(): void;
+    _removeGlobalListeners(): void;
+    _onCanvasDown(e: any): void;
+    _updateCanvasFromPointer(e: any): void;
+    _onHueDown(e: any): void;
+    _updateHueFromPointer(e: any): void;
+    _onAlphaDown(e: any): void;
+    _updateAlphaFromPointer(e: any): void;
+    _onGlobalMove(e: any): void;
+    _onGlobalUp(): void;
+    _onCanvasKey(e: any): void;
+    _onHueKey(e: any): void;
+    _onAlphaKey(e: any): void;
+    _handleChannelInput(channel: any, rawValue: any, fieldDef: any): void;
+    _syncValueAttr(): void;
+    _emitChange(): void;
+    _buildStyles(): string;
+}

package/dist/components/y-date.d.ts

@@ -0,0 +1,180 @@
+export class YumeDate extends HTMLElement {
+    static formAssociated: boolean;
+    static get observedAttributes(): string[];
+    _internals: ElementInternals;
+    _onDocumentClick(e: any): void;
+    _suppressBlurApply: boolean;
+    _selectedParts: Set<any>;
+    _mql: MediaQueryList;
+    _isMobile: boolean;
+    _onMediaChange(e: any): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: any, oldVal: any, newVal: any): void;
+    set clearable(v: boolean);
+    /** @type {boolean} Whether to show a clear button when a value is set. */
+    get clearable(): boolean;
+    set color(v: string);
+    /** @type {string} Color theme passed to the datepicker (default "primary"). */
+    get color(): string;
+    set disabled(v: boolean);
+    /** @type {boolean} Whether the field is disabled. */
+    get disabled(): boolean;
+    set format(v: string);
+    /** @type {string} Date display format string. Defaults to "MM/DD/YYYY", or
+     *  a time-aware variant when show-hours / show-minutes / show-seconds are set. */
+    get format(): string;
+    set hourFormat(v: string);
+    /** @type {string} Hour display format: "12" (default) or "24" */
+    get hourFormat(): string;
+    set invalid(v: boolean);
+    /** @type {boolean} Whether the field is in an invalid state. */
+    get invalid(): boolean;
+    set labelPosition(v: string);
+    /** @type {string} Label position: "top" | "bottom" (default "top"). */
+    get labelPosition(): string;
+    set max(v: string);
+    /** @type {string} Maximum selectable date (ISO string). */
+    get max(): string;
+    set min(v: string);
+    /** @type {string} Minimum selectable date (ISO string). */
+    get min(): string;
+    set minuteInterval(v: number);
+    /** @type {number} Interval between minute options (default 5) */
+    get minuteInterval(): number;
+    /** @type {boolean} Whether the date input is currently rendering in mobile mode. */
+    get mobile(): boolean;
+    set nativeMobile(v: string);
+    /** @type {string} When true, renders native date inputs on mobile instead of the datepicker popup. */
+    get nativeMobile(): string;
+    set mobileBreakpoint(v: string);
+    /**
+     * Override the mobile breakpoint (in pixels) for this instance.
+     * Falls back to --component-datepicker-mobile-breakpoint (default 768).
+     * @type {string}
+     */
+    get mobileBreakpoint(): string;
+    set mode(v: string);
+    /** @type {string} "single" | "range" (default "single"). */
+    get mode(): string;
+    set name(v: string);
+    /** @type {string} Form field name. */
+    get name(): string;
+    set placeholder(v: string);
+    /** @type {string} Placeholder text. */
+    get placeholder(): string;
+    set secondInterval(v: number);
+    /** @type {number} Interval between second options (default 5) */
+    get secondInterval(): number;
+    set showDays(v: boolean);
+    /** @type {boolean} Show day grid in datepicker (default true). */
+    get showDays(): boolean;
+    set showHours(v: boolean);
+    /** @type {boolean} Show hour time picker. */
+    get showHours(): boolean;
+    set showMinutes(v: boolean);
+    /** @type {boolean} Show minutes column in time picker. */
+    get showMinutes(): boolean;
+    set showMonths(v: boolean);
+    /** @type {boolean} Show month select in datepicker header (default true). */
+    get showMonths(): boolean;
+    set showSeconds(v: boolean);
+    /** @type {boolean} Show seconds column in time picker. */
+    get showSeconds(): boolean;
+    set showYears(v: boolean);
+    /** @type {boolean} Show year select in datepicker header (default true). */
+    get showYears(): boolean;
+    set size(v: string);
+    /** @type {string} Input size: "small" | "medium" | "large" (default "medium"). */
+    get size(): string;
+    set value(v: string);
+    /** @type {string} The current value (ISO string, or "ISO,ISO" for range). */
+    get value(): string;
+    /** Clear the selected value. */
+    clear(): void;
+    /** Close the datepicker popup. */
+    close(): void;
+    /** Open the datepicker popup. */
+    open(): void;
+    render(): void;
+    _applyParsedDate(date: any): void;
+    /**
+     * Apply a range value (start and optional end) to the component.
+     * @param {Date} start
+     * @param {Date|null} end
+     */
+    _applyRangeValue(start: Date, end: Date | null): void;
+    _bindListeners(): void;
+    _bindMobileListeners(): void;
+    /**
+     * Build a presumed Date from partial input parts, filling in defaults.
+     * Returns null if the result is invalid.
+     * @param {{ month?: number, day?: number, year?: number, hour?: number, minute?: number, second?: number } | null} partial
+     * @returns {Date | null}
+     */
+    _buildPresumedDate(partial: {
+        month?: number;
+        day?: number;
+        year?: number;
+        hour?: number;
+        minute?: number;
+        second?: number;
+    } | null): Date | null;
+    _buildStyles(isDisabled: any): string;
+    _getBreakpointPx(): number;
+    _getFormattedDisplay(): string;
+    /**
+     * Handle type-ahead input for range mode.
+     * Parses partial range text and navigates/highlights in the picker.
+     * @param {string} text
+     * @param {HTMLElement} picker
+     */
+    _handleRangeTypeahead(text: string, picker: HTMLElement): void;
+    _positionPopup(popup: any, trigger: any): void;
+    /**
+     * Parse partial user input and return an object with whatever date parts
+     * could be extracted based on the format string.  Returns null if nothing
+     * matches.
+     *
+     * For format "MM/DD/YYYY" and input "04"  → { month: 4 }
+     * For format "MM/DD/YYYY" and input "04/15" → { month: 4, day: 15 }
+     * For format "MM/DD/YYYY" and input "04/15/2026" → { month: 4, day: 15, year: 2026 }
+     *
+     * @param {string} text
+     * @returns {{ month?: number, day?: number, year?: number, hour?: number, minute?: number, second?: number } | null}
+     */
+    _parsePartialInput(text: string): {
+        month?: number;
+        day?: number;
+        year?: number;
+        hour?: number;
+        minute?: number;
+        second?: number;
+    } | null;
+    /**
+     * Parse range input text in the form "start - end" or just "start".
+     * Each side can be a full or partial date string.
+     * Returns { start: Date, end: Date|null } or null if unparseable.
+     * @param {string} text
+     * @returns {{ start: Date, end: Date|null } | null}
+     */
+    _parseRangeInput(text: string): {
+        start: Date;
+        end: Date | null;
+    } | null;
+    /**
+     * Parse a user-typed string into a Date using this component's format.
+     * Returns null if the text doesn't match the format or produces an invalid date.
+     * @param {string} text
+     * @returns {Date|null}
+     */
+    _parseTypedDate(text: string): Date | null;
+    _renderMobile(): void;
+    _setOpen(open: any): void;
+    _setupMediaQuery(): void;
+    _syncPickerValue(): void;
+    _teardownMediaQuery(): void;
+    _updateClearBtn(): void;
+    _updateDisplay(): void;
+    _updateValidationState(): void;
+}