@kubex/zinc 1.1.116 → 1.1.118

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

@@ -1,10 +1,9 @@
 import {classMap} from 'lit/directives/class-map.js';
 import {type CSSResultGroup, html, nothing, type PropertyValues, unsafeCSS} from 'lit';
 import {HasSlotController} from '../../internal/slot';
-import {ifDefined} from 'lit/directives/if-defined.js';
 import {property, state} from 'lit/decorators.js';
 import ZnChip from '../chip';
-import ZnHeader from '../header';
+import ZnFormGroup from '../form-group';
 import ZnOption from '../option';
 import ZnPanel from '../panel/panel.component';
 import ZnSelect from '../select';
@@ -19,8 +18,12 @@ import styles from './translation-group.scss';
  * @status experimental
  * @since 1.0
  *
- * The select sits at the top right of the header, opposite the caption. Choosing a language switches every child at
- * once, and each child hides its own select while it is in a group — `grouped` is set on them here.
+ * The fields sit in a `zn-form-group`, so the caption, help text and the language select share its label column and
+ * the fields line up with every other form group around them. Choosing a language switches every child at once, and
+ * each child hides its own select while it is in a group — `grouped` is set on them here.
+ *
+ * The select is searchable. Each option holds its language code as its value, so typing `de` finds German without the
+ * code being on show.
  *
  * Closed, the select carries how many target languages are done — `1/5`. Its options each carry a chip aggregated
  * across the children:
@@ -35,11 +38,11 @@ import styles from './translation-group.scss';
  * The children own their values; this component only chooses which language is shown and reports on what they hold.
  * It reads them back on every child `zn-change`, so the chips and the count follow an edit as it is typed.
  *
- * Extends `zn-panel`, so `caption`, `icon`, `flush`, `transparent` and the `footer` slot behave as they do there.
- * Nested inside another panel, add `inline` to drop the chrome and keep the fields aligned with the surrounding form.
+ * Extends `zn-panel`, so `caption`, `flush`, `transparent` and the `footer` slot behave as they do there. Nested
+ * inside another panel, add `inline` to drop the chrome and keep the fields aligned with the surrounding form.
  *
  * @dependency zn-chip
- * @dependency zn-header
+ * @dependency zn-form-group
  * @dependency zn-option
  * @dependency zn-select
  *
@@ -49,30 +52,33 @@ import styles from './translation-group.scss';
  * @slot actions - Buttons for the bottom of the panel, on the white body rather than the grey footer. They sit on
  *  the right, as zinc's form action rows do; `align="start"` moves one to the left. Write them in the order they
  *  should be read — the sides are set by CSS ordering, so markup order is what a keyboard follows.
- * @slot footer - Content displayed in the grey panel footer. The header belongs to the language select; nothing
- *  else is slotted into it.
+ * @slot footer - Content displayed in the grey panel footer.
  *
  * @csspart base - The component's base wrapper.
+ * @csspart form-group - The form group holding the caption, the language select and the fields.
  * @csspart actions - The row of buttons at the bottom of the body.
