@universal-material/web 3.7.2 → 3.8.0

package/datepicker/datepicker.d.ts

@@ -1,5 +1,54 @@
-import { LitElement } from 'lit';
-export declare class UmDatepicker extends LitElement {
+import { CSSResultGroup } from '@lit/reactive-element/css-tag';
+import { HTMLTemplateResult } from 'lit';
+import { UmNativeTextFieldWrapper } from '../shared/char-count-text-field/native-text-field-wrapper.js';
+import { DatepickerFormat } from './format.js';
+import '../calendar/calendar.js';
+import '../menu/menu.js';
+export declare class UmDatepicker extends UmNativeTextFieldWrapper {
+    #private;
+    static styles: CSSResultGroup;
+    /**
+     * The BCP 47 locale tag forwarded to the underlying calendar and used for
+     * non-editable display formatting.
+     * When `null`, the calendar falls back to the browser's `navigator.language`.
+     */
+    locale: string | null;
+    /**
+     * Format used when displaying the value while the field is not editable.
+     * Accepts the named presets `'short'`, `'medium'`, `'long'`, `'full'`,
+     * the literal `'iso'` (keeps the ISO `YYYY-MM-DD` value), or an
+     * `Intl.DateTimeFormatOptions` object for custom formatting.
+     * In editable mode the input uses the browser's native `type="date"` mask
+     * and ignores this property.
+     */
+    format: DatepickerFormat;
+    /**
+     * Whether the input accepts manually-typed dates. When `false` (default),
+     * the field is read-only and clicking anywhere opens the calendar popover.
+     * When `true`, the input uses native `type="date"` and accepts keyboard input;
+     * the calendar popover is opened via the trailing icon.
+     */
+    editable: boolean;
+    /**
+     * Whether the input is read-only. When set, manual typing is disabled even
+     * if `editable` is `true`; the calendar popover remains available.
+     */
+    readOnly: boolean;
+    /**
+     * The positioning strategy used by the calendar popover. Use `'fixed'`
+     * when the datepicker is rendered inside a clipped/scrollable container.
+     */
+    menuPositioning: 'relative' | 'fixed';
+    input: HTMLInputElement;
+    private _menu;
+    private _calendar;
+    private _trailingSlot;
+    protected renderControl(): HTMLTemplateResult;
+    protected renderDefaultTrailingIcon(): import("lit-html").TemplateResult<2>;
+    protected renderAfterContent(): import("lit-html").TemplateResult<1>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected _handleInput(): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/datepicker/datepicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"datepicker.d.ts","sourceRoot":"","sources":["../../src/datepicker/datepicker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAGjC,qBACa,YAAa,SAAQ,UAAU;CAE3C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,YAAY,CAAC;KAC9B;CACF"}
+{"version":3,"file":"datepicker.d.ts","sourceRoot":"","sources":["../../src/datepicker/datepicker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAE/D,OAAO,EAAQ,kBAAkB,EAAgB,MAAM,KAAK,CAAC;AAM7D,OAAO,EAAE,wBAAwB,EAAE,MAAM,8DAA8D,CAAC;AAKxG,OAAO,EAAE,gBAAgB,EAAiB,MAAM,aAAa,CAAC;AAE9D,OAAO,yBAAyB,CAAC;AACjC,OAAO,iBAAiB,CAAC;AAIzB,qBACa,YAAa,SAAQ,wBAAwB;;IACxD,OAAgB,MAAM,EAAE,cAAc,CAAqD;IAE3F;;;;OAIG;IACS,MAAM,EAAE,MAAM,GAAG,IAAI,CAAQ;IAEzC;;;;;;;OAOG;IACS,MAAM,EAAE,gBAAgB,CAAW;IAE/C;;;;;OAKG;IACyC,QAAQ,UAAS;IAE7D;;;OAGG;IACyC,QAAQ,UAAS;IAE7D;;;OAGG;IACyD,eAAe,EAAE,UAAU,GAAG,OAAO,CAAc;IAE/F,KAAK,EAAG,gBAAgB,CAAC;IAClB,OAAO,CAAC,KAAK,CAAU;IACnB,OAAO,CAAC,SAAS,CAAc;IAC3B,OAAO,CAAC,aAAa,CAAmB;cAEpD,aAAa,IAAI,kBAAkB;cAmCnC,yBAAyB;cAOzB,kBAAkB;IAkB5B,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;cAKlB,YAAY,IAAI,IAAI;CAmDxC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,YAAY,CAAC;KAC9B;CACF"}

package/datepicker/datepicker.js

@@ -1,8 +1,190 @@
 import { __decorate } from "tslib";
-import { LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
-let UmDatepicker = class UmDatepicker extends LitElement {
+import { html, nothing, svg } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { live } from 'lit/directives/live.js';
+import { UmNativeTextFieldWrapper } from '../shared/char-count-text-field/native-text-field-wrapper.js';
+import { UmTextFieldBase } from '../shared/text-field-base/text-field-base.js';
+import { styles as textFieldStyles } from '../text-field/text-field.styles.js';
+import { styles } from './datepicker.styles.js';
+import { formatIsoDate } from './format.js';
+import '../calendar/calendar.js';
+import '../menu/menu.js';
+const ISO_DATE = /^\d{4}-\d{2}-\d{2}$/;
+let UmDatepicker = class UmDatepicker extends UmNativeTextFieldWrapper {
+    constructor() {
+        super(...arguments);
+        /**
+         * The BCP 47 locale tag forwarded to the underlying calendar and used for
+         * non-editable display formatting.
+         * When `null`, the calendar falls back to the browser's `navigator.language`.
+         */
+        this.locale = null;
+        /**
+         * Format used when displaying the value while the field is not editable.
+         * Accepts the named presets `'short'`, `'medium'`, `'long'`, `'full'`,
+         * the literal `'iso'` (keeps the ISO `YYYY-MM-DD` value), or an
+         * `Intl.DateTimeFormatOptions` object for custom formatting.
+         * In editable mode the input uses the browser's native `type="date"` mask
+         * and ignores this property.
+         */
+        this.format = 'short';
+        /**
+         * Whether the input accepts manually-typed dates. When `false` (default),
+         * the field is read-only and clicking anywhere opens the calendar popover.
+         * When `true`, the input uses native `type="date"` and accepts keyboard input;
+         * the calendar popover is opened via the trailing icon.
+         */
+        this.editable = false;
+        /**
+         * Whether the input is read-only. When set, manual typing is disabled even
+         * if `editable` is `true`; the calendar popover remains available.
+         */
+        this.readOnly = false;
+        /**
+         * The positioning strategy used by the calendar popover. Use `'fixed'`
+         * when the datepicker is rendered inside a clipped/scrollable container.
+         */
+        this.menuPositioning = 'relative';
+        this.#handleKeyDown = (e) => {
+            if (e.key === 'ArrowDown' && !this._menu.open) {
+                e.preventDefault();
+                this._menu.show();
+                return;
+            }
+            if (e.key === 'Escape' && this._menu.open) {
+                e.preventDefault();
+                this._menu.close();
+                return;
+            }
+            this._handleKeyDown(e);
+        };
+        this.#handleCalendarInput = (e) => {
+            e.stopPropagation();
+            const value = e.target.value;
+            this.value = value;
+            this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
+            this.dispatchEvent(new Event('change', { bubbles: true }));
+            this._menu.close();
+        };
+        this.#stopPropagation = (e) => {
+            e.stopPropagation();
+        };
+        this.#toggleMenu = () => {
+            if (this.disabled) {
+                return;
+            }
+            this._menu.toggle();
+        };
+    }
+    static { this.styles = [UmTextFieldBase.styles, textFieldStyles, styles]; }
+    renderControl() {
+        const displayValue = this.editable
+            ? this._value
+            : formatIsoDate(this._value, this.format, this.locale);
+        return html `
+      ${this.editable
+            ? nothing
+            : html `
+          <button
+            class="trigger"
+            type="button"
+            aria-haspopup="dialog"
+            ?disabled=${this.disabled}
+            @click=${this.#toggleMenu}></button>
+        `}
+      <div class="input">
+        <input
+          type=${this.editable ? 'date' : 'text'}
+          part="input"
+          id=${this.id || nothing}
+          aria-labelledby="label"
+          aria-describedby="supporting-text"
+          aria-haspopup="dialog"
+          tabindex=${this.editable ? nothing : -1}
+          ?readonly=${this.readOnly || !this.editable}
+          ?disabled=${this.disabled}
+          placeholder=${this.placeholder ?? nothing}
+          .value=${live(displayValue)}
+          @input=${this._handleInput}
+          @keydown=${this.#handleKeyDown} />
+      </div>
+    `;
+    }
+    renderDefaultTrailingIcon() {
+        return svg `
+      <svg xmlns="http://www.w3.org/2000/svg" height="1.25em" viewBox="0 -960 960 960" width="1.25em" fill="currentColor">
+        <path d="M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Z"/>
+      </svg>`;
+    }
+    renderAfterContent() {
+        return html `
+      <u-menu
+        positioning=${this.menuPositioning}
+        autoclose="outside"
+        anchor-corner="end-start"
+        direction="down-start"
+        allow-overflow
+        manualFocus
+        @click=${this.#stopPropagation}>
+        <u-calendar
+          .value=${this._value}
+          .locale=${this.locale}
+          @input=${this.#handleCalendarInput}></u-calendar>
+      </u-menu>
+    `;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        void this.#attach();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._trailingSlot?.removeEventListener('click', this.#toggleMenu);
+    }
+    _handleInput() {
+        super._handleInput();
+        if (ISO_DATE.test(this._value)) {
+            this._calendar.value = this._value;
+        }
+        this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
+    }
+    #handleKeyDown;
+    #handleCalendarInput;
+    #stopPropagation;
+    #toggleMenu;
+    async #attach() {
+        await this.updateComplete;
+        this._menu.anchorElement = this._container;
+        this._trailingSlot.addEventListener('click', this.#toggleMenu);
+    }
 };
+__decorate([
+    property()
+], UmDatepicker.prototype, "locale", void 0);
+__decorate([
+    property()
+], UmDatepicker.prototype, "format", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], UmDatepicker.prototype, "editable", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], UmDatepicker.prototype, "readOnly", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'menu-positioning' })
+], UmDatepicker.prototype, "menuPositioning", void 0);
+__decorate([
+    query('input')
+], UmDatepicker.prototype, "input", void 0);
+__decorate([
+    query('u-menu', true)
+], UmDatepicker.prototype, "_menu", void 0);
+__decorate([
+    query('u-calendar', true)
+], UmDatepicker.prototype, "_calendar", void 0);
+__decorate([
+    query('.trailing-icon', true)
+], UmDatepicker.prototype, "_trailingSlot", void 0);
 UmDatepicker = __decorate([
     customElement('u-datepicker')
 ], UmDatepicker);

