@digital2analogue2/parsimony-components 0.1.0

package/dist/input/input.stories.js

@@ -0,0 +1,48 @@
+import { html } from 'lit';
+import '@digital2analogue2/parsimony-components';
+const meta = {
+    title: 'Components/Input',
+    component: 'rr-input',
+    argTypes: {
+        label: { control: 'text' },
+        placeholder: { control: 'text' },
+        value: { control: 'text' },
+        type: { control: 'text' },
+        helperText: { control: 'text' },
+        errorText: { control: 'text' },
+        required: { control: 'boolean' },
+        disabled: { control: 'boolean' },
+    },
+    args: {
+        label: 'Email',
+        placeholder: 'you@example.com',
+        value: '',
+        type: 'email',
+        helperText: '',
+        errorText: '',
+        required: false,
+        disabled: false,
+    },
+    render: ({ label, placeholder, value, type, helperText, errorText, required, disabled }) => html `
+    <rr-input
+      label=${label}
+      placeholder=${placeholder}
+      value=${value}
+      type=${type}
+      helper-text=${helperText}
+      error-text=${errorText}
+      ?required=${required}
+      ?disabled=${disabled}
+    ></rr-input>
+  `,
+};
+export default meta;
+export const Default = {};
+export const WithHelperText = {
+    args: { helperText: "We'll never share your email." },
+};
+export const Error = {
+    args: { value: 'not-an-email', errorText: 'Enter a valid email address.' },
+};
+export const Disabled = { args: { disabled: true, value: 'locked@example.com' } };
+//# sourceMappingURL=input.stories.js.map

package/dist/input/input.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.stories.js","sourceRoot":"","sources":["../../src/input/input.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,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,WAAW,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAChC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,UAAU,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC/B,SAAS,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC9B,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAChC,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,OAAO;QACd,WAAW,EAAE,iBAAiB;QAC9B,KAAK,EAAE,EAAE;QACT,IAAI,EAAE,OAAO;QACb,UAAU,EAAE,EAAE;QACd,SAAS,EAAE,EAAE;QACb,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;KAChB;IACD,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA;;cAEpF,KAAK;oBACC,WAAW;cACjB,KAAK;aACN,IAAI;oBACG,UAAU;mBACX,SAAS;kBACV,QAAQ;kBACR,QAAQ;;GAEvB;CACF,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU,EAAE,CAAC;AAEjC,MAAM,CAAC,MAAM,cAAc,GAAU;IACnC,IAAI,EAAE,EAAE,UAAU,EAAE,+BAA+B,EAAE;CACtD,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAU;IAC1B,IAAI,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,8BAA8B,EAAE;CAC3E,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU,EAAE,IAAI,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,oBAAoB,EAAE,EAAE,CAAC"}

package/dist/link/link.d.ts

@@ -0,0 +1,39 @@
+import { LitElement } from 'lit';
+export type LinkVariant = 'default' | 'muted' | 'subtle';
+/**
+ * An anchor element that enforces the design system link style.
+ *
+ * Global rule: links are underlined by default and lose the underline on hover.
+ * This component encapsulates that behaviour so it applies consistently across
+ * shadow-DOM boundaries.
+ *
+ * For external links (`target="_blank"`), `rel="noopener noreferrer"` is added
+ * automatically unless overridden.
+ *
+ * @slot - Link label content.
+ *
+ * @cssprop --color-foreground-action    default link colour
+ * @cssprop --color-foreground-alt       muted variant
+ * @cssprop --color-foreground-muted     subtle variant
+ */
+export declare class RrLink extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Link destination. */
+    href: string;
+    /** Browsing context. Use "_blank" to open in a new tab. */
+    target: '_self' | '_blank' | '_parent' | '_top';
+    /** rel attribute. Defaults to "noopener noreferrer" when target="_blank" unless overridden. */
+    rel: string;
+    /** Colour variant. Reflected to an attribute. */
+    variant: LinkVariant;
+    /** Accessible label forwarded to the anchor when link text alone is insufficient. */
+    ariaLabel: string | null;
+    private get _rel();
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'rr-link': RrLink;
+    }
+}
+//# sourceMappingURL=link.d.ts.map

