@kubex/zinc 1.0.115 → 1.0.117

package/docs/_includes/default.njk

@@ -64,7 +64,7 @@
 
   {# Theme selector #}
   <zn-dropdown id="theme-selector" placement="bottom-end" distance="3">
-    <zn-button slot="trigger" size="content" color="transparent" title="Press \ to toggle">
+    <zn-button slot="trigger" color="transparent" title="Press \ to toggle">
       <zn-icon class="only-light" src="light_mode"></zn-icon>
       <zn-icon class="only-dark" src="dark_mode"></zn-icon>
     </zn-button>
@@ -88,11 +88,11 @@
   </header>
 
   <div class="sidebar-buttons">
-    <zn-button size="small" class="repo-button repo-button--github" href="https://github.com/kubex/zinc"
+    <zn-button class="repo-button repo-button--github" href="https://github.com/kubex/zinc"
                target="_blank" icon="folder_open" color="secondary">
       Code
     </zn-button>
-    <zn-button size="small" class="repo-button repo-button--star" color="secondary"
+    <zn-button class="repo-button repo-button--star" color="secondary"
                href="https://github.com/kubex/zinc/stargazers" target="_blank" icon="star">
       Star
     </zn-button>
@@ -101,7 +101,6 @@
   <zn-button icon="search"
              class="search-box"
              color="transparent"
-             size="small"
              type="button"
              title="Press / to search"
              aria-label="Search"

package/docs/assets/styles/docs.css

@@ -225,23 +225,23 @@ kbd {
 }
 
 ins {
-  background-color: var(--zn-color-green-200);
-  color: var(--zn-color-green-900);
+  background-color: rgb(var(--zn-green));
+  color: rgb(var(--zn-green));
   border-radius: var(--docs-border-radius);
   text-decoration: none;
   padding: 0.125em 0.25em;
 }
 
 s {
-  background-color: var(--zn-color-red-200);
-  color: var(--zn-color-red-900);
+  background-color: rgb(var(--zn-red));
+  color: rgb(var(--zn-red));
   border-radius: var(--docs-border-radius);
   text-decoration: none;
   padding: 0.125em 0.25em;
 }
 
 mark {
-  background-color: var(--zn-color-yellow-200);
+  background-color: rgb(var(--zn-yellow));
   border-radius: var(--docs-border-radius);
   padding: 0.125em 0.25em;
 }
@@ -436,12 +436,12 @@ pre .token.property,
 pre .token.keyword,
 pre .token.tag,
 pre .token.url {
-  color: var(--zn-color-blue-700);
+  color: rgb(var(--zn-blue));
 }
 
 pre .token.symbol,
 pre .token.deleted {
-  color: var(--zn-color-red-700);
+  color: rgb(var(--zn-red));
 }
 
 pre .token.boolean,
@@ -452,24 +452,24 @@ pre .token.string,
 pre .token.char,
 pre .token.builtin,
 pre .token.inserted {
-  color: var(--zn-color-emerald-700);
+  color: rgb(var(--zn-green));
 }
 
 pre .token.atrule,
 pre .token.attr-value,
 pre .token.number,
 pre .token.variable {
-  color: var(--zn-color-violet-700);
+  color: rgb(var(--zn-violet));
 }
 
 pre .token.function,
 pre .token.class-name,
 pre .token.regex {
-  color: var(--zn-color-orange-700);
+  color: rgb(var(--zn-orange));
 }
 
 pre .token.important {
-  color: var(--zn-color-red-700);
+  color: rgb(var(--zn-red));
 }
 
 pre .token.important,
@@ -1143,11 +1143,11 @@ html.sidebar-open #menu-toggle {
 }
 
 .repo-button--star zn-icon {
-  color: var(--zn-color-yellow-500);
+  color: rgb(var(--zn-yellow));
 }
 
 .repo-button--twitter zn-icon {
-  color: var(--zn-color-sky-500);
+  color: rgb(var(--zn-blue));
 }
 
 @media screen and (max-width: 400px) {

package/docs/pages/components/absolute-container.md

@@ -11,7 +11,7 @@ layout: component
   <div style="display: flex; flex-direction: column; position: relative;">
     This is content on the outside
     <zn-absolute-container>
-      <div style="background-color: var(--zn-color-amber-100); height: 400px; width: 100%; position: absolute;">
+      <div style="background-color: rgb(var(--zn-yellow)); height: 400px; width: 100%; position: absolute;">
         This is the content of the absoloute
       </div>
     </zn-absolute-container>
@@ -27,7 +27,7 @@ The absolute container is used to wrap absolute elements, that would otherwise c
 
 <div style="display: flex; position: relative;">
   <zn-absolute-container>
-    <div style="background-color: var(--zn-color-amber-100); height: 400px; width: 100%; position: absolute;">
+    <div style="background-color: rgb(var(--zn-yellow)); height: 400px; width: 100%; position: absolute;">
       This is the content of the absoloute
     </div>
   </zn-absolute-container>

package/docs/pages/components/alert.md

@@ -76,14 +76,14 @@ 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-button slot="actions" color="info">Update Now</zn-button>
+  <zn-button slot="actions" color="transparent">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-button slot="actions" color="error">Delete</zn-button>
+  <zn-button slot="actions" color="secondary">Cancel</zn-button>
 </zn-alert>
 ```
 
@@ -126,7 +126,7 @@ Alerts can contain rich HTML content including lists, links, and formatted text.
     <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-button slot="actions" color="info">Continue</zn-button>
 </zn-alert>
 ```
 

package/docs/pages/components/audio-select.md

@@ -174,10 +174,10 @@ Control the audio select programmatically by setting the `value` property or man
 </zn-audio-select>
 
 <div style="margin-top: 1rem; display: flex; gap: 0.5rem; flex-wrap: wrap;">
-  <zn-button id="select-first" size="small">Select First</zn-button>
-  <zn-button id="select-second" size="small">Select Second</zn-button>
-  <zn-button id="clear-selection" size="small">Clear</zn-button>
-  <zn-button id="add-file" size="small">Add File</zn-button>
+  <zn-button id="select-first">Select First</zn-button>
+  <zn-button id="select-second">Select Second</zn-button>
+  <zn-button id="clear-selection">Clear</zn-button>
+  <zn-button id="add-file">Add File</zn-button>
 </div>
 
 <script type="module">

package/docs/pages/components/button-group.md

@@ -111,7 +111,7 @@ Combine `gap` and `grow` attributes to create evenly-spaced, full-width button g
 
 ### Button Variants
 
-Button groups work with all button variants including colors, sizes, and styles.
+Button groups work with all button variants including colors and styles.
 
 ```html:preview
 <zn-button-group>
@@ -139,36 +139,6 @@ Button groups work with all button variants including colors, sizes, and styles.
 </zn-button-group>
 ```
 
-### Button Sizes
-
-Button groups respect the size of their contained buttons.
-
-```html:preview
-<zn-button-group>
-  <zn-button size="small">Small 1</zn-button>
-  <zn-button size="small">Small 2</zn-button>
-  <zn-button size="small">Small 3</zn-button>
-</zn-button-group>
-
-<br />
-<br />
-
-<zn-button-group>
-  <zn-button size="medium">Medium 1</zn-button>
-  <zn-button size="medium">Medium 2</zn-button>
-  <zn-button size="medium">Medium 3</zn-button>
-</zn-button-group>
-
-<br />
-<br />
-
-<zn-button-group>
-  <zn-button size="large">Large 1</zn-button>
-  <zn-button size="large">Large 2</zn-button>
-  <zn-button size="large">Large 3</zn-button>
-</zn-button-group>
-```
-
 ### With Icons
 
 Button groups work seamlessly with icon buttons.

package/docs/pages/components/button.md

@@ -64,18 +64,6 @@ Use the `color` attribute to set the button's color.
 <zn-button color="transparent">Transparent</zn-button>
 ```
 
-### Sizes
-
-Use the `size` attribute to set the button's size.
-
-```html:preview
-<zn-button size="content">Content</zn-button>
-<zn-button size="x-small">X Small</zn-button>
-<zn-button size="small">Small</zn-button>
-<zn-button size="medium">Medium</zn-button>
-<zn-button size="large">Large</zn-button>
-```
-
 ### Outline
 
 Use the `outline` attribute to set the button's outline.
@@ -129,6 +117,19 @@ Buttons can be used with just an icon and no text by omitting the button label.
 <zn-button icon="add" color="info"></zn-button>
 ```
 
+### Icon Button Style
+
+Use `icon-button` to make only the nested icon appear clickable. The hover color defaults to `--zn-primary`; use `color` and `hover-color` to customize the icon colors.
+
+```html:preview
+<zn-button icon-button icon="settings"></zn-button>
+<zn-button icon-button icon="favorite" color="error"></zn-button>
+<zn-button icon-button icon="share" color="#64748b" hover-color="#0f172a"></zn-button>
+<zn-button icon-button color="success" hover-color="warning">
+  <zn-icon src="add" size="16"></zn-icon>
+</zn-button>
+```
+
 ### Icon Position
 
 Use the `icon-position` attribute to control whether the icon appears before or after the button text.

package/docs/pages/components/checkbox.md

@@ -457,10 +457,10 @@ Checkboxes provide several methods for programmatic control:
 <div>
   <zn-checkbox id="method-checkbox">Programmatic control</zn-checkbox>
   <br /><br />
-  <zn-button id="click-btn" size="small">Click Checkbox</zn-button>
-  <zn-button id="focus-btn" size="small" color="info">Focus Checkbox</zn-button>
-  <zn-button id="blur-btn" size="small" color="secondary">Blur Checkbox</zn-button>
-  <zn-button id="validate-btn" size="small" color="warning">Check Validity</zn-button>
+  <zn-button id="click-btn">Click Checkbox</zn-button>
+  <zn-button id="focus-btn" color="info">Focus Checkbox</zn-button>
+  <zn-button id="blur-btn" color="secondary">Blur Checkbox</zn-button>
+  <zn-button id="validate-btn" color="warning">Check Validity</zn-button>
 </div>
 
 <script type="module">

package/docs/pages/components/chip.md

@@ -111,15 +111,15 @@ Chips can include an action button, typically used for removing or closing the c
 ```html:preview
 <zn-chip icon="tag" type="info">
   Removable Tag
-  <zn-button icon="close" slot="action" size="content" icon-size="12" color="transparent"></zn-button>
+  <zn-button icon="close" slot="action" icon-size="12" color="transparent"></zn-button>
 </zn-chip>
 <zn-chip icon="label" type="success">
   Another Tag
-  <zn-button icon="close" slot="action" size="content" icon-size="12" color="transparent"></zn-button>
+  <zn-button icon="close" slot="action" icon-size="12" color="transparent"></zn-button>
 </zn-chip>
 <zn-chip icon="bookmark" type="warning">
   Bookmark
-  <zn-button icon="close" slot="action" size="content" icon-size="12" color="transparent"></zn-button>
+  <zn-button icon="close" slot="action" icon-size="12" color="transparent"></zn-button>
 </zn-chip>
 ```
 
@@ -130,11 +130,11 @@ The `action` slot can be used for any interactive element, not just close button
 ```html:preview
 <zn-chip icon="notifications" type="primary">
   Notifications
-  <zn-button icon="settings" slot="action" size="content" icon-size="14" color="transparent"></zn-button>
+  <zn-button icon="settings" slot="action" icon-size="14" color="transparent"></zn-button>
 </zn-chip>
 <zn-chip icon="download" type="info">
   Download
-  <zn-button icon="arrow_drop_down" slot="action" size="content" icon-size="16" color="transparent"></zn-button>
+  <zn-button icon="arrow_drop_down" slot="action" icon-size="16" color="transparent"></zn-button>
 </zn-chip>
 ```
 
@@ -189,19 +189,19 @@ Chips work well when grouped together to represent multiple tags or categories.
 <div style="display: flex; gap: 8px; flex-wrap: wrap;">
   <zn-chip icon="tag" type="info">
     Frontend
-    <zn-button icon="close" slot="action" size="content" icon-size="12" color="transparent"></zn-button>
+    <zn-button icon="close" slot="action" icon-size="12" color="transparent"></zn-button>
   </zn-chip>
   <zn-chip icon="tag" type="info">
     Backend
-    <zn-button icon="close" slot="action" size="content" icon-size="12" color="transparent"></zn-button>
+    <zn-button icon="close" slot="action" icon-size="12" color="transparent"></zn-button>
   </zn-chip>
   <zn-chip icon="tag" type="info">
     Database
-    <zn-button icon="close" slot="action" size="content" icon-size="12" color="transparent"></zn-button>
+    <zn-button icon="close" slot="action" icon-size="12" color="transparent"></zn-button>
   </zn-chip>
   <zn-chip icon="tag" type="info">
     DevOps
-    <zn-button icon="close" slot="action" size="content" icon-size="12" color="transparent"></zn-button>
+    <zn-button icon="close" slot="action" icon-size="12" color="transparent"></zn-button>
   </zn-chip>
 </div>
 ```
@@ -231,7 +231,7 @@ Chips can be used to display user information or assignments.
   <zn-chip icon="person" type="primary">Bob Johnson</zn-chip>
   <zn-chip icon="person" type="primary">
     Alice Williams
-    <zn-button icon="close" slot="action" size="content" icon-size="12" color="transparent"></zn-button>
+    <zn-button icon="close" slot="action" icon-size="12" color="transparent"></zn-button>
   </zn-chip>
 </div>
 ```
@@ -244,19 +244,19 @@ Here's a complete example demonstrating removable chips with JavaScript interact
 <div id="chip-container" style="display: flex; gap: 8px; flex-wrap: wrap;">
   <zn-chip icon="tag" type="info">
     Design
-    <zn-button icon="close" slot="action" size="content" icon-size="12" color="transparent"></zn-button>
+    <zn-button icon="close" slot="action" icon-size="12" color="transparent"></zn-button>
   </zn-chip>
   <zn-chip icon="tag" type="info">
     Development
-    <zn-button icon="close" slot="action" size="content" icon-size="12" color="transparent"></zn-button>
+    <zn-button icon="close" slot="action" icon-size="12" color="transparent"></zn-button>
   </zn-chip>
   <zn-chip icon="tag" type="info">
     Testing
-    <zn-button icon="close" slot="action" size="content" icon-size="12" color="transparent"></zn-button>
+    <zn-button icon="close" slot="action" icon-size="12" color="transparent"></zn-button>
   </zn-chip>
   <zn-chip icon="tag" type="info">
     Documentation
-    <zn-button icon="close" slot="action" size="content" icon-size="12" color="transparent"></zn-button>
+    <zn-button icon="close" slot="action" icon-size="12" color="transparent"></zn-button>
   </zn-chip>
 </div>
 

package/docs/pages/components/data-table.md

@@ -169,7 +169,7 @@ By default, rows can be selected by clicking. Selected rows are tracked and can
     {"key":"status","label":"Status"}
   ]'>
 
