@kubex/zinc 1.0.24 → 1.0.98

package/docs/data/products-table.json

@@ -3,237 +3,85 @@
     {
       "id": "1",
       "cells": [
-        {
-          "column": "name",
-          "text": "Essence Mascara Lash Princess"
-        },
-        {
-          "column": "category",
-          "text": "beauty"
-        },
-        {
-          "column": "price",
-          "text": "£9.99"
-        },
-        {
-          "column": "discountPercentage",
-          "text": "2.56"
-        },
-        {
-          "column": "rating",
-          "text": "10.48"
-        },
-        {
-          "column": "stock",
-          "text": "99"
-        }
+        {"column": "name", "text": "Essence Mascara Lash Princess"},
+        {"column": "category", "text": "beauty"},
+        {"column": "price", "text": "\u00a39.99"},
+        {"column": "stock", "text": "99"},
+        {"column": "rating", "text": "4.8"}
       ]
     },
     {
       "id": "2",
       "cells": [
-        {
-          "column": "name",
-          "text": "Furminator deShedding Tool for Small Dogs"
-        },
-        {
-          "column": "category",
-          "text": "pets"
-        },
-        {
-          "column": "price",
-          "text": "£28.99"
-        },
-        {
-          "column": "discountPercentage",
-          "text": "6.19"
-        },
-        {
-          "column": "rating",
-          "text": "9.32"
-        },
-        {
-          "column": "stock",
-          "text": "61"
-        }
+        {"column": "name", "text": "Revlon ColorStay Lipstick"},
+        {"column": "category", "text": "beauty"},
+        {"column": "price", "text": "\u00a312.49"},
+        {"column": "stock", "text": "74"},
+        {"column": "rating", "text": "4.5"}
       ]
     },
     {
       "id": "3",
       "cells": [
-        {
-          "column": "name",
-          "text": "HP Pavilion 15-DK1056WM"
-        },
-        {
-          "column": "category",
-          "text": "laptops"
-        },
-        {
-          "column": "price",
-          "text": "£749.99"
-        },
-        {
-          "column": "discountPercentage",
-          "text": "10.23"
-        },
-        {
-          "column": "rating",
-          "text": "9.43"
-        },
-        {
-          "column": "stock",
-          "text": "89"
-        }
+        {"column": "name", "text": "HP Pavilion 15-DK1056WM"},
+        {"column": "category", "text": "electronics"},
+        {"column": "price", "text": "\u00a3749.99"},
+        {"column": "stock", "text": "89"},
+        {"column": "rating", "text": "4.3"}
       ]
     },
     {
       "id": "4",
       "cells": [
-        {
-          "column": "name",
-          "text": "Samsung Galaxy Book S"
-        },
-        {
-          "column": "category",
-          "text": "laptops"
-        },
-        {
-          "column": "price",
-          "text": "£819.99"
-        },
-        {
-          "column": "discountPercentage",
-          "text": "4.15"
-        },
-        {
-          "column": "rating",
-          "text": "9.57"
-        },
-        {
-          "column": "stock",
-          "text": "115"
-        }
+        {"column": "name", "text": "Samsung Galaxy Book S"},
+        {"column": "category", "text": "electronics"},
+        {"column": "price", "text": "\u00a3819.99"},
+        {"column": "stock", "text": "115"},
+        {"column": "rating", "text": "4.6"}
       ]
     },
     {
       "id": "5",
       "cells": [
-        {
-          "column": "name",
-          "text": "Infinix INBOOK"
-        },
-        {
-          "column": "category",
-          "text": "laptops"
-        },
-        {
-          "column": "price",
-          "text": "£409.99"
-        },
-        {
-          "column": "discountPercentage",
-          "text": "11.54"
-        },
-        {
-          "column": "rating",
-          "text": "8.91"
-        },
-        {
-          "column": "stock",
-          "text": "96"
-        }
+        {"column": "name", "text": "Sony WH-1000XM5 Headphones"},
+        {"column": "category", "text": "electronics"},
+        {"column": "price", "text": "\u00a3299.99"},
+        {"column": "stock", "text": "203"},
+        {"column": "rating", "text": "4.7"}
       ]
     },
     {
       "id": "6",
       "cells": [
-        {
-          "column": "name",
-          "text": "HP Pavilion 15-DK1056WM"
-        },
-        {
-          "column": "category",
-          "text": "laptops"
-        },
-        {
-          "column": "price",
-          "text": "£749.99"
-        },
-        {
-          "column": "discountPercentage",
-          "text": "10.23"
-        },
-        {
-          "column": "rating",
-          "text": "9.43"
-        },
-        {
-          "column": "stock",
-          "text": "89"
-        }
+        {"column": "name", "text": "Infinix INBOOK X1"},
+        {"column": "category", "text": "electronics"},
+        {"column": "price", "text": "\u00a3409.99"},
+        {"column": "stock", "text": "96"},
+        {"column": "rating", "text": "4.1"}
       ]
     },
     {
       "id": "7",
       "cells": [
-        {
-          "column": "name",
-          "text": "Samsung Galaxy Book S"
-        },
-        {
-          "column": "category",
-          "text": "laptops"
-        },
-        {
-          "column": "price",
-          "text": "£819.99"
-        },
-        {
-          "column": "discountPercentage",
-          "text": "4.15"
-        },
-        {
-          "column": "rating",
-          "text": "9.57"
-        },
-        {
-          "column": "stock",
-          "text": "115"
-        }
+        {"column": "name", "text": "Furminator deShedding Tool"},
+        {"column": "category", "text": "pets"},
+        {"column": "price", "text": "\u00a328.99"},
+        {"column": "stock", "text": "61"},
+        {"column": "rating", "text": "4.4"}
       ]
     },
     {
       "id": "8",
       "cells": [
-        {
-          "column": "name",
-          "text": "Infinix INBOOK"
-        },
-        {
-          "column": "category",
-          "text": "pets"
-        },
-        {
-          "column": "price",
-          "text": "£409.99"
-        },
-        {
-          "column": "discountPercentage",
-          "text": "11.54"
-        },
-        {
-          "column": "rating",
-          "text": "8.91"
-        },
-        {
-          "column": "stock",
-          "text": "96"
-        }
+        {"column": "name", "text": "KONG Classic Dog Toy"},
+        {"column": "category", "text": "pets"},
+        {"column": "price", "text": "\u00a314.99"},
+        {"column": "stock", "text": "142"},
+        {"column": "rating", "text": "4.6"}
       ]
     }
   ],
   "perPage": 10,