- * @csspart language-field - The label and select that choose the language every child is editing.
+ * @csspart language-field - The select that chooses the language every child is editing, in the group's chip slot.
  * @csspart language-select - The select itself.
  */
 export default class ZnTranslationGroup extends ZnPanel {
   static styles: CSSResultGroup = [ZnPanel.styles, unsafeCSS(styles)];
   static dependencies = {
     'zn-chip': ZnChip,
-    'zn-header': ZnHeader,
+    'zn-form-group': ZnFormGroup,
     'zn-option': ZnOption,
     'zn-select': ZnSelect
   };
 
   private readonly _slotController = new HasSlotController(this, 'actions', 'footer');
 
-  /** The caption shown in the panel header. An alias for the inherited `caption`, which wins where both are set. */
+  /** The form group's label. An alias for the inherited `caption`, which wins where both are set. */
   @property() label = '';
 
+  /** Sits under the label, above the language select, as help text does in any other form group. */
+  @property({attribute: 'help-text'}) helpText = '';
+
   /**
-   * Drops the panel chrome — border, background and padding — so the group reads as a section of the form around it
+   * Drops the panel chrome — border, background and padding — so the group reads as a section of the surrounding form
    * rather than a panel of its own. For groups nested inside another panel, where the fields would otherwise sit
    * indented behind a second border.
    */
@@ -149,11 +155,9 @@ export default class ZnTranslationGroup extends ZnPanel {
     return {type: 'error', label: language === 'en' ? 'Empty' : 'English'};
   }
 
-  /** `English (EN)`, or the code alone where the configured name already is the code. */
+  /** The configured name, or the code where `languages` does not name the language. */
   private displayName(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();
   }
 
   /** Children take their language list from the group, so a change to `languages` has to reach them. */
@@ -206,7 +210,7 @@ export default class ZnTranslationGroup extends ZnPanel {
   render() {
     const hasActionsSlot = this._slotController.test('actions');
     const hasFooterSlot = this._slotController.test('footer');
-    const headerCaption = this.caption || this.label;
+    const caption = this.caption || this.label;
 
     // A child's value can carry a language `languages` does not list — server-rendered content outliving a config
     // change. Offer those too, or the translation is stranded in the value with no way to reach it.
@@ -216,7 +220,6 @@ export default class ZnTranslationGroup extends ZnPanel {
       .forEach(code => extra.add(code)));
     const languageCodes = [...Object.keys(this.languages), ...extra];
     const hasMultipleLanguages = languageCodes.length > 1;
-    const hasHeader = Boolean(headerCaption) || hasMultipleLanguages;
 
     // English is the source every other language falls back to, so it is not itself one of the translations counted.
     const targets = languageCodes.filter(code => code !== 'en');
@@ -229,49 +232,50 @@ export default class ZnTranslationGroup extends ZnPanel {
     };
 
     return html`
-      <div class="${classMap({
+      <div part="base" class="${classMap({
         panel: true,
         'panel--flush': this.flush || this.inline,
         'panel--transparent': this.transparent || this.inline,
         'translation-group--inline': this.inline,
-        'panel--has-header': hasHeader,
         'panel--has-actions': hasActionsSlot,
         'panel--has-footer': hasFooterSlot,
       })}">
 
         <div class="panel__inner">
-          ${hasHeader ? html`
-            <zn-header class="panel__header"
-                       caption="${ifDefined(headerCaption || undefined)}"
-                       transparent>
-              ${hasMultipleLanguages ? html`
-                <div slot="actions" class="translation-group__language-field" part="language-field">
-                  <zn-select
-                    label="${this.languageLabel}"
-                    class="translation-group__language-select"
-                    part="language-select"
-                    hoist
-                    .value="${this._activeLanguage}"
-                    @zn-change="${this.handleLanguageSelect}"
-                    @zn-input="${this.handleLanguageInput}">
-                    <zn-chip slot="suffix" type="${summary.type}">${summary.label}</zn-chip>
-                    ${languageCodes.map(code => {
-                      const optionState = this.languageState(code);
-                      return html`
-                        <zn-option value="${code}">
-                          ${this.displayName(code)}
-                          <zn-chip slot="suffix" type="${optionState.type}">${optionState.label}</zn-chip>
-                        </zn-option>`;
-                    })}
-                  </zn-select>
-                </div>` : nothing}
-            </zn-header>` : null}
-
           <div class="panel__content">
             <div class="panel__body">
-              <slot
-                @slotchange="${this.handleSlotChange}"
-                @zn-change="${this.handleChildChange}"></slot>
+              <zn-form-group
+                part="form-group"
+                label="${caption}"
+                help-text="${this.helpText}">
+
+                ${hasMultipleLanguages ? html`
+                  <div slot="chip" class="translation-group__language-field" part="language-field">
+                    <zn-select
+                      label="${this.languageLabel}"
+                      class="translation-group__language-select"
+                      part="language-select"
+                      hoist
+                      search
+                      .value="${this._activeLanguage}"
+                      @zn-change="${this.handleLanguageSelect}"
+                      @zn-input="${this.handleLanguageInput}">
+                      <zn-chip slot="suffix" type="${summary.type}">${summary.label}</zn-chip>
+                      ${languageCodes.map(code => {
+                        const optionState = this.languageState(code);
+                        return html`
+                          <zn-option value="${code}">
+                            ${this.displayName(code)}
+                            <zn-chip slot="suffix" type="${optionState.type}">${optionState.label}</zn-chip>
+                          </zn-option>`;
+                      })}
+                    </zn-select>
+                  </div>` : nothing}
+
+                <slot
+                  @slotchange="${this.handleSlotChange}"
+                  @zn-change="${this.handleChildChange}"></slot>
+              </zn-form-group>
 
               ${hasActionsSlot ? html`
                 <div class="translation-group__actions" part="actions">

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}"