@nldd/design-system 0.8.42 → 0.8.43

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

@@ -2,12 +2,14 @@
  * Nederlandse Digitale Dienst Icon Button Component (Lit + TypeScript)
  *
  * @element nldd-icon-button
- * @attr {string}  variant           - Button variant: 'accent-filled' | 'accent-outlined' | 'accent-transparent' | 'neutral-tinted' | 'neutral-transparent' | 'critical-tinted' | 'primary' | 'secondary' | 'destructive'
+ * @attr {string}  variant           - Button variant: 'accent-filled' | 'accent-transparent' | 'neutral-tinted' | 'neutral-transparent' | 'critical-tinted' | 'critical-transparent' | 'primary' | 'secondary' | 'destructive'
  * @attr {string}  size              - Button size: 'xs' | 'sm' | 'md' | 'lg' (default: 'md')
  * @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 opens a menu or popover and shows chevron next to the icon
- * @attr {boolean} full-width        - Whether the button stretches to fill its container width
+ * @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 {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, used as aria-label and shown below the icon in lg size
  * @attr {string}  icon              - Icon name for the nldd-icon element
  * @attr {string}  accessible-label  - Accessible label for screen readers. Overrides text as aria-label
@@ -35,8 +37,9 @@
 import { LitElement } from 'lit';
 import './../../content/icon/icon.js';
 export type Size = 'xs' | 'sm' | 'md' | 'lg';
-export type Variant = 'primary' | 'secondary' | 'destructive' | 'accent-filled' | 'accent-outlined' | 'accent-transparent' | 'neutral-tinted' | 'neutral-transparent' | 'critical-tinted';
+export type Variant = 'primary' | 'secondary' | 'destructive' | 'accent-filled' | 'accent-transparent' | 'neutral-tinted' | 'neutral-transparent' | 'critical-tinted' | 'critical-transparent';
 export type ButtonType = 'button' | 'submit' | 'reset';
+export type PopupType = 'menu' | 'listbox' | 'dialog' | 'tree' | 'grid';
 export declare class NLDDIconButton extends LitElement {
     static styles: import("lit").CSSResult;
     variant: Variant;
@@ -44,7 +47,15 @@ export declare class NLDDIconButton extends LitElement {
     disabled: boolean;
     type: ButtonType;
     expandable: boolean;
-    fullWidth: boolean;
+    expanded: boolean;
+    /**
+     * Type of popup container this button opens. Sets `aria-haspopup` on the
+     * inner button and forces `aria-expanded` to always be present (true/false)
+     * so screen readers can announce both the popup type and its current state.
+     */
+    popupType?: PopupType;
+    /** Width mode: 'full' (stretch to container) or any CSS length. */
+    width: string;
     popovertarget: string | undefined;
     /** Button text, used as aria-label and shown below the icon in lg size. */
     text: string;
@@ -67,7 +78,7 @@ export declare class NLDDIconButton extends LitElement {
     /** Whether an icon is present via attribute or slot. */
     private get _hasIcon();
     private _warnedA11y;
-    updated(): void;
+    updated(changedProperties: Map<string, unknown>): void;
     /** Resolves the effective rel value for link rendering. */
     _resolvedRel(): string;
     protected _handleClick(e: MouseEvent): void;

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

@@ -1 +1 @@
-{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/icon-button/icon-button.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAIjC,OAAO,8BAA8B,CAAC;AAEtC,MAAM,MAAM,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC7C,MAAM,MAAM,OAAO,GAChB,SAAS,GACT,WAAW,GACX,aAAa,GACb,eAAe,GACf,iBAAiB,GACjB,oBAAoB,GACpB,gBAAgB,GAChB,qBAAqB,GACrB,iBAAiB,CAAC;AACrB,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEvD,qBACa,cAAe,SAAQ,UAAU;IAC7C,OAAgB,MAAM,0BAAoB;IAG1C,OAAO,EAAE,OAAO,CAAoB;IAGpC,IAAI,EAAE,IAAI,CAAQ;IAGlB,QAAQ,UAAS;IAGjB,IAAI,EAAE,UAAU,CAAY;IAG5B,UAAU,UAAS;IAGnB,SAAS,UAAS;IAGlB,aAAa,EAAE,MAAM,GAAG,SAAS,CAAa;IAE9C,2EAA2E;IAE3E,IAAI,SAAM;IAEV,gFAAgF;IAEhF,IAAI,SAAM;IAEV;kEAC8D;IAE9D,eAAe,SAAM;IAErB,mEAAmE;IAEnE,WAAW,UAAS;IAEpB,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,wDAAwD;IACxD,OAAO,KAAK,QAAQ,GAInB;IAED,OAAO,CAAC,WAAW,CAAS;IAEnB,OAAO,IAAI,IAAI;IAUxB,2DAA2D;IAC3D,YAAY,IAAI,MAAM;IAMtB,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IAQ3C;;;OAGG;IACM,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAInC,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,kBAAkB,EAAE,cAAc,CAAC;KACnC;CACD"}
+{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/icon-button/icon-button.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAIjC,OAAO,8BAA8B,CAAC;AAEtC,MAAM,MAAM,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC7C,MAAM,MAAM,OAAO,GAChB,SAAS,GACT,WAAW,GACX,aAAa,GACb,eAAe,GACf,oBAAoB,GACpB,gBAAgB,GAChB,qBAAqB,GACrB,iBAAiB,GACjB,sBAAsB,CAAC;AAC1B,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AACvD,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;AAExE,qBACa,cAAe,SAAQ,UAAU;IAC7C,OAAgB,MAAM,0BAAoB;IAG1C,OAAO,EAAE,OAAO,CAAoB;IAGpC,IAAI,EAAE,IAAI,CAAQ;IAGlB,QAAQ,UAAS;IAGjB,IAAI,EAAE,UAAU,CAAY;IAG5B,UAAU,UAAS;IAGnB,QAAQ,UAAS;IAEjB;;;;OAIG;IAEH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB,mEAAmE;IAEnE,KAAK,SAAM;IAGX,aAAa,EAAE,MAAM,GAAG,SAAS,CAAa;IAE9C,2EAA2E;IAE3E,IAAI,SAAM;IAEV,gFAAgF;IAEhF,IAAI,SAAM;IAEV;kEAC8D;IAE9D,eAAe,SAAM;IAErB,mEAAmE;IAEnE,WAAW,UAAS;IAEpB,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,wDAAwD;IACxD,OAAO,KAAK,QAAQ,GAInB;IAED,OAAO,CAAC,WAAW,CAAS;IAEnB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IA0B/D,2DAA2D;IAC3D,YAAY,IAAI,MAAM;IAMtB,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IAQ3C;;;OAGG;IACM,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAInC,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,kBAAkB,EAAE,cAAc,CAAC;KACnC;CACD"}

package/dist/components/actions/icon-button/icon-button.js

@@ -8,12 +8,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  * Nederlandse Digitale Dienst Icon Button Component (Lit + TypeScript)
  *
  * @element nldd-icon-button
- * @attr {string}  variant           - Button variant: 'accent-filled' | 'accent-outlined' | 'accent-transparent' | 'neutral-tinted' | 'neutral-transparent' | 'critical-tinted' | 'primary' | 'secondary' | 'destructive'
+ * @attr {string}  variant           - Button variant: 'accent-filled' | 'accent-transparent' | 'neutral-tinted' | 'neutral-transparent' | 'critical-tinted' | 'critical-transparent' | 'primary' | 'secondary' | 'destructive'
  * @attr {string}  size              - Button size: 'xs' | 'sm' | 'md' | 'lg' (default: 'md')
  * @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 opens a menu or popover and shows chevron next to the icon
- * @attr {boolean} full-width        - Whether the button stretches to fill its container width
+ * @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 {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, used as aria-label and shown below the icon in lg size
  * @attr {string}  icon              - Icon name for the nldd-icon element
  * @attr {string}  accessible-label  - Accessible label for screen readers. Overrides text as aria-label
@@ -51,7 +53,9 @@ let NLDDIconButton = class NLDDIconButton extends LitElement {
         this.disabled = false;
         this.type = 'button';
         this.expandable = false;
-        this.fullWidth = false;
+        this.expanded = false;
+        /** Width mode: 'full' (stretch to container) or any CSS length. */
+        this.width = '';
         this.popovertarget = undefined;
         /** Button text, used as aria-label and shown below the icon in lg size. */
         this.text = '';
@@ -80,7 +84,24 @@ let NLDDIconButton = class NLDDIconButton extends LitElement {
         const slot = this.shadowRoot?.querySelector('slot[name="icon"]');
         return (slot?.assignedElements().length ?? 0) > 0;
     }
-    updated() {
+    updated(changedProperties) {
+        if (changedProperties.has('width')) {
+            const w = this.width;
+            // 'full' switches host to block + 100% via CSS attribute selector.
+            // A valid CSS length is applied as inline style.width on the host.
+            // In either case the inner button stretches via --_width, so
+            // a custom width on the host translates to a wide button instead
+            // of leaving the size-based square. Invalid values do nothing.
+            const isFull = w === 'full';
+            const isValidLength = !!w && !isFull && CSS.supports('width', w);
+            this.style.width = isValidLength ? w : '';
+            if (isFull || isValidLength) {
+                this.style.setProperty('--_width', '100%');
+            }
+            else {
+                this.style.removeProperty('--_width');
+            }
+        }
         const inaccessible = this._hasIcon && !this.text && !this.accessibleLabel;
         if (import.meta.env?.DEV && inaccessible && !this._warnedA11y) {
             this._warnedA11y = true;
@@ -133,8 +154,14 @@ __decorate([
     property({ type: Boolean, reflect: true, attribute: 'expandable' })
 ], NLDDIconButton.prototype, "expandable", void 0);
 __decorate([
-    property({ type: Boolean, reflect: true, attribute: 'full-width' })
-], NLDDIconButton.prototype, "fullWidth", void 0);
+    property({ type: Boolean, reflect: true })
+], NLDDIconButton.prototype, "expanded", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'popup-type' })
+], NLDDIconButton.prototype, "popupType", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDIconButton.prototype, "width", void 0);
 __decorate([
     property({ type: String })
 ], NLDDIconButton.prototype, "popovertarget", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"icon-button.js","sourceRoot":"","sources":["../../../../src/components/actions/icon-button/icon-button.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"icon-button.js","sourceRoot":"","sources":["../../../../src/components/actions/icon-button/icon-button.ts"],"names":[],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"icon-button.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/icon-button/icon-button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,yBAuV5B,CAAC"}
+{"version":3,"file":"icon-button.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/icon-button/icon-button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,yBAgZ5B,CAAC"}

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

@@ -5,11 +5,19 @@ export const iconButtonStyles = css `
 	/* # Host */
 
 	:host {
+		--_width: auto;
+		--_disclosure-icon-size: var(--primitives-space-20);
+
 		display: inline-block;
+		max-width: 100%;
 		-webkit-tap-highlight-color: transparent;
 	}
 
-	:host([full-width]) {
+	:host([size='xs']) {
+		--_disclosure-icon-size: var(--primitives-space-16);
+	}
+
+	:host([width="full"]) {
 		display: block;
 		width: 100%;
 		flex-grow: 1;
@@ -35,13 +43,20 @@ export const iconButtonStyles = css `
 		background: none;
 		font: inherit;
 		box-sizing: border-box;
+		text-decoration: none;
 		display: inline-flex;
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
+		width: var(--_width);
 		transition:
 			background-color var(--primitives-transition-duration-fast) var(--primitives-transition-easing-default),
-			color var(--primitives-transition-duration-fast) var(--primitives-transition-easing-default);
+			color var(--primitives-transition-duration-fast) var(--primitives-transition-easing-default)
+		;
+	}
+
+	a.icon-button {
+		cursor: var(--semantics-controls-link-cursor);
 	}
 
 	@media (prefers-reduced-motion: reduce) {
@@ -50,10 +65,6 @@ export const iconButtonStyles = css `
 		}
 	}
 
-	a.icon-button {
-		cursor: var(--semantics-controls-link-cursor);
-	}
-
 
 	/* # Focus */
 
@@ -73,75 +84,37 @@ export const iconButtonStyles = css `
 	/* ## Size: XS */
 
 	:host([size='xs']) .icon-button {
-		width: auto;
 		height: var(--semantics-controls-xs-min-size);
 		min-width: var(--semantics-controls-xs-min-size);
 		min-height: var(--semantics-controls-xs-min-size);
-		padding: var(--primitives-space-4);
+		padding: calc((var(--semantics-controls-xs-min-size) - var(--semantics-buttons-xs-icon-only-icon-size)) / 2);
 		border-radius: var(--semantics-controls-xs-corner-radius);
 	}
 
-	:host([size='xs']) .icon-button__icon {
-		width: var(--primitives-space-16);
-		height: var(--primitives-space-16);
-	}
-
-	:host([size='xs']) .icon-button__disclosure-icon {
-		width: var(--primitives-space-16);
-		height: var(--primitives-space-16);
-	}
-
 	/* ## Size: SM */
 
 	:host([size='sm']) .icon-button {
-		width: auto;
 		height: var(--semantics-controls-sm-min-size);
 		min-width: var(--semantics-controls-sm-min-size);
 		min-height: var(--semantics-controls-sm-min-size);
-		padding: var(--primitives-space-6);
+		padding: calc((var(--semantics-controls-sm-min-size) - var(--semantics-buttons-sm-icon-only-icon-size)) / 2);
 		border-radius: var(--semantics-controls-sm-corner-radius);
 	}
 
-	:host([size='sm']) .icon-button__icon {
-		width: var(--primitives-space-20);
-		height: var(--primitives-space-20);
-	}
-
-	:host([size='sm']) .icon-button__disclosure-icon {
-		width: var(--primitives-space-20);
-		height: var(--primitives-space-20);
-		margin-right: calc(var(--primitives-space-2) * -1);
-	}
-
 	/* ## Size: MD (Default) */
 
 	:host([size='md']) .icon-button,
 	:host(:not([size])) .icon-button {
-		width: auto;
 		height: var(--semantics-controls-md-min-size);
 		min-width: var(--semantics-controls-md-min-size);
 		min-height: var(--semantics-controls-md-min-size);
-		padding: var(--primitives-space-8);
+		padding: calc((var(--semantics-controls-md-min-size) - var(--semantics-buttons-md-icon-only-icon-size)) / 2);
 		border-radius: var(--semantics-controls-md-corner-radius);
 	}
 
-	:host([size='md']) .icon-button__icon,
-	:host(:not([size])) .icon-button__icon {
-		width: var(--primitives-space-24);
-		height: var(--primitives-space-24);
-	}
-
-	:host([size='md']) .icon-button__disclosure-icon,
-	:host(:not([size])) .icon-button__disclosure-icon {
-		width: var(--primitives-space-20);
-		height: var(--primitives-space-20);
-		margin-right: calc(var(--primitives-space-2) * -1);
-	}
-
 	/* ## Size: LG */
 
 	:host([size='lg']) .icon-button {
-		width: auto;
 		height: var(--semantics-controls-lg-min-size);
 		min-width: var(--semantics-controls-lg-min-size);
 		min-height: var(--semantics-controls-lg-min-size);
@@ -149,25 +122,11 @@ export const iconButtonStyles = css `
 		border-radius: var(--semantics-controls-lg-corner-radius);
 	}
 
-	:host([size='lg']) .icon-button__icon {
-		width: var(--primitives-space-24);
-		height: var(--primitives-space-24);
-	}
-
-	:host([size='lg']) .icon-button__disclosure-icon {
-		width: var(--primitives-space-20);
-		height: var(--primitives-space-20);
-		margin-right: calc(var(--primitives-space-2) * -1);
-	}
-
-	:host([full-width]) .icon-button {
-		width: 100%;
-	}
-
-
 	/* # Variants */
 
-	/* ## Variant: neutral-tinted (secondary, default) */
+	/* ## Neutral Tinted (Secondary, Default) */
+
+	/* ### Default neutral tinted icon button */
 
 	:host([variant='neutral-tinted']) .icon-button,
 	:host([variant='secondary']) .icon-button,
@@ -176,6 +135,8 @@ export const iconButtonStyles = css `
 		color: var(--semantics-buttons-neutral-tinted-content-color);
 	}
 
+	/* ### Hovered neutral tinted icon button */
+
 	@media (hover: hover) {
 		:host([variant='neutral-tinted']) .icon-button:hover,
 		:host([variant='secondary']) .icon-button:hover,
@@ -185,6 +146,8 @@ export const iconButtonStyles = css `
 		}
 	}
 
+	/* ### Active neutral tinted icon button */
+
 	:host([variant='neutral-tinted']) .icon-button:active,
 	:host([variant='secondary']) .icon-button:active,
 	:host(:not([variant])) .icon-button:active {
@@ -192,13 +155,46 @@ export const iconButtonStyles = css `
 		color: var(--semantics-buttons-neutral-tinted-is-active-content-color);
 	}
 
-	/* ## Variant: neutral-transparent */
+	/* ### Open neutral tinted icon button */
+
+	:host([expanded][variant='neutral-tinted']) .icon-button,
+	:host([expanded][variant='secondary']) .icon-button,
+	:host([expanded]:not([variant])) .icon-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 icon button */
+
+	@media (hover: hover) {
+		:host([expanded][variant='neutral-tinted']) .icon-button:hover,
+		:host([expanded][variant='secondary']) .icon-button:hover,
+		:host([expanded]:not([variant])) .icon-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 icon button */
+
+	:host([expanded][variant='neutral-tinted']) .icon-button:active,
+	:host([expanded][variant='secondary']) .icon-button:active,
+	:host([expanded]:not([variant])) .icon-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 icon button */
 
 	:host([variant='neutral-transparent']) .icon-button {
 		background-color: transparent;
 		color: var(--semantics-buttons-neutral-transparent-content-color);
 	}
 
+	/* ### Hovered neutral transparent icon button */
+
 	@media (hover: hover) {
 		:host([variant='neutral-transparent']) .icon-button:hover {
 			background-color: transparent;
@@ -206,11 +202,15 @@ export const iconButtonStyles = css `
 		}
 	}
 
+	/* ### Active neutral transparent icon button */
+
 	:host([variant='neutral-transparent']) .icon-button:active {
 		color: var(--semantics-buttons-neutral-transparent-is-active-content-color);
 	}
 
-	/* ## Variant: accent-filled (primary) */
+	/* ## Accent Filled (Primary) */
+
+	/* ### Default accent filled icon button */
 
 	:host([variant='accent-filled']) .icon-button,
 	:host([variant='primary']) .icon-button {
@@ -218,6 +218,8 @@ export const iconButtonStyles = css `
 		color: var(--semantics-buttons-accent-filled-content-color);
 	}
 
+	/* ### Hovered accent filled icon button */
+
 	@media (hover: hover) {
 		:host([variant='accent-filled']) .icon-button:hover,
 		:host([variant='primary']) .icon-button:hover {
@@ -226,68 +228,66 @@ export const iconButtonStyles = css `
 		}
 	}
 
+	/* ### Active accent filled icon button */
+
 	:host([variant='accent-filled']) .icon-button:active,
 	:host([variant='primary']) .icon-button:active {
 		background-color: var(--semantics-buttons-accent-filled-is-active-background-color);
 		color: var(--semantics-buttons-accent-filled-is-active-content-color);
 	}
 
-	/* ## Variant: accent-outlined */
-
-	:host([variant='accent-outlined']) .icon-button {
-		background-color: transparent;
-		border-width: var(--semantics-buttons-accent-outlined-border-thickness);
-		border-style: solid;
-		border-color: var(--semantics-buttons-accent-outlined-border-color);
-		color: var(--semantics-buttons-accent-outlined-content-color);
-	}
+	/* ### Open accent filled icon button */
 
-	:host([variant='accent-outlined'][size='lg']) .icon-button {
-		padding: calc(var(--primitives-space-8) - var(--semantics-buttons-accent-outlined-border-thickness));
+	:host([expanded][variant='accent-filled']) .icon-button,
+	:host([expanded][variant='primary']) .icon-button {
+		background-color: var(--semantics-buttons-accent-filled-is-open-background-color);
+		color: var(--semantics-buttons-accent-filled-is-open-content-color);
 	}
 
-	:host([variant='accent-outlined'][size='md']) .icon-button {
-		padding: calc(var(--primitives-space-8) - var(--semantics-buttons-accent-outlined-border-thickness));
-	}
-
-	:host([variant='accent-outlined'][size='sm']) .icon-button {
-		padding: calc(var(--primitives-space-6) - var(--semantics-buttons-accent-outlined-border-thickness));
-	}
-
-	:host([variant='accent-outlined'][size='xs']) .icon-button {
-		padding: calc(var(--primitives-space-4) - var(--semantics-buttons-accent-outlined-border-thickness));
-	}
+	/* ### Open hovered accent filled icon button */
 
 	@media (hover: hover) {
-		:host([variant='accent-outlined']) .icon-button:hover {
-			border-color: var(--semantics-buttons-accent-outlined-is-hovered-border-color);
-			color: var(--semantics-buttons-accent-outlined-is-hovered-content-color);
+		:host([expanded][variant='accent-filled']) .icon-button:hover,
+		:host([expanded][variant='primary']) .icon-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);
 		}
 	}
 
-	:host([variant='accent-outlined']) .icon-button:active {
-		border-color: var(--semantics-buttons-accent-outlined-is-active-border-color);
-		color: var(--semantics-buttons-accent-outlined-is-active-content-color);
+	/* ### Open active accent filled icon button */
+
+	:host([expanded][variant='accent-filled']) .icon-button:active,
+	:host([expanded][variant='primary']) .icon-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);
 	}
 
-	/* ## Variant: accent-transparent */
+	/* ## Accent Transparent */
+
+	/* ### Default accent transparent icon button */
 
 	:host([variant='accent-transparent']) .icon-button {
 		background-color: transparent;
 		color: var(--semantics-buttons-accent-transparent-content-color);
 	}
 
+	/* ### Hovered accent transparent icon button */
+
 	@media (hover: hover) {
 		:host([variant='accent-transparent']) .icon-button:hover {
 			color: var(--semantics-buttons-accent-transparent-is-hovered-content-color);
 		}
 	}
 
+	/* ### Active accent transparent icon button */
+
 	:host([variant='accent-transparent']) .icon-button:active {
 		color: var(--semantics-buttons-accent-transparent-is-active-content-color);
 	}
 
-	/* ## Variant: critical-tinted (destructive) */
+	/* ## Critical Tinted (Destructive) */
+
+	/* ### Default critical tinted icon button */
 
 	:host([variant='critical-tinted']) .icon-button,
 	:host([variant='destructive']) .icon-button {
@@ -295,6 +295,8 @@ export const iconButtonStyles = css `
 		color: var(--semantics-buttons-critical-tinted-content-color);
 	}
 
+	/* ### Hovered critical tinted icon button */
+
 	@media (hover: hover) {
 		:host([variant='critical-tinted']) .icon-button:hover,
 		:host([variant='destructive']) .icon-button:hover {
@@ -303,12 +305,37 @@ export const iconButtonStyles = css `
 		}
 	}
 
+	/* ### Active critical tinted icon button */
+
 	:host([variant='critical-tinted']) .icon-button:active,
 	:host([variant='destructive']) .icon-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 icon button */
+
+	:host([variant='critical-transparent']) .icon-button {
+		background-color: transparent;
+		color: var(--semantics-buttons-critical-transparent-content-color);
+	}
+
+	/* ### Hovered critical transparent icon button */
+
+	@media (hover: hover) {
+		:host([variant='critical-transparent']) .icon-button:hover {
+			color: var(--semantics-buttons-critical-transparent-is-hovered-content-color);
+		}
+	}
+
+	/* ### Active critical transparent icon button */
+
+	:host([variant='critical-transparent']) .icon-button:active {
+		color: var(--semantics-buttons-critical-transparent-is-active-content-color);
+	}
+
 
 	/* # Elements */
 
@@ -326,9 +353,39 @@ export const iconButtonStyles = css `
 		justify-content: center;
 	}
 
+	:host([size='xs']) .icon-button__icon {
+		width: var(--semantics-buttons-xs-icon-only-icon-size);
+		height: var(--semantics-buttons-xs-icon-only-icon-size);
+	}
+
+	:host([size='sm']) .icon-button__icon {
+		width: var(--semantics-buttons-sm-icon-only-icon-size);
+		height: var(--semantics-buttons-sm-icon-only-icon-size);
+	}
+
+	:host([size='md']) .icon-button__icon,
+	:host(:not([size])) .icon-button__icon {
+		width: var(--semantics-buttons-md-icon-only-icon-size);
+		height: var(--semantics-buttons-md-icon-only-icon-size);
+	}
+
+	:host([size='lg']) .icon-button__icon {
+		width: var(--semantics-buttons-md-icon-only-icon-size);
+		height: var(--semantics-buttons-md-icon-only-icon-size);
+	}
+
 	.icon-button__disclosure-icon {
 		display: flex;
 		flex-shrink: 0;
+		width: var(--_disclosure-icon-size);
+		height: var(--_disclosure-icon-size);
+	}
+
+	:host([size='sm']) .icon-button__disclosure-icon,
+	:host([size='md']) .icon-button__disclosure-icon,
+	:host(:not([size])) .icon-button__disclosure-icon,
+	:host([size='lg']) .icon-button__disclosure-icon {
+		margin-right: calc(var(--primitives-space-2) * -1);
 	}
 
 	.icon-button__text {

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"icon-button.template.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/icon-button/icon-button.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,kCAAkC,CAAC;AAsB1C,wBAAgB,QAAQ,CAAC,IAAI,EAAE,cAAc,wCAgD5C"}
+{"version":3,"file":"icon-button.template.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/icon-button/icon-button.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,kCAAkC,CAAC;AAsB1C,wBAAgB,QAAQ,CAAC,IAAI,EAAE,cAAc,wCA4D5C"}

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

@@ -25,6 +25,13 @@ export function template() {
     // Tooltip text: accessible-label always, or text when not visible (non-lg)
     const tooltipText = this.accessibleLabel
         || (this.size !== 'lg' ? this.text : '');
+    // `expandable` (disclosure widget signal) or `popup-type` (popup container
+    // signal) both require aria-expanded to always be present so screen
+    // readers know the current open/closed state. Without one of these, only
+    // open=true forwards aria-expanded — keeps plain buttons free of
+    // irrelevant ARIA attributes.
+    const isDisclosure = this.expandable || !!this.popupType;
+    const ariaExpanded = isDisclosure ? String(this.expanded) : (this.expanded ? 'true' : nothing);
     const renderButton = () => {
         if (this.href) {
             const resolvedRel = this._resolvedRel();
@@ -35,6 +42,8 @@ export function template() {
 					rel=${resolvedRel || nothing}
 					aria-disabled=${this.disabled ? 'true' : nothing}
 					aria-label=${label}
+					aria-haspopup=${this.popupType || nothing}
+					aria-expanded=${ariaExpanded}
 					@click=${this._handleClick}
 				>
 					${content}
@@ -47,6 +56,8 @@ export function template() {
 				?disabled=${this.disabled}
 				aria-disabled=${this.disabled ? 'true' : nothing}
 				aria-label=${label}
+				aria-haspopup=${this.popupType || nothing}
+				aria-expanded=${ariaExpanded}
 				popovertarget=${this.popovertarget || nothing}
 				@click=${this._handleClick}
 			>

package/dist/components/actions/icon-button/icon-button.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.template.js","sourceRoot":"","sources":["../../../../src/components/actions/icon-button/icon-button.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAEpC,OAAO,kCAAkC,CAAC;AAE1C,SAAS,aAAa,CAAC,SAAyB;IAC/C,OAAO,IAAI,CAAA;;;MAGN,SAAS,CAAC,IAAI;QACf,CAAC,CAAC,IAAI,CAAA,mBAAmB,SAAS,CAAC,IAAI,eAAe;QACtD,CAAC,CAAC,IAAI,CAAA,iCAAiC,SAAS,CAAC,aAAa,UAAU;;KAExE,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAA;;;;IAI5B,CAAC,CAAC,CAAC,OAAO;;IAEV,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;qCACY,SAAS,CAAC,IAAI;GAChD,CAAC,CAAC,CAAC,EAAE;EACN,CAAC;AACH,CAAC;AAED,MAAM,UAAU,QAAQ;IACvB,MAAM,KAAK,GAAG,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,IAAI,IAAI,OAAO,CAAC;IAC3D,MAAM,OAAO,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IAEpC,2EAA2E;IAC3E,MAAM,WAAW,GAAG,IAAI,CAAC,eAAe;WACpC,CAAC,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAE1C,MAAM,YAAY,GAAG,GAAG,EAAE;QACzB,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACf,MAAM,WAAW,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;YACxC,OAAO,IAAI,CAAA;;YAEF,IAAI,CAAC,IAAI;cACP,IAAI,CAAC,MAAM,IAAI,OAAO;WACzB,WAAW,IAAI,OAAO;qBACZ,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;kBACnC,KAAK;cACT,IAAI,CAAC,YAAY;;OAExB,OAAO;;IAEV,CAAC;QACH,CAAC;QAED,OAAO,IAAI,CAAA;;WAEF,IAAI,CAAC,IAAI;gBACJ,IAAI,CAAC,QAAQ;oBACT,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;iBACnC,KAAK;oBACF,IAAI,CAAC,aAAa,IAAI,OAAO;aACpC,IAAI,CAAC,YAAY;;MAExB,OAAO;;GAEV,CAAC;IACH,CAAC,CAAC;IAEF,IAAI,WAAW,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;QACtC,OAAO,IAAI,CAAA;wBACW,WAAW;MAC7B,YAAY,EAAE;;GAEjB,CAAC;IACH,CAAC;IAED,OAAO,YAAY,EAAE,CAAC;AACvB,CAAC"}
+{"version":3,"file":"icon-button.template.js","sourceRoot":"","sources":["../../../../src/components/actions/icon-button/icon-button.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAEpC,OAAO,kCAAkC,CAAC;AAE1C,SAAS,aAAa,CAAC,SAAyB;IAC/C,OAAO,IAAI,CAAA;;;MAGN,SAAS,CAAC,IAAI;QACf,CAAC,CAAC,IAAI,CAAA,mBAAmB,SAAS,CAAC,IAAI,eAAe;QACtD,CAAC,CAAC,IAAI,CAAA,iCAAiC,SAAS,CAAC,aAAa,UAAU;;KAExE,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAA;;;;IAI5B,CAAC,CAAC,CAAC,OAAO;;IAEV,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;qCACY,SAAS,CAAC,IAAI;GAChD,CAAC,CAAC,CAAC,EAAE;EACN,CAAC;AACH,CAAC;AAED,MAAM,UAAU,QAAQ;IACvB,MAAM,KAAK,GAAG,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,IAAI,IAAI,OAAO,CAAC;IAC3D,MAAM,OAAO,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IAEpC,2EAA2E;IAC3E,MAAM,WAAW,GAAG,IAAI,CAAC,eAAe;WACpC,CAAC,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAE1C,2EAA2E;IAC3E,oEAAoE;IACpE,yEAAyE;IACzE,iEAAiE;IACjE,8BAA8B;IAC9B,MAAM,YAAY,GAAG,IAAI,CAAC,UAAU,IAAI,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC;IACzD,MAAM,YAAY,GAAG,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;IAE/F,MAAM,YAAY,GAAG,GAAG,EAAE;QACzB,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACf,MAAM,WAAW,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;YACxC,OAAO,IAAI,CAAA;;YAEF,IAAI,CAAC,IAAI;cACP,IAAI,CAAC,MAAM,IAAI,OAAO;WACzB,WAAW,IAAI,OAAO;qBACZ,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;kBACnC,KAAK;qBACF,IAAI,CAAC,SAAS,IAAI,OAAO;qBACzB,YAAY;cACnB,IAAI,CAAC,YAAY;;OAExB,OAAO;;IAEV,CAAC;QACH,CAAC;QAED,OAAO,IAAI,CAAA;;WAEF,IAAI,CAAC,IAAI;gBACJ,IAAI,CAAC,QAAQ;oBACT,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;iBACnC,KAAK;oBACF,IAAI,CAAC,SAAS,IAAI,OAAO;oBACzB,YAAY;oBACZ,IAAI,CAAC,aAAa,IAAI,OAAO;aACpC,IAAI,CAAC,YAAY;;MAExB,OAAO;;GAEV,CAAC;IACH,CAAC,CAAC;IAEF,IAAI,WAAW,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;QACtC,OAAO,IAAI,CAAA;wBACW,WAAW;MAC7B,YAAY,EAAE;;GAEjB,CAAC;IACH,CAAC;IAED,OAAO,YAAY,EAAE,CAAC;AACvB,CAAC"}

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

@@ -18,8 +18,8 @@ export function template() {
 				text=${this._t('components.split-button.menu-action')}
 				hide-tooltip
 				?disabled=${this.disabled}
-				aria-haspopup="menu"
-				aria-expanded=${this._hasMenuItems ? String(this._menuIsOpen) : nothing}
+				?expanded=${this._menuIsOpen}
+				popup-type="menu"
 				@click=${this._handleMenuClick}
 			></nldd-icon-button>
 		</div>