@kubex/zinc 1.1.117 → 1.1.119

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

@@ -2,81 +2,15 @@
   display: block;
 }
 
-// The body stacks the fields the select drives, so they take the row gap zn-form-group sets between stacked
-// controls. The slotted children are `display: contents` through the slot, putting them in this same flex flow.
+// The body holds the form group and the actions row; the gap is what separates them.
 .panel__body {
   gap: var(--zn-spacing-medium);
 }
 
-// The header sets its own gap down to the first field; the panel's body padding on top of it would make that one gap
-// the odd one out.
-.panel--has-header .panel__body {
-  padding-top: 0;
-}
-
-.panel__header {
-  padding-bottom: var(--zn-spacing-medium);
-}
-
-.translation-group--inline .panel__header {
-  padding: 0 0 var(--zn-spacing-medium);
-}
-
-// zn-header holds its content row at 36px so a caption sits level with action buttons. The select is taller than
-// that and sets the height on its own, so the row hugs whichever of the two is bigger.
-.panel__header::part(content) {
-  min-height: 0;
-}
-
-// The actions container is a plain block that clips horizontally: its content would sit at the top rather than level
-// with the caption, and a select flush against its right edge would lose the focus ring.
-.panel__header::part(header-right) {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  overflow: visible;
-}
-
-.translation-group__language-field {
-  display: flex;
-  align-items: center;
-}
-
-// The trigger shows one language, so it sizes to that.
-.translation-group__language-select {
-  width: max-content;
-  max-width: 100%;
-}
-
-// Left alone the display input hands the trigger its default 20-character intrinsic width, however short the language
-// name is. Where field-sizing is unsupported that width is what is left, which only makes the trigger a little wider.
-.translation-group__language-select::part(display-input) {
-  width: auto;
-  min-width: 0;
-  field-sizing: content;
-}
-
-// The popup syncs its width to the trigger, which is now sized to the current language rather than the longest one in
-// the list. zn-select runs the popup with auto-size="vertical", so --auto-size-available-width is never set and the
-// listbox's own max-width is inert — this is the only thing keeping a long list on screen.
-.translation-group__language-select::part(listbox) {
-  min-width: 320px;
-  max-width: calc(100vw - var(--zn-spacing-large));
-}
-
-// The select is chrome in the panel header rather than a field to fill in, so it drops the input's fill and shadow.
-// The border stays, marking it out as something to open.
-.translation-group__language-select::part(combobox) {
-  background-color: transparent;
-  box-shadow: none;
-}
-
-.translation-group__language-select:hover::part(combobox) {
-  background-color: var(--zn-input-background-color-hover);
-}
-
-.translation-group__language-select:focus-within::part(combobox) {
-  box-shadow: 0 0 0 var(--zn-focus-ring-width) var(--zn-input-focus-ring-color);
+// The fields land in the form group's 6-column input grid, but they are assigned to this slot rather than the
+// group's, so its span rules cannot reach them — each takes the full row from here.
+::slotted(:not([slot])) {
+  grid-column: 1 / -1;
 }
 
 // The select's label is its accessible name only; the caption names the section on screen.
@@ -92,11 +26,13 @@
   border: 0;
 }
 
-// Matches zinc's form action rows (.form-actions, zn-form-actions): right-aligned, 16px apart.
+// Matches zinc's form action rows (.form-actions, zn-form-actions): right-aligned, 16px apart. The cap holds the
+// buttons level with the fields' right edge, which zn-form-group sizes to the same container.
 .translation-group__actions {
   display: flex;
   align-items: center;
   gap: var(--zn-spacing-small);
+  max-width: var(--zn-container-lg);
 }
 
 // The spacer, not an auto margin, is what splits the two sides: an auto margin on every right-hand button would open
@@ -114,8 +50,8 @@
   order: 0;
 }
 
-// The panel draws a border between any two body children, and the actions row is the first real element to follow
-// the fields' slot. Matched on .panel--has-actions to out-specify that rule.
+// The panel draws a border between any two body children, and the actions row follows the form group. Matched on
+// .panel--has-actions to out-specify that rule.
 .panel--has-actions .panel__body > .translation-group__actions {
   border: 0;
 }

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

@@ -1,6 +1,8 @@
 import '../../../dist/zn.min.js';
 import { expect, fixture, html } from '@open-wc/testing';
