@kubex/zinc 1.0.24 → 1.0.98

package/docs/pages/components/empty-state.md

@@ -1,51 +1,350 @@
 ---
 meta:
   title: Empty State
-  description:
+  description: Empty states are used to communicate that there's no content to display and guide users on what to do next.
 layout: component
 ---
 
 ```html:preview
 <zn-empty-state
-  caption="The Caption"
-  description="The Description"
+  caption="No items found"
+  description="There are no items to display at this time."
   type="primary"
-  icon="check">
+  icon="inbox">
 </zn-empty-state>
 ```
 
+Empty states appear when a list, table, or other container has no content to show. They help users understand why content is missing and often provide actions to resolve the empty state.
+
 ## Examples
 
-### With Buttons
+### Basic Empty State
+
+A basic empty state with a caption and description.
+
+```html:preview
+<zn-empty-state
+  caption="No data available"
+  description="Start by adding your first item to see it here."
+  icon="data_usage">
+</zn-empty-state>
+```
+
+### Without Icon
+
+Empty states can be displayed without an icon if you prefer a more minimal look.
 
 ```html:preview
+<zn-empty-state
+  caption="Nothing to show"
+  description="Your content will appear here once available.">
+</zn-empty-state>
+```
+
+### Types
 
+Use the `type` attribute to apply semantic styling to the empty state. Available types are `primary`, `info`, and `error`.
+
+```html:preview
+<zn-empty-state
+  caption="Primary State"
+  description="This is a primary empty state."
+  type="primary"
+  icon="lightbulb">
+</zn-empty-state>
+<br />
+<zn-empty-state
+  caption="Info State"
+  description="This provides informational context."
+  type="info"
+  icon="info">
+</zn-empty-state>
+<br />
 <zn-empty-state
-  caption="The Caption"
-  description="The Description"
-  icon="check">
+  caption="Error State"
+  description="Something went wrong and no content could be loaded."
+  type="error"
+  icon="error">
+</zn-empty-state>
+```
+
+### With Action Buttons
+
+Use the default slot to add action buttons that help users resolve the empty state.
+
+```html:preview
+<zn-empty-state
+  caption="No files uploaded"
+  description="Upload your first file to get started."
+  icon="cloud_upload">
+  <zn-button color="primary">Upload File</zn-button>
+</zn-empty-state>
+```
+
+### With Multiple Actions
+
+Combine multiple buttons using the button group component for more complex actions.
+
+```html:preview
+<zn-empty-state
+  caption="No results found"
+  description="Try adjusting your search or filter criteria."
+  icon="search_off">
   <zn-button-group>
-    <zn-button>Button 1</zn-button>
-    <zn-button>Button 2</zn-button>
+    <zn-button color="primary">Clear Filters</zn-button>
+    <zn-button color="secondary">New Search</zn-button>
   </zn-button-group>
 </zn-empty-state>
 ```
 
 ### Padded
 
-```html:preview
+Use the `padded` attribute to add extra spacing around the empty state content. This is useful when the empty state is displayed within a container that needs additional visual breathing room.
 
+```html:preview
 <zn-empty-state
   padded
   type="primary"
-  caption="The Caption"
-  description="The Description"
-  icon="check">
+  caption="No notifications"
+  description="You're all caught up! Check back later for new updates."
+  icon="notifications_none">
+  <zn-button color="primary">Manage Settings</zn-button>
+</zn-empty-state>
+```
+
+### Using Slots
+
+Empty states support slots for more flexible content customization. You can use the `caption` and `description` slots to provide rich HTML content.
+
+#### Caption Slot
+
+```html:preview
+<zn-empty-state icon="folder_open" type="info">
+  <div slot="caption">
+    <strong>No Projects Found</strong>
+  </div>
+  <div slot="description">
+    Projects you create will appear here.
+  </div>
+  <zn-button color="info">Create Project</zn-button>
+</zn-empty-state>
+```
+
+#### Rich Description Content
+
+```html:preview
+<zn-empty-state caption="Welcome!" icon="waving_hand" type="primary">
+  <div slot="description">
+    <p>Get started by creating your first resource.</p>
+    <p>Need help? <a href="#">View documentation</a></p>
+  </div>
+  <zn-button-group>
+    <zn-button color="primary">Get Started</zn-button>
+    <zn-button color="secondary">Take Tour</zn-button>
+  </zn-button-group>
+</zn-empty-state>
+```
+
+## Common Use Cases
+
+### No Search Results
+
+```html:preview
+<zn-empty-state
+  caption="No results match your search"
+  description="We couldn't find anything matching your search criteria. Try different keywords or clear your filters."
+  icon="search_off"
+  type="info">
+  <zn-button-group>
+    <zn-button color="info">Clear Search</zn-button>
+    <zn-button color="secondary">Reset Filters</zn-button>
+  </zn-button-group>
+</zn-empty-state>
+```
+
+### Empty List
+
+```html:preview
+<zn-empty-state
+  caption="No items yet"
+  description="Start building your collection by adding your first item."
+  icon="add_circle"
+  type="primary">
+  <zn-button color="primary" icon="add">Add Item</zn-button>
+</zn-empty-state>
+```
+
+### Connection Error
+
+```html:preview
+<zn-empty-state
+  caption="Connection failed"
+  description="Unable to load data. Please check your internet connection and try again."
+  icon="cloud_off"
+  type="error">
   <zn-button-group>
