@fusion.dev/helix 0.2.0 → 0.4.0

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

@@ -10,31 +10,6 @@ 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]; }
 };

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

@@ -1,4 +1,3 @@
-// Generated from src/toggle/root/toggle-root.css by `turbo run styles`. Do not edit.
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 block-size: 100%;

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

@@ -7,24 +7,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 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; }
 };

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

@@ -1,4 +1,3 @@
-// Generated from src/toolbar/root/toolbar-root.css by `turbo run styles`. Do not edit.
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 

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

@@ -7,25 +7,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 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; }
 };

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

@@ -1,4 +1,3 @@
-// Generated from src/tooltip/root/tooltip-root.css by `turbo run styles`. Do not edit.
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 display: contents;

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

@@ -8,28 +8,6 @@ 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; }
 };

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

@@ -1,4 +1,3 @@
-// Generated from src/tour/root/tour-root.css by `turbo run styles`. Do not edit.
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 display: contents;

package/dist/tour/root/tour-root.js

@@ -7,20 +7,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessTour } from '@fusion.dev/helix-headless/tour';
 import { styles } from './tour-root.css.js';
-/**
- * @summary A guided run through an interface, one stop at a time.
- *
- * @description
- * The styled tier of `BaseTour`. It draws the light and nothing else.
- *
- * @since 0.1.0
- * @status experimental
- * @category overlays
- * @documentation https://helix.fusion.dev/components/tour
- *
- * @cssproperty --tour-scrim-color - The darkness outside the lit box.
- * @cssproperty --tour-spotlight-radius - Corner radius of the lit box.
- */
 let HelixTour = class HelixTour extends HelixHeadlessTour {
     static { this.styles = styles; }
 };

package/dist/tour/stop/tour-stop.css.js

@@ -1,4 +1,3 @@
-// Generated from src/tour/stop/tour-stop.css by `turbo run styles`. Do not edit.
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 display: contents;

package/dist/tour/stop/tour-stop.js

@@ -8,28 +8,6 @@ import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessTourStop } from '@fusion.dev/helix-headless/tour';
 import { styles } from './tour-stop.css.js';
 import '../../button/index.js';
-/**
- * @summary One stop on a tour: what it points at, and a panel to say it in.
- *
- * @description
- * The styled tier of `BaseTourStop`. The panel is `Popover`'s panel by another
- * name, on purpose.
- *
- * @since 0.1.0
- * @status experimental
- * @category overlays
- * @documentation https://helix.fusion.dev/components/tour
- *
- * @cssproperty --tour-arrow-size - The point's box, before it is rotated.
- * @cssproperty --tour-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 --tour-bubble-size - How wide the panel may grow.
- * @cssproperty --tour-padding - Inset inside the panel.
- * @cssproperty --tour-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.
- * @cssproperty --tour-surface-color - The panel's own surface.
- */
 let HelixTourStop = class HelixTourStop extends HelixHeadlessTourStop {
     static { this.tier = 'helix-'; }
     static { this.styles = styles; }

package/dist/tree/item/tree-item.css.js

@@ -1,4 +1,3 @@
-// Generated from src/tree/item/tree-item.css by `turbo run styles`. Do not edit.
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 

package/dist/tree/item/tree-item.js

@@ -7,40 +7,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessTreeItem } from '@fusion.dev/helix-headless/tree';
 import { styles } from './tree-item.css.js';
-/**
- * @summary One node in a tree.
- *
- * @description
- * Indent comes from the `level` the tree sets, as a multiple of one hook, so a
- * node moved to another depth re-indents without any nested selector. Nesting
- * selectors by depth is the usual approach and stops working at whatever depth
- * nobody wrote a rule for.
- *
- * The twisty rotates rather than swapping glyphs, so opening a branch is a
- * short movement instead of a substitution. Motion carries the state change;
- * the row itself stays flat.
- *
- * @since 0.1.0
- * @status experimental
- * @aliases TreeNode, Branch, Leaf
- * @documentation https://helix.fusion.dev/components/tree
- *
- * @slot - The item's label.
- * @slot children - Nested items, which make this a branch.
- *
- * @event {HelixSelectEvent} helix-select - Fired when the item is chosen. Cancelable: refusing it takes the decision and nothing moves.
- *
- * @csspart group - The container for nested items.
- * @csspart item - The node, and the focus target.
- * @csspart label - The label text.
- * @csspart row - The clickable label row.
- * @csspart toggle - The expand and collapse control.
- *
- * @cssproperty --tree-chevron-size - Size of the chevron, and the gutter a leaf reserves.
- * @cssproperty --tree-gap - Space between rows.
- * @cssproperty --tree-indent - Indent added per level.
- * @cssproperty --tree-row-size - Least height of a row, so rows with and without an icon match.
- */
 let HelixTreeItem = class HelixTreeItem extends HelixHeadlessTreeItem {
     static { this.styles = styles; }
 };

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

