@m3e/web 2.5.4 → 2.5.6

package/dist/breadcrumb.min.js

@@ -3,5 +3,5 @@
  * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
-import{__classPrivateFieldGet as e,__classPrivateFieldSet as t,__decorate as r}from"tslib";import{LitElement as i,html as o,css as a,nothing as s}from"lit";import{property as l,query as n}from"lit/decorators.js";import{Role as c,customElement as d,KeyboardClick as m,LinkButton as h,Focusable as u,Disabled as b,AttachInternals as p,renderPseudoLink as f,setCustomState as v,DesignToken as y}from"@m3e/web/core";import{ifDefined as g}from"lit/directives/if-defined.js";var $,w,x,k,S;let z=class extends(c(i,"navigation")){constructor(){super(...arguments),$.add(this),w.set(this,[]),this.wrap=!1}render(){return o`<div class="base" role="list"><slot @slotchange="${e(this,$,"m",x)}"></slot><slot name="separator" @slotchange="${e(this,$,"m",k)}"></slot></div>`}};function _(e){const t=e.assignedElements({flatten:!0});if(1===t.length){const e=t[0].getBoundingClientRect();return e.width<=28&&e.height<=28}return!1}var C,E,L,A;w=new WeakMap,$=new WeakSet,x=function(){const t=this.querySelectorAll("m3e-breadcrumb-item");for(let r=0;r<t.length;r++){const i=t[r];r<t.length-1?i.removeAttribute("current"):i.hasAttribute("current")||i.setAttribute("current","page"),e(this,$,"m",S).call(this,i)}},k=function(r){t(this,w,r.target.assignedElements({flatten:!0}),"f"),this.querySelectorAll("m3e-breadcrumb-item").forEach(t=>e(this,$,"m",S).call(this,t))},S=function(t){t._setSeparator(e(this,w,"f").map(e=>{const t=e.cloneNode(!0);return t.part="separator",t}))},z.styles=a`:host { display: block; } .base { display: flex; align-items: center; } :host([wrap]) .base { flex-wrap: wrap; } slot[name="separator"] { display: none; }`,r([l({type:Boolean,reflect:!0})],z.prototype,"wrap",void 0),z=r([d("m3e-breadcrumb")],z);let W=class extends(m(h(u(b(p(c(i,"button"),!0)))))){constructor(){super(...arguments),C.add(this),E.set(this,t=>e(this,C,"m",A).call(this,t))}connectedCallback(){this.addEventListener("click",e(this,E,"f")),super.connectedCallback()}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",e(this,E,"f"))}firstUpdated(e){super.firstUpdated(e),[this._focusRing,this._stateLayer,this._ripple].forEach(e=>e?.attach(this))}update(e){super.update(e),(e.has("disabled")||e.has("current"))&&(this.ariaDisabled=this.disabled&&!this.current?"true":null),e.has("current")&&(this.current?this.role=null:this.hasAttribute("href")?this.role="link":this.role="button")}render(){return o`<div class="base" aria-current="${g(this.current)}">${this.current?s:o`<m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer><m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" ?disabled="${this.disabled}"></m3e-ripple>${this[f]()}`}<slot class="icon" name="icon" aria-hidden="true"></slot><m3e-text-overflow class="overflow"><slot @slotchange="${e(this,C,"m",L)}"></slot></m3e-text-overflow>${this.current?s:o`<div class="touch" aria-hidden="true"></div>`}</div>`}};var j,q,B,M,R,T;E=new WeakMap,C=new WeakSet,L=function(e){v(this,"-icon-only",_(e.target))},A=function(e){this.current&&this.href&&e.preventDefault()},W.styles=a`:host { display: block; outline: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { display: flex; align-items: center; justify-content: center; position: relative; border-radius: var(--m3e-breadcrumb-item-shape, ${y.shape.corner.full}); height: calc(var(--m3e-breadcrumb-item-container-height, 2.5rem) + ${y.density.calc(-1)}); column-gap: var(--m3e-breadcrumb-item-icon-label-space, 0.5rem); } .icon { font-size: var(--m3e-breadcrumb-item--icon-size, 1.25rem); --m3e-icon-size: var(--m3e-breadcrumb-item--icon-size, 1.25rem); } ::slotted([slot="icon"]) { font-size: inherit !important; flex: none; } ::slotted(svg[slot="icon"]) { width: 1em; height: 1em; } :host(:state(-icon-only)) .overflow { flex: none; } :host(:not(:state(-icon-only))), :host(:not(:state(-icon-only))) .base { min-width: 0; } :host(:state(-icon-only):not([current]):not(:disabled)) .base { color: var(--m3e-breadcrumb-item-icon-color, ${y.color.onSurfaceVariant}); } :host(:state(-icon-only)) .base { width: calc(var(--m3e-breadcrumb-item-container-height, 2.5rem) + ${y.density.calc(-1)}); padding-inline: var(--m3e-breadcrumb-item-icon-padding-inline, 0px); --m3e-state-layer-hover-color: var( --m3e-breadcrumb-item-icon-hover-state-layer-color, ${y.color.onSurface} ); --m3e-state-layer-focus-color: var( --m3e-breadcrumb-item-icon-focus-state-layer-color, ${y.color.onSurface} ); --m3e-ripple-color: var(--m3e-breadcrumb-item-icon-pressed-state-layer-color, ${y.color.onSurface}); } :host(:not(:state(-icon-only)):not([current]):not(:disabled)) .base { color: var(--m3e-breadcrumb-item-label-color, ${y.color.primary}); } :host(:not(:state(-icon-only))) .base { font-size: var(--m3e-breadcrumb-item-label-font-size, ${y.typescale.standard.label.large.fontSize}); font-weight: var( --m3e-breadcrumb-item-label-font-weight, ${y.typescale.standard.label.large.fontWeight} ); line-height: var( --m3e-breadcrumb-item-label-line-height, ${y.typescale.standard.label.large.lineHeight} ); letter-spacing: var(--m3e-breadcrumb-item-label-tracking, ${y.typescale.standard.label.large.tracking}); } :host(:not(:state(-icon-only))) .base { padding-inline: var(--m3e-breadcrumb-item-label-padding-inline, 0.75rem); --m3e-state-layer-hover-color: var( --m3e-breadcrumb-item-label-hover-state-layer-color, ${y.color.primary} ); --m3e-state-layer-focus-color: var( --m3e-breadcrumb-item-label-focus-state-layer-color, ${y.color.primary} ); --m3e-ripple-color: var(--m3e-breadcrumb-item-label-pressed-state-layer-color, ${y.color.primary}); } :host([current]) .base { color: var(--m3e-breadcrumb-item-last-color, ${y.color.onSurface}); } :host(:not(:disabled):not([current])) { cursor: pointer; user-select: none; } :host(:disabled:not([current])) .base { color: color-mix( in srgb, var(--m3e-breadcrumb-item-disabled-color, ${y.color.onSurface}) var(--m3e-breadcrumb-item-disabled-opacity, 38%), transparent ); } .touch { position: absolute; height: 3rem; width: max(3rem, 100%); margin: auto; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } @media (forced-colors: active) { :host(:state(-icon-only):not([current]):not(:disabled)) .base, :host(:not(:state(-icon-only)):not([current]):not(:disabled)) .base { color: LinkText; outline: 1px solid LinkText; } :host(:disabled) .base { color: GrayText; } }`,r([n(".focus-ring")],W.prototype,"_focusRing",void 0),r([n(".state-layer")],W.prototype,"_stateLayer",void 0),r([n(".ripple")],W.prototype,"_ripple",void 0),r([l({reflect:!0})],W.prototype,"current",void 0),W=r([d("m3e-breadcrumb-item-button")],W);let D=class extends(h(p(c(i,"listitem")),!0)){constructor(){super(...arguments),j.add(this),q.set(this,void 0),this.itemLabel="",this.disabled=!1}focus(e){this._button?.focus(e)}blur(){this._button?.blur()}click(){this._button?.click()}updated(t){super.updated(t),t.has("current")&&e(this,j,"m",T).call(this)}render(){return o`<div class="base"><m3e-breadcrumb-item-button class="button" aria-label="${g(this.itemLabel||void 0)}" ?disabled="${this.disabled}" current="${g(this.current)}" href="${g(this.href||void 0)}" target="${g(this.target||void 0)}" download="${g(this.download||void 0)}" rel="${g(this.rel||void 0)}"><slot name="icon" slot="icon" @slotchange="${e(this,j,"m",M)}"></slot><slot @slotchange="${e(this,j,"m",R)}"></slot></m3e-breadcrumb-item-button>${e(this,j,"m",B).call(this)}</div>`}_setSeparator(r){const i=this.shadowRoot?.querySelector(".separator");i&&(r.length>0?(!e(this,q,"f")&&i.firstElementChild&&t(this,q,i.firstElementChild,"f"),i.replaceChildren(...r)):e(this,q,"f")&&(i.replaceChildren(e(this,q,"f")),t(this,q,void 0,"f")))}};q=new WeakMap,j=new WeakSet,B=function(){return this.current?s:o`<div class="separator" aria-hidden="true"><svg class="separator-icon" viewBox="0 -960 960 960" fill="currentColor"><path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z"/></svg></div>`},M=function(){e(this,j,"m",T).call(this)},R=function(t){v(this,"-icon-only",_(t.target)),e(this,j,"m",T).call(this)},T=function(){this.querySelectorAll("m3e-icon").forEach(e=>e.filled=void 0!==this.current&&null!==this.current)},D.styles=a`:host { display: block; } .base { display: flex; align-items: center; height: 100%; } :host(:not(:state(-icon-only))[current]), :host(:not(:state(-icon-only))[current]) .base { min-width: 0; } .button { flex: 1 1 auto; } .separator { flex: none; display: flex; justify-content: center; align-items: center; min-width: 0.5rem; --m3e-icon-size: var(--m3e-breadcrumb-separator-icon-size, 1.5rem); } .separator-icon { width: 1em; height: 1em; font-size: var(--m3e-icon-size); vertical-align: middle; }`,r([n(".button")],D.prototype,"_button",void 0),r([l({attribute:"item-label"})],D.prototype,"itemLabel",void 0),r([l({type:Boolean,reflect:!0})],D.prototype,"disabled",void 0),r([l({reflect:!0})],D.prototype,"current",void 0),D=r([d("m3e-breadcrumb-item")],D);export{z as M3eBreadcrumbElement,D as M3eBreadcrumbItemElement};
+import{__classPrivateFieldGet as e,__classPrivateFieldSet as t,__decorate as r}from"tslib";import{LitElement as i,html as o,css as a,nothing as s}from"lit";import{property as l,query as n}from"lit/decorators.js";import{Role as c,customElement as d,KeyboardClick as m,LinkButton as h,Focusable as u,Disabled as b,AttachInternals as p,renderPseudoLink as f,setCustomState as y,DesignToken as v}from"@m3e/web/core";import{ifDefined as g}from"lit/directives/if-defined.js";var $,w,x,k,S;let z=class extends(c(i,"navigation")){constructor(){super(...arguments),$.add(this),w.set(this,[]),this.wrap=!1}render(){return o`<div class="base" role="list"><slot @slotchange="${e(this,$,"m",x)}"></slot><slot name="separator" @slotchange="${e(this,$,"m",k)}"></slot></div>`}};function _(e){const t=e.assignedElements({flatten:!0});if(1===t.length){const e=t[0].getBoundingClientRect();return e.width<=28&&e.height<=28}return!1}var C,E,L,A;w=new WeakMap,$=new WeakSet,x=function(){const t=this.querySelectorAll("m3e-breadcrumb-item");for(let r=0;r<t.length;r++){const i=t[r];r<t.length-1?i.removeAttribute("current"):i.hasAttribute("current")||i.setAttribute("current","page"),e(this,$,"m",S).call(this,i)}},k=function(r){t(this,w,r.target.assignedElements({flatten:!0}),"f"),this.querySelectorAll("m3e-breadcrumb-item").forEach(t=>e(this,$,"m",S).call(this,t))},S=function(t){t._setSeparator(e(this,w,"f").map(e=>{const t=e.cloneNode(!0);return t.part="separator",t}))},z.styles=a`:host { display: block; } .base { display: flex; align-items: center; } :host([wrap]) .base { flex-wrap: wrap; } slot[name="separator"] { display: none; }`,r([l({type:Boolean,reflect:!0})],z.prototype,"wrap",void 0),z=r([d("m3e-breadcrumb")],z);let W=class extends(m(h(u(b(p(c(i,"button"),!0)))))){constructor(){super(...arguments),C.add(this),E.set(this,t=>e(this,C,"m",A).call(this,t))}connectedCallback(){this.addEventListener("click",e(this,E,"f")),super.connectedCallback()}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",e(this,E,"f"))}firstUpdated(e){super.firstUpdated(e),[this._focusRing,this._stateLayer,this._ripple].forEach(e=>e?.attach(this))}update(e){super.update(e),(e.has("disabled")||e.has("current"))&&(this.ariaDisabled=this.disabled&&!this.current?"true":null),e.has("current")&&(this.current?this.role=null:this.hasAttribute("href")?this.role="link":this.role="button")}render(){return o`<div class="base" aria-current="${g(this.current)}">${this.current?s:o`<m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer><m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" ?disabled="${this.disabled}"></m3e-ripple>${this[f]()}`}<slot class="icon" name="icon" aria-hidden="true"></slot><m3e-text-overflow class="overflow"><slot @slotchange="${e(this,C,"m",L)}"></slot></m3e-text-overflow>${this.current?s:o`<div class="touch" aria-hidden="true"></div>`}</div>`}};var j,q,B,M,R,T;E=new WeakMap,C=new WeakSet,L=function(e){y(this,"--icon-only",_(e.target))},A=function(e){this.current&&this.href&&e.preventDefault()},W.styles=a`:host { display: block; outline: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { display: flex; align-items: center; justify-content: center; position: relative; border-radius: var(--m3e-breadcrumb-item-shape, ${v.shape.corner.full}); height: calc(var(--m3e-breadcrumb-item-container-height, 2.5rem) + ${v.density.calc(-1)}); column-gap: var(--m3e-breadcrumb-item-icon-label-space, 0.5rem); } .icon { font-size: var(--m3e-breadcrumb-item--icon-size, 1.25rem); --m3e-icon-size: var(--m3e-breadcrumb-item--icon-size, 1.25rem); } ::slotted([slot="icon"]) { font-size: inherit !important; flex: none; } ::slotted(svg[slot="icon"]) { width: 1em; height: 1em; } :host(:is(:state(--icon-only), :--icon-only)) .overflow { flex: none; } :host(:not(:is(:state(--icon-only), :--icon-only))), :host(:not(:is(:state(--icon-only), :--icon-only))) .base { min-width: 0; } :host(:is(:state(--icon-only), :--icon-only):not([current]):not(:disabled)) .base { color: var(--m3e-breadcrumb-item-icon-color, ${v.color.onSurfaceVariant}); } :host(:is(:state(--icon-only), :--icon-only)) .base { width: calc(var(--m3e-breadcrumb-item-container-height, 2.5rem) + ${v.density.calc(-1)}); padding-inline: var(--m3e-breadcrumb-item-icon-padding-inline, 0px); --m3e-state-layer-hover-color: var( --m3e-breadcrumb-item-icon-hover-state-layer-color, ${v.color.onSurface} ); --m3e-state-layer-focus-color: var( --m3e-breadcrumb-item-icon-focus-state-layer-color, ${v.color.onSurface} ); --m3e-ripple-color: var(--m3e-breadcrumb-item-icon-pressed-state-layer-color, ${v.color.onSurface}); } :host(:not(:is(:state(--icon-only), :--icon-only)):not([current]):not(:disabled)) .base { color: var(--m3e-breadcrumb-item-label-color, ${v.color.primary}); } :host(:not(:is(:state(--icon-only), :--icon-only))) .base { font-size: var(--m3e-breadcrumb-item-label-font-size, ${v.typescale.standard.label.large.fontSize}); font-weight: var( --m3e-breadcrumb-item-label-font-weight, ${v.typescale.standard.label.large.fontWeight} ); line-height: var( --m3e-breadcrumb-item-label-line-height, ${v.typescale.standard.label.large.lineHeight} ); letter-spacing: var(--m3e-breadcrumb-item-label-tracking, ${v.typescale.standard.label.large.tracking}); } :host(:not(:is(:state(--icon-only), :--icon-only))) .base { padding-inline: var(--m3e-breadcrumb-item-label-padding-inline, 0.75rem); --m3e-state-layer-hover-color: var( --m3e-breadcrumb-item-label-hover-state-layer-color, ${v.color.primary} ); --m3e-state-layer-focus-color: var( --m3e-breadcrumb-item-label-focus-state-layer-color, ${v.color.primary} ); --m3e-ripple-color: var(--m3e-breadcrumb-item-label-pressed-state-layer-color, ${v.color.primary}); } :host([current]) .base { color: var(--m3e-breadcrumb-item-last-color, ${v.color.onSurface}); } :host(:not(:disabled):not([current])) { cursor: pointer; user-select: none; } :host(:disabled:not([current])) .base { color: color-mix( in srgb, var(--m3e-breadcrumb-item-disabled-color, ${v.color.onSurface}) var(--m3e-breadcrumb-item-disabled-opacity, 38%), transparent ); } .touch { position: absolute; height: 3rem; width: max(3rem, 100%); margin: auto; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } @media (forced-colors: active) { :host(:is(:state(--icon-only), :--icon-only):not([current]):not(:disabled)) .base, :host(:not(:is(:state(--icon-only), :--icon-only)):not([current]):not(:disabled)) .base { color: LinkText; outline: 1px solid LinkText; } :host(:disabled) .base { color: GrayText; } }`,r([n(".focus-ring")],W.prototype,"_focusRing",void 0),r([n(".state-layer")],W.prototype,"_stateLayer",void 0),r([n(".ripple")],W.prototype,"_ripple",void 0),r([l({reflect:!0})],W.prototype,"current",void 0),W=r([d("m3e-breadcrumb-item-button")],W);let D=class extends(h(p(c(i,"listitem")),!0)){constructor(){super(...arguments),j.add(this),q.set(this,void 0),this.itemLabel="",this.disabled=!1}focus(e){this._button?.focus(e)}blur(){this._button?.blur()}click(){this._button?.click()}updated(t){super.updated(t),t.has("current")&&e(this,j,"m",T).call(this)}render(){return o`<div class="base"><m3e-breadcrumb-item-button class="button" aria-label="${g(this.itemLabel||void 0)}" ?disabled="${this.disabled}" current="${g(this.current)}" href="${g(this.href||void 0)}" target="${g(this.target||void 0)}" download="${g(this.download||void 0)}" rel="${g(this.rel||void 0)}"><slot name="icon" slot="icon" @slotchange="${e(this,j,"m",M)}"></slot><slot @slotchange="${e(this,j,"m",R)}"></slot></m3e-breadcrumb-item-button>${e(this,j,"m",B).call(this)}</div>`}_setSeparator(r){const i=this.shadowRoot?.querySelector(".separator");i&&(r.length>0?(!e(this,q,"f")&&i.firstElementChild&&t(this,q,i.firstElementChild,"f"),i.replaceChildren(...r)):e(this,q,"f")&&(i.replaceChildren(e(this,q,"f")),t(this,q,void 0,"f")))}};q=new WeakMap,j=new WeakSet,B=function(){return this.current?s:o`<div class="separator" aria-hidden="true"><svg class="separator-icon" viewBox="0 -960 960 960" fill="currentColor"><path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z"/></svg></div>`},M=function(){e(this,j,"m",T).call(this)},R=function(t){y(this,"--icon-only",_(t.target)),e(this,j,"m",T).call(this)},T=function(){this.querySelectorAll("m3e-icon").forEach(e=>e.filled=void 0!==this.current&&null!==this.current)},D.styles=a`:host { display: block; } .base { display: flex; align-items: center; height: 100%; } :host(:not(:is(:state(--icon-only), :--icon-only))[current]), :host(:not(:is(:state(--icon-only), :--icon-only))[current]) .base { min-width: 0; } .button { flex: 1 1 auto; } .separator { flex: none; display: flex; justify-content: center; align-items: center; min-width: 0.5rem; --m3e-icon-size: var(--m3e-breadcrumb-separator-icon-size, 1.5rem); } .separator-icon { width: 1em; height: 1em; font-size: var(--m3e-icon-size); vertical-align: middle; }`,r([n(".button")],D.prototype,"_button",void 0),r([l({attribute:"item-label"})],D.prototype,"itemLabel",void 0),r([l({type:Boolean,reflect:!0})],D.prototype,"disabled",void 0),r([l({reflect:!0})],D.prototype,"current",void 0),D=r([d("m3e-breadcrumb-item")],D);export{z as M3eBreadcrumbElement,D as M3eBreadcrumbItemElement};
 //# sourceMappingURL=breadcrumb.min.js.map