-    <zn-button>Button 1</zn-button>
-    <zn-button>Button 2</zn-button>
+    <zn-button color="error">Retry</zn-button>
+    <zn-button color="secondary">Go Back</zn-button>
   </zn-button-group>
 </zn-empty-state>
 ```
 
+### Permission Denied
+
+```html:preview
+<zn-empty-state
+  caption="Access denied"
+  description="You don't have permission to view this content. Contact your administrator for access."
+  icon="lock"
+  type="error">
+  <zn-button color="secondary">Back to Dashboard</zn-button>
+</zn-empty-state>
+```
+
+### Empty Inbox
+
+```html:preview
+<zn-empty-state
+  padded
+  caption="All clear!"
+  description="You have no new messages. Enjoy your day!"
+  icon="mark_email_read"
+  type="info">
+  <zn-button color="info" text>Compose Message</zn-button>
+</zn-empty-state>
+```
+
+### No Data Available
+
+```html:preview
+<zn-empty-state
+  caption="No data to display"
+  description="Data will appear here once it becomes available. This may take a few moments."
+  icon="hourglass_empty"
+  type="info">
+  <zn-button color="secondary" icon="refresh">Refresh</zn-button>
+</zn-empty-state>
+```
+
+### First Time User
+
+```html:preview
+<zn-empty-state
+  padded
+  caption="Welcome aboard!"
+  description="Let's get you started with a quick tour of the features."
+  icon="celebration"
+  type="primary">
+  <zn-button-group>
+    <zn-button color="primary" icon="play_arrow">Start Tour</zn-button>
+    <zn-button color="secondary" icon="close">Skip</zn-button>
+  </zn-button-group>
+</zn-empty-state>
+```
+
+### Empty Cart
+
+```html:preview
+<zn-empty-state
+  caption="Your cart is empty"
+  description="Add items to your cart to continue shopping."
+  icon="shopping_cart"
+  type="primary">
+  <zn-button color="primary" icon="storefront">Continue Shopping</zn-button>
+</zn-empty-state>
+```
+
+### No Favorites
+
+```html:preview
+<zn-empty-state
+  caption="No favorites yet"
+  description="Items you mark as favorites will appear here for quick access."
+  icon="favorite_border"
+  type="info">
+  <zn-button color="info" text icon="explore">Explore Items</zn-button>
+</zn-empty-state>
+```
+
+### Maintenance Mode
+
+```html:preview
+<zn-empty-state
+  padded
+  caption="Under maintenance"
+  description="We're currently performing scheduled maintenance. Please check back shortly."
+  icon="construction"
+  type="info">
+  <zn-button color="secondary" icon="schedule">Check Status</zn-button>
+</zn-empty-state>
+```
+
+### Deleted Items
+
+```html:preview
+<zn-empty-state
+  caption="No items in trash"
+  description="Deleted items will appear here and can be restored within 30 days."
+  icon="delete_outline"
+  type="primary">
+</zn-empty-state>
+```
+
+### Completed Tasks
+
+```html:preview
+<zn-empty-state
+  padded
+  caption="All tasks completed!"
+  description="Great job! You've finished all your tasks. Take a break or add new ones."
+  icon="task_alt"
+  type="info">
+  <zn-button-group>
+    <zn-button color="info" icon="add">Add Task</zn-button>
+    <zn-button color="secondary" text>View Completed</zn-button>
+  </zn-button-group>
+</zn-empty-state>
+```
+
+## Best Practices
+
+### Helpful Icons
+
+Choose icons that clearly communicate the empty state's context. For example, use `inbox` for empty inboxes, `search_off` for no search results, and `cloud_off` for connection errors.
+
+```html:preview
+<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem;">
+  <zn-empty-state caption="No messages" description="Your inbox is empty." icon="inbox"></zn-empty-state>
+  <zn-empty-state caption="Search failed" description="No results found." icon="search_off"></zn-empty-state>
+  <zn-empty-state caption="Offline" description="No connection." icon="cloud_off" type="error"></zn-empty-state>
+</div>
+```
+
+### Clear Actions
+
+Always provide clear next steps when possible. Tell users what they can do to resolve the empty state.
+
+```html:preview
+<zn-empty-state
+  caption="No team members"
+  description="Invite team members to start collaborating on projects together."
+  icon="group_add"
+  type="primary">
+  <zn-button color="primary" icon="person_add">Invite Team Member</zn-button>
+</zn-empty-state>
+```
+
+### Appropriate Tone
+
+Match the tone of your message to the context. Celebratory for completed tasks, helpful for new users, and informative for errors.
+
+```html:preview
+<zn-empty-state
+  padded
+  caption="You're a star!"
+  description="All invoices are paid and up to date. Keep up the great work!"
+  icon="stars"
+  type="info">
+</zn-empty-state>
+```
 

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

@@ -1,55 +1,239 @@
 ---
 meta:
   title: Expanding Action
-  description:
+  description: An expandable action button component that reveals content either in a dropdown panel or inline. Supports dynamic content loading, notification badges, and two display methods - drop and fill.
 layout: component
 ---
 
 ```html:preview
