@digital2analogue2/parsimony-components 0.1.0

package/dist/tag/tag.d.ts

@@ -0,0 +1,38 @@
+import { LitElement } from 'lit';
+export type TagVariant = 'default' | 'subtle';
+/**
+ * An outlined, uppercase tag / chip component.
+ *
+ * The deliberate inverse of `<rr-badge>`: where the badge is a filled pill for
+ * status, the tag is a square-cornered (radius.sm), transparent-filled, bordered
+ * label for skills, categories, and metadata. Content is rendered UPPERCASE with
+ * all-caps letter-spacing, so authors pass normal-case text.
+ *
+ * Uses component-level design tokens for all visual properties. Brand theming
+ * cascades automatically via CSS custom properties on `:root`.
+ *
+ * @slot - Tag label text
+ * @cssprop --component-tag-{variant}-background
+ * @cssprop --component-tag-{variant}-foreground
+ * @cssprop --component-tag-{variant}-border
+ * @cssprop --component-tag-radius
+ * @cssprop --component-tag-padding-x
+ * @cssprop --component-tag-padding-y
+ */
+export declare class RrTag extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Emphasis level. `default` is the standard visible outline (alt text,
+     * muted-foreground border) that reads correctly standalone — use it for skill
+     * tags and most labels. `subtle` is a quieter treatment (muted text,
+     * elevated-border) for dense or secondary contexts.
+     */
+    variant: TagVariant;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'rr-tag': RrTag;
+    }
+}
+//# sourceMappingURL=tag.d.ts.map

package/dist/tag/tag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../src/tag/tag.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE9C;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBACa,KAAM,SAAQ,UAAU;IACnC,MAAM,CAAC,MAAM,0BAoBX;IAEF;;;;;OAKG;IAEH,OAAO,EAAE,UAAU,CAAa;IAEhC,MAAM;CAGP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,QAAQ,EAAE,KAAK,CAAC;KACjB;CACF"}

package/dist/tag/tag.js

@@ -0,0 +1,71 @@
+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';
+/**
+ * An outlined, uppercase tag / chip component.
+ *
+ * The deliberate inverse of `<rr-badge>`: where the badge is a filled pill for
+ * status, the tag is a square-cornered (radius.sm), transparent-filled, bordered
+ * label for skills, categories, and metadata. Content is rendered UPPERCASE with
+ * all-caps letter-spacing, so authors pass normal-case text.
+ *
+ * Uses component-level design tokens for all visual properties. Brand theming
+ * cascades automatically via CSS custom properties on `:root`.
+ *
+ * @slot - Tag label text
+ * @cssprop --component-tag-{variant}-background
+ * @cssprop --component-tag-{variant}-foreground
+ * @cssprop --component-tag-{variant}-border
+ * @cssprop --component-tag-radius
+ * @cssprop --component-tag-padding-x
+ * @cssprop --component-tag-padding-y
+ */
+let RrTag = class RrTag extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Emphasis level. `default` is the standard visible outline (alt text,
+         * muted-foreground border) that reads correctly standalone — use it for skill
+         * tags and most labels. `subtle` is a quieter treatment (muted text,
+         * elevated-border) for dense or secondary contexts.
+         */
+        this.variant = 'default';
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+RrTag.styles = css `
+    :host {
+      display: inline-flex;
+      align-items: center;
+      white-space: nowrap;
+      text-transform: uppercase;
+      letter-spacing: var(--letter-spacing-all-caps);
+      font: var(--font-label-small);
+      border-radius: var(--component-tag-radius);
+      padding: var(--component-tag-padding-y) var(--component-tag-padding-x);
+      border: 1px solid var(--component-tag-default-border);
+      background: var(--component-tag-default-background);
+      color: var(--component-tag-default-foreground);
+    }
+
+    :host([variant='subtle']) {
+      background: var(--component-tag-subtle-background);
+      color: var(--component-tag-subtle-foreground);
+      border-color: var(--component-tag-subtle-border);
+    }
+  `;
+__decorate([
+    property({ reflect: true })
+], RrTag.prototype, "variant", void 0);
+RrTag = __decorate([
+    customElement('rr-tag')
+], RrTag);
+export { RrTag };
+//# sourceMappingURL=tag.js.map

