@kubex/zinc 1.0.115 → 1.0.117

package/docs/pages/components/item.md

@@ -100,8 +100,8 @@ Example of multiple actions in a description item.
   <div><strong>Postal Code</strong> Example here </div>
   <div><strong>Country</strong> Example here </div>
   
-  <zn-button id="address-modal" slot="actions" size="x-small" color="secondary" modal>Edit</zn-button>
-  <zn-button id="address-modal" slot="actions" size="x-small" color="secondary" modal>Edit</zn-button>
+  <zn-button id="address-modal" slot="actions" color="secondary" modal>Edit</zn-button>
+  <zn-button id="address-modal" slot="actions" color="secondary" modal>Edit</zn-button>
   
 </zn-item>
 ```

package/docs/pages/components/menu.md

@@ -510,8 +510,8 @@ You can programmatically control menu items using their methods.
 </zn-menu>
 
 <div style="margin-top: 1rem;">
-  <zn-button id="focus-item2" size="small">Focus Item 2</zn-button>
-  <zn-button id="click-item3" size="small" color="info">Click Item 3</zn-button>
+  <zn-button id="focus-item2">Focus Item 2</zn-button>
+  <zn-button id="click-item3" color="info">Click Item 3</zn-button>
 </div>
 
 <div id="prog-output" style="margin-top: 1rem; padding: 1rem; background: #f5f5f5; border-radius: 4px;">

package/docs/pages/components/note.md

@@ -112,12 +112,12 @@ Use the `action` slot to add buttons or other interactive elements to the note h
 ```html:preview
 <zn-note caption="Pending Review" date="01/22/26" color="yellow">
   This document requires your approval before we can proceed with the next phase.
-  <zn-button slot="action" color="success" size="small">Approve</zn-button>
+  <zn-button slot="action" color="success">Approve</zn-button>
 </zn-note>
 <br />
 <zn-note caption="Task Assignment" date="01/23/26" color="blue">
   You've been assigned to work on the authentication module.
-  <zn-button slot="action" color="primary" size="small">View Task</zn-button>
+  <zn-button slot="action" color="primary">View Task</zn-button>
 </zn-note>
 ```
 
@@ -130,7 +130,7 @@ Use the `footer` slot to add additional information or actions at the bottom of
   Version 2.0 has been successfully released to all users. Great work team!
   <div slot="footer" style="display: flex; gap: 8px; align-items: center;">
     <small style="color: var(--zn-color-text-muted);">Posted by John Smith</small>
-    <zn-button color="transparent" size="small">View Details</zn-button>
+    <zn-button color="transparent">View Details</zn-button>
   </div>
 </zn-note>
 ```
@@ -166,8 +166,8 @@ Notes can contain rich HTML content including lists, links, code blocks, and for
   </ul>
   <p>For more information, visit our <a href="#">changelog page</a>.</p>
   <div slot="footer">
-    <zn-button color="violet" size="small">Download Update</zn-button>
-    <zn-button color="transparent" size="small">Learn More</zn-button>
+    <zn-button color="violet">Download Update</zn-button>
+    <zn-button color="transparent">Learn More</zn-button>
   </div>
 </zn-note>
 ```
@@ -179,7 +179,7 @@ Combine header actions and footer content for more complex interactions.
 ```html:preview
 <zn-note caption="Code Review Request" date="01/23/26" color="orange">
   <div slot="action">
-    <zn-button color="transparent" size="small">View Changes</zn-button>
+    <zn-button color="transparent">View Changes</zn-button>
   </div>
   <div slot="snippet">
     Pull request #247: Add user authentication feature. Click to see details...
@@ -194,9 +194,9 @@ Combine header actions and footer content for more complex interactions.
   <p><strong>Files changed:</strong> 12 files (+458, -92 lines)</p>
   <p>Please review the changes and provide feedback. The tests are passing and the code follows our style guidelines.</p>
   <div slot="footer" style="display: flex; gap: 8px;">
