@digital2analogue2/parsimony-components 0.1.0

package/dist/card/card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","sourceRoot":"","sources":["../../src/card/card.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;;;;;;;;;;;;;;GAcG;AAEI,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,UAAU;IAA/B;;QA6DL;;;WAGG;QAEH,YAAO,GAAgB,IAAI,CAAC;IAS9B,CAAC;IAPC,MAAM;QACJ,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;;AAzEM,aAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0DlB,AA1DY,CA0DX;AAOF;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCACA;AAlEjB,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CA2ElB"}

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"card.stories.d.ts","sourceRoot":"","sources":["../../src/card/card.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,mBAAmB,EAAE,KAQjC,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KASrB,CAAC"}

package/dist/card/card.stories.js

@@ -0,0 +1,39 @@
+import { html } from 'lit';
+import '@digital2analogue2/parsimony-components';
+const meta = {
+    title: 'Components/Card',
+    component: 'rr-card',
+    argTypes: {
+        padding: { control: 'select', options: ['none', 'sm', 'md', 'lg'] },
+    },
+    args: {
+        padding: 'md',
+    },
+    render: ({ padding }) => html `
+    <rr-card padding=${padding}>
+      A simple card with body content only.
+    </rr-card>
+  `,
+};
+export default meta;
+export const Default = {};
+export const WithHeaderAndFooter = {
+    render: () => html `
+    <rr-card>
+      <span slot="header">Project status</span>
+      The build passed and tokens are in sync.
+      <span slot="footer">Updated just now</span>
+    </rr-card>
+  `,
+};
+export const Padding = {
+    render: () => html `
+    <div style="display: flex; align-items: flex-start; gap: var(--spacing-inline);">
+      <rr-card padding="none">No padding</rr-card>
+      <rr-card padding="sm">Small padding</rr-card>
+      <rr-card padding="md">Medium padding</rr-card>
+      <rr-card padding="lg">Large padding</rr-card>
+    </div>
+  `,
+};
+//# sourceMappingURL=card.stories.js.map

package/dist/card/card.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.stories.js","sourceRoot":"","sources":["../../src/card/card.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,yCAAyC,CAAC;AAEjD,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,SAAS;IACpB,QAAQ,EAAE;QACR,OAAO,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,EAAE;KACpE;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,IAAI;KACd;IACD,MAAM,EAAE,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA;uBACR,OAAO;;;GAG3B;CACF,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU,EAAE,CAAC;AAEjC,MAAM,CAAC,MAAM,mBAAmB,GAAU;IACxC,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;GAMjB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;GAOjB;CACF,CAAC"}

package/dist/checkbox/checkbox.d.ts

@@ -0,0 +1,44 @@
+import { LitElement } from 'lit';
+/**
+ * A form-associated checkbox with checked, indeterminate, and disabled states.
+ *
+ * The visual control is rendered in shadow DOM; the hidden native
+ * `<input type="checkbox">` provides focus, keyboard, and label-click semantics.
+ * `ElementInternals` handles form participation.
+ *
+ * Usage:
+ *   <rr-checkbox name="agree" label="I agree to the terms" checked></rr-checkbox>
+ *   <rr-checkbox name="notify">Send me notifications</rr-checkbox>
+ *
+ * @slot - Label text (alternative to the `label` property)
+ * @fires change - When the checked state changes
+ * @csspart box - The visual checkbox square
+ * @csspart label - The label text element
+ */
+export declare class RrCheckbox extends LitElement {
+    static formAssociated: boolean;
+    static styles: import("lit").CSSResult;
+    /** Whether the checkbox is checked. */
+    checked: boolean;
+    /** Mixed state; cleared when the user toggles the checkbox. */
+    indeterminate: boolean;
+    /** Disables interaction and form participation. */
+    disabled: boolean;
+    /** Form value submitted when checked. */
+    value: string;
+    /** Form field name. */
+    name: string;
+    /** Label text; falls back to slotted content when empty. */
+    label: string;
+    private _internals;
+    constructor();
+    updated(): void;
+    private _onChange;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'rr-checkbox': RrCheckbox;
+    }
+}
+//# sourceMappingURL=checkbox.d.ts.map

