@nldd/design-system 0.8.79 → 0.8.80

package/dist/components/content/avatar-group/avatar-group.d.ts

@@ -0,0 +1,90 @@
+/**
+ * NLDD Design System Avatar Group Component (Lit + TypeScript)
+ *
+ * Shows several avatars as one group: they overlap, and each one gets a ring in
+ * the surface color so they stay apart where they meet. The ring uses the same
+ * mechanism as the badge, so on a colored surface you hand the color over
+ * through `--context-parent-background-color`.
+ *
+ * Slot `nldd-avatar` elements, not bare `img`. An avatar already knows what to
+ * do with a dead image, when to fall back to initials, and how to show its name
+ * as a tooltip; a loose image would have to reproduce all of that and cannot do
+ * the last one. Set `decorative` when the names already stand beside the group
+ * as text; otherwise give every avatar a name, because the group itself
+ * describes nobody.
+ *
+ * The size applies to the whole group: it is imposed on the avatars, a slotted
+ * `img` included. That keeps the row on one line whatever a consumer hands over.
+ *
+ * @element nldd-avatar-group
+ *
+ * @attr {string} size - Diameter of each avatar in px (spacer-aligned: 16, 20, 24, 28, 32, 40, 44, 48, 56, 64, 80, 96); default 40
+ * @attr {number} max - Shows at most this many avatars; the rest go behind a "+N" button that opens them as a list of names
+ * @attr {string} accessible-label - Describes the group as a whole (e.g. "Editors"); without a label the group is not a landmark of its own and the avatars speak for themselves
+ *
+ * @slot - One or more `nldd-avatar` elements
+ */
+import { LitElement } from 'lit';
+import '../avatar/avatar.js';
+import '../../layout/popover/popover.js';
+import '../../layout/container/container.js';
+import '../../lists-and-tables/list/list.js';
+import '../../lists-and-tables/list-item/list-item.js';
+import '../../lists-and-tables/cells/cell/cell.js';
+import '../../lists-and-tables/cells/text-cell/text-cell.js';
+import '../../lists-and-tables/cells/spacer-cell/spacer-cell.js';
+declare const NLDDAvatarGroup_base: (abstract new (...args: any[]) => LitElement & {
+    translations: Partial<{
+        'components.avatar-group.overflow-label': string;
+        'components.avatar-group.overflow-popover-label': string;
+    }>;
+    _t(key: "components.avatar-group.overflow-label" | "components.avatar-group.overflow-popover-label", vars?: Record<string, string | number>): string;
+}) & typeof LitElement;
+export declare class NLDDAvatarGroup extends NLDDAvatarGroup_base {
+    static styles: import("lit").CSSResult;
+    size: string;
+    max: number | undefined;
+    accessibleLabel: string;
+    /** The avatars past `max`, each as a copy plus the name it carries. Copies,
+     *  because the originals are the consumer's light DOM and are already
+     *  assigned to the slot: a node can only be in one place. */
+    _overflow: {
+        avatar: Element;
+        name: string;
+    }[];
+    /** How many avatars are slotted. Kept in state so the generated rules can be
+     *  written after every render: slotchange can beat the first render, and
+     *  then the style element they go in does not exist yet. */
+    _total: number;
+    /** The trigger and its popover have to agree on an id, and two groups on a
+     *  page must not open each other's list. */
+    private readonly _id;
+    get _popoverId(): string;
+    get _triggerId(): string;
+    /** Not guaranteed: a decorative avatar beside a name in the text carries
+     *  none, and then the row simply has no name to show. */
+    private _nameOf;
+    /** The avatars as slotted, kept so a change to `max` can recompute without
+     *  waiting for a slotchange that will not come. */
+    private _assigned;
+    willUpdate(changed: Map<string, unknown>): void;
+    _onSlotChange: (e: Event) => void;
+    private _recompute;
+    /** Two things ::slotted() cannot express without knowing the count: hiding
+     *  everything past `max`, and stacking the row so the first avatar lies on
+     *  top of the second and so on down to the overflow button. Generated as a
+     *  rule rather than as attributes, because the avatars are the consumer's
+     *  light DOM and nth-child() cannot read a custom property. */
+    private _syncGeneratedRules;
+    /** The popover resolves its anchor by id against the document, and an id in
+     *  a shadow root is not there. Hand it the element instead. */
+    updated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nldd-avatar-group': NLDDAvatarGroup;
+    }
+}
+export {};
+//# sourceMappingURL=avatar-group.d.ts.map

