@fusion.dev/helix 0.0.0-dev

package/dist/avatar/group/avatar-group.css.d.ts

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

package/dist/avatar/group/avatar-group.css.js

@@ -0,0 +1,48 @@
+// Generated from src/avatar/group/avatar-group.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+--_avatar-group-ring: var(--avatar-group-ring-color, var(--helix-color-background));
+align-items: center;
+display: flex;
+}
+
+::slotted(*) {
+box-shadow: 0 0 0 var(--helix-border-thick) var(--_avatar-group-ring);
+flex: 0 0 auto;
+}
+
+::slotted(*:not(:first-child)) {
+margin-inline-start: calc(-1 * var(--avatar-group-overlap, var(--helix-space-sm)));
+}
+
+:host([max="1"]) ::slotted(:nth-child(n + 2)),
+:host([max="2"]) ::slotted(:nth-child(n + 3)),
+:host([max="3"]) ::slotted(:nth-child(n + 4)),
+:host([max="4"]) ::slotted(:nth-child(n + 5)),
+:host([max="5"]) ::slotted(:nth-child(n + 6)),
+:host([max="6"]) ::slotted(:nth-child(n + 7)),
+:host([max="7"]) ::slotted(:nth-child(n + 8)),
+:host([max="8"]) ::slotted(:nth-child(n + 9)),
+:host([max="9"]) ::slotted(:nth-child(n + 10)),
+:host([max="10"]) ::slotted(:nth-child(n + 11)),
+:host([max="11"]) ::slotted(:nth-child(n + 12)),
+:host([max="12"]) ::slotted(:nth-child(n + 13)) {
+display: none;
+}
+
+[part="overflow"] {
+align-items: center;
+margin-inline-start: calc(-1 * var(--avatar-group-overlap, var(--helix-space-sm)));
+background-color: var(--helix-color-surface-sunken);
+block-size: var(--avatar-size, var(--helix-size-control-md));
+border-radius: var(--helix-radii-full);
+box-shadow: 0 0 0 var(--helix-border-thick) var(--_avatar-group-ring);
+color: var(--helix-color-foreground-muted);
+display: inline-flex;
+flex: 0 0 auto;
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-xs);
+font-weight: var(--helix-weight-medium);
+inline-size: var(--avatar-size, var(--helix-size-control-md));
+justify-content: center;
+}`);

package/dist/avatar/group/avatar-group.d.ts

@@ -0,0 +1,34 @@
+import { HelixHeadlessAvatarGroup } from '@fusion.dev/helix-headless/avatar';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary Overlapping avatars, with a count for the ones not shown.
+ *
+ * @description
+ * They overlap by a step of space, which is enough to read as a stack without
+ * the faces occluding each other. Each carries a ring in the page's own
+ * background color, because a stack with no separation between its members
+ * reads as one shape rather than several: the ring is what makes the edge of
+ * each avatar visible against the one behind it.
+ *
+ * Each avatar is drawn over the one before it, which falls out of document
+ * order and needs no `z-index`. The familiar trick for putting the *first*
+ * avatar on top is `row-reverse`, and it also reverses the row: the person
+ * written first appears last. A facepile whose reading order is the reverse of
+ * its markup is the worse trade of the two.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @aliases Avatar stack, Facepile
+ * @documentation https://helix.fusion.dev/components/avatar
+ *
+ * @cssproperty --avatar-group-overlap - How far each avatar sits over the one before it.
+ * @cssproperty --avatar-group-ring-color - The separation drawn between one avatar and the next.
+ */
+export declare class HelixAvatarGroup extends HelixHeadlessAvatarGroup {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-avatar-group': HelixAvatarGroup;
+    }
+}

package/dist/avatar/group/avatar-group.js

@@ -0,0 +1,40 @@
+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 { HelixHeadlessAvatarGroup } from '@fusion.dev/helix-headless/avatar';
+import { styles } from './avatar-group.css.js';
+/**
+ * @summary Overlapping avatars, with a count for the ones not shown.
+ *
+ * @description
+ * They overlap by a step of space, which is enough to read as a stack without
+ * the faces occluding each other. Each carries a ring in the page's own
+ * background color, because a stack with no separation between its members
+ * reads as one shape rather than several: the ring is what makes the edge of
+ * each avatar visible against the one behind it.
+ *
+ * Each avatar is drawn over the one before it, which falls out of document
+ * order and needs no `z-index`. The familiar trick for putting the *first*
+ * avatar on top is `row-reverse`, and it also reverses the row: the person
+ * written first appears last. A facepile whose reading order is the reverse of
+ * its markup is the worse trade of the two.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @aliases Avatar stack, Facepile
+ * @documentation https://helix.fusion.dev/components/avatar
+ *
+ * @cssproperty --avatar-group-overlap - How far each avatar sits over the one before it.
+ * @cssproperty --avatar-group-ring-color - The separation drawn between one avatar and the next.
+ */
+let HelixAvatarGroup = class HelixAvatarGroup extends HelixHeadlessAvatarGroup {
+    static { this.styles = styles; }
+};
+HelixAvatarGroup = __decorate([
+    customElement('helix-avatar-group')
+], HelixAvatarGroup);
+export { HelixAvatarGroup };

package/dist/avatar/index.d.ts

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

package/dist/avatar/index.js

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

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

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

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

@@ -0,0 +1,55 @@
+// Generated from src/avatar/root/avatar-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+--_avatar-size: var(--avatar-size, var(--helix-size-avatar));
+
+align-items: center;
+
+background-color: var(--avatar-background-color, var(--helix-color-surface-raised));
+block-size: var(--_avatar-size);
+border-radius: var(--helix-radii-full);
+color: var(--helix-color-foreground);
+display: inline-flex;
+flex: 0 0 auto;
+inline-size: var(--_avatar-size);
+justify-content: center;
+overflow: hidden;
+}
+
+:host([size="sm"]) {
+--_avatar-size: var(--avatar-size, var(--helix-size-avatar-sm));
+}
+
+:host([size="lg"]) {
+--_avatar-size: var(--avatar-size, var(--helix-size-avatar-lg));
+}
+
+:host([shape="square"]) {
+border-radius: var(--helix-radii-md);
+}
+
+::slotted(*) {
+block-size: 100%;
+inline-size: 100%;
+object-fit: cover;
+}
+
+[part="image"] {
+block-size: 100%;
+inline-size: 100%;
+object-fit: cover;
+}
+
+[part="initials"] {
+font-size: calc(var(--_avatar-size) * 0.4);
+font-weight: var(--helix-weight-medium);
+letter-spacing: var(--helix-tracking-wide);
+line-height: 1;
+user-select: none;
+}
+
+@media print {
+:host {
+box-shadow: none;
+}
+}`);

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

