@digital2analogue2/parsimony-components 0.1.0

package/dist/spinner/spinner.js

@@ -0,0 +1,131 @@
+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';
+/**
+ * `<rr-spinner>` — animated loading indicator.
+ *
+ * Renders a circular SVG spinner using the action color token.
+ * Announces to screen readers via an `aria-live` region.
+ *
+ * @attr {sm|md|lg} size - Visual size (default: md)
+ * @attr label - Accessible label text (default: "Loading")
+ *
+ * @example
+ * <rr-spinner></rr-spinner>
+ * <rr-spinner size="sm" label="Saving…"></rr-spinner>
+ */
+let RrSpinner = class RrSpinner extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Visual size of the spinner. Reflected to the size attribute. */
+        this.size = 'md';
+        /** Accessible label announced to screen readers via the status region. */
+        this.label = 'Loading';
+    }
+    render() {
+        // SVG viewBox is always 24×24; CSS scales via width/height.
+        // Track: full circle (circumference ≈ 62.83)
+        // Arc: 25% of circumference ≈ 15.7, gap ≈ 47.1; rotated -90° to start at top.
+        return html `
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        aria-hidden="true"
+        focusable="false"
+      >
+        <circle class="track" cx="12" cy="12" r="10" />
+        <circle
+          class="arc"
+          cx="12"
+          cy="12"
+          r="10"
+          stroke-dasharray="15.7 47.1"
+          transform="rotate(-90 12 12)"
+        />
+      </svg>
+      <span class="sr-only" role="status" aria-live="polite">${this.label}</span>
+    `;
+    }
+};
+RrSpinner.styles = css `
+    :host {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+
+    svg {
+      display: block;
+      width: 24px;
+      height: 24px;
+      animation: rr-spin 0.8s linear infinite;
+    }
+
+    /* A frozen arc still reads as "busy" (plus the aria-label); the rotation
+       is decorative, so honor the OS-level motion preference. */
+    @media (prefers-reduced-motion: reduce) {
+      svg {
+        animation: none;
+      color: var(--color-foreground-action);
+    }
+
+    :host([size='sm']) svg {
+      width: 16px;
+      height: 16px;
+    }
+
+    :host([size='lg']) svg {
+      width: 32px;
+      height: 32px;
+    }
+
+    @keyframes rr-spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+
+    .track {
+      stroke: var(--color-border-elevated);
+      fill: none;
+      stroke-width: 2;
+      stroke-linecap: round;
+    }
+
+    .arc {
+      stroke: currentColor;
+      fill: none;
+      stroke-width: 2;
+      stroke-linecap: round;
+    }
+
+    /* Visually hidden but accessible */
+    .sr-only {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+    }
+  `;
+__decorate([
+    property({ reflect: true })
+], RrSpinner.prototype, "size", void 0);
+__decorate([
+    property()
+], RrSpinner.prototype, "label", void 0);
+RrSpinner = __decorate([
+    customElement('rr-spinner')
+], RrSpinner);
+export { RrSpinner };
+//# sourceMappingURL=spinner.js.map

package/dist/spinner/spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.js","sourceRoot":"","sources":["../../src/spinner/spinner.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;;;;;;;;;;;;GAYG;AAEI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAoEL,mEAAmE;QACtC,SAAI,GAAgB,IAAI,CAAC;QAEtD,0EAA0E;QAC9D,UAAK,GAAG,SAAS,CAAC;IA0BhC,CAAC;IAxBC,MAAM;QACJ,4DAA4D;QAC5D,6CAA6C;QAC7C,8EAA8E;QAC9E,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;+DAiBgD,IAAI,CAAC,KAAK;KACpE,CAAC;IACJ,CAAC;;AAhGM,gBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiElB,AAjEY,CAiEX;AAG2B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAA0B;AAG1C;IAAX,QAAQ,EAAE;wCAAmB;AAxEnB,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAkGrB"}

package/dist/spinner/spinner.stories.d.ts

@@ -0,0 +1,8 @@
+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;
+//# sourceMappingURL=spinner.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.stories.d.ts","sourceRoot":"","sources":["../../src/spinner/spinner.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAErE,OAAO,yCAAyC,CAAC;AAEjD,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,KAQnB,CAAC"}

package/dist/spinner/spinner.stories.js

