@f-ewald/components 1.18.0 → 1.20.0

package/dist/tab-bar.js

@@ -0,0 +1,233 @@
+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 { repeat } from "lit/directives/repeat.js";
+import { tokens } from "./tokens.js";
+let instanceCount = 0;
+/**
+ * WAI-ARIA tabs pattern (automatic activation, roving tabindex) driving a
+ * strip of declarative `tab-item` children. `tab-bar` renders the `role="tab"`
+ * button strip itself, reading `label`/`value`/`selected` off each slotted
+ * `tab-item`; each `tab-item` owns its own visibility via its reflected
+ * `selected` attribute.
+ *
+ * The active tab's underline uses `--ui-primary`; a `--ui-border` line spans
+ * the full strip beneath every tab, standing in for the inactive state since
+ * this design system has no dedicated secondary accent color.
+ *
+ * @element tab-bar
+ * @slot - `tab-item` elements.
+ * @fires change - The active tab changed via click or keyboard; detail: `TabChangeDetail`.
+ */
+let TabBar = class TabBar extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Accessible name for the tablist (e.g. "Editor mode"). */
+        this.label = "";
+        this._version = 0;
+        this._uid = `tab-bar-${++instanceCount}`;
+    }
+    static { this.styles = [
+        tokens,
+        css `
+      :host {
+        display: block;
+      }
+      .tablist {
+        display: flex;
+        gap: 1rem;
+        border-bottom: 1px solid var(--ui-border, #e2e8f0);
+      }
+      .tab {
+        appearance: none;
+        background: none;
+        border: none;
+        border-bottom: 2px solid transparent;
+        margin-bottom: -1px;
+        min-height: 2rem;
+        padding: 0.5rem 0.25rem;
+        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-sm, 0.75rem);
+        font-weight: var(--ui-font-weight-medium, 500);
+        line-height: var(--ui-line-height-tight, 1.25);
+        color: var(--ui-text-muted, #64748b);
+        cursor: pointer;
+      }
+      .tab:hover {
+        color: var(--ui-text, #0f172a);
+      }
+      .tab[aria-selected="true"] {
+        color: var(--ui-text, #0f172a);
+        font-weight: var(--ui-font-weight-semibold, 600);
+        border-bottom-color: var(--ui-primary, #4f46e5);
+      }
+      .tab: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));
+      }
+      .panels {
+        margin-top: 1rem;
+      }
+      @media (forced-colors: active) {
+        .tab[aria-selected="true"] {
+          border-bottom-color: Highlight;
+        }
+        .tab:focus-visible {
+          outline: 2px solid CanvasText;
+          outline-offset: 2px;
+          box-shadow: none;
+        }
+      }
+    `,
+    ]; }
+    connectedCallback() {
+        super.connectedCallback();
+        this._observer ??= new MutationObserver(() => {
+            this._version++;
+            this._ensureSelection();
+        });
+        this._observer.observe(this, {
+            attributes: true,
+            attributeFilter: ["label", "value", "selected"],
+            childList: true,
+            subtree: true,
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._observer?.disconnect();
+        this._observer = undefined;
+    }
+    updated() {
+        this._tabItems.forEach((item, index) => {
+            item.setAttribute("aria-labelledby", this._tabButtonId(index));
+        });
+    }
+    _handleSlotChange() {
+        this._version++;
+        this._ensureSelection();
+    }
+    /** Defaults the first tab-item to selected if none was marked so by the consumer. */
+    _ensureSelection() {
+        const items = this._tabItems;
+        if (items.length > 0 && !items.some((item) => item.selected)) {
+            items[0].selected = true;
+        }
+    }
+    _currentIndex() {
+        const index = this._tabItems.findIndex((item) => item.selected);
+        return index === -1 ? 0 : index;
+    }
+    _tabButtonId(index) {
+        return `${this._uid}-tab-${index}`;
+    }
+    _select(index, options) {
+        const items = this._tabItems;
+        const target = items[index];
+        if (!target)
+            return;
+        const changed = !target.selected;
+        for (const item of items)
+            item.selected = item === target;
+        this._version++;
+        if (options?.focus)
+            this._focusButton(index);
+        if (changed) {
+            this.dispatchEvent(new CustomEvent("change", {
+                detail: { value: target.value || target.label, index },
+                bubbles: true,
+                composed: true,
+            }));
+        }
+    }
+    _focusButton(index) {
+        void this.updateComplete.then(() => {
+            this.shadowRoot?.querySelectorAll(".tab")[index]?.focus();
+        });
+    }
+    /** Arrow/Home/End roving-tabindex navigation with automatic activation. */
+    _onKeydown(event) {
+        const items = this._tabItems;
+        if (items.length === 0)
+            return;
+        const current = this._currentIndex();
+        let next;
+        switch (event.key) {
+            case "ArrowRight":
+            case "ArrowDown":
+                next = (current + 1) % items.length;
+                break;
+            case "ArrowLeft":
+            case "ArrowUp":
+                next = (current - 1 + items.length) % items.length;
+                break;
+            case "Home":
+                next = 0;
+                break;
+            case "End":
+                next = items.length - 1;
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+        this._select(next, { focus: true });
+    }
+    render() {
+        const items = this._tabItems ?? [];
+        const current = this._currentIndex();
+        return html `
+      <div
+        class="tablist"
+        role="tablist"
+        aria-label=${this.label || nothing}
+        @keydown=${this._onKeydown}
+      >
+        ${repeat(items, (item) => item, (item, index) => html `
+            <button
+              type="button"
+              class="tab"
+              role="tab"
+              id=${this._tabButtonId(index)}
+              aria-selected=${item.selected ? "true" : "false"}
+              aria-controls=${item.id}
+              tabindex=${index === current ? 0 : -1}
+              @click=${() => this._select(index)}
+            >
+              ${item.label}
+            </button>
+          `)}
+      </div>
+      <div class="panels"><slot @slotchange=${this._handleSlotChange}></slot></div>
+    `;
+    }
+};
+__decorate([
+    property()
+], TabBar.prototype, "label", void 0);
+__decorate([
+    queryAssignedElements({ selector: "tab-item" })
+], TabBar.prototype, "_tabItems", void 0);
+__decorate([
+    state()
+], TabBar.prototype, "_version", void 0);
+TabBar = __decorate([
+    customElement("tab-bar")
+], TabBar);
+export { TabBar };
+//# sourceMappingURL=tab-bar.js.map

package/dist/tab-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-bar.js","sourceRoot":"","sources":["../src/tab-bar.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 { repeat } from \"lit/directives/repeat.js\";\nimport { tokens } from \"./tokens.js\";\nimport { TabItem } from \"./tab-item.js\";\n\nlet instanceCount = 0;\n\n/** Fired when the active tab changes in response to user interaction. */\nexport interface TabChangeDetail {\n  /** The newly active `tab-item`'s `value` (falling back to its `label`). */\n  value: string;\n  /** Index of the newly active `tab-item` among its siblings. */\n  index: number;\n}\n\n/**\n * WAI-ARIA tabs pattern (automatic activation, roving tabindex) driving a\n * strip of declarative `tab-item` children. `tab-bar` renders the `role=\"tab\"`\n * button strip itself, reading `label`/`value`/`selected` off each slotted\n * `tab-item`; each `tab-item` owns its own visibility via its reflected\n * `selected` attribute.\n *\n * The active tab's underline uses `--ui-primary`; a `--ui-border` line spans\n * the full strip beneath every tab, standing in for the inactive state since\n * this design system has no dedicated secondary accent color.\n *\n * @element tab-bar\n * @slot - `tab-item` elements.\n * @fires change - The active tab changed via click or keyboard; detail: `TabChangeDetail`.\n */\n@customElement(\"tab-bar\")\nexport class TabBar extends LitElement {\n  /** Accessible name for the tablist (e.g. \"Editor mode\"). */\n  @property() label = \"\";\n\n  @queryAssignedElements({ selector: \"tab-item\" })\n  private readonly _tabItems!: TabItem[];\n\n  @state() private _version = 0;\n  private readonly _uid = `tab-bar-${++instanceCount}`;\n  private _observer?: MutationObserver;\n\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: block;\n      }\n      .tablist {\n        display: flex;\n        gap: 1rem;\n        border-bottom: 1px solid var(--ui-border, #e2e8f0);\n      }\n      .tab {\n        appearance: none;\n        background: none;\n        border: none;\n        border-bottom: 2px solid transparent;\n        margin-bottom: -1px;\n        min-height: 2rem;\n        padding: 0.5rem 0.25rem;\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-sm, 0.75rem);\n        font-weight: var(--ui-font-weight-medium, 500);\n        line-height: var(--ui-line-height-tight, 1.25);\n        color: var(--ui-text-muted, #64748b);\n        cursor: pointer;\n      }\n      .tab:hover {\n        color: var(--ui-text, #0f172a);\n      }\n      .tab[aria-selected=\"true\"] {\n        color: var(--ui-text, #0f172a);\n        font-weight: var(--ui-font-weight-semibold, 600);\n        border-bottom-color: var(--ui-primary, #4f46e5);\n      }\n      .tab: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      .panels {\n        margin-top: 1rem;\n      }\n      @media (forced-colors: active) {\n        .tab[aria-selected=\"true\"] {\n          border-bottom-color: Highlight;\n        }\n        .tab:focus-visible {\n          outline: 2px solid CanvasText;\n          outline-offset: 2px;\n          box-shadow: none;\n        }\n      }\n    `,\n  ];\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._observer ??= new MutationObserver(() => {\n      this._version++;\n      this._ensureSelection();\n    });\n    this._observer.observe(this, {\n      attributes: true,\n      attributeFilter: [\"label\", \"value\", \"selected\"],\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._observer?.disconnect();\n    this._observer = undefined;\n  }\n\n  protected override updated(): void {\n    this._tabItems.forEach((item, index) => {\n      item.setAttribute(\"aria-labelledby\", this._tabButtonId(index));\n    });\n  }\n\n  private _handleSlotChange(): void {\n    this._version++;\n    this._ensureSelection();\n  }\n\n  /** Defaults the first tab-item to selected if none was marked so by the consumer. */\n  private _ensureSelection(): void {\n    const items = this._tabItems;\n    if (items.length > 0 && !items.some((item) => item.selected)) {\n      items[0].selected = true;\n    }\n  }\n\n  private _currentIndex(): number {\n    const index = this._tabItems.findIndex((item) => item.selected);\n    return index === -1 ? 0 : index;\n  }\n\n  private _tabButtonId(index: number): string {\n    return `${this._uid}-tab-${index}`;\n  }\n\n  private _select(index: number, options?: { focus?: boolean }): void {\n    const items = this._tabItems;\n    const target = items[index];\n    if (!target) return;\n    const changed = !target.selected;\n    for (const item of items) item.selected = item === target;\n    this._version++;\n    if (options?.focus) this._focusButton(index);\n    if (changed) {\n      this.dispatchEvent(\n        new CustomEvent<TabChangeDetail>(\"change\", {\n          detail: { value: target.value || target.label, index },\n          bubbles: true,\n          composed: true,\n        }),\n      );\n    }\n  }\n\n  private _focusButton(index: number): void {\n    void this.updateComplete.then(() => {\n      this.shadowRoot?.querySelectorAll<HTMLButtonElement>(\".tab\")[index]?.focus();\n    });\n  }\n\n  /** Arrow/Home/End roving-tabindex navigation with automatic activation. */\n  private _onKeydown(event: KeyboardEvent): void {\n    const items = this._tabItems;\n    if (items.length === 0) return;\n    const current = this._currentIndex();\n    let next: number;\n    switch (event.key) {\n      case \"ArrowRight\":\n      case \"ArrowDown\":\n        next = (current + 1) % items.length;\n        break;\n      case \"ArrowLeft\":\n      case \"ArrowUp\":\n        next = (current - 1 + items.length) % items.length;\n        break;\n      case \"Home\":\n        next = 0;\n        break;\n      case \"End\":\n        next = items.length - 1;\n        break;\n      default:\n        return;\n    }\n    event.preventDefault();\n    this._select(next, { focus: true });\n  }\n\n  override render() {\n    const items = this._tabItems ?? [];\n    const current = this._currentIndex();\n    return html`\n      <div\n        class=\"tablist\"\n        role=\"tablist\"\n        aria-label=${this.label || nothing}\n        @keydown=${this._onKeydown}\n      >\n        ${repeat(\n          items,\n          (item) => item,\n          (item, index) => html`\n            <button\n              type=\"button\"\n              class=\"tab\"\n              role=\"tab\"\n              id=${this._tabButtonId(index)}\n              aria-selected=${item.selected ? \"true\" : \"false\"}\n              aria-controls=${item.id}\n              tabindex=${index === current ? 0 : -1}\n              @click=${() => this._select(index)}\n            >\n              ${item.label}\n            </button>\n          `,\n        )}\n      </div>\n      <div class=\"panels\"><slot @slotchange=${this._handleSlotChange}></slot></div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"tab-bar\": TabBar;\n  }\n}\n"]}

