@fusion.dev/helix 0.33.0 → 0.33.2

package/custom-elements.json

@@ -20685,7 +20685,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "The header sits above the code rather than floating on it. Overlaid, which is\nthe usual build, the copy button covers the first line, which is the one line\nof a snippet a reader is most likely to be reading.\n\nA diff is drawn a block per file in the same frame, each changed line washed\nin its tone at Tag's resting strength with its `+` or `-` in the tone's ink,\nso the change does not rest on telling two pale grounds apart. A split diff\nstacks its two versions below about 40rem of the file's own width.",
+          "description": "The header sits above the code rather than floating on it, and the copy\nbutton stands at its end. Overlaid, which is the usual build, the button\ncovers the first line, which is the one line of a snippet a reader is most\nlikely to be reading. A block with no name has no header, and the button\nstands beside the code in room the block keeps clear: an end gutter for code,\na band above the first hunk for a diff.\n\nA diff is drawn a block per file in the same frame, each changed line washed\nin its tone at Tag's resting strength with its `+` or `-` in the tone's ink,\nso the change does not rest on telling two pale grounds apart. A split diff\nstacks its two versions below about 40rem of the file's own width.",
           "name": "HelixCodeBlock",
           "cssProperties": [
             {
@@ -20824,6 +20824,59 @@
                 "module": "src/code-block/root/code-block-root.ts"
               }
             },
