@digital2analogue2/parsimony-components 0.1.0

package/dist/dialog/dialog.stories.d.ts

@@ -0,0 +1,7 @@
+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 Open: Story;
+//# sourceMappingURL=dialog.stories.d.ts.map

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

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

package/dist/dialog/dialog.stories.js

@@ -0,0 +1,30 @@
+import { html } from 'lit';
+import '@digital2analogue2/parsimony-components';
+const meta = {
+    title: 'Components/Dialog',
+    component: 'rr-dialog',
+    argTypes: {
+        heading: { control: 'text' },
+        open: { control: 'boolean' },
+        closeOnBackdrop: { control: 'boolean' },
+    },
+    args: {
+        heading: 'Confirm',
+        open: true,
+        closeOnBackdrop: true,
+    },
+    render: ({ heading, open, closeOnBackdrop }) => html `
+    <rr-dialog
+      heading=${heading}
+      ?open=${open}
+      ?close-on-backdrop=${closeOnBackdrop}
+    >
+      Are you sure you want to continue?
+      <rr-button slot="footer" variant="secondary">Cancel</rr-button>
+      <rr-button slot="footer">Confirm</rr-button>
+    </rr-dialog>
+  `,
+};
+export default meta;
+export const Open = {};
+//# sourceMappingURL=dialog.stories.js.map

package/dist/dialog/dialog.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.stories.js","sourceRoot":"","sources":["../../src/dialog/dialog.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,MAAM,EAAE;QAC5B,IAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAC5B,eAAe,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACxC;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,IAAI;QACV,eAAe,EAAE,IAAI;KACtB;IACD,MAAM,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,eAAe,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA;;gBAEtC,OAAO;cACT,IAAI;2BACS,eAAe;;;;;;GAMvC;CACF,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,IAAI,GAAU,EAAE,CAAC"}

package/dist/icon/icon.d.ts

@@ -0,0 +1,40 @@
+import { LitElement } from 'lit';
+export type IconSize = 'compact' | 'default' | 'large' | 'xl';
+/**
+ * A sized, accessible wrapper for inline SVG icons.
+ *
+ * Slot any SVG icon inside — the component handles sizing via icon-size
+ * tokens and accessibility attributes. By default the icon is decorative
+ * (aria-hidden="true"). Set `aria-label` to make it a meaningful image.
+ *
+ * @example Decorative (screen readers skip it):
+ *   <rr-icon size="default">
+ *     <svg ...><path .../></svg>
+ *   </rr-icon>
+ *
+ * @example Standalone icon with label:
+ *   <rr-icon aria-label="Close dialog">
+ *     <svg ...><path .../></svg>
+ *   </rr-icon>
+ *
+ * @slot - The SVG icon element.
+ * @cssprop --icon-size-compact  16px
+ * @cssprop --icon-size-default  20px
+ * @cssprop --icon-size-large    24px
+ * @cssprop --icon-size-xl       32px
+ */
+export declare class RrIcon extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Icon size, mapped to the icon-size design tokens. Reflected to an attribute. */
+    size: IconSize;
+    /** Accessible label. When set, the host gets role="img"; otherwise it is aria-hidden="true" (decorative). */
+    ariaLabel: string | null;
+    updated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'rr-icon': RrIcon;
+    }
+}
+//# sourceMappingURL=icon.d.ts.map

package/dist/icon/icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../src/icon/icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGrD,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,IAAI,CAAC;AAE9D;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBACa,MAAO,SAAQ,UAAU;IACpC,MAAM,CAAC,MAAM,0BAgCX;IAEF,mFAAmF;IAEnF,IAAI,EAAE,QAAQ,CAAa;IAE3B,6GAA6G;IAEpG,SAAS,EAAE,MAAM,GAAG,IAAI,CAAQ;IAEhC,OAAO;IAYhB,MAAM;CAGP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}

package/dist/icon/icon.js

