@kubex/zinc 1.1.115 → 1.1.116

package/docs/pages/components/translations.md

@@ -1,11 +1,17 @@
 ---
 meta:
   title: Translations
-  description: A component for managing multi-language text input with a tabbed interface.
+  description: A component for managing multi-language text input behind a language select.
 layout: component
 ---
 
-The Translations component provides a user-friendly interface for managing multi-language text input. It features a tabbed navigation bar for switching between languages and supports inline editing of translations.
+The Translations component provides a user-friendly interface for managing multi-language text input. A select above
+the field chooses the language being edited, and each language it offers carries a chip saying whether it has a
+translation of its own or falls back to English; closed, it carries how many languages are done as a `1/5` chip.
+The field itself is a plain input, or a textarea with `input-type="textarea"`.
+
+Several fields that should share one language picker belong in a
+[`zn-translation-group`](/components/translation-group) instead.
 
 ```html:preview
 <zn-translations
@@ -48,58 +54,25 @@ Use the `label` slot for rich HTML content in the label.
 </zn-translations>
 ```
 
-### Custom Languages
+### Setting Values
 
-Provide a custom list of available languages via the `languages` property. Languages are displayed as tabs with their full names.
+`values` takes an object keyed by language code. `value` is the same thing as a JSON string, for setting it from
+markup or from a server-rendered template — set one or the other, not both.
 
 ```html:preview
 <zn-translations
-  label="Multi-Language Content"
-  languages='{"en":"English","fr":"French","de":"German","es":"Spanish","it":"Italian","pt":"Portuguese"}'
-></zn-translations>
-```
-
-### Pre-filled Values
-
-Set initial translations using the `values` property.
-
-```html:preview
-<zn-translations
-  label="Welcome Message"
+  label="Set with values"
   languages='{"en":"English","fr":"French","es":"Spanish"}'
   values='{"en":"Hello World","fr":"Bonjour le monde","es":"Hola Mundo"}'
 ></zn-translations>
-```
-
-### JSON Value Attribute
-
-Alternatively, use the `value` attribute with a JSON string.
-
-```html:preview
+<br />
 <zn-translations
-  label="Description"
+  label="Set with value"
   languages='{"en":"English","fr":"French"}'
   value='{"en":"This is a product description","fr":"Ceci est une description de produit"}'
 ></zn-translations>
 ```
 
-### Required Field
-
-Mark the translations as required for form validation.
-
-```html:preview
-<form>
-  <zn-translations
-    name="description"
-    label="Product Description"
-    required
-    languages='{"en":"English","fr":"French"}'
-  ></zn-translations>
-  <br />
-  <zn-button type="submit" color="success">Submit</zn-button>
-</form>
-```
-
 ### Disabled State
 
 Disable editing of translations.
@@ -125,24 +98,38 @@ Remove padding for a more compact appearance.
 ></zn-translations>
 ```
 
-### With Custom Action Button
+### Textarea
 
-Use the `expand` slot to add custom buttons or actions.
+Use `input-type="textarea"` for longer copy, and `textarea-rows` to set its height.
 
 ```html:preview
 <zn-translations
-  label="Description"
-  languages='{"en":"English","fr":"French","de":"German"}'>
-  <zn-button slot="expand" color="transparent" icon="translate">
-    Auto-Translate
-  </zn-button>
-</zn-translations>
+  label="Confirmation Message"
+  input-type="textarea"
+  textarea-rows="3"
+  languages='{"en":"English","de":"German"}'
+  values='{"en":"Thanks — your order is on its way.","de":"Danke — Ihre Bestellung ist unterwegs."}'
+></zn-translations>
+```
+
+### Inline Editing
+
+Add `inline-edit` to read the translation as text until it is clicked, through
+[`zn-inline-edit`](/components/inline-edit), rather than showing an input outright.
+
+```html:preview
+<zn-translations
+  inline-edit
+  label="Welcome Message"
+  languages='{"en":"English","fr":"French"}'
+  values='{"en":"Hello World","fr":"Bonjour le monde"}'
+></zn-translations>
 ```
 
 ### Many Languages
 
-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.
+Each language becomes an option labelled `Name (CODE)` — or the code alone where the configured name already is the
+code. The select takes any number of them, and its listbox scrolls once the list is longer than the space below it.
 
 ```html:preview
 <zn-translations
@@ -152,19 +139,17 @@ single line. Resizing the container re-measures and expands the buttons back out
 ></zn-translations>
 ```
 
-### Constrained Width
+### Blank Languages Fall Back to English
 
-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.
+A language you have not translated yet is marked `English` in the select rather than hidden, and its field shows the
+English text as a placeholder. Leave it blank and the English text is what gets used.
 
 ```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>
