@fusion.dev/helix 0.0.0-dev

package/dist/menu/item/menu-item.d.ts

@@ -0,0 +1,26 @@
+import { HelixHeadlessMenuItem } from '@fusion.dev/helix-headless/menu';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary One row in a menu: a command, a choice, or a way into a submenu.
+ *
+ * @description
+ * The tick and the arrow hold their space whether or not they are showing, so
+ * the labels in a menu start at one place and the rows read as a column rather
+ * than as a ragged list.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @aliases Menu option, Menu row
+ * @documentation https://helix.fusion.dev/components/menu
+ *
+ * @cssproperty --menu-item-hover-color - Fill under the pointer.
+ * @cssproperty --menu-item-start - Width of the leading column, for a row carrying more than a mark.
+ */
+export declare class HelixMenuItem extends HelixHeadlessMenuItem {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-menu-item': HelixMenuItem;
+    }
+}

package/dist/menu/item/menu-item.js

@@ -0,0 +1,32 @@
+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 { HelixHeadlessMenuItem } from '@fusion.dev/helix-headless/menu';
+import { styles } from './menu-item.css.js';
+/**
+ * @summary One row in a menu: a command, a choice, or a way into a submenu.
+ *
+ * @description
+ * The tick and the arrow hold their space whether or not they are showing, so
+ * the labels in a menu start at one place and the rows read as a column rather
+ * than as a ragged list.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @aliases Menu option, Menu row
+ * @documentation https://helix.fusion.dev/components/menu
+ *
+ * @cssproperty --menu-item-hover-color - Fill under the pointer.
+ * @cssproperty --menu-item-start - Width of the leading column, for a row carrying more than a mark.
+ */
+let HelixMenuItem = class HelixMenuItem extends HelixHeadlessMenuItem {
+    static { this.styles = styles; }
+};
+HelixMenuItem = __decorate([
+    customElement('helix-menu-item')
+], HelixMenuItem);
+export { HelixMenuItem };

package/dist/menu/root/menu-root.css.d.ts

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

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

