@kubex/zinc 1.0.12 → 1.0.13

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

@@ -8,7 +8,7 @@ layout: component
 ```html:preview
 
 <div class="form-spacing">
-  <zn-data-select label="Country" provider="country" name="country"></zn-data-select>
+  <zn-data-select label="Country" provider="country" name="country" multiple></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>

package/docs/pages/components/filter-container.md

@@ -0,0 +1,72 @@
+---
+meta:
+  title: Filter Container
+  description:
+layout: component
+---
+
+```html:preview
+
+<zn-filter-container>
+  <zn-sp flush>
+    <zn-panel caption="Section One">
+      <div style="display: flex; flex-direction: column;">
+        <div data-filter="John Doe"
+             style="padding: 10px 0; display: flex; flex-direction: column; border-bottom: 1px solid grey;">
+          <strong>John Doe</strong>
+          <span>john.doe@zinc.style</span>
+        </div>
+
+        <div data-filter="Gary Smith"
+             style="padding: 10px 0; display: flex; flex-direction: column; border-bottom: 1px solid grey;">
+          <strong>Gary Smith</strong>
+          <span>gary.smith@zinc.style</span>
+        </div>
+
+        <div data-filter="Lisa Wong"
+             style="padding: 10px 0; display: flex; flex-direction: column; border-bottom: 1px solid grey;">
+          <strong>Lisa Wong</strong>
+          <span>lisa.wong@zinc.style</span>
+        </div>
+
+        <div data-filter="Emma Johnson"
+             style="padding: 10px 0; display: flex; flex-direction: column; border-bottom: 1px solid grey;">
+          <strong>Emma Johnson</strong>
+          <span>emma.johnson@zinc.style</span>
+        </div>
+      </div>
+
+    </zn-panel>
+
+    <zn-panel caption="Section Two">
+      <div style="display: flex; flex-direction: column;">
+        <div data-filter="Michael Brown"
+             style="padding: 10px 0; display: flex; flex-direction: column; border-bottom: 1px solid grey;">
+          <strong>Michael Brown</strong>
+          <span>michael.brown@zinc.style</span>
+        </div>
+        <div data-filter="Sophia Davis"
+             style="padding: 10px 0; display: flex; flex-direction: column; border-bottom: 1px solid grey;">
+          <strong>Sophia Davis</strong>
+          <span>sophia.davis@zinc.style</span>
+        </div>
+        <div data-filter="Lisa Wong"
+             style="padding: 10px 0; display: flex; flex-direction: column; border-bottom: 1px solid grey;">
+          <strong>Lisa Wong</strong>
+          <span>lisa.wong@zinc.style</span>
+        </div>
+      </div>
+    </zn-panel>
+  </zn-sp>
+</zn-filter-container>
+```
+
+## Examples
+
+### First Example
+
+TODO
+
+### Second Example
+
+TODO

package/docs/pages/components/filter-wrapper.md

@@ -1,12 +1,12 @@
 ---
 meta:
-  title: Query Wrapper
+  title: Filter Wrapper
   description:
 layout: component
 ---
 
 ```html:preview
