@f-ewald/components 1.15.0 → 1.16.0

package/dist/tree-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree-view.js","sourceRoot":"","sources":["../src/tree-view.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, css, html, nothing, type TemplateResult } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { repeat } from \"lit/directives/repeat.js\";\nimport { iconChevronDown, iconChevronRight } from \"./icons.js\";\nimport { tokens } from \"./tokens.js\";\n\n/** One tree node: a folder when `children` is set (even `[]`), a leaf otherwise. */\nexport interface TreeNode {\n  id: string;\n  label: string;\n  children?: TreeNode[];\n  data?: unknown;\n}\n\n/**\n * A generic, presentational tree shell: renders `nodes` recursively, one row\n * per node, with each row's content produced by `renderNode` (default: plain\n * label). Modeled on `data-table`'s headless pattern — knows nothing about\n * what a node's `data` means beyond what `renderNode` does with it.\n *\n * A node with a `children` array (even empty) is a folder: clicking or\n * activating its row toggles expand/collapse instead of firing `node-click`.\n * A node with no `children` is a leaf: clicking or activating its row fires\n * `node-click`. Folders start collapsed; set `default-expanded` to start\n * every folder expanded instead. Expansion state is otherwise managed\n * internally and untouched by later `nodes` updates, so a user's manual\n * toggles survive a data refresh.\n *\n * @element tree-view\n * @fires node-click - A leaf row was activated; detail is `{ id, data }`.\n */\n@customElement(\"tree-view\")\nexport class TreeView extends LitElement {\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        font-size: var(--ui-font-size-sm, 0.75rem);\n      }\n      .row {\n        display: flex;\n        align-items: center;\n        gap: 0.25rem;\n        padding: 0.25rem 0.5rem;\n        border-radius: var(--ui-radius-sm, 0.25rem);\n        color: var(--ui-text, #0f172a);\n        cursor: pointer;\n      }\n      .row:hover {\n        background: var(--ui-surface-muted, #f8fafc);\n      }\n      .row:focus-visible {\n        outline: none;\n        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));\n      }\n      .toggle {\n        display: inline-flex;\n        flex-shrink: 0;\n        width: 1rem;\n        height: 1rem;\n        align-items: center;\n        justify-content: center;\n        color: var(--ui-text-muted, #64748b);\n      }\n      .content {\n        min-width: 0;\n        flex: 1;\n      }\n      @media (forced-colors: active) {\n        .row:focus-visible {\n          outline: 2px solid CanvasText;\n          outline-offset: -2px;\n          box-shadow: none;\n        }\n      }\n    `,\n  ];\n\n  /** Tree data; opaque to this component beyond what `renderNode` does with it. */\n  @property({ attribute: false }) nodes: TreeNode[] = [];\n  /** Produces a row's rendered content for `node`. Default: plain label text. */\n  @property({ attribute: false }) renderNode: (node: TreeNode) => unknown = (node) => node.label;\n  /** Start every folder expanded instead of the default all-collapsed. */\n  @property({ type: Boolean, attribute: \"default-expanded\" }) defaultExpanded = false;\n\n  @state() private expanded = new Set<string>();\n  #initializedExpansion = false;\n\n  override willUpdate(changed: Map<string, unknown>): void {\n    if (!changed.has(\"nodes\") || this.#initializedExpansion) return;\n    this.#initializedExpansion = true;\n    if (!this.defaultExpanded) return;\n    const all = new Set<string>();\n    const collect = (list: TreeNode[]) => {\n      for (const node of list) {\n        if (!node.children) continue;\n        all.add(node.id);\n        collect(node.children);\n      }\n    };\n    collect(this.nodes);\n    this.expanded = all;\n  }\n\n  #toggle(id: string): void {\n    const next = new Set(this.expanded);\n    if (next.has(id)) next.delete(id);\n    else next.add(id);\n    this.expanded = next;\n  }\n\n  #activate(node: TreeNode): void {\n    if (node.children) {\n      this.#toggle(node.id);\n      return;\n    }\n    this.dispatchEvent(\n      new CustomEvent(\"node-click\", {\n        detail: { id: node.id, data: node.data },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  #onKeydown(node: TreeNode, e: KeyboardEvent): void {\n    if (e.key !== \"Enter\" && e.key !== \" \") return;\n    if (e.target !== e.currentTarget) return;\n    e.preventDefault();\n    this.#activate(node);\n  }\n\n  #onRowClick(node: TreeNode, e: MouseEvent): void {\n    if (this.#isNestedInteractive(e.composedPath(), e.currentTarget)) return;\n    this.#activate(node);\n  }\n\n  #isNestedInteractive(path: EventTarget[], row: EventTarget | null): boolean {\n    const selector =\n      \"a, button, input, select, textarea, summary, [contenteditable], [role='button'], [role='link'], [tabindex]\";\n    for (const target of path) {\n      if (target === row) return false;\n      if (target instanceof HTMLElement && target.matches(selector)) return true;\n    }\n    return false;\n  }\n\n  #renderNode(node: TreeNode, depth: number): TemplateResult {\n    const isFolder = !!node.children;\n    const isOpen = isFolder && this.expanded.has(node.id);\n    return html`\n      <div\n        class=\"row\"\n        role=${isFolder ? \"button\" : \"link\"}\n        aria-expanded=${isFolder ? String(isOpen) : nothing}\n        tabindex=\"0\"\n        style=\"padding-left: ${depth * 1.25}rem\"\n        @click=${(e: MouseEvent) => this.#onRowClick(node, e)}\n        @keydown=${(e: KeyboardEvent) => this.#onKeydown(node, e)}\n      >\n        <span class=\"toggle\" aria-hidden=\"true\">\n          ${isFolder ? (isOpen ? iconChevronDown(14) : iconChevronRight(14)) : nothing}\n        </span>\n        <span class=\"content\">${this.renderNode(node)}</span>\n      </div>\n      ${isFolder && isOpen\n        ? repeat(\n            node.children!,\n            (child) => child.id,\n            (child) => this.#renderNode(child, depth + 1),\n          )\n        : nothing}\n    `;\n  }\n\n  override render() {\n    return repeat(\n      this.nodes,\n      (node) => node.id,\n      (node) => this.#renderNode(node, 0),\n    );\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"tree-view\": TreeView;\n  }\n}\n"]}
+{"version":3,"file":"tree-view.js","sourceRoot":"","sources":["../src/tree-view.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, css, html, nothing, type TemplateResult } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { repeat } from \"lit/directives/repeat.js\";\nimport { iconChevronDown, iconChevronRight } from \"./icons.js\";\nimport { tokens } from \"./tokens.js\";\n\n/** One tree node: a folder when `children` is set (even `[]`), a leaf otherwise. */\nexport interface TreeNode {\n  id: string;\n  label: string;\n  children?: TreeNode[];\n  data?: unknown;\n}\n\n/**\n * A generic, presentational tree shell: renders `nodes` recursively, one row\n * per node, with each row's content produced by `renderNode` (default: plain\n * label). Modeled on `data-table`'s headless pattern — knows nothing about\n * what a node's `data` means beyond what `renderNode` does with it.\n *\n * A node with a `children` array (even empty) is a folder: clicking or\n * activating its row toggles expand/collapse instead of firing `node-click`.\n * A node with no `children` is a leaf: clicking or activating its row fires\n * `node-click`. Folders start collapsed; set `default-expanded` to start\n * every folder expanded instead. Expansion state is otherwise managed\n * internally and untouched by later `nodes` updates, so a user's manual\n * toggles survive a data refresh.\n *\n * Set the `lines` boolean to draw classic file-tree connector guides: a\n * vertical line per continuing ancestor level and a branch elbow (`└`) or\n * tee (`├`) linking each node to its parent. Off by default (indentation only).\n *\n * @element tree-view\n * @fires node-click - A leaf row was activated; detail is `{ id, data }`.\n */\n@customElement(\"tree-view\")\nexport class TreeView extends LitElement {\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        font-size: var(--ui-font-size-sm, 0.75rem);\n      }\n      .row {\n        display: flex;\n        align-items: center;\n        gap: 0.25rem;\n        padding: 0.25rem 0.5rem;\n        border-radius: var(--ui-radius-sm, 0.25rem);\n        color: var(--ui-text, #0f172a);\n        cursor: pointer;\n      }\n      .row:hover {\n        background: var(--ui-surface-muted, #f8fafc);\n      }\n      .row:focus-visible {\n        outline: none;\n        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));\n      }\n      .toggle {\n        display: inline-flex;\n        flex-shrink: 0;\n        width: 1rem;\n        height: 1rem;\n        align-items: center;\n        justify-content: center;\n        color: var(--ui-text-muted, #64748b);\n      }\n      .content {\n        min-width: 0;\n        flex: 1;\n      }\n      :host([lines]) .row {\n        padding-top: 0;\n        padding-bottom: 0;\n        min-height: 1.5rem;\n      }\n      .guides {\n        display: flex;\n        align-self: stretch;\n        flex-shrink: 0;\n      }\n      .guide {\n        position: relative;\n        flex: 0 0 auto;\n        width: 1rem;\n      }\n      .guide.v::before,\n      .guide.connector::before {\n        content: \"\";\n        position: absolute;\n        left: 50%;\n        top: 0;\n        bottom: 0;\n        border-left: 1px solid var(--ui-border, #e2e8f0);\n      }\n      .guide.connector.last::before {\n        bottom: 50%;\n      }\n      .guide.connector::after {\n        content: \"\";\n        position: absolute;\n        left: 50%;\n        right: 0;\n        top: 50%;\n        border-top: 1px solid var(--ui-border, #e2e8f0);\n      }\n      @media (forced-colors: active) {\n        .row:focus-visible {\n          outline: 2px solid CanvasText;\n          outline-offset: -2px;\n          box-shadow: none;\n        }\n        .guide.v::before,\n        .guide.connector::before,\n        .guide.connector::after {\n          border-color: CanvasText;\n        }\n      }\n    `,\n  ];\n\n  /** Tree data; opaque to this component beyond what `renderNode` does with it. */\n  @property({ attribute: false }) nodes: TreeNode[] = [];\n  /** Produces a row's rendered content for `node`. Default: plain label text. */\n  @property({ attribute: false }) renderNode: (node: TreeNode) => unknown = (node) => node.label;\n  /** Start every folder expanded instead of the default all-collapsed. */\n  @property({ type: Boolean, attribute: \"default-expanded\" }) defaultExpanded = false;\n  /**\n   * Draw classic file-tree connector guides (vertical ancestor lines plus a\n   * branch elbow/tee per row) instead of indentation alone. Off by default.\n   */\n  @property({ type: Boolean, reflect: true }) lines = false;\n\n  @state() private expanded = new Set<string>();\n  #initializedExpansion = false;\n\n  override willUpdate(changed: Map<string, unknown>): void {\n    if (!changed.has(\"nodes\") || this.#initializedExpansion) return;\n    this.#initializedExpansion = true;\n    if (!this.defaultExpanded) return;\n    const all = new Set<string>();\n    const collect = (list: TreeNode[]) => {\n      for (const node of list) {\n        if (!node.children) continue;\n        all.add(node.id);\n        collect(node.children);\n      }\n    };\n    collect(this.nodes);\n    this.expanded = all;\n  }\n\n  #toggle(id: string): void {\n    const next = new Set(this.expanded);\n    if (next.has(id)) next.delete(id);\n    else next.add(id);\n    this.expanded = next;\n  }\n\n  #activate(node: TreeNode): void {\n    if (node.children) {\n      this.#toggle(node.id);\n      return;\n    }\n    this.dispatchEvent(\n      new CustomEvent(\"node-click\", {\n        detail: { id: node.id, data: node.data },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  #onKeydown(node: TreeNode, e: KeyboardEvent): void {\n    if (e.key !== \"Enter\" && e.key !== \" \") return;\n    if (e.target !== e.currentTarget) return;\n    e.preventDefault();\n    this.#activate(node);\n  }\n\n  #onRowClick(node: TreeNode, e: MouseEvent): void {\n    if (this.#isNestedInteractive(e.composedPath(), e.currentTarget)) return;\n    this.#activate(node);\n  }\n\n  #isNestedInteractive(path: EventTarget[], row: EventTarget | null): boolean {\n    const selector =\n      \"a, button, input, select, textarea, summary, [contenteditable], [role='button'], [role='link'], [tabindex]\";\n    for (const target of path) {\n      if (target === row) return false;\n      if (target instanceof HTMLElement && target.matches(selector)) return true;\n    }\n    return false;\n  }\n\n  #renderNode(\n    node: TreeNode,\n    depth: number,\n    isLast: boolean,\n    ancestorHasNext: boolean[],\n  ): TemplateResult {\n    const isFolder = !!node.children;\n    const isOpen = isFolder && this.expanded.has(node.id);\n    const guides = this.lines\n      ? html`<span class=\"guides\" aria-hidden=\"true\">\n          ${ancestorHasNext.map(\n            (hasNext) => html`<span class=\"guide ${hasNext ? \"v\" : \"\"}\"></span>`,\n          )}\n          <span class=\"guide connector ${isLast ? \"last\" : \"\"}\"></span>\n        </span>`\n      : nothing;\n    return html`\n      <div\n        class=\"row\"\n        role=${isFolder ? \"button\" : \"link\"}\n        aria-expanded=${isFolder ? String(isOpen) : nothing}\n        tabindex=\"0\"\n        style=${this.lines ? nothing : `padding-left: ${depth * 1.25}rem`}\n        @click=${(e: MouseEvent) => this.#onRowClick(node, e)}\n        @keydown=${(e: KeyboardEvent) => this.#onKeydown(node, e)}\n      >\n        ${guides}\n        <span class=\"toggle\" aria-hidden=\"true\">\n          ${isFolder ? (isOpen ? iconChevronDown(14) : iconChevronRight(14)) : nothing}\n        </span>\n        <span class=\"content\">${this.renderNode(node)}</span>\n      </div>\n      ${isFolder && isOpen\n        ? repeat(\n            node.children!,\n            (child) => child.id,\n            (child, i) =>\n              this.#renderNode(child, depth + 1, i === node.children!.length - 1, [\n                ...ancestorHasNext,\n                !isLast,\n              ]),\n          )\n        : nothing}\n    `;\n  }\n\n  override render() {\n    return repeat(\n      this.nodes,\n      (node) => node.id,\n      (node, i) => this.#renderNode(node, 0, i === this.nodes.length - 1, []),\n    );\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"tree-view\": TreeView;\n  }\n}\n"]}

