@api-client/ui 0.2.13 → 0.3.0

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

@@ -1,47 +1,23 @@
-import { PropertyValues, TemplateResult } from 'lit';
-import { BeginPressConfig, EndPressConfig } from '../../../controllers/ActionController.js';
-import { UiElement } from '../../UiElement.js';
-import UiRipple from '../../ripple/internals/ripple.js';
-import '../../ripple/ui-ripple.js';
-import '@material/web/focus/md-focus-ring.js';
+import { type TemplateResult } from 'lit';
+import BaseButton from '../../button/internals/base.js';
+export type MdIconButtonColor = 'filled' | 'outlined' | 'standard' | 'tonal';
+export type MdIconButtonWidth = 'default' | 'narrow' | 'wide';
 /**
- * @fires active - An event dispatched when the `active` state  has changed. This only happens when the button is `toggle`.
+ * An icon button component that extends the functionality of a standard button,
+ * but is specifically designed to hold an icon.
+ * @slot - The default slot for the icon.
  */
-export default class IconButton extends UiElement {
+export default class IconButton extends BaseButton {
     /**
-     * Whether the button can be toggled.
-     * A toggle button behaves different as it gets the `aria-pressed` attribute
-     * which changes depending on the pressed state.
-     * A toggle button is activated until it is clicked/pressed again.
-     * A toggle button dispatched `active` event when the press state change.
-     * The host can check the `active` property to know the state.
-     *
+     * The color of the button.
      * @attribute
      */
-    accessor toggle: boolean | undefined;
+    accessor color: MdIconButtonColor;
     /**
-     * A flag that determines whether the button is activated (pressed when `toggle` is set).
-     * It is `undefined` and makes no effect when `toggle` is not set.
-     *
+     * The width of the button.
      * @attribute
      */
-    accessor active: boolean | undefined;
-    get disabled(): boolean;
-    /**
-     * When set, the button is a disabled state.
-     * @attribute
-     */
-    set disabled(value: boolean);
-    protected accessor ripple: UiRipple | null;
-    constructor();
-    connectedCallback(): void;
-    protected update(changedProperties: PropertyValues<this>): 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;
+    accessor width: MdIconButtonWidth;
     protected render(): 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;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"}
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../../../src/md/icon-button/internals/IconButton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAC/C,OAAO,UAAU,MAAM,gCAAgC,CAAA;AAGvD,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,CAAA;AAC5E,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAA;AAE7D;;;;GAIG;AACH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,UAAU;IAChD;;;OAGG;IACwC,QAAQ,CAAC,KAAK,EAAE,iBAAiB,CAAa;IACzF;;;OAGG;IACwC,QAAQ,CAAC,KAAK,EAAE,iBAAiB,CAAY;cAErE,MAAM,IAAI,cAAc;CAM5C"}

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

@@ -1,171 +1,59 @@
 import { __esDecorate, __runInitializers } from "tslib";
-/* eslint-disable max-len */
 import { html } from 'lit';
-import { property, query } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { UiElement } from '../../UiElement.js';
-import { isDisabled, setDisabled } from '../../../lib/disabled.js';
-import '../../ripple/ui-ripple.js';
-import '@material/web/focus/md-focus-ring.js';
+import BaseButton from '../../button/internals/base.js';
+import { property } from 'lit/decorators.js';
 let IconButton = (() => {
-    let _classSuper = UiElement;
-    let _instanceExtraInitializers = [];
-    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 _classSuper = BaseButton;
+    let _color_decorators;
+    let _color_initializers = [];
+    let _color_extraInitializers = [];
+    let _width_decorators;
+    let _width_initializers = [];
+    let _width_extraInitializers = [];
     return class IconButton extends _classSuper {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-            _toggle_decorators = [property({ type: Boolean, reflect: true })];
-            _active_decorators = [property({ type: Boolean, reflect: true })];
-            _set_disabled_decorators = [property({ reflect: true, type: Boolean })];
-            _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, _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);
+            _color_decorators = [property({ type: String, reflect: true })];
+            _width_decorators = [property({ type: String, reflect: true })];
+            __esDecorate(this, null, _color_decorators, { kind: "accessor", name: "color", static: false, private: false, access: { has: obj => "color" in obj, get: obj => obj.color, set: (obj, value) => { obj.color = value; } }, metadata: _metadata }, _color_initializers, _color_extraInitializers);
+            __esDecorate(this, null, _width_decorators, { kind: "accessor", name: "width", static: false, private: false, access: { has: obj => "width" in obj, get: obj => obj.width, set: (obj, value) => { obj.width = value; } }, metadata: _metadata }, _width_initializers, _width_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
-        #toggle_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _toggle_initializers, void 0));
+        #color_accessor_storage = __runInitializers(this, _color_initializers, 'standard'
         /**
-         * Whether the button can be toggled.
-         * A toggle button behaves different as it gets the `aria-pressed` attribute
-         * which changes depending on the pressed state.
-         * A toggle button is activated until it is clicked/pressed again.
-         * A toggle button dispatched `active` event when the press state change.
-         * The host can check the `active` property to know the state.
-         *
+         * The width of the button.
          * @attribute
          */
-        get toggle() { return this.#toggle_accessor_storage; }
-        set toggle(value) { this.#toggle_accessor_storage = value; }
-        #active_accessor_storage = (__runInitializers(this, _toggle_extraInitializers), __runInitializers(this, _active_initializers, void 0));
+        );
         /**
-         * A flag that determines whether the button is activated (pressed when `toggle` is set).
-         * It is `undefined` and makes no effect when `toggle` is not set.
-         *
+         * The color of the button.
          * @attribute
          */
-        get active() { return this.#active_accessor_storage; }
-        set active(value) { this.#active_accessor_storage = value; }
-        get disabled() {
-            return isDisabled(this);
-        }
+        get color() { return this.#color_accessor_storage; }
+        set color(value) { this.#color_accessor_storage = value; }
+        #width_accessor_storage = (__runInitializers(this, _color_extraInitializers), __runInitializers(this, _width_initializers, 'default'));
         /**
-         * When set, the button is a disabled state.
+         * The width of the button.
          * @attribute
          */
-        set disabled(value) {
-            const old = isDisabled(this);
-            setDisabled(this, value);
-            this.requestUpdate('disabled', old);
-        }
-        #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();
-            __runInitializers(this, _ripple_extraInitializers);
-            this.actionController.cancelKeyboardEvents = true;
-            this.addEventListener('keydown', this.handleKeyDown.bind(this));
-            this.addEventListener('keyup', this.handleKeyUp.bind(this));
-            this.addEventListener('click', this.handleClick.bind(this));
-            this.addEventListener('pointerdown', this.handlePointerDown.bind(this));
-            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() {
-            super.connectedCallback();
-            if (!this.hasAttribute('role')) {
-                this.setAttribute('role', 'button');
-            }
-            if (!this.hasAttribute('tabindex') && !this.disabled) {
-                this.setAttribute('tabindex', '0');
-            }
-        }
-        update(changedProperties) {
-            if (changedProperties.has('active')) {
-                this.setAttribute('aria-pressed', String(this.active));
-            }
-            super.update(changedProperties);
-        }
-        pressRipple(options) {
-            const element = this.ripple;
-            if (element && !element.isPressed) {
-                element.beginPress(options.positionEvent);
-            }
-        }
-        endRipple() {
-            this.ripple?.endPress();
-        }
-        beginPress(options) {
-            super.beginPress(options);
-            this.pressRipple(options);
-        }
-        endPress(config) {
-            super.endPress(config);
-            this.endRipple();
-            const { cancelled, reason } = config;
-            if (cancelled) {
-                return;
-            }
-            if (!reason || reason === 'enter' || reason === 'space') {
-                if (this.toggle) {
-                    this.active = !this.active;
-                    // note, only dispatch events when user interacting with the UI.
-                    this.dispatchEvent(new Event('active'));
-                }
-            }
-            if (reason === 'enter' || reason === 'space') {
-                if (!this.toggle) {
-                    this.click();
-                }
-            }
-        }
-        handlePointerEnter(e) {
-            super.handlePointerEnter(e);
-            if (this.ripple) {
-                this.ripple.beginHover(e);
-            }
-        }
-        handlePointerLeave(e) {
-            super.handlePointerLeave(e);
-            if (this.ripple) {
-                this.ripple.endHover();
-            }
-        }
+        get width() { return this.#width_accessor_storage; }
+        set width(value) { this.#width_accessor_storage = value; }
         render() {
-            const { pressed = false } = this;
-            const containerClasses = classMap({
-                surface: true,
-                pressed,
-            });
             return html `
-      <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>
-        <div class="content">
-          <slot></slot>
-        </div>
-      </div>
+      ${this.renderFocusRing()} ${this.renderRipple()}
+      <slot></slot>
     `;
         }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _width_extraInitializers);
+        }
     };
 })();
 /**
- * @fires active - An event dispatched when the `active` state  has changed. This only happens when the button is `toggle`.
+ * An icon button component that extends the functionality of a standard button,
+ * but is specifically designed to hold an icon.
+ * @slot - The default slot for the icon.
  */
 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, 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"]}
+{"version":3,"file":"IconButton.js","sourceRoot":"","sources":["../../../../../src/md/icon-button/internals/IconButton.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAA;AAC/C,OAAO,UAAU,MAAM,gCAAgC,CAAA;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;;sBAUJ,UAAU;;;;;;;iBAA7B,UAAW,SAAQ,WAAU;;;iCAK/C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iCAKzC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;YALC,oKAAS,KAAK,6BAAL,KAAK,qFAAgC;YAK9C,oKAAS,KAAK,6BAAL,KAAK,qFAA+B;;;QAL7C,uEAAoC,UAAU;QACzF;;;WAGG;UAJsF;QAJzF;;;WAGG;QACwC,IAAS,KAAK,2CAAgC;QAA9C,IAAS,KAAK,iDAAgC;QAK9C,2HAAoC,SAAS,GAAA;QAJxF;;;WAGG;QACwC,IAAS,KAAK,2CAA+B;QAA7C,IAAS,KAAK,iDAA+B;QAErE,MAAM;YACvB,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,eAAe,EAAE,IAAI,IAAI,CAAC,YAAY,EAAE;;KAEhD,CAAA;QACH,CAAC;;;;;;;AAtBH;;;;GAIG;AACH,0BAkBC","sourcesContent":["import { html, type TemplateResult } from 'lit'\nimport BaseButton from '../../button/internals/base.js'\nimport { property } from 'lit/decorators.js'\n\nexport type MdIconButtonColor = 'filled' | 'outlined' | 'standard' | 'tonal'\nexport type MdIconButtonWidth = 'default' | 'narrow' | 'wide'\n\n/**\n * An icon button component that extends the functionality of a standard button,\n * but is specifically designed to hold an icon.\n * @slot - The default slot for the icon.\n */\nexport default class IconButton extends BaseButton {\n  /**\n   * The color of the button.\n   * @attribute\n   */\n  @property({ type: String, reflect: true }) accessor color: MdIconButtonColor = 'standard'\n  /**\n   * The width of the button.\n   * @attribute\n   */\n  @property({ type: String, reflect: true }) accessor width: MdIconButtonWidth = 'default'\n\n  protected override render(): TemplateResult {\n    return html`\n      ${this.renderFocusRing()} ${this.renderRipple()}\n      <slot></slot>\n    `\n  }\n}\n"]}

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

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

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

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

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

@@ -0,0 +1,286 @@
+import { css } from 'lit';
+export default css `
+  :host {
+    all: unset;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    box-sizing: border-box;
+    white-space: nowrap;
+
+    --md-ripple-hover-state-layer-color: currentColor;
+    --md-ripple-focus-state-layer-color: currentColor;
+    --md-ripple-pressed-state-layer-color: currentColor;
+
+    --_color: inherit;
+    --_background-color: transparent;
+    --_icon-size: var(--md-button-icon-size, 20px);
+    --_container-height: inherit;
+    --_leading-space: 0;
+    --_trailing-space: 0;
+    --_radius: 0;
+    --_outline-width: 0;
+
+    --_xs-radius: 16px;
+    --_s-radius: 20px;
+    --_m-radius: 28px;
+    --_l-radius: 48px;
+    --_xl-radius: 68px;
+
+    background-color: var(--_background-color);
+    color: var(--_color);
+    fill: var(--_color);
+    height: var(--_container-height);
+    padding-inline-start: var(--_leading-space);
+    padding-inline-end: var(--_trailing-space);
+    border: var(--_outline-width) var(--md-sys-color-outline-variant) solid;
+    border-end-end-radius: var(--ui-button-shape-end-end, var(--_radius));
+    border-end-start-radius: var(--ui-button-shape-end-start, var(--_radius));
+    border-start-end-radius: var(--ui-button-shape-start-end, var(--_radius));
+    border-start-start-radius: var(--ui-button-shape-start-start, var(--_radius));
+
+    /* Interaction styles */
+    cursor: pointer;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+    outline: none;
+
+    transition:
+      background-color var(--md-sys-motion-duration-short2, 200ms)
+        var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),
+      color var(--md-sys-motion-duration-short2, 200ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),
+      border-color var(--md-sys-motion-duration-short2, 200ms)
+        var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),
+      border-radius var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard);
+  }
+
+  ::slotted(*) {
+    width: var(--_icon-size) !important;
+    height: var(--_icon-size) !important;
+    color: var(--_color);
+    fill: var(--_color);
+  }
+
+  .ripple {
+    border-radius: inherit;
+    transition: border-radius var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard);
+  }
+
+  .focus-ring {
+    --md-focus-ring-shape-end-end: var(--ui-button-shape-end-end, var(--_radius));
+    --md-focus-ring-shape-end-start: var(--ui-button-shape-end-start, var(--_radius));
+    --md-focus-ring-shape-start-end: var(--ui-button-shape-start-end, var(--_radius));
+    --md-focus-ring-shape-start-start: var(--ui-button-shape-start-start, var(--_radius));
+    transition: border-radius var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard);
+  }
+
+  .ripple.activated {
+    z-index: 1;
+  }
+
+  /* Filled Button */
+  :host([color='filled']) {
+    --_background-color: var(--md-sys-color-primary);
+    --_color: var(--md-sys-color-on-primary);
+  }
+
+  :host([color='filled'][toggle]) {
+    --_background-color: var(--md-sys-color-surface-container);
+    --_color: var(--md-sys-color-on-surface-variant);
+  }
+
+  :host([color='filled'][toggle][selected]) {
+    --_background-color: var(--md-sys-color-primary);
+    --_color: var(--md-sys-color-on-primary);
+  }
+
+  :host([color='filled'][disabled]) {
+    --_background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);
+    --_color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
+  }
+
+  /* Filled Tonal Button */
+  :host([color='tonal']) {
+    --_background-color: var(--md-sys-color-secondary-container);
+    --_color: var(--md-sys-color-on-secondary-container);
+  }
+
+  :host([color='tonal'][toggle]) {
+    --_background-color: var(--md-sys-color-secondary-container);
+    --_color: var(--md-sys-color-on-secondary-container);
+  }
+
+  :host([color='tonal'][toggle][selected]) {
+    --_background-color: var(--md-sys-color-secondary);
+    --_color: var(--md-sys-color-on-secondary);
+  }
+
+  :host([color='tonal']:hover:not([disabled])) {
+    --_shadow: var(--md-sys-elevation-1);
+  }
+
+  :host([color='tonal'][disabled]) {
+    --_background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);
+    --_color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
+  }
+
+  /* Outlined Button */
+  :host([color='outlined']) {
+    --_outline-width: 1px;
+    --_color: var(--md-sys-color-on-surface-variant);
+  }
+  :host([color='outlined'][size='l']),
+  :host([color='outlined'][size='xl']) {
+    --_outline-width: 3px;
+  }
+
+  :host([color='outlined'][toggle][selected]) {
+    --_background-color: var(--md-sys-color-inverse-surface);
+    --_color: var(--md-sys-color-inverse-on-surface);
+  }
+
+  :host([color='outlined'][disabled]) {
+    border-color: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);
+    --_color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
+  }
+
+  /* Standard Button */
+  :host([color='standard']) {
+    --_color: var(--md-sys-color-on-surface-variant);
+  }
+
+  :host([color='standard'][toggle][selected]) {
+    --_color: var(--md-sys-color-primary);
+  }
+
+  :host([color='standard'][disabled]) {
+    color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
+  }
+
+  /* Sizes */
+  :host([size='xs']) {
+    --_container-height: 32px;
+    --_icon-size: 20px;
+  }
+  :host([size='s']) {
+    --_container-height: 40px;
+    --_icon-size: 24px;
+  }
+  :host([size='m']) {
+    --_container-height: 56px;
+    --_icon-size: 24px;
+  }
+  :host([size='l']) {
+    --_container-height: 96px;
+    --_icon-size: 32px;
+  }
+  :host([size='xl']) {
+    --_container-height: 136px;
+    --_icon-size: 40px;
+  }
+  :host([size='xs'][width='narrow']) {
+    --_leading-space: 4px;
+    --_trailing-space: 4px;
+  }
+  :host([size='xs'][width='default']) {
+    --_leading-space: 6px;
+    --_trailing-space: 6px;
+  }
+  :host([size='xs'][width='wide']) {
+    --_leading-space: 10px;
+    --_trailing-space: 10px;
+  }
+  :host([size='s'][width='narrow']) {
+    --_leading-space: 4px;
+    --_trailing-space: 4px;
+  }
+  :host([size='s'][width='default']) {
+    --_leading-space: 8px;
+    --_trailing-space: 8px;
+  }
+  :host([size='s'][width='wide']) {
+    --_leading-space: 14px;
+    --_trailing-space: 14px;
+  }
+  :host([size='m'][width='narrow']) {
+    --_leading-space: 12px;
+    --_trailing-space: 12px;
+  }
+  :host([size='m'][width='default']) {
+    --_leading-space: 16px;
+    --_trailing-space: 16px;
+  }
+  :host([size='m'][width='wide']) {
+    --_leading-space: 24px;
+    --_trailing-space: 24px;
+  }
+  :host([size='l'][width='narrow']) {
+    --_leading-space: 16px;
+    --_trailing-space: 16px;
+  }
+  :host([size='l'][width='default']) {
+    --_leading-space: 32px;
+    --_trailing-space: 32px;
+  }
+  :host([size='l'][width='wide']) {
+    --_leading-space: 48px;
+    --_trailing-space: 48px;
+  }
+  :host([size='xl'][width='narrow']) {
+    --_leading-space: 32px;
+    --_trailing-space: 32px;
+  }
+  :host([size='xl'][width='default']) {
+    --_leading-space: 48px;
+    --_trailing-space: 48px;
+  }
+  :host([size='xl'][width='wide']) {
+    --_leading-space: 72px;
+    --_trailing-space: 72px;
+  }
+
+  /* Shape setup */
+  /* For the round shape, we can't use the "--md-sys-shape-corner-full" value as it has a value of 999px and it would make animations impossible so see. */
+  :host([shape='round'][size='xs']) {
+    --_radius: var(--_xs-radius);
+  }
+  :host([shape='round'][size='s']) {
+    --_radius: var(--_s-radius);
+  }
+  :host([shape='square'][size='xs']),
+  :host([shape='square'][size='s']) {
+    --_radius: var(--md-sys-shape-corner-medium);
+  }
+  :host([shape='round'][size='m']) {
+    --_radius: var(--_m-radius);
+  }
+  :host([shape='square'][size='m']) {
+    --_radius: var(--md-sys-shape-corner-large);
+  }
+  :host([shape='round'][size='l']) {
+    --_radius: var(--_l-radius);
+  }
+  :host([shape='round'][size='xl']) {
+    --_radius: var(--_xl-radius);
+  }
+  :host([shape='square'][size='l']),
+  :host([shape='square'][size='xl']) {
+    --_radius: var(--md-sys-shape-corner-extra-large);
+  }
+
+  /* Pressed shapes */
+  :host([size='xs'].pressed),
+  :host([size='s'].pressed) {
+    --_radius: var(--md-sys-shape-corner-small);
+  }
+  :host([size='m'].pressed) {
+    --_radius: var(--md-sys-shape-corner-medium);
+  }
+  :host([size='l'].pressed),
+  :host([size='xl'].pressed) {
+    --_radius: var(--md-sys-shape-corner-large);
+  }
+`;
+//# sourceMappingURL=IconButton.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.styles.js","sourceRoot":"","sources":["../../../../../src/md/icon-button/internals/IconButton.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2RjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  :host {\n    all: unset;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    box-sizing: border-box;\n    white-space: nowrap;\n\n    --md-ripple-hover-state-layer-color: currentColor;\n    --md-ripple-focus-state-layer-color: currentColor;\n    --md-ripple-pressed-state-layer-color: currentColor;\n\n    --_color: inherit;\n    --_background-color: transparent;\n    --_icon-size: var(--md-button-icon-size, 20px);\n    --_container-height: inherit;\n    --_leading-space: 0;\n    --_trailing-space: 0;\n    --_radius: 0;\n    --_outline-width: 0;\n\n    --_xs-radius: 16px;\n    --_s-radius: 20px;\n    --_m-radius: 28px;\n    --_l-radius: 48px;\n    --_xl-radius: 68px;\n\n    background-color: var(--_background-color);\n    color: var(--_color);\n    fill: var(--_color);\n    height: var(--_container-height);\n    padding-inline-start: var(--_leading-space);\n    padding-inline-end: var(--_trailing-space);\n    border: var(--_outline-width) var(--md-sys-color-outline-variant) solid;\n    border-end-end-radius: var(--ui-button-shape-end-end, var(--_radius));\n    border-end-start-radius: var(--ui-button-shape-end-start, var(--_radius));\n    border-start-end-radius: var(--ui-button-shape-start-end, var(--_radius));\n    border-start-start-radius: var(--ui-button-shape-start-start, var(--_radius));\n\n    /* Interaction styles */\n    cursor: pointer;\n    user-select: none;\n    -webkit-tap-highlight-color: transparent;\n    outline: none;\n\n    transition:\n      background-color var(--md-sys-motion-duration-short2, 200ms)\n        var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),\n      color var(--md-sys-motion-duration-short2, 200ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),\n      border-color var(--md-sys-motion-duration-short2, 200ms)\n        var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),\n      border-radius var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard);\n  }\n\n  ::slotted(*) {\n    width: var(--_icon-size) !important;\n    height: var(--_icon-size) !important;\n    color: var(--_color);\n    fill: var(--_color);\n  }\n\n  .ripple {\n    border-radius: inherit;\n    transition: border-radius var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard);\n  }\n\n  .focus-ring {\n    --md-focus-ring-shape-end-end: var(--ui-button-shape-end-end, var(--_radius));\n    --md-focus-ring-shape-end-start: var(--ui-button-shape-end-start, var(--_radius));\n    --md-focus-ring-shape-start-end: var(--ui-button-shape-start-end, var(--_radius));\n    --md-focus-ring-shape-start-start: var(--ui-button-shape-start-start, var(--_radius));\n    transition: border-radius var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard);\n  }\n\n  .ripple.activated {\n    z-index: 1;\n  }\n\n  /* Filled Button */\n  :host([color='filled']) {\n    --_background-color: var(--md-sys-color-primary);\n    --_color: var(--md-sys-color-on-primary);\n  }\n\n  :host([color='filled'][toggle]) {\n    --_background-color: var(--md-sys-color-surface-container);\n    --_color: var(--md-sys-color-on-surface-variant);\n  }\n\n  :host([color='filled'][toggle][selected]) {\n    --_background-color: var(--md-sys-color-primary);\n    --_color: var(--md-sys-color-on-primary);\n  }\n\n  :host([color='filled'][disabled]) {\n    --_background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);\n    --_color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);\n  }\n\n  /* Filled Tonal Button */\n  :host([color='tonal']) {\n    --_background-color: var(--md-sys-color-secondary-container);\n    --_color: var(--md-sys-color-on-secondary-container);\n  }\n\n  :host([color='tonal'][toggle]) {\n    --_background-color: var(--md-sys-color-secondary-container);\n    --_color: var(--md-sys-color-on-secondary-container);\n  }\n\n  :host([color='tonal'][toggle][selected]) {\n    --_background-color: var(--md-sys-color-secondary);\n    --_color: var(--md-sys-color-on-secondary);\n  }\n\n  :host([color='tonal']:hover:not([disabled])) {\n    --_shadow: var(--md-sys-elevation-1);\n  }\n\n  :host([color='tonal'][disabled]) {\n    --_background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);\n    --_color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);\n  }\n\n  /* Outlined Button */\n  :host([color='outlined']) {\n    --_outline-width: 1px;\n    --_color: var(--md-sys-color-on-surface-variant);\n  }\n  :host([color='outlined'][size='l']),\n  :host([color='outlined'][size='xl']) {\n    --_outline-width: 3px;\n  }\n\n  :host([color='outlined'][toggle][selected]) {\n    --_background-color: var(--md-sys-color-inverse-surface);\n    --_color: var(--md-sys-color-inverse-on-surface);\n  }\n\n  :host([color='outlined'][disabled]) {\n    border-color: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);\n    --_color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);\n  }\n\n  /* Standard Button */\n  :host([color='standard']) {\n    --_color: var(--md-sys-color-on-surface-variant);\n  }\n\n  :host([color='standard'][toggle][selected]) {\n    --_color: var(--md-sys-color-primary);\n  }\n\n  :host([color='standard'][disabled]) {\n    color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);\n  }\n\n  /* Sizes */\n  :host([size='xs']) {\n    --_container-height: 32px;\n    --_icon-size: 20px;\n  }\n  :host([size='s']) {\n    --_container-height: 40px;\n    --_icon-size: 24px;\n  }\n  :host([size='m']) {\n    --_container-height: 56px;\n    --_icon-size: 24px;\n  }\n  :host([size='l']) {\n    --_container-height: 96px;\n    --_icon-size: 32px;\n  }\n  :host([size='xl']) {\n    --_container-height: 136px;\n    --_icon-size: 40px;\n  }\n  :host([size='xs'][width='narrow']) {\n    --_leading-space: 4px;\n    --_trailing-space: 4px;\n  }\n  :host([size='xs'][width='default']) {\n    --_leading-space: 6px;\n    --_trailing-space: 6px;\n  }\n  :host([size='xs'][width='wide']) {\n    --_leading-space: 10px;\n    --_trailing-space: 10px;\n  }\n  :host([size='s'][width='narrow']) {\n    --_leading-space: 4px;\n    --_trailing-space: 4px;\n  }\n  :host([size='s'][width='default']) {\n    --_leading-space: 8px;\n    --_trailing-space: 8px;\n  }\n  :host([size='s'][width='wide']) {\n    --_leading-space: 14px;\n    --_trailing-space: 14px;\n  }\n  :host([size='m'][width='narrow']) {\n    --_leading-space: 12px;\n    --_trailing-space: 12px;\n  }\n  :host([size='m'][width='default']) {\n    --_leading-space: 16px;\n    --_trailing-space: 16px;\n  }\n  :host([size='m'][width='wide']) {\n    --_leading-space: 24px;\n    --_trailing-space: 24px;\n  }\n  :host([size='l'][width='narrow']) {\n    --_leading-space: 16px;\n    --_trailing-space: 16px;\n  }\n  :host([size='l'][width='default']) {\n    --_leading-space: 32px;\n    --_trailing-space: 32px;\n  }\n  :host([size='l'][width='wide']) {\n    --_leading-space: 48px;\n    --_trailing-space: 48px;\n  }\n  :host([size='xl'][width='narrow']) {\n    --_leading-space: 32px;\n    --_trailing-space: 32px;\n  }\n  :host([size='xl'][width='default']) {\n    --_leading-space: 48px;\n    --_trailing-space: 48px;\n  }\n  :host([size='xl'][width='wide']) {\n    --_leading-space: 72px;\n    --_trailing-space: 72px;\n  }\n\n  /* Shape setup */\n  /* For the round shape, we can't use the \"--md-sys-shape-corner-full\" value as it has a value of 999px and it would make animations impossible so see. */\n  :host([shape='round'][size='xs']) {\n    --_radius: var(--_xs-radius);\n  }\n  :host([shape='round'][size='s']) {\n    --_radius: var(--_s-radius);\n  }\n  :host([shape='square'][size='xs']),\n  :host([shape='square'][size='s']) {\n    --_radius: var(--md-sys-shape-corner-medium);\n  }\n  :host([shape='round'][size='m']) {\n    --_radius: var(--_m-radius);\n  }\n  :host([shape='square'][size='m']) {\n    --_radius: var(--md-sys-shape-corner-large);\n  }\n  :host([shape='round'][size='l']) {\n    --_radius: var(--_l-radius);\n  }\n  :host([shape='round'][size='xl']) {\n    --_radius: var(--_xl-radius);\n  }\n  :host([shape='square'][size='l']),\n  :host([shape='square'][size='xl']) {\n    --_radius: var(--md-sys-shape-corner-extra-large);\n  }\n\n  /* Pressed shapes */\n  :host([size='xs'].pressed),\n  :host([size='s'].pressed) {\n    --_radius: var(--md-sys-shape-corner-small);\n  }\n  :host([size='m'].pressed) {\n    --_radius: var(--md-sys-shape-corner-medium);\n  }\n  :host([size='l'].pressed),\n  :host([size='xl'].pressed) {\n    --_radius: var(--md-sys-shape-corner-large);\n  }\n`\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"ui-icon-button.d.ts","sourceRoot":"","sources":["../../../../src/md/icon-button/ui-icon-button.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,KAAK,CAAA;AAE5C,OAAO,OAAO,MAAM,2BAA2B,CAAA;AAI/C,qBACa,mBAAoB,SAAQ,OAAO;IAC9C,OAAgB,MAAM,EAAE,iBAAiB,EAAE,CAAiB;CAC7D;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,mBAAmB,CAAA;KACtC;CACF"}
+{"version":3,"file":"ui-icon-button.d.ts","sourceRoot":"","sources":["../../../../src/md/icon-button/ui-icon-button.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,KAAK,CAAA;AAE5C,OAAO,OAAO,MAAM,2BAA2B,CAAA;AAG/C,qBACa,mBAAoB,SAAQ,OAAO;IAC9C,OAAgB,MAAM,EAAE,iBAAiB,EAAE,CAAW;CACvD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,mBAAmB,CAAA;KACtC;CACF"}

package/build/src/md/icon-button/ui-icon-button.js

@@ -1,8 +1,7 @@
 import { __esDecorate, __runInitializers } from "tslib";
 import { customElement } from 'lit/decorators.js';
 import Element from './internals/IconButton.js';
-import base from './internals/base.styles.js';
-import styles from './internals/standard.styles.js';
+import styles from './internals/IconButton.styles.js';
 let UiIconButtonElement = (() => {
     let _classDecorators = [customElement('ui-icon-button')];
     let _classDescriptor;
@@ -17,7 +16,7 @@ let UiIconButtonElement = (() => {
             UiIconButtonElement = _classThis = _classDescriptor.value;
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
-        static styles = [base, styles];
+        static styles = [styles];
         static {
             __runInitializers(_classThis, _classExtraInitializers);
         }