@fusion.dev/helix 0.16.2 → 0.16.4

package/custom-elements.json

@@ -945,8 +945,8 @@
                 "slug": "preview"
               },
               {
-                "description": "The mark at the end of the row, for a list read as a table of contents.",
-                "slug": "chevron-at-the-end"
+                "description": "The mark before the row, so a nested list reads as a tree.",
+                "slug": "chevron-at-the-start"
               },
               {
                 "description": "Each section announces for itself, and a listener on the set hears nothing.",
@@ -49613,8 +49613,13 @@
                 "slug": "full"
               },
               {
-                "description": "Opening on hover, and spanning the whole width under the bar rather than its trigger.",
-                "slug": "on-hover"
+                "description": "Opening only on a press, for a trigger that is also a link.",
+                "slug": "on-press"
+              },
+              {
+                "description": "Three in one bar, so moving between them is a change of panel rather than a close and an open.",
+                "min": 480,
+                "slug": "several"
               }
             ],
             "source": "helix/styled/src/megamenu"
@@ -52865,6 +52870,10 @@
               "description": "Ink in an item that has been read.",
               "name": "--notifications-color"
             },
+            {
+              "description": "Ink on the control that removes an item, which is `danger` because removing one is the end of it.",
+              "name": "--notifications-dismiss-color"
+            },
             {
               "description": "Space above and below an item.",
               "name": "--notifications-padding-block"
@@ -53176,7 +53185,7 @@
                   "text": "TemplateResult | typeof nothing"
                 }
               },
-              "description": "The control that removes the item, with the mark a consumer can replace.\n\n**A method rather than markup inside `render`, and the slot moves with\nit.** A fallback answers a consumer and a seam answers the tier above, which\nare different people: the styled tier wants an icon here, and with the slot\nwritten inline the only way to change it is to reimplement the whole\ntemplate. Moving only the fallback out is not enough: the slot is the thing\na tier redraws.\n\n**The mark is drawn rather than typed, which is what lets it align.** A\ncharacter such as `&times;` is placed by its font rather than by its box:\nmeasured against the ghost button beside it at 8x, the cross carried 6\npixels of ink to the label's 9.5 and sat 1.5 pixels below its center, in two\nboxes whose own centers agreed to a tenth of a pixel. No stylesheet can\ncorrect that, because the offset is inside the glyph. An `<svg>` is centered\non its own viewBox, so it lands where the box says and takes the icon step\nthe row is already set in. It is the `x` the Tag's dismiss draws, so two\ncontrols that mean \"take this away\" are one mark.",
+              "description": "The control that removes the item, with the mark a consumer can replace.\n\n**A method rather than markup inside `render`, and the slot moves with\nit.** A fallback answers a consumer and a seam answers the tier above, which\nare different people: the styled tier wants an icon here, and with the slot\nwritten inline the only way to change it is to reimplement the whole\ntemplate. Moving only the fallback out is not enough: the slot is the thing\na tier redraws.\n\n**The mark is drawn rather than typed, which is what lets it align.** A\ncharacter such as `&times;` is placed by its font rather than by its box:\nmeasured against the ghost button beside it at 8x, the cross carried 6\npixels of ink to the label's 9.5 and sat 1.5 pixels below its center, in two\nboxes whose own centers agreed to a tenth of a pixel. No stylesheet can\ncorrect that, because the offset is inside the glyph. An `<svg>` is centered\non its own viewBox, so it lands where the box says and takes the icon step\nthe row is already set in.\n\n**A trash and not the `x` the Tag draws, because the two do not mean the\nsame thing.** A tag's cross takes a token off a field the reader is still\nfilling in, and putting it back is retyping a word. A notification is the\nonly copy of something that happened, and this removes it from the feed for\ngood, so the mark is the one every other interface uses for that and the\nink is `danger`. It is only ever on screen while the row is hovered or\nfocused, so a feed of twenty is not a column of red.",
               "inheritedFrom": {
                 "name": "HelixHeadlessNotification",
                 "module": "src/notifications/notification/notification.ts"
@@ -54181,6 +54190,11 @@
                 "description": "Read and dismissed are two different things a feed is told.",
                 "slug": "events"
               },