@@ -0,0 +1,161 @@
+// Generated from src/menu/root/menu-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+
+display: contents;
+}
+
+[part="surface"] {
+
+max-block-size: var(--menu-max-block-size, var(--floating-available-block-size, none));
+overflow-y: auto;
+
+--helix-size-control: var(--helix-size-control-sm);
+--helix-size-icon: var(--helix-size-icon-sm);
+
+background-color: var(--menu-background-color, var(--helix-color-surface-overlay));
+
+border: var(--menu-border-width, var(--helix-border-floating)) solid
+var(--menu-border-color, var(--helix-color-border));
+
+border-radius: var(--helix-radii-sm);
+box-shadow: var(--menu-shadow, var(--helix-shadow-floating));
+
+inset: auto;
+margin: var(--helix-space-none);
+min-inline-size: var(--menu-min-inline-size, 12rem);
+
+padding-block: var(--helix-space-xs);
+padding-inline: var(--helix-space-none);
+}
+
+[part="surface"][hidden] {
+display: none;
+}
+
+[part="surface"] {
+opacity: 0;
+--_travel: calc(var(--helix-space-2xs) * -1);
+transform: translateY(var(--_travel));
+scale: 0.96;
+transition:
+opacity var(--helix-duration-fast) var(--helix-easing-standard),
+scale var(--helix-duration-fast) var(--helix-easing-emphasized),
+transform var(--helix-duration-fast) var(--helix-easing-emphasized),
+display var(--helix-duration-fast) allow-discrete,
+overlay var(--helix-duration-fast) allow-discrete;
+}
+
+[part="surface"][data-placement^="top"] {
+--_travel: var(--helix-space-2xs);
+}
+
+[part="surface"][data-placed] {
+opacity: 1;
+scale: 1;
+transform: none;
+}
+
+[part="surface"][data-placement^="top"] {
+transform-origin: var(--floating-arrow-x, 50%) 100%;
+}
+
+[part="surface"][data-placement^="bottom"] {
+transform-origin: var(--floating-arrow-x, 50%) 0;
+}
+
+[part="surface"][data-placement^="left"] {
+transform-origin: 100% var(--floating-arrow-y, 50%);
+}
+
+[part="surface"][data-placement^="right"] {
+transform-origin: 0 var(--floating-arrow-y, 50%);
+}
+
+@media (prefers-reduced-motion: reduce) {
+[part="surface"],
+[part="surface"][data-placed] {
+scale: 1;
+transform: none;
+transition: none;
+}
+}
+
+[part="header"] {
+align-items: center;
+border-block-end: var(--helix-border-thin) solid var(--helix-color-border);
+display: flex;
+gap: var(--helix-space-2xs);
+margin-block-end: var(--helix-space-2xs);
+
+padding: var(--helix-space-2xs) var(--helix-space-xs) var(--helix-space-xs);
+}
+
+[part="back"] {
+align-items: center;
+background: none;
+border: none;
+border-radius: var(--helix-radii-sm);
+color: var(--helix-color-foreground-muted);
+cursor: pointer;
+display: inline-flex;
+justify-content: center;
+
+block-size: calc(var(--helix-size-icon) + var(--helix-space-xs));
+inline-size: calc(var(--helix-size-icon) + var(--helix-space-xs));
+padding: var(--helix-space-none);
+}
+
+[part="back"] svg {
+block-size: var(--helix-size-icon);
+inline-size: var(--helix-size-icon);
+}
+
+[part="back"]:hover {
+background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);
+color: var(--helix-color-foreground);
+}
+
+[part="back"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: calc(var(--helix-size-focus-offset) * -1);
+}
+
+[part="title"] {
+color: var(--helix-color-foreground);
+font-size: var(--helix-text-xs);
+font-weight: var(--helix-weight-medium);
+}
+
+::slotted(helix-divider) {
+margin-block: var(--helix-space-2xs);
+}
+
+[part="surface"][data-drilled] slot::slotted(:not(helix-menu-item)) {
+display: none;
+}
+
+:host(:dir(rtl)) [part="back"] svg {
+scale: -1 1;
+}
+
+[part="empty"],
+[part="loading"] {
+color: var(--helix-color-foreground-subtle);
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-sm);
+margin: var(--helix-space-none);
+padding-block: var(--helix-space-md);
+padding-inline: var(--helix-space-sm);
+text-align: center;
+}
+
+:host([loading]) [part="surface"] {
+opacity: 0.5;
+}
+
+@media print {
+:host {
+display: none;
+}
+}`);

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

@@ -0,0 +1,36 @@
+import { HelixHeadlessMenu } from '@fusion.dev/helix-headless/menu';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary A menu of commands, opened from a trigger.
+ *
+ * @description
+ * The surface is in the top layer, so it needs no `z-index` and cannot be
+ * clipped by whatever it sits inside.
+ *
+ * A submenu replaces the page rather than opening beside it, so the panel stays
+ * one panel and reads the same on a phone as on a desk.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category overlays
+ * @aliases Dropdown, Action menu
+ * @documentation https://helix.fusion.dev/components/menu
+ *
+ * @cssproperty --menu-background-color - Fill of the surface.
+ * @cssproperty --menu-border-color - Color of the panel's edge.
+ * @cssproperty --menu-border-width - Width of the panel's edge. Follows
+ *   `--helix-border-floating`, which is `0`, so the panel is told apart by its lift unless a
+ *   theme says otherwise.
+ * @cssproperty --menu-max-block-size - Tallest the surface grows before it scrolls.
+ * @cssproperty --menu-min-inline-size - Narrowest the surface gets.
+ * @cssproperty --menu-shadow - Lift under the panel. Follows `--helix-shadow-floating`: a
+ *   floating surface sits over content nobody can predict, so it keeps a lift by default.
+ */
+export declare class HelixMenu extends HelixHeadlessMenu {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-menu': HelixMenu;
+    }
+}

package/dist/menu/root/menu-root.js

@@ -0,0 +1,42 @@
+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 { HelixHeadlessMenu } from '@fusion.dev/helix-headless/menu';
+import { styles } from './menu-root.css.js';
+/**
+ * @summary A menu of commands, opened from a trigger.
+ *
+ * @description
+ * The surface is in the top layer, so it needs no `z-index` and cannot be
+ * clipped by whatever it sits inside.
+ *
+ * A submenu replaces the page rather than opening beside it, so the panel stays
+ * one panel and reads the same on a phone as on a desk.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category overlays
+ * @aliases Dropdown, Action menu
+ * @documentation https://helix.fusion.dev/components/menu
+ *
+ * @cssproperty --menu-background-color - Fill of the surface.
+ * @cssproperty --menu-border-color - Color of the panel's edge.
+ * @cssproperty --menu-border-width - Width of the panel's edge. Follows
+ *   `--helix-border-floating`, which is `0`, so the panel is told apart by its lift unless a
+ *   theme says otherwise.
+ * @cssproperty --menu-max-block-size - Tallest the surface grows before it scrolls.
+ * @cssproperty --menu-min-inline-size - Narrowest the surface gets.
+ * @cssproperty --menu-shadow - Lift under the panel. Follows `--helix-shadow-floating`: a
+ *   floating surface sits over content nobody can predict, so it keeps a lift by default.
+ */
+let HelixMenu = class HelixMenu extends HelixHeadlessMenu {
+    static { this.styles = styles; }
+};
+HelixMenu = __decorate([
+    customElement('helix-menu')
+], HelixMenu);
+export { HelixMenu };

package/dist/meter/index.d.ts

@@ -0,0 +1 @@
+export * from './root/meter-root.js';

package/dist/meter/index.js

@@ -0,0 +1 @@
+export * from './root/meter-root.js';

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

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

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

@@ -0,0 +1,218 @@
+// Generated from src/meter/root/meter-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: block;
+}
+
+:host([show-value]) {
+align-items: center;
+display: grid;
+gap: var(--helix-space-sm);
+grid-template-columns: 1fr auto;
+}
+
+[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"] {
+background-color: var(--_meter-hue);
+
+--_meter-hue: var(--meter-color, var(--helix-color-primary));
+block-size: 100%;
+border-radius: inherit;
+inline-size: 100%;
+scale: var(--meter-fraction, 0) 1;
+transform-origin: left center;
+transition:
+background-color var(--helix-duration-normal) var(--helix-easing-standard),
+scale var(--helix-duration-normal) var(--helix-easing-decelerate);
+}
+
+:host(:dir(rtl)) [part="indicator"] {
+transform-origin: right center;
+}
+
+[part="indicator"][data-band="good"] {
+background-color: var(--_meter-hue);
+
+--_meter-hue: var(--meter-color, var(--helix-color-success));
+}
+
+[part="indicator"][data-band="fair"] {
+background-color: var(--_meter-hue);
+
+--_meter-hue: var(--meter-color, var(--helix-color-warning));
+}
+
+[part="indicator"][data-band="poor"] {
+background-color: var(--_meter-hue);
+
+--_meter-hue: var(--meter-color, var(--helix-color-danger));
+}
+
+[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);
+}
+
+@media (prefers-reduced-motion: reduce) {
+[part="indicator"] {
+transition: none;
+}
+}
+
+:host([shape="arc"]),
+:host([shape="ring"]) {
+display: inline-grid;
+place-items: center;
+}
+
+: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"] {
+scale: none;
+stroke: var(--_meter-hue);
+
+--_meter-hue: var(--helix-color-foreground-muted);
+stroke-dasharray: var(--meter-along) 100;
+stroke-linecap: round;
+transition: stroke-dasharray 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"] {
+stroke: var(--_meter-hue);
+
+--_meter-hue: var(--helix-color-success);
+}
+
+:host([shape="arc"]) [part="indicator"][data-band="fair"],
+:host([shape="ring"]) [part="indicator"][data-band="fair"] {
+stroke: var(--_meter-hue);
+
+--_meter-hue: var(--helix-color-warning);
+}
+
+:host([shape="arc"]) [part="indicator"][data-band="poor"],
+:host([shape="ring"]) [part="indicator"][data-band="poor"] {
+stroke: var(--_meter-hue);
+
+--_meter-hue: var(--helix-color-danger);
+}
+
+:host([shape="arc"]) [part="value"],
+:host([shape="ring"]) [part="value"] {
+grid-area: 1 / 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+:host([shape="arc"]) [part="indicator"],
+:host([shape="ring"]) [part="indicator"] {
+transition: none;
+}
+}
+
+@media print {
+:host {
+box-shadow: none;
+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(
+in oklab,
+var(--_meter-hue) 30%,
+var(--meter-track-color, var(--helix-color-surface-sunken))
+);
+}`);

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

