@fusion.dev/helix 0.146.0 → 0.147.0

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

@@ -1,126 +1,8 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-
---helix-size-checkbox: var(--helix-size-checkbox-sm);
---helix-size-checkbox-loose: calc(var(--helix-size-checkbox) * 1.2);
---helix-size-checkbox-tight: calc(var(--helix-size-checkbox) * 0.8);
---helix-size-control: var(--helix-size-control-sm);
---helix-size-control-loose: calc(var(--helix-size-control) * 1.2);
---helix-size-control-tight: calc(var(--helix-size-control) * 0.8);
---helix-size-icon: var(--helix-size-icon-sm);
---helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);
---helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);
---helix-size-tag: var(--helix-size-tag-sm);
-
---helix-size-avatar: var(--helix-size-avatar-sm);
-
-display: grid;
-grid-template-rows: auto minmax(0, 1fr) auto;
-max-block-size: var(--notifications-max-block-size, none);
-}
-
-:host(:state(media)) {
---notifications-media-column: calc(var(--helix-size-avatar) + var(--helix-space-sm));
-}
-
-[part="header"] {
-align-items: center;
-border-block-end: var(--helix-border-thin) solid
-var(--notifications-rule, var(--helix-color-border));
-display: flex;
-gap: var(--helix-space-sm);
-justify-content: space-between;
-padding-block: var(--helix-space-sm);
-padding-inline: var(--notifications-padding-inline, var(--helix-space-md));
-}
-
-[part="header"][data-empty],
-[part="footer"][data-empty] {
-display: none;
-}
-
-[part="list"] {
-overflow-y: auto;
-}
-
-[part="footer"] {
-border-block-start: var(--helix-border-thin) solid
-var(--notifications-rule, var(--helix-color-border));
-padding-block: var(--helix-space-sm);
-padding-inline: var(--notifications-padding-inline, var(--helix-space-md));
-}
-
-::slotted(helix-notification:last-of-type) {
---notifications-rule: transparent;
-}
-
-[part="mark-all"] {
-background: none;
-border: 0;
-border-radius: var(--helix-radii-sm);
-color: var(--helix-color-foreground-muted);
-cursor: pointer;
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-sm);
-padding-block: var(--helix-space-2xs);
-padding-inline: var(--helix-space-2xs);
-transition: color var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-[part="mark-all"]:hover {
-color: var(--helix-color-foreground);
-}
-
-[part="more"] {
-background: none;
-border: 0;
-border-block-start: var(--helix-border-thin) solid var(--helix-color-border);
-color: var(--helix-color-foreground-muted);
-cursor: pointer;
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-sm);
-inline-size: 100%;
-padding-block: var(--helix-space-sm);
-transition: color var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-[part="more"]:hover {
-color: var(--helix-color-foreground);
-}
-
-[part="more"][aria-disabled="true"],
-[part="more"][aria-disabled="true"]:hover {
-color: var(--helix-color-foreground-subtle);
-cursor: default;
-}
-
-[part="more"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: calc(var(--helix-size-focus-offset) * -1);
-}
-
-[part="mark-all"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-[part="empty"],
-[part="loading"] {
---_collection-inset-block: var(--helix-space-lg);
---_collection-inset-inline: var(--helix-space-md);
-}
-
-@media print {
-:host {
-max-block-size: none;
-}
-
-[part="list"] {
-overflow-y: visible;
-}
-
-[part="mark-all"],
-[part="more"] {
-display: none;
-}
-}`);
+export const styles = createSheet(`:host {--helix-size-checkbox: var(--helix-size-checkbox-sm);--helix-size-checkbox-loose: calc(var(--helix-size-checkbox) * 1.2);--helix-size-checkbox-tight: calc(var(--helix-size-checkbox) * 0.8);--helix-size-control: var(--helix-size-control-sm);--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);--helix-size-icon: var(--helix-size-icon-sm);--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);--helix-size-tag: var(--helix-size-tag-sm);--helix-size-avatar: var(--helix-size-avatar-sm);display: grid;grid-template-rows: auto minmax(0, 1fr) auto;max-block-size: var(--notifications-max-block-size, none);}:host(:state(media)) {--notifications-media-column: calc(var(--helix-size-avatar) + var(--helix-space-sm));}[part="header"] {align-items: center;border-block-end: var(--helix-border-thin) solid
+var(--notifications-rule, var(--helix-color-border));display: flex;gap: var(--helix-space-sm);justify-content: space-between;padding-block: var(--helix-space-sm);padding-inline: var(--notifications-padding-inline, var(--helix-space-lg));}[part="header"][data-empty],
+[part="footer"][data-empty] {display: none;}[part="list"] {overflow-y: auto;}[part="footer"] {border-block-start: var(--helix-border-thin) solid
+var(--notifications-rule, var(--helix-color-border));padding-block: var(--helix-space-sm);padding-inline: var(--notifications-padding-inline, var(--helix-space-lg));}::slotted(helix-notification:last-of-type) {--notifications-rule: transparent;}[part="mark-all"] {background: none;border: 0;border-radius: var(--helix-radii-sm);color: var(--helix-color-foreground-muted);cursor: pointer;font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);padding-block: var(--helix-space-2xs);padding-inline: var(--helix-space-2xs);transition: color var(--helix-duration-fast) var(--helix-easing-standard);}[part="mark-all"]:hover {color: var(--helix-color-foreground);}[part="more"] {background: none;border: 0;border-block-start: var(--helix-border-thin) solid var(--helix-color-border);color: var(--helix-color-foreground-muted);cursor: pointer;font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);inline-size: 100%;padding-block: var(--helix-space-sm);transition: color var(--helix-duration-fast) var(--helix-easing-standard);}[part="more"]:hover {color: var(--helix-color-foreground);}[part="more"][aria-disabled="true"],
+[part="more"][aria-disabled="true"]:hover {color: var(--helix-color-foreground-subtle);cursor: default;}[part="more"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part="mark-all"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="empty"],
+[part="loading"] {--_collection-inset-block: var(--helix-space-lg);--_collection-inset-inline: var(--helix-space-md);}@media print {:host {max-block-size: none;}[part="list"] {overflow-y: visible;}[part="mark-all"],
+[part="more"] {display: none;}}`);

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

@@ -19,13 +19,15 @@ import '../notification/notification.js';
  * @documentation https://fusion.dev/helix/components/notifications
  *
  * @slot - The notifications.
+ * @slot empty - Replaces the words of `empty-text` in the `empty` part, such as a picture and a line of your own.
  * @slot footer - Below the list, for a link to everything.
  * @slot header - Above the list, for a title and the mark-all control.
+ * @slot loading - Replaces the words of `loading-text` in the `loading` part, such as a loader.
  *
  * @csspart list - The list itself.
  * @csspart live - A copy of the empty and loading messages, in a live region that screen readers announce when they change. Visually hidden in the styled tier.
  * @csspart mark-all - The control that marks everything read.
- * @csspart more - The button after the list that asks for more, while `load-more` is set and the feed is not loading.
+ * @csspart more - The button after the list that asks for more, while `load-more` is set. It stays while the feed is loading, in a lighter color and `aria-disabled`, so focus stays on it.
  *
  * @cssproperty --notifications-max-block-size - How tall the feed may get before the list scrolls.
  * @cssproperty --notifications-media-column - Width of the media column that every item keeps when any item in the feed has media.

package/dist/number-input/root/number-input-root.css.js

@@ -1,105 +1,12 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`[part="field"] {
-align-items: center;
-background-color: var(--number-input-background-color, var(--helix-color-well));
-block-size: var(--number-input-size, var(--helix-size-control));
-border: var(--helix-border-thin) solid var(--number-input-border-color, var(--helix-color-border));
-border-radius: var(--number-input-radius, var(--helix-radii-sm));
-box-sizing: border-box;
-display: flex;
-
-overflow: hidden;
-transition: border-color var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-:host(:disabled) [part="field"] {
-cursor: not-allowed;
-opacity: 0.5;
-}
-
-:host([readonly]) [part="field"] {
-background-color: transparent;
-}
-
-[part="control"] {
-font-variant-numeric: tabular-nums;
-padding-inline: var(--number-input-padding-inline, var(--helix-space-xs));
-text-align: center;
-}
-
-slot[name="start"]::slotted(*),
-slot[name="end"]::slotted(*) {
-color: var(--helix-color-foreground-subtle);
-flex: 0 0 auto;
-}
-
-slot[name="start"]::slotted(*) {
-padding-inline-start: var(--helix-space-xs);
-}
-
-slot[name="end"]::slotted(*) {
-padding-inline-end: var(--helix-space-xs);
-}
-
-[part="decrement"],
-[part="increment"] {
-all: unset;
-align-items: center;
-align-self: stretch;
-background-color: var(--number-input-stepper-background-color, transparent);
-box-sizing: border-box;
-color: var(--number-input-stepper-color, var(--helix-color-foreground-muted));
-cursor: pointer;
-display: flex;
-flex: none;
-inline-size: var(--number-input-stepper-size, var(--helix-size-control));
-justify-content: center;
-transition:
+export const styles = createSheet(`[part="field"] {align-items: center;background-color: var(--number-input-background-color, var(--helix-color-well));block-size: var(--number-input-size, var(--helix-size-control));border: var(--helix-border-thin) solid var(--number-input-border-color, var(--helix-color-border));border-radius: var(--number-input-radius, var(--helix-radii-sm));box-sizing: border-box;display: flex;overflow: hidden;transition: border-color var(--helix-duration-fast) var(--helix-easing-standard);}:host(:disabled) [part="field"] {cursor: not-allowed;opacity: 0.5;}:host([readonly]) [part="field"] {background-color: transparent;}[part="control"] {font-variant-numeric: tabular-nums;padding-inline: var(--number-input-padding-inline, var(--helix-space-xs));text-align: center;}slot[name="start"]::slotted(*),
+slot[name="end"]::slotted(*) {color: var(--helix-color-foreground-subtle);flex: 0 0 auto;}slot[name="start"]::slotted(*) {padding-inline-start: var(--helix-space-xs);}slot[name="end"]::slotted(*) {padding-inline-end: var(--helix-space-xs);}[part="decrement"],
+[part="increment"] {all: unset;align-items: center;align-self: stretch;background-color: var(--number-input-stepper-background-color, transparent);box-sizing: border-box;color: var(--number-input-stepper-color, var(--helix-color-foreground-muted));cursor: pointer;display: flex;flex: none;inline-size: var(--number-input-stepper-size, var(--helix-size-control));justify-content: center;transition:
 background-color var(--helix-duration-fast) var(--helix-easing-standard),
-color var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-[part="decrement"] {
-border-inline-end: var(--helix-border-thin) solid
-var(--number-input-stepper-border-color, var(--helix-color-border));
-}
-
-[part="increment"] {
-border-inline-start: var(--helix-border-thin) solid
-var(--number-input-stepper-border-color, var(--helix-color-border));
-}
-
-[part="decrement"]:hover:not(:disabled),
-[part="increment"]:hover:not(:disabled) {
-background-color: var(--number-input-stepper-background-color-hover, var(--helix-color-surface));
-color: var(--number-input-stepper-color-hover, var(--helix-color-foreground));
-}
-
-[part="decrement"]:disabled,
-[part="increment"]:disabled {
-cursor: default;
-opacity: 0.4;
-}
-
-[part="decrement"] svg,
-[part="increment"] svg {
-block-size: var(--number-input-stepper-icon-size, var(--helix-size-icon-tight));
-inline-size: var(--number-input-stepper-icon-size, var(--helix-size-icon-tight));
-}
-
-:host([scrub]) [part="label"] {
-cursor: ew-resize;
-touch-action: none;
-user-select: none;
-}
-
-:host([scrub]:disabled) [part="label"],
-:host([scrub][readonly]) [part="label"] {
-cursor: default;
-}
-
-@media print {
-:host {
-print-color-adjust: exact;
-}
-}`);
+color var(--helix-duration-fast) var(--helix-easing-standard);}[part="decrement"] {border-inline-end: var(--helix-border-thin) solid
+var(--number-input-stepper-border-color, var(--helix-color-border));}[part="increment"] {border-inline-start: var(--helix-border-thin) solid
+var(--number-input-stepper-border-color, var(--helix-color-border));}[part="decrement"]:hover:not(:disabled),
+[part="increment"]:hover:not(:disabled) {background-color: var(--number-input-stepper-background-color-hover, var(--helix-color-surface));color: var(--number-input-stepper-color-hover, var(--helix-color-foreground));}[part="decrement"]:disabled,
+[part="increment"]:disabled {cursor: default;opacity: 0.4;}[part="decrement"] svg,
+[part="increment"] svg {block-size: var(--number-input-stepper-icon-size, var(--helix-size-icon-tight));inline-size: var(--number-input-stepper-icon-size, var(--helix-size-icon-tight));}:host([scrub]) [part="label"] {cursor: ew-resize;touch-action: none;user-select: none;}:host([scrub]:disabled) [part="label"],
+:host([scrub][readonly]) [part="label"] {cursor: default;}@media print {:host {print-color-adjust: exact;}}`);

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 };