@nldd/design-system 0.8.67 → 0.8.69

package/dist/components/components.js

@@ -1,106 +1,107 @@
-import { o, q, r, u, v, w, x, y, z, A, B, D, F, G, H, J, K, M, O, P, Q, R, S, T, U, V, W, X, Y, Z, _, $, a0, a1, a2, a3, a4, a5, a6, a7, a8, a9, aa, ab, ac, ad, ae, af, ag, ah, ai, aj, ak, al, am, an, ao, ap, aq, ar, as, at, au, av, aw, ax, ay, az, aA, aB, aC, aD, aE, aF, aG, aH, aI, aJ, aK, aL, aM, aN, aO, aP, aQ, aR, aS, aT, aU, aV, aW, aX, aY, aZ, a_, a$, b0, b1, b2, b3, b4, b5, b6 } from "./index-DjsXjoZJ.js";
+import { o, q, r, u, v, w, x, y, z, A, B, D, F, G, H, J, K, M, O, P, Q, R, S, T, U, V, W, X, Y, Z, _, $, a0, a1, a2, a3, a4, a5, a6, a7, a8, a9, aa, ab, ac, ad, ae, af, ag, ah, ai, aj, ak, al, am, an, ao, ap, aq, ar, as, at, au, av, aw, ax, ay, az, aA, aB, aC, aD, aE, aF, aG, aH, aI, aJ, aK, aL, aM, aN, aO, aP, aQ, aR, aS, aT, aU, aV, aW, aX, aY, aZ, a_, a$, b0, b1, b2, b3, b4, b5, b6, b7 } from "./index-VwuVCCal.js";
 export {
   o as NLDDActivityIndicator,
   q as NLDDAppView,
-  r as NLDDBadge,
-  u as NLDDBanner,
-  v as NLDDBarSplitView,
-  w as NLDDBlockquote,
-  x as NLDDBox,
-  y as NLDDBreadcrumbs,
-  z as NLDDBreadcrumbsItem,
-  A as NLDDButton,
-  B as NLDDButtonBar,
-  D as NLDDButtonGroup,
-  F as NLDDByline,
-  G as NLDDCard,
-  H as NLDDCell,
-  J as NLDDCheckbox,
-  K as NLDDCheckboxField,
-  M as NLDDCodeEditor,
-  O as NLDDCodeViewer,
-  P as NLDDCollection,
-  Q as NLDDComboBox,
-  R as NLDDContainer,
-  S as NLDDDescriptionCell,
-  T as NLDDDivider,
-  U as NLDDDocumentTabBar,
-  V as NLDDDragHandleCell,
-  W as NLDDDropdown,
-  X as NLDDForm,
-  Y as NLDDFormActions,
-  Z as NLDDFormField,
-  _ as NLDDFormSection,
-  $ as NLDDFullBleedSection,
-  a0 as NLDDHero,
-  a1 as NLDDIcon,
-  a2 as NLDDIconButton,
-  a3 as NLDDIconCell,
-  a4 as NLDDImage,
-  a5 as NLDDInlineDialog,
-  a6 as NLDDJustInTimeEducation,
-  a7 as NLDDKeyboardShortcut,
-  a8 as NLDDLink,
-  a9 as NLDDList,
-  aa as NLDDListItem,
-  ab as NLDDMenu,
-  ac as NLDDMenuBar,
-  ad as NLDDMenuBarItem,
-  ae as NLDDModalDialog,
-  af as NLDDMultiLineTextField,
-  ag as NLDDNavigationSplitView,
-  ah as NLDDNumberField,
-  ai as NLDDOneHalfOneHalfSection,
-  aj as NLDDOneThirdTwoThirdsSection,
-  ak as NLDDPage,
-  al as NLDDPageFooter,
-  am as NLDDPageFooterLegalBar,
-  an as NLDDPageFooterLegalBarItem,
-  ao as NLDDPagination,
-  ap as NLDDPasswordField,
-  aq as NLDDPopover,
-  ar as NLDDProgressBar,
-  as as NLDDProgressBarSegmentIndicator,
-  at as NLDDProgressCircle,
-  au as NLDDProgressCircleSegmentIndicator,
-  av as NLDDRadioButton,
-  aw as NLDDRadioButtonField,
-  ax as NLDDRadioButtonGroup,
-  ay as NLDDRichText,
-  az as NLDDSearchField,
-  aA as NLDDSegmentedControl,
-  aB as NLDDSheet,
-  aC as NLDDSideBySideSplitView,
-  aD as NLDDSidebarSection,
-  aE as NLDDSimpleSection,
-  aF as NLDDSkipLink,
-  aG as NLDDSpacer,
-  aH as NLDDSpacerCell,
-  aI as NLDDSplitButton,
-  aJ as NLDDSplitViewPane,
-  aK as NLDDStackedSplitView,
-  aL as NLDDStatusBar,
-  aM as NLDDStepper,
-  aN as NLDDSwitch,
-  aO as NLDDSwitchField,
-  aP as NLDDTabBar,
-  aQ as NLDDTable,
-  aR as NLDDTableRow,
-  aS as NLDDTag,
-  aT as NLDDTextCell,
-  aU as NLDDTextEditor,
-  aV as NLDDTextField,
-  aW as NLDDTimelineTrackCell,
-  aX as NLDDTitle,
-  aY as NLDDTitleCell,
-  aZ as NLDDToggleButton,
-  a_ as NLDDToggleButtonGroup,
-  a$ as NLDDToken,
-  b0 as NLDDTokenField,
-  b1 as NLDDToolbar,
-  b2 as NLDDTooltip,
-  b3 as NLDDTopNavigationBar,
-  b4 as NLDDTopTitleBar,
-  b5 as NLDDTwoThirdsOneThirdSection,
-  b6 as NLDDWindow
+  r as NLDDAvatar,
+  u as NLDDBadge,
+  v as NLDDBanner,
+  w as NLDDBarSplitView,
+  x as NLDDBlockquote,
+  y as NLDDBox,
+  z as NLDDBreadcrumbs,
+  A as NLDDBreadcrumbsItem,
+  B as NLDDButton,
+  D as NLDDButtonBar,
+  F as NLDDButtonGroup,
+  G as NLDDByline,
+  H as NLDDCard,
+  J as NLDDCell,
+  K as NLDDCheckbox,
+  M as NLDDCheckboxField,
+  O as NLDDCodeEditor,
+  P as NLDDCodeViewer,
+  Q as NLDDCollection,
+  R as NLDDComboBox,
+  S as NLDDContainer,
+  T as NLDDDescriptionCell,
+  U as NLDDDivider,
+  V as NLDDDocumentTabBar,
+  W as NLDDDragHandleCell,
+  X as NLDDDropdown,
+  Y as NLDDForm,
+  Z as NLDDFormActions,
+  _ as NLDDFormField,
+  $ as NLDDFormSection,
+  a0 as NLDDFullBleedSection,
+  a1 as NLDDHero,
+  a2 as NLDDIcon,
+  a3 as NLDDIconButton,
+  a4 as NLDDIconCell,
+  a5 as NLDDImage,
+  a6 as NLDDInlineDialog,
+  a7 as NLDDJustInTimeEducation,
+  a8 as NLDDKeyboardShortcut,
+  a9 as NLDDLink,
+  aa as NLDDList,
+  ab as NLDDListItem,
+  ac as NLDDMenu,
+  ad as NLDDMenuBar,
+  ae as NLDDMenuBarItem,
+  af as NLDDModalDialog,
+  ag as NLDDMultiLineTextField,
+  ah as NLDDNavigationSplitView,
+  ai as NLDDNumberField,
+  aj as NLDDOneHalfOneHalfSection,
+  ak as NLDDOneThirdTwoThirdsSection,
+  al as NLDDPage,
+  am as NLDDPageFooter,
+  an as NLDDPageFooterLegalBar,
+  ao as NLDDPageFooterLegalBarItem,
+  ap as NLDDPagination,
+  aq as NLDDPasswordField,
+  ar as NLDDPopover,
+  as as NLDDProgressBar,
+  at as NLDDProgressBarSegmentIndicator,
+  au as NLDDProgressCircle,
+  av as NLDDProgressCircleSegmentIndicator,
+  aw as NLDDRadioButton,
+  ax as NLDDRadioButtonField,
+  ay as NLDDRadioButtonGroup,
+  az as NLDDRichText,
+  aA as NLDDSearchField,
+  aB as NLDDSegmentedControl,
+  aC as NLDDSheet,
+  aD as NLDDSideBySideSplitView,
+  aE as NLDDSidebarSection,
+  aF as NLDDSimpleSection,
+  aG as NLDDSkipLink,
+  aH as NLDDSpacer,
+  aI as NLDDSpacerCell,
+  aJ as NLDDSplitButton,
+  aK as NLDDSplitViewPane,
+  aL as NLDDStackedSplitView,
+  aM as NLDDStatusBar,
+  aN as NLDDStepper,
+  aO as NLDDSwitch,
+  aP as NLDDSwitchField,
+  aQ as NLDDTabBar,
+  aR as NLDDTable,
+  aS as NLDDTableRow,
+  aT as NLDDTag,
+  aU as NLDDTextCell,
+  aV as NLDDTextEditor,
+  aW as NLDDTextField,
+  aX as NLDDTimelineTrackCell,
+  aY as NLDDTitle,
+  aZ as NLDDTitleCell,
+  a_ as NLDDToggleButton,
+  a$ as NLDDToggleButtonGroup,
+  b0 as NLDDToken,
+  b1 as NLDDTokenField,
+  b2 as NLDDToolbar,
+  b3 as NLDDTooltip,
+  b4 as NLDDTopNavigationBar,
+  b5 as NLDDTopTitleBar,
+  b6 as NLDDTwoThirdsOneThirdSection,
+  b7 as NLDDWindow
 };

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

