@digital2analogue2/parsimony-components 0.1.0

package/dist/badge/badge.js

@@ -0,0 +1,104 @@
+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 } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+/**
+ * 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
+ */
+let RrBadge = class RrBadge extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Visual variant. Status variants (success, warning, danger, info) convey
+         * semantic meaning. Accent variants are decorative emphasis tags.
+         */
+        this.variant = 'default';
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+RrBadge.styles = css `
+    :host {
+      display: inline-flex;
+      align-items: center;
+      white-space: nowrap;
+      border-radius: var(--component-badge-radius);
+      padding: var(--component-badge-padding-y) var(--component-badge-padding-x);
+      font: var(--font-label-small);
+      border: 1px solid var(--component-badge-default-border);
+      background: var(--component-badge-default-background);
+      color: var(--component-badge-default-foreground);
+    }
+
+    :host([variant='success']) {
+      background: var(--component-badge-success-background);
+      color: var(--component-badge-success-foreground);
+      border-color: var(--component-badge-success-border);
+    }
+
+    :host([variant='warning']) {
+      background: var(--component-badge-warning-background);
+      color: var(--component-badge-warning-foreground);
+      border-color: var(--component-badge-warning-border);
+    }
+
+    :host([variant='danger']) {
+      background: var(--component-badge-danger-background);
+      color: var(--component-badge-danger-foreground);
+      border-color: var(--component-badge-danger-border);
+    }
+
+    :host([variant='info']) {
+      background: var(--component-badge-info-background);
+      color: var(--component-badge-info-foreground);
+      border-color: var(--component-badge-info-border);
+    }
+
+    :host([variant='accent-green']) {
+      background: var(--component-badge-accent-green-background);
+      color: var(--component-badge-accent-green-foreground);
+      border-color: var(--component-badge-accent-green-border);
+    }
+
+    :host([variant='accent-blue']) {
+      background: var(--component-badge-accent-blue-background);
+      color: var(--component-badge-accent-blue-foreground);
+      border-color: var(--component-badge-accent-blue-border);
+    }
+
+    :host([variant='accent-violet']) {
+      background: var(--component-badge-accent-violet-background);
+      color: var(--component-badge-accent-violet-foreground);
+      border-color: var(--component-badge-accent-violet-border);
+    }
+
+    :host([variant='accent-amber']) {
+      background: var(--component-badge-accent-amber-background);
+      color: var(--component-badge-accent-amber-foreground);
+      border-color: var(--component-badge-accent-amber-border);
+    }
+  `;
+__decorate([
+    property({ reflect: true })
+], RrBadge.prototype, "variant", void 0);
+RrBadge = __decorate([
+    customElement('rr-badge')
+], RrBadge);
+export { RrBadge };
+//# sourceMappingURL=badge.js.map

package/dist/badge/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../src/badge/badge.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAa5D;;;;;;;;;;;;;GAaG;AAEI,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;QA+DL;;;WAGG;QAEH,YAAO,GAAiB,SAAS,CAAC;IAKpC,CAAC;IAHC,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AAvEM,cAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4DlB,AA5DY,CA4DX;AAOF;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCACM;AApEvB,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CAyEnB"}

package/dist/badge/badge.stories.d.ts

@@ -0,0 +1,9 @@
+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 Default: Story;
+export declare const Success: Story;
+export declare const AllVariants: Story;
+//# sourceMappingURL=badge.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"badge.stories.d.ts","sourceRoot":"","sources":["../../src/badge/badge.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,yCAAyC,CAAC;AAcjD,QAAA,MAAM,IAAI,EAAE,IASX,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,OAAO,EAAE,KAA4D,CAAC;AAEnF,eAAO,MAAM,WAAW,EAAE,KAMzB,CAAC"}

package/dist/badge/badge.stories.js

