@kubex/zinc 1.0.25 → 1.0.99

package/docs/pages/components/cols.md

@@ -1,7 +1,7 @@
 ---
 meta:
   title: Cols
-  description:
+  description: A flexible column layout component that distributes children across multiple columns with configurable layouts, gaps, borders, and padding options.
 layout: component
 ---
 
@@ -18,48 +18,170 @@ layout: component
 
 ## Examples
 
-### First Example
+### Equal Column Layout
+
+Create equal-width columns by using a layout pattern like "1,1" or "1,1,1".
+
+```html:preview
+<zn-cols layout="1,1">
+  <zn-panel>Column 1</zn-panel>
+  <zn-panel>Column 2</zn-panel>
+</zn-cols>
+```
+
+### Three Equal Columns
+
+```html:preview
+<zn-cols layout="1,1,1">
+  <zn-panel>Column 1</zn-panel>
+  <zn-panel>Column 2</zn-panel>
+  <zn-panel>Column 3</zn-panel>
+</zn-cols>
+```
+
+### Asymmetric Layout
+
+Use different numbers in the layout to create columns of different widths. The pattern "2,1" creates a layout where the first column is twice as wide as the second.
+
+```html:preview
+<zn-cols layout="2,1">
+  <zn-panel>Wide Column (2 units)</zn-panel>
+  <zn-panel>Narrow Column (1 unit)</zn-panel>
+</zn-cols>
+```
+
+### Three Column Asymmetric
 
 ```html:preview
+<zn-cols layout="3,2,1">
+  <zn-panel>Widest Column (3 units)</zn-panel>
+  <zn-panel>Medium Column (2 units)</zn-panel>
+  <zn-panel>Narrowest Column (1 unit)</zn-panel>
+</zn-cols>
+```
+
+### Repeating Pattern
+
+The layout pattern repeats for additional children. With "2,1", items cycle through the pattern.
+
+```html:preview
+<zn-cols layout="2,1">
+  <zn-panel>1 (2 units)</zn-panel>
+  <zn-panel>2 (1 unit)</zn-panel>
+  <zn-panel>3 (2 units)</zn-panel>
+  <zn-panel>4 (1 unit)</zn-panel>
+  <zn-panel>5 (2 units)</zn-panel>
+</zn-cols>
+```
+
+### With Borders
+
+Use the `border` attribute to add borders around columns.
 
