@fusion.dev/helix-headless 0.103.2 → 0.104.0

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

@@ -1,4 +1,4 @@
-import { HelixElement } from '@fusion.dev/helix-core';
+import { ArrivalController, HelixElement } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 declare const HelixHeadlessAnnouncement_base: (new (...args: any[]) => import("@fusion.dev/helix-core").DismissibleElement) & typeof HelixElement;
 /**
@@ -19,6 +19,12 @@ declare const HelixHeadlessAnnouncement_base: (new (...args: any[]) => import("@
  * does not change that, because an error that was always there is still not an
  * interruption.
  *
+ * **The region is its own, and there before its words.** The host was the
+ * region, and a banner raised mid-session arrives with its message already in
+ * it, which a screen reader reads inconsistently at best. So the message is said
+ * from a region filled a frame after the banner appears, and one that came with
+ * the page is filled at once and says nothing, being no news.
+ *
  * Dismissing is a request. The announcement does not remove itself, because the
  * consumer owns the markup and taking the node out from under them would put
  * their state and the document out of step. `preventDefault()` on the
@@ -40,6 +46,7 @@ declare const HelixHeadlessAnnouncement_base: (new (...args: any[]) => import("@
  * @csspart content - The message region.
  * @csspart dismiss - The control that asks to close.
  * @csspart dismiss-mark - The glyph on the dismiss control, where none is slotted.
+ * @csspart live - The message again, in a region a screen reader hears when the band appears mid-session. Visually hidden in the styled tier.
  */
 export declare class HelixHeadlessAnnouncement extends HelixHeadlessAnnouncement_base {
     /**
@@ -66,7 +73,7 @@ export declare class HelixHeadlessAnnouncement extends HelixHeadlessAnnouncement
      * axes, which is the test the registry answers to.
      */
     tone?: 'accent' | 'danger' | 'info' | 'neutral' | 'primary' | 'success' | 'warning';
-    protected willUpdate(changed: PropertyValues): void;
+    protected readonly arrival: ArrivalController;
     protected updated(changed: PropertyValues): void;
     /**
      * Says on the `actions` region whether anything is in it.

package/dist/announcement/root/announcement-root.js

@@ -4,16 +4,18 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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, HelixElement, hostAria, MixinDismissible, markRegion, } from '@fusion.dev/helix-core';
+import { ArrivalController, customElement, HelixElement, MixinDismissible, markRegion, slottedWords, } from '@fusion.dev/helix-core';
 import { x } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 let HelixHeadlessAnnouncement = class HelixHeadlessAnnouncement extends MixinDismissible(HelixElement) {
-    willUpdate(changed) {
-        super.willUpdate(changed);
-        hostAria(this.internals, { role: 'status' });
-        this.internals.ariaLive = 'polite';
+    constructor() {
+        super(...arguments);
+        this.arrival = new ArrivalController(this, {
+            arriving: () => !this.serverRendered && document.readyState === 'complete',
+            text: () => slottedWords(this, ['']),
+        });
     }
     updated(changed) {
         super.updated(changed);
@@ -30,7 +32,8 @@ let HelixHeadlessAnnouncement = class HelixHeadlessAnnouncement extends MixinDis
     </slot>`;
     }
     render() {
-        return html `<div part="content"><slot></slot></div>
+        return html `<div part="content"><slot @slotchange=${() => this.arrival.say()}></slot></div>
+      <span part="live" role="status">${this.arrival.said}</span>
       <div part="actions"><slot name="actions"></slot></div>
       ${this.dismissible
             ? html `<button

package/dist/badge/root/badge-root.js

@@ -35,10 +35,9 @@ let HelixHeadlessBadge = class HelixHeadlessBadge extends HelixElement {
         part="indicator"
         data-blank=${blank ? '' : nothing}
         data-single=${text.length <= 1 ? '' : nothing}
-        role=${announced ? 'status' : nothing}
+        role="status"
         aria-label=${this.label !== '' && announced ? this.label : nothing}
-        aria-hidden=${announced ? nothing : 'true'}
-        >${text}</span
+        >${blank ? html `<span aria-hidden="true">${text}</span>` : text}</span
       >`;
     }
 };

package/dist/canvas/edge/canvas-edge.d.ts

@@ -0,0 +1,112 @@
+import { HelixElement } from '@fusion.dev/helix-core';
+import { type PropertyValues, type TemplateResult } from 'lit';
+import type { CanvasEnd, CanvasSide } from '../root/canvas-document.js';
+/**
+ * @summary A connector between two cards on a canvas.
+ *
+ * @description
+ * **A declaration rather than a drawing**, which is the shape `Table.Column`
+ * has: this element renders nothing at all and the board draws the line,
+ * because a connector is geometry between two other elements and neither end of
+ * it belongs here. What this carries is which cards, which sides, and what sits
+ * at the ends.
+ *
+ * Written as markup for the reason its cards are: an array of edges handed to a
+ * custom element does not survive React's hydration, and a connector a consumer
+ * can write is one they can also put a condition around.
+ *
+ * @since 0.100.0
+ * @status experimental
+ * @category media
+ * @aliases CanvasConnector, BoardEdge
+ * @documentation https://fusion.dev/helix/components/canvas
+ */
+export declare class HelixHeadlessCanvasEdge extends HelixElement {
+    /** The card it leaves. */
+    from: string;
+    /**
+     * What sits at the end it leaves from.
+     *
+     * Absent is nothing, which is the format's own default and what makes an
+     * ordinary connector a one-way arrow.
+     */
+    fromEnd?: CanvasEnd;
+    /** Which side of that card it leaves, where the document says. */
+    fromSide?: CanvasSide | undefined;
+    /** What the connector says, drawn at its middle. */
+    label?: string | undefined;
+    /**
+     * What a request calls this connection, unique on its board.
+     *
+     * Optional, unlike a card's: a connection is also known by its two ends,
+     * which `helix-remove` carries beside this, so a page that names none of its
+     * connections can still find the one a reader asked to take away.
+     */
+    name: string;
+    /**
+     * How it travels: `straight`, or `step` for right angles.
+     *
+     * Absent is whatever the board says, and a curve where the board says
+     * nothing. Not part of JSON Canvas, which draws every edge one way; a
+     * document read from one keeps its curves.
+     *
+     * **`path` rather than `shape`**, which is a word this library already
+     * spends on how an element looks in the styled tier: this changes the line
+     * the connector is drawn along, which the board computes. Nor `route`, which
+     * every element here already has, as the method that sends a child to a slot.
+     */
+    path?: 'straight' | 'step';
+    /**
+     * Keeps this connection: a reader cannot remove it.
+     *
+     * The board's `readonly` still wins. A connection is still removed with a
+     * card at either end of it, since a line to a card that has gone is not one
+     * the board can draw.
+     */
+    readOnly: boolean;
+    /** The card it arrives at. */
+    to: string;
+    /** What sits at the end it arrives at. Absent is an arrow, as the format says. */
+    toEnd?: CanvasEnd;
+    /**
+     * What the connection means, in the words every Helix component uses.
+     *
+     * A color with no meaning is `--canvas-edge-color`, written in the edge's own
+     * `style`: the line is drawn by the board rather than by this element, so the
+     * board carries the value across from where it was written.
+     */
+    tone?: 'accent' | 'danger' | 'info' | 'neutral' | 'primary' | 'success' | 'warning';
+    /** Which side of that card it arrives at, where the document says. */
+    toSide?: CanvasSide | undefined;
+    /**
+     * How the line is drawn: `dashed` or `dotted`, and solid where it says
+     * neither.
+     *
+     * **A variant rather than an axis**, which is what the registry keeps it for:
+     * no other family draws a line whose stroke says something, and a dashed
+     * connection is the ordinary way to draw a weaker or an optional one. On the
+     * headless tier because the board that draws the line is.
+     */
+    variant?: 'dashed' | 'dotted';
+    /**
+     * Tells the board the connector changed, since the board is what draws it.
+     *
+     * Every property here is one the line is drawn from, so any change is one
+     * the board has to hear: a label written after the first paint otherwise
+     * never appeared.
+     */
+    protected updated(changed: PropertyValues): void;
+    /**
+     * Nothing, and deliberately so.
+     *
+     * The board draws every connector into one layer under the cards, which is
+     * the only place a line between two of them can be drawn. This element exists
+     * to be read.
+     */
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-canvas-edge': HelixHeadlessCanvasEdge;
+    }
+}