@@ -0,0 +1,99 @@
+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 sized, accessible wrapper for inline SVG icons.
+ *
+ * Slot any SVG icon inside — the component handles sizing via icon-size
+ * tokens and accessibility attributes. By default the icon is decorative
+ * (aria-hidden="true"). Set `aria-label` to make it a meaningful image.
+ *
+ * @example Decorative (screen readers skip it):
+ *   <rr-icon size="default">
+ *     <svg ...><path .../></svg>
+ *   </rr-icon>
+ *
+ * @example Standalone icon with label:
+ *   <rr-icon aria-label="Close dialog">
+ *     <svg ...><path .../></svg>
+ *   </rr-icon>
+ *
+ * @slot - The SVG icon element.
+ * @cssprop --icon-size-compact  16px
+ * @cssprop --icon-size-default  20px
+ * @cssprop --icon-size-large    24px
+ * @cssprop --icon-size-xl       32px
+ */
+let RrIcon = class RrIcon extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Icon size, mapped to the icon-size design tokens. Reflected to an attribute. */
+        this.size = 'default';
+        /** Accessible label. When set, the host gets role="img"; otherwise it is aria-hidden="true" (decorative). */
+        this.ariaLabel = null;
+    }
+    updated() {
+        // Manage host-level aria attributes imperatively so they appear
+        // on the element itself (not inside the shadow root).
+        if (this.ariaLabel) {
+            this.setAttribute('role', 'img');
+            this.removeAttribute('aria-hidden');
+        }
+        else {
+            this.removeAttribute('role');
+            this.setAttribute('aria-hidden', 'true');
+        }
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+RrIcon.styles = css `
+    :host {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      width: var(--icon-size-default);
+      height: var(--icon-size-default);
+      color: inherit;
+      line-height: 0;
+    }
+
+    :host([size='compact']) {
+      width: var(--icon-size-compact);
+      height: var(--icon-size-compact);
+    }
+
+    :host([size='large']) {
+      width: var(--icon-size-large);
+      height: var(--icon-size-large);
+    }
+
+    :host([size='xl']) {
+      width: var(--icon-size-xl);
+      height: var(--icon-size-xl);
+    }
+
+    ::slotted(svg) {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+  `;
+__decorate([
+    property({ reflect: true })
+], RrIcon.prototype, "size", void 0);
+__decorate([
+    property({ attribute: 'aria-label' })
+], RrIcon.prototype, "ariaLabel", void 0);
+RrIcon = __decorate([
+    customElement('rr-icon')
+], RrIcon);
+export { RrIcon };
+//# sourceMappingURL=icon.js.map

package/dist/icon/icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../src/icon/icon.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAW,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAI5D;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEI,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,UAAU;IAA/B;;QAmCL,mFAAmF;QAEnF,SAAI,GAAa,SAAS,CAAC;QAE3B,6GAA6G;QAEpG,cAAS,GAAkB,IAAI,CAAC;IAiB3C,CAAC;IAfU,OAAO;QACd,gEAAgE;QAChE,sDAAsD;QACtD,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;YACjC,IAAI,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;QACtC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;YAC7B,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;QAC3C,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AAxDM,aAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgClB,AAhCY,CAgCX;AAIF;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oCACD;AAIlB;IADR,QAAQ,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;yCACG;AAzC9B,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CA0DlB"}

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"icon.stories.d.ts","sourceRoot":"","sources":["../../src/icon/icon.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAErE,OAAO,yCAAyC,CAAC;AASjD,QAAA,MAAM,IAAI,EAAE,IAcX,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,KAAK,EAAE,KASnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAItB,CAAC"}

package/dist/icon/icon.stories.js

@@ -0,0 +1,41 @@
+import { html } from 'lit';
+import '@digital2analogue2/parsimony-components';
+const checkSvg = html `
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+    <circle cx="12" cy="12" r="9" />
+    <path d="m8 12 3 3 5-6" />
+  </svg>
+`;
+const meta = {
+    title: 'Components/Icon',
+    component: 'rr-icon',
+    argTypes: {
+        size: { control: 'select', options: ['compact', 'default', 'large', 'xl'] },
+        'aria-label': { control: 'text' },
+    },
+    args: {
+        size: 'default',
+        'aria-label': null,
+    },
+    render: ({ size, ['aria-label']: ariaLabel }) => html `
+    <rr-icon size=${size} aria-label=${ariaLabel ?? ''}>${checkSvg}</rr-icon>
+  `,
+};
+export default meta;
+export const Default = {};
+export const Sizes = {
+    render: () => html `
+    <div style="display: flex; align-items: center; gap: var(--spacing-inline);">
+      <rr-icon size="compact">${checkSvg}</rr-icon>
+      <rr-icon size="default">${checkSvg}</rr-icon>
+      <rr-icon size="large">${checkSvg}</rr-icon>
+      <rr-icon size="xl">${checkSvg}</rr-icon>
+    </div>
+  `,
+};
+export const Labelled = {
+    render: () => html `
+    <rr-icon aria-label="Info">${checkSvg}</rr-icon>
+  `,
+};
+//# sourceMappingURL=icon.stories.js.map

package/dist/icon/icon.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.stories.js","sourceRoot":"","sources":["../../src/icon/icon.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,yCAAyC,CAAC;AAEjD,MAAM,QAAQ,GAAG,IAAI,CAAA;;;;;CAKpB,CAAC;AAEF,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,SAAS;IACpB,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,CAAC,EAAE;QAC3E,YAAY,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;KAClC;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,SAAS;QACf,YAAY,EAAE,IAAI;KACnB;IACD,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,YAAY,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA;oBACnC,IAAI,eAAe,SAAS,IAAI,EAAE,IAAI,QAAQ;GAC/D;CACF,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU,EAAE,CAAC;AAEjC,MAAM,CAAC,MAAM,KAAK,GAAU;IAC1B,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;gCAEY,QAAQ;gCACR,QAAQ;8BACV,QAAQ;2BACX,QAAQ;;GAEhC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;iCACa,QAAQ;GACtC;CACF,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,22 @@
+export { RrAlert } from './alert/alert.js';
+export { RrAvatar } from './avatar/avatar.js';
+export { RrBadge } from './badge/badge.js';
+export { RrButton } from './button/button.js';
+export { RrCard } from './card/card.js';
+export { RrCheckbox } from './checkbox/checkbox.js';
+export { RrDialog } from './dialog/dialog.js';
+export { RrIcon } from './icon/icon.js';
+export { RrInput } from './input/input.js';
+export { RrLink } from './link/link.js';
+export { RrProgress } from './progress/progress.js';
+export { RrRadio } from './radio/radio.js';
+export { RrRadioGroup } from './radio/radio-group.js';
+export { RrSelect } from './select/select.js';
+export { RrSkeleton } from './skeleton/skeleton.js';
+export { RrSpinner } from './spinner/spinner.js';
+export { RrTab } from './tabs/tab.js';
+export { RrTabList } from './tabs/tab-list.js';
+export { RrTag } from './tag/tag.js';
+export { RrTextarea } from './textarea/textarea.js';
+export { RrToggle } from './toggle/toggle.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/index.js

@@ -0,0 +1,22 @@
+export { RrAlert } from './alert/alert.js';
+export { RrAvatar } from './avatar/avatar.js';
+export { RrBadge } from './badge/badge.js';
+export { RrButton } from './button/button.js';
+export { RrCard } from './card/card.js';
+export { RrCheckbox } from './checkbox/checkbox.js';
+export { RrDialog } from './dialog/dialog.js';
+export { RrIcon } from './icon/icon.js';
+export { RrInput } from './input/input.js';
+export { RrLink } from './link/link.js';
+export { RrProgress } from './progress/progress.js';
+export { RrRadio } from './radio/radio.js';
+export { RrRadioGroup } from './radio/radio-group.js';
+export { RrSelect } from './select/select.js';
+export { RrSkeleton } from './skeleton/skeleton.js';
+export { RrSpinner } from './spinner/spinner.js';
+export { RrTab } from './tabs/tab.js';
+export { RrTabList } from './tabs/tab-list.js';
+export { RrTag } from './tag/tag.js';
+export { RrTextarea } from './textarea/textarea.js';
+export { RrToggle } from './toggle/toggle.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/input/input.d.ts

@@ -0,0 +1,61 @@
+import { LitElement } from 'lit';
+/**
+ * A form-associated text input with label, helper text, and error state.
+ *
+ * Uses `ElementInternals` for native form participation and
+ * `delegatesFocus` so the host forwards focus to the inner `<input>`.
+ *
+ * @slot label - Optional override for the label text
+ * @fires input - When the input value changes (mirrors native input event)
+ * @fires change - When the input value is committed (mirrors native change event)
+ * @csspart label - The label element
+ * @csspart input - The inner input element
+ * @csspart helper - The helper text container
+ * @csspart error - The error message container
+ */
+export declare class RrInput 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;
+    /** Input type attribute (text, email, password, etc.). */
+    type: string;
+    /** Form field name for submission. */
+    name: string;
+    /** Current input value. */
+    value: string;
+    /** Placeholder text shown when empty. */
+    placeholder: string;
+    /** Visible label text above the input. */
+    label: string;
+    /** Helper text below the input. Hidden when error-text is set. */
+    helperText: string;
+    /** Error message below the input. Sets aria-invalid and replaces helper text. */
+    errorText: string;
+    /** Marks the field as required. Shows asterisk and sets aria-required. */
+    required: boolean;
+    /** Disables the input. */
+    disabled: boolean;
+    /** Autocomplete hint for browser autofill. */
+    autoComplete: string;
+    private _input;
+    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-input': RrInput;
+    }
+}
+//# sourceMappingURL=input.d.ts.map