package/dist/components/content/avatar-group/avatar-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-group.d.ts","sourceRoot":"","sources":["../../../../src/components/content/avatar-group/avatar-group.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAIjC,OAAO,qBAAqB,CAAC;AAC7B,OAAO,iCAAiC,CAAC;AACzC,OAAO,qCAAqC,CAAC;AAC7C,OAAO,qCAAqC,CAAC;AAC7C,OAAO,+CAA+C,CAAC;AACvD,OAAO,2CAA2C,CAAC;AACnD,OAAO,qDAAqD,CAAC;AAC7D,OAAO,yDAAyD,CAAC;;;;;;;;AAIjE,qBACa,eAAgB,SAAQ,oBAAyD;IAC7F,OAAgB,MAAM,0BAAqB;IAG3C,IAAI,SAAQ;IAGZ,GAAG,EAAE,MAAM,GAAG,SAAS,CAAa;IAGpC,eAAe,SAAM;IAErB;;iEAE6D;IAE7D,SAAS,EAAE;QAAE,MAAM,EAAE,OAAO,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,EAAE,CAAM;IAEpD;;gEAE4D;IAE5D,MAAM,SAAK;IAEX;gDAC4C;IAC5C,OAAO,CAAC,QAAQ,CAAC,GAAG,CAA0C;IAE9D,IAAI,UAAU,IAAI,MAAM,CAEvB;IAED,IAAI,UAAU,IAAI,MAAM,CAEvB;IAED;6DACyD;IACzD,OAAO,CAAC,OAAO;IAIf;uDACmD;IACnD,OAAO,CAAC,SAAS,CAAiB;IAEzB,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAIxD,aAAa,GAAI,GAAG,KAAK,KAAG,IAAI,CAG9B;IAEF,OAAO,CAAC,UAAU;IAiClB;;;;mEAI+D;IAC/D,OAAO,CAAC,mBAAmB;IAe3B;mEAC+D;IACtD,OAAO,IAAI,IAAI;IASf,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,eAAe,CAAC;KACrC;CACD"}

package/dist/components/content/avatar-group/avatar-group.i18n.d.ts

@@ -0,0 +1,6 @@
+export declare const nlddAvatarGroupTranslations: {
+    'components.avatar-group.overflow-label': string;
+    'components.avatar-group.overflow-popover-label': string;
+};
+export type NLDDAvatarGroupTranslations = typeof nlddAvatarGroupTranslations;
+//# sourceMappingURL=avatar-group.i18n.d.ts.map

package/dist/components/content/avatar-group/avatar-group.i18n.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-group.i18n.d.ts","sourceRoot":"","sources":["../../../../src/components/content/avatar-group/avatar-group.i18n.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,2BAA2B;;;CAGvC,CAAC;AAEF,MAAM,MAAM,2BAA2B,GAAG,OAAO,2BAA2B,CAAC"}

package/dist/components/content/avatar-group/avatar-group.i18n.js

@@ -0,0 +1,5 @@
+export const nlddAvatarGroupTranslations = {
+    'components.avatar-group.overflow-label': 'Nog {count} tonen',
+    'components.avatar-group.overflow-popover-label': 'Overige namen',
+};
+//# sourceMappingURL=avatar-group.i18n.js.map

package/dist/components/content/avatar-group/avatar-group.i18n.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-group.i18n.js","sourceRoot":"","sources":["../../../../src/components/content/avatar-group/avatar-group.i18n.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,2BAA2B,GAAG;IAC1C,wCAAwC,EAAE,mBAAmB;IAC7D,gDAAgD,EAAE,eAAe;CACjE,CAAC"}

package/dist/components/content/avatar-group/avatar-group.js