package/datepicker/datepicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"datepicker.js","sourceRoot":"","sources":["../../src/datepicker/datepicker.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAG3C,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;CAE3C,CAAA;AAFY,YAAY;IADxB,aAAa,CAAC,cAAc,CAAC;GACjB,YAAY,CAExB","sourcesContent":["import { LitElement } from 'lit';\nimport { customElement } from 'lit/decorators.js';\n\n@customElement('u-datepicker')\nexport class UmDatepicker extends LitElement {\n\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-datepicker': UmDatepicker;\n  }\n}\n"]}
+{"version":3,"file":"datepicker.js","sourceRoot":"","sources":["../../src/datepicker/datepicker.ts"],"names":[],"mappings":"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","sourcesContent":["import { CSSResultGroup } from '@lit/reactive-element/css-tag';\n\nimport { html, HTMLTemplateResult, nothing, svg } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { live } from 'lit/directives/live.js';\n\nimport { UmCalendar } from '../calendar/calendar.js';\nimport { UmMenu } from '../menu/menu.js';\nimport { UmNativeTextFieldWrapper } from '../shared/char-count-text-field/native-text-field-wrapper.js';\nimport { UmTextFieldBase } from '../shared/text-field-base/text-field-base.js';\n\nimport { styles as textFieldStyles } from '../text-field/text-field.styles.js';\nimport { styles } from './datepicker.styles.js';\nimport { DatepickerFormat, formatIsoDate } from './format.js';\n\nimport '../calendar/calendar.js';\nimport '../menu/menu.js';\n\nconst ISO_DATE = /^\\d{4}-\\d{2}-\\d{2}$/;\n\n@customElement('u-datepicker')\nexport class UmDatepicker extends UmNativeTextFieldWrapper {\n  static override styles: CSSResultGroup = [UmTextFieldBase.styles, textFieldStyles, styles];\n\n  /**\n   * The BCP 47 locale tag forwarded to the underlying calendar and used for\n   * non-editable display formatting.\n   * When `null`, the calendar falls back to the browser's `navigator.language`.\n   */\n  @property() locale: string | null = null;\n\n  /**\n   * Format used when displaying the value while the field is not editable.\n   * Accepts the named presets `'short'`, `'medium'`, `'long'`, `'full'`,\n   * the literal `'iso'` (keeps the ISO `YYYY-MM-DD` value), or an\n   * `Intl.DateTimeFormatOptions` object for custom formatting.\n   * In editable mode the input uses the browser's native `type=\"date\"` mask\n   * and ignores this property.\n   */\n  @property() format: DatepickerFormat = 'short';\n\n  /**\n   * Whether the input accepts manually-typed dates. When `false` (default),\n   * the field is read-only and clicking anywhere opens the calendar popover.\n   * When `true`, the input uses native `type=\"date\"` and accepts keyboard input;\n   * the calendar popover is opened via the trailing icon.\n   */\n  @property({ type: Boolean, reflect: true }) editable = false;\n\n  /**\n   * Whether the input is read-only. When set, manual typing is disabled even\n   * if `editable` is `true`; the calendar popover remains available.\n   */\n  @property({ type: Boolean, reflect: true }) readOnly = false;\n\n  /**\n   * The positioning strategy used by the calendar popover. Use `'fixed'`\n   * when the datepicker is rendered inside a clipped/scrollable container.\n   */\n  @property({ reflect: true, attribute: 'menu-positioning' }) menuPositioning: 'relative' | 'fixed' = 'relative';\n\n  @query('input') input!: HTMLInputElement;\n  @query('u-menu', true) private _menu!: UmMenu;\n  @query('u-calendar', true) private _calendar!: UmCalendar;\n  @query('.trailing-icon', true) private _trailingSlot!: HTMLSlotElement;\n\n  protected override renderControl(): HTMLTemplateResult {\n    const displayValue = this.editable\n      ? this._value\n      : formatIsoDate(this._value, this.format, this.locale);\n\n    return html`\n      ${this.editable\n        ? nothing\n        : html`\n          <button\n            class=\"trigger\"\n            type=\"button\"\n            aria-haspopup=\"dialog\"\n            ?disabled=${this.disabled}\n            @click=${this.#toggleMenu}></button>\n        `}\n      <div class=\"input\">\n        <input\n          type=${this.editable ? 'date' : 'text'}\n          part=\"input\"\n          id=${this.id || nothing}\n          aria-labelledby=\"label\"\n          aria-describedby=\"supporting-text\"\n          aria-haspopup=\"dialog\"\n          tabindex=${this.editable ? nothing : -1}\n          ?readonly=${this.readOnly || !this.editable}\n          ?disabled=${this.disabled}\n          placeholder=${this.placeholder ?? nothing}\n          .value=${live(displayValue)}\n          @input=${this._handleInput}\n          @keydown=${this.#handleKeyDown} />\n      </div>\n    `;\n  }\n\n  protected override renderDefaultTrailingIcon() {\n    return svg`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"1.25em\" viewBox=\"0 -960 960 960\" width=\"1.25em\" fill=\"currentColor\">\n        <path d=\"M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Z\"/>\n      </svg>`;\n  }\n\n  protected override renderAfterContent() {\n    return html`\n      <u-menu\n        positioning=${this.menuPositioning}\n        autoclose=\"outside\"\n        anchor-corner=\"end-start\"\n        direction=\"down-start\"\n        allow-overflow\n        manualFocus\n        @click=${this.#stopPropagation}>\n        <u-calendar\n          .value=${this._value}\n          .locale=${this.locale}\n          @input=${this.#handleCalendarInput}></u-calendar>\n      </u-menu>\n    `;\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    void this.#attach();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._trailingSlot?.removeEventListener('click', this.#toggleMenu);\n  }\n\n  protected override _handleInput(): void {\n    super._handleInput();\n\n    if (ISO_DATE.test(this._value)) {\n      this._calendar.value = this._value;\n    }\n\n    this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));\n  }\n\n  #handleKeyDown = (e: KeyboardEvent): void => {\n    if (e.key === 'ArrowDown' && !this._menu.open) {\n      e.preventDefault();\n      this._menu.show();\n      return;\n    }\n\n    if (e.key === 'Escape' && this._menu.open) {\n      e.preventDefault();\n      this._menu.close();\n      return;\n    }\n\n    this._handleKeyDown(e);\n  };\n\n  #handleCalendarInput = (e: Event): void => {\n    e.stopPropagation();\n    const value = (e.target as UmCalendar).value;\n    this.value = value;\n    this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));\n    this.dispatchEvent(new Event('change', { bubbles: true }));\n    this._menu.close();\n  };\n\n  #stopPropagation = (e: Event): void => {\n    e.stopPropagation();\n  };\n\n  #toggleMenu = (): void => {\n    if (this.disabled) {\n      return;\n    }\n    this._menu.toggle();\n  };\n\n  async #attach(): Promise<void> {\n    await this.updateComplete;\n    this._menu.anchorElement = this._container;\n    this._trailingSlot.addEventListener('click', this.#toggleMenu);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-datepicker': UmDatepicker;\n  }\n}\n"]}

