@digital2analogue2/parsimony-components 0.1.0

package/dist/toggle/toggle.js

@@ -0,0 +1,189 @@
+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 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
+ */
+let RrToggle = class RrToggle extends LitElement {
+    constructor() {
+        super();
+        /** On/off state. Reflected. */
+        this.checked = false;
+        /** Disables the toggle. Reflected. */
+        this.disabled = false;
+        /** Form value submitted when the toggle is on. */
+        this.value = 'on';
+        /** Form field name submitted with the form value. */
+        this.name = '';
+        /** Label text; falls back to slotted content when empty. */
+        this.label = '';
+        this._internals = this.attachInternals();
+    }
+    updated() {
+        this._internals.setFormValue?.(this.checked ? this.value : null);
+    }
+    _onChange() {
+        if (this.disabled)
+            return;
+        this.checked = !this.checked;
+        this._internals.setFormValue?.(this.checked ? this.value : null);
+        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+    }
+    render() {
+        return html `
+      <div class="track-wrap">
+        <input
+          type="checkbox"
+          id="toggle"
+          role="switch"
+          .name=${this.name}
+          .value=${this.value}
+          .checked=${this.checked}
+          .disabled=${this.disabled}
+          aria-checked=${this.checked ? 'true' : 'false'}
+          @change=${this._onChange}
+        />
+        <div class="track" part="track">
+          <div class="knob" part="knob"></div>
+        </div>
+      </div>
+      <label part="label" for="toggle">
+        ${this.label ? this.label : html `<slot></slot>`}
+      </label>
+    `;
+    }
+};
+RrToggle.formAssociated = true;
+RrToggle.styles = css `
+    :host {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--spacing-tight);
+      cursor: pointer;
+      user-select: none;
+    }
+
+    :host([disabled]) {
+      cursor: not-allowed;
+    }
+
+    /* Wrap positions the hidden input over the visible track */
+    .track-wrap {
+      position: relative;
+      flex-shrink: 0;
+      width: 36px;
+      height: 20px;
+    }
+
+    /* Visually hidden native input — covers the track area for click/focus */
+    input {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      opacity: 0;
+      margin: 0;
+      cursor: inherit;
+      z-index: 1;
+    }
+
+    .track {
+      position: absolute;
+      inset: 0;
+      border-radius: var(--radius-full);
+      border: 1px solid var(--component-toggle-track-border-off);
+      background: var(--component-toggle-track-background-off);
+      transition:
+        background-color var(--motion-duration-instant) var(--motion-easing-default),
+        border-color var(--motion-duration-instant) var(--motion-easing-default);
+      display: flex;
+      align-items: center;
+      padding: 0 3px;
+    }
+
+    :host([checked]) .track {
+      background: var(--component-toggle-track-background-on);
+      border-color: var(--component-toggle-track-border-on);
+    }
+
+    :host([disabled]) .track {
+      background: var(--component-toggle-track-background-disabled);
+      border-color: var(--component-toggle-track-border-disabled);
+    }
+
+    .knob {
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      background: var(--component-toggle-knob-background-off);
+      transition:
+        transform var(--motion-duration-instant) var(--motion-easing-move),
+        background-color var(--motion-duration-instant) var(--motion-easing-default);
+      flex-shrink: 0;
+    }
+
+    :host([checked]) .knob {
+      transform: translateX(16px);
+      background: var(--component-toggle-knob-background-on);
+    }
+
+    :host([disabled]) .knob {
+      background: var(--component-toggle-knob-background-disabled);
+    }
+
+    /* Focus ring on the track driven by the hidden input's focus state */
+    input:focus-visible ~ .track {
+      outline: 2px solid var(--color-border-focus);
+      outline-offset: 2px;
+    }
+
+    label {
+      font: var(--font-label-medium);
+      color: var(--component-toggle-foreground-label);
+      cursor: inherit;
+      line-height: 1.4;
+    }
+
+    :host([disabled]) label {
+      color: var(--component-toggle-foreground-disabled);
+    }
+  `;
+__decorate([
+    property({ type: Boolean, reflect: true })
+], RrToggle.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], RrToggle.prototype, "disabled", void 0);
+__decorate([
+    property()
+], RrToggle.prototype, "value", void 0);
+__decorate([
+    property()
+], RrToggle.prototype, "name", void 0);
+__decorate([
+    property()
+], RrToggle.prototype, "label", void 0);
+RrToggle = __decorate([
+    customElement('rr-toggle')
+], RrToggle);
+export { RrToggle };
+//# sourceMappingURL=toggle.js.map