@@ -0,0 +1,79 @@
+import { HelixHeadlessMeter } from '@fusion.dev/helix-headless/meter';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary A measurement in a known range, and whether it is where you want it.
+ *
+ * @description
+ * The bar `Progress` draws, at twice the height and on the house corner rather
+ * than its pill.
+ *
+ * It shipped at the progress height, on the argument that the two stand beside
+ * each other in a panel. Rendered side by side that turned out backwards: they
+ * *are* two unrelated controls, and a reader telling a level from a task at a
+ * glance is the point rather than the cost. A meter also carries more, a fill
+ * and a mark at each threshold, and at eight pixels those marks are hairlines.
+ * At sixteen they are unmistakable.
+ *
+ * The corner is the ticks' doing: they cut the fill into segments, and a
+ * pill-ended bar comes out as a run whose outer ends are round and whose inner
+ * ends are square. `radii-full` on an eight pixel bar was a four pixel pill
+ * anyway, so this is only a change at all because the bar grew.
+ *
+ * What else differs is what the color means. A progress bar is one color because
+ * there is one thing to say; a meter's fill takes the success, warning or danger
+ * tone from the band its reading falls in, and only once thresholds have been
+ * declared. An unbanded meter is neutral, because a gauge with nothing said
+ * about it is a reading rather than good news.
+ *
+ * A tick marks each threshold, so the reading can be placed against the bands
+ * without seeing color at all.
+ *
+ * A reading past either end squares the corner it ran out at, which is the
+ * convention for a quantity continuing past the frame it is drawn in. The bar
+ * itself stops, because that is what an end is; the words and the accessible
+ * reading are what say how far past.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category feedback
+ * @groups charts
+ * @aliases Gauge, Level, Capacity
+ * @documentation https://helix.fusion.dev/components/meter
+ *
+ * @csspart indicator - The part of it the value fills.
+ * @csspart tick - A mark at `low` or at `high`.
+ * @csspart track - The whole range.
+ * @csspart value - The reading, under `show-value`.
+ *
+ * @cssproperty --meter-color - The fill, overriding the band's own tone.
+ * @cssproperty --meter-ring-size - Edge length of the drawing, in `ring` and `arc`.
+ * @cssproperty --meter-ring-width - Thickness of the stroke there.
+ * @cssproperty --meter-size - How thick the bar is.
+ * @cssproperty --meter-tick-color - The mark at a threshold.
+ * @cssproperty --meter-track-color - The groove behind the fill.
+ */
+export declare class HelixMeter extends HelixHeadlessMeter {
+    /**
+     * How much ink the reading claims.
+     *
+     * `subtle` is the reading as a wash of its own color: still legible, no longer
+     * the loudest thing in the region. The case is a dashboard: several meters where one is the number being watched and the rest are context, which is a fact about the region rather than about any one of them and is exactly what this axis is for.
+     *
+     * **One value and not the four, which is the judgment this axis asks for
+     * rather than a partial sweep.** `ghost` would leave a track with nothing in
+     * it, which is not a quiet reading but an absent one. `outlined` is the
+     * interesting refusal: `BarChart` makes it work by keeping the area and fading
+     * it toward the page, so an outlined column still encodes its value, and the
+     * reason it earns the value there is that a chart has other series for the
+     * outlined one to be a *different kind of fact from* (a forecast, a target,
+     * a budget). A meter reports one quantity against its own range, and the bands it already carries say which part of that range it is in, so there is no second kind of fact for an outline to name. `solid` is the resting state and is written by not
+     * writing it, per the rule that a reflected property takes no default.
+     */
+    emphasis?: 'subtle';
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-meter': HelixMeter;
+    }
+}

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

