@descope/web-components-ui 1.0.252 → 1.0.254

package/dist/cjs/index.cjs.js

@@ -2433,6 +2433,7 @@ const resetStyles = `
 	}
 	vaadin-button::part(label) {
 		padding: 0;
+    width: 100%;
 	}
 	vaadin-button::part(prefix) {
 		margin-left: 0;
@@ -2444,7 +2445,6 @@ const iconStyles = `
 	vaadin-button::part(prefix),
 	vaadin-button::part(label) {
 		display: flex;
-		justify-content: center;
 		align-items: center;
 	}
 `;
@@ -2485,6 +2485,7 @@ const ButtonClass = compose(
       labelTextColor: { property: 'color' },
       labelTextDecoration: { ...label$a, property: 'text-decoration' },
       labelSpacing: { ...label$a, property: 'gap' },
+      textAlign: { ...label$a, property: 'justify-content' },
     },
   }),
   clickableMixin,
@@ -2581,6 +2582,13 @@ const button = {
 
   [compVars$4.labelSpacing]: '0.25em',
 
+  [compVars$4.textAlign]: 'center', // default text align center
+  textAlign: {
+    right: { [compVars$4.textAlign]: 'right' },
+    left: { [compVars$4.textAlign]: 'left' },
+    center: { [compVars$4.textAlign]: 'center' },
+  },
+
   [compVars$4.verticalPadding]: '1em',
 
   [compVars$4.outlineWidth]: globals.border.sm,
@@ -3012,6 +3020,11 @@ const textField = {
   [vars$u.inputBackgroundColor]: refs.backgroundColor,
   [vars$u.inputHeight]: refs.inputHeight,
   [vars$u.inputHorizontalPadding]: refs.horizontalPadding,
+  textAlign: {
+    right: { [vars$u.inputTextAlign]: 'right' },
+    left: { [vars$u.inputTextAlign]: 'left' },
+    center: { [vars$u.inputTextAlign]: 'center' },
+  },
 };
 
 var textField$1 = /*#__PURE__*/Object.freeze({
@@ -3406,6 +3419,7 @@ const TextAreaClass = compose(
       inputOutlineWidth: { ...inputField$4, property: 'outline-width' },
       inputResizeType: { ...textArea$2, property: 'resize' },
       inputMinHeight: { ...textArea$2, property: 'min-height' },
+      inputTextAlign: { ...textArea$2, property: 'text-align' },
     },
   }),
   draggableMixin,
@@ -3461,6 +3475,11 @@ const textArea = {
   [vars$q.inputOutlineOffset]: refs.outlineOffset,
   [vars$q.inputResizeType]: 'vertical',
   [vars$q.inputMinHeight]: '5em',
+  textAlign: {
+    right: { [vars$q.inputTextAlign]: 'right' },
+    left: { [vars$q.inputTextAlign]: 'left' },
+    center: { [vars$q.inputTextAlign]: 'center' },
+  },
 
   _disabled: {
     [vars$q.inputBackgroundColor]: globalRefs$f.colors.surface.light,
@@ -5268,6 +5287,7 @@ const {
   inputElement: inputElement$1,
   placeholder: placeholder$1,
   toggle: toggle$1,
+  clearButton: clearButton$1,
   label: label$5,
   requiredIndicator: requiredIndicator$5,
   helperText: helperText$4,
@@ -5278,6 +5298,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)' },
@@ -5306,9 +5327,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' },
@@ -5327,6 +5357,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 },
@@ -5350,6 +5383,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: {
@@ -5434,7 +5468,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,
@@ -5450,6 +5484,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',
@@ -8938,6 +8974,10 @@ const componentName$3 = 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>`;
@@ -9259,6 +9299,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 {
@@ -9267,6 +9327,7 @@ const {
   inputElement,
   placeholder,
   toggle,
+  clearButton,
   label,
   requiredIndicator,
   helperText,
@@ -9281,6 +9342,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)' },
@@ -9318,9 +9380,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' },
@@ -9352,6 +9423,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 },
@@ -9377,6 +9451,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: {
@@ -9493,14 +9568,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: {
@@ -9512,6 +9587,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',