@nldd/design-system 0.8.42 → 0.8.43

package/README.md

@@ -51,7 +51,7 @@ npm run storybook
 | Attribuut          | Type    | Default          | Beschrijving                                                                                                                                             |
 | ------------------ | ------- | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `text`             | string  | `''`             | Tekst van de button                                                                                                                                      |
-| `variant`          | string  | `neutral-tinted` | `primary`, `secondary`, `destructive`, `accent-filled`, `accent-outlined`, `accent-transparent`, `neutral-tinted`, `neutral-transparent`, `critical-tinted` |
+| `variant`          | string  | `neutral-tinted` | `primary`, `secondary`, `destructive`, `accent-filled`, `accent-transparent`, `neutral-tinted`, `neutral-transparent`, `critical-tinted`, `critical-transparent` |
 | `size`             | string  | `md`             | `xs`, `sm`, `md`                                                                                                                                         |
 | `disabled`         | boolean | `false`          | Uitgeschakelde staat                                                                                                                                     |
 | `type`             | string  | `button`         | `button`, `submit`, `reset`                                                                                                                              |

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

@@ -2,13 +2,16 @@
  * Nederlandse Digitale Dienst Button Component (Lit + TypeScript)
  *
  * @element nldd-button
- * @attr {string} variant - Button variant: 'primary' | 'secondary' | 'destructive' | 'accent-filled' | 'accent-outlined' | 'accent-transparent' | 'neutral-tinted' | 'neutral-transparent' | 'critical-tinted'
+ * @attr {string} variant - Button variant: 'primary' | 'secondary' | 'destructive' | 'accent-filled' | 'accent-transparent' | 'neutral-tinted' | 'neutral-transparent' | 'critical-tinted' | 'critical-transparent'
  * @attr {string} size - Button size: 'xs' | 'sm' | 'md' (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 has a icon to indicate it opens a menu or popover
- * @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
+ * @attr {boolean} single-line - When true, truncates overflowing text with an ellipsis instead of letting it wrap. Requires the button (or an ancestor) to constrain the width.
  * @attr {string} start-icon - Icon name for the start icon (before text)
  * @attr {string} end-icon - Icon name for the end icon (after text)
  * @attr {string} accessible-label - Accessible label for the button, overrides text for screen readers
@@ -23,20 +26,30 @@
  */
 import { LitElement } from 'lit';
 import './../../content/icon/icon.js';
-type Variant = 'primary' | 'secondary' | 'destructive' | 'accent-filled' | 'accent-outlined' | 'accent-transparent' | 'neutral-tinted' | 'neutral-transparent' | 'critical-tinted';
+type Variant = 'primary' | 'secondary' | 'destructive' | 'accent-filled' | 'accent-transparent' | 'neutral-tinted' | 'neutral-transparent' | 'critical-tinted' | 'critical-transparent';
 type Size = 'xs' | 'sm' | 'md';
 type ButtonType = 'button' | 'submit' | 'reset';
+type PopupType = 'menu' | 'listbox' | 'dialog' | 'tree' | 'grid';
 export declare class NLDDButton extends LitElement {
     static styles: import("lit").CSSResult;
     variant: Variant;
     size: Size;
-    fullWidth: boolean;
+    /** Width mode: 'full' (stretch to container) or any CSS length. */
+    width: string;
     expandable: 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;
     type: ButtonType;
     popovertarget: string | undefined;
     disabled: boolean;
     /** Button text. */
     text: string;
+    singleLine: boolean;
     /** Icon name for the start icon (before text). When not set, the start-icon slot is used. */
     startIcon: string;
     /** Icon name for the end icon (after text). When not set, the end-icon slot is used. */
@@ -53,7 +66,7 @@ export declare class NLDDButton extends LitElement {
      */
     rel: string | undefined;
     private _warnedA11y;
-    updated(): void;
+    updated(changedProperties: Map<string, unknown>): void;
     private _handleClick;
     /** Resolves the effective rel value for link rendering. */
     _resolvedRel(): string;

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

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

@@ -2,13 +2,16 @@
  * Nederlandse Digitale Dienst Button Component (Lit + TypeScript)
  *
  * @element nldd-button
- * @attr {string} variant - Button variant: 'primary' | 'secondary' | 'destructive' | 'accent-filled' | 'accent-outlined' | 'accent-transparent' | 'neutral-tinted' | 'neutral-transparent' | 'critical-tinted'
+ * @attr {string} variant - Button variant: 'primary' | 'secondary' | 'destructive' | 'accent-filled' | 'accent-transparent' | 'neutral-tinted' | 'neutral-transparent' | 'critical-tinted' | 'critical-transparent'
  * @attr {string} size - Button size: 'xs' | 'sm' | 'md' (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 has a icon to indicate it opens a menu or popover
- * @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
+ * @attr {boolean} single-line - When true, truncates overflowing text with an ellipsis instead of letting it wrap. Requires the button (or an ancestor) to constrain the width.
  * @attr {string} start-icon - Icon name for the start icon (before text)
  * @attr {string} end-icon - Icon name for the end icon (after text)
  * @attr {string} accessible-label - Accessible label for the button, overrides text for screen readers
@@ -37,13 +40,16 @@ let NLDDButton = class NLDDButton extends LitElement {
         super(...arguments);
         this.variant = 'neutral-tinted';
         this.size = 'md';
-        this.fullWidth = false;
+        /** Width mode: 'full' (stretch to container) or any CSS length. */
+        this.width = '';
         this.expandable = false;
+        this.expanded = false;
         this.type = 'button';
         this.popovertarget = undefined;
         this.disabled = false;
         /** Button text. */
         this.text = '';
+        this.singleLine = false;
         /** Icon name for the start icon (before text). When not set, the start-icon slot is used. */
         this.startIcon = '';
         /** Icon name for the end icon (after text). When not set, the end-icon slot is used. */
@@ -61,7 +67,24 @@ let NLDDButton = class NLDDButton extends LitElement {
         this.rel = undefined;
         this._warnedA11y = false;
     }
-    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 inner shrink-to-fit. 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 isEmpty = !this.text && !this.accessibleLabel;
         if (import.meta.env?.DEV && isEmpty && !this._warnedA11y) {
             this._warnedA11y = true;
@@ -107,11 +130,17 @@ __decorate([
     property({ type: String, reflect: true })
 ], NLDDButton.prototype, "size", void 0);
 __decorate([
-    property({ type: Boolean, reflect: true, attribute: 'full-width' })
-], NLDDButton.prototype, "fullWidth", void 0);
+    property({ type: String, reflect: true })
+], NLDDButton.prototype, "width", void 0);
 __decorate([
     property({ type: Boolean, reflect: true, attribute: 'expandable' })
 ], NLDDButton.prototype, "expandable", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDButton.prototype, "expanded", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'popup-type' })
+], NLDDButton.prototype, "popupType", void 0);
 __decorate([
     property({ type: String, reflect: true })
 ], NLDDButton.prototype, "type", void 0);
@@ -124,6 +153,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], NLDDButton.prototype, "text", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'single-line' })
+], NLDDButton.prototype, "singleLine", void 0);
 __decorate([
     property({ type: String, attribute: 'start-icon' })
 ], NLDDButton.prototype, "startIcon", void 0);

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":"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"}

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":"AAEA,eAAO,MAAM,YAAY,yBA6TxB,CAAC"}
+{"version":3,"file":"button.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/button/button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,yBAmZxB,CAAC"}

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

