@kubex/zinc 1.0.105 → 1.0.106

package/docs/pages/components/translation-group.md

@@ -89,6 +89,31 @@ The group scales well with multiple translation inputs under a single toggle.
 </zn-translation-group>
 ```
 
+### Language Overflow
+
+When there are more languages than will fit across the header, the extras collapse into a chevron dropdown beside the
+visible buttons. The dropdown sits before the `+` add-language dropdown and selects the same way — picking a language
+switches every child translation input in the group.
+
+```html:preview
+<div style="max-width: 480px;">
+  <zn-translation-group
+    label="Release Notes"
+    languages='{"en":"English","ar":"Arabic","de":"German","es":"Spanish","fr":"French","it":"Italian","ja":"Japanese","ko":"Korean","pt":"Portuguese","ru":"Russian","tr":"Turkish","zh-hans":"Simplified Chinese"}'>
+    <zn-translations
+      label="Headline"
+      name="headline"
+      values='{"en":"Now shipping","ar":"متاح الآن","de":"Jetzt verfügbar","es":"Ya disponible","fr":"Disponible dès maintenant","it":"Disponibile ora","ja":"発売開始","ko":"출시됨","pt":"Disponível agora","ru":"Уже в продаже","tr":"Şimdi mevcut","zh-hans":"现已发布"}'
+    ></zn-translations>
+    <zn-translations
+      label="Summary"
+      name="summary"
+      values='{"en":"Tap through the release highlights.","ar":"تصفح أبرز ميزات الإصدار.","de":"Highlights der Version ansehen.","es":"Consulta lo más destacado.","fr":"Découvrez les nouveautés.","it":"Scopri le novità.","ja":"リリースのハイライトをご覧ください。","ko":"업데이트 주요 내용 보기.","pt":"Veja os destaques.","ru":"Ознакомьтесь с обновлениями.","tr":"Sürüm önemli noktaları.","zh-hans":"浏览版本亮点。"}'
+    ></zn-translations>
+  </zn-translation-group>
+</div>
+```
+
 ### Flush Layout
 
 Remove body padding for a more compact appearance using the `flush` attribute.

package/docs/pages/components/translations.md

@@ -141,7 +141,8 @@ Use the `expand` slot to add custom buttons or actions.
 
 ### Many Languages
 
-The component handles many languages gracefully with scrollable tabs.
+When the language buttons don't all fit on one line, the overflow collapses into a chevron dropdown so the row stays a
+single line. Resizing the container re-measures and expands the buttons back out when space allows.
 
 ```html:preview
 <zn-translations
