@fusion.dev/helix 0.146.0 → 0.148.0

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

@@ -1,113 +1,18 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`[part="field"] {
-align-items: center;
-background-color: var(--date-input-background-color, var(--helix-color-well));
-border: var(--helix-border-thin) solid var(--helix-color-border);
-border-radius: var(--helix-radii-sm);
-display: flex;
-flex-wrap: wrap;
-gap: var(--helix-space-2xs);
-min-block-size: var(--helix-size-control);
-padding-block: var(--helix-space-2xs);
-padding-inline: var(--helix-space-xs);
-transition:
+export const styles = createSheet(`[part="field"] {align-items: center;background-color: var(--date-input-background-color, var(--helix-color-well));border: var(--helix-border-thin) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);display: flex;flex-wrap: wrap;gap: var(--helix-space-2xs);min-block-size: var(--helix-size-control);padding-block: var(--helix-space-2xs);padding-inline: var(--helix-space-xs);transition:
 background-color var(--helix-duration-fast) var(--helix-easing-standard),
-border-color var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-[part="trigger"] {
-all: unset;
-block-size: var(--helix-size-icon);
-box-sizing: border-box;
-color: var(--helix-color-foreground-muted);
-cursor: pointer;
-flex: none;
-inline-size: var(--helix-size-icon);
-
-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
-mask-position: center;
-mask-repeat: no-repeat;
-mask-size: 100%;
-background-color: currentColor;
-transition: color var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-[part="trigger"]:hover {
-color: var(--helix-color-foreground);
-}
-
-[part="trigger"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-[part="surface"] {
---_floating-border-color: var(--date-input-border-color, var(--helix-color-border));
---_floating-border-width: var(--date-input-border-width, var(--helix-border-floating));
---_floating-shadow: var(--date-input-shadow, var(--helix-shadow-floating));
-
-inline-size: max-content;
-padding: var(--helix-space-sm);
-position: absolute;
-}
-
-::slotted([slot="panel-header"]) {
-display: block;
-margin-block-end: var(--helix-space-sm);
-}
-
-::slotted([slot="panel-footer"]) {
-display: block;
-margin-block-start: var(--helix-space-sm);
-}
-
-:host(:disabled) [part="field"] {
-color: var(--helix-color-foreground-subtle);
-}
-
-:host(:disabled) [part="control"],
-:host(:disabled) [part="trigger"] {
-cursor: not-allowed;
-}
-
-@media (prefers-reduced-motion: reduce) {
-[part="field"],
-[part="trigger"] {
-transition: none;
-}
-}
-
-[part="date"] {
-flex: none;
-}
-
-:host([mode="multiple"]) [part="control"] {
-
-flex-basis: 0;
-min-inline-size: var(--helix-size-icon-loose);
-}
-
-[part="segments"] {
---_segment-focus-background-color: var(
+border-color var(--helix-duration-fast) var(--helix-easing-standard);}[part="trigger"] {all: unset;block-size: var(--helix-size-icon);box-sizing: border-box;color: var(--helix-color-foreground-muted);cursor: pointer;flex: none;inline-size: var(--helix-size-icon);mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");mask-position: center;mask-repeat: no-repeat;mask-size: 100%;background-color: currentColor;transition: color var(--helix-duration-fast) var(--helix-easing-standard);}[part="trigger"]:hover {color: var(--helix-color-foreground);}[part="trigger"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="surface"] {--_floating-border-color: var(--date-input-border-color, var(--helix-color-border));--_floating-border-width: var(--date-input-border-width, var(--helix-border-floating));--_floating-shadow: var(--date-input-shadow, var(--helix-shadow-floating));inline-size: max-content;padding: var(--helix-space-sm);position: absolute;}::slotted([slot="panel-header"]) {display: block;margin-block-end: var(--helix-space-sm);}::slotted([slot="panel-footer"]) {display: block;margin-block-start: var(--helix-space-sm);}:host(:disabled) [part="field"] {color: var(--helix-color-foreground-subtle);}:host(:disabled) [part="control"],
+:host(:disabled) [part="trigger"] {cursor: not-allowed;}@media (prefers-reduced-motion: reduce) {[part="field"],
+[part="trigger"] {transition: none;}}[part="date"] {flex: none;}:host([mode="multiple"]) [part="control"] {flex-basis: 0;min-inline-size: var(--helix-size-icon-loose);}[part="segments"] {--_segment-focus-background-color: var(
 --date-input-segment-focus-background-color,
 var(--helix-color-primary)
-);
---_segment-focus-color: var(
+);--_segment-focus-color: var(
 --date-input-segment-focus-color,
 var(--helix-color-foreground-on-primary)
-);
---_segment-literal-color: var(
+);--_segment-literal-color: var(
 --date-input-segment-literal-color,
 var(--helix-color-foreground-muted)
-);
---_segment-placeholder-color: var(
+);--_segment-placeholder-color: var(
 --date-input-segment-placeholder-color,
 var(--helix-color-foreground-subtle)
-);
-}
-
-@media print {
-:host {
-print-color-adjust: exact;
-}
-}`);
+);}@media print {:host {print-color-adjust: exact;}}`);

package/dist/date-picker/root/date-picker-root.css.js

@@ -1,294 +1,32 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-
---_calendar-track: var(--date-picker-track-size, 2.5rem);
---_calendar-row: var(--date-picker-row-size, 2.25rem);
---_calendar-day: var(--date-picker-day-size, 1.875rem);
-display: inline-block;
-}
-
-[part="months"] {
-align-items: start;
-display: grid;
-gap: var(--helix-space-md);
-grid-template-columns: repeat(
+export const styles = createSheet(`:host {--_calendar-track: var(--date-picker-track-size, 2.5rem);--_calendar-row: var(--date-picker-row-size, 2.25rem);--_calendar-day: var(--date-picker-day-size, 1.875rem);display: inline-block;}[part="months"] {align-items: start;display: grid;gap: var(--helix-space-md);grid-template-columns: repeat(
 var(--date-picker-columns, var(--date-picker-column-count, 1)),
 max-content
-);
-justify-content: start;
-}
-
-[part="header"] {
-align-items: center;
-display: grid;
-gap: var(--helix-space-2xs);
-grid-template-columns: var(--_calendar-day) 1fr var(--_calendar-day);
-margin-block-end: var(--helix-space-lg);
-}
-
-[part="heading"] {
-font-size: var(--helix-text-sm);
-font-weight: var(--helix-weight-medium);
-grid-column: 2;
-text-align: center;
-}
-
-[part="previous"] {
-grid-column: 1;
-}
-
-[part="next"] {
-grid-column: 3;
-}
-
-[part="previous"],
-[part="next"] {
-all: unset;
-
-box-sizing: border-box;
-align-items: center;
-block-size: var(--_calendar-day);
-border-radius: var(--helix-radii-sm);
-color: var(--helix-color-foreground-muted);
-cursor: pointer;
-display: inline-flex;
-inline-size: var(--_calendar-day);
-justify-content: center;
-}
-
-[part="previous"]:hover:not(:disabled),
-[part="next"]:hover:not(:disabled) {
-background-color: var(--helix-color-surface-sunken);
-color: var(--helix-color-foreground);
-}
-
-[part="previous"]:focus-visible,
-[part="next"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-[part="heading-button"] {
-all: unset;
-box-sizing: border-box;
-border-radius: var(--helix-radii-sm);
-cursor: pointer;
-padding-inline: var(--helix-space-2xs);
-}
-
-[part="heading-button"]:hover:not(:disabled) {
-background-color: var(--helix-color-surface-sunken);
-}
-
-[part="heading-button"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-[part="periods"] {
-display: grid;
-gap: var(--helix-space-2xs);
-inline-size: calc(var(--_calendar-track) * 7);
-}
-
-[part="period-row"] {
-display: grid;
-gap: var(--helix-space-2xs);
-grid-template-columns: repeat(3, 1fr);
-}
-
-[part~="period"] {
-align-items: center;
-block-size: var(--date-picker-period-size, calc(var(--_calendar-row) * 1.5));
-border-radius: var(--helix-radii-sm);
-cursor: pointer;
-display: inline-flex;
-font-size: var(--helix-text-sm);
-justify-content: center;
-transition: background-color var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-[part~="period"]:hover:not([aria-disabled]) {
-background-color: var(--helix-color-surface-sunken);
-}
-
-[part~="period-current"] {
-box-shadow: inset 0 0 0 var(--helix-border-thin) var(--helix-color-border);
-}
-
-[part~="period-selected"] {
-background-color: var(--date-picker-selected-color, var(--helix-color-surface-inverse));
-color: var(--helix-color-foreground-inverse);
-}
-
-[part~="period-selected"]:hover:not([aria-disabled]) {
-background-color: var(--date-picker-selected-color, var(--helix-color-surface-inverse));
-}
-
-[part~="period-disabled"] {
-color: var(--helix-color-foreground-subtle);
-cursor: default;
-opacity: 0.4;
-}
-
-[part~="period"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-[part="previous"]:disabled,
-[part="next"]:disabled {
-cursor: default;
-opacity: 0.4;
-}
-
-[part="previous"] svg,
+);justify-content: start;}[part="header"] {align-items: center;display: grid;gap: var(--helix-space-2xs);grid-template-columns: var(--_calendar-day) 1fr var(--_calendar-day);margin-block-end: var(--helix-space-lg);}[part="heading"] {font-size: var(--helix-text-sm);font-weight: var(--helix-weight-medium);grid-column: 2;text-align: center;}[part="previous"] {grid-column: 1;}[part="next"] {grid-column: 3;}[part="previous"],
+[part="next"] {all: unset;box-sizing: border-box;align-items: center;block-size: var(--_calendar-day);border-radius: var(--helix-radii-sm);color: var(--helix-color-foreground-muted);cursor: pointer;display: inline-flex;inline-size: var(--_calendar-day);justify-content: center;}[part="previous"]:hover:not(:disabled),
+[part="next"]:hover:not(:disabled) {background-color: var(--helix-color-surface-sunken);color: var(--helix-color-foreground);}[part="previous"]:focus-visible,
+[part="next"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="heading-button"] {all: unset;box-sizing: border-box;border-radius: var(--helix-radii-sm);cursor: pointer;padding-inline: var(--helix-space-2xs);}[part="heading-button"]:hover:not(:disabled) {background-color: var(--helix-color-surface-sunken);}[part="heading-button"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="periods"] {display: grid;gap: var(--helix-space-2xs);inline-size: calc(var(--_calendar-track) * 7);}[part="period-row"] {display: grid;gap: var(--helix-space-2xs);grid-template-columns: repeat(3, 1fr);}[part~="period"] {align-items: center;block-size: var(--date-picker-period-size, calc(var(--_calendar-row) * 1.5));border-radius: var(--helix-radii-sm);cursor: pointer;display: inline-flex;font-size: var(--helix-text-sm);justify-content: center;transition: background-color var(--helix-duration-fast) var(--helix-easing-standard);}[part~="period"]:hover:not([aria-disabled]) {background-color: var(--helix-color-surface-sunken);}[part~="period-current"] {box-shadow: inset 0 0 0 var(--helix-border-thin) var(--helix-color-border);}[part~="period-selected"] {background-color: var(--date-picker-selected-color, var(--helix-color-surface-inverse));color: var(--helix-color-foreground-inverse);}[part~="period-selected"]:hover:not([aria-disabled]) {background-color: var(--date-picker-selected-color, var(--helix-color-surface-inverse));}[part~="period-disabled"] {color: var(--helix-color-foreground-subtle);cursor: default;opacity: 0.4;}[part~="period"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="previous"]:disabled,
+[part="next"]:disabled {cursor: default;opacity: 0.4;}[part="previous"] svg,
 [part="next"] svg,
 ::slotted([slot="previous-icon"]),
-::slotted([slot="next-icon"]) {
-block-size: 1em;
-inline-size: 1em;
-}
-
-[part="week"] {
-display: grid;
-grid-template-columns: repeat(7, var(--_calendar-track));
-}
-
-[part="weekday"] {
-align-items: center;
-block-size: var(--_calendar-track);
-color: var(--helix-color-foreground-subtle);
-display: inline-flex;
-font-size: var(--helix-text-xs);
-font-weight: var(--helix-weight-medium);
-inline-size: var(--_calendar-track);
-justify-content: center;
-padding-block-end: calc(var(--_calendar-track) / 2);
-}
-
-[part~="cell"] {
-align-items: center;
-block-size: var(--_calendar-row);
-cursor: pointer;
-display: inline-flex;
-inline-size: var(--_calendar-track);
-justify-content: center;
-}
-
-[part~="day"] {
-align-items: center;
-block-size: var(--_calendar-day);
-
-border-radius: var(--helix-radii-sm);
-display: inline-flex;
-font-size: var(--helix-text-sm);
-inline-size: var(--_calendar-day);
-justify-content: center;
-transition: background-color var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-[part~="cell"][data-today] [part~="day"] {
-box-shadow: inset 0 0 0 var(--helix-border-thin) var(--helix-color-border);
-}
-
-[part~="cell"][data-outside] [part~="day"] {
-color: var(--helix-color-foreground-subtle);
-}
-
-[part~="cell"][data-outside] {
-cursor: default;
-}
-
-[part~="cell"]:hover:not([aria-disabled], [data-outside]) [part~="day"] {
-background-color: var(--helix-color-surface-sunken);
-}
-
-[part~="cell"][aria-selected]:is([data-range-start], [data-range-middle], [data-range-end]) {
-background-color: var(
+::slotted([slot="next-icon"]) {block-size: 1em;inline-size: 1em;}[part="week"] {display: grid;grid-template-columns: repeat(7, var(--_calendar-track));}[part="weekday"] {align-items: center;block-size: var(--_calendar-track);color: var(--helix-color-foreground-subtle);display: inline-flex;font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium);inline-size: var(--_calendar-track);justify-content: center;padding-block-end: calc(var(--_calendar-track) / 2);}[part~="cell"] {align-items: center;block-size: var(--_calendar-row);cursor: pointer;display: inline-flex;inline-size: var(--_calendar-track);justify-content: center;}[part~="day"] {align-items: center;block-size: var(--_calendar-day);border-radius: var(--helix-radii-sm);display: inline-flex;font-size: var(--helix-text-sm);inline-size: var(--_calendar-day);justify-content: center;transition: background-color var(--helix-duration-fast) var(--helix-easing-standard);}[part~="cell"][data-today] [part~="day"] {box-shadow: inset 0 0 0 var(--helix-border-thin) var(--helix-color-border);}[part~="cell"][data-outside] [part~="day"] {color: var(--helix-color-foreground-subtle);}[part~="cell"][data-outside] {cursor: default;}[part~="cell"]:hover:not([aria-disabled], [data-outside]) [part~="day"] {background-color: var(--helix-color-surface-sunken);}[part~="cell"][aria-selected]:is([data-range-start], [data-range-middle], [data-range-end]) {background-color: var(
 --date-picker-range-color,
 light-dark(
 color-mix(in oklab, var(--helix-color-foreground) 10%, transparent),
 color-mix(in oklab, var(--helix-color-foreground) 14%, transparent)
 )
-);
-}
-
-[part~="cell"][aria-selected]:not([data-range-start]):not([data-range-middle]):not([data-range-end])
-[part~="day"] {
-box-shadow: 0 0 0 calc((var(--_calendar-row) - var(--_calendar-day)) / 2)
+);}[part~="cell"][aria-selected]:not([data-range-start]):not([data-range-middle]):not([data-range-end])
+[part~="day"] {box-shadow: 0 0 0 calc((var(--_calendar-row) - var(--_calendar-day)) / 2)
 var(
 --date-picker-range-color,
 light-dark(
 color-mix(in oklab, var(--helix-color-foreground) 10%, transparent),
 color-mix(in oklab, var(--helix-color-foreground) 14%, transparent)
 )
-);
-}
-
-[part~="cell"][data-range-start],
-[part~="cell"][aria-selected]:not([data-range-middle]):not([data-range-end]) {
-border-end-start-radius: var(--helix-radii-sm);
-border-start-start-radius: var(--helix-radii-sm);
-}
-
-[part~="cell"][data-range-end],
-[part~="cell"][aria-selected]:not([data-range-middle]):not([data-range-start]) {
-border-end-end-radius: var(--helix-radii-sm);
-border-start-end-radius: var(--helix-radii-sm);
-}
-
-[part~="cell"][aria-selected]:not([data-range-middle]) [part~="day"] {
-background-color: var(--date-picker-selected-color, var(--helix-color-surface-inverse));
-color: var(--helix-color-foreground-inverse);
-}
-
-[part~="cell"][aria-disabled] {
-cursor: default;
-}
-
-[part~="day-disabled"] {
-color: var(--helix-color-foreground-subtle);
-opacity: 0.4;
-}
-
-[part~="cell"]:focus-visible {
-outline: none;
-}
-
-[part~="cell"]:focus-visible [part~="day"] {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-:host(:dir(rtl)) ::slotted([slot="previous-icon"]),
-:host(:dir(rtl)) ::slotted([slot="next-icon"]) {
-scale: -1 1;
-}
-
-:host(:disabled) {
-cursor: not-allowed;
-opacity: 0.5;
-}
-
-:host([invalid]) [part~="cell"][aria-selected] [part~="day"] {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-danger);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-:host([invalid]) [part~="cell"]:focus-visible [part~="day"] {
-outline-color: var(--helix-color-danger);
-}
-
-:host([invalid]) [part="grid"][data-unset] {
-border-radius: var(--helix-radii-sm);
-outline: var(--helix-size-focus-ring) solid var(--helix-color-danger);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-@media print {
-:host {
-box-shadow: none;
-print-color-adjust: exact;
-}
-}`);
+);}[part~="cell"][data-range-start],
+[part~="cell"][aria-selected]:not([data-range-middle]):not([data-range-end]) {border-end-start-radius: var(--helix-radii-sm);border-start-start-radius: var(--helix-radii-sm);}[part~="cell"][data-range-end],
+[part~="cell"][aria-selected]:not([data-range-middle]):not([data-range-start]) {border-end-end-radius: var(--helix-radii-sm);border-start-end-radius: var(--helix-radii-sm);}[part~="cell"][aria-selected]:not([data-range-middle]) [part~="day"] {background-color: var(--date-picker-selected-color, var(--helix-color-surface-inverse));color: var(--helix-color-foreground-inverse);}[part~="cell"][aria-disabled] {cursor: default;}[part~="day-disabled"] {color: var(--helix-color-foreground-subtle);opacity: 0.4;}[part~="cell"]:focus-visible {outline: none;}[part~="cell"]:focus-visible [part~="day"] {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}:host(:dir(rtl)) ::slotted([slot="previous-icon"]),
+:host(:dir(rtl)) ::slotted([slot="next-icon"]) {scale: -1 1;}:host(:disabled) {cursor: not-allowed;opacity: 0.5;}:host([invalid]) [part~="cell"][aria-selected] [part~="day"],
+:host(:state(invalid)) [part~="cell"][aria-selected] [part~="day"] {outline: var(--helix-size-focus-ring) solid var(--helix-color-danger);outline-offset: var(--helix-size-focus-offset);}:host([invalid]) [part~="cell"]:focus-visible [part~="day"],
+:host(:state(invalid)) [part~="cell"]:focus-visible [part~="day"] {outline-color: var(--helix-color-danger);}:host([invalid]) [part="grid"][data-unset],
+:host(:state(invalid)) [part="grid"][data-unset] {border-radius: var(--helix-radii-sm);outline: var(--helix-size-focus-ring) solid var(--helix-color-danger);outline-offset: var(--helix-size-focus-offset);}[part="feedback"] {color: var(--date-picker-feedback-color, var(--helix-color-danger));font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-sm) var(--helix-space-none) var(--helix-space-none);}@media print {:host {box-shadow: none;print-color-adjust: exact;}}`);

package/dist/date-picker/root/date-picker-root.d.ts

@@ -25,6 +25,7 @@ import type { CSSResultGroup } from 'lit';
  *
  * @cssproperty --date-picker-columns - Months per row. Two unless there is only one.
  * @cssproperty --date-picker-day-size - Width and height of a day.
+ * @cssproperty --date-picker-feedback-color - The color of the message under the calendar, while `feedback` is set.
  * @cssproperty --date-picker-period-size - Height of a month or a year in the months and years views, where `max-view` is set.
  * @cssproperty --date-picker-range-color - Band behind the days in a range.
  * @cssproperty --date-picker-row-size - Height of a week row.

package/dist/description-list/item/description-list-item.css.js

@@ -1,42 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-align-items: baseline;
-display: grid;
-grid-column: 1 / -1;
-grid-template-columns: subgrid;
-row-gap: var(--helix-space-2xs);
-}
-
-[part="label"] {
-color: var(--helix-color-foreground-muted);
-font-size: var(--helix-text-sm);
-font-weight: var(--helix-weight-medium);
-margin: 0;
-}
-
-[part="value"] {
-color: var(--helix-color-foreground);
-font-variant-numeric: var(--_description-list-value-figures, normal);
-justify-self: var(--_description-list-value-align, stretch);
-margin: 0;
-min-inline-size: 0;
-overflow-wrap: anywhere;
-text-align: var(--_description-list-value-align, start);
-}
-
-::slotted(dd) {
-color: var(--helix-color-foreground);
-font-variant-numeric: var(--_description-list-value-figures, normal);
-grid-column: -2 / -1;
-justify-self: var(--_description-list-value-align, stretch);
-margin: 0;
-min-inline-size: 0;
-overflow-wrap: anywhere;
-text-align: var(--_description-list-value-align, start);
-}
-
-@media print {
-:host {
-break-inside: avoid;
-}
-}`);
+export const styles = createSheet(`:host {align-items: var(--description-list-item-align, baseline);display: grid;grid-column: 1 / -1;grid-template-columns: subgrid;row-gap: var(--description-list-item-gap, var(--helix-space-2xs));}[part="label"] {color: var(--description-list-label-color, var(--helix-color-foreground-muted));font-size: var(--description-list-label-font-size, var(--helix-text-sm));font-weight: var(--description-list-label-weight, var(--helix-weight-medium));margin: 0;}[part="value"] {color: var(--description-list-value-color, var(--helix-color-foreground));font-variant-numeric: var(--_description-list-value-figures, normal);justify-self: var(--_description-list-value-align, stretch);margin: 0;min-inline-size: 0;overflow-wrap: anywhere;text-align: var(--_description-list-value-align, start);}::slotted(dd) {color: var(--description-list-value-color, var(--helix-color-foreground));font-variant-numeric: var(--_description-list-value-figures, normal);grid-column: -2 / -1;justify-self: var(--_description-list-value-align, stretch);margin: 0;min-inline-size: 0;overflow-wrap: anywhere;text-align: var(--_description-list-value-align, start);}::slotted([slot="actions"]) {margin-inline-start: var(--description-list-actions-gap, var(--helix-space-xs));vertical-align: middle;}@media print {:host {break-inside: avoid;}}`);