-    <zn-button color="success" size="small">Approve</zn-button>
-    <zn-button color="error" size="small">Request Changes</zn-button>
-    <zn-button color="transparent" size="small">Comment</zn-button>
+    <zn-button color="success">Approve</zn-button>
+    <zn-button color="error">Request Changes</zn-button>
+    <zn-button color="transparent">Comment</zn-button>
   </div>
 </zn-note>
 ```
@@ -247,8 +247,8 @@ Combine header actions and footer content for more complex interactions.
     <li>Performance enhancements for large datasets</li>
   </ul>
   <div slot="footer">
-    <zn-button color="green" size="small">Update Now</zn-button>
-    <zn-button color="transparent" size="small">View Full Changelog</zn-button>
+    <zn-button color="green">Update Now</zn-button>
+    <zn-button color="transparent">View Full Changelog</zn-button>
   </div>
 </zn-note>
 ```
@@ -258,7 +258,7 @@ Combine header actions and footer content for more complex interactions.
 ```html:preview
 <zn-note caption="System Maintenance" date="01/25/26" color="yellow">
   <div slot="action">
-    <zn-button color="transparent" size="small">Details</zn-button>
+    <zn-button color="transparent">Details</zn-button>
   </div>
   Scheduled maintenance window on Sunday, January 26 from 2:00 AM to 6:00 AM EST. Services will be temporarily unavailable during this time.
   <div slot="footer">

package/docs/pages/components/page.md

@@ -7,7 +7,7 @@ layout: component
 
 ```html:preview
 <zn-page caption="Page Title" summary="Page Summary">
-  <zn-button slot="actions" type="primary" size="small" href="/ui">UI Examples</zn-button>
+  <zn-button slot="actions" type="primary" href="/ui">UI Examples</zn-button>
 
   <zn-tab caption="Overview">
     Overview Content
@@ -33,8 +33,8 @@ Use `slot="actions"` to place controls in the page header action area.
 
 ```html:preview
 <zn-page caption="Customers" summary="Manage active customers">
-  <zn-button slot="actions" color="secondary" size="small">Export</zn-button>
-  <zn-button slot="actions" color="primary" size="small">New Customer</zn-button>
+  <zn-button slot="actions" color="secondary">Export</zn-button>
+  <zn-button slot="actions" color="primary">New Customer</zn-button>
 
   <zn-tab caption="Overview">
     Customer overview content

package/docs/pages/components/pagination.md

@@ -113,12 +113,12 @@ You can dynamically update pagination properties to respond to data changes.
   <zn-pagination id="dynamic-pagination" total="100" limit="10" page="1" uri="#page#"></zn-pagination>
 
   <div style="margin-top: 1rem; display: flex; gap: 0.5rem; flex-wrap: wrap;">
-    <zn-button id="set-page-1" size="small">Go to Page 1</zn-button>
-    <zn-button id="set-page-5" size="small">Go to Page 5</zn-button>
-    <zn-button id="set-total-50" size="small" color="info">Set Total: 50</zn-button>
-    <zn-button id="set-total-200" size="small" color="info">Set Total: 200</zn-button>
-    <zn-button id="set-limit-5" size="small" color="success">Set Limit: 5</zn-button>
-    <zn-button id="set-limit-20" size="small" color="success">Set Limit: 20</zn-button>
+    <zn-button id="set-page-1">Go to Page 1</zn-button>
+    <zn-button id="set-page-5">Go to Page 5</zn-button>
+    <zn-button id="set-total-50" color="info">Set Total: 50</zn-button>
+    <zn-button id="set-total-200" color="info">Set Total: 200</zn-button>
+    <zn-button id="set-limit-5" color="success">Set Limit: 5</zn-button>
+    <zn-button id="set-limit-20" color="success">Set Limit: 20</zn-button>
   </div>
 </div>
 

package/docs/pages/components/pane.md

@@ -10,7 +10,7 @@ Panes are versatile container components designed to manage content layout with
 ```html:preview
 <div style="height: 400px; border: 1px solid var(--zn-color-neutral-300);">
   <zn-pane>