@@ -0,0 +1,169 @@
+/**
+ * NLDD Design System Avatar Group Component (Lit + TypeScript)
+ *
+ * Shows several avatars as one group: they overlap, and each one gets a ring in
+ * the surface color so they stay apart where they meet. The ring uses the same
+ * mechanism as the badge, so on a colored surface you hand the color over
+ * through `--context-parent-background-color`.
+ *
+ * Slot `nldd-avatar` elements, not bare `img`. An avatar already knows what to
+ * do with a dead image, when to fall back to initials, and how to show its name
+ * as a tooltip; a loose image would have to reproduce all of that and cannot do
+ * the last one. Set `decorative` when the names already stand beside the group
+ * as text; otherwise give every avatar a name, because the group itself
+ * describes nobody.
+ *
+ * The size applies to the whole group: it is imposed on the avatars, a slotted
+ * `img` included. That keeps the row on one line whatever a consumer hands over.
+ *
+ * @element nldd-avatar-group
+ *
+ * @attr {string} size - Diameter of each avatar in px (spacer-aligned: 16, 20, 24, 28, 32, 40, 44, 48, 56, 64, 80, 96); default 40
+ * @attr {number} max - Shows at most this many avatars; the rest go behind a "+N" button that opens them as a list of names
+ * @attr {string} accessible-label - Describes the group as a whole (e.g. "Editors"); without a label the group is not a landmark of its own and the avatars speak for themselves
+ *
+ * @slot - One or more `nldd-avatar` elements
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { avatarGroupStyles } from './avatar-group.styles.js';
+import { avatarGroupTemplate } from './avatar-group.template.js';
+import '../avatar/avatar.js';
+import '../../layout/popover/popover.js';
+import '../../layout/container/container.js';
+import '../../lists-and-tables/list/list.js';
+import '../../lists-and-tables/list-item/list-item.js';
+import '../../lists-and-tables/cells/cell/cell.js';
+import '../../lists-and-tables/cells/text-cell/text-cell.js';
+import '../../lists-and-tables/cells/spacer-cell/spacer-cell.js';
+import { withTranslations } from '../../../utilities/with-translations.js';
+import { nlddAvatarGroupTranslations } from './avatar-group.i18n.js';
+let NLDDAvatarGroup = class NLDDAvatarGroup extends withTranslations(LitElement, nlddAvatarGroupTranslations) {
+    constructor() {
+        super(...arguments);
+        this.size = '40';
+        this.max = undefined;
+        this.accessibleLabel = '';
+        /** The avatars past `max`, each as a copy plus the name it carries. Copies,
+         *  because the originals are the consumer's light DOM and are already
+         *  assigned to the slot: a node can only be in one place. */
+        this._overflow = [];
+        /** How many avatars are slotted. Kept in state so the generated rules can be
+         *  written after every render: slotchange can beat the first render, and
+         *  then the style element they go in does not exist yet. */
+        this._total = 0;
+        /** The trigger and its popover have to agree on an id, and two groups on a
+         *  page must not open each other's list. */
+        this._id = Math.random().toString(36).slice(2, 9);
+        /** The avatars as slotted, kept so a change to `max` can recompute without
+         *  waiting for a slotchange that will not come. */
+        this._assigned = [];
+        this._onSlotChange = (e) => {
+            this._assigned = e.target.assignedElements();
+            this._recompute();
+        };
+    }
+    get _popoverId() {
+        return `avatar-group-overflow-${this._id}`;
+    }
+    get _triggerId() {
+        return `avatar-group-trigger-${this._id}`;
+    }
+    /** Not guaranteed: a decorative avatar beside a name in the text carries
+     *  none, and then the row simply has no name to show. */
+    _nameOf(el) {
+        return el.getAttribute('name') || '';
+    }
+    willUpdate(changed) {
+        if (changed.has('max'))
+            this._recompute();
+    }
+    _recompute() {
+        const assigned = this._assigned;
+        if (import.meta.env?.DEV) {
+            const strays = assigned.filter(el => el.localName !== 'nldd-avatar');
+            if (strays.length > 0) {
+                console.warn(`[nldd-avatar-group] slot an nldd-avatar rather than <${strays[0].localName}>: `
+                    + 'the group sizes, stacks and rings its avatars, and only an nldd-avatar '
+                    + 'carries the name that the tooltip and the overflow list read.');
+            }
+        }
+        const { max } = this;
+        const hidden = typeof max === 'number' && max > 0 && assigned.length > max
+            ? assigned.slice(max)
+            : [];
+        this._overflow = hidden.map(node => {
+            const avatar = node.cloneNode(true);
+            // The copy is a picture beside its own name, so it says nothing on
+            // its own; the row's text is the accessible content. It also gets a
+            // row-sized diameter: outside the group nothing constrains it, and
+            // an avatar without a size fills its container, which in a cell is
+            // nothing at all. Big enough to read the initials, small enough to
+            // keep the row a row.
+            avatar.setAttribute('decorative', '');
+            avatar.setAttribute('tooltip-timing', 'never');
+            avatar.setAttribute('size', '32');
+            avatar.removeAttribute('slot');
+            return { avatar, name: this._nameOf(node) };
+        });
+        this._total = assigned.length;
+    }
+    /** Two things ::slotted() cannot express without knowing the count: hiding
+     *  everything past `max`, and stacking the row so the first avatar lies on
+     *  top of the second and so on down to the overflow button. Generated as a
+     *  rule rather than as attributes, because the avatars are the consumer's
+     *  light DOM and nth-child() cannot read a custom property. */
+    _syncGeneratedRules() {
+        const sheet = this.shadowRoot?.querySelector('#generated-rules');
+        if (!sheet)
+            return;
+        const total = this._total;
+        const hide = this._overflow.length > 0 && typeof this.max === 'number'
+            ? `.avatar-group ::slotted(:nth-child(n + ${this.max + 1})) { display: none; }`
+            : '';
+        // Descending, so the leftmost avatar is the whole one and each next is
+        // tucked under it — the row reads as a stack you look at from the left,
+        // and the overflow button ends up at the bottom of it.
+        const stack = Array.from({ length: total }, (_, i) => `.avatar-group ::slotted(:nth-child(${i + 1})) { z-index: ${total - i}; }`).join('\n');
+        sheet.textContent = `${hide}\n${stack}`;
+    }
+    /** The popover resolves its anchor by id against the document, and an id in
+     *  a shadow root is not there. Hand it the element instead. */
+    updated() {
+        this._syncGeneratedRules();
+        const popover = this.shadowRoot?.querySelector('nldd-popover');
+        const trigger = this.shadowRoot?.querySelector('.avatar-group__overflow-button') ?? null;
+        if (popover && popover.anchorElement !== trigger)
+            popover.anchorElement = trigger;
+    }
+    render() {
+        return avatarGroupTemplate(this);
+    }
+};
+NLDDAvatarGroup.styles = avatarGroupStyles;
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDAvatarGroup.prototype, "size", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], NLDDAvatarGroup.prototype, "max", void 0);
+__decorate([
+    property({ type: String, attribute: 'accessible-label' })
+], NLDDAvatarGroup.prototype, "accessibleLabel", void 0);
+__decorate([
+    state()
+], NLDDAvatarGroup.prototype, "_overflow", void 0);
+__decorate([
+    state()
+], NLDDAvatarGroup.prototype, "_total", void 0);
+NLDDAvatarGroup = __decorate([
+    customElement('nldd-avatar-group')
+], NLDDAvatarGroup);
+export { NLDDAvatarGroup };
+//# sourceMappingURL=avatar-group.js.map

