@universal-material/web 3.4.2 → 3.5.0

package/button/fab.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"fab.styles.js","sourceRoot":"","sources":["../../src/button/fab.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsFzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    aspect-ratio: 1;\n    --u-elevation-level: var(--u-fab-button-elevation-level, 3);\n  }\n\n  :host([lowered]) {\n    --u-elevation-level: var(--u-fab-button-elevation-level, 1);\n  }\n\n  @media (hover: hover) {\n    :host(:hover:not(:focus-within):not(:active)) {\n      --u-elevation-level: var(--u-fab-button-hover-elevation-level, 4);\n    }\n    :host(:hover:not(:focus-within):not(:active)[lowered]) {\n      --u-elevation-level: var(--u-fab-button-elevation-level, 2);\n    }\n  }\n  @media (hover: hover) {\n    :host(:hover:not(:focus-within):not(:active)) {\n      --u-elevation-level: var(--u-fab-button-hover-elevation-level, 4);\n    }\n  }\n  :host([size=small]) {\n    width: var(--u-fab-button-small-size, 40px);\n    border-radius: var(--u-fab-button-medium-shape-corner, var(--u-shape-corner-medium, 12px));\n  }\n\n  :host([size=large]) {\n    width: var(--u-fab-button-medium-size, 96px);\n    border-radius: var(--u-fab-button-medium-shape-corner, var(--u-shape-corner-extra-large, 28px));\n  }\n\n  :host([extended]),\n  :host([size=medium]) {\n    width: var(--u-fab-button-medium-size, 56px);\n    border-radius: var(--u-fab-button-medium-shape-corner, var(--u-shape-corner-large, 16px));\n  }\n\n  :host([size=large]) .icon {\n    font-size: var(--u-fab-button-icon-size, 2rem);\n  }\n\n  :host([extended]) .icon,\n  :host([size=small]) .icon,\n  :host([size=medium]) .icon {\n    font-size: var(--u-fab-button-icon-size, 1.5rem);\n  }\n\n  :host([extended]) {\n    width: auto;\n    height: var(--u-extended-fab-button-height, 56px);\n    aspect-ratio: auto;\n    min-width: var(--u-extended-fab-button-min-width, 80px);\n    padding-inline: var(--u-extended-fab-button-padding, 16px 24px);\n  }\n\n  :host([extended]) .icon {\n    margin-inline-end: var(--u-extended-fab-button-icon-margin, 12px);\n  }\n\n  :host([color=primary]) {\n    background-color: var(--u-fab-button-primary-bg-color, var(--u-color-primary-container, rgb(234, 221, 255)));\n    color: var(--u-fab-button-primary-text-color, var(--u-color-on-primary-container, rgb(33, 0, 93)));\n  }\n\n  :host([color=secondary]) {\n    background-color: var(--u-fab-button-secondary-bg-color, var(--u-color-secondary-container, rgb(232, 222, 248)));\n    color: var(--u-fab-button-secondary-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n  }\n\n  :host([color=tertiary]) {\n    background-color: var(--u-fab-button-tertiary-bg-color, var(--u-color-tertiary-container, rgb(255, 216, 228)));\n    color: var(--u-fab-button-tertiary-text-color, var(--u-color-on-tertiary-container, rgb(49, 17, 29)));\n  }\n\n  :host([color=branded]),\n  :host([color=surface]) {\n    background-color: var(--u-fab-button-surface-bg-color, var(--u-color-surface-container-high, rgb(236, 230, 240)));\n    color: var(--u-fab-button-surface-text-color, var(--_color-primary));\n  }\n\n  :host([color=branded][lowered]),\n  :host([color=surface][lowered]) {\n    background-color: var(--u-fab-button-surface-bg-color, var(--u-color-surface-container-low, rgb(247, 242, 250)));\n  }\n`;\n"]}
+{"version":3,"file":"fab.styles.js","sourceRoot":"","sources":["../../src/button/fab.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgFzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  .container {\n    --u-elevation-level: var(--u-fab-elevation-level, 3);\n    aspect-ratio: 1;\n  }\n  @media (hover: hover) {\n    .container:hover:not(:focus-within):not(:active) {\n      --u-elevation-level: var(--u-fab-hover-elevation-level, 4);\n    }\n  }\n\n  .lowered {\n    --u-elevation-level: var(--u-fab-elevation-level, 1);\n  }\n  @media (hover: hover) {\n    .lowered:hover:not(:focus-within):not(:active) {\n      --u-elevation-level: var(--u-fab-elevation-level, 2);\n    }\n  }\n\n  .small {\n    width: var(--u-fab-small-size, 40px);\n    border-radius: var(--u-fab-small-shape-corner, var(--u-shape-corner-medium, 12px));\n  }\n\n  .large {\n    width: var(--u-fab-large-size, 96px);\n    border-radius: var(--u-fab-large-shape-corner, var(--u-shape-corner-extra-large, 28px));\n  }\n  .large .icon {\n    font-size: var(--u-fab-large-icon-size, 2rem);\n  }\n\n  .extended,\n  .medium {\n    width: var(--u-fab-medium-size, 56px);\n    border-radius: var(--u-fab-medium-shape-corner, var(--u-shape-corner-large, 16px));\n  }\n\n  .extended .icon,\n  .small .icon,\n  .medium .icon {\n    font-size: var(--u-fab-icon-size, 1.5rem);\n  }\n\n  .extended {\n    width: auto;\n    height: var(--u-extended-fab-height, 56px);\n    aspect-ratio: auto;\n    min-width: var(--u-extended-fab-min-width, 80px);\n    padding-inline: var(--u-extended-fab-padding, 16px 24px);\n  }\n  .extended .icon {\n    margin-inline-end: var(--u-extended-fab-icon-margin, 12px);\n  }\n\n  .primary {\n    background-color: var(--u-fab-primary-container-color, var(--u-color-primary-container, rgb(234, 221, 255)));\n    color: var(--u-fab-primary-text-color, var(--u-color-on-primary-container, rgb(33, 0, 93)));\n  }\n\n  .secondary {\n    background-color: var(--u-fab-secondary-container-color, var(--u-color-secondary-container, rgb(232, 222, 248)));\n    color: var(--u-fab-secondary-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n  }\n\n  .tertiary {\n    background-color: var(--u-fab-tertiary-container-color, var(--u-color-tertiary-container, rgb(255, 216, 228)));\n    color: var(--u-fab-tertiary-text-color, var(--u-color-on-tertiary-container, rgb(49, 17, 29)));\n  }\n\n  .branded,\n  .surface {\n    background-color: var(--u-fab-surface-container-color, var(--u-color-surface-container-high, rgb(236, 230, 240)));\n    color: var(--u-fab-surface-text-color, var(--_color-primary));\n  }\n  .branded.lowered,\n  .surface.lowered {\n    background-color: var(--u-fab-surface-container-color, var(--u-color-surface-container-low, rgb(247, 242, 250)));\n  }\n`;\n"]}

package/button/icon-button.d.ts