package/dist/toggle/toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.js","sourceRoot":"","sources":["../../src/toggle/toggle.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;AAE5D;;;;;;;;;;;;;;;;GAgBG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IA+GtC;QACE,KAAK,EAAE,CAAC;QAdV,+BAA+B;QACa,YAAO,GAAG,KAAK,CAAC;QAC5D,sCAAsC;QACM,aAAQ,GAAG,KAAK,CAAC;QAC7D,kDAAkD;QACtC,UAAK,GAAG,IAAI,CAAC;QACzB,qDAAqD;QACzC,SAAI,GAAG,EAAE,CAAC;QACtB,4DAA4D;QAChD,UAAK,GAAG,EAAE,CAAC;QAMrB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;IAC3C,CAAC;IAEQ,OAAO;QACd,IAAI,CAAC,UAAU,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IACnE,CAAC;IAEO,SAAS;QACf,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,UAAU,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;QACjE,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IAC7E,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;kBAMG,IAAI,CAAC,IAAI;mBACR,IAAI,CAAC,KAAK;qBACR,IAAI,CAAC,OAAO;sBACX,IAAI,CAAC,QAAQ;yBACV,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;oBACpC,IAAI,CAAC,SAAS;;;;;;;UAOxB,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA,eAAe;;KAElD,CAAC;IACJ,CAAC;;AApJM,uBAAc,GAAG,IAAI,AAAP,CAAQ;AAEtB,eAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6FlB,AA7FY,CA6FX;AAG0C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAAiB;AAEhB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAAkB;AAEjD;IAAX,QAAQ,EAAE;uCAAc;AAEb;IAAX,QAAQ,EAAE;sCAAW;AAEV;IAAX,QAAQ,EAAE;uCAAY;AA3GZ,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAsJpB"}

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.stories.d.ts","sourceRoot":"","sources":["../../src/toggle/toggle.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,GAAG,EAAE,KAAU,CAAC;AAE7B,eAAO,MAAM,EAAE,EAAE,KAAmC,CAAC;AAErD,eAAO,MAAM,QAAQ,EAAE,KAAoC,CAAC"}

package/dist/toggle/toggle.stories.js

@@ -0,0 +1,34 @@
+import { html } from 'lit';
+import '@digital2analogue2/parsimony-components';
+const meta = {
+    title: 'Components/Toggle',
+    component: 'rr-toggle',
+    argTypes: {
+        checked: { control: 'boolean' },
+        disabled: { control: 'boolean' },
+        value: { control: 'text' },
+        name: { control: 'text' },
+        label: { control: 'text' },
+    },
+    args: {
+        checked: false,
+        disabled: false,
+        value: 'on',
+        name: '',
+        label: 'Enable notifications',
+    },
+    render: ({ checked, disabled, value, name, label }) => html `
+    <rr-toggle
+      ?checked=${checked}
+      ?disabled=${disabled}
+      value=${value}
+      name=${name}
+      label=${label}
+    ></rr-toggle>
+  `,
+};
+export default meta;
+export const Off = {};
+export const On = { args: { checked: true } };
+export const Disabled = { args: { disabled: true } };
+//# sourceMappingURL=toggle.stories.js.map