@@ -1,4 +1,3 @@
-// Generated from src/tree/root/tree-root.css by `turbo run styles`. Do not edit.
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 display: block;

package/dist/tree/root/tree-root.js

@@ -8,33 +8,6 @@ import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessTree } from '@fusion.dev/helix-headless/tree';
 import { property } from 'lit/decorators.js';
 import { styles } from './tree-root.css.js';
-/**
- * @summary A tree of items, navigable entirely from the keyboard.
- *
- * @description
- * Quiet by default: no rules between rows and no fill except on the selected
- * item. A navigation tree is read by scanning, and every line of chrome added
- * to it is one more thing between the reader and the label.
- *
- * @since 0.1.0
- * @status experimental
- * @category navigation
- * @aliases FileTree, Navigation tree
- * @documentation https://helix.fusion.dev/components/tree
- *
- * @slot - The tree's items.
- *
- * @event {HelixSelectEvent} helix-select - Fired when an item is chosen. Dispatched by the item and listened for here, because the tree is what a consumer holds a reference to. Cancelable: refusing it takes the decision and nothing moves.
- *
- * @csspart tree - The tree container.
- *
- * @cssproperty --tree-chevron-gap - Set from `chevron-placement`; the space before the chevron.
- * @cssproperty --tree-chevron-order - Set from `chevron-placement`; read by each item.
- * @cssproperty --tree-chevron-size - Size of the chevron, and the gutter a leaf reserves.
- * @cssproperty --tree-gap - Space between rows.
- * @cssproperty --tree-indent - Indent added per level.
- * @cssproperty --tree-row-size - Least height of a row, so rows with and without an icon match.
- */
 let HelixTree = class HelixTree extends HelixHeadlessTree {
     static { this.styles = styles; }
 };

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

@@ -1,4 +1,3 @@
-// Generated from src/trend/root/trend-root.css by `turbo run styles`. Do not edit.
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 align-items: center;

package/dist/trend/root/trend-root.js

@@ -9,40 +9,6 @@ import { HelixHeadlessTrend } from '@fusion.dev/helix-headless/trend';
 import '../../icon/index.js';
 import { styles as glyphStyles } from '../../icon/glyph.css.js';
 import { styles } from './trend-root.css.js';
-/**
- * @summary Which way a measurement moved, and whether that is good news.
- *
- * @description
- * The arrow takes the judgment color and the number does not, which is the
- * opposite of the dashboard convention and is measured rather than preferred:
- * in light mode the success token is 3.8:1 on the surface, enough for a glyph
- * and short of what 13px text needs, and there is no darker green in the ramp.
- * The number therefore keeps the page's own foreground and stays the most
- * legible thing here, which is right anyway, since the number is what a reader
- * reads and the judgment is a gloss on it.
- *
- * **No visual axis applies here, and that is the answer rather than a gap.**
- * `emphasis` is how much ink a mark claims, and there is no mark: an arrow glyph
- * and two runs of text, whose weight is `Text`'s business and whose size is the
- * region's. `material` is what reads through a surface, and a 13px glyph has
- * nothing behind it. `wash` is a gradient across an area, and there is no area.
- *
- * The meaning axis is here and is *derived*, which is the more interesting half:
- * `direction` and `good` together resolve to success, danger or muted, so a
- * consumer states the metric's polarity once rather than picking a color. A
- * declared `tone` would let the color disagree with the arrow, which is the one
- * thing this component exists to stop.
- *
- * @since 0.1.0
- * @status stable
- * @category charts
- * @groups charts
- * @aliases Delta, Change, Movement
- * @documentation https://helix.fusion.dev/components/trend
- *
- * @cssproperty --trend-color - Color of the arrow, overriding the judgment.
- * @cssproperty --trend-icon-size - Size of the arrow.
- */
 let HelixTrend = class HelixTrend extends HelixHeadlessTrend {
     static { this.styles = [glyphStyles, styles]; }
 };

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

