@universal-material/web 3.7.2 → 3.9.0

package/elevation/elevation.js

@@ -2,15 +2,15 @@ import { __decorate } from "tslib";
 import { LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { styles } from './elevation.styles.js';
-let UmElevation = class UmElevation extends LitElement {
+let Elevation = class Elevation extends LitElement {
     static { this.styles = styles; }
     connectedCallback() {
         super.connectedCallback();
         this.ariaHidden = 'true';
     }
 };
-UmElevation = __decorate([
+Elevation = __decorate([
     customElement('u-elevation')
-], UmElevation);
-export { UmElevation };
+], Elevation);
+export { Elevation };
 //# sourceMappingURL=elevation.js.map

package/elevation/elevation.js.map

@@ -1 +1 @@
-{"version":3,"file":"elevation.js","sourceRoot":"","sources":["../../src/elevation/elevation.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAGxC,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;aACzB,WAAM,GAAG,MAAM,AAAT,CAAU;IAEvB,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC;IAC3B,CAAC;;AANU,WAAW;IADvB,aAAa,CAAC,aAAa,CAAC;GAChB,WAAW,CAOvB","sourcesContent":["import { LitElement } from 'lit';\nimport { customElement } from 'lit/decorators.js';\n\nimport { styles } from './elevation.styles.js';\n\n@customElement('u-elevation')\nexport class UmElevation extends LitElement {\n  static override styles = styles;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.ariaHidden = 'true';\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-elevation': UmElevation;\n  }\n}\n"]}
+{"version":3,"file":"elevation.js","sourceRoot":"","sources":["../../src/elevation/elevation.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAGxC,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;aACvB,WAAM,GAAG,MAAM,AAAT,CAAU;IAEvB,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC;IAC3B,CAAC;;AANU,SAAS;IADrB,aAAa,CAAC,aAAa,CAAC;GAChB,SAAS,CAOrB","sourcesContent":["import { LitElement } from 'lit';\nimport { customElement } from 'lit/decorators.js';\n\nimport { styles } from './elevation.styles.js';\n\n@customElement('u-elevation')\nexport class Elevation extends LitElement {\n  static override styles = styles;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.ariaHidden = 'true';\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-elevation': Elevation;\n  }\n}\n"]}

package/expansion-panel/expansion-panel-container.d.ts

@@ -0,0 +1,24 @@
+import { HTMLTemplateResult, LitElement } from 'lit';
+/**
+ * Coordinates a group of `<u-expansion-panel>` children. When `multi` is `false`
+ * (default), opening one panel closes the others.
+ *
+ * @slot - Default slot for `<u-expansion-panel>` children.
+ */
+export declare class ExpansionPanelContainer extends LitElement {
+    #private;
+    static styles: import("lit").CSSResult[];
+    /**
+     * When `true`, multiple panels may be expanded simultaneously.
+     */
+    multi: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): HTMLTemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-expansion-panel-container': ExpansionPanelContainer;
+    }
+}
+//# sourceMappingURL=expansion-panel-container.d.ts.map

package/expansion-panel/expansion-panel-container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"expansion-panel-container.d.ts","sourceRoot":"","sources":["../../src/expansion-panel/expansion-panel-container.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAO3D;;;;;GAKG;AACH,qBACa,uBAAwB,SAAQ,UAAU;;IACrD,OAAgB,MAAM,4BAAwB;IAE9C;;OAEG;IACyC,KAAK,UAAS;IAEjD,iBAAiB;IAKjB,oBAAoB;IAKpB,MAAM,IAAI,kBAAkB;CActC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,6BAA6B,EAAE,uBAAuB,CAAC;KACxD;CACF"}

package/expansion-panel/expansion-panel-container.js

@@ -0,0 +1,54 @@
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { styles as baseStyles } from '../shared/base.styles.js';
+import { ExpansionPanel } from './expansion-panel.js';
+import { styles } from './expansion-panel-container.styles.js';
+/**
+ * Coordinates a group of `<u-expansion-panel>` children. When `multi` is `false`
+ * (default), opening one panel closes the others.
+ *
+ * @slot - Default slot for `<u-expansion-panel>` children.
+ */
+let ExpansionPanelContainer = class ExpansionPanelContainer extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * When `true`, multiple panels may be expanded simultaneously.
+         */
+        this.multi = false;
+        this.#handlePanelChange = (event) => {
+            if (this.multi)
+                return;
+            const target = event.target;
+            if (!(target instanceof ExpansionPanel) || !target.expanded)
+                return;
+            for (const panel of this.querySelectorAll('u-expansion-panel')) {
+                if (panel !== target && panel.expanded) {
+                    panel.expanded = false;
+                }
+            }
+        };
+    }
+    static { this.styles = [baseStyles, styles]; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('change', this.#handlePanelChange);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('change', this.#handlePanelChange);
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+    #handlePanelChange;
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], ExpansionPanelContainer.prototype, "multi", void 0);
+ExpansionPanelContainer = __decorate([
+    customElement('u-expansion-panel-container')
+], ExpansionPanelContainer);
+export { ExpansionPanelContainer };
+//# sourceMappingURL=expansion-panel-container.js.map