+            {
+              "kind": "method",
+              "name": "renderHeader",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "TemplateResult | typeof nothing"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "value",
+                  "optional": true,
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "The name with the copy button beside it, or nothing when there is no name.\n\n**The button is in the header wherever there is one**, because beside the\ncode it stands over the block and the block has to make room for it. A\ndiff cannot: its washes run to the edge, so the button stood on the hunk\nline and the line under it. In the header it is over nothing.\n\n**No name draws no header**, rather than a bar to hold one button, which\nturned a `Usage` section of one-line imports into a run of empty strips.\nThe button then stands beside the code, in room the block keeps for it.",
+              "inheritedFrom": {
+                "name": "HelixHeadlessCodeBlock",
+                "module": "src/code-block/root/code-block-root.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderCopy",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "TemplateResult | typeof nothing"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "value",
+                  "optional": true,
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "HelixHeadlessCodeBlock",
+                "module": "src/code-block/root/code-block-root.ts"
+              }
+            },
             {
               "kind": "method",
               "name": "renderCopyButton",
@@ -21380,7 +21433,7 @@
               }
             },
             {
-              "description": "The copy button.",
+              "description": "The copy button: in the header where there is one, and otherwise beside the code.",
               "name": "copy",
               "inheritedFrom": {
                 "name": "HelixHeadlessCodeBlock",
@@ -21500,7 +21553,7 @@
               }
             },
             {
-              "description": "The code and the copy button beside it.",
+              "description": "The code, and the copy button beside it where there is no header.",
               "name": "frame",
               "inheritedFrom": {
                 "name": "HelixHeadlessCodeBlock",
@@ -21508,7 +21561,7 @@
               }
             },
             {
-              "description": "The bar carrying the name, where there is one.",
+              "description": "The bar carrying the name and the copy button, where there is a name.",
               "name": "header",
               "inheritedFrom": {
                 "name": "HelixHeadlessCodeBlock",
@@ -44605,12 +44658,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/element-events.generated.ts",
-      "declarations": [],
-      "exports": []
-    },
     {
       "kind": "javascript-module",
       "path": "src/empty/index.ts",

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

@@ -2,7 +2,13 @@ import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 --_carousel-bleed: var(--carousel-bleed, var(--helix-space-md));
 --_carousel-gap: var(--carousel-gap, var(--helix-space-md));
+
+--_carousel-pane: calc(round(var(--_carousel-share) - 0.015625px, 0.03125px) + 0.015625px);
 --_carousel-per-view: 1;
+--_carousel-share: calc(
+(100% - (var(--_carousel-per-view) - 1) * var(--_carousel-gap)) /
+var(--_carousel-per-view)
+);
 }
 
 :host {
@@ -198,16 +204,21 @@ scroll-snap-type: y mandatory;
 
 [part="slide"] {
 display: flex;
-flex: 0 0
-round(
-up,
-(100% - (var(--_carousel-per-view) - 1) * var(--_carousel-gap)) /
-var(--_carousel-per-view),
-1px
-);
+flex: 0 0 var(--_carousel-pane);
 scroll-snap-align: start;
 }
 
+:host(:not([orientation="vertical"])) [part="slide"]:last-child {
+--_carousel-overrun: calc(
+sibling-count() *
+(var(--_carousel-pane) + var(--_carousel-gap)) -
+var(--_carousel-gap) -
+100%
+);
+--_carousel-run-end: calc(round(var(--_carousel-overrun), 1px) - var(--_carousel-overrun));
+margin-inline-end: var(--_carousel-run-end);
+}
+
 [part="slide"] ::slotted(*) {
 flex: 1 1 0;
 min-block-size: 0;
@@ -216,11 +227,7 @@ min-inline-size: 0;
 
 :host([orientation="vertical"]) [part="slide"] {
 flex-direction: column;
-flex: 0 0
-calc(
-(100% - (var(--_carousel-per-view) - 1) * var(--_carousel-gap)) /
-var(--_carousel-per-view)
-);
+flex: 0 0 var(--_carousel-share);
 }
 
 :host([per-view="2"]) {

package/dist/code-block/root/code-block-root.css.js

@@ -28,16 +28,24 @@ border-end-start-radius: var(--helix-radii-none);
 border-start-end-radius: var(--code-block-radius, var(--helix-radii-lg));
 border-start-start-radius: var(--code-block-radius, var(--helix-radii-lg));
 display: flex;
+gap: var(--helix-space-sm);
 
 padding-block: var(--helix-space-xs);
 padding-inline: var(--helix-space-md);
 }
 
+[part="header"]:has(> [part="copy"]) {
+padding-block: var(--helix-space-2xs);
+padding-inline-end: var(--helix-space-2xs);
+}
+
 [part="label"] {
 color: var(--helix-color-foreground-muted);
 font-family: var(--helix-font-sans);
 font-size: var(--helix-text-xs);
 font-weight: var(--helix-weight-medium);
+min-inline-size: 0;
+overflow-wrap: anywhere;
 }
 
 [part="frame"] {
@@ -50,6 +58,13 @@ block-size: 100%;
 
 [part="copy"] {
 --icon-button-size: var(--helix-size-control-sm);
+}
+
+[part="header"] > [part="copy"] {
+margin-inline-start: auto;
+}
+
+[part="frame"] > [part="copy"] {
 inset-block-start: var(--_code-block-copy-inset);
 inset-inline-end: var(--_code-block-copy-inset);
 position: absolute;
@@ -67,7 +82,7 @@ padding-block: var(--helix-space-sm);
 padding-inline: var(--helix-space-md);
 }
 
-:host(:not([no-copy])) [part="block"] {
+:host(:not([diff], [no-copy])) [part="frame"]:not([part="header"] + *) > [part="block"] {
 padding-inline-end: var(--_code-block-gutter);
 }
 
@@ -114,7 +129,13 @@ padding-block: var(--helix-space-none) var(--helix-space-sm);
 padding-inline: var(--helix-space-none);
 }
 
-[part="header"] + [part="frame"] [part="split"] > * {
+:host([diff]:not([no-copy]))
+[part="frame"]:not([part="header"] + *)
+:is([part="block"], [part="old"], [part="new"]) {
+padding-block-start: var(--_code-block-gutter);
+}
+
+[part="header"] + [part="frame"] :is([part="block"], [part="split"] > *) {
 border-block-start-width: var(--helix-space-none);
 border-start-end-radius: var(--helix-radii-none);
 border-start-start-radius: var(--helix-radii-none);
@@ -130,6 +151,16 @@ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
 [part="split"] {
 grid-template-columns: minmax(0, 1fr);
 }
+
+[part="header"] + [part="frame"] [part="new"] {
+border-block-start-width: var(--helix-border-thin);
+border-start-end-radius: var(--code-block-radius, var(--helix-radii-lg));
+border-start-start-radius: var(--code-block-radius, var(--helix-radii-lg));
+}
+
+:host([diff]:not([no-copy])) [part="frame"]:not([part="header"] + *) [part="new"] {
+padding-block-start: var(--helix-space-none);
+}
 }
 
 :host([diff]) [part="code"] {
@@ -147,10 +178,6 @@ padding-inline: var(--helix-space-md);
 text-decoration: none;
 }
 
-:host(:not([no-copy])) :is([part="hunk"], [part="context"], [part="added"], [part="removed"]) {
-padding-inline-end: var(--_code-block-gutter);
-}
-
 [part="hunk"] {
 background-color: var(--helix-color-surface-sunken);
 color: var(--helix-color-foreground-muted);

package/dist/code-block/root/code-block-root.d.ts

@@ -5,9 +5,12 @@ import '../../copy-button/index.js';
  * @summary A block of code, with somewhere to put its name and a way to take it.
  *
  * @description
- * The header sits above the code rather than floating on it. Overlaid, which is
- * the usual build, the copy button covers the first line, which is the one line
- * of a snippet a reader is most likely to be reading.
+ * The header sits above the code rather than floating on it, and the copy
+ * button stands at its end. Overlaid, which is the usual build, the button
+ * covers the first line, which is the one line of a snippet a reader is most
+ * likely to be reading. A block with no name has no header, and the button
+ * stands beside the code in room the block keeps clear: an end gutter for code,
+ * a band above the first hunk for a diff.
  *
  * A diff is drawn a block per file in the same frame, each changed line washed
  * in its tone at Tag's resting strength with its `+` or `-` in the tone's ink,

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.33.0",
+  "version": "0.33.2",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -47,14 +47,14 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.33.0",
-    "@fusion.dev/helix-headless": "0.33.0",
-    "@fusion.dev/helix-styles": "0.33.0"
+    "@fusion.dev/helix-core": "0.33.2",
+    "@fusion.dev/helix-headless": "0.33.2",
+    "@fusion.dev/helix-styles": "0.33.2"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@fusion.dev/helix-cem": "0.33.0",
-    "@fusion.dev/helix-testing": "0.33.0",
+    "@fusion.dev/helix-cem": "0.33.2",
+    "@fusion.dev/helix-testing": "0.33.2",
     "@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

@@ -22811,9 +22811,12 @@ export type CustomElements = {
   >;
 
   /**
-   * The header sits above the code rather than floating on it. Overlaid, which is
-   * the usual build, the copy button covers the first line, which is the one line
-   * of a snippet a reader is most likely to be reading.
+   * The header sits above the code rather than floating on it, and the copy
+   * button stands at its end. Overlaid, which is the usual build, the button
+   * covers the first line, which is the one line of a snippet a reader is most
+   * likely to be reading. A block with no name has no header, and the button
+   * stands beside the code in room the block keeps clear: an end gutter for code,
+   * a band above the first hunk for a diff.
    *
    * A diff is drawn a block per file in the same frame, each changed line washed
    * in its tone at Tag's resting strength with its `+` or `-` in the tone's ink,
@@ -22901,7 +22904,7 @@ export type CustomElements = {
    * - `block`: The scrolling `<pre>`.
    * - `code`: The `<code>` inside it.
    * - `context`: In a diff, a line both versions share.
-   * - `copy`: The copy button.
+   * - `copy`: The copy button: in the header where there is one, and otherwise beside the code.
    * - `copy-button`: The inner button.
    * - `copy-mark`: The clipboard glyph, and the confirmation that replaces it.
    * - `copy-tooltip`: The bubble, forwarded from the tooltip inside.
@@ -22916,8 +22919,8 @@ export type CustomElements = {
    * - `copy-tooltip-top`: The bubble while it is above the copy button, beside `copy-tooltip`.
    * - `file`: In a diff, one file's header and block.
    * - `filler`: In a split diff, the empty row opposite a line the other side does not have.
-   * - `frame`: The code and the copy button beside it.
-   * - `header`: The bar carrying the name, where there is one.
+   * - `frame`: The code, and the copy button beside it where there is no header.
+   * - `header`: The bar carrying the name and the copy button, where there is a name.
    * - `hunk`: In a diff, a `@@` line saying where the lines under it are.
    * - `label`: The file name or language, where one is given.
    * - `marker`: In a diff, the `+`, `-` or space that opens a line.
@@ -41641,9 +41644,12 @@ export type CustomElementsSolidJs = {
   >;
 
   /**
-   * The header sits above the code rather than floating on it. Overlaid, which is
-   * the usual build, the copy button covers the first line, which is the one line
-   * of a snippet a reader is most likely to be reading.
+   * The header sits above the code rather than floating on it, and the copy
+   * button stands at its end. Overlaid, which is the usual build, the button
+   * covers the first line, which is the one line of a snippet a reader is most
+   * likely to be reading. A block with no name has no header, and the button
+   * stands beside the code in room the block keeps clear: an end gutter for code,
+   * a band above the first hunk for a diff.
    *
    * A diff is drawn a block per file in the same frame, each changed line washed
    * in its tone at Tag's resting strength with its `+` or `-` in the tone's ink,
@@ -41731,7 +41737,7 @@ export type CustomElementsSolidJs = {
    * - `block`: The scrolling `<pre>`.
    * - `code`: The `<code>` inside it.
    * - `context`: In a diff, a line both versions share.
-   * - `copy`: The copy button.
+   * - `copy`: The copy button: in the header where there is one, and otherwise beside the code.
    * - `copy-button`: The inner button.
    * - `copy-mark`: The clipboard glyph, and the confirmation that replaces it.
    * - `copy-tooltip`: The bubble, forwarded from the tooltip inside.
@@ -41746,8 +41752,8 @@ export type CustomElementsSolidJs = {
    * - `copy-tooltip-top`: The bubble while it is above the copy button, beside `copy-tooltip`.
    * - `file`: In a diff, one file's header and block.
    * - `filler`: In a split diff, the empty row opposite a line the other side does not have.
-   * - `frame`: The code and the copy button beside it.
-   * - `header`: The bar carrying the name, where there is one.
+   * - `frame`: The code, and the copy button beside it where there is no header.
+   * - `header`: The bar carrying the name and the copy button, where there is a name.
    * - `hunk`: In a diff, a `@@` line saying where the lines under it are.
    * - `label`: The file name or language, where one is given.
    * - `marker`: In a diff, the `+`, `-` or space that opens a line.

package/types/vue.d.ts

@@ -11305,7 +11305,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixCheckboxVueProps,
     HelixCheckboxVueEvents
   >;
-  /** The header sits above the code rather than floating on it. Overlaid, which is the usual build, the copy button covers the first line, which is the one line of a snippet a reader is most likely to be reading.  A diff is drawn a block per file in the same frame, each changed line washed in its tone at Tag's resting strength with its '+' or '-' in the tone's ink, so the change does not rest on telling two pale grounds apart. A split diff stacks its two versions below about 40rem of the file's own width. */
+  /** The header sits above the code rather than floating on it, and the copy button stands at its end. Overlaid, which is the usual build, the button covers the first line, which is the one line of a snippet a reader is most likely to be reading. A block with no name has no header, and the button stands beside the code in room the block keeps clear: an end gutter for code, a band above the first hunk for a diff.  A diff is drawn a block per file in the same frame, each changed line washed in its tone at Tag's resting strength with its '+' or '-' in the tone's ink, so the change does not rest on telling two pale grounds apart. A split diff stacks its two versions below about 40rem of the file's own width. */
   "helix-code-block": DefineCustomElement<
     HelixCodeBlock,
     HelixCodeBlockVueProps,