package/dist/checkbox/checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../src/checkbox/checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGrD;;;;;;;;;;;;;;;GAeG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,MAAM,CAAC,cAAc,UAAQ;IAE7B,MAAM,CAAC,MAAM,0BA8FX;IAEF,uCAAuC;IACK,OAAO,UAAS;IAC5D,+DAA+D;IACnB,aAAa,UAAS;IAClE,mDAAmD;IACP,QAAQ,UAAS;IAC7D,yCAAyC;IAC7B,KAAK,SAAQ;IACzB,uBAAuB;IACX,IAAI,SAAM;IACtB,4DAA4D;IAChD,KAAK,SAAM;IAEvB,OAAO,CAAC,UAAU,CAAmB;;IAO5B,OAAO;IAIhB,OAAO,CAAC,SAAS;IAQjB,MAAM;CA6BP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/dist/checkbox/checkbox.js

@@ -0,0 +1,201 @@
+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 checkbox with checked, indeterminate, and disabled states.
+ *
+ * The visual control is rendered in shadow DOM; the hidden native
+ * `<input type="checkbox">` provides focus, keyboard, and label-click semantics.
+ * `ElementInternals` handles form participation.
+ *
+ * Usage:
+ *   <rr-checkbox name="agree" label="I agree to the terms" checked></rr-checkbox>
+ *   <rr-checkbox name="notify">Send me notifications</rr-checkbox>
+ *
+ * @slot - Label text (alternative to the `label` property)
+ * @fires change - When the checked state changes
+ * @csspart box - The visual checkbox square
+ * @csspart label - The label text element
+ */
+let RrCheckbox = class RrCheckbox extends LitElement {
+    constructor() {
+        super();
+        /** Whether the checkbox is checked. */
+        this.checked = false;
+        /** Mixed state; cleared when the user toggles the checkbox. */
+        this.indeterminate = false;
+        /** Disables interaction and form participation. */
+        this.disabled = false;
+        /** Form value submitted when checked. */
+        this.value = 'on';
+        /** Form field name. */
+        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.indeterminate = false;
+        this._internals.setFormValue?.(this.checked ? this.value : null);
+        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+    }
+    render() {
+        return html `
+      <div class="box-wrap">
+        <input
+          type="checkbox"
+          id="cb"
+          .name=${this.name}
+          .value=${this.value}
+          .checked=${this.checked}
+          .indeterminate=${this.indeterminate}
+          .disabled=${this.disabled}
+          aria-checked=${this.indeterminate ? 'mixed' : this.checked ? 'true' : 'false'}
+          @change=${this._onChange}
+        />
+        <div class="box" part="box">
+          <svg class="check" width="10" height="10" viewBox="0 0 10 10" fill="none" aria-hidden="true">
+            <path d="M2 5L4.2 7.5L8.5 3" stroke="currentColor" stroke-width="1.5"
+              stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <svg class="dash" width="10" height="10" viewBox="0 0 10 10" fill="none" aria-hidden="true">
+            <path d="M2.5 5H7.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+          </svg>
+        </div>
+      </div>
+      <label part="label" for="cb">
+        ${this.label ? this.label : html `<slot></slot>`}
+      </label>
+    `;
+    }
+};
+RrCheckbox.formAssociated = true;
+RrCheckbox.styles = css `
+    :host {
+      display: inline-flex;
+      align-items: flex-start;
+      gap: var(--spacing-tight);
+      cursor: pointer;
+      user-select: none;
+    }
+
+    :host([disabled]) {
+      cursor: not-allowed;
+    }
+
+    /* Wrap that positions the hidden input over the visual box */
+    .box-wrap {
+      position: relative;
+      flex-shrink: 0;
+      width: 16px;
+      height: 16px;
+      margin-top: 2px; /* align with cap-height of label text */
+    }
+
+    /* Visually hidden native input — physically covers the box-wrap area
+       so clicks on the visual box hit the real input for focus + activation */
+    input {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      opacity: 0;
+      margin: 0;
+      cursor: inherit;
+      z-index: 1;
+    }
+
+    .box {
+      position: absolute;
+      inset: 0;
+      border: 1px solid var(--component-checkbox-border-default);
+      border-radius: var(--component-checkbox-radius);
+      background: var(--component-checkbox-background-unchecked);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition:
+        border-color var(--motion-duration-instant) var(--motion-easing-default),
+        background-color var(--motion-duration-instant) var(--motion-easing-default);
+    }
+
+    :host(:not([disabled]):not([checked]):not([indeterminate])) .box-wrap:hover .box {
+      border-color: var(--component-checkbox-border-hover);
+    }
+
+    :host([checked]) .box,
+    :host([indeterminate]) .box {
+      background: var(--component-checkbox-background-checked);
+      border-color: var(--component-checkbox-border-checked);
+    }
+
+    :host([disabled]) .box {
+      background: var(--component-checkbox-background-disabled);
+      border-color: var(--component-checkbox-border-disabled);
+    }
+
+    /* Focus ring on the visual box driven by the hidden input's focus state */
+    input:focus-visible ~ .box {
+      outline: 2px solid var(--component-checkbox-border-focus);
+      outline-offset: 2px;
+    }
+
+    .check,
+    .dash {
+      display: none;
+      color: var(--component-checkbox-foreground-checkmark);
+    }
+
+    :host([checked]) .check {
+      display: block;
+    }
+
+    :host([indeterminate]) .dash {
+      display: block;
+    }
+
+    label {
+      font: var(--font-label-medium);
+      color: var(--component-checkbox-foreground-label);
+      cursor: inherit;
+      line-height: 1.4;
+    }
+
+    :host([disabled]) label {
+      color: var(--component-checkbox-foreground-disabled);
+    }
+  `;
+__decorate([
+    property({ type: Boolean, reflect: true })
+], RrCheckbox.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], RrCheckbox.prototype, "indeterminate", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], RrCheckbox.prototype, "disabled", void 0);
+__decorate([
+    property()
+], RrCheckbox.prototype, "value", void 0);
+__decorate([
+    property()
+], RrCheckbox.prototype, "name", void 0);
+__decorate([
+    property()
+], RrCheckbox.prototype, "label", void 0);
+RrCheckbox = __decorate([
+    customElement('rr-checkbox')
+], RrCheckbox);
+export { RrCheckbox };
+//# sourceMappingURL=checkbox.js.map

