@fusion.dev/helix 0.146.0 → 0.148.0

package/dist/object-inspector/root/object-inspector-root.css.js

@@ -1,175 +1,24 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: flex;
-flex-direction: column;
-font-size: var(--helix-text-sm);
-}
-
-[part="header"] {
-align-items: center;
-background-color: var(
+export const styles = createSheet(`:host {display: flex;flex-direction: column;font-size: var(--helix-text-sm);}[part="header"] {align-items: center;background-color: var(
 --object-inspector-header-background-color,
 var(--helix-color-surface-raised)
-);
-border: var(--helix-border-thin) solid
-var(--object-inspector-border-color, var(--helix-color-border));
-border-block-end: none;
-border-start-end-radius: var(--object-inspector-radius, var(--helix-radii-lg));
-border-start-start-radius: var(--object-inspector-radius, var(--helix-radii-lg));
-display: flex;
-padding-block: var(--helix-space-xs);
-padding-inline: var(--helix-space-md);
-}
-
-[part="label"] {
-color: var(--helix-color-foreground-muted);
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-xs);
-font-weight: var(--helix-weight-medium);
-}
-
-[part="frame"] {
-position: relative;
-}
-
-[part="tree"] {
-background-color: var(--object-inspector-background-color, var(--helix-color-background));
-border: var(--helix-border-thin) solid
-var(--object-inspector-border-color, var(--helix-color-border));
-border-radius: var(--object-inspector-radius, var(--helix-radii-lg));
-font-family: var(--helix-font-mono);
-line-height: var(--helix-leading-normal);
-padding-block: var(--helix-space-xs);
-}
-
-[part="search-field"] {
-appearance: none;
-background-color: var(--object-inspector-background-color, var(--helix-color-background));
-border: var(--helix-border-thin) solid
-var(--object-inspector-border-color, var(--helix-color-border));
-border-block-end: none;
-border-start-end-radius: var(--object-inspector-radius, var(--helix-radii-lg));
-border-start-start-radius: var(--object-inspector-radius, var(--helix-radii-lg));
-box-sizing: border-box;
-color: var(--helix-color-foreground);
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-sm);
-inline-size: 100%;
-margin: 0;
-padding-block: var(--helix-space-xs);
-padding-inline: var(--helix-space-md);
-}
-
-[part="search-field"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: calc(var(--helix-size-focus-offset) * -1);
-}
-
-[part="header"] + [part="search-field"],
-:is([part="header"], [part="search-field"]) ~ [part="frame"] [part="tree"] {
-border-start-end-radius: var(--helix-radii-none);
-border-start-start-radius: var(--helix-radii-none);
-}
-
-:host([windowed]) [part="tree"] {
-block-size: var(--object-inspector-block-size, 24em);
-overflow-y: auto;
-overscroll-behavior: contain;
-}
-
-[part~="row"] {
-cursor: default;
-overflow: hidden;
-padding-inline-end: var(--helix-space-2xl);
-padding-inline-start: calc(
+);border: var(--helix-border-thin) solid
+var(--object-inspector-border-color, var(--helix-color-border));border-block-end: none;border-start-end-radius: var(--object-inspector-radius, var(--helix-radii-lg));border-start-start-radius: var(--object-inspector-radius, var(--helix-radii-lg));display: flex;padding-block: var(--helix-space-xs);padding-inline: var(--helix-space-md);}[part="label"] {color: var(--helix-color-foreground-muted);font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium);}[part="frame"] {position: relative;}[part="tree"] {background-color: var(--object-inspector-background-color, var(--helix-color-background));border: var(--helix-border-thin) solid
+var(--object-inspector-border-color, var(--helix-color-border));border-radius: var(--object-inspector-radius, var(--helix-radii-lg));font-family: var(--helix-font-mono);line-height: var(--helix-leading-normal);padding-block: var(--helix-space-xs);}[part="search-field"] {appearance: none;background-color: var(--object-inspector-background-color, var(--helix-color-background));border: var(--helix-border-thin) solid
+var(--object-inspector-border-color, var(--helix-color-border));border-block-end: none;border-start-end-radius: var(--object-inspector-radius, var(--helix-radii-lg));border-start-start-radius: var(--object-inspector-radius, var(--helix-radii-lg));box-sizing: border-box;color: var(--helix-color-foreground);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);inline-size: 100%;margin: 0;padding-block: var(--helix-space-xs);padding-inline: var(--helix-space-md);}[part="search-field"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part="header"] + [part="search-field"],
+:is([part="header"], [part="search-field"]) ~ [part="frame"] [part="tree"] {border-start-end-radius: var(--helix-radii-none);border-start-start-radius: var(--helix-radii-none);}:host([windowed]) [part="tree"] {block-size: var(--object-inspector-block-size, 24em);overflow-y: auto;overscroll-behavior: contain;}[part~="row"] {cursor: default;overflow: hidden;padding-inline-end: var(--helix-space-2xl);padding-inline-start: calc(
 var(--object-inspector-level) *
 var(--helix-space-lg) +
 var(--helix-space-sm) +
 1em +
 var(--helix-space-2xs)
-);
-text-overflow: ellipsis;
-white-space: nowrap;
-}
-
-[part~="row"][aria-expanded] {
-cursor: pointer;
-padding-inline-start: calc(
+);text-overflow: ellipsis;white-space: nowrap;}[part~="row"][aria-expanded] {cursor: pointer;padding-inline-start: calc(
 var(--object-inspector-level) *
 var(--helix-space-lg) +
 var(--helix-space-sm)
-);
-}
-
-[part="tree"]:focus-within [part~="row-active"] {
-background-color: var(--helix-color-surface-sunken);
-}
-
-[part~="row"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: calc(var(--helix-size-focus-offset) * -1);
-}
-
-[part~="row-match"] {
-background-color: var(
+);}[part="tree"]:focus-within [part~="row-active"] {background-color: var(--helix-color-surface-sunken);}[part~="row"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part~="row-match"] {background-color: var(
 --object-inspector-match-background-color,
 var(--helix-color-accent-subtle)
-);
-}
-
-[part="toggle"] {
-block-size: 1em;
-color: var(--helix-color-foreground-muted);
-inline-size: 1em;
-margin-inline-end: var(--helix-space-2xs);
-vertical-align: -0.125em;
-}
-
-[part="key"] {
-color: var(--helix-color-syntax-name);
-}
-
-[part~="row-match"] [part="key"] {
-color: var(--helix-color-foreground);
-}
-
-[part="string"] {
-color: var(--helix-color-syntax-string);
-}
-
-[part="number"] {
-color: var(--helix-color-syntax-constant);
-}
-
-[part="boolean"],
-[part="null"] {
-color: var(--helix-color-syntax-keyword);
-}
-
-[part="summary"],
-[part="count"] {
-color: var(--helix-color-foreground-muted);
-}
-
-[part="count"] {
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-xs);
-margin-inline-start: var(--helix-space-xs);
-}
-
-[part="copy"] {
-inset-block-start: var(--helix-space-2xs);
-inset-inline-end: var(--helix-space-2xs);
-position: absolute;
-}
-
-@media print {
-[part="tree"] {
-block-size: auto;
-overflow: visible;
-}
-
-[part="copy"] {
-display: none;
-}
-}`);
+);}[part="toggle"] {block-size: 1em;color: var(--helix-color-foreground-muted);inline-size: 1em;margin-inline-end: var(--helix-space-2xs);vertical-align: -0.125em;}[part="key"] {color: var(--helix-color-syntax-name);}[part~="row-match"] [part="key"] {color: var(--helix-color-foreground);}[part="string"] {color: var(--helix-color-syntax-string);}[part="number"] {color: var(--helix-color-syntax-constant);}[part="boolean"],
+[part="null"] {color: var(--helix-color-syntax-keyword);}[part="summary"],
+[part="count"] {color: var(--helix-color-foreground-muted);}[part="count"] {font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);margin-inline-start: var(--helix-space-xs);}[part="copy"] {inset-block-start: var(--helix-space-2xs);inset-inline-end: var(--helix-space-2xs);position: absolute;}@media print {[part="tree"] {block-size: auto;overflow: visible;}[part="copy"] {display: none;}}`);

package/dist/option/group/option-group.css.js

@@ -1,23 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: block;
-}
-
-:host(:not(:first-of-type)) {
-margin-block-start: var(--helix-space-xs);
-}
-
-:host([hidden]) {
-display: none;
-}
-
-[part="label"] {
-color: var(--helix-color-foreground-subtle);
-display: block;
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-xs);
-font-weight: var(--helix-weight-medium);
-padding-block: var(--helix-space-2xs);
-
-padding-inline: var(--option-padding, var(--helix-space-xs));
-}`);
+export const styles = createSheet(`:host {display: block;}:host(:not(:first-of-type)) {margin-block-start: var(--helix-space-xs);}:host([hidden]) {display: none;}[part="label"] {color: var(--helix-color-foreground-subtle);display: block;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium);padding-block: var(--helix-space-2xs);padding-inline: var(--option-padding, var(--helix-space-xs));}`);