package/dist/tag/tag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag.js","sourceRoot":"","sources":["../../src/tag/tag.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;AAI5D;;;;;;;;;;;;;;;;;;GAkBG;AAEI,IAAM,KAAK,GAAX,MAAM,KAAM,SAAQ,UAAU;IAA9B;;QAuBL;;;;;WAKG;QAEH,YAAO,GAAe,SAAS,CAAC;IAKlC,CAAC;IAHC,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AAjCM,YAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;GAoBlB,AApBY,CAoBX;AASF;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCACI;AA9BrB,KAAK;IADjB,aAAa,CAAC,QAAQ,CAAC;GACX,KAAK,CAmCjB"}

package/dist/tag/tag.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 Default: Story;
+export declare const Subtle: Story;
+export declare const AllVariants: Story;
+export declare const SkillTags: Story;
+//# sourceMappingURL=tag.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tag.stories.d.ts","sourceRoot":"","sources":["../../src/tag/tag.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,yCAAyC,CAAC;AAIjD,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,MAAM,EAAE,KAAkE,CAAC;AAExF,eAAO,MAAM,WAAW,EAAE,KAMzB,CAAC;AAIF,eAAO,MAAM,SAAS,EAAE,KAevB,CAAC"}

package/dist/tag/tag.stories.js

@@ -0,0 +1,43 @@
+import { html } from 'lit';
+// Barrel side-effect import registers every rr-* element (see story-ui.config.js).
+import '@digital2analogue2/parsimony-components';
+const VARIANTS = ['default', 'subtle'];
+const meta = {
+    title: 'Components/Tag',
+    component: 'rr-tag',
+    argTypes: {
+        variant: { control: 'select', options: VARIANTS },
+        label: { control: 'text' },
+    },
+    args: { variant: 'default', label: 'Design Systems' },
+    render: ({ variant, label }) => html `<rr-tag variant=${variant}>${label}</rr-tag>`,
+};
+export default meta;
+export const Default = {};
+export const Subtle = { args: { variant: 'subtle', label: 'Decision Tooling' } };
+export const AllVariants = {
+    render: () => html `
+    <div style="display: flex; flex-wrap: wrap; gap: var(--spacing-inline);">
+      ${VARIANTS.map((v) => html `<rr-tag variant=${v}>${v}</rr-tag>`)}
+    </div>
+  `,
+};
+// Mirrors the skill-tag row on riverromney.design/about that motivated this
+// component — the outlined uppercase pattern badge was never meant to cover.
+export const SkillTags = {
+    render: () => html `
+    <div style="display: flex; flex-wrap: wrap; gap: var(--spacing-tight);">
+      ${[
+        'Design Systems',
+        'B2B / Enterprise UX',
+        'Compliance UX',
+        'Decision Tooling',
+        'Figma',
+        'Research',
+        'Prototyping',
+        'Cross-functional Leadership',
+    ].map((s) => html `<rr-tag>${s}</rr-tag>`)}
+    </div>
+  `,
+};
+//# sourceMappingURL=tag.stories.js.map

package/dist/tag/tag.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag.stories.js","sourceRoot":"","sources":["../../src/tag/tag.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,mFAAmF;AACnF,OAAO,yCAAyC,CAAC;AAEjD,MAAM,QAAQ,GAAG,CAAC,SAAS,EAAE,QAAQ,CAAU,CAAC;AAEhD,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,QAAQ;IACnB,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,gBAAgB,EAAE;IACrD,MAAM,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA,mBAAmB,OAAO,IAAI,KAAK,WAAW;CACnF,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU,EAAE,CAAC;AAEjC,MAAM,CAAC,MAAM,MAAM,GAAU,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,kBAAkB,EAAE,EAAE,CAAC;AAExF,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,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC;;GAElE;CACF,CAAC;AAEF,4EAA4E;AAC5E,6EAA6E;AAC7E,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;QAEZ;QACA,gBAAgB;QAChB,qBAAqB;QACrB,eAAe;QACf,kBAAkB;QAClB,OAAO;QACP,UAAU;QACV,aAAa;QACb,6BAA6B;KAC9B,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAA,WAAW,CAAC,WAAW,CAAC;;GAE5C;CACF,CAAC"}

package/dist/test-setup.d.ts

