@descope/web-components-ui 1.0.273 → 1.0.274

package/dist/cjs/index.cjs.js

@@ -358,6 +358,7 @@ const createHelperVars = (theme, prefix) => {
   return [res.theme, res.useVars, res.vars];
 };
 
+// TODO: fix generated colors strategy
 const genDark = (c, percentage = 0.5) => c.darken(percentage).hex();
 const genLight = (c, percentage = 0.5) => c.lighten(percentage).hex();
 const genContrast = (c, percentage = 0.9) => {
@@ -375,6 +376,7 @@ const genColor = (color) => {
     main: mainColor.hex(),
     dark: color.dark || genDark(mainColor),
     light: color.light || genLight(mainColor),
+    highlight: color.highlight || genLight(mainColor),
     contrast: color.contrast || genContrast(mainColor),
   };
 };
@@ -393,14 +395,40 @@ const direction = 'ltr';
 
 const colors = genColors({
   surface: {
-    main: 'lightgray',
-    light: '#fff',
-    dark: '#000',
-  },
-  primary: '#006af5',
-  secondary: '#7D14EB',
-  success: 'green',
-  error: '#e21d12',
+    main: '#ffffff',
+    dark: '#636c74',
+    light: '#cfd3d7',
+    highlight: '#f4f5f6',
+    contrast: '#181a1c',
+  },
+  primary: {
+    main: '#006af5',
+    dark: '#004094',
+    light: '#71aeff',
+    highlight: '#f0f6ff',
+    contrast: '#ffffff',
+  },
+  secondary: {
+    main: '#802ed6',
+    dark: '#6410bc',
+    light: '#be89f5',
+    highlight: '#ede7f6',
+    contrast: '#ffffff',
+  },
+  success: {
+    main: '#008000',
+    dark: '#005700',
+    light: '#8bc38b',
+    highlight: '#f5faf5',
+    contrast: '#ffffff',
+  },
+  error: {
+    main: '#e21d12',
+    dark: '#b3170f',
+    light: '#f4807a',
+    highlight: '#fef1f1',
+    contrast: '#ffffff',
+  },
 });
 
 const fonts = {
@@ -2566,15 +2594,15 @@ loadingIndicatorStyles = `
 	}
 `;
 
-const globalRefs$i = getThemeRefs(globals);
+const globalRefs$h = getThemeRefs(globals);
 const compVars$4 = ButtonClass.cssVarList;
 
 const mode = {
-  primary: globalRefs$i.colors.primary,
-  secondary: globalRefs$i.colors.secondary,
-  success: globalRefs$i.colors.success,
-  error: globalRefs$i.colors.error,
-  surface: globalRefs$i.colors.surface,
+  primary: globalRefs$h.colors.primary,
+  secondary: globalRefs$h.colors.secondary,
+  success: globalRefs$h.colors.success,
+  error: globalRefs$h.colors.error,
+  surface: globalRefs$h.colors.surface,
 };
 
 const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$F);
