@fusion.dev/helix 0.22.0 → 0.24.0

package/dist/menu/item/menu-item.css.js

@@ -16,13 +16,13 @@ display: grid;
 font-size: var(--helix-text-xs);
 
 font-weight: var(--helix-weight-medium);
-gap: var(--helix-space-xs);
 
 grid-template-columns:
-var(--menu-item-start, var(--helix-size-icon))
+var(--menu-item-start, 0px)
 minmax(0, 1fr)
-var(--helix-size-icon);
-min-block-size: var(--helix-size-control-tight);
+var(--menu-item-end, 0px);
+
+min-block-size: var(--helix-size-control);
 
 padding-inline: var(--helix-space-sm);
 transition: background-color var(--helix-duration-fast) var(--helix-easing-standard);
@@ -47,20 +47,43 @@ opacity: 0.5;
 }
 
 [part="start"] {
---icon-size: var(--helix-size-icon-tight);
+
+--icon-size: var(--helix-size-icon);
 
 align-items: center;
+
+box-sizing: border-box;
 color: var(--helix-color-foreground-subtle);
 display: flex;
-inline-size: var(--menu-item-start, var(--helix-size-icon));
 justify-content: center;
+padding-inline-end: var(--helix-space-xs);
 
 min-block-size: var(--helix-size-icon);
 }
 
+[part="start"] {
+grid-column: 1;
+}
+
+[part="item"] > slot:not([name]) {
+display: block;
+grid-column: 2;
+
+min-inline-size: 0;
+}
+
+[part="mark"] {
+grid-column: 3;
+}
+
+[part="start"][data-empty] {
+display: none;
+}
+
 [part="mark"] {
 block-size: var(--helix-size-icon);
 inline-size: var(--helix-size-icon);
+justify-self: end;
 }
 
 svg[part="mark"] {
@@ -75,6 +98,10 @@ slot[name="submenu"] {
 display: contents;
 }
 
+slot[name="submenu"]::slotted(helix-divider) {
+margin-block: var(--helix-space-2xs);
+}
+
 :host(:dir(rtl)) [part="mark"][data-submenu] {
 scale: -1 1;
 }`);

package/dist/menu/item/menu-item.d.ts

@@ -13,8 +13,9 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Menu option, Menu row
  * @documentation https://helix.fusion.dev/components/menu
  *
+ * @cssproperty --menu-item-end - Width of the trailing column, seam included, which holds a tick or the caret into a page.
  * @cssproperty --menu-item-hover-color - Fill under the pointer.
- * @cssproperty --menu-item-start - Width of the leading column, for a row carrying more than a mark.
+ * @cssproperty --menu-item-start - Width of the leading column, seam included, for a row carrying more than a mark. The menu sets it per page and zero is no column at all.
  */
 export declare class HelixMenuItem extends HelixHeadlessMenuItem {
     static styles: CSSResultGroup;

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

@@ -7,7 +7,14 @@ display: contents;
 [part="surface"] {
 
 --helix-size-control: var(--helix-size-control-sm);
+--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);
+--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);
 --helix-size-icon: var(--helix-size-icon-sm);
+--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);
+--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);
+
+--menu-item-start: 0px;
+--menu-item-end: 0px;
 
 max-block-size: var(--menu-max-block-size, var(--floating-available-block-size, none));
 overflow-y: auto;
@@ -28,6 +35,14 @@ padding-block: var(--helix-space-xs);
 padding-inline: var(--helix-space-none);
 }
 
+:host(:state(start)) [part="surface"] {
+--menu-item-start: calc(var(--helix-size-icon) + var(--helix-space-xs));
+}
+
+:host(:state(mark)) [part="surface"] {
+--menu-item-end: calc(var(--helix-size-icon) + var(--helix-space-xs));
+}
+
 [part="surface"][hidden] {
 display: none;
 }

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

@@ -5,7 +5,8 @@ display: block;
 
 [part="nav"] {
 align-items: center;
-block-size: var(--helix-size-control-tight);
+
+block-size: var(--helix-size-control-sm);
 display: flex;
 gap: var(--navigation-gap, var(--helix-space-2xs));
 

package/dist/notifications/group/notification-group.css.d.ts

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

package/dist/notifications/group/notification-group.css.js

@@ -0,0 +1,61 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: block;
+}
+
+[part="header"] {
+align-items: center;
+display: flex;
+gap: var(--helix-space-xs);
+padding-block: var(--helix-space-xs);
+padding-inline: var(--notifications-padding-inline, var(--helix-space-md));
+}
+
+[part="label"] {
+color: var(--helix-color-foreground-muted);
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-sm);
+font-weight: var(--helix-weight-medium);
+}
+
+[part="count"] {
+background-color: var(--helix-color-surface-sunken);
+border-radius: var(--helix-radii-full);
+color: var(--helix-color-foreground-subtle);
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-xs);
+font-variant-numeric: tabular-nums;
+line-height: 1;
+min-inline-size: var(--helix-size-badge);
+padding-block: var(--helix-space-2xs);
+padding-inline: var(--helix-space-xs);
+text-align: center;
+}
+
+[part="trigger"] {
+all: unset;
+align-items: center;
+border-radius: var(--helix-radii-sm);
+cursor: pointer;
+display: inline-flex;
+gap: var(--helix-space-xs);
+}
+
+[part="trigger"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
+[part="trigger"]:hover [part="label"] {
+color: var(--helix-color-foreground);
+}
+
+[part="action"] {
+align-items: center;
+display: inline-flex;
+margin-inline-start: auto;
+}
+
+[part="items"] {
+position: relative;
+}`);

