@waggylabs/yumekit 0.4.1-beta.76 → 0.4.1-beta.78

package/CHANGELOG.md

@@ -31,7 +31,13 @@ Delete any empty sections before publishing.
 <!-- ### Security -->
 <!-- Vulnerability patches or hardening changes -->
 
-## [0.4.1] – 2026-04-01
+## [0.4.2] - 2026-04-11
+
+### Changed
+
+- Added responsive display to `y-date` and `y-datepicker` as well as the ability to set a `native-mobile` property to `y-date` which will allow the input to use the native mobile date and time picker instead of the `y-datepicker`.
+
+## [0.4.1] - 2026-04-01
 
 ### Added
 
@@ -54,7 +60,7 @@ Delete any empty sections before publishing.
 - `y-icon` removed artifact from accessibility icon
 - Dark theme files corrected: `--help-background-component` now uses `var(--indigo-dark-0)` instead of `var(--indigo-light-0)`.
 
-## [0.4.0] – 2026-03-29
+## [0.4.0] - 2026-03-29
 
 ### Added
 
@@ -86,19 +92,19 @@ Delete any empty sections before publishing.
 - `gripDots(horizontal)` function removed from `src/icons/index.js`.
 - Stale `--base-background-border` and `--error-background-border` variable references cleaned up across all theme files (renamed to `--base-border` / `--error-border` in 0.3.9).
 
-## [0.3.10] – 2026-03-25
+## [0.3.10] - 2026-03-25
 
 ### Added
 
 - `y-card`: added `image` slot that displays over the `header` slot if included.
 
-## [0.3.9] – 2026-03-25
+## [0.3.9] - 2026-03-25
 
 ### Fixed
 
 - `y-card`, `y-switch`, `y-slider`, `y-progress`: restored missing borders after theme variable rename in 0.3.8 changed `--{scheme}-background-border` to `--{scheme}-border` without updating component references.
 
-## [0.3.8] – 2026-03-25
+## [0.3.8] - 2026-03-25
 
 ### Fixed
 
@@ -106,7 +112,7 @@ Delete any empty sections before publishing.
 
 - `y-tag`: reverted earlier change adding variables to tag backgrounds. Defaults to -background-app variables
 
-## [0.3.6] – 2026-03-23
+## [0.3.6] - 2026-03-23
 
 ### Added
 
@@ -128,25 +134,25 @@ Delete any empty sections before publishing.
 
 - Removed `features` icon (duplicate of `sun`)
 
-## [0.3.5] – 2026-03-20
+## [0.3.5] - 2026-03-20
 
 ### Fixed
 
 - Patch for 0.3.3 with bug fixes
 
-## [0.3.4] – 2026-03-20
+## [0.3.4] - 2026-03-20
 
 ### Fixed
 
 - Patch for 0.3.3 with bug fixes
 
-## [0.3.3] – 2026-03-20
+## [0.3.3] - 2026-03-20
 
 ### Fixed
 
 - Several bug fixes and test updates
 
-## [0.3.2] – 2026-03-18
+## [0.3.2] - 2026-03-18
 
 ### Added
 

package/README.md

@@ -73,34 +73,36 @@ Then use the `<y-theme>` component to apply a theme:
 
 ## Components
 
