@nldd/design-system 0.8.68 → 0.8.70

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

@@ -5,8 +5,10 @@
  * @attr {string} variant - Button variant: 'primary' | 'secondary' | 'destructive' | 'accent-filled' | 'accent-transparent' | 'neutral-tinted' | 'neutral-base' | 'neutral-transparent' | 'critical-tinted' | 'critical-transparent' | 'inherit-filled' | 'inherit-tinted'. De inherit-varianten leiden hun kleuren af van currentColor, voor knoppen op gekleurde vlakken; inherit-filled gebruikt de vlakkleur (--context-parent-background-color) als labelkleur met een wit/zwart-contrastflip als fallback.
  * @attr {string} size - Button size: 'xs' | 'sm' | 'md' | 'lg' (default: 'md'). 'lg' uses larger text and 24px start/end icons.
  * @attr {string} horizontal-alignment - Horizontal alignment of the button content: 'left' | 'center' | 'right' (default: unset, centered). Most visible with width="full" or a fixed width.
+ * @attr {boolean} loading - Loading state (default: false). Shows an activity indicator over the visually hidden content, sets aria-busy on the inner control and blocks activation, without dropping the button from the tab order (unlike disabled). The content stays laid out, so the button keeps its width.
  * @attr {boolean} disabled - Disabled state
  * @attr {string} type - Button type for form submission: 'button' | 'submit' | 'reset' (ignored when href is set)
+ * @attr {string} popovertarget - ID of a popover element this button invokes; forwarded to the inner button. Use the popoverTargetElement property instead when the popover lives in another tree.
  * @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-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.
@@ -26,10 +28,12 @@
  * @slot text - Slot for custom button content (e.g. text with inline markup). Used when the text attribute is empty or not set (an empty string counts as "not set", since the attribute and the unset property are indistinguishable). Provide accessible-label when the slotted content isn't plain text.
  * @slot start-icon - Slot for a custom start icon (e.g. custom SVG). Only used when start-icon attribute is not set.
  * @slot end-icon - Slot for a custom end icon (e.g. custom SVG). Only used when end-icon attribute is not set.
+ * @slot popup - A single `nldd-menu` or `nldd-popover` this button invokes. Slotting it auto-anchors the overlay to the button and toggles it on click (no id/anchor wiring). The overlay syncs `expanded` and `aria-haspopup` back onto the button. Add `expandable` for the disclosure chevron. Mirrors nldd-split-button; the manual `anchor`/`popovertarget` wiring keeps working when you don't slot an overlay.
  *
  * @fires click - When button is clicked (not fired when disabled)
  */
 import { LitElement } from 'lit';
+import { PopupAnchorController } from '../../../utilities/popup-anchor-controller.js';
 import './../../content/icon/icon.js';
 import './../../status-and-feedback/activity-indicator/activity-indicator.js';
 type Variant = 'primary' | 'secondary' | 'destructive' | 'accent-filled' | 'accent-transparent' | 'neutral-tinted' | 'neutral-base' | 'neutral-transparent' | 'critical-tinted' | 'critical-transparent' | 'inherit-filled' | 'inherit-tinted';
