@digital2analogue2/parsimony-components 0.1.0

package/dist/alert/alert.d.ts

@@ -0,0 +1,36 @@
+import { LitElement, nothing } from 'lit';
+export type AlertVariant = 'success' | 'warning' | 'danger' | 'info';
+/**
+ * An inline notification banner for success, warning, danger, and info messages.
+ *
+ * Use for form-level feedback, async status messages, and system notifications.
+ * For field-level validation errors, use `<rr-input error-text="...">` instead.
+ *
+ * @slot - Alert body content
+ * @slot icon - Optional icon in front of the heading (use <rr-icon>)
+ * @fires close - When the dismiss button is clicked (only fires when dismissible)
+ * @csspart alert - The root alert element
+ * @csspart heading - The heading text element
+ * @csspart content - The content slot wrapper
+ * @csspart dismiss - The dismiss button
+ */
+export declare class RrAlert extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Visual variant and semantic role. */
+    variant: AlertVariant;
+    /** Optional bold heading rendered above the body content. */
+    heading: string;
+    /** When true, renders a dismiss button that hides the alert and fires close. */
+    dismissible: boolean;
+    private _dismissed;
+    private _dismiss;
+    /** Reshow the alert after it has been dismissed. */
+    show(): void;
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'rr-alert': RrAlert;
+    }
+}
+//# sourceMappingURL=alert.d.ts.map

package/dist/alert/alert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../src/alert/alert.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,OAAO,EAAE,MAAM,KAAK,CAAC;AAGrD,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;AAErE;;;;;;;;;;;;;GAaG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACrC,MAAM,CAAC,MAAM,0BAwFX;IAEF,wCAAwC;IACX,OAAO,EAAE,YAAY,CAAa;IAC/D,6DAA6D;IACjD,OAAO,SAAM;IACzB,gFAAgF;IACpC,WAAW,UAAS;IAEvD,OAAO,CAAC,UAAU,CAAS;IAEpC,OAAO,CAAC,QAAQ;IAMhB,oDAAoD;IACpD,IAAI;IAKJ,MAAM;CA6BP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

package/dist/alert/alert.js

