@fusion.dev/helix 0.0.0-dev

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

@@ -0,0 +1,71 @@
+import { HelixHeadlessSelect } from '@fusion.dev/helix-headless/select';
+import type { CSSResultGroup } from 'lit';
+import '../../listbox/index.js';
+import '../../option/index.js';
+/**
+ * @summary A closed list that opens to be chosen from.
+ *
+ * @description
+ * The trigger wears the same frame as an `Input`, because in a form it stands
+ * in a row with them and a control that looks like a button among fields reads
+ * as an action rather than an answer.
+ *
+ * The panel is an overlay surface rather than a sunken one: it sits over the
+ * page instead of on it, which is what its shadow says and what tells it apart
+ * from the field it came out of.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category forms
+ * @aliases Dropdown, Picker
+ * @documentation https://helix.fusion.dev/components/select
+ *
+ * @cssproperty --select-border-color - Color of the panel's edge.
+ * @cssproperty --select-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 --select-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 --select-surface-max-block-size - How tall the panel gets.
+ */
+export declare class HelixSelect extends HelixHeadlessSelect {
+    static tier: string;
+    static styles: CSSResultGroup;
+    /**
+     * How much ink the trigger claims.
+     *
+     * **The first field in this library to take an axis, and the case that asked
+     * for it is a control in a row rather than a control on a form.** A chat's
+     * composer wants a model picker beside an attachment button and a send button:
+     * at the field's own frame it is 40 pixels of bordered well in a line of 28
+     * pixel glyphs, and it reads as the composer's subject rather than as one of
+     * its tools. The same is true of a select in a toolbar, in a table header, or
+     * inside a sentence.
+     *
+     * - Unset is the frame an `Input` wears, which is what a form wants: a control
+     *   that looks like a button among fields reads as an action rather than an
+     *   answer.
+     * - `ghost` drops the fill and the edge, takes the width of what is in it, and
+     *   puts the mark against the value instead of at the far end of the control.
+     *
+     * **`emphasis` and not `separation`, which the registry decides rather than
+     * taste.** Emphasis is asked of controls, how loud this one is; separation is
+     * asked of containers, where the surface ends. A trigger is a control, and
+     * `check:axes` refuses a family that declares both. Two of the four values are
+     * taken: `solid` and `subtle` are a button's way of being the one thing to
+     * press, which is not a thing an answer should ever be.
+     *
+     * **The other three fields want this too and do not have it yet.** `Input`,
+     * `Textarea` and `Combobox` wear the same frame from the same shared
+     * stylesheet, and an inline one of each is as reasonable as an inline select.
+     * They are left alone rather than swept, because each has a different thing
+     * inside the frame and guessing at three is how an axis ends up meaning four
+     * things, which is the fault `appearance` was retired for.
+     */
+    emphasis?: 'ghost';
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-select': HelixSelect;
+    }
+}

package/dist/select/root/select-root.js

@@ -0,0 +1,60 @@
+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 { HelixHeadlessSelect } from '@fusion.dev/helix-headless/select';
+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 './select-root.css.js';
+/* Side-effect imports, because this renders `<helix-listbox>` in its own shadow
+   root and a custom element registers on import. Without them a consumer who
+   imported `@fusion.dev/helix/select` and nothing else got a select whose panel
+   never upgraded: an unknown element with unstyled options inside it, and no
+   error anywhere, because an unknown element is legal HTML.
+ 
+   The same rule the React wrappers follow, for the same reason. It surfaced
+   first as a spec that passed in the suite and failed alone, which is what a
+   missing registration looks like when some other file happens to supply it. */
+import '../../listbox/index.js';
+import '../../option/index.js';
+/**
+ * @summary A closed list that opens to be chosen from.
+ *
+ * @description
+ * The trigger wears the same frame as an `Input`, because in a form it stands
+ * in a row with them and a control that looks like a button among fields reads
+ * as an action rather than an answer.
+ *
+ * The panel is an overlay surface rather than a sunken one: it sits over the
+ * page instead of on it, which is what its shadow says and what tells it apart
+ * from the field it came out of.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category forms
+ * @aliases Dropdown, Picker
+ * @documentation https://helix.fusion.dev/components/select
+ *
+ * @cssproperty --select-border-color - Color of the panel's edge.
+ * @cssproperty --select-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 --select-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 --select-surface-max-block-size - How tall the panel gets.
+ */
+let HelixSelect = class HelixSelect extends HelixHeadlessSelect {
+    static { this.tier = 'helix-'; }
+    static { this.styles = [fieldStyles, fieldStackedStyles, styles]; }
+};
+__decorate([
+    property({ reflect: true })
+], HelixSelect.prototype, "emphasis", void 0);
+HelixSelect = __decorate([
+    customElement('helix-select')
+], HelixSelect);
+export { HelixSelect };