@@ -0,0 +1,29 @@
+import { html } from 'lit';
+import '@digital2analogue2/parsimony-components';
+const meta = {
+    title: 'Components/Spinner',
+    component: 'rr-spinner',
+    argTypes: {
+        size: { control: 'select', options: ['sm', 'md', 'lg'] },
+        label: { control: 'text' },
+    },
+    args: {
+        size: 'md',
+        label: 'Loading',
+    },
+    render: ({ size, label }) => html `
+    <rr-spinner size=${size} label=${label}></rr-spinner>
+  `,
+};
+export default meta;
+export const Default = {};
+export const Sizes = {
+    render: () => html `
+    <div style="display: flex; align-items: center; gap: var(--spacing-inline);">
+      <rr-spinner size="sm"></rr-spinner>
+      <rr-spinner size="md"></rr-spinner>
+      <rr-spinner size="lg"></rr-spinner>
+    </div>
+  `,
+};
+//# sourceMappingURL=spinner.stories.js.map

package/dist/spinner/spinner.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.stories.js","sourceRoot":"","sources":["../../src/spinner/spinner.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,yCAAyC,CAAC;AAEjD,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,YAAY;IACvB,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,EAAE;QACxD,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;KAC3B;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,IAAI;QACV,KAAK,EAAE,SAAS;KACjB;IACD,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA;uBACZ,IAAI,UAAU,KAAK;GACvC;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;;;;;;GAMjB;CACF,CAAC"}

package/dist/tabs/tab-list.d.ts

@@ -0,0 +1,45 @@
+import { LitElement } from 'lit';
+/**
+ * `<rr-tab-list>` — the accessible tab strip container.
+ *
+ * Wraps `<rr-tab>` elements and manages selection state, keyboard navigation
+ * (left/right arrows, Home, End), and ARIA attributes.
+ *
+ * The tab panels are managed by the consuming app — listen for the `change`
+ * event and show/hide content accordingly.
+ *
+ * @slot - Place `<rr-tab>` elements here
+ *
+ * @attr label - Accessible label for the tablist (required)
+ * @attr value - Currently selected tab value
+ *
+ * @fires change - When a tab is selected; detail: { value: string }
+ *
+ * @example
+ * <rr-tab-list label="View options" value="overview">
+ *   <rr-tab value="overview">Overview</rr-tab>
+ *   <rr-tab value="history">History</rr-tab>
+ *   <rr-tab value="settings">Settings</rr-tab>
+ * </rr-tab-list>
+ */
+export declare class RrTabList extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Accessible label for the tablist (required); sets aria-label on the role=tablist element. */
+    label: string;
+    /** Currently selected tab value. Reflected; syncs the matching rr-tab child's selected state. */
+    value: string;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: Map<PropertyKey, unknown>): void;
+    private _getTabs;
+    private _syncTabs;
+    private _onTabSelect;
+    private _onKeyDown;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'rr-tab-list': RrTabList;
+    }
+}
+//# sourceMappingURL=tab-list.d.ts.map

package/dist/tabs/tab-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-list.d.ts","sourceRoot":"","sources":["../../src/tabs/tab-list.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC,MAAM,CAAC,MAAM,0BAiBX;IAEF,gGAAgG;IACpF,KAAK,SAAM;IAEvB,iGAAiG;IACpE,KAAK,SAAM;IAExC,iBAAiB;IAQjB,oBAAoB;IAMpB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC;IAM1C,OAAO,CAAC,QAAQ;IAIhB,OAAO,CAAC,SAAS;IAOjB,OAAO,CAAC,YAAY,CASlB;IAEF,OAAO,CAAC,UAAU,CAmChB;IAEF,MAAM;CAWP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,SAAS,CAAC;KAC1B;CACF"}

package/dist/tabs/tab-list.js