-<zn-query-wrapper></zn-query-wrapper>
+<zn-filter-wrapper></zn-filter-wrapper>
 ```
 
 ## Examples

package/docs/pages/components/hover-container.md

@@ -0,0 +1,20 @@
+---
+meta:
+  title: Hover Container
+  description:
+layout: component
+---
+
+```html:preview
+<zn-hover-container></zn-hover-container>
+```
+
+## Examples
+
+### First Example
+
+TODO
+
+### Second Example
+
+TODO

package/docs/pages/components/reveal.md

@@ -0,0 +1,24 @@
+---
+meta:
+  title: Reveal
+  description:
+layout: component
+---
+
+```html:preview
+
+<zn-reveal duration="3000"
+           initial="******@hotmail.com"
+           revealed="john.doe@hotmail.com">
+</zn-reveal>
+```
+
+## Examples
+
+### First Example
+
+TODO
+
+### Second Example
+
+TODO

package/docs/pages/components/select.md

@@ -39,6 +39,44 @@ This component works with standard `<form>` elements. Please refer to the sectio
 on [form controls](/getting-started/form-controls) to learn more about form submission and client-side validation.
 :::
 
+### Distinct Selects
+
+
+```html:preview
+
+<div class="form-spacing">
+  <zn-select provider="country" multiple name="country-one" id="country-one" distinct="country-two">
+    <zn-option value="0">Option 0</zn-option>
+    <zn-option value="1">Option 1</zn-option>
+    <zn-option value="2">Option 2</zn-option>
+  </zn-select>
+  <zn-select provider="country" multiple name="country-two" id="country-two" distinct="country-one">
+    <zn-option value="0">Option 0</zn-option>
+    <zn-option value="1">Option 1</zn-option>
+    <zn-option value="2">Option 2</zn-option>
+  </zn-select>
+</div>
+```
+
+### Conditional Selects
+
+
+```html:preview
+
+<div class="form-spacing">
+  <zn-select provider="conditional" multiple name="conditional-one" id="conditional-one" conditional="conditional-two">
+    <zn-option value="0">Option 0</zn-option>
+    <zn-option value="1">Option 1</zn-option>
+    <zn-option value="2">Option 2</zn-option>
+  </zn-select>
+  <zn-select provider="conditional" multiple name="conditional-two" id="conditional-two" conditional="conditional-one">
+    <zn-option value="0">Option 0</zn-option>
+    <zn-option value="1">Option 1</zn-option>
+    <zn-option value="2">Option 2</zn-option>
+  </zn-select>
+</div>
+```
+
 ### Help Text
 
 Add descriptive help text to a select with the `help-text` attribute. For help texts that contain HTML, use the
@@ -124,7 +162,7 @@ the most common for selects), include an empty option that people can select to
 :::
 
 ```html:preview
-<zn-select label="Clearable multi-choice select" clearable multiple value="option-1 option-2" help-text="For multi-choice selects only, display an icon button to let people clear their selections">
+<zn-select label="Clearable multi-choice select" clearable multiple help-text="For multi-choice selects only, display an icon button to let people clear their selections">
   <zn-option value="option-1">Option 1</zn-option>
   <zn-option value="option-2">Option 2</zn-option>
   <zn-option value="option-3">Option 3</zn-option>

package/docs/pages/components/toggle.md

@@ -6,14 +6,17 @@ layout: component
 ---
 
 ```html:preview
-<zn-toggle on-text="On" off-text="off" label="Renew?"></zn-toggle>
+<zn-toggle></zn-toggle>
 ```
 
 ## Examples
 
-### First Example
+### With Tooltip
 
-TODO
+```html:preview
+
+<zn-toggle on-text="Available" off-text="Unavailable" label="Status"></zn-toggle>
+```
 
 ### Second Example
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",

package/scss/_root.scss