@@ -0,0 +1,179 @@
+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, html, css, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+/**
+ * An inline notification banner for success, warning, danger, and info messages.
+ *
+ * Use for form-level feedback, async status messages, and system notifications.
+ * For field-level validation errors, use `<rr-input error-text="...">` instead.
+ *
+ * @slot - Alert body content
+ * @slot icon - Optional icon in front of the heading (use <rr-icon>)
+ * @fires close - When the dismiss button is clicked (only fires when dismissible)
+ * @csspart alert - The root alert element
+ * @csspart heading - The heading text element
+ * @csspart content - The content slot wrapper
+ * @csspart dismiss - The dismiss button
+ */
+let RrAlert = class RrAlert extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Visual variant and semantic role. */
+        this.variant = 'success';
+        /** Optional bold heading rendered above the body content. */
+        this.heading = '';
+        /** When true, renders a dismiss button that hides the alert and fires close. */
+        this.dismissible = false;
+        this._dismissed = false;
+    }
+    _dismiss() {
+        this._dismissed = true;
+        this.dispatchEvent(new Event('close', { bubbles: true, composed: true }));
+        this.setAttribute('hidden', '');
+    }
+    /** Reshow the alert after it has been dismissed. */
+    show() {
+        this._dismissed = false;
+        this.removeAttribute('hidden');
+    }
+    render() {
+        if (this._dismissed)
+            return nothing;
+        return html `
+      <div class="alert" part="alert" role="alert">
+        <slot name="icon"></slot>
+        <div class="body">
+          ${this.heading
+            ? html `<p class="heading" part="heading">${this.heading}</p>`
+            : nothing}
+          <div class="content" part="content"><slot></slot></div>
+        </div>
+        ${this.dismissible
+            ? html `
+            <button
+              class="dismiss"
+              part="dismiss"
+              aria-label="Dismiss"
+              @click=${this._dismiss}
+            >
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+                <path d="M12 4L4 12M4 4L12 12" stroke="currentColor" stroke-width="1.5"
+                  stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+            </button>`
+            : nothing}
+      </div>
+    `;
+    }
+};
+RrAlert.styles = css `
+    :host {
+      display: block;
+    }
+
+    :host([hidden]) {
+      display: none;
+    }
+
+    .alert {
+      display: flex;
+      align-items: flex-start;
+      gap: var(--spacing-tight);
+      padding: var(--component-alert-padding-y) var(--component-alert-padding-x);
+      border-radius: var(--component-alert-radius);
+      border: 1px solid var(--component-alert-success-border);
+      background: var(--component-alert-success-background);
+      color: var(--component-alert-success-foreground);
+    }
+
+    /* Variant: warning */
+    :host([variant='warning']) .alert {
+      border-color: var(--component-alert-warning-border);
+      background: var(--component-alert-warning-background);
+      color: var(--component-alert-warning-foreground);
+    }
+
+    /* Variant: danger */
+    :host([variant='danger']) .alert {
+      border-color: var(--component-alert-danger-border);
+      background: var(--component-alert-danger-background);
+      color: var(--component-alert-danger-foreground);
+    }
+
+    /* Variant: info */
+    :host([variant='info']) .alert {
+      border-color: var(--component-alert-info-border);
+      background: var(--component-alert-info-background);
+      color: var(--component-alert-info-foreground);
+    }
+
+    .body {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .heading {
+      font: var(--font-label-strong-medium);
+      margin: 0 0 2px;
+    }
+
+    .content {
+      font: var(--font-body-medium);
+    }
+
+    /* Icon slot */
+    ::slotted([slot='icon']) {
+      flex-shrink: 0;
+      margin-top: 1px;
+    }
+
+    /* Dismiss button */
+    .dismiss {
+      flex-shrink: 0;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      background: none;
+      border: none;
+      cursor: pointer;
+      color: currentColor;
+      padding: 2px;
+      border-radius: var(--radius-sm);
+      opacity: 0.7;
+      transition: opacity var(--motion-duration-instant) var(--motion-easing-default);
+      margin-top: -1px;
+      margin-right: -4px;
+    }
+
+    .dismiss:hover {
+      opacity: 1;
+    }
+
+    .dismiss:focus-visible {
+      outline: 2px solid currentColor;
+      outline-offset: 2px;
+      opacity: 1;
+    }
+  `;
+__decorate([
+    property({ reflect: true })
+], RrAlert.prototype, "variant", void 0);
+__decorate([
+    property()
+], RrAlert.prototype, "heading", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], RrAlert.prototype, "dismissible", void 0);
+__decorate([
+    state()
+], RrAlert.prototype, "_dismissed", void 0);
+RrAlert = __decorate([
+    customElement('rr-alert')
+], RrAlert);
+export { RrAlert };
+//# sourceMappingURL=alert.js.map

package/dist/alert/alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.js","sourceRoot":"","sources":["../../src/alert/alert.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAInE;;;;;;;;;;;;;GAaG;AAEI,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;QA2FL,wCAAwC;QACX,YAAO,GAAiB,SAAS,CAAC;QAC/D,6DAA6D;QACjD,YAAO,GAAG,EAAE,CAAC;QACzB,gFAAgF;QACpC,gBAAW,GAAG,KAAK,CAAC;QAE/C,eAAU,GAAG,KAAK,CAAC;IA2CtC,CAAC;IAzCS,QAAQ;QACd,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACvB,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QAC1E,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;IAClC,CAAC;IAED,oDAAoD;IACpD,IAAI;QACF,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;QACxB,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;IACjC,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,UAAU;YAAE,OAAO,OAAO,CAAC;QAEpC,OAAO,IAAI,CAAA;;;;YAIH,IAAI,CAAC,OAAO;YACZ,CAAC,CAAC,IAAI,CAAA,qCAAqC,IAAI,CAAC,OAAO,MAAM;YAC7D,CAAC,CAAC,OAAO;;;UAGX,IAAI,CAAC,WAAW;YAChB,CAAC,CAAC,IAAI,CAAA;;;;;uBAKO,IAAI,CAAC,QAAQ;;;;;;sBAMd;YACZ,CAAC,CAAC,OAAO;;KAEd,CAAC;IACJ,CAAC;;AA3IM,cAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwFlB,AAxFY,CAwFX;AAG2B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAmC;AAEnD;IAAX,QAAQ,EAAE;wCAAc;AAEmB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAAqB;AAE/C;IAAhB,KAAK,EAAE;2CAA4B;AAlGzB,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CA6InB"}

package/dist/alert/alert.stories.d.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import '@digital2analogue2/parsimony-components';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Success: Story;
+export declare const Warning: Story;
+export declare const Danger: Story;
+export declare const Info: Story;
+export declare const Dismissible: Story;
+export declare const WithIcon: Story;
+//# sourceMappingURL=alert.stories.d.ts.map

