@redvars/peacock 3.5.0 → 3.6.0

package/dist/button-group-CX9CUUXk.js

@@ -1,435 +0,0 @@
-import { a as i, _ as __decorate, c as __classPrivateFieldGet, 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';
-
-var css_248z$1 = i`* {
-  box-sizing: border-box;
-}
-
-.screen-reader-only {
-  display: none !important;
-}
-
-.button-group {
-  display: flex;
-  gap: var(--_button-group-gap);
-}
-
-.button-group.size-xs,
-.button-group.size-extra-small {
-  --_button-group-gap: 0.125rem;
-}
-
-.button-group.size-sm,
-.button-group.size-small {
-  --_button-group-gap: 0.125rem;
-  --button-container-padding: 1.5rem;
-}
-
-.button-group.size-md,
-.button-group.size-medium {
-  --_button-group-gap: 0.125rem;
-}
-
-.button-group.size-lg,
-.button-group.size-large {
-  --_button-group-gap: 0.125rem;
-}
-
-.button-group.size-xl {
-  --_button-group-gap: 0.125rem;
-}
-
-.button-group.variant-standard {
-  --_button-group-gap: 0.5rem;
-}
-
-.button-group.variant-connected {
-  --_button-group-gap: 0.125rem;
-}
-
-.button-group.orientation-horizontal {
-  flex-direction: row;
-}
-
-.button-group.orientation-vertical {
-  flex-direction: column;
-}`;
-
-var css_248z = i`.button {
-  --_container-padding: 0.75rem;
-  width: var(--button-height);
-  --_container-padding: 0;
-}
-
-:host([size=xs]),
-:host([size=extra-small]) {
-  --button-height: 2rem;
-}
-
-:host([size=xs]) .button,
-:host([size=extra-small]) .button {
-  --_button-icon-size: 1rem;
-}
-
-:host([size=sm]),
-:host([size=small]) {
-  --button-height: 2.5rem;
-}
-
-:host([size=sm]) .button,
-:host([size=small]) .button {
-  --_button-icon-size: 1.25rem;
-  --_button-icon-label-spacing: 0.5rem;
-}
-
-:host([size=md]),
-:host([size=medium]) {
-  --button-height: 3.5rem;
-}
-
-:host([size=md]) .button,
-:host([size=medium]) .button {
-  --_button-icon-size: 1.5rem;
-}
-
-:host([size=lg]),
-:host([size=large]) {
-  --button-height: 6rem;
-}
-
-:host([size=lg]) .button,
-:host([size=large]) .button {
-  --_button-icon-size: 2rem;
-}
-
-:host([size=xl]) {
-  --button-height: 8.5rem;
-}
-
-:host([size=xl]) .button {
-  --_button-icon-size: 2.5rem;
-}`;
-
-var _IconButton_tabindex;
-/**
- * @label Icon Button
- * @tag wc-icon-button
- * @rawTag icon-button
- *
- * @summary Icon buttons allow users to take actions, and make choices, with a single tap.
- *
- * @overview
- * <p>Icon 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. IconButton labels express what action will occur when the user interacts with it.</p>
- *
- * @cssprop --button-container-shape: Defines the border radius of the button container shape.
- *
- * @cssprop --button-container-shape-start-start: Defines the start position of the button container shape.
- * @cssprop --button-container-shape-start-end: Defines the end position of the button container shape.
- * @cssprop --button-container-shape-end-start: Defines the start position of the button container shape.
- * @cssprop --button-container-shape-end-end: Defines the end position of the button container shape.
- *
- *
- * @cssprop --filled-button-container-color: Color of the filled button container.
- * @cssprop --filled-button-label-text-color: Text color of the filled button label.
- *
- * @cssprop --outlined-button-container-color: Color of the outlined button container.
- * @cssprop --outlined-button-label-text-color: Text color of the outlined button label.
- *
- * @cssprop --text-button-label-text-color: Text color of the text button label.
- *
- * @cssprop --tonal-button-container-color: Color of the tonal button container.
- * @cssprop --tonal-button-label-text-color: Text color of the tonal button label.
- *
- * @cssprop --elevated-button-container-color: Color of the elevated button container.
- * @cssprop --elevated-button-label-text-color: Text color of the elevated button label.
- *
- * @cssprop --neo-button-container-color: Color of the neo button container.
- * @cssprop --neo-button-label-text-color: Text color of the neo button label.
- *
- * @fires {CustomEvent} button:click - Dispatched when the button is clicked.
- *
- * @example
- * ```html
- * <wc-icon-button name="home"></wc-icon-button>
- * ```
- * @tags display
- */
-class IconButton extends BaseButton {
-    constructor() {
-        super(...arguments);
-        _IconButton_tabindex.set(this, 0);
-        this.provider = 'material-symbols';
-    }
-    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();
-    }
-    firstUpdated() {
-        this.__dispatchClickWithThrottle = throttle(this.__dispatchClick, this.throttleDelay);
-        this.__convertTypeToVariantAndColor();
-    }
-    render() {
-        const isLink = this.__isLink();
-        const cssClasses = {
-            button: true,
-            'button-element': true,
-            [`size-${this.size}`]: true,
-            [`variant-${this.variant}`]: true,
-            [`color-${this.color}`]: true,
-            disabled: this.disabled || this.softDisabled,
-            pressed: this.isPressed,
-            skeleton: this.skeleton,
-        };
-        if (!isLink) {
-            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}`}
-          ?disabled=${this.disabled}
-          ${spread(this.configAria)}
-        >
-          ${this.renderButtonContent()}
-        </button>
-        ${this.__renderTooltip()}`;
-        }
-        return b `<a
-        class=${e(cssClasses)}
-        id="button"
-        tabindex=${__classPrivateFieldGet(this, _IconButton_tabindex, "f")}
-        href=${this.href}
-        target=${this.target}
-        @click=${this.__dispatchClickWithThrottle}
-        @mousedown=${this.__handlePress}
-        @keydown=${this.__handlePress}
-        @keyup=${this.__handlePress}
-        role="button"
-        aria-describedby=${this.__disabledReasonID}
-        aria-disabled=${`${this.disabled}`}
-        ${spread(this.configAria)}
-      >
-        ${this.renderButtonContent()}
-      </a>
-      ${this.__renderTooltip()}`;
-    }
-    renderButtonContent() {
-        return b `
-      <wc-focus-ring class="focus-ring" .control=${this} .forElement=${this.buttonElement}></wc-focus-ring>
-      <wc-elevation class="elevation"></wc-elevation>
-      <div class="neo-background"></div>
-      <div class="background"></div>
-      <div class="outline"></div>
-      <wc-ripple class="ripple"></wc-ripple>
-      <wc-skeleton class="skeleton"></wc-skeleton>
-
-      <div class="button-content">
-        <wc-icon
-          name=${this.name}
-          src=${this.src}
-          provider=${this.provider}
-        ></wc-icon>
-      </div>
-
-      ${this.__renderDisabledReason()}
-    `;
-    }
-}
-_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);
-__decorate([
-    n({ type: String })
-], IconButton.prototype, "provider", void 0);
-
-/**
- * @label Button Group
- * @tag wc-button-group
- * @rawTag button-group
- *
- * @summary Group a series of buttons together on a single line with the button group, and super-power.
-
- * @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-button-group>
- * ```
- *
- * @tags controls
- */
-let ButtonGroup = class ButtonGroup extends i$1 {
-    constructor() {
-        super(...arguments);
-        /**
-         * Button size.
-         * Possible values are `"sm"`, `"md"`, `"lg"`. Defaults to `"md"`.
-         */
-        this.size = 'sm';
-        /**
-         * Layout variant of the button group.
-         * `"standard"` shows buttons with a small gap between them.
-         * `"connected"` places buttons with a 2px gap; in horizontal orientation outer buttons have fully
-         * rounded outer corners and middle buttons keep standard rounded corners. In vertical orientation
-         * all buttons keep their default corner shape.
-         * Defaults to `"standard"`.
-         */
-        this.variant = 'standard';
-        /**
-         * Orientation of the button group.
-         * `"horizontal"` lays buttons out in a row.
-         * `"vertical"` stacks buttons in a column.
-         * Defaults to `"horizontal"`.
-         */
-        this.orientation = 'horizontal';
-    }
-    updated() {
-        this._syncChildren();
-    }
-    _getSlottedElements() {
-        const slot = this.shadowRoot?.querySelector('slot');
-        return (slot?.assignedElements({ flatten: true }) ?? []);
-    }
-    _syncChildren() {
-        const children = this._getSlottedElements();
-        const isVertical = this.orientation === 'vertical';
-        children.forEach((child, index) => {
-            const isFirst = index === 0;
-            const isLast = index === children.length - 1;
-            const isOnly = children.length === 1;
-            if (this.color && 'color' in child) {
-                child.color = this.color;
-            }
-            if (this.buttonVariant && 'variant' in child) {
-                child.variant = this.buttonVariant;
-            }
-            if (this.variant === 'connected') {
-                child.style.setProperty('--button-container-shape-variant', 'round');
-                if (isOnly) {
-                    child.style.setProperty('--button-container-shape', 'var(--shape-corner-full)');
-                    child.style.removeProperty('--button-container-shape-start-start');
-                    child.style.removeProperty('--button-container-shape-end-start');
-                    child.style.removeProperty('--button-container-shape-start-end');
-                    child.style.removeProperty('--button-container-shape-end-end');
-                }
-                else if (isFirst) {
-                    child.style.removeProperty('--button-container-shape');
-                    if (isVertical) {
-                        // Top button in vertical group: leave default corner shape
-                        child.style.removeProperty('--button-container-shape-start-start');
-                        child.style.removeProperty('--button-container-shape-start-end');
-                        child.style.removeProperty('--button-container-shape-end-start');
-                        child.style.removeProperty('--button-container-shape-end-end');
-                    }
-                    else {
-                        // Left button in horizontal group: round left corners, standard right corners
-                        child.style.setProperty('--button-container-shape-start-start', 'calc(var(--button-height) / 2)');
-                        child.style.setProperty('--button-container-shape-end-start', 'calc(var(--button-height) / 2)');
-                        child.style.setProperty('--button-container-shape-start-end', 'var(--shape-corner-medium)');
-                        child.style.setProperty('--button-container-shape-end-end', 'var(--shape-corner-medium)');
-                    }
-                }
-                else if (isLast) {
-                    child.style.removeProperty('--button-container-shape');
-                    if (isVertical) {
-                        // Bottom button in vertical group: leave default corner shape
-                        child.style.removeProperty('--button-container-shape-start-start');
-                        child.style.removeProperty('--button-container-shape-start-end');
-                        child.style.removeProperty('--button-container-shape-end-start');
-                        child.style.removeProperty('--button-container-shape-end-end');
-                    }
-                    else {
-                        // Right button in horizontal group: standard left corners, round right corners
-                        child.style.setProperty('--button-container-shape-start-start', 'var(--shape-corner-medium)');
-                        child.style.setProperty('--button-container-shape-end-start', 'var(--shape-corner-medium)');
-                        child.style.setProperty('--button-container-shape-start-end', 'calc(var(--button-height) / 2)');
-                        child.style.setProperty('--button-container-shape-end-end', 'calc(var(--button-height) / 2)');
-                    }
-                }
-                else {
-                    // Middle buttons: standard rounded corners on all sides
-                    child.style.setProperty('--button-container-shape', 'var(--shape-corner-medium)');
-                    child.style.removeProperty('--button-container-shape-start-start');
-                    child.style.removeProperty('--button-container-shape-end-start');
-                    child.style.removeProperty('--button-container-shape-start-end');
-                    child.style.removeProperty('--button-container-shape-end-end');
-                }
-            }
-            else {
-                child.style.removeProperty('--button-container-shape');
-                child.style.removeProperty('--button-container-shape-start-start');
-                child.style.removeProperty('--button-container-shape-end-start');
-                child.style.removeProperty('--button-container-shape-start-end');
-                child.style.removeProperty('--button-container-shape-end-end');
-                child.style.removeProperty('--button-container-shape-variant');
-            }
-        });
-    }
-    render() {
-        const cssClasses = {
-            'button-group': true,
-            [`size-${this.size}`]: true,
-            [`variant-${this.variant}`]: true,
-            [`orientation-${this.orientation}`]: true,
-        };
-        return b `
-      <div class=${e(cssClasses)}>
-        <slot @slotchange=${() => this._syncChildren()}></slot>
-      </div>
-    `;
-    }
-};
-// Lit prefers CSS-in-JS for better performance and scoping.
-// If you prefer keeping the SCSS file, you'll need a build tool (like Vite or Webpack)
-// that can import .scss files as lit-css.
-ButtonGroup.styles = [css_248z$1];
-ButtonGroup.Button = Button;
-ButtonGroup.IconButton = IconButton;
-__decorate([
-    n()
-], ButtonGroup.prototype, "size", void 0);
-__decorate([
-    n({ reflect: true })
-], ButtonGroup.prototype, "variant", void 0);
-__decorate([
-    n({ reflect: true })
-], ButtonGroup.prototype, "orientation", void 0);
-__decorate([
-    n({ reflect: true })
-], ButtonGroup.prototype, "color", void 0);
-__decorate([
-    n({ attribute: 'button-variant', reflect: true })
-], ButtonGroup.prototype, "buttonVariant", void 0);
-ButtonGroup = __decorate([
-    IndividualComponent
-], ButtonGroup);
-
-export { ButtonGroup as B, IconButton as I };
-//# sourceMappingURL=button-group-CX9CUUXk.js.map