@@ -114,6 +118,10 @@ export declare class NLDDButton extends NLDDButton_base {
      */
     rel: string | undefined;
     private _warnedA11y;
+    /** Shared wiring for an overlay slotted into `popup`: anchors it to this
+     * button and turns clicks into open/close. Not private: the template module
+     * binds its handlers. */
+    _popup: PopupAnchorController;
     updated(changedProperties: Map<string, unknown>): void;
     private _handleClick;
     /** Resolves the effective rel value for link rendering. */

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

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/button/button.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAOjC,OAAO,8BAA8B,CAAC;AACtC,OAAO,sEAAsE,CAAC;AAE9E,KAAK,OAAO,GACT,SAAS,GACT,WAAW,GACX,aAAa,GACb,eAAe,GACf,oBAAoB,GACpB,gBAAgB,GAChB,cAAc,GACd,qBAAqB,GACrB,iBAAiB,GACjB,sBAAsB,GACtB,gBAAgB,GAChB,gBAAgB,CAAC;AACpB,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACtC,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,eAAoD;IACnF,OAAgB,MAAM,0BAAgB;IAKtC,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAO,CAAC,UAAU,CAA0B;IAG5C,OAAO,EAAE,OAAO,CAAoB;IAGpC,IAAI,EAAE,IAAI,CAAQ;IAElB,mGAAmG;IAEnG,mBAAmB,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,EAAE,CAAM;IAE3D,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;IAE3D;;;;;;;;OAQG;IAEH,OAAO,UAAS;IAGhB,QAAQ,UAAS;IAEjB,mBAAmB;IAEnB,IAAI,SAAM;IAEV,mMAAmM;IAEnM,cAAc,SAAM;IAGpB,UAAU,UAAS;IAEnB,gHAAgH;IAEhH,iBAAiB,UAAS;IAE1B,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;IA4B/D,OAAO,CAAC,YAAY;IAyBpB,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"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/button/button.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAOjC,OAAO,EAAE,qBAAqB,EAAE,MAAM,+CAA+C,CAAC;AACtF,OAAO,8BAA8B,CAAC;AACtC,OAAO,sEAAsE,CAAC;AAE9E,KAAK,OAAO,GACT,SAAS,GACT,WAAW,GACX,aAAa,GACb,eAAe,GACf,oBAAoB,GACpB,gBAAgB,GAChB,cAAc,GACd,qBAAqB,GACrB,iBAAiB,GACjB,sBAAsB,GACtB,gBAAgB,GAChB,gBAAgB,CAAC;AACpB,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACtC,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,eAAoD;IACnF,OAAgB,MAAM,0BAAgB;IAKtC,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAO,CAAC,UAAU,CAA0B;IAG5C,OAAO,EAAE,OAAO,CAAoB;IAGpC,IAAI,EAAE,IAAI,CAAQ;IAElB,mGAAmG;IAEnG,mBAAmB,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,EAAE,CAAM;IAE3D,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;IAE3D;;;;;;;;OAQG;IAEH,OAAO,UAAS;IAGhB,QAAQ,UAAS;IAEjB,mBAAmB;IAEnB,IAAI,SAAM;IAEV,mMAAmM;IAEnM,cAAc,SAAM;IAGpB,UAAU,UAAS;IAEnB,gHAAgH;IAEhH,iBAAiB,UAAS;IAE1B,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;IAE5B;;6BAEyB;IACzB,MAAM,wBAAmC;IAEhC,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IA4B/D,OAAO,CAAC,YAAY;IA+BpB,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

@@ -5,8 +5,10 @@
  * @attr {string} variant - Button variant: 'primary' | 'secondary' | 'destructive' | 'accent-filled' | 'accent-transparent' | 'neutral-tinted' | 'neutral-base' | 'neutral-transparent' | 'critical-tinted' | 'critical-transparent' | 'inherit-filled' | 'inherit-tinted'. De inherit-varianten leiden hun kleuren af van currentColor, voor knoppen op gekleurde vlakken; inherit-filled gebruikt de vlakkleur (--context-parent-background-color) als labelkleur met een wit/zwart-contrastflip als fallback.
  * @attr {string} size - Button size: 'xs' | 'sm' | 'md' | 'lg' (default: 'md'). 'lg' uses larger text and 24px start/end icons.
  * @attr {string} horizontal-alignment - Horizontal alignment of the button content: 'left' | 'center' | 'right' (default: unset, centered). Most visible with width="full" or a fixed width.
+ * @attr {boolean} loading - Loading state (default: false). Shows an activity indicator over the visually hidden content, sets aria-busy on the inner control and blocks activation, without dropping the button from the tab order (unlike disabled). The content stays laid out, so the button keeps its width.
  * @attr {boolean} disabled - Disabled state
  * @attr {string} type - Button type for form submission: 'button' | 'submit' | 'reset' (ignored when href is set)
+ * @attr {string} popovertarget - ID of a popover element this button invokes; forwarded to the inner button. Use the popoverTargetElement property instead when the popover lives in another tree.
  * @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-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.
@@ -26,6 +28,7 @@
  * @slot text - Slot for custom button content (e.g. text with inline markup). Used when the text attribute is empty or not set (an empty string counts as "not set", since the attribute and the unset property are indistinguishable). Provide accessible-label when the slotted content isn't plain text.
  * @slot start-icon - Slot for a custom start icon (e.g. custom SVG). Only used when start-icon attribute is not set.
  * @slot end-icon - Slot for a custom end icon (e.g. custom SVG). Only used when end-icon attribute is not set.
+ * @slot popup - A single `nldd-menu` or `nldd-popover` this button invokes. Slotting it auto-anchors the overlay to the button and toggles it on click (no id/anchor wiring). The overlay syncs `expanded` and `aria-haspopup` back onto the button. Add `expandable` for the disclosure chevron. Mirrors nldd-split-button; the manual `anchor`/`popovertarget` wiring keeps working when you don't slot an overlay.
  *
  * @fires click - When button is clicked (not fired when disabled)
  */
@@ -42,6 +45,7 @@ import { template } from './button.template.js';
 import { withTranslations } from '../../../utilities/with-translations.js';
 import { reflectNonDefault } from '../../../utilities/reflect-non-default.js';
 import { nlddButtonTranslations } from './button.i18n.js';
+import { PopupAnchorController } from '../../../utilities/popup-anchor-controller.js';
 import './../../content/icon/icon.js';
 import './../../status-and-feedback/activity-indicator/activity-indicator.js';
 let NLDDButton = class NLDDButton extends withTranslations(LitElement, nlddButtonTranslations) {
@@ -110,6 +114,10 @@ let NLDDButton = class NLDDButton extends withTranslations(LitElement, nlddButto
          */
         this.rel = undefined;
         this._warnedA11y = false;
+        /** Shared wiring for an overlay slotted into `popup`: anchors it to this
+         * button and turns clicks into open/close. Not private: the template module
+         * binds its handlers. */
+        this._popup = new PopupAnchorController(this);
     }
     updated(changedProperties) {
         if (changedProperties.has('width')) {
@@ -146,6 +154,12 @@ let NLDDButton = class NLDDButton extends withTranslations(LitElement, nlddButto
             e.stopPropagation();
             return;
         }
+        // A slotted overlay makes this button its invoker: toggle it and stop —
+        // a popup button neither submits a form nor navigates.
+        if (this._popup.handleClick(e)) {
+            e.preventDefault();
+            return;
+        }
         // A link button has no form behaviour. Otherwise drive the associated
         // form ourselves: the shadow <button type="submit"|"reset"> can't reach
         // the light-DOM form across the shadow boundary. requestSubmit() runs

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

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../../src/components/actions/button/button.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../../src/components/actions/button/button.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;;;;;;;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,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AAC3E,OAAO,EAAE,iBAAiB,EAAE,MAAM,2CAA2C,CAAC;AAC9E,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAE,qBAAqB,EAAE,MAAM,+CAA+C,CAAC;AACtF,OAAO,8BAA8B,CAAC;AACtC,OAAO,sEAAsE,CAAC;AAoBvE,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,gBAAgB,CAAC,UAAU,EAAE,sBAAsB,CAAC;IAA7E;;QAOE,eAAU,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QAG5C,YAAO,GAAY,gBAAgB,CAAC;QAGpC,SAAI,GAAS,IAAI,CAAC;QAElB,mGAAmG;QAEnG,wBAAmB,GAAqC,EAAE,CAAC;QAE3D,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;QAE9C;;;;;;;;WAQG;QAEH,yBAAoB,GAAmB,IAAI,CAAC;QAE5C;;;;;;WAMG;QAEH,wBAAmB,GAA+B,QAAQ,CAAC;QAE3D;;;;;;;;WAQG;QAEH,YAAO,GAAG,KAAK,CAAC;QAGhB,aAAQ,GAAG,KAAK,CAAC;QAEjB,mBAAmB;QAEnB,SAAI,GAAG,EAAE,CAAC;QAEV,mMAAmM;QAEnM,mBAAc,GAAG,EAAE,CAAC;QAGpB,eAAU,GAAG,KAAK,CAAC;QAEnB,gHAAgH;QAEhH,sBAAiB,GAAG,KAAK,CAAC;QAE1B,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;QAE5B;;iCAEyB;QACzB,WAAM,GAAG,IAAI,qBAAqB,CAAC,IAAI,CAAC,CAAC;IAiF1C,CAAC;IA/ES,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,IAAI,CAAC,cAAc;gBAC/B,CAAC,CAAC,mLAAmL;gBACrL,CAAC,CAAC,8GAA8G,CAAC,CAAC;QACpH,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,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACnC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,OAAO;QACR,CAAC;QACD,wEAAwE;QACxE,uDAAuD;QACvD,IAAI,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;YAChC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,OAAO;QACR,CAAC;QACD,sEAAsE;QACtE,wEAAwE;QACxE,sEAAsE;QACtE,wEAAwE;QACxE,wBAAwB;QACxB,EAAE;QACF,8DAA8D;QAC9D,iEAAiE;QACjE,uEAAuE;QACvE,0EAA0E;QAC1E,yEAAyE;QACzE,wEAAwE;QACxE,0EAA0E;QAC1E,qBAAqB;QACrB,IAAI,IAAI,CAAC,IAAI;YAAE,OAAO;QACtB,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ;YAAE,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,aAAa,EAAE,CAAC;aAC7D,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO;YAAE,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC;IAC/D,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;;AA9Me,iBAAM,GAAG,YAAY,AAAf,CAAgB;AAEtC,wEAAwE;AACxE,2EAA2E;AAC3E,uEAAuE;AAChE,yBAAc,GAAG,IAAI,AAAP,CAAQ;AAI7B;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,iBAAiB,CAAU,gBAAgB,CAAC,EAAE,CAAC;2CACjD;AAGpC;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,iBAAiB,CAAO,IAAI,CAAC,EAAE,CAAC;wCACpD;AAIlB;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,sBAAsB,EAAE,SAAS,EAAE,iBAAiB,CAAmC,EAAE,CAAC,EAAE,CAAC;uDACxE;AAI3D;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,iBAAiB,CAAS,EAAE,CAAC,EAAE,CAAC;yCAC3D;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;AAY9C;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;wDACa;AAU5C;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;uDAC4B;AAY3D;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAC3B;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAC1B;AAIjB;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,iBAAiB,CAAS,EAAE,CAAC,EAAE,CAAC;wCAC5D;AAIV;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,iBAAiB,EAAE,SAAS,EAAE,iBAAiB,CAAS,EAAE,CAAC,EAAE,CAAC;kDAChF;AAGpB;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,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,qBAAqB,EAAE,CAAC;qDACnD;AAI1B;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;AAxHxB,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAgNtB"}

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

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

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

@@ -20,22 +20,23 @@ export const buttonStyles = css `
 		--_disclosure-icon-size: var(--primitives-space-20);
 		--_supporting-font: var(--semantics-buttons-md-supporting-text-font);
 		--_background-color: var(--semantics-buttons-neutral-tinted-background-color);
-		--_primary-content-color: var(--semantics-buttons-neutral-tinted-primary-content-color);
-		--_secondary-content-color: var(--semantics-buttons-neutral-tinted-secondary-content-color);
+		--_primary-content-color: var(--semantics-buttons-neutral-tinted-content-color);
+		--_secondary-content-color: var(--semantics-buttons-neutral-tinted-content-secondary-color);
 		--_highlight-border-color: var(--semantics-buttons-neutral-tinted-highlight-border-color);
 		--_is-hovered-background-color: var(--semantics-buttons-neutral-tinted-is-hovered-background-color);
-		--_is-hovered-primary-content-color: var(--semantics-buttons-neutral-tinted-is-hovered-primary-content-color);
-		--_is-hovered-secondary-content-color: var(--semantics-buttons-neutral-tinted-is-hovered-secondary-content-color);
+		--_is-hovered-primary-content-color: var(--semantics-buttons-neutral-tinted-is-hovered-content-color);
+		--_is-hovered-secondary-content-color: var(--semantics-buttons-neutral-tinted-is-hovered-content-secondary-color);
 		--_is-hovered-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-hovered-highlight-border-color);
 		--_is-active-background-color: var(--semantics-buttons-neutral-tinted-is-active-background-color);
-		--_is-active-primary-content-color: var(--semantics-buttons-neutral-tinted-is-active-primary-content-color);
-		--_is-active-secondary-content-color: var(--semantics-buttons-neutral-tinted-is-active-secondary-content-color);
+		--_is-active-primary-content-color: var(--semantics-buttons-neutral-tinted-is-active-content-color);
+		--_is-active-secondary-content-color: var(--semantics-buttons-neutral-tinted-is-active-content-secondary-color);
 		--_is-active-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-active-highlight-border-color);
 
 		${inheritedTextReset}
 		display: inline-block;
 		position: relative;
 		max-width: 100%;
+		-webkit-user-select: none;
 		user-select: none;
 		-webkit-tap-highlight-color: transparent;
 	}
@@ -78,93 +79,93 @@ export const buttonStyles = css `
 
 	:host([variant="neutral-base"]) {
 		--_background-color: var(--semantics-buttons-neutral-base-background-color);
-		--_primary-content-color: var(--semantics-buttons-neutral-base-primary-content-color);
-		--_secondary-content-color: var(--semantics-buttons-neutral-base-secondary-content-color);
+		--_primary-content-color: var(--semantics-buttons-neutral-base-content-color);
+		--_secondary-content-color: var(--semantics-buttons-neutral-base-content-secondary-color);
 		--_highlight-border-color: var(--semantics-buttons-neutral-base-highlight-border-color);
 		--_is-hovered-background-color: var(--semantics-buttons-neutral-base-is-hovered-background-color);
-		--_is-hovered-primary-content-color: var(--semantics-buttons-neutral-base-is-hovered-primary-content-color);
-		--_is-hovered-secondary-content-color: var(--semantics-buttons-neutral-base-is-hovered-secondary-content-color);
+		--_is-hovered-primary-content-color: var(--semantics-buttons-neutral-base-is-hovered-content-color);
+		--_is-hovered-secondary-content-color: var(--semantics-buttons-neutral-base-is-hovered-content-secondary-color);
 		--_is-hovered-highlight-border-color: var(--semantics-buttons-neutral-base-is-hovered-highlight-border-color);
 		--_is-active-background-color: var(--semantics-buttons-neutral-base-is-active-background-color);
-		--_is-active-primary-content-color: var(--semantics-buttons-neutral-base-is-active-primary-content-color);
-		--_is-active-secondary-content-color: var(--semantics-buttons-neutral-base-is-active-secondary-content-color);
+		--_is-active-primary-content-color: var(--semantics-buttons-neutral-base-is-active-content-color);
+		--_is-active-secondary-content-color: var(--semantics-buttons-neutral-base-is-active-content-secondary-color);
 		--_is-active-highlight-border-color: var(--semantics-buttons-neutral-base-is-active-highlight-border-color);
 	}
 
 	:host([variant="neutral-transparent"]) {
 		--_background-color: transparent;
-		--_primary-content-color: var(--semantics-buttons-neutral-transparent-primary-content-color);
-		--_secondary-content-color: var(--semantics-buttons-neutral-transparent-secondary-content-color);
+		--_primary-content-color: var(--semantics-buttons-neutral-transparent-content-color);
+		--_secondary-content-color: var(--semantics-buttons-neutral-transparent-content-secondary-color);
 		--_highlight-border-color: transparent;
 		--_is-hovered-background-color: transparent;
-		--_is-hovered-primary-content-color: var(--semantics-buttons-neutral-transparent-is-hovered-primary-content-color);
-		--_is-hovered-secondary-content-color: var(--semantics-buttons-neutral-transparent-is-hovered-secondary-content-color);
+		--_is-hovered-primary-content-color: var(--semantics-buttons-neutral-transparent-is-hovered-content-color);
+		--_is-hovered-secondary-content-color: var(--semantics-buttons-neutral-transparent-is-hovered-content-secondary-color);
 		--_is-hovered-highlight-border-color: transparent;
 		--_is-active-background-color: transparent;
-		--_is-active-primary-content-color: var(--semantics-buttons-neutral-transparent-is-active-primary-content-color);
-		--_is-active-secondary-content-color: var(--semantics-buttons-neutral-transparent-is-active-secondary-content-color);
+		--_is-active-primary-content-color: var(--semantics-buttons-neutral-transparent-is-active-content-color);
+		--_is-active-secondary-content-color: var(--semantics-buttons-neutral-transparent-is-active-content-secondary-color);
 		--_is-active-highlight-border-color: transparent;
 	}
 
 	:host([variant="accent-filled"]),
 	:host([variant="primary"]) {
 		--_background-color: var(--semantics-buttons-accent-filled-background-color);
-		--_primary-content-color: var(--semantics-buttons-accent-filled-primary-content-color);
-		--_secondary-content-color: var(--semantics-buttons-accent-filled-secondary-content-color);
+		--_primary-content-color: var(--semantics-buttons-accent-filled-content-color);
+		--_secondary-content-color: var(--semantics-buttons-accent-filled-content-secondary-color);
 		--_highlight-border-color: var(--semantics-buttons-accent-filled-highlight-border-color);
 		--_is-hovered-background-color: var(--semantics-buttons-accent-filled-is-hovered-background-color);
-		--_is-hovered-primary-content-color: var(--semantics-buttons-accent-filled-is-hovered-primary-content-color);
-		--_is-hovered-secondary-content-color: var(--semantics-buttons-accent-filled-is-hovered-secondary-content-color);
+		--_is-hovered-primary-content-color: var(--semantics-buttons-accent-filled-is-hovered-content-color);
+		--_is-hovered-secondary-content-color: var(--semantics-buttons-accent-filled-is-hovered-content-secondary-color);
 		--_is-hovered-highlight-border-color: var(--semantics-buttons-accent-filled-is-hovered-highlight-border-color);
 		--_is-active-background-color: var(--semantics-buttons-accent-filled-is-active-background-color);
-		--_is-active-primary-content-color: var(--semantics-buttons-accent-filled-is-active-primary-content-color);
-		--_is-active-secondary-content-color: var(--semantics-buttons-accent-filled-is-active-secondary-content-color);
+		--_is-active-primary-content-color: var(--semantics-buttons-accent-filled-is-active-content-color);
+		--_is-active-secondary-content-color: var(--semantics-buttons-accent-filled-is-active-content-secondary-color);
 		--_is-active-highlight-border-color: var(--semantics-buttons-accent-filled-is-active-highlight-border-color);
 	}
 
 	:host([variant="accent-transparent"]) {
 		--_background-color: transparent;
-		--_primary-content-color: var(--semantics-buttons-accent-transparent-primary-content-color);
-		--_secondary-content-color: var(--semantics-buttons-accent-transparent-secondary-content-color);
+		--_primary-content-color: var(--semantics-buttons-accent-transparent-content-color);
+		--_secondary-content-color: var(--semantics-buttons-accent-transparent-content-secondary-color);
 		--_highlight-border-color: transparent;
 		--_is-hovered-background-color: transparent;
-		--_is-hovered-primary-content-color: var(--semantics-buttons-accent-transparent-is-hovered-primary-content-color);
-		--_is-hovered-secondary-content-color: var(--semantics-buttons-accent-transparent-is-hovered-secondary-content-color);
+		--_is-hovered-primary-content-color: var(--semantics-buttons-accent-transparent-is-hovered-content-color);
+		--_is-hovered-secondary-content-color: var(--semantics-buttons-accent-transparent-is-hovered-content-secondary-color);
 		--_is-hovered-highlight-border-color: transparent;
 		--_is-active-background-color: transparent;
-		--_is-active-primary-content-color: var(--semantics-buttons-accent-transparent-is-active-primary-content-color);
-		--_is-active-secondary-content-color: var(--semantics-buttons-accent-transparent-is-active-secondary-content-color);
+		--_is-active-primary-content-color: var(--semantics-buttons-accent-transparent-is-active-content-color);
+		--_is-active-secondary-content-color: var(--semantics-buttons-accent-transparent-is-active-content-secondary-color);
 		--_is-active-highlight-border-color: transparent;
 	}
 
 	:host([variant="critical-tinted"]),
 	:host([variant="destructive"]) {
 		--_background-color: var(--semantics-buttons-critical-tinted-background-color);
-		--_primary-content-color: var(--semantics-buttons-critical-tinted-primary-content-color);
-		--_secondary-content-color: var(--semantics-buttons-critical-tinted-secondary-content-color);
+		--_primary-content-color: var(--semantics-buttons-critical-tinted-content-color);
+		--_secondary-content-color: var(--semantics-buttons-critical-tinted-content-secondary-color);
 		--_highlight-border-color: var(--semantics-buttons-critical-tinted-highlight-border-color);
 		--_is-hovered-background-color: var(--semantics-buttons-critical-tinted-is-hovered-background-color);
-		--_is-hovered-primary-content-color: var(--semantics-buttons-critical-tinted-is-hovered-primary-content-color);
-		--_is-hovered-secondary-content-color: var(--semantics-buttons-critical-tinted-is-hovered-secondary-content-color);
+		--_is-hovered-primary-content-color: var(--semantics-buttons-critical-tinted-is-hovered-content-color);
+		--_is-hovered-secondary-content-color: var(--semantics-buttons-critical-tinted-is-hovered-content-secondary-color);
 		--_is-hovered-highlight-border-color: var(--semantics-buttons-critical-tinted-is-hovered-highlight-border-color);
 		--_is-active-background-color: var(--semantics-buttons-critical-tinted-is-active-background-color);
-		--_is-active-primary-content-color: var(--semantics-buttons-critical-tinted-is-active-primary-content-color);
-		--_is-active-secondary-content-color: var(--semantics-buttons-critical-tinted-is-active-secondary-content-color);
+		--_is-active-primary-content-color: var(--semantics-buttons-critical-tinted-is-active-content-color);
+		--_is-active-secondary-content-color: var(--semantics-buttons-critical-tinted-is-active-content-secondary-color);
 		--_is-active-highlight-border-color: var(--semantics-buttons-critical-tinted-is-active-highlight-border-color);
 	}
 
 	:host([variant="critical-transparent"]) {
 		--_background-color: transparent;
-		--_primary-content-color: var(--semantics-buttons-critical-transparent-primary-content-color);
-		--_secondary-content-color: var(--semantics-buttons-critical-transparent-secondary-content-color);
+		--_primary-content-color: var(--semantics-buttons-critical-transparent-content-color);
+		--_secondary-content-color: var(--semantics-buttons-critical-transparent-content-secondary-color);
 		--_highlight-border-color: transparent;
 		--_is-hovered-background-color: transparent;
-		--_is-hovered-primary-content-color: var(--semantics-buttons-critical-transparent-is-hovered-primary-content-color);
-		--_is-hovered-secondary-content-color: var(--semantics-buttons-critical-transparent-is-hovered-secondary-content-color);
+		--_is-hovered-primary-content-color: var(--semantics-buttons-critical-transparent-is-hovered-content-color);
+		--_is-hovered-secondary-content-color: var(--semantics-buttons-critical-transparent-is-hovered-content-secondary-color);
 		--_is-hovered-highlight-border-color: transparent;
 		--_is-active-background-color: transparent;
-		--_is-active-primary-content-color: var(--semantics-buttons-critical-transparent-is-active-primary-content-color);
-		--_is-active-secondary-content-color: var(--semantics-buttons-critical-transparent-is-active-secondary-content-color);
+		--_is-active-primary-content-color: var(--semantics-buttons-critical-transparent-is-active-content-color);
+		--_is-active-secondary-content-color: var(--semantics-buttons-critical-transparent-is-active-content-secondary-color);
 		--_is-active-highlight-border-color: transparent;
 	}
 
@@ -176,31 +177,31 @@ export const buttonStyles = css `
 
 	:host([variant="inherit-tinted"]) {
 		--_background-color: var(--semantics-buttons-inherit-tinted-background-color);
-		--_primary-content-color: var(--semantics-buttons-inherit-tinted-primary-content-color);
-		--_secondary-content-color: var(--semantics-buttons-inherit-tinted-secondary-content-color);
+		--_primary-content-color: var(--semantics-buttons-inherit-tinted-content-color);
+		--_secondary-content-color: var(--semantics-buttons-inherit-tinted-content-secondary-color);
 		--_highlight-border-color: var(--semantics-buttons-inherit-tinted-highlight-border-color);
 		--_is-hovered-background-color: var(--semantics-buttons-inherit-tinted-is-hovered-background-color);
-		--_is-hovered-primary-content-color: var(--semantics-buttons-inherit-tinted-is-hovered-primary-content-color);
-		--_is-hovered-secondary-content-color: var(--semantics-buttons-inherit-tinted-is-hovered-secondary-content-color);
+		--_is-hovered-primary-content-color: var(--semantics-buttons-inherit-tinted-is-hovered-content-color);
+		--_is-hovered-secondary-content-color: var(--semantics-buttons-inherit-tinted-is-hovered-content-secondary-color);
 		--_is-hovered-highlight-border-color: var(--semantics-buttons-inherit-tinted-is-hovered-highlight-border-color);
 		--_is-active-background-color: var(--semantics-buttons-inherit-tinted-is-active-background-color);
-		--_is-active-primary-content-color: var(--semantics-buttons-inherit-tinted-is-active-primary-content-color);
-		--_is-active-secondary-content-color: var(--semantics-buttons-inherit-tinted-is-active-secondary-content-color);
+		--_is-active-primary-content-color: var(--semantics-buttons-inherit-tinted-is-active-content-color);
+		--_is-active-secondary-content-color: var(--semantics-buttons-inherit-tinted-is-active-content-secondary-color);
 		--_is-active-highlight-border-color: var(--semantics-buttons-inherit-tinted-is-active-highlight-border-color);
 	}
 
 	:host([variant="inherit-filled"]) {
 		--_background-color: var(--semantics-buttons-inherit-filled-background-color);
-		--_primary-content-color: var(--context-parent-background-color, var(--semantics-buttons-inherit-filled-primary-content-color));
-		--_secondary-content-color: var(--semantics-buttons-inherit-filled-secondary-content-color);
+		--_primary-content-color: var(--context-parent-background-color, var(--semantics-buttons-inherit-filled-content-color));
+		--_secondary-content-color: var(--semantics-buttons-inherit-filled-content-secondary-color);
 		--_highlight-border-color: var(--semantics-buttons-inherit-filled-highlight-border-color);
 		--_is-hovered-background-color: var(--semantics-buttons-inherit-filled-is-hovered-background-color);
-		--_is-hovered-primary-content-color: var(--semantics-buttons-inherit-filled-is-hovered-primary-content-color);
-		--_is-hovered-secondary-content-color: var(--semantics-buttons-inherit-filled-is-hovered-secondary-content-color);
+		--_is-hovered-primary-content-color: var(--semantics-buttons-inherit-filled-is-hovered-content-color);
+		--_is-hovered-secondary-content-color: var(--semantics-buttons-inherit-filled-is-hovered-content-secondary-color);
 		--_is-hovered-highlight-border-color: var(--semantics-buttons-inherit-filled-is-hovered-highlight-border-color);
 		--_is-active-background-color: var(--semantics-buttons-inherit-filled-is-active-background-color);
-		--_is-active-primary-content-color: var(--semantics-buttons-inherit-filled-is-active-primary-content-color);
-		--_is-active-secondary-content-color: var(--semantics-buttons-inherit-filled-is-active-secondary-content-color);
+		--_is-active-primary-content-color: var(--semantics-buttons-inherit-filled-is-active-content-color);
+		--_is-active-secondary-content-color: var(--semantics-buttons-inherit-filled-is-active-content-secondary-color);
 		--_is-active-highlight-border-color: var(--semantics-buttons-inherit-filled-is-active-highlight-border-color);
 	}
 
@@ -221,108 +222,108 @@ export const buttonStyles = css `
 
 	:host([expanded]) {
 		--_background-color: var(--semantics-buttons-neutral-tinted-is-expanded-background-color);
-		--_primary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-primary-content-color);
-		--_secondary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-secondary-content-color);
+		--_primary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-content-color);
+		--_secondary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-content-secondary-color);
 		--_highlight-border-color: var(--semantics-buttons-neutral-tinted-is-expanded-highlight-border-color);
 		--_is-hovered-background-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-hovered-background-color);
