@kubex/zinc 1.1.3 → 1.1.5

package/dist/custom-elements.json

@@ -47,79 +47,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/action-bar/action-bar.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "ZnActionBar",
-          "cssProperties": [
-            {
-              "description": "An example CSS custom property.",
-              "name": "--example"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The component's base wrapper.",
-              "name": "base"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The default slot.",
-              "name": ""
-            },
-            {
-              "description": "An example slot.",
-              "name": "example"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "localize",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new LocalizeController(this)"
-            }
-          ],
-          "events": [
-            {
-              "description": "Emitted as an example.",
-              "name": "zn-event-name"
-            }
-          ],
-          "superclass": {
-            "name": "ZincElement",
-            "module": "/src/internal/zinc-element"
-          },
-          "summary": "Short summary of the component's intended use.",
-          "tagNameWithoutPrefix": "action-bar",
-          "tagName": "zn-action-bar",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/action-bar\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-example\n *\n * @event zn-event-name - Emitted as an example.\n *\n * @slot - The default slot.\n * @slot example - An example slot.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --example - An example CSS custom property.\n */",
-          "documentation": "https://zinc.style/components/action-bar",
-          "status": "experimental",
-          "since": "1.0",
-          "dependencies": [
-            "zn-example"
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "ZnActionBar",
-            "module": "components/action-bar/action-bar.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/alert/alert.js",
@@ -178,6 +105,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 +170,14 @@
               "default": "false",
               "fieldName": "collapse"
             },
+            {
+              "name": "appearance",
+              "type": {
+                "text": "'transparent' | 'solid'"
+              },
+              "default": "'transparent'",
+              "fieldName": "appearance"
+            },
             {
               "name": "level",
               "type": {
@@ -278,6 +223,79 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/action-bar/action-bar.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "ZnActionBar",
+          "cssProperties": [
+            {
+              "description": "An example CSS custom property.",
+              "name": "--example"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The default slot.",
+              "name": ""
+            },
+            {
+              "description": "An example slot.",
+              "name": "example"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
+            }
+          ],
+          "events": [
+            {
+              "description": "Emitted as an example.",
+              "name": "zn-event-name"
+            }
+          ],
+          "superclass": {
+            "name": "ZincElement",
+            "module": "/src/internal/zinc-element"
+          },
+          "summary": "Short summary of the component's intended use.",
+          "tagNameWithoutPrefix": "action-bar",
+          "tagName": "zn-action-bar",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/action-bar\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-example\n *\n * @event zn-event-name - Emitted as an example.\n *\n * @slot - The default slot.\n * @slot example - An example slot.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --example - An example CSS custom property.\n */",
+          "documentation": "https://zinc.style/components/action-bar",
+          "status": "experimental",
+          "since": "1.0",
+          "dependencies": [
+            "zn-example"
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "ZnActionBar",
+            "module": "components/action-bar/action-bar.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/animated-button/animated-button.js",
@@ -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.5",
     "author": "",
     "license": "MIT"
   }

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

@@ -13,17 +13,6 @@
         }
       ]
     },
-    {
-      "name": "zn-action-bar",
-      "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
-      "attributes": [],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://zinc.style/components/action-bar"
-        }
-      ]
-    },
     {
       "name": "zn-alert",
       "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
@@ -31,6 +20,10 @@
         { "name": "icon", "values": [] },
         { "name": "caption", "values": [] },
         { "name": "collapse", "values": [] },
+        {
+          "name": "appearance",
+          "values": [{ "name": "transparent" }, { "name": "solid" }]
+        },
         {
           "name": "level",
           "values": [
@@ -59,6 +52,17 @@
         }
       ]
     },
+    {
+      "name": "zn-action-bar",
+      "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+      "attributes": [],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://zinc.style/components/action-bar"
+        }
+      ]
+    },
     {
       "name": "zn-animated-button",
       "description": "\n---\n\n\n### **Methods:**\n - **purchase(): _void_** - Programmatically trigger the purchase flow\n- **setSuccess(): _void_** - Set the button to success state manually\n- **setFailure(message): _void_** - Set the button to failure state manually with optional error message\n- **reset(): _void_** - Reset the button to idle state",
@@ -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": []
         }
       ],