package/dist/canvas/edge/canvas-edge.js

@@ -0,0 +1,66 @@
+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, HelixElement } from '@fusion.dev/helix-core';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+let HelixHeadlessCanvasEdge = class HelixHeadlessCanvasEdge extends HelixElement {
+    constructor() {
+        super(...arguments);
+        this.from = '';
+        this.name = '';
+        this.readOnly = false;
+        this.to = '';
+    }
+    updated(changed) {
+        super.updated(changed);
+        const board = this.parentElement;
+        board?.requestUpdate?.();
+    }
+    render() {
+        return html ``;
+    }
+};
+__decorate([
+    property()
+], HelixHeadlessCanvasEdge.prototype, "from", void 0);
+__decorate([
+    property({ attribute: 'from-end' })
+], HelixHeadlessCanvasEdge.prototype, "fromEnd", void 0);
+__decorate([
+    property({ attribute: 'from-side' })
+], HelixHeadlessCanvasEdge.prototype, "fromSide", void 0);
+__decorate([
+    property()
+], HelixHeadlessCanvasEdge.prototype, "label", void 0);
+__decorate([
+    property()
+], HelixHeadlessCanvasEdge.prototype, "name", void 0);
+__decorate([
+    property()
+], HelixHeadlessCanvasEdge.prototype, "path", void 0);
+__decorate([
+    property({ attribute: 'readonly', reflect: true, type: Boolean })
+], HelixHeadlessCanvasEdge.prototype, "readOnly", void 0);
+__decorate([
+    property()
+], HelixHeadlessCanvasEdge.prototype, "to", void 0);
+__decorate([
+    property({ attribute: 'to-end' })
+], HelixHeadlessCanvasEdge.prototype, "toEnd", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixHeadlessCanvasEdge.prototype, "tone", void 0);
+__decorate([
+    property({ attribute: 'to-side' })
+], HelixHeadlessCanvasEdge.prototype, "toSide", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixHeadlessCanvasEdge.prototype, "variant", void 0);
+HelixHeadlessCanvasEdge = __decorate([
+    customElement('helix-headless-canvas-edge')
+], HelixHeadlessCanvasEdge);
+export { HelixHeadlessCanvasEdge };

