@f-ewald/components 1.9.0 → 1.11.0

package/docs/button-group.md

@@ -0,0 +1,65 @@
+# `<button-group>`
+
+Single-select segmented control — a strip of buttons joined into one
+shared-border shape, for a small, persistent set of mutually exclusive
+choices (a view switcher, a theme picker) where the *currently selected*
+option should read as visually "pressed," not just checked. For many
+short, individually pill-shaped choices, use `radio-pills` instead. Wraps
+native radio inputs for keyboard/a11y and fires `change` rather than
+relying on form submission.
+
+## Install
+
+```js
+import "@f-ewald/components/button-group.js";
+```
+
+## Usage
+
+```html
+<button-group></button-group>
+<script type="module">
+  const el = document.querySelector("button-group");
+  el.options = [
+    { value: "list", label: "List" },
+    { value: "kanban", label: "Kanban" },
+  ];
+  el.value = "list";
+  el.addEventListener("change", (e) => console.log(e.detail.value));
+</script>
+```
+
+## Attributes / properties
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `options` | _(JS property only)_ | `ButtonGroupOption[]` | `[]` | Options to render, one segment each. |
+| `value` | `value` | `string` | `""` | Currently selected value. |
+| `disabled` | `disabled` | `boolean` | `false` | Disables every native radio in the group. |
+| `iconOnly` | `icon-only` | `boolean` | `false` | Hides labels visually (icons only) while keeping them as the accessible name. |
+
+## Events
+
+| Event | Description |
+| --- | --- |
+| `change` | A segment was selected; detail: { value }. |
+
+## Slots
+
+_None._
+
+## CSS custom properties
+
+| Custom property |
+| --- |
+| `--ui-border` |
+| `--ui-focus-ring` |
+| `--ui-font` |
+| `--ui-font-size-sm` |
+| `--ui-font-weight-medium` |
+| `--ui-line-height-tight` |
+| `--ui-on-accent` |
+| `--ui-primary` |
+| `--ui-radius-sm` |
+| `--ui-surface-muted` |
+| `--ui-text` |

package/docs/markdown-view.md

@@ -0,0 +1,73 @@
+# `<markdown-view>`
+
+Renders a markdown string as sanitized, styled HTML — headings, lists,
+code, tables, blockquotes, and links all get token-driven styling, with
+wide content (code blocks, tables) scrolling in its own container instead
+of widening the page.
+
+The markdown source is treated as untrusted: it is always parsed with
+`marked` and sanitized with `DOMPurify` before being injected, never
+rendered as-is.
+
+## Install
+
+```js
+import "@f-ewald/components/markdown-view.js";
+```
+
+## Usage
+
+```html
+<markdown-view></markdown-view>
+<script type="module">
+  const el = document.querySelector("markdown-view");
+  el.markdown = `## Release notes
+
+- Added **markdown-view**
+- Fixed a table alignment bug
+
+\`\`\`ts
+const x = 1;
+\`\`\`
+
+| Component | Status |
+| --- | --- |
+| markdown-view | New |
+
+See the [changelog](#markdown-view) for details.`;
+</script>
+```
+
+## Attributes / properties
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `markdown` | `markdown` | `string` | `""` | Raw markdown source to render. |
+
+## Events
+
+_None._
+
+## Slots
+
+_None._
+
+## CSS custom properties
+
+| Custom property |
+| --- |
+| `--ui-border` |
+| `--ui-font` |
+| `--ui-font-mono` |
+| `--ui-font-size` |
+| `--ui-font-size-lg` |
+| `--ui-font-size-sm` |
+| `--ui-font-weight-semibold` |
+| `--ui-line-height-normal` |
+| `--ui-line-height-tight` |
+| `--ui-primary` |
+| `--ui-primary-hover` |
+| `--ui-radius-sm` |
+| `--ui-surface-muted` |
+| `--ui-text` |
+| `--ui-text-muted` |

package/docs/ui-button.md

@@ -35,6 +35,7 @@ import "@f-ewald/components/ui-button.js";
 | Property | Attribute | Type | Default | Description |
 | --- | --- | --- | --- | --- |
 | `variant` | `variant` | `ButtonVariant` | `"primary"` | Visual weight. |
+| `size` | `size` | `"sm" | "md"` | `"md"` | Size — `sm` reduces height/padding/font-size one step below the default. |
 | `href` | `href` | `string | null` | `null` | Renders an `<a href="...">` instead of a `<button>` when set. |
 | `type` | `type` | `"button" | "submit" | "reset"` | `"button"` | Native button `type`. Ignored when `href` is set. |
 | `disabled` | `disabled` | `boolean` | `false` | Disables the control and dims it. |
@@ -61,6 +62,7 @@ _None._
 | `--ui-focus-ring` |
 | `--ui-font` |
 | `--ui-font-size-sm` |
+| `--ui-font-size-xs` |
 | `--ui-font-weight-medium` |
 | `--ui-line-height-tight` |
 | `--ui-on-accent` |

package/llms.txt

@@ -212,6 +212,36 @@ Example:
 </script>
 ```
 
