@f-ewald/components 1.2.0 → 1.3.0

package/dist/popover-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover-panel.js","sourceRoot":"","sources":["../src/popover-panel.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, css, html, nothing, type PropertyValues } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { iconX } from \"./icons.js\";\nimport { tokens } from \"./tokens.js\";\nimport {\n  activateLayer,\n  claimEscape,\n  deactivateLayer,\n  isTopLayer,\n} from \"./utils/layer-stack.js\";\n\n/**\n * Generic anchored popover shell: a floating card positioned relative to its\n * nearest `position: relative` ancestor (place it next to its trigger button\n * inside such a wrapper), as opposed to `slide-panel`'s fixed screen-edge\n * drawer. Closes on outside click or Escape. Header chrome and close button\n * match `slide-panel`'s API (`heading`, `panel-close`) so either can be\n * swapped in for the other with no consumer-side changes beyond the wrapper.\n *\n * Set `centered` to render as a screen-centered modal with a translucent\n * backdrop instead of the default anchored placement.\n *\n * @element popover-panel\n * @fires panel-close - User clicked the close (✕) button, pressed Escape, or clicked outside/the backdrop.\n * @slot title - Overrides the plain `heading` text with custom markup.\n * @slot actions - Extra header controls (e.g. an icon+label link) rendered between the title and the close button.\n * @slot - Popover body content.\n */\n@customElement(\"popover-panel\")\nexport class PopoverPanel extends LitElement {\n  /** Whether the popover is currently visible. */\n  @property({ type: Boolean, reflect: true }) open = false;\n  /** Title text shown in the popover header. */\n  @property() heading = \"\";\n  /** Render as a screen-centered modal with a backdrop instead of anchored placement. */\n  @property({ type: Boolean, reflect: true }) centered = false;\n\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: none;\n        position: absolute;\n        top: calc(100% + 0.5rem);\n        right: 0;\n        z-index: var(--component-layer-z, 20);\n      }\n      :host([open]) {\n        display: block;\n      }\n      :host([centered][open]) {\n        position: fixed;\n        inset: 0;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background: var(--ui-overlay, rgb(15 23 42 / 0.45));\n        z-index: var(--component-layer-z, 30);\n      }\n      :host([centered]) .panel {\n        width: 25rem;\n      }\n      .panel {\n        width: 20rem;\n        max-width: calc(100vw - 2rem);\n        background: var(--ui-surface, #ffffff);\n        border: 1px solid var(--ui-border, #e2e8f0);\n        border-radius: var(--ui-radius, 0.5rem);\n        box-shadow: var(--ui-shadow-lg, 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1));\n        display: flex;\n        flex-direction: column;\n        overflow: hidden;\n      }\n      .panel-header {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        padding: 0.75rem;\n        border-bottom: 1px solid var(--ui-border, #e2e8f0);\n        flex: 0 0 auto;\n      }\n      .panel-title {\n        font-weight: var(--ui-font-weight-semibold, 600);\n        font-size: var(--ui-font-size-lg, 1rem);\n        line-height: var(--ui-line-height-tight, 1.25);\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        color: var(--ui-text, #0f172a);\n        flex: 1 1 auto;\n        overflow: hidden;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        padding-right: 0.5rem;\n      }\n      .panel-actions {\n        display: flex;\n        align-items: center;\n        gap: 0.5rem;\n        flex: 0 0 auto;\n        margin-right: 0.25rem;\n      }\n      .close-btn {\n        background: none;\n        border: none;\n        cursor: pointer;\n        width: 2rem;\n        height: 2rem;\n        padding: 0;\n        color: var(--ui-text-muted, #64748b);\n        border-radius: var(--ui-radius-sm, 0.25rem);\n        flex: 0 0 auto;\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n      }\n      .close-btn:hover {\n        background: var(--ui-surface-muted, #f8fafc);\n      }\n      .close-btn:focus-visible {\n        outline: none;\n        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));\n      }\n      @media (forced-colors: active) {\n        .close-btn:focus-visible {\n          outline: 2px solid CanvasText;\n          outline-offset: 2px;\n          box-shadow: none;\n        }\n      }\n    `,\n  ];\n\n  #modalActive = false;\n  #previousFocus: HTMLElement | null = null;\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    window.removeEventListener(\"mousedown\", this.#onWindowMousedown, true);\n    window.removeEventListener(\"keydown\", this.#onWindowKeydown);\n    document.removeEventListener(\"focusin\", this.#onDocumentFocusIn, true);\n    deactivateLayer(this);\n    if (this.#previousFocus?.isConnected) this.#previousFocus.focus();\n    this.#previousFocus = null;\n    this.#modalActive = false;\n    this.open = false;\n  }\n\n  protected override updated(changed: PropertyValues): void {\n    if (changed.has(\"open\")) {\n      if (this.open) {\n        activateLayer(this);\n        window.addEventListener(\"mousedown\", this.#onWindowMousedown, true);\n        window.addEventListener(\"keydown\", this.#onWindowKeydown);\n      } else {\n        deactivateLayer(this);\n        window.removeEventListener(\"mousedown\", this.#onWindowMousedown, true);\n        window.removeEventListener(\"keydown\", this.#onWindowKeydown);\n      }\n    }\n\n    const shouldBeModal = this.open && this.centered;\n    if (shouldBeModal && !this.#modalActive) {\n      this.#modalActive = true;\n      this.#previousFocus = document.activeElement as HTMLElement | null;\n      document.addEventListener(\"focusin\", this.#onDocumentFocusIn, true);\n      this.#focusInitial();\n    } else if (!shouldBeModal && this.#modalActive) {\n      this.#modalActive = false;\n      document.removeEventListener(\"focusin\", this.#onDocumentFocusIn, true);\n      if (this.#previousFocus?.isConnected) this.#previousFocus.focus();\n      this.#previousFocus = null;\n    }\n  }\n\n  #onWindowMousedown = (e: MouseEvent): void => {\n    if (!isTopLayer(this)) return;\n    // In centered mode the host itself renders the backdrop, so a mousedown\n    // landing directly on the host (not on .panel or its content) is a\n    // backdrop click and must close like an outside click would.\n    if (this.centered && e.target === this) {\n      this.#close();\n      return;\n    }\n    if (!e.composedPath().includes(this)) this.#close();\n  };\n\n  #onWindowKeydown = (e: KeyboardEvent): void => {\n    if (!isTopLayer(this)) return;\n    if (claimEscape(this, e)) {\n      this.#close();\n      return;\n    }\n    if (!this.centered || e.key !== \"Tab\") return;\n\n    const focusable = this.#getFocusableElements();\n    if (focusable.length === 0) {\n      e.preventDefault();\n      this.#focusInitial();\n      return;\n    }\n    const active = (this.shadowRoot?.activeElement ?? document.activeElement) as HTMLElement | null;\n    const index = focusable.indexOf(active as HTMLElement);\n    if (e.shiftKey && index <= 0) {\n      e.preventDefault();\n      focusable.at(-1)?.focus();\n    } else if (!e.shiftKey && index === focusable.length - 1) {\n      e.preventDefault();\n      focusable[0]?.focus();\n    }\n  };\n\n  #onDocumentFocusIn = (event: FocusEvent): void => {\n    if (!this.#modalActive || !isTopLayer(this) || event.composedPath().includes(this)) return;\n    this.#focusInitial();\n  };\n\n  #getFocusableElements(): HTMLElement[] {\n    const selector =\n      \"a[href], button:not(:disabled), input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex='-1'])\";\n    const focusableInSlot = (slotSelector: string): HTMLElement[] => {\n      const slot = this.shadowRoot?.querySelector<HTMLSlotElement>(slotSelector);\n      return (slot?.assignedElements({ flatten: true }) ?? []).flatMap((element) => [\n        ...(element instanceof HTMLElement && element.matches(selector) ? [element] : []),\n        ...Array.from(element.querySelectorAll<HTMLElement>(selector)),\n      ]);\n    };\n    const close = this.shadowRoot?.querySelector<HTMLElement>(\".close-btn\");\n    return [\n      ...focusableInSlot('slot[name=\"title\"]'),\n      ...focusableInSlot('slot[name=\"actions\"]'),\n      ...(close ? [close] : []),\n      ...focusableInSlot(\"slot:not([name])\"),\n    ].filter((element) => !element.hasAttribute(\"hidden\"));\n  }\n\n  #focusInitial(): void {\n    const autofocus = this.querySelector<HTMLElement>(\"[autofocus]\");\n    const close = this.shadowRoot?.querySelector<HTMLElement>(\".close-btn\");\n    const panel = this.shadowRoot?.querySelector<HTMLElement>(\".panel\");\n    (autofocus ?? close ?? this.#getFocusableElements()[0] ?? panel)?.focus();\n  }\n\n  #close(): void {\n    this.dispatchEvent(new CustomEvent(\"panel-close\", { bubbles: true, composed: true }));\n  }\n\n  override render() {\n    const explicitLabel = this.getAttribute(\"aria-label\");\n    return html`\n      <div\n        class=\"panel\"\n        role=\"dialog\"\n        aria-modal=${this.centered ? \"true\" : nothing}\n        aria-label=${explicitLabel ?? nothing}\n        aria-labelledby=${explicitLabel ? nothing : \"popover-title\"}\n        tabindex=\"-1\"\n      >\n        <div class=\"panel-header\">\n          <span id=\"popover-title\" class=\"panel-title\">\n            <slot name=\"title\">${this.heading || (this.centered ? \"Dialog\" : \"Popover\")}</slot>\n          </span>\n          <span class=\"panel-actions\"><slot name=\"actions\"></slot></span>\n          <button class=\"close-btn\" aria-label=\"Close popover\" @click=${() => this.#close()}>\n            <span aria-hidden=\"true\">${iconX(18)}</span>\n          </button>\n        </div>\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"popover-panel\": PopoverPanel;\n  }\n}\n"]}
+{"version":3,"file":"popover-panel.js","sourceRoot":"","sources":["../src/popover-panel.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, css, html, nothing, type PropertyValues } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { iconX } from \"./icons.js\";\nimport { tokens } from \"./tokens.js\";\nimport {\n  activateLayer,\n  claimEscape,\n  deactivateLayer,\n  isTopLayer,\n} from \"./utils/layer-stack.js\";\n\n/**\n * Generic anchored popover shell: a floating card positioned relative to its\n * nearest `position: relative` ancestor (place it next to its trigger button\n * inside such a wrapper), as opposed to `slide-panel`'s fixed screen-edge\n * drawer. Closes on outside click or Escape. Header chrome and close button\n * match `slide-panel`'s API (`heading`, `panel-close`) so either can be\n * swapped in for the other with no consumer-side changes beyond the wrapper.\n *\n * Set `centered` to render as a screen-centered modal with a translucent\n * backdrop instead of the default anchored placement.\n *\n * @element popover-panel\n * @fires panel-close - User clicked the close (✕) button, pressed Escape, or clicked outside/the backdrop.\n * @slot title - Overrides the plain `heading` text with custom markup.\n * @slot actions - Extra header controls (e.g. an icon+label link) rendered between the title and the close button.\n * @slot - Popover body content.\n */\n@customElement(\"popover-panel\")\nexport class PopoverPanel extends LitElement {\n  /** Whether the popover is currently visible. */\n  @property({ type: Boolean, reflect: true }) open = false;\n  /** Title text shown in the popover header. */\n  @property() heading = \"\";\n  /** Render as a screen-centered modal with a backdrop instead of anchored placement. */\n  @property({ type: Boolean, reflect: true }) centered = false;\n\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: none;\n        position: absolute;\n        top: calc(100% + 0.5rem);\n        right: 0;\n        z-index: var(--component-layer-z, 20);\n      }\n      :host([open]) {\n        display: block;\n      }\n      :host([centered][open]) {\n        position: fixed;\n        inset: 0;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background: var(--ui-overlay, rgb(15 23 42 / 0.45));\n        z-index: var(--component-layer-z, 30);\n      }\n      :host([centered]) .panel {\n        width: 25rem;\n      }\n      .panel {\n        width: 20rem;\n        max-width: calc(100vw - 2rem);\n        background: var(--ui-surface, #ffffff);\n        border: 1px solid var(--ui-border, #e2e8f0);\n        border-radius: var(--ui-radius, 0.5rem);\n        box-shadow: var(--ui-shadow-lg, 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1));\n        display: flex;\n        flex-direction: column;\n      }\n      .panel-header {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        padding: 0.75rem;\n        border-bottom: 1px solid var(--ui-border, #e2e8f0);\n        border-radius: var(--ui-radius, 0.5rem) var(--ui-radius, 0.5rem) 0 0;\n        flex: 0 0 auto;\n      }\n      .panel-title {\n        font-weight: var(--ui-font-weight-semibold, 600);\n        font-size: var(--ui-font-size-lg, 1rem);\n        line-height: var(--ui-line-height-tight, 1.25);\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        color: var(--ui-text, #0f172a);\n        flex: 1 1 auto;\n        overflow: hidden;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        padding-right: 0.5rem;\n      }\n      .panel-actions {\n        display: flex;\n        align-items: center;\n        gap: 0.5rem;\n        flex: 0 0 auto;\n        margin-right: 0.25rem;\n      }\n      .close-btn {\n        background: none;\n        border: none;\n        cursor: pointer;\n        width: 2rem;\n        height: 2rem;\n        padding: 0;\n        color: var(--ui-text-muted, #64748b);\n        border-radius: var(--ui-radius-sm, 0.25rem);\n        flex: 0 0 auto;\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n      }\n      .close-btn:hover {\n        background: var(--ui-surface-muted, #f8fafc);\n      }\n      .close-btn:focus-visible {\n        outline: none;\n        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));\n      }\n      @media (forced-colors: active) {\n        .close-btn:focus-visible {\n          outline: 2px solid CanvasText;\n          outline-offset: 2px;\n          box-shadow: none;\n        }\n      }\n    `,\n  ];\n\n  #modalActive = false;\n  #previousFocus: HTMLElement | null = null;\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    window.removeEventListener(\"mousedown\", this.#onWindowMousedown, true);\n    window.removeEventListener(\"keydown\", this.#onWindowKeydown);\n    document.removeEventListener(\"focusin\", this.#onDocumentFocusIn, true);\n    deactivateLayer(this);\n    if (this.#previousFocus?.isConnected) this.#previousFocus.focus();\n    this.#previousFocus = null;\n    this.#modalActive = false;\n    this.open = false;\n  }\n\n  protected override updated(changed: PropertyValues): void {\n    if (changed.has(\"open\")) {\n      if (this.open) {\n        activateLayer(this);\n        window.addEventListener(\"mousedown\", this.#onWindowMousedown, true);\n        window.addEventListener(\"keydown\", this.#onWindowKeydown);\n      } else {\n        deactivateLayer(this);\n        window.removeEventListener(\"mousedown\", this.#onWindowMousedown, true);\n        window.removeEventListener(\"keydown\", this.#onWindowKeydown);\n      }\n    }\n\n    const shouldBeModal = this.open && this.centered;\n    if (shouldBeModal && !this.#modalActive) {\n      this.#modalActive = true;\n      this.#previousFocus = document.activeElement as HTMLElement | null;\n      document.addEventListener(\"focusin\", this.#onDocumentFocusIn, true);\n      this.#focusInitial();\n    } else if (!shouldBeModal && this.#modalActive) {\n      this.#modalActive = false;\n      document.removeEventListener(\"focusin\", this.#onDocumentFocusIn, true);\n      if (this.#previousFocus?.isConnected) this.#previousFocus.focus();\n      this.#previousFocus = null;\n    }\n  }\n\n  #onWindowMousedown = (e: MouseEvent): void => {\n    if (!isTopLayer(this)) return;\n    // In centered mode the host itself renders the backdrop, so a mousedown\n    // landing directly on the host (not on .panel or its content) is a\n    // backdrop click and must close like an outside click would.\n    if (this.centered && e.target === this) {\n      this.#close();\n      return;\n    }\n    if (!e.composedPath().includes(this)) this.#close();\n  };\n\n  #onWindowKeydown = (e: KeyboardEvent): void => {\n    if (!isTopLayer(this)) return;\n    if (claimEscape(this, e)) {\n      this.#close();\n      return;\n    }\n    if (!this.centered || e.key !== \"Tab\") return;\n\n    const focusable = this.#getFocusableElements();\n    if (focusable.length === 0) {\n      e.preventDefault();\n      this.#focusInitial();\n      return;\n    }\n    const active = (this.shadowRoot?.activeElement ?? document.activeElement) as HTMLElement | null;\n    const index = focusable.indexOf(active as HTMLElement);\n    if (e.shiftKey && index <= 0) {\n      e.preventDefault();\n      focusable.at(-1)?.focus();\n    } else if (!e.shiftKey && index === focusable.length - 1) {\n      e.preventDefault();\n      focusable[0]?.focus();\n    }\n  };\n\n  #onDocumentFocusIn = (event: FocusEvent): void => {\n    if (!this.#modalActive || !isTopLayer(this) || event.composedPath().includes(this)) return;\n    this.#focusInitial();\n  };\n\n  #getFocusableElements(): HTMLElement[] {\n    const selector =\n      \"a[href], button:not(:disabled), input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex='-1'])\";\n    const focusableInSlot = (slotSelector: string): HTMLElement[] => {\n      const slot = this.shadowRoot?.querySelector<HTMLSlotElement>(slotSelector);\n      return (slot?.assignedElements({ flatten: true }) ?? []).flatMap((element) => [\n        ...(element instanceof HTMLElement && element.matches(selector) ? [element] : []),\n        ...Array.from(element.querySelectorAll<HTMLElement>(selector)),\n      ]);\n    };\n    const close = this.shadowRoot?.querySelector<HTMLElement>(\".close-btn\");\n    return [\n      ...focusableInSlot('slot[name=\"title\"]'),\n      ...focusableInSlot('slot[name=\"actions\"]'),\n      ...(close ? [close] : []),\n      ...focusableInSlot(\"slot:not([name])\"),\n    ].filter((element) => !element.hasAttribute(\"hidden\"));\n  }\n\n  #focusInitial(): void {\n    const autofocus = this.querySelector<HTMLElement>(\"[autofocus]\");\n    const close = this.shadowRoot?.querySelector<HTMLElement>(\".close-btn\");\n    const panel = this.shadowRoot?.querySelector<HTMLElement>(\".panel\");\n    (autofocus ?? close ?? this.#getFocusableElements()[0] ?? panel)?.focus();\n  }\n\n  #close(): void {\n    this.dispatchEvent(new CustomEvent(\"panel-close\", { bubbles: true, composed: true }));\n  }\n\n  override render() {\n    const explicitLabel = this.getAttribute(\"aria-label\");\n    return html`\n      <div\n        class=\"panel\"\n        role=\"dialog\"\n        aria-modal=${this.centered ? \"true\" : nothing}\n        aria-label=${explicitLabel ?? nothing}\n        aria-labelledby=${explicitLabel ? nothing : \"popover-title\"}\n        tabindex=\"-1\"\n      >\n        <div class=\"panel-header\">\n          <span id=\"popover-title\" class=\"panel-title\">\n            <slot name=\"title\">${this.heading || (this.centered ? \"Dialog\" : \"Popover\")}</slot>\n          </span>\n          <span class=\"panel-actions\"><slot name=\"actions\"></slot></span>\n          <button class=\"close-btn\" aria-label=\"Close popover\" @click=${() => this.#close()}>\n            <span aria-hidden=\"true\">${iconX(18)}</span>\n          </button>\n        </div>\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"popover-panel\": PopoverPanel;\n  }\n}\n"]}