-    <zn-header caption="Example Pane" description="A basic pane with header"></zn-header>
+    <zn-header caption="Example Pane"></zn-header>
     <p>This is the main content area of the pane. It will automatically scroll when the content exceeds the available space.</p>
     <p>The pane component provides a flexible container with built-in overflow handling and padding.</p>
     <p>You can add any content here, and it will be properly contained within the pane.</p>
@@ -42,7 +42,6 @@ When a `zn-header` is included as a child element, the pane automatically integr
 <div style="height: 400px; border: 1px solid var(--zn-color-neutral-300);">
   <zn-pane>
     <zn-header caption="Customer Details"
-               description="View and manage customer information"
                icon="person">
       <zn-button slot="actions" primary>Save</zn-button>
       <zn-button slot="actions">Cancel</zn-button>
@@ -114,7 +113,7 @@ Panes automatically handle overflow with scrollbars when content exceeds the ava
 ```html:preview
 <div style="height: 300px; border: 1px solid var(--zn-color-neutral-300);">
   <zn-pane>
-    <zn-header caption="Long Content" description="Scroll to see more"></zn-header>
+    <zn-header caption="Long Content"></zn-header>
     <h3>Section 1</h3>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 
@@ -178,7 +177,7 @@ A common pattern is using a flush pane with data tables or other components that
 ```html:preview
 <div style="height: 400px; border: 1px solid var(--zn-color-neutral-300);">
   <zn-pane flush>
-    <zn-header caption="Customer List" description="All active customers">
+    <zn-header caption="Customer List">
       <zn-button slot="actions" primary icon="add">Add Customer</zn-button>
     </zn-header>
     <zn-sp divide no-gap flush>
@@ -210,7 +209,6 @@ Panes are designed to work within full-height layouts, automatically expanding t
 <div style="height: 500px; border: 1px solid var(--zn-color-neutral-300);">
   <zn-pane>
     <zn-header caption="Dashboard"
-               description="System overview and metrics"
                icon="dashboard">
       <zn-button slot="actions" icon="refresh">Refresh</zn-button>
     </zn-header>
@@ -235,4 +233,3 @@ Panes are designed to work within full-height layouts, automatically expanding t
 </div>
 ```
 
-

package/docs/pages/components/panel.md

@@ -88,20 +88,20 @@ Use the `footer` slot to add footer content to the panel.
   </div>
 
   <div slot="footer">
-    <zn-button size="small">Save</zn-button>
-    <zn-button size="small" color="secondary">Cancel</zn-button>
+    <zn-button>Save</zn-button>
+    <zn-button color="secondary">Cancel</zn-button>
   </div>
 </zn-panel>
 ```
 
-### Header Underline
+### Borderless Header
 
-Use the `header-underline` attribute to add a border beneath the header.
+Panel headers include a border by default. Use the `header-borderless` attribute to remove the border beneath the header.
 
 ```html:preview
-<zn-panel caption="Underlined Header" description="With a visible separator" header-underline>
+<zn-panel caption="Borderless Header" description="Without a visible separator" header-borderless>
   <div style="padding: 20px;">
-    <p>Panel content with underlined header</p>
+    <p>Panel content with a borderless header</p>
   </div>
 </zn-panel>
 ```
@@ -286,20 +286,19 @@ All panel features can be combined to create rich, complex layouts.
   caption="Advanced Panel"
   description="Combining multiple features"
   icon="dashboard"
-  header-underline
   shadow>
 
   <zn-chip slot="actions" icon="settings" type="info">Configure</zn-chip>
-  <zn-button slot="actions" icon="refresh" size="x-small" color="transparent" square></zn-button>
+  <zn-button slot="actions" icon="refresh" color="transparent" square></zn-button>
 
   <div style="padding: 20px;">
     <h3>Dashboard Overview</h3>
