@f-ewald/components 0.7.0 → 1.0.2

package/dist/calendar-year.js

@@ -0,0 +1,145 @@
+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, css, html, nothing } from "lit";
+import { customElement, property, queryAssignedElements, state } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { repeat } from "lit/directives/repeat.js";
+import "./calendar-month.js";
+import { tokens } from "./tokens.js";
+import { CALENDAR_ENTRY_ATTRIBUTES, daysInMonth, overlapsRange, readCalendarEntryElement, resolveEntry, } from "./utils/calendar.js";
+const MONTHS = Array.from({ length: 12 }, (_, i) => i + 1);
+/**
+ * A full year of `calendar-month` blocks, generated from declarative
+ * `calendar-entry` children. Each entry is re-projected into the
+ * `calendar-month` blocks it overlaps as a freshly-created `calendar-entry`
+ * element — the original elements stay slotted here and are never moved,
+ * since a DOM node can only have one parent. Read-only.
+ *
+ * @element calendar-year
+ * @slot - Declarative `calendar-entry` elements spanning the displayed year.
+ */
+let CalendarYear = class CalendarYear extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Calendar year to render all 12 months for, e.g. `2026`. */
+        this.year = new Date().getFullYear();
+        /** Bumped whenever entry elements, attributes, or slotted text change to force a re-render. */
+        this._entriesVersion = 0;
+        this._entryKeys = new WeakMap();
+        this._nextEntryKey = 0;
+    }
+    static { this.styles = [
+        tokens,
+        css `
+      :host {
+        display: block;
+        font-family: var(
+          --ui-font,
+          ui-sans-serif,
+          system-ui,
+          sans-serif,
+          "Apple Color Emoji",
+          "Segoe UI Emoji",
+          "Segoe UI Symbol",
+          "Noto Color Emoji"
+        );
+      }
+      .year {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(13.75rem, 1fr));
+        gap: 1.5rem;
+      }
+      slot {
+        display: none;
+      }
+    `,
+    ]; }
+    /**
+     * Watches slotted `calendar-entry` attributes and title/detail text.
+     * Neither reflected-property changes nor edits inside assigned elements
+     * fire this component's `slotchange`, so a subtree observer keeps the
+     * projected month entries synchronized.
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        this._entriesVersion++;
+        this._entriesObserver ??= new MutationObserver(() => this._entriesVersion++);
+        this._entriesObserver.observe(this, {
+            attributes: true,
+            attributeFilter: CALENDAR_ENTRY_ATTRIBUTES,
+            characterData: true,
+            childList: true,
+            subtree: true,
+        });
+    }
+    /** Releases the mutation observer when the element disconnects. */
+    disconnectedCallback() {
+        this._entriesObserver?.disconnect();
+        super.disconnectedCallback();
+    }
+    /** Re-renders when declarative `calendar-entry` children are added or removed. */
+    _handleSlotChange() {
+        this._entriesVersion++;
+    }
+    /** Returns an immutable identity for each original slotted entry. */
+    _entryKey(element) {
+        let key = this._entryKeys.get(element);
+        if (!key) {
+            key = `entry-${this._nextEntryKey++}`;
+            this._entryKeys.set(element, key);
+        }
+        return key;
+    }
+    render() {
+        const entries = this._entryElements
+            .map((element) => {
+            const entry = resolveEntry(readCalendarEntryElement(element));
+            return entry ? { ...entry, projectionKey: this._entryKey(element) } : null;
+        })
+            .filter((entry) => entry !== null);
+        return html `
+      <div class="year">
+        ${repeat(MONTHS, (m) => m, (m) => {
+            const monthStart = new Date(this.year, m - 1, 1);
+            const monthEnd = new Date(this.year, m - 1, daysInMonth(this.year, m));
+            const monthEntries = entries.filter((entry) => overlapsRange(entry, monthStart, monthEnd));
+            return html `
+              <calendar-month .year=${this.year} .month=${m}>
+                ${repeat(monthEntries, (entry) => entry.projectionKey, (entry) => html `
+                    <calendar-entry
+                      start=${entry.start}
+                      end=${entry.end}
+                      label=${entry.label}
+                      color=${entry.color}
+                      href=${ifDefined(entry.href)}
+                    >
+                      ${(entry.details ?? []).map((detail) => html `<span slot="detail">${detail}</span>`)}
+                      ${entry.footer ? html `<span slot="footer">${entry.footer}</span>` : nothing}
+                    </calendar-entry>
+                  `)}
+              </calendar-month>
+            `;
+        })}
+      </div>
+      <slot @slotchange=${this._handleSlotChange}></slot>
+    `;
+    }
+};
+__decorate([
+    property({ type: Number, reflect: true })
+], CalendarYear.prototype, "year", void 0);
+__decorate([
+    queryAssignedElements({ selector: "calendar-entry" })
+], CalendarYear.prototype, "_entryElements", void 0);
+__decorate([
+    state()
+], CalendarYear.prototype, "_entriesVersion", void 0);
+CalendarYear = __decorate([
+    customElement("calendar-year")
+], CalendarYear);
+export { CalendarYear };
+//# sourceMappingURL=calendar-year.js.map

