@fusion.dev/helix 0.0.0-dev

package/dist/chat/message/chat-message.d.ts

@@ -0,0 +1,66 @@
+import { HelixHeadlessChatMessage } from '@fusion.dev/helix-headless/chat';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary One turn in a conversation, and what has happened to it.
+ *
+ * @description
+ * **`author="me"` is the one piece of paint that says whose turn it is**, and it
+ * says it by which edge the turn sits against. Everything else about a turn is
+ * the same on both sides, because two bubble styles is two components.
+ *
+ * A failure is the only state that takes a tone, because it is the one a reader
+ * has to find rather than notice. `streaming` is left alone: the text arriving
+ * is the signal, and decorating it competes with the thing it is decorating.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category feedback
+ * @documentation https://helix.fusion.dev/components/chat
+ *
+ * @slot - What was said.
+ * @slot actions - What can be done with it.
+ * @slot avatar - Who said it.
+ *
+ * @csspart content - What was said.
+ * @csspart meta - The time and the state together.
+ *
+ * @cssproperty --chat-message-background-color - Fill behind a turn.
+ * @cssproperty --chat-message-background-color-me - Fill behind the reader's own turns.
+ * @cssproperty --chat-message-color - Ink in a turn.
+ * @cssproperty --chat-message-measure - How wide a turn may get before it wraps.
+ */
+export declare class HelixChatMessage extends HelixHeadlessChatMessage {
+    static tier: string;
+    static styles: CSSResultGroup;
+    /**
+     * Where the turn's surface ends.
+     *
+     * **A bubble is one answer and not the only one, and the category has moved.**
+     * Two people messaging read as two columns of bubbles, which is what the form
+     * has looked like since it existed. An assistant answering does not: the reply
+     * is a paragraph, often a long one with code and lists in it, and every AI
+     * surface worth copying sets it as prose with the reader's own turns in
+     * bubbles beside it. A component that can only draw bubbles cannot render the
+     * conversation most people are now building.
+     *
+     * - `filled` is the default and is told apart by its own ground, which is the
+     *   bubble.
+     * - `plain` has no ground and no edge: the turn is text on the transcript, and
+     *   the space around it and the avatar beside it are what separate it. For an
+     *   assistant's side of a conversation, and for any turn long enough that a
+     *   fill reads as a wall.
+     *
+     * **On this tier, because it is where the surface ends and nothing else.**
+     * `check:axes` keeps `separation` off the headless tier for the reason it
+     * keeps every painted axis off it: that tier has no ground to end. The two
+     * values are a subset of the registry's four; `elevated` and `outlined` are
+     * available and neither is a thing a turn should be, a lifted message reading
+     * as a card and an outlined one as an input.
+     */
+    separation?: 'filled' | 'plain';
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-chat-message': HelixChatMessage;
+    }
+}

package/dist/chat/message/chat-message.js

@@ -0,0 +1,50 @@
+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 { HelixHeadlessChatMessage } from '@fusion.dev/helix-headless/chat';
+import { property } from 'lit/decorators.js';
+import { styles } from './chat-message.css.js';
+/**
+ * @summary One turn in a conversation, and what has happened to it.
+ *
+ * @description
+ * **`author="me"` is the one piece of paint that says whose turn it is**, and it
+ * says it by which edge the turn sits against. Everything else about a turn is
+ * the same on both sides, because two bubble styles is two components.
+ *
+ * A failure is the only state that takes a tone, because it is the one a reader
+ * has to find rather than notice. `streaming` is left alone: the text arriving
+ * is the signal, and decorating it competes with the thing it is decorating.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category feedback
+ * @documentation https://helix.fusion.dev/components/chat
+ *
+ * @slot - What was said.
+ * @slot actions - What can be done with it.
+ * @slot avatar - Who said it.
+ *
+ * @csspart content - What was said.
+ * @csspart meta - The time and the state together.
+ *
+ * @cssproperty --chat-message-background-color - Fill behind a turn.
+ * @cssproperty --chat-message-background-color-me - Fill behind the reader's own turns.
+ * @cssproperty --chat-message-color - Ink in a turn.
+ * @cssproperty --chat-message-measure - How wide a turn may get before it wraps.
+ */
+let HelixChatMessage = class HelixChatMessage extends HelixHeadlessChatMessage {
+    static { this.tier = 'helix-'; }
+    static { this.styles = styles; }
+};
+__decorate([
+    property({ reflect: true })
+], HelixChatMessage.prototype, "separation", void 0);
+HelixChatMessage = __decorate([
+    customElement('helix-chat-message')
+], HelixChatMessage);
+export { HelixChatMessage };

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

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

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