-    <p>This panel combines header actions, icons, underline, and shadow effects.</p>
+    <p>This panel combines header actions, icons, and shadow effects.</p>
   </div>
 
   <div slot="footer">
-    <zn-button size="small" color="success">Save Changes</zn-button>
-    <zn-button size="small" color="secondary">Cancel</zn-button>
+    <zn-button color="success">Save Changes</zn-button>
+    <zn-button color="secondary">Cancel</zn-button>
   </div>
 </zn-panel>
 ```
@@ -325,4 +324,3 @@ The panel header only renders when one of the following conditions is met:
 The following CSS custom properties can be used to customize the panel:
 
 - `--zn-panel-basis` - Controls the flex-basis of the panel (set via `basis-px` attribute)
-

package/docs/pages/components/priority-list.md

@@ -149,17 +149,17 @@ Use the `action-{value}` slot to add interactive elements (buttons, links, etc.)
 ```html:preview
 <zn-priority-list id="action-list" label="Task Queue">
   <div value="deploy">Deploy to Production</div>
-  <zn-button slot="action-deploy" size="small" variant="text" theme="danger" onclick="this.closest('zn-priority-list').querySelector('[value=deploy]').remove()">
+  <zn-button slot="action-deploy" variant="text" theme="danger" onclick="this.closest('zn-priority-list').querySelector('[value=deploy]').remove()">
     <zn-icon src="delete" size="16"></zn-icon>
   </zn-button>
 
   <div value="review">Code Review</div>
-  <zn-button slot="action-review" size="small" variant="text" theme="danger" onclick="this.closest('zn-priority-list').querySelector('[value=review]').remove()">
+  <zn-button slot="action-review" variant="text" theme="danger" onclick="this.closest('zn-priority-list').querySelector('[value=review]').remove()">
     <zn-icon src="delete" size="16"></zn-icon>
   </zn-button>
 
   <div value="test">Run Test Suite</div>
-  <zn-button slot="action-test" size="small" variant="text" theme="danger" onclick="this.closest('zn-priority-list').querySelector('[value=test]').remove()">
+  <zn-button slot="action-test" variant="text" theme="danger" onclick="this.closest('zn-priority-list').querySelector('[value=test]').remove()">
     <zn-icon src="delete" size="16"></zn-icon>
   </zn-button>
 </zn-priority-list>

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

@@ -298,10 +298,10 @@ You can control the radio group programmatically using its methods and propertie
   </zn-radio-group>
 
   <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="set-value-btn" size="small">Set Value to Option 3</zn-button>
-    <zn-button id="check-validity-btn" size="small">Check Validity</zn-button>
-    <zn-button id="get-form-btn" size="small">Get Form</zn-button>
+    <zn-button id="focus-btn">Focus</zn-button>
+    <zn-button id="set-value-btn">Set Value to Option 3</zn-button>
+    <zn-button id="check-validity-btn">Check Validity</zn-button>
+    <zn-button id="get-form-btn">Get Form</zn-button>
   </div>
 </div>
 

package/docs/pages/components/radio.md

@@ -367,10 +367,10 @@ Radios provide several methods for programmatic control:
   <br />
   <zn-radio id="method-radio-3" name="method-demo">Option 3</zn-radio>
   <br /><br />
-  <zn-button id="click-btn" size="small">Click Option 2</zn-button>
-  <zn-button id="focus-btn" size="small" color="info">Focus Option 3</zn-button>
-  <zn-button id="blur-btn" size="small" color="secondary">Blur All</zn-button>
-  <zn-button id="validate-btn" size="small" color="warning">Check Validity</zn-button>
+  <zn-button id="click-btn">Click Option 2</zn-button>
+  <zn-button id="focus-btn" color="info">Focus Option 3</zn-button>
+  <zn-button id="blur-btn" color="secondary">Blur All</zn-button>
+  <zn-button id="validate-btn" color="warning">Check Validity</zn-button>
 </div>
 
 <script type="module">

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

