@fusion.dev/helix 0.30.1 → 0.31.0

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

@@ -97,6 +97,10 @@ min-inline-size: 0;
 text-align: center;
 }
 
+:host([dismissible]) [part="content"] {
+padding-inline: calc(var(--helix-size-icon) + var(--helix-space-2xs) * 2 + var(--helix-space-xs));
+}
+
 [part="actions"] slot::slotted(*) {
 margin-inline-start: var(--helix-space-md);
 }

package/dist/app-header/root/app-header-root.css.js

@@ -15,6 +15,8 @@ export const styles = createSheet(`:host {
 
 background-color: var(--app-header-background-color, var(--helix-color-background));
 border-block-end: var(--helix-border-thin) solid var(--app-header-border-color, transparent);
+
+container-type: inline-size;
 display: block;
 inline-size: 100%;
 
@@ -54,7 +56,7 @@ align-items: center;
 block-size: var(--app-header-block-size, var(--helix-size-header));
 display: grid;
 gap: var(--helix-space-lg);
-grid-template-columns: 1fr auto 1fr;
+grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr);
 margin-inline: auto;
 max-inline-size: var(--app-header-max-inline-size, 72rem);
 padding-inline: var(--app-header-padding, var(--helix-space-lg));
@@ -94,7 +96,8 @@ display: flex;
 
 position: relative;
 gap: var(--helix-space-md);
-justify-content: center;
+
+justify-content: safe center;
 
 min-inline-size: 0;
 overflow-x: auto;
@@ -104,6 +107,13 @@ overflow-x: auto;
 justify-content: flex-start;
 }
 
+@container (inline-size < 24rem) {
+[part="row"] {
+gap: var(--helix-space-md);
+padding-inline: var(--app-header-padding, var(--helix-space-md));
+}
+}
+
 @media print {
 :host {
 display: none;

package/dist/bar-chart/root/bar-chart-root.css.js

@@ -81,11 +81,11 @@ text-align: end;
 --_bar-chart-series: var(--chart-series);
 }
 
-[part="plot"]:has([data-active]) [part="group"]:not([data-active]) {
+[part="plot"]:has([data-active]) [part~="group"]:not([data-active]) {
 opacity: 0.45;
 }
 
-[part="group"] {
+[part~="group"] {
 transition: opacity var(--helix-duration-fast) var(--helix-easing-decelerate);
 }
 

package/dist/breadcrumbs/breadcrumb/breadcrumb.css.js

@@ -22,13 +22,14 @@ gap: var(--breadcrumbs-gap, var(--helix-space-xs));
 
 [part="separator"] {
 color: var(--breadcrumbs-separator-color, var(--helix-color-foreground-subtle));
-display: inline-flex;
+display: block;
 user-select: none;
 }
 
 [part="separator"] svg {
 block-size: 1em;
 inline-size: 1em;
+vertical-align: calc(0.5cap - 0.5em);
 }
 
 :host(:first-child) [part="separator"] {
@@ -81,10 +82,18 @@ padding: var(--helix-space-2xs) var(--helix-space-xs);
 text-decoration: none;
 }
 
+:host(:first-child) a[part="link"] {
+margin-inline-start: calc(var(--helix-space-xs) * -1);
+}
+
 :host(:not([href])) [part="link"] {
 padding-block: var(--helix-space-none);
 }
 
+:host(:not([href]):not([current])) [part="link"] {
+padding-inline: var(--helix-space-none);
+}
+
 a[part="link"]:hover {
 background-color: var(
 --breadcrumbs-hover-color,

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

@@ -237,7 +237,7 @@ var(--_carousel-per-view)
 --_carousel-per-view: 5;
 }
 
-[part="indicator"] {
+[part~="indicator"] {
 
 --_carousel-indicator-motion: var(--helix-duration-slow) var(--helix-easing-emphasized);
 all: unset;
@@ -252,29 +252,29 @@ background-color var(--_carousel-indicator-motion),
 inline-size var(--_carousel-indicator-motion);
 }
 
-[part="indicator"][data-current] {
+[part~="indicator"][data-current] {
 background-color: var(--helix-color-primary);
 inline-size: var(--helix-space-lg);
 }
 
-:host([indicator-placement="inline-start"]) [part="indicator"],
-:host([indicator-placement="inline-end"]) [part="indicator"] {
+:host([indicator-placement="inline-start"]) [part~="indicator"],
+:host([indicator-placement="inline-end"]) [part~="indicator"] {
 transition:
 background-color var(--_carousel-indicator-motion),
 block-size var(--_carousel-indicator-motion);
 }
 
-:host([indicator-placement="inline-start"]) [part="indicator"][data-current],
-:host([indicator-placement="inline-end"]) [part="indicator"][data-current] {
+:host([indicator-placement="inline-start"]) [part~="indicator"][data-current],
+:host([indicator-placement="inline-end"]) [part~="indicator"][data-current] {
 block-size: var(--helix-space-lg);
 inline-size: var(--helix-space-xs);
 }
 
-[part="indicator"]:hover {
+[part~="indicator"]:hover {
 background-color: var(--helix-color-foreground-muted);
 }
 
-[part="indicator"]:focus-visible {
+[part~="indicator"]:focus-visible {
 outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
 outline-offset: var(--helix-size-focus-offset);
 }
@@ -337,13 +337,13 @@ padding-inline: var(--helix-space-none);
 padding-inline-start: var(--helix-space-sm);
 }
 
-:host([orientation="vertical"]:not([indicator-placement])) [part="indicator"] {
+:host([orientation="vertical"]:not([indicator-placement])) [part~="indicator"] {
 transition:
 background-color var(--_carousel-indicator-motion),
 block-size var(--_carousel-indicator-motion);
 }
 
-:host([orientation="vertical"]:not([indicator-placement])) [part="indicator"][data-current] {
+:host([orientation="vertical"]:not([indicator-placement])) [part~="indicator"][data-current] {
 block-size: var(--helix-space-lg);
 inline-size: var(--helix-space-xs);
 }

package/dist/chat/composer/chat-composer.css.js

@@ -29,7 +29,7 @@ font-size: var(--helix-text-sm);
 line-height: var(--helix-leading-normal);
 max-block-size: var(--chat-composer-max-block-size, 12rem);
 padding-block: var(--helix-space-2xs);
-padding-inline: var(--helix-space-none);
+padding-inline: calc(var(--helix-space-sm) - var(--helix-space-xs) - var(--helix-border-thin));
 resize: none;
 }
 

package/dist/chat/message/chat-message.css.js

@@ -272,6 +272,8 @@ color: var(--helix-color-foreground);
 cursor: pointer;
 font: inherit;
 font-weight: var(--helix-weight-medium);
+
+margin-inline-end: calc(var(--helix-space-2xs) * -1);
 min-block-size: calc(var(--helix-size-control-tight) - var(--helix-space-2xs));
 padding-block: var(--helix-space-2xs);
 padding-inline: var(--helix-space-2xs);

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

@@ -108,11 +108,7 @@ padding-inline: var(--chat-padding-inline, var(--helix-space-md));
 
 [part="composer"] {
 padding-block: var(--helix-space-sm);
-padding-inline: calc(
-var(--chat-padding-inline, var(--helix-space-md)) -
-var(--helix-space-xs) -
-var(--helix-border-thin)
-);
+padding-inline: var(--chat-padding-inline, var(--helix-space-md));
 }
 
 [part="empty"],

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

@@ -61,7 +61,7 @@ var(--checkbox-checked-color, var(--helix-color-foreground))
 );
 }
 
-[part="mark"] {
+[part~="mark"] {
 
 background-color: var(--checkbox-mark-color, var(--helix-color-foreground));
 block-size: var(--_checkbox-size);
@@ -77,12 +77,12 @@ scale: 0;
 transition: scale var(--helix-duration-fast) var(--helix-easing-emphasized);
 }
 
-:host(:state(checked)) [part="mark"],
-:host([indeterminate]) [part="mark"] {
+:host(:state(checked)) [part~="mark"],
+:host([indeterminate]) [part~="mark"] {
 scale: 1;
 }
 
-:host([indeterminate]) [part="mark"] {
+:host([indeterminate]) [part~="mark"] {
 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.5' stroke-linecap='round'%3E%3Cpath d='M7 12h10'/%3E%3C/svg%3E");
 }
 

package/dist/code-block/root/code-block-root.css.js

@@ -1,5 +1,13 @@
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
+
+--_code-block-line: calc(var(--helix-text-sm) * var(--helix-leading-normal));
+--_code-block-copy-inset: calc(
+var(--helix-space-sm) +
+(var(--_code-block-line) - var(--helix-size-control-sm)) /
+2
+);
+--_code-block-gutter: calc(var(--helix-size-control-sm) + var(--_code-block-copy-inset) * 2);
 display: flex;
 flex-direction: column;
 }
@@ -41,8 +49,9 @@ block-size: 100%;
 }
 
 [part="copy"] {
-inset-block-start: var(--helix-space-2xs);
-inset-inline-end: var(--helix-space-2xs);
+--icon-button-size: var(--helix-size-control-sm);
+inset-block-start: var(--_code-block-copy-inset);
+inset-inline-end: var(--_code-block-copy-inset);
 position: absolute;
 }
 
@@ -59,7 +68,7 @@ padding-inline: var(--helix-space-md);
 }
 
 :host(:not([no-copy])) [part="block"] {
-padding-inline-end: calc(var(--helix-size-control) + var(--helix-space-sm));
+padding-inline-end: var(--_code-block-gutter);
 }
 
 [part="header"] + [part="frame"] [part="block"] {
@@ -75,6 +84,11 @@ font-size: var(--helix-text-sm);
 line-height: var(--helix-leading-normal);
 }
 
+:host(:not([diff])) [part="code"] {
+display: block;
+overflow-x: auto;
+}
+
 :host([diff]) {
 gap: var(--helix-space-md);
 }
@@ -134,7 +148,7 @@ text-decoration: none;
 }
 
 :host(:not([no-copy])) :is([part="hunk"], [part="context"], [part="added"], [part="removed"]) {
-padding-inline-end: calc(var(--helix-size-control) + var(--helix-space-sm));
+padding-inline-end: var(--_code-block-gutter);
 }
 
 [part="hunk"] {

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

@@ -67,10 +67,8 @@ position: absolute;
 }
 
 [part="picker"] {
---color-picker-grid-radius: var(--helix-radii-none);
---color-picker-padding: var(--helix-space-sm);
-
 display: block;
+padding: var(--helix-space-sm);
 }
 
 @media (prefers-reduced-motion: reduce) {

package/dist/data-table/root/data-table-root.css.js

@@ -11,22 +11,64 @@ inline-size: 100%;
 overflow-x: auto;
 }
 
+[part="table"] {
+--_data-table-fade: to right;
+animation: data-table-edges linear both;
+animation-timeline: scroll(self inline);
+mask-image: linear-gradient(
+var(--_data-table-fade),
+transparent,
+#000 var(--_data-table-fade-start, 0rem),
+#000 calc(100% - var(--_data-table-fade-end, 0rem)),
+transparent
+);
+}
+
+:host(:dir(rtl)) [part="table"] {
+--_data-table-fade: to left;
+}
+
+@keyframes data-table-edges {
+0% {
+--_data-table-fade-end: var(--helix-space-xl);
+--_data-table-fade-start: 0rem;
+}
+
+5%,
+95% {
+--_data-table-fade-end: var(--helix-space-xl);
+--_data-table-fade-start: var(--helix-space-xl);
+}
+
+100% {
+--_data-table-fade-end: 0rem;
+--_data-table-fade-start: var(--helix-space-xl);
+}
+}
+
+@media (prefers-reduced-motion: reduce) {
+[part="table"] {
+animation: none;
+}
+}
+
 [part="head"],
 [part="row"] {
 display: contents;
 }
 
-[part="cell"] {
+[part~="cell"] {
 border-block-end: var(--helix-border-thin) solid
 var(--data-table-rule-color, var(--helix-color-border));
 color: var(--data-table-color, var(--helix-color-foreground));
 font-family: var(--helix-font-sans);
 font-size: var(--data-table-text, var(--helix-text-sm));
 padding-block: var(--data-table-padding-block, var(--helix-space-sm));
-padding-inline: var(--data-table-padding-inline, var(--helix-space-sm));
+
+padding-inline: var(--data-table-padding-inline, var(--helix-space-none) var(--helix-space-md));
 }
 
-[part="row"]:last-of-type [part="cell"] {
+[part="row"]:last-of-type [part~="cell"] {
 border-block-end-color: transparent;
 }
 
@@ -46,7 +88,7 @@ text-align: start;
 cursor: pointer;
 }
 
-[part="select"],
+[part~="select"],
 [part="select-all"] {
 align-items: center;
 border-block-end: var(--helix-border-thin) solid
@@ -57,7 +99,7 @@ padding-block: var(--data-table-padding-block, var(--helix-space-sm));
 padding-inline: var(--data-table-padding-inline, var(--helix-space-sm));
 }
 
-[part="row"]:last-of-type [part="select"] {
+[part="row"]:last-of-type [part~="select"] {
 border-block-end-color: transparent;
 }
 

package/dist/data-table/root/data-table-root.d.ts

@@ -34,6 +34,7 @@ import '../../table/index.js';
  * @slot toolbar - Above the grid, for a search field or actions.
  *
  * @csspart cell - One cell.
+ * @csspart cell-selected - A cell of a selected row, beside `cell`.
  * @csspart table - The grid.
  *
  * @cssproperty --data-table-block-size - How tall the scrolling box is while `windowed`.

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

@@ -87,7 +87,7 @@ justify-content: center;
 padding-block-end: calc(var(--_calendar-track) / 2);
 }
 
-[part="cell"] {
+[part~="cell"] {
 align-items: center;
 block-size: var(--_calendar-row);
 cursor: pointer;
@@ -96,7 +96,7 @@ inline-size: var(--_calendar-track);
 justify-content: center;
 }
 
-[part="day"] {
+[part~="day"] {
 align-items: center;
 block-size: var(--_calendar-day);
 
@@ -108,19 +108,19 @@ justify-content: center;
 transition: background-color var(--helix-duration-fast) var(--helix-easing-standard);
 }
 
-[part="cell"][data-today] [part="day"] {
+[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"] {
+[part~="cell"][data-outside] [part~="day"] {
 color: var(--helix-color-foreground-subtle);
 }
 
-[part="cell"]:hover:not([aria-disabled], [data-outside]) [part="day"] {
+[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]) {
+[part~="cell"][aria-selected]:is([data-range-start], [data-range-middle], [data-range-end]) {
 background-color: var(
 --date-picker-range-color,
 light-dark(
@@ -130,8 +130,8 @@ 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"] {
+[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,
@@ -142,37 +142,37 @@ 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]) {
+[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]) {
+[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"] {
+[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] {
+[part~="cell"][aria-disabled] {
 cursor: default;
 }
 
-[part="cell"][aria-disabled] [part="day"] {
+[part~="cell"][aria-disabled] [part~="day"] {
 color: var(--helix-color-foreground-subtle);
 opacity: 0.4;
 }
 
-[part="cell"]:focus-visible {
+[part~="cell"]:focus-visible {
 outline: none;
 }
 
-[part="cell"]:focus-visible [part="day"] {
+[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);
 }
@@ -189,12 +189,12 @@ cursor: not-allowed;
 opacity: 0.5;
 }
 
-:host([invalid]) [part="cell"][aria-selected] [part="day"] {
+: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"] {
+:host([invalid]) [part~="cell"]:focus-visible [part~="day"] {
 outline-color: var(--helix-color-danger);
 }
 

package/dist/donut-chart/root/donut-chart-root.css.js

@@ -24,7 +24,7 @@ inline-size: 100%;
 }
 
 [part="track"],
-[part="segment"] {
+[part~="segment"] {
 transform: rotate(-90deg);
 transform-box: fill-box;
 transform-origin: center;
@@ -34,7 +34,7 @@ transform-origin: center;
 stroke: var(--donut-chart-track-color, var(--helix-color-surface-sunken));
 }
 
-[part="segment"] {
+[part~="segment"] {
 stroke-linecap: butt;
 
 stroke-width: var(--donut-chart-stroke);
@@ -65,20 +65,20 @@ place-items: center;
 text-align: center;
 }
 
-[part="segment"] {
+[part~="segment"] {
 stroke: var(--chart-series);
 }
 
-[part="segment"][data-active] {
+[part~="segment"][data-active] {
 stroke-width: calc(var(--donut-chart-stroke) * 1.18);
 }
 
-:host([emphasis="outlined"]) [part="segment"][data-active] {
+:host([emphasis="outlined"]) [part~="segment"][data-active] {
 stroke: var(--chart-series);
 stroke-width: var(--donut-chart-stroke);
 }
 
-[part="segment"] {
+[part~="segment"] {
 transition:
 r var(--helix-duration-normal) var(--helix-easing-decelerate),
 stroke var(--helix-duration-fast) var(--helix-easing-decelerate),
@@ -88,7 +88,7 @@ stroke-width var(--helix-duration-fast) var(--helix-easing-decelerate);
 }
 
 @starting-style {
-[part="segment"] {
+[part~="segment"] {
 stroke-dasharray: 0 9999;
 }
 }
@@ -97,7 +97,7 @@ stroke-dasharray: 0 9999;
 transition: r var(--helix-duration-normal) var(--helix-easing-decelerate);
 }
 
-[part="segment"] {
+[part~="segment"] {
 cursor: crosshair;
 }
 
@@ -106,7 +106,7 @@ aspect-ratio: 100 / calc(40 + var(--donut-chart-stroke, 16) / 2);
 }
 
 :host([sweep="half"]) [part="track"],
-:host([sweep="half"]) [part="segment"] {
+:host([sweep="half"]) [part~="segment"] {
 transform: rotate(180deg);
 }
 
@@ -134,7 +134,7 @@ print-color-adjust: exact;
 }
 }
 
-:host([emphasis="subtle"]) [part="segment"] {
+:host([emphasis="subtle"]) [part~="segment"] {
 stroke: color-mix(
 in oklab,
 var(--chart-series) 30%,
@@ -147,7 +147,7 @@ fill: none;
 stroke: none;
 }
 
-:host([emphasis="outlined"]) [part="segment"] {
+:host([emphasis="outlined"]) [part~="segment"] {
 stroke: color-mix(
 in oklab,
 var(--chart-series) 55%,
@@ -161,10 +161,10 @@ stroke: var(--chart-series);
 stroke-width: var(--donut-chart-edge-stroke, 3);
 }
 
-:host([material="glass"]) [part="segment"] {
+:host([material="glass"]) [part~="segment"] {
 stroke-opacity: calc(0.62 * var(--helix-material-opacity));
 }
 
-:host([material="frosted"]) [part="segment"] {
+:host([material="frosted"]) [part~="segment"] {
 stroke-opacity: calc(0.88 * var(--helix-material-opacity));
 }`);

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

