@nldd/design-system 0.8.92 → 0.8.94

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

@@ -2,12 +2,17 @@
  * Nederlandse Digitale Dienst Button Bar Component (Lit + TypeScript)
  *
  * A horizontal container for grouping buttons with a neutral background.
- * Automatically propagates its size and variant to all child nldd-button and nldd-icon-button elements.
+ * Automatically propagates its size and appearance to all child nldd-button and nldd-icon-button elements.
  * Renders nldd-button-bar-divider elements as internal dividers — no separate component needed.
  *
+ * The bar is one surface for actions; on/off buttons do not go in it. For a row
+ * of toggles use nldd-toggle-button-group, and for one choice out of a few
+ * options on one surface nldd-segmented-control. An nldd-toggle-button placed
+ * here is shown as it is, and a warning says so in development.
+ *
  * @element nldd-button-bar
  * @attr {string} size - Bar size: 'xs' | 'sm' | 'md' | 'lg' (default: 'md'). At 'lg', icon-button children stack their label below the icon (mobile action-bar style).
- * @attr {string} variant - Button variant (default: 'neutral-tinted')
+ * @attr {string} appearance - Visual style of the buttons (default: 'neutral-tinted'; 'inherit-tinted' and 'inherit-filled' for a colored surface)
  * @attr {boolean} disabled - Disabled state
  *
  * @slot - Default slot for nldd-button, nldd-icon-button and nldd-button-bar-divider elements