package/dist/notifications/group/notification-group.d.ts

@@ -0,0 +1,37 @@
+import { HelixHeadlessNotificationGroup } from '@fusion.dev/helix-headless/notifications';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary A named set of notifications, which can be collapsed to the first of
+ * them.
+ *
+ * @description
+ * The heading is chrome: it says which pile a reader is looking at and is never
+ * the thing they came to read, so it is drawn quieter than a row's title. A feed
+ * cut into five days has five of these, and a heading at the weight of the
+ * content turns a list of notifications into a list of dates.
+ *
+ * **The stack is two lines rather than two cards.** Collapsed, the rows behind
+ * the first are not rendered at all, so there is nothing to see through: what
+ * draws the pile is a pair of pseudo-elements above the visible row, offset and
+ * inset so they read as the top edges of cards behind it. A shadow could not do
+ * it, spreading on four sides where this has a top edge and no bottom one, and
+ * having no way to sit narrower than the thing it is behind, which is the cue
+ * that says there is something back there.
+ *
+ * @since 0.24.0
+ * @status experimental
+ * @category feedback
+ * @aliases NotificationSection, FeedGroup
+ * @documentation https://helix.fusion.dev/components/notifications
+ *
+ * @event {HelixBeforeCloseEvent} helix-before-close - Fired before the group folds, and cancelable.
+ * @event {HelixBeforeOpenEvent} helix-before-open - Fired before the group unfolds. Cancelable: refusing it takes the decision and nothing moves.
+ */
+export declare class HelixNotificationGroup extends HelixHeadlessNotificationGroup {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-notification-group': HelixNotificationGroup;
+    }
+}

package/dist/notifications/group/notification-group.js

@@ -0,0 +1,16 @@
+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 { HelixHeadlessNotificationGroup } from '@fusion.dev/helix-headless/notifications';
+import { styles } from './notification-group.css.js';
+let HelixNotificationGroup = class HelixNotificationGroup extends HelixHeadlessNotificationGroup {
+    static { this.styles = styles; }
+};
+HelixNotificationGroup = __decorate([
+    customElement('helix-notification-group')
+], HelixNotificationGroup);
+export { HelixNotificationGroup };

package/dist/notifications/index.d.ts

@@ -1,2 +1,3 @@
+export { HelixNotificationGroup } from './group/notification-group.js';
 export { HelixNotification } from './notification/notification.js';
 export { HelixNotifications } from './root/notifications-root.js';

package/dist/notifications/index.js

@@ -1,2 +1,3 @@
+export { HelixNotificationGroup } from './group/notification-group.js';
 export { HelixNotification } from './notification/notification.js';
 export { HelixNotifications } from './root/notifications-root.js';

package/dist/notifications/notification/notification.css.js