package/dist/calendar-year.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-year.js","sourceRoot":"","sources":["../src/calendar-year.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, css, html, nothing } from \"lit\";\nimport { customElement, property, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { repeat } from \"lit/directives/repeat.js\";\nimport { CalendarEntry } from \"./calendar-entry.js\";\nimport \"./calendar-month.js\";\nimport { tokens } from \"./tokens.js\";\nimport {\n  CALENDAR_ENTRY_ATTRIBUTES,\n  daysInMonth,\n  overlapsRange,\n  readCalendarEntryElement,\n  resolveEntry,\n  type ResolvedCalendarEntry,\n} from \"./utils/calendar.js\";\n\nconst MONTHS = Array.from({ length: 12 }, (_, i) => i + 1);\ntype ProjectedCalendarEntry = ResolvedCalendarEntry & { projectionKey: string };\n\n/**\n * A full year of `calendar-month` blocks, generated from declarative\n * `calendar-entry` children. Each entry is re-projected into the\n * `calendar-month` blocks it overlaps as a freshly-created `calendar-entry`\n * element — the original elements stay slotted here and are never moved,\n * since a DOM node can only have one parent. Read-only.\n *\n * @element calendar-year\n * @slot - Declarative `calendar-entry` elements spanning the displayed year.\n */\n@customElement(\"calendar-year\")\nexport class CalendarYear extends LitElement {\n  /** Calendar year to render all 12 months for, e.g. `2026`. */\n  @property({ type: Number, reflect: true }) year: number = new Date().getFullYear();\n\n  @queryAssignedElements({ selector: \"calendar-entry\" })\n  private readonly _entryElements!: CalendarEntry[];\n\n  /** Bumped whenever entry elements, attributes, or slotted text change to force a re-render. */\n  @state() private _entriesVersion = 0;\n\n  private _entriesObserver?: MutationObserver;\n  private readonly _entryKeys = new WeakMap<CalendarEntry, string>();\n  private _nextEntryKey = 0;\n\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: block;\n        font-family: var(\n          --ui-font,\n          ui-sans-serif,\n          system-ui,\n          sans-serif,\n          \"Apple Color Emoji\",\n          \"Segoe UI Emoji\",\n          \"Segoe UI Symbol\",\n          \"Noto Color Emoji\"\n        );\n      }\n      .year {\n        display: grid;\n        grid-template-columns: repeat(auto-fill, minmax(13.75rem, 1fr));\n        gap: 1.5rem;\n      }\n      slot {\n        display: none;\n      }\n    `,\n  ];\n\n  /**\n   * Watches slotted `calendar-entry` attributes and title/detail text.\n   * Neither reflected-property changes nor edits inside assigned elements\n   * fire this component's `slotchange`, so a subtree observer keeps the\n   * projected month entries synchronized.\n   */\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._entriesVersion++;\n    this._entriesObserver ??= new MutationObserver(() => this._entriesVersion++);\n    this._entriesObserver.observe(this, {\n      attributes: true,\n      attributeFilter: CALENDAR_ENTRY_ATTRIBUTES,\n      characterData: true,\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  /** Releases the mutation observer when the element disconnects. */\n  override disconnectedCallback(): void {\n    this._entriesObserver?.disconnect();\n    super.disconnectedCallback();\n  }\n\n  /** Re-renders when declarative `calendar-entry` children are added or removed. */\n  private _handleSlotChange(): void {\n    this._entriesVersion++;\n  }\n\n  /** Returns an immutable identity for each original slotted entry. */\n  private _entryKey(element: CalendarEntry): string {\n    let key = this._entryKeys.get(element);\n    if (!key) {\n      key = `entry-${this._nextEntryKey++}`;\n      this._entryKeys.set(element, key);\n    }\n    return key;\n  }\n\n  protected override render() {\n    const entries = this._entryElements\n      .map((element) => {\n        const entry = resolveEntry(readCalendarEntryElement(element));\n        return entry ? { ...entry, projectionKey: this._entryKey(element) } : null;\n      })\n      .filter((entry): entry is ProjectedCalendarEntry => entry !== null);\n\n    return html`\n      <div class=\"year\">\n        ${repeat(\n          MONTHS,\n          (m) => m,\n          (m) => {\n            const monthStart = new Date(this.year, m - 1, 1);\n            const monthEnd = new Date(this.year, m - 1, daysInMonth(this.year, m));\n            const monthEntries = entries.filter((entry) => overlapsRange(entry, monthStart, monthEnd));\n            return html`\n              <calendar-month .year=${this.year} .month=${m}>\n                ${repeat(\n                  monthEntries,\n                  (entry) => entry.projectionKey,\n                  (entry) => html`\n                    <calendar-entry\n                      start=${entry.start}\n                      end=${entry.end}\n                      label=${entry.label}\n                      color=${entry.color}\n                      href=${ifDefined(entry.href)}\n                    >\n                      ${(entry.details ?? []).map((detail) => html`<span slot=\"detail\">${detail}</span>`)}\n                      ${entry.footer ? html`<span slot=\"footer\">${entry.footer}</span>` : nothing}\n                    </calendar-entry>\n                  `,\n                )}\n              </calendar-month>\n            `;\n          },\n        )}\n      </div>\n      <slot @slotchange=${this._handleSlotChange}></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"calendar-year\": CalendarYear;\n  }\n}\n"]}

