@fusion.dev/helix 0.94.0 → 0.96.0

package/custom-elements.json

@@ -28895,7 +28895,7 @@
             },
             {
               "description": "The category before the label.",
-              "name": "tag-prefix",
+              "name": "tag-start",
               "inheritedFrom": {
                 "name": "HelixHeadlessCombobox",
                 "module": "src/combobox/root/combobox-root.ts"
@@ -36653,7 +36653,7 @@
             },
             {
               "description": "The category before the label.",
-              "name": "date-prefix",
+              "name": "date-start",
               "inheritedFrom": {
                 "name": "HelixHeadlessDateInput",
                 "module": "src/date-input/root/date-input-root.ts"
@@ -47161,7 +47161,7 @@
             },
             {
               "description": "The category before the label.",
-              "name": "kind-prefix",
+              "name": "kind-start",
               "inheritedFrom": {
                 "name": "HelixHeadlessFileInput",
                 "module": "src/file-input/root/file-input-root.ts"
@@ -47233,7 +47233,7 @@
             },
             {
               "description": "The category before the label.",
-              "name": "size-prefix",
+              "name": "size-start",
               "inheritedFrom": {
                 "name": "HelixHeadlessFileInput",
                 "module": "src/file-input/root/file-input-root.ts"
@@ -64136,24 +64136,24 @@
               }
             },
             {
-              "description": "Trailing content.",
-              "name": "end",
+              "description": "Secondary text under the label.",
+              "name": "description",
               "inheritedFrom": {
                 "name": "HelixHeadlessListItem",
                 "module": "src/list/item/list-item.ts"
               }
             },
             {
-              "description": "Leading content, usually an icon or an avatar.",
-              "name": "start",
+              "description": "Trailing content.",
+              "name": "end",
               "inheritedFrom": {
                 "name": "HelixHeadlessListItem",
                 "module": "src/list/item/list-item.ts"
               }
             },
             {
-              "description": "Secondary text under the label.",
-              "name": "supporting",
+              "description": "Leading content, usually an icon or an avatar.",
+              "name": "start",
               "inheritedFrom": {
                 "name": "HelixHeadlessListItem",
                 "module": "src/list/item/list-item.ts"
@@ -73110,7 +73110,7 @@
             },
             {
               "description": "Beside the count, for a link to the rest of them.",
-              "name": "action",
+              "name": "actions",
               "inheritedFrom": {
                 "name": "HelixHeadlessNotificationGroup",
                 "module": "src/notifications/group/notification-group.ts"
@@ -73128,7 +73128,7 @@
           "cssParts": [
             {
               "description": "The trailing region of the header.",
-              "name": "action",
+              "name": "actions",
               "inheritedFrom": {
                 "name": "HelixHeadlessNotificationGroup",
                 "module": "src/notifications/group/notification-group.ts"
@@ -73446,14 +73446,14 @@
             },
             {
               "description": "A second line qualifying it, quieter than the first. A bare slot rather than a box, so an item without one pays nothing for it; style it through `::slotted()`.",
-              "name": "caption",
+              "name": "description",
               "inheritedFrom": {
                 "name": "HelixHeadlessNotification",
                 "module": "src/notifications/notification/notification.ts"
               }
             },
             {
-              "description": "A block belonging to the row rather than a line about it: a quoted comment, a status moving from one value to another, a preview. Unlike `caption` nothing here sets a size or an ink, because whatever fills it usually brings its own.",
+              "description": "A block belonging to the row rather than a line about it: a quoted comment, a status moving from one value to another, a preview. Unlike `description` nothing here sets a size or an ink, because whatever fills it usually brings its own.",
               "name": "detail",
               "inheritedFrom": {
                 "name": "HelixHeadlessNotification",
@@ -115560,7 +115560,7 @@
             },
             {
               "description": "The category before the label.",
-              "name": "prefix",
+              "name": "start",
               "inheritedFrom": {
                 "name": "HelixHeadlessTag",
                 "module": "src/tag/root/tag-root.ts"
@@ -115578,7 +115578,7 @@
             },
             {
               "description": "A category the label belongs to, set before it and weightier.",
-              "name": "prefix",
+              "name": "start",
               "inheritedFrom": {
                 "name": "HelixHeadlessTag",
                 "module": "src/tag/root/tag-root.ts"
@@ -116077,6 +116077,10 @@
                 "description": "The tag filled, outlined and subtle.",
                 "slug": "appearances"
               },
+              {
+                "description": "A category before the label, which it qualifies.",
+                "slug": "category"
+              },
               {
                 "description": "Tags a reader can take off, which is what a filter bar holds.",
                 "slug": "dismissible"
@@ -116084,10 +116088,6 @@
               {
                 "description": "A tag asks to go and does not go on its own.",
                 "slug": "events"
-              },
-              {
-                "description": "A glyph or an avatar before the label.",
-                "slug": "prefix"
               }
             ],
             "source": "helix/styled/src/tag"
@@ -120971,7 +120971,7 @@
             },
             {
               "description": "The category before the label.",
-              "name": "time-prefix",
+              "name": "time-start",
               "inheritedFrom": {
                 "name": "HelixHeadlessTimeInput",
                 "module": "src/time-input/root/time-input-root.ts"
@@ -138208,10 +138208,6 @@
                 "description": "A loop with no sound, which is the one video allowed to start on its own.",
                 "slug": "ambient"
               },
-              {
-                "description": "A way out of the set, over the picture at the top left.",
-                "slug": "back"
-              },
               {
                 "description": "A clip with subtitle tracks and the control that chooses between them.",
                 "slug": "captions"
@@ -138228,6 +138224,10 @@
                 "description": "A filled frame around the picture.",
                 "slug": "filled"
               },
+              {
+                "description": "A title over the picture at the top left, with a way out of the set beside it.",
+                "slug": "header"
+              },
               {
                 "description": "The browser's own controls instead of these, which is what `controls` means.",
                 "slug": "native"
@@ -138279,16 +138279,16 @@
               }
             },
             {
-              "description": "Top left over the frame, for a way out of a set.",
-              "name": "back",
+              "description": "Added to the control bar, before fullscreen.",
+              "name": "controls",
               "inheritedFrom": {
                 "name": "HelixHeadlessVideo",
                 "module": "src/video/root/video-root.ts"
               }
             },
             {
-              "description": "Added to the control bar, before fullscreen.",
-              "name": "controls",
+              "description": "Top left over the frame: a heading, and a way out of a set beside it.",
+              "name": "header",
               "inheritedFrom": {
                 "name": "HelixHeadlessVideo",
                 "module": "src/video/root/video-root.ts"
@@ -138304,14 +138304,6 @@
             }
           ],
           "cssParts": [
-            {
-              "description": "The region top left, for a way out of a set.",
-              "name": "back",
-              "inheritedFrom": {
-                "name": "HelixHeadlessVideo",
-                "module": "src/video/root/video-root.ts"
-              }
-            },
             {
               "description": "Subtitles on and off.",
               "name": "captions",
@@ -138464,6 +138456,14 @@
                 "module": "src/video/root/video-root.ts"
               }
             },
+            {
+              "description": "The region top left, for a heading and a way out of a set.",
+              "name": "header",
+              "inheritedFrom": {
+                "name": "HelixHeadlessVideo",
+                "module": "src/video/root/video-root.ts"
+              }
+            },
             {
               "description": "What is said while the picture waits for more of itself. The part of that which spins is drawn on it, which is `::part(loading)::before` from a consumer's sheet: this tier ships no CSS, so a box it renders for one to paint is an empty child costing whatever the consumer's own layout charges for a child. `ListItem` measured that.",
               "name": "loading",

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

@@ -45,7 +45,7 @@ grid-column: 3;
 grid-row: 1;
 }
 
-slot[name="supporting"] {
+slot[name="description"] {
 color: var(--helix-color-foreground-muted);
 display: block;
 font-size: var(--helix-text-xs);
@@ -54,7 +54,7 @@ grid-row: 2;
 }
 
 slot:not([name])::slotted(*),
-slot[name="supporting"]::slotted(*) {
+slot[name="description"]::slotted(*) {
 margin: var(--helix-space-none);
 }
 

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

@@ -51,7 +51,7 @@ outline-offset: var(--helix-size-focus-offset);
 color: var(--helix-color-foreground);
 }
 
-[part="action"] {
+[part="actions"] {
 align-items: center;
 display: inline-flex;
 margin-inline-start: auto;

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

@@ -84,7 +84,7 @@ font-size: var(--helix-text-sm);
 line-height: var(--_notifications-line);
 }
 
-slot[name="caption"]::slotted(*) {
+slot[name="description"]::slotted(*) {
 color: var(--helix-color-foreground-subtle);
 font-family: var(--helix-font-sans);
 font-size: var(--helix-text-xs);

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

@@ -97,7 +97,7 @@ block-size: 0.85em;
 inline-size: 0.85em;
 }
 
-slot[name="prefix"]::slotted(*) {
+slot[name="start"]::slotted(*) {
 font-weight: var(--helix-weight-semibold);
 margin-inline-end: var(--_tag-inset);
 opacity: 0.75;

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

@@ -380,15 +380,21 @@ animation: none;
 }
 }
 
-[part="back"] {
+[part="header"] {
+align-items: center;
+
+color: var(--video-controls-color, var(--helix-color-foreground));
+display: flex;
+gap: var(--helix-space-sm);
 inset-block-start: var(--helix-space-sm);
 inset-inline-start: var(--helix-space-sm);
+max-inline-size: calc(100% - 2 * var(--helix-space-sm));
 opacity: inherit;
 position: absolute;
 z-index: var(--helix-layer-raised);
 }
 
-[part="back"]:not(:has(*)) {
+[part="header"]:not(:has(*)) {
 display: none;
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix",
   "description": "Styled component tier. Extends the headless tier with token-driven presentation.",
-  "version": "0.94.0",
+  "version": "0.96.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -47,13 +47,13 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.94.0",
-    "@fusion.dev/helix-headless": "0.94.0",
-    "@fusion.dev/helix-styles": "0.94.0"
+    "@fusion.dev/helix-core": "0.96.0",
+    "@fusion.dev/helix-headless": "0.96.0",
+    "@fusion.dev/helix-styles": "0.96.0"
   },
   "devDependencies": {
-    "@fusion.dev/helix-cem": "0.94.0",
-    "@fusion.dev/helix-testing": "0.94.0",
+    "@fusion.dev/helix-cem": "0.96.0",
+    "@fusion.dev/helix-testing": "0.96.0",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.0.0",
     "@lit-labs/ssr": "^4.1.0",

package/types/jsx.d.ts

@@ -25721,7 +25721,7 @@ export type CustomElements = {
    * - `tag`: One chosen option.
    * - `tag-dismiss`: The remove button, when `dismissible`.
    * - `tag-dismiss-mark`: The glyph on the dismiss control, where none is slotted.
-   * - `tag-prefix`: The category before the label.
+   * - `tag-start`: The category before the label.
    * - `tags`: The row of chosen options, when `multiple` is set.
    *
    * ## CSS States
@@ -26661,7 +26661,7 @@ export type CustomElements = {
    * - `date`: One held date, as a tag, in `multiple`.
    * - `date-dismiss`: The remove button, when `dismissible`.
    * - `date-dismiss-mark`: The glyph on the dismiss control, where none is slotted.
-   * - `date-prefix`: The category before the label.
+   * - `date-start`: The category before the label.
    * - `feedback`: What is wrong with it.
    * - `field`: The box holding the text and the trigger.
    * - `hint`: Help under the field, while nothing is wrong.
@@ -28229,7 +28229,7 @@ export type CustomElements = {
    * - `kind`: What kind of file it is.
    * - `kind-dismiss`: The remove button, when `dismissible`.
    * - `kind-dismiss-mark`: The glyph on the dismiss control, where none is slotted.
-   * - `kind-prefix`: The category before the label.
+   * - `kind-start`: The category before the label.
    * - `label`: The question, over the field.
    * - `list`: The chosen files.
    * - `meta`: The row holding its size and kind.
@@ -28238,7 +28238,7 @@ export type CustomElements = {
    * - `size`: How big it is.
    * - `size-dismiss`: The remove button, when `dismissible`.
    * - `size-dismiss-mark`: The glyph on the dismiss control, where none is slotted.
-   * - `size-prefix`: The category before the label.
+   * - `size-start`: The category before the label.
    * - `trigger`: The label that opens the picker.
    *
    * ## CSS States
@@ -30667,9 +30667,9 @@ export type CustomElements = {
    * Areas where markup can be added to the component.
    *
    * - `(default)`: The label.
+   * - `description`: Secondary text under the label.
    * - `end`: Trailing content.
    * - `start`: Leading content, usually an icon or an avatar.
-   * - `supporting`: Secondary text under the label.
    *
    * ## CSS Custom Properties
    *
@@ -31899,7 +31899,7 @@ export type CustomElements = {
    * Areas where markup can be added to the component.
    *
    * - `(default)`: The notifications in this group.
-   * - `action`: Beside the count, for a link to the rest of them.
+   * - `actions`: Beside the count, for a link to the rest of them.
    * - `label`: Replaces the group's name, for a heading that needs a mark in it.
    *
    * ## Methods
@@ -31919,7 +31919,7 @@ export type CustomElements = {
    *
    * Custom selectors for styling elements within the component.
    *
-   * - `action`: The trailing region of the header.
+   * - `actions`: The trailing region of the header.
    * - `count`: How many are in the group.
    * - `header`: The label, the count and the action together.
    * - `items`: The region holding the notifications.
@@ -32046,8 +32046,8 @@ export type CustomElements = {
    * - `(default)`: What happened, in the consumer's own markup.
    * - `actions`: What a reader can do about it.
    * - `media`: An avatar or icon identifying who or what it came from.
-   * - `caption`: A second line qualifying it, quieter than the first. A bare slot rather than a box, so an item without one pays nothing for it; style it through `::slotted()`.
-   * - `detail`: A block belonging to the row rather than a line about it: a quoted comment, a status moving from one value to another, a preview. Unlike `caption` nothing here sets a size or an ink, because whatever fills it usually brings its own.
+   * - `description`: A second line qualifying it, quieter than the first. A bare slot rather than a box, so an item without one pays nothing for it; style it through `::slotted()`.
+   * - `detail`: A block belonging to the row rather than a line about it: a quoted comment, a status moving from one value to another, a preview. Unlike `description` nothing here sets a size or an ink, because whatever fills it usually brings its own.
    * - `dismiss`: Replaces the glyph inside the dismiss control, which is drawn only where the row is `dismissible`.
    *
    * ## Methods
@@ -37920,7 +37920,7 @@ export type CustomElements = {
    * Areas where markup can be added to the component.
    *
    * - `(default)`: The tag's label.
-   * - `prefix`: A category the label belongs to, set before it and weightier.
+   * - `start`: A category the label belongs to, set before it and weightier.
    *
    * ## Methods
    *
@@ -37943,7 +37943,7 @@ export type CustomElements = {
    *
    * - `dismiss`: The remove button, when `dismissible`.
    * - `dismiss-mark`: The glyph on the dismiss control, where none is slotted.
-   * - `prefix`: The category before the label.
+   * - `start`: The category before the label.
    *
    * ## CSS States
    *
@@ -38551,7 +38551,7 @@ export type CustomElements = {
    * - `time`: One held time, as a tag, in `multiple`.
    * - `time-dismiss`: The remove button, when `dismissible`.
    * - `time-dismiss-mark`: The glyph on the dismiss control, where none is slotted.
-   * - `time-prefix`: The category before the label.
+   * - `time-start`: The category before the label.
    * - `trigger`: The control that opens the list.
    * - `trigger-icon`: The mark on the button that opens the clock.
    *
@@ -40909,8 +40909,8 @@ export type CustomElements = {
    * Areas where markup can be added to the component.
    *
    * - `(default)`: `<source>` and `<track>` elements, which are copied into the video.
-   * - `back`: Top left over the frame, for a way out of a set.
    * - `controls`: Added to the control bar, before fullscreen.
+   * - `header`: Top left over the frame: a heading, and a way out of a set beside it.
    * - `poster`: Shown over the video until it starts.
    *
    * ## Methods
@@ -40946,7 +40946,6 @@ export type CustomElements = {
    *
    * Custom selectors for styling elements within the component.
    *
-   * - `back`: The region top left, for a way out of a set.
    * - `captions`: Subtitles on and off.
    * - `captions-menu`: The language menu, where there is more than one.
    * - `captions-menu-back`: The control that returns from a submenu.
@@ -40966,6 +40965,7 @@ export type CustomElements = {
    * - `failure`: What is said when the source will not play.
    * - `forward`: The control that goes on ten seconds.
    * - `fullscreen`: The whole screen, and back.
+   * - `header`: The region top left, for a heading and a way out of a set.
    * - `loading`: What is said while the picture waits for more of itself. The part of that which spins is drawn on it, which is `::part(loading)::before` from a consumer's sheet: this tier ships no CSS, so a box it renders for one to paint is an empty child costing whatever the consumer's own layout charges for a child. `ListItem` measured that.
    * - `more`: The button that opens it.
    * - `mute`: Sound on and off.
@@ -45457,7 +45457,7 @@ export type CustomElementsSolidJs = {
    * - `tag`: One chosen option.
    * - `tag-dismiss`: The remove button, when `dismissible`.
    * - `tag-dismiss-mark`: The glyph on the dismiss control, where none is slotted.
-   * - `tag-prefix`: The category before the label.
+   * - `tag-start`: The category before the label.
    * - `tags`: The row of chosen options, when `multiple` is set.
    *
    * ## CSS States
@@ -46409,7 +46409,7 @@ export type CustomElementsSolidJs = {
    * - `date`: One held date, as a tag, in `multiple`.
    * - `date-dismiss`: The remove button, when `dismissible`.
    * - `date-dismiss-mark`: The glyph on the dismiss control, where none is slotted.
-   * - `date-prefix`: The category before the label.
+   * - `date-start`: The category before the label.
    * - `feedback`: What is wrong with it.
    * - `field`: The box holding the text and the trigger.
    * - `hint`: Help under the field, while nothing is wrong.
@@ -48010,7 +48010,7 @@ export type CustomElementsSolidJs = {
    * - `kind`: What kind of file it is.
    * - `kind-dismiss`: The remove button, when `dismissible`.
    * - `kind-dismiss-mark`: The glyph on the dismiss control, where none is slotted.
-   * - `kind-prefix`: The category before the label.
+   * - `kind-start`: The category before the label.
    * - `label`: The question, over the field.
    * - `list`: The chosen files.
    * - `meta`: The row holding its size and kind.
@@ -48019,7 +48019,7 @@ export type CustomElementsSolidJs = {
    * - `size`: How big it is.
    * - `size-dismiss`: The remove button, when `dismissible`.
    * - `size-dismiss-mark`: The glyph on the dismiss control, where none is slotted.
-   * - `size-prefix`: The category before the label.
+   * - `size-start`: The category before the label.
    * - `trigger`: The label that opens the picker.
    *
    * ## CSS States
@@ -50499,9 +50499,9 @@ export type CustomElementsSolidJs = {
    * Areas where markup can be added to the component.
    *
    * - `(default)`: The label.
+   * - `description`: Secondary text under the label.
    * - `end`: Trailing content.
    * - `start`: Leading content, usually an icon or an avatar.
-   * - `supporting`: Secondary text under the label.
    *
    * ## CSS Custom Properties
    *
@@ -51758,7 +51758,7 @@ export type CustomElementsSolidJs = {
    * Areas where markup can be added to the component.
    *
    * - `(default)`: The notifications in this group.
-   * - `action`: Beside the count, for a link to the rest of them.
+   * - `actions`: Beside the count, for a link to the rest of them.
    * - `label`: Replaces the group's name, for a heading that needs a mark in it.
    *
    * ## Methods
@@ -51778,7 +51778,7 @@ export type CustomElementsSolidJs = {
    *
    * Custom selectors for styling elements within the component.
    *
-   * - `action`: The trailing region of the header.
+   * - `actions`: The trailing region of the header.
    * - `count`: How many are in the group.
    * - `header`: The label, the count and the action together.
    * - `items`: The region holding the notifications.
@@ -51908,8 +51908,8 @@ export type CustomElementsSolidJs = {
    * - `(default)`: What happened, in the consumer's own markup.
    * - `actions`: What a reader can do about it.
    * - `media`: An avatar or icon identifying who or what it came from.
-   * - `caption`: A second line qualifying it, quieter than the first. A bare slot rather than a box, so an item without one pays nothing for it; style it through `::slotted()`.
-   * - `detail`: A block belonging to the row rather than a line about it: a quoted comment, a status moving from one value to another, a preview. Unlike `caption` nothing here sets a size or an ink, because whatever fills it usually brings its own.
+   * - `description`: A second line qualifying it, quieter than the first. A bare slot rather than a box, so an item without one pays nothing for it; style it through `::slotted()`.
+   * - `detail`: A block belonging to the row rather than a line about it: a quoted comment, a status moving from one value to another, a preview. Unlike `description` nothing here sets a size or an ink, because whatever fills it usually brings its own.
    * - `dismiss`: Replaces the glyph inside the dismiss control, which is drawn only where the row is `dismissible`.
    *
    * ## Methods
@@ -57926,7 +57926,7 @@ export type CustomElementsSolidJs = {
    * Areas where markup can be added to the component.
    *
    * - `(default)`: The tag's label.
-   * - `prefix`: A category the label belongs to, set before it and weightier.
+   * - `start`: A category the label belongs to, set before it and weightier.
    *
    * ## Methods
    *
@@ -57949,7 +57949,7 @@ export type CustomElementsSolidJs = {
    *
    * - `dismiss`: The remove button, when `dismissible`.
    * - `dismiss-mark`: The glyph on the dismiss control, where none is slotted.
-   * - `prefix`: The category before the label.
+   * - `start`: The category before the label.
    *
    * ## CSS States
    *
@@ -58564,7 +58564,7 @@ export type CustomElementsSolidJs = {
    * - `time`: One held time, as a tag, in `multiple`.
    * - `time-dismiss`: The remove button, when `dismissible`.
    * - `time-dismiss-mark`: The glyph on the dismiss control, where none is slotted.
-   * - `time-prefix`: The category before the label.
+   * - `time-start`: The category before the label.
    * - `trigger`: The control that opens the list.
    * - `trigger-icon`: The mark on the button that opens the clock.
    *
@@ -60978,8 +60978,8 @@ export type CustomElementsSolidJs = {
    * Areas where markup can be added to the component.
    *
    * - `(default)`: `<source>` and `<track>` elements, which are copied into the video.
-   * - `back`: Top left over the frame, for a way out of a set.
    * - `controls`: Added to the control bar, before fullscreen.
+   * - `header`: Top left over the frame: a heading, and a way out of a set beside it.
    * - `poster`: Shown over the video until it starts.
    *
    * ## Methods
@@ -61015,7 +61015,6 @@ export type CustomElementsSolidJs = {
    *
    * Custom selectors for styling elements within the component.
    *
-   * - `back`: The region top left, for a way out of a set.
    * - `captions`: Subtitles on and off.
    * - `captions-menu`: The language menu, where there is more than one.
    * - `captions-menu-back`: The control that returns from a submenu.
@@ -61035,6 +61034,7 @@ export type CustomElementsSolidJs = {
    * - `failure`: What is said when the source will not play.
    * - `forward`: The control that goes on ten seconds.
    * - `fullscreen`: The whole screen, and back.
+   * - `header`: The region top left, for a heading and a way out of a set.
    * - `loading`: What is said while the picture waits for more of itself. The part of that which spins is drawn on it, which is `::part(loading)::before` from a consumer's sheet: this tier ships no CSS, so a box it renders for one to paint is an empty child costing whatever the consumer's own layout charges for a child. `ListItem` measured that.
    * - `more`: The button that opens it.
    * - `mute`: Sound on and off.