@@ -0,0 +1,35 @@
+import { html } from 'lit';
+// Barrel side-effect import registers every rr-* element (see story-ui.config.js).
+import '@digital2analogue2/parsimony-components';
+const VARIANTS = [
+    'default',
+    'success',
+    'warning',
+    'danger',
+    'info',
+    'accent-green',
+    'accent-blue',
+    'accent-violet',
+    'accent-amber',
+];
+const meta = {
+    title: 'Components/Badge',
+    component: 'rr-badge',
+    argTypes: {
+        variant: { control: 'select', options: VARIANTS },
+        label: { control: 'text' },
+    },
+    args: { variant: 'default', label: 'Badge' },
+    render: ({ variant, label }) => html `<rr-badge variant=${variant}>${label}</rr-badge>`,
+};
+export default meta;
+export const Default = {};
+export const Success = { args: { variant: 'success', label: 'Connected' } };
+export const AllVariants = {
+    render: () => html `
+    <div style="display: flex; flex-wrap: wrap; gap: var(--spacing-inline);">
+      ${VARIANTS.map((v) => html `<rr-badge variant=${v}>${v}</rr-badge>`)}
+    </div>
+  `,
+};
+//# sourceMappingURL=badge.stories.js.map

package/dist/badge/badge.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.stories.js","sourceRoot":"","sources":["../../src/badge/badge.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,mFAAmF;AACnF,OAAO,yCAAyC,CAAC;AAEjD,MAAM,QAAQ,GAAG;IACf,SAAS;IACT,SAAS;IACT,SAAS;IACT,QAAQ;IACR,MAAM;IACN,cAAc;IACd,aAAa;IACb,eAAe;IACf,cAAc;CACN,CAAC;AAEX,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,UAAU;IACrB,QAAQ,EAAE;QACR,OAAO,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE;QACjD,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;KAC3B;IACD,IAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE;IAC5C,MAAM,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA,qBAAqB,OAAO,IAAI,KAAK,aAAa;CACvF,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU,EAAE,CAAC;AAEjC,MAAM,CAAC,MAAM,OAAO,GAAU,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,CAAC;AAEnF,MAAM,CAAC,MAAM,WAAW,GAAU;IAChC,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;QAEZ,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAA,qBAAqB,CAAC,IAAI,CAAC,aAAa,CAAC;;GAEtE;CACF,CAAC"}

package/dist/button/button.d.ts

@@ -0,0 +1,50 @@
+import { LitElement } from 'lit';
+export type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'ghost';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+/**
+ * A button with variant, size, loading, and disabled states.
+ *
+ * Renders a native `<button>` inside its shadow root for full
+ * keyboard and form semantics. Uses `delegatesFocus` so the host
+ * forwards focus to the inner button.
+ *
+ * @slot - Button label text
+ * @slot prefix - Icon or element before the label
+ * @slot suffix - Icon or element after the label
+ * @fires click - Native click (suppressed when disabled or loading)
+ * @csspart button - The inner <button> element
+ */
+export declare class RrButton extends LitElement {
+    static formAssociated: boolean;
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        clonable?: boolean;
+        customElementRegistry?: CustomElementRegistry | null;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
+    static styles: import("lit").CSSResult;
+    /** Visual variant: primary (filled CTA), secondary (outlined), danger (destructive), ghost (text-only, quiet). */
+    variant: ButtonVariant;
+    /** Size: sm, md, lg. Controls padding and font size. */
+    size: ButtonSize;
+    /** Disables the button. Prevents click and removes from tab order. */
+    disabled: boolean;
+    /** Shows a spinner and sets aria-busy. Click suppressed while loading. */
+    loading: boolean;
+    /** Button type attribute: button, submit, or reset. */
+    type: 'button' | 'submit' | 'reset';
+    /** Accessible label. Required for icon-only buttons. */
+    ariaLabel: string | null;
+    private _internals;
+    constructor();
+    private _handleClick;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'rr-button': RrButton;
+    }
+}
+//# sourceMappingURL=button.d.ts.map

package/dist/button/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/button/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGrD,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,OAAO,CAAC;AACzE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5C;;;;;;;;;;;;GAYG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,MAAM,CAAC,cAAc,UAAQ;IAE7B,MAAM,CAAC,iBAAiB;;;;;;;MAGtB;IAEF,MAAM,CAAC,MAAM,0BA2IX;IAEF,kHAAkH;IACrF,OAAO,EAAE,aAAa,CAAa;IAEhE,wDAAwD;IAC3B,IAAI,EAAE,UAAU,CAAQ;IAErD,sEAAsE;IAC1B,QAAQ,UAAS;IAE7D,0EAA0E;IAC9B,OAAO,UAAS;IAE5D,uDAAuD;IAC3C,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAY;IAE3D,wDAAwD;IACR,SAAS,EAAE,MAAM,GAAG,IAAI,CAAQ;IAEhF,OAAO,CAAC,UAAU,CAAmB;;IAOrC,OAAO,CAAC,YAAY;IAOpB,MAAM;CAwBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/button/button.js