package/dist/breadcrumb.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.min.js","sources":["../../src/breadcrumb/BreadcrumbElement.ts","../../src/breadcrumb/isIconOnly.ts","../../src/breadcrumb/BreadcrumbItemButtonElement.ts","../../src/breadcrumb/BreadcrumbItemElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport { customElement, Role } from \"@m3e/web/core\";\r\n\r\nimport type { M3eBreadcrumbItemElement } from \"./BreadcrumbItemElement\";\r\n\r\n/**\r\n * Displays a hierarchical navigation path and identifies the user's\r\n * current location within an application.\r\n *\r\n * @description\r\n * The `m3e-breadcrumb` component arranges `m3e-breadcrumb-item` children into\r\n * a trail of navigation steps. It tracks the last item as the current page and\r\n * supports a custom separator slot for alternate divider content.\r\n *\r\n * @example\r\n * The following example illustrates a simple breadcrumb with three items.\r\n * ```html\r\n * <m3e-breadcrumb>\r\n *   <m3e-breadcrumb-item href=\"/dashboard\">Dashboard</m3e-breadcrumb-item>\r\n *   <m3e-breadcrumb-item href=\"/dashboard/reports\">Reports</m3e-breadcrumb-item>\r\n *   <m3e-breadcrumb-item href=\"/dashboard/reports/annual\">Annual</m3e-breadcrumb-item>\r\n * </m3e-breadcrumb>\r\n * ```\r\n *\r\n * @tag m3e-breadcrumb\r\n *\r\n * @slot - Renders breadcrumb items.\r\n * @slot separator - Renders a custom separator between breadcrumb items.\r\n *\r\n * @attr wrap - Whether breadcrumb items should wrap onto a new line.\r\n */\r\n@customElement(\"m3e-breadcrumb\")\r\nexport class M3eBreadcrumbElement extends Role(LitElement, \"navigation\") {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: block;\r\n    }\r\n    .base {\r\n      display: flex;\r\n      align-items: center;\r\n    }\r\n    :host([wrap]) .base {\r\n      flex-wrap: wrap;\r\n    }\r\n    slot[name=\"separator\"] {\r\n      display: none;\r\n    }\r\n  `;\r\n\r\n  /** @private */ #customSeparator: Element[] = [];\r\n\r\n  /**\r\n   * Whether items wrap to a new line.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) wrap = false;\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\" role=\"list\">\r\n      <slot @slotchange=\"${this.#handleSlotChange}\"></slot>\r\n      <slot name=\"separator\" @slotchange=\"${this.#handleSeparatorSlotChange}\"></slot>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange(): void {\r\n    const items = this.querySelectorAll(\"m3e-breadcrumb-item\");\r\n    for (let i = 0; i < items.length; i++) {\r\n      const item = items[i];\r\n      if (i < items.length - 1) {\r\n        item.removeAttribute(\"current\");\r\n      } else if (!item.hasAttribute(\"current\")) {\r\n        item.setAttribute(\"current\", \"page\");\r\n      }\r\n      this.#setSeparator(item);\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleSeparatorSlotChange(e: Event): void {\r\n    this.#customSeparator = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\r\n    this.querySelectorAll(\"m3e-breadcrumb-item\").forEach((x) => this.#setSeparator(x));\r\n  }\r\n\r\n  /** @private */\r\n  #setSeparator(item: M3eBreadcrumbItemElement): void {\r\n    item._setSeparator(\r\n      this.#customSeparator.map((x) => {\r\n        const clone = <Element>x.cloneNode(true);\r\n        clone.part = \"separator\";\r\n        return clone;\r\n      }),\r\n    );\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-breadcrumb\": M3eBreadcrumbElement;\r\n  }\r\n}\r\n","/** @internal */\r\nexport function isIconOnly(slot: HTMLSlotElement): boolean {\r\n  const elements = slot.assignedElements({ flatten: true });\r\n  if (elements.length === 1) {\r\n    const rect = elements[0].getBoundingClientRect();\r\n    return rect.width <= 28 && rect.height <= 28;\r\n  }\r\n  return false;\r\n}\r\n","import { css, CSSResultGroup, html, LitElement, nothing, PropertyValues } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\nimport { ifDefined } from \"lit/directives/if-defined.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  DesignToken,\r\n  Disabled,\r\n  Focusable,\r\n  KeyboardClick,\r\n  LinkButton,\r\n  M3eFocusRingElement,\r\n  M3eRippleElement,\r\n  M3eStateLayerElement,\r\n  renderPseudoLink,\r\n  Role,\r\n  setCustomState,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { BreadcrumbItemCurrent } from \"./BreadcrumbItemCurrent\";\r\nimport { isIconOnly } from \"./isIconOnly\";\r\n\r\n/**\r\n * @internal\r\n * An internal interactive element used to present the content of a breadcrumb item.\r\n */\r\n@customElement(\"m3e-breadcrumb-item-button\")\r\nexport class M3eBreadcrumbItemButtonElement extends KeyboardClick(\r\n  LinkButton(Focusable(Disabled(AttachInternals(Role(LitElement, \"button\"), true)))),\r\n) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: block;\r\n      outline: none;\r\n      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n    }\r\n    .base {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      position: relative;\r\n      border-radius: var(--m3e-breadcrumb-item-shape, ${DesignToken.shape.corner.full});\r\n      height: calc(var(--m3e-breadcrumb-item-container-height, 2.5rem) + ${DesignToken.density.calc(-1)});\r\n      column-gap: var(--m3e-breadcrumb-item-icon-label-space, 0.5rem);\r\n    }\r\n    .icon {\r\n      font-size: var(--m3e-breadcrumb-item--icon-size, 1.25rem);\r\n      --m3e-icon-size: var(--m3e-breadcrumb-item--icon-size, 1.25rem);\r\n    }\r\n    ::slotted([slot=\"icon\"]) {\r\n      font-size: inherit !important;\r\n      flex: none;\r\n    }\r\n    ::slotted(svg[slot=\"icon\"]) {\r\n      width: 1em;\r\n      height: 1em;\r\n    }\r\n    :host(:state(-icon-only)) .overflow {\r\n      flex: none;\r\n    }\r\n    :host(:not(:state(-icon-only))),\r\n    :host(:not(:state(-icon-only))) .base {\r\n      min-width: 0;\r\n    }\r\n    :host(:state(-icon-only):not([current]):not(:disabled)) .base {\r\n      color: var(--m3e-breadcrumb-item-icon-color, ${DesignToken.color.onSurfaceVariant});\r\n    }\r\n    :host(:state(-icon-only)) .base {\r\n      width: calc(var(--m3e-breadcrumb-item-container-height, 2.5rem) + ${DesignToken.density.calc(-1)});\r\n      padding-inline: var(--m3e-breadcrumb-item-icon-padding-inline, 0px);\r\n      --m3e-state-layer-hover-color: var(\r\n        --m3e-breadcrumb-item-icon-hover-state-layer-color,\r\n        ${DesignToken.color.onSurface}\r\n      );\r\n      --m3e-state-layer-focus-color: var(\r\n        --m3e-breadcrumb-item-icon-focus-state-layer-color,\r\n        ${DesignToken.color.onSurface}\r\n      );\r\n      --m3e-ripple-color: var(--m3e-breadcrumb-item-icon-pressed-state-layer-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host(:not(:state(-icon-only)):not([current]):not(:disabled)) .base {\r\n      color: var(--m3e-breadcrumb-item-label-color, ${DesignToken.color.primary});\r\n    }\r\n    :host(:not(:state(-icon-only))) .base {\r\n      font-size: var(--m3e-breadcrumb-item-label-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n      font-weight: var(\r\n        --m3e-breadcrumb-item-label-font-weight,\r\n        ${DesignToken.typescale.standard.label.large.fontWeight}\r\n      );\r\n      line-height: var(\r\n        --m3e-breadcrumb-item-label-line-height,\r\n        ${DesignToken.typescale.standard.label.large.lineHeight}\r\n      );\r\n      letter-spacing: var(--m3e-breadcrumb-item-label-tracking, ${DesignToken.typescale.standard.label.large.tracking});\r\n    }\r\n    :host(:not(:state(-icon-only))) .base {\r\n      padding-inline: var(--m3e-breadcrumb-item-label-padding-inline, 0.75rem);\r\n      --m3e-state-layer-hover-color: var(\r\n        --m3e-breadcrumb-item-label-hover-state-layer-color,\r\n        ${DesignToken.color.primary}\r\n      );\r\n      --m3e-state-layer-focus-color: var(\r\n        --m3e-breadcrumb-item-label-focus-state-layer-color,\r\n        ${DesignToken.color.primary}\r\n      );\r\n      --m3e-ripple-color: var(--m3e-breadcrumb-item-label-pressed-state-layer-color, ${DesignToken.color.primary});\r\n    }\r\n    :host([current]) .base {\r\n      color: var(--m3e-breadcrumb-item-last-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host(:not(:disabled):not([current])) {\r\n      cursor: pointer;\r\n      user-select: none;\r\n    }\r\n    :host(:disabled:not([current])) .base {\r\n      color: color-mix(\r\n        in srgb,\r\n        var(--m3e-breadcrumb-item-disabled-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-breadcrumb-item-disabled-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n    .touch {\r\n      position: absolute;\r\n      height: 3rem;\r\n      width: max(3rem, 100%);\r\n      margin: auto;\r\n    }\r\n    a {\r\n      all: unset;\r\n      display: block;\r\n      position: absolute;\r\n      top: 0px;\r\n      left: 0px;\r\n      right: 0px;\r\n      bottom: 0px;\r\n      z-index: 1;\r\n    }\r\n    @media (forced-colors: active) {\r\n      :host(:state(-icon-only):not([current]):not(:disabled)) .base,\r\n      :host(:not(:state(-icon-only)):not([current]):not(:disabled)) .base {\r\n        color: LinkText;\r\n        outline: 1px solid LinkText;\r\n      }\r\n      :host(:disabled) .base {\r\n        color: GrayText;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ @query(\".focus-ring\") private readonly _focusRing?: M3eFocusRingElement;\r\n  /** @private */ @query(\".state-layer\") private readonly _stateLayer?: M3eStateLayerElement;\r\n  /** @private */ @query(\".ripple\") private readonly _ripple?: M3eRippleElement;\r\n\r\n  /** @private */ #clickHandler = (e: Event) => this.#handleClick(e);\r\n\r\n  /**\r\n   * Indicates the current item in the breadcrumb path.\r\n   * @default undefined\r\n   */\r\n  @property({ reflect: true }) current?: BreadcrumbItemCurrent;\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    this.addEventListener(\"click\", this.#clickHandler);\r\n    super.connectedCallback();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.removeEventListener(\"click\", this.#clickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n    super.firstUpdated(_changedProperties);\r\n    [this._focusRing, this._stateLayer, this._ripple].forEach((x) => x?.attach(this));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues<this>): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"disabled\") || changedProperties.has(\"current\")) {\r\n      this.ariaDisabled = this.disabled && !this.current ? \"true\" : null;\r\n    }\r\n\r\n    if (changedProperties.has(\"current\")) {\r\n      if (this.current) {\r\n        this.role = null;\r\n      } else if (this.hasAttribute(\"href\")) {\r\n        this.role = \"link\";\r\n      } else {\r\n        this.role = \"button\";\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\" aria-current=\"${ifDefined(this.current)}\">\r\n      ${this.current\r\n        ? nothing\r\n        : html`<m3e-state-layer class=\"state-layer\" ?disabled=\"${this.disabled}\"> </m3e-state-layer>\r\n            <m3e-focus-ring class=\"focus-ring\" ?disabled=\"${this.disabled}\"></m3e-focus-ring>\r\n            <m3e-ripple class=\"ripple\" ?disabled=\"${this.disabled}\"></m3e-ripple>\r\n            ${this[renderPseudoLink]()}`}\r\n      <slot class=\"icon\" name=\"icon\" aria-hidden=\"true\"></slot>\r\n      <m3e-text-overflow class=\"overflow\">\r\n        <slot @slotchange=\"${this.#handleSlotChange}\"></slot>\r\n      </m3e-text-overflow>\r\n      ${this.current ? nothing : html`<div class=\"touch\" aria-hidden=\"true\"></div>`}\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange(e: Event): void {\r\n    setCustomState(this, \"-icon-only\", isIconOnly(e.target as HTMLSlotElement));\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    // If current and link, disable default link click handler behavior.\r\n    if (this.current && this.href) {\r\n      e.preventDefault();\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-breadcrumb-item-button\": M3eBreadcrumbItemButtonElement;\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement, nothing, PropertyValues } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\nimport { ifDefined } from \"lit/directives/if-defined.js\";\r\n\r\nimport { AttachInternals, customElement, LinkButton, Role, setCustomState } from \"@m3e/web/core\";\r\n\r\nimport { M3eBreadcrumbItemButtonElement } from \"./BreadcrumbItemButtonElement\";\r\nimport { BreadcrumbItemCurrent } from \"./BreadcrumbItemCurrent\";\r\nimport { isIconOnly } from \"./isIconOnly\";\r\n\r\nimport \"./BreadcrumbItemButtonElement\";\r\n\r\n/**\r\n * An item in a breadcrumb.\r\n *\r\n * @description\r\n * The `m3e-breadcrumb-item` element represents a single item in a breadcrumb\r\n * navigation trail. It renders an internal button and supports navigation\r\n * attributes for link behavior.\r\n *\r\n * @tag m3e-breadcrumb-item\r\n *\r\n * @slot - Renders the content of the breadcrumb item.\r\n * @slot icon - Renders an icon before the item's label.\r\n *\r\n * @attr item-label - The accessible label used by the internal breadcrumb button.\r\n * @attr disabled - Whether the breadcrumb item is disabled.\r\n * @attr current - Marks the breadcrumb item as the current location in the trail.\r\n * @attr href - The URL to which the internal breadcrumb link button points.\r\n * @attr target - The target of the internal breadcrumb link button.\r\n * @attr download - A value indicating whether the internal link target will be downloaded, optionally specifying a file name.\r\n * @attr rel - The relationship between the internal link target and the document.\r\n *\r\n * @fires click - Emitted when the element is clicked.\r\n *\r\n * @cssprop --m3e-breadcrumb-item-shape - Shape of the internal breadcrumb item button.\r\n * @cssprop --m3e-breadcrumb-item-container-height - Height of the internal breadcrumb item button container.\r\n * @cssprop --m3e-breadcrumb-item-icon-color - Color of breadcrumb item icon-only content.\r\n * @cssprop --m3e-breadcrumb-item-icon-padding-inline - Horizontal padding for icon-only breadcrumb items.\r\n * @cssprop --m3e-breadcrumb-item-icon-hover-state-layer-color - Hover state layer color for icon-only breadcrumb items.\r\n * @cssprop --m3e-breadcrumb-item-icon-focus-state-layer-color - Focus state layer color for icon-only breadcrumb items.\r\n * @cssprop --m3e-breadcrumb-item-icon-pressed-state-layer-color - Pressed state layer color for icon-only breadcrumb items.\r\n * @cssprop --m3e-breadcrumb-item-label-color - Color of breadcrumb item label content.\r\n * @cssprop --m3e-breadcrumb-item-label-font-size - Font size of breadcrumb item label content.\r\n * @cssprop --m3e-breadcrumb-item-label-font-weight - Font weight of breadcrumb item label content.\r\n * @cssprop --m3e-breadcrumb-item-label-line-height - Line height of breadcrumb item label content.\r\n * @cssprop --m3e-breadcrumb-item-label-tracking - Letter spacing of breadcrumb item label content.\r\n * @cssprop --m3e-breadcrumb-item-label-padding-inline - Horizontal padding for label breadcrumb items.\r\n * @cssprop --m3e-breadcrumb-item-label-hover-state-layer-color - Hover state layer color for label breadcrumb items.\r\n * @cssprop --m3e-breadcrumb-item-label-focus-state-layer-color - Focus state layer color for label breadcrumb items.\r\n * @cssprop --m3e-breadcrumb-item-label-pressed-state-layer-color - Pressed state layer color for label breadcrumb items.\r\n * @cssprop --m3e-breadcrumb-item-last-color - Color used for the current breadcrumb item.\r\n * @cssprop --m3e-breadcrumb-item-icon-label-space - Space between icon and label.\r\n * @cssprop --m3e-breadcrumb-item-icon-size - Size of the icon.\r\n * @cssprop --m3e-breadcrumb-item-disabled-color - Disabled color used by the breadcrumb item button.\r\n * @cssprop --m3e-breadcrumb-item-disabled-opacity - Disabled opacity used by the breadcrumb item button.\r\n */\r\n@customElement(\"m3e-breadcrumb-item\")\r\nexport class M3eBreadcrumbItemElement extends LinkButton(AttachInternals(Role(LitElement, \"listitem\")), true) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: block;\r\n    }\r\n    .base {\r\n      display: flex;\r\n      align-items: center;\r\n      height: 100%;\r\n    }\r\n    :host(:not(:state(-icon-only))[current]),\r\n    :host(:not(:state(-icon-only))[current]) .base {\r\n      min-width: 0;\r\n    }\r\n    .button {\r\n      flex: 1 1 auto;\r\n    }\r\n    .separator {\r\n      flex: none;\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      min-width: 0.5rem;\r\n      --m3e-icon-size: var(--m3e-breadcrumb-separator-icon-size, 1.5rem);\r\n    }\r\n    .separator-icon {\r\n      width: 1em;\r\n      height: 1em;\r\n      font-size: var(--m3e-icon-size);\r\n      vertical-align: middle;\r\n    }\r\n  `;\r\n\r\n  /** @private */ @query(\".button\") private readonly _button!: M3eBreadcrumbItemButtonElement;\r\n  /** @private */ #defaultSeparator?: Element;\r\n\r\n  /**\r\n   * The accessible label given to the item's internal button.\r\n   * @default \"\"\r\n   */\r\n  @property({ attribute: \"item-label\" }) itemLabel = \"\";\r\n\r\n  /**\r\n   * Whether the element is disabled.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) disabled = false;\r\n\r\n  /**\r\n   * Indicates the current item in the breadcrumb path.\r\n   * @default undefined\r\n   */\r\n  @property({ reflect: true }) current?: BreadcrumbItemCurrent;\r\n\r\n  /** @inheritdoc */\r\n  override focus(options?: FocusOptions): void {\r\n    this._button?.focus(options);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override blur(): void {\r\n    this._button?.blur();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override click(): void {\r\n    this._button?.click();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override updated(_changedProperties: PropertyValues<this>): void {\r\n    super.updated(_changedProperties);\r\n    if (_changedProperties.has(\"current\")) {\r\n      this.#updateIconFilled();\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <m3e-breadcrumb-item-button\r\n        class=\"button\"\r\n        aria-label=\"${ifDefined(this.itemLabel || undefined)}\"\r\n        ?disabled=\"${this.disabled}\"\r\n        current=\"${ifDefined(this.current)}\"\r\n        href=\"${ifDefined(this.href || undefined)}\"\r\n        target=\"${ifDefined(this.target || undefined)}\"\r\n        download=\"${ifDefined(this.download || undefined)}\"\r\n        rel=\"${ifDefined(this.rel || undefined)}\"\r\n      >\r\n        <slot name=\"icon\" slot=\"icon\" @slotchange=\"${this.#handleIconSlotChange}\"></slot>\r\n        <slot @slotchange=\"${this.#handleSlotChange}\"></slot>\r\n      </m3e-breadcrumb-item-button>\r\n      ${this.#renderSeparator()}\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderSeparator(): unknown {\r\n    return this.current\r\n      ? nothing\r\n      : html`<div class=\"separator\" aria-hidden=\"true\">\r\n          <svg class=\"separator-icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n            <path d=\"M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z\" />\r\n          </svg>\r\n        </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleIconSlotChange(): void {\r\n    this.#updateIconFilled();\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange(e: Event): void {\r\n    setCustomState(this, \"-icon-only\", isIconOnly(e.target as HTMLSlotElement));\r\n    this.#updateIconFilled();\r\n  }\r\n\r\n  /** @private */\r\n  #updateIconFilled(): void {\r\n    this.querySelectorAll(\"m3e-icon\").forEach((x) => (x.filled = this.current !== undefined && this.current !== null));\r\n  }\r\n\r\n  /** @internal */\r\n  _setSeparator(nodes: Array<Node>) {\r\n    const separator = this.shadowRoot?.querySelector(\".separator\");\r\n    if (!separator) return;\r\n\r\n    if (nodes.length > 0) {\r\n      if (!this.#defaultSeparator && separator.firstElementChild) {\r\n        this.#defaultSeparator = separator.firstElementChild;\r\n      }\r\n      separator.replaceChildren(...nodes);\r\n    } else if (this.#defaultSeparator) {\r\n      separator.replaceChildren(this.#defaultSeparator);\r\n      this.#defaultSeparator = undefined;\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-breadcrumb-item\": M3eBreadcrumbItemElement;\r\n  }\r\n}\r\n"],"names":["M3eBreadcrumbElement","Role","LitElement","constructor","_M3eBreadcrumbElement_customSeparator","set","this","wrap","render","html","__classPrivateFieldGet","_M3eBreadcrumbElement_instances","_M3eBreadcrumbElement_handleSlotChange","_M3eBreadcrumbElement_handleSeparatorSlotChange","isIconOnly","slot","elements","assignedElements","flatten","length","rect","getBoundingClientRect","width","height","items","querySelectorAll","i","item","removeAttribute","hasAttribute","setAttribute","_M3eBreadcrumbElement_setSeparator","call","e","__classPrivateFieldSet","target","forEach","x","_setSeparator","map","clone","cloneNode","part","styles","css","__decorate","property","type","Boolean","reflect","prototype","customElement","M3eBreadcrumbItemButtonElement","KeyboardClick","LinkButton","Focusable","Disabled","AttachInternals","_M3eBreadcrumbItemButtonElement_clickHandler","connectedCallback","addEventListener","super","disconnectedCallback","removeEventListener","firstUpdated","_changedProperties","_focusRing","_stateLayer","_ripple","attach","update","changedProperties","has","ariaDisabled","disabled","current","role","ifDefined","nothing","renderPseudoLink","_M3eBreadcrumbItemButtonElement_instances","_M3eBreadcrumbItemButtonElement_handleSlotChange","setCustomState","href","preventDefault","DesignToken","shape","corner","full","density","calc","color","onSurfaceVariant","onSurface","primary","typescale","standard","label","large","fontSize","fontWeight","lineHeight","tracking","query","M3eBreadcrumbItemElement","_M3eBreadcrumbItemElement_defaultSeparator","itemLabel","focus","options","_button","blur","click","updated","_M3eBreadcrumbItemElement_instances","_M3eBreadcrumbItemElement_updateIconFilled","undefined","download","rel","_M3eBreadcrumbItemElement_handleIconSlotChange","_M3eBreadcrumbItemElement_handleSlotChange","_M3eBreadcrumbItemElement_renderSeparator","nodes","separator","shadowRoot","querySelector","firstElementChild","replaceChildren","filled","attribute"],"mappings":"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"}
+{"version":3,"file":"breadcrumb.min.js","sources":["../../src/breadcrumb/BreadcrumbElement.ts","../../src/breadcrumb/isIconOnly.ts","../../src/breadcrumb/BreadcrumbItemButtonElement.ts","../../src/breadcrumb/BreadcrumbItemElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport { customElement, Role } from \"@m3e/web/core\";\r\n\r\nimport type { M3eBreadcrumbItemElement } from \"./BreadcrumbItemElement\";\r\n\r\n/**\r\n * Displays a hierarchical navigation path and identifies the user's\r\n * current location within an application.\r\n *\r\n * @description\r\n * The `m3e-breadcrumb` component arranges `m3e-breadcrumb-item` children into\r\n * a trail of navigation steps. It tracks the last item as the current page and\r\n * supports a custom separator slot for alternate divider content.\r\n *\r\n * @example\r\n * The following example illustrates a simple breadcrumb with three items.\r\n * ```html\r\n * <m3e-breadcrumb>\r\n *   <m3e-breadcrumb-item href=\"/dashboard\">Dashboard</m3e-breadcrumb-item>\r\n *   <m3e-breadcrumb-item href=\"/dashboard/reports\">Reports</m3e-breadcrumb-item>\r\n *   <m3e-breadcrumb-item href=\"/dashboard/reports/annual\">Annual</m3e-breadcrumb-item>\r\n * </m3e-breadcrumb>\r\n * ```\r\n *\r\n * @tag m3e-breadcrumb\r\n *\r\n * @slot - Renders breadcrumb items.\r\n * @slot separator - Renders a custom separator between breadcrumb items.\r\n *\r\n * @attr wrap - Whether breadcrumb items should wrap onto a new line.\r\n */\r\n@customElement(\"m3e-breadcrumb\")\r\nexport class M3eBreadcrumbElement extends Role(LitElement, \"navigation\") {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: block;\r\n    }\r\n    .base {\r\n      display: flex;\r\n      align-items: center;\r\n    }\r\n    :host([wrap]) .base {\r\n      flex-wrap: wrap;\r\n    }\r\n    slot[name=\"separator\"] {\r\n      display: none;\r\n    }\r\n  `;\r\n\r\n  /** @private */ #customSeparator: Element[] = [];\r\n\r\n  /**\r\n   * Whether items wrap to a new line.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) wrap = false;\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\" role=\"list\">\r\n      <slot @slotchange=\"${this.#handleSlotChange}\"></slot>\r\n      <slot name=\"separator\" @slotchange=\"${this.#handleSeparatorSlotChange}\"></slot>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange(): void {\r\n    const items = this.querySelectorAll(\"m3e-breadcrumb-item\");\r\n    for (let i = 0; i < items.length; i++) {\r\n      const item = items[i];\r\n      if (i < items.length - 1) {\r\n        item.removeAttribute(\"current\");\r\n      } else if (!item.hasAttribute(\"current\")) {\r\n        item.setAttribute(\"current\", \"page\");\r\n      }\r\n      this.#setSeparator(item);\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleSeparatorSlotChange(e: Event): void {\r\n    this.#customSeparator = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\r\n    this.querySelectorAll(\"m3e-breadcrumb-item\").forEach((x) => this.#setSeparator(x));\r\n  }\r\n\r\n  /** @private */\r\n  #setSeparator(item: M3eBreadcrumbItemElement): void {\r\n    item._setSeparator(\r\n      this.#customSeparator.map((x) => {\r\n        const clone = <Element>x.cloneNode(true);\r\n        clone.part = \"separator\";\r\n        return clone;\r\n      }),\r\n    );\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-breadcrumb\": M3eBreadcrumbElement;\r\n  }\r\n}\r\n","/** @internal */\r\nexport function isIconOnly(slot: HTMLSlotElement): boolean {\r\n  const elements = slot.assignedElements({ flatten: true });\r\n  if (elements.length === 1) {\r\n    const rect = elements[0].getBoundingClientRect();\r\n    return rect.width <= 28 && rect.height <= 28;\r\n  }\r\n  return false;\r\n}\r\n","import { css, CSSResultGroup, html, LitElement, nothing, PropertyValues } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\nimport { ifDefined } from \"lit/directives/if-defined.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  DesignToken,\r\n  Disabled,\r\n  Focusable,\r\n  KeyboardClick,\r\n  LinkButton,\r\n  M3eFocusRingElement,\r\n  M3eRippleElement,\r\n  M3eStateLayerElement,\r\n  renderPseudoLink,\r\n  Role,\r\n  setCustomState,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { BreadcrumbItemCurrent } from \"./BreadcrumbItemCurrent\";\r\nimport { isIconOnly } from \"./isIconOnly\";\r\n\r\n/**\r\n * @internal\r\n * An internal interactive element used to present the content of a breadcrumb item.\r\n */\r\n@customElement(\"m3e-breadcrumb-item-button\")\r\nexport class M3eBreadcrumbItemButtonElement extends KeyboardClick(\r\n  LinkButton(Focusable(Disabled(AttachInternals(Role(LitElement, \"button\"), true)))),\r\n) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: block;\r\n      outline: none;\r\n      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n    }\r\n    .base {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      position: relative;\r\n      border-radius: var(--m3e-breadcrumb-item-shape, ${DesignToken.shape.corner.full});\r\n      height: calc(var(--m3e-breadcrumb-item-container-height, 2.5rem) + ${DesignToken.density.calc(-1)});\r\n      column-gap: var(--m3e-breadcrumb-item-icon-label-space, 0.5rem);\r\n    }\r\n    .icon {\r\n      font-size: var(--m3e-breadcrumb-item--icon-size, 1.25rem);\r\n      --m3e-icon-size: var(--m3e-breadcrumb-item--icon-size, 1.25rem);\r\n    }\r\n    ::slotted([slot=\"icon\"]) {\r\n      font-size: inherit !important;\r\n      flex: none;\r\n    }\r\n    ::slotted(svg[slot=\"icon\"]) {\r\n      width: 1em;\r\n      height: 1em;\r\n    }\r\n    :host(:is(:state(--icon-only), :--icon-only)) .overflow {\r\n      flex: none;\r\n    }\r\n    :host(:not(:is(:state(--icon-only), :--icon-only))),\r\n    :host(:not(:is(:state(--icon-only), :--icon-only))) .base {\r\n      min-width: 0;\r\n    }\r\n    :host(:is(:state(--icon-only), :--icon-only):not([current]):not(:disabled)) .base {\r\n      color: var(--m3e-breadcrumb-item-icon-color, ${DesignToken.color.onSurfaceVariant});\r\n    }\r\n    :host(:is(:state(--icon-only), :--icon-only)) .base {\r\n      width: calc(var(--m3e-breadcrumb-item-container-height, 2.5rem) + ${DesignToken.density.calc(-1)});\r\n      padding-inline: var(--m3e-breadcrumb-item-icon-padding-inline, 0px);\r\n      --m3e-state-layer-hover-color: var(\r\n        --m3e-breadcrumb-item-icon-hover-state-layer-color,\r\n        ${DesignToken.color.onSurface}\r\n      );\r\n      --m3e-state-layer-focus-color: var(\r\n        --m3e-breadcrumb-item-icon-focus-state-layer-color,\r\n        ${DesignToken.color.onSurface}\r\n      );\r\n      --m3e-ripple-color: var(--m3e-breadcrumb-item-icon-pressed-state-layer-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host(:not(:is(:state(--icon-only), :--icon-only)):not([current]):not(:disabled)) .base {\r\n      color: var(--m3e-breadcrumb-item-label-color, ${DesignToken.color.primary});\r\n    }\r\n    :host(:not(:is(:state(--icon-only), :--icon-only))) .base {\r\n      font-size: var(--m3e-breadcrumb-item-label-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n      font-weight: var(\r\n        --m3e-breadcrumb-item-label-font-weight,\r\n        ${DesignToken.typescale.standard.label.large.fontWeight}\r\n      );\r\n      line-height: var(\r\n        --m3e-breadcrumb-item-label-line-height,\r\n        ${DesignToken.typescale.standard.label.large.lineHeight}\r\n      );\r\n      letter-spacing: var(--m3e-breadcrumb-item-label-tracking, ${DesignToken.typescale.standard.label.large.tracking});\r\n    }\r\n    :host(:not(:is(:state(--icon-only), :--icon-only))) .base {\r\n      padding-inline: var(--m3e-breadcrumb-item-label-padding-inline, 0.75rem);\r\n      --m3e-state-layer-hover-color: var(\r\n        --m3e-breadcrumb-item-label-hover-state-layer-color,\r\n        ${DesignToken.color.primary}\r\n      );\r\n      --m3e-state-layer-focus-color: var(\r\n        --m3e-breadcrumb-item-label-focus-state-layer-color,\r\n        ${DesignToken.color.primary}\r\n      );\r\n      --m3e-ripple-color: var(--m3e-breadcrumb-item-label-pressed-state-layer-color, ${DesignToken.color.primary});\r\n    }\r\n    :host([current]) .base {\r\n      color: var(--m3e-breadcrumb-item-last-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host(:not(:disabled):not([current])) {\r\n      cursor: pointer;\r\n      user-select: none;\r\n    }\r\n    :host(:disabled:not([current])) .base {\r\n      color: color-mix(\r\n        in srgb,\r\n        var(--m3e-breadcrumb-item-disabled-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-breadcrumb-item-disabled-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n    .touch {\r\n      position: absolute;\r\n      height: 3rem;\r\n      width: max(3rem, 100%);\r\n      margin: auto;\r\n    }\r\n    a {\r\n      all: unset;\r\n      display: block;\r\n      position: absolute;\r\n      top: 0px;\r\n      left: 0px;\r\n      right: 0px;\r\n      bottom: 0px;\r\n      z-index: 1;\r\n    }\r\n    @media (forced-colors: active) {\r\n      :host(:is(:state(--icon-only), :--icon-only):not([current]):not(:disabled)) .base,\r\n      :host(:not(:is(:state(--icon-only), :--icon-only)):not([current]):not(:disabled)) .base {\r\n        color: LinkText;\r\n        outline: 1px solid LinkText;\r\n      }\r\n      :host(:disabled) .base {\r\n        color: GrayText;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ @query(\".focus-ring\") private readonly _focusRing?: M3eFocusRingElement;\r\n  /** @private */ @query(\".state-layer\") private readonly _stateLayer?: M3eStateLayerElement;\r\n  /** @private */ @query(\".ripple\") private readonly _ripple?: M3eRippleElement;\r\n\r\n  /** @private */ #clickHandler = (e: Event) => this.#handleClick(e);\r\n\r\n  /**\r\n   * Indicates the current item in the breadcrumb path.\r\n   * @default undefined\r\n   */\r\n  @property({ reflect: true }) current?: BreadcrumbItemCurrent;\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    this.addEventListener(\"click\", this.#clickHandler);\r\n    super.connectedCallback();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.removeEventListener(\"click\", this.#clickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n    super.firstUpdated(_changedProperties);\r\n    [this._focusRing, this._stateLayer, this._ripple].forEach((x) => x?.attach(this));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues<this>): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"disabled\") || changedProperties.has(\"current\")) {\r\n      this.ariaDisabled = this.disabled && !this.current ? \"true\" : null;\r\n    }\r\n\r\n    if (changedProperties.has(\"current\")) {\r\n      if (this.current) {\r\n        this.role = null;\r\n      } else if (this.hasAttribute(\"href\")) {\r\n        this.role = \"link\";\r\n      } else {\r\n        this.role = \"button\";\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\" aria-current=\"${ifDefined(this.current)}\">\r\n      ${this.current\r\n        ? nothing\r\n        : html`<m3e-state-layer class=\"state-layer\" ?disabled=\"${this.disabled}\"> </m3e-state-layer>\r\n            <m3e-focus-ring class=\"focus-ring\" ?disabled=\"${this.disabled}\"></m3e-focus-ring>\r\n            <m3e-ripple class=\"ripple\" ?disabled=\"${this.disabled}\"></m3e-ripple>\r\n            ${this[renderPseudoLink]()}`}\r\n      <slot class=\"icon\" name=\"icon\" aria-hidden=\"true\"></slot>\r\n      <m3e-text-overflow class=\"overflow\">\r\n        <slot @slotchange=\"${this.#handleSlotChange}\"></slot>\r\n      </m3e-text-overflow>\r\n      ${this.current ? nothing : html`<div class=\"touch\" aria-hidden=\"true\"></div>`}\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange(e: Event): void {\r\n    setCustomState(this, \"--icon-only\", isIconOnly(e.target as HTMLSlotElement));\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    // If current and link, disable default link click handler behavior.\r\n    if (this.current && this.href) {\r\n      e.preventDefault();\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-breadcrumb-item-button\": M3eBreadcrumbItemButtonElement;\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement, nothing, PropertyValues } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\nimport { ifDefined } from \"lit/directives/if-defined.js\";\r\n\r\nimport { AttachInternals, customElement, LinkButton, Role, setCustomState } from \"@m3e/web/core\";\r\n\r\nimport { M3eBreadcrumbItemButtonElement } from \"./BreadcrumbItemButtonElement\";\r\nimport { BreadcrumbItemCurrent } from \"./BreadcrumbItemCurrent\";\r\nimport { isIconOnly } from \"./isIconOnly\";\r\n\r\nimport \"./BreadcrumbItemButtonElement\";\r\n\r\n/**\r\n * An item in a breadcrumb.\r\n *\r\n * @description\r\n * The `m3e-breadcrumb-item` element represents a single item in a breadcrumb\r\n * navigation trail. It renders an internal button and supports navigation\r\n * attributes for link behavior.\r\n *\r\n * @tag m3e-breadcrumb-item\r\n *\r\n * @slot - Renders the content of the breadcrumb item.\r\n * @slot icon - Renders an icon before the item's label.\r\n *\r\n * @attr item-label - The accessible label used by the internal breadcrumb button.\r\n * @attr disabled - Whether the breadcrumb item is disabled.\r\n * @attr current - Marks the breadcrumb item as the current location in the trail.\r\n * @attr href - The URL to which the internal breadcrumb link button points.\r\n * @attr target - The target of the internal breadcrumb link button.\r\n * @attr download - A value indicating whether the internal link target will be downloaded, optionally specifying a file name.\r\n * @attr rel - The relationship between the internal link target and the document.\r\n *\r\n * @fires click - Dispatched when the element is clicked.\r\n *\r\n * @cssprop --m3e-breadcrumb-item-shape - Shape of the internal breadcrumb item button.\r\n * @cssprop --m3e-breadcrumb-item-container-height - Height of the internal breadcrumb item button container.\r\n * @cssprop --m3e-breadcrumb-item-icon-color - Color of breadcrumb item icon-only content.\r\n * @cssprop --m3e-breadcrumb-item-icon-padding-inline - Horizontal padding for icon-only breadcrumb items.\r\n * @cssprop --m3e-breadcrumb-item-icon-hover-state-layer-color - Hover state layer color for icon-only breadcrumb items.\r\n * @cssprop --m3e-breadcrumb-item-icon-focus-state-layer-color - Focus state layer color for icon-only breadcrumb items.\r\n * @cssprop --m3e-breadcrumb-item-icon-pressed-state-layer-color - Pressed state layer color for icon-only breadcrumb items.\r\n * @cssprop --m3e-breadcrumb-item-label-color - Color of breadcrumb item label content.\r\n * @cssprop --m3e-breadcrumb-item-label-font-size - Font size of breadcrumb item label content.\r\n * @cssprop --m3e-breadcrumb-item-label-font-weight - Font weight of breadcrumb item label content.\r\n * @cssprop --m3e-breadcrumb-item-label-line-height - Line height of breadcrumb item label content.\r\n * @cssprop --m3e-breadcrumb-item-label-tracking - Letter spacing of breadcrumb item label content.\r\n * @cssprop --m3e-breadcrumb-item-label-padding-inline - Horizontal padding for label breadcrumb items.\r\n * @cssprop --m3e-breadcrumb-item-label-hover-state-layer-color - Hover state layer color for label breadcrumb items.\r\n * @cssprop --m3e-breadcrumb-item-label-focus-state-layer-color - Focus state layer color for label breadcrumb items.\r\n * @cssprop --m3e-breadcrumb-item-label-pressed-state-layer-color - Pressed state layer color for label breadcrumb items.\r\n * @cssprop --m3e-breadcrumb-item-last-color - Color used for the current breadcrumb item.\r\n * @cssprop --m3e-breadcrumb-item-icon-label-space - Space between icon and label.\r\n * @cssprop --m3e-breadcrumb-item-icon-size - Size of the icon.\r\n * @cssprop --m3e-breadcrumb-item-disabled-color - Disabled color used by the breadcrumb item button.\r\n * @cssprop --m3e-breadcrumb-item-disabled-opacity - Disabled opacity used by the breadcrumb item button.\r\n */\r\n@customElement(\"m3e-breadcrumb-item\")\r\nexport class M3eBreadcrumbItemElement extends LinkButton(AttachInternals(Role(LitElement, \"listitem\")), true) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: block;\r\n    }\r\n    .base {\r\n      display: flex;\r\n      align-items: center;\r\n      height: 100%;\r\n    }\r\n    :host(:not(:is(:state(--icon-only), :--icon-only))[current]),\r\n    :host(:not(:is(:state(--icon-only), :--icon-only))[current]) .base {\r\n      min-width: 0;\r\n    }\r\n    .button {\r\n      flex: 1 1 auto;\r\n    }\r\n    .separator {\r\n      flex: none;\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      min-width: 0.5rem;\r\n      --m3e-icon-size: var(--m3e-breadcrumb-separator-icon-size, 1.5rem);\r\n    }\r\n    .separator-icon {\r\n      width: 1em;\r\n      height: 1em;\r\n      font-size: var(--m3e-icon-size);\r\n      vertical-align: middle;\r\n    }\r\n  `;\r\n\r\n  /** @private */ @query(\".button\") private readonly _button!: M3eBreadcrumbItemButtonElement;\r\n  /** @private */ #defaultSeparator?: Element;\r\n\r\n  /**\r\n   * The accessible label given to the item's internal button.\r\n   * @default \"\"\r\n   */\r\n  @property({ attribute: \"item-label\" }) itemLabel = \"\";\r\n\r\n  /**\r\n   * Whether the element is disabled.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) disabled = false;\r\n\r\n  /**\r\n   * Indicates the current item in the breadcrumb path.\r\n   * @default undefined\r\n   */\r\n  @property({ reflect: true }) current?: BreadcrumbItemCurrent;\r\n\r\n  /** @inheritdoc */\r\n  override focus(options?: FocusOptions): void {\r\n    this._button?.focus(options);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override blur(): void {\r\n    this._button?.blur();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override click(): void {\r\n    this._button?.click();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override updated(_changedProperties: PropertyValues<this>): void {\r\n    super.updated(_changedProperties);\r\n    if (_changedProperties.has(\"current\")) {\r\n      this.#updateIconFilled();\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <m3e-breadcrumb-item-button\r\n        class=\"button\"\r\n        aria-label=\"${ifDefined(this.itemLabel || undefined)}\"\r\n        ?disabled=\"${this.disabled}\"\r\n        current=\"${ifDefined(this.current)}\"\r\n        href=\"${ifDefined(this.href || undefined)}\"\r\n        target=\"${ifDefined(this.target || undefined)}\"\r\n        download=\"${ifDefined(this.download || undefined)}\"\r\n        rel=\"${ifDefined(this.rel || undefined)}\"\r\n      >\r\n        <slot name=\"icon\" slot=\"icon\" @slotchange=\"${this.#handleIconSlotChange}\"></slot>\r\n        <slot @slotchange=\"${this.#handleSlotChange}\"></slot>\r\n      </m3e-breadcrumb-item-button>\r\n      ${this.#renderSeparator()}\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderSeparator(): unknown {\r\n    return this.current\r\n      ? nothing\r\n      : html`<div class=\"separator\" aria-hidden=\"true\">\r\n          <svg class=\"separator-icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n            <path d=\"M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z\" />\r\n          </svg>\r\n        </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleIconSlotChange(): void {\r\n    this.#updateIconFilled();\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange(e: Event): void {\r\n    setCustomState(this, \"--icon-only\", isIconOnly(e.target as HTMLSlotElement));\r\n    this.#updateIconFilled();\r\n  }\r\n\r\n  /** @private */\r\n  #updateIconFilled(): void {\r\n    this.querySelectorAll(\"m3e-icon\").forEach((x) => (x.filled = this.current !== undefined && this.current !== null));\r\n  }\r\n\r\n  /** @internal */\r\n  _setSeparator(nodes: Array<Node>) {\r\n    const separator = this.shadowRoot?.querySelector(\".separator\");\r\n    if (!separator) return;\r\n\r\n    if (nodes.length > 0) {\r\n      if (!this.#defaultSeparator && separator.firstElementChild) {\r\n        this.#defaultSeparator = separator.firstElementChild;\r\n      }\r\n      separator.replaceChildren(...nodes);\r\n    } else if (this.#defaultSeparator) {\r\n      separator.replaceChildren(this.#defaultSeparator);\r\n      this.#defaultSeparator = undefined;\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-breadcrumb-item\": M3eBreadcrumbItemElement;\r\n  }\r\n}\r\n"],"names":["M3eBreadcrumbElement","Role","LitElement","constructor","_M3eBreadcrumbElement_customSeparator","set","this","wrap","render","html","__classPrivateFieldGet","_M3eBreadcrumbElement_instances","_M3eBreadcrumbElement_handleSlotChange","_M3eBreadcrumbElement_handleSeparatorSlotChange","isIconOnly","slot","elements","assignedElements","flatten","length","rect","getBoundingClientRect","width","height","items","querySelectorAll","i","item","removeAttribute","hasAttribute","setAttribute","_M3eBreadcrumbElement_setSeparator","call","e","__classPrivateFieldSet","target","forEach","x","_setSeparator","map","clone","cloneNode","part","styles","css","__decorate","property","type","Boolean","reflect","prototype","customElement","M3eBreadcrumbItemButtonElement","KeyboardClick","LinkButton","Focusable","Disabled","AttachInternals","_M3eBreadcrumbItemButtonElement_clickHandler","connectedCallback","addEventListener","super","disconnectedCallback","removeEventListener","firstUpdated","_changedProperties","_focusRing","_stateLayer","_ripple","attach","update","changedProperties","has","ariaDisabled","disabled","current","role","ifDefined","nothing","renderPseudoLink","_M3eBreadcrumbItemButtonElement_instances","_M3eBreadcrumbItemButtonElement_handleSlotChange","setCustomState","href","preventDefault","DesignToken","shape","corner","full","density","calc","color","onSurfaceVariant","onSurface","primary","typescale","standard","label","large","fontSize","fontWeight","lineHeight","tracking","query","M3eBreadcrumbItemElement","_M3eBreadcrumbItemElement_defaultSeparator","itemLabel","focus","options","_button","blur","click","updated","_M3eBreadcrumbItemElement_instances","_M3eBreadcrumbItemElement_updateIconFilled","undefined","download","rel","_M3eBreadcrumbItemElement_handleIconSlotChange","_M3eBreadcrumbItemElement_handleSlotChange","_M3eBreadcrumbItemElement_renderSeparator","nodes","separator","shadowRoot","querySelector","firstElementChild","replaceChildren","filled","attribute"],"mappings":"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"}