package/dist/chat-message.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chat-message.d.ts","sourceRoot":"","sources":["../src/chat-message.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGrD,OAAO,oBAAoB,CAAC;AAG5B,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAC1D,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG,MAAM,GAAG,UAAU,CAAC;AAEhE;;;;;;;;;GASG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,4BAiEpB;IAEF,gEAAgE;IAC1B,IAAI,EAAE,eAAe,CAAW;IACtE,6FAA6F;IAChE,OAAO,EAAE,kBAAkB,CAAY;IACpE,kDAAkD;IACtC,MAAM,SAAM;IACxB,sEAAsE;IAC1D,SAAS,EAAE,MAAM,GAAG,IAAI,CAAQ;IAC5C,+FAA+F;IACnF,OAAO,SAAM;IACzB,iEAAiE;IACpC,WAAW,UAAS;IACjD,0DAA0D;IACd,SAAS,UAAS;IAE9D,OAAO,CAAC,OAAO;IAMN,MAAM,yCAgBd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}
+{"version":3,"file":"chat-message.d.ts","sourceRoot":"","sources":["../src/chat-message.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGrD,OAAO,oBAAoB,CAAC;AAG5B,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAC1D,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG,MAAM,GAAG,UAAU,CAAC;AAEhE;;;;;;;;;GASG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,4BAyGpB;IAEF,gEAAgE;IAC1B,IAAI,EAAE,eAAe,CAAW;IACtE,6FAA6F;IAChE,OAAO,EAAE,kBAAkB,CAAY;IACpE,kDAAkD;IACtC,MAAM,SAAM;IACxB,sEAAsE;IAC1D,SAAS,EAAE,MAAM,GAAG,IAAI,CAAQ;IAC5C,+FAA+F;IACnF,OAAO,SAAM;IACzB,iEAAiE;IACpC,WAAW,UAAS;IACjD,0DAA0D;IACd,SAAS,UAAS;IAE9D,OAAO,CAAC,OAAO;IAMN,MAAM,yCA8Bd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}

package/dist/chat-message.js

@@ -42,23 +42,43 @@ let ChatMessage = class ChatMessage extends LitElement {
         css `
       :host {
         display: block;
-        font-family: var(--ui-font, ui-sans-serif, system-ui, sans-serif);
+        font-family: var(
+          --ui-font,
+          ui-sans-serif,
+          system-ui,
+          sans-serif,
+          "Apple Color Emoji",
+          "Segoe UI Emoji",
+          "Segoe UI Symbol",
+          "Noto Color Emoji"
+        );
         font-size: var(--ui-font-size, 0.875rem);
       }
       .header {
         display: flex;
         align-items: center;
-        gap: 0.4rem;
-        font-size: 0.75rem;
+        gap: 0.5rem;
+        font-size: var(--ui-font-size-sm, 0.75rem);
         color: var(--ui-text-muted, #64748b);
-        margin-bottom: 0.3rem;
+        margin-bottom: 0.25rem;
       }
-      .header.clickable {
+      button.header {
+        width: 100%;
+        padding: 0;
+        border: 0;
+        background: none;
+        font-family: inherit;
+        text-align: left;
         cursor: pointer;
       }
+      button.header:focus-visible {
+        outline: none;
+        border-radius: var(--ui-radius-sm, 0.25rem);
+        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));
+      }
       .chevron {
         display: inline-flex;
-        transition: transform 0.15s ease;
+        transition: transform 150ms ease;
       }
       .chevron.expanded {
         transform: rotate(90deg);
@@ -74,7 +94,7 @@ let ChatMessage = class ChatMessage extends LitElement {
       }
       .body-card {
         border-radius: var(--ui-radius, 0.5rem);
-        padding: 0.6rem 0.8rem;
+        padding: 0.5rem 0.75rem;
         color: var(--ui-text, #0f172a);
         line-height: 1.5;
       }
@@ -82,24 +102,44 @@ let ChatMessage = class ChatMessage extends LitElement {
         display: none;
       }
       :host([role="user"]) .body-card {
-        background: color-mix(in srgb, var(--ui-primary, #4f46e5) 8%, var(--ui-surface, #fff));
+        background: color-mix(in srgb, var(--ui-primary, #4f46e5) 8%, var(--ui-surface, #ffffff));
       }
       :host([role="agent"]) .body-card {
-        background: var(--ui-surface, #fff);
+        background: var(--ui-surface, #ffffff);
         border: 1px solid var(--ui-border, #e2e8f0);
       }
       :host([role="system"]) .body-card {
-        padding: 0 0 0 1.1rem;
-        font-size: 0.8rem;
+        padding: 0 0 0 1rem;
+        font-size: var(--ui-font-size-sm, 0.75rem);
         color: var(--ui-text-muted, #64748b);
       }
       :host([variant="tool"]) .body-card,
       :host([variant="thinking"]) .body-card {
         opacity: 0.7;
-        font-size: 0.8rem;
+        font-size: var(--ui-font-size-sm, 0.75rem);
       }
       :host([variant="tool"]) .body-card {
-        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+        font-family: var(
+          --ui-font-mono,
+          ui-monospace,
+          SFMono-Regular,
+          Menlo,
+          Monaco,
+          Consolas,
+          monospace
+        );
+      }
+      @media (prefers-reduced-motion: reduce) {
+        .chevron {
+          transition: none;
+        }
+      }
+      @media (forced-colors: active) {
+        button.header:focus-visible {
+          outline: 2px solid CanvasText;
+          outline-offset: 2px;
+          box-shadow: none;
+        }
       }
     `,
     ]; }
@@ -110,18 +150,31 @@ let ChatMessage = class ChatMessage extends LitElement {
         this.dispatchEvent(new CustomEvent("toggle", { detail: { collapsed: this.collapsed } }));
     }
     render() {
-        return html `
-      <div class="header ${this.collapsible ? "clickable" : ""}" @click=${this._toggle}>
-        ${this.collapsible
-            ? html `<span class="chevron ${this.collapsed ? "" : "expanded"}"
-              >${iconChevronRight(12)}</span
-            >`
+        const headerContent = html `
+      ${this.collapsible
+            ? html `<span class="chevron ${this.collapsed ? "" : "expanded"}" aria-hidden="true"
+            >${iconChevronRight(12)}</span
+          >`
             : nothing}
-        ${this.author ? html `<span class="author">${this.author}</span>` : nothing}
-        ${this.timestamp ? html `<relative-time datetime=${this.timestamp}></relative-time>` : nothing}
-        ${this.summary ? html `<span class="summary">${this.summary}</span>` : nothing}
-      </div>
-      <div class="body-card" ?hidden=${this.collapsible && this.collapsed}>
+      ${this.author ? html `<span class="author">${this.author}</span>` : nothing}
+      ${this.timestamp ? html `<relative-time datetime=${this.timestamp}></relative-time>` : nothing}
+      ${this.summary ? html `<span class="summary">${this.summary}</span>` : nothing}
+    `;
+        return html `
+      ${this.collapsible
+            ? html `
+            <button
+              class="header"
+              type="button"
+              aria-expanded=${String(!this.collapsed)}
+              aria-controls="message-body"
+              @click=${this._toggle}
+            >
+              ${headerContent}
+            </button>
+          `
+            : html `<div class="header">${headerContent}</div>`}
+      <div id="message-body" class="body-card" ?hidden=${this.collapsible && this.collapsed}>
         <slot></slot>
       </div>
     `;

package/dist/chat-message.js.map

@@ -1 +1 @@
-{"version":3,"file":"chat-message.js","sourceRoot":"","sources":["../src/chat-message.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAC9C,OAAO,oBAAoB,CAAC;AAC5B,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAKrC;;;;;;;;;GASG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QAoEL,gEAAgE;QAC1B,SAAI,GAAoB,OAAO,CAAC;QACtE,6FAA6F;QAChE,YAAO,GAAuB,QAAQ,CAAC;QACpE,kDAAkD;QACtC,WAAM,GAAG,EAAE,CAAC;QACxB,sEAAsE;QAC1D,cAAS,GAAkB,IAAI,CAAC;QAC5C,+FAA+F;QACnF,YAAO,GAAG,EAAE,CAAC;QACzB,iEAAiE;QACpC,gBAAW,GAAG,KAAK,CAAC;QACjD,0DAA0D;QACd,cAAS,GAAG,KAAK,CAAC;IAyBhE,CAAC;aAzGiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8DF;KACF,AAjEqB,CAiEpB;IAiBM,OAAO;QACb,IAAI,CAAC,IAAI,CAAC,WAAW;YAAE,OAAO;QAC9B,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;QACjC,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC;IAC3F,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;2BACY,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,YAAY,IAAI,CAAC,OAAO;UAC5E,IAAI,CAAC,WAAW;YAChB,CAAC,CAAC,IAAI,CAAA,wBAAwB,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;iBACvD,gBAAgB,CAAC,EAAE,CAAC;cACvB;YACJ,CAAC,CAAC,OAAO;UACT,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA,wBAAwB,IAAI,CAAC,MAAM,SAAS,CAAC,CAAC,CAAC,OAAO;UACxE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAA,2BAA2B,IAAI,CAAC,SAAS,mBAAmB,CAAC,CAAC,CAAC,OAAO;UAC3F,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAA,yBAAyB,IAAI,CAAC,OAAO,SAAS,CAAC,CAAC,CAAC,OAAO;;uCAE9C,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,SAAS;;;KAGpE,CAAC;IACJ,CAAC;CACF,CAAA;AArCuC;IAArC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAA0C;AAEzC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAAwC;AAExD;IAAX,QAAQ,EAAE;2CAAa;AAEZ;IAAX,QAAQ,EAAE;8CAAiC;AAEhC;IAAX,QAAQ,EAAE;4CAAc;AAEI;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;gDAAqB;AAEL;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAAmB;AAjFnD,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CA0GvB","sourcesContent":["import { LitElement, css, html, nothing } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { iconChevronRight } from \"./icons.js\";\nimport \"./relative-time.js\";\nimport { tokens } from \"./tokens.js\";\n\nexport type ChatMessageRole = \"user\" | \"agent\" | \"system\";\nexport type ChatMessageVariant = \"normal\" | \"tool\" | \"thinking\";\n\n/**\n * One conversation entry in a chat-style activity feed. Tool calls and\n * \"thinking\" traces are variants of this component rather than separate\n * ones — they share the same header, collapse behavior, and body card as a\n * normal message, just dimmed and collapsible with an always-visible summary.\n *\n * @element chat-message\n * @slot - Message body (consumers slot in already-rendered content, e.g. sanitized markdown HTML).\n * @fires toggle - Fired with `{ collapsed: boolean }` when the header/summary is clicked in collapsible mode.\n */\n@customElement(\"chat-message\")\nexport class ChatMessage extends LitElement {\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: block;\n        font-family: var(--ui-font, ui-sans-serif, system-ui, sans-serif);\n        font-size: var(--ui-font-size, 0.875rem);\n      }\n      .header {\n        display: flex;\n        align-items: center;\n        gap: 0.4rem;\n        font-size: 0.75rem;\n        color: var(--ui-text-muted, #64748b);\n        margin-bottom: 0.3rem;\n      }\n      .header.clickable {\n        cursor: pointer;\n      }\n      .chevron {\n        display: inline-flex;\n        transition: transform 0.15s ease;\n      }\n      .chevron.expanded {\n        transform: rotate(90deg);\n      }\n      .author {\n        font-weight: 600;\n        color: var(--ui-text, #0f172a);\n      }\n      .summary {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      }\n      .body-card {\n        border-radius: var(--ui-radius, 0.5rem);\n        padding: 0.6rem 0.8rem;\n        color: var(--ui-text, #0f172a);\n        line-height: 1.5;\n      }\n      .body-card[hidden] {\n        display: none;\n      }\n      :host([role=\"user\"]) .body-card {\n        background: color-mix(in srgb, var(--ui-primary, #4f46e5) 8%, var(--ui-surface, #fff));\n      }\n      :host([role=\"agent\"]) .body-card {\n        background: var(--ui-surface, #fff);\n        border: 1px solid var(--ui-border, #e2e8f0);\n      }\n      :host([role=\"system\"]) .body-card {\n        padding: 0 0 0 1.1rem;\n        font-size: 0.8rem;\n        color: var(--ui-text-muted, #64748b);\n      }\n      :host([variant=\"tool\"]) .body-card,\n      :host([variant=\"thinking\"]) .body-card {\n        opacity: 0.7;\n        font-size: 0.8rem;\n      }\n      :host([variant=\"tool\"]) .body-card {\n        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n      }\n    `,\n  ];\n\n  /** Whose message this is; drives the card background/border. */\n  @property({ reflect: true }) override role: ChatMessageRole = \"agent\";\n  /** `tool`/`thinking` render dimmed and smaller, with `tool` using monospace for its body. */\n  @property({ reflect: true }) variant: ChatMessageVariant = \"normal\";\n  /** Header label, e.g. \"Freddy\" or \"Architect\". */\n  @property() author = \"\";\n  /** ISO-8601 timestamp, rendered via `relative-time` in the header. */\n  @property() timestamp: string | null = null;\n  /** Always-visible one-liner for `tool`/`thinking` variants (e.g. a truncated args preview). */\n  @property() summary = \"\";\n  /** Whether clicking the header/summary toggles the body slot. */\n  @property({ type: Boolean }) collapsible = false;\n  /** Current collapse state (reflected as an attribute). */\n  @property({ type: Boolean, reflect: true }) collapsed = false;\n\n  private _toggle() {\n    if (!this.collapsible) return;\n    this.collapsed = !this.collapsed;\n    this.dispatchEvent(new CustomEvent(\"toggle\", { detail: { collapsed: this.collapsed } }));\n  }\n\n  override render() {\n    return html`\n      <div class=\"header ${this.collapsible ? \"clickable\" : \"\"}\" @click=${this._toggle}>\n        ${this.collapsible\n          ? html`<span class=\"chevron ${this.collapsed ? \"\" : \"expanded\"}\"\n              >${iconChevronRight(12)}</span\n            >`\n          : nothing}\n        ${this.author ? html`<span class=\"author\">${this.author}</span>` : nothing}\n        ${this.timestamp ? html`<relative-time datetime=${this.timestamp}></relative-time>` : nothing}\n        ${this.summary ? html`<span class=\"summary\">${this.summary}</span>` : nothing}\n      </div>\n      <div class=\"body-card\" ?hidden=${this.collapsible && this.collapsed}>\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"chat-message\": ChatMessage;\n  }\n}\n"]}
+{"version":3,"file":"chat-message.js","sourceRoot":"","sources":["../src/chat-message.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, css, html, nothing } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { iconChevronRight } from \"./icons.js\";\nimport \"./relative-time.js\";\nimport { tokens } from \"./tokens.js\";\n\nexport type ChatMessageRole = \"user\" | \"agent\" | \"system\";\nexport type ChatMessageVariant = \"normal\" | \"tool\" | \"thinking\";\n\n/**\n * One conversation entry in a chat-style activity feed. Tool calls and\n * \"thinking\" traces are variants of this component rather than separate\n * ones — they share the same header, collapse behavior, and body card as a\n * normal message, just dimmed and collapsible with an always-visible summary.\n *\n * @element chat-message\n * @slot - Message body (consumers slot in already-rendered content, e.g. sanitized markdown HTML).\n * @fires toggle - Fired with `{ collapsed: boolean }` when the header/summary is clicked in collapsible mode.\n */\n@customElement(\"chat-message\")\nexport class ChatMessage extends LitElement {\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: block;\n        font-family: var(\n          --ui-font,\n          ui-sans-serif,\n          system-ui,\n          sans-serif,\n          \"Apple Color Emoji\",\n          \"Segoe UI Emoji\",\n          \"Segoe UI Symbol\",\n          \"Noto Color Emoji\"\n        );\n        font-size: var(--ui-font-size, 0.875rem);\n      }\n      .header {\n        display: flex;\n        align-items: center;\n        gap: 0.5rem;\n        font-size: var(--ui-font-size-sm, 0.75rem);\n        color: var(--ui-text-muted, #64748b);\n        margin-bottom: 0.25rem;\n      }\n      button.header {\n        width: 100%;\n        padding: 0;\n        border: 0;\n        background: none;\n        font-family: inherit;\n        text-align: left;\n        cursor: pointer;\n      }\n      button.header:focus-visible {\n        outline: none;\n        border-radius: var(--ui-radius-sm, 0.25rem);\n        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));\n      }\n      .chevron {\n        display: inline-flex;\n        transition: transform 150ms ease;\n      }\n      .chevron.expanded {\n        transform: rotate(90deg);\n      }\n      .author {\n        font-weight: 600;\n        color: var(--ui-text, #0f172a);\n      }\n      .summary {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      }\n      .body-card {\n        border-radius: var(--ui-radius, 0.5rem);\n        padding: 0.5rem 0.75rem;\n        color: var(--ui-text, #0f172a);\n        line-height: 1.5;\n      }\n      .body-card[hidden] {\n        display: none;\n      }\n      :host([role=\"user\"]) .body-card {\n        background: color-mix(in srgb, var(--ui-primary, #4f46e5) 8%, var(--ui-surface, #ffffff));\n      }\n      :host([role=\"agent\"]) .body-card {\n        background: var(--ui-surface, #ffffff);\n        border: 1px solid var(--ui-border, #e2e8f0);\n      }\n      :host([role=\"system\"]) .body-card {\n        padding: 0 0 0 1rem;\n        font-size: var(--ui-font-size-sm, 0.75rem);\n        color: var(--ui-text-muted, #64748b);\n      }\n      :host([variant=\"tool\"]) .body-card,\n      :host([variant=\"thinking\"]) .body-card {\n        opacity: 0.7;\n        font-size: var(--ui-font-size-sm, 0.75rem);\n      }\n      :host([variant=\"tool\"]) .body-card {\n        font-family: var(\n          --ui-font-mono,\n          ui-monospace,\n          SFMono-Regular,\n          Menlo,\n          Monaco,\n          Consolas,\n          monospace\n        );\n      }\n      @media (prefers-reduced-motion: reduce) {\n        .chevron {\n          transition: none;\n        }\n      }\n      @media (forced-colors: active) {\n        button.header:focus-visible {\n          outline: 2px solid CanvasText;\n          outline-offset: 2px;\n          box-shadow: none;\n        }\n      }\n    `,\n  ];\n\n  /** Whose message this is; drives the card background/border. */\n  @property({ reflect: true }) override role: ChatMessageRole = \"agent\";\n  /** `tool`/`thinking` render dimmed and smaller, with `tool` using monospace for its body. */\n  @property({ reflect: true }) variant: ChatMessageVariant = \"normal\";\n  /** Header label, e.g. \"Freddy\" or \"Architect\". */\n  @property() author = \"\";\n  /** ISO-8601 timestamp, rendered via `relative-time` in the header. */\n  @property() timestamp: string | null = null;\n  /** Always-visible one-liner for `tool`/`thinking` variants (e.g. a truncated args preview). */\n  @property() summary = \"\";\n  /** Whether clicking the header/summary toggles the body slot. */\n  @property({ type: Boolean }) collapsible = false;\n  /** Current collapse state (reflected as an attribute). */\n  @property({ type: Boolean, reflect: true }) collapsed = false;\n\n  private _toggle() {\n    if (!this.collapsible) return;\n    this.collapsed = !this.collapsed;\n    this.dispatchEvent(new CustomEvent(\"toggle\", { detail: { collapsed: this.collapsed } }));\n  }\n\n  override render() {\n    const headerContent = html`\n      ${this.collapsible\n        ? html`<span class=\"chevron ${this.collapsed ? \"\" : \"expanded\"}\" aria-hidden=\"true\"\n            >${iconChevronRight(12)}</span\n          >`\n        : nothing}\n      ${this.author ? html`<span class=\"author\">${this.author}</span>` : nothing}\n      ${this.timestamp ? html`<relative-time datetime=${this.timestamp}></relative-time>` : nothing}\n      ${this.summary ? html`<span class=\"summary\">${this.summary}</span>` : nothing}\n    `;\n\n    return html`\n      ${this.collapsible\n        ? html`\n            <button\n              class=\"header\"\n              type=\"button\"\n              aria-expanded=${String(!this.collapsed)}\n              aria-controls=\"message-body\"\n              @click=${this._toggle}\n            >\n              ${headerContent}\n            </button>\n          `\n        : html`<div class=\"header\">${headerContent}</div>`}\n      <div id=\"message-body\" class=\"body-card\" ?hidden=${this.collapsible && this.collapsed}>\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"chat-message\": ChatMessage;\n  }\n}\n"]}

