@fusion.dev/helix 0.0.0-dev

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

@@ -0,0 +1,66 @@
+import { HelixHeadlessTag } from '@fusion.dev/helix-headless/tag';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary Labels content with a short piece of metadata.
+ *
+ * @description
+ * Five tones. The fill is a tint of the status color, mixed with
+ * `color-mix` rather than held as a token per status, so a theme that changes
+ * the status colors gets the tints with them.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category markers
+ * @aliases Chip, Pill, Label
+ * @documentation https://helix.fusion.dev/components/tag
+ *
+ * @slot - The tag's label.
+ *
+ * @event {HelixDismissEvent} helix-dismiss - Fired when the reader asks to remove the tag. Cancelable: refusing it takes the decision and nothing moves.
+ *
+ * @csspart dismiss - The remove button, when `dismissible`.
+ *
+ * @cssproperty --tag-background-color - Fill behind the tag.
+ * @cssproperty --tag-border-color - Color of the edge, for a chip that separates by fill alone.
+ * @cssproperty --tag-foreground-color - Label color.
+ * @cssproperty --tag-radius - Corner radius of the tag.
+ */
+export declare class HelixTag extends HelixHeadlessTag {
+    /**
+     * Which status the tag reports.
+     *
+     * This was called `appearance`, and it never was one. `tone` is semantic
+     * color, which is what these are and what `helix-text` already calls them.
+     * One axis was wearing the other's name, and the axis it should have held did
+     * not exist.
+     *
+     * **Written before there was a registry, and it turned out to be the first
+     * instance of a general fault rather than a local one.** `appearance` was not
+     * a treatment either: it held four different questions across 21 components,
+     * and this file found one of them the hard way. The rest is `check:axes`.
+     */
+    tone?: 'accent' | 'danger' | 'info' | 'neutral' | 'primary' | 'success' | 'warning';
+    /**
+     * How much of the tone the tag wears.
+     *
+     * - `subtle` is the default: a wash of the tone with the label in it, for a
+     *   tag that labels something rather than warning about it.
+     * - `solid` fills with the tone and puts the label on top of it, for the one
+     *   that has to be seen first.
+     * - `outlined` is the tone at its edge only, for a dense set where filling
+     *   each of them turns a list into a mosaic.
+     *
+     * Independent of `tone` on purpose: an outlined danger tag and a solid danger
+     * tag are both sensible, and until these were two properties you could ask
+     * for neither, because color and fill were welded together. Which is the same
+     * test the whole axis registry answers to, arrived at here first and one
+     * component at a time.
+     */
+    emphasis?: 'outlined' | 'solid' | 'subtle';
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-tag': HelixTag;
+    }
+}

package/dist/tag/root/tag-root.js

@@ -0,0 +1,48 @@
+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 { HelixHeadlessTag } from '@fusion.dev/helix-headless/tag';
+import { property } from 'lit/decorators.js';
+import { styles } from './tag-root.css.js';
+/**
+ * @summary Labels content with a short piece of metadata.
+ *
+ * @description
+ * Five tones. The fill is a tint of the status color, mixed with
+ * `color-mix` rather than held as a token per status, so a theme that changes
+ * the status colors gets the tints with them.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category markers
+ * @aliases Chip, Pill, Label
+ * @documentation https://helix.fusion.dev/components/tag
+ *
+ * @slot - The tag's label.
+ *
+ * @event {HelixDismissEvent} helix-dismiss - Fired when the reader asks to remove the tag. Cancelable: refusing it takes the decision and nothing moves.
+ *
+ * @csspart dismiss - The remove button, when `dismissible`.
+ *
+ * @cssproperty --tag-background-color - Fill behind the tag.
+ * @cssproperty --tag-border-color - Color of the edge, for a chip that separates by fill alone.
+ * @cssproperty --tag-foreground-color - Label color.
+ * @cssproperty --tag-radius - Corner radius of the tag.
+ */
+let HelixTag = class HelixTag extends HelixHeadlessTag {
+    static { this.styles = styles; }
+};
+__decorate([
+    property({ reflect: true })
+], HelixTag.prototype, "tone", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixTag.prototype, "emphasis", void 0);
+HelixTag = __decorate([
+    customElement('helix-tag')
+], HelixTag);
+export { HelixTag };

package/dist/text/index.d.ts

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

package/dist/text/index.js

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

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

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

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

