@fusion.dev/helix 0.0.0-dev

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

@@ -0,0 +1,30 @@
+// Generated from src/checkbox-group/root/checkbox-group-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: flex;
+flex-direction: column;
+gap: var(--helix-space-2xs);
+}
+
+[part="items"] {
+display: flex;
+flex-direction: column;
+gap: var(--checkbox-group-gap, var(--helix-space-xs));
+}
+
+:host([orientation="horizontal"]) [part="items"] {
+column-gap: var(--checkbox-group-gap, var(--helix-space-md));
+flex-direction: row;
+flex-wrap: wrap;
+}
+
+:host(:state(invalid)) [part="items"] {
+--checkbox-border-color: var(--helix-color-danger);
+}
+
+@media print {
+:host {
+box-shadow: none;
+print-color-adjust: exact;
+}
+}`);

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

@@ -0,0 +1,29 @@
+import { HelixHeadlessCheckboxGroup } from '@fusion.dev/helix-headless/checkbox-group';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary Groups related checkboxes, and reports them as one set.
+ *
+ * @description
+ * A column by default, which is what a list of choices wants: the eye scans one
+ * line per answer rather than hunting along a row.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category forms
+ * @aliases Checkbox list, Multi-select
+ * @documentation https://helix.fusion.dev/components/checkbox-group
+ *
+ * @cssproperty --checkbox-group-gap - Space between the boxes.
+ */
+export declare class HelixCheckboxGroup extends HelixHeadlessCheckboxGroup {
+    /**
+     * Which way the boxes run.
+     */
+    orientation?: 'horizontal';
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-checkbox-group': HelixCheckboxGroup;
+    }
+}

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

@@ -0,0 +1,37 @@
+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 { HelixHeadlessCheckboxGroup } from '@fusion.dev/helix-headless/checkbox-group';
+import { property } from 'lit/decorators.js';
+import { styles as fieldStyles } from '../../shared/field/field.css.js';
+import { styles as fieldStackedStyles } from '../../shared/field/field-stacked.css.js';
+import { styles } from './checkbox-group-root.css.js';
+/**
+ * @summary Groups related checkboxes, and reports them as one set.
+ *
+ * @description
+ * A column by default, which is what a list of choices wants: the eye scans one
+ * line per answer rather than hunting along a row.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category forms
+ * @aliases Checkbox list, Multi-select
+ * @documentation https://helix.fusion.dev/components/checkbox-group
+ *
+ * @cssproperty --checkbox-group-gap - Space between the boxes.
+ */
+let HelixCheckboxGroup = class HelixCheckboxGroup extends HelixHeadlessCheckboxGroup {
+    static { this.styles = [fieldStyles, fieldStackedStyles, styles]; }
+};
+__decorate([
+    property({ reflect: true })
+], HelixCheckboxGroup.prototype, "orientation", void 0);
+HelixCheckboxGroup = __decorate([
+    customElement('helix-checkbox-group')
+], HelixCheckboxGroup);
+export { HelixCheckboxGroup };

package/dist/code/index.d.ts

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

package/dist/code/index.js

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

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

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

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

@@ -0,0 +1,30 @@
+// Generated from src/code/root/code-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: inline;
+}
+
+[part="code"] {
+
+background-color: color-mix(in oklab, var(--helix-color-foreground) 6%, transparent);
+border-radius: var(--helix-radii-sm);
+
+color: color-mix(
+in oklab,
+var(--helix-color-foreground) 30%,
+var(--helix-color-foreground-muted)
+);
+font-family: var(--helix-font-mono);
+
+font-size: var(--code-size, calc(var(--helix-text-sm) / var(--helix-text-md) * 1em));
+padding-block: var(--helix-space-none);
+
+padding-inline: var(--code-padding, calc(var(--helix-space-2xs) * 0.5));
+}
+
+@media print {
+:host {
+background-color: transparent;
+box-shadow: none;
+}
+}`);

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