package/dist/link/link.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../../src/link/link.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGrD,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEzD;;;;;;;;;;;;;;;GAeG;AACH,qBACa,MAAO,SAAQ,UAAU;IACpC,MAAM,CAAC,MAAM,0BAqCX;IAEF,wBAAwB;IAExB,IAAI,SAAM;IAEV,2DAA2D;IAE3D,MAAM,EAAE,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAW;IAE1D,+FAA+F;IAE/F,GAAG,SAAM;IAET,iDAAiD;IAEjD,OAAO,EAAE,WAAW,CAAa;IAEjC,qFAAqF;IAE5E,SAAS,EAAE,MAAM,GAAG,IAAI,CAAQ;IAEzC,OAAO,KAAK,IAAI,GAGf;IAED,MAAM;CAUP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}

package/dist/link/link.js

@@ -0,0 +1,112 @@
+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';
+/**
+ * An anchor element that enforces the design system link style.
+ *
+ * Global rule: links are underlined by default and lose the underline on hover.
+ * This component encapsulates that behaviour so it applies consistently across
+ * shadow-DOM boundaries.
+ *
+ * For external links (`target="_blank"`), `rel="noopener noreferrer"` is added
+ * automatically unless overridden.
+ *
+ * @slot - Link label content.
+ *
+ * @cssprop --color-foreground-action    default link colour
+ * @cssprop --color-foreground-alt       muted variant
+ * @cssprop --color-foreground-muted     subtle variant
+ */
+let RrLink = class RrLink extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Link destination. */
+        this.href = '';
+        /** Browsing context. Use "_blank" to open in a new tab. */
+        this.target = '_self';
+        /** rel attribute. Defaults to "noopener noreferrer" when target="_blank" unless overridden. */
+        this.rel = '';
+        /** Colour variant. Reflected to an attribute. */
+        this.variant = 'default';
+        /** Accessible label forwarded to the anchor when link text alone is insufficient. */
+        this.ariaLabel = null;
+    }
+    get _rel() {
+        if (this.rel)
+            return this.rel;
+        return this.target === '_blank' ? 'noopener noreferrer' : '';
+    }
+    render() {
+        return html `
+      <a
+        href=${this.href}
+        target=${this.target}
+        rel=${this._rel || nothing}
+        aria-label=${this.ariaLabel || nothing}
+      ><slot></slot></a>
+    `;
+    }
+};
+RrLink.styles = css `
+    :host {
+      display: inline;
+    }
+
+    a {
+      color: var(--color-foreground-action);
+      text-decoration: underline;
+      text-underline-offset: 3px;
+      text-decoration-thickness: 1px;
+      text-decoration-color: currentColor;
+      transition:
+        text-decoration-color var(--motion-duration-instant) var(--motion-easing-default),
+        color var(--motion-duration-instant) var(--motion-easing-default);
+      cursor: pointer;
+      outline: none;
+    }
+
+    a:hover {
+      text-decoration: none;
+    }
+
+    a:focus-visible {
+      border-radius: 2px;
+      outline: 2px solid var(--color-border-focus);
+      outline-offset: 2px;
+      text-decoration: none;
+    }
+
+    /* ── Variants ─────────────────────────────────────────────────── */
+    :host([variant='muted']) a {
+      color: var(--color-foreground-alt);
+    }
+
+    :host([variant='subtle']) a {
+      color: var(--color-foreground-muted);
+    }
+  `;
+__decorate([
+    property()
+], RrLink.prototype, "href", void 0);
+__decorate([
+    property()
+], RrLink.prototype, "target", void 0);
+__decorate([
+    property()
+], RrLink.prototype, "rel", void 0);
+__decorate([
+    property({ reflect: true })
+], RrLink.prototype, "variant", void 0);
+__decorate([
+    property({ attribute: 'aria-label' })
+], RrLink.prototype, "ariaLabel", void 0);
+RrLink = __decorate([
+    customElement('rr-link')
+], RrLink);
+export { RrLink };
+//# sourceMappingURL=link.js.map

