@fusion.dev/helix 0.16.7 → 0.17.1

package/custom-elements.json

@@ -660,11 +660,15 @@
           "name": "HelixAccordion",
           "cssProperties": [
             {
-              "description": "Color of the seams, and of the frame when outlined.",
+              "description": "Color of the seams, and of each item's frame when outlined.",
               "name": "--accordion-border-color"
             },
             {
-              "description": "Corner radius of the stack, when outlined.",
+              "description": "Space between items, when outlined. Nothing separates them otherwise: a seam is a shared edge.",
+              "name": "--accordion-gap"
+            },
+            {
+              "description": "Corner radius of each item, when outlined.",
               "name": "--accordion-radius"
             }
           ],
@@ -685,7 +689,7 @@
               "type": {
                 "text": "'outlined' | 'plain' | undefined"
               },
-              "description": "How the stack separates itself from the page.\n\nTwo of the axis's four values, which is what this surface has meaning for:\na stack of items is already told apart by its seams, so a lift would be a\nthird statement and a fill a second.\n\n- `plain` is the default and is what an application usually wants: the\n  seams between items already say the items are one set, so a frame is a\n  second statement of the same thing. Inside a card, a panel, a dialog or a\n  sidebar, it is a line and no meaning.\n- `outlined` frames the stack, for an accordion sitting directly on the\n  page where nothing else says where it starts and stops. A marketing\n  page's FAQ is the case it is for.\n\nBoth are writable, so a generated page can say which it means rather than\nrelying on the absence of an attribute.",
+              "description": "How the stack separates itself from the page.\n\nTwo of the axis's four values, which is what this surface has meaning for:\na stack of items is already told apart by its seams, so a lift would be a\nthird statement and a fill a second.\n\n- `plain` is the default and is what an application usually wants: the\n  seams between items already say the items are one set, so a frame is a\n  second statement of the same thing. Inside a card, a panel, a dialog or a\n  sidebar, it is a line and no meaning.\n- `outlined` frames **each item**, for an accordion sitting directly on the\n  page where nothing else says where the rows begin and end. A marketing\n  page's FAQ is the case it is for. Per item rather than around the stack,\n  because a frame around a set of hairline-separated rows repeats what the\n  hairlines already said, where a frame around each one makes every item a\n  thing that opens and leaves the set to be said by their alignment.\n\nBoth are writable, so a generated page can say which it means rather than\nrelying on the absence of an attribute.",
               "attribute": "separation",
               "reflects": true
             },
@@ -906,7 +910,7 @@
               "type": {
                 "text": "'outlined' | 'plain' | undefined"
               },
-              "description": "How the stack separates itself from the page.\n\nTwo of the axis's four values, which is what this surface has meaning for:\na stack of items is already told apart by its seams, so a lift would be a\nthird statement and a fill a second.\n\n- `plain` is the default and is what an application usually wants: the\n  seams between items already say the items are one set, so a frame is a\n  second statement of the same thing. Inside a card, a panel, a dialog or a\n  sidebar, it is a line and no meaning.\n- `outlined` frames the stack, for an accordion sitting directly on the\n  page where nothing else says where it starts and stops. A marketing\n  page's FAQ is the case it is for.\n\nBoth are writable, so a generated page can say which it means rather than\nrelying on the absence of an attribute.",
+              "description": "How the stack separates itself from the page.\n\nTwo of the axis's four values, which is what this surface has meaning for:\na stack of items is already told apart by its seams, so a lift would be a\nthird statement and a fill a second.\n\n- `plain` is the default and is what an application usually wants: the\n  seams between items already say the items are one set, so a frame is a\n  second statement of the same thing. Inside a card, a panel, a dialog or a\n  sidebar, it is a line and no meaning.\n- `outlined` frames **each item**, for an accordion sitting directly on the\n  page where nothing else says where the rows begin and end. A marketing\n  page's FAQ is the case it is for. Per item rather than around the stack,\n  because a frame around a set of hairline-separated rows repeats what the\n  hairlines already said, where a frame around each one makes every item a\n  thing that opens and leaves the set to be said by their alignment.\n\nBoth are writable, so a generated page can say which it means rather than\nrelying on the absence of an attribute.",
               "fieldName": "separation"
             },
             {
@@ -6869,15 +6873,10 @@
               "type": {
                 "text": "'joined' | 'spaced' | undefined"
               },
-              "description": "Whether the buttons are one bar or a spaced row.\n\nJoined by default: one control made of parts, sharing borders, reading as a\nsegmented bar.\n\n`spaced` is the same set with air between them, for a row of related but\nseparate actions. The semantics and the joining are separate questions:\n`role=\"group\"` and a shared name are what make a set of buttons a set, and\n`helix-flex` gives the spacing without the group.",
+              "description": "Whether the buttons are one bar or a spaced row.",
               "attribute": "variant",
               "reflects": true
             },
