@redvars/peacock 3.5.0 → 3.6.0

package/dist/split-button.js

@@ -0,0 +1,388 @@
+import { a as i, _ as __decorate, I as IndividualComponent, i as i$1, b } from './IndividualComponent-DUINtMGK.js';
+import { n } from './property-1psGvXOq.js';
+import { r } from './state-DwbEjqVk.js';
+import { e } from './query-QBcUV-L_.js';
+import { e as e$1 } from './class-map-YU7g0o3B.js';
+import './directive-ZPhl09Yt.js';
+
+var css_248z$2 = i`@charset "UTF-8";
+* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+:host {
+  display: inline-flex;
+  position: relative;
+  --split-button-container-shape: var(--shape-corner-medium);
+  --split-button-gap: 0.125rem;
+  --split-button-icon-size: 1.125rem;
+}
+
+.split-button {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--split-button-gap);
+}
+
+.action-button {
+  --button-container-shape: var(--split-button-container-shape);
+}
+
+.dropdown-trigger {
+  --button-container-shape: var(--split-button-container-shape);
+  --button-icon-size: var(--split-button-icon-size);
+}
+
+.dropdown-icon {
+  transition: transform 200ms ease;
+}
+
+.dropdown-trigger.active .dropdown-icon {
+  transform: rotate(180deg);
+}
+
+/* ── Variant: Filled ────────────────────────────────────── */
+.split-button.variant-filled .action-button,
+.split-button.variant-filled .dropdown-trigger {
+  --filled-button-container-color: var(--filled-split-button-container-color);
+  --filled-button-label-text-color: var(--filled-split-button-label-text-color);
+}
+
+/* ── Variant: Tonal ─────────────────────────────────────── */
+.split-button.variant-tonal .action-button,
+.split-button.variant-tonal .dropdown-trigger {
+  --tonal-button-container-color: var(--tonal-split-button-container-color);
+  --tonal-button-label-text-color: var(--tonal-split-button-label-text-color);
+}
+
+/* ── Variant: Outlined ──────────────────────────────────── */
+.split-button.variant-outlined .action-button,
+.split-button.variant-outlined .dropdown-trigger {
+  --outlined-button-outline-color: var(--outlined-split-button-outline-color, var(--color-outline));
+  --outlined-button-label-text-color: var(--outlined-split-button-label-text-color);
+}
+
+:host([block]) {
+  width: 100%;
+}
+:host([block]) .split-button {
+  width: 100%;
+}
+:host([block]) .action-button {
+  flex: 1;
+}`;
+
+var css_248z$1 = i`:host([color=primary]) {
+  --filled-split-button-container-color: var(--color-primary);
+  --filled-split-button-label-text-color: var(--color-on-primary);
+  --tonal-split-button-container-color: var(--color-primary-container);
+  --tonal-split-button-label-text-color: var(--color-on-primary-container);
+  --outlined-split-button-outline-color: var(--color-primary);
+  --outlined-split-button-label-text-color: var(--color-primary);
+}
+
+:host([color=secondary]) {
+  --filled-split-button-container-color: var(--color-secondary);
+  --filled-split-button-label-text-color: var(--color-on-secondary);
+  --tonal-split-button-container-color: var(--color-secondary-container);
+  --tonal-split-button-label-text-color: var(--color-on-secondary-container);
+  --outlined-split-button-outline-color: var(--color-secondary);
+  --outlined-split-button-label-text-color: var(--color-secondary);
+}
+
+:host([color=tertiary]) {
+  --filled-split-button-container-color: var(--color-tertiary);
+  --filled-split-button-label-text-color: var(--color-on-tertiary);
+  --tonal-split-button-container-color: var(--color-tertiary-container);
+  --tonal-split-button-label-text-color: var(--color-on-tertiary-container);
+  --outlined-split-button-outline-color: var(--color-tertiary);
+  --outlined-split-button-label-text-color: var(--color-tertiary);
+}
+
+:host([color=success]) {
+  --filled-split-button-container-color: var(--color-success);
+  --filled-split-button-label-text-color: var(--color-on-success);
+  --tonal-split-button-container-color: var(--color-success-container);
+  --tonal-split-button-label-text-color: var(--color-on-success-container);
+  --outlined-split-button-outline-color: var(--color-success);
+  --outlined-split-button-label-text-color: var(--color-success);
+}
+
+:host([color=danger]) {
+  --filled-split-button-container-color: var(--color-error);
+  --filled-split-button-label-text-color: var(--color-on-error);
+  --tonal-split-button-container-color: var(--color-error-container);
+  --tonal-split-button-label-text-color: var(--color-on-error-container);
+  --outlined-split-button-outline-color: var(--color-error);
+  --outlined-split-button-label-text-color: var(--color-error);
+}
+
+:host([color=warning]) {
+  --filled-split-button-container-color: var(--color-warning);
+  --filled-split-button-label-text-color: var(--color-on-warning);
+  --tonal-split-button-container-color: var(--color-warning-container);
+  --tonal-split-button-label-text-color: var(--color-on-warning-container);
+  --outlined-split-button-outline-color: var(--color-warning);
+  --outlined-split-button-label-text-color: var(--color-warning);
+}
+
+:host([color=on-surface]) {
+  --filled-split-button-container-color: var(--color-on-surface);
+  --filled-split-button-label-text-color: var(--color-surface);
+  --tonal-split-button-container-color: var(--color-on-surface-container);
+  --tonal-split-button-label-text-color: var(--color-surface-container-high);
+  --outlined-split-button-outline-color: var(--color-on-surface);
+  --outlined-split-button-label-text-color: var(--color-on-surface);
+}
+
+:host([color=surface]) {
+  --filled-split-button-container-color: var(--color-surface-container-high);
+  --filled-split-button-label-text-color: var(--color-on-surface);
+  --tonal-split-button-container-color: var(--color-surface-container-high);
+  --tonal-split-button-label-text-color: var(--color-on-surface-container);
+  --outlined-split-button-outline-color: var(--color-on-surface);
+  --outlined-split-button-label-text-color: var(--color-on-surface);
+}`;
+
+var css_248z = i`:host([size=xs]),
+:host([size=extra-small]) {
+  --split-button-icon-size: 1rem;
+}
+
+:host([size=sm]),
+:host([size=small]) {
+  --split-button-icon-size: 1.125rem;
+}
+
+:host([size=md]),
+:host([size=medium]) {
+  --split-button-icon-size: 1.25rem;
+}
+
+:host([size=lg]),
+:host([size=large]) {
+  --split-button-icon-size: 1.5rem;
+}
+
+:host([size=xl]),
+:host([size=extra-large]) {
+  --split-button-icon-size: 2rem;
+}`;
+
+/**
+ * @label Split Button
+ * @tag wc-split-button
+ * @rawTag split-button
+ *
+ * @summary A split button lets users perform a default action or choose from a set of related actions via a dropdown menu.
+ * @overview
+ * <p>A split button combines a primary action button with a dropdown arrow that opens a menu. Following M3 Material Design, the split button provides a default action alongside a set of secondary options, reducing clutter while keeping alternative actions accessible.</p>
+ *
+ * @cssprop --split-button-container-shape: Defines the border radius of the split button container shape.
+ *
+ * @cssprop --filled-split-button-container-color: Color of the filled split button container.
+ * @cssprop --filled-split-button-label-text-color: Text color of the filled split button label.
+ *
+ * @cssprop --outlined-split-button-container-color: Color of the outlined split button container.
+ * @cssprop --outlined-split-button-label-text-color: Text color of the outlined split button label.
+ *
+ * @cssprop --tonal-split-button-container-color: Color of the tonal split button container.
+ * @cssprop --tonal-split-button-label-text-color: Text color of the tonal split button label.
+ *
+ * @fires {MouseEvent} click - Dispatched when the primary action button is clicked.
+ * @fires {CustomEvent} toggle-menu - Dispatched when the dropdown menu is opened or closed.
+ *
+ * @example
+ * ```html
+ * <wc-split-button>
+ *   Save
+ *   <wc-menu-item slot="menu">Save as draft</wc-menu-item>
+ *   <wc-menu-item slot="menu">Save and publish</wc-menu-item>
+ * </wc-split-button>
+ * ```
+ * @tags controls
+ */
+let SplitButton = class SplitButton extends i$1 {
+    constructor() {
+        super(...arguments);
+        /**
+         * Button size.
+         * Possible values are `"xs"`, `"sm"`, `"md"`, `"lg"`, `"xl"`. Defaults to `"sm"`.
+         */
+        this.size = 'sm';
+        /**
+         * The visual style of the split button.
+         *
+         * Possible variant values:
+         * `"filled"` is a filled button.
+         * `"outlined"` is an outlined button.
+         * `"tonal"` is a light color button.
+         */
+        this.variant = 'filled';
+        /**
+         * Defines the primary color of the split button.
+         */
+        this.color = 'primary';
+        /**
+         * Whether the split button is disabled.
+         */
+        this.disabled = false;
+        this._menuOpen = false;
+        this._menuId = `split-menu-${Math.random().toString(36).slice(2, 9)}`;
+        this._onMenuOpened = () => {
+            this._menuOpen = true;
+            this.dispatchEvent(new CustomEvent('toggle-menu', {
+                detail: { open: true },
+                bubbles: true,
+                composed: true,
+            }));
+        };
+        this._onMenuClosed = () => {
+            this._menuOpen = false;
+            this.dispatchEvent(new CustomEvent('toggle-menu', {
+                detail: { open: false },
+                bubbles: true,
+                composed: true,
+            }));
+        };
+        this._onKeyDown = (event) => {
+            if (this.disabled)
+                return;
+            if (event.key === 'ArrowDown' &&
+                event.target === this._dropdownButton) {
+                event.preventDefault();
+                if (!this._menuOpen) {
+                    this._menu.anchorElement = this;
+                    this._menu?.show();
+                }
+                // Focus the menu so keyboard nav works
+                requestAnimationFrame(() => this._menu?.focus());
+            }
+            if (event.key === 'Escape' && this._menuOpen) {
+                this._menu?.close();
+                this._dropdownButton?.focus();
+            }
+        };
+    }
+    focus() {
+        const btn = this.shadowRoot?.querySelector('.action-button');
+        btn?.focus();
+    }
+    _onActionClick(event) {
+        if (this.disabled) {
+            event.stopImmediatePropagation();
+            event.preventDefault();
+            return;
+        }
+        // Close menu if open
+        if (this._menuOpen) {
+            this._menu?.close();
+        }
+    }
+    _onDropdownClick(event) {
+        event.stopPropagation();
+        if (this.disabled)
+            return;
+        if (this._menuOpen) {
+            this._menu?.close();
+        }
+        else {
+            this._menu.anchorElement = this;
+            this._menu?.show();
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('keydown', this._onKeyDown);
+    }
+    disconnectedCallback() {
+        this.removeEventListener('keydown', this._onKeyDown);
+        super.disconnectedCallback();
+    }
+    render() {
+        const actionClasses = {
+            'action-button': true,
+            disabled: this.disabled,
+        };
+        const dropdownClasses = {
+            'dropdown-trigger': true,
+            active: this._menuOpen,
+            disabled: this.disabled,
+        };
+        const containerClasses = {
+            'split-button': true,
+            [`variant-${this.variant}`]: true,
+            disabled: this.disabled,
+        };
+        return b `
+      <div class=${e$1(containerClasses)}>
+        <wc-button
+          class=${e$1(actionClasses)}
+          size=${this.size}
+          variant=${this.variant}
+          ?disabled=${this.disabled}
+          @click=${this._onActionClick}
+        >
+          <slot></slot>
+        </wc-button>
+
+        <wc-icon-button
+          class=${e$1(dropdownClasses)}
+          size=${this.size}
+          variant=${this.variant}
+          ?disabled=${this.disabled}
+          .configAria=${{
+            'aria-haspopup': 'menu',
+            'aria-expanded': String(this._menuOpen),
+            'aria-controls': this._menuId,
+            'aria-label': 'Open split button menu',
+        }}
+          @click=${this._onDropdownClick}
+        >
+          <wc-icon class="dropdown-icon" name="arrow_drop_down" aria-hidden="true"></wc-icon>
+        </wc-icon-button>
+      </div>
+
+      <wc-menu
+        id=${this._menuId}
+        placement="bottom-end"
+        @opened=${this._onMenuOpened}
+        @closed=${this._onMenuClosed}
+      >
+        <slot name="menu"></slot>
+      </wc-menu>
+    `;
+    }
+};
+SplitButton.styles = [css_248z$2, css_248z$1, css_248z];
+__decorate([
+    n({ reflect: true })
+], SplitButton.prototype, "size", void 0);
+__decorate([
+    n({ reflect: true })
+], SplitButton.prototype, "variant", void 0);
+__decorate([
+    n({ reflect: true })
+], SplitButton.prototype, "color", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], SplitButton.prototype, "disabled", void 0);
+__decorate([
+    r()
+], SplitButton.prototype, "_menuOpen", void 0);
+__decorate([
+    e('.dropdown-trigger')
+], SplitButton.prototype, "_dropdownButton", void 0);
+__decorate([
+    e('wc-menu')
+], SplitButton.prototype, "_menu", void 0);
+SplitButton = __decorate([
+    IndividualComponent
+], SplitButton);
+
+export { SplitButton };
+//# sourceMappingURL=split-button.js.map