@@ -0,0 +1,113 @@
+// Generated from src/text/root/text-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: inline;
+}
+
+:host([as="p"]),
+:host([as="h1"]),
+:host([as="h2"]),
+:host([as="h3"]),
+:host([as="h4"]),
+:host([as="h5"]),
+:host([as="h6"]) {
+display: block;
+}
+
+:host([variant="display"]),
+:host(:not([variant])[as="h1"]) {
+font-family: var(--helix-font-display);
+font-size: var(--helix-text-3xl);
+font-weight: var(--helix-weight-semibold);
+letter-spacing: var(--helix-tracking-tight);
+line-height: var(--helix-leading-heading);
+}
+
+:host([variant="heading"]),
+:host(:not([variant])[as="h2"]) {
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-2xl);
+font-weight: var(--helix-weight-semibold);
+letter-spacing: var(--helix-tracking-tight);
+line-height: var(--helix-leading-heading);
+}
+
+:host([variant="subheading"]),
+:host(:not([variant])[as="h3"]) {
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-xl);
+font-weight: var(--helix-weight-semibold);
+letter-spacing: var(--helix-tracking-tight);
+line-height: var(--helix-leading-heading);
+}
+
+:host([variant="title"]),
+:host(:not([variant])[as="h4"]) {
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-lg);
+font-weight: var(--helix-weight-semibold);
+letter-spacing: var(--helix-tracking-normal);
+line-height: var(--helix-leading-heading);
+}
+
+:host([variant="body"]) {
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-md);
+font-weight: var(--helix-weight-regular);
+letter-spacing: var(--helix-tracking-normal);
+line-height: var(--helix-leading-normal);
+}
+
+:host([variant="body-strong"]),
+:host(:not([variant])[as="h5"]),
+:host(:not([variant])[as="h6"]),
+:host(:not([variant])[as="strong"]) {
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-md);
+font-weight: var(--helix-weight-medium);
+letter-spacing: var(--helix-tracking-normal);
+line-height: var(--helix-leading-normal);
+}
+
+:host([variant="caption"]) {
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-sm);
+font-weight: var(--helix-weight-regular);
+letter-spacing: var(--helix-tracking-normal);
+line-height: var(--helix-leading-normal);
+}
+
+:host([variant="label"]),
+:host(:not([variant])[as="label"]) {
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-xs);
+font-weight: var(--helix-weight-medium);
+letter-spacing: var(--helix-tracking-wide);
+line-height: var(--helix-leading-normal);
+}
+
+:host([variant="code"]),
+:host(:not([variant])[as="code"]) {
+font-family: var(--helix-font-mono);
+font-size: var(--helix-text-xs);
+font-weight: var(--helix-weight-regular);
+letter-spacing: var(--helix-tracking-normal);
+line-height: var(--helix-leading-normal);
+}
+
+[part="text"] {
+color: inherit;
+font: inherit;
+letter-spacing: inherit;
+margin: var(--helix-space-none);
+}
+
+:host([as="em"]) [part="text"] {
+font-style: italic;
+}
+
+@media print {
+:host {
+box-shadow: none;
+}
+}`);

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

@@ -0,0 +1,83 @@
+import { HelixElement } from '@fusion.dev/helix-core';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary A run of text, with the element and the look chosen separately.
+ *
+ * @description
+ * Two properties, and they answer different questions. `as` is the element,
+ * which decides the document outline and what a screen reader announces.
+ * `variant` is the ramp, which decides size, weight, leading, and tracking
+ * together.
+ *
+ * They are separate because they genuinely come apart: a section's second
+ * heading sometimes has to look smaller without lying about the outline, and a
+ * `<p>` sometimes has to read as a caption. They default to matching, so the
+ * common case is `as="h2"` and nothing else.
+ *
+ * The pairing is resolved in CSS rather than by computing an attribute, so the
+ * element writes nothing to its own host: `as="h2"` picks up the heading ramp
+ * through a selector, and setting `variant` takes the pairing rule out of
+ * play. Deriving it in `willUpdate` worked, but it put an attribute on the host
+ * that the server's markup did not have, which is a hydration mismatch in every
+ * React consumer.
+ *
+ * **Size, weight, and leading are not properties.** Exposing them separately
+ * offers a few hundred combinations of which a handful are right, and every
+ * caller then picks one. A ramp is a decision the system already made:
+ * the ramp is named, and a page built from it is consistent because there was
+ * nothing else to choose.
+ *
+ * `tone` stays separate, because color carries state rather than typography.
+ * Folding it in would mean `caption-danger` and `label-primary` and the rest of
+ * cross product, which is the explosion a named ramp exists to prevent.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category typography
+ * @aliases Paragraph, Copy, Label, Caption, Heading, Title
+ * @documentation https://helix.fusion.dev/components/text
+ *
+ * @slot - The text.
+ *
+ * @csspart text - The rendered element.
+ */
+export declare class HelixText extends HelixElement {
+    /**
+     * Which element to render.
+     *
+     * Decides the outline and the semantics.
+     */
+    as?: 'span' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'strong' | 'em' | 'code' | 'label';
+    /**
+     * Type treatment.
+     *
+     * Defaults to the one that matches `as`.
+     */
+    variant?: 'display' | 'heading' | 'subheading' | 'title' | 'body' | 'body-strong' | 'caption' | 'label' | 'code';
+    /**
+     * Color role. A separate axis from the type ramp, because color carries
+     * state: folding it in would mean `caption-danger` and the rest of the cross
+     * product.
+     *
+     * **`default` is gone, having been styled nowhere.** It matched no rule and
+     * fell through to the inherited ink, so it read as working while saying
+     * nothing, which is the same shape as the `shadow` an example wrote at Video.
+     * The resting case is the absent attribute.
+     *
+     * **`muted` and `subtle` are weight rather than meaning and belong on
+     * `emphasis`, which is why this is still off the registry.** Splitting them
+     * out is blocked on the palette rather than on the rename: there is a quiet
+     * step for the neutral ink and none for any other tone, so a muted danger has
+     * nothing to be made of. `primary-subtle` is a tinted *ground* and not a
+     * quiet ink. That is #141's to derive, and until it does, folding the two
+     * halves apart would leave three of the four combinations unsayable.
+     */
+    tone?: 'muted' | 'subtle' | 'primary' | 'danger';
+    protected render(): unknown;
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-text': HelixText;
+    }
+}

package/dist/text/root/text-root.js

@@ -0,0 +1,92 @@
+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 { property } from 'lit/decorators.js';
+import { literal, html as staticHtml } from 'lit/static-html.js';
+import { styles } from './text-root.css.js';
+/** Tags this may render. Static values, so they can be interpolated as a tag. */
+const TAGS = {
+    code: literal `code`,
+    em: literal `em`,
+    h1: literal `h1`,
+    h2: literal `h2`,
+    h3: literal `h3`,
+    h4: literal `h4`,
+    h5: literal `h5`,
+    h6: literal `h6`,
+    label: literal `label`,
+    p: literal `p`,
+    span: literal `span`,
+    strong: literal `strong`,
+};
+/**
+ * @summary A run of text, with the element and the look chosen separately.
+ *
+ * @description
+ * Two properties, and they answer different questions. `as` is the element,
+ * which decides the document outline and what a screen reader announces.
+ * `variant` is the ramp, which decides size, weight, leading, and tracking
+ * together.
+ *
+ * They are separate because they genuinely come apart: a section's second
+ * heading sometimes has to look smaller without lying about the outline, and a
+ * `<p>` sometimes has to read as a caption. They default to matching, so the
+ * common case is `as="h2"` and nothing else.
+ *
+ * The pairing is resolved in CSS rather than by computing an attribute, so the
+ * element writes nothing to its own host: `as="h2"` picks up the heading ramp
+ * through a selector, and setting `variant` takes the pairing rule out of
+ * play. Deriving it in `willUpdate` worked, but it put an attribute on the host
+ * that the server's markup did not have, which is a hydration mismatch in every
+ * React consumer.
+ *
+ * **Size, weight, and leading are not properties.** Exposing them separately
+ * offers a few hundred combinations of which a handful are right, and every
+ * caller then picks one. A ramp is a decision the system already made:
+ * the ramp is named, and a page built from it is consistent because there was
+ * nothing else to choose.
+ *
+ * `tone` stays separate, because color carries state rather than typography.
+ * Folding it in would mean `caption-danger` and `label-primary` and the rest of
+ * cross product, which is the explosion a named ramp exists to prevent.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category typography
+ * @aliases Paragraph, Copy, Label, Caption, Heading, Title
+ * @documentation https://helix.fusion.dev/components/text
+ *
+ * @slot - The text.
+ *
+ * @csspart text - The rendered element.
+ */
+let HelixText = class HelixText extends HelixElement {
+    render() {
+        /* `Object.hasOwn`, not a truthy index.
+         *
+         * `TAGS[this.as]` reaches `Object.prototype`, so `as="constructor"` and
+         * every other inherited key came back truthy and were passed to
+         * `staticHtml` as a tag: the result is a lit marker rendered as an element
+         * name, not the span fallback and not a throw. Own keys only. */
+        const tag = (this.as && Object.hasOwn(TAGS, this.as) ? TAGS[this.as] : undefined) ?? literal `span`;
+        return staticHtml `<${tag} part="text"><slot></slot></${tag}>`;
+    }
+    static { this.styles = styles; }
+};
+__decorate([
+    property({ reflect: true })
+], HelixText.prototype, "as", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixText.prototype, "variant", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixText.prototype, "tone", void 0);
+HelixText = __decorate([
+    customElement('helix-text')
+], HelixText);
+export { HelixText };

package/dist/textarea/index.d.ts

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

package/dist/textarea/index.js

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

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

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

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

@@ -0,0 +1,79 @@
+// Generated from src/textarea/root/textarea-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="field"] {
+background-color: var(--textarea-background-color, var(--helix-color-well));
+border: var(--helix-border-thin) solid var(--helix-color-border);
+border-radius: var(--helix-radii-sm);
+display: flex;
+padding: var(--helix-space-xs);
+transition:
+border-color var(--helix-duration-fast) var(--helix-easing-standard),
+background-color var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+: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(: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);
+}
+
+[part="control"] {
+all: unset;
+
+box-sizing: border-box;
+overflow-wrap: break-word;
+color: var(--helix-color-foreground);
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-sm);
+font-weight: var(--helix-weight-medium);
+inline-size: 100%;
+line-height: var(--helix-leading-normal);
+
+resize: vertical;
+}
+
+:host([auto-grow]) [part="control"] {
+overflow: hidden;
+resize: none;
+}
+
+:host(:disabled) [part="field"] {
+cursor: not-allowed;
+opacity: 0.5;
+}
+
+:host([readonly]) [part="field"] {
+background-color: transparent;
+}
+
+@media (prefers-reduced-motion: reduce) {
+[part="field"] {
+transition: none;
+}
+}
+
+@media print {
+:host {
+box-shadow: none;
+print-color-adjust: exact;
+}
+}`);

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