package/dist/tab-item.d.ts

@@ -0,0 +1,27 @@
+import { LitElement } from "lit";
+/**
+ * A single labeled panel inside a `tab-bar`. Renders its default slot as an
+ * ARIA `tabpanel`, shown or hidden based on `selected` — `tab-bar` reads
+ * `label`/`value` to build its tab strip and toggles `selected` on the
+ * active panel.
+ *
+ * @element tab-item
+ * @slot - Panel content, shown only while `selected`.
+ */
+export declare class TabItem extends LitElement {
+    /** Text shown in the tab-bar's tab button for this panel. */
+    label: string;
+    /** Stable identifier reported in `tab-bar`'s `change` event; defaults to `label`. */
+    value: string;
+    /** Whether this panel is the active one; `tab-bar` owns this. */
+    selected: boolean;
+    static styles: import("lit").CSSResult[];
+    connectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tab-item": TabItem;
+    }
+}
+//# sourceMappingURL=tab-item.d.ts.map

package/dist/tab-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-item.d.ts","sourceRoot":"","sources":["../src/tab-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAM5C;;;;;;;;GAQG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACrC,6DAA6D;IACjD,KAAK,SAAM;IAEvB,qFAAqF;IACzE,KAAK,SAAM;IAEvB,iEAAiE;IACrB,QAAQ,UAAS;IAE7D,OAAgB,MAAM,4BAUpB;IAEO,iBAAiB,IAAI,IAAI,CAOjC;IAEQ,MAAM,yCAEd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