+```html:preview
+<zn-cols layout="1,1,1" border>
+  <zn-panel>Column 1</zn-panel>
+  <zn-panel>Column 2</zn-panel>
+  <zn-panel>Column 3</zn-panel>
+</zn-cols>
+```
+
+### Without Gap
+
+Use the `no-gap` attribute to remove spacing between columns.
+
+```html:preview
+<zn-cols layout="1,1,1" no-gap border>
+  <zn-panel>No Gap</zn-panel>
+  <zn-panel>Between</zn-panel>
+  <zn-panel>Columns</zn-panel>
+</zn-cols>
+```
+
+### With Padding
+
+Use the `pad` attribute to add padding inside each column.
+
+```html:preview
+<zn-cols layout="1,1" pad border>
+  <zn-panel>Padded Column 1</zn-panel>
+  <zn-panel>Padded Column 2</zn-panel>
+</zn-cols>
+```
+
+### Horizontal Padding Only
+
+Use the `pad-x` attribute to add only horizontal padding.
+
+```html:preview
+<zn-cols layout="1,1" pad-x border>
+  <zn-panel>Horizontal Padding</zn-panel>
+  <zn-panel>Horizontal Padding</zn-panel>
+</zn-cols>
+```
+
+### Vertical Padding Only
+
+Use the `pad-y` attribute to add only vertical padding.
+
+```html:preview
+<zn-cols layout="1,1" pad-y border>
+  <zn-panel>Vertical Padding</zn-panel>
+  <zn-panel>Vertical Padding</zn-panel>
+</zn-cols>
+```
+
+### With Dividers
+
+Use the `divide` attribute to add dividers between columns.
+
+```html:preview
+<zn-cols layout="1,1,1" divide>
+  <zn-panel>Column 1</zn-panel>
+  <zn-panel>Column 2</zn-panel>
+  <zn-panel>Column 3</zn-panel>
+</zn-cols>
+```
+
+### Sticky Sidebar
+
+Create a sticky sidebar layout for scrollable content.
+
+```html:preview
 <zn-cols layout="1,1">
-  
   <div>
     <zn-panel style="position: -webkit-sticky; position: sticky; top:10px;">
-      <div class="box" style="height: 100px; margin: 10px 0; background: purple"></div>
-      <div class="box" style="height: 100px;"></div>
+      <div class="box" style="height: 100px; margin: 10px 0; background: purple">Sticky Sidebar</div>
+      <div class="box" style="height: 100px;">Navigation</div>
     </zn-panel>
   </div>
-  
-    <zn-panel>
-      <div class="box" style="height: 100px; margin: 10px 0; background: orange"></div>
-      <div class="box" style="height: 100px; background: orange"></div>
-      <div class="box" style="height: 100px; background: orange"></div>
-      <div class="box" style="height: 100px; background: orange"></div>
-      <div class="box" style="height: 100px; background: orange"></div>
-      <div class="box" style="height: 100px; background: orange"></div>
-      <div class="box" style="height: 100px; background: orange"></div>
-      <div class="box" style="height: 100px; background: orange"></div>
-      <div class="box" style="height: 100px; background: orange"></div>
-      <div class="box" style="height: 100px; background: orange"></div>
-      <div class="box" style="height: 100px; background: orange"></div>
-      <div class="box" style="height: 100px; background: orange"></div>
-      <div class="box" style="height: 100px; background: orange"></div>
-      <div class="box" style="height: 100px; background: orange"></div>
-    </zn-panel>
-  
+
+  <zn-panel>
+    <div class="box" style="height: 100px; margin: 10px 0; background: orange">Scrollable Content</div>
+    <div class="box" style="height: 100px; background: orange">Item 1</div>
+    <div class="box" style="height: 100px; background: orange">Item 2</div>
+    <div class="box" style="height: 100px; background: orange">Item 3</div>
+    <div class="box" style="height: 100px; background: orange">Item 4</div>
+    <div class="box" style="height: 100px; background: orange">Item 5</div>
+    <div class="box" style="height: 100px; background: orange">Item 6</div>
+  </zn-panel>
 </zn-cols>
 ```
 
-### Second Example
+### Dashboard Layout
 
-```html:preview
+Combine multiple features for a complete dashboard layout.
 
-<zn-cols layout="1,1,1">
-  <zn-panel>1</zn-panel>
-  <zn-panel>2</zn-panel>
-  <zn-panel>3</zn-panel>
-  <zn-panel>4</zn-panel>
+```html:preview
+<zn-cols layout="2,1" border pad>
+  <zn-panel>
+    <h3>Main Content</h3>
+    <p>This is the main content area with a 2:1 ratio.</p>
+  </zn-panel>
+  <zn-panel>
+    <h3>Sidebar</h3>
+    <p>This is a narrower sidebar.</p>
+  </zn-panel>
 </zn-cols>
 ```
 

package/docs/pages/components/confirm.md

@@ -1,7 +1,7 @@
 ---
 meta:
   title: Confirm
-  description:
+  description: A confirmation dialog component that prompts users before performing critical actions. Supports various types (error, warning, success, info), custom content, form validation, and loading states.
 layout: component
 ---
 
@@ -18,7 +18,7 @@ layout: component
                     type="error"
                     caption="Do Something"
                     content="Are you sure you want to do that?">
-                    
+
                     <form class="form-spacing">
                       <zn-input label="Name" required></zn-input>
                       <zn-input label="Email" type="email" required></zn-input>
@@ -28,25 +28,191 @@ layout: component
 
 ## Examples
 
-### Announcement Confirmations
+### Confirmation Types
+
+Use different types to indicate the severity or nature of the action.
 
 ```html:preview