package/docs/photo-gallery.md

@@ -3,6 +3,10 @@
 Responsive, accessible image carousel composed from declarative
 `gallery-item` children.
 
+The image viewport keeps a fixed `aspect-ratio`, and the caption row is
+reserved for every slide whenever any slide has a caption, so the carousel's
+total height stays constant as it cycles — it never shifts the page below it.
+
 ## Install
 
 ```js
@@ -67,6 +71,7 @@ import "@f-ewald/components/photo-gallery.js";
 | `--ui-font` |
 | `--ui-font-size` |
 | `--ui-font-size-sm` |
+| `--ui-line-height-normal` |
 | `--ui-line-height-tight` |
 | `--ui-on-accent` |
 | `--ui-overlay` |

package/docs/toast-notification.md

@@ -1,13 +1,18 @@
 # `<toast-notification>`
 
 Fixed-position stack of dismissible notifications, anchored top-right
-(top-full-width on mobile). Not wired to any app state yet — callers add
-toasts imperatively via the `show()` method on a live element reference,
+(top-full-width on mobile). Every toast shares one fixed width so entries
+never appear narrower or wider than one another. Not wired to any app state
+yet — callers add toasts imperatively via the `show()` method on a live
+element reference,
 e.g. `document.querySelector('toast-notification')?.show('Offline', { variant: 'error' })`,
 or via the `notifySuccess`/`notifyError`/`notifyInfo` module-level helpers
-exported from this file. Each toast auto-dismisses after `duration` ms and
-can also be dismissed via its ✕ button. Appears/disappears instantly — no
-slide/fade transitions.
+exported from this file. The first argument is the required bold headline; an
+optional `description` renders a smaller, non-bold second line. Each variant
+leads with a matching status icon (success → check, error → exclamation
+circle, info → information circle, warning → exclamation triangle). Each toast
+auto-dismisses after `duration` ms and can also be dismissed via its ✕
+button. Appears/disappears instantly — no slide/fade transitions.
 
 ## Install
 
@@ -21,7 +26,7 @@ import "@f-ewald/components/toast-notification.js";
 <toast-notification></toast-notification>
 <script type="module">
   import { notifySuccess } from "@f-ewald/components/toast-notification.js";
-  notifySuccess("Saved!");
+  notifySuccess("Saved!", "Your changes are now live.");
 </script>
 ```
 
