@kubex/zinc 0.0.2 → 1.0.0

package/docs/pages/components/checkbox.md

@@ -0,0 +1,157 @@
+---
+meta:
+  title: Checkbox
+  description: Checkboxes allow the user to toggle an option on or off.
+layout: component
+unusedProperties: |
+  - Boolean `indeterminate
+---
+
+## Examples
+
+### Basic Checkbox
+
+```html:preview
+<zn-checkbox>Financial products access</zn-checkbox>
+```
+
+:::tip
+This component works with standard `<form>` elements. Please refer to the section
+on [form controls](/getting-started/form-controls) to learn more about form submission and client-side validation.
+:::
+
+### Description
+
+Add descriptive help text to individual checkbox items with the `description` attribute. For descriptions that contain
+HTML, use the `description` slot instead.
+
+```html:preview
+<zn-checkbox label="Awesome" description="Grants access to cash account and charge card features">Financial products access</zn-checkbox>
+```
+
+### Contained
+
+Add the `contained` attribute to draw a card-like container around a checkbox. Add to
+a [Checkbox Group](/components/checkbox-group) to draw a container around each checkbox in the group. This style is
+useful for giving more emphasis to a checkbox or list of checkboxes.
+
+```html:preview
+<zn-checkbox description="Grants access to cash account and charge card features" contained>Financial products access</zn-checkbox>
+<br/>
+<br/>
+<zn-checkbox-group label="Financial products permissions" contained>
+  <zn-checkbox description="Requires separate initiators and approvers">Initiate outbound transfers</zn-checkbox>
+  <zn-checkbox description="Requires separate initiators and approvers">Approve outbound transfers </zn-checkbox>
+  <zn-checkbox description="Applies to both cash account and charge card" disabled>Export transactions</zn-checkbox>
+</zn-checkbox-group>
+```
+
+:::tip
+When checkboxes are wrapped with [Checkbox Group](/components/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.
+:::
+
+### Selected Content
+
+Use the `selected-content` slot to display additional content (such as an input field) inside a `contained` checkbox
+when it is checked. The slot is unstyled by default. Use `::part(selected-content)` to style the content as needed.
+
+:::warning
+**Note:** `ts_form_for` doesn't support slots. The `selected-content` slot cannot be used for checkboxes rendered with
+`ts_form_for`.
+:::
+
+```html:preview
+<zn-checkbox style="width:100%" contained>Grant financial products access
+  <div slot="selected-content">
+    <p>A mobile number is required to grant this user access to financial products. The number will be used for login verification.</p>
+    <zn-input style="width: 280px;" label="Mobile number" type="tel" required optional-icon></div>
+</zn-checkbox>
+<style>
+ zn-checkbox::part(selected-content) {
+    font-size: 14px;
+    font-weight: normal;
+    color: #6D7176;
+  }
+</style>
+```
+
+### Checked
+
+Use the `checked` attribute to activate the checkbox.
+
+```html:preview
+<zn-checkbox checked>Financial products access</zn-checkbox>
+```
+
+### Indeterminate
+
+Use the `indeterminate` attribute to make the checkbox indeterminate.
+
+```html:preview
+<zn-checkbox indeterminate>Indeterminate</zn-checkbox>
+```
+
+### Disabled
+
+Use the `disabled` attribute to disable the checkbox.
+
+```html:preview
+<zn-checkbox disabled>Disabled</zn-checkbox>
+```
+
+### Sizes
+
+Use the `size` attribute to change a checkboxs size.
+
+```html:preview
+<zn-checkbox size="small">Small</zn-checkbox>
+<br />
+<zn-checkbox size="medium">Medium</zn-checkbox>
+<br />
+<zn-checkbox size="large">Large</zn-checkbox>
+```
+
+### 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>Check me</zn-checkbox>
+  <br/>
+  <zn-button type="submit" variant="primary" style="margin-top: 1rem;">Submit</zn-button>
+</form>
+<script type="module">
+  const form = document.querySelector('.custom-validity');
+  const checkbox = form.querySelector('zn-checkbox');
+  const errorMessage = `Do not forget to check me!`;
+
+  // Set initial validity as soon as the element is defined
+  customElements.whenDefined('zn-checkbox').then(async () =>
+  {
+    await checkbox.updateComplete;
+    checkbox.setCustomValidity(errorMessage);
+  });
+
+  // Update validity on change
+  checkbox.addEventListener('zn-change', () =>
+  {
+    checkbox.setCustomValidity(checkbox.checked ? '' : errorMessage);
+  });
+
+  // Wait for controls to be defined before attaching form listeners
+  await Promise.all([
+    customElements.whenDefined('zn-checkbox')
+  ]).then(() =>
+  {
+    form.addEventListener('submit', event =>
+    {
+      event.preventDefault();
+      alert('All fields are valid!');
+    });
+  });
+</script>
+```