package/expansion-panel/expansion-panel-container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"expansion-panel-container.js","sourceRoot":"","sources":["../../src/expansion-panel/expansion-panel-container.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAsB,UAAU,EAAE,MAAM,KAAK,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,uCAAuC,CAAC;AAE/D;;;;;GAKG;AAEI,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,UAAU;IAAhD;;QAGL;;WAEG;QACyC,UAAK,GAAG,KAAK,CAAC;QAgB1D,uBAAkB,GAAG,CAAC,KAAY,EAAE,EAAE;YACpC,IAAI,IAAI,CAAC,KAAK;gBAAE,OAAO;YACvB,MAAM,MAAM,GAAG,KAAK,CAAC,MAA+B,CAAC;YACrD,IAAI,CAAC,CAAC,MAAM,YAAY,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ;gBAAE,OAAO;YACpE,KAAK,MAAM,KAAK,IAAI,IAAI,CAAC,gBAAgB,CAAiB,mBAAmB,CAAC,EAAE,CAAC;gBAC/E,IAAI,KAAK,KAAK,MAAM,IAAI,KAAK,CAAC,QAAQ,EAAE,CAAC;oBACvC,KAAK,CAAC,QAAQ,GAAG,KAAK,CAAC;gBACzB,CAAC;YACH,CAAC;QACH,CAAC,CAAC;IACJ,CAAC;aA/BiB,WAAM,GAAG,CAAC,UAAU,EAAE,MAAM,CAAC,AAAvB,CAAwB;IAOrC,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;IAC3D,CAAC;IAEQ,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;IAC9D,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;IAED,kBAAkB,CAShB;;AAzB0C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sDAAe;AAN/C,uBAAuB;IADnC,aAAa,CAAC,6BAA6B,CAAC;GAChC,uBAAuB,CAgCnC","sourcesContent":["import { html, HTMLTemplateResult, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { ExpansionPanel } from './expansion-panel.js';\nimport { styles } from './expansion-panel-container.styles.js';\n\n/**\n * Coordinates a group of `<u-expansion-panel>` children. When `multi` is `false`\n * (default), opening one panel closes the others.\n *\n * @slot - Default slot for `<u-expansion-panel>` children.\n */\n@customElement('u-expansion-panel-container')\nexport class ExpansionPanelContainer extends LitElement {\n  static override styles = [baseStyles, styles];\n\n  /**\n   * When `true`, multiple panels may be expanded simultaneously.\n   */\n  @property({ type: Boolean, reflect: true }) multi = false;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('change', this.#handlePanelChange);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('change', this.#handlePanelChange);\n  }\n\n  override render(): HTMLTemplateResult {\n    return html`<slot></slot>`;\n  }\n\n  #handlePanelChange = (event: Event) => {\n    if (this.multi) return;\n    const target = event.target as ExpansionPanel | null;\n    if (!(target instanceof ExpansionPanel) || !target.expanded) return;\n    for (const panel of this.querySelectorAll<ExpansionPanel>('u-expansion-panel')) {\n      if (panel !== target && panel.expanded) {\n        panel.expanded = false;\n      }\n    }\n  };\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-expansion-panel-container': ExpansionPanelContainer;\n  }\n}\n"]}

package/expansion-panel/expansion-panel-container.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=expansion-panel-container.styles.d.ts.map

package/expansion-panel/expansion-panel-container.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"expansion-panel-container.styles.d.ts","sourceRoot":"","sources":["../../src/expansion-panel/expansion-panel-container.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAMlB,CAAC"}

package/expansion-panel/expansion-panel-container.styles.js

@@ -0,0 +1,9 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: flex;
+    flex-direction: column;
+    gap: var(--u-expansion-panel-container-gap, 0.5rem);
+  }
+`;
+//# sourceMappingURL=expansion-panel-container.styles.js.map

package/expansion-panel/expansion-panel-container.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"expansion-panel-container.styles.js","sourceRoot":"","sources":["../../src/expansion-panel/expansion-panel-container.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;CAMzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    display: flex;\n    flex-direction: column;\n    gap: var(--u-expansion-panel-container-gap, 0.5rem);\n  }\n`;\n"]}

package/expansion-panel/expansion-panel.d.ts

@@ -0,0 +1,37 @@
+import { HTMLTemplateResult, LitElement } from 'lit';
+import '../ripple/ripple.js';
+import '../collapse/collapse.js';
+/**
+ * @slot header - Content shown in the clickable header row.
+ * @slot - Default slot for the panel body (animated via `u-collapse`).
+ * @csspart header - The header row container.
+ * @csspart chevron - The default chevron icon (rotates on expand).
+ * @csspart content - The collapsible body wrapper.
+ * @fires change - Dispatched when the `expanded` state toggles.
+ */
+export declare class ExpansionPanel extends LitElement {
+    #private;
+    static styles: import("lit").CSSResult[];
+    /**
+     * Whether the panel body is expanded.
+     */
+    get expanded(): boolean;
+    set expanded(value: boolean);
+    /**
+     * Disables toggling the panel via header click.
+     */
+    disabled: boolean;
+    /**
+     * Hides the default chevron toggle icon.
+     */
+    hideToggle: boolean;
+    /** Toggles `expanded`. No-op when `disabled`. */
+    toggle(): void;
+    render(): HTMLTemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-expansion-panel': ExpansionPanel;
+    }
+}
+//# sourceMappingURL=expansion-panel.d.ts.map

package/expansion-panel/expansion-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"expansion-panel.d.ts","sourceRoot":"","sources":["../../src/expansion-panel/expansion-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAW,MAAM,KAAK,CAAC;AAMpE,OAAO,qBAAqB,CAAC;AAC7B,OAAO,yBAAyB,CAAC;AAEjC;;;;;;;GAOG;AACH,qBACa,cAAe,SAAQ,UAAU;;IAC5C,OAAgB,MAAM,4BAAwB;IAI9C;;OAEG;IACH,IACI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAO1B;IAED;;OAEG;IACyC,QAAQ,UAAS;IAE7D;;OAEG;IACmE,UAAU,UAAS;IAEzF,iDAAiD;IACjD,MAAM,IAAI,IAAI;IAKL,MAAM,IAAI,kBAAkB;CAwBtC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,cAAc,CAAC;KACrC;CACF"}

package/expansion-panel/expansion-panel.js