package/dist/shared/chart/series.css.d.ts

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

package/dist/shared/chart/series.css.js

@@ -0,0 +1,35 @@
+// Generated from src/shared/chart/series.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+--chart-series-1: var(--helix-color-series-1);
+--chart-series-2: var(--helix-color-series-2);
+--chart-series-3: var(--helix-color-series-3);
+--chart-series-4: var(--helix-color-series-4);
+--chart-series-5: var(--helix-color-series-5);
+--chart-series-6: var(--helix-color-series-6);
+--chart-series-7: var(--helix-color-series-7);
+--chart-series-8: var(--helix-color-series-8);
+--chart-series-9: var(--helix-color-series-9);
+--chart-series-10: var(--helix-color-series-10);
+--chart-series-11: var(--helix-color-series-11);
+--chart-series-12: var(--helix-color-series-12);
+--chart-series-13: var(--helix-color-series-13);
+--chart-series-14: var(--helix-color-series-14);
+--chart-series-15: var(--helix-color-series-15);
+--chart-series-16: var(--helix-color-series-16);
+--chart-series-17: var(--helix-color-series-17);
+--chart-series-18: var(--helix-color-series-18);
+--chart-series-19: var(--helix-color-series-19);
+--chart-series-20: var(--helix-color-series-20);
+--chart-series-21: var(--helix-color-series-21);
+--chart-series-22: var(--helix-color-series-22);
+--chart-series-23: var(--helix-color-series-23);
+--chart-series-24: var(--helix-color-series-24);
+}
+
+@media print {
+:host {
+box-shadow: none;
+print-color-adjust: exact;
+}
+}`);

package/dist/shared/chart/terminus.css.d.ts

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

package/dist/shared/chart/terminus.css.js

@@ -0,0 +1,41 @@
+// Generated from src/shared/chart/terminus.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`[part="terminus"] {
+background-color: currentColor;
+block-size: var(--chart-terminus-size, 5px);
+inline-size: var(--chart-terminus-size, 5px);
+inset-block-start: var(--chart-terminus-y);
+inset-inline-start: var(--chart-terminus-x);
+position: absolute;
+
+translate: -50% -50%;
+}
+
+[part="terminus"] {
+border-radius: var(--helix-radii-full);
+}
+
+:host([terminus="none"]) [part="terminus"] {
+display: none;
+}
+
+:host([terminus="square"]) [part="terminus"] {
+border-radius: var(--helix-radii-none);
+}
+
+:host([terminus="ring"]) [part="terminus"] {
+background-color: var(--chart-terminus-hole, transparent);
+block-size: calc(var(--chart-terminus-size, 5px) * 1.6);
+border: var(--helix-border-thick) solid currentColor;
+inline-size: calc(var(--chart-terminus-size, 5px) * 1.6);
+}
+
+:host([terminus="ring"]) {
+--_chart-terminus-inner: calc(var(--chart-terminus-size, 5px) * 0.8 - var(--helix-border-thick));
+}
+
+:host([terminus="triangle"]) [part="terminus"] {
+background-color: currentColor;
+border-radius: var(--helix-radii-none);
+clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
+}`);

package/dist/shared/field/field-inline.css.d.ts

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

package/dist/shared/field/field-inline.css.js

@@ -0,0 +1,7 @@
+// Generated from src/shared/field/field-inline.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`[part="hint"],
+[part="feedback"] {
+
+padding-inline-start: calc(var(--_field-control-inline-size, 0px) + var(--helix-space-xs));
+}`);

package/dist/shared/field/field-stacked.css.d.ts

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

package/dist/shared/field/field-stacked.css.js

@@ -0,0 +1,7 @@
+// Generated from src/shared/field/field-stacked.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`[part="label"] {
+display: block;
+
+padding-block-end: var(--helix-space-2xs);
+}`);

package/dist/shared/field/field.css.d.ts

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

package/dist/shared/field/field.css.js

@@ -0,0 +1,59 @@
+// Generated from src/shared/field/field.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`::placeholder {
+color: var(--helix-color-foreground-subtle);
+font-weight: var(--helix-weight-medium);
+}
+
+[part="label"] {
+color: var(--helix-color-foreground);
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-sm);
+font-weight: var(--helix-weight-medium);
+line-height: var(--helix-leading-tight);
+}
+
+:host([required]) [part="label"]::after {
+color: var(--helix-color-danger);
+content: "*";
+margin-inline-start: var(--helix-space-2xs);
+}
+
+[part="hint"],
+[part="feedback"] {
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-xs);
+line-height: var(--helix-leading-normal);
+margin: var(--helix-space-none);
+margin-block-start: var(--helix-space-2xs);
+}
+
+[part="hint"] {
+color: var(--helix-color-foreground-subtle);
+}
+
+[part="feedback"] {
+color: var(--helix-color-danger);
+
+font-weight: var(--helix-weight-medium);
+}
+
+:host(:disabled) [part="label"],
+:host(:disabled) [part="hint"] {
+opacity: 0.5;
+}
+
+[part="label"][data-hidden] {
+block-size: 1px;
+clip-path: inset(50%);
+inline-size: 1px;
+overflow: hidden;
+position: absolute;
+white-space: nowrap;
+}
+
+@media print {
+:host {
+box-shadow: none;
+}
+}`);

package/dist/skeleton/index.d.ts

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

package/dist/skeleton/index.js

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

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

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

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

@@ -0,0 +1,74 @@
+// Generated from src/skeleton/root/skeleton-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: block;
+inline-size: 100%;
+}
+
+:host([shape="text"]) {
+block-size: 1em;
+}
+
+:host([shape="circle"]) {
+aspect-ratio: 1 / 1;
+
+inline-size: var(--skeleton-size, var(--helix-size-control));
+}
+
+[part="skeleton"] {
+background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);
+block-size: 100%;
+border-radius: var(--helix-radii-sm);
+display: block;
+inline-size: 100%;
+
+overflow: hidden;
+position: relative;
+}
+
+[part="skeleton"]::after {
+animation: helix-skeleton-sweep calc(var(--helix-duration-slow) * 4) ease-in-out infinite;
+background-image: linear-gradient(
+90deg,
+transparent 0%,
+color-mix(in oklab, var(--helix-color-foreground) 8%, transparent) 50%,
+transparent 100%
+);
+content: "";
+inline-size: 200%;
+inset-block: 0;
+inset-inline-start: 0;
+position: absolute;
+}
+
+:host([shape="text"]) [part="skeleton"] {
+border-radius: var(--helix-radii-full);
+}
+
+:host([shape="circle"]) [part="skeleton"] {
+
+border-radius: var(--helix-radii-full);
+}
+
+@keyframes helix-skeleton-sweep {
+from {
+translate: -50% 0;
+}
+
+to {
+translate: 50% 0;
+}
+}
+
+@media (prefers-reduced-motion: reduce) {
+[part="skeleton"]::after {
+animation: none;
+background-image: none;
+}
+}
+
+@media print {
+:host {
+display: none;
+}
+}`);

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

