@fusion.dev/helix 0.21.0 → 0.23.0

package/custom-elements.json

@@ -6136,7 +6136,7 @@
               }
             },
             {
-              "description": "After it, for a count or a mark.",
+              "description": "After the label and outside the link, so it may be a control: this is where a switcher's menu trigger goes. A count or a mark is equally at home here and is no longer read into the link's accessible name.",
               "name": "end",
               "inheritedFrom": {
                 "name": "HelixHeadlessBreadcrumb",
@@ -6776,8 +6776,8 @@
                 "slug": "overflow"
               },
               {
-                "description": "A crumb that opens a menu, for switching what the trail is about.",
-                "min": 320,
+                "description": "A crumb that is both a link and a switch: the word goes to its page, the chevron opens the siblings.",
+                "min": 380,
                 "slug": "switcher"
               }
             ],
@@ -50125,12 +50125,16 @@
           "description": "The tick and the arrow hold their space whether or not they are showing, so\nthe labels in a menu start at one place and the rows read as a column rather\nthan as a ragged list.",
           "name": "HelixMenuItem",
           "cssProperties": [
+            {
+              "description": "Width of the trailing column, seam included, which holds a tick or the caret into a page.",
+              "name": "--menu-item-end"
+            },
             {
               "description": "Fill under the pointer.",
               "name": "--menu-item-hover-color"
             },
             {
-              "description": "Width of the leading column, for a row carrying more than a mark.",
+              "description": "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.",
               "name": "--menu-item-start"
             }
           ],
@@ -50303,6 +50307,31 @@
                 "module": "src/menu/item/menu-item.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "start",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "description": "Whether anything is slotted before the label.\n\nThe leading box is drawn only where there is something to put in it, the\nsame way the trailing mark is. What keeps the labels on one edge is the\ntrack the menu reserves for the page, not a box on every row, so a row with\nnothing here takes no box and still lines up with its neighbors.\n\nRead from the slot rather than from the light DOM, because the light DOM\nanswer is not reactive: a consumer who adds an icon to one row after first\nrender changes nothing this element is told about, and `slotchange` is\nexactly the thing that is.",
+              "inheritedFrom": {
+                "name": "HelixHeadlessMenuItem",
+                "module": "src/menu/item/menu-item.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "readStart",
+              "privacy": "private",
+              "readonly": true,
+              "description": "Re-reads whether anything is before the label.\n\nThe slot itself is always rendered and it is the box around it that comes\nand goes, which is what makes this safe where `readSubmenu` needed the note\nit carries: there is one `slot[name=\"start\"]` in one template branch, so it\nis never rebuilt and never fires on its way out.",
+              "inheritedFrom": {
+                "name": "HelixHeadlessMenuItem",
+                "module": "src/menu/item/menu-item.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "readSubmenu",
@@ -51339,6 +51368,21 @@
                 "module": "src/menu/root/menu-root.ts"
               }
             },
+            {
+              "kind": "method",
+              "name": "markColumns",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Says whether the page showing reserves a column either side of its labels.\n\n**A fact no row can answer for itself**, which is why the columns were\nunconditional. A row knows about its own start slot and nothing about its\nneighbors, so a page where one row has an icon and the rest do not draws two\ndifferent left edges for its text. Reserving on every row instead charged\nevery menu for a column nothing in it was ever going to fill: measured on a\npage of two plain rows, the text started 36 pixels into the row, of which 12\nwas the row's own padding and 24 a leading column and its seam. The same\npage now starts at 12, and a page where one row does have a mark still\nstarts both of its rows at 36.\n\n**Per page rather than per menu**, because a submenu is a different set of\nrows: a page of checkable filters under a page of plain ones reserves on one\nand not on the other, and asking the whole tree would hand the plain page\nthe filters' column. `Notifications` answers the same question for its media\ncolumn the same way, and for the same reason.\n\nRead off the light DOM rather than off the rows, so it does not depend on\nwhich children have upgraded by the time this runs.",
+              "inheritedFrom": {
+                "name": "HelixHeadlessMenu",
+                "module": "src/menu/root/menu-root.ts"
+              }
+            },
             {
               "kind": "method",
               "name": "mark",

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

@@ -134,7 +134,10 @@ background-color: var(
 color-mix(in oklab, var(--_button-tone) 14%, transparent)
 );
 border-color: transparent;
-color: var(--button-foreground-color, var(--_button-tone));
+color: var(
+--button-foreground-color,
+color-mix(in oklab, var(--_button-tone) 78%, var(--helix-color-foreground))
+);
 }
 
 :host(:not(:disabled)[emphasis="subtle"]) [part="button"]:hover {

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

@@ -16,12 +16,11 @@ 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);
+var(--menu-item-end, 0px);
 min-block-size: var(--helix-size-control-tight);
 
 padding-inline: var(--helix-space-sm);
@@ -50,17 +49,39 @@ opacity: 0.5;
 --icon-size: var(--helix-size-icon-tight);
 
 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"] {

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