@@ -0,0 +1,134 @@
+// Generated from src/chat/root/chat-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: grid;
+grid-template-rows: auto minmax(0, 1fr) auto auto auto;
+max-block-size: var(--chat-max-block-size, none);
+min-block-size: 0;
+}
+
+[part="header"] {
+grid-row: 1;
+}
+
+[part="log"] {
+grid-row: 2;
+}
+
+[part="resume"] {
+grid-row: 3;
+}
+
+[part="status"] {
+grid-row: 4;
+}
+
+[part="composer"] {
+grid-row: 5;
+}
+
+[part="log"] {
+display: flex;
+flex-direction: column;
+scrollbar-color: var(--helix-color-border) transparent;
+scrollbar-width: thin;
+gap: var(--chat-gap, var(--helix-space-md));
+overflow-y: auto;
+padding-block: var(--helix-space-md);
+padding-inline: var(--chat-padding-inline, var(--helix-space-md));
+
+justify-content: safe flex-end;
+}
+
+[part="header"][hidden],
+[part="resume"][hidden],
+[part="status"][hidden],
+[part="composer"][hidden] {
+display: none;
+}
+
+[part="header"] {
+
+--helix-size-tag: var(--helix-size-tag-sm);
+
+align-items: center;
+border-block-end: var(--helix-border-thin) solid var(--chat-rule, var(--helix-color-border));
+display: flex;
+gap: var(--helix-space-sm);
+justify-content: space-between;
+min-block-size: var(--helix-size-control);
+padding-block: var(--helix-space-2xs);
+padding-inline: var(--chat-padding-inline, var(--helix-space-md));
+}
+
+[part="header"] > [part="actions"] {
+--helix-size-control: var(--helix-size-control-sm);
+--helix-size-icon: var(--helix-size-icon-sm);
+
+align-items: center;
+display: flex;
+flex: 0 0 auto;
+gap: var(--helix-space-2xs);
+}
+
+[part="header"] > [part="actions"][hidden] {
+display: none;
+}
+
+[part="resume"] {
+display: grid;
+justify-items: center;
+margin-block-start: calc(var(--helix-space-xl) * -1);
+pointer-events: none;
+position: relative;
+}
+
+[part="resume"] > * {
+pointer-events: auto;
+}
+
+[part="resume"] slot::slotted(*) {
+
+border: var(--chat-resume-border-width, var(--helix-border-floating)) solid
+var(--chat-resume-border-color, var(--helix-color-border));
+box-shadow: var(--chat-resume-shadow, var(--helix-shadow-floating));
+}
+
+[part="status"] {
+color: var(--helix-color-foreground-muted);
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-xs);
+padding-block-end: var(--helix-space-2xs);
+padding-block-start: var(--helix-space-xs);
+padding-inline: var(--chat-padding-inline, var(--helix-space-md));
+}
+
+[part="composer"] {
+padding-block: var(--helix-space-sm);
+padding-inline: var(--chat-padding-inline, var(--helix-space-md));
+}
+
+[part="empty"],
+[part="loading"] {
+color: var(--helix-color-foreground-subtle);
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-sm);
+margin: var(--helix-space-none);
+padding-block: var(--helix-space-lg);
+text-align: center;
+}
+
+@media print {
+:host {
+max-block-size: none;
+}
+
+[part="log"] {
+overflow-y: visible;
+}
+
+[part="composer"],
+[part="resume"] {
+display: none;
+}
+}`);

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

@@ -0,0 +1,51 @@
+import { HelixHeadlessChat } from '@fusion.dev/helix-headless/chat';
+import type { CSSResultGroup } from 'lit';
+import '../composer/chat-composer.js';
+import '../message/chat-message.js';
+/**
+ * @summary A conversation: the turns, and where the reader is in them.
+ *
+ * @description
+ * Three regions stacked, and only the transcript scrolls: a composer that slid
+ * away as the reader scrolled up to re-read would be the thing they were about
+ * to type into.
+ *
+ * **The transcript keeps its turns at the bottom when there are too few to fill
+ * it**, which is what a conversation looks like. A new one starting at the top
+ * of an empty column reads as a document.
+ *
+ * The way back sits over the transcript rather than in the column, so offering
+ * it does not move what the reader is reading, which is the whole point of
+ * offering it.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category feedback
+ * @documentation https://helix.fusion.dev/components/chat
+ *
+ * @slot - The turns, as `helix-chat-message` children.
+ * @slot composer - Below the transcript, where the reader writes.
+ * @slot header - Above the transcript.
+ * @slot resume - The way back to the bottom.
+ * @slot status - Beside the composer: somebody typing, connection lost.
+ *
+ * @csspart composer - The region the composer sits in.
+ * @csspart log - The transcript, which is the thing that scrolls.
+ *
+ * @cssproperty --chat-gap - Space between turns.
+ * @cssproperty --chat-max-block-size - How tall the conversation may get before the transcript scrolls.
+ * @cssproperty --chat-padding-inline - Space either side of every region.
+ * @cssproperty --chat-resume-border-color - The edge around the way back.
+ * @cssproperty --chat-resume-border-width - How thick that edge is, for a surface over content.
+ * @cssproperty --chat-resume-shadow - The lift under the way back, which floats over the transcript.
+ * @cssproperty --chat-rule - The hairline under the header.
+ */
+export declare class HelixChat extends HelixHeadlessChat {
+    static tier: string;
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-chat': HelixChat;
+    }
+}

package/dist/chat/root/chat-root.js

@@ -0,0 +1,57 @@
+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 { HelixHeadlessChat } from '@fusion.dev/helix-headless/chat';
+import { styles } from './chat-root.css.js';
+import '../composer/chat-composer.js';
+import '../message/chat-message.js';
+/**
+ * @summary A conversation: the turns, and where the reader is in them.
+ *
+ * @description
+ * Three regions stacked, and only the transcript scrolls: a composer that slid
+ * away as the reader scrolled up to re-read would be the thing they were about
+ * to type into.
+ *
+ * **The transcript keeps its turns at the bottom when there are too few to fill
+ * it**, which is what a conversation looks like. A new one starting at the top
+ * of an empty column reads as a document.
+ *
+ * The way back sits over the transcript rather than in the column, so offering
+ * it does not move what the reader is reading, which is the whole point of
+ * offering it.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category feedback
+ * @documentation https://helix.fusion.dev/components/chat
+ *
+ * @slot - The turns, as `helix-chat-message` children.
+ * @slot composer - Below the transcript, where the reader writes.
+ * @slot header - Above the transcript.
+ * @slot resume - The way back to the bottom.
+ * @slot status - Beside the composer: somebody typing, connection lost.
+ *
+ * @csspart composer - The region the composer sits in.
+ * @csspart log - The transcript, which is the thing that scrolls.
+ *
+ * @cssproperty --chat-gap - Space between turns.
+ * @cssproperty --chat-max-block-size - How tall the conversation may get before the transcript scrolls.
+ * @cssproperty --chat-padding-inline - Space either side of every region.
+ * @cssproperty --chat-resume-border-color - The edge around the way back.
+ * @cssproperty --chat-resume-border-width - How thick that edge is, for a surface over content.
+ * @cssproperty --chat-resume-shadow - The lift under the way back, which floats over the transcript.
+ * @cssproperty --chat-rule - The hairline under the header.
+ */
+let HelixChat = class HelixChat extends HelixHeadlessChat {
+    static { this.tier = 'helix-'; }
+    static { this.styles = styles; }
+};
+HelixChat = __decorate([
+    customElement('helix-chat')
+], HelixChat);
+export { HelixChat };

package/dist/checkbox/index.d.ts

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

package/dist/checkbox/index.js

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

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

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

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

@@ -0,0 +1,177 @@
+// Generated from src/checkbox/root/checkbox-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: inline-flex;
+flex-direction: column;
+gap: var(--helix-space-2xs);
+
+--_checkbox-size: var(--checkbox-size, var(--helix-size-checkbox));
+
+--_field-control-inline-size: var(--_checkbox-size);
+}
+
+[part="field"] {
+align-items: center;
+cursor: pointer;
+display: inline-flex;
+gap: var(--helix-space-xs);
+}
+
+:host(:disabled) [part="field"] {
+cursor: default;
+}
+
+:host(:disabled) {
+opacity: 0.5;
+}
+
+[part="box"] {
+display: grid;
+flex: 0 0 auto;
+
+place-items: center;
+}
+
+[part="box"] > * {
+grid-area: 1 / 1;
+}
+
+[part="control"] {
+appearance: none;
+
+background-color: var(--checkbox-background-color, var(--helix-color-background));
+block-size: var(--_checkbox-size);
+border: var(--helix-border-thin) solid var(--checkbox-border-color, var(--helix-color-border));
+border-radius: var(--helix-radii-sm);
+cursor: inherit;
+inline-size: var(--_checkbox-size);
+margin: var(--helix-space-none);
+transition:
+background-color var(--helix-duration-fast) var(--helix-easing-standard),
+border-color var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+:host(:not(:disabled)) [part="field"]:hover [part="control"] {
+border-color: var(--checkbox-border-color, var(--helix-color-foreground-muted));
+}
+
+:host(:state(checked)) [part="control"],
+:host([indeterminate]) [part="control"] {
+border-color: var(
+--checkbox-border-color,
+var(--checkbox-checked-color, var(--helix-color-foreground))
+);
+}
+
+[part="mark"] {
+
+background-color: var(--checkbox-mark-color, var(--helix-color-foreground));
+block-size: var(--_checkbox-size);
+inline-size: var(--_checkbox-size);
+
+mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5 10.2 16.7 18 8.4'/%3E%3C/svg%3E");
+mask-position: center;
+mask-repeat: no-repeat;
+mask-size: 100%;
+pointer-events: none;
+
+scale: 0;
+transition: scale var(--helix-duration-fast) var(--helix-easing-emphasized);
+}
+
+:host(:state(checked)) [part="mark"],
+:host([indeterminate]) [part="mark"] {
+scale: 1;
+}
+
+:host([indeterminate]) [part="mark"] {
+mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M7 12h10'/%3E%3C/svg%3E");
+}
+
+[part="control"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
+:host(:state(invalid)) [part="control"],
+:host(:state(invalid)) [part="field"]:hover [part="control"] {
+border-color: var(--helix-color-danger);
+}
+
+:host(:state(invalid):state(checked)) [part="control"],
+:host(:state(invalid)[indeterminate]) [part="control"] {
+border-color: var(--helix-color-danger);
+}
+
+:host(:state(invalid)) [part="mark"] {
+background-color: var(--helix-color-danger);
+}
+
+@media (prefers-reduced-motion: reduce) {
+[part="mark"],
+[part="control"] {
+transition: none;
+}
+}
+
+:host(:not(:state(has-label))) [part="label"] {
+display: none;
+}
+
+:host([variant="card"]) {
+display: block;
+}
+
+:host([variant="card"]) [part="field"] {
+align-items: start;
+background-color: var(--checkbox-card-background-color, var(--helix-color-surface));
+border: var(--helix-border-thin) solid
+var(--checkbox-card-border-color, var(--helix-color-border));
+border-radius: var(--helix-radii-sm);
+display: flex;
+gap: var(--helix-space-sm);
+inline-size: 100%;
+padding: var(--checkbox-card-padding, var(--helix-space-md));
+transition:
+background-color var(--helix-duration-fast) var(--helix-easing-standard),
+border-color var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+:host(:not([disabled])[variant="card"]) [part="field"]:hover {
+border-color: var(--helix-color-foreground-muted);
+}
+
+:host([variant="card"]:state(checked)) [part="field"] {
+background-color: var(--helix-color-surface-raised);
+border-color: var(--helix-color-primary);
+box-shadow: 0 0 0 var(--helix-border-thick) var(--helix-color-primary);
+}
+
+:host([variant="card"]) [part="field"]:has([part="control"]:focus-visible) {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
+:host([variant="card"]) [part="control"]:focus-visible {
+outline: none;
+}
+
+:host([variant="card"]) [part="box"] {
+margin-block-start: calc(
+(var(--helix-text-sm) * var(--helix-leading-tight) - var(--_checkbox-size)) /
+2
+);
+}
+
+@media (prefers-reduced-motion: reduce) {
+:host([variant="card"]) [part="field"] {
+transition: none;
+}
+}
+
+@media print {
+:host {
+box-shadow: none;
+print-color-adjust: exact;
+}
+}`);

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