package/dist/alert/alert.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.stories.d.ts","sourceRoot":"","sources":["../../src/alert/alert.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAErE,OAAO,yCAAyC,CAAC;AAEjD,QAAA,MAAM,IAAI,EAAE,IAoBX,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAA0D,CAAC;AAEjF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAKpB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAKlB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAEzB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAWtB,CAAC"}

package/dist/alert/alert.stories.js

@@ -0,0 +1,59 @@
+import { html } from 'lit';
+import '@digital2analogue2/parsimony-components';
+const meta = {
+    title: 'Components/Alert',
+    component: 'rr-alert',
+    argTypes: {
+        variant: { control: 'select', options: ['success', 'warning', 'danger', 'info'] },
+        heading: { control: 'text' },
+        dismissible: { control: 'boolean' },
+    },
+    args: {
+        variant: 'success',
+        heading: 'Heads up',
+        dismissible: false,
+    },
+    render: ({ variant, heading, dismissible }) => html `
+    <rr-alert
+      variant=${variant}
+      heading=${heading}
+      ?dismissible=${dismissible}
+    >Your changes have been saved.</rr-alert>
+  `,
+};
+export default meta;
+export const Success = { args: { variant: 'success', heading: 'Saved' } };
+export const Warning = {
+    args: { variant: 'warning', heading: 'Check this' },
+    render: ({ variant, heading }) => html `
+    <rr-alert variant=${variant} heading=${heading}>Some fields need your attention.</rr-alert>
+  `,
+};
+export const Danger = {
+    args: { variant: 'danger', heading: 'Something went wrong' },
+    render: ({ variant, heading }) => html `
+    <rr-alert variant=${variant} heading=${heading}>We couldn't process your request.</rr-alert>
+  `,
+};
+export const Info = {
+    args: { variant: 'info', heading: 'Did you know' },
+    render: ({ variant, heading }) => html `
+    <rr-alert variant=${variant} heading=${heading}>Tokens sync automatically on build.</rr-alert>
+  `,
+};
+export const Dismissible = {
+    args: { variant: 'info', heading: 'Dismissible', dismissible: true },
+};
+export const WithIcon = {
+    render: () => html `
+    <rr-alert variant="success" heading="Deployed">
+      <rr-icon slot="icon" aria-label="Success">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M20 6 9 17l-5-5" />
+        </svg>
+      </rr-icon>
+      Your site is live.
+    </rr-alert>
+  `,
+};
+//# sourceMappingURL=alert.stories.js.map

package/dist/alert/alert.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.stories.js","sourceRoot":"","sources":["../../src/alert/alert.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,yCAAyC,CAAC;AAEjD,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,UAAU;IACrB,QAAQ,EAAE;QACR,OAAO,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,CAAC,EAAE;QACjF,OAAO,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC5B,WAAW,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACpC;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,SAAS;QAClB,OAAO,EAAE,UAAU;QACnB,WAAW,EAAE,KAAK;KACnB;IACD,MAAM,EAAE,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA;;gBAErC,OAAO;gBACP,OAAO;qBACF,WAAW;;GAE7B;CACF,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,CAAC;AAEjF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,YAAY,EAAE;IACnD,MAAM,EAAE,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA;wBAChB,OAAO,YAAY,OAAO;GAC/C;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAU;IAC3B,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,sBAAsB,EAAE;IAC5D,MAAM,EAAE,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA;wBAChB,OAAO,YAAY,OAAO;GAC/C;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAU;IACzB,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE;IAClD,MAAM,EAAE,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA;wBAChB,OAAO,YAAY,OAAO;GAC/C;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAU;IAChC,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,IAAI,EAAE;CACrE,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;GASjB;CACF,CAAC"}

package/dist/avatar/avatar.d.ts