@@ -2582,15 +2610,15 @@ const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, c
 const button = {
   ...helperTheme$3,
 
-  [compVars$4.fontFamily]: globalRefs$i.fonts.font1.family,
+  [compVars$4.fontFamily]: globalRefs$h.fonts.font1.family,
 
   [compVars$4.cursor]: 'pointer',
   [compVars$4.hostHeight]: '3em',
   [compVars$4.hostWidth]: 'auto',
-  [compVars$4.hostDirection]: globalRefs$i.direction,
+  [compVars$4.hostDirection]: globalRefs$h.direction,
 
-  [compVars$4.borderRadius]: globalRefs$i.radius.sm,
-  [compVars$4.borderWidth]: globalRefs$i.border.xs,
+  [compVars$4.borderRadius]: globalRefs$h.radius.sm,
+  [compVars$4.borderWidth]: globalRefs$h.border.xs,
   [compVars$4.borderStyle]: 'solid',
   [compVars$4.borderColor]: 'transparent',
 
@@ -2633,10 +2661,10 @@ const button = {
   },
 
   _disabled: {
-    [helperVars$3.main]: globalRefs$i.colors.surface.main,
-    [helperVars$3.dark]: globalRefs$i.colors.surface.dark,
-    [helperVars$3.light]: globalRefs$i.colors.surface.light,
-    [helperVars$3.contrast]: globalRefs$i.colors.surface.light,
+    [helperVars$3.main]: globalRefs$h.colors.surface.light,
+    [helperVars$3.dark]: globalRefs$h.colors.surface.dark,
+    [helperVars$3.light]: globalRefs$h.colors.surface.light,
+    [helperVars$3.contrast]: globalRefs$h.colors.surface.main,
   },
 
   variant: {
@@ -2656,12 +2684,14 @@ const button = {
 
     outline: {
       [compVars$4.labelTextColor]: helperRefs$3.main,
-      [compVars$4.borderColor]: 'currentColor',
+      [compVars$4.borderColor]: helperRefs$3.main,
       _hover: {
         [compVars$4.labelTextColor]: helperRefs$3.dark,
+        [compVars$4.borderColor]: helperRefs$3.dark,
       },
       _active: {
         [compVars$4.labelTextColor]: helperRefs$3.main,
+        [compVars$4.borderColor]: helperRefs$3.main,
       },
     },
 
@@ -2672,13 +2702,13 @@ const button = {
         [compVars$4.labelTextDecoration]: 'underline',
       },
       _active: {
-        [compVars$4.labelTextColor]: helperRefs$3.dark,
+        [compVars$4.labelTextColor]: helperRefs$3.main,
       },
     },
   },
 
   _focused: {
-    [compVars$4.outlineColor]: globalRefs$i.colors.surface.main,
+    [compVars$4.outlineColor]: helperRefs$3.light,
   },
 };
 
@@ -2932,21 +2962,21 @@ const TextFieldClass = compose(
 );
 
 const componentName$D = getComponentName('input-wrapper');