@@ -45,6 +50,9 @@ _None._
 | `--ui-focus-ring` |
 | `--ui-font` |
 | `--ui-font-size` |
+| `--ui-font-size-sm` |
+| `--ui-font-weight-regular` |
+| `--ui-font-weight-semibold` |
 | `--ui-hover-overlay` |
 | `--ui-info` |
 | `--ui-line-height-glyph` |
@@ -55,3 +63,4 @@ _None._
 | `--ui-shadow-lg` |
 | `--ui-success` |
 | `--ui-text` |
+| `--ui-warning` |

package/docs/tree-view.md

@@ -13,6 +13,10 @@ every folder expanded instead. Expansion state is otherwise managed
 internally and untouched by later `nodes` updates, so a user's manual
 toggles survive a data refresh.
 
+Set the `lines` boolean to draw classic file-tree connector guides: a
+vertical line per continuing ancestor level and a branch elbow (`└`) or
+tee (`├`) linking each node to its parent. Off by default (indentation only).
+
 ## Install
 
 ```js
@@ -22,7 +26,7 @@ import "@f-ewald/components/tree-view.js";
 ## Usage
 
 ```html
-<tree-view></tree-view>
+<tree-view lines></tree-view>
 <script type="module">
   const tree = document.querySelector("tree-view");
   tree.nodes = [
@@ -45,6 +49,7 @@ import "@f-ewald/components/tree-view.js";
 | `nodes` | _(JS property only)_ | `TreeNode[]` | `[]` | Tree data; opaque to this component beyond what `renderNode` does with it. |
 | `renderNode` | _(JS property only)_ | `(node: TreeNode) => unknown` | `—` | Produces a row's rendered content for `node`. Default: plain label text. |
 | `defaultExpanded` | `default-expanded` | `boolean` | `false` | Start every folder expanded instead of the default all-collapsed. |
+| `lines` | `lines` | `boolean` | `false` | Draw classic file-tree connector guides (vertical ancestor lines plus a branch elbow/tee per row) instead of indentation alone. Off by default. |
 
 ## Events
 
@@ -60,6 +65,7 @@ _None._
 
 | Custom property |
 | --- |
+| `--ui-border` |
 | `--ui-focus-ring` |
 | `--ui-font` |
 | `--ui-font-size-sm` |

package/llms.txt

@@ -1273,11 +1273,15 @@ Example:
 Responsive, accessible image carousel composed from declarative
 `gallery-item` children.
 
+The image viewport keeps a fixed `aspect-ratio`, and the caption row is
+reserved for every slide whenever any slide has a caption, so the carousel's
+total height stays constant as it cycles — it never shifts the page below it.
+
 Import: `import "@f-ewald/components/photo-gallery.js";`
 
 Properties: `currentIndex` (attribute `current-index`) : number, default 0; `delay` (attribute `delay`) : number, default 0; `showControls` (attribute `show-controls`) : boolean, default true; `showCounter` (attribute `show-counter`) : boolean, default false; `showIndicators` (attribute `show-indicators`) : boolean, default false; `showAutoplayControl` (attribute `show-autoplay-control`) : boolean, default true; `paused` (attribute `paused`) : boolean, default false; `aspectRatio` (attribute `aspect-ratio`) : string, default "16 / 9"; `objectFit` (attribute `object-fit`) : PhotoGalleryObjectFit, default "cover"
 Events: `slide-change`
-CSS custom properties: `--ui-border`, `--ui-focus-ring`, `--ui-font`, `--ui-font-size`, `--ui-font-size-sm`, `--ui-line-height-tight`, `--ui-on-accent`, `--ui-overlay`, `--ui-primary`, `--ui-radius`, `--ui-radius-sm`, `--ui-surface`, `--ui-surface-muted`, `--ui-text`, `--ui-text-muted`
+CSS custom properties: `--ui-border`, `--ui-focus-ring`, `--ui-font`, `--ui-font-size`, `--ui-font-size-sm`, `--ui-line-height-normal`, `--ui-line-height-tight`, `--ui-on-accent`, `--ui-overlay`, `--ui-primary`, `--ui-radius`, `--ui-radius-sm`, `--ui-surface`, `--ui-surface-muted`, `--ui-text`, `--ui-text-muted`
 
 Example:
 ```html
@@ -1712,26 +1716,31 @@ Example:
 ## <toast-notification>
 
 Fixed-position stack of dismissible notifications, anchored top-right
-(top-full-width on mobile). Not wired to any app state yet — callers add
-toasts imperatively via the `show()` method on a live element reference,
+(top-full-width on mobile). Every toast shares one fixed width so entries
+never appear narrower or wider than one another. Not wired to any app state
+yet — callers add toasts imperatively via the `show()` method on a live
+element reference,
 e.g. `document.querySelector('toast-notification')?.show('Offline', { variant: 'error' })`,
 or via the `notifySuccess`/`notifyError`/`notifyInfo` module-level helpers
-exported from this file. Each toast auto-dismisses after `duration` ms and
-can also be dismissed via its ✕ button. Appears/disappears instantly — no
-slide/fade transitions.
+exported from this file. The first argument is the required bold headline; an
+optional `description` renders a smaller, non-bold second line. Each variant
+leads with a matching status icon (success → check, error → exclamation
+circle, info → information circle, warning → exclamation triangle). Each toast
+auto-dismisses after `duration` ms and can also be dismissed via its ✕
+button. Appears/disappears instantly — no slide/fade transitions.
 
 Import: `import "@f-ewald/components/toast-notification.js";`
 
 Properties: none
 Events: none
-CSS custom properties: `--ui-danger`, `--ui-focus-ring`, `--ui-font`, `--ui-font-size`, `--ui-hover-overlay`, `--ui-info`, `--ui-line-height-glyph`, `--ui-line-height-normal`, `--ui-on-accent`, `--ui-radius`, `--ui-radius-sm`, `--ui-shadow-lg`, `--ui-success`, `--ui-text`
+CSS custom properties: `--ui-danger`, `--ui-focus-ring`, `--ui-font`, `--ui-font-size`, `--ui-font-size-sm`, `--ui-font-weight-regular`, `--ui-font-weight-semibold`, `--ui-hover-overlay`, `--ui-info`, `--ui-line-height-glyph`, `--ui-line-height-normal`, `--ui-on-accent`, `--ui-radius`, `--ui-radius-sm`, `--ui-shadow-lg`, `--ui-success`, `--ui-text`, `--ui-warning`
 
 Example:
 ```html
 <toast-notification></toast-notification>
 <script type="module">
   import { notifySuccess } from "@f-ewald/components/toast-notification.js";
-  notifySuccess("Saved!");
+  notifySuccess("Saved!", "Your changes are now live.");
 </script>
 ```
 
@@ -1750,15 +1759,19 @@ every folder expanded instead. Expansion state is otherwise managed
 internally and untouched by later `nodes` updates, so a user's manual
 toggles survive a data refresh.
 
+Set the `lines` boolean to draw classic file-tree connector guides: a
+vertical line per continuing ancestor level and a branch elbow (`└`) or
+tee (`├`) linking each node to its parent. Off by default (indentation only).
+
 Import: `import "@f-ewald/components/tree-view.js";`
 
-Properties: `nodes` (JS property only) : TreeNode[], default []; `renderNode` (JS property only) : (node: TreeNode) => unknown, default —; `defaultExpanded` (attribute `default-expanded`) : boolean, default false
+Properties: `nodes` (JS property only) : TreeNode[], default []; `renderNode` (JS property only) : (node: TreeNode) => unknown, default —; `defaultExpanded` (attribute `default-expanded`) : boolean, default false; `lines` (attribute `lines`) : boolean, default false
 Events: `node-click`
-CSS custom properties: `--ui-focus-ring`, `--ui-font`, `--ui-font-size-sm`, `--ui-radius-sm`, `--ui-surface-muted`, `--ui-text`, `--ui-text-muted`
+CSS custom properties: `--ui-border`, `--ui-focus-ring`, `--ui-font`, `--ui-font-size-sm`, `--ui-radius-sm`, `--ui-surface-muted`, `--ui-text`, `--ui-text-muted`
 
 Example:
 ```html
-<tree-view></tree-view>
+<tree-view lines></tree-view>
 <script type="module">
   const tree = document.querySelector("tree-view");
   tree.nodes = [

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@f-ewald/components",
   "private": false,
-  "version": "1.15.0",
+  "version": "1.16.0",
   "description": "A collection of universally usable web components for various tasks.",
   "type": "module",
   "main": "dist/index.js",