@@ -0,0 +1,37 @@
+import { LitElement } from 'lit';
+export type AvatarSize = 'sm' | 'md' | 'lg' | 'xl';
+export type AvatarColor = 'default' | 'indigo' | 'sky' | 'green' | 'amber';
+/**
+ * A circular identity surface showing initials or an image.
+ *
+ * When `src` is provided an `<img>` fills the circle. When omitted, up to two
+ * initials are derived from `name` (first letter of each word, max two words).
+ * Colorized variants use the accent-bold fill tier with matching on-* foreground
+ * tokens — all pairs are WCAG AA verified.
+ *
+ * @slot - Optional custom content to replace initials (e.g. an icon)
+ * @csspart avatar - The root circle element
+ * @csspart img - The img element (only when src is set)
+ * @csspart initials - The initials text element
+ */
+export declare class RrAvatar extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Circle diameter. */
+    size: AvatarSize;
+    /** Accent-bold color variant for the initials surface. */
+    color: AvatarColor;
+    /** Full name used to derive up to two initials and the accessible label. */
+    name: string;
+    /** Image URL. When set, an img fills the circle instead of initials. */
+    src: string;
+    /** Alt text for the image; falls back to name when omitted. */
+    imgAlt: string;
+    private get _initials();
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'rr-avatar': RrAvatar;
+    }
+}
+//# sourceMappingURL=avatar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../src/avatar/avatar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGrD,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,KAAK,GAAG,OAAO,GAAG,OAAO,CAAC;AAE3E;;;;;;;;;;;;GAYG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,MAAM,CAAC,MAAM,0BAoEX;IAEF,uBAAuB;IACM,IAAI,EAAE,UAAU,CAAQ;IACrD,0DAA0D;IAC7B,KAAK,EAAE,WAAW,CAAa;IAC5D,4EAA4E;IAChE,IAAI,SAAM;IACtB,wEAAwE;IAC5D,GAAG,SAAM;IACrB,+DAA+D;IAC/B,MAAM,SAAM;IAE5C,OAAO,KAAK,SAAS,GAKpB;IAED,MAAM;CAiBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/avatar/avatar.js

@@ -0,0 +1,150 @@
+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, html, css, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+/**
+ * A circular identity surface showing initials or an image.
+ *
+ * When `src` is provided an `<img>` fills the circle. When omitted, up to two
+ * initials are derived from `name` (first letter of each word, max two words).
+ * Colorized variants use the accent-bold fill tier with matching on-* foreground
+ * tokens — all pairs are WCAG AA verified.
+ *
+ * @slot - Optional custom content to replace initials (e.g. an icon)
+ * @csspart avatar - The root circle element
+ * @csspart img - The img element (only when src is set)
+ * @csspart initials - The initials text element
+ */
+let RrAvatar = class RrAvatar extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Circle diameter. */
+        this.size = 'md';
+        /** Accent-bold color variant for the initials surface. */
+        this.color = 'default';
+        /** Full name used to derive up to two initials and the accessible label. */
+        this.name = '';
+        /** Image URL. When set, an img fills the circle instead of initials. */
+        this.src = '';
+        /** Alt text for the image; falls back to name when omitted. */
+        this.imgAlt = '';
+    }
+    get _initials() {
+        if (!this.name)
+            return '';
+        const words = this.name.trim().split(/\s+/).filter(Boolean);
+        if (words.length === 1)
+            return words[0].charAt(0).toUpperCase();
+        return (words[0].charAt(0) + words[words.length - 1].charAt(0)).toUpperCase();
+    }
+    render() {
+        const hasSlot = this.querySelectorAll('*').length > 0;
+        return html `
+      <div
+        class="avatar"
+        part="avatar"
+        role=${this.name && !this.src ? 'img' : nothing}
+        aria-label=${this.name && !this.src ? this.name : nothing}
+      >
+        ${this.src
+            ? html `<img part="img" src=${this.src} alt=${this.imgAlt || this.name || ''} />`
+            : hasSlot
+                ? html `<slot></slot>`
+                : html `<span part="initials" aria-hidden="true">${this._initials}</span>`}
+      </div>
+    `;
+    }
+};
+RrAvatar.styles = css `
+    :host {
+      display: inline-flex;
+      flex-shrink: 0;
+    }
+
+    .avatar {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+      overflow: hidden;
+      background: var(--component-avatar-background-default);
+      color: var(--component-avatar-foreground-default);
+      width: var(--component-avatar-size-md);
+      height: var(--component-avatar-size-md);
+      font: var(--font-label-strong-small);
+      flex-shrink: 0;
+      user-select: none;
+      line-height: 1;
+    }
+
+    /* Sizes */
+    :host([size='sm']) .avatar {
+      width: var(--component-avatar-size-sm);
+      height: var(--component-avatar-size-sm);
+      font: var(--font-label-strong-xsmall);
+    }
+
+    :host([size='lg']) .avatar {
+      width: var(--component-avatar-size-lg);
+      height: var(--component-avatar-size-lg);
+      font: var(--font-label-strong-medium);
+    }
+
+    :host([size='xl']) .avatar {
+      width: var(--component-avatar-size-xl);
+      height: var(--component-avatar-size-xl);
+      font: var(--font-label-strong-medium);
+    }
+
+    /* Color variants */
+    :host([color='indigo']) .avatar {
+      background: var(--component-avatar-background-indigo);
+      color: var(--component-avatar-foreground-indigo);
+    }
+
+    :host([color='sky']) .avatar {
+      background: var(--component-avatar-background-sky);
+      color: var(--component-avatar-foreground-sky);
+    }
+
+    :host([color='green']) .avatar {
+      background: var(--component-avatar-background-green);
+      color: var(--component-avatar-foreground-green);
+    }
+
+    :host([color='amber']) .avatar {
+      background: var(--component-avatar-background-amber);
+      color: var(--component-avatar-foreground-amber);
+    }
+
+    img {
+      display: block;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  `;
+__decorate([
+    property({ reflect: true })
+], RrAvatar.prototype, "size", void 0);
+__decorate([
+    property({ reflect: true })
+], RrAvatar.prototype, "color", void 0);
+__decorate([
+    property()
+], RrAvatar.prototype, "name", void 0);
+__decorate([
+    property()
+], RrAvatar.prototype, "src", void 0);
+__decorate([
+    property({ attribute: 'alt' })
+], RrAvatar.prototype, "imgAlt", void 0);
+RrAvatar = __decorate([
+    customElement('rr-avatar')
+], RrAvatar);
+export { RrAvatar };
+//# sourceMappingURL=avatar.js.map