@@ -0,0 +1,2 @@
+import 'vitest-axe/extend-expect';
+//# sourceMappingURL=test-setup.d.ts.map

package/dist/test-setup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"test-setup.d.ts","sourceRoot":"","sources":["../src/test-setup.ts"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAC"}

package/dist/test-setup.js

@@ -0,0 +1,2 @@
+import 'vitest-axe/extend-expect';
+//# sourceMappingURL=test-setup.js.map

package/dist/test-setup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"test-setup.js","sourceRoot":"","sources":["../src/test-setup.ts"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAC"}

package/dist/textarea/textarea.d.ts

@@ -0,0 +1,60 @@
+import { LitElement } from 'lit';
+/**
+ * A form-associated multi-line text area with label, helper text, and error state.
+ *
+ * Mirrors `<rr-input>` in API and token usage. Uses `ElementInternals` for
+ * native form participation and `delegatesFocus` so the host forwards focus
+ * to the inner `<textarea>`.
+ *
+ * @slot label - Optional override for the label text
+ * @fires input - When the value changes (mirrors native input event)
+ * @fires change - When the value is committed (mirrors native change event)
+ * @csspart label - The label element
+ * @csspart textarea - The inner textarea element
+ * @csspart helper - The helper text container
+ * @csspart error - The error message container
+ */
+export declare class RrTextarea 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;
+    /** Form field name submitted with the form value. */
+    name: string;
+    /** Current text value; set as the form value via ElementInternals. */
+    value: string;
+    /** Placeholder text shown when empty. */
+    placeholder: string;
+    /** Label text; renders a label element when non-empty. */
+    label: string;
+    /** Helper text shown below the field (attribute: helper-text). Hidden when an error is present. */
+    helperText: string;
+    /** Error message (attribute: error-text); when set, marks the field invalid and replaces the helper text. */
+    errorText: string;
+    /** Number of visible text rows on the inner textarea. */
+    rows: number;
+    /** Marks the field required; shows a required indicator. Reflected. */
+    required: boolean;
+    /** Disables the field. Reflected. */
+    disabled: boolean;
+    private _textarea;
+    private _internals;
+    constructor();
+    private get _isInvalid();
+    updated(changed: Map<string, unknown>): void;
+    private _onInput;
+    private _onChange;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'rr-textarea': RrTextarea;
+    }
+}
+//# sourceMappingURL=textarea.d.ts.map

package/dist/textarea/textarea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../src/textarea/textarea.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD;;;;;;;;;;;;;;GAcG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,MAAM,CAAC,cAAc,UAAQ;IAE7B,MAAM,CAAC,iBAAiB;;;;;;;MAGtB;IAEF,MAAM,CAAC,MAAM,0BA8EX;IAEF,qDAAqD;IACzC,IAAI,SAAM;IACtB,sEAAsE;IAC1D,KAAK,SAAM;IACvB,yCAAyC;IAC7B,WAAW,SAAM;IAC7B,0DAA0D;IAC9C,KAAK,SAAM;IACvB,mGAAmG;IAC3D,UAAU,SAAM;IACxD,6GAA6G;IACtE,SAAS,SAAM;IACtD,yDAAyD;IAC7B,IAAI,SAAK;IACrC,uEAAuE;IAC3B,QAAQ,UAAS;IAC7D,qCAAqC;IACO,QAAQ,UAAS;IAE1C,OAAO,CAAC,SAAS,CAAuB;IAE3D,OAAO,CAAC,UAAU,CAAmB;;IAOrC,OAAO,KAAK,UAAU,GAErB;IAEQ,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAmB9C,OAAO,CAAC,QAAQ;IAOhB,OAAO,CAAC,SAAS;IAOjB,MAAM;CAoCP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/dist/textarea/textarea.js