package/docs/pages/components/chip.md

@@ -0,0 +1,61 @@
+---
+meta:
+  title: Chip
+  description:
+layout: component
+---
+
+```html:preview
+
+<zn-chip>Default</zn-chip>
+<zn-chip type="info">Info</zn-chip>
+<zn-chip type="warning">Warning</zn-chip>
+<zn-chip type="transparent">Transparent</zn-chip>
+<zn-chip type="error">Error</zn-chip>
+<zn-chip type="primary">Primary</zn-chip>
+<zn-chip type="success">Succuess</zn-chip>
+
+<br><br>
+
+<zn-chip icon="home">Default</zn-chip>
+<zn-chip icon="home" type="info">Info</zn-chip>
+<zn-chip icon="home" type="warning">Warning</zn-chip>
+<zn-chip icon="home" type="transparent">Transparent</zn-chip>
+<zn-chip icon="home" type="error">Error</zn-chip>
+<zn-chip icon="home" type="primary">Primary</zn-chip>
+<zn-chip icon="home" type="success">Succuess</zn-chip>
+<br><br>
+
+<zn-chip icon="home"></zn-chip>
+<zn-chip icon="home" type="info"></zn-chip>
+<zn-chip icon="home" type="warning"></zn-chip>
+<zn-chip icon="home" type="transparent"></zn-chip>
+<zn-chip icon="home" type="error"></zn-chip>
+<zn-chip icon="home" type="primary"></zn-chip>
+<zn-chip icon="home" type="success"></zn-chip>
+
+<br><br>
+
+<zn-chip icon="home" type="info">
+  <zn-button icon="close" slot="action" size="content" icon-size="12" color="transparent"></zn-button>
+  Info
+</zn-chip>
+
+<br><br>
+<zn-chip icon="home" type="transparent">Transparent</zn-chip>
+<zn-chip icon="home" type="transparent">Transparent</zn-chip>
+<zn-chip icon="home" type="transparent">Transparent</zn-chip>
+<zn-chip icon="home" type="transparent">Transparent</zn-chip>
+```
+
+## Examples
+
+### First Example
+
+TODO
+
+### Second Example
+
+TODO
+
+

package/docs/pages/components/collapsible.md

@@ -0,0 +1,52 @@
+---
+meta:
+  title: Collapsible
+  description:
+layout: component
+---
+
+```html:preview
+<zn-collapsible caption="This is the caption"
+                label="Optional label"
+                description="This is the description to accompany the caption"
+                label="The Label">
+  <span>Boo</span>
+  <zn-icon src="android"></zn-icon>
+</zn-collapsible>
+```
+
+## Examples
+
+### Default Open
+
+Used instead of directly setting the `expanded` attribute on the element.
+
+```html:preview
+<zn-collapsible caption="Default Open"
+                label="Toggle"
+                description="Setting the default state show the element in it's open state on load"
+                default="open">
+  <span>Boo</span>
+  <zn-icon src="android"></zn-icon>
+</zn-collapsible>
+```
+
+### Expanded Attribute
+
+```html:preview
+<zn-collapsible caption="Expanded Attribute" 
+                description="Adding the expanded attribute will open the collapsible"
+                expanded>
+  <zn-button>Button</zn-button>
+</zn-collapsible>
+```
+
+### Flush Attribute
+
+```html:preview
+<zn-collapsible caption="Flush" 
+                description="The flush attribute removes the left margin of the content"
+                flush>
+  <zn-button>Button</zn-button>
+</zn-collapsible>
+```

package/docs/pages/components/cols.md