@@ -0,0 +1,51 @@
+import { HelixHeadlessCheckbox } from '@fusion.dev/helix-headless/checkbox';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary A box that is ticked, or not, or neither.
+ *
+ * @description
+ * The box is the native input, restyled rather than replaced, so the tick and
+ * the indeterminate dash are the browser's own and the control stays a control
+ * for anything reading the page.
+ *
+ * The label sits beside it and the whole thing is the click target, which is
+ * what a native `<label>` wrapping a checkbox gives and what a reader expects.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category forms
+ * @aliases Tickbox, Toggle
+ * @documentation https://helix.fusion.dev/components/checkbox
+ *
+ * @cssproperty --checkbox-background-color - Fill of an unticked box.
+ * @cssproperty --checkbox-border-color - Edge of the box, in every state.
+ * @cssproperty --checkbox-card-background-color - Fill behind a card-shaped choice.
+ * @cssproperty --checkbox-card-border-color - Edge around one.
+ * @cssproperty --checkbox-card-padding - Inset of the card appearance.
+ * @cssproperty --checkbox-checked-color - Fill of a ticked box.
+ * @cssproperty --checkbox-mark-color - Ink the tick is drawn in.
+ * @cssproperty --checkbox-size - Width and height of the box.
+ */
+export declare class HelixCheckbox extends HelixHeadlessCheckbox {
+    static styles: CSSResultGroup;
+    /**
+     * How the choice presents itself.
+     *
+     * - `plain` is the default and is never written: a box beside its words,
+     *   which is what a list of choices should be almost always.
+     * - `card` puts it in a bounded surface, for options that need room to
+     *   explain themselves: a description, an icon, a price. It is the half a
+     *   `data-card` link cannot do, because a link reports no value and belongs
+     *   to no group, so a card that is genuinely an answer has to be this.
+     *
+     * The box stays in both. A card whose only marker was its own border would
+     * ask a reader to compare surfaces across a row to find the answer, and would
+     * leave nothing for a high-contrast display.
+     */
+    variant?: 'plain' | 'card';
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-checkbox': HelixCheckbox;
+    }
+}

