@kubex/zinc 1.1.115 → 1.1.117

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.117",
   "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/form-group/form-group.component.ts

@@ -1,5 +1,5 @@
 import { classMap } from "lit/directives/class-map.js";
-import { type CSSResultGroup, html, unsafeCSS } from 'lit';
+import { type CSSResultGroup, html, type PropertyValues, unsafeCSS } from 'lit';
 import { HasSlotController } from "../../internal/slot";
 import { property } from 'lit/decorators.js';
 import ZincElement from '../../internal/zinc-element';
@@ -16,6 +16,10 @@ import styles from './form-group.scss';
  * @slot - The default slot.
  * @slot chip - A chip displayed under the form group's help text.
  *
+ * @csspart form-control-text - The column holding the label, help text and chip.
+ *
+ * @cssproperty --zn-form-group-sticky-top - Offset the label column sticks at while the inputs scroll past.
+ *
  */
 export default class ZnFormGroup extends ZincElement {
   static styles: CSSResultGroup = [unsafeCSS(formControlStyles), unsafeCSS(styles)];
@@ -41,6 +45,156 @@ export default class ZnFormGroup extends ZincElement {
 
   @property({ attribute: 'pad', type: Boolean }) pad: boolean = false;
 
+  /** The scroller the label is tracked against by hand; null while native sticky is enough. */
+  private tracked: HTMLElement | null = null;
+  private frame: number = 0;
+  private rebind: boolean = false;
+  private offset: number = 0;
+  private resizeObserver: ResizeObserver | null = null;
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    // Whether an ancestor scrolls depends on how tall this form has grown.
+    this.resizeObserver ??= new ResizeObserver(() => this.schedule(true));
+    this.resizeObserver.observe(this);
+    window.addEventListener('resize', this.onViewportResize);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.resizeObserver?.disconnect();
+    window.removeEventListener('resize', this.onViewportResize);
+    this.trackScroller(null);
+    cancelAnimationFrame(this.frame);
+    this.frame = 0;
+  }
+
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    this.schedule(true);
+  }
+
+  private get labelColumn(): HTMLElement | null {
+    return this.shadowRoot?.querySelector('.form-control__text') ?? null;
+  }
+
+  /** Coalesces scroll and resize work into one frame, and out of the ResizeObserver callback. */
+  private schedule(rebind: boolean = false) {
+    this.rebind ||= rebind;
+    if (this.frame) return;
+
+    this.frame = requestAnimationFrame(() => {
+      this.frame = 0;
+      if (this.rebind) {
+        this.rebind = false;
+        this.findScroller();
+      }
+      this.positionLabel();
+    });
+  }
+
+  /**
+   * Native sticky only follows the nearest scroll container. Where that container isn't the one
+   * the user actually scrolls — a `zn-panel` body sized to its content inside a scrolling
+   * slideout, say — the label never moves, so it gets translated by hand instead.
+   */
+  private findScroller() {
+    const column = this.labelColumn;
+    if (!column) return;
+
+    const anchor = this.nearestScrollContainer(column);
+    const scroller = anchor ? this.scrollingAncestor(column) : null;
+    this.trackScroller(scroller === anchor ? null : scroller);
+  }
+
+  private trackScroller(scroller: HTMLElement | null) {
+    if (scroller === this.tracked) return;
+
+    this.scrollTarget(this.tracked)?.removeEventListener('scroll', this.onScroll);
+    this.tracked = scroller;
+    this.scrollTarget(this.tracked)?.addEventListener('scroll', this.onScroll, { passive: true });
+  }
+
+  /** The document scrolls through the window, every other scroller reports its own events. */
+  private scrollTarget(scroller: HTMLElement | null): EventTarget | null {
+    if (!scroller) return null;
+    return scroller === document.scrollingElement ? window : scroller;
+  }
+
+  private readonly onScroll = () => this.schedule();
+
+  // A shorter viewport can make an ancestor scrollable without changing this form's size.
+  private readonly onViewportResize = () => this.schedule(true);
+
+  private positionLabel() {
+    const column = this.labelColumn;
+    const fieldset = this.shadowRoot?.querySelector<HTMLElement>('.form-control');
+    if (!column || !fieldset) return;
+
+    let offset = 0;
+
+    // The stylesheet drops sticky while the columns are stacked; tracking has to stand down too.
+    if (this.tracked && getComputedStyle(column).position === 'sticky') {
+      const visibleTop = this.tracked === document.scrollingElement
+        ? 0
+        : this.tracked.getBoundingClientRect().top;
+      const stickyTop = parseFloat(getComputedStyle(column).top) || 0;
+      const restingTop = column.getBoundingClientRect().top - this.offset;
+      const travel = Math.max(0, fieldset.clientHeight - column.offsetHeight);
+
+      offset = Math.min(Math.max(visibleTop + stickyTop - restingTop, 0), travel);
+    }
+
+    if (Math.round(offset) === Math.round(this.offset)) return;
+
+    this.offset = offset;
+    column.style.transform = offset ? `translateY(${offset}px)` : '';
+  }
+
+  /** The box native sticky would anchor to, whether or not it can be scrolled. */
+  private nearestScrollContainer(from: HTMLElement): HTMLElement | null {
+    return this.ancestors(from).find(element => {
+      const style = getComputedStyle(element);
+      return this.isScrollContainer(style.overflowY) || this.isScrollContainer(style.overflowX);
+    }) ?? null;
+  }
+
+  /** The nearest ancestor the user can actually scroll, falling back to the document. */
+  private scrollingAncestor(from: HTMLElement): HTMLElement | null {
+    const scroller = this.ancestors(from).find(element => {
+      const overflow = getComputedStyle(element).overflowY;
+      return (overflow === 'auto' || overflow === 'scroll' || overflow === 'overlay')
+        && element.scrollHeight > element.clientHeight + 1;
+    });
+
+    if (scroller) return scroller;
+
+    const root = document.scrollingElement as HTMLElement | null;
+    return root && root.scrollHeight > root.clientHeight + 1 ? root : null;
+  }
+
+  private isScrollContainer(overflow: string) {
+    return overflow === 'auto' || overflow === 'scroll' || overflow === 'hidden' || overflow === 'overlay';
+  }
+
+  /** Walks the flattened tree, so slots and shadow boundaries are crossed the way layout does. */
+  private ancestors(from: HTMLElement): HTMLElement[] {
+    const out: HTMLElement[] = [];
+    let node: Node | null = from;
+
+    while (node) {
+      const parent: Node | null = node instanceof Element && node.assignedSlot
+        ? node.assignedSlot
+        : node.parentNode instanceof ShadowRoot ? node.parentNode.host : node.parentNode;
+
+      if (parent instanceof HTMLElement) out.push(parent);
+      node = parent;
+    }
+
+    return out;
+  }
+
   render() {
     const hasLabelSlot = this.hasSlotController.test('label');
     const hasLabelTooltipSlot = this.hasSlotController.test('label-tooltip');
@@ -65,7 +219,7 @@ export default class ZnFormGroup extends ZincElement {
 
         <zn-cols layout="${this.layout}" part="form-control-container" class="form-control__container">
           ${hasLabel || hasHelpText || hasChip || this.forceCols ? html`
-            <div class="form-control__text">
+            <div part="form-control-text" class="form-control__text">
 
               ${hasLabel ? html`
                 <label

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

@@ -4,7 +4,8 @@
   display: block;
   line-height: var(--zn-line-height-dense);
   max-width: var(--zn-container-lg);
-  --zn-col-gap: calc(var(--zn-spacing-medium, 20px) * 3)
+  --zn-col-gap: calc(var(--zn-spacing-medium, 20px) * 3);
+  --zn-form-group-sticky-top: var(--zn-spacing-medium, 20px);
 }
 
 .form-control {
@@ -27,6 +28,18 @@
   --zn-col-basis: 200px;
 }
 
+// Only while the label sits beside the inputs: once zn-cols wraps them into one column a sticky
+// label would scroll over the fields it labels. zn-cols wraps below the two columns' bases plus
+// the gap, so 670px = --zn-col-basis * (1 + 2) + 70px — keep in step with both values below.
+@container (min-width: 670px) {
+  .form-control__text {
+    position: sticky;
+    top: var(--zn-form-group-sticky-top);
+    // A stretched flex item is as tall as the row, leaving sticky nothing to travel through.
+    align-self: flex-start;
+  }
+}
+
 .form-control__chip {
   margin-top: var(--zn-spacing-x-small);
 }
@@ -45,11 +58,13 @@
 
 .form-control-input {
   display: grid;
-  grid-template-columns: 1fr;
+  grid-template-columns: minmax(0, 1fr);
   gap: var(--zn-spacing-medium) var(--zn-spacing-small);
 
+  // `1fr` floors each track at its min-content width, so one long label steals width from
+  // the other tracks and the spans stop lining up.
   @include wc.media-query(md) {
-    grid-template-columns: repeat(6, 1fr);
+    grid-template-columns: repeat(6, minmax(0, 1fr));
   }
 }
 

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

@@ -26,4 +26,68 @@ describe('<zn-form-group>', () => {
 
     expect(el.shadowRoot!.querySelector('[part="form-control-chip"]')).to.not.exist;
   });
+
+  describe('sticky label', () => {
+    const tallForm = Array.from({length: 25}, (_, i) => `<zn-input label="Field ${i}"></zn-input>`).join('');
+
+    async function scrollPast(group: HTMLElement) {
+      group.innerHTML = tallForm;
+      await new Promise(resolve => setTimeout(resolve, 400));
+
+      const label = group.shadowRoot!.querySelector<HTMLElement>('.form-control__text')!;
+      const before = label.getBoundingClientRect().top;
+
+      for (let node: Node | null = label; node; node = flatParent(node)) {
+        if (node instanceof HTMLElement && node.scrollHeight > node.clientHeight + 1) node.scrollTop = 500;
+      }
+      await new Promise(resolve => setTimeout(resolve, 200));
+
+      return {before, after: label.getBoundingClientRect().top};
+    }
+
+    function flatParent(node: Node): Node | null {
+      if (node instanceof Element && node.assignedSlot) return node.assignedSlot;
+      return node.parentNode instanceof ShadowRoot ? node.parentNode.host : node.parentNode;
+    }
+
+    it('holds the label in view when the scroll container is the nearest one', async () => {
+      const el = await fixture<HTMLElement>(html`
+        <div style="max-height: 300px; overflow-y: auto">
+          <zn-form-group label="Sticky"></zn-form-group>
+        </div>`);
+
+      const {before, after} = await scrollPast(el.querySelector('zn-form-group')!);
+
+      expect(after).to.be.closeTo(before, 4);
+    });
+
+    it('gives up sticky once the columns stack', async () => {
+      const wide = await fixture<HTMLElement>(html`
+        <div style="width: 900px"><zn-form-group label="Sticky"></zn-form-group></div>`);
+      const narrow = await fixture<HTMLElement>(html`
+        <div style="width: 500px"><zn-form-group label="Sticky"></zn-form-group></div>`);
+      await new Promise(resolve => setTimeout(resolve, 100));
+
+      const position = (root: HTMLElement) => {
+        const group = root.querySelector('zn-form-group')!;
+        return getComputedStyle(group.shadowRoot!.querySelector('.form-control__text')!).position;
+      };
+
+      expect(position(wide)).to.equal('sticky');
+      expect(position(narrow)).to.equal('static');
+    });
+
+    it('holds the label in view when a panel sits between the form and the scroll container', async () => {
+      const el = await fixture<HTMLElement>(html`
+        <div style="max-height: 300px; overflow-y: auto">
+          <zn-panel>
+            <zn-form-group label="Sticky"></zn-form-group>
+          </zn-panel>
+        </div>`);
+
+      const {before, after} = await scrollPast(el.querySelector('zn-form-group')!);
+
+      expect(after).to.be.closeTo(before, 4);
+    });
+  });
 });

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;