@api-client/ui 0.2.9 → 0.2.11

package/build/src/md/icon-button/internals/IconButton.d.ts

@@ -1,28 +1,13 @@
 import { PropertyValues, TemplateResult } from 'lit';
 import { BeginPressConfig, EndPressConfig } from '../../../controllers/ActionController.js';
-import UiRipple from '../../ripple/internals/ripple.js';
 import { UiElement } from '../../UiElement.js';
+import UiRipple from '../../ripple/internals/ripple.js';
 import '../../ripple/ui-ripple.js';
-/**
- * The type of the icon button rendered.
- */
-export declare enum IconButtonType {
-    'filled' = "filled",
-    'tonal' = "tonal",
-    'outlined' = "outlined",
-    'standard' = "standard"
-}
+import '@material/web/focus/md-focus-ring.js';
 /**
  * @fires active - An event dispatched when the `active` state  has changed. This only happens when the button is `toggle`.
  */
-export default class UiIconButton extends UiElement {
-    /**
-     * The type of the rendered button according to Material 3 spec.
-     *
-     * @default {ButtonType.filled}
-     * @attribute
-     */
-    accessor type: IconButtonType;
+export default class IconButton extends UiElement {
     /**
      * Whether the button can be toggled.
      * A toggle button behaves different as it gets the `aria-pressed` attribute
@@ -41,23 +26,22 @@ export default class UiIconButton extends UiElement {
      * @attribute
      */
     accessor active: boolean | undefined;
-    protected accessor ripple: Promise<UiRipple | null>;
-    protected accessor showRipple: boolean;
     get disabled(): boolean;
     /**
      * When set, the button is a disabled state.
      * @attribute
      */
     set disabled(value: boolean);
-    protected readonly getRipple: () => Promise<UiRipple | null>;
+    protected accessor ripple: UiRipple | null;
     constructor();
     connectedCallback(): void;
     protected update(changedProperties: PropertyValues<this>): void;
-    protected pressRipple(): Promise<void>;
-    protected endRipple(): Promise<void>;
+    protected pressRipple(options: BeginPressConfig): void;
+    protected endRipple(): void;
     beginPress(options: BeginPressConfig): void;
     endPress(config: EndPressConfig): void;
+    handlePointerEnter(e: PointerEvent): void;
+    handlePointerLeave(e: PointerEvent): void;
     protected render(): TemplateResult;
-    protected renderRipple: () => TemplateResult;
 }
 //# sourceMappingURL=IconButton.d.ts.map

package/build/src/md/icon-button/internals/IconButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../../../src/md/icon-button/internals/IconButton.ts"],"names":[],"mappings":"AACA,OAAO,EAAQ,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAA;AAI1D,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAA;AAC3F,OAAO,QAAQ,MAAM,kCAAkC,CAAA;AAEvD,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAG9C,OAAO,2BAA2B,CAAA;AAElC;;GAEG;AACH,oBAAY,cAAc;IACxB,QAAQ,WAAW;IACnB,OAAO,UAAU;IACjB,UAAU,aAAa;IACvB,UAAU,aAAa;CACxB;AAED;;GAEG;AACH,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,SAAS;IACjD;;;;;OAKG;IACwC,QAAQ,CAAC,IAAI,EAAE,cAAc,CAAA;IAExE;;;;;;;;;OASG;IACyC,QAAQ,CAAC,MAAM,EAAE,OAAO,GAAG,SAAS,CAAA;IAEhF;;;;;OAKG;IACyC,QAAQ,CAAC,MAAM,EAAE,OAAO,GAAG,SAAS,CAAA;IAEvD,SAAS,CAAC,QAAQ,CAAC,MAAM,EAAG,OAAO,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAA;IAEpE,SAAS,CAAC,QAAQ,CAAC,UAAU,UAAQ;IAE9C,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED;;;OAGG;IACH,IACI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAI1B;IAED,SAAS,CAAC,QAAQ,CAAC,SAAS,QAAO,OAAO,CAAC,QAAQ,GAAG,IAAI,CAAC,CAG1D;;IAiBQ,iBAAiB,IAAI,IAAI;cAUf,MAAM,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAOxD,WAAW,IAAI,OAAO,CAAC,IAAI,CAAC;cAO5B,SAAS,IAAI,OAAO,CAAC,IAAI,CAAC;IAKjC,UAAU,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI;IAK3C,QAAQ,CAAC,MAAM,EAAE,cAAc,GAAG,IAAI;cAqB5B,MAAM,IAAI,cAAc;IAkB3C,SAAS,CAAC,YAAY,QAAO,cAAc,CAG1C;CACF"}
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../../../src/md/icon-button/internals/IconButton.ts"],"names":[],"mappings":"AACA,OAAO,EAAQ,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAA;AAG1D,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAA;AAC3F,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAE9C,OAAO,QAAQ,MAAM,kCAAkC,CAAA;AAEvD,OAAO,2BAA2B,CAAA;AAClC,OAAO,sCAAsC,CAAA;AAE7C;;GAEG;AACH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,SAAS;IAC/C;;;;;;;;;OASG;IACyC,QAAQ,CAAC,MAAM,EAAE,OAAO,GAAG,SAAS,CAAA;IAEhF;;;;;OAKG;IACyC,QAAQ,CAAC,MAAM,EAAE,OAAO,GAAG,SAAS,CAAA;IAEhF,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED;;;OAGG;IACH,IACI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAI1B;IAEmB,SAAS,CAAC,QAAQ,CAAC,MAAM,EAAG,QAAQ,GAAG,IAAI,CAAA;;IAiBtD,iBAAiB,IAAI,IAAI;cAUf,MAAM,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAOxE,SAAS,CAAC,WAAW,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI;IAOtD,SAAS,CAAC,SAAS,IAAI,IAAI;IAIlB,UAAU,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI;IAK3C,QAAQ,CAAC,MAAM,EAAE,cAAc,GAAG,IAAI;IAqBtC,kBAAkB,CAAC,CAAC,EAAE,YAAY,GAAG,IAAI;IAOzC,kBAAkB,CAAC,CAAC,EAAE,YAAY,GAAG,IAAI;cAO/B,MAAM,IAAI,cAAc;CAkB5C"}

package/build/src/md/icon-button/internals/IconButton.js

@@ -1,69 +1,39 @@
 import { __esDecorate, __runInitializers } from "tslib";
 /* eslint-disable max-len */
 import { html } from 'lit';
-import { property, queryAsync, state } from 'lit/decorators.js';
+import { property, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { when } from 'lit/directives/when.js';
-import { ripple } from '../../effects/rippleDirective.js';
 import { UiElement } from '../../UiElement.js';
 import { isDisabled, setDisabled } from '../../../lib/disabled.js';
 import '../../ripple/ui-ripple.js';
-/**
- * The type of the icon button rendered.
- */
-export var IconButtonType;
-(function (IconButtonType) {
-    IconButtonType["filled"] = "filled";
-    IconButtonType["tonal"] = "tonal";
-    IconButtonType["outlined"] = "outlined";
-    IconButtonType["standard"] = "standard";
-})(IconButtonType || (IconButtonType = {}));
-let UiIconButton = (() => {
+import '@material/web/focus/md-focus-ring.js';
+let IconButton = (() => {
     let _classSuper = UiElement;
     let _instanceExtraInitializers = [];
-    let _type_decorators;
-    let _type_initializers = [];
-    let _type_extraInitializers = [];
     let _toggle_decorators;
     let _toggle_initializers = [];
     let _toggle_extraInitializers = [];
     let _active_decorators;
     let _active_initializers = [];
     let _active_extraInitializers = [];
+    let _set_disabled_decorators;
     let _ripple_decorators;
     let _ripple_initializers = [];
     let _ripple_extraInitializers = [];
-    let _showRipple_decorators;
-    let _showRipple_initializers = [];
-    let _showRipple_extraInitializers = [];
-    let _set_disabled_decorators;
-    return class UiIconButton extends _classSuper {
+    return class IconButton extends _classSuper {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-            _type_decorators = [property({ type: String, reflect: true })];
             _toggle_decorators = [property({ type: Boolean, reflect: true })];
             _active_decorators = [property({ type: Boolean, reflect: true })];
-            _ripple_decorators = [queryAsync('ui-ripple')];
-            _showRipple_decorators = [state()];
             _set_disabled_decorators = [property({ reflect: true, type: Boolean })];
-            __esDecorate(this, null, _type_decorators, { kind: "accessor", name: "type", static: false, private: false, access: { has: obj => "type" in obj, get: obj => obj.type, set: (obj, value) => { obj.type = value; } }, metadata: _metadata }, _type_initializers, _type_extraInitializers);
+            _ripple_decorators = [query('ui-ripple')];
             __esDecorate(this, null, _toggle_decorators, { kind: "accessor", name: "toggle", static: false, private: false, access: { has: obj => "toggle" in obj, get: obj => obj.toggle, set: (obj, value) => { obj.toggle = value; } }, metadata: _metadata }, _toggle_initializers, _toggle_extraInitializers);
             __esDecorate(this, null, _active_decorators, { kind: "accessor", name: "active", static: false, private: false, access: { has: obj => "active" in obj, get: obj => obj.active, set: (obj, value) => { obj.active = value; } }, metadata: _metadata }, _active_initializers, _active_extraInitializers);
-            __esDecorate(this, null, _ripple_decorators, { kind: "accessor", name: "ripple", static: false, private: false, access: { has: obj => "ripple" in obj, get: obj => obj.ripple, set: (obj, value) => { obj.ripple = value; } }, metadata: _metadata }, _ripple_initializers, _ripple_extraInitializers);
-            __esDecorate(this, null, _showRipple_decorators, { kind: "accessor", name: "showRipple", static: false, private: false, access: { has: obj => "showRipple" in obj, get: obj => obj.showRipple, set: (obj, value) => { obj.showRipple = value; } }, metadata: _metadata }, _showRipple_initializers, _showRipple_extraInitializers);
             __esDecorate(this, null, _set_disabled_decorators, { kind: "setter", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _ripple_decorators, { kind: "accessor", name: "ripple", static: false, private: false, access: { has: obj => "ripple" in obj, get: obj => obj.ripple, set: (obj, value) => { obj.ripple = value; } }, metadata: _metadata }, _ripple_initializers, _ripple_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
-        #type_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _type_initializers, void 0));
-        /**
-         * The type of the rendered button according to Material 3 spec.
-         *
-         * @default {ButtonType.filled}
-         * @attribute
-         */
-        get type() { return this.#type_accessor_storage; }
-        set type(value) { this.#type_accessor_storage = value; }
-        #toggle_accessor_storage = (__runInitializers(this, _type_extraInitializers), __runInitializers(this, _toggle_initializers, void 0));
+        #toggle_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _toggle_initializers, void 0));
         /**
          * Whether the button can be toggled.
          * A toggle button behaves different as it gets the `aria-pressed` attribute
@@ -85,12 +55,6 @@ let UiIconButton = (() => {
          */
         get active() { return this.#active_accessor_storage; }
         set active(value) { this.#active_accessor_storage = value; }
-        #ripple_accessor_storage = (__runInitializers(this, _active_extraInitializers), __runInitializers(this, _ripple_initializers, void 0));
-        get ripple() { return this.#ripple_accessor_storage; }
-        set ripple(value) { this.#ripple_accessor_storage = value; }
-        #showRipple_accessor_storage = (__runInitializers(this, _ripple_extraInitializers), __runInitializers(this, _showRipple_initializers, false));
-        get showRipple() { return this.#showRipple_accessor_storage; }
-        set showRipple(value) { this.#showRipple_accessor_storage = value; }
         get disabled() {
             return isDisabled(this);
         }
@@ -103,13 +67,12 @@ let UiIconButton = (() => {
             setDisabled(this, value);
             this.requestUpdate('disabled', old);
         }
-        getRipple = (__runInitializers(this, _showRipple_extraInitializers), () => {
-            this.showRipple = true;
-            return this.ripple;
-        });
+        #ripple_accessor_storage = (__runInitializers(this, _active_extraInitializers), __runInitializers(this, _ripple_initializers, void 0));
+        get ripple() { return this.#ripple_accessor_storage; }
+        set ripple(value) { this.#ripple_accessor_storage = value; }
         constructor() {
             super();
-            this.type = IconButtonType.standard;
+            __runInitializers(this, _ripple_extraInitializers);
             this.actionController.cancelKeyboardEvents = true;
             this.addEventListener('keydown', this.handleKeyDown.bind(this));
             this.addEventListener('keyup', this.handleKeyUp.bind(this));
@@ -118,6 +81,7 @@ let UiIconButton = (() => {
             this.addEventListener('pointerup', this.handlePointerUp.bind(this));
             this.addEventListener('pointercancel', this.handlePointerCancel.bind(this));
             this.addEventListener('pointerleave', this.handlePointerLeave.bind(this));
+            this.addEventListener('pointerenter', this.handlePointerEnter.bind(this));
             this.addEventListener('contextmenu', this.handleContextMenu.bind(this));
         }
         connectedCallback() {
@@ -135,19 +99,18 @@ let UiIconButton = (() => {
             }
             super.update(changedProperties);
         }
-        async pressRipple() {
-            const element = await this.getRipple();
+        pressRipple(options) {
+            const element = this.ripple;
             if (element && !element.isPressed) {
-                element.beginPress();
+                element.beginPress(options.positionEvent);
             }
         }
-        async endRipple() {
-            const element = await this.getRipple();
-            element?.endPress();
+        endRipple() {
+            this.ripple?.endPress();
         }
         beginPress(options) {
             super.beginPress(options);
-            this.pressRipple();
+            this.pressRipple(options);
         }
         endPress(config) {
             super.endPress(config);
@@ -169,6 +132,18 @@ let UiIconButton = (() => {
                 }
             }
         }
+        handlePointerEnter(e) {
+            super.handlePointerEnter(e);
+            if (this.ripple) {
+                this.ripple.beginHover(e);
+            }
+        }
+        handlePointerLeave(e) {
+            super.handlePointerLeave(e);
+            if (this.ripple) {
+                this.ripple.endHover();
+            }
+        }
         render() {
             const { pressed = false } = this;
             const containerClasses = classMap({
@@ -176,24 +151,21 @@ let UiIconButton = (() => {
                 pressed,
             });
             return html `
-      <div class="${containerClasses}" ${ripple(this.getRipple)}>
+      <md-focus-ring part="focus-ring" .control="${this}"></md-focus-ring>
+      <ui-ripple class="ripple" ?disabled="${this.disabled}"></ui-ripple>
+      <div class="${containerClasses}">
         <div class="container"></div>
         <div class="state"></div>
-        ${when(this.showRipple, this.renderRipple)}
         <div class="content">
           <slot></slot>
         </div>
       </div>
     `;
         }
-        renderRipple = () => {
-            const { disabled } = this;
-            return html `<ui-ripple class="ripple" ?disabled="${disabled}"></ui-ripple>`;
-        };
     };
 })();
 /**
  * @fires active - An event dispatched when the `active` state  has changed. This only happens when the button is `toggle`.
  */
-export default UiIconButton;
+export default IconButton;
 //# sourceMappingURL=IconButton.js.map

package/build/src/md/icon-button/internals/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","sourceRoot":"","sources":["../../../../../src/md/icon-button/internals/IconButton.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable max-len */\nimport { html, PropertyValues, TemplateResult } from 'lit'\nimport { property, queryAsync, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { when } from 'lit/directives/when.js'\nimport { BeginPressConfig, EndPressConfig } from '../../../controllers/ActionController.js'\nimport UiRipple from '../../ripple/internals/ripple.js'\nimport { ripple } from '../../effects/rippleDirective.js'\nimport { UiElement } from '../../UiElement.js'\nimport { isDisabled, setDisabled } from '../../../lib/disabled.js'\n\nimport '../../ripple/ui-ripple.js'\n\n/**\n * The type of the icon button rendered.\n */\nexport enum IconButtonType {\n  'filled' = 'filled',\n  'tonal' = 'tonal',\n  'outlined' = 'outlined',\n  'standard' = 'standard',\n}\n\n/**\n * @fires active - An event dispatched when the `active` state  has changed. This only happens when the button is `toggle`.\n */\nexport default class UiIconButton extends UiElement {\n  /**\n   * The type of the rendered button according to Material 3 spec.\n   *\n   * @default {ButtonType.filled}\n   * @attribute\n   */\n  @property({ type: String, reflect: true }) accessor type: IconButtonType\n\n  /**\n   * Whether the button can be toggled.\n   * A toggle button behaves different as it gets the `aria-pressed` attribute\n   * which changes depending on the pressed state.\n   * A toggle button is activated until it is clicked/pressed again.\n   * A toggle button dispatched `active` event when the press state change.\n   * The host can check the `active` property to know the state.\n   *\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) accessor toggle: boolean | undefined\n\n  /**\n   * A flag that determines whether the button is activated (pressed when `toggle` is set).\n   * It is `undefined` and makes no effect when `toggle` is not set.\n   *\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) accessor active: boolean | undefined\n\n  @queryAsync('ui-ripple') protected accessor ripple!: Promise<UiRipple | null>\n\n  @state() protected accessor showRipple = false\n\n  get disabled(): boolean {\n    return isDisabled(this)\n  }\n\n  /**\n   * When set, the button is a disabled state.\n   * @attribute\n   */\n  @property({ reflect: true, type: Boolean })\n  set disabled(value: boolean) {\n    const old = isDisabled(this)\n    setDisabled(this, value)\n    this.requestUpdate('disabled', old)\n  }\n\n  protected readonly getRipple = (): Promise<UiRipple | null> => {\n    this.showRipple = true\n    return this.ripple\n  }\n\n  constructor() {\n    super()\n\n    this.type = IconButtonType.standard\n    this.actionController.cancelKeyboardEvents = true\n    this.addEventListener('keydown', this.handleKeyDown.bind(this))\n    this.addEventListener('keyup', this.handleKeyUp.bind(this))\n    this.addEventListener('click', this.handleClick.bind(this))\n    this.addEventListener('pointerdown', this.handlePointerDown.bind(this))\n    this.addEventListener('pointerup', this.handlePointerUp.bind(this))\n    this.addEventListener('pointercancel', this.handlePointerCancel.bind(this))\n    this.addEventListener('pointerleave', this.handlePointerLeave.bind(this))\n    this.addEventListener('contextmenu', this.handleContextMenu.bind(this))\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'button')\n    }\n    if (!this.hasAttribute('tabindex') && !this.disabled) {\n      this.setAttribute('tabindex', '0')\n    }\n  }\n\n  protected override update(changedProperties: PropertyValues<this>): void {\n    if (changedProperties.has('active')) {\n      this.setAttribute('aria-pressed', String(this.active))\n    }\n    super.update(changedProperties)\n  }\n\n  protected async pressRipple(): Promise<void> {\n    const element = await this.getRipple()\n    if (element && !element.isPressed) {\n      element.beginPress()\n    }\n  }\n\n  protected async endRipple(): Promise<void> {\n    const element = await this.getRipple()\n    element?.endPress()\n  }\n\n  override beginPress(options: BeginPressConfig): void {\n    super.beginPress(options)\n    this.pressRipple()\n  }\n\n  override endPress(config: EndPressConfig): void {\n    super.endPress(config)\n    this.endRipple()\n    const { cancelled, reason } = config\n    if (cancelled) {\n      return\n    }\n    if (!reason || reason === 'enter' || reason === 'space') {\n      if (this.toggle) {\n        this.active = !this.active\n        // note, only dispatch events when user interacting with the UI.\n        this.dispatchEvent(new Event('active'))\n      }\n    }\n    if (reason === 'enter' || reason === 'space') {\n      if (!this.toggle) {\n        this.click()\n      }\n    }\n  }\n\n  protected override render(): TemplateResult {\n    const { pressed = false } = this\n    const containerClasses = classMap({\n      surface: true,\n      pressed,\n    })\n    return html`\n      <div class=\"${containerClasses}\" ${ripple(this.getRipple)}>\n        <div class=\"container\"></div>\n        <div class=\"state\"></div>\n        ${when(this.showRipple, this.renderRipple)}\n        <div class=\"content\">\n          <slot></slot>\n        </div>\n      </div>\n    `\n  }\n\n  protected renderRipple = (): TemplateResult => {\n    const { disabled } = this\n    return html`<ui-ripple class=\"ripple\" ?disabled=\"${disabled}\"></ui-ripple>`\n  }\n}\n"]}
+{"version":3,"file":"IconButton.js","sourceRoot":"","sources":["../../../../../src/md/icon-button/internals/IconButton.ts"],"names":[],"mappings":";AAAA,4BAA4B;AAC5B,OAAO,EAAE,IAAI,EAAkC,MAAM,KAAK,CAAA;AAC1D,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AAEtD,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAC9C,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAGlE,OAAO,2BAA2B,CAAA;AAClC,OAAO,sCAAsC,CAAA;;sBAKL,SAAS;;;;;;;;;;;;iBAA5B,UAAW,SAAQ,WAAS;;;kCAW9C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kCAQ1C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAU1C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kCAO1C,KAAK,CAAC,WAAW,CAAC;YAzByB,uKAAS,MAAM,6BAAN,MAAM,uFAAqB;YAQpC,uKAAS,MAAM,6BAAN,MAAM,uFAAqB;YAWhF,0LAAI,QAAQ,wEAIX;YAEmB,uKAAmB,MAAM,6BAAN,MAAM,uFAAkB;;;QAzBnB,4BAXzB,mDAAU,yDAWmD;QAVhF;;;;;;;;;WASG;QACyC,IAAS,MAAM,4CAAqB;QAApC,IAAS,MAAM,kDAAqB;QAQpC,uIAAoC;QANhF;;;;;WAKG;QACyC,IAAS,MAAM,4CAAqB;QAApC,IAAS,MAAM,kDAAqB;QAEhF,IAAI,QAAQ;YACV,OAAO,UAAU,CAAC,IAAI,CAAC,CAAA;QACzB,CAAC;QAED;;;WAGG;QAEH,IAAI,QAAQ,CAAC,KAAc;YACzB,MAAM,GAAG,GAAG,UAAU,CAAC,IAAI,CAAC,CAAA;YAC5B,WAAW,CAAC,IAAI,EAAE,KAAK,CAAC,CAAA;YACxB,IAAI,CAAC,aAAa,CAAC,UAAU,EAAE,GAAG,CAAC,CAAA;QACrC,CAAC;QAEmB,uIAA2C;QAA3C,IAAmB,MAAM,4CAAkB;QAA3C,IAAmB,MAAM,kDAAkB;QAE/D;YACE,KAAK,EAAE,CAAA;;YAEP,IAAI,CAAC,gBAAgB,CAAC,oBAAoB,GAAG,IAAI,CAAA;YACjD,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;YAC/D,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;YAC3D,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;YAC3D,IAAI,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;YACvE,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;YACnE,IAAI,CAAC,gBAAgB,CAAC,eAAe,EAAE,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;YAC3E,IAAI,CAAC,gBAAgB,CAAC,cAAc,EAAE,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;YACzE,IAAI,CAAC,gBAAgB,CAAC,cAAc,EAAE,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;YACzE,IAAI,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;SACxE;QAEQ,iBAAiB;YACxB,KAAK,CAAC,iBAAiB,EAAE,CAAA;YACzB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC;gBAC/B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;YACrC,CAAC;YACD,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACrD,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAA;YACpC,CAAC;QACH,CAAC;QAEkB,MAAM,CAAC,iBAAuC;YAC/D,IAAI,iBAAiB,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;gBACpC,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAA;YACxD,CAAC;YACD,KAAK,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAA;QACjC,CAAC;QAES,WAAW,CAAC,OAAyB;YAC7C,MAAM,OAAO,GAAG,IAAI,CAAC,MAAM,CAAA;YAC3B,IAAI,OAAO,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,CAAC;gBAClC,OAAO,CAAC,UAAU,CAAC,OAAO,CAAC,aAA6B,CAAC,CAAA;YAC3D,CAAC;QACH,CAAC;QAES,SAAS;YACjB,IAAI,CAAC,MAAM,EAAE,QAAQ,EAAE,CAAA;QACzB,CAAC;QAEQ,UAAU,CAAC,OAAyB;YAC3C,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,CAAA;YACzB,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAA;QAC3B,CAAC;QAEQ,QAAQ,CAAC,MAAsB;YACtC,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAA;YACtB,IAAI,CAAC,SAAS,EAAE,CAAA;YAChB,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,MAAM,CAAA;YACpC,IAAI,SAAS,EAAE,CAAC;gBACd,OAAM;YACR,CAAC;YACD,IAAI,CAAC,MAAM,IAAI,MAAM,KAAK,OAAO,IAAI,MAAM,KAAK,OAAO,EAAE,CAAC;gBACxD,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;oBAChB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAA;oBAC1B,gEAAgE;oBAChE,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;gBACzC,CAAC;YACH,CAAC;YACD,IAAI,MAAM,KAAK,OAAO,IAAI,MAAM,KAAK,OAAO,EAAE,CAAC;gBAC7C,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;oBACjB,IAAI,CAAC,KAAK,EAAE,CAAA;gBACd,CAAC;YACH,CAAC;QACH,CAAC;QAEQ,kBAAkB,CAAC,CAAe;YACzC,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAA;YAC3B,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;gBAChB,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAA;YAC3B,CAAC;QACH,CAAC;QAEQ,kBAAkB,CAAC,CAAe;YACzC,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAA;YAC3B,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;gBAChB,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAA;YACxB,CAAC;QACH,CAAC;QAEkB,MAAM;YACvB,MAAM,EAAE,OAAO,GAAG,KAAK,EAAE,GAAG,IAAI,CAAA;YAChC,MAAM,gBAAgB,GAAG,QAAQ,CAAC;gBAChC,OAAO,EAAE,IAAI;gBACb,OAAO;aACR,CAAC,CAAA;YACF,OAAO,IAAI,CAAA;mDACoC,IAAmB;6CACzB,IAAI,CAAC,QAAQ;oBACtC,gBAAgB;;;;;;;KAO/B,CAAA;QACH,CAAC;;;AA7IH;;GAEG;AACH,0BA2IC","sourcesContent":["/* eslint-disable max-len */\nimport { html, PropertyValues, TemplateResult } from 'lit'\nimport { property, query } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { BeginPressConfig, EndPressConfig } from '../../../controllers/ActionController.js'\nimport { UiElement } from '../../UiElement.js'\nimport { isDisabled, setDisabled } from '../../../lib/disabled.js'\nimport UiRipple from '../../ripple/internals/ripple.js'\n\nimport '../../ripple/ui-ripple.js'\nimport '@material/web/focus/md-focus-ring.js'\n\n/**\n * @fires active - An event dispatched when the `active` state  has changed. This only happens when the button is `toggle`.\n */\nexport default class IconButton extends UiElement {\n  /**\n   * Whether the button can be toggled.\n   * A toggle button behaves different as it gets the `aria-pressed` attribute\n   * which changes depending on the pressed state.\n   * A toggle button is activated until it is clicked/pressed again.\n   * A toggle button dispatched `active` event when the press state change.\n   * The host can check the `active` property to know the state.\n   *\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) accessor toggle: boolean | undefined\n\n  /**\n   * A flag that determines whether the button is activated (pressed when `toggle` is set).\n   * It is `undefined` and makes no effect when `toggle` is not set.\n   *\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) accessor active: boolean | undefined\n\n  get disabled(): boolean {\n    return isDisabled(this)\n  }\n\n  /**\n   * When set, the button is a disabled state.\n   * @attribute\n   */\n  @property({ reflect: true, type: Boolean })\n  set disabled(value: boolean) {\n    const old = isDisabled(this)\n    setDisabled(this, value)\n    this.requestUpdate('disabled', old)\n  }\n\n  @query('ui-ripple') protected accessor ripple!: UiRipple | null\n\n  constructor() {\n    super()\n\n    this.actionController.cancelKeyboardEvents = true\n    this.addEventListener('keydown', this.handleKeyDown.bind(this))\n    this.addEventListener('keyup', this.handleKeyUp.bind(this))\n    this.addEventListener('click', this.handleClick.bind(this))\n    this.addEventListener('pointerdown', this.handlePointerDown.bind(this))\n    this.addEventListener('pointerup', this.handlePointerUp.bind(this))\n    this.addEventListener('pointercancel', this.handlePointerCancel.bind(this))\n    this.addEventListener('pointerleave', this.handlePointerLeave.bind(this))\n    this.addEventListener('pointerenter', this.handlePointerEnter.bind(this))\n    this.addEventListener('contextmenu', this.handleContextMenu.bind(this))\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'button')\n    }\n    if (!this.hasAttribute('tabindex') && !this.disabled) {\n      this.setAttribute('tabindex', '0')\n    }\n  }\n\n  protected override update(changedProperties: PropertyValues<this>): void {\n    if (changedProperties.has('active')) {\n      this.setAttribute('aria-pressed', String(this.active))\n    }\n    super.update(changedProperties)\n  }\n\n  protected pressRipple(options: BeginPressConfig): void {\n    const element = this.ripple\n    if (element && !element.isPressed) {\n      element.beginPress(options.positionEvent as PointerEvent)\n    }\n  }\n\n  protected endRipple(): void {\n    this.ripple?.endPress()\n  }\n\n  override beginPress(options: BeginPressConfig): void {\n    super.beginPress(options)\n    this.pressRipple(options)\n  }\n\n  override endPress(config: EndPressConfig): void {\n    super.endPress(config)\n    this.endRipple()\n    const { cancelled, reason } = config\n    if (cancelled) {\n      return\n    }\n    if (!reason || reason === 'enter' || reason === 'space') {\n      if (this.toggle) {\n        this.active = !this.active\n        // note, only dispatch events when user interacting with the UI.\n        this.dispatchEvent(new Event('active'))\n      }\n    }\n    if (reason === 'enter' || reason === 'space') {\n      if (!this.toggle) {\n        this.click()\n      }\n    }\n  }\n\n  override handlePointerEnter(e: PointerEvent): void {\n    super.handlePointerEnter(e)\n    if (this.ripple) {\n      this.ripple.beginHover(e)\n    }\n  }\n\n  override handlePointerLeave(e: PointerEvent): void {\n    super.handlePointerLeave(e)\n    if (this.ripple) {\n      this.ripple.endHover()\n    }\n  }\n\n  protected override render(): TemplateResult {\n    const { pressed = false } = this\n    const containerClasses = classMap({\n      surface: true,\n      pressed,\n    })\n    return html`\n      <md-focus-ring part=\"focus-ring\" .control=\"${this as HTMLElement}\"></md-focus-ring>\n      <ui-ripple class=\"ripple\" ?disabled=\"${this.disabled}\"></ui-ripple>\n      <div class=\"${containerClasses}\">\n        <div class=\"container\"></div>\n        <div class=\"state\"></div>\n        <div class=\"content\">\n          <slot></slot>\n        </div>\n      </div>\n    `\n  }\n}\n"]}

package/build/src/md/icon-button/internals/{IconButton.styles.d.ts → base.styles.d.ts}

@@ -1,3 +1,3 @@
 declare const _default: import("lit").CSSResult;
 export default _default;
-//# sourceMappingURL=IconButton.styles.d.ts.map
+//# sourceMappingURL=base.styles.d.ts.map

package/build/src/md/icon-button/internals/base.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"base.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/icon-button/internals/base.styles.ts"],"names":[],"mappings":";AAEA,wBA0FC"}

package/build/src/md/icon-button/internals/base.styles.js

@@ -0,0 +1,93 @@
+import { css } from 'lit';
+export default css `
+  :host {
+    display: inline-flex;
+    vertical-align: middle;
+    box-sizing: content-box;
+    writing-mode: horizontal-tb !important;
+    text-rendering: auto;
+    cursor: default;
+    user-select: none;
+    height: 40px;
+    width: 40px;
+    border-radius: var(--md-sys-shape-corner-full);
+    --md-ripple-state-layer-shape: var(--md-sys-shape-corner-full);
+    align-items: center;
+    justify-content: center;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
+    position: relative;
+    outline: none;
+
+    --_content-color: inherit;
+    --_content-opacity: 1;
+    --_container-background-color: initial;
+    --_container-opacity: 1;
+    --_container-border: none;
+    --_state-opacity: 0;
+    --_state-background-color: initial;
+  }
+
+  .content ::slotted(*) {
+    width: 24px !important;
+    height: 24px !important;
+
+    color: var(--_content-color);
+    fill: var(--_content-color);
+    opacity: var(--_content-opacity);
+  }
+
+  .surface {
+    height: inherit;
+    width: inherit;
+    position: relative;
+    border-radius: var(--md-sys-shape-corner-full);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+  }
+
+  .container,
+  .state {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-radius: var(--md-sys-shape-corner-full);
+  }
+
+  .container {
+    z-index: 1;
+    pointer-events: none;
+    background-color: var(--_container-background-color);
+    opacity: var(--_container-opacity);
+    border: var(--_container-border);
+  }
+
+  .state {
+    z-index: 2;
+    pointer-events: none;
+    opacity: var(--_state-opacity);
+    background-color: var(--_state-background-color);
+  }
+
+  .content {
+    z-index: 3;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--_content-color);
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+  }
+
+  .ripple {
+    border-radius: inherit;
+    z-index: 3;
+  }
+`;
+//# sourceMappingURL=base.styles.js.map

package/build/src/md/icon-button/internals/base.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base.styles.js","sourceRoot":"","sources":["../../../../../src/md/icon-button/internals/base.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0FjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  :host {\n    display: inline-flex;\n    vertical-align: middle;\n    box-sizing: content-box;\n    writing-mode: horizontal-tb !important;\n    text-rendering: auto;\n    cursor: default;\n    user-select: none;\n    height: 40px;\n    width: 40px;\n    border-radius: var(--md-sys-shape-corner-full);\n    --md-ripple-state-layer-shape: var(--md-sys-shape-corner-full);\n    align-items: center;\n    justify-content: center;\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n    position: relative;\n    outline: none;\n\n    --_content-color: inherit;\n    --_content-opacity: 1;\n    --_container-background-color: initial;\n    --_container-opacity: 1;\n    --_container-border: none;\n    --_state-opacity: 0;\n    --_state-background-color: initial;\n  }\n\n  .content ::slotted(*) {\n    width: 24px !important;\n    height: 24px !important;\n\n    color: var(--_content-color);\n    fill: var(--_content-color);\n    opacity: var(--_content-opacity);\n  }\n\n  .surface {\n    height: inherit;\n    width: inherit;\n    position: relative;\n    border-radius: var(--md-sys-shape-corner-full);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n  }\n\n  .container,\n  .state {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    border-radius: var(--md-sys-shape-corner-full);\n  }\n\n  .container {\n    z-index: 1;\n    pointer-events: none;\n    background-color: var(--_container-background-color);\n    opacity: var(--_container-opacity);\n    border: var(--_container-border);\n  }\n\n  .state {\n    z-index: 2;\n    pointer-events: none;\n    opacity: var(--_state-opacity);\n    background-color: var(--_state-background-color);\n  }\n\n  .content {\n    z-index: 3;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--_content-color);\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n  }\n\n  .ripple {\n    border-radius: inherit;\n    z-index: 3;\n  }\n`\n"]}

package/build/src/md/icon-button/internals/filled-tonal.styles.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("lit").CSSResult;
+export default _default;
+//# sourceMappingURL=filled-tonal.styles.d.ts.map

package/build/src/md/icon-button/internals/filled-tonal.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filled-tonal.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/icon-button/internals/filled-tonal.styles.ts"],"names":[],"mappings":";AAEA,wBA2BC"}

package/build/src/md/icon-button/internals/filled-tonal.styles.js

@@ -0,0 +1,30 @@
+import { css } from 'lit';
+export default css `
+  :host {
+    --md-ripple-hover-state-layer-color: var(--md-sys-color-on-secondary-container);
+    --md-ripple-focus-state-layer-color: var(--md-sys-color-on-secondary-container);
+    --md-ripple-pressed-state-layer-color: var(--md-sys-color-on-secondary-container);
+
+    --_container-background-color: var(--md-sys-color-secondary-container);
+    --_surface-color: var(--md-sys-color-on-secondary-container);
+    --_content-color: var(--md-sys-color-on-secondary-container);
+  }
+
+  :host([disabled]) {
+    --_container-background-color: var(--md-sys-color-on-surface);
+    --_container-opacity: 0.12;
+    --_content-color: var(--md-sys-color-on-surface);
+    --_content-opacity: 0.38;
+  }
+
+  :host([toggle]) {
+    --_container-background-color: var(--md-sys-color-surface-variant);
+    --_content-color: var(--md-sys-color-on-surface-variant);
+  }
+
+  :host([toggle][active]) {
+    --_container-background-color: var(--md-sys-color-secondary-container);
+    --_content-color: var(--md-sys-color-on-secondary-container);
+  }
+`;
+//# sourceMappingURL=filled-tonal.styles.js.map

package/build/src/md/icon-button/internals/filled-tonal.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filled-tonal.styles.js","sourceRoot":"","sources":["../../../../../src/md/icon-button/internals/filled-tonal.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  :host {\n    --md-ripple-hover-state-layer-color: var(--md-sys-color-on-secondary-container);\n    --md-ripple-focus-state-layer-color: var(--md-sys-color-on-secondary-container);\n    --md-ripple-pressed-state-layer-color: var(--md-sys-color-on-secondary-container);\n\n    --_container-background-color: var(--md-sys-color-secondary-container);\n    --_surface-color: var(--md-sys-color-on-secondary-container);\n    --_content-color: var(--md-sys-color-on-secondary-container);\n  }\n\n  :host([disabled]) {\n    --_container-background-color: var(--md-sys-color-on-surface);\n    --_container-opacity: 0.12;\n    --_content-color: var(--md-sys-color-on-surface);\n    --_content-opacity: 0.38;\n  }\n\n  :host([toggle]) {\n    --_container-background-color: var(--md-sys-color-surface-variant);\n    --_content-color: var(--md-sys-color-on-surface-variant);\n  }\n\n  :host([toggle][active]) {\n    --_container-background-color: var(--md-sys-color-secondary-container);\n    --_content-color: var(--md-sys-color-on-secondary-container);\n  }\n`\n"]}

package/build/src/md/icon-button/internals/filled.styles.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("lit").CSSResult;
+export default _default;
+//# sourceMappingURL=filled.styles.d.ts.map

package/build/src/md/icon-button/internals/filled.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filled.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/icon-button/internals/filled.styles.ts"],"names":[],"mappings":";AAEA,wBAiCC"}

package/build/src/md/icon-button/internals/filled.styles.js

@@ -0,0 +1,36 @@
+import { css } from 'lit';
+export default css `
+  :host {
+    --md-ripple-hover-state-layer-color: var(--md-sys-color-on-primary);
+    --md-ripple-focus-state-layer-color: var(--md-sys-color-on-primary);
+    --md-ripple-pressed-state-layer-color: var(--md-sys-color-on-primary);
+
+    --_container-background-color: var(--md-sys-color-primary);
+    --_surface-color: var(--md-sys-color-on-primary);
+    --_content-color: var(--md-sys-color-on-primary);
+  }
+
+  :host([disabled]) {
+    --_container-background-color: var(--md-sys-color-on-surface);
+    --_container-opacity: 0.12;
+    --_content-color: var(--md-sys-color-on-surface);
+    --_content-opacity: 0.38;
+  }
+
+  :host([toggle]) {
+    --_content-color: var(--md-sys-color-primary);
+    --_container-background-color: var(--md-sys-color-surface-variant);
+  }
+
+  :host([toggle][active]) {
+    --_container-background-color: var(--md-sys-color-primary);
+    --_content-color: var(--md-sys-color-on-primary);
+  }
+
+  :host([toggle]:not([active])) {
+    --_state-background-color: var(--md-sys-color-primary);
+    --_state-opacity: var(--md-sys-state-hover-state-layer-opacity);
+    --_content-color: var(--md-sys-color-primary);
+  }
+`;
+//# sourceMappingURL=filled.styles.js.map

package/build/src/md/icon-button/internals/filled.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filled.styles.js","sourceRoot":"","sources":["../../../../../src/md/icon-button/internals/filled.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  :host {\n    --md-ripple-hover-state-layer-color: var(--md-sys-color-on-primary);\n    --md-ripple-focus-state-layer-color: var(--md-sys-color-on-primary);\n    --md-ripple-pressed-state-layer-color: var(--md-sys-color-on-primary);\n\n    --_container-background-color: var(--md-sys-color-primary);\n    --_surface-color: var(--md-sys-color-on-primary);\n    --_content-color: var(--md-sys-color-on-primary);\n  }\n\n  :host([disabled]) {\n    --_container-background-color: var(--md-sys-color-on-surface);\n    --_container-opacity: 0.12;\n    --_content-color: var(--md-sys-color-on-surface);\n    --_content-opacity: 0.38;\n  }\n\n  :host([toggle]) {\n    --_content-color: var(--md-sys-color-primary);\n    --_container-background-color: var(--md-sys-color-surface-variant);\n  }\n\n  :host([toggle][active]) {\n    --_container-background-color: var(--md-sys-color-primary);\n    --_content-color: var(--md-sys-color-on-primary);\n  }\n\n  :host([toggle]:not([active])) {\n    --_state-background-color: var(--md-sys-color-primary);\n    --_state-opacity: var(--md-sys-state-hover-state-layer-opacity);\n    --_content-color: var(--md-sys-color-primary);\n  }\n`\n"]}

package/build/src/md/icon-button/internals/outlined.styles.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("lit").CSSResult;
+export default _default;
+//# sourceMappingURL=outlined.styles.d.ts.map

package/build/src/md/icon-button/internals/outlined.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"outlined.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/icon-button/internals/outlined.styles.ts"],"names":[],"mappings":";AAEA,wBA4BC"}

package/build/src/md/icon-button/internals/outlined.styles.js

@@ -0,0 +1,31 @@
+import { css } from 'lit';
+export default css `
+  :host {
+    --_container-border: 1px var(--md-sys-color-outline) solid;
+
+    --md-ripple-hover-state-layer-color: var(--md-sys-color-on-surface-variant);
+    --md-ripple-focus-state-layer-color: var(--md-sys-color-on-surface-variant);
+    --md-ripple-pressed-state-layer-color: var(--md-sys-color-on-surface-variant);
+
+    --_container-background-color: transparent;
+    --_surface-color: var(--md-sys-color-on-surface-variant);
+    --_content-color: var(--md-sys-color-on-surface-variant);
+  }
+
+  :host([disabled]) {
+    --_container-background-color: var(--md-sys-color-on-surface);
+    --_container-opacity: 0.12;
+    --_content-color: var(--md-sys-color-on-surface);
+    --_content-opacity: 0.38;
+  }
+
+  :host([toggle][active]) {
+    --_container-background-color: var(--md-sys-color-inverse-surface);
+    --_content-color: var(--md-sys-color-inverse-on-surface);
+
+    --md-ripple-hover-state-layer-color: var(--md-sys-color-inverse-on-surface);
+    --md-ripple-focus-state-layer-color: var(--md-sys-color-inverse-on-surface);
+    --md-ripple-pressed-state-layer-color: var(--md-sys-color-inverse-on-surface);
+  }
+`;
+//# sourceMappingURL=outlined.styles.js.map

package/build/src/md/icon-button/internals/outlined.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"outlined.styles.js","sourceRoot":"","sources":["../../../../../src/md/icon-button/internals/outlined.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  :host {\n    --_container-border: 1px var(--md-sys-color-outline) solid;\n\n    --md-ripple-hover-state-layer-color: var(--md-sys-color-on-surface-variant);\n    --md-ripple-focus-state-layer-color: var(--md-sys-color-on-surface-variant);\n    --md-ripple-pressed-state-layer-color: var(--md-sys-color-on-surface-variant);\n\n    --_container-background-color: transparent;\n    --_surface-color: var(--md-sys-color-on-surface-variant);\n    --_content-color: var(--md-sys-color-on-surface-variant);\n  }\n\n  :host([disabled]) {\n    --_container-background-color: var(--md-sys-color-on-surface);\n    --_container-opacity: 0.12;\n    --_content-color: var(--md-sys-color-on-surface);\n    --_content-opacity: 0.38;\n  }\n\n  :host([toggle][active]) {\n    --_container-background-color: var(--md-sys-color-inverse-surface);\n    --_content-color: var(--md-sys-color-inverse-on-surface);\n\n    --md-ripple-hover-state-layer-color: var(--md-sys-color-inverse-on-surface);\n    --md-ripple-focus-state-layer-color: var(--md-sys-color-inverse-on-surface);\n    --md-ripple-pressed-state-layer-color: var(--md-sys-color-inverse-on-surface);\n  }\n`\n"]}

package/build/src/md/icon-button/internals/standard.styles.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("lit").CSSResult;
+export default _default;
+//# sourceMappingURL=standard.styles.d.ts.map

package/build/src/md/icon-button/internals/standard.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"standard.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/icon-button/internals/standard.styles.ts"],"names":[],"mappings":";AAEA,wBAeC"}

package/build/src/md/icon-button/internals/standard.styles.js

@@ -0,0 +1,18 @@
+import { css } from 'lit';
+export default css `
+  :host {
+    --md-ripple-hover-state-layer-color: var(--md-sys-color-on-surface-variant);
+    --md-ripple-focus-state-layer-color: var(--md-sys-color-on-surface-variant);
+    --md-ripple-pressed-state-layer-color: var(--md-sys-color-on-surface-variant);
+    --_container-background-color: transparent;
+    --_content-color: var(--md-sys-color-on-surface-variant);
+  }
+
+  :host([toggle][active]) {
+    --md-ripple-hover-state-layer-color: var(--md-sys-color-primary);
+    --md-ripple-focus-state-layer-color: var(--md-sys-color-primary);
+    --md-ripple-pressed-state-layer-color: var(--md-sys-color-primary);
+    --_content-color: var(--md-sys-color-primary);
+  }
+`;
+//# sourceMappingURL=standard.styles.js.map

package/build/src/md/icon-button/internals/standard.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"standard.styles.js","sourceRoot":"","sources":["../../../../../src/md/icon-button/internals/standard.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;CAejB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  :host {\n    --md-ripple-hover-state-layer-color: var(--md-sys-color-on-surface-variant);\n    --md-ripple-focus-state-layer-color: var(--md-sys-color-on-surface-variant);\n    --md-ripple-pressed-state-layer-color: var(--md-sys-color-on-surface-variant);\n    --_container-background-color: transparent;\n    --_content-color: var(--md-sys-color-on-surface-variant);\n  }\n\n  :host([toggle][active]) {\n    --md-ripple-hover-state-layer-color: var(--md-sys-color-primary);\n    --md-ripple-focus-state-layer-color: var(--md-sys-color-primary);\n    --md-ripple-pressed-state-layer-color: var(--md-sys-color-primary);\n    --_content-color: var(--md-sys-color-primary);\n  }\n`\n"]}

package/build/src/md/icon-button/ui-filled-icon-button.d.ts

@@ -0,0 +1,11 @@
+import type { CSSResultOrNative } from 'lit';
+import Element from './internals/IconButton.js';
+export declare class UiFilledIconButtonElement extends Element {
+    static styles: CSSResultOrNative[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ui-filled-icon-button': UiFilledIconButtonElement;
+    }
+}
+//# sourceMappingURL=ui-filled-icon-button.d.ts.map

package/build/src/md/icon-button/ui-filled-icon-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-filled-icon-button.d.ts","sourceRoot":"","sources":["../../../../src/md/icon-button/ui-filled-icon-button.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,KAAK,CAAA;AAE5C,OAAO,OAAO,MAAM,2BAA2B,CAAA;AAI/C,qBACa,yBAA0B,SAAQ,OAAO;IACpD,OAAgB,MAAM,EAAE,iBAAiB,EAAE,CAAiB;CAC7D;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,uBAAuB,EAAE,yBAAyB,CAAA;KACnD;CACF"}