package/dist/tab-item.js

@@ -0,0 +1,67 @@
+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, property } from "lit/decorators.js";
+import { tokens } from "./tokens.js";
+let instanceCount = 0;
+/**
+ * A single labeled panel inside a `tab-bar`. Renders its default slot as an
+ * ARIA `tabpanel`, shown or hidden based on `selected` — `tab-bar` reads
+ * `label`/`value` to build its tab strip and toggles `selected` on the
+ * active panel.
+ *
+ * @element tab-item
+ * @slot - Panel content, shown only while `selected`.
+ */
+let TabItem = class TabItem extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Text shown in the tab-bar's tab button for this panel. */
+        this.label = "";
+        /** Stable identifier reported in `tab-bar`'s `change` event; defaults to `label`. */
+        this.value = "";
+        /** Whether this panel is the active one; `tab-bar` owns this. */
+        this.selected = false;
+    }
+    static { this.styles = [
+        tokens,
+        css `
+      :host {
+        display: block;
+      }
+      :host(:not([selected])) {
+        display: none;
+      }
+    `,
+    ]; }
+    connectedCallback() {
+        super.connectedCallback();
+        // Custom element constructors must not gain attributes (throws when
+        // created via document.createElement), so this is set on connect instead.
+        if (!this.id)
+            this.id = `tab-item-${++instanceCount}`;
+        this.setAttribute("role", "tabpanel");
+        this.setAttribute("tabindex", "0");
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+__decorate([
+    property()
+], TabItem.prototype, "label", void 0);
+__decorate([
+    property()
+], TabItem.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TabItem.prototype, "selected", void 0);
+TabItem = __decorate([
+    customElement("tab-item")
+], TabItem);
+export { TabItem };
+//# sourceMappingURL=tab-item.js.map

package/dist/tab-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-item.js","sourceRoot":"","sources":["../src/tab-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,IAAI,aAAa,GAAG,CAAC,CAAC;AAEtB;;;;;;;;GAQG;AAEI,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;QACL,6DAA6D;QACjD,UAAK,GAAG,EAAE,CAAC;QAEvB,qFAAqF;QACzE,UAAK,GAAG,EAAE,CAAC;QAEvB,iEAAiE;QACrB,aAAQ,GAAG,KAAK,CAAC;IA0B/D,CAAC;aAxBiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;KAOF;KACF,AAVqB,CAUpB;IAEO,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,oEAAoE;QACpE,0EAA0E;QAC1E,IAAI,CAAC,IAAI,CAAC,EAAE;YAAE,IAAI,CAAC,EAAE,GAAG,YAAY,EAAE,aAAa,EAAE,CAAC;QACtD,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QACtC,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;IACrC,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;CACF,CAAA;AAhCa;IAAX,QAAQ,EAAE;sCAAY;AAGX;IAAX,QAAQ,EAAE;sCAAY;AAGqB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAAkB;AARlD,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CAkCnB","sourcesContent":["import { LitElement, css, html } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { tokens } from \"./tokens.js\";\n\nlet instanceCount = 0;\n\n/**\n * A single labeled panel inside a `tab-bar`. Renders its default slot as an\n * ARIA `tabpanel`, shown or hidden based on `selected` — `tab-bar` reads\n * `label`/`value` to build its tab strip and toggles `selected` on the\n * active panel.\n *\n * @element tab-item\n * @slot - Panel content, shown only while `selected`.\n */\n@customElement(\"tab-item\")\nexport class TabItem extends LitElement {\n  /** Text shown in the tab-bar's tab button for this panel. */\n  @property() label = \"\";\n\n  /** Stable identifier reported in `tab-bar`'s `change` event; defaults to `label`. */\n  @property() value = \"\";\n\n  /** Whether this panel is the active one; `tab-bar` owns this. */\n  @property({ type: Boolean, reflect: true }) selected = false;\n\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: block;\n      }\n      :host(:not([selected])) {\n        display: none;\n      }\n    `,\n  ];\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    // Custom element constructors must not gain attributes (throws when\n    // created via document.createElement), so this is set on connect instead.\n    if (!this.id) this.id = `tab-item-${++instanceCount}`;\n    this.setAttribute(\"role\", \"tabpanel\");\n    this.setAttribute(\"tabindex\", \"0\");\n  }\n\n  override render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"tab-item\": TabItem;\n  }\n}\n"]}

