@kubex/zinc 1.0.16 → 1.0.18

package/docs/pages/components/select.md

@@ -41,7 +41,6 @@ on [form controls](/getting-started/form-controls) to learn more about form subm
 
 ### Distinct Selects
 
-
 ```html:preview
 
 <div class="form-spacing">
@@ -60,7 +59,6 @@ on [form controls](/getting-started/form-controls) to learn more about form subm
 
 ### Conditional Selects
 
-
 ```html:preview
 
 <div class="form-spacing">
@@ -423,6 +421,29 @@ so that we can consider whether the pattern needs to be updated.
 </zn-select>
 ```
 
+### Checkbox Prefix
+
+You can place a checkbox in the `prefix` slot to visually join it to the select. The checkbox will match the height of
+the control and can be interacted with independently (clicking or toggling it won’t open the select).
+
+```html:preview
+<zn-select label="Notify me about" help-text="Use the checkbox to enable/disable notifications; choose a channel with the select">
+  <zn-checkbox slot="prefix" aria-label="Enable notifications"></zn-checkbox>
+  <zn-option value="email">Email</zn-option>
+  <zn-option value="sms">SMS</zn-option>
+  <zn-option value="push">Push</zn-option>
+</zn-select>
+
+<br />
+
+<zn-select label="Large with checkbox" size="large" value="email">
+  <zn-checkbox slot="prefix" size="large" aria-label="Enable notifications"></zn-checkbox>
+  <zn-option value="email">Email</zn-option>
+  <zn-option value="sms">SMS</zn-option>
+  <zn-option value="push">Push</zn-option>
+</zn-select>
+```
+
 ### Custom Tags
 
 When multiple options can be selected, you can provide custom tags by passing a function to the `getTag` property. Your

package/package.json

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

package/src/components/button/button.scss

@@ -21,6 +21,7 @@
 
   border-width: 1px;
   border-color: transparent;
+  height: 100%;
   display: inline-flex;
   position: relative;
 

package/src/components/checkbox/checkbox.component.ts

@@ -7,9 +7,9 @@ import {ifDefined} from "lit/directives/if-defined.js";
 import {live} from "lit/directives/live.js";
 import {property, query, state} from 'lit/decorators.js';
 import {watch} from '../../internal/watch';
-import type {ZincFormControl} from '../../internal/zinc-element';
 import ZincElement from '../../internal/zinc-element';
 import ZnIcon from "../icon";
+import type {ZincFormControl} from '../../internal/zinc-element';
 
 import styles from './checkbox.scss';
 
@@ -289,10 +289,15 @@ export default class ZnCheckbox extends ZincElement implements ZincFormControl {
               ? ' control--indeterminate'
               : ''}"
             class="checkbox__control">
-            ${this.checked
-              ? html`
-                <zn-icon part="checked-icon" class="checkbox__checked-icon" size="16" src="check"></zn-icon>`
-              : ''}
+            <svg viewBox="0 0 24 24"
+                 fill="none"
+                 stroke="currentColor"
+                 stroke-width="4"
+                 stroke-linecap="round"
+                 stroke-linejoin="round"
+                 class="svg-icon">
+              <polyline class="checkbox__checked-icon" points="20 6 9 17 4 12"></polyline>
+            </svg>
             ${!this.checked && this.indeterminate
               ? html`
                 <zn-icon

package/src/components/checkbox/checkbox.scss

@@ -8,6 +8,7 @@
 .form-control {
   display: flex;
   flex-direction: column;
+  height: 100%;
 }
 
 .form-control .form-control__label {
@@ -23,6 +24,7 @@
   color: var(--zn-input-label-color);
   vertical-align: middle;
   cursor: pointer;
+  height: 100%;
 }
 
 .checkbox--small {
@@ -76,7 +78,6 @@
   pointer-events: none;
 }
 
-.checkbox__checked-icon,
 .checkbox__indeterminate-icon {
   --icon-size: var(--toggle-size);
   --icon-color: var(--zn-color-neutral-0);
@@ -86,6 +87,32 @@
   height: var(--toggle-size);
 }
 
