npm - @nldd/design-system - Versions diffs - 0.8.43 → 0.8.45 - Mend

@nldd/design-system 0.8.43 → 0.8.45

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (459) hide show

package/dist/components/actions/button/button.d.ts CHANGED Viewed

@@ -7,7 +7,7 @@
  * @attr {boolean} disabled - Disabled state
  * @attr {string} type - Button type for form submission: 'button' | 'submit' | 'reset' (ignored when href is set)
  * @attr {boolean} expandable - Whether the button has a icon to indicate it opens a menu or popover
- * @attr {boolean} expanded - Whether the popover/menu controlled by this button is currently open. Forwarded as aria-expanded on the inner button; toggles the is-open visual state.
+ * @attr {boolean} expanded - Whether the popover/menu controlled by this button is currently open. Forwarded as aria-expanded on the inner button; toggles the is-expanded visual state.
  * @attr {string}  popup-type - Type of popup container this button opens: 'menu' | 'listbox' | 'dialog' | 'tree' | 'grid'. Sets aria-haspopup on the inner button and forces aria-expanded to always be present (true/false) so screen readers know the popup state.
  * @attr {string} width - Width mode: 'full' (stretches to container) or any CSS length (e.g. '240px')
  * @attr {string} text - Button text
@@ -46,6 +46,24 @@ export declare class NLDDButton extends LitElement {
     popupType?: PopupType;
     type: ButtonType;
     popovertarget: string | undefined;
+    /**
+     * Direct element reference to the popover this button invokes — IDL-only
+     * counterpart to `popovertarget` that works across shadow boundaries.
+     * Use this when the popover lives in a different tree (e.g. an
+     * `nldd-menu` reparented to `<body>`) so the browser still recognises
+     * this button as the popover's invoker and excludes it from the popover
+     * light-dismiss algorithm. Set programmatically; not reflected to an
+     * HTML attribute (the attribute form is `popovertarget`, ID-based).
+     */
+    popoverTargetElement: Element | null;
+    /**
+     * Action the browser performs when the button is clicked, mirroring the
+     * standard `popovertargetaction` attribute. Defaults to `'toggle'`. Use
+     * `'show'` when a separate handler owns the close path (e.g. the
+     * consumer toggles the popover programmatically) so the browser's
+     * default action doesn't double-fire.
+     */
+    popoverTargetAction: 'toggle' | 'show' | 'hide';
     disabled: boolean;
     /** Button text. */
     text: string;

package/dist/components/actions/button/button.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/button/button.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAIjC,OAAO,8BAA8B,CAAC;AAEtC,KAAK,OAAO,GACT,SAAS,GACT,WAAW,GACX,aAAa,GACb,eAAe,GACf,oBAAoB,GACpB,gBAAgB,GAChB,qBAAqB,GACrB,iBAAiB,GACjB,sBAAsB,CAAC;AAC1B,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC/B,KAAK,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAChD,KAAK,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;AAEjE,qBACa,UAAW,SAAQ,UAAU;IACzC,OAAgB,MAAM,0BAAgB;IAGtC,OAAO,EAAE,OAAO,CAAoB;IAGpC,IAAI,EAAE,IAAI,CAAQ;IAElB,mEAAmE;IAEnE,KAAK,SAAM;IAGX,UAAU,UAAS;IAGnB,QAAQ,UAAS;IAEjB;;;;OAIG;IAEH,SAAS,CAAC,EAAE,SAAS,CAAC;IAGtB,IAAI,EAAE,UAAU,CAAY;IAG5B,aAAa,EAAE,MAAM,GAAG,SAAS,CAAa;~~IAG9C~~,QAAQ,UAAS;IAEjB,mBAAmB;IAEnB,IAAI,SAAM;IAGV,UAAU,UAAS;IAEnB,6FAA6F;IAE7F,SAAS,SAAM;IAEf,wFAAwF;IAExF,OAAO,SAAM;IAEb,0GAA0G;IAE1G,eAAe,SAAM;IAErB,4DAA4D;IAE5D,IAAI,EAAE,MAAM,GAAG,SAAS,CAAa;IAErC,+DAA+D;IAE/D,MAAM,EAAE,MAAM,GAAG,SAAS,CAAa;IAEvC;;;OAGG;IAEH,GAAG,EAAE,MAAM,GAAG,SAAS,CAAa;IAEpC,OAAO,CAAC,WAAW,CAAS;IAEnB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IA0B/D,OAAO,CAAC,YAAY;IAQpB,2DAA2D;IAC3D,YAAY,IAAI,MAAM;IAMtB;;;OAGG;IACM,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAInC,MAAM;CAKf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,aAAa,EAAE,UAAU,CAAC;KAC1B;CACD"}
1	+ {"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/button/button.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAIjC,OAAO,8BAA8B,CAAC;AAEtC,KAAK,OAAO,GACT,SAAS,GACT,WAAW,GACX,aAAa,GACb,eAAe,GACf,oBAAoB,GACpB,gBAAgB,GAChB,qBAAqB,GACrB,iBAAiB,GACjB,sBAAsB,CAAC;AAC1B,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC/B,KAAK,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAChD,KAAK,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;AAEjE,qBACa,UAAW,SAAQ,UAAU;IACzC,OAAgB,MAAM,0BAAgB;IAGtC,OAAO,EAAE,OAAO,CAAoB;IAGpC,IAAI,EAAE,IAAI,CAAQ;IAElB,mEAAmE;IAEnE,KAAK,SAAM;IAGX,UAAU,UAAS;IAGnB,QAAQ,UAAS;IAEjB;;;;OAIG;IAEH,SAAS,CAAC,EAAE,SAAS,CAAC;IAGtB,IAAI,EAAE,UAAU,CAAY;IAG5B,aAAa,EAAE,MAAM,GAAG,SAAS,CAAa;IAE9C;;;;;;;;OAQG;IAEH,oBAAoB,EAAE,OAAO,GAAG,IAAI,CAAQ;IAE5C;;;;;;OAMG;IAEH,mBAAmB,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAY;IAG3D,QAAQ,UAAS;IAEjB,mBAAmB;IAEnB,IAAI,SAAM;IAGV,UAAU,UAAS;IAEnB,6FAA6F;IAE7F,SAAS,SAAM;IAEf,wFAAwF;IAExF,OAAO,SAAM;IAEb,0GAA0G;IAE1G,eAAe,SAAM;IAErB,4DAA4D;IAE5D,IAAI,EAAE,MAAM,GAAG,SAAS,CAAa;IAErC,+DAA+D;IAE/D,MAAM,EAAE,MAAM,GAAG,SAAS,CAAa;IAEvC;;;OAGG;IAEH,GAAG,EAAE,MAAM,GAAG,SAAS,CAAa;IAEpC,OAAO,CAAC,WAAW,CAAS;IAEnB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IA0B/D,OAAO,CAAC,YAAY;IAQpB,2DAA2D;IAC3D,YAAY,IAAI,MAAM;IAMtB;;;OAGG;IACM,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAInC,MAAM;CAKf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,aAAa,EAAE,UAAU,CAAC;KAC1B;CACD"}

package/dist/components/actions/button/button.js CHANGED Viewed

@@ -7,7 +7,7 @@
  * @attr {boolean} disabled - Disabled state
  * @attr {string} type - Button type for form submission: 'button' | 'submit' | 'reset' (ignored when href is set)
  * @attr {boolean} expandable - Whether the button has a icon to indicate it opens a menu or popover
- * @attr {boolean} expanded - Whether the popover/menu controlled by this button is currently open. Forwarded as aria-expanded on the inner button; toggles the is-open visual state.
+ * @attr {boolean} expanded - Whether the popover/menu controlled by this button is currently open. Forwarded as aria-expanded on the inner button; toggles the is-expanded visual state.
  * @attr {string}  popup-type - Type of popup container this button opens: 'menu' | 'listbox' | 'dialog' | 'tree' | 'grid'. Sets aria-haspopup on the inner button and forces aria-expanded to always be present (true/false) so screen readers know the popup state.
  * @attr {string} width - Width mode: 'full' (stretches to container) or any CSS length (e.g. '240px')
  * @attr {string} text - Button text
@@ -46,6 +46,24 @@ let NLDDButton = class NLDDButton extends LitElement {
         this.expanded = false;
         this.type = 'button';
         this.popovertarget = undefined;
+        /**
+         * Direct element reference to the popover this button invokes — IDL-only
+         * counterpart to `popovertarget` that works across shadow boundaries.
+         * Use this when the popover lives in a different tree (e.g. an
+         * `nldd-menu` reparented to `<body>`) so the browser still recognises
+         * this button as the popover's invoker and excludes it from the popover
+         * light-dismiss algorithm. Set programmatically; not reflected to an
+         * HTML attribute (the attribute form is `popovertarget`, ID-based).
+         */
+        this.popoverTargetElement = null;
+        /**
+         * Action the browser performs when the button is clicked, mirroring the
+         * standard `popovertargetaction` attribute. Defaults to `'toggle'`. Use
+         * `'show'` when a separate handler owns the close path (e.g. the
+         * consumer toggles the popover programmatically) so the browser's
+         * default action doesn't double-fire.
+         */
+        this.popoverTargetAction = 'toggle';
         this.disabled = false;
         /** Button text. */
         this.text = '';
@@ -147,6 +165,12 @@ __decorate([
 __decorate([
     property({ type: String })
 ], NLDDButton.prototype, "popovertarget", void 0);
+__decorate([
+    property({ attribute: false })
+], NLDDButton.prototype, "popoverTargetElement", void 0);
+__decorate([
+    property({ attribute: false })
+], NLDDButton.prototype, "popoverTargetAction", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NLDDButton.prototype, "disabled", void 0);

package/dist/components/actions/button/button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"button.js","sourceRoot":"","sources":["../../../../src/components/actions/button/button.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;;;;;;;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,8BAA8B,CAAC;AAiB/B,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QAIN,YAAO,GAAY,gBAAgB,CAAC;QAGpC,SAAI,GAAS,IAAI,CAAC;QAElB,mEAAmE;QAEnE,UAAK,GAAG,EAAE,CAAC;QAGX,eAAU,GAAG,KAAK,CAAC;QAGnB,aAAQ,GAAG,KAAK,CAAC;QAWjB,SAAI,GAAe,QAAQ,CAAC;QAG5B,kBAAa,GAAuB,SAAS,CAAC;~~QAG9C~~,aAAQ,GAAG,KAAK,CAAC;QAEjB,mBAAmB;QAEnB,SAAI,GAAG,EAAE,CAAC;QAGV,eAAU,GAAG,KAAK,CAAC;QAEnB,6FAA6F;QAE7F,cAAS,GAAG,EAAE,CAAC;QAEf,wFAAwF;QAExF,YAAO,GAAG,EAAE,CAAC;QAEb,0GAA0G;QAE1G,oBAAe,GAAG,EAAE,CAAC;QAErB,4DAA4D;QAE5D,SAAI,GAAuB,SAAS,CAAC;QAErC,+DAA+D;QAE/D,WAAM,GAAuB,SAAS,CAAC;QAEvC;;;WAGG;QAEH,QAAG,GAAuB,SAAS,CAAC;QAE5B,gBAAW,GAAG,KAAK,CAAC;IAwD7B,CAAC;IAtDS,OAAO,CAAC,iBAAuC;QACvD,IAAI,iBAAiB,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACpC,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC;YACrB,mEAAmE;YACnE,mEAAmE;YACnE,6DAA6D;YAC7D,oEAAoE;YACpE,8DAA8D;YAC9D,MAAM,MAAM,GAAG,CAAC,KAAK,MAAM,CAAC;YAC5B,MAAM,aAAa,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,IAAI,GAAG,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;YACjE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;YAC1C,IAAI,MAAM,IAAI,aAAa,EAAE,CAAC;gBAC7B,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;YAC5C,CAAC;iBAAM,CAAC;gBACP,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC;YACvC,CAAC;QACF,CAAC;QACD,MAAM,OAAO,GAAG,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC;QACpD,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,IAAI,OAAO,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;YAC1D,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;YACxB,OAAO,CAAC,IAAI,CAAC,8GAA8G,CAAC,CAAC;QAC9H,CAAC;aAAM,IAAI,CAAC,OAAO,EAAE,CAAC;YACrB,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;QAC1B,CAAC;IACF,CAAC;IAEO,YAAY,CAAC,CAAa;QACjC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,OAAO;QACR,CAAC;IACF,CAAC;IAED,2DAA2D;IAC3D,YAAY;QACX,IAAI,IAAI,CAAC,GAAG;YAAE,OAAO,IAAI,CAAC,GAAG,CAAC;QAC9B,IAAI,IAAI,CAAC,MAAM,KAAK,QAAQ;YAAE,OAAO,qBAAqB,CAAC;QAC3D,OAAO,EAAE,CAAC;IACX,CAAC;IAED;;;OAGG;IACM,KAAK,CAAC,OAAsB;QACpC,IAAI,CAAC,UAAU,EAAE,aAAa,CAAc,SAAS,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;IACxE,CAAC;IAEQ,MAAM;QACd,OAAO,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE;YAC1B,WAAW,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC;SACzC,CAAC,CAAC;IACJ,CAAC;;~~AA5He~~,iBAAM,GAAG,YAAY,AAAf,CAAgB;AAGtC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CACN;AAGpC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCACxB;AAIlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAC/B;AAGX;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;8CACjD;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAC1B;AAQjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;6CAC7C;AAGtB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCACd;AAG5B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDACmB;~~AAG9C~~;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAC1B;AAIjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;8CAClD;AAInB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;6CACrC;AAIf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;2CACrC;AAIb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;mDACrC;AAIrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCACL;AAIrC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACY;AAOvC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACS;~~AApExB~~,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,~~CA8HtB~~"}
1	+ {"version":3,"file":"button.js","sourceRoot":"","sources":["../../../../src/components/actions/button/button.ts"],"names":[],"mappings":"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"}

package/dist/components/actions/button/button.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"button.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/button/button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,~~yBAmZxB~~,CAAC"}
1	+ {"version":3,"file":"button.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/button/button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,yBAyRxB,CAAC"}

package/dist/components/actions/button/button.styles.js CHANGED Viewed

@@ -5,7 +5,21 @@ export const buttonStyles = css `
 	/* # Host */
 	:host {
+		--_corner-radius: var(--semantics-controls-md-corner-radius);
+		--_background-color: var(--semantics-buttons-neutral-tinted-background-color);
 		--_width: auto;
+		--_min-size: var(--semantics-controls-md-min-size);
+		--_block-padding: var(--semantics-controls-md-block-padding);
+		--_inline-padding: var(--semantics-controls-md-inline-padding);
+		--_gap: var(--semantics-buttons-md-gap);
+		--_content-color: var(--semantics-buttons-neutral-tinted-content-color);
+		--_font: var(--semantics-buttons-md-font);
+		--_is-hovered-background-color: var(--semantics-buttons-neutral-tinted-is-hovered-background-color);
+		--_is-hovered-content-color: var(--semantics-buttons-neutral-tinted-is-hovered-content-color);
+		--_is-active-background-color: var(--semantics-buttons-neutral-tinted-is-active-background-color);
+		--_is-active-content-color: var(--semantics-buttons-neutral-tinted-is-active-content-color);
+		--_icon-size: var(--semantics-buttons-md-icon-size);
+		--_disclosure-icon-margin-left: -2px;
 		--_disclosure-icon-size: var(--primitives-space-20);
 		display: inline-block;
@@ -14,13 +28,144 @@ export const buttonStyles = css `
 	}
 	:host([size="sm"]) {
+		--_corner-radius: var(--semantics-controls-sm-corner-radius);
+		--_min-size: var(--semantics-controls-sm-min-size);
+		--_block-padding: var(--semantics-controls-sm-block-padding);
+		--_inline-padding: var(--semantics-controls-sm-inline-padding);
+		--_gap: var(--semantics-buttons-sm-gap);
+		--_font: var(--semantics-buttons-sm-font);
+		--_icon-size: var(--semantics-buttons-sm-icon-size);
+		--_disclosure-icon-margin-left: -1px;
 		--_disclosure-icon-size: var(--primitives-space-18);
 	}
 	:host([size="xs"]) {
+		--_corner-radius: var(--semantics-controls-xs-corner-radius);
+		--_min-size: var(--semantics-controls-xs-min-size);
+		--_block-padding: var(--semantics-controls-xs-block-padding);
+		--_inline-padding: var(--semantics-controls-xs-inline-padding);
+		--_gap: var(--semantics-buttons-xs-gap);
+		--_font: var(--semantics-buttons-xs-font);
+		--_icon-size: var(--semantics-buttons-xs-icon-size);
+		--_disclosure-icon-margin-left: -1px;
 		--_disclosure-icon-size: var(--primitives-space-16);
 	}
+	/* ## Neutral Transparent */
+	:host([variant="neutral-transparent"]) {
+		--_background-color: transparent;
+		--_content-color: var(--semantics-buttons-neutral-transparent-content-color);
+		--_is-hovered-background-color: transparent;
+		--_is-hovered-content-color: var(--semantics-buttons-neutral-transparent-is-hovered-content-color);
+		--_is-active-background-color: transparent;
+		--_is-active-content-color: var(--semantics-buttons-neutral-transparent-is-active-content-color);
+	}
+	/* ## Accent Filled (Primary) */
+	:host([variant="accent-filled"]),
+	:host([variant="primary"]) {
+		--_background-color: var(--semantics-buttons-accent-filled-background-color);
+		--_content-color: var(--semantics-buttons-accent-filled-content-color);
+		--_is-hovered-background-color: var(--semantics-buttons-accent-filled-is-hovered-background-color);
+		--_is-hovered-content-color: var(--semantics-buttons-accent-filled-is-hovered-content-color);
+		--_is-active-background-color: var(--semantics-buttons-accent-filled-is-active-background-color);
+		--_is-active-content-color: var(--semantics-buttons-accent-filled-is-active-content-color);
+	}
+	/* ## Accent Transparent */
+	:host([variant="accent-transparent"]) {
+		--_background-color: transparent;
+		--_content-color: var(--semantics-buttons-accent-transparent-content-color);
+		--_is-hovered-background-color: transparent;
+		--_is-hovered-content-color: var(--semantics-buttons-accent-transparent-is-hovered-content-color);
+		--_is-active-background-color: transparent;
+		--_is-active-content-color: var(--semantics-buttons-accent-transparent-is-active-content-color);
+	}
+	/* ## Critical Tinted */
+	:host([variant="critical-tinted"]),
+	:host([variant="destructive"]) {
+		--_background-color: var(--semantics-buttons-critical-tinted-background-color);
+		--_content-color: var(--semantics-buttons-critical-tinted-content-color);
+		--_is-hovered-background-color: var(--semantics-buttons-critical-tinted-is-hovered-background-color);
+		--_is-hovered-content-color: var(--semantics-buttons-critical-tinted-is-hovered-content-color);
+		--_is-active-background-color: var(--semantics-buttons-critical-tinted-is-active-background-color);
+		--_is-active-content-color: var(--semantics-buttons-critical-tinted-is-active-content-color);
+	}
+	/* ## Critical Transparent */
+	:host([variant="critical-transparent"]) {
+		--_background-color: transparent;
+		--_content-color: var(--semantics-buttons-critical-transparent-content-color);
+		--_is-hovered-background-color: transparent;
+		--_is-hovered-content-color: var(--semantics-buttons-critical-transparent-is-hovered-content-color);
+		--_is-active-background-color: transparent;
+		--_is-active-content-color: var(--semantics-buttons-critical-transparent-is-active-content-color);
+	}
+	/* ## Expanded — default (incl. unknown variant) */
+	:host([expanded]) {
+		--_background-color: var(--semantics-buttons-neutral-tinted-is-expanded-background-color);
+		--_content-color: var(--semantics-buttons-neutral-tinted-is-expanded-content-color);
+		--_is-hovered-background-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-hovered-background-color);
+		--_is-hovered-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-hovered-content-color);
+		--_is-active-background-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-background-color);
+		--_is-active-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-content-color);
+	}
+	:host([expanded][variant="accent-filled"]),
+	:host([expanded][variant="primary"]) {
+		--_background-color: var(--semantics-buttons-accent-filled-is-expanded-background-color);
+		--_content-color: var(--semantics-buttons-accent-filled-is-expanded-content-color);
+		--_is-hovered-background-color: var(--semantics-buttons-accent-filled-is-expanded-is-hovered-background-color);
+		--_is-hovered-content-color: var(--semantics-buttons-accent-filled-is-expanded-is-hovered-content-color);
+		--_is-active-background-color: var(--semantics-buttons-accent-filled-is-expanded-is-active-background-color);
+		--_is-active-content-color: var(--semantics-buttons-accent-filled-is-expanded-is-active-content-color);
+	}
+	:host([expanded][variant="neutral-transparent"]) {
+		--_background-color: transparent;
+		--_content-color: var(--semantics-buttons-neutral-transparent-content-color);
+		--_is-hovered-background-color: transparent;
+		--_is-hovered-content-color: var(--semantics-buttons-neutral-transparent-is-hovered-content-color);
+		--_is-active-background-color: transparent;
+		--_is-active-content-color: var(--semantics-buttons-neutral-transparent-is-active-content-color);
+	}
+	:host([expanded][variant="accent-transparent"]) {
+		--_background-color: transparent;
+		--_content-color: var(--semantics-buttons-accent-transparent-content-color);
+		--_is-hovered-background-color: transparent;
+		--_is-hovered-content-color: var(--semantics-buttons-accent-transparent-is-hovered-content-color);
+		--_is-active-background-color: transparent;
+		--_is-active-content-color: var(--semantics-buttons-accent-transparent-is-active-content-color);
+	}
+	:host([expanded][variant="critical-tinted"]),
+	:host([expanded][variant="destructive"]) {
+		--_background-color: var(--semantics-buttons-critical-tinted-background-color);
+		--_content-color: var(--semantics-buttons-critical-tinted-content-color);
+		--_is-hovered-background-color: var(--semantics-buttons-critical-tinted-is-hovered-background-color);
+		--_is-hovered-content-color: var(--semantics-buttons-critical-tinted-is-hovered-content-color);
+		--_is-active-background-color: var(--semantics-buttons-critical-tinted-is-active-background-color);
+		--_is-active-content-color: var(--semantics-buttons-critical-tinted-is-active-content-color);
+	}
+	:host([expanded][variant="critical-transparent"]) {
+		--_background-color: transparent;
+		--_content-color: var(--semantics-buttons-critical-transparent-content-color);
+		--_is-hovered-background-color: transparent;
+		--_is-hovered-content-color: var(--semantics-buttons-critical-transparent-is-hovered-content-color);
+		--_is-active-background-color: transparent;
+		--_is-active-content-color: var(--semantics-buttons-critical-transparent-is-active-content-color);
+	}
 	:host([width="full"]) {
 		display: block;
 		width: 100%;
@@ -40,38 +185,47 @@ export const buttonStyles = css `
 	/* # Block */
 	.button {
-		appearance: none;
-		border: none;
-		margin: 0;
-		padding: 0;
-		background: none;
-		font: inherit;
 		box-sizing: border-box;
-		text-decoration: none;
 		display: inline-flex;
-		align-items: center;
-		justify-content: center;
+		margin: 0;
+		border: none;
+		border-radius: var(--_corner-radius);
+		background: none;
+		background-color: var(--_background-color);
 		width: var(--_width);
+		min-width: var(--_min-size);
 		max-width: 100%;
+		min-height: var(--_min-size);
+		padding: var(--_block-padding) var(--_inline-padding);
+		gap: var(--_gap);
+		align-items: center;
+		justify-content: center;
+		color: var(--_content-color);
+		font: var(--_font);
+		text-decoration: none;
 		text-wrap: pretty;
 		transition:
 			background-color var(--primitives-transition-duration-fast) var(--primitives-transition-easing-default),
 			color var(--primitives-transition-duration-fast) var(--primitives-transition-easing-default)
 		;
+		appearance: none;
 	}
 	a.button {
 		cursor: var(--semantics-controls-link-cursor);
 	}
-	@media (prefers-reduced-motion: reduce) {
-		.button {
-			transition: none;
+	.button:hover {
+		@media (hover: hover) {
+			background-color: var(--_is-hovered-background-color);
+			color: var(--_is-hovered-content-color);
 		}
 	}
-	/* # Focus */
+	.button:active {
+		background-color: var(--_is-active-background-color);
+		color: var(--_is-active-content-color);
+	}
 	.button:focus-visible {
 		outline: var(--semantics-focus-ring-outline);
@@ -83,258 +237,14 @@ export const buttonStyles = css `
 		outline: none;
 	}
