@nldd/design-system 0.8.92 → 0.8.94

package/dist/components/status-and-feedback/notification/{notification-region.js → notifications-area.js}

@@ -5,7 +5,7 @@ import { isKeyboardMode } from '../../../utilities/input-modality.js';
  * It exists because a notification cannot answer the three questions that decide
  * its behavior on its own: where it sits in the stack, how deep it is buried,
  * and whether it is the one that should be counting down. All three are
- * properties of the group. The region owns the group, so it owns the answers.
+ * properties of the group. The area owns the group, so it owns the answers.
  *
  * ## The deck
  * Notifications sit on top of each other, the front one readable and the older
@@ -18,13 +18,13 @@ import { isKeyboardMode } from '../../../utilities/input-modality.js';
  * Under the front notification sits a strip as wide as the deck and as tall as
  * the deck is when it fans out. That strip is the handle: pointing at it fans
  * the deck out to fill it, clicking it lays the deck out as a list. Tabbing
- * into the region does the same, and clicking outside it or tabbing away puts
+ * into the area does the same, and clicking outside it or tabbing away puts
  * it back. Dismissing one keeps the list open for the rest. Nothing counts down
  * while the list is open, because open means someone is reading. The
  * notification itself is not a button, so a click on the message you are
  * reading does nothing, which is what it says it does.
  */
-const REGION_ID = 'nldd-notification-region';
+const AREA_ID = 'nldd-notifications-area';
 /** Past this a notification adds no edge of its own: it would sit exactly
  *  behind the last one that does, and stack another copy of the same shadow on
  *  the same spot. Three cards is enough to say "there is more". */
@@ -34,26 +34,26 @@ let expanded = false;
 /**
  * A modal overlay paints in the browser's top layer, above the whole document
  * and out of reach of any z-index, and while one is open everything outside it
- * is inert: a region left on the body is not merely behind the sheet, it is
- * unclickable even once you put it in the top layer yourself. So the region
+ * is inert: an area left on the body is not merely behind the sheet, it is
+ * unclickable even once you put it in the top layer yourself. So the area
  * travels. It lives in the topmost open overlay and sinks back as they close,
  * which is also what makes a notification raised before the sheet opened come
  * along rather than stay behind it.
  *
  * Innermost last. Entries are verified on read rather than trusted, so an
- * overlay torn out of the DOM without closing cannot strand the region.
+ * overlay torn out of the DOM without closing cannot strand the area.
  */
 const overlays = [];
 let overlayWatch = null;
-/** Open as a modal, and with a slot to take the region in. A modal without one
- *  would swallow the region, which is worse than leaving it behind. */
+/** Open as a modal, and with a slot to take the area in. A modal without one
+ *  would swallow the area, which is worse than leaving it behind. */
 function isOpenOverlay(el) {
     const root = el.shadowRoot;
     if (!root?.querySelector('slot[name="notifications"]'))
         return false;
     return root.querySelector('dialog')?.matches(':modal') ?? false;
 }