@@ -9,6 +9,9 @@ display: contents;
 --helix-size-control: var(--helix-size-control-sm);
 --helix-size-icon: var(--helix-size-icon-sm);
 
+--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 +31,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/time-picker/root/time-picker-root.css.js

@@ -111,8 +111,8 @@ background-color: var(--helix-color-surface-sunken);
 }
 
 [part="column"] [part="option"]:state(selected)::part(label) {
-background-color: var(--time-picker-selected-color, var(--helix-color-foreground-muted));
-color: var(--helix-color-foreground-on-accent);
+background-color: var(--time-picker-selected-color, var(--helix-color-surface-inverse));
+color: var(--helix-color-foreground-inverse);
 }
 
 [part="column"] [part="option"]::part(item)::after {

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.21.0",
+  "version": "0.23.0",
   "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.21.0",
-    "@fusion.dev/helix-headless": "0.21.0",
-    "@fusion.dev/helix-styles": "0.21.0"
+    "@fusion.dev/helix-core": "0.23.0",
+    "@fusion.dev/helix-headless": "0.23.0",
+    "@fusion.dev/helix-styles": "0.23.0"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@fusion.dev/helix-cem": "0.21.0",
-    "@fusion.dev/helix-testing": "0.21.0",
+    "@fusion.dev/helix-cem": "0.23.0",
+    "@fusion.dev/helix-testing": "0.23.0",
     "@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

@@ -19467,7 +19467,7 @@ export type CustomElements = {
    *
    * - `(default)`: The step: a link, or the text of the current page.
    * - `separator`: Replaces the chevron shown before this item.
-   * - `end`: After it, for a count or a mark.
+   * - `end`: After the label and outside the link, so it may be a control: this is where a switcher's menu trigger goes. A count or a mark is equally at home here and is no longer read into the link's accessible name.
    * - `start`: Before the label, for an icon.
    *
    * ## CSS Custom Properties
@@ -26276,8 +26276,9 @@ export type CustomElements = {
    *
    * CSS variables available for styling the component.
    *
+   * - `--menu-item-end`: Width of the trailing column, seam included, which holds a tick or the caret into a page. (default: `undefined`)
    * - `--menu-item-hover-color`: Fill under the pointer. (default: `undefined`)
-   * - `--menu-item-start`: Width of the leading column, for a row carrying more than a mark. (default: `undefined`)
+   * - `--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. (default: `undefined`)
    *
    * ## CSS Parts
    *
@@ -35454,7 +35455,7 @@ export type CustomElementsSolidJs = {
    *
    * - `(default)`: The step: a link, or the text of the current page.
    * - `separator`: Replaces the chevron shown before this item.
-   * - `end`: After it, for a count or a mark.
+   * - `end`: After the label and outside the link, so it may be a control: this is where a switcher's menu trigger goes. A count or a mark is equally at home here and is no longer read into the link's accessible name.
    * - `start`: Before the label, for an icon.
    *
    * ## CSS Custom Properties
@@ -42402,8 +42403,9 @@ export type CustomElementsSolidJs = {
    *
    * CSS variables available for styling the component.
    *
+   * - `--menu-item-end`: Width of the trailing column, seam included, which holds a tick or the caret into a page. (default: `undefined`)
    * - `--menu-item-hover-color`: Fill under the pointer. (default: `undefined`)
-   * - `--menu-item-start`: Width of the leading column, for a row carrying more than a mark. (default: `undefined`)
+   * - `--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. (default: `undefined`)
    *
    * ## CSS Parts
    *
@@ -51107,9 +51109,11 @@ export type CustomCssProperties = {
   "--megamenu-size"?: (string) | undefined;
   /** Where the panel starts, measured from the bar above it. */
   "--megamenu-top"?: (string) | undefined;
+  /** Width of the trailing column, seam included, which holds a tick or the caret into a page. */
+  "--menu-item-end"?: (string) | undefined;
   /** Fill under the pointer. */
   "--menu-item-hover-color"?: (string) | undefined;
-  /** Width of the leading column, for a row carrying more than a mark. */
+  /** 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. */
   "--menu-item-start"?: (string) | undefined;
   /** Fill of the surface. */
   "--menu-background-color"?: (string) | undefined;

package/types/vue.d.ts

@@ -9865,9 +9865,11 @@ export type CustomCssProperties = {
   "--megamenu-size"?: (string) | undefined;
   /** Where the panel starts, measured from the bar above it. */
   "--megamenu-top"?: (string) | undefined;
+  /** Width of the trailing column, seam included, which holds a tick or the caret into a page. */
+  "--menu-item-end"?: (string) | undefined;
   /** Fill under the pointer. */
   "--menu-item-hover-color"?: (string) | undefined;
-  /** Width of the leading column, for a row carrying more than a mark. */
+  /** 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. */
   "--menu-item-start"?: (string) | undefined;
   /** Fill of the surface. */
   "--menu-background-color"?: (string) | undefined;