@fusion.dev/helix 0.16.6 → 0.17.0

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"
             },
             {

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/chat/composer/chat-composer.css.js

@@ -15,7 +15,7 @@ padding: var(--helix-space-xs);
 
 [part="composer"]:focus-within {
 outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
+outline-offset: 0;
 }
 
 [part="field"] {

package/dist/file-input/root/file-input-root.css.js

@@ -27,7 +27,7 @@ display: block;
 
 [part="field"]:has([part="control"]:focus-visible) {
 outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
+outline-offset: 0;
 }
 
 [part="field"][data-dropping] {

package/dist/number-input/root/number-input-root.css.js

@@ -25,7 +25,7 @@ border-color: var(--helix-color-foreground-muted);
 :host(:not(:disabled)) [part="field"]:focus-within {
 border-color: var(--helix-color-primary);
 outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
+outline-offset: 0;
 }
 
 :host(:state(invalid)) [part="field"],

package/dist/pin-input/root/pin-input-root.css.js

@@ -35,7 +35,7 @@ border-color: var(--helix-color-foreground-muted);
 [part="cell"]:focus-visible {
 border-color: var(--helix-color-primary);
 outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
+outline-offset: 0;
 }
 
 :host(:state(invalid)) [part="cell"] {

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

@@ -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. */
@@ -18452,9 +18458,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 +18505,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>
@@ -34410,9 +34420,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 +34467,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 &
@@ -50611,9 +50625,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. */
@@ -9368,9 +9371,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;