-function regionHost() {
+function areaHost() {
     while (overlays.length) {
         const top = overlays[overlays.length - 1];
         if (top.isConnected && isOpenOverlay(top))
@@ -62,9 +62,9 @@ function regionHost() {
     }
     return document.body;
 }
-function placeRegion(region) {
-    const host = regionHost();
-    if (region.parentElement === host)
+function placeArea(area) {
+    const host = areaHost();
+    if (area.parentElement === host)
         return;
     const inOverlay = host !== document.body;
     // Slotted rather than put in the overlay's shadow root: it has to be a flat
@@ -72,30 +72,30 @@ function placeRegion(region) {
     // keeps it out of the default one, whose content decides how an
     // nldd-modal-dialog aligns.
     if (inOverlay)
-        region.setAttribute('slot', 'notifications');
+        area.setAttribute('slot', 'notifications');
     else
-        region.removeAttribute('slot');
+        area.removeAttribute('slot');
     // And a popover while it is there. A sheet or dialog that keeps a transform
     // after its opening animation becomes the box a fixed element is placed in,
     // and its overflow cuts that element off. The top layer is out of reach of
-    // both, and above the overlay. On the page the region stays an ordinary fixed
+    // both, and above the overlay. On the page the area stays an ordinary fixed
     // element, below whatever the page itself puts in the top layer.
     if (inOverlay)
-        region.setAttribute('popover', 'manual');
+        area.setAttribute('popover', 'manual');
     else
-        region.removeAttribute('popover');
-    const carried = notifications(region);
+        area.removeAttribute('popover');
+    const carried = notifications(area);
     carried.forEach((item) => item._setMoving?.(true));
-    host.appendChild(region);
+    host.appendChild(area);
     // Moving it hid it, so it is shown again in its new place.
     if (inOverlay)
-        region.showPopover();
+        area.showPopover();
     carried.forEach((item) => item._setMoving?.(false));
 }
-function relocateRegion() {
-    const region = document.getElementById(REGION_ID);
-    if (region)
-        placeRegion(region);
+function relocateArea() {
+    const area = document.getElementById(AREA_ID);
+    if (area)
+        placeArea(area);
 }
 function watchOverlays() {
     if (overlayWatch)
@@ -115,7 +115,7 @@ function watchOverlays() {
             return;
         if (!overlays.includes(host))
             overlays.push(host);
-        relocateRegion();
+        relocateArea();
     }, { signal });
     // close does not bubble, so it is caught on the way down instead.
     document.addEventListener('close', (event) => {
@@ -124,7 +124,7 @@ function watchOverlays() {
         if (at === -1)
             return;
         overlays.splice(at, 1);
-        relocateRegion();
+        relocateArea();
     }, { capture: true, signal });
 }
 // At import, not at the first notification: an overlay that opened in between
@@ -133,75 +133,72 @@ function watchOverlays() {
 // which the scan above can only guess.
 if (typeof document !== 'undefined')
     watchOverlays();
-function notifications(region) {
-    return Array.from(region.querySelectorAll(':scope > nldd-notification'));
+function notifications(area) {
+    return Array.from(area.querySelectorAll(':scope > nldd-notification'));
 }
-function expander(region) {
-    return region.querySelector(':scope > [data-expander]');
+function expander(area) {
+    return area.querySelector(':scope > [data-expander]');
 }
-function ensureRegion(label) {
-    const existing = document.getElementById(REGION_ID);
+function ensureArea(label) {
+    const existing = document.getElementById(AREA_ID);
     if (existing)
         return existing;
-    const region = document.createElement('div');
-    region.id = REGION_ID;
-    // Styled here rather than in a stylesheet because this element is not a
-    // component: it is the one fixed place notifications land, and where that is
-    // deliberately cannot be set. Top right from md so it stays clear of the
-    // content, full width across the top below that, where there is no corner to
-    // spare. One grid cell holds every notification, so the deck stacks without
-    // any of them taking room of its own. The rows keep their own height: left to
-    // stretch, they make Safari size the region to its max-height inside an
-    // overlay. The rest undoes what the browser gives a popover, which the region
-    // is inside an overlay: centered, bordered, padded, on a background of its
-    // own, and scrolling.
-    region.style.cssText = [
-        'box-sizing: border-box',
-        'position: fixed',
-        'z-index: 1000',
-        'top: max(var(--semantics-overlays-inset), env(safe-area-inset-top))',
-        'right: max(var(--semantics-overlays-inset), env(safe-area-inset-right))',
-        'bottom: auto',
-        'left: auto',
-        'display: grid',
-        'align-content: start',
-        'align-items: start',
-        'margin: 0',
-        'border: none',
-        'background: none',
-        'pointer-events: none',
-        'max-height: calc(100dvh - 2 * var(--semantics-overlays-inset))',
-        'overflow: visible',
-        'padding: 0',
-        'color: inherit',
-    ].join(';');
+    const area = document.createElement('div');
+    area.id = AREA_ID;
+    // Top right from md so it stays clear of the content, full width across the
+    // top below that, where there is no corner to spare. One grid cell holds
+    // every notification, so the deck stacks without any of them taking room of
+    // its own. The rows keep their own height: left to stretch, they make Safari
+    // size the area to its max-height inside an overlay. The rest undoes what the
+    // browser gives a popover, which the area is inside an overlay: centered,
+    // bordered, padded, on a background of its own, and scrolling.
+    area.style.cssText = `
+		box-sizing: border-box;
+		position: fixed;
+		z-index: 1000;
+		top: max(var(--semantics-overlays-inset), env(safe-area-inset-top));
+		right: max(var(--semantics-overlays-inset), env(safe-area-inset-right));
+		bottom: auto;
+		left: auto;
+		display: grid;
+		align-content: start;
+		align-items: start;
+		margin: 0;
+		border: none;
+		background: none;
+		pointer-events: none;
+		max-height: calc(100dvh - 2 * var(--semantics-overlays-inset));
+		overflow: visible;
+		padding: 0;
+		color: inherit;
+	`;
     // The stack itself catches no clicks, only the notifications in it, so the
     // empty space beside them stays part of the page.
-    region.addEventListener('pointerdown', () => { }, { passive: true });
+    area.addEventListener('pointerdown', () => { }, { passive: true });
     // Focus is the keyboard's way of reaching for the deck. Without this, tabbing
     // would land on a button in a notification nobody can see. Only the
     // keyboard's: Chromium focuses a button on click, so a click on the front
     // notification would open the deck, and a click inside the open list would
     // close it. Clicks are the pointerdown listener's to judge.
-    region.addEventListener('focusin', () => {
+    area.addEventListener('focusin', () => {
         if (isKeyboardMode())
-            setExpanded(region, true);
+            setExpanded(area, true);
     });
-    region.addEventListener('focusout', (e) => {
+    area.addEventListener('focusout', (e) => {
         const next = e.relatedTarget;
         // Focus that goes nowhere left with a dismissed notification, not with
         // the reader.
-        if (!next || !isKeyboardMode() || region.contains(next))
+        if (!next || !isKeyboardMode() || area.contains(next))
             return;
-        setExpanded(region, false);
+        setExpanded(area, false);
     });
     // A live region so a notification is announced wherever it was written; the
     // urgency itself comes from each notification's own role.
-    region.setAttribute('role', 'region');
-    region.setAttribute('aria-label', label);
-    region.appendChild(makeExpander(region));
-    placeRegion(region);
-    return region;
+    area.setAttribute('role', 'region');
+    area.setAttribute('aria-label', label);
+    area.appendChild(makeExpander(area));
+    placeArea(area);
+    return area;
 }
 /**
  * The strip under the front notification. It covers the edges peeking out from
@@ -209,51 +206,51 @@ function ensureRegion(label) {
  * it stays exactly as tall as the deck is when it fans out, so what you point
  * at is what you get.
  *
- * A second row of the region's grid rather than hung below the region, so it
- * follows the deck and not the region's edge. A region taller than its deck,
- * as Safari made it inside an overlay while the rows still stretched, would
- * otherwise put the strip far from the deck it opens.
+ * A second row of the area's grid rather than hung below the area, so it follows
+ * the deck and not the area's edge. An area taller than its deck, as Safari made
+ * it inside an overlay while the rows still stretched, would otherwise put the
+ * strip far from the deck it opens.
  */
-function makeExpander(region) {
+function makeExpander(area) {
     const strip = document.createElement('div');
     strip.dataset.expander = '';
-    strip.style.cssText = [
-        'display: none',
-        'position: relative',
-        'grid-area: 2 / 1',
-        'z-index: 1000',
-        'pointer-events: auto',
-        'height: var(--primitives-space-24)',
-    ].join(';');
-    strip.addEventListener('pointerenter', () => setFanned(region, true));
-    strip.addEventListener('pointerleave', () => setFanned(region, false));
-    strip.addEventListener('click', () => setExpanded(region, true));
+    strip.style.cssText = `
+		display: none;
+		position: relative;
+		grid-area: 2 / 1;
+		z-index: 1000;
+		pointer-events: auto;
+		height: var(--primitives-space-24);
+	`;
+    strip.addEventListener('pointerenter', () => setFanned(area, true));
+    strip.addEventListener('pointerleave', () => setFanned(area, false));
+    strip.addEventListener('click', () => setExpanded(area, true));
     return strip;
 }
 /** Newest in front: what just happened is what you want to read, and the older
  *  ones slide back and downwards behind it. */
-export function joinRegion(notification, label) {
+export function joinArea(notification, label) {
     watchOverlays();
-    const region = ensureRegion(label);
-    placeRegion(region);
+    const area = ensureArea(label);
+    placeArea(area);
     notification.style.pointerEvents = 'auto';
-    region.prepend(notification);
-    syncStack(region);
+    area.prepend(notification);
+    syncStack(area);
 }
-export function leaveRegion(notification) {
-    const region = document.getElementById(REGION_ID);
-    if (!region)
+export function leaveArea(notification) {
+    const area = document.getElementById(AREA_ID);
+    if (!area)
         return;
-    if (notification.parentElement === region)
-        region.removeChild(notification);
-    if (notifications(region).length === 0) {
+    if (notification.parentElement === area)
+        area.removeChild(notification);
+    if (notifications(area).length === 0) {
         stopWatchingFront();
         document.removeEventListener('pointerdown', onDocumentPointerDown, true);
         expanded = false;
-        region.remove();
+        area.remove();
         return;
     }
-    syncStack(region);
+    syncStack(area);
 }
 /**
  * Exactly one notification counts down: the front of the deck, and only while
@@ -266,14 +263,14 @@ export function leaveRegion(notification) {
  * shorter one would vanish behind a taller one, leaving a deck that says
  * nothing about how much is in it.
  */
-function syncStack(region) {
-    const items = notifications(region);
+function syncStack(area) {
+    const items = notifications(area);
     if (items.length < 2)
         expanded = false;
-    region.style.display = expanded ? 'flex' : 'grid';
-    region.style.flexDirection = expanded ? 'column' : '';
-    region.style.gap = expanded ? 'var(--primitives-space-12)' : '';
-    expander(region).style.display = !expanded && items.length > 1 ? 'block' : 'none';
+    area.style.display = expanded ? 'flex' : 'grid';
+    area.style.flexDirection = expanded ? 'column' : '';
+    area.style.gap = expanded ? 'var(--primitives-space-12)' : '';
+    expander(area).style.display = !expanded && items.length > 1 ? 'block' : 'none';
     items.forEach((item, index) => {
         item.style.gridArea = expanded ? '' : '1 / 1';
         item.style.setProperty('--_stack-depth', expanded ? '0' : String(Math.min(index, MAX_DEPTH)));
@@ -287,90 +284,90 @@ function syncStack(region) {
     if (expanded) {
         stopWatchingFront();
         items.forEach((item) => { item.style.height = ''; });
-        applyOverflow(region);
+        applyOverflow(area);
         return;
     }
-    applyOverflow(region);
-    watchFront(region, items[0]);
+    applyOverflow(area);
+    watchFront(area, items[0]);
 }
 /**
  * A list longer than the screen it opened on has to scroll, because a message
  * you cannot reach is a message you do not have. It only scrolls then: a scroll
  * box clips, and what it would clip is the shadow every notification stands on.
  */
-function applyOverflow(region) {
+function applyOverflow(area) {
     // Measure unclipped, which means putting it back first.
-    setScrolling(region, false);
+    setScrolling(area, false);
     if (!expanded)
         return;
-    if (region.scrollHeight <= region.clientHeight)
+    if (area.scrollHeight <= area.clientHeight)
         return;
-    setScrolling(region, true);
+    setScrolling(area, true);
 }
-function setScrolling(region, on) {
+function setScrolling(area, on) {
     const inset = 'var(--semantics-overlays-inset)';
     const shadow = 'var(--primitives-space-48)';
-    // Off means the values set when the region was made, not cleared ones: a
+    // Off means the values set when the area was made, not cleared ones: a
     // cleared value falls through to the browser's styling for a popover.
-    region.style.overflow = on ? 'auto' : 'visible';
-    region.style.overscrollBehavior = on ? 'contain' : '';
+    area.style.overflow = on ? 'auto' : 'visible';
+    area.style.overscrollBehavior = on ? 'contain' : '';
     // Room inside the scroll box for the shadow, taken straight back off the
     // outside again, so nothing moves when the list starts to scroll. Left and
     // below it needs the reach of the shadow itself; above and to the right the
     // box lands on the edge of the screen, where a clip and a shadow running off
     // the screen look the same.
-    region.style.padding = on ? `${inset} ${inset} ${shadow} ${shadow}` : '0';
-    region.style.margin = on ? `calc(-1 * ${inset}) calc(-1 * ${inset}) 0 calc(-1 * ${shadow})` : '0';
-    region.style.maxHeight = on ? '100dvh' : `calc(100dvh - 2 * ${inset})`;
+    area.style.padding = on ? `${inset} ${inset} ${shadow} ${shadow}` : '0';
+    area.style.margin = on ? `calc(-1 * ${inset}) calc(-1 * ${inset}) 0 calc(-1 * ${shadow})` : '0';
+    area.style.maxHeight = on ? '100dvh' : `calc(100dvh - 2 * ${inset})`;
 }
-function setExpanded(region, next) {
+function setExpanded(area, next) {
     if (expanded === next)
         return;
-    if (next && notifications(region).length < 2)
+    if (next && notifications(area).length < 2)
         return;
     expanded = next;
     if (next) {
-        setFanned(region, false);
+        setFanned(area, false);
         document.addEventListener('pointerdown', onDocumentPointerDown, true);
     }
     else {
         document.removeEventListener('pointerdown', onDocumentPointerDown, true);
     }
-    syncStack(region);
+    syncStack(area);
 }
 function onDocumentPointerDown(e) {
-    const region = document.getElementById(REGION_ID);
-    if (!region)
+    const area = document.getElementById(AREA_ID);
+    if (!area)
         return;
-    if (e.composedPath().includes(region))
+    if (e.composedPath().includes(area))
         return;
-    setExpanded(region, false);
+    setExpanded(area, false);
 }
 /** Pointing at the strip fans the deck out until it fills it. It is the only
  *  thing saying there is more here than the one message you can read. */
-function setFanned(region, on) {
-    notifications(region).forEach((item) => {
+function setFanned(area, on) {
+    notifications(area).forEach((item) => {
         item.style.setProperty('--_stack-fanned', on ? '1' : '0');
     });
 }
-function watchFront(region, front) {
+function watchFront(area, front) {
     stopWatchingFront();
     if (!front)
         return;
     // Not just once: the front notification is a live element whose height moves
     // with its own text, and the deck behind it has to follow.
     if (typeof ResizeObserver !== 'undefined') {
-        frontObserver = new ResizeObserver(() => cutToFront(region, front.offsetHeight));
+        frontObserver = new ResizeObserver(() => cutToFront(area, front.offsetHeight));
         frontObserver.observe(front);
     }
-    cutToFront(region, front.offsetHeight);
+    cutToFront(area, front.offsetHeight);
 }
 function stopWatchingFront() {
     frontObserver?.disconnect();
     frontObserver = null;
 }
-function cutToFront(region, height) {
-    notifications(region).forEach((item, index) => {
+function cutToFront(area, height) {
+    notifications(area).forEach((item, index) => {
         item.style.height = index === 0 ? '' : `${height}px`;
     });
 }
@@ -384,4 +381,4 @@ export function _resetOverlayWatchForTesting() {
     if (typeof document !== 'undefined')
         watchOverlays();
 }
-//# sourceMappingURL=notification-region.js.map
+//# sourceMappingURL=notifications-area.js.map

package/dist/components/status-and-feedback/notification/notifications-area.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"notifications-area.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/notification/notifications-area.ts"],"names":[],"mappings":"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"}

package/dist/components/status-and-feedback/progress-bar/progress-bar.d.ts

@@ -8,7 +8,7 @@
  * storage usage). The consumer provides raw values; the component
  * computes percentages from `max`.
  *
- * Two modes:
+ * Two variants:
  * - `progress` (default): segments sum toward `max`; remaining space
  *   is empty track. ARIA reads "X% voltooid".
  * - `distribution`: segments fill the bar; ARIA enumerates segments.
@@ -18,7 +18,7 @@
  *
  * @element nldd-progress-bar
  *
- * @attr {'progress'|'distribution'} mode - Semantics for ARIA and visualization (default: 'progress')
+ * @attr {'progress'|'distribution'} variant - Semantics for ARIA and visualization (default: 'progress')
  * @attr {number} max - Total value (default: 100)
  * @attr {number} value - Single-segment shorthand (ignored when segment children are present)
  * @attr {string} color - Color for the single-segment shorthand (default: 'accent')
@@ -48,7 +48,7 @@ import '../../content/tooltip/tooltip.js';
  *  and with nldd-progress-circle's matching constant. Exported so the
  *  test suite can cross-check this value against the resolved CSS token. */
 export declare const INDETERMINATE_TRANSITION_MS = 300;
-export type ProgressBarMode = 'progress' | 'distribution';
+export type ProgressBarVariant = 'progress' | 'distribution';
 export type ProgressBarSize = 'sm' | 'md' | 'lg';
 export type ProgressBarValueFormat = 'percentage' | 'absolute' | 'fraction';
 export type ProgressBarValueDisplay = 'inline' | 'tooltip' | 'none';
@@ -70,7 +70,7 @@ export declare class NLDDProgressBarSegmentIndicator extends LitElement {
 }
 export declare class NLDDProgressBar extends LitElement {
     static styles: import("lit").CSSResult;
-    mode: ProgressBarMode;
+    variant: ProgressBarVariant;
     max: number;
     value: number | null;
     color: ProgressBarColor;

package/dist/components/status-and-feedback/progress-bar/progress-bar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"progress-bar.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/progress-bar/progress-bar.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"progress-bar.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/progress-bar/progress-bar.ts"],"names":[],"mappings":"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"}

package/dist/components/status-and-feedback/progress-bar/progress-bar.js

@@ -14,7 +14,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  * storage usage). The consumer provides raw values; the component
  * computes percentages from `max`.
  *
- * Two modes:
+ * Two variants:
  * - `progress` (default): segments sum toward `max`; remaining space
  *   is empty track. ARIA reads "X% voltooid".
  * - `distribution`: segments fill the bar; ARIA enumerates segments.
@@ -24,7 +24,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  *
  * @element nldd-progress-bar
  *
- * @attr {'progress'|'distribution'} mode - Semantics for ARIA and visualization (default: 'progress')
+ * @attr {'progress'|'distribution'} variant - Semantics for ARIA and visualization (default: 'progress')
  * @attr {number} max - Total value (default: 100)
  * @attr {number} value - Single-segment shorthand (ignored when segment children are present)
  * @attr {string} color - Color for the single-segment shorthand (default: 'accent')
@@ -53,6 +53,7 @@ import { progressBarStyles, progressBarSegmentIndicatorStyles } from './progress
 import { progressBarTemplate, segmentIndicatorTemplate } from './progress-bar.template.js';
 import { nlddProgressBarTranslations } from './progress-bar.i18n.js';
 import '../../content/tooltip/tooltip.js';
+import { translate } from '../../../utilities/translations.js';
 /** Indeterminate ↔ determinate crossfade duration. Must stay in sync with
  *  --primitives-transition-duration-slow used by the matching CSS animations
  *  and with nldd-progress-circle's matching constant. Exported so the
@@ -104,7 +105,7 @@ export { NLDDProgressBarSegmentIndicator };
 let NLDDProgressBar = class NLDDProgressBar extends LitElement {
     constructor() {
         super(...arguments);
-        this.mode = 'progress';
+        this.variant = 'progress';
         this.max = 100;
         this.value = null;
         this.color = 'accent';
@@ -127,7 +128,7 @@ let NLDDProgressBar = class NLDDProgressBar extends LitElement {
         this._onSlotChangeBound = this._onSlotChange.bind(this);
     }
     _t(key) {
-        return this.translations[key] ?? nlddProgressBarTranslations[key];
+        return translate(this.translations, nlddProgressBarTranslations, key);
     }
     /** Returns true when the user has provided segment children. */
     get _hasSegmentIndicators() {
@@ -181,10 +182,10 @@ let NLDDProgressBar = class NLDDProgressBar extends LitElement {
             const pct = this.max > 0 ? Math.round((s.value / this.max) * 100) : 0;
             return s.name ? `${s.name}: ${pct}%` : `${pct}%`;
         });
-        if (this.mode === 'distribution') {
+        if (this.variant === 'distribution') {
             return segmentIndicatorDescriptions.join(', ');
         }
-        // Progress mode
+        // Progress variant
         const totalPct = Math.round(this._percentage);
         if (allNamed) {
             return `${segmentIndicatorDescriptions.join(', ')}. ${totalPrefix} ${totalPct}% ${completedSuffix}.`;
@@ -338,17 +339,17 @@ let NLDDProgressBar = class NLDDProgressBar extends LitElement {
             const v = Math.max(0, seg.value);
             if (v <= 0) {
                 seg.hidden = true;
-                seg.removeAttribute('data-mode');
+                seg.removeAttribute('data-variant');
                 seg._autoTooltipText = '';
                 continue;
             }
             seg.hidden = false;
             const pct = denominator > 0 ? (v / denominator) * 100 : 0;
             seg.style.setProperty('--context-progress-bar-segment-indicator-width', `${pct}%`);
-            // Progress mode: each segment a capsule. Distribution mode:
+            // Progress variant: each segment a capsule. Distribution variant:
             // segments are rectangular, only the track's outer corners are
             // rounded (via overflow:hidden + border-radius on the track).
-            seg.setAttribute('data-mode', this.mode);
+            seg.setAttribute('data-variant', this.variant);
             seg._autoTooltipText = suppressAutoTooltip ? '' : this._formatSegmentIndicatorTooltip(seg);
             seg.toggleAttribute('data-grow', isExiting);
             seg.toggleAttribute('data-shrink', isEntering);
@@ -361,7 +362,7 @@ let NLDDProgressBar = class NLDDProgressBar extends LitElement {
 NLDDProgressBar.styles = progressBarStyles;
 __decorate([
     property({ reflect: true, converter: reflectNonDefault('progress') })
-], NLDDProgressBar.prototype, "mode", void 0);
+], NLDDProgressBar.prototype, "variant", void 0);
 __decorate([
     property({ type: Number, reflect: true })
 ], NLDDProgressBar.prototype, "max", void 0);