@kubex/zinc 1.1.97 → 1.1.99

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

@@ -0,0 +1,86 @@
+@use "../../wc";
+
+:host {
+  @include wc.scrollbars;
+
+  display: block;
+  width: 100%;
+}
+
+.thumbnail-group__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--zn-spacing-small);
+  margin-bottom: var(--zn-spacing-x-small);
+}
+
+.thumbnail-group__caption {
+  @include wc.text-style(h1);
+
+  min-width: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.thumbnail-group__header-actions {
+  display: flex;
+  align-items: center;
+  flex: 0 0 auto;
+  gap: var(--zn-spacing-x-small);
+}
+
+.thumbnail-group__toggle {
+  @include wc.text-style(subheading);
+
+  padding: 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  white-space: nowrap;
+
+  &:hover {
+    color: rgb(var(--zn-text));
+  }
+
+  &:focus-visible {
+    outline: var(--zn-focus-ring);
+    outline-offset: var(--zn-focus-ring-offset);
+    border-radius: var(--zn-border-radius-small);
+  }
+}
+
+/* Collapsed — one row, scrolled horizontally */
+
+.thumbnail-group__items {
+  display: grid;
+  gap: var(--zn-thumbnail-gap, var(--zn-spacing-small));
+  grid-auto-flow: column;
+  grid-auto-columns: var(--zn-thumbnail-width, 180px);
+  overflow-x: auto;
+  overflow-y: hidden;
+  // Keeps the scrollbar off the captions.
+  padding-bottom: var(--zn-spacing-2x-small);
+  scroll-snap-type: x proximity;
+  overscroll-behavior-x: contain;
+}
+
+/* Expanded — wrapping grid, no row restriction */
+
+.thumbnail-group--expanded .thumbnail-group__items {
+  grid-auto-flow: row;
+  grid-auto-columns: auto;
+  grid-template-columns: repeat(auto-fill, minmax(var(--zn-thumbnail-width, 180px), 1fr));
+  overflow: visible;
+  padding-bottom: 0;
+}
+
+// The slot has to disappear from the grid so the slotted thumbnails become the grid items.
+slot {
+  display: contents;
+}
+
+::slotted(*) {
+  scroll-snap-align: start;
+  min-width: 0;
+}

package/src/components/thumbnail-group/thumbnail-group.test.ts

@@ -0,0 +1,151 @@
+import '../../../dist/zn.min.js';
+import {expect, fixture, html, waitUntil} from '@open-wc/testing';
+import type ZnThumbnail from '../thumbnail/thumbnail.component';
+import type ZnThumbnailGroup from './thumbnail-group.component';
+
+const thumbnails = (count: number) =>
+  Array.from({length: count}, (_, i) => `<zn-thumbnail value="v${i}" caption="Item ${i}"></zn-thumbnail>`).join('');
+
+describe('<zn-thumbnail-group>', () => {
+  it('should render a component', async () => {
+    const el = await fixture(html`
+      <zn-thumbnail-group></zn-thumbnail-group>`);
+
+    expect(el).to.exist;
+  });
+
+  it('should render the caption', async () => {
+    const el = await fixture<ZnThumbnailGroup>(html`
+      <zn-thumbnail-group caption="Landscape"></zn-thumbnail-group>`);
+
+    expect(el.shadowRoot!.querySelector('.thumbnail-group__caption')!.textContent).to.contain('Landscape');
+  });
+
+  it('should not render the toggle when the thumbnails fit on one row', async () => {
+    const el = await fixture<ZnThumbnailGroup>(html`
+      <zn-thumbnail-group caption="Landscape" style="width: 800px;">
+        <zn-thumbnail caption="One"></zn-thumbnail>
+        <zn-thumbnail caption="Two"></zn-thumbnail>
+      </zn-thumbnail-group>`);
+
+    expect(el.shadowRoot!.querySelector('.thumbnail-group__toggle')).to.not.exist;
+  });
+
+  it('should render the toggle when the row overflows', async () => {
+    const el = await fixture<ZnThumbnailGroup>(
+      `<zn-thumbnail-group caption="Landscape" style="width: 400px;">${thumbnails(12)}</zn-thumbnail-group>`);
+
+    await waitUntil(() => el.shadowRoot!.querySelector('.thumbnail-group__toggle'));
+
+    const toggle = el.shadowRoot!.querySelector<HTMLButtonElement>('.thumbnail-group__toggle')!;
+    expect(toggle.textContent!.trim()).to.equal('Show All (12)');
+  });
+
+  it('should use the total attribute in the toggle label', async () => {
+    const el = await fixture<ZnThumbnailGroup>(html`
+      <zn-thumbnail-group caption="Landscape" total="79" style="width: 800px;">
+        <zn-thumbnail caption="One"></zn-thumbnail>
+      </zn-thumbnail-group>`);
+
+    const toggle = el.shadowRoot!.querySelector<HTMLButtonElement>('.thumbnail-group__toggle')!;
+    expect(toggle.textContent!.trim()).to.equal('Show All (79)');
+  });
+
+  it('should expand and collapse from the toggle', async () => {
+    const el = await fixture<ZnThumbnailGroup>(html`
+      <zn-thumbnail-group caption="Landscape" always-toggle>
+        <zn-thumbnail caption="One"></zn-thumbnail>
+      </zn-thumbnail-group>`);
+
+    const expanded: string[] = [];
+    el.addEventListener('zn-expand', () => expanded.push('expand'));
+    el.addEventListener('zn-collapse', () => expanded.push('collapse'));
+
+    el.shadowRoot!.querySelector<HTMLButtonElement>('.thumbnail-group__toggle')!.click();
+    await el.updateComplete;
+
+    expect(el.expanded).to.be.true;
+    expect(el.shadowRoot!.querySelector<HTMLButtonElement>('.thumbnail-group__toggle')!.textContent!.trim())
+      .to.equal('Show Less');
+
+    el.shadowRoot!.querySelector<HTMLButtonElement>('.thumbnail-group__toggle')!.click();
+    await el.updateComplete;
+
+    expect(el.expanded).to.be.false;
+    expect(expanded).to.deep.equal(['expand', 'collapse']);
+  });
+
+  it('should move selection between thumbnails when selectable', async () => {
+    const el = await fixture<ZnThumbnailGroup>(html`
+      <zn-thumbnail-group selectable>
+        <zn-thumbnail value="a" caption="A" selected></zn-thumbnail>
+        <zn-thumbnail value="b" caption="B"></zn-thumbnail>
+      </zn-thumbnail-group>`);
+
+    const [a, b] = Array.from(el.querySelectorAll<ZnThumbnail>('zn-thumbnail'));
+    expect(el.value).to.equal('a');
+
+    let changed = false;
+    el.addEventListener('zn-change', () => (changed = true));
+
+    b.shadowRoot!.querySelector<HTMLElement>('.thumbnail__link')!.click();
+    await el.updateComplete;
+
+    expect(el.value).to.equal('b');
+    expect(a.selected).to.be.false;
+    expect(b.selected).to.be.true;
+    expect(changed).to.be.true;
+  });
+
+  it('should mirror the shorthand attributes onto host custom properties', async () => {
+    const el = await fixture<ZnThumbnailGroup>(html`
+      <zn-thumbnail-group aspect-ratio="1 / 1" thumbnail-width="120px" gap="4px">
+        <zn-thumbnail caption="One"></zn-thumbnail>
+      </zn-thumbnail-group>`);
+
+    expect(el.style.getPropertyValue('--zn-thumbnail-aspect-ratio')).to.equal('1 / 1');
+    expect(el.style.getPropertyValue('--zn-thumbnail-width')).to.equal('120px');
+    expect(el.style.getPropertyValue('--zn-thumbnail-gap')).to.equal('4px');
+
+    // Thumbnails are light-DOM children, so they inherit the properties from the host.
+    const thumbnail = el.querySelector<ZnThumbnail>('zn-thumbnail')!;
+    const rect = thumbnail.shadowRoot!.querySelector<HTMLElement>('.thumbnail__media')!.getBoundingClientRect();
+    expect(rect.width).to.be.closeTo(120, 1);
+    expect(rect.height).to.be.closeTo(120, 1);
+  });
+
+  it('should not clear a custom property set inline by the consumer', async () => {
+    const el = await fixture<ZnThumbnailGroup>(html`
+      <zn-thumbnail-group style="--zn-thumbnail-width: 90px;">
+        <zn-thumbnail caption="One"></zn-thumbnail>
+      </zn-thumbnail-group>`);
+
+    expect(el.style.getPropertyValue('--zn-thumbnail-width')).to.equal('90px');
+  });
+
+  it('should clear a shorthand property once its attribute is removed', async () => {
+    const el = await fixture<ZnThumbnailGroup>(html`
+      <zn-thumbnail-group thumbnail-width="120px">
+        <zn-thumbnail caption="One"></zn-thumbnail>
+      </zn-thumbnail-group>`);
+
+    el.thumbnailWidth = '';
+    await el.updateComplete;
+
+    expect(el.style.getPropertyValue('--zn-thumbnail-width')).to.equal('');
+  });
+
+  it('should not manage selection when selectable is not set', async () => {
+    const el = await fixture<ZnThumbnailGroup>(html`
+      <zn-thumbnail-group>
+        <zn-thumbnail value="a" caption="A"></zn-thumbnail>
+      </zn-thumbnail-group>`);
+
+    const a = el.querySelector<ZnThumbnail>('zn-thumbnail')!;
+    a.shadowRoot!.querySelector<HTMLElement>('.thumbnail__link')!.click();
+    await el.updateComplete;
+
+    expect(a.selected).to.be.false;
+    expect(el.value).to.equal('');
+  });
+});

package/src/components/tile/tile.scss

@@ -10,6 +10,7 @@
   align-items: center;
   justify-content: space-between;
   min-height: 48px;
+  padding: var(--zn-base-gap);
   column-gap: var(--zn-spacing-large);
 
   font-size: var(--zn-text-table-content-font-size);
@@ -23,14 +24,15 @@
   &--has-properties,
   &--has-actions {
     padding-inline: var(--zn-base-gap);
+    min-height: 85px;
   }
 
   &--has-description#{&}--has-caption {
-    padding-block: var(--zn-spacing-small);
+    padding-block: var(--zn-base-gap);
   }
 
   &--has-image {
-    padding: var(--zn-spacing-small);
+    padding: var(--zn-base-gap);
   }
 
   &--has-href {

package/src/components/translation-group/translation-group.test.ts

@@ -0,0 +1,22 @@
+import '../../../dist/zn.min.js';
+import { expect, fixture, html } from '@open-wc/testing';
+import type ZnInlineEdit from '../inline-edit/inline-edit.component';
+import type ZnTranslations from '../translations/translations.component';
+
+describe('<zn-translation-group>', () => {
+  // The group syncs its children from its own first update, which runs before theirs, so a child's
+  // pending value attribute must survive the language keys the group adds.
+  it("keeps a child's rendered value when it syncs the group language", async () => {
+    const group = await fixture(html`
+      <zn-translation-group label="Text" .languages=${{en: 'English', fr: 'French'}}>
+        <zn-translations name="heading" value='{"en":"Chat to us"}'></zn-translations>
+      </zn-translation-group>`);
+
+    const child = group.querySelector<ZnTranslations>('zn-translations')!;
+    await child.updateComplete;
+
+    expect(child.values).to.deep.equal({en: 'Chat to us'});
+    const input = child.shadowRoot!.querySelector<ZnInlineEdit>('zn-inline-edit')!;
+    expect(input.value).to.equal('Chat to us');
+  });
+});

package/src/components/translations/translations.component.ts

@@ -150,15 +150,30 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
 
   /** Adds a language key to this component's values if not already present. Used by zn-translation-group. */
   public addLanguageKey(languageCode: string) {
-    if (!Object.prototype.hasOwnProperty.call(this.values, languageCode)) {
-      this.values = {...this.values, [languageCode]: ''};
+    const values = this.pendingValues();
+    if (!Object.prototype.hasOwnProperty.call(values, languageCode)) {
+      this.values = {...values, [languageCode]: ''};
       this.updateValue();
     }
   }
 
   /** Returns all language codes that have values. */
   public getValueLanguages(): string[] {
-    return Object.keys(this.values);
+    return Object.keys(this.pendingValues());
+  }
+
+  /**
+   * `values`, falling back to the `value` attribute it is built from while that is still pending. A parent
+   * zn-translation-group syncs its children from its own first update, which runs before theirs, so reading
+   * `values` alone would see it empty and overwrite the value the server rendered.
+   */
+  private pendingValues(): Record<string, string> {
+    if (Object.keys(this.values).length > 0) return this.values;
+    try {
+      return JSON.parse(this.value || '{}') as Record<string, string>;
+    } catch {
+      return this.values;
+    }
   }
 
   disconnectedCallback() {

package/src/components/well/well.component.ts

@@ -14,6 +14,7 @@ import styles from './well.scss';
  * @since 1.0
  *
  * @slot - The default slot.
+ * @slot action - Content displayed on the right hand side of the well.
  */
 export default class ZnWell extends ZincElement {
   static styles: CSSResultGroup = unsafeCSS(styles);
@@ -21,9 +22,21 @@ export default class ZnWell extends ZincElement {
   @property() icon: string = '';
   @property({attribute: 'inline', type: Boolean, reflect: true}) inline: boolean;
 
+  /** Renders the default slot inside a `pre` element, preserving whitespace using a monospace font. */
+  @property({attribute: 'pre', type: Boolean, reflect: true}) pre: boolean;
+
+  /** Breaks long unbroken words, so they wrap instead of forcing the well wider. */
+  @property({attribute: 'break-long', type: Boolean, reflect: true}) breakLong: boolean;
+
   private readonly hasSlotController = new HasSlotController(this, '[default]', 'action');
 
   render() {
+    const contentClasses = classMap({
+      'well__content': true,
+      'well__content--pre': this.pre,
+      'well__content--break-long': this.breakLong,
+    });
+
     return html`
       <div class="${classMap({
         'well': true,
@@ -31,10 +44,15 @@ export default class ZnWell extends ZincElement {
       })}">
         ${this.icon ? html`
           <zn-icon src="${this.icon}" size="18"></zn-icon>` : ''}
-        ${this.hasSlotController.test('[default]') ? html`
-          <div>
-            <slot></slot>
-          </div>` : ''}
+        ${this.hasSlotController.test('[default]')
+          ? (this.pre
+            ? html`
+              <pre class="${contentClasses}"><slot></slot></pre>`
+            : html`
+              <div class="${contentClasses}">
+                <slot></slot>
+              </div>`)
+          : ''}
         ${this.hasSlotController.test('action') ? html`
           <slot name="action" class="well__action"></slot>` : ''}
       </div>

package/src/components/well/well.scss

@@ -17,3 +17,27 @@
 .well--inline {
   display: inline-flex;
 }
+
+// Without this the content's max-content width becomes the well's minimum size,
+// so a single long unbroken string (a token, a URL) widens the whole well.
+.well__content {
+  min-width: 0;
+}
+
+.well__content--pre {
+  margin: 0;
+  font-family: var(--zn-font-mono, 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace);
+  white-space: pre;
+  overflow-x: auto;
+}
+
+.well__content--break-long {
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+// Long lines have to be allowed to wrap before they can be broken.
+.well__content--pre.well__content--break-long {
+  white-space: pre-wrap;
+  overflow-x: visible;
+}

package/src/components/well/well.test.ts

@@ -7,4 +7,47 @@ describe('<zn-well>', () => {
       <zn-well></zn-well> `);
     expect(el).to.exist;
   });
+
+  it('should render the default slot in a div by default', async () => {
+    const el = await fixture(html`
+      <zn-well>content</zn-well> `);
+    const content = el.shadowRoot!.querySelector('.well__content')!;
+    expect(content.tagName).to.equal('DIV');
+    expect(content.classList.contains('well__content--pre')).to.be.false;
+  });
+
+  it('should render the default slot in a pre when pre is set', async () => {
+    const el = await fixture(html`
+      <zn-well pre>content</zn-well> `);
+    const content = el.shadowRoot!.querySelector('.well__content')!;
+    expect(content.tagName).to.equal('PRE');
+    expect(getComputedStyle(content).whiteSpace).to.equal('pre');
+  });
+
+  it('should break long words when break-long is set', async () => {
+    const el = await fixture(html`
+      <zn-well break-long>content</zn-well> `);
+    const content = el.shadowRoot!.querySelector('.well__content')!;
+    expect(content.classList.contains('well__content--break-long')).to.be.true;
+    expect(getComputedStyle(content).overflowWrap).to.equal('anywhere');
+  });
+
+  it('should wrap preformatted content when pre and break-long are combined', async () => {
+    const el = await fixture(html`
+      <zn-well pre break-long>content</zn-well> `);
+    const content = el.shadowRoot!.querySelector('.well__content')!;
+    expect(content.tagName).to.equal('PRE');
+    expect(getComputedStyle(content).whiteSpace).to.equal('pre-wrap');
+    expect(getComputedStyle(content).overflowWrap).to.equal('anywhere');
+  });
+
+  it('should not let long unbroken content widen the well when break-long is set', async () => {
+    const token = 'a'.repeat(400);
+    const container = await fixture(html`
+      <div style="width: 300px">
+        <zn-well break-long>${token}</zn-well>
+      </div> `);
+    const el = container.querySelector('zn-well')!;
+    expect(el.getBoundingClientRect().width).to.be.at.most(300);
+  });
 });

package/src/form-control.scss

@@ -123,6 +123,8 @@
   margin-top: var(--zn-spacing-3x-small);
 }
 