package/dist/timeline-container.d.ts

@@ -0,0 +1,22 @@
+import { LitElement } from "lit";
+/**
+ * Vertical timeline: a single connecting line runs down the left edge and each
+ * slotted `timeline-entry` places a dot on it. This is a thin layout and
+ * semantics wrapper — the entries draw the line segments and dots themselves,
+ * so the container adds no gap between them (a gap would break the line).
+ * Exposed to assistive technology as a list of events.
+ *
+ * @element timeline-container
+ * @slot - `timeline-entry` elements, in chronological order.
+ */
+export declare class TimelineContainer extends LitElement {
+    static styles: import("lit").CSSResult[];
+    connectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "timeline-container": TimelineContainer;
+    }
+}
+//# sourceMappingURL=timeline-container.d.ts.map

package/dist/timeline-container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-container.d.ts","sourceRoot":"","sources":["../src/timeline-container.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C;;;;;;;;;GASG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAC/C,OAAgB,MAAM,4BAOpB;IAEO,iBAAiB,IAAI,IAAI,CAGjC;IAEQ,MAAM,yCAEd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,iBAAiB,CAAC;KACzC;CACF"}

package/dist/timeline-container.js

@@ -0,0 +1,42 @@
+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 } from "lit";
+import { customElement } from "lit/decorators.js";
+import { tokens } from "./tokens.js";
+/**
+ * Vertical timeline: a single connecting line runs down the left edge and each
+ * slotted `timeline-entry` places a dot on it. This is a thin layout and
+ * semantics wrapper — the entries draw the line segments and dots themselves,
+ * so the container adds no gap between them (a gap would break the line).
+ * Exposed to assistive technology as a list of events.
+ *
+ * @element timeline-container
+ * @slot - `timeline-entry` elements, in chronological order.
+ */
+let TimelineContainer = class TimelineContainer extends LitElement {
+    static { this.styles = [
+        tokens,
+        css `
+      :host {
+        display: block;
+      }
+    `,
+    ]; }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.hasAttribute("role"))
+            this.setAttribute("role", "list");
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+TimelineContainer = __decorate([
+    customElement("timeline-container")
+], TimelineContainer);
+export { TimelineContainer };
+//# sourceMappingURL=timeline-container.js.map