@@ -0,0 +1,89 @@
+import { __decorate } from "tslib";
+import { html, LitElement, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { styles as baseStyles } from '../shared/base.styles.js';
+import { styles } from './expansion-panel.styles.js';
+import '../ripple/ripple.js';
+import '../collapse/collapse.js';
+/**
+ * @slot header - Content shown in the clickable header row.
+ * @slot - Default slot for the panel body (animated via `u-collapse`).
+ * @csspart header - The header row container.
+ * @csspart chevron - The default chevron icon (rotates on expand).
+ * @csspart content - The collapsible body wrapper.
+ * @fires change - Dispatched when the `expanded` state toggles.
+ */
+let ExpansionPanel = class ExpansionPanel extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.#expanded = false;
+        /**
+         * Disables toggling the panel via header click.
+         */
+        this.disabled = false;
+        /**
+         * Hides the default chevron toggle icon.
+         */
+        this.hideToggle = false;
+        this.#handleHeaderClick = () => {
+            this.toggle();
+        };
+    }
+    static { this.styles = [baseStyles, styles]; }
+    #expanded;
+    /**
+     * Whether the panel body is expanded.
+     */
+    get expanded() {
+        return this.#expanded;
+    }
+    set expanded(value) {
+        const old = this.#expanded;
+        this.#expanded = value;
+        this.requestUpdate('expanded', old);
+        if (old !== value) {
+            this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+        }
+    }
+    /** Toggles `expanded`. No-op when `disabled`. */
+    toggle() {
+        if (this.disabled)
+            return;
+        this.expanded = !this.expanded;
+    }
+    render() {
+        return html `
+      <div class="header" part="header" @click=${this.#handleHeaderClick}>
+        <div class="header-content">
+          <slot name="header"></slot>
+        </div>
+        ${this.hideToggle ? nothing : html `
+          <span class="chevron" part="chevron" aria-hidden="true">
+            <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960" width="1em" fill="currentColor">
+              <path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z" />
+            </svg>
+          </span>
+        `}
+        <u-ripple ?disabled=${this.disabled}></u-ripple>
+      </div>
+      <u-collapse class="body" part="content" ?open=${this.expanded}>
+        <slot></slot>
+      </u-collapse>
+    `;
+    }
+    #handleHeaderClick;
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], ExpansionPanel.prototype, "expanded", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], ExpansionPanel.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'hide-toggle' })
+], ExpansionPanel.prototype, "hideToggle", void 0);
+ExpansionPanel = __decorate([
+    customElement('u-expansion-panel')
+], ExpansionPanel);
+export { ExpansionPanel };
+//# sourceMappingURL=expansion-panel.js.map

package/expansion-panel/expansion-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"expansion-panel.js","sourceRoot":"","sources":["../../src/expansion-panel/expansion-panel.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAsB,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAErD,OAAO,qBAAqB,CAAC;AAC7B,OAAO,yBAAyB,CAAC;AAEjC;;;;;;;GAOG;AAEI,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAAvC;;QAGL,cAAS,GAAG,KAAK,CAAC;QAmBlB;;WAEG;QACyC,aAAQ,GAAG,KAAK,CAAC;QAE7D;;WAEG;QACmE,eAAU,GAAG,KAAK,CAAC;QA6BzF,uBAAkB,GAAG,GAAG,EAAE;YACxB,IAAI,CAAC,MAAM,EAAE,CAAC;QAChB,CAAC,CAAC;IACJ,CAAC;aA7DiB,WAAM,GAAG,CAAC,UAAU,EAAE,MAAM,CAAC,AAAvB,CAAwB;IAE9C,SAAS,CAAS;IAElB;;OAEG;IAEH,IAAI,QAAQ;QACV,OAAO,IAAI,CAAC,SAAS,CAAC;IACxB,CAAC;IAED,IAAI,QAAQ,CAAC,KAAc;QACzB,MAAM,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC;QAC3B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACvB,IAAI,CAAC,aAAa,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;QACpC,IAAI,GAAG,KAAK,KAAK,EAAE,CAAC;YAClB,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QAC7E,CAAC;IACH,CAAC;IAYD,iDAAiD;IACjD,MAAM;QACJ,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;IACjC,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;iDACkC,IAAI,CAAC,kBAAkB;;;;UAI9D,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAA;;;;;;SAMjC;8BACqB,IAAI,CAAC,QAAQ;;sDAEW,IAAI,CAAC,QAAQ;;;KAG9D,CAAC;IACJ,CAAC;IAED,kBAAkB,CAEhB;;AApDF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAG1C;AAc2C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAAkB;AAKS;IAArE,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;kDAAoB;AA9B9E,cAAc;IAD1B,aAAa,CAAC,mBAAmB,CAAC;GACtB,cAAc,CA8D1B","sourcesContent":["import { html, HTMLTemplateResult, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { styles } from './expansion-panel.styles.js';\n\nimport '../ripple/ripple.js';\nimport '../collapse/collapse.js';\n\n/**\n * @slot header - Content shown in the clickable header row.\n * @slot - Default slot for the panel body (animated via `u-collapse`).\n * @csspart header - The header row container.\n * @csspart chevron - The default chevron icon (rotates on expand).\n * @csspart content - The collapsible body wrapper.\n * @fires change - Dispatched when the `expanded` state toggles.\n */\n@customElement('u-expansion-panel')\nexport class ExpansionPanel extends LitElement {\n  static override styles = [baseStyles, styles];\n\n  #expanded = false;\n\n  /**\n   * Whether the panel body is expanded.\n   */\n  @property({ type: Boolean, reflect: true })\n  get expanded(): boolean {\n    return this.#expanded;\n  }\n\n  set expanded(value: boolean) {\n    const old = this.#expanded;\n    this.#expanded = value;\n    this.requestUpdate('expanded', old);\n    if (old !== value) {\n      this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));\n    }\n  }\n\n  /**\n   * Disables toggling the panel via header click.\n   */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /**\n   * Hides the default chevron toggle icon.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'hide-toggle' }) hideToggle = false;\n\n  /** Toggles `expanded`. No-op when `disabled`. */\n  toggle(): void {\n    if (this.disabled) return;\n    this.expanded = !this.expanded;\n  }\n\n  override render(): HTMLTemplateResult {\n    return html`\n      <div class=\"header\" part=\"header\" @click=${this.#handleHeaderClick}>\n        <div class=\"header-content\">\n          <slot name=\"header\"></slot>\n        </div>\n        ${this.hideToggle ? nothing : html`\n          <span class=\"chevron\" part=\"chevron\" aria-hidden=\"true\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"1em\" viewBox=\"0 -960 960 960\" width=\"1em\" fill=\"currentColor\">\n              <path d=\"M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z\" />\n            </svg>\n          </span>\n        `}\n        <u-ripple ?disabled=${this.disabled}></u-ripple>\n      </div>\n      <u-collapse class=\"body\" part=\"content\" ?open=${this.expanded}>\n        <slot></slot>\n      </u-collapse>\n    `;\n  }\n\n  #handleHeaderClick = () => {\n    this.toggle();\n  };\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-expansion-panel': ExpansionPanel;\n  }\n}\n"]}

package/expansion-panel/expansion-panel.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=expansion-panel.styles.d.ts.map

package/expansion-panel/expansion-panel.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"expansion-panel.styles.d.ts","sourceRoot":"","sources":["../../src/expansion-panel/expansion-panel.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA+DlB,CAAC"}

package/expansion-panel/expansion-panel.styles.js