-<zn-expanding-action icon="new_label" 
-                     uri=""
+<zn-expanding-action icon="new_label"
                      method="fill"
-                     count-uri=""
                      prefetch>
   This is the content here, this will probably be loaded from one of the URIs.
   if count uri is set, use that to retrieve the number to display as a notification
-  if prefetch is set, we need to lod the uri which should have the count with it.
+  if prefetch is set, we need to load the uri which should have the count with it.
 </zn-expanding-action>
 ```
 
-## Multiple Examples
+## Examples
+
+### Drop Method
+
+Use the `method="drop"` to display content in a dropdown panel when the icon is clicked.
+
+```html:preview
+<zn-expanding-action icon="notifications"
+                     method="drop">
+  <div style="padding: 15px; min-width: 250px;">
+    <h4>Notifications</h4>
+    <p>You have 3 new messages</p>
+    <p>2 tasks are due today</p>
+  </div>
+</zn-expanding-action>
+```
+
+### Fill Method
+
+Use the `method="fill"` to display content inline, expanding horizontally.
+
+```html:preview
+<zn-expanding-action icon="add"
+                     method="fill">
+  <div style="padding: 10px;">
+    <p>This content expands inline when clicked</p>
+  </div>
+</zn-expanding-action>
+```
+
+### With Notification Count
+
+Display a notification badge using the `count` attribute.
+
+```html:preview
+<zn-expanding-action icon="mail"
+                     method="drop"
+                     count="5">
+  <div style="padding: 15px; min-width: 250px;">
+    <h4>Inbox</h4>
+    <p>You have 5 unread messages</p>
+  </div>
+</zn-expanding-action>
+```
+
+### With Custom Color
+
+Set the icon color using the `color` attribute.
+
+```html:preview
+<zn-expanding-action icon="warning"
+                     method="drop"
+                     color="warning"
+                     count="2">
+  <div style="padding: 15px; min-width: 250px;">
+    <h4>Warnings</h4>
+    <p>2 items require your attention</p>
+  </div>
+</zn-expanding-action>
+```
+
+### Custom Width
+
+Control the dropdown width using the `basis` attribute (for drop method).
+
+```html:preview
+<zn-expanding-action icon="menu"
+                     method="drop"
+                     basis="400">
+  <div style="padding: 15px;">
+    <h4>Wide Panel</h4>
+    <p>This panel is wider than the default 300px</p>
+  </div>
+</zn-expanding-action>
+```
+
+### Custom Max Height
+
+Limit the content height using the `max-height` attribute.
+
+```html:preview
+<zn-expanding-action icon="list"
+                     method="drop"
+                     max-height="200">
+  <div style="padding: 15px;">
+    <h4>Scrollable Content</h4>
+    <p>Item 1</p>
+    <p>Item 2</p>
+    <p>Item 3</p>
+    <p>Item 4</p>
+    <p>Item 5</p>
+    <p>Item 6</p>
+    <p>Item 7</p>
+    <p>Item 8</p>
+  </div>
+</zn-expanding-action>
+```
+
+### Multiple Expanding Actions
+
+Use multiple expanding actions together.
 
 ```html:preview
+<div style="display: flex; gap: 10px;">
+  <zn-expanding-action icon="notifications"
+                       method="drop"
+                       count="3">
+    <div style="padding: 15px; min-width: 250px;">
+      <h4>Notifications</h4>
+      <p>3 new updates</p>
+    </div>
+  </zn-expanding-action>
+
+  <zn-expanding-action icon="mail"
+                       method="drop"
+                       count="7">
+    <div style="padding: 15px; min-width: 250px;">
+      <h4>Messages</h4>
+      <p>7 unread messages</p>
+    </div>
+  </zn-expanding-action>
+
+  <zn-expanding-action icon="settings"
+                       method="drop">
+    <div style="padding: 15px; min-width: 200px;">
+      <h4>Settings</h4>
+      <p>Configure your preferences</p>
+    </div>
+  </zn-expanding-action>
+</div>
+```
+
+### In Action Bar
+
+Use expanding actions within an action bar for navigation.
+
+```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>
+  </zn-dropdown>
+
   <zn-expanding-action icon="edit_note"
