@f-ewald/components 1.19.0 → 1.21.1

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,
@@ -1665,6 +1696,33 @@ Example:
 <stat-meter label="GPU" percent="88" color="#dc2626"></stat-meter>
 ```
 
+## <status-banner>
+
+Full-width, app-level status bar for a persistent condition — "Reconnecting…",
+"Read-only mode", "New version available". Unlike `toast-notification` (which
+is transient, imperative, and stacks in a corner) this stays put for as long
+as the condition holds, so the consumer controls its presence by rendering it
+or not.
+
+Colors mirror `status-pill`: a tinted background with accent-colored text.
+Announced to assistive tech via `role="status"` (or `role="alert"` for the
+`danger` variant, matching `toast-notification`'s split).
+
+Import: `import "@f-ewald/components/status-banner.js";`
+
+Properties: `variant` (attribute `variant`) : StatusBannerVariant, default "info"; `icon` (JS property only) : TemplateResult | null, default null
+Events: none
+CSS custom properties: `--ui-danger`, `--ui-font`, `--ui-font-size-sm`, `--ui-info`, `--ui-line-height-normal`, `--ui-success`, `--ui-text-muted`, `--ui-warning`
+
+Example:
+```html
+<status-banner variant="warning">Reconnecting… — data may be stale</status-banner>
+<status-banner variant="info">
+  A new version is available.
+  <button slot="actions">Reload</button>
+</status-banner>
+```
+
 ## <status-pill>
 
 Small colored status pill, optionally with a spinning icon — for task/run
@@ -1682,6 +1740,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.21.1",
   "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": {