@f-ewald/components 1.19.0 → 1.20.0

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._

package/llms.txt

@@ -1120,6 +1120,37 @@ Example:
 </script>
 ```
 
+## <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.
+
+Import: `import "@f-ewald/components/markdown-editor.js";`
+
+Properties: `value` (attribute `value`) : string, default ""; `rows` (attribute `rows`) : number, default 12; `placeholder` (attribute `placeholder`) : string, default ""
+Events: `input`, `change`
+CSS custom properties: `--ui-font`, `--ui-font-size-sm`, `--ui-font-weight-medium`, `--ui-line-height-normal`, `--ui-text`, `--ui-text-muted`
+
+Example:
+```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>
+```
+
 ## <markdown-view>
 
 Renders a markdown string as sanitized, styled HTML — headings, lists,
@@ -1682,6 +1713,54 @@ Example:
 <status-pill label="Blocked" color="danger"></status-pill>
 ```
 
+## <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.
+
+Import: `import "@f-ewald/components/tab-bar.js";`
+
+Properties: `label` (attribute `label`) : string, default ""
+Events: `change`
+CSS custom properties: `--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`
+
+Example:
+```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>
+```
+
+## <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.
+
+Import: `import "@f-ewald/components/tab-item.js";`
+
+Properties: `label` (attribute `label`) : string, default ""; `value` (attribute `value`) : string, default ""; `selected` (attribute `selected`) : boolean, default false
+Events: none
+CSS custom properties: none
+
+Example:
+```html
+<tab-item></tab-item>
+```
+
 ## <text-area>
 
 Plain multi-line text field — a thin, tokenized wrapper around a native

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@f-ewald/components",
   "private": false,
-  "version": "1.19.0",
+  "version": "1.20.0",
   "description": "A collection of universally usable web components for various tasks.",
   "type": "module",
   "main": "dist/index.js",
@@ -67,6 +67,7 @@
     "lit": "^3.3.3",
     "mapbox-gl": "^3.9.0",
     "marked": "^18.0.7",
+    "yaml": "^2.9.0",
     "zod": "^4.4.3"
   },
   "publishConfig": {