+<zn-translations
+  label="Product Name"
+  languages='{"en":"English","fr":"French","de":"German","pl":"Polish"}'
+  values='{"en":"Premium Wireless Headphones","de":"Premium kabellose Kopfhörer"}'
+></zn-translations>
 ```
 
 ### RTL Language Support
@@ -209,7 +194,8 @@ The component emits `zn-change` events when translation values change.
 
 ### Form Integration
 
-Use with standard HTML forms for submission.
+The component submits its translations as a JSON object under `name`. `required` marks the label, though validity is
+not enforced per language.
 
 ```html:preview
 <form class="translations-form">
@@ -275,54 +261,6 @@ Access and modify translation values via JavaScript.
 </script>
 ```
 
-### Real-World Use Case: Content Management
-
-A complete example showing product content management with translations.
-
-```html:preview
-<div style="max-width: 800px;">
-  <zn-panel caption="Product Details" icon="inventory_2">
-    <div style="display: flex; flex-direction: column; gap: 1rem;">
-      <zn-input
-        label="Product SKU"
-        value="PROD-12345"
-        readonly
-      ></zn-input>
-
-      <zn-translations
-        name="name"
-        label="Product Name"
-        required
-        languages='{"en":"English","fr":"French","de":"German","es":"Spanish"}'
-        values='{"en":"Premium Wireless Headphones","fr":"Écouteurs sans fil premium","de":"Premium kabellose Kopfhörer","es":"Auriculares inalámbricos premium"}'
-      ></zn-translations>
-
-      <zn-translations
-        name="description"
-        label="Product Description"
-        languages='{"en":"English","fr":"French","de":"German","es":"Spanish"}'
-        values='{"en":"High-quality wireless headphones with active noise cancellation","fr":"Écouteurs sans fil de haute qualité avec suppression active du bruit","de":"Hochwertige kabellose Kopfhörer mit aktiver Geräuschunterdrückung","es":"Auriculares inalámbricos de alta calidad con cancelación activa de ruido"}'
-      >
-        <zn-button slot="expand" color="transparent" icon="smart_toy">
-          AI Translate
-        </zn-button>
-      </zn-translations>
-
-      <zn-input
-        label="Price"
-        type="currency"
-        value="299.99"
-      ></zn-input>
-    </div>
-
-    <div slot="footer" style="display: flex; gap: 0.5rem; justify-content: flex-end;">
-      <zn-button color="secondary">Cancel</zn-button>
-      <zn-button color="success">Save Product</zn-button>
-    </div>
-  </zn-panel>
-</div>
-```
-
 ### Help Text
 
 Use the `help-text` attribute to describe how the field should be filled in. It sits below the field and applies to
@@ -382,6 +320,10 @@ way `Enter` otherwise would.
 | `flush`     | `boolean`                   | `false`         | Removes padding for compact layout                                   |
 | `languages` | `Record<string, string>`    | `{en: "EN"}`    | Object mapping language codes to display names                       |
 | `values`    | `Record<string, string>`    | `{}`            | Object mapping language codes to translation text                    |
+| `grouped`   | `boolean`                   | `false`         | Hides the language select; a parent `zn-translation-group` drives it |
+| `input-type`    | `'text' \| 'number' \| 'textarea'` | `'text'` | The control each translation is edited through                |
+| `textarea-rows` | `number`                | —               | Rows of the textarea, when `input-type` is `textarea`                |
+| `inline-edit`   | `boolean`               | `false`         | Edits through `zn-inline-edit` instead of a plain input or textarea   |
 | `slash-items`   | `SlashMenuItem[]`       | `[]`            | Quick insertions offered by the slash menu                           |
 | `slash-preset`  | `string`                | `''`            | Registered item sets to offer, comma separated                       |
 | `slash-trigger` | `string`                | `'/'`           | The characters that open the slash menu                              |
@@ -399,7 +341,6 @@ way `Enter` otherwise would.
 | Slot        | Description                                                      |
 |-------------|------------------------------------------------------------------|
 | `label`     | Alternative to the `label` attribute for rich HTML content       |
-| `expand`    | Action button displayed in the navbar (e.g., translate button)   |
 | `help-text` | Alternative to the `help-text` attribute for rich HTML content   |
 
 ## Methods
@@ -413,10 +354,19 @@ way `Enter` otherwise would.
 
 ## CSS Parts
 
-The component uses `zn-navbar` and `zn-inline-edit` internally, which expose their own CSS parts for advanced styling.
+| Part                 | Description                                       |
+|----------------------|---------------------------------------------------|
+| `form-control`       | The component's base wrapper                      |
+| `form-control-label` | The label's wrapper                               |
+| `form-control-input` | The wrapper around the field being edited         |
+| `language-select`    | The select that chooses the language being edited |
+
+The component uses `zn-select` for the language and `zn-input`, `zn-textarea` or `zn-inline-edit` for the field, each
+of which exposes its own CSS parts for advanced styling.
 
 ## Accessibility
 
 - The component automatically detects RTL languages (Arabic, Hebrew) and applies proper text direction
-- Keyboard navigation is supported within the inline edit fields
-- Form integration ensures proper submission behavior with the Enter key
+- The language select is a standard combobox: it opens on `Enter` or `Space` and moves through the languages with the
+  arrow keys
+- `Enter` submits the form from a single-line field, and inserts a newline in a textarea

package/package.json

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

package/src/components/dialog/dialog.component.ts

@@ -235,7 +235,8 @@ export default class ZnDialog extends ZincElement {
               <h2 part="title" class="dialog__title" id="title">
                 <slot name="header-icon"></slot>
                 <slot name="announcement-intro"></slot>
-                <slot name="label"> ${this.label && this.label.length > 0 ? this.label : String.fromCharCode(65279)}
+                <slot name="label" class="dialog__label">
+                  ${this.label && this.label.length > 0 ? this.label : String.fromCharCode(65279)}
                 </slot>
               </h2>
               <div part="header-actions" class="dialog__header-actions">

package/src/components/dialog/dialog.scss

@@ -55,6 +55,8 @@
     align-items: center;
     font: inherit;
     margin: 0;
+    width: 100%;
+    overflow: hidden;
   }
 
   &__header-actions {
@@ -75,6 +77,12 @@
     }
   }
 
+  &__label {
+    overflow: hidden;
+    word-break: break-word;
+    display: inline-block;
+  }
+
   &__body {
     flex: 1 1 auto;
     min-height: 0;

package/src/components/header/header.component.ts

@@ -22,6 +22,7 @@ import styles from './header.scss';
  * @slot example - An example slot.
  *
  * @csspart base - The component's base wrapper.
+ * @csspart header-right - The container that wraps the actions slot.
  *
  * @cssproperty --example - An example CSS custom property.
  */
@@ -159,7 +160,7 @@ export default class ZnHeader extends ZincElement {
                 </span>
             </div>
 
-            <div class="header__right">
+            <div part="header-right" class="header__right">
               <slot name="actions"></slot>
             </div>
           </div>

package/src/components/select/select.component.ts

@@ -41,6 +41,8 @@ import styles from './select.scss';
  * @slot label-tooltip - Used to add text that is displayed in a tooltip next to the label. Alternatively, you can use the `label-tooltip` attribute.
  * @slot context-note - Used to add contextual text that is displayed above the select, on the right. Alternatively, you can use the `context-note` attribute.
  * @slot prefix - Used to prepend a presentational icon or similar element to the combobox.
+ * @slot suffix - Used to append a presentational element — a chip marking the selected option's state, for
+ *   instance — to the combobox, between the value and the clear and expand icons.
  * @slot clear-icon - An icon to use in lieu of the default clear icon.
  * @slot expand-icon - The icon to show when the control is expanded and collapsed. Rotates on open and close.
  * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
@@ -66,6 +68,7 @@ import styles from './select.scss';
  * @csspart form-control-help-text - The help text's wrapper.
  * @csspart combobox - The container the wraps the prefix, combobox, clear icon, and expand button.
  * @csspart prefix - The container that wraps the prefix slot.
+ * @csspart suffix - The container that wraps the suffix slot.
  * @csspart display-input - The element that displays the selected option's label, an `<input>` element.
  * @csspart listbox - The listbox container where options are slotted.
  * @csspart tags - The container that houses option tags when `multiselect` is used.
@@ -1918,6 +1921,8 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
                 @invalid=${this.handleInvalid}
               />
 
+              <slot part="suffix" name="suffix" class="select__suffix"></slot>
+
               ${hasClearIcon
                 ? html`
                   <button

package/src/components/select/select.scss

@@ -314,6 +314,17 @@
   padding-inline-start: 0;
 }
 
+/* Suffix */
+.select__suffix {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+}
+
+.select__suffix::slotted(*) {
+  margin-inline-start: var(--zn-spacing-x-small);
+}
+
 /* Clear button */
 .select__clear {
   display: inline-flex;