@api-client/ui 0.5.5 → 0.5.7

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

@@ -0,0 +1,156 @@
+import { LitElement, TemplateResult } from 'lit';
+import { DateRange } from './internals/DatePickerUtils.js';
+import './internals/DatePickerCalendar.js';
+import '../../md/dialog/ui-dialog.js';
+import '../../md/button/ui-button.js';
+import '../../md/icon-button/ui-icon-button.js';
+import '../../md/icons/ui-icon.js';
+export interface ModalDatePickerChangeEvent {
+    range: DateRange;
+    formattedRange: {
+        start: string | null;
+        end: string | null;
+    };
+}
+/**
+ * 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 }}
+ *   @date-range-change=${this.handleRangeChange}
+ *   @close=${this.handleClose}
+ * ></ui-date-picker-modal>
+ * ```
+ *
+ * ### 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>
+ * ```
+ */
+export declare class UiDatePickerModal extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Whether the modal is open
+     */
+    accessor open: boolean;
+    /**
+     * The modal title
+     */
+    accessor title: string;
+    /**
+     * Label for the start date
+     */
+    accessor startLabel: string;
+    /**
+     * Label for the end date
+     */
+    accessor endLabel: string;
+    /**
+     * The selected date range
+     */
+    accessor selectedRange: DateRange | null;
+    /**
+     * Minimum selectable date
+     */
+    accessor minDate: Date | undefined;
+    /**
+     * Maximum selectable date
+     */
+    accessor maxDate: Date | undefined;
+    /**
+     * Array of disabled dates
+     */
+    accessor disabledDates: Date[] | undefined;
+    /**
+     * Locale for date formatting
+     */
+    accessor locale: string | undefined;
+    /**
+     * Whether to show edit/calendar toggle button
+     */
+    accessor showModeToggle: boolean;
+    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 {
+    interface HTMLElementTagNameMap {
+        'ui-date-picker-modal': UiDatePickerModal;
+    }
+    interface HTMLElementEventMap {
+        'date-range-change': CustomEvent<ModalDatePickerChangeEvent>;
+        'close': CustomEvent<{
+            confirmed: boolean;
+            range: DateRange | null;
+        }>;
+    }
+}
+//# sourceMappingURL=ui-date-picker-modal.d.ts.map

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

@@ -0,0 +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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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