@@ -0,0 +1,232 @@
+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, query } from 'lit/decorators.js';
+import { live } from 'lit/directives/live.js';
+/**
+ * A form-associated multi-line text area with label, helper text, and error state.
+ *
+ * Mirrors `<rr-input>` in API and token usage. Uses `ElementInternals` for
+ * native form participation and `delegatesFocus` so the host forwards focus
+ * to the inner `<textarea>`.
+ *
+ * @slot label - Optional override for the label text
+ * @fires input - When the value changes (mirrors native input event)
+ * @fires change - When the value is committed (mirrors native change event)
+ * @csspart label - The label element
+ * @csspart textarea - The inner textarea element
+ * @csspart helper - The helper text container
+ * @csspart error - The error message container
+ */
+let RrTextarea = class RrTextarea extends LitElement {
+    constructor() {
+        super();
+        /** Form field name submitted with the form value. */
+        this.name = '';
+        /** Current text value; set as the form value via ElementInternals. */
+        this.value = '';
+        /** Placeholder text shown when empty. */
+        this.placeholder = '';
+        /** Label text; renders a label element when non-empty. */
+        this.label = '';
+        /** Helper text shown below the field (attribute: helper-text). Hidden when an error is present. */
+        this.helperText = '';
+        /** Error message (attribute: error-text); when set, marks the field invalid and replaces the helper text. */
+        this.errorText = '';
+        /** Number of visible text rows on the inner textarea. */
+        this.rows = 3;
+        /** Marks the field required; shows a required indicator. Reflected. */
+        this.required = false;
+        /** Disables the field. Reflected. */
+        this.disabled = false;
+        this._internals = this.attachInternals();
+    }
+    get _isInvalid() {
+        return this.errorText.length > 0;
+    }
+    updated(changed) {
+        if (changed.has('value')) {
+            this._internals.setFormValue?.(this.value);
+        }
+        if (changed.has('errorText')) {
+            if (this._isInvalid) {
+                this.setAttribute('data-invalid', '');
+                this._internals.setValidity?.({ customError: true }, this.errorText, this._textarea);
+            }
+            else {
+                this.removeAttribute('data-invalid');
+                this._internals.setValidity?.({});
+            }
+        }
+    }
+    _onInput(e) {
+        const ta = e.target;
+        this.value = ta.value;
+        this._internals.setFormValue?.(this.value);
+        this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+    }
+    _onChange(e) {
+        const ta = e.target;
+        this.value = ta.value;
+        this._internals.setFormValue?.(this.value);
+        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+    }
+    render() {
+        const hasLabel = this.label.length > 0;
+        const describedBy = this._isInvalid ? 'error' : this.helperText ? 'helper' : undefined;
+        return html `
+      ${hasLabel
+            ? html `<label part="label" for="textarea">
+            <slot name="label">${this.label}</slot>${this.required
+                ? html `<span class="required" aria-hidden="true">*</span>`
+                : nothing}
+          </label>`
+            : nothing}
+      <textarea
+        part="textarea"
+        id="textarea"
+        .value=${live(this.value)}
+        .placeholder=${this.placeholder}
+        .name=${this.name}
+        .disabled=${this.disabled}
+        .required=${this.required}
+        .rows=${this.rows}
+        aria-required=${this.required ? 'true' : nothing}
+        aria-invalid=${this._isInvalid ? 'true' : nothing}
+        aria-errormessage=${this._isInvalid ? 'error' : nothing}
+        aria-describedby=${describedBy || nothing}
+        @input=${this._onInput}
+        @change=${this._onChange}
+      ></textarea>
+      ${this.helperText && !this._isInvalid
+            ? html `<div id="helper" part="helper" class="helper">${this.helperText}</div>`
+            : nothing}
+      ${this._isInvalid
+            ? html `<div id="error" part="error" class="error" role="alert">${this.errorText}</div>`
+            : nothing}
+    `;
+    }
+};
+RrTextarea.formAssociated = true;
+RrTextarea.shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+};
+RrTextarea.styles = css `
+    :host {
+      display: block;
+    }
+
+    label {
+      display: block;
+      font: var(--font-label-medium);
+      color: var(--component-input-foreground-label);
+      margin-bottom: 4px;
+    }
+
+    .required {
+      color: var(--component-input-foreground-label-required);
+      margin-left: 2px;
+    }
+
+    textarea {
+      display: block;
+      width: 100%;
+      box-sizing: border-box;
+      font: var(--font-body-large);
+      font-family: inherit;
+      color: var(--component-input-foreground-value);
+      background: var(--component-input-background-default);
+      border: 1px solid var(--component-input-border-default);
+      border-radius: var(--component-input-radius);
+      padding: var(--component-input-padding-y) var(--component-input-padding-x);
+      outline: none;
+      resize: vertical;
+      min-height: 80px;
+      transition: border-color var(--motion-duration-instant) var(--motion-easing-default);
+    }
+
+    textarea::placeholder {
+      color: var(--component-input-foreground-placeholder);
+    }
+
+    textarea:hover {
+      border-color: var(--component-input-border-hover);
+    }
+
+    textarea:focus {
+      border-color: var(--component-input-border-focus);
+      box-shadow: 0 0 0 1px var(--component-input-border-focus);
+    }
+
+    :host([disabled]) textarea {
+      background: var(--component-input-background-disabled);
+      border-color: var(--component-input-border-disabled);
+      color: var(--component-input-foreground-disabled);
+      cursor: not-allowed;
+      resize: none;
+    }
+
+    :host([disabled]) label {
+      color: var(--component-input-foreground-disabled);
+    }
+
+    :host([data-invalid]) textarea {
+      border-color: var(--component-input-border-error);
+    }
+
+    :host([data-invalid]) textarea:focus {
+      box-shadow: 0 0 0 1px var(--component-input-border-error);
+    }
+
+    .helper {
+      font: var(--font-label-small);
+      color: var(--component-input-foreground-helper);
+      margin-top: 4px;
+    }
+
+    .error {
+      font: var(--font-label-small);
+      color: var(--component-input-foreground-error);
+      margin-top: 4px;
+    }
+  `;
+__decorate([
+    property()
+], RrTextarea.prototype, "name", void 0);
+__decorate([
+    property()
+], RrTextarea.prototype, "value", void 0);
+__decorate([
+    property()
+], RrTextarea.prototype, "placeholder", void 0);
+__decorate([
+    property()
+], RrTextarea.prototype, "label", void 0);
+__decorate([
+    property({ attribute: 'helper-text' })
+], RrTextarea.prototype, "helperText", void 0);
+__decorate([
+    property({ attribute: 'error-text' })
+], RrTextarea.prototype, "errorText", void 0);
+__decorate([
+    property({ type: Number })
+], RrTextarea.prototype, "rows", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], RrTextarea.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], RrTextarea.prototype, "disabled", void 0);
+__decorate([
+    query('textarea')
+], RrTextarea.prototype, "_textarea", void 0);
+RrTextarea = __decorate([
+    customElement('rr-textarea')
+], RrTextarea);
+export { RrTextarea };
+//# sourceMappingURL=textarea.js.map

