@redvars/peacock 3.5.0 → 3.5.1

package/dist/{button-DMN1dPAg.js → button-DouvOfEU.js}

@@ -1,12 +1,10 @@
-import { a as i, _ as __decorate, b, A, i as i$1, I as IndividualComponent, c as __classPrivateFieldGet } from './IndividualComponent-DUINtMGK.js';
+import { a as i, _ as __decorate, I as IndividualComponent, b } from './IndividualComponent-DUINtMGK.js';
 import { n } from './property-1psGvXOq.js';
 import { r } from './state-DwbEjqVk.js';
-import { e as e$1 } from './class-map-YU7g0o3B.js';
+import { e } from './class-map-YU7g0o3B.js';
+import { B as BaseButton, o, s as spread } from './BaseButton-DuASuVth.js';
 import { o as observerSlotChangesWithCallback } from './observe-slot-change-BGJfgg2E.js';
-import { t as throttle } from './throttle-C7ZAPqtu.js';
-import { s as spread } from './spread-B5cgadZl.js';
-import { e } from './query-QBcUV-L_.js';
-import { i as isActivationClick, d as dispatchActivationClick } from './dispatch-event-utils-CuEqjlPT.js';
+import { t as throttle } from './BaseHyperlinkMixin-BNuwbiEf.js';
 
 var css_248z$2 = i`* {
   box-sizing: border-box;
@@ -626,11 +624,13 @@ var css_248z = i`:host([size=xs]),
   letter-spacing: 0 !important;
 }
 