@@ -0,0 +1,66 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+    position: relative;
+    background-color: var(--u-expansion-panel-bg-color, var(--u-color-surface-container-low, rgb(247, 242, 250)));
+    color: var(--u-expansion-panel-color, var(--u-color-on-surface, rgb(29, 27, 32)));
+    border-radius: var(--u-expansion-panel-shape-corner, var(--u-shape-corner-medium, 12px));
+    overflow: hidden;
+  }
+
+  .header {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: var(--u-expansion-panel-header-gap, 0.75rem);
+    padding: var(--u-expansion-panel-header-padding, 0.75rem 1rem);
+    min-height: var(--u-expansion-panel-header-min-height, 3rem);
+    cursor: pointer;
+    user-select: none;
+    font-family: var(--u-font-family);
+    line-height: var(--u-title-m-line-height);
+    font-size: var(--u-title-m-font-size);
+    letter-spacing: var(--u-title-m-letter-spacing);
+    font-weight: var(--u-title-m-font-weight);
+  }
+
+  :host([disabled]) .header {
+    cursor: default;
+    color: color-mix(in srgb, var(--u-color-on-surface, rgb(29, 27, 32)) 38%, transparent);
+  }
+
+  .header-content {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  .chevron {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.5rem;
+    line-height: 1;
+    color: var(--u-expansion-panel-chevron-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));
+    transition: transform 200ms ease-out;
+  }
+
+  :host([expanded]) .chevron {
+    transform: rotate(180deg);
+  }
+
+  .body {
+    border-top: 1px solid transparent;
+    transition: border-color 200ms ease-out;
+  }
+
+  :host([expanded]) .body {
+    border-top-color: var(--u-expansion-panel-divider-color, var(--u-color-outline-variant, rgb(202, 196, 208)));
+  }
+
+  ::slotted([slot=header]) {
+    display: block;
+  }
+`;
+//# sourceMappingURL=expansion-panel.styles.js.map

package/expansion-panel/expansion-panel.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"expansion-panel.styles.js","sourceRoot":"","sources":["../../src/expansion-panel/expansion-panel.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+DzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    display: block;\n    position: relative;\n    background-color: var(--u-expansion-panel-bg-color, var(--u-color-surface-container-low, rgb(247, 242, 250)));\n    color: var(--u-expansion-panel-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n    border-radius: var(--u-expansion-panel-shape-corner, var(--u-shape-corner-medium, 12px));\n    overflow: hidden;\n  }\n\n  .header {\n    position: relative;\n    display: flex;\n    align-items: center;\n    gap: var(--u-expansion-panel-header-gap, 0.75rem);\n    padding: var(--u-expansion-panel-header-padding, 0.75rem 1rem);\n    min-height: var(--u-expansion-panel-header-min-height, 3rem);\n    cursor: pointer;\n    user-select: none;\n    font-family: var(--u-font-family);\n    line-height: var(--u-title-m-line-height);\n    font-size: var(--u-title-m-font-size);\n    letter-spacing: var(--u-title-m-letter-spacing);\n    font-weight: var(--u-title-m-font-weight);\n  }\n\n  :host([disabled]) .header {\n    cursor: default;\n    color: color-mix(in srgb, var(--u-color-on-surface, rgb(29, 27, 32)) 38%, transparent);\n  }\n\n  .header-content {\n    flex: 1 1 auto;\n    min-width: 0;\n  }\n\n  .chevron {\n    flex: 0 0 auto;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 1.5rem;\n    line-height: 1;\n    color: var(--u-expansion-panel-chevron-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n    transition: transform 200ms ease-out;\n  }\n\n  :host([expanded]) .chevron {\n    transform: rotate(180deg);\n  }\n\n  .body {\n    border-top: 1px solid transparent;\n    transition: border-color 200ms ease-out;\n  }\n\n  :host([expanded]) .body {\n    border-top-color: var(--u-expansion-panel-divider-color, var(--u-color-outline-variant, rgb(202, 196, 208)));\n  }\n\n  ::slotted([slot=header]) {\n    display: block;\n  }\n`;\n"]}

package/field/field-base.d.ts

@@ -1,17 +1,28 @@
 import { Context, ContextProvider } from '@lit/context';
 import { CSSResultGroup } from '@lit/reactive-element/css-tag';
 import { LitElement, nothing, TemplateResult } from 'lit';
