@kubex/zinc 0.0.2 → 1.0.0

package/docs/pages/components/alert.md

@@ -0,0 +1,45 @@
+---
+meta:
+  title: Alert
+  description: Alerts are used to display important messages inline or as toast notifications.
+layout: component
+---
+
+## Examples
+
+### Basic Alert
+
+```html:preview
+
+<zn-alert caption="This is an alert">This is the Description</zn-alert>
+```
+
+### With Icon
+
+```html:preview
+
+<zn-alert caption="This is an alert" icon="House" level="note">
+This is the Description
+  <zn-button slot="actions" color="transparent">View All</zn-button>
+</zn-alert>
+```
+
+### Levels
+
+```html:preview
+
+<zn-alert caption="This is an alert" level="primary">This is the Description</zn-alert>
+<zn-alert caption="This is an alert" level="error">This is the Description</zn-alert>
+<zn-alert caption="This is an alert" level="info">This is the Description</zn-alert>
+<zn-alert caption="This is an alert" level="success">This is the Description</zn-alert>
+<zn-alert caption="This is an alert" level="warning">This is the Description</zn-alert>
+```
+
+### sizes
+
+```html:preview
+
+<zn-alert caption="This is an alert" size="small">This is the Description</zn-alert>
+<zn-alert caption="This is an alert" size="medium">This is the Description</zn-alert>
+<zn-alert caption="This is an alert" size="large">This is the Description</zn-alert>
+```

package/docs/pages/components/bulk-actions.md

@@ -0,0 +1,26 @@
+---
+meta:
+  title: Bulk Actions
+  description:
+layout: component
+---
+
+```html:preview
+
+<zn-bulk-actions
+  actions="[{&quot;id&quot;:&quot;agent&quot;,&quot;name&quot;:&quot;agent&quot;,&quot;options&quot;:{&quot;agent1&quot;:&quot;Agent 1&quot;,&quot;agent2&quot;:&quot;Agent 2&quot;}},{&quot;id&quot;:&quot;company&quot;,&quot;name&quot;:&quot;company&quot;,&quot;options&quot;:{&quot;company1&quot;:&quot;Company 1&quot;,&quot;company2&quot;:&quot;Company 2&quot;}},{&quot;id&quot;:&quot;impact&quot;,&quot;name&quot;:&quot;impact&quot;,&quot;options&quot;:{&quot;0&quot;:&quot;None&quot;,&quot;10&quot;:&quot;Minor&quot;,&quot;20&quot;:&quot;Moderate&quot;,&quot;30&quot;:&quot;Significant&quot;,&quot;40&quot;:&quot;Extensive&quot;}},{&quot;id&quot;:&quot;priority&quot;,&quot;name&quot;:&quot;priority&quot;,&quot;options&quot;:{&quot;priority1&quot;:&quot;Priority 1&quot;,&quot;priority2&quot;:&quot;Priority 2&quot;}}]"
+  name="actions">
+  </zn-bulk-actions>
+```
+
+## Examples
+
+### First Example
+
+TODO
+
+### Second Example
+
+TODO
+
+

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

@@ -0,0 +1,78 @@
+---
+meta:
+  title: Button Group
+  description:
+layout: component
+---
+
+```html:preview
+
+<zn-button-group>
+  <zn-button>First</zn-button>
+  <zn-button>Inner 1</zn-button>
+  <zn-button>Inner 2</zn-button>
+  <zn-button>Last</zn-button>
+</zn-button-group>
+```
+
+## Examples
+
+### Grow Example
+
+```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-group>
+```
+
+### Start Example
+
+```html:preview
+
+<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-group>
+```
+
+### Gap Example
+
+```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-group>
+```
+
+### Grow Gap Example
+
+```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-group>
+```
+
+### Vertical Example
+
+```html:preview
+
+<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>
+</zn-button-group>
+```

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