@@ -151,6 +152,21 @@ The component handles many languages gracefully with scrollable tabs.
 ></zn-translations>
 ```
 
+### Constrained Width
+
+Placing the component in a narrow container forces the chevron overflow to kick in. Selecting a language from the
+dropdown switches the active language just like clicking a visible button.
+
+```html:preview
+<div style="max-width: 320px;">
+  <zn-translations
+    label="Narrow Container"
+    languages='{"en":"English","fr":"French","de":"German","es":"Spanish","it":"Italian","pt":"Portuguese","ja":"Japanese","ko":"Korean","zh-hans":"Simplified Chinese"}'
+    values='{"en":"Hello","fr":"Bonjour","de":"Hallo","es":"Hola","it":"Ciao","pt":"Olá","ja":"こんにちは","ko":"안녕하세요","zh-hans":"你好"}'
+  ></zn-translations>
+</div>
+```
+
 ### RTL Language Support
 
 The component automatically detects and applies right-to-left text direction for Arabic and Hebrew languages.

package/package.json

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

package/src/components/inline-edit/inline-edit.component.ts

@@ -79,6 +79,7 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
   @property() step: number | 'any';
 
   @property({ attribute: "input-type" }) inputType: 'select' | 'text' | 'data-select' | 'number' | 'textarea' = 'text';
+  @property({ attribute: "textarea-rows", type: Number }) textareaRows: 1;
 
   @property({ type: Object }) options: { [key: string]: string } = {};
 
@@ -387,7 +388,7 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
         name="${this.name}"
         size="${this.size}"
         resize="auto"
-        rows="1"
+        rows="${this.textareaRows}"
         .value="${this.value}"
         placeholder="${this.placeholder}"
         pattern=${ifDefined(this.pattern)}

package/src/components/inline-edit/inline-edit.scss

@@ -14,7 +14,7 @@
   gap: 10px;
 
   &:not(.ai--editing) {
-    .ai__input::part(base), .ai__input::part(combobox) {
+    .ai__input::part(base), .ai__input::part(combobox), .ai__input::part(textarea) {
       background-color: transparent;
       border-color: transparent;
       box-shadow: none;
@@ -30,7 +30,7 @@
       color: rgb(var(--zn-text));
     }
 
-    .ai__input::part(input), .ai__input::part(combobox) {
+    .ai__input::part(input), .ai__input::part(combobox), .ai__input::part(textarea) {
       padding: 0;
       color: rgb(var(--zn-text));
       text-decoration: underline;
@@ -39,6 +39,12 @@
       text-underline-offset: 3px;
     }
 
+    .ai__input::part(textarea) {
+      padding-top: 8px;
+      box-shadow: none;
+      text-decoration:none;
+    }
+
     .ai__input::part(expand-icon) {
       display: none;
     }
@@ -150,7 +156,7 @@
   }
 
   &--disabled:not(.ai--editing) {
-    .ai__input::part(input), .ai__input::part(combobox) {
+    .ai__input::part(input), .ai__input::part(combobox), .ai__input::part(textarea) {
       text-decoration: none;
       caret-color: transparent;
       border-radius: 0;
@@ -170,12 +176,4 @@ zn-textarea::part(textarea) {
   resize: none;
 }
 
-.ai:not(.ai--editing) {
-  zn-textarea::part(textarea) {
-    box-shadow: none;
-    padding-left: 0;
-    padding-right: 0;
-    min-height: 35px;
-  }
-}
 

package/src/components/textarea/textarea.component.ts

@@ -78,7 +78,7 @@ export default class ZnTextarea extends ZincElement implements ZincFormControl {
   @property() placeholder = '';
 
   /** The number of rows to display by default. */
-  @property({type: Number}) rows = 4;
+  @property({attribute: 'rows',type: Number}) rows = 4;
 
   /** Controls how the textarea can be resized. */
   @property() resize: 'none' | 'vertical' | 'auto' = 'vertical';

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

@@ -54,9 +54,39 @@ export default class ZnTranslationGroup extends ZnPanel {
   /** Tracks all language codes that have been activated across children. */
   @state() private _activatedLanguages: string[] = ['en'];
 
+  @state() private _overflowIndex = -1;
+
+  private _resizeObserver?: ResizeObserver;
+  private _lastObservedWidth = 0;
+  private _measureRafId = 0;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._resizeObserver = new ResizeObserver(entries => {
+      const width = entries[0]?.contentRect.width ?? 0;
+      if (Math.abs(width - this._lastObservedWidth) < 1) return;
+      this._lastObservedWidth = width;
+      if (this._overflowIndex !== -1) {
+        this._overflowIndex = -1;
+      } else {
+        this._scheduleLangOverflow();
+      }
+    });
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._resizeObserver?.disconnect();
+    if (this._measureRafId) {
+      cancelAnimationFrame(this._measureRafId);
+      this._measureRafId = 0;
+    }
+  }
+
   protected firstUpdated(_changedProperties: PropertyValues) {
     super.firstUpdated(_changedProperties);
     this.syncChildren();
+    this._resizeObserver?.observe(this);
   }
 
   protected updated(changedProperties: PropertyValues) {
@@ -64,6 +94,52 @@ export default class ZnTranslationGroup extends ZnPanel {
     if (changedProperties.has('languages')) {
       this.syncChildLanguages();
     }
+    this._scheduleLangOverflow();
+  }
+
+  private _scheduleLangOverflow() {
+    if (this._measureRafId) return;
+    this._measureRafId = requestAnimationFrame(() => {
+      this._measureRafId = 0;
+      this._computeLangOverflow();
+    });
+  }
+
+  private _computeLangOverflow() {
+    const group = this.shadowRoot?.querySelector<HTMLElement>('.translation-group__languages zn-button-group');
+    if (!group) return;
+
+    const buttons = Array.from(group.querySelectorAll<HTMLElement>('zn-button[data-lang-btn]'));
+    if (buttons.length < 2) {
+      if (this._overflowIndex !== -1) this._overflowIndex = -1;
+      return;
+    }
+
+    const firstTop = buttons[0].getBoundingClientRect().top;
+    let wrapAt = -1;
+    for (let i = 1; i < buttons.length; i++) {
+      if (buttons[i].getBoundingClientRect().top > firstTop + 1) {
+        wrapAt = i;
+        break;
+      }
+    }
+
+    if (wrapAt === -1) {
+      const trailing = group.querySelector<HTMLElement>('[data-lang-overflow], [data-lang-add]');
+      if (trailing && trailing.getBoundingClientRect().top > firstTop + 1) {
+        wrapAt = buttons.length;
+      }
+    }
+
+    if (wrapAt === -1) return;
+
+    const newIndex = this._overflowIndex === -1
+      ? wrapAt
+      : Math.max(1, Math.min(wrapAt, this._overflowIndex - 1));
+
+    if (newIndex !== this._overflowIndex) {
+      this._overflowIndex = newIndex;
+    }
   }
 
   private getAllTranslations(): ZnTranslations[] {
@@ -124,6 +200,15 @@ export default class ZnTranslationGroup extends ZnPanel {
     }
   };
 
+  private handleOverflowSelect = (e: ZnMenuSelectEvent) => {
+    e.stopPropagation();
+    const element = e.detail.element as HTMLElement;
+    const languageCode = element.getAttribute('data-path');
+    if (languageCode) {
+      this.switchLanguage(languageCode);
+    }
+  };
+
   render() {
     const hasActionSlot = this._slotController.test('actions');
     const hasFooterSlot = this._slotController.test('footer');
@@ -142,6 +227,16 @@ export default class ZnTranslationGroup extends ZnPanel {
       visibleTabs.unshift('en');
     }
 
+    const overflowCutoff = this._overflowIndex === -1 ? visibleTabs.length : this._overflowIndex;
+    const visibleLangTabs = visibleTabs.slice(0, overflowCutoff);
+    const overflowLangTabs = visibleTabs.slice(overflowCutoff);
+    const overflowActions = overflowLangTabs.map(code => ({
+      title: code.toUpperCase(),
+      type: 'dropdown',
+      path: code,
+      icon: code === this._activeLanguage ? 'check' : ''
+    }));
+
     const hasMultipleLanguages = Object.keys(this.languages).length > 1;
     const hasHeader = headerCaption || hasMultipleLanguages || hasActionSlot;
 
@@ -163,8 +258,9 @@ export default class ZnTranslationGroup extends ZnPanel {
               ${hasMultipleLanguages ? html`
                 <div slot="actions" class="translation-group__languages">
                   <zn-button-group>
