@fusion.dev/helix 0.0.0-dev

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

@@ -0,0 +1,190 @@
+// Generated from src/button/root/button-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: inline-flex;
+}
+
+:host {
+--_button-edge: var(--helix-color-border);
+
+--_button-fill: var(--_button-tone);
+--_button-fill-hover: var(--_button-tone-hover);
+--_button-on-tone: var(--helix-color-background);
+--_button-tone: var(--helix-color-foreground);
+
+--_button-tone-hover: color-mix(
+in oklab,
+var(--helix-color-foreground) 86%,
+var(--helix-color-background)
+);
+}
+:host([tone="primary"]) {
+--_button-edge: var(--helix-color-primary);
+--_button-fill: var(--helix-color-primary-surface);
+--_button-fill-hover: var(--helix-color-primary-surface-hover);
+--_button-on-tone: var(--helix-color-foreground-on-accent);
+--_button-tone: var(--helix-color-primary);
+--_button-tone-hover: var(--helix-color-primary-hover);
+}
+
+:host([tone="accent"]) {
+--_button-edge: var(--helix-color-accent);
+--_button-fill: var(--helix-color-accent-surface);
+--_button-fill-hover: var(--helix-color-accent-surface-hover);
+--_button-on-tone: var(--helix-color-foreground-on-accent);
+--_button-tone: var(--helix-color-accent);
+--_button-tone-hover: var(--helix-color-accent-hover);
+}
+:host([tone="danger"]) {
+--_button-edge: var(--helix-color-danger);
+--_button-fill: var(--helix-color-danger-surface);
+--_button-fill-hover: var(--helix-color-danger-surface-hover);
+--_button-on-tone: var(--helix-color-foreground-on-accent);
+--_button-tone: var(--helix-color-danger);
+
+--_button-tone-hover: color-mix(
+in oklab,
+var(--helix-color-danger) 86%,
+var(--helix-color-foreground)
+);
+}
+
+[part="button"] {
+all: unset;
+align-items: center;
+
+background-color: var(
+--button-background-color,
+color-mix(in oklab, var(--_button-tone) 6%, transparent)
+);
+
+block-size: var(--button-size, var(--helix-size-control));
+border: var(--helix-border-thin) solid var(--_button-edge);
+box-sizing: border-box;
+color: var(--button-foreground-color, var(--_button-tone));
+cursor: pointer;
+display: inline-flex;
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-control);
+font-weight: var(--helix-weight-medium);
+gap: var(--button-gap, var(--helix-space-xs));
+inline-size: 100%;
+justify-content: center;
+letter-spacing: var(--helix-tracking-normal);
+line-height: var(--helix-leading-tight);
+
+padding-inline: var(--button-padding-inline, var(--helix-space-control));
+text-decoration: none;
+transition:
+background-color var(--helix-duration-fast) var(--helix-easing-standard),
+border-color var(--helix-duration-fast) var(--helix-easing-standard),
+color var(--helix-duration-fast) var(--helix-easing-standard);
+white-space: nowrap;
+}
+
+[part="button"] {
+border-end-end-radius: var(
+--button-radius-end-end,
+var(--button-radius-end, var(--button-radius, var(--helix-radii-sm)))
+);
+border-end-start-radius: var(
+--button-radius-end-start,
+var(--button-radius-start, var(--button-radius, var(--helix-radii-sm)))
+);
+border-start-end-radius: var(
+--button-radius-start-end,
+var(--button-radius-end, var(--button-radius, var(--helix-radii-sm)))
+);
+border-start-start-radius: var(
+--button-radius-start-start,
+var(--button-radius-start, var(--button-radius, var(--helix-radii-sm)))
+);
+}
+
+:host(:not(:disabled)) [part="button"]:hover {
+background-color: var(
+--button-background-color-hover,
+var(--button-background-color, color-mix(in oklab, var(--_button-tone) 12%, transparent))
+);
+}
+
+[part="button"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
+:host([emphasis="solid"]) [part="button"] {
+background-color: var(--button-background-color, var(--_button-fill));
+border-color: transparent;
+color: var(--button-foreground-color, var(--_button-on-tone));
+}
+:host(:not(:disabled)[emphasis="solid"]) [part="button"]:hover {
+background-color: var(
+--button-background-color-hover,
+var(--button-background-color, var(--_button-fill-hover))
+);
+border-color: transparent;
+}
+
+:host([emphasis="subtle"]) [part="button"] {
+background-color: var(
+--button-background-color,
+color-mix(in oklab, var(--_button-tone) 14%, transparent)
+);
+border-color: transparent;
+color: var(--button-foreground-color, var(--_button-tone));
+}
+
+:host(:not(:disabled)[emphasis="subtle"]) [part="button"]:hover {
+background-color: var(
+--button-background-color-hover,
+var(--button-background-color, color-mix(in oklab, var(--_button-tone) 22%, transparent))
+);
+border-color: transparent;
+}
+:host([emphasis="ghost"]) [part="button"] {
+background-color: var(--button-background-color, transparent);
+border-color: transparent;
+color: var(--button-foreground-color, var(--_button-tone));
+}
+
+:host(:not(:disabled)[emphasis="ghost"]) [part="button"]:hover {
+background-color: var(
+--button-background-color-hover,
+var(--button-background-color, color-mix(in oklab, var(--_button-tone) 8%, transparent))
+);
+border-color: transparent;
+}
+
+:host([width="standard"]) {
+
+min-inline-size: var(--button-inline-size, var(--helix-size-button));
+
+max-inline-size: 100%;
+}
+
+:host([width="full"]) {
+display: flex;
+inline-size: 100%;
+}
+
+:host(:disabled) [part="button"] {
+cursor: not-allowed;
+opacity: 0.5;
+}
+
+[part="button"] ::slotted(helix-icon) {
+--icon-size: 1.15em;
+}
+
+@media (prefers-reduced-motion: reduce) {
+[part="button"] {
+transition: none;
+}
+}
+
+@media print {
+:host {
+display: none;
+}
+}`);

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

@@ -0,0 +1,95 @@
+import { HelixHeadlessButton } from '@fusion.dev/helix-headless/button';
+import type { CSSResultGroup } from 'lit';
+declare const HelixButton_base: (new (...args: any[]) => import("../../mixins/mixin-control-surface/mixin-control-surface.js").MixinControlSurfaceInterface) & typeof HelixHeadlessButton;
+/**
+ * @summary Triggers an action, submits a form, or navigates.
+ *
+ * @description
+ * Four appearances, all drawn on one control so a link styled as a button and a
+ * real button are indistinguishable to a reader. There are no sizes: a control
+ * takes its height from the region it is in, through `data-density`, which is
+ * the one size axis in the library and the reason a row of controls cannot come
+ * out ragged. The focus
+ * ring is declared here rather than inherited, because the base layer's
+ * `:focus-visible` rule is a light-DOM rule and stops at the shadow boundary.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category actions
+ * @documentation https://helix.fusion.dev/components/button
+ *
+ * @slot - The button's label.
+ * @slot end - Content after the label.
+ * @slot start - Content before the label, usually an icon.
+ *
+ * @csspart button - The inner control.
+ *
+ * @cssproperty --button-background-color - Fill behind the button, in every state.
+ * @cssproperty --button-background-color-hover - Fill behind the button under the pointer. Only needed beside the one above, which otherwise holds through hover.
+ * @cssproperty --button-foreground-color - Label and icon color.
+ * @cssproperty --button-gap - Space between the label and whatever flanks it.
+ * @cssproperty --button-inline-size - Width taken by `width="standard"`.
+ * @cssproperty --button-padding-inline - Inline padding, for a container whose rhythm is not the control default.
+ * @cssproperty --button-radius - Corner radius of the control.
+ * @cssproperty --button-radius-end - Trailing corners, which a group flattens.
+ * @cssproperty --button-radius-end-end - The bottom trailing corner, for a group stacking down.
+ * @cssproperty --button-radius-end-start - The bottom leading corner, for a group stacking down.
+ * @cssproperty --button-radius-start - Leading corners, which a group flattens.
+ * @cssproperty --button-radius-start-end - The top trailing corner, for a group stacking down.
+ * @cssproperty --button-radius-start-start - The top leading corner, for a group stacking down.
+ * @cssproperty --button-size - Height of the control, for a container whose row is not one of the density steps.
+ */
+export declare class HelixButton extends HelixButton_base {
+    /**
+     * How much of the space available to it the button takes.
+     *
+     * - `auto` is the default and is never written: the button is as wide as its
+     *   label, which is what a control in a toolbar or beside a field should be.
+     * - `standard` is one width for every button that takes it, so a column or
+     *   row of actions lines up instead of following the length of each word.
+     * - `full` fills the container, for a single action at the foot of a form or
+     *   a card, and on a phone where a control is a target before it is a label.
+     *
+     * **This was `fill`, and the name had to disclaim itself.** The paragraph here
+     * opened "Width and not weight", which is a sentence a name should not need:
+     * `emphasis` on this same element is documented as "How filled it is drawn",
+     * so a button carried a property called `fill` beside a property about being
+     * filled, meaning different things. `separation="filled"` and
+     * `ThemeIntent.separation`'s `fill` mechanism both mean a surface's own
+     * color, and every chart in the library writes `fill` for paint, which left
+     * this the only use of the word meaning geometry.
+     *
+     * `Dialog` had already made the same move for the same reason, its
+     * `appearance` becoming `size` for saying how wide a panel is, "which its own
+     * description admitted in as many words". `size` is not available here,
+     * because that rule's test is whether two of them sitting together could
+     * legitimately differ, and two buttons do: this is a width *policy* rather
+     * than a scale, and `standard` exists precisely to stop a row being ragged.
+     *
+     * Width and not weight, still. `emphasis` says how much a button matters and
+     * this says how much room it takes, and the three are independent: a `ghost
+     * standard` Cancel beside a `solid primary standard` Save is exactly the
+     * pairing a dialog wants.
+     *
+     * **A consumer's own anchor takes it as `data-button-width`**, the way it
+     * takes the emphasis as `data-button`:
+     *
+     * ```html
+     * <a data-button="solid" data-button-width="standard" data-button-tone="primary" href="/save">Save</a>
+     * ```
+     *
+     * Both are one declaration in the base layer. They were not, and that was a
+     * real gap rather than a missing convenience: this class promises a link
+     * styled as a button and a real button are indistinguishable, and a dialog's
+     * button row is built on `standard`, so the one place the promise mattered
+     * most was the one place it did not hold.
+     */
+    width?: 'auto' | 'full' | 'standard';
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-button': HelixButton;
+    }
+}
+export {};

package/dist/button/root/button-root.js

@@ -0,0 +1,59 @@
+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 { HelixHeadlessButton } from '@fusion.dev/helix-headless/button';
+import { property } from 'lit/decorators.js';
+import { MixinControlSurface } from '../../mixins/mixin-control-surface/mixin-control-surface.js';
+import { styles } from './button-root.css.js';
+/**
+ * @summary Triggers an action, submits a form, or navigates.
+ *
+ * @description
+ * Four appearances, all drawn on one control so a link styled as a button and a
+ * real button are indistinguishable to a reader. There are no sizes: a control
+ * takes its height from the region it is in, through `data-density`, which is
+ * the one size axis in the library and the reason a row of controls cannot come
+ * out ragged. The focus
+ * ring is declared here rather than inherited, because the base layer's
+ * `:focus-visible` rule is a light-DOM rule and stops at the shadow boundary.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category actions
+ * @documentation https://helix.fusion.dev/components/button
+ *
+ * @slot - The button's label.
+ * @slot end - Content after the label.
+ * @slot start - Content before the label, usually an icon.
+ *
+ * @csspart button - The inner control.
+ *
+ * @cssproperty --button-background-color - Fill behind the button, in every state.
+ * @cssproperty --button-background-color-hover - Fill behind the button under the pointer. Only needed beside the one above, which otherwise holds through hover.
+ * @cssproperty --button-foreground-color - Label and icon color.
+ * @cssproperty --button-gap - Space between the label and whatever flanks it.
+ * @cssproperty --button-inline-size - Width taken by `width="standard"`.
+ * @cssproperty --button-padding-inline - Inline padding, for a container whose rhythm is not the control default.
+ * @cssproperty --button-radius - Corner radius of the control.
+ * @cssproperty --button-radius-end - Trailing corners, which a group flattens.
+ * @cssproperty --button-radius-end-end - The bottom trailing corner, for a group stacking down.
+ * @cssproperty --button-radius-end-start - The bottom leading corner, for a group stacking down.
+ * @cssproperty --button-radius-start - Leading corners, which a group flattens.
+ * @cssproperty --button-radius-start-end - The top trailing corner, for a group stacking down.
+ * @cssproperty --button-radius-start-start - The top leading corner, for a group stacking down.
+ * @cssproperty --button-size - Height of the control, for a container whose row is not one of the density steps.
+ */
+let HelixButton = class HelixButton extends MixinControlSurface(HelixHeadlessButton) {
+    static { this.styles = styles; }
+};
+__decorate([
+    property({ reflect: true })
+], HelixButton.prototype, "width", void 0);
+HelixButton = __decorate([
+    customElement('helix-button')
+], HelixButton);
+export { HelixButton };

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

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

package/dist/button-group/index.js

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

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

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

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

@@ -0,0 +1,54 @@
+// Generated from src/button-group/root/button-group-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: inline-flex;
+}
+
+:host(:not([variant="spaced"])) ::slotted(*:not(:first-child)) {
+margin-inline-start: calc(var(--helix-border-thin) * -1);
+}
+
+:host(:not([variant="spaced"])) ::slotted(*:not(:first-child)) {
+--button-radius-start: 0;
+}
+
+:host(:not([variant="spaced"])) ::slotted(*:not(:last-child)) {
+--button-radius-end: 0;
+}
+
+:host([orientation="vertical"]) {
+align-items: stretch;
+flex-direction: column;
+}
+
+:host([orientation="vertical"]:not([variant="spaced"])) ::slotted(*:not(:first-child)) {
+margin-block-start: calc(var(--helix-border-thin) * -1);
+
+margin-inline-start: 0;
+--button-radius-start-start: 0;
+--button-radius-start-end: 0;
+--button-radius-start: var(--button-radius, var(--helix-radii-sm));
+}
+
+:host([orientation="vertical"]:not([variant="spaced"])) ::slotted(*:not(:last-child)) {
+--button-radius-end-end: 0;
+--button-radius-end-start: 0;
+--button-radius-end: var(--button-radius, var(--helix-radii-sm));
+}
+
+::slotted(*:hover),
+::slotted(*:focus-within) {
+position: relative;
+
+z-index: var(--helix-layer-raised);
+}
+
+:host([variant="spaced"]) {
+gap: var(--button-group-gap, var(--helix-space-xs));
+}
+
+@media print {
+:host {
+display: none;
+}
+}`);

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