-		--_is-hovered-primary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-hovered-primary-content-color);
-		--_is-hovered-secondary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-hovered-secondary-content-color);
+		--_is-hovered-primary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-hovered-content-color);
+		--_is-hovered-secondary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-hovered-content-secondary-color);
 		--_is-hovered-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-hovered-highlight-border-color);
 		--_is-active-background-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-background-color);
-		--_is-active-primary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-primary-content-color);
-		--_is-active-secondary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-secondary-content-color);
+		--_is-active-primary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-content-color);
+		--_is-active-secondary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-content-secondary-color);
 		--_is-active-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-highlight-border-color);
 	}
 
 	:host([expanded][variant="neutral-base"]) {
 		--_background-color: var(--semantics-buttons-neutral-base-is-expanded-background-color);
-		--_primary-content-color: var(--semantics-buttons-neutral-base-is-expanded-primary-content-color);
-		--_secondary-content-color: var(--semantics-buttons-neutral-base-is-expanded-secondary-content-color);
+		--_primary-content-color: var(--semantics-buttons-neutral-base-is-expanded-content-color);
+		--_secondary-content-color: var(--semantics-buttons-neutral-base-is-expanded-content-secondary-color);
 		--_highlight-border-color: var(--semantics-buttons-neutral-base-is-expanded-highlight-border-color);
 		--_is-hovered-background-color: var(--semantics-buttons-neutral-base-is-expanded-is-hovered-background-color);
-		--_is-hovered-primary-content-color: var(--semantics-buttons-neutral-base-is-expanded-is-hovered-primary-content-color);
-		--_is-hovered-secondary-content-color: var(--semantics-buttons-neutral-base-is-expanded-is-hovered-secondary-content-color);
+		--_is-hovered-primary-content-color: var(--semantics-buttons-neutral-base-is-expanded-is-hovered-content-color);
+		--_is-hovered-secondary-content-color: var(--semantics-buttons-neutral-base-is-expanded-is-hovered-content-secondary-color);
 		--_is-hovered-highlight-border-color: var(--semantics-buttons-neutral-base-is-expanded-is-hovered-highlight-border-color);
 		--_is-active-background-color: var(--semantics-buttons-neutral-base-is-expanded-is-active-background-color);
-		--_is-active-primary-content-color: var(--semantics-buttons-neutral-base-is-expanded-is-active-primary-content-color);
-		--_is-active-secondary-content-color: var(--semantics-buttons-neutral-base-is-expanded-is-active-secondary-content-color);
+		--_is-active-primary-content-color: var(--semantics-buttons-neutral-base-is-expanded-is-active-content-color);
+		--_is-active-secondary-content-color: var(--semantics-buttons-neutral-base-is-expanded-is-active-content-secondary-color);
 		--_is-active-highlight-border-color: var(--semantics-buttons-neutral-base-is-expanded-is-active-highlight-border-color);
 	}
 
 	:host([expanded][variant="neutral-transparent"]) {
 		--_background-color: transparent;
-		--_primary-content-color: var(--semantics-buttons-neutral-transparent-primary-content-color);
-		--_secondary-content-color: var(--semantics-buttons-neutral-transparent-secondary-content-color);
+		--_primary-content-color: var(--semantics-buttons-neutral-transparent-content-color);
+		--_secondary-content-color: var(--semantics-buttons-neutral-transparent-content-secondary-color);
 		--_highlight-border-color: transparent;
 		--_is-hovered-background-color: transparent;
-		--_is-hovered-primary-content-color: var(--semantics-buttons-neutral-transparent-is-hovered-primary-content-color);
-		--_is-hovered-secondary-content-color: var(--semantics-buttons-neutral-transparent-is-hovered-secondary-content-color);
+		--_is-hovered-primary-content-color: var(--semantics-buttons-neutral-transparent-is-hovered-content-color);
+		--_is-hovered-secondary-content-color: var(--semantics-buttons-neutral-transparent-is-hovered-content-secondary-color);
 		--_is-hovered-highlight-border-color: transparent;
 		--_is-active-background-color: transparent;
-		--_is-active-primary-content-color: var(--semantics-buttons-neutral-transparent-is-active-primary-content-color);
-		--_is-active-secondary-content-color: var(--semantics-buttons-neutral-transparent-is-active-secondary-content-color);
+		--_is-active-primary-content-color: var(--semantics-buttons-neutral-transparent-is-active-content-color);
+		--_is-active-secondary-content-color: var(--semantics-buttons-neutral-transparent-is-active-content-secondary-color);
 		--_is-active-highlight-border-color: transparent;
 	}
 
 	:host([expanded][variant="accent-filled"]),
 	:host([expanded][variant="primary"]) {
 		--_background-color: var(--semantics-buttons-accent-filled-is-expanded-background-color);
-		--_primary-content-color: var(--semantics-buttons-accent-filled-is-expanded-primary-content-color);
-		--_secondary-content-color: var(--semantics-buttons-accent-filled-is-expanded-secondary-content-color);
+		--_primary-content-color: var(--semantics-buttons-accent-filled-is-expanded-content-color);
+		--_secondary-content-color: var(--semantics-buttons-accent-filled-is-expanded-content-secondary-color);
 		--_highlight-border-color: var(--semantics-buttons-accent-filled-is-expanded-highlight-border-color);
 		--_is-hovered-background-color: var(--semantics-buttons-accent-filled-is-expanded-is-hovered-background-color);
-		--_is-hovered-primary-content-color: var(--semantics-buttons-accent-filled-is-expanded-is-hovered-primary-content-color);
-		--_is-hovered-secondary-content-color: var(--semantics-buttons-accent-filled-is-expanded-is-hovered-secondary-content-color);
+		--_is-hovered-primary-content-color: var(--semantics-buttons-accent-filled-is-expanded-is-hovered-content-color);
+		--_is-hovered-secondary-content-color: var(--semantics-buttons-accent-filled-is-expanded-is-hovered-content-secondary-color);
 		--_is-hovered-highlight-border-color: var(--semantics-buttons-accent-filled-is-expanded-is-hovered-highlight-border-color);
 		--_is-active-background-color: var(--semantics-buttons-accent-filled-is-expanded-is-active-background-color);
-		--_is-active-primary-content-color: var(--semantics-buttons-accent-filled-is-expanded-is-active-primary-content-color);
-		--_is-active-secondary-content-color: var(--semantics-buttons-accent-filled-is-expanded-is-active-secondary-content-color);
+		--_is-active-primary-content-color: var(--semantics-buttons-accent-filled-is-expanded-is-active-content-color);
+		--_is-active-secondary-content-color: var(--semantics-buttons-accent-filled-is-expanded-is-active-content-secondary-color);
 		--_is-active-highlight-border-color: var(--semantics-buttons-accent-filled-is-expanded-is-active-highlight-border-color);
 	}
 
 	:host([expanded][variant="accent-transparent"]) {
 		--_background-color: transparent;
-		--_primary-content-color: var(--semantics-buttons-accent-transparent-primary-content-color);
-		--_secondary-content-color: var(--semantics-buttons-accent-transparent-secondary-content-color);
+		--_primary-content-color: var(--semantics-buttons-accent-transparent-content-color);
+		--_secondary-content-color: var(--semantics-buttons-accent-transparent-content-secondary-color);
 		--_highlight-border-color: transparent;
 		--_is-hovered-background-color: transparent;
-		--_is-hovered-primary-content-color: var(--semantics-buttons-accent-transparent-is-hovered-primary-content-color);
-		--_is-hovered-secondary-content-color: var(--semantics-buttons-accent-transparent-is-hovered-secondary-content-color);
+		--_is-hovered-primary-content-color: var(--semantics-buttons-accent-transparent-is-hovered-content-color);
+		--_is-hovered-secondary-content-color: var(--semantics-buttons-accent-transparent-is-hovered-content-secondary-color);
 		--_is-hovered-highlight-border-color: transparent;
 		--_is-active-background-color: transparent;
-		--_is-active-primary-content-color: var(--semantics-buttons-accent-transparent-is-active-primary-content-color);
-		--_is-active-secondary-content-color: var(--semantics-buttons-accent-transparent-is-active-secondary-content-color);
+		--_is-active-primary-content-color: var(--semantics-buttons-accent-transparent-is-active-content-color);
+		--_is-active-secondary-content-color: var(--semantics-buttons-accent-transparent-is-active-content-secondary-color);
 		--_is-active-highlight-border-color: transparent;
 	}
 
 	:host([expanded][variant="critical-tinted"]),
 	:host([expanded][variant="destructive"]) {
 		--_background-color: var(--semantics-buttons-critical-tinted-is-expanded-background-color);
-		--_primary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-primary-content-color);
-		--_secondary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-secondary-content-color);
+		--_primary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-content-color);
+		--_secondary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-content-secondary-color);
 		--_highlight-border-color: var(--semantics-buttons-critical-tinted-is-expanded-highlight-border-color);
 		--_is-hovered-background-color: var(--semantics-buttons-critical-tinted-is-expanded-is-hovered-background-color);
