@kubex/zinc 1.1.181 → 1.1.183

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

@@ -1519,6 +1519,58 @@
         }
       ]
     },
+    {
+      "name": "zn-dialog",
+      "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-show** - Emitted when the dialog is opens.\n- **zn-close** - Emitted when the dialog is closed.\n- **zn-request-close** - Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss.\n\n### **Methods:**\n - **show()** - Shows the dialog.\n- **hide()** - Hides the dialog.\n\n### **Slots:**\n - _default_ - The default slot.\n- **label** - The dialog's label. Alternatively you can use the `label` attribute.\n- **header-icon** - Optional icon to add to the left of the dialog's label (title). A color will be applied to the icon depending on the dialog variant.\n- **announcement-intro** - Optional Intro text to display below the icon, when using the variant `announcement`.\n- **header-actions** - Optional actions to add to the header. Works best with `<zn-button>` elements.\n- **footer** - The dialog's footer. This is typically used for buttons representing various options.\n- **footer-text** - Optional text to include below the footer buttons, when using the variant `announcement`.\n\n### **CSS Properties:**\n - **--width** - The preferred width of the dialog. Note the dialog will shrink to accommodate smaller screens. _(default: undefined)_\n- **--header-spacing** - The amount of padding to use for the header. _(default: undefined)_\n- **--body-spacing** - The amount of padding to use for the body. _(default: undefined)_\n- **--footer-spacing** - The amount of padding to use for the footer. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **header** - The dialog's header. This element wraps the title and header actions.\n- **header-actions** - Optional actions to add to the header. Works best with `<zn-button>` elements.\n- **title** - The dialog's title.\n- **close-button** - The dialog's close button.\n- **close-button__base** - The close buttons exported `base` part.\n- **body** - The dialog's body.\n- **footer** - The dialog's footer.",
+      "attributes": [
+        {
+          "name": "variant",
+          "description": "The dialog's theme variant.",
+          "values": [
+            { "name": "default" },
+            { "name": "warning" },
+            { "name": "announcement" }
+          ]
+        },
+        {
+          "name": "size",
+          "description": "The dialog's size.",
+          "values": [
+            { "name": "small" },
+            { "name": "medium" },
+            { "name": "large" },
+            { "name": "custom" }
+          ]
+        },
+        {
+          "name": "open",
+          "description": "Indicated whether of not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the dialog's state.",
+          "values": []
+        },
+        {
+          "name": "label",
+          "description": "The dialog's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.",
+          "values": []
+        },
+        { "name": "cosmic", "values": [] },
+        {
+          "name": "no-header",
+          "description": "Disables the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way to close the dialog.",
+          "values": []
+        },
+        {
+          "name": "trigger",
+          "description": "The dialog's trigger element. This is used to open the dialog when clicked. If you do not provide a trigger, you\nwill need to manually open the dialog using the `show()` method.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://zinc.style/components/dialog"
+        }
+      ]
+    },
     {
       "name": "zn-dropdown",
       "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Methods:**\n - **show()** - Opens the dropdown\n- **hide()** - Closes the dropdown\n- **reposition()** - Instructs the dropdown to reposition itself\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.",
@@ -1590,58 +1642,6 @@
         }
       ]
     },
