@digital2analogue2/parsimony-components 0.1.0

package/dist/select/select.js

@@ -0,0 +1,258 @@
+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';
+/**
+ * A form-associated select dropdown with label, helper text, and error state.
+ *
+ * Pass options via the `options` property (array of `{ value, label, disabled? }`).
+ * Uses `ElementInternals` for native form participation and `delegatesFocus`
+ * so the host forwards focus to the inner `<select>`.
+ *
+ * Reuses `--component-input-*` tokens — the input token set covers
+ * text input, textarea, and select (see tokens/components/input.tokens.json).
+ *
+ * @fires change - When the selected value changes
+ * @csspart label - The label element
+ * @csspart select - The inner select element
+ * @csspart helper - The helper text container
+ * @csspart error - The error message container
+ */
+let RrSelect = class RrSelect extends LitElement {
+    constructor() {
+        super();
+        /** Form field name submitted with the selected value. */
+        this.name = '';
+        /** Selected option value. */
+        this.value = '';
+        /** Field label rendered above the select. */
+        this.label = '';
+        /** Helper text shown when there is no error. Maps to attribute helper-text. */
+        this.helperText = '';
+        /** Error message; sets data-invalid and a custom validity. Maps to attribute error-text. */
+        this.errorText = '';
+        /** Marks the field as required and shows an asterisk. */
+        this.required = false;
+        /** Disables the select. */
+        this.disabled = false;
+        /** Options to render: array of { value: string; label: string; disabled?: boolean }. */
+        this.options = [];
+        this._internals = this.attachInternals();
+    }
+    get _isInvalid() {
+        return this.errorText.length > 0;
+    }
+    updated(changed) {
+        if (changed.has('value')) {
+            this._internals.setFormValue?.(this.value);
+        }
+        // Sync the native select's displayed selection with `value`. There is no
+        // template binding for this — a `.value` binding on <select> commits
+        // before the <option> children render and silently no-ops — and `options`
+        // often arrive after the element upgrades. Only applied when `value`
+        // matches a real option; otherwise the native select keeps its own
+        // selection.
+        if (changed.has('value') || changed.has('options')) {
+            if (this._select &&
+                this._select.value !== this.value &&
+                this.options.some(o => o.value === this.value)) {
+                this._select.value = this.value;
+            }
+        }
+        if (changed.has('errorText')) {
+            if (this._isInvalid) {
+                this.setAttribute('data-invalid', '');
+                this._internals.setValidity?.({ customError: true }, this.errorText, this._select);
+            }
+            else {
+                this.removeAttribute('data-invalid');
+                this._internals.setValidity?.({});
+            }
+        }
+    }
+    _onChange(e) {
+        const select = e.target;
+        this.value = select.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="select">
+            ${this.label}${this.required
+                ? html `<span class="required" aria-hidden="true">*</span>`
+                : nothing}
+          </label>`
+            : nothing}
+      <div class="wrapper">
+        <select
+          part="select"
+          id="select"
+          .name=${this.name}
+          .disabled=${this.disabled}
+          .required=${this.required}
+          aria-required=${this.required ? 'true' : nothing}
+          aria-invalid=${this._isInvalid ? 'true' : nothing}
+          aria-errormessage=${this._isInvalid ? 'error' : nothing}
+          aria-describedby=${describedBy || nothing}
+          @change=${this._onChange}
+        >
+          ${this.options.map(opt => html `
+              <option value=${opt.value} ?disabled=${opt.disabled ?? false}>
+                ${opt.label}
+              </option>
+            `)}
+        </select>
+        <span class="arrow" aria-hidden="true">
+          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M2 4.5L6 8.5L10 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </span>
+      </div>
+      ${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}
+    `;
+    }
+};
+RrSelect.formAssociated = true;
+RrSelect.shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+};
+RrSelect.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;
+    }
+
+    .wrapper {
+      position: relative;
+    }
+
+    select {
+      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);
+      padding-right: 36px;
+      outline: none;
+      appearance: none;
+      -webkit-appearance: none;
+      cursor: pointer;
+      transition: border-color var(--motion-duration-instant) var(--motion-easing-default);
+    }
+
+    select:hover {
+      border-color: var(--component-input-border-hover);
+    }
+
+    select:focus {
+      border-color: var(--component-input-border-focus);
+      box-shadow: 0 0 0 1px var(--component-input-border-focus);
+    }
+
+    .arrow {
+      position: absolute;
+      right: 10px;
+      top: 50%;
+      transform: translateY(-50%);
+      pointer-events: none;
+      color: var(--component-input-foreground-label);
+      display: flex;
+      align-items: center;
+    }
+
+    :host([disabled]) select {
+      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);
+    }
+
+    :host([disabled]) .arrow {
+      color: var(--component-input-foreground-disabled);
+    }
+
+    :host([data-invalid]) select {
+      border-color: var(--component-input-border-error);
+    }
+
+    :host([data-invalid]) select: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()
+], RrSelect.prototype, "name", void 0);
+__decorate([
+    property({ reflect: true })
+], RrSelect.prototype, "value", void 0);
+__decorate([
+    property()
+], RrSelect.prototype, "label", void 0);
+__decorate([
+    property({ attribute: 'helper-text' })
+], RrSelect.prototype, "helperText", void 0);
+__decorate([
+    property({ attribute: 'error-text' })
+], RrSelect.prototype, "errorText", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], RrSelect.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], RrSelect.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Array })
+], RrSelect.prototype, "options", void 0);
+__decorate([
+    query('select')
+], RrSelect.prototype, "_select", void 0);
+RrSelect = __decorate([
+    customElement('rr-select')
+], RrSelect);
+export { RrSelect };
+//# sourceMappingURL=select.js.map