package/dist/link/link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link.js","sourceRoot":"","sources":["../../src/link/link.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;AAI5D;;;;;;;;;;;;;;;GAeG;AAEI,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,UAAU;IAA/B;;QAwCL,wBAAwB;QAExB,SAAI,GAAG,EAAE,CAAC;QAEV,2DAA2D;QAE3D,WAAM,GAA4C,OAAO,CAAC;QAE1D,+FAA+F;QAE/F,QAAG,GAAG,EAAE,CAAC;QAET,iDAAiD;QAEjD,YAAO,GAAgB,SAAS,CAAC;QAEjC,qFAAqF;QAE5E,cAAS,GAAkB,IAAI,CAAC;IAiB3C,CAAC;IAfC,IAAY,IAAI;QACd,IAAI,IAAI,CAAC,GAAG;YAAE,OAAO,IAAI,CAAC,GAAG,CAAC;QAC9B,OAAO,IAAI,CAAC,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,CAAC;IAC/D,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;eAEA,IAAI,CAAC,IAAI;iBACP,IAAI,CAAC,MAAM;cACd,IAAI,CAAC,IAAI,IAAI,OAAO;qBACb,IAAI,CAAC,SAAS,IAAI,OAAO;;KAEzC,CAAC;IACJ,CAAC;;AAzEM,aAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqClB,AArCY,CAqCX;AAIF;IADC,QAAQ,EAAE;oCACD;AAIV;IADC,QAAQ,EAAE;sCAC+C;AAI1D;IADC,QAAQ,EAAE;mCACF;AAIT;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCACK;AAIxB;IADR,QAAQ,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;yCACG;AA1D9B,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CA2ElB"}

package/dist/link/link.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 Variants: Story;
+export declare const External: Story;
+//# sourceMappingURL=link.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"link.stories.d.ts","sourceRoot":"","sources":["../../src/link/link.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,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAC"}

package/dist/link/link.stories.js

@@ -0,0 +1,44 @@
+import { html } from 'lit';
+import '@digital2analogue2/parsimony-components';
+const meta = {
+    title: 'Components/Link',
+    component: 'rr-link',
+    argTypes: {
+        href: { control: 'text' },
+        target: { control: 'select', options: ['_self', '_blank', '_parent', '_top'] },
+        rel: { control: 'text' },
+        variant: { control: 'select', options: ['default', 'muted', 'subtle'] },
+        'aria-label': { control: 'text' },
+    },
+    args: {
+        href: '#',
+        target: '_self',
+        rel: '',
+        variant: 'default',
+        'aria-label': null,
+    },
+    render: ({ href, target, rel, variant, ['aria-label']: ariaLabel }) => html `
+    <rr-link
+      href=${href}
+      target=${target}
+      rel=${rel}
+      variant=${variant}
+      aria-label=${ariaLabel ?? ''}
+    >Read the documentation</rr-link>
+  `,
+};
+export default meta;
+export const Default = {};
+export const Variants = {
+    render: () => html `
+    <div style="display: flex; align-items: center; gap: var(--spacing-inline);">
+      <rr-link href="#" variant="default">Default</rr-link>
+      <rr-link href="#" variant="muted">Muted</rr-link>
+      <rr-link href="#" variant="subtle">Subtle</rr-link>
+    </div>
+  `,
+};
+export const External = {
+    args: { target: '_blank', rel: 'noopener' },
+};
+//# sourceMappingURL=link.stories.js.map

package/dist/link/link.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link.stories.js","sourceRoot":"","sources":["../../src/link/link.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,yCAAyC,CAAC;AAEjD,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,SAAS;IACpB,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,MAAM,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,CAAC,EAAE;QAC9E,GAAG,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACxB,OAAO,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,QAAQ,CAAC,EAAE;QACvE,YAAY,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;KAClC;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,GAAG;QACT,MAAM,EAAE,OAAO;QACf,GAAG,EAAE,EAAE;QACP,OAAO,EAAE,SAAS;QAClB,YAAY,EAAE,IAAI;KACnB;IACD,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,CAAC,YAAY,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA;;aAEhE,IAAI;eACF,MAAM;YACT,GAAG;gBACC,OAAO;mBACJ,SAAS,IAAI,EAAE;;GAE/B;CACF,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU,EAAE,CAAC;AAEjC,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;GAMjB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,IAAI,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,EAAE,UAAU,EAAE;CAC5C,CAAC"}