-const globalRefs$h = getThemeRefs(globals);
+const globalRefs$g = getThemeRefs(globals);
 
 const [theme$1, refs, vars$w] = createHelperVars(
   {
-    labelTextColor: globalRefs$h.colors.surface.contrast,
-    valueTextColor: globalRefs$h.colors.surface.contrast,
-    placeholderTextColor: globalRefs$h.colors.surface.main,
+    labelTextColor: globalRefs$g.colors.surface.dark,
+    valueTextColor: globalRefs$g.colors.surface.contrast,
+    placeholderTextColor: globalRefs$g.colors.surface.dark,
     requiredIndicator: "'*'",
-    errorMessageTextColor: globalRefs$h.colors.error.main,
+    errorMessageTextColor: globalRefs$g.colors.error.main,
 
-    borderWidth: globalRefs$h.border.xs,
-    borderRadius: globalRefs$h.radius.xs,
+    borderWidth: globalRefs$g.border.xs,
+    borderRadius: globalRefs$g.radius.xs,
     borderColor: 'transparent',
 
-    outlineWidth: globalRefs$h.border.sm,
+    outlineWidth: globalRefs$g.border.sm,
     outlineStyle: 'solid',
     outlineColor: 'transparent',
     outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
@@ -2957,11 +2987,11 @@ const [theme$1, refs, vars$w] = createHelperVars(
     horizontalPadding: '0.5em',
     verticalPadding: '0.5em',
 
-    backgroundColor: globalRefs$h.colors.surface.light,
+    backgroundColor: globalRefs$g.colors.surface.main,
 
-    fontFamily: globalRefs$h.fonts.font1.family,
+    fontFamily: globalRefs$g.fonts.font1.family,
 
-    direction: globalRefs$h.direction,
+    direction: globalRefs$g.direction,
 
     overlayOpacity: '0.3',
 
@@ -2977,27 +3007,27 @@ const [theme$1, refs, vars$w] = createHelperVars(
     },
 
     _focused: {
-      outlineColor: globalRefs$h.colors.surface.main,
+      outlineColor: globalRefs$g.colors.surface.light,
       _invalid: {
-        outlineColor: globalRefs$h.colors.error.main,
+        outlineColor: globalRefs$g.colors.error.main,
       },
     },
 
     _bordered: {
-      outlineWidth: globalRefs$h.border.xs,
-      borderColor: globalRefs$h.colors.surface.main,
+      outlineWidth: globalRefs$g.border.xs,
+      borderColor: globalRefs$g.colors.surface.light,
       borderStyle: 'solid',
       _invalid: {
-        borderColor: globalRefs$h.colors.error.main,
+        borderColor: globalRefs$g.colors.error.main,
       },
     },
 
     _disabled: {
-      labelTextColor: globalRefs$h.colors.surface.main,
-      borderColor: globalRefs$h.colors.surface.main,
-      valueTextColor: globalRefs$h.colors.surface.dark,
-      placeholderTextColor: globalRefs$h.colors.surface.dark,
-      backgroundColor: globalRefs$h.colors.surface.light,
+      labelTextColor: globalRefs$g.colors.surface.light,
+      borderColor: globalRefs$g.colors.surface.light,
+      valueTextColor: globalRefs$g.colors.surface.light,
+      placeholderTextColor: globalRefs$g.colors.surface.light,
+      backgroundColor: globalRefs$g.colors.surface.main,
     },
   },
   componentName$D
@@ -3140,10 +3170,7 @@ const PasswordClass = compose(
       labelRequiredIndicator: { ...requiredIndicator$a, property: 'content' },
       errorMessageTextColor: { ...errorMessage$a, property: 'color' },
 
-      inputValueTextColor: [
-        { ...inputElement$2, property: 'color' },
-        { ...revealButtonIcon, property: 'color' },
-      ],
+      inputValueTextColor: { ...inputElement$2, property: 'color' },
       inputPlaceholderTextColor: { ...inputElementPlaceholder, property: 'color' },
 
       revealButtonOffset: [
@@ -3151,6 +3178,7 @@ const PasswordClass = compose(
         { ...revealButtonContainer, property: 'margin-left' },
       ],
       revealButtonSize: { ...revealButtonContainer, property: 'font-size' },
+      revealButtonColor: { ...revealButtonIcon, property: 'color' },
     },
   }),
   draggableMixin,
@@ -3217,7 +3245,7 @@ const PasswordClass = compose(
   })
 );
 
