@kubex/zinc 1.0.24 → 1.0.98

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

@@ -12,6 +12,33 @@
   width: 100%;
 }
 
+/* Gap variants */
+.input-group--gap-sm {
+  gap: var(--zn-spacing-x-small);
+}
+
+.input-group--gap-md {
+  gap: var(--zn-spacing-small);
+}
+
+.input-group--gap-lg {
+  gap: var(--zn-spacing-medium);
+}
+
+/* When gap is set, restore individual border radii */
+.input-group--gap ::slotted([data-zn-input-group__input]) {
+  margin-inline-end: 0;
+}
+
+.input-group--gap ::slotted([data-zn-input-group__input--first]),
+.input-group--gap ::slotted([data-zn-input-group__input--inner]),
+.input-group--gap ::slotted([data-zn-input-group__input--last]) {
+  --zn-input-border-radius-x-small: var(--zn-border-radius-medium);
+  --zn-input-border-radius-small: var(--zn-border-radius-medium);
+  --zn-input-border-radius-medium: var(--zn-border-radius-medium);
+  --zn-input-border-radius-large: var(--zn-border-radius-medium);
+}
+
 /* Common styles for slotted inputs */
 ::slotted([data-zn-input-group__input]) {
   /* Overlap borders */
@@ -21,6 +48,15 @@
   position: relative;
   z-index: 1;
   flex: 1;
+  min-width: 0;
+}
+
+@for $i from 1 through 12 {
+  ::slotted([data-zn-input-group__input][span="#{$i}"]) {
+    @include wc.media-query(md) {
+      flex: #{$i};
+    }
+  }
 }
 
 ::slotted([data-zn-input-group__input]:focus-within) {
@@ -50,17 +86,19 @@
   margin-inline-end: 0;
 }
 