@@ -3,6 +3,9 @@ export const styles = createSheet(`:host {
 
 --_notifications-line: calc(var(--helix-text-sm) * var(--helix-leading-normal));
 
+--_notifications-pad-block: var(--notifications-padding-block, var(--helix-space-xs));
+--_notifications-unread: var(--notifications-unread-block-size, var(--helix-space-xs));
+
 container-type: inline-size;
 
 display: block;
@@ -16,7 +19,7 @@ var(--notifications-rule, var(--helix-color-border));
 cursor: default;
 display: grid;
 grid-template-columns: minmax(var(--notifications-media-column, 0px), auto) minmax(0, 1fr) auto;
-padding-block: var(--notifications-padding-block, var(--helix-space-sm));
+padding-block: var(--_notifications-pad-block);
 padding-inline: var(--notifications-padding-inline, var(--helix-space-md));
 
 position: relative;
@@ -24,20 +27,48 @@ position: relative;
 
 :host(:not(:state(read))) [part="item"]::before {
 background-color: var(--notifications-unread-mark, var(--helix-color-accent));
-block-size: var(--notifications-unread-block-size, var(--_notifications-line));
+block-size: var(--_notifications-unread);
 border-radius: var(--notifications-unread-radius, var(--helix-radii-full));
 content: "";
-inline-size: var(--notifications-unread-inline-size, var(--helix-border-thick));
+inline-size: var(--notifications-unread-inline-size, var(--_notifications-unread));
+
 inset-block-start: var(
 --notifications-unread-offset,
-var(--notifications-padding-block, var(--helix-space-sm))
+calc(
+var(--_notifications-pad-block) +
+(var(--_notifications-line) - var(--_notifications-unread)) /
+2
+)
 );
 inset-inline-start: var(--notifications-unread-inset, var(--helix-space-2xs));
 position: absolute;
 }
 
+:host([separation="filled"]),
+:host([separation="outlined"]) {
+--notifications-rule: transparent;
+
+margin-block-end: var(--notifications-item-gap, var(--helix-space-xs));
+}
+
+:host([separation="filled"]) [part="item"],
+:host([separation="outlined"]) [part="item"] {
+border: var(--helix-border-thin) solid var(--notifications-item-edge, var(--helix-color-border));
+border-radius: var(--notifications-item-radius, var(--helix-radii-md));
+}
+
+:host([separation="filled"]) [part="item"] {
+background-color: var(--notifications-item-fill, var(--helix-color-surface-raised));
+}
+
+:host([separation="filled"]) {
+--avatar-background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);
+}
+
 [part="media"] {
 display: grid;
+
+grid-template-rows: var(--_notifications-line);
 place-items: center start;
 }
 
@@ -61,17 +92,40 @@ line-height: var(--helix-leading-normal);
 margin: var(--helix-space-none);
 }
 
+slot[name="detail"]::slotted(*) {
+margin-block: var(--helix-space-2xs) var(--helix-space-none);
+margin-inline: var(--helix-space-none);
+}
+
+[part="body"] slot:not([name])::slotted(a) {
+color: inherit;
+text-decoration: none;
+}
+
+[part="body"] slot:not([name])::slotted(a:hover) {
+text-decoration: underline;
+text-decoration-color: color-mix(in oklab, currentcolor 35%, transparent);
+text-decoration-thickness: 1px;
+text-underline-offset: 0.25em;
+}
+
 :host(:not(:state(read))) [part="label"] {
 color: var(--helix-color-foreground);
 font-weight: var(--helix-weight-medium);
 }
 
+[part="controls"] {
+margin-inline-end: calc((var(--helix-size-control) - var(--helix-size-icon)) / -2);
+}
+
 [part="trailing"] {
 align-items: center;
-align-self: center;
+align-self: start;
 display: grid;
 grid-template-areas: "swap";
 justify-items: end;
+
+grid-template-rows: var(--_notifications-line);
 margin-inline-start: var(--helix-space-sm);
 }
 
@@ -88,8 +142,11 @@ translate var(--helix-duration-normal) var(--helix-easing-decelerate);
 
 [part="trailing"] > :not([part="controls"]) {
 color: var(--helix-color-foreground-subtle);
+
+display: block;
 font-family: var(--helix-font-sans);
 font-size: var(--helix-text-xs);
+line-height: var(--_notifications-line);
 opacity: calc(1 - var(--_notifications-swap));
 
 translate: calc(var(--helix-space-2xs) * var(--_notifications-swap)) 0;
@@ -144,15 +201,24 @@ translate: none;
 [part="actions"] {
 align-items: center;
 display: flex;
+flex-wrap: wrap;
 gap: var(--helix-space-2xs);
 }
 
+:host(:not(:state(actions))) [part="actions"] {
+display: none;
+}
+
+:host(:state(actions)) [part="actions"] {
+margin-block-start: var(--helix-space-2xs);
+}
+
 [part="dismiss"] {
 background: none;
 border: 0;
 border-radius: var(--helix-radii-sm);
 block-size: var(--helix-size-control);
-color: var(--notifications-dismiss-color, var(--helix-color-danger));
+color: var(--notifications-dismiss-color, var(--helix-color-foreground-subtle));
 cursor: pointer;
 display: grid;
 inline-size: var(--helix-size-control);
@@ -185,7 +251,7 @@ display: none;
 }
 }
 
-@container (inline-size < 26rem) {
+@container (inline-size < 18rem) {
 [part="item"] {
 grid-template-columns: minmax(var(--notifications-media-column, 0px), auto) minmax(0, 1fr);
 }
@@ -194,7 +260,7 @@ grid-template-columns: minmax(var(--notifications-media-column, 0px), auto) minm
 align-self: start;
 grid-column: 2;
 grid-row: 2;
-justify-items: start;
+justify-items: end;
 margin-block-start: var(--helix-space-2xs);
 margin-inline-start: var(--helix-space-none);
 }

package/dist/notifications/notification/notification.d.ts

@@ -1,5 +1,6 @@
 import { HelixHeadlessNotification } from '@fusion.dev/helix-headless/notifications';
 import type { CSSResultGroup } from 'lit';
+import '../../format-date/index.js';
 /**
  * @summary One thing that happened, which a reader may not have seen yet.
  *
@@ -44,6 +45,10 @@ import type { CSSResultGroup } from 'lit';
  *
  * @cssproperty --notifications-color - Ink in an item that has been read.
  * @cssproperty --notifications-dismiss-color - Ink on the control that removes an item, which is `danger` because removing one is the end of it.
+ * @cssproperty --notifications-item-edge - Color of a carded row's border.
+ * @cssproperty --notifications-item-fill - Fill behind a `filled` row.
+ * @cssproperty --notifications-item-gap - Space between carded rows, which replaces the hairline.
+ * @cssproperty --notifications-item-radius - Corner radius of a carded row.
  * @cssproperty --notifications-padding-block - Space above and below an item.
  * @cssproperty --notifications-padding-inline - Space either side of an item.
  * @cssproperty --notifications-rule - The hairline between items.
@@ -56,6 +61,26 @@ import type { CSSResultGroup } from 'lit';
  */
 export declare class HelixNotification extends HelixHeadlessNotification {
     static tier: string;
+    /**
+     * How a row is told apart from the one above it.
+     *
+     * `plain` is the resting one and is a hairline and nothing else: the row has
+     * no box of its own, and what separates it is a line the list draws between
+     * them. It is sayable rather than only reachable by leaving the attribute off,
+     * which is the reason `Announcement` gives for spelling out its own neutral.
+     *
+     * `outlined` and `filled` make each row a box: an edge, a corner, and a gap
+     * where the hairline was. A feed of boxes is a different reading of the same
+     * content, and which one is right depends on whether the rows are a list to
+     * scan or a set of things to act on. The reference this came from draws cards
+     * because every row in it has a control.
+     *
+     * **On the row and not on the feed, because the row is the box being
+     * separated.** A consumer wanting the whole feed carded says so once, in a
+     * document rule on the element, rather than on every item: this is a styled
+     * axis and a stylesheet is where it is set.
+     */
+    separation?: 'filled' | 'outlined' | 'plain';
     static styles: CSSResultGroup;
 }
 declare global {

package/dist/notifications/notification/notification.js

@@ -6,12 +6,17 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessNotification } from '@fusion.dev/helix-headless/notifications';
+import { property } from 'lit/decorators.js';
 import { styles as glyphStyles } from '../../icon/glyph.css.js';
 import { styles } from './notification.css.js';
+import '../../format-date/index.js';
 let HelixNotification = class HelixNotification extends HelixHeadlessNotification {
     static { this.tier = 'helix-'; }
     static { this.styles = [glyphStyles, styles]; }
 };
+__decorate([
+    property({ reflect: true })
+], HelixNotification.prototype, "separation", void 0);
 HelixNotification = __decorate([
     customElement('helix-notification')
 ], HelixNotification);

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

@@ -2,10 +2,18 @@ import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 
 --helix-size-checkbox: var(--helix-size-checkbox-sm);
+--helix-size-checkbox-loose: calc(var(--helix-size-checkbox) * 1.2);
+--helix-size-checkbox-tight: calc(var(--helix-size-checkbox) * 0.8);
 --helix-size-control: var(--helix-size-control-sm);
+--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);
+--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);
 --helix-size-icon: var(--helix-size-icon-sm);
+--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);
+--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);
 --helix-size-tag: var(--helix-size-tag-sm);
 
+--helix-size-avatar: var(--helix-size-avatar-sm);
+
 display: grid;
 grid-template-rows: auto minmax(0, 1fr) auto;
 max-block-size: var(--notifications-max-block-size, none);

package/dist/object-inspector/index.d.ts

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

package/dist/object-inspector/index.js

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

package/dist/object-inspector/root/object-inspector-root.css.d.ts

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

package/dist/object-inspector/root/object-inspector-root.css.js

@@ -0,0 +1,148 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: flex;
+flex-direction: column;
+font-size: var(--helix-text-sm);
+}
+
+[part="header"] {
+align-items: center;
+background-color: var(
+--object-inspector-header-background-color,
+var(--helix-color-surface-raised)
+);
+border: var(--helix-border-thin) solid
+var(--object-inspector-border-color, var(--helix-color-border));
+border-block-end: none;
+border-start-end-radius: var(--object-inspector-radius, var(--helix-radii-lg));
+border-start-start-radius: var(--object-inspector-radius, var(--helix-radii-lg));
+display: flex;
+padding-block: var(--helix-space-xs);
+padding-inline: var(--helix-space-md);
+}
+
+[part="label"] {
+color: var(--helix-color-foreground-muted);
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-xs);
+font-weight: var(--helix-weight-medium);
+}
+
+[part="frame"] {
+position: relative;
+}
+
+[part="tree"] {
+background-color: var(--object-inspector-background-color, var(--helix-color-background));
+border: var(--helix-border-thin) solid
+var(--object-inspector-border-color, var(--helix-color-border));
+border-radius: var(--object-inspector-radius, var(--helix-radii-lg));
+font-family: var(--helix-font-mono);
+line-height: var(--helix-leading-normal);
+padding-block: var(--helix-space-xs);
+}
+
+[part="header"] + [part="frame"] [part="tree"] {
+border-start-end-radius: var(--helix-radii-none);
+border-start-start-radius: var(--helix-radii-none);
+}
+
+:host([windowed]) [part="tree"] {
+block-size: var(--object-inspector-block-size, 24em);
+overflow-y: auto;
+overscroll-behavior: contain;
+}
+
+[part="tree"]:focus-visible {
+outline: none;
+}
+
+[part="row"] {
+cursor: default;
+overflow: hidden;
+padding-inline-end: var(--helix-space-2xl);
+padding-inline-start: calc(
+var(--object-inspector-level) *
+var(--helix-space-lg) +
+var(--helix-space-sm) +
+1em +
+var(--helix-space-2xs)
+);
+text-overflow: ellipsis;
+white-space: nowrap;
+}
+
+[part="row"][aria-expanded] {
+cursor: pointer;
+padding-inline-start: calc(
+var(--object-inspector-level) *
+var(--helix-space-lg) +
+var(--helix-space-sm)
+);
+}
+
+[part="tree"]:focus [part="row"][data-active] {
+background-color: var(--helix-color-surface-sunken);
+}
+
+[part="tree"]:focus-visible [part="row"][data-active] {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: calc(var(--helix-size-focus-offset) * -1);
+}
+
+[part="toggle"] {
+block-size: 1em;
+color: var(--helix-color-foreground-muted);
+inline-size: 1em;
+margin-inline-end: var(--helix-space-2xs);
+vertical-align: -0.125em;
+}
+
+:host(:dir(rtl)) [part="row"][aria-expanded="false"] > [part="toggle"] {
+scale: -1 1;
+}
+
+[part="key"] {
+color: var(--helix-color-syntax-name);
+}
+
+[part="string"] {
+color: var(--helix-color-syntax-string);
+}
+
+[part="number"] {
+color: var(--helix-color-syntax-constant);
+}
+
+[part="boolean"],
+[part="null"] {
+color: var(--helix-color-syntax-keyword);
+}
+
+[part="summary"],
+[part="count"] {
+color: var(--helix-color-foreground-muted);
+}
+
+[part="count"] {
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-xs);
+margin-inline-start: var(--helix-space-xs);
+}
+
+[part="copy"] {
+inset-block-start: var(--helix-space-2xs);
+inset-inline-end: var(--helix-space-2xs);
+position: absolute;
+}
+
+@media print {
+[part="tree"] {
+block-size: auto;
+overflow: visible;
+}
+
+[part="copy"] {
+display: none;
+}
+}`);