-  <zn-button slot="delete-action" color="error" icon="delete" size="x-small">
+  <zn-button slot="delete-action" color="error" icon="delete">
     Delete Selected
   </zn-button>
 
@@ -208,15 +208,15 @@ Add action buttons to the table header for performing operations on selected row
     {"key":"status","label":"Status"}
   ]'>
 
-  <zn-button slot="delete-action" color="error" icon="delete" size="x-small">
+  <zn-button slot="delete-action" color="error" icon="delete">
     Delete Selected
   </zn-button>
 
-  <zn-button slot="modify-action" color="info" icon="edit" size="x-small">
+  <zn-button slot="modify-action" color="info" icon="edit">
     Edit Selected
   </zn-button>
 
-  <zn-button slot="create-action" color="success" icon="add" size="x-small">
+  <zn-button slot="create-action" color="success" icon="add">
     Create New
   </zn-button>
 

package/docs/pages/components/datepicker.md

@@ -357,11 +357,11 @@ You can control the datepicker programmatically using its methods:
   <zn-datepicker id="programmatic-datepicker" label="Programmatic control"></zn-datepicker>
 
   <div style="margin-top: 1rem; display: flex; gap: 0.5rem; flex-wrap: wrap;">
-    <zn-button id="focus-btn" size="small">Focus</zn-button>
-    <zn-button id="blur-btn" size="small">Blur</zn-button>
-    <zn-button id="set-value-btn" size="small">Set Value</zn-button>
-    <zn-button id="clear-value-btn" size="small">Clear Value</zn-button>
-    <zn-button id="check-validity-btn" size="small">Check Validity</zn-button>
+    <zn-button id="focus-btn">Focus</zn-button>
+    <zn-button id="blur-btn">Blur</zn-button>
+    <zn-button id="set-value-btn">Set Value</zn-button>
+    <zn-button id="clear-value-btn">Clear Value</zn-button>
+    <zn-button id="check-validity-btn">Check Validity</zn-button>
   </div>
 </div>
 

