@kubex/zinc 0.0.2 → 1.0.0

package/docs/pages/components/input.md

@@ -0,0 +1,261 @@
+---
+meta:
+  title: Input
+  description: Inputs collect data from the user.
+layout: component
+unusedProperties: |
+  - Size `small`
+  - Booleans `pill`
+---
+
+## Examples
+
+### Basic Input with Label
+
+Use the `label` attribute to give the input an accessible label.
+
+```html:preview
+<zn-input label="Name"></zn-input>
+```
+
+:::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.
+:::
+
+### Help Text
+
+Add descriptive help text to an input with the `help-text` attribute. For help text that contains HTML, use the
+`help-text` slot instead.
+
+```html:preview
+<zn-input label="Previous legal names" help-text="List full names, separated by a semicolon"></zn-input>
+<br />
+<zn-input label="Previous legal names">
+  <div slot="help-text">List <strong>full</strong> names, separated by a <strong>semicolon</strong></div>
+</zn-input>
+```
+
+### 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
+filling in the input. Use **help text** to communicate instructions or requirements for filling in the input without
+errors.
+:::
+
+```html:preview
+<zn-input label="Previous legal names" label-tooltip="Names previously used on official government documents, such as passport, driver license, or ID card" help-text="List full names, separated by a semicolon"></zn-input>
+```
+
+### Label with Context Note
+
+Use the `context-note` attribute to add text that provides additional context or reference. For text that contains HTML,
+use the `context-note` slot. **Note:** On small screens the context note will wrap below the label if there isn't enough
+room next to the label.
+
+:::tip
+**Usage:** Use a **context note** to provide secondary contextual data, especially dynamic data, that would help people
+when filling in the input. Use **help text** to communicate instructions or requirements for filling in the input
+without errors.
+:::
+
+```html:preview
+<zn-input type="currency" label="Amount" context-note="$10,000.29 available" help-text="You can transfer up to $2,500 per day"></zn-input>
+<br />
+<zn-input type="currency" label="Amount" help-text="You can transfer up to $2,500 per day">
+  <div slot="context-note"><strong>$10,000.29</strong> available</div>
+</zn-input>
+```
+
+### Placeholders
+
+Use the `placeholder` attribute to add a placeholder.
+
+```html:preview
+<zn-input placeholder="Type something"></zn-input>
+```
+
+### Clearable
+
+Add the `clearable` attribute to add a clear button when the input has content.
+
+```html:preview
+<zn-input label="Clearable input" value="I can be cleared!" clearable></zn-input>
+```
+
+### Toggle Password
+
+Add the `password-toggle` attribute to add a toggle button that will show the password when activated.
+
+```html:preview
+<zn-input type="password" label="Password" password-toggle></zn-input>
+```
+
+### Disabled
+
+Use the `disabled` attribute to disable an input.
+
+```html:preview
+<zn-input label="Disabled input" disabled></zn-input>
+```
+
+### Sizes
+
+Use the `size` attribute to change an input's size. Size `medium` is the input's default.
+
+```html:preview
+<zn-input label="small input" size="small"></zn-input>
+<br />
+<zn-input label="Medium input" size="medium"></zn-input>
+<br />
+<zn-input label="Large input" size="large"></zn-input>
+```
+
+### Pill
+
+Use the `pill` attribute to give inputs rounded edges.
+
+:::warning
+**Note:** Pill inputs are not a standard input pattern in our Design System
+:::
+
+```html:preview
+<zn-input label="Medium pill" pill></zn-input>
+<br />
+<zn-input label="Large pill" size="large" pill></zn-input>
+```
+
+### Input Types
+
+The `type` attribute controls the type of input the browser renders. As shown in the examples below, some input types
+have default prefix and suffix elements. Not all available types are shown below. See
+the [Properties table](#properties) for the full list of options.
+
+```html:preview
+<zn-input type="currency" label="Input type: Currency"><div slot="help-text">Has <code>$</code> prefix and <code>USD</code> suffix by default and native input type set to <code>number</code>. The currency input does <strong>NOT</strong> have input masking at this time.</div></zn-input>
+<br />
+<zn-input type="date" label="Input type: Date" placeholder="Date" help-text="Calendar icon opens the browser default date picker"></zn-input>
+<br />
+<zn-input type="email" label="Input type: Email">
+  <div slot="help-text">Has no icon by default</div>
+</zn-input>
+<br />
+<zn-input type="email" label="Input type: Email, with icon" optional-icon>
+  <div slot="help-text">Use the <code>optional-icon</code> attribute to display the default optional icon for email inputs </div>
+</zn-input>
+<br />
+<zn-input type="tel" label="Input type: Tel">
+  <div slot="help-text">Has no icon by default</div>
+</zn-input>
+<br />
+<zn-input type="tel" label="Input type: Tel, with icon" optional-icon>
+  <div slot="help-text">Use the <code>optional-icon</code> attribute to display the default optional icon for phone number inputs </div>
+</zn-input>
+<br />
+<zn-input type="number" label="Input type: Number"></zn-input>
+<br />
+<zn-input type="number" label="Input type: Number, no spin buttons" no-spin-buttons>
+    <div slot="help-text">Use the <code>no-spin-buttons</code> attribute to hide the browser's default increment/decrement buttons for number inputs</div>
+</zn-input>
+<br />
+<zn-input type="search" label="Input type: Search" clearable><div slot="help-text">Has a search icon by default. Use the <code>clearable</code> attribute to make the input clearable</div></zn-input>
+<br />
+```
+
+### Min Max Validation
+
+```html:preview
+<zn-input type="date" label="Input type: Date" placeholder="Date" help-text="Calendar icon opens the browser default date picker" min="01/01/1970"></zn-input>
+<br />
+<zn-input type="number" label="Input type: Number" min="10" max="100"></zn-input>
+```
+
+### Prefix & Suffix Icons
+
+Several input types have specific `prefix` and `suffix` elements or icons that are displayed by default. You can also
+use the `prefix` and `suffix` slots to add icons or text elements for other use cases.
+
+Follow these general guidelines when adding prefix and suffix icons to the input:
+
+- Use the `zn-icon` component
+- In general **don't** resize icons or change their color from the default already set by the `zn-input` component
+
+:::warning
+**Note:** If you find your use case requires a different size or color from the default, bring it up to the Design Team
+so that we can consider whether the pattern needs to be updated.
+:::
+:::warning
+**Note:** `ts_form_for` doesn't support slots. Prefix and suffix icons cannot be added when rendering `zn-input` with
+`ts_form_for`. However, the `optional-icon` attribute can be set to `true` to display default icons for input types
+`currency`, `email`, `tel`, and `search`.
+:::
+
+```html:preview
+<zn-input label="Prefix icon example: DO">
+  <zn-icon src="rocket_launch" slot="prefix"></zn-icon>
+</zn-input>
+<br />
+<br />
+<zn-input label="Prefix icon example: RESIZED" help-text="Same icon as above, resized. Note that a larger prefix or suffix icon will push the input text out of alignment." value="Input text, shifted 4px right due to icon size">
+  <zn-icon src="rocket_launch" style="--icon-size: 24px" slot="prefix"></zn-icon>
+</zn-input>
+```
+
+### Prefix Submit Button
+
+Use the `type="submit"` attribute to create a submit button as a Suffix to the input. This is useful for search inputs.
+
+```html:preview
+<zn-input label="Search" placeholder="Search">
+  <zn-button slot="suffix" type="submit" variant="primary" outline>Search</zn-button>
+</zn-input>
+```
+
+Or as a Prefix
+
+```html:preview
+<zn-input label="Search" placeholder="Search">
+  <zn-button slot="prefix" type="submit" variant="primary">Search</zn-button>
+</zn-input>
+```
+
+### Customizing Label Position
+
+Use [CSS parts](#css-parts) to customize the way form controls are drawn. This example uses CSS grid to position the
+label to the left of the control, but the possible orientations are nearly endless. The same technique works for inputs,
+textareas, radio groups, and similar form controls.
+
+```html:preview
+<zn-input class="label-on-left" label="Name" help-text="Enter your name"></zn-input>
+<zn-input class="label-on-left" label="Email" type="email" help-text="Enter your email"></zn-input>
+<zn-textarea class="label-on-left" label="Bio" help-text="Tell us something about yourself"></zn-textarea>
+
+<style>
+  .label-on-left {
+    --label-width: 3.75rem;
+    --gap-width: 1rem;
+  }
+
+  .label-on-left + .label-on-left {
+    margin-top: var(--zn-spacing-medium);
+  }
+
+  .label-on-left::part(form-control) {
+    display: grid;
+    grid: auto / var(--label-width) 1fr;
+    gap: var(--zn-spacing-3x-small) var(--gap-width);
+    align-items: center;
+  }
+
+  .label-on-left::part(form-control-label) {
+    text-align: right;
+  }
+
+  .label-on-left::part(form-control-help-text) {
+    grid-column-start: 2;
+  }
+</style>
+```

package/docs/pages/components/item.md

@@ -0,0 +1,78 @@
+---
+meta:
+  title: Item
+  description:
+layout: component
+---
+
+```html:preview
+
+<zn-sp divide no-gap>
+  <zn-item caption="Full name" edit-on-hover>
+    <zn-inline-edit name="name" 
+                    value="EN"
+                    options="{&quot;&quot;:&quot;-&quot;,&quot;EN&quot;:&quot;English&quot;,&quot;IT&quot;:&quot;Italian&quot;,&quot;FR&quot;:&quot;French&quot;,&quot;DE&quot;:&quot;German&quot;,&quot;ES&quot;:&quot;Spanish&quot;,&quot;PT&quot;:&quot;Portuguese&quot;,&quot;AB&quot;:&quot;Abkhazian&quot;,&quot;OM&quot;:&quot;Afan\/Oromoor\/Oriya&quot;,&quot;AA&quot;:&quot;Afar&quot;,&quot;AF&quot;:&quot;Afrikaans&quot;,&quot;SQ&quot;:&quot;Albanian&quot;,&quot;AM&quot;:&quot;Amharic&quot;,&quot;AR&quot;:&quot;Arabic&quot;,&quot;HY&quot;:&quot;Armenian&quot;,&quot;AS&quot;:&quot;Assamese&quot;,&quot;AY&quot;:&quot;Aymara&quot;,&quot;AZ&quot;:&quot;Azerbaijani&quot;,&quot;BA&quot;:&quot;Bashkir&quot;,&quot;EU&quot;:&quot;Basque&quot;,&quot;BN&quot;:&quot;Bengali\/Bangla&quot;,&quot;DZ&quot;:&quot;Bhutani&quot;,&quot;BH&quot;:&quot;Bihari&quot;,&quot;BI&quot;:&quot;Bislama&quot;,&quot;BR&quot;:&quot;Breton&quot;,&quot;BG&quot;:&quot;Bulgarian&quot;,&quot;MY&quot;:&quot;Burmese&quot;,&quot;BE&quot;:&quot;Byelorussian&quot;,&quot;KM&quot;:&quot;Cambodian&quot;,&quot;CA&quot;:&quot;Catalan&quot;,&quot;ZH&quot;:&quot;Chinese&quot;,&quot;CO&quot;:&quot;Corsican&quot;,&quot;HR&quot;:&quot;Croatian&quot;,&quot;CS&quot;:&quot;Czech&quot;,&quot;DA&quot;:&quot;Danish&quot;,&quot;NL&quot;:&quot;Dutch&quot;,&quot;EO&quot;:&quot;Esperanto&quot;,&quot;ET&quot;:&quot;Estonian&quot;,&quot;FO&quot;:&quot;Faeroese&quot;,&quot;FJ&quot;:&quot;Fiji&quot;,&quot;FI&quot;:&quot;Finnish&quot;,&quot;FY&quot;:&quot;Frisian&quot;,&quot;GL&quot;:&quot;Galician&quot;,&quot;KA&quot;:&quot;Georgian&quot;,&quot;EL&quot;:&quot;Greek&quot;,&quot;KL&quot;:&quot;Greenlandic&quot;,&quot;GN&quot;:&quot;Guarani&quot;,&quot;GU&quot;:&quot;Gujarati&quot;,&quot;HA&quot;:&quot;Hausa&quot;,&quot;HE&quot;:&quot;Hebrew&quot;,&quot;HI&quot;:&quot;Hindi&quot;,&quot;HU&quot;:&quot;Hungarian&quot;,&quot;IS&quot;:&quot;Icelandic&quot;,&quot;ID&quot;:&quot;Indonesian&quot;,&quot;IA&quot;:&quot;Interlingua&quot;,&quot;IE&quot;:&quot;Interlingue&quot;,&quot;IK&quot;:&quot;Inupiak&quot;,&quot;GA&quot;:&quot;Irish&quot;,&quot;JA&quot;:&quot;Japanese&quot;,&quot;JV&quot;:&quot;Javanese&quot;,&quot;KN&quot;:&quot;Kannada&quot;,&quot;KS&quot;:&quot;Kashmiri&quot;,&quot;KK&quot;:&quot;Kazakh&quot;,&quot;RW&quot;:&quot;Kinyarwanda&quot;,&quot;KY&quot;:&quot;Kirghiz&quot;,&quot;RN&quot;:&quot;Kirundi&quot;,&quot;KO&quot;:&quot;Korean&quot;,&quot;KU&quot;:&quot;Kurdish&quot;,&quot;LO&quot;:&quot;Laothian&quot;,&quot;LA&quot;:&quot;Latin&quot;,&quot;LV&quot;:&quot;Latvian\/Lettish&quot;,&quot;LN&quot;:&quot;Lingala&quot;,&quot;LT&quot;:&quot;Lithuanian&quot;,&quot;MK&quot;:&quot;Macedonian&quot;,&quot;MG&quot;:&quot;Malagasy&quot;,&quot;MS&quot;:&quot;Malay&quot;,&quot;ML&quot;:&quot;Malayalam&quot;,&quot;MT&quot;:&quot;Maltese&quot;,&quot;MI&quot;:&quot;Maori&quot;,&quot;MR&quot;:&quot;Marathi&quot;,&quot;MO&quot;:&quot;Moldavian&quot;,&quot;MN&quot;:&quot;Mongolian&quot;,&quot;NA&quot;:&quot;Nauru&quot;,&quot;NB&quot;:&quot;Norwegian Bokm\u00e5l&quot;,&quot;NE&quot;:&quot;Nepali&quot;,&quot;NO&quot;:&quot;Norwegian&quot;,&quot;OC&quot;:&quot;Occitan&quot;,&quot;PS&quot;:&quot;Pashto\/Pushto&quot;,&quot;FA&quot;:&quot;Persian&quot;,&quot;PL&quot;:&quot;Polish&quot;,&quot;PA&quot;:&quot;Punjabi&quot;,&quot;QU&quot;:&quot;Quechua&quot;,&quot;RM&quot;:&quot;Rhaeto-Romance&quot;,&quot;RO&quot;:&quot;Romanian&quot;,&quot;RU&quot;:&quot;Russian&quot;,&quot;SM&quot;:&quot;Samoan&quot;,&quot;SG&quot;:&quot;Sangro&quot;,&quot;SA&quot;:&quot;Sanskrit&quot;,&quot;GD&quot;:&quot;Scots\/Gaelic&quot;,&quot;SR&quot;:&quot;Serbian&quot;,&quot;SH&quot;:&quot;Serbo-Croatian&quot;,&quot;ST&quot;:&quot;Sesotho&quot;,&quot;TN&quot;:&quot;Setswana&quot;,&quot;SN&quot;:&quot;Shona&quot;,&quot;SD&quot;:&quot;Sindhi&quot;,&quot;SE&quot;:&quot;Northern Sami&quot;,&quot;SI&quot;:&quot;Singhalese&quot;,&quot;SS&quot;:&quot;Siswati&quot;,&quot;SK&quot;:&quot;Slovak&quot;,&quot;SL&quot;:&quot;Slovenian&quot;,&quot;SO&quot;:&quot;Somali&quot;,&quot;SU&quot;:&quot;Sundanese&quot;,&quot;SW&quot;:&quot;Swahili&quot;,&quot;SV&quot;:&quot;Swedish&quot;,&quot;TL&quot;:&quot;Tagalog&quot;,&quot;TG&quot;:&quot;Tajik&quot;,&quot;TA&quot;:&quot;Tamil&quot;,&quot;TT&quot;:&quot;Tatar&quot;,&quot;TE&quot;:&quot;Tegulu&quot;,&quot;TH&quot;:&quot;Thai&quot;,&quot;BO&quot;:&quot;Tibetan&quot;,&quot;TI&quot;:&quot;Tigrinya&quot;,&quot;TO&quot;:&quot;Tonga&quot;,&quot;TS&quot;:&quot;Tsonga&quot;,&quot;TR&quot;:&quot;Turkish&quot;,&quot;TK&quot;:&quot;Turkmen&quot;,&quot;TW&quot;:&quot;Twi&quot;,&quot;UK&quot;:&quot;Ukrainian&quot;,&quot;UR&quot;:&quot;Urdu&quot;,&quot;UZ&quot;:&quot;Uzbek&quot;,&quot;VI&quot;:&quot;Vietnamese&quot;,&quot;VO&quot;:&quot;Volapuk&quot;,&quot;CY&quot;:&quot;Welsh&quot;,&quot;WO&quot;:&quot;Wolof&quot;,&quot;XH&quot;:&quot;Xhosa&quot;,&quot;JI&quot;:&quot;Yiddish&quot;,&quot;YO&quot;:&quot;Yoruba&quot;,&quot;ZU&quot;:&quot;Zulu&quot;}"></zn-inline-edit>
+  </zn-item>
+  <zn-item caption="Full name">
+    Margot Foster
+  </zn-item>
+  <zn-item caption="Full name">
+    margot.foster@example.com
+  </zn-item>
+  <zn-item caption="Full name">
+    lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  </zn-item>
+</zn-sp>
+```
+
+## Examples
+
+### Lots of Content
+
+```html:preview
+<zn-item caption="Full name">
+  lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna 
+  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+</zn-item>
+```
+
+### Icons
+
+```html:preview
+
+<zn-item caption="Full name" icon="person">
+  This is the content
+</zn-item>
+
+<zn-cols layout="1, 1">
+  <zn-item inline icon="person">
+    <div>First Name</div>
+    <div>Second Name</div>
+  </zn-item>
+  <zn-item inline icon="person">This is the content</zn-item>
+</zn-cols>
+```
+
+### Multiple Actions
+
+Example of multiple actions in a description item.
+
+```html:preview
+
+<zn-item caption="Address">
+  <div><strong>Company</strong> Example here </div>
+  <div><strong>Line 1</strong> Example here </div>
+  <div><strong>Line 2</strong> Example here </div>
+  <div><strong>Line 3</strong> Example here </div>
+  <div><strong>Town</strong> Example here </div>
+  <div><strong>County</strong> Example here </div>
+  <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-item>
+```
+

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

@@ -0,0 +1,41 @@
+---
+meta:
+  title: Linked Select
+  description:
+layout: component
+---
+
+```html:preview
+
+<zn-select name="departmentFid" id="departmentFid" label="Department" class="zn-mb" size="medium" placement="bottom"
+           form="" data-optional="" data-valid="" data-user-valid="" open="">
+  <zn-option value="" role="option" aria-selected="false" aria-disabled="false" tabindex="-1">Select Department
+  </zn-option>
+  <zn-option value="FID:DEP:1677585809:MZxvTiWlzBlSG" role="option" aria-selected="true" aria-disabled="false"
+             tabindex="-1">Billing
+  </zn-option>
+  <zn-option value="FID:DEP:1677585809:Kd83L0aIhsGpB" role="option" aria-selected="false" aria-disabled="false"
+             tabindex="-1">Sales
+  </zn-option>
+  <zn-option value="FID:DEP:1677585809:3mBpgQnrkzLSO" role="option" aria-selected="false" aria-disabled="false"
+             tabindex="-1">
+    Support
+  </zn-option>
+</zn-select>
+
+<zn-linked-select linked-select="departmentFid" value="" name="queueFid" label="Queue"
+                  options="{&quot;-&quot;:{&quot;-&quot;:&quot;Select Department&quot;},&quot;FID:DEP:1677585809:MZxvTiWlzBlSG&quot;:{&quot;-&quot;:&quot;Select Queue&quot;,&quot;FID:TKT:QUE:1677585809:DFP20NM0Q&quot;:&quot;Generic&quot;,&quot;FID:TKT:QUE:1678099064:8nGJ5OQfp&quot;:&quot;Money Back&quot;},&quot;FID:DEP:1677585809:Kd83L0aIhsGpB&quot;:{&quot;-&quot;:&quot;Select Queue&quot;,&quot;FID:TKT:QUE:1677585809:ma9I3ORGu&quot;:&quot;Generic&quot;},&quot;FID:DEP:1677585809:3mBpgQnrkzLSO&quot;:{&quot;-&quot;:&quot;Select Queue&quot;,&quot;FID:TKT:QUE:1677585809:cFvFFL8o6&quot;:&quot;Generic&quot;}}"
+                  data-optional="" data-valid="" data-user-valid=""></zn-linked-select>
+```
+
+## Examples
+
+### First Example
+
+TODO
+
+### Second Example
+
+TODO
+
+

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

@@ -0,0 +1,22 @@
+---
+meta:
+  title: Menu Item
+  description:
+layout: component
+---
+
+```html:preview
+<zn-menu-item></zn-menu-item>
+```
+
+## Examples
+
+### First Example
+
+TODO
+
+### Second Example
+
+TODO
+
+

package/docs/pages/components/menu.md

@@ -0,0 +1,36 @@
+---
+meta:
+  title: Menu
+  description:
+layout: component
+---
+
+```html:preview
+
+<zn-menu>
+  <zn-menu-item>Menu Item 1</zn-menu-item>
+  <zn-menu-item>Menu Item 2</zn-menu-item>
+  <zn-menu-item>Menu Item 3</zn-menu-item>
+  <zn-menu-item>Menu Item 4</zn-menu-item>
+  <zn-menu-item>
+    Menu Item 5
+    <zn-menu slot="submenu">
+      <zn-menu-item value="find">One</zn-menu-item>
+      <zn-menu-item value="find-previous">Two</zn-menu-item>
+      <zn-menu-item value="find-next">Three</zn-menu-item>
+    </zn-menu>
+  </zn-menu-item>
+</zn-menu>
+```
+
+## Examples
+
+### First Example
+
+TODO
+
+### Second Example
+
+TODO
+
+

package/docs/pages/components/navbar.md

@@ -0,0 +1,57 @@
+---
+meta:
+  title: Navbar
+  description:
+layout: component
+---
+
+```html:preview
+
+<zn-navbar
+  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>
+```
+
+## Examples
+
+### Stacked
+
+```html:preview
+
+<zn-tabs>
+  <zn-navbar
+    slot="left"
+    stacked
+    navigation="[{&quot;path&quot;:&quot;#&quot;,&quot;icon&quot;:&quot;phone&quot;},{&quot;path&quot;:&quot;#&quot;,&quot;icon&quot;:&quot;home&quot;}]">
+  </zn-navbar>
+  
+  <div id="">
+000000
+  </div>
+  <div id="1">
+111111
+  </div>
+</zn-tabs>
+```
+
+### Second Example
+
+```html:preview
+
+  <zn-navbar
+  navigation="[{&quot;path&quot;:&quot;#&quot;,&quot;title&quot;:&quot;Dashboard&quot;},{&quot;path&quot;:&quot;#&quot;,&quot;title&quot;:&quot;Another&quot;}]">
+    
+  <zn-expanding-action icon="new_label"
+                       content-uri="/test"
+                       method="drop"></zn-expanding-action>
+  </zn-navbar>
+```
+
+
+### Third Example
+
+```html:preview
+
+<zn-navbar small icon-bar rounded  navigation="[{&quot;path&quot;:&quot;#&quot;,&quot;title&quot;:&quot;HTML&quot;},{&quot;path&quot;:&quot;#&quot;,&quot;title&quot;:&quot;Text&quot;}]">>
+</zn-navbar>
+```

package/docs/pages/components/note.md

@@ -0,0 +1,55 @@
+---
+meta:
+  title: Note
+  description:
+layout: component
+---
+
+```html:preview
+
+<zn-note color="gray">
+  <span slot="caption">The caption</span>
+  <span>The body</span>
+  <span slot="date">
+    <small>11/10/24</small>
+  </span>
+</zn-note>
+```
+
+## Examples
+
+### Using HTML
+
+```html:preview
+
+<zn-note color="gray">
+  <span slot="caption">The caption</span>
+  <span>The body</span>
+  <span slot="date">
+    <small>11/10/24</small>
+  </span>
+</zn-note>
+```
+
+### Changing Colour
+
+```html:preview
+<zn-note caption="The caption" date="11/10/24" color="red"><div>I'm red!</div></zn-note>
+<zn-note caption="The caption" date="11/10/24" color="blue"><div>I'm blue!</div></zn-note>
+<zn-note caption="The caption" date="11/10/24" color="orange"><div>I'm orange!</div></zn-note>
+<zn-note caption="The caption" date="11/10/24" color="yellow"><div>I'm yellow!</div></zn-note>
+<zn-note caption="The caption" date="11/10/24" color="indigo"><div>I'm indigo!</div></zn-note>
+<zn-note caption="The caption" date="11/10/24" color="violet"><div>I'm violet!</div></zn-note>
+<zn-note caption="The caption" date="11/10/24" color="green"><div>I'm green!</div></zn-note>
+<zn-note caption="The caption" date="11/10/24" color="pink"><div>I'm pink!</div></zn-note>
+<zn-note caption="The caption" date="11/10/24" color="gray"><div>I'm gray!</div></zn-note>
+```
+
+### No Border Colour
+
+```html:preview
+<zn-note caption="The caption" 
+         date="11/10/24">
+  <div>The Body</div>
+</zn-note>
+```

package/docs/pages/components/option.md

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

package/docs/pages/components/order-table.md

@@ -0,0 +1,22 @@
+---
+meta:
+  title: Order Table
+  description:
+layout: component
+---
+
+```html:preview
+<zn-order-table></zn-order-table>
+```
+
+## Examples
+
+### First Example
+
+TODO
+
+### Second Example
+
+TODO
+
+

package/docs/pages/components/page-nav.md

@@ -0,0 +1,23 @@
+---
+meta:
+  title: Page Nav
+  description:
+layout: component
+---
+
+```html:preview
+
+<zn-page-nav
+  navigation="{&quot;data&quot;: [{&quot;title&quot;:&quot;Page Nav&quot;,&quot;items&quot;:[{ &quot;label&quot;: &quot;First Example&quot;, &quot;uri&quot;: &quot;TODO&quot; }, { &quot;label&quot;: &quot;Second Example&quot;, &quot;uri&quot;: &quot;TODO&quot; }]}, { &quot;title&quot;: &quot;Page Nav 2&quot;, &quot;items&quot;: [{ &quot;label&quot;: &quot;First Example&quot;, &quot;uri&quot;: &quot;TODO&quot;  }, { &quot;label&quot;: &quot;Second Example&quot;, &quot;uri&quot;: &quot;TODO&quot;}]}]}">
+</zn-page-nav>
+```
+
+## Examples
+
+### First Example
+
+TODO
+
+### Second Example
+
+TODO

package/docs/pages/components/pagination.md

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

package/docs/pages/components/pane.md

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