-		--_is-hovered-primary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-is-hovered-primary-content-color);
-		--_is-hovered-secondary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-is-hovered-secondary-content-color);
+		--_is-hovered-primary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-is-hovered-content-color);
+		--_is-hovered-secondary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-is-hovered-content-secondary-color);
 		--_is-hovered-highlight-border-color: var(--semantics-buttons-critical-tinted-is-expanded-is-hovered-highlight-border-color);
 		--_is-active-background-color: var(--semantics-buttons-critical-tinted-is-expanded-is-active-background-color);
-		--_is-active-primary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-is-active-primary-content-color);
-		--_is-active-secondary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-is-active-secondary-content-color);
+		--_is-active-primary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-is-active-content-color);
+		--_is-active-secondary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-is-active-content-secondary-color);
 		--_is-active-highlight-border-color: var(--semantics-buttons-critical-tinted-is-expanded-is-active-highlight-border-color);
 	}
 
 	:host([expanded][variant="critical-transparent"]) {
 		--_background-color: transparent;
-		--_primary-content-color: var(--semantics-buttons-critical-transparent-primary-content-color);
-		--_secondary-content-color: var(--semantics-buttons-critical-transparent-secondary-content-color);
+		--_primary-content-color: var(--semantics-buttons-critical-transparent-content-color);
+		--_secondary-content-color: var(--semantics-buttons-critical-transparent-content-secondary-color);
 		--_highlight-border-color: transparent;
 		--_is-hovered-background-color: transparent;
-		--_is-hovered-primary-content-color: var(--semantics-buttons-critical-transparent-is-hovered-primary-content-color);
-		--_is-hovered-secondary-content-color: var(--semantics-buttons-critical-transparent-is-hovered-secondary-content-color);
+		--_is-hovered-primary-content-color: var(--semantics-buttons-critical-transparent-is-hovered-content-color);
+		--_is-hovered-secondary-content-color: var(--semantics-buttons-critical-transparent-is-hovered-content-secondary-color);
 		--_is-hovered-highlight-border-color: transparent;
 		--_is-active-background-color: transparent;
-		--_is-active-primary-content-color: var(--semantics-buttons-critical-transparent-is-active-primary-content-color);
-		--_is-active-secondary-content-color: var(--semantics-buttons-critical-transparent-is-active-secondary-content-color);
+		--_is-active-primary-content-color: var(--semantics-buttons-critical-transparent-is-active-content-color);
+		--_is-active-secondary-content-color: var(--semantics-buttons-critical-transparent-is-active-content-secondary-color);
 		--_is-active-highlight-border-color: transparent;
 	}
 