package/dist/timeline-container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-container.js","sourceRoot":"","sources":["../src/timeline-container.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC;;;;;;;;;GASG;AAEI,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;aAC/B,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;KAIF;KACF,AAPqB,CAOpB;IAEO,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC;YAAE,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpE,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;CACF,CAAA;AAlBY,iBAAiB;IAD7B,aAAa,CAAC,oBAAoB,CAAC;GACvB,iBAAiB,CAkB7B","sourcesContent":["import { LitElement, css, html } from \"lit\";\nimport { customElement } from \"lit/decorators.js\";\nimport { tokens } from \"./tokens.js\";\n\n/**\n * Vertical timeline: a single connecting line runs down the left edge and each\n * slotted `timeline-entry` places a dot on it. This is a thin layout and\n * semantics wrapper — the entries draw the line segments and dots themselves,\n * so the container adds no gap between them (a gap would break the line).\n * Exposed to assistive technology as a list of events.\n *\n * @element timeline-container\n * @slot - `timeline-entry` elements, in chronological order.\n */\n@customElement(\"timeline-container\")\nexport class TimelineContainer extends LitElement {\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: block;\n      }\n    `,\n  ];\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (!this.hasAttribute(\"role\")) this.setAttribute(\"role\", \"list\");\n  }\n\n  override render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"timeline-container\": TimelineContainer;\n  }\n}\n"]}