package/dist/checkbox/root/checkbox-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 { HelixHeadlessCheckbox } from '@fusion.dev/helix-headless/checkbox';
+import { property } from 'lit/decorators.js';
+import { styles as fieldStyles } from '../../shared/field/field.css.js';
+import { styles as fieldInlineStyles } from '../../shared/field/field-inline.css.js';
+import { styles } from './checkbox-root.css.js';
+/**
+ * @summary A box that is ticked, or not, or neither.
+ *
+ * @description
+ * The box is the native input, restyled rather than replaced, so the tick and
+ * the indeterminate dash are the browser's own and the control stays a control
+ * for anything reading the page.
+ *
+ * The label sits beside it and the whole thing is the click target, which is
+ * what a native `<label>` wrapping a checkbox gives and what a reader expects.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category forms
+ * @aliases Tickbox, Toggle
+ * @documentation https://helix.fusion.dev/components/checkbox
+ *
+ * @cssproperty --checkbox-background-color - Fill of an unticked box.
+ * @cssproperty --checkbox-border-color - Edge of the box, in every state.
+ * @cssproperty --checkbox-card-background-color - Fill behind a card-shaped choice.
+ * @cssproperty --checkbox-card-border-color - Edge around one.
+ * @cssproperty --checkbox-card-padding - Inset of the card appearance.
+ * @cssproperty --checkbox-checked-color - Fill of a ticked box.
+ * @cssproperty --checkbox-mark-color - Ink the tick is drawn in.
+ * @cssproperty --checkbox-size - Width and height of the box.
+ */
+let HelixCheckbox = class HelixCheckbox extends HelixHeadlessCheckbox {
+    static { this.styles = [fieldStyles, fieldInlineStyles, styles]; }
+};
+__decorate([
+    property({ reflect: true })
+], HelixCheckbox.prototype, "variant", void 0);
+HelixCheckbox = __decorate([
+    customElement('helix-checkbox')
+], HelixCheckbox);
+export { HelixCheckbox };

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

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

package/dist/checkbox-group/index.js

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

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

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