package/dist/components/content/avatar-group/avatar-group.js.map

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

package/dist/components/content/avatar-group/avatar-group.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const avatarGroupStyles: import("lit").CSSResult;
+//# sourceMappingURL=avatar-group.styles.d.ts.map

package/dist/components/content/avatar-group/avatar-group.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-group.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/content/avatar-group/avatar-group.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,yBAiI7B,CAAC"}

package/dist/components/content/avatar-group/avatar-group.styles.js

@@ -0,0 +1,132 @@
+import { css } from 'lit';
+export const avatarGroupStyles = css `
+	:host {
+		box-sizing: border-box;
+	}
+
+
+	/* # Host */
+
+	:host {
+		--_avatar-size: var(--primitives-space-40);
+		--_overlap-size: var(--primitives-space-8);
+		--_ring-width: var(--primitives-border-width-regular);
+		--_ring-color: var(--context-parent-background-color, var(--semantics-surfaces-base-background-color));
+		--_corner-radius: var(--primitives-corner-radius-full);
+		--_overflow-background-color: light-dark(var(--primitives-color-neutral-25), var(--primitives-color-neutral-150));
+		--_overflow-hover-background-color: light-dark(var(--primitives-color-neutral-50), var(--primitives-color-neutral-200));
+		--_overflow-content-color: var(--semantics-content-secondary-color);
+		--_overflow-font: var(--primitives-font-body-xs-medium-flat);
+
+		display: inline-flex;
+		vertical-align: middle;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+
+	/* ## Size */
+
+	:host([size="16"]) { --_avatar-size: var(--primitives-space-16); }
+	:host([size="20"]) { --_avatar-size: var(--primitives-space-20); }
+	:host([size="24"]) { --_avatar-size: var(--primitives-space-24); }
+	:host([size="28"]) { --_avatar-size: var(--primitives-space-28); }
+	:host([size="32"]) { --_avatar-size: var(--primitives-space-32); }
+	:host([size="44"]) { --_avatar-size: var(--primitives-space-44); }
+	:host([size="48"]) { --_avatar-size: var(--primitives-space-48); }
+	:host([size="56"]) { --_avatar-size: var(--primitives-space-56); }
+	:host([size="64"]) { --_avatar-size: var(--primitives-space-64); }
+	:host([size="80"]) { --_avatar-size: var(--primitives-space-80); }
+	:host([size="96"]) { --_avatar-size: var(--primitives-space-96); }
+
+
+	/* A smaller avatar needs less overlap to read as a group, so the small
+	   sizes step down with it. */
+
+	:host([size="16"]),
+	:host([size="20"]),
+	:host([size="24"]) {
+		--_overlap-size: var(--primitives-space-4);
+	}
+
+
+	/* # Group */
+
+	.avatar-group {
+		display: flex;
+		padding-inline-start: var(--_overlap-size);
+	}
+
+
+	/* # Overflow
+
+	   A step away from the surface rather than towards it: it is the one disc
+	   that holds no face, and it has to stay a disc. In light that means one
+	   step down from the avatar fill; in dark the scale runs the other way, so
+	   it is one step up from the surface instead — a darker disc would sink
+	   into the page. */
+
+	.avatar-group__overflow-button {
+		appearance: none;
+		box-sizing: border-box;
+		display: inline-flex;
+		position: relative;
+		z-index: 0;
+		flex-shrink: 0;
+		margin-inline-start: calc(-1 * var(--_overlap-size));
+		border: none;
+		border-radius: var(--_corner-radius);
+		box-shadow: 0 0 0 var(--_ring-width) var(--_ring-color);
+		background-color: var(--_overflow-background-color);
+		width: var(--_avatar-size);
+		height: var(--_avatar-size);
+		padding: 0;
+		align-items: center;
+		justify-content: center;
+		color: var(--_overflow-content-color);
+		font: var(--_overflow-font);
+	}
+
+	/* The smallest step the neutral scale has, one notch off the resting fill.
+	   No semantic hover token fits: the button-hover colours are meant for a
+	   control that already looks like a button, and here they read as a jump.
+	   It only has to confirm that this disc is clickable. */
+	.avatar-group__overflow-button:hover {
+		background-color: var(--_overflow-hover-background-color);
+	}
+
+	.avatar-group__overflow-button:focus-visible {
+		outline: var(--semantics-focus-ring-outline);
+		outline-offset: var(--semantics-focus-ring-outline-offset);
+	}
+
+
+	/* # Avatars
+
+	   A slotted avatar can't be wrapped, so the group sizes it here. The ring
+	   is a box-shadow rather than a border: it sits outside the shape without
+	   changing the diameter, so overlap stays exact. */
+
+	/* !important: nldd-avatar sizes itself from :host([size]) in its own shadow
+	   tree, and a tree's own rules beat an outer ::slotted() of equal weight. */
+	.avatar-group ::slotted(nldd-avatar) {
+		position: relative;
+		flex-shrink: 0;
+		margin-inline-start: calc(-1 * var(--_overlap-size));
+		border-radius: var(--_corner-radius);
+		box-shadow: 0 0 0 var(--_ring-width) var(--_ring-color);
+		width: var(--_avatar-size) !important;
+		height: var(--_avatar-size) !important;
+	}
+
+	/* A box-shadow does not paint in forced colors, so the separation comes
+	   back as a real border there. */
+	@media (forced-colors: active) {
+		.avatar-group ::slotted(nldd-avatar) {
+			border: var(--_ring-width) solid Canvas;
+		}
+	}
+`;
+//# sourceMappingURL=avatar-group.styles.js.map

