@fusion.dev/helix 0.146.0 → 0.148.0

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

@@ -7,26 +7,42 @@ import type { CSSResultGroup } from 'lit';
  * Joins the buttons into one shape: the outer corners keep their radius, the
  * inner corners lose it, and adjacent borders collapse into one line.
  *
- * The joining rule is in the base layer, paired with `data-button` like the
- * button's own box, because the corner is on the control inside each button's
- * shadow root, where this component's styles cannot reach. The same rule works
- * for your own anchor styled as a button.
+ * A Helix button's corners are on the control inside its shadow root, where
+ * this component's styles cannot reach, so the group flattens them through the
+ * button's own `--button-radius-*` hooks. A native `<button>` and your own
+ * anchor styled with `data-button` join through rules in the base layer,
+ * because a page rule setting their radius would beat any rule in here.
  *
- * The buttons take their height from the region, so set `data-density` on the
- * group to make every button in it smaller or larger together.
+ * The buttons take their height from the region, so `size` makes every
+ * button in the group smaller or larger together, as `data-density` on the
+ * group does, and a button's own size still wins. A native `<button>` in a
+ * sized group takes the height and the text size.
+ *
+ * With `selection-mode`, a pressed button takes the solid fill:
+ * `--button-group-pressed-background-color` behind it and
+ * `--button-group-pressed-color` for its words, set on the group or above it.
  *
  * @since 0.1.0
  * @status stable
  * @category actions
- * @aliases Segmented buttons, Split button
+ * @aliases Segmented buttons, Split button, Toggle buttons
  * @documentation https://fusion.dev/helix/components/button-group
  *
  * @slot - The buttons in the group.
  *
  * @cssproperty --button-group-gap - Space between the buttons, when `spaced`.
+ * @cssproperty --button-group-pressed-background-color - Fill behind a pressed button, in a selection mode. Defaults to the foreground color.
+ * @cssproperty --button-group-pressed-border-color - Edge of a pressed button, in a selection mode. Defaults to its fill.
+ * @cssproperty --button-group-pressed-color - Words and icons of a pressed button, in a selection mode. Defaults to the background color.
  */
 export declare class HelixButtonGroup extends HelixHeadlessButtonGroup {
     static styles: CSSResultGroup;
+    /**
+     * The size of every button in the group: their height, text, padding and
+     * icons, from the density steps. Unset, the buttons take the size of the
+     * region around the group.
+     */
+    size?: 'sm' | 'md' | 'lg';
     /**
      * Whether the buttons are one bar or a spaced row.
      *
@@ -39,6 +55,12 @@ export declare class HelixButtonGroup extends HelixHeadlessButtonGroup {
      * `helix-flex` gives the spacing without the group.
      */
     variant?: 'joined' | 'spaced';
+    /**
+     * Draws a pressed button as well as saying so. On the control inside the
+     * button, the only element that knows, and in the button's own hooks, so
+     * hover and the focus ring stay the button's.
+     */
+    protected markPressed(control: HTMLElement, pressed: boolean | undefined): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -8,9 +8,28 @@ import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessButtonGroup } from '@fusion.dev/helix-headless/button-group';
 import { property } from 'lit/decorators.js';
 import { styles } from './button-group-root.css.js';
+const PRESSED = [
+    ['--button-background-color', 'var(--_button-group-pressed-background)'],
+    ['--button-border-color', 'var(--_button-group-pressed-border)'],
+    ['--button-foreground-color', 'var(--_button-group-pressed-foreground)'],
+];
 let HelixButtonGroup = class HelixButtonGroup extends HelixHeadlessButtonGroup {
     static { this.styles = styles; }
+    markPressed(control, pressed) {
+        super.markPressed(control, pressed);
+        for (const [hook, value] of PRESSED) {
+            if (pressed === true) {
+                control.style.setProperty(hook, value);
+            }
+            else {
+                control.style.removeProperty(hook);
+            }
+        }
+    }
 };
+__decorate([
+    property({ reflect: true })
+], HelixButtonGroup.prototype, "size", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixButtonGroup.prototype, "variant", void 0);

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

