@descope/web-components-ui 1.0.251 → 1.0.253

package/dist/index.esm.js

@@ -3592,6 +3592,7 @@ const {
   inputElement: inputElement$1,
   placeholder: placeholder$1,
   toggle: toggle$1,
+  clearButton: clearButton$1,
   label: label$5,
   requiredIndicator: requiredIndicator$5,
   helperText: helperText$4,
@@ -3602,6 +3603,7 @@ const {
   inputElement: { selector: 'input' },
   placeholder: { selector: '> input:placeholder-shown' },
   toggle: { selector: '::part(toggle-button)' },
+  clearButton: { selector: '::part(clear-button)' },
   label: { selector: '::part(label)' },
   requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
   helperText: { selector: '::part(helper-text)' },
@@ -3630,9 +3632,18 @@ const ComboBoxClass = compose(
       labelRequiredIndicator: { ...requiredIndicator$5, property: 'content' },
       inputValueTextColor: { ...inputField$3, property: 'color' },
       inputPlaceholderTextColor: { ...placeholder$1, property: 'color' },
-      inputDropdownButtonCursor: { ...toggle$1, property: 'cursor' },
-      inputDropdownButtonColor: { ...toggle$1, property: 'color' },
-      inputDropdownButtonSize: { ...toggle$1, property: 'font-size' },
+      inputDropdownButtonCursor: [
+        { ...toggle$1, property: 'cursor' },
+        { ...clearButton$1, property: 'cursor' },
+      ],
+      inputDropdownButtonColor: [
+        { ...toggle$1, property: 'color' },
+        { ...clearButton$1, property: 'color' },
+      ],
+      inputDropdownButtonSize: [
+        { ...toggle$1, property: 'font-size' },
+        { ...clearButton$1, property: 'font-size' },
+      ],
       inputDropdownButtonOffset: [
         { ...toggle$1, property: 'margin-right' },
         { ...toggle$1, property: 'margin-left' },
@@ -3651,6 +3662,9 @@ const ComboBoxClass = compose(
       // for that to work, because ComboBox is not available
       // at this time.
       overlayBackground: { property: () => ComboBoxClass.cssVarList.overlay.backgroundColor },
+      overlayTextColor: {
+        property: () => ComboBoxClass.cssVarList.overlay.textColor,
+      },
       overlayBorder: { property: () => ComboBoxClass.cssVarList.overlay.border },
       overlayFontSize: { property: () => ComboBoxClass.cssVarList.overlay.fontSize },
       overlayFontFamily: { property: () => ComboBoxClass.cssVarList.overlay.fontFamily },
@@ -3674,6 +3688,7 @@ const ComboBoxClass = compose(
       margin: { selector: 'vaadin-combo-box-overlay' },
       cursor: { selector: 'vaadin-combo-box-item' },
       fontFamily: { selector: 'vaadin-combo-box-item' },
+      textColor: { selector: 'vaadin-combo-box-item', property: 'color' },
       fontSize: { selector: 'vaadin-combo-box-item' },
       itemBoxShadow: { selector: 'vaadin-combo-box-item', property: 'box-shadow' },
       itemPaddingInlineStart: {
@@ -7453,6 +7468,10 @@ const componentName$4 = getComponentName('multi-select-combo-box');
 
 const multiSelectComboBoxMixin = (superclass) =>
   class MultiSelectComboBoxMixinClass extends superclass {
+    static get observedAttributes() {
+      return ['readonly'];
+    }
+
     // eslint-disable-next-line class-methods-use-this
     #renderItem = ({ displayName, value, label }) => {
       return `<span data-name="${label}" data-id="${value}">${displayName || label}</span>`;
@@ -7774,6 +7793,26 @@ const multiSelectComboBoxMixin = (superclass) =>
     get value() {
       return this.#value;
     }
+
+    attributeChangedCallback(attrName, oldValue, newValue) {
+      super.attributeChangedCallback?.(attrName, oldValue, newValue);
+
+      if (attrName === 'readonly') {
+        this.onReadOnlyChange(newValue !== null && newValue === 'true');
+      }
+    }
+
+    onReadOnlyChange(val) {
+      if (val) {
+        this.baseElement?.shadowRoot
+          ?.querySelector('vaadin-multi-select-combo-box-internal')
+          ?.setAttribute('inert', val);
+      } else {
+        this.baseElement?.shadowRoot
+          ?.querySelector('vaadin-multi-select-combo-box-internal')
+          ?.removeAttribute('inert');
+      }
+    }
   };
 
 const {
@@ -7782,6 +7821,7 @@ const {
   inputElement,
   placeholder,
   toggle,
+  clearButton,
   label,
   requiredIndicator,
   helperText,
@@ -7796,6 +7836,7 @@ const {
   inputElement: { selector: 'input' },
   placeholder: { selector: '> input:placeholder-shown' },
   toggle: { selector: '::part(toggle-button)' },
+  clearButton: { selector: '::part(clear-button)' },
   label: { selector: '::part(label)' },
   requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
   helperText: { selector: '::part(helper-text)' },
@@ -7833,9 +7874,18 @@ const MultiSelectComboBoxClass = compose(
       labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
       inputValueTextColor: { ...inputField, property: 'color' },
       inputPlaceholderTextColor: { ...placeholder, property: 'color' },
-      inputDropdownButtonCursor: { ...toggle, property: 'cursor' },
-      inputDropdownButtonColor: { ...toggle, property: 'color' },
-      inputDropdownButtonSize: { ...toggle, property: 'font-size' },
+      inputDropdownButtonCursor: [
+        { ...toggle, property: 'cursor' },
+        { ...clearButton, property: 'cursor' },
+      ],
+      inputDropdownButtonColor: [
+        { ...toggle, property: 'color' },
+        { ...clearButton, property: 'color' },
+      ],
+      inputDropdownButtonSize: [
+        { ...toggle, property: 'font-size' },
+        { ...clearButton, property: 'font-size' },
+      ],
       inputDropdownButtonOffset: [
         { ...toggle, property: 'margin-right' },
         { ...toggle, property: 'margin-left' },
@@ -7867,6 +7917,9 @@ const MultiSelectComboBoxClass = compose(
       overlayBackground: {
         property: () => MultiSelectComboBoxClass.cssVarList.overlay.backgroundColor,
       },
+      overlayTextColor: {
+        property: () => MultiSelectComboBoxClass.cssVarList.overlay.textColor,
+      },
       overlayBorder: { property: () => MultiSelectComboBoxClass.cssVarList.overlay.border },
       overlayFontSize: { property: () => MultiSelectComboBoxClass.cssVarList.overlay.fontSize },
       overlayFontFamily: { property: () => MultiSelectComboBoxClass.cssVarList.overlay.fontFamily },
@@ -7892,6 +7945,7 @@ const MultiSelectComboBoxClass = compose(
       margin: { selector: 'vaadin-multi-select-combo-box-overlay' },
       cursor: { selector: 'vaadin-multi-select-combo-box-item' },
       fontFamily: { selector: 'vaadin-multi-select-combo-box-item' },
+      textColor: { selector: 'vaadin-multi-select-combo-box-item', property: 'color' },
       fontSize: { selector: 'vaadin-multi-select-combo-box-item' },
       itemBoxShadow: { selector: 'vaadin-multi-select-combo-box-item', property: 'box-shadow' },
       itemPaddingInlineStart: {
@@ -7940,6 +7994,10 @@ const MultiSelectComboBoxClass = compose(
       align-self: center;
 			box-sizing: border-box;
 		}
+		vaadin-multi-select-combo-box[readonly] [slot="input"] {
+      flex-grow: 1;
+      flex-basis: 4em;
+		}
 
 		::part(input-field) {
       padding: 0;
@@ -9438,7 +9496,7 @@ const comboBox = {
   [vars$e.inputBackgroundColor]: refs.backgroundColor,
   [vars$e.inputHorizontalPadding]: refs.horizontalPadding,
   [vars$e.inputHeight]: refs.inputHeight,
-  [vars$e.inputDropdownButtonColor]: globalRefs$7.colors.surface.contrast,
+  [vars$e.inputDropdownButtonColor]: globalRefs$7.colors.surface.main,
   [vars$e.inputDropdownButtonCursor]: 'pointer',
   [vars$e.inputDropdownButtonSize]: refs.toggleButtonSize,
   [vars$e.inputDropdownButtonOffset]: globalRefs$7.spacing.xs,
@@ -9454,6 +9512,8 @@ const comboBox = {
   [vars$e.overlayFontFamily]: refs.fontFamily,
   [vars$e.overlayCursor]: 'pointer',
   [vars$e.overlayItemBoxShadow]: 'none',
+  [vars$e.overlayBackground]: refs.backgroundColor,
+  [vars$e.overlayTextColor]: refs.valueTextColor,
 
   // Overlay direct theme:
   [vars$e.overlay.minHeight]: '400px',
@@ -9951,14 +10011,14 @@ const multiSelectComboBox = {
   [vars$2.inputHorizontalPadding]: refs.horizontalPadding,
   [vars$2.inputVerticalPadding]: refs.verticalPadding,
   [vars$2.inputHeight]: refs.inputHeight,
-  [vars$2.inputDropdownButtonColor]: globalRefs$1.colors.surface.contrast,
+  [vars$2.inputDropdownButtonColor]: globalRefs$1.colors.surface.main,
   [vars$2.inputDropdownButtonCursor]: 'pointer',
   [vars$2.inputDropdownButtonSize]: refs.toggleButtonSize,
   [vars$2.inputDropdownButtonOffset]: globalRefs$1.spacing.xs,
   [vars$2.overlayItemPaddingInlineStart]: globalRefs$1.spacing.xs,
   [vars$2.overlayItemPaddingInlineEnd]: globalRefs$1.spacing.lg,
   [vars$2.chipFontSize]: refs.chipFontSize,
-  [vars$2.chipTextColor]: refs.valueTextColor,
+  [vars$2.chipTextColor]: globalRefs$1.colors.surface.contrast,
   [vars$2.chipBackgroundColor]: globalRefs$1.colors.surface.main,
 
   _readonly: {
@@ -9970,6 +10030,8 @@ const multiSelectComboBox = {
   [vars$2.overlayFontFamily]: refs.fontFamily,
   [vars$2.overlayCursor]: 'pointer',
   [vars$2.overlayItemBoxShadow]: 'none',
+  [vars$2.overlayBackground]: refs.backgroundColor,
+  [vars$2.overlayTextColor]: refs.valueTextColor,
 
   // Overlay direct theme:
   [vars$2.overlay.minHeight]: '400px',