package/dist/select/select.js.map

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

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

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

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

package/dist/select/select.stories.js

@@ -0,0 +1,46 @@
+import { html } from 'lit';
+import '@digital2analogue2/parsimony-components';
+const options = [
+    { label: 'One', value: '1' },
+    { label: 'Two', value: '2' },
+    { label: 'Three', value: '3' },
+];
+const meta = {
+    title: 'Components/Select',
+    component: 'rr-select',
+    argTypes: {
+        name: { control: 'text' },
+        value: { control: 'text' },
+        label: { control: 'text' },
+        helperText: { control: 'text' },
+        errorText: { control: 'text' },
+        required: { control: 'boolean' },
+        disabled: { control: 'boolean' },
+    },
+    args: {
+        name: '',
+        value: '',
+        label: 'Quantity',
+        helperText: '',
+        errorText: '',
+        required: false,
+        disabled: false,
+    },
+    render: ({ name, value, label, helperText, errorText, required, disabled }) => html `
+    <rr-select
+      name=${name}
+      value=${value}
+      label=${label}
+      helper-text=${helperText}
+      error-text=${errorText}
+      ?required=${required}
+      ?disabled=${disabled}
+      .options=${options}
+    ></rr-select>
+  `,
+};
+export default meta;
+export const Default = {};
+export const WithValue = { args: { value: '2' } };
+export const WithError = { args: { errorText: 'Please choose a value.' } };
+//# sourceMappingURL=select.stories.js.map

package/dist/select/select.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.stories.js","sourceRoot":"","sources":["../../src/select/select.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,yCAAyC,CAAC;AAEjD,MAAM,OAAO,GAAG;IACd,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE;IAC5B,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE;IAC5B,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,EAAE;CAC/B,CAAC;AAEF,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,WAAW;IACtB,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,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,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,KAAK,EAAE,UAAU;QACjB,UAAU,EAAE,EAAE;QACd,SAAS,EAAE,EAAE;QACb,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;KAChB;IACD,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA;;aAExE,IAAI;cACH,KAAK;cACL,KAAK;oBACC,UAAU;mBACX,SAAS;kBACV,QAAQ;kBACR,QAAQ;iBACT,OAAO;;GAErB;CACF,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU,EAAE,CAAC;AAEjC,MAAM,CAAC,MAAM,SAAS,GAAU,EAAE,IAAI,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC;AAEzD,MAAM,CAAC,MAAM,SAAS,GAAU,EAAE,IAAI,EAAE,EAAE,SAAS,EAAE,wBAAwB,EAAE,EAAE,CAAC"}

package/dist/skeleton/skeleton.d.ts

