@kubex/zinc 1.0.25 → 1.0.99

package/src/components/input/input.component.ts

@@ -66,8 +66,10 @@ export default class ZnInput extends ZincElement implements ZincFormControl {
   private readonly localize = new LocalizeController(this);
 
   @query('.input__control') input: HTMLInputElement;
+  @query('.input__color-picker') colorPicker: HTMLInputElement;
 
   @state() private hasFocus = false;
+  @state() private isUserTyping = false;
   @property() title = "" // make reactive pass through
 
   private __numberInput = Object.assign(document.createElement('input'), {type: 'number'});
@@ -77,7 +79,7 @@ export default class ZnInput extends ZincElement implements ZincFormControl {
    * The type of input. Works the same as native `<input>` element. But only a subset of types is supported. Defaults
    * to `text`
    */
-  @property({reflect: true}) type: 'currency' | 'date' | 'datetime-local' | 'email' | 'number' | 'password' |
+  @property({reflect: true}) type: 'color' | 'currency' | 'date' | 'datetime-local' | 'email' | 'number' | 'password' |
     'search' | 'tel' | 'text' | 'time' | 'url' = 'text';
 
   /** The name of the input, submitted as a name/value pair with form data. */
@@ -141,6 +143,9 @@ export default class ZnInput extends ZincElement implements ZincFormControl {
   /** Hides the browsers built-in increment/decrement spin buttons for number inputs **/
   @property({attribute: 'no-spin-buttons', type: Boolean}) noSpinButtons: boolean = false;
 
+  /** The color format to display for color inputs. Only applies when type is 'color'. **/
+  @property({attribute: 'color-format'}) colorFormat: 'hex' | 'rgb' | 'hsl' | 'oklch' = 'hex';
+
   /**
    * By default, form-controls are associated with the nearest containing `<form>` element. This attribute allows you
    * to place the form control outside a form and associate it with the form that has this `id`. The form must be
@@ -261,15 +266,247 @@ export default class ZnInput extends ZincElement implements ZincFormControl {
     }
   }
 
+  // Color format conversion utilities
+  private hexToRgb(hex: string): string {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    if (!result) return '';
+    const r = parseInt(result[1], 16);
+    const g = parseInt(result[2], 16);
+    const b = parseInt(result[3], 16);
+    return `rgb(${r}, ${g}, ${b})`;
+  }
+
+  private rgbToHex(rgb: string): string {
+    const match = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
+    if (!match) return '';
+    const r = parseInt(match[1]).toString(16).padStart(2, '0');
+    const g = parseInt(match[2]).toString(16).padStart(2, '0');
+    const b = parseInt(match[3]).toString(16).padStart(2, '0');
+    return `#${r}${g}${b}`;
+  }
+
+  private hexToOklch(hex: string): string {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    if (!result) return '';
+
+    // Convert hex to RGB (0-1 range)
+    let r = parseInt(result[1], 16) / 255;
+    let g = parseInt(result[2], 16) / 255;
+    let b = parseInt(result[3], 16) / 255;
+
+    // Apply gamma correction
+    r = r > 0.04045 ? Math.pow((r + 0.055) / 1.055, 2.4) : r / 12.92;
+    g = g > 0.04045 ? Math.pow((g + 0.055) / 1.055, 2.4) : g / 12.92;
+    b = b > 0.04045 ? Math.pow((b + 0.055) / 1.055, 2.4) : b / 12.92;
+
+    // Convert to XYZ
+    const x = r * 0.4124564 + g * 0.3575761 + b * 0.1804375;
+    const y = r * 0.2126729 + g * 0.7151522 + b * 0.0721750;
+    const z = r * 0.0193339 + g * 0.1191920 + b * 0.9503041;
+
+    // Convert XYZ to Lab
+    const xn = x / 0.95047;
+    const yn = y / 1.00000;
+    const zn = z / 1.08883;
+
+    const fx = xn > 0.008856 ? Math.pow(xn, 1/3) : (7.787 * xn + 16/116);
+    const fy = yn > 0.008856 ? Math.pow(yn, 1/3) : (7.787 * yn + 16/116);
+    const fz = zn > 0.008856 ? Math.pow(zn, 1/3) : (7.787 * zn + 16/116);
+
+    const L = 116 * fy - 16;
+    const a = 500 * (fx - fy);
+    const b_lab = 200 * (fy - fz);
+
+    // Convert Lab to LCH (which is close to OKLCH)
+    const C = Math.sqrt(a * a + b_lab * b_lab);
+    let H = Math.atan2(b_lab, a) * 180 / Math.PI;
+    if (H < 0) H += 360;
+
+    // Normalize to OKLCH ranges
+    const l = (L / 100).toFixed(3);
+    const c = (C / 150).toFixed(3);
+    const h = H.toFixed(1);
+
+    return `oklch(${l} ${c} ${h})`;
+  }
+
+  private oklchToHex(oklch: string): string {
+    const match = oklch.match(/^oklch\(([0-9.]+)\s+([0-9.]+)\s+([0-9.]+)\)$/);
+    if (!match) return '';
+
+    const L = parseFloat(match[1]) * 100;
+    const C = parseFloat(match[2]) * 150;
+    const H = parseFloat(match[3]);
+
+    // Convert LCH to Lab
+    const a = C * Math.cos(H * Math.PI / 180);
+    const b_lab = C * Math.sin(H * Math.PI / 180);
+
+    // Convert Lab to XYZ
+    const fy = (L + 16) / 116;
+    const fx = a / 500 + fy;
+    const fz = fy - b_lab / 200;
+
+    const xn = fx > 0.206897 ? Math.pow(fx, 3) : (fx - 16/116) / 7.787;
+    const yn = fy > 0.206897 ? Math.pow(fy, 3) : (fy - 16/116) / 7.787;
+    const zn = fz > 0.206897 ? Math.pow(fz, 3) : (fz - 16/116) / 7.787;
+
+    const x = xn * 0.95047;
+    const y = yn * 1.00000;
+    const z = zn * 1.08883;
+
+    // Convert XYZ to RGB
+    let r = x *  3.2404542 + y * -1.5371385 + z * -0.4985314;
+    let g = x * -0.9692660 + y *  1.8760108 + z *  0.0415560;
+    let b = x *  0.0556434 + y * -0.2040259 + z *  1.0572252;
+
+    // Apply gamma correction
+    r = r > 0.0031308 ? 1.055 * Math.pow(r, 1/2.4) - 0.055 : 12.92 * r;
+    g = g > 0.0031308 ? 1.055 * Math.pow(g, 1/2.4) - 0.055 : 12.92 * g;
+    b = b > 0.0031308 ? 1.055 * Math.pow(b, 1/2.4) - 0.055 : 12.92 * b;
+
+    // Clamp and convert to hex
+    r = Math.max(0, Math.min(1, r));
+    g = Math.max(0, Math.min(1, g));
+    b = Math.max(0, Math.min(1, b));
+
+    const rHex = Math.round(r * 255).toString(16).padStart(2, '0');
+    const gHex = Math.round(g * 255).toString(16).padStart(2, '0');
+    const bHex = Math.round(b * 255).toString(16).padStart(2, '0');
+
+    return `#${rHex}${gHex}${bHex}`;
+  }
+
+  private hexToHsl(hex: string): string {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    if (!result) return '';
+    let r = parseInt(result[1], 16) / 255;
+    let g = parseInt(result[2], 16) / 255;
+    let b = parseInt(result[3], 16) / 255;
+
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    const l = (max + min) / 2;
+    let h = 0;
+    let s = 0;
+
+    if (max !== min) {
+      const d = max - min;
+      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+      switch (max) {
+        case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
+        case g: h = ((b - r) / d + 2) / 6; break;
+        case b: h = ((r - g) / d + 4) / 6; break;
+      }
+    }
+
+    return `hsl(${Math.round(h * 360)}, ${Math.round(s * 100)}%, ${Math.round(l * 100)}%)`;
+  }
+
+  private hslToHex(hsl: string): string {
+    const match = hsl.match(/^hsl\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*\)$/);
+    if (!match) return '';
+    const h = parseInt(match[1]) / 360;
+    const s = parseInt(match[2]) / 100;
+    const l = parseInt(match[3]) / 100;
+
+    let r: number, g: number, b: number;
+    if (s === 0) {
+      r = g = b = l;
+    } else {
+      const hue2rgb = (p: number, q: number, t: number) => {
+        if (t < 0) t += 1;
+        if (t > 1) t -= 1;
+        if (t < 1/6) return p + (q - p) * 6 * t;
+        if (t < 1/2) return q;
+        if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
+        return p;
+      };
+      const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+      const p = 2 * l - q;
+      r = hue2rgb(p, q, h + 1/3);
+      g = hue2rgb(p, q, h);
+      b = hue2rgb(p, q, h - 1/3);
+    }
+
+    const rHex = Math.round(r * 255).toString(16).padStart(2, '0');
+    const gHex = Math.round(g * 255).toString(16).padStart(2, '0');
+    const bHex = Math.round(b * 255).toString(16).padStart(2, '0');
+    return `#${rHex}${gHex}${bHex}`;
+  }
+
+  private convertToHex(value: string): string {
+    if (!value) return '#000000';
+    if (value.startsWith('#')) return value;
+    if (value.startsWith('rgb')) return this.rgbToHex(value);
+    if (value.startsWith('hsl')) return this.hslToHex(value);
+    if (value.startsWith('oklch')) return this.oklchToHex(value);
+    return value;
+  }
+
+  private convertFromHex(hex: string): string {
+    if (!hex) return '';
+    if (this.colorFormat === 'hex') return hex;
+    if (this.colorFormat === 'rgb') return this.hexToRgb(hex);
+    if (this.colorFormat === 'hsl') return this.hexToHsl(hex);
+    if (this.colorFormat === 'oklch') return this.hexToOklch(hex);
+    return hex;
+  }
+
   private handleBlur() {
     this.hasFocus = false;
+    this.isUserTyping = false;
     this.validateMinMax();
+
+    // Normalize color value to the correct format on blur
+    if (this.type === 'color' && this.value) {
+      const hexValue = this.convertToHex(this.value);
+      if (hexValue) {
+        const normalizedValue = this.convertFromHex(hexValue);
+        if (normalizedValue !== this.value) {
+          this.value = normalizedValue;
+        }
+      }
+    }
+
     this.emit('zn-blur');
   }
 
   private handleChange() {
     if (this.type === 'currency' && this.input.value) {
       this.value = parseFloat(this.input.value as string).toFixed(2)
+    } else if (this.type === 'color') {
+      const colorValue = this.input.value.trim();
+
+      // Validate based on format
+      if (colorValue === '') {
+        this.value = '';
+      } else if (this.colorFormat === 'hex') {
+        // Validate hex format
+        let hexValue = colorValue;
+        if (hexValue && !hexValue.startsWith('#')) {
+          hexValue = '#' + hexValue;
+        }
+        if (/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(hexValue)) {
+          this.value = hexValue.toLowerCase();
+        }
+      } else if (this.colorFormat === 'rgb') {
+        // Validate rgb format
+        if (/^rgb\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*\)$/.test(colorValue)) {
+          this.value = colorValue;
+        }
+      } else if (this.colorFormat === 'hsl') {
+        // Validate hsl format
+        if (/^hsl\(\s*\d+\s*,\s*\d+%\s*,\s*\d+%\s*\)$/.test(colorValue)) {
+          this.value = colorValue;
+        }
+      } else if (this.colorFormat === 'oklch') {
+        // Validate oklch format
+        if (/^oklch\(\s*[0-9.]+\s+[0-9.]+\s+[0-9.]+\s*\)$/.test(colorValue)) {
+          this.value = colorValue;
+        }
+      }
+      // If invalid, keep the previous value
     } else {
       this.value = this.input.value;
     }
@@ -293,7 +530,13 @@ export default class ZnInput extends ZincElement implements ZincFormControl {
   }
 
   private handleInput() {
-    this.value = this.input.value;
+    this.isUserTyping = true;
+    if (this.type === 'color') {
+      // For color inputs, update value on input but don't validate format yet
+      this.value = this.input.value;
+    } else {
+      this.value = this.input.value;
+    }
     this.formControlController.updateValidity();
     this.emit('zn-input');
   }
@@ -312,6 +555,12 @@ export default class ZnInput extends ZincElement implements ZincFormControl {
       // When using a Input Method Editor (IME), pressing enter will cause the form to submit unexpectedly. One way
       // to check for this is to look at event.isComposing, which will be true when the IME is open.
       if (!event.defaultPrevented && !event.isComposing) {
+        // Check if form has navigation enabled - if so, let FormNavigationController handle it
+        const form = this.formControlController.getForm();
+        if (form?.hasAttribute('enter-navigation') || form?.hasAttribute('data-enter-navigation')) {
+          return; // Let FormNavigationController handle it
+        }
+
         this.formControlController.submit();
       }
     }
@@ -321,6 +570,22 @@ export default class ZnInput extends ZincElement implements ZincFormControl {
     this.passwordVisible = !this.passwordVisible;
   }
 
+  private handleColorSwatchClick() {
+    if (this.type === 'color' && this.colorPicker) {
+      this.colorPicker.click();
+    }
+  }
+
+  private handleColorPickerChange() {
+    if (this.type === 'color' && this.colorPicker) {
+      // Convert hex from native picker to the specified format
+      const hexValue = this.colorPicker.value;
+      this.value = this.convertFromHex(hexValue);
+      this.emit('zn-change');
+      this.emit('zn-input');
+    }
+  }
+
   private focusInput(event: MouseEvent) {
     if (this.hasFocus) {
       return;
@@ -354,7 +619,44 @@ export default class ZnInput extends ZincElement implements ZincFormControl {
   @watch('value', {waitUntilFirstUpdate: true})
   async handleValueChange() {
     await this.updateComplete;
+
+    // Normalize color value to match colorFormat, but NOT while user is typing
+    // Only normalize on initial load or programmatic changes
+    if (this.type === 'color' && this.value && !this.isUserTyping) {
+      const hexValue = this.convertToHex(this.value);
+      if (hexValue) {
+        const normalizedValue = this.convertFromHex(hexValue);
+        // Only update if the conversion actually changed something
+        // This prevents infinite loops because once normalized, it won't change again
+        if (normalizedValue !== this.value) {
+          this.value = normalizedValue;
+          this.emit('zn-change');
+          return; // Will re-trigger, but next time values will match
+        }
+      }
+    }
+
     this.formControlController.updateValidity();
+
+    // Update color picker if this is a color input (needs hex)
+    if (this.type === 'color' && this.colorPicker) {
+      this.colorPicker.value = this.convertToHex(this.value) || '#000000';
+    }
+  }
+
+  @watch('colorFormat', {waitUntilFirstUpdate: true})
+  async handleColorFormatChange() {
+    // When color format changes, convert the current value to the new format
+    if (this.type === 'color' && this.value) {
+      const hexValue = this.convertToHex(this.value);
+      if (hexValue) {
+        const normalizedValue = this.convertFromHex(hexValue);
+        if (normalizedValue !== this.value) {
+          this.value = normalizedValue;
+          this.emit('zn-change');
+        }
+      }
+    }
   }
 
   /** Sets focus on the input. */
@@ -511,7 +813,23 @@ export default class ZnInput extends ZincElement implements ZincFormControl {
                })}>
 
             <span part="prefix" class="input__prefix">
-              ${this.type === 'currency'
+              ${this.type === 'color'
+                ? html`
+                  <div
+                    class="input__color-swatch"
+                    @click=${this.handleColorSwatchClick}
+                    style="--color-value: ${this.convertToHex(this.value) || '#000000'}">
+                    <div class="input__color-swatch-inner"></div>
+                  </div>
+                  <input
+                    class="input__color-picker"
+                    type="color"
+                    .value=${this.convertToHex(this.value) || '#000000'}
+                    @change=${this.handleColorPickerChange}
+                    @input=${this.handleColorPickerChange}
+                    tabindex="-1"
+                  />`
+                : this.type === 'currency'
                 ? html`
                   <zn-icon class="input__prefix-default" src="payments"></zn-icon>`
                 : this.type === 'email' && hasOptionalIcon
@@ -528,7 +846,8 @@ export default class ZnInput extends ZincElement implements ZincFormControl {
               part="input"
               id="input"
               class="input__control"
-              type=${this.type === 'password' && this.passwordVisible ? 'text' : this.type === 'currency' ? 'number' : this.type}
+              type=${this.type === 'password' && this.passwordVisible ? 'text' : this.type === 'currency' ? 'number' : this.type === 'color' ? 'text' : this.type}
+              ?data-color-input=${this.type === 'color'}
               title=${this.title /* An empty title prevents browser validation tooltips from appearing on hover */}
               name=${ifDefined(this.name)}
               ?disabled=${this.disabled}
@@ -539,7 +858,7 @@ export default class ZnInput extends ZincElement implements ZincFormControl {
               maxlength=${ifDefined(this.maxlength)}
               min=${ifDefined(this.min)}
               max=${ifDefined(this.max)}
-              step=${ifDefined(this.step)}
+              step=${ifDefined(this.type === 'currency' ? 0.01 : this.step)}
               .value=${live(this.value)}
               autocapitalize=${ifDefined(this.autocapitalize)}
               autocomplete=${ifDefined(this.autocomplete)}

package/src/components/input/input.scss

@@ -93,6 +93,12 @@
   -webkit-appearance: none;
 }
 
+/* Color input text should use monospace font */
+input[type='text'].input__control[data-color-input] {
+  font-family: var(--zn-font-mono, 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace);
+  font-size: 0.9em;
+}
+
 .input__control::-webkit-search-decoration,
 .input__control::-webkit-search-cancel-button,
 .input__control::-webkit-search-results-button,
@@ -362,3 +368,84 @@
 input[type='date']::-webkit-calendar-picker-indicator {
   background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="14" width="12.25" viewBox="0 0 448 512"><path fill="%236d7176" d="M128 0c13.3 0 24 10.7 24 24V64H296V24c0-13.3 10.7-24 24-24s24 10.7 24 24V64h40c35.3 0 64 28.7 64 64v16 48V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V192 144 128C0 92.7 28.7 64 64 64h40V24c0-13.3 10.7-24 24-24zM400 192H48V448c0 8.8 7.2 16 16 16H384c8.8 0 16-7.2 16-16V192zM112 256h96c8.8 0 16 7.2 16 16v96c0 8.8-7.2 16-16 16H112c-8.8 0-16-7.2-16-16V272c0-8.8 7.2-16 16-16z"/></svg>');
 }
+
+/* Color input styling */
+.input__color-swatch {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: var(--zn-border-radius-medium);
+  border: solid 1px rgba(0, 0, 0, 0.15);
+  background-color: var(--zn-color-neutral-0);
+  cursor: pointer;
+  transition: var(--zn-transition-fast) border-color, var(--zn-transition-fast) box-shadow;
+  overflow: hidden;
+  position: relative;
+  flex-shrink: 0;
+  margin-inline-start: var(--zn-input-spacing-small);
+
+  &:hover {
+    border-color: rgba(0, 0, 0, 0.25);
+    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
+  }
+}
+
+/* Size-specific spacing adjustments for color swatch */
+.input--x-small .input__color-swatch {
+  margin-inline-start: var(--zn-input-spacing-x-small);
+}
+
+.input--small .input__color-swatch {
+  margin-inline-start: var(--zn-input-spacing-small);
+}
+
+.input--medium .input__color-swatch {
+  margin-inline-start: var(--zn-input-spacing-medium);
+}
+
+.input--large .input__color-swatch {
+  margin-inline-start: var(--zn-input-spacing-medium);
+}
+
+.input__color-swatch-inner {
+  width: 100%;
+  height: 100%;
+  border-radius: calc(var(--zn-border-radius-medium) - 2px);
+  background-color: var(--color-value, #000000);
+}
+
+/* Hide the native color input but keep it functional */
+.input__color-picker {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  padding: 0;
+  margin: 0;
+  pointer-events: none;
+  border: none;
+  visibility: hidden;
+}
+
+/* Size adjustments for color inputs */
+.input--x-small .input__color-swatch {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.input--small .input__color-swatch {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.input--medium .input__color-swatch {
+  width: 1.75rem;
+  height: 1.75rem;
+}
+
+.input--large .input__color-swatch {
+  width: 2rem;
+  height: 2rem;
+}

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

@@ -30,20 +30,32 @@ export default class ZnInputGroup extends ZincElement {
   /** The input group's label. If you need to display HTML, use the `label` slot. */
   @property() label = '';
 
+  /** Adds a gap between the grouped elements, preserving individual border radii. Use `sm`, `md`, or `lg`. */
+  @property() gap: 'sm' | 'md' | 'lg';
+
   private handleSlotChange() {
     const slottedElements = [...this.defaultSlot.assignedElements({flatten: true})] as HTMLElement[];
 
-    // Filter for inputs and selects
+    // Filter for inputs, selects, and buttons
     const supportedTags = ['ZN-INPUT', 'ZN-SELECT', 'ZN-BUTTON'];
     const controls = slottedElements.filter(el => supportedTags.includes(el.tagName));
 
-    controls.forEach(el => {
-      const index = controls.indexOf(el);
+    // Buttons are styled independently — only inputs/selects participate in joined positioning
+    const joinedControls = controls.filter(el => el.tagName !== 'ZN-BUTTON');
 
+    controls.forEach(el => {
       el.toggleAttribute('data-zn-input-group__input', true);
-      el.toggleAttribute('data-zn-input-group__input--first', index === 0);
-      el.toggleAttribute('data-zn-input-group__input--inner', index > 0 && index < controls.length - 1);
-      el.toggleAttribute('data-zn-input-group__input--last', index === controls.length - 1);
+
+      if (el.tagName === 'ZN-BUTTON') {
+        el.toggleAttribute('data-zn-input-group__input--first', false);
+        el.toggleAttribute('data-zn-input-group__input--inner', false);
+        el.toggleAttribute('data-zn-input-group__input--last', false);
+      } else {
+        const index = joinedControls.indexOf(el);
+        el.toggleAttribute('data-zn-input-group__input--first', index === 0);
+        el.toggleAttribute('data-zn-input-group__input--inner', index > 0 && index < joinedControls.length - 1);
+        el.toggleAttribute('data-zn-input-group__input--last', index === joinedControls.length - 1);
+      }
     });
   }
 
@@ -65,7 +77,16 @@ export default class ZnInputGroup extends ZincElement {
           <slot name="label">${this.label}</slot>
         </label>
 
-        <div part="base form-control-input" class="input-group" role="group" aria-labelledby="label">
+        <div part="base form-control-input"
+             class="${classMap({
+               'input-group': true,
+               'input-group--gap': !!this.gap,
+               'input-group--gap-sm': this.gap === 'sm',
+               'input-group--gap-md': this.gap === 'md',
+               'input-group--gap-lg': this.gap === 'lg',
+             })}"
+             role="group"
+             aria-labelledby="label">
           <slot @slotchange=${this.handleSlotChange}></slot>
         </div>
       </div>`;

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

@@ -12,6 +12,33 @@
   width: 100%;
 }
 
+/* Gap variants */
+.input-group--gap-sm {
+  gap: var(--zn-spacing-x-small);
+}
+
+.input-group--gap-md {
+  gap: var(--zn-spacing-small);
+}
+
+.input-group--gap-lg {
+  gap: var(--zn-spacing-medium);
+}
+
+/* When gap is set, restore individual border radii */
+.input-group--gap ::slotted([data-zn-input-group__input]) {
+  margin-inline-end: 0;
+}
+
+.input-group--gap ::slotted([data-zn-input-group__input--first]),
+.input-group--gap ::slotted([data-zn-input-group__input--inner]),
+.input-group--gap ::slotted([data-zn-input-group__input--last]) {
+  --zn-input-border-radius-x-small: var(--zn-border-radius-medium);
+  --zn-input-border-radius-small: var(--zn-border-radius-medium);
+  --zn-input-border-radius-medium: var(--zn-border-radius-medium);
+  --zn-input-border-radius-large: var(--zn-border-radius-medium);
+}
+
 /* Common styles for slotted inputs */
 ::slotted([data-zn-input-group__input]) {
   /* Overlap borders */
@@ -21,6 +48,15 @@
   position: relative;
   z-index: 1;
   flex: 1;
+  min-width: 0;
+}
+
+@for $i from 1 through 12 {
+  ::slotted([data-zn-input-group__input][span="#{$i}"]) {
+    @include wc.media-query(md) {
+      flex: #{$i};
+    }
+  }
 }
 
 ::slotted([data-zn-input-group__input]:focus-within) {
@@ -50,17 +86,19 @@
   margin-inline-end: 0;
 }
 
-/* Button overrides */
-::slotted(zn-button[data-zn-input-group__input])::part(base) {
-  border-radius: 0;
+/* Button overrides - don't join to other inputs */
+::slotted(zn-button[data-zn-input-group__input]) {
+  flex: 0 0 auto;
+  margin-inline-start: var(--zn-spacing-x-small);
+  margin-inline-end: 0;
 }
 
-::slotted(zn-button[data-zn-input-group__input--first])::part(base) {
-  border-start-start-radius: var(--zn-border-radius-medium);
-  border-end-start-radius: var(--zn-border-radius-medium);
+::slotted(zn-button[data-zn-input-group__input--first]),
+::slotted(zn-button[data-zn-input-group__input--inner]),
+::slotted(zn-button[data-zn-input-group__input--last]) {
+  --zn-input-border-radius-x-small: var(--zn-border-radius-medium);
+  --zn-input-border-radius-small: var(--zn-border-radius-medium);
+  --zn-input-border-radius-medium: var(--zn-border-radius-medium);
+  --zn-input-border-radius-large: var(--zn-border-radius-medium);
 }
 
-::slotted(zn-button[data-zn-input-group__input--last])::part(base) {
-  border-start-end-radius: var(--zn-border-radius-medium);
-  border-end-end-radius: var(--zn-border-radius-medium);
-}