package/dist/option/index.d.ts

@@ -1,2 +1,3 @@
 export * from './group/option-group.js';
 export * from './root/option-root.js';
+export * from './separator/option-separator.js';

package/dist/option/index.js

@@ -1,2 +1,3 @@
 export * from './group/option-group.js';
 export * from './root/option-root.js';
+export * from './separator/option-separator.js';

package/dist/option/root/option-root.css.js

@@ -1,91 +1,9 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-
---_option-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M104 192a8 8 0 0 1-5.7-2.3l-56-56a8 8 0 0 1 11.4-11.4L104 172.7 210.3 66.3a8 8 0 0 1 11.4 11.4l-112 112A8 8 0 0 1 104 192Z'/%3E%3C/svg%3E");
-display: block;
-}
-
-:host([hidden]) {
-display: none;
-}
-
-[part~="item"] {
-align-items: center;
-
-border-radius: var(--option-radius, var(--helix-radii-sm));
-color: var(--helix-color-foreground);
-cursor: pointer;
-display: flex;
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-sm);
-gap: var(--helix-space-xs);
-
-min-block-size: var(--helix-size-control-tight);
-box-sizing: border-box;
-
-padding-block: var(--option-block-padding, var(--helix-space-2xs));
-
-padding-inline: var(--option-padding, var(--helix-space-xs));
-
-user-select: none;
-}
-
-[part="text"] {
-display: flex;
-flex: 1 1 auto;
-flex-direction: column;
-min-inline-size: 0;
-}
-
-[part="description"] {
-color: var(--helix-color-foreground-muted);
-font-size: var(--helix-text-xs);
-line-height: var(--helix-leading-tight);
-overflow: hidden;
-text-overflow: ellipsis;
-white-space: nowrap;
-}
-
-[part="label"] {
-min-inline-size: 0;
-
-overflow: hidden;
-text-overflow: ellipsis;
-white-space: nowrap;
-}
-
-:host(:state(selected)) [part~="item"]::after {
-content: "";
-background-color: currentColor;
-block-size: var(--helix-size-icon-tight);
-flex: 0 0 auto;
-inline-size: var(--helix-size-icon-tight);
-margin-inline-start: auto;
-mask-image: var(--_option-check);
-mask-position: center;
-mask-repeat: no-repeat;
-mask-size: contain;
-}
-
-:host(:state(active)) [part~="item"],
-:host(:not([disabled])) [part~="item"]:hover {
-
-background-color: var(
+export const styles = createSheet(`:host {--_option-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M104 192a8 8 0 0 1-5.7-2.3l-56-56a8 8 0 0 1 11.4-11.4L104 172.7 210.3 66.3a8 8 0 0 1 11.4 11.4l-112 112A8 8 0 0 1 104 192Z'/%3E%3C/svg%3E");display: block;}:host([hidden]) {display: none;}[part~="item"] {align-items: center;border-radius: var(--option-radius, var(--helix-radii-sm));color: var(--helix-color-foreground);cursor: pointer;display: flex;font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);gap: var(--helix-space-xs);min-block-size: var(--helix-size-control-tight);box-sizing: border-box;padding-block: var(--option-block-padding, var(--helix-space-2xs));padding-inline: var(--option-padding, var(--helix-space-xs));user-select: none;}[part="text"] {display: flex;flex: 1 1 auto;flex-direction: column;min-inline-size: 0;}[part="description"] {color: var(--helix-color-foreground-muted);font-size: var(--helix-text-xs);line-height: var(--helix-leading-tight);overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}[part="label"] {min-inline-size: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}:host(:state(selected)) [part~="item"]::after {content: "";background-color: currentColor;block-size: var(--helix-size-icon-tight);flex: 0 0 auto;inline-size: var(--helix-size-icon-tight);margin-inline-start: auto;mask-image: var(--_option-check);mask-position: center;mask-repeat: no-repeat;mask-size: contain;}:host(:state(active)) [part~="item"],
+:host(:not([disabled])) [part~="item"]:hover {background-color: var(
 --option-active-color,
 light-dark(
 color-mix(in oklab, var(--helix-color-foreground) 8%, transparent),
 color-mix(in oklab, var(--helix-color-foreground) 12%, transparent)
 )
-);
-}
-
-:host([disabled]) [part~="item"] {
-cursor: default;
-opacity: 0.5;
-}
-
-@media print {
-:host {
-print-color-adjust: exact;
-}
-}`);
+);}:host([disabled]) [part~="item"] {cursor: default;opacity: 0.5;}@media print {:host {print-color-adjust: exact;}}`);

package/dist/option/separator/option-separator.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/option/separator/option-separator.css.js

@@ -0,0 +1,3 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {border-block-start: var(--option-separator-thickness, var(--helix-border-thin)) solid
+var(--option-separator-color, var(--helix-color-border));display: block;margin-block: var(--option-separator-space, var(--helix-space-2xs));}:host([hidden]) {display: none;}`);