-  "total": 1,
+  "total": 8,
   "page": 1
 }

package/docs/pages/components/action-bar.md

@@ -1,7 +1,7 @@
 ---
 meta:
   title: Action Bar
-  description:
+  description: A horizontal container component that organizes menus on the left and action buttons on the right, commonly used for navigation and quick actions.
 layout: component
 ---
 
@@ -26,7 +26,7 @@ layout: component
       <zn-menu-item>Item 2</zn-menu-item>
     </zn-menu>
   </zn-dropdown>
-  
+
   <zn-expanding-action icon="edit_note"
                        method="fill"
                        count-uri="/note/count"
@@ -49,10 +49,125 @@ layout: component
 
 ## Examples
 
-### First Example
+### Simple Menu Bar
+
+Use the action bar to create a simple navigation menu with dropdown categories.
+
+```html:preview
+<zn-action-bar>
+  <zn-dropdown distance="5" slot="menu">
+    <zn-button slot="trigger" color="transparent" icon-position="right" icon="arrow_drop_down">
+      File
+    </zn-button>
+    <zn-menu>
+      <zn-menu-item>New</zn-menu-item>
+      <zn-menu-item>Open</zn-menu-item>
+      <zn-menu-item>Save</zn-menu-item>
+      <zn-menu-item>Close</zn-menu-item>
+    </zn-menu>
+  </zn-dropdown>
+
+  <zn-dropdown distance="5" slot="menu">
+    <zn-button slot="trigger" color="transparent" icon-position="right" icon="arrow_drop_down">
+      Edit
+    </zn-button>
+    <zn-menu>
+      <zn-menu-item>Cut</zn-menu-item>
+      <zn-menu-item>Copy</zn-menu-item>
+      <zn-menu-item>Paste</zn-menu-item>
+    </zn-menu>
+  </zn-dropdown>
+
+  <zn-dropdown distance="5" slot="menu">
+    <zn-button slot="trigger" color="transparent" icon-position="right" icon="arrow_drop_down">
+      View
+    </zn-button>
+    <zn-menu>
+      <zn-menu-item>Zoom In</zn-menu-item>
+      <zn-menu-item>Zoom Out</zn-menu-item>
+      <zn-menu-item>Full Screen</zn-menu-item>
+    </zn-menu>
+  </zn-dropdown>
+</zn-action-bar>
+```
+
+### Action Bar with Quick Actions
+
+Combine menu dropdowns with action buttons on the right side.
+
+```html:preview
+<zn-action-bar>
+  <zn-dropdown distance="5" slot="menu">
+    <zn-button slot="trigger" color="transparent" icon-position="right" icon="arrow_drop_down">
+      Dashboard
+    </zn-button>
+    <zn-menu>
+      <zn-menu-item>Overview</zn-menu-item>
+      <zn-menu-item>Analytics</zn-menu-item>
+      <zn-menu-item>Reports</zn-menu-item>
+    </zn-menu>
+  </zn-dropdown>
+
+  <zn-button slot="actions" icon="search" color="transparent"></zn-button>
+  <zn-button slot="actions" icon="notifications" color="transparent" notification="3"></zn-button>
+  <zn-button slot="actions" icon="settings" color="transparent"></zn-button>
+</zn-action-bar>
+```
+
+### Action Bar with Icon-Only Actions
+
+Use icon-only buttons for a cleaner, more compact appearance.
+
+```html:preview
+<zn-action-bar>
+  <zn-dropdown distance="5" slot="menu">
+    <zn-button slot="trigger" color="transparent" icon-position="right" icon="arrow_drop_down">
+      Projects
+    </zn-button>
+    <zn-menu>
+      <zn-menu-item>My Projects</zn-menu-item>
+      <zn-menu-item>Shared Projects</zn-menu-item>
+      <zn-menu-item>Archived Projects</zn-menu-item>
+    </zn-menu>
+  </zn-dropdown>
+
+  <zn-button slot="actions" icon="add" color="success"></zn-button>
+  <zn-button slot="actions" icon="filter_alt" color="transparent"></zn-button>
+  <zn-button slot="actions" icon="more_vert" color="transparent"></zn-button>
+</zn-action-bar>
+```
 
