@kubex/zinc 1.1.47 → 1.1.49

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

@@ -0,0 +1,34 @@
+---
+meta:
+  title: Color Select
+  description: A simple color picker. The dropdown lists color swatches with names; the closed control shows only the selected color's swatch.
+layout: component
+---
+
+```html:preview
+<zn-color-select label="Color" name="color"></zn-color-select>
+```
+
+## Examples
+
+### With a Default Value
+
+Set the selected color with the `value` attribute (lowercase color name).
+
+```html:preview
+<zn-color-select label="Color" name="color" value="blue"></zn-color-select>
+```
+
+### Clearable
+
+Add the `clearable` attribute to show a clear button when a color is selected.
+
+```html:preview
+<zn-color-select label="Color" name="color" value="green" clearable></zn-color-select>
+```
+
+### Help Text
+
+```html:preview
+<zn-color-select label="Color" name="color" help-text="Pick a color for the label."></zn-color-select>
+```

package/package.json

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

package/src/components/channel-tile/channel-tile.component.ts

@@ -176,6 +176,13 @@ export default class ZnChannelTile extends ZincElement {
     return Math.min(100, Math.max(0, (elapsed / total) * 100));
   }
 
+  private _remainingSeconds(): number | null {
+    // Only surfaced for auto-accept countdowns, not plain reservation windows.
+    const until = this._reservedUntilMs();
+    if (!until || !this.autoAcceptDelay) return null;
+    return Math.max(0, Math.ceil((until - Date.now()) / 1000));
+  }
+
   private _handleReject = (e: MouseEvent) => {
     e.preventDefault();
     e.stopPropagation();
@@ -193,6 +200,7 @@ export default class ZnChannelTile extends ZincElement {
   protected render(): unknown {
     const title = this.title || (this.available ? 'Available' : '');
     const countdown = this._isCountingDown() ? this._countdownPercent() : null;
+    const remaining = this._isCountingDown() ? this._remainingSeconds() : null;
 
     return html`
       <div
@@ -215,8 +223,16 @@ export default class ZnChannelTile extends ZincElement {
         <div class="channel-tile__body">
           ${this._renderLeading()}
           <div class="channel-tile__content">
-            <h3 class="channel-tile__title"><slot name="title">${title}</slot></h3>
-            <p class="channel-tile__subtitle"><slot name="subtitle">${this.subtitle}</slot></p>
+            ${remaining !== null
+              ? this.title
+                ? html`
+                  <h3 class="channel-tile__title"><slot name="title">${this.title}</slot></h3>
+                  <p class="channel-tile__subtitle">${this.subtitle} (${remaining}s)</p>`
+                : html`
+                  <h3 class="channel-tile__title">${this.subtitle} (${remaining}s)</h3>`
+              : html`
+                <h3 class="channel-tile__title"><slot name="title">${title}</slot></h3>
+                <p class="channel-tile__subtitle"><slot name="subtitle">${this.subtitle}</slot></p>`}
           </div>
           <slot name="footer" class="channel-tile__footer"></slot>
         </div>

package/src/components/channel-tile/channel-tile.scss

@@ -69,11 +69,11 @@
 
 .channel-tile__overlay {
   position: absolute;
-  top: 0;
+  top: 24px; // sit below the header strip (fixed 24px)
   left: 0;
   bottom: 0;
   width: 0;
-  background-color: rgba(var(--zn-color-success), 0.55);
+  background-color: rgb(154, 232, 162);
   transition: width 0.2s linear;
   pointer-events: none;
   z-index: 0;

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

@@ -0,0 +1,123 @@
+import {colors} from "../data-select/providers/color-data-provider";
+import {type CSSResultGroup, html, nothing, unsafeCSS} from 'lit';
+import {FormControlController} from "../../internal/form";
+import {property, query} from 'lit/decorators.js';
+import {watch} from "../../internal/watch";
+import ZincElement from '../../internal/zinc-element';
+import ZnOption from "../option";
+import ZnSelect from "../select";
+import type {ZincFormControl} from '../../internal/zinc-element';
+
+import styles from './color-select.scss';
+
+/**
+ * @summary A simple color picker. The dropdown lists color swatches with names; the closed control shows only the selected color's swatch.
+ * @documentation https://zinc.style/components/color-select
+ * @status experimental
+ * @since 1.0
+ *
+ * @dependency zn-select
+ * @dependency zn-option
+ *
+ * @event zn-input - Emitted when the selected color changes.
+ * @event zn-clear - Emitted when the clear button is activated.
+ *
+ * @csspart swatch - The color swatch shown in the closed control.
+ * @csspart combobox - The container that wraps the swatch and expand button (forwarded from zn-select).
+ * @csspart form-control-help-text - The help text's wrapper (forwarded from zn-select).
+ * @csspart form-control-input - The select's wrapper (forwarded from zn-select).
+ */
+export default class ZnColorSelect extends ZincElement implements ZincFormControl {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+  static dependencies = {
+    'zn-select': ZnSelect,
+    'zn-option': ZnOption,
+  };
+
+  @query('#select') select: ZnSelect;
+
+  /** The name of the select. Used for form submission. */
+  @property() name: string;
+
+  /** The selected color (lowercase name, e.g. "red"). Used for form submission. */
+  @property() value = '';
+
+  /** The select's label. */
+  @property() label = '';
+
+  /** The select's help text. */
+  @property({attribute: 'help-text'}) helpText = '';
+
+  /** Disables the select. */
+  @property({type: Boolean, reflect: true}) disabled = false;
+
+  /** Makes the select a required field. */
+  @property({type: Boolean, reflect: true}) required = false;
+
+  /** Shows a clear button when a color is selected. */
+  @property({type: Boolean}) clearable = false;
+
+  private readonly formControlController = new FormControlController(this);
+
+  get validity(): ValidityState {
+    return this.select.validity;
+  }
+
+  get validationMessage(): string {
+    return this.select.validationMessage;
+  }
+
+  checkValidity(): boolean {
+    return this.select.checkValidity();
+  }
+
+  getForm(): HTMLFormElement | null {
+    return this.formControlController.getForm();
+  }
+
+  reportValidity(): boolean {
+    return this.select.reportValidity();
+  }
+
+  setCustomValidity(message: string): void {
+    this.select.setCustomValidity(message);
+  }
+
+  @watch('value', {waitUntilFirstUpdate: true})
+  handleValueChange() {
+    this.formControlController.updateValidity();
+  }
+
+  private handleInput = (e: Event) => {
+    const target = e.target as ZnSelect;
+    this.value = (target.value as string) ?? '';
+  };
+
+  private handleClear = () => {
+    this.value = '';
+  };
+
+  protected render() {
+    return html`
+      <zn-select id="select"
+                 placement="bottom-start"
+                 label="${this.label}"
+                 help-text="${this.helpText}"
+                 name="${this.name}"
+                 clearable=${this.clearable || nothing}
+                 required=${this.required || nothing}
+                 ?disabled="${this.disabled}"
+                 .value="${this.value}"
+                 @zn-input="${this.handleInput}"
+                 @zn-clear="${this.handleClear}"
+                 exportparts="combobox,form-control-help-text,form-control-input">
+        <div slot="prefix" part="swatch"
+             class="color-swatch ${this.value ? `color-swatch--${this.value}` : 'color-swatch--empty'}"></div>
+        ${colors.map(color => html`
+          <zn-option value="${color.toLowerCase()}">
+            <div slot="prefix" class="color-swatch color-swatch--${color.toLowerCase()}"></div>
+            ${color}
+          </zn-option>`)}
+      </zn-select>`;
+  }
+}

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

@@ -0,0 +1,78 @@
+@use "../../wc";
+
+// Same palette as data-select's color provider
+$colors: (
+  red: var(--zn-color-red-500),
+  blue: var(--zn-color-blue-500),
+  orange: var(--zn-color-orange-500),
+  yellow: var(--zn-color-yellow-400),
+  indigo: var(--zn-color-indigo-500),
+  violet: var(--zn-color-violet-500),
+  green: var(--zn-color-green-500),
+  pink: var(--zn-color-pink-500),
+  gray: var(--zn-color-gray-500)
+);
+
+// Only wide enough for the swatch and the expand icon
+:host {
+  display: inline-block;
+}
+
+.color-swatch {
+  width: var(--zn-spacing-small);
+  height: var(--zn-spacing-small);
+  display: block;
+  border-radius: var(--zn-border-radius-circle);
+  flex-shrink: 0;
+
+  @each $name, $color in $colors {
+    &--#{"" + $name} {
+      background-color: #{$color};
+    }
+  }
+
+  &--empty {
+    border: 1px dashed var(--zn-color-neutral-400);
+  }
+}
+
+// Never stretch to label/help-text width — only fit the swatch and controls
+zn-select::part(combobox) {
+  width: fit-content;
+  padding-inline-end: var(--zn-spacing-2x-small);
+}
+
+// Preview shows only the swatch — collapse the text input entirely
+zn-select::part(display-input) {
+  width: 0;
+  min-width: 0;
+  color: transparent;
+  caret-color: transparent;
+}
+
+// Let the dropdown grow to fit swatch + name instead of matching the control's width
+zn-select::part(listbox) {
+  min-width: max-content;
+  max-height: 300px;
+  padding-block: 0;
+}
+
+// Tighten the combobox: small, even gaps between swatch, clear button and chevron
+.color-swatch[part="swatch"] {
+  margin-inline-start: var(--zn-spacing-x-small);
+  margin-inline-end: 0;
+}
+
+// Gap between swatch and name in the dropdown list
+zn-option .color-swatch {
+  margin-inline-end: var(--zn-spacing-x-small);
+}
+
+zn-select::part(clear-button),
+zn-select::part(expand-icon) {
+  margin-inline-start: var(--zn-spacing-2x-small);
+}
+
+zn-select::part(clear-button) {
+  margin-inline-start: var(--zn-spacing-x-small);
+}

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

@@ -0,0 +1,28 @@
+import '../../../dist/zn.min.js';
+import {expect, fixture, html} from '@open-wc/testing';
+
+describe('<zn-color-select>', () => {
+  it('should render a component', async () => {
+    const el = await fixture(html`<zn-color-select></zn-color-select>`);
+    expect(el).to.exist;
+    expect(el.shadowRoot).to.exist;
+  });
+
+  it('should list the nine built-in colors', async () => {
+    const el = await fixture(html`<zn-color-select></zn-color-select>`);
+    const options = el.shadowRoot!.querySelectorAll('zn-option');
+    expect(options.length).to.equal(9);
+  });
+
+  it('should show the selected color swatch in the preview', async () => {
+    const el = await fixture(html`<zn-color-select value="red"></zn-color-select>`);
+    const swatch = el.shadowRoot!.querySelector('[slot="prefix"]')!;
+    expect(swatch.classList.contains('color-swatch--red')).to.be.true;
+  });
+
+  it('should show an empty swatch when no color is selected', async () => {
+    const el = await fixture(html`<zn-color-select></zn-color-select>`);
+    const swatch = el.shadowRoot!.querySelector('[slot="prefix"]')!;
+    expect(swatch.classList.contains('color-swatch--empty')).to.be.true;
+  });
+});

package/src/components/color-select/index.ts

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

package/src/components/file/file.component.ts

@@ -421,18 +421,26 @@ export default class ZnFile extends ZincElement implements ZincFormControl {
     // Use the transferred file list from the drag drop interface
     const hasTrigger = this.hasSlotController.test('trigger');
     if (!hasTrigger) {
-      const disappearAnimation = getAnimation(this.inputChosen, 'file.text.disappear', {dir: this.localize.dir()});
-      const appearAnimation = getAnimation(this.inputChosen, 'file.text.appear', {dir: this.localize.dir()});
+      const inputChosen = this.inputChosen;
+      const dropareaIcon = this.dropareaIcon;
 
-      if (this.droparea) {
-        const dropIconAnimation = getAnimation(this.dropareaIcon, 'file.iconDrop', {dir: this.localize.dir()});
+      if (this.droparea && dropareaIcon) {
+        const dropIconAnimation = getAnimation(dropareaIcon, 'file.iconDrop', {dir: this.localize.dir()});
         // eslint-disable-next-line @typescript-eslint/no-floating-promises
-        animateTo(this.dropareaIcon, dropIconAnimation.keyframes, dropIconAnimation.options);
+        animateTo(dropareaIcon, dropIconAnimation.keyframes, dropIconAnimation.options);
       }
-      // eslint-disable-next-line max-len
-      await animateTo(this.inputChosen, disappearAnimation.keyframes, disappearAnimation.options);
+
+      if (inputChosen) {
+        const disappearAnimation = getAnimation(inputChosen, 'file.text.disappear', {dir: this.localize.dir()});
+        await animateTo(inputChosen, disappearAnimation.keyframes, disappearAnimation.options);
+      }
+
       this.handleFiles(files);
-      await animateTo(this.inputChosen, appearAnimation.keyframes, appearAnimation.options);
+
+      if (inputChosen) {
+        const appearAnimation = getAnimation(inputChosen, 'file.text.appear', {dir: this.localize.dir()});
+        await animateTo(inputChosen, appearAnimation.keyframes, appearAnimation.options);
+      }
     } else {
       this.handleFiles(files);
     }

package/src/components/file/file.test.ts

@@ -1,10 +1,34 @@
 import '../../../dist/zn.min.js';
-import { expect, fixture, html } from '@open-wc/testing';
+import {expect, fixture, html, oneEvent} from '@open-wc/testing';
+import type ZnFile from './file.component';
 
-describe('<zn-drag-upload>', () => {
+describe('<zn-file>', () => {
   it('should render a component', async () => {
-    const el = await fixture(html` <zn-drag-upload></zn-drag-upload> `);
+    const el = await fixture(html`<zn-file></zn-file>`);
 
     expect(el).to.exist;
   });
+
+  for (const droparea of [false, true]) {
+    it(`accepts a drop when the ${droparea ? 'droparea' : 'standard input'} has no animation target`, async () => {
+      const el = await fixture<ZnFile>(html`<zn-file ?droparea=${droparea}></zn-file>`);
+      const dataTransfer = new DataTransfer();
+      dataTransfer.items.add(new File(['content'], 'example.txt', {type: 'text/plain'}));
+      const dropHandler = el as unknown as {
+        handleTransferItems: (items: DataTransferItemList | null) => Promise<FileList>;
+      };
+      dropHandler.handleTransferItems = () => Promise.resolve(dataTransfer.files);
+
+      const changed = oneEvent(el, 'zn-change');
+      el.shadowRoot!.querySelector<HTMLElement>('.form-control')!.dispatchEvent(new DragEvent('drop', {
+        bubbles: true,
+        cancelable: true,
+        dataTransfer
+      }));
+      await changed;
+
+      expect(el.files).to.have.length(1);
+      expect(el.files![0].name).to.equal('example.txt');
+    });
+  }
 });

package/src/components/textarea/textarea.scss

@@ -164,4 +164,10 @@
     border: none !important;
     background-color: transparent !important;
   }
+
+  & .textarea__control {
+    background-color: transparent;
+    box-shadow: none;
+    border: none;
+  }
 }

package/src/zinc.ts

@@ -73,6 +73,7 @@ export { default as File } from './components/file';
 export { default as CheckboxGroup } from './components/checkbox-group';
 export { default as Item } from './components/item';
 export { default as DataSelect } from './components/data-select';
+export { default as ColorSelect } from './components/color-select';
 export { default as ButtonMenu } from './components/button-menu';
 export { default as HoverContainer } from './components/hover-container';
 export { default as Slideout } from './components/slideout';