@api-client/ui 0.5.6 → 0.5.8

package/build/src/md/date-picker/ui-date-picker-modal.d.ts

@@ -16,23 +16,70 @@ export interface ModalDatePickerChangeEvent {
  * A modal date picker for selecting date ranges.
  * Extends full-screen and is ideal for date range selection like flight bookings.
  *
+ * ## Features
+ * - Full-screen modal interface
+ * - Date range selection with visual feedback
+ * - Calendar and input mode toggle
+ * - Min/max date constraints
+ * - Disabled dates support
+ * - Accessible design with proper ARIA attributes and semantic HTML
+ * - Real-time date range validation
+ *
+ * ## Events
+ *
+ * ### `date-range-change`
+ * Fired when a date range is selected or changed.
+ *
+ * **Detail:**
+ * ```typescript
+ * {
+ *   range: DateRange,
+ *   formattedRange: {
+ *     start: string | null,
+ *     end: string | null
+ *   }
+ * }
+ * ```
+ *
+ * ### `close`
+ * Fired when the modal is closed.
+ *
+ * **Detail:**
+ * ```typescript
+ * {
+ *   confirmed: boolean,
+ *   range: DateRange | null
+ * }
+ * ```
+ *
  * ## Usage
  *
+ * ### Basic usage
  * ```html
  * <ui-date-picker-modal
  *   .open=${true}
  *   .selectedRange=${{ start: new Date(), end: null }}
- *   @change=${this.handleRangeChange}
+ *   @date-range-change=${this.handleRangeChange}
  *   @close=${this.handleClose}
  * ></ui-date-picker-modal>
  * ```
  *
- * ### Custom labels
+ * ### Custom labels and constraints
  * ```html
  * <ui-date-picker-modal
  *   title="Select travel dates"
  *   startLabel="Check-in"
  *   endLabel="Check-out"
+ *   .minDate=${new Date()}
+ *   .maxDate=${new Date(Date.now() + 365 * 24 * 60 * 60 * 1000)}
+ *   .disabledDates=${[new Date('2024-12-25')]}
+ * ></ui-date-picker-modal>
+ * ```
+ *
+ * ### With mode toggle disabled
+ * ```html
+ * <ui-date-picker-modal
+ *   .showModeToggle=${false}
  * ></ui-date-picker-modal>
  * ```
  */
@@ -78,19 +125,20 @@ export declare class UiDatePickerModal extends LitElement {
      * Whether to show edit/calendar toggle button
      */
     accessor showModeToggle: boolean;
-    private accessor _isInputMode;
-    private _handleRangeSelect;
-    private _handleCancel;
-    private _handleConfirm;
-    private _handleModeToggle;
-    private _dispatchChangeEvent;
-    private _dispatchCloseEvent;
-    private _renderHeader;
-    private _renderDateDisplay;
-    private _renderCalendar;
-    private _renderInputMode;
-    private _renderContent;
-    private _renderActions;
+    private accessor isInputMode;
+    constructor();
+    private handleRangeSelect;
+    private handleCancel;
+    private handleConfirm;
+    private handleModeToggle;
+    private dispatchChangeEvent;
+    private dispatchCloseEvent;
+    private renderHeader;
+    private renderDateDisplay;
+    private renderCalendar;
+    private renderInputMode;
+    private renderContent;
+    private renderActions;
     render(): TemplateResult;
 }
 declare global {

package/build/src/md/date-picker/ui-date-picker-modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ui-date-picker-modal.d.ts","sourceRoot":"","sources":["../../../../src/md/date-picker/ui-date-picker-modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAA;AAGtD,OAAO,EAAE,SAAS,EAAc,MAAM,gCAAgC,CAAA;AAEtE,OAAO,mCAAmC,CAAA;AAC1C,OAAO,8BAA8B,CAAA;AACrC,OAAO,8BAA8B,CAAA;AACrC,OAAO,wCAAwC,CAAA;AAC/C,OAAO,2BAA2B,CAAA;AAElC,MAAM,WAAW,0BAA0B;IACzC,KAAK,EAAE,SAAS,CAAA;IAChB,cAAc,EAAE;QACd,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;QACpB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAA;KACnB,CAAA;CACF;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAC/C,OAAgB,MAAM,0BAAc;IAEpC;;OAEG;IAC0B,QAAQ,CAAC,IAAI,UAAQ;IAElD;;OAEG;IACH,SAA8C,KAAK,SAAiB;IAEpE;;OAEG;IACyB,QAAQ,CAAC,UAAU,SAAe;IAE9D;;OAEG;IACyB,QAAQ,CAAC,QAAQ,SAAa;IAE1D;;OAEG;IACyB,QAAQ,CAAC,aAAa,EAAE,SAAS,GAAG,IAAI,CAAO;IAE3E;;OAEG;IACyB,QAAQ,CAAC,OAAO,EAAE,IAAI,GAAG,SAAS,CAAY;IAE1E;;OAEG;IACyB,QAAQ,CAAC,OAAO,EAAE,IAAI,GAAG,SAAS,CAAY;IAE1E;;OAEG;IACwB,QAAQ,CAAC,aAAa,EAAE,IAAI,EAAE,GAAG,SAAS,CAAY;IAEjF;;OAEG;IACyB,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAY;IAE3E;;OAEG;IAC0B,QAAQ,CAAC,cAAc,UAAO;IAElD,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAQ;IAE9C,OAAO,CAAC,kBAAkB;IAK1B,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,oBAAoB;IAoB5B,OAAO,CAAC,mBAAmB;IAa3B,OAAO,CAAC,aAAa;IAwBrB,OAAO,CAAC,kBAAkB;IAmB1B,OAAO,CAAC,eAAe;IAkBvB,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,cAAc;IAWb,MAAM,IAAI,cAAc;CAOlC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,iBAAiB,CAAA;KAC1C;IAED,UAAU,mBAAmB;QAC3B,mBAAmB,EAAE,WAAW,CAAC,0BAA0B,CAAC,CAAA;QAC5D,OAAO,EAAE,WAAW,CAAC;YACnB,SAAS,EAAE,OAAO,CAAA;YAClB,KAAK,EAAE,SAAS,GAAG,IAAI,CAAA;SACxB,CAAC,CAAA;KACH;CACF"}
+{"version":3,"file":"ui-date-picker-modal.d.ts","sourceRoot":"","sources":["../../../../src/md/date-picker/ui-date-picker-modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAA;AAGtD,OAAO,EAAE,SAAS,EAAc,MAAM,gCAAgC,CAAA;AAEtE,OAAO,mCAAmC,CAAA;AAC1C,OAAO,8BAA8B,CAAA;AACrC,OAAO,8BAA8B,CAAA;AACrC,OAAO,wCAAwC,CAAA;AAC/C,OAAO,2BAA2B,CAAA;AAElC,MAAM,WAAW,0BAA0B;IACzC,KAAK,EAAE,SAAS,CAAA;IAChB,cAAc,EAAE;QACd,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;QACpB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAA;KACnB,CAAA;CACF;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsEG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAC/C,OAAgB,MAAM,0BAAc;IAEpC;;OAEG;IAC0B,QAAQ,CAAC,IAAI,UAAQ;IAElD;;OAEG;IACH,SAA8C,KAAK,SAAiB;IAEpE;;OAEG;IACyB,QAAQ,CAAC,UAAU,SAAe;IAE9D;;OAEG;IACyB,QAAQ,CAAC,QAAQ,SAAa;IAE1D;;OAEG;IACyB,QAAQ,CAAC,aAAa,EAAE,SAAS,GAAG,IAAI,CAAO;IAE3E;;OAEG;IACyB,QAAQ,CAAC,OAAO,EAAE,IAAI,GAAG,SAAS,CAAY;IAE1E;;OAEG;IACyB,QAAQ,CAAC,OAAO,EAAE,IAAI,GAAG,SAAS,CAAY;IAE1E;;OAEG;IACwB,QAAQ,CAAC,aAAa,EAAE,IAAI,EAAE,GAAG,SAAS,CAAY;IAEjF;;OAEG;IACyB,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAY;IAE3E;;OAEG;IAC0B,QAAQ,CAAC,cAAc,UAAO;IAElD,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAQ;;IAS7C,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,mBAAmB;IAoB3B,OAAO,CAAC,kBAAkB;IAa1B,OAAO,CAAC,YAAY;IAwBpB,OAAO,CAAC,iBAAiB;IA6BzB,OAAO,CAAC,cAAc;IAmBtB,OAAO,CAAC,eAAe;IAWvB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,aAAa;IAwBZ,MAAM,IAAI,cAAc;CAalC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,iBAAiB,CAAA;KAC1C;IAED,UAAU,mBAAmB;QAC3B,mBAAmB,EAAE,WAAW,CAAC,0BAA0B,CAAC,CAAA;QAC5D,OAAO,EAAE,WAAW,CAAC;YACnB,SAAS,EAAE,OAAO,CAAA;YAClB,KAAK,EAAE,SAAS,GAAG,IAAI,CAAA;SACxB,CAAC,CAAA;KACH;CACF"}

package/build/src/md/date-picker/ui-date-picker-modal.js

@@ -12,23 +12,70 @@ import '../../md/icons/ui-icon.js';
  * A modal date picker for selecting date ranges.
  * Extends full-screen and is ideal for date range selection like flight bookings.
  *
+ * ## Features
+ * - Full-screen modal interface
+ * - Date range selection with visual feedback
+ * - Calendar and input mode toggle
+ * - Min/max date constraints
+ * - Disabled dates support
+ * - Accessible design with proper ARIA attributes and semantic HTML
+ * - Real-time date range validation
+ *
+ * ## Events
+ *
+ * ### `date-range-change`
+ * Fired when a date range is selected or changed.
+ *
+ * **Detail:**
+ * ```typescript
+ * {
+ *   range: DateRange,
+ *   formattedRange: {
+ *     start: string | null,
+ *     end: string | null
+ *   }
+ * }
+ * ```
+ *
+ * ### `close`
+ * Fired when the modal is closed.
+ *
+ * **Detail:**
+ * ```typescript
+ * {
+ *   confirmed: boolean,
+ *   range: DateRange | null
+ * }
+ * ```
+ *
  * ## Usage
  *
+ * ### Basic usage
  * ```html
  * <ui-date-picker-modal
  *   .open=${true}
  *   .selectedRange=${{ start: new Date(), end: null }}
- *   @change=${this.handleRangeChange}
+ *   @date-range-change=${this.handleRangeChange}
  *   @close=${this.handleClose}
  * ></ui-date-picker-modal>
  * ```
  *
- * ### Custom labels
+ * ### Custom labels and constraints
  * ```html
  * <ui-date-picker-modal
  *   title="Select travel dates"
  *   startLabel="Check-in"
  *   endLabel="Check-out"
+ *   .minDate=${new Date()}
+ *   .maxDate=${new Date(Date.now() + 365 * 24 * 60 * 60 * 1000)}
+ *   .disabledDates=${[new Date('2024-12-25')]}
+ * ></ui-date-picker-modal>
+ * ```
+ *
+ * ### With mode toggle disabled
+ * ```html
+ * <ui-date-picker-modal
+ *   .showModeToggle=${false}
  * ></ui-date-picker-modal>
  * ```
  */
@@ -68,9 +115,9 @@ let UiDatePickerModal = (() => {
     let _showModeToggle_decorators;
     let _showModeToggle_initializers = [];
     let _showModeToggle_extraInitializers = [];
-    let __isInputMode_decorators;
-    let __isInputMode_initializers = [];
-    let __isInputMode_extraInitializers = [];
+    let _isInputMode_decorators;
+    let _isInputMode_initializers = [];
+    let _isInputMode_extraInitializers = [];
     var UiDatePickerModal = class extends _classSuper {
         static { _classThis = this; }
         static {
@@ -85,7 +132,7 @@ let UiDatePickerModal = (() => {
             _disabledDates_decorators = [property({ type: Array })];
             _locale_decorators = [property({ type: String })];
             _showModeToggle_decorators = [property({ type: Boolean })];
-            __isInputMode_decorators = [state()];
+            _isInputMode_decorators = [state()];
             __esDecorate(this, null, _open_decorators, { kind: "accessor", name: "open", static: false, private: false, access: { has: obj => "open" in obj, get: obj => obj.open, set: (obj, value) => { obj.open = value; } }, metadata: _metadata }, _open_initializers, _open_extraInitializers);
             __esDecorate(this, null, _title_decorators, { kind: "accessor", name: "title", static: false, private: false, access: { has: obj => "title" in obj, get: obj => obj.title, set: (obj, value) => { obj.title = value; } }, metadata: _metadata }, _title_initializers, _title_extraInitializers);
             __esDecorate(this, null, _startLabel_decorators, { kind: "accessor", name: "startLabel", static: false, private: false, access: { has: obj => "startLabel" in obj, get: obj => obj.startLabel, set: (obj, value) => { obj.startLabel = value; } }, metadata: _metadata }, _startLabel_initializers, _startLabel_extraInitializers);
@@ -96,7 +143,7 @@ let UiDatePickerModal = (() => {
             __esDecorate(this, null, _disabledDates_decorators, { kind: "accessor", name: "disabledDates", static: false, private: false, access: { has: obj => "disabledDates" in obj, get: obj => obj.disabledDates, set: (obj, value) => { obj.disabledDates = value; } }, metadata: _metadata }, _disabledDates_initializers, _disabledDates_extraInitializers);
             __esDecorate(this, null, _locale_decorators, { kind: "accessor", name: "locale", static: false, private: false, access: { has: obj => "locale" in obj, get: obj => obj.locale, set: (obj, value) => { obj.locale = value; } }, metadata: _metadata }, _locale_initializers, _locale_extraInitializers);
             __esDecorate(this, null, _showModeToggle_decorators, { kind: "accessor", name: "showModeToggle", static: false, private: false, access: { has: obj => "showModeToggle" in obj, get: obj => obj.showModeToggle, set: (obj, value) => { obj.showModeToggle = value; } }, metadata: _metadata }, _showModeToggle_initializers, _showModeToggle_extraInitializers);
-            __esDecorate(this, null, __isInputMode_decorators, { kind: "accessor", name: "_isInputMode", static: false, private: false, access: { has: obj => "_isInputMode" in obj, get: obj => obj._isInputMode, set: (obj, value) => { obj._isInputMode = value; } }, metadata: _metadata }, __isInputMode_initializers, __isInputMode_extraInitializers);
+            __esDecorate(this, null, _isInputMode_decorators, { kind: "accessor", name: "isInputMode", static: false, private: false, access: { has: obj => "isInputMode" in obj, get: obj => obj.isInputMode, set: (obj, value) => { obj.isInputMode = value; } }, metadata: _metadata }, _isInputMode_initializers, _isInputMode_extraInitializers);
             __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
             UiDatePickerModal = _classThis = _classDescriptor.value;
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
@@ -198,23 +245,30 @@ let UiDatePickerModal = (() => {
          */
         get showModeToggle() { return this.#showModeToggle_accessor_storage; }
         set showModeToggle(value) { this.#showModeToggle_accessor_storage = value; }
-        #_isInputMode_accessor_storage = (__runInitializers(this, _showModeToggle_extraInitializers), __runInitializers(this, __isInputMode_initializers, false));
-        get _isInputMode() { return this.#_isInputMode_accessor_storage; }
-        set _isInputMode(value) { this.#_isInputMode_accessor_storage = value; }
-        _handleRangeSelect(event) {
+        #isInputMode_accessor_storage = (__runInitializers(this, _showModeToggle_extraInitializers), __runInitializers(this, _isInputMode_initializers, false));
+        get isInputMode() { return this.#isInputMode_accessor_storage; }
+        set isInputMode(value) { this.#isInputMode_accessor_storage = value; }
+        constructor() {
+            super();
+            __runInitializers(this, _isInputMode_extraInitializers);
+            // Initialize boolean properties to false as per Lit best practices
+            this.open = false;
+            this.showModeToggle = true;
+        }
+        handleRangeSelect(event) {
             this.selectedRange = event.detail.range;
-            this._dispatchChangeEvent();
+            this.dispatchChangeEvent();
         }
-        _handleCancel() {
-            this._dispatchCloseEvent(false);
+        handleCancel() {
+            this.dispatchCloseEvent(false);
         }
-        _handleConfirm() {
-            this._dispatchCloseEvent(true);
+        handleConfirm() {
+            this.dispatchCloseEvent(true);
         }
-        _handleModeToggle() {
-            this._isInputMode = !this._isInputMode;
+        handleModeToggle() {
+            this.isInputMode = !this.isInputMode;
         }
-        _dispatchChangeEvent() {
+        dispatchChangeEvent() {
             if (!this.selectedRange)
                 return;
             const event = {
@@ -230,7 +284,7 @@ let UiDatePickerModal = (() => {
                 composed: true,
             }));
         }
-        _dispatchCloseEvent(confirmed) {
+        dispatchCloseEvent(confirmed) {
             this.dispatchEvent(new CustomEvent('close', {
                 detail: {
                     confirmed,
@@ -240,100 +294,125 @@ let UiDatePickerModal = (() => {
                 composed: true,
             }));
         }
-        _renderHeader() {
+        renderHeader() {
             return html `
-      <div class="modal-header">
-        <h2 class="modal-title">${this.title}</h2>
-        <div style="display: flex; gap: 8px;">
+      <header class="modal-header">
+        <h2 id="modal-title" class="modal-title">${this.title}</h2>
+        <div class="header-actions">
           ${this.showModeToggle
                 ? html `
                 <ui-icon-button
-                  @click=${this._handleModeToggle}
-                  aria-label=${this._isInputMode ? 'Show calendar' : 'Show date input'}
-                  title=${this._isInputMode ? 'Show calendar' : 'Show date input'}
+                  @click=${this.handleModeToggle}
+                  aria-label=${this.isInputMode ? 'Show calendar' : 'Show date input'}
+                  title=${this.isInputMode ? 'Show calendar' : 'Show date input'}
                 >
-                  <ui-icon icon=${this._isInputMode ? 'calendarToday' : 'edit'}></ui-icon>
+                  <ui-icon icon=${this.isInputMode ? 'calendarToday' : 'edit'}></ui-icon>
                 </ui-icon-button>
               `
                 : ''}
-          <ui-icon-button @click=${this._handleCancel} aria-label="Close" title="Close">
+          <ui-icon-button @click=${this.handleCancel} aria-label="Close" title="Close">
             <ui-icon icon="close"></ui-icon>
           </ui-icon-button>
         </div>
-      </div>
+      </header>
     `;
         }
-        _renderDateDisplay() {
+        renderDateDisplay() {
             const startDate = this.selectedRange?.start;
             const endDate = this.selectedRange?.end;
             return html `
-      <div class="date-range-display">
+      <section class="date-range-display" role="status" aria-live="polite" aria-label="Selected date range">
         <div class="date-display">
-          <div class="date-label">${this.startLabel}</div>
-          <div class="date-value">${startDate ? formatDate(startDate, this.locale) : 'Select date'}</div>
+          <div class="date-label" id="start-label">${this.startLabel}</div>
+          <div class="date-value" aria-labelledby="start-label" aria-describedby="start-description">
+            ${startDate ? formatDate(startDate, this.locale) : 'Select date'}
+          </div>
+          <div id="start-description" class="visually-hidden">
+            ${startDate ? `Start date selected: ${formatDate(startDate, this.locale)}` : 'No start date selected'}
+          </div>
         </div>
-        <div class="date-separator">—</div>
+        <div class="date-separator" aria-hidden="true">—</div>
         <div class="date-display">
-          <div class="date-label">${this.endLabel}</div>
-          <div class="date-value">${endDate ? formatDate(endDate, this.locale) : 'Select date'}</div>
+          <div class="date-label" id="end-label">${this.endLabel}</div>
+          <div class="date-value" aria-labelledby="end-label" aria-describedby="end-description">
+            ${endDate ? formatDate(endDate, this.locale) : 'Select date'}
+          </div>
+          <div id="end-description" class="visually-hidden">
+            ${endDate ? `End date selected: ${formatDate(endDate, this.locale)}` : 'No end date selected'}
+          </div>
         </div>
-      </div>
+      </section>
     `;
         }
-        _renderCalendar() {
+        renderCalendar() {
             const currentDate = this.selectedRange?.start || new Date();
             return html `
       <ui-date-picker-calendar
         .year=${currentDate.getFullYear()}
         .month=${currentDate.getMonth()}
-        .selectedRange=${this.selectedRange}
+        .rangeStart=${this.selectedRange?.start || null}
+        .rangeEnd=${this.selectedRange?.end || null}
         .rangeSelection=${true}
         .minDate=${this.minDate}
         .maxDate=${this.maxDate}
         .disabledDates=${this.disabledDates}
         .locale=${this.locale}
-        @date-range-select=${this._handleRangeSelect}
+        @date-range-select=${this.handleRangeSelect}
       ></ui-date-picker-calendar>
     `;
         }
-        _renderInputMode() {
-            // For now, we'll show a placeholder for input mode
-            // This could be enhanced with actual date input fields
+        renderInputMode() {
             return html `
-      <div style="padding: 24px; text-align: center; color: var(--ui-color-on-surface-variant);">
-        <ui-icon icon="edit" style="font-size: 48px; margin-bottom: 16px;"></ui-icon>
-        <p>Manual date input mode</p>
-        <p>This feature can be enhanced with date input fields</p>
-      </div>
+      <section class="input-mode-placeholder" role="status" aria-live="polite">
+        <ui-icon icon="edit" class="input-mode-icon" aria-hidden="true"></ui-icon>
+        <h3>Manual date input mode</h3>
+        <p>This feature can be enhanced with date input fields for direct text entry</p>
+        <p><em>Use the calendar toggle button to return to calendar view</em></p>
+      </section>
     `;
         }
-        _renderContent() {
+        renderContent() {
             return html `
-      <div class="modal-content">
-        ${this._renderDateDisplay()} ${this._isInputMode ? this._renderInputMode() : this._renderCalendar()}
-      </div>
+      <main id="modal-content" class="modal-content">
+        ${this.renderDateDisplay()} ${this.isInputMode ? this.renderInputMode() : this.renderCalendar()}
+      </main>
     `;
         }
-        _renderActions() {
+        renderActions() {
             const hasValidRange = this.selectedRange?.start && this.selectedRange?.end;
             return html `
-      <div class="modal-actions">
-        <ui-button color="text" @click=${this._handleCancel}>Cancel</ui-button>
-        <ui-button color="filled" @click=${this._handleConfirm} .disabled=${!hasValidRange}> Confirm </ui-button>
-      </div>
+      <footer class="modal-actions" role="group" aria-label="Date picker actions">
+        <ui-button color="text" @click=${this.handleCancel} aria-describedby="cancel-description"> Cancel </ui-button>
+        <ui-button
+          color="filled"
+          @click=${this.handleConfirm}
+          .disabled=${!hasValidRange}
+          aria-describedby="confirm-description"
+        >
+          Confirm
+        </ui-button>
+        <div id="cancel-description" class="visually-hidden">Close the date picker without saving changes</div>
+        <div id="confirm-description" class="visually-hidden">
+          ${hasValidRange
+                ? 'Save the selected date range and close the picker'
+                : 'Select both start and end dates to confirm the selection'}
+        </div>
+      </footer>
     `;
         }
         render() {
             return html `
-      <ui-dialog .open=${this.open} @close=${this._handleCancel}>
-        ${this._renderHeader()} ${this._renderContent()} ${this._renderActions()}
+      <ui-dialog
+        .open=${this.open}
+        @close=${this.handleCancel}
+        role="dialog"
+        aria-labelledby="modal-title"
+        aria-describedby="modal-content"
+      >
+        ${this.renderHeader()} ${this.renderContent()} ${this.renderActions()}
       </ui-dialog>
     `;
         }
-        constructor() {
-            super(...arguments);
-            __runInitializers(this, __isInputMode_extraInitializers);
-        }
         static {
             __runInitializers(_classThis, _classExtraInitializers);
         }

package/build/src/md/date-picker/ui-date-picker-modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"ui-date-picker-modal.js","sourceRoot":"","sources":["../../../../src/md/date-picker/ui-date-picker-modal.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, TemplateResult } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { modalStyles } from './internals/DatePicker.styles.js'\nimport { DateRange, formatDate } from './internals/DatePickerUtils.js'\nimport type { DateRangeSelectEvent } from './internals/DatePickerCalendar.js'\nimport './internals/DatePickerCalendar.js'\nimport '../../md/dialog/ui-dialog.js'\nimport '../../md/button/ui-button.js'\nimport '../../md/icon-button/ui-icon-button.js'\nimport '../../md/icons/ui-icon.js'\n\nexport interface ModalDatePickerChangeEvent {\n  range: DateRange\n  formattedRange: {\n    start: string | null\n    end: string | null\n  }\n}\n\n/**\n * A modal date picker for selecting date ranges.\n * Extends full-screen and is ideal for date range selection like flight bookings.\n *\n * ## Usage\n *\n * ```html\n * <ui-date-picker-modal\n *   .open=${true}\n *   .selectedRange=${{ start: new Date(), end: null }}\n *   @change=${this.handleRangeChange}\n *   @close=${this.handleClose}\n * ></ui-date-picker-modal>\n * ```\n *\n * ### Custom labels\n * ```html\n * <ui-date-picker-modal\n *   title=\"Select travel dates\"\n *   startLabel=\"Check-in\"\n *   endLabel=\"Check-out\"\n * ></ui-date-picker-modal>\n * ```\n */\n@customElement('ui-date-picker-modal')\nexport class UiDatePickerModal extends LitElement {\n  static override styles = modalStyles\n\n  /**\n   * Whether the modal is open\n   */\n  @property({ type: Boolean }) accessor open = false\n\n  /**\n   * The modal title\n   */\n  @property({ type: String }) override accessor title = 'Select dates'\n\n  /**\n   * Label for the start date\n   */\n  @property({ type: String }) accessor startLabel = 'Start date'\n\n  /**\n   * Label for the end date\n   */\n  @property({ type: String }) accessor endLabel = 'End date'\n\n  /**\n   * The selected date range\n   */\n  @property({ type: Object }) accessor selectedRange: DateRange | null = null\n\n  /**\n   * Minimum selectable date\n   */\n  @property({ type: Object }) accessor minDate: Date | undefined = undefined\n\n  /**\n   * Maximum selectable date\n   */\n  @property({ type: Object }) accessor maxDate: Date | undefined = undefined\n\n  /**\n   * Array of disabled dates\n   */\n  @property({ type: Array }) accessor disabledDates: Date[] | undefined = undefined\n\n  /**\n   * Locale for date formatting\n   */\n  @property({ type: String }) accessor locale: string | undefined = undefined\n\n  /**\n   * Whether to show edit/calendar toggle button\n   */\n  @property({ type: Boolean }) accessor showModeToggle = true\n\n  @state() private accessor _isInputMode = false\n\n  private _handleRangeSelect(event: CustomEvent<DateRangeSelectEvent>): void {\n    this.selectedRange = event.detail.range\n    this._dispatchChangeEvent()\n  }\n\n  private _handleCancel(): void {\n    this._dispatchCloseEvent(false)\n  }\n\n  private _handleConfirm(): void {\n    this._dispatchCloseEvent(true)\n  }\n\n  private _handleModeToggle(): void {\n    this._isInputMode = !this._isInputMode\n  }\n\n  private _dispatchChangeEvent(): void {\n    if (!this.selectedRange) return\n\n    const event: ModalDatePickerChangeEvent = {\n      range: this.selectedRange,\n      formattedRange: {\n        start: this.selectedRange.start ? formatDate(this.selectedRange.start, this.locale) : null,\n        end: this.selectedRange.end ? formatDate(this.selectedRange.end, this.locale) : null,\n      },\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('date-range-change', {\n        detail: event,\n        bubbles: true,\n        composed: true,\n      })\n    )\n  }\n\n  private _dispatchCloseEvent(confirmed: boolean): void {\n    this.dispatchEvent(\n      new CustomEvent('close', {\n        detail: {\n          confirmed,\n          range: confirmed ? this.selectedRange : null,\n        },\n        bubbles: true,\n        composed: true,\n      })\n    )\n  }\n\n  private _renderHeader(): TemplateResult {\n    return html`\n      <div class=\"modal-header\">\n        <h2 class=\"modal-title\">${this.title}</h2>\n        <div style=\"display: flex; gap: 8px;\">\n          ${this.showModeToggle\n            ? html`\n                <ui-icon-button\n                  @click=${this._handleModeToggle}\n                  aria-label=${this._isInputMode ? 'Show calendar' : 'Show date input'}\n                  title=${this._isInputMode ? 'Show calendar' : 'Show date input'}\n                >\n                  <ui-icon icon=${this._isInputMode ? 'calendarToday' : 'edit'}></ui-icon>\n                </ui-icon-button>\n              `\n            : ''}\n          <ui-icon-button @click=${this._handleCancel} aria-label=\"Close\" title=\"Close\">\n            <ui-icon icon=\"close\"></ui-icon>\n          </ui-icon-button>\n        </div>\n      </div>\n    `\n  }\n\n  private _renderDateDisplay(): TemplateResult {\n    const startDate = this.selectedRange?.start\n    const endDate = this.selectedRange?.end\n\n    return html`\n      <div class=\"date-range-display\">\n        <div class=\"date-display\">\n          <div class=\"date-label\">${this.startLabel}</div>\n          <div class=\"date-value\">${startDate ? formatDate(startDate, this.locale) : 'Select date'}</div>\n        </div>\n        <div class=\"date-separator\">—</div>\n        <div class=\"date-display\">\n          <div class=\"date-label\">${this.endLabel}</div>\n          <div class=\"date-value\">${endDate ? formatDate(endDate, this.locale) : 'Select date'}</div>\n        </div>\n      </div>\n    `\n  }\n\n  private _renderCalendar(): TemplateResult {\n    const currentDate = this.selectedRange?.start || new Date()\n\n    return html`\n      <ui-date-picker-calendar\n        .year=${currentDate.getFullYear()}\n        .month=${currentDate.getMonth()}\n        .selectedRange=${this.selectedRange}\n        .rangeSelection=${true}\n        .minDate=${this.minDate}\n        .maxDate=${this.maxDate}\n        .disabledDates=${this.disabledDates}\n        .locale=${this.locale}\n        @date-range-select=${this._handleRangeSelect}\n      ></ui-date-picker-calendar>\n    `\n  }\n\n  private _renderInputMode(): TemplateResult {\n    // For now, we'll show a placeholder for input mode\n    // This could be enhanced with actual date input fields\n    return html`\n      <div style=\"padding: 24px; text-align: center; color: var(--ui-color-on-surface-variant);\">\n        <ui-icon icon=\"edit\" style=\"font-size: 48px; margin-bottom: 16px;\"></ui-icon>\n        <p>Manual date input mode</p>\n        <p>This feature can be enhanced with date input fields</p>\n      </div>\n    `\n  }\n\n  private _renderContent(): TemplateResult {\n    return html`\n      <div class=\"modal-content\">\n        ${this._renderDateDisplay()} ${this._isInputMode ? this._renderInputMode() : this._renderCalendar()}\n      </div>\n    `\n  }\n\n  private _renderActions(): TemplateResult {\n    const hasValidRange = this.selectedRange?.start && this.selectedRange?.end\n\n    return html`\n      <div class=\"modal-actions\">\n        <ui-button color=\"text\" @click=${this._handleCancel}>Cancel</ui-button>\n        <ui-button color=\"filled\" @click=${this._handleConfirm} .disabled=${!hasValidRange}> Confirm </ui-button>\n      </div>\n    `\n  }\n\n  override render(): TemplateResult {\n    return html`\n      <ui-dialog .open=${this.open} @close=${this._handleCancel}>\n        ${this._renderHeader()} ${this._renderContent()} ${this._renderActions()}\n      </ui-dialog>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui-date-picker-modal': UiDatePickerModal\n  }\n\n  interface HTMLElementEventMap {\n    'date-range-change': CustomEvent<ModalDatePickerChangeEvent>\n    'close': CustomEvent<{\n      confirmed: boolean\n      range: DateRange | null\n    }>\n  }\n}\n"]}
+{"version":3,"file":"ui-date-picker-modal.js","sourceRoot":"","sources":["../../../../src/md/date-picker/ui-date-picker-modal.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, TemplateResult } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { modalStyles } from './internals/DatePicker.styles.js'\nimport { DateRange, formatDate } from './internals/DatePickerUtils.js'\nimport type { DateRangeSelectEvent } from './internals/DatePickerCalendar.js'\nimport './internals/DatePickerCalendar.js'\nimport '../../md/dialog/ui-dialog.js'\nimport '../../md/button/ui-button.js'\nimport '../../md/icon-button/ui-icon-button.js'\nimport '../../md/icons/ui-icon.js'\n\nexport interface ModalDatePickerChangeEvent {\n  range: DateRange\n  formattedRange: {\n    start: string | null\n    end: string | null\n  }\n}\n\n/**\n * A modal date picker for selecting date ranges.\n * Extends full-screen and is ideal for date range selection like flight bookings.\n *\n * ## Features\n * - Full-screen modal interface\n * - Date range selection with visual feedback\n * - Calendar and input mode toggle\n * - Min/max date constraints\n * - Disabled dates support\n * - Accessible design with proper ARIA attributes and semantic HTML\n * - Real-time date range validation\n *\n * ## Events\n *\n * ### `date-range-change`\n * Fired when a date range is selected or changed.\n *\n * **Detail:**\n * ```typescript\n * {\n *   range: DateRange,\n *   formattedRange: {\n *     start: string | null,\n *     end: string | null\n *   }\n * }\n * ```\n *\n * ### `close`\n * Fired when the modal is closed.\n *\n * **Detail:**\n * ```typescript\n * {\n *   confirmed: boolean,\n *   range: DateRange | null\n * }\n * ```\n *\n * ## Usage\n *\n * ### Basic usage\n * ```html\n * <ui-date-picker-modal\n *   .open=${true}\n *   .selectedRange=${{ start: new Date(), end: null }}\n *   @date-range-change=${this.handleRangeChange}\n *   @close=${this.handleClose}\n * ></ui-date-picker-modal>\n * ```\n *\n * ### Custom labels and constraints\n * ```html\n * <ui-date-picker-modal\n *   title=\"Select travel dates\"\n *   startLabel=\"Check-in\"\n *   endLabel=\"Check-out\"\n *   .minDate=${new Date()}\n *   .maxDate=${new Date(Date.now() + 365 * 24 * 60 * 60 * 1000)}\n *   .disabledDates=${[new Date('2024-12-25')]}\n * ></ui-date-picker-modal>\n * ```\n *\n * ### With mode toggle disabled\n * ```html\n * <ui-date-picker-modal\n *   .showModeToggle=${false}\n * ></ui-date-picker-modal>\n * ```\n */\n@customElement('ui-date-picker-modal')\nexport class UiDatePickerModal extends LitElement {\n  static override styles = modalStyles\n\n  /**\n   * Whether the modal is open\n   */\n  @property({ type: Boolean }) accessor open = false\n\n  /**\n   * The modal title\n   */\n  @property({ type: String }) override accessor title = 'Select dates'\n\n  /**\n   * Label for the start date\n   */\n  @property({ type: String }) accessor startLabel = 'Start date'\n\n  /**\n   * Label for the end date\n   */\n  @property({ type: String }) accessor endLabel = 'End date'\n\n  /**\n   * The selected date range\n   */\n  @property({ type: Object }) accessor selectedRange: DateRange | null = null\n\n  /**\n   * Minimum selectable date\n   */\n  @property({ type: Object }) accessor minDate: Date | undefined = undefined\n\n  /**\n   * Maximum selectable date\n   */\n  @property({ type: Object }) accessor maxDate: Date | undefined = undefined\n\n  /**\n   * Array of disabled dates\n   */\n  @property({ type: Array }) accessor disabledDates: Date[] | undefined = undefined\n\n  /**\n   * Locale for date formatting\n   */\n  @property({ type: String }) accessor locale: string | undefined = undefined\n\n  /**\n   * Whether to show edit/calendar toggle button\n   */\n  @property({ type: Boolean }) accessor showModeToggle = true\n\n  @state() private accessor isInputMode = false\n\n  constructor() {\n    super()\n    // Initialize boolean properties to false as per Lit best practices\n    this.open = false\n    this.showModeToggle = true\n  }\n\n  private handleRangeSelect(event: CustomEvent<DateRangeSelectEvent>): void {\n    this.selectedRange = event.detail.range\n    this.dispatchChangeEvent()\n  }\n\n  private handleCancel(): void {\n    this.dispatchCloseEvent(false)\n  }\n\n  private handleConfirm(): void {\n    this.dispatchCloseEvent(true)\n  }\n\n  private handleModeToggle(): void {\n    this.isInputMode = !this.isInputMode\n  }\n\n  private dispatchChangeEvent(): void {\n    if (!this.selectedRange) return\n\n    const event: ModalDatePickerChangeEvent = {\n      range: this.selectedRange,\n      formattedRange: {\n        start: this.selectedRange.start ? formatDate(this.selectedRange.start, this.locale) : null,\n        end: this.selectedRange.end ? formatDate(this.selectedRange.end, this.locale) : null,\n      },\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('date-range-change', {\n        detail: event,\n        bubbles: true,\n        composed: true,\n      })\n    )\n  }\n\n  private dispatchCloseEvent(confirmed: boolean): void {\n    this.dispatchEvent(\n      new CustomEvent('close', {\n        detail: {\n          confirmed,\n          range: confirmed ? this.selectedRange : null,\n        },\n        bubbles: true,\n        composed: true,\n      })\n    )\n  }\n\n  private renderHeader(): TemplateResult {\n    return html`\n      <header class=\"modal-header\">\n        <h2 id=\"modal-title\" class=\"modal-title\">${this.title}</h2>\n        <div class=\"header-actions\">\n          ${this.showModeToggle\n            ? html`\n                <ui-icon-button\n                  @click=${this.handleModeToggle}\n                  aria-label=${this.isInputMode ? 'Show calendar' : 'Show date input'}\n                  title=${this.isInputMode ? 'Show calendar' : 'Show date input'}\n                >\n                  <ui-icon icon=${this.isInputMode ? 'calendarToday' : 'edit'}></ui-icon>\n                </ui-icon-button>\n              `\n            : ''}\n          <ui-icon-button @click=${this.handleCancel} aria-label=\"Close\" title=\"Close\">\n            <ui-icon icon=\"close\"></ui-icon>\n          </ui-icon-button>\n        </div>\n      </header>\n    `\n  }\n\n  private renderDateDisplay(): TemplateResult {\n    const startDate = this.selectedRange?.start\n    const endDate = this.selectedRange?.end\n\n    return html`\n      <section class=\"date-range-display\" role=\"status\" aria-live=\"polite\" aria-label=\"Selected date range\">\n        <div class=\"date-display\">\n          <div class=\"date-label\" id=\"start-label\">${this.startLabel}</div>\n          <div class=\"date-value\" aria-labelledby=\"start-label\" aria-describedby=\"start-description\">\n            ${startDate ? formatDate(startDate, this.locale) : 'Select date'}\n          </div>\n          <div id=\"start-description\" class=\"visually-hidden\">\n            ${startDate ? `Start date selected: ${formatDate(startDate, this.locale)}` : 'No start date selected'}\n          </div>\n        </div>\n        <div class=\"date-separator\" aria-hidden=\"true\">—</div>\n        <div class=\"date-display\">\n          <div class=\"date-label\" id=\"end-label\">${this.endLabel}</div>\n          <div class=\"date-value\" aria-labelledby=\"end-label\" aria-describedby=\"end-description\">\n            ${endDate ? formatDate(endDate, this.locale) : 'Select date'}\n          </div>\n          <div id=\"end-description\" class=\"visually-hidden\">\n            ${endDate ? `End date selected: ${formatDate(endDate, this.locale)}` : 'No end date selected'}\n          </div>\n        </div>\n      </section>\n    `\n  }\n\n  private renderCalendar(): TemplateResult {\n    const currentDate = this.selectedRange?.start || new Date()\n\n    return html`\n      <ui-date-picker-calendar\n        .year=${currentDate.getFullYear()}\n        .month=${currentDate.getMonth()}\n        .rangeStart=${this.selectedRange?.start || null}\n        .rangeEnd=${this.selectedRange?.end || null}\n        .rangeSelection=${true}\n        .minDate=${this.minDate}\n        .maxDate=${this.maxDate}\n        .disabledDates=${this.disabledDates}\n        .locale=${this.locale}\n        @date-range-select=${this.handleRangeSelect}\n      ></ui-date-picker-calendar>\n    `\n  }\n\n  private renderInputMode(): TemplateResult {\n    return html`\n      <section class=\"input-mode-placeholder\" role=\"status\" aria-live=\"polite\">\n        <ui-icon icon=\"edit\" class=\"input-mode-icon\" aria-hidden=\"true\"></ui-icon>\n        <h3>Manual date input mode</h3>\n        <p>This feature can be enhanced with date input fields for direct text entry</p>\n        <p><em>Use the calendar toggle button to return to calendar view</em></p>\n      </section>\n    `\n  }\n\n  private renderContent(): TemplateResult {\n    return html`\n      <main id=\"modal-content\" class=\"modal-content\">\n        ${this.renderDateDisplay()} ${this.isInputMode ? this.renderInputMode() : this.renderCalendar()}\n      </main>\n    `\n  }\n\n  private renderActions(): TemplateResult {\n    const hasValidRange = this.selectedRange?.start && this.selectedRange?.end\n\n    return html`\n      <footer class=\"modal-actions\" role=\"group\" aria-label=\"Date picker actions\">\n        <ui-button color=\"text\" @click=${this.handleCancel} aria-describedby=\"cancel-description\"> Cancel </ui-button>\n        <ui-button\n          color=\"filled\"\n          @click=${this.handleConfirm}\n          .disabled=${!hasValidRange}\n          aria-describedby=\"confirm-description\"\n        >\n          Confirm\n        </ui-button>\n        <div id=\"cancel-description\" class=\"visually-hidden\">Close the date picker without saving changes</div>\n        <div id=\"confirm-description\" class=\"visually-hidden\">\n          ${hasValidRange\n            ? 'Save the selected date range and close the picker'\n            : 'Select both start and end dates to confirm the selection'}\n        </div>\n      </footer>\n    `\n  }\n\n  override render(): TemplateResult {\n    return html`\n      <ui-dialog\n        .open=${this.open}\n        @close=${this.handleCancel}\n        role=\"dialog\"\n        aria-labelledby=\"modal-title\"\n        aria-describedby=\"modal-content\"\n      >\n        ${this.renderHeader()} ${this.renderContent()} ${this.renderActions()}\n      </ui-dialog>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui-date-picker-modal': UiDatePickerModal\n  }\n\n  interface HTMLElementEventMap {\n    'date-range-change': CustomEvent<ModalDatePickerChangeEvent>\n    'close': CustomEvent<{\n      confirmed: boolean\n      range: DateRange | null\n    }>\n  }\n}\n"]}

package/demo/elements/currency/index.html

@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+  <title>Currency Picker</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link
+    href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
+    rel="stylesheet"
+  />
+  <link href="../../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
+  <link href="../../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
+  <link href="../../page.css" rel="stylesheet" type="text/css" />
+  <style>
+    .demo-section {
+      margin: 2rem 0;
+      padding: 1.5rem;
+      border: 1px solid var(--md-sys-color-outline-variant);
+      border-radius: 12px;
+      background: var(--md-sys-color-surface-container-lowest);
+    }
+
+    .demo-section h3 {
+      margin-top: 0;
+      color: var(--md-sys-color-on-surface);
+      font-weight: 500;
+    }
+
+    .demo-section p {
+      margin-bottom: 1rem;
+      color: var(--md-sys-color-on-surface-variant);
+    }
+
+    .output-section {
+      margin-top: 1rem;
+      padding: 1rem;
+      background: var(--md-sys-color-surface-container);
+      border-radius: 8px;
+      border-left: 4px solid var(--md-sys-color-primary);
+    }
+
+    .output-section h4 {
+      margin: 0 0 0.5rem 0;
+      font-size: 0.875rem;
+      font-weight: 500;
+      color: var(--md-sys-color-primary);
+      text-transform: uppercase;
+      letter-spacing: 0.1em;
+    }
+
+    .output-content {
+      font-family: 'Roboto Mono', monospace;
+      font-size: 0.875rem;
+      color: var(--md-sys-color-on-surface);
+      white-space: pre-wrap;
+      word-wrap: break-word;
+    }
+
+    .demo-controls {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 1rem;
+      margin-bottom: 1rem;
+    }
+
+    .demo-controls currency-picker {
+      flex: 1;
+      min-width: 200px;
+    }
+
+    @media (max-width: 768px) {
+      .demo-controls {
+        flex-direction: column;
+      }
+      
+      .demo-controls currency-picker {
+        min-width: unset;
+      }
+    }
+  </style>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="/.tmp/demo/elements/currency/index.js"></script>
+</body>
+
+</html>