-:host([size=xl]) {
+:host([size=xl]),
+:host([size=extra-large]) {
   --button-height: 8.5rem;
 }
 
-:host([size=xl]) .button {
+:host([size=xl]) .button,
+:host([size=extra-large]) .button {
   --_button-icon-size: 2.5rem;
   --_button_container-padding: 4rem;
   font-size: 2rem !important;
@@ -639,224 +639,6 @@ var css_248z = i`:host([size=xs]),
   letter-spacing: 0 !important;
 }`;
 
-/**
- * 3. Apply the type annotation to the variable.
- */
-const BaseHyperlink = (superclass) => {
-    // Naming the class (BaseHyperlinkElement) instead of using 'Mixin' or anonymous 
-    // prevents the "__childPart" visibility error.
-    class BaseHyperlinkElement extends superclass {
-        constructor() {
-            super(...arguments);
-            this.target = '_self';
-        }
-        __isLink() {
-            return !!this.href;
-        }
-    }
-    __decorate([
-        n({ reflect: true })
-    ], BaseHyperlinkElement.prototype, "href", void 0);
-    __decorate([
-        n()
-    ], BaseHyperlinkElement.prototype, "target", void 0);
-    return BaseHyperlinkElement;
-};
-
-class BaseButton extends BaseHyperlink(i$1) {
-    constructor() {
-        super(...arguments);
-        this.htmlType = 'button';
-        /**
-         * The visual style of the button.
-         *
-         *  Possible variant values:
-         * `"filled"` is a filled button.
-         * `"outlined"` is an outlined button.
-         * `"text"` is a transparent button.
-         * `"tonal"` is a light color button.
-         * `"elevated"` is elevated button
-         */
-        this.variant = 'filled';
-        /**
-         * Defines the primary color of the button. This can be set to predefined color names to apply specific color themes.
-         */
-        this.color = 'primary';
-        /**
-         * Button size.
-         * Possible values are `"sm"`, `"md"`, `"lg"`. Defaults to `"md"`.
-         */
-        this.size = 'sm';
-        /**
-         * If true, the user cannot interact with the button. Defaults to `false`.
-         */
-        this.disabled = false;
-        this.skeleton = false;
-        /**
-         * If true, the user cannot interact with the button and the button is visually styled as disabled. But the button is still focusable. Defaults to `false`.
-         */
-        this.softDisabled = false;
-        /**
-         * If button is disabled, the reason why it is disabled.
-         */
-        this.disabledReason = '';
-        this.toggle = false;
-        this.selected = false;
-        /**
-         * Sets the delay for throttle in milliseconds. Defaults to 200 milliseconds.
-         */
-        this.throttleDelay = 200;
-        /**
-         * States
-         */
-        this.isPressed = false;
-        this.__handlePress = (event) => {
-            if (this.disabled || this.skeleton || this.softDisabled)
-                return;
-            if (event instanceof KeyboardEvent &&
-                event.type === 'keydown' &&
-                (event.key === 'Enter' || event.key === ' ')) {
-                this.isPressed = true;
-            }
-            else if (event.type === 'mousedown') {
-                this.isPressed = true;
-            }
-            else {
-                this.isPressed = false;
-            }
-        };
-        this.__dispatchClickWithThrottle = event => {
-            this.__dispatchClick(event);
-        };
-        this.__dispatchClick = (event) => {
-            // If the button is soft-disabled or a disabled link, we need to explicitly
-            // prevent the click from propagating to other event listeners as well as
-            // prevent the default action.
-            if (this.softDisabled || (this.disabled && this.href) || this.skeleton) {
-                event.stopImmediatePropagation();
-                event.preventDefault();
-                return;
-            }
-            if (!isActivationClick(event) || !this.buttonElement) {
-                return;
-            }
-            if (this.toggle) {
-                this.selected = !this.selected;
-            }
-            this.focus();
-            dispatchActivationClick(this.buttonElement);
-        };
-    }
-    focus() {
-        this.buttonElement?.focus();
-    }
-    blur() {
-        this.buttonElement?.blur();
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.addEventListener('click', this.__dispatchClickWithThrottle);
-        window.addEventListener('mouseup', this.__handlePress);
-    }
-    disconnectedCallback() {
-        window.removeEventListener('mouseup', this.__handlePress);
-        this.removeEventListener('click', this.__dispatchClickWithThrottle);
-        super.disconnectedCallback();
-    }
-    __convertTypeToVariantAndColor() {
-        if (this.type === 'primary') {
-            this.color = 'primary';
-            this.variant = 'filled';
-        }
-        else if (this.type === 'secondary') {
-            this.color = 'surface';
-            this.variant = 'filled';
-        }
-        else if (this.type === 'tertiary') {
-            this.color = 'primary';
-            this.variant = 'text';
-        }
-        else if (this.type === 'danger') {
-            this.color = 'danger';
-            this.variant = 'filled';
-        }
-    }
-    get __disabledReasonID() {
-        return this.disabled && this.disabledReason
-            ? BaseButton.DISABLED_REASON_ID
-            : undefined;
-    }
-    __renderDisabledReason() {
-        const disabledReasonID = this.__disabledReasonID;
-        if (disabledReasonID)
-            return b `<div
-        id=${disabledReasonID}
-        role="tooltip"
-        aria-label=${this.disabledReason}
-        class="screen-reader-only"
-      >
-        ${this.disabledReason}
-      </div>`;
-        return A;
-    }
-    __renderTooltip() {
-        if (this.tooltip) {
-            return b `<wc-tooltip for="button">${this.tooltip}</wc-tooltip>`;
-        }
-        return A;
-    }
-}
-BaseButton.DISABLED_REASON_ID = 'disabled-reason';
-__decorate([
-    n({ type: String })
-], BaseButton.prototype, "htmlType", void 0);
-__decorate([
-    n({ type: String })
-], BaseButton.prototype, "type", void 0);
-__decorate([
-    n()
-], BaseButton.prototype, "variant", void 0);
-__decorate([
-    n({ reflect: true })
-], BaseButton.prototype, "color", void 0);
-__decorate([
-    n({ reflect: true })
-], BaseButton.prototype, "size", void 0);
-__decorate([
-    n({ type: Boolean, reflect: true })
-], BaseButton.prototype, "disabled", void 0);
-__decorate([
-    n({ type: Boolean, reflect: true })
-], BaseButton.prototype, "skeleton", void 0);
-__decorate([
-    n({ type: Boolean, reflect: true, attribute: 'soft-disabled' })
-], BaseButton.prototype, "softDisabled", void 0);
-__decorate([
-    n({ attribute: 'disabled-reason' })
-], BaseButton.prototype, "disabledReason", void 0);
-__decorate([
-    n({ reflect: true })
-], BaseButton.prototype, "configAria", void 0);
-__decorate([
-    n({ type: Boolean, reflect: true })
-], BaseButton.prototype, "toggle", void 0);
-__decorate([
-    n({ type: Boolean, reflect: true })
-], BaseButton.prototype, "selected", void 0);
-__decorate([
-    n()
-], BaseButton.prototype, "throttleDelay", void 0);
-__decorate([
-    n()
-], BaseButton.prototype, "tooltip", void 0);
-__decorate([
-    r()
-], BaseButton.prototype, "isPressed", void 0);
-__decorate([
-    e('.button')
-], BaseButton.prototype, "buttonElement", void 0);
-
-var _Button_tabindex;
 /**
  * @label Button
  * @tag wc-button
@@ -902,12 +684,31 @@ var _Button_tabindex;
 let Button = class Button extends BaseButton {
     constructor() {
         super(...arguments);
-        _Button_tabindex.set(this, 0);
         /**
          * Icon alignment.
          * Possible values are `"start"`, `"end"`. Defaults to `"end"`.
          */
         this.iconAlign = 'end';
+        /**
+         * Button size.
+         * Possible values are `"xs"`, `"sm"`, `"md"`, `"lg"`, `"xl"`. Defaults to `"sm"`.
+         */
+        this.size = 'sm';
+        /**
+         * The visual style of the button.
+         *
+         *  Possible variant values:
+         * `"filled"` is a filled button.
+         * `"outlined"` is an outlined button.
+         * `"text"` is a transparent button.
+         * `"tonal"` is a light color button.
+         * `"elevated"` is elevated button
+         */
+        this.variant = 'filled';
+        /**
+         * Defines the primary color of the button. This can be set to predefined color names to apply specific color themes.
+         */
+        this.color = 'primary';
         this.slotHasContent = false;
     }
     focus() {
@@ -916,16 +717,6 @@ let Button = class Button extends BaseButton {
     blur() {
         this.buttonElement?.blur();
     }
-    connectedCallback() {
-        super.connectedCallback();
-        this.addEventListener('click', this.__dispatchClickWithThrottle);
-        window.addEventListener('mouseup', this.__handlePress);
-    }
-    disconnectedCallback() {
-        window.removeEventListener('mouseup', this.__handlePress);
-        this.removeEventListener('click', this.__dispatchClickWithThrottle);
-        super.disconnectedCallback();
-    }
     firstUpdated() {
         this.__dispatchClickWithThrottle = throttle(this.__dispatchClick, this.throttleDelay);
         observerSlotChangesWithCallback(this.renderRoot.querySelector('slot'), hasContent => {
@@ -934,6 +725,24 @@ let Button = class Button extends BaseButton {
         });
         this.__convertTypeToVariantAndColor();
     }
+    __convertTypeToVariantAndColor() {
+        if (this.type === 'primary') {
+            this.color = 'primary';
+            this.variant = 'filled';
+        }
+        else if (this.type === 'secondary') {
+            this.color = 'surface';
+            this.variant = 'filled';
+        }
+        else if (this.type === 'tertiary') {
+            this.color = 'primary';
+            this.variant = 'text';
+        }
+        else if (this.type === 'danger') {
+            this.color = 'danger';
+            this.variant = 'filled';
+        }
+    }
     render() {
         const isLink = this.__isLink();
         const cssClasses = {
@@ -950,16 +759,17 @@ let Button = class Button extends BaseButton {
         };
         if (!isLink) {
             return b `<button
-          class=${e$1(cssClasses)}
+          class=${e(cssClasses)}
           id="button"
-          tabindex=${__classPrivateFieldGet(this, _Button_tabindex, "f")}
           type=${this.htmlType}
           @click=${this.__dispatchClickWithThrottle}
           @mousedown=${this.__handlePress}
           @keydown=${this.__handlePress}
           @keyup=${this.__handlePress}
-          aria-describedby=${this.__disabledReasonID}
-          aria-disabled=${`${this.disabled || this.softDisabled}`}
+
+          aria-describedby=${o(this.softDisabled ? BaseButton.DISABLED_REASON_ID : undefined)}
+          ?aria-disabled=${this.softDisabled}
+
           ?disabled=${this.disabled}
           ${spread(this.configAria)}
         >
@@ -968,18 +778,20 @@ let Button = class Button extends BaseButton {
         ${this.__renderTooltip()}`;
         }
         return b `<a
-        class=${e$1(cssClasses)}
+        class=${e(cssClasses)}
         id="button"
-        tabindex=${__classPrivateFieldGet(this, _Button_tabindex, "f")}
         href=${this.href}
         target=${this.target}
-          @click=${this.__dispatchClickWithThrottle}
+        tabindex=${this.disabled ? '-1' : '0'}
+        @click=${this.__dispatchClick}
         @mousedown=${this.__handlePress}
         @keydown=${this.__handlePress}
         @keyup=${this.__handlePress}
         role="button"
-        aria-describedby=${this.__disabledReasonID}
-        aria-disabled=${`${this.disabled}`}
+
+        aria-describedby=${o(this.softDisabled ? BaseButton.DISABLED_REASON_ID : undefined)}
+        ?aria-disabled=${this.softDisabled}
+
         ${spread(this.configAria)}
       >
         ${this.renderButtonContent()}
@@ -988,7 +800,7 @@ let Button = class Button extends BaseButton {
     }
     renderButtonContent() {
         return b `
-      <wc-focus-ring class="focus-ring" .control=${this} .forElement=${this.buttonElement}></wc-focus-ring>
+      <wc-focus-ring class="focus-ring" for='button'></wc-focus-ring>
       <wc-elevation class="elevation"></wc-elevation>
       <div class="neo-background"></div>
       <div class="background"></div>
@@ -1004,15 +816,29 @@ let Button = class Button extends BaseButton {
         <slot name="icon"></slot>
       </div>
 
-      ${this.__renderDisabledReason()}
+      ${this.__renderDisabledReason(this.softDisabled)}
     `;
     }
 };
-_Button_tabindex = new WeakMap();
 Button.styles = [css_248z$2, css_248z$1, css_248z];
 __decorate([
     n({ attribute: 'icon-align' })
 ], Button.prototype, "iconAlign", void 0);
+__decorate([
+    n({ reflect: true })
+], Button.prototype, "size", void 0);
+__decorate([
+    n({ type: String })
+], Button.prototype, "type", void 0);
+__decorate([
+    n()
+], Button.prototype, "variant", void 0);
+__decorate([
+    n({ reflect: true })
+], Button.prototype, "color", void 0);
+__decorate([
+    n({ reflect: true })
+], Button.prototype, "configAria", void 0);
 __decorate([
     r()
 ], Button.prototype, "slotHasContent", void 0);
@@ -1020,5 +846,5 @@ Button = __decorate([
     IndividualComponent
 ], Button);
 
-export { Button as B, css_248z$1 as a, BaseButton as b, css_248z$2 as c, BaseHyperlink as d };
-//# sourceMappingURL=button-DMN1dPAg.js.map
+export { Button as B, css_248z$1 as a, css_248z$2 as c };
+//# sourceMappingURL=button-DouvOfEU.js.map

package/dist/button-DouvOfEU.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-DouvOfEU.js","sources":["../../src/button/button/button.ts"],"sourcesContent":["import { html } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './button.scss';\nimport colorStyles from './button-colors.scss';\nimport sizeStyles from './button-sizes.scss';\nimport { observerSlotChangesWithCallback } from '@/__utils/observe-slot-change.js';\nimport { throttle } from '@/__utils/throttle.js';\nimport { spread } from '@/__directive/spread.js';\nimport { BaseButton } from '../BaseButton.js';\n\n/**\n * @label Button\n * @tag wc-button\n * @rawTag button\n *\n * @summary Buttons help people initiate actions, from sending an email, to sharing a document, to liking a post.\n * @overview\n * <p>Buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. Button labels express what action will occur when the user interacts with it.</p>\n *\n * @cssprop --button-container-shape: Defines the border radius of the button container shape.\n *\n * @cssprop --button-container-shape-start-start: Defines the start position of the button container shape.\n * @cssprop --button-container-shape-start-end: Defines the end position of the button container shape.\n * @cssprop --button-container-shape-end-start: Defines the start position of the button container shape.\n * @cssprop --button-container-shape-end-end: Defines the end position of the button container shape.\n *\n *\n * @cssprop --filled-button-container-color: Color of the filled button container.\n * @cssprop --filled-button-label-text-color: Text color of the filled button label.\n *\n * @cssprop --outlined-button-container-color: Color of the outlined button container.\n * @cssprop --outlined-button-label-text-color: Text color of the outlined button label.\n *\n * @cssprop --text-button-label-text-color: Text color of the text button label.\n *\n * @cssprop --tonal-button-container-color: Color of the tonal button container.\n * @cssprop --tonal-button-label-text-color: Text color of the tonal button label.\n *\n * @cssprop --elevated-button-container-color: Color of the elevated button container.\n * @cssprop --elevated-button-label-text-color: Text color of the elevated button label.\n *\n * @cssprop --neo-button-container-color: Color of the neo button container.\n * @cssprop --neo-button-label-text-color: Text color of the neo button label.\n *\n * @fires {MouseEvent} click - Dispatched when the button is clicked.\n *\n * @example\n * ```html\n * <wc-button>Button</wc-button>\n * ```\n * @tags display\n */\n@IndividualComponent\nexport class Button extends BaseButton {\n  static override styles = [styles, colorStyles, sizeStyles];\n\n  /**\n   * Icon alignment.\n   * Possible values are `\"start\"`, `\"end\"`. Defaults to `\"end\"`.\n   */\n  @property({ attribute: 'icon-align' })\n  iconAlign: 'start' | 'end' = 'end';\n\n  /**\n   * Button size.\n   * Possible values are `\"xs\"`, `\"sm\"`, `\"md\"`, `\"lg\"`, `\"xl\"`. Defaults to `\"sm\"`.\n   */\n  @property({ reflect: true }) size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'sm';\n\n  /**\n     * Type is preset of color and variant. Type will be only applied.\n     *\n     */\n    @property({ type: String }) type?: 'primary' | 'secondary' | 'tertiary';\n  \n    /**\n     * The visual style of the button.\n     *\n     *  Possible variant values:\n     * `\"filled\"` is a filled button.\n     * `\"outlined\"` is an outlined button.\n     * `\"text\"` is a transparent button.\n     * `\"tonal\"` is a light color button.\n     * `\"elevated\"` is elevated button\n     */\n    @property() variant:\n      | 'elevated'\n      | 'filled'\n      | 'tonal'\n      | 'outlined'\n      | 'text'\n      | 'neo' = 'filled';\n  \n    /**\n     * Defines the primary color of the button. This can be set to predefined color names to apply specific color themes.\n     */\n    @property({ reflect: true }) color:\n      | 'primary'\n      | 'success'\n      | 'danger'\n      | 'warning'\n      | 'surface'\n      | 'on-surface' = 'primary';\n\n  /**\n   * Additional ARIA attributes to pass to the inner button/anchor element.\n   */\n  @property({ reflect: true })\n  configAria?: { [key: string]: any };\n\n  @state()\n  private slotHasContent = false;\n\n  override focus() {\n    this.buttonElement?.focus();\n  }\n\n  override blur() {\n    this.buttonElement?.blur();\n  }\n\n  override firstUpdated() {\n    this.__dispatchClickWithThrottle = throttle(\n      this.__dispatchClick,\n      this.throttleDelay,\n    );\n    observerSlotChangesWithCallback(\n      this.renderRoot.querySelector('slot'),\n      hasContent => {\n        this.slotHasContent = hasContent;\n        this.requestUpdate();\n      },\n    );\n\n    this.__convertTypeToVariantAndColor();\n  }\n\n  __convertTypeToVariantAndColor() {\n    if (this.type === 'primary') {\n      this.color = 'primary';\n      this.variant = 'filled';\n    } else if (this.type === 'secondary') {\n      this.color = 'surface';\n      this.variant = 'filled';\n    } else if (this.type === 'tertiary') {\n      this.color = 'primary';\n      this.variant = 'text';\n    } else if (this.type === 'danger') {\n      this.color = 'danger';\n      this.variant = 'filled';\n    }\n  }\n\n  override render() {\n    const isLink = this.__isLink();\n\n    const cssClasses = {\n      button: true,\n      'button-element': true,\n      [`size-${this.size}`]: true,\n      [`variant-${this.variant}`]: true,\n      [`color-${this.color}`]: true,\n      disabled: this.disabled || this.softDisabled,\n      pressed: this.isPressed,\n      'has-content': this.slotHasContent,\n      'show-skeleton': this.skeleton,\n      [`icon-align-${this.iconAlign}`]: true,\n    };\n\n    if (!isLink) {\n      return html`<button\n          class=${classMap(cssClasses)}\n          id=\"button\"\n          type=${this.htmlType}\n          @click=${this.__dispatchClickWithThrottle}\n          @mousedown=${this.__handlePress}\n          @keydown=${this.__handlePress}\n          @keyup=${this.__handlePress}\n\n          aria-describedby=${ifDefined(this.softDisabled ? BaseButton.DISABLED_REASON_ID : undefined)}\n          ?aria-disabled=${this.softDisabled}\n\n          ?disabled=${this.disabled}\n          ${spread(this.configAria)}\n        >\n          ${this.renderButtonContent()}\n        </button>\n        ${this.__renderTooltip()}`;\n    }\n    return html`<a\n        class=${classMap(cssClasses)}\n        id=\"button\"\n        href=${this.href}\n        target=${this.target}\n        tabindex=${this.disabled ? '-1' : '0'}\n        @click=${this.__dispatchClick}\n        @mousedown=${this.__handlePress}\n        @keydown=${this.__handlePress}\n        @keyup=${this.__handlePress}\n        role=\"button\"\n\n        aria-describedby=${ifDefined(this.softDisabled ? BaseButton.DISABLED_REASON_ID : undefined)}\n        ?aria-disabled=${this.softDisabled}\n\n        ${spread(this.configAria)}\n      >\n        ${this.renderButtonContent()}\n      </a>\n      ${this.__renderTooltip()}`;\n  }\n\n  renderButtonContent() {\n    return html`\n      <wc-focus-ring class=\"focus-ring\" for='button'></wc-focus-ring>\n      <wc-elevation class=\"elevation\"></wc-elevation>\n      <div class=\"neo-background\"></div>\n      <div class=\"background\"></div>\n      <div class=\"outline\"></div>\n      <wc-ripple class=\"ripple\"></wc-ripple>\n      <wc-skeleton class=\"skeleton\"></wc-skeleton>\n\n      <div class=\"button-content\">\n        <div class=\"slot-container\">\n          <slot></slot>\n        </div>\n\n        <slot name=\"icon\"></slot>\n      </div>\n\n      ${this.__renderDisabledReason(this.softDisabled)}\n    `;\n  }\n}\n"],"names":["html","classMap","ifDefined","styles","colorStyles","sizeStyles","property","state"],"mappings":"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"}

package/dist/{button-group-CX9CUUXk.js → button-group-CEdMwvJJ.js}

@@ -1,9 +1,9 @@
-import { a as i, _ as __decorate, c as __classPrivateFieldGet, b, I as IndividualComponent, i as i$1 } from './IndividualComponent-DUINtMGK.js';
+import { a as i, _ as __decorate, b, I as IndividualComponent, i as i$1 } from './IndividualComponent-DUINtMGK.js';
 import { n } from './property-1psGvXOq.js';
 import { e } from './class-map-YU7g0o3B.js';
-import { c as css_248z$2, a as css_248z$3, b as BaseButton, B as Button } from './button-DMN1dPAg.js';
-import { s as spread } from './spread-B5cgadZl.js';
-import { t as throttle } from './throttle-C7ZAPqtu.js';
+import { c as css_248z$2, a as css_248z$3, B as Button } from './button-DouvOfEU.js';
+import { B as BaseButton, o, s as spread } from './BaseButton-DuASuVth.js';
+import { t as throttle } from './BaseHyperlinkMixin-BNuwbiEf.js';
 
 var css_248z$1 = i`* {
   box-sizing: border-box;
@@ -114,7 +114,6 @@ var css_248z = i`.button {
   --_button-icon-size: 2.5rem;
 }`;
 
-var _IconButton_tabindex;
 /**
  * @label Icon Button
  * @tag wc-icon-button
@@ -154,15 +153,33 @@ var _IconButton_tabindex;
  *
  * @example
  * ```html
- * <wc-icon-button name="home"></wc-icon-button>
+ * <wc-icon-button><wc-icon name="home"></wc-icon></wc-icon-button>
  * ```
  * @tags display
  */
 class IconButton extends BaseButton {
     constructor() {
         super(...arguments);
-        _IconButton_tabindex.set(this, 0);
-        this.provider = 'material-symbols';
+        /**
+         * Button size.
+         * Possible values are `"xs"`, `"sm"`, `"md"`, `"lg"`, `"xl"`. Defaults to `"sm"`.
+         */
+        this.size = 'sm';
+        /**
+         * The visual style of the button.
+         *
+         *  Possible variant values:
+         * `"filled"` is a filled button.
+         * `"outlined"` is an outlined button.
+         * `"text"` is a transparent button.
+         * `"tonal"` is a light color button.
+         * `"elevated"` is elevated button
+         */
+        this.variant = 'filled';
+        /**
+         * Defines the primary color of the button. This can be set to predefined color names to apply specific color themes.
+         */
+        this.color = 'primary';
     }
     focus() {
         this.buttonElement?.focus();
@@ -170,20 +187,28 @@ class IconButton extends BaseButton {
     blur() {
         this.buttonElement?.blur();
     }
-    connectedCallback() {
-        super.connectedCallback();
-        this.addEventListener('click', this.__dispatchClickWithThrottle);
-        window.addEventListener('mouseup', this.__handlePress);
-    }
-    disconnectedCallback() {
-        window.removeEventListener('mouseup', this.__handlePress);
-        this.removeEventListener('click', this.__dispatchClickWithThrottle);
-        super.disconnectedCallback();
-    }
     firstUpdated() {
         this.__dispatchClickWithThrottle = throttle(this.__dispatchClick, this.throttleDelay);
         this.__convertTypeToVariantAndColor();
     }
+    __convertTypeToVariantAndColor() {
+        if (this.type === 'primary') {
+            this.color = 'primary';
+            this.variant = 'filled';
+        }
+        else if (this.type === 'secondary') {
+            this.color = 'surface';
+            this.variant = 'filled';
+        }
+        else if (this.type === 'tertiary') {
+            this.color = 'primary';
+            this.variant = 'text';
+        }
+        else if (this.type === 'danger') {
+            this.color = 'danger';
+            this.variant = 'filled';
+        }
+    }
     render() {
         const isLink = this.__isLink();
         const cssClasses = {
@@ -200,14 +225,15 @@ class IconButton extends BaseButton {
             return b `<button
           class=${e(cssClasses)}
           id="button"
-          tabindex=${__classPrivateFieldGet(this, _IconButton_tabindex, "f")}
           type=${this.htmlType}
           @click=${this.__dispatchClickWithThrottle}
           @mousedown=${this.__handlePress}
           @keydown=${this.__handlePress}
           @keyup=${this.__handlePress}
-          aria-describedby=${this.__disabledReasonID}
-          aria-disabled=${`${this.disabled || this.softDisabled}`}
+          
+          aria-describedby=${o(this.softDisabled ? BaseButton.DISABLED_REASON_ID : undefined)}
+          ?aria-disabled=${this.softDisabled}
+
           ?disabled=${this.disabled}
           ${spread(this.configAria)}
         >
@@ -218,16 +244,18 @@ class IconButton extends BaseButton {
         return b `<a
         class=${e(cssClasses)}
         id="button"
-        tabindex=${__classPrivateFieldGet(this, _IconButton_tabindex, "f")}
         href=${this.href}
         target=${this.target}
-        @click=${this.__dispatchClickWithThrottle}
+        tabindex=${this.disabled ? '-1' : '0'}
+        @click=${this.__dispatchClick}
         @mousedown=${this.__handlePress}
         @keydown=${this.__handlePress}
         @keyup=${this.__handlePress}
         role="button"
-        aria-describedby=${this.__disabledReasonID}
-        aria-disabled=${`${this.disabled}`}
+        
+        aria-describedby=${o(this.softDisabled ? BaseButton.DISABLED_REASON_ID : undefined)}
+        ?aria-disabled=${this.softDisabled}
+
         ${spread(this.configAria)}
       >
         ${this.renderButtonContent()}
@@ -236,7 +264,7 @@ class IconButton extends BaseButton {
     }
     renderButtonContent() {
         return b `
-      <wc-focus-ring class="focus-ring" .control=${this} .forElement=${this.buttonElement}></wc-focus-ring>
+      <wc-focus-ring class="focus-ring" for='button'></wc-focus-ring>
       <wc-elevation class="elevation"></wc-elevation>
       <div class="neo-background"></div>
       <div class="background"></div>
@@ -245,28 +273,29 @@ class IconButton extends BaseButton {
       <wc-skeleton class="skeleton"></wc-skeleton>
 
       <div class="button-content">
-        <wc-icon
-          name=${this.name}
-          src=${this.src}
-          provider=${this.provider}
-        ></wc-icon>
+        <slot></slot>
       </div>
 
-      ${this.__renderDisabledReason()}
+      ${this.__renderDisabledReason(this.softDisabled)}
     `;
     }
 }
-_IconButton_tabindex = new WeakMap();
 IconButton.styles = [css_248z$2, css_248z$3, css_248z];
 __decorate([
-    n({ type: String, reflect: true })
-], IconButton.prototype, "name", void 0);
-__decorate([
-    n({ type: String, reflect: true })
-], IconButton.prototype, "src", void 0);
+    n({ reflect: true })
+], IconButton.prototype, "size", void 0);
 __decorate([
     n({ type: String })
-], IconButton.prototype, "provider", void 0);
+], IconButton.prototype, "type", void 0);
+__decorate([
+    n()
+], IconButton.prototype, "variant", void 0);
+__decorate([
+    n({ reflect: true })
+], IconButton.prototype, "color", void 0);
+__decorate([
+    n({ reflect: true })
+], IconButton.prototype, "configAria", void 0);
 
 /**
  * @label Button Group
@@ -278,8 +307,8 @@ __decorate([
  * @example
  * ```html
  * <wc-button-group variant="connected">
- *  <wc-icon-button name="home" toggle selected></wc-icon-button>
- *  <wc-icon-button name="alarm" toggle></wc-icon-button>
+ *  <wc-icon-button toggle selected><wc-icon name="home"></wc-icon></wc-icon-button>
+ *  <wc-icon-button toggle><wc-icon name="alarm"></wc-icon></wc-icon-button>
  * </wc-button-group>
  * ```
  *
@@ -432,4 +461,4 @@ ButtonGroup = __decorate([
 ], ButtonGroup);
 
 export { ButtonGroup as B, IconButton as I };
-//# sourceMappingURL=button-group-CX9CUUXk.js.map
+//# sourceMappingURL=button-group-CEdMwvJJ.js.map