package/dist/textarea/textarea.js.map

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

package/dist/textarea/textarea.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 Default: Story;
+export declare const WithHelper: Story;
+export declare const WithError: Story;
+export declare const Disabled: Story;
+//# sourceMappingURL=textarea.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.stories.d.ts","sourceRoot":"","sources":["../../src/textarea/textarea.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAErE,OAAO,yCAAyC,CAAC;AAEjD,QAAA,MAAM,IAAI,EAAE,IAsCX,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,UAAU,EAAE,KAAuD,CAAC;AAEjF,eAAO,MAAM,SAAS,EAAE,KAA0D,CAAC;AAEnF,eAAO,MAAM,QAAQ,EAAE,KAAgE,CAAC"}

package/dist/textarea/textarea.stories.js

@@ -0,0 +1,47 @@
+import { html } from 'lit';
+import '@digital2analogue2/parsimony-components';
+const meta = {
+    title: 'Components/Textarea',
+    component: 'rr-textarea',
+    argTypes: {
+        name: { control: 'text' },
+        value: { control: 'text' },
+        placeholder: { control: 'text' },
+        label: { control: 'text' },
+        helperText: { control: 'text' },
+        errorText: { control: 'text' },
+        rows: { control: { type: 'number' } },
+        required: { control: 'boolean' },
+        disabled: { control: 'boolean' },
+    },
+    args: {
+        name: '',
+        value: '',
+        placeholder: 'Share your thoughts…',
+        label: 'Feedback',
+        helperText: '',
+        errorText: '',
+        rows: 3,
+        required: false,
+        disabled: false,
+    },
+    render: ({ name, value, placeholder, label, helperText, errorText, rows, required, disabled }) => html `
+    <rr-textarea
+      name=${name}
+      value=${value}
+      placeholder=${placeholder}
+      label=${label}
+      helper-text=${helperText}
+      error-text=${errorText}
+      rows=${rows}
+      ?required=${required}
+      ?disabled=${disabled}
+    ></rr-textarea>
+  `,
+};
+export default meta;
+export const Default = {};
+export const WithHelper = { args: { helperText: 'Max 500 characters.' } };
+export const WithError = { args: { errorText: 'This field is required.' } };
+export const Disabled = { args: { disabled: true, value: 'Cannot edit this.' } };
+//# sourceMappingURL=textarea.stories.js.map