package/dist/components/content/avatar-group/avatar-group.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-group.styles.js","sourceRoot":"","sources":["../../../../src/components/content/avatar-group/avatar-group.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiInC,CAAC"}

package/dist/components/content/avatar-group/avatar-group.template.d.ts

@@ -0,0 +1,3 @@
+import type { NLDDAvatarGroup } from './avatar-group.js';
+export declare function avatarGroupTemplate(component: NLDDAvatarGroup): import("lit-html").TemplateResult<1>;
+//# sourceMappingURL=avatar-group.template.d.ts.map

package/dist/components/content/avatar-group/avatar-group.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-group.template.d.ts","sourceRoot":"","sources":["../../../../src/components/content/avatar-group/avatar-group.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEzD,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,eAAe,wCAgD7D"}

package/dist/components/content/avatar-group/avatar-group.template.js

@@ -0,0 +1,50 @@
+import { html, nothing } from 'lit';
+export function avatarGroupTemplate(component) {
+    const overflow = component._overflow;
+    const label = component._t('components.avatar-group.overflow-label')
+        .replace('{count}', String(overflow.length));
+    return html `
+		<style id="generated-rules"></style>
+		<div class="avatar-group"
+			role=${component.accessibleLabel ? 'group' : nothing}
+			aria-label=${component.accessibleLabel || nothing}
+		>
+			<slot @slotchange=${component._onSlotChange}></slot>
+			${overflow.length > 0 ? html `
+				<button class="avatar-group__overflow-button"
+					id=${component._triggerId}
+					type="button"
+					aria-label=${label}
+					popovertarget=${component._popoverId}
+				>
+					+${overflow.length}
+				</button>
+			` : nothing}
+		</div>
+		${overflow.length > 0 ? html `
+			<nldd-popover
+				id=${component._popoverId}
+				anchor=${component._triggerId}
+				placement="bottom-end"
+				accessible-label=${component._t('components.avatar-group.overflow-popover-label')}
+			>
+				<nldd-container padding-inline="16" padding-block="8">
+					<nldd-list dividers="never">
+						${overflow.map(entry => html `
+							<nldd-list-item size="sm">
+								<nldd-cell width="fit-content">
+									${entry.avatar}
+								</nldd-cell>
+								<nldd-spacer-cell size="8"></nldd-spacer-cell>
+								<nldd-text-cell width="full"
+									text=${entry.name}
+								></nldd-text-cell>
+							</nldd-list-item>
+						`)}
+					</nldd-list>
+				</nldd-container>
+			</nldd-popover>
+		` : nothing}
+	`;
+}
+//# sourceMappingURL=avatar-group.template.js.map

