@fusion.dev/helix 0.145.0 → 0.147.0

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

@@ -1,189 +1,18 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-
---_tabs-rule: none;
---_tab-radius: var(--helix-radii-sm);
---_tab-selected-shadow: var(--helix-shadow-sm);
---_tab-selected-surface: var(--helix-color-surface-raised);
-
-display: grid;
-
-grid-template-rows: auto minmax(0, 1fr);
-min-block-size: 0;
-}
-
-[part="tabs"] {
-background-image: var(--_tabs-rule, none);
-background-position: bottom;
-background-repeat: repeat-x;
-background-size: 100% var(--helix-border-thin);
-display: flex;
-gap: var(--tabs-gap, var(--helix-space-2xs));
-overflow-x: auto;
-}
-
-:host([variant="underlined"]) {
---_tabs-rule: linear-gradient(
+export const styles = createSheet(`:host {--_tabs-rule: none;--_tab-radius: var(--helix-radii-sm);--_tab-selected-shadow: var(--helix-shadow-sm);--_tab-selected-surface: var(--helix-color-surface-raised);display: grid;grid-template-rows: auto minmax(0, 1fr);min-block-size: 0;}[part="tabs"] {background-image: var(--_tabs-rule, none);background-position: bottom;background-repeat: repeat-x;background-size: 100% var(--helix-border-thin);display: flex;gap: var(--tabs-gap, var(--helix-space-2xs));overflow-x: auto;}:host([variant="underlined"]) {--_tabs-rule: linear-gradient(
 var(--tabs-rule-color, var(--helix-color-border)),
 var(--tabs-rule-color, var(--helix-color-border))
-);
---_tab-radius: var(--helix-radii-none);
---_tab-selected-shadow: none;
---_tab-selected-surface: transparent;
-}
-
-:host([variant="segmented"]) [part="tabs"] {
-
---_tab-selected-surface: var(--helix-color-surface-overlay);
-
---_tab-height: 100%;
-
-background-color: var(--helix-color-surface-sunken);
-block-size: var(--helix-size-control);
-border: var(--helix-border-thin) solid var(--helix-color-border);
-border-radius: var(--helix-radii-sm);
-justify-self: start;
-padding: var(--helix-space-2xs);
-inline-size: fit-content;
-}
-
-[part="panels"] {
-display: grid;
-grid-template-rows: minmax(0, 1fr);
-min-block-size: 0;
-min-inline-size: 0;
-}
-
-[part="indicator"] {
-background-color: var(--_indicator-color, transparent);
-block-size: var(--_indicator-block, var(--helix-border-thick));
-
-border: var(--_indicator-border, 0) solid var(--_indicator-border-color, transparent);
-border-radius: var(--_indicator-radius, var(--helix-radii-none));
-box-shadow: var(--_indicator-shadow, none);
-inline-size: var(--indicator-inline-size, 0);
-inset-block-start: 0;
-inset-inline-start: 0;
-opacity: 0;
-position: absolute;
-
-translate: calc(var(--indicator-x, 0px) + var(--_indicator-offset-x, 0px))
-calc(var(--indicator-y, 0px) + var(--_indicator-offset, 0px));
-
-transition:
+);--_tab-radius: var(--helix-radii-none);--_tab-selected-shadow: none;--_tab-selected-surface: transparent;}:host([variant="segmented"]) [part="tabs"] {--_tab-selected-surface: var(--helix-color-surface-overlay);--_tab-height: 100%;background-color: var(--helix-color-surface-sunken);block-size: var(--helix-size-control);border: var(--helix-border-thin) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);justify-self: start;padding: var(--helix-space-2xs);inline-size: fit-content;}[part="panels"] {display: grid;grid-template-rows: minmax(0, 1fr);min-block-size: 0;min-inline-size: 0;}[part="indicator"] {background-color: var(--_indicator-color, transparent);block-size: var(--_indicator-block, var(--helix-border-thick));border: var(--_indicator-border, 0) solid var(--_indicator-border-color, transparent);border-radius: var(--tabs-indicator-radius, var(--_indicator-radius, var(--helix-radii-none)));box-shadow: var(--tabs-indicator-shadow, var(--_indicator-shadow, none));inline-size: var(--indicator-inline-size, 0);inset-block-start: 0;inset-inline-start: 0;opacity: 0;position: absolute;translate: calc(var(--indicator-x, 0px) + var(--_indicator-offset-x, 0px))
+calc(var(--indicator-y, 0px) + var(--_indicator-offset, 0px));transition:
 translate var(--helix-duration-normal) var(--helix-easing-emphasized),
 inline-size var(--helix-duration-normal) var(--helix-easing-emphasized),
-opacity var(--helix-duration-fast) var(--helix-easing-standard);
-z-index: var(--helix-layer-base);
-}
-
-[part="indicator"][data-placed] {
-opacity: 1;
-}
-
-[part="tabs"] {
-position: relative;
-}
-
-::slotted(helix-tab) {
-position: relative;
-z-index: var(--helix-layer-raised);
-}
-
-:host([variant="underlined"]) [part="indicator"] {
---_indicator-block: var(--tabs-indicator-thickness, var(--helix-border-thick));
---_indicator-color: var(--tabs-indicator-color, var(--helix-color-primary));
---_indicator-offset: calc(
+opacity var(--helix-duration-fast) var(--helix-easing-standard);z-index: var(--helix-layer-base);}[part="indicator"][data-placed] {opacity: 1;}[part="tabs"] {position: relative;}::slotted(helix-tab) {position: relative;z-index: var(--helix-layer-raised);}:host([variant="underlined"]) [part="indicator"] {--_indicator-block: var(--tabs-indicator-thickness, var(--helix-border-thick));--_indicator-color: var(--tabs-indicator-color, var(--helix-color-primary));--_indicator-offset: calc(
 var(--indicator-block-size, 0px) -
 var(--tabs-indicator-thickness, var(--helix-border-thick))
-);
-}
-
-:host([variant="segmented"]) [part="indicator"] {
---_indicator-block: var(--indicator-block-size, 0);
---_indicator-color: var(--tabs-indicator-color, var(--helix-color-surface-overlay));
---_indicator-radius: calc(var(--helix-radii-sm) - var(--helix-border-thin));
---_indicator-shadow: var(--helix-shadow-sm);
---_indicator-offset: 0px;
-}
-
-:host([variant="segmented"]) {
---_tab-selected-surface: transparent;
-}
-
-:host(:not([variant])) [part="indicator"] {
---_indicator-block: var(--indicator-block-size, 0);
-
---_indicator-border: var(--helix-border-thin);
---_indicator-border-color: var(--helix-color-border);
---_indicator-color: var(--tabs-indicator-color, var(--helix-color-surface-overlay));
---_indicator-radius: var(--helix-radii-sm);
---_indicator-shadow: var(--helix-shadow-sm);
---_indicator-offset: 0px;
-}
-
-:host(:not([variant])) {
---_tab-selected-surface: transparent;
---_tab-selected-shadow: none;
-}
-
-:host([orientation="vertical"]) {
-
---_tabs-inline-sign: 1;
---_tabs-panel-padding-block-start: var(--helix-space-none);
---_tabs-panel-padding-inline-start: var(--helix-space-md);
-
-grid-template-columns: auto minmax(0, 1fr);
-grid-template-rows: minmax(0, 1fr);
-}
-
-:host([orientation="vertical"]:dir(rtl)) {
---_tabs-inline-sign: -1;
-}
-
-:host([orientation="vertical"]) [part="tabs"] {
-align-content: start;
-background-position: right;
-background-repeat: repeat-y;
-background-size: var(--helix-border-thin) 100%;
-flex-direction: column;
-overflow-x: visible;
-overflow-y: auto;
-}
-
-:host([orientation="vertical"]:dir(rtl)) [part="tabs"] {
-background-position: left;
-}
-
-:host([orientation="vertical"]) ::slotted(helix-tab) {
---_tab-inline-size: 100%;
---_tab-justify: flex-start;
-}
-
-:host([orientation="vertical"][variant="segmented"]) [part="tabs"] {
---_tab-height: initial;
-
-block-size: auto;
-justify-self: start;
-}
-
-:host([orientation="vertical"][variant="underlined"]) [part="indicator"] {
---_indicator-block: var(--indicator-block-size, 0);
---_indicator-offset: 0px;
---_indicator-offset-x: calc(
+);}:host([variant="segmented"]) [part="indicator"] {--_indicator-block: var(--indicator-block-size, 0);--_indicator-color: var(--tabs-indicator-color, var(--helix-color-surface-overlay));--_indicator-radius: calc(var(--helix-radii-sm) - var(--helix-border-thin));--_indicator-shadow: var(--helix-shadow-sm);--_indicator-offset: 0px;}:host([variant="segmented"]) {--_tab-selected-surface: transparent;}:host(:not([variant])) [part="indicator"] {--_indicator-block: var(--indicator-block-size, 0);--_indicator-border: var(--helix-border-thin);--_indicator-border-color: var(--helix-color-border);--_indicator-color: var(--tabs-indicator-color, var(--helix-color-surface-overlay));--_indicator-radius: var(--helix-radii-sm);--_indicator-shadow: var(--helix-shadow-sm);--_indicator-offset: 0px;}:host(:not([variant])) {--_tab-selected-surface: transparent;--_tab-selected-shadow: none;}:host([orientation="vertical"]) {--_tabs-inline-sign: 1;--_tabs-panel-padding-block-start: var(--helix-space-none);--_tabs-panel-padding-inline-start: var(--helix-space-md);grid-template-columns: auto minmax(0, 1fr);grid-template-rows: minmax(0, 1fr);}:host([orientation="vertical"]:dir(rtl)) {--_tabs-inline-sign: -1;}:host([orientation="vertical"]) [part="tabs"] {align-content: start;background-position: right;background-repeat: repeat-y;background-size: var(--helix-border-thin) 100%;flex-direction: column;overflow-x: visible;overflow-y: auto;}:host([orientation="vertical"]:dir(rtl)) [part="tabs"] {background-position: left;}:host([orientation="vertical"]) ::slotted(helix-tab) {--_tab-inline-size: 100%;--_tab-justify: flex-start;}:host([orientation="vertical"][variant="segmented"]) [part="tabs"] {--_tab-height: initial;block-size: auto;justify-self: start;}:host([orientation="vertical"][variant="underlined"]) [part="indicator"] {--_indicator-block: var(--indicator-block-size, 0);--_indicator-offset: 0px;--_indicator-offset-x: calc(
 (
 var(--indicator-inline-size, 0px) -
 var(--tabs-indicator-thickness, var(--helix-border-thick))
 ) *
 var(--_tabs-inline-sign, 1)
-);
-
-inline-size: var(--tabs-indicator-thickness, var(--helix-border-thick));
-}
-
-@media print {
-:host {
-box-shadow: none;
-overflow: visible;
-}
-}`);
+);inline-size: var(--tabs-indicator-thickness, var(--helix-border-thick));}@media print {:host {box-shadow: none;overflow: visible;}}`);

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

@@ -22,13 +22,17 @@ import type { CSSResultGroup } from 'lit';
  * @documentation https://fusion.dev/helix/components/tabs
  *
  * @slot - The tabs, as direct children of this element.
+ * @slot indicator - A mark of your own, drawn inside the `indicator` part, where the selected tab's place and size reach it.
  * @slot panels - The panels, as direct children of this element. Panels inside a wrapper are not paired with tabs, because pairing reads only the direct children.
  *
+ * @csspart indicator - The mark that moves to the selected tab. It carries the selected tab's place and size as `--indicator-x`, `--indicator-y`, `--indicator-inline-size` and `--indicator-block-size`.
  * @csspart panels - The panel container.
  * @csspart tabs - The tab list.
  *
  * @cssproperty --tabs-gap - The space between tabs.
  * @cssproperty --tabs-indicator-color - The fill of the mark on the current tab: the bar under `underlined`, and the pill otherwise.
+ * @cssproperty --tabs-indicator-radius - The corners of the mark.
+ * @cssproperty --tabs-indicator-shadow - The shadow under the mark, which the pill and `segmented` draw.
  * @cssproperty --tabs-indicator-thickness - The height of the bar under `underlined`.
  * @cssproperty --tabs-rule-color - The color of the rule under the row in `underlined`.
  */

package/dist/tabs/tab/tab.css.js

@@ -1,54 +1,13 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: inline-flex;
-}
-
-[part="tab"] {
-align-items: center;
-background-color: transparent;
-
-block-size: var(--_tab-height, var(--tabs-tab-block-size, var(--helix-size-control)));
-border: none;
-
-border-block-end: var(--helix-border-thick) solid transparent;
-border-radius: var(--_tab-radius, var(--helix-radii-none));
-color: var(--tabs-tab-color, var(--helix-color-foreground-subtle));
-cursor: pointer;
-font: inherit;
-font-size: var(--helix-text-sm);
-font-weight: var(--helix-weight-medium);
-display: inline-flex;
-
-inline-size: var(--_tab-inline-size, auto);
-justify-content: var(--_tab-justify, center);
-padding-inline: var(--tabs-tab-padding-inline, var(--helix-space-sm));
-
-text-decoration: none;
-transition:
+export const styles = createSheet(`:host {display: inline-flex;}[part="tab"] {align-items: center;background-color: transparent;block-size: var(--_tab-height, var(--tabs-tab-block-size, var(--helix-size-control)));border: none;border-block-end: var(--helix-border-thick) solid transparent;border-radius: var(--tabs-tab-radius, var(--_tab-radius, var(--helix-radii-none)));color: var(--tabs-tab-color, var(--helix-color-foreground-subtle));cursor: pointer;font: inherit;font-size: var(--tabs-tab-font-size, var(--helix-text-sm));font-weight: var(--tabs-tab-font-weight, var(--helix-weight-medium));display: inline-flex;inline-size: var(--_tab-inline-size, auto);justify-content: var(--_tab-justify, center);padding-inline: var(--tabs-tab-padding-inline, var(--helix-space-sm));text-decoration: none;transition:
 background-color var(--helix-duration-fast) var(--helix-easing-standard),
 border-color var(--helix-duration-normal) var(--helix-easing-emphasized),
-color var(--helix-duration-fast) var(--helix-easing-standard);
-white-space: nowrap;
-}
-
-[part="tab"]:hover:not(:disabled) {
-background-color: color-mix(in oklab, var(--helix-color-foreground) 5%, transparent);
-color: var(--helix-color-foreground);
-}
-
-:host(:state(selected)) [part="tab"],
-:host(:state(selected)) [part="tab"]:hover {
-background-color: var(--_tab-selected-surface, transparent);
-box-shadow: var(--_tab-selected-shadow, none);
-color: var(--tabs-tab-selected-color, var(--helix-color-foreground));
-}
-
-[part="tab"]:disabled {
-cursor: not-allowed;
-opacity: 0.5;
-}
-
-[part="tab"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: calc(var(--helix-size-focus-offset) * -1);
-}`);
+color var(--helix-duration-fast) var(--helix-easing-standard);white-space: nowrap;}[part="tab"]:hover:not(:disabled, [aria-disabled="true"]) {background-color: var(
+--tabs-tab-hover-background-color,
+color-mix(in oklab, var(--helix-color-foreground) 5%, transparent)
+);color: var(--tabs-tab-hover-color, var(--helix-color-foreground));}:host(:state(selected)) [part="tab"],
+:host(:state(selected)) [part="tab"]:hover {background-color: var(
+--tabs-tab-selected-background-color,
+var(--_tab-selected-surface, transparent)
+);box-shadow: var(--_tab-selected-shadow, none);color: var(--tabs-tab-selected-color, var(--helix-color-foreground));}[part="tab"]:disabled,
+[part="tab"][aria-disabled="true"] {cursor: not-allowed;opacity: var(--tabs-tab-disabled-opacity, 0.5);}[part="tab"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}`);

