@fusion.dev/helix 0.2.0 → 0.3.0

package/dist/chat/message/chat-message.js

@@ -8,35 +8,6 @@ import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessChatMessage } from '@fusion.dev/helix-headless/chat';
 import { property } from 'lit/decorators.js';
 import { styles } from './chat-message.css.js';
-/**
- * @summary One turn in a conversation, and what has happened to it.
- *
- * @description
- * **`author="me"` is the one piece of paint that says whose turn it is**, and it
- * says it by which edge the turn sits against. Everything else about a turn is
- * the same on both sides, because two bubble styles is two components.
- *
- * A failure is the only state that takes a tone, because it is the one a reader
- * has to find rather than notice. `streaming` is left alone: the text arriving
- * is the signal, and decorating it competes with the thing it is decorating.
- *
- * @since 0.1.0
- * @status experimental
- * @category feedback
- * @documentation https://helix.fusion.dev/components/chat
- *
- * @slot - What was said.
- * @slot actions - What can be done with it.
- * @slot avatar - Who said it.
- *
- * @csspart content - What was said.
- * @csspart meta - The time and the state together.
- *
- * @cssproperty --chat-message-background-color - Fill behind a turn.
- * @cssproperty --chat-message-background-color-me - Fill behind the reader's own turns.
- * @cssproperty --chat-message-color - Ink in a turn.
- * @cssproperty --chat-message-measure - How wide a turn may get before it wraps.
- */
 let HelixChatMessage = class HelixChatMessage extends HelixHeadlessChatMessage {
     static { this.tier = 'helix-'; }
     static { this.styles = styles; }

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

@@ -1,4 +1,3 @@
-// Generated from src/chat/root/chat-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/chat/root/chat-root.js

@@ -9,44 +9,6 @@ import { HelixHeadlessChat } from '@fusion.dev/helix-headless/chat';
 import { styles } from './chat-root.css.js';
 import '../composer/chat-composer.js';
 import '../message/chat-message.js';
-/**
- * @summary A conversation: the turns, and where the reader is in them.
- *
- * @description
- * Three regions stacked, and only the transcript scrolls: a composer that slid
- * away as the reader scrolled up to re-read would be the thing they were about
- * to type into.
- *
- * **The transcript keeps its turns at the bottom when there are too few to fill
- * it**, which is what a conversation looks like. A new one starting at the top
- * of an empty column reads as a document.
- *
- * The way back sits over the transcript rather than in the column, so offering
- * it does not move what the reader is reading, which is the whole point of
- * offering it.
- *
- * @since 0.1.0
- * @status experimental
- * @category feedback
- * @documentation https://helix.fusion.dev/components/chat
- *
- * @slot - The turns, as `helix-chat-message` children.
- * @slot composer - Below the transcript, where the reader writes.
- * @slot header - Above the transcript.
- * @slot resume - The way back to the bottom.
- * @slot status - Beside the composer: somebody typing, connection lost.
- *
- * @csspart composer - The region the composer sits in.
- * @csspart log - The transcript, which is the thing that scrolls.
- *
- * @cssproperty --chat-gap - Space between turns.
- * @cssproperty --chat-max-block-size - How tall the conversation may get before the transcript scrolls.
- * @cssproperty --chat-padding-inline - Space either side of every region.
- * @cssproperty --chat-resume-border-color - The edge around the way back.
- * @cssproperty --chat-resume-border-width - How thick that edge is, for a surface over content.
- * @cssproperty --chat-resume-shadow - The lift under the way back, which floats over the transcript.
- * @cssproperty --chat-rule - The hairline under the header.
- */
 let HelixChat = class HelixChat extends HelixHeadlessChat {
     static { this.tier = 'helix-'; }
     static { this.styles = styles; }

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

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

package/dist/checkbox/root/checkbox-root.js

@@ -10,32 +10,6 @@ import { property } from 'lit/decorators.js';
 import { styles as fieldStyles } from '../../shared/field/field.css.js';
 import { styles as fieldInlineStyles } from '../../shared/field/field-inline.css.js';
 import { styles } from './checkbox-root.css.js';
-/**
- * @summary A box that is ticked, or not, or neither.
- *
- * @description
- * The box is the native input, restyled rather than replaced, so the tick and
- * the indeterminate dash are the browser's own and the control stays a control
- * for anything reading the page.
- *
- * The label sits beside it and the whole thing is the click target, which is
- * what a native `<label>` wrapping a checkbox gives and what a reader expects.
- *
- * @since 0.1.0
- * @status experimental
- * @category forms
- * @aliases Tickbox, Toggle
- * @documentation https://helix.fusion.dev/components/checkbox
- *
- * @cssproperty --checkbox-background-color - Fill of an unticked box.
- * @cssproperty --checkbox-border-color - Edge of the box, in every state.
- * @cssproperty --checkbox-card-background-color - Fill behind a card-shaped choice.
- * @cssproperty --checkbox-card-border-color - Edge around one.
- * @cssproperty --checkbox-card-padding - Inset of the card appearance.
- * @cssproperty --checkbox-checked-color - Fill of a ticked box.
- * @cssproperty --checkbox-mark-color - Ink the tick is drawn in.
- * @cssproperty --checkbox-size - Width and height of the box.
- */
 let HelixCheckbox = class HelixCheckbox extends HelixHeadlessCheckbox {
     static { this.styles = [fieldStyles, fieldInlineStyles, styles]; }
 };

package/dist/checkbox-group/root/checkbox-group-root.css.js

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

package/dist/checkbox-group/root/checkbox-group-root.js

@@ -10,21 +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 './checkbox-group-root.css.js';
-/**
- * @summary Groups related checkboxes, and reports them as one set.
- *
- * @description
- * A column by default, which is what a list of choices wants: the eye scans one
- * line per answer rather than hunting along a row.
- *
- * @since 0.1.0
- * @status stable
- * @category forms
- * @aliases Checkbox list, Multi-select
- * @documentation https://helix.fusion.dev/components/checkbox-group
- *
- * @cssproperty --checkbox-group-gap - Space between the boxes.
- */
 let HelixCheckboxGroup = class HelixCheckboxGroup extends HelixHeadlessCheckboxGroup {
     static { this.styles = [fieldStyles, fieldStackedStyles, styles]; }
 };

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

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

package/dist/code/root/code-root.js

@@ -7,27 +7,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessCode } from '@fusion.dev/helix-headless/code';
 import { styles } from './code-root.css.js';
-/**
- * @summary A fragment of code inside a line of prose.
- *
- * @description
- * A step down the scale, because a monospace face reads larger than the prose
- * around it at the same nominal size. `--code-size` overrides it.
- *
- * @since 0.1.0
- * @status stable
- * @category typography
- * @documentation https://helix.fusion.dev/components/code
- *
- * @cssproperty --code-background-color - Fill behind the fragment. Defaults to a 6%
- * wash of the ink, which composites the same against a light page and a dark one.
- * @cssproperty --code-foreground-color - The fragment's ink. Defaults to the prose's
- * own, pulled back towards `foreground-muted`.
- * @cssproperty --code-padding - Space either side of the fragment. Defaults to half
- * of `space-2xs`, which is what keeps a bracket beside the chip rather than a space
- * away from it.
- * @cssproperty --code-size - The fragment's size. Defaults to `text-sm`.
- */
 let HelixCode = class HelixCode extends HelixHeadlessCode {
     static { this.styles = styles; }
 };

package/dist/code-block/root/code-block-root.css.js

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

package/dist/code-block/root/code-block-root.js

@@ -8,25 +8,6 @@ import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessCodeBlock } from '@fusion.dev/helix-headless/code-block';
 import { styles } from './code-block-root.css.js';
 import '../../copy-button/index.js';