@@ -0,0 +1,237 @@
+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 button with variant, size, loading, and disabled states.
+ *
+ * Renders a native `<button>` inside its shadow root for full
+ * keyboard and form semantics. Uses `delegatesFocus` so the host
+ * forwards focus to the inner button.
+ *
+ * @slot - Button label text
+ * @slot prefix - Icon or element before the label
+ * @slot suffix - Icon or element after the label
+ * @fires click - Native click (suppressed when disabled or loading)
+ * @csspart button - The inner <button> element
+ */
+let RrButton = class RrButton extends LitElement {
+    constructor() {
+        super();
+        /** Visual variant: primary (filled CTA), secondary (outlined), danger (destructive), ghost (text-only, quiet). */
+        this.variant = 'primary';
+        /** Size: sm, md, lg. Controls padding and font size. */
+        this.size = 'md';
+        /** Disables the button. Prevents click and removes from tab order. */
+        this.disabled = false;
+        /** Shows a spinner and sets aria-busy. Click suppressed while loading. */
+        this.loading = false;
+        /** Button type attribute: button, submit, or reset. */
+        this.type = 'button';
+        /** Accessible label. Required for icon-only buttons. */
+        this.ariaLabel = null;
+        this._internals = this.attachInternals();
+    }
+    _handleClick(e) {
+        if (this.disabled || this.loading) {
+            e.preventDefault();
+            e.stopImmediatePropagation();
+        }
+    }
+    render() {
+        return html `
+      <button
+        part="button"
+        .type=${this.type}
+        ?disabled=${this.disabled}
+        aria-disabled=${this.disabled ? 'true' : nothing}
+        aria-busy=${this.loading ? 'true' : nothing}
+        aria-label=${this.ariaLabel || nothing}
+        @click=${this._handleClick}
+      >
+        <span class="wrapper">
+          ${this.loading
+            ? html `<span class="loading-container"><span class="spinner" aria-hidden="true"></span></span>`
+            : nothing}
+          <span class="label">
+            <slot name="prefix"></slot>
+            <slot></slot>
+            <slot name="suffix"></slot>
+          </span>
+        </span>
+      </button>
+    `;
+    }
+};
+RrButton.formAssociated = true;
+RrButton.shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+};
+RrButton.styles = css `
+    :host {
+      display: inline-block;
+    }
+
+    button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--spacing-tight);
+      border: 1px solid var(--component-button-primary-border-default);
+      border-radius: var(--radius-default);
+      font: var(--font-label-strong-medium);
+      cursor: pointer;
+      padding: var(--spacing-tight) var(--spacing-element);
+      background: var(--component-button-primary-background-default);
+      color: var(--component-button-primary-foreground-default);
+      transition:
+        background-color var(--motion-duration-instant) var(--motion-easing-default),
+        border-color var(--motion-duration-instant) var(--motion-easing-default);
+      outline: none;
+      text-decoration: none;
+      white-space: nowrap;
+    }
+
+    button:hover {
+      background: var(--component-button-primary-background-hover);
+      border-color: var(--component-button-primary-border-hover);
+    }
+
+    button:active {
+      background: var(--component-button-primary-background-active);
+      border-color: var(--component-button-primary-border-active);
+    }
+
+    button:focus-visible {
+      box-shadow: 0 0 0 2px var(--color-border-focus);
+    }
+
+    /* --- Size: sm --- */
+    :host([size='sm']) button {
+      font: var(--font-label-strong-small);
+      padding: var(--spacing-micro) var(--spacing-tight);
+    }
+
+    /* --- Size: lg --- */
+    :host([size='lg']) button {
+      font: var(--font-label-strong-large);
+      padding: var(--spacing-inline) var(--spacing-element);
+    }
+
+    /* --- Variant: secondary --- */
+    :host([variant='secondary']) button {
+      background: var(--component-button-secondary-background-default);
+      color: var(--component-button-secondary-foreground-default);
+      border-color: var(--component-button-secondary-border-default);
+    }
+    :host([variant='secondary']) button:hover {
+      background: var(--component-button-secondary-background-hover);
+      border-color: var(--component-button-secondary-border-hover);
+    }
+
+    /* --- Variant: danger --- */
+    :host([variant='danger']) button {
+      background: var(--component-button-danger-background-default);
+      color: var(--component-button-danger-foreground-default);
+      border-color: var(--component-button-danger-border-default);
+    }
+    :host([variant='danger']) button:hover {
+      background: var(--component-button-danger-background-hover);
+      border-color: var(--component-button-danger-border-hover);
+    }
+
+    /* --- Variant: ghost --- */
+    :host([variant='ghost']) button {
+      background: var(--component-button-ghost-background-default);
+      color: var(--component-button-ghost-foreground-default);
+      border-color: var(--component-button-ghost-border-default);
+    }
+    :host([variant='ghost']) button:hover {
+      background: var(--component-button-ghost-background-hover);
+      border-color: var(--component-button-ghost-border-hover);
+    }
+
+    /* --- Disabled --- */
+    :host([disabled]) button {
+      background: var(--color-background-disabled);
+      color: var(--color-foreground-disabled);
+      border-color: var(--color-border-disabled);
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+
+    /* --- Loading --- */
+    :host([loading]) button {
+      cursor: wait;
+      pointer-events: none;
+    }
+
+    .spinner {
+      display: inline-block;
+      width: 1em;
+      height: 1em;
+      border: 2px solid currentColor;
+      border-right-color: transparent;
+      border-radius: 50%;
+      animation: spin 600ms linear infinite;
+    }
+
+    @keyframes spin {
+      to { transform: rotate(360deg); }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .spinner {
+        animation: none;
+      }
+    }
+
+    .label {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--spacing-tight);
+    }
+
+    :host([loading]) .label {
+      visibility: hidden;
+    }
+
+    .loading-container {
+      position: absolute;
+    }
+
+    .wrapper {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+  `;
+__decorate([
+    property({ reflect: true })
+], RrButton.prototype, "variant", void 0);
+__decorate([
+    property({ reflect: true })
+], RrButton.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], RrButton.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], RrButton.prototype, "loading", void 0);
+__decorate([
+    property()
+], RrButton.prototype, "type", void 0);
+__decorate([
+    property({ attribute: 'aria-label' })
+], RrButton.prototype, "ariaLabel", void 0);
+RrButton = __decorate([
+    customElement('rr-button')
+], RrButton);
+export { RrButton };
+//# sourceMappingURL=button.js.map