@@ -0,0 +1,34 @@
+import { HelixHeadlessSkeleton } from '@fusion.dev/helix-headless/skeleton';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary Stands in for content that has not arrived.
+ *
+ * @description
+ * A sweep rather than a pulse. A block fading in and out reads as something
+ * broken; a highlight traveling across it reads as work in progress, and it is
+ * the same one property animating either way.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category feedback
+ * @aliases Placeholder, Shimmer, Ghost
+ * @documentation https://helix.fusion.dev/components/skeleton
+ *
+ * @csspart skeleton - The placeholder surface.
+ *
+ * @cssproperty --skeleton-size - Diameter of the circle shape.
+ */
+export declare class HelixSkeleton extends HelixHeadlessSkeleton {
+    /**
+     * What the missing content is shaped like.
+     *
+     * Unset is a block, which is what most missing things are.
+     */
+    shape?: 'text' | 'circle';
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-skeleton': HelixSkeleton;
+    }
+}

package/dist/skeleton/root/skeleton-root.js

@@ -0,0 +1,38 @@
+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 { HelixHeadlessSkeleton } from '@fusion.dev/helix-headless/skeleton';
+import { property } from 'lit/decorators.js';
+import { styles } from './skeleton-root.css.js';
+/**
+ * @summary Stands in for content that has not arrived.
+ *
+ * @description
+ * A sweep rather than a pulse. A block fading in and out reads as something
+ * broken; a highlight traveling across it reads as work in progress, and it is
+ * the same one property animating either way.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category feedback
+ * @aliases Placeholder, Shimmer, Ghost
+ * @documentation https://helix.fusion.dev/components/skeleton
+ *
+ * @csspart skeleton - The placeholder surface.
+ *
+ * @cssproperty --skeleton-size - Diameter of the circle shape.
+ */
+let HelixSkeleton = class HelixSkeleton extends HelixHeadlessSkeleton {
+    static { this.styles = styles; }
+};
+__decorate([
+    property({ reflect: true })
+], HelixSkeleton.prototype, "shape", void 0);
+HelixSkeleton = __decorate([
+    customElement('helix-skeleton')
+], HelixSkeleton);
+export { HelixSkeleton };

package/dist/slider/index.d.ts

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

package/dist/slider/index.js

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

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

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