package/dist/utils/front-matter.d.ts

@@ -0,0 +1,19 @@
+/** Result of splitting a document into its optional front matter and body. */
+export interface FrontMatterResult {
+    /** Parsed front matter key-value pairs, or `null` if none was found. */
+    data: Record<string, unknown> | null;
+    /** The document text with the front matter block (if any) removed. */
+    body: string;
+}
+/**
+ * Splits a leading `---`-delimited YAML front matter block off a document.
+ *
+ * Only treats the block as front matter if it parses as a non-empty plain
+ * object — this avoids misreading a markdown horizontal rule (also `---`) as
+ * front matter, and tolerates malformed YAML typed mid-edit by falling back
+ * to treating the whole document as plain body text.
+ */
+export declare function parseFrontMatter(text: string): FrontMatterResult;
+/** Stringifies a parsed front matter value for key-value table display. */
+export declare function formatFrontMatterValue(value: unknown): string;
+//# sourceMappingURL=front-matter.d.ts.map

package/dist/utils/front-matter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"front-matter.d.ts","sourceRoot":"","sources":["../../src/utils/front-matter.ts"],"names":[],"mappings":"AAEA,8EAA8E;AAC9E,MAAM,WAAW,iBAAiB;IAChC,wEAAwE;IACxE,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAC;IACrC,sEAAsE;IACtE,IAAI,EAAE,MAAM,CAAC;CACd;AAID;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,GAAG,iBAAiB,CAkBhE;AAED,2EAA2E;AAC3E,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAI7D"}