package/dist/canvas/index.d.ts

@@ -0,0 +1,4 @@
+export { HelixHeadlessCanvasEdge } from './edge/canvas-edge.js';
+export { HelixHeadlessCanvasNode } from './node/canvas-node.js';
+export type { CanvasDocument, CanvasEdge, CanvasEdgeProps, CanvasEnd, CanvasNode, CanvasNodeProps, CanvasPath, CanvasSide, CanvasTone, } from './root/canvas-root.js';
+export { fromJsonCanvas, HelixHeadlessCanvas } from './root/canvas-root.js';

package/dist/canvas/index.js

@@ -0,0 +1,3 @@
+export { HelixHeadlessCanvasEdge } from './edge/canvas-edge.js';
+export { HelixHeadlessCanvasNode } from './node/canvas-node.js';
+export { fromJsonCanvas, HelixHeadlessCanvas } from './root/canvas-root.js';

package/dist/canvas/node/canvas-node.d.ts

@@ -0,0 +1,211 @@
+import { HelixElement } from '@fusion.dev/helix-core';
+import { type PropertyValues, type TemplateResult } from 'lit';
+/**
+ * @summary One card or group on a canvas.
+ *
+ * @description
+ * **Markup rather than an entry in an array**, which is the rule
+ * `VideoPlaylist` writes out: an array handed to a custom element is missing
+ * from the first paint of every server-rendered React page, because React skips
+ * the properties it would have to apply imperatively while hydrating. A card
+ * written as an element is in the served HTML whichever renderer wrote it, and
+ * what is inside it is the consumer's own DOM rather than a string this
+ * component parses.
+ *
+ * **Where it sits is data**, which is what makes a canvas a canvas: somebody
+ * placed this card and the placement carries meaning, so `x` and `y` are given
+ * rather than computed. The board reads them and places the card; a page with
+ * no JavaScript has the cards and their text and not the arrangement, which is
+ * the honest half of what a board can promise before it hydrates.
+ *
+ * **Named by `name`, which only has to be unique on its board**, the way a
+ * form control's is in its form. An `id` has to be unique on the whole page,
+ * and two boards written from one template, or one board shown twice, would
+ * each have a card called `write` with no way to say which one a connection
+ * meant. `id` is left for the page, which can still use it.
+ *
+ * **What it holds is the consumer's**, which is why there is no card type any
+ * more: a card of text is text, a link is a link they put inside it, a file is
+ * whatever they show for one. The one kind the board treats differently is a
+ * group, a box drawn behind the cards inside it, and `group` says so. JSON
+ * Canvas's four types are mapped by `fromJsonCanvas` on the way in.
+ *
+ * **The card is the way around the board, for a reader who cannot see it.** The
+ * board keeps one tab stop among its cards, arrow keys walk them in reading
+ * order, and the one a reader lands on is brought into view. What it connects
+ * to is read out with it, so the arrows between cards are heard as well as
+ * seen. That replaced a list of every card under the board, which said the same
+ * thing twice to a sighted reader and took a row from the board to do it.
+ *
+ * @since 0.100.0
+ * @status experimental
+ * @category media
+ * @aliases CanvasCard, BoardNode
+ * @documentation https://fusion.dev/helix/components/canvas
+ *
+ * @slot - What the card holds, which is anything: text, a picture, a chart.
+ * @slot description - A quieter line under it.
+ *
+ * @csspart grip - A corner a selected card is resized from, on every one of the four.
+ * @csspart grip-bottom-left - The bottom left corner.
+ * @csspart grip-bottom-right - The bottom right corner.
+ * @csspart grip-top-left - The top left corner.
+ * @csspart grip-top-right - The top right corner.
+ * @csspart handle - A point on a side a connection is drawn from, on every one of the four.
+ * @csspart handle-bottom - The point on the bottom side.
+ * @csspart handle-left - The point on the left side.
+ * @csspart handle-right - The point on the right side.
+ * @csspart handle-top - The point on the top side.
+ * @csspart move - The handle a selected card is moved by, a click to pick it up and another to put it down, as well as a drag.
+ * @csspart node - The box the content sits in.
+ * @csspart outline - The drawn outline of a card whose shape a box cannot draw, a diamond.
+ *
+ * @cssstate candidate - While a connection is being drawn and this card is somewhere it could arrive.
+ * @cssstate current - While this is the card a reader lands on when they tab into the board.
+ * @cssstate selected - While this is the card the reader selected, until they select something else or nothing.
+ * @cssstate target - While a connection being drawn would arrive here if it were let go.
+ */
+export declare class HelixHeadlessCanvasNode extends HelixElement {
+    /**
+     * A box drawn behind the cards inside it rather than a card.
+     *
+     * The board works out what is inside it from the geometry, which is what the
+     * format does too, and moves them with it. Its `label` is drawn above it.
+     */
+    group: boolean;
+    /**
+     * @internal Whether a connection being drawn could arrive here, written by
+     * the board. Not a consumer's to set: whether a card can take one is the
+     * board's arithmetic over its own read-only switches and this card's.
+     */
+    candidate: boolean;
+    /**
+     * @internal Whether the board lets a reader move, connect or remove this
+     * card, written by the board. Not a consumer's to set: `readonly` is theirs,
+     * and this is what the board makes of it and of its own.
+     */
+    connectable: boolean;
+    /**
+     * @internal Whether this card holds the board's one tab stop, written by the
+     * board. One card at a time, so a board of forty cards is one press of Tab to
+     * get past rather than forty.
+     */
+    current: boolean;
+    /** How tall the card is, in the document's own units. */
+    height: number;
+    /**
+     * What the card is called, for a group and wherever another card names it.
+     *
+     * A group needs one because it has no text of its own; a card that has text
+     * is named by it, and one holding a picture or a figure is named by nothing
+     * short enough to read out in another card's connections.
+     */
+    label: string;
+    /**
+     * What connections and requests call this card, unique on its board.
+     *
+     * Required: a card with no name is drawn but nothing can connect to it, and
+     * the board has nothing to say when a reader asks for it to go.
+     */
+    name: string;
+    /**
+     * @internal What the card connects to, as a sentence, written by the board.
+     * Read out after the card's own content rather than as its name, so a reader
+     * hears what the card says first and where it leads second.
+     */
+    links: string;
+    /**
+     * Keeps this card where it is: not moved, not connected, not removed.
+     *
+     * **The board's own word, meaning the same thing one card at a time.** A
+     * board of cards a reader rearranges often has one that anchors it, a start
+     * or a title, and this is that card. The board's `readonly` still wins, so a
+     * read-only board is read-only whatever its cards say.
+     */
+    readOnly: boolean;
+    /**
+     * The card's outline: `circle`, `diamond`, `pill` or `square`, and a rounded
+     * box where it says none.
+     *
+     * **A flowchart's vocabulary, and the reason it is on this tier**: a diamond
+     * is drawn as an outline the card renders, because a border follows a box
+     * and a diamond is not one, so the markup differs before any rule is
+     * written. Every shape here meets the middle of each side of its box, which
+     * is where a connection arrives, so a connection to a diamond lands on its
+     * point and one to a circle on its curve without the board knowing which.
+     */
+    shape?: 'circle' | 'diamond' | 'pill' | 'square';
+    /**
+     * @internal Whether this is the card the reader selected, written by the
+     * board. Kept apart from focus, so a reader who clicks a button beside the
+     * board to act on the selection has not cleared it by clicking.
+     */
+    selected: boolean;
+    /**
+     * @internal Whether the board lets a reader move this card with its handle,
+     * written by the board: the card is selected, and nothing holds it.
+     */
+    movable: boolean;
+    /**
+     * @internal Whether the board lets a reader resize this card now, written by
+     * the board: the card is the one selected, and nothing holds it.
+     */
+    resizable: boolean;
+    /**
+     * What the card means, in the words every Helix component uses for it.
+     *
+     * **`tone` rather than the format's `color`**, which was a second word for
+     * the same thing on this family alone: JSON Canvas writes `1` to `6` and
+     * leaves the meaning to the application, and this board had already pinned
+     * each to a tone. `fromJsonCanvas` maps the six to tones on the way in. A
+     * color with no meaning, a hex a document chose, is a custom property on the
+     * card, `--canvas-node-color`, which is a style rather than a statement.
+     *
+     * On the headless tier because meaning survives having no stylesheet.
+     */
+    tone?: 'accent' | 'danger' | 'info' | 'neutral' | 'primary' | 'success' | 'warning';
+    /**
+     * @internal Whether a connection being drawn would arrive here if it were
+     * let go, written by the board.
+     */
+    target: boolean;
+    /** How wide the card is, in the document's own units. */
+    width: number;
+    /** Where its left edge sits, in the document's own units. */
+    x: number;
+    /** Where its top edge sits, in the document's own units. */
+    y: number;
+    protected willUpdate(changed: PropertyValues): void;
+    /**
+     * Tells the board when anything it draws from has changed.
+     *
+     * **This is what makes a controlled board work.** A consumer holding the
+     * positions refuses `helix-before-move` and writes `x` and `y` themselves, and
+     * React writes them as properties: neither reaches the board, which drew the
+     * connectors from the old ones and left them pointing at where the card was.
+     * The board is the parent by construction, so asking it to update is one call
+     * and it batches whatever else changed in the same turn.
+     */
+    protected updated(changed: PropertyValues): void;
+    /**
+     * Focuses the card rather than the host, which draws no box of its own.
+     *
+     * The board calls this to walk the cards, and a consumer can too: the part is
+     * what holds the tab stop and what a focus ring is drawn around.
+     */
+    focus(options?: FocusOptions): void;
+    /**
+     * The card, and the sentence that says where it leads.
+     *
+     * **`aria-describedby` at a hidden element, which is allowed and is the
+     * point.** A description is computed from its target whether or not the
+     * target is rendered, so the connections are read out and never drawn: the
+     * arrows already draw them.
+     */
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-canvas-node': HelixHeadlessCanvasNode;
+    }
+}

