@fusion.dev/helix 0.0.0-dev

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

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

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

@@ -0,0 +1,111 @@
+// Generated from src/card/root/card-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+background-color: var(--card-background-color, var(--helix-color-surface));
+border: var(--card-border-width, var(--helix-border-surface)) solid
+var(--card-border-color, var(--helix-color-border));
+
+border-radius: var(--card-radius, var(--helix-radii-lg));
+
+box-shadow: var(--card-shadow, var(--helix-shadow-surface));
+color: var(--helix-color-foreground-muted);
+
+align-content: var(--card-align, start);
+display: grid;
+gap: var(--helix-space-sm);
+grid-template-columns: minmax(0, 1fr);
+line-height: var(--helix-leading-normal);
+
+overflow: hidden;
+padding: var(--_card-inset);
+transition:
+border-color var(--helix-duration-fast) var(--helix-easing-standard),
+box-shadow var(--helix-duration-fast) var(--helix-easing-standard);
+
+--_card-inset: var(--card-padding, var(--helix-space-control));
+
+--_card-media: var(--card-media-size, 12rem);
+}
+
+:host([separation="elevated"]) {
+border-color: transparent;
+
+--card-shadow: var(--helix-shadow-md);
+}
+
+:host([separation="filled"]) {
+border-color: transparent;
+
+--card-shadow: none;
+}
+
+:host([separation="plain"]) {
+background-color: transparent;
+border-color: transparent;
+}
+
+slot[name="media"]::slotted(*) {
+
+block-size: var(--card-media-block-size, auto);
+display: block;
+inline-size: calc(100% + var(--_card-inset) * 2);
+margin: calc(var(--_card-inset) * -1);
+margin-block-end: 0;
+object-fit: cover;
+}
+
+:host([media-placement="end"]) slot[name="media"]::slotted(*) {
+margin-block-end: calc(var(--_card-inset) * -1);
+margin-block-start: 0;
+order: 1;
+}
+
+slot[name="header"]::slotted(*) {
+color: var(--helix-color-foreground);
+}
+
+slot[name="footer"]::slotted(*) {
+justify-self: end;
+}
+
+:host([orientation="horizontal"]) {
+padding-inline-start: calc(var(--_card-media) + var(--_card-inset));
+position: relative;
+}
+
+:host([orientation="horizontal"]) slot[name="media"]::slotted(*) {
+block-size: 100%;
+inline-size: var(--_card-media);
+inset-block: 0;
+inset-inline-start: 0;
+margin: var(--helix-space-none);
+position: absolute;
+}
+
+@media (prefers-reduced-motion: reduce) {
+:host {
+transition: none;
+}
+}
+
+:host([material="glass"]) {
+backdrop-filter: var(--card-backdrop, var(--helix-material-backdrop));
+background-color: var(--card-background-color, var(--helix-material-translucent));
+}
+
+:host([material="frosted"]) {
+backdrop-filter: var(--card-backdrop, blur(var(--helix-material-blur-lg)));
+background-color: var(--card-background-color, var(--helix-material-translucent-strong));
+}
+
+:host([material="transparent"]) {
+backdrop-filter: none;
+background-color: transparent;
+}
+
+@media print {
+:host {
+background-color: transparent;
+box-shadow: none;
+}
+}`);

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

@@ -0,0 +1,120 @@
+import { HelixHeadlessCard } from '@fusion.dev/helix-headless/card';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary Groups related content and actions into a single surface.
+ *
+ * @description
+ * Regions are slots: `media`, `header`, the default slot for content, and
+ * `footer`. An omitted region takes no space, so a card with only content needs
+ * no wrapper markup at all.
+ *
+ * `media` runs edge to edge and clips to the card's corners, so an image needs
+ * no inset correction. Set `orientation="horizontal"` to move it alongside the
+ * header, content, and footer stack rather than above it, or
+ * `media-placement="end"` to put it under the content instead of over it, which
+ * is what a chart concluding a card wants.
+ *
+ * Regions are bare slots with no wrapper element, so an omitted one occupies no
+ * space without the card having to detect that it is missing. Style slotted
+ * content directly rather than reaching for a part: a header is whatever
+ * element you slotted, not a wrapper around it.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category layout
+ * @aliases Panel, Surface
+ * @documentation https://helix.fusion.dev/components/card
+ *
+ * @slot - The card's main content.
+ * @slot footer - Actions that conclude the card.
+ * @slot header - Title and any actions for the whole card.
+ * @slot media - Image, video, or chart that runs edge to edge, outside the inset.
+ *
+ * @cssproperty --card-align - How the regions pack when the card is stretched
+ *   taller than its content. `start` by default, so the slack is at the bottom;
+ *   `space-between` puts a footer on the floor.
+ * @cssproperty --card-backdrop - Filter applied behind a `frosted` or `glass` card. Follows
+ *   the theme's material policy; set it to override the strength on one card.
+ * @cssproperty --card-background-color - Surface behind the card.
+ * @cssproperty --card-border-color - Border color of the surface.
+ * @cssproperty --card-border-width - Width of the surface's edge. Follows
+ *   `--helix-border-surface`, a hairline, so the surface is told apart by its edge unless a
+ *   theme says otherwise.
+ * @cssproperty --card-media-block-size - Height of the media region. Defaults to
+ *   `auto`, which is an image's own shape and is not a height a chart has.
+ * @cssproperty --card-media-size - Width of the media column when horizontal.
+ * @cssproperty --card-padding - Inset applied to each region.
+ * @cssproperty --card-radius - Corner radius of the surface.
+ * @cssproperty --card-shadow - Shadow under the surface. What `elevated` sets, and what a
+ *   `data-card` link raises on hover.
+ */
+export declare class HelixCard extends HelixHeadlessCard {
+    /**
+     * How the card separates itself from the page.
+     *
+     * **One value per mechanism, and the theme has the same four.**
+     * `ThemeIntent.separation` is `border | fill | shadow | space`, so these are
+     * the component's words for what a theme states as a policy, one to one. It
+     * was `appearance`, which is the library's word for four different questions
+     * and is being retired from all of them: `outlined` on a Card says where the
+     * surface ends and `outlined` on a Button says how much ink, and one word
+     * cannot keep saying both.
+     *
+     * - `outlined` is the default, and a hairline is usually enough. It costs
+     *   less attention than a shadow: a screen of shadowed cards reads as a stack
+     *   of things floating, none of them settled.
+     * - `elevated` is lifted off the page instead of framed, for a card on a
+     *   colored or busy background, where a line has to compete with whatever is
+     *   behind it and a shadow does not.
+     * - `filled` is told apart by its own color, with neither edge nor lift. For
+     *   a dense surface where a border on every card is a grid of lines, and for
+     *   a theme whose `separation` policy is `fill`, which pushes the surface
+     *   ladder away from the page precisely so this reads.
+     * - `plain` has no frame at all: the card is a layout and whatever it sits in
+     *   is the surface. For a card inside something already bounded, where a
+     *   second box adds a line and no meaning.
+     *
+     * **`filled` is new and it closes a hole the engine could already see.**
+     * `plain` clears the ground *and* the edge, so a surface with its own color
+     * and neither edge nor lift was unsayable while being one of the four things
+     * a theme could ask for.
+     */
+    separation?: 'elevated' | 'filled' | 'outlined' | 'plain';
+    /**
+     * What the card is made of.
+     *
+     * **A third axis, and it passes the test the other two answer to.**
+     * `separation` is where the surface ends and `tone` is what it means; both of
+     * those can be true at once with this, an elevated glass card being a
+     * perfectly ordinary thing to want, so it is not a value of either.
+     *
+     * **An attribute rather than a hook, because glass is not one declaration.**
+     * It is a translucent ground *and* a backdrop filter, and either without the
+     * other does nothing: a blur behind an opaque background is invisible, and a
+     * translucent card over an unfiltered page is a smear. `--card-backdrop`
+     * shipped on its own for exactly one commit and was that trap, a published
+     * hook a consumer could set and see nothing happen. The component owns the
+     * pair; a theme owns how strong it is.
+     *
+     * Absent is opaque, per the rule that a reflected property takes no default,
+     * so the stylesheet only describes the departure.
+     *
+     * **The whole axis, which it did not used to be.** `glass` shipped alone,
+     * so a card offered one point of a three-point language and said nothing
+     * about the other two. `frosted` is the same pair turned up, the heavier
+     * ground under the heavier blur, for a card that has to stay readable over
+     * a busy page; `transparent` drops both, for one that is structure and
+     * spacing with the page showing through. See 270.
+     */
+    material?: 'frosted' | 'glass' | 'transparent';
+    /**
+     * Whether media sits above the content stack or beside it.
+     */
+    orientation?: 'vertical' | 'horizontal';
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-card': HelixCard;
+    }
+}

package/dist/card/root/card-root.js

@@ -0,0 +1,74 @@
+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 { HelixHeadlessCard } from '@fusion.dev/helix-headless/card';
+import { property } from 'lit/decorators.js';
+import { styles } from './card-root.css.js';
+/**
+ * @summary Groups related content and actions into a single surface.
+ *
+ * @description
+ * Regions are slots: `media`, `header`, the default slot for content, and
+ * `footer`. An omitted region takes no space, so a card with only content needs
+ * no wrapper markup at all.
+ *
+ * `media` runs edge to edge and clips to the card's corners, so an image needs
+ * no inset correction. Set `orientation="horizontal"` to move it alongside the
+ * header, content, and footer stack rather than above it, or
+ * `media-placement="end"` to put it under the content instead of over it, which
+ * is what a chart concluding a card wants.
+ *
+ * Regions are bare slots with no wrapper element, so an omitted one occupies no
+ * space without the card having to detect that it is missing. Style slotted
+ * content directly rather than reaching for a part: a header is whatever
+ * element you slotted, not a wrapper around it.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category layout
+ * @aliases Panel, Surface
+ * @documentation https://helix.fusion.dev/components/card
+ *
+ * @slot - The card's main content.
+ * @slot footer - Actions that conclude the card.
+ * @slot header - Title and any actions for the whole card.
+ * @slot media - Image, video, or chart that runs edge to edge, outside the inset.
+ *
+ * @cssproperty --card-align - How the regions pack when the card is stretched
+ *   taller than its content. `start` by default, so the slack is at the bottom;
+ *   `space-between` puts a footer on the floor.
+ * @cssproperty --card-backdrop - Filter applied behind a `frosted` or `glass` card. Follows
+ *   the theme's material policy; set it to override the strength on one card.
+ * @cssproperty --card-background-color - Surface behind the card.
+ * @cssproperty --card-border-color - Border color of the surface.
+ * @cssproperty --card-border-width - Width of the surface's edge. Follows
+ *   `--helix-border-surface`, a hairline, so the surface is told apart by its edge unless a
+ *   theme says otherwise.
+ * @cssproperty --card-media-block-size - Height of the media region. Defaults to
+ *   `auto`, which is an image's own shape and is not a height a chart has.
+ * @cssproperty --card-media-size - Width of the media column when horizontal.
+ * @cssproperty --card-padding - Inset applied to each region.
+ * @cssproperty --card-radius - Corner radius of the surface.
+ * @cssproperty --card-shadow - Shadow under the surface. What `elevated` sets, and what a
+ *   `data-card` link raises on hover.
+ */
+let HelixCard = class HelixCard extends HelixHeadlessCard {
+    static { this.styles = styles; }
+};
+__decorate([
+    property({ reflect: true })
+], HelixCard.prototype, "separation", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixCard.prototype, "material", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixCard.prototype, "orientation", void 0);
+HelixCard = __decorate([
+    customElement('helix-card')
+], HelixCard);
+export { HelixCard };

package/dist/carousel/index.d.ts

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

package/dist/carousel/index.js

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

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

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

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

@@ -0,0 +1,347 @@
+// Generated from src/carousel/root/carousel-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: block;
+
+--_carousel-bleed: var(--carousel-bleed, var(--helix-space-md));
+--_carousel-gap: var(--carousel-gap, var(--helix-space-md));
+--_carousel-per-view: 1;
+}
+
+:host {
+display: grid;
+grid-template-columns: auto minmax(0, 1fr) auto;
+grid-template-rows: auto minmax(0, 1fr) auto;
+}
+
+[part="track"] {
+grid-area: 2 / 2;
+}
+
+[part="controls"],
+[part="indicators"] {
+align-items: center;
+display: flex;
+gap: var(--helix-space-2xs);
+}
+
+[part="indicators"] {
+grid-area: 3 / 2;
+justify-self: var(--_carousel-indicators-along);
+padding-block-start: var(--helix-space-sm);
+padding-inline: var(--_carousel-bleed);
+}
+
+[part="controls"] {
+grid-area: 3 / 2;
+justify-self: var(--_carousel-controls-along);
+padding-block-start: var(--helix-space-sm);
+padding-inline: var(--_carousel-bleed);
+}
+
+[part="indicators"] {
+--_carousel-indicators-along: start;
+}
+
+[part="controls"] {
+--_carousel-controls-along: end;
+}
+
+@media (hover: none) and (pointer: coarse) {
+
+:host(:not([controls="always"])) [part="indicators"] {
+--_carousel-indicators-along: center;
+}
+}
+
+:host([indicator-placement="block-start"]) [part="indicators"] {
+grid-area: 1 / 2;
+padding-block: var(--helix-space-none) var(--helix-space-sm);
+}
+
+:host([controls-placement="block-start"]) [part="controls"] {
+grid-area: 1 / 2;
+padding-block: var(--helix-space-none) var(--helix-space-sm);
+}
+
+:host([indicator-placement="inline-start"]) [part="indicators"],
+:host([indicator-placement="inline-end"]) [part="indicators"] {
+align-self: var(--_carousel-indicators-along);
+flex-direction: column;
+justify-self: center;
+padding-block-start: var(--helix-space-none);
+padding-inline: var(--helix-space-none);
+}
+
+:host([controls-placement="inline-start"]) [part="controls"],
+:host([controls-placement="inline-end"]) [part="controls"] {
+align-self: var(--_carousel-controls-along);
+flex-direction: column;
+justify-self: center;
+padding-block-start: var(--helix-space-none);
+padding-inline: var(--helix-space-none);
+}
+
+:host([indicator-placement="inline-start"]) [part="indicators"],
+:host([indicator-placement="inline-end"]) [part="indicators"] {
+--_carousel-indicators-along: center;
+}
+
+:host([controls-placement="inline-start"]) [part="controls"],
+:host([controls-placement="inline-end"]) [part="controls"],
+:host([controls-placement="overlay"]) [part="controls"] {
+--_carousel-controls-along: center;
+}
+
+:host([indicator-align="start"]) [part="indicators"] {
+--_carousel-indicators-along: start;
+}
+
+:host([indicator-align="center"]) [part="indicators"] {
+--_carousel-indicators-along: center;
+}
+
+:host([indicator-align="end"]) [part="indicators"] {
+--_carousel-indicators-along: end;
+}
+
+:host([controls-align="start"]) [part="controls"] {
+--_carousel-controls-along: start;
+}
+
+:host([controls-align="center"]) [part="controls"] {
+--_carousel-controls-along: center;
+}
+
+:host([controls-align="end"]) [part="controls"] {
+--_carousel-controls-along: end;
+}
+
+:host([indicator-placement="inline-start"]) [part="indicators"] {
+grid-area: 2 / 1;
+padding-inline-end: var(--helix-space-sm);
+}
+
+:host([controls-placement="inline-start"]) [part="controls"] {
+grid-area: 2 / 1;
+padding-inline-end: var(--helix-space-sm);
+}
+
+:host([indicator-placement="inline-end"]) [part="indicators"] {
+grid-area: 2 / 3;
+padding-inline-start: var(--helix-space-sm);
+}
+
+:host([controls-placement="inline-end"]) [part="controls"] {
+grid-area: 2 / 3;
+padding-inline-start: var(--helix-space-sm);
+}
+
+[part="rotation"],
+[part="previous"],
+[part="next"] {
+all: unset;
+
+box-sizing: border-box;
+align-items: center;
+block-size: var(--helix-size-control-tight);
+border: var(--helix-border-thin) solid var(--helix-color-border);
+border-radius: var(--helix-radii-sm);
+color: var(--helix-color-foreground-muted);
+cursor: pointer;
+display: inline-flex;
+inline-size: var(--helix-size-control-tight);
+justify-content: center;
+}
+
+[part="rotation"]:hover,
+[part="previous"]:hover,
+[part="next"]:hover {
+background-color: var(--helix-color-surface-sunken);
+color: var(--helix-color-foreground);
+}
+
+[part="rotation"]:focus-visible,
+[part="previous"]:focus-visible,
+[part="next"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
+[part="rotation"] svg,
+[part="previous"] svg,
+[part="next"] svg {
+block-size: 1em;
+inline-size: 1em;
+}
+
+[part="track"] {
+display: flex;
+gap: var(--_carousel-gap);
+overflow-x: auto;
+
+padding-block: var(--helix-space-md);
+padding-inline: var(--_carousel-bleed);
+scroll-padding-inline: var(--_carousel-bleed);
+scroll-snap-type: x mandatory;
+scrollbar-width: none;
+}
+
+[part="track"]::-webkit-scrollbar {
+display: none;
+}
+
+:host([orientation="vertical"]) [part="track"] {
+block-size: var(--carousel-block-size, 20rem);
+flex-direction: column;
+overflow-x: hidden;
+overflow-y: auto;
+scroll-snap-type: y mandatory;
+}
+
+[part="slide"] {
+display: flex;
+flex: 0 0
+calc(
+(100% - (var(--_carousel-per-view) - 1) * var(--_carousel-gap)) /
+var(--_carousel-per-view)
+);
+scroll-snap-align: start;
+}
+
+[part="slide"] ::slotted(*) {
+flex: 1 1 0;
+min-block-size: 0;
+min-inline-size: 0;
+}
+
+:host([orientation="vertical"]) [part="slide"] {
+flex-direction: column;
+flex: 0 0
+calc(
+(100% - (var(--_carousel-per-view) - 1) * var(--_carousel-gap)) /
+var(--_carousel-per-view)
+);
+}
+
+:host([per-view="2"]) {
+--_carousel-per-view: 2;
+}
+
+:host([per-view="3"]) {
+--_carousel-per-view: 3;
+}
+
+:host([per-view="4"]) {
+--_carousel-per-view: 4;
+}
+
+:host([per-view="5"]) {
+--_carousel-per-view: 5;
+}
+
+[part="indicator"] {
+all: unset;
+background-color: var(--helix-color-border);
+block-size: var(--helix-space-xs);
+border-radius: var(--helix-radii-full);
+box-sizing: border-box;
+cursor: pointer;
+inline-size: var(--helix-space-xs);
+transition:
+background-color var(--_carousel-indicator-motion),
+inline-size var(--_carousel-indicator-motion);
+
+--_carousel-indicator-motion: var(--helix-duration-slow) var(--helix-easing-emphasized);
+}
+
+[part="indicator"][data-current] {
+background-color: var(--helix-color-primary);
+inline-size: var(--helix-space-lg);
+}
+
+:host([indicator-placement="inline-start"]) [part="indicator"],
+:host([indicator-placement="inline-end"]) [part="indicator"] {
+transition:
+background-color var(--_carousel-indicator-motion),
+block-size var(--_carousel-indicator-motion);
+}
+
+:host([indicator-placement="inline-start"]) [part="indicator"][data-current],
+:host([indicator-placement="inline-end"]) [part="indicator"][data-current] {
+block-size: var(--helix-space-lg);
+inline-size: var(--helix-space-xs);
+}
+
+[part="indicator"]:hover {
+background-color: var(--helix-color-foreground-muted);
+}
+
+[part="indicator"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
+:host([controls-placement="overlay"]) [part="controls"] {
+grid-area: 2 / 2;
+justify-self: stretch;
+}
+
+:host([controls-placement="overlay"]) [part="controls"] {
+align-items: var(--_carousel-controls-along);
+
+justify-content: flex-start;
+padding-block-start: var(--helix-space-none);
+padding-inline: var(--helix-space-md);
+pointer-events: none;
+z-index: var(--helix-layer-raised);
+}
+
+:host([controls-placement="overlay"]) [part="previous"],
+:host([controls-placement="overlay"]) [part="next"],
+:host([controls-placement="overlay"]) [part="rotation"] {
+background-color: var(--helix-color-surface-overlay);
+border-color: transparent;
+box-shadow: var(--helix-shadow-md);
+pointer-events: auto;
+}
+
+:host([controls-placement="overlay"]) [part="next"] {
+margin-inline-start: auto;
+}
+
+:host([controls-placement="overlay"]) [part="rotation"] {
+order: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+[part="indicator"],
+:host([indicator-placement="inline-start"]) [part="indicator"],
+:host([indicator-placement="inline-end"]) [part="indicator"] {
+transition: none;
+}
+}
+
+:host(:dir(rtl)) [part="previous"] svg,
+:host(:dir(rtl)) [part="next"] svg {
+scale: -1 1;
+}
+
+@media print {
+:host {
+box-shadow: none;
+max-block-size: none;
+overflow: visible;
+}
+}
+
+@media (hover: none) and (pointer: coarse) {
+:host(:not([controls="always"])) [part="previous"],
+:host(:not([controls="always"])) [part="next"] {
+display: none;
+}
+
+:host(:not([controls="always"]):not([autoplay])) [part="controls"] {
+display: none;
+}
+}`);