@waggylabs/yumekit 0.4.1-beta.71 → 0.4.1-beta.73

package/CHANGELOG.md

@@ -35,8 +35,8 @@ Delete any empty sections before publishing.
 
 ### Added
 
-- New `y-date` component — a form-associated date (and optional time) input field. Displays a trigger button that opens a `y-datepicker` popup. Supports `name`, `value`, `label`, `label-position`, `placeholder`, `size`, `disabled`, `required`, `invalid`, `clearable`, `show-time`, `min`, `max`, `format`, and `mode` attributes. Emits `change` and `input` events. Fully keyboard accessible with `aria-expanded` management.
-- New `y-datepicker` component — a standalone calendar and optional time picker widget. Supports single date and date range selection via the `mode` attribute. Configurable with `value`, `min`, `max`, `show-time`, `show-seconds`, `format`, `first-day-of-week`, `year-range`, and `panel-count` attributes. Emits a `change` event with the selected date value or `[start, end]` range array. Public API: `clear()`, `formatDate(date)`.
+- New `y-date` component — a form-associated date (and optional time) input field. Displays a trigger button that opens a `y-datepicker` popup. Supports `name`, `value`, `label`, `label-position`, `placeholder`, `size`, `disabled`, `required`, `invalid`, `clearable`, `show-hours`, `min`, `max`, `format`, and `mode` attributes. Emits `change` and `input` events. Fully keyboard accessible with `aria-expanded` management.
+- New `y-datepicker` component — a standalone calendar and optional time picker widget. Supports single date and date range selection via the `mode` attribute. Configurable with `value`, `min`, `max`, `show-hours`, `show-seconds`, `format`, `first-day-of-week`, `year-range`, and `panel-count` attributes. Emits a `change` event with the selected date value or `[start, end]` range array. Public API: `clear()`, `formatDate(date)`.
 - 10 new bundled icons: `fan`, `thermometer-high`, `thermometer-low`, `ban`, `bluetooth`, `unlock`, `plug`, `gasoline`, `ev-charger`, `tools`.
 - `comp-date` icon added to the bundled icon registry.
 - Storybook integration — all 28 components now have Storybook stories. Includes a theme background selector that applies the correct design tokens for each active theme.

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

@@ -4,6 +4,7 @@ export class YumeDate extends HTMLElement {
     _internals: ElementInternals;
     _onDocumentClick(e: any): void;
     _suppressBlurApply: boolean;
+    _selectedParts: Set<any>;
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: any, oldVal: any, newVal: any): void;
@@ -18,7 +19,7 @@ export class YumeDate extends HTMLElement {
     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-time / show-minutes / show-seconds are set. */
+     *  a time-aware variant when show-hours / show-minutes / show-seconds are set. */
     get format(): string;
     set invalid(v: boolean);
     /** @type {boolean} Whether the field is in an invalid state. */
@@ -41,15 +42,18 @@ export class YumeDate extends HTMLElement {
     set placeholder(v: string);
     /** @type {string} Placeholder text. */
     get placeholder(): string;
-    set showTime(v: boolean);
+    set showHours(v: boolean);
     /** @type {boolean} Show hour time picker. */
-    get showTime(): boolean;
+    get showHours(): boolean;
     set showMinutes(v: boolean);
     /** @type {boolean} Show minutes column in time picker. */
     get showMinutes(): 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 showYears(v: boolean);
     /** @type {boolean} Show year select in datepicker header (default true). */
     get showYears(): boolean;
@@ -87,9 +91,67 @@ export class YumeDate extends HTMLElement {
      * @returns {Date|null}
      */
     _parseTypedDate(text: string): Date | null;
+    /**
+     * 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;
     /**
      * 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.
+     * 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;
+    /**
+     * 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.
+     * @param {string} text
+     * @param {HTMLElement} picker
+     */
+    _handleRangeTypeahead(text: string, picker: HTMLElement): void;
 }

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

@@ -1,9 +1,8 @@
 declare namespace _default {
-    export let title: string;
-    export let tags: string[];
-    export { docsParams as parameters };
-    export let decorators: ((story: any) => string)[];
-    export namespace argTypes {
+    let title: string;
+    let tags: string[];
+    let decorators: ((story: any) => string)[];
+    namespace argTypes {
         namespace mode {
             let control: string;
             let options: string[];
@@ -114,7 +113,7 @@ declare namespace _default {
             }
             export { table_6 as table };
         }
-        namespace showTime {
+        namespace showHours {
             let control_9: string;
             export { control_9 as control };
             let description_9: string;
@@ -142,8 +141,38 @@ declare namespace _default {
             }
             export { table_8 as table };
         }
+        namespace showSeconds {
+            let control_11: string;
+            export { control_11 as control };
+            let description_11: string;
+            export { description_11 as description };
+            export namespace table_9 {
+                export namespace defaultValue_9 {
+                    let summary_9: string;
+                    export { summary_9 as summary };
+                }
+                export { defaultValue_9 as defaultValue };
+            }
+            export { table_9 as table };
+        }
+        namespace hourFormat {
+            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 {
+                export namespace defaultValue_10 {
+                    let summary_10: string;
+                    export { summary_10 as summary };
+                }
+                export { defaultValue_10 as defaultValue };
+            }
+            export { table_10 as table };
+        }
     }
-    export namespace args {
+    namespace args {
         let mode_1: string;
         export { mode_1 as mode };
         let size_1: string;
@@ -160,12 +189,16 @@ declare namespace _default {
         export { disabled_1 as disabled };
         let invalid_1: boolean;
         export { invalid_1 as invalid };
-        let showTime_1: boolean;
-        export { showTime_1 as showTime };
+        let showHours_1: boolean;
+        export { showHours_1 as showHours };
         let showMinutes_1: boolean;
         export { showMinutes_1 as showMinutes };
+        let showSeconds_1: boolean;
+        export { showSeconds_1 as showSeconds };
+        let hourFormat_1: string;
+        export { hourFormat_1 as hourFormat };
     }
-    export function render(args: any): string;
+    function render(args: any): string;
 }
 export default _default;
 /** Default single-date input. */
@@ -188,8 +221,8 @@ export namespace WithTime {
     let decorators_1: ((story: any) => string)[];
     export { decorators_1 as decorators };
     export namespace args_3 {
-        let showTime_2: boolean;
-        export { showTime_2 as showTime };
+        let showHours_2: boolean;
+        export { showHours_2 as showHours };
         let value_3: string;
         export { value_3 as value };
     }
@@ -231,13 +264,3 @@ export namespace Invalid {
     }
     export { args_7 as args };
 }
-/** Interactive playground. */
-export const Playground: {};
-declare namespace docsParams {
-    namespace docs {
-        namespace story {
-            let inline: boolean;
-            let height: string;
-        }
-    }
-}