@@ -1,4 +1,3 @@
-// Generated from src/video/root/video-root.css by `turbo run styles`. Do not edit.
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 color-scheme: dark;

package/dist/video/root/video-root.js

@@ -11,43 +11,6 @@ import '../../icon/index.js';
 import '../../menu/index.js';
 import { styles as glyphStyles } from '../../icon/glyph.css.js';
 import { styles } from './video-root.css.js';
-/**
- * @summary Plays a video, with controls this library draws rather than the
- * browser's.
- *
- * @description
- * The player is the headless tier's. What this adds is the bar: where it sits, when
- * it is there, and what the two ranges look like, which is the whole reason to
- * replace a control set that cannot be styled.
- *
- * **The bar is over the picture, not under it.** A bar in the layout would move
- * everything below the video by its own height and would leave a strip of page
- * color under a picture that is meant to be the whole of it. Over it, the
- * video is the component's size and the controls belong to it.
- *
- * **It goes when nobody is using it, and comes back for the keyboard.** Hidden
- * once a playing video has gone `idle-delay` without being touched, shown again
- * the moment the pointer moves, and shown whenever anything inside it has
- * focus, which is what keeps it reachable without a pointer. A paused video
- * keeps its bar, because a reader who stopped it is deciding what to do next.
- *
- * @since 0.1.0
- * @status experimental
- * @category media
- * @documentation https://helix.fusion.dev/components/video
- *
- * @cssproperty --video-accent-color - The played part of the scrubber.
- * @cssproperty --video-aspect-ratio - The shape of the box. Defaults to the
- * video's own once known, and `16 / 9` until then.
- * @cssproperty --video-controls-color - The ink on the bar.
- * @cssproperty --video-radius - The corner it is cut to.
- * @cssproperty --video-speed-size - How wide the playback speed control is
- * held, so the row does not move when the number changes.
- * @cssproperty --video-start-size - Width of the mark that starts it.
- * @cssproperty --video-well-color - Behind the picture, and in the letterbox bars.
- *
- * @property separation - Whether the bar floats on the picture or sits on its own ground.
- */
 let HelixVideo = class HelixVideo extends HelixHeadlessVideo {
     static { this.tier = 'helix-'; }
     static { this.styles = [glyphStyles, styles]; }

package/dist/video-playlist/item/video-playlist-item.css.js

@@ -1,4 +1,3 @@
-// Generated from src/video-playlist/item/video-playlist-item.css by `turbo run styles`. Do not edit.
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 display: block;

package/dist/video-playlist/item/video-playlist-item.js

@@ -7,21 +7,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessVideoPlaylistItem } from '@fusion.dev/helix-headless/video-playlist';
 import { styles } from './video-playlist-item.css.js';
-/**
- * @summary One entry in a video playlist.
- *
- * @description
- * Presentation only: the row, its thumbnail column, and the mark on the one
- * playing. The base class holds what the entry is and what it announces.
- *
- * @since 0.1.0
- * @status experimental
- * @category media
- * @documentation https://helix.fusion.dev/components/video-playlist
- *
- * @cssproperty --video-playlist-item-background-color - Fill behind a row.
- * @cssproperty --video-playlist-media-size - Width of the thumbnail column.
- */
 let HelixVideoPlaylistItem = class HelixVideoPlaylistItem extends HelixHeadlessVideoPlaylistItem {
     static { this.styles = styles; }
 };

package/dist/video-playlist/menu/video-playlist-menu.css.js

@@ -1,4 +1,3 @@
-// Generated from src/video-playlist/menu/video-playlist-menu.css by `turbo run styles`. Do not edit.
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 display: flex;

package/dist/video-playlist/menu/video-playlist-menu.js

@@ -10,43 +10,7 @@ import { styles as glyphStyles } from '../../icon/glyph.css.js';
 import { styles } from './video-playlist-menu.css.js';
 import '../../icon/index.js';
 import '../../menu/index.js';
