@fusion.dev/helix 0.0.0-dev

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

@@ -0,0 +1,87 @@
+import { HelixHeadlessHeatmap } from '@fusion.dev/helix-headless/heatmap';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary A strip of cells coloured 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.
+ */
+export declare class HelixHeatmap extends HelixHeadlessHeatmap {
+    static tier: string;
+    static styles: CSSResultGroup;
+    /**
+     * The first guess at what this sheet draws, before it has been measured.
+     *
+     * **Not a contract any more, and it was a bad one.** `fits()` works against a
+     * measured width and a cell size it has to be told, and being told by hand
+     * meant these sat at the base tier's 8 and 2 against a sheet drawing 12 and 4:
+     * the arithmetic believed a cell cost 10 pixels where it cost 16, so a ninety
+     * day strip drew 940 pixels of cells into a 592 pixel box at 640 and 540 into
+     * 342 at 390, overflowing the document both times while `visible` reported 59
+     * and 34. The number a summary is told to trust was the number that was wrong.
+     *
+     * The strip is read back now, so nothing has to be kept in step and
+     * `--heatmap-cell-inline-size` on its own is enough. 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.
+     */
+    gap: number;
+    /** The drawn cell width, for the reason `gap` is the drawn gap. `0.75rem` at the root font size. */
+    minCell: number;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-heatmap': HelixHeatmap;
+    }
+}

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

@@ -0,0 +1,96 @@
+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 { HelixHeadlessHeatmap } from '@fusion.dev/helix-headless/heatmap';
+import { styles } from './heatmap-root.css.js';
+/**
+ * @summary A strip of cells coloured 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 any more, and it was a bad one.** `fits()` works against a
+         * measured width and a cell size it has to be told, and being told by hand
+         * meant these sat at the base tier's 8 and 2 against a sheet drawing 12 and 4:
+         * the arithmetic believed a cell cost 10 pixels where it cost 16, so a ninety
+         * day strip drew 940 pixels of cells into a 592 pixel box at 640 and 540 into
+         * 342 at 390, overflowing the document both times while `visible` reported 59
+         * and 34. The number a summary is told to trust was the number that was wrong.
+         *
+         * The strip is read back now, so nothing has to be kept in step and
+         * `--heatmap-cell-inline-size` on its own is enough. 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-'; }
+    static { this.styles = styles; }
+};
+HelixHeatmap = __decorate([
+    customElement('helix-heatmap')
+], HelixHeatmap);
+export { HelixHeatmap };

package/dist/icon/glyph.css.d.ts

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

package/dist/icon/glyph.css.js

@@ -0,0 +1,7 @@
+// Generated from src/icon/glyph.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`[data-glyph] {
+block-size: var(--icon-size, var(--helix-size-icon));
+flex: 0 0 auto;
+inline-size: var(--icon-size, var(--helix-size-icon));
+}`);

package/dist/icon/index.d.ts

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

package/dist/icon/index.js

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

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

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

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

@@ -0,0 +1,20 @@
+// Generated from src/icon/root/icon-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+block-size: var(--icon-size, var(--helix-size-icon));
+
+display: inline-flex;
+flex: 0 0 auto;
+inline-size: var(--icon-size, var(--helix-size-icon));
+}
+
+[part="svg"] {
+block-size: 100%;
+inline-size: 100%;
+}
+
+@media print {
+:host {
+box-shadow: none;
+}
+}`);

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

@@ -0,0 +1,29 @@
+import { HelixHeadlessIcon } from '@fusion.dev/helix-headless/icon';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary Renders a named icon from the Helix set.
+ *
+ * @description
+ * Draws in `currentColor` and sizes from `--icon-size`, so an icon inherits the
+ * color of the text it sits in and a container can resize it without reaching
+ * for a prop. Inside a button that hook is set in `em`, which keeps the icon in
+ * proportion as the button's own size changes.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category media
+ * @aliases Glyph, Symbol
+ * @documentation https://helix.fusion.dev/components/icon
+ *
+ * @csspart svg - The rendered SVG.
+ *
+ * @cssproperty --icon-size - Edge length of the icon's box.
+ */
+export declare class HelixIcon extends HelixHeadlessIcon {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-icon': HelixIcon;
+    }
+}