-                    ${visibleTabs.map(code => html`
+                    ${visibleLangTabs.map(code => html`
                       <zn-button
+                        data-lang-btn
                         size="x-small"
                         color="default"
                         ?outline="${code !== this._activeLanguage}"
@@ -172,8 +268,23 @@ export default class ZnTranslationGroup extends ZnPanel {
                       >${code.toUpperCase()}
                       </zn-button>
                     `)}
+                    ${overflowActions.length > 0 ? html`
+                      <zn-dropdown placement="bottom-end" data-lang-overflow>
+                        <zn-button
+                          slot="trigger"
+                          size="x-small"
+                          color="default"
+                          icon="keyboard_arrow_down"
+                          ?outline="${!overflowLangTabs.includes(this._activeLanguage)}"
+                        ></zn-button>
+                        <zn-menu
+                          .actions=${overflowActions}
+                          @zn-menu-select="${this.handleOverflowSelect}"
+                        ></zn-menu>
+                      </zn-dropdown>
+                    ` : nothing}
                     ${availableLanguages.length > 0 ? html`
-                      <zn-dropdown placement="bottom-end">
+                      <zn-dropdown placement="bottom-end" data-lang-add>
                         <zn-button
                           slot="trigger"
                           size="x-small"

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

@@ -2,6 +2,7 @@ import {classMap} from 'lit/directives/class-map.js';
 import {FormControlController, validValidityState} from '../../internal/form';
 import {HasSlotController} from '../../internal/slot';
 import {html, nothing, unsafeCSS} from 'lit';
+import {ifDefined} from 'lit/directives/if-defined.js';
 import {keyed} from 'lit/directives/keyed.js';
 import {live} from 'lit/directives/live.js';
 import {property, state} from 'lit/decorators.js';
@@ -39,6 +40,7 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
   @property({type: Boolean, reflect: true}) required = false;
   @property({type: Boolean, reflect: true}) flush = false;
   @property({attribute: "input-type"}) inputType: 'select' | 'text' | 'number' | 'textarea' = 'text';
+  @property({attribute: "textarea-rows", type: Number}) textareaRows: number | undefined;
 
   /** When true, hides the individual language navbar and defers language control to a parent zn-translation-group. */
   @property({type: Boolean, reflect: true}) grouped = false;
@@ -49,6 +51,11 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
   @property({type: Object}) values: Record<string, string> = {};
 
   @state() private _activeLanguage = 'en';
+  @state() private _overflowIndex = -1;
+
+  private _resizeObserver?: ResizeObserver;
+  private _lastObservedWidth = 0;
+  private _measureRafId = 0;
 
   get validity(): ValidityState {
     return validValidityState;
@@ -99,8 +106,82 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
     return Object.keys(this.values);
   }
 
+  connectedCallback() {
+    super.connectedCallback();
+    this._resizeObserver = new ResizeObserver(entries => {
+      const width = entries[0]?.contentRect.width ?? 0;
+      if (Math.abs(width - this._lastObservedWidth) < 1) return;
+      this._lastObservedWidth = width;
+      if (this._overflowIndex !== -1) {
+        this._overflowIndex = -1;
+      } else {
+        this._scheduleLangOverflow();
+      }
+    });
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._resizeObserver?.disconnect();
+    if (this._measureRafId) {
+      cancelAnimationFrame(this._measureRafId);
+      this._measureRafId = 0;
+    }
+  }
+
   protected firstUpdated() {
     this.formControlController.updateValidity();
+    this._resizeObserver?.observe(this);
+  }
+
+  protected updated(changedProperties: PropertyValues) {
+    super.updated(changedProperties);
+    this._scheduleLangOverflow();
+  }
+
+  private _scheduleLangOverflow() {
+    if (this._measureRafId) return;
+    this._measureRafId = requestAnimationFrame(() => {
+      this._measureRafId = 0;
+      this._computeLangOverflow();
+    });
+  }
+
+  private _computeLangOverflow() {
+    const group = this.shadowRoot?.querySelector<HTMLElement>('.translations__language-group');
+    if (!group) return;
+
+    const buttons = Array.from(group.querySelectorAll<HTMLElement>('zn-button[data-lang-btn]'));
+    if (buttons.length < 2) {
+      if (this._overflowIndex !== -1) this._overflowIndex = -1;
+      return;
+    }
+
+    const firstTop = buttons[0].getBoundingClientRect().top;
+    let wrapAt = -1;
+    for (let i = 1; i < buttons.length; i++) {
+      if (buttons[i].getBoundingClientRect().top > firstTop + 1) {
+        wrapAt = i;
+        break;
+      }
+    }
+
+    if (wrapAt === -1) {
+      const trailing = group.querySelector<HTMLElement>('[data-lang-overflow], [data-lang-add]');
+      if (trailing && trailing.getBoundingClientRect().top > firstTop + 1) {
+        wrapAt = buttons.length;
+      }
+    }
+
+    if (wrapAt === -1) return;
+
+    const newIndex = this._overflowIndex === -1
+      ? wrapAt
+      : Math.max(1, Math.min(wrapAt, this._overflowIndex - 1));
+
+    if (newIndex !== this._overflowIndex) {
+      this._overflowIndex = newIndex;
+    }
   }
 
   willUpdate(changedProperties: PropertyValues) {
@@ -164,6 +245,15 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
     }
   };
 
+  private handleOverflowSelect = (e: ZnMenuSelectEvent) => {
+    e.stopPropagation();
+    const element = e.detail.element as HTMLElement;
+    const languageCode = element.getAttribute('data-path');
+    if (languageCode) {
+      this.switchLanguage(languageCode);
+    }
+  };
+
   private switchLanguage = (lang: string) => {
     this._activeLanguage = lang;
     this.requestUpdate();
@@ -223,6 +313,16 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
       visibleTabs.unshift('en');
     }
 
+    const overflowCutoff = this._overflowIndex === -1 ? visibleTabs.length : this._overflowIndex;
+    const visibleLangTabs = visibleTabs.slice(0, overflowCutoff);
+    const overflowLangTabs = visibleTabs.slice(overflowCutoff);
+    const overflowActions = overflowLangTabs.map(code => ({
+      title: code.toUpperCase(),
+      type: 'dropdown',
+      path: code,
+      icon: code === this._activeLanguage ? 'check' : ''
+    }));
+
     const currentTranslation = this.values[this._activeLanguage] ?? '';
     const isRTL = this.isRTLLanguage(this._activeLanguage);
 
@@ -252,9 +352,10 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
             <div class="translations__actions">
               ${hasExpandSlot ? html`<slot name="expand"></slot>` : nothing}
               ${hasMultipleLanguages ? html`
-                <zn-button-group>
-                  ${visibleTabs.map(code => html`
+                <zn-button-group class="translations__language-group">
+                  ${visibleLangTabs.map(code => html`
                     <zn-button
+                      data-lang-btn
                       size="x-small"
                       color="default"
                       ?outline="${code !== this._activeLanguage}"
@@ -262,8 +363,23 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
                     >${code.toUpperCase()}
                     </zn-button>
                   `)}
+                  ${overflowActions.length > 0 ? html`
+                    <zn-dropdown placement="bottom-end" data-lang-overflow>
+                      <zn-button
+                        slot="trigger"
+                        size="x-small"
+                        color="default"
+                        icon="keyboard_arrow_down"
+                        ?outline="${!overflowLangTabs.includes(this._activeLanguage)}"
+                      ></zn-button>
+                      <zn-menu
+                        .actions=${overflowActions}
+                        @zn-menu-select="${this.handleOverflowSelect}"
+                      ></zn-menu>
+                    </zn-dropdown>
+                  ` : nothing}
                   ${availableLanguages.length > 0 ? html`
-                    <zn-dropdown placement="bottom-end">
+                    <zn-dropdown placement="bottom-end" data-lang-add>
                       <zn-button
                         slot="trigger"
                         size="x-small"
@@ -287,6 +403,7 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
           ${keyed(this._activeLanguage, html`
             <zn-inline-edit
               input-type=${this.inputType}
+              textarea-rows=${ifDefined(this.textareaRows)}
               .value=${live(currentTranslation)}
               name="${this.name}"
               placeholder="Enter translation..."