-/**
- * @summary A block of code, with somewhere to put its name and a way to take it.
- *
- * @description
- * The header sits above the code rather than floating on it. Overlaid, which is
- * the usual build, the copy button covers the first line, which is the one line
- * of a snippet a reader is most likely to be reading.
- *
- * @since 0.1.0
- * @status stable
- * @category typography
- * @documentation https://helix.fusion.dev/components/code-block
- *
- * @cssproperty --code-block-backdrop - A filter over what shows through the block and its header, for a translucent ground.
- * @cssproperty --code-block-background-color - The ground behind the code, for a block that is not on the page.
- * @cssproperty --code-block-border-color - The line around the block and its header.
- * @cssproperty --code-block-header-background-color - The ground behind the name, where it should not be `surface-raised`.
- * @cssproperty --code-block-radius - The corner on the header's top and the block's bottom, which are one shape.
- */
 let HelixCodeBlock = class HelixCodeBlock extends HelixHeadlessCodeBlock {
     static { this.tier = 'helix-'; }
     static { this.styles = styles; }

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

@@ -1,4 +1,3 @@
-// Generated from src/color-input/root/color-input-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/color-input/root/color-input-root.js

@@ -6,52 +6,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessColorInput } from '@fusion.dev/helix-headless/color-input';
-/* Side-effect import, because the tier below renders `<helix-color-picker>` and
-   a custom element registers on import. Inherited from the base along with the
-   template, which is why it has to be restated here: this file has no
-   `<helix-color-picker>` in it to remind anyone. */
 import '../../color-picker/index.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 './color-input-root.css.js';