package/dist/confirm-dialog.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from "lit";
+import { LitElement, type PropertyValues } from "lit";
 /**
  * Reusable confirmation dialog: overlay + centered card with a slotted body,
  * an optional error line, and Cancel/Confirm actions. Instant `display:none`
@@ -24,8 +24,15 @@ export declare class ConfirmDialog extends LitElement {
     busy: boolean;
     /** Inline error line shown below the body, or null for none. */
     error: string | null;
+    private _previousFocus;
     private _confirm;
     private _cancel;
+    private _getFocusableElements;
+    private _focusInitial;
+    private _onDocumentFocusIn;
+    private _onWindowKeydown;
+    protected updated(changed: PropertyValues): void;
+    disconnectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

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

@@ -1 +1 @@
-{"version":3,"file":"confirm-dialog.d.ts","sourceRoot":"","sources":["../src/confirm-dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAKrD;;;;;;;;;;GAUG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,4BA2GpB;IAEF,qCAAqC;IACR,IAAI,UAAS;IAC1C,oCAAoC;IACM,YAAY,SAAY;IAClE,mCAAmC;IACM,WAAW,SAAY;IAChE,wEAAwE;IAC3C,MAAM,UAAQ;IAC3C,8EAA8E;IACjD,IAAI,UAAS;IAC1C,gEAAgE;IACpD,KAAK,EAAE,MAAM,GAAG,IAAI,CAAQ;IAExC,OAAO,CAAC,QAAQ;IAIhB,OAAO,CAAC,OAAO;IAIN,MAAM,yCAed;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,aAAa,CAAC;KACjC;CACF"}
+{"version":3,"file":"confirm-dialog.d.ts","sourceRoot":"","sources":["../src/confirm-dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAW1E;;;;;;;;;;GAUG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,4BAqIpB;IAEF,qCAAqC;IACR,IAAI,UAAS;IAC1C,oCAAoC;IACM,YAAY,SAAY;IAClE,mCAAmC;IACM,WAAW,SAAY;IAChE,wEAAwE;IAC3C,MAAM,UAAQ;IAC3C,8EAA8E;IACjD,IAAI,UAAS;IAC1C,gEAAgE;IACpD,KAAK,EAAE,MAAM,GAAG,IAAI,CAAQ;IAExC,OAAO,CAAC,cAAc,CAA4B;IAElD,OAAO,CAAC,QAAQ;IAIhB,OAAO,CAAC,OAAO;IAIf,OAAO,CAAC,qBAAqB;IAU7B,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,kBAAkB,CAGxB;IAEF,OAAO,CAAC,gBAAgB,CAuBtB;IAEF,UAAmB,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAexD;IAEQ,oBAAoB,IAAI,IAAI,CAQpC;IAEQ,MAAM,yCA4Bd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,aAAa,CAAC;KACjC;CACF"}

package/dist/confirm-dialog.js

@@ -8,6 +8,7 @@ import { LitElement, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { iconArrowPath } from "./icons.js";
 import { tokens } from "./tokens.js";
+import { activateLayer, claimEscape, deactivateLayer, isTopLayer, } from "./utils/layer-stack.js";
 /**
  * Reusable confirmation dialog: overlay + centered card with a slotted body,
  * an optional error line, and Cancel/Confirm actions. Instant `display:none`
@@ -34,6 +35,38 @@ let ConfirmDialog = class ConfirmDialog extends LitElement {
         this.busy = false;
         /** Inline error line shown below the body, or null for none. */
         this.error = null;
+        this._previousFocus = null;
+        this._onDocumentFocusIn = (event) => {
+            if (!this.open || !isTopLayer(this) || event.composedPath().includes(this))
+                return;
+            this._focusInitial();
+        };
+        this._onWindowKeydown = (event) => {
+            if (!this.open || !isTopLayer(this))
+                return;
+            if (claimEscape(this, event) && !this.busy) {
+                this._cancel();
+                return;
+            }
+            if (event.key !== "Tab")
+                return;
+            const focusable = this._getFocusableElements();
+            if (focusable.length === 0) {
+                event.preventDefault();
+                this._focusInitial();
+                return;
+            }
+            const active = (this.shadowRoot?.activeElement ?? document.activeElement);
+            const index = focusable.indexOf(active);
+            if (event.shiftKey && index <= 0) {
+                event.preventDefault();
+                focusable.at(-1)?.focus();
+            }
+            else if (!event.shiftKey && index === focusable.length - 1) {
+                event.preventDefault();
+                focusable[0]?.focus();
+            }
+        };
     }
     static { this.styles = [
         tokens,
@@ -42,18 +75,18 @@ let ConfirmDialog = class ConfirmDialog extends LitElement {
         position: fixed;
         inset: 0;
         background: var(--ui-overlay, rgb(15 23 42 / 0.45));
-        z-index: 50;
+        z-index: var(--component-layer-z, 50);
         display: none;
         align-items: flex-start;
         justify-content: center;
-        padding: 10vh 20px 20px;
+        padding: 10vh 1.25rem 1.25rem;
         box-sizing: border-box;
       }
       .overlay.open {
         display: flex;
       }
       .dialog {
-        background: var(--ui-surface, #fff);
+        background: var(--ui-surface, #ffffff);
         border-radius: var(--ui-radius, 0.5rem);
         box-shadow: var(
           --ui-shadow-lg,
@@ -61,28 +94,38 @@ let ConfirmDialog = class ConfirmDialog extends LitElement {
           0 8px 10px -6px rgb(0 0 0 / 0.1)
         );
         width: 100%;
-        max-width: 420px;
+        max-width: 26.25rem;
         padding: 1.25rem;
         box-sizing: border-box;
+        outline: none;
       }
       .dialog-text {
         margin: 0 0 1rem;
         color: var(--ui-text, #0f172a);
-        font-family: var(--ui-font, ui-sans-serif, system-ui, sans-serif);
+        font-family: var(
+          --ui-font,
+          ui-sans-serif,
+          system-ui,
+          sans-serif,
+          "Apple Color Emoji",
+          "Segoe UI Emoji",
+          "Segoe UI Symbol",
+          "Noto Color Emoji"
+        );
         font-size: var(--ui-font-size, 0.875rem);
         line-height: 1.45;
       }
       .dialog-actions {
         display: flex;
         justify-content: flex-end;
-        gap: 0.6rem;
+        gap: 0.5rem;
       }
       .btn-cancel {
         background: none;
         border: 1px solid var(--ui-border, #e2e8f0);
         color: var(--ui-text, #0f172a);
         border-radius: var(--ui-radius-sm, 0.25rem);
-        padding: 0.5rem 0.9rem;
+        padding: 0.5rem 1rem;
         font-size: var(--ui-font-size-sm, 0.75rem);
         cursor: pointer;
         font-family: inherit;
@@ -94,25 +137,25 @@ let ConfirmDialog = class ConfirmDialog extends LitElement {
       .btn-primary {
         border: none;
         border-radius: var(--ui-radius-sm, 0.25rem);
-        padding: 0.5rem 0.9rem;
+        padding: 0.5rem 1rem;
         font-size: var(--ui-font-size-sm, 0.75rem);
         font-weight: 500;
         cursor: pointer;
         display: inline-flex;
         align-items: center;
-        gap: 0.35rem;
+        gap: 0.25rem;
         font-family: inherit;
       }
       .btn-danger {
         background: var(--ui-danger, #dc2626);
-        color: #fff;
+        color: var(--ui-on-accent, #ffffff);
       }
       .btn-danger:hover:not(:disabled) {
         background: var(--ui-danger-hover, #b91c1c);
       }
       .btn-primary {
         background: var(--ui-primary, #4f46e5);
-        color: #fff;
+        color: var(--ui-on-accent, #ffffff);
       }
       .btn-primary:hover:not(:disabled) {
         background: var(--ui-primary-hover, #4338ca);
@@ -121,10 +164,14 @@ let ConfirmDialog = class ConfirmDialog extends LitElement {
         opacity: 0.6;
         cursor: default;
       }
+      button:focus-visible {
+        outline: none;
+        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));
+      }
       .error-text {
         color: var(--ui-danger, #dc2626);
         font-size: var(--ui-font-size-sm, 0.75rem);
-        margin: 0.4rem 0 0.8rem;
+        margin: 0.5rem 0 0.75rem;
       }
       .spin {
         display: inline-flex;
@@ -135,9 +182,21 @@ let ConfirmDialog = class ConfirmDialog extends LitElement {
           transform: rotate(360deg);
         }
       }
-      @media (max-width: 768px) {
+      @media (prefers-reduced-motion: reduce) {
+        .spin {
+          animation: none;
+        }
+      }
+      @media (forced-colors: active) {
+        button:focus-visible {
+          outline: 2px solid CanvasText;
+          outline-offset: 2px;
+          box-shadow: none;
+        }
+      }
+      @media (max-width: 48rem) {
         .overlay {
-          padding: 12px;
+          padding: 0.75rem;
           overflow-y: auto;
         }
       }
@@ -149,16 +208,69 @@ let ConfirmDialog = class ConfirmDialog extends LitElement {
     _cancel() {
         this.dispatchEvent(new CustomEvent("cancel", { bubbles: true, composed: true }));
     }
+    _getFocusableElements() {
+        const selector = "a[href], button:not(:disabled), input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex='-1'])";
+        const slotted = Array.from(this.querySelectorAll(selector));
+        const internal = Array.from(this.shadowRoot?.querySelectorAll(selector) ?? []).filter((element) => element.closest(".dialog") !== null);
+        return [...slotted, ...internal].filter((element) => !element.hasAttribute("hidden"));
+    }
+    _focusInitial() {
+        const autofocus = this.querySelector("[autofocus]");
+        const cancel = this.shadowRoot?.querySelector(".btn-cancel:not(:disabled)");
+        const dialog = this.shadowRoot?.querySelector(".dialog");
+        (autofocus ?? cancel ?? this._getFocusableElements()[0] ?? dialog)?.focus();
+    }
+    updated(changed) {
+        if (!changed.has("open"))
+            return;
+        if (this.open) {
+            activateLayer(this);
+            this._previousFocus = document.activeElement;
+            document.addEventListener("focusin", this._onDocumentFocusIn, true);
+            window.addEventListener("keydown", this._onWindowKeydown, true);
+            this._focusInitial();
+            return;
+        }
+        deactivateLayer(this);
+        document.removeEventListener("focusin", this._onDocumentFocusIn, true);
+        window.removeEventListener("keydown", this._onWindowKeydown, true);
+        if (this._previousFocus?.isConnected)
+            this._previousFocus.focus();
+        this._previousFocus = null;
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener("focusin", this._onDocumentFocusIn, true);
+        window.removeEventListener("keydown", this._onWindowKeydown, true);
+        deactivateLayer(this);
+        if (this._previousFocus?.isConnected)
+            this._previousFocus.focus();
+        this._previousFocus = null;
+        this.open = false;
+    }
     render() {
+        const accessibleName = this.getAttribute("aria-label") ?? "Confirmation";
         return html `
       <div class="overlay ${this.open ? "open" : ""}">
-        <div class="dialog">
-          <p class="dialog-text"><slot></slot></p>
-          ${this.error ? html `<p class="error-text">${this.error}</p>` : nothing}
+        <div
+          class="dialog"
+          role="dialog"
+          aria-modal="true"
+          aria-label=${accessibleName}
+          aria-describedby=${this.error ? "dialog-text dialog-error" : "dialog-text"}
+          tabindex="-1"
+        >
+          <p id="dialog-text" class="dialog-text"><slot></slot></p>
+          ${this.error
+            ? html `<p id="dialog-error" class="error-text" role="alert">${this.error}</p>`
+            : nothing}
           <div class="dialog-actions">
             <button class="btn-cancel" ?disabled=${this.busy} @click=${this._cancel}>${this.cancelLabel}</button>
             <button class=${this.danger ? "btn-danger" : "btn-primary"} ?disabled=${this.busy} @click=${this._confirm}>
-              ${this.busy ? html `<span class="spin">${iconArrowPath(14)}</span>` : nothing} ${this.confirmLabel}
+              ${this.busy
+            ? html `<span class="spin" aria-hidden="true">${iconArrowPath(14)}</span>`
+            : nothing}
+              ${this.confirmLabel}
             </button>
           </div>
         </div>