-TODO
+### Mixed Content
 
-### Second Example
+Combine multiple menu items and various action types for complex interfaces.
 
-TODO
+```html:preview
+<zn-action-bar>
+  <zn-dropdown distance="5" slot="menu">
+    <zn-button slot="trigger" color="transparent" icon-position="right" icon="arrow_drop_down">
+      Tickets
+    </zn-button>
+    <zn-menu>
+      <zn-menu-item>All Tickets</zn-menu-item>
+      <zn-menu-item>My Tickets</zn-menu-item>
+      <zn-menu-item>Unassigned</zn-menu-item>
+      <zn-menu-item>Closed</zn-menu-item>
+    </zn-menu>
+  </zn-dropdown>
+
+  <zn-dropdown distance="5" slot="menu">
+    <zn-button slot="trigger" color="transparent" icon-position="right" icon="arrow_drop_down">
+      Customers
+    </zn-button>
+    <zn-menu>
+      <zn-menu-item>All Customers</zn-menu-item>
+      <zn-menu-item>Active</zn-menu-item>
+      <zn-menu-item>Inactive</zn-menu-item>
+    </zn-menu>
+  </zn-dropdown>
+
+  <zn-button slot="actions" icon="add_circle" color="success">New Ticket</zn-button>
+  <zn-button slot="actions" icon="refresh" color="transparent"></zn-button>
+  <zn-button slot="actions" icon="help" color="transparent"></zn-button>
+</zn-action-bar>
+```

package/docs/pages/components/alert.md

@@ -5,41 +5,144 @@ meta:
 layout: component
 ---
 
+```html:preview
+<zn-alert caption="Important Notice">This is a basic alert with a caption and description.</zn-alert>
+```
+
 ## Examples
 
 ### Basic Alert
 
+A basic alert with just a caption.
+
 ```html:preview
+<zn-alert caption="This is an alert">This is the description text that provides more details.</zn-alert>
+```
 
-<zn-alert caption="This is an alert">This is the Description</zn-alert>
+### Without Caption
+
+Alerts can also be used without a caption, displaying only the content.
+
+```html:preview
+<zn-alert>This alert has no caption, just content.</zn-alert>
 ```
 
-### With Icon
+### Levels
+
+Use the `level` attribute to change the semantic color and styling of the alert. Available levels are: `primary`, `error`, `info`, `success`, `warning`, `note`, and `cosmic`.
 
 ```html:preview
+<zn-alert caption="Primary Alert" level="primary">This is a primary alert.</zn-alert>
+<br />
+<zn-alert caption="Error Alert" level="error">This indicates an error or problem.</zn-alert>
+<br />
+<zn-alert caption="Info Alert" level="info">This provides informational content.</zn-alert>
+<br />
+<zn-alert caption="Success Alert" level="success">This indicates a successful action.</zn-alert>
+<br />
+<zn-alert caption="Warning Alert" level="warning">This warns about potential issues.</zn-alert>
+<br />
+<zn-alert caption="Note Alert" level="note">This is a general note.</zn-alert>
+<br />
+<zn-alert caption="Cosmic Alert" level="cosmic">This is a special cosmic-themed alert.</zn-alert>
+```
+
+### With Icons
+
+Use the `icon` attribute to add an icon to the alert. Icons appear on the left side of the alert.
 