package/dist/timeline-entry.d.ts

@@ -0,0 +1,31 @@
+import { LitElement } from "lit";
+import "./relative-time.js";
+/**
+ * One event on a `timeline-container`: a dot on the vertical line, an optional
+ * headline, a relative timestamp ("3 hours ago"), and freely nested content.
+ * The connecting line is drawn here — its segment above the dot is hidden on
+ * the first entry and the segment below is hidden on the last, so the line caps
+ * exactly at the first and last dots. Only meaningful inside a
+ * `timeline-container`; demonstrated through it.
+ *
+ * @element timeline-entry
+ * @slot headline - Optional headline/title for the event.
+ * @slot - The event content; nest any elements here.
+ */
+export declare class TimelineEntry extends LitElement {
+    /** ISO 8601 or SQLite datetime string, rendered as a relative time. */
+    datetime: string | null;
+    /** Whether the headline slot currently has assigned content. */
+    private _hasHeadline;
+    static styles: import("lit").CSSResult[];
+    connectedCallback(): void;
+    /** Collapses the headline when nothing is slotted so the time sits alone. */
+    private _onHeadlineSlotChange;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "timeline-entry": TimelineEntry;
+    }
+}
+//# sourceMappingURL=timeline-entry.d.ts.map

package/dist/timeline-entry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-entry.d.ts","sourceRoot":"","sources":["../src/timeline-entry.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAErD,OAAO,oBAAoB,CAAC;AAG5B;;;;;;;;;;;GAWG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,uEAAuE;IAC3D,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE3C,gEAAgE;IACvD,OAAO,CAAC,YAAY,CAAS;IAEtC,OAAgB,MAAM,4BAgGpB;IAEO,iBAAiB,IAAI,IAAI,CAGjC;IAED,6EAA6E;IAC7E,OAAO,CAAC,qBAAqB;IAIpB,MAAM,yCAqBd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,aAAa,CAAC;KACjC;CACF"}