+import type ZnFormGroup from '../form-group/form-group.component';
 import type ZnInput from '../input/input.component';
+import type ZnOption from '../option/option.component';
 import type ZnSelect from '../select/select.component';
 import type ZnTranslationGroup from './translation-group.component';
 import type ZnTranslations from '../translations/translations.component';
@@ -110,24 +112,30 @@ describe('<zn-translation-group>', () => {
 
       const body = group.shadowRoot!.querySelector<HTMLElement>('.panel__body')!;
       expect(getComputedStyle(body).paddingLeft).to.equal('0px');
-      expect(getComputedStyle(group.shadowRoot!.querySelector<HTMLElement>('.panel__header')!).paddingLeft)
-        .to.equal('0px');
+
+      const formGroup = group.shadowRoot!.querySelector<ZnFormGroup>('zn-form-group')!;
+      expect(formGroup.getBoundingClientRect().left, 'flush with the form around it')
+        .to.equal(group.getBoundingClientRect().left);
     });
 
-    it('leaves the same gap under the caption as between the fields', async () => {
+    it('leaves the same gap between the fields as between the group and its actions', async () => {
       const group = await fixture<ZnTranslationGroup>(html`
         <zn-translation-group inline label="Content" .languages=${{en: 'English', fr: 'French'}}>
           <zn-translations name="heading"></zn-translations>
         </zn-translation-group>`);
-      // The spacing tokens live in the theme stylesheet, which the bundle under test does not carry.
+      // The spacing tokens live in the theme stylesheet, which the bundle under test does not carry. The form
+      // group's gap is one shorthand across both axes, so an unset column gap would void the row gap with it.
       group.style.setProperty('--zn-spacing-medium', '24px');
+      group.style.setProperty('--zn-spacing-small', '16px');
       await group.updateComplete;
 
-      const header = group.shadowRoot!.querySelector<HTMLElement>('.panel__header')!;
+      const formGroup = group.shadowRoot!.querySelector<ZnFormGroup>('zn-form-group')!;
+      await formGroup.updateComplete;
+      const fields = formGroup.shadowRoot!.querySelector<HTMLElement>('.form-control-input')!;
       const body = group.shadowRoot!.querySelector<HTMLElement>('.panel__body')!;
-      // zn-form-group's row gap between stacked controls. The header heads the same stack, so its gap matches.
-      expect(getComputedStyle(body).rowGap).to.equal('24px');
-      expect(getComputedStyle(header).paddingBottom).to.equal('24px');
+
+      expect(getComputedStyle(fields).rowGap, "the form group's gap between fields").to.equal('24px');
+      expect(getComputedStyle(body).rowGap, 'and down to the actions row').to.equal('24px');
     });
 
 
@@ -150,7 +158,7 @@ describe('<zn-translation-group>', () => {
       return group.shadowRoot!.querySelector<ZnSelect>('zn-select')!;
     }
 
-    it('sits in the header, opposite the caption', async () => {
+    it("sits under the caption, in the form group's chip slot", async () => {
       const group = await fixture<ZnTranslationGroup>(html`
         <zn-translation-group label="Content" .languages=${{en: 'English', fr: 'French'}}>
           <zn-translations name="heading"></zn-translations>
@@ -158,66 +166,92 @@ describe('<zn-translation-group>', () => {
       await group.updateComplete;
 
       const field = group.shadowRoot!.querySelector<HTMLElement>('.translation-group__language-field')!;
-      expect(field.getAttribute('slot')).to.equal('actions');
-      expect(field.closest('zn-header')).to.exist;
-      expect(group.shadowRoot!.querySelector('.panel__body zn-select')).to.be.null;
+      expect(field.assignedSlot?.name, 'assigned to the chip slot').to.equal('chip');
+
+      const formGroup = group.shadowRoot!.querySelector<ZnFormGroup>('zn-form-group')!;
+      await formGroup.updateComplete;
+      const label = formGroup.shadowRoot!.querySelector<HTMLElement>('[part="form-control-label"]')!;
+      expect(field.getBoundingClientRect().top, 'below the caption')
+        .to.be.greaterThan(label.getBoundingClientRect().bottom - 1);
     });
 
-    it('leaves the caption to the label alone, with the count on the chip', async () => {
+    it('leaves the caption to the form group label, with the count on the chip', async () => {
       const group = await fixture<ZnTranslationGroup>(html`
         <zn-translation-group label="Content" .languages=${{en: 'English', fr: 'French'}}>
           <zn-translations name="heading" value='{"en":"Hi","fr":"Salut"}'></zn-translations>
         </zn-translation-group>`);
       await group.updateComplete;
 
-      const header = group.shadowRoot!.querySelector('.panel__header')!;
-      expect(header.getAttribute('caption')).to.equal('Content');
-      expect(header.querySelector('[slot="caption"]'), 'nothing else rides the caption').to.be.null;
-      expect(group.shadowRoot!.querySelector('.translation-group__language-label')).to.be.null;
+      const formGroup = group.shadowRoot!.querySelector<ZnFormGroup>('zn-form-group')!;
+      await formGroup.updateComplete;
+      const label = formGroup.shadowRoot!.querySelector<HTMLElement>('[part="form-control-label"]')!;
+      expect(label.textContent?.trim(), 'nothing else rides the caption').to.equal('Content');
+
+      const summary = selectOf(group).querySelector('zn-chip[slot="suffix"]')!;
+      expect(summary.textContent?.trim()).to.equal('1/1');
     });
 
-    it('drops the fill and shadow but keeps the border, hover and focus', async () => {
+    it('wears the same chrome as any other select', async () => {
       const group = await fixture<ZnTranslationGroup>(html`
         <zn-translation-group label="Content" .languages=${{en: 'English', fr: 'French'}}>
           <zn-translations name="heading"></zn-translations>
         </zn-translation-group>`);
       // The input tokens live in the theme stylesheet, which the bundle under test does not carry.
+      group.style.setProperty('--zn-input-background-color', 'rgb(1, 2, 3)');
+      group.style.setProperty('--zn-shadow-x-small', '0 1px 2px rgb(7, 8, 9)');
       group.style.setProperty('--zn-input-border-width', '1px');
       group.style.setProperty('--zn-input-border-color', 'rgb(9, 9, 9)');
-      group.style.setProperty('--zn-focus-ring-width', '3px');
-      group.style.setProperty('--zn-input-focus-ring-color', 'rgb(4, 5, 6)');
       await group.updateComplete;
 
       const select = selectOf(group);
       await select.updateComplete;
-      const combobox = select.shadowRoot!.querySelector<HTMLElement>('[part~="combobox"]')!;
+      const styles = getComputedStyle(select.shadowRoot!.querySelector<HTMLElement>('[part~="combobox"]')!);
 
-      const styles = getComputedStyle(combobox);
-      expect(styles.backgroundColor).to.equal('rgba(0, 0, 0, 0)');
-      expect(styles.boxShadow).to.equal('none');
-      expect(styles.borderTopWidth, 'the border stays').to.equal('1px');
-      expect(styles.borderTopColor, 'the border stays').to.equal('rgb(9, 9, 9)');
+      expect(styles.backgroundColor, 'the fill').to.equal('rgb(1, 2, 3)');
+      expect(styles.boxShadow, 'the shadow').to.include('rgb(7, 8, 9)');
+      expect(styles.borderTopWidth, 'the border').to.equal('1px');
+      expect(styles.borderTopColor, 'the border').to.equal('rgb(9, 9, 9)');
+    });
 
-      select.focus();
+    it('fills the width of the label column', async () => {
+      const el = await fixture<HTMLElement>(html`
+        <div style="width: 900px">
+          <zn-translation-group label="Content" .languages=${{en: 'English', fr: 'French'}}>
+            <zn-translations name="heading"></zn-translations>
+          </zn-translation-group>
+        </div>`);
+      const group = el.querySelector<ZnTranslationGroup>('zn-translation-group')!;
+      await group.updateComplete;
+
+      const formGroup = group.shadowRoot!.querySelector<ZnFormGroup>('zn-form-group')!;
+      await formGroup.updateComplete;
+      const column = formGroup.shadowRoot!.querySelector<HTMLElement>('[part="form-control-chip"]')!;
+
+      const select = selectOf(group);
       await select.updateComplete;
-      expect(getComputedStyle(combobox).boxShadow, 'focus stays visible').to.not.equal('none');
+      expect(select.getBoundingClientRect().width).to.be.closeTo(column.getBoundingClientRect().width, 1);
     });
 
-    it('sizes the trigger to its language and holds the listbox open wider', async () => {
+    it('filters the list on the name or the code, which stays off the option', async () => {
       const group = await fixture<ZnTranslationGroup>(html`
-        <zn-translation-group label="Content" .languages=${{en: 'English', fr: 'French'}}>
+        <zn-translation-group label="Content" .languages=${{en: 'English', fr: 'French', de: 'German'}}>
           <zn-translations name="heading"></zn-translations>
         </zn-translation-group>`);
       await group.updateComplete;
 
       const select = selectOf(group);
       await select.updateComplete;
+      const option = (code: string) => select.querySelector<ZnOption>(`zn-option[value="${code}"]`)!;
+      expect(option('de').getTextLabel().trim(), 'the code is not on show').to.equal('German');
 
-      // The whole point: the trigger is no longer pinned to the width the options need.
-      expect(select.getBoundingClientRect().width).to.be.lessThan(320);
+      await select.show();
+      const input = select.shadowRoot!.querySelector<HTMLInputElement>('[part~="display-input"]')!;
+      input.value = 'de';
+      input.dispatchEvent(new InputEvent('input', {bubbles: true, composed: true}));
+      await select.updateComplete;
 
-      const listbox = select.shadowRoot!.querySelector<HTMLElement>('[part~="listbox"]')!;
-      expect(getComputedStyle(listbox).minWidth).to.equal('320px');
+      expect(option('de').hidden, 'matched on its code').to.be.false;
+      expect(option('fr').hidden, 'and nothing else').to.be.true;
     });
 
     it('names the select for a screen reader without showing the label', async () => {
@@ -234,18 +268,22 @@ describe('<zn-translation-group>', () => {
       expect(label.getBoundingClientRect().width).to.be.lessThan(2);
     });
 
-    it('renders a header for the select even with no caption', async () => {
+    it('stands the select on its own with no caption', async () => {
       const group = await fixture<ZnTranslationGroup>(html`
         <zn-translation-group .languages=${{en: 'English', fr: 'French'}}>
           <zn-translations name="heading"></zn-translations>
         </zn-translation-group>`);
       await group.updateComplete;
 
-      expect(group.shadowRoot!.querySelector('.panel__header')).to.exist;
+      const formGroup = group.shadowRoot!.querySelector<ZnFormGroup>('zn-form-group')!;
+      await formGroup.updateComplete;
+
       expect(selectOf(group)).to.exist;
+      expect(formGroup.shadowRoot!.querySelector('[part="form-control-label"]'), 'no empty caption').to.be.null;
+      expect(formGroup.shadowRoot!.querySelector('[part="form-control-chip"]'), 'the select keeps its column').to.exist;
     });
 
-    it('keeps the header to itself, with slotted actions going to the bottom', async () => {
+    it('keeps the form group to the fields, with slotted actions going to the bottom', async () => {
       const group = await fixture<ZnTranslationGroup>(html`
         <zn-translation-group label="Content" .languages=${{en: 'English', fr: 'French'}}>
           <zn-button slot="actions">Auto translate</zn-button>
@@ -254,7 +292,7 @@ describe('<zn-translation-group>', () => {
       await group.updateComplete;
 
       const actionsSlot = group.shadowRoot!.querySelector('slot[name="actions"]')!;
-      expect(actionsSlot.closest('zn-header'), 'the header takes no actions').to.be.null;
+      expect(actionsSlot.closest('zn-form-group'), 'the form group takes no actions').to.be.null;
       expect(actionsSlot.closest('.panel__body'), 'they go to the body').to.exist;
     });
 

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

@@ -223,14 +223,9 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
     return {type: 'error', label: language === 'en' ? 'Empty' : 'English'};
   }
 
-  /**
-   * `English (EN)` — the configured name plus its code, unless the name already is the code, in which case the code
-   * alone. `languages` is written both ways: `{"en": "English"}` and `{"en": "EN"}`.
-   */
+  /** The configured name, or the code where `languages` does not name the language. */
   private languageLabel(language: string): string {
-    const name = this.languages[language] ?? language.toUpperCase();
-    const code = language.toUpperCase();
-    return name.toUpperCase() === code ? name : `${name} (${code})`;
+    return this.languages[language] ?? language.toUpperCase();
   }
 
   /**
@@ -496,6 +491,7 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
               class="translations__language-select"
               part="language-select"
               hoist
+              search
               ?disabled="${this.disabled}"
               .value="${this._activeLanguage}"
               @zn-change="${this.handleLanguageSelect}"