@@ -0,0 +1,127 @@
+---
+meta:
+  title: Button Menu
+  description:
+layout: component
+---
+
+```html:preview
+
+<zn-button-menu limit="4">
+  <zn-button id="trigger-something" color="error" primary>Cancel</zn-button>
+  <zn-confirm type="error"
+              trigger="trigger-something"
+              caption="Cancel Action"
+              content="Are you sure you want to cancel this action">
+  </zn-confirm>
+
+  <zn-button primary color="error" icon="house">Something sdf</zn-button>
+  <zn-button id="trigger-anotherone" color="warning"  icon="house">Another One</zn-button>
+  <zn-confirm type="error"
+              trigger="trigger-anotherone"
+              caption="Another Action"
+              content="Are you sure you?">
+  </zn-confirm>
+</zn-button-menu>
+```
+
+## Examples
+
+### Button Limit
+
+You can limit the number of buttons that are shown in the menu. The rest will be hidden in a dropdown.
+
+```html:preview
+
+<zn-button-menu limit="2">
+  <zn-button primary>Something sdf</zn-button>
+  <zn-button >sd</zn-button>
+  <zn-button secondary>fdf</zn-button>
+  <zn-button secondary>fsdsfdf</zn-button>
+  <zn-button >fd</zn-button>
+  <zn-button category="edit">fdsfdf</zn-button>
+  <zn-button primary category="edit">d</zn-button>
+  <zn-button secondary category="view">dfsf</zn-button>
+</zn-button-menu>
+```
+
+### Button Max (1)
+
+```html:preview
+
+<zn-button-menu max-level="1">
+  <zn-button primary>Primary</zn-button>
+  <zn-button secondary>Secondary</zn-button>
+  <zn-button>Default</zn-button>
+  <zn-button>Default 2</zn-button>
+</zn-button-menu>
+```
+
+### Button Max (2)
+
+```html:preview
+
+<zn-button-menu max-level="2">
+  <zn-button primary>Primary</zn-button>
+  <zn-button secondary>Secondary</zn-button>
+  <zn-button>Default</zn-button>
+  <zn-button>Default 2</zn-button>
+</zn-button-menu>
+```
+
+### Button Max (3)
+
+```html:preview
+
+<zn-button-menu max-level="3">
+  <zn-button primary>Primary</zn-button>
+  <zn-button secondary>Secondary</zn-button>
+  <zn-button>Default</zn-button>
+  <zn-button>Default 2</zn-button>
+</zn-button-menu>
+```
+
+### Button Max (2) - No Primary / Secondary
+
+```html:preview
+
+<zn-button-menu max-level="2">
+  <zn-button>Default</zn-button>
+  <zn-button>Default 2</zn-button>
+</zn-button-menu>
+```
+
+### Max Width
+
+Below is an example of a button menu with a maximum width of 200px. The menu will not exceed this width, even if the
+buttons inside it are wider.
+
+```html:preview
+
+<zn-button-menu max-width="300">
+  <zn-button primary>Something sdf</zn-button>
+  <zn-button >sd</zn-button>
+  <zn-button secondary>fdf</zn-button>
+  <zn-button secondary>fsdsfdf</zn-button>
+  <zn-button >fd</zn-button>
+  <zn-button category="edit">fdsfdf</zn-button>
+  <zn-button primary category="edit">d</zn-button>
+  <zn-button secondary category="view">dfsf</zn-button>
+</zn-button-menu>
+```
+
+### No Gap
+
+```html:preview
+
+<zn-button-menu no-gap max-width="200">
+  <zn-button primary>Something sdf</zn-button>
+  <zn-button >sd</zn-button>
+  <zn-button secondary>fdf</zn-button>
+  <zn-button secondary>fsdsfdf</zn-button>
+  <zn-button >fd</zn-button>
+  <zn-button category="edit">fdsfdf</zn-button>
+  <zn-button primary category="edit">d</zn-button>
+  <zn-button secondary category="view">dfsf</zn-button>
+</zn-button-menu>
+```

package/docs/pages/components/button.md