package/dist/progress/progress.d.ts

@@ -0,0 +1,35 @@
+import { LitElement } from 'lit';
+/**
+ * `<rr-progress>` — horizontal progress bar.
+ *
+ * Supports determinate (0–max) and indeterminate (animated) modes.
+ * Fully accessible via native `role="progressbar"` ARIA attributes.
+ *
+ * @attr {Number} value      - Current value (0–max). Ignored when indeterminate.
+ * @attr {Number} max        - Maximum value (default: 100)
+ * @attr indeterminate       - Animate as an indeterminate loading state
+ * @attr label               - Accessible label (required if no visible label nearby)
+ *
+ * @example
+ * <rr-progress value="60" label="Upload progress"></rr-progress>
+ * <rr-progress indeterminate label="Loading…"></rr-progress>
+ */
+export declare class RrProgress extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Current value (0–max). Ignored when indeterminate. */
+    value: number;
+    /** Maximum value. */
+    max: number;
+    /** Show an animated indeterminate state instead of a fixed value. Reflected to an attribute. */
+    indeterminate: boolean;
+    /** Accessible label, applied as aria-label. Required when no visible label is nearby. */
+    label: string;
+    private get _pct();
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'rr-progress': RrProgress;
+    }
+}
+//# sourceMappingURL=progress.d.ts.map

package/dist/progress/progress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../src/progress/progress.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGrD;;;;;;;;;;;;;;GAcG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,MAAM,CAAC,MAAM,0BAuCX;IAEF,yDAAyD;IAC7B,KAAK,SAAK;IAEtC,qBAAqB;IACO,GAAG,SAAO;IAEtC,gGAAgG;IACpD,aAAa,UAAS;IAElE,yFAAyF;IAC7E,KAAK,SAAM;IAEvB,OAAO,KAAK,IAAI,GAGf;IAED,MAAM;CAkBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/dist/progress/progress.js

@@ -0,0 +1,116 @@
+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';
+/**
+ * `<rr-progress>` — horizontal progress bar.
+ *
+ * Supports determinate (0–max) and indeterminate (animated) modes.
+ * Fully accessible via native `role="progressbar"` ARIA attributes.
+ *
+ * @attr {Number} value      - Current value (0–max). Ignored when indeterminate.
+ * @attr {Number} max        - Maximum value (default: 100)
+ * @attr indeterminate       - Animate as an indeterminate loading state
+ * @attr label               - Accessible label (required if no visible label nearby)
+ *
+ * @example
+ * <rr-progress value="60" label="Upload progress"></rr-progress>
+ * <rr-progress indeterminate label="Loading…"></rr-progress>
+ */
+let RrProgress = class RrProgress extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Current value (0–max). Ignored when indeterminate. */
+        this.value = 0;
+        /** Maximum value. */
+        this.max = 100;
+        /** Show an animated indeterminate state instead of a fixed value. Reflected to an attribute. */
+        this.indeterminate = false;
+        /** Accessible label, applied as aria-label. Required when no visible label is nearby. */
+        this.label = '';
+    }
+    get _pct() {
+        if (this.indeterminate)
+            return 30;
+        return Math.min(Math.max((this.value / this.max) * 100, 0), 100);
+    }
+    render() {
+        return html `
+      <div
+        class="track"
+        role="progressbar"
+        aria-valuenow="${this.indeterminate ? nothing : this.value}"
+        aria-valuemin="0"
+        aria-valuemax="${this.max}"
+        aria-label="${this.label || nothing}"
+        aria-busy="${this.indeterminate ? 'true' : nothing}"
+      >
+        <div
+          class="fill"
+          style="${this.indeterminate ? '' : `width: ${this._pct}%`}"
+        ></div>
+      </div>
+    `;
+    }
+};
+RrProgress.styles = css `
+    :host {
+      display: block;
+      width: 100%;
+    }
+
+    .track {
+      width: 100%;
+      height: 6px;
+      border-radius: var(--radius-full);
+      background: var(--color-background-disabled);
+      overflow: hidden;
+      position: relative;
+    }
+
+    .fill {
+      height: 100%;
+      border-radius: var(--radius-full);
+      background: var(--color-background-action);
+      transition: width var(--motion-duration-standard) var(--motion-easing-move);
+      will-change: width;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      :host([indeterminate]) .fill {
+        animation: none;
+      }
+    }
+
+    :host([indeterminate]) .fill {
+      width: 30%;
+      animation: rr-progress-slide 1.4s ease-in-out infinite;
+    }
+
+    @keyframes rr-progress-slide {
+      0%   { transform: translateX(-100%); }
+      50%  { transform: translateX(300%); }
+      100% { transform: translateX(300%); }
+    }
+  `;
+__decorate([
+    property({ type: Number })
+], RrProgress.prototype, "value", void 0);
+__decorate([
+    property({ type: Number })
+], RrProgress.prototype, "max", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], RrProgress.prototype, "indeterminate", void 0);
+__decorate([
+    property()
+], RrProgress.prototype, "label", void 0);
+RrProgress = __decorate([
+    customElement('rr-progress')
+], RrProgress);
+export { RrProgress };
+//# sourceMappingURL=progress.js.map