package/dist/input/input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../src/input/input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD;;;;;;;;;;;;;GAaG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACrC,MAAM,CAAC,cAAc,UAAQ;IAE7B,MAAM,CAAC,iBAAiB;;;;;;;MAGtB;IAEF,MAAM,CAAC,MAAM,0BA0EX;IAEF,0DAA0D;IAC9C,IAAI,SAAU;IAE1B,sCAAsC;IAC1B,IAAI,SAAM;IAEtB,2BAA2B;IACf,KAAK,SAAM;IAEvB,yCAAyC;IAC7B,WAAW,SAAM;IAE7B,0CAA0C;IAC9B,KAAK,SAAM;IAEvB,kEAAkE;IAC1B,UAAU,SAAM;IAExD,iFAAiF;IAC1C,SAAS,SAAM;IAEtD,0EAA0E;IAC9B,QAAQ,UAAS;IAE7D,0BAA0B;IACkB,QAAQ,UAAS;IAE7D,8CAA8C;IACL,YAAY,SAAM;IAE3C,OAAO,CAAC,MAAM,CAAoB;IAElD,OAAO,CAAC,UAAU,CAAmB;;IAOrC,OAAO,KAAK,UAAU,GAErB;IAED,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAmBrC,OAAO,CAAC,QAAQ;IAOhB,OAAO,CAAC,SAAS;IAOjB,MAAM;CAqCP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