package/docs/pages/components/dialog.md

@@ -195,8 +195,8 @@ Use the `header-actions` slot to add buttons or other interactive elements to th
 ```html:preview
 <zn-button id="dialog-header-actions-trigger">Open Dialog</zn-button>
 <zn-dialog trigger="dialog-header-actions-trigger" label="Document Settings">
-  <zn-button icon="refresh" color="transparent" size="content" slot="header-actions"></zn-button>
-  <zn-button icon="settings" color="transparent" size="content" slot="header-actions"></zn-button>
+  <zn-button icon="refresh" color="transparent" slot="header-actions"></zn-button>
+  <zn-button icon="settings" color="transparent" slot="header-actions"></zn-button>
 
   <p>This dialog has action buttons in the header for quick access to common functions.</p>
 

package/docs/pages/components/file.md

@@ -49,10 +49,10 @@ Add the `clearable` attribute to display a close button next to each selected fi
 
 ### Droparea Mode
 
-Use the `droparea` attribute to render the file control as a large drag-and-drop area. This mode is ideal when file upload is a primary action on the page.
+Use the `droparea` attribute to render the file control as a bordered upload area with a centered upload button. When a file is selected, the area displays an image preview (for image files) or the file name (for non-previewable files), along with a clear button in the top-right corner. The area also accepts files via drag-and-drop.
 
 ```html:preview