@@ -105,8 +105,8 @@ Use the `footer` slot to add a fixed footer that remains at the bottom. The foot
   </div>
 
   <div slot="footer" style="padding: 1rem; background: var(--zn-color-neutral-100); border-top: 1px solid var(--zn-color-neutral-200); display: flex; gap: 0.5rem;">
-    <zn-button size="small" color="secondary">Cancel</zn-button>
-    <zn-button size="small" color="primary">Save Changes</zn-button>
+    <zn-button color="secondary">Cancel</zn-button>
+    <zn-button color="primary">Save Changes</zn-button>
   </div>
 </zn-scroll-container>
 ```
@@ -145,7 +145,7 @@ Combine both header and footer slots for maximum control. The scrollable area si
   <div slot="footer" style="padding: 1rem; background: var(--zn-color-white); border-top: 1px solid var(--zn-color-neutral-200);">
     <div style="display: flex; gap: 0.5rem;">
       <zn-input placeholder="Type a message..." style="flex: 1;"></zn-input>
-      <zn-button size="small" icon="send" color="primary">Send</zn-button>
+      <zn-button icon="send" color="primary">Send</zn-button>
     </div>
   </div>
 </zn-scroll-container>
@@ -261,9 +261,9 @@ A practical example showing how to build a chat interface with auto-scrolling an
 
   <div slot="footer" style="padding: 1rem; background: var(--zn-color-white); border-top: 1px solid var(--zn-color-neutral-200);">
     <div style="display: flex; gap: 0.5rem; align-items: center;">
-      <zn-button size="small" color="secondary" icon="attach_file"></zn-button>
+      <zn-button color="secondary" icon="attach_file"></zn-button>
       <zn-input placeholder="Type your message..." style="flex: 1;"></zn-input>
-      <zn-button size="small" icon="send" color="primary">Send</zn-button>
+      <zn-button icon="send" color="primary">Send</zn-button>
     </div>
   </div>
 </zn-scroll-container>
@@ -365,7 +365,7 @@ A comprehensive example showing how to build a notification center with categori
         <h3 style="margin: 0;">Notifications</h3>
         <p style="margin: 0.25rem 0 0 0; font-size: 0.875rem; color: var(--zn-color-neutral-600);">You have 4 unread notifications</p>
       </div>
-      <zn-button size="small" color="secondary">Mark all read</zn-button>
+      <zn-button color="secondary">Mark all read</zn-button>
     </div>
   </div>
 
@@ -450,7 +450,7 @@ A comprehensive example showing how to build a notification center with categori
   </div>
 
   <div slot="footer" style="padding: 1rem; background: var(--zn-color-neutral-50); border-top: 1px solid var(--zn-color-neutral-200); text-align: center;">
-    <zn-button size="small" color="secondary" style="width: 100%;">View All Notifications</zn-button>
+    <zn-button color="secondary" style="width: 100%;">View All Notifications</zn-button>
   </div>
 </zn-scroll-container>
 ```
@@ -475,8 +475,8 @@ You can programmatically scroll to the bottom using the `scrollEnd()` method.
   </div>
 
   <div slot="footer" style="padding: 1rem; background: var(--zn-color-neutral-100); border-top: 1px solid var(--zn-color-neutral-200);">
-    <zn-button id="add-content-btn" size="small">Add Content</zn-button>
-    <zn-button id="scroll-bottom-btn" size="small" color="secondary">Scroll to Bottom</zn-button>
+    <zn-button id="add-content-btn">Add Content</zn-button>
+    <zn-button id="scroll-bottom-btn" color="secondary">Scroll to Bottom</zn-button>
   </div>
 </zn-scroll-container>
 
@@ -526,7 +526,7 @@ The footer's height is automatically tracked and the scrollable area adjusts acc
     <div style="margin-bottom: 0.5rem;">
       <strong>Footer Section</strong>
     </div>