-<zn-alert caption="This is an alert" icon="House" level="note">
-This is the Description
-  <zn-button slot="actions" color="transparent">View All</zn-button>
+```html:preview
+<zn-alert caption="Success!" icon="check_circle" level="success">
+  Your changes have been saved successfully.
+</zn-alert>
+<br />
+<zn-alert caption="Warning" icon="warning" level="warning">
+  Please review the information before proceeding.
+</zn-alert>
+<br />
+<zn-alert caption="Error" icon="error" level="error">
+  An error occurred while processing your request.
+</zn-alert>
+<br />
+<zn-alert caption="Information" icon="info" level="info">
+  Here's some helpful information you should know.
 </zn-alert>
 ```
 
-### Levels
+### With Actions
+
+Use the `actions` slot to add buttons or other interactive elements to the alert.
+
+```html:preview
+<zn-alert caption="New updates available" icon="system_update" level="info">
+  A new version of the app is ready to install.
+  <zn-button slot="actions" color="info" size="small">Update Now</zn-button>
+  <zn-button slot="actions" color="transparent" size="small">Later</zn-button>
+</zn-alert>
+<br />
+<zn-alert caption="Confirm deletion" icon="delete" level="error">
+  Are you sure you want to delete this item? This action cannot be undone.
+  <zn-button slot="actions" color="error" size="small">Delete</zn-button>
+  <zn-button slot="actions" color="secondary" size="small">Cancel</zn-button>
+</zn-alert>
+```
+
+### Collapsible Alerts
+
+Use the `collapse` attribute to make the alert icon clickable for dismissing the alert.
+
+```html:preview
+<zn-alert caption="Dismissible Alert" icon="close" collapse level="info">
+  Click the icon to dismiss this alert.
+</zn-alert>
+<br />
+<zn-alert caption="Another Dismissible Alert" icon="cancel" collapse level="warning">
+  You can click the icon to hide this warning.
+</zn-alert>
+```
+
+### Sizes
+
+Use the `size` attribute to control the alert's size. Available sizes are `small`, `medium` (default), and `large`.
 
 ```html:preview
+<zn-alert caption="Small Alert" size="small" level="info">This is a small-sized alert.</zn-alert>
+<br />
+<zn-alert caption="Medium Alert" size="medium" level="success">This is a medium-sized alert (default).</zn-alert>
+<br />
+<zn-alert caption="Large Alert" size="large" level="warning">This is a large-sized alert.</zn-alert>
+```
+
+### Complex Content
 
-<zn-alert caption="This is an alert" level="primary">This is the Description</zn-alert>
-<zn-alert caption="This is an alert" level="error">This is the Description</zn-alert>
-<zn-alert caption="This is an alert" level="info">This is the Description</zn-alert>
-<zn-alert caption="This is an alert" level="success">This is the Description</zn-alert>
-<zn-alert caption="This is an alert" level="warning">This is the Description</zn-alert>
+Alerts can contain rich HTML content including lists, links, and formatted text.
+
+```html:preview
+<zn-alert caption="System Requirements" icon="info" level="info">
+  <p>Before proceeding, please ensure:</p>
+  <ul>
+    <li>Your browser is up to date</li>
+    <li>JavaScript is enabled</li>
+    <li>You have a stable internet connection</li>
+  </ul>
+  <p>Need help? <a href="#">Contact support</a></p>
+  <zn-button slot="actions" color="info" size="small">Continue</zn-button>
+</zn-alert>
 ```
 
-### sizes
+### Programmatic Dismissal
+
+Alerts can be dismissed programmatically using the `hideAlert()` method.
 
 ```html:preview
+<zn-alert id="dismissible-alert" caption="Auto-dismiss Alert" icon="timer" level="warning">
+  This alert will automatically dismiss in 5 seconds.
+</zn-alert>
 
-<zn-alert caption="This is an alert" size="small">This is the Description</zn-alert>
-<zn-alert caption="This is an alert" size="medium">This is the Description</zn-alert>
-<zn-alert caption="This is an alert" size="large">This is the Description</zn-alert>
+<script type="module">
+  const alert = document.getElementById('dismissible-alert');
+  setTimeout(() => {
+    alert.hideAlert();
+  }, 5000);
+</script>
 ```