@universal-material/web 3.8.0 → 3.9.0

package/datepicker/datepicker.d.ts

@@ -1,10 +1,12 @@
 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 { NativeTextFieldWrapper } from '../shared/char-count-text-field/native-text-field-wrapper.js';
 import { DatepickerFormat } from './format.js';
+import '../button/icon-button.js';
 import '../calendar/calendar.js';
 import '../menu/menu.js';
-export declare class UmDatepicker extends UmNativeTextFieldWrapper {
+import '../ripple/ripple.js';
+export declare class Datepicker extends NativeTextFieldWrapper {
     #private;
     static styles: CSSResultGroup;
     /**
@@ -44,7 +46,7 @@ export declare class UmDatepicker extends UmNativeTextFieldWrapper {
     private _calendar;
     private _trailingSlot;
     protected renderControl(): HTMLTemplateResult;
-    protected renderDefaultTrailingIcon(): import("lit-html").TemplateResult<2>;
+    protected renderDefaultTrailingIcon(): import("lit-html").TemplateResult<1> | import("lit-html").TemplateResult<2>;
     protected renderAfterContent(): import("lit-html").TemplateResult<1>;
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -52,7 +54,7 @@ export declare class UmDatepicker extends UmNativeTextFieldWrapper {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'u-datepicker': UmDatepicker;
+        'u-datepicker': Datepicker;
     }
 }
 //# sourceMappingURL=datepicker.d.ts.map

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,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"}
+{"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,sBAAsB,EAAE,MAAM,8DAA8D,CAAC;AAKtG,OAAO,EAAE,gBAAgB,EAAiB,MAAM,aAAa,CAAC;AAE9D,OAAO,0BAA0B,CAAC;AAClC,OAAO,yBAAyB,CAAC;AACjC,OAAO,iBAAiB,CAAC;AACzB,OAAO,qBAAqB,CAAC;AAI7B,qBACa,UAAW,SAAQ,sBAAsB;;IACpD,OAAgB,MAAM,EAAE,cAAc,CAAmD;IAEzF;;;;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,CAAQ;IACjB,OAAO,CAAC,SAAS,CAAY;IACzB,OAAO,CAAC,aAAa,CAAmB;cAEpD,aAAa,IAAI,kBAAkB;cAoCnC,yBAAyB;cAmBzB,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,UAAU,CAAC;KAC5B;CACF"}

package/datepicker/datepicker.js

@@ -2,15 +2,17 @@ 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 { NativeTextFieldWrapper } from '../shared/char-count-text-field/native-text-field-wrapper.js';
+import { TextFieldBase } 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 '../button/icon-button.js';
 import '../calendar/calendar.js';
 import '../menu/menu.js';
+import '../ripple/ripple.js';
 const ISO_DATE = /^\d{4}-\d{2}-\d{2}$/;
-let UmDatepicker = class UmDatepicker extends UmNativeTextFieldWrapper {
+let Datepicker = class Datepicker extends NativeTextFieldWrapper {
     constructor() {
         super(...arguments);
         /**
@@ -76,7 +78,7 @@ let UmDatepicker = class UmDatepicker extends UmNativeTextFieldWrapper {
             this._menu.toggle();
         };
     }
-    static { this.styles = [UmTextFieldBase.styles, textFieldStyles, styles]; }
+    static { this.styles = [TextFieldBase.styles, textFieldStyles, styles]; }
     renderControl() {
         const displayValue = this.editable
             ? this._value
@@ -91,6 +93,7 @@ let UmDatepicker = class UmDatepicker extends UmNativeTextFieldWrapper {
             aria-haspopup="dialog"
             ?disabled=${this.disabled}
             @click=${this.#toggleMenu}></button>
+          <u-ripple ?disabled=${this.disabled}></u-ripple>
         `}
       <div class="input">
         <input
@@ -111,10 +114,21 @@ let UmDatepicker = class UmDatepicker extends UmNativeTextFieldWrapper {
     `;
     }
     renderDefaultTrailingIcon() {
-        return svg `
-      <svg xmlns="http://www.w3.org/2000/svg" height="1.25em" viewBox="0 -960 960 960" width="1.25em" fill="currentColor">
+        const icon = svg `
+      <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960" width="1em" 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>`;
+        // In editable mode the field itself is typeable, so the icon must be a
+        // dedicated button for opening the calendar. In non-editable mode the
+        // .trigger button covers the whole field, so the icon is just visual.
+        return this.editable
+            ? html `<u-icon-button
+          type="button"
+          aria-haspopup="dialog"
+          aria-label="Open calendar"
+          ?disabled=${this.disabled}
+          @click=${this.#toggleMenu}>${icon}</u-icon-button>`
+            : icon;
     }
     renderAfterContent() {
         return html `
@@ -122,7 +136,7 @@ let UmDatepicker = class UmDatepicker extends UmNativeTextFieldWrapper {
         positioning=${this.menuPositioning}
         autoclose="outside"
         anchor-corner="end-start"
-        direction="down-start"
+        direction="down-end"
         allow-overflow
         manualFocus
         @click=${this.#stopPropagation}>
@@ -160,33 +174,33 @@ let UmDatepicker = class UmDatepicker extends UmNativeTextFieldWrapper {
 };
 __decorate([
     property()
-], UmDatepicker.prototype, "locale", void 0);
+], Datepicker.prototype, "locale", void 0);
 __decorate([
     property()
-], UmDatepicker.prototype, "format", void 0);
+], Datepicker.prototype, "format", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
-], UmDatepicker.prototype, "editable", void 0);
+], Datepicker.prototype, "editable", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
-], UmDatepicker.prototype, "readOnly", void 0);
+], Datepicker.prototype, "readOnly", void 0);
 __decorate([
     property({ reflect: true, attribute: 'menu-positioning' })
-], UmDatepicker.prototype, "menuPositioning", void 0);
+], Datepicker.prototype, "menuPositioning", void 0);
 __decorate([
     query('input')
-], UmDatepicker.prototype, "input", void 0);
+], Datepicker.prototype, "input", void 0);
 __decorate([
     query('u-menu', true)
-], UmDatepicker.prototype, "_menu", void 0);
+], Datepicker.prototype, "_menu", void 0);
 __decorate([
     query('u-calendar', true)
-], UmDatepicker.prototype, "_calendar", void 0);
+], Datepicker.prototype, "_calendar", void 0);
 __decorate([
     query('.trailing-icon', true)
-], UmDatepicker.prototype, "_trailingSlot", void 0);
-UmDatepicker = __decorate([
+], Datepicker.prototype, "_trailingSlot", void 0);
+Datepicker = __decorate([
     customElement('u-datepicker')
-], UmDatepicker);
-export { UmDatepicker };
+], Datepicker);
+export { Datepicker };
 //# sourceMappingURL=datepicker.js.map

package/datepicker/datepicker.js.map

@@ -1 +1 @@
-{"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"]}
+{"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 { Calendar } from '../calendar/calendar.js';\nimport { Menu } from '../menu/menu.js';\nimport { NativeTextFieldWrapper } from '../shared/char-count-text-field/native-text-field-wrapper.js';\nimport { TextFieldBase } 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 '../button/icon-button.js';\nimport '../calendar/calendar.js';\nimport '../menu/menu.js';\nimport '../ripple/ripple.js';\n\nconst ISO_DATE = /^\\d{4}-\\d{2}-\\d{2}$/;\n\n@customElement('u-datepicker')\nexport class Datepicker extends NativeTextFieldWrapper {\n  static override styles: CSSResultGroup = [TextFieldBase.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!: Menu;\n  @query('u-calendar', true) private _calendar!: Calendar;\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          <u-ripple ?disabled=${this.disabled}></u-ripple>\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    const icon = svg`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"1em\" viewBox=\"0 -960 960 960\" width=\"1em\" 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    // In editable mode the field itself is typeable, so the icon must be a\n    // dedicated button for opening the calendar. In non-editable mode the\n    // .trigger button covers the whole field, so the icon is just visual.\n    return this.editable\n      ? html`<u-icon-button\n          type=\"button\"\n          aria-haspopup=\"dialog\"\n          aria-label=\"Open calendar\"\n          ?disabled=${this.disabled}\n          @click=${this.#toggleMenu}>${icon}</u-icon-button>`\n      : icon;\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-end\"\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 Calendar).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': Datepicker;\n  }\n}\n"]}

package/datepicker/datepicker.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"datepicker.styles.d.ts","sourceRoot":"","sources":["../../src/datepicker/datepicker.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAElB,CAAC"}
+{"version":3,"file":"datepicker.styles.d.ts","sourceRoot":"","sources":["../../src/datepicker/datepicker.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA2BlB,CAAC"}

package/datepicker/datepicker.styles.js

@@ -1,5 +1,30 @@
 import { css } from 'lit';
 export const styles = css `
+  :host(:not([editable]):not([disabled])) .container {
+    cursor: pointer;
+  }
 
+  .trigger {
+    position: absolute;
+    inset: 0;
+    margin: 0;
+    padding: 0;
+    background: transparent;
+    border: none;
+    appearance: none;
+    cursor: inherit;
+  }
+
+  input[type=date]::-webkit-calendar-picker-indicator {
+    display: none;
+  }
+
+  input[type=date]::-webkit-inner-spin-button, input[type=date]::-webkit-clear-button {
+    display: none;
+  }
+
+  :host([empty]:not(:focus-within)) .container:not(.no-label) input[type=date]::-webkit-datetime-edit {
+    color: transparent;
+  }
 `;
 //# sourceMappingURL=datepicker.styles.js.map

package/datepicker/datepicker.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"datepicker.styles.js","sourceRoot":"","sources":["../../src/datepicker/datepicker.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;CAEzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n\n`;\n"]}
+{"version":3,"file":"datepicker.styles.js","sourceRoot":"","sources":["../../src/datepicker/datepicker.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host(:not([editable]):not([disabled])) .container {\n    cursor: pointer;\n  }\n\n  .trigger {\n    position: absolute;\n    inset: 0;\n    margin: 0;\n    padding: 0;\n    background: transparent;\n    border: none;\n    appearance: none;\n    cursor: inherit;\n  }\n\n  input[type=date]::-webkit-calendar-picker-indicator {\n    display: none;\n  }\n\n  input[type=date]::-webkit-inner-spin-button, input[type=date]::-webkit-clear-button {\n    display: none;\n  }\n\n  :host([empty]:not(:focus-within)) .container:not(.no-label) input[type=date]::-webkit-datetime-edit {\n    color: transparent;\n  }\n`;\n"]}

package/datepicker/range-datepicker.d.ts

@@ -1,10 +1,12 @@
 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 { NativeTextFieldWrapper } from '../shared/char-count-text-field/native-text-field-wrapper.js';
 import { DatepickerFormat } from './format.js';
+import '../button/icon-button.js';
 import '../calendar/range-calendar.js';
 import '../menu/menu.js';
-export declare class UmRangeDatepicker extends UmNativeTextFieldWrapper {
+import '../ripple/ripple.js';
+export declare class RangeDatepicker extends NativeTextFieldWrapper {
     #private;
     static styles: CSSResultGroup;
     /**
@@ -42,7 +44,7 @@ export declare class UmRangeDatepicker extends UmNativeTextFieldWrapper {
     private _calendar;
     private _trailingSlot;
     protected renderControl(): HTMLTemplateResult;
-    protected renderDefaultTrailingIcon(): import("lit-html").TemplateResult<2>;
+    protected renderDefaultTrailingIcon(): import("lit-html").TemplateResult<1> | import("lit-html").TemplateResult<2>;
     protected renderAfterContent(): import("lit-html").TemplateResult<1>;
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -50,7 +52,7 @@ export declare class UmRangeDatepicker extends UmNativeTextFieldWrapper {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'u-range-datepicker': UmRangeDatepicker;
+        'u-range-datepicker': RangeDatepicker;
     }
 }
 //# sourceMappingURL=range-datepicker.d.ts.map

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

@@ -1 +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"}
+{"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,sBAAsB,EAAE,MAAM,8DAA8D,CAAC;AAKtG,OAAO,EAAE,gBAAgB,EAAsB,MAAM,aAAa,CAAC;AAEnE,OAAO,0BAA0B,CAAC;AAClC,OAAO,+BAA+B,CAAC;AACvC,OAAO,iBAAiB,CAAC;AACzB,OAAO,qBAAqB,CAAC;AAI7B,qBACa,eAAgB,SAAQ,sBAAsB;;IACzD,OAAgB,MAAM,EAAE,cAAc,CAAmD;IAEzF;;;;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,CAAQ;IACX,OAAO,CAAC,SAAS,CAAiB;IACpC,OAAO,CAAC,aAAa,CAAmB;cAEpD,aAAa,IAAI,kBAAkB;cAoCnC,yBAAyB;cAmBzB,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,eAAe,CAAC;KACvC;CACF"}

package/datepicker/range-datepicker.js

@@ -2,15 +2,17 @@ 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 { NativeTextFieldWrapper } from '../shared/char-count-text-field/native-text-field-wrapper.js';
+import { TextFieldBase } 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 '../button/icon-button.js';
 import '../calendar/range-calendar.js';
 import '../menu/menu.js';
+import '../ripple/ripple.js';
 const ISO_DATE_RANGE = /^\d{4}-\d{2}-\d{2} - \d{4}-\d{2}-\d{2}$/;
-let UmRangeDatepicker = class UmRangeDatepicker extends UmNativeTextFieldWrapper {
+let RangeDatepicker = class RangeDatepicker extends NativeTextFieldWrapper {
     constructor() {
         super(...arguments);
         /**
@@ -80,7 +82,7 @@ let UmRangeDatepicker = class UmRangeDatepicker extends UmNativeTextFieldWrapper
             this._menu.toggle();
         };
     }
-    static { this.styles = [UmTextFieldBase.styles, textFieldStyles, styles]; }
+    static { this.styles = [TextFieldBase.styles, textFieldStyles, styles]; }
     renderControl() {
         const displayValue = this.editable
             ? this._value
@@ -95,6 +97,7 @@ let UmRangeDatepicker = class UmRangeDatepicker extends UmNativeTextFieldWrapper
             aria-haspopup="dialog"
             ?disabled=${this.disabled}
             @click=${this.#toggleMenu}></button>
+          <u-ripple ?disabled=${this.disabled}></u-ripple>
         `}
       <div class="input">
         <input
@@ -115,10 +118,21 @@ let UmRangeDatepicker = class UmRangeDatepicker extends UmNativeTextFieldWrapper
     `;
     }
     renderDefaultTrailingIcon() {
-        return svg `
-      <svg xmlns="http://www.w3.org/2000/svg" height="1.25em" viewBox="0 -960 960 960" width="1.25em" fill="currentColor">
+        const icon = svg `
+      <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960" width="1em" 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>`;
+        // In editable mode the field itself is typeable, so the icon must be a
+        // dedicated button for opening the calendar. In non-editable mode the
+        // .trigger button covers the whole field, so the icon is just visual.
+        return this.editable
+            ? html `<u-icon-button
+          type="button"
+          aria-haspopup="dialog"
+          aria-label="Open calendar"
+          ?disabled=${this.disabled}
+          @click=${this.#toggleMenu}>${icon}</u-icon-button>`
+            : icon;
     }
     renderAfterContent() {
         return html `
@@ -126,7 +140,7 @@ let UmRangeDatepicker = class UmRangeDatepicker extends UmNativeTextFieldWrapper
         positioning=${this.menuPositioning}
         autoclose="outside"
         anchor-corner="end-start"
-        direction="down-start"
+        direction="down-end"
         allow-overflow
         manualFocus
         @click=${this.#stopPropagation}>
@@ -166,33 +180,33 @@ let UmRangeDatepicker = class UmRangeDatepicker extends UmNativeTextFieldWrapper
 };
 __decorate([
     property()
-], UmRangeDatepicker.prototype, "locale", void 0);
+], RangeDatepicker.prototype, "locale", void 0);
 __decorate([
     property()
-], UmRangeDatepicker.prototype, "format", void 0);
+], RangeDatepicker.prototype, "format", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
-], UmRangeDatepicker.prototype, "editable", void 0);
+], RangeDatepicker.prototype, "editable", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
-], UmRangeDatepicker.prototype, "readOnly", void 0);
+], RangeDatepicker.prototype, "readOnly", void 0);
 __decorate([
     property({ reflect: true, attribute: 'menu-positioning' })
-], UmRangeDatepicker.prototype, "menuPositioning", void 0);
+], RangeDatepicker.prototype, "menuPositioning", void 0);
 __decorate([
     query('input')
-], UmRangeDatepicker.prototype, "input", void 0);
+], RangeDatepicker.prototype, "input", void 0);
 __decorate([
     query('u-menu', true)
-], UmRangeDatepicker.prototype, "_menu", void 0);
+], RangeDatepicker.prototype, "_menu", void 0);
 __decorate([
     query('u-range-calendar', true)
-], UmRangeDatepicker.prototype, "_calendar", void 0);
+], RangeDatepicker.prototype, "_calendar", void 0);
 __decorate([
     query('.trailing-icon', true)
-], UmRangeDatepicker.prototype, "_trailingSlot", void 0);
-UmRangeDatepicker = __decorate([
+], RangeDatepicker.prototype, "_trailingSlot", void 0);
+RangeDatepicker = __decorate([
     customElement('u-range-datepicker')
-], UmRangeDatepicker);
-export { UmRangeDatepicker };
+], RangeDatepicker);
+export { RangeDatepicker };
 //# sourceMappingURL=range-datepicker.js.map

package/datepicker/range-datepicker.js.map

@@ -1 +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"]}
+{"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 { RangeCalendar } from '../calendar/range-calendar.js';\nimport { Menu } from '../menu/menu.js';\nimport { NativeTextFieldWrapper } from '../shared/char-count-text-field/native-text-field-wrapper.js';\nimport { TextFieldBase } 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 '../button/icon-button.js';\nimport '../calendar/range-calendar.js';\nimport '../menu/menu.js';\nimport '../ripple/ripple.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 RangeDatepicker extends NativeTextFieldWrapper {\n  static override styles: CSSResultGroup = [TextFieldBase.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!: Menu;\n  @query('u-range-calendar', true) private _calendar!: RangeCalendar;\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          <u-ripple ?disabled=${this.disabled}></u-ripple>\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    const icon = svg`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"1em\" viewBox=\"0 -960 960 960\" width=\"1em\" 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    // In editable mode the field itself is typeable, so the icon must be a\n    // dedicated button for opening the calendar. In non-editable mode the\n    // .trigger button covers the whole field, so the icon is just visual.\n    return this.editable\n      ? html`<u-icon-button\n          type=\"button\"\n          aria-haspopup=\"dialog\"\n          aria-label=\"Open calendar\"\n          ?disabled=${this.disabled}\n          @click=${this.#toggleMenu}>${icon}</u-icon-button>`\n      : icon;\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-end\"\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 RangeCalendar).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': RangeDatepicker;\n  }\n}\n"]}

package/dialog/confirm-dialog-builder.d.ts

@@ -1,12 +1,12 @@
 import { DialogBuilder } from './dialog-builder.js';
 import { DialogButtonDef } from './dialog-button-def.js';
-import { UmDialog } from './dialog.js';
+import { Dialog } from './dialog.js';
 export declare class ConfirmDialogBuilder extends DialogBuilder<ConfirmDialogBuilder, Promise<boolean>> {
     #private;
     static create(message: string): ConfirmDialogBuilder;
     confirmButton(confirmButtonDef: DialogButtonDef): ConfirmDialogBuilder;
     cancelButton(cancelButtonDef: DialogButtonDef): ConfirmDialogBuilder;
-    _addButtons(dialog: UmDialog): void;
-    protected innerShow(dialog: UmDialog): Promise<boolean>;
+    _addButtons(dialog: Dialog): void;
+    protected innerShow(dialog: Dialog): Promise<boolean>;
 }
 //# sourceMappingURL=confirm-dialog-builder.d.ts.map

package/dialog/confirm-dialog-builder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"confirm-dialog-builder.d.ts","sourceRoot":"","sources":["../../src/dialog/confirm-dialog-builder.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,qBAAa,oBAAqB,SAAQ,aAAa,CAAC,oBAAoB,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC;;IAC7F,MAAM,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,GAAG,oBAAoB;IAOpD,aAAa,CAAC,gBAAgB,EAAE,eAAe,GAAG,oBAAoB;IAKtE,YAAY,CAAC,eAAe,EAAE,eAAe,GAAG,oBAAoB;IAK3D,WAAW,CAAC,MAAM,EAAE,QAAQ,GAAG,IAAI;cAazB,SAAS,CAAC,MAAM,EAAE,QAAQ,GAAG,OAAO,CAAC,OAAO,CAAC;CAMjE"}
+{"version":3,"file":"confirm-dialog-builder.d.ts","sourceRoot":"","sources":["../../src/dialog/confirm-dialog-builder.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,qBAAa,oBAAqB,SAAQ,aAAa,CAAC,oBAAoB,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC;;IAC7F,MAAM,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,GAAG,oBAAoB;IAOpD,aAAa,CAAC,gBAAgB,EAAE,eAAe,GAAG,oBAAoB;IAKtE,YAAY,CAAC,eAAe,EAAE,eAAe,GAAG,oBAAoB;IAK3D,WAAW,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;cAavB,SAAS,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC;CAM/D"}

package/dialog/confirm-dialog-builder.js.map

@@ -1 +1 @@
-{"version":3,"file":"confirm-dialog-builder.js","sourceRoot":"","sources":["../../src/dialog/confirm-dialog-builder.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAIpD,MAAM,OAAO,oBAAqB,SAAQ,aAAqD;IAC7F,MAAM,CAAC,MAAM,CAAC,OAAe;QAC3B,OAAO,IAAI,oBAAoB,CAAC,OAAO,CAAC,CAAC;IAC3C,CAAC;IAED,iBAAiB,CAAmB;IACpC,gBAAgB,CAAmB;IAEnC,aAAa,CAAC,gBAAiC;QAC7C,IAAI,CAAC,iBAAiB,GAAG,gBAAgB,CAAC;QAC1C,OAAO,IAAI,CAAC;IACd,CAAC;IAED,YAAY,CAAC,eAAgC;QAC3C,IAAI,CAAC,gBAAgB,GAAG,eAAe,CAAC;QACxC,OAAO,IAAI,CAAC;IACd,CAAC;IAEQ,WAAW,CAAC,MAAgB;QAEnC,IAAI,CAAC,UAAU,CACb,MAAM,EACN,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,eAAe,CAAC,aAAa,EAAE,GAAG,IAAI,CAAC,iBAAiB,EAAE,EAC7E,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;QAE5B,IAAI,CAAC,UAAU,CACb,MAAM,EACN,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,eAAe,CAAC,YAAY,EAAE,GAAG,IAAI,CAAC,gBAAgB,EAAE,EAC3E,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAClC,CAAC;IAEkB,SAAS,CAAC,MAAgB;QAC3C,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;QAExB,OAAO,IAAI,OAAO,CAAU,OAAO,CAAC,EAAE,CACpC,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,WAAW,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC;IACnF,CAAC;CACF","sourcesContent":["import { config } from '../config.js';\nimport { DialogBuilder } from './dialog-builder.js';\nimport { DialogButtonDef } from './dialog-button-def.js';\nimport { UmDialog } from './dialog.js';\n\nexport class ConfirmDialogBuilder extends DialogBuilder<ConfirmDialogBuilder, Promise<boolean>> {\n  static create(message: string): ConfirmDialogBuilder {\n    return new ConfirmDialogBuilder(message);\n  }\n\n  #confirmButtonDef?: DialogButtonDef;\n  #cancelButtonDef?: DialogButtonDef;\n\n  confirmButton(confirmButtonDef: DialogButtonDef): ConfirmDialogBuilder {\n    this.#confirmButtonDef = confirmButtonDef;\n    return this;\n  }\n\n  cancelButton(cancelButtonDef: DialogButtonDef): ConfirmDialogBuilder {\n    this.#cancelButtonDef = cancelButtonDef;\n    return this;\n  }\n\n  override _addButtons(dialog: UmDialog): void {\n\n    this._addButton(\n      dialog,\n      { ...config.dialog.confirmDefaults.confirmButton, ...this.#confirmButtonDef },\n      () => dialog.close('ok'));\n\n    this._addButton(\n      dialog,\n      { ...config.dialog.confirmDefaults.cancelButton, ...this.#cancelButtonDef },\n      () => dialog.close('cancel'));\n  }\n\n  protected override innerShow(dialog: UmDialog): Promise<boolean> {\n    super.innerShow(dialog);\n\n    return new Promise<boolean>(resolve =>\n      dialog.addEventListener('closed', () => resolve(dialog.returnValue === 'ok')));\n  }\n}\n"]}
+{"version":3,"file":"confirm-dialog-builder.js","sourceRoot":"","sources":["../../src/dialog/confirm-dialog-builder.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAIpD,MAAM,OAAO,oBAAqB,SAAQ,aAAqD;IAC7F,MAAM,CAAC,MAAM,CAAC,OAAe;QAC3B,OAAO,IAAI,oBAAoB,CAAC,OAAO,CAAC,CAAC;IAC3C,CAAC;IAED,iBAAiB,CAAmB;IACpC,gBAAgB,CAAmB;IAEnC,aAAa,CAAC,gBAAiC;QAC7C,IAAI,CAAC,iBAAiB,GAAG,gBAAgB,CAAC;QAC1C,OAAO,IAAI,CAAC;IACd,CAAC;IAED,YAAY,CAAC,eAAgC;QAC3C,IAAI,CAAC,gBAAgB,GAAG,eAAe,CAAC;QACxC,OAAO,IAAI,CAAC;IACd,CAAC;IAEQ,WAAW,CAAC,MAAc;QAEjC,IAAI,CAAC,UAAU,CACb,MAAM,EACN,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,eAAe,CAAC,aAAa,EAAE,GAAG,IAAI,CAAC,iBAAiB,EAAE,EAC7E,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;QAE5B,IAAI,CAAC,UAAU,CACb,MAAM,EACN,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,eAAe,CAAC,YAAY,EAAE,GAAG,IAAI,CAAC,gBAAgB,EAAE,EAC3E,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAClC,CAAC;IAEkB,SAAS,CAAC,MAAc;QACzC,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;QAExB,OAAO,IAAI,OAAO,CAAU,OAAO,CAAC,EAAE,CACpC,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,WAAW,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC;IACnF,CAAC;CACF","sourcesContent":["import { config } from '../config.js';\nimport { DialogBuilder } from './dialog-builder.js';\nimport { DialogButtonDef } from './dialog-button-def.js';\nimport { Dialog } from './dialog.js';\n\nexport class ConfirmDialogBuilder extends DialogBuilder<ConfirmDialogBuilder, Promise<boolean>> {\n  static create(message: string): ConfirmDialogBuilder {\n    return new ConfirmDialogBuilder(message);\n  }\n\n  #confirmButtonDef?: DialogButtonDef;\n  #cancelButtonDef?: DialogButtonDef;\n\n  confirmButton(confirmButtonDef: DialogButtonDef): ConfirmDialogBuilder {\n    this.#confirmButtonDef = confirmButtonDef;\n    return this;\n  }\n\n  cancelButton(cancelButtonDef: DialogButtonDef): ConfirmDialogBuilder {\n    this.#cancelButtonDef = cancelButtonDef;\n    return this;\n  }\n\n  override _addButtons(dialog: Dialog): void {\n\n    this._addButton(\n      dialog,\n      { ...config.dialog.confirmDefaults.confirmButton, ...this.#confirmButtonDef },\n      () => dialog.close('ok'));\n\n    this._addButton(\n      dialog,\n      { ...config.dialog.confirmDefaults.cancelButton, ...this.#cancelButtonDef },\n      () => dialog.close('cancel'));\n  }\n\n  protected override innerShow(dialog: Dialog): Promise<boolean> {\n    super.innerShow(dialog);\n\n    return new Promise<boolean>(resolve =>\n      dialog.addEventListener('closed', () => resolve(dialog.returnValue === 'ok')));\n  }\n}\n"]}

package/dialog/dialog-builder.d.ts

@@ -1,5 +1,6 @@
 import { DialogButtonDef } from './dialog-button-def.js';
-import { UmDialog } from './dialog.js';
+import { Dialog } from './dialog.js';
+import '../button/button.js';
 import './dialog.js';
 export declare abstract class DialogBuilder<TBuilder extends DialogBuilder<any, any>, TReturn> {
     #private;
@@ -7,9 +8,9 @@ export declare abstract class DialogBuilder<TBuilder extends DialogBuilder<any,
     constructor(message: string);
     headline(headline: string): TBuilder;
     show(): TReturn;
-    protected innerShow(dialog: UmDialog): TReturn | void;
-    protected abstract _addButtons(dialog: UmDialog): void;
+    protected innerShow(dialog: Dialog): TReturn | void;
+    protected abstract _addButtons(dialog: Dialog): void;
     private _addHeadline;
-    protected _addButton(dialog: UmDialog, buttonDef: DialogButtonDef, click: () => void): void;
+    protected _addButton(dialog: Dialog, buttonDef: DialogButtonDef, click: () => void): void;
 }
 //# sourceMappingURL=dialog-builder.d.ts.map

package/dialog/dialog-builder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog-builder.d.ts","sourceRoot":"","sources":["../../src/dialog/dialog-builder.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,OAAO,aAAa,CAAC;AAErB,8BAAsB,aAAa,CAAC,QAAQ,SAAS,aAAa,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,OAAO;;IAGvE,OAAO,CAAC,QAAQ,CAAC,OAAO;gBAAP,OAAO,EAAE,MAAM;IAI5C,QAAQ,CAAC,QAAQ,EAAE,MAAM,GAAG,QAAQ;IAKpC,IAAI,IAAI,OAAO;IAUf,SAAS,CAAC,SAAS,CAAC,MAAM,EAAE,QAAQ,GAAG,OAAO,GAAG,IAAI;IAQrD,SAAS,CAAC,QAAQ,CAAC,WAAW,CAAC,MAAM,EAAE,QAAQ,GAAG,IAAI;IAEtD,OAAO,CAAC,YAAY;IAWpB,SAAS,CAAC,UAAU,CAAC,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,IAAI;CASrF"}
+{"version":3,"file":"dialog-builder.d.ts","sourceRoot":"","sources":["../../src/dialog/dialog-builder.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,qBAAqB,CAAC;AAC7B,OAAO,aAAa,CAAC;AAErB,8BAAsB,aAAa,CAAC,QAAQ,SAAS,aAAa,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,OAAO;;IAGvE,OAAO,CAAC,QAAQ,CAAC,OAAO;gBAAP,OAAO,EAAE,MAAM;IAI5C,QAAQ,CAAC,QAAQ,EAAE,MAAM,GAAG,QAAQ;IAKpC,IAAI,IAAI,OAAO;IAUf,SAAS,CAAC,SAAS,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI;IAQnD,SAAS,CAAC,QAAQ,CAAC,WAAW,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAEpD,OAAO,CAAC,YAAY;IAWpB,SAAS,CAAC,UAAU,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,IAAI;CAmBnF"}

package/dialog/dialog-builder.js

@@ -1,4 +1,5 @@
 import DOMPurify from 'dompurify';
+import '../button/button.js';
 import './dialog.js';
 export class DialogBuilder {
     #headline;
@@ -33,9 +34,15 @@ export class DialogBuilder {
     }
     _addButton(dialog, buttonDef, click) {
         const button = document.createElement('u-button');
-        button.variant = buttonDef.variant;
-        button.color = buttonDef.color;
-        button.textContent = buttonDef.label;
+        if (buttonDef.variant !== undefined) {
+            button.variant = buttonDef.variant;
+        }
+        if (buttonDef.color !== undefined) {
+            button.color = buttonDef.color;
+        }
+        if (buttonDef.label !== undefined) {
+            button.textContent = buttonDef.label;
+        }
         button.slot = 'actions';
         button.addEventListener('click', click);
         dialog.appendChild(button);

package/dialog/dialog-builder.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog-builder.js","sourceRoot":"","sources":["../../src/dialog/dialog-builder.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,WAAW,CAAC;AAKlC,OAAO,aAAa,CAAC;AAErB,MAAM,OAAgB,aAAa;IACjC,SAAS,CAAU;IAEnB,YAA6B,OAAe;QAAf,YAAO,GAAP,OAAO,CAAQ;IAE5C,CAAC;IAED,QAAQ,CAAC,QAAgB;QACvB,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC;QAC1B,OAAO,IAA2B,CAAC;IACrC,CAAC;IAED,IAAI;QACF,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;QAClD,MAAM,CAAC,SAAS,GAAG,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAEpD,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;QAC1B,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;QAEzB,OAAO,IAAI,CAAC,SAAS,CAAC,MAAM,CAAY,CAAC;IAC3C,CAAC;IAES,SAAS,CAAC,MAAgB;QAClC,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC;QACzD,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;QAClC,MAAM,CAAC,IAAI,EAAE,CAAC;QAEd,OAAO;IACT,CAAC;IAIO,YAAY,CAAC,MAAmB;QACtC,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;YACpB,OAAO;QACT,CAAC;QAED,MAAM,eAAe,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QACvD,eAAe,CAAC,IAAI,GAAG,UAAU,CAAC;QAClC,eAAe,CAAC,SAAS,GAAG,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAC/D,MAAM,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC;IACtC,CAAC;IAES,UAAU,CAAC,MAAgB,EAAE,SAA0B,EAAE,KAAiB;QAClF,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;QAClD,MAAM,CAAC,OAAO,GAAG,SAAS,CAAC,OAAQ,CAAC;QACpC,MAAM,CAAC,KAAK,GAAG,SAAS,CAAC,KAAM,CAAC;QAChC,MAAM,CAAC,WAAW,GAAG,SAAS,CAAC,KAAM,CAAC;QACtC,MAAM,CAAC,IAAI,GAAG,SAAS,CAAC;QACxB,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;QACxC,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAC7B,CAAC;CACF","sourcesContent":["import DOMPurify from 'dompurify';\n\nimport { DialogButtonDef } from './dialog-button-def.js';\nimport { UmDialog } from './dialog.js';\n\nimport './dialog.js';\n\nexport abstract class DialogBuilder<TBuilder extends DialogBuilder<any, any>, TReturn> {\n  #headline?: string;\n\n  constructor(private readonly message: string) {\n\n  }\n\n  headline(headline: string): TBuilder {\n    this.#headline = headline;\n    return this as unknown as TBuilder;\n  }\n\n  show(): TReturn {\n    const dialog = document.createElement('u-dialog');\n    dialog.innerHTML = DOMPurify.sanitize(this.message);\n\n    this._addHeadline(dialog);\n    this._addButtons(dialog);\n\n    return this.innerShow(dialog) as TReturn;\n  }\n\n  protected innerShow(dialog: UmDialog): TReturn | void {\n    dialog.addEventListener('closed', () => dialog.remove());\n    document.body.appendChild(dialog);\n    dialog.show();\n\n    return;\n  }\n\n  protected abstract _addButtons(dialog: UmDialog): void;\n\n  private _addHeadline(dialog: HTMLElement) {\n    if (!this.#headline) {\n      return;\n    }\n\n    const headlineElement = document.createElement('span');\n    headlineElement.slot = 'headline';\n    headlineElement.innerHTML = DOMPurify.sanitize(this.#headline);\n    dialog.appendChild(headlineElement);\n  }\n\n  protected _addButton(dialog: UmDialog, buttonDef: DialogButtonDef, click: () => void) {\n    const button = document.createElement('u-button');\n    button.variant = buttonDef.variant!;\n    button.color = buttonDef.color!;\n    button.textContent = buttonDef.label!;\n    button.slot = 'actions';\n    button.addEventListener('click', click);\n    dialog.appendChild(button);\n  }\n}\n"]}
+{"version":3,"file":"dialog-builder.js","sourceRoot":"","sources":["../../src/dialog/dialog-builder.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,WAAW,CAAC;AAKlC,OAAO,qBAAqB,CAAC;AAC7B,OAAO,aAAa,CAAC;AAErB,MAAM,OAAgB,aAAa;IACjC,SAAS,CAAU;IAEnB,YAA6B,OAAe;QAAf,YAAO,GAAP,OAAO,CAAQ;IAE5C,CAAC;IAED,QAAQ,CAAC,QAAgB;QACvB,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC;QAC1B,OAAO,IAA2B,CAAC;IACrC,CAAC;IAED,IAAI;QACF,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;QAClD,MAAM,CAAC,SAAS,GAAG,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAEpD,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;QAC1B,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;QAEzB,OAAO,IAAI,CAAC,SAAS,CAAC,MAAM,CAAY,CAAC;IAC3C,CAAC;IAES,SAAS,CAAC,MAAc;QAChC,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC;QACzD,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;QAClC,MAAM,CAAC,IAAI,EAAE,CAAC;QAEd,OAAO;IACT,CAAC;IAIO,YAAY,CAAC,MAAmB;QACtC,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;YACpB,OAAO;QACT,CAAC;QAED,MAAM,eAAe,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QACvD,eAAe,CAAC,IAAI,GAAG,UAAU,CAAC;QAClC,eAAe,CAAC,SAAS,GAAG,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAC/D,MAAM,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC;IACtC,CAAC;IAES,UAAU,CAAC,MAAc,EAAE,SAA0B,EAAE,KAAiB;QAChF,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;QAElD,IAAI,SAAS,CAAC,OAAO,KAAK,SAAS,EAAE,CAAC;YACpC,MAAM,CAAC,OAAO,GAAG,SAAS,CAAC,OAAO,CAAC;QACrC,CAAC;QAED,IAAI,SAAS,CAAC,KAAK,KAAK,SAAS,EAAE,CAAC;YAClC,MAAM,CAAC,KAAK,GAAG,SAAS,CAAC,KAAK,CAAC;QACjC,CAAC;QAED,IAAI,SAAS,CAAC,KAAK,KAAK,SAAS,EAAE,CAAC;YAClC,MAAM,CAAC,WAAW,GAAG,SAAS,CAAC,KAAK,CAAC;QACvC,CAAC;QAED,MAAM,CAAC,IAAI,GAAG,SAAS,CAAC;QACxB,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;QACxC,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAC7B,CAAC;CACF","sourcesContent":["import DOMPurify from 'dompurify';\n\nimport { DialogButtonDef } from './dialog-button-def.js';\nimport { Dialog } from './dialog.js';\n\nimport '../button/button.js';\nimport './dialog.js';\n\nexport abstract class DialogBuilder<TBuilder extends DialogBuilder<any, any>, TReturn> {\n  #headline?: string;\n\n  constructor(private readonly message: string) {\n\n  }\n\n  headline(headline: string): TBuilder {\n    this.#headline = headline;\n    return this as unknown as TBuilder;\n  }\n\n  show(): TReturn {\n    const dialog = document.createElement('u-dialog');\n    dialog.innerHTML = DOMPurify.sanitize(this.message);\n\n    this._addHeadline(dialog);\n    this._addButtons(dialog);\n\n    return this.innerShow(dialog) as TReturn;\n  }\n\n  protected innerShow(dialog: Dialog): TReturn | void {\n    dialog.addEventListener('closed', () => dialog.remove());\n    document.body.appendChild(dialog);\n    dialog.show();\n\n    return;\n  }\n\n  protected abstract _addButtons(dialog: Dialog): void;\n\n  private _addHeadline(dialog: HTMLElement) {\n    if (!this.#headline) {\n      return;\n    }\n\n    const headlineElement = document.createElement('span');\n    headlineElement.slot = 'headline';\n    headlineElement.innerHTML = DOMPurify.sanitize(this.#headline);\n    dialog.appendChild(headlineElement);\n  }\n\n  protected _addButton(dialog: Dialog, buttonDef: DialogButtonDef, click: () => void) {\n    const button = document.createElement('u-button');\n\n    if (buttonDef.variant !== undefined) {\n      button.variant = buttonDef.variant;\n    }\n\n    if (buttonDef.color !== undefined) {\n      button.color = buttonDef.color;\n    }\n\n    if (buttonDef.label !== undefined) {\n      button.textContent = buttonDef.label;\n    }\n\n    button.slot = 'actions';\n    button.addEventListener('click', click);\n    dialog.appendChild(button);\n  }\n}\n"]}

package/dialog/dialog-button-def.d.ts

@@ -1,7 +1,7 @@
-import { UmButtonColor, UmButtonVariant } from '../button/button.js';
+import { ButtonColor, ButtonVariant } from '../button/button.js';
 export interface DialogButtonDef {
-    variant?: UmButtonVariant;
+    variant?: ButtonVariant;
     label?: string;
-    color?: UmButtonColor;
+    color?: ButtonColor;
 }
 //# sourceMappingURL=dialog-button-def.d.ts.map

package/dialog/dialog-button-def.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog-button-def.d.ts","sourceRoot":"","sources":["../../src/dialog/dialog-button-def.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAErE,MAAM,WAAW,eAAe;IAC9B,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB"}
+{"version":3,"file":"dialog-button-def.d.ts","sourceRoot":"","sources":["../../src/dialog/dialog-button-def.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEjE,MAAM,WAAW,eAAe;IAC9B,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,WAAW,CAAC;CACrB"}

package/dialog/dialog-button-def.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog-button-def.js","sourceRoot":"","sources":["../../src/dialog/dialog-button-def.ts"],"names":[],"mappings":"","sourcesContent":["import { UmButtonColor, UmButtonVariant } from '../button/button.js';\n\nexport interface DialogButtonDef {\n  variant?: UmButtonVariant;\n  label?: string;\n  color?: UmButtonColor;\n}\n"]}
+{"version":3,"file":"dialog-button-def.js","sourceRoot":"","sources":["../../src/dialog/dialog-button-def.ts"],"names":[],"mappings":"","sourcesContent":["import { ButtonColor, ButtonVariant } from '../button/button.js';\n\nexport interface DialogButtonDef {\n  variant?: ButtonVariant;\n  label?: string;\n  color?: ButtonColor;\n}\n"]}