@@ -5,11 +5,23 @@ export const buttonStyles = 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="sm"]) {
+		--_disclosure-icon-size: var(--primitives-space-18);
+	}
+
+	:host([size="xs"]) {
+		--_disclosure-icon-size: var(--primitives-space-16);
+	}
+
+	:host([width="full"]) {
 		display: block;
 		width: 100%;
 		flex-grow: 1;
@@ -39,7 +51,8 @@ export const buttonStyles = css `
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
-		width: 100%;
+		width: var(--_width);
+		max-width: 100%;
 		text-wrap: pretty;
 		transition:
 			background-color var(--primitives-transition-duration-fast) var(--primitives-transition-easing-default),
@@ -110,7 +123,9 @@ export const buttonStyles = css `
 
 	/* # Variants */
 
-	/* ## Variant: Neutral Tintend (Secondary, Default) */
+	/* ## Neutral Tintend (Secondary, Default) */
+
+	/* ### Default neutral tinted button */
 
 	:host([variant="neutral-tinted"]) .button,
 	:host([variant="secondary"]) .button,
@@ -119,6 +134,8 @@ export const buttonStyles = css `
 		color: var(--semantics-buttons-neutral-tinted-content-color);
 	}
 
+	/* ### Hovered neutral tinted button */
+
 	@media (hover: hover) {
 		:host([variant="neutral-tinted"]) .button:hover,
 		:host([variant="secondary"]) .button:hover,
@@ -128,6 +145,8 @@ export const buttonStyles = css `
 		}
 	}
 