@@ -0,0 +1,27 @@
+import { HelixHeadlessCode } from '@fusion.dev/helix-headless/code';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary A fragment of code inside a line of prose.
+ *
+ * @description
+ * A step down the scale, because a monospace face reads larger than the prose
+ * around it at the same nominal size. `--code-size` overrides it.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category typography
+ * @documentation https://helix.fusion.dev/components/code
+ *
+ * @cssproperty --code-padding - Space either side of the fragment. Defaults to half
+ * of `space-2xs`, which is what keeps a bracket beside the chip rather than a space
+ * away from it.
+ * @cssproperty --code-size - The fragment's size. Defaults to `text-sm`.
+ */
+export declare class HelixCode extends HelixHeadlessCode {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-code': HelixCode;
+    }
+}

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

@@ -0,0 +1,33 @@
+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 { HelixHeadlessCode } from '@fusion.dev/helix-headless/code';
+import { styles } from './code-root.css.js';
+/**
+ * @summary A fragment of code inside a line of prose.
+ *
+ * @description
+ * A step down the scale, because a monospace face reads larger than the prose
+ * around it at the same nominal size. `--code-size` overrides it.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category typography
+ * @documentation https://helix.fusion.dev/components/code
+ *
+ * @cssproperty --code-padding - Space either side of the fragment. Defaults to half
+ * of `space-2xs`, which is what keeps a bracket beside the chip rather than a space
+ * away from it.
+ * @cssproperty --code-size - The fragment's size. Defaults to `text-sm`.
+ */
+let HelixCode = class HelixCode extends HelixHeadlessCode {
+    static { this.styles = styles; }
+};
+HelixCode = __decorate([
+    customElement('helix-code')
+], HelixCode);
+export { HelixCode };

package/dist/code-block/index.d.ts

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

package/dist/code-block/index.js

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

package/dist/code-block/root/code-block-root.css.d.ts

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

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

