@fusion.dev/helix 0.142.1 → 0.144.0

package/dist/shared/field/field-segments.css.js

@@ -0,0 +1,40 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`[part="segments"] {
+align-items: center;
+color: var(--helix-color-foreground);
+display: flex;
+flex: 1 1 auto;
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-md);
+
+font-variant-numeric: tabular-nums;
+font-weight: var(--helix-weight-medium);
+min-inline-size: 0;
+white-space: nowrap;
+}
+
+[part~="segment"] {
+border-radius: var(--helix-radii-sm);
+caret-color: transparent;
+outline: none;
+padding-inline: calc(var(--helix-space-2xs) / 2);
+}
+
+[part~="segment"]:focus {
+background-color: var(--_segment-focus-background-color, var(--helix-color-primary));
+color: var(--_segment-focus-color, var(--helix-color-foreground-on-primary));
+}
+
+[part~="segment-placeholder"] {
+color: var(--_segment-placeholder-color, var(--helix-color-foreground-subtle));
+}
+
+[part="literal"] {
+color: var(--_segment-literal-color, var(--helix-color-foreground-muted));
+white-space: pre;
+}
+
+:host(:disabled) [part="segments"] {
+color: var(--helix-color-foreground-subtle);
+cursor: not-allowed;
+}`);

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

@@ -4,6 +4,10 @@ display: block;
 inline-size: 100%;
 }
 
+:host(:not([shape])) {
+block-size: var(--skeleton-block-size, var(--helix-size-control));
+}
+
 :host([shape="text"]) {
 block-size: 1em;
 }
@@ -15,9 +19,12 @@ inline-size: var(--skeleton-size, var(--helix-size-control));
 }
 
 [part="skeleton"] {
-background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);
+background-color: var(
+--skeleton-color,
+color-mix(in oklab, var(--helix-color-foreground) 8%, transparent)
+);
 block-size: 100%;
-border-radius: var(--helix-radii-sm);
+border-radius: var(--skeleton-radius, var(--helix-radii-sm));
 display: block;
 inline-size: 100%;
 
@@ -26,11 +33,13 @@ position: relative;
 }
 
 [part="skeleton"]::after {
-animation: helix-skeleton-sweep calc(var(--helix-duration-slow) * 4) ease-in-out infinite;
+animation: helix-skeleton-sweep var(--skeleton-duration, calc(var(--helix-duration-slow) * 4))
+ease-in-out infinite;
 background-image: linear-gradient(
 90deg,
 transparent 0%,
-color-mix(in oklab, var(--helix-color-foreground) 8%, transparent) 50%,
+var(--skeleton-sheen-color, color-mix(in oklab, var(--helix-color-foreground) 8%, transparent))
+50%,
 transparent 100%
 );
 content: "";
@@ -49,6 +58,48 @@ border-radius: var(--helix-radii-full);
 border-radius: var(--helix-radii-full);
 }
 
