@kubex/zinc 1.1.3 → 1.1.4

package/dist/custom-elements.json

@@ -178,6 +178,16 @@
               "default": "false",
               "attribute": "collapse"
             },
+            {
+              "kind": "field",
+              "name": "appearance",
+              "type": {
+                "text": "'transparent' | 'solid'"
+              },
+              "default": "'transparent'",
+              "attribute": "appearance",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "level",
@@ -233,6 +243,14 @@
               "default": "false",
               "fieldName": "collapse"
             },
+            {
+              "name": "appearance",
+              "type": {
+                "text": "'transparent' | 'solid'"
+              },
+              "default": "'transparent'",
+              "fieldName": "appearance"
+            },
             {
               "name": "level",
               "type": {
@@ -2960,11 +2978,15 @@
             {
               "description": "The message content within the bubble.",
               "name": "content"
+            },
+            {
+              "description": "The card rendered for system action types.",
+              "name": "system-card"
             }
           ],
           "slots": [
             {
-              "description": "The message content.",
+              "description": "The message content. Ignored when the `message` attribute is set.",
               "name": ""
             },
             {
@@ -2990,6 +3012,27 @@
               "static": true,
               "default": "{ 'zn-icon': ZnIcon }"
             },
+            {
+              "kind": "field",
+              "name": "SYSTEM_ACTION_TYPES",
+              "type": {
+                "text": "readonly string[]"
+              },
+              "static": true,
+              "readonly": true,
+              "default": "[ 'connected.agent', 'attachment.added', 'transfer', 'ended', 'customer.ended', 'customer.connected', 'customer.disconnected', ]"
+            },
+            {
+              "kind": "field",
+              "name": "DISPLAYED_ACTION_TYPES",
+              "type": {
+                "text": "readonly string[]"
+              },
+              "privacy": "private",
+              "static": true,
+              "readonly": true,
+              "default": "[ '', 'connected.agent', 'attachment.added', 'multi.answer', 'transfer', 'ended', 'error', 'customer.ended', 'message-sending', 'customer.connected', 'customer.disconnected', 'internal', ]"
+            },
             {
               "kind": "field",
               "name": "sender",
@@ -2997,9 +3040,19 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "The sender's name, also used for the avatar initials.",
+              "description": "The sender's name, also used for the avatar.",
               "attribute": "sender"
             },
+            {
+              "kind": "field",
+              "name": "message",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The message body as an HTML string. When set, it is sanitized (scripts and event\nhandlers stripped), newlines become line breaks and bare URLs become links. When\nomitted the default slot is rendered instead.",
+              "attribute": "message"
+            },
             {
               "kind": "field",
               "name": "time",
@@ -3007,21 +3060,88 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "Unix timestamp (seconds) of the message, shown as HH:MM.",
+              "description": "Unix timestamp (seconds) of the message, shown as HH:MM (with date if not today).",
               "attribute": "time"
             },
+            {
+              "kind": "field",
+              "name": "avatar",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Overrides the avatar source. Defaults to `sender`.",
+              "attribute": "avatar"
+            },
+            {
+              "kind": "field",
+              "name": "actionType",
+              "type": {
+                "text": "ChatMessageActionType"
+              },
+              "default": "''",
+              "description": "The kind of message. Drives system-card rendering, the sending state and badges.",
+              "attribute": "action-type",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "customerInitiated",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Marks the message as initiated by the customer (affects styling and grouping).",
+              "attribute": "customer-initiated",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "agentInitiated",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Marks the message as initiated by an agent (affects styling and grouping).",
+              "attribute": "agent-initiated",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "isSystemMessage",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "renderSystemCard",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "systemLabel",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "renderHeader",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "renderContent",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "getTime",
               "privacy": "private",
-              "parameters": [
-                {
-                  "name": "time",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ]
+              "description": "HH:MM only — used on the system card."
+            },
+            {
+              "kind": "method",
+              "name": "getSentTime",
+              "privacy": "private",
+              "description": "HH:MM, prefixed with the date when the message is not from today."
             }
           ],
           "attributes": [
@@ -3031,28 +3151,73 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "The sender's name, also used for the avatar initials.",
+              "description": "The sender's name, also used for the avatar.",
               "fieldName": "sender"
             },
+            {
+              "name": "message",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The message body as an HTML string. When set, it is sanitized (scripts and event\nhandlers stripped), newlines become line breaks and bare URLs become links. When\nomitted the default slot is rendered instead.",
+              "fieldName": "message"
+            },
             {
               "name": "time",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "Unix timestamp (seconds) of the message, shown as HH:MM.",
+              "description": "Unix timestamp (seconds) of the message, shown as HH:MM (with date if not today).",
               "fieldName": "time"
+            },
+            {
+              "name": "avatar",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Overrides the avatar source. Defaults to `sender`.",
+              "fieldName": "avatar"
+            },
+            {
+              "name": "action-type",
+              "type": {
+                "text": "ChatMessageActionType"
+              },
+              "default": "''",
+              "description": "The kind of message. Drives system-card rendering, the sending state and badges.",
+              "fieldName": "actionType"
+            },
+            {
+              "name": "customer-initiated",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Marks the message as initiated by the customer (affects styling and grouping).",
+              "fieldName": "customerInitiated"
+            },
+            {
+              "name": "agent-initiated",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Marks the message as initiated by an agent (affects styling and grouping).",
+              "fieldName": "agentInitiated"
             }
           ],
           "superclass": {
             "name": "ZincElement",
             "module": "/src/internal/zinc-element"
           },
-          "summary": "A single message in a chat-style conversation: avatar, sender,\ntime, optional badge, and a message bubble with optional actions.",
+          "summary": "A single message in a chat-style conversation: avatar, sender,\ntime, optional badge, and a message bubble with optional actions. Also renders\nsystem events (connections, transfers, etc.) as a centred card.",
           "tagNameWithoutPrefix": "chat-message",
           "tagName": "zn-chat-message",
           "customElement": true,
-          "jsDoc": "/**\n * @summary A single message in a chat-style conversation: avatar, sender,\n * time, optional badge, and a message bubble with optional actions.\n * @documentation https://zinc.style/components/chat-message\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-icon\n *\n * @slot - The message content.\n * @slot badge - Rendered in the header after the sender and time (e.g. an INTERNAL NOTE chip).\n * @slot edit-dialog-trigger - Action rendered at the end of the bubble (e.g. a remove icon button).\n * @slot edit-dialog - Pass-through for an associated dialog element.\n *\n * @csspart base - The component's base wrapper.\n * @csspart avatar - The avatar column.\n * @csspart body - The header and bubble column.\n * @csspart header - The sender/time/badge row.\n * @csspart bubble - The message bubble.\n * @csspart content - The message content within the bubble.\n *\n * @cssproperty --message-background - The bubble's background colour.\n */",
+          "jsDoc": "/**\n * @summary A single message in a chat-style conversation: avatar, sender,\n * time, optional badge, and a message bubble with optional actions. Also renders\n * system events (connections, transfers, etc.) as a centred card.\n * @documentation https://zinc.style/components/chat-message\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-icon\n *\n * @slot - The message content. Ignored when the `message` attribute is set.\n * @slot badge - Rendered in the header after the sender and time (e.g. an INTERNAL NOTE chip).\n * @slot edit-dialog-trigger - Action rendered at the end of the bubble (e.g. a remove icon button).\n * @slot edit-dialog - Pass-through for an associated dialog element.\n *\n * @csspart base - The component's base wrapper.\n * @csspart avatar - The avatar column.\n * @csspart body - The header and bubble column.\n * @csspart header - The sender/time/badge row.\n * @csspart bubble - The message bubble.\n * @csspart content - The message content within the bubble.\n * @csspart system-card - The card rendered for system action types.\n *\n * @cssproperty --message-background - The bubble's background colour.\n */",
           "documentation": "https://zinc.style/components/chat-message",
           "status": "experimental",
           "since": "1.0",
@@ -36151,7 +36316,7 @@
   "package": {
     "name": "@kubex/zinc",
     "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
-    "version": "1.1.3",
+    "version": "1.1.4",
     "author": "",
     "license": "MIT"
   }

package/dist/vscode.html-custom-data.json

@@ -31,6 +31,10 @@
         { "name": "icon", "values": [] },
         { "name": "caption", "values": [] },
         { "name": "collapse", "values": [] },
+        {
+          "name": "appearance",
+          "values": [{ "name": "transparent" }, { "name": "solid" }]
+        },
         {
           "name": "level",
           "values": [
@@ -357,16 +361,41 @@
     },
     {
       "name": "zn-chat-message",
-      "description": "A single message in a chat-style conversation: avatar, sender,\ntime, optional badge, and a message bubble with optional actions.\n---\n\n\n### **Slots:**\n - _default_ - The message content.\n- **badge** - Rendered in the header after the sender and time (e.g. an INTERNAL NOTE chip).\n- **edit-dialog-trigger** - Action rendered at the end of the bubble (e.g. a remove icon button).\n- **edit-dialog** - Pass-through for an associated dialog element.\n\n### **CSS Properties:**\n - **--message-background** - The bubble's background colour. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **avatar** - The avatar column.\n- **body** - The header and bubble column.\n- **header** - The sender/time/badge row.\n- **bubble** - The message bubble.\n- **content** - The message content within the bubble.",
+      "description": "A single message in a chat-style conversation: avatar, sender,\ntime, optional badge, and a message bubble with optional actions. Also renders\nsystem events (connections, transfers, etc.) as a centred card.\n---\n\n\n### **Slots:**\n - _default_ - The message content. Ignored when the `message` attribute is set.\n- **badge** - Rendered in the header after the sender and time (e.g. an INTERNAL NOTE chip).\n- **edit-dialog-trigger** - Action rendered at the end of the bubble (e.g. a remove icon button).\n- **edit-dialog** - Pass-through for an associated dialog element.\n\n### **CSS Properties:**\n - **--message-background** - The bubble's background colour. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **avatar** - The avatar column.\n- **body** - The header and bubble column.\n- **header** - The sender/time/badge row.\n- **bubble** - The message bubble.\n- **content** - The message content within the bubble.\n- **system-card** - The card rendered for system action types.",
       "attributes": [
         {
           "name": "sender",
-          "description": "The sender's name, also used for the avatar initials.",
+          "description": "The sender's name, also used for the avatar.",
+          "values": []
+        },
+        {
+          "name": "message",
+          "description": "The message body as an HTML string. When set, it is sanitized (scripts and event\nhandlers stripped), newlines become line breaks and bare URLs become links. When\nomitted the default slot is rendered instead.",
           "values": []
         },
         {
           "name": "time",
-          "description": "Unix timestamp (seconds) of the message, shown as HH:MM.",
+          "description": "Unix timestamp (seconds) of the message, shown as HH:MM (with date if not today).",
+          "values": []
+        },
+        {
+          "name": "avatar",
+          "description": "Overrides the avatar source. Defaults to `sender`.",
+          "values": []
+        },
+        {
+          "name": "action-type",
+          "description": "The kind of message. Drives system-card rendering, the sending state and badges.",
+          "values": [{ "name": "ChatMessageActionType" }]
+        },
+        {
+          "name": "customer-initiated",
+          "description": "Marks the message as initiated by the customer (affects styling and grouping).",
+          "values": []
+        },
+        {
+          "name": "agent-initiated",
+          "description": "Marks the message as initiated by an agent (affects styling and grouping).",
           "values": []
         }
       ],

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@kubex/zinc",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -51,6 +51,13 @@
               "name": "collapse",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "appearance",
+              "value": {
+                "type": "'transparent' | 'solid'",
+                "default": "'transparent'"
+              }
+            },
             {
               "name": "level",
               "value": {
@@ -78,6 +85,7 @@
               { "name": "icon", "type": "string" },
               { "name": "caption", "type": "string" },
               { "name": "collapse", "type": "boolean" },
+              { "name": "appearance", "type": "'transparent' | 'solid'" },
               {
                 "name": "level",
                 "type": "'primary' | 'error' | 'info' | 'success' | 'warning' | 'note' | 'cosmic'"
@@ -711,22 +719,50 @@
         },
         {
           "name": "zn-chat-message",
-          "description": "A single message in a chat-style conversation: avatar, sender,\ntime, optional badge, and a message bubble with optional actions.\n---\n\n\n### **Slots:**\n - _default_ - The message content.\n- **badge** - Rendered in the header after the sender and time (e.g. an INTERNAL NOTE chip).\n- **edit-dialog-trigger** - Action rendered at the end of the bubble (e.g. a remove icon button).\n- **edit-dialog** - Pass-through for an associated dialog element.\n\n### **CSS Properties:**\n - **--message-background** - The bubble's background colour. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **avatar** - The avatar column.\n- **body** - The header and bubble column.\n- **header** - The sender/time/badge row.\n- **bubble** - The message bubble.\n- **content** - The message content within the bubble.",
+          "description": "A single message in a chat-style conversation: avatar, sender,\ntime, optional badge, and a message bubble with optional actions. Also renders\nsystem events (connections, transfers, etc.) as a centred card.\n---\n\n\n### **Slots:**\n - _default_ - The message content. Ignored when the `message` attribute is set.\n- **badge** - Rendered in the header after the sender and time (e.g. an INTERNAL NOTE chip).\n- **edit-dialog-trigger** - Action rendered at the end of the bubble (e.g. a remove icon button).\n- **edit-dialog** - Pass-through for an associated dialog element.\n\n### **CSS Properties:**\n - **--message-background** - The bubble's background colour. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **avatar** - The avatar column.\n- **body** - The header and bubble column.\n- **header** - The sender/time/badge row.\n- **bubble** - The message bubble.\n- **content** - The message content within the bubble.\n- **system-card** - The card rendered for system action types.",
           "doc-url": "",
           "attributes": [
             {
               "name": "sender",
-              "description": "The sender's name, also used for the avatar initials.",
+              "description": "The sender's name, also used for the avatar.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "message",
+              "description": "The message body as an HTML string. When set, it is sanitized (scripts and event\nhandlers stripped), newlines become line breaks and bare URLs become links. When\nomitted the default slot is rendered instead.",
               "value": { "type": "string", "default": "''" }
             },
             {
               "name": "time",
-              "description": "Unix timestamp (seconds) of the message, shown as HH:MM.",
+              "description": "Unix timestamp (seconds) of the message, shown as HH:MM (with date if not today).",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "avatar",
+              "description": "Overrides the avatar source. Defaults to `sender`.",
               "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "action-type",
+              "description": "The kind of message. Drives system-card rendering, the sending state and badges.",
+              "value": { "type": "ChatMessageActionType", "default": "''" }
+            },
+            {
+              "name": "customer-initiated",
+              "description": "Marks the message as initiated by the customer (affects styling and grouping).",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "agent-initiated",
+              "description": "Marks the message as initiated by an agent (affects styling and grouping).",
+              "value": { "type": "boolean", "default": "false" }
             }
           ],
           "slots": [
-            { "name": "", "description": "The message content." },
+            {
+              "name": "",
+              "description": "The message content. Ignored when the `message` attribute is set."
+            },
             {
               "name": "badge",
               "description": "Rendered in the header after the sender and time (e.g. an INTERNAL NOTE chip)."
@@ -745,13 +781,38 @@
             "properties": [
               {
                 "name": "sender",
-                "description": "The sender's name, also used for the avatar initials.",
+                "description": "The sender's name, also used for the avatar.",
+                "type": "string"
+              },
+              {
+                "name": "message",
+                "description": "The message body as an HTML string. When set, it is sanitized (scripts and event\nhandlers stripped), newlines become line breaks and bare URLs become links. When\nomitted the default slot is rendered instead.",
                 "type": "string"
               },
               {
                 "name": "time",
-                "description": "Unix timestamp (seconds) of the message, shown as HH:MM.",
+                "description": "Unix timestamp (seconds) of the message, shown as HH:MM (with date if not today).",
+                "type": "string"
+              },
+              {
+                "name": "avatar",
+                "description": "Overrides the avatar source. Defaults to `sender`.",
                 "type": "string"
+              },
+              {
+                "name": "actionType",
+                "description": "The kind of message. Drives system-card rendering, the sending state and badges.",
+                "type": "ChatMessageActionType"
+              },
+              {
+                "name": "customerInitiated",
+                "description": "Marks the message as initiated by the customer (affects styling and grouping).",
+                "type": "boolean"
+              },
+              {
+                "name": "agentInitiated",
+                "description": "Marks the message as initiated by an agent (affects styling and grouping).",
+                "type": "boolean"
               }
             ],
             "events": []

package/dist/zn.d.ts

@@ -1435,6 +1435,7 @@ declare module "components/alert/alert.component" {
         icon: string;
         caption: string;
         collapse: boolean;
+        appearance: 'transparent' | 'solid';
         level: 'primary' | 'error' | 'info' | 'success' | 'warning' | 'note' | 'cosmic';
         size: 'small' | 'medium' | 'large';
         render(): import("lit-html").TemplateResult<1>;
@@ -1493,20 +1494,26 @@ declare module "components/button-group/index" {
         }
     }
 }
+declare module "components/chat-message/clean-message" {
+    /** Strip scripts and event/handler attributes from an untrusted HTML string. */
+    export function cleanHTML(message: string): string;
+}
 declare module "components/chat-message/chat-message.component" {
-    import { type CSSResultGroup } from 'lit';
+    import { type CSSResultGroup, nothing } from 'lit';
     import ZincElement from "internal/zinc-element";
     import ZnIcon from "components/icon/index";
+    export type ChatMessageActionType = '' | 'connected.agent' | 'attachment.added' | 'multi.answer' | 'transfer' | 'ended' | 'error' | 'message-sending' | 'customer.ended' | 'customer.connected' | 'customer.disconnected' | 'internal';
     /**
      * @summary A single message in a chat-style conversation: avatar, sender,
-     * time, optional badge, and a message bubble with optional actions.
+     * time, optional badge, and a message bubble with optional actions. Also renders
+     * system events (connections, transfers, etc.) as a centred card.
      * @documentation https://zinc.style/components/chat-message
      * @status experimental
      * @since 1.0
      *
      * @dependency zn-icon
      *
-     * @slot - The message content.
+     * @slot - The message content. Ignored when the `message` attribute is set.
      * @slot badge - Rendered in the header after the sender and time (e.g. an INTERNAL NOTE chip).
      * @slot edit-dialog-trigger - Action rendered at the end of the bubble (e.g. a remove icon button).
      * @slot edit-dialog - Pass-through for an associated dialog element.
@@ -1517,6 +1524,7 @@ declare module "components/chat-message/chat-message.component" {
      * @csspart header - The sender/time/badge row.
      * @csspart bubble - The message bubble.
      * @csspart content - The message content within the bubble.
+     * @csspart system-card - The card rendered for system action types.
      *
      * @cssproperty --message-background - The bubble's background colour.
      */
@@ -1525,12 +1533,37 @@ declare module "components/chat-message/chat-message.component" {
         static dependencies: {
             'zn-icon': typeof ZnIcon;
         };
-        /** The sender's name, also used for the avatar initials. */
+        static readonly SYSTEM_ACTION_TYPES: readonly string[];
+        private static readonly DISPLAYED_ACTION_TYPES;
+        /** The sender's name, also used for the avatar. */
         sender: string;
-        /** Unix timestamp (seconds) of the message, shown as HH:MM. */
+        /**
+         * The message body as an HTML string. When set, it is sanitized (scripts and event
+         * handlers stripped), newlines become line breaks and bare URLs become links. When
+         * omitted the default slot is rendered instead.
+         */
+        message: string;
+        /** Unix timestamp (seconds) of the message, shown as HH:MM (with date if not today). */
         time: string;
+        /** Overrides the avatar source. Defaults to `sender`. */
+        avatar: string;
+        /** The kind of message. Drives system-card rendering, the sending state and badges. */
+        actionType: ChatMessageActionType;
+        /** Marks the message as initiated by the customer (affects styling and grouping). */
+        customerInitiated: boolean;
+        /** Marks the message as initiated by an agent (affects styling and grouping). */
+        agentInitiated: boolean;
+        connectedCallback(): void;
+        protected render(): import("lit-html").TemplateResult<1> | typeof nothing;
+        private isSystemMessage;
+        private renderSystemCard;
+        private systemLabel;
+        private renderHeader;
+        private renderContent;
+        /** HH:MM only — used on the system card. */
         private getTime;
-        protected render(): import("lit-html").TemplateResult<1>;
+        /** HH:MM, prefixed with the date when the message is not from today. */
+        private getSentTime;
     }
 }
 declare module "components/chat-message/index" {