@@ -0,0 +1,423 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { LitElement, html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { modalStyles } from './internals/DatePicker.styles.js';
+import { formatDate } from './internals/DatePickerUtils.js';
+import './internals/DatePickerCalendar.js';
+import '../../md/dialog/ui-dialog.js';
+import '../../md/button/ui-button.js';
+import '../../md/icon-button/ui-icon-button.js';
+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 }}
+ *   @date-range-change=${this.handleRangeChange}
+ *   @close=${this.handleClose}
+ * ></ui-date-picker-modal>
+ * ```
+ *
+ * ### 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>
+ * ```
+ */
+let UiDatePickerModal = (() => {
+    let _classDecorators = [customElement('ui-date-picker-modal')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = LitElement;
+    let _open_decorators;
+    let _open_initializers = [];
+    let _open_extraInitializers = [];
+    let _title_decorators;
+    let _title_initializers = [];
+    let _title_extraInitializers = [];
+    let _startLabel_decorators;
+    let _startLabel_initializers = [];
+    let _startLabel_extraInitializers = [];
+    let _endLabel_decorators;
+    let _endLabel_initializers = [];
+    let _endLabel_extraInitializers = [];
+    let _selectedRange_decorators;
+    let _selectedRange_initializers = [];
+    let _selectedRange_extraInitializers = [];
+    let _minDate_decorators;
+    let _minDate_initializers = [];
+    let _minDate_extraInitializers = [];
+    let _maxDate_decorators;
+    let _maxDate_initializers = [];
+    let _maxDate_extraInitializers = [];
+    let _disabledDates_decorators;
+    let _disabledDates_initializers = [];
+    let _disabledDates_extraInitializers = [];
+    let _locale_decorators;
+    let _locale_initializers = [];
+    let _locale_extraInitializers = [];
+    let _showModeToggle_decorators;
+    let _showModeToggle_initializers = [];
+    let _showModeToggle_extraInitializers = [];
+    let _isInputMode_decorators;
+    let _isInputMode_initializers = [];
+    let _isInputMode_extraInitializers = [];
+    var UiDatePickerModal = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _open_decorators = [property({ type: Boolean })];
+            _title_decorators = [property({ type: String })];
+            _startLabel_decorators = [property({ type: String })];
+            _endLabel_decorators = [property({ type: String })];
+            _selectedRange_decorators = [property({ type: Object })];
+            _minDate_decorators = [property({ type: Object })];
+            _maxDate_decorators = [property({ type: Object })];
+            _disabledDates_decorators = [property({ type: Array })];
+            _locale_decorators = [property({ type: String })];
+            _showModeToggle_decorators = [property({ type: Boolean })];
+            _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);
+            __esDecorate(this, null, _endLabel_decorators, { kind: "accessor", name: "endLabel", static: false, private: false, access: { has: obj => "endLabel" in obj, get: obj => obj.endLabel, set: (obj, value) => { obj.endLabel = value; } }, metadata: _metadata }, _endLabel_initializers, _endLabel_extraInitializers);
+            __esDecorate(this, null, _selectedRange_decorators, { kind: "accessor", name: "selectedRange", static: false, private: false, access: { has: obj => "selectedRange" in obj, get: obj => obj.selectedRange, set: (obj, value) => { obj.selectedRange = value; } }, metadata: _metadata }, _selectedRange_initializers, _selectedRange_extraInitializers);
+            __esDecorate(this, null, _minDate_decorators, { kind: "accessor", name: "minDate", static: false, private: false, access: { has: obj => "minDate" in obj, get: obj => obj.minDate, set: (obj, value) => { obj.minDate = value; } }, metadata: _metadata }, _minDate_initializers, _minDate_extraInitializers);
+            __esDecorate(this, null, _maxDate_decorators, { kind: "accessor", name: "maxDate", static: false, private: false, access: { has: obj => "maxDate" in obj, get: obj => obj.maxDate, set: (obj, value) => { obj.maxDate = value; } }, metadata: _metadata }, _maxDate_initializers, _maxDate_extraInitializers);
+            __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(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 });
+        }
+        static styles = modalStyles;
+        #open_accessor_storage = __runInitializers(this, _open_initializers, false
+        /**
+         * The modal title
+         */
+        );
+        /**
+         * Whether the modal is open
+         */
+        get open() { return this.#open_accessor_storage; }
+        set open(value) { this.#open_accessor_storage = value; }
+        #title_accessor_storage = (__runInitializers(this, _open_extraInitializers), __runInitializers(this, _title_initializers, 'Select dates'
+        /**
+         * Label for the start date
+         */
+        ));
+        /**
+         * The modal title
+         */
+        get title() { return this.#title_accessor_storage; }
+        set title(value) { this.#title_accessor_storage = value; }
+        #startLabel_accessor_storage = (__runInitializers(this, _title_extraInitializers), __runInitializers(this, _startLabel_initializers, 'Start date'
+        /**
+         * Label for the end date
+         */
+        ));
+        /**
+         * Label for the start date
+         */
+        get startLabel() { return this.#startLabel_accessor_storage; }
+        set startLabel(value) { this.#startLabel_accessor_storage = value; }
+        #endLabel_accessor_storage = (__runInitializers(this, _startLabel_extraInitializers), __runInitializers(this, _endLabel_initializers, 'End date'
+        /**
+         * The selected date range
+         */
+        ));
+        /**
+         * Label for the end date
+         */
+        get endLabel() { return this.#endLabel_accessor_storage; }
+        set endLabel(value) { this.#endLabel_accessor_storage = value; }
+        #selectedRange_accessor_storage = (__runInitializers(this, _endLabel_extraInitializers), __runInitializers(this, _selectedRange_initializers, null
+        /**
+         * Minimum selectable date
+         */
+        ));
+        /**
+         * The selected date range
+         */
+        get selectedRange() { return this.#selectedRange_accessor_storage; }
+        set selectedRange(value) { this.#selectedRange_accessor_storage = value; }
+        #minDate_accessor_storage = (__runInitializers(this, _selectedRange_extraInitializers), __runInitializers(this, _minDate_initializers, undefined
+        /**
+         * Maximum selectable date
+         */
+        ));
+        /**
+         * Minimum selectable date
+         */
+        get minDate() { return this.#minDate_accessor_storage; }
+        set minDate(value) { this.#minDate_accessor_storage = value; }
+        #maxDate_accessor_storage = (__runInitializers(this, _minDate_extraInitializers), __runInitializers(this, _maxDate_initializers, undefined
+        /**
+         * Array of disabled dates
+         */
+        ));
+        /**
+         * Maximum selectable date
+         */
+        get maxDate() { return this.#maxDate_accessor_storage; }
+        set maxDate(value) { this.#maxDate_accessor_storage = value; }
+        #disabledDates_accessor_storage = (__runInitializers(this, _maxDate_extraInitializers), __runInitializers(this, _disabledDates_initializers, undefined
+        /**
+         * Locale for date formatting
+         */
+        ));
+        /**
+         * Array of disabled dates
+         */
+        get disabledDates() { return this.#disabledDates_accessor_storage; }
+        set disabledDates(value) { this.#disabledDates_accessor_storage = value; }
+        #locale_accessor_storage = (__runInitializers(this, _disabledDates_extraInitializers), __runInitializers(this, _locale_initializers, undefined
+        /**
+         * Whether to show edit/calendar toggle button
+         */
+        ));
+        /**
+         * Locale for date formatting
+         */
+        get locale() { return this.#locale_accessor_storage; }
+        set locale(value) { this.#locale_accessor_storage = value; }
+        #showModeToggle_accessor_storage = (__runInitializers(this, _locale_extraInitializers), __runInitializers(this, _showModeToggle_initializers, true));
+        /**
+         * Whether to show edit/calendar toggle button
+         */
+        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; }
+        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();
+        }
+        handleCancel() {
+            this.dispatchCloseEvent(false);
+        }
+        handleConfirm() {
+            this.dispatchCloseEvent(true);
+        }
+        handleModeToggle() {
+            this.isInputMode = !this.isInputMode;
+        }
+        dispatchChangeEvent() {
+            if (!this.selectedRange)
+                return;
+            const event = {
+                range: this.selectedRange,
+                formattedRange: {
+                    start: this.selectedRange.start ? formatDate(this.selectedRange.start, this.locale) : null,
+                    end: this.selectedRange.end ? formatDate(this.selectedRange.end, this.locale) : null,
+                },
+            };
+            this.dispatchEvent(new CustomEvent('date-range-change', {
+                detail: event,
+                bubbles: true,
+                composed: true,
+            }));
+        }
+        dispatchCloseEvent(confirmed) {
+            this.dispatchEvent(new CustomEvent('close', {
+                detail: {
+                    confirmed,
+                    range: confirmed ? this.selectedRange : null,
+                },
+                bubbles: true,
+                composed: true,
+            }));
+        }
+        renderHeader() {
+            return html `
+      <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'}
+                >
+                  <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 icon="close"></ui-icon>
+          </ui-icon-button>
+        </div>
+      </header>
+    `;
+        }
+        renderDateDisplay() {
+            const startDate = this.selectedRange?.start;
+            const endDate = this.selectedRange?.end;
+            return html `
+      <section class="date-range-display" role="status" aria-live="polite" aria-label="Selected date range">
+        <div class="date-display">
+          <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" aria-hidden="true">—</div>
+        <div class="date-display">
+          <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>
+      </section>
+    `;
+        }
+        renderCalendar() {
+            const currentDate = this.selectedRange?.start || new Date();
+            return html `
+      <ui-date-picker-calendar
+        .year=${currentDate.getFullYear()}
+        .month=${currentDate.getMonth()}
+        .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}
+      ></ui-date-picker-calendar>
+    `;
+        }
+        renderInputMode() {
+            return html `
+      <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() {
+            return html `
+      <main id="modal-content" class="modal-content">
+        ${this.renderDateDisplay()} ${this.isInputMode ? this.renderInputMode() : this.renderCalendar()}
+      </main>
+    `;
+        }
+        renderActions() {
+            const hasValidRange = this.selectedRange?.start && this.selectedRange?.end;
+            return html `
+      <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}
+        role="dialog"
+        aria-labelledby="modal-title"
+        aria-describedby="modal-content"
+      >
+        ${this.renderHeader()} ${this.renderContent()} ${this.renderActions()}
+      </ui-dialog>
+    `;
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return UiDatePickerModal = _classThis;
+})();
+export { UiDatePickerModal };
+//# sourceMappingURL=ui-date-picker-modal.js.map

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

@@ -0,0 +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 * ## 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/build/src/md/dialog/internals/Dialog.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/dialog/internals/Dialog.styles.ts"],"names":[],"mappings":";AAEA,wBAiKC"}
+{"version":3,"file":"Dialog.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/dialog/internals/Dialog.styles.ts"],"names":[],"mappings":";AAEA,wBAkKC"}

package/build/src/md/dialog/internals/Dialog.styles.js

@@ -34,6 +34,7 @@ export default css `
     left: 50%;
     transform: translate(-50%, -50%);
     margin: 0;