package/dist/button-group.js

@@ -143,10 +143,10 @@ _M3eButtonGroupElement_updateButtons = function _M3eButtonGroupElement_updateBut
   const buttonRole = this.role === "radiogroup" ? "radio" : "button";
   buttons.forEach((button, i) => {
     __classPrivateFieldGet(this, _M3eButtonGroupElement_pressedController, "f").observe(button);
-    setCustomState(button, "-connected", this.variant === "connected");
-    addCustomState(button, "-grouped");
-    setCustomState(button, "-first", i == 0);
-    setCustomState(button, "-last", i == buttons.length - 1);
+    setCustomState(button, "--connected", this.variant === "connected");
+    addCustomState(button, "--grouped");
+    setCustomState(button, "--first", i == 0);
+    setCustomState(button, "--last", i == buttons.length - 1);
     if (!this.hasAttribute("disable-role") && button.role !== buttonRole && button.toggle) {
       const checked = !button.toggle ? null : button.selected ? "true" : "false";
       button.role = buttonRole;
@@ -173,7 +173,7 @@ _M3eButtonGroupElement_handleChange = function _M3eButtonGroupElement_handleChan
   }
 };
 /** The styles of the element. */
-M3eButtonGroupElement.styles = css`:host { display: flex; vertical-align: middle; flex-wrap: nowrap; align-items: center; } .base { display: flex; vertical-align: middle; flex-wrap: nowrap; align-items: center; } :host([variant="standard"]) { justify-content: center; } :host([variant="connected"]) .base { flex: 1 1 auto; } :host([variant="standard"]) .base { width: fit-content; flex: none; } :host([variant="standard"]) .base.pressed { justify-content: space-between; width: var(--_button-group-width); } :host([variant="standard"][size="extra-small"]) .base { column-gap: var(--m3e-standard-button-group-extra-small-spacing, 1.125rem); } :host([variant="standard"][size="small"]) .base { column-gap: var(--m3e-standard-button-group-small-spacing, 0.75rem); } :host([variant="standard"][size="medium"]).base { column-gap: var(--m3e-standard-button-group-medium-spacing, 0.5rem); } :host([variant="standard"][size="large"]) .base { column-gap: var(--m3e-standard-button-group-large-spacing, 0.5rem); } :host([variant="standard"][size="extra-large"]) .base { column-gap: var(--m3e-standard-button-group-extra-large-spacing, 0.5rem); } :host([variant="connected"]) .base { column-gap: var(--m3e-connected-button-group-spacing, 0.125rem); } :host([variant="connected"][size="extra-small"]) ::slotted(:state(-first)[size="extra-small"]), :host([variant="connected"][size="extra-small"]) ::slotted(:not(:state(-first)):not(:state(-last))[size="extra-small"]) { --_button-rounded-end-shape: var( --m3e-connected-button-group-extra-small-inner-shape, ${DesignToken.shape.corner.small} ); --_button-square-end-shape: var( --m3e-connected-button-group-extra-small-inner-shape, ${DesignToken.shape.corner.small} ); --_button-square-end-pressed-shape: var( --m3e-connected-button-group-extra-small-inner-pressed-shape, ${DesignToken.shape.corner.extraSmall} ); } :host([variant="connected"][size="extra-small"]) ::slotted(:state(-last)[size="extra-small"]), :host([variant="connected"][size="extra-small"]) ::slotted(:not(:state(-first)):not(:state(-last))[size="extra-small"]) { --_button-rounded-start-shape: var( --m3e-connected-button-group-extra-small-inner-shape, ${DesignToken.shape.corner.small} ); --_button-square-start-shape: var( --m3e-connected-button-group-extra-small-inner-shape, ${DesignToken.shape.corner.small} ); --_button-square-start-pressed-shape: var( --m3e-connected-button-group-extra-small-inner-pressed-shape, ${DesignToken.shape.corner.extraSmall} ); } :host([variant="connected"][size="small"]) ::slotted(:state(-first)[size="small"]), :host([variant="connected"][size="small"]) ::slotted(:not(:state(-first)):not(:state(-last))[size="small"]) { --_button-rounded-end-shape: var( --m3e-connected-button-group-small-inner-shape, ${DesignToken.shape.corner.small} ); --_button-square-end-shape: var( --m3e-connected-button-group-small-inner-shape, ${DesignToken.shape.corner.small} ); --_button-end-shape-pressed-morph: var( --m3e-connected-button-group-small-inner-pressed-shape, ${DesignToken.shape.corner.extraSmall} ); } :host([variant="connected"][size="small"]) ::slotted(:state(-last)[size="small"]), :host([variant="connected"][size="small"]) ::slotted(:not(:state(-first)):not(:state(-last))[size="small"]) { --_button-rounded-start-shape: var( --m3e-connected-button-group-small-inner-shape, ${DesignToken.shape.corner.small} ); --_button-square-start-shape: var( --m3e-connected-button-group-small-inner-shape, ${DesignToken.shape.corner.small} ); --_button-start-shape-pressed-morph: var( --m3e-connected-button-group-small-inner-pressed-shape, ${DesignToken.shape.corner.extraSmall} ); } :host([variant="connected"][size="medium"]) ::slotted(:state(-first)[size="medium"]), :host([variant="connected"][size="medium"]) ::slotted(:not(:state(-first)):not(:state(-last))[size="medium"]) { --_button-rounded-end-shape: var( --m3e-connected-button-group-medium-inner-shape, ${DesignToken.shape.corner.small} ); --_button-square-end-shape: var( --m3e-connected-button-group-medium-inner-shape, ${DesignToken.shape.corner.small} ); --_button-square-end-pressed-shape: var( --m3e-connected-button-group-medium-inner-pressed-shape, ${DesignToken.shape.corner.extraSmall} ); } :host([variant="connected"][size="medium"]) ::slotted(:state(-last)[size="medium"]), :host([variant="connected"][size="medium"]) ::slotted(:not(:state(-first)):not(:state(-last))[size="medium"]) { --_button-rounded-start-shape: var( --m3e-connected-button-group-medium-inner-shape, ${DesignToken.shape.corner.small} ); --_button-square-start-shape: var( --m3e-connected-button-group-medium-inner-shape, ${DesignToken.shape.corner.small} ); --_button-square-start-pressed-shape: var( --m3e-connected-button-group-medium-inner-pressed-shape, ${DesignToken.shape.corner.extraSmall} ); } :host([variant="connected"][size="large"]) ::slotted(:state(-first)[size="large"]), :host([variant="connected"][size="large"]) ::slotted(:not(:state(-first)):not(:state(-last))[size="large"]) { --_button-rounded-end-shape: var( --m3e-connected-button-group-large-inner-shape, ${DesignToken.shape.corner.large} ); --_button-square-end-shape: var( --m3e-connected-button-group-large-inner-shape, ${DesignToken.shape.corner.large} ); --_button-square-end-pressed-shape: var( --m3e-connected-button-group-large-inner-pressed-shape, ${DesignToken.shape.corner.medium} ); } :host([variant="connected"][size="large"]) ::slotted(:state(-last)[size="large"]), :host([variant="connected"][size="large"]) ::slotted(:not(:state(-first)):not(:state(-last))[size="large"]) { --_button-rounded-start-shape: var( --m3e-connected-button-group-large-inner-shape, ${DesignToken.shape.corner.large} ); --_button-square-start-shape: var( --m3e-connected-button-group-large-inner-shape, ${DesignToken.shape.corner.large} ); --_button-square-start-pressed-shape: var( --m3e-connected-button-group-large-inner-pressed-shape, ${DesignToken.shape.corner.medium} ); } :host([variant="connected"][size="extra-large"]) ::slotted(:state(-first)[size="extra-large"]), :host([variant="connected"][size="extra-large"]) ::slotted(:not(:state(-first)):not(:state(-last))[size="extra-large"]) { --_button-rounded-end-shape: var( --m3e-connected-button-group-extra-large-inner-shape, ${DesignToken.shape.corner.largeIncreased} ); --_button-square-end-shape: var( --m3e-connected-button-group-extra-large-inner-shape, ${DesignToken.shape.corner.largeIncreased} ); --_button-square-end-pressed-shape: var( --m3e-connected-button-group-extra-large-inner-pressed-shape, ${DesignToken.shape.corner.large} ); } :host([variant="connected"][size="extra-large"]) ::slotted(:state(-last)[size="extra-large"]), :host([variant="connected"][size="extra-large"]) ::slotted(:not(:state(-first)):not(:state(-last))[size="extra-large"]) { --_button-rounded-start-shape: var( --m3e-connected-button-group-extra-large-inner-shape, ${DesignToken.shape.corner.largeIncreased} ); --_button-square-start-shape: var( --m3e-connected-button-group-extra-large-inner-shape, ${DesignToken.shape.corner.largeIncreased} ); --_button-square-start-pressed-shape: var( --m3e-connected-button-group-extra-large-inner-pressed-shape, ${DesignToken.shape.corner.large} ); }`;
+M3eButtonGroupElement.styles = css`:host { display: flex; vertical-align: middle; flex-wrap: nowrap; align-items: center; } .base { display: flex; vertical-align: middle; flex-wrap: nowrap; align-items: center; } :host([variant="standard"]) { justify-content: center; } :host([variant="connected"]) .base { flex: 1 1 auto; } :host([variant="standard"]) .base { width: fit-content; flex: none; } :host([variant="standard"]) .base.pressed { justify-content: space-between; width: var(--_button-group-width); } :host([variant="standard"][size="extra-small"]) .base { column-gap: var(--m3e-standard-button-group-extra-small-spacing, 1.125rem); } :host([variant="standard"][size="small"]) .base { column-gap: var(--m3e-standard-button-group-small-spacing, 0.75rem); } :host([variant="standard"][size="medium"]).base { column-gap: var(--m3e-standard-button-group-medium-spacing, 0.5rem); } :host([variant="standard"][size="large"]) .base { column-gap: var(--m3e-standard-button-group-large-spacing, 0.5rem); } :host([variant="standard"][size="extra-large"]) .base { column-gap: var(--m3e-standard-button-group-extra-large-spacing, 0.5rem); } :host([variant="connected"]) .base { column-gap: var(--m3e-connected-button-group-spacing, 0.125rem); } :host([variant="connected"][size="extra-small"]) ::slotted(:is(:state(--first), :--first)[size="extra-small"]), :host([variant="connected"][size="extra-small"]) ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size="extra-small"]) { --_button-rounded-end-shape: var( --m3e-connected-button-group-extra-small-inner-shape, ${DesignToken.shape.corner.small} ); --_button-square-end-shape: var( --m3e-connected-button-group-extra-small-inner-shape, ${DesignToken.shape.corner.small} ); --_button-square-end-pressed-shape: var( --m3e-connected-button-group-extra-small-inner-pressed-shape, ${DesignToken.shape.corner.extraSmall} ); } :host([variant="connected"][size="extra-small"]) ::slotted(:is(:state(--last), :--last)[size="extra-small"]), :host([variant="connected"][size="extra-small"]) ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size="extra-small"]) { --_button-rounded-start-shape: var( --m3e-connected-button-group-extra-small-inner-shape, ${DesignToken.shape.corner.small} ); --_button-square-start-shape: var( --m3e-connected-button-group-extra-small-inner-shape, ${DesignToken.shape.corner.small} ); --_button-square-start-pressed-shape: var( --m3e-connected-button-group-extra-small-inner-pressed-shape, ${DesignToken.shape.corner.extraSmall} ); } :host([variant="connected"][size="small"]) ::slotted(:is(:state(--first), :--first)[size="small"]), :host([variant="connected"][size="small"]) ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size="small"]) { --_button-rounded-end-shape: var( --m3e-connected-button-group-small-inner-shape, ${DesignToken.shape.corner.small} ); --_button-square-end-shape: var( --m3e-connected-button-group-small-inner-shape, ${DesignToken.shape.corner.small} ); --_button-end-shape-pressed-morph: var( --m3e-connected-button-group-small-inner-pressed-shape, ${DesignToken.shape.corner.extraSmall} ); } :host([variant="connected"][size="small"]) ::slotted(:is(:state(--last), :--last)[size="small"]), :host([variant="connected"][size="small"]) ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size="small"]) { --_button-rounded-start-shape: var( --m3e-connected-button-group-small-inner-shape, ${DesignToken.shape.corner.small} ); --_button-square-start-shape: var( --m3e-connected-button-group-small-inner-shape, ${DesignToken.shape.corner.small} ); --_button-start-shape-pressed-morph: var( --m3e-connected-button-group-small-inner-pressed-shape, ${DesignToken.shape.corner.extraSmall} ); } :host([variant="connected"][size="medium"]) ::slotted(:is(:state(--first), :--first)[size="medium"]), :host([variant="connected"][size="medium"]) ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size="medium"]) { --_button-rounded-end-shape: var( --m3e-connected-button-group-medium-inner-shape, ${DesignToken.shape.corner.small} ); --_button-square-end-shape: var( --m3e-connected-button-group-medium-inner-shape, ${DesignToken.shape.corner.small} ); --_button-square-end-pressed-shape: var( --m3e-connected-button-group-medium-inner-pressed-shape, ${DesignToken.shape.corner.extraSmall} ); } :host([variant="connected"][size="medium"]) ::slotted(:is(:state(--last), :--last)[size="medium"]), :host([variant="connected"][size="medium"]) ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size="medium"]) { --_button-rounded-start-shape: var( --m3e-connected-button-group-medium-inner-shape, ${DesignToken.shape.corner.small} ); --_button-square-start-shape: var( --m3e-connected-button-group-medium-inner-shape, ${DesignToken.shape.corner.small} ); --_button-square-start-pressed-shape: var( --m3e-connected-button-group-medium-inner-pressed-shape, ${DesignToken.shape.corner.extraSmall} ); } :host([variant="connected"][size="large"]) ::slotted(:is(:state(--first), :--first)[size="large"]), :host([variant="connected"][size="large"]) ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size="large"]) { --_button-rounded-end-shape: var( --m3e-connected-button-group-large-inner-shape, ${DesignToken.shape.corner.large} ); --_button-square-end-shape: var( --m3e-connected-button-group-large-inner-shape, ${DesignToken.shape.corner.large} ); --_button-square-end-pressed-shape: var( --m3e-connected-button-group-large-inner-pressed-shape, ${DesignToken.shape.corner.medium} ); } :host([variant="connected"][size="large"]) ::slotted(:is(:state(--last), :--last)[size="large"]), :host([variant="connected"][size="large"]) ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size="large"]) { --_button-rounded-start-shape: var( --m3e-connected-button-group-large-inner-shape, ${DesignToken.shape.corner.large} ); --_button-square-start-shape: var( --m3e-connected-button-group-large-inner-shape, ${DesignToken.shape.corner.large} ); --_button-square-start-pressed-shape: var( --m3e-connected-button-group-large-inner-pressed-shape, ${DesignToken.shape.corner.medium} ); } :host([variant="connected"][size="extra-large"]) ::slotted(:is(:state(--first), :--first)[size="extra-large"]), :host([variant="connected"][size="extra-large"]) ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size="extra-large"]) { --_button-rounded-end-shape: var( --m3e-connected-button-group-extra-large-inner-shape, ${DesignToken.shape.corner.largeIncreased} ); --_button-square-end-shape: var( --m3e-connected-button-group-extra-large-inner-shape, ${DesignToken.shape.corner.largeIncreased} ); --_button-square-end-pressed-shape: var( --m3e-connected-button-group-extra-large-inner-pressed-shape, ${DesignToken.shape.corner.large} ); } :host([variant="connected"][size="extra-large"]) ::slotted(:is(:state(--last), :--last)[size="extra-large"]), :host([variant="connected"][size="extra-large"]) ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size="extra-large"]) { --_button-rounded-start-shape: var( --m3e-connected-button-group-extra-large-inner-shape, ${DesignToken.shape.corner.largeIncreased} ); --_button-square-start-shape: var( --m3e-connected-button-group-extra-large-inner-shape, ${DesignToken.shape.corner.largeIncreased} ); --_button-square-start-pressed-shape: var( --m3e-connected-button-group-extra-large-inner-pressed-shape, ${DesignToken.shape.corner.large} ); }`;
 __decorate([query(".base")], M3eButtonGroupElement.prototype, "_base", void 0);
 __decorate([property({
   reflect: true

package/dist/button-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-group.js","sources":["../../src/button-group/ButtonGroupElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property, query, queryAssignedElements } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  PressedController,\r\n  Role,\r\n  isSelectedMixin,\r\n  DesignToken,\r\n  setCustomState,\r\n  addCustomState,\r\n  customElement,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { M3eButtonElement } from \"@m3e/web/button\";\r\nimport { M3eIconButtonElement } from \"@m3e/web/icon-button\";\r\n\r\nimport { ButtonGroupVariant } from \"./ButtonGroupVariant\";\r\nimport { ButtonGroupSize } from \"./ButtonGroupSize\";\r\n\r\n/**\r\n * Organizes buttons and adds interactions between them.\r\n *\r\n * @description\r\n * The `m3e-button-group` component arranges multiple buttons into a unified, expressive layout,\r\n * supporting both `standard` and `connected` variants. It enables seamless, accessible grouping\r\n * of actions, adapts to various sizes, and ensures consistent spacing, shape, and alignment.\r\n * Designed according to Material 3 principles, it empowers users to interact with related actions\r\n * in a visually harmonious and intuitive way.\r\n *\r\n * @example\r\n * The following example illustrates a standard button group.\r\n * ``` html\r\n * <m3e-button-group>\r\n *  <m3e-icon-button variant=\"tonal\" toggle><m3e-icon name=\"format_bold\"></m3e-icon></m3e-icon-button>\r\n *  <m3e-icon-button variant=\"tonal\" toggle><m3e-icon name=\"format_italic\"></m3e-icon></m3e-icon-button>\r\n *  <m3e-icon-button variant=\"tonal\" toggle><m3e-icon name=\"format_underlined\"></m3e-icon></m3e-icon-button>\r\n * </m3e-button-group>\r\n * ```\r\n * @example\r\n * The next example illustrates a connected button group.\r\n * ```html\r\n * <m3e-button-group variant=\"connected\">\r\n *  <m3e-button variant=\"tonal\" shape=\"square\" toggle>Start</m3e-button>\r\n *  <m3e-button variant=\"tonal\" shape=\"square\" toggle>Directions</m3e-button>\r\n *  <m3e-button variant=\"tonal\" shape=\"square\" toggle>Share</m3e-button>\r\n * </m3e-button-group>\r\n * ```\r\n *\r\n * @tag m3e-button-group\r\n *\r\n * @slot - Renders the buttons of the group.\r\n *\r\n * @attr multi - Whether multiple toggle buttons can be selected.\r\n * @attr size - The size of the group.\r\n * @attr variant - The appearance variant of the group.\r\n *\r\n * @cssprop --m3e-standard-button-group-extra-small-spacing - Spacing between buttons in standard variant, extra-small size.\r\n * @cssprop --m3e-standard-button-group-small-spacing - Spacing between buttons in standard variant, small size.\r\n * @cssprop --m3e-standard-button-group-medium-spacing - Spacing between buttons in standard variant, medium size.\r\n * @cssprop --m3e-standard-button-group-large-spacing - Spacing between buttons in standard variant, large size.\r\n * @cssprop --m3e-standard-button-group-extra-large-spacing - Spacing between buttons in standard variant, extra-large size.\r\n * @cssprop --m3e-connected-button-group-spacing - Spacing between buttons in connected variant.\r\n * @cssprop --m3e-connected-button-group-extra-small-inner-shape - Corner shape for connected variant, extra-small size.\r\n * @cssprop --m3e-connected-button-group-extra-small-inner-pressed-shape - Pressed corner shape for connected variant, extra-small size.\r\n * @cssprop --m3e-connected-button-group-small-inner-shape - Corner shape for connected variant, small size.\r\n * @cssprop --m3e-connected-button-group-small-inner-pressed-shape - Pressed corner shape for connected variant, small size.\r\n * @cssprop --m3e-connected-button-group-medium-inner-shape - Corner shape for connected variant, medium size.\r\n * @cssprop --m3e-connected-button-group-medium-inner-pressed-shape - Pressed corner shape for connected variant, medium size.\r\n * @cssprop --m3e-connected-button-group-large-inner-shape - Corner shape for connected variant, large size.\r\n * @cssprop --m3e-connected-button-group-large-inner-pressed-shape - Pressed corner shape for connected variant, large size.\r\n * @cssprop --m3e-connected-button-group-extra-large-inner-shape - Corner shape for connected variant, extra-large size.\r\n * @cssprop --m3e-connected-button-group-extra-large-inner-pressed-shape - Pressed corner shape for connected variant, extra-large size.\r\n */\r\n@customElement(\"m3e-button-group\")\r\nexport class M3eButtonGroupElement extends Role(LitElement, \"group\") {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: flex;\r\n      vertical-align: middle;\r\n      flex-wrap: nowrap;\r\n      align-items: center;\r\n    }\r\n    .base {\r\n      display: flex;\r\n      vertical-align: middle;\r\n      flex-wrap: nowrap;\r\n      align-items: center;\r\n    }\r\n    :host([variant=\"standard\"]) {\r\n      justify-content: center;\r\n    }\r\n    :host([variant=\"connected\"]) .base {\r\n      flex: 1 1 auto;\r\n    }\r\n    :host([variant=\"standard\"]) .base {\r\n      width: fit-content;\r\n      flex: none;\r\n    }\r\n    :host([variant=\"standard\"]) .base.pressed {\r\n      justify-content: space-between;\r\n      width: var(--_button-group-width);\r\n    }\r\n    :host([variant=\"standard\"][size=\"extra-small\"]) .base {\r\n      column-gap: var(--m3e-standard-button-group-extra-small-spacing, 1.125rem);\r\n    }\r\n    :host([variant=\"standard\"][size=\"small\"]) .base {\r\n      column-gap: var(--m3e-standard-button-group-small-spacing, 0.75rem);\r\n    }\r\n    :host([variant=\"standard\"][size=\"medium\"]).base {\r\n      column-gap: var(--m3e-standard-button-group-medium-spacing, 0.5rem);\r\n    }\r\n    :host([variant=\"standard\"][size=\"large\"]) .base {\r\n      column-gap: var(--m3e-standard-button-group-large-spacing, 0.5rem);\r\n    }\r\n    :host([variant=\"standard\"][size=\"extra-large\"]) .base {\r\n      column-gap: var(--m3e-standard-button-group-extra-large-spacing, 0.5rem);\r\n    }\r\n    :host([variant=\"connected\"]) .base {\r\n      column-gap: var(--m3e-connected-button-group-spacing, 0.125rem);\r\n    }\r\n    :host([variant=\"connected\"][size=\"extra-small\"]) ::slotted(:state(-first)[size=\"extra-small\"]),\r\n    :host([variant=\"connected\"][size=\"extra-small\"])\r\n      ::slotted(:not(:state(-first)):not(:state(-last))[size=\"extra-small\"]) {\r\n      --_button-rounded-end-shape: var(\r\n        --m3e-connected-button-group-extra-small-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-end-shape: var(\r\n        --m3e-connected-button-group-extra-small-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-end-pressed-shape: var(\r\n        --m3e-connected-button-group-extra-small-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.extraSmall}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"extra-small\"]) ::slotted(:state(-last)[size=\"extra-small\"]),\r\n    :host([variant=\"connected\"][size=\"extra-small\"])\r\n      ::slotted(:not(:state(-first)):not(:state(-last))[size=\"extra-small\"]) {\r\n      --_button-rounded-start-shape: var(\r\n        --m3e-connected-button-group-extra-small-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-start-shape: var(\r\n        --m3e-connected-button-group-extra-small-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-start-pressed-shape: var(\r\n        --m3e-connected-button-group-extra-small-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.extraSmall}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"small\"]) ::slotted(:state(-first)[size=\"small\"]),\r\n    :host([variant=\"connected\"][size=\"small\"]) ::slotted(:not(:state(-first)):not(:state(-last))[size=\"small\"]) {\r\n      --_button-rounded-end-shape: var(\r\n        --m3e-connected-button-group-small-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-end-shape: var(\r\n        --m3e-connected-button-group-small-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-end-shape-pressed-morph: var(\r\n        --m3e-connected-button-group-small-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.extraSmall}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"small\"]) ::slotted(:state(-last)[size=\"small\"]),\r\n    :host([variant=\"connected\"][size=\"small\"]) ::slotted(:not(:state(-first)):not(:state(-last))[size=\"small\"]) {\r\n      --_button-rounded-start-shape: var(\r\n        --m3e-connected-button-group-small-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-start-shape: var(\r\n        --m3e-connected-button-group-small-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-start-shape-pressed-morph: var(\r\n        --m3e-connected-button-group-small-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.extraSmall}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"medium\"]) ::slotted(:state(-first)[size=\"medium\"]),\r\n    :host([variant=\"connected\"][size=\"medium\"]) ::slotted(:not(:state(-first)):not(:state(-last))[size=\"medium\"]) {\r\n      --_button-rounded-end-shape: var(\r\n        --m3e-connected-button-group-medium-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-end-shape: var(\r\n        --m3e-connected-button-group-medium-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-end-pressed-shape: var(\r\n        --m3e-connected-button-group-medium-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.extraSmall}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"medium\"]) ::slotted(:state(-last)[size=\"medium\"]),\r\n    :host([variant=\"connected\"][size=\"medium\"]) ::slotted(:not(:state(-first)):not(:state(-last))[size=\"medium\"]) {\r\n      --_button-rounded-start-shape: var(\r\n        --m3e-connected-button-group-medium-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-start-shape: var(\r\n        --m3e-connected-button-group-medium-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-start-pressed-shape: var(\r\n        --m3e-connected-button-group-medium-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.extraSmall}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"large\"]) ::slotted(:state(-first)[size=\"large\"]),\r\n    :host([variant=\"connected\"][size=\"large\"]) ::slotted(:not(:state(-first)):not(:state(-last))[size=\"large\"]) {\r\n      --_button-rounded-end-shape: var(\r\n        --m3e-connected-button-group-large-inner-shape,\r\n        ${DesignToken.shape.corner.large}\r\n      );\r\n      --_button-square-end-shape: var(\r\n        --m3e-connected-button-group-large-inner-shape,\r\n        ${DesignToken.shape.corner.large}\r\n      );\r\n      --_button-square-end-pressed-shape: var(\r\n        --m3e-connected-button-group-large-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.medium}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"large\"]) ::slotted(:state(-last)[size=\"large\"]),\r\n    :host([variant=\"connected\"][size=\"large\"]) ::slotted(:not(:state(-first)):not(:state(-last))[size=\"large\"]) {\r\n      --_button-rounded-start-shape: var(\r\n        --m3e-connected-button-group-large-inner-shape,\r\n        ${DesignToken.shape.corner.large}\r\n      );\r\n      --_button-square-start-shape: var(\r\n        --m3e-connected-button-group-large-inner-shape,\r\n        ${DesignToken.shape.corner.large}\r\n      );\r\n      --_button-square-start-pressed-shape: var(\r\n        --m3e-connected-button-group-large-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.medium}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"extra-large\"]) ::slotted(:state(-first)[size=\"extra-large\"]),\r\n    :host([variant=\"connected\"][size=\"extra-large\"])\r\n      ::slotted(:not(:state(-first)):not(:state(-last))[size=\"extra-large\"]) {\r\n      --_button-rounded-end-shape: var(\r\n        --m3e-connected-button-group-extra-large-inner-shape,\r\n        ${DesignToken.shape.corner.largeIncreased}\r\n      );\r\n      --_button-square-end-shape: var(\r\n        --m3e-connected-button-group-extra-large-inner-shape,\r\n        ${DesignToken.shape.corner.largeIncreased}\r\n      );\r\n      --_button-square-end-pressed-shape: var(\r\n        --m3e-connected-button-group-extra-large-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.large}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"extra-large\"]) ::slotted(:state(-last)[size=\"extra-large\"]),\r\n    :host([variant=\"connected\"][size=\"extra-large\"])\r\n      ::slotted(:not(:state(-first)):not(:state(-last))[size=\"extra-large\"]) {\r\n      --_button-rounded-start-shape: var(\r\n        --m3e-connected-button-group-extra-large-inner-shape,\r\n        ${DesignToken.shape.corner.largeIncreased}\r\n      );\r\n      --_button-square-start-shape: var(\r\n        --m3e-connected-button-group-extra-large-inner-shape,\r\n        ${DesignToken.shape.corner.largeIncreased}\r\n      );\r\n      --_button-square-start-pressed-shape: var(\r\n        --m3e-connected-button-group-extra-large-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.large}\r\n      );\r\n    }\r\n  `;\r\n\r\n  /** @private */ readonly #pressedController = new PressedController(this, {\r\n    target: null,\r\n    capture: true,\r\n    minPressedDuration: 150,\r\n    isPressedKey: (key) => key === \" \",\r\n    callback: (pressed) => {\r\n      if (!this._base) return;\r\n      if (!pressed || this.variant === \"connected\") {\r\n        this._base.style.removeProperty(\"--_button-group-width\");\r\n        this._base.classList.remove(\"pressed\");\r\n      } else {\r\n        this._base.classList.add(\"pressed\");\r\n        this._base.style.setProperty(\"--_button-group-width\", `${this._base.getBoundingClientRect().width}px`);\r\n      }\r\n    },\r\n  });\r\n\r\n  @query(\".base\") private readonly _base?: HTMLElement;\r\n\r\n  /**\r\n   * The appearance variant of the group.\r\n   * @default \"standard\"\r\n   */\r\n  @property({ reflect: true }) variant: ButtonGroupVariant = \"standard\";\r\n\r\n  /**\r\n   * The size of the group.\r\n   * @default \"small\"\r\n   */\r\n  @property({ reflect: true }) size: ButtonGroupSize = \"small\";\r\n\r\n  /**\r\n   * Whether multiple toggle buttons can be selected.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean }) multi = false;\r\n\r\n  /** The buttons contained by the group. */\r\n  @queryAssignedElements({ slot: \"\", selector: \"m3e-button,m3e-icon-button\", flatten: true })\r\n  readonly buttons!: ReadonlyArray<M3eButtonElement | M3eIconButtonElement>;\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    if (this.hasAttribute(\"disable-role\")) {\r\n      this.role = null;\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this._base?.style.removeProperty(\"--_button-group-width\");\r\n    this._base?.classList.remove(\"pressed\");\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues<this>): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"multi\") || changedProperties.has(\"variant\")) {\r\n      this.#updateButtons();\r\n    }\r\n    if (changedProperties.has(\"variant\")) {\r\n      this._base?.style.removeProperty(\"--_button-group-width\");\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <slot @slotchange=\"${this.#updateButtons}\" @change=\"${this.#handleChange}\"></slot>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #updateButtons(): void {\r\n    const buttons = this.buttons;\r\n    for (const target of this.#pressedController.targets) {\r\n      this.#pressedController.unobserve(target);\r\n    }\r\n    const canToggle = [...buttons].some((x) => x.toggle);\r\n\r\n    // disable-role is an internal attribute to by split-button to disable setting roles.\r\n    if (!this.hasAttribute(\"disable-role\")) {\r\n      this.role = canToggle && !this.multi ? \"radiogroup\" : \"group\";\r\n    }\r\n\r\n    const buttonRole = this.role === \"radiogroup\" ? \"radio\" : \"button\";\r\n\r\n    buttons.forEach((button, i) => {\r\n      this.#pressedController.observe(button);\r\n      setCustomState(button, \"-connected\", this.variant === \"connected\");\r\n      addCustomState(button, \"-grouped\");\r\n      setCustomState(button, \"-first\", i == 0);\r\n      setCustomState(button, \"-last\", i == buttons.length - 1);\r\n\r\n      if (!this.hasAttribute(\"disable-role\") && button.role !== buttonRole && button.toggle) {\r\n        const checked = !button.toggle ? null : button.selected ? \"true\" : \"false\";\r\n        button.role = buttonRole;\r\n        if (button.role === \"button\") {\r\n          button.ariaPressed = checked;\r\n          button.ariaChecked = null;\r\n        } else {\r\n          button.ariaChecked = checked;\r\n          button.ariaPressed = null;\r\n        }\r\n      }\r\n    });\r\n  }\r\n\r\n  /** @private */\r\n  #handleChange(e: Event): void {\r\n    if (this.multi || !(e.target instanceof HTMLElement)) return;\r\n    if (e.target.tagName === \"M3E-BUTTON\" || e.target.tagName === \"M3E-ICON-BUTTON\") {\r\n      if (!isSelectedMixin(e.target) || !e.target.selected) {\r\n        return;\r\n      }\r\n\r\n      for (const button of this.buttons) {\r\n        if (button === e.target || !button.selected) continue;\r\n        button.selected = false;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-button-group\": M3eButtonGroupElement;\r\n  }\r\n}\r\n"],"names":["M3eButtonGroupElement","Role","LitElement","constructor","_M3eButtonGroupElement_pressedController","set","PressedController","target","capture","minPressedDuration","isPressedKey","key","callback","pressed","_base","variant","style","removeProperty","classList","remove","add","setProperty","getBoundingClientRect","width","size","multi","connectedCallback","hasAttribute","role","disconnectedCallback","update","changedProperties","has","__classPrivateFieldGet","_M3eButtonGroupElement_instances","_M3eButtonGroupElement_updateButtons","call","render","html","_M3eButtonGroupElement_handleChange","buttons","targets","unobserve","canToggle","some","x","toggle","buttonRole","forEach","button","i","observe","setCustomState","addCustomState","length","checked","selected","ariaPressed","ariaChecked","e","HTMLElement","tagName","isSelectedMixin","styles","css","DesignToken","shape","corner","small","extraSmall","large","medium","largeIncreased","__decorate","query","prototype","property","reflect","type","Boolean","queryAssignedElements","slot","selector","flatten","customElement"],"mappings":"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"}
+{"version":3,"file":"button-group.js","sources":["../../src/button-group/ButtonGroupElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property, query, queryAssignedElements } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  PressedController,\r\n  Role,\r\n  isSelectedMixin,\r\n  DesignToken,\r\n  setCustomState,\r\n  addCustomState,\r\n  customElement,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { M3eButtonElement } from \"@m3e/web/button\";\r\nimport { M3eIconButtonElement } from \"@m3e/web/icon-button\";\r\n\r\nimport { ButtonGroupVariant } from \"./ButtonGroupVariant\";\r\nimport { ButtonGroupSize } from \"./ButtonGroupSize\";\r\n\r\n/**\r\n * Organizes buttons and adds interactions between them.\r\n *\r\n * @description\r\n * The `m3e-button-group` component arranges multiple buttons into a unified, expressive layout,\r\n * supporting both `standard` and `connected` variants. It enables seamless, accessible grouping\r\n * of actions, adapts to various sizes, and ensures consistent spacing, shape, and alignment.\r\n * Designed according to Material 3 principles, it empowers users to interact with related actions\r\n * in a visually harmonious and intuitive way.\r\n *\r\n * @example\r\n * The following example illustrates a standard button group.\r\n * ``` html\r\n * <m3e-button-group>\r\n *  <m3e-icon-button variant=\"tonal\" toggle><m3e-icon name=\"format_bold\"></m3e-icon></m3e-icon-button>\r\n *  <m3e-icon-button variant=\"tonal\" toggle><m3e-icon name=\"format_italic\"></m3e-icon></m3e-icon-button>\r\n *  <m3e-icon-button variant=\"tonal\" toggle><m3e-icon name=\"format_underlined\"></m3e-icon></m3e-icon-button>\r\n * </m3e-button-group>\r\n * ```\r\n * @example\r\n * The next example illustrates a connected button group.\r\n * ```html\r\n * <m3e-button-group variant=\"connected\">\r\n *  <m3e-button variant=\"tonal\" shape=\"square\" toggle>Start</m3e-button>\r\n *  <m3e-button variant=\"tonal\" shape=\"square\" toggle>Directions</m3e-button>\r\n *  <m3e-button variant=\"tonal\" shape=\"square\" toggle>Share</m3e-button>\r\n * </m3e-button-group>\r\n * ```\r\n *\r\n * @tag m3e-button-group\r\n *\r\n * @slot - Renders the buttons of the group.\r\n *\r\n * @attr multi - Whether multiple toggle buttons can be selected.\r\n * @attr size - The size of the group.\r\n * @attr variant - The appearance variant of the group.\r\n *\r\n * @cssprop --m3e-standard-button-group-extra-small-spacing - Spacing between buttons in standard variant, extra-small size.\r\n * @cssprop --m3e-standard-button-group-small-spacing - Spacing between buttons in standard variant, small size.\r\n * @cssprop --m3e-standard-button-group-medium-spacing - Spacing between buttons in standard variant, medium size.\r\n * @cssprop --m3e-standard-button-group-large-spacing - Spacing between buttons in standard variant, large size.\r\n * @cssprop --m3e-standard-button-group-extra-large-spacing - Spacing between buttons in standard variant, extra-large size.\r\n * @cssprop --m3e-connected-button-group-spacing - Spacing between buttons in connected variant.\r\n * @cssprop --m3e-connected-button-group-extra-small-inner-shape - Corner shape for connected variant, extra-small size.\r\n * @cssprop --m3e-connected-button-group-extra-small-inner-pressed-shape - Pressed corner shape for connected variant, extra-small size.\r\n * @cssprop --m3e-connected-button-group-small-inner-shape - Corner shape for connected variant, small size.\r\n * @cssprop --m3e-connected-button-group-small-inner-pressed-shape - Pressed corner shape for connected variant, small size.\r\n * @cssprop --m3e-connected-button-group-medium-inner-shape - Corner shape for connected variant, medium size.\r\n * @cssprop --m3e-connected-button-group-medium-inner-pressed-shape - Pressed corner shape for connected variant, medium size.\r\n * @cssprop --m3e-connected-button-group-large-inner-shape - Corner shape for connected variant, large size.\r\n * @cssprop --m3e-connected-button-group-large-inner-pressed-shape - Pressed corner shape for connected variant, large size.\r\n * @cssprop --m3e-connected-button-group-extra-large-inner-shape - Corner shape for connected variant, extra-large size.\r\n * @cssprop --m3e-connected-button-group-extra-large-inner-pressed-shape - Pressed corner shape for connected variant, extra-large size.\r\n */\r\n@customElement(\"m3e-button-group\")\r\nexport class M3eButtonGroupElement extends Role(LitElement, \"group\") {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: flex;\r\n      vertical-align: middle;\r\n      flex-wrap: nowrap;\r\n      align-items: center;\r\n    }\r\n    .base {\r\n      display: flex;\r\n      vertical-align: middle;\r\n      flex-wrap: nowrap;\r\n      align-items: center;\r\n    }\r\n    :host([variant=\"standard\"]) {\r\n      justify-content: center;\r\n    }\r\n    :host([variant=\"connected\"]) .base {\r\n      flex: 1 1 auto;\r\n    }\r\n    :host([variant=\"standard\"]) .base {\r\n      width: fit-content;\r\n      flex: none;\r\n    }\r\n    :host([variant=\"standard\"]) .base.pressed {\r\n      justify-content: space-between;\r\n      width: var(--_button-group-width);\r\n    }\r\n    :host([variant=\"standard\"][size=\"extra-small\"]) .base {\r\n      column-gap: var(--m3e-standard-button-group-extra-small-spacing, 1.125rem);\r\n    }\r\n    :host([variant=\"standard\"][size=\"small\"]) .base {\r\n      column-gap: var(--m3e-standard-button-group-small-spacing, 0.75rem);\r\n    }\r\n    :host([variant=\"standard\"][size=\"medium\"]).base {\r\n      column-gap: var(--m3e-standard-button-group-medium-spacing, 0.5rem);\r\n    }\r\n    :host([variant=\"standard\"][size=\"large\"]) .base {\r\n      column-gap: var(--m3e-standard-button-group-large-spacing, 0.5rem);\r\n    }\r\n    :host([variant=\"standard\"][size=\"extra-large\"]) .base {\r\n      column-gap: var(--m3e-standard-button-group-extra-large-spacing, 0.5rem);\r\n    }\r\n    :host([variant=\"connected\"]) .base {\r\n      column-gap: var(--m3e-connected-button-group-spacing, 0.125rem);\r\n    }\r\n    :host([variant=\"connected\"][size=\"extra-small\"]) ::slotted(:is(:state(--first), :--first)[size=\"extra-small\"]),\r\n    :host([variant=\"connected\"][size=\"extra-small\"])\r\n      ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size=\"extra-small\"]) {\r\n      --_button-rounded-end-shape: var(\r\n        --m3e-connected-button-group-extra-small-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-end-shape: var(\r\n        --m3e-connected-button-group-extra-small-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-end-pressed-shape: var(\r\n        --m3e-connected-button-group-extra-small-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.extraSmall}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"extra-small\"]) ::slotted(:is(:state(--last), :--last)[size=\"extra-small\"]),\r\n    :host([variant=\"connected\"][size=\"extra-small\"])\r\n      ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size=\"extra-small\"]) {\r\n      --_button-rounded-start-shape: var(\r\n        --m3e-connected-button-group-extra-small-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-start-shape: var(\r\n        --m3e-connected-button-group-extra-small-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-start-pressed-shape: var(\r\n        --m3e-connected-button-group-extra-small-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.extraSmall}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"small\"]) ::slotted(:is(:state(--first), :--first)[size=\"small\"]),\r\n    :host([variant=\"connected\"][size=\"small\"])\r\n      ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size=\"small\"]) {\r\n      --_button-rounded-end-shape: var(\r\n        --m3e-connected-button-group-small-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-end-shape: var(\r\n        --m3e-connected-button-group-small-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-end-shape-pressed-morph: var(\r\n        --m3e-connected-button-group-small-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.extraSmall}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"small\"]) ::slotted(:is(:state(--last), :--last)[size=\"small\"]),\r\n    :host([variant=\"connected\"][size=\"small\"])\r\n      ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size=\"small\"]) {\r\n      --_button-rounded-start-shape: var(\r\n        --m3e-connected-button-group-small-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-start-shape: var(\r\n        --m3e-connected-button-group-small-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-start-shape-pressed-morph: var(\r\n        --m3e-connected-button-group-small-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.extraSmall}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"medium\"]) ::slotted(:is(:state(--first), :--first)[size=\"medium\"]),\r\n    :host([variant=\"connected\"][size=\"medium\"])\r\n      ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size=\"medium\"]) {\r\n      --_button-rounded-end-shape: var(\r\n        --m3e-connected-button-group-medium-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-end-shape: var(\r\n        --m3e-connected-button-group-medium-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-end-pressed-shape: var(\r\n        --m3e-connected-button-group-medium-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.extraSmall}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"medium\"]) ::slotted(:is(:state(--last), :--last)[size=\"medium\"]),\r\n    :host([variant=\"connected\"][size=\"medium\"])\r\n      ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size=\"medium\"]) {\r\n      --_button-rounded-start-shape: var(\r\n        --m3e-connected-button-group-medium-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-start-shape: var(\r\n        --m3e-connected-button-group-medium-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-start-pressed-shape: var(\r\n        --m3e-connected-button-group-medium-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.extraSmall}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"large\"]) ::slotted(:is(:state(--first), :--first)[size=\"large\"]),\r\n    :host([variant=\"connected\"][size=\"large\"])\r\n      ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size=\"large\"]) {\r\n      --_button-rounded-end-shape: var(\r\n        --m3e-connected-button-group-large-inner-shape,\r\n        ${DesignToken.shape.corner.large}\r\n      );\r\n      --_button-square-end-shape: var(\r\n        --m3e-connected-button-group-large-inner-shape,\r\n        ${DesignToken.shape.corner.large}\r\n      );\r\n      --_button-square-end-pressed-shape: var(\r\n        --m3e-connected-button-group-large-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.medium}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"large\"]) ::slotted(:is(:state(--last), :--last)[size=\"large\"]),\r\n    :host([variant=\"connected\"][size=\"large\"])\r\n      ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size=\"large\"]) {\r\n      --_button-rounded-start-shape: var(\r\n        --m3e-connected-button-group-large-inner-shape,\r\n        ${DesignToken.shape.corner.large}\r\n      );\r\n      --_button-square-start-shape: var(\r\n        --m3e-connected-button-group-large-inner-shape,\r\n        ${DesignToken.shape.corner.large}\r\n      );\r\n      --_button-square-start-pressed-shape: var(\r\n        --m3e-connected-button-group-large-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.medium}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"extra-large\"]) ::slotted(:is(:state(--first), :--first)[size=\"extra-large\"]),\r\n    :host([variant=\"connected\"][size=\"extra-large\"])\r\n      ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size=\"extra-large\"]) {\r\n      --_button-rounded-end-shape: var(\r\n        --m3e-connected-button-group-extra-large-inner-shape,\r\n        ${DesignToken.shape.corner.largeIncreased}\r\n      );\r\n      --_button-square-end-shape: var(\r\n        --m3e-connected-button-group-extra-large-inner-shape,\r\n        ${DesignToken.shape.corner.largeIncreased}\r\n      );\r\n      --_button-square-end-pressed-shape: var(\r\n        --m3e-connected-button-group-extra-large-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.large}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"extra-large\"]) ::slotted(:is(:state(--last), :--last)[size=\"extra-large\"]),\r\n    :host([variant=\"connected\"][size=\"extra-large\"])\r\n      ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size=\"extra-large\"]) {\r\n      --_button-rounded-start-shape: var(\r\n        --m3e-connected-button-group-extra-large-inner-shape,\r\n        ${DesignToken.shape.corner.largeIncreased}\r\n      );\r\n      --_button-square-start-shape: var(\r\n        --m3e-connected-button-group-extra-large-inner-shape,\r\n        ${DesignToken.shape.corner.largeIncreased}\r\n      );\r\n      --_button-square-start-pressed-shape: var(\r\n        --m3e-connected-button-group-extra-large-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.large}\r\n      );\r\n    }\r\n  `;\r\n\r\n  /** @private */ readonly #pressedController = new PressedController(this, {\r\n    target: null,\r\n    capture: true,\r\n    minPressedDuration: 150,\r\n    isPressedKey: (key) => key === \" \",\r\n    callback: (pressed) => {\r\n      if (!this._base) return;\r\n      if (!pressed || this.variant === \"connected\") {\r\n        this._base.style.removeProperty(\"--_button-group-width\");\r\n        this._base.classList.remove(\"pressed\");\r\n      } else {\r\n        this._base.classList.add(\"pressed\");\r\n        this._base.style.setProperty(\"--_button-group-width\", `${this._base.getBoundingClientRect().width}px`);\r\n      }\r\n    },\r\n  });\r\n\r\n  @query(\".base\") private readonly _base?: HTMLElement;\r\n\r\n  /**\r\n   * The appearance variant of the group.\r\n   * @default \"standard\"\r\n   */\r\n  @property({ reflect: true }) variant: ButtonGroupVariant = \"standard\";\r\n\r\n  /**\r\n   * The size of the group.\r\n   * @default \"small\"\r\n   */\r\n  @property({ reflect: true }) size: ButtonGroupSize = \"small\";\r\n\r\n  /**\r\n   * Whether multiple toggle buttons can be selected.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean }) multi = false;\r\n\r\n  /** The buttons contained by the group. */\r\n  @queryAssignedElements({ slot: \"\", selector: \"m3e-button,m3e-icon-button\", flatten: true })\r\n  readonly buttons!: ReadonlyArray<M3eButtonElement | M3eIconButtonElement>;\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    if (this.hasAttribute(\"disable-role\")) {\r\n      this.role = null;\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this._base?.style.removeProperty(\"--_button-group-width\");\r\n    this._base?.classList.remove(\"pressed\");\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues<this>): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"multi\") || changedProperties.has(\"variant\")) {\r\n      this.#updateButtons();\r\n    }\r\n    if (changedProperties.has(\"variant\")) {\r\n      this._base?.style.removeProperty(\"--_button-group-width\");\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <slot @slotchange=\"${this.#updateButtons}\" @change=\"${this.#handleChange}\"></slot>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #updateButtons(): void {\r\n    const buttons = this.buttons;\r\n    for (const target of this.#pressedController.targets) {\r\n      this.#pressedController.unobserve(target);\r\n    }\r\n    const canToggle = [...buttons].some((x) => x.toggle);\r\n\r\n    // disable-role is an internal attribute to by split-button to disable setting roles.\r\n    if (!this.hasAttribute(\"disable-role\")) {\r\n      this.role = canToggle && !this.multi ? \"radiogroup\" : \"group\";\r\n    }\r\n\r\n    const buttonRole = this.role === \"radiogroup\" ? \"radio\" : \"button\";\r\n\r\n    buttons.forEach((button, i) => {\r\n      this.#pressedController.observe(button);\r\n      setCustomState(button, \"--connected\", this.variant === \"connected\");\r\n      addCustomState(button, \"--grouped\");\r\n      setCustomState(button, \"--first\", i == 0);\r\n      setCustomState(button, \"--last\", i == buttons.length - 1);\r\n\r\n      if (!this.hasAttribute(\"disable-role\") && button.role !== buttonRole && button.toggle) {\r\n        const checked = !button.toggle ? null : button.selected ? \"true\" : \"false\";\r\n        button.role = buttonRole;\r\n        if (button.role === \"button\") {\r\n          button.ariaPressed = checked;\r\n          button.ariaChecked = null;\r\n        } else {\r\n          button.ariaChecked = checked;\r\n          button.ariaPressed = null;\r\n        }\r\n      }\r\n    });\r\n  }\r\n\r\n  /** @private */\r\n  #handleChange(e: Event): void {\r\n    if (this.multi || !(e.target instanceof HTMLElement)) return;\r\n    if (e.target.tagName === \"M3E-BUTTON\" || e.target.tagName === \"M3E-ICON-BUTTON\") {\r\n      if (!isSelectedMixin(e.target) || !e.target.selected) {\r\n        return;\r\n      }\r\n\r\n      for (const button of this.buttons) {\r\n        if (button === e.target || !button.selected) continue;\r\n        button.selected = false;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-button-group\": M3eButtonGroupElement;\r\n  }\r\n}\r\n"],"names":["M3eButtonGroupElement","Role","LitElement","constructor","_M3eButtonGroupElement_pressedController","set","PressedController","target","capture","minPressedDuration","isPressedKey","key","callback","pressed","_base","variant","style","removeProperty","classList","remove","add","setProperty","getBoundingClientRect","width","size","multi","connectedCallback","hasAttribute","role","disconnectedCallback","update","changedProperties","has","__classPrivateFieldGet","_M3eButtonGroupElement_instances","_M3eButtonGroupElement_updateButtons","call","render","html","_M3eButtonGroupElement_handleChange","buttons","targets","unobserve","canToggle","some","x","toggle","buttonRole","forEach","button","i","observe","setCustomState","addCustomState","length","checked","selected","ariaPressed","ariaChecked","e","HTMLElement","tagName","isSelectedMixin","styles","css","DesignToken","shape","corner","small","extraSmall","large","medium","largeIncreased","__decorate","query","prototype","property","reflect","type","Boolean","queryAssignedElements","slot","selector","flatten","customElement"],"mappings":"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"}

package/dist/button-group.min.js

@@ -3,5 +3,5 @@
  * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
-import{__classPrivateFieldGet as e,__decorate as t}from"tslib";import{LitElement as a,html as s,css as r}from"lit";import{query as n,property as o,queryAssignedElements as l}from"lit/decorators.js";import{Role as i,PressedController as d,setCustomState as c,addCustomState as p,isSelectedMixin as u,DesignToken as h,customElement as m}from"@m3e/web/core";var g,b,v,f;let x=class extends(i(a,"group")){constructor(){super(...arguments),g.add(this),b.set(this,new d(this,{target:null,capture:!0,minPressedDuration:150,isPressedKey:e=>" "===e,callback:e=>{this._base&&(e&&"connected"!==this.variant?(this._base.classList.add("pressed"),this._base.style.setProperty("--_button-group-width",`${this._base.getBoundingClientRect().width}px`)):(this._base.style.removeProperty("--_button-group-width"),this._base.classList.remove("pressed")))}})),this.variant="standard",this.size="small",this.multi=!1}connectedCallback(){super.connectedCallback(),this.hasAttribute("disable-role")&&(this.role=null)}disconnectedCallback(){super.disconnectedCallback(),this._base?.style.removeProperty("--_button-group-width"),this._base?.classList.remove("pressed")}update(t){super.update(t),(t.has("multi")||t.has("variant"))&&e(this,g,"m",v).call(this),t.has("variant")&&this._base?.style.removeProperty("--_button-group-width")}render(){return s`<div class="base"><slot @slotchange="${e(this,g,"m",v)}" @change="${e(this,g,"m",f)}"></slot></div>`}};b=new WeakMap,g=new WeakSet,v=function(){const t=this.buttons;for(const t of e(this,b,"f").targets)e(this,b,"f").unobserve(t);const a=[...t].some(e=>e.toggle);this.hasAttribute("disable-role")||(this.role=a&&!this.multi?"radiogroup":"group");const s="radiogroup"===this.role?"radio":"button";t.forEach((a,r)=>{if(e(this,b,"f").observe(a),c(a,"-connected","connected"===this.variant),p(a,"-grouped"),c(a,"-first",0==r),c(a,"-last",r==t.length-1),!this.hasAttribute("disable-role")&&a.role!==s&&a.toggle){const e=a.toggle?a.selected?"true":"false":null;a.role=s,"button"===a.role?(a.ariaPressed=e,a.ariaChecked=null):(a.ariaChecked=e,a.ariaPressed=null)}})},f=function(e){if(!this.multi&&e.target instanceof HTMLElement&&("M3E-BUTTON"===e.target.tagName||"M3E-ICON-BUTTON"===e.target.tagName)){if(!u(e.target)||!e.target.selected)return;for(const t of this.buttons)t!==e.target&&t.selected&&(t.selected=!1)}},x.styles=r`:host { display: flex; vertical-align: middle; flex-wrap: nowrap; align-items: center; } .base { display: flex; vertical-align: middle; flex-wrap: nowrap; align-items: center; } :host([variant="standard"]) { justify-content: center; } :host([variant="connected"]) .base { flex: 1 1 auto; } :host([variant="standard"]) .base { width: fit-content; flex: none; } :host([variant="standard"]) .base.pressed { justify-content: space-between; width: var(--_button-group-width); } :host([variant="standard"][size="extra-small"]) .base { column-gap: var(--m3e-standard-button-group-extra-small-spacing, 1.125rem); } :host([variant="standard"][size="small"]) .base { column-gap: var(--m3e-standard-button-group-small-spacing, 0.75rem); } :host([variant="standard"][size="medium"]).base { column-gap: var(--m3e-standard-button-group-medium-spacing, 0.5rem); } :host([variant="standard"][size="large"]) .base { column-gap: var(--m3e-standard-button-group-large-spacing, 0.5rem); } :host([variant="standard"][size="extra-large"]) .base { column-gap: var(--m3e-standard-button-group-extra-large-spacing, 0.5rem); } :host([variant="connected"]) .base { column-gap: var(--m3e-connected-button-group-spacing, 0.125rem); } :host([variant="connected"][size="extra-small"]) ::slotted(:state(-first)[size="extra-small"]), :host([variant="connected"][size="extra-small"]) ::slotted(:not(:state(-first)):not(:state(-last))[size="extra-small"]) { --_button-rounded-end-shape: var( --m3e-connected-button-group-extra-small-inner-shape, ${h.shape.corner.small} ); --_button-square-end-shape: var( --m3e-connected-button-group-extra-small-inner-shape, ${h.shape.corner.small} ); --_button-square-end-pressed-shape: var( --m3e-connected-button-group-extra-small-inner-pressed-shape, ${h.shape.corner.extraSmall} ); } :host([variant="connected"][size="extra-small"]) ::slotted(:state(-last)[size="extra-small"]), :host([variant="connected"][size="extra-small"]) ::slotted(:not(:state(-first)):not(:state(-last))[size="extra-small"]) { --_button-rounded-start-shape: var( --m3e-connected-button-group-extra-small-inner-shape, ${h.shape.corner.small} ); --_button-square-start-shape: var( --m3e-connected-button-group-extra-small-inner-shape, ${h.shape.corner.small} ); --_button-square-start-pressed-shape: var( --m3e-connected-button-group-extra-small-inner-pressed-shape, ${h.shape.corner.extraSmall} ); } :host([variant="connected"][size="small"]) ::slotted(:state(-first)[size="small"]), :host([variant="connected"][size="small"]) ::slotted(:not(:state(-first)):not(:state(-last))[size="small"]) { --_button-rounded-end-shape: var( --m3e-connected-button-group-small-inner-shape, ${h.shape.corner.small} ); --_button-square-end-shape: var( --m3e-connected-button-group-small-inner-shape, ${h.shape.corner.small} ); --_button-end-shape-pressed-morph: var( --m3e-connected-button-group-small-inner-pressed-shape, ${h.shape.corner.extraSmall} ); } :host([variant="connected"][size="small"]) ::slotted(:state(-last)[size="small"]), :host([variant="connected"][size="small"]) ::slotted(:not(:state(-first)):not(:state(-last))[size="small"]) { --_button-rounded-start-shape: var( --m3e-connected-button-group-small-inner-shape, ${h.shape.corner.small} ); --_button-square-start-shape: var( --m3e-connected-button-group-small-inner-shape, ${h.shape.corner.small} ); --_button-start-shape-pressed-morph: var( --m3e-connected-button-group-small-inner-pressed-shape, ${h.shape.corner.extraSmall} ); } :host([variant="connected"][size="medium"]) ::slotted(:state(-first)[size="medium"]), :host([variant="connected"][size="medium"]) ::slotted(:not(:state(-first)):not(:state(-last))[size="medium"]) { --_button-rounded-end-shape: var( --m3e-connected-button-group-medium-inner-shape, ${h.shape.corner.small} ); --_button-square-end-shape: var( --m3e-connected-button-group-medium-inner-shape, ${h.shape.corner.small} ); --_button-square-end-pressed-shape: var( --m3e-connected-button-group-medium-inner-pressed-shape, ${h.shape.corner.extraSmall} ); } :host([variant="connected"][size="medium"]) ::slotted(:state(-last)[size="medium"]), :host([variant="connected"][size="medium"]) ::slotted(:not(:state(-first)):not(:state(-last))[size="medium"]) { --_button-rounded-start-shape: var( --m3e-connected-button-group-medium-inner-shape, ${h.shape.corner.small} ); --_button-square-start-shape: var( --m3e-connected-button-group-medium-inner-shape, ${h.shape.corner.small} ); --_button-square-start-pressed-shape: var( --m3e-connected-button-group-medium-inner-pressed-shape, ${h.shape.corner.extraSmall} ); } :host([variant="connected"][size="large"]) ::slotted(:state(-first)[size="large"]), :host([variant="connected"][size="large"]) ::slotted(:not(:state(-first)):not(:state(-last))[size="large"]) { --_button-rounded-end-shape: var( --m3e-connected-button-group-large-inner-shape, ${h.shape.corner.large} ); --_button-square-end-shape: var( --m3e-connected-button-group-large-inner-shape, ${h.shape.corner.large} ); --_button-square-end-pressed-shape: var( --m3e-connected-button-group-large-inner-pressed-shape, ${h.shape.corner.medium} ); } :host([variant="connected"][size="large"]) ::slotted(:state(-last)[size="large"]), :host([variant="connected"][size="large"]) ::slotted(:not(:state(-first)):not(:state(-last))[size="large"]) { --_button-rounded-start-shape: var( --m3e-connected-button-group-large-inner-shape, ${h.shape.corner.large} ); --_button-square-start-shape: var( --m3e-connected-button-group-large-inner-shape, ${h.shape.corner.large} ); --_button-square-start-pressed-shape: var( --m3e-connected-button-group-large-inner-pressed-shape, ${h.shape.corner.medium} ); } :host([variant="connected"][size="extra-large"]) ::slotted(:state(-first)[size="extra-large"]), :host([variant="connected"][size="extra-large"]) ::slotted(:not(:state(-first)):not(:state(-last))[size="extra-large"]) { --_button-rounded-end-shape: var( --m3e-connected-button-group-extra-large-inner-shape, ${h.shape.corner.largeIncreased} ); --_button-square-end-shape: var( --m3e-connected-button-group-extra-large-inner-shape, ${h.shape.corner.largeIncreased} ); --_button-square-end-pressed-shape: var( --m3e-connected-button-group-extra-large-inner-pressed-shape, ${h.shape.corner.large} ); } :host([variant="connected"][size="extra-large"]) ::slotted(:state(-last)[size="extra-large"]), :host([variant="connected"][size="extra-large"]) ::slotted(:not(:state(-first)):not(:state(-last))[size="extra-large"]) { --_button-rounded-start-shape: var( --m3e-connected-button-group-extra-large-inner-shape, ${h.shape.corner.largeIncreased} ); --_button-square-start-shape: var( --m3e-connected-button-group-extra-large-inner-shape, ${h.shape.corner.largeIncreased} ); --_button-square-start-pressed-shape: var( --m3e-connected-button-group-extra-large-inner-pressed-shape, ${h.shape.corner.large} ); }`,t([n(".base")],x.prototype,"_base",void 0),t([o({reflect:!0})],x.prototype,"variant",void 0),t([o({reflect:!0})],x.prototype,"size",void 0),t([o({type:Boolean})],x.prototype,"multi",void 0),t([l({slot:"",selector:"m3e-button,m3e-icon-button",flatten:!0})],x.prototype,"buttons",void 0),x=t([m("m3e-button-group")],x);export{x as M3eButtonGroupElement};
+import{__classPrivateFieldGet as e,__decorate as t}from"tslib";import{LitElement as s,html as a,css as r}from"lit";import{query as n,property as o,queryAssignedElements as i}from"lit/decorators.js";import{Role as l,PressedController as d,setCustomState as c,addCustomState as p,isSelectedMixin as u,DesignToken as h,customElement as m}from"@m3e/web/core";var g,b,v,f;let x=class extends(l(s,"group")){constructor(){super(...arguments),g.add(this),b.set(this,new d(this,{target:null,capture:!0,minPressedDuration:150,isPressedKey:e=>" "===e,callback:e=>{this._base&&(e&&"connected"!==this.variant?(this._base.classList.add("pressed"),this._base.style.setProperty("--_button-group-width",`${this._base.getBoundingClientRect().width}px`)):(this._base.style.removeProperty("--_button-group-width"),this._base.classList.remove("pressed")))}})),this.variant="standard",this.size="small",this.multi=!1}connectedCallback(){super.connectedCallback(),this.hasAttribute("disable-role")&&(this.role=null)}disconnectedCallback(){super.disconnectedCallback(),this._base?.style.removeProperty("--_button-group-width"),this._base?.classList.remove("pressed")}update(t){super.update(t),(t.has("multi")||t.has("variant"))&&e(this,g,"m",v).call(this),t.has("variant")&&this._base?.style.removeProperty("--_button-group-width")}render(){return a`<div class="base"><slot @slotchange="${e(this,g,"m",v)}" @change="${e(this,g,"m",f)}"></slot></div>`}};b=new WeakMap,g=new WeakSet,v=function(){const t=this.buttons;for(const t of e(this,b,"f").targets)e(this,b,"f").unobserve(t);const s=[...t].some(e=>e.toggle);this.hasAttribute("disable-role")||(this.role=s&&!this.multi?"radiogroup":"group");const a="radiogroup"===this.role?"radio":"button";t.forEach((s,r)=>{if(e(this,b,"f").observe(s),c(s,"--connected","connected"===this.variant),p(s,"--grouped"),c(s,"--first",0==r),c(s,"--last",r==t.length-1),!this.hasAttribute("disable-role")&&s.role!==a&&s.toggle){const e=s.toggle?s.selected?"true":"false":null;s.role=a,"button"===s.role?(s.ariaPressed=e,s.ariaChecked=null):(s.ariaChecked=e,s.ariaPressed=null)}})},f=function(e){if(!this.multi&&e.target instanceof HTMLElement&&("M3E-BUTTON"===e.target.tagName||"M3E-ICON-BUTTON"===e.target.tagName)){if(!u(e.target)||!e.target.selected)return;for(const t of this.buttons)t!==e.target&&t.selected&&(t.selected=!1)}},x.styles=r`:host { display: flex; vertical-align: middle; flex-wrap: nowrap; align-items: center; } .base { display: flex; vertical-align: middle; flex-wrap: nowrap; align-items: center; } :host([variant="standard"]) { justify-content: center; } :host([variant="connected"]) .base { flex: 1 1 auto; } :host([variant="standard"]) .base { width: fit-content; flex: none; } :host([variant="standard"]) .base.pressed { justify-content: space-between; width: var(--_button-group-width); } :host([variant="standard"][size="extra-small"]) .base { column-gap: var(--m3e-standard-button-group-extra-small-spacing, 1.125rem); } :host([variant="standard"][size="small"]) .base { column-gap: var(--m3e-standard-button-group-small-spacing, 0.75rem); } :host([variant="standard"][size="medium"]).base { column-gap: var(--m3e-standard-button-group-medium-spacing, 0.5rem); } :host([variant="standard"][size="large"]) .base { column-gap: var(--m3e-standard-button-group-large-spacing, 0.5rem); } :host([variant="standard"][size="extra-large"]) .base { column-gap: var(--m3e-standard-button-group-extra-large-spacing, 0.5rem); } :host([variant="connected"]) .base { column-gap: var(--m3e-connected-button-group-spacing, 0.125rem); } :host([variant="connected"][size="extra-small"]) ::slotted(:is(:state(--first), :--first)[size="extra-small"]), :host([variant="connected"][size="extra-small"]) ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size="extra-small"]) { --_button-rounded-end-shape: var( --m3e-connected-button-group-extra-small-inner-shape, ${h.shape.corner.small} ); --_button-square-end-shape: var( --m3e-connected-button-group-extra-small-inner-shape, ${h.shape.corner.small} ); --_button-square-end-pressed-shape: var( --m3e-connected-button-group-extra-small-inner-pressed-shape, ${h.shape.corner.extraSmall} ); } :host([variant="connected"][size="extra-small"]) ::slotted(:is(:state(--last), :--last)[size="extra-small"]), :host([variant="connected"][size="extra-small"]) ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size="extra-small"]) { --_button-rounded-start-shape: var( --m3e-connected-button-group-extra-small-inner-shape, ${h.shape.corner.small} ); --_button-square-start-shape: var( --m3e-connected-button-group-extra-small-inner-shape, ${h.shape.corner.small} ); --_button-square-start-pressed-shape: var( --m3e-connected-button-group-extra-small-inner-pressed-shape, ${h.shape.corner.extraSmall} ); } :host([variant="connected"][size="small"]) ::slotted(:is(:state(--first), :--first)[size="small"]), :host([variant="connected"][size="small"]) ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size="small"]) { --_button-rounded-end-shape: var( --m3e-connected-button-group-small-inner-shape, ${h.shape.corner.small} ); --_button-square-end-shape: var( --m3e-connected-button-group-small-inner-shape, ${h.shape.corner.small} ); --_button-end-shape-pressed-morph: var( --m3e-connected-button-group-small-inner-pressed-shape, ${h.shape.corner.extraSmall} ); } :host([variant="connected"][size="small"]) ::slotted(:is(:state(--last), :--last)[size="small"]), :host([variant="connected"][size="small"]) ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size="small"]) { --_button-rounded-start-shape: var( --m3e-connected-button-group-small-inner-shape, ${h.shape.corner.small} ); --_button-square-start-shape: var( --m3e-connected-button-group-small-inner-shape, ${h.shape.corner.small} ); --_button-start-shape-pressed-morph: var( --m3e-connected-button-group-small-inner-pressed-shape, ${h.shape.corner.extraSmall} ); } :host([variant="connected"][size="medium"]) ::slotted(:is(:state(--first), :--first)[size="medium"]), :host([variant="connected"][size="medium"]) ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size="medium"]) { --_button-rounded-end-shape: var( --m3e-connected-button-group-medium-inner-shape, ${h.shape.corner.small} ); --_button-square-end-shape: var( --m3e-connected-button-group-medium-inner-shape, ${h.shape.corner.small} ); --_button-square-end-pressed-shape: var( --m3e-connected-button-group-medium-inner-pressed-shape, ${h.shape.corner.extraSmall} ); } :host([variant="connected"][size="medium"]) ::slotted(:is(:state(--last), :--last)[size="medium"]), :host([variant="connected"][size="medium"]) ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size="medium"]) { --_button-rounded-start-shape: var( --m3e-connected-button-group-medium-inner-shape, ${h.shape.corner.small} ); --_button-square-start-shape: var( --m3e-connected-button-group-medium-inner-shape, ${h.shape.corner.small} ); --_button-square-start-pressed-shape: var( --m3e-connected-button-group-medium-inner-pressed-shape, ${h.shape.corner.extraSmall} ); } :host([variant="connected"][size="large"]) ::slotted(:is(:state(--first), :--first)[size="large"]), :host([variant="connected"][size="large"]) ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size="large"]) { --_button-rounded-end-shape: var( --m3e-connected-button-group-large-inner-shape, ${h.shape.corner.large} ); --_button-square-end-shape: var( --m3e-connected-button-group-large-inner-shape, ${h.shape.corner.large} ); --_button-square-end-pressed-shape: var( --m3e-connected-button-group-large-inner-pressed-shape, ${h.shape.corner.medium} ); } :host([variant="connected"][size="large"]) ::slotted(:is(:state(--last), :--last)[size="large"]), :host([variant="connected"][size="large"]) ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size="large"]) { --_button-rounded-start-shape: var( --m3e-connected-button-group-large-inner-shape, ${h.shape.corner.large} ); --_button-square-start-shape: var( --m3e-connected-button-group-large-inner-shape, ${h.shape.corner.large} ); --_button-square-start-pressed-shape: var( --m3e-connected-button-group-large-inner-pressed-shape, ${h.shape.corner.medium} ); } :host([variant="connected"][size="extra-large"]) ::slotted(:is(:state(--first), :--first)[size="extra-large"]), :host([variant="connected"][size="extra-large"]) ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size="extra-large"]) { --_button-rounded-end-shape: var( --m3e-connected-button-group-extra-large-inner-shape, ${h.shape.corner.largeIncreased} ); --_button-square-end-shape: var( --m3e-connected-button-group-extra-large-inner-shape, ${h.shape.corner.largeIncreased} ); --_button-square-end-pressed-shape: var( --m3e-connected-button-group-extra-large-inner-pressed-shape, ${h.shape.corner.large} ); } :host([variant="connected"][size="extra-large"]) ::slotted(:is(:state(--last), :--last)[size="extra-large"]), :host([variant="connected"][size="extra-large"]) ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size="extra-large"]) { --_button-rounded-start-shape: var( --m3e-connected-button-group-extra-large-inner-shape, ${h.shape.corner.largeIncreased} ); --_button-square-start-shape: var( --m3e-connected-button-group-extra-large-inner-shape, ${h.shape.corner.largeIncreased} ); --_button-square-start-pressed-shape: var( --m3e-connected-button-group-extra-large-inner-pressed-shape, ${h.shape.corner.large} ); }`,t([n(".base")],x.prototype,"_base",void 0),t([o({reflect:!0})],x.prototype,"variant",void 0),t([o({reflect:!0})],x.prototype,"size",void 0),t([o({type:Boolean})],x.prototype,"multi",void 0),t([i({slot:"",selector:"m3e-button,m3e-icon-button",flatten:!0})],x.prototype,"buttons",void 0),x=t([m("m3e-button-group")],x);export{x as M3eButtonGroupElement};
 //# sourceMappingURL=button-group.min.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"button-group.min.js","sources":["../../src/button-group/ButtonGroupElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property, query, queryAssignedElements } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  PressedController,\r\n  Role,\r\n  isSelectedMixin,\r\n  DesignToken,\r\n  setCustomState,\r\n  addCustomState,\r\n  customElement,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { M3eButtonElement } from \"@m3e/web/button\";\r\nimport { M3eIconButtonElement } from \"@m3e/web/icon-button\";\r\n\r\nimport { ButtonGroupVariant } from \"./ButtonGroupVariant\";\r\nimport { ButtonGroupSize } from \"./ButtonGroupSize\";\r\n\r\n/**\r\n * Organizes buttons and adds interactions between them.\r\n *\r\n * @description\r\n * The `m3e-button-group` component arranges multiple buttons into a unified, expressive layout,\r\n * supporting both `standard` and `connected` variants. It enables seamless, accessible grouping\r\n * of actions, adapts to various sizes, and ensures consistent spacing, shape, and alignment.\r\n * Designed according to Material 3 principles, it empowers users to interact with related actions\r\n * in a visually harmonious and intuitive way.\r\n *\r\n * @example\r\n * The following example illustrates a standard button group.\r\n * ``` html\r\n * <m3e-button-group>\r\n *  <m3e-icon-button variant=\"tonal\" toggle><m3e-icon name=\"format_bold\"></m3e-icon></m3e-icon-button>\r\n *  <m3e-icon-button variant=\"tonal\" toggle><m3e-icon name=\"format_italic\"></m3e-icon></m3e-icon-button>\r\n *  <m3e-icon-button variant=\"tonal\" toggle><m3e-icon name=\"format_underlined\"></m3e-icon></m3e-icon-button>\r\n * </m3e-button-group>\r\n * ```\r\n * @example\r\n * The next example illustrates a connected button group.\r\n * ```html\r\n * <m3e-button-group variant=\"connected\">\r\n *  <m3e-button variant=\"tonal\" shape=\"square\" toggle>Start</m3e-button>\r\n *  <m3e-button variant=\"tonal\" shape=\"square\" toggle>Directions</m3e-button>\r\n *  <m3e-button variant=\"tonal\" shape=\"square\" toggle>Share</m3e-button>\r\n * </m3e-button-group>\r\n * ```\r\n *\r\n * @tag m3e-button-group\r\n *\r\n * @slot - Renders the buttons of the group.\r\n *\r\n * @attr multi - Whether multiple toggle buttons can be selected.\r\n * @attr size - The size of the group.\r\n * @attr variant - The appearance variant of the group.\r\n *\r\n * @cssprop --m3e-standard-button-group-extra-small-spacing - Spacing between buttons in standard variant, extra-small size.\r\n * @cssprop --m3e-standard-button-group-small-spacing - Spacing between buttons in standard variant, small size.\r\n * @cssprop --m3e-standard-button-group-medium-spacing - Spacing between buttons in standard variant, medium size.\r\n * @cssprop --m3e-standard-button-group-large-spacing - Spacing between buttons in standard variant, large size.\r\n * @cssprop --m3e-standard-button-group-extra-large-spacing - Spacing between buttons in standard variant, extra-large size.\r\n * @cssprop --m3e-connected-button-group-spacing - Spacing between buttons in connected variant.\r\n * @cssprop --m3e-connected-button-group-extra-small-inner-shape - Corner shape for connected variant, extra-small size.\r\n * @cssprop --m3e-connected-button-group-extra-small-inner-pressed-shape - Pressed corner shape for connected variant, extra-small size.\r\n * @cssprop --m3e-connected-button-group-small-inner-shape - Corner shape for connected variant, small size.\r\n * @cssprop --m3e-connected-button-group-small-inner-pressed-shape - Pressed corner shape for connected variant, small size.\r\n * @cssprop --m3e-connected-button-group-medium-inner-shape - Corner shape for connected variant, medium size.\r\n * @cssprop --m3e-connected-button-group-medium-inner-pressed-shape - Pressed corner shape for connected variant, medium size.\r\n * @cssprop --m3e-connected-button-group-large-inner-shape - Corner shape for connected variant, large size.\r\n * @cssprop --m3e-connected-button-group-large-inner-pressed-shape - Pressed corner shape for connected variant, large size.\r\n * @cssprop --m3e-connected-button-group-extra-large-inner-shape - Corner shape for connected variant, extra-large size.\r\n * @cssprop --m3e-connected-button-group-extra-large-inner-pressed-shape - Pressed corner shape for connected variant, extra-large size.\r\n */\r\n@customElement(\"m3e-button-group\")\r\nexport class M3eButtonGroupElement extends Role(LitElement, \"group\") {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: flex;\r\n      vertical-align: middle;\r\n      flex-wrap: nowrap;\r\n      align-items: center;\r\n    }\r\n    .base {\r\n      display: flex;\r\n      vertical-align: middle;\r\n      flex-wrap: nowrap;\r\n      align-items: center;\r\n    }\r\n    :host([variant=\"standard\"]) {\r\n      justify-content: center;\r\n    }\r\n    :host([variant=\"connected\"]) .base {\r\n      flex: 1 1 auto;\r\n    }\r\n    :host([variant=\"standard\"]) .base {\r\n      width: fit-content;\r\n      flex: none;\r\n    }\r\n    :host([variant=\"standard\"]) .base.pressed {\r\n      justify-content: space-between;\r\n      width: var(--_button-group-width);\r\n    }\r\n    :host([variant=\"standard\"][size=\"extra-small\"]) .base {\r\n      column-gap: var(--m3e-standard-button-group-extra-small-spacing, 1.125rem);\r\n    }\r\n    :host([variant=\"standard\"][size=\"small\"]) .base {\r\n      column-gap: var(--m3e-standard-button-group-small-spacing, 0.75rem);\r\n    }\r\n    :host([variant=\"standard\"][size=\"medium\"]).base {\r\n      column-gap: var(--m3e-standard-button-group-medium-spacing, 0.5rem);\r\n    }\r\n    :host([variant=\"standard\"][size=\"large\"]) .base {\r\n      column-gap: var(--m3e-standard-button-group-large-spacing, 0.5rem);\r\n    }\r\n    :host([variant=\"standard\"][size=\"extra-large\"]) .base {\r\n      column-gap: var(--m3e-standard-button-group-extra-large-spacing, 0.5rem);\r\n    }\r\n    :host([variant=\"connected\"]) .base {\r\n      column-gap: var(--m3e-connected-button-group-spacing, 0.125rem);\r\n    }\r\n    :host([variant=\"connected\"][size=\"extra-small\"]) ::slotted(:state(-first)[size=\"extra-small\"]),\r\n    :host([variant=\"connected\"][size=\"extra-small\"])\r\n      ::slotted(:not(:state(-first)):not(:state(-last))[size=\"extra-small\"]) {\r\n      --_button-rounded-end-shape: var(\r\n        --m3e-connected-button-group-extra-small-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-end-shape: var(\r\n        --m3e-connected-button-group-extra-small-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-end-pressed-shape: var(\r\n        --m3e-connected-button-group-extra-small-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.extraSmall}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"extra-small\"]) ::slotted(:state(-last)[size=\"extra-small\"]),\r\n    :host([variant=\"connected\"][size=\"extra-small\"])\r\n      ::slotted(:not(:state(-first)):not(:state(-last))[size=\"extra-small\"]) {\r\n      --_button-rounded-start-shape: var(\r\n        --m3e-connected-button-group-extra-small-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-start-shape: var(\r\n        --m3e-connected-button-group-extra-small-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-start-pressed-shape: var(\r\n        --m3e-connected-button-group-extra-small-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.extraSmall}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"small\"]) ::slotted(:state(-first)[size=\"small\"]),\r\n    :host([variant=\"connected\"][size=\"small\"]) ::slotted(:not(:state(-first)):not(:state(-last))[size=\"small\"]) {\r\n      --_button-rounded-end-shape: var(\r\n        --m3e-connected-button-group-small-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-end-shape: var(\r\n        --m3e-connected-button-group-small-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-end-shape-pressed-morph: var(\r\n        --m3e-connected-button-group-small-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.extraSmall}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"small\"]) ::slotted(:state(-last)[size=\"small\"]),\r\n    :host([variant=\"connected\"][size=\"small\"]) ::slotted(:not(:state(-first)):not(:state(-last))[size=\"small\"]) {\r\n      --_button-rounded-start-shape: var(\r\n        --m3e-connected-button-group-small-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-start-shape: var(\r\n        --m3e-connected-button-group-small-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-start-shape-pressed-morph: var(\r\n        --m3e-connected-button-group-small-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.extraSmall}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"medium\"]) ::slotted(:state(-first)[size=\"medium\"]),\r\n    :host([variant=\"connected\"][size=\"medium\"]) ::slotted(:not(:state(-first)):not(:state(-last))[size=\"medium\"]) {\r\n      --_button-rounded-end-shape: var(\r\n        --m3e-connected-button-group-medium-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-end-shape: var(\r\n        --m3e-connected-button-group-medium-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-end-pressed-shape: var(\r\n        --m3e-connected-button-group-medium-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.extraSmall}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"medium\"]) ::slotted(:state(-last)[size=\"medium\"]),\r\n    :host([variant=\"connected\"][size=\"medium\"]) ::slotted(:not(:state(-first)):not(:state(-last))[size=\"medium\"]) {\r\n      --_button-rounded-start-shape: var(\r\n        --m3e-connected-button-group-medium-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-start-shape: var(\r\n        --m3e-connected-button-group-medium-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-start-pressed-shape: var(\r\n        --m3e-connected-button-group-medium-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.extraSmall}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"large\"]) ::slotted(:state(-first)[size=\"large\"]),\r\n    :host([variant=\"connected\"][size=\"large\"]) ::slotted(:not(:state(-first)):not(:state(-last))[size=\"large\"]) {\r\n      --_button-rounded-end-shape: var(\r\n        --m3e-connected-button-group-large-inner-shape,\r\n        ${DesignToken.shape.corner.large}\r\n      );\r\n      --_button-square-end-shape: var(\r\n        --m3e-connected-button-group-large-inner-shape,\r\n        ${DesignToken.shape.corner.large}\r\n      );\r\n      --_button-square-end-pressed-shape: var(\r\n        --m3e-connected-button-group-large-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.medium}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"large\"]) ::slotted(:state(-last)[size=\"large\"]),\r\n    :host([variant=\"connected\"][size=\"large\"]) ::slotted(:not(:state(-first)):not(:state(-last))[size=\"large\"]) {\r\n      --_button-rounded-start-shape: var(\r\n        --m3e-connected-button-group-large-inner-shape,\r\n        ${DesignToken.shape.corner.large}\r\n      );\r\n      --_button-square-start-shape: var(\r\n        --m3e-connected-button-group-large-inner-shape,\r\n        ${DesignToken.shape.corner.large}\r\n      );\r\n      --_button-square-start-pressed-shape: var(\r\n        --m3e-connected-button-group-large-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.medium}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"extra-large\"]) ::slotted(:state(-first)[size=\"extra-large\"]),\r\n    :host([variant=\"connected\"][size=\"extra-large\"])\r\n      ::slotted(:not(:state(-first)):not(:state(-last))[size=\"extra-large\"]) {\r\n      --_button-rounded-end-shape: var(\r\n        --m3e-connected-button-group-extra-large-inner-shape,\r\n        ${DesignToken.shape.corner.largeIncreased}\r\n      );\r\n      --_button-square-end-shape: var(\r\n        --m3e-connected-button-group-extra-large-inner-shape,\r\n        ${DesignToken.shape.corner.largeIncreased}\r\n      );\r\n      --_button-square-end-pressed-shape: var(\r\n        --m3e-connected-button-group-extra-large-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.large}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"extra-large\"]) ::slotted(:state(-last)[size=\"extra-large\"]),\r\n    :host([variant=\"connected\"][size=\"extra-large\"])\r\n      ::slotted(:not(:state(-first)):not(:state(-last))[size=\"extra-large\"]) {\r\n      --_button-rounded-start-shape: var(\r\n        --m3e-connected-button-group-extra-large-inner-shape,\r\n        ${DesignToken.shape.corner.largeIncreased}\r\n      );\r\n      --_button-square-start-shape: var(\r\n        --m3e-connected-button-group-extra-large-inner-shape,\r\n        ${DesignToken.shape.corner.largeIncreased}\r\n      );\r\n      --_button-square-start-pressed-shape: var(\r\n        --m3e-connected-button-group-extra-large-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.large}\r\n      );\r\n    }\r\n  `;\r\n\r\n  /** @private */ readonly #pressedController = new PressedController(this, {\r\n    target: null,\r\n    capture: true,\r\n    minPressedDuration: 150,\r\n    isPressedKey: (key) => key === \" \",\r\n    callback: (pressed) => {\r\n      if (!this._base) return;\r\n      if (!pressed || this.variant === \"connected\") {\r\n        this._base.style.removeProperty(\"--_button-group-width\");\r\n        this._base.classList.remove(\"pressed\");\r\n      } else {\r\n        this._base.classList.add(\"pressed\");\r\n        this._base.style.setProperty(\"--_button-group-width\", `${this._base.getBoundingClientRect().width}px`);\r\n      }\r\n    },\r\n  });\r\n\r\n  @query(\".base\") private readonly _base?: HTMLElement;\r\n\r\n  /**\r\n   * The appearance variant of the group.\r\n   * @default \"standard\"\r\n   */\r\n  @property({ reflect: true }) variant: ButtonGroupVariant = \"standard\";\r\n\r\n  /**\r\n   * The size of the group.\r\n   * @default \"small\"\r\n   */\r\n  @property({ reflect: true }) size: ButtonGroupSize = \"small\";\r\n\r\n  /**\r\n   * Whether multiple toggle buttons can be selected.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean }) multi = false;\r\n\r\n  /** The buttons contained by the group. */\r\n  @queryAssignedElements({ slot: \"\", selector: \"m3e-button,m3e-icon-button\", flatten: true })\r\n  readonly buttons!: ReadonlyArray<M3eButtonElement | M3eIconButtonElement>;\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    if (this.hasAttribute(\"disable-role\")) {\r\n      this.role = null;\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this._base?.style.removeProperty(\"--_button-group-width\");\r\n    this._base?.classList.remove(\"pressed\");\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues<this>): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"multi\") || changedProperties.has(\"variant\")) {\r\n      this.#updateButtons();\r\n    }\r\n    if (changedProperties.has(\"variant\")) {\r\n      this._base?.style.removeProperty(\"--_button-group-width\");\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <slot @slotchange=\"${this.#updateButtons}\" @change=\"${this.#handleChange}\"></slot>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #updateButtons(): void {\r\n    const buttons = this.buttons;\r\n    for (const target of this.#pressedController.targets) {\r\n      this.#pressedController.unobserve(target);\r\n    }\r\n    const canToggle = [...buttons].some((x) => x.toggle);\r\n\r\n    // disable-role is an internal attribute to by split-button to disable setting roles.\r\n    if (!this.hasAttribute(\"disable-role\")) {\r\n      this.role = canToggle && !this.multi ? \"radiogroup\" : \"group\";\r\n    }\r\n\r\n    const buttonRole = this.role === \"radiogroup\" ? \"radio\" : \"button\";\r\n\r\n    buttons.forEach((button, i) => {\r\n      this.#pressedController.observe(button);\r\n      setCustomState(button, \"-connected\", this.variant === \"connected\");\r\n      addCustomState(button, \"-grouped\");\r\n      setCustomState(button, \"-first\", i == 0);\r\n      setCustomState(button, \"-last\", i == buttons.length - 1);\r\n\r\n      if (!this.hasAttribute(\"disable-role\") && button.role !== buttonRole && button.toggle) {\r\n        const checked = !button.toggle ? null : button.selected ? \"true\" : \"false\";\r\n        button.role = buttonRole;\r\n        if (button.role === \"button\") {\r\n          button.ariaPressed = checked;\r\n          button.ariaChecked = null;\r\n        } else {\r\n          button.ariaChecked = checked;\r\n          button.ariaPressed = null;\r\n        }\r\n      }\r\n    });\r\n  }\r\n\r\n  /** @private */\r\n  #handleChange(e: Event): void {\r\n    if (this.multi || !(e.target instanceof HTMLElement)) return;\r\n    if (e.target.tagName === \"M3E-BUTTON\" || e.target.tagName === \"M3E-ICON-BUTTON\") {\r\n      if (!isSelectedMixin(e.target) || !e.target.selected) {\r\n        return;\r\n      }\r\n\r\n      for (const button of this.buttons) {\r\n        if (button === e.target || !button.selected) continue;\r\n        button.selected = false;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-button-group\": M3eButtonGroupElement;\r\n  }\r\n}\r\n"],"names":["M3eButtonGroupElement","Role","LitElement","constructor","_M3eButtonGroupElement_pressedController","set","this","PressedController","target","capture","minPressedDuration","isPressedKey","key","callback","pressed","_base","variant","classList","add","style","setProperty","getBoundingClientRect","width","removeProperty","remove","size","multi","connectedCallback","super","hasAttribute","role","disconnectedCallback","update","changedProperties","has","__classPrivateFieldGet","_M3eButtonGroupElement_instances","_M3eButtonGroupElement_updateButtons","call","render","html","_M3eButtonGroupElement_handleChange","buttons","targets","unobserve","canToggle","some","x","toggle","buttonRole","forEach","button","i","observe","setCustomState","addCustomState","length","checked","selected","ariaPressed","ariaChecked","e","HTMLElement","tagName","isSelectedMixin","styles","css","DesignToken","shape","corner","small","extraSmall","large","medium","largeIncreased","__decorate","query","prototype","property","reflect","type","Boolean","queryAssignedElements","slot","selector","flatten","customElement"],"mappings":"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"}
+{"version":3,"file":"button-group.min.js","sources":["../../src/button-group/ButtonGroupElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property, query, queryAssignedElements } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  PressedController,\r\n  Role,\r\n  isSelectedMixin,\r\n  DesignToken,\r\n  setCustomState,\r\n  addCustomState,\r\n  customElement,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { M3eButtonElement } from \"@m3e/web/button\";\r\nimport { M3eIconButtonElement } from \"@m3e/web/icon-button\";\r\n\r\nimport { ButtonGroupVariant } from \"./ButtonGroupVariant\";\r\nimport { ButtonGroupSize } from \"./ButtonGroupSize\";\r\n\r\n/**\r\n * Organizes buttons and adds interactions between them.\r\n *\r\n * @description\r\n * The `m3e-button-group` component arranges multiple buttons into a unified, expressive layout,\r\n * supporting both `standard` and `connected` variants. It enables seamless, accessible grouping\r\n * of actions, adapts to various sizes, and ensures consistent spacing, shape, and alignment.\r\n * Designed according to Material 3 principles, it empowers users to interact with related actions\r\n * in a visually harmonious and intuitive way.\r\n *\r\n * @example\r\n * The following example illustrates a standard button group.\r\n * ``` html\r\n * <m3e-button-group>\r\n *  <m3e-icon-button variant=\"tonal\" toggle><m3e-icon name=\"format_bold\"></m3e-icon></m3e-icon-button>\r\n *  <m3e-icon-button variant=\"tonal\" toggle><m3e-icon name=\"format_italic\"></m3e-icon></m3e-icon-button>\r\n *  <m3e-icon-button variant=\"tonal\" toggle><m3e-icon name=\"format_underlined\"></m3e-icon></m3e-icon-button>\r\n * </m3e-button-group>\r\n * ```\r\n * @example\r\n * The next example illustrates a connected button group.\r\n * ```html\r\n * <m3e-button-group variant=\"connected\">\r\n *  <m3e-button variant=\"tonal\" shape=\"square\" toggle>Start</m3e-button>\r\n *  <m3e-button variant=\"tonal\" shape=\"square\" toggle>Directions</m3e-button>\r\n *  <m3e-button variant=\"tonal\" shape=\"square\" toggle>Share</m3e-button>\r\n * </m3e-button-group>\r\n * ```\r\n *\r\n * @tag m3e-button-group\r\n *\r\n * @slot - Renders the buttons of the group.\r\n *\r\n * @attr multi - Whether multiple toggle buttons can be selected.\r\n * @attr size - The size of the group.\r\n * @attr variant - The appearance variant of the group.\r\n *\r\n * @cssprop --m3e-standard-button-group-extra-small-spacing - Spacing between buttons in standard variant, extra-small size.\r\n * @cssprop --m3e-standard-button-group-small-spacing - Spacing between buttons in standard variant, small size.\r\n * @cssprop --m3e-standard-button-group-medium-spacing - Spacing between buttons in standard variant, medium size.\r\n * @cssprop --m3e-standard-button-group-large-spacing - Spacing between buttons in standard variant, large size.\r\n * @cssprop --m3e-standard-button-group-extra-large-spacing - Spacing between buttons in standard variant, extra-large size.\r\n * @cssprop --m3e-connected-button-group-spacing - Spacing between buttons in connected variant.\r\n * @cssprop --m3e-connected-button-group-extra-small-inner-shape - Corner shape for connected variant, extra-small size.\r\n * @cssprop --m3e-connected-button-group-extra-small-inner-pressed-shape - Pressed corner shape for connected variant, extra-small size.\r\n * @cssprop --m3e-connected-button-group-small-inner-shape - Corner shape for connected variant, small size.\r\n * @cssprop --m3e-connected-button-group-small-inner-pressed-shape - Pressed corner shape for connected variant, small size.\r\n * @cssprop --m3e-connected-button-group-medium-inner-shape - Corner shape for connected variant, medium size.\r\n * @cssprop --m3e-connected-button-group-medium-inner-pressed-shape - Pressed corner shape for connected variant, medium size.\r\n * @cssprop --m3e-connected-button-group-large-inner-shape - Corner shape for connected variant, large size.\r\n * @cssprop --m3e-connected-button-group-large-inner-pressed-shape - Pressed corner shape for connected variant, large size.\r\n * @cssprop --m3e-connected-button-group-extra-large-inner-shape - Corner shape for connected variant, extra-large size.\r\n * @cssprop --m3e-connected-button-group-extra-large-inner-pressed-shape - Pressed corner shape for connected variant, extra-large size.\r\n */\r\n@customElement(\"m3e-button-group\")\r\nexport class M3eButtonGroupElement extends Role(LitElement, \"group\") {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: flex;\r\n      vertical-align: middle;\r\n      flex-wrap: nowrap;\r\n      align-items: center;\r\n    }\r\n    .base {\r\n      display: flex;\r\n      vertical-align: middle;\r\n      flex-wrap: nowrap;\r\n      align-items: center;\r\n    }\r\n    :host([variant=\"standard\"]) {\r\n      justify-content: center;\r\n    }\r\n    :host([variant=\"connected\"]) .base {\r\n      flex: 1 1 auto;\r\n    }\r\n    :host([variant=\"standard\"]) .base {\r\n      width: fit-content;\r\n      flex: none;\r\n    }\r\n    :host([variant=\"standard\"]) .base.pressed {\r\n      justify-content: space-between;\r\n      width: var(--_button-group-width);\r\n    }\r\n    :host([variant=\"standard\"][size=\"extra-small\"]) .base {\r\n      column-gap: var(--m3e-standard-button-group-extra-small-spacing, 1.125rem);\r\n    }\r\n    :host([variant=\"standard\"][size=\"small\"]) .base {\r\n      column-gap: var(--m3e-standard-button-group-small-spacing, 0.75rem);\r\n    }\r\n    :host([variant=\"standard\"][size=\"medium\"]).base {\r\n      column-gap: var(--m3e-standard-button-group-medium-spacing, 0.5rem);\r\n    }\r\n    :host([variant=\"standard\"][size=\"large\"]) .base {\r\n      column-gap: var(--m3e-standard-button-group-large-spacing, 0.5rem);\r\n    }\r\n    :host([variant=\"standard\"][size=\"extra-large\"]) .base {\r\n      column-gap: var(--m3e-standard-button-group-extra-large-spacing, 0.5rem);\r\n    }\r\n    :host([variant=\"connected\"]) .base {\r\n      column-gap: var(--m3e-connected-button-group-spacing, 0.125rem);\r\n    }\r\n    :host([variant=\"connected\"][size=\"extra-small\"]) ::slotted(:is(:state(--first), :--first)[size=\"extra-small\"]),\r\n    :host([variant=\"connected\"][size=\"extra-small\"])\r\n      ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size=\"extra-small\"]) {\r\n      --_button-rounded-end-shape: var(\r\n        --m3e-connected-button-group-extra-small-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-end-shape: var(\r\n        --m3e-connected-button-group-extra-small-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-end-pressed-shape: var(\r\n        --m3e-connected-button-group-extra-small-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.extraSmall}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"extra-small\"]) ::slotted(:is(:state(--last), :--last)[size=\"extra-small\"]),\r\n    :host([variant=\"connected\"][size=\"extra-small\"])\r\n      ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size=\"extra-small\"]) {\r\n      --_button-rounded-start-shape: var(\r\n        --m3e-connected-button-group-extra-small-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-start-shape: var(\r\n        --m3e-connected-button-group-extra-small-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-start-pressed-shape: var(\r\n        --m3e-connected-button-group-extra-small-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.extraSmall}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"small\"]) ::slotted(:is(:state(--first), :--first)[size=\"small\"]),\r\n    :host([variant=\"connected\"][size=\"small\"])\r\n      ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size=\"small\"]) {\r\n      --_button-rounded-end-shape: var(\r\n        --m3e-connected-button-group-small-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-end-shape: var(\r\n        --m3e-connected-button-group-small-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-end-shape-pressed-morph: var(\r\n        --m3e-connected-button-group-small-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.extraSmall}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"small\"]) ::slotted(:is(:state(--last), :--last)[size=\"small\"]),\r\n    :host([variant=\"connected\"][size=\"small\"])\r\n      ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size=\"small\"]) {\r\n      --_button-rounded-start-shape: var(\r\n        --m3e-connected-button-group-small-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-start-shape: var(\r\n        --m3e-connected-button-group-small-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-start-shape-pressed-morph: var(\r\n        --m3e-connected-button-group-small-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.extraSmall}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"medium\"]) ::slotted(:is(:state(--first), :--first)[size=\"medium\"]),\r\n    :host([variant=\"connected\"][size=\"medium\"])\r\n      ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size=\"medium\"]) {\r\n      --_button-rounded-end-shape: var(\r\n        --m3e-connected-button-group-medium-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-end-shape: var(\r\n        --m3e-connected-button-group-medium-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-end-pressed-shape: var(\r\n        --m3e-connected-button-group-medium-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.extraSmall}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"medium\"]) ::slotted(:is(:state(--last), :--last)[size=\"medium\"]),\r\n    :host([variant=\"connected\"][size=\"medium\"])\r\n      ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size=\"medium\"]) {\r\n      --_button-rounded-start-shape: var(\r\n        --m3e-connected-button-group-medium-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-start-shape: var(\r\n        --m3e-connected-button-group-medium-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-start-pressed-shape: var(\r\n        --m3e-connected-button-group-medium-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.extraSmall}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"large\"]) ::slotted(:is(:state(--first), :--first)[size=\"large\"]),\r\n    :host([variant=\"connected\"][size=\"large\"])\r\n      ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size=\"large\"]) {\r\n      --_button-rounded-end-shape: var(\r\n        --m3e-connected-button-group-large-inner-shape,\r\n        ${DesignToken.shape.corner.large}\r\n      );\r\n      --_button-square-end-shape: var(\r\n        --m3e-connected-button-group-large-inner-shape,\r\n        ${DesignToken.shape.corner.large}\r\n      );\r\n      --_button-square-end-pressed-shape: var(\r\n        --m3e-connected-button-group-large-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.medium}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"large\"]) ::slotted(:is(:state(--last), :--last)[size=\"large\"]),\r\n    :host([variant=\"connected\"][size=\"large\"])\r\n      ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size=\"large\"]) {\r\n      --_button-rounded-start-shape: var(\r\n        --m3e-connected-button-group-large-inner-shape,\r\n        ${DesignToken.shape.corner.large}\r\n      );\r\n      --_button-square-start-shape: var(\r\n        --m3e-connected-button-group-large-inner-shape,\r\n        ${DesignToken.shape.corner.large}\r\n      );\r\n      --_button-square-start-pressed-shape: var(\r\n        --m3e-connected-button-group-large-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.medium}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"extra-large\"]) ::slotted(:is(:state(--first), :--first)[size=\"extra-large\"]),\r\n    :host([variant=\"connected\"][size=\"extra-large\"])\r\n      ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size=\"extra-large\"]) {\r\n      --_button-rounded-end-shape: var(\r\n        --m3e-connected-button-group-extra-large-inner-shape,\r\n        ${DesignToken.shape.corner.largeIncreased}\r\n      );\r\n      --_button-square-end-shape: var(\r\n        --m3e-connected-button-group-extra-large-inner-shape,\r\n        ${DesignToken.shape.corner.largeIncreased}\r\n      );\r\n      --_button-square-end-pressed-shape: var(\r\n        --m3e-connected-button-group-extra-large-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.large}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"extra-large\"]) ::slotted(:is(:state(--last), :--last)[size=\"extra-large\"]),\r\n    :host([variant=\"connected\"][size=\"extra-large\"])\r\n      ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size=\"extra-large\"]) {\r\n      --_button-rounded-start-shape: var(\r\n        --m3e-connected-button-group-extra-large-inner-shape,\r\n        ${DesignToken.shape.corner.largeIncreased}\r\n      );\r\n      --_button-square-start-shape: var(\r\n        --m3e-connected-button-group-extra-large-inner-shape,\r\n        ${DesignToken.shape.corner.largeIncreased}\r\n      );\r\n      --_button-square-start-pressed-shape: var(\r\n        --m3e-connected-button-group-extra-large-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.large}\r\n      );\r\n    }\r\n  `;\r\n\r\n  /** @private */ readonly #pressedController = new PressedController(this, {\r\n    target: null,\r\n    capture: true,\r\n    minPressedDuration: 150,\r\n    isPressedKey: (key) => key === \" \",\r\n    callback: (pressed) => {\r\n      if (!this._base) return;\r\n      if (!pressed || this.variant === \"connected\") {\r\n        this._base.style.removeProperty(\"--_button-group-width\");\r\n        this._base.classList.remove(\"pressed\");\r\n      } else {\r\n        this._base.classList.add(\"pressed\");\r\n        this._base.style.setProperty(\"--_button-group-width\", `${this._base.getBoundingClientRect().width}px`);\r\n      }\r\n    },\r\n  });\r\n\r\n  @query(\".base\") private readonly _base?: HTMLElement;\r\n\r\n  /**\r\n   * The appearance variant of the group.\r\n   * @default \"standard\"\r\n   */\r\n  @property({ reflect: true }) variant: ButtonGroupVariant = \"standard\";\r\n\r\n  /**\r\n   * The size of the group.\r\n   * @default \"small\"\r\n   */\r\n  @property({ reflect: true }) size: ButtonGroupSize = \"small\";\r\n\r\n  /**\r\n   * Whether multiple toggle buttons can be selected.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean }) multi = false;\r\n\r\n  /** The buttons contained by the group. */\r\n  @queryAssignedElements({ slot: \"\", selector: \"m3e-button,m3e-icon-button\", flatten: true })\r\n  readonly buttons!: ReadonlyArray<M3eButtonElement | M3eIconButtonElement>;\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    if (this.hasAttribute(\"disable-role\")) {\r\n      this.role = null;\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this._base?.style.removeProperty(\"--_button-group-width\");\r\n    this._base?.classList.remove(\"pressed\");\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues<this>): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"multi\") || changedProperties.has(\"variant\")) {\r\n      this.#updateButtons();\r\n    }\r\n    if (changedProperties.has(\"variant\")) {\r\n      this._base?.style.removeProperty(\"--_button-group-width\");\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <slot @slotchange=\"${this.#updateButtons}\" @change=\"${this.#handleChange}\"></slot>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #updateButtons(): void {\r\n    const buttons = this.buttons;\r\n    for (const target of this.#pressedController.targets) {\r\n      this.#pressedController.unobserve(target);\r\n    }\r\n    const canToggle = [...buttons].some((x) => x.toggle);\r\n\r\n    // disable-role is an internal attribute to by split-button to disable setting roles.\r\n    if (!this.hasAttribute(\"disable-role\")) {\r\n      this.role = canToggle && !this.multi ? \"radiogroup\" : \"group\";\r\n    }\r\n\r\n    const buttonRole = this.role === \"radiogroup\" ? \"radio\" : \"button\";\r\n\r\n    buttons.forEach((button, i) => {\r\n      this.#pressedController.observe(button);\r\n      setCustomState(button, \"--connected\", this.variant === \"connected\");\r\n      addCustomState(button, \"--grouped\");\r\n      setCustomState(button, \"--first\", i == 0);\r\n      setCustomState(button, \"--last\", i == buttons.length - 1);\r\n\r\n      if (!this.hasAttribute(\"disable-role\") && button.role !== buttonRole && button.toggle) {\r\n        const checked = !button.toggle ? null : button.selected ? \"true\" : \"false\";\r\n        button.role = buttonRole;\r\n        if (button.role === \"button\") {\r\n          button.ariaPressed = checked;\r\n          button.ariaChecked = null;\r\n        } else {\r\n          button.ariaChecked = checked;\r\n          button.ariaPressed = null;\r\n        }\r\n      }\r\n    });\r\n  }\r\n\r\n  /** @private */\r\n  #handleChange(e: Event): void {\r\n    if (this.multi || !(e.target instanceof HTMLElement)) return;\r\n    if (e.target.tagName === \"M3E-BUTTON\" || e.target.tagName === \"M3E-ICON-BUTTON\") {\r\n      if (!isSelectedMixin(e.target) || !e.target.selected) {\r\n        return;\r\n      }\r\n\r\n      for (const button of this.buttons) {\r\n        if (button === e.target || !button.selected) continue;\r\n        button.selected = false;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-button-group\": M3eButtonGroupElement;\r\n  }\r\n}\r\n"],"names":["M3eButtonGroupElement","Role","LitElement","constructor","_M3eButtonGroupElement_pressedController","set","this","PressedController","target","capture","minPressedDuration","isPressedKey","key","callback","pressed","_base","variant","classList","add","style","setProperty","getBoundingClientRect","width","removeProperty","remove","size","multi","connectedCallback","super","hasAttribute","role","disconnectedCallback","update","changedProperties","has","__classPrivateFieldGet","_M3eButtonGroupElement_instances","_M3eButtonGroupElement_updateButtons","call","render","html","_M3eButtonGroupElement_handleChange","buttons","targets","unobserve","canToggle","some","x","toggle","buttonRole","forEach","button","i","observe","setCustomState","addCustomState","length","checked","selected","ariaPressed","ariaChecked","e","HTMLElement","tagName","isSelectedMixin","styles","css","DesignToken","shape","corner","small","extraSmall","large","medium","largeIncreased","__decorate","query","prototype","property","reflect","type","Boolean","queryAssignedElements","slot","selector","flatten","customElement"],"mappings":"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"}