-    <zn-button id="toggle-footer-btn" size="small">Expand Footer</zn-button>
+    <zn-button id="toggle-footer-btn">Expand Footer</zn-button>
     <div id="extra-footer-content" style="display: none; margin-top: 1rem; padding: 1rem; background: var(--zn-color-neutral-200); border-radius: 4px;">
       <p style="margin: 0;">This is additional footer content that appears when expanded.</p>
       <p style="margin: 0.5rem 0 0 0;">The scroll area automatically adjusts!</p>

package/docs/pages/components/select.md

@@ -1068,11 +1068,11 @@ You can control the select programmatically using its methods:
   </zn-select>
 
   <div style="margin-top: 1rem; display: flex; gap: 0.5rem; flex-wrap: wrap;">
-    <zn-button id="show-btn" size="small">Show</zn-button>
-    <zn-button id="hide-btn" size="small">Hide</zn-button>
-    <zn-button id="focus-btn" size="small">Focus</zn-button>
-    <zn-button id="set-value-btn" size="small">Set Value</zn-button>
-    <zn-button id="check-validity-btn" size="small">Check Validity</zn-button>
+    <zn-button id="show-btn">Show</zn-button>
+    <zn-button id="hide-btn">Hide</zn-button>
+    <zn-button id="focus-btn">Focus</zn-button>
+    <zn-button id="set-value-btn">Set Value</zn-button>
+    <zn-button id="check-validity-btn">Check Validity</zn-button>
   </div>
 </div>
 

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

@@ -334,10 +334,10 @@ You can programmatically control the split button and access its internal compon
 </zn-split-button>
 
 <div style="margin-top: 1rem; display: flex; gap: 0.5rem;">
-  <zn-button id="show-dropdown" size="small">Show Dropdown</zn-button>
-  <zn-button id="hide-dropdown" size="small">Hide Dropdown</zn-button>
-  <zn-button id="get-value" size="small" color="info">Get Current Value</zn-button>
-  <zn-button id="set-value" size="small" color="success">Set Value to 'option1'</zn-button>
+  <zn-button id="show-dropdown">Show Dropdown</zn-button>
+  <zn-button id="hide-dropdown">Hide Dropdown</zn-button>
+  <zn-button id="get-value" color="info">Get Current Value</zn-button>
+  <zn-button id="set-value" color="success">Set Value to 'option1'</zn-button>
 </div>
 
 <div id="prog-output" style="margin-top: 1rem; padding: 1rem; background: var(--zn-color-neutral-100); border-radius: 4px;">

package/docs/pages/components/tabs.md

@@ -365,7 +365,7 @@ The tabs component provides multiple slots for flexible layouts.
   </zn-navbar>
 
   <div slot="actions">
-    <zn-button size="small" icon="settings">Settings</zn-button>
+    <zn-button icon="settings">Settings</zn-button>
   </div>
 
   <div slot="left">
@@ -403,8 +403,8 @@ active tab using `ref-tab`.
   </zn-navbar>
 
   <div slot="actions">
-    <zn-button ref-tab="" size="small" icon="save" color="success">Save</zn-button>
-    <zn-button ref-tab="preview" size="small" icon="print">Print</zn-button>
+    <zn-button ref-tab="" icon="save" color="success">Save</zn-button>
+    <zn-button ref-tab="preview" icon="print">Print</zn-button>
   </div>
 
   <zn-sp id="">

package/docs/pages/components/tile.md

@@ -17,7 +17,7 @@ Tiles are versatile components designed for building lists of structured content
   <zn-tile caption="Michael Foster" description="michael.foster@example.com" href="https://google.com">
     <zn-icon slot="image" size="40" src="https://i.pravatar.cc/60?img=51" round></zn-icon>
     <zn-tile-property slot="properties" caption="Engineering Lead">Active now</zn-tile-property>
-    <div slot="actions"><zn-button size="small">Contact</zn-button></div>
+    <div slot="actions"><zn-button>Contact</zn-button></div>
   </zn-tile>
 
   <zn-tile caption="Emma Davis" description="emma.davis@example.com">