package/dist/input/input.js

@@ -0,0 +1,233 @@
+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 text input with label, helper text, and error state.
+ *
+ * Uses `ElementInternals` for native form participation and
+ * `delegatesFocus` so the host forwards focus to the inner `<input>`.
+ *
+ * @slot label - Optional override for the label text
+ * @fires input - When the input value changes (mirrors native input event)
+ * @fires change - When the input value is committed (mirrors native change event)
+ * @csspart label - The label element
+ * @csspart input - The inner input element
+ * @csspart helper - The helper text container
+ * @csspart error - The error message container
+ */
+let RrInput = class RrInput extends LitElement {
+    constructor() {
+        super();
+        /** Input type attribute (text, email, password, etc.). */
+        this.type = 'text';
+        /** Form field name for submission. */
+        this.name = '';
+        /** Current input value. */
+        this.value = '';
+        /** Placeholder text shown when empty. */
+        this.placeholder = '';
+        /** Visible label text above the input. */
+        this.label = '';
+        /** Helper text below the input. Hidden when error-text is set. */
+        this.helperText = '';
+        /** Error message below the input. Sets aria-invalid and replaces helper text. */
+        this.errorText = '';
+        /** Marks the field as required. Shows asterisk and sets aria-required. */
+        this.required = false;
+        /** Disables the input. */
+        this.disabled = false;
+        /** Autocomplete hint for browser autofill. */
+        this.autoComplete = '';
+        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._input);
+            }
+            else {
+                this.removeAttribute('data-invalid');
+                this._internals.setValidity?.({});
+            }
+        }
+    }
+    _onInput(e) {
+        const input = e.target;
+        this.value = input.value;
+        this._internals.setFormValue?.(this.value);
+        this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+    }
+    _onChange(e) {
+        const input = e.target;
+        this.value = input.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="input">
+            <slot name="label">${this.label}</slot>${this.required
+                ? html `<span class="required" aria-hidden="true">*</span>`
+                : nothing}
+          </label>`
+            : nothing}
+      <input
+        part="input"
+        id="input"
+        .type=${this.type}
+        .value=${live(this.value)}
+        .placeholder=${this.placeholder}
+        .name=${this.name}
+        .disabled=${this.disabled}
+        .required=${this.required}
+        autocomplete=${this.autoComplete || nothing}
+        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}
+      />
+      ${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}
+    `;
+    }
+};
+RrInput.formAssociated = true;
+RrInput.shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+};
+RrInput.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;
+    }
+
+    input {
+      display: block;
+      width: 100%;
+      box-sizing: border-box;
+      font: var(--font-body-large);
+      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;
+      transition: border-color 120ms ease;
+    }
+
+    input::placeholder {
+      color: var(--component-input-foreground-placeholder);
+    }
+
+    input:hover {
+      border-color: var(--component-input-border-hover);
+    }
+
+    input:focus {
+      border-color: var(--component-input-border-focus);
+      box-shadow: 0 0 0 1px var(--component-input-border-focus);
+    }
+
+    :host([disabled]) input {
+      background: var(--component-input-background-disabled);
+      border-color: var(--component-input-border-disabled);
+      color: var(--component-input-foreground-disabled);
+      cursor: not-allowed;
+    }
+
+    :host([disabled]) label {
+      color: var(--component-input-foreground-disabled);
+    }
+
+    .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;
+    }
+
+    :host([data-invalid]) input {
+      border-color: var(--component-input-border-error);
+    }
+
+    :host([data-invalid]) input:focus {
+      box-shadow: 0 0 0 1px var(--component-input-border-error);
+    }
+  `;
+__decorate([
+    property()
+], RrInput.prototype, "type", void 0);
+__decorate([
+    property()
+], RrInput.prototype, "name", void 0);
+__decorate([
+    property()
+], RrInput.prototype, "value", void 0);
+__decorate([
+    property()
+], RrInput.prototype, "placeholder", void 0);
+__decorate([
+    property()
+], RrInput.prototype, "label", void 0);
+__decorate([
+    property({ attribute: 'helper-text' })
+], RrInput.prototype, "helperText", void 0);
+__decorate([
+    property({ attribute: 'error-text' })
+], RrInput.prototype, "errorText", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], RrInput.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], RrInput.prototype, "disabled", void 0);
+__decorate([
+    property({ attribute: 'autocomplete' })
+], RrInput.prototype, "autoComplete", void 0);
+__decorate([
+    query('input')
+], RrInput.prototype, "_input", void 0);
+RrInput = __decorate([
+    customElement('rr-input')
+], RrInput);
+export { RrInput };
+//# sourceMappingURL=input.js.map

package/dist/input/input.js.map

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

package/dist/input/input.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 WithHelperText: Story;
+export declare const Error: Story;
+export declare const Disabled: Story;
+//# sourceMappingURL=input.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input.stories.d.ts","sourceRoot":"","sources":["../../src/input/input.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAErE,OAAO,yCAAyC,CAAC;AAEjD,QAAA,MAAM,IAAI,EAAE,IAmCX,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,cAAc,EAAE,KAE5B,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAEnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAAiE,CAAC"}