@fusion.dev/helix 0.146.0 → 0.147.0

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

@@ -1,221 +1,31 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: block;
-}
-
-:host([show-value]) {
-align-items: center;
-column-gap: var(--helix-space-sm);
-display: grid;
-grid-template-columns: 1fr auto;
-
-row-gap: var(--meter-label-gap, var(--helix-space-2xs));
-}
-
-slot[name="label"]::slotted(*) {
-color: var(--meter-label-color, var(--helix-color-foreground));
-display: block;
-font-size: var(--meter-label-size, var(--helix-text-sm));
-grid-column: 1 / -1;
-margin-block-end: var(--meter-label-gap, var(--helix-space-2xs));
-}
-
-:host([show-value]) slot[name="label"]::slotted(*) {
-margin-block-end: 0;
-}
-
-:host([shape="arc"]) slot[name="label"]::slotted(*),
-:host([shape="ring"]) slot[name="label"]::slotted(*) {
-
-grid-column: 1;
-margin-block: 0;
-}
-
-[part="value"] {
-color: var(--helix-color-foreground-muted);
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-xs);
-font-variant-numeric: tabular-nums;
-min-inline-size: 3ch;
-text-align: end;
-}
-
-[part="track"] {
-background-color: var(--meter-track-color, var(--helix-color-surface-sunken));
-block-size: var(--meter-size, var(--helix-size-meter));
-
-border-radius: var(--helix-radii-sm);
-inline-size: 100%;
-
-overflow: hidden;
-position: relative;
-}
-
-[part~="indicator"] {
---_meter-hue: var(--meter-color, var(--helix-color-primary));
-background-color: var(--_meter-hue);
-block-size: 100%;
-border-radius: inherit;
-inline-size: 100%;
-scale: var(--meter-fraction, 0) 1;
-transform-origin: left center;
-transition:
+export const styles = createSheet(`:host {display: block;}:host([show-value]) {align-items: center;column-gap: var(--meter-value-gap, var(--helix-space-sm));display: grid;grid-template-columns: 1fr auto;row-gap: var(--meter-label-gap, var(--helix-space-2xs));}slot[name="label"]::slotted(*) {color: var(--meter-label-color, var(--helix-color-foreground));display: block;font-size: var(--meter-label-size, var(--helix-text-sm));grid-column: 1 / -1;margin-block-end: var(--meter-label-gap, var(--helix-space-2xs));}:host([show-value]) slot[name="label"]::slotted(*) {margin-block-end: 0;}:host([shape="arc"]) slot[name="label"]::slotted(*),
+:host([shape="ring"]) slot[name="label"]::slotted(*) {grid-column: 1;margin-block: 0;}[part="live"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap;}[part="value"] {color: var(--meter-value-color, var(--helix-color-foreground-muted));font-family: var(--helix-font-sans);font-size: var(--meter-value-size, var(--helix-text-xs));font-variant-numeric: tabular-nums;min-inline-size: 3ch;text-align: end;}[part="track"] {background-color: var(--meter-track-color, var(--helix-color-surface-sunken));block-size: var(--meter-size, var(--helix-size-meter));border-radius: var(--helix-radii-sm);inline-size: 100%;overflow: hidden;position: relative;}[part~="indicator"] {--_meter-hue: var(--meter-color, var(--helix-color-primary));background-color: var(--_meter-hue);block-size: 100%;border-radius: inherit;inline-size: 100%;scale: var(--meter-fraction, 0) 1;transform-origin: left center;transition:
 background-color var(--meter-transition-duration, var(--helix-duration-normal))
 var(--helix-easing-standard),
 scale var(--meter-transition-duration, var(--helix-duration-normal))
-var(--helix-easing-decelerate);
-}
-
-:host(:dir(rtl)) [part~="indicator"] {
-transform-origin: right center;
-}
-
-[part~="indicator"][data-band="good"] {
---_meter-hue: var(--meter-color, var(--helix-color-success));
-background-color: var(--_meter-hue);
-}
-
-[part~="indicator"][data-band="fair"] {
---_meter-hue: var(--meter-color, var(--helix-color-warning));
-background-color: var(--_meter-hue);
-}
-
-[part~="indicator"][data-band="poor"] {
---_meter-hue: var(--meter-color, var(--helix-color-danger));
-background-color: var(--_meter-hue);
-}
-
-[part~="indicator"][data-beyond="over"] {
-border-end-end-radius: var(--helix-radii-none);
-border-start-end-radius: var(--helix-radii-none);
-}
-
-[part~="indicator"][data-beyond="under"] {
-border-end-start-radius: var(--helix-radii-none);
-border-start-start-radius: var(--helix-radii-none);
-}
-
-[part="tick"] {
-background-color: var(--meter-tick-color, var(--helix-color-background));
-block-size: 100%;
-inline-size: var(--helix-border-thick);
-inset-block-start: 0;
-inset-inline-start: var(--meter-at, 0%);
-position: absolute;
-
-translate: -50%;
-z-index: var(--helix-layer-raised);
-}
-
-:host([shape="arc"]),
-:host([shape="ring"]) {
-display: inline-grid;
-place-items: center;
-row-gap: var(--meter-label-gap, var(--helix-space-2xs));
-}
-
-:host([shape="arc"]) [part="track"],
-:host([shape="ring"]) [part="track"] {
---_meter-stroke: var(--meter-ring-width, var(--helix-size-progress));
-
-background-color: transparent;
-block-size: var(--meter-ring-size, 6rem);
-border-radius: var(--helix-radii-none);
-grid-area: 1 / 1;
-inline-size: var(--meter-ring-size, 6rem);
-}
-
-:host([shape="ring"]) [part="track"] {
-rotate: -90deg;
-}
-
-:host([shape="arc"]) [part="track"] {
-rotate: 135deg;
-}
-
-:host([shape="arc"]) [part="groove"],
+var(--helix-easing-decelerate);}:host(:dir(rtl)) [part~="indicator"] {transform-origin: right center;}[part~="indicator"][data-band="good"] {--_meter-hue: var(--meter-color, var(--helix-color-success));background-color: var(--_meter-hue);}[part~="indicator"][data-band="fair"] {--_meter-hue: var(--meter-color, var(--helix-color-warning));background-color: var(--_meter-hue);}[part~="indicator"][data-band="poor"] {--_meter-hue: var(--meter-color, var(--helix-color-danger));background-color: var(--_meter-hue);}[part~="indicator"][data-beyond="over"] {border-end-end-radius: var(--helix-radii-none);border-start-end-radius: var(--helix-radii-none);}[part~="indicator"][data-beyond="under"] {border-end-start-radius: var(--helix-radii-none);border-start-start-radius: var(--helix-radii-none);}[part="tick"] {background-color: var(--meter-tick-color, var(--helix-color-background));block-size: 100%;inline-size: var(--helix-border-thick);inset-block-start: 0;inset-inline-start: var(--meter-at, 0%);position: absolute;translate: -50%;z-index: var(--helix-layer-raised);}:host([shape="arc"]),
+:host([shape="ring"]) {display: inline-grid;place-items: center;row-gap: var(--meter-label-gap, var(--helix-space-2xs));}:host([shape="arc"]) [part="track"],
+:host([shape="ring"]) [part="track"] {--_meter-stroke: var(--meter-ring-width, var(--helix-size-progress));background-color: transparent;block-size: var(--meter-ring-size, 6rem);border-radius: var(--helix-radii-none);grid-area: 1 / 1;inline-size: var(--meter-ring-size, 6rem);}:host([shape="ring"]) [part="track"] {rotate: -90deg;}:host([shape="arc"]) [part="track"] {rotate: 135deg;}:host([shape="arc"]) [part="groove"],
 :host([shape="arc"]) [part~="indicator"],
 :host([shape="arc"]) [part="tick"],
 :host([shape="ring"]) [part="groove"],
 :host([shape="ring"]) [part~="indicator"],
-:host([shape="ring"]) [part="tick"] {
-cx: 50%;
-cy: 50%;
-fill: none;
-r: calc(50% - var(--_meter-stroke) / 2);
-stroke-width: var(--_meter-stroke);
-}
-
-:host([shape="arc"]) [part="groove"],
-:host([shape="ring"]) [part="groove"] {
-stroke: var(--meter-track-color, var(--helix-color-surface-sunken));
-stroke-dasharray: var(--meter-sweep) 100;
-}
-
-:host([shape="arc"]) [part~="indicator"],
-:host([shape="ring"]) [part~="indicator"] {
-
---_meter-hue: var(--meter-color, var(--helix-color-foreground-muted));
-scale: none;
-stroke: var(--_meter-hue);
-stroke-dasharray: var(--meter-along) 100;
-stroke-linecap: round;
-transition: stroke-dasharray var(--meter-transition-duration, var(--helix-duration-normal))
-var(--helix-easing-standard);
-}
-
-:host([shape="arc"]) [part="tick"],
-:host([shape="ring"]) [part="tick"] {
-
-inset-inline-start: auto;
-position: static;
-stroke: var(--meter-tick-color, var(--helix-color-background));
-stroke-dasharray: 1 99;
-stroke-dashoffset: calc(var(--meter-along) * -1);
-}
-
-:host([shape="arc"]) [part~="indicator"][data-band="good"],
-:host([shape="ring"]) [part~="indicator"][data-band="good"] {
---_meter-hue: var(--meter-color, var(--helix-color-success));
-stroke: var(--_meter-hue);
-}
-
-:host([shape="arc"]) [part~="indicator"][data-band="fair"],
-:host([shape="ring"]) [part~="indicator"][data-band="fair"] {
---_meter-hue: var(--meter-color, var(--helix-color-warning));
-stroke: var(--_meter-hue);
-}
-
-:host([shape="arc"]) [part~="indicator"][data-band="poor"],
-:host([shape="ring"]) [part~="indicator"][data-band="poor"] {
---_meter-hue: var(--meter-color, var(--helix-color-danger));
-stroke: var(--_meter-hue);
-}
-
-:host([shape="arc"]) [part="value"],
-:host([shape="ring"]) [part="value"] {
-grid-area: 1 / 1;
-}
-
-@media print {
-:host {
-print-color-adjust: exact;
-}
-}
-
-:host([emphasis="subtle"]) [part~="indicator"] {
-background-color: color-mix(
+:host([shape="ring"]) [part="tick"] {cx: 50%;cy: 50%;fill: none;r: calc(50% - var(--_meter-stroke) / 2);stroke-width: var(--_meter-stroke);}:host([shape="arc"]) [part="groove"],
+:host([shape="ring"]) [part="groove"] {stroke: var(--meter-track-color, var(--helix-color-surface-sunken));stroke-dasharray: var(--meter-sweep) 100;}:host([shape="arc"]) [part~="indicator"],
+:host([shape="ring"]) [part~="indicator"] {--_meter-hue: var(--meter-color, var(--helix-color-foreground-muted));scale: none;stroke: var(--_meter-hue);stroke-dasharray: var(--meter-along) 100;stroke-linecap: round;transition: stroke-dasharray var(--meter-transition-duration, var(--helix-duration-normal))
+var(--helix-easing-standard);}:host([shape="arc"]) [part="tick"],
+:host([shape="ring"]) [part="tick"] {inset-inline-start: auto;position: static;stroke: var(--meter-tick-color, var(--helix-color-background));stroke-dasharray: 1 99;stroke-dashoffset: calc(var(--meter-along) * -1);}:host([shape="arc"]) [part~="indicator"][data-band="good"],
+:host([shape="ring"]) [part~="indicator"][data-band="good"] {--_meter-hue: var(--meter-color, var(--helix-color-success));stroke: var(--_meter-hue);}:host([shape="arc"]) [part~="indicator"][data-band="fair"],
+:host([shape="ring"]) [part~="indicator"][data-band="fair"] {--_meter-hue: var(--meter-color, var(--helix-color-warning));stroke: var(--_meter-hue);}:host([shape="arc"]) [part~="indicator"][data-band="poor"],
+:host([shape="ring"]) [part~="indicator"][data-band="poor"] {--_meter-hue: var(--meter-color, var(--helix-color-danger));stroke: var(--_meter-hue);}:host([shape="arc"]) [part="value"],
+:host([shape="ring"]) [part="value"] {grid-area: 1 / 1;}@media print {:host {print-color-adjust: exact;}}:host([emphasis="subtle"]) [part~="indicator"] {background-color: color-mix(
 in oklab,
 var(--_meter-hue) 30%,
 var(--meter-track-color, var(--helix-color-surface-sunken))
-);
-}
-
-:host([emphasis="subtle"][shape="arc"]) [part~="indicator"],
-:host([emphasis="subtle"][shape="ring"]) [part~="indicator"] {
-stroke: color-mix(
+);}:host([emphasis="subtle"][shape="arc"]) [part~="indicator"],
+:host([emphasis="subtle"][shape="ring"]) [part~="indicator"] {stroke: color-mix(
 in oklab,
 var(--_meter-hue) 30%,
 var(--meter-track-color, var(--helix-color-surface-sunken))
-);
-}`);
+);}`);

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

@@ -51,6 +51,9 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --meter-tick-color - The color of the mark at each threshold.
  * @cssproperty --meter-track-color - The color of the groove behind the fill.
  * @cssproperty --meter-transition-duration - How long the fill takes to move to a new reading, and to change its color. `0s` moves it at once.
+ * @cssproperty --meter-value-color - The color of the reading shown under `show-value`.
+ * @cssproperty --meter-value-gap - The space between the bar and the reading under `show-value`.
+ * @cssproperty --meter-value-size - The type size of the reading shown under `show-value`.
  */
 export declare class HelixMeter extends HelixHeadlessMeter {
     /**

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

@@ -1,57 +1,5 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: block;
-}
-
-[part="nav"] {
-align-items: center;
-
-block-size: var(--navigation-block-size, var(--helix-size-control-sm));
-display: flex;
-gap: var(--navigation-gap, var(--helix-space-2xs));
-
-min-inline-size: 0;
-overflow-x: auto;
-
-position: relative;
-}
-
-[part="indicator"] {
-background-color: var(--navigation-indicator-color, var(--helix-color-surface-sunken));
-block-size: var(--indicator-block-size, 0);
-border-radius: var(--navigation-indicator-radius, var(--helix-radii-sm));
-box-shadow: var(--navigation-indicator-shadow, none);
-inline-size: var(--indicator-inline-size, 0);
-inset-block-start: 50%;
-inset-inline-start: 0;
-opacity: 0;
-position: absolute;
-translate: var(--indicator-x, 0) -50%;
-transition:
+export const styles = createSheet(`:host {display: block;}[part="nav"] {align-items: center;block-size: var(--navigation-block-size, var(--helix-size-control-sm));display: flex;gap: var(--navigation-gap, var(--helix-space-2xs));min-inline-size: 0;overflow-x: auto;position: relative;}[part="indicator"] {background-color: var(--navigation-indicator-color, var(--helix-color-surface-sunken));block-size: var(--indicator-block-size, 0);border-radius: var(--navigation-indicator-radius, var(--helix-radii-sm));box-shadow: var(--navigation-indicator-shadow, none);inline-size: var(--indicator-inline-size, 0);inset-block-start: 50%;inset-inline-start: 0;opacity: 0;position: absolute;translate: var(--indicator-x, 0) -50%;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;
-}
-
-:host([orientation="vertical"]) [part="nav"] {
-align-items: stretch;
-block-size: auto;
-flex-direction: column;
-overflow-x: visible;
-}
-
-:host([orientation="vertical"]) [part="indicator"] {
-inset-block-start: 0;
-translate: var(--indicator-x, 0) var(--indicator-y, 0);
-}
-
-@media print {
-:host {
-display: none;
-}
-}`);
+opacity var(--helix-duration-fast) var(--helix-easing-standard);z-index: var(--helix-layer-base);}[part="indicator"][data-placed] {opacity: 1;}:host([orientation="vertical"]) [part="nav"] {align-items: stretch;block-size: auto;flex-direction: column;overflow-x: visible;}:host([orientation="vertical"]) [part="indicator"] {inset-block-start: 0;translate: var(--indicator-x, 0) var(--indicator-y, 0);}@media print {:host {display: none;}}`);