@@ -332,31 +333,31 @@ export const buttonStyles = css `
 	   specificity and later source order, so it would otherwise win. */
 	:host([expanded][variant="inherit-tinted"]) {
 		--_background-color: var(--semantics-buttons-inherit-tinted-is-expanded-background-color);
-		--_primary-content-color: var(--semantics-buttons-inherit-tinted-is-expanded-primary-content-color);
-		--_secondary-content-color: var(--semantics-buttons-inherit-tinted-is-expanded-secondary-content-color);
+		--_primary-content-color: var(--semantics-buttons-inherit-tinted-is-expanded-content-color);
+		--_secondary-content-color: var(--semantics-buttons-inherit-tinted-is-expanded-content-secondary-color);
 		--_highlight-border-color: var(--semantics-buttons-inherit-tinted-is-expanded-highlight-border-color);
 		--_is-hovered-background-color: var(--semantics-buttons-inherit-tinted-is-expanded-is-hovered-background-color);
-		--_is-hovered-primary-content-color: var(--semantics-buttons-inherit-tinted-is-expanded-is-hovered-primary-content-color);
-		--_is-hovered-secondary-content-color: var(--semantics-buttons-inherit-tinted-is-expanded-is-hovered-secondary-content-color);
+		--_is-hovered-primary-content-color: var(--semantics-buttons-inherit-tinted-is-expanded-is-hovered-content-color);
+		--_is-hovered-secondary-content-color: var(--semantics-buttons-inherit-tinted-is-expanded-is-hovered-content-secondary-color);
 		--_is-hovered-highlight-border-color: var(--semantics-buttons-inherit-tinted-is-expanded-is-hovered-highlight-border-color);
 		--_is-active-background-color: var(--semantics-buttons-inherit-tinted-is-expanded-is-active-background-color);
-		--_is-active-primary-content-color: var(--semantics-buttons-inherit-tinted-is-expanded-is-active-primary-content-color);
-		--_is-active-secondary-content-color: var(--semantics-buttons-inherit-tinted-is-expanded-is-active-secondary-content-color);
+		--_is-active-primary-content-color: var(--semantics-buttons-inherit-tinted-is-expanded-is-active-content-color);
+		--_is-active-secondary-content-color: var(--semantics-buttons-inherit-tinted-is-expanded-is-active-content-secondary-color);
 		--_is-active-highlight-border-color: var(--semantics-buttons-inherit-tinted-is-expanded-is-active-highlight-border-color);
 	}
 
 	:host([expanded][variant="inherit-filled"]) {
 		--_background-color: var(--semantics-buttons-inherit-filled-is-expanded-background-color);
-		--_primary-content-color: var(--context-parent-background-color, var(--semantics-buttons-inherit-filled-is-expanded-primary-content-color));
-		--_secondary-content-color: var(--semantics-buttons-inherit-filled-is-expanded-secondary-content-color);
+		--_primary-content-color: var(--context-parent-background-color, var(--semantics-buttons-inherit-filled-is-expanded-content-color));
+		--_secondary-content-color: var(--semantics-buttons-inherit-filled-is-expanded-content-secondary-color);
 		--_highlight-border-color: var(--semantics-buttons-inherit-filled-is-expanded-highlight-border-color);
 		--_is-hovered-background-color: var(--semantics-buttons-inherit-filled-is-expanded-is-hovered-background-color);
-		--_is-hovered-primary-content-color: var(--semantics-buttons-inherit-filled-is-expanded-is-hovered-primary-content-color);
-		--_is-hovered-secondary-content-color: var(--semantics-buttons-inherit-filled-is-expanded-is-hovered-secondary-content-color);
+		--_is-hovered-primary-content-color: var(--semantics-buttons-inherit-filled-is-expanded-is-hovered-content-color);
+		--_is-hovered-secondary-content-color: var(--semantics-buttons-inherit-filled-is-expanded-is-hovered-content-secondary-color);
 		--_is-hovered-highlight-border-color: var(--semantics-buttons-inherit-filled-is-expanded-is-hovered-highlight-border-color);
 		--_is-active-background-color: var(--semantics-buttons-inherit-filled-is-expanded-is-active-background-color);
-		--_is-active-primary-content-color: var(--semantics-buttons-inherit-filled-is-expanded-is-active-primary-content-color);
-		--_is-active-secondary-content-color: var(--semantics-buttons-inherit-filled-is-expanded-is-active-secondary-content-color);
+		--_is-active-primary-content-color: var(--semantics-buttons-inherit-filled-is-expanded-is-active-content-color);
+		--_is-active-secondary-content-color: var(--semantics-buttons-inherit-filled-is-expanded-is-active-content-secondary-color);
 		--_is-active-highlight-border-color: var(--semantics-buttons-inherit-filled-is-expanded-is-active-highlight-border-color);
 	}
 

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

@@ -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;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,wCAAwC,CAAC;AAE5E,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAgC3B,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyjBrB,CAAC"}
+{"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;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,wCAAwC,CAAC;AAE5E,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAgC3B,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0jBrB,CAAC"}

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

@@ -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;AA+BD,wBAAgB,QAAQ,CAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,eAAe,wCAqGlE"}
+{"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;AA+BD,wBAAgB,QAAQ,CAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,eAAe,wCA+GlE"}

package/dist/components/actions/button/button.template.js

@@ -78,6 +78,11 @@ export function template(helpers) {
 			</div>
 		`
         : nothing;