-/* Button overrides */
-::slotted(zn-button[data-zn-input-group__input])::part(base) {
-  border-radius: 0;
+/* Button overrides - don't join to other inputs */
+::slotted(zn-button[data-zn-input-group__input]) {
+  flex: 0 0 auto;
+  margin-inline-start: var(--zn-spacing-x-small);
+  margin-inline-end: 0;
 }
 
-::slotted(zn-button[data-zn-input-group__input--first])::part(base) {
-  border-start-start-radius: var(--zn-border-radius-medium);
-  border-end-start-radius: var(--zn-border-radius-medium);
+::slotted(zn-button[data-zn-input-group__input--first]),
+::slotted(zn-button[data-zn-input-group__input--inner]),
+::slotted(zn-button[data-zn-input-group__input--last]) {
+  --zn-input-border-radius-x-small: var(--zn-border-radius-medium);
+  --zn-input-border-radius-small: var(--zn-border-radius-medium);
+  --zn-input-border-radius-medium: var(--zn-border-radius-medium);
+  --zn-input-border-radius-large: var(--zn-border-radius-medium);
 }
 
-::slotted(zn-button[data-zn-input-group__input--last])::part(base) {
-  border-start-end-radius: var(--zn-border-radius-medium);
-  border-end-end-radius: var(--zn-border-radius-medium);
-}

package/src/components/item/item.component.ts

@@ -52,7 +52,7 @@ export default class ZnItem extends ZincElement {
   @property({type: Boolean, attribute: 'align-end'}) alignEnd: boolean;
 
   // align items in the center
-  @property({type: Boolean, attribute: 'align-center'})  alignCenter: boolean;
+  @property({type: Boolean, attribute: 'align-center'}) alignCenter: boolean;
 
   connectedCallback() {
     super.connectedCallback();
@@ -74,12 +74,21 @@ export default class ZnItem extends ZincElement {
     return slotContent > 0 || this.innerText.length > 0 || !(this.value === undefined || this.value === null)
   }
 
+  protected _hasRequiredSlot(): boolean {
+    const slotElements = this.querySelectorAll(":scope > *:not([slot])");
+    return Array.from(slotElements).some(el => el.hasAttribute && el.hasAttribute('required'));
+  }
+
   render() {
     const hasIcon = this.icon && this.icon.length > 0;
 
     const headings = html`
       <div class="item__headings">
-        <div class="item__caption" part="caption">${this.caption}</div>
+        <div class=${classMap({
+          'item__caption': true,
+          'item__caption--required': this._hasRequiredSlot()
+        })} part="caption">${this.caption}
+        </div>
         ${this.description ? html`
           <div class="item__description">${this.description}</div>` : ''}
       </div>`;

package/src/components/item/item.scss

@@ -12,6 +12,7 @@
   flex-direction: row;
   padding: 0 var(--zn-spacing-medium);
   gap: var(--zn-spacing-2x-small);
+  min-height: 35px;
 
   @include wc.container-query(null, md) {
     --zn-item-label-max-width: 220px;
@@ -95,6 +96,12 @@
     line-height: var(--zn-line-height-loose);
     width: 100%;
     flex-shrink: 0;
+
+    &--required::after {
+      content: var(--zn-input-required-content);
+      margin-inline-start: var(--zn-input-required-content-offset);
+      color: var(--zn-input-required-content-color);
+    }
   }
 
   &__description {

package/src/components/key/index.ts

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

package/src/components/key/key.component.ts

@@ -0,0 +1,47 @@
+import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {property} from 'lit/decorators.js';
+import ZincElement from '../../internal/zinc-element';
+
+import styles from './key.scss';
+
+/**
+ * @summary A legend key item, typically used alongside charts to label and toggle visibility of data series by category.
+ * @documentation https://zinc.style/components/key
+ * @status experimental
+ * @since 1.0
+ *
+ * @slot - The description of the key.
+ */
+export default class ZnKey extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  @property() icon: string = '';
+  @property() attribute: string = '';
+  @property() value: string = '';
+  @property() color: 'primary' | 'success' | 'warning' | 'error' | 'info' | 'neutral' = 'primary';
+  @property({type: Boolean, reflect: true}) active: boolean = false;
+  @property({attribute: 'icon-size', type: Number}) iconSize: number = 24;
+
+  private _handleClick() {
+    this.active = !this.active;
+    this.emit('zn-change');
+  }
+
+  render() {
+    const chipType = this.active ? this.color : 'transparent';
+
+    return html`
+      <div class="key" @click="${this._handleClick}">
+        <zn-chip
+          .icon="${this.icon}"
+          .iconSize="${this.iconSize}"
+          .type="${chipType}"
+          size="medium"
+        ></zn-chip>
+        <div class="key__description">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+}

package/src/components/key/key.scss

@@ -0,0 +1,38 @@
+@use "../../wc";
+
+:host {
+  display: block;
+}
+
+.key {
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  gap: var(--zn-spacing-medium);
+  align-items: center;
+  text-align: left;
+
+  &__description {
+    font-size: var(--zn-font-size-small);
+    color: rgb(var(--zn-text-body));
+    opacity: 0.7;
+    line-height: var(--zn-line-height-normal);
+    user-select: none;
+  }
+}
+
+:host([active]) .key__label {
+  color: rgb(var(--zn-text-heading));
+  font-weight: 600;
+}
+
+:host(:not([active])) {
+  .key__description {
+    opacity: 0.6;
+  }
+
+  zn-chip {
+    --zn-chip-color: rgb(var(--zn-text-body));
+    opacity: 0.5;
+  }
+}

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

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

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

@@ -0,0 +1,142 @@
+import {classMap} from "lit/directives/class-map.js";
+import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {deepQuerySelectorAll} from "../../utilities/query";
+import {property, query} from 'lit/decorators.js';
+import ZincElement from '../../internal/zinc-element';
+import type ZnKey from "../key/key.component";
+
+import styles from './key-container.scss';
+
+/**
+ * @summary A legend container that manages key items, typically used alongside charts to toggle visibility of data series by category.
+ * @documentation https://zinc.style/components/key-container
+ * @status experimental
+ * @since 1.0
+ *
+ * @slot - The content to be filtered.
+ * @slot keys - The key items (zn-key) that define the filters.
+ *
+ * @event zn-change - Emitted when the set of active keys changes.
+ */
+export default class ZnKeyContainer extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  @query('slot[name="keys"]') keysSlot: HTMLSlotElement;
+  @query('slot:not([name])') defaultSlot: HTMLSlotElement;
+
+  @property() position: 'top-end' | 'top-start' | 'bottom-end' | 'bottom-start' = 'bottom-start';
+  @property() target: string = ''; // ID of the target element containing items
+  @property({attribute: 'item-selector'}) itemSelector: string = '[data-type]';
+  @property({attribute: 'filter-attribute'}) filterAttribute: string = '';
+  @property({attribute: 'no-scroll', type: Boolean}) noScroll: boolean = false;
+
+  private _hiddenElements: Set<Element> = new Set();
+  private _targetElement: HTMLElement | null = null;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.updateFilters();
+  }
+
+  firstUpdated() {
+    if (this.target) {
+      const rootNode = this.getRootNode() as Document | ShadowRoot;
+      this._targetElement = rootNode.getElementById ? rootNode.getElementById(this.target) : document.getElementById(this.target);
+    }
+    this.updateFilters();
+  }
+
+  private _handleKeyChange() {
+    this.updateFilters();
+    this.emit('zn-change');
+  }
+
+  private getKeys(): ZnKey[] {
+    const keys = [];
+    if (this.keysSlot) {
+      keys.push(...this.keysSlot.assignedElements({flatten: true}));
+    }
+    if (this.defaultSlot) {
+      keys.push(...this.defaultSlot.assignedElements({flatten: true}));
+    }
+    return keys.filter(el => el.tagName.toLowerCase() === 'zn-key') as ZnKey[];
+  }
+
+  private updateFilters() {
+    const keys = this.getKeys();
+    if (!keys || keys.length === 0) return;
+
+    // Reset hidden elements
+    this._hiddenElements.forEach(el => el.removeAttribute('hidden'));
+    this._hiddenElements.clear();
+
+    if (this.target && !this._targetElement) {
+      const rootNode = this.getRootNode() as Document | ShadowRoot;
+      this._targetElement = rootNode.getElementById?.(this.target) ?? document.getElementById(this.target);
+    }
+    let root: Element | Document | DocumentFragment | null = this._targetElement ?? null;
+
+    if (!root) {
+      const slotElements = this.defaultSlot?.assignedElements({flatten: true}) ?? [];
+      root = slotElements.some(el => el.tagName !== 'ZN-KEY')
+        ? this
+        : this.parentElement ?? (this.parentNode as DocumentFragment);
+    }
+    if (!root) return;
+
+    const selector = this.filterAttribute ? `[${this.filterAttribute}]` : this.itemSelector;
+    const items = deepQuerySelectorAll(selector, root as HTMLElement, "");
+    items.forEach(item => {
+      if (item === this) return;
+
+      const matchesInactive = keys.some(key => !key.active && this.itemMatchesKey(item, key));
+      if (matchesInactive) {
+        item.setAttribute('hidden', '');
+        this._hiddenElements.add(item);
+      }
+    });
+  }
+
+  private itemMatchesKey(item: Element, key: ZnKey): boolean {
+    // 1. If the container specifies filterAttribute, use key.attribute as the value to look for
+    if (this.filterAttribute) {
+      const itemValue = item.getAttribute(this.filterAttribute);
+      if (!itemValue) return false;
+
+      const targetValue = key.attribute;
+      if (!targetValue) return false;
+
+      return itemValue.split(/\s+/).includes(targetValue);
+    }
+
+    // 2. If key specifies attribute and value
+    if (key.attribute && key.value) {
+      const itemValue = item.getAttribute(key.attribute);
+      if (!itemValue) return false;
+
+      return itemValue.split(/\s+/).includes(key.value);
+    }
+
+    // 3. If the key only specifies attribute (and no value), check for existence
+    if (key.attribute) {
+      return item.hasAttribute(key.attribute);
+    }
+
+    return false;
+  }
+
+  render() {
+    return html`
+      <div class="${classMap({
+        'key-container': true,
+        'key-container--scroll': !this.noScroll,
+      })}" @zn-change="${this._handleKeyChange}">
+        ${this.target ? '' : html`
+          <div class="key-container__content">
+            <slot @slotchange="${this.updateFilters.bind(this)}" class="key-container__keys"></slot>
+          </div>
+        `}
+      </div>
+    `;
+  }
+}

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

@@ -0,0 +1,33 @@
+@use "../../wc";
+
+:host {
+  display: contents;
+}
+
+.key-container--scroll {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  position: relative;
+}
+
+.key-container__content {
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+  box-sizing: border-box;
+}
+
+.key-container__keys {
+  display: flex;
+  flex-direction: column;
+  gap: var(--zn-spacing-medium);
+}
+
+::slotted(zn-key) {
+  flex: 0 0 auto;
+}
+
+::slotted([hidden]) {
+  display: none !important;
+}

package/src/components/menu-item/menu-item.component.ts

@@ -78,6 +78,21 @@ export default class ZnMenuItem extends ZincElement {
 
   @property({type: Boolean, reflect: true}) confirm = false;
 
+  /** Removes all padding from the menu item. */
+  @property({type: Boolean, reflect: true}) flush = false;
+
+  /** Removes horizontal (left/right) padding only. Ignored if flush is set. */
+  @property({type: Boolean, reflect: true, attribute: 'flush-x'}) flushX = false;
+
+  /** Removes vertical (top/bottom) padding only. Ignored if flush is set. */
+  @property({type: Boolean, reflect: true, attribute: 'flush-y'}) flushY = false;
+
+  /** Removes the border from the menu item. */
+  @property({type: Boolean, reflect: true, attribute: 'no-border'}) noBorder = false;
+
+  /** Marks the menu item as currently active/selected. */
+  @property({type: Boolean, reflect: true}) active = false;
+
   private readonly localize = new LocalizeController(this);
   private readonly hasSlotController = new HasSlotController(this, 'submenu');
   private submenuController: SubmenuController = new SubmenuController(this, this.hasSlotController, this.localize);
@@ -209,6 +224,11 @@ export default class ZnMenuItem extends ZincElement {
           'menu-item--success': this.color === 'success',
           'menu-item--warning': this.color === 'warning',
           'menu-item--transparent': this.color === 'transparent',
+          'menu-item--flush': this.flush,
+          'menu-item--flush-x': this.flushX && !this.flush,
+          'menu-item--flush-y': this.flushY && !this.flush,
+          'menu-item--no-border': this.noBorder,
+          'menu-item--active': this.active,
 
         })}
         ?aria-haspopup="${this.isSubmenu()}"

package/src/components/menu-item/menu-item.scss

@@ -23,7 +23,7 @@
   white-space: nowrap;
   cursor: pointer;
   border-bottom-width: 1px;
-
+  width: 100%;
   text-decoration: none;
   color: var(--color);
 }
@@ -44,6 +44,72 @@
   cursor: wait;
 }
 
+// Flush variants - remove padding
+.menu-item--flush {
+  padding: 0;
+}
+
+.menu-item--flush-x {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.menu-item--flush-y {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+// No border variant
+.menu-item--no-border {
+  border-bottom-width: 0;
+}
+
+// Active state - vertical strip indicator
+.menu-item--active::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  background-color: var(--hover-color);
+}
+
+.menu-item.menu-item--active .menu-item__label {
+  font-weight: 700;
+  color: var(--hover-color);
+}
+
+.menu-item--rtl.menu-item--active::before {
+  left: auto;
+  right: 0;
+}
+
+// Active state with color variants
+.menu-item--active.menu-item--primary::before {
+  background-color: rgb(var(--zn-primary));
+}
+
+.menu-item--active.menu-item--error::before {
+  background-color: rgb(var(--zn-color-error));
+}
+
+.menu-item--active.menu-item--info::before {
+  background-color: rgb(var(--zn-color-info));
+}
+
+.menu-item--active.menu-item--warning::before {
+  background-color: rgb(var(--zn-color-warning));
+}
+
+.menu-item--active.menu-item--success::before {
+  background-color: rgb(var(--zn-color-success));
+}
+
+.menu-item--active.menu-item--secondary::before {
+  background-color: rgb(var(--zn-accent));
+}
+
 .menu-item .menu-item__label {
   display: flex;
   flex: 1 1 auto;
@@ -99,7 +165,8 @@
 }
 
 :host(:hover:not([aria-disabled='true'], :focus-visible)) .menu-item,
-.menu-item--submenu-expanded {
+.menu-item--submenu-expanded,
+.menu-item--active {
   background-color: var(--hover-bg);
   color: var(--hover-color);
 }