-| Component | Element        | Description                                |
-| --------- | -------------- | ------------------------------------------ |
-| App Bar   | `<y-appbar>`   | Top or side navigation bar                 |
-| Avatar    | `<y-avatar>`   | User avatar with shape and color variants  |
-| Badge     | `<y-badge>`    | Status badge or label                      |
-| Button    | `<y-button>`   | Button with icon, size, and style variants |
-| Card      | `<y-card>`     | Content card container                     |
-| Checkbox  | `<y-checkbox>` | Form checkbox input                        |
-| Dialog    | `<y-dialog>`   | Modal dialog                               |
-| Drawer    | `<y-drawer>`   | Side drawer / sidebar                      |
-| Icon      | `<y-icon>`     | SVG icon display                           |
-| Input     | `<y-input>`    | Text input field                           |
-| Menu      | `<y-menu>`     | Dropdown navigation menu                   |
-| Panel     | `<y-panel>`    | Accordion panel                            |
-| Panel Bar | `<y-panelbar>` | Accordion panel group                      |
-| Progress  | `<y-progress>` | Progress bar                               |
-| Radio     | `<y-radio>`    | Radio button input                         |
-| Rating    | `<y-rating>`   | Star / icon rating input                   |
-| Select    | `<y-select>`   | Select / dropdown input                    |
-| Slider    | `<y-slider>`   | Range slider input                         |
-| Switch    | `<y-switch>`   | Toggle switch                              |
-| Table     | `<y-table>`    | Sortable data table                        |
-| Textarea  | `<y-textarea>` | Multi-line text input                      |
-| Tabs      | `<y-tabs>`     | Tabbed interface                           |
-| Tag       | `<y-tag>`      | Tag / chip label                           |
-| Theme     | `<y-theme>`    | Theme provider                             |
-| Toast     | `<y-toast>`    | Notification toast                         |
-| Tooltip   | `<y-tooltip>`  | Tooltip / popover                          |
+| Component  | Element          | Description                                |
+| ---------- | ---------------- | ------------------------------------------ |
+| App Bar    | `<y-appbar>`     | Top or side navigation bar                 |
+| Avatar     | `<y-avatar>`     | User avatar with shape and color variants  |
+| Badge      | `<y-badge>`      | Status badge or label                      |
+| Button     | `<y-button>`     | Button with icon, size, and style variants |
+| Card       | `<y-card>`       | Content card container                     |
+| Checkbox   | `<y-checkbox>`   | Form checkbox input                        |
+| Date       | `<y-date>`       | Date input                                 |
+| DatePicker | `<y-datepicker>` | A date and time picker                     |
+| Dialog     | `<y-dialog>`     | Modal dialog                               |
+| Drawer     | `<y-drawer>`     | Side drawer / sidebar                      |
+| Icon       | `<y-icon>`       | SVG icon display                           |
+| Input      | `<y-input>`      | Text input field                           |
+| Menu       | `<y-menu>`       | Dropdown navigation menu                   |
+| Panel      | `<y-panel>`      | Accordion panel                            |
+| Panel Bar  | `<y-panelbar>`   | Accordion panel group                      |
+| Progress   | `<y-progress>`   | Progress bar                               |
+| Radio      | `<y-radio>`      | Radio button input                         |
+| Rating     | `<y-rating>`     | Star / icon rating input                   |
+| Select     | `<y-select>`     | Select / dropdown input                    |
+| Slider     | `<y-slider>`     | Range slider input                         |
+| Switch     | `<y-switch>`     | Toggle switch                              |
+| Table      | `<y-table>`      | Sortable data table                        |
+| Textarea   | `<y-textarea>`   | Multi-line text input                      |
+| Tabs       | `<y-tabs>`       | Tabbed interface                           |
+| Tag        | `<y-tag>`        | Tag / chip label                           |
+| Theme      | `<y-theme>`      | Theme provider                             |
+| Toast      | `<y-toast>`      | Notification toast                         |
+| Tooltip    | `<y-tooltip>`    | Tooltip / popover                          |
 
 ---
 

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