@@ -0,0 +1,27 @@
+import { HelixHeadlessTextarea } from '@fusion.dev/helix-headless/textarea';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary Several lines of text a reader types into.
+ *
+ * @description
+ * The same frame an `Input` wears, so a form of mixed fields reads as one set
+ * rather than as two kinds of box. What differs is the resize handle, which is
+ * the platform's and is left alone on the block axis only: a field that can be
+ * dragged wider than the form holding it is a field that breaks the layout.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category forms
+ * @aliases Multiline, TextArea
+ * @documentation https://helix.fusion.dev/components/textarea
+ *
+ * @cssproperty --textarea-background-color - Fill behind the text.
+ */
+export declare class HelixTextarea extends HelixHeadlessTextarea {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-textarea': HelixTextarea;
+    }
+}

package/dist/textarea/root/textarea-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 { HelixHeadlessTextarea } from '@fusion.dev/helix-headless/textarea';
+import { styles as fieldStyles } from '../../shared/field/field.css.js';
+import { styles as fieldStackedStyles } from '../../shared/field/field-stacked.css.js';
+import { styles } from './textarea-root.css.js';
+/**
+ * @summary Several lines of text a reader types into.
+ *
+ * @description
+ * The same frame an `Input` wears, so a form of mixed fields reads as one set
+ * rather than as two kinds of box. What differs is the resize handle, which is
+ * the platform's and is left alone on the block axis only: a field that can be
+ * dragged wider than the form holding it is a field that breaks the layout.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category forms
+ * @aliases Multiline, TextArea
+ * @documentation https://helix.fusion.dev/components/textarea
+ *
+ * @cssproperty --textarea-background-color - Fill behind the text.
+ */
+let HelixTextarea = class HelixTextarea extends HelixHeadlessTextarea {
+    static { this.styles = [fieldStyles, fieldStackedStyles, styles]; }
+};
+HelixTextarea = __decorate([
+    customElement('helix-textarea')
+], HelixTextarea);
+export { HelixTextarea };

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

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

package/dist/time-input/index.js

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

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

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