@fusion.dev/helix 0.20.0 → 0.20.2

package/custom-elements.json

@@ -10903,6 +10903,10 @@
           "description": "**`author=\"me\"` is the one piece of paint that says whose turn it is**, and it\nsays it by which edge the turn sits against. Everything else about a turn is\nthe same on both sides, because two bubble styles is two components.\n\nA failure is the only state that takes a tone, because it is the one a reader\nhas to find rather than notice. `streaming` is left alone: the text arriving\nis the signal, and decorating it competes with the thing it is decorating.",
           "name": "HelixChatMessage",
           "cssProperties": [
+            {
+              "description": "Ground behind a slotted waiting indicator, which is a chip so the mark and its word read as one thing.",
+              "name": "--chat-indicator-background-color"
+            },
             {
               "description": "Fill behind a turn.",
               "name": "--chat-message-background-color"
@@ -12410,6 +12414,11 @@
                 "min": 380,
                 "slug": "launcher"
               },
+              {
+                "description": "An answer that is a document: a heading, a table, a list and a block of code in one turn.",
+                "min": 480,
+                "slug": "markdown"
+              },
               {
                 "description": "The sidebar: a drawer from the trailing edge, with the conversation filling the panel.",
                 "min": 420,

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

@@ -29,7 +29,7 @@ font-size: var(--helix-text-sm);
 line-height: var(--helix-leading-normal);
 max-block-size: var(--chat-composer-max-block-size, 12rem);
 padding-block: var(--helix-space-2xs);
-padding-inline: var(--helix-space-2xs);
+padding-inline: var(--helix-space-none);
 resize: none;
 }
 

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

@@ -150,6 +150,17 @@ display: none;
 display: block;
 }
 
+slot[name="indicator"]::slotted(*) {
+background-color: var(--chat-indicator-background-color, var(--helix-color-surface-sunken));
+border-radius: var(--helix-radii-full);
+
+font-size: var(--helix-text-xs);
+padding-block: var(--helix-space-2xs);
+padding-inline: var(--helix-space-xs);
+
+--orb-size: var(--helix-size-icon-sm);
+}
+
 [part="indicator"] {
 animation: helix-chat-typing 1.2s infinite ease-in-out;
 background-image:

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

@@ -26,6 +26,7 @@ import type { CSSResultGroup } from 'lit';
  * @csspart indicator - The three dots, when nothing is slotted over them.
  * @csspart meta - The time and the state together.
  *
+ * @cssproperty --chat-indicator-background-color - Ground behind a slotted waiting indicator, which is a chip so the mark and its word read as one thing.
  * @cssproperty --chat-message-background-color - Fill behind a turn.
  * @cssproperty --chat-message-background-color-me - Fill behind the reader's own turns.
  * @cssproperty --chat-message-color - Ink in a turn.

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

@@ -104,7 +104,11 @@ padding-inline: var(--chat-padding-inline, var(--helix-space-md));
 
 [part="composer"] {
 padding-block: var(--helix-space-sm);
-padding-inline: var(--chat-padding-inline, var(--helix-space-md));
+padding-inline: calc(
+var(--chat-padding-inline, var(--helix-space-md)) -
+var(--helix-space-xs) -
+var(--helix-border-thin)
+);
 }
 
 [part="empty"],

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

@@ -50,16 +50,17 @@ padding-inline: var(--notifications-padding-inline, var(--helix-space-md));
 background: none;
 border: 0;
 border-radius: var(--helix-radii-sm);
-color: var(--helix-color-accent);
+color: var(--helix-color-foreground-muted);
 cursor: pointer;
 font-family: var(--helix-font-sans);
 font-size: var(--helix-text-sm);
 padding-block: var(--helix-space-2xs);
 padding-inline: var(--helix-space-2xs);
+transition: color var(--helix-duration-fast) var(--helix-easing-standard);
 }
 
 [part="mark-all"]:hover {
-text-decoration: underline;
+color: var(--helix-color-foreground);
 }
 
 [part="mark-all"]:focus-visible {

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

@@ -20422,6 +20422,7 @@ export type CustomElements = {
    *
    * CSS variables available for styling the component.
    *
+   * - `--chat-indicator-background-color`: Ground behind a slotted waiting indicator, which is a chip so the mark and its word read as one thing. (default: `undefined`)
    * - `--chat-message-background-color`: Fill behind a turn. (default: `undefined`)
    * - `--chat-message-background-color-me`: Fill behind the reader's own turns. (default: `undefined`)
    * - `--chat-message-color`: Ink in a turn. (default: `undefined`)
@@ -36419,6 +36420,7 @@ export type CustomElementsSolidJs = {
    *
    * CSS variables available for styling the component.
    *
+   * - `--chat-indicator-background-color`: Ground behind a slotted waiting indicator, which is a chip so the mark and its word read as one thing. (default: `undefined`)
    * - `--chat-message-background-color`: Fill behind a turn. (default: `undefined`)
    * - `--chat-message-background-color-me`: Fill behind the reader's own turns. (default: `undefined`)
    * - `--chat-message-color`: Ink in a turn. (default: `undefined`)
@@ -50693,6 +50695,8 @@ export type CustomCssProperties = {
   "--chat-composer-border-width"?: (string) | undefined;
   /** How tall the field may grow. */
   "--chat-composer-max-block-size"?: (string) | undefined;
+  /** Ground behind a slotted waiting indicator, which is a chip so the mark and its word read as one thing. */
+  "--chat-indicator-background-color"?: (string) | undefined;
   /** Fill behind a turn. */
   "--chat-message-background-color"?: (string) | undefined;
   /** Fill behind the reader's own turns. */

package/types/vue.d.ts

@@ -9489,6 +9489,8 @@ export type CustomCssProperties = {
   "--chat-composer-border-width"?: (string) | undefined;
   /** How tall the field may grow. */
   "--chat-composer-max-block-size"?: (string) | undefined;
+  /** Ground behind a slotted waiting indicator, which is a chip so the mark and its word read as one thing. */
+  "--chat-indicator-background-color"?: (string) | undefined;
   /** Fill behind a turn. */
   "--chat-message-background-color"?: (string) | undefined;
   /** Fill behind the reader's own turns. */