@kubex/zinc 1.0.104 → 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.104",
+  "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/markdown-editor/markdown-editor.component.ts

@@ -3,18 +3,19 @@ import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
 import {defaultValue} from "../../internal/default-value";
 import {FormControlController} from "../../internal/form";
 import {HasSlotController} from "../../internal/slot";
+import {ifDefined} from "lit/directives/if-defined.js";
 import {marked} from "marked";
-import {property, query, state} from 'lit/decorators.js';
+import {property, query} from 'lit/decorators.js';
 import {watch} from "../../internal/watch";
-import ZincElement from '../../internal/zinc-element';
 import type {ZincFormControl} from '../../internal/zinc-element';
 import type ZnTextarea from "../textarea";
 
 import styles from './markdown-editor.scss';
+import ZnPanel from "../panel/panel.component";
 
 type ViewMode = 'editor' | 'split' | 'preview';
 
-const VIEW_MODES: {mode: ViewMode; icon: string; label: string}[] = [
+const VIEW_MODES: { mode: ViewMode; icon: string; label: string }[] = [
   {mode: 'editor', icon: 'edit_note', label: 'Editor'},
   {mode: 'split', icon: 'vertical_split', label: 'Split'},
   {mode: 'preview', icon: 'visibility', label: 'Preview'},
@@ -42,13 +43,13 @@ const VIEW_MODES: {mode: ViewMode; icon: string; label: string}[] = [
  * @csspart editor - The textarea wrapper.
  * @csspart preview - The rendered markdown preview.
  */
-export default class ZnMarkdownEditor extends ZincElement implements ZincFormControl {
-  static styles: CSSResultGroup = unsafeCSS(styles);
+export default class ZnMarkdownEditor extends ZnPanel implements ZincFormControl {
+  static styles: CSSResultGroup = [ZnPanel.styles as CSSResultGroup, unsafeCSS(styles)];
 
   private readonly formControlController = new FormControlController(this, {
     assumeInteractionOn: ['zn-input', 'zn-change'],
   });
-  private readonly hasSlotController = new HasSlotController(this, 'label', 'help-text');
+  private readonly markdownSlotController = new HasSlotController(this, 'label', 'help-text', 'actions', 'footer');
 
   private debounceTimer: ReturnType<typeof setTimeout> | null = null;
 
@@ -95,7 +96,7 @@ export default class ZnMarkdownEditor extends ZincElement implements ZincFormCon
   @property({type: Boolean, reflect: true}) disabled = false;
 
   /** Whether the editor is currently expanded to cover its containing positioned ancestor. */
-  @state() expanded = false;
+  @property({type: Boolean, reflect: true}) expanded = false;
 
   get validity(): ValidityState {
     return this.textarea?.validity;
@@ -151,15 +152,18 @@ export default class ZnMarkdownEditor extends ZincElement implements ZincFormCon
 
     const stored = this.readStoredViewMode();
     if (stored) this.viewMode = stored;
+
+    this.addEventListener('toggle', this.handleExpandToggle as EventListener);
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
     if (this.debounceTimer) clearTimeout(this.debounceTimer);
+    this.removeEventListener('toggle', this.handleExpandToggle as EventListener);
   }
 
   protected firstUpdated(_changedProperties: PropertyValues) {
-    void _changedProperties;
+    super.firstUpdated(_changedProperties);
     this.formControlController.updateValidity();
     if (this.viewMode !== 'editor') this.renderPreview();
   }
@@ -240,70 +244,109 @@ export default class ZnMarkdownEditor extends ZincElement implements ZincFormCon
   }
 
   render() {
-    const hasLabelSlot = this.hasSlotController.test('label');
-    const hasHelpSlot = this.hasSlotController.test('help-text');
+    const hasLabelSlot = this.markdownSlotController.test('label');
+    const hasHelpSlot = this.markdownSlotController.test('help-text');
+    const hasActionSlot = this.markdownSlotController.test('actions');
+    const hasFooterSlot = this.markdownSlotController.test('footer');
     const hasLabel = !!this.label || hasLabelSlot;
     const hasHelpText = !!this.helpText || hasHelpSlot;
+    const hasHeader = !!this.caption || hasActionSlot;
     const showEditor = this.viewMode === 'editor' || this.viewMode === 'split';
     const showPreview = this.viewMode === 'preview' || this.viewMode === 'split';
 
     return html`
-      <div part="base"
-           class=${classMap({
-             'markdown-editor': true,
-             'markdown-editor--expanded': this.expanded,
-             'markdown-editor--split': this.viewMode === 'split',
-             'markdown-editor--preview-only': this.viewMode === 'preview',
-           })}>
-        ${hasLabel ? html`
-          <label class="markdown-editor__label">
-            <slot name="label">${this.label}</slot>
-          </label>` : ''}
-
-        <div part="toolbar" class="markdown-editor__toolbar">
-          <zn-button-group class="markdown-editor__view-toggle" @click=${this.handleViewToggle}>
-            ${VIEW_MODES.map(v => this.renderViewButton(v.mode, v.icon, v.label))}
-          </zn-button-group>
-          <zn-button
-            class="markdown-editor__expand-btn"
-            type="button"
-            size="medium"
-            color="secondary"
-            icon=${this.expanded ? 'close_fullscreen' : 'open_in_full'}
-            icon-size="18"
-            tooltip=${this.expanded ? 'Collapse' : 'Expand'}
-            @click=${this.handleExpandToggle}
-          ></zn-button>
-        </div>
-
-        <div class="markdown-editor__body">
-          <div part="editor"
-               class="markdown-editor__editor"
-               ?hidden=${!showEditor}>
-            <zn-textarea
-              .value=${this.value}
-              name=${this.name || ''}
-              placeholder=${this.placeholder}
-              rows=${this.rows}
-              resize="auto"
-              ?required=${this.required}
-              ?readonly=${this.readonly}
-              ?disabled=${this.disabled}
-              @zn-input=${this.handleInput}
-              @zn-change=${this.handleChange}
-            ></zn-textarea>
+      <div part="base" class=${classMap({
+        panel: true,
+        'panel--flush': this.flush || this.tabbed,
+        'panel--flush-x': this.flushX,
+        'panel--flush-y': this.flushY,
+        'panel--flush-footer': this.flushFooter,
+        'panel--tabbed': this.tabbed,
+        'panel--transparent': this.transparent,
+        'panel--has-actions': hasActionSlot,
+        'panel--has-footer': hasFooterSlot,
+        'panel--has-header': hasHeader,
+        'panel--cosmic': this.cosmic,
+        'panel--shadow': this.shadow,
+      })}>
+        <div class="panel__inner">
+          ${hasHeader ? html`
+            <zn-header class=${classMap({
+              panel__header: true,
+              'panel__header--underline': this.underlineHeader,
+            })}
+                       icon=${this.icon}
+                       caption=${this.caption}
+                       description=${ifDefined(this.description)}
+                       transparent>
+              ${hasActionSlot ? html`
+                <slot name="actions" slot="actions" class="panel__header__actions"></slot>` : null}
+            </zn-header>` : null}
+
+          <div class="panel__content">
+            <div class="panel__body">
+              <div class=${classMap({
+                'markdown-editor': true,
+                'markdown-editor--split': this.viewMode === 'split',
+                'markdown-editor--preview-only': this.viewMode === 'preview',
+                'markdown-editor--expanded': this.expanded,
+              })}>
+                ${hasLabel ? html`
+                  <label class="markdown-editor__label">
+                    <slot name="label">${this.label}</slot>
+                  </label>` : ''}
+
+                <div part="toolbar" class="markdown-editor__toolbar">
+                  <zn-button-group class="markdown-editor__view-toggle" @click=${this.handleViewToggle}>
+                    ${VIEW_MODES.map(v => this.renderViewButton(v.mode, v.icon, v.label))}
+                  </zn-button-group>
+                  <zn-button
+                    class="markdown-editor__expand-btn"
+                    type="button"
+                    size="medium"
+                    color="secondary"
+                    icon=${this.expanded ? 'close_fullscreen' : 'open_in_full'}
+                    icon-size="18"
+                    tooltip=${this.expanded ? 'Collapse' : 'Expand'}
+                    @click=${this.handleExpandToggle}
+                  ></zn-button>
+                </div>
+
+                <div class="markdown-editor__body">
+                  <div part="editor"
+                       class="markdown-editor__editor"
+                       ?hidden=${!showEditor}>
+                    <zn-textarea
+                      .value=${this.value}
+                      name=${this.name || ''}
+                      placeholder=${this.placeholder}
+                      rows=${this.rows}
+                      resize="auto"
+                      ?required=${this.required}
+                      ?readonly=${this.readonly}
+                      ?disabled=${this.disabled}
+                      @zn-input=${this.handleInput}
+                      @zn-change=${this.handleChange}
+                    ></zn-textarea>
+                  </div>
+                  <div part="preview"
+                       class="markdown-editor__preview-wrapper"
+                       ?hidden=${!showPreview}>
+                    <div class="markdown-editor__preview"></div>
+                  </div>
+                </div>
+
+                ${hasHelpText ? html`
+                  <div class="markdown-editor__help-text">
+                    <slot name="help-text">${this.helpText}</slot>
+                  </div>` : ''}
+              </div>
+            </div>
           </div>
-          <div part="preview"
-               class="markdown-editor__preview-wrapper"
-               ?hidden=${!showPreview}>
-            <div class="markdown-editor__preview"></div>
-          </div>
-        </div>
 
-        ${hasHelpText ? html`
-          <div class="markdown-editor__help-text">
-            <slot name="help-text">${this.helpText}</slot>
-          </div>` : ''}
+          ${hasFooterSlot ? html`
+            <slot name="footer" class="panel__footer"></slot>` : null}
+        </div>
       </div>
     `;
   }

package/src/components/markdown-editor/markdown-editor.scss

@@ -1,10 +1,9 @@
 @use "../../wc";
 
-:host {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  min-height: 0;
+.panel {
+  border: 1px solid rgb(var(--zn-border-color));
+  background-color: rgba(var(--zn-panel), var(--zn-panel-opacity));
+  border-radius: var(--zn-border-radius-large);
 }
 
 .markdown-editor {
@@ -16,15 +15,25 @@
   min-height: 0;
 }
 
-.markdown-editor--expanded {
-  position: fixed;
-  inset: 10px;
-  z-index: 9999;
-  background: var(--zn-panel-background-color, var(--zn-color-neutral-0, #fff));
-  border: 1px solid var(--zn-color-neutral-300);
-  border-radius: var(--zn-border-radius-medium);
-  padding: var(--zn-spacing-medium);
-  box-shadow: var(--zn-shadow-large);
+:host([expanded]) {
+  position: absolute;
+  top: 10px;
+  bottom: 10px;
+  left: var(--zn-sp-padding);
+  right: var(--zn-sp-padding);
+  z-index: var(--zn-z-index-editor-action, 1000000);
+}
+
+:host([expanded]) .panel,
+:host([expanded]) .panel__inner,
+:host([expanded]) .panel__content,
+:host([expanded]) .panel__body {
+  height: 100%;
+  max-height: 100%;
+}
+
+:host([expanded]) .markdown-editor {
+  height: 100%;
 }
 
 .markdown-editor__label {
@@ -200,13 +209,3 @@
   font-size: var(--zn-input-help-text-font-size-medium);
   color: var(--zn-input-help-text-color);
 }
-
-.markdown-editor--expanded .markdown-editor__body {
-  min-height: 0;
-  flex: 1;
-}
-
-.markdown-editor--expanded .markdown-editor__editor zn-textarea,
-.markdown-editor--expanded .markdown-editor__preview {
-  min-height: calc(100vh - 200px);
-}

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"