@kubex/zinc 1.0.25 → 1.0.99

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

@@ -1,12 +1,11 @@
 ---
 meta:
   title: Button Group
-  description:
+  description: Button groups are used to organize related buttons into a cohesive unit, with options for layout, spacing, and alignment.
 layout: component
 ---
 
 ```html:preview
-
 <zn-button-group>
   <zn-button>First</zn-button>
   <zn-button>Inner 1</zn-button>
@@ -17,62 +16,271 @@ layout: component
 
 ## Examples
 
-### Grow Example
+### Basic Usage
+
+By default, button groups display buttons horizontally with no gaps, creating a seamless connected appearance.
+
+```html:preview
+<zn-button-group>
+  <zn-button>Left</zn-button>
+  <zn-button>Center</zn-button>
+  <zn-button>Right</zn-button>
+</zn-button-group>
+```
+
+### Direction
+
+Use the `direction` attribute to control the orientation of the button group. The default is `horizontal`, but you can set it to `vertical` for a stacked layout.
 
 ```html:preview
+<zn-button-group direction="horizontal">
+  <zn-button>Horizontal 1</zn-button>
+  <zn-button>Horizontal 2</zn-button>
+  <zn-button>Horizontal 3</zn-button>
+</zn-button-group>
+
+<br />
+<br />
+
+<zn-button-group direction="vertical">
+  <zn-button>Vertical 1</zn-button>
+  <zn-button>Vertical 2</zn-button>
+  <zn-button>Vertical 3</zn-button>
+</zn-button-group>
+```
+
+### Grow
 
+Use the `grow` attribute to make buttons expand equally to fill the full width of their container. This is useful for creating full-width button groups.
+
+```html:preview
 <zn-button-group grow>
   <zn-button>First</zn-button>
-  <zn-button>Inner 1</zn-button>
-  <zn-button>Inner 2</zn-button>
-  <zn-button>Last</zn-button>
+  <zn-button>Second</zn-button>
+  <zn-button>Third</zn-button>
+  <zn-button>Fourth</zn-button>
 </zn-button-group>
 ```
 
-### Start Example
+### Alignment
+
+By default, button groups are right-aligned (flex-end). Use the `start` attribute to align buttons to the left (flex-start).
 
 ```html:preview
+<zn-button-group>
+  <zn-button>Right Aligned 1</zn-button>
+  <zn-button>Right Aligned 2</zn-button>
+  <zn-button>Right Aligned 3</zn-button>
+</zn-button-group>
+
+<br />
+<br />
 
 <zn-button-group start>
-  <zn-button>First</zn-button>
-  <zn-button>Inner 1</zn-button>
-  <zn-button>Inner 2</zn-button>
-  <zn-button>Last</zn-button>
+  <zn-button>Left Aligned 1</zn-button>
+  <zn-button>Left Aligned 2</zn-button>
+  <zn-button>Left Aligned 3</zn-button>
 </zn-button-group>
 ```
 
-### Gap Example
+### Spacing
 
-```html:preview
+Use the `gap` attribute to add spacing between buttons. This creates visual separation while maintaining the logical grouping.
 
+```html:preview
 <zn-button-group gap>
   <zn-button>First</zn-button>
-  <zn-button>Inner 1</zn-button>
-  <zn-button>Inner 2</zn-button>
-  <zn-button>Last</zn-button>
+  <zn-button>Second</zn-button>
+  <zn-button>Third</zn-button>
+  <zn-button>Fourth</zn-button>
 </zn-button-group>
 ```
 
-### Grow Gap Example
+### Gap with Grow
 
-```html:preview
+Combine `gap` and `grow` attributes to create evenly-spaced, full-width button groups.
 
+```html:preview
 <zn-button-group gap grow>
   <zn-button>First</zn-button>
-  <zn-button>Inner 1</zn-button>
-  <zn-button>Inner 2</zn-button>
-  <zn-button>Last</zn-button>
+  <zn-button>Second</zn-button>
+  <zn-button>Third</zn-button>
+  <zn-button>Fourth</zn-button>
 </zn-button-group>
 ```
 
-### Vertical Example
+### Button Variants
+
+Button groups work with all button variants including colors, sizes, and styles.
 
 ```html:preview
+<zn-button-group>
+  <zn-button color="default">Default</zn-button>
+  <zn-button color="secondary">Secondary</zn-button>
+  <zn-button color="success">Success</zn-button>
+</zn-button-group>
 
