@kubex/zinc 1.1.183 → 1.1.184

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

@@ -13,6 +13,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-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.",
@@ -53,17 +64,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-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",
@@ -1329,6 +1329,63 @@
         }
       ]
     },
+    {
+      "name": "zn-defined-label",
+      "description": "This component provides a labeled input with support for predefined and custom labels,\nallowing users to select or enter label-value pairs within a dropdown interface.\n---\n\n\n### **CSS Parts:**\n - **input** - The component's main input.\n- **input-value** - The label's value inputs.",
+      "attributes": [
+        {
+          "name": "value",
+          "description": "The selected label key. Also acts as the filter while typing.",
+          "values": []
+        },
+        {
+          "name": "inputValue",
+          "description": "The value entered for the selected label. Submitted as `label:value` when present.",
+          "values": []
+        },
+        {
+          "name": "input-size",
+          "description": "The size of the main input.",
+          "values": [
+            { "name": "x-small" },
+            { "name": "small" },
+            { "name": "medium" },
+            { "name": "large" }
+          ]
+        },
+        {
+          "name": "name",
+          "description": "The name of the control. Used for form submission.",
+          "values": []
+        },
+        {
+          "name": "title",
+          "description": "The title of the main input.",
+          "values": []
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the control.",
+          "values": []
+        },
+        {
+          "name": "allow-custom",
+          "description": "Allows labels that aren't in the predefined list.",
+          "values": []
+        },
+        {
+          "name": "predefined-labels",
+          "description": "The predefined labels. Entries are either a string or `{name, options}`.",
+          "values": [{ "name": "(PredefinedLabel" }, { "name": "string)[]" }]
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://zinc.style/components/defined-label"
+        }
+      ]
+    },
     {
       "name": "zn-datepicker",
       "description": "A date picker component with calendar popup and input validation.\n---\n\n\n### **Events:**\n - **zn-change** - Emitted when the date value changes.\n- **zn-input** - Emitted when the input value changes.\n- **zn-blur** - Emitted when the input loses focus.\n- **zn-focus** - Emitted when the input gains focus.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the input.\n- **blur()** - Removes focus from the input.\n- **select()** - Selects all the text in the input.\n- **checkValidity(): _boolean_** - Checks the validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - **label** - The datepicker's label. Alternatively, you can use the `label` attribute.\n- **label-tooltip** - Tooltip content for the label. Alternatively, you can use the `label-tooltip` attribute.\n- **context-note** - Additional context text displayed above the input. Alternatively, you can use the `context-note` attribute.\n- **help-text** - Help text displayed below the input. Alternatively, you can use the `help-text` attribute.\n- **prefix** - Content to display before the input (in addition to the default calendar icon).\n- **suffix** - Content to display after the input.\n\n### **CSS Properties:**\n - **--zn-input-*** - Inherited input component CSS custom properties. _(default: undefined)_\n- **--zn-datepicker-inline-border-color** - Border colour of the calendar in `inline` mode. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **form-control** - The form control wrapper.\n- **form-control-label** - The label element.\n- **form-control-input** - The input wrapper.\n- **form-control-help-text** - The help text element.",
@@ -1462,63 +1519,6 @@
         }
       ]
     },
-    {
-      "name": "zn-defined-label",
-      "description": "This component provides a labeled input with support for predefined and custom labels,\nallowing users to select or enter label-value pairs within a dropdown interface.\n---\n\n\n### **CSS Parts:**\n - **input** - The component's main input.\n- **input-value** - The label's value inputs.",
-      "attributes": [
-        {
-          "name": "value",
-          "description": "The selected label key. Also acts as the filter while typing.",
-          "values": []
-        },
-        {
-          "name": "inputValue",
-          "description": "The value entered for the selected label. Submitted as `label:value` when present.",
-          "values": []
-        },
-        {
-          "name": "input-size",
-          "description": "The size of the main input.",
-          "values": [
-            { "name": "x-small" },
-            { "name": "small" },
-            { "name": "medium" },
-            { "name": "large" }
-          ]
-        },
-        {
-          "name": "name",
-          "description": "The name of the control. Used for form submission.",
-          "values": []
-        },
-        {
-          "name": "title",
-          "description": "The title of the main input.",
-          "values": []
-        },
-        {
-          "name": "disabled",
-          "description": "Disables the control.",
-          "values": []
-        },
-        {
-          "name": "allow-custom",
-          "description": "Allows labels that aren't in the predefined list.",
-          "values": []
-        },
-        {
-          "name": "predefined-labels",
-          "description": "The predefined labels. Entries are either a string or `{name, options}`.",
-          "values": [{ "name": "(PredefinedLabel" }, { "name": "string)[]" }]
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://zinc.style/components/defined-label"
-        }
-      ]
-    },
     {
       "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.",

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.183",
+  "version": "1.1.184",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -15,6 +15,28 @@
           "events": [],
           "js": { "properties": [], "events": [] }
         },