+              {
+                "description": "A bell in the header, a count on it, and the feed in a drawer behind it.",
+                "min": 420,
+                "slug": "in-a-drawer"
+              },
               {
                 "description": "Read state the page owns, so marking read can be the round trip it usually is.",
                 "slug": "read-on-the-server"
@@ -100175,7 +100189,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "Controls beyond the ones every player has, named in the order they appear.\n\nA list rather than a property apiece. A bar is a row with a budget, and a\nboolean per feature invites a consumer to switch all of them on: naming\nthem makes the row a decision, and makes the order theirs. Anything\nunrecognized is skipped rather than throwing, since the list is markup and\na typo should cost a control, not a page.\n\n`pip` is offered only where the platform has it, checked rather than\nassumed: it is absent on iPhone and behind a flag in Firefox, and a button\nthat cannot work is worse than one that is not there.\n\nThe names are `speed`, `pip`, `remote` and `download`.\n\n**`download` is named and never assumed.** Offering the file is a decision\nabout the content rather than about the player, and plenty of consumers\ndecline it deliberately. It is also the one control whose success is not\nours to promise: the attribute is ignored cross-origin, so a file served\nfrom somewhere else opens rather than saves, which is the browser's rule\nand not something a player can work around.",
+              "description": "Controls beyond the ones every player has, named in the order they appear.\n\nA list rather than a property apiece. A bar is a row with a budget, and a\nboolean per feature invites a consumer to switch all of them on: naming\nthem makes the row a decision, and makes the order theirs. Anything\nunrecognized is skipped rather than throwing, since the list is markup and\na typo should cost a control, not a page.\n\n`pip` is offered only where the platform has it, checked rather than\nassumed: it is absent on iPhone and behind a flag in Firefox, and a button\nthat cannot work is worse than one that is not there.\n\nThe names are `speed`, `pip`, `remote`, `download`, `rewind`, `forward`,\n`previous` and `next`.\n\n**`previous` and `next` do nothing to the video, and are offered anyway.**\nThey announce `helix-previous` and `helix-next` and stop there, so what\nthey move is whatever holds the set, which is what `VideoPlaylist` listens\nfor. A player standing alone therefore draws a pair of controls that change\nnothing, and that is deliberate: a player cannot know whether it is inside\na set, and one that hid them until it could prove there was one would be a\nplayer that never offers them. Name them where something is listening.\n\n**`download` is named and never assumed.** Offering the file is a decision\nabout the content rather than about the player, and plenty of consumers\ndecline it deliberately. It is also the one control whose success is not\nours to promise: the attribute is ignored cross-origin, so a file served\nfrom somewhere else opens rather than saves, which is the browser's rule\nand not something a player can work around.",
               "attribute": "extra-controls",
               "inheritedFrom": {
                 "name": "HelixHeadlessVideo",
@@ -101655,7 +101669,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "Controls beyond the ones every player has, named in the order they appear.\n\nA list rather than a property apiece. A bar is a row with a budget, and a\nboolean per feature invites a consumer to switch all of them on: naming\nthem makes the row a decision, and makes the order theirs. Anything\nunrecognized is skipped rather than throwing, since the list is markup and\na typo should cost a control, not a page.\n\n`pip` is offered only where the platform has it, checked rather than\nassumed: it is absent on iPhone and behind a flag in Firefox, and a button\nthat cannot work is worse than one that is not there.\n\nThe names are `speed`, `pip`, `remote` and `download`.\n\n**`download` is named and never assumed.** Offering the file is a decision\nabout the content rather than about the player, and plenty of consumers\ndecline it deliberately. It is also the one control whose success is not\nours to promise: the attribute is ignored cross-origin, so a file served\nfrom somewhere else opens rather than saves, which is the browser's rule\nand not something a player can work around.",
+              "description": "Controls beyond the ones every player has, named in the order they appear.\n\nA list rather than a property apiece. A bar is a row with a budget, and a\nboolean per feature invites a consumer to switch all of them on: naming\nthem makes the row a decision, and makes the order theirs. Anything\nunrecognized is skipped rather than throwing, since the list is markup and\na typo should cost a control, not a page.\n\n`pip` is offered only where the platform has it, checked rather than\nassumed: it is absent on iPhone and behind a flag in Firefox, and a button\nthat cannot work is worse than one that is not there.\n\nThe names are `speed`, `pip`, `remote`, `download`, `rewind`, `forward`,\n`previous` and `next`.\n\n**`previous` and `next` do nothing to the video, and are offered anyway.**\nThey announce `helix-previous` and `helix-next` and stop there, so what\nthey move is whatever holds the set, which is what `VideoPlaylist` listens\nfor. A player standing alone therefore draws a pair of controls that change\nnothing, and that is deliberate: a player cannot know whether it is inside\na set, and one that hid them until it could prove there was one would be a\nplayer that never offers them. Name them where something is listening.\n\n**`download` is named and never assumed.** Offering the file is a decision\nabout the content rather than about the player, and plenty of consumers\ndecline it deliberately. It is also the one control whose success is not\nours to promise: the attribute is ignored cross-origin, so a file served\nfrom somewhere else opens rather than saves, which is the browser's rule\nand not something a player can work around.",
               "fieldName": "extraControls",
               "inheritedFrom": {
                 "name": "HelixHeadlessVideo",

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

@@ -12,6 +12,8 @@ display: block;
 align-items: start;
 border-block-end: var(--helix-border-thin) solid
 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));
@@ -75,7 +77,9 @@ margin-inline-start: var(--helix-space-sm);
 
 [part="trailing"] > * {
 grid-area: swap;
-transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);
+transition:
+opacity var(--helix-duration-normal) var(--helix-easing-standard),
+translate var(--helix-duration-normal) var(--helix-easing-decelerate);
 }
 
 :host {
@@ -87,12 +91,15 @@ color: var(--helix-color-foreground-subtle);
 font-family: var(--helix-font-sans);
 font-size: var(--helix-text-xs);
 opacity: calc(1 - var(--_notifications-swap));
+
+translate: calc(var(--helix-space-2xs) * var(--_notifications-swap)) 0;
 }
 
 [part="controls"] {
 align-items: center;
 display: flex;
 opacity: var(--_notifications-swap);
+translate: calc(var(--helix-space-2xs) * (1 - var(--_notifications-swap))) 0;
 }
 
 :host(:hover:state(controls)),