-/**
- * @summary A color, typed in any syntax or picked from a panel.
- *
- * @description
- * The frame is the field rather than the input, so the trigger sits inside the
- * same box as the text and the focus ring is drawn once around the whole
- * control.
- *
- * **The trigger fills the trailing end rather than sitting in it as an icon.** A
- * color field has one thing to show and it is a color, so the swatch takes the
- * height of the control and reads as a block of it. It is the one field here
- * whose trailing affordance is the value itself: Date Input's calendar mark
- * stands for an action, and an action stretched to field height is a large icon
- * and nothing more.
- *
- * **The panel has no padding, and clips instead.** The square runs to its edge
- * and takes the panel's rounded corners from being clipped by it, rather than
- * sitting inset with a band of overlay showing on all four sides. The picker
- * pads its own lower rows.
- *
- * @since 0.1.0
- * @status experimental
- * @category forms
- * @aliases ColorField, ColourInput, InputColor
- * @documentation https://helix.fusion.dev/components/color-input
- *
- * @cssproperty --color-input-background-color - Fill behind the field.
- * @cssproperty --color-input-border-color - Color of the panel's edge.
- * @cssproperty --color-input-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 --color-input-panel-size - Width of the panel, and so of the square.
- * @cssproperty --color-input-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 --color-input-swatch-radius - Corner radius of that block.
- * @cssproperty --color-input-swatch-size - Edge length of the block in `appearance="swatch"`.
- */
 let HelixColorInput = class HelixColorInput extends HelixHeadlessColorInput {
     static { this.tier = 'helix-'; }
     static { this.styles = [fieldStyles, fieldStackedStyles, styles]; }

package/dist/color-picker/root/color-picker-root.css.js

@@ -1,4 +1,3 @@
-// Generated from src/color-picker/root/color-picker-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/color-picker/root/color-picker-root.js

@@ -6,54 +6,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessColorPicker } from '@fusion.dev/helix-headless/color-picker';
-/* Side-effect imports, because the tier below renders each of these tags and a
-   custom element registers on import. Inherited from the base along with the
-   template, which is why they have to be restated here: this file has none of
-   the tags in it to remind anyone. */
 import '../../button/index.js';
 import '../../button-group/index.js';
 import '../../icon/index.js';
 import '../../slider/index.js';
 import { styles as glyphStyles } from '../../icon/glyph.css.js';
 import { styles } from './color-picker-root.css.js';