+:host([effect="pulse"]) [part="skeleton"]::after,
+:host([effect="none"]) [part="skeleton"]::after {
+animation: none;
+background-image: none;
+}
+
+:host([effect="pulse"]) [part="skeleton"] {
+animation: helix-skeleton-pulse var(--skeleton-duration, calc(var(--helix-duration-slow) * 4))
+ease-in-out infinite;
+}
+
+@keyframes helix-skeleton-pulse {
+50% {
+opacity: 0.4;
+}
+}
+
+:host(:not(:empty)) {
+block-size: auto;
+inline-size: fit-content;
+max-inline-size: 100%;
+position: relative;
+}
+
+:host(:not(:empty)) [part="content"] {
+display: block;
+}
+
+:host(:not(:empty)) [part="skeleton"] {
+block-size: auto;
+inset: 0;
+position: absolute;
+}
+
+:host(:not(:empty):not([loading])) [part="skeleton"] {
+display: none;
+}
+
+:host([loading]:not(:empty)) [part="content"] {
+visibility: hidden;
+}
+
 @keyframes helix-skeleton-sweep {
 from {
 translate: -50% 0;
@@ -60,8 +111,12 @@ translate: 50% 0;
 }
 
 @media (prefers-reduced-motion: reduce) {
-[part="skeleton"]::after {
+[part="skeleton"]::after,
+:host([effect="pulse"]) [part="skeleton"] {
 animation: none;
+}
+
+[part="skeleton"]::after {
 background-image: none;
 }
 }

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

@@ -5,7 +5,11 @@ import type { CSSResultGroup } from 'lit';
  *
  * @description
  * Animates a highlight sweeping across the block, which reads as work in
- * progress. A block fading in and out can look broken.
+ * progress. A block fading in and out can look broken, so `effect="pulse"` is
+ * a choice rather than the default.
+ *
+ * Around content with `loading`, the skeleton takes the content's box and
+ * paints over it, and the content is hidden until `loading` is taken off.
  *
  * @since 0.1.0
  * @status stable
@@ -13,15 +17,30 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Placeholder, Shimmer, Ghost
  * @documentation https://fusion.dev/helix/components/skeleton
  *
+ * @csspart content - The box around the content, hidden while `loading`.
  * @csspart skeleton - The placeholder shape.
  *
+ * @cssproperty --skeleton-block-size - The height of the block shape, which is the shape when `shape` is unset. Defaults to the control height.
+ * @cssproperty --skeleton-color - The placeholder's fill.
+ * @cssproperty --skeleton-duration - How long one sweep or one pulse takes.
+ * @cssproperty --skeleton-radius - The corner of the block shape.
+ * @cssproperty --skeleton-sheen-color - The highlight the sweep carries across the fill.
  * @cssproperty --skeleton-size - The diameter of the circle shape.
  */
 export declare class HelixSkeleton extends HelixHeadlessSkeleton {
+    /**
+     * How the placeholder shows it is waiting: a sweep when unset, `pulse` to
+     * fade the fill in and out, or `none` to sit still.
+     *
+     * Reduced motion stills both.
+     */
+    effect?: 'none' | 'pulse';
     /**
      * The shape of the placeholder: `text`, `circle`, or a block when unset.
      *
-     * Unset is a block, which is what most missing things are.
+     * Unset is a block, which is what most missing things are. A block is the
+     * control height until you size it, with a height on the element or
+     * `--skeleton-block-size`.
      */
     shape?: 'text' | 'circle';
     static styles: CSSResultGroup;

package/dist/skeleton/root/skeleton-root.js

@@ -11,6 +11,9 @@ import { styles } from './skeleton-root.css.js';
 let HelixSkeleton = class HelixSkeleton extends HelixHeadlessSkeleton {
     static { this.styles = styles; }
 };
+__decorate([
+    property({ reflect: true })
+], HelixSkeleton.prototype, "effect", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixSkeleton.prototype, "shape", void 0);

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

@@ -5,20 +5,20 @@ align-content: start;
 
 align-items: baseline;
 display: grid;
-gap: var(--helix-space-2xs);
+gap: var(--stat-gap, var(--helix-space-2xs));
 grid-template-columns: auto 1fr;
 }
 
 slot[name="label"]::slotted(*) {
-color: var(--helix-color-foreground-muted);
-font-size: calc(var(--helix-text-xs) / var(--helix-text-md) * 1em);
+color: var(--stat-label-color, var(--helix-color-foreground-muted));
+font-size: var(--stat-label-size, calc(var(--helix-text-xs) / var(--helix-text-md) * 1em));
 font-weight: var(--helix-weight-medium);
 grid-column: 1 / -1;
 letter-spacing: var(--helix-tracking-wide);
 }
 
 slot:not([name]) {
-color: var(--helix-color-foreground);
+color: var(--stat-value-color, var(--helix-color-foreground));
 font-family: var(--helix-font-display);
 font-size: var(--stat-value-size, calc(var(--helix-text-3xl) / var(--helix-text-md) * 1em));
 font-weight: var(--helix-weight-semibold);
@@ -27,8 +27,8 @@ line-height: var(--helix-leading-tight);
 }
 
 slot[name="unit"]::slotted(*) {
-color: var(--helix-color-foreground-muted);
-font-size: calc(var(--helix-text-md) / var(--helix-text-md) * 1em);
+color: var(--stat-unit-color, var(--helix-color-foreground-muted));
+font-size: var(--stat-unit-size, calc(var(--helix-text-md) / var(--helix-text-md) * 1em));
 font-weight: var(--helix-weight-medium);
 }
 
@@ -40,7 +40,7 @@ order: 1;
 :host([direction="row-reverse"]) {
 align-items: baseline;
 display: flex;
-gap: var(--helix-space-xs);
+gap: var(--stat-gap, var(--helix-space-xs));
 }
 
 :host([direction="row"]) slot[name="label"]::slotted(*),

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

@@ -14,6 +14,14 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Metric, KPI, Figure
  * @documentation https://fusion.dev/helix/components/stat
  *
+ * @csspart value - The slot the value is written in. A slot draws no box, so it takes the inherited properties, such as color and font, and passes them to the value.
+ *
+ * @cssproperty --stat-gap - Space between the label and the value, and between the value and the unit in a row.
+ * @cssproperty --stat-label-color - Color of the label.
+ * @cssproperty --stat-label-size - Size of the label.
+ * @cssproperty --stat-unit-color - Color of the unit.
+ * @cssproperty --stat-unit-size - Size of the unit.
+ * @cssproperty --stat-value-color - Color of the figure.
  * @cssproperty --stat-value-size - Size of the figure.
  */
 export declare class HelixStat extends HelixHeadlessStat {

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

@@ -41,13 +41,16 @@ background-color var(--helix-duration-fast) var(--helix-easing-standard),
 border-color var(--helix-duration-fast) var(--helix-easing-standard);
 }
 
-[part="track"]::after {
+[part="thumb"] {
+align-items: center;
+color: var(--switch-icon-color, var(--helix-color-foreground-muted));
+display: flex;
+justify-content: center;
 
 background-color: var(--switch-thumb-color, var(--helix-color-surface-overlay));
 block-size: calc(var(--_switch-height) - var(--_switch-inset) * 2);
 border: var(--helix-border-thin) solid var(--helix-color-border);
 border-radius: var(--helix-radii-full);
-content: "";
 inline-size: calc(var(--_switch-height) - var(--_switch-inset) * 2);
 inset-block-start: 50%;
 
@@ -58,8 +61,13 @@ translate: 0 -50%;
 transition: translate var(--helix-duration-fast) var(--helix-easing-emphasized);
 }
 
-:host(:state(checked)) [part="track"]::after {
+:host(:state(checked)) [part="thumb"] {
 border-color: transparent;
+color: var(--switch-icon-color, var(--switch-on-color, var(--helix-color-primary)));
+}
+
+[part="thumb"] ::slotted(*) {
+--icon-size: calc((var(--_switch-height) - var(--_switch-inset) * 2) * 0.7);
 }
 
 :host(:state(checked)) [part="track"] {
@@ -77,14 +85,14 @@ margin: var(--helix-space-none);
 opacity: 0;
 }
 
-:host(:state(checked)) [part="track"]::after {
+:host(:state(checked)) [part="thumb"] {
 
 background-color: var(--switch-thumb-color, var(--helix-color-foreground-on-primary));
 
 translate: calc(var(--_switch-width) - var(--_switch-height)) -50%;
 }
 
-[part="track"]:has([part="control"]:focus-visible)::after {
+[part="track"]:has([part="control"]:focus-visible) [part="thumb"] {
 outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
 outline-offset: var(--helix-size-focus-offset);
 }

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

@@ -1,5 +1,5 @@
 import { HelixHeadlessSwitch } from '@fusion.dev/helix-headless/switch';
-import type { CSSResultGroup } from 'lit';
+import { type CSSResultGroup, type TemplateResult } from 'lit';
 /**
  * @summary A control that turns something on or off.
  *
@@ -17,19 +17,43 @@ import type { CSSResultGroup } from 'lit';
  * it, and the control looks like a small dash. The width follows the height, so
  * setting `--switch-block-size` widens the switch too and keeps the proportion.
  *
+ * The thumb is an element, the `thumb` part, and holds an icon for each state:
+ * one in the `on` slot shows while the switch is on, and one in the `off` slot
+ * while it is off.
+ *
  * @since 0.1.0
  * @status stable
  * @category forms
  * @aliases Toggle switch, On/off
  * @documentation https://fusion.dev/helix/components/switch
  *
+ * @slot - The label that names what the switch turns on.
+ * @slot feedback - The message that says what is wrong, for content richer than a string. It shows while there is a message.
+ * @slot hint - Help under the control, for content richer than the `hint` text.
+ * @slot off - An icon on the thumb while the switch is off.
+ * @slot on - An icon on the thumb while the switch is on.
+ *
+ * @csspart control - The input.
+ * @csspart feedback - The message that says what is wrong.
+ * @csspart field - The row: the track and its label.
+ * @csspart hint - Help under the control, while nothing is wrong.
+ * @csspart label - The label beside the track.
+ * @csspart thumb - The thumb that travels along the track, and the icon on it.
+ * @csspart track - The track.
+ *
  * @cssproperty --switch-block-size - Height of the track. The width follows it.
+ * @cssproperty --switch-icon-color - Color of the icon on the thumb. Without it, the icon is muted while off and takes the on color while on.
  * @cssproperty --switch-inline-size - Length of the track. Set it to override the length derived from the height.
  * @cssproperty --switch-on-color - Fill when the switch is on.
  * @cssproperty --switch-thumb-color - Color of the thumb, in both states.
  */
 export declare class HelixSwitch extends HelixHeadlessSwitch {
     static styles: CSSResultGroup;
+    /**
+     * The thumb as an element, so it is a part and holds an icon for each state.
+     * The slot for the other state is `hidden`, which takes its icon out.
+     */
+    protected renderThumb(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/switch/root/switch-root.js

@@ -6,11 +6,18 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessSwitch } from '@fusion.dev/helix-headless/switch';
+import { html } from 'lit';
 import { styles as fieldStyles } from '../../shared/field/field.css.js';
 import { styles as fieldInlineStyles } from '../../shared/field/field-inline.css.js';
 import { styles } from './switch-root.css.js';
 let HelixSwitch = class HelixSwitch extends HelixHeadlessSwitch {
     static { this.styles = [fieldStyles, fieldInlineStyles, styles]; }
+    renderThumb() {
+        return html `<span part="thumb" aria-hidden="true"
+      ><slot name="on" ?hidden=${!this.checked}></slot
+      ><slot name="off" ?hidden=${this.checked}></slot
+    ></span>`;
+    }
 };
 HelixSwitch = __decorate([
     customElement('helix-switch')

package/dist/table/column/table-column.css.js

@@ -59,6 +59,11 @@ outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
 outline-offset: var(--helix-size-focus-offset);
 }
 
+[part="column"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: calc(var(--helix-size-focus-offset) * -1);
+}
+
 [part="grip"] {
 all: unset;
 align-items: center;

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

@@ -8,7 +8,7 @@ display: contents;
 min-block-size: 0;
 min-inline-size: 0;
 outline: none;
-padding-block-start: var(--helix-space-md);
+padding-block-start: var(--tabs-panel-padding-block-start, var(--helix-space-md));
 }
 
 [part="panel"][hidden] {

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

@@ -14,6 +14,8 @@ import type { CSSResultGroup } from 'lit';
  * @slot - The panel's content.
  *
  * @csspart panel - The panel container.
+ *
+ * @cssproperty --tabs-panel-padding-block-start - The space between the tab row and the panel's content.
  */
 export declare class HelixTabPanel extends HelixHeadlessTabPanel {
     static styles: CSSResultGroup;

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

@@ -18,12 +18,15 @@ background-position: bottom;
 background-repeat: repeat-x;
 background-size: 100% var(--helix-border-thin);
 display: flex;
-gap: var(--helix-space-2xs);
+gap: var(--tabs-gap, var(--helix-space-2xs));
 overflow-x: auto;
 }
 
 :host([variant="underlined"]) {
---_tabs-rule: linear-gradient(var(--helix-color-border), var(--helix-color-border));
+--_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;
@@ -87,14 +90,17 @@ z-index: var(--helix-layer-raised);
 }
 
 :host([variant="underlined"]) [part="indicator"] {
---_indicator-block: var(--helix-border-thick);
---_indicator-color: var(--helix-color-primary);
---_indicator-offset: calc(var(--indicator-block-size, 0px) - var(--helix-border-thick));
+--_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(--helix-color-surface-overlay);
+--_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;
@@ -109,7 +115,7 @@ z-index: var(--helix-layer-raised);
 
 --_indicator-border: var(--helix-border-thin);
 --_indicator-border-color: var(--helix-color-border);
---_indicator-color: var(--helix-color-surface-overlay);
+--_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;

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

@@ -26,6 +26,11 @@ import type { CSSResultGroup } from 'lit';
  *
  * @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-thickness - The height of the bar under `underlined`.
+ * @cssproperty --tabs-rule-color - The color of the rule under the row in `underlined`.
  */
 export declare class HelixTabs extends HelixHeadlessTabs {
     static styles: CSSResultGroup;

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

@@ -7,19 +7,19 @@ display: inline-flex;
 align-items: center;
 background-color: transparent;
 
-block-size: var(--_tab-height, var(--helix-size-control));
+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(--helix-color-foreground-subtle);
+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;
 justify-content: center;
-padding-inline: var(--helix-space-sm);
+padding-inline: var(--tabs-tab-padding-inline, var(--helix-space-sm));
 transition:
 background-color var(--helix-duration-fast) var(--helix-easing-standard),
 border-color var(--helix-duration-normal) var(--helix-easing-emphasized),
@@ -36,7 +36,7 @@ color: var(--helix-color-foreground);
 :host(:state(selected)) [part="tab"]:hover {
 background-color: var(--_tab-selected-surface, transparent);
 box-shadow: var(--_tab-selected-shadow, none);
-color: var(--helix-color-foreground);
+color: var(--tabs-tab-selected-color, var(--helix-color-foreground));
 }
 
 [part="tab"]:disabled {

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

@@ -16,6 +16,11 @@ import type { CSSResultGroup } from 'lit';
  * @slot - The tab's label.
  *
  * @csspart tab - The tab itself.
+ *
+ * @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-padding-inline - The space either side of the label.
+ * @cssproperty --tabs-tab-selected-color - The label color of the current tab.
  */
 export declare class HelixTab extends HelixHeadlessTab {
     static styles: CSSResultGroup;

package/dist/tag/group/tag-group.css.d.ts

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

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

@@ -0,0 +1,6 @@
+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));
+}`);

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

@@ -0,0 +1,25 @@
+import { HelixHeadlessTagGroup } from '@fusion.dev/helix-headless/tag';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary A set of tags that the arrow keys move through, and that can be removed and selected from the keyboard.
+ *
+ * @description
+ * The tags sit in a row that wraps. A selected tag is filled with its tone, as
+ * `emphasis="solid"` draws one, and the focused tag takes the focus ring round
+ * its whole box.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @aliases Tag list, Chip group, Token list
+ * @documentation https://fusion.dev/helix/components/tag
+ *
+ * @cssproperty --tag-group-gap - The space between tags, across and between rows.
+ */
+export declare class HelixTagGroup extends HelixHeadlessTagGroup {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-tag-group': HelixTagGroup;
+    }
+}

package/dist/tag/group/tag-group.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 { HelixHeadlessTagGroup } from '@fusion.dev/helix-headless/tag';
+import { styles } from './tag-group.css.js';
+let HelixTagGroup = class HelixTagGroup extends HelixHeadlessTagGroup {
+    static { this.styles = styles; }
+};
+HelixTagGroup = __decorate([
+    customElement('helix-tag-group')
+], HelixTagGroup);
+export { HelixTagGroup };

package/dist/tag/index.d.ts

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

package/dist/tag/index.js

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

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

@@ -110,6 +110,56 @@ 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;