@@ -126,6 +126,18 @@ transform: translate(0, 0);
 flex: 0 0 auto;
 }
 
+::slotted([slot="header"]) {
+color: var(--helix-color-foreground);
+display: block;
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-lg);
+font-weight: var(--helix-weight-semibold);
+letter-spacing: var(--helix-tracking-tight);
+line-height: var(--helix-leading-tight);
+margin: var(--helix-space-none);
+margin-block-end: var(--helix-space-md);
+}
+
 [part="content"] {
 flex: 1 1 auto;
 min-block-size: 0;

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

@@ -69,9 +69,9 @@ position: absolute;
 }
 
 [part="tooltip-label"] {
-color: var(--helix-color-foreground-muted);
 display: block;
 font-weight: var(--helix-weight-medium);
+opacity: 0.72;
 }
 
 [part="tooltip-cell"] {
@@ -82,7 +82,7 @@ justify-content: space-between;
 }
 
 [part="tooltip-name"] {
-color: var(--helix-color-foreground-muted);
+opacity: 0.72;
 }
 
 [part="tooltip-value"] {

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

@@ -33,6 +33,7 @@ import '../../tooltip/index.js';
  * @csspart strip - The grid of cells.
  * @csspart tooltip - The bubble, forwarded from `Tooltip`.
  * @csspart tooltip-anchor - The `Tooltip` element itself.
+ * @csspart tooltip-arrow - The bubble's point, forwarded from `Tooltip`.
  * @csspart tooltip-cell - One column's name and value inside the tooltip.
  * @csspart tooltip-label - The reading's own name inside the tooltip.
  * @csspart tooltip-name - A column's name inside the tooltip.

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

@@ -42,7 +42,7 @@ background-color: transparent;
 }
 
 [part="clear"],
-[part="reveal"] {
+[part~="reveal"] {
 --icon-size: var(--helix-size-icon-tight);
 all: unset;
 
@@ -60,17 +60,17 @@ transition: color var(--helix-duration-fast) var(--helix-easing-standard);
 }
 
 [part="clear"]:hover,
-[part="reveal"]:hover {
+[part~="reveal"]:hover {
 color: var(--helix-color-foreground);
 }
 
 [part="clear"]:focus-visible,
-[part="reveal"]:focus-visible {
+[part~="reveal"]:focus-visible {
 outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
 outline-offset: var(--helix-size-focus-offset);
 }
 
-[part="reveal"][aria-pressed="true"] {
+[part~="reveal"][aria-pressed="true"] {
 color: var(--helix-color-foreground);
 }