@@ -0,0 +1,84 @@
+// Generated from src/code-block/root/code-block-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: flex;
+flex-direction: column;
+}
+
+[part="frame"] {
+flex: 1;
+}
+
+[part="header"] {
+align-items: center;
+
+backdrop-filter: var(--code-block-backdrop, none);
+background-color: var(--code-block-header-background-color, var(--helix-color-surface-raised));
+border: var(--helix-border-thin) solid var(--code-block-border-color, var(--helix-color-border));
+border-end-end-radius: var(--helix-radii-none);
+border-end-start-radius: var(--helix-radii-none);
+
+border-start-end-radius: var(--code-block-radius, var(--helix-radii-lg));
+border-start-start-radius: var(--code-block-radius, var(--helix-radii-lg));
+display: flex;
+
+padding-block: var(--helix-space-xs);
+padding-inline: var(--helix-space-md);
+}
+
+[part="label"] {
+color: var(--helix-color-foreground-muted);
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-xs);
+font-weight: var(--helix-weight-medium);
+}
+
+[part="frame"] {
+position: relative;
+}
+
+[part="block"] {
+block-size: 100%;
+}
+
+[part="copy"] {
+inset-block-start: var(--helix-space-2xs);
+inset-inline-end: var(--helix-space-2xs);
+position: absolute;
+}
+
+[part="block"] {
+
+backdrop-filter: var(--code-block-backdrop, none);
+background-color: var(--code-block-background-color, var(--helix-color-background));
+border: var(--helix-border-thin) solid var(--code-block-border-color, var(--helix-color-border));
+border-radius: var(--code-block-radius, var(--helix-radii-lg));
+margin: var(--helix-space-none);
+overflow-x: auto;
+padding-block: var(--helix-space-sm);
+padding-inline: var(--helix-space-md);
+}
+
+:host(:not([no-copy])) [part="block"] {
+padding-inline-end: calc(var(--helix-size-control) + var(--helix-space-sm));
+}
+
+[part="header"] + [part="frame"] [part="block"] {
+border-block-start-width: var(--helix-space-none);
+border-start-end-radius: var(--helix-radii-none);
+border-start-start-radius: var(--helix-radii-none);
+}
+
+[part="code"] {
+color: var(--helix-color-foreground);
+font-family: var(--helix-font-mono);
+font-size: var(--helix-text-sm);
+line-height: var(--helix-leading-normal);
+}
+
+@media print {
+:host {
+background-color: transparent;
+box-shadow: none;
+}
+}`);

package/dist/code-block/root/code-block-root.d.ts

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

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

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

package/dist/color-input/index.d.ts

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

package/dist/color-input/index.js

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

package/dist/color-input/root/color-input-root.css.d.ts

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

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

@@ -0,0 +1,193 @@
+// Generated from src/color-input/root/color-input-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: block;
+}
+
+[part="field"] {
+align-items: center;
+background-color: var(--color-input-background-color, var(--helix-color-well));
+block-size: var(--helix-size-control);
+border: var(--helix-border-thin) solid var(--helix-color-border);
+border-radius: var(--helix-radii-sm);
+display: flex;
+gap: var(--helix-space-2xs);
+overflow: hidden;
+padding-inline-start: var(--helix-space-xs);
+transition:
+background-color var(--helix-duration-fast) var(--helix-easing-standard),
+border-color var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+[part="control"] {
+all: unset;
+box-sizing: border-box;
+color: var(--helix-color-foreground);
+flex: 1 1 auto;
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-md);
+font-weight: var(--helix-weight-medium);
+min-inline-size: 0;
+}
+
+:host(:not(:disabled)) [part="field"]:hover {
+border-color: var(--helix-color-primary);
+}
+
+:host(:focus-within) [part="field"],
+:host(:focus-within) [part="field"]:hover {
+border-color: var(--helix-color-primary);
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: 0;
+}
+
+:host(:disabled) [part="field"] {
+color: var(--helix-color-foreground-subtle);
+}
+
+[part="trigger"] {
+align-items: stretch;
+all: unset;
+align-self: stretch;
+box-sizing: border-box;
+cursor: pointer;
+display: flex;
+flex: none;
+}
+
+[part="trigger"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: calc(var(--helix-size-focus-ring) * -1);
+}
+
+:host(:disabled) [part="trigger"] {
+cursor: not-allowed;
+}
+
+[part="preview"] {
+background-image:
+linear-gradient(var(--color-input-swatch, transparent), var(--color-input-swatch, transparent)),
+conic-gradient(
+var(--helix-color-surface-sunken) 0 25%,
+var(--helix-color-surface) 0 50%,
+var(--helix-color-surface-sunken) 0 75%,
+var(--helix-color-surface) 0
+);
+background-size:
+100% 100%,
+var(--helix-space-sm) var(--helix-space-sm);
+border-inline-start: var(--helix-border-thin) solid var(--helix-color-border);
+box-sizing: border-box;
+display: block;
+inline-size: var(--helix-size-control);
+}
+
+[part="surface"] {
+background-color: var(--helix-color-surface-overlay);
+border: var(--color-input-border-width, var(--helix-border-floating)) solid
+var(--color-input-border-color, var(--helix-color-border));
+border-radius: var(--helix-radii-sm);
+box-shadow: var(--color-input-shadow, var(--helix-shadow-floating));
+inline-size: var(--color-input-panel-size, 264px);
+inset: auto;
+margin: var(--helix-space-none);
+overflow: hidden;
+padding: var(--helix-space-none);
+position: absolute;
+}
+
+[part="picker"] {
+--color-picker-grid-radius: var(--helix-radii-none);
+--color-picker-padding: var(--helix-space-sm);
+
+display: block;
+}
+
+[part="surface"] {
+--_travel: calc(var(--helix-space-2xs) * -1);
+opacity: 0;
+scale: 0.96;
+transform: translateY(var(--_travel));
+transition:
+opacity var(--helix-duration-fast) var(--helix-easing-standard),
+scale var(--helix-duration-fast) var(--helix-easing-emphasized),
+transform var(--helix-duration-fast) var(--helix-easing-emphasized),
+display var(--helix-duration-fast) allow-discrete,
+overlay var(--helix-duration-fast) allow-discrete;
+}
+
+[part="surface"][data-placement^="top"] {
+--_travel: var(--helix-space-2xs);
+transform-origin: var(--floating-arrow-x, 50%) 100%;
+}
+
+[part="surface"][data-placement^="bottom"] {
+transform-origin: var(--floating-arrow-x, 50%) 0;
+}
+
+[part="surface"][data-placed] {
+opacity: 1;
+scale: 1;
+transform: none;
+}
+
+[part="surface"][hidden] {
+display: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+[part="field"] {
+transition: none;
+}
+
+[part="surface"],
+[part="surface"][data-placed] {
+scale: 1;
+transform: none;
+transition: none;
+}
+}
+
+:host([variant="swatch"]) [part="field"] {
+background-color: transparent;
+border: none;
+inline-size: max-content;
+padding-inline: var(--helix-space-none);
+}
+
+:host([variant="swatch"]) [part="trigger"] {
+block-size: var(--color-input-swatch-size, var(--helix-size-control));
+inline-size: var(--color-input-swatch-size, var(--helix-size-control));
+}
+
+:host([variant="swatch"]:focus-within) [part="field"] {
+outline: none;
+}
+
+:host([variant="swatch"]) [part="preview"] {
+block-size: 100%;
+border: var(--helix-border-thin) solid var(--helix-color-border);
+border-radius: var(--color-input-swatch-radius, var(--helix-radii-sm));
+inline-size: 100%;
+}
+
+:host(:state(invalid)) [part="field"],
+:host(:state(invalid)) [part="field"]:hover,
+:host(:state(invalid):focus-within) [part="field"],
+:host(:state(invalid):focus-within) [part="field"]:hover {
+border-color: var(--helix-color-danger);
+outline-color: var(--helix-color-danger);
+}
+
+slot[name="start"]::slotted(*),
+slot[name="end"]::slotted(*) {
+color: var(--helix-color-foreground-subtle);
+flex: 0 0 auto;
+}
+
+@media print {
+:host {
+box-shadow: none;
+print-color-adjust: exact;
+}
+}`);