@@ -27,7 +32,7 @@ export type BarChild = {
 export declare class NLDDButtonBar extends LitElement {
     static styles: import("lit").CSSResult;
     size: Size;
-    variant: string;
+    appearance: string;
     disabled: boolean;
     _children: BarChild[];
     private _idCounter;
@@ -40,9 +45,11 @@ export declare class NLDDButtonBar extends LitElement {
     private _handleFocusIn;
     private _handleFocusOut;
     private _propagateSize;
-    private _propagateVariant;
+    private _propagateAppearance;
     private _propagateDisabled;
     private _buildChildren;
+    private _warnedToggleButton;
+    private _warnToggleButton;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

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

@@ -1 +1 @@
-{"version":3,"file":"button-bar.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/button-bar/button-bar.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAgBjC,MAAM,MAAM,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE7C,MAAM,MAAM,QAAQ,GACjB;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,GAC/B;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,OAAO,EAAE,OAAO,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,CAAC;AAIpD,qBACa,aAAc,SAAQ,UAAU;IAC5C,OAAgB,MAAM,0BAAmB;IAGzC,IAAI,EAAE,IAAI,CAAQ;IAGlB,OAAO,EAAE,MAAM,CAAoB;IAGnC,QAAQ,UAAS;IAGjB,SAAS,EAAE,QAAQ,EAAE,CAAM;IAE3B,OAAO,CAAC,UAAU,CAAK;IACvB,OAAO,CAAC,SAAS,CAAiC;IAClD,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,qBAAqB,CAA0B;IAE9C,iBAAiB,IAAI,IAAI;IASzB,oBAAoB,IAAI,IAAI;IAQ5B,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAiB/D,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,iBAAiB;IAMzB,OAAO,CAAC,kBAAkB;IAsB1B,OAAO,CAAC,cAAc;IA8Bb,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,iBAAiB,EAAE,aAAa,CAAC;QACjC,yBAAyB,EAAE,WAAW,CAAC;KACvC;CACD"}
+{"version":3,"file":"button-bar.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/button-bar/button-bar.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAgBjC,MAAM,MAAM,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE7C,MAAM,MAAM,QAAQ,GACjB;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,GAC/B;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,OAAO,EAAE,OAAO,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,CAAC;AAIpD,qBACa,aAAc,SAAQ,UAAU;IAC5C,OAAgB,MAAM,0BAAmB;IAGzC,IAAI,EAAE,IAAI,CAAQ;IAGlB,UAAU,EAAE,MAAM,CAAoB;IAGtC,QAAQ,UAAS;IAGjB,SAAS,EAAE,QAAQ,EAAE,CAAM;IAE3B,OAAO,CAAC,UAAU,CAAK;IACvB,OAAO,CAAC,SAAS,CAAiC;IAClD,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,qBAAqB,CAA0B;IAE9C,iBAAiB,IAAI,IAAI;IASzB,oBAAoB,IAAI,IAAI;IAQ5B,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAiB/D,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,oBAAoB;IAM5B,OAAO,CAAC,kBAAkB;IAsB1B,OAAO,CAAC,cAAc;IAgCtB,OAAO,CAAC,mBAAmB,CAAS;IAEpC,OAAO,CAAC,iBAAiB;IAUhB,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,iBAAiB,EAAE,aAAa,CAAC;QACjC,yBAAyB,EAAE,WAAW,CAAC;KACvC;CACD"}

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

@@ -8,12 +8,17 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  * Nederlandse Digitale Dienst Button Bar Component (Lit + TypeScript)
  *
  * A horizontal container for grouping buttons with a neutral background.
- * Automatically propagates its size and variant to all child nldd-button and nldd-icon-button elements.
+ * Automatically propagates its size and appearance to all child nldd-button and nldd-icon-button elements.
  * Renders nldd-button-bar-divider elements as internal dividers — no separate component needed.
  *
+ * The bar is one surface for actions; on/off buttons do not go in it. For a row
+ * of toggles use nldd-toggle-button-group, and for one choice out of a few
+ * options on one surface nldd-segmented-control. An nldd-toggle-button placed
+ * here is shown as it is, and a warning says so in development.
+ *
  * @element nldd-button-bar
  * @attr {string} size - Bar size: 'xs' | 'sm' | 'md' | 'lg' (default: 'md'). At 'lg', icon-button children stack their label below the icon (mobile action-bar style).
- * @attr {string} variant - Button variant (default: 'neutral-tinted')
+ * @attr {string} appearance - Visual style of the buttons (default: 'neutral-tinted'; 'inherit-tinted' and 'inherit-filled' for a colored surface)
  * @attr {boolean} disabled - Disabled state
  *
  * @slot - Default slot for nldd-button, nldd-icon-button and nldd-button-bar-divider elements
@@ -40,13 +45,14 @@ let NLDDButtonBar = class NLDDButtonBar extends LitElement {
     constructor() {
         super(...arguments);
         this.size = 'md';
-        this.variant = 'neutral-tinted';
+        this.appearance = 'neutral-tinted';
         this.disabled = false;
         this._children = [];
         this._idCounter = 0;
         this._observer = null;
         this._building = false;
         this._individuallyDisabled = new WeakSet();
+        this._warnedToggleButton = false;
     }
     connectedCallback() {
         super.connectedCallback();
@@ -67,8 +73,8 @@ let NLDDButtonBar = class NLDDButtonBar extends LitElement {
         if (changedProperties.has('size') || changedProperties.has('_children')) {
             this._propagateSize();
         }
-        if (changedProperties.has('variant') || changedProperties.has('_children')) {
-            this._propagateVariant();
+        if (changedProperties.has('appearance') || changedProperties.has('_children')) {
+            this._propagateAppearance();
         }
         if (changedProperties.has('disabled')) {
             this._propagateDisabled();
@@ -97,10 +103,10 @@ let NLDDButtonBar = class NLDDButtonBar extends LitElement {
             .filter(el => BUTTON_TAGS.includes(el.tagName.toLowerCase()))
             .forEach(el => el.setAttribute('size', this.size));
     }
-    _propagateVariant() {
+    _propagateAppearance() {
         Array.from(this.children)
             .filter(el => BUTTON_TAGS.includes(el.tagName.toLowerCase()))
-            .forEach(el => el.setAttribute('variant', this.variant));
+            .forEach(el => el.setAttribute('appearance', this.appearance));
     }
     _propagateDisabled() {
         const buttons = Array.from(this.children).filter(el => BUTTON_TAGS.includes(el.tagName.toLowerCase()));
@@ -131,9 +137,11 @@ let NLDDButtonBar = class NLDDButtonBar extends LitElement {
             if (tag === 'nldd-button-bar-divider') {
                 return { type: 'divider', id: this._idCounter++ };
             }
+            if (tag === 'nldd-toggle-button')
+                this._warnToggleButton();
             if (BUTTON_TAGS.includes(tag)) {
                 el.setAttribute('size', this.size);
-                el.setAttribute('variant', this.variant);
+                el.setAttribute('appearance', this.appearance);
                 // The bar draws one group border (.button-bar::after); children drop theirs.
                 el.setAttribute('no-highlight-border', '');
             }
@@ -146,6 +154,14 @@ let NLDDButtonBar = class NLDDButtonBar extends LitElement {
         });
         this._building = false;
     }
+    _warnToggleButton() {
+        if (!import.meta.env?.DEV || this._warnedToggleButton)
+            return;
+        this._warnedToggleButton = true;
+        console.warn('<nldd-button-bar>: nldd-toggle-button is not supported here. The bar is one surface for actions, '
+            + 'and a selected toggle breaks it. Use nldd-toggle-button-group for a row of toggles, '
+            + 'or nldd-segmented-control for one choice out of a few options.');
+    }
     render() {
         return template.call(this);
     }
@@ -156,7 +172,7 @@ __decorate([
 ], NLDDButtonBar.prototype, "size", void 0);
 __decorate([
     property({ reflect: true, converter: reflectNonDefault('neutral-tinted') })
-], NLDDButtonBar.prototype, "variant", void 0);
+], NLDDButtonBar.prototype, "appearance", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NLDDButtonBar.prototype, "disabled", void 0);

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"button-bar.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/button-bar/button-bar.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,yBA+G3B,CAAC"}
+{"version":3,"file":"button-bar.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/button-bar/button-bar.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,yBA8H3B,CAAC"}

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

@@ -39,19 +39,34 @@ export const buttonBarStyles = css `
 
 	/* ## Accent Filled (Primary) */
 
-	:host([variant="accent-filled"]),
-	:host([variant="primary"]) {
+	:host([appearance="accent-filled"]),
+	:host([appearance="primary"]) {
 		--_background-color: var(--semantics-buttons-accent-filled-background-color);
 		--_divider-color: var(--semantics-buttons-accent-filled-divider-color);
 		--_highlight-border-color: var(--semantics-buttons-accent-filled-highlight-border-color);
 	}
 
-	:host([variant="neutral-base"]) {
+	:host([appearance="neutral-base"]) {
 		--_background-color: var(--semantics-buttons-neutral-base-background-color);
 		--_divider-color: var(--semantics-buttons-neutral-base-divider-color);
 		--_highlight-border-color: var(--semantics-buttons-neutral-base-highlight-border-color);
 	}
 
+	/* ## On-color */
+
+	:host([appearance="inherit-tinted"]) {
+		--_background-color: var(--semantics-buttons-inherit-tinted-background-color);
+		--_divider-color: var(--semantics-buttons-inherit-tinted-divider-color);
+		--_highlight-border-color: var(--semantics-buttons-inherit-tinted-highlight-border-color);
+		--context-button-background-color: transparent;
+	}
+
+	:host([appearance="inherit-filled"]) {
+		--_background-color: var(--semantics-buttons-inherit-filled-background-color);
+		--_divider-color: var(--semantics-buttons-inherit-filled-divider-color);
+		--_highlight-border-color: var(--semantics-buttons-inherit-filled-highlight-border-color);
+	}
+
 	:host([hidden]) {
 		display: none;
 	}

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

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

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

@@ -1,11 +1,28 @@
 /**
  * Nederlandse Digitale Dienst Button Group Component (Lit + TypeScript)
  *
- * A container for grouping related buttons together, either horizontally or vertically.
+ * A container for grouping related buttons together, in a row or stacked.
+ *
+ * `auto`, the default, is a row on a container wide enough for one and a stack
+ * over the full width below the sm breakpoint, where two labels beside each
+ * other leave no room for either. The group is its own container, so it follows
+ * the width it was given rather than the width of the window: the same group is
+ * a row in a page and a stack in a sheet beside it.
+ *
+ * Being a container has one consequence to know: the width has to come from the
+ * parent, since a container may not size itself from what is inside it. In a
+ * parent that shrink-wraps its content (an inline-flex box, a float, a table
+ * cell, a flex item at `width: auto`) the group measures zero and its buttons
+ * are invisible. It says so once in development. Give the group or that parent
+ * a width.
+ *
+ * A stack fills the width with its buttons, except an `nldd-icon-button`, which
+ * keeps its own size: a bar with a single glyph in the middle is not a bigger
+ * target, only a wider one.
  *
  * @element nldd-button-group
  * @attr {string} size - Button group size: 'sm' | 'md' (default: 'md')
- * @attr {string} orientation - Layout direction: 'horizontal' | 'vertical' (default: 'vertical')
+ * @attr {string} orientation - Layout direction: 'auto' | 'horizontal' | 'vertical' (default: 'auto')
  *
  * @slot - Default slot for buttons (max 3)
  *
@@ -13,14 +30,42 @@
  */
 import { LitElement } from 'lit';
 type Size = 'sm' | 'md';
-type Orientation = 'horizontal' | 'vertical';
+type Orientation = 'auto' | 'horizontal' | 'vertical';
 export declare class NLDDButtonGroup extends LitElement {
     static styles: import("lit").CSSResult;
     size: Size;
     orientation: Orientation;
     private _slot;
+    /** DEV only: watches for the collapse below, then lets itself go. */
+    private _collapseObserver;
+    /** Timer holding a zero-width reading before it counts as a verdict. */
+    private _collapseVerdict;
     handleSlotChange(): void;
     updated(changedProperties: Map<string, unknown>): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * The group is an inline-size container while `orientation` is `auto`, so its
+     * width has to come from its parent: a container may not size itself from its
+     * own contents. In a parent that shrink-wraps (inline-flex, a float, a table
+     * cell, a flex item at `width: auto`) there is nothing to take, the group
+     * measures zero and the buttons disappear without an error.
+     *
+     * Watched rather than sampled: a group can be in a closed sheet or behind
+     * `display: none` on its first frame, and a parent can get its width a tick
+     * later, so one look would call both of those a collapse or miss the real
+     * one. The observer waits for the group to be displayed, says it once and
+     * stops watching either way. It starts again when the group is reconnected
+     * somewhere else or when `orientation` turns to `auto`, since both change
+     * the answer.
+     *
+     * A zero reading waits before it counts: a parent can hand over its width a
+     * frame or two after the first paint, and that looks exactly like a collapse
+     * until it does. Only a zero that is still zero when the timer runs out gets
+     * said out loud.
+     */
+    private _watchForCollapse;
+    private _stopWatchingForCollapse;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

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

@@ -1 +1 @@
-{"version":3,"file":"button-group.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/button-group/button-group.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAMjC,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACxB,KAAK,WAAW,GAAG,YAAY,GAAG,UAAU,CAAC;AAE7C,qBACa,eAAgB,SAAQ,UAAU;IAC9C,OAAgB,MAAM,0BAAqB;IAG3C,IAAI,EAAE,IAAI,CAAQ;IAGlB,WAAW,EAAE,WAAW,CAAc;IAGtC,OAAO,CAAC,KAAK,CAAmB;IAEhC,gBAAgB;IAqBP,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAM/C,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,eAAe,CAAC;KACrC;CACD"}
+{"version":3,"file":"button-group.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/button-group/button-group.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAMjC,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACxB,KAAK,WAAW,GAAG,MAAM,GAAG,YAAY,GAAG,UAAU,CAAC;AAEtD,qBACa,eAAgB,SAAQ,UAAU;IAC9C,OAAgB,MAAM,0BAAqB;IAG3C,IAAI,EAAE,IAAI,CAAQ;IAGlB,WAAW,EAAE,WAAW,CAAU;IAGlC,OAAO,CAAC,KAAK,CAAmB;IAEhC,qEAAqE;IACrE,OAAO,CAAC,iBAAiB,CAA+B;IACxD,wEAAwE;IACxE,OAAO,CAAC,gBAAgB,CAAK;IAE7B,gBAAgB;IAeP,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAO/C,iBAAiB,IAAI,IAAI;IAOzB,oBAAoB,IAAI,IAAI;IAKrC;;;;;;;;;;;;;;;;;;;OAmBG;IACH,OAAO,CAAC,iBAAiB;IAgCzB,OAAO,CAAC,wBAAwB;IAOvB,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,eAAe,CAAC;KACrC;CACD"}

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

@@ -7,11 +7,28 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 /**
  * Nederlandse Digitale Dienst Button Group Component (Lit + TypeScript)
  *
- * A container for grouping related buttons together, either horizontally or vertically.
+ * A container for grouping related buttons together, in a row or stacked.
+ *
+ * `auto`, the default, is a row on a container wide enough for one and a stack
+ * over the full width below the sm breakpoint, where two labels beside each
+ * other leave no room for either. The group is its own container, so it follows
+ * the width it was given rather than the width of the window: the same group is
+ * a row in a page and a stack in a sheet beside it.
+ *
+ * Being a container has one consequence to know: the width has to come from the
+ * parent, since a container may not size itself from what is inside it. In a
+ * parent that shrink-wraps its content (an inline-flex box, a float, a table
+ * cell, a flex item at `width: auto`) the group measures zero and its buttons
+ * are invisible. It says so once in development. Give the group or that parent
+ * a width.
+ *
+ * A stack fills the width with its buttons, except an `nldd-icon-button`, which
+ * keeps its own size: a bar with a single glyph in the middle is not a bigger
+ * target, only a wider one.
  *
  * @element nldd-button-group
  * @attr {string} size - Button group size: 'sm' | 'md' (default: 'md')
- * @attr {string} orientation - Layout direction: 'horizontal' | 'vertical' (default: 'vertical')
+ * @attr {string} orientation - Layout direction: 'auto' | 'horizontal' | 'vertical' (default: 'auto')
  *
  * @slot - Default slot for buttons (max 3)
  *
@@ -26,7 +43,11 @@ let NLDDButtonGroup = class NLDDButtonGroup extends LitElement {
     constructor() {
         super(...arguments);
         this.size = 'md';
-        this.orientation = 'vertical';
+        this.orientation = 'auto';
+        /** DEV only: watches for the collapse below, then lets itself go. */
+        this._collapseObserver = null;
+        /** Timer holding a zero-width reading before it counts as a verdict. */
+        this._collapseVerdict = 0;
     }
     handleSlotChange() {
         const assigned = this._slot
@@ -38,19 +59,91 @@ let NLDDButtonGroup = class NLDDButtonGroup extends LitElement {
                 if (import.meta.env?.DEV)
                     console.warn('nldd-button-group: Only 3 buttons are allowed. Extra buttons will be hidden.');
             }
-            if (this.orientation === 'vertical') {
-                el.setAttribute('width', 'full');
-            }
-            else {
-                el.removeAttribute('width');
-            }
             el.setAttribute('size', this.size);
         });
     }
     updated(changedProperties) {
-        if (changedProperties.has('orientation') || changedProperties.has('size')) {
+        if (changedProperties.has('size'))
             this.handleSlotChange();
+        // Switching to auto makes the group a container after the fact, so the
+        // question it can then fail is only worth asking from here on.
+        if (changedProperties.has('orientation'))
+            this._watchForCollapse();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // Also on reconnect: a group that moves takes a new parent with it, and
+        // that parent decides whether there is a width to take.
+        this._watchForCollapse();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._stopWatchingForCollapse();
+    }
+    /**
+     * The group is an inline-size container while `orientation` is `auto`, so its
+     * width has to come from its parent: a container may not size itself from its
+     * own contents. In a parent that shrink-wraps (inline-flex, a float, a table
+     * cell, a flex item at `width: auto`) there is nothing to take, the group
+     * measures zero and the buttons disappear without an error.
+     *
+     * Watched rather than sampled: a group can be in a closed sheet or behind
+     * `display: none` on its first frame, and a parent can get its width a tick
+     * later, so one look would call both of those a collapse or miss the real
+     * one. The observer waits for the group to be displayed, says it once and
+     * stops watching either way. It starts again when the group is reconnected
+     * somewhere else or when `orientation` turns to `auto`, since both change
+     * the answer.
+     *
+     * A zero reading waits before it counts: a parent can hand over its width a
+     * frame or two after the first paint, and that looks exactly like a collapse
+     * until it does. Only a zero that is still zero when the timer runs out gets
+     * said out loud.
+     */
+    _watchForCollapse() {
+        if (!import.meta.env?.DEV)
+            return;
+        if (this.orientation !== 'auto') {
+            this._stopWatchingForCollapse();
+            return;
         }
+        if (this._collapseObserver)
+            return;
+        this._collapseObserver = new ResizeObserver(() => {
+            // No box at all (display:none, a closed sheet): nothing to judge yet.
+            // Client rects rather than offsetParent: that is null for a fixed
+            // element too, and a fixed group can collapse like any other.
+            if (!this.isConnected || this.getClientRects().length === 0)
+                return;
+            if (!this._slot?.assignedElements({ flatten: true }).length)
+                return;
+            if (this.getBoundingClientRect().width > 0) {
+                // It got a width, from the start or a tick late. Nothing to say.
+                this._stopWatchingForCollapse();
+                return;
+            }
+            // Zero, but not yet a verdict: a parent can hand over its width a
+            // frame or two later, and that is the same zero. Give it a moment and
+            // keep watching, so a width that arrives cancels this.
+            if (this._collapseVerdict !== 0)
+                return;
+            this._collapseVerdict = window.setTimeout(() => {
+                if (!this.isConnected || this.getClientRects().length === 0)
+                    return;
+                if (this.getBoundingClientRect().width > 0)
+                    return;
+                console.warn('nldd-button-group: the group is 0 wide, so its buttons are invisible. It takes its width from its parent (it is a container query while orientation is auto), and a parent that sizes itself from its content leaves nothing to take. Give the group or that parent a width.');
+                this._stopWatchingForCollapse();
+            }, 250);
+        });
+        this._collapseObserver.observe(this);
+    }
+    _stopWatchingForCollapse() {
+        this._collapseObserver?.disconnect();
+        this._collapseObserver = null;
+        if (this._collapseVerdict)
+            clearTimeout(this._collapseVerdict);
+        this._collapseVerdict = 0;
     }
     render() {
         return template.call(this);
@@ -61,7 +154,7 @@ __decorate([
     property({ reflect: true, converter: reflectNonDefault('md') })
 ], NLDDButtonGroup.prototype, "size", void 0);
 __decorate([
-    property({ reflect: true, converter: reflectNonDefault('vertical') })
+    property({ reflect: true, converter: reflectNonDefault('auto') })
 ], NLDDButtonGroup.prototype, "orientation", void 0);
 __decorate([
     query('slot')

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,2CAA2C,CAAC;AAC9E,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,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,iBAAiB,CAAO,IAAI,CAAC,EAAE,CAAC;6CACpD;AAGlB;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,iBAAiB,CAAc,UAAU,CAAC,EAAE,CAAC;oDAC7C;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":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"button-group.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/button-group/button-group.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,yBAmD7B,CAAC"}
+{"version":3,"file":"button-group.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/button-group/button-group.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,iBAAiB,yBA6G7B,CAAC"}

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

@@ -1,4 +1,6 @@
-import { css } from 'lit';
+import { css, unsafeCSS } from 'lit';
+import { breakpoints } from "../../../assets/styles/breakpoints.js";
+const smMax = unsafeCSS(breakpoints.smMax);
 export const buttonGroupStyles = css `
 	:host {
 		box-sizing: border-box;
@@ -18,24 +20,82 @@ export const buttonGroupStyles = css `
 		justify-content: flex-start;
 	}
 
+	/* Only auto asks its own width a question, so only auto becomes a container.
+	   A container may not size itself from its contents, and a group pinned to a
+	   row or a stack would then measure zero in a parent that shrink-wraps, for
+	   a query it never runs. */
+	:host(:not([orientation="horizontal"], [orientation="vertical"])) {
+		container-type: inline-size;
+	}
+
 	:host([size="sm"]) {
 		--_gap: var(--components-button-group-sm-gap);
 	}
 
-	/* ## Horizontal
-	   The row keeps the full width (like vertical) so full-width children
+	/* ## In a row
+	   The row keeps the full width (like the stack) so full-width children
 	   can actually stretch; content-sized buttons still sit left within
 	   the row. */
 
-	:host([orientation="horizontal"]) {
+	:host([orientation="horizontal"]),
+	:host(:not([orientation="horizontal"], [orientation="vertical"])) {
 		--_flex-direction: row;
 		--_flex-wrap: wrap;
 	}
 
+	/* ## Auto
+	   Auto is the default: a row, and stacked over the full width on a narrow
+	   container, where two labels beside each other leave no room for either.
+
+	   Auto is matched as "neither of the other two" rather than as itself: the
+	   attribute reflects only when it is not the default, so auto is written out
+	   OR absent, and a rule that named it would have needed a second selector
+	   beside it everywhere. */
+
+	@container (max-width: ${smMax}) {
+		:host(:not([orientation="horizontal"], [orientation="vertical"])) .button-group {
+			flex-direction: column;
+			--context-button-width: 100%;
+		}
+
+		/* display as well as width: a button host shrink-wraps as inline-flex, so
+		   width alone leaves the button itself content-sized in a stretched box.
+		   An icon-only control is the exception: its size is its icon, and a
+		   full-width bar with one glyph in the middle is not a bigger target for
+		   the thumb, just a wider one. */
+		:host(:not([orientation="horizontal"], [orientation="vertical"])) ::slotted(:not(nldd-icon-button)) {
+			display: block;
+			width: 100%;
+		}
+
+		/* align-self as well: a column stretches its items across the full width
+		   on its own, so without this the icon button is a wide bar regardless of
+		   the width rule above. */
+		:host(:not([orientation="horizontal"], [orientation="vertical"])) ::slotted(nldd-icon-button) {
+			align-self: flex-start;
+		}
+	}
+
+	:host([orientation="vertical"]) .button-group {
+		--context-button-width: 100%;
+	}
+
+	:host([orientation="vertical"]) ::slotted(:not(nldd-icon-button)) {
+		display: block;
+		width: 100%;
+	}
+
+	:host([orientation="vertical"]) ::slotted(nldd-icon-button) {
+		align-self: flex-start;
+	}
+
 	:host([hidden]) {
 		display: none;
 	}
 
+	/* The stacking rules above set display on every slotted child at a higher
+	   specificity than this selector, so without !important a hidden button in
+	   a stacked group stays in the row. */
 	::slotted([hidden]) {
 		display: none !important;
 	}

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

@@ -1 +1 @@
-{"version":3,"file":"button-group.styles.js","sourceRoot":"","sources":["../../../../src/components/actions/button-group/button-group.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmDnC,CAAC"}
+{"version":3,"file":"button-group.styles.js","sourceRoot":"","sources":["../../../../src/components/actions/button-group/button-group.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AAEpE,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAmDV,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0D9B,CAAC"}