-/**
- * @summary The playlist's entries, as a menu inside the player's control bar.
- *
- * @description
- * Presentation only: a control-bar button drawn like the ones beside it, and a
- * menu that opens over the picture rather than under it. The base class holds
- * where the playlist is, what the entries are, and what choosing announces.
- *
- * The trigger's declarations are `Video`'s control rule written out a second
- * time, which is not duplication that could be avoided. That rule is
- * `[part="controls"] :where(a, button)` inside `Video`'s shadow root, and this
- * element sits in its light DOM: a shadow rule reaches an assigned node only
- * through `::slotted()` and never reaches into the node's own shadow root at
- * all. So the button here is two boundaries away from the rule that styles
- * every button beside it, and the same tokens are what make the two agree.
- *
- * Color is inherited rather than named, so the bar's own color arrives on
- * its own. `--video-playlist-menu-color` is there for the case where it should
- * not.
- *
- * @since 0.1.0
- * @status experimental
- * @category media
- * @aliases Episode Menu, Queue Menu, Up Next
- * @documentation https://helix.fusion.dev/components/video-playlist
- *
- * @cssproperty --video-playlist-menu-color - Color of the trigger, defaulting to the control bar's.
- * @cssproperty --video-playlist-menu-poster - Width of an entry's still.
- * @cssproperty --video-playlist-menu-size - Size of the trigger's glyph.
- */
 let HelixVideoPlaylistMenu = class HelixVideoPlaylistMenu extends HelixHeadlessVideoPlaylistMenu {
-    /* `glyphStyles` first, and it is not optional. `drawIcon` renders a bare
-       `<svg data-glyph>` with no size of its own, and the only rule that sizes
-       one lives in the icon family's sheet. Without it the glyph came out 24x24
-       inside a 24x24 button, filling it edge to edge beside a 16x16 fullscreen
-       icon: right color, right button, right position, and half again too big.
-       Nothing failed, because a missing rule is not an error. */
     static { this.tier = 'helix-'; }
     static { this.styles = [glyphStyles, styles]; }
 };

package/dist/video-playlist/root/video-playlist-root.css.js

@@ -1,4 +1,3 @@
-// Generated from src/video-playlist/root/video-playlist-root.css by `turbo run styles`. Do not edit.
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 display: grid;

package/dist/video-playlist/root/video-playlist-root.js

@@ -7,22 +7,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessVideoPlaylist } from '@fusion.dev/helix-headless/video-playlist';
 import { styles } from './video-playlist-root.css.js';
-/**
- * @summary A set of clips and the one player they take turns in.
- *
- * @description
- * Presentation only: the arrangement of the two regions and the scroller the
- * entries sit in. Everything about which clip is current is the base class.
- *
- * @since 0.1.0
- * @status experimental
- * @category media
- * @aliases Playlist, Queue, Up next
- * @documentation https://helix.fusion.dev/components/video-playlist
- *
- * @cssproperty --video-playlist-layout - Columns for the player and the list.
- * @cssproperty --video-playlist-size - How tall the list gets before it scrolls.
- */
 let HelixVideoPlaylist = class HelixVideoPlaylist extends HelixHeadlessVideoPlaylist {
     static { this.styles = styles; }
 };

package/dist/virtual-list/root/virtual-list-root.css.js

@@ -1,4 +1,3 @@
-// Generated from src/virtual-list/root/virtual-list-root.css by `turbo run styles`. Do not edit.
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 display: block;

package/dist/virtual-list/root/virtual-list-root.js

@@ -7,27 +7,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessVirtualList } from '@fusion.dev/helix-headless/virtual-list';
 import { styles } from './virtual-list-root.css.js';
-/**
- * @summary Renders the rows of a long set that are on screen, and no others.
- *
- * @description
- * The styled tier adds the scrolling box's own treatment and nothing else. Rows
- * are the consumer's markup in the light DOM, so they are styled by the
- * consumer's stylesheet the way any other content is, and this must not reach
- * into them: a rule here for a row would be a design system styling markup it
- * did not write.
- *
- * @category layout
- * @since 0.1.0
- * @status experimental
- * @documentation https://helix.fusion.dev/components/virtual-list
- *
- * @csspart after - The space standing in for rows below the window.
- * @csspart before - The space standing in for rows above the window.
- * @csspart viewport - The scrolling box.
- *
- * @cssproperty --virtual-list-block-size - How tall the scrolling box is.
- */
 let HelixVirtualList = class HelixVirtualList extends HelixHeadlessVirtualList {
     static { this.styles = styles; }
 };