@@ -0,0 +1,41 @@
+import { HelixHeadlessAvatar } from '@fusion.dev/helix-headless/avatar';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary Represents a person or entity with an image or their initials.
+ *
+ * @description
+ * Initials scale with the avatar rather than being sized per size, because the
+ * font size is set in `em` against the avatar's own dimension. One rule covers
+ * every size, including one a consumer sets themselves through
+ * `--avatar-size`.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category media
+ * @aliases Profile picture, Gravatar
+ * @documentation https://helix.fusion.dev/components/avatar
+ *
+ * @slot - Replaces the image and initials entirely, for an icon.
+ *
+ * @csspart image - The image, when one is loading or loaded.
+ * @csspart initials - The initials shown when there is no usable image.
+ *
+ * @cssproperty --avatar-background-color - Fill behind the initials.
+ * @cssproperty --avatar-size - Edge length of the avatar.
+ */
+export declare class HelixAvatar extends HelixHeadlessAvatar {
+    /**
+     * Whether the avatar is a circle or a rounded square.
+     */
+    shape?: 'circle' | 'square';
+    /**
+     * Edge length of the avatar.
+     */
+    size?: 'sm' | 'md' | 'lg';
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-avatar': HelixAvatar;
+    }
+}

package/dist/avatar/root/avatar-root.js

@@ -0,0 +1,46 @@
+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 { HelixHeadlessAvatar } from '@fusion.dev/helix-headless/avatar';
+import { property } from 'lit/decorators.js';
+import { styles } from './avatar-root.css.js';
+/**
+ * @summary Represents a person or entity with an image or their initials.
+ *
+ * @description
+ * Initials scale with the avatar rather than being sized per size, because the
+ * font size is set in `em` against the avatar's own dimension. One rule covers
+ * every size, including one a consumer sets themselves through
+ * `--avatar-size`.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category media
+ * @aliases Profile picture, Gravatar
+ * @documentation https://helix.fusion.dev/components/avatar
+ *
+ * @slot - Replaces the image and initials entirely, for an icon.
+ *
+ * @csspart image - The image, when one is loading or loaded.
+ * @csspart initials - The initials shown when there is no usable image.
+ *
+ * @cssproperty --avatar-background-color - Fill behind the initials.
+ * @cssproperty --avatar-size - Edge length of the avatar.
+ */
+let HelixAvatar = class HelixAvatar extends HelixHeadlessAvatar {
+    static { this.styles = styles; }
+};
+__decorate([
+    property({ reflect: true })
+], HelixAvatar.prototype, "shape", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixAvatar.prototype, "size", void 0);
+HelixAvatar = __decorate([
+    customElement('helix-avatar')
+], HelixAvatar);
+export { HelixAvatar };

package/dist/badge/index.d.ts

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

package/dist/badge/index.js

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

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

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

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