@@ -0,0 +1,48 @@
+import { HelixHeadlessButtonGroup } from '@fusion.dev/helix-headless/button-group';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary Groups related buttons into one control.
+ *
+ * @description
+ * The buttons are joined into a single shape: the outer corners keep their
+ * radius, the inner ones lose it, and adjacent borders collapse into one line.
+ *
+ * That joining is in the base layer, paired with `data-button` the way the
+ * button's own box is, because the corner belongs to the control inside each
+ * button's shadow root and a rule in here cannot reach it. The same rule
+ * therefore serves a consumer's own anchor styled as a button.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category actions
+ * @aliases Segmented buttons, Split button
+ * @documentation https://helix.fusion.dev/components/button-group
+ *
+ * @slot - The buttons in the group.
+ *
+ * @cssproperty --button-group-gap - Space between the buttons, when `spaced`.
+ *
+ * @property appearance - Whether the buttons are one bar or a spaced row.
+ */
+export declare class HelixButtonGroup extends HelixHeadlessButtonGroup {
+    static styles: CSSResultGroup;
+    /**
+     * Whether the buttons are one bar or a spaced row.
+     *
+     * Joined by default, which is what a button group has always meant here: one
+     * control made of parts, sharing borders, reading as a segmented bar.
+     *
+     * `spaced` is the same set with air between them, for a row of related but
+     * separate actions. It exists because the semantics and the joining were one
+     * thing and should not have been: `role="group"` and a shared name are what
+     * make a set of buttons a set, and a consumer who wanted that *and* ordinary
+     * spacing had to choose. `helix-flex` gives the spacing and no group; this
+     * gave the group and no choice about the spacing.
+     */
+    variant?: 'joined' | 'spaced';
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-button-group': HelixButtonGroup;
+    }
+}