+.svg-icon {
+  width: 70%;
+  height: 70%;
+  --icon-color: var(--zn-color-neutral-0);
+
+  .checkbox__checked-icon {
+    stroke-dasharray: 24;
+    stroke-dashoffset: 24;
+    transition: stroke-dashoffset 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+}
+
+.checkbox--indeterminate .svg-icon {
+  color: transparent;
+}
+
+.checkbox--checked {
+  .svg-icon {
+    color: var(--zn-color-neutral-0);
+  }
+
+  .checkbox__checked-icon {
+    stroke-dashoffset: 0;
+  }
+}
+
 /* Hover */
 .checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover {
   border-color: var(--zn-input-border-color-hover);
@@ -200,3 +227,23 @@
   outline: 1px solid var(--zn-color-purple-600);
   transition: var(--zn-transition-medium) all;
 }
+
+/** Select prefix slot */
+:host([slot="prefix"]) {
+  height: 100%;
+  aspect-ratio: 1;
+
+  .checkbox__control {
+    height: 100%;
+    width: 100%;
+    border-left: unset;
+    border-top: unset;
+    border-bottom: unset;
+    box-shadow: unset;
+    background-color: var(--zn-color-purple-50);
+  }
+
+  .checkbox--checked .checkbox__control {
+    background-color: var(--zn-color-primary-600);
+  }
+}

package/src/components/data-table/data-table.component.ts

@@ -417,21 +417,47 @@ export default class ZnDataTable extends ZincElement {
 
       // add groups to the current rows
       const toAdd = this.groups.split(',').map(g => g.trim()).filter(g => g.length > 0);
-      toAdd.forEach((group) => {
-        if (!groupedRows[this.humanize(group)]) {
-          groupedRows[this.humanize(group)] = [];
+
+      const hasWildcard = toAdd.includes('*');
+      const explicitGroups = new Set(
+        toAdd
+          .filter(g => g !== '*')
+          .map(g => this.humanize(g))
+      );
+
+      // pre-create explicit groups
+      explicitGroups.forEach((group) => {
+        if (!groupedRows[group]) {
+          groupedRows[group] = [];
         }
       });
 
+      // pre-create wildcard grouping if requested
+      if (hasWildcard) {
+        groupedRows['*'] = [];
+      }
+
       this._rows.forEach((row: Row) => {
         const groupCell = row.cells.find((cell: Cell) => cell.column === this.groupBy);
-        const groupValue = groupCell ? groupCell.text : 'Ungrouped';
-        if (!groupedRows[this.humanize(groupValue)] && (!this.groups || groupValue === 'Ungrouped')) {
-          groupedRows[this.humanize(groupValue)] = [];
+        const rawGroupValue = groupCell ? groupCell.text : 'Ungrouped';
+        const groupValue = this.humanize(rawGroupValue);
+
+        if (explicitGroups.has(groupValue)) {
+          groupedRows[groupValue].push(row);
+          return;
         }
 
-        if (groupedRows[this.humanize(groupValue)]) {
-          groupedRows[this.humanize(groupValue)].push(row);
+        if (hasWildcard) {
+          groupedRows['*'].push(row);
+          return;
+        }
+
+        // If no groups specified, or handling ungrouped fallback, create groups dynamically
+        if (!this.groups || groupValue === 'Ungrouped') {
+          if (!groupedRows[groupValue]) {
+            groupedRows[groupValue] = [];
+          }
+          groupedRows[groupValue].push(row);
         }
       });
 
@@ -447,7 +473,7 @@ export default class ZnDataTable extends ZincElement {
         <zn-sp flush>
           ${Object.keys(groupedRows).map((groupKey) => html`
             <div class="table-group">
-              <h3 class="table-group__title">${groupKey === "Ungrouped" ? "" : groupKey}</h3>
+              <h3 class="table-group__title">${(groupKey === "Ungrouped" || groupKey === "*") ? "" : groupKey}</h3>
               ${this.renderTableData(groupedRows[groupKey])}
             </div>`
           )}

package/src/components/note/note.component.ts

@@ -1,11 +1,11 @@
 import {classMap} from "lit/directives/class-map.js";
 import {type colors} from "../data-select/providers/color-data-provider";
 import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {HasSlotController} from "../../internal/slot";
 import {property, state} from "lit/decorators.js";
 import ZincElement from '../../internal/zinc-element';
 
 import styles from './note.scss';
-import {HasSlotController} from "../../internal/slot";
 
 /**
  * @summary Short summary of the component's intended use.
@@ -61,9 +61,12 @@ export default class ZnNote extends ZincElement {
       })}">
         <div class="note__header">
           <slot name="caption" class="note__header__caption">${this.caption}</slot>
-          <slot name="date" class="note__header__date">
-            <small>${this.date}</small>
-          </slot>
+          <div class="note__header__end">
+            <slot name="date" class="note__header__date">
+              <small>${this.date}</small>
+            </slot>
+            <slot name="action"></slot>
+          </div>
         </div>
 
         ${this.expanded && showExpandableButton ?

package/src/components/note/note.scss

@@ -40,6 +40,11 @@ $colors: (
     &__date {
       font-size: var(--zn-font-size-small);
     }
+
+    &__end {
+      display: flex;
+      gap: var(--zn-spacing-small);
+    }
   }
 
   &__body-container {

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

@@ -1,22 +1,23 @@
-import { animateTo, stopAnimations } from '../../internal/animate.js';
-import { classMap } from "lit/directives/class-map.js";
-import { type CSSResultGroup, html, nothing, PropertyValues, type TemplateResult, unsafeCSS } from 'lit';
+import {animateTo, stopAnimations} from '../../internal/animate.js';
+import {classMap} from "lit/directives/class-map.js";
 import {deepQuerySelectorAll} from "../../utilities/query";
-import { FormControlController } from "../../internal/form";
-import { getAnimation, setDefaultAnimation } from "../../utilities/animation-registry";
-import { HasSlotController } from "../../internal/slot";
-import { LocalizeController } from "../../utilities/localize";
-import { property, query, state } from 'lit/decorators.js';
-import { scrollIntoView } from "../../internal/scroll";
-import { unsafeHTML } from "lit/directives/unsafe-html.js";
-import { waitForEvent } from "../../internal/event";
-import { watch } from '../../internal/watch';
+import {FormControlController} from "../../internal/form";
+import {getAnimation, setDefaultAnimation} from "../../utilities/animation-registry";
+import {HasSlotController} from "../../internal/slot";
+import {html, nothing, unsafeCSS} from 'lit';
+import {LocalizeController} from "../../utilities/localize";
+import {property, query, state} from 'lit/decorators.js';
+import {scrollIntoView} from "../../internal/scroll";
+import {unsafeHTML} from "lit/directives/unsafe-html.js";
+import {waitForEvent} from "../../internal/event";
+import {watch} from '../../internal/watch';
 import ZincElement from '../../internal/zinc-element';
 import ZnChip from "../chip";
 import ZnIcon from "../icon";
 import ZnPopup from "../popup";
-import type { ZincFormControl } from '../../internal/zinc-element';
-import type { ZnRemoveEvent } from "../../events/zn-remove";
+import type {CSSResultGroup, PropertyValues, TemplateResult} from 'lit';
+import type {ZincFormControl} from '../../internal/zinc-element';
+import type {ZnRemoveEvent} from "../../events/zn-remove";
 import type ZnOption from "../option";
 
 import styles from './select.scss';
@@ -90,12 +91,14 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
   @query('.select__display-input') displayInput: HTMLInputElement;
   @query('.select__value-input') valueInput: HTMLInputElement;
   @query('.select__listbox') listbox: HTMLSlotElement;
+  @query('slot[name="prefix"]') prefixSlot: HTMLSlotElement;
 
   @state() private hasFocus = false;
   @state() displayLabel = '';
   @state() currentOption: ZnOption;
   @state() selectedOptions: ZnOption[] = [];
   @state() private valueHasChanged: boolean = false;
+  @state() private hasCheckboxPrefix: boolean = false;
 
   /** The name of the select, submitted as a name/value pair with form data. */
   @property() name = '';
@@ -142,73 +145,75 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
   }) defaultValue: string | string[] = '';
 
   /** The select's size. */
-  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
+  @property({reflect: true}) size: 'small' | 'medium' | 'large' = 'medium';
 
   /** Placeholder text to show as a hint when the select is empty. */
   @property() placeholder = '';
 
   /** Allows more than one option to be selected. */
-  @property({ type: Boolean, reflect: true }) multiple = false;
+  @property({type: Boolean, reflect: true}) multiple = false;
 
   /** Max number of options that can be selected when `multiple` is true. Set to 0 to allow unlimited selections. */
-  @property({ attribute: 'max-options', type: Number }) maxOptions = 0;
+  @property({attribute: 'max-options', type: Number}) maxOptions = 0;
 
   /**
    * The maximum number of selected options to show when `multiple` is true. After the maximum, "+n" will be shown to
    * indicate the number of additional items that are selected. Set to 0 to remove the limit.
    */
-  @property({ attribute: 'max-options-visible', type: Number }) maxOptionsVisible = 3;
+  @property({attribute: 'max-options-visible', type: Number}) maxOptionsVisible = 3;
 
   /** Disables the select control. */
-  @property({ type: Boolean, reflect: true }) disabled = false;
+  @property({type: Boolean, reflect: true}) disabled = false;
 
   /** Adds a clear button when the select is not empty. */
-  @property({ type: Boolean }) clearable = false;
+  @property({type: Boolean}) clearable = false;
 
   /**
    * Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can
    * use the `show()` and `hide()` methods and this attribute will reflect the select's open state.
    */
-  @property({ type: Boolean, reflect: true }) open = false;
+  @property({type: Boolean, reflect: true}) open = false;
 
   /**
    * Enable this option to prevent the listbox from being clipped when the component is placed inside a container with
    * `overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
    */
-  @property({ type: Boolean }) hoist = false;
+  @property({type: Boolean}) hoist = false;
 
   /** Draws a pill-style select with rounded edges. */
-  @property({ type: Boolean, reflect: true }) pill = false;
+  @property({type: Boolean, reflect: true}) pill = false;
 
   /** The select's label. If you need to display HTML, use the `label` slot instead. */
   @property() label = '';
 
   /** Text that appears in a tooltip next to the label. If you need to display HTML in the tooltip, use the `label-tooltip` slot instead. */
-  @property({ attribute: 'label-tooltip' }) labelTooltip = '';
+  @property({attribute: 'label-tooltip'}) labelTooltip = '';
 
   /** Text that appears above the input, on the right, to add additional context. If you need to display HTML in this text, use the `context-note` slot instead. */
-  @property({ attribute: 'context-note' }) contextNote = '';
+  @property({attribute: 'context-note'}) contextNote = '';
 
   /**
    * The preferred placement of the selects menu. Note that the actual placement may vary as needed to keep the listbox
    * inside the viewport.
    */
-  @property({ reflect: true }) placement: 'top' | 'bottom' = 'bottom';
+  @property({reflect: true}) placement: 'top' | 'bottom' = 'bottom';
 
   /** The select's help text. If you need to display HTML, use the `help-text` slot instead. */
-  @property({ attribute: 'help-text' }) helpText = '';
+  @property({attribute: 'help-text'}) helpText = '';
 
   /**
    * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
    * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
    * the same document or shadow root for this to work.
    */
-  @property({ reflect: true }) form: string;
+  @property({reflect: true}) form: string;
 
   /** The select's required attribute. */
-  @property({ type: Boolean, reflect: true }) required = false;
+  @property({type: Boolean, reflect: true}) required = false;
 
-  @property({ attribute: 'cache-key' }) cacheKey: string = "";
+  @property({attribute: 'cache-key'}) cacheKey: string = "";
+
+  @property({type: Boolean, attribute: 'trigger-submit'}) triggerSubmit = false;
 
   /**
    * A function that customizes the tags to be rendered when multiple=true. The first argument is the option, the second
@@ -266,6 +271,15 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
     }
   }
 
+  private updateHasCheckboxPrefix() {
+    try {
+      const assigned = this.prefixSlot?.assignedElements({flatten: true}) || [];
+      this.hasCheckboxPrefix = assigned.some(el => el.tagName === 'ZN-CHECKBOX');
+    } catch {
+      this.hasCheckboxPrefix = false;
+    }
+  }
+
   private addOpenListeners() {
     const root = this.getRootNode();
     root.addEventListener('focusin', this.handleDocumentFocusIn);
@@ -278,7 +292,7 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
       this.closeWatcher.onclose = () => {
         if (this.open) {
           this.hide();
-          this.displayInput.focus({ preventScroll: true });
+          this.displayInput.focus({preventScroll: true});
         }
       };
     }
@@ -330,7 +344,7 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
       event.preventDefault();
       event.stopPropagation();
       this.hide();
-      this.displayInput.focus({ preventScroll: true });
+      this.displayInput.focus({preventScroll: true});
     }
 
     // Handle enter and space. When pressing space, we allow for type to select behaviors so if there's anything in the
@@ -362,7 +376,7 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
 
         if (!this.multiple) {
           this.hide();
-          this.displayInput.focus({ preventScroll: true });
+          this.displayInput.focus({preventScroll: true});
         }
       }
 
@@ -463,13 +477,15 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
 
     // not the keyboard_arrow_down icon
     const isExpandIcon = path.some(el => el instanceof Element && el.classList.contains('select__expand-icon'));
+    // if click is inside the prefix area (e.g. checkbox), don't toggle the select
+    const inPrefix = path.some(el => el instanceof Element && el.classList.contains('select__prefix'));
     // Ignore disabled controls and clicks on tags (remove buttons)
-    if ((this.disabled || isIcon) && !isExpandIcon) {
+    if (((this.disabled || isIcon) && !isExpandIcon) || inPrefix) {
       return;
     }
 
     event.preventDefault();
-    this.displayInput.focus({ preventScroll: true });
+    this.displayInput.focus({preventScroll: true});
     this.open = !this.open;
   }
 
@@ -478,8 +494,14 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
       return;
     }
 
-    event.stopPropagation();
-    this.handleDocumentKeyDown(event);
+    // If keydown originated from within the prefix (e.g. checkbox)
+    const path = event.composedPath();
+    const inPrefix = path.some(el => el instanceof Element && (el as Element).classList?.contains('select__prefix'));
+
+    if (!inPrefix) {
+      event.stopPropagation();
+      this.handleDocumentKeyDown(event);
+    }
   }
 
   private handleClearClick(event: MouseEvent) {
@@ -487,7 +509,7 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
 
     if (this.value !== '') {
       this.setSelectedOptions([]);
-      this.displayInput.focus({ preventScroll: true });
+      this.displayInput.focus({preventScroll: true});
 
       // Emit after update
       this.updateComplete.then(() => {
@@ -526,7 +548,7 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
       }
 
       // Set focus after updating so the value is announced by screen readers
-      this.updateComplete.then(() => this.displayInput.focus({ preventScroll: true }));
+      this.updateComplete.then(() => this.displayInput.focus({preventScroll: true}));
 
       if (this.value !== oldValue) {
         // Emit after updating
@@ -538,7 +560,11 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
 
       if (!this.multiple) {
         this.hide();
-        this.displayInput.focus({ preventScroll: true });
+        this.displayInput.focus({preventScroll: true});
+      }
+
+      if (this.triggerSubmit) {
+        this.formControlController.submit();
       }
     }
   }
@@ -745,9 +771,11 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
         conditionalSelect.dispatchEvent(new Event('zn-input'));
       });
     }
+
+    this.updateHasCheckboxPrefix();
   }
 
-  @watch('disabled', { waitUntilFirstUpdate: true })
+  @watch('disabled', {waitUntilFirstUpdate: true})
   handleDisabledChange() {
     // Close the listbox when the control is disabled
     if (this.disabled) {
@@ -768,7 +796,7 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
     }
   }
 
-  @watch(['defaultValue', 'value'], { waitUntilFirstUpdate: true })
+  @watch(['defaultValue', 'value'], {waitUntilFirstUpdate: true})
   handleValueChange() {
     if (!this.valueHasChanged) {
       const cachedValueHasChanged = this.valueHasChanged;
@@ -784,7 +812,7 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
     this.setSelectedOptions(allOptions.filter(el => value.includes(el.value)));
   }
 
-  @watch('open', { waitUntilFirstUpdate: true })
+  @watch('open', {waitUntilFirstUpdate: true})
   async handleOpenChange() {
     if (this.open && !this.disabled) {
       // Reset the current option
@@ -803,7 +831,7 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
         this.setCurrentOption(this.currentOption);
       });
 
-      const { keyframes, options } = getAnimation(this, 'select.show', { dir: this.localize.dir() });
+      const {keyframes, options} = getAnimation(this, 'select.show', {dir: this.localize.dir()});
       await animateTo(this.popup.popup, keyframes, options);
 
       // Make sure the current option is scrolled into view (required for Safari)
@@ -818,7 +846,7 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
       this.removeOpenListeners();
 
       await stopAnimations(this);
-      const { keyframes, options } = getAnimation(this, 'select.hide', { dir: this.localize.dir() });
+      const {keyframes, options} = getAnimation(this, 'select.hide', {dir: this.localize.dir()});
       await animateTo(this.popup.popup, keyframes, options);
       this.listbox.hidden = true;
       this.popup.active = false;
@@ -942,7 +970,8 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
               'select--bottom': this.placement === 'bottom',
               'select--small': this.size === 'small',
               'select--medium': this.size === 'medium',
-              'select--large': this.size === 'large'
+              'select--large': this.size === 'large',
+              'select--has-checkbox-prefix': this.hasCheckboxPrefix
             })}
             placement=${this.placement}
             strategy=${this.hoist ? 'fixed' : 'absolute'}
@@ -957,7 +986,10 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
               slot="anchor"
               @keydown=${this.handleComboboxKeyDown}
               @mousedown=${this.handleComboboxMouseDown}>
-              <slot part="prefix" name="prefix" class="select__prefix"></slot>
+              <slot part="prefix"
+                    name="prefix"
+                    class="select__prefix"
+                    @slotchange=${() => this.updateHasCheckboxPrefix()}></slot>
 
               <input
                 part="display-input"
@@ -1049,16 +1081,16 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
 
 setDefaultAnimation('select.show', {
   keyframes: [
-    { opacity: 0, scale: 0.9 },
-    { opacity: 1, scale: 1 }
+    {opacity: 0, scale: 0.9},
+    {opacity: 1, scale: 1}
   ],
-  options: { duration: 100, easing: 'ease' }
+  options: {duration: 100, easing: 'ease'}
 });
 
 setDefaultAnimation('select.hide', {
   keyframes: [
-    { opacity: 1, scale: 1 },
-    { opacity: 0, scale: 0.9 }
+    {opacity: 1, scale: 1},
+    {opacity: 0, scale: 0.9}
   ],
-  options: { duration: 100, easing: 'ease' }
+  options: {duration: 100, easing: 'ease'}
 });

package/src/components/select/select.scss

@@ -48,6 +48,14 @@
   var(--zn-transition-fast) background-color;
 }
 
+/* Prefix area: allow a leading control (e.g., checkbox) full-height */
+.select__prefix {
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+  height: 100%;
+}
+
 .select__display-input {
   position: relative;
   width: 100%;
@@ -175,6 +183,10 @@
   padding-inline: var(--zn-input-spacing-medium);
 }
 
+.select--has-checkbox-prefix.select--medium .select__combobox {
+  padding-inline-start: 0;
+}
+
 .select--medium .select__clear {
   margin-inline-start: var(--zn-input-spacing-medium);
 }
@@ -200,6 +212,10 @@
   padding-inline: var(--zn-input-spacing-large);
 }
 
+.select--has-checkbox-prefix.select--large .select__combobox {
+  padding-inline-start: 0;
+}
+
 .select--large .select__clear {
   margin-inline-start: var(--zn-input-spacing-large);
 }
@@ -241,6 +257,11 @@
   color: var(--zn-input-icon-color);
 }
 
+/* When a checkbox is used in the prefix, remove left padding so the prefix joins flush */
+.select--has-checkbox-prefix.select--standard .select__combobox {
+  padding-inline-start: 0;
+}
+
 /* Clear button */
 .select__clear {
   display: inline-flex;