package/dist/progress/progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress.js","sourceRoot":"","sources":["../../src/progress/progress.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;AAE5D;;;;;;;;;;;;;;GAcG;AAEI,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QA0CL,yDAAyD;QAC7B,UAAK,GAAG,CAAC,CAAC;QAEtC,qBAAqB;QACO,QAAG,GAAG,GAAG,CAAC;QAEtC,gGAAgG;QACpD,kBAAa,GAAG,KAAK,CAAC;QAElE,yFAAyF;QAC7E,UAAK,GAAG,EAAE,CAAC;IAyBzB,CAAC;IAvBC,IAAY,IAAI;QACd,IAAI,IAAI,CAAC,aAAa;YAAE,OAAO,EAAE,CAAC;QAClC,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,EAAE,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;IACnE,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;yBAIU,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK;;yBAEzC,IAAI,CAAC,GAAG;sBACX,IAAI,CAAC,KAAK,IAAI,OAAO;qBACtB,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;;;;mBAIvC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,IAAI,CAAC,IAAI,GAAG;;;KAG9D,CAAC;IACJ,CAAC;;AA3EM,iBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuClB,AAvCY,CAuCX;AAG0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAW;AAGV;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAW;AAGM;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAAuB;AAGtD;IAAX,QAAQ,EAAE;yCAAY;AApDZ,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CA6EtB"}

package/dist/progress/progress.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 Determinate: Story;
+export declare const Zero: Story;
+export declare const Complete: Story;
+export declare const Indeterminate: Story;
+//# sourceMappingURL=progress.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"progress.stories.d.ts","sourceRoot":"","sources":["../../src/progress/progress.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAErE,OAAO,yCAAyC,CAAC;AAEjD,QAAA,MAAM,IAAI,EAAE,IAuBX,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,WAAW,EAAE,KAAmD,CAAC;AAE9E,eAAO,MAAM,IAAI,EAAE,KAAgD,CAAC;AAEpE,eAAO,MAAM,QAAQ,EAAE,KAA+C,CAAC;AAEvE,eAAO,MAAM,aAAa,EAAE,KAA2D,CAAC"}

package/dist/progress/progress.stories.js

@@ -0,0 +1,32 @@
+import { html } from 'lit';
+import '@digital2analogue2/parsimony-components';
+const meta = {
+    title: 'Components/Progress',
+    component: 'rr-progress',
+    argTypes: {
+        value: { control: { type: 'number' } },
+        max: { control: { type: 'number' } },
+        indeterminate: { control: 'boolean' },
+        label: { control: 'text' },
+    },
+    args: {
+        value: 60,
+        max: 100,
+        indeterminate: false,
+        label: 'Uploading',
+    },
+    render: ({ value, max, indeterminate, label }) => html `
+    <rr-progress
+      value=${value}
+      max=${max}
+      ?indeterminate=${indeterminate}
+      label=${label}
+    ></rr-progress>
+  `,
+};
+export default meta;
+export const Determinate = { args: { value: 60, label: 'Uploading' } };
+export const Zero = { args: { value: 0, label: 'Waiting' } };
+export const Complete = { args: { value: 100, label: 'Done' } };
+export const Indeterminate = { args: { indeterminate: true, label: 'Working' } };
+//# sourceMappingURL=progress.stories.js.map