package/dist/canvas/node/canvas-node.js

@@ -0,0 +1,148 @@
+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, HelixElement } from '@fusion.dev/helix-core';
+import { html, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+const DRAWN = [
+    'group',
+    'height',
+    'label',
+    'name',
+    'readOnly',
+    'shape',
+    'tone',
+    'width',
+    'x',
+    'y',
+];
+let HelixHeadlessCanvasNode = class HelixHeadlessCanvasNode extends HelixElement {
+    constructor() {
+        super(...arguments);
+        this.group = false;
+        this.candidate = false;
+        this.connectable = false;
+        this.current = false;
+        this.height = 0;
+        this.label = '';
+        this.name = '';
+        this.links = '';
+        this.readOnly = false;
+        this.selected = false;
+        this.movable = false;
+        this.resizable = false;
+        this.target = false;
+        this.width = 0;
+        this.x = 0;
+        this.y = 0;
+    }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        this.toggleState('candidate', this.candidate);
+        this.toggleState('current', this.current);
+        this.toggleState('selected', this.selected);
+        this.toggleState('target', this.target);
+    }
+    updated(changed) {
+        super.updated(changed);
+        if (DRAWN.some((name) => changed.has(name))) {
+            const board = this.parentElement;
+            board?.requestUpdate?.();
+        }
+    }
+    focus(options) {
+        this.partNamed('node')?.focus(options);
+    }
+    render() {
+        return html `${this.shape === 'diamond' && !this.group
+            ? html `<svg part="outline" aria-hidden="true" preserveAspectRatio="none" viewBox="0 0 100 100">
+            <polygon points="50,0 100,50 50,100 0,50" vector-effect="non-scaling-stroke" />
+          </svg>`
+            : nothing}<div
+      part="node"
+      aria-describedby=${this.links ? 'links' : nothing}
+      aria-label=${this.group ? this.label || nothing : nothing}
+      aria-keyshortcuts=${this.connectable ? 'Enter F2 Space Shift+ArrowRight Shift+ArrowDown Alt+ArrowRight Alt+ArrowDown C Delete' : nothing}
+      role=${this.group ? 'group' : 'article'}
+      tabindex=${this.current ? '0' : '-1'}
+    >
+      <slot></slot>
+      <slot name="description"></slot>
+      <span id="links" hidden>${this.links}</span>
+    </div>
+    ${this.connectable
+            ? html `<span part="handle handle-top" aria-hidden="true" data-side="top"></span>
+            <span part="handle handle-right" aria-hidden="true" data-side="right"></span>
+            <span part="handle handle-bottom" aria-hidden="true" data-side="bottom"></span>
+            <span part="handle handle-left" aria-hidden="true" data-side="left"></span>`
+            : nothing}
+    ${this.movable ? html `<span part="move" aria-hidden="true" data-move></span>` : nothing}
+    ${this.resizable
+            ? html `<span part="grip grip-top-left" aria-hidden="true" data-corner="top-left"></span>
+            <span part="grip grip-top-right" aria-hidden="true" data-corner="top-right"></span>
+            <span part="grip grip-bottom-right" aria-hidden="true" data-corner="bottom-right"></span>
+            <span part="grip grip-bottom-left" aria-hidden="true" data-corner="bottom-left"></span>`
+            : nothing}`;
+    }
+};
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessCanvasNode.prototype, "group", void 0);
+__decorate([
+    state()
+], HelixHeadlessCanvasNode.prototype, "candidate", void 0);
+__decorate([
+    state()
+], HelixHeadlessCanvasNode.prototype, "connectable", void 0);
+__decorate([
+    state()
+], HelixHeadlessCanvasNode.prototype, "current", void 0);
+__decorate([
+    property({ type: Number })
+], HelixHeadlessCanvasNode.prototype, "height", void 0);
+__decorate([
+    property()
+], HelixHeadlessCanvasNode.prototype, "label", void 0);
+__decorate([
+    property()
+], HelixHeadlessCanvasNode.prototype, "name", void 0);
+__decorate([
+    state()
+], HelixHeadlessCanvasNode.prototype, "links", void 0);
+__decorate([
+    property({ attribute: 'readonly', reflect: true, type: Boolean })
+], HelixHeadlessCanvasNode.prototype, "readOnly", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixHeadlessCanvasNode.prototype, "shape", void 0);
+__decorate([
+    state()
+], HelixHeadlessCanvasNode.prototype, "selected", void 0);
+__decorate([
+    state()
+], HelixHeadlessCanvasNode.prototype, "movable", void 0);
+__decorate([
+    state()
+], HelixHeadlessCanvasNode.prototype, "resizable", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixHeadlessCanvasNode.prototype, "tone", void 0);
+__decorate([
+    state()
+], HelixHeadlessCanvasNode.prototype, "target", void 0);
+__decorate([
+    property({ type: Number })
+], HelixHeadlessCanvasNode.prototype, "width", void 0);
+__decorate([
+    property({ type: Number })
+], HelixHeadlessCanvasNode.prototype, "x", void 0);
+__decorate([
+    property({ type: Number })
+], HelixHeadlessCanvasNode.prototype, "y", void 0);
+HelixHeadlessCanvasNode = __decorate([
+    customElement('helix-headless-canvas-node')
+], HelixHeadlessCanvasNode);
+export { HelixHeadlessCanvasNode };