-                       method="fill"
-                       count-uri="/note/count"
-                       slot="actions"
-                       prefetch>
-    Hello there
+                       method="drop"
+                       count="2"
+                       slot="actions">
+    <div style="padding: 15px; min-width: 250px;">
+      <h4>Notes</h4>
+      <p>2 draft notes</p>
+    </div>
   </zn-expanding-action>
 
-  <zn-expanding-action icon="new_label"
-                       content-uri="/test"
+  <zn-expanding-action icon="notifications"
                        method="drop"
+                       count="5"
                        slot="actions">
-    <p>This is the content here, this will probably be loaded from one of the URIs.</p>
-    <p>if count uri is set, use that to retrieve the number to display as a notification
-      if prefetch is set, we need to lod the uri which should have the count with it.</p>
+    <div style="padding: 15px; min-width: 250px;">
+      <h4>Alerts</h4>
+      <p>5 new notifications</p>
+    </div>
   </zn-expanding-action>
+</zn-action-bar>
 ```
 
-## Header Example
+### With Form Content
+
+Include form elements within the expanding action.
+
+```html:preview
+<zn-expanding-action icon="add_circle"
+                     method="drop"
+                     basis="350">
+  <div style="padding: 15px;">
+    <h4>Quick Add</h4>
+    <form class="form-spacing">
+      <zn-input label="Title" required></zn-input>
+      <zn-textarea label="Description"></zn-textarea>
+      <zn-button type="submit" color="success">Add</zn-button>
+    </form>
+  </div>
+</zn-expanding-action>
+```
+
+### Nested in Defined Label
+
+Combine with other components like defined-label.
 
 ```html:preview
-<zn-header caption="Expanding Action Example"
-           navigation="[{&quot;path&quot;:&quot;#&quot;,&quot;title&quot;:&quot;Dashboard&quot;},{&quot;path&quot;:&quot;#&quot;,&quot;title&quot;:&quot;Another&quot;}]">
-  <zn-navbar slot="nav">
-    <zn-expanding-action icon="new_label" method="fill">
-      <zn-defined-label
-        allow-custom
-        predefined-labels="[{&quot;name&quot;:&quot;asc2&quot;,&quot;options&quot;:[]},{&quot;name&quot;:&quot;one&quot;,&quot;options&quot;:[]},{&quot;name&quot;:&quot;outbound&quot;,&quot;options&quot;:[]},{&quot;name&quot;:&quot;two&quot;,&quot;options&quot;:[]},{&quot;name&quot;:&quot;another&quot;,&quot;options&quot;:[&quot;one&quot;,&quot;two&quot;,&quot;three&quot;]},{&quot;name&quot;:&quot;awesome&quot;,&quot;options&quot;:[&quot;one&quot;,&quot;two&quot;,&quot;three&quot;,&quot;four&quot;]}]">
-      </zn-defined-label>
-    </zn-expanding-action>
-  </zn-navbar>
-</zn-header>
+<zn-expanding-action icon="label"
+                     method="fill"
+                     basis="400">
+  <zn-defined-label
+    allow-custom
+    predefined-labels="[{&quot;name&quot;:&quot;priority&quot;,&quot;options&quot;:[&quot;low&quot;,&quot;medium&quot;,&quot;high&quot;]},{&quot;name&quot;:&quot;status&quot;,&quot;options&quot;:[&quot;open&quot;,&quot;closed&quot;]}]">
+  </zn-defined-label>
+</zn-expanding-action>
+```
+
+### User Profile Menu
+
+A practical example for a user profile dropdown.
+
+```html:preview
+<zn-expanding-action icon="account_circle"
+                     method="drop"
+                     basis="250">
+  <div style="padding: 15px;">
+    <h4>John Doe</h4>
+    <p style="color: var(--zn-color-neutral-500); margin: 0;">john@example.com</p>
+    <hr style="margin: 10px 0;">
+    <zn-button text color="transparent" style="width: 100%; justify-content: flex-start;">Profile</zn-button>
+    <zn-button text color="transparent" style="width: 100%; justify-content: flex-start;">Settings</zn-button>
+    <zn-button text color="transparent" style="width: 100%; justify-content: flex-start;">Logout</zn-button>
+  </div>
+</zn-expanding-action>
 ```