package/dist/tabs/tab/tab.d.ts

@@ -19,7 +19,14 @@ import type { CSSResultGroup } from 'lit';
  *
  * @cssproperty --tabs-tab-block-size - The height of a tab. `segmented` sizes its tabs to the track and does not read it.
  * @cssproperty --tabs-tab-color - The label color of a tab that is not current.
+ * @cssproperty --tabs-tab-disabled-opacity - How faint a disabled tab is drawn.
+ * @cssproperty --tabs-tab-font-size - The size of a tab's label.
+ * @cssproperty --tabs-tab-font-weight - The weight of a tab's label.
+ * @cssproperty --tabs-tab-hover-background-color - The wash under the pointer.
+ * @cssproperty --tabs-tab-hover-color - The label color under the pointer.
  * @cssproperty --tabs-tab-padding-inline - The space either side of the label.
+ * @cssproperty --tabs-tab-radius - The corners of a tab, which the hover wash takes.
+ * @cssproperty --tabs-tab-selected-background-color - The fill of the current tab itself, under the moving mark.
  * @cssproperty --tabs-tab-selected-color - The label color of the current tab.
  */
 export declare class HelixTab extends HelixHeadlessTab {

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

@@ -1,6 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: flex;
-flex-wrap: wrap;
-gap: var(--tag-group-gap, var(--helix-space-2xs));
-}`);
+export const styles = createSheet(`:host {display: flex;flex-wrap: wrap;gap: var(--tag-group-gap, var(--helix-space-2xs));}[part="empty"]:focus-visible {border-radius: var(--helix-radii-sm);outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}`);

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

@@ -1,167 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
---_tag-height: var(--helix-size-tag);
-
---_tag-color: var(--helix-color-foreground-muted);
---_tag-text: var(--helix-text-xs);
---_tag-inset: var(--helix-space-xs);
-
---_tag-fill: color-mix(in srgb, var(--_tag-color) 14%, var(--helix-color-background));
---_tag-edge: color-mix(in srgb, var(--_tag-color) 28%, var(--helix-color-background));
---_tag-label: color-mix(in oklab, var(--_tag-color) 55%, var(--helix-color-foreground));
-align-items: center;
-background-color: var(--tag-background-color, var(--_tag-fill));
-block-size: var(--_tag-height);
-border: var(--helix-border-thin) solid var(--tag-border-color, var(--_tag-edge));
-border-radius: var(--tag-radius, var(--helix-radii-sm));
-color: var(--tag-foreground-color, var(--_tag-label));
-display: inline-flex;
-font-size: var(--_tag-text);
-font-weight: var(--helix-weight-medium);
-gap: var(--helix-space-2xs);
-line-height: var(--helix-leading-tight);
-padding-inline: var(--_tag-inset);
-white-space: nowrap;
-}
-
-slot:not([name]) {
-display: block;
-min-inline-size: 0;
-overflow: hidden;
-text-overflow: ellipsis;
-}
-
-@supports (text-box: trim-both cap alphabetic) {
-slot:not([name]) {
-padding-block: var(--helix-space-2xs);
-text-box: trim-both cap alphabetic;
-}
-}
-
-slot:not([name])::slotted(helix-icon) {
-vertical-align: middle;
-}
-
-:host([emphasis="solid"]) {
---_tag-fill: color-mix(in oklab, var(--_tag-color) 82%, var(--helix-color-foreground));
---_tag-edge: var(--_tag-fill);
---_tag-label: var(--helix-color-foreground-inverse);
-}
-
-:host([emphasis="outlined"]) {
---_tag-fill: transparent;
---_tag-edge: color-mix(in srgb, var(--_tag-color) 45%, var(--helix-color-background));
-}
-
-:host([tone="primary"]) {
---_tag-color: var(--helix-color-primary);
-}
-
-:host([tone="accent"]) {
---_tag-color: var(--helix-color-accent);
-}
-
-:host([tone="info"]) {
---_tag-color: var(--helix-color-info);
-}
-
-:host([tone="success"]) {
---_tag-color: var(--helix-color-success);
-}
-
-:host([tone="warning"]) {
---_tag-color: var(--helix-color-warning);
-}
-
-:host([tone="danger"]) {
---_tag-color: var(--helix-color-danger);
-}
-
-[part="dismiss"] {
-
-font: inherit;
-background: none;
-border: none;
-border-radius: var(--helix-radii-sm);
-color: inherit;
-cursor: pointer;
-display: inline-flex;
-margin-inline-end: calc(var(--helix-space-2xs) * -1);
-padding: var(--helix-space-2xs);
-}
-
-[part="dismiss"]:hover {
-background-color: color-mix(in oklab, var(--_tag-color) 20%, transparent);
-}
-
-[part="dismiss"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-[part="dismiss"] svg {
-block-size: 0.85em;
-inline-size: 0.85em;
-}
-
-slot[name="start"]::slotted(*) {
-font-weight: var(--helix-weight-semibold);
-margin-inline-end: var(--_tag-inset);
-opacity: 0.75;
-}
-
-[part="link"] {
-color: inherit;
-display: block;
-min-inline-size: 0;
-text-decoration: none;
-}
-
-@media (hover: hover) {
-[part="link"][href]:hover {
-text-decoration: underline;
-}
-}
-
-[part="link"]:focus-visible {
-border-radius: var(--helix-radii-sm);
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-:host([disabled]) {
-opacity: var(--tag-disabled-opacity, 0.5);
-}
-
-:host([disabled]) [part="dismiss"] {
-cursor: not-allowed;
-}
-
-[part="cell"] {
-align-items: center;
-align-self: stretch;
-border-radius: inherit;
-cursor: default;
-display: inline-flex;
-gap: var(--helix-space-2xs);
-margin-inline: calc(var(--_tag-inset) * -1);
-min-inline-size: 0;
-padding-inline: var(--_tag-inset);
-}
-
-[part="cell"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-:host(:state(selected)) {
---_tag-fill: color-mix(in oklab, var(--_tag-color) 82%, var(--helix-color-foreground));
---_tag-edge: var(--_tag-fill);
---_tag-label: var(--helix-color-foreground-inverse);
-}
-
-@media print {
-:host {
-print-color-adjust: economy;
-}
-}`);
+export const styles = createSheet(`:host {--_tag-height: var(--helix-size-tag);--_tag-color: var(--helix-color-foreground-muted);--_tag-text: var(--helix-text-xs);--_tag-inset: var(--helix-space-xs);--_tag-fill: color-mix(in srgb, var(--_tag-color) 14%, var(--helix-color-background));--_tag-edge: color-mix(in srgb, var(--_tag-color) 28%, var(--helix-color-background));--_tag-label: color-mix(in oklab, var(--_tag-color) 55%, var(--helix-color-foreground));align-items: center;background-color: var(--tag-background-color, var(--_tag-fill));block-size: var(--_tag-height);border: var(--helix-border-thin) solid var(--tag-border-color, var(--_tag-edge));border-radius: var(--tag-radius, var(--helix-radii-sm));color: var(--tag-foreground-color, var(--_tag-label));display: inline-flex;font-size: var(--_tag-text);font-weight: var(--tag-font-weight, var(--helix-weight-medium));gap: var(--tag-gap, var(--helix-space-2xs));line-height: var(--helix-leading-tight);padding-inline: var(--_tag-inset);white-space: nowrap;}slot:not([name]) {display: block;min-inline-size: 0;overflow: hidden;text-overflow: ellipsis;}@supports (text-box: trim-both cap alphabetic) {slot:not([name]) {padding-block: var(--helix-space-2xs);text-box: trim-both cap alphabetic;}}slot:not([name])::slotted(helix-icon) {vertical-align: middle;}:host([emphasis="solid"]) {--_tag-fill: color-mix(in oklab, var(--_tag-color) 82%, var(--helix-color-foreground));--_tag-edge: var(--_tag-fill);--_tag-label: var(--helix-color-foreground-inverse);}:host([emphasis="outlined"]) {--_tag-fill: transparent;--_tag-edge: color-mix(in srgb, var(--_tag-color) 45%, var(--helix-color-background));}:host([tone="primary"]) {--_tag-color: var(--helix-color-primary);}:host([tone="accent"]) {--_tag-color: var(--helix-color-accent);}:host([tone="info"]) {--_tag-color: var(--helix-color-info);}:host([tone="success"]) {--_tag-color: var(--helix-color-success);}:host([tone="warning"]) {--_tag-color: var(--helix-color-warning);}:host([tone="danger"]) {--_tag-color: var(--helix-color-danger);}[part="dismiss"] {font: inherit;background: none;border: none;border-radius: var(--helix-radii-sm);color: inherit;cursor: pointer;display: inline-flex;margin-inline-end: calc(var(--helix-space-2xs) * -1);padding: var(--helix-space-2xs);}[part="dismiss"]:hover {background-color: color-mix(in oklab, var(--_tag-color) 20%, transparent);}[part="dismiss"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="dismiss"] svg {block-size: 0.85em;inline-size: 0.85em;}slot[name="start"]::slotted(*) {font-weight: var(--helix-weight-semibold);margin-inline-end: var(--_tag-inset);opacity: 0.75;}[part="link"] {color: inherit;display: block;min-inline-size: 0;text-decoration: none;}@media (hover: hover) {[part="link"][href]:hover {text-decoration: underline;}}[part="link"]:focus-visible {border-radius: var(--helix-radii-sm);outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}:host([disabled]) {opacity: var(--tag-disabled-opacity, 0.5);}:host([disabled]) [part="dismiss"] {cursor: not-allowed;}[part="cell"] {align-items: center;align-self: stretch;border-radius: inherit;cursor: default;display: inline-flex;gap: var(--tag-gap, var(--helix-space-2xs));margin-inline: calc(var(--_tag-inset) * -1);min-inline-size: 0;padding-inline: var(--_tag-inset);}[part="cell"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}:host(:state(selected)) {--_tag-fill: color-mix(in oklab, var(--_tag-color) 82%, var(--helix-color-foreground));--_tag-edge: var(--_tag-fill);--_tag-label: var(--helix-color-foreground-inverse);}@media print {:host {print-color-adjust: economy;}}`);

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