package/dist/utils/front-matter.js

@@ -0,0 +1,37 @@
+import { parse } from "yaml";
+const FRONT_MATTER_PATTERN = /^---\r?\n([\s\S]*?)\r?\n---\r?\n?/;
+/**
+ * Splits a leading `---`-delimited YAML front matter block off a document.
+ *
+ * Only treats the block as front matter if it parses as a non-empty plain
+ * object — this avoids misreading a markdown horizontal rule (also `---`) as
+ * front matter, and tolerates malformed YAML typed mid-edit by falling back
+ * to treating the whole document as plain body text.
+ */
+export function parseFrontMatter(text) {
+    const match = text.match(FRONT_MATTER_PATTERN);
+    if (!match)
+        return { data: null, body: text };
+    try {
+        const parsed = parse(match[1]);
+        if (parsed === null ||
+            typeof parsed !== "object" ||
+            Array.isArray(parsed) ||
+            Object.keys(parsed).length === 0) {
+            return { data: null, body: text };
+        }
+        return { data: parsed, body: text.slice(match[0].length) };
+    }
+    catch {
+        return { data: null, body: text };
+    }
+}
+/** Stringifies a parsed front matter value for key-value table display. */
+export function formatFrontMatterValue(value) {
+    if (Array.isArray(value))
+        return value.map(formatFrontMatterValue).join(", ");
+    if (value !== null && typeof value === "object")
+        return JSON.stringify(value);
+    return String(value);
+}
+//# sourceMappingURL=front-matter.js.map