@@ -1,12 +1,13 @@
 import { HTMLTemplateResult } from 'lit';
 import { UmToggleButton } from './toggle-button.js';
 export type UmIconButtonVariant = 'standard' | 'filled' | 'tonal' | 'outlined';
-export type UmIconButtonWidth = 'default' | 'narrow' | 'wide' | undefined;
+export type UmIconButtonWidth = 'default' | 'narrow' | 'wide';
 export declare class UmIconButton extends UmToggleButton {
     static styles: import("lit").CSSResultGroup[];
     variant: UmIconButtonVariant;
     width: UmIconButtonWidth;
-    protected renderContent(): HTMLTemplateResult;
+    protected _getContainerClasses(): Record<string, boolean>;
+    protected _renderContent(): HTMLTemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

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,GAAG,SAAS,CAAC;AAE1E,qBACa,YAAa,SAAQ,cAAc;IAE9C,OAAgB,MAAM,iCAAmC;IAE5B,OAAO,EAAE,mBAAmB,CAAc;IAC1C,KAAK,EAAE,iBAAiB,CAAC;cAEnC,aAAa,IAAI,kBAAkB;CAavD;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;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"}

package/button/icon-button.js

@@ -7,26 +7,34 @@ let UmIconButton = class UmIconButton extends UmToggleButton {
     constructor() {
         super(...arguments);
         this.variant = 'standard';
+        this.width = 'default';
     }
     static { this.styles = [UmToggleButton.styles, styles]; }
-    renderContent() {
+    _getContainerClasses() {
+        return {
+            ...super._getContainerClasses(),
+            [this.variant]: true,
+            [this.width]: true,
+        };
+    }
+    _renderContent() {
         return html `
       <span class="icon-container" aria-hidden="true">
         <span class="icon icon-default">
           <slot></slot>
         </span>
         <span class="icon icon-selected">
-          <slot name="selected" @slotchange="${this.handleSelectedIconSlotChange}"></slot>
+          <slot name="selected" @slotchange="${this._handleSelectedIconSlotChange}"></slot>
         </span>
       </span>
     `;
     }
 };
 __decorate([
-    property({ reflect: true })
+    property()
 ], UmIconButton.prototype, "variant", void 0);
 __decorate([
-    property({ reflect: true })
+    property()
 ], UmIconButton.prototype, "width", void 0);
 UmIconButton = __decorate([
     customElement('u-icon-button')

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;;QAIwB,YAAO,GAAwB,UAAU,CAAC;IAgBzE,CAAC;aAlBiB,WAAM,GAAG,CAAC,cAAc,CAAC,MAAM,EAAE,MAAM,CAAC,AAAlC,CAAmC;IAKtC,aAAa;QAE9B,OAAO,IAAI,CAAA;;;;;;+CAMgC,IAAI,CAAC,4BAA4B;;;KAG3E,CAAC;IACJ,CAAC;;AAf4B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAA2C;AAC1C;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAA0B;AAL3C,YAAY;IADxB,aAAa,CAAC,eAAe,CAAC;GAClB,YAAY,CAoBxB","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' | undefined;\n\n@customElement('u-icon-button')\nexport class UmIconButton extends UmToggleButton {\n\n  static override styles = [UmToggleButton.styles, styles];\n\n  @property({ reflect: true }) variant: UmIconButtonVariant = 'standard';\n  @property({ reflect: true }) width: UmIconButtonWidth;\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;;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"]}

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

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

package/button/icon-button.styles.js

@@ -35,83 +35,81 @@ export const styles = css `
     --_extra-large-pressed-shape-corner: var(--u-icon-button-extra-large-pressed-shape-corner, 16px);
     --_narrow-width: var(--_small-narrow-width);
     --_wide-width: var(--_small-wide-width);
+  }
+
+  .container {
     width: var(--_size);
     height: var(--_size);
     font-family: var(--u-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
   }
 
-  :host([size=extra-small]) {
+  .extra-small {
     --_narrow-width: var(--_extra-small-narrow-width);
     --_wide-width: var(--_extra-small-wide-width);
   }
 
-  :host([size=medium]) {
+  .medium {
     --_narrow-width: var(--_medium-narrow-width);
     --_wide-width: var(--_medium-wide-width);
   }
 
-  :host([size=large]) {
+  .large {
     --_narrow-width: var(--_large-narrow-width);
     --_wide-width: var(--_large-wide-width);
   }
 
-  :host([size=extra-large]) {
+  .extra-large {
     --_narrow-width: var(--_extra-large-narrow-width);
     --_wide-width: var(--_extra-large-wide-width);
   }
 
-  :host([width=narrow]) {
+  .narrow {
     width: var(--_narrow-width);
   }
 
-  :host([width=wide]) {
+  .wide {
     width: var(--_wide-width);
   }
 
-  :host([variant=filled]) {
+  .filled, .filled.selected {
+    background-color: var(--u-filled-icon-button-container-color, var(--u-color-primary, rgb(103, 80, 164)));
+    color: var(--u-filled-icon-button-text-color, var(--u-color-on-primary, rgb(255, 255, 255)));
+  }
+  .filled.toggle {
     background-color: var(--u-filled-icon-button-unselected-container-color, var(--u-color-surface-container, rgb(243, 237, 247)));
     color: var(--u-filled-icon-button-unselected-text-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));
   }
 
-  :host([variant=tonal]) {
+  .tonal {
     background-color: var(--u-total-icon-button-unselected-container-color, var(--u-color-secondary-container, rgb(232, 222, 248)));
     color: var(--u-tonal-icon-button-unselected-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));
   }
-
-  :host([selected][variant=filled]),
-  :host([variant=filled]:not([toggle])) {
-    background-color: var(--u-filled-icon-button-container-color, var(--u-color-primary, rgb(103, 80, 164)));
-    color: var(--u-filled-icon-button-text-color, var(--u-color-on-primary, rgb(255, 255, 255)));
-  }
-
-  :host([selected][variant=tonal]) {
+  .tonal.selected {
     background-color: var(--u-tonal-icon-button-container-color, var(--u-color-secondary, rgb(98, 91, 113)));
     color: var(--u-tonal-icon-button-text-color, var(--u-color-on-secondary, rgb(255, 255, 255)));
   }
 
-  :host([variant=standard]) {
+  .standard {
     color: var(--u-standard-icon-button-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));
   }
+  .standard.selected {
+    color: var(--u-standard-icon-button-selected-text-color, var(--u-color-primary, rgb(103, 80, 164)));
+    background-color: var(--u-standard-icon-button-selected-container-color, transparent);
+  }
 
-  :host([variant=outlined]) {
-    border: 1px solid var(--u-color-outline, rgb(121, 116, 126));
+  .outlined {
     color: var(--u-outlined-icon-button-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));
   }
-
-  :host([selected][variant=outlined]) {
+  .outlined, .outlined.selected.disabled {
+    border: 1px solid var(--u-color-outline-variant, rgb(202, 196, 208));
+  }
+  .outlined.selected {
     border: none;
     background-color: var(--u-outlined-icon-button-selected-container-color, var(--u-color-inverse-surface, rgb(50, 47, 53)));
     color: var(--u-outlined-icon-button-selected-text-color, var(--u-color-on-inverse-surface, rgb(245, 239, 247)));
   }
-
-  :host([selected][variant=standard]) {
-    color: var(--u-standard-icon-button-selected-text-color, var(--u-color-primary, rgb(103, 80, 164)));
-    background-color: var(--u-standard-icon-button-selected-container-color, transparent);
-  }
-
-  :host([disabled][variant=outlined]) {
-    background-color: transparent !important;
-    border-color: var(--u-outlined-icon-button-disabled-border-color, color-mix(in srgb, var(--u-color-on-surface, rgb(29, 27, 32)) var(--u-outlined-icon-button-disabled-border-opacity, 12%), transparent)) !important;
+  .outlined.disabled {
+    color: var(--u-outlined-icon-button-disabled-icon-color, color-mix(in srgb, var(--u-color-on-surface, rgb(29, 27, 32)) var(--u-outlined-icon-button-disabled-border-opacity, 10%), transparent)) !important;
   }
 `;
 //# sourceMappingURL=icon-button.styles.js.map

package/button/icon-button.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.styles.js","sourceRoot":"","sources":["../../src/button/icon-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkHzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    --_round-shape-corner: var(--u-icon-button-round-shape-corner, calc(var(--_size) / 2));\n    --_square-shape-corner: var(--u-icon-button-square-shape-corner, 12px);\n    --_extra-small-size: var(--u-icon-button-extra-small-height, 32px);\n    --_small-size: var(--u-icon-button-small-height, 40px);\n    --_medium-size: var(--u-icon-button-medium-height, 56px);\n    --_large-size: var(--u-icon-button-large-height, 96px);\n    --_extra-large-size: var(--u-icon-button-extra-large-height, 136px);\n    --_extra-small-narrow-width: var(--u-icon-button-extra-small-narrow-width, 28px);\n    --_small-narrow-width: var(--u-icon-button-small-narrow-width, 32px);\n    --_medium-narrow-width: var(--u-icon-button-medium-narrow-width, 48px);\n    --_large-narrow-width: var(--u-icon-button-large-narrow-width, 64px);\n    --_extra-large-narrow-width: var(--u-icon-button-extra-large-narrow-width, 104px);\n    --_extra-small-wide-width: var(--u-icon-button-extra-small-wide-width, 40px);\n    --_small-wide-width: var(--u-icon-button-small-wide-width, 52px);\n    --_medium-wide-width: var(--u-icon-button-medium-wide-width, 72px);\n    --_large-wide-width: var(--u-icon-button-large-wide-width, 128px);\n    --_extra-large-wide-width: var(--u-icon-button-extra-large-wide-width, 184px);\n    --_extra-small-icon-size: var(--u-icon-button-extra-small-icon-size, 1.25rem);\n    --_small-icon-size: var(--u-icon-button-small-icon-size, 1.5rem);\n    --_medium-icon-size: var(--u-icon-button-medium-icon-size, 1.5rem);\n    --_large-icon-size: var(--u-icon-button-large-icon-size, 2rem);\n    --_extra-large-icon-size: var(--u-icon-button-extra-large-icon-size, 2.5rem);\n    --_extra-small-square-shape-corner: var(--u-icon-button-extra-small-square-shape-corner, 12px);\n    --_small-square-shape-corner: var(--u-icon-button-small-square-shape-corner, 12px);\n    --_medium-square-shape-corner: var(--u-icon-button-medium-square-shape-corner, 16px);\n    --_large-square-shape-corner: var(--u-icon-button-large-square-shape-corner, 28px);\n    --_extra-large-square-shape-corner: var(--u-icon-button-extra-large-square-shape-corner, 28px);\n    --_extra-small-pressed-shape-corner: var(--u-icon-button-extra-small-pressed-shape-corner, 8px);\n    --_small-pressed-shape-corner: var(--u-icon-button-small-pressed-shape-corner, 8px);\n    --_medium-pressed-shape-corner: var(--u-icon-button-medium-pressed-shape-corner, 12px);\n    --_large-pressed-shape-corner: var(--u-icon-button-large-pressed-shape-corner, 16px);\n    --_extra-large-pressed-shape-corner: var(--u-icon-button-extra-large-pressed-shape-corner, 16px);\n    --_narrow-width: var(--_small-narrow-width);\n    --_wide-width: var(--_small-wide-width);\n    width: var(--_size);\n    height: var(--_size);\n    font-family: var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n  }\n\n  :host([size=extra-small]) {\n    --_narrow-width: var(--_extra-small-narrow-width);\n    --_wide-width: var(--_extra-small-wide-width);\n  }\n\n  :host([size=medium]) {\n    --_narrow-width: var(--_medium-narrow-width);\n    --_wide-width: var(--_medium-wide-width);\n  }\n\n  :host([size=large]) {\n    --_narrow-width: var(--_large-narrow-width);\n    --_wide-width: var(--_large-wide-width);\n  }\n\n  :host([size=extra-large]) {\n    --_narrow-width: var(--_extra-large-narrow-width);\n    --_wide-width: var(--_extra-large-wide-width);\n  }\n\n  :host([width=narrow]) {\n    width: var(--_narrow-width);\n  }\n\n  :host([width=wide]) {\n    width: var(--_wide-width);\n  }\n\n  :host([variant=filled]) {\n    background-color: var(--u-filled-icon-button-unselected-container-color, var(--u-color-surface-container, rgb(243, 237, 247)));\n    color: var(--u-filled-icon-button-unselected-text-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n  }\n\n  :host([variant=tonal]) {\n    background-color: var(--u-total-icon-button-unselected-container-color, var(--u-color-secondary-container, rgb(232, 222, 248)));\n    color: var(--u-tonal-icon-button-unselected-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n  }\n\n  :host([selected][variant=filled]),\n  :host([variant=filled]:not([toggle])) {\n    background-color: var(--u-filled-icon-button-container-color, var(--u-color-primary, rgb(103, 80, 164)));\n    color: var(--u-filled-icon-button-text-color, var(--u-color-on-primary, rgb(255, 255, 255)));\n  }\n\n  :host([selected][variant=tonal]) {\n    background-color: var(--u-tonal-icon-button-container-color, var(--u-color-secondary, rgb(98, 91, 113)));\n    color: var(--u-tonal-icon-button-text-color, var(--u-color-on-secondary, rgb(255, 255, 255)));\n  }\n\n  :host([variant=standard]) {\n    color: var(--u-standard-icon-button-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n  }\n\n  :host([variant=outlined]) {\n    border: 1px solid var(--u-color-outline, rgb(121, 116, 126));\n    color: var(--u-outlined-icon-button-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n  }\n\n  :host([selected][variant=outlined]) {\n    border: none;\n    background-color: var(--u-outlined-icon-button-selected-container-color, var(--u-color-inverse-surface, rgb(50, 47, 53)));\n    color: var(--u-outlined-icon-button-selected-text-color, var(--u-color-on-inverse-surface, rgb(245, 239, 247)));\n  }\n\n  :host([selected][variant=standard]) {\n    color: var(--u-standard-icon-button-selected-text-color, var(--u-color-primary, rgb(103, 80, 164)));\n    background-color: var(--u-standard-icon-button-selected-container-color, transparent);\n  }\n\n  :host([disabled][variant=outlined]) {\n    background-color: transparent !important;\n    border-color: var(--u-outlined-icon-button-disabled-border-color, color-mix(in srgb, var(--u-color-on-surface, rgb(29, 27, 32)) var(--u-outlined-icon-button-disabled-border-opacity, 12%), transparent)) !important;\n  }\n`;\n"]}
+{"version":3,"file":"icon-button.styles.js","sourceRoot":"","sources":["../../src/button/icon-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgHzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    --_round-shape-corner: var(--u-icon-button-round-shape-corner, calc(var(--_size) / 2));\n    --_square-shape-corner: var(--u-icon-button-square-shape-corner, 12px);\n    --_extra-small-size: var(--u-icon-button-extra-small-height, 32px);\n    --_small-size: var(--u-icon-button-small-height, 40px);\n    --_medium-size: var(--u-icon-button-medium-height, 56px);\n    --_large-size: var(--u-icon-button-large-height, 96px);\n    --_extra-large-size: var(--u-icon-button-extra-large-height, 136px);\n    --_extra-small-narrow-width: var(--u-icon-button-extra-small-narrow-width, 28px);\n    --_small-narrow-width: var(--u-icon-button-small-narrow-width, 32px);\n    --_medium-narrow-width: var(--u-icon-button-medium-narrow-width, 48px);\n    --_large-narrow-width: var(--u-icon-button-large-narrow-width, 64px);\n    --_extra-large-narrow-width: var(--u-icon-button-extra-large-narrow-width, 104px);\n    --_extra-small-wide-width: var(--u-icon-button-extra-small-wide-width, 40px);\n    --_small-wide-width: var(--u-icon-button-small-wide-width, 52px);\n    --_medium-wide-width: var(--u-icon-button-medium-wide-width, 72px);\n    --_large-wide-width: var(--u-icon-button-large-wide-width, 128px);\n    --_extra-large-wide-width: var(--u-icon-button-extra-large-wide-width, 184px);\n    --_extra-small-icon-size: var(--u-icon-button-extra-small-icon-size, 1.25rem);\n    --_small-icon-size: var(--u-icon-button-small-icon-size, 1.5rem);\n    --_medium-icon-size: var(--u-icon-button-medium-icon-size, 1.5rem);\n    --_large-icon-size: var(--u-icon-button-large-icon-size, 2rem);\n    --_extra-large-icon-size: var(--u-icon-button-extra-large-icon-size, 2.5rem);\n    --_extra-small-square-shape-corner: var(--u-icon-button-extra-small-square-shape-corner, 12px);\n    --_small-square-shape-corner: var(--u-icon-button-small-square-shape-corner, 12px);\n    --_medium-square-shape-corner: var(--u-icon-button-medium-square-shape-corner, 16px);\n    --_large-square-shape-corner: var(--u-icon-button-large-square-shape-corner, 28px);\n    --_extra-large-square-shape-corner: var(--u-icon-button-extra-large-square-shape-corner, 28px);\n    --_extra-small-pressed-shape-corner: var(--u-icon-button-extra-small-pressed-shape-corner, 8px);\n    --_small-pressed-shape-corner: var(--u-icon-button-small-pressed-shape-corner, 8px);\n    --_medium-pressed-shape-corner: var(--u-icon-button-medium-pressed-shape-corner, 12px);\n    --_large-pressed-shape-corner: var(--u-icon-button-large-pressed-shape-corner, 16px);\n    --_extra-large-pressed-shape-corner: var(--u-icon-button-extra-large-pressed-shape-corner, 16px);\n    --_narrow-width: var(--_small-narrow-width);\n    --_wide-width: var(--_small-wide-width);\n  }\n\n  .container {\n    width: var(--_size);\n    height: var(--_size);\n    font-family: var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n  }\n\n  .extra-small {\n    --_narrow-width: var(--_extra-small-narrow-width);\n    --_wide-width: var(--_extra-small-wide-width);\n  }\n\n  .medium {\n    --_narrow-width: var(--_medium-narrow-width);\n    --_wide-width: var(--_medium-wide-width);\n  }\n\n  .large {\n    --_narrow-width: var(--_large-narrow-width);\n    --_wide-width: var(--_large-wide-width);\n  }\n\n  .extra-large {\n    --_narrow-width: var(--_extra-large-narrow-width);\n    --_wide-width: var(--_extra-large-wide-width);\n  }\n\n  .narrow {\n    width: var(--_narrow-width);\n  }\n\n  .wide {\n    width: var(--_wide-width);\n  }\n\n  .filled, .filled.selected {\n    background-color: var(--u-filled-icon-button-container-color, var(--u-color-primary, rgb(103, 80, 164)));\n    color: var(--u-filled-icon-button-text-color, var(--u-color-on-primary, rgb(255, 255, 255)));\n  }\n  .filled.toggle {\n    background-color: var(--u-filled-icon-button-unselected-container-color, var(--u-color-surface-container, rgb(243, 237, 247)));\n    color: var(--u-filled-icon-button-unselected-text-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n  }\n\n  .tonal {\n    background-color: var(--u-total-icon-button-unselected-container-color, var(--u-color-secondary-container, rgb(232, 222, 248)));\n    color: var(--u-tonal-icon-button-unselected-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n  }\n  .tonal.selected {\n    background-color: var(--u-tonal-icon-button-container-color, var(--u-color-secondary, rgb(98, 91, 113)));\n    color: var(--u-tonal-icon-button-text-color, var(--u-color-on-secondary, rgb(255, 255, 255)));\n  }\n\n  .standard {\n    color: var(--u-standard-icon-button-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n  }\n  .standard.selected {\n    color: var(--u-standard-icon-button-selected-text-color, var(--u-color-primary, rgb(103, 80, 164)));\n    background-color: var(--u-standard-icon-button-selected-container-color, transparent);\n  }\n\n  .outlined {\n    color: var(--u-outlined-icon-button-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n  }\n  .outlined, .outlined.selected.disabled {\n    border: 1px solid var(--u-color-outline-variant, rgb(202, 196, 208));\n  }\n  .outlined.selected {\n    border: none;\n    background-color: var(--u-outlined-icon-button-selected-container-color, var(--u-color-inverse-surface, rgb(50, 47, 53)));\n    color: var(--u-outlined-icon-button-selected-text-color, var(--u-color-on-inverse-surface, rgb(245, 239, 247)));\n  }\n  .outlined.disabled {\n    color: var(--u-outlined-icon-button-disabled-icon-color, color-mix(in srgb, var(--u-color-on-surface, rgb(29, 27, 32)) var(--u-outlined-icon-button-disabled-border-opacity, 10%), transparent)) !important;\n  }\n`;\n"]}

package/button/toggle-button.d.ts

@@ -1,7 +1,7 @@
 import { CSSResultGroup } from '@lit/reactive-element/css-tag';
 import { UmButtonBase } from './button-base.js';
-export type UmButtonShape = 'round' | 'square' | undefined;
-export type UmButtonSize = 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large' | undefined;
+export type UmButtonShape = 'round' | 'square';
+export type UmButtonSize = 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large';
 export declare abstract class UmToggleButton extends UmButtonBase {
     static styles: CSSResultGroup;
     /**
@@ -29,9 +29,10 @@ export declare abstract class UmToggleButton extends UmButtonBase {
      * The `aria-label` of the button when the button is toggleable and selected.
      */
     ariaLabelSelected: string;
-    hasSelectionIcon: boolean;
-    protected handleClick(event: UIEvent): void;
+    _hasSelectionIcon: boolean;
+    protected _getContainerClasses(): Record<string, boolean>;
+    protected _handleClick(event: UIEvent): void;
     getAriaLabel(): string | null;
-    protected handleSelectedIconSlotChange(e: Event): void;
+    protected _handleSelectedIconSlotChange(e: Event): void;
 }
 //# sourceMappingURL=toggle-button.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"toggle-button.d.ts","sourceRoot":"","sources":["../../src/button/toggle-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAI/D,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAGhD,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC;AAC3D,MAAM,MAAM,YAAY,GAAG,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,aAAa,GAAG,SAAS,CAAC;AAEpG,8BAAsB,cAAe,SAAQ,YAAY;IAEvD,OAAgB,MAAM,EAAE,cAAc,CAAiC;IAEvE;;;OAGG;IACyC,MAAM,UAAS;IAE3D;;OAEG;IACoE,WAAW,UAAS;IAE3F;;OAEG;IACyC,QAAQ,UAAS;IAE7D;;OAEG;IAC0B,KAAK,EAAE,aAAa,CAAC;IAElD;;OAEG;IAC0B,IAAI,EAAE,YAAY,CAAC;IAEhD;;OAEG;IAC6C,iBAAiB,SAAM;IAEM,gBAAgB,UAAS;cAEnF,WAAW,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAW3C,YAAY,IAAI,MAAM,GAAG,IAAI;IAMtC,SAAS,CAAC,4BAA4B,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;CAGvD"}
+{"version":3,"file":"toggle-button.d.ts","sourceRoot":"","sources":["../../src/button/toggle-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAI/D,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAGhD,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,CAAC;AAC/C,MAAM,MAAM,YAAY,GAAG,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,aAAa,CAAC;AAExF,8BAAsB,cAAe,SAAQ,YAAY;IAEvD,OAAgB,MAAM,EAAE,cAAc,CAAiC;IAEvE;;;OAGG;IACyC,MAAM,UAAS;IAE3D;;OAEG;IACoE,WAAW,UAAS;IAE3F;;OAEG;IACyC,QAAQ,UAAS;IAE7D;;OAEG;IAC0B,KAAK,EAAE,aAAa,CAAW;IAE5D;;OAEG;IAC0B,IAAI,EAAE,YAAY,CAAW;IAE1D;;OAEG;IAC6C,iBAAiB,SAAM;IAE9D,iBAAiB,UAAS;cAEhB,oBAAoB,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;cAY/C,YAAY,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAW5C,YAAY,IAAI,MAAM,GAAG,IAAI;IAMtC,SAAS,CAAC,6BAA6B,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;CAGxD"}

package/button/toggle-button.js

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import { UmButtonBase } from './button-base.js';
 import { styles } from './toggle-button.styles.js';
 export class UmToggleButton extends UmButtonBase {
@@ -18,15 +18,34 @@ export class UmToggleButton extends UmButtonBase {
          * Sets the selected state
          */
         this.selected = false;
+        /**
+         * Sets the shape of the button
+         */
+        this.shape = 'round';
+        /**
+         * Sets the size of the button
+         */
+        this.size = 'small';
         /**
          * The `aria-label` of the button when the button is toggleable and selected.
          */
         this.ariaLabelSelected = '';
-        this.hasSelectionIcon = false;
+        this._hasSelectionIcon = false;
     }
     static { this.styles = [UmButtonBase.styles, styles]; }
-    handleClick(event) {
-        super.handleClick(event);
+    _getContainerClasses() {
+        return {
+            ...super._getContainerClasses(),
+            [this.shape]: true,
+            [this.size]: true,
+            selected: this.selected,
+            toggle: this.toggle,
+            'toggle-shape': this.toggleShape,
+            'selection-icon': this._hasSelectionIcon,
+        };
+    }
+    _handleClick(event) {
+        super._handleClick(event);
         if (!this.toggle) {
             return;
         }
@@ -38,8 +57,8 @@ export class UmToggleButton extends UmButtonBase {
             ? this.ariaLabelSelected || super.getAriaLabel()
             : super.getAriaLabel();
     }
-    handleSelectedIconSlotChange(e) {
-        this.hasSelectionIcon = e.target.assignedElements({ flatten: true }).length > 0;
+    _handleSelectedIconSlotChange(e) {
+        this._hasSelectionIcon = e.target.assignedElements({ flatten: true }).length > 0;
     }
 }
 __decorate([
@@ -61,6 +80,6 @@ __decorate([
     property({ attribute: 'aria-label-selected' })
 ], UmToggleButton.prototype, "ariaLabelSelected", void 0);
 __decorate([
-    property({ type: Boolean, attribute: 'has-selection-icon', reflect: true })
-], UmToggleButton.prototype, "hasSelectionIcon", void 0);
+    state()
+], UmToggleButton.prototype, "_hasSelectionIcon", void 0);
 //# sourceMappingURL=toggle-button.js.map

package/button/toggle-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-button.js","sourceRoot":"","sources":["../../src/button/toggle-button.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAKnD,MAAM,OAAgB,cAAe,SAAQ,YAAY;IAAzD;;QAIE;;;WAGG;QACyC,WAAM,GAAG,KAAK,CAAC;QAE3D;;WAEG;QACoE,gBAAW,GAAG,KAAK,CAAC;QAE3F;;WAEG;QACyC,aAAQ,GAAG,KAAK,CAAC;QAY7D;;WAEG;QAC6C,sBAAiB,GAAG,EAAE,CAAC;QAEM,qBAAgB,GAAG,KAAK,CAAC;IAsBxG,CAAC;aAvDiB,WAAM,GAAmB,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,AAAhD,CAAiD;IAmCpD,WAAW,CAAC,KAAc;QAC3C,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QAEzB,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;YACjB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QAC/B,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IAC7D,CAAC;IAEQ,YAAY;QACnB,OAAO,IAAI,CAAC,QAAQ;YAClB,CAAC,CAAC,IAAI,CAAC,iBAAiB,IAAI,KAAK,CAAC,YAAY,EAAE;YAChD,CAAC,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC;IAC3B,CAAC;IAES,4BAA4B,CAAC,CAAQ;QAC7C,IAAI,CAAC,gBAAgB,GAAI,CAAC,CAAC,MAA0B,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;IACvG,CAAC;;AAhD2C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAAgB;AAKY;IAAtE,QAAQ,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAAqB;AAK/C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAAkB;AAKhC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAAsB;AAKrB;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAAoB;AAKA;IAA/C,QAAQ,CAAC,EAAE,SAAS,EAAE,qBAAqB,EAAE,CAAC;yDAAwB;AAEM;IAA5E,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,oBAAoB,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wDAA0B","sourcesContent":["import { CSSResultGroup } from '@lit/reactive-element/css-tag';\n\nimport { property } from 'lit/decorators.js';\n\nimport { UmButtonBase } from './button-base.js';\nimport { styles } from './toggle-button.styles.js';\n\nexport type UmButtonShape = 'round' | 'square' | undefined;\nexport type UmButtonSize = 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large' | undefined;\n\nexport abstract class UmToggleButton extends UmButtonBase {\n\n  static override styles: CSSResultGroup = [UmButtonBase.styles, styles];\n\n  /**\n   * When true, the button will toggle between selected and unselected\n   * states\n   */\n  @property({ type: Boolean, reflect: true }) toggle = false;\n\n  /**\n   * When true, the button will toggle between round and square shapes\n   */\n  @property({ attribute: 'toggle-shape', type: Boolean, reflect: true }) toggleShape = false;\n\n  /**\n   * Sets the selected state\n   */\n  @property({ type: Boolean, reflect: true }) selected = false;\n\n  /**\n   * Sets the shape of the button\n   */\n  @property({ reflect: true }) shape: UmButtonShape;\n\n  /**\n   * Sets the size of the button\n   */\n  @property({ reflect: true }) size: UmButtonSize;\n\n  /**\n   * The `aria-label` of the button when the button is toggleable and selected.\n   */\n  @property({ attribute: 'aria-label-selected' }) ariaLabelSelected = '';\n\n  @property({ type: Boolean, attribute: 'has-selection-icon', reflect: true }) hasSelectionIcon = false;\n\n  protected override handleClick(event: UIEvent): void {\n    super.handleClick(event);\n\n    if (!this.toggle) {\n      return;\n    }\n\n    this.selected = !this.selected;\n    this.dispatchEvent(new Event('change', { bubbles: true }));\n  }\n\n  override getAriaLabel(): string | null {\n    return this.selected\n      ? this.ariaLabelSelected || super.getAriaLabel()\n      : super.getAriaLabel();\n  }\n\n  protected handleSelectedIconSlotChange(e: Event): void {\n    this.hasSelectionIcon = (e.target as HTMLSlotElement).assignedElements({ flatten: true }).length > 0;\n  }\n}\n"]}
+{"version":3,"file":"toggle-button.js","sourceRoot":"","sources":["../../src/button/toggle-button.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEpD,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAKnD,MAAM,OAAgB,cAAe,SAAQ,YAAY;IAAzD;;QAIE;;;WAGG;QACyC,WAAM,GAAG,KAAK,CAAC;QAE3D;;WAEG;QACoE,gBAAW,GAAG,KAAK,CAAC;QAE3F;;WAEG;QACyC,aAAQ,GAAG,KAAK,CAAC;QAE7D;;WAEG;QAC0B,UAAK,GAAkB,OAAO,CAAC;QAE5D;;WAEG;QAC0B,SAAI,GAAiB,OAAO,CAAC;QAE1D;;WAEG;QAC6C,sBAAiB,GAAG,EAAE,CAAC;QAE9D,sBAAiB,GAAG,KAAK,CAAC;IAkCrC,CAAC;aAnEiB,WAAM,GAAmB,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,AAAhD,CAAiD;IAmCpD,oBAAoB;QACrC,OAAO;YACL,GAAG,KAAK,CAAC,oBAAoB,EAAE;YAC/B,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,IAAI;YAClB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI;YACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,cAAc,EAAE,IAAI,CAAC,WAAW;YAChC,gBAAgB,EAAE,IAAI,CAAC,iBAAiB;SACzC,CAAC;IACJ,CAAC;IAEkB,YAAY,CAAC,KAAc;QAC5C,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QAE1B,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;YACjB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QAC/B,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IAC7D,CAAC;IAEQ,YAAY;QACnB,OAAO,IAAI,CAAC,QAAQ;YAClB,CAAC,CAAC,IAAI,CAAC,iBAAiB,IAAI,KAAK,CAAC,YAAY,EAAE;YAChD,CAAC,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC;IAC3B,CAAC;IAES,6BAA6B,CAAC,CAAQ;QAC9C,IAAI,CAAC,iBAAiB,GAAI,CAAC,CAAC,MAA0B,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;IACxG,CAAC;;AA5D2C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAAgB;AAKY;IAAtE,QAAQ,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAAqB;AAK/C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAAkB;AAKhC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAAgC;AAK/B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAA8B;AAKV;IAA/C,QAAQ,CAAC,EAAE,SAAS,EAAE,qBAAqB,EAAE,CAAC;yDAAwB;AAE9D;IAAR,KAAK,EAAE;yDAA2B","sourcesContent":["import { CSSResultGroup } from '@lit/reactive-element/css-tag';\n\nimport { property, state } from 'lit/decorators.js';\n\nimport { UmButtonBase } from './button-base.js';\nimport { styles } from './toggle-button.styles.js';\n\nexport type UmButtonShape = 'round' | 'square';\nexport type UmButtonSize = 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large';\n\nexport abstract class UmToggleButton extends UmButtonBase {\n\n  static override styles: CSSResultGroup = [UmButtonBase.styles, styles];\n\n  /**\n   * When true, the button will toggle between selected and unselected\n   * states\n   */\n  @property({ type: Boolean, reflect: true }) toggle = false;\n\n  /**\n   * When true, the button will toggle between round and square shapes\n   */\n  @property({ attribute: 'toggle-shape', type: Boolean, reflect: true }) toggleShape = false;\n\n  /**\n   * Sets the selected state\n   */\n  @property({ type: Boolean, reflect: true }) selected = false;\n\n  /**\n   * Sets the shape of the button\n   */\n  @property({ reflect: true }) shape: UmButtonShape = 'round';\n\n  /**\n   * Sets the size of the button\n   */\n  @property({ reflect: true }) size: UmButtonSize = 'small';\n\n  /**\n   * The `aria-label` of the button when the button is toggleable and selected.\n   */\n  @property({ attribute: 'aria-label-selected' }) ariaLabelSelected = '';\n\n  @state() _hasSelectionIcon = false;\n\n  protected override _getContainerClasses(): Record<string, boolean> {\n    return {\n      ...super._getContainerClasses(),\n      [this.shape]: true,\n      [this.size]: true,\n      selected: this.selected,\n      toggle: this.toggle,\n      'toggle-shape': this.toggleShape,\n      'selection-icon': this._hasSelectionIcon,\n    };\n  }\n\n  protected override _handleClick(event: UIEvent): void {\n    super._handleClick(event);\n\n    if (!this.toggle) {\n      return;\n    }\n\n    this.selected = !this.selected;\n    this.dispatchEvent(new Event('change', { bubbles: true }));\n  }\n\n  override getAriaLabel(): string | null {\n    return this.selected\n      ? this.ariaLabelSelected || super.getAriaLabel()\n      : super.getAriaLabel();\n  }\n\n  protected _handleSelectedIconSlotChange(e: Event): void {\n    this._hasSelectionIcon = (e.target as HTMLSlotElement).assignedElements({ flatten: true }).length > 0;\n  }\n}\n"]}

package/button/toggle-button.styles.d.ts.map

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

package/button/toggle-button.styles.js

@@ -5,51 +5,56 @@ export const styles = css `
     --_square-shape-corner: var(--_small-square-shape-corner);
     --_pressed-shape-corner: var(--_small-pressed-shape-corner);
     --_icon-size: var(--_small-icon-size);
-    border-radius: var(--_round-shape-corner);
-    height: var(--_size);
   }
 
-  :host([size=extra-small]) {
+  .extra-small {
     --_size: var(--_extra-small-size);
     --_icon-size: var(--_extra-small-icon-size);
     --_square-shape-corner: var(--_extra-small-square-shape-corner);
     --_pressed-shape-corner: var(--_extra-small-pressed-shape-corner);
   }
 
-  :host([size=medium]) {
+  .medium {
     --_size: var(--_medium-size);
     --_icon-size: var(--_medium-icon-size);
     --_square-shape-corner: var(--_medium-square-shape-corner);
     --_pressed-shape-corner: var(--_medium-pressed-shape-corner);
   }
 
-  :host([size=large]) {
+  .large {
     --_size: var(--_large-size);
     --_icon-size: var(--_large-icon-size);
     --_square-shape-corner: var(--_large-square-shape-corner);
     --_pressed-shape-corner: var(--_large-pressed-shape-corner);
   }
 
-  :host([size=extra-large]) {
+  .extra-large {
     --_size: var(--_extra-large-size);
     --_icon-size: var(--_extra-large-icon-size);
     --_square-shape-corner: var(--_extra-large-square-shape-corner);
     --_pressed-shape-corner: var(--_extra-large-pressed-shape-corner);
   }
 
-  :host([selected][toggle-shape]) {
-    border-radius: var(--_square-shape-corner);
+  .container {
+    height: var(--_size);
   }
 
-  :host([shape=square]) {
+  .round {
+    border-radius: var(--_round-shape-corner);
+  }
+
+  .square {
     border-radius: var(--_square-shape-corner);
   }
 
-  :host([shape=square][selected][toggle-shape]) {
+  .selected.toggle-shape.round {
+    border-radius: var(--_square-shape-corner);
+  }
+  .selected.toggle-shape.square {
     border-radius: var(--_round-shape-corner);
   }
 
-  :host([toggle-shape]:not([disabled]):active) {
+  :host(:active) .toggle-shape:not(.disabled) {
     border-radius: var(--_pressed-shape-corner);
   }
 
@@ -68,11 +73,11 @@ export const styles = css `
     transition-delay: calc(var(--_morph-duration) / 2);
   }
 
-  :host([selected][has-selection-icon]) .icon-default {
+  .selected.selection-icon .icon-default {
     opacity: 0;
     transition-delay: 0ms;
   }
-  :host([selected][has-selection-icon]) .icon-selected {
+  .selected.selection-icon .icon-selected {
     opacity: 1;
     transition-delay: calc(var(--_morph-duration) / 2);
   }

package/button/toggle-button.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-button.styles.js","sourceRoot":"","sources":["../../src/button/toggle-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyFzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    --_size: var(--_small-size);\n    --_square-shape-corner: var(--_small-square-shape-corner);\n    --_pressed-shape-corner: var(--_small-pressed-shape-corner);\n    --_icon-size: var(--_small-icon-size);\n    border-radius: var(--_round-shape-corner);\n    height: var(--_size);\n  }\n\n  :host([size=extra-small]) {\n    --_size: var(--_extra-small-size);\n    --_icon-size: var(--_extra-small-icon-size);\n    --_square-shape-corner: var(--_extra-small-square-shape-corner);\n    --_pressed-shape-corner: var(--_extra-small-pressed-shape-corner);\n  }\n\n  :host([size=medium]) {\n    --_size: var(--_medium-size);\n    --_icon-size: var(--_medium-icon-size);\n    --_square-shape-corner: var(--_medium-square-shape-corner);\n    --_pressed-shape-corner: var(--_medium-pressed-shape-corner);\n  }\n\n  :host([size=large]) {\n    --_size: var(--_large-size);\n    --_icon-size: var(--_large-icon-size);\n    --_square-shape-corner: var(--_large-square-shape-corner);\n    --_pressed-shape-corner: var(--_large-pressed-shape-corner);\n  }\n\n  :host([size=extra-large]) {\n    --_size: var(--_extra-large-size);\n    --_icon-size: var(--_extra-large-icon-size);\n    --_square-shape-corner: var(--_extra-large-square-shape-corner);\n    --_pressed-shape-corner: var(--_extra-large-pressed-shape-corner);\n  }\n\n  :host([selected][toggle-shape]) {\n    border-radius: var(--_square-shape-corner);\n  }\n\n  :host([shape=square]) {\n    border-radius: var(--_square-shape-corner);\n  }\n\n  :host([shape=square][selected][toggle-shape]) {\n    border-radius: var(--_round-shape-corner);\n  }\n\n  :host([toggle-shape]:not([disabled]):active) {\n    border-radius: var(--_pressed-shape-corner);\n  }\n\n  .icon-container {\n    position: relative;\n    width: var(--_icon-size);\n    height: 1px;\n  }\n\n  .icon-default {\n    opacity: 1;\n  }\n\n  .icon-selected {\n    opacity: 0;\n    transition-delay: calc(var(--_morph-duration) / 2);\n  }\n\n  :host([selected][has-selection-icon]) .icon-default {\n    opacity: 0;\n    transition-delay: 0ms;\n  }\n  :host([selected][has-selection-icon]) .icon-selected {\n    opacity: 1;\n    transition-delay: calc(var(--_morph-duration) / 2);\n  }\n\n  .icon {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: var(--_icon-size);\n    transform: translate3d(-50%, -50%, 0);\n    transition: opacity var(--_morph-duration) linear;\n  }\n`;\n"]}
+{"version":3,"file":"toggle-button.styles.js","sourceRoot":"","sources":["../../src/button/toggle-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8FzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    --_size: var(--_small-size);\n    --_square-shape-corner: var(--_small-square-shape-corner);\n    --_pressed-shape-corner: var(--_small-pressed-shape-corner);\n    --_icon-size: var(--_small-icon-size);\n  }\n\n  .extra-small {\n    --_size: var(--_extra-small-size);\n    --_icon-size: var(--_extra-small-icon-size);\n    --_square-shape-corner: var(--_extra-small-square-shape-corner);\n    --_pressed-shape-corner: var(--_extra-small-pressed-shape-corner);\n  }\n\n  .medium {\n    --_size: var(--_medium-size);\n    --_icon-size: var(--_medium-icon-size);\n    --_square-shape-corner: var(--_medium-square-shape-corner);\n    --_pressed-shape-corner: var(--_medium-pressed-shape-corner);\n  }\n\n  .large {\n    --_size: var(--_large-size);\n    --_icon-size: var(--_large-icon-size);\n    --_square-shape-corner: var(--_large-square-shape-corner);\n    --_pressed-shape-corner: var(--_large-pressed-shape-corner);\n  }\n\n  .extra-large {\n    --_size: var(--_extra-large-size);\n    --_icon-size: var(--_extra-large-icon-size);\n    --_square-shape-corner: var(--_extra-large-square-shape-corner);\n    --_pressed-shape-corner: var(--_extra-large-pressed-shape-corner);\n  }\n\n  .container {\n    height: var(--_size);\n  }\n\n  .round {\n    border-radius: var(--_round-shape-corner);\n  }\n\n  .square {\n    border-radius: var(--_square-shape-corner);\n  }\n\n  .selected.toggle-shape.round {\n    border-radius: var(--_square-shape-corner);\n  }\n  .selected.toggle-shape.square {\n    border-radius: var(--_round-shape-corner);\n  }\n\n  :host(:active) .toggle-shape:not(.disabled) {\n    border-radius: var(--_pressed-shape-corner);\n  }\n\n  .icon-container {\n    position: relative;\n    width: var(--_icon-size);\n    height: 1px;\n  }\n\n  .icon-default {\n    opacity: 1;\n  }\n\n  .icon-selected {\n    opacity: 0;\n    transition-delay: calc(var(--_morph-duration) / 2);\n  }\n\n  .selected.selection-icon .icon-default {\n    opacity: 0;\n    transition-delay: 0ms;\n  }\n  .selected.selection-icon .icon-selected {\n    opacity: 1;\n    transition-delay: calc(var(--_morph-duration) / 2);\n  }\n\n  .icon {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: var(--_icon-size);\n    transform: translate3d(-50%, -50%, 0);\n    transition: opacity var(--_morph-duration) linear;\n  }\n`;\n"]}

package/chip/chip.d.ts

@@ -30,31 +30,17 @@ export declare class UmChip extends UmButtonWrapper {
      * Hide the selected icon
      */
     hideSelectedIcon: boolean;
-    /**
-     * Whether the chip has a leading icon or not
-     *
-     * _Note:_ Readonly
-     */
-    hasLeadingIcon: boolean;
-    /**
-     * Whether the chip has a selected icon or not
-     *
-     * _Note:_ Readonly
-     */
-    hasSelectedIcon: boolean;
-    /**
-     * Whether the chip has a trailing icon or not
-     *
-     * _Note:_ Readonly
-     */
-    hasTrailingIcon: boolean;
-    private readonly assignedLeadingIcons;
-    private readonly assignedSelectedIcons;
-    private readonly assignedTrailingIcons;
+    private _hasLeadingIcon;
+    private _hasSelectedIcon;
+    private _hasTrailingIcon;
+    private readonly _assignedLeadingIcons;
+    private readonly _assignedSelectedIcons;
+    private readonly _assignedTrailingIcons;
     removeRipple: UmRipple;
     connectedCallback(): void;
-    protected handleClick(event: UIEvent): void;
-    protected renderContent(): HTMLTemplateResult;
+    protected _handleClick(event: UIEvent): void;
+    protected _getContainerClasses(): Record<string, boolean>;
+    protected _renderContent(): HTMLTemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/chip/chip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chip.d.ts","sourceRoot":"","sources":["../../src/chip/chip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAW,MAAM,KAAK,CAAC;AAGxD,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAG9D,OAAO,qBAAqB,CAAC;AAC7B,OAAO,2BAA2B,CAAC;AAEnC,qBACa,MAAO,SAAQ,eAAe;;IACzC,OAAgB,MAAM,iCAAoC;IAK1D;;OAEG;IACyC,QAAQ,UAAS;IAE7D,IACI,SAAS,IAAI,OAAO,CAEvB;IAED,IAAI,SAAS,CAAC,KAAK,EAAE,OAAO,EAG3B;IAED;;OAEG;IACyC,QAAQ,UAAS;IAE7D;;;OAGG;IACH,IACI,MAAM,IAAI,OAAO,CAEpB;IAED,IAAI,MAAM,CAAC,KAAK,EAAE,OAAO,EAGxB;IAED;;OAEG;IACyC,SAAS,UAAS;IAE9D;;OAEG;IAC0E,gBAAgB,UAAS;IAEtG;;;;OAIG;IACwE,cAAc,UAAS;IAElG;;;;OAIG;IACyE,eAAe,UAAS;IAEpG;;;;OAIG;IACyE,eAAe,UAAS;IAGpG,OAAO,CAAC,QAAQ,CAAC,oBAAoB,CAAiB;IAGtD,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAAiB;IAGvD,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAAiB;IAE9B,YAAY,EAAG,QAAQ,CAAC;IAExC,iBAAiB;cAgCP,WAAW,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;cAWjC,aAAa,IAAI,kBAAkB;CA2CvD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,QAAQ,EAAE,MAAM,CAAC;KAClB;CACF"}
+{"version":3,"file":"chip.d.ts","sourceRoot":"","sources":["../../src/chip/chip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAW,MAAM,KAAK,CAAC;AAGxD,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAG9D,OAAO,qBAAqB,CAAC;AAC7B,OAAO,2BAA2B,CAAC;AAEnC,qBACa,MAAO,SAAQ,eAAe;;IACzC,OAAgB,MAAM,iCAAoC;IAK1D;;OAEG;IACyC,QAAQ,UAAS;IAE7D,IACI,SAAS,IAAI,OAAO,CAEvB;IAED,IAAI,SAAS,CAAC,KAAK,EAAE,OAAO,EAG3B;IAED;;OAEG;IACyC,QAAQ,UAAS;IAE7D;;;OAGG;IACH,IACI,MAAM,IAAI,OAAO,CAEpB;IAED,IAAI,MAAM,CAAC,KAAK,EAAE,OAAO,EAGxB;IAED;;OAEG;IACyC,SAAS,UAAS;IAE9D;;OAEG;IAC0E,gBAAgB,UAAS;IAE7F,OAAO,CAAC,eAAe,CAAS;IAChC,OAAO,CAAC,gBAAgB,CAAS;IACjC,OAAO,CAAC,gBAAgB,CAAS;IAG1C,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAAiB;IAGvD,OAAO,CAAC,QAAQ,CAAC,sBAAsB,CAAiB;IAGxD,OAAO,CAAC,QAAQ,CAAC,sBAAsB,CAAiB;IAE/B,YAAY,EAAG,QAAQ,CAAC;IAExC,iBAAiB;cAgCP,YAAY,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;cAWlC,oBAAoB,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;cAe/C,cAAc,IAAI,kBAAkB;CA6CxD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,QAAQ,EAAE,MAAM,CAAC;KAClB;CACF"}