package/dist/button-group-CX9CUUXk.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"button-group-CX9CUUXk.js","sources":["../../src/button/icon-button/icon-button.ts","../../src/button/button-group/button-group.ts"],"sourcesContent":["import { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport styles from '../button/button.scss';\nimport colorStyles from '../button/button-colors.scss';\nimport sizeStyles from './icon-button-sizes.scss';\nimport { spread } from '@/__directive/spread.js';\nimport { throttle } from '@/__utils/throttle.js';\nimport { BaseButton } from '../BaseButton.js';\nimport { IconProvider } from '../../icon/icon.js';\n\n/**\n * @label Icon Button\n * @tag wc-icon-button\n * @rawTag icon-button\n *\n * @summary Icon buttons allow users to take actions, and make choices, with a single tap.\n *\n * @overview\n * <p>Icon 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. IconButton 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 {CustomEvent} button:click - Dispatched when the button is clicked.\n *\n * @example\n * ```html\n * <wc-icon-button name=\"home\"></wc-icon-button>\n * ```\n * @tags display\n */\nexport class IconButton extends BaseButton {\n  static override styles = [styles, colorStyles, sizeStyles];\n\n  #tabindex?: number = 0;\n\n  @property({ type: String, reflect: true }) name?: string;\n\n  @property({ type: String, reflect: true }) src?: string;\n\n  @property({ type: String }) provider: IconProvider = 'material-symbols';\n\n  override focus() {\n    this.buttonElement?.focus();\n  }\n\n  override blur() {\n    this.buttonElement?.blur();\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('click', this.__dispatchClickWithThrottle);\n    window.addEventListener('mouseup', this.__handlePress);\n  }\n\n  override disconnectedCallback() {\n    window.removeEventListener('mouseup', this.__handlePress);\n    this.removeEventListener('click', this.__dispatchClickWithThrottle);\n    super.disconnectedCallback();\n  }\n  \n  override firstUpdated() {\n    this.__dispatchClickWithThrottle = throttle(\n      this.__dispatchClick,\n      this.throttleDelay,\n    );\n    this.__convertTypeToVariantAndColor();\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      skeleton: this.skeleton,\n    };\n\n    if (!isLink) {\n      return html`<button\n          class=${classMap(cssClasses)}\n          id=\"button\"\n          tabindex=${this.#tabindex}\n          type=${this.htmlType}\n          @click=${this.__dispatchClickWithThrottle}\n          @mousedown=${this.__handlePress}\n          @keydown=${this.__handlePress}\n          @keyup=${this.__handlePress}\n          aria-describedby=${this.__disabledReasonID}\n          aria-disabled=${`${this.disabled || this.softDisabled}`}\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        tabindex=${this.#tabindex}\n        href=${this.href}\n        target=${this.target}\n        @click=${this.__dispatchClickWithThrottle}\n        @mousedown=${this.__handlePress}\n        @keydown=${this.__handlePress}\n        @keyup=${this.__handlePress}\n        role=\"button\"\n        aria-describedby=${this.__disabledReasonID}\n        aria-disabled=${`${this.disabled}`}\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\" .control=${this} .forElement=${this.buttonElement}></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        <wc-icon\n          name=${this.name}\n          src=${this.src}\n          provider=${this.provider}\n        ></wc-icon>\n      </div>\n\n      ${this.__renderDisabledReason()}\n    `;\n  }\n}\n","import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './button-group.scss';\nimport { Button } from '../button/button.js';\nimport { IconButton } from '../icon-button/icon-button.js';\nimport { BaseButton } from '../BaseButton.js';\n\n/**\n * @label Button Group\n * @tag wc-button-group\n * @rawTag button-group\n *\n * @summary Group a series of buttons together on a single line with the button group, and super-power.\n\n * @example\n * ```html\n * <wc-button-group variant=\"connected\">\n *  <wc-icon-button name=\"home\" toggle selected></wc-icon-button>\n *  <wc-icon-button name=\"alarm\" toggle></wc-icon-button>\n * </wc-button-group>\n * ```\n *\n * @tags controls\n */\n@IndividualComponent\nexport class ButtonGroup extends LitElement {\n  // Lit prefers CSS-in-JS for better performance and scoping.\n  // If you prefer keeping the SCSS file, you'll need a build tool (like Vite or Webpack)\n  // that can import .scss files as lit-css.\n  static styles = [styles];\n\n  static Button = Button;\n\n  static IconButton = IconButton;\n\n  /**\n   * Button size.\n   * Possible values are `\"sm\"`, `\"md\"`, `\"lg\"`. Defaults to `\"md\"`.\n   */\n  @property() size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'sm';\n\n  /**\n   * Layout variant of the button group.\n   * `\"standard\"` shows buttons with a small gap between them.\n   * `\"connected\"` places buttons with a 2px gap; in horizontal orientation outer buttons have fully\n   * rounded outer corners and middle buttons keep standard rounded corners. In vertical orientation\n   * all buttons keep their default corner shape.\n   * Defaults to `\"standard\"`.\n   */\n  @property({ reflect: true }) variant: 'standard' | 'connected' = 'standard';\n\n  /**\n   * Orientation of the button group.\n   * `\"horizontal\"` lays buttons out in a row.\n   * `\"vertical\"` stacks buttons in a column.\n   * Defaults to `\"horizontal\"`.\n   */\n  @property({ reflect: true }) orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  /**\n   * Color applied to all buttons in the group.\n   * Possible values are `\"primary\"`, `\"success\"`, `\"danger\"`, `\"warning\"`, `\"surface\"`, `\"on-surface\"`.\n   */\n  @property({ reflect: true }) color?: 'primary' | 'success' | 'danger' | 'warning' | 'surface' | 'on-surface';\n\n  /**\n   * Visual style applied to all buttons in the group.\n   * Possible values are `\"filled\"`, `\"tonal\"`, `\"outlined\"`.\n   */\n  @property({ attribute: 'button-variant', reflect: true }) buttonVariant?: 'filled' | 'tonal' | 'outlined';\n\n  override updated() {\n    this._syncChildren();\n  }\n\n  private _getSlottedElements(): HTMLElement[] {\n    const slot = this.shadowRoot?.querySelector('slot');\n    return (slot?.assignedElements({ flatten: true }) ?? []) as HTMLElement[];\n  }\n\n  private _syncChildren() {\n    const children = this._getSlottedElements();\n    const isVertical = this.orientation === 'vertical';\n\n    children.forEach((child, index) => {\n      const isFirst = index === 0;\n      const isLast = index === children.length - 1;\n      const isOnly = children.length === 1;\n\n      if (this.color && 'color' in child) {\n        (child as BaseButton).color = this.color;\n      }\n\n      if (this.buttonVariant && 'variant' in child) {\n        (child as BaseButton).variant = this.buttonVariant;\n      }\n\n      if (this.variant === 'connected') {\n        child.style.setProperty('--button-container-shape-variant', 'round');\n\n        if (isOnly) {\n          child.style.setProperty('--button-container-shape', 'var(--shape-corner-full)');\n          child.style.removeProperty('--button-container-shape-start-start');\n          child.style.removeProperty('--button-container-shape-end-start');\n          child.style.removeProperty('--button-container-shape-start-end');\n          child.style.removeProperty('--button-container-shape-end-end');\n        } else if (isFirst) {\n          child.style.removeProperty('--button-container-shape');\n          if (isVertical) {\n            // Top button in vertical group: leave default corner shape\n            child.style.removeProperty('--button-container-shape-start-start');\n            child.style.removeProperty('--button-container-shape-start-end');\n            child.style.removeProperty('--button-container-shape-end-start');\n            child.style.removeProperty('--button-container-shape-end-end');\n          } else {\n            // Left button in horizontal group: round left corners, standard right corners\n            child.style.setProperty('--button-container-shape-start-start', 'calc(var(--button-height) / 2)');\n            child.style.setProperty('--button-container-shape-end-start', 'calc(var(--button-height) / 2)');\n            child.style.setProperty('--button-container-shape-start-end', 'var(--shape-corner-medium)');\n            child.style.setProperty('--button-container-shape-end-end', 'var(--shape-corner-medium)');\n          }\n        } else if (isLast) {\n          child.style.removeProperty('--button-container-shape');\n          if (isVertical) {\n            // Bottom button in vertical group: leave default corner shape\n            child.style.removeProperty('--button-container-shape-start-start');\n            child.style.removeProperty('--button-container-shape-start-end');\n            child.style.removeProperty('--button-container-shape-end-start');\n            child.style.removeProperty('--button-container-shape-end-end');\n          } else {\n            // Right button in horizontal group: standard left corners, round right corners\n            child.style.setProperty('--button-container-shape-start-start', 'var(--shape-corner-medium)');\n            child.style.setProperty('--button-container-shape-end-start', 'var(--shape-corner-medium)');\n            child.style.setProperty('--button-container-shape-start-end', 'calc(var(--button-height) / 2)');\n            child.style.setProperty('--button-container-shape-end-end', 'calc(var(--button-height) / 2)');\n          }\n        } else {\n          // Middle buttons: standard rounded corners on all sides\n          child.style.setProperty('--button-container-shape', 'var(--shape-corner-medium)');\n          child.style.removeProperty('--button-container-shape-start-start');\n          child.style.removeProperty('--button-container-shape-end-start');\n          child.style.removeProperty('--button-container-shape-start-end');\n          child.style.removeProperty('--button-container-shape-end-end');\n        }\n      } else {\n        child.style.removeProperty('--button-container-shape');\n        child.style.removeProperty('--button-container-shape-start-start');\n        child.style.removeProperty('--button-container-shape-end-start');\n        child.style.removeProperty('--button-container-shape-start-end');\n        child.style.removeProperty('--button-container-shape-end-end');\n        child.style.removeProperty('--button-container-shape-variant');\n      }\n    });\n  }\n\n  render() {\n    const cssClasses = {\n      'button-group': true,\n      [`size-${this.size}`]: true,\n      [`variant-${this.variant}`]: true,\n      [`orientation-${this.orientation}`]: true,\n    };\n    return html`\n      <div class=${classMap(cssClasses)}>\n        <slot @slotchange=${() => this._syncChildren()}></slot>\n      </div>\n    `;\n  }\n}\n"],"names":["html","classMap","styles","colorStyles","sizeStyles","property","LitElement"],"mappings":"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"}