-<zn-file label="Upload Files" droparea multiple></zn-file>
+<zn-file label="Upload Files" droparea></zn-file>
 ```
 
 ### Accepted File Types
@@ -78,20 +78,92 @@ See [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Attrib
 
 ### Droparea with Accepted Types
 
-Combine `droparea` and `accept` for a prominent upload area with file type restrictions.
+Combine `droparea` and `accept` for a prominent upload area with file type restrictions. Selected image files render a preview inside the box.
 
 ```html:preview
-<zn-file label="Upload Images" accept="image/*" multiple droparea></zn-file>
+<zn-file label="Upload Image" accept="image/*" droparea></zn-file>
 ```
 
-### Custom Droparea Icon
+### Droparea with Image Preview
 
-Use the `droparea-icon` slot to customize the icon displayed in the droparea.
+When an image file is selected, the droparea renders a centered thumbnail preview alongside a clear button in the top-right. The example below pre-loads a sample image so you can see the preview state.
 
 ```html:preview
-<zn-file label="Upload Photos" droparea multiple>
-  <zn-icon src="photo_library" slot="droparea-icon"></zn-icon>
-</zn-file>
+<zn-file class="file-with-preview" label="Primary Logo" accept="image/*" droparea></zn-file>
+
+<script type="module">
+  const fileInput = document.querySelector('.file-with-preview');
+
+  await customElements.whenDefined('zn-file');
+  await fileInput.updateComplete;
+
+  // Inline SVG sample so the demo works offline. Explicit width/height keep older
+  // browsers happy that don't size SVGs from viewBox alone inside <img>.
+  const sampleSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
+    <defs>
+      <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+        <stop offset="0%" stop-color="#3b82f6"/>
+        <stop offset="100%" stop-color="#7c3aed"/>
+      </linearGradient>
+    </defs>
+    <rect width="200" height="200" rx="24" fill="url(#g)"/>
+    <circle cx="100" cy="100" r="50" fill="none" stroke="#000" stroke-width="10"/>
+  </svg>`;
+
+  const file = new File([sampleSvg], 'sample-logo.svg', { type: 'image/svg+xml' });
+  const dt = new DataTransfer();
+  dt.items.add(file);
+  fileInput.files = dt.files;
+</script>
+```
+
+### Droparea with Non-Previewable File
+
+When the selected file is not an image, the droparea displays the file name centered inside the box.
+
+```html:preview
+<zn-file class="file-with-doc" label="Upload Document" accept=".pdf,.doc,.docx" droparea></zn-file>
+
+<script type="module">
+  const fileInput = document.querySelector('.file-with-doc');
+
+  await customElements.whenDefined('zn-file');
+  await fileInput.updateComplete;
+
+  const file = new File(['%PDF-1.4 sample'], 'project-brief.pdf', { type: 'application/pdf' });
+  const dt = new DataTransfer();
+  dt.items.add(file);
+  fileInput.files = dt.files;
+</script>
+```
+
+### Displaying an Already-Uploaded File (CDN URL)
+
+Use the `src` attribute to point the file control at an already-uploaded file — for example, a logo hosted on a CDN. The droparea renders the image preview when `src` points to an image, or the URL as a filename otherwise. Add the `show-link` attribute to render the current link as a clickable URL beneath the control. Read `fileInput.previewSrc` to retrieve the current link programmatically (whether from a local selection or the `src` attribute).
+
+```html:preview
+<zn-file
+  class="file-with-cdn"
+  label="Primary Logo"
+  droparea
+  show-link
+  src="https://upload.wikimedia.org/wikipedia/commons/1/1b/ViaDeTogniPalazzoStelline.jpg"
+></zn-file>
+```
+
+:::tip
+When the user picks a local file, `previewSrc` switches to the in-memory object URL for that file (and `show-link` renders that blob URL). After clearing (the X button + confirm dialog), `previewSrc` returns to whatever `src` is currently set to.
+:::
+
+### Auto-Submit on Change
+
+Add the `trigger-submit` attribute to automatically submit the surrounding form whenever the user picks, drops, or clears a file. This is useful for forms that only contain the file control and a CSRF token — no explicit submit button needed.
+
+```html
+<form action="/logo/upload" method="post" enctype="multipart/form-data">
+  <input type="hidden" name="_token" value="{{ csrf_token }}">
+  <zn-file name="logo" droparea trigger-submit accept="image/*"></zn-file>
+</form>
 ```
 
 ### Directory Upload