package/datepicker/format.d.ts

@@ -0,0 +1,19 @@
+export type DatepickerFormat = 'short' | 'medium' | 'long' | 'full' | 'iso' | Intl.DateTimeFormatOptions;
+/**
+ * Parses an ISO `YYYY-MM-DD` string into a `Date` at local midnight,
+ * sidestepping the UTC-vs-local parsing ambiguity of the `Date` constructor
+ * when given a string.
+ */
+export declare function parseIsoDate(iso: string): Date | null;
+/**
+ * Formats an ISO date string (`YYYY-MM-DD`) for display, following the
+ * datepicker `format` property. Non-ISO inputs are passed through
+ * unchanged so partially-typed values aren't mangled.
+ */
+export declare function formatIsoDate(value: string, format: DatepickerFormat, locale: string | null): string;
+/**
+ * Formats a range value (`YYYY-MM-DD - YYYY-MM-DD`) by formatting each end
+ * with `formatIsoDate` and rejoining them with the same separator.
+ */
+export declare function formatIsoDateRange(value: string, format: DatepickerFormat, locale: string | null): string;
+//# sourceMappingURL=format.d.ts.map

package/datepicker/format.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"format.d.ts","sourceRoot":"","sources":["../../src/datepicker/format.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GACxB,OAAO,GACP,QAAQ,GACR,MAAM,GACN,MAAM,GACN,KAAK,GACL,IAAI,CAAC,qBAAqB,CAAC;AAI/B;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAOrD;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAC3B,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,gBAAgB,EACxB,MAAM,EAAE,MAAM,GAAG,IAAI,GACpB,MAAM,CAgBR;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,gBAAgB,EACxB,MAAM,EAAE,MAAM,GAAG,IAAI,GACpB,MAAM,CAYR"}