@@ -5,6 +5,9 @@ export class YumeDate extends HTMLElement {
     _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;
@@ -21,6 +24,9 @@ export class YumeDate extends HTMLElement {
     /** @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;
@@ -33,6 +39,21 @@ export class YumeDate extends HTMLElement {
     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;
@@ -42,33 +63,27 @@ export class YumeDate extends HTMLElement {
     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 hourFormat(v: string);
-    /** @type {string} Hour display format: "12" (default) or "24" */
-    get hourFormat(): string;
-    set minuteInterval(v: number);
-    /** @type {number} Interval between minute options (default 5) */
-    get minuteInterval(): number;
-    set secondInterval(v: number);
-    /** @type {number} Interval between second options (default 5) */
-    get secondInterval(): number;
     set showYears(v: boolean);
     /** @type {boolean} Show year select in datepicker header (default true). */
     get showYears(): boolean;
-    set showMonths(v: boolean);
-    /** @type {boolean} Show month select in datepicker header (default true). */
-    get showMonths(): boolean;
-    set showDays(v: boolean);
-    /** @type {boolean} Show day grid in datepicker (default true). */
-    get showDays(): boolean;
     set size(v: string);
     /** @type {string} Input size: "small" | "medium" | "large" (default "medium"). */
     get size(): string;
@@ -82,21 +97,39 @@ export class YumeDate extends HTMLElement {
     /** 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;
-    _setOpen(open: any): void;
-    _syncPickerValue(): void;
-    _updateClearBtn(): void;
-    _updateDisplay(): void;
-    _updateValidationState(): void;
     /**
-     * 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.
+     * Handle type-ahead input for range mode.
+     * Parses partial range text and navigates/highlights in the picker.
      * @param {string} text
-     * @returns {Date|null}
+     * @param {HTMLElement} picker
      */
-    _parseTypedDate(text: string): Date | null;
+    _handleRangeTypeahead(text: string, picker: HTMLElement): 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
@@ -117,25 +150,6 @@ export class YumeDate extends HTMLElement {
         minute?: number;
         second?: number;
     } | null;
-    /**
-     * Apply a parsed Date as the component's value and emit a change event.
-     * @param {Date} date
-     */
-    _applyParsedDate(date: Date): 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;
     /**
      * Parse range input text in the form "start - end" or just "start".
      * Each side can be a full or partial date string.
@@ -148,16 +162,18 @@ export class YumeDate extends HTMLElement {
         end: Date | null;
     } | null;
     /**
-     * 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;
-    /**
-     * Handle type-ahead input for range mode.
-     * Parses partial range text and navigates/highlights in the picker.
+     * 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
-     * @param {HTMLElement} picker
+     * @returns {Date|null}
      */
-    _handleRangeTypeahead(text: string, picker: HTMLElement): void;
+    _parseTypedDate(text: string): Date | null;
+    _renderMobile(): void;
+    _setOpen(open: any): void;
+    _setupMediaQuery(): void;
+    _syncPickerValue(): void;
+    _teardownMediaQuery(): void;
+    _updateClearBtn(): void;
+    _updateDisplay(): void;
+    _updateValidationState(): void;
 }

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

@@ -85,7 +85,7 @@ declare namespace _default {
             }
             export { table_4 as table };
         }
-        namespace disabled {
+        namespace nativeMobile {
             let control_7: string;
             export { control_7 as control };
             let description_7: string;
@@ -99,7 +99,7 @@ declare namespace _default {
             }
             export { table_5 as table };
         }
-        namespace invalid {
+        namespace disabled {
             let control_8: string;
             export { control_8 as control };
             let description_8: string;
@@ -113,7 +113,7 @@ declare namespace _default {
             }
             export { table_6 as table };
         }
-        namespace showHours {
+        namespace invalid {
             let control_9: string;
             export { control_9 as control };
             let description_9: string;
@@ -127,7 +127,7 @@ declare namespace _default {
             }
             export { table_7 as table };
         }
-        namespace showMinutes {
+        namespace showHours {
             let control_10: string;
             export { control_10 as control };
             let description_10: string;
@@ -141,7 +141,7 @@ declare namespace _default {
             }
             export { table_8 as table };
         }
-        namespace showSeconds {
+        namespace showMinutes {
             let control_11: string;
             export { control_11 as control };
             let description_11: string;
@@ -155,11 +155,9 @@ declare namespace _default {
             }
             export { table_9 as table };
         }
-        namespace hourFormat {
+        namespace showSeconds {
             let control_12: string;
             export { control_12 as control };
-            let options_3: string[];
-            export { options_3 as options };
             let description_12: string;
             export { description_12 as description };
             export namespace table_10 {
@@ -171,9 +169,11 @@ declare namespace _default {
             }
             export { table_10 as table };
         }
-        namespace minuteInterval {
+        namespace hourFormat {
             let control_13: string;
             export { control_13 as control };
+            let options_3: string[];
+            export { options_3 as options };
             let description_13: string;
             export { description_13 as description };
             export namespace table_11 {
@@ -185,7 +185,7 @@ declare namespace _default {
             }
             export { table_11 as table };
         }
-        namespace secondInterval {
+        namespace minuteInterval {
             let control_14: string;
             export { control_14 as control };
             let description_14: string;
@@ -199,6 +199,20 @@ declare namespace _default {
             }
             export { table_12 as table };
         }
+        namespace secondInterval {
+            let control_15: string;
+            export { control_15 as control };
+            let description_15: string;
+            export { description_15 as description };
+            export namespace table_13 {
+                export namespace defaultValue_13 {
+                    let summary_13: string;
+                    export { summary_13 as summary };
+                }
+                export { defaultValue_13 as defaultValue };
+            }
+            export { table_13 as table };
+        }
     }
     namespace args {
         let mode_1: string;
@@ -213,6 +227,8 @@ declare namespace _default {
         export { value_1 as value };
         let clearable_1: boolean;
         export { clearable_1 as clearable };
+        let nativeMobile_1: boolean;
+        export { nativeMobile_1 as nativeMobile };
         let disabled_1: boolean;
         export { disabled_1 as disabled };
         let invalid_1: boolean;
@@ -296,3 +312,23 @@ export namespace Invalid {
     }
     export { args_7 as args };
 }
+export namespace NativeMobile {
+    export namespace args_8 {
+        let nativeMobile_2: boolean;
+        export { nativeMobile_2 as nativeMobile };
+        let clearable_3: boolean;
+        export { clearable_3 as clearable };
+        let value_6: string;
+        export { value_6 as value };
+    }
+    export { args_8 as args };
+}
+export namespace NativeMobileRange {
+    export namespace args_9 {
+        let mode_3: string;
+        export { mode_3 as mode };
+        let nativeMobile_3: boolean;
+        export { nativeMobile_3 as nativeMobile };
+    }
+    export { args_9 as args };
+}