package/dist/color-input/root/color-input-root.d.ts

@@ -0,0 +1,50 @@
+import { HelixHeadlessColorInput } from '@fusion.dev/helix-headless/color-input';
+import type { CSSResultGroup } from 'lit';
+import '../../color-picker/index.js';
+/**
+ * @summary A color, typed in any syntax or picked from a panel.
+ *
+ * @description
+ * The frame is the field rather than the input, so the trigger sits inside the
+ * same box as the text and the focus ring is drawn once around the whole
+ * control.
+ *
+ * **The trigger fills the trailing end rather than sitting in it as an icon.** A
+ * color field has one thing to show and it is a color, so the swatch takes the
+ * height of the control and reads as a block of it. It is the one field here
+ * whose trailing affordance is the value itself: Date Input's calendar mark
+ * stands for an action, and an action stretched to field height is a large icon
+ * and nothing more.
+ *
+ * **The panel has no padding, and clips instead.** The square runs to its edge
+ * and takes the panel's rounded corners from being clipped by it, rather than
+ * sitting inset with a band of overlay showing on all four sides. The picker
+ * pads its own lower rows.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category forms
+ * @aliases ColorField, ColourInput, InputColor
+ * @documentation https://helix.fusion.dev/components/color-input
+ *
+ * @cssproperty --color-input-background-color - Fill behind the field.
+ * @cssproperty --color-input-border-color - Color of the panel's edge.
+ * @cssproperty --color-input-border-width - Width of the panel's edge. Follows
+ *   `--helix-border-floating`, which is `0`, so the panel is told apart by its lift unless a
+ *   theme says otherwise.
+ * @cssproperty --color-input-panel-size - Width of the panel, and so of the square.
+ * @cssproperty --color-input-shadow - Lift under the panel. Follows
+ *   `--helix-shadow-floating`: a floating surface sits over content nobody can predict, so it
+ *   keeps a lift by default.
+ * @cssproperty --color-input-swatch-radius - Corner radius of that block.
+ * @cssproperty --color-input-swatch-size - Edge length of the block in `appearance="swatch"`.
+ */
+export declare class HelixColorInput extends HelixHeadlessColorInput {
+    static tier: string;
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-color-input': HelixColorInput;
+    }
+}