@@ -0,0 +1,91 @@
+// Generated from src/badge/root/badge-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: inline-flex;
+position: relative;
+vertical-align: middle;
+
+--_badge-size: var(--helix-size-badge);
+--_badge-text: var(--helix-text-xs);
+--_badge-inset: var(--helix-space-2xs);
+--_badge-dot: var(--helix-space-xs);
+}
+
+[part="indicator"] {
+align-items: center;
+
+background-color: var(--badge-background-color, var(--helix-color-primary-surface));
+block-size: var(--_badge-size);
+border-radius: var(--helix-radii-full);
+
+box-shadow: 0 0 0 var(--helix-border-thick) var(--badge-ring-color, var(--helix-color-background));
+color: var(--helix-color-foreground-on-accent);
+display: inline-flex;
+font-size: var(--_badge-text);
+font-weight: var(--helix-weight-semibold);
+
+inset-block-start: var(--badge-offset, calc(var(--_badge-size) / 4));
+inset-inline-end: var(--badge-offset, calc(var(--_badge-size) / 4));
+justify-content: center;
+line-height: 1;
+
+min-inline-size: var(--_badge-size);
+padding-inline: var(--_badge-inset);
+
+pointer-events: none;
+position: absolute;
+translate: 50% -50%;
+white-space: nowrap;
+}
+
+[part="indicator"]:empty {
+block-size: var(--_badge-dot);
+min-inline-size: var(--_badge-dot);
+padding-inline: var(--helix-space-none);
+}
+
+[part="indicator"][data-single] {
+padding-inline: var(--helix-space-none);
+}
+
+[part="indicator"] {
+scale: 1;
+transition:
+opacity var(--helix-duration-fast) var(--helix-easing-standard),
+scale var(--helix-duration-normal) var(--helix-easing-emphasized);
+}
+
+[part="indicator"][data-blank] {
+opacity: 0;
+scale: 0;
+transition:
+opacity var(--helix-duration-fast) var(--helix-easing-standard),
+scale var(--helix-duration-fast) var(--helix-easing-accelerate);
+}
+
+@media (prefers-reduced-motion: reduce) {
+[part="indicator"] {
+transition: none;
+}
+}
+
+:host([tone="danger"]) [part="indicator"] {
+background-color: var(--badge-background-color, var(--helix-color-danger-surface));
+}
+
+:host([tone="neutral"]) [part="indicator"] {
+background-color: var(--badge-background-color, var(--helix-color-surface-raised));
+color: var(--helix-color-foreground);
+}
+
+@media (prefers-reduced-motion: reduce) {
+[part="indicator"][data-blank] {
+transition: none;
+}
+}
+
+@media print {
+:host {
+box-shadow: none;
+}
+}`);

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

@@ -0,0 +1,38 @@
+import { HelixHeadlessBadge } from '@fusion.dev/helix-headless/badge';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary Attaches a count or a presence mark to another element.
+ *
+ * @description
+ * The indicator carries a ring in the page's own background color, so it stays
+ * legible where it overlaps the thing it is pinned to. Without it a dark badge
+ * on a dark icon reads as a bite taken out of the icon.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category markers
+ * @aliases Count, Indicator, Pip
+ * @documentation https://helix.fusion.dev/components/badge
+ *
+ * @cssproperty --badge-background-color - Fill of the indicator.
+ * @cssproperty --badge-offset - Pulls the mark in from the corner, along both axes.
+ * @cssproperty --badge-ring-color - The ring separating it from what is behind.
+ */
+export declare class HelixBadge extends HelixHeadlessBadge {
+    /**
+     * What the mark means.
+     *
+     * **The docstring said "how much attention the mark asks for", which is the
+     * emphasis question, and the values answer a different one.** `danger` and
+     * `neutral` are meanings: the stylesheet picks a fill by what the count *is*,
+     * not by how loudly it is drawn. Filed under `appearance` it read as a
+     * treatment, which is the confusion `check:axes` exists to stop.
+     */
+    tone?: 'danger' | 'neutral';
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-badge': HelixBadge;
+    }
+}

package/dist/badge/root/badge-root.js

@@ -0,0 +1,38 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement } from '@fusion.dev/helix-core';
+import { HelixHeadlessBadge } from '@fusion.dev/helix-headless/badge';
+import { property } from 'lit/decorators.js';
+import { styles } from './badge-root.css.js';
+/**
+ * @summary Attaches a count or a presence mark to another element.
+ *
+ * @description
+ * The indicator carries a ring in the page's own background color, so it stays
+ * legible where it overlaps the thing it is pinned to. Without it a dark badge
+ * on a dark icon reads as a bite taken out of the icon.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category markers
+ * @aliases Count, Indicator, Pip
+ * @documentation https://helix.fusion.dev/components/badge
+ *
+ * @cssproperty --badge-background-color - Fill of the indicator.
+ * @cssproperty --badge-offset - Pulls the mark in from the corner, along both axes.
+ * @cssproperty --badge-ring-color - The ring separating it from what is behind.
+ */
+let HelixBadge = class HelixBadge extends HelixHeadlessBadge {
+    static { this.styles = styles; }
+};
+__decorate([
+    property({ reflect: true })
+], HelixBadge.prototype, "tone", void 0);
+HelixBadge = __decorate([
+    customElement('helix-badge')
+], HelixBadge);
+export { HelixBadge };

package/dist/bar-chart/index.d.ts

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

package/dist/bar-chart/index.js

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

package/dist/bar-chart/root/bar-chart-root.css.d.ts

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