package/dist/split-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-button.js","sources":["../../src/split-button/split-button.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './split-button.scss';\nimport colorStyles from './split-button-colors.scss';\nimport sizeStyles from './split-button-sizes.scss';\n\n/**\n * @label Split Button\n * @tag wc-split-button\n * @rawTag split-button\n *\n * @summary A split button lets users perform a default action or choose from a set of related actions via a dropdown menu.\n * @overview\n * <p>A split button combines a primary action button with a dropdown arrow that opens a menu. Following M3 Material Design, the split button provides a default action alongside a set of secondary options, reducing clutter while keeping alternative actions accessible.</p>\n *\n * @cssprop --split-button-container-shape: Defines the border radius of the split button container shape.\n *\n * @cssprop --filled-split-button-container-color: Color of the filled split button container.\n * @cssprop --filled-split-button-label-text-color: Text color of the filled split button label.\n *\n * @cssprop --outlined-split-button-container-color: Color of the outlined split button container.\n * @cssprop --outlined-split-button-label-text-color: Text color of the outlined split button label.\n *\n * @cssprop --tonal-split-button-container-color: Color of the tonal split button container.\n * @cssprop --tonal-split-button-label-text-color: Text color of the tonal split button label.\n *\n * @fires {MouseEvent} click - Dispatched when the primary action button is clicked.\n * @fires {CustomEvent} toggle-menu - Dispatched when the dropdown menu is opened or closed.\n *\n * @example\n * ```html\n * <wc-split-button>\n *   Save\n *   <wc-menu-item slot=\"menu\">Save as draft</wc-menu-item>\n *   <wc-menu-item slot=\"menu\">Save and publish</wc-menu-item>\n * </wc-split-button>\n * ```\n * @tags controls\n */\n@IndividualComponent\nexport class SplitButton extends LitElement {\n  static override styles = [styles, colorStyles, sizeStyles];\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   * The visual style of the split button.\n   *\n   * Possible variant values:\n   * `\"filled\"` is a filled button.\n   * `\"outlined\"` is an outlined button.\n   * `\"tonal\"` is a light color button.\n   */\n  @property({ reflect: true }) variant: 'filled' | 'tonal' | 'outlined' =\n    'filled';\n\n  /**\n   * Defines the primary color of the split button.\n   */\n  @property({ reflect: true }) color:\n    | 'primary'\n    | 'secondary'\n    | 'tertiary'\n    | 'success'\n    | 'danger'\n    | 'warning'\n    | 'surface'\n    | 'on-surface' = 'primary';\n\n  /**\n   * Whether the split button is disabled.\n   */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  @state() private _menuOpen = false;\n\n  @query('.dropdown-trigger') private readonly _dropdownButton!: HTMLElement;\n\n  @query('wc-menu') private readonly _menu!: HTMLElement & {\n    open: boolean;\n    anchorElement: HTMLElement | null;\n    show: () => void;\n    close: () => void;\n  };\n\n  private _menuId = `split-menu-${Math.random().toString(36).slice(2, 9)}`;\n\n  override focus() {\n    const btn =\n      this.shadowRoot?.querySelector<HTMLElement>('.action-button');\n    btn?.focus();\n  }\n\n  private _onActionClick(event: MouseEvent) {\n    if (this.disabled) {\n      event.stopImmediatePropagation();\n      event.preventDefault();\n      return;\n    }\n\n    // Close menu if open\n    if (this._menuOpen) {\n      this._menu?.close();\n    }\n  }\n\n  private _onDropdownClick(event: MouseEvent) {\n    event.stopPropagation();\n    if (this.disabled) return;\n\n    if (this._menuOpen) {\n      this._menu?.close();\n    } else {\n      this._menu.anchorElement = this;\n      this._menu?.show();\n    }\n  }\n\n  private _onMenuOpened = () => {\n    this._menuOpen = true;\n    this.dispatchEvent(\n      new CustomEvent('toggle-menu', {\n        detail: { open: true },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  };\n\n  private _onMenuClosed = () => {\n    this._menuOpen = false;\n    this.dispatchEvent(\n      new CustomEvent('toggle-menu', {\n        detail: { open: false },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  };\n\n  private _onKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled) return;\n\n    if (\n      event.key === 'ArrowDown' &&\n      event.target === this._dropdownButton\n    ) {\n      event.preventDefault();\n      if (!this._menuOpen) {\n        this._menu.anchorElement = this;\n        this._menu?.show();\n      }\n      // Focus the menu so keyboard nav works\n      requestAnimationFrame(() => this._menu?.focus());\n    }\n\n    if (event.key === 'Escape' && this._menuOpen) {\n      this._menu?.close();\n      this._dropdownButton?.focus();\n    }\n  };\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('keydown', this._onKeyDown);\n  }\n\n  override disconnectedCallback() {\n    this.removeEventListener('keydown', this._onKeyDown);\n    super.disconnectedCallback();\n  }\n\n  override render() {\n    const actionClasses = {\n      'action-button': true,\n      disabled: this.disabled,\n    };\n\n    const dropdownClasses = {\n      'dropdown-trigger': true,\n      active: this._menuOpen,\n      disabled: this.disabled,\n    };\n\n    const containerClasses = {\n      'split-button': true,\n      [`variant-${this.variant}`]: true,\n      disabled: this.disabled,\n    };\n\n    return html`\n      <div class=${classMap(containerClasses)}>\n        <wc-button\n          class=${classMap(actionClasses)}\n          size=${this.size}\n          variant=${this.variant}\n          ?disabled=${this.disabled}\n          @click=${this._onActionClick}\n        >\n          <slot></slot>\n        </wc-button>\n\n        <wc-icon-button\n          class=${classMap(dropdownClasses)}\n          size=${this.size}\n          variant=${this.variant}\n          ?disabled=${this.disabled}\n          .configAria=${{\n            'aria-haspopup': 'menu',\n            'aria-expanded': String(this._menuOpen),\n            'aria-controls': this._menuId,\n            'aria-label': 'Open split button menu',\n          }}\n          @click=${this._onDropdownClick}\n        >\n          <wc-icon class=\"dropdown-icon\" name=\"arrow_drop_down\" aria-hidden=\"true\"></wc-icon>\n        </wc-icon-button>\n      </div>\n\n      <wc-menu\n        id=${this._menuId}\n        placement=\"bottom-end\"\n        @opened=${this._onMenuOpened}\n        @closed=${this._onMenuClosed}\n      >\n        <slot name=\"menu\"></slot>\n      </wc-menu>\n    `;\n  }\n}\n"],"names":["LitElement","html","classMap","styles","colorStyles","sizeStyles","property","state","query"],"mappings":"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"}

package/dist/src/__controllers/floating-controller.d.ts

@@ -0,0 +1,35 @@
+import { Placement, Strategy } from '@floating-ui/dom';
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+export type TriggerType = 'hover' | 'click' | 'context-menu' | 'manual' | 'focus' | 'hover-focus';
+export interface FloatingOptions {
+    placement?: Placement;
+    strategy?: Strategy;
+    offset?: number;
+    trigger?: TriggerType;
+    closeOnClickOutside?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+}
+export declare class FloatingController implements ReactiveController {
+    private host;
+    private reference;
+    private floating;
+    private arrowElement;
+    private cleanup;
+    private options;
+    private isHostConnected;
+    isOpen: boolean;
+    constructor(host: ReactiveControllerHost, options?: FloatingOptions);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    setElements(reference: HTMLElement, floating: HTMLElement, arrowElement?: HTMLElement): void;
+    setOptions(options: Partial<FloatingOptions>): void;
+    private setupEventListeners;
+    private removeEventListeners;
+    private toggle;
+    private handleContextMenu;
+    private handleFocusOut;
+    private handleOutsideClick;
+    open: () => void;
+    close: () => void;
+    private updatePosition;
+}

package/dist/src/__mixins/BaseButtonMixin.d.ts

@@ -0,0 +1,20 @@
+import { LitElement } from 'lit';
+import type { MixinConstructor } from './MixinConstructor.js';
+/**
+ * 1. Define an interface for the members the mixin adds.
+ * This makes the type annotation much cleaner.
+ */
+export interface BaseButtonInterface {
+    htmlType: 'button' | 'submit' | 'reset';
+    disabled: boolean;
+    softDisabled: boolean;
+    disabledReason: string;
+    form: string;
+    name: string;
+    value: string;
+}
+/**
+ * 2. Apply the type annotation to the variable.
+ */
+declare const BaseButtonMixin: <T extends MixinConstructor<LitElement>>(superclass: T) => T & MixinConstructor<BaseButtonInterface>;
+export default BaseButtonMixin;

package/dist/src/__mixins/BaseHyperlinkMixin.d.ts

@@ -0,0 +1,18 @@
+import { LitElement } from 'lit';
+import type { MixinConstructor } from './MixinConstructor.js';
+/**
+ * 1. Define an interface for the members the mixin adds.
+ * This makes the type annotation much cleaner.
+ */
+export interface BaseHyperlinkInterface {
+    href?: string;
+    target: '_self' | '_parent' | '_blank' | '_top' | string;
+    rel?: string;
+    download?: string;
+    __isLink(): boolean;
+}
+/**
+ * 2. Apply the type annotation to the variable.
+ */
+declare const BaseHyperlinkMixin: <T extends MixinConstructor<LitElement>>(superclass: T) => T & MixinConstructor<BaseHyperlinkInterface>;
+export default BaseHyperlinkMixin;

package/dist/src/__mixins/MixinConstructor.d.ts

@@ -0,0 +1 @@
+export type MixinConstructor<T = {}> = new (...args: any[]) => T;

package/dist/src/banner/banner.d.ts

@@ -36,10 +36,6 @@ export declare class Banner extends LitElement {
      * Optional description text when a default slot is not provided.
      */
     description: string;
-    /**
-     * When true, label and description are rendered on a single line.
-     */
-    inline: boolean;
     private get resolvedLabel();
     private get resolvedIcon();
     render(): import("lit-html").TemplateResult<1>;

package/dist/src/button/BaseButton.d.ts

@@ -1,49 +1,10 @@
 import { LitElement, nothing } from 'lit';
-declare const BaseButton_base: typeof LitElement & (new (...args: any[]) => import("@/__base_element/BaseHyperlink.js").BaseHyperlinkInterface);
+declare const BaseButton_base: typeof LitElement & import("../__mixins/MixinConstructor.js").MixinConstructor<import("@/__mixins/BaseHyperlinkMixin.js").BaseHyperlinkInterface> & import("../__mixins/MixinConstructor.js").MixinConstructor<import("@/__mixins/BaseButtonMixin.js").BaseButtonInterface>;
 export declare class BaseButton extends BaseButton_base {
     protected static readonly DISABLED_REASON_ID = "disabled-reason";
-    htmlType: 'button' | 'submit' | 'reset';
-    /**
-     * Type is preset of color and variant. Type will be only applied.
-     *
-     */
-    type?: 'primary' | 'secondary' | 'tertiary';
-    /**
-     * 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
-     */
-    variant: 'elevated' | 'filled' | 'tonal' | 'outlined' | 'text' | 'neo';
-    /**
-     * Defines the primary color of the button. This can be set to predefined color names to apply specific color themes.
-     */
-    color: 'primary' | 'success' | 'danger' | 'warning' | 'surface' | 'on-surface';
-    /**
-     * Button size.
-     * Possible values are `"sm"`, `"md"`, `"lg"`. Defaults to `"md"`.
-     */
-    size: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    /**
-     * If true, the user cannot interact with the button. Defaults to `false`.
-     */
-    disabled: boolean;
+    color?: string;
+    variant?: string;
     skeleton: boolean;
-    /**
-     * 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`.
-     */
-    softDisabled: boolean;
-    /**
-     * If button is disabled, the reason why it is disabled.
-     */
-    disabledReason: string;
-    configAria?: {
-        [key: string]: any;
-    };
     toggle: boolean;
     selected: boolean;
     /**
@@ -56,16 +17,12 @@ export declare class BaseButton extends BaseButton_base {
      */
     isPressed: boolean;
     readonly buttonElement: HTMLElement | null;
-    focus(): void;
-    blur(): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
     __handlePress: (event: KeyboardEvent | MouseEvent) => void;
     __dispatchClickWithThrottle: (event: MouseEvent | KeyboardEvent) => void;
     __dispatchClick: (event: MouseEvent | KeyboardEvent) => void;
-    __convertTypeToVariantAndColor(): void;
-    protected get __disabledReasonID(): string | undefined;
-    __renderDisabledReason(): typeof nothing | import("lit-html").TemplateResult<1>;
+    __renderDisabledReason(softDisabled: boolean): typeof nothing | import("lit-html").TemplateResult<1>;
     __renderTooltip(): typeof nothing | import("lit-html").TemplateResult<1>;
 }
 export {};

package/dist/src/button/button/button.d.ts

@@ -42,19 +42,48 @@ import { BaseButton } from '../BaseButton.js';
  * @tags display
  */
 export declare class Button extends BaseButton {
-    #private;
     static styles: import("lit").CSSResultGroup[];
     /**
      * Icon alignment.
      * Possible values are `"start"`, `"end"`. Defaults to `"end"`.
      */
     iconAlign: 'start' | 'end';
+    /**
+     * Button size.
+     * Possible values are `"xs"`, `"sm"`, `"md"`, `"lg"`, `"xl"`. Defaults to `"sm"`.
+     */
+    size: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /**
+       * Type is preset of color and variant. Type will be only applied.
+       *
+       */
+    type?: 'primary' | 'secondary' | 'tertiary';
+    /**
+     * 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
+     */
+    variant: 'elevated' | 'filled' | 'tonal' | 'outlined' | 'text' | 'neo';
+    /**
+     * Defines the primary color of the button. This can be set to predefined color names to apply specific color themes.
+     */
+    color: 'primary' | 'success' | 'danger' | 'warning' | 'surface' | 'on-surface';
+    /**
+     * Additional ARIA attributes to pass to the inner button/anchor element.
+     */
+    configAria?: {
+        [key: string]: any;
+    };
     private slotHasContent;
     focus(): void;
     blur(): void;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
     firstUpdated(): void;
+    __convertTypeToVariantAndColor(): void;
     render(): import("lit-html").TemplateResult<1>;
     renderButtonContent(): import("lit-html").TemplateResult<1>;
 }

package/dist/src/button/button-group/button-group.d.ts

@@ -11,8 +11,8 @@ import { IconButton } from '../icon-button/icon-button.js';
  * @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>
  * ```
  *