-    {
-      "name": "zn-dialog",
-      "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-show** - Emitted when the dialog is opens.\n- **zn-close** - Emitted when the dialog is closed.\n- **zn-request-close** - Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss.\n\n### **Methods:**\n - **show()** - Shows the dialog.\n- **hide()** - Hides the dialog.\n\n### **Slots:**\n - _default_ - The default slot.\n- **label** - The dialog's label. Alternatively you can use the `label` attribute.\n- **header-icon** - Optional icon to add to the left of the dialog's label (title). A color will be applied to the icon depending on the dialog variant.\n- **announcement-intro** - Optional Intro text to display below the icon, when using the variant `announcement`.\n- **header-actions** - Optional actions to add to the header. Works best with `<zn-button>` elements.\n- **footer** - The dialog's footer. This is typically used for buttons representing various options.\n- **footer-text** - Optional text to include below the footer buttons, when using the variant `announcement`.\n\n### **CSS Properties:**\n - **--width** - The preferred width of the dialog. Note the dialog will shrink to accommodate smaller screens. _(default: undefined)_\n- **--header-spacing** - The amount of padding to use for the header. _(default: undefined)_\n- **--body-spacing** - The amount of padding to use for the body. _(default: undefined)_\n- **--footer-spacing** - The amount of padding to use for the footer. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **header** - The dialog's header. This element wraps the title and header actions.\n- **header-actions** - Optional actions to add to the header. Works best with `<zn-button>` elements.\n- **title** - The dialog's title.\n- **close-button** - The dialog's close button.\n- **close-button__base** - The close buttons exported `base` part.\n- **body** - The dialog's body.\n- **footer** - The dialog's footer.",
-      "attributes": [
-        {
-          "name": "variant",
-          "description": "The dialog's theme variant.",
-          "values": [
-            { "name": "default" },
-            { "name": "warning" },
-            { "name": "announcement" }
-          ]
-        },
-        {
-          "name": "size",
-          "description": "The dialog's size.",
-          "values": [
-            { "name": "small" },
-            { "name": "medium" },
-            { "name": "large" },
-            { "name": "custom" }
-          ]
-        },
-        {
-          "name": "open",
-          "description": "Indicated whether of not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the dialog's state.",
-          "values": []
-        },
-        {
-          "name": "label",
-          "description": "The dialog's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.",
-          "values": []
-        },
-        { "name": "cosmic", "values": [] },
-        {
-          "name": "no-header",
-          "description": "Disables the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way to close the dialog.",
-          "values": []
-        },
-        {
-          "name": "trigger",
-          "description": "The dialog's trigger element. This is used to open the dialog when clicked. If you do not provide a trigger, you\nwill need to manually open the dialog using the `show()` method.",
-          "values": []
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://zinc.style/components/dialog"
-        }
-      ]
-    },
     {
       "name": "zn-editor",
       "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.",

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.181",
+  "version": "1.1.183",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -3506,132 +3506,6 @@
             "events": []
           }
         },