package/dist/button-group/root/button-group-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 { HelixHeadlessButtonGroup } from '@fusion.dev/helix-headless/button-group';
+import { property } from 'lit/decorators.js';
+import { styles } from './button-group-root.css.js';
+/**
+ * @summary Groups related buttons into one control.
+ *
+ * @description
+ * The buttons are joined into a single shape: the outer corners keep their
+ * radius, the inner ones lose it, and adjacent borders collapse into one line.
+ *
+ * That joining is in the base layer, paired with `data-button` the way the
+ * button's own box is, because the corner belongs to the control inside each
+ * button's shadow root and a rule in here cannot reach it. The same rule
+ * therefore serves a consumer's own anchor styled as a button.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category actions
+ * @aliases Segmented buttons, Split button
+ * @documentation https://helix.fusion.dev/components/button-group
+ *
+ * @slot - The buttons in the group.
+ *
+ * @cssproperty --button-group-gap - Space between the buttons, when `spaced`.
+ *
+ * @property appearance - Whether the buttons are one bar or a spaced row.
+ */
+let HelixButtonGroup = class HelixButtonGroup extends HelixHeadlessButtonGroup {
+    static { this.styles = styles; }
+};
+__decorate([
+    property({ reflect: true })
+], HelixButtonGroup.prototype, "variant", void 0);
+HelixButtonGroup = __decorate([
+    customElement('helix-button-group')
+], HelixButtonGroup);
+export { HelixButtonGroup };