+        {
+          "name": "zn-action-bar",
+          "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.",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            { "name": "", "description": "The default slot." },
+            { "name": "example", "description": "An example slot." }
+          ],
+          "events": [
+            { "name": "zn-event-name", "description": "Emitted as an example." }
+          ],
+          "js": {
+            "properties": [],
+            "events": [
+              {
+                "name": "zn-event-name",
+                "description": "Emitted as an example."
+              }
+            ]
+          }
+        },
         {
           "name": "zn-alert",
           "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.",
@@ -83,28 +105,6 @@
             ]
           }
         },
-        {
-          "name": "zn-action-bar",
-          "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.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            { "name": "", "description": "The default slot." },
-            { "name": "example", "description": "An example slot." }
-          ],
-          "events": [
-            { "name": "zn-event-name", "description": "Emitted as an example." }
-          ],
-          "js": {
-            "properties": [],
-            "events": [
-              {
-                "name": "zn-event-name",
-                "description": "Emitted as an example."
-              }
-            ]
-          }
-        },
         {
           "name": "zn-animated-button",
           "description": "\n\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",
@@ -3069,6 +3069,109 @@
             ]
           }
         },
+        {
+          "name": "zn-defined-label",
+          "description": "This component provides a labeled input with support for predefined and custom labels,\nallowing users to select or enter label-value pairs within a dropdown interface.\n\n---\n\n\n### **CSS Parts:**\n - **input** - The component's main input.\n- **input-value** - The label's value inputs.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "value",
+              "description": "The selected label key. Also acts as the filter while typing.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "inputValue",
+              "description": "The value entered for the selected label. Submitted as `label:value` when present.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "input-size",
+              "description": "The size of the main input.",
+              "value": {
+                "type": "'x-small' | 'small' | 'medium' | 'large'",
+                "default": "'medium'"
+              }
+            },
+            {
+              "name": "name",
+              "description": "The name of the control. Used for form submission.",
+              "value": { "type": "string", "default": "'label'" }
+            },
+            {
+              "name": "title",
+              "description": "The title of the main input.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "disabled",
+              "description": "Disables the control.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "allow-custom",
+              "description": "Allows labels that aren't in the predefined list.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "predefined-labels",
+              "description": "The predefined labels. Entries are either a string or `{name, options}`.",
+              "value": {
+                "type": "(PredefinedLabel | string)[]",
+                "default": "[]"
+              }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "input", "type": "ZnInput" },
+              { "name": "dropdown", "type": "ZnDropdown" },
+              {
+                "name": "value",
+                "description": "The selected label key. Also acts as the filter while typing.",
+                "type": "string"
+              },
+              {
+                "name": "inputValue",
+                "description": "The value entered for the selected label. Submitted as `label:value` when present.",
+                "type": "string"
+              },
+              {
+                "name": "inputSize",
+                "description": "The size of the main input.",
+                "type": "'x-small' | 'small' | 'medium' | 'large'"
+              },
+              {
+                "name": "name",
+                "description": "The name of the control. Used for form submission.",
+                "type": "string"
+              },
+              {
+                "name": "title",
+                "description": "The title of the main input.",
+                "type": "string"
+              },
+              {
+                "name": "disabled",
+                "description": "Disables the control.",
+                "type": "boolean"
+              },
+              {
+                "name": "allowCustom",
+                "description": "Allows labels that aren't in the predefined list.",
+                "type": "boolean"
+              },
+              {
+                "name": "predefinedLabels",
+                "description": "The predefined labels. Entries are either a string or `{name, options}`.",
+                "type": "(PredefinedLabel | string)[]"
+              },
+              { "name": "validationMessage" },
+              { "name": "validity" }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "zn-datepicker",
           "description": "A date picker component with calendar popup and input validation.\n\n---\n\n\n### **Events:**\n - **zn-change** - Emitted when the date value changes.\n- **zn-input** - Emitted when the input value changes.\n- **zn-blur** - Emitted when the input loses focus.\n- **zn-focus** - Emitted when the input gains focus.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the input.\n- **blur()** - Removes focus from the input.\n- **select()** - Selects all the text in the input.\n- **checkValidity(): _boolean_** - Checks the validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - **label** - The datepicker's label. Alternatively, you can use the `label` attribute.\n- **label-tooltip** - Tooltip content for the label. Alternatively, you can use the `label-tooltip` attribute.\n- **context-note** - Additional context text displayed above the input. Alternatively, you can use the `context-note` attribute.\n- **help-text** - Help text displayed below the input. Alternatively, you can use the `help-text` attribute.\n- **prefix** - Content to display before the input (in addition to the default calendar icon).\n- **suffix** - Content to display after the input.\n\n### **CSS Properties:**\n - **--zn-input-*** - Inherited input component CSS custom properties. _(default: undefined)_\n- **--zn-datepicker-inline-border-color** - Border colour of the calendar in `inline` mode. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **form-control** - The form control wrapper.\n- **form-control-label** - The label element.\n- **form-control-input** - The input wrapper.\n- **form-control-help-text** - The help text element.",
