@fusion.dev/helix-headless 0.33.0 → 0.33.1

package/custom-elements.json

@@ -15600,7 +15600,7 @@
               "name": "context"
             },
             {
-              "description": "The copy button.",
+              "description": "The copy button: in the header where there is one, and otherwise beside the code.",
               "name": "copy"
             },
             {
@@ -15660,11 +15660,11 @@
               "name": "filler"
             },
             {
-              "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"
             },
             {
-              "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"
             },
             {
@@ -15783,6 +15783,51 @@
               "description": "The code as text, read from what the default slot is given rather than\nstored.\n\n**The host's own children rather than the slot's assigned nodes**, which\nare the same nodes: text, and every element without a `slot`. A slot exists\nonly once a render has made it, so reading through one left the first render\nwith nothing to copy.\n\nClient only, and it has to be: the server has no children to read. The\ncopy button is a client-side affordance anyway, so nothing is lost, and\ntaking the text from a property instead would be a second copy of the code\nthat goes stale the moment the slot changes. Empty while hydrating what a\nserver sent, which rendered it empty.",
               "readonly": true
             },
+            {
+              "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."
+            },
+            {
+              "kind": "method",
+              "name": "renderCopy",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "TemplateResult | typeof nothing"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "value",
+                  "optional": true,
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "renderCopyButton",

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

@@ -53,7 +53,7 @@ import '../../copy-button/index.js';
  * @csspart block - The scrolling `<pre>`.
  * @csspart code - The `<code>` inside it.
  * @csspart context - In a diff, a line both versions share.
- * @csspart copy - The copy button.
+ * @csspart copy - The copy button: in the header where there is one, and otherwise beside the code.
  * @csspart copy-button - The inner button.
  * @csspart copy-mark - The clipboard glyph, and the confirmation that replaces it.
  * @csspart copy-tooltip - The bubble, forwarded from the tooltip inside.
@@ -68,8 +68,8 @@ import '../../copy-button/index.js';
  * @csspart copy-tooltip-top - The bubble while it is above the copy button, beside `copy-tooltip`.
  * @csspart file - In a diff, one file's header and block.
  * @csspart filler - In a split diff, the empty row opposite a line the other side does not have.
- * @csspart frame - The code and the copy button beside it.
- * @csspart header - The bar carrying the name, where there is one.
+ * @csspart frame - The code, and the copy button beside it where there is no header.
+ * @csspart header - The bar carrying the name and the copy button, where there is a name.
  * @csspart hunk - In a diff, a `@@` line saying where the lines under it are.
  * @csspart label - The file name or language, where one is given.
  * @csspart marker - In a diff, the `+`, `-` or space that opens a line.
@@ -147,6 +147,20 @@ export declare class HelixHeadlessCodeBlock extends HelixElement {
     private get text();
     protected firstUpdated(changed: PropertyValues): void;
     protected render(): TemplateResult;
+    /**
+     * The name with the copy button beside it, or nothing when there is no name.
+     *
+     * **The button is in the header wherever there is one**, because beside the
+     * code it stands over the block and the block has to make room for it. A
+     * diff cannot: its washes run to the edge, so the button stood on the hunk
+     * line and the line under it. In the header it is over nothing.
+     *
+     * **No name draws no header**, rather than a bar to hold one button, which
+     * turned a `Usage` section of one-line imports into a run of empty strips.
+     * The button then stands beside the code, in room the block keeps for it.
+     */
+    private renderHeader;
+    private renderCopy;
     /**
      * The button that takes the code, behind a seam the styled tier can move.
      *

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

@@ -47,12 +47,20 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
         if (files.length > 0) {
             return this.renderDiff(files);
         }
-        return html `${this.label ? html `<div part="header"><span part="label">${this.label}</span></div>` : nothing}
+        return html `${this.renderHeader(this.label)}
       <div part="frame">
         <pre part="block"><code part="code"><slot @slotchange=${() => this.requestUpdate()}></slot></code></pre>
-        ${this.noCopy ? nothing : this.renderCopyButton()}
+        ${this.label ? nothing : this.renderCopy()}
       </div>`;
     }
+    renderHeader(name, value) {
+        return name
+            ? html `<div part="header"><span part="label">${name}</span>${this.renderCopy(value)}</div>`
+            : nothing;
+    }
+    renderCopy(value) {
+        return this.noCopy ? nothing : this.renderCopyButton(value);
+    }
     renderCopyButton(value = this.text) {
         return html `<${this.tag('copy-button')}
       part="copy"
@@ -102,12 +110,12 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
                 .map((line) => line.text)
                 .join('\n');
             return html `<div part="file">
-        ${name ? html `<div part="header"><span part="label">${name}</span></div>` : nothing}
+        ${this.renderHeader(name, now)}
         <div part="frame">
           ${this.variant === 'split'
                 ? this.renderSplit(file, width)
                 : html `<pre part="block"><code part="code">${file.hunks.map((hunk) => html `${this.renderHunk(hunk)}${hunk.lines.map((line) => this.renderLine(line, width))}`)}</code></pre>`}
-          ${this.noCopy ? nothing : this.renderCopyButton(now)}
+          ${name ? nothing : this.renderCopy(now)}
         </div>
       </div>`;
         })}<slot hidden @slotchange=${() => this.requestUpdate()}></slot>`;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-headless",
   "description": "Headless component tier. Structure, accessibility, state, and form participation. No styling.",
-  "version": "0.33.0",
+  "version": "0.33.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.33.0",
-    "@fusion.dev/helix-icons": "0.33.0",
+    "@fusion.dev/helix-core": "0.33.1",
+    "@fusion.dev/helix-icons": "0.33.1",
     "uqr": "^0.1.3"
   },
   "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.1",
+    "@fusion.dev/helix-testing": "0.33.1",
     "@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

@@ -19655,7 +19655,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.
@@ -19670,8 +19670,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.
@@ -37058,7 +37058,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.
@@ -37073,8 +37073,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.