+    z-index: 1000;
   }
 
   dialog.non-modal:open {

package/build/src/md/dialog/internals/Dialog.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.styles.js","sourceRoot":"","sources":["../../../../../src/md/dialog/internals/Dialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiKjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  :host {\n    display: contents;\n  }\n\n  dialog {\n    overflow: hidden;\n    /* Do not override the display value here. It will render the dialog even when hidden */\n\n    border: none;\n    border-radius: var(--md-sys-shape-corner-extra-large);\n    background-color: var(--md-sys-color-surface-container-high);\n    box-shadow: var(--md-sys-elevation-3);\n    color: var(--md-sys-color-on-surface-variant);\n    padding: 24px;\n\n    max-width: var(--ui-dialog-max-width, 90vw);\n    max-height: var(--ui-dialog-max-height, 90vh);\n    width: var(--ui-dialog-width, revert);\n    height: var(--ui-dialog-height, revert);\n  }\n\n  dialog:open {\n    animation: 250ms cubic-bezier(0.2, 0, 0, 1) show-dialog;\n    display: flex;\n    flex-direction: column;\n  }\n\n  /* Positioning for non-modal dialogs */\n  dialog.non-modal {\n    position: fixed;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    margin: 0;\n  }\n\n  dialog.non-modal:open {\n    /* Override the animation transform for non-modal dialogs to account for centering */\n    animation: 250ms cubic-bezier(0.2, 0, 0, 1) show-non-modal-dialog;\n  }\n\n  dialog:open::backdrop {\n    animation: 250ms cubic-bezier(0.2, 0, 0, 1) show-backdrop;\n  }\n\n  .container {\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    overflow: hidden;\n  }\n\n  .icon {\n    display: none;\n  }\n\n  .icon.with-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-bottom: 16px;\n  }\n\n  .icon ::slotted(*) {\n    color: var(--md-sys-color-secondary);\n    fill: var(--md-sys-color-secondary);\n    width: 24px;\n    height: 24px;\n  }\n\n  .icon.destructive ::slotted(*) {\n    color: var(--md-sys-color-error);\n    fill: var(--md-sys-color-error);\n  }\n\n  .title {\n    display: none;\n    color: var(--md-sys-color-on-surface);\n    font-family: var(--md-sys-typescale-headline-small-font);\n    font-weight: var(--md-sys-typescale-headline-small-weight);\n    font-size: var(--md-sys-typescale-headline-small-size);\n    letter-spacing: var(--md-sys-typescale-headline-small-tracking);\n    line-height: var(--md-sys-typescale-headline-small-height);\n    margin: 0;\n    padding: 0;\n    text-align: center;\n  }\n\n  .title.with-title {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-bottom: 16px;\n  }\n\n  .content {\n    overflow: auto;\n    font-family: var(--md-sys-typescale-body-medium-font);\n    font-weight: var(--md-sys-typescale-body-medium-weight);\n    font-size: var(--md-sys-typescale-body-medium-size);\n    letter-spacing: var(--md-sys-typescale-body-medium-tracking);\n    line-height: var(--md-sys-typescale-body-medium-height);\n  }\n\n  .buttons {\n    display: none;\n    display: flex;\n    align-items: center;\n    justify-content: end;\n  }\n\n  .buttons.with-buttons {\n    margin-top: 24px;\n  }\n\n  .buttons ::slotted(:not(:last-child)) {\n    margin-right: 12px;\n  }\n\n  .content ::slotted(*) {\n    background-color: var(--md-sys-color-surface-container-high);\n  }\n\n  @keyframes show-dialog {\n    from {\n      transform: translateY(-110%) scaleY(0);\n    }\n    to {\n      transform: translateY(0%) scaleY(1);\n    }\n  }\n\n  @keyframes show-non-modal-dialog {\n    from {\n      transform: translate(-50%, -50%) translateY(-110%) scaleY(0);\n    }\n    to {\n      transform: translate(-50%, -50%) translateY(0%) scaleY(1);\n    }\n  }\n\n  @keyframes show-backdrop {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n\n  /* Destructive button styling for dangerous actions */\n  .internal-button.destructive {\n    --_background-color: var(--md-sys-color-error);\n    --_color: var(--md-sys-color-on-error);\n\n    /* Override ripple colors for better interaction feedback */\n    --md-ripple-hover-state-layer-color: var(--md-sys-color-on-error);\n    --md-ripple-focus-state-layer-color: var(--md-sys-color-on-error);\n    --md-ripple-pressed-state-layer-color: var(--md-sys-color-on-error);\n  }\n`\n"]}
+{"version":3,"file":"Dialog.styles.js","sourceRoot":"","sources":["../../../../../src/md/dialog/internals/Dialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkKjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  :host {\n    display: contents;\n  }\n\n  dialog {\n    overflow: hidden;\n    /* Do not override the display value here. It will render the dialog even when hidden */\n\n    border: none;\n    border-radius: var(--md-sys-shape-corner-extra-large);\n    background-color: var(--md-sys-color-surface-container-high);\n    box-shadow: var(--md-sys-elevation-3);\n    color: var(--md-sys-color-on-surface-variant);\n    padding: 24px;\n\n    max-width: var(--ui-dialog-max-width, 90vw);\n    max-height: var(--ui-dialog-max-height, 90vh);\n    width: var(--ui-dialog-width, revert);\n    height: var(--ui-dialog-height, revert);\n  }\n\n  dialog:open {\n    animation: 250ms cubic-bezier(0.2, 0, 0, 1) show-dialog;\n    display: flex;\n    flex-direction: column;\n  }\n\n  /* Positioning for non-modal dialogs */\n  dialog.non-modal {\n    position: fixed;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    margin: 0;\n    z-index: 1000;\n  }\n\n  dialog.non-modal:open {\n    /* Override the animation transform for non-modal dialogs to account for centering */\n    animation: 250ms cubic-bezier(0.2, 0, 0, 1) show-non-modal-dialog;\n  }\n\n  dialog:open::backdrop {\n    animation: 250ms cubic-bezier(0.2, 0, 0, 1) show-backdrop;\n  }\n\n  .container {\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    overflow: hidden;\n  }\n\n  .icon {\n    display: none;\n  }\n\n  .icon.with-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-bottom: 16px;\n  }\n\n  .icon ::slotted(*) {\n    color: var(--md-sys-color-secondary);\n    fill: var(--md-sys-color-secondary);\n    width: 24px;\n    height: 24px;\n  }\n\n  .icon.destructive ::slotted(*) {\n    color: var(--md-sys-color-error);\n    fill: var(--md-sys-color-error);\n  }\n\n  .title {\n    display: none;\n    color: var(--md-sys-color-on-surface);\n    font-family: var(--md-sys-typescale-headline-small-font);\n    font-weight: var(--md-sys-typescale-headline-small-weight);\n    font-size: var(--md-sys-typescale-headline-small-size);\n    letter-spacing: var(--md-sys-typescale-headline-small-tracking);\n    line-height: var(--md-sys-typescale-headline-small-height);\n    margin: 0;\n    padding: 0;\n    text-align: center;\n  }\n\n  .title.with-title {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-bottom: 16px;\n  }\n\n  .content {\n    overflow: auto;\n    font-family: var(--md-sys-typescale-body-medium-font);\n    font-weight: var(--md-sys-typescale-body-medium-weight);\n    font-size: var(--md-sys-typescale-body-medium-size);\n    letter-spacing: var(--md-sys-typescale-body-medium-tracking);\n    line-height: var(--md-sys-typescale-body-medium-height);\n  }\n\n  .buttons {\n    display: none;\n    display: flex;\n    align-items: center;\n    justify-content: end;\n  }\n\n  .buttons.with-buttons {\n    margin-top: 24px;\n  }\n\n  .buttons ::slotted(:not(:last-child)) {\n    margin-right: 12px;\n  }\n\n  .content ::slotted(*) {\n    background-color: var(--md-sys-color-surface-container-high);\n  }\n\n  @keyframes show-dialog {\n    from {\n      transform: translateY(-110%) scaleY(0);\n    }\n    to {\n      transform: translateY(0%) scaleY(1);\n    }\n  }\n\n  @keyframes show-non-modal-dialog {\n    from {\n      transform: translate(-50%, -50%) translateY(-110%) scaleY(0);\n    }\n    to {\n      transform: translate(-50%, -50%) translateY(0%) scaleY(1);\n    }\n  }\n\n  @keyframes show-backdrop {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n\n  /* Destructive button styling for dangerous actions */\n  .internal-button.destructive {\n    --_background-color: var(--md-sys-color-error);\n    --_color: var(--md-sys-color-on-error);\n\n    /* Override ripple colors for better interaction feedback */\n    --md-ripple-hover-state-layer-color: var(--md-sys-color-on-error);\n    --md-ripple-focus-state-layer-color: var(--md-sys-color-on-error);\n    --md-ripple-pressed-state-layer-color: var(--md-sys-color-on-error);\n  }\n`\n"]}