package/dist/textarea/textarea.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.stories.js","sourceRoot":"","sources":["../../src/textarea/textarea.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,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,WAAW,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAChC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,UAAU,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC/B,SAAS,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC9B,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;QACrC,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAChC,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,EAAE;QACR,KAAK,EAAE,EAAE;QACT,WAAW,EAAE,sBAAsB;QACnC,KAAK,EAAE,UAAU;QACjB,UAAU,EAAE,EAAE;QACd,SAAS,EAAE,EAAE;QACb,IAAI,EAAE,CAAC;QACP,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;KAChB;IACD,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA;;aAE3F,IAAI;cACH,KAAK;oBACC,WAAW;cACjB,KAAK;oBACC,UAAU;mBACX,SAAS;aACf,IAAI;kBACC,QAAQ;kBACR,QAAQ;;GAEvB;CACF,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU,EAAE,CAAC;AAEjC,MAAM,CAAC,MAAM,UAAU,GAAU,EAAE,IAAI,EAAE,EAAE,UAAU,EAAE,qBAAqB,EAAE,EAAE,CAAC;AAEjF,MAAM,CAAC,MAAM,SAAS,GAAU,EAAE,IAAI,EAAE,EAAE,SAAS,EAAE,yBAAyB,EAAE,EAAE,CAAC;AAEnF,MAAM,CAAC,MAAM,QAAQ,GAAU,EAAE,IAAI,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,mBAAmB,EAAE,EAAE,CAAC"}

package/dist/toggle/toggle.d.ts

@@ -0,0 +1,43 @@
+import { LitElement } from 'lit';
+/**
+ * A form-associated toggle switch for binary on/off settings.
+ *
+ * The pill-shaped track and sliding knob are rendered in shadow DOM;
+ * the hidden native `<input type="checkbox">` provides focus, keyboard,
+ * and label-click semantics. `ElementInternals` handles form participation.
+ *
+ * Usage:
+ *   <rr-toggle name="darkMode" label="Dark mode" checked></rr-toggle>
+ *   <rr-toggle name="notify">Email notifications</rr-toggle>
+ *
+ * @slot - Label text (alternative to the `label` property)
+ * @fires change - When the toggle state changes
+ * @csspart track - The pill-shaped track element
+ * @csspart knob - The sliding knob element
+ * @csspart label - The label text element
+ */
+export declare class RrToggle extends LitElement {
+    static formAssociated: boolean;
+    static styles: import("lit").CSSResult;
+    /** On/off state. Reflected. */
+    checked: boolean;
+    /** Disables the toggle. Reflected. */
+    disabled: boolean;
+    /** Form value submitted when the toggle is on. */
+    value: string;
+    /** Form field name submitted with the form value. */
+    name: string;
+    /** Label text; falls back to slotted content when empty. */
+    label: string;
+    private _internals;
+    constructor();
+    updated(): void;
+    private _onChange;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'rr-toggle': RrToggle;
+    }
+}
+//# sourceMappingURL=toggle.d.ts.map

package/dist/toggle/toggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../src/toggle/toggle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGrD;;;;;;;;;;;;;;;;GAgBG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,MAAM,CAAC,cAAc,UAAQ;IAE7B,MAAM,CAAC,MAAM,0BA6FX;IAEF,+BAA+B;IACa,OAAO,UAAS;IAC5D,sCAAsC;IACM,QAAQ,UAAS;IAC7D,kDAAkD;IACtC,KAAK,SAAQ;IACzB,qDAAqD;IACzC,IAAI,SAAM;IACtB,4DAA4D;IAChD,KAAK,SAAM;IAEvB,OAAO,CAAC,UAAU,CAAmB;;IAO5B,OAAO;IAIhB,OAAO,CAAC,SAAS;IAOjB,MAAM;CAuBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}