package/dist/button/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/button/button.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;IAyKtC;QACE,KAAK,EAAE,CAAC;QArBV,kHAAkH;QACrF,YAAO,GAAkB,SAAS,CAAC;QAEhE,wDAAwD;QAC3B,SAAI,GAAe,IAAI,CAAC;QAErD,sEAAsE;QAC1B,aAAQ,GAAG,KAAK,CAAC;QAE7D,0EAA0E;QAC9B,YAAO,GAAG,KAAK,CAAC;QAE5D,uDAAuD;QAC3C,SAAI,GAAkC,QAAQ,CAAC;QAE3D,wDAAwD;QACR,cAAS,GAAkB,IAAI,CAAC;QAM9E,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;IAC3C,CAAC;IAEO,YAAY,CAAC,CAAQ;QAC3B,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YAClC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,CAAC,CAAC,wBAAwB,EAAE,CAAC;QAC/B,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;gBAGC,IAAI,CAAC,IAAI;oBACL,IAAI,CAAC,QAAQ;wBACT,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;oBACpC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;qBAC9B,IAAI,CAAC,SAAS,IAAI,OAAO;iBAC7B,IAAI,CAAC,YAAY;;;YAGtB,IAAI,CAAC,OAAO;YACZ,CAAC,CAAC,IAAI,CAAA,yFAAyF;YAC/F,CAAC,CAAC,OAAO;;;;;;;;KAQhB,CAAC;IACJ,CAAC;;AA3MM,uBAAc,GAAG,IAAI,AAAP,CAAQ;AAEtB,0BAAiB,GAAG;IACzB,GAAG,UAAU,CAAC,iBAAiB;IAC/B,cAAc,EAAE,IAAI;CACrB,AAHuB,CAGtB;AAEK,eAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2IlB,AA3IY,CA2IX;AAG2B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAAoC;AAGnC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAAyB;AAGT;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAAkB;AAGjB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAAiB;AAGhD;IAAX,QAAQ,EAAE;sCAAgD;AAGX;IAA/C,QAAQ,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;2CAA0C;AArKrE,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CA6MpB"}

