@uh-design-system/component-library 1.4.0 → 1.5.0

package/dist/collection/components/01-base-components/ds-select/ds-select-native/ds-select-native.css

@@ -1,10 +1,10 @@
 :host {
   display: inline-block;
-  width: 100%;
+  width: var(--ds-select-narrow-width, 100%);
 }
 @media (min-width: 30rem) {
-  :not(:has(.ds-select__SPFJ1E--full-width)):host {
-    width: 20rem;
+  :not(:has(.ds-select__GqWYnG--full-width)):host {
+    width: var(--ds-select-wide-width, 20rem);
   }
 }
 :host > div {
@@ -13,118 +13,119 @@
   position: relative;
 }
 
-.ds-select__SPFJ1E-native, .ds-select__SPFJ1E-custom {
+.ds-select__GqWYnG-native, .ds-select__GqWYnG-custom {
   position: relative;
   display: flex;
   align-items: center;
-  border: var(--ds-borderWidth-thin) solid var(--ds-borderColor-default);
+  border: var(--ds-select-borderWidth, var(--ds-borderWidth-thin)) solid var(--ds-borderColor-default);
   background-color: var(--ds-bgColor-white);
   color: var(--ds-textColor-secondary);
   cursor: pointer;
   box-sizing: border-box;
-  height: 2.75rem;
+  height: var(--ds-select-height, 2.75rem);
   width: 100%;
 }
 
-.ds-select__SPFJ1E-native__dropdown-icon, .ds-select__SPFJ1E-custom__dropdown-icon {
+.ds-select__GqWYnG-native__dropdown-icon, .ds-select__GqWYnG-custom__dropdown-icon {
   cursor: pointer;
   align-items: center;
   align-self: stretch;
-  border-left: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-disabled-onLight);
+  border-left: var(--ds-select-dropdown-icon-border-left, var(--ds-borderWidth-hairline) solid var(--ds-borderColor-disabled-onLight));
   color: var(--ds-textColor-secondary);
   z-index: 2;
   pointer-events: none;
-  padding: 0 var(--ds-spacing-2xSmall);
+  padding: var(--ds-select-dropdown-icon-padding, 0 var(--ds-spacing-2xSmall));
 }
 
-.ds-select__SPFJ1E-custom-wrapper {
+.ds-select__GqWYnG-custom-wrapper {
   position: relative;
 }
 
-.ds-select__SPFJ1E-custom .ds-options__SPFJ1E {
+.ds-select__GqWYnG-custom .ds-options__GqWYnG {
   display: block;
 }
-.ds-select__SPFJ1E-custom-input-container {
+.ds-select__GqWYnG-custom-input-container {
   display: flex;
   position: relative;
 }
-.ds-select__SPFJ1E-custom-input-container:has(.ds-select__SPFJ1E-custom__clear-button:hover) .ds-select__SPFJ1E-custom {
+.ds-select__GqWYnG-custom-input-container:has(.ds-select__GqWYnG-custom__clear-button:hover) .ds-select__GqWYnG-custom {
   background-color: var(--ds-bgColor-white-hover) !important;
 }
-.ds-select__SPFJ1E-custom:not(.ds-select__SPFJ1E-custom--open, .ds-select__SPFJ1E-custom--invalid, .ds-select__SPFJ1E-custom--disabled):hover {
+.ds-select__GqWYnG-custom:not(.ds-select__GqWYnG-custom--open, .ds-select__GqWYnG-custom--invalid, .ds-select__GqWYnG-custom--disabled):hover {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-select__SPFJ1E-custom:active:not(.ds-select__SPFJ1E-custom--open, .ds-select__SPFJ1E-custom--invalid, .ds-select__SPFJ1E-custom--disabled) {
+.ds-select__GqWYnG-custom:active:not(.ds-select__GqWYnG-custom--open, .ds-select__GqWYnG-custom--invalid, .ds-select__GqWYnG-custom--disabled) {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-select__SPFJ1E-custom--open, .ds-select__SPFJ1E-custom:focus-visible {
+.ds-select__GqWYnG-custom--open, .ds-select__GqWYnG-custom:focus-visible {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
   outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
-.ds-select__SPFJ1E-custom--open:not(.ds-select__SPFJ1E-custom--open--invalid, .ds-select__SPFJ1E-custom:focus-visible--invalid), .ds-select__SPFJ1E-custom:focus-visible:not(.ds-select__SPFJ1E-custom--open--invalid, .ds-select__SPFJ1E-custom:focus-visible--invalid) {
+.ds-select__GqWYnG-custom--open:not(.ds-select__GqWYnG-custom--open--invalid, .ds-select__GqWYnG-custom:focus-visible--invalid), .ds-select__GqWYnG-custom:focus-visible:not(.ds-select__GqWYnG-custom--open--invalid, .ds-select__GqWYnG-custom:focus-visible--invalid) {
   border-color: var(--ds-borderColor-primary);
 }
-.ds-select__SPFJ1E-custom--disabled {
+.ds-select__GqWYnG-custom--disabled {
   background-color: var(--ds-bgColor-disabled-onLight);
   border-color: var(--ds-borderColor-disabled-onLight);
   color: var(--ds-textColor-disabled-onLight);
   cursor: not-allowed;
 }
-.ds-select__SPFJ1E-custom--disabled .ds-select__SPFJ1E-custom__dropdown-icon {
+.ds-select__GqWYnG-custom--disabled .ds-select__GqWYnG-custom__dropdown-icon {
   color: var(--ds-textColor-disabled-onLight);
   border-left-color: var(--ds-borderColor-disabled-onLight);
   cursor: not-allowed;
 }
-.ds-select__SPFJ1E-custom--invalid {
+.ds-select__GqWYnG-custom--invalid {
   background-color: var(--ds-bgColor-danger);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-select__SPFJ1E-custom--invalid:not(.ds-select__SPFJ1E-custom--invalid--open, .ds-select__SPFJ1E-custom--invalid--disabled):active {
+.ds-select__GqWYnG-custom--invalid:not(.ds-select__GqWYnG-custom--invalid--open, .ds-select__GqWYnG-custom--invalid--disabled):active {
   background-color: var(--ds-bgColor-danger-active);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-select__SPFJ1E-custom--invalid:not(.ds-select__SPFJ1E-custom--invalid--disabled):hover {
+.ds-select__GqWYnG-custom--invalid:not(.ds-select__GqWYnG-custom--invalid--disabled):hover {
   background-color: var(--ds-bgColor-danger-hover);
 }
-.ds-select__SPFJ1E-custom__dropdown-icon--has-clear-button {
+.ds-select__GqWYnG-custom__dropdown-icon--has-clear-button {
   margin-left: var(--badge-container-offset, calc(24px + var(--ds-spacing-2xSmall) * 2 + 2px + 1px));
 }
-.ds-select__SPFJ1E-custom__selected-option {
+.ds-select__GqWYnG-custom__selected-option {
   display: flex;
   align-items: center;
   gap: var(--ds-spacing-2xSmall);
   flex: 1;
   font-family: var(--ds-fontFamily-body);
-  font-size: var(--ds-fontSize-16);
+  font-size: var(--ds-select-selected-option-font-size, var(--ds-fontSize-16));
+  font-weight: var(--ds-select-selected-option-font-weight, var(--ds-fontWeight-regular));
   color: inherit;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  padding-left: var(--ds-select-selected-option-padding, calc(var(--ds-spacing-xSmall) - 2px));
-  padding-right: var(--ds-spacing-xSmall);
+  padding-left: var(--ds-select-selected-option-padding, var(--ds-select-selected-option-padding, calc(var(--ds-spacing-xSmall) - 2px)));
+  padding-right: var(--ds-select-selected-option-padding, var(--ds-spacing-xSmall));
 }
-.ds-select__SPFJ1E-custom--has-icon .ds-select__SPFJ1E-custom__selected-option {
+.ds-select__GqWYnG-custom--has-icon .ds-select__GqWYnG-custom__selected-option {
   padding-left: var(--ds-select-selected-option-padding, calc(var(--ds-spacing-xSmall) - 2px));
   padding-right: var(--ds-spacing-2xSmall);
 }
-.ds-select__SPFJ1E-custom__selected-option__placeholder-icon {
+.ds-select__GqWYnG-custom__selected-option__placeholder-icon {
   font-size: var(--ds-fontSize-16);
 }
-.ds-select__SPFJ1E-custom__selected-option__text {
+.ds-select__GqWYnG-custom__selected-option__text {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   padding-left: 2px;
   color: var(--ds-textColor-default);
 }
-.ds-select__SPFJ1E-custom__selected-option__text--none-selected {
+.ds-select__GqWYnG-custom__selected-option__text--none-selected {
   color: var(--ds-textColor-secondary);
 }
-.ds-select__SPFJ1E-custom__selected-option__text--disabled {
+.ds-select__GqWYnG-custom__selected-option__text--disabled {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-select__SPFJ1E-custom input {
+.ds-select__GqWYnG-custom input {
   width: 100%;
   height: 100%;
   border: 0;
@@ -138,32 +139,32 @@
   padding-right: var(--ds-spacing-xSmall);
   text-overflow: ellipsis;
 }
-.ds-select__SPFJ1E-custom input::placeholder {
+.ds-select__GqWYnG-custom input::placeholder {
   color: var(--ds-textColor-secondary);
 }
-.ds-select__SPFJ1E-custom input:disabled {
+.ds-select__GqWYnG-custom input:disabled {
   cursor: not-allowed;
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-select__SPFJ1E-custom input:disabled::placeholder {
+.ds-select__GqWYnG-custom input:disabled::placeholder {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-select__SPFJ1E-custom input:focus {
+.ds-select__GqWYnG-custom input:focus {
   outline: none;
 }
-.ds-select__SPFJ1E-custom__clear-button {
+.ds-select__GqWYnG-custom__clear-button {
   position: absolute;
   right: calc(24px + var(--ds-spacing-2xSmall) * 2 + 2px + 1px);
   cursor: pointer;
 }
-.ds-select__SPFJ1E-custom__badge-container {
+.ds-select__GqWYnG-custom__badge-container {
   position: absolute;
   z-index: 2;
   pointer-events: none;
   right: calc(24px + var(--ds-spacing-2xSmall) * 2 + 2px + 1px + 40px + var(--ds-spacing-4xSmall) * 2);
   padding: 10px 0;
 }
-.ds-select__SPFJ1E-custom__options-container {
+.ds-select__GqWYnG-custom__options-container {
   display: none;
   position: absolute;
   top: 100%;
@@ -173,11 +174,11 @@
   border: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);
   background-color: var(--ds-bgColor-white);
 }
-.ds-select__SPFJ1E-custom__options-container--open {
+.ds-select__GqWYnG-custom__options-container--open {
   display: block;
   box-shadow: var(--ds-shadow-overlay);
 }
-.ds-select__SPFJ1E-custom__options-container__options {
+.ds-select__GqWYnG-custom__options-container__options {
   position: relative;
   display: block;
   width: 100%;
@@ -186,7 +187,7 @@
   z-index: 0;
   overflow: auto;
 }
-.ds-select__SPFJ1E-custom__options-container__options__inner {
+.ds-select__GqWYnG-custom__options-container__options__inner {
   position: relative;
   width: 100%;
   max-height: 20rem;
@@ -197,7 +198,7 @@
   padding: 0;
   margin: 0;
 }
-.ds-select__SPFJ1E-custom__options-container__options__inner__top-scrim, .ds-select__SPFJ1E-custom__options-container__options__inner__bottom-scrim {
+.ds-select__GqWYnG-custom__options-container__options__inner__top-scrim, .ds-select__GqWYnG-custom__options-container__options__inner__bottom-scrim {
   pointer-events: none;
   width: 100%;
   height: 2.75rem;
@@ -207,68 +208,73 @@
   z-index: 1;
   display: none;
 }
-.ds-select__SPFJ1E-custom__options-container__options__inner__top-scrim--visible, .ds-select__SPFJ1E-custom__options-container__options__inner__bottom-scrim--visible {
+.ds-select__GqWYnG-custom__options-container__options__inner__top-scrim--visible, .ds-select__GqWYnG-custom__options-container__options__inner__bottom-scrim--visible {
   display: block;
 }
-.ds-select__SPFJ1E-custom__options-container__options__inner__top-scrim {
+.ds-select__GqWYnG-custom__options-container__options__inner__top-scrim {
   top: 0;
   background: linear-gradient(to bottom, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%);
 }
-.ds-select__SPFJ1E-custom__options-container__options__inner__top-scrim--dark {
+.ds-select__GqWYnG-custom__options-container__options__inner__top-scrim--dark {
   height: calc(var(--ds-fontSize-14) * var(--ds-lineHeight-large) + 2 * var(--ds-spacing-2xSmall));
   background: none;
   margin-top: calc(-1 * (var(--ds-fontSize-14) * var(--ds-lineHeight-large) + 2 * var(--ds-spacing-2xSmall)));
   box-shadow: 0 -2px 7px var(--ds-overlay-black-50);
 }
-.ds-select__SPFJ1E-custom__options-container__options__inner__bottom-scrim {
+.ds-select__GqWYnG-custom__options-container__options__inner__bottom-scrim {
   bottom: 0;
   background: linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%);
 }
 
-.ds-select__SPFJ1E-native:not(.ds-select__SPFJ1E-native--invalid, .ds-select__SPFJ1E-native--disabled):hover {
+.ds-select__GqWYnG-native:not(.ds-select__GqWYnG-native--invalid, .ds-select__GqWYnG-native--disabled):hover {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-select__SPFJ1E-native:has(.ds-select__SPFJ1E-native__select:active):not(.ds-select__SPFJ1E-native--invalid, .ds-select__SPFJ1E-native--disabled) {
+.ds-select__GqWYnG-native:has(.ds-select__GqWYnG-native__select:active):not(.ds-select__GqWYnG-native--invalid, .ds-select__GqWYnG-native--disabled) {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-select__SPFJ1E-native:focus-within {
+.ds-select__GqWYnG-native:focus-within {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
   outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
-.ds-select__SPFJ1E-native--disabled {
+.ds-select__GqWYnG-native--disabled {
   background-color: var(--ds-bgColor-disabled-onLight);
   border-color: var(--ds-borderColor-disabled-onLight);
   color: var(--ds-textColor-disabled-onLight);
   cursor: not-allowed;
 }
-.ds-select__SPFJ1E-native--disabled .ds-select__SPFJ1E-native__dropdown-icon {
+.ds-select__GqWYnG-native--disabled .ds-select__GqWYnG-native__dropdown-icon {
   color: var(--ds-textColor-disabled-onLight);
   border-left-color: var(--ds-borderColor-disabled-onLight);
   cursor: not-allowed;
 }
-.ds-select__SPFJ1E-native--invalid {
+.ds-select__GqWYnG-native--invalid {
   background-color: var(--ds-bgColor-danger);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-select__SPFJ1E-native--invalid:not(.ds-select__SPFJ1E-native--invalid--disabled):has(.ds-select__SPFJ1E-native__select:active) {
+.ds-select__GqWYnG-native--invalid:not(.ds-select__GqWYnG-native--invalid--disabled):has(.ds-select__GqWYnG-native__select:active) {
   background-color: var(--ds-bgColor-danger-active);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-select__SPFJ1E-native--invalid:not(.ds-select__SPFJ1E-native--invalid--disabled):hover {
+.ds-select__GqWYnG-native--invalid:not(.ds-select__GqWYnG-native--invalid--disabled):hover {
   background-color: var(--ds-bgColor-danger-hover);
 }
-.ds-select__SPFJ1E-native__selected-text {
+.ds-select__GqWYnG-native__dropdown-icon {
+  color: var(--ds-select-selected-option-color, inherit);
+}
+.ds-select__GqWYnG-native__selected-text {
   flex: 1;
-  padding: 0 var(--ds-spacing-xSmall);
+  padding: 0 var(--ds-select-selected-option-padding, var(--ds-spacing-xSmall));
+  margin-right: var(--ds-select-selected-text-margin-right, 0);
   font-family: var(--ds-fontFamily-body);
-  font-size: var(--ds-fontSize-16);
-  color: inherit;
+  font-size: var(--ds-select-selected-option-font-size, var(--ds-fontSize-16));
+  font-weight: var(--ds-select-selected-option-font-weight, var(--ds-fontWeight-regular));
+  color: var(--ds-select-selected-option-color, inherit);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.ds-select__SPFJ1E-native__select {
+.ds-select__GqWYnG-native__select {
   position: absolute;
   top: 0;
   left: 0;
@@ -287,10 +293,10 @@
   color: inherit;
   flex: 1;
 }
-.ds-select__SPFJ1E-native__select::placeholder {
+.ds-select__GqWYnG-native__select::placeholder {
   color: var(--ds-textColor-secondary);
 }
-.ds-select__SPFJ1E-native__select:disabled {
+.ds-select__GqWYnG-native__select:disabled {
   background-color: var(--ds-bgColor-disabled-onLight);
   color: var(--ds-textColor-disabled-onLight);
   cursor: not-allowed;

package/dist/collection/components/01-base-components/ds-select/ds-select-native/ds-select-native.js

@@ -1,7 +1,7 @@
 import { h, Mixin } from "@stencil/core";
 import classNames from "classnames";
 import { declareComponentDependencies, transformTagName } from "../../../../utils/utils";
-import { inheritAriaAttributes, inheritAttributes } from "../../../../utils/attributes/attributes";
+import { inheritAttributes } from "../../../../utils/attributes/attributes";
 import { cx } from "../../../../utils/cx";
 import { ariaDeprecationFactory } from "../../../00-foundations/factories/ariaDeprecationFactory";
 import { atLeastOneOption } from "../../../../utils/controls/controlUtils";
@@ -17,18 +17,22 @@ export class DsSelectNative extends Mixin(ariaDeprecationFactory) {
     dsValidity;
     dsSubmitInvalid;
     dsId;
-    dsLabel;
+    dsLabel = '';
     dsPlaceholder;
     dsValue;
-    dsIcon;
+    dsIcon = '';
+    dsIconSize;
     dsName;
     dsForm;
     dsDisabled = false;
     dsErrorText;
     dsFullWidth = false;
     dsRequired = false;
+    dsAriaLabel;
     value = '';
-    inputValidityId = `${this.dsId}-input-validity`;
+    get inputValidityId() {
+        return `${this.dsId}-input-validity`;
+    }
     nativeSelectRef;
     get DsInputValidityTag() {
         return transformTagName('ds-input-validity', 'ds-select-native', this.el);
@@ -41,13 +45,13 @@ export class DsSelectNative extends Mixin(ariaDeprecationFactory) {
         this.value = this.dsValue || '';
         this.inheritedAttributes = {
             ...inheritAttributes(this, this.el),
-            ...inheritAriaAttributes(this.el, ['aria-controls']),
         };
     }
     componentDidLoad() {
         if (!this.nativeSelectRef)
             return;
-        this.nativeSelectRef.addEventListener('invalid', (e) => {
+        const selectRef = this.nativeSelectRef;
+        selectRef.addEventListener('invalid', (e) => {
             e.preventDefault();
             this.dsSubmitInvalid.emit({
                 flag: 'customError',
@@ -58,8 +62,8 @@ export class DsSelectNative extends Mixin(ariaDeprecationFactory) {
                 message: atLeastOneOption(),
             });
         });
-        this.nativeSelectRef.addEventListener('blur', () => {
-            const isValid = this.nativeSelectRef.validity.valid;
+        selectRef.addEventListener('blur', () => {
+            const isValid = selectRef.validity.valid;
             this.dsValidity.emit({
                 flag: isValid ? 'valid' : 'customError',
                 message: isValid ? '' : atLeastOneOption(),
@@ -93,22 +97,22 @@ export class DsSelectNative extends Mixin(ariaDeprecationFactory) {
         const baseClass = cx('ds-select');
         const nativeSelectClass = `${baseClass}-native`;
         const DsControlLabel = transformTagName('ds-control-label', 'ds-select-native', this.el);
-        const { ['aria-controls']: attrAriaControls, ['aria-describedby']: attrAriaDescribedby, ...restAttributes } = this.inheritedAttributes;
+        const { ['aria-describedby']: attrAriaDescribedby, ...restAttributes } = this.inheritedAttributes;
         const ariaDescribedby = this.dsAriaDescribedby ?? attrAriaDescribedby;
-        const ariaControls = this.dsAriaControls ?? attrAriaControls ?? `${this.dsId}-listbox`;
-        return (h("div", { key: 'a6151f2eb05db8596f5b2bf905bd3c86c6f037e2' }, h(DsControlLabel, { key: 'c7d3f6154dcefdb2bb6da5c1bf099b535aab047f', dsHtmlFor: this.dsId, dsLabel: this.dsLabel, dsRequired: this.dsRequired }, h("slot", { key: '3f23a69479ea9ecdb75779de2578c58ace1e0976', name: "label" })), h("div", { key: 'bde07705b0a3746c8651d1836ed3d1340eee5dc8', class: classNames(`${nativeSelectClass}`, {
+        const hasLabelSlot = !!this.el.querySelector('[slot="label"]');
+        return (h("div", { key: '4ce1e5ddc0672318697ad4b0548ee457cec06b67' }, (this.dsLabel || hasLabelSlot) && (h(DsControlLabel, { key: '76edd27f666762a39e257d3058cdf488407532d6', dsHtmlFor: this.dsId, dsLabel: this.dsLabel, dsRequired: this.dsRequired }, h("slot", { key: '473538fcc0aa5847138a1b3b5c2e5b668632e7da', name: "label" }))), h("div", { key: 'ba5477be60e7709b7dd93c3627e4d1b18dc69f57', class: classNames(`${nativeSelectClass}`, {
                 [`${baseClass}--full-width`]: this.dsFullWidth,
                 [`${nativeSelectClass}--disabled`]: this.dsDisabled,
                 [`${nativeSelectClass}--invalid`]: !!this.dsErrorText,
-            }) }, h("div", { key: '9e0006fb87aee8a6d7137570262c1c23abbe2a4e', class: `${nativeSelectClass}__selected-text`, "aria-hidden": "true" }, this.value ? this.nativeSelectRef?.selectedOptions[0]?.textContent || this.dsPlaceholder : this.dsPlaceholder), h("select", { key: 'd9f2b83a5d31d2411af500955dd18af5ab242702', ref: el => {
+            }) }, h("div", { key: '80c7b2f0dd80de0e1f75f685bc3078ca85314831', class: `${nativeSelectClass}__selected-text`, "aria-hidden": "true" }, this.value ? this.nativeSelectRef?.selectedOptions[0]?.textContent || this.dsPlaceholder : this.dsPlaceholder), h("select", { key: '8429dbcf31a4f697351e362a33963e6c4262de78', ref: el => {
                 this.nativeSelectRef = el;
                 if (el)
                     el.value = this.value;
-            }, id: this.dsId, name: this.dsName, form: this.dsForm, class: `${nativeSelectClass}__select`, disabled: this.dsDisabled, required: this.dsRequired, onChange: (event) => {
+            }, id: this.dsId, name: this.dsName, form: this.dsForm, class: `${nativeSelectClass}__select`, disabled: this.dsDisabled, required: this.dsRequired, "aria-label": this.dsAriaLabel, onChange: (event) => {
                 const target = event.target;
                 this.value = target.value;
                 this.dsChange.emit(target.value);
-            }, "aria-describedby": ariaDescribedby, "aria-controls": ariaControls, ...restAttributes }, h("option", { key: '9b1a4055f338a9c3640b0810c805afb21c48875b', value: "", disabled: true, style: { display: this.dsRequired ? 'none' : undefined }, selected: !this.value }, this.dsPlaceholder), h("slot", { key: 'fb773442e20b07260b3418aa714591bbf4df3875', name: "native" })), h(this.DsIconTag, { key: 'd9cdf30eae2de4eb38796a4f8ffeb0e4f770a614', class: `${nativeSelectClass}__dropdown-icon`, dsName: "keyboard_arrow_down" })), h(this.DsInputValidityTag, { key: '779101ea5d70873be46cde2d86a5e578224493e8', id: this.inputValidityId, dsText: this.dsErrorText, dsType: "error" })));
+            }, "aria-describedby": ariaDescribedby, ...restAttributes }, h("option", { key: 'b6f1411fa144bc901a4d8809fcf439c841c05f1b', value: "", disabled: true, style: { display: this.dsRequired ? 'none' : undefined }, selected: !this.value }, this.dsPlaceholder), h("slot", { key: '2aef453e4145dee8a1f5f7dd43853e3b8eace84d', name: "native" })), h(this.DsIconTag, { key: '7f8e5c544a5ca03f0872ddeff7433c12678e282e', class: `${nativeSelectClass}__dropdown-icon`, dsName: "keyboard_arrow_down", dsSize: this.dsIconSize })), h(this.DsInputValidityTag, { key: '3204a6e6ff7523145c2d3880c73bdbf687aca075', id: this.inputValidityId, dsText: this.dsErrorText, dsType: "error" })));
     }
     static get is() { return "ds-select-native"; }
     static get encapsulation() { return "scoped"; }
@@ -198,7 +202,8 @@ export class DsSelectNative extends Mixin(ariaDeprecationFactory) {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "ds-label"
+                "attribute": "ds-label",
+                "defaultValue": "''"
             },
             "dsPlaceholder": {
                 "type": "string",
@@ -255,7 +260,27 @@ export class DsSelectNative extends Mixin(ariaDeprecationFactory) {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "ds-icon"
+                "attribute": "ds-icon",
+                "defaultValue": "''"
+            },
+            "dsIconSize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon size to display inside the select."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-icon-size"
             },
             "dsName": {
                 "type": "string",
@@ -373,6 +398,25 @@ export class DsSelectNative extends Mixin(ariaDeprecationFactory) {
                 "reflect": false,
                 "attribute": "ds-required",
                 "defaultValue": "false"
+            },
+            "dsAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Aria label for the select element, used for accessibility."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-aria-label"
             }
         };
     }