@@ -0,0 +1,66 @@
+---
+meta:
+  title: Cols
+  description:
+layout: component
+---
+
+```html:preview
+
+<zn-cols layout="2,1" border>
+  <zn-panel>1</zn-panel>
+  <zn-panel>2</zn-panel>
+  <zn-panel>3</zn-panel>
+  <zn-panel>4</zn-panel>
+  <zn-panel>5</zn-panel>
+</zn-cols>
+```
+
+## Examples
+
+### First Example
+
+```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>
+    </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-cols>
+```
+
+### Second Example
+
+```html:preview
+
+<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>
+</zn-cols>
+```
+
+

package/docs/pages/components/confirm.md

@@ -0,0 +1,52 @@
+---
+meta:
+  title: Confirm
+  description:
+layout: component
+---
+
+```html:preview
+<zn-button id="action-trigger">Trigger Confirm Content</zn-button>
+<zn-confirm trigger="action-trigger"
+                    type="error"
+                    caption="Do Something"
+                    content="Are you sure you want to do that?">
+</zn-confirm>
+
+<zn-button id="action-trigger-2">Trigger Confirm Content with Form</zn-button>
+<zn-confirm trigger="action-trigger-2"
+                    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>
+                    </form>
+</zn-confirm>
+```
+
+## Examples
+
+### Announcement Confirmations
+
+```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-confirm>
+```
+
+### Second Example
+
+TODO
+
+

package/docs/pages/components/content-block.md

@@ -0,0 +1,108 @@
+---
+meta:
+  title: Content Block
+  description:
+layout: component
+---
+
+```html:preview
+
+<zn-content-block
+  time="16 Jun 2025, 13:00"
+  sender="John Smith"
+  avatar="JS"
+>
+  <div slot="text">Text formatted message goes here.</div>
+  <div slot="html">HTML <b>formatted</b> message <span style="color: cornflowerblue;">goes</span> here.</div>
+  <div slot="footer" style="padding: 10px;">
+    <small>
+      &copy; 2025 Example Corp. All trademarks are property of their respective owners.
+    </small>
+  </div>
+</zn-content-block>
+```
+
+## Examples
+
+### Basic Text
+
+```html:preview
+
+<zn-content-block
+  time="16 Jun 2025, 13:00"
+  sender="John Smith"
+  avatar="JS"
+>
+  <div slot="text">Text formatted message goes here.</div>
+</zn-content-block>
+
+```
+
+### Toggle Text & HTML
+
+```html:preview
+
+<zn-content-block
+  time="16 Jun 2025, 13:00"
+  sender="John Smith"
+  avatar="JS"
+>
+  <div slot="text">Text formatted message goes here.</div>
+  <div slot="html">HTML <b>formatted</b> message <span style="color: cornflowerblue;">goes</span> here.</div>
+</zn-content-block>
+```
+
+### Content Footer
+
+Basic Footer
+
+```html:preview
+
+<zn-content-block
+  time="16 Jun 2025, 13:00"
+  sender="John Smith"
+  avatar="JS"
+>
+  <div slot="text">Text formatted message goes here.</div>
+  <div slot="footer" style="padding: 10px;">
+    <small>
+      &copy; 2025 Example Corp. All trademarks are property of their respective owners.
+    </small>
+  </div>
+</zn-content-block>
+```
+
+Footer with Attachments
+
+```html:preview
+
+<zn-content-block
+  time="16 Jun 2025, 13:00"
+  sender="John Smith"
+  avatar="JS"
+>
+  <div slot="text">Text formatted message goes here.</div>
+  <div slot="footer">
+    <zn-collapsible caption="Attachments 2" flush>
+      <zn-sp divide no-gap flush style="max-height: 241px; overflow-y: auto;">
+        <a href="/" target="_blank" download>
+          <zn-tile caption="filename1.txt"
+                   description="10mb"
+                   inline>
+            <zn-icon slot="image" src="attach_file" size="20"></zn-icon>
+          </zn-tile>
+        </a>
+        <a href="/" target="_blank" download>
+          <zn-tile caption="filename2.png"
+                   description="100kb"
+                   inline>
+            <zn-icon slot="image" src="attach_file" size="20"></zn-icon>
+          </zn-tile>
+        </a>
+      </zn-sp>
+    </zn-collapsible>
+  </div>
+</zn-content-block>
+```
+
+

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

@@ -0,0 +1,22 @@
+---
+meta:
+  title: Copy Button
+  description:
+layout: component
+---
+
+```html:preview
+<zn-copy-button></zn-copy-button>
+```
+
+## Examples
+
+### First Example
+
+TODO
+
+### Second Example
+
+TODO
+
+