package/dist/notifications/group/notification-group.css.js

@@ -1,62 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: block;
-}
-
-[part="header"] {
-align-items: center;
-display: flex;
-gap: var(--helix-space-xs);
-padding-block: var(--helix-space-xs);
-padding-inline: var(--notifications-padding-inline, var(--helix-space-md));
-}
-
-[part="label"] {
-color: var(--helix-color-foreground-muted);
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-sm);
-font-weight: var(--helix-weight-medium);
-}
-
-[part="count"] {
-background-color: var(--helix-color-surface-sunken);
-border-radius: var(--helix-radii-full);
-color: var(--helix-color-foreground-subtle);
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-xs);
-font-variant-numeric: tabular-nums;
-line-height: 1;
-min-inline-size: var(--helix-size-badge);
-padding-block: var(--helix-space-2xs);
-padding-inline: var(--helix-space-xs);
-text-align: center;
-}
-
-[part="trigger"] {
-all: unset;
-align-items: center;
-box-sizing: border-box;
-border-radius: var(--helix-radii-sm);
-cursor: pointer;
-display: inline-flex;
-gap: var(--helix-space-xs);
-}
-
-[part="trigger"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-[part="trigger"]:hover [part="label"] {
-color: var(--helix-color-foreground);
-}
-
-[part="actions"] {
-align-items: center;
-display: inline-flex;
-margin-inline-start: auto;
-}
-
-[part="items"] {
-position: relative;
-}`);
+export const styles = createSheet(`:host {display: block;}[part="header"] {align-items: center;display: flex;gap: var(--helix-space-xs);padding-block: var(--helix-space-xs);padding-inline: var(--notifications-padding-inline, var(--helix-space-lg));}[part="label"] {color: var(--helix-color-foreground-muted);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);font-weight: var(--helix-weight-medium);}[part="count"] {background-color: var(--helix-color-surface-sunken);border-radius: var(--helix-radii-full);color: var(--helix-color-foreground-subtle);font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-variant-numeric: tabular-nums;line-height: 1;min-inline-size: var(--helix-size-badge);padding-block: var(--helix-space-2xs);padding-inline: var(--helix-space-xs);text-align: center;}[part="trigger"] {all: unset;align-items: center;box-sizing: border-box;border-radius: var(--helix-radii-sm);cursor: pointer;display: inline-flex;gap: var(--helix-space-xs);}[part="trigger"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="trigger"]:hover [part="label"] {color: var(--helix-color-foreground);}[part="actions"] {align-items: center;display: inline-flex;margin-inline-start: auto;}[part="items"] {position: relative;}`);

package/dist/notifications/notification/notification.css.js

@@ -1,272 +1,25 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-
---_notifications-line: calc(var(--helix-text-sm) * var(--helix-leading-normal));
-
---_notifications-pad-block: var(--notifications-padding-block, var(--helix-space-xs));
---_notifications-unread: var(--notifications-unread-block-size, var(--helix-space-xs));
-
-container-type: inline-size;
-
-display: block;
-}
-
-[part="item"] {
-align-items: start;
-border-block-end: var(--helix-border-thin) solid
-var(--notifications-rule, var(--helix-color-border));
-
-cursor: default;
-display: grid;
-grid-template-columns: minmax(var(--notifications-media-column, 0px), auto) minmax(0, 1fr) auto;
-padding-block: var(--_notifications-pad-block);
-padding-inline: var(--notifications-padding-inline, var(--helix-space-md));
-
-position: relative;
-}
-
-:host(:not(:state(read))) [part="item"]::before {
-background-color: var(--notifications-unread-mark, var(--helix-color-accent));
-block-size: var(--_notifications-unread);
-border-radius: var(--notifications-unread-radius, var(--helix-radii-full));
-content: "";
-inline-size: var(--notifications-unread-inline-size, var(--_notifications-unread));
-
-inset-block-start: var(
+export const styles = createSheet(`:host {--_notifications-line: calc(var(--helix-text-sm) * var(--helix-leading-normal));--_notifications-pad-block: var(--notifications-padding-block, var(--helix-space-xs));--_notifications-unread: var(--notifications-unread-block-size, var(--helix-space-xs));--_notifications-pad-inline: var(--notifications-padding-inline, var(--helix-space-lg));container-type: inline-size;display: block;}[part="item"] {align-items: start;border-block-end: var(--helix-border-thin) solid
+var(--notifications-rule, var(--helix-color-border));cursor: default;display: grid;grid-template-columns: minmax(var(--notifications-media-column, 0px), auto) minmax(0, 1fr) auto;padding-block: var(--_notifications-pad-block);padding-inline: var(--_notifications-pad-inline);position: relative;}:host(:not(:state(read))) [part="item"]::before {background-color: var(--notifications-unread-mark, var(--helix-color-accent));block-size: var(--_notifications-unread);border-radius: var(--notifications-unread-radius, var(--helix-radii-full));content: "";inline-size: var(--notifications-unread-inline-size, var(--_notifications-unread));inset-block-start: var(
 --notifications-unread-offset,
 calc(
 var(--_notifications-pad-block) +
 (var(--_notifications-line) - var(--_notifications-unread)) /
 2
 )
-);
-inset-inline-start: var(--notifications-unread-inset, var(--helix-space-2xs));
-position: absolute;
-}
-
-:host([separation="filled"]),
-:host([separation="outlined"]) {
---notifications-rule: transparent;
-
-margin-block-end: var(--notifications-item-gap, var(--helix-space-xs));
-}
-
-:host([separation="filled"]) [part="item"],
-:host([separation="outlined"]) [part="item"] {
-border: var(--helix-border-thin) solid var(--notifications-item-edge, var(--helix-color-border));
-border-radius: var(--notifications-item-radius, var(--helix-radii-md));
-}
-
-:host([separation="filled"]) [part="item"] {
-background-color: var(--notifications-item-fill, var(--helix-color-surface-raised));
-}
-
-:host([separation="filled"]) {
---avatar-background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);
-}
-
-[part="media"] {
-display: grid;
-
-grid-template-rows: var(--_notifications-line);
-place-items: center start;
-}
-
-[part="body"] {
-display: grid;
-gap: var(--helix-space-2xs);
-}
-
-[part="label"] {
-color: var(--notifications-color, var(--helix-color-foreground-muted));
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-sm);
-line-height: var(--_notifications-line);
-}
-
-slot[name="description"]::slotted(*) {
-color: var(--helix-color-foreground-subtle);
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-xs);
-line-height: var(--helix-leading-normal);
-margin: var(--helix-space-none);
-}
-
-slot[name="detail"]::slotted(*) {
-margin-block: var(--helix-space-2xs) var(--helix-space-none);
-margin-inline: var(--helix-space-none);
-}
-
-[part="body"] slot:not([name])::slotted(a) {
-color: inherit;
-text-decoration: none;
-}
-
-[part="body"] slot:not([name])::slotted(a:hover) {
-text-decoration: underline;
-text-decoration-color: color-mix(in oklab, currentcolor 35%, transparent);
-text-decoration-thickness: 1px;
-text-underline-offset: 0.25em;
-}
-
-:host(:not(:state(read))) [part="label"] {
-color: var(--helix-color-foreground);
-font-weight: var(--helix-weight-medium);
-}
-
-[part="controls"] {
-margin-inline-end: calc((var(--helix-size-control) - var(--helix-size-icon)) / -2);
-}
-
-[part="trailing"] {
-align-items: center;
-align-self: start;
-display: grid;
-grid-template-areas: "swap";
-justify-items: end;
-
-grid-template-rows: var(--_notifications-line);
-margin-inline-start: var(--helix-space-sm);
-}
-
-[part="trailing"] > * {
-grid-area: swap;
-transition:
+);inset-inline-start: var(
+--notifications-unread-inset,
+calc(
+(
+var(--_notifications-pad-inline) -
+var(--notifications-unread-inline-size, var(--_notifications-unread))
+) /
+2
+)
+);position: absolute;}:host([separation="filled"]),
+:host([separation="outlined"]) {--notifications-rule: transparent;margin-block-end: var(--notifications-item-gap, var(--helix-space-xs));}:host([separation="filled"]) [part="item"],
+:host([separation="outlined"]) [part="item"] {border: var(--helix-border-thin) solid var(--notifications-item-edge, var(--helix-color-border));border-radius: var(--notifications-item-radius, var(--helix-radii-md));}:host([separation="filled"]) [part="item"] {background-color: var(--notifications-item-fill, var(--helix-color-surface-raised));}:host([separation="filled"]) {--avatar-background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);}[part="media"] {display: grid;grid-template-rows: var(--_notifications-line);place-items: center start;}[part="body"] {display: grid;gap: var(--helix-space-2xs);}[part="label"] {color: var(--notifications-color, var(--helix-color-foreground-muted));font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);line-height: var(--_notifications-line);}slot[name="description"]::slotted(*) {color: var(--helix-color-foreground-subtle);font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);line-height: var(--helix-leading-normal);margin: var(--helix-space-none);}slot[name="detail"]::slotted(*) {margin-block: var(--helix-space-2xs) var(--helix-space-none);margin-inline: var(--helix-space-none);}[part="body"] slot:not([name])::slotted(a) {color: inherit;text-decoration: none;}[part="body"] slot:not([name])::slotted(a:hover) {text-decoration: underline;text-decoration-color: color-mix(in oklab, currentcolor 35%, transparent);text-decoration-thickness: 1px;text-underline-offset: 0.25em;}:host(:not(:state(read))) [part="label"] {color: var(--helix-color-foreground);font-weight: var(--helix-weight-medium);}[part="controls"] {margin-inline-end: calc((var(--helix-size-control) - var(--helix-size-icon)) / -2);}[part="trailing"] {align-items: center;align-self: start;display: grid;grid-template-areas: "swap";justify-items: end;grid-template-rows: var(--_notifications-line);margin-inline-start: var(--helix-space-sm);}[part="trailing"] > * {grid-area: swap;transition:
 opacity var(--helix-duration-normal) var(--helix-easing-standard),
-translate var(--helix-duration-normal) var(--helix-easing-decelerate);
-}
-
-:host {
---_notifications-swap: 0;
-}
-
-[part="trailing"] > :not([part="controls"]) {
-color: var(--helix-color-foreground-subtle);
-
-display: block;
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-xs);
-line-height: var(--_notifications-line);
-opacity: calc(1 - var(--_notifications-swap));
-
-translate: calc(var(--helix-space-2xs) * var(--_notifications-swap)) 0;
-}
-
-[part="controls"] {
-align-items: center;
-display: flex;
-opacity: var(--_notifications-swap);
-translate: calc(var(--helix-space-2xs) * (1 - var(--_notifications-swap))) 0;
-}
-
-:host(:hover:state(controls)),
-:host(:focus-within:state(controls)) {
---_notifications-swap: 1;
-}
-
-[part="controls"] {
-pointer-events: none;
-}
-
-:host(:hover:state(controls)) [part="controls"],
-:host(:focus-within:state(controls)) [part="controls"] {
-pointer-events: auto;
-}
-
-@media (hover: none) and (pointer: coarse) {
-[part="trailing"] {
-column-gap: var(--helix-space-sm);
-grid-auto-flow: column;
-grid-template-areas: none;
-}
-
-[part="trailing"] > * {
-grid-area: auto;
-opacity: 1;
-translate: none;
-}
-
-[part="controls"] {
-pointer-events: auto;
-}
-}
-
-@media (prefers-reduced-motion: reduce) {
-[part="trailing"] > * {
-transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);
-translate: none;
-}
-}
-
-[part="actions"] {
-align-items: center;
-display: flex;
-flex-wrap: wrap;
-gap: var(--helix-space-2xs);
-}
-
-:host(:not(:state(actions))) [part="actions"] {
-display: none;
-}
-
-:host(:state(actions)) [part="actions"] {
-margin-block-start: var(--helix-space-2xs);
-}
-
-[part="dismiss"] {
-background: none;
-border: 0;
-border-radius: var(--helix-radii-sm);
-block-size: var(--helix-size-control);
-color: var(--notifications-dismiss-color, var(--helix-color-foreground-subtle));
-cursor: pointer;
-display: grid;
-inline-size: var(--helix-size-control);
-margin-inline-start: var(--helix-space-2xs);
-padding: var(--helix-space-none);
-place-items: center;
-}
-
-[part="dismiss"] ::slotted(*) {
-block-size: var(--icon-size, var(--helix-size-icon));
-inline-size: var(--icon-size, var(--helix-size-icon));
-}
-
-[part="dismiss"]:hover {
-background-color: color-mix(in oklab, currentcolor 12%, 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="item"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: calc(var(--helix-size-focus-offset) * -1);
-}
-
-@media print {
-[part="dismiss"] {
-display: none;
-}
-
-:host(:not(:state(read))) [part="item"]::before {
-display: none;
-}
-}
-
-@container (inline-size < 18rem) {
-[part="item"] {
-grid-template-columns: minmax(var(--notifications-media-column, 0px), auto) minmax(0, 1fr);
-}
-
-[part="trailing"] {
-align-self: start;
-grid-column: 2;
-grid-row: 2;
-justify-items: end;
-margin-block-start: var(--helix-space-2xs);
-margin-inline-start: var(--helix-space-none);
-}
-}`);
+translate var(--helix-duration-normal) var(--helix-easing-decelerate);}:host {--_notifications-swap: 0;}[part="trailing"] > :not([part="controls"]) {color: var(--helix-color-foreground-subtle);display: block;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);line-height: var(--_notifications-line);opacity: calc(1 - var(--_notifications-swap));translate: calc(var(--helix-space-2xs) * var(--_notifications-swap)) 0;}[part="controls"] {align-items: center;display: flex;opacity: var(--_notifications-swap);}:host(:hover:state(controls)),
+:host(:focus-within:state(controls)) {--_notifications-swap: 1;}[part="controls"] {pointer-events: none;}:host(:hover:state(controls)) [part="controls"],
+:host(:focus-within:state(controls)) [part="controls"] {pointer-events: auto;}@media (hover: none) and (pointer: coarse) {[part="trailing"] {column-gap: var(--helix-space-sm);grid-auto-flow: column;grid-template-areas: none;}[part="trailing"] > * {grid-area: auto;opacity: 1;translate: none;}[part="controls"] {pointer-events: auto;}}@media (prefers-reduced-motion: reduce) {[part="trailing"] > * {transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);translate: none;}}[part="actions"] {align-items: center;display: flex;flex-wrap: wrap;gap: var(--helix-space-2xs);}:host(:not(:state(actions))) [part="actions"] {display: none;}:host(:state(actions)) [part="actions"] {margin-block-start: var(--helix-space-2xs);}[part="dismiss"] {background: none;border: 0;border-radius: var(--helix-radii-sm);block-size: var(--helix-size-control);color: var(--notifications-dismiss-color, var(--helix-color-foreground-subtle));cursor: pointer;display: grid;inline-size: var(--helix-size-control);margin-inline-start: var(--helix-space-2xs);padding: var(--helix-space-none);place-items: center;}[part="dismiss"] ::slotted(*) {block-size: var(--icon-size, var(--helix-size-icon));inline-size: var(--icon-size, var(--helix-size-icon));}[part="dismiss"]:hover {background-color: color-mix(in oklab, currentcolor 12%, 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="item"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}@media print {[part="dismiss"] {display: none;}:host(:not(:state(read))) [part="item"]::before {display: none;}}@container (inline-size < 18rem) {[part="item"] {grid-template-columns: minmax(var(--notifications-media-column, 0px), auto) minmax(0, 1fr);}[part="trailing"] {align-self: start;grid-column: 2;grid-row: 2;justify-items: end;margin-block-start: var(--helix-space-2xs);margin-inline-start: var(--helix-space-none);}}`);