package/dist/callout/index.d.ts

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

package/dist/callout/index.js

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

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

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

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

@@ -0,0 +1,82 @@
+// Generated from src/callout/root/callout-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+
+font-size: var(--helix-text-sm);
+background-color: var(
+--callout-background-color,
+color-mix(in oklab, var(--_callout-color) 10%, transparent)
+);
+overflow: hidden;
+position: relative;
+
+border-radius: var(--callout-radius, var(--helix-radii-sm));
+color: var(--helix-color-foreground);
+display: flex;
+gap: var(--helix-space-sm);
+
+padding: var(--helix-space-md);
+padding-inline-start: calc(var(--helix-space-md) + var(--helix-border-thick));
+
+--_callout-color: var(--helix-color-info);
+}
+
+:host::before {
+background-color: var(--_callout-color);
+content: "";
+inline-size: var(--helix-border-thick);
+inset-block: 0;
+inset-inline-start: 0;
+position: absolute;
+}
+
+:host([tone="success"]) {
+--_callout-color: var(--helix-color-success);
+}
+
+:host([tone="warning"]) {
+--_callout-color: var(--helix-color-warning);
+}
+
+:host([tone="danger"]) {
+--_callout-color: var(--helix-color-danger);
+}
+
+[part="icon"] {
+color: var(--_callout-color);
+display: inline-flex;
+flex: 0 0 auto;
+}
+
+[part="icon"] svg {
+block-size: var(--helix-size-icon);
+inline-size: var(--helix-size-icon);
+}
+
+slot[name="icon"]::slotted(*) {
+--icon-size: var(--helix-size-icon);
+
+block-size: var(--helix-size-icon);
+inline-size: var(--helix-size-icon);
+}
+
+[part="content"] {
+line-height: var(--helix-leading-normal);
+min-inline-size: 0;
+}
+
+slot[name="title"]::slotted(*) {
+color: var(--helix-color-foreground);
+
+display: block;
+font-size: var(--helix-text-sm);
+font-weight: var(--helix-weight-semibold);
+margin: var(--helix-space-none);
+}
+
+@media print {
+:host {
+background-color: transparent;
+box-shadow: none;
+}
+}`);

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

@@ -0,0 +1,36 @@
+import { HelixHeadlessCallout } from '@fusion.dev/helix-headless/callout';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary Sets a passage apart as information, a warning, or an error.
+ *
+ * @description
+ * Tinted from the severity's status color with `color-mix`, and marked with a
+ * bar on the inline start so the severity survives being read in grayscale or
+ * by anyone who does not distinguish the hues.
+ *
+ * There is no treatment axis here. `tone` carries the meaning and lives on the
+ * headless tier; this tier only decides what that meaning looks like.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category markers
+ * @aliases Admonition, Notice, Note, Alert
+ * @documentation https://helix.fusion.dev/components/callout
+ *
+ * @slot - The callout's content.
+ * @slot icon - Replaces the icon chosen by `severity`.
+ *
+ * @csspart content - The content region.
+ * @csspart icon - The icon region.
+ *
+ * @cssproperty --callout-background-color - Fill behind the callout.
+ * @cssproperty --callout-radius - Corner radius of the callout.
+ */
+export declare class HelixCallout extends HelixHeadlessCallout {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-callout': HelixCallout;
+    }
+}

package/dist/callout/root/callout-root.js

@@ -0,0 +1,42 @@
+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 { HelixHeadlessCallout } from '@fusion.dev/helix-headless/callout';
+import { styles } from './callout-root.css.js';
+/**
+ * @summary Sets a passage apart as information, a warning, or an error.
+ *
+ * @description
+ * Tinted from the severity's status color with `color-mix`, and marked with a
+ * bar on the inline start so the severity survives being read in grayscale or
+ * by anyone who does not distinguish the hues.
+ *
+ * There is no treatment axis here. `tone` carries the meaning and lives on the
+ * headless tier; this tier only decides what that meaning looks like.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category markers
+ * @aliases Admonition, Notice, Note, Alert
+ * @documentation https://helix.fusion.dev/components/callout
+ *
+ * @slot - The callout's content.
+ * @slot icon - Replaces the icon chosen by `severity`.
+ *
+ * @csspart content - The content region.
+ * @csspart icon - The icon region.
+ *
+ * @cssproperty --callout-background-color - Fill behind the callout.
+ * @cssproperty --callout-radius - Corner radius of the callout.
+ */
+let HelixCallout = class HelixCallout extends HelixHeadlessCallout {
+    static { this.styles = styles; }
+};
+HelixCallout = __decorate([
+    customElement('helix-callout')
+], HelixCallout);
+export { HelixCallout };

package/dist/card/index.d.ts

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

package/dist/card/index.js

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