@@ -107,15 +107,15 @@ Use the `actions` slot to add buttons or other interactive elements to the right
   <zn-tile caption="Database Backup" description="Last backup: 2 hours ago">
     <zn-icon slot="image" size="32" src="storage" color="info"></zn-icon>
     <div slot="actions">
-      <zn-button size="small" color="primary">Run Now</zn-button>
+      <zn-button color="primary">Run Now</zn-button>
     </div>
   </zn-tile>
 
   <zn-tile caption="Email Notification" description="Receive daily summaries">
     <zn-icon slot="image" size="32" src="mail" color="secondary"></zn-icon>
     <div slot="actions">
-      <zn-button size="small" color="transparent" icon="edit" square></zn-button>
-      <zn-button size="small" color="transparent" icon="delete" square></zn-button>
+      <zn-button color="transparent" icon="edit" square></zn-button>
+      <zn-button color="transparent" icon="delete" square></zn-button>
     </div>
   </zn-tile>
 </zn-sp>
@@ -132,7 +132,7 @@ Combine both properties and actions for comprehensive tile layouts.
     <zn-tile-property slot="properties" caption="Department">Marketing</zn-tile-property>
     <zn-tile-property slot="properties" caption="Role">Manager</zn-tile-property>
     <div slot="actions">
-      <zn-button size="small">Message</zn-button>
+      <zn-button>Message</zn-button>
     </div>
   </zn-tile>
 
@@ -141,7 +141,7 @@ Combine both properties and actions for comprehensive tile layouts.
     <zn-tile-property slot="properties" caption="Department">Engineering</zn-tile-property>
     <zn-tile-property slot="properties" caption="Role">Senior Dev</zn-tile-property>
     <div slot="actions">
-      <zn-button size="small">Message</zn-button>
+      <zn-button>Message</zn-button>
     </div>
   </zn-tile>
 </zn-sp>
@@ -195,8 +195,8 @@ Example showing how to use tiles for a file browser interface.
     <zn-icon slot="image" size="36" src="description" color="error"></zn-icon>
     <zn-tile-property slot="properties" caption="Modified">2 days ago</zn-tile-property>
     <div slot="actions">
-      <zn-button size="small" color="transparent" icon="download" square></zn-button>
-      <zn-button size="small" color="transparent" icon="more_vert" square></zn-button>
+      <zn-button color="transparent" icon="download" square></zn-button>
+      <zn-button color="transparent" icon="more_vert" square></zn-button>
     </div>
   </zn-tile>
 
@@ -204,8 +204,8 @@ Example showing how to use tiles for a file browser interface.
     <zn-icon slot="image" size="36" src="description" color="success"></zn-icon>
     <zn-tile-property slot="properties" caption="Modified">Last week</zn-tile-property>
     <div slot="actions">
-      <zn-button size="small" color="transparent" icon="download" square></zn-button>
-      <zn-button size="small" color="transparent" icon="more_vert" square></zn-button>
+      <zn-button color="transparent" icon="download" square></zn-button>
+      <zn-button color="transparent" icon="more_vert" square></zn-button>
     </div>
   </zn-tile>
 </zn-sp>
@@ -262,7 +262,7 @@ Example showing tiles used for a product catalog with images and pricing.
     <zn-tile-property slot="properties" caption="Price">$299</zn-tile-property>
     <zn-tile-property slot="properties" caption="Stock">In Stock</zn-tile-property>
     <div slot="actions">
-      <zn-button size="small" color="primary">Add to Cart</zn-button>
+      <zn-button color="primary">Add to Cart</zn-button>
     </div>
   </zn-tile>
 
@@ -271,7 +271,7 @@ Example showing tiles used for a product catalog with images and pricing.
     <zn-tile-property slot="properties" caption="Price">$399</zn-tile-property>
     <zn-tile-property slot="properties" caption="Stock">Low Stock</zn-tile-property>
     <div slot="actions">