package/dist/option/separator/option-separator.d.ts

@@ -0,0 +1,26 @@
+import { HelixHeadlessOptionSeparator } from '@fusion.dev/helix-headless/option';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary A rule between options or groups inside a listbox.
+ *
+ * @description
+ * A hairline across the panel in the list's border color, with a little air
+ * either side.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @aliases Divider, ListBoxSeparator
+ * @documentation https://fusion.dev/helix/components/option
+ *
+ * @cssproperty --option-separator-color - The rule's color.
+ * @cssproperty --option-separator-space - The space above and below the rule.
+ * @cssproperty --option-separator-thickness - The rule's thickness.
+ */
+export declare class HelixOptionSeparator extends HelixHeadlessOptionSeparator {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-option-separator': HelixOptionSeparator;
+    }
+}

package/dist/option/separator/option-separator.js

@@ -0,0 +1,16 @@
+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 { customElement } from '@fusion.dev/helix-core';
+import { HelixHeadlessOptionSeparator } from '@fusion.dev/helix-headless/option';
+import { styles } from './option-separator.css.js';
+let HelixOptionSeparator = class HelixOptionSeparator extends HelixHeadlessOptionSeparator {
+    static { this.styles = styles; }
+};
+HelixOptionSeparator = __decorate([
+    customElement('helix-option-separator')
+], HelixOptionSeparator);
+export { HelixOptionSeparator };