package/datepicker/format.js

@@ -0,0 +1,47 @@
+const ISO_DATE = /^\d{4}-\d{2}-\d{2}$/;
+/**
+ * Parses an ISO `YYYY-MM-DD` string into a `Date` at local midnight,
+ * sidestepping the UTC-vs-local parsing ambiguity of the `Date` constructor
+ * when given a string.
+ */
+export function parseIsoDate(iso) {
+    if (!ISO_DATE.test(iso)) {
+        return null;
+    }
+    const [year, month, day] = iso.split('-').map(Number);
+    return new Date(year, month - 1, day);
+}
+/**
+ * Formats an ISO date string (`YYYY-MM-DD`) for display, following the
+ * datepicker `format` property. Non-ISO inputs are passed through
+ * unchanged so partially-typed values aren't mangled.
+ */
+export function formatIsoDate(value, format, locale) {
+    if (!value || format === 'iso') {
+        return value;
+    }
+    const date = parseIsoDate(value);
+    if (!date) {
+        return value;
+    }
+    const options = typeof format === 'string'
+        ? { dateStyle: format }
+        : format;
+    return new Intl.DateTimeFormat(locale ?? undefined, options).format(date);
+}
+/**
+ * Formats a range value (`YYYY-MM-DD - YYYY-MM-DD`) by formatting each end
+ * with `formatIsoDate` and rejoining them with the same separator.
+ */
+export function formatIsoDateRange(value, format, locale) {
+    if (!value || format === 'iso') {
+        return value;
+    }
+    const parts = value.split(' - ');
+    if (parts.length !== 2) {
+        return value;
+    }
+    const [start, end] = parts;
+    return `${formatIsoDate(start, format, locale)} - ${formatIsoDate(end, format, locale)}`;
+}
+//# sourceMappingURL=format.js.map