+    // A single slotted nldd-menu / nldd-popover that this button invokes. Kept in
+    // a named slot so it never lands in the text/icon slots; it renders nothing
+    // in flow (a popover is display:none until shown in the top layer). See
+    // _handleClick.
+    const popupSlot = html `<slot name="popup" @slotchange=${this._popup.handleSlotChange}></slot>`;
     if (this.href) {
         const resolvedRel = this._resolvedRel();
         return html `
@@ -90,12 +95,14 @@ export function template(helpers) {
 				aria-haspopup=${this.popupType || nothing}
 				aria-expanded=${ariaExpanded}
 				aria-busy=${ariaBusy}
+				@pointerdown=${this._popup.handlePointerdown}
 				@click=${helpers.handleClick}
 			>
 				${content}
 				${renderOpensInNewTabHint ? html `<span class="button__opens-in-new-tab-hint">${opensInNewTabHint}</span>` : nothing}
 			</a>
 			${loadingIndicator}
+			${popupSlot}
 		`;
     }
     // .popoverTargetElement / .popoverTargetAction are bound unguarded: in
@@ -115,11 +122,13 @@ export function template(helpers) {
 			popovertarget=${this.popovertarget || nothing}
 			.popoverTargetElement=${this.popoverTargetElement}
 			.popoverTargetAction=${this.popoverTargetAction}
+			@pointerdown=${this._popup.handlePointerdown}
 			@click=${helpers.handleClick}
 		>
 			${content}
 		</button>
 		${loadingIndicator}
+		${popupSlot}
 	`;
 }
 //# sourceMappingURL=button.template.js.map