@@ -25,7 +25,9 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --tag-background-color - The fill behind the tag.
  * @cssproperty --tag-border-color - The color of the tag's edge.
  * @cssproperty --tag-disabled-opacity - How strongly a `disabled` tag is drawn.
+ * @cssproperty --tag-font-weight - The weight of the label.
  * @cssproperty --tag-foreground-color - The label color.
+ * @cssproperty --tag-gap - The space between the category, the label and the remove button.
  * @cssproperty --tag-radius - The corner radius of the tag.
  */
 export declare class HelixTag extends HelixHeadlessTag {

package/dist/text/clamp.d.ts

@@ -1,8 +1,11 @@
 /**
- * The line count `lines` asks for, as the declaration that clamps it, or
+ * The line count `lines` asks for, as the declarations that clamp it, or
  * `undefined` where it is no whole number above zero.
  *
  * Written on the part inside the shadow root, so any count works with no rule
- * per number, and the server renders it with the rest of the template.
+ * per number, and the server renders it with the rest of the template. The
+ * box and the overflow it needs are written with the count, so a count that
+ * is no count leaves the text as it was, with nothing cut off. A page's
+ * `::part(text)` rule still wins over each of them.
  */
 export declare const clampOf: (lines: number | undefined) => string | undefined;

package/dist/text/clamp.js

@@ -1 +1,3 @@
-export const clampOf = (lines) => Number.isInteger(lines) && lines > 0 ? `-webkit-line-clamp: ${lines}` : undefined;
+export const clampOf = (lines) => Number.isInteger(lines) && lines > 0
+    ? `display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: ${lines}`
+    : undefined;