package/datepicker/format.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"format.js","sourceRoot":"","sources":["../../src/datepicker/format.ts"],"names":[],"mappings":"AAQA,MAAM,QAAQ,GAAG,qBAAqB,CAAC;AAEvC;;;;GAIG;AACH,MAAM,UAAU,YAAY,CAAC,GAAW;IACtC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;QACxB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,CAAC,GAAG,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;IACtD,OAAO,IAAI,IAAI,CAAC,IAAI,EAAE,KAAK,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC;AACxC,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,aAAa,CAC3B,KAAa,EACb,MAAwB,EACxB,MAAqB;IAErB,IAAI,CAAC,KAAK,IAAI,MAAM,KAAK,KAAK,EAAE,CAAC;QAC/B,OAAO,KAAK,CAAC;IACf,CAAC;IAED,MAAM,IAAI,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IACjC,IAAI,CAAC,IAAI,EAAE,CAAC;QACV,OAAO,KAAK,CAAC;IACf,CAAC;IAED,MAAM,OAAO,GACX,OAAO,MAAM,KAAK,QAAQ;QACxB,CAAC,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE;QACvB,CAAC,CAAC,MAAM,CAAC;IAEb,OAAO,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,IAAI,SAAS,EAAE,OAAO,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;AAC5E,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,kBAAkB,CAChC,KAAa,EACb,MAAwB,EACxB,MAAqB;IAErB,IAAI,CAAC,KAAK,IAAI,MAAM,KAAK,KAAK,EAAE,CAAC;QAC/B,OAAO,KAAK,CAAC;IACf,CAAC;IAED,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACjC,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACvB,OAAO,KAAK,CAAC;IACf,CAAC;IAED,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC,GAAG,KAAK,CAAC;IAC3B,OAAO,GAAG,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,MAAM,aAAa,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,CAAC;AAC3F,CAAC","sourcesContent":["export type DatepickerFormat =\n  | 'short'\n  | 'medium'\n  | 'long'\n  | 'full'\n  | 'iso'\n  | Intl.DateTimeFormatOptions;\n\nconst ISO_DATE = /^\\d{4}-\\d{2}-\\d{2}$/;\n\n/**\n * Parses an ISO `YYYY-MM-DD` string into a `Date` at local midnight,\n * sidestepping the UTC-vs-local parsing ambiguity of the `Date` constructor\n * when given a string.\n */\nexport function parseIsoDate(iso: string): Date | null {\n  if (!ISO_DATE.test(iso)) {\n    return null;\n  }\n\n  const [year, month, day] = iso.split('-').map(Number);\n  return new Date(year, month - 1, day);\n}\n\n/**\n * Formats an ISO date string (`YYYY-MM-DD`) for display, following the\n * datepicker `format` property. Non-ISO inputs are passed through\n * unchanged so partially-typed values aren't mangled.\n */\nexport function formatIsoDate(\n  value: string,\n  format: DatepickerFormat,\n  locale: string | null,\n): string {\n  if (!value || format === 'iso') {\n    return value;\n  }\n\n  const date = parseIsoDate(value);\n  if (!date) {\n    return value;\n  }\n\n  const options: Intl.DateTimeFormatOptions =\n    typeof format === 'string'\n      ? { dateStyle: format }\n      : format;\n\n  return new Intl.DateTimeFormat(locale ?? undefined, options).format(date);\n}\n\n/**\n * Formats a range value (`YYYY-MM-DD - YYYY-MM-DD`) by formatting each end\n * with `formatIsoDate` and rejoining them with the same separator.\n */\nexport function formatIsoDateRange(\n  value: string,\n  format: DatepickerFormat,\n  locale: string | null,\n): string {\n  if (!value || format === 'iso') {\n    return value;\n  }\n\n  const parts = value.split(' - ');\n  if (parts.length !== 2) {\n    return value;\n  }\n\n  const [start, end] = parts;\n  return `${formatIsoDate(start, format, locale)} - ${formatIsoDate(end, format, locale)}`;\n}\n"]}

package/datepicker/range-datepicker.d.ts

@@ -0,0 +1,56 @@
+import { CSSResultGroup } from '@lit/reactive-element/css-tag';
+import { HTMLTemplateResult } from 'lit';
+import { UmNativeTextFieldWrapper } from '../shared/char-count-text-field/native-text-field-wrapper.js';
+import { DatepickerFormat } from './format.js';
+import '../calendar/range-calendar.js';
+import '../menu/menu.js';
+export declare class UmRangeDatepicker extends UmNativeTextFieldWrapper {
+    #private;
+    static styles: CSSResultGroup;
+    /**
+     * The BCP 47 locale tag forwarded to the underlying range calendar and used
+     * for non-editable display formatting.
+     * When `null`, the calendar falls back to the browser's `navigator.language`.
+     */
+    locale: string | null;
+    /**
+     * Format used when displaying the value while the field is not editable.
+     * Accepts `'short'`, `'medium'`, `'long'`, `'full'`, `'iso'`, or an
+     * `Intl.DateTimeFormatOptions` object. Each end of the range is formatted
+     * independently and joined with ` - `.
+     */
+    format: DatepickerFormat;
+    /**
+     * Whether the input accepts manually-typed ranges. When `false` (default),
+     * the field is read-only and clicking anywhere opens the calendar popover.
+     * When `true`, the input accepts text in the `YYYY-MM-DD - YYYY-MM-DD` format;
+     * the calendar popover is opened via the trailing icon.
+     */
+    editable: boolean;
+    /**
+     * Whether the input is read-only. When set, manual typing is disabled even
+     * if `editable` is `true`; the calendar popover remains available.
+     */
+    readOnly: boolean;
+    /**
+     * The positioning strategy used by the calendar popover. Use `'fixed'`
+     * when the datepicker is rendered inside a clipped/scrollable container.
+     */
+    menuPositioning: 'relative' | 'fixed';
+    input: HTMLInputElement;
+    private _menu;
+    private _calendar;
+    private _trailingSlot;
+    protected renderControl(): HTMLTemplateResult;
+    protected renderDefaultTrailingIcon(): import("lit-html").TemplateResult<2>;
+    protected renderAfterContent(): import("lit-html").TemplateResult<1>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected _handleInput(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-range-datepicker': UmRangeDatepicker;
+    }
+}
+//# sourceMappingURL=range-datepicker.d.ts.map