-            {
-              "description": "Whether the buttons are one bar or a spaced row.",
-              "name": "appearance",
-              "kind": "field"
-            },
             {
               "kind": "field",
               "name": "label",
@@ -7086,7 +7085,7 @@
               "type": {
                 "text": "'joined' | 'spaced' | undefined"
               },
-              "description": "Whether the buttons are one bar or a spaced row.\n\nJoined by default: one control made of parts, sharing borders, reading as a\nsegmented bar.\n\n`spaced` is the same set with air between them, for a row of related but\nseparate actions. The semantics and the joining are separate questions:\n`role=\"group\"` and a shared name are what make a set of buttons a set, and\n`helix-flex` gives the spacing without the group.",
+              "description": "Whether the buttons are one bar or a spaced row.",
               "fieldName": "variant"
             },
             {

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

@@ -4,6 +4,12 @@ display: block;
 }
 
 :host([separation="outlined"]) {
+display: flex;
+flex-direction: column;
+gap: var(--accordion-gap, var(--helix-space-xs));
+}
+
+:host([separation="outlined"]) ::slotted(*) {
 border: var(--helix-border-thin) solid var(--accordion-border-color, var(--helix-color-border));
 
 border-radius: var(--accordion-radius, var(--helix-radii-sm));
@@ -11,7 +17,7 @@ border-radius: var(--accordion-radius, var(--helix-radii-sm));
 overflow: hidden;
 }
 
