@universal-material/web 3.7.1 → 3.8.0

package/button/button-base.d.ts

@@ -4,7 +4,14 @@ export declare abstract class UmButtonBase extends UmButtonWrapper {
     #private;
     static readonly formAssociated = true;
     static styles: CSSResultGroup;
+    /**
+     * The button behavior. Mirrors the native `type` attribute and accepts
+     * values like `submit`, `reset` or `button`.
+     */
     type: string;
+    /**
+     * The value submitted with the form when this button is the submitter
+     */
     value: string;
     get form(): HTMLFormElement | null;
     constructor();

package/button/button-base.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button-base.d.ts","sourceRoot":"","sources":["../../src/button/button-base.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAI/D,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAG9D,8BAAsB,YAAa,SAAQ,eAAe;;IAExD,MAAM,CAAC,QAAQ,CAAC,cAAc,QAAQ;IAEtC,OAAgB,MAAM,EAAE,cAAc,CAAoC;IAE9D,IAAI,SAAY;IAEC,KAAK,SAAM;IAExC,IAAI,IAAI,IAAI,eAAe,GAAG,IAAI,CAEjC;;cASkB,YAAY,CAAC,CAAC,EAAE,OAAO,GAAG,IAAI;CA8BlD"}
+{"version":3,"file":"button-base.d.ts","sourceRoot":"","sources":["../../src/button/button-base.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAI/D,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAG9D,8BAAsB,YAAa,SAAQ,eAAe;;IAExD,MAAM,CAAC,QAAQ,CAAC,cAAc,QAAQ;IAEtC,OAAgB,MAAM,EAAE,cAAc,CAAoC;IAE1E;;;OAGG;IACS,IAAI,SAAY;IAE5B;;OAEG;IAC0B,KAAK,SAAM;IAExC,IAAI,IAAI,IAAI,eAAe,GAAG,IAAI,CAEjC;;cASkB,YAAY,CAAC,CAAC,EAAE,OAAO,GAAG,IAAI;CA8BlD"}

package/button/button-base.js

@@ -11,7 +11,14 @@ export class UmButtonBase extends UmButtonWrapper {
     #elementInternals;
     constructor() {
         super();
+        /**
+         * The button behavior. Mirrors the native `type` attribute and accepts
+         * values like `submit`, `reset` or `button`.
+         */
         this.type = 'submit';
+        /**
+         * The value submitted with the form when this button is the submitter
+         */
         this.value = '';
         this.#elementInternals = this.attachInternals();
     }

package/button/button-base.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-base.js","sourceRoot":"","sources":["../../src/button/button-base.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEjD,MAAM,OAAgB,YAAa,SAAQ,eAAe;aAExC,mBAAc,GAAG,IAAI,AAAP,CAAQ;aAEtB,WAAM,GAAmB,CAAC,eAAe,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnD,CAAoD;IAM1E,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;IACrC,CAAC;IAEQ,iBAAiB,CAAmB;IAE7C;QACE,KAAK,EAAE,CAAC;QAXE,SAAI,GAAG,QAAQ,CAAC;QAEC,UAAK,GAAG,EAAE,CAAC;QAUtC,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;IAClD,CAAC;IAEkB,YAAY,CAAC,CAAU;QAExC,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YAC1C,OAAO;QACT,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACf,OAAO;QACT,CAAC;QAED,IAAI,CAAC,iBAAiB,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAEhD,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;YAC1B,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YAClB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,gBAAgB,CACxB,QAAQ,EACR,WAAW,CAAC,EAAE;YACZ,MAAM,CAAC,cAAc,CAAC,WAAW,EAAE,WAAW,EAAE;gBAC9C,YAAY,EAAE,IAAI;gBAClB,UAAU,EAAE,IAAI;gBAChB,GAAG,EAAE,GAAG,EAAE,CAAC,IAAI;aAChB,CAAC,CAAC;QACL,CAAC,EACD,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,CAC9B,CAAC;QACF,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;IAC5B,CAAC;;AA5CW;IAAX,QAAQ,EAAE;0CAAiB;AAEC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAAY","sourcesContent":["import { CSSResultGroup } from '@lit/reactive-element/css-tag';\n\nimport { property } from 'lit/decorators.js';\n\nimport { UmButtonWrapper } from '../shared/button-wrapper.js';\nimport { styles } from './button-base.styles.js';\n\nexport abstract class UmButtonBase extends UmButtonWrapper {\n\n  static readonly formAssociated = true;\n\n  static override styles: CSSResultGroup = [UmButtonWrapper.styles, styles];\n\n  @property() type = 'submit';\n\n  @property({ reflect: true }) value = '';\n\n  get form(): HTMLFormElement | null {\n    return this.#elementInternals.form;\n  }\n\n  readonly #elementInternals: ElementInternals;\n\n  constructor() {\n    super();\n    this.#elementInternals = this.attachInternals();\n  }\n\n  protected override _handleClick(_: UIEvent): void {\n\n    if (this.type === 'button' || !!this.href) {\n      return;\n    }\n\n    if (!this.form) {\n      return;\n    }\n\n    this.#elementInternals.setFormValue(this.value);\n\n    if (this.type === 'reset') {\n      this.form.reset();\n      return;\n    }\n\n    this.form.addEventListener(\n      'submit',\n      submitEvent => {\n        Object.defineProperty(submitEvent, 'submitter', {\n          configurable: true,\n          enumerable: true,\n          get: () => this,\n        });\n      },\n      { capture: true, once: true },\n    );\n    this.form.requestSubmit();\n  }\n}\n"]}
+{"version":3,"file":"button-base.js","sourceRoot":"","sources":["../../src/button/button-base.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEjD,MAAM,OAAgB,YAAa,SAAQ,eAAe;aAExC,mBAAc,GAAG,IAAI,AAAP,CAAQ;aAEtB,WAAM,GAAmB,CAAC,eAAe,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnD,CAAoD;IAa1E,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;IACrC,CAAC;IAEQ,iBAAiB,CAAmB;IAE7C;QACE,KAAK,EAAE,CAAC;QAlBV;;;WAGG;QACS,SAAI,GAAG,QAAQ,CAAC;QAE5B;;WAEG;QAC0B,UAAK,GAAG,EAAE,CAAC;QAUtC,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;IAClD,CAAC;IAEkB,YAAY,CAAC,CAAU;QAExC,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YAC1C,OAAO;QACT,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACf,OAAO;QACT,CAAC;QAED,IAAI,CAAC,iBAAiB,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAEhD,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;YAC1B,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YAClB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,gBAAgB,CACxB,QAAQ,EACR,WAAW,CAAC,EAAE;YACZ,MAAM,CAAC,cAAc,CAAC,WAAW,EAAE,WAAW,EAAE;gBAC9C,YAAY,EAAE,IAAI;gBAClB,UAAU,EAAE,IAAI;gBAChB,GAAG,EAAE,GAAG,EAAE,CAAC,IAAI;aAChB,CAAC,CAAC;QACL,CAAC,EACD,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,CAC9B,CAAC;QACF,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;IAC5B,CAAC;;AA/CW;IAAX,QAAQ,EAAE;0CAAiB;AAKC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAAY","sourcesContent":["import { CSSResultGroup } from '@lit/reactive-element/css-tag';\n\nimport { property } from 'lit/decorators.js';\n\nimport { UmButtonWrapper } from '../shared/button-wrapper.js';\nimport { styles } from './button-base.styles.js';\n\nexport abstract class UmButtonBase extends UmButtonWrapper {\n\n  static readonly formAssociated = true;\n\n  static override styles: CSSResultGroup = [UmButtonWrapper.styles, styles];\n\n  /**\n   * The button behavior. Mirrors the native `type` attribute and accepts\n   * values like `submit`, `reset` or `button`.\n   */\n  @property() type = 'submit';\n\n  /**\n   * The value submitted with the form when this button is the submitter\n   */\n  @property({ reflect: true }) value = '';\n\n  get form(): HTMLFormElement | null {\n    return this.#elementInternals.form;\n  }\n\n  readonly #elementInternals: ElementInternals;\n\n  constructor() {\n    super();\n    this.#elementInternals = this.attachInternals();\n  }\n\n  protected override _handleClick(_: UIEvent): void {\n\n    if (this.type === 'button' || !!this.href) {\n      return;\n    }\n\n    if (!this.form) {\n      return;\n    }\n\n    this.#elementInternals.setFormValue(this.value);\n\n    if (this.type === 'reset') {\n      this.form.reset();\n      return;\n    }\n\n    this.form.addEventListener(\n      'submit',\n      submitEvent => {\n        Object.defineProperty(submitEvent, 'submitter', {\n          configurable: true,\n          enumerable: true,\n          get: () => this,\n        });\n      },\n      { capture: true, once: true },\n    );\n    this.form.requestSubmit();\n  }\n}\n"]}

package/button/button.d.ts

@@ -16,6 +16,9 @@ export declare class UmButton extends UmToggleButton {
      * The Button color
      */
     color: UmButtonColor;
+    /**
+     * Whether the slotted icon is rendered after the label instead of before
+     */
     trailingIcon: boolean;
     private _hasIcon;
     private _hasSelectionLabel;

package/button/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/button/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAE/D,OAAO,EAAQ,kBAAkB,EAAE,MAAM,KAAK,CAAC;AAK/C,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpD,OAAO,qBAAqB,CAAC;AAE7B,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,GAAG,UAAU,GAAG,MAAM,CAAC;AACpF,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,OAAO,CAAC;AAE3E,qBACa,QAAS,SAAQ,cAAc;;IAC1C,OAAgB,MAAM,EAAE,cAAc,CAAmC;IAEzE;;OAEG;IACS,OAAO,EAAE,eAAe,CAAY;IAEhD;;OAEG;IACS,KAAK,EAAE,aAAa,CAAa;IAE2B,YAAY,UAAS;IAEpF,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,kBAAkB,CAAS;IACnC,iBAAiB,UAAS;IAEF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAe;IACtD,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAe;IAInD,YAAY,CAAC,iBAAiB,EAAE,cAAc;cAuBpC,oBAAoB,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;cAW/C,cAAc,IAAI,kBAAkB;CAiCxD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,QAAQ,CAAC;KACtB;CACF"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/button/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAE/D,OAAO,EAAQ,kBAAkB,EAAE,MAAM,KAAK,CAAC;AAK/C,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpD,OAAO,qBAAqB,CAAC;AAE7B,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,GAAG,UAAU,GAAG,MAAM,CAAC;AACpF,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,OAAO,CAAC;AAE3E,qBACa,QAAS,SAAQ,cAAc;;IAC1C,OAAgB,MAAM,EAAE,cAAc,CAAmC;IAEzE;;OAEG;IACS,OAAO,EAAE,eAAe,CAAY;IAEhD;;OAEG;IACS,KAAK,EAAE,aAAa,CAAa;IAE7C;;OAEG;IACqE,YAAY,UAAS;IAEpF,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,kBAAkB,CAAS;IACnC,iBAAiB,UAAS;IAEF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAe;IACtD,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAe;IAInD,YAAY,CAAC,iBAAiB,EAAE,cAAc;cAuBpC,oBAAoB,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;cAW/C,cAAc,IAAI,kBAAkB;CAiCxD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,QAAQ,CAAC;KACtB;CACF"}

package/button/button.js

@@ -16,6 +16,9 @@ let UmButton = class UmButton extends UmToggleButton {
          * The Button color
          */
         this.color = 'primary';
+        /**
+         * Whether the slotted icon is rendered after the label instead of before
+         */
         this.trailingIcon = false;
         this._hasIcon = false;
         this._hasSelectionLabel = false;

package/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/button/button.ts"],"names":[],"mappings":"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","sourcesContent":["import { PropertyValues } from '@lit/reactive-element';\nimport { CSSResultGroup } from '@lit/reactive-element/css-tag';\n\nimport { html, HTMLTemplateResult } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { styles } from './button.styles.js';\nimport { UmToggleButton } from './toggle-button.js';\n\nimport '../ripple/ripple.js';\n\nexport type UmButtonVariant = 'filled' | 'tonal' | 'elevated' | 'outlined' | 'text';\nexport type UmButtonColor = 'primary' | 'secondary' | 'tertiary' | 'error';\n\n@customElement('u-button')\nexport class UmButton extends UmToggleButton {\n  static override styles: CSSResultGroup = [UmToggleButton.styles, styles];\n\n  /**\n   * The Button variant to render\n   */\n  @property() variant: UmButtonVariant = 'filled';\n\n  /**\n   * The Button color\n   */\n  @property() color: UmButtonColor = 'primary';\n\n  @property({ type: Boolean, attribute: 'trailing-icon', reflect: true }) trailingIcon = false;\n\n  @state() private _hasIcon = false;\n  @state() private _hasSelectionLabel = false;\n  @state() animateTextChange = false;\n\n  @query('.label-container', true) private readonly _textWrapper!: HTMLElement;\n  @query('#label', true) private readonly _text!: HTMLElement;\n\n  #textSizeObserver!: ResizeObserver | null;\n\n  override firstUpdated(changedProperties: PropertyValues) {\n    super.firstUpdated(changedProperties);\n\n    this.#textSizeObserver = new ResizeObserver(() => this.#setTextWrapperWidth());\n    this.#textSizeObserver.observe(this._text);\n    this.#setTextWrapperWidth();\n  }\n\n  #setTextWrapperWidth(): void {\n\n    const width = `${this._text.offsetWidth}px`;\n    this._textWrapper.style.width = width;\n\n    const animateTextChange = !!parseInt(width, 10);\n\n    if (this.animateTextChange === animateTextChange) {\n      return;\n    }\n\n    setTimeout(() =>\n      this.animateTextChange = animateTextChange);\n  }\n\n  protected override _getContainerClasses(): Record<string, boolean> {\n    return {\n      ...super._getContainerClasses(),\n      [this.color]: true,\n      [this.variant]: true,\n      'trailing-icon': this.trailingIcon,\n      'has-icon': this._hasIcon,\n      'has-selection-label': this._hasSelectionLabel,\n    };\n  }\n\n  protected override _renderContent(): HTMLTemplateResult {\n    const labelContainerClasses = { animate: this.animateTextChange };\n\n    return html`\n      <span class=\"icon-container\" aria-hidden=\"true\">\n        <span class=\"icon icon-default\">\n          <slot name=\"icon\" @slotchange=\"${this.#handleIconSlotChange}\"></slot>\n        </span>\n        <span class=\"icon icon-selected\">\n          <slot name=\"icon-selected\" @slotchange=\"${this._handleSelectedIconSlotChange}\"></slot>\n        </span>\n      </span>\n\n      <span class=\"label-container ${classMap(labelContainerClasses)}\">\n        <span id=\"label\">\n          <span class=\"label label-default\">\n            <slot></slot>\n          </span>\n          <span class=\"label label-selected\">\n            <slot name=\"label-selected\" @slotchange=\"${this.#handleSelectedLabelSlotChange}\"></slot>\n          </span>\n        </span>\n      </span>\n    `;\n  }\n\n  #handleIconSlotChange(e: Event) {\n    this._hasIcon = (e.target as HTMLSlotElement).assignedElements({ flatten: true }).length > 0;\n  }\n\n  #handleSelectedLabelSlotChange(e: Event): void {\n    this._hasSelectionLabel = (e.target as HTMLSlotElement).assignedElements({ flatten: true }).length > 0;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-button': UmButton;\n  }\n}\n"]}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/button/button.ts"],"names":[],"mappings":"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","sourcesContent":["import { PropertyValues } from '@lit/reactive-element';\nimport { CSSResultGroup } from '@lit/reactive-element/css-tag';\n\nimport { html, HTMLTemplateResult } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { styles } from './button.styles.js';\nimport { UmToggleButton } from './toggle-button.js';\n\nimport '../ripple/ripple.js';\n\nexport type UmButtonVariant = 'filled' | 'tonal' | 'elevated' | 'outlined' | 'text';\nexport type UmButtonColor = 'primary' | 'secondary' | 'tertiary' | 'error';\n\n@customElement('u-button')\nexport class UmButton extends UmToggleButton {\n  static override styles: CSSResultGroup = [UmToggleButton.styles, styles];\n\n  /**\n   * The Button variant to render\n   */\n  @property() variant: UmButtonVariant = 'filled';\n\n  /**\n   * The Button color\n   */\n  @property() color: UmButtonColor = 'primary';\n\n  /**\n   * Whether the slotted icon is rendered after the label instead of before\n   */\n  @property({ type: Boolean, attribute: 'trailing-icon', reflect: true }) trailingIcon = false;\n\n  @state() private _hasIcon = false;\n  @state() private _hasSelectionLabel = false;\n  @state() animateTextChange = false;\n\n  @query('.label-container', true) private readonly _textWrapper!: HTMLElement;\n  @query('#label', true) private readonly _text!: HTMLElement;\n\n  #textSizeObserver!: ResizeObserver | null;\n\n  override firstUpdated(changedProperties: PropertyValues) {\n    super.firstUpdated(changedProperties);\n\n    this.#textSizeObserver = new ResizeObserver(() => this.#setTextWrapperWidth());\n    this.#textSizeObserver.observe(this._text);\n    this.#setTextWrapperWidth();\n  }\n\n  #setTextWrapperWidth(): void {\n\n    const width = `${this._text.offsetWidth}px`;\n    this._textWrapper.style.width = width;\n\n    const animateTextChange = !!parseInt(width, 10);\n\n    if (this.animateTextChange === animateTextChange) {\n      return;\n    }\n\n    setTimeout(() =>\n      this.animateTextChange = animateTextChange);\n  }\n\n  protected override _getContainerClasses(): Record<string, boolean> {\n    return {\n      ...super._getContainerClasses(),\n      [this.color]: true,\n      [this.variant]: true,\n      'trailing-icon': this.trailingIcon,\n      'has-icon': this._hasIcon,\n      'has-selection-label': this._hasSelectionLabel,\n    };\n  }\n\n  protected override _renderContent(): HTMLTemplateResult {\n    const labelContainerClasses = { animate: this.animateTextChange };\n\n    return html`\n      <span class=\"icon-container\" aria-hidden=\"true\">\n        <span class=\"icon icon-default\">\n          <slot name=\"icon\" @slotchange=\"${this.#handleIconSlotChange}\"></slot>\n        </span>\n        <span class=\"icon icon-selected\">\n          <slot name=\"icon-selected\" @slotchange=\"${this._handleSelectedIconSlotChange}\"></slot>\n        </span>\n      </span>\n\n      <span class=\"label-container ${classMap(labelContainerClasses)}\">\n        <span id=\"label\">\n          <span class=\"label label-default\">\n            <slot></slot>\n          </span>\n          <span class=\"label label-selected\">\n            <slot name=\"label-selected\" @slotchange=\"${this.#handleSelectedLabelSlotChange}\"></slot>\n          </span>\n        </span>\n      </span>\n    `;\n  }\n\n  #handleIconSlotChange(e: Event) {\n    this._hasIcon = (e.target as HTMLSlotElement).assignedElements({ flatten: true }).length > 0;\n  }\n\n  #handleSelectedLabelSlotChange(e: Event): void {\n    this._hasSelectionLabel = (e.target as HTMLSlotElement).assignedElements({ flatten: true }).length > 0;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-button': UmButton;\n  }\n}\n"]}

package/button/icon-button.d.ts

@@ -4,7 +4,13 @@ export type UmIconButtonVariant = 'standard' | 'filled' | 'tonal' | 'outlined';
 export type UmIconButtonWidth = 'default' | 'narrow' | 'wide';
 export declare class UmIconButton extends UmToggleButton {
     static styles: import("lit").CSSResultGroup[];
+    /**
+     * The Icon Button variant to render
+     */
     variant: UmIconButtonVariant;
+    /**
+     * The width of the Icon Button
+     */
     width: UmIconButtonWidth;
     protected _getContainerClasses(): Record<string, boolean>;
     protected _renderContent(): HTMLTemplateResult;

package/button/icon-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../src/button/icon-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,MAAM,KAAK,CAAC;AAI/C,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpD,MAAM,MAAM,mBAAmB,GAAG,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,CAAC;AAC/E,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE9D,qBACa,YAAa,SAAQ,cAAc;IAE9C,OAAgB,MAAM,iCAAmC;IAE7C,OAAO,EAAE,mBAAmB,CAAc;IAC1C,KAAK,EAAE,iBAAiB,CAAa;cAE9B,oBAAoB,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;cAQ/C,cAAc,IAAI,kBAAkB;CAaxD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAC;KAC/B;CACF"}
+{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../src/button/icon-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,MAAM,KAAK,CAAC;AAI/C,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpD,MAAM,MAAM,mBAAmB,GAAG,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,CAAC;AAC/E,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE9D,qBACa,YAAa,SAAQ,cAAc;IAE9C,OAAgB,MAAM,iCAAmC;IAEzD;;OAEG;IACS,OAAO,EAAE,mBAAmB,CAAc;IAEtD;;OAEG;IACS,KAAK,EAAE,iBAAiB,CAAa;cAE9B,oBAAoB,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;cAQ/C,cAAc,IAAI,kBAAkB;CAaxD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAC;KAC/B;CACF"}

package/button/icon-button.js

@@ -6,7 +6,13 @@ import { UmToggleButton } from './toggle-button.js';
 let UmIconButton = class UmIconButton extends UmToggleButton {
     constructor() {
         super(...arguments);
+        /**
+         * The Icon Button variant to render
+         */
         this.variant = 'standard';
+        /**
+         * The width of the Icon Button
+         */
         this.width = 'default';
     }
     static { this.styles = [UmToggleButton.styles, styles]; }

package/button/icon-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.js","sourceRoot":"","sources":["../../src/button/icon-button.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAsB,MAAM,KAAK,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAM7C,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,cAAc;IAAzC;;QAIO,YAAO,GAAwB,UAAU,CAAC;QAC1C,UAAK,GAAsB,SAAS,CAAC;IAuBnD,CAAC;aA1BiB,WAAM,GAAG,CAAC,cAAc,CAAC,MAAM,EAAE,MAAM,CAAC,AAAlC,CAAmC;IAKtC,oBAAoB;QACrC,OAAO;YACL,GAAG,KAAK,CAAC,oBAAoB,EAAE;YAC/B,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,IAAI;YACpB,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,IAAI;SACnB,CAAC;IACJ,CAAC;IAEkB,cAAc;QAE/B,OAAO,IAAI,CAAA;;;;;;+CAMgC,IAAI,CAAC,6BAA6B;;;KAG5E,CAAC;IACJ,CAAC;;AAvBW;IAAX,QAAQ,EAAE;6CAA2C;AAC1C;IAAX,QAAQ,EAAE;2CAAsC;AALtC,YAAY;IADxB,aAAa,CAAC,eAAe,CAAC;GAClB,YAAY,CA4BxB","sourcesContent":["import { html, HTMLTemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { styles } from './icon-button.styles.js';\nimport { UmToggleButton } from './toggle-button.js';\n\nexport type UmIconButtonVariant = 'standard' | 'filled' | 'tonal' | 'outlined';\nexport type UmIconButtonWidth = 'default' | 'narrow' | 'wide';\n\n@customElement('u-icon-button')\nexport class UmIconButton extends UmToggleButton {\n\n  static override styles = [UmToggleButton.styles, styles];\n\n  @property() variant: UmIconButtonVariant = 'standard';\n  @property() width: UmIconButtonWidth = 'default';\n\n  protected override _getContainerClasses(): Record<string, boolean> {\n    return {\n      ...super._getContainerClasses(),\n      [this.variant]: true,\n      [this.width]: true,\n    };\n  }\n\n  protected override _renderContent(): HTMLTemplateResult {\n\n    return html`\n      <span class=\"icon-container\" aria-hidden=\"true\">\n        <span class=\"icon icon-default\">\n          <slot></slot>\n        </span>\n        <span class=\"icon icon-selected\">\n          <slot name=\"selected\" @slotchange=\"${this._handleSelectedIconSlotChange}\"></slot>\n        </span>\n      </span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-icon-button': UmIconButton;\n  }\n}\n"]}
+{"version":3,"file":"icon-button.js","sourceRoot":"","sources":["../../src/button/icon-button.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAsB,MAAM,KAAK,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAM7C,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,cAAc;IAAzC;;QAIL;;WAEG;QACS,YAAO,GAAwB,UAAU,CAAC;QAEtD;;WAEG;QACS,UAAK,GAAsB,SAAS,CAAC;IAuBnD,CAAC;aAjCiB,WAAM,GAAG,CAAC,cAAc,CAAC,MAAM,EAAE,MAAM,CAAC,AAAlC,CAAmC;IAYtC,oBAAoB;QACrC,OAAO;YACL,GAAG,KAAK,CAAC,oBAAoB,EAAE;YAC/B,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,IAAI;YACpB,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,IAAI;SACnB,CAAC;IACJ,CAAC;IAEkB,cAAc;QAE/B,OAAO,IAAI,CAAA;;;;;;+CAMgC,IAAI,CAAC,6BAA6B;;;KAG5E,CAAC;IACJ,CAAC;;AA3BW;IAAX,QAAQ,EAAE;6CAA2C;AAK1C;IAAX,QAAQ,EAAE;2CAAsC;AAZtC,YAAY;IADxB,aAAa,CAAC,eAAe,CAAC;GAClB,YAAY,CAmCxB","sourcesContent":["import { html, HTMLTemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { styles } from './icon-button.styles.js';\nimport { UmToggleButton } from './toggle-button.js';\n\nexport type UmIconButtonVariant = 'standard' | 'filled' | 'tonal' | 'outlined';\nexport type UmIconButtonWidth = 'default' | 'narrow' | 'wide';\n\n@customElement('u-icon-button')\nexport class UmIconButton extends UmToggleButton {\n\n  static override styles = [UmToggleButton.styles, styles];\n\n  /**\n   * The Icon Button variant to render\n   */\n  @property() variant: UmIconButtonVariant = 'standard';\n\n  /**\n   * The width of the Icon Button\n   */\n  @property() width: UmIconButtonWidth = 'default';\n\n  protected override _getContainerClasses(): Record<string, boolean> {\n    return {\n      ...super._getContainerClasses(),\n      [this.variant]: true,\n      [this.width]: true,\n    };\n  }\n\n  protected override _renderContent(): HTMLTemplateResult {\n\n    return html`\n      <span class=\"icon-container\" aria-hidden=\"true\">\n        <span class=\"icon icon-default\">\n          <slot></slot>\n        </span>\n        <span class=\"icon icon-selected\">\n          <slot name=\"selected\" @slotchange=\"${this._handleSelectedIconSlotChange}\"></slot>\n        </span>\n      </span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-icon-button': UmIconButton;\n  }\n}\n"]}

package/button-field/button-field.d.ts

@@ -3,6 +3,9 @@ import { UmTextFieldBase } from '../shared/text-field-base/text-field-base.js';
 export declare class UmButtonField extends UmTextFieldBase {
     static styles: import("lit").CSSResultGroup[];
     protected _value: string;
+    /**
+     * The current value of the field, submitted with the associated form
+     */
     get value(): string;
     set value(value: string);
     _button: HTMLButtonElement;

package/button-field/button-field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button-field.d.ts","sourceRoot":"","sources":["../../src/button-field/button-field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAI3C,OAAO,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAG/E,qBACa,aAAc,SAAQ,eAAe;IAChD,OAAgB,MAAM,iCAAoC;IAE1D,SAAS,CAAC,MAAM,SAAM;IACtB,IACI,KAAK,IAIQ,MAAM,CAFtB;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAItB;IAEuB,OAAO,EAAG,iBAAiB,CAAC;IAC7B,MAAM,EAAG,WAAW,CAAC;cAEzB,aAAa,IAAI,cAAc;cAa/B,kBAAkB,IAAI,cAAc;CAOxD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,aAAa,CAAC;KACjC;CACF"}
+{"version":3,"file":"button-field.d.ts","sourceRoot":"","sources":["../../src/button-field/button-field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAI3C,OAAO,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAG/E,qBACa,aAAc,SAAQ,eAAe;IAChD,OAAgB,MAAM,iCAAoC;IAE1D,SAAS,CAAC,MAAM,SAAM;IAEtB;;OAEG;IACH,IACI,KAAK,IAIQ,MAAM,CAFtB;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAItB;IAEuB,OAAO,EAAG,iBAAiB,CAAC;IAC7B,MAAM,EAAG,WAAW,CAAC;cAEzB,aAAa,IAAI,cAAc;cAa/B,kBAAkB,IAAI,cAAc;CAOxD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,aAAa,CAAC;KACjC;CACF"}

package/button-field/button-field.js

@@ -10,6 +10,9 @@ let UmButtonField = class UmButtonField extends UmTextFieldBase {
         this._value = '';
     }
     static { this.styles = [UmTextFieldBase.styles, styles]; }
+    /**
+     * The current value of the field, submitted with the associated form
+     */
     get value() {
         return this._value;
     }

package/button-field/button-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-field.js","sourceRoot":"","sources":["../../src/button-field/button-field.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,IAAI,IAAI,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAExD,OAAO,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAC/E,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAG3C,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,eAAe;IAA3C;;QAGK,WAAM,GAAG,EAAE,CAAC;IAmCxB,CAAC;aArCiB,WAAM,GAAG,CAAC,eAAe,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnC,CAAoC;IAI1D,IAAI,KAAK;QACP,OAAO,IAAI,CAAC,MAAM,CAAC;IACrB,CAAC;IAED,IAAI,KAAK,CAAC,KAAa;QACrB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,KAAK,GAAG,CAAC,KAAK,CAAC;QACpB,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IAC5C,CAAC;IAKkB,aAAa;QAC9B,OAAO,UAAU,CAAA;;;;;qBAKA,IAAI,CAAC,QAAQ;;gBAElB,IAAI,CAAC,KAAK;;4BAEE,IAAI,CAAC,QAAQ,cAAc,CAAC;IACtD,CAAC;IAEkB,kBAAkB;QACnC,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;;AAhCD;IADC,QAAQ,EAAE;0CAGV;AAQuB;IAAvB,KAAK,CAAC,SAAS,EAAE,IAAI,CAAC;8CAA6B;AAC7B;IAAtB,KAAK,CAAC,QAAQ,EAAE,IAAI,CAAC;6CAAsB;AAhBjC,aAAa;IADzB,aAAa,CAAC,gBAAgB,CAAC;GACnB,aAAa,CAsCzB","sourcesContent":["import { html, TemplateResult } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { html as staticHtml } from 'lit/static-html.js';\n\nimport { UmTextFieldBase } from '../shared/text-field-base/text-field-base.js';\nimport { styles } from './button-field.styles.js';\n\n@customElement('u-button-field')\nexport class UmButtonField extends UmTextFieldBase {\n  static override styles = [UmTextFieldBase.styles, styles];\n\n  protected _value = '';\n  @property()\n  get value() {\n    return this._value;\n  }\n\n  set value(value: string) {\n    this._value = value;\n    this.empty = !value;\n    this.elementInternals.setFormValue(value);\n  }\n\n  @query('.button', true) _button!: HTMLButtonElement;\n  @query('.input', true) _input!: HTMLElement;\n\n  protected override renderControl(): TemplateResult {\n    return staticHtml`\n      <button \n         class=\"button\"\n         aria-expanded=\"false\"\n         aria-owns=\"select\"\n         ?disabled=${this.disabled}></button>\n      <div class=\"input\">\n        <slot>${this.value}</slot>\n      </div>\n      <u-ripple ?disabled=${this.disabled}></u-ripple>`;\n  }\n\n  protected override renderAfterContent(): TemplateResult {\n    return html`\n      <u-menu>\n        <slot></slot>\n      </u-menu>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-button-field': UmButtonField;\n  }\n}\n"]}
+{"version":3,"file":"button-field.js","sourceRoot":"","sources":["../../src/button-field/button-field.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,IAAI,IAAI,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAExD,OAAO,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAC/E,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAG3C,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,eAAe;IAA3C;;QAGK,WAAM,GAAG,EAAE,CAAC;IAuCxB,CAAC;aAzCiB,WAAM,GAAG,CAAC,eAAe,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnC,CAAoC;IAI1D;;OAEG;IAEH,IAAI,KAAK;QACP,OAAO,IAAI,CAAC,MAAM,CAAC;IACrB,CAAC;IAED,IAAI,KAAK,CAAC,KAAa;QACrB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,KAAK,GAAG,CAAC,KAAK,CAAC;QACpB,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IAC5C,CAAC;IAKkB,aAAa;QAC9B,OAAO,UAAU,CAAA;;;;;qBAKA,IAAI,CAAC,QAAQ;;gBAElB,IAAI,CAAC,KAAK;;4BAEE,IAAI,CAAC,QAAQ,cAAc,CAAC;IACtD,CAAC;IAEkB,kBAAkB;QACnC,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;;AAhCD;IADC,QAAQ,EAAE;0CAGV;AAQuB;IAAvB,KAAK,CAAC,SAAS,EAAE,IAAI,CAAC;8CAA6B;AAC7B;IAAtB,KAAK,CAAC,QAAQ,EAAE,IAAI,CAAC;6CAAsB;AApBjC,aAAa;IADzB,aAAa,CAAC,gBAAgB,CAAC;GACnB,aAAa,CA0CzB","sourcesContent":["import { html, TemplateResult } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { html as staticHtml } from 'lit/static-html.js';\n\nimport { UmTextFieldBase } from '../shared/text-field-base/text-field-base.js';\nimport { styles } from './button-field.styles.js';\n\n@customElement('u-button-field')\nexport class UmButtonField extends UmTextFieldBase {\n  static override styles = [UmTextFieldBase.styles, styles];\n\n  protected _value = '';\n\n  /**\n   * The current value of the field, submitted with the associated form\n   */\n  @property()\n  get value() {\n    return this._value;\n  }\n\n  set value(value: string) {\n    this._value = value;\n    this.empty = !value;\n    this.elementInternals.setFormValue(value);\n  }\n\n  @query('.button', true) _button!: HTMLButtonElement;\n  @query('.input', true) _input!: HTMLElement;\n\n  protected override renderControl(): TemplateResult {\n    return staticHtml`\n      <button \n         class=\"button\"\n         aria-expanded=\"false\"\n         aria-owns=\"select\"\n         ?disabled=${this.disabled}></button>\n      <div class=\"input\">\n        <slot>${this.value}</slot>\n      </div>\n      <u-ripple ?disabled=${this.disabled}></u-ripple>`;\n  }\n\n  protected override renderAfterContent(): TemplateResult {\n    return html`\n      <u-menu>\n        <slot></slot>\n      </u-menu>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-button-field': UmButtonField;\n  }\n}\n"]}

package/calendar/calendar-adapter.d.ts

@@ -1,6 +1,9 @@
 export interface CalendarAdapter {
     getWeekDays(locale: string): string[];
+    getFirstDayOfWeek(locale: string): number;
     getDay(date: Date): string;
     getMonth(date: Date): string;
+    getYear(date: Date): string;
+    getMonthShort(month: number, locale: string): string;
 }
 //# sourceMappingURL=calendar-adapter.d.ts.map

package/calendar/calendar-adapter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"calendar-adapter.d.ts","sourceRoot":"","sources":["../../src/calendar/calendar-adapter.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,eAAe;IAC9B,WAAW,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACtC,MAAM,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,CAAC;IAC3B,QAAQ,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,CAAC;CAC9B"}
+{"version":3,"file":"calendar-adapter.d.ts","sourceRoot":"","sources":["../../src/calendar/calendar-adapter.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,eAAe;IAC9B,WAAW,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACtC,iBAAiB,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1C,MAAM,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,CAAC;IAC3B,QAAQ,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,CAAC;IAC7B,OAAO,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,CAAC;IAC5B,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;CACtD"}

package/calendar/calendar-adapter.js.map

@@ -1 +1 @@
-{"version":3,"file":"calendar-adapter.js","sourceRoot":"","sources":["../../src/calendar/calendar-adapter.ts"],"names":[],"mappings":"","sourcesContent":["export interface CalendarAdapter {\n  getWeekDays(locale: string): string[];\n  getDay(date: Date): string;\n  getMonth(date: Date): string;\n}\n"]}
+{"version":3,"file":"calendar-adapter.js","sourceRoot":"","sources":["../../src/calendar/calendar-adapter.ts"],"names":[],"mappings":"","sourcesContent":["export interface CalendarAdapter {\n  getWeekDays(locale: string): string[];\n  getFirstDayOfWeek(locale: string): number;\n  getDay(date: Date): string;\n  getMonth(date: Date): string;\n  getYear(date: Date): string;\n  getMonthShort(month: number, locale: string): string;\n}\n"]}

package/calendar/calendar-base.d.ts

@@ -3,22 +3,39 @@ import { HTMLTemplateResult, LitElement } from 'lit';
 import { DirectiveResult } from 'lit-html/directive.js';
 import { ClassMapDirective } from 'lit-html/directives/class-map';
 import { DefaultCalendarAdapter } from './default-calendar-adapter.js';
+export type CalendarView = 'day' | 'month' | 'year';
 export declare abstract class UmCalendarBase extends LitElement {
     #private;
     static styles: CSSResultGroup;
     weekDays: string[];
+    private _firstDayOfWeek;
     dateRenderer: ((date: Date, day: string) => HTMLElement) | null;
+    /**
+     * Whether to render dates from the previous and next months that
+     * fall inside the displayed weeks
+     */
     dateOutsideMonth: boolean;
+    /**
+     * Number of years displayed per page in the year picker view.
+     */
+    yearRange: number;
     get year(): number;
     set year(year: number);
     get month(): number;
     set month(month: number);
     _displayingMonthDate: Date;
+    view: CalendarView;
+    _yearPageStart: number;
+    /**
+     * The BCP 47 locale tag used to format month names and weekdays.
+     * When `null`, falls back to the browser's `navigator.language`.
+     */
     locale: string | null;
     _innerLocale: string;
     adapter: DefaultCalendarAdapter;
     protected constructor();
     connectedCallback(): void;
+    willUpdate(changed: Map<string, unknown>): void;
     render(): HTMLTemplateResult;
     protected _getCalendarClassMap(): DirectiveResult<typeof ClassMapDirective> | null;
     protected abstract _selectDate(date: Date): void;

package/calendar/calendar-base.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"calendar-base.d.ts","sourceRoot":"","sources":["../../src/calendar/calendar-base.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAE/D,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAKlE,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAEvE,8BAAsB,cAAe,SAAQ,UAAU;;IACrD,OAAgB,MAAM,EAAE,cAAc,CAAY;IAEzC,QAAQ,EAAE,MAAM,EAAE,CAAM;IACxB,YAAY,EAAE,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,WAAW,CAAC,GAAG,IAAI,CAAQ;IACnD,gBAAgB,UAAS;IAEtD,IAAI,IAAI,IAAI,MAAM,CAEjB;IAED,IAAI,IAAI,CAAC,IAAI,EAAE,MAAM,EAGpB;IAED,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAGtB;IAGQ,oBAAoB,EAAE,IAAI,CAAC;IAExB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAQ;IACzC,YAAY,EAAE,MAAM,CAAsB;IAC1C,OAAO,yBAAgC;IAEvC,SAAS;IAWA,iBAAiB;IAejB,MAAM,IAAI,kBAAkB;IAwGrC,SAAS,CAAC,oBAAoB,IAAI,eAAe,CAAC,OAAO,iBAAiB,CAAC,GAAG,IAAI;IAIlF,SAAS,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI;IAChD,SAAS,CAAC,QAAQ,CAAC,uBAAuB,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAE/E,SAAS,CAAC,mBAAmB,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAQpD,SAAS,CAAC,cAAc,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,MAAM;IAenD,SAAS,CAAC,kBAAkB,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;CAqB9D"}
+{"version":3,"file":"calendar-base.d.ts","sourceRoot":"","sources":["../../src/calendar/calendar-base.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAE/D,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAKlE,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAEvE,MAAM,MAAM,YAAY,GAAG,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;AAEpD,8BAAsB,cAAe,SAAQ,UAAU;;IACrD,OAAgB,MAAM,EAAE,cAAc,CAAY;IAEzC,QAAQ,EAAE,MAAM,EAAE,CAAM;IACxB,OAAO,CAAC,eAAe,CAAK;IAC5B,YAAY,EAAE,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,WAAW,CAAC,GAAG,IAAI,CAAQ;IAChF;;;OAGG;IAC0B,gBAAgB,UAAS;IAEtD;;OAEG;IACkD,SAAS,SAAM;IAEpE,IAAI,IAAI,IAAI,MAAM,CAEjB;IAED,IAAI,IAAI,CAAC,IAAI,EAAE,MAAM,EAEpB;IAED,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;IAGQ,oBAAoB,EAAE,IAAI,CAAC;IAC3B,IAAI,EAAE,YAAY,CAAS;IAC3B,cAAc,SAAK;IAE5B;;;OAGG;IACS,MAAM,EAAE,MAAM,GAAG,IAAI,CAAQ;IACzC,YAAY,EAAE,MAAM,CAAsB;IAC1C,OAAO,yBAAgC;IAEvC,SAAS;IAYA,iBAAiB;IAejB,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAO/C,MAAM,IAAI,kBAAkB;IA+PrC,SAAS,CAAC,oBAAoB,IAAI,eAAe,CAAC,OAAO,iBAAiB,CAAC,GAAG,IAAI;IAIlF,SAAS,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI;IAChD,SAAS,CAAC,QAAQ,CAAC,uBAAuB,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAE/E,SAAS,CAAC,mBAAmB,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAQpD,SAAS,CAAC,cAAc,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,MAAM;IAenD,SAAS,CAAC,kBAAkB,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;CAuB9D"}

package/calendar/calendar-base.js

@@ -10,32 +10,81 @@ export class UmCalendarBase extends LitElement {
         return this._displayingMonthDate.getFullYear();
     }
     set year(year) {
-        this._displayingMonthDate.setFullYear(year);
-        this._displayingMonthDate = new Date(this._displayingMonthDate);
+        this._displayingMonthDate = new Date(year, this._displayingMonthDate.getMonth(), 1);
     }
     get month() {
         return this._displayingMonthDate.getMonth();
     }
     set month(month) {
-        this._displayingMonthDate.setMonth(month);
-        this._displayingMonthDate = new Date(this._displayingMonthDate);
+        this._displayingMonthDate = new Date(this._displayingMonthDate.getFullYear(), month, 1);
     }
     #currentDate;
     constructor() {
         super();
         this.weekDays = [];
+        this._firstDayOfWeek = 0;
         this.dateRenderer = null;
+        /**
+         * Whether to render dates from the previous and next months that
+         * fall inside the displayed weeks
+         */
         this.dateOutsideMonth = false;
+        /**
+         * Number of years displayed per page in the year picker view.
+         */
+        this.yearRange = 24;
         this.#currentDate = new Date();
+        this.view = 'day';
+        this._yearPageStart = 0;
+        /**
+         * The BCP 47 locale tag used to format month names and weekdays.
+         * When `null`, falls back to the browser's `navigator.language`.
+         */
         this.locale = null;
         this._innerLocale = navigator.language;
         this.adapter = new DefaultCalendarAdapter();
+        this.#toggleYearView = () => {
+            if (this.view === 'day') {
+                this._yearPageStart = this.#computeYearPageStart(this.year);
+                this.view = 'year';
+                return;
+            }
+            if (this.view === 'month') {
+                this._yearPageStart = this.#computeYearPageStart(this.year);
+                this.view = 'year';
+                return;
+            }
+            this.view = 'day';
+        };
+        this.#handlePrevClick = () => {
+            if (this.view === 'year') {
+                this._yearPageStart -= this.yearRange;
+                return;
+            }
+            if (this.view === 'month') {
+                this.year -= 1;
+                return;
+            }
+            this.#addMonth(-1);
+        };
+        this.#handleNextClick = () => {
+            if (this.view === 'year') {
+                this._yearPageStart += this.yearRange;
+                return;
+            }
+            if (this.view === 'month') {
+                this.year += 1;
+                return;
+            }
+            this.#addMonth(1);
+        };
         this.#currentDate.setHours(0);
         this.#currentDate.setMinutes(0);
         this.#currentDate.setSeconds(0);
         this.#currentDate.setMilliseconds(0);
         this._displayingMonthDate = new Date(this.#currentDate);
         this._displayingMonthDate.setDate(1);
+        this._yearPageStart = this.#computeYearPageStart(this.year);
     }
     connectedCallback() {
         super.connectedCallback();
@@ -48,14 +97,29 @@ export class UmCalendarBase extends LitElement {
             this.#setLocaleDependantProperties();
         });
     }
+    willUpdate(changed) {
+        if (changed.has('locale')) {
+            this._innerLocale = this.locale ?? navigator.language;
+            this.#setLocaleDependantProperties();
+        }
+    }
     render() {
         return html `
       <div>
         <u-button-set>
-          <u-button class="month-button" type="button" variant="text">
-            ${this.adapter.getMonth(this.#getDisplayingMonthDate())}
+          <u-button class="month-button" type="button" variant="text" @click=${this.#toggleYearView}>
+            ${this.#getHeaderLabel()}
+            <svg
+              class="month-button-icon ${this.view !== 'day' ? 'open' : ''}"
+              xmlns="http://www.w3.org/2000/svg"
+              height="1.5em"
+              viewBox="0 -960 960 960"
+              width="1.5em"
+              fill="currentColor">
+              <path d="M480-360 280-560h400L480-360Z" />
+            </svg>
           </u-button>
-          <u-icon-button class="previous-month-button" @click=${() => this.#addMonth(-1)}>
+          <u-icon-button class="previous-month-button" @click=${this.#handlePrevClick}>
             <svg
               xmlns="http://www.w3.org/2000/svg"
               height="1em"
@@ -65,7 +129,7 @@ export class UmCalendarBase extends LitElement {
               <path d="M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z" />
             </svg>
           </u-icon-button>
-          <u-icon-button @click=${() => this.#addMonth(1)}>
+          <u-icon-button @click=${this.#handleNextClick}>
             <svg
               xmlns="http://www.w3.org/2000/svg"
               height="1em"
@@ -77,9 +141,26 @@ export class UmCalendarBase extends LitElement {
           </u-icon-button>
         </u-button-set>
       </div>
+      ${this.#renderBody()}
+    `;
+    }
+    #renderBody() {
+        if (this.view === 'year') {
+            return html `<div class="year-grid">${this.#renderYears()}</div>`;
+        }
+        if (this.view === 'month') {
+            return html `<div class="month-grid">${this.#renderMonths()}</div>`;
+        }
+        return html `
       <div class="calendar ${this._getCalendarClassMap()}">${this.#renderWeekDays()}${this.#renderDays()}</div>
     `;
     }
+    #getHeaderLabel() {
+        if (this.view === 'month') {
+            return this.adapter.getYear(this.#getDisplayingMonthDate());
+        }
+        return this.adapter.getMonth(this.#getDisplayingMonthDate());
+    }
     #renderWeekDays() {
         return this.weekDays.map(weekDay => html `
           <div class="calendar-item">
@@ -88,15 +169,16 @@ export class UmCalendarBase extends LitElement {
         `);
     }
     #getDisplayingMonthDate() {
-        return this._getDateFromIsoDate(`${this.year}-${this.month + 1}-1`);
+        return new Date(this.year, this.month, 1);
     }
     #renderDays() {
-        const date = new Date(this._displayingMonthDate);
-        date.setDate(date.getDate() - date.getDay());
-        const month = this.month;
         const year = this.year;
+        const month = this.month;
+        const firstOfMonth = new Date(year, month, 1);
+        const diffToFirstDayOfWeek = (firstOfMonth.getDay() - this._firstDayOfWeek + 7) % 7;
+        const date = new Date(year, month, 1 - diffToFirstDayOfWeek);
         const daysTemplates = [];
-        do {
+        for (let row = 0; row < 6; row++) {
             for (let i = 0; i < 7; i++) {
                 const dateOutsideMonth = date.getMonth() !== month;
                 const dateClasses = this._getSelectedDateClasses(date);
@@ -107,31 +189,98 @@ export class UmCalendarBase extends LitElement {
                     dateClasses['date-outside-month'] = true;
                 }
                 const classes = classMap(dateClasses);
-                const dateTemplate = dateOutsideMonth && !this.dateOutsideMonth
-                    ? null
-                    : html `
+                const renderDate = !dateOutsideMonth || this.dateOutsideMonth;
+                const dateTemplate = renderDate
+                    ? html `
               <u-ripple></u-ripple>
               <span class="date">
                 ${this.dateRenderer
                         ? this.dateRenderer(new Date(date), this.adapter.getDay(date))
                         : this.adapter.getDay(date)}
               </span>
-            `;
+            `
+                    : null;
+                const click = renderDate ? this.#handleDateClick(new Date(date)) : null;
                 daysTemplates.push(html `
           <div
             class="calendar-item ${classes}"
-            @click=${this.#handleDateClick(new Date(date))}>
+            @click=${click}>
             ${dateTemplate}
           </div>
         `);
                 date.setDate(date.getDate() + 1);
             }
-        } while (date.getMonth() <= month && date.getFullYear() <= year);
+        }
         return daysTemplates;
     }
+    #renderYears() {
+        const templates = [];
+        const currentYear = this.#currentDate.getFullYear();
+        const selectedYear = this.year;
+        for (let i = 0; i < this.yearRange; i++) {
+            const year = this._yearPageStart + i;
+            const classes = classMap({
+                'year-cell': true,
+                'current-year': year === currentYear && year !== selectedYear,
+                'selected-year': year === selectedYear,
+            });
+            templates.push(html `
+        <div class=${classes} @click=${this.#handleYearClick(year)}>
+          <span class="year-label">
+            <u-ripple></u-ripple>
+            ${year}
+          </span>
+        </div>
+      `);
+        }
+        return templates;
+    }
+    #renderMonths() {
+        const templates = [];
+        const currentYear = this.#currentDate.getFullYear();
+        const currentMonth = this.#currentDate.getMonth();
+        const selectedMonth = this.month;
+        const displayedYear = this.year;
+        for (let month = 0; month < 12; month++) {
+            const isCurrent = displayedYear === currentYear && month === currentMonth;
+            const isSelected = month === selectedMonth;
+            const classes = classMap({
+                'month-cell': true,
+                'current-month': isCurrent && !isSelected,
+                'selected-month': isSelected,
+            });
+            templates.push(html `
+        <div class=${classes} @click=${this.#handleMonthClick(month)}>
+          <span class="month-label">
+            <u-ripple></u-ripple>
+            ${this.adapter.getMonthShort(month, this._innerLocale)}
+          </span>
+        </div>
+      `);
+        }
+        return templates;
+    }
     #handleDateClick(date) {
         return () => this._selectDate(date);
     }
+    #handleYearClick(year) {
+        return () => {
+            this.year = year;
+            this.view = 'month';
+        };
+    }
+    #handleMonthClick(month) {
+        return () => {
+            this.month = month;
+            this.view = 'day';
+        };
+    }
+    #toggleYearView;
+    #handlePrevClick;
+    #handleNextClick;
+    #computeYearPageStart(year) {
+        return year - Math.floor(this.yearRange / 2);
+    }
     _getCalendarClassMap() {
         return null;
     }
@@ -167,21 +316,35 @@ export class UmCalendarBase extends LitElement {
         this.month += value;
     }
     #setLocaleDependantProperties() {
+        this.adapter.locale = this._innerLocale;
         this.weekDays = this.adapter.getWeekDays(this._innerLocale);
+        this._firstDayOfWeek = this.adapter.getFirstDayOfWeek(this._innerLocale);
     }
 }
 __decorate([
     state()
 ], UmCalendarBase.prototype, "weekDays", void 0);
+__decorate([
+    state()
+], UmCalendarBase.prototype, "_firstDayOfWeek", void 0);
 __decorate([
     state()
 ], UmCalendarBase.prototype, "dateRenderer", void 0);
 __decorate([
     property({ type: Boolean })
 ], UmCalendarBase.prototype, "dateOutsideMonth", void 0);
+__decorate([
+    property({ type: Number, attribute: 'year-range' })
+], UmCalendarBase.prototype, "yearRange", void 0);
 __decorate([
     state()
 ], UmCalendarBase.prototype, "_displayingMonthDate", void 0);
+__decorate([
+    state()
+], UmCalendarBase.prototype, "view", void 0);
+__decorate([
+    state()
+], UmCalendarBase.prototype, "_yearPageStart", void 0);
 __decorate([
     property()
 ], UmCalendarBase.prototype, "locale", void 0);