@@ -1,142 +1,9 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
---_callout-tone: var(--helix-color-info);
-
---_callout-color: var(--callout-accent-color, var(--_callout-tone));
---_callout-bar: var(--callout-bar-thickness, var(--helix-border-thick));
-
---_callout-inset: var(--callout-padding, var(--helix-space-control));
-
-font-size: var(--callout-font-size, var(--helix-text-control));
-background-color: var(
+export const styles = createSheet(`:host {--_callout-tone: var(--helix-color-info);--_callout-color: var(--callout-accent-color, var(--_callout-tone));--_callout-bar: var(--callout-bar-thickness, var(--helix-border-thick));--_callout-inset: var(--callout-padding, var(--helix-space-control));font-size: var(--callout-font-size, var(--helix-text-control));background-color: var(
 --callout-background-color,
 color-mix(in oklab, var(--_callout-color) 10%, transparent)
-);
-overflow: hidden;
-position: relative;
-
-border-radius: var(--callout-radius, var(--helix-radii-sm));
-color: var(--helix-color-foreground);
-display: flex;
-gap: var(--callout-gap, var(--helix-space-sm));
-
-padding: var(--_callout-inset);
-padding-inline-start: calc(var(--_callout-inset) + var(--_callout-bar));
-}
-
-:host::before {
-background-color: var(--_callout-color);
-content: "";
-inline-size: var(--_callout-bar);
-inset-block: 0;
-inset-inline-start: 0;
-position: absolute;
-}
-
-:host([tone="neutral"]) {
---_callout-tone: var(--helix-color-foreground-muted);
-}
-
-:host([tone="success"]) {
---_callout-tone: var(--helix-color-success);
-}
-
-:host([tone="warning"]) {
---_callout-tone: var(--helix-color-warning);
-}
-
-:host([tone="danger"]) {
---_callout-tone: var(--helix-color-danger);
-}
-
-:host([separation="outlined"]) {
-background-color: var(--callout-background-color, transparent);
-box-shadow: inset 0 0 0 var(--helix-border-thin)
-color-mix(in oklab, var(--_callout-color) 45%, var(--helix-color-background));
-}
-
-:host([separation="plain"]) {
-background-color: var(--callout-background-color, transparent);
-}
-
-[part="icon"] {
-color: var(--_callout-color);
-display: inline-flex;
-flex: 0 0 auto;
-}
-
-[part="icon"] svg {
-block-size: var(--helix-size-icon);
-inline-size: var(--helix-size-icon);
-}
-
-slot[name="icon"]::slotted(*) {
---icon-size: var(--helix-size-icon);
-
-block-size: var(--helix-size-icon);
-inline-size: var(--helix-size-icon);
-}
-
-[part="content"] {
-line-height: var(--helix-leading-normal);
-min-inline-size: 0;
-}
-
-[part="dismiss"] {
-all: unset;
-
-box-sizing: border-box;
-block-size: calc(var(--helix-size-icon) + var(--helix-space-2xs) * 2);
-border-radius: var(--helix-radii-sm);
-color: var(--helix-color-foreground-muted);
-cursor: pointer;
-display: inline-flex;
-flex: 0 0 auto;
-inline-size: calc(var(--helix-size-icon) + var(--helix-space-2xs) * 2);
-margin-block: calc(var(--helix-space-2xs) * -1);
-margin-inline: auto calc(var(--helix-space-2xs) * -1);
-place-content: center;
-place-items: center;
-transition:
+);overflow: hidden;position: relative;border-radius: var(--callout-radius, var(--helix-radii-sm));color: var(--helix-color-foreground);display: flex;gap: var(--callout-gap, var(--helix-space-sm));padding: var(--_callout-inset);padding-inline-start: calc(var(--_callout-inset) + var(--_callout-bar));}:host::before {background-color: var(--_callout-color);content: "";inline-size: var(--_callout-bar);inset-block: 0;inset-inline-start: 0;position: absolute;}:host([tone="neutral"]) {--_callout-tone: var(--helix-color-foreground-muted);}:host([tone="success"]) {--_callout-tone: var(--helix-color-success);}:host([tone="warning"]) {--_callout-tone: var(--helix-color-warning);}:host([tone="danger"]) {--_callout-tone: var(--helix-color-danger);}:host([separation="outlined"]) {background-color: var(--callout-background-color, transparent);box-shadow: inset 0 0 0 var(--helix-border-thin)
+color-mix(in oklab, var(--_callout-color) 45%, var(--helix-color-background));}:host([separation="plain"]) {background-color: var(--callout-background-color, transparent);}[part="icon"] {color: var(--_callout-color);display: inline-flex;flex: 0 0 auto;}[part="icon"] svg {block-size: var(--helix-size-icon);inline-size: var(--helix-size-icon);}slot[name="icon"]::slotted(*) {--icon-size: var(--helix-size-icon);block-size: var(--helix-size-icon);inline-size: var(--helix-size-icon);}[part="content"] {line-height: var(--helix-leading-normal);min-inline-size: 0;}[part="dismiss"] {all: unset;box-sizing: border-box;block-size: calc(var(--helix-size-icon) + var(--helix-space-2xs) * 2);border-radius: var(--helix-radii-sm);color: var(--helix-color-foreground-muted);cursor: pointer;display: inline-flex;flex: 0 0 auto;inline-size: calc(var(--helix-size-icon) + var(--helix-space-2xs) * 2);margin-block: calc(var(--helix-space-2xs) * -1);margin-inline: auto calc(var(--helix-space-2xs) * -1);place-content: center;place-items: center;transition:
 background-color var(--helix-duration-fast) var(--helix-easing-standard),
-color var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-[part="dismiss"]:hover {
-background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);
-color: var(--helix-color-foreground);
-}
-
-[part="dismiss"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-[part="dismiss"] svg,
-slot[name="dismiss-icon"]::slotted(*) {
---icon-size: var(--helix-size-icon);
-
-block-size: var(--helix-size-icon);
-inline-size: var(--helix-size-icon);
-}
-
-@media (prefers-reduced-motion: reduce) {
-[part="dismiss"] {
-transition: none;
-}
-}
-
-slot[name="heading"]::slotted(*) {
-color: var(--helix-color-foreground);
-
-display: block;
-font-size: var(--callout-font-size, var(--helix-text-control));
-font-weight: var(--helix-weight-semibold);
-margin: var(--helix-space-none);
-}
-
-@media print {
-:host {
-background-color: transparent;
-}
-}`);
+color var(--helix-duration-fast) var(--helix-easing-standard);}[part="dismiss"]:hover {background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);color: var(--helix-color-foreground);}[part="dismiss"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="dismiss"] svg,
+slot[name="dismiss-icon"]::slotted(*) {--icon-size: var(--helix-size-icon);block-size: var(--helix-size-icon);inline-size: var(--helix-size-icon);}@media (prefers-reduced-motion: reduce) {[part="dismiss"] {transition: none;}}slot[name="heading"]::slotted(*) {color: var(--helix-color-foreground);display: block;font-size: var(--callout-font-size, var(--helix-text-control));font-weight: var(--helix-weight-semibold);margin: var(--helix-space-none);}@media print {:host {background-color: transparent;}}`);

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

@@ -15,8 +15,10 @@ import type { CSSResultGroup } from 'lit';
  * bar, `outlined` an edge with no fill, and `plain` the bar and the mark alone.
  *
  * The inset and the type follow `data-density`, as the controls around a
- * callout do: set it on a region for tighter or looser callouts, or set
- * `--callout-padding` and `--callout-font-size` on one.
+ * callout do: set it on a region for tighter or looser callouts, or on one
+ * callout itself, as `<helix-callout data-density="sm">`. That is how one
+ * callout is sized, and there is no `size` beside it. `--callout-padding` and
+ * `--callout-font-size` set either to a value of your own.
  *
  * @since 0.1.0
  * @status stable

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

@@ -1,370 +1,13 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-
---_canvas-card-x: 0px;
---_canvas-card-y: 0px;
---_canvas-card-inline-size: auto;
---_canvas-card-block-size: auto;
-
---_heading-ink: var(--helix-color-foreground);
-
---_canvas-card-tone: var(--helix-color-border);
---_canvas-card-color: var(--canvas-node-color, var(--_canvas-card-tone));
-
---_canvas-handle-color: var(--_canvas-card-color);
-
-background-color: var(--canvas-node-background-color, var(--helix-color-surface));
-block-size: var(--_canvas-card-block-size);
-box-shadow: var(--canvas-node-shadow, none);
-border: var(--helix-border-thin) solid var(--_canvas-card-color);
-border-radius: var(--helix-radii-sm);
-box-sizing: border-box;
-color: var(--helix-color-foreground);
-display: block;
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-sm);
-inline-size: var(--_canvas-card-inline-size);
-
-left: var(--_canvas-card-x);
-top: var(--_canvas-card-y);
-
-overflow: visible;
-position: absolute;
-z-index: 1;
-}
-
-:host([group]) {
-background-color: color-mix(in oklab, var(--helix-color-foreground) 4%, transparent);
-border-style: dashed;
-
-overflow: visible;
-z-index: 0;
-}
-
-:host([tone="accent"]) {
---_canvas-card-tone: var(--helix-color-accent);
-}
-:host([tone="danger"]) {
---_canvas-card-tone: var(--helix-color-danger);
-}
-:host([tone="info"]) {
---_canvas-card-tone: var(--helix-color-info);
-}
-:host([tone="primary"]) {
---_canvas-card-tone: var(--helix-color-primary);
-}
-:host([tone="success"]) {
---_canvas-card-tone: var(--helix-color-success);
-}
-:host([tone="warning"]) {
---_canvas-card-tone: var(--helix-color-warning);
-}
-
-:host(:not([tone])),
-:host([tone="neutral"]) {
---_canvas-handle-color: var(--canvas-node-color, var(--helix-color-foreground-muted));
-}
-
-:host(:state(selected)),
-:host(:state(target)) {
---_canvas-handle-color: var(--helix-color-accent);
-}
-
-:host([separation="filled"]:not([group])) {
-background-color: color-mix(in oklab, var(--_canvas-card-color) 16%, var(--helix-color-surface));
-border-color: transparent;
-}
-
-:host([separation="elevated"]:not([group])) {
---canvas-node-shadow: var(--helix-shadow-md);
-}
-
-:host([separation="plain"]:not([group])) {
-background-color: transparent;
-border-color: transparent;
-}
-
-:host([material="glass"]:not([group])) {
-backdrop-filter: var(--helix-material-backdrop);
-background-color: var(--helix-material-translucent);
-}
-
-:host([material="frosted"]:not([group])) {
-backdrop-filter: blur(var(--helix-material-blur-lg));
-background-color: var(--helix-material-translucent-strong);
-}
-
-:host([material="transparent"]:not([group])) {
-backdrop-filter: none;
-background-color: transparent;
-}
-
-[part="node"] {
-block-size: 100%;
-border-radius: inherit;
-box-sizing: border-box;
-display: flex;
-flex-direction: column;
-gap: var(--helix-space-2xs);
-justify-content: center;
-overflow: hidden;
-padding: var(--canvas-node-padding, var(--helix-space-sm));
-}
-
-[part="node"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: calc(var(--helix-size-focus-offset) * -1);
-}
-
-:host([group]) [part="node"]::before {
-color: var(--helix-color-foreground-muted);
-content: attr(aria-label);
-font-size: var(--helix-text-xs);
-inset-block-end: 100%;
-inset-inline-start: 0;
-padding-block-end: var(--helix-space-2xs);
-position: absolute;
-}
-
-:host([group]) [part="node"] {
-display: block;
-overflow: visible;
-position: relative;
-}
-
-[part~="handle"] {
-background-color: var(--helix-color-surface);
-block-size: var(--canvas-handle-size, 0.625rem);
-border: var(--helix-border-thick) solid var(--_canvas-handle-color);
-border-radius: var(--helix-radii-full);
-box-sizing: border-box;
-cursor: crosshair;
-inline-size: var(--canvas-handle-size, 0.625rem);
-opacity: 0;
-position: absolute;
-transform: translate(-50%, -50%);
-transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-[part~="handle"]::after {
-content: "";
-inset: calc(var(--helix-space-sm) * -1);
-position: absolute;
-}
-
-:host(:hover) [part~="handle"],
+export const styles = createSheet(`:host {--_canvas-card-x: 0px;--_canvas-card-y: 0px;--_canvas-card-inline-size: auto;--_canvas-card-block-size: auto;--_heading-ink: var(--helix-color-foreground);--_canvas-card-tone: var(--helix-color-border);--_canvas-card-color: var(--canvas-node-color, var(--_canvas-card-tone));--_canvas-handle-color: var(--_canvas-card-color);background-color: var(--canvas-node-background-color, var(--helix-color-surface));block-size: var(--_canvas-card-block-size);box-shadow: var(--canvas-node-shadow, none);border: var(--helix-border-thin) solid var(--_canvas-card-color);border-radius: var(--canvas-node-radius, var(--helix-radii-sm));box-sizing: border-box;color: var(--helix-color-foreground);display: block;font-family: var(--helix-font-sans);font-size: var(--canvas-node-font-size, var(--helix-text-sm));inline-size: var(--_canvas-card-inline-size);left: var(--_canvas-card-x);top: var(--_canvas-card-y);overflow: visible;position: absolute;z-index: 1;}:host([group]) {background-color: color-mix(in oklab, var(--helix-color-foreground) 4%, transparent);border-style: dashed;overflow: visible;z-index: 0;}:host([tone="accent"]) {--_canvas-card-tone: var(--helix-color-accent);}:host([tone="danger"]) {--_canvas-card-tone: var(--helix-color-danger);}:host([tone="info"]) {--_canvas-card-tone: var(--helix-color-info);}:host([tone="primary"]) {--_canvas-card-tone: var(--helix-color-primary);}:host([tone="success"]) {--_canvas-card-tone: var(--helix-color-success);}:host([tone="warning"]) {--_canvas-card-tone: var(--helix-color-warning);}:host(:not([tone])),
+:host([tone="neutral"]) {--_canvas-handle-color: var(--canvas-node-color, var(--helix-color-foreground-muted));}:host(:state(selected)) {--_canvas-handle-color: var(--canvas-selected-color, var(--helix-color-accent));}:host(:state(target)) {--_canvas-handle-color: var(--canvas-connect-color, var(--helix-color-accent));}:host([separation="filled"]:not([group])) {background-color: color-mix(in oklab, var(--_canvas-card-color) 16%, var(--helix-color-surface));border-color: transparent;}:host([separation="elevated"]:not([group])) {--canvas-node-shadow: var(--helix-shadow-md);}:host([separation="plain"]:not([group])) {background-color: transparent;border-color: transparent;}:host([material="glass"]:not([group])) {backdrop-filter: var(--helix-material-backdrop);background-color: var(--helix-material-translucent);}:host([material="frosted"]:not([group])) {backdrop-filter: blur(var(--helix-material-blur-lg));background-color: var(--helix-material-translucent-strong);}:host([material="transparent"]:not([group])) {backdrop-filter: none;background-color: transparent;}[part="node"] {block-size: 100%;border-radius: inherit;box-sizing: border-box;display: flex;flex-direction: column;gap: var(--helix-space-2xs);justify-content: center;overflow: hidden;padding: var(--canvas-node-padding, var(--helix-space-sm));}[part="node"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}:host([group]) [part="node"]::before {color: var(--helix-color-foreground-muted);content: attr(aria-label);font-size: var(--helix-text-xs);inset-block-end: 100%;inset-inline-start: 0;padding-block-end: var(--helix-space-2xs);position: absolute;}:host([group]) [part="node"] {display: block;overflow: visible;position: relative;}[part~="handle"] {background-color: var(--helix-color-surface);block-size: var(--canvas-handle-size, 0.625rem);border: var(--helix-border-thick) solid var(--_canvas-handle-color);border-radius: var(--helix-radii-full);box-sizing: border-box;cursor: crosshair;inline-size: var(--canvas-handle-size, 0.625rem);opacity: 0;position: absolute;transform: translate(-50%, -50%);transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);}[part~="handle"]::after {content: "";inset: calc(var(--helix-space-sm) * -1);position: absolute;}:host(:hover) [part~="handle"],
 :host(:focus-within) [part~="handle"],
