@luzmo/lucero 0.0.3 → 0.0.4

package/lib/accordion/index.cjs

@@ -0,0 +1,43 @@
+/*! * Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account to use Lucero.
+ * This license terminates automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("lit"),r=require("../base-BCmA9Wxv.cjs"),g=require("../query-assigned-nodes-BcKWmGzy.cjs"),v=require("../focus-group-DnxZUBhQ.cjs"),z=require("../sized-mixin-BSYHt8nT.cjs"),h=require("@luzmo/icons"),p=require("../focusable-Dv_6CFaY.cjs"),f=require("../when-CDZyJPvd.cjs"),b=":host{--accordion-item-header-line-height: 1.25;--accordion-item-header-bottom-margin: 0px;--accordion-item-header-text-case: initial;--accordion-item-min-block-size: max( var(--luzmo-accordion-item-height, var(--accordion-item-height)), calc( var( --luzmo-accordion-item-header-vertical-padding, var(--accordion-item-header-vertical-padding) ) * 2 + var( --luzmo-accordion-item-header-font-size, var(--accordion-item-header-font-size) ) * var( --luzmo-accordion-item-header-line-height, var(--accordion-item-header-line-height) ) ) );margin:0;padding:0;list-style:none;display:block}:host:lang(ja),:host:lang(ko),:host:lang(zh){--luzmo-accordion-item-header-line-height: var( --luzmo-accordion-item-header-line-height-cjk );--luzmo-accordion-item-content-line-height: var( --luzmo-accordion-item-content-line-height-cjk )}:host:dir(rtl),:host([dir=rtl]){--luzmo-logical-rotation: matrix(-1, 0, 0, 1, 0, 0)}:host([size=s]){--accordion-item-height: 32px;--accordion-disclosure-indicator-height: var(--luzmo-font-size-s);--accordion-edge-to-disclosure-indicator-space: var(--luzmo-spacing-2);--accordion-disclosure-indicator-to-text-space: var(--luzmo-spacing-2);--accordion-item-edge-to-text: var(--luzmo-spacing-3);--accordion-item-header-font-size: var(--luzmo-font-size);--accordion-item-content-font-size: var(--luzmo-font-size-s);--accordion-item-header-vertical-padding: var(--luzmo-spacing-2)}:host{--accordion-item-height: 40px;--accordion-disclosure-indicator-height: var(--luzmo-font-size);--accordion-edge-to-disclosure-indicator-space: var(--luzmo-spacing-2);--accordion-disclosure-indicator-to-text-space: var(--luzmo-spacing-2);--accordion-item-edge-to-text: var(--luzmo-spacing-3);--accordion-item-header-font-size: var(--luzmo-font-size-l);--accordion-item-content-font-size: var(--luzmo-font-size);--accordion-item-header-vertical-padding: var(--luzmo-spacing-3)}:host([size=l]){--accordion-item-height: 48px;--accordion-disclosure-indicator-height: var(--luzmo-font-size-l);--accordion-edge-to-disclosure-indicator-space: var(--luzmo-spacing-3);--accordion-disclosure-indicator-to-text-space: var(--luzmo-spacing-2);--accordion-item-edge-to-text: var(--luzmo-spacing-4);--accordion-item-header-font-size: var(--luzmo-font-size-xl);--accordion-item-content-font-size: var(--luzmo-font-size-l);--accordion-item-header-vertical-padding: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) )}:host([size=xl]){--accordion-item-height: 56px;--accordion-disclosure-indicator-height: var(--luzmo-font-size-xl);--accordion-edge-to-disclosure-indicator-space: var(--luzmo-spacing-3);--accordion-disclosure-indicator-to-text-space: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--accordion-item-edge-to-text: var(--luzmo-spacing-4);--accordion-item-header-font-size: var(--luzmo-font-size-xxl);--accordion-item-content-font-size: var(--luzmo-font-size-xl);--accordion-item-header-vertical-padding: var(--luzmo-spacing-4)}:host([density=compact][size=s]){--accordion-item-height: 24px;--accordion-item-header-vertical-padding: var(--luzmo-spacing-1)}:host([density=compact]){--accordion-item-height: 32px;--accordion-item-header-vertical-padding: var(--luzmo-spacing-2)}:host([density=compact][size=l]){--accordion-item-height: 40px;--accordion-item-header-vertical-padding: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) )}:host([density=compact][size=xl]){--accordion-item-height: 48px;--accordion-item-header-vertical-padding: var(--luzmo-spacing-3)}:host([density=spacious][size=s]){--accordion-item-header-vertical-padding: var(--luzmo-spacing-3)}:host([density=spacious]){--accordion-item-header-vertical-padding: var(--luzmo-spacing-4)}:host([density=spacious][size=l]){--accordion-item-header-vertical-padding: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) )}:host([density=spacious][size=xl]){--accordion-item-header-vertical-padding: var(--luzmo-spacing-4)}:host([header-case=uppercase]){--accordion-item-header-text-case: uppercase}:host([header-case=uppercase][size=s]){--accordion-item-header-font-size: var(--luzmo-font-size-xs)}:host([header-case=uppercase]){--accordion-item-header-font-size: var(--luzmo-font-size-s)}:host([header-case=uppercase][size=l]){--accordion-item-header-font-size: var(--luzmo-font-size)}:host([header-case=uppercase][size=xl]){--accordion-item-header-font-size: var(--luzmo-font-size-l)}:host([variant=highlight]){--accordion-item-header-background-color: var( --luzmo-background-color-highlight );--accordion-item-disabled-background-color: var( --luzmo-background-color-highlight-disabled );--accordion-item-accordion-divider-thickness: 0px;--accordion-item-accordion-header-border-radius: var(--luzmo-border-radius)}:host([variant=highlight][size=s]){--accordion-item-height: 28px;--accordion-disclosure-indicator-height: var(luzmo-font-size-xs);--accordion-edge-to-disclosure-indicator-space: var(--luzmo-spacing-3);--accordion-disclosure-indicator-to-text-space: var(--luzmo-spacing-2);--accordion-item-header-font-size: var(--luzmo-font-size-s);--accordion-item-content-font-size: var(--luzmo-font-size-s);--accordion-item-header-bottom-margin: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) )}:host([variant=highlight][size=s][header-case=uppercase]){--accordion-item-header-font-size: var(--luzmo-font-size-xs)}:host([variant=highlight]){--accordion-item-height: 32px;--accordion-disclosure-indicator-height: var(luzmo-font-size-s);--accordion-edge-to-disclosure-indicator-space: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--accordion-disclosure-indicator-to-text-space: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--accordion-item-header-font-size: var(--luzmo-font-size);--accordion-item-content-font-size: var(--luzmo-font-size);--accordion-item-header-bottom-margin: var(--luzmo-spacing-3)}:host([variant=highlight][header-case=uppercase]){--accordion-item-header-font-size: var(--luzmo-font-size-s)}:host([variant=highlight][size=l]){--accordion-item-height: 48px;--accordion-disclosure-indicator-height: var(luzmo-font-size);--accordion-edge-to-disclosure-indicator-space: var(--luzmo-spacing-4);--accordion-disclosure-indicator-to-text-space: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--accordion-item-header-font-size: var(--luzmo-font-size-l);--accordion-item-content-font-size: var(--luzmo-font-size-l);--accordion-item-header-bottom-margin: calc( var(--luzmo-spacing-1) + var(--luzmo-spacing-3) );--accordion-item-header-bottom-margin: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) )}:host([variant=highlight][size=l][header-case=uppercase]){--accordion-item-header-font-size: var(--luzmo-font-size)}:host([variant=highlight][size=xl]){--accordion-item-height: 56px;--accordion-disclosure-indicator-height: var(luzmo-font-size-l);--accordion-edge-to-disclosure-indicator-space: var(--luzmo-spacing-4);--accordion-disclosure-indicator-to-text-space: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--accordion-item-header-font-size: var(--luzmo-font-size-xl);--accordion-item-content-font-size: var(--luzmo-font-size-xl);--accordion-item-header-bottom-margin: var(--luzmo-spacing-4);--accordion-item-header-bottom-margin: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) )}:host([variant=highlight][size=xl][header-case=uppercase]){--accordion-item-header-font-size: var(--luzmo-font-size-l)}:host([variant=highlight-child]){--accordion-item-header-background-color: var(--luzmo-background-color);--accordion-item-disabled-background-color: transparent;--accordion-item-accordion-divider-thickness: 0px;--accordion-item-accordion-header-border-radius: var(--luzmo-border-radius);--accordion-item-header-font-weight: normal;--accordion-item-content-border-left-width: var(--luzmo-border-width);--accordion-item-content-border-left-color: var(--luzmo-border-color);--accordion-item-content-border-left-style: solid;--accordion-edge-to-disclosure-indicator-space: 0px}:host([variant=highlight-child][size=s]){--accordion-item-height: 28px;--accordion-disclosure-indicator-height: var(luzmo-font-size-xs);--accordion-edge-to-disclosure-indicator-space: 0px;--accordion-disclosure-indicator-to-text-space: var(--luzmo-spacing-2);--accordion-item-edge-to-text: var(--luzmo-spacing-3);--accordion-item-header-font-size: var(--luzmo-font-size-s);--accordion-item-content-font-size: var(--luzmo-font-size-s);--accordion-item-content-margin-left: var(--luzmo-spacing-2);--accordion-item-content-padding-left: var(--luzmo-spacing-4);--accordion-item-content-margin-bottom: var(--luzmo-spacing-2)}:host([variant=highlight-child][size=s][header-case=uppercase]){--accordion-item-header-font-size: var(--luzmo-font-size-xs)}:host([variant=highlight-child]){--accordion-item-height: 32px;--accordion-disclosure-indicator-height: var(luzmo-font-size-s);--accordion-edge-to-disclosure-indicator-space: 0px;--accordion-disclosure-indicator-to-text-space: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--accordion-item-edge-to-text: var(--luzmo-spacing-3);--accordion-item-header-font-size: var(--luzmo-font-size);--accordion-item-content-font-size: var(--luzmo-font-size);--accordion-item-header-bottom-margin: var(--luzmo-spacing-3);--accordion-item-content-margin-left: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--accordion-item-content-padding-left: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--accordion-item-content-margin-bottom: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) )}:host([variant=highlight-child][header-case=uppercase]){--accordion-item-header-font-size: var(--luzmo-font-size-s)}:host([variant=highlight-child][size=l]){--accordion-item-height: 48px;--accordion-disclosure-indicator-height: var(luzmo-font-size);--accordion-edge-to-disclosure-indicator-space: 0px;--accordion-disclosure-indicator-to-text-space: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--accordion-item-edge-to-text: var(--luzmo-spacing-4);--accordion-item-header-font-size: var(--luzmo-font-size-l);--accordion-item-content-font-size: var(--luzmo-font-size-l);--accordion-item-header-bottom-margin: calc( var(--luzmo-spacing-1) + var(--luzmo-spacing-3) );--accordion-item-content-margin-left: var(--luzmo-spacing-3);--accordion-item-content-padding-left: var(--luzmo-spacing-4);--accordion-item-content-margin-bottom: var(--luzmo-spacing-3)}:host([variant=highlight-child][size=l][header-case=uppercase]){--accordion-item-header-font-size: var(--luzmo-font-size)}:host([variant=highlight-child][size=xl]){--accordion-item-height: 56px;--accordion-disclosure-indicator-height: var(luzmo-font-size-l);--accordion-edge-to-disclosure-indicator-space: 0px;--accordion-disclosure-indicator-to-text-space: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--accordion-item-edge-to-text: var(--luzmo-spacing-4);--accordion-item-header-font-size: var(--luzmo-font-size-xl);--accordion-item-content-font-size: var(--luzmo-font-size-xl);--accordion-item-header-bottom-margin: var(--luzmo-spacing-4);--accordion-item-content-margin-left: var(--luzmo-spacing-3);--accordion-item-content-padding-left: var(--luzmo-spacing-5);--accordion-item-content-margin-bottom: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) )}:host([variant=highlight-child][size=xl][header-case=uppercase]){--accordion-item-header-font-size: var(--luzmo-font-size-l)}:host([no-content-padding]),:host([no-content-padding][size=s]),:host([no-content-padding][size=l]),:host([no-content-padding][size=xl]){--accordion-item-edge-to-text: 0px}";var x=Object.defineProperty,d=(t,o,i,n)=>{for(var e=void 0,c=t.length-1,l;c>=0;c--)(l=t[c])&&(e=l(o,i,e)||e);return e&&x(o,i,e),e};class a extends z.SizedMixin(r.LuzmoElement,{noDefaultSize:!0}){constructor(){super(...arguments),this.allowMultiple=!1,this.noContentPadding=!1,this.variant="default",this.focusGroupController=new v.FocusGroupController(this,{direction:"vertical",elements:()=>this.items,isFocusableElement:o=>!o.disabled})}static get styles(){return[s.unsafeCSS(b)]}get items(){return[...this.defaultNodes||[]].filter(o=>o.tagName!==void 0)}focus(){this.focusGroupController.focus()}onToggle(o){const i=o.target,n=[...this.items];if(n.includes(i)){if(this.allowMultiple||o.defaultPrevented||n&&n.length===0)return;n.forEach(e=>{e!==i&&(e.open=!1)})}}handleSlotchange(){this.focusGroupController.clearElementCache(),this.items.forEach(o=>{o.size=this.size})}updated(o){super.updated(o),o.has("size")&&(o.get("size")||this.size!=="m")&&this.items.forEach(i=>{i.size=this.size})}render(){return s.html`
+      <slot
+        @slotchange=${this.handleSlotchange}
+        @luzmo-accordion-item-toggle=${this.onToggle}
+      ></slot>
+    `}}d([r.n({type:Boolean,reflect:!0,attribute:"allow-multiple"})],a.prototype,"allowMultiple");d([r.n({type:String,reflect:!0})],a.prototype,"density");d([r.n({type:String,reflect:!0,attribute:"header-case"})],a.prototype,"headerCase");d([r.n({type:Boolean,reflect:!0,attribute:"no-content-padding"})],a.prototype,"noContentPadding");d([r.n({type:String,reflect:!0})],a.prototype,"variant");d([g.n()],a.prototype,"defaultNodes");const y=':host{z-index:inherit;min-block-size:var(--luzmo-accordion-item-min-block-size, var(--accordion-item-min-block-size));min-inline-size:var(--luzmo-accordion-item-width, 200px);border-block-end:1px solid rgba(0,0,0,0);border-color:var(--luzmo-accordion-divider-color, var(--luzmo-border-color));border-width:var(--luzmo-accordion-divider-thickness, var(--accordion-item-accordion-divider-thickness, var(--luzmo-border-width)));margin:0;position:relative}:host(:first-child){border-block-start:1px solid rgba(0,0,0,0);border-color:var(--luzmo-accordion-divider-color, var(--luzmo-border-color));border-width:var(--luzmo-accordion-divider-thickness, var(--accordion-item-accordion-divider-thickness, var(--luzmo-border-width)))}#heading{box-sizing:border-box;min-height:var(--luzmo-accordion-item-height, var(--accordion-item-height));font-size:var(--luzmo-accordion-item-header-font-size, var(--accordion-item-header-font-size, 18px));margin:0;margin-block:0;position:relative;margin-bottom:var(--luzmo-accordion-item-header-bottom-margin, var(--accordion-item-header-bottom-margin, 0px))}.icon-container{z-index:1;pointer-events:none;inline-size:var(--luzmo-accordion-disclosure-indicator-height, var(--accordion-disclosure-indicator-height));font-size:var(--luzmo-accordion-disclosure-indicator-height, var(--accordion-disclosure-indicator-height));color:var(--luzmo-accordion-item-header-color-default, var(--luzmo-font-color-hard));justify-content:center;align-items:center;padding-inline-start:var(--luzmo-accordion-edge-to-disclosure-indicator-space, var(--accordion-edge-to-disclosure-indicator-space, 0px));display:flex;position:absolute;height:100%}.icon-container:dir(rtl),:host([dir=rtl]) .icon-container{transform:scaleX(-1)}#content{padding-block:var(--luzmo-accordion-item-content-area-top-to-content, 8px) var(--luzmo-accordion-item-content-area-bottom-to-content, 16px);padding-left:calc(var(--luzmo-accordion-item-edge-to-text, var(--accordion-item-edge-to-text, var(--luzmo-spacing-3))) + var(--luzmo-accordion-item-content-padding-left, var(--accordion-item-content-padding-left, 0px)));margin-bottom:var(--luzmo-accordion-item-content-margin-bottom, var(--accordion-item-content-margin-bottom, 0px));margin-left:var(--luzmo-accordion-item-content-margin-left, var(--accordion-item-content-margin-left, 0px));padding-right:var(--luzmo-accordion-item-edge-to-text, var(--accordion-item-edge-to-text, var(--luzmo-spacing-3)));border-left:var(--luzmo-accordion-item-content-border-left-width, var(--accordion-item-content-border-left-width, 0)) var(--luzmo-accordion-item-content-border-left-style, var(--accordion-item-content-border-left-style, solid)) var(--luzmo-accordion-item-content-border-left-color, var(--accordion-item-content-border-left-color, var(--luzmo-border-color)));color:var(--luzmo-accordion-item-content-color, var(--luzmo-font-color));font-weight:var(--luzmo-accordion-item-content-font-weight, var(--accordion-item-content-font-weight, var(--luzmo-font-weight)));font-style:var(--luzmo-accordion-item-content-font-style, var(--luzmo-font-style));font-size:var(--luzmo-accordion-item-content-font-size, var(--accordion-item-content-font-size, var(--luzmo-font-size)));font-family:var(--luzmo-accordion-item-content-font-family, var(--luzmo-font-family));line-height:var(--luzmo-accordion-item-content-line-height, 1.3);display:none}#header{box-sizing:border-box;min-height:var(--luzmo-accordion-item-min-block-size, var(--accordion-item-min-block-size));line-height:var(--luzmo-accordion-item-header-line-height, var(--accordion-item-header-line-height, 1.25));text-overflow:ellipsis;text-transform:var(--luzmo-accordion-item-header-text-case, var(--accordion-item-header-text-case));cursor:pointer;font-size:var(--luzmo-accordion-item-header-font-size, var(--accordion-item-header-font-size, 18px));font-weight:var(--luzmo-accordion-item-header-font-weight, var(--accordion-item-header-font-weight, 600));font-style:var(--luzmo-accordion-item-header-font-style, var(--luzmo-font-style));font-family:var(--luzmo-accordion-item-header-font-family, var(--luzmo-font-family));-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:start;width:100%;color:var(--luzmo-accordion-item-header-color-default, var(--luzmo-font-color));background-color:var(--luzmo-accordion-item-header-background-color, var(--accordion-item-header-background-color, var(--luzmo-background-color)));border:0;padding-top:var(--luzmo-accordion-item-header-vertical-padding, var(--accordion-item-header-vertical-padding, var(--luzmo-spacing-3)));padding-left:calc(var(--luzmo-accordion-disclosure-indicator-to-text-space, var(--accordion-disclosure-indicator-to-text-space, 0px)) + var(--luzmo-accordion-disclosure-indicator-height, var(--accordion-disclosure-indicator-height, 32px)) + var(--luzmo-accordion-edge-to-disclosure-indicator-space, var(--accordion-edge-to-disclosure-indicator-space, 32px)));padding-bottom:var(--luzmo-accordion-item-header-vertical-padding, var(--accordion-item-header-vertical-padding, var(--luzmo-spacing-3)));padding-right:var(--luzmo-accordion-item-edge-to-text, var(--accordion-item-edge-to-text, 0px));position:relative;border-radius:var(--luzmo-accordion-item-accordion-header-border-radius, var(--accordion-item-accordion-header-border-radius))}#header:focus{outline:none}#header:focus:after{content:"";position:absolute;inset-inline-start:0}#header:focus-visible{border-radius:var(--luzmo-accordion-corner-radius, var(--accordion-item-accordion-header-border-radius, var(--luzmo-border-radius-s)));outline:var(--luzmo-accordion-focus-indicator-width, var(--luzmo-border-width)) solid var(--luzmo-accordion-focus-indicator-color, var(--luzmo-primary));background-color:var(--luzmo-accordion-background-color-key-focus, var(--accordion-item-header-background-color, var(--luzmo-background-color-hover)));color:var(--luzmo-accordion-item-header-color-key-focus, var(--luzmo-font-color-hard));outline-offset:calc(var(--luzmo-accordion-focus-indicator-gap, 2px) * -1)}#header:active{background-color:var(--luzmo-accordion-background-color-down, var(--accordion-item-header-background-color, var(--luzmo-background-hover)));color:var(--luzmo-accordion-item-header-color-down, var(--luzmo-font-color-hard))}:host([disabled]) #header,:host([disabled]) #header:focus-visible{color:var(--luzmo-accordion-item-header-disabled-color, var(--luzmo-color-disabled));background-color:var(--luzmo-accordion-item-disabled-background-color, var(--accordion-item-disabled-background-color, initial))}@media (hover: hover){#header:hover{background-color:var(--luzmo-accordion-background-color-hover, var(--accordion-item-header-background-color, var(--luzmo-background-color-hover)))}:host([disabled]) #header:hover{background-color:var(--luzmo-accordion-item-disabled-background-color, var(--accordion-item-disabled-background-color, initial))}#header:hover,#header:hover+.icon-container{color:var(--luzmo-accordion-item-header-color-hover, var(--luzmo-font-color-hard))}:host([open]) #header:hover{background-color:var(--luzmo-accordion-background-color-hover, var(--accordion-item-header-background-color, var(--luzmo-background-color)))}:host([disabled]) #header:hover{color:var(--luzmo-accordion-item-header-disabled-color, var(--luzmo-color-disabled))}}:host([disabled]) #header+.icon-container{color:var(--luzmo-accordion-item-header-disabled-color, var(--luzmo-color-disabled))}:host([disabled]) #content{color:var(--luzmo-accordion-item-content-disabled-color, var(--luzmo-color-disabled))}:host([open])>#heading>.icon-container>.indicator,:host([open])>.icon-container>.indicator{transform:var(--luzmo-logical-rotation) rotate(90deg);transform:rotate(90deg)}:host([open])>#content{display:block}:host([disabled]) #header{cursor:default}@media (forced-colors: active){#header:after{forced-color-adjust:none;content:"";position:absolute;inset-inline-start:0}}:host{display:block}#heading{height:auto;position:relative}:host([disabled]) #heading .indicator{color:var(--luzmo-accordion-item-header-disabled-color, var(--luzmo-color-disabled))}';var k=Object.defineProperty,u=(t,o,i,n)=>{for(var e=void 0,c=t.length-1,l;c>=0;c--)(l=t[c])&&(e=l(o,i,e)||e);return e&&k(o,i,e),e};const w=()=>s.html`
+  <div class="icon-container">
+    ${h.luzmoIcon(h.luzmoAngleRight,{className:"indicator"})}
+  </div>
+`;class m extends z.SizedMixin(p.Focusable,{noDefaultSize:!0}){constructor(){super(...arguments),this.open=!1,this.label="",this.disabled=!1,this.renderAngleIcon=()=>w()}static get styles(){return[s.unsafeCSS(y)]}get focusElement(){return this.renderRoot.querySelector("#header")}onClick(){this.disabled||this.toggle()}toggle(){this.open=!this.open,this.dispatchEvent(new CustomEvent("luzmo-accordion-item-toggle",{bubbles:!0,composed:!0,cancelable:!0}))||(this.open=!this.open)}render(){return s.html`
+      <h3 id="heading">
+        ${f.n(this.size,this.renderAngleIcon)}
+        <button
+          id="header"
+          @click=${this.onClick}
+          aria-expanded=${this.open}
+          aria-controls="content"
+          ?disabled=${this.disabled}
+        >
+          ${this.label}
+        </button>
+      </h3>
+      <div id="content" role="region" aria-labelledby="header">
+        <slot></slot>
+      </div>
+    `}updated(o){super.updated(o),o.has("disabled")&&(this.disabled?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled"))}}u([r.n({type:Boolean,reflect:!0})],m.prototype,"open");u([r.n({type:String,reflect:!0})],m.prototype,"label");u([r.n({type:Boolean,reflect:!0})],m.prototype,"disabled");customElements.get("luzmo-accordion-item")||customElements.define("luzmo-accordion-item",m);customElements.get("luzmo-accordion")||customElements.define("luzmo-accordion",a);exports.LuzmoAccordion=a;exports.LuzmoAccordionItem=m;

package/lib/accordion/index.js

@@ -0,0 +1,182 @@
+/*! * Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account to use Lucero.
+ * This license terminates automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+import { unsafeCSS as h, html as m } from "lit";
+import { L as v, n as a } from "../base-nYalvNMy.js";
+import { n as p } from "../query-assigned-nodes-C76XVPWY.js";
+import { F as f } from "../focus-group-DHeTq18L.js";
+import { S as z } from "../sized-mixin-Dl0KoEcV.js";
+import { luzmoIcon as b, luzmoAngleRight as x } from "@luzmo/icons";
+import { F as y } from "../focusable-DbUg-3Vp.js";
+import { n as k } from "../when-CDK1Tt5Y.js";
+const g = () => {
+  if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
+    const i = document.createElement("style");
+    i.setAttribute("data-luzmo-vars", ""), i.textContent = 'html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-hard: #000;--luzmo-font-color-disabled: var(--luzmo-color-disabled);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-color-negative: #ca221c;--luzmo-color-negative-hover: #b3241f;--luzmo-color-negative-down: #9f231f;--luzmo-color-negative-focus: #b3241f;--luzmo-color-negative-rgb: 202, 34, 28;--luzmo-color-positive: rgb(20, 150, 101);--luzmo-color-positive-hover: rgb(17, 128, 86);--luzmo-color-positive-down: rgb(16, 105, 71);--luzmo-color-positive-focus: rgb(17, 128, 86);--luzmo-color-positive-rgb: 20, 150, 101;--luzmo-color-selected: rgb(110, 110, 110);--luzmo-color-selected-hover: rgb(70, 70, 70);--luzmo-color-selected-down: rgb(40, 40, 40);--luzmo-color-selected-focus: rgb(70, 70, 70);--luzmo-color-selected-hard: #1e1e1e;--luzmo-color-selected-hard-hover: rgb(0, 0, 0);--luzmo-color-selected-hard-down: rgb(0, 0, 0);--luzmo-color-selected-hard-focus: rgb(0, 0, 0);--luzmo-color-informative: #1a77e9;--luzmo-color-informative-rgb: 26, 119, 233;--luzmo-color-disabled: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}', document.head.appendChild(i);
+  }
+};
+g();
+const w = ":host{--accordion-item-header-line-height: 1.25;--accordion-item-header-bottom-margin: 0px;--accordion-item-header-text-case: initial;--accordion-item-min-block-size: max( var(--luzmo-accordion-item-height, var(--accordion-item-height)), calc( var( --luzmo-accordion-item-header-vertical-padding, var(--accordion-item-header-vertical-padding) ) * 2 + var( --luzmo-accordion-item-header-font-size, var(--accordion-item-header-font-size) ) * var( --luzmo-accordion-item-header-line-height, var(--accordion-item-header-line-height) ) ) );margin:0;padding:0;list-style:none;display:block}:host:lang(ja),:host:lang(ko),:host:lang(zh){--luzmo-accordion-item-header-line-height: var( --luzmo-accordion-item-header-line-height-cjk );--luzmo-accordion-item-content-line-height: var( --luzmo-accordion-item-content-line-height-cjk )}:host:dir(rtl),:host([dir=rtl]){--luzmo-logical-rotation: matrix(-1, 0, 0, 1, 0, 0)}:host([size=s]){--accordion-item-height: 32px;--accordion-disclosure-indicator-height: var(--luzmo-font-size-s);--accordion-edge-to-disclosure-indicator-space: var(--luzmo-spacing-2);--accordion-disclosure-indicator-to-text-space: var(--luzmo-spacing-2);--accordion-item-edge-to-text: var(--luzmo-spacing-3);--accordion-item-header-font-size: var(--luzmo-font-size);--accordion-item-content-font-size: var(--luzmo-font-size-s);--accordion-item-header-vertical-padding: var(--luzmo-spacing-2)}:host{--accordion-item-height: 40px;--accordion-disclosure-indicator-height: var(--luzmo-font-size);--accordion-edge-to-disclosure-indicator-space: var(--luzmo-spacing-2);--accordion-disclosure-indicator-to-text-space: var(--luzmo-spacing-2);--accordion-item-edge-to-text: var(--luzmo-spacing-3);--accordion-item-header-font-size: var(--luzmo-font-size-l);--accordion-item-content-font-size: var(--luzmo-font-size);--accordion-item-header-vertical-padding: var(--luzmo-spacing-3)}:host([size=l]){--accordion-item-height: 48px;--accordion-disclosure-indicator-height: var(--luzmo-font-size-l);--accordion-edge-to-disclosure-indicator-space: var(--luzmo-spacing-3);--accordion-disclosure-indicator-to-text-space: var(--luzmo-spacing-2);--accordion-item-edge-to-text: var(--luzmo-spacing-4);--accordion-item-header-font-size: var(--luzmo-font-size-xl);--accordion-item-content-font-size: var(--luzmo-font-size-l);--accordion-item-header-vertical-padding: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) )}:host([size=xl]){--accordion-item-height: 56px;--accordion-disclosure-indicator-height: var(--luzmo-font-size-xl);--accordion-edge-to-disclosure-indicator-space: var(--luzmo-spacing-3);--accordion-disclosure-indicator-to-text-space: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--accordion-item-edge-to-text: var(--luzmo-spacing-4);--accordion-item-header-font-size: var(--luzmo-font-size-xxl);--accordion-item-content-font-size: var(--luzmo-font-size-xl);--accordion-item-header-vertical-padding: var(--luzmo-spacing-4)}:host([density=compact][size=s]){--accordion-item-height: 24px;--accordion-item-header-vertical-padding: var(--luzmo-spacing-1)}:host([density=compact]){--accordion-item-height: 32px;--accordion-item-header-vertical-padding: var(--luzmo-spacing-2)}:host([density=compact][size=l]){--accordion-item-height: 40px;--accordion-item-header-vertical-padding: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) )}:host([density=compact][size=xl]){--accordion-item-height: 48px;--accordion-item-header-vertical-padding: var(--luzmo-spacing-3)}:host([density=spacious][size=s]){--accordion-item-header-vertical-padding: var(--luzmo-spacing-3)}:host([density=spacious]){--accordion-item-header-vertical-padding: var(--luzmo-spacing-4)}:host([density=spacious][size=l]){--accordion-item-header-vertical-padding: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) )}:host([density=spacious][size=xl]){--accordion-item-header-vertical-padding: var(--luzmo-spacing-4)}:host([header-case=uppercase]){--accordion-item-header-text-case: uppercase}:host([header-case=uppercase][size=s]){--accordion-item-header-font-size: var(--luzmo-font-size-xs)}:host([header-case=uppercase]){--accordion-item-header-font-size: var(--luzmo-font-size-s)}:host([header-case=uppercase][size=l]){--accordion-item-header-font-size: var(--luzmo-font-size)}:host([header-case=uppercase][size=xl]){--accordion-item-header-font-size: var(--luzmo-font-size-l)}:host([variant=highlight]){--accordion-item-header-background-color: var( --luzmo-background-color-highlight );--accordion-item-disabled-background-color: var( --luzmo-background-color-highlight-disabled );--accordion-item-accordion-divider-thickness: 0px;--accordion-item-accordion-header-border-radius: var(--luzmo-border-radius)}:host([variant=highlight][size=s]){--accordion-item-height: 28px;--accordion-disclosure-indicator-height: var(luzmo-font-size-xs);--accordion-edge-to-disclosure-indicator-space: var(--luzmo-spacing-3);--accordion-disclosure-indicator-to-text-space: var(--luzmo-spacing-2);--accordion-item-header-font-size: var(--luzmo-font-size-s);--accordion-item-content-font-size: var(--luzmo-font-size-s);--accordion-item-header-bottom-margin: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) )}:host([variant=highlight][size=s][header-case=uppercase]){--accordion-item-header-font-size: var(--luzmo-font-size-xs)}:host([variant=highlight]){--accordion-item-height: 32px;--accordion-disclosure-indicator-height: var(luzmo-font-size-s);--accordion-edge-to-disclosure-indicator-space: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--accordion-disclosure-indicator-to-text-space: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--accordion-item-header-font-size: var(--luzmo-font-size);--accordion-item-content-font-size: var(--luzmo-font-size);--accordion-item-header-bottom-margin: var(--luzmo-spacing-3)}:host([variant=highlight][header-case=uppercase]){--accordion-item-header-font-size: var(--luzmo-font-size-s)}:host([variant=highlight][size=l]){--accordion-item-height: 48px;--accordion-disclosure-indicator-height: var(luzmo-font-size);--accordion-edge-to-disclosure-indicator-space: var(--luzmo-spacing-4);--accordion-disclosure-indicator-to-text-space: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--accordion-item-header-font-size: var(--luzmo-font-size-l);--accordion-item-content-font-size: var(--luzmo-font-size-l);--accordion-item-header-bottom-margin: calc( var(--luzmo-spacing-1) + var(--luzmo-spacing-3) );--accordion-item-header-bottom-margin: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) )}:host([variant=highlight][size=l][header-case=uppercase]){--accordion-item-header-font-size: var(--luzmo-font-size)}:host([variant=highlight][size=xl]){--accordion-item-height: 56px;--accordion-disclosure-indicator-height: var(luzmo-font-size-l);--accordion-edge-to-disclosure-indicator-space: var(--luzmo-spacing-4);--accordion-disclosure-indicator-to-text-space: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--accordion-item-header-font-size: var(--luzmo-font-size-xl);--accordion-item-content-font-size: var(--luzmo-font-size-xl);--accordion-item-header-bottom-margin: var(--luzmo-spacing-4);--accordion-item-header-bottom-margin: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) )}:host([variant=highlight][size=xl][header-case=uppercase]){--accordion-item-header-font-size: var(--luzmo-font-size-l)}:host([variant=highlight-child]){--accordion-item-header-background-color: var(--luzmo-background-color);--accordion-item-disabled-background-color: transparent;--accordion-item-accordion-divider-thickness: 0px;--accordion-item-accordion-header-border-radius: var(--luzmo-border-radius);--accordion-item-header-font-weight: normal;--accordion-item-content-border-left-width: var(--luzmo-border-width);--accordion-item-content-border-left-color: var(--luzmo-border-color);--accordion-item-content-border-left-style: solid;--accordion-edge-to-disclosure-indicator-space: 0px}:host([variant=highlight-child][size=s]){--accordion-item-height: 28px;--accordion-disclosure-indicator-height: var(luzmo-font-size-xs);--accordion-edge-to-disclosure-indicator-space: 0px;--accordion-disclosure-indicator-to-text-space: var(--luzmo-spacing-2);--accordion-item-edge-to-text: var(--luzmo-spacing-3);--accordion-item-header-font-size: var(--luzmo-font-size-s);--accordion-item-content-font-size: var(--luzmo-font-size-s);--accordion-item-content-margin-left: var(--luzmo-spacing-2);--accordion-item-content-padding-left: var(--luzmo-spacing-4);--accordion-item-content-margin-bottom: var(--luzmo-spacing-2)}:host([variant=highlight-child][size=s][header-case=uppercase]){--accordion-item-header-font-size: var(--luzmo-font-size-xs)}:host([variant=highlight-child]){--accordion-item-height: 32px;--accordion-disclosure-indicator-height: var(luzmo-font-size-s);--accordion-edge-to-disclosure-indicator-space: 0px;--accordion-disclosure-indicator-to-text-space: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--accordion-item-edge-to-text: var(--luzmo-spacing-3);--accordion-item-header-font-size: var(--luzmo-font-size);--accordion-item-content-font-size: var(--luzmo-font-size);--accordion-item-header-bottom-margin: var(--luzmo-spacing-3);--accordion-item-content-margin-left: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--accordion-item-content-padding-left: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--accordion-item-content-margin-bottom: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) )}:host([variant=highlight-child][header-case=uppercase]){--accordion-item-header-font-size: var(--luzmo-font-size-s)}:host([variant=highlight-child][size=l]){--accordion-item-height: 48px;--accordion-disclosure-indicator-height: var(luzmo-font-size);--accordion-edge-to-disclosure-indicator-space: 0px;--accordion-disclosure-indicator-to-text-space: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--accordion-item-edge-to-text: var(--luzmo-spacing-4);--accordion-item-header-font-size: var(--luzmo-font-size-l);--accordion-item-content-font-size: var(--luzmo-font-size-l);--accordion-item-header-bottom-margin: calc( var(--luzmo-spacing-1) + var(--luzmo-spacing-3) );--accordion-item-content-margin-left: var(--luzmo-spacing-3);--accordion-item-content-padding-left: var(--luzmo-spacing-4);--accordion-item-content-margin-bottom: var(--luzmo-spacing-3)}:host([variant=highlight-child][size=l][header-case=uppercase]){--accordion-item-header-font-size: var(--luzmo-font-size)}:host([variant=highlight-child][size=xl]){--accordion-item-height: 56px;--accordion-disclosure-indicator-height: var(luzmo-font-size-l);--accordion-edge-to-disclosure-indicator-space: 0px;--accordion-disclosure-indicator-to-text-space: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--accordion-item-edge-to-text: var(--luzmo-spacing-4);--accordion-item-header-font-size: var(--luzmo-font-size-xl);--accordion-item-content-font-size: var(--luzmo-font-size-xl);--accordion-item-header-bottom-margin: var(--luzmo-spacing-4);--accordion-item-content-margin-left: var(--luzmo-spacing-3);--accordion-item-content-padding-left: var(--luzmo-spacing-5);--accordion-item-content-margin-bottom: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) )}:host([variant=highlight-child][size=xl][header-case=uppercase]){--accordion-item-header-font-size: var(--luzmo-font-size-l)}:host([no-content-padding]),:host([no-content-padding][size=s]),:host([no-content-padding][size=l]),:host([no-content-padding][size=xl]){--accordion-item-edge-to-text: 0px}";
+var S = Object.defineProperty, d = (i, o, r, n) => {
+  for (var e = void 0, t = i.length - 1, l; t >= 0; t--)
+    (l = i[t]) && (e = l(o, r, e) || e);
+  return e && S(o, r, e), e;
+};
+class c extends z(v, {
+  noDefaultSize: !0
+}) {
+  constructor() {
+    super(...arguments), this.allowMultiple = !1, this.noContentPadding = !1, this.variant = "default", this.focusGroupController = new f(
+      this,
+      {
+        direction: "vertical",
+        elements: () => this.items,
+        isFocusableElement: (o) => !o.disabled
+      }
+    );
+  }
+  static get styles() {
+    return [h(w)];
+  }
+  get items() {
+    return [...this.defaultNodes || []].filter(
+      (o) => o.tagName !== void 0
+    );
+  }
+  focus() {
+    this.focusGroupController.focus();
+  }
+  onToggle(o) {
+    const r = o.target, n = [...this.items];
+    if (n.includes(r)) {
+      if (this.allowMultiple || o.defaultPrevented || n && n.length === 0)
+        return;
+      n.forEach((e) => {
+        e !== r && (e.open = !1);
+      });
+    }
+  }
+  handleSlotchange() {
+    this.focusGroupController.clearElementCache(), this.items.forEach((o) => {
+      o.size = this.size;
+    });
+  }
+  updated(o) {
+    super.updated(o), o.has("size") && (o.get("size") || this.size !== "m") && this.items.forEach((r) => {
+      r.size = this.size;
+    });
+  }
+  render() {
+    return m`
+      <slot
+        @slotchange=${this.handleSlotchange}
+        @luzmo-accordion-item-toggle=${this.onToggle}
+      ></slot>
+    `;
+  }
+}
+d([
+  a({ type: Boolean, reflect: !0, attribute: "allow-multiple" })
+], c.prototype, "allowMultiple");
+d([
+  a({ type: String, reflect: !0 })
+], c.prototype, "density");
+d([
+  a({ type: String, reflect: !0, attribute: "header-case" })
+], c.prototype, "headerCase");
+d([
+  a({ type: Boolean, reflect: !0, attribute: "no-content-padding" })
+], c.prototype, "noContentPadding");
+d([
+  a({ type: String, reflect: !0 })
+], c.prototype, "variant");
+d([
+  p()
+], c.prototype, "defaultNodes");
+const C = ':host{z-index:inherit;min-block-size:var(--luzmo-accordion-item-min-block-size, var(--accordion-item-min-block-size));min-inline-size:var(--luzmo-accordion-item-width, 200px);border-block-end:1px solid rgba(0,0,0,0);border-color:var(--luzmo-accordion-divider-color, var(--luzmo-border-color));border-width:var(--luzmo-accordion-divider-thickness, var(--accordion-item-accordion-divider-thickness, var(--luzmo-border-width)));margin:0;position:relative}:host(:first-child){border-block-start:1px solid rgba(0,0,0,0);border-color:var(--luzmo-accordion-divider-color, var(--luzmo-border-color));border-width:var(--luzmo-accordion-divider-thickness, var(--accordion-item-accordion-divider-thickness, var(--luzmo-border-width)))}#heading{box-sizing:border-box;min-height:var(--luzmo-accordion-item-height, var(--accordion-item-height));font-size:var(--luzmo-accordion-item-header-font-size, var(--accordion-item-header-font-size, 18px));margin:0;margin-block:0;position:relative;margin-bottom:var(--luzmo-accordion-item-header-bottom-margin, var(--accordion-item-header-bottom-margin, 0px))}.icon-container{z-index:1;pointer-events:none;inline-size:var(--luzmo-accordion-disclosure-indicator-height, var(--accordion-disclosure-indicator-height));font-size:var(--luzmo-accordion-disclosure-indicator-height, var(--accordion-disclosure-indicator-height));color:var(--luzmo-accordion-item-header-color-default, var(--luzmo-font-color-hard));justify-content:center;align-items:center;padding-inline-start:var(--luzmo-accordion-edge-to-disclosure-indicator-space, var(--accordion-edge-to-disclosure-indicator-space, 0px));display:flex;position:absolute;height:100%}.icon-container:dir(rtl),:host([dir=rtl]) .icon-container{transform:scaleX(-1)}#content{padding-block:var(--luzmo-accordion-item-content-area-top-to-content, 8px) var(--luzmo-accordion-item-content-area-bottom-to-content, 16px);padding-left:calc(var(--luzmo-accordion-item-edge-to-text, var(--accordion-item-edge-to-text, var(--luzmo-spacing-3))) + var(--luzmo-accordion-item-content-padding-left, var(--accordion-item-content-padding-left, 0px)));margin-bottom:var(--luzmo-accordion-item-content-margin-bottom, var(--accordion-item-content-margin-bottom, 0px));margin-left:var(--luzmo-accordion-item-content-margin-left, var(--accordion-item-content-margin-left, 0px));padding-right:var(--luzmo-accordion-item-edge-to-text, var(--accordion-item-edge-to-text, var(--luzmo-spacing-3)));border-left:var(--luzmo-accordion-item-content-border-left-width, var(--accordion-item-content-border-left-width, 0)) var(--luzmo-accordion-item-content-border-left-style, var(--accordion-item-content-border-left-style, solid)) var(--luzmo-accordion-item-content-border-left-color, var(--accordion-item-content-border-left-color, var(--luzmo-border-color)));color:var(--luzmo-accordion-item-content-color, var(--luzmo-font-color));font-weight:var(--luzmo-accordion-item-content-font-weight, var(--accordion-item-content-font-weight, var(--luzmo-font-weight)));font-style:var(--luzmo-accordion-item-content-font-style, var(--luzmo-font-style));font-size:var(--luzmo-accordion-item-content-font-size, var(--accordion-item-content-font-size, var(--luzmo-font-size)));font-family:var(--luzmo-accordion-item-content-font-family, var(--luzmo-font-family));line-height:var(--luzmo-accordion-item-content-line-height, 1.3);display:none}#header{box-sizing:border-box;min-height:var(--luzmo-accordion-item-min-block-size, var(--accordion-item-min-block-size));line-height:var(--luzmo-accordion-item-header-line-height, var(--accordion-item-header-line-height, 1.25));text-overflow:ellipsis;text-transform:var(--luzmo-accordion-item-header-text-case, var(--accordion-item-header-text-case));cursor:pointer;font-size:var(--luzmo-accordion-item-header-font-size, var(--accordion-item-header-font-size, 18px));font-weight:var(--luzmo-accordion-item-header-font-weight, var(--accordion-item-header-font-weight, 600));font-style:var(--luzmo-accordion-item-header-font-style, var(--luzmo-font-style));font-family:var(--luzmo-accordion-item-header-font-family, var(--luzmo-font-family));-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:start;width:100%;color:var(--luzmo-accordion-item-header-color-default, var(--luzmo-font-color));background-color:var(--luzmo-accordion-item-header-background-color, var(--accordion-item-header-background-color, var(--luzmo-background-color)));border:0;padding-top:var(--luzmo-accordion-item-header-vertical-padding, var(--accordion-item-header-vertical-padding, var(--luzmo-spacing-3)));padding-left:calc(var(--luzmo-accordion-disclosure-indicator-to-text-space, var(--accordion-disclosure-indicator-to-text-space, 0px)) + var(--luzmo-accordion-disclosure-indicator-height, var(--accordion-disclosure-indicator-height, 32px)) + var(--luzmo-accordion-edge-to-disclosure-indicator-space, var(--accordion-edge-to-disclosure-indicator-space, 32px)));padding-bottom:var(--luzmo-accordion-item-header-vertical-padding, var(--accordion-item-header-vertical-padding, var(--luzmo-spacing-3)));padding-right:var(--luzmo-accordion-item-edge-to-text, var(--accordion-item-edge-to-text, 0px));position:relative;border-radius:var(--luzmo-accordion-item-accordion-header-border-radius, var(--accordion-item-accordion-header-border-radius))}#header:focus{outline:none}#header:focus:after{content:"";position:absolute;inset-inline-start:0}#header:focus-visible{border-radius:var(--luzmo-accordion-corner-radius, var(--accordion-item-accordion-header-border-radius, var(--luzmo-border-radius-s)));outline:var(--luzmo-accordion-focus-indicator-width, var(--luzmo-border-width)) solid var(--luzmo-accordion-focus-indicator-color, var(--luzmo-primary));background-color:var(--luzmo-accordion-background-color-key-focus, var(--accordion-item-header-background-color, var(--luzmo-background-color-hover)));color:var(--luzmo-accordion-item-header-color-key-focus, var(--luzmo-font-color-hard));outline-offset:calc(var(--luzmo-accordion-focus-indicator-gap, 2px) * -1)}#header:active{background-color:var(--luzmo-accordion-background-color-down, var(--accordion-item-header-background-color, var(--luzmo-background-hover)));color:var(--luzmo-accordion-item-header-color-down, var(--luzmo-font-color-hard))}:host([disabled]) #header,:host([disabled]) #header:focus-visible{color:var(--luzmo-accordion-item-header-disabled-color, var(--luzmo-color-disabled));background-color:var(--luzmo-accordion-item-disabled-background-color, var(--accordion-item-disabled-background-color, initial))}@media (hover: hover){#header:hover{background-color:var(--luzmo-accordion-background-color-hover, var(--accordion-item-header-background-color, var(--luzmo-background-color-hover)))}:host([disabled]) #header:hover{background-color:var(--luzmo-accordion-item-disabled-background-color, var(--accordion-item-disabled-background-color, initial))}#header:hover,#header:hover+.icon-container{color:var(--luzmo-accordion-item-header-color-hover, var(--luzmo-font-color-hard))}:host([open]) #header:hover{background-color:var(--luzmo-accordion-background-color-hover, var(--accordion-item-header-background-color, var(--luzmo-background-color)))}:host([disabled]) #header:hover{color:var(--luzmo-accordion-item-header-disabled-color, var(--luzmo-color-disabled))}}:host([disabled]) #header+.icon-container{color:var(--luzmo-accordion-item-header-disabled-color, var(--luzmo-color-disabled))}:host([disabled]) #content{color:var(--luzmo-accordion-item-content-disabled-color, var(--luzmo-color-disabled))}:host([open])>#heading>.icon-container>.indicator,:host([open])>.icon-container>.indicator{transform:var(--luzmo-logical-rotation) rotate(90deg);transform:rotate(90deg)}:host([open])>#content{display:block}:host([disabled]) #header{cursor:default}@media (forced-colors: active){#header:after{forced-color-adjust:none;content:"";position:absolute;inset-inline-start:0}}:host{display:block}#heading{height:auto;position:relative}:host([disabled]) #heading .indicator{color:var(--luzmo-accordion-item-header-disabled-color, var(--luzmo-color-disabled))}';
+var E = Object.defineProperty, u = (i, o, r, n) => {
+  for (var e = void 0, t = i.length - 1, l; t >= 0; t--)
+    (l = i[t]) && (e = l(o, r, e) || e);
+  return e && E(o, r, e), e;
+};
+const $ = () => m`
+  <div class="icon-container">
+    ${b(x, { className: "indicator" })}
+  </div>
+`;
+class s extends z(y, {
+  noDefaultSize: !0
+}) {
+  constructor() {
+    super(...arguments), this.open = !1, this.label = "", this.disabled = !1, this.renderAngleIcon = () => $();
+  }
+  static get styles() {
+    return [h(C)];
+  }
+  get focusElement() {
+    return this.renderRoot.querySelector("#header");
+  }
+  onClick() {
+    this.disabled || this.toggle();
+  }
+  toggle() {
+    this.open = !this.open, this.dispatchEvent(
+      new CustomEvent("luzmo-accordion-item-toggle", {
+        bubbles: !0,
+        composed: !0,
+        cancelable: !0
+      })
+    ) || (this.open = !this.open);
+  }
+  render() {
+    return m`
+      <h3 id="heading">
+        ${k(this.size, this.renderAngleIcon)}
+        <button
+          id="header"
+          @click=${this.onClick}
+          aria-expanded=${this.open}
+          aria-controls="content"
+          ?disabled=${this.disabled}
+        >
+          ${this.label}
+        </button>
+      </h3>
+      <div id="content" role="region" aria-labelledby="header">
+        <slot></slot>
+      </div>
+    `;
+  }
+  updated(o) {
+    super.updated(o), o.has("disabled") && (this.disabled ? this.setAttribute("aria-disabled", "true") : this.removeAttribute("aria-disabled"));
+  }
+}
+u([
+  a({ type: Boolean, reflect: !0 })
+], s.prototype, "open");
+u([
+  a({ type: String, reflect: !0 })
+], s.prototype, "label");
+u([
+  a({ type: Boolean, reflect: !0 })
+], s.prototype, "disabled");
+customElements.get("luzmo-accordion-item") || customElements.define("luzmo-accordion-item", s);
+customElements.get("luzmo-accordion") || customElements.define("luzmo-accordion", c);
+export {
+  c as LuzmoAccordion,
+  s as LuzmoAccordionItem
+};

package/lib/action-bar/index.cjs

@@ -0,0 +1,39 @@
+/*! * Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account to use Lucero.
+ * This license terminates automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../base-BCmA9Wxv.cjs"),p=require("../focus-visible-B0P9aY_G.cjs"),u=require("lit"),b=require("../if-defined-Cv6xanXh.cjs");require("../action-group-D4MxBrq8.cjs");require("../close-button-BrfeZvjk.cjs");require("../field-label-BrJaeORz.cjs");require("../popover-CVbjhSnx.cjs");const m="@media (forced-colors: active){:host,:host([emphasized]) #popover{--highcontrast-action-bar-popover-border-color: CanvasText}}:host{padding:0 var(--luzmo-action-bar-spacing-outer-edge, var(--action-bar-spacing-outer-edge));z-index:1;box-sizing:border-box;pointer-events:none;block-size:0;opacity:0;inset-block-end:0}:host([open]){block-size:calc(var(--luzmo-action-bar-spacing-outer-edge, var(--action-bar-spacing-outer-edge)) + var(--luzmo-action-bar-height, var(--action-bar-height)));opacity:1}#popover{block-size:var(--luzmo-action-bar-height, var(--action-bar-height));box-sizing:border-box;inline-size:100%;border-radius:var(--luzmo-action-bar-corner-radius, var(--action-bar-corner-radius));border-color:var(--highcontrast-action-bar-popover-border-color, var(--luzmo-action-bar-popover-border-color, var(--action-bar-popover-border-color)));background-color:var(--luzmo-action-bar-popover-background-color, var(--action-bar-popover-background-color));filter:drop-shadow(var(--luzmo-action-bar-shadow-horizontal, var(--action-bar-shadow-horizontal)) var(--luzmo-action-bar-shadow-vertical, var(--action-bar-shadow-vertical)) var(--luzmo-action-bar-shadow-blur, var(--action-bar-shadow-blur)) var(--luzmo-action-bar-shadow-color, var(--action-bar-shadow-color)));pointer-events:auto;flex-direction:row;margin:auto;padding-block:0;display:flex;position:relative}.close-button{flex-shrink:0;margin-block-start:var(--luzmo-action-bar-spacing-close-button-top, var(--action-bar-spacing-close-button-top));margin-inline-start:var(--luzmo-action-bar-spacing-close-button-start, var(--action-bar-spacing-close-button-start));margin-inline-end:var(--luzmo-action-bar-spacing-close-button-end, var(--action-bar-spacing-close-button-end))}.field-label{font-size:var(--luzmo-action-bar-item-counter-font-size, var(--action-bar-item-counter-font-size));color:var(--luzmo-action-bar-item-counter-color, var(--action-bar-item-counter-color));line-height:var(--luzmo-action-bar-item-counter-line-height, var(--action-bar-item-counter-line-height));margin-block-start:var(--luzmo-action-bar-spacing-item-counter-top, var(--action-bar-spacing-item-counter-top));margin-inline-end:var(--luzmo-action-bar-spacing-item-counter-end, var(--action-bar-spacing-item-counter-end));padding:0}.field-label:lang(ja),.field-label:lang(ko),.field-label:lang(zh){line-height:var(--luzmo-action-bar-item-counter-line-height-cjk, var(--action-bar-item-counter-line-height-cjk))}.action-group{margin-block-start:var(--luzmo-action-bar-spacing-action-group-top, var(--action-bar-spacing-action-group-top));margin-inline-start:auto;margin-inline-end:var(--luzmo-action-bar-spacing-action-group-end, var(--action-bar-spacing-action-group-end))}:host([emphasized]) #popover{filter:none;background-color:var(--luzmo-action-bar-emphasized-background-color, var(--action-bar-emphasized-background-color));border-color:#0000}:host([emphasized]) .field-label{color:var(--luzmo-action-bar-emphasized-item-counter-color, var(--action-bar-emphasized-item-counter-color))}:host([variant=sticky]){position:sticky;inset-inline:0}:host([variant=fixed]){position:fixed}:host([flexible]) #popover{inline-size:auto}:host{--action-bar-height: var(--luzmo-component-height-xl);--action-bar-corner-radius: var(--luzmo-border-radius);--action-bar-item-counter-font-size: var(--luzmo-font-size);--action-bar-item-counter-line-height: var(--luzmo-line-height);--action-bar-item-counter-color: var(--luzmo-font-color);--action-bar-item-counter-line-height-cjk: 1.5;--action-bar-popover-background-color: var(--luzmo-background-color);--action-bar-popover-border-color: var(--luzmo-border-color);--action-bar-emphasized-background-color: var(--luzmo-primary);--action-bar-emphasized-item-counter-color: var( --luzmo-primary-inverse-color );--action-bar-spacing-outer-edge: var(-luzmo-spacing-5);--action-bar-spacing-close-button-top: calc( var(--luzmo-spacing-3) - var(--luzmo-border-width) );--action-bar-spacing-close-button-start: calc( var(--luzmo-spacing-3) - var(--luzmo-border-width) );--action-bar-spacing-close-button-end: var(--luzmo-spacing-3);--action-bar-spacing-item-counter-top: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--action-bar-spacing-item-counter-end: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-3) );--action-bar-spacing-action-group-top: calc( var(--luzmo-spacing-3) - var(--luzmo-border-width) );--action-bar-spacing-action-group-end: calc( var(--luzmo-spacing-3) - var(--luzmo-border-width) );--action-bar-shadow-horizontal: 0;--action-bar-shadow-vertical: 1px;--action-bar-shadow-blur: 4px;--action-bar-shadow-color: var(--luzmo-border-color)}:host{display:block}:host([flexible]){display:inline-block}";var v=Object.defineProperty,d=Object.getOwnPropertyDescriptor,i=(n,o,c,e)=>{for(var a=e>1?void 0:e?d(o,c):o,l=n.length-1,s;l>=0;l--)(s=n[l])&&(a=(e?s(o,c,a):s(a))||a);return e&&a&&v(o,c,a),a};const h=["sticky","fixed"];class r extends p.FocusVisiblePolyfillMixin(t.LuzmoElement){constructor(){super(...arguments),this.emphasized=!1,this.flexible=!1,this.open=!1,this._variant=""}static get styles(){return[u.unsafeCSS(m)]}set variant(o){if(o!==this.variant){if(h.includes(o)){this.setAttribute("variant",o),this._variant=o;return}this.removeAttribute("variant"),this._variant=""}}get variant(){return this._variant}handleClick(){this.open=!1,this.dispatchEvent(new Event("close",{bubbles:!0,composed:!0,cancelable:!0}))||(this.open=!0)}render(){return u.html`
+      <luzmo-popover ?open=${this.open} id="popover">
+        <slot name="override">
+          <luzmo-close-button
+            static-color=${b.o(this.emphasized?"white":void 0)}
+            class="close-button"
+            label="Clear selection"
+            @click=${this.handleClick}
+          ></luzmo-close-button>
+          <luzmo-field-label class="field-label">
+            <slot></slot>
+          </luzmo-field-label>
+          <luzmo-action-group
+            class="action-group"
+            quiet
+            static-color=${b.o(this.emphasized?"white":void 0)}
+          >
+            <slot name="buttons"></slot>
+          </luzmo-action-group>
+        </slot>
+      </luzmo-popover>
+    `}}i([t.n({type:Boolean,reflect:!0})],r.prototype,"emphasized",2);i([t.n({type:Boolean,reflect:!0})],r.prototype,"flexible",2);i([t.n({type:Boolean,reflect:!0})],r.prototype,"open",2);i([t.n({type:String})],r.prototype,"variant",1);customElements.get("luzmo-action-bar")||customElements.define("luzmo-action-bar",r);exports.LuzmoActionBar=r;

package/lib/action-bar/index.js

@@ -0,0 +1,108 @@
+/*! * Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account to use Lucero.
+ * This license terminates automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+import { L as b, n as t } from "../base-nYalvNMy.js";
+import { F as p } from "../focus-visible-DBlJGoEW.js";
+import { unsafeCSS as d, html as z } from "lit";
+import { o as s } from "../if-defined-CYpcjGCb.js";
+import "../action-group-BoIH8s8R.js";
+import "../close-button-CGISEF33.js";
+import "../field-label-BK_tk8vP.js";
+import "../popover-ZRVxogyp.js";
+const m = () => {
+  if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
+    const r = document.createElement("style");
+    r.setAttribute("data-luzmo-vars", ""), r.textContent = 'html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-hard: #000;--luzmo-font-color-disabled: var(--luzmo-color-disabled);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-color-negative: #ca221c;--luzmo-color-negative-hover: #b3241f;--luzmo-color-negative-down: #9f231f;--luzmo-color-negative-focus: #b3241f;--luzmo-color-negative-rgb: 202, 34, 28;--luzmo-color-positive: rgb(20, 150, 101);--luzmo-color-positive-hover: rgb(17, 128, 86);--luzmo-color-positive-down: rgb(16, 105, 71);--luzmo-color-positive-focus: rgb(17, 128, 86);--luzmo-color-positive-rgb: 20, 150, 101;--luzmo-color-selected: rgb(110, 110, 110);--luzmo-color-selected-hover: rgb(70, 70, 70);--luzmo-color-selected-down: rgb(40, 40, 40);--luzmo-color-selected-focus: rgb(70, 70, 70);--luzmo-color-selected-hard: #1e1e1e;--luzmo-color-selected-hard-hover: rgb(0, 0, 0);--luzmo-color-selected-hard-down: rgb(0, 0, 0);--luzmo-color-selected-hard-focus: rgb(0, 0, 0);--luzmo-color-informative: #1a77e9;--luzmo-color-informative-rgb: 26, 119, 233;--luzmo-color-disabled: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}', document.head.appendChild(r);
+  }
+};
+m();
+const g = "@media (forced-colors: active){:host,:host([emphasized]) #popover{--highcontrast-action-bar-popover-border-color: CanvasText}}:host{padding:0 var(--luzmo-action-bar-spacing-outer-edge, var(--action-bar-spacing-outer-edge));z-index:1;box-sizing:border-box;pointer-events:none;block-size:0;opacity:0;inset-block-end:0}:host([open]){block-size:calc(var(--luzmo-action-bar-spacing-outer-edge, var(--action-bar-spacing-outer-edge)) + var(--luzmo-action-bar-height, var(--action-bar-height)));opacity:1}#popover{block-size:var(--luzmo-action-bar-height, var(--action-bar-height));box-sizing:border-box;inline-size:100%;border-radius:var(--luzmo-action-bar-corner-radius, var(--action-bar-corner-radius));border-color:var(--highcontrast-action-bar-popover-border-color, var(--luzmo-action-bar-popover-border-color, var(--action-bar-popover-border-color)));background-color:var(--luzmo-action-bar-popover-background-color, var(--action-bar-popover-background-color));filter:drop-shadow(var(--luzmo-action-bar-shadow-horizontal, var(--action-bar-shadow-horizontal)) var(--luzmo-action-bar-shadow-vertical, var(--action-bar-shadow-vertical)) var(--luzmo-action-bar-shadow-blur, var(--action-bar-shadow-blur)) var(--luzmo-action-bar-shadow-color, var(--action-bar-shadow-color)));pointer-events:auto;flex-direction:row;margin:auto;padding-block:0;display:flex;position:relative}.close-button{flex-shrink:0;margin-block-start:var(--luzmo-action-bar-spacing-close-button-top, var(--action-bar-spacing-close-button-top));margin-inline-start:var(--luzmo-action-bar-spacing-close-button-start, var(--action-bar-spacing-close-button-start));margin-inline-end:var(--luzmo-action-bar-spacing-close-button-end, var(--action-bar-spacing-close-button-end))}.field-label{font-size:var(--luzmo-action-bar-item-counter-font-size, var(--action-bar-item-counter-font-size));color:var(--luzmo-action-bar-item-counter-color, var(--action-bar-item-counter-color));line-height:var(--luzmo-action-bar-item-counter-line-height, var(--action-bar-item-counter-line-height));margin-block-start:var(--luzmo-action-bar-spacing-item-counter-top, var(--action-bar-spacing-item-counter-top));margin-inline-end:var(--luzmo-action-bar-spacing-item-counter-end, var(--action-bar-spacing-item-counter-end));padding:0}.field-label:lang(ja),.field-label:lang(ko),.field-label:lang(zh){line-height:var(--luzmo-action-bar-item-counter-line-height-cjk, var(--action-bar-item-counter-line-height-cjk))}.action-group{margin-block-start:var(--luzmo-action-bar-spacing-action-group-top, var(--action-bar-spacing-action-group-top));margin-inline-start:auto;margin-inline-end:var(--luzmo-action-bar-spacing-action-group-end, var(--action-bar-spacing-action-group-end))}:host([emphasized]) #popover{filter:none;background-color:var(--luzmo-action-bar-emphasized-background-color, var(--action-bar-emphasized-background-color));border-color:#0000}:host([emphasized]) .field-label{color:var(--luzmo-action-bar-emphasized-item-counter-color, var(--action-bar-emphasized-item-counter-color))}:host([variant=sticky]){position:sticky;inset-inline:0}:host([variant=fixed]){position:fixed}:host([flexible]) #popover{inline-size:auto}:host{--action-bar-height: var(--luzmo-component-height-xl);--action-bar-corner-radius: var(--luzmo-border-radius);--action-bar-item-counter-font-size: var(--luzmo-font-size);--action-bar-item-counter-line-height: var(--luzmo-line-height);--action-bar-item-counter-color: var(--luzmo-font-color);--action-bar-item-counter-line-height-cjk: 1.5;--action-bar-popover-background-color: var(--luzmo-background-color);--action-bar-popover-border-color: var(--luzmo-border-color);--action-bar-emphasized-background-color: var(--luzmo-primary);--action-bar-emphasized-item-counter-color: var( --luzmo-primary-inverse-color );--action-bar-spacing-outer-edge: var(-luzmo-spacing-5);--action-bar-spacing-close-button-top: calc( var(--luzmo-spacing-3) - var(--luzmo-border-width) );--action-bar-spacing-close-button-start: calc( var(--luzmo-spacing-3) - var(--luzmo-border-width) );--action-bar-spacing-close-button-end: var(--luzmo-spacing-3);--action-bar-spacing-item-counter-top: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--action-bar-spacing-item-counter-end: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-3) );--action-bar-spacing-action-group-top: calc( var(--luzmo-spacing-3) - var(--luzmo-border-width) );--action-bar-spacing-action-group-end: calc( var(--luzmo-spacing-3) - var(--luzmo-border-width) );--action-bar-shadow-horizontal: 0;--action-bar-shadow-vertical: 1px;--action-bar-shadow-blur: 4px;--action-bar-shadow-color: var(--luzmo-border-color)}:host{display:block}:host([flexible]){display:inline-block}";
+var h = Object.defineProperty, v = Object.getOwnPropertyDescriptor, i = (r, o, n, l) => {
+  for (var a = l > 1 ? void 0 : l ? v(o, n) : o, c = r.length - 1, u; c >= 0; c--)
+    (u = r[c]) && (a = (l ? u(o, n, a) : u(a)) || a);
+  return l && a && h(o, n, a), a;
+};
+const f = ["sticky", "fixed"];
+class e extends p(b) {
+  constructor() {
+    super(...arguments), this.emphasized = !1, this.flexible = !1, this.open = !1, this._variant = "";
+  }
+  static get styles() {
+    return [d(g)];
+  }
+  set variant(o) {
+    if (o !== this.variant) {
+      if (f.includes(o)) {
+        this.setAttribute("variant", o), this._variant = o;
+        return;
+      }
+      this.removeAttribute("variant"), this._variant = "";
+    }
+  }
+  get variant() {
+    return this._variant;
+  }
+  handleClick() {
+    this.open = !1, this.dispatchEvent(
+      new Event("close", {
+        bubbles: !0,
+        composed: !0,
+        cancelable: !0
+      })
+    ) || (this.open = !0);
+  }
+  render() {
+    return z`
+      <luzmo-popover ?open=${this.open} id="popover">
+        <slot name="override">
+          <luzmo-close-button
+            static-color=${s(this.emphasized ? "white" : void 0)}
+            class="close-button"
+            label="Clear selection"
+            @click=${this.handleClick}
+          ></luzmo-close-button>
+          <luzmo-field-label class="field-label">
+            <slot></slot>
+          </luzmo-field-label>
+          <luzmo-action-group
+            class="action-group"
+            quiet
+            static-color=${s(this.emphasized ? "white" : void 0)}
+          >
+            <slot name="buttons"></slot>
+          </luzmo-action-group>
+        </slot>
+      </luzmo-popover>
+    `;
+  }
+}
+i([
+  t({ type: Boolean, reflect: !0 })
+], e.prototype, "emphasized", 2);
+i([
+  t({ type: Boolean, reflect: !0 })
+], e.prototype, "flexible", 2);
+i([
+  t({ type: Boolean, reflect: !0 })
+], e.prototype, "open", 2);
+i([
+  t({ type: String })
+], e.prototype, "variant", 1);
+customElements.get("luzmo-action-bar") || customElements.define("luzmo-action-bar", e);
+export {
+  e as LuzmoActionBar
+};

package/lib/action-button/index.cjs

@@ -0,0 +1,24 @@
+/*! * Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account to use Lucero.
+ * This license terminates automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("@luzmo/icons"),v=require("../sized-mixin-BSYHt8nT.cjs"),d=require("lit"),r=require("../base-BCmA9Wxv.cjs"),h=require("../button-base-B0iB_JTv.cjs"),g=':host{cursor:pointer;-webkit-user-select:none;user-select:none;box-sizing:border-box;font-family:var(--luzmo-button-font-family, var(--luzmo-sans-font-family-stack, var(--luzmo-font-family)));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:var(--luzmo-button-line-height, var(--luzmo-line-height-100, var(--line-height-100)));text-transform:none;vertical-align:top;-webkit-appearance:button;transition:background var(--luzmo-button-animation-duration, var(--luzmo-animation-duration-100, var(--animation-duration-100))) ease-out,border-color var(--luzmo-button-animation-duration, var(--luzmo-animation-duration-100, var(--animation-duration-100))) ease-out,color var(--luzmo-button-animation-duration, var(--luzmo-animation-duration-100, var(--animation-duration-100))) ease-out,box-shadow var(--luzmo-button-animation-duration, var(--luzmo-animation-duration-100, var(--animation-duration-100))) ease-out;border-style:solid;justify-content:center;align-items:center;margin:0;-webkit-text-decoration:none;text-decoration:none;display:inline-flex;overflow:visible}:host(:focus){outline:none}:host([disabled]){cursor:default}::slotted([slot=icon]){max-block-size:100%;flex-shrink:0}#label{text-align:center;place-self:center}#label:empty{display:none}@media (forced-colors: active){:host{--highcontrast-action-button-focus-indicator-color: ButtonText}:host:after{forced-color-adjust:none}:host([selected]){--highcontrast-action-button-background-color-default: Highlight;--highcontrast-action-button-background-color-hover: Highlight;--highcontrast-action-button-background-color-focus: Highlight;--highcontrast-action-button-background-color-down: Highlight;--highcontrast-action-button-background-color-disabled: ButtonFace;--highcontrast-action-button-border-color-default: HighlightText;--highcontrast-action-button-border-color-hover: HighlightText;--highcontrast-action-button-border-color-focus: HighlightText;--highcontrast-action-button-border-color-down: HighlightText;--highcontrast-action-button-border-color-disabled: GrayText;--highcontrast-action-button-content-color-default: HighlightText;--highcontrast-action-button-content-color-hover: HighlightText;--highcontrast-action-button-content-color-focus: HighlightText;--highcontrast-action-button-content-color-down: HighlightText;--highcontrast-action-button-content-color-disabled: GrayText}:host([selected]) .hold-affordance,:host([selected]) ::slotted([slot=icon]),:host([selected]) #label{forced-color-adjust:none}}:host{--action-button-focus-indicator-border-radius: calc( var(--action-button-border-radius) + var(--action-button-focus-indicator-gap) );--action-button-edge-to-visual: calc( var(--action-button-edge-to-visual-size) - var(--action-button-border-width) );--action-button-edge-to-text: calc( var(--action-button-edge-to-text-size) - var(--action-button-border-width) );--action-button-edge-to-visual-only: calc( var(--action-button-edge-to-visual-only-size) - var( --action-button-border-width ) );min-inline-size:var(--luzmo-action-button-min-width, var(--action-button-min-width));block-size:var(--luzmo-action-button-height, var(--action-button-height));border-radius:var(--luzmo-action-button-border-radius, var(--action-button-border-radius));border-width:var(--luzmo-action-button-border-width, var(--action-button-border-width));gap:calc(var(--luzmo-action-button-text-to-visual, var(--action-button-text-to-visual)) + var(--luzmo-action-button-edge-to-text, var(--action-button-edge-to-text)) - var(--luzmo-action-button-edge-to-visual-only, var(--action-button-edge-to-visual-only)));padding-inline:var(--luzmo-action-button-edge-to-text, var(--action-button-edge-to-text));background-color:var(--highcontrast-action-button-background-color-default, var(--luzmo-action-button-background-color-default, var(--action-button-background-color-default)));border-color:var(--highcontrast-action-button-border-color-default, var(--luzmo-action-button-border-color-default, var(--action-button-border-color-default)));color:var(--highcontrast-action-button-content-color-default, var(--luzmo-action-button-content-color-default, var(--action-button-content-color-default)));position:relative}:host:dir(rtl),:host([dir=rtl]){--logical-rotation: matrix(-1, 0, 0, 1, 0, 0)}@media (hover: hover){:host(:hover){background-color:var(--highcontrast-action-button-background-color-hover, var(--luzmo-action-button-background-color-hover, var(--action-button-background-color-hover)));border-color:var(--highcontrast-action-button-border-color-hover, var(--luzmo-action-button-border-color-hover, var(--action-button-border-color-hover)));color:var(--highcontrast-action-button-content-color-hover, var(--luzmo-action-button-content-color-hover, var(--action-button-content-color-hover)))}}:host(:focus-visible){background-color:var(--highcontrast-action-button-background-color-focus, var(--luzmo-action-button-background-color-focus, var(--action-button-background-color-focus)));border-color:var(--highcontrast-action-button-border-color-focus, var(--luzmo-action-button-border-color-focus, var(--action-button-border-color-focus)));color:var(--highcontrast-action-button-content-color-focus, var(--luzmo-action-button-content-color-focus, var(--action-button-content-color-focus)))}:host(:is(:active,[active])){background-color:var(--highcontrast-action-button-background-color-down, var(--luzmo-action-button-background-color-down, var(--action-button-background-color-down)));border-color:var(--highcontrast-action-button-border-color-down, var(--luzmo-action-button-border-color-down, var(--action-button-border-color-down)));color:var(--highcontrast-action-button-content-color-down, var(--luzmo-action-button-content-color-down, var(--action-button-content-color-down)))}:host([disabled]){background-color:var(--highcontrast-action-button-background-color-disabled, var(--luzmo-action-button-background-color-disabled, var(--action-button-background-color-disabled)));border-color:var(--highcontrast-action-button-border-color-disabled, var(--luzmo-action-button-border-color-disabled, var(--action-button-border-color-disabled)));color:var(--highcontrast-action-button-content-color-disabled, var(--luzmo-action-button-content-color-disabled, var(--action-button-content-color-disabled)))}:host([selected]){--luzmo-action-button-background-color-default: var( --luzmo-action-button-background-color-default-selected );--luzmo-action-button-background-color-hover: var( --luzmo-action-button-background-color-hover-selected );--luzmo-action-button-background-color-down: var( --luzmo-action-button-background-color-down-selected );--luzmo-action-button-background-color-focus: var( --luzmo-action-button-background-color-focus-selected );--luzmo-action-button-content-color-default: var( --luzmo-action-button-content-color-default-selected );--luzmo-action-button-content-color-hover: var( --luzmo-action-button-content-color-hover-selected );--luzmo-action-button-content-color-down: var( --luzmo-action-button-content-color-down-selected );--luzmo-action-button-content-color-focus: var( --luzmo-action-button-content-color-focus-selected )}:host([selected][emphasized]){--luzmo-action-button-background-color-default: var( --luzmo-action-button-background-color-default-selected-emphasized );--luzmo-action-button-background-color-hover: var( --luzmo-action-button-background-color-hover-selected-emphasized );--luzmo-action-button-background-color-down: var( --luzmo-action-button-background-color-down-selected-emphasized );--luzmo-action-button-background-color-focus: var( --luzmo-action-button-background-color-focus-selected-emphasized );--luzmo-action-button-content-color-default: var( --luzmo-action-button-content-color-default-selected-emphasized );--luzmo-action-button-content-color-hover: var( --luzmo-action-button-content-color-hover-selected-emphasized );--luzmo-action-button-content-color-down: var( --luzmo-action-button-content-color-down-selected-emphasized );--luzmo-action-button-content-color-focus: var( --luzmo-action-button-content-color-focus-selected-emphasized )}:host([selected][static-color=black]),:host([selected][static-color=white]){--luzmo-action-button-content-color-default: var( --luzmo-action-button-static-content-color );--luzmo-action-button-content-color-hover: var( --luzmo-action-button-static-content-color );--luzmo-action-button-content-color-down: var( --luzmo-action-button-static-content-color );--luzmo-action-button-content-color-focus: var( --luzmo-action-button-static-content-color )}::slotted([slot=icon]){inline-size:var(--luzmo-action-button-icon-size, var(--action-button-icon-size));color:inherit;margin-inline-start:calc(var(--luzmo-action-button-edge-to-visual, var(--action-button-edge-to-visual)) - var(--luzmo-action-button-edge-to-text, var(--action-button-edge-to-text)));margin-inline-end:calc(var(--luzmo-action-button-edge-to-visual, var(--action-button-edge-to-visual)) - var(--luzmo-action-button-edge-to-text, var(--action-button-edge-to-text)))}.hold-affordance+::slotted([slot=icon]){margin-inline-start:calc(var(--luzmo-action-button-edge-to-visual, var(--action-button-edge-to-visual)) - var(--luzmo-action-button-edge-to-text, var(--action-button-edge-to-text)));margin-inline-end:calc(var(--luzmo-action-button-edge-to-visual-only, var(--action-button-edge-to-visual-only)) - var(--luzmo-action-button-edge-to-text, var(--action-button-edge-to-text)))}.hold-affordance+[icon-only]::slotted([slot=icon]),[icon-only]::slotted([slot=icon]){margin-inline-start:calc(var(--luzmo-action-button-edge-to-visual-only, var(--action-button-edge-to-visual-only)) - var(--luzmo-action-button-edge-to-text, var(--action-button-edge-to-text)));margin-inline-end:calc(var(--luzmo-action-button-edge-to-visual-only, var(--action-button-edge-to-visual-only)) - var(--luzmo-action-button-edge-to-text, var(--action-button-edge-to-text)))}#label{pointer-events:none;font-size:var(--luzmo-action-button-font-size, var(--action-button-font-size));white-space:nowrap;color:inherit;color:var(--luzmo-action-button-label-color, inherit);text-overflow:ellipsis;overflow:hidden}.hold-affordance{color:inherit;transform:var(--logical-rotation);position:absolute;font-size:var(--action-button-corner-triangle-size);inset-block-end:calc(var(--luzmo-action-button-edge-to-hold-icon, var(--action-button-edge-to-hold-icon)) - var(--luzmo-action-button-border-width, var(--action-button-border-width)));inset-inline-end:calc(var(--luzmo-action-button-edge-to-hold-icon, var(--action-button-edge-to-hold-icon)) - var(--luzmo-action-button-border-width, var(--action-button-border-width)))}:host{transition:border-color var(--luzmo-action-button-animation-duration, var(--action-button-animation-duration)) ease-in-out}:host:after{margin:calc((var(--luzmo-action-button-focus-indicator-gap, var(--action-button-focus-indicator-gap)) + var(--luzmo-action-button-border-width, var(--action-button-border-width))) * -1);border-radius:var(--luzmo-action-button-focus-indicator-border-radius, var(--action-button-focus-indicator-border-radius));transition:box-shadow var(--luzmo-action-button-animation-duration, var(--action-button-animation-duration)) ease-in-out;pointer-events:none;content:"";position:absolute;top:0;right:0;bottom:0;left:0}:host(:focus-visible){box-shadow:none;outline:none}:host(:focus-visible):after{box-shadow:0 0 0 var(--luzmo-action-button-focus-indicator-thickness, var(--action-button-focus-indicator-thickness)) var(--highcontrast-action-button-focus-indicator-color, var(--luzmo-action-button-focus-indicator-color, var(--action-button-focus-indicator-color)))}:host{--action-button-animation-duration: var(--luzmo-animation-duration);--action-button-border-radius: var(--luzmo-border-radius);--action-button-border-width: var(--luzmo-border-width);--action-button-content-color-default: var(--luzmo-font-color);--action-button-content-color-hover: var(--luzmo-font-color-hover);--action-button-content-color-down: var(--luzmo-font-color-down);--action-button-content-color-focus: var(--luzmo-font-color-focus);--action-button-focus-indicator-gap: var(--luzmo-indicator-gap);--action-button-focus-indicator-thickness: var(--luzmo-indicator-width);--action-button-focus-indicator-color: var(--luzmo-indicator-color);--action-button-background-color-default: var(--luzmo-background-color);--action-button-background-color-hover: var(--luzmo-background-color-hover);--action-button-background-color-down: var(--luzmo-background-color-down);--action-button-background-color-focus: var(--luzmo-background-color-focus);--action-button-border-color-default: var(--luzmo-border-color);--action-button-border-color-hover: var(--luzmo-border-color-hover);--action-button-border-color-down: var(--luzmo-border-color-down);--action-button-border-color-focus: var(--luzmo-border-color-focus);--action-button-background-color-disabled: var(--luzmo-background-color);--action-button-border-color-disabled: var(--luzmo-border-color-disabled);--action-button-content-color-disabled: var(--luzmo-font-color-disabled)}:host([quiet]){--action-button-background-color-default: transparent;--action-button-background-color-hover: var(--luzmo-background-color-hover);--action-button-background-color-down: var(--luzmo-background-color-down);--action-button-background-color-focus: var(--luzmo-background-color-focus);--action-button-background-color-disabled: transparent;--action-button-border-color-default: transparent;--action-button-border-color-hover: transparent;--action-button-border-color-down: transparent;--action-button-border-color-focus: transparent;--action-button-border-color-disabled: transparent}:host([selected]){--action-button-background-color-default: var(--luzmo-font-color);--action-button-background-color-hover: var(--luzmo-font-color-hover);--action-button-background-color-down: var(--luzmo-font-color-down);--action-button-background-color-focus: var(--luzmo-font-color-focus);--action-button-content-color-default: var(--luzmo-background-color);--action-button-content-color-hover: var(--luzmo-background-color);--action-button-content-color-down: var(--luzmo-background-color);--action-button-content-color-focus: var(--luzmo-background-color);--action-button-border-color-default: transparent;--action-button-border-color-hover: transparent;--action-button-border-color-down: transparent;--action-button-border-color-focus: transparent;--action-button-border-color-disabled: transparent;--action-button-background-color-disabled: var( --luzmo-background-color-disabled )}:host([selected][emphasized]){--action-button-background-color-default: var(--luzmo-primary);--action-button-background-color-hover: var(--luzmo-primary-hover);--action-button-background-color-down: var(--luzmo-primary-down);--action-button-background-color-focus: var(--luzmo-primary-focus);--action-button-content-color-default: var(--luzmo-primary-inverse-color);--action-button-content-color-hover: var(--luzmo-primary-inverse-color);--action-button-content-color-down: var(--luzmo-primary-inverse-color);--action-button-content-color-focus: var(--luzmo-primary-inverse-color)}:host([static-color=black][quiet]),:host([static-color=white][quiet]){--action-button-border-color-default: transparent;--action-button-border-color-hover: transparent;--action-button-border-color-down: transparent;--action-button-border-color-focus: transparent;--action-button-border-color-disabled: transparent}:host([static-color=black]){--action-button-background-color-default: transparent;--action-button-background-color-hover: rgba(0, 0, 0, .25);--action-button-background-color-down: rgba(0, 0, 0, .4);--action-button-background-color-focus: rgba(0, 0, 0, .25);--action-button-background-color-disabled: transparent;--action-button-border-color-default: rgba(0, 0, 0, .4);--action-button-border-color-hover: rgba(0, 0, 0, .55);--action-button-border-color-down: rgba(0, 0, 0, .7);--action-button-border-color-focus: rgba(0, 0, 0, .25);--action-button-border-color-disabled: transparent;--action-button-content-color-default: rgb(0, 0, 0);--action-button-content-color-hover: rgb(0, 0, 0);--action-button-content-color-down: rgb(0, 0, 0);--action-button-content-color-focus: rgb(0, 0, 0);--action-button-content-color-disabled: rgba(0, 0, 0, .55);--action-button-focus-indicator-color: rgb(0, 0, 0)}:host([static-color=black][selected]){--action-button-background-color-default: rgba(0, 0, 0, .9);--action-button-background-color-hover: rgb(0, 0, 0);--action-button-background-color-down: rgb(0, 0, 0);--action-button-background-color-focus: rgb(0, 0, 0);--action-button-background-color-disabled: rgba(0, 0, 0, .1);--action-button-border-color-disabled: transparent;--action-button-content-color-default: rgb(255, 255, 255);--action-button-content-color-hover: rgb(255, 255, 255);--action-button-content-color-down: rgb(255, 255, 255);--action-button-content-color-focus: rgb(255, 255, 255)}:host([static-color=black][selected][emphasized]){--action-button-background-color-default: rgba(0, 0, 0, .9);--action-button-background-color-hover: rgb(0, 0, 0);--action-button-background-color-down: rgb(0, 0, 0);--action-button-background-color-focus: rgb(0, 0, 0);--action-button-content-color-default: rgb(255, 255, 255);--action-button-content-color-hover: rgb(255, 255, 255);--action-button-content-color-down: rgb(255, 255, 255);--action-button-content-color-focus: rgb(255, 255, 255)}:host([static-color=white]){--action-button-background-color-default: transparent;--action-button-background-color-hover: rgba(255, 255, 255, .25);--action-button-background-color-down: rgba(255, 255, 255, .4);--action-button-background-color-focus: rgba(255, 255, 255, .25);--action-button-background-color-disabled: transparent;--action-button-border-color-default: rgba(255, 255, 255, .4);--action-button-border-color-hover: rgba(255, 255, 255, .55);--action-button-border-color-down: rgba(255, 255, 255, .7);--action-button-border-color-focus: rgba(255, 255, 255, .55);--action-button-border-color-disabled: rgba(255, 255, 255, .25);--action-button-content-color-default: rgb(255, 255, 255);--action-button-content-color-hover: rgb(255, 255, 255);--action-button-content-color-down: rgb(255, 255, 255);--action-button-content-color-focus: rgb(255, 255, 255);--action-button-content-color-disabled: rgba(255, 255, 255, .55);--action-button-focus-indicator-color: rgb(255, 255, 255)}:host([static-color=white][selected]){--action-button-background-color-default: rgba(255, 255, 255, .9);--action-button-background-color-hover: rgb(255, 255, 255);--action-button-background-color-down: rgb(255, 255, 255);--action-button-background-color-focus: rgb(255, 255, 255);--action-button-background-color-disabled: rgba(255, 255, 255, .1);--action-button-border-color-disabled: transparent;--action-button-content-color-default: rgb(0, 0, 0);--action-button-content-color-hover: rgb(0, 0, 0);--action-button-content-color-down: rgb(0, 0, 0);--action-button-content-color-focus: rgb(0, 0, 0)}:host([static-color=white][selected][emphasized]){--action-button-background-color-default: rgba(255, 255, 255, .9);--action-button-background-color-hover: rgb(255, 255, 255);--action-button-background-color-down: rgb(255, 255, 255);--action-button-background-color-focus: rgb(255, 255, 255);--action-button-content-color-default: rgb(0, 0, 0)}:host{--action-button-min-width: var(--luzmo-component-height);--action-button-height: var(--luzmo-component-height);--action-button-icon-size: var(--luzmo-font-size-l);--action-button-font-size: var(--luzmo-font-size);--action-button-text-to-visual: var(--luzmo-spacing-2);--action-button-edge-to-hold-icon: var(--luzmo-spacing-2);--action-button-edge-to-visual-size: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--action-button-edge-to-visual-only-size: var(--luzmo-spacing-3);--action-button-edge-to-text-size: 12px;--action-button-corner-triangle-size: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) )}:host([size=xs]){--action-button-min-width: var(--luzmo-component-height-xs);--action-button-height: var(--luzmo-component-height-xs);--action-button-icon-size: var(--luzmo-font-size-s);--action-button-font-size: var(--luzmo-font-size-xs);--action-button-text-to-visual: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--action-button-edge-to-hold-icon: var(--luzmo-spacing-2);--action-button-edge-to-visual-size: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--action-button-edge-to-visual-only-size: var(--luzmo-spacing-2);--action-button-edge-to-text-size: var(--luzmo-spacing-2);--action-button-corner-triangle-size: var(--luzmo-spacing-2)}:host([size=s]){--action-button-min-width: var(--luzmo-component-height-s);--action-button-height: var(--luzmo-component-height-s);--action-button-icon-size: var(--luzmo-font-size);--action-button-font-size: var(--luzmo-font-size-s);--action-button-text-to-visual: var(--luzmo-spacing-3);--action-button-edge-to-hold-icon: var(--luzmo-spacing-2);--action-button-edge-to-visual-size: var(--luzmo-spacing-3);--action-button-edge-to-visual-only-size: var(--luzmo-spacing-2);--action-button-edge-to-text-size: var(--luzmo-spacing-3);--action-button-corner-triangle-size: var(--luzmo-spacing-2)}:host([size=l]){--action-button-min-width: var(--luzmo-component-height-l);--action-button-height: var(--luzmo-component-height-l);--action-button-icon-size: var(--luzmo-font-size-xl);--action-button-font-size: var(--luzmo-font-size-l);--action-button-text-to-visual: var(--luzmo-spacing-3);--action-button-edge-to-hold-icon: var(--luzmo-spacing-2);--action-button-edge-to-visual-size: var(--luzmo-spacing-4);--action-button-edge-to-visual-only-size: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--action-button-edge-to-text-size: var(--luzmo-spacing-5);--action-button-corner-triangle-size: var(--luzmo-spacing-3)}:host([size=xl]){--action-button-min-width: var(--luzmo-component-height-xl);--action-button-height: var(--luzmo-component-height-xl);--action-button-icon-size: var(--luzmo-font-size-xxl);--action-button-font-size: var(--luzmo-font-size-xl);--action-button-text-to-visual: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--action-button-edge-to-hold-icon: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--action-button-edge-to-visual-size: var(--luzmo-spacing-5);--action-button-edge-to-visual-only-size: var(--luzmo-spacing-4);--action-button-edge-to-text-size: var(--luzmo-spacing-5);--action-button-corner-triangle-size: var(--luzmo-spacing-3)}::slotted([slot=icon]){flex-shrink:0}#label{flex-grow:var(--action-button-label-flex-grow);text-align:var(--action-button-label-text-align);pointer-events:none!important}:host([size=xs]){min-width:var(--action-button-height, 0);--action-button-edge-to-visual-only: calc( var(--luzmo-spacing-2) - var(--action-button-border-width) )}:host([size=s]){--action-button-edge-to-visual-only: calc( var(--luzmo-spacing-2) - var(--action-button-border-width) )}:host([size=m]){--action-button-edge-to-visual-only: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) - var(--action-button-border-width) )}:host([size=l]){--action-button-edge-to-visual-only: calc( var(--luzmo-spacing-3) - var(--action-button-border-width) )}:host([size=xl]){--action-button-edge-to-visual-only: calc( var(--luzmo-spacing-4) - var(--action-button-border-width) )}@media (forced-colors: active){:host{--highcontrast-action-button-border-color-disabled: GrayText;--highcontrast-action-button-content-color-disabled: GrayText}}';var m=Object.defineProperty,z=Object.getOwnPropertyDescriptor,c=(i,o,t,n)=>{for(var e=n>1?void 0:n?z(o,t):o,u=i.length-1,l;u>=0;u--)(l=i[u])&&(e=(n?l(o,t,e):l(e))||e);return n&&e&&m(o,t,e),e};const f=300;let s;class a extends v.SizedMixin(h.ButtonBase,{validSizes:["xs","s","m","l","xl"],noDefaultSize:!0}){constructor(){super(),this.emphasized=!1,this.holdAffordance=!1,this.quiet=!1,this.role="button",this.selected=!1,this.toggles=!1,this._value="",this.onClick=()=>{if(!this.toggles)return;this.selected=!this.selected,this.dispatchEvent(new Event("change",{cancelable:!0,bubbles:!0,composed:!0}))||(this.selected=!this.selected)},this.addEventListener("click",this.onClick)}static get styles(){return[...super.styles,d.unsafeCSS(g)]}get value(){return this._value||this.itemText}set value(o){o!==this._value&&(this._value=o||"",this._value?this.setAttribute("value",this._value):this.removeAttribute("value"))}get itemText(){return(this.textContent||"").trim()}handlePointerdownHoldAffordance(o){o.button===0&&(this.addEventListener("pointerup",this.handlePointerupHoldAffordance),this.addEventListener("pointercancel",this.handlePointerupHoldAffordance),s=setTimeout(()=>{this.dispatchEvent(new CustomEvent("longpress",{bubbles:!0,composed:!0,detail:{source:"pointer"}}))},f))}handlePointerupHoldAffordance(){clearTimeout(s),this.removeEventListener("pointerup",this.handlePointerupHoldAffordance),this.removeEventListener("pointercancel",this.handlePointerupHoldAffordance)}handleKeydown(o){if(!this.holdAffordance)return super.handleKeydown(o);const{code:t,altKey:n}=o;(t==="Space"||n&&t==="ArrowDown")&&(o.preventDefault(),t==="ArrowDown"&&(o.stopPropagation(),o.stopImmediatePropagation()),this.addEventListener("keyup",this.handleKeyup),this.active=!0)}handleKeyup(o){if(!this.holdAffordance)return super.handleKeyup(o);const{code:t,altKey:n}=o;(t==="Space"||n&&t==="ArrowDown")&&(o.stopPropagation(),this.dispatchEvent(new CustomEvent("longpress",{bubbles:!0,composed:!0,detail:{source:"keyboard"}})),this.active=!1)}get buttonContent(){const o=super.buttonContent;return this.holdAffordance&&o.unshift(d.html`
+        <div
+          class="hold-affordance corner-triangle-${this.size}"
+        >
+          ${b.luzmoIcon(b.luzmoCornerTriangle)}
+        </div>
+      `),o}updated(o){super.updated(o);const t=this.role==="button",n=t&&(this.selected||this.toggles)&&!(this.hasAttribute("aria-haspopup")&&this.hasAttribute("aria-expanded"));(o.has("selected")||o.has("role"))&&(n?this.setAttribute("aria-pressed",this.selected?"true":"false"):(this.removeAttribute("aria-pressed"),t&&this.toggles&&this.hasAttribute("aria-expanded")&&this.setAttribute("aria-expanded",this.selected?"true":"false"))),o.has("holdAffordance")&&(this.holdAffordance?this.addEventListener("pointerdown",this.handlePointerdownHoldAffordance):(this.removeEventListener("pointerdown",this.handlePointerdownHoldAffordance),this.handlePointerupHoldAffordance()))}}c([r.n({type:Boolean,reflect:!0})],a.prototype,"emphasized",2);c([r.n({type:Boolean,reflect:!0,attribute:"hold-affordance"})],a.prototype,"holdAffordance",2);c([r.n({type:Boolean,reflect:!0})],a.prototype,"quiet",2);c([r.n({reflect:!0})],a.prototype,"role",2);c([r.n({type:Boolean,reflect:!0})],a.prototype,"selected",2);c([r.n({type:Boolean,reflect:!0})],a.prototype,"toggles",2);c([r.n({reflect:!0,attribute:"static-color"})],a.prototype,"staticColor",2);c([r.n({type:String})],a.prototype,"value",1);customElements.get("luzmo-action-button")||customElements.define("luzmo-action-button",a);exports.LuzmoActionButton=a;