@@ -0,0 +1,72 @@
+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 { HelixHeadlessMeter } from '@fusion.dev/helix-headless/meter';
+import { property } from 'lit/decorators.js';
+import { styles } from './meter-root.css.js';
+/**
+ * @summary A measurement in a known range, and whether it is where you want it.
+ *
+ * @description
+ * The bar `Progress` draws, at twice the height and on the house corner rather
+ * than its pill.
+ *
+ * It shipped at the progress height, on the argument that the two stand beside
+ * each other in a panel. Rendered side by side that turned out backwards: they
+ * *are* two unrelated controls, and a reader telling a level from a task at a
+ * glance is the point rather than the cost. A meter also carries more, a fill
+ * and a mark at each threshold, and at eight pixels those marks are hairlines.
+ * At sixteen they are unmistakable.
+ *
+ * The corner is the ticks' doing: they cut the fill into segments, and a
+ * pill-ended bar comes out as a run whose outer ends are round and whose inner
+ * ends are square. `radii-full` on an eight pixel bar was a four pixel pill
+ * anyway, so this is only a change at all because the bar grew.
+ *
+ * What else differs is what the color means. A progress bar is one color because
+ * there is one thing to say; a meter's fill takes the success, warning or danger
+ * tone from the band its reading falls in, and only once thresholds have been
+ * declared. An unbanded meter is neutral, because a gauge with nothing said
+ * about it is a reading rather than good news.
+ *
+ * A tick marks each threshold, so the reading can be placed against the bands
+ * without seeing color at all.
+ *
+ * A reading past either end squares the corner it ran out at, which is the
+ * convention for a quantity continuing past the frame it is drawn in. The bar
+ * itself stops, because that is what an end is; the words and the accessible
+ * reading are what say how far past.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category feedback
+ * @groups charts
+ * @aliases Gauge, Level, Capacity
+ * @documentation https://helix.fusion.dev/components/meter
+ *
+ * @csspart indicator - The part of it the value fills.
+ * @csspart tick - A mark at `low` or at `high`.
+ * @csspart track - The whole range.
+ * @csspart value - The reading, under `show-value`.
+ *
+ * @cssproperty --meter-color - The fill, overriding the band's own tone.
+ * @cssproperty --meter-ring-size - Edge length of the drawing, in `ring` and `arc`.
+ * @cssproperty --meter-ring-width - Thickness of the stroke there.
+ * @cssproperty --meter-size - How thick the bar is.
+ * @cssproperty --meter-tick-color - The mark at a threshold.
+ * @cssproperty --meter-track-color - The groove behind the fill.
+ */
+let HelixMeter = class HelixMeter extends HelixHeadlessMeter {
+    static { this.styles = styles; }
+};
+__decorate([
+    property({ reflect: true })
+], HelixMeter.prototype, "emphasis", void 0);
+HelixMeter = __decorate([
+    customElement('helix-meter')
+], HelixMeter);
+export { HelixMeter };