-const globalRefs$g = getThemeRefs(globals);
+const globalRefs$f = getThemeRefs(globals);
 const vars$u = PasswordClass.cssVarList;
 
 const password = {
@@ -3241,8 +3269,9 @@ const password = {
   [vars$u.inputOutlineStyle]: refs.outlineStyle,
   [vars$u.inputOutlineColor]: refs.outlineColor,
   [vars$u.inputOutlineOffset]: refs.outlineOffset,
-  [vars$u.revealButtonOffset]: globalRefs$g.spacing.md,
+  [vars$u.revealButtonOffset]: globalRefs$f.spacing.md,
   [vars$u.revealButtonSize]: refs.toggleButtonSize,
+  [vars$u.revealButtonColor]: refs.placeholderTextColor,
 };
 
 var password$1 = /*#__PURE__*/Object.freeze({
@@ -3464,7 +3493,6 @@ const TextAreaClass = compose(
   })
 );
 
-const globalRefs$f = getThemeRefs(globals);
 const vars$r = TextAreaClass.cssVarList;
 
 const textArea = {
@@ -3495,10 +3523,6 @@ const textArea = {
     center: { [vars$r.inputTextAlign]: 'center' },
   },
 
-  _disabled: {
-    [vars$r.inputBackgroundColor]: globalRefs$f.colors.surface.light,
-  },
-
   _readonly: {
     [vars$r.inputResizeType]: 'none',
   },
@@ -3912,7 +3936,7 @@ const switchToggle = {
   [vars$p.trackBorderStyle]: refs.borderStyle,
   [vars$p.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
   [vars$p.trackBorderColor]: refs.borderColor,
-  [vars$p.trackBackgroundColor]: 'none',
+  [vars$p.trackBackgroundColor]: refs.backgroundColor,
   [vars$p.trackBorderRadius]: globalRefs$e.radius.md,
   [vars$p.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
   [vars$p.trackHeight]: checkboxHeight,
@@ -3921,7 +3945,7 @@ const switchToggle = {
   [vars$p.knobRadius]: '50%',
   [vars$p.knobTopOffset]: '1px',
   [vars$p.knobLeftOffset]: knobMargin,
-  [vars$p.knobColor]: refs.valueTextColor,
+  [vars$p.knobColor]: refs.labelTextColor,
   [vars$p.knobTransitionDuration]: '0.3s',
 
   [vars$p.labelTextColor]: refs.labelTextColor,
@@ -3933,7 +3957,6 @@ const switchToggle = {
 
   _checked: {
     [vars$p.trackBorderColor]: refs.borderColor,
-    [vars$p.trackBackgroundColor]: refs.backgroundColor,
     [vars$p.knobLeftOffset]: `calc(100% - var(${vars$p.knobSize}) - ${knobMargin})`,
     [vars$p.knobColor]: refs.valueTextColor,
     [vars$p.knobTextColor]: refs.valueTextColor,
@@ -3941,7 +3964,7 @@ const switchToggle = {
 
   _disabled: {
     [vars$p.knobColor]: globalRefs$e.colors.surface.light,
-    [vars$p.trackBorderColor]: globalRefs$e.colors.surface.main,
+    [vars$p.trackBorderColor]: globalRefs$e.colors.surface.light,
     [vars$p.trackBackgroundColor]: globalRefs$e.colors.surface.main,
     [vars$p.labelTextColor]: refs.labelTextColor,
     _checked: {
@@ -4049,7 +4072,7 @@ const container = {
 
   [compVars$3.hostWidth]: '100%',
   [compVars$3.boxShadow]: 'none',
-  [compVars$3.backgroundColor]: globalRefs$d.colors.surface.light,
+  [compVars$3.backgroundColor]: globalRefs$d.colors.surface.main,
   [compVars$3.color]: globalRefs$d.colors.surface.contrast,
   [compVars$3.borderRadius]: '0px',
   [compVars$3.hostDirection]: globalRefs$d.direction,
@@ -4358,10 +4381,10 @@ const text$2 = {
 
   mode: {
     primary: {
-      [vars$k.textColor]: globalRefs$c.colors.primary.main,
+      [vars$k.textColor]: globalRefs$c.colors.surface.contrast,
     },
     secondary: {
-      [vars$k.textColor]: globalRefs$c.colors.secondary.main,
+      [vars$k.textColor]: globalRefs$c.colors.surface.dark,
     },
     error: {
       [vars$k.textColor]: globalRefs$c.colors.error.main,
@@ -4627,7 +4650,7 @@ const divider = {
   [compVars$2.flexDirection]: 'row',
   [compVars$2.alignSelf]: 'stretch',
   [compVars$2.hostWidth]: '100%',
-  [compVars$2.stripeColor]: globalRefs$a.colors.surface.main,
+  [compVars$2.stripeColor]: globalRefs$a.colors.surface.light,
   [compVars$2.stripeColorOpacity]: '0.5',
   [compVars$2.stripeHorizontalThickness]: helperRefs$1.thickness,
   [compVars$2.labelTextWidth]: 'fit-content',
@@ -5006,7 +5029,7 @@ const loaderLinear = {
   [vars$g.barColor]: globalRefs$9.colors.surface.contrast,
   [vars$g.barWidth]: '20%',
 
-  [vars$g.barBackgroundColor]: globalRefs$9.colors.surface.main,
+  [vars$g.barBackgroundColor]: globalRefs$9.colors.surface.light,
   [vars$g.barBorderRadius]: '4px',
 
   [vars$g.animationDuration]: '2s',
@@ -5504,7 +5527,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.main,
+  [vars$e.inputDropdownButtonColor]: globalRefs$7.colors.surface.dark,
   [vars$e.inputDropdownButtonCursor]: 'pointer',
   [vars$e.inputDropdownButtonSize]: refs.toggleButtonSize,
   [vars$e.inputDropdownButtonOffset]: globalRefs$7.spacing.xs,
@@ -7776,6 +7799,7 @@ class RawSelectItem extends createBaseClass({
 	`;
 
     forwardAttrs(this, this.baseElement, { includeAttrs: ['size', 'variant'] });
+    forwardAttrs(this.baseElement, this, { includeAttrs: ['focused', 'active'] });
   }
 
   handleFocus() {
@@ -7824,6 +7848,10 @@ const ButtonSelectionGroupItemClass = compose(
         selector: () => ButtonClass.componentName,
         property: ButtonClass.cssVarList.borderRadius,
       },
+      outlineColor: {
+        selector: () => ButtonClass.componentName,
+        property: ButtonClass.cssVarList.outlineColor,
+      },
     },
   }),
   draggableMixin,
@@ -7836,20 +7864,25 @@ const vars$8 = ButtonSelectionGroupItemClass.cssVarList;
 
 const buttonSelectionGroupItem = {
   [vars$8.hostDirection]: 'inherit',
-  [vars$8.backgroundColor]: globalRefs$6.colors.surface.light,
+  [vars$8.backgroundColor]: globalRefs$6.colors.surface.main,
   [vars$8.labelTextColor]: globalRefs$6.colors.surface.contrast,
-  [vars$8.borderColor]: globalRefs$6.colors.surface.main,
+  [vars$8.borderColor]: globalRefs$6.colors.surface.light,
   [vars$8.borderStyle]: 'solid',
   [vars$8.borderRadius]: globalRefs$6.radius.sm,
+  [vars$8.outlineColor]: 'transparent',
 
   _hover: {
-    [vars$8.backgroundColor]: '#f4f5f5', // can we take it from the palette?
+    [vars$8.backgroundColor]: globalRefs$6.colors.surface.highlight,
+  },
+
+  _focused: {
+    [vars$8.outlineColor]: globalRefs$6.colors.surface.light,
   },
 
   _selected: {
     [vars$8.borderColor]: globalRefs$6.colors.surface.contrast,
     [vars$8.backgroundColor]: globalRefs$6.colors.surface.contrast,
-    [vars$8.labelTextColor]: globalRefs$6.colors.surface.light,
+    [vars$8.labelTextColor]: globalRefs$6.colors.surface.main,
   },
 };
 
@@ -8540,7 +8573,7 @@ const globalRefs$4 = getThemeRefs(globals);
 const compVars = ModalClass.cssVarList;
 
 const modal = {
-  [compVars.overlayBackgroundColor]: globalRefs$4.colors.surface.light,
+  [compVars.overlayBackgroundColor]: globalRefs$4.colors.surface.main,
   [compVars.overlayShadow]: globalRefs$4.shadow.wide['2xl'],
   [compVars.overlayWidth]: '540px',
 };
@@ -8765,12 +8798,11 @@ const GridClass = compose(
       ],
       sortIndicatorsColor: { ...sortIndicators, property: 'color' },
       activeSortIndicator: { ...activeSortIndicator, property: 'color' },
-      inputBorderColor: { ...host$1, property: 'border-color' },
-      inputBorderWidth: { ...host$1, property: 'border-width' },
-      inputBorderStyle: { ...host$1, property: 'border-style' },
-      inputBorderRadius: { ...host$1, property: 'border-radius' },
+      borderColor: { ...host$1, property: 'border-color' },
+      borderWidth: { ...host$1, property: 'border-width' },
+      borderStyle: { ...host$1, property: 'border-style' },
+      borderRadius: { ...host$1, property: 'border-radius' },
       selectedBackgroundColor: { ...selectedRow, property: 'background-color' },
-      selectedTextColor: { ...selectedRow, property: 'color' },
       headerRowTextColor: { ...headerRowCell, property: 'color' },
       separatorColor: [
         { ...firstRow, property: 'border-bottom-color' },
@@ -8795,6 +8827,9 @@ const GridClass = compose(
       }
       vaadin-grid-cell-content {
         display: flex;
+      }
+      vaadin-grid::part(selected-row-cell) {
+        background-image: none;
       }
 		`,
     excludeAttrsSync: ['columns', 'tabindex'],
@@ -8810,28 +8845,28 @@ const grid = {
   [vars$4.hostHeight]: '100%',
   [vars$4.hostMinHeight]: '400px',
   [vars$4.fontWeight]: '400',
-  [vars$4.backgroundColor]: globalRefs$3.colors.surface.light,
+  [vars$4.backgroundColor]: globalRefs$3.colors.surface.main,
 
   [vars$4.fontSize]: refs.fontSize,
   [vars$4.fontFamily]: refs.fontFamily,
 
-  [vars$4.sortIndicatorsColor]: globalRefs$3.colors.surface.main,
+  [vars$4.sortIndicatorsColor]: globalRefs$3.colors.surface.light,
   [vars$4.activeSortIndicator]: globalRefs$3.colors.surface.dark,
-  [vars$4.resizeHandleColor]: globalRefs$3.colors.surface.main,
+  [vars$4.resizeHandleColor]: globalRefs$3.colors.surface.light,
 
-  [vars$4.inputBorderWidth]: refs.borderWidth,
-  [vars$4.inputBorderStyle]: refs.borderStyle,
-  [vars$4.inputBorderRadius]: refs.borderRadius,
-  [vars$4.inputBorderColor]: 'transparent',
+  [vars$4.borderWidth]: refs.borderWidth,
+  [vars$4.borderStyle]: refs.borderStyle,
+  [vars$4.borderRadius]: refs.borderRadius,
+  [vars$4.borderColor]: 'transparent',
 
   [vars$4.headerRowTextColor]: globalRefs$3.colors.surface.dark,
-  [vars$4.separatorColor]: globalRefs$3.colors.surface.main,
+  [vars$4.separatorColor]: globalRefs$3.colors.surface.light,
 
   [vars$4.valueTextColor]: globalRefs$3.colors.surface.contrast,
-  [vars$4.selectedBackgroundColor]: globalRefs$3.colors.primary.contrast,
+  [vars$4.selectedBackgroundColor]: globalRefs$3.colors.surface.highlight,
 
   _bordered: {
-    [vars$4.inputBorderColor]: refs.borderColor,
+    [vars$4.borderColor]: refs.borderColor,
   },
 };
 
@@ -9642,7 +9677,7 @@ const multiSelectComboBox = {
   [vars$2.inputHorizontalPadding]: refs.horizontalPadding,
   [vars$2.inputVerticalPadding]: refs.verticalPadding,
   [vars$2.inputHeight]: refs.inputHeight,
-  [vars$2.inputDropdownButtonColor]: globalRefs$1.colors.surface.main,
+  [vars$2.inputDropdownButtonColor]: globalRefs$1.colors.surface.dark,
   [vars$2.inputDropdownButtonCursor]: 'pointer',
   [vars$2.inputDropdownButtonSize]: refs.toggleButtonSize,
   [vars$2.inputDropdownButtonOffset]: globalRefs$1.spacing.xs,
@@ -9650,7 +9685,7 @@ const multiSelectComboBox = {
   [vars$2.overlayItemPaddingInlineEnd]: globalRefs$1.spacing.lg,
   [vars$2.chipFontSize]: refs.chipFontSize,
   [vars$2.chipTextColor]: globalRefs$1.colors.surface.contrast,
-  [vars$2.chipBackgroundColor]: globalRefs$1.colors.surface.main,
+  [vars$2.chipBackgroundColor]: globalRefs$1.colors.surface.light,
 
   _readonly: {
     [vars$2.inputDropdownButtonCursor]: 'default',
@@ -9761,7 +9796,7 @@ const badge = {
     default: {
       [vars$1.textColor]: globalRefs.colors.surface.dark,
       _bordered: {
-        [vars$1.borderColor]: globalRefs.colors.surface.main,
+        [vars$1.borderColor]: globalRefs.colors.surface.light,
       },
     },
     primary: {