@@ -0,0 +1,150 @@
+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';
+/**
+ * `<rr-tab-list>` — the accessible tab strip container.
+ *
+ * Wraps `<rr-tab>` elements and manages selection state, keyboard navigation
+ * (left/right arrows, Home, End), and ARIA attributes.
+ *
+ * The tab panels are managed by the consuming app — listen for the `change`
+ * event and show/hide content accordingly.
+ *
+ * @slot - Place `<rr-tab>` elements here
+ *
+ * @attr label - Accessible label for the tablist (required)
+ * @attr value - Currently selected tab value
+ *
+ * @fires change - When a tab is selected; detail: { value: string }
+ *
+ * @example
+ * <rr-tab-list label="View options" value="overview">
+ *   <rr-tab value="overview">Overview</rr-tab>
+ *   <rr-tab value="history">History</rr-tab>
+ *   <rr-tab value="settings">Settings</rr-tab>
+ * </rr-tab-list>
+ */
+let RrTabList = class RrTabList extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Accessible label for the tablist (required); sets aria-label on the role=tablist element. */
+        this.label = '';
+        /** Currently selected tab value. Reflected; syncs the matching rr-tab child's selected state. */
+        this.value = '';
+        this._onTabSelect = (e) => {
+            e.stopPropagation();
+            this.value = e.detail.value;
+            this._syncTabs();
+            this.dispatchEvent(new CustomEvent('change', {
+                bubbles: true,
+                composed: true,
+                detail: { value: this.value },
+            }));
+        };
+        this._onKeyDown = (e) => {
+            const tabs = this._getTabs().filter(t => !t.disabled);
+            if (tabs.length === 0)
+                return;
+            const current = tabs.findIndex(t => t.value === this.value);
+            let next = -1;
+            switch (e.key) {
+                case 'ArrowRight':
+                    next = (current + 1) % tabs.length;
+                    break;
+                case 'ArrowLeft':
+                    next = (current - 1 + tabs.length) % tabs.length;
+                    break;
+                case 'Home':
+                    next = 0;
+                    break;
+                case 'End':
+                    next = tabs.length - 1;
+                    break;
+                default:
+                    return;
+            }
+            e.preventDefault();
+            const target = tabs[next];
+            this.value = target.value;
+            this._syncTabs();
+            this.dispatchEvent(new CustomEvent('change', {
+                bubbles: true,
+                composed: true,
+                detail: { value: this.value },
+            }));
+            // Move focus to the newly selected tab
+            target.focus();
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('rr-tab-select', this._onTabSelect);
+        this.addEventListener('keydown', this._onKeyDown);
+        // Sync on first connect in case value is preset
+        this._syncTabs();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('rr-tab-select', this._onTabSelect);
+        this.removeEventListener('keydown', this._onKeyDown);
+    }
+    updated(changed) {
+        if (changed.has('value')) {
+            this._syncTabs();
+        }
+    }
+    _getTabs() {
+        return [...this.querySelectorAll('rr-tab')];
+    }
+    _syncTabs() {
+        const tabs = this._getTabs();
+        tabs.forEach(tab => {
+            tab.selected = tab.value === this.value;
+        });
+    }
+    render() {
+        return html `
+      <div
+        class="tablist"
+        role="tablist"
+        aria-label="${this.label}"
+      >
+        <slot @slotchange="${this._syncTabs}"></slot>
+      </div>
+    `;
+    }
+};
+RrTabList.styles = css `
+    :host {
+      display: block;
+    }
+
+    .tablist {
+      display: flex;
+      align-items: flex-end;
+      gap: 0;
+      border-bottom: 1px solid var(--color-border-alt);
+      overflow-x: auto;
+      scrollbar-width: none;
+    }
+
+    .tablist::-webkit-scrollbar {
+      display: none;
+    }
+  `;
+__decorate([
+    property()
+], RrTabList.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true })
+], RrTabList.prototype, "value", void 0);
+RrTabList = __decorate([
+    customElement('rr-tab-list')
+], RrTabList);
+export { RrTabList };
+//# sourceMappingURL=tab-list.js.map