@@ -0,0 +1,96 @@
+/**
+ * NLDD Design System Avatar Component (Lit + TypeScript)
+ *
+ * Toont één persoon of organisatie als een compacte, ronde (persoon) of
+ * afgeronde (organisatie) representatie. De inhoud volgt een vaste
+ * terugvalketen: een afbeelding wanneer `src` laadt, anders de initialen
+ * (uit `initials` of afgeleid uit `name`), en anders een terugval-icoon.
+ *
+ * `type` bepaalt zowel de vorm als het terugval-icoon: `person` geeft een
+ * cirkel met een person-icoon, `organization` een afgeronde vierkant met een
+ * building-icoon. De vorm hoort dus bij de betekenis en is niet los
+ * instelbaar. Overschrijf het terugval-icoon desgewenst met `icon`.
+ *
+ * Zonder `size` schaalt de avatar mee met zijn container (net als `nldd-icon`);
+ * een vaste maat (dezelfde spacer-uitgelijnde schaal, 16 tot en met 96) is de
+ * uitzondering. De initialen en het icoon schalen mee. Brede initialen (WW, MMM)
+ * worden automatisch teruggeschaald zodat ze binnen de schijf blijven.
+ *
+ * Toegankelijkheid: het host-element draagt de betekenis. Met een `name`
+ * (en zonder `decorative`) krijgt het `role="img"` met de naam als label.
+ * Staat de naam al als tekst ernaast (bijvoorbeeld in een byline), zet dan
+ * `decorative` zodat de avatar voor hulpsoftware verborgen blijft. Een dode
+ * `src` valt automatisch terug op de initialen of het icoon, nooit op een
+ * gebroken-afbeelding-icoon.
+ *
+ * @element nldd-avatar
+ *
+ * @attr {string} src         - Afbeeldingsbron; valt bij een laadfout terug op initialen/icoon
+ * @attr {string} srcset      - Responsive source set voor de afbeelding (het component zet zelf `sizes`)
+ * @attr {string} name        - Naam van de persoon/organisatie; levert de afgeleide initialen en het toegankelijke label
+ * @attr {string} initials    - Expliciete initialen, max 3 tekens (overschrijft de afleiding uit `name`; ook voor organisatie-acroniemen)
+ * @attr {string} type        - `person` (cirkel, person-icoon) of `organization` (afgerond, building-icoon); standaard `person`
+ * @attr {string} icon        - Overschrijft het type-afhankelijke terugval-icoon
+ * @attr {string} size        - Vaste maat in px (spacer-uitgelijnd: 16, 20, 24, 28, 32, 40, 44, 48, 56, 64, 80, 96). Leeg = schaal mee met de container (net als nldd-icon); de initialen en het icoon schalen mee
+ * @attr {string} color         - `default` (neutrale vulling) of `inherit` (vulling in de content-kleur: de `--context-content-color`-channel, of `currentColor` als die niet gezet is; tekst in de contrastkleur, zodat de avatar een icoon in bijvoorbeeld een knop kan vervangen); standaard `default`
+ * @attr {boolean} icon-aligned - Krimpt de zichtbare schijf naar 5/6 van de host, gecentreerd, zodat de avatar optisch uitlijnt met een icoon op hetzelfde grid (een icoon-glyph heeft ingebouwde marge)
+ * @attr {boolean} decorative   - Verbergt de avatar voor hulpsoftware (gebruik wanneer de naam er al als tekst naast staat)
+ *
+ * @example
+ * ```html
+ * <nldd-avatar name="Bart van de Biezen"></nldd-avatar>
+ * <nldd-avatar name="Jan Jansen" src="/avatars/jan.jpg" size="48"></nldd-avatar>
+ * <nldd-avatar type="organization" name="Kamer van Koophandel" initials="KvK"></nldd-avatar>
+ * <nldd-avatar name="Bart van de Biezen" color="inherit"></nldd-avatar>
+ * ```
+ */
+import { LitElement, type PropertyValues } from 'lit';
+import '../icon/icon.js';
+export type AvatarType = 'person' | 'organization';
+export type AvatarColor = 'default' | 'inherit';
+/** Empty = scale to the container (like nldd-icon); the rest pin a fixed px size. */
+export type AvatarSize = '' | '16' | '20' | '24' | '28' | '32' | '40' | '44' | '48' | '56' | '64' | '80' | '96';
+export declare class NLDDAvatar extends LitElement {
+    static styles: import("lit").CSSResult;
+    src: string;
+    srcset: string;
+    name: string;
+    initials: string;
+    icon: string;
+    type: AvatarType;
+    color: AvatarColor;
+    size: AvatarSize;
+    iconAligned: boolean;
+    decorative: boolean;
+    /** Set when the image errors, so the template falls through to the next
+     *  content step. Not private: the template module reads it. */
+    _imageFailed: boolean;
+    /** Initials shown when there is no image: an explicit `initials` wins,
+     *  otherwise the first letter of the first and last word of `name`. */
+    get resolvedInitials(): string;
+    /** Fallback icon when there is neither image nor initials. */
+    get resolvedIcon(): string;
+    _onImageError: () => void;
+    /** Re-measures the initials fit when the disc lays out or resizes; covers the
+     *  case where the avatar is only sized after first render (e.g. filling a
+     *  container that appears later). Content changes are handled in updated(). */
+    private _resizeObserver;
+    willUpdate(changed: PropertyValues<this>): void;
+    firstUpdated(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: PropertyValues<this>): void;
+    /** Shrink wide initials so they always fit the disc. The fit factor is the
+     *  disc's usable width over the initials' natural width (scrollWidth ignores
+     *  the applied transform, so the measurement stays stable); capped at 1 so
+     *  narrow initials are never enlarged. Applied via --_initials-fit (a
+     *  transform scale), so no reflow and it stays measurable. */
+    private _fitInitials;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nldd-avatar': NLDDAvatar;
+    }
+}
+//# sourceMappingURL=avatar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../../src/components/content/avatar/avatar.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,OAAO,EAAE,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAKtD,OAAO,iBAAiB,CAAC;AAEzB,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,cAAc,CAAC;AAEnD,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,SAAS,CAAC;AAOhD,qFAAqF;AACrF,MAAM,MAAM,UAAU,GACrB,EAAE,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAExF,qBACa,UAAW,SAAQ,UAAU;IACzC,OAAgB,MAAM,0BAAgB;IAGtC,GAAG,SAAM;IAGT,MAAM,SAAM;IAGZ,IAAI,SAAM;IAGV,QAAQ,SAAM;IAGd,IAAI,SAAM;IAGV,IAAI,EAAE,UAAU,CAAY;IAG5B,KAAK,EAAE,WAAW,CAAa;IAG/B,IAAI,EAAE,UAAU,CAAM;IAGtB,WAAW,UAAS;IAGpB,UAAU,UAAS;IAEnB;mEAC+D;IAE/D,YAAY,UAAS;IAErB;2EACuE;IACvE,IAAI,gBAAgB,IAAI,MAAM,CAO7B;IAED,8DAA8D;IAC9D,IAAI,YAAY,IAAI,MAAM,CAGzB;IAED,aAAa,QAAO,IAAI,CAEtB;IAEF;;mFAE+E;IAC/E,OAAO,CAAC,eAAe,CAAiD;IAE/D,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAM/C,YAAY,IAAI,IAAI;IAKpB,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAK5B,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IA2BrD;;;;kEAI8D;IAC9D,OAAO,CAAC,YAAY;IAaX,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,aAAa,EAAE,UAAU,CAAC;KAC1B;CACD"}

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