-      <zn-button size="small" color="primary">Add to Cart</zn-button>
+      <zn-button color="primary">Add to Cart</zn-button>
     </div>
   </zn-tile>
 
@@ -280,7 +280,7 @@ Example showing tiles used for a product catalog with images and pricing.
     <zn-tile-property slot="properties" caption="Price">$79</zn-tile-property>
     <zn-tile-property slot="properties" caption="Stock">In Stock</zn-tile-property>
     <div slot="actions">
-      <zn-button size="small" color="primary">Add to Cart</zn-button>
+      <zn-button color="primary">Add to Cart</zn-button>
     </div>
   </zn-tile>
 </zn-sp>

package/docs/pages/components/toggle.md

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

package/docs/pages/components/translations.md

@@ -133,7 +133,7 @@ Use the `expand` slot to add custom buttons or actions.
 <zn-translations
   label="Description"
   languages='{"en":"English","fr":"French","de":"German"}'>
-  <zn-button slot="expand" size="x-small" color="transparent" icon="translate">
+  <zn-button slot="expand" color="transparent" icon="translate">
     Auto-Translate
   </zn-button>
 </zn-translations>
@@ -249,9 +249,9 @@ Access and modify translation values via JavaScript.
 ></zn-translations>
 
 <div style="margin-top: 1rem;">
-  <zn-button id="set-values-btn" size="small">Set Sample Values</zn-button>
-  <zn-button id="get-values-btn" size="small" color="info">Get Values</zn-button>
-  <zn-button id="clear-values-btn" size="small" color="secondary">Clear All</zn-button>
+  <zn-button id="set-values-btn">Set Sample Values</zn-button>
+  <zn-button id="get-values-btn" color="info">Get Values</zn-button>
+  <zn-button id="clear-values-btn" color="secondary">Clear All</zn-button>
 </div>
 
 <script type="module">
@@ -303,7 +303,7 @@ A complete example showing product content management with translations.
         languages='{"en":"English","fr":"French","de":"German","es":"Spanish"}'
         values='{"en":"High-quality wireless headphones with active noise cancellation","fr":"Écouteurs sans fil de haute qualité avec suppression active du bruit","de":"Hochwertige kabellose Kopfhörer mit aktiver Geräuschunterdrückung","es":"Auriculares inalámbricos de alta calidad con cancelación activa de ruido"}'
       >
-        <zn-button slot="expand" size="x-small" color="transparent" icon="smart_toy">
+        <zn-button slot="expand" color="transparent" icon="smart_toy">
           AI Translate
         </zn-button>
       </zn-translations>

package/docs/pages/components/vertical-stepper.md

@@ -349,7 +349,7 @@ Add interactive elements next to each step for expanded functionality.
       <zn-icon slot="icon" src="preview"></zn-icon>
     </zn-vertical-stepper>
   </div>
-  <zn-button size="small" icon="edit" color="transparent">Edit</zn-button>
+  <zn-button icon="edit" color="transparent">Edit</zn-button>
 </div>
 <div style="display: flex; align-items: center; gap: 10px;">
   <div style="flex: 1;">
@@ -359,7 +359,7 @@ Add interactive elements next to each step for expanded functionality.
       <zn-icon slot="icon" src="pending"></zn-icon>
     </zn-vertical-stepper>
   </div>
-  <zn-button size="small" icon="play_arrow" color="transparent" disabled>Run</zn-button>
+  <zn-button icon="play_arrow" color="transparent" disabled>Run</zn-button>
 </div>
 <div style="display: flex; align-items: center; gap: 10px;">
   <div style="flex: 1;">
@@ -370,7 +370,7 @@ Add interactive elements next to each step for expanded functionality.
       <zn-icon slot="icon" src="pending"></zn-icon>
     </zn-vertical-stepper>
   </div>
-  <zn-button size="small" icon="publish" color="transparent" disabled>Deploy</zn-button>
+  <zn-button icon="publish" color="transparent" disabled>Deploy</zn-button>
 </div>
 ```