package/dist/avatar/avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../src/avatar/avatar.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAK5D;;;;;;;;;;;;GAYG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QAuEL,uBAAuB;QACM,SAAI,GAAe,IAAI,CAAC;QACrD,0DAA0D;QAC7B,UAAK,GAAgB,SAAS,CAAC;QAC5D,4EAA4E;QAChE,SAAI,GAAG,EAAE,CAAC;QACtB,wEAAwE;QAC5D,QAAG,GAAG,EAAE,CAAC;QACrB,+DAA+D;QAC/B,WAAM,GAAG,EAAE,CAAC;IA0B9C,CAAC;IAxBC,IAAY,SAAS;QACnB,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,OAAO,EAAE,CAAC;QAC1B,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QAC5D,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;QAChE,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;IAChF,CAAC;IAED,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;QACtD,OAAO,IAAI,CAAA;;;;eAIA,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO;qBAClC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO;;UAEvD,IAAI,CAAC,GAAG;YACR,CAAC,CAAC,IAAI,CAAA,uBAAuB,IAAI,CAAC,GAAG,QAAQ,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,IAAI,IAAI,EAAE,KAAK;YAChF,CAAC,CAAC,OAAO;gBACT,CAAC,CAAC,IAAI,CAAA,eAAe;gBACrB,CAAC,CAAC,IAAI,CAAA,4CAA4C,IAAI,CAAC,SAAS,SAAS;;KAE9E,CAAC;IACJ,CAAC;;AAxGM,eAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoElB,AApEY,CAoEX;AAG2B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAAyB;AAExB;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAAgC;AAEhD;IAAX,QAAQ,EAAE;sCAAW;AAEV;IAAX,QAAQ,EAAE;qCAAU;AAEW;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;wCAAa;AAhFjC,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CA0GpB"}

package/dist/avatar/avatar.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import '@digital2analogue2/parsimony-components';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Initials: Story;
+export declare const Sizes: Story;
+export declare const Colors: Story;
+export declare const Image: Story;
+//# sourceMappingURL=avatar.stories.d.ts.map

package/dist/avatar/avatar.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.stories.d.ts","sourceRoot":"","sources":["../../src/avatar/avatar.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAErE,OAAO,yCAAyC,CAAC;AAEjD,QAAA,MAAM,IAAI,EAAE,IA0BX,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,QAAQ,EAAE,KAA0C,CAAC;AAElE,eAAO,MAAM,KAAK,EAAE,KASnB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAUpB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAEnB,CAAC"}

package/dist/avatar/avatar.stories.js

