@kubex/zinc 1.0.114 → 1.0.115

package/package.json

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

package/scss/_root.scss

@@ -52,21 +52,21 @@
 
 @media (min-width: 1024px) {
   :root {
-    --zn-base-gap: 14px;
+    --zn-base-gap: 16px;
     --zn-gutter: 6px;
   }
 }
 
 @media (min-width: 1600px) {
   :root {
-    --zn-base-gap: 16px;
+    --zn-base-gap: 20px;
     --zn-gutter: 8px;
   }
 }
 
 @media (min-width: 2000px) {
   :root {
-    --zn-base-gap: 18px;
+    --zn-base-gap: 24px;
     --zn-gutter: 10px;
   }
 }

package/scss/mixins/_spacing-mixins.scss

@@ -43,7 +43,7 @@
 }
 
 @mixin padding {
-  padding: var(--zn-spacing-medium, 0);
+  padding: var(--zn-base-gap, 0);
 }
 
 @function spacing($size, $default: sm) {

package/src/components/cols/cols.scss

@@ -18,7 +18,7 @@
   width: 100%;
   container-type: inline-size;
   overflow: hidden;
-  gap: var(--zn-base-gap, var(--zn-divide-gap, var(--zn-spacing-medium)));
+  gap: var(--zn-spacing-medium);
 
   max-width: 100%;
 

package/src/components/data-select/data-select.scss

@@ -65,6 +65,7 @@ $sizes: (
 
 zn-select::part(listbox) {
   max-height: 300px;
+  padding-block: 0;
 }
 
 .select__icon {

package/src/components/dialog/dialog.scss

@@ -19,6 +19,10 @@
   overflow: auto;
 }
 
+.dialog__header + .dialog__body {
+  padding-top: 0;
+}
+
 .dialog {
   flex-direction: column;
   z-index: 2;

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

@@ -35,6 +35,7 @@ export default class ZnFormGroup extends ZincElement {
   /** The form groups help text. If you need to display HTML, use the `help-text` slot instead. */
   @property({attribute: 'help-text'}) helpText = '';
   @property({attribute: 'cols', type: Boolean}) forceCols = false;
+  @property({attribute: 'layout', type: String}) layout = "1,2";
 
   render() {
     const hasLabelSlot = this.hasSlotController.test('label');
@@ -56,38 +57,37 @@ export default class ZnFormGroup extends ZincElement {
         aria-labelledby="label"
         aria-describedby="help-text">
 
-        <zn-cols layout="1,2" mc="2" part="form-control-container" class="form-control__container">
+        <zn-cols layout="${this.layout}" part="form-control-container" class="form-control__container">
           ${hasLabel || hasHelpText || this.forceCols ? html`
-            <div>` : html``}
-          ${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>` : html``}
 
-          ${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``}
+              ${hasLabel ? html`
+                <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>` : html``}
 
-          ${hasLabel || hasHelpText || this.forceCols ? html`</div>` : html``}
+              ${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

@@ -5,6 +5,7 @@
   display: block;
   line-height: var(--zn-line-height-dense);
   max-width: var(--zn-container-lg);
+  --zn-col-gap: calc(var(--zn-spacing-medium, 20px) * 3)
 }
 
 .form-control {

package/src/components/header/header.scss

@@ -109,10 +109,6 @@
     &__caption {
 
     }
-
-    .caption {
-      min-height: initial;
-    }
   }
 }
 
@@ -139,7 +135,7 @@
     justify-content: center;
     flex-direction: column;
     gap: 1px;
-    min-height: 43px;
+    min-height: 24px;
     flex-shrink: 1;
     max-width: 100%;
   }

package/src/components/panel/panel.scss

@@ -43,7 +43,7 @@
 
 
   &__header {
-    padding: var(--zn-spacing-x-small) var(--zn-spacing-medium);
+    padding: var(--zn-base-gap);
 
     // background-color: rgba(var(--zn-panel-highlight), 0.6);
     // border-bottom: 1px solid rgb(var(--zn-border-color));
@@ -74,7 +74,7 @@
     flex-direction: column;
     overflow-y: auto;
     flex-grow: 1;
-    padding: 0 var(--zn-spacing-medium) var(--zn-spacing-medium);
+    padding: 0 var(--zn-base-gap) var(--zn-base-gap) var(--zn-base-gap);
 
     > :not([hidden]) ~ :not([hidden]) {
       border: 1px solid rgb(var(--zn-border-color));
@@ -84,7 +84,7 @@
   &__footer {
     font-size: var(--zn-font-size-small);
     display: block;
-    padding: var(--zn-spacing-small) var(--zn-spacing-medium);
+    padding: var(--zn-spacing-small) var(--zn-base-gap);
     background: rgb(var(--zn-panel-secondary));
     border-bottom-left-radius: var(--zn-border-radius-large);
     border-bottom-right-radius: var(--zn-border-radius-large);
@@ -109,21 +109,9 @@
     }
   }
 
-  &:before {
-    position: absolute;
-    content: '';
-    bottom: -3px;
-    left: 0;
-    right: 0;
-    height: 20px;
-    background-color: rgb(var(--zn-shadow));
-    border-radius: var(--zn-border-radius-large);
-    z-index: -1;
-  }
-
 
   &:not(.panel--has-header):not(.panel--flush, .panel--flush-y) &__body {
-    padding-top: var(--zn-spacing-medium);
+    padding-top: var(--zn-base-gap);
   }
 
   &--flush {

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

@@ -722,7 +722,9 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
   private handleClearClick(event: MouseEvent) {
     event.stopPropagation();
 
-    if (this.value !== '') {
+    if (this.value.length > 0) {
+      this.valueHasChanged = true;
+
       if (this._isTypeable) {
         this.clearSearch();
         this.displayInput.value = '';

package/src/components/select/select.scss

@@ -127,6 +127,15 @@
   flex-wrap: wrap;
   gap: var(--zn-spacing-2x-small);
   padding-inline-start: 0;
+  /* Allow the control to grow with the wrapped tag rows instead of clipping them, and pack the rows
+     from the top with a little vertical padding. align-self stops the popup from stretching the
+     combobox to a fixed height, so it sizes to its (wrapped) content. */
+  overflow: visible;
+  align-content: flex-start;
+  align-items: center;
+  align-self: flex-start;
+  height: auto;
+  padding-block: var(--zn-spacing-2x-small);
 }
 
 .select__value-input {
@@ -149,13 +158,21 @@
   margin-inline-start: var(--zn-spacing-2x-small);
 }
 
-.select__tags::slotted(zn-chip) {
-  cursor: pointer !important;
+/* The tags are rendered into the shadow (not slotted), so target them as descendants. Only the remove
+   "X" is clickable (pointer); the chip body isn't, so give it a default cursor rather than letting it
+   inherit the combobox's text cursor in search/free-text mode. */
+.select__tags zn-chip {
+  cursor: default;
+}
+
+.select__tags zn-icon[slot="action"] {
+  cursor: pointer;
 }
 
 .select--disabled .select__tags,
-.select--disabled .select__tags::slotted(zn-chip) {
-  cursor: not-allowed !important;
+.select--disabled .select__tags zn-chip,
+.select--disabled .select__tags zn-icon[slot="action"] {
+  cursor: not-allowed;
 }
 
 /* Standard selects */
@@ -374,7 +391,6 @@
   border: solid var(--zn-panel-border-width) var(--zn-panel-border-color);
   border-radius: var(--zn-border-radius-medium);
   margin: var(--zn-spacing-x-small) 0;
-  padding-block: var(--zn-spacing-x-small);
   padding-inline: 0;
   overflow: auto;
   overscroll-behavior: none;

package/src/components/select/select.test.ts

@@ -3,6 +3,16 @@ import {expect, fixture, html} from '@open-wc/testing';
 import type ZnOption from '../option/option.component';
 import type ZnSelect from './select.component';
 
+// The popup's ResizeObserver can emit a benign "loop completed with undelivered notifications"
+// warning when the dropdown opens during layout-measuring tests. It's not a real error — ignore it
+// so the test runner doesn't treat it as an uncaught exception (capture phase runs before the runner's).
+window.addEventListener('error', (e: ErrorEvent) => {
+  if (typeof e.message === 'string' && e.message.includes('ResizeObserver loop')) {
+    e.stopImmediatePropagation();
+    e.preventDefault();
+  }
+}, true);
+
 describe('<zn-select>', () => {
   it('should render a component', async () => {
     const el = await fixture(html`
@@ -177,6 +187,52 @@ describe('<zn-select>', () => {
 
   });
 
+  describe('multiple + search layout', () => {
+    const openWithTags = async (width: number) => {
+      const el = await fixture<ZnSelect>(html`
+        <zn-select search multiple max-options-visible="0" style="width: ${width}px;">
+          <zn-option value="a" selected>Urgent</zn-option>
+          <zn-option value="b" selected>Backend</zn-option>
+          <zn-option value="c" selected>Frontend</zn-option>
+          <zn-option value="d" selected>stetset</zn-option>
+          <zn-option value="e" selected>another</zn-option>
+        </zn-select>
+      `);
+      await el.updateComplete;
+      await el.show();
+      await el.updateComplete;
+      return el.shadowRoot!.querySelector<HTMLElement>('.select__combobox')!;
+    };
+
+    it('grows to show all tags instead of clipping them when they wrap', async () => {
+      const cb = await openWithTags(360);
+      // scrollHeight > clientHeight would mean wrapped rows are clipped by the box.
+      expect(cb.scrollHeight).to.equal(cb.clientHeight);
+    });
+
+    it('does not clip tags at very narrow widths', async () => {
+      const cb = await openWithTags(180);
+      expect(cb.scrollHeight).to.equal(cb.clientHeight);
+    });
+
+    it('shows a pointer cursor on a tag remove icon (even in search mode)', async () => {
+      // In search/free-text mode the combobox uses cursor:text, which the chips would otherwise inherit.
+      const el = await fixture<ZnSelect>(html`
+        <zn-select multiple search>
+          <zn-option value="a" selected>Apple</zn-option>
+        </zn-select>
+      `);
+      await el.updateComplete;
+      const removeIcon = el.shadowRoot!.querySelector<HTMLElement>('.select__tags zn-icon[slot="action"]');
+      expect(removeIcon, 'remove icon should exist').to.exist;
+      // Only the remove X is clickable, so only it gets a pointer cursor...
+      expect(getComputedStyle(removeIcon!).cursor).to.equal('pointer');
+      // ...the chip body is not clickable, so it should not show a pointer.
+      const chip = el.shadowRoot!.querySelector<HTMLElement>('.select__tags zn-chip')!;
+      expect(getComputedStyle(chip).cursor).to.equal('default');
+    });
+  });
+
   describe('free-text', () => {
     const type = (el: ZnSelect, text: string) => {
       const displayInput = el.shadowRoot!.querySelector<HTMLInputElement>('.select__display-input')!;

package/src/components/table/table.scss

@@ -95,6 +95,7 @@ td.capcol {
   }
 
   .actions button {
+    display: flex;
     padding: 0;
     margin: 0;
     background: transparent;

package/src/components/tile/tile.scss

@@ -12,7 +12,7 @@
   &--has-properties,
   &--has-actions,
   &--has-image {
-    padding: var(--zn-spacing-large);
+    padding: var(--zn-spacing-medium);
   }
 
 
@@ -62,7 +62,7 @@
   justify-content: flex-end;
   width: 50%;
   flex-grow: 1;
-  column-gap: var(--zn-spacing-large);
+  column-gap: var(--zn-spacing-medium);
 }
 
 .tile__properties {