@@ -0,0 +1,39 @@
+import { LitElement } from 'lit';
+export type SkeletonVariant = 'text' | 'circular' | 'rectangular';
+/**
+ * `<rr-skeleton>` — animated shimmer placeholder for loading states.
+ *
+ * Use in place of content while data is being fetched. Three shape
+ * variants match common content types: text lines, avatars, and image blocks.
+ *
+ * @attr {text|circular|rectangular} variant - Shape of the skeleton (default: text)
+ * @attr width   - CSS width value (default: '100%' for text/rectangular, '40px' for circular)
+ * @attr height  - CSS height value (default: '1em' for text, '40px' for circular/rectangular)
+ *
+ * @example
+ * <!-- Text line skeleton -->
+ * <rr-skeleton></rr-skeleton>
+ *
+ * <!-- Avatar skeleton -->
+ * <rr-skeleton variant="circular" width="40px" height="40px"></rr-skeleton>
+ *
+ * <!-- Card image skeleton -->
+ * <rr-skeleton variant="rectangular" height="200px"></rr-skeleton>
+ */
+export declare class RrSkeleton extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Shape of the skeleton. */
+    variant: SkeletonVariant;
+    /** CSS width value. Defaults to 40px for circular, otherwise 100%. */
+    width: string;
+    /** CSS height value. Defaults to 40px for circular, otherwise 1em. */
+    height: string;
+    private get _style();
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'rr-skeleton': RrSkeleton;
+    }
+}
+//# sourceMappingURL=skeleton.d.ts.map

package/dist/skeleton/skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../src/skeleton/skeleton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,UAAU,GAAG,aAAa,CAAC;AAElE;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,MAAM,CAAC,MAAM,0BA0CX;IAEF,6BAA6B;IACA,OAAO,EAAE,eAAe,CAAU;IAE/D,sEAAsE;IAC1D,KAAK,SAAM;IAEvB,sEAAsE;IAC1D,MAAM,SAAM;IAExB,OAAO,KAAK,MAAM,GAIjB;IAED,MAAM;CAUP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/dist/skeleton/skeleton.js