-import { UmFieldDefaults } from './field-defaults.js';
-export declare abstract class UmFieldBase extends LitElement {
+import { FieldDefaults } from './field-defaults.js';
+export declare abstract class FieldBase extends LitElement {
     static styles: CSSResultGroup;
     private readonly config;
+    /**
+     * The Field variant to render. When omitted, falls back to the variant
+     * provided by the surrounding `fieldDefaultsContext` (or `'filled'`).
+     */
     variant: 'filled' | 'outlined' | undefined;
     /**
      * The floating label for the field
      */
     label: string | undefined;
     protected _innerCounter: string | undefined;
+    /**
+     * Custom counter text shown in the supporting line, overriding the
+     * automatic character-count counter
+     */
     counter: string | undefined;
+    /**
+     * Whether to hide the counter from the supporting text line
+     */
     hideCounter: boolean;
     /**
      * Supporting text conveys additional information about the field, such as how it will be used
@@ -26,12 +37,15 @@ export declare abstract class UmFieldBase extends LitElement {
      * Whether the field is empty or not. This changes the behavior of the floating label when the field is not focused.
      */
     empty: boolean;
+    /**
+     * Whether the field is disabled
+     */
     disabled: boolean;
     /**
      * Get or sets where or not the field is in a visually invalid state.
      */
     invalid: boolean;
-    static setDefaults(contextRoot: HTMLElement, config: UmFieldDefaults): ContextProvider<Context<HTMLElement, UmFieldDefaults>>;
+    static setDefaults(contextRoot: HTMLElement, config: FieldDefaults): ContextProvider<Context<HTMLElement, FieldDefaults>>;
     /**
      * Whether the field has a leading icon or not
      *

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

@@ -1 +1 @@
-{"version":3,"file":"field-base.d.ts","sourceRoot":"","sources":["../../src/field/field-base.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAE/D,OAAO,EAAQ,UAAU,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAOhE,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,8BAAsB,WAAY,SAAQ,UAAU;IAClD,OAAgB,MAAM,EAAE,cAAc,CAAwB;IAI9D,OAAO,CAAC,QAAQ,CAAC,MAAM,CAA8B;IAEzC,OAAO,EAAE,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAY;IAElE;;OAEG;IAEH,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAEjB,SAAS,CAAC,aAAa,EAAE,MAAM,GAAG,SAAS,CAAC;IACzC,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAEgB,WAAW,UAAS;IAE5E;;OAEG;IACyC,cAAc,EAAE,MAAM,GAAG,SAAS,CAAC;IAE/E;;;OAGG;IACoC,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAErE;;OAEG;IACyC,KAAK,UAAS;IACd,QAAQ,UAAS;IAE7D;;OAEG;IACyC,OAAO,UAAS;IAE5D,MAAM,CAAC,WAAW,CAChB,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,eAAe,GACtB,eAAe,CAAC,OAAO,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;IAOzD;;;;OAIG;IAEH,cAAc,UAAS;IAEvB;;;;OAIG;IAEH,eAAe,UAAS;IAExB;;;;OAIG;IAEH,YAAY,UAAS;IAGrB,SAAS,CAAC,QAAQ,CAAC,oBAAoB,EAAG,WAAW,EAAE,CAAC;IAGxD,SAAS,CAAC,QAAQ,CAAC,qBAAqB,EAAG,WAAW,EAAE,CAAC;IAGzD,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAAiB;IAE7B,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAe;IACzC,SAAS,CAAC,UAAU,EAAG,WAAW,CAAC;;cAO3C,MAAM,IAAI,cAAc;IA+C3C,SAAS,CAAC,QAAQ,CAAC,aAAa,IAAI,cAAc;IAElD,SAAS,CAAC,kBAAkB,IAAI,cAAc;IAIrC,iBAAiB;IAK1B,OAAO,CAAC,2BAA2B;IASnC,OAAO,CAAC,4BAA4B;IAIpC,OAAO,CAAC,yBAAyB;IAIjC,SAAS,CAAC,yBAAyB,IAAI,cAAc,GAAG,OAAO,OAAO;CAGvE"}
+{"version":3,"file":"field-base.d.ts","sourceRoot":"","sources":["../../src/field/field-base.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAE/D,OAAO,EAAQ,UAAU,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAOhE,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEpD,8BAAsB,SAAU,SAAQ,UAAU;IAChD,OAAgB,MAAM,EAAE,cAAc,CAAwB;IAI9D,OAAO,CAAC,QAAQ,CAAC,MAAM,CAA4B;IAEnD;;;OAGG;IACS,OAAO,EAAE,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAY;IAElE;;OAEG;IAEH,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAEjB,SAAS,CAAC,aAAa,EAAE,MAAM,GAAG,SAAS,CAAC;IAErD;;;OAGG;IACS,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAExC;;OAEG;IACqD,WAAW,UAAS;IAE5E;;OAEG;IACyC,cAAc,EAAE,MAAM,GAAG,SAAS,CAAC;IAE/E;;;OAGG;IACoC,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAErE;;OAEG;IACyC,KAAK,UAAS;IAE1D;;OAEG;IACyC,QAAQ,UAAS;IAE7D;;OAEG;IACyC,OAAO,UAAS;IAE5D,MAAM,CAAC,WAAW,CAChB,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,aAAa,GACpB,eAAe,CAAC,OAAO,CAAC,WAAW,EAAE,aAAa,CAAC,CAAC;IAOvD;;;;OAIG;IAEH,cAAc,UAAS;IAEvB;;;;OAIG;IAEH,eAAe,UAAS;IAExB;;;;OAIG;IAEH,YAAY,UAAS;IAGrB,SAAS,CAAC,QAAQ,CAAC,oBAAoB,EAAG,WAAW,EAAE,CAAC;IAGxD,SAAS,CAAC,QAAQ,CAAC,qBAAqB,EAAG,WAAW,EAAE,CAAC;IAGzD,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAAiB;IAE7B,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAe;IACzC,SAAS,CAAC,UAAU,EAAG,WAAW,CAAC;;cAO3C,MAAM,IAAI,cAAc;IA+C3C,SAAS,CAAC,QAAQ,CAAC,aAAa,IAAI,cAAc;IAElD,SAAS,CAAC,kBAAkB,IAAI,cAAc;IAIrC,iBAAiB;IAK1B,OAAO,CAAC,2BAA2B;IASnC,OAAO,CAAC,4BAA4B;IAIpC,OAAO,CAAC,yBAAyB;IAIjC,SAAS,CAAC,yBAAyB,IAAI,cAAc,GAAG,OAAO,OAAO;CAGvE"}

package/field/field-base.js

@@ -6,7 +6,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { styles as baseStyles } from '../shared/base.styles.js';
 import { styles } from './field-base.styles.js';
 import { fieldDefaultsContext } from './field-defaults-context.js';
-export class UmFieldBase extends LitElement {
+export class FieldBase extends LitElement {
     static { this.styles = [baseStyles, styles]; }
     static setDefaults(contextRoot, config) {
         return new ContextProvider(contextRoot, {
@@ -16,12 +16,22 @@ export class UmFieldBase extends LitElement {
     }
     constructor() {
         super();
+        /**
+         * The Field variant to render. When omitted, falls back to the variant
+         * provided by the surrounding `fieldDefaultsContext` (or `'filled'`).
+         */
         this.variant = 'filled';
+        /**
+         * Whether to hide the counter from the supporting text line
+         */
         this.hideCounter = false;
         /**
          * Whether the field is empty or not. This changes the behavior of the floating label when the field is not focused.
          */
         this.empty = false;
+        /**
+         * Whether the field is disabled
+         */
         this.disabled = false;
         /**
          * Get or sets where or not the field is in a visually invalid state.
@@ -116,59 +126,59 @@ export class UmFieldBase extends LitElement {
 __decorate([
     consume({ context: fieldDefaultsContext, subscribe: true }),
     state()
-], UmFieldBase.prototype, "config", void 0);
+], FieldBase.prototype, "config", void 0);
 __decorate([
     property()
-], UmFieldBase.prototype, "variant", void 0);
+], FieldBase.prototype, "variant", void 0);
 __decorate([
     property()
-], UmFieldBase.prototype, "label", void 0);
+], FieldBase.prototype, "label", void 0);
 __decorate([
     state()
-], UmFieldBase.prototype, "_innerCounter", void 0);
+], FieldBase.prototype, "_innerCounter", void 0);
 __decorate([
     property()
-], UmFieldBase.prototype, "counter", void 0);
+], FieldBase.prototype, "counter", void 0);
 __decorate([
     property({ type: Boolean, attribute: 'hide-counter' })
-], UmFieldBase.prototype, "hideCounter", void 0);
+], FieldBase.prototype, "hideCounter", void 0);
 __decorate([
     property({ attribute: 'supporting-text' })
-], UmFieldBase.prototype, "supportingText", void 0);
+], FieldBase.prototype, "supportingText", void 0);
 __decorate([
     property({ attribute: 'error-text' })
-], UmFieldBase.prototype, "errorText", void 0);
+], FieldBase.prototype, "errorText", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
-], UmFieldBase.prototype, "empty", void 0);
+], FieldBase.prototype, "empty", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
-], UmFieldBase.prototype, "disabled", void 0);
+], FieldBase.prototype, "disabled", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
-], UmFieldBase.prototype, "invalid", void 0);
+], FieldBase.prototype, "invalid", void 0);
 __decorate([
     property({ type: Boolean, attribute: 'has-leading-icon', reflect: true })
-], UmFieldBase.prototype, "hasLeadingIcon", void 0);
+], FieldBase.prototype, "hasLeadingIcon", void 0);
 __decorate([
     property({ type: Boolean, attribute: 'has-trailing-icon', reflect: true })
-], UmFieldBase.prototype, "hasTrailingIcon", void 0);
+], FieldBase.prototype, "hasTrailingIcon", void 0);
 __decorate([
     property({ type: Boolean, attribute: 'has-error-text', reflect: true })
-], UmFieldBase.prototype, "hasErrorText", void 0);
+], FieldBase.prototype, "hasErrorText", void 0);
 __decorate([
     queryAssignedElements({ slot: 'leading-icon', flatten: true })
-], UmFieldBase.prototype, "assignedLeadingIcons", void 0);
+], FieldBase.prototype, "assignedLeadingIcons", void 0);
 __decorate([
     queryAssignedElements({ slot: 'trailing-icon', flatten: true })
-], UmFieldBase.prototype, "assignedTrailingIcons", void 0);
+], FieldBase.prototype, "assignedTrailingIcons", void 0);
 __decorate([
     queryAssignedElements({ slot: 'error-text', flatten: true })
-], UmFieldBase.prototype, "assignedErrorTexts", void 0);
+], FieldBase.prototype, "assignedErrorTexts", void 0);
 __decorate([
     query('.label', true)
-], UmFieldBase.prototype, "_labelElement", void 0);
+], FieldBase.prototype, "_labelElement", void 0);
 __decorate([
     query('.container', true)
-], UmFieldBase.prototype, "_container", void 0);
+], FieldBase.prototype, "_container", void 0);
 //# sourceMappingURL=field-base.js.map

package/field/field-base.js.map

@@ -1 +1 @@
-{"version":3,"file":"field-base.js","sourceRoot":"","sources":["../../src/field/field-base.ts"],"names":[],"mappings":"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","sourcesContent":["import { consume, Context, ContextProvider } from '@lit/context';\nimport { CSSResultGroup } from '@lit/reactive-element/css-tag';\n\nimport { html, LitElement, nothing, TemplateResult } from 'lit';\nimport { property, query, queryAssignedElements, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { styles } from './field-base.styles.js';\nimport { fieldDefaultsContext } from './field-defaults-context.js';\nimport { UmFieldDefaults } from './field-defaults.js';\n\nexport abstract class UmFieldBase extends LitElement {\n  static override styles: CSSResultGroup = [baseStyles, styles];\n\n  @consume({ context: fieldDefaultsContext, subscribe: true })\n  @state()\n  private readonly config: UmFieldDefaults | undefined;\n\n  @property() variant: 'filled' | 'outlined' | undefined = 'filled';\n\n  /**\n   * The floating label for the field\n   */\n  @property()\n  label: string | undefined;\n\n  @state() protected _innerCounter: string | undefined;\n  @property() counter: string | undefined;\n\n  @property({ type: Boolean, attribute: 'hide-counter' }) hideCounter = false;\n\n  /**\n   * Supporting text conveys additional information about the field, such as how it will be used\n   */\n  @property({ attribute: 'supporting-text' }) supportingText: string | undefined;\n\n  /**\n   * For text fields that validate their content (such as passwords), replace supporting text with error text when applicable.\n   * If `errorText` is not an empty string, changing the property `invalid` to `true` will show the `errorText` instead of `supportingText`\n   */\n  @property({ attribute: 'error-text' }) errorText: string | undefined;\n\n  /**\n   * Whether the field is empty or not. This changes the behavior of the floating label when the field is not focused.\n   */\n  @property({ type: Boolean, reflect: true }) empty = false;\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /**\n   * Get or sets where or not the field is in a visually invalid state.\n   */\n  @property({ type: Boolean, reflect: true }) invalid = false;\n\n  static setDefaults(\n    contextRoot: HTMLElement,\n    config: UmFieldDefaults,\n  ): ContextProvider<Context<HTMLElement, UmFieldDefaults>> {\n    return new ContextProvider(contextRoot, {\n      context: fieldDefaultsContext,\n      initialValue: config,\n    });\n  }\n\n  /**\n   * Whether the field has a leading icon or not\n   *\n   * _Note:_ Readonly\n   */\n  @property({ type: Boolean, attribute: 'has-leading-icon', reflect: true })\n  hasLeadingIcon = false;\n\n  /**\n   * Whether the field has a trailing icon or not\n   *\n   * _Note:_ Readonly\n   */\n  @property({ type: Boolean, attribute: 'has-trailing-icon', reflect: true })\n  hasTrailingIcon = false;\n\n  /**\n   * Whether the field has an error text or not\n   *\n   * _Note:_ Readonly\n   */\n  @property({ type: Boolean, attribute: 'has-error-text', reflect: true })\n  hasErrorText = false;\n\n  @queryAssignedElements({ slot: 'leading-icon', flatten: true })\n  protected readonly assignedLeadingIcons!: HTMLElement[];\n\n  @queryAssignedElements({ slot: 'trailing-icon', flatten: true })\n  protected readonly assignedTrailingIcons!: HTMLElement[];\n\n  @queryAssignedElements({ slot: 'error-text', flatten: true })\n  private readonly assignedErrorTexts!: HTMLElement[];\n\n  @query('.label', true) private readonly _labelElement!: HTMLElement;\n  @query('.container', true) protected _container!: HTMLElement;\n\n  constructor() {\n    super();\n    this.variant = undefined;\n  }\n\n  protected override render(): TemplateResult {\n    const variant = this.variant ?? this.config?.variant ?? 'filled';\n\n    const classes = {\n      [variant]: true,\n      'no-label': !this.label,\n    };\n\n    const counter = html`\n      <slot class=\"counter\" name=\"counter\">\n        <div>${this.counter ?? this._innerCounter}</div>\n      </slot>\n    `;\n\n    const outline = html`\n      <div class=\"outline\">\n        <div class=\"outline-start\"></div>\n        <div class=\"outline-notch\">\n          <div class=\"outline-notch-label\">${this.label}</div>\n        </div>\n        <div class=\"outline-end\"></div>\n      </div>\n    `;\n\n    return html`\n      <div class=\"container ${classMap(classes)}\">\n        ${variant === 'outlined' ? outline : nothing}\n        <slot class=\"icon leading-icon\" name=\"leading-icon\" @slotchange=\"${this.handleLeadingIconSlotChange}\"></slot>\n        <label class=\"label\" id=\"label\">${this.label}</label>\n        <div class=\"input-wrapper\" part=\"wrapper\">${this.renderControl()}</div>\n        <slot class=\"icon trailing-icon\" name=\"trailing-icon\" @slotchange=\"${this.handleTrailingIconSlotChange}\">\n          <span>${this.renderDefaultTrailingIcon()}</span>\n        </slot>\n      </div>\n      <div class=\"supporting-text\" id=\"supporting-text\">\n        <slot class=\"error-text\" name=\"error-text\" @slotchange=\"${this.handleErrorTextSlotChange}\">\n          <div>${this.errorText}</div>\n        </slot>\n        <slot name=\"supporting-text\" id=\"supporting-text\">\n          <div>${this.supportingText}</div>\n        </slot>\n        ${this.hideCounter ? nothing : counter}\n      </div>\n      ${this.renderAfterContent()}\n    `;\n  }\n\n  protected abstract renderControl(): TemplateResult;\n\n  protected renderAfterContent(): TemplateResult {\n    return html``;\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.hasLeadingIcon = !!this.assignedLeadingIcons.length;\n  }\n\n  private handleLeadingIconSlotChange() {\n    this._labelElement.style.transition = 'none';\n    this.hasLeadingIcon = this.assignedLeadingIcons.length > 0;\n\n    setTimeout(() => {\n      this._labelElement.style.transition = '';\n    });\n  }\n\n  private handleTrailingIconSlotChange() {\n    this.hasTrailingIcon = this.assignedTrailingIcons.length > 0;\n  }\n\n  private handleErrorTextSlotChange() {\n    this.hasErrorText = this.assignedErrorTexts.length > 0;\n  }\n\n  protected renderDefaultTrailingIcon(): TemplateResult | typeof nothing {\n    return nothing;\n  }\n}\n"]}
+{"version":3,"file":"field-base.js","sourceRoot":"","sources":["../../src/field/field-base.ts"],"names":[],"mappings":"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","sourcesContent":["import { consume, Context, ContextProvider } from '@lit/context';\nimport { CSSResultGroup } from '@lit/reactive-element/css-tag';\n\nimport { html, LitElement, nothing, TemplateResult } from 'lit';\nimport { property, query, queryAssignedElements, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { styles } from './field-base.styles.js';\nimport { fieldDefaultsContext } from './field-defaults-context.js';\nimport { FieldDefaults } from './field-defaults.js';\n\nexport abstract class FieldBase extends LitElement {\n  static override styles: CSSResultGroup = [baseStyles, styles];\n\n  @consume({ context: fieldDefaultsContext, subscribe: true })\n  @state()\n  private readonly config: FieldDefaults | undefined;\n\n  /**\n   * The Field variant to render. When omitted, falls back to the variant\n   * provided by the surrounding `fieldDefaultsContext` (or `'filled'`).\n   */\n  @property() variant: 'filled' | 'outlined' | undefined = 'filled';\n\n  /**\n   * The floating label for the field\n   */\n  @property()\n  label: string | undefined;\n\n  @state() protected _innerCounter: string | undefined;\n\n  /**\n   * Custom counter text shown in the supporting line, overriding the\n   * automatic character-count counter\n   */\n  @property() counter: string | undefined;\n\n  /**\n   * Whether to hide the counter from the supporting text line\n   */\n  @property({ type: Boolean, attribute: 'hide-counter' }) hideCounter = false;\n\n  /**\n   * Supporting text conveys additional information about the field, such as how it will be used\n   */\n  @property({ attribute: 'supporting-text' }) supportingText: string | undefined;\n\n  /**\n   * For text fields that validate their content (such as passwords), replace supporting text with error text when applicable.\n   * If `errorText` is not an empty string, changing the property `invalid` to `true` will show the `errorText` instead of `supportingText`\n   */\n  @property({ attribute: 'error-text' }) errorText: string | undefined;\n\n  /**\n   * Whether the field is empty or not. This changes the behavior of the floating label when the field is not focused.\n   */\n  @property({ type: Boolean, reflect: true }) empty = false;\n\n  /**\n   * Whether the field is disabled\n   */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /**\n   * Get or sets where or not the field is in a visually invalid state.\n   */\n  @property({ type: Boolean, reflect: true }) invalid = false;\n\n  static setDefaults(\n    contextRoot: HTMLElement,\n    config: FieldDefaults,\n  ): ContextProvider<Context<HTMLElement, FieldDefaults>> {\n    return new ContextProvider(contextRoot, {\n      context: fieldDefaultsContext,\n      initialValue: config,\n    });\n  }\n\n  /**\n   * Whether the field has a leading icon or not\n   *\n   * _Note:_ Readonly\n   */\n  @property({ type: Boolean, attribute: 'has-leading-icon', reflect: true })\n  hasLeadingIcon = false;\n\n  /**\n   * Whether the field has a trailing icon or not\n   *\n   * _Note:_ Readonly\n   */\n  @property({ type: Boolean, attribute: 'has-trailing-icon', reflect: true })\n  hasTrailingIcon = false;\n\n  /**\n   * Whether the field has an error text or not\n   *\n   * _Note:_ Readonly\n   */\n  @property({ type: Boolean, attribute: 'has-error-text', reflect: true })\n  hasErrorText = false;\n\n  @queryAssignedElements({ slot: 'leading-icon', flatten: true })\n  protected readonly assignedLeadingIcons!: HTMLElement[];\n\n  @queryAssignedElements({ slot: 'trailing-icon', flatten: true })\n  protected readonly assignedTrailingIcons!: HTMLElement[];\n\n  @queryAssignedElements({ slot: 'error-text', flatten: true })\n  private readonly assignedErrorTexts!: HTMLElement[];\n\n  @query('.label', true) private readonly _labelElement!: HTMLElement;\n  @query('.container', true) protected _container!: HTMLElement;\n\n  constructor() {\n    super();\n    this.variant = undefined;\n  }\n\n  protected override render(): TemplateResult {\n    const variant = this.variant ?? this.config?.variant ?? 'filled';\n\n    const classes = {\n      [variant]: true,\n      'no-label': !this.label,\n    };\n\n    const counter = html`\n      <slot class=\"counter\" name=\"counter\">\n        <div>${this.counter ?? this._innerCounter}</div>\n      </slot>\n    `;\n\n    const outline = html`\n      <div class=\"outline\">\n        <div class=\"outline-start\"></div>\n        <div class=\"outline-notch\">\n          <div class=\"outline-notch-label\">${this.label}</div>\n        </div>\n        <div class=\"outline-end\"></div>\n      </div>\n    `;\n\n    return html`\n      <div class=\"container ${classMap(classes)}\">\n        ${variant === 'outlined' ? outline : nothing}\n        <slot class=\"icon leading-icon\" name=\"leading-icon\" @slotchange=\"${this.handleLeadingIconSlotChange}\"></slot>\n        <label class=\"label\" id=\"label\">${this.label}</label>\n        <div class=\"input-wrapper\" part=\"wrapper\">${this.renderControl()}</div>\n        <slot class=\"icon trailing-icon\" name=\"trailing-icon\" @slotchange=\"${this.handleTrailingIconSlotChange}\">\n          <span>${this.renderDefaultTrailingIcon()}</span>\n        </slot>\n      </div>\n      <div class=\"supporting-text\" id=\"supporting-text\">\n        <slot class=\"error-text\" name=\"error-text\" @slotchange=\"${this.handleErrorTextSlotChange}\">\n          <div>${this.errorText}</div>\n        </slot>\n        <slot name=\"supporting-text\" id=\"supporting-text\">\n          <div>${this.supportingText}</div>\n        </slot>\n        ${this.hideCounter ? nothing : counter}\n      </div>\n      ${this.renderAfterContent()}\n    `;\n  }\n\n  protected abstract renderControl(): TemplateResult;\n\n  protected renderAfterContent(): TemplateResult {\n    return html``;\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.hasLeadingIcon = !!this.assignedLeadingIcons.length;\n  }\n\n  private handleLeadingIconSlotChange() {\n    this._labelElement.style.transition = 'none';\n    this.hasLeadingIcon = this.assignedLeadingIcons.length > 0;\n\n    setTimeout(() => {\n      this._labelElement.style.transition = '';\n    });\n  }\n\n  private handleTrailingIconSlotChange() {\n    this.hasTrailingIcon = this.assignedTrailingIcons.length > 0;\n  }\n\n  private handleErrorTextSlotChange() {\n    this.hasErrorText = this.assignedErrorTexts.length > 0;\n  }\n\n  protected renderDefaultTrailingIcon(): TemplateResult | typeof nothing {\n    return nothing;\n  }\n}\n"]}

package/field/field-defaults-context.d.ts

@@ -1,5 +1,5 @@
-import { UmFieldDefaults } from './field-defaults.js';
+import { FieldDefaults } from './field-defaults.js';
 export declare const fieldDefaultsContext: {
-    __context__: UmFieldDefaults;
+    __context__: FieldDefaults;
 };
 //# sourceMappingURL=field-defaults-context.d.ts.map

package/field/field-defaults-context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"field-defaults-context.d.ts","sourceRoot":"","sources":["../../src/field/field-defaults-context.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,eAAO,MAAM,oBAAoB;;CAA6D,CAAC"}
+{"version":3,"file":"field-defaults-context.d.ts","sourceRoot":"","sources":["../../src/field/field-defaults-context.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEpD,eAAO,MAAM,oBAAoB;;CAA2D,CAAC"}

package/field/field-defaults-context.js.map

@@ -1 +1 @@
-{"version":3,"file":"field-defaults-context.js","sourceRoot":"","sources":["../../src/field/field-defaults-context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAI7C,MAAM,CAAC,MAAM,oBAAoB,GAAG,aAAa,CAAkB,0BAA0B,CAAC,CAAC","sourcesContent":["import { createContext } from '@lit/context';\n\nimport { UmFieldDefaults } from './field-defaults.js';\n\nexport const fieldDefaultsContext = createContext<UmFieldDefaults>('u-field-defaults-context');\n"]}
+{"version":3,"file":"field-defaults-context.js","sourceRoot":"","sources":["../../src/field/field-defaults-context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAI7C,MAAM,CAAC,MAAM,oBAAoB,GAAG,aAAa,CAAgB,0BAA0B,CAAC,CAAC","sourcesContent":["import { createContext } from '@lit/context';\n\nimport { FieldDefaults } from './field-defaults.js';\n\nexport const fieldDefaultsContext = createContext<FieldDefaults>('u-field-defaults-context');\n"]}

package/field/field-defaults.d.ts

@@ -1,5 +1,5 @@
-import { UmFieldVariant } from './field-variant.js';
-export interface UmFieldDefaults {
-    variant: UmFieldVariant;
+import { FieldVariant } from './field-variant.js';
+export interface FieldDefaults {
+    variant: FieldVariant;
 }
 //# sourceMappingURL=field-defaults.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"field-defaults.d.ts","sourceRoot":"","sources":["../../src/field/field-defaults.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpD,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,cAAc,CAAC;CACzB"}
+{"version":3,"file":"field-defaults.d.ts","sourceRoot":"","sources":["../../src/field/field-defaults.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAElD,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,YAAY,CAAC;CACvB"}