package/dist/orb/root/orb-root.css.js

@@ -1,42 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-
---_orb-size: calc(var(--helix-size-loader-lg) * 1.5);
-
---_orb-color: var(--orb-color, currentColor);
---_orb-ground: var(--orb-ground, var(--helix-color-background));
-
-block-size: var(--orb-size, var(--_orb-size));
-
-display: inline-block;
-flex-shrink: 0;
-inline-size: var(--orb-size, var(--_orb-size));
-vertical-align: middle;
-}
-
-:host([size="sm"]) {
---_orb-size: var(--helix-size-loader-md);
-}
-
-:host([size="lg"]) {
---_orb-size: calc(var(--helix-size-loader-lg) * 2);
-}
-
-[part="canvas"] {
-block-size: 100%;
-
-color: var(--_orb-color);
-display: block;
-inline-size: 100%;
-text-decoration-color: var(--_orb-ground);
-}
-
-[part="canvas"][hidden] {
-display: none;
-}
-
-@media print {
-:host {
-display: none;
-}
-}`);
+export const styles = createSheet(`:host {--_orb-size: calc(var(--helix-size-loader-lg) * 1.5);--_orb-color: var(--orb-color, currentColor);--_orb-ground: var(--orb-ground, var(--helix-color-background));block-size: var(--orb-size, var(--_orb-size));display: inline-block;flex-shrink: 0;inline-size: var(--orb-size, var(--_orb-size));vertical-align: middle;}:host([size="sm"]) {--_orb-size: var(--helix-size-loader-md);}:host([size="lg"]) {--_orb-size: calc(var(--helix-size-loader-lg) * 2);}[part="canvas"] {block-size: 100%;color: var(--_orb-color);display: block;inline-size: 100%;text-decoration-color: var(--_orb-ground);}[part="canvas"][hidden] {display: none;}@media print {:host {display: none;}}`);

package/dist/outline/root/outline-root.css.js

@@ -1,140 +1,42 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-
---outline-rail: var(--helix-space-2xs);
-display: block;
-}
-
-[part="nav"] {
-background-image: linear-gradient(var(--helix-color-border), var(--helix-color-border));
-
-background-position: calc((var(--outline-rail) - var(--helix-border-thin)) / 2) 0;
-background-repeat: repeat-y;
-background-size: var(--helix-border-thin) 100%;
-display: flex;
-flex-direction: column;
-
-position: relative;
-}
-
-[part="indicator"] {
---_mark-width: var(--helix-border-thin);
-
-background-color: var(--helix-color-primary);
-block-size: var(--indicator-block-size, 0);
-border-radius: var(--helix-radii-full);
-inline-size: var(--_mark-width);
-inset-block-start: 0;
-inset-inline-start: calc((var(--outline-rail) - var(--_mark-width)) / 2);
-opacity: 0;
-position: absolute;
-translate: 0 var(--indicator-y, 0);
-
-transition:
+export const styles = createSheet(`:host {--outline-rail: var(--helix-space-2xs);display: block;}[part="nav"] {background-image: linear-gradient(
+var(--outline-rule-color, var(--helix-color-border)),
+var(--outline-rule-color, var(--helix-color-border))
+);background-position: calc((var(--outline-rail) - var(--helix-border-thin)) / 2) 0;background-repeat: repeat-y;background-size: var(--helix-border-thin) 100%;display: flex;flex-direction: column;position: relative;}[part="indicator"] {--_mark-width: var(--helix-border-thin);background-color: var(--outline-indicator-color, var(--helix-color-primary));block-size: var(--indicator-block-size, 0);border-radius: var(--helix-radii-full);inline-size: var(--_mark-width);inset-block-start: 0;inset-inline-start: calc((var(--outline-rail) - var(--_mark-width)) / 2);opacity: 0;position: absolute;translate: 0 var(--indicator-y, 0);transition:
 translate var(--helix-duration-normal) var(--helix-easing-spring),
 block-size var(--helix-duration-slow) var(--helix-easing-decelerate),
 inline-size var(--helix-duration-normal) var(--helix-easing-standard),
 inset-inline-start var(--helix-duration-normal) var(--helix-easing-standard),
-opacity var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-[part="indicator"][data-placed] {
-opacity: 1;
-}
-
-:host(:hover) [part="indicator"]:not([data-moving]) {
---_mark-width: var(--helix-border-thick);
-}
-
-[part="indicator"][data-moving] {
---_mark-width: var(--outline-rail);
-
-transition:
+opacity var(--helix-duration-fast) var(--helix-easing-standard);}[part="indicator"][data-placed] {opacity: 1;}:host(:hover) [part="indicator"]:not([data-moving]) {--_mark-width: var(--helix-border-thick);}[part="indicator"][data-moving] {--_mark-width: var(--outline-rail);transition:
 translate var(--helix-duration-normal) var(--helix-easing-spring),
 block-size var(--helix-duration-slow) var(--helix-easing-decelerate),
 inline-size var(--helix-duration-fast) var(--helix-easing-decelerate),
 inset-inline-start var(--helix-duration-fast) var(--helix-easing-decelerate),
-opacity var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-::slotted(a) {
-border-radius: var(--helix-radii-sm);
-color: var(--helix-color-foreground-muted);
-
-font-size: var(--helix-text-xs);
-
-font-weight: var(--helix-weight-medium);
-line-height: var(--helix-leading-normal);
-
-margin-inline-start: var(--outline-rail, var(--helix-border-thick));
-padding-block: var(--helix-space-2xs);
-padding-inline: var(--helix-space-sm);
-text-decoration: none;
-transition:
+opacity var(--helix-duration-fast) var(--helix-easing-standard);}::slotted(a) {border-radius: var(--outline-link-radius, var(--helix-radii-sm));color: var(--outline-link-color, var(--helix-color-foreground-muted));font-size: var(--outline-link-font-size, var(--helix-text-xs));font-weight: var(--helix-weight-medium);line-height: var(--helix-leading-normal);margin-inline-start: var(--outline-rail, var(--helix-border-thick));padding-block: var(--outline-link-padding-block, var(--helix-space-2xs));padding-inline: var(--outline-link-padding-inline, var(--helix-space-sm));text-decoration: none;transition:
 background-color var(--helix-duration-fast) var(--helix-easing-standard),
-color var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-::slotted(a):hover {
-background-color: color-mix(in oklab, var(--helix-color-foreground) 5%, transparent);
-color: var(--helix-color-foreground);
-text-decoration: none;
-}
-
-::slotted(a[aria-current]) {
-color: var(--helix-color-foreground);
-
-font-weight: var(--helix-weight-semibold);
-}
-
-::slotted(a[data-level="2"]) {
-padding-inline-start: calc(var(--helix-space-sm) + var(--outline-indent, var(--helix-space-sm)));
-}
-
-::slotted(a[data-level="3"]) {
-padding-inline-start: calc(
-var(--helix-space-sm) +
+color var(--helix-duration-fast) var(--helix-easing-standard);}::slotted(a):hover {background-color: var(
+--outline-link-hover-background-color,
+color-mix(in oklab, var(--helix-color-foreground) 5%, transparent)
+);color: var(--outline-link-hover-color, var(--helix-color-foreground));text-decoration: none;}::slotted(a[aria-current]) {color: var(--outline-link-current-color, var(--helix-color-foreground));font-weight: var(--outline-link-current-weight, var(--helix-weight-semibold));}::slotted(a[data-level="2"]) {padding-inline-start: calc(
+var(--outline-link-padding-inline, var(--helix-space-sm)) +
+var(--outline-indent, var(--helix-space-sm))
+);}::slotted(a[data-level="3"]) {padding-inline-start: calc(
+var(--outline-link-padding-inline, var(--helix-space-sm)) +
 2 *
 var(--outline-indent, var(--helix-space-sm))
-);
-}
-
-::slotted(a[data-level="4"]) {
-padding-inline-start: calc(
-var(--helix-space-sm) +
+);}::slotted(a[data-level="4"]) {padding-inline-start: calc(
+var(--outline-link-padding-inline, var(--helix-space-sm)) +
 3 *
 var(--outline-indent, var(--helix-space-sm))
-);
-}
-
-::slotted(a[data-level="5"]) {
-padding-inline-start: calc(
-var(--helix-space-sm) +
+);}::slotted(a[data-level="5"]) {padding-inline-start: calc(
+var(--outline-link-padding-inline, var(--helix-space-sm)) +
 4 *
 var(--outline-indent, var(--helix-space-sm))
-);
-}
-
-::slotted(a[data-level="6"]) {
-padding-inline-start: calc(
-var(--helix-space-sm) +
+);}::slotted(a[data-level="6"]) {padding-inline-start: calc(
+var(--outline-link-padding-inline, var(--helix-space-sm)) +
 5 *
 var(--outline-indent, var(--helix-space-sm))
-);
-}
-
-::slotted([slot="heading"]) {
-color: var(--helix-color-foreground);
-font-size: var(--helix-text-xs);
-font-weight: var(--helix-weight-semibold);
-line-height: var(--helix-leading-normal);
-margin-block: 0 var(--helix-space-xs);
-margin-inline: 0;
-padding-inline-start: calc(var(--outline-rail) + var(--helix-space-sm));
-}
-
-@media print {
-:host {
-print-color-adjust: economy;
-}
-}`);
+);}::slotted([slot="heading"]) {color: var(--outline-heading-color, var(--helix-color-foreground));font-size: var(--helix-text-xs);font-weight: var(--helix-weight-semibold);line-height: var(--helix-leading-normal);margin-block: 0 var(--helix-space-xs);margin-inline: 0;padding-inline-start: calc(
+var(--outline-rail) +
+var(--outline-link-padding-inline, var(--helix-space-sm))
+);}@media print {:host {print-color-adjust: economy;}}`);

package/dist/outline/root/outline-root.d.ts

@@ -12,10 +12,11 @@ import type { CSSResultGroup } from 'lit';
  * `data-level` is at the top level. The outline does not read heading levels
  * from the document, because the headings are not always in the document.
  *
- * Links in a nested `<ul>` take their indentation from your own stylesheet:
- * the outline's styles reach the elements slotted into it and nothing inside
- * them. Write the links flat with `data-level` for the indentation drawn here,
- * and screen readers still hear them as nested lists.
+ * Links in a nested `<ul>` are styled by `helix.css`, since the outline's own
+ * styles reach the elements slotted into it and nothing inside them: the lists
+ * lose their bullets, each inner list is inset by `--outline-indent`, and the
+ * links read the same hooks as flat ones. Those rules have no specificity, so
+ * any rule of yours wins. Screen readers hear the levels either way.
  *
  * A heading slotted into `heading` is set above the links, lined up with them.
  *
@@ -25,8 +26,20 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Table of contents, On this page, Outline
  * @documentation https://fusion.dev/helix/components/outline
  *
+ * @cssproperty --outline-heading-color - The color of the heading in the `heading` slot.
  * @cssproperty --outline-indent - How far each level is inset from the one above.
+ * @cssproperty --outline-indicator-color - The color of the mark that moves to the section in view.
+ * @cssproperty --outline-link-color - The color of a link.
+ * @cssproperty --outline-link-current-color - The color of the link to the section in view.
+ * @cssproperty --outline-link-current-weight - The weight of the link to the section in view.
+ * @cssproperty --outline-link-font-size - The size of a link's text.
+ * @cssproperty --outline-link-hover-background-color - The fill behind a link under the pointer.
+ * @cssproperty --outline-link-hover-color - The color of a link under the pointer.
+ * @cssproperty --outline-link-padding-block - The space above and below a link's text.
+ * @cssproperty --outline-link-padding-inline - The space either side of a link's text, before any indent.
+ * @cssproperty --outline-link-radius - The corner radius of a link's hover fill.
  * @cssproperty --outline-rail - The width of the gutter that holds the line and the moving mark.
+ * @cssproperty --outline-rule-color - The color of the line down the leading edge.
  */
 export declare class HelixOutline extends HelixHeadlessOutline {
     static styles: CSSResultGroup;