-<zn-button id="action-trigger">Trigger Confirm Content</zn-button>
-<zn-confirm trigger="action-trigger"
-                    variant="announcement"
-                    type="warning"
-                    caption="Changing the status of this item"
-                    content="By changing the status of this item, you will be affecting the status of all related items.">
-                    
-                    <form class="form-spacing">
-                      <zn-input label="Name" required></zn-input>
-                      <zn-input label="Email" type="email" required></zn-input>
-                    </form>
+<zn-button id="error-trigger">Error Confirmation</zn-button>
+<zn-confirm trigger="error-trigger"
+            type="error"
+            caption="Delete Item"
+            content="Are you sure you want to delete this item? This action cannot be undone.">
+</zn-confirm>
+
+<zn-button id="warning-trigger">Warning Confirmation</zn-button>
+<zn-confirm trigger="warning-trigger"
+            type="warning"
+            caption="Change Status"
+            content="Changing the status will affect related items. Continue?">
+</zn-confirm>
+
+<zn-button id="success-trigger">Success Confirmation</zn-button>
+<zn-confirm trigger="success-trigger"
+            type="success"
+            caption="Complete Task"
+            content="Mark this task as complete?">
+</zn-confirm>
+
+<zn-button id="info-trigger">Info Confirmation</zn-button>
+<zn-confirm trigger="info-trigger"
+            type="info"
+            caption="View Details"
+            content="Would you like to view the full details?">
+</zn-confirm>
+```
+
+### Custom Button Text
+
+Customize the confirm and cancel button text using the `confirm-text` and `cancel-text` attributes.
+
+```html:preview
+<zn-button id="custom-text-trigger">Delete Account</zn-button>
+<zn-confirm trigger="custom-text-trigger"
+            type="error"
+            caption="Delete Account"
+            content="This will permanently delete your account and all associated data."
+            confirm-text="Yes, Delete"
+            cancel-text="Keep Account">
+</zn-confirm>
+```
+
+### Dialog Sizes
+
+Control the dialog size with the `size` attribute.
+
+```html:preview
+<zn-button id="small-trigger">Small Dialog</zn-button>
+<zn-confirm trigger="small-trigger"
+            type="warning"
+            size="small"
+            caption="Quick Action"
+            content="This is a small confirmation dialog.">
+</zn-confirm>
+
+<zn-button id="medium-trigger">Medium Dialog</zn-button>
+<zn-confirm trigger="medium-trigger"
+            type="warning"
+            size="medium"
+            caption="Standard Action"
+            content="This is a medium-sized confirmation dialog.">
+</zn-confirm>
+
+<zn-button id="large-trigger">Large Dialog</zn-button>
+<zn-confirm trigger="large-trigger"
+            type="warning"
+            size="large"
+            caption="Complex Action"
+            content="This is a large confirmation dialog with more space for detailed information.">
+</zn-confirm>
+```
+
+### With Form Content
+
+Include form fields within the confirmation dialog for gathering additional information.
+
+```html:preview
+<zn-button id="form-trigger">Update Settings</zn-button>
+<zn-confirm trigger="form-trigger"
+            type="info"
+            caption="Update Settings"
+            content="Please provide the following information:">
+  <form class="form-spacing">
+    <zn-input label="Name" required></zn-input>
+    <zn-input label="Email" type="email" required></zn-input>
+    <zn-textarea label="Reason for change"></zn-textarea>
+  </form>
 </zn-confirm>
 ```
 
-### Second Example
+### Announcement Variant
 
-TODO
+Use the announcement variant for important notifications that require acknowledgment.
+
+```html:preview
+<zn-button id="announcement-trigger">View Announcement</zn-button>
+<zn-confirm trigger="announcement-trigger"
+            variant="announcement"
+            type="warning"
+            caption="Important System Update"
+            content="The system will undergo maintenance tonight from 10 PM to 2 AM. During this time, all services will be unavailable.">
+  <form class="form-spacing">
+    <zn-input label="Name" required></zn-input>
+    <zn-input label="Email" type="email" required></zn-input>
+  </form>
+</zn-confirm>
+```
+
+### Without Icon
+
+Hide the icon using the `hide-icon` attribute for a cleaner appearance.
+
+```html:preview
+<zn-button id="no-icon-trigger">Simple Confirm</zn-button>
+<zn-confirm trigger="no-icon-trigger"
+            type="info"
+            caption="Continue?"
+            content="Do you want to proceed with this action?"
+            hide-icon>
+</zn-confirm>
+```
+
+### With Loading State
+
+Use the `show-loading` attribute to display a loading state after confirmation.
+
+```html:preview
+<zn-button id="loading-trigger">Submit Data</zn-button>
+<zn-confirm trigger="loading-trigger"
+            type="success"
+            caption="Submit Data"
+            content="Ready to submit your data?"
+            show-loading>
+</zn-confirm>
+```
+
+### With Footer Text
+
+Add additional information in the footer using the `footer-text` attribute or slot.
+
+```html:preview
+<zn-button id="footer-trigger">Delete Files</zn-button>
+<zn-confirm trigger="footer-trigger"
+            type="error"
+            caption="Delete Files"
+            content="This will delete all selected files permanently."
+            footer-text="This action cannot be undone and files cannot be recovered.">
+</zn-confirm>
+```
+
+### Multiple Triggers
+
+Use the same trigger ID on multiple buttons to open the same confirmation dialog.
+
+```html:preview
+<zn-button id="multi-trigger">Delete from List</zn-button>
+<zn-button id="multi-trigger" color="error">Delete from Table</zn-button>
+<zn-button id="multi-trigger" color="transparent">Delete from Grid</zn-button>
+
+<zn-confirm trigger="multi-trigger"
+            type="error"
+            caption="Delete Item"
+            content="Are you sure you want to delete this item?">
+</zn-confirm>
+```
+
+### Form with Action
+
+Specify a form action URL that will be submitted when confirmed.
+
+```html:preview
+<zn-button id="action-trigger-form">Submit to Server</zn-button>
+<zn-confirm trigger="action-trigger-form"
+            type="success"
+            caption="Submit Form"
+            content="Ready to submit?"
+            action="/api/submit">
+</zn-confirm>
+```
 
 

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

@@ -1,22 +1,185 @@
 ---
 meta:
   title: Copy Button
-  description:
+  description: Copy buttons provide a simple way to copy text to the clipboard with visual feedback.
 layout: component
 ---
 
 ```html:preview