@@ -0,0 +1,210 @@
+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;
+};
+/**
+ * NLDD Design System Avatar Component (Lit + TypeScript)
+ *
+ * Toont één persoon of organisatie als een compacte, ronde (persoon) of
+ * afgeronde (organisatie) representatie. De inhoud volgt een vaste
+ * terugvalketen: een afbeelding wanneer `src` laadt, anders de initialen
+ * (uit `initials` of afgeleid uit `name`), en anders een terugval-icoon.
+ *
+ * `type` bepaalt zowel de vorm als het terugval-icoon: `person` geeft een
+ * cirkel met een person-icoon, `organization` een afgeronde vierkant met een
+ * building-icoon. De vorm hoort dus bij de betekenis en is niet los
+ * instelbaar. Overschrijf het terugval-icoon desgewenst met `icon`.
+ *
+ * Zonder `size` schaalt de avatar mee met zijn container (net als `nldd-icon`);
+ * een vaste maat (dezelfde spacer-uitgelijnde schaal, 16 tot en met 96) is de
+ * uitzondering. De initialen en het icoon schalen mee. Brede initialen (WW, MMM)
+ * worden automatisch teruggeschaald zodat ze binnen de schijf blijven.
+ *
+ * Toegankelijkheid: het host-element draagt de betekenis. Met een `name`
+ * (en zonder `decorative`) krijgt het `role="img"` met de naam als label.
+ * Staat de naam al als tekst ernaast (bijvoorbeeld in een byline), zet dan
+ * `decorative` zodat de avatar voor hulpsoftware verborgen blijft. Een dode
+ * `src` valt automatisch terug op de initialen of het icoon, nooit op een
+ * gebroken-afbeelding-icoon.
+ *
+ * @element nldd-avatar
+ *
+ * @attr {string} src         - Afbeeldingsbron; valt bij een laadfout terug op initialen/icoon
+ * @attr {string} srcset      - Responsive source set voor de afbeelding (het component zet zelf `sizes`)
+ * @attr {string} name        - Naam van de persoon/organisatie; levert de afgeleide initialen en het toegankelijke label
+ * @attr {string} initials    - Expliciete initialen, max 3 tekens (overschrijft de afleiding uit `name`; ook voor organisatie-acroniemen)
+ * @attr {string} type        - `person` (cirkel, person-icoon) of `organization` (afgerond, building-icoon); standaard `person`
+ * @attr {string} icon        - Overschrijft het type-afhankelijke terugval-icoon
+ * @attr {string} size        - Vaste maat in px (spacer-uitgelijnd: 16, 20, 24, 28, 32, 40, 44, 48, 56, 64, 80, 96). Leeg = schaal mee met de container (net als nldd-icon); de initialen en het icoon schalen mee
+ * @attr {string} color         - `default` (neutrale vulling) of `inherit` (vulling in de content-kleur: de `--context-content-color`-channel, of `currentColor` als die niet gezet is; tekst in de contrastkleur, zodat de avatar een icoon in bijvoorbeeld een knop kan vervangen); standaard `default`
+ * @attr {boolean} icon-aligned - Krimpt de zichtbare schijf naar 5/6 van de host, gecentreerd, zodat de avatar optisch uitlijnt met een icoon op hetzelfde grid (een icoon-glyph heeft ingebouwde marge)
+ * @attr {boolean} decorative   - Verbergt de avatar voor hulpsoftware (gebruik wanneer de naam er al als tekst naast staat)
+ *
+ * @example
+ * ```html
+ * <nldd-avatar name="Bart van de Biezen"></nldd-avatar>
+ * <nldd-avatar name="Jan Jansen" src="/avatars/jan.jpg" size="48"></nldd-avatar>
+ * <nldd-avatar type="organization" name="Kamer van Koophandel" initials="KvK"></nldd-avatar>
+ * <nldd-avatar name="Bart van de Biezen" color="inherit"></nldd-avatar>
+ * ```
+ */
+import { LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { reflectNonDefault } from '../../../utilities/reflect-non-default.js';
+import { avatarStyles } from './avatar.styles.js';
+import { avatarTemplate } from './avatar.template.js';
+import '../icon/icon.js';
+/** Fraction of the disc width the initials may occupy before they are scaled to
+ *  fit. Leaves margin inside the circle so wide glyphs stay clear of the edge
+ *  (the circle narrows above/below the centre, so caps need room). */
+const INITIALS_FIT_RATIO = 0.75;
+let NLDDAvatar = class NLDDAvatar extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.src = '';
+        this.srcset = '';
+        this.name = '';
+        this.initials = '';
+        this.icon = '';
+        this.type = 'person';
+        this.color = 'default';
+        this.size = '';
+        this.iconAligned = false;
+        this.decorative = false;
+        /** Set when the image errors, so the template falls through to the next
+         *  content step. Not private: the template module reads it. */
+        this._imageFailed = false;
+        this._onImageError = () => {
+            this._imageFailed = true;
+        };
+        /** Re-measures the initials fit when the disc lays out or resizes; covers the
+         *  case where the avatar is only sized after first render (e.g. filling a
+         *  container that appears later). Content changes are handled in updated(). */
+        this._resizeObserver = new ResizeObserver(() => this._fitInitials());
+    }
+    /** Initials shown when there is no image: an explicit `initials` wins,
+     *  otherwise the first letter of the first and last word of `name`. */
+    get resolvedInitials() {
+        if (this.initials)
+            return this.initials.slice(0, 3);
+        const words = this.name.trim().split(/\s+/).filter(Boolean);
+        if (words.length === 0)
+            return '';
+        const first = words[0].charAt(0);
+        const last = words.length > 1 ? words[words.length - 1].charAt(0) : '';
+        return (first + last).toUpperCase();
+    }
+    /** Fallback icon when there is neither image nor initials. */
+    get resolvedIcon() {
+        if (this.icon)
+            return this.icon;
+        return this.type === 'organization' ? 'building' : 'person';
+    }
+    willUpdate(changed) {
+        // Either source changing offers a fresh candidate, so give the image
+        // another chance rather than staying on the fallback forever.
+        if (changed.has('src') || changed.has('srcset'))
+            this._imageFailed = false;
+    }
+    firstUpdated() {
+        const disc = this.shadowRoot?.querySelector('.avatar');
+        if (disc)
+            this._resizeObserver.observe(disc);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        const disc = this.shadowRoot?.querySelector('.avatar');
+        if (this.hasUpdated && disc)
+            this._resizeObserver.observe(disc);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._resizeObserver.disconnect();
+    }
+    updated(changed) {
+        // Trim to match resolvedInitials: a whitespace-only name yields no
+        // initials (so the icon shows), and must not claim role="img" with a
+        // blank label either — that reads as an unnamed image.
+        const labelled = !this.decorative && this.name.trim() !== '';
+        if (labelled) {
+            this.setAttribute('role', 'img');
+            this.setAttribute('aria-label', this.name);
+            this.removeAttribute('aria-hidden');
+        }
+        else {
+            this.setAttribute('aria-hidden', 'true');
+            this.removeAttribute('role');
+            this.removeAttribute('aria-label');
+        }
+        // The disc size doesn't change when only its content does, so the
+        // ResizeObserver won't fire — re-measure here on every change that can
+        // swap the initials in or alter their text. src/_imageFailed matter too:
+        // a dead image falls back to initials that were never measured.
+        if (changed.has('name') || changed.has('initials')
+            || changed.has('src') || changed.has('srcset') || changed.has('_imageFailed')) {
+            this._fitInitials();
+        }
+    }
+    /** Shrink wide initials so they always fit the disc. The fit factor is the
+     *  disc's usable width over the initials' natural width (scrollWidth ignores
+     *  the applied transform, so the measurement stays stable); capped at 1 so
+     *  narrow initials are never enlarged. Applied via --_initials-fit (a
+     *  transform scale), so no reflow and it stays measurable. */
+    _fitInitials() {
+        const initials = this.shadowRoot?.querySelector('.avatar__initials');
+        const disc = this.shadowRoot?.querySelector('.avatar');
+        if (!initials || !disc) {
+            this.style.removeProperty('--_initials-fit');
+            return;
+        }
+        const available = disc.clientWidth * INITIALS_FIT_RATIO;
+        const actual = initials.scrollWidth;
+        if (available <= 0 || actual <= 0)
+            return; // not laid out yet — leave as is
+        this.style.setProperty('--_initials-fit', String(Math.min(1, available / actual)));
+    }
+    render() {
+        return avatarTemplate(this);
+    }
+};
+NLDDAvatar.styles = avatarStyles;
+__decorate([
+    property({ type: String })
+], NLDDAvatar.prototype, "src", void 0);
+__decorate([
+    property({ type: String })
+], NLDDAvatar.prototype, "srcset", void 0);
+__decorate([
+    property({ type: String })
+], NLDDAvatar.prototype, "name", void 0);
+__decorate([
+    property({ type: String })
+], NLDDAvatar.prototype, "initials", void 0);
+__decorate([
+    property({ type: String })
+], NLDDAvatar.prototype, "icon", void 0);
+__decorate([
+    property({ reflect: true, converter: reflectNonDefault('person') })
+], NLDDAvatar.prototype, "type", void 0);
+__decorate([
+    property({ reflect: true, converter: reflectNonDefault('default') })
+], NLDDAvatar.prototype, "color", void 0);
+__decorate([
+    property({ reflect: true, converter: reflectNonDefault('') })
+], NLDDAvatar.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'icon-aligned' })
+], NLDDAvatar.prototype, "iconAligned", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDAvatar.prototype, "decorative", void 0);
+__decorate([
+    state()
+], NLDDAvatar.prototype, "_imageFailed", void 0);
+NLDDAvatar = __decorate([
+    customElement('nldd-avatar')
+], NLDDAvatar);
+export { NLDDAvatar };
+//# sourceMappingURL=avatar.js.map

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

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

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

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

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

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

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