package/dist/checkbox/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../src/checkbox/checkbox.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;;;;;;;;;;;;;;;GAeG;AAEI,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAkHxC;QACE,KAAK,EAAE,CAAC;QAhBV,uCAAuC;QACK,YAAO,GAAG,KAAK,CAAC;QAC5D,+DAA+D;QACnB,kBAAa,GAAG,KAAK,CAAC;QAClE,mDAAmD;QACP,aAAQ,GAAG,KAAK,CAAC;QAC7D,yCAAyC;QAC7B,UAAK,GAAG,IAAI,CAAC;QACzB,uBAAuB;QACX,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,aAAa,GAAG,KAAK,CAAC;QAC3B,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;;;;;kBAKG,IAAI,CAAC,IAAI;mBACR,IAAI,CAAC,KAAK;qBACR,IAAI,CAAC,OAAO;2BACN,IAAI,CAAC,aAAa;sBACvB,IAAI,CAAC,QAAQ;yBACV,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;oBACnE,IAAI,CAAC,SAAS;;;;;;;;;;;;;UAaxB,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA,eAAe;;KAElD,CAAC;IACJ,CAAC;;AA9JM,yBAAc,GAAG,IAAI,AAAP,CAAQ;AAEtB,iBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8FlB,AA9FY,CA8FX;AAG0C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAAiB;AAEhB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAAuB;AAEtB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAAkB;AAEjD;IAAX,QAAQ,EAAE;yCAAc;AAEb;IAAX,QAAQ,EAAE;wCAAW;AAEV;IAAX,QAAQ,EAAE;yCAAY;AA9GZ,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAgKtB"}

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

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

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