-        {
-          "name": "zn-dropdown",
-          "description": "Short summary of the component's intended use.\n\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Methods:**\n - **show()** - Opens the dropdown\n- **hide()** - Closes the dropdown\n- **reposition()** - Instructs the dropdown to reposition itself\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.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "open",
-              "description": "Indicates whether the dropdown is open",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "placement",
-              "description": "The placement of the dropdown. Note the actual placement may vary based on the available space",
-              "value": {
-                "type": "'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' |\n    'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'",
-                "default": "'bottom-start'"
-              }
-            },
-            {
-              "name": "disabled",
-              "description": "Disable the dropdown",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "stay-open-on-select",
-              "description": "By default, the dropdown will close when an item is selected. Set this to true to keep the dropdown open",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "distance",
-              "description": "The distance in pixels from which to offset the panel away from the trigger",
-              "value": { "type": "number", "default": "0" }
-            },
-            {
-              "name": "skidding",
-              "description": "The distance in pixels from which to offset the panel away from the trigger",
-              "value": { "type": "number", "default": "0" }
-            },
-            {
-              "name": "hoist",
-              "description": "Enable this option if the parent is overflow hidden and the dropdown is not visible",
-              "value": { "type": "boolean", "default": "true" }
-            },
-            {
-              "name": "sync",
-              "description": "Syncs the popup width or height with the trigger element",
-              "value": {
-                "type": "'width' | 'height' | 'both' | undefined",
-                "default": "undefined"
-              }
-            },
-            { "name": "uri", "value": { "type": "string" } },
-            {
-              "name": "fetchedContent",
-              "value": { "type": "string", "default": "''" }
-            }
-          ],
-          "slots": [
-            { "name": "", "description": "The default slot." },
-            { "name": "example", "description": "An example slot." }
-          ],
-          "events": [
-            { "name": "zn-event-name", "description": "Emitted as an example." }
-          ],
-          "js": {
-            "properties": [
-              { "name": "popup", "type": "ZnPopup" },
-              { "name": "trigger", "type": "HTMLSlotElement" },
-              { "name": "panel", "type": "HTMLSlotElement" },
-              {
-                "name": "open",
-                "description": "Indicates whether the dropdown is open",
-                "type": "boolean"
-              },
-              {
-                "name": "placement",
-                "description": "The placement of the dropdown. Note the actual placement may vary based on the available space",
-                "type": "'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' |\n    'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'"
-              },
-              {
-                "name": "disabled",
-                "description": "Disable the dropdown",
-                "type": "boolean"
-              },
-              {
-                "name": "stayOpenOnSelect",
-                "description": "By default, the dropdown will close when an item is selected. Set this to true to keep the dropdown open",
-                "type": "boolean"
-              },
-              {
-                "name": "containingElement",
-                "description": "The dropdown will close when the user interacts outside the element*",
-                "type": "HTMLElement | undefined"
-              },
-              {
-                "name": "distance",
-                "description": "The distance in pixels from which to offset the panel away from the trigger",
-                "type": "number"
-              },
-              {
-                "name": "skidding",
-                "description": "The distance in pixels from which to offset the panel away from the trigger",
-                "type": "number"
-              },
-              {
-                "name": "hoist",
-                "description": "Enable this option if the parent is overflow hidden and the dropdown is not visible",
-                "type": "boolean"
-              },
-              {
-                "name": "sync",
-                "description": "Syncs the popup width or height with the trigger element",
-                "type": "'width' | 'height' | 'both' | undefined"
-              },
-              { "name": "uri", "type": "string" },
-              { "name": "fetchedContent", "type": "string" },
-              { "name": "handlePanelSelect", "description": "Events" }
-            ],
-            "events": [
-              {
-                "name": "zn-event-name",
-                "description": "Emitted as an example."
-              }
-            ]
-          }
-        },
         {
           "name": "zn-dialog",
           "description": "Short summary of the component's intended use.\n\n---\n\n\n### **Events:**\n - **zn-show** - Emitted when the dialog is opens.\n- **zn-close** - Emitted when the dialog is closed.\n- **zn-request-close** - Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss.\n\n### **Methods:**\n - **show()** - Shows the dialog.\n- **hide()** - Hides the dialog.\n\n### **Slots:**\n - _default_ - The default slot.\n- **label** - The dialog's label. Alternatively you can use the `label` attribute.\n- **header-icon** - Optional icon to add to the left of the dialog's label (title). A color will be applied to the icon depending on the dialog variant.\n- **announcement-intro** - Optional Intro text to display below the icon, when using the variant `announcement`.\n- **header-actions** - Optional actions to add to the header. Works best with `<zn-button>` elements.\n- **footer** - The dialog's footer. This is typically used for buttons representing various options.\n- **footer-text** - Optional text to include below the footer buttons, when using the variant `announcement`.\n\n### **CSS Properties:**\n - **--width** - The preferred width of the dialog. Note the dialog will shrink to accommodate smaller screens. _(default: undefined)_\n- **--header-spacing** - The amount of padding to use for the header. _(default: undefined)_\n- **--body-spacing** - The amount of padding to use for the body. _(default: undefined)_\n- **--footer-spacing** - The amount of padding to use for the footer. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **header** - The dialog's header. This element wraps the title and header actions.\n- **header-actions** - Optional actions to add to the header. Works best with `<zn-button>` elements.\n- **title** - The dialog's title.\n- **close-button** - The dialog's close button.\n- **close-button__base** - The close buttons exported `base` part.\n- **body** - The dialog's body.\n- **footer** - The dialog's footer.",
@@ -3773,6 +3647,132 @@
             ]
           }
         },