package/docs/pages/components/header.md

@@ -9,7 +9,6 @@ layout: component
 
 <div style="background-color: #f5f5f5; padding: 20px;">
   <zn-header caption="John Jones"
-             description="This is the Description of the header"
              previous-path="#"
              navigation="[{&quot;path&quot;:&quot;#&quot;,&quot;title&quot;:&quot;Dashboard&quot;},{&quot;path&quot;:&quot;#&quot;,&quot;title&quot;:&quot;Another&quot;}]">
     <zn-icon round src="test1@example.com" size="36"></zn-icon>
@@ -47,14 +46,14 @@ The breadcrumb slot renders inline with the page title — each slotted link is
 
 ```html:preview
 <div style="background-color: #f5f5f5; padding: 20px;">
-  <zn-header caption="John Jones" description="This is the description of the header"></zn-header>
+  <zn-header caption="John Jones"></zn-header>
 </div>
 ```
 ### Simple Header with Icon
 
 ```html:preview
 <div style="background-color: #f5f5f5; padding: 20px;">
-  <zn-header icon="person" caption="John Jones" description="This is the description of the header"></zn-header>
+  <zn-header icon="person" caption="John Jones"></zn-header>
 </div>
 ```
 
@@ -63,7 +62,7 @@ The breadcrumb slot renders inline with the page title — each slotted link is
 
 ```html:preview
 <div style="background-color: #f5f5f5; padding: 20px;">
-  <zn-header caption="John Jones" description="This is the description of the header">
+  <zn-header caption="John Jones">
   <zn-button-menu slot="actions">
     <zn-button primary>Something sdf</zn-button>
     <zn-button >sd</zn-button>
@@ -85,7 +84,7 @@ The breadcrumb slot renders inline with the page title — each slotted link is
 
 ```html:preview
 <div style="background-color: #f5f5f5; padding: 20px;">