package/dist/checkbox/checkbox.stories.js

@@ -0,0 +1,38 @@
+import { html } from 'lit';
+import '@digital2analogue2/parsimony-components';
+const meta = {
+    title: 'Components/Checkbox',
+    component: 'rr-checkbox',
+    argTypes: {
+        checked: { control: 'boolean' },
+        indeterminate: { control: 'boolean' },
+        disabled: { control: 'boolean' },
+        value: { control: 'text' },
+        name: { control: 'text' },
+        label: { control: 'text' },
+    },
+    args: {
+        checked: false,
+        indeterminate: false,
+        disabled: false,
+        value: 'on',
+        name: '',
+        label: 'Accept terms',
+    },
+    render: ({ checked, indeterminate, disabled, value, name, label }) => html `
+    <rr-checkbox
+      ?checked=${checked}
+      ?indeterminate=${indeterminate}
+      ?disabled=${disabled}
+      value=${value}
+      name=${name}
+      label=${label}
+    ></rr-checkbox>
+  `,
+};
+export default meta;
+export const Default = {};
+export const Checked = { args: { checked: true } };
+export const Indeterminate = { args: { indeterminate: true, label: 'Select all' } };
+export const Disabled = { args: { disabled: true } };
+//# sourceMappingURL=checkbox.stories.js.map

package/dist/checkbox/checkbox.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.stories.js","sourceRoot":"","sources":["../../src/checkbox/checkbox.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,SAAS,EAAE;QAC/B,aAAa,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QACrC,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,aAAa,EAAE,KAAK;QACpB,QAAQ,EAAE,KAAK;QACf,KAAK,EAAE,IAAI;QACX,IAAI,EAAE,EAAE;QACR,KAAK,EAAE,cAAc;KACtB;IACD,MAAM,EAAE,CAAC,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA;;iBAE3D,OAAO;uBACD,aAAa;kBAClB,QAAQ;cACZ,KAAK;aACN,IAAI;cACH,KAAK;;GAEhB;CACF,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU,EAAE,CAAC;AAEjC,MAAM,CAAC,MAAM,OAAO,GAAU,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,CAAC;AAE1D,MAAM,CAAC,MAAM,aAAa,GAAU,EAAE,IAAI,EAAE,EAAE,aAAa,EAAE,IAAI,EAAE,KAAK,EAAE,YAAY,EAAE,EAAE,CAAC;AAE3F,MAAM,CAAC,MAAM,QAAQ,GAAU,EAAE,IAAI,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,CAAC"}

package/dist/dialog/dialog.d.ts

@@ -0,0 +1,51 @@
+import { LitElement } from 'lit';
+/**
+ * `<rr-dialog>` — modal dialog using the native `<dialog>` element.
+ *
+ * Leverages native focus trap, Escape-to-close, and `::backdrop`.
+ * Programmatic control via `show()` / `close()` methods, or bind the
+ * `open` property/attribute.
+ *
+ * @slot         — Dialog body content
+ * @slot footer  — Action buttons (displayed in a right-aligned footer row)
+ *
+ * @attr heading          - Dialog title text
+ * @attr {Boolean} open   - Whether the dialog is open
+ * @attr {Boolean} close-on-backdrop - Close when backdrop is clicked (default: true)
+ *
+ * @fires rr-dialog-close - Fired whenever the dialog closes (Escape, close button, or programmatic)
+ *
+ * @example
+ * <rr-dialog heading="Confirm action">
+ *   Are you sure you want to delete this item?
+ *   <rr-button slot="footer" variant="danger" @click=${() => dialog.close()}>Delete</rr-button>
+ *   <rr-button slot="footer" variant="secondary" @click=${() => dialog.close()}>Cancel</rr-button>
+ * </rr-dialog>
+ */
+export declare class RrDialog extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Dialog title text rendered in the header. */
+    heading: string;
+    /** Whether the dialog is open. Reflected to an attribute. */
+    open: boolean;
+    /** Close the dialog when the backdrop is clicked. */
+    closeOnBackdrop: boolean;
+    private _dialog;
+    /** Open the dialog as a modal. */
+    show(): void;
+    /**
+     * Close the dialog. Single source of truth — always dispatches `rr-dialog-close`.
+     * Also called internally when Escape is pressed (via native `close` event).
+     */
+    close(): void;
+    updated(changed: Map<PropertyKey, unknown>): void;
+    private _onBackdropClick;
+    private _onNativeClose;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'rr-dialog': RrDialog;
+    }
+}
+//# sourceMappingURL=dialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../src/dialog/dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGrD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,MAAM,CAAC,MAAM,0BA6FX;IAEF,gDAAgD;IACpC,OAAO,SAAM;IAEzB,6DAA6D;IACjB,IAAI,UAAS;IAEzD,qDAAqD;IACQ,eAAe,UAAQ;IAEnE,OAAO,CAAC,OAAO,CAAqB;IAErD,kCAAkC;IAClC,IAAI;IAQJ;;;OAGG;IACH,KAAK;IAML,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC;IAa1C,OAAO,CAAC,gBAAgB;IAWxB,OAAO,CAAC,cAAc;IAKtB,MAAM;CAoCP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/dialog/dialog.js