package/datepicker/range-datepicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"range-datepicker.d.ts","sourceRoot":"","sources":["../../src/datepicker/range-datepicker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAE/D,OAAO,EAAQ,kBAAkB,EAAgB,MAAM,KAAK,CAAC;AAM7D,OAAO,EAAE,wBAAwB,EAAE,MAAM,8DAA8D,CAAC;AAKxG,OAAO,EAAE,gBAAgB,EAAsB,MAAM,aAAa,CAAC;AAEnE,OAAO,+BAA+B,CAAC;AACvC,OAAO,iBAAiB,CAAC;AAIzB,qBACa,iBAAkB,SAAQ,wBAAwB;;IAC7D,OAAgB,MAAM,EAAE,cAAc,CAAqD;IAE3F;;;;OAIG;IACS,MAAM,EAAE,MAAM,GAAG,IAAI,CAAQ;IAEzC;;;;;OAKG;IACS,MAAM,EAAE,gBAAgB,CAAW;IAE/C;;;;;OAKG;IACyC,QAAQ,UAAS;IAE7D;;;OAGG;IACyC,QAAQ,UAAS;IAE7D;;;OAGG;IACyD,eAAe,EAAE,UAAU,GAAG,OAAO,CAAc;IAE/F,KAAK,EAAG,gBAAgB,CAAC;IAClB,OAAO,CAAC,KAAK,CAAU;IACb,OAAO,CAAC,SAAS,CAAmB;IACtC,OAAO,CAAC,aAAa,CAAmB;cAEpD,aAAa,IAAI,kBAAkB;cAmCnC,yBAAyB;cAOzB,kBAAkB;IAmB5B,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;cAKlB,YAAY,IAAI,IAAI;CA4DxC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,iBAAiB,CAAC;KACzC;CACF"}

package/datepicker/range-datepicker.js