-::slotted(* + *) {
+:host(:not([separation="outlined"])) ::slotted(* + *) {
 border-block-start: var(--helix-border-thin) solid
 var(--accordion-border-color, var(--helix-color-border));
 }

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

@@ -17,8 +17,9 @@ import type { CSSResultGroup } from 'lit';
  *
  * @slot - The accordion's items.
  *
- * @cssproperty --accordion-border-color - Color of the seams, and of the frame when outlined.
- * @cssproperty --accordion-radius - Corner radius of the stack, when outlined.
+ * @cssproperty --accordion-border-color - Color of the seams, and of each item's frame when outlined.
+ * @cssproperty --accordion-gap - Space between items, when outlined. Nothing separates them otherwise: a seam is a shared edge.
+ * @cssproperty --accordion-radius - Corner radius of each item, when outlined.
  */
 export declare class HelixAccordion extends HelixHeadlessAccordion {
     /**
@@ -32,9 +33,12 @@ export declare class HelixAccordion extends HelixHeadlessAccordion {
      *   seams between items already say the items are one set, so a frame is a
      *   second statement of the same thing. Inside a card, a panel, a dialog or a
      *   sidebar, it is a line and no meaning.
-     * - `outlined` frames the stack, for an accordion sitting directly on the
-     *   page where nothing else says where it starts and stops. A marketing
-     *   page's FAQ is the case it is for.
+     * - `outlined` frames **each item**, for an accordion sitting directly on the
+     *   page where nothing else says where the rows begin and end. A marketing
+     *   page's FAQ is the case it is for. Per item rather than around the stack,
+     *   because a frame around a set of hairline-separated rows repeats what the
+     *   hairlines already said, where a frame around each one makes every item a
+     *   thing that opens and leaves the set to be said by their alignment.
      *
      * Both are writable, so a generated page can say which it means rather than
      * relying on the absence of an attribute.

package/dist/button-group/root/button-group-root.d.ts

@@ -22,7 +22,7 @@ import type { CSSResultGroup } from 'lit';
  *
  * @cssproperty --button-group-gap - Space between the buttons, when `spaced`.
  *
- * @property appearance - Whether the buttons are one bar or a spaced row.
+ * @property variant - Whether the buttons are one bar or a spaced row.
  */
 export declare class HelixButtonGroup extends HelixHeadlessButtonGroup {
     static styles: CSSResultGroup;

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

@@ -530,9 +530,12 @@ third statement and a fill a second.
   seams between items already say the items are one set, so a frame is a
   second statement of the same thing. Inside a card, a panel, a dialog or a
   sidebar, it is a line and no meaning.
-- `outlined` frames the stack, for an accordion sitting directly on the
-  page where nothing else says where it starts and stops. A marketing
-  page's FAQ is the case it is for.
+- `outlined` frames **each item**, for an accordion sitting directly on the
+  page where nothing else says where the rows begin and end. A marketing
+  page's FAQ is the case it is for. Per item rather than around the stack,
+  because a frame around a set of hairline-separated rows repeats what the
+  hairlines already said, where a frame around each one makes every item a
+  thing that opens and leaves the set to be said by their alignment.
 
 Both are writable, so a generated page can say which it means rather than
 relying on the absence of an attribute. */
@@ -559,9 +562,12 @@ third statement and a fill a second.
   seams between items already say the items are one set, so a frame is a
   second statement of the same thing. Inside a card, a panel, a dialog or a
   sidebar, it is a line and no meaning.
-- `outlined` frames the stack, for an accordion sitting directly on the
-  page where nothing else says where it starts and stops. A marketing
-  page's FAQ is the case it is for.
+- `outlined` frames **each item**, for an accordion sitting directly on the
+  page where nothing else says where the rows begin and end. A marketing
+  page's FAQ is the case it is for. Per item rather than around the stack,
+  because a frame around a set of hairline-separated rows repeats what the
+  hairlines already said, where a frame around each one makes every item a
+  thing that opens and leaves the set to be said by their alignment.
 
 Both are writable, so a generated page can say which it means rather than
 relying on the absence of an attribute. */
@@ -1651,15 +1657,7 @@ export type HelixBreadcrumbsSolidJsProps = {
 };
 
 export type HelixButtonGroupProps = {
-  /** Whether the buttons are one bar or a spaced row.
-
-Joined by default: one control made of parts, sharing borders, reading as a
-segmented bar.
-
-`spaced` is the same set with air between them, for a row of related but
-separate actions. The semantics and the joining are separate questions:
-`role="group"` and a shared name are what make a set of buttons a set, and
-`helix-flex` gives the spacing without the group. */
+  /** Whether the buttons are one bar or a spaced row. */
   variant?: (HelixButtonGroup["variant"]) | undefined;
   /** Accessible name for the group.
 
@@ -1684,20 +1682,10 @@ buttons sharing edges as one shape, and a wrapped row carries the corners of
 a first row into a second. Stacked, the same three keep one shape and one
 column. */
   orientation?: (HelixButtonGroup["orientation"]) | undefined;
-  /** Whether the buttons are one bar or a spaced row. */
-  appearance?: (HelixButtonGroup["appearance"]) | undefined;
 };
 
 export type HelixButtonGroupSolidJsProps = {
-  /** Whether the buttons are one bar or a spaced row.
-
-Joined by default: one control made of parts, sharing borders, reading as a
-segmented bar.
-
-`spaced` is the same set with air between them, for a row of related but
-separate actions. The semantics and the joining are separate questions:
-`role="group"` and a shared name are what make a set of buttons a set, and
-`helix-flex` gives the spacing without the group. */
+  /** Whether the buttons are one bar or a spaced row. */
   "prop:variant"?: (HelixButtonGroup["variant"]) | undefined;
   /** Accessible name for the group.
 
@@ -1722,8 +1710,6 @@ buttons sharing edges as one shape, and a wrapped row carries the corners of
 a first row into a second. Stacked, the same three keep one shape and one
 column. */
   "prop:orientation"?: (HelixButtonGroup["orientation"]) | undefined;
-  /** Whether the buttons are one bar or a spaced row. */
-  "prop:appearance"?: (HelixButtonGroup["appearance"]) | undefined;
 
   /** Set the innerHTML of the element */
   innerHTML?: (string) | undefined;
@@ -18452,9 +18438,12 @@ export type CustomElements = {
    *   seams between items already say the items are one set, so a frame is a
    *   second statement of the same thing. Inside a card, a panel, a dialog or a
    *   sidebar, it is a line and no meaning.
-   * - `outlined` frames the stack, for an accordion sitting directly on the
-   *   page where nothing else says where it starts and stops. A marketing
-   *   page's FAQ is the case it is for.
+   * - `outlined` frames **each item**, for an accordion sitting directly on the
+   *   page where nothing else says where the rows begin and end. A marketing
+   *   page's FAQ is the case it is for. Per item rather than around the stack,
+   *   because a frame around a set of hairline-separated rows repeats what the
+   *   hairlines already said, where a frame around each one makes every item a
+   *   thing that opens and leaves the set to be said by their alignment.
    *
    * Both are writable, so a generated page can say which it means rather than
    * relying on the absence of an attribute.
@@ -18496,8 +18485,9 @@ export type CustomElements = {
    *
    * CSS variables available for styling the component.
    *
-   * - `--accordion-border-color`: Color of the seams, and of the frame when outlined. (default: `undefined`)
-   * - `--accordion-radius`: Corner radius of the stack, when outlined. (default: `undefined`)
+   * - `--accordion-border-color`: Color of the seams, and of each item's frame when outlined. (default: `undefined`)
+   * - `--accordion-gap`: Space between items, when outlined. Nothing separates them otherwise: a seam is a shared edge. (default: `undefined`)
+   * - `--accordion-radius`: Corner radius of each item, when outlined. (default: `undefined`)
    */
   "helix-accordion": Partial<
     HelixAccordionProps & BaseProps<HelixAccordion> & BaseEvents<HelixAccordion>
@@ -19545,14 +19535,6 @@ export type CustomElements = {
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
    * - `variant`: Whether the buttons are one bar or a spaced row.
-   *
-   * Joined by default: one control made of parts, sharing borders, reading as a
-   * segmented bar.
-   *
-   * `spaced` is the same set with air between them, for a row of related but
-   * separate actions. The semantics and the joining are separate questions:
-   * `role="group"` and a shared name are what make a set of buttons a set, and
-   * `helix-flex` gives the spacing without the group.
    * - `label`: Accessible name for the group.
    *
    * On the host through internals, so an author's `aria-label` still overrides
@@ -19574,7 +19556,6 @@ export type CustomElements = {
    * buttons sharing edges as one shape, and a wrapped row carries the corners of
    * a first row into a second. Stacked, the same three keep one shape and one
    * column.
-   * - `appearance`: Whether the buttons are one bar or a spaced row. (property only)
    * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
    *
    * **Named `whenSettled` because `settled` is taken four times over**, by
@@ -34410,9 +34391,12 @@ export type CustomElementsSolidJs = {
    *   seams between items already say the items are one set, so a frame is a
    *   second statement of the same thing. Inside a card, a panel, a dialog or a
    *   sidebar, it is a line and no meaning.
-   * - `outlined` frames the stack, for an accordion sitting directly on the
-   *   page where nothing else says where it starts and stops. A marketing
-   *   page's FAQ is the case it is for.
+   * - `outlined` frames **each item**, for an accordion sitting directly on the
+   *   page where nothing else says where the rows begin and end. A marketing
+   *   page's FAQ is the case it is for. Per item rather than around the stack,
+   *   because a frame around a set of hairline-separated rows repeats what the
+   *   hairlines already said, where a frame around each one makes every item a
+   *   thing that opens and leaves the set to be said by their alignment.
    *
    * Both are writable, so a generated page can say which it means rather than
    * relying on the absence of an attribute.
@@ -34454,8 +34438,9 @@ export type CustomElementsSolidJs = {
    *
    * CSS variables available for styling the component.
    *
-   * - `--accordion-border-color`: Color of the seams, and of the frame when outlined. (default: `undefined`)
-   * - `--accordion-radius`: Corner radius of the stack, when outlined. (default: `undefined`)
+   * - `--accordion-border-color`: Color of the seams, and of each item's frame when outlined. (default: `undefined`)
+   * - `--accordion-gap`: Space between items, when outlined. Nothing separates them otherwise: a seam is a shared edge. (default: `undefined`)
+   * - `--accordion-radius`: Corner radius of each item, when outlined. (default: `undefined`)
    */
   "helix-accordion": Partial<
     HelixAccordionProps &
@@ -35537,14 +35522,6 @@ export type CustomElementsSolidJs = {
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
    * - `variant`: Whether the buttons are one bar or a spaced row.
-   *
-   * Joined by default: one control made of parts, sharing borders, reading as a
-   * segmented bar.
-   *
-   * `spaced` is the same set with air between them, for a row of related but
-   * separate actions. The semantics and the joining are separate questions:
-   * `role="group"` and a shared name are what make a set of buttons a set, and
-   * `helix-flex` gives the spacing without the group.
    * - `label`: Accessible name for the group.
    *
    * On the host through internals, so an author's `aria-label` still overrides
@@ -35566,7 +35543,6 @@ export type CustomElementsSolidJs = {
    * buttons sharing edges as one shape, and a wrapped row carries the corners of
    * a first row into a second. Stacked, the same three keep one shape and one
    * column.
-   * - `appearance`: Whether the buttons are one bar or a spaced row. (property only)
    * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
    *
    * **Named `whenSettled` because `settled` is taken four times over**, by
@@ -50611,9 +50587,11 @@ export type CustomElementsSolidJs = {
 export type CustomCssProperties = {
   /** Inset of the trigger and content. */
   "--accordion-item-padding"?: (string) | undefined;
-  /** Color of the seams, and of the frame when outlined. */
+  /** Color of the seams, and of each item's frame when outlined. */
   "--accordion-border-color"?: (string) | undefined;
-  /** Corner radius of the stack, when outlined. */
+  /** Space between items, when outlined. Nothing separates them otherwise: a seam is a shared edge. */
+  "--accordion-gap"?: (string) | undefined;
+  /** Corner radius of each item, when outlined. */
   "--accordion-radius"?: (string) | undefined;
   /** Inline padding, matched to the page. */
   "--announcement-inset"?: (string) | undefined;

package/types/vue.d.ts

@@ -287,9 +287,12 @@ third statement and a fill a second.
   seams between items already say the items are one set, so a frame is a
   second statement of the same thing. Inside a card, a panel, a dialog or a
   sidebar, it is a line and no meaning.
-- `outlined` frames the stack, for an accordion sitting directly on the
-  page where nothing else says where it starts and stops. A marketing
-  page's FAQ is the case it is for.
+- `outlined` frames **each item**, for an accordion sitting directly on the
+  page where nothing else says where the rows begin and end. A marketing
+  page's FAQ is the case it is for. Per item rather than around the stack,
+  because a frame around a set of hairline-separated rows repeats what the
+  hairlines already said, where a frame around each one makes every item a
+  thing that opens and leaves the set to be said by their alignment.
 
 Both are writable, so a generated page can say which it means rather than
 relying on the absence of an attribute. */
@@ -849,15 +852,7 @@ export type HelixBreadcrumbsVueProps = {};
 export type HelixBreadcrumbsVueEvents = {};
 
 export type HelixButtonGroupVueProps = {
-  /** Whether the buttons are one bar or a spaced row.
-
-Joined by default: one control made of parts, sharing borders, reading as a
-segmented bar.
-
-`spaced` is the same set with air between them, for a row of related but
-separate actions. The semantics and the joining are separate questions:
-`role="group"` and a shared name are what make a set of buttons a set, and
-`helix-flex` gives the spacing without the group. */
+  /** Whether the buttons are one bar or a spaced row. */
   variant?: (HelixButtonGroup["variant"]) | undefined;
   /** Accessible name for the group.
 
@@ -882,8 +877,6 @@ buttons sharing edges as one shape, and a wrapped row carries the corners of
 a first row into a second. Stacked, the same three keep one shape and one
 column. */
   orientation?: (HelixButtonGroup["orientation"]) | undefined;
-  /** Whether the buttons are one bar or a spaced row. */
-  appearance?: (HelixButtonGroup["appearance"]) | undefined;
 };
 
 export type HelixButtonGroupVueEvents = {};
@@ -9368,9 +9361,11 @@ export type HelixVirtualListVueEvents = {};
 export type CustomCssProperties = {
   /** Inset of the trigger and content. */
   "--accordion-item-padding"?: (string) | undefined;
-  /** Color of the seams, and of the frame when outlined. */
+  /** Color of the seams, and of each item's frame when outlined. */
   "--accordion-border-color"?: (string) | undefined;
-  /** Corner radius of the stack, when outlined. */
+  /** Space between items, when outlined. Nothing separates them otherwise: a seam is a shared edge. */
+  "--accordion-gap"?: (string) | undefined;
+  /** Corner radius of each item, when outlined. */
   "--accordion-radius"?: (string) | undefined;
   /** Inline padding, matched to the page. */
   "--announcement-inset"?: (string) | undefined;