@@ -0,0 +1,234 @@
+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, query } from 'lit/decorators.js';
+/**
+ * `<rr-dialog>` — modal dialog using the native `<dialog>` element.
+ *
+ * Leverages native focus trap, Escape-to-close, and `::backdrop`.
+ * Programmatic control via `show()` / `close()` methods, or bind the
+ * `open` property/attribute.
+ *
+ * @slot         — Dialog body content
+ * @slot footer  — Action buttons (displayed in a right-aligned footer row)
+ *
+ * @attr heading          - Dialog title text
+ * @attr {Boolean} open   - Whether the dialog is open
+ * @attr {Boolean} close-on-backdrop - Close when backdrop is clicked (default: true)
+ *
+ * @fires rr-dialog-close - Fired whenever the dialog closes (Escape, close button, or programmatic)
+ *
+ * @example
+ * <rr-dialog heading="Confirm action">
+ *   Are you sure you want to delete this item?
+ *   <rr-button slot="footer" variant="danger" @click=${() => dialog.close()}>Delete</rr-button>
+ *   <rr-button slot="footer" variant="secondary" @click=${() => dialog.close()}>Cancel</rr-button>
+ * </rr-dialog>
+ */
+let RrDialog = class RrDialog extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Dialog title text rendered in the header. */
+        this.heading = '';
+        /** Whether the dialog is open. Reflected to an attribute. */
+        this.open = false;
+        /** Close the dialog when the backdrop is clicked. */
+        this.closeOnBackdrop = true;
+    }
+    /** Open the dialog as a modal. */
+    show() {
+        this.open = true;
+        // showModal() is unavailable in test environments (happy-dom); guard gracefully.
+        if (this._dialog && typeof this._dialog.showModal === 'function' && !this._dialog.open) {
+            this._dialog.showModal();
+        }
+    }
+    /**
+     * Close the dialog. Single source of truth — always dispatches `rr-dialog-close`.
+     * Also called internally when Escape is pressed (via native `close` event).
+     */
+    close() {
+        if (!this.open)
+            return;
+        this.open = false;
+        this.dispatchEvent(new CustomEvent('rr-dialog-close', { bubbles: true, composed: true }));
+    }
+    updated(changed) {
+        if (!changed.has('open'))
+            return;
+        if (this.open) {
+            if (this._dialog && typeof this._dialog.showModal === 'function' && !this._dialog.open) {
+                this._dialog.showModal();
+            }
+        }
+        else {
+            if (this._dialog && typeof this._dialog.close === 'function' && this._dialog.open) {
+                this._dialog.close();
+            }
+        }
+    }
+    _onBackdropClick(e) {
+        if (!this.closeOnBackdrop)
+            return;
+        const rect = this._dialog.getBoundingClientRect();
+        if (e.clientX < rect.left || e.clientX > rect.right ||
+            e.clientY < rect.top || e.clientY > rect.bottom) {
+            this.close();
+        }
+    }
+    _onNativeClose() {
+        // Fires when Escape is pressed — delegate to close() for consistent behavior.
+        this.close();
+    }
+    render() {
+        return html `
+      <dialog
+        @click="${this._onBackdropClick}"
+        @close="${this._onNativeClose}"
+      >
+        <div class="dialog-inner">
+          <div class="header">
+            <h2 class="heading">${this.heading}</h2>
+            <button
+              class="close-btn"
+              @click="${() => this.close()}"
+              aria-label="Close dialog"
+            >
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+                <path
+                  d="M4 4L12 12M12 4L4 12"
+                  stroke="currentColor"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                />
+              </svg>
+            </button>
+          </div>
+
+          <div class="body">
+            <slot></slot>
+          </div>
+
+          <div class="footer">
+            <slot name="footer"></slot>
+          </div>
+        </div>
+      </dialog>
+    `;
+    }
+};
+RrDialog.styles = css `
+    :host {
+      display: contents;
+    }
+
+    dialog {
+      padding: 0;
+      border: 1px solid var(--color-border-alt);
+      border-radius: var(--radius-xl);
+      background: var(--color-background-alt);
+      color: var(--color-foreground-default);
+      max-width: min(90vw, 560px);
+      width: 100%;
+      box-shadow: var(--shadow-dialog);
+      /* Remove UA outline; focus is managed by the browser's dialog role */
+      outline: none;
+    }
+
+    dialog::backdrop {
+      background: rgba(0, 0, 0, 0.6);
+      backdrop-filter: blur(2px);
+    }
+
+    .dialog-inner {
+      display: flex;
+      flex-direction: column;
+    }
+
+    /* ── Header ── */
+    .header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--spacing-tight);
+      padding: var(--spacing-element) var(--spacing-component);
+      border-bottom: 1px solid var(--color-border-alt);
+    }
+
+    .heading {
+      font: var(--font-title-small);
+      letter-spacing: var(--letter-spacing-title);
+      color: var(--color-foreground-default);
+      margin: 0;
+    }
+
+    /* ── Close button ── */
+    .close-btn {
+      all: unset;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 32px;
+      height: 32px;
+      border-radius: var(--radius-default);
+      color: var(--color-foreground-muted);
+      cursor: pointer;
+      flex-shrink: 0;
+      transition:
+        color var(--motion-duration-instant) var(--motion-easing-default),
+        background var(--motion-duration-instant) var(--motion-easing-default);
+    }
+
+    .close-btn:hover {
+      color: var(--color-foreground-default);
+      background: var(--color-background-alt);
+    }
+
+    .close-btn:focus-visible {
+      outline: 2px solid var(--color-border-focus);
+      outline-offset: 2px;
+    }
+
+    /* ── Body ── */
+    .body {
+      padding: var(--spacing-component);
+      font: var(--font-body-large);
+      color: var(--color-foreground-alt);
+      overflow-y: auto;
+    }
+
+    /* ── Footer ── */
+    .footer {
+      display: flex;
+      justify-content: flex-end;
+      gap: var(--spacing-tight);
+      padding: var(--spacing-inline) var(--spacing-component);
+      border-top: 1px solid var(--color-border-alt);
+    }
+
+    /* Hide footer when no slotted content */
+    .footer:not(:has(*)) {
+      display: none;
+    }
+  `;
+__decorate([
+    property()
+], RrDialog.prototype, "heading", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], RrDialog.prototype, "open", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'close-on-backdrop' })
+], RrDialog.prototype, "closeOnBackdrop", void 0);
+__decorate([
+    query('dialog')
+], RrDialog.prototype, "_dialog", void 0);
+RrDialog = __decorate([
+    customElement('rr-dialog')
+], RrDialog);
+export { RrDialog };
+//# sourceMappingURL=dialog.js.map

package/dist/dialog/dialog.js.map

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