@fusion.dev/helix 0.0.0-dev

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

@@ -0,0 +1,118 @@
+// Generated from src/toggle/group/toggle-group.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: inline-flex;
+flex-direction: column;
+gap: var(--helix-space-2xs);
+}
+
+:host([label-placement="start"]) [part="label"] {
+align-self: center;
+margin-block: 0;
+
+padding-block: 0;
+padding-inline-start: var(--helix-space-xs);
+white-space: nowrap;
+}
+
+[part="divider"] {
+align-self: center;
+background-color: var(--helix-color-border);
+block-size: 60%;
+flex: none;
+inline-size: var(--helix-border-thin);
+margin-inline: var(--helix-space-xs);
+}
+
+:host([label-placement="start"]) {
+align-items: start;
+}
+
+[part="track"] {
+display: inline-flex;
+position: relative;
+
+align-content: flex-start;
+flex-wrap: wrap;
+
+min-block-size: var(--helix-size-control);
+
+--_toggle-height: calc(var(--helix-size-control) - var(--helix-space-2xs) * 2);
+
+--_toggle-radius: var(--helix-radii-sm);
+
+padding: var(--helix-space-2xs);
+
+--_indicator-surface: var(--helix-color-surface-raised);
+}
+
+:host(:not([separation])) [part="track"],
+:host([separation="outlined"]) [part="track"] {
+background-color: var(--helix-color-surface-sunken);
+border: var(--helix-border-thin) solid var(--helix-color-border);
+border-radius: var(--helix-radii-sm);
+padding: var(--helix-space-2xs);
+
+--_toggle-radius: calc(var(--helix-radii-sm) - var(--helix-border-thin));
+
+--_toggle-height: calc(
+var(--helix-size-control) -
+var(--helix-space-2xs) *
+2 -
+var(--helix-border-thin) *
+2
+);
+
+--_indicator-surface: var(--helix-color-surface-overlay);
+}
+
+::slotted(helix-toggle) {
+
+block-size: var(--_toggle-height);
+flex: 1 1 auto;
+}
+
+[part="indicator"] {
+
+background-color: var(--toggle-group-indicator-color, var(--_indicator-surface));
+block-size: var(--indicator-block-size, 0);
+border-radius: var(--_toggle-radius, var(--helix-radii-sm));
+box-shadow: var(--helix-shadow-sm);
+inline-size: var(--indicator-inline-size, 0);
+inset-block-start: 0;
+inset-inline-start: 0;
+opacity: 0;
+position: absolute;
+translate: var(--indicator-x, 0) var(--indicator-y, 0);
+
+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;
+}
+
+@media (prefers-reduced-motion: reduce) {
+[part="indicator"] {
+transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);
+}
+}
+
+:host(:state(invalid)) [part="track"] {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-danger);
+outline-offset: calc(var(--helix-size-focus-offset) * -1);
+}
+
+[part="row"] {
+align-items: center;
+display: flex;
+gap: var(--helix-space-sm);
+}
+
+[part="row"] [part="track"] {
+flex: 1 1 auto;
+}`);

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

@@ -0,0 +1,49 @@
+import { HelixHeadlessToggleGroup } from '@fusion.dev/helix-headless/toggle';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary A row of options with the selection marked by a moving indicator.
+ *
+ * @description
+ * The indicator travels between items rather than the fill swapping. A fill
+ * that appears on one item as it disappears from another is two changes at once
+ * and reads as a flicker; one object moving is something the eye follows, and
+ * it says where the selection came from as well as where it went.
+ *
+ * It animates `translate` and `inline-size`. Width is a layout property and the
+ * rule is transform and opacity only, but the indicator is out of flow, so
+ * animating its width reflows nothing else. Scaling instead would distort the
+ * corner radius, which is worse than the exception.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @aliases SegmentedControl, Segmented, Navigation, Switcher
+ * @documentation https://helix.fusion.dev/components/toggle-group
+ *
+ * @slot - The group's items.
+ *
+ * @csspart indicator - The moving marker behind the selected item.
+ *
+ * @cssproperty --toggle-group-indicator-color - Fill of the moving marker.
+ */
+export declare class HelixToggleGroup extends HelixHeadlessToggleGroup {
+    /**
+     * How the group separates itself from the page.
+     *
+     * **Classified by what it does rather than by what its values were called.**
+     * These were `filled` and `plain` under `appearance`, and `filled` reads like
+     * a fill weight, which is how it came to be listed as emphasis when the axes
+     * were first sorted. The stylesheet settles it: what `plain` drops is the
+     * background *and* the border, so this is where the group ends, not how much
+     * ink it claims. `outlined` because the frame is a border over the group's
+     * own ground, exactly as a Card's is; the track's sunken fill stays either
+     * way, being a groove for the thumb to sit in rather than a way of being
+     * seen.
+     */
+    separation?: 'outlined' | 'plain';
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-toggle-group': HelixToggleGroup;
+    }
+}

package/dist/toggle/group/toggle-group.js

@@ -0,0 +1,47 @@
+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 { HelixHeadlessToggleGroup } from '@fusion.dev/helix-headless/toggle';
+import { property } from 'lit/decorators.js';
+import { styles as fieldStyles } from '../../shared/field/field.css.js';
+import { styles as fieldStackedStyles } from '../../shared/field/field-stacked.css.js';
+import { styles } from './toggle-group.css.js';
+/**
+ * @summary A row of options with the selection marked by a moving indicator.
+ *
+ * @description
+ * The indicator travels between items rather than the fill swapping. A fill
+ * that appears on one item as it disappears from another is two changes at once
+ * and reads as a flicker; one object moving is something the eye follows, and
+ * it says where the selection came from as well as where it went.
+ *
+ * It animates `translate` and `inline-size`. Width is a layout property and the
+ * rule is transform and opacity only, but the indicator is out of flow, so
+ * animating its width reflows nothing else. Scaling instead would distort the
+ * corner radius, which is worse than the exception.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @aliases SegmentedControl, Segmented, Navigation, Switcher
+ * @documentation https://helix.fusion.dev/components/toggle-group
+ *
+ * @slot - The group's items.
+ *
+ * @csspart indicator - The moving marker behind the selected item.
+ *
+ * @cssproperty --toggle-group-indicator-color - Fill of the moving marker.
+ */
+let HelixToggleGroup = class HelixToggleGroup extends HelixHeadlessToggleGroup {
+    static { this.styles = [fieldStyles, fieldStackedStyles, styles]; }
+};
+__decorate([
+    property({ reflect: true })
+], HelixToggleGroup.prototype, "separation", void 0);
+HelixToggleGroup = __decorate([
+    customElement('helix-toggle-group')
+], HelixToggleGroup);
+export { HelixToggleGroup };

package/dist/toggle/index.d.ts

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

package/dist/toggle/index.js

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

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

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

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

@@ -0,0 +1,25 @@
+// Generated from src/toggle/root/toggle-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+block-size: 100%;
+display: inline-flex;
+
+position: relative;
+z-index: var(--helix-layer-raised);
+}
+
+[part="item"] {
+all: unset;
+box-sizing: border-box;
+}
+
+[part="item"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
+@media print {
+:host {
+display: none;
+}
+}`);

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