-<zn-button-group direction="vertical">
-  <zn-button>First</zn-button>
-  <zn-button>Inner 1</zn-button>
-  <zn-button>Inner 2</zn-button>
-  <zn-button>Last</zn-button>
+<br />
+<br />
+
+<zn-button-group gap>
+  <zn-button color="error">Error</zn-button>
+  <zn-button color="warning">Warning</zn-button>
+  <zn-button color="info">Info</zn-button>
+</zn-button-group>
+
+<br />
+<br />
+
+<zn-button-group>
+  <zn-button outline>Outline 1</zn-button>
+  <zn-button outline>Outline 2</zn-button>
+  <zn-button outline>Outline 3</zn-button>
 </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.
+
+```html:preview
+<zn-button-group>
+  <zn-button icon="format_bold"></zn-button>
+  <zn-button icon="format_italic"></zn-button>
+  <zn-button icon="format_underlined"></zn-button>
+  <zn-button icon="format_align_left"></zn-button>
+</zn-button-group>
+
+<br />
+<br />
+
+<zn-button-group gap>
+  <zn-button icon="add" color="success">Add</zn-button>
+  <zn-button icon="edit" color="info">Edit</zn-button>
+  <zn-button icon="delete" color="error">Delete</zn-button>
+</zn-button-group>
+```
+
+### Vertical with Gap
+
+Combine vertical direction with gap for a spaced vertical layout.
+
+```html:preview
+<zn-button-group direction="vertical" gap>
+  <zn-button>Option 1</zn-button>
+  <zn-button>Option 2</zn-button>
+  <zn-button>Option 3</zn-button>
+  <zn-button>Option 4</zn-button>
+</zn-button-group>
+```
+
+### Action Button Groups
+
+A common pattern is to use button groups for action buttons like save/cancel or submit/reset combinations.
+
+```html:preview
+<zn-button-group start>
+  <zn-button color="transparent">Cancel</zn-button>
+  <zn-button color="success">Save Changes</zn-button>
+</zn-button-group>
+
+<br />
+<br />
+
+<zn-button-group gap>
+  <zn-button color="secondary">Reset</zn-button>
+  <zn-button color="default">Submit</zn-button>
+</zn-button-group>
+```
+
+### Segmented Controls
+
+Button groups can be used to create segmented control-like interfaces for toggling between views or options.
+
+```html:preview
+<zn-button-group>
+  <zn-button>Day</zn-button>
+  <zn-button>Week</zn-button>
+  <zn-button>Month</zn-button>
+  <zn-button>Year</zn-button>
+</zn-button-group>
+
+<br />
+<br />
+
+<zn-button-group>
+  <zn-button icon="view_list">List</zn-button>
+  <zn-button icon="grid_view">Grid</zn-button>
+  <zn-button icon="view_kanban">Board</zn-button>
+</zn-button-group>
+```
+
+### Toolbar Pattern
+
+Button groups are ideal for creating toolbars with related actions.
+
+```html:preview
+<zn-button-group gap>
+  <zn-button icon="undo" color="transparent"></zn-button>
+  <zn-button icon="redo" color="transparent"></zn-button>
+</zn-button-group>
+
+<zn-button-group>
+  <zn-button icon="format_bold"></zn-button>
+  <zn-button icon="format_italic"></zn-button>
+  <zn-button icon="format_underlined"></zn-button>
+</zn-button-group>
+
+<zn-button-group>
+  <zn-button icon="format_align_left"></zn-button>
+  <zn-button icon="format_align_center"></zn-button>
+  <zn-button icon="format_align_right"></zn-button>
+</zn-button-group>
+```
+
+### Responsive Wrapping
+
+Button groups support wrapping by default, allowing buttons to flow to multiple lines on smaller screens.
+
+```html:preview
+<div style="max-width: 300px;">
+  <zn-button-group>
+    <zn-button>Button 1</zn-button>
+    <zn-button>Button 2</zn-button>
+    <zn-button>Button 3</zn-button>
+    <zn-button>Button 4</zn-button>
+    <zn-button>Button 5</zn-button>
+    <zn-button>Button 6</zn-button>
+  </zn-button-group>
+</div>
+```

package/docs/pages/components/button.md

@@ -106,7 +106,7 @@ Use the `text` attribute to set the button's style to text.
 
 ### Icon
 
-Use the `icon` attribute to set the button's icon.
+Use the `icon` attribute to add an icon to the button.
 
 ```html:preview
 <zn-button icon="add_circle">Icon</zn-button>
@@ -117,3 +117,141 @@ Use the `icon` attribute to set the button's icon.
 <zn-button icon="cancel" color="error">Icon</zn-button>
 <zn-button icon="pending" color="transparent">Icon</zn-button>
 ```