@@ -0,0 +1,198 @@
+import { __decorate } from "tslib";
+import { html, nothing, svg } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { live } from 'lit/directives/live.js';
+import { UmNativeTextFieldWrapper } from '../shared/char-count-text-field/native-text-field-wrapper.js';
+import { UmTextFieldBase } from '../shared/text-field-base/text-field-base.js';
+import { styles as textFieldStyles } from '../text-field/text-field.styles.js';
+import { styles } from './datepicker.styles.js';
+import { formatIsoDateRange } from './format.js';
+import '../calendar/range-calendar.js';
+import '../menu/menu.js';
+const ISO_DATE_RANGE = /^\d{4}-\d{2}-\d{2} - \d{4}-\d{2}-\d{2}$/;
+let UmRangeDatepicker = class UmRangeDatepicker extends UmNativeTextFieldWrapper {
+    constructor() {
+        super(...arguments);
+        /**
+         * The BCP 47 locale tag forwarded to the underlying range calendar and used
+         * for non-editable display formatting.
+         * When `null`, the calendar falls back to the browser's `navigator.language`.
+         */
+        this.locale = null;
+        /**
+         * Format used when displaying the value while the field is not editable.
+         * Accepts `'short'`, `'medium'`, `'long'`, `'full'`, `'iso'`, or an
+         * `Intl.DateTimeFormatOptions` object. Each end of the range is formatted
+         * independently and joined with ` - `.
+         */
+        this.format = 'short';
+        /**
+         * Whether the input accepts manually-typed ranges. When `false` (default),
+         * the field is read-only and clicking anywhere opens the calendar popover.
+         * When `true`, the input accepts text in the `YYYY-MM-DD - YYYY-MM-DD` format;
+         * the calendar popover is opened via the trailing icon.
+         */
+        this.editable = false;
+        /**
+         * Whether the input is read-only. When set, manual typing is disabled even
+         * if `editable` is `true`; the calendar popover remains available.
+         */
+        this.readOnly = false;
+        /**
+         * The positioning strategy used by the calendar popover. Use `'fixed'`
+         * when the datepicker is rendered inside a clipped/scrollable container.
+         */
+        this.menuPositioning = 'relative';
+        this.#handleKeyDown = (e) => {
+            if (e.key === 'ArrowDown' && !this._menu.open) {
+                e.preventDefault();
+                this._menu.show();
+                return;
+            }
+            if (e.key === 'Escape' && this._menu.open) {
+                e.preventDefault();
+                this._menu.close();
+                return;
+            }
+            this._handleKeyDown(e);
+        };
+        this.#handleCalendarInput = (e) => {
+            e.stopPropagation();
+            const value = e.target.value ?? '';
+            this.value = value;
+            this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
+        };
+        this.#handleCalendarChange = (e) => {
+            e.stopPropagation();
+            if (!ISO_DATE_RANGE.test(this._value)) {
+                return;
+            }
+            this.dispatchEvent(new Event('change', { bubbles: true }));
+            this._menu.close();
+        };
+        this.#stopPropagation = (e) => {
+            e.stopPropagation();
+        };
+        this.#toggleMenu = () => {
+            if (this.disabled) {
+                return;
+            }
+            this._menu.toggle();
+        };
+    }
+    static { this.styles = [UmTextFieldBase.styles, textFieldStyles, styles]; }
+    renderControl() {
+        const displayValue = this.editable
+            ? this._value
+            : formatIsoDateRange(this._value, this.format, this.locale);
+        return html `
+      ${this.editable
+            ? nothing
+            : html `
+          <button
+            class="trigger"
+            type="button"
+            aria-haspopup="dialog"
+            ?disabled=${this.disabled}
+            @click=${this.#toggleMenu}></button>
+        `}
+      <div class="input">
+        <input
+          type="text"
+          part="input"
+          id=${this.id || nothing}
+          aria-labelledby="label"
+          aria-describedby="supporting-text"
+          aria-haspopup="dialog"
+          tabindex=${this.editable ? nothing : -1}
+          ?readonly=${this.readOnly || !this.editable}
+          ?disabled=${this.disabled}
+          placeholder=${this.placeholder ?? nothing}
+          .value=${live(displayValue)}
+          @input=${this._handleInput}
+          @keydown=${this.#handleKeyDown} />
+      </div>
+    `;
+    }
+    renderDefaultTrailingIcon() {
+        return svg `
+      <svg xmlns="http://www.w3.org/2000/svg" height="1.25em" viewBox="0 -960 960 960" width="1.25em" fill="currentColor">
+        <path d="M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Z"/>
+      </svg>`;
+    }
+    renderAfterContent() {
+        return html `
+      <u-menu
+        positioning=${this.menuPositioning}
+        autoclose="outside"
+        anchor-corner="end-start"
+        direction="down-start"
+        allow-overflow
+        manualFocus
+        @click=${this.#stopPropagation}>
+        <u-range-calendar
+          .value=${this._value}
+          .locale=${this.locale}
+          @input=${this.#handleCalendarInput}
+          @change=${this.#handleCalendarChange}></u-range-calendar>
+      </u-menu>
+    `;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        void this.#attach();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._trailingSlot?.removeEventListener('click', this.#toggleMenu);
+    }
+    _handleInput() {
+        super._handleInput();
+        if (ISO_DATE_RANGE.test(this._value)) {
+            this._calendar.value = this._value;
+        }
+        this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
+    }
+    #handleKeyDown;
+    #handleCalendarInput;
+    #handleCalendarChange;
+    #stopPropagation;
+    #toggleMenu;
+    async #attach() {
+        await this.updateComplete;
+        this._menu.anchorElement = this._container;
+        this._trailingSlot.addEventListener('click', this.#toggleMenu);
+    }
+};
+__decorate([
+    property()
+], UmRangeDatepicker.prototype, "locale", void 0);
+__decorate([
+    property()
+], UmRangeDatepicker.prototype, "format", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], UmRangeDatepicker.prototype, "editable", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], UmRangeDatepicker.prototype, "readOnly", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'menu-positioning' })
+], UmRangeDatepicker.prototype, "menuPositioning", void 0);
+__decorate([
+    query('input')
+], UmRangeDatepicker.prototype, "input", void 0);
+__decorate([
+    query('u-menu', true)
+], UmRangeDatepicker.prototype, "_menu", void 0);
+__decorate([
+    query('u-range-calendar', true)
+], UmRangeDatepicker.prototype, "_calendar", void 0);
+__decorate([
+    query('.trailing-icon', true)
+], UmRangeDatepicker.prototype, "_trailingSlot", void 0);
+UmRangeDatepicker = __decorate([
+    customElement('u-range-datepicker')
+], UmRangeDatepicker);
+export { UmRangeDatepicker };
+//# sourceMappingURL=range-datepicker.js.map