-:host(:state(candidate)) [part~="handle"] {
-opacity: 1;
-}
-
-:host(:state(selected)) {
-outline: var(--helix-border-thick) solid var(--helix-color-accent);
-outline-offset: calc(var(--helix-border-thin) * -1);
-}
-
-:host(:state(target)) {
-box-shadow: 0 0 0 var(--helix-border-thick) var(--helix-color-accent);
-}
-
-:host(:state(target)) [part~="handle"] {
-background-color: var(--_canvas-handle-color);
-}
-
-@media (forced-colors: active) {
-:host(:state(target)) {
-outline: var(--helix-border-thick) solid Highlight;
-outline-offset: var(--helix-space-2xs);
-}
-}
-
-@media (prefers-reduced-motion: reduce) {
-[part~="handle"],
-[part~="move"] {
-transition: none;
-}
-}
-
-[part~="handle-top"] {
-left: 50%;
-top: 0;
-}
-[part~="handle-right"] {
-left: 100%;
-top: 50%;
-}
-[part~="handle-bottom"] {
-left: 50%;
-top: 100%;
-}
-[part~="handle-left"] {
-left: 0;
-top: 50%;
-}
-
-::slotted([slot="description"]) {
-color: var(--helix-color-foreground-subtle);
-font-size: var(--helix-text-xs);
-}
-
-:host(:not(:state(placed))) {
-position: static;
-}
-
-[part~="grip"] {
-background-color: var(--helix-color-surface);
-block-size: var(--canvas-grip-size, 0.5rem);
-border: var(--helix-border-thin) solid var(--helix-color-accent);
-box-sizing: border-box;
-inline-size: var(--canvas-grip-size, 0.5rem);
-position: absolute;
-transform: translate(-50%, -50%);
-}
-
-[part~="grip"]::after {
-content: "";
-inset: calc(var(--helix-space-2xs) * -1);
-position: absolute;
-}
-
-[part~="grip-top-left"] {
-cursor: nwse-resize;
-left: 0;
-top: 0;
-}
-[part~="grip-top-right"] {
-cursor: nesw-resize;
-left: 100%;
-top: 0;
-}
-[part~="grip-bottom-right"] {
-cursor: nwse-resize;
-left: 100%;
-top: 100%;
-}
-[part~="grip-bottom-left"] {
-cursor: nesw-resize;
-left: 0;
-top: 100%;
-}
-
-[part~="move"] {
-background-image: radial-gradient(circle, currentColor 1px, transparent 1.25px);
-background-size: 50% calc(100% / 3);
-block-size: var(--canvas-move-block-size, 0.75rem);
-color: var(--helix-color-foreground-subtle);
-cursor: move;
-inline-size: var(--canvas-move-inline-size, 0.5rem);
-inset-block-start: var(--canvas-move-inset, var(--helix-space-xs));
-inset-inline-start: var(--canvas-move-inset, var(--helix-space-xs));
-opacity: 0;
-position: absolute;
-transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-[part~="move"]::after {
-content: "";
-inset: calc((1.5rem - 100%) / -2);
-position: absolute;
-}
-
-:host(:hover) [part~="move"],
-:host(:focus-within) [part~="move"] {
-opacity: 1;
-}
-
-[part~="move"]:hover {
-color: var(--helix-color-accent);
-}
-
-:host([shape="pill"]) [part~="move"],
+:host(:state(candidate)) [part~="handle"] {opacity: 1;}:host(:state(selected)) {outline: var(--helix-border-thick) solid var(--canvas-selected-color, var(--helix-color-accent));outline-offset: calc(var(--helix-border-thin) * -1);}:host(:state(target)) {box-shadow: 0 0 0 var(--helix-border-thick) var(--canvas-connect-color, var(--helix-color-accent));}:host(:state(target)) [part~="handle"] {background-color: var(--_canvas-handle-color);}@media (forced-colors: active) {:host(:state(target)) {outline: var(--helix-border-thick) solid Highlight;outline-offset: var(--helix-space-2xs);}}@media (prefers-reduced-motion: reduce) {[part~="handle"],
+[part~="move"] {transition: none;}}[part~="handle-top"] {left: 50%;top: 0;}[part~="handle-right"] {left: 100%;top: 50%;}[part~="handle-bottom"] {left: 50%;top: 100%;}[part~="handle-left"] {left: 0;top: 50%;}::slotted([slot="description"]) {color: var(--helix-color-foreground-subtle);font-size: var(--helix-text-xs);}:host(:not(:state(placed))) {position: static;}[part~="grip"] {background-color: var(--helix-color-surface);block-size: var(--canvas-grip-size, 0.5rem);border: var(--helix-border-thin) solid var(--canvas-selected-color, var(--helix-color-accent));box-sizing: border-box;inline-size: var(--canvas-grip-size, 0.5rem);position: absolute;transform: translate(-50%, -50%);}[part~="grip"]::after {content: "";inset: calc(var(--helix-space-2xs) * -1);position: absolute;}@media (pointer: coarse) {:host(:focus-within) [part~="handle"]::after,
+:host(:focus-within) [part~="grip"]::after {inset: calc((2.75rem - 100%) / -2);}}[part~="grip-top-left"] {cursor: nwse-resize;left: 0;top: 0;}[part~="grip-top-right"] {cursor: nesw-resize;left: 100%;top: 0;}[part~="grip-bottom-right"] {cursor: nwse-resize;left: 100%;top: 100%;}[part~="grip-bottom-left"] {cursor: nesw-resize;left: 0;top: 100%;}[part~="move"] {background-image: radial-gradient(circle, currentColor 1px, transparent 1.25px);background-size: 50% calc(100% / 3);block-size: var(--canvas-move-block-size, 0.75rem);color: var(--helix-color-foreground-subtle);cursor: move;inline-size: var(--canvas-move-inline-size, 0.5rem);inset-block-start: var(--canvas-move-inset, var(--helix-space-xs));inset-inline-start: var(--canvas-move-inset, var(--helix-space-xs));opacity: 0;position: absolute;transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);}[part~="move"]::after {content: "";inset: calc((1.5rem - 100%) / -2);position: absolute;}:host(:hover) [part~="move"],
+:host(:focus-within) [part~="move"] {opacity: 1;}[part~="move"]:hover {color: var(--canvas-selected-color, var(--helix-color-accent));}:host([shape="pill"]) [part~="move"],
 :host([shape="circle"]) [part~="move"],