package/docs/pages/components/data-select.md

@@ -0,0 +1,54 @@
+---
+meta:
+  title: Data Select
+  description:
+layout: component
+---
+
+```html:preview
+
+<div class="form-spacing">
+  <zn-data-select label="Country" provider="country" name="country"></zn-data-select>
+  <zn-data-select label="Currency" provider="currency" name="currency"></zn-data-select>
+  <zn-data-select label="Color" provider="color" name="color"></zn-data-select>
+</div>
+```
+
+## Examples
+
+### Icon Position
+
+Icon position can be set to `start` or `end`. The default is `none`.
+
+```html:preview
+
+<div class="form-spacing">
+  <zn-data-select provider="country" name="country" value="GB" icon-position="start"></zn-data-select>
+  <zn-data-select provider="country" name="country" icon-position="end"></zn-data-select>
+</div>
+```
+
+### Clearable
+
+```html:preview
+
+<div class="form-spacing">
+  <zn-data-select provider="country" name="country" clearable></zn-data-select>
+  <zn-data-select provider="currency" name="currency" clearable></zn-data-select>
+  <zn-data-select provider="color" name="color" clearable></zn-data-select>
+</div>
+```
+
+### Filtered
+
+If you only want to display a handful of the provider results, you can use the `filter` attribute to filter the
+results.
+
+```html:preview
+
+<div class="form-spacing">
+  <zn-data-select provider="country" name="country" filter="gb,us,fr,de"></zn-data-select>
+  <zn-data-select provider="currency" name="currency" filter="gbp,usd,eur"></zn-data-select>
+  <zn-data-select provider="color" name="color" filter="red,green,blue"></zn-data-select>
+</div>
+```

package/docs/pages/components/data-table-filter.md

@@ -0,0 +1,23 @@
+---
+meta:
+  title: Data Table Filter
+  description:
+layout: component
+---
+
+```html:preview
+
+<zn-data-table-filter
+  filters="[{&quot;id&quot;:&quot;title&quot;,&quot;name&quot;:&quot;Title&quot;,&quot;operators&quot;:[&quot;eq&quot;]},{&quot;id&quot;:&quot;author&quot;,&quot;name&quot;:&quot;Author&quot;,&quot;operators&quot;:[&quot;eq&quot;,&quot;fuzzy&quot;]},{&quot;id&quot;:&quot;genre&quot;,&quot;name&quot;:&quot;Genre&quot;,&quot;options&quot;:{&quot;action&quot;:&quot;Action&quot;,&quot;comedy&quot;:&quot;Comedy&quot;,&quot;drama&quot;:&quot;Drama&quot;,&quot;fantasy&quot;:&quot;Fantasy&quot;,&quot;horror&quot;:&quot;Horror&quot;,&quot;mystery&quot;:&quot;Mystery&quot;,&quot;romance&quot;:&quot;Romance&quot;,&quot;thriller&quot;:&quot;Thriller&quot;,&quot;sci-fi&quot;:&quot;ScienceFiction&quot;},&quot;maxOptionsVisible&quot;:&quot;3&quot;,&quot;operators&quot;:[&quot;eq&quot;,&quot;in&quot;]},{&quot;id&quot;:&quot;rating&quot;,&quot;name&quot;:&quot;Rating&quot;,&quot;type&quot;:&quot;number&quot;,&quot;operators&quot;:[&quot;eq&quot;,&quot;gt&quot;,&quot;gte&quot;,&quot;lt&quot;,&quot;lte&quot;]},{&quot;id&quot;:&quot;created&quot;,&quot;name&quot;:&quot;Created&quot;,&quot;type&quot;:&quot;date&quot;,&quot;operators&quot;:[&quot;eq&quot;,&quot;before&quot;,&quot;after&quot;]}]">
+</zn-data-table-filter>
+```
+
+## Examples
+
+### First Example
+
+TODO
+
+### Second Example
+
+TODO

package/docs/pages/components/data-table-sort.md

@@ -0,0 +1,20 @@
+---
+meta:
+  title: Data Table Sort
+  description:
+layout: component
+---
+
+```html:preview
+<zn-data-table-sort></zn-data-table-sort>
+```
+
+## Examples
+
+### First Example
+
+TODO
+
+### Second Example
+
+TODO