package/dist/button/button.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 Primary: Story;
+export declare const Secondary: Story;
+export declare const Danger: Story;
+export declare const Ghost: Story;
+export declare const Loading: Story;
+export declare const Sizes: Story;
+//# sourceMappingURL=button.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.stories.d.ts","sourceRoot":"","sources":["../../src/button/button.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAErE,OAAO,yCAAyC,CAAC;AAEjD,QAAA,MAAM,IAAI,EAAE,IAyBX,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,SAAS,EAAE,KAA2D,CAAC;AAEpF,eAAO,MAAM,MAAM,EAAE,KAAwD,CAAC;AAE9E,eAAO,MAAM,KAAK,EAAE,KAAwD,CAAC;AAE7E,eAAO,MAAM,OAAO,EAAE,KAAmC,CAAC;AAE1D,eAAO,MAAM,KAAK,EAAE,KAQnB,CAAC"}

package/dist/button/button.stories.js

@@ -0,0 +1,44 @@
+import { html } from 'lit';
+import '@digital2analogue2/parsimony-components';
+const meta = {
+    title: 'Components/Button',
+    component: 'rr-button',
+    argTypes: {
+        variant: { control: 'select', options: ['primary', 'secondary', 'danger', 'ghost'] },
+        size: { control: 'select', options: ['sm', 'md', 'lg'] },
+        disabled: { control: 'boolean' },
+        loading: { control: 'boolean' },
+        label: { control: 'text' },
+    },
+    args: {
+        variant: 'primary',
+        size: 'md',
+        disabled: false,
+        loading: false,
+        label: 'Save changes',
+    },
+    render: ({ variant, size, disabled, loading, label }) => html `
+    <rr-button
+      variant=${variant}
+      size=${size}
+      ?disabled=${disabled}
+      ?loading=${loading}
+    >${label}</rr-button>
+  `,
+};
+export default meta;
+export const Primary = {};
+export const Secondary = { args: { variant: 'secondary', label: 'Cancel' } };
+export const Danger = { args: { variant: 'danger', label: 'Delete' } };
+export const Ghost = { args: { variant: 'ghost', label: 'Dismiss' } };
+export const Loading = { args: { loading: true } };
+export const Sizes = {
+    render: () => html `
+    <div style="display: flex; align-items: center; gap: var(--spacing-inline);">
+      <rr-button size="small">Small</rr-button>
+      <rr-button size="medium">Medium</rr-button>
+      <rr-button size="large">Large</rr-button>
+    </div>
+  `,
+};
+//# sourceMappingURL=button.stories.js.map

package/dist/button/button.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.stories.js","sourceRoot":"","sources":["../../src/button/button.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,OAAO,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,OAAO,CAAC,EAAE;QACpF,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,EAAE;QACxD,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAChC,OAAO,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAC/B,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;KAC3B;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,IAAI;QACV,QAAQ,EAAE,KAAK;QACf,OAAO,EAAE,KAAK;QACd,KAAK,EAAE,cAAc;KACtB;IACD,MAAM,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA;;gBAE/C,OAAO;aACV,IAAI;kBACC,QAAQ;iBACT,OAAO;OACjB,KAAK;GACT;CACF,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU,EAAE,CAAC;AAEjC,MAAM,CAAC,MAAM,SAAS,GAAU,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,CAAC;AAEpF,MAAM,CAAC,MAAM,MAAM,GAAU,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,CAAC;AAE9E,MAAM,CAAC,MAAM,KAAK,GAAU,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,CAAC;AAE7E,MAAM,CAAC,MAAM,OAAO,GAAU,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,CAAC;AAE1D,MAAM,CAAC,MAAM,KAAK,GAAU;IAC1B,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;GAMjB;CACF,CAAC"}