package/dist/icon/root/icon-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 { HelixHeadlessIcon } from '@fusion.dev/helix-headless/icon';
+import { styles } from './icon-root.css.js';
+/**
+ * @summary Renders a named icon from the Helix set.
+ *
+ * @description
+ * Draws in `currentColor` and sizes from `--icon-size`, so an icon inherits the
+ * color of the text it sits in and a container can resize it without reaching
+ * for a prop. Inside a button that hook is set in `em`, which keeps the icon in
+ * proportion as the button's own size changes.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category media
+ * @aliases Glyph, Symbol
+ * @documentation https://helix.fusion.dev/components/icon
+ *
+ * @csspart svg - The rendered SVG.
+ *
+ * @cssproperty --icon-size - Edge length of the icon's box.
+ */
+let HelixIcon = class HelixIcon extends HelixHeadlessIcon {
+    static { this.styles = styles; }
+};
+HelixIcon = __decorate([
+    customElement('helix-icon')
+], HelixIcon);
+export { HelixIcon };

package/dist/icon-button/index.d.ts

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

package/dist/icon-button/index.js

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

package/dist/icon-button/root/icon-button-root.css.d.ts

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

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

@@ -0,0 +1,165 @@
+// Generated from src/icon-button/root/icon-button-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: inline-flex;
+
+--_icon-button-size: var(--icon-button-size, var(--helix-size-control));
+}
+
+:host {
+--_icon-button-edge: var(--helix-color-border);
+--_icon-button-ink: var(--helix-color-foreground-muted);
+--_icon-button-ink-hover: var(--helix-color-foreground);
+
+--_icon-button-fill: var(--_icon-button-tone);
+--_icon-button-fill-hover: var(--_icon-button-tone-hover);
+--_icon-button-on-tone: var(--helix-color-background);
+--_icon-button-tone: var(--helix-color-foreground);
+--_icon-button-tone-hover: color-mix(
+in oklab,
+var(--helix-color-foreground) 86%,
+var(--helix-color-background)
+);
+}
+:host([tone="primary"]) {
+--_icon-button-edge: var(--helix-color-primary);
+--_icon-button-ink: var(--helix-color-primary);
+--_icon-button-ink-hover: var(--helix-color-primary);
+--_icon-button-fill: var(--helix-color-primary-surface);
+--_icon-button-fill-hover: var(--helix-color-primary-surface-hover);
+--_icon-button-on-tone: var(--helix-color-foreground-on-accent);
+--_icon-button-tone: var(--helix-color-primary);
+--_icon-button-tone-hover: var(--helix-color-primary-hover);
+}
+
+:host([tone="accent"]) {
+--_icon-button-edge: var(--helix-color-accent);
+--_icon-button-ink: var(--helix-color-accent);
+--_icon-button-ink-hover: var(--helix-color-accent);
+--_icon-button-fill: var(--helix-color-accent-surface);
+--_icon-button-fill-hover: var(--helix-color-accent-surface-hover);
+--_icon-button-on-tone: var(--helix-color-foreground-on-accent);
+--_icon-button-tone: var(--helix-color-accent);
+--_icon-button-tone-hover: var(--helix-color-accent-hover);
+}
+
+:host([tone="danger"]) {
+--_icon-button-edge: var(--helix-color-danger);
+--_icon-button-ink: var(--helix-color-danger);
+--_icon-button-ink-hover: var(--helix-color-danger);
+--_icon-button-fill: var(--helix-color-danger-surface);
+--_icon-button-fill-hover: var(--helix-color-danger-surface-hover);
+--_icon-button-on-tone: var(--helix-color-foreground-on-accent);
+--_icon-button-tone: var(--helix-color-danger);
+--_icon-button-tone-hover: color-mix(
+in oklab,
+var(--helix-color-danger) 86%,
+var(--helix-color-foreground)
+);
+}
+
+[part="button"] {
+align-items: center;
+background-color: transparent;
+block-size: var(--_icon-button-size);
+border: var(--helix-border-thin) solid transparent;
+
+border-end-end-radius: var(--button-radius-end, var(--icon-button-radius, var(--helix-radii-sm)));
+border-end-start-radius: var(
+--button-radius-start,
+var(--icon-button-radius, var(--helix-radii-sm))
+);
+border-start-end-radius: var(
+--button-radius-end,
+var(--icon-button-radius, var(--helix-radii-sm))
+);
+border-start-start-radius: var(
+--button-radius-start,
+var(--icon-button-radius, var(--helix-radii-sm))
+);
+color: var(--_icon-button-ink);
+cursor: pointer;
+display: inline-flex;
+
+font: inherit;
+inline-size: var(--_icon-button-size);
+justify-content: center;
+padding: var(--helix-space-none);
+transition:
+background-color var(--helix-duration-fast) var(--helix-easing-standard),
+color var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+:host(:not(:disabled)) [part="button"]:hover {
+background-color: color-mix(in oklab, var(--_icon-button-tone) 8%, transparent);
+color: var(--_icon-button-ink-hover);
+}
+
+:host([shape="circle"]) [part="button"] {
+border-radius: var(--helix-radii-full);
+}
+
+:host([raised]) [part="button"] {
+box-shadow: var(--icon-button-shadow, var(--helix-shadow-md));
+}
+
+:host([raised]:not(:disabled)) [part="button"]:hover {
+box-shadow: var(--icon-button-shadow, var(--helix-shadow-lg));
+}
+
+:host([raised]:not(:disabled)) [part="button"]:active {
+box-shadow: var(--icon-button-shadow, var(--helix-shadow-sm));
+}
+
+[part="button"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
+:host([emphasis="solid"]) [part="button"] {
+background-color: var(--_icon-button-fill);
+border-color: transparent;
+color: var(--_icon-button-on-tone);
+}
+:host(:not(:disabled)[emphasis="solid"]) [part="button"]:hover {
+background-color: var(--_icon-button-fill-hover);
+color: var(--_icon-button-on-tone);
+}
+
+:host([emphasis="outlined"]) [part="button"] {
+background-color: color-mix(in oklab, var(--_icon-button-tone) 6%, transparent);
+border-color: var(--_icon-button-edge);
+color: var(--_icon-button-tone);
+}
+:host(:not(:disabled)[emphasis="outlined"]) [part="button"]:hover {
+background-color: color-mix(in oklab, var(--_icon-button-tone) 12%, transparent);
+color: var(--_icon-button-tone);
+}
+
+:host([emphasis="subtle"]) [part="button"] {
+background-color: color-mix(in oklab, var(--_icon-button-tone) 14%, transparent);
+border-color: transparent;
+color: var(--_icon-button-tone);
+}
+
+:host(:not(:disabled)[emphasis="subtle"]) [part="button"]:hover {
+background-color: color-mix(in oklab, var(--_icon-button-tone) 22%, transparent);
+color: var(--_icon-button-tone);
+}
+
+:host(:disabled) [part="button"] {
+cursor: not-allowed;
+opacity: 0.5;
+}
+
+@media (prefers-reduced-motion: reduce) {
+[part="button"] {
+transition: none;
+}
+}
+
+@media print {
+:host {
+display: none;
+}
+}`);

package/dist/icon-button/root/icon-button-root.d.ts

@@ -0,0 +1,65 @@
+import { HelixHeadlessIconButton } from '@fusion.dev/helix-headless/icon-button';
+import type { CSSResultGroup } from 'lit';
+declare const HelixIconButton_base: (new (...args: any[]) => import("../../mixins/mixin-control-surface/mixin-control-surface.js").MixinControlSurfaceInterface) & typeof HelixHeadlessIconButton;
+/**
+ * @summary A square button whose content is an icon.
+ *
+ * @description
+ * Top-level rather than `Button.Icon`, because a namespace means composition:
+ * `Card.Header` is part of a card, and an icon-only button is not part of a
+ * button. It is a button with different content and a different shape, which
+ * makes it its own component.
+ *
+ * `label` is not optional in practice. An icon-only control with no accessible
+ * name is announced as "button" and nothing else, which is the single most
+ * common way a toolbar becomes unusable without sight.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category actions
+ * @aliases Icon button, Square button
+ * @documentation https://helix.fusion.dev/components/icon-button
+ *
+ * @slot - The icon.
+ *
+ * @csspart button - The inner button or anchor.
+ *
+ * @cssproperty --icon-button-radius - Corner radius of the control, which a group flattens through `--button-radius-start` and `--button-radius-end`.
+ * @cssproperty --icon-button-shadow - What it casts, where it is raised off the page.
+ * @cssproperty --icon-button-size - Edge length of the control.
+ */
+export declare class HelixIconButton extends HelixIconButton_base {
+    /**
+     * The outline it is cut to, which is an axis of its own and not a value on one.
+     *
+     * `emphasis` says how filled it is and `tone` says what it means; neither of
+     * them says what shape it is, and folding a shape into either would put a
+     * control's outline in the same word as its color. A rounded square is the
+     * resting one because that is what a control in a row of controls should be.
+     *
+     * `circle` is the floating action button, and it is the reason this exists: a
+     * round, raised, primary control holding the one action a screen is for. It is
+     * a shape rather than a component, because a component would re-declare
+     * `emphasis`, `tone`, `label` and the size around a control that already has
+     * them, and because the same shape is wanted by an avatar's overlay, a media
+     * control and a map's own buttons. Where it sits is the page's business: see
+     * `data-dock` in the base layer.
+     */
+    shape?: 'circle';
+    /**
+     * Whether it is raised off the page it sits on.
+     *
+     * Separate from `shape`, because they are separate facts: a docked control is
+     * raised whatever its outline, and a circle inside a toolbar is not raised at
+     * all. Shadow rather than a border, since what is under a floating control is
+     * the page and a line drawn on the page is not the same as being above it.
+     */
+    raised: boolean;
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-icon-button': HelixIconButton;
+    }
+}
+export {};

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

@@ -0,0 +1,63 @@
+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 { HelixHeadlessIconButton } from '@fusion.dev/helix-headless/icon-button';
+import { property } from 'lit/decorators.js';
+import { MixinControlSurface } from '../../mixins/mixin-control-surface/mixin-control-surface.js';
+import { styles } from './icon-button-root.css.js';
+/**
+ * @summary A square button whose content is an icon.
+ *
+ * @description
+ * Top-level rather than `Button.Icon`, because a namespace means composition:
+ * `Card.Header` is part of a card, and an icon-only button is not part of a
+ * button. It is a button with different content and a different shape, which
+ * makes it its own component.
+ *
+ * `label` is not optional in practice. An icon-only control with no accessible
+ * name is announced as "button" and nothing else, which is the single most
+ * common way a toolbar becomes unusable without sight.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category actions
+ * @aliases Icon button, Square button
+ * @documentation https://helix.fusion.dev/components/icon-button
+ *
+ * @slot - The icon.
+ *
+ * @csspart button - The inner button or anchor.
+ *
+ * @cssproperty --icon-button-radius - Corner radius of the control, which a group flattens through `--button-radius-start` and `--button-radius-end`.
+ * @cssproperty --icon-button-shadow - What it casts, where it is raised off the page.
+ * @cssproperty --icon-button-size - Edge length of the control.
+ */
+let HelixIconButton = class HelixIconButton extends MixinControlSurface(HelixHeadlessIconButton) {
+    constructor() {
+        super(...arguments);
+        /**
+         * Whether it is raised off the page it sits on.
+         *
+         * Separate from `shape`, because they are separate facts: a docked control is
+         * raised whatever its outline, and a circle inside a toolbar is not raised at
+         * all. Shadow rather than a border, since what is under a floating control is
+         * the page and a line drawn on the page is not the same as being above it.
+         */
+        this.raised = false;
+    }
+    static { this.styles = styles; }
+};
+__decorate([
+    property({ reflect: true })
+], HelixIconButton.prototype, "shape", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixIconButton.prototype, "raised", void 0);
+HelixIconButton = __decorate([
+    customElement('helix-icon-button')
+], HelixIconButton);
+export { HelixIconButton };

package/dist/image/index.d.ts

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

package/dist/image/index.js

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

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

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