+	/* ### Active neutral tinted button */
+
 	:host([variant="neutral-tinted"]) .button:active,
 	:host([variant="secondary"]) .button:active,
 	:host(:not([variant])) .button:active {
@@ -135,24 +154,61 @@ export const buttonStyles = css `
 		color: var(--semantics-buttons-neutral-tinted-is-active-content-color);
 	}
 
-	/* ## Variant: Neutral Transparent */
+	/* ### Open neutral tinted button */
+
+	:host([expanded][variant="neutral-tinted"]) .button,
+	:host([expanded][variant="secondary"]) .button,
+	:host([expanded]:not([variant])) .button {
+		background-color: var(--semantics-buttons-neutral-tinted-is-open-background-color);
+		color: var(--semantics-buttons-neutral-tinted-is-open-content-color);
+	}
+
+	/* ### Open hovered neutral tinted button */
+
+	@media (hover: hover) {
+		:host([expanded][variant="neutral-tinted"]) .button:hover,
+		:host([expanded][variant="secondary"]) .button:hover,
+		:host([expanded]:not([variant])) .button:hover {
+			background-color: var(--semantics-buttons-neutral-tinted-is-open-is-hovered-background-color);
+			color: var(--semantics-buttons-neutral-tinted-is-open-is-hovered-content-color);
+		}
+	}
+
+	/* ### Open active neutral tinted button */
+
+	:host([expanded][variant="neutral-tinted"]) .button:active,
+	:host([expanded][variant="secondary"]) .button:active,
+	:host([expanded]:not([variant])) .button:active {
+		background-color: var(--semantics-buttons-neutral-tinted-is-open-is-active-background-color);
+		color: var(--semantics-buttons-neutral-tinted-is-open-is-active-content-color);
+	}
+
+	/* ## Neutral Transparent */
+
+	/* ### Default neutral transparent button */
 
 	:host([variant="neutral-transparent"]) .button {
 		background-color: transparent;
 		color: var(--semantics-buttons-neutral-transparent-content-color);
 	}
 
+	/* ### Hovered neutral transparent button */
+
 	@media (hover: hover) {
 		:host([variant="neutral-transparent"]) .button:hover {
 			color: var(--semantics-buttons-neutral-transparent-is-hovered-content-color);
 		}
 	}
 
+	/* ### Active neutral transparent button */
+
 	:host([variant="neutral-transparent"]) .button:active {
 		color: var(--semantics-buttons-neutral-transparent-is-active-content-color);
 	}
 
-	/* ## Variant: Accent Filled (Primary) */
+	/* ## Accent Filled (Primary) */
+
+	/* ### Default accent filled button */
 
 	:host([variant="accent-filled"]) .button,
 	:host([variant="primary"]) .button {
@@ -160,6 +216,8 @@ export const buttonStyles = css `
 		color: var(--semantics-buttons-accent-filled-content-color);
 	}
 
