@fusion.dev/helix 0.0.0-dev

package/dist/date-picker/root/date-picker-root.css.js

@@ -0,0 +1,219 @@
+// Generated from src/date-picker/root/date-picker-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: inline-block;
+
+--_calendar-track: var(--date-picker-track-size, 2.5rem);
+--_calendar-row: var(--date-picker-row-size, 2.25rem);
+--_calendar-day: var(--date-picker-day-size, 1.875rem);
+}
+
+[part="months"] {
+align-items: start;
+display: grid;
+gap: var(--helix-space-md);
+grid-template-columns: repeat(
+var(--date-picker-columns, var(--date-picker-column-count, 1)),
+max-content
+);
+justify-content: start;
+}
+
+[part="header"] {
+align-items: center;
+display: grid;
+gap: var(--helix-space-2xs);
+grid-template-columns: var(--_calendar-day) 1fr var(--_calendar-day);
+margin-block-end: var(--helix-space-lg);
+}
+
+[part="heading"] {
+font-size: var(--helix-text-sm);
+font-weight: var(--helix-weight-medium);
+grid-column: 2;
+text-align: center;
+}
+
+[part="previous"] {
+grid-column: 1;
+}
+
+[part="next"] {
+grid-column: 3;
+}
+
+[part="previous"],
+[part="next"] {
+all: unset;
+
+box-sizing: border-box;
+align-items: center;
+block-size: var(--_calendar-day);
+border-radius: var(--helix-radii-sm);
+color: var(--helix-color-foreground-muted);
+cursor: pointer;
+display: inline-flex;
+inline-size: var(--_calendar-day);
+justify-content: center;
+}
+
+[part="previous"]:hover,
+[part="next"]:hover {
+background-color: var(--helix-color-surface-sunken);
+color: var(--helix-color-foreground);
+}
+
+[part="previous"] svg,
+[part="next"] svg,
+::slotted([slot="previous-icon"]),
+::slotted([slot="next-icon"]) {
+block-size: 1em;
+inline-size: 1em;
+}
+
+[part="week"] {
+display: grid;
+grid-template-columns: repeat(7, var(--_calendar-track));
+}
+
+[part="weekday"] {
+align-items: center;
+block-size: var(--_calendar-track);
+color: var(--helix-color-foreground-subtle);
+display: inline-flex;
+font-size: var(--helix-text-xs);
+font-weight: var(--helix-weight-medium);
+inline-size: var(--_calendar-track);
+justify-content: center;
+padding-block-end: calc(var(--_calendar-track) / 2);
+}
+
+[part="cell"] {
+align-items: center;
+block-size: var(--_calendar-row);
+cursor: pointer;
+display: inline-flex;
+inline-size: var(--_calendar-track);
+justify-content: center;
+}
+
+[part="day"] {
+align-items: center;
+block-size: var(--_calendar-day);
+
+border-radius: var(--helix-radii-sm);
+display: inline-flex;
+font-size: var(--helix-text-sm);
+inline-size: var(--_calendar-day);
+justify-content: center;
+transition: background-color var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+[part="cell"][data-today] [part="day"] {
+box-shadow: inset 0 0 0 var(--helix-border-thin) var(--helix-color-border);
+}
+
+[part="cell"][data-outside] [part="day"] {
+color: var(--helix-color-foreground-subtle);
+}
+
+[part="cell"]:hover:not([aria-disabled], [data-outside]) [part="day"] {
+background-color: var(--helix-color-surface-sunken);
+}
+
+[part="cell"][aria-selected]:is([data-range-start], [data-range-middle], [data-range-end]) {
+background-color: var(
+--date-picker-range-color,
+light-dark(
+color-mix(in oklab, var(--helix-color-foreground) 10%, transparent),
+color-mix(in oklab, var(--helix-color-foreground) 14%, transparent)
+)
+);
+}
+
+[part="cell"][aria-selected]:not([data-range-start]):not([data-range-middle]):not([data-range-end])
+[part="day"] {
+box-shadow: 0 0 0 calc((var(--_calendar-row) - var(--_calendar-day)) / 2)
+var(
+--date-picker-range-color,
+light-dark(
+color-mix(in oklab, var(--helix-color-foreground) 10%, transparent),
+color-mix(in oklab, var(--helix-color-foreground) 14%, transparent)
+)
+);
+}
+
+[part="cell"][data-range-start],
+[part="cell"][aria-selected]:not([data-range-middle]):not([data-range-end]) {
+border-end-start-radius: var(--helix-radii-sm);
+border-start-start-radius: var(--helix-radii-sm);
+}
+
+[part="cell"][data-range-end],
+[part="cell"][aria-selected]:not([data-range-middle]):not([data-range-start]) {
+border-end-end-radius: var(--helix-radii-sm);
+border-start-end-radius: var(--helix-radii-sm);
+}
+
+[part="cell"][aria-selected]:not([data-range-middle]) [part="day"] {
+background-color: var(--date-picker-selected-color, var(--helix-color-surface-inverse));
+color: var(--helix-color-foreground-inverse);
+}
+
+[part="cell"][aria-disabled] {
+cursor: default;
+}
+
+[part="cell"][aria-disabled] [part="day"] {
+color: var(--helix-color-foreground-subtle);
+opacity: 0.4;
+}
+
+[part="cell"]:focus-visible {
+outline: none;
+}
+
+[part="cell"]:focus-visible [part="day"] {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
+@media (prefers-reduced-motion: reduce) {
+[part="day"] {
+transition: none;
+}
+}
+
+:host(:dir(rtl)) [part="previous"] svg,
+:host(:dir(rtl)) [part="next"] svg,
+:host(:dir(rtl)) ::slotted([slot="previous-icon"]),
+:host(:dir(rtl)) ::slotted([slot="next-icon"]) {
+scale: -1 1;
+}
+
+:host(:disabled) {
+cursor: not-allowed;
+opacity: 0.5;
+}
+
+:host([invalid]) [part="cell"][aria-selected] [part="day"] {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-danger);
+outline-offset: var(--helix-size-focus-offset);
+}
+
+:host([invalid]) [part="cell"]:focus-visible [part="day"] {
+outline-color: var(--helix-color-danger);
+}
+
+:host([invalid]) [part="grid"][data-unset] {
+border-radius: var(--helix-radii-sm);
+outline: var(--helix-size-focus-ring) solid var(--helix-color-danger);
+outline-offset: var(--helix-size-focus-offset);
+}
+
+@media print {
+:host {
+box-shadow: none;
+print-color-adjust: exact;
+}
+}`);

package/dist/date-picker/root/date-picker-root.d.ts

@@ -0,0 +1,38 @@
+import { HelixHeadlessDatePicker } from '@fusion.dev/helix-headless/date-picker';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary Shows a month, and takes a date from it.
+ *
+ * @description
+ * Six week rows always, so the grid keeps one height and a month change does
+ * not move whatever sits beneath it.
+ *
+ * The column track is wider than the day, and the day is centered in it. The
+ * difference is the space between days, which belongs to the track rather than
+ * to a `gap`, so a range can paint across the whole track and stay continuous.
+ *
+ * Days from the neighbouring months stay in place and stay selectable, marked
+ * quieter rather than hidden, so the first and last weeks are whole and the
+ * grid reads as a continuous run of dates.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category forms
+ * @aliases Calendar, Date grid, Month view
+ * @documentation https://helix.fusion.dev/components/date-picker
+ *
+ * @cssproperty --date-picker-columns - Months per row. Two unless there is only one.
+ * @cssproperty --date-picker-day-size - Width and height of a day.
+ * @cssproperty --date-picker-range-color - Band behind the days in a range.
+ * @cssproperty --date-picker-row-size - Height of a week row.
+ * @cssproperty --date-picker-selected-color - Fill behind a selected day.
+ * @cssproperty --date-picker-track-size - Width of a column, which is what sets the space between days.
+ */
+export declare class HelixDatePicker extends HelixHeadlessDatePicker {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-date-picker': HelixDatePicker;
+    }
+}

package/dist/date-picker/root/date-picker-root.js

@@ -0,0 +1,44 @@
+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 { HelixHeadlessDatePicker } from '@fusion.dev/helix-headless/date-picker';
+import { styles } from './date-picker-root.css.js';
+/**
+ * @summary Shows a month, and takes a date from it.
+ *
+ * @description
+ * Six week rows always, so the grid keeps one height and a month change does
+ * not move whatever sits beneath it.
+ *
+ * The column track is wider than the day, and the day is centered in it. The
+ * difference is the space between days, which belongs to the track rather than
+ * to a `gap`, so a range can paint across the whole track and stay continuous.
+ *
+ * Days from the neighbouring months stay in place and stay selectable, marked
+ * quieter rather than hidden, so the first and last weeks are whole and the
+ * grid reads as a continuous run of dates.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category forms
+ * @aliases Calendar, Date grid, Month view
+ * @documentation https://helix.fusion.dev/components/date-picker
+ *
+ * @cssproperty --date-picker-columns - Months per row. Two unless there is only one.
+ * @cssproperty --date-picker-day-size - Width and height of a day.
+ * @cssproperty --date-picker-range-color - Band behind the days in a range.
+ * @cssproperty --date-picker-row-size - Height of a week row.
+ * @cssproperty --date-picker-selected-color - Fill behind a selected day.
+ * @cssproperty --date-picker-track-size - Width of a column, which is what sets the space between days.
+ */
+let HelixDatePicker = class HelixDatePicker extends HelixHeadlessDatePicker {
+    static { this.styles = styles; }
+};
+HelixDatePicker = __decorate([
+    customElement('helix-date-picker')
+], HelixDatePicker);
+export { HelixDatePicker };

package/dist/dialog/index.d.ts

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

package/dist/dialog/index.js

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

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

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

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

@@ -0,0 +1,184 @@
+// Generated from src/dialog/root/dialog-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: contents;
+}
+
+[part="dialog"] {
+background-color: var(--helix-color-surface-overlay);
+border: var(--dialog-border-width, var(--helix-border-floating)) solid
+var(--dialog-border-color, var(--helix-color-border));
+
+border-radius: var(--helix-radii-sm);
+box-shadow: var(--dialog-shadow, var(--helix-shadow-floating));
+box-sizing: border-box;
+color: var(--helix-color-foreground);
+display: flex;
+flex-direction: column;
+gap: var(--helix-space-md);
+
+inline-size: min(var(--dialog-inline-size, 28rem), calc(100vw - var(--helix-space-xl)));
+
+max-block-size: calc(100dvh - var(--helix-space-xl));
+overflow-y: auto;
+padding: var(--dialog-padding, var(--helix-space-lg));
+}
+
+[part="dialog"]:not([open]) {
+display: none;
+}
+
+:host([size="sm"]) [part="dialog"] {
+--dialog-inline-size: 22rem;
+}
+
+:host([size="md"]) [part="dialog"] {
+--dialog-inline-size: 28rem;
+}
+
+:host([size="lg"]) [part="dialog"] {
+--dialog-inline-size: 44rem;
+}
+
+:host([size="full"]) [part="dialog"] {
+--dialog-inline-size: 100vw;
+}
+
+[part="dialog"]:focus,
+[part="dialog"]:focus-visible {
+outline: none;
+}
+
+:host {
+--_dialog-scrim: var(--helix-color-overlay);
+}
+
+[part="dialog"]::backdrop {
+background-color: var(--dialog-scrim, var(--_dialog-scrim));
+}
+
+::slotted([slot="header"]) {
+color: var(--helix-color-foreground);
+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-tight);
+margin: var(--helix-space-none);
+}
+
+::slotted([slot="footer"]) {
+display: flex;
+gap: var(--helix-space-xs);
+justify-content: flex-start;
+}
+
+[part="dialog"] {
+opacity: 0;
+transition:
+opacity var(--helix-duration-normal) var(--helix-easing-standard),
+translate var(--helix-duration-normal) var(--helix-easing-decelerate),
+display var(--helix-duration-normal) allow-discrete,
+overlay var(--helix-duration-normal) allow-discrete;
+translate: 0 var(--dialog-rise, var(--helix-space-lg));
+}
+
+[part="dialog"][open] {
+opacity: 1;
+translate: 0 0;
+}
+
+@starting-style {
+[part="dialog"][open] {
+opacity: 0;
+translate: 0 var(--dialog-rise, var(--helix-space-lg));
+}
+}
+
+[part="dialog"]::backdrop {
+opacity: 0;
+transition:
+opacity var(--helix-duration-normal) var(--helix-easing-standard),
+display var(--helix-duration-normal) allow-discrete,
+overlay var(--helix-duration-normal) allow-discrete;
+}
+
+[part="dialog"][open]::backdrop {
+opacity: 1;
+}
+
+@starting-style {
+[part="dialog"][open]::backdrop {
+opacity: 0;
+}
+}
+
+@media (width < 30rem) {
+[part="dialog"] {
+
+margin-block-end: var(--helix-space-none);
+margin-block-start: auto;
+inline-size: 100vw;
+max-inline-size: 100vw;
+
+max-block-size: calc(100dvh - var(--helix-space-3xl));
+
+border-start-start-radius: var(--helix-radii-sm);
+border-start-end-radius: var(--helix-radii-sm);
+border-end-start-radius: var(--helix-radii-none);
+border-end-end-radius: var(--helix-radii-none);
+
+translate: 0 100%;
+}
+
+@starting-style {
+[part="dialog"][open] {
+translate: 0 100%;
+}
+}
+}
+
+[part="dialog"][data-refused] {
+animation: helix-dialog-refuse var(--helix-duration-normal) var(--helix-easing-emphasized);
+}
+
+@keyframes helix-dialog-refuse {
+50% {
+scale: 1.02;
+}
+}
+
+@media (prefers-reduced-motion: reduce) {
+[part="dialog"],
+[part="dialog"]::backdrop {
+transition: none;
+}
+
+[part="dialog"][data-refused] {
+animation: none;
+}
+}
+
+::slotted([slot="icon"]) {
+block-size: var(--dialog-icon-size, calc(var(--helix-size-icon-lg) * 2));
+display: block;
+inline-size: var(--dialog-icon-size, calc(var(--helix-size-icon-lg) * 2));
+}
+
+:host([align="center"]) [part="dialog"] {
+text-align: center;
+}
+
+:host([align="center"]) ::slotted([slot="footer"]) {
+justify-content: center;
+}
+
+:host([align="center"]) ::slotted([slot="icon"]) {
+margin-inline: auto;
+}
+
+@media print {
+:host {
+display: none;
+}
+}`);

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