package/dist/components/content/avatar-group/avatar-group.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-group.template.js","sourceRoot":"","sources":["../../../../src/components/content/avatar-group/avatar-group.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAGpC,MAAM,UAAU,mBAAmB,CAAC,SAA0B;IAC7D,MAAM,QAAQ,GAAG,SAAS,CAAC,SAAS,CAAC;IACrC,MAAM,KAAK,GAAG,SAAS,CAAC,EAAE,CAAC,wCAAwC,CAAC;SAClE,OAAO,CAAC,SAAS,EAAE,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC;IAE9C,OAAO,IAAI,CAAA;;;UAGF,SAAS,CAAC,eAAe,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO;gBACvC,SAAS,CAAC,eAAe,IAAI,OAAO;;uBAE7B,SAAS,CAAC,aAAa;KACzC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA;;UAErB,SAAS,CAAC,UAAU;;kBAEZ,KAAK;qBACF,SAAS,CAAC,UAAU;;QAEjC,QAAQ,CAAC,MAAM;;IAEnB,CAAC,CAAC,CAAC,OAAO;;IAEV,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA;;SAErB,SAAS,CAAC,UAAU;aAChB,SAAS,CAAC,UAAU;;uBAEV,SAAS,CAAC,EAAE,CAAC,gDAAgD,CAAC;;;;QAI7E,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,CAAA;;;WAGvB,KAAK,CAAC,MAAM;;;;gBAIP,KAAK,CAAC,IAAI;;;OAGnB,CAAC;;;;GAIL,CAAC,CAAC,CAAC,OAAO;EACX,CAAC;AACH,CAAC"}

package/dist/components/content/blockquote/blockquote.d.ts

@@ -4,18 +4,18 @@
  * Toont een citaat met optionele bron-attributie.
  *
  * @element nldd-blockquote
- * @attr {string} cite - URL van de bron (wordt doorgegeven aan het <blockquote> element)
+ * @attr {string} cite - URL of the source (forwarded to the <blockquote> element)
  *
  * @slot - De citaat-paragra(a)f(en) — gebruik bij voorkeur <p>-elementen
  * @slot attribution - Optionele bronvermelding (auteur, titel, etc.). Ook een