+	/* ### Hovered accent filled button */
+
 	@media (hover: hover) {
 		:host([variant="accent-filled"]) .button:hover,
 		:host([variant="primary"]) .button:hover {
@@ -168,71 +226,66 @@ export const buttonStyles = css `
 		}
 	}
 
+	/* ### Active accent filled button */
+
 	:host([variant="accent-filled"]) .button:active,
 	:host([variant="primary"]) .button:active {
 		background-color: var(--semantics-buttons-accent-filled-is-active-background-color);
 		color: var(--semantics-buttons-accent-filled-is-active-content-color);
 	}
 
-	/* ## Variant: Accent Outlined */
-
-	:host([variant="accent-outlined"]) .button {
-		background-color: transparent;
-		padding: calc(var(--primitives-space-12) - var(--semantics-buttons-accent-outlined-border-thickness));
-		color: var(--semantics-buttons-accent-outlined-content-color);
-		border-width: var(--semantics-buttons-accent-outlined-border-thickness);
-		border-style: solid;
-		border-color: var(--semantics-buttons-accent-outlined-border-color);
-	}
-
-	:host([variant="accent-outlined"][size="md"]) .button {
-		padding: calc(var(--primitives-space-12) - var(--semantics-buttons-accent-outlined-border-thickness));
-	}
+	/* ### Open accent filled button */
 
-	:host([variant="accent-outlined"][size="sm"]) .button {
-		padding:
-			calc(var(--primitives-space-6) - var(--semantics-buttons-accent-outlined-border-thickness))
-			calc(var(--primitives-space-10) - var(--semantics-buttons-accent-outlined-border-thickness))
-		;
+	:host([expanded][variant="accent-filled"]) .button,
+	:host([expanded][variant="primary"]) .button {
+		background-color: var(--semantics-buttons-accent-filled-is-open-background-color);
+		color: var(--semantics-buttons-accent-filled-is-open-content-color);
 	}
 
-	:host([variant="accent-outlined"][size="xs"]) .button {
-		padding:
-			calc(var(--primitives-space-4) - var(--semantics-buttons-accent-outlined-border-thickness))
-			calc(var(--primitives-space-6) - var(--semantics-buttons-accent-outlined-border-thickness))
-		;
-	}
+	/* ### Open hovered accent filled button */
 
 	@media (hover: hover) {
-		:host([variant="accent-outlined"]) .button:hover {
-			color: var(--semantics-buttons-accent-outlined-is-hovered-content-color);
-			border-color: var(--semantics-buttons-accent-outlined-is-hovered-border-color);
+		:host([expanded][variant="accent-filled"]) .button:hover,
+		:host([expanded][variant="primary"]) .button:hover {
+			background-color: var(--semantics-buttons-accent-filled-is-open-is-hovered-background-color);
+			color: var(--semantics-buttons-accent-filled-is-open-is-hovered-content-color);
 		}
 	}
 
-	:host([variant="accent-outlined"]) .button:active {
-		color: var(--semantics-buttons-accent-outlined-is-active-content-color);
-		border-color: var(--semantics-buttons-accent-outlined-is-active-border-color);
+	/* ### Open active accent filled button */
+
+	:host([expanded][variant="accent-filled"]) .button:active,
+	:host([expanded][variant="primary"]) .button:active {
+		background-color: var(--semantics-buttons-accent-filled-is-open-is-active-background-color);
+		color: var(--semantics-buttons-accent-filled-is-open-is-active-content-color);
 	}
 
-	/* ## Variant: Accent Transparent */
+	/* ## Accent Transparent */
+
+	/* ### Default accent transparent button */
 
 	:host([variant="accent-transparent"]) .button {
 		background-color: transparent;
 		color: var(--semantics-buttons-accent-transparent-content-color);
 	}
 
+	/* ### Hovered accent transparent button */
+
 	@media (hover: hover) {
 		:host([variant="accent-transparent"]) .button:hover {
 			color: var(--semantics-buttons-accent-transparent-is-hovered-content-color);
 		}
 	}
 
+	/* ### Active accent transparent button */
+
 	:host([variant="accent-transparent"]) .button:active {
 		color: var(--semantics-buttons-accent-transparent-is-active-content-color);
 	}
 
-	/* ## Variant: Critical Tinted */
+	/* ## Critical Tinted */
+
+	/* ### Default critical tinted button */
 
 	:host([variant="critical-tinted"]) .button,
 	:host([variant="destructive"]) .button {
@@ -240,6 +293,8 @@ export const buttonStyles = css `
 		color: var(--semantics-buttons-critical-tinted-content-color);
 	}
 
+	/* ### Hovered critical tinted button */
+
 	@media (hover: hover) {
 		:host([variant="critical-tinted"]) .button:hover,
 		:host([variant="destructive"]) .button:hover {
@@ -248,12 +303,37 @@ export const buttonStyles = css `
 		}
 	}
 
+	/* ### Active critical tinted button */
+
 	:host([variant="critical-tinted"]) .button:active,
 	:host([variant="destructive"]) .button:active {
 		background-color: var(--semantics-buttons-critical-tinted-is-active-background-color);
 		color: var(--semantics-buttons-critical-tinted-is-active-content-color);
 	}
 
+	/* ## Critical Transparent */
+
+	/* ### Default critical transparent button */
+
+	:host([variant="critical-transparent"]) .button {
+		background-color: transparent;
+		color: var(--semantics-buttons-critical-transparent-content-color);
+	}
+
+	/* ### Hovered critical transparent button */
+
+	@media (hover: hover) {
+		:host([variant="critical-transparent"]) .button:hover {
+			color: var(--semantics-buttons-critical-transparent-is-hovered-content-color);
+		}
+	}
+
+	/* ### Active critical transparent button */
+
+	:host([variant="critical-transparent"]) .button:active {
+		color: var(--semantics-buttons-critical-transparent-is-active-content-color);
+	}
+
 	/* ## Elements */
 
 	.button__content {
@@ -264,6 +344,16 @@ export const buttonStyles = css `
 		display: none;
 	}
 
+	.button__text {
+		min-width: 0;
+	}
+
+	:host([single-line]) .button__text {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
 	.button__start-icon,
 	.button__end-icon {
 		display: block;
@@ -274,45 +364,41 @@ export const buttonStyles = css `
 	:host(:not([size])) .button__start-icon,
 	:host([size="md"]) .button__end-icon,
 	:host(:not([size])) .button__end-icon {
-		width: var(--primitives-space-20);
-		height: var(--primitives-space-20);
+		width: var(--semantics-buttons-md-icon-size);
+		height: var(--semantics-buttons-md-icon-size);
 	}
 
 	:host([size="sm"]) .button__start-icon,
 	:host([size="sm"]) .button__end-icon {
-		width: var(--primitives-space-18);
-		height: var(--primitives-space-18);
+		width: var(--semantics-buttons-sm-icon-size);
+		height: var(--semantics-buttons-sm-icon-size);
 	}
 
 	:host([size="xs"]) .button__start-icon,
 	:host([size="xs"]) .button__end-icon {
-		width: var(--primitives-space-16);
-		height: var(--primitives-space-16);
+		width: var(--semantics-buttons-xs-icon-size);
+		height: var(--semantics-buttons-xs-icon-size);
 	}
 
 	.button__disclosure-icon {
 		display: block;
 		flex-shrink: 0;
+		width: var(--_disclosure-icon-size);
+		height: var(--_disclosure-icon-size);
 	}
 
 	:host([size="md"]) .button__disclosure-icon,
 	:host(:not([size])) .button__disclosure-icon {
-		width: var(--primitives-space-20);
-		height: var(--primitives-space-20);
 		margin-left: -2px;
 		margin-right: -2px;
 	}
 
 	:host([size="sm"]) .button__disclosure-icon {
-		width: var(--primitives-space-18);
-		height: var(--primitives-space-18);
 		margin-left: -1px;
 		margin-right: -2px;
 	}
 
 	:host([size="xs"]) .button__disclosure-icon {
-		width: var(--primitives-space-16);
-		height: var(--primitives-space-16);
 		margin-left: -1px;
 		margin-right: -2px;
 	}

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;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6T9B,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;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmZ9B,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;AAyBD,wBAAgB,QAAQ,CAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,eAAe,wCA+BlE"}
+{"version":3,"file":"button.template.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/button/button.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C,UAAU,eAAe;IACxB,WAAW,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CACrC;AAyBD,wBAAgB,QAAQ,CAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,eAAe,wCA2ClE"}

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

@@ -7,7 +7,7 @@ function renderContent(component) {
 					name=${component.startIcon}
 				></nldd-icon>
 			` : html `<slot name="start-icon"></slot>`}
-			${component.text}
+			<span class="button__text">${component.text}</span>
 			${component.endIcon ? html `
 				<nldd-icon class="button__end-icon"
 					name=${component.endIcon}
@@ -23,6 +23,13 @@ function renderContent(component) {
 }
 export function template(helpers) {
     const content = renderContent(this);
+    // `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);
     if (this.href) {
         const resolvedRel = this._resolvedRel();
         return html `
@@ -32,6 +39,8 @@ export function template(helpers) {
 				rel=${resolvedRel || nothing}
 				aria-disabled=${this.disabled ? 'true' : nothing}
 				aria-label=${this.accessibleLabel || nothing}
+				aria-haspopup=${this.popupType || nothing}
+				aria-expanded=${ariaExpanded}
 				@click=${helpers.handleClick}
 			>
 				${content}
@@ -44,6 +53,8 @@ export function template(helpers) {
 			?disabled=${this.disabled}
 			aria-disabled=${this.disabled ? 'true' : nothing}
 			aria-label=${this.accessibleLabel || nothing}
+			aria-haspopup=${this.popupType || nothing}
+			aria-expanded=${ariaExpanded}
 			popovertarget=${this.popovertarget || nothing}
 			@click=${helpers.handleClick}
 		>

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

@@ -1 +1 @@
-{"version":3,"file":"button.template.js","sourceRoot":"","sources":["../../../../src/components/actions/button/button.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAOpC,SAAS,aAAa,CAAC,SAAqB;IAC3C,OAAO,IAAI,CAAA;;KAEP,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAA;;YAEnB,SAAS,CAAC,SAAS;;IAE3B,CAAC,CAAC,CAAC,IAAI,CAAA,iCAAiC;KACvC,SAAS,CAAC,IAAI;KACd,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAA;;YAEjB,SAAS,CAAC,OAAO;;IAEzB,CAAC,CAAC,CAAC,IAAI,CAAA,+BAA+B;KACrC,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAA;;;;IAI5B,CAAC,CAAC,CAAC,OAAO;;EAEZ,CAAC;AACH,CAAC;AAED,MAAM,UAAU,QAAQ,CAAmB,OAAwB;IAClE,MAAM,OAAO,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IAEpC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;QACf,MAAM,WAAW,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;QACxC,OAAO,IAAI,CAAA;;WAEF,IAAI,CAAC,IAAI;aACP,IAAI,CAAC,MAAM,IAAI,OAAO;UACzB,WAAW,IAAI,OAAO;oBACZ,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;iBACnC,IAAI,CAAC,eAAe,IAAI,OAAO;aACnC,OAAO,CAAC,WAAW;;MAE1B,OAAO;;GAEV,CAAC;IACH,CAAC;IAED,OAAO,IAAI,CAAA;;UAEF,IAAI,CAAC,IAAI;eACJ,IAAI,CAAC,QAAQ;mBACT,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;gBACnC,IAAI,CAAC,eAAe,IAAI,OAAO;mBAC5B,IAAI,CAAC,aAAa,IAAI,OAAO;YACpC,OAAO,CAAC,WAAW;;KAE1B,OAAO;;EAEV,CAAC;AACH,CAAC"}
+{"version":3,"file":"button.template.js","sourceRoot":"","sources":["../../../../src/components/actions/button/button.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAOpC,SAAS,aAAa,CAAC,SAAqB;IAC3C,OAAO,IAAI,CAAA;;KAEP,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAA;;YAEnB,SAAS,CAAC,SAAS;;IAE3B,CAAC,CAAC,CAAC,IAAI,CAAA,iCAAiC;gCACZ,SAAS,CAAC,IAAI;KACzC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAA;;YAEjB,SAAS,CAAC,OAAO;;IAEzB,CAAC,CAAC,CAAC,IAAI,CAAA,+BAA+B;KACrC,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAA;;;;IAI5B,CAAC,CAAC,CAAC,OAAO;;EAEZ,CAAC;AACH,CAAC;AAED,MAAM,UAAU,QAAQ,CAAmB,OAAwB;IAClE,MAAM,OAAO,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IAEpC,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,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;QACf,MAAM,WAAW,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;QACxC,OAAO,IAAI,CAAA;;WAEF,IAAI,CAAC,IAAI;aACP,IAAI,CAAC,MAAM,IAAI,OAAO;UACzB,WAAW,IAAI,OAAO;oBACZ,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;iBACnC,IAAI,CAAC,eAAe,IAAI,OAAO;oBAC5B,IAAI,CAAC,SAAS,IAAI,OAAO;oBACzB,YAAY;aACnB,OAAO,CAAC,WAAW;;MAE1B,OAAO;;GAEV,CAAC;IACH,CAAC;IAED,OAAO,IAAI,CAAA;;UAEF,IAAI,CAAC,IAAI;eACJ,IAAI,CAAC,QAAQ;mBACT,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;gBACnC,IAAI,CAAC,eAAe,IAAI,OAAO;mBAC5B,IAAI,CAAC,SAAS,IAAI,OAAO;mBACzB,YAAY;mBACZ,IAAI,CAAC,aAAa,IAAI,OAAO;YACpC,OAAO,CAAC,WAAW;;KAE1B,OAAO;;EAEV,CAAC;AACH,CAAC"}

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

@@ -38,10 +38,10 @@ let NLDDButtonGroup = class NLDDButtonGroup extends LitElement {
                     console.warn('nldd-button-group: Only 3 buttons are allowed. Extra buttons will be hidden.');
             }
             if (this.orientation === 'vertical') {
-                el.setAttribute('full-width', '');
+                el.setAttribute('width', 'full');
             }
             else {
-                el.removeAttribute('full-width');
+                el.removeAttribute('width');
             }
             el.setAttribute('size', this.size);
         });

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

@@ -1 +1 @@
-{"version":3,"file":"button-group.js","sourceRoot":"","sources":["../../../../src/components/actions/button-group/button-group.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;GAYG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAM/C,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;QAIN,SAAI,GAAS,IAAI,CAAC;QAGlB,gBAAW,GAAgB,UAAU,CAAC;IAmCvC,CAAC;IA9BA,gBAAgB;QACf,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK;aACzB,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;aACnC,MAAM,CAAC,CAAC,EAAE,EAAqB,EAAE,CAAC,EAAE,YAAY,WAAW,CAAC,CAAC;QAE/D,QAAQ,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE;YAC9B,IAAI,KAAK,IAAI,CAAC,EAAE,CAAC;gBAChB,EAAE,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;gBAC9B,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG;oBAAE,OAAO,CAAC,IAAI,CAAC,8EAA8E,CAAC,CAAC;YACxH,CAAC;YAED,IAAI,IAAI,CAAC,WAAW,KAAK,UAAU,EAAE,CAAC;gBACrC,EAAE,CAAC,YAAY,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;YACnC,CAAC;iBAAM,CAAC;gBACP,EAAE,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC;YAClC,CAAC;YAED,EAAE,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;QACpC,CAAC,CAAC,CAAC;IACJ,CAAC;IAEQ,OAAO,CAAC,iBAAuC;QACvD,IAAI,iBAAiB,CAAC,GAAG,CAAC,aAAa,CAAC,IAAI,iBAAiB,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC;YAC3E,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACzB,CAAC;IACF,CAAC;IAEQ,MAAM;QACd,OAAO,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC5B,CAAC;;AAxCe,sBAAM,GAAG,iBAAiB,AAApB,CAAqB;AAG3C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CACxB;AAGlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oDACJ;AAG9B;IADP,KAAK,CAAC,MAAM,CAAC;8CACkB;AAVpB,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CA0C3B"}
+{"version":3,"file":"button-group.js","sourceRoot":"","sources":["../../../../src/components/actions/button-group/button-group.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;GAYG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAM/C,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;QAIN,SAAI,GAAS,IAAI,CAAC;QAGlB,gBAAW,GAAgB,UAAU,CAAC;IAmCvC,CAAC;IA9BA,gBAAgB;QACf,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK;aACzB,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;aACnC,MAAM,CAAC,CAAC,EAAE,EAAqB,EAAE,CAAC,EAAE,YAAY,WAAW,CAAC,CAAC;QAE/D,QAAQ,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE;YAC9B,IAAI,KAAK,IAAI,CAAC,EAAE,CAAC;gBAChB,EAAE,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;gBAC9B,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG;oBAAE,OAAO,CAAC,IAAI,CAAC,8EAA8E,CAAC,CAAC;YACxH,CAAC;YAED,IAAI,IAAI,CAAC,WAAW,KAAK,UAAU,EAAE,CAAC;gBACrC,EAAE,CAAC,YAAY,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;YAClC,CAAC;iBAAM,CAAC;gBACP,EAAE,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;YAC7B,CAAC;YAED,EAAE,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;QACpC,CAAC,CAAC,CAAC;IACJ,CAAC;IAEQ,OAAO,CAAC,iBAAuC;QACvD,IAAI,iBAAiB,CAAC,GAAG,CAAC,aAAa,CAAC,IAAI,iBAAiB,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC;YAC3E,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACzB,CAAC;IACF,CAAC;IAEQ,MAAM;QACd,OAAO,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC5B,CAAC;;AAxCe,sBAAM,GAAG,iBAAiB,AAApB,CAAqB;AAG3C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CACxB;AAGlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oDACJ;AAG9B;IADP,KAAK,CAAC,MAAM,CAAC;8CACkB;AAVpB,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CA0C3B"}