+## <button-group>
+
+Single-select segmented control — a strip of buttons joined into one
+shared-border shape, for a small, persistent set of mutually exclusive
+choices (a view switcher, a theme picker) where the *currently selected*
+option should read as visually "pressed," not just checked. For many
+short, individually pill-shaped choices, use `radio-pills` instead. Wraps
+native radio inputs for keyboard/a11y and fires `change` rather than
+relying on form submission.
+
+Import: `import "@f-ewald/components/button-group.js";`
+
+Properties: `options` (JS property only) : ButtonGroupOption[], default []; `value` (attribute `value`) : string, default ""; `disabled` (attribute `disabled`) : boolean, default false; `iconOnly` (attribute `icon-only`) : boolean, default false
+Events: `change`
+CSS custom properties: `--ui-border`, `--ui-focus-ring`, `--ui-font`, `--ui-font-size-sm`, `--ui-font-weight-medium`, `--ui-line-height-tight`, `--ui-on-accent`, `--ui-primary`, `--ui-radius-sm`, `--ui-surface-muted`, `--ui-text`
+
+Example:
+```html
+<button-group></button-group>
+<script type="module">
+  const el = document.querySelector("button-group");
+  el.options = [
+    { value: "list", label: "List" },
+    { value: "kanban", label: "Kanban" },
+  ];
+  el.value = "list";
+  el.addEventListener("change", (e) => console.log(e.detail.value));
+</script>
+```
+
 ## <calendar-entry>
 
 Declarative metadata for one calendar event, consumed by a parent
@@ -922,6 +952,45 @@ Example:
 <map-pin color="#22c55e" size="26" highlighted>🏠</map-pin>
 ```
 
+## <markdown-view>
+
+Renders a markdown string as sanitized, styled HTML — headings, lists,
+code, tables, blockquotes, and links all get token-driven styling, with
+wide content (code blocks, tables) scrolling in its own container instead
+of widening the page.
+
+The markdown source is treated as untrusted: it is always parsed with
+`marked` and sanitized with `DOMPurify` before being injected, never
+rendered as-is.
+
+Import: `import "@f-ewald/components/markdown-view.js";`
+
+Properties: `markdown` (attribute `markdown`) : string, default ""
+Events: none
+CSS custom properties: `--ui-border`, `--ui-font`, `--ui-font-mono`, `--ui-font-size`, `--ui-font-size-lg`, `--ui-font-size-sm`, `--ui-font-weight-semibold`, `--ui-line-height-normal`, `--ui-line-height-tight`, `--ui-primary`, `--ui-primary-hover`, `--ui-radius-sm`, `--ui-surface-muted`, `--ui-text`, `--ui-text-muted`
+
+Example:
+```html
+<markdown-view></markdown-view>
+<script type="module">
+  const el = document.querySelector("markdown-view");
+  el.markdown = `## Release notes
+
+- Added **markdown-view**
+- Fixed a table alignment bug
+
+\`\`\`ts
+const x = 1;
+\`\`\`
+
+| Component | Status |
+| --- | --- |
+| markdown-view | New |
+
+See the [changelog](#markdown-view) for details.`;
+</script>
+```
+
 ## <multi-select>
 
 A form-associated multi-select: a trigger showing a compact summary of the
@@ -1482,9 +1551,9 @@ is instead wired through `ElementInternals.form` — the same mechanism
 
 Import: `import "@f-ewald/components/ui-button.js";`
 
-Properties: `variant` (attribute `variant`) : ButtonVariant, default "primary"; `href` (attribute `href`) : string | null, default null; `type` (attribute `type`) : "button" | "submit" | "reset", default "button"; `disabled` (attribute `disabled`) : boolean, default false; `busy` (attribute `busy`) : boolean, default false
+Properties: `variant` (attribute `variant`) : ButtonVariant, default "primary"; `size` (attribute `size`) : "sm" | "md", default "md"; `href` (attribute `href`) : string | null, default null; `type` (attribute `type`) : "button" | "submit" | "reset", default "button"; `disabled` (attribute `disabled`) : boolean, default false; `busy` (attribute `busy`) : boolean, default false
 Events: none
-CSS custom properties: `--ui-border`, `--ui-danger`, `--ui-danger-hover`, `--ui-focus-ring`, `--ui-font`, `--ui-font-size-sm`, `--ui-font-weight-medium`, `--ui-line-height-tight`, `--ui-on-accent`, `--ui-primary`, `--ui-primary-hover`, `--ui-radius-sm`, `--ui-text`, `--ui-text-muted`
+CSS custom properties: `--ui-border`, `--ui-danger`, `--ui-danger-hover`, `--ui-focus-ring`, `--ui-font`, `--ui-font-size-sm`, `--ui-font-size-xs`, `--ui-font-weight-medium`, `--ui-line-height-tight`, `--ui-on-accent`, `--ui-primary`, `--ui-primary-hover`, `--ui-radius-sm`, `--ui-text`, `--ui-text-muted`
 
 Example:
 ```html

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@f-ewald/components",
   "private": false,
-  "version": "1.9.0",
+  "version": "1.11.0",
   "description": "A collection of universally usable web components for various tasks.",
   "type": "module",
   "main": "dist/index.js",
@@ -63,7 +63,9 @@
     "d3-array": "^3.2.4",
     "d3-scale": "^4.0.2",
     "d3-shape": "^3.2.0",
+    "dompurify": "^3.4.12",
     "lit": "^3.3.3",
+    "marked": "^18.0.7",
     "zod": "^4.4.3"
   },
   "publishConfig": {