-<zn-copy-button></zn-copy-button>
+<zn-copy-button value="Hello, World!"></zn-copy-button>
 ```
 
 ## Examples
 
-### First Example
+### Copying a Value
 
-TODO
+Use the `value` attribute to specify the text that should be copied to the clipboard.
 
-### Second Example
+```html:preview
+<zn-copy-button value="This text will be copied"></zn-copy-button>
+<zn-copy-button value="support@example.com"></zn-copy-button>
+<zn-copy-button value="npm install @kubex/zinc"></zn-copy-button>
+```
+
+### Copying from Elements
+
+Use the `from` attribute to copy content from another element by its ID. By default, it copies the element's `textContent`.
+
+```html:preview
+<div id="content-to-copy">This is some text that can be copied.</div>
+<zn-copy-button from="content-to-copy"></zn-copy-button>
+
+<br /><br />
+
+<input id="email-input" type="email" value="user@example.com" />
+<zn-copy-button from="email-input.value"></zn-copy-button>
+```
+
+### Copying Element Attributes
+
+Append the attribute name in square brackets to copy a specific attribute value.
+
+```html:preview
+<a id="my-link" href="https://example.com">Example Link</a>
+<zn-copy-button from="my-link[href]"></zn-copy-button>
+
+<br /><br />
+
+<img id="my-image" src="https://via.placeholder.com/150" alt="Placeholder" />
+<zn-copy-button from="my-image[src]"></zn-copy-button>
+```
+
+### Copying Element Properties
+
+Append a dot and the property name to copy a specific property value from an element.
+
+```html:preview
+<input id="username" type="text" value="john.doe" />
+<zn-copy-button from="username.value"></zn-copy-button>
+
+<br /><br />
+
+<textarea id="bio">Software developer passionate about web components.</textarea>
+<zn-copy-button from="bio.value"></zn-copy-button>
+```
+
+### Custom Copy Label
+
+Use the `copy-label` attribute to customize the tooltip text shown before copying.
+
+```html:preview
+<zn-copy-button value="Copy me!" copy-label="Click to copy"></zn-copy-button>
+<zn-copy-button value="API Key: abc123xyz" copy-label="Copy API Key"></zn-copy-button>
+<zn-copy-button value="https://example.com" copy-label="Copy URL"></zn-copy-button>
+```
+
+### Custom Icon
+
+Use the `src` attribute to change the copy icon.
+
+```html:preview
+<zn-copy-button value="Custom icon button" src="content_paste"></zn-copy-button>
+<zn-copy-button value="Another icon" src="file_copy"></zn-copy-button>
+```
 
-TODO
+### Icon Size
 
+Use the `size` attribute to control the icon size.
+
+```html:preview
+<zn-copy-button value="Small icon" size="16"></zn-copy-button>
+<zn-copy-button value="Default size" size="24"></zn-copy-button>
+<zn-copy-button value="Large icon" size="32"></zn-copy-button>
+<zn-copy-button value="Extra large" size="48"></zn-copy-button>
+```
+
+### Custom Icons with Slots
+
+You can provide custom icons for the copy, success, and error states using slots.
+
+```html:preview
+<zn-copy-button value="Custom icons">
+  <zn-icon slot="copy-icon" src="content_copy" size="24"></zn-icon>
+  <zn-icon slot="success-icon" src="check_circle" size="24"></zn-icon>
+  <zn-icon slot="error-icon" src="error" size="24"></zn-icon>
+</zn-copy-button>
+```
+
+### Status Feedback
+
+The copy button provides automatic visual feedback when the copy operation succeeds or fails. Click the button to see the status change.
+
+```html:preview
+<zn-copy-button value="Click to see success feedback"></zn-copy-button>
+
+<br /><br />
+
+<!-- This will show error feedback since the element doesn't exist -->
+<zn-copy-button from="non-existent-element"></zn-copy-button>
+```
+
+### Listening to Events
+
+The copy button emits `zn-copy` events when text is successfully copied and `zn-error` events when the copy operation fails.
+
+```html:preview
+<zn-copy-button
+  id="event-demo"
+  value="Copy me to see the event"
+  copy-label="Copy text">
+</zn-copy-button>
+
+<div id="event-log"></div>
+
+<script type="module">
+  const copyButton = document.getElementById('event-demo');
+  const eventLog = document.getElementById('event-log');
+
+  copyButton.addEventListener('zn-copy', (event) => {
+    eventLog.innerHTML = `<zn-alert caption="Copy Success" level="success" icon="check">
+      Copied: "${event.detail.value}"
+    </zn-alert>`;
+  });
+
+  copyButton.addEventListener('zn-error', () => {
+    eventLog.innerHTML = `<zn-alert caption="Copy Error" level="error" icon="error">
+      Failed to copy to clipboard
+    </zn-alert>`;
+  });
+</script>
+```
+
+### Real-world Examples
+
+Here are some practical use cases for copy buttons.
+
+```html:preview
+<!-- Code snippet with copy button -->
+<div style="display: flex; align-items: start; gap: 8px;">
+  <pre id="code-snippet" style="background: #f5f5f5; padding: 12px; border-radius: 4px; margin: 0; flex: 1;">npm install @kubex/zinc
+import { ZnButton } from '@kubex/zinc';</pre>
+  <zn-copy-button from="code-snippet" copy-label="Copy code"></zn-copy-button>
+</div>
+
+<br /><br />
+
+<!-- API Key display with copy button -->
+<div style="display: flex; align-items: center; gap: 8px;">
+  <span style="font-family: monospace; background: #f5f5f5; padding: 8px; border-radius: 4px;">sk_live_abc123xyz789</span>
+  <zn-copy-button value="sk_live_abc123xyz789" copy-label="Copy API Key"></zn-copy-button>
+</div>
+
+<br /><br />
+
+<!-- URL with copy button -->
+<div style="display: flex; align-items: center; gap: 8px;">
+  <input
+    id="share-url"
+    type="text"
+    value="https://example.com/share/abc123"
+    readonly
+    style="flex: 1; padding: 8px; border: 1px solid #ddd; border-radius: 4px;" />
+  <zn-copy-button from="share-url.value" copy-label="Copy share link"></zn-copy-button>
+</div>
+```