-  <zn-header caption="John Jones" description="This is the description of the header">
+  <zn-header caption="John Jones">
   <zn-button-menu slot="actions">
     <zn-button primary>Something sdf</zn-button>
     <zn-button >sd</zn-button>
@@ -120,4 +119,3 @@ The breadcrumb slot renders inline with the page title — each slotted link is
 </div>
 ```
 
-

package/docs/pages/components/hover-container.md

@@ -201,7 +201,7 @@ Provide contextual help for form fields.
   <div style="display: flex; align-items: center; gap: 5px;">
     <zn-input label="API Key" placeholder="Enter your API key"></zn-input>
     <zn-hover-container trigger="click" placement="right">
-      <zn-button slot="anchor" icon="info" color="transparent" size="small"></zn-button>
+      <zn-button slot="anchor" icon="info" color="transparent"></zn-button>
       <div slot="content" style="max-width: 250px; padding: 10px;">
         <h4 style="margin: 0 0 5px 0;">Finding your API Key</h4>
         <p style="margin: 0; font-size: 0.9em;">Go to Settings &gt; Developer &gt; API Keys to generate a new key.</p>

package/docs/pages/components/icon.md

@@ -183,6 +183,20 @@ Using shorthand notation:
 <zn-icon src="star@line" size="32"></zn-icon>
 ```
 