package/dist/utils/front-matter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"front-matter.js","sourceRoot":"","sources":["../../src/utils/front-matter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,MAAM,CAAC;AAU7B,MAAM,oBAAoB,GAAG,mCAAmC,CAAC;AAEjE;;;;;;;GAOG;AACH,MAAM,UAAU,gBAAgB,CAAC,IAAY;IAC3C,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,CAAC;IAC/C,IAAI,CAAC,KAAK;QAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;IAE9C,IAAI,CAAC;QACH,MAAM,MAAM,GAAY,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;QACxC,IACE,MAAM,KAAK,IAAI;YACf,OAAO,MAAM,KAAK,QAAQ;YAC1B,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC;YACrB,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,MAAM,KAAK,CAAC,EAChC,CAAC;YACD,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;QACpC,CAAC;QACD,OAAO,EAAE,IAAI,EAAE,MAAiC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC;IACxF,CAAC;IAAC,MAAM,CAAC;QACP,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;IACpC,CAAC;AACH,CAAC;AAED,2EAA2E;AAC3E,MAAM,UAAU,sBAAsB,CAAC,KAAc;IACnD,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;QAAE,OAAO,KAAK,CAAC,GAAG,CAAC,sBAAsB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC9E,IAAI,KAAK,KAAK,IAAI,IAAI,OAAO,KAAK,KAAK,QAAQ;QAAE,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IAC9E,OAAO,MAAM,CAAC,KAAK,CAAC,CAAC;AACvB,CAAC","sourcesContent":["import { parse } from \"yaml\";\n\n/** Result of splitting a document into its optional front matter and body. */\nexport interface FrontMatterResult {\n  /** Parsed front matter key-value pairs, or `null` if none was found. */\n  data: Record<string, unknown> | null;\n  /** The document text with the front matter block (if any) removed. */\n  body: string;\n}\n\nconst FRONT_MATTER_PATTERN = /^---\\r?\\n([\\s\\S]*?)\\r?\\n---\\r?\\n?/;\n\n/**\n * Splits a leading `---`-delimited YAML front matter block off a document.\n *\n * Only treats the block as front matter if it parses as a non-empty plain\n * object — this avoids misreading a markdown horizontal rule (also `---`) as\n * front matter, and tolerates malformed YAML typed mid-edit by falling back\n * to treating the whole document as plain body text.\n */\nexport function parseFrontMatter(text: string): FrontMatterResult {\n  const match = text.match(FRONT_MATTER_PATTERN);\n  if (!match) return { data: null, body: text };\n\n  try {\n    const parsed: unknown = parse(match[1]);\n    if (\n      parsed === null ||\n      typeof parsed !== \"object\" ||\n      Array.isArray(parsed) ||\n      Object.keys(parsed).length === 0\n    ) {\n      return { data: null, body: text };\n    }\n    return { data: parsed as Record<string, unknown>, body: text.slice(match[0].length) };\n  } catch {\n    return { data: null, body: text };\n  }\n}\n\n/** Stringifies a parsed front matter value for key-value table display. */\nexport function formatFrontMatterValue(value: unknown): string {\n  if (Array.isArray(value)) return value.map(formatFrontMatterValue).join(\", \");\n  if (value !== null && typeof value === \"object\") return JSON.stringify(value);\n  return String(value);\n}\n"]}