package/dist/card/card.d.ts

@@ -0,0 +1,32 @@
+import { LitElement } from 'lit';
+export type CardPadding = 'none' | 'sm' | 'md' | 'lg';
+/**
+ * A surface container using the elevated background tier.
+ *
+ * Renders on `background.alt` with `border.default` and `radius.lg`.
+ * Composed of three optional slots — header, default body, footer —
+ * separated by hairline borders when adjacent content is present.
+ *
+ * @slot header - Card heading row (title, actions, avatar).
+ * @slot        - Card body content.
+ * @slot footer - Card footer row (secondary actions, metadata).
+ *
+ * @cssprop --color-background-alt
+ * @cssprop --color-border-default
+ * @cssprop --radius-lg
+ */
+export declare class RrCard extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Internal padding around the body slot.
+     * Header and footer padding is always fixed at `tight/element`.
+     */
+    padding: CardPadding;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'rr-card': RrCard;
+    }
+}
+//# sourceMappingURL=card.d.ts.map

package/dist/card/card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../src/card/card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEtD;;;;;;;;;;;;;;GAcG;AACH,qBACa,MAAO,SAAQ,UAAU;IACpC,MAAM,CAAC,MAAM,0BA0DX;IAEF;;;OAGG;IAEH,OAAO,EAAE,WAAW,CAAQ;IAE5B,MAAM;CAOP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}

package/dist/card/card.js

@@ -0,0 +1,107 @@
+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 } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+/**
+ * A surface container using the elevated background tier.
+ *
+ * Renders on `background.alt` with `border.default` and `radius.lg`.
+ * Composed of three optional slots — header, default body, footer —
+ * separated by hairline borders when adjacent content is present.
+ *
+ * @slot header - Card heading row (title, actions, avatar).
+ * @slot        - Card body content.
+ * @slot footer - Card footer row (secondary actions, metadata).
+ *
+ * @cssprop --color-background-alt
+ * @cssprop --color-border-default
+ * @cssprop --radius-lg
+ */
+let RrCard = class RrCard extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Internal padding around the body slot.
+         * Header and footer padding is always fixed at `tight/element`.
+         */
+        this.padding = 'md';
+    }
+    render() {
+        return html `
+      <div class="header"><slot name="header"></slot></div>
+      <div class="body"><slot></slot></div>
+      <div class="footer"><slot name="footer"></slot></div>
+    `;
+    }
+};
+RrCard.styles = css `
+    :host {
+      display: block;
+      background: var(--color-background-alt);
+      border: 1px solid var(--color-border-alt);
+      border-radius: var(--radius-lg);
+      overflow: hidden;
+    }
+
+    /* ── Padding variants ────────────────────────────────────────── */
+    :host([padding='none']) .body {
+      padding: 0;
+    }
+
+    :host([padding='sm']) .body {
+      padding: var(--spacing-tight);
+    }
+
+    /* default (md) */
+    .body {
+      padding: var(--spacing-element);
+    }
+
+    :host([padding='lg']) .body {
+      padding: var(--spacing-component);
+    }
+
+    /* ── Header / footer ─────────────────────────────────────────── */
+    .header,
+    .footer {
+      display: block;
+    }
+
+    /* Hide header/footer wrapper when slot is empty */
+    .header:not(:has(*)),
+    .footer:not(:has(*)) {
+      display: none;
+    }
+
+    .header {
+      padding: var(--spacing-tight) var(--spacing-element);
+      border-bottom: 1px solid var(--color-border-alt);
+      font: var(--font-label-strong-medium);
+      color: var(--color-foreground-default);
+    }
+
+    .footer {
+      padding: var(--spacing-tight) var(--spacing-element);
+      border-top: 1px solid var(--color-border-alt);
+      color: var(--color-foreground-alt);
+      font: var(--font-label-small);
+    }
+
+    /* ── Body ────────────────────────────────────────────────────── */
+    .body {
+      display: block;
+      color: var(--color-foreground-default);
+    }
+  `;
+__decorate([
+    property({ reflect: true })
+], RrCard.prototype, "padding", void 0);
+RrCard = __decorate([
+    customElement('rr-card')
+], RrCard);
+export { RrCard };
+//# sourceMappingURL=card.js.map