@@ -0,0 +1,28 @@
+import { HelixHeadlessToggle } from '@fusion.dev/helix-headless/toggle';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary One option in a toggle group.
+ *
+ * @description
+ * Carries no background of its own. The selected look comes from the group's
+ * indicator sitting behind it, which is what lets that marker travel instead of
+ * one fill appearing as another disappears.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category actions
+ * @aliases Segment, NavItem, Option
+ * @documentation https://helix.fusion.dev/components/toggle-group
+ *
+ * @slot - The item's label.
+ *
+ * @csspart item - The button or anchor.
+ */
+export declare class HelixToggle extends HelixHeadlessToggle {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-toggle': HelixToggle;
+    }
+}

package/dist/toggle/root/toggle-root.js

@@ -0,0 +1,34 @@
+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 { HelixHeadlessToggle } from '@fusion.dev/helix-headless/toggle';
+import { styles } from './toggle-root.css.js';
+/**
+ * @summary One option in a toggle group.
+ *
+ * @description
+ * Carries no background of its own. The selected look comes from the group's
+ * indicator sitting behind it, which is what lets that marker travel instead of
+ * one fill appearing as another disappears.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category actions
+ * @aliases Segment, NavItem, Option
+ * @documentation https://helix.fusion.dev/components/toggle-group
+ *
+ * @slot - The item's label.
+ *
+ * @csspart item - The button or anchor.
+ */
+let HelixToggle = class HelixToggle extends HelixHeadlessToggle {
+    static { this.styles = styles; }
+};
+HelixToggle = __decorate([
+    customElement('helix-toggle')
+], HelixToggle);
+export { HelixToggle };