+### Lucide Icons
+
+Lucide icons are rendered as inline SVGs. Use `library="lucide"` or the `@lucide` and `@lu` shorthand.
+
+<a href="https://lucide.dev/icons" target="_blank">View Lucide Icons</a>
+
+```html:preview
+<zn-icon src="house" library="lucide" size="32"></zn-icon>
+<zn-icon src="cloud-upload" library="lucide" size="32"></zn-icon>
+<zn-icon src="badge-check" library="lucide" size="32"></zn-icon>
+<zn-icon src="settings-2@lucide" size="32"></zn-icon>
+<zn-icon src="circle-alert@lu" size="32" color="warning"></zn-icon>
+```
+
 ### Brand Icons
 
 Display brand logos and custom company icons using the brands library.

package/docs/pages/components/inline-edit.md

@@ -796,10 +796,10 @@ You can control the inline edit component programmatically using its methods:
   </zn-inline-edit>
 
   <div style="margin-top: 1rem; display: flex; gap: 0.5rem; flex-wrap: wrap;">
-    <zn-button id="check-validity-btn" size="small">Check Validity</zn-button>
-    <zn-button id="set-value-btn" size="small">Set Value</zn-button>
-    <zn-button id="focus-btn" size="small">Focus</zn-button>
-    <zn-button id="get-value-btn" size="small">Get Value</zn-button>
+    <zn-button id="check-validity-btn">Check Validity</zn-button>
+    <zn-button id="set-value-btn">Set Value</zn-button>
+    <zn-button id="focus-btn">Focus</zn-button>
+    <zn-button id="get-value-btn">Get Value</zn-button>
   </div>
 </div>