- *   nldd-byline mag hier; het kastlijntje ("— ") wordt dan weggelaten.
+ *   An nldd-identity is allowed here; the em dash ("— ") is then left out.
  */
 import { LitElement } from 'lit';
 export declare class NLDDBlockquote extends LitElement {
     static styles: import("lit").CSSResult;
     cite: string | undefined;
     _hasAttribution: boolean;
-    _hasBylineAttribution: boolean;
+    _hasIdentityAttribution: boolean;
     /** @internal */
     _handleAttributionSlotChange: (e: Event) => void;
     render(): import("lit-html").TemplateResult<1>;

package/dist/components/content/blockquote/blockquote.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"blockquote.d.ts","sourceRoot":"","sources":["../../../../src/components/content/blockquote/blockquote.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,qBACa,cAAe,SAAQ,UAAU;IAC7C,OAAgB,MAAM,0BAAoB;IAG1C,IAAI,EAAE,MAAM,GAAG,SAAS,CAAa;IAGrC,eAAe,UAAS;IAGxB,qBAAqB,UAAS;IAE9B,gBAAgB;IAChB,4BAA4B,GAAI,GAAG,KAAK,KAAG,IAAI,CAY7C;IAEO,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,iBAAiB,EAAE,cAAc,CAAC;KAClC;CACD"}
+{"version":3,"file":"blockquote.d.ts","sourceRoot":"","sources":["../../../../src/components/content/blockquote/blockquote.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,qBACa,cAAe,SAAQ,UAAU;IAC7C,OAAgB,MAAM,0BAAoB;IAG1C,IAAI,EAAE,MAAM,GAAG,SAAS,CAAa;IAGrC,eAAe,UAAS;IAGxB,uBAAuB,UAAS;IAEhC,gBAAgB;IAChB,4BAA4B,GAAI,GAAG,KAAK,KAAG,IAAI,CAY7C;IAEO,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,iBAAiB,EAAE,cAAc,CAAC;KAClC;CACD"}

package/dist/components/content/blockquote/blockquote.js

@@ -4,11 +4,11 @@
  * Toont een citaat met optionele bron-attributie.
  *
  * @element nldd-blockquote
- * @attr {string} cite - URL van de bron (wordt doorgegeven aan het <blockquote> element)
+ * @attr {string} cite - URL of the source (forwarded to the <blockquote> element)
  *
  * @slot - De citaat-paragra(a)f(en) — gebruik bij voorkeur <p>-elementen
  * @slot attribution - Optionele bronvermelding (auteur, titel, etc.). Ook een
- *   nldd-byline mag hier; het kastlijntje ("— ") wordt dan weggelaten.
+ *   An nldd-identity is allowed here; the em dash ("— ") is then left out.
  */
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -25,7 +25,7 @@ let NLDDBlockquote = class NLDDBlockquote extends LitElement {
         super(...arguments);
         this.cite = undefined;
         this._hasAttribution = false;
-        this._hasBylineAttribution = false;
+        this._hasIdentityAttribution = false;
         /** @internal */
         this._handleAttributionSlotChange = (e) => {
             const slot = e.target;
@@ -34,12 +34,12 @@ let NLDDBlockquote = class NLDDBlockquote extends LitElement {
                     return true;
                 return (n.textContent ?? '').trim().length > 0;
             });
-            // A byline brings its own layout (avatars + stacked text); the leading
+            // A identity brings its own layout (avatars + stacked text); the leading
             // em-dash assumes inline text and would wrap onto its own line above
-            // the block, so it is suppressed for byline attributions. Matched by
+            // the block, so it is suppressed for identity attributions. Matched by
             // tag name rather than instanceof to avoid statically importing (and so
-            // bundling) nldd-byline into every blockquote consumer.
-            this._hasBylineAttribution = slot.assignedElements({ flatten: true }).some(el => el.tagName === 'NLDD-BYLINE');
+            // bundling) nldd-identity into every blockquote consumer.
+            this._hasIdentityAttribution = slot.assignedElements({ flatten: true }).some(el => el.tagName === 'NLDD-IDENTITY');
         };
     }
     render() {
@@ -55,7 +55,7 @@ __decorate([
 ], NLDDBlockquote.prototype, "_hasAttribution", void 0);
 __decorate([
     state()
-], NLDDBlockquote.prototype, "_hasBylineAttribution", void 0);
+], NLDDBlockquote.prototype, "_hasIdentityAttribution", void 0);
 NLDDBlockquote = __decorate([
     customElement('nldd-blockquote')
 ], NLDDBlockquote);

package/dist/components/content/blockquote/blockquote.js.map