package/dist/tabs/tab-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-list.js","sourceRoot":"","sources":["../../src/tabs/tab-list.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;AAG5D;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAoBL,gGAAgG;QACpF,UAAK,GAAG,EAAE,CAAC;QAEvB,iGAAiG;QACpE,UAAK,GAAG,EAAE,CAAC;QAiChC,iBAAY,GAAG,CAAC,CAAiC,EAAE,EAAE;YAC3D,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;YAC5B,IAAI,CAAC,SAAS,EAAE,CAAC;YACjB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE;gBAC3C,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;gBACd,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE;aAC9B,CAAC,CAAC,CAAC;QACN,CAAC,CAAC;QAEM,eAAU,GAAG,CAAC,CAAgB,EAAE,EAAE;YACxC,MAAM,IAAI,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;YACtD,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC;gBAAE,OAAO;YAE9B,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC;YAC5D,IAAI,IAAI,GAAG,CAAC,CAAC,CAAC;YAEd,QAAQ,CAAC,CAAC,GAAG,EAAE,CAAC;gBACd,KAAK,YAAY;oBACf,IAAI,GAAG,CAAC,OAAO,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC;oBACnC,MAAM;gBACR,KAAK,WAAW;oBACd,IAAI,GAAG,CAAC,OAAO,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC;oBACjD,MAAM;gBACR,KAAK,MAAM;oBACT,IAAI,GAAG,CAAC,CAAC;oBACT,MAAM;gBACR,KAAK,KAAK;oBACR,IAAI,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;oBACvB,MAAM;gBACR;oBACE,OAAO;YACX,CAAC;YAED,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;YAC1B,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;YAC1B,IAAI,CAAC,SAAS,EAAE,CAAC;YACjB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE;gBAC3C,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;gBACd,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE;aAC9B,CAAC,CAAC,CAAC;YACJ,uCAAuC;YACtC,MAAsB,CAAC,KAAK,EAAE,CAAC;QAClC,CAAC,CAAC;IAaJ,CAAC;IA1FC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,gBAAgB,CAAC,eAAe,EAAE,IAAI,CAAC,YAA6B,CAAC,CAAC;QAC3E,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;QAClD,gDAAgD;QAChD,IAAI,CAAC,SAAS,EAAE,CAAC;IACnB,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,mBAAmB,CAAC,eAAe,EAAE,IAAI,CAAC,YAA6B,CAAC,CAAC;QAC9E,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;IACvD,CAAC;IAED,OAAO,CAAC,OAAkC;QACxC,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACzB,IAAI,CAAC,SAAS,EAAE,CAAC;QACnB,CAAC;IACH,CAAC;IAEO,QAAQ;QACd,OAAO,CAAC,GAAG,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAY,CAAC;IACzD,CAAC;IAEO,SAAS;QACf,MAAM,IAAI,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC7B,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;YACjB,GAAG,CAAC,QAAQ,GAAG,GAAG,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC;QAC1C,CAAC,CAAC,CAAC;IACL,CAAC;IAkDD,MAAM;QACJ,OAAO,IAAI,CAAA;;;;sBAIO,IAAI,CAAC,KAAK;;6BAEH,IAAI,CAAC,SAAS;;KAEtC,CAAC;IACJ,CAAC;;AAlHM,gBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;GAiBlB,AAjBY,CAiBX;AAGU;IAAX,QAAQ,EAAE;wCAAY;AAGM;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAY;AAxB7B,SAAS;IADrB,aAAa,CAAC,aAAa,CAAC;GAChB,SAAS,CAoHrB"}

package/dist/tabs/tab-list.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 Default: Story;
+//# sourceMappingURL=tab-list.stories.d.ts.map

package/dist/tabs/tab-list.stories.d.ts.map

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

package/dist/tabs/tab-list.stories.js

@@ -0,0 +1,27 @@
+import { html } from 'lit';
+import '@digital2analogue2/parsimony-components';
+const meta = {
+    title: 'Components/Tab List',
+    component: 'rr-tab-list',
+    argTypes: {
+        label: { control: 'text' },
+        value: { control: 'text' },
+    },
+    args: {
+        label: 'View options',
+        value: 'overview',
+    },
+    render: ({ label, value }) => html `
+    <rr-tab-list label=${label} value=${value}>
+      <rr-tab value="overview">Overview</rr-tab>
+      <rr-tab value="history">History</rr-tab>
+      <rr-tab value="settings">Settings</rr-tab>
+    </rr-tab-list>
+    <div style="padding-top: var(--spacing-element); color: var(--color-foreground-default);">
+      Panel content for the selected tab.
+    </div>
+  `,
+};
+export default meta;
+export const Default = {};
+//# sourceMappingURL=tab-list.stories.js.map

package/dist/tabs/tab-list.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-list.stories.js","sourceRoot":"","sources":["../../src/tabs/tab-list.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,MAAM,EAAE;QAC1B,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;KAC3B;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,cAAc;QACrB,KAAK,EAAE,UAAU;KAClB;IACD,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA;yBACX,KAAK,UAAU,KAAK;;;;;;;;GAQ1C;CACF,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU,EAAE,CAAC"}

package/dist/tabs/tab.d.ts