-/**
- * @summary Picks a color, from a square and two ramps.
- *
- * @description
- * **The square is painted in three layers, not composited from elements**: the
- * hue underneath, white sliding in from the left to take the saturation out,
- * black rising from the bottom to take the brightness out. One element, one
- * declaration, and it repaints as the hue moves because the hue is a custom
- * property the tier below writes.
- *
- * **The two range inputs over it are invisible and still there.** Not
- * `display: none` and not `visibility: hidden`, either of which would take them
- * out of the tab order and out of the accessibility tree, which is the entire
- * reason a square built this way is reachable at all. They carry
- * `pointer-events: none` so the square answers the pointer itself, and the focus
- * ring is drawn on the square rather than on them, so it lands where the reader
- * is looking.
- *
- * **Every chip sits on a checkerboard.** A color with alpha painted on a solid
- * background is just a different color, and the one thing a preview owes a
- * reader is the difference between "pale blue" and "blue, half transparent".
- *
- * No padding and no surface of its own. Flat on a page it takes the space it is
- * given, and in Color Input's panel the panel supplies both: a picker that
- * brought its own card would be a card inside a card there.
- *
- * @since 0.1.0
- * @status experimental
- * @category forms
- * @aliases Color, ColorArea, Swatch picker
- * @documentation https://helix.fusion.dev/components/color-picker
- *
- * @cssproperty --color-picker-grid-radius - Corner radius of the square.
- * @cssproperty --color-picker-grid-ratio - Aspect ratio of the square.
- * @cssproperty --color-picker-padding - Inset of the rows under the square, and the bottom.
- * @cssproperty --color-picker-sample-size - Edge length of the chip that copies the value.
- * @cssproperty --color-picker-swatch-size - Edge length of one preset.
- */
 let HelixColorPicker = class HelixColorPicker extends HelixHeadlessColorPicker {
     static { this.tier = 'helix-'; }
     static { this.styles = [glyphStyles, styles]; }

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

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

package/dist/combobox/root/combobox-root.js

@@ -6,39 +6,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessCombobox } from '@fusion.dev/helix-headless/combobox';
-/* Side-effect import, because the tier below renders `<helix-listbox>` and a
-   custom element registers on import. Inherited from the base along with the
-   template, which is why it is restated here: this file has no `<helix-listbox>`
-   in it to remind anyone. */
 import '../../listbox/index.js';
 import '../../tag/index.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 './combobox-root.css.js';
-/**
- * @summary A field that filters a list as it is typed into.
- *
- * @description
- * The frame is the field rather than the input, so the caret, the marks and the
- * focus ring are drawn once around the whole control, which is the arrangement
- * Input, Color Input and Date Input all take.
- *
- * @since 0.1.0
- * @status experimental
- * @category forms
- * @aliases Autocomplete, Typeahead, Search select
- * @documentation https://helix.fusion.dev/components/combobox
- *
- * @cssproperty --combobox-background-color - Fill behind the field.
- * @cssproperty --combobox-border-color - Color of the panel's edge.
- * @cssproperty --combobox-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 --combobox-control-size - Smallest the text field shrinks to
- * @cssproperty --combobox-panel-size - Width of the panel. Follows the field by default.
- * @cssproperty --combobox-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 HelixCombobox = class HelixCombobox extends HelixHeadlessCombobox {
     static { this.tier = 'helix-'; }
     static { this.styles = [fieldStyles, fieldStackedStyles, styles]; }

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

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

package/dist/command/root/command-root.js

@@ -6,30 +6,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessCommand } from '@fusion.dev/helix-headless/command';
-/* Side-effect imports: this renders both, and a custom element registers on
-   import, so a consumer importing this family alone would otherwise get two
-   inert unknown elements. */
 import '../../dialog/index.js';
 import '../../listbox/index.js';
 import { styles } from './command-root.css.js';