package/datepicker/range-datepicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"range-datepicker.js","sourceRoot":"","sources":["../../src/datepicker/range-datepicker.ts"],"names":[],"mappings":"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","sourcesContent":["import { CSSResultGroup } from '@lit/reactive-element/css-tag';\n\nimport { html, HTMLTemplateResult, nothing, svg } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { live } from 'lit/directives/live.js';\n\nimport { UmRangeCalendar } from '../calendar/range-calendar.js';\nimport { UmMenu } from '../menu/menu.js';\nimport { UmNativeTextFieldWrapper } from '../shared/char-count-text-field/native-text-field-wrapper.js';\nimport { UmTextFieldBase } from '../shared/text-field-base/text-field-base.js';\n\nimport { styles as textFieldStyles } from '../text-field/text-field.styles.js';\nimport { styles } from './datepicker.styles.js';\nimport { DatepickerFormat, formatIsoDateRange } from './format.js';\n\nimport '../calendar/range-calendar.js';\nimport '../menu/menu.js';\n\nconst ISO_DATE_RANGE = /^\\d{4}-\\d{2}-\\d{2} - \\d{4}-\\d{2}-\\d{2}$/;\n\n@customElement('u-range-datepicker')\nexport class UmRangeDatepicker extends UmNativeTextFieldWrapper {\n  static override styles: CSSResultGroup = [UmTextFieldBase.styles, textFieldStyles, styles];\n\n  /**\n   * The BCP 47 locale tag forwarded to the underlying range calendar and used\n   * for non-editable display formatting.\n   * When `null`, the calendar falls back to the browser's `navigator.language`.\n   */\n  @property() locale: string | null = null;\n\n  /**\n   * Format used when displaying the value while the field is not editable.\n   * Accepts `'short'`, `'medium'`, `'long'`, `'full'`, `'iso'`, or an\n   * `Intl.DateTimeFormatOptions` object. Each end of the range is formatted\n   * independently and joined with ` - `.\n   */\n  @property() format: DatepickerFormat = 'short';\n\n  /**\n   * Whether the input accepts manually-typed ranges. When `false` (default),\n   * the field is read-only and clicking anywhere opens the calendar popover.\n   * When `true`, the input accepts text in the `YYYY-MM-DD - YYYY-MM-DD` format;\n   * the calendar popover is opened via the trailing icon.\n   */\n  @property({ type: Boolean, reflect: true }) editable = false;\n\n  /**\n   * Whether the input is read-only. When set, manual typing is disabled even\n   * if `editable` is `true`; the calendar popover remains available.\n   */\n  @property({ type: Boolean, reflect: true }) readOnly = false;\n\n  /**\n   * The positioning strategy used by the calendar popover. Use `'fixed'`\n   * when the datepicker is rendered inside a clipped/scrollable container.\n   */\n  @property({ reflect: true, attribute: 'menu-positioning' }) menuPositioning: 'relative' | 'fixed' = 'relative';\n\n  @query('input') input!: HTMLInputElement;\n  @query('u-menu', true) private _menu!: UmMenu;\n  @query('u-range-calendar', true) private _calendar!: UmRangeCalendar;\n  @query('.trailing-icon', true) private _trailingSlot!: HTMLSlotElement;\n\n  protected override renderControl(): HTMLTemplateResult {\n    const displayValue = this.editable\n      ? this._value\n      : formatIsoDateRange(this._value, this.format, this.locale);\n\n    return html`\n      ${this.editable\n        ? nothing\n        : html`\n          <button\n            class=\"trigger\"\n            type=\"button\"\n            aria-haspopup=\"dialog\"\n            ?disabled=${this.disabled}\n            @click=${this.#toggleMenu}></button>\n        `}\n      <div class=\"input\">\n        <input\n          type=\"text\"\n          part=\"input\"\n          id=${this.id || nothing}\n          aria-labelledby=\"label\"\n          aria-describedby=\"supporting-text\"\n          aria-haspopup=\"dialog\"\n          tabindex=${this.editable ? nothing : -1}\n          ?readonly=${this.readOnly || !this.editable}\n          ?disabled=${this.disabled}\n          placeholder=${this.placeholder ?? nothing}\n          .value=${live(displayValue)}\n          @input=${this._handleInput}\n          @keydown=${this.#handleKeyDown} />\n      </div>\n    `;\n  }\n\n  protected override renderDefaultTrailingIcon() {\n    return svg`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"1.25em\" viewBox=\"0 -960 960 960\" width=\"1.25em\" fill=\"currentColor\">\n        <path d=\"M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Z\"/>\n      </svg>`;\n  }\n\n  protected override renderAfterContent() {\n    return html`\n      <u-menu\n        positioning=${this.menuPositioning}\n        autoclose=\"outside\"\n        anchor-corner=\"end-start\"\n        direction=\"down-start\"\n        allow-overflow\n        manualFocus\n        @click=${this.#stopPropagation}>\n        <u-range-calendar\n          .value=${this._value}\n          .locale=${this.locale}\n          @input=${this.#handleCalendarInput}\n          @change=${this.#handleCalendarChange}></u-range-calendar>\n      </u-menu>\n    `;\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    void this.#attach();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._trailingSlot?.removeEventListener('click', this.#toggleMenu);\n  }\n\n  protected override _handleInput(): void {\n    super._handleInput();\n\n    if (ISO_DATE_RANGE.test(this._value)) {\n      this._calendar.value = this._value;\n    }\n\n    this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));\n  }\n\n  #handleKeyDown = (e: KeyboardEvent): void => {\n    if (e.key === 'ArrowDown' && !this._menu.open) {\n      e.preventDefault();\n      this._menu.show();\n      return;\n    }\n\n    if (e.key === 'Escape' && this._menu.open) {\n      e.preventDefault();\n      this._menu.close();\n      return;\n    }\n\n    this._handleKeyDown(e);\n  };\n\n  #handleCalendarInput = (e: Event): void => {\n    e.stopPropagation();\n    const value = (e.target as UmRangeCalendar).value ?? '';\n    this.value = value;\n    this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));\n  };\n\n  #handleCalendarChange = (e: Event): void => {\n    e.stopPropagation();\n\n    if (!ISO_DATE_RANGE.test(this._value)) {\n      return;\n    }\n\n    this.dispatchEvent(new Event('change', { bubbles: true }));\n    this._menu.close();\n  };\n\n  #stopPropagation = (e: Event): void => {\n    e.stopPropagation();\n  };\n\n  #toggleMenu = (): void => {\n    if (this.disabled) {\n      return;\n    }\n    this._menu.toggle();\n  };\n\n  async #attach(): Promise<void> {\n    await this.updateComplete;\n    this._menu.anchorElement = this._container;\n    this._trailingSlot.addEventListener('click', this.#toggleMenu);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-range-datepicker': UmRangeDatepicker;\n  }\n}\n"]}