@@ -0,0 +1,40 @@
+import { LitElement } from 'lit';
+/**
+ * `<rr-tab>` — a single tab button, used inside `<rr-tab-list>`.
+ *
+ * Selection state is managed by the parent `<rr-tab-list>`. Do not set
+ * `selected` directly — use `rr-tab-list[value]` to control which tab is active.
+ *
+ * @slot - Tab label text (and optional icon)
+ *
+ * @attr value    - Unique identifier for this tab (required)
+ * @attr selected - Set by parent; marks the active tab
+ * @attr disabled - Prevents selection
+ *
+ * @fires rr-tab-select - Bubbles up to rr-tab-list when clicked
+ */
+export declare class RrTab extends LitElement {
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        clonable?: boolean;
+        customElementRegistry?: CustomElementRegistry | null;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
+    static styles: import("lit").CSSResult;
+    /** Unique identifier for this tab; must match the value rr-tab-list uses for selection. Reflected. */
+    value: string;
+    /** Marks the active tab. Set by the parent rr-tab-list — do not set directly. Reflected. */
+    selected: boolean;
+    /** Prevents selection. Reflected. */
+    disabled: boolean;
+    private _handleClick;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'rr-tab': RrTab;
+    }
+}
+//# sourceMappingURL=tab.d.ts.map

package/dist/tabs/tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../src/tabs/tab.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGrD;;;;;;;;;;;;;GAaG;AACH,qBACa,KAAM,SAAQ,UAAU;IACnC,MAAM,CAAC,iBAAiB;;;;;;;MAA6D;IAErF,MAAM,CAAC,MAAM,0BA2CX;IAEF,sGAAsG;IACzE,KAAK,SAAM;IAExC,4FAA4F;IAChD,QAAQ,UAAS;IAE7D,qCAAqC;IACO,QAAQ,UAAS;IAE7D,OAAO,CAAC,YAAY;IASpB,MAAM;CAaP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,QAAQ,EAAE,KAAK,CAAC;KACjB;CACF"}

package/dist/tabs/tab.js

@@ -0,0 +1,114 @@
+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';
+/**
+ * `<rr-tab>` — a single tab button, used inside `<rr-tab-list>`.
+ *
+ * Selection state is managed by the parent `<rr-tab-list>`. Do not set
+ * `selected` directly — use `rr-tab-list[value]` to control which tab is active.
+ *
+ * @slot - Tab label text (and optional icon)
+ *
+ * @attr value    - Unique identifier for this tab (required)
+ * @attr selected - Set by parent; marks the active tab
+ * @attr disabled - Prevents selection
+ *
+ * @fires rr-tab-select - Bubbles up to rr-tab-list when clicked
+ */
+let RrTab = class RrTab extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Unique identifier for this tab; must match the value rr-tab-list uses for selection. Reflected. */
+        this.value = '';
+        /** Marks the active tab. Set by the parent rr-tab-list — do not set directly. Reflected. */
+        this.selected = false;
+        /** Prevents selection. Reflected. */
+        this.disabled = false;
+    }
+    _handleClick() {
+        if (this.disabled || this.selected)
+            return;
+        this.dispatchEvent(new CustomEvent('rr-tab-select', {
+            bubbles: true,
+            composed: true,
+            detail: { value: this.value },
+        }));
+    }
+    render() {
+        return html `
+      <button
+        role="tab"
+        aria-selected="${this.selected ? 'true' : 'false'}"
+        tabindex="${this.selected ? 0 : -1}"
+        ?disabled="${this.disabled}"
+        @click="${this._handleClick}"
+      >
+        <slot></slot>
+      </button>
+    `;
+    }
+};
+RrTab.shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
+RrTab.styles = css `
+    :host {
+      display: inline-flex;
+    }
+
+    button {
+      all: unset;
+      display: inline-flex;
+      align-items: center;
+      gap: var(--spacing-tight);
+      padding: var(--spacing-tight) var(--spacing-inline);
+      font: var(--font-label-medium);
+      color: var(--color-foreground-muted);
+      cursor: pointer;
+      border-bottom: 2px solid transparent;
+      transition:
+        color var(--motion-duration-instant) var(--motion-easing-default),
+        border-color var(--motion-duration-instant) var(--motion-easing-default);
+      white-space: nowrap;
+      position: relative;
+    }
+
+    button:hover {
+      color: var(--color-foreground-alt);
+    }
+
+    button:focus-visible {
+      outline: 2px solid var(--color-border-focus);
+      outline-offset: 2px;
+      border-radius: var(--radius-sm);
+    }
+
+    :host([selected]) button {
+      color: var(--color-foreground-action);
+      border-bottom-color: var(--color-background-action);
+      font: var(--font-label-strong-medium);
+    }
+
+    :host([disabled]) button {
+      color: var(--color-foreground-disabled);
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+  `;
+__decorate([
+    property({ reflect: true })
+], RrTab.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], RrTab.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], RrTab.prototype, "disabled", void 0);
+RrTab = __decorate([
+    customElement('rr-tab')
+], RrTab);
+export { RrTab };
+//# sourceMappingURL=tab.js.map