@@ -0,0 +1,81 @@
+import { HelixHeadlessDialog } from '@fusion.dev/helix-headless/dialog';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary A modal window, on the platform's own dialog.
+ *
+ * @description
+ * The panel is `surface-overlay` with a shadow, because that is what it is: a
+ * thing over the page rather than on it. The scrim is drawn on `::backdrop`,
+ * which is the platform's own element for it and sits in the top layer with the
+ * dialog rather than being a div somebody positioned.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category overlays
+ * @aliases Modal, Lightbox, Sheet
+ * @documentation https://helix.fusion.dev/components/dialog
+ *
+ * @cssproperty --dialog-border-color - Color of the panel's edge.
+ * @cssproperty --dialog-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 --dialog-icon-size - How big the mark above the title is.
+ * @cssproperty --dialog-inline-size - Width of the panel.
+ * @cssproperty --dialog-padding - Padding inside the panel.
+ * @cssproperty --dialog-rise - How far the panel rises as it opens. Follows
+ *   `--helix-space-lg`.
+ * @cssproperty --dialog-scrim - The wash over the page behind the dialog. Set on the host, where a token still resolves: a `var()` written inside `::backdrop` cannot see one.
+ * @cssproperty --dialog-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.
+ *
+ * @property align - Whether the panel's contents run from the start or center on it.
+ * @property size - How wide the panel is allowed to be.
+ */
+export declare class HelixDialog extends HelixHeadlessDialog {
+    /**
+     * How wide the panel is allowed to be.
+     *
+     * Steps rather than a number, because a dialog's width is a fact about what is
+     * in it: a confirmation is narrow, a form is not, and picking pixels per
+     * dialog is how a product ends up with nine of them. `full` takes the viewport
+     * less the same inset every step already stops short by, so a takeover is one
+     * more rung and not a second property.
+     *
+     * Unset is `md`, read as `:host(:not([size]))` beside `:host([size="md"])`
+     * rather than assigned here, for the reason `Drawer.placement` gives: this
+     * reflects, and a default would put `size="md"` into markup no consumer wrote.
+     *
+     * **This was `appearance`, and it was the wrong word.** That word said how a
+     * thing *reads*, and here it said how wide the panel is, which its own
+     * description admitted in as many words. It turned out to be the first of
+     * many: `appearance` held four axes across 21 components and #158 retired it
+     * entirely, so this rename was that sweep arriving early at one component.
+     *
+     * `size` is right despite the rule that controls have no size, because that
+     * rule's own test is whether two of them sitting together could legitimately
+     * differ, and it is answering "a ragged row is unwritable". Two dialogs never
+     * sit together. One is on screen at a time, in the top layer, and it is the
+     * region rather than a control in one, which is the same reason `Avatar` and
+     * `Spinner` keep theirs.
+     */
+    size?: 'sm' | 'md' | 'lg' | 'full';
+    /**
+     * Which way the panel's contents read.
+     *
+     * One property for the whole panel rather than one per region. The regions are
+     * never mixed in practice: a dialog that asks a short question centers its
+     * mark, its title, its sentence and its buttons together, and a dialog holding
+     * a form runs all four from the start. Three properties would be three ways to
+     * write the same two arrangements, and a fourth way to get one of them wrong.
+     *
+     * Unset is `start` and stays unset, so a reflected default cannot appear on a
+     * host whose server output never had it.
+     */
+    align?: 'center' | 'start';
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-dialog': HelixDialog;
+    }
+}