-/**
- * @summary A list of commands, opened from anywhere and filtered by typing.
- *
- * @description
- * The palette is a dialog holding a filterable listbox, so what this tier adds
- * is where that dialog sits and how the list reads inside it. It opens against
- * the top of the window rather than centered, which is where every palette a
- * reader has used opens: a list that grows and shrinks as it is filtered would
- * otherwise walk up and down the screen under the words being typed.
- *
- * @since 0.1.0
- * @status stable
- * @category navigation
- * @documentation https://helix.fusion.dev/components/command
- *
- * @cssproperty --command-list-size - How tall the list grows before it scrolls.
- * @cssproperty --command-size - How wide the palette is. Defaults to `40rem`.
- */
 let HelixCommand = class HelixCommand extends HelixHeadlessCommand {
     static { this.tier = 'helix-'; }
     static { this.styles = styles; }

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

@@ -1,4 +1,3 @@
-// Generated from src/copy-button/root/copy-button-root.css by `turbo run styles`. Do not edit.
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`[part="button"] {
 display: inline-grid;

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

@@ -10,20 +10,6 @@ import { HelixIconButton } from '../../icon-button/root/icon-button-root.js';
 import { MixinControlSurface } from '../../mixins/mixin-control-surface/mixin-control-surface.js';
 import { styles } from './copy-button-root.css.js';
 import '../../tooltip/index.js';
-/**
- * @summary A button that puts a string on the clipboard and says it did.
- *
- * @description
- * Takes the icon button's square box, then stacks its two faces in one grid
- * cell so the press never changes the button's size. See the stylesheet: a
- * control that resizes under the pointer at the moment a reader is looking at
- * it for reassurance reads as a second, accidental press.
- *
- * @since 0.1.0
- * @status experimental
- * @category actions
- * @documentation https://helix.fusion.dev/components/copy-button
- */
 let HelixCopyButton = class HelixCopyButton extends MixinControlSurface(HelixHeadlessCopyButton) {
     static { this.tier = 'helix-'; }
     static { this.styles = [HelixIconButton.styles, styles].flat(); }

package/dist/data-table/root/data-table-root.css.js

@@ -1,4 +1,3 @@
-// Generated from src/data-table/root/data-table-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/data-table/root/data-table-root.js

@@ -9,45 +9,6 @@ import { HelixHeadlessDataTable } from '@fusion.dev/helix-headless/data-table';
 import { styles } from './data-table-root.css.js';
 import '../../pagination/index.js';
 import '../../table/index.js';
-/**
- * @summary A table that owns a result: rows as data, with sort, filter and paging.
- *
- * @description
- * Hairline rules between rows and no fill, per the rule that depth comes from a
- * single border rather than from elevation. A header band would be elevation
- * spelled differently, so the headings are weight and color instead.
- *
- * The grid scrolls its own box and the toolbar and footer sit outside it: a
- * search field that slides sideways when a reader scrolls the columns is a
- * search field they lose.
- *
- * **The cell values do not server-render**, which is the headless tier's
- * limitation and worth repeating where a consumer chooses between the two: use
- * `helix-table` where the content has to be in the served HTML.
- *
- * @since 0.1.0
- * @status experimental
- * @category data
- * @documentation https://helix.fusion.dev/components/data-table
- *
- * @slot - The columns, declared as `helix-table-column` children.
- * @slot footer - Below the grid, replacing the pagination this would otherwise draw.
- * @slot toolbar - Above the grid, for a search field or actions.
- *
- * @csspart cell - One cell.
- * @csspart table - The grid.
- *
- * @cssproperty --data-table-color - Ink in a cell.
- * @cssproperty --data-table-columns - Track list for the columns, which wins over the one the columns worked out.
- * @cssproperty --data-table-heading-color - Ink in a heading.
- * @cssproperty --data-table-padding-block - Space above and below a cell's content.
- * @cssproperty --data-table-padding-inline - Space either side of a cell's content.
- * @cssproperty --data-table-rule-color - Color of the hairline between rows. A color
- * and not a border: it lands in the color slot of a shorthand, so a whole border
- * written into it produces invalid CSS and drops the rule. Drawn on the cells rather
- * than the row, which is `display: contents` and measures `0px`.
- * @cssproperty --data-table-text - Type size, headings and cells alike.
- */
 let HelixDataTable = class HelixDataTable extends HelixHeadlessDataTable {
     static { this.tier = 'helix-'; }
     static { this.styles = styles; }

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

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

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

@@ -6,49 +6,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessDateInput } from '@fusion.dev/helix-headless/date-input';
-/* Side-effect import, because the headless tier's template names `helix-date-picker`
-   rather than the base tag, and a custom element registers on import. Without it
-   a consumer importing this one family got a panel with an unknown element in
-   it: `helix-headless-date-picker` was registered by the tier below and the tag being
-   rendered was not, so the calendar was an empty inert box. It only ever looked
-   right because the sandbox imports the whole barrel. Same arrangement Select
-   uses for its listbox and Pagination for its select. */
 import '../../date-picker/index.js';
 import '../../tag/index.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 './date-input-root.css.js';
-/**
- * @summary A date, typed or picked from a calendar.
- *
- * @description
- * The frame is the field rather than the input, so the trigger sits inside the
- * same box as the text and the focus ring is drawn once around the whole
- * control. The trigger is a mark within that box rather than a button beside it:
- * a second frame inside the first is two controls where a reader sees one.
- *
- * The calendar is the real `helix-date-picker`, in a panel with no border of its
- * own. A surface over the page is told apart by its shadow and by what it
- * covers, and a line around it as well reads as a box drawn around something
- * already separate.
- *
- * Height comes from the region, like every other control: `data-density` on
- * whatever holds it.
- *
- * @since 0.1.0
- * @status experimental
- * @category forms
- * @aliases DatePicker, DateField, InputDate
- * @documentation https://helix.fusion.dev/components/date-input
- *
- * @cssproperty --date-input-background-color - Fill behind the field.
- * @cssproperty --date-input-border-color - Color of the panel's edge.
- * @cssproperty --date-input-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 --date-input-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 HelixDateInput = class HelixDateInput extends HelixHeadlessDateInput {
     static { this.tier = 'helix-'; }
     static { this.styles = [fieldStyles, fieldStackedStyles, styles]; }

package/dist/date-picker/root/date-picker-root.css.js

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

package/dist/date-picker/root/date-picker-root.js

@@ -7,34 +7,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessDatePicker } from '@fusion.dev/helix-headless/date-picker';
 import { styles } from './date-picker-root.css.js';
-/**
- * @summary Shows a month, and takes a date from it.
- *
- * @description
- * Six week rows always, so the grid keeps one height and a month change does
- * not move whatever sits beneath it.
- *
- * The column track is wider than the day, and the day is centered in it. The
- * difference is the space between days, which belongs to the track rather than
- * to a `gap`, so a range can paint across the whole track and stay continuous.
- *
- * Days from the neighboring months stay in place and stay selectable, marked
- * quieter rather than hidden, so the first and last weeks are whole and the
- * grid reads as a continuous run of dates.
- *
- * @since 0.1.0
- * @status experimental
- * @category forms
- * @aliases Calendar, Date grid, Month view
- * @documentation https://helix.fusion.dev/components/date-picker
- *
- * @cssproperty --date-picker-columns - Months per row. Two unless there is only one.
- * @cssproperty --date-picker-day-size - Width and height of a day.
- * @cssproperty --date-picker-range-color - Band behind the days in a range.
- * @cssproperty --date-picker-row-size - Height of a week row.
- * @cssproperty --date-picker-selected-color - Fill behind a selected day.
- * @cssproperty --date-picker-track-size - Width of a column, which is what sets the space between days.
- */
 let HelixDatePicker = class HelixDatePicker extends HelixHeadlessDatePicker {
     static { this.styles = styles; }
 };

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

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