package/dist/toolbar/index.d.ts

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

package/dist/toolbar/index.js

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

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

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

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

@@ -0,0 +1,28 @@
+// Generated from src/toolbar/root/toolbar-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+
+--helix-size-checkbox: var(--helix-size-checkbox-sm);
+
+--helix-size-icon: var(--helix-size-icon-sm);
+--helix-size-control: var(--helix-size-control-sm);
+--helix-size-tag: var(--helix-size-tag-sm);
+
+display: inline-flex;
+}
+
+[part="toolbar"] {
+align-items: center;
+display: flex;
+gap: var(--toolbar-gap, var(--helix-space-2xs));
+}
+
+:host([orientation="vertical"]) [part="toolbar"] {
+flex-direction: column;
+}
+
+@media print {
+:host {
+display: none;
+}
+}`);

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

@@ -0,0 +1,29 @@
+import { HelixHeadlessToolbar } from '@fusion.dev/helix-headless/toolbar';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary A group of controls that share one tab stop.
+ *
+ * @description
+ * No chrome of its own: a toolbar is a place controls sit, and a border around
+ * them would be a second frame inside whatever already frames the bar.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category layout
+ * @aliases Actions, Action bar
+ * @documentation https://helix.fusion.dev/components/toolbar
+ *
+ * @slot - The toolbar's controls.
+ *
+ * @csspart toolbar - The toolbar container.
+ *
+ * @cssproperty --toolbar-gap - Space between controls.
+ */
+export declare class HelixToolbar extends HelixHeadlessToolbar {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-toolbar': HelixToolbar;
+    }
+}

package/dist/toolbar/root/toolbar-root.js

@@ -0,0 +1,35 @@
+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 { HelixHeadlessToolbar } from '@fusion.dev/helix-headless/toolbar';
+import { styles } from './toolbar-root.css.js';
+/**
+ * @summary A group of controls that share one tab stop.
+ *
+ * @description
+ * No chrome of its own: a toolbar is a place controls sit, and a border around
+ * them would be a second frame inside whatever already frames the bar.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category layout
+ * @aliases Actions, Action bar
+ * @documentation https://helix.fusion.dev/components/toolbar
+ *
+ * @slot - The toolbar's controls.
+ *
+ * @csspart toolbar - The toolbar container.
+ *
+ * @cssproperty --toolbar-gap - Space between controls.
+ */
+let HelixToolbar = class HelixToolbar extends HelixHeadlessToolbar {
+    static { this.styles = styles; }
+};
+HelixToolbar = __decorate([
+    customElement('helix-toolbar')
+], HelixToolbar);
+export { HelixToolbar };

package/dist/tooltip/index.d.ts

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

package/dist/tooltip/index.js

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

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

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

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

@@ -0,0 +1,121 @@
+// Generated from src/tooltip/root/tooltip-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: contents;
+}
+
+[part="tooltip"] {
+overflow: visible;
+align-items: center;
+display: flex;
+gap: var(--helix-space-2xs);
+
+background-color: var(--tooltip-background-color, var(--helix-color-surface-inverse));
+border: none;
+border-radius: var(--helix-radii-sm);
+color: var(--helix-color-foreground-inverse);
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-xs);
+
+font-weight: var(--helix-weight-regular);
+inline-size: max-content;
+line-height: var(--helix-leading-tight);
+margin: var(--helix-space-none);
+max-inline-size: var(--tooltip-max-inline-size, 16rem);
+
+opacity: 0;
+padding: var(--helix-space-2xs) var(--helix-space-xs);
+position: fixed;
+scale: 0;
+
+transition:
+opacity var(--helix-duration-fast) var(--helix-easing-standard),
+scale var(--helix-duration-fast) var(--helix-easing-emphasized),
+display var(--helix-duration-fast) allow-discrete,
+overlay var(--helix-duration-fast) allow-discrete;
+}
+
+[part="tooltip"][data-placed] {
+opacity: 1;
+scale: 1;
+}
+
+[part="arrow"] {
+background-color: var(--tooltip-background-color, var(--helix-color-surface-inverse));
+block-size: var(--tooltip-arrow-size, 0.5rem);
+inline-size: var(--tooltip-arrow-size, 0.5rem);
+position: absolute;
+rotate: 45deg;
+}
+
+:host([material="glass"]) [part="tooltip"],
+:host([material="glass"]) [part="arrow"] {
+backdrop-filter: var(--tooltip-backdrop, var(--helix-material-backdrop));
+background-color: var(--tooltip-background-color, var(--helix-material-translucent));
+}
+
+:host([material="frosted"]) [part="tooltip"],
+:host([material="frosted"]) [part="arrow"] {
+backdrop-filter: var(--tooltip-backdrop, blur(var(--helix-material-blur-lg)));
+background-color: var(--tooltip-background-color, var(--helix-material-translucent-strong));
+}
+
+:host([material="frosted"]) [part="tooltip"],
+:host([material="glass"]) [part="tooltip"] {
+border: var(--helix-border-thin) solid var(--helix-color-border);
+color: var(--helix-color-foreground);
+}
+
+[part="tooltip"][data-placement^="bottom"] [part="arrow"] {
+inset-block-start: calc(var(--tooltip-arrow-size, 0.5rem) / -2);
+}
+
+[part="tooltip"][data-placement^="top"] [part="arrow"] {
+inset-block-end: calc(var(--tooltip-arrow-size, 0.5rem) / -2);
+}
+
+[part="tooltip"][data-placement^="right"] [part="arrow"] {
+inset-inline-start: calc(var(--tooltip-arrow-size, 0.5rem) / -2);
+}
+
+[part="tooltip"][data-placement^="left"] [part="arrow"] {
+inset-inline-end: calc(var(--tooltip-arrow-size, 0.5rem) / -2);
+}
+
+[part="tooltip"][data-placement^="top"] {
+transform-origin: var(--floating-arrow-x, 50%) 100%;
+}
+
+[part="tooltip"][data-placement^="bottom"] {
+transform-origin: var(--floating-arrow-x, 50%) 0;
+}
+
+[part="tooltip"][data-placement^="left"] {
+transform-origin: 100% var(--floating-arrow-y, 50%);
+}
+
+[part="tooltip"][data-placement^="right"] {
+transform-origin: 0 var(--floating-arrow-y, 50%);
+}
+
+[part="tooltip"]:not(:popover-open) {
+display: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+
+[part="tooltip"] {
+scale: 1;
+transition: none;
+}
+
+[part="tooltip"][data-placed] {
+scale: 1;
+}
+}
+
+@media print {
+:host {
+display: none;
+}
+}`);

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