@@ -0,0 +1,126 @@
+import { css } from 'lit';
+import { inheritedTextReset } from '../../../assets/styles/style-resets.js';
+export const avatarStyles = css `
+	:host {
+		box-sizing: border-box;
+	}
+
+
+	/* # Host */
+
+	:host {
+		--_size: 100%;
+		--_corner-radius: var(--components-avatar-corner-radius);
+		--_background-color: var(--components-avatar-background-color);
+		--_content-color: var(--components-avatar-content-color);
+		--_icon-scale: 0.6;
+		--_initials-scale: 0.56;
+		--_initials-font-weight: 600;
+		--_initials-fit: 1;
+		--_shape-scale: 1;
+
+		${inheritedTextReset}
+		display: inline-flex;
+		width: var(--_size);
+		aspect-ratio: 1;
+		flex-shrink: 0;
+		align-items: center;
+		justify-content: center;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+	:host([type="organization"]) {
+		--_corner-radius: var(--components-avatar-organization-corner-radius);
+	}
+
+	/* Fill tracks the shared content-colour channel (set by list-item / table /
+	   menu), falling back to currentColor for buttons / standalone — mirrors
+	   nldd-activity-indicator. The fill (not the text) colour must resolve here,
+	   so .avatar keeps its inherited colour and the contrast text lives on the
+	   child elements. */
+	:host([color="inherit"]) {
+		--_background-color: var(--context-content-color, currentColor);
+		--_content-color: var(--semantics-content-contrast-color);
+	}
+
+	/* Shrink the visible disc to 5/6 of the host (centred), so the avatar lines
+	   up optically with an icon on the same grid (an icon glyph has built-in
+	   padding). The host keeps the grid cell size. */
+	:host([icon-aligned]) {
+		--_shape-scale: calc(5 / 6);
+	}
+
+
+	/* # Size — spacer-aligned, mirrors nldd-icon */
+
+	:host([size="16"]) { --_size: var(--primitives-space-16); }
+	:host([size="20"]) { --_size: var(--primitives-space-20); }
+	:host([size="24"]) { --_size: var(--primitives-space-24); }
+	:host([size="28"]) { --_size: var(--primitives-space-28); }
+	:host([size="32"]) { --_size: var(--primitives-space-32); }
+	:host([size="40"]) { --_size: var(--primitives-space-40); }
+	:host([size="44"]) { --_size: var(--primitives-space-44); }
+	:host([size="48"]) { --_size: var(--primitives-space-48); }
+	:host([size="56"]) { --_size: var(--primitives-space-56); }
+	:host([size="64"]) { --_size: var(--primitives-space-64); }
+	:host([size="80"]) { --_size: var(--primitives-space-80); }
+	:host([size="96"]) { --_size: var(--primitives-space-96); }
+
+
+	/* # Avatar */
+
+	/* container-type: inline-size lets the initials and icon scale (cqi) with the
+	   avatar's rendered width, so a fixed size and a filled (100%) size both work.
+	   inline-size (not size) leaves the block axis free, so aspect-ratio can drive
+	   the height without the box collapsing in flex/grid. color stays inherited
+	   here so --_background-color's currentColor (color="inherit") resolves to the
+	   surrounding colour, not the content colour. */
+	.avatar {
+		container-type: inline-size;
+		display: flex;
+		width: calc(100% * var(--_shape-scale));
+		height: calc(100% * var(--_shape-scale));
+		align-items: center;
+		justify-content: center;
+		overflow: hidden;
+		border-radius: var(--_corner-radius);
+		background-color: var(--_background-color);
+	}
+
+
+	/* # Content */
+
+	.avatar__image {
+		display: block;
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+
+	.avatar__initials {
+		font-family: var(--primitives-font-family-body);
+		font-weight: var(--_initials-font-weight);
+		font-size: calc(var(--_initials-scale) * 100cqi);
+		line-height: 1;
+		color: var(--_content-color);
+		/* fit-initials shrinks wide initials via this factor (measured in JS);
+		   transform (not font-size) so scrollWidth stays the natural width. */
+		transform: scale(var(--_initials-fit));
+		user-select: none;
+	}
+
+	.avatar__icon {
+		width: calc(var(--_icon-scale) * 100cqi);
+		color: var(--_content-color);
+	}
+
+	@media (forced-colors: active) {
+		.avatar {
+			border: var(--primitives-border-width-regular) solid CanvasText;
+		}
+	}
+`;
+//# sourceMappingURL=avatar.styles.js.map