package/dist/timeline-entry.js

@@ -0,0 +1,170 @@
+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, state } from "lit/decorators.js";
+import "./relative-time.js";
+import { tokens } from "./tokens.js";
+/**
+ * One event on a `timeline-container`: a dot on the vertical line, an optional
+ * headline, a relative timestamp ("3 hours ago"), and freely nested content.
+ * The connecting line is drawn here — its segment above the dot is hidden on
+ * the first entry and the segment below is hidden on the last, so the line caps
+ * exactly at the first and last dots. Only meaningful inside a
+ * `timeline-container`; demonstrated through it.
+ *
+ * @element timeline-entry
+ * @slot headline - Optional headline/title for the event.
+ * @slot - The event content; nest any elements here.
+ */
+let TimelineEntry = class TimelineEntry extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** ISO 8601 or SQLite datetime string, rendered as a relative time. */
+        this.datetime = null;
+        /** Whether the headline slot currently has assigned content. */
+        this._hasHeadline = false;
+    }
+    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"
+        );
+      }
+      .entry {
+        display: flex;
+        gap: 0.75rem;
+      }
+      .rail {
+        position: relative;
+        flex: 0 0 auto;
+        width: 0.75rem;
+      }
+      .line {
+        position: absolute;
+        left: 50%;
+        width: 2px;
+        transform: translateX(-50%);
+        background: var(--ui-border, #e2e8f0);
+      }
+      .line-top {
+        top: 0;
+        height: 0.5rem;
+      }
+      .line-bottom {
+        top: 0.5rem;
+        bottom: 0;
+      }
+      .dot {
+        position: absolute;
+        top: 0.125rem;
+        left: 50%;
+        width: 0.75rem;
+        height: 0.75rem;
+        transform: translateX(-50%);
+        border-radius: 9999px;
+        /* Same primary-token gradient as map-circle/user-avatar, lighter on top. */
+        background: linear-gradient(
+          to bottom,
+          color-mix(in srgb, var(--ui-primary, #4f46e5) 70%, #ffffff) 0%,
+          color-mix(in srgb, var(--ui-primary, #4f46e5) 70%, #000000) 100%
+        );
+      }
+      :host(:first-child) .line-top {
+        display: none;
+      }
+      :host(:last-child) .line-bottom {
+        display: none;
+      }
+      .body {
+        flex: 1 1 auto;
+        min-width: 0;
+        padding-bottom: 1.5rem;
+      }
+      :host(:last-child) .body {
+        padding-bottom: 0;
+      }
+      .head {
+        display: flex;
+        align-items: baseline;
+        gap: 0.5rem;
+        flex-wrap: wrap;
+      }
+      .headline {
+        font-weight: var(--ui-font-weight-semibold, 600);
+        font-size: var(--ui-font-size, 0.875rem);
+        line-height: var(--ui-line-height-tight, 1.25);
+        color: var(--ui-text, #0f172a);
+      }
+      .headline.empty {
+        display: none;
+      }
+      .time {
+        font-size: var(--ui-font-size-sm, 0.75rem);
+        line-height: var(--ui-line-height-tight, 1.25);
+        color: var(--ui-text-muted, #64748b);
+      }
+      .content {
+        margin-top: 0.25rem;
+        font-size: var(--ui-font-size, 0.875rem);
+        line-height: var(--ui-line-height-normal, 1.5);
+        color: var(--ui-text, #0f172a);
+      }
+    `,
+    ]; }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.hasAttribute("role"))
+            this.setAttribute("role", "listitem");
+    }
+    /** Collapses the headline when nothing is slotted so the time sits alone. */
+    _onHeadlineSlotChange(event) {
+        this._hasHeadline = event.target.assignedNodes({ flatten: true }).length > 0;
+    }
+    render() {
+        return html `
+      <div class="entry">
+        <div class="rail" aria-hidden="true">
+          <span class="line line-top"></span>
+          <span class="line line-bottom"></span>
+          <span class="dot"></span>
+        </div>
+        <div class="body">
+          <div class="head">
+            <span class="headline ${this._hasHeadline ? "" : "empty"}">
+              <slot name="headline" @slotchange=${this._onHeadlineSlotChange}></slot>
+            </span>
+            ${this.datetime
+            ? html `<relative-time class="time" datetime=${this.datetime}></relative-time>`
+            : nothing}
+          </div>
+          <div class="content"><slot></slot></div>
+        </div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property()
+], TimelineEntry.prototype, "datetime", void 0);
+__decorate([
+    state()
+], TimelineEntry.prototype, "_hasHeadline", void 0);
+TimelineEntry = __decorate([
+    customElement("timeline-entry")
+], TimelineEntry);
+export { TimelineEntry };
+//# sourceMappingURL=timeline-entry.js.map

package/dist/timeline-entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-entry.js","sourceRoot":"","sources":["../src/timeline-entry.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,oBAAoB,CAAC;AAC5B,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC;;;;;;;;;;;GAWG;AAEI,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QACL,uEAAuE;QAC3D,aAAQ,GAAkB,IAAI,CAAC;QAE3C,gEAAgE;QAC/C,iBAAY,GAAG,KAAK,CAAC;IAoIxC,CAAC;aAlIiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6FF;KACF,AAhGqB,CAgGpB;IAEO,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC;YAAE,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IACxE,CAAC;IAED,6EAA6E;IACrE,qBAAqB,CAAC,KAAY;QACxC,IAAI,CAAC,YAAY,GAAI,KAAK,CAAC,MAA0B,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;IACpG,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;;;;;;;;;oCASqB,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO;kDAClB,IAAI,CAAC,qBAAqB;;cAE9D,IAAI,CAAC,QAAQ;YACb,CAAC,CAAC,IAAI,CAAA,wCAAwC,IAAI,CAAC,QAAQ,mBAAmB;YAC9E,CAAC,CAAC,OAAO;;;;;KAKlB,CAAC;IACJ,CAAC;CACF,CAAA;AAvIa;IAAX,QAAQ,EAAE;+CAAgC;AAG1B;IAAhB,KAAK,EAAE;mDAA8B;AAL3B,aAAa;IADzB,aAAa,CAAC,gBAAgB,CAAC;GACnB,aAAa,CAyIzB","sourcesContent":["import { LitElement, css, html, nothing } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport \"./relative-time.js\";\nimport { tokens } from \"./tokens.js\";\n\n/**\n * One event on a `timeline-container`: a dot on the vertical line, an optional\n * headline, a relative timestamp (\"3 hours ago\"), and freely nested content.\n * The connecting line is drawn here — its segment above the dot is hidden on\n * the first entry and the segment below is hidden on the last, so the line caps\n * exactly at the first and last dots. Only meaningful inside a\n * `timeline-container`; demonstrated through it.\n *\n * @element timeline-entry\n * @slot headline - Optional headline/title for the event.\n * @slot - The event content; nest any elements here.\n */\n@customElement(\"timeline-entry\")\nexport class TimelineEntry extends LitElement {\n  /** ISO 8601 or SQLite datetime string, rendered as a relative time. */\n  @property() datetime: string | null = null;\n\n  /** Whether the headline slot currently has assigned content. */\n  @state() private _hasHeadline = false;\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      .entry {\n        display: flex;\n        gap: 0.75rem;\n      }\n      .rail {\n        position: relative;\n        flex: 0 0 auto;\n        width: 0.75rem;\n      }\n      .line {\n        position: absolute;\n        left: 50%;\n        width: 2px;\n        transform: translateX(-50%);\n        background: var(--ui-border, #e2e8f0);\n      }\n      .line-top {\n        top: 0;\n        height: 0.5rem;\n      }\n      .line-bottom {\n        top: 0.5rem;\n        bottom: 0;\n      }\n      .dot {\n        position: absolute;\n        top: 0.125rem;\n        left: 50%;\n        width: 0.75rem;\n        height: 0.75rem;\n        transform: translateX(-50%);\n        border-radius: 9999px;\n        /* Same primary-token gradient as map-circle/user-avatar, lighter on top. */\n        background: linear-gradient(\n          to bottom,\n          color-mix(in srgb, var(--ui-primary, #4f46e5) 70%, #ffffff) 0%,\n          color-mix(in srgb, var(--ui-primary, #4f46e5) 70%, #000000) 100%\n        );\n      }\n      :host(:first-child) .line-top {\n        display: none;\n      }\n      :host(:last-child) .line-bottom {\n        display: none;\n      }\n      .body {\n        flex: 1 1 auto;\n        min-width: 0;\n        padding-bottom: 1.5rem;\n      }\n      :host(:last-child) .body {\n        padding-bottom: 0;\n      }\n      .head {\n        display: flex;\n        align-items: baseline;\n        gap: 0.5rem;\n        flex-wrap: wrap;\n      }\n      .headline {\n        font-weight: var(--ui-font-weight-semibold, 600);\n        font-size: var(--ui-font-size, 0.875rem);\n        line-height: var(--ui-line-height-tight, 1.25);\n        color: var(--ui-text, #0f172a);\n      }\n      .headline.empty {\n        display: none;\n      }\n      .time {\n        font-size: var(--ui-font-size-sm, 0.75rem);\n        line-height: var(--ui-line-height-tight, 1.25);\n        color: var(--ui-text-muted, #64748b);\n      }\n      .content {\n        margin-top: 0.25rem;\n        font-size: var(--ui-font-size, 0.875rem);\n        line-height: var(--ui-line-height-normal, 1.5);\n        color: var(--ui-text, #0f172a);\n      }\n    `,\n  ];\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (!this.hasAttribute(\"role\")) this.setAttribute(\"role\", \"listitem\");\n  }\n\n  /** Collapses the headline when nothing is slotted so the time sits alone. */\n  private _onHeadlineSlotChange(event: Event): void {\n    this._hasHeadline = (event.target as HTMLSlotElement).assignedNodes({ flatten: true }).length > 0;\n  }\n\n  override render() {\n    return html`\n      <div class=\"entry\">\n        <div class=\"rail\" aria-hidden=\"true\">\n          <span class=\"line line-top\"></span>\n          <span class=\"line line-bottom\"></span>\n          <span class=\"dot\"></span>\n        </div>\n        <div class=\"body\">\n          <div class=\"head\">\n            <span class=\"headline ${this._hasHeadline ? \"\" : \"empty\"}\">\n              <slot name=\"headline\" @slotchange=${this._onHeadlineSlotChange}></slot>\n            </span>\n            ${this.datetime\n              ? html`<relative-time class=\"time\" datetime=${this.datetime}></relative-time>`\n              : nothing}\n          </div>\n          <div class=\"content\"><slot></slot></div>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"timeline-entry\": TimelineEntry;\n  }\n}\n"]}

package/docs/action-bar.md

@@ -0,0 +1,41 @@
+# `<action-bar>`
+
+Toolbar that sits directly above a list or table: a left cluster for
+search and filters and a right cluster for record actions (create, delete,
+bulk actions). It's a presentational layout container only — drop any
+controls (`autocomplete-input`, `multi-select`, `ui-button`, …) into the
+`start` and `end` slots; the bar owns none of their behavior and adds no
+search field of its own. The two clusters wrap onto separate rows when the
+bar is too narrow.
+
+## Install
+
+```js
+import "@f-ewald/components/action-bar.js";
+```
+
+## Usage
+
+```html
+<action-bar>
+  <autocomplete-input slot="start" placeholder="Search…"></autocomplete-input>
+  <ui-button slot="end" variant="secondary">Delete</ui-button>
+  <ui-button slot="end" variant="primary">Create</ui-button>
+</action-bar>
+```
+
+## Attributes / properties
+
+_None._
+
+## Events
+
+_None._
+
+## Slots
+
+_None._
+
+## CSS custom properties
+
+_None._

package/docs/app-shell.md

@@ -0,0 +1,85 @@
+# `<app-shell>`
+
+The dashboard page shell: a slot-based CSS-grid backbone that arranges a
+full-height sidebar, a top bar, the main content, an optional right-hand
+detail column, and an optional footer. It owns the responsive behavior so
+consumers don't re-implement it — above the shared 48rem breakpoint the
+sidebar collapses to an icon rail and the detail region is an inline column;
+at or below it the sidebar becomes an off-canvas drawer and the detail region
+an overlay, both dismissed by a scrim or Escape.
+
+Widths are tunable per instance via `--component-sidebar-width` (16rem),
+`--component-sidebar-rail-width` (3.5rem), and `--component-topbar-height`
+(3rem); the detail column reuses the 20rem/25rem panel widths. The main
+content area is white by default — override it with
+`--component-main-background`. Give the shell a height (e.g. `height: 100vh`)
+so the sidebar and main can size and scroll.
+
+The built-in top-bar button toggles the sidebar, and so does pressing `[`
+anywhere on the page (ignored while typing in a text field or with a
+modifier held). Hovering or keyboard-focusing the toggle reveals a tooltip
+naming the action and its `[` shortcut — the shortcut is not shown as
+permanent chrome.
+
+## Install
+
+```js
+import "@f-ewald/components/app-shell.js";
+```
+
+## Usage
+
+```html
+<app-shell detail-open style="height: 100vh">
+  <app-sidebar slot="sidebar">
+    <a href="/dashboard" aria-current="page" aria-label="Dashboard">
+      <!-- icon --><span style="display: var(--app-sidebar-label, inline)">Dashboard</span>
+    </a>
+  </app-sidebar>
+  <page-header slot="topbar" heading="Members"></page-header>
+  <action-bar>
+    <autocomplete-input slot="start" placeholder="Search…"></autocomplete-input>
+    <ui-button slot="end" variant="primary">Create</ui-button>
+  </action-bar>
+  <data-table></data-table>
+  <div slot="detail">Selected record…</div>
+  <pagination-nav slot="footer" total-pages="5"></pagination-nav>
+</app-shell>
+```
+
+## Attributes / properties
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `sidebarCollapsed` | `sidebar-collapsed` | `boolean` | `false` | Collapses the sidebar to an icon rail on desktop. |
+| `detailOpen` | `detail-open` | `boolean` | `false` | Shows the right-hand detail region (inline column, or overlay on mobile). |
+| `detailWidth` | `detail-width` | `"compact" | "comfortable"` | `"compact"` | Detail width: `compact` (20rem) or `comfortable` (25rem). |
+
+## Events
+
+| Event | Description |
+| --- | --- |
+| `sidebar-toggle` | The built-in toggle changed the sidebar state. |
+| `detail-close` | The scrim or Escape dismissed the mobile detail overlay. |
+
+## Slots
+
+_None._
+
+## CSS custom properties
+
+| Custom property |
+| --- |
+| `--ui-border` |
+| `--ui-focus-ring` |
+| `--ui-font-size-sm` |
+| `--ui-line-height-tight` |
+| `--ui-on-accent` |
+| `--ui-overlay` |
+| `--ui-radius-sm` |
+| `--ui-shadow` |
+| `--ui-shadow-lg` |
+| `--ui-surface` |
+| `--ui-surface-muted` |
+| `--ui-text-muted` |
+| `--ui-tooltip` |

package/docs/app-sidebar.md

@@ -0,0 +1,69 @@
+# `<app-sidebar>`
+
+Collapsible navigation sidebar for the `app-shell` sidebar slot. It is
+deliberately presentational and router-agnostic: the consumer supplies the
+nav items as plain `<a>`/`<button>` elements (each an icon followed by a
+label), optional `<p>` group headings, and marks the active item with
+`aria-current="page"`. The sidebar styles them, tracks hover/active/focus,
+and — in collapsed "rail" mode — centers the icons and hides the labels.
+
+Rail mode is driven by the `collapsed` attribute (the parent `app-shell`
+toggles it). Labels are hidden by the inherited `--app-sidebar-label` custom
+property, so each label element should read it, e.g.
+`<span style="display: var(--app-sidebar-label, inline)">Reports</span>`;
+keep an `aria-label` on the item so its accessible name survives collapse.
+The sidebar fills the width and height of its container — `app-shell` owns
+the actual rail/expanded width.
+
+## Install
+
+```js
+import "@f-ewald/components/app-sidebar.js";
+```
+
+## Usage
+
+```html
+<app-sidebar>
+  <a href="/dashboard" aria-current="page" aria-label="Dashboard">
+    <!-- icon --><span style="display: var(--app-sidebar-label, inline)">Dashboard</span>
+  </a>
+  <a href="/members" aria-label="Members">
+    <!-- icon --><span style="display: var(--app-sidebar-label, inline)">Members</span>
+  </a>
+</app-sidebar>
+```
+
+## Attributes / properties
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `collapsed` | `collapsed` | `boolean` | `false` | Collapses the sidebar to an icon rail (centers icons, hides labels). |
+
+## Events
+
+_None._
+
+## Slots
+
+_None._
+
+## CSS custom properties
+
+| Custom property |
+| --- |
+| `--ui-border` |
+| `--ui-focus-ring` |
+| `--ui-font` |
+| `--ui-font-size-sm` |
+| `--ui-font-size-xs` |
+| `--ui-font-weight-medium` |
+| `--ui-font-weight-semibold` |
+| `--ui-line-height-tight` |
+| `--ui-primary` |
+| `--ui-radius-sm` |
+| `--ui-surface` |
+| `--ui-surface-muted` |
+| `--ui-text` |
+| `--ui-text-muted` |
+| `--ui-tracking-wide` |