@@ -0,0 +1,63 @@
+import { HelixHeadlessTooltip } from '@fusion.dev/helix-headless/tooltip';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary A short description that appears beside what it describes.
+ *
+ * @description
+ * The bubble is in the top layer, so it needs no `z-index` and cannot be
+ * clipped by whatever it sits inside.
+ *
+ * The arrow is positioned by the same pass that positions the bubble, so it
+ * still points at the trigger after the bubble has slid along to stay in view.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category overlays
+ * @groups charts
+ * @aliases Hint, Popup label
+ * @documentation https://helix.fusion.dev/components/tooltip
+ *
+ * @cssproperty --tooltip-arrow-size - Size of the point at the bubble's edge.
+ * @cssproperty --tooltip-backdrop - Blur behind a `glass` bubble.
+ * @cssproperty --tooltip-background-color - Fill of the bubble.
+ * @cssproperty --tooltip-max-inline-size - Widest the bubble grows before wrapping.
+ */
+export declare class HelixTooltip extends HelixHeadlessTooltip {
+    /**
+     * What the bubble is made of.
+     *
+     * Absent is the inverse bubble, a dark surface over a light page, which is
+     * what a hint over content the theme cannot know has always been here. `glass`
+     * makes it the page's own translucent ground instead, for a page whose surfaces
+     * are glass, so a hint over a glass header is not the one opaque slab on it.
+     *
+     * **It flips the ink and adds an edge, which no other family carrying this axis
+     * has to do.** A card is already the page's surface, so glass swaps one ground
+     * for another; this one starts inverse, and `--helix-material-translucent` is
+     * the page's ground, so taking it without the foreground would put light ink on
+     * a light bubble. An inverse bubble is told from the page by being its
+     * opposite and a glass one has to be told from what is behind it, which is why
+     * the border arrives with the material rather than being there all along.
+     *
+     * The strength is the theme's: `--helix-material-translucent` and
+     * `--helix-material-backdrop` are what the policy moves.
+     *
+     * **`emphasis` is not here and that is not an omission.** It says how much ink
+     * a *mark* claims, and this is a surface: what varies about a surface is where
+     * it ends, which is `separation`, and a bubble in the top layer with a point on
+     * it has one answer to that. A quiet tooltip is a tooltip that is not shown.
+     *
+     * **`transparent` is where this one stops, and that is the statement 270
+     * asks for rather than an omission.** A panel that floats over arbitrary page
+     * content is only readable because it has a ground; dropping it does not make
+     * a lighter tooltip, it makes an unreadable one. `frosted` and `glass` are the
+     * two honest points here.
+     */
+    material?: 'frosted' | 'glass';
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-tooltip': HelixTooltip;
+    }
+}