package/dist/tabs/tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab.js","sourceRoot":"","sources":["../../src/tabs/tab.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;;;;;;;;;;;;;GAaG;AAEI,IAAM,KAAK,GAAX,MAAM,KAAM,SAAQ,UAAU;IAA9B;;QAgDL,sGAAsG;QACzE,UAAK,GAAG,EAAE,CAAC;QAExC,4FAA4F;QAChD,aAAQ,GAAG,KAAK,CAAC;QAE7D,qCAAqC;QACO,aAAQ,GAAG,KAAK,CAAC;IAwB/D,CAAC;IAtBS,YAAY;QAClB,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC3C,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,eAAe,EAAE;YAClD,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE;SAC9B,CAAC,CAAC,CAAC;IACN,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;yBAGU,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;oBACrC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;qBACrB,IAAI,CAAC,QAAQ;kBAChB,IAAI,CAAC,YAAY;;;;KAI9B,CAAC;IACJ,CAAC;;AA7EM,uBAAiB,GAAG,EAAE,GAAG,UAAU,CAAC,iBAAiB,EAAE,cAAc,EAAE,IAAI,EAAE,AAA5D,CAA6D;AAE9E,YAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2ClB,AA3CY,CA2CX;AAG2B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oCAAY;AAGI;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAAkB;AAGjB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAAkB;AAvDlD,KAAK;IADjB,aAAa,CAAC,QAAQ,CAAC;GACX,KAAK,CA+EjB"}

package/dist/tabs/tab.stories.d.ts

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import '@digital2analogue2/parsimony-components';
+/**
+ * `rr-tab` is a single tab button. Selection is normally managed by the
+ * parent `rr-tab-list` (it sets `selected` and handles keyboard navigation).
+ * This standalone story shows one tab in isolation for reference — see the
+ * Tab List stories for real usage.
+ */
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+//# sourceMappingURL=tab.stories.d.ts.map

package/dist/tabs/tab.stories.d.ts.map

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

package/dist/tabs/tab.stories.js

@@ -0,0 +1,28 @@
+import { html } from 'lit';
+import '@digital2analogue2/parsimony-components';
+/**
+ * `rr-tab` is a single tab button. Selection is normally managed by the
+ * parent `rr-tab-list` (it sets `selected` and handles keyboard navigation).
+ * This standalone story shows one tab in isolation for reference — see the
+ * Tab List stories for real usage.
+ */
+const meta = {
+    title: 'Components/Tab',
+    component: 'rr-tab',
+    argTypes: {
+        value: { control: 'text' },
+        selected: { control: 'boolean' },
+        disabled: { control: 'boolean' },
+    },
+    args: {
+        value: 'overview',
+        selected: true,
+        disabled: false,
+    },
+    render: ({ value, selected, disabled }) => html `
+    <rr-tab value=${value} ?selected=${selected} ?disabled=${disabled}>Overview</rr-tab>
+  `,
+};
+export default meta;
+export const Default = {};
+//# sourceMappingURL=tab.stories.js.map

package/dist/tabs/tab.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab.stories.js","sourceRoot":"","sources":["../../src/tabs/tab.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,yCAAyC,CAAC;AAEjD;;;;;GAKG;AACH,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,QAAQ;IACnB,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAChC,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,UAAU;QACjB,QAAQ,EAAE,IAAI;QACd,QAAQ,EAAE,KAAK;KAChB;IACD,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA;oBAC7B,KAAK,cAAc,QAAQ,cAAc,QAAQ;GAClE;CACF,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU,EAAE,CAAC"}