+
+### Icon-Only Buttons
+
+Buttons can be used with just an icon and no text by omitting the button label.
+
+```html:preview
+<zn-button icon="settings"></zn-button>
+<zn-button icon="favorite" color="error"></zn-button>
+<zn-button icon="share" color="success"></zn-button>
+<zn-button icon="add" color="info"></zn-button>
+```
+
+### Icon Position
+
+Use the `icon-position` attribute to control whether the icon appears before or after the button text.
+
+```html:preview
+<zn-button icon="arrow_back" icon-position="left">Back</zn-button>
+<zn-button icon="arrow_forward" icon-position="right">Next</zn-button>
+```
+
+### Icon Size and Color
+
+Use `icon-size` and `icon-color` attributes to customize the icon appearance.
+
+```html:preview
+<zn-button icon="star" icon-size="24" icon-color="warning">Large Star</zn-button>
+<zn-button icon="favorite" icon-size="20" icon-color="error">Favorite</zn-button>
+<zn-button icon="info" icon-size="16" icon-color="info">Info</zn-button>
+```
+
+### Square Buttons
+
+Use the `square` attribute to create square-shaped buttons, useful for icon-only buttons.
+
+```html:preview
+<zn-button icon="delete" square></zn-button>
+<zn-button icon="edit" square color="info"></zn-button>
+<zn-button icon="save" square color="success"></zn-button>
+<zn-button icon="close" square color="error"></zn-button>
+```
+
+### Grow
+
+Use the `grow` attribute to make the button expand to fill its container width.
+
+```html:preview
+<zn-button grow>Full Width Button</zn-button>
+<zn-button grow color="success">Submit Form</zn-button>
+```
+
+### Loading State
+
+Use the `loading` attribute to show a loading state on the button.
+
+```html:preview
+<zn-button loading loading-text="Processing...">Click Me</zn-button>
+<zn-button loading loading-text="Saving" color="success">Save</zn-button>
+<zn-button loading loading-text="Loading" color="info">Load Data</zn-button>
+```
+
+### Notifications
+
+Use the `notification` attribute to display a notification badge on the button. Positive numbers show the count, while negative numbers show a dot indicator.
+
+```html:preview
+<zn-button icon="notifications" notification="5">Notifications</zn-button>
+<zn-button icon="mail" notification="12" color="info">Messages</zn-button>
+<zn-button icon="chat" notification="-1" color="success">Chat</zn-button>
+<zn-button icon="notifications" notification="0">No Notifications</zn-button>
+```
+
+Use `muted-notifications` for a subtle notification style.
+
+```html:preview
+<zn-button icon="notifications" notification="3" muted-notifications>Muted</zn-button>
+```
+
+### Tooltip
+
+Use the `tooltip` attribute to add a tooltip to the button.
+
+```html:preview
+<zn-button icon="info" tooltip="This button provides additional information"></zn-button>
+<zn-button icon="help" tooltip="Click for help" color="info">Help</zn-button>
+```
+
+### Links
+
+Buttons can work as hyperlinks by using the `href` attribute.
+
+```html:preview
+<zn-button href="https://example.com" target="_blank">External Link</zn-button>
+<zn-button href="/dashboard" icon="dashboard">Dashboard</zn-button>
+<zn-button href="/settings" icon="settings" text>Settings</zn-button>
+```
+
+### Form Integration
+
+Buttons can be used in forms with various form-related attributes.
+
+```html:preview
+<form>
+  <zn-input name="email" type="email" label="Email" value="test@example.com"></zn-input>
+  <br />
+  <zn-button type="submit" color="success">Submit</zn-button>
+  <zn-button type="reset" color="secondary">Reset</zn-button>
+</form>
+```
+
+You can also override form attributes using `formaction`, `formmethod`, `formenctype`, `formnovalidate`, and `formtarget`.
+
+```html:preview
+<form action="/default" method="post">
+  <zn-input name="query" label="Search"></zn-input>
+  <br />
+  <zn-button type="submit">Default Submit</zn-button>
+  <zn-button type="submit" formaction="/search" formmethod="get">Search</zn-button>
+</form>
+```
+
+### Dropdown Closer
+
+Use the `dropdown-closer` attribute to automatically close parent dropdowns when the button is clicked.
+
+```html:preview
+<zn-dropdown>
+  <zn-button slot="trigger">Menu</zn-button>
+  <zn-menu>
+    <zn-menu-item>
+      <zn-button dropdown-closer text>Close on Click</zn-button>
+    </zn-menu-item>
+    <zn-menu-item>
+      <zn-button text>Stays Open</zn-button>
+    </zn-menu-item>
+  </zn-menu>
+</zn-dropdown>
+```