@fusion.dev/helix 0.143.0 → 0.144.0

package/dist/icon/index.js

@@ -1 +1,2 @@
+export { registerIconLibrary, registerIcons, resolveIcon, } from '@fusion.dev/helix-headless/icon';
 export * from './root/icon-root.js';

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

@@ -1,4 +1,4 @@
-import { HelixHeadlessIcon } from '@fusion.dev/helix-headless/icon';
+import { HelixHeadlessIcon } from '@fusion.dev/helix-headless/icon/root';
 import type { CSSResultGroup } from 'lit';
 /**
  * @summary A named icon from the Helix set.

package/dist/icon/root/icon-root.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { customElement } from '@fusion.dev/helix-core';
-import { HelixHeadlessIcon } from '@fusion.dev/helix-headless/icon';
+import { HelixHeadlessIcon } from '@fusion.dev/helix-headless/icon/root';
 import { styles } from './icon-root.css.js';
 let HelixIcon = class HelixIcon extends HelixHeadlessIcon {
     static { this.styles = styles; }

package/dist/icon/root/index.d.ts

@@ -0,0 +1,2 @@
+export { type IconResolver, registerIconLibrary, registerIcons, resolveIcon, } from '@fusion.dev/helix-headless/icon/root';
+export * from './icon-root.js';

package/dist/icon/root/index.js

@@ -0,0 +1,2 @@
+export { registerIconLibrary, registerIcons, resolveIcon, } from '@fusion.dev/helix-headless/icon/root';
+export * from './icon-root.js';

package/dist/icon-button/root/icon-button-root.css.js

@@ -6,6 +6,8 @@ display: inline-flex;
 
 :host {
 --_icon-button-edge: var(--helix-color-border);
+
+--_icon-button-turn: 0.8s;
 --_icon-button-ink: var(--helix-color-foreground-muted);
 --_icon-button-ink-hover: var(--helix-color-foreground);
 
@@ -177,6 +179,41 @@ cursor: not-allowed;
 opacity: 0.5;
 }
 
+:host(:state(pending)) [part="button"] {
+cursor: progress;
+position: relative;
+}
+
+:host(:state(pending)) [part="button"] > * {
+visibility: hidden;
+}
+
+:host(:state(pending)) [part="button"]::after {
+animation: helix-icon-button-turn var(--_icon-button-turn) linear infinite;
+block-size: var(--icon-button-spinner-size, 1.15em);
+border: var(--helix-border-thick) solid color-mix(in oklab, currentColor 30%, transparent);
+border-block-start-color: currentColor;
+border-radius: var(--helix-radii-full);
+box-sizing: border-box;
+content: "";
+inline-size: var(--icon-button-spinner-size, 1.15em);
+inset: 0;
+margin: auto;
+position: absolute;
+}
+
+@keyframes helix-icon-button-turn {
+to {
+rotate: 1turn;
+}
+}
+
+@media (prefers-reduced-motion: reduce) {
+:host(:state(pending)) [part="button"]::after {
+animation-duration: calc(var(--helix-duration-slow) * 12);
+}
+}
+
 @media print {
 :host {
 display: none;

package/dist/icon-button/root/icon-button-root.d.ts

@@ -22,6 +22,7 @@ declare const HelixIconButton_base: (new (...args: any[]) => import("../../share
  * @slot - The icon.
  *
  * @csspart button - The inner button.
+ * @csspart live - The live region that says `pending-label` when the button becomes pending under focus. It is clipped out of view and still read.
  *
  * @cssproperty --icon-button-background-color - Fill behind the button, in every state.
  * @cssproperty --icon-button-background-color-hover - Fill behind the button under the pointer. Without it, `--icon-button-background-color` also applies on hover.
@@ -29,6 +30,9 @@ declare const HelixIconButton_base: (new (...args: any[]) => import("../../share
  * @cssproperty --icon-button-radius - Corner radius of the control, which a group flattens through `--button-radius-start` and `--button-radius-end`.
  * @cssproperty --icon-button-shadow - Shadow of a raised icon button.
  * @cssproperty --icon-button-size - Edge length of the control.
+ * @cssproperty --icon-button-spinner-size - Size of the ring a pending button turns.
+ *
+ * @cssstate pending - The button is pending: `pending` is set. A ring turns over its hidden icon.
  */
 export declare class HelixIconButton extends HelixIconButton_base {
     /**

package/dist/icon-button/root/icon-button-root.js

@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessIconButton } from '@fusion.dev/helix-headless/icon-button';
 import { property } from 'lit/decorators.js';
+import { styles as liveStyles } from '../../shared/live/live.css.js';
 import { MixinControlSurface } from '../../shared/mixin-control-surface/mixin-control-surface.js';
 import { styles } from './icon-button-root.css.js';
 let HelixIconButton = class HelixIconButton extends MixinControlSurface(HelixHeadlessIconButton) {
@@ -14,7 +15,7 @@ let HelixIconButton = class HelixIconButton extends MixinControlSurface(HelixHea
         super(...arguments);
         this.raised = false;
     }
-    static { this.styles = styles; }
+    static { this.styles = [liveStyles, styles]; }
 };
 __decorate([
     property({ reflect: true, type: Boolean })

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

@@ -7,12 +7,12 @@ export const styles = createSheet(`:host {
 align-items: center;
 background-color: var(--input-background-color, var(--helix-color-well));
 block-size: var(--_input-size);
-border: var(--helix-border-thin) solid var(--helix-color-border);
-border-radius: var(--helix-radii-sm);
+border: var(--helix-border-thin) solid var(--input-border-color, var(--helix-color-border));
+border-radius: var(--input-radius, var(--helix-radii-sm));
 color: var(--helix-color-foreground-subtle);
 display: flex;
 gap: var(--helix-space-2xs);
-padding-inline: var(--helix-space-xs);
+padding-inline: var(--input-padding-inline, var(--helix-space-xs));
 transition:
 border-color var(--helix-duration-fast) var(--helix-easing-standard),
 background-color var(--helix-duration-fast) var(--helix-easing-standard);

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

@@ -23,6 +23,9 @@ import type { CSSResultGroup } from 'lit';
  * @documentation https://fusion.dev/helix/components/input
  *
  * @cssproperty --input-background-color - Fill behind the text.
+ * @cssproperty --input-border-color - Edge of the field at rest. Hover, focus and an error still draw their own.
+ * @cssproperty --input-padding-inline - Space between the edge of the field and what is inside it.
+ * @cssproperty --input-radius - Corner radius of the field.
  * @cssproperty --input-size - Height of the field.
  */
 export declare class HelixInput extends HelixHeadlessInput {

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

@@ -14,12 +14,12 @@ margin: var(--helix-space-none);
 padding: var(--helix-space-none);
 }
 
-[part="entry"] {
+[part~="entry"] {
 align-items: center;
 color: var(--helix-color-foreground-muted);
 display: flex;
 font-size: var(--helix-text-sm);
-gap: var(--helix-space-2xs);
+gap: var(--legend-entry-gap, var(--helix-space-2xs));
 line-height: var(--helix-leading-tight);
 }
 
@@ -28,23 +28,23 @@ line-height: var(--helix-leading-tight);
 flex-direction: column;
 }
 
-:host([placement="end"]) [part="entry"] {
+:host([placement="end"]) [part~="entry"] {
 flex-direction: row-reverse;
 text-align: end;
 }
 
-[part="entry"]::before {
+[part~="entry"]::before {
 --_legend-shade: color-mix(in oklab, var(--chart-series) 60%, var(--helix-color-background));
 
 block-size: var(--legend-swatch-size, var(--helix-space-sm));
 
-border-radius: var(--helix-radii-sm);
+border-radius: var(--legend-swatch-radius, var(--helix-radii-sm));
 content: "";
 flex: 0 0 auto;
 inline-size: var(--legend-swatch-size, var(--helix-space-sm));
 }
 
-[part="entry"]::before {
+[part~="entry"]::before {
 background-color: color-mix(
 in oklab,
 var(--chart-series) calc(var(--_legend-area, 1) * var(--_legend-through, 1) * 100%),
@@ -52,8 +52,8 @@ transparent
 );
 }
 
-[part="entry"][data-emphasis="outlined"]::before,
-:host([emphasis="outlined"]) [part="entry"]:not([data-emphasis])::before {
+[part~="entry"][data-emphasis="outlined"]::before,
+:host([emphasis="outlined"]) [part~="entry"]:not([data-emphasis])::before {
 background-color: color-mix(
 in oklab,
 var(--_legend-shade) calc(var(--_legend-through, 1) * 100%),
@@ -63,22 +63,49 @@ border: var(--legend-swatch-stroke, var(--helix-border-thick)) solid
 color-mix(in oklab, var(--chart-series) calc(var(--_legend-through, 1) * 100%), transparent);
 }
 
-[part="entry"][data-emphasis="subtle"]::before,
-:host([emphasis="subtle"]) [part="entry"]:not([data-emphasis])::before {
+[part~="entry"][data-emphasis="subtle"]::before,
+:host([emphasis="subtle"]) [part~="entry"]:not([data-emphasis])::before {
 --_legend-area: 0.2;
 border: var(--legend-swatch-stroke, var(--helix-border-thick)) solid
 color-mix(in oklab, var(--chart-series) calc(var(--_legend-through, 1) * 100%), transparent);
 }
 
-[part="entry"][data-material="glass"]::before,
-:host([material="glass"]) [part="entry"]:not([data-material])::before {
+[part~="entry"][data-material="glass"]::before,
+:host([material="glass"]) [part~="entry"]:not([data-material])::before {
 --_legend-through: calc(0.62 * var(--helix-material-opacity));
 }
 
-:host([material="frosted"]) [part="entry"]:not([data-material])::before {
+:host([material="frosted"]) [part~="entry"]:not([data-material])::before {
 --_legend-through: calc(0.88 * var(--helix-material-opacity));
 }
 
+[part="toggle"] {
+all: unset;
+box-sizing: border-box;
+border-radius: var(--helix-radii-sm);
+cursor: pointer;
+}
+
+[part="toggle"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
+@media (hover: hover) {
+[part="toggle"]:hover {
+color: var(--helix-color-foreground);
+}
+}
+
+[part~="entry-hidden"] {
+opacity: var(--legend-hidden-opacity, 0.56);
+}
+
+[part~="entry-hidden"]::before {
+background-color: transparent;
+border: var(--legend-swatch-stroke, var(--helix-border-thick)) solid var(--chart-series);
+}
+
 @media print {
 :host {
 print-color-adjust: economy;

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

@@ -14,6 +14,9 @@ import type { CSSResultGroup, PropertyValues } from 'lit';
  * put a color in the headless tier. Charts and legends share the file, so both
  * use the same twenty-four color names.
  *
+ * Under `toggles`, each name is a button. A hidden series' entry fades and
+ * its swatch empties to an outline, so the color stays readable.
+ *
  * @since 0.1.0
  * @status stable
  * @category charts
@@ -22,7 +25,10 @@ import type { CSSResultGroup, PropertyValues } from 'lit';
  * @documentation https://fusion.dev/helix/components/legend
  *
  * @cssproperty --legend-direction - The direction the entries run: `row`, which wraps, or `column`.
+ * @cssproperty --legend-entry-gap - The space between a swatch and its name.
  * @cssproperty --legend-gap - The space between entries.
+ * @cssproperty --legend-hidden-opacity - How strongly a hidden series' entry is drawn, under `toggles`.
+ * @cssproperty --legend-swatch-radius - The corner of the color swatch.
  * @cssproperty --legend-swatch-size - The size of the color swatch.
  * @cssproperty --legend-swatch-stroke - The width of the edge an `outlined` or
  *   `subtle` swatch is drawn with.

package/dist/legend/root/legend-root.js

@@ -29,7 +29,7 @@ let HelixLegend = class HelixLegend extends HelixHeadlessLegend {
         const outlined = slots(this.outlined);
         const subtle = slots(this.subtle);
         const glass = slots(this.glass);
-        const entries = [...this.renderRoot.querySelectorAll('[part="entry"]')];
+        const entries = [...this.renderRoot.querySelectorAll('[part~="entry"]')];
         for (const [at, entry] of entries.entries()) {
             mark(entry, 'emphasis', outlined.has(at) ? 'outlined' : subtle.has(at) ? 'subtle' : undefined);
             mark(entry, 'material', glass.has(at) ? 'glass' : undefined);

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

@@ -17,6 +17,8 @@ inline-size: 100vw;
 max-block-size: 100dvh;
 max-inline-size: 100vw;
 padding: var(--lightbox-padding, var(--helix-space-md));
+
+touch-action: pan-y pinch-zoom;
 }
 
 [part="dialog"]:focus-visible {
@@ -64,6 +66,88 @@ transition: none;
 }
 }
 
+[part="previous"],
+[part="next"],
+[part="dismiss"] {
+all: unset;
+
+box-sizing: border-box;
+align-items: center;
+background-color: var(--helix-color-surface-overlay);
+block-size: var(--lightbox-control-size, var(--helix-size-control));
+border-radius: var(--helix-radii-full);
+box-shadow: var(--helix-shadow-md);
+color: var(--lightbox-foreground, var(--helix-color-foreground));
+cursor: pointer;
+display: inline-flex;
+inline-size: var(--lightbox-control-size, var(--helix-size-control));
+justify-content: center;
+position: absolute;
+transition:
+opacity var(--helix-duration-fast) var(--helix-easing-standard),
+visibility var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+[part="previous"],
+[part="next"] {
+inset-block-start: 50%;
+translate: 0 -50%;
+}
+
+[part="previous"] {
+inset-inline-start: var(--lightbox-padding, var(--helix-space-md));
+}
+
+[part="next"] {
+inset-inline-end: var(--lightbox-padding, var(--helix-space-md));
+}
+
+[part="dismiss"] {
+inset-block-start: var(--lightbox-padding, var(--helix-space-md));
+inset-inline-end: var(--lightbox-padding, var(--helix-space-md));
+}
+
+[part="previous"] svg,
+[part="next"] svg,
+[part="dismiss"] svg {
+block-size: var(--helix-size-icon);
+inline-size: var(--helix-size-icon);
+}
+
+[part="previous"]:hover,
+[part="next"]:hover,
+[part="dismiss"]:hover {
+background-color: var(--helix-color-surface-sunken);
+}
+
+[part="previous"]:focus-visible,
+[part="next"]:focus-visible,
+[part="dismiss"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
+[part="previous"][aria-disabled="true"],
+[part="next"][aria-disabled="true"] {
+cursor: default;
+opacity: 0.4;
+}
+
+:host(:state(idle)) [part="previous"],
+:host(:state(idle)) [part="next"],
+:host(:state(idle)) [part="dismiss"] {
+opacity: 0;
+visibility: hidden;
+}
+
+@media (prefers-reduced-motion: reduce) {
+[part="previous"],
+[part="next"],
+[part="dismiss"] {
+transition: none;
+}
+}
+
 @media print {
 :host {
 display: none;

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

@@ -23,6 +23,7 @@ import type { CSSResultGroup } from 'lit';
  *
  * @event {HelixActivateEvent} helix-activate - Fired after the shown item changes, when the element already holds the new item.
  *
+ * @cssproperty --lightbox-control-size - Size of the previous, next and close controls drawn with `controls`.
  * @cssproperty --lightbox-foreground - Color of the controls and text drawn over the content.
  * @cssproperty --lightbox-gap - Space between the header or footer and the content.
  * @cssproperty --lightbox-padding - Inset from the edges of the screen.

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

@@ -155,6 +155,16 @@ opacity: 1;
 }
 }
 
+[part="svg"][hidden] {
+display: inline;
+visibility: hidden;
+}
+
+[part="mark"][hidden] {
+display: flex;
+visibility: hidden;
+}
+
 @media print {
 :host {
 display: none;

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

@@ -10,6 +10,9 @@ import type { CSSResultGroup } from 'lit';
  * `currentColor`, so it matches the text color around it, including inside a
  * primary button.
  *
+ * While `delay` runs, the loader keeps its size and draws nothing, so the line
+ * it sits in does not move when it appears.
+ *
  * @since 0.1.0
  * @status stable
  * @category feedback

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

@@ -5,9 +5,30 @@ display: block;
 
 :host([show-value]) {
 align-items: center;
+column-gap: var(--helix-space-sm);
 display: grid;
-gap: var(--helix-space-sm);
 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"] {
@@ -88,6 +109,7 @@ z-index: var(--helix-layer-raised);
 :host([shape="ring"]) {
 display: inline-grid;
 place-items: center;
+row-gap: var(--meter-label-gap, var(--helix-space-2xs));
 }
 
 :host([shape="arc"]) [part="track"],

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

@@ -29,6 +29,8 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Gauge, Level, Capacity
  * @documentation https://fusion.dev/helix/components/meter
  *
+ * @slot label - A visible label, above a bar and under a ring or an arc. Its words name it in place of `label`.
+ *
  * @csspart indicator - The part of the track the value fills.
  * @csspart indicator-fair - The fill while the reading is in a band next to the good band. Set alongside `indicator`.
  * @csspart indicator-good - The fill while the reading is in the good band. Set alongside `indicator`.
@@ -40,6 +42,9 @@ import type { CSSResultGroup } from 'lit';
  * @csspart value - The reading as text, shown when `show-value` is set.
  *
  * @cssproperty --meter-color - The fill color. Overrides the band's tone.
+ * @cssproperty --meter-label-color - The color of a slotted label.
+ * @cssproperty --meter-label-gap - The space between a slotted label and the meter.
+ * @cssproperty --meter-label-size - The type size of a slotted label.
  * @cssproperty --meter-ring-size - The width and height of the drawing in `ring` and `arc`.
  * @cssproperty --meter-ring-width - The thickness of the stroke in `ring` and `arc`.
  * @cssproperty --meter-size - The thickness of the bar.

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

@@ -241,6 +241,11 @@ 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;

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

@@ -2,9 +2,9 @@ import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`[part="field"] {
 align-items: center;
 background-color: var(--number-input-background-color, var(--helix-color-well));
-block-size: var(--helix-size-control);
-border: var(--helix-border-thin) solid var(--helix-color-border);
-border-radius: var(--helix-radii-sm);
+block-size: var(--number-input-size, var(--helix-size-control));
+border: var(--helix-border-thin) solid var(--number-input-border-color, var(--helix-color-border));
+border-radius: var(--number-input-radius, var(--helix-radii-sm));
 box-sizing: border-box;
 display: flex;
 

package/dist/number-input/root/number-input-root.d.ts

@@ -33,6 +33,9 @@ import type { CSSResultGroup } from 'lit';
  * @csspart increment - The button that steps the value up.
  *
  * @cssproperty --number-input-background-color - The fill behind the number.
+ * @cssproperty --number-input-border-color - Edge of the field at rest. Hover, focus and an error still draw their own.
+ * @cssproperty --number-input-radius - Corner radius of the field.
+ * @cssproperty --number-input-size - Height of the field.
  */
 export declare class HelixNumberInput extends HelixHeadlessNumberInput {
     static styles: CSSResultGroup;

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

@@ -13,10 +13,11 @@ gap: var(--pin-input-gap, var(--helix-space-xs));
 
 [part="cell"] {
 all: unset;
-background-color: var(--helix-color-well);
-block-size: var(--helix-size-control);
-border: var(--helix-border-thin) solid var(--helix-color-border);
-border-radius: var(--helix-radii-sm);
+background-color: var(--pin-input-cell-background-color, var(--helix-color-well));
+block-size: var(--pin-input-cell-size, var(--helix-size-control));
+border: var(--helix-border-thin) solid
+var(--pin-input-cell-border-color, var(--helix-color-border));
+border-radius: var(--pin-input-cell-radius, var(--helix-radii-sm));
 box-sizing: border-box;
 color: var(--helix-color-foreground);
 font-family: var(--helix-font-sans);
@@ -24,7 +25,7 @@ font-size: var(--helix-text-lg);
 
 font-variant-numeric: tabular-nums;
 font-weight: var(--helix-weight-medium);
-inline-size: var(--helix-size-control);
+inline-size: var(--pin-input-cell-size, var(--helix-size-control));
 text-align: center;
 transition: border-color var(--helix-duration-fast) var(--helix-easing-standard);
 }
@@ -56,6 +57,12 @@ background-color: transparent;
 font-size: var(--helix-text-xl);
 }
 
+[part="separator"] {
+align-self: center;
+color: var(--helix-color-foreground-muted);
+font-size: var(--helix-text-lg);
+}
+
 [part="cell"]::placeholder {
 color: var(--helix-color-foreground-subtle);
 }

package/dist/pin-input/root/pin-input-root.d.ts

@@ -21,7 +21,12 @@ import type { CSSResultGroup } from 'lit';
  *
  * @csspart cell - One box.
  * @csspart field - The row of boxes.
+ * @csspart separator - The text `format` draws between two boxes.
  *
+ * @cssproperty --pin-input-cell-background-color - Fill behind each box.
+ * @cssproperty --pin-input-cell-border-color - Edge of each box at rest. Hover, focus and an error still draw their own.
+ * @cssproperty --pin-input-cell-radius - Corner radius of each box.
+ * @cssproperty --pin-input-cell-size - Width and height of each box.
  * @cssproperty --pin-input-gap - The space between one box and the next.
  */
 export declare class HelixPinInput extends HelixHeadlessPinInput {

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

@@ -11,6 +11,9 @@ background-color: var(--helix-color-surface-overlay);
 border: var(--popover-border-width, var(--helix-border-floating)) solid
 var(--popover-border-color, var(--helix-color-border));
 
+--_popover-edge: var(--popover-border-width, var(--helix-border-floating)) solid
+var(--popover-border-color, var(--helix-color-border));
+
 border-radius: var(--helix-radii-sm);
 box-shadow: var(--popover-shadow, var(--helix-shadow-floating));
 box-sizing: border-box;
@@ -89,6 +92,39 @@ padding: var(--popover-padding, var(--helix-space-md));
 padding: var(--popover-padding, var(--helix-space-none));
 }
 
+[part="popover"]:focus,
+[part="popover"]:focus-visible {
+outline: none;
+}
+
+[part~="arrow"] {
+background-color: var(--helix-color-surface-overlay);
+block-size: var(--popover-arrow-size, 0.5rem);
+inline-size: var(--popover-arrow-size, 0.5rem);
+position: absolute;
+rotate: 45deg;
+}
+
+[part="popover"][data-placement^="bottom"] [part~="arrow"] {
+border-left: var(--_popover-edge);
+border-top: var(--_popover-edge);
+}
+
+[part="popover"][data-placement^="top"] [part~="arrow"] {
+border-bottom: var(--_popover-edge);
+border-right: var(--_popover-edge);
+}
+
+[part="popover"][data-placement^="right"] [part~="arrow"] {
+border-bottom: var(--_popover-edge);
+border-left: var(--_popover-edge);
+}
+
+[part="popover"][data-placement^="left"] [part~="arrow"] {
+border-right: var(--_popover-edge);
+border-top: var(--_popover-edge);
+}
+
 @media print {
 :host {
 display: none;

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

@@ -18,6 +18,7 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Popper, Flyout, Overlay
  * @documentation https://fusion.dev/helix/components/popover
  *
+ * @cssproperty --popover-arrow-size - Size of the point drawn with `arrow`. Tooltip's point is the same size.
  * @cssproperty --popover-border-color - Color of the panel's edge.
  * @cssproperty --popover-border-width - Width of the panel's edge. Defaults to
  *   `--helix-border-floating`, which is `0`, so the panel stands out by its shadow unless

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

@@ -5,9 +5,29 @@ display: block;
 
 :host([show-value]) {
 align-items: center;
+column-gap: var(--helix-space-sm);
 display: grid;
-gap: var(--helix-space-sm);
 grid-template-columns: 1fr auto;
+
+row-gap: var(--progress-label-gap, var(--helix-space-2xs));
+}
+
+slot[name="label"]::slotted(*) {
+color: var(--progress-label-color, var(--helix-color-foreground));
+display: block;
+font-size: var(--progress-label-size, var(--helix-text-sm));
+grid-column: 1 / -1;
+margin-block-end: var(--progress-label-gap, var(--helix-space-2xs));
+}
+
+:host([show-value]) slot[name="label"]::slotted(*) {
+margin-block-end: 0;
+}
+
+:host([shape="ring"]) slot[name="label"]::slotted(*) {
+
+grid-column: 1;
+margin-block: 0;
 }
 
 [part="value"] {
@@ -98,6 +118,7 @@ translate: 0;
 :host([shape="ring"]) {
 display: inline-grid;
 place-items: center;
+row-gap: var(--progress-label-gap, var(--helix-space-2xs));
 }
 
 :host([shape="ring"]) [part="track"] {