package/dist/progress/progress.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress.stories.js","sourceRoot":"","sources":["../../src/progress/progress.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,yCAAyC,CAAC;AAEjD,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,aAAa;IACxB,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;QACtC,GAAG,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;QACpC,aAAa,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QACrC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;KAC3B;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,EAAE;QACT,GAAG,EAAE,GAAG;QACR,aAAa,EAAE,KAAK;QACpB,KAAK,EAAE,WAAW;KACnB;IACD,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA;;cAE1C,KAAK;YACP,GAAG;uBACQ,aAAa;cACtB,KAAK;;GAEhB;CACF,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,WAAW,GAAU,EAAE,IAAI,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,CAAC;AAE9E,MAAM,CAAC,MAAM,IAAI,GAAU,EAAE,IAAI,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,CAAC;AAEpE,MAAM,CAAC,MAAM,QAAQ,GAAU,EAAE,IAAI,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,CAAC;AAEvE,MAAM,CAAC,MAAM,aAAa,GAAU,EAAE,IAAI,EAAE,EAAE,aAAa,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,CAAC"}

package/dist/radio/radio-group.d.ts

@@ -0,0 +1,53 @@
+import { LitElement } from 'lit';
+/**
+ * A form-associated group of radio buttons.
+ *
+ * Manages selection state and form participation for its `<rr-radio>` children.
+ * Renders a `<fieldset>` + `<legend>` for accessible grouping.
+ *
+ * Usage:
+ *   <rr-radio-group name="size" label="Size" value="md">
+ *     <rr-radio value="sm">Small</rr-radio>
+ *     <rr-radio value="md">Medium</rr-radio>
+ *     <rr-radio value="lg">Large</rr-radio>
+ *   </rr-radio-group>
+ *
+ * @slot - rr-radio elements
+ * @fires change - When the selected value changes
+ * @csspart fieldset - The outer fieldset element
+ * @csspart legend - The legend / label element
+ */
+export declare class RrRadioGroup extends LitElement {
+    static formAssociated: boolean;
+    static styles: import("lit").CSSResult;
+    /** Form field name submitted with the selected value. */
+    name: string;
+    /** Selected radio value. Syncs the checked state of child radios. */
+    value: string;
+    /** Group label rendered as the legend. */
+    label: string;
+    /** Error message; sets data-invalid and a custom validity. Maps to attribute error-text. */
+    errorText: string;
+    /** Marks the group as required. */
+    required: boolean;
+    /** Disables the group and all child radios. */
+    disabled: boolean;
+    /** Layout direction of the radio options. */
+    orientation: 'vertical' | 'horizontal';
+    private _internals;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    firstUpdated(): void;
+    private _syncRadios;
+    private get _radios();
+    private _onRadioChange;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'rr-radio-group': RrRadioGroup;
+    }
+}
+//# sourceMappingURL=radio-group.d.ts.map

package/dist/radio/radio-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../src/radio/radio-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD;;;;;;;;;;;;;;;;;GAiBG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,MAAM,CAAC,cAAc,UAAQ;IAE7B,MAAM,CAAC,MAAM,0BA0CX;IAEF,yDAAyD;IAC7C,IAAI,SAAM;IACtB,qEAAqE;IACxC,KAAK,SAAM;IACxC,0CAA0C;IAC9B,KAAK,SAAM;IACvB,4FAA4F;IACrD,SAAS,SAAM;IACtD,mCAAmC;IACS,QAAQ,UAAS;IAC7D,+CAA+C;IACH,QAAQ,UAAS;IAC7D,6CAA6C;IAChB,WAAW,EAAE,UAAU,GAAG,YAAY,CAAc;IAEjF,OAAO,CAAC,UAAU,CAAmB;;IAO5B,iBAAiB;IAKjB,oBAAoB;IAKpB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAkBrC,YAAY;IAKrB,OAAO,CAAC,WAAW;IAOnB,OAAO,KAAK,OAAO,GAElB;IAED,OAAO,CAAC,cAAc,CAQpB;IAEF,MAAM;CAkBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}