package/docs/design-language.md

@@ -33,6 +33,11 @@ defines the details used when creating or reviewing components.
 - White map rings, image-overlay controls, avatar foregrounds, and celebratory
   confetti may remain literal when their contrast is intentionally independent
   of the surrounding theme.
+- There is no dedicated secondary accent color. `tab-bar`'s inactive-tab
+  indicator reuses `--ui-border` (a shared line beneath the whole strip, with
+  the active tab's `--ui-primary` line drawn on top of it) rather than
+  introducing a new token — the same precedent as `ui-button`'s `secondary`
+  variant, which is realized via `--ui-border`/`--ui-text-muted`, not a hue.
 
 ## Typography
 
@@ -125,6 +130,10 @@ literal values are migrated onto them.
 - Modal/centered overlays expose a name, `role="dialog"`, `aria-modal`, initial
   focus, Escape behavior, focus containment, and focus restoration.
 - Collapsible controls expose `aria-expanded` and `aria-controls`.
+- Tab strips (`tab-bar`/`tab-item`) follow the WAI-ARIA tabs pattern:
+  `role="tablist"/"tab"/"tabpanel"`, `aria-selected`, roving tabindex, and
+  automatic activation (arrow keys both move focus and select; Home/End jump
+  to the first/last tab).
 - Charts expose a concise accessible data summary.
 - Decorative icons/keycaps inside already-labelled controls are hidden from
   assistive technology; standalone equivalents expose their own name.
@@ -135,7 +144,8 @@ literal values are migrated onto them.
 - Metadata-only tags may omit standalone playground sections when their full
   behavior is demonstrated through a parent:
   `calendar-entry`, `gallery-item`, `gallery-item-variant`, `kanban-card`,
-  `kanban-column`, and `timeline-entry` (shown through `timeline-container`).
+  `kanban-column`, `tab-item` (shown through `tab-bar`), and `timeline-entry`
+  (shown through `timeline-container`).
 - Styleless inline formatters may omit empty `static styles`/token imports:
   `distance-value`, `live-timer`, `relative-time`, and `roman-numeral`.
 - Domain visuals may deliberately diverge in geometry and data color, but their

package/docs/markdown-editor.md

@@ -0,0 +1,61 @@
+# `<markdown-editor>`
+
+GitHub-style markdown editor: a "Write" tab holding a plain textarea and a
+"Preview" tab rendering the markdown body (via `markdown-view`). Leading
+YAML front matter (a `---`-delimited block) is detected, parsed, and shown
+as a key-value table above the rendered body rather than as raw text.
+
+## Install
+
+```js
+import "@f-ewald/components/markdown-editor.js";
+```
+
+## Usage
+
+```html
+<markdown-editor></markdown-editor>
+<script type="module">
+  const el = document.querySelector("markdown-editor");
+  el.value = `---
+title: Weekly status
+author: Ada Lovelace
+tags: [engineering, updates]
+---
+
+# Weekly status
+
+Some **markdown** content here.`;
+  el.addEventListener("input", (e) => console.log(e.detail.value));
+</script>
+```
+
+## Attributes / properties
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `value` | `value` | `string` | `""` | Full raw document text, including any front matter block. |
+| `rows` | `rows` | `number` | `12` | Visible row count for the Write tab's textarea. |
+| `placeholder` | `placeholder` | `string` | `""` | Placeholder text shown when the Write tab is empty. |
+
+## Events
+
+| Event | Description |
+| --- | --- |
+| `input` | Fires on every keystroke in the Write tab; detail: { value: string }. |
+| `change` | Native change semantics (on blur, if the value changed); detail: { value: string }. |
+
+## Slots
+
+_None._
+
+## CSS custom properties
+
+| Custom property |
+| --- |
+| `--ui-font` |
+| `--ui-font-size-sm` |
+| `--ui-font-weight-medium` |
+| `--ui-line-height-normal` |
+| `--ui-text` |
+| `--ui-text-muted` |

package/docs/tab-bar.md

@@ -0,0 +1,64 @@
+# `<tab-bar>`
+
+WAI-ARIA tabs pattern (automatic activation, roving tabindex) driving a
+strip of declarative `tab-item` children. `tab-bar` renders the `role="tab"`
+button strip itself, reading `label`/`value`/`selected` off each slotted
+`tab-item`; each `tab-item` owns its own visibility via its reflected
+`selected` attribute.
+
+The active tab's underline uses `--ui-primary`; a `--ui-border` line spans
+the full strip beneath every tab, standing in for the inactive state since
+this design system has no dedicated secondary accent color.
+
+## Install
+
+```js
+import "@f-ewald/components/tab-bar.js";
+```
+
+## Usage
+
+```html
+<tab-bar label="Project sections">
+  <tab-item label="Overview" value="overview" selected>Overview content</tab-item>
+  <tab-item label="Activity" value="activity">Activity content</tab-item>
+  <tab-item label="Settings" value="settings">Settings content</tab-item>
+</tab-bar>
+<script type="module">
+  document.querySelector("tab-bar").addEventListener("change", (e) => console.log(e.detail.value));
+</script>
+```
+
+## Attributes / properties
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `label` | `label` | `string` | `""` | Accessible name for the tablist (e.g. "Editor mode"). |
+
+## Events
+
+| Event | Description |
+| --- | --- |
+| `change` | The active tab changed via click or keyboard; detail: `TabChangeDetail`. |
+
+## Slots
+
+| Slot | Description |
+| --- | --- |
+| `(default)` | `tab-item` elements. |
+
+## CSS custom properties
+
+| Custom property |
+| --- |
+| `--ui-border` |
+| `--ui-focus-ring` |
+| `--ui-font` |
+| `--ui-font-size-sm` |
+| `--ui-font-weight-medium` |
+| `--ui-font-weight-semibold` |
+| `--ui-line-height-tight` |
+| `--ui-primary` |
+| `--ui-radius-sm` |
+| `--ui-text` |
+| `--ui-text-muted` |

package/docs/tab-item.md

@@ -0,0 +1,40 @@
+# `<tab-item>`
+
+A single labeled panel inside a `tab-bar`. Renders its default slot as an
+ARIA `tabpanel`, shown or hidden based on `selected` — `tab-bar` reads
+`label`/`value` to build its tab strip and toggles `selected` on the
+active panel.
+
+## Install
+
+```js
+import "@f-ewald/components/tab-item.js";
+```
+
+## Usage
+
+```html
+<tab-item></tab-item>
+```
+
+## Attributes / properties
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `label` | `label` | `string` | `""` | Text shown in the tab-bar's tab button for this panel. |
+| `value` | `value` | `string` | `""` | Stable identifier reported in `tab-bar`'s `change` event; defaults to `label`. |
+| `selected` | `selected` | `boolean` | `false` | Whether this panel is the active one; `tab-bar` owns this. |
+
+## Events
+
+_None._
+
+## Slots
+
+| Slot | Description |
+| --- | --- |
+| `(default)` | Panel content, shown only while `selected`. |
+
+## CSS custom properties
+
+_None._