@@ -0,0 +1,80 @@
+---
+meta:
+  title: Button
+  description: Buttons represent actions that are available to the user.
+layout: component
+---
+
+```html:preview
+<zn-button>Button</zn-button>
+```
+
+## Examples
+
+### Variants
+
+Use the `color` attribute to set the button's color.
+
+```html:preview
+<zn-button color="default">Default</zn-button>
+<zn-button color="secondary">Secondary</zn-button>
+<zn-button color="success">Success</zn-button>
+<zn-button color="info">Info</zn-button>
+<zn-button color="warning">Warning</zn-button>
+<zn-button color="error">Error</zn-button>
+<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.
+
+```html:preview
+<zn-button outline>Outline</zn-button>
+<zn-button outline color="secondary">Outline</zn-button>
+<zn-button outline color="success">Outline</zn-button>
+<zn-button outline color="info">Outline</zn-button>
+<zn-button outline color="warning">Outline</zn-button>
+<zn-button outline color="error">Outline</zn-button>
+<zn-button outline color="transparent">Outline</zn-button>
+```
+
+### Text
+
+Use the `text` attribute to set the button's style to text.
+
+```html:preview
+<zn-button text>Outline</zn-button>
+<zn-button text color="secondary">Text</zn-button>
+<zn-button text color="success">Text</zn-button>
+<zn-button text color="info">Text</zn-button>
+<zn-button text color="warning">Text</zn-button>
+<zn-button text color="error">Text</zn-button>
+<zn-button text color="transparent">Text</zn-button>
+```
+
+### Icon
+
+Use the `icon` attribute to set the button's icon.
+
+```html:preview
+<zn-button icon="add_circle">Icon</zn-button>
+<zn-button icon="file_download" color="secondary">Icon</zn-button>
+<zn-button icon="check" color="success">Icon</zn-button>
+<zn-button icon="help" color="info">Icon</zn-button>
+<zn-button icon="report_problem" color="warning">Icon</zn-button>
+<zn-button icon="cancel" color="error">Icon</zn-button>
+<zn-button icon="pending" color="transparent">Icon</zn-button>
+```

package/docs/pages/components/chart.md

@@ -0,0 +1,27 @@
+---
+meta:
+  title: Data Chart
+  description:
+layout: component
+---
+
+```html:preview
+<zn-chart 
+  type="area" 
+  categories="[&quot;Jan&quot;,&quot;Feb&quot;,&quot;Mar&quot;,&quot;Apr&quot;,&quot;May&quot;,&quot;Jun&quot;,&quot;Jul&quot;,&quot;Aug&quot;,&quot;Sep&quot;]" 
+  data="[{&quot;name&quot;:&quot;Series 1&quot;,&quot;data&quot;:[30,40,45,50,49,60,70,91,125]}]" 
+  height="300">
+</zn-chart>
+```
+
+## Examples
+
+### First Example
+
+TODO
+
+### Second Example
+
+TODO
+
+

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

@@ -0,0 +1,196 @@
+---
+meta:
+  title: Checkbox Group
+  description:
+layout: component
+---
+
+## Examples
+
+### Basic Checkbox Group
+
+A basic checkbox group lays out multiple checkbox items vertically.
+
+```html:preview
+<zn-checkbox-group label="Financial products permissions" name="a">
+  <zn-checkbox value="initiate-outbound">Initiate outbound transfers</zn-checkbox>
+  <zn-checkbox value="approve-outbound">Approve outbound transfers </zn-checkbox>
+  <zn-checkbox value="export">Export transactions</zn-checkbox>
+</zn-checkbox-group>
+```
+
+### Help Text
+
+Add descriptive help text to a checkbox group with the `help-text` attribute. For help texts that contain HTML, use the
+`help-text` slot instead.
+
+```html:preview
+<zn-checkbox-group label="Financial products permissions" help-text="Outbound transfers require separate initiators and approvers" name="a">
+  <zn-checkbox value="initiate-outbound">Initiate outbound transfers</zn-checkbox>
+  <zn-checkbox value="approve-outbound">Approve outbound transfers </zn-checkbox>
+  <zn-checkbox value="export">Export transactions</zn-checkbox>
+</zn-checkbox-group>
+```
+
+### Label with Tooltip
+
+Use the `label-tooltip` attribute to add text that appears in a tooltip triggered by an info icon next to the label.
+
+:::tip
+**Usage:** Use a **label tooltip** to provide helpful but non-essential instructions or examples to guide people when
+making a selection from the checkbox group. Use **help text** to communicate instructions or requirements for making a
+selection without errors.
+:::
+
+```html:preview
+<zn-checkbox-group name="a" label="Financial products permissions" help-text="Outbound transfers require separate initiators and approvers" label-tooltip="These apply to cash account only">
+  <zn-checkbox value="initiate-outbound">Initiate outbound transfers</zn-checkbox>
+  <zn-checkbox value="approve-outbound">Approve outbound transfers </zn-checkbox>
+  <zn-checkbox value="export">Export transactions</zn-checkbox>
+</zn-checkbox-group>
+```
+
+### Horizontal Checkbox Group
+
+Use the `horizontal` attribute to lay out multiple checkbox items horizontally.
+
+:::tip
+**Making the horizontal checkbox group responsive:** Use a container query to adjust the layout of the checkbox group's
+`form-control-input` part (which wraps the checkbox items) at a custom target breakpoint (the container's width when the
+horizontal layout breaks). In the example below, a container query checks the width of the checkbox group container and
+switches the layout to vertical (setting `flex-direction` to `column`) when the container becomes too narrow for a
+horizontal layout.
+:::
+
+```html:preview
+<zn-checkbox-group name="a" id="permissions" label="Financial products permissions" horizontal>
+  <zn-checkbox value="manage-transfers">Manage transfers</zn-checkbox>
+  <zn-checkbox value="export">Export transactions</zn-checkbox>
+</zn-checkbox-group>
+
+<style>
+  zn-checkbox-group[id="permissions"] {
+    container-type: inline-size;
+    container-name: permissions;
+  }
+
+  @container permissions (max-width: 400px) {
+    zn-checkbox-group[id="permissions"]::part(form-control-input) {
+      flex-direction: column;
+    }
+  }
+</style>
+```
+
+### Contained Checkbox Group
+
+Use the `contained` attribute to draw a card-like container around each checkbox item in the checkbox group. This style
+is useful for giving more emphasis to the list of options.
+
+This option can be combined with the `horizontal` attribute.
+
+```html:preview
+<zn-checkbox-group name="a" label="Financial products permissions" help-text="Outbound transfers require separate initiators and approvers" contained>
+  <zn-checkbox value="initiate-outbound">Initiate outbound transfers</zn-checkbox>
+  <zn-checkbox value="approve-outbound">Approve outbound transfers </zn-checkbox>
+  <zn-checkbox value="export">Export transactions</zn-checkbox>
+</zn-checkbox-group>
+<br/>
+<br/>
+<zn-checkbox-group name="b" label="Financial products permissions" help-text="Outbound transfers require separate initiators and approvers" contained horizontal>
+  <zn-checkbox value="initiate-outbound">Initiate outbound transfers</zn-checkbox>
+  <zn-checkbox value="approve-outbound">Approve outbound transfers </zn-checkbox>
+</zn-checkbox-group>
+```
+
+:::tip
+When [checkboxes](/components/checkbox) are wrapped with the Checkbox Group , adding the `contained` attribute to the
+parent Checkbox Group or to _any_ checkbox in the group will create `contained` checkboxes for the entire group.
+:::
+
+### Disabling Options
+
+Checkboxes can be disabled by adding the `disabled` attribute to the respective options inside the checkbox group.
+
+```html:preview
+<zn-checkbox-group name="a"  label="Financial products permissions" help-text="Exporting is currently disabled for all users" required>
+  <zn-checkbox value="initiate-outbound">Initiate outbound transfers</zn-checkbox>
+  <zn-checkbox value="approve-outbound">Approve outbound transfers </zn-checkbox>
+  <zn-checkbox value="export" disabled>Export transactions</zn-checkbox>
+</zn-checkbox-group>
+```
+
+### Validation
+
+Set the `required` attribute to make selecting at least one option mandatory. If at least one value has not been
+selected, it will prevent the form from submitting and display an error message.
+
+```html:preview
+<form class="validation">
+  <zn-checkbox-group name="a" label="Select at least one option" required>
+    <zn-checkbox value="option-1">Option 1</zn-checkbox>
+    <zn-checkbox value="option-2">Option 2</zn-checkbox>
+    <zn-checkbox value="option-3">Option 3</zn-checkbox>
+  </zn-checkbox-group>
+  <br />
+  <zn-button type="submit" variant="primary">Submit</zn-button>
+</form>
+
+<script type="module">
+  const form = document.querySelector('.validation');
+
+  // Wait for controls to be defined before attaching form listeners
+  await Promise.all([
+    customElements.whenDefined('zn-checkbox-group'),
+  ]).then(() => {
+    form.addEventListener('submit', event => {
+      event.preventDefault();
+      alert('All fields are valid!');
+    });
+  });
+</script>
+```
+
+### Custom Validity
+
+Use the `setCustomValidity()` method to set a custom validation message. This will prevent the form from submitting and
+make the browser display the error message you provide. To clear the error, call this function with an empty string.
+
+```html:preview
+<form class="custom-validity">
+  <zn-checkbox-group name="a" label="Select the third option" required>
+    <zn-checkbox value="option-1">You can optionally choose me</zn-checkbox>
+    <zn-checkbox value="option-2">I'm optional too</zn-checkbox>
+    <zn-checkbox value="option-3">You must choose me</zn-checkbox>
+  </zn-checkbox-group>
+  <br />
+  <zn-button type="submit" variant="primary">Submit</zn-button>
+</form>
+
+<script type="module">
+  const form = document.querySelector('.custom-validity');
+  const checkboxGroup = form.querySelector('zn-checkbox-group');
+  const errorMessage = 'You must choose the last option';
+
+  // Set initial validity as soon as the element is defined
+  customElements.whenDefined('zn-checkbox').then(() => {
+    checkboxGroup.setCustomValidity(errorMessage);
+  });
+
+  // Update validity when a selection is made
+  form.addEventListener('zn-change', () => {
+    const isValid = checkboxGroup.value.some(value => value.includes('option-3'));
+    checkboxGroup.setCustomValidity(isValid ? '' : errorMessage);
+  });
+
+  // Wait for controls to be defined before attaching form listeners
+  await Promise.all([
+    customElements.whenDefined('zn-checkbox-group'),
+  ]).then(() => {
+    form.addEventListener('submit', event => {
+      event.preventDefault();
+      alert('All fields are valid!');
+    });
+  });
+</script>
+```