package/dist/tooltip/root/tooltip-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 { HelixHeadlessTooltip } from '@fusion.dev/helix-headless/tooltip';
+import { property } from 'lit/decorators.js';
+import { styles } from './tooltip-root.css.js';
+/**
+ * @summary A short description that appears beside what it describes.
+ *
+ * @description
+ * The bubble is in the top layer, so it needs no `z-index` and cannot be
+ * clipped by whatever it sits inside.
+ *
+ * The arrow is positioned by the same pass that positions the bubble, so it
+ * still points at the trigger after the bubble has slid along to stay in view.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category overlays
+ * @groups charts
+ * @aliases Hint, Popup label
+ * @documentation https://helix.fusion.dev/components/tooltip
+ *
+ * @cssproperty --tooltip-arrow-size - Size of the point at the bubble's edge.
+ * @cssproperty --tooltip-backdrop - Blur behind a `glass` bubble.
+ * @cssproperty --tooltip-background-color - Fill of the bubble.
+ * @cssproperty --tooltip-max-inline-size - Widest the bubble grows before wrapping.
+ */
+let HelixTooltip = class HelixTooltip extends HelixHeadlessTooltip {
+    static { this.styles = styles; }
+};
+__decorate([
+    property({ reflect: true })
+], HelixTooltip.prototype, "material", void 0);
+HelixTooltip = __decorate([
+    customElement('helix-tooltip')
+], HelixTooltip);
+export { HelixTooltip };

package/dist/tour/index.d.ts

@@ -0,0 +1,2 @@
+export * from './root/tour-root.js';
+export * from './stop/tour-stop.js';

package/dist/tour/index.js

@@ -0,0 +1,2 @@
+export * from './root/tour-root.js';
+export * from './stop/tour-stop.js';

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

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