@@ -0,0 +1,111 @@
+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-skeleton>` — animated shimmer placeholder for loading states.
+ *
+ * Use in place of content while data is being fetched. Three shape
+ * variants match common content types: text lines, avatars, and image blocks.
+ *
+ * @attr {text|circular|rectangular} variant - Shape of the skeleton (default: text)
+ * @attr width   - CSS width value (default: '100%' for text/rectangular, '40px' for circular)
+ * @attr height  - CSS height value (default: '1em' for text, '40px' for circular/rectangular)
+ *
+ * @example
+ * <!-- Text line skeleton -->
+ * <rr-skeleton></rr-skeleton>
+ *
+ * <!-- Avatar skeleton -->
+ * <rr-skeleton variant="circular" width="40px" height="40px"></rr-skeleton>
+ *
+ * <!-- Card image skeleton -->
+ * <rr-skeleton variant="rectangular" height="200px"></rr-skeleton>
+ */
+let RrSkeleton = class RrSkeleton extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Shape of the skeleton. */
+        this.variant = 'text';
+        /** CSS width value. Defaults to 40px for circular, otherwise 100%. */
+        this.width = '';
+        /** CSS height value. Defaults to 40px for circular, otherwise 1em. */
+        this.height = '';
+    }
+    get _style() {
+        const w = this.width || (this.variant === 'circular' ? '40px' : '100%');
+        const h = this.height || (this.variant === 'circular' ? '40px' : '1em');
+        return `width: ${w}; height: ${h};`;
+    }
+    render() {
+        return html `
+      <span
+        class="skeleton"
+        role="presentation"
+        aria-hidden="true"
+        style="${this._style}"
+      ></span>
+    `;
+    }
+};
+RrSkeleton.styles = css `
+    :host {
+      display: block;
+    }
+
+    .skeleton {
+      background: var(--color-background-disabled);
+      background-image: linear-gradient(
+        90deg,
+        var(--color-background-disabled) 0%,
+        var(--color-background-alt) 50%,
+        var(--color-background-disabled) 100%
+      );
+      background-size: 200% 100%;
+      animation: rr-shimmer 1.6s ease-in-out infinite;
+      border-radius: var(--radius-sm);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .skeleton {
+        animation: none;
+      }
+    }
+
+    :host([variant='text']) .skeleton {
+      border-radius: var(--radius-sm);
+      transform: scaleY(0.85);
+      transform-origin: center;
+    }
+
+    :host([variant='circular']) .skeleton {
+      border-radius: var(--radius-full);
+    }
+
+    :host([variant='rectangular']) .skeleton {
+      border-radius: var(--radius-default);
+    }
+
+    @keyframes rr-shimmer {
+      0%   { background-position: 200% 0; }
+      100% { background-position: -200% 0; }
+    }
+  `;
+__decorate([
+    property({ reflect: true })
+], RrSkeleton.prototype, "variant", void 0);
+__decorate([
+    property()
+], RrSkeleton.prototype, "width", void 0);
+__decorate([
+    property()
+], RrSkeleton.prototype, "height", void 0);
+RrSkeleton = __decorate([
+    customElement('rr-skeleton')
+], RrSkeleton);
+export { RrSkeleton };
+//# sourceMappingURL=skeleton.js.map

package/dist/skeleton/skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.js","sourceRoot":"","sources":["../../src/skeleton/skeleton.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;;;;;;;;;;;;;;;;;;;GAmBG;AAEI,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QA6CL,6BAA6B;QACA,YAAO,GAAoB,MAAM,CAAC;QAE/D,sEAAsE;QAC1D,UAAK,GAAG,EAAE,CAAC;QAEvB,sEAAsE;QAC1D,WAAM,GAAG,EAAE,CAAC;IAkB1B,CAAC;IAhBC,IAAY,MAAM;QAChB,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;QACxE,MAAM,CAAC,GAAG,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;QACxE,OAAO,UAAU,CAAC,aAAa,CAAC,GAAG,CAAC;IACtC,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;iBAKE,IAAI,CAAC,MAAM;;KAEvB,CAAC;IACJ,CAAC;;AApEM,iBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0ClB,AA1CY,CA0CX;AAG2B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAAmC;AAGnD;IAAX,QAAQ,EAAE;yCAAY;AAGX;IAAX,QAAQ,EAAE;0CAAa;AApDb,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAsEtB"}

package/dist/skeleton/skeleton.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 Text: Story;
+export declare const Circular: Story;
+export declare const Rectangular: Story;
+//# sourceMappingURL=skeleton.stories.d.ts.map

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

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

package/dist/skeleton/skeleton.stories.js

@@ -0,0 +1,36 @@
+import { html } from 'lit';
+import '@digital2analogue2/parsimony-components';
+const meta = {
+    title: 'Components/Skeleton',
+    component: 'rr-skeleton',
+    argTypes: {
+        variant: { control: 'select', options: ['text', 'circular', 'rectangular'] },
+        width: { control: 'text' },
+        height: { control: 'text' },
+    },
+    args: {
+        variant: 'text',
+        width: '',
+        height: '',
+    },
+    render: ({ variant, width, height }) => html `
+    <rr-skeleton variant=${variant} width=${width} height=${height}></rr-skeleton>
+  `,
+};
+export default meta;
+export const Text = {
+    render: () => html `
+    <div style="display: flex; flex-direction: column; gap: var(--spacing-tight);">
+      <rr-skeleton variant="text"></rr-skeleton>
+      <rr-skeleton variant="text"></rr-skeleton>
+      <rr-skeleton variant="text" width="60%"></rr-skeleton>
+    </div>
+  `,
+};
+export const Circular = {
+    args: { variant: 'circular', width: '48px', height: '48px' },
+};
+export const Rectangular = {
+    args: { variant: 'rectangular', width: '100%', height: '120px' },
+};
+//# sourceMappingURL=skeleton.stories.js.map

package/dist/skeleton/skeleton.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.stories.js","sourceRoot":"","sources":["../../src/skeleton/skeleton.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,OAAO,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,aAAa,CAAC,EAAE;QAC5E,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,MAAM,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;KAC5B;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM;QACf,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,EAAE;KACX;IACD,MAAM,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA;2BACnB,OAAO,UAAU,KAAK,WAAW,MAAM;GAC/D;CACF,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,IAAI,GAAU;IACzB,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;GAMjB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,IAAI,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE;CAC7D,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAU;IAChC,IAAI,EAAE,EAAE,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE;CACjE,CAAC"}

package/dist/spinner/spinner.d.ts

@@ -0,0 +1,29 @@
+import { LitElement } from 'lit';
+export type SpinnerSize = 'sm' | 'md' | 'lg';
+/**
+ * `<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>
+ */
+export declare class RrSpinner extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Visual size of the spinner. Reflected to the size attribute. */
+    size: SpinnerSize;
+    /** Accessible label announced to screen readers via the status region. */
+    label: string;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'rr-spinner': RrSpinner;
+    }
+}
+//# sourceMappingURL=spinner.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../src/spinner/spinner.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE7C;;;;;;;;;;;;GAYG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC,MAAM,CAAC,MAAM,0BAiEX;IAEF,mEAAmE;IACtC,IAAI,EAAE,WAAW,CAAQ;IAEtD,0EAA0E;IAC9D,KAAK,SAAa;IAE9B,MAAM;CAwBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}