@kubex/zinc 1.1.48 → 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.48",
+  "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

@@ -224,8 +224,12 @@ export default class ZnChannelTile extends ZincElement {
           ${this._renderLeading()}
           <div class="channel-tile__content">
             ${remaining !== null
-              ? html`
-                <h3 class="channel-tile__title">${this.subtitle} (${remaining}s)</h3>`
+              ? 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>`}

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/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';