-:host([shape="diamond"]) [part~="move"] {
-inset-block-start: calc(var(--canvas-move-inset, var(--helix-space-xs)) * 2);
-inset-inline: 0;
-margin-inline: auto;
-}
-
-:host([shape="square"]:not([group])) {
-border-radius: 0;
-}
-
-:host([shape="pill"]:not([group])) {
-border-radius: var(--helix-radii-full);
-}
-
-:host([shape="circle"]:not([group])) {
-border-radius: 50%;
-}
-
-:host([shape="pill"]:not([group])) [part="node"],
-:host([shape="circle"]:not([group])) [part="node"] {
-align-items: center;
-padding-inline: 15%;
-text-align: center;
-}
-
-:host([shape="diamond"]:not([group])) {
-
-backdrop-filter: none;
-background-color: transparent;
-border-color: transparent;
---canvas-node-shadow: none;
-}
-
-[part="outline"] {
-block-size: calc(100% + var(--helix-border-thin) * 2);
-inline-size: calc(100% + var(--helix-border-thin) * 2);
-left: calc(var(--helix-border-thin) * -1);
-overflow: visible;
-pointer-events: none;
-position: absolute;
-top: calc(var(--helix-border-thin) * -1);
-}
-
-[part="outline"] polygon {
-fill: var(--canvas-node-background-color, var(--helix-color-surface));
-stroke: var(--_canvas-card-color);
-stroke-width: var(--helix-border-thin);
-}
-
-:host([shape="diamond"][material="glass"]) [part="outline"] polygon {
-fill: var(--helix-material-translucent);
-}
-
-:host([shape="diamond"][material="frosted"]) [part="outline"] polygon {
-fill: var(--helix-material-translucent-strong);
-}
-
-:host([shape="diamond"][material="transparent"]) [part="outline"] polygon {
-fill: transparent;
-}
-
-:host([shape="diamond"][separation="filled"]) [part="outline"] polygon {
-fill: color-mix(in oklab, var(--_canvas-card-color) 16%, var(--helix-color-surface));
-stroke: transparent;
-}
-
-:host([shape="diamond"][separation="plain"]) [part="outline"] polygon {
-fill: transparent;
-stroke: transparent;
-}
-
-:host([shape="diamond"]:state(selected)),
-:host([shape="diamond"]:state(target)) {
-box-shadow: none;
-outline: none;
-}
-
-:host([shape="diamond"]:state(selected)) [part="outline"] polygon,
-:host([shape="diamond"]:state(target)) [part="outline"] polygon {
-stroke: var(--helix-color-accent);
-stroke-width: var(--helix-border-thick);
-}
-
-:host([shape="diamond"]:not([group])) [part="node"] {
-align-items: center;
-padding-inline: 22%;
-position: relative;
-text-align: center;
-}`);
+:host([shape="diamond"]) [part~="move"] {inset-block-start: calc(var(--canvas-move-inset, var(--helix-space-xs)) * 2);inset-inline: 0;margin-inline: auto;}:host([shape="square"]:not([group])) {border-radius: 0;}:host([shape="pill"]:not([group])) {border-radius: var(--helix-radii-full);}:host([shape="circle"]:not([group])) {border-radius: 50%;}:host([shape="pill"]:not([group])) [part="node"],
+:host([shape="circle"]:not([group])) [part="node"] {align-items: center;padding-inline: 15%;text-align: center;}:host([shape="diamond"]:not([group])) {backdrop-filter: none;background-color: transparent;border-color: transparent;--canvas-node-shadow: none;}[part="outline"] {block-size: calc(100% + var(--helix-border-thin) * 2);inline-size: calc(100% + var(--helix-border-thin) * 2);left: calc(var(--helix-border-thin) * -1);overflow: visible;pointer-events: none;position: absolute;top: calc(var(--helix-border-thin) * -1);}[part="outline"] polygon {fill: var(--canvas-node-background-color, var(--helix-color-surface));stroke: var(--_canvas-card-color);stroke-width: var(--helix-border-thin);}:host([shape="diamond"][material="glass"]) [part="outline"] polygon {fill: var(--helix-material-translucent);}:host([shape="diamond"][material="frosted"]) [part="outline"] polygon {fill: var(--helix-material-translucent-strong);}:host([shape="diamond"][material="transparent"]) [part="outline"] polygon {fill: transparent;}:host([shape="diamond"][separation="filled"]) [part="outline"] polygon {fill: color-mix(in oklab, var(--_canvas-card-color) 16%, var(--helix-color-surface));stroke: transparent;}:host([shape="diamond"][separation="plain"]) [part="outline"] polygon {fill: transparent;stroke: transparent;}:host([shape="diamond"]:state(selected)),
+:host([shape="diamond"]:state(target)) {box-shadow: none;outline: none;}:host([shape="diamond"]:state(selected)) [part="outline"] polygon,
+:host([shape="diamond"]:state(target)) [part="outline"] polygon {stroke: var(--helix-color-accent);stroke-width: var(--helix-border-thick);}:host([shape="diamond"]:not([group])) [part="node"] {align-items: center;padding-inline: 22%;position: relative;text-align: center;}`);

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

@@ -10,6 +10,9 @@ import type { CSSResultGroup } from 'lit';
  * Before the board places it, the card sits in normal flow. Without JavaScript,
  * the page shows the cards' text in the order it was written.
  *
+ * On a touch screen, the points and corners of the card with focus take a
+ * reach 44 pixels across, so a finger can start a connection from one.
+ *
  * @since 0.100.0
  * @status experimental
  * @category media
@@ -23,7 +26,9 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --canvas-move-inset - The distance between the move handle and the card's corner.
  * @cssproperty --canvas-node-background-color - The card's background.
  * @cssproperty --canvas-node-color - A color for the card that carries no meaning, such as a hex color from a document. Use it when no tone fits.
+ * @cssproperty --canvas-node-font-size - The size of the card's text.
  * @cssproperty --canvas-node-padding - The space between the card's edge and its content.
+ * @cssproperty --canvas-node-radius - The card's corners. A `shape` draws its own.
  * @cssproperty --canvas-node-shadow - The shadow under the card, set by `separation="elevated"`.
  */
 export declare class HelixCanvasNode extends HelixHeadlessCanvasNode {