+        {
+          "name": "zn-dropdown",
+          "description": "Short summary of the component's intended use.\n\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Methods:**\n - **show()** - Opens the dropdown\n- **hide()** - Closes the dropdown\n- **reposition()** - Instructs the dropdown to reposition itself\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.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "open",
+              "description": "Indicates whether the dropdown is open",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "placement",
+              "description": "The placement of the dropdown. Note the actual placement may vary based on the available space",
+              "value": {
+                "type": "'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' |\n    'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'",
+                "default": "'bottom-start'"
+              }
+            },
+            {
+              "name": "disabled",
+              "description": "Disable the dropdown",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "stay-open-on-select",
+              "description": "By default, the dropdown will close when an item is selected. Set this to true to keep the dropdown open",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "distance",
+              "description": "The distance in pixels from which to offset the panel away from the trigger",
+              "value": { "type": "number", "default": "0" }
+            },
+            {
+              "name": "skidding",
+              "description": "The distance in pixels from which to offset the panel away from the trigger",
+              "value": { "type": "number", "default": "0" }
+            },
+            {
+              "name": "hoist",
+              "description": "Enable this option if the parent is overflow hidden and the dropdown is not visible",
+              "value": { "type": "boolean", "default": "true" }
+            },
+            {
+              "name": "sync",
+              "description": "Syncs the popup width or height with the trigger element",
+              "value": {
+                "type": "'width' | 'height' | 'both' | undefined",
+                "default": "undefined"
+              }
+            },
+            { "name": "uri", "value": { "type": "string" } },
+            {
+              "name": "fetchedContent",
+              "value": { "type": "string", "default": "''" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The default slot." },
+            { "name": "example", "description": "An example slot." }
+          ],
+          "events": [
+            { "name": "zn-event-name", "description": "Emitted as an example." }
+          ],
+          "js": {
+            "properties": [
+              { "name": "popup", "type": "ZnPopup" },
+              { "name": "trigger", "type": "HTMLSlotElement" },
+              { "name": "panel", "type": "HTMLSlotElement" },
+              {
+                "name": "open",
+                "description": "Indicates whether the dropdown is open",
+                "type": "boolean"
+              },
+              {
+                "name": "placement",
+                "description": "The placement of the dropdown. Note the actual placement may vary based on the available space",
+                "type": "'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' |\n    'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'"
+              },
+              {
+                "name": "disabled",
+                "description": "Disable the dropdown",
+                "type": "boolean"
+              },
+              {
+                "name": "stayOpenOnSelect",
+                "description": "By default, the dropdown will close when an item is selected. Set this to true to keep the dropdown open",
+                "type": "boolean"
+              },
+              {
+                "name": "containingElement",
+                "description": "The dropdown will close when the user interacts outside the element*",
+                "type": "HTMLElement | undefined"
+              },
+              {
+                "name": "distance",
+                "description": "The distance in pixels from which to offset the panel away from the trigger",
+                "type": "number"
+              },
+              {
+                "name": "skidding",
+                "description": "The distance in pixels from which to offset the panel away from the trigger",
+                "type": "number"
+              },
+              {
+                "name": "hoist",
+                "description": "Enable this option if the parent is overflow hidden and the dropdown is not visible",
+                "type": "boolean"
+              },
+              {
+                "name": "sync",
+                "description": "Syncs the popup width or height with the trigger element",
+                "type": "'width' | 'height' | 'both' | undefined"
+              },
+              { "name": "uri", "type": "string" },
+              { "name": "fetchedContent", "type": "string" },
+              { "name": "handlePanelSelect", "description": "Events" }
+            ],
+            "events": [
+              {
+                "name": "zn-event-name",
+                "description": "Emitted as an example."
+              }
+            ]
+          }
+        },
         {
           "name": "zn-editor",
           "description": "Short summary of the component's intended use.\n\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.",

package/dist/zn.d.ts

@@ -1578,8 +1578,9 @@ declare module "utilities/sanitize-html" {
     /**
      * Sanitizes untrusted HTML down to formatting tags, keeping only a link's href when it is http(s) or mailto.
      * Tags in `keep` are allowed as they are, so a block such as `pre` isn't turned into a paragraph.
+     * With `colors`, a `style` attribute survives holding only its text and background colour.
      */
-    export function sanitizeHtml(source: string, keep?: string[]): string;
+    export function sanitizeHtml(source: string, keep?: string[], colors?: boolean): string;
 }
 declare module "components/chat-message/clean-message" {
     /**
@@ -4382,7 +4383,7 @@ declare module "components/data-table/index" {
     }
 }
 declare module "components/cols/cols.component" {
-    import { type CSSResultGroup } from 'lit';
+    import { type CSSResultGroup, type PropertyValues } from 'lit';
     import ZincElement from "internal/zinc-element";
     /**
      * @summary Short summary of the component's intended use.
@@ -4418,8 +4419,15 @@ declare module "components/cols/cols.component" {
         padX: boolean;
         padY: boolean;
         private readonly childObserver;
+        private readonly resizeObserver;
         connectedCallback(): void;
         disconnectedCallback(): void;
+        protected updated(changed: PropertyValues<this>): void;
+        /**
+         * Flags each child that ends its row as laid out, so `divide` only draws between neighbours on the same row
+         * however the columns have wrapped.
+         */
+        private markRowEnds;
         /**
          * Reads the `stack-order` attribute of an element, returning null when it does not declare one.
          */