@@ -0,0 +1,56 @@
+import { html } from 'lit';
+import '@digital2analogue2/parsimony-components';
+const meta = {
+    title: 'Components/Avatar',
+    component: 'rr-avatar',
+    argTypes: {
+        size: { control: 'select', options: ['sm', 'md', 'lg', 'xl'] },
+        color: { control: 'select', options: ['default', 'indigo', 'sky', 'green', 'amber'] },
+        name: { control: 'text' },
+        src: { control: 'text' },
+        alt: { control: 'text' },
+    },
+    args: {
+        size: 'md',
+        color: 'default',
+        name: 'River Romney',
+        src: '',
+        alt: '',
+    },
+    render: ({ size, color, name, src, alt }) => html `
+    <rr-avatar
+      size=${size}
+      color=${color}
+      name=${name}
+      src=${src}
+      alt=${alt}
+    ></rr-avatar>
+  `,
+};
+export default meta;
+export const Initials = { args: { name: 'River Romney' } };
+export const Sizes = {
+    render: () => html `
+    <div style="display: flex; align-items: center; gap: var(--spacing-inline);">
+      <rr-avatar size="sm" name="River Romney"></rr-avatar>
+      <rr-avatar size="md" name="River Romney"></rr-avatar>
+      <rr-avatar size="lg" name="River Romney"></rr-avatar>
+      <rr-avatar size="xl" name="River Romney"></rr-avatar>
+    </div>
+  `,
+};
+export const Colors = {
+    render: () => html `
+    <div style="display: flex; align-items: center; gap: var(--spacing-inline);">
+      <rr-avatar color="default" name="River Romney"></rr-avatar>
+      <rr-avatar color="indigo" name="River Romney"></rr-avatar>
+      <rr-avatar color="sky" name="River Romney"></rr-avatar>
+      <rr-avatar color="green" name="River Romney"></rr-avatar>
+      <rr-avatar color="amber" name="River Romney"></rr-avatar>
+    </div>
+  `,
+};
+export const Image = {
+    args: { src: 'https://i.pravatar.cc/96', alt: 'User' },
+};
+//# sourceMappingURL=avatar.stories.js.map

package/dist/avatar/avatar.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.stories.js","sourceRoot":"","sources":["../../src/avatar/avatar.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,yCAAyC,CAAC;AAEjD,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,WAAW;IACtB,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,EAAE;QAC9D,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,CAAC,EAAE;QACrF,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,GAAG,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACxB,GAAG,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;KACzB;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,IAAI;QACV,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,cAAc;QACpB,GAAG,EAAE,EAAE;QACP,GAAG,EAAE,EAAE;KACR;IACD,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA;;aAEtC,IAAI;cACH,KAAK;aACN,IAAI;YACL,GAAG;YACH,GAAG;;GAEZ;CACF,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,QAAQ,GAAU,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE,EAAE,CAAC;AAElE,MAAM,CAAC,MAAM,KAAK,GAAU;IAC1B,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;GAOjB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAU;IAC3B,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;GAQjB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAU;IAC1B,IAAI,EAAE,EAAE,GAAG,EAAE,0BAA0B,EAAE,GAAG,EAAE,MAAM,EAAE;CACvD,CAAC"}

package/dist/badge/badge.d.ts

@@ -0,0 +1,31 @@
+import { LitElement } from 'lit';
+export type BadgeVariant = 'default' | 'success' | 'warning' | 'danger' | 'info' | 'accent-green' | 'accent-blue' | 'accent-violet' | 'accent-amber';
+/**
+ * A status badge / chip component.
+ *
+ * Uses component-level design tokens for all visual properties.
+ * Brand theming cascades automatically via CSS custom properties on `:root`.
+ *
+ * @slot - Badge label text
+ * @cssprop --component-badge-{variant}-background
+ * @cssprop --component-badge-{variant}-foreground
+ * @cssprop --component-badge-{variant}-border
+ * @cssprop --component-badge-radius
+ * @cssprop --component-badge-padding-x
+ * @cssprop --component-badge-padding-y
+ */
+export declare class RrBadge extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Visual variant. Status variants (success, warning, danger, info) convey
+     * semantic meaning. Accent variants are decorative emphasis tags.
+     */
+    variant: BadgeVariant;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'rr-badge': RrBadge;
+    }
+}
+//# sourceMappingURL=badge.d.ts.map

package/dist/badge/badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../src/badge/badge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,MAAM,MAAM,YAAY,GACpB,SAAS,GACT,SAAS,GACT,SAAS,GACT,QAAQ,GACR,MAAM,GACN,cAAc,GACd,aAAa,GACb,eAAe,GACf,cAAc,CAAC;AAEnB;;;;;;;;;;;;;GAaG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACrC,MAAM,CAAC,MAAM,0BA4DX;IAEF;;;OAGG;IAEH,OAAO,EAAE,YAAY,CAAa;IAElC,MAAM;CAGP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}