-	/* # Sizes */
-	/* ## Size: XS */
-	:host([size="xs"]) .button {
-		min-height: var(--semantics-controls-xs-min-size);
-		min-width: var(--semantics-controls-xs-min-size);
-		padding: var(--semantics-controls-xs-block-padding) var(--semantics-controls-xs-inline-padding);
-		font: var(--semantics-buttons-xs-font);
-		border-radius: var(--semantics-controls-xs-corner-radius);
-		gap: var(--semantics-buttons-xs-gap);
-	}
-	/* ## Size: SM */
-	:host([size="sm"]) .button {
-		min-height: var(--semantics-controls-sm-min-size);
-		min-width: var(--semantics-controls-sm-min-size);
-		padding: var(--semantics-controls-sm-block-padding) var(--semantics-controls-sm-inline-padding);
-		font: var(--semantics-buttons-sm-font);
-		border-radius: var(--semantics-controls-sm-corner-radius);
-		gap: var(--semantics-buttons-sm-gap);
-	}
-	/* ## Size: MD (Default) */
-	:host([size="md"]) .button,
-	:host(:not([size])) .button {
-		min-height: var(--semantics-controls-md-min-size);
-		min-width: var(--semantics-controls-md-min-size);
-		padding: var(--semantics-controls-md-block-padding) var(--semantics-controls-md-inline-padding);
-		font: var(--semantics-buttons-md-font);
-		border-radius: var(--semantics-controls-md-corner-radius);
-		gap: var(--semantics-buttons-md-gap);
-	}
-	/* # Variants */
-	/* ## Neutral Tintend (Secondary, Default) */
-	/* ### Default neutral tinted button */
-	:host([variant="neutral-tinted"]) .button,
-	:host([variant="secondary"]) .button,
-	:host(:not([variant])) .button {
-		background-color: var(--semantics-buttons-neutral-tinted-background-color);
-		color: var(--semantics-buttons-neutral-tinted-content-color);
-	}
-	/* ### Hovered neutral tinted button */
-	@media (hover: hover) {
-		:host([variant="neutral-tinted"]) .button:hover,
-		:host([variant="secondary"]) .button:hover,
-		:host(:not([variant])) .button:hover {
-			background-color: var(--semantics-buttons-neutral-tinted-is-hovered-background-color);
-			color: var(--semantics-buttons-neutral-tinted-is-hovered-content-color);
-		}
-	}
-	/* ### Active neutral tinted button */
-	:host([variant="neutral-tinted"]) .button:active,
-	:host([variant="secondary"]) .button:active,
-	:host(:not([variant])) .button:active {
-		background-color: var(--semantics-buttons-neutral-tinted-is-active-background-color);
-		color: var(--semantics-buttons-neutral-tinted-is-active-content-color);
-	}
-	/* ### Open neutral tinted button */
-	:host([expanded][variant="neutral-tinted"]) .button,
-	:host([expanded][variant="secondary"]) .button,
-	:host([expanded]:not([variant])) .button {
-		background-color: var(--semantics-buttons-neutral-tinted-is-open-background-color);
-		color: var(--semantics-buttons-neutral-tinted-is-open-content-color);
-	}
-	/* ### Open hovered neutral tinted button */
-	@media (hover: hover) {
-		:host([expanded][variant="neutral-tinted"]) .button:hover,
-		:host([expanded][variant="secondary"]) .button:hover,
-		:host([expanded]:not([variant])) .button:hover {
-			background-color: var(--semantics-buttons-neutral-tinted-is-open-is-hovered-background-color);
-			color: var(--semantics-buttons-neutral-tinted-is-open-is-hovered-content-color);
-		}
-	}
-	/* ### Open active neutral tinted button */
-	:host([expanded][variant="neutral-tinted"]) .button:active,
-	:host([expanded][variant="secondary"]) .button:active,
-	:host([expanded]:not([variant])) .button:active {
-		background-color: var(--semantics-buttons-neutral-tinted-is-open-is-active-background-color);
-		color: var(--semantics-buttons-neutral-tinted-is-open-is-active-content-color);
-	}
-	/* ## Neutral Transparent */
-	/* ### Default neutral transparent button */
-	:host([variant="neutral-transparent"]) .button {
-		background-color: transparent;
-		color: var(--semantics-buttons-neutral-transparent-content-color);
-	}
-	/* ### Hovered neutral transparent button */
-	@media (hover: hover) {
-		:host([variant="neutral-transparent"]) .button:hover {
-			color: var(--semantics-buttons-neutral-transparent-is-hovered-content-color);
-		}
-	}
-	/* ### Active neutral transparent button */
-	:host([variant="neutral-transparent"]) .button:active {
-		color: var(--semantics-buttons-neutral-transparent-is-active-content-color);
-	}
-	/* ## Accent Filled (Primary) */
-	/* ### Default accent filled button */
-	:host([variant="accent-filled"]) .button,
-	:host([variant="primary"]) .button {
-		background-color: var(--semantics-buttons-accent-filled-background-color);
-		color: var(--semantics-buttons-accent-filled-content-color);
-	}
-	/* ### Hovered accent filled button */
-	@media (hover: hover) {
-		:host([variant="accent-filled"]) .button:hover,
-		:host([variant="primary"]) .button:hover {
-			background-color: var(--semantics-buttons-accent-filled-is-hovered-background-color);
-			color: var(--semantics-buttons-accent-filled-is-hovered-content-color);
-		}
-	}
-	/* ### Active accent filled button */
-	:host([variant="accent-filled"]) .button:active,
-	:host([variant="primary"]) .button:active {
-		background-color: var(--semantics-buttons-accent-filled-is-active-background-color);
-		color: var(--semantics-buttons-accent-filled-is-active-content-color);
-	}
-	/* ### Open accent filled button */
-	:host([expanded][variant="accent-filled"]) .button,
-	:host([expanded][variant="primary"]) .button {
-		background-color: var(--semantics-buttons-accent-filled-is-open-background-color);
-		color: var(--semantics-buttons-accent-filled-is-open-content-color);
-	}
-	/* ### Open hovered accent filled button */
-	@media (hover: hover) {
-		:host([expanded][variant="accent-filled"]) .button:hover,
-		:host([expanded][variant="primary"]) .button:hover {
-			background-color: var(--semantics-buttons-accent-filled-is-open-is-hovered-background-color);
-			color: var(--semantics-buttons-accent-filled-is-open-is-hovered-content-color);
-		}
-	}
-	/* ### Open active accent filled button */
-	:host([expanded][variant="accent-filled"]) .button:active,
-	:host([expanded][variant="primary"]) .button:active {
-		background-color: var(--semantics-buttons-accent-filled-is-open-is-active-background-color);
-		color: var(--semantics-buttons-accent-filled-is-open-is-active-content-color);
-	}
-	/* ## Accent Transparent */
-	/* ### Default accent transparent button */
-	:host([variant="accent-transparent"]) .button {
-		background-color: transparent;
-		color: var(--semantics-buttons-accent-transparent-content-color);
-	}
-	/* ### Hovered accent transparent button */
-	@media (hover: hover) {
-		:host([variant="accent-transparent"]) .button:hover {
-			color: var(--semantics-buttons-accent-transparent-is-hovered-content-color);
-		}
-	}
-	/* ### Active accent transparent button */
-	:host([variant="accent-transparent"]) .button:active {
-		color: var(--semantics-buttons-accent-transparent-is-active-content-color);
-	}
-	/* ## Critical Tinted */
-	/* ### Default critical tinted button */
-	:host([variant="critical-tinted"]) .button,
-	:host([variant="destructive"]) .button {
-		background-color: var(--semantics-buttons-critical-tinted-background-color);
-		color: var(--semantics-buttons-critical-tinted-content-color);
-	}
-	/* ### Hovered critical tinted button */
-	@media (hover: hover) {
-		:host([variant="critical-tinted"]) .button:hover,
-		:host([variant="destructive"]) .button:hover {
-			background-color: var(--semantics-buttons-critical-tinted-is-hovered-background-color);
-			color: var(--semantics-buttons-critical-tinted-is-hovered-content-color);
-		}
-	}
-	/* ### Active critical tinted button */
-	:host([variant="critical-tinted"]) .button:active,
-	:host([variant="destructive"]) .button:active {
-		background-color: var(--semantics-buttons-critical-tinted-is-active-background-color);
-		color: var(--semantics-buttons-critical-tinted-is-active-content-color);
-	}
-	/* ## Critical Transparent */
-	/* ### Default critical transparent button */
-	:host([variant="critical-transparent"]) .button {
-		background-color: transparent;
-		color: var(--semantics-buttons-critical-transparent-content-color);
-	}
-	/* ### Hovered critical transparent button */
-	@media (hover: hover) {
-		:host([variant="critical-transparent"]) .button:hover {
-			color: var(--semantics-buttons-critical-transparent-is-hovered-content-color);
+	@media (prefers-reduced-motion: reduce) {
+		.button {
+			transition: none;
 		}
 	}
-	/* ### Active critical transparent button */
-	:host([variant="critical-transparent"]) .button:active {
-		color: var(--semantics-buttons-critical-transparent-is-active-content-color);
-	}
-	/* ## Elements */
+	/* # Elements */
 	.button__content {
 		display: contents;
@@ -357,50 +267,18 @@ export const buttonStyles = css `
 	.button__start-icon,
 	.button__end-icon {
 		display: block;
+		width: var(--_icon-size);
+		height: var(--_icon-size);
 		flex-shrink: 0;
 	}
-	:host([size="md"]) .button__start-icon,
-	:host(:not([size])) .button__start-icon,
-	:host([size="md"]) .button__end-icon,
-	:host(:not([size])) .button__end-icon {
-		width: var(--semantics-buttons-md-icon-size);
-		height: var(--semantics-buttons-md-icon-size);
-	}
-	:host([size="sm"]) .button__start-icon,
-	:host([size="sm"]) .button__end-icon {
-		width: var(--semantics-buttons-sm-icon-size);
-		height: var(--semantics-buttons-sm-icon-size);
-	}
-	:host([size="xs"]) .button__start-icon,
-	:host([size="xs"]) .button__end-icon {
-		width: var(--semantics-buttons-xs-icon-size);
-		height: var(--semantics-buttons-xs-icon-size);
-	}
 	.button__disclosure-icon {
 		display: block;
-		flex-shrink: 0;
+		margin-left: var(--_disclosure-icon-margin-left);
+		margin-right: -2px;
 		width: var(--_disclosure-icon-size);
 		height: var(--_disclosure-icon-size);
-	}
-	:host([size="md"]) .button__disclosure-icon,
-	:host(:not([size])) .button__disclosure-icon {
-		margin-left: -2px;
-		margin-right: -2px;
-	}
-	:host([size="sm"]) .button__disclosure-icon {
-		margin-left: -1px;
-		margin-right: -2px;
-	}
-	:host([size="xs"]) .button__disclosure-icon {
-		margin-left: -1px;
-		margin-right: -2px;
+		flex-shrink: 0;
 	}
 `;
 //# sourceMappingURL=button.styles.js.map

package/dist/components/actions/button/button.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"button.styles.js","sourceRoot":"","sources":["../../../../src/components/actions/button/button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmZ9B,CAAC"}
1	+ {"version":3,"file":"button.styles.js","sourceRoot":"","sources":["../../../../src/components/actions/button/button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyR9B,CAAC"}

package/dist/components/actions/button/button.template.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"button.template.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/button/button.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C,UAAU,eAAe;IACxB,WAAW,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CACrC;AAyBD,wBAAgB,QAAQ,CAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,eAAe,~~wCA2ClE~~"}
1	+ {"version":3,"file":"button.template.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/button/button.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C,UAAU,eAAe;IACxB,WAAW,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CACrC;AAyBD,wBAAgB,QAAQ,CAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,eAAe,wCAkDlE"}