@@ -3403,109 +3506,6 @@
             ]
           }
         },
-        {
-          "name": "zn-defined-label",
-          "description": "This component provides a labeled input with support for predefined and custom labels,\nallowing users to select or enter label-value pairs within a dropdown interface.\n\n---\n\n\n### **CSS Parts:**\n - **input** - The component's main input.\n- **input-value** - The label's value inputs.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "value",
-              "description": "The selected label key. Also acts as the filter while typing.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "inputValue",
-              "description": "The value entered for the selected label. Submitted as `label:value` when present.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "input-size",
-              "description": "The size of the main input.",
-              "value": {
-                "type": "'x-small' | 'small' | 'medium' | 'large'",
-                "default": "'medium'"
-              }
-            },
-            {
-              "name": "name",
-              "description": "The name of the control. Used for form submission.",
-              "value": { "type": "string", "default": "'label'" }
-            },
-            {
-              "name": "title",
-              "description": "The title of the main input.",
-              "value": { "type": "string" }
-            },
-            {
-              "name": "disabled",
-              "description": "Disables the control.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "allow-custom",
-              "description": "Allows labels that aren't in the predefined list.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "predefined-labels",
-              "description": "The predefined labels. Entries are either a string or `{name, options}`.",
-              "value": {
-                "type": "(PredefinedLabel | string)[]",
-                "default": "[]"
-              }
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "input", "type": "ZnInput" },
-              { "name": "dropdown", "type": "ZnDropdown" },
-              {
-                "name": "value",
-                "description": "The selected label key. Also acts as the filter while typing.",
-                "type": "string"
-              },
-              {
-                "name": "inputValue",
-                "description": "The value entered for the selected label. Submitted as `label:value` when present.",
-                "type": "string"
-              },
-              {
-                "name": "inputSize",
-                "description": "The size of the main input.",
-                "type": "'x-small' | 'small' | 'medium' | 'large'"
-              },
-              {
-                "name": "name",
-                "description": "The name of the control. Used for form submission.",
-                "type": "string"
-              },
-              {
-                "name": "title",
-                "description": "The title of the main input.",
-                "type": "string"
-              },
-              {
-                "name": "disabled",
-                "description": "Disables the control.",
-                "type": "boolean"
-              },
-              {
-                "name": "allowCustom",
-                "description": "Allows labels that aren't in the predefined list.",
-                "type": "boolean"
-              },
-              {
-                "name": "predefinedLabels",
-                "description": "The predefined labels. Entries are either a string or `{name, options}`.",
-                "type": "(PredefinedLabel | string)[]"
-              },
-              { "name": "validationMessage" },
-              { "name": "validity" }
-            ],
-            "events": []
-          }
-        },
         {
           "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.",

package/dist/zn.min.js

@@ -1730,20 +1730,20 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
           </div>`:""}
         <slot name="footer" class="note__footer"></slot>
       </div>
-    `}};dn.styles=k(wx),c([p({reflect:!0})],dn.prototype,"color",2),c([p({reflect:!0})],dn.prototype,"caption",2),c([p({reflect:!0})],dn.prototype,"date",2),c([p({type:HTMLElement,reflect:!0})],dn.prototype,"body",2),c([D()],dn.prototype,"expanded",2);var $9=dn;dn.define("zn-note");var _x=S`@keyframes rotate-gradient{from{--rotate:0deg}to{--rotate:360deg}}:host{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-transform:none}*,*::before,*::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:rgb(var(--zn-border-color))}[hidden]{display:none !important}.width-container,.form-container,.wide-form-container{height:100%;width:100%;margin:var(--zn-default-margin,0 auto)}.width-container{max-width:var(--zn-container)}.form-container{max-width:var(--zn-container-ph)}.wide-form-container{max-width:var(--zn-container-lg)}:host{display:block}.tile{position:relative;display:flex;align-items:center;justify-content:space-between;min-height:48px;-moz-column-gap:var(--zn-spacing-large);column-gap:var(--zn-spacing-large);font-size:var(--zn-text-table-content-font-size);line-height:var(--zn-text-table-content-line-height);font-weight:var(--zn-text-table-content-font-weight);color:var(--zn-text-table-content-color)}.tile--has-image,.tile--has-caption,.tile--has-description,.tile--has-properties,.tile--has-actions{padding-inline:var(--zn-base-gap)}.tile--has-description.tile--has-caption{padding-block:var(--zn-base-gap)}.tile--has-image{padding:var(--zn-base-gap)}.tile--has-href{cursor:pointer}.tile--has-href:hover{background-color:var(--zn-color-neutral-100)}.tile--flush{padding:0}.tile--flush-x{padding-inline:0}.tile--flush-y{padding-block:0}a{color:inherit;text-decoration:none;cursor:pointer}::slotted(zn-icon){display:flex;justify-content:center;align-items:center}.tile__link{display:flex;align-items:center;justify-content:space-between;flex:1;-moz-column-gap:var(--zn-spacing-small);column-gap:var(--zn-spacing-small);min-width:0}.tile__left{display:flex;align-items:center;-moz-column-gap:var(--zn-spacing-small);column-gap:var(--zn-spacing-small);min-width:0}.tile__image{display:flex;align-items:center;flex-shrink:0}.tile__content{display:flex;flex-direction:column;justify-content:center;min-width:0}.tile--inline .tile__content{flex-direction:row;align-items:center;-moz-column-gap:var(--zn-spacing-x-small);column-gap:var(--zn-spacing-x-small)}.tile__caption{margin:0;font-weight:600;color:rgb(var(--zn-text-heading));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tile--plain .tile__caption{font-weight:var(--zn-text-table-content-font-weight);color:var(--zn-text-table-content-color)}.tile__description{margin:var(--zn-spacing-3x-small) 0 0;font-weight:var(--zn-text-table-content-font-weight);color:var(--zn-text-table-content-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}slot.tile__description{display:block}.tile--inline .tile__description{margin:0}.tile__right{display:flex;align-items:center;justify-content:flex-end;-moz-column-gap:var(--zn-spacing-large);column-gap:var(--zn-spacing-large);min-width:0}.tile__properties{display:flex;flex-direction:row;align-items:center;-moz-column-gap:var(--zn-spacing-large);column-gap:var(--zn-spacing-large);min-width:0;flex-shrink:0;overflow:hidden}.tile__properties ::slotted(*){white-space:nowrap}@container (max-width:359px){.tile__properties{display:none}}.tile__actions{display:flex;align-items:center;-moz-column-gap:var(--zn-spacing-small);column-gap:var(--zn-spacing-small);flex-shrink:0}:host([grouped]){display:grid;grid-column:1/-1;grid-template-columns:subgrid;align-items:center}:host([grouped]) .tile{display:grid;grid-column:1/-1;grid-template-columns:subgrid;align-items:center;justify-items:end;min-height:48px}:host([grouped]) .tile__link,:host([grouped]) .tile__right,:host([grouped]) .tile__properties,:host([grouped]) .tile__actions{display:contents}:host([grouped]) .tile__left{grid-column:1;justify-self:stretch;min-width:0;overflow:hidden}:host([stack-actions]){container-type:inline-size}@container (max-width:599px){:host([stack-actions]) .tile{flex-wrap:wrap;row-gap:var(--zn-spacing-x-small)}:host([stack-actions]) .tile .tile__link{flex-basis:100%}:host([stack-actions]) .tile .tile__right{justify-content:flex-start;flex-wrap:wrap}:host([stack-actions]) .tile .tile__actions{flex-wrap:wrap;row-gap:var(--zn-spacing-x-small)}}`;var ar=class extends T{constructor(){super(...arguments);this.hasSlotController=new te(this,"[default]","properties","actions","image")}_isLink(){return this.href||this.dataUri}_handleActionsClick(t){if(this._isLink()){for(let r of t.composedPath()){if(r===this)break;if(!(r instanceof Element))continue;let n=r.getAttribute("href");if(r.hasAttribute("data-uri")||n!==null&&n!==""&&!n.startsWith("#"))return}t.stopPropagation()}}render(){let t=this._isLink(),r=t?an`a`:an`div`,n=this.caption&&this.caption.length>0,a=this.description&&this.description.length>0,s=this.hasSlotController.test("properties"),l=this.hasSlotController.test("actions"),d=this.hasSlotController.test("image");return De`
+    `}};dn.styles=k(wx),c([p({reflect:!0})],dn.prototype,"color",2),c([p({reflect:!0})],dn.prototype,"caption",2),c([p({reflect:!0})],dn.prototype,"date",2),c([p({type:HTMLElement,reflect:!0})],dn.prototype,"body",2),c([D()],dn.prototype,"expanded",2);var $9=dn;dn.define("zn-note");var _x=S`@keyframes rotate-gradient{from{--rotate:0deg}to{--rotate:360deg}}:host{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-transform:none}*,*::before,*::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:rgb(var(--zn-border-color))}[hidden]{display:none !important}.width-container,.form-container,.wide-form-container{height:100%;width:100%;margin:var(--zn-default-margin,0 auto)}.width-container{max-width:var(--zn-container)}.form-container{max-width:var(--zn-container-ph)}.wide-form-container{max-width:var(--zn-container-lg)}:host{display:block}.tile{position:relative;display:flex;align-items:center;justify-content:space-between;min-height:48px;-moz-column-gap:var(--zn-spacing-large);column-gap:var(--zn-spacing-large);font-size:var(--zn-text-table-content-font-size);line-height:var(--zn-text-table-content-line-height);font-weight:var(--zn-text-table-content-font-weight);color:var(--zn-text-table-content-color)}.tile--has-image,.tile--has-caption,.tile--has-description,.tile--has-properties,.tile--has-actions{padding-inline:var(--zn-base-gap)}.tile--has-description.tile--has-caption{padding-block:var(--zn-base-gap)}.tile--has-image{padding:var(--zn-base-gap)}.tile--has-href{cursor:pointer}.tile--has-href:hover{background-color:var(--zn-color-neutral-100)}.tile--flush{padding:0}.tile--flush-x{padding-inline:0}.tile--flush-y{padding-block:0}a{color:inherit;text-decoration:none;cursor:pointer}::slotted(zn-icon){display:flex;justify-content:center;align-items:center}.tile__link{display:flex;align-items:center;justify-content:space-between;flex:1;-moz-column-gap:var(--zn-spacing-small);column-gap:var(--zn-spacing-small);min-width:0}.tile__left{display:flex;align-items:center;-moz-column-gap:var(--zn-spacing-small);column-gap:var(--zn-spacing-small);min-width:0}.tile__image{display:flex;align-items:center;flex-shrink:0}.tile__content{display:flex;flex-direction:column;justify-content:center;min-width:0}.tile--inline .tile__content{flex-direction:row;align-items:center;-moz-column-gap:var(--zn-spacing-x-small);column-gap:var(--zn-spacing-x-small)}.tile__caption{margin:0;font-weight:600;color:rgb(var(--zn-text-heading));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tile--plain .tile__caption{font-weight:var(--zn-text-table-content-font-weight);color:var(--zn-text-table-content-color)}.tile__description{margin:var(--zn-spacing-3x-small) 0 0;font-weight:var(--zn-text-table-content-font-weight);color:var(--zn-text-table-content-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}slot.tile__description{display:block}.tile--inline .tile__description{margin:0}.tile__right{display:flex;align-items:center;justify-content:flex-end;-moz-column-gap:var(--zn-spacing-large);column-gap:var(--zn-spacing-large);min-width:0}.tile__properties{display:flex;flex-direction:row;align-items:center;-moz-column-gap:var(--zn-spacing-large);column-gap:var(--zn-spacing-large);min-width:0;flex-shrink:0;overflow:hidden}.tile__properties ::slotted(*){white-space:nowrap}@container (max-width:359px){.tile__properties{display:none}}.tile__actions{display:flex;align-items:center;-moz-column-gap:var(--zn-spacing-small);column-gap:var(--zn-spacing-small);flex-shrink:0}:host([grouped]){display:grid;grid-column:1/-1;grid-template-columns:subgrid;align-items:center}:host([grouped]) .tile{display:grid;grid-column:1/-1;grid-template-columns:subgrid;align-items:center;justify-items:end;min-height:48px}:host([grouped]) .tile__link,:host([grouped]) .tile__right,:host([grouped]) .tile__properties,:host([grouped]) .tile__actions{display:contents}:host([grouped]) .tile__left{grid-column:1;justify-self:stretch;min-width:0;overflow:hidden}:host([stack-actions]){container-type:inline-size}@container (max-width:599px){:host([stack-actions]) .tile{flex-wrap:wrap;row-gap:var(--zn-spacing-x-small)}:host([stack-actions]) .tile .tile__link{flex-basis:100%}:host([stack-actions]) .tile .tile__right{justify-content:flex-start;flex-wrap:wrap}:host([stack-actions]) .tile .tile__actions{flex-wrap:wrap;row-gap:var(--zn-spacing-x-small)}}`;var ar=class extends T{constructor(){super(...arguments);this.hasSlotController=new te(this,"[default]","caption","description","properties","actions","image")}_isLink(){return this.href||this.dataUri}_handleActionsClick(t){if(this._isLink()){for(let r of t.composedPath()){if(r===this)break;if(!(r instanceof Element))continue;let n=r.getAttribute("href");if(r.hasAttribute("data-uri")||n!==null&&n!==""&&!n.startsWith("#"))return}t.stopPropagation()}}render(){let t=this._isLink(),r=t?an`a`:an`div`,n=this.caption&&this.caption.length>0||this.hasSlotController.test("caption"),a=this.description&&this.description.length>0,s=a||this.hasSlotController.test("description"),l=this.hasSlotController.test("properties"),d=this.hasSlotController.test("actions"),h=this.hasSlotController.test("image");return De`
       <div
-        class="${q({tile:!0,"tile--flush":this.flush,"tile--flush-x":this.flushX,"tile--flush-y":this.flushY,"tile--inline":this.inline,"tile--plain":this.plain,"tile--has-href":t,"tile--has-caption":n,"tile--has-description":a,"tile--has-properties":s,"tile--has-actions":l,"tile--has-image":d})}">
+        class="${q({tile:!0,"tile--flush":this.flush,"tile--flush-x":this.flushX,"tile--flush-y":this.flushY,"tile--inline":this.inline,"tile--plain":this.plain,"tile--has-href":t,"tile--has-caption":n,"tile--has-description":s,"tile--has-properties":l,"tile--has-actions":d,"tile--has-image":h})}">
         <${r}
           href="${P(this.href)}"
           data-uri="${P(this.dataUri)}"
           gaid="${P(this.gaid)}"
           data-target="${P(this.dataTarget)}"
           class="tile__link">
-          ${!n&&!a&&!s&&!l?De`
+          ${!n&&!s&&!l&&!d?De`
             <slot></slot>
           `:De`
             <div class="tile__left">
-              ${d?De`
+              ${h?De`
                 <slot name="image" part="image" class="tile__image"></slot>`:De``}
               <div class="tile__content">
                 <p part="caption" class="tile__caption">
@@ -1754,12 +1754,12 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
                     ${this.description}</p>`:De`<slot name="description" class="tile__description"></slot>`}
               </div>
             </div>
-            ${s?De`
+            ${l?De`
               <slot name="properties" part="properties" class="tile__properties"></slot>`:""}
           `}
         </${r}>
 
-        ${l?De`
+        ${d?De`
           <div class="tile__right">
             <!-- Kept outside the link so slotted controls retain their default behaviour. -->
               <slot name="actions" part="actions" class="tile__actions"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.1.183",
+  "version": "1.1.184",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",

package/src/components/tile/tile.component.ts

@@ -28,7 +28,7 @@ import styles from './tile.scss';
 export default class ZnTile extends ZincElement {
   static styles: CSSResultGroup = unsafeCSS(styles);
 
-  private readonly hasSlotController = new HasSlotController(this, '[default]', 'properties', 'actions', 'image');
+  private readonly hasSlotController = new HasSlotController(this, '[default]', 'caption', 'description', 'properties', 'actions', 'image');
 
   @property({attribute: 'caption'}) caption: string;
 
@@ -84,8 +84,9 @@ export default class ZnTile extends ZincElement {
   render() {
     const isLink = this._isLink();
     const tag = isLink ? literal`a` : literal`div`;
-    const hasCaption = this.caption && this.caption.length > 0;
-    const hasDescription = this.description && this.description.length > 0;
+    const hasCaption = (this.caption && this.caption.length > 0) || this.hasSlotController.test('caption');
+    const hasDescriptionAttr = this.description && this.description.length > 0;
+    const hasDescription = hasDescriptionAttr || this.hasSlotController.test('description');
     const hasProperties = this.hasSlotController.test('properties');
     const hasActions = this.hasSlotController.test('actions');
     const hasImage = this.hasSlotController.test('image');
@@ -122,7 +123,7 @@ export default class ZnTile extends ZincElement {
                 <p part="caption" class="tile__caption">
                   <slot name="caption">${this.caption}</slot>
                 </p>
-                ${hasDescription ? html`
+                ${hasDescriptionAttr ? html`
                   <p part="description" class="tile__description">
                     ${this.description}</p>` : html`<slot name="description" class="tile__description"></slot>`}
               </div>

package/src/components/tile/tile.test.ts

@@ -9,6 +9,17 @@ describe('<zn-tile>', () => {
     expect(el).to.exist;
   });
 
+  it('should render a slotted caption and image without caption or description attributes', async () => {
+    const el = await fixture<ZnTile>(html`
+      <zn-tile>
+        <zn-icon slot="image" src="user@lu"></zn-icon>
+        <span slot="caption">Leslie Alexander</span>
+      </zn-tile>`);
+
+    expect(el.shadowRoot!.querySelector('slot[name="caption"]')).to.exist;
+    expect(el.shadowRoot!.querySelector('slot[name="image"]')).to.exist;
+  });
+
   it('should render its content as a link when href is set', async () => {
     const el = await fixture<ZnTile>(html`
       <zn-tile href="/users/leslie" caption="Leslie Alexander"></zn-tile>`);