@@ -6,8 +6,8 @@
 :root {
   // Brand Colors
   --zn-red: 237, 84, 109;
-  --zn-blue: 100, 131, 242;
-  --zn-green: 41, 186, 181;
+  --zn-blue: 100, 117, 242;
+  --zn-green: 43, 192, 145;
   --zn-orange: 255, 136, 0;
   --zn-yellow: 255, 193, 7;
   --zn-indigo: 63, 81, 181;
@@ -18,10 +18,10 @@
   --zn-accent: 71, 214, 214;
 
   // Theme Colors
-  --zn-color-info: 100, 131, 242;
+  --zn-color-info: 100, 117, 242;
   --zn-color-warning: 255, 136, 0;
   --zn-color-error: 237, 84, 109;
-  --zn-color-success: 41, 186, 181;
+  --zn-color-success: 43, 192, 145;
   --zn-color-disabled: 181, 181, 181;
 
   // Common Sizes

package/src/components/button/button.component.ts

@@ -5,6 +5,7 @@ import {HasSlotController} from '../../internal/slot';
 import {html, literal} from 'lit/static-html.js';
 import {ifDefined} from 'lit/directives/if-defined.js';
 import {property, query, queryAll} from 'lit/decorators.js';
+import {watch} from '../../internal/watch';
 import ZincElement from '../../internal/zinc-element';
 import ZnDropdown from "../dropdown";
 import ZnIcon from "../icon";
@@ -137,13 +138,18 @@ export default class ZnButton extends ZincElement implements ZincFormControl {
     this.teardownAutoClick();
   }
 
+  @watch('autoClick')
+  async handleAutoClickChange(_old: boolean, value: boolean) {
+    if (value) {
+      await this.updateComplete;
+      this.setupAutoClick();
+    } else {
+      this.teardownAutoClick();
+    }
+  }
+
   protected updated(changedProps: Map<string, any>) {
     super.updated(changedProps);
-    if (changedProps.has('autoClick')) {
-      if (this.autoClick) {
-        this.setupAutoClick();
-      }
-    }
     if (this.button) {
       const oldOverlay = this.button.querySelector('.button--loading-fill');
       if (oldOverlay) {

package/src/components/data-select/data-select.component.ts

@@ -7,12 +7,12 @@ import {
   emptyDataProvider,
   type LocalDataProvider,
 } from "./providers/provider";
-import {type CSSResultGroup, html, nothing, unsafeCSS, PropertyValues} from 'lit';
+import {type CSSResultGroup, html, nothing, type PropertyValues, unsafeCSS} from 'lit';
 import {FormControlController} from "../../internal/form";
 import {property, query} from 'lit/decorators.js';
 import {watch} from "../../internal/watch";
-import type {ZincFormControl} from '../../internal/zinc-element';
 import ZincElement from '../../internal/zinc-element';
+import type {ZincFormControl} from '../../internal/zinc-element';
 import type ZnSelect from "../select";
 
 import styles from './data-select.scss';
@@ -93,6 +93,8 @@ export default class ZnDataSelect extends ZincElement implements ZincFormControl
 
   @property({attribute: "icon-only", type: Boolean, reflect: true}) iconOnly = false;
 
+  @property({type: Boolean}) multiple = false;
+
   protected readonly formControlController = new FormControlController(this);
 
   get validationMessage() {
@@ -215,6 +217,7 @@ export default class ZnDataSelect extends ZincElement implements ZincFormControl
                  @zn-clear="${this.handleClear}"
                  @blur=${this.blur}
                  value="${this.value}"
+                 ?multiple=${this.multiple}
                  placeholder="${this.getPlaceholder(localProvider)}"
                  exportparts="combobox,expand-icon,form-control-help-text,form-control-input,display-input">
         ${(this.iconPosition !== 'none' || this.iconOnly) ? html`

package/src/components/dropdown/dropdown.component.ts

@@ -6,6 +6,7 @@ import {property, query} from 'lit/decorators.js';
 import {unsafeHTML} from 'lit/directives/unsafe-html.js';
 import {waitForEvent} from "../../internal/event";
 import {watch} from '../../internal/watch';
+import topLayerManager from '../../utilities/top-layer-manager';
 import ZincElement from '../../internal/zinc-element';
 import type {ZnSelectEvent} from "../../events/zn-select";
 import type ZnButton from "../button";
@@ -324,6 +325,7 @@ export default class ZnDropdown extends ZincElement {
 
     if (this.open) {
       this.emit('zn-show');
+      topLayerManager.registerDropdown(this);
       this.addOpenListeners();
       this.panel.hidden = false;
       this.popup.active = true;
@@ -331,6 +333,7 @@ export default class ZnDropdown extends ZincElement {
       this.emit('zn-after-show');
     } else {
       this.emit('zn-hide');
+      topLayerManager.unregisterDropdown(this);
       this.removeOpenListeners();
       this.panel.blur();
       this.panel.hidden = true;

package/src/components/filter-container/filter-container.component.ts

@@ -0,0 +1,112 @@
+import {property} from 'lit/decorators.js';
+import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import ZincElement from '../../internal/zinc-element';
+
+import styles from './filter-container.scss';
+
+/**
+ * @summary Short summary of the component's intended use.
+ * @documentation https://zinc.style/components/filter-container
+ * @status experimental
+ * @since 1.0
+ *
+ * @dependency zn-example
+ *
+ * @event zn-event-name - Emitted as an example.
+ *
+ * @slot - The default slot.
+ * @slot example - An example slot.
+ *
+ * @csspart base - The component's base wrapper.
+ *
+ * @cssproperty --example - An example CSS custom property.
+ */
+export default class ZnFilterContainer extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  @property() attr = 'filter';
+
+  public handleSearchChange(event: Event) {
+    // get all element that have data-'this.attr' attribute
+    const filterableElements = this.querySelectorAll(`[data-${this.attr}]`);
+    const input = event.target as HTMLInputElement;
+    const searchTerm = input.value.toLowerCase();
+
+    filterableElements.forEach((el) => {
+      const filterValue = el.getAttribute(`data-${this.attr}`)?.toLowerCase() || '';
+      if (filterValue.includes(searchTerm)) {
+        (el as HTMLElement).style.display = '';
+      } else {
+        (el as HTMLElement).style.display = 'none';
+      }
+
+      const panel = el.closest('zn-panel');
+      if (panel) {
+        const panelItems = panel.querySelectorAll(`[data-${this.attr}]`);
+        let anyVisible = false;
+        panelItems.forEach((item) => {
+          if ((item as HTMLElement).style.display !== 'none') {
+            anyVisible = true;
+          }
+
+        });
+        if (anyVisible) {
+          (panel as HTMLElement).style.display = '';
+        } else {
+          (panel as HTMLElement).style.display = 'none';
+        }
+      }
+
+      const accordionItem = el.closest('zn-accordion');
+      if (accordionItem) {
+        const itemElements = accordionItem.querySelectorAll(`[data-${this.attr}]`);
+        let anyVisible = false;
+        itemElements.forEach((item) => {
+          if ((item as HTMLElement).style.display !== 'none') {
+            anyVisible = true;
+          }
+        });
+
+        if (anyVisible) {
+          (accordionItem as HTMLElement).style.display = '';
+        }
+      }
+    });
+
+    if (searchTerm === '') {
+      filterableElements.forEach((el) => {
+        (el as HTMLElement).style.display = '';
+      });
+    }
+
+    // if nothing is visible, show a "no results found" message
+    const anyVisibleElements = Array.from(filterableElements).some((el) => {
+      return (el as HTMLElement).style.display !== 'none';
+    });
+
+    let noResultsMessage = this.querySelector('.no-results-message') as HTMLElement;
+    if (!anyVisibleElements) {
+      if (!noResultsMessage) {
+        noResultsMessage = document.createElement('div');
+        noResultsMessage.className = 'no-results-message';
+        noResultsMessage.textContent = 'No results found';
+        this.appendChild(noResultsMessage);
+      }
+      noResultsMessage.style.display = '';
+    } else {
+      if (noResultsMessage) {
+        noResultsMessage.style.display = 'none';
+      }
+    }
+
+  }
+
+  render() {
+    return html`
+      <zn-input placeholder="Filter" clearable type="search" @zn-input=${this.handleSearchChange}
+                style="margin-bottom: var(--zn-spacing-small)">
+        <zn-icon src="search" slot="prefix"></zn-icon>
+      </zn-input>
+      <slot></slot> `;
+  }
+}

package/src/components/filter-container/filter-container.scss

@@ -0,0 +1,5 @@
+@use "../../wc";
+
+:host {
+  display: block;
+}

package/src/components/filter-container/filter-container.test.ts

@@ -0,0 +1,10 @@
+import '../../../dist/zn.min.js';
+import { expect, fixture, html } from '@open-wc/testing';
+
+describe('<zn-filter-container>', () => {
+  it('should render a component', async () => {
+    const el = await fixture(html` <zn-filter-container></zn-filter-container> `);
+
+    expect(el).to.exist;
+  });
+});

package/src/components/filter-container/index.ts

@@ -0,0 +1,12 @@
+import ZnFilterContainer from './filter-container.component';
+
+export * from './filter-container.component';
+export default ZnFilterContainer;
+
+ZnFilterContainer.define('zn-filter-container');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'zn-filter-container': ZnFilterContainer;
+  }
+}

package/src/components/form-group/form-group.component.ts

@@ -57,32 +57,33 @@ export default class ZnFormGroup extends ZincElement {
         aria-describedby="help-text">
 
         <zn-cols layout="1,2" mc="2" part="form-control-container" class="form-control__container">
-          <div>
-            <label
-              part="form-control-label"
-              id="label"
-              class="form-control__label"
-              aria-hidden=${hasLabel ? 'false' : 'true'}>
-              <slot name="label">${this.label}</slot>
-              ${hasLabelTooltip
-                ? html`
-                  <zn-tooltip class="form-control--label-tooltip">
-                    <div slot="content">
-                      <slot name="label-tooltip">${this.labelTooltip}</slot>
-                    </div>
-                    <zn-icon src="info"></zn-icon>
-                  </zn-tooltip>`
-                : ''}
-            </label>
+          ${hasLabel ? html`
+            <div>
+              <label
+                part="form-control-label"
+                id="label"
+                class="form-control__label"
+                aria-hidden=${hasLabel ? 'false' : 'true'}>
+                <slot name="label">${this.label}</slot>
+                ${hasLabelTooltip
+                  ? html`
+                    <zn-tooltip class="form-control--label-tooltip">
+                      <div slot="content">
+                        <slot name="label-tooltip">${this.labelTooltip}</slot>
+                      </div>
+                      <zn-icon src="info"></zn-icon>
+                    </zn-tooltip>`
+                  : ''}
+              </label>
 
-            <div
-              part="form-control-help-text"
-              id="help-text"
-              class="form-control__help-text"
-              aria-hidden=${hasHelpText ? 'false' : 'true'}>
-              <slot name="help-text">${this.helpText}</slot>
-            </div>
-          </div>
+              ${hasHelpText ? html`
+                <div
+                  part="form-control-help-text"
+                  id="help-text"
+                  class="form-control__help-text">
+                  <slot name="help-text">${this.helpText}</slot>
+                </div>` : html``}
+            </div>` : html``}
 
           <div part="form-control-input" class="form-control-input">
             <slot></slot>

package/src/components/form-group/form-group.scss

@@ -43,6 +43,7 @@
   display: grid;
   grid-template-columns: 1fr;
   gap: var(--zn-spacing-medium) var(--zn-spacing-small);
+  flex: 1 1 auto;
 
   @include wc.media-query(md) {
     grid-template-columns: repeat(6, 1fr);

package/src/components/header/header.scss

@@ -185,6 +185,7 @@
     }
   }
 
+
   .caption {
     flex-grow: 1;
     display: flex;
@@ -254,3 +255,9 @@
     display: flex;
   }
 }
+
+:host([baseless]) {
+  .header {
+    border-bottom: none !important;
+  }
+}

package/src/components/navbar/navbar.scss

@@ -100,6 +100,10 @@ ul.navbar {
   }
 }
 
+:host([panel]) {
+  background: rgb(var(--zn-panel));
+}
+
 :host([icon-bar]) {
 
   ul.navbar {

package/src/components/note/note.component.ts

@@ -80,6 +80,7 @@ export default class ZnNote extends ZincElement {
           <slot name="date" class="note__header__date">
             <small>${this.date}</small>
           </slot>
+          <slot name="action"></slot>
         </div>
         <div class="${classMap({
           'note__body-container': true,

package/src/components/option/option.component.ts

@@ -140,15 +140,15 @@ export default class ZnOption extends ZincElement {
         })}
         @mouseenter=${this.handleMouseEnter}
         @mouseleave=${this.handleMouseLeave}>
+        <slot part="prefix" name="prefix" class="option__prefix"></slot>
+        <slot part="label" class="option__label" @slotchange=${this.handleDefaultSlotChange}></slot>
+        <slot part="suffix" name="suffix" class="option__suffix"></slot>
         <zn-icon
           part="checked-option-icon"
           class="option__check"
           src="check_small"
           aria-hidden="true"
         ></zn-icon>
-        <slot part="prefix" name="prefix" class="option__prefix"></slot>
-        <slot part="label" class="option__label" @slotchange=${this.handleDefaultSlotChange}></slot>
-        <slot part="suffix" name="suffix" class="option__suffix"></slot>
       </div>
     `;
   }

package/src/components/option/option.scss

@@ -20,19 +20,11 @@
   line-height: var(--zn-line-height-normal);
   letter-spacing: var(--zn-letter-spacing-normal);
   color: var(--zn-input-color);
-  padding: var(--zn-spacing-x-small) var(--zn-spacing-2x-large) var(--zn-spacing-x-small) var(--zn-spacing-2x-small);
+  padding: var(--zn-spacing-x-small) var(--zn-spacing-small);
   transition: var(--zn-transition-fast) fill;
   cursor: pointer;
 }
 
-.option--singular:not(.option--selected) {
-  padding: var(--zn-spacing-x-small) var(--zn-spacing-2x-large) var(--zn-spacing-x-small) var(--zn-spacing-large);
-
-  zn-icon {
-    display: none;
-  }
-}
-
 
 .option--hover:not(.option--current):not(.option--disabled) {
   background-color: var(--zn-color-primary-100);
@@ -73,6 +65,10 @@
   visibility: visible;
 }
 
+.option--selected {
+  background-color: var(--zn-color-primary-200);
+}
+
 .option__prefix,
 .option__suffix {
   flex: 0 0 auto;

package/src/components/progress-bar/progress-bar.component.ts

@@ -1,5 +1,5 @@
-import {property} from 'lit/decorators.js';
 import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {property} from 'lit/decorators.js';
 import ZincElement from '../../internal/zinc-element';
 
 import styles from './progress-bar.scss';