package/dist/toggle/toggle.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.stories.js","sourceRoot":"","sources":["../../src/toggle/toggle.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,SAAS,EAAE;QAC/B,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAChC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;KAC3B;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,KAAK;QACd,QAAQ,EAAE,KAAK;QACf,KAAK,EAAE,IAAI;QACX,IAAI,EAAE,EAAE;QACR,KAAK,EAAE,sBAAsB;KAC9B;IACD,MAAM,EAAE,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA;;iBAE5C,OAAO;kBACN,QAAQ;cACZ,KAAK;aACN,IAAI;cACH,KAAK;;GAEhB;CACF,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,GAAG,GAAU,EAAE,CAAC;AAE7B,MAAM,CAAC,MAAM,EAAE,GAAU,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,CAAC;AAErD,MAAM,CAAC,MAAM,QAAQ,GAAU,EAAE,IAAI,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,CAAC"}

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@digital2analogue2/parsimony-components",
+  "version": "0.1.0",
+  "description": "Framework-agnostic Lit web components for the River Romney design system",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "tsc",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "cem": "cem analyze --litelement",
+    "figma:connect": "figma connect publish",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "story-ui": "story-ui start",
+    "test:visual": "playwright test",
+    "test:visual:update": "playwright test --update-snapshots",
+    "prepack": "npm run build"
+  },
+  "peerDependencies": {
+    "lit": "^3.0.0 || ^4.0.0"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "^0.11.0",
+    "@figma/code-connect": "^1.4.8",
+    "@playwright/test": "^1.49.0",
+    "@storybook/addon-a11y": "^10.4.6",
+    "@storybook/addon-docs": "^10.4.6",
+    "@storybook/web-components-vite": "^10.4.6",
+    "@tpitre/story-ui": "^4.16.12",
+    "http-server": "^14.1.1",
+    "jsdom": "^29.1.1",
+    "lit": "^3.2.0",
+    "storybook": "^10.4.4",
+    "typescript": "^6.0.3",
+    "vite": "^8.1.3",
+    "vitest": "^4.1.9",
+    "vitest-axe": "^1.0.0-pre.3"
+  },
+  "customElements": "custom-elements.json",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "custom-elements.json",
+    "src/react.d.ts"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/digital2analogue/parsimony.git",
+    "directory": "packages/components"
+  }
+}

package/src/react.d.ts