-.form-control--checkbox-contained-wrapper {
+/* Let contained radios/checkboxes fill their grid row so cards in a row match height. */
+.form-control--checkbox-contained-wrapper,
+.form-control--radio-contained-wrapper {
   height: 100%;
 }

package/src/internal/conditional.ts

@@ -1,4 +1,4 @@
-import {deepQuerySelectorAll} from '../utilities/query';
+import {deepQuerySelectorAll, idSelector} from '../utilities/query';
 import type {ReactiveController, ReactiveControllerHost} from 'lit';
 
 export interface ConditionalHost {
@@ -26,7 +26,7 @@ export class ConditionalController implements ReactiveController {
     const ids = this.host.conditional.split(',').map(id => id.trim());
 
     ids.forEach(id => {
-      const byId = deepQuerySelectorAll(`#${id}`, document.documentElement, '') as (Element & {
+      const byId = deepQuerySelectorAll(idSelector(id), document.documentElement, '') as (Element & {
         value: string | string[];
       })[];
       const byName = deepQuerySelectorAll(`[name="${id}"]`, document.documentElement, '') as (Element & {

package/src/internal/form.ts

@@ -1,4 +1,5 @@
 import {getFormNavigationController} from "./form-navigation";
+import {idSelector} from "../utilities/query";
 import {Store} from "./storage";
 import type {ReactiveController, ReactiveControllerHost} from "lit";
 import type {ZincFormControl} from "./zinc-element";
@@ -256,7 +257,7 @@ export class FormControlController implements ReactiveController {
 
         if (formId) {
           const root = input.getRootNode() as Document | ShadowRoot | HTMLElement;
-          const form = root.querySelector(`#${formId}`);
+          const form = root.querySelector(idSelector(formId));
 
           if (form) {
             return form as HTMLFormElement;

package/src/internal/selection-card.ts

@@ -0,0 +1,19 @@
+/** Where a selection card renders its image, relative to the card's text. */
+export type SelectionCardImagePosition = 'top' | 'right' | 'bottom' | 'left';
+
+/**
+ * Where a selection card renders its radio/checkbox indicator. `start` keeps the standard
+ * inline position; `none` hides the indicator so the card itself shows the selected state.
+ */
+export type SelectionCardControlPosition =
+  | 'start'
+  | 'none'
+  | 'top-left'
+  | 'top-center'
+  | 'top-right'
+  | 'center-left'
+  | 'center'
+  | 'center-right'
+  | 'bottom-left'
+  | 'bottom-center'
+  | 'bottom-right';