package/dist/dialog/root/dialog-root.js

@@ -0,0 +1,54 @@
+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 { HelixHeadlessDialog } from '@fusion.dev/helix-headless/dialog';
+import { property } from 'lit/decorators.js';
+import { styles } from './dialog-root.css.js';
+/**
+ * @summary A modal window, on the platform's own dialog.
+ *
+ * @description
+ * The panel is `surface-overlay` with a shadow, because that is what it is: a
+ * thing over the page rather than on it. The scrim is drawn on `::backdrop`,
+ * which is the platform's own element for it and sits in the top layer with the
+ * dialog rather than being a div somebody positioned.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category overlays
+ * @aliases Modal, Lightbox, Sheet
+ * @documentation https://helix.fusion.dev/components/dialog
+ *
+ * @cssproperty --dialog-border-color - Color of the panel's edge.
+ * @cssproperty --dialog-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 --dialog-icon-size - How big the mark above the title is.
+ * @cssproperty --dialog-inline-size - Width of the panel.
+ * @cssproperty --dialog-padding - Padding inside the panel.
+ * @cssproperty --dialog-rise - How far the panel rises as it opens. Follows
+ *   `--helix-space-lg`.
+ * @cssproperty --dialog-scrim - The wash over the page behind the dialog. Set on the host, where a token still resolves: a `var()` written inside `::backdrop` cannot see one.
+ * @cssproperty --dialog-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.
+ *
+ * @property align - Whether the panel's contents run from the start or center on it.
+ * @property size - How wide the panel is allowed to be.
+ */
+let HelixDialog = class HelixDialog extends HelixHeadlessDialog {
+    static { this.styles = styles; }
+};
+__decorate([
+    property({ reflect: true })
+], HelixDialog.prototype, "size", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixDialog.prototype, "align", void 0);
+HelixDialog = __decorate([
+    customElement('helix-dialog')
+], HelixDialog);
+export { HelixDialog };

package/dist/divider/index.d.ts

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

package/dist/divider/index.js

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

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

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