@@ -0,0 +1,199 @@
+/**
+ * JSX IntrinsicElements declarations for React consumers.
+ *
+ * React 19 passes unknown props to custom elements natively, but
+ * TypeScript still needs these declarations for autocomplete and
+ * type checking in TSX files.
+ *
+ * Usage in a React project:
+ *   /// <reference types="@digital2analogue2/parsimony-components/react" />
+ *   // or add to tsconfig: "types": ["@digital2analogue2/parsimony-components/react"]
+ */
+
+import type { RrAlert } from './alert/alert.js';
+import type { RrAvatar } from './avatar/avatar.js';
+import type { RrBadge } from './badge/badge.js';
+import type { RrButton } from './button/button.js';
+import type { RrCard } from './card/card.js';
+import type { RrCheckbox } from './checkbox/checkbox.js';
+import type { RrDialog } from './dialog/dialog.js';
+import type { RrIcon } from './icon/icon.js';
+import type { RrInput } from './input/input.js';
+import type { RrLink } from './link/link.js';
+import type { RrProgress } from './progress/progress.js';
+import type { RrRadio } from './radio/radio.js';
+import type { RrRadioGroup } from './radio/radio-group.js';
+import type { RrSelect, SelectOption } from './select/select.js';
+import type { RrSkeleton } from './skeleton/skeleton.js';
+import type { RrSpinner } from './spinner/spinner.js';
+import type { RrTab } from './tabs/tab.js';
+import type { RrTabList } from './tabs/tab-list.js';
+import type { RrTag } from './tag/tag.js';
+import type { RrTextarea } from './textarea/textarea.js';
+import type { RrToggle } from './toggle/toggle.js';
+
+type LitProps<T> = Partial<Omit<T, keyof HTMLElement>> & React.HTMLAttributes<HTMLElement>;
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace JSX {
+    interface IntrinsicElements {
+      'rr-alert': LitProps<RrAlert> & {
+        variant?: RrAlert['variant'];
+        title?: string;
+        dismissible?: boolean;
+        children?: React.ReactNode;
+        onClose?: (e: Event) => void;
+      };
+      'rr-avatar': LitProps<RrAvatar> & {
+        size?: RrAvatar['size'];
+        color?: RrAvatar['color'];
+        name?: string;
+        src?: string;
+      };
+      'rr-badge': LitProps<RrBadge> & {
+        variant?: RrBadge['variant'];
+        children?: React.ReactNode;
+      };
+      'rr-button': LitProps<RrButton> & {
+        variant?: RrButton['variant'];
+        size?: RrButton['size'];
+        disabled?: boolean;
+        loading?: boolean;
+        type?: 'button' | 'submit' | 'reset';
+        'aria-label'?: string;
+        children?: React.ReactNode;
+      };
+      'rr-card': LitProps<RrCard> & {
+        padding?: RrCard['padding'];
+        children?: React.ReactNode;
+      };
+      'rr-checkbox': LitProps<RrCheckbox> & {
+        name?: string;
+        value?: string;
+        checked?: boolean;
+        indeterminate?: boolean;
+        disabled?: boolean;
+        label?: string;
+        children?: React.ReactNode;
+        onChange?: (e: Event) => void;
+      };
+      'rr-dialog': LitProps<RrDialog> & {
+        heading?: string;
+        open?: boolean;
+        'close-on-backdrop'?: boolean;
+        children?: React.ReactNode;
+        'onRr-dialog-close'?: (e: CustomEvent) => void;
+      };
+      'rr-icon': LitProps<RrIcon> & {
+        size?: RrIcon['size'];
+        label?: string;
+        children?: React.ReactNode;
+      };
+      'rr-input': LitProps<RrInput> & {
+        type?: string;
+        name?: string;
+        value?: string;
+        placeholder?: string;
+        label?: string;
+        'helper-text'?: string;
+        'error-text'?: string;
+        required?: boolean;
+        disabled?: boolean;
+        autocomplete?: string;
+        onInput?: (e: Event) => void;
+        onChange?: (e: Event) => void;
+      };
+      'rr-link': LitProps<RrLink> & {
+        href?: string;
+        target?: string;
+        color?: RrLink['color'];
+        children?: React.ReactNode;
+      };
+      'rr-radio': LitProps<RrRadio> & {
+        value?: string;
+        checked?: boolean;
+        disabled?: boolean;
+        children?: React.ReactNode;
+        'onRr-radio-change'?: (e: CustomEvent) => void;
+      };
+      'rr-radio-group': LitProps<RrRadioGroup> & {
+        name?: string;
+        value?: string;
+        label?: string;
+        orientation?: RrRadioGroup['orientation'];
+        disabled?: boolean;
+        'error-text'?: string;
+        children?: React.ReactNode;
+        onChange?: (e: Event) => void;
+      };
+      'rr-skeleton': LitProps<RrSkeleton> & {
+        variant?: RrSkeleton['variant'];
+        width?: string;
+        height?: string;
+      };
+      'rr-select': LitProps<RrSelect> & {
+        name?: string;
+        value?: string;
+        options?: SelectOption[];
+        placeholder?: string;
+        label?: string;
+        'helper-text'?: string;
+        'error-text'?: string;
+        required?: boolean;
+        disabled?: boolean;
+        onChange?: (e: Event) => void;
+      };
+      'rr-progress': LitProps<RrProgress> & {
+        value?: number;
+        max?: number;
+        indeterminate?: boolean;
+        label?: string;
+      };
+      'rr-spinner': LitProps<RrSpinner> & {
+        size?: RrSpinner['size'];
+        label?: string;
+      };
+      'rr-tab': LitProps<RrTab> & {
+        value?: string;
+        selected?: boolean;
+        disabled?: boolean;
+        children?: React.ReactNode;
+      };
+      'rr-tab-list': LitProps<RrTabList> & {
+        label?: string;
+        value?: string;
+        children?: React.ReactNode;
+        onChange?: (e: CustomEvent<{ value: string }>) => void;
+      };
+      'rr-tag': LitProps<RrTag> & {
+        variant?: RrTag['variant'];
+        children?: React.ReactNode;
+      };
+      'rr-textarea': LitProps<RrTextarea> & {
+        name?: string;
+        value?: string;
+        placeholder?: string;
+        label?: string;
+        rows?: number;
+        'helper-text'?: string;
+        'error-text'?: string;
+        required?: boolean;
+        disabled?: boolean;
+        onInput?: (e: Event) => void;
+        onChange?: (e: Event) => void;
+      };
+      'rr-toggle': LitProps<RrToggle> & {
+        name?: string;
+        value?: string;
+        checked?: boolean;
+        disabled?: boolean;
+        label?: string;
+        children?: React.ReactNode;
+        onChange?: (e: Event) => void;
+      };
+    }
+  }
+}
+
+export {};