@fusion.dev/helix 0.10.3 → 0.11.0

package/custom-elements.json

@@ -10915,6 +10915,14 @@
                 "module": "src/chat/message/chat-message.ts"
               }
             },
+            {
+              "description": "The three dots, when nothing is slotted over them.",
+              "name": "indicator",
+              "inheritedFrom": {
+                "name": "HelixHeadlessChatMessage",
+                "module": "src/chat/message/chat-message.ts"
+              }
+            },
             {
               "description": "The time and the state together.",
               "name": "meta",
@@ -11021,6 +11029,14 @@
                 "module": "src/chat/message/chat-message.ts"
               }
             },
+            {
+              "description": "The wait before the first token, in place of the three dots.",
+              "name": "indicator",
+              "inheritedFrom": {
+                "name": "HelixHeadlessChatMessage",
+                "module": "src/chat/message/chat-message.ts"
+              }
+            },
             {
               "description": "What it was said from: citations, documents, a retrieved page.",
               "name": "sources",
@@ -11209,6 +11225,21 @@
                 "module": "src/chat/message/chat-message.ts"
               }
             },
+            {
+              "kind": "method",
+              "name": "renderIndicator",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "TemplateResult | typeof nothing"
+                }
+              },
+              "description": "The wait, for a consumer who slots nothing.\n\n**The slot and its fallback together, in a seam of its own**, because the\ntwo answer different people: the slot lets a consumer put their own\nindicator in the bubble, and the method lets the tier above replace what\nthey get when they do not, without reimplementing the template around it.\nHeadless draws a box and paints nothing on it.",
+              "inheritedFrom": {
+                "name": "HelixHeadlessChatMessage",
+                "module": "src/chat/message/chat-message.ts"
+              }
+            },
             {
               "kind": "method",
               "name": "renderState",
@@ -12354,6 +12385,11 @@
                 "min": 420,
                 "slug": "fullscreen"
               },
+              {
+                "description": "The wait, as it comes and as a consumer can replace it.",
+                "min": 420,
+                "slug": "indicator"
+              },
               {
                 "description": "The floating one: an icon in the corner, and the conversation in a popover over the page.",
                 "layout": "fullscreen",

package/dist/chat/message/chat-message.css.js

@@ -142,7 +142,15 @@ min-inline-size: 0;
 overflow-x: auto;
 }
 
-:host([state="streaming"]) [part="content"][data-empty]::after {
+[part="content"] slot[name="indicator"] {
+display: none;
+}
+
+:host([state="streaming"]) [part="content"][data-empty] slot[name="indicator"] {
+display: block;
+}
+
+[part="indicator"] {
 animation: helix-chat-typing 1.2s infinite ease-in-out;
 background-image:
 radial-gradient(circle closest-side, currentColor 90%, transparent),
@@ -158,7 +166,6 @@ background-size:
 20% 30%,
 20% 30%;
 block-size: 1lh;
-content: "";
 display: block;
 inline-size: 1.75em;
 opacity: 0.7;
@@ -197,7 +204,7 @@ background-position:
 }
 
 @media (prefers-reduced-motion: reduce) {
-:host([state="streaming"]) [part="content"][data-empty]::after {
+[part="indicator"] {
 animation: none;
 }
 }
@@ -259,7 +266,7 @@ display: none;
 display: none;
 }
 
-:host([state="streaming"]) [part="content"][data-empty]::after {
+[part="content"] slot[name="indicator"] {
 display: none;
 }
 }`);

package/dist/chat/message/chat-message.d.ts

@@ -20,8 +20,10 @@ import type { CSSResultGroup } from 'lit';
  * @slot - What was said.
  * @slot actions - What can be done with it.
  * @slot avatar - Who said it.
+ * @slot indicator - The wait before the first token, in place of the three dots.
  *
  * @csspart content - What was said.
+ * @csspart indicator - The three dots, when nothing is slotted over them.
  * @csspart meta - The time and the state together.
  *
  * @cssproperty --chat-message-background-color - Fill behind a turn.

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

@@ -20156,6 +20156,7 @@ export type CustomElements = {
    * - `(default)`: What was said.
    * - `actions`: What can be done with it.
    * - `avatar`: Who said it.
+   * - `indicator`: The wait before the first token, in place of the three dots.
    * - `sources`: What it was said from: citations, documents, a retrieved page.
    *
    * ## CSS Custom Properties
@@ -20172,6 +20173,7 @@ export type CustomElements = {
    * Custom selectors for styling elements within the component.
    *
    * - `content`: What was said.
+   * - `indicator`: The three dots, when nothing is slotted over them.
    * - `meta`: The time and the state together.
    * - `actions`: The controls offered on the turn, beside its time.
    * - `avatar`: The leading slot's box.
@@ -35914,6 +35916,7 @@ export type CustomElementsSolidJs = {
    * - `(default)`: What was said.
    * - `actions`: What can be done with it.
    * - `avatar`: Who said it.
+   * - `indicator`: The wait before the first token, in place of the three dots.
    * - `sources`: What it was said from: citations, documents, a retrieved page.
    *
    * ## CSS Custom Properties
@@ -35930,6 +35933,7 @@ export type CustomElementsSolidJs = {
    * Custom selectors for styling elements within the component.
    *
    * - `content`: What was said.
+   * - `indicator`: The three dots, when nothing is slotted over them.
    * - `meta`: The time and the state together.
    * - `actions`: The controls offered on the turn, beside its time.
    * - `avatar`: The leading slot's box.