package/dist/description-list/item/description-list-item.d.ts

@@ -10,6 +10,14 @@ import type { CSSResultGroup } from 'lit';
  * @since 0.1.0
  * @status stable
  * @documentation https://fusion.dev/helix/components/description-list
+ *
+ * @cssproperty --description-list-actions-gap - The space between the value and the controls in `actions`.
+ * @cssproperty --description-list-item-align - How a label and its value line up beside each other, as `align-items`. Defaults to `baseline`; `center` suits a value taller than a line, such as an avatar.
+ * @cssproperty --description-list-item-gap - The space between a label and its value when the label sits over it.
+ * @cssproperty --description-list-label-color - The color of a label.
+ * @cssproperty --description-list-label-font-size - The size of a label's text.
+ * @cssproperty --description-list-label-weight - The weight of a label's text.
+ * @cssproperty --description-list-value-color - The color of a value.
  */
 export declare class HelixDescriptionListItem extends HelixHeadlessDescriptionListItem {
     static styles: CSSResultGroup;

package/dist/description-list/root/description-list-root.css.js

@@ -1,35 +1,3 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-container-type: inline-size;
-display: block;
-}
-
-[part="list"] {
-display: grid;
-gap: var(--description-list-gap, var(--helix-space-md));
-margin: 0;
-}
-
-:host([direction="row"]) [part="list"] {
-column-gap: var(--helix-space-lg);
-grid-template-columns: max-content minmax(0, 1fr);
-row-gap: var(--description-list-gap, var(--helix-space-sm));
-}
-
-@container (inline-size < 22rem) {
-:host([direction="row"]) [part="list"] {
-grid-template-columns: minmax(0, 1fr);
-row-gap: var(--description-list-gap, var(--helix-space-md));
-}
-}
-
-:host([width="auto"]) {
-container-type: normal;
-inline-size: fit-content;
-max-inline-size: 100%;
-}
-
-:host([direction="row"][justify="between"]) {
---_description-list-value-align: end;
---_description-list-value-figures: tabular-nums;
-}`);
+export const styles = createSheet(`:host {container-type: inline-size;display: block;}[part="list"] {--_description-list-gap: var(--description-list-gap, var(--helix-space-md));display: grid;gap: var(--_description-list-gap);margin: 0;}:host([direction="row"]) [part="list"] {--_description-list-gap: var(--description-list-gap, var(--helix-space-sm));column-gap: var(--description-list-column-gap, var(--helix-space-lg));grid-template-columns: var(--description-list-label-width, max-content) minmax(0, 1fr);row-gap: var(--_description-list-gap);}@container (inline-size < 22rem) {:host([direction="row"]) [part="list"] {--_description-list-gap: var(--description-list-gap, var(--helix-space-md));grid-template-columns: minmax(0, 1fr);row-gap: var(--_description-list-gap);}}:host([width="auto"]) {container-type: normal;inline-size: fit-content;max-inline-size: 100%;}:host([direction="row"][justify="between"]) {--_description-list-value-align: end;--_description-list-value-figures: tabular-nums;}:host([divided]) ::slotted(:not(:first-child)) {border-block-start: var(--description-list-divider-width, var(--helix-border-thin)) solid
+var(--description-list-divider-color, var(--helix-color-border));padding-block-start: var(--_description-list-gap);}`);

package/dist/description-list/root/description-list-root.d.ts

@@ -18,16 +18,29 @@ import type { CSSResultGroup } from 'lit';
  * wide as its widest pair, labels sit on the start edge, and values sit on the
  * end edge in tabular figures, as in a set of totals.
  *
+ * **For a rule between pairs, set `divided`.** The rule sits in the middle of
+ * the gap, so the pairs keep the same room on either side of it.
+ *
  * @since 0.1.0
  * @status stable
  * @category data
  * @aliases Data list, Key-value list, Details, Properties
  * @documentation https://fusion.dev/helix/components/description-list
  *
+ * @cssproperty --description-list-column-gap - The space between the column of labels and the column of values, with `direction="row"`.
+ * @cssproperty --description-list-divider-color - The color of the rule between pairs, with `divided`.
+ * @cssproperty --description-list-divider-width - The thickness of the rule between pairs, with `divided`.
  * @cssproperty --description-list-gap - Space between one pair and the next. The default is smaller with `direction="row"` than when stacked. Setting this property replaces both defaults.
+ * @cssproperty --description-list-label-width - The width of the column of labels, with `direction="row"`. Defaults to the width of the longest label; set a length such as `10rem` to line up several lists.
  */
 export declare class HelixDescriptionList extends HelixHeadlessDescriptionList {
     static styles: CSSResultGroup;
+    /**
+     * Draws a rule between one pair and the next, in the middle of the gap, as
+     * a details panel with many rows often does. Off by default, where space
+     * alone separates the pairs.
+     */
+    divided: boolean;
     /**
      * Where the values sit, beside their labels.
      *

package/dist/description-list/root/description-list-root.js

@@ -9,8 +9,15 @@ import { HelixHeadlessDescriptionList } from '@fusion.dev/helix-headless/descrip
 import { property } from 'lit/decorators.js';
 import { styles } from './description-list-root.css.js';
 let HelixDescriptionList = class HelixDescriptionList extends HelixHeadlessDescriptionList {
+    constructor() {
+        super(...arguments);
+        this.divided = false;
+    }
     static { this.styles = styles; }
 };
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixDescriptionList.prototype, "divided", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixDescriptionList.prototype, "justify", void 0);