@@ -119,6 +126,7 @@ grid-template-areas: none;
 [part="trailing"] > * {
 grid-area: auto;
 opacity: 1;
+translate: none;
 }
 
 [part="controls"] {
@@ -126,6 +134,13 @@ pointer-events: auto;
 }
 }
 
+@media (prefers-reduced-motion: reduce) {
+[part="trailing"] > * {
+transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);
+translate: none;
+}
+}
+
 [part="actions"] {
 align-items: center;
 display: flex;
@@ -137,7 +152,7 @@ background: none;
 border: 0;
 border-radius: var(--helix-radii-sm);
 block-size: var(--helix-size-control);
-color: var(--helix-color-foreground-muted);
+color: var(--notifications-dismiss-color, var(--helix-color-danger));
 cursor: pointer;
 display: grid;
 inline-size: var(--helix-size-control);
@@ -152,8 +167,7 @@ inline-size: var(--icon-size, var(--helix-size-icon));
 }
 
 [part="dismiss"]:hover {
-background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);
-color: var(--helix-color-foreground);
+background-color: color-mix(in oklab, currentcolor 12%, transparent);
 }
 
 [part="dismiss"]:focus-visible {

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

@@ -43,6 +43,7 @@ import type { CSSResultGroup } from 'lit';
  * @csspart trailing - The column holding the time and the controls.
  *
  * @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-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.

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.16.2",
+  "version": "0.16.4",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -46,14 +46,14 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.16.2",
-    "@fusion.dev/helix-headless": "0.16.2",
-    "@fusion.dev/helix-styles": "0.16.2"
+    "@fusion.dev/helix-core": "0.16.4",
+    "@fusion.dev/helix-headless": "0.16.4",
+    "@fusion.dev/helix-styles": "0.16.4"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@fusion.dev/helix-cem": "0.16.2",
-    "@fusion.dev/helix-testing": "0.16.2",
+    "@fusion.dev/helix-cem": "0.16.4",
+    "@fusion.dev/helix-testing": "0.16.4",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.0.0",
     "@lit-labs/ssr": "^3.3.0",

package/types/jsx.d.ts

@@ -17805,7 +17805,16 @@ a typo should cost a control, not a page.
 assumed: it is absent on iPhone and behind a flag in Firefox, and a button
 that cannot work is worse than one that is not there.
 
-The names are `speed`, `pip`, `remote` and `download`.
+The names are `speed`, `pip`, `remote`, `download`, `rewind`, `forward`,
+`previous` and `next`.
+
+**`previous` and `next` do nothing to the video, and are offered anyway.**
+They announce `helix-previous` and `helix-next` and stop there, so what
+they move is whatever holds the set, which is what `VideoPlaylist` listens
+for. A player standing alone therefore draws a pair of controls that change
+nothing, and that is deliberate: a player cannot know whether it is inside
+a set, and one that hid them until it could prove there was one would be a
+player that never offers them. Name them where something is listening.
 
 **`download` is named and never assumed.** Offering the file is a decision
 about the content rather than about the player, and plenty of consumers
@@ -17826,7 +17835,16 @@ a typo should cost a control, not a page.
 assumed: it is absent on iPhone and behind a flag in Firefox, and a button
 that cannot work is worse than one that is not there.
 
-The names are `speed`, `pip`, `remote` and `download`.
+The names are `speed`, `pip`, `remote`, `download`, `rewind`, `forward`,
+`previous` and `next`.
+
+**`previous` and `next` do nothing to the video, and are offered anyway.**
+They announce `helix-previous` and `helix-next` and stop there, so what
+they move is whatever holds the set, which is what `VideoPlaylist` listens
+for. A player standing alone therefore draws a pair of controls that change
+nothing, and that is deliberate: a player cannot know whether it is inside
+a set, and one that hid them until it could prove there was one would be a
+player that never offers them. Name them where something is listening.
 
 **`download` is named and never assumed.** Offering the file is a decision
 about the content rather than about the player, and plenty of consumers
@@ -18036,7 +18054,16 @@ a typo should cost a control, not a page.
 assumed: it is absent on iPhone and behind a flag in Firefox, and a button
 that cannot work is worse than one that is not there.
 
-The names are `speed`, `pip`, `remote` and `download`.
+The names are `speed`, `pip`, `remote`, `download`, `rewind`, `forward`,
+`previous` and `next`.
+
+**`previous` and `next` do nothing to the video, and are offered anyway.**
+They announce `helix-previous` and `helix-next` and stop there, so what
+they move is whatever holds the set, which is what `VideoPlaylist` listens
+for. A player standing alone therefore draws a pair of controls that change
+nothing, and that is deliberate: a player cannot know whether it is inside
+a set, and one that hid them until it could prove there was one would be a
+player that never offers them. Name them where something is listening.
 
 **`download` is named and never assumed.** Offering the file is a decision
 about the content rather than about the player, and plenty of consumers
@@ -18057,7 +18084,16 @@ a typo should cost a control, not a page.
 assumed: it is absent on iPhone and behind a flag in Firefox, and a button
 that cannot work is worse than one that is not there.
 
-The names are `speed`, `pip`, `remote` and `download`.
+The names are `speed`, `pip`, `remote`, `download`, `rewind`, `forward`,
+`previous` and `next`.
+
+**`previous` and `next` do nothing to the video, and are offered anyway.**
+They announce `helix-previous` and `helix-next` and stop there, so what
+they move is whatever holds the set, which is what `VideoPlaylist` listens
+for. A player standing alone therefore draws a pair of controls that change
+nothing, and that is deliberate: a player cannot know whether it is inside
+a set, and one that hid them until it could prove there was one would be a
+player that never offers them. Name them where something is listening.
 
 **`download` is named and never assumed.** Offering the file is a decision
 about the content rather than about the player, and plenty of consumers
@@ -26661,6 +26697,7 @@ export type CustomElements = {
    * CSS variables available for styling the component.
    *
    * - `--notifications-color`: Ink in an item that has been read. (default: `undefined`)
+   * - `--notifications-dismiss-color`: Ink on the control that removes an item, which is `danger` because removing one is the end of it. (default: `undefined`)
    * - `--notifications-padding-block`: Space above and below an item. (default: `undefined`)
    * - `--notifications-padding-inline`: Space either side of an item. (default: `undefined`)
    * - `--notifications-rule`: The hairline between items. (default: `undefined`)
@@ -33911,7 +33948,16 @@ export type CustomElements = {
    * assumed: it is absent on iPhone and behind a flag in Firefox, and a button
    * that cannot work is worse than one that is not there.
    *
-   * The names are `speed`, `pip`, `remote` and `download`.
+   * The names are `speed`, `pip`, `remote`, `download`, `rewind`, `forward`,
+   * `previous` and `next`.
+   *
+   * **`previous` and `next` do nothing to the video, and are offered anyway.**
+   * They announce `helix-previous` and `helix-next` and stop there, so what
+   * they move is whatever holds the set, which is what `VideoPlaylist` listens
+   * for. A player standing alone therefore draws a pair of controls that change
+   * nothing, and that is deliberate: a player cannot know whether it is inside
+   * a set, and one that hid them until it could prove there was one would be a
+   * player that never offers them. Name them where something is listening.
    *
    * **`download` is named and never assumed.** Offering the file is a decision
    * about the content rather than about the player, and plenty of consumers
@@ -42779,6 +42825,7 @@ export type CustomElementsSolidJs = {
    * CSS variables available for styling the component.
    *
    * - `--notifications-color`: Ink in an item that has been read. (default: `undefined`)
+   * - `--notifications-dismiss-color`: Ink on the control that removes an item, which is `danger` because removing one is the end of it. (default: `undefined`)
    * - `--notifications-padding-block`: Space above and below an item. (default: `undefined`)
    * - `--notifications-padding-inline`: Space either side of an item. (default: `undefined`)
    * - `--notifications-rule`: The hairline between items. (default: `undefined`)
@@ -50227,7 +50274,16 @@ export type CustomElementsSolidJs = {
    * assumed: it is absent on iPhone and behind a flag in Firefox, and a button
    * that cannot work is worse than one that is not there.
    *
-   * The names are `speed`, `pip`, `remote` and `download`.
+   * The names are `speed`, `pip`, `remote`, `download`, `rewind`, `forward`,
+   * `previous` and `next`.
+   *
+   * **`previous` and `next` do nothing to the video, and are offered anyway.**
+   * They announce `helix-previous` and `helix-next` and stop there, so what
+   * they move is whatever holds the set, which is what `VideoPlaylist` listens
+   * for. A player standing alone therefore draws a pair of controls that change
+   * nothing, and that is deliberate: a player cannot know whether it is inside
+   * a set, and one that hid them until it could prove there was one would be a
+   * player that never offers them. Name them where something is listening.
    *
    * **`download` is named and never assumed.** Offering the file is a decision
    * about the content rather than about the player, and plenty of consumers
@@ -51051,6 +51107,8 @@ export type CustomCssProperties = {
   "--navigation-indicator-color"?: (string) | undefined;
   /** Ink in an item that has been read. */
   "--notifications-color"?: (string) | undefined;
+  /** Ink on the control that removes an item, which is `danger` because removing one is the end of it. */
+  "--notifications-dismiss-color"?: (string) | undefined;
   /** Space above and below an item. */
   "--notifications-padding-block"?: (string) | undefined;
   /** Space either side of an item. */

package/types/vue.d.ts

@@ -9145,7 +9145,16 @@ a typo should cost a control, not a page.
 assumed: it is absent on iPhone and behind a flag in Firefox, and a button
 that cannot work is worse than one that is not there.
 
-The names are `speed`, `pip`, `remote` and `download`.
+The names are `speed`, `pip`, `remote`, `download`, `rewind`, `forward`,
+`previous` and `next`.
+
+**`previous` and `next` do nothing to the video, and are offered anyway.**
+They announce `helix-previous` and `helix-next` and stop there, so what
+they move is whatever holds the set, which is what `VideoPlaylist` listens
+for. A player standing alone therefore draws a pair of controls that change
+nothing, and that is deliberate: a player cannot know whether it is inside
+a set, and one that hid them until it could prove there was one would be a
+player that never offers them. Name them where something is listening.
 
 **`download` is named and never assumed.** Offering the file is a decision
 about the content rather than about the player, and plenty of consumers
@@ -9166,7 +9175,16 @@ a typo should cost a control, not a page.
 assumed: it is absent on iPhone and behind a flag in Firefox, and a button
 that cannot work is worse than one that is not there.
 
-The names are `speed`, `pip`, `remote` and `download`.
+The names are `speed`, `pip`, `remote`, `download`, `rewind`, `forward`,
+`previous` and `next`.
+
+**`previous` and `next` do nothing to the video, and are offered anyway.**
+They announce `helix-previous` and `helix-next` and stop there, so what
+they move is whatever holds the set, which is what `VideoPlaylist` listens
+for. A player standing alone therefore draws a pair of controls that change
+nothing, and that is deliberate: a player cannot know whether it is inside
+a set, and one that hid them until it could prove there was one would be a
+player that never offers them. Name them where something is listening.
 
 **`download` is named and never assumed.** Offering the file is a decision
 about the content rather than about the player, and plenty of consumers
@@ -9876,6 +9894,8 @@ export type CustomCssProperties = {
   "--navigation-indicator-color"?: (string) | undefined;
   /** Ink in an item that has been read. */
   "--notifications-color"?: (string) | undefined;
+  /** Ink on the control that removes an item, which is `danger` because removing one is the end of it. */
+  "--notifications-dismiss-color"?: (string) | undefined;
   /** Space above and below an item. */
   "--notifications-padding-block"?: (string) | undefined;
   /** Space either side of an item. */