@@ -1 +1 @@
-{"version":3,"file":"blockquote.js","sourceRoot":"","sources":["../../../../src/components/content/blockquote/blockquote.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;;;;;;;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAG7C,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAAvC;;QAIN,SAAI,GAAuB,SAAS,CAAC;QAGrC,oBAAe,GAAG,KAAK,CAAC;QAGxB,0BAAqB,GAAG,KAAK,CAAC;QAE9B,gBAAgB;QAChB,iCAA4B,GAAG,CAAC,CAAQ,EAAQ,EAAE;YACjD,MAAM,IAAI,GAAG,CAAC,CAAC,MAAyB,CAAC;YACzC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE;gBACrE,IAAI,CAAC,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY;oBAAE,OAAO,IAAI,CAAC;gBAClD,OAAO,CAAC,CAAC,CAAC,WAAW,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;YAChD,CAAC,CAAC,CAAC;YACH,uEAAuE;YACvE,qEAAqE;YACrE,qEAAqE;YACrE,wEAAwE;YACxE,wDAAwD;YACxD,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,OAAO,KAAK,aAAa,CAAC,CAAC;QAChH,CAAC,CAAC;IAKH,CAAC;IAHS,MAAM;QACd,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAC;IACvB,CAAC;;AA5Be,qBAAM,GAAG,gBAAgB,AAAnB,CAAoB;AAG1C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACU;AAGrC;IADC,KAAK,EAAE;uDACgB;AAGxB;IADC,KAAK,EAAE;6DACsB;AAVlB,cAAc;IAD1B,aAAa,CAAC,iBAAiB,CAAC;GACpB,cAAc,CA8B1B"}
+{"version":3,"file":"blockquote.js","sourceRoot":"","sources":["../../../../src/components/content/blockquote/blockquote.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;;;;;;;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAG7C,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAAvC;;QAIN,SAAI,GAAuB,SAAS,CAAC;QAGrC,oBAAe,GAAG,KAAK,CAAC;QAGxB,4BAAuB,GAAG,KAAK,CAAC;QAEhC,gBAAgB;QAChB,iCAA4B,GAAG,CAAC,CAAQ,EAAQ,EAAE;YACjD,MAAM,IAAI,GAAG,CAAC,CAAC,MAAyB,CAAC;YACzC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE;gBACrE,IAAI,CAAC,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY;oBAAE,OAAO,IAAI,CAAC;gBAClD,OAAO,CAAC,CAAC,CAAC,WAAW,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;YAChD,CAAC,CAAC,CAAC;YACH,yEAAyE;YACzE,qEAAqE;YACrE,uEAAuE;YACvE,wEAAwE;YACxE,0DAA0D;YAC1D,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,OAAO,KAAK,eAAe,CAAC,CAAC;QACpH,CAAC,CAAC;IAKH,CAAC;IAHS,MAAM;QACd,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAC;IACvB,CAAC;;AA5Be,qBAAM,GAAG,gBAAgB,AAAnB,CAAoB;AAG1C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACU;AAGrC;IADC,KAAK,EAAE;uDACgB;AAGxB;IADC,KAAK,EAAE;+DACwB;AAVpB,cAAc;IAD1B,aAAa,CAAC,iBAAiB,CAAC;GACpB,cAAc,CA8B1B"}

package/dist/components/content/blockquote/blockquote.styles.js

@@ -69,7 +69,7 @@ export const blockquoteStyles = css `
 		content: '— ' / '';
 	}
 
-	.blockquote__attribution.is-byline::before {
+	.blockquote__attribution.is-identity::before {
 		content: none;
 	}
 

package/dist/components/content/blockquote/blockquote.template.js

@@ -7,7 +7,7 @@ export function template(component) {
 			<div class="blockquote__quote">
 				<slot></slot>
 			</div>
-			<slot class="blockquote__attribution${component._hasBylineAttribution ? ' is-byline' : ''}"
+			<slot class="blockquote__attribution${component._hasIdentityAttribution ? ' is-identity' : ''}"
 				name="attribution"
 				?hidden=${!component._hasAttribution}
 				@slotchange=${component._handleAttributionSlotChange}

package/dist/components/content/blockquote/blockquote.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"blockquote.template.js","sourceRoot":"","sources":["../../../../src/components/content/blockquote/blockquote.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAGpC,MAAM,UAAU,QAAQ,CAAC,SAAyB;IACjD,OAAO,IAAI,CAAA;;UAEF,SAAS,CAAC,IAAI,IAAI,OAAO;;;;;yCAKM,SAAS,CAAC,qBAAqB,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE;;cAE9E,CAAC,SAAS,CAAC,eAAe;kBACtB,SAAS,CAAC,4BAA4B;;;EAGtD,CAAC;AACH,CAAC"}
+{"version":3,"file":"blockquote.template.js","sourceRoot":"","sources":["../../../../src/components/content/blockquote/blockquote.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAGpC,MAAM,UAAU,QAAQ,CAAC,SAAyB;IACjD,OAAO,IAAI,CAAA;;UAEF,SAAS,CAAC,IAAI,IAAI,OAAO;;;;;yCAKM,SAAS,CAAC,uBAAuB,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;;cAElF,CAAC,SAAS,CAAC,eAAe;kBACtB,SAAS,CAAC,4BAA4B;;;EAGtD,CAAC;AACH,CAAC"}

package/dist/components/content/code-viewer/code-viewer.d.ts

@@ -4,12 +4,12 @@ import type { NLDDCodeViewerTranslations } from './code-viewer.i18n.js';
 import '../../actions/icon-button/icon-button.js';
 import '../tooltip/tooltip.js';
 export type CodeViewerCopyState = 'idle' | 'success' | 'failure';
+export type CodeViewerVariant = 'box-tinted' | 'box-base' | 'simple';
 export declare class NLDDCodeViewer extends NLDDCodeMirrorElement {
     static styles: import("lit").CSSResult;
-    /** Visual style. `box` (default) is a framed card; `simple` drops the frame. */
-    variant: 'simple' | 'box';
-    /** Surface fill when `variant="box"`. */
-    background: 'tinted' | 'base';
+    /** Visual style. The `box` values are a framed card and name the surface they
+     *  fill with; `simple` drops the frame. */
+    variant: CodeViewerVariant;
     language: string;
     /** Hide the copy-to-clipboard button (shown by default). */
     noCopy: boolean;