@descope/web-components-ui 1.0.161 → 1.0.162

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.esm.js CHANGED
@@ -5934,7 +5934,7 @@ const globals = {
5934
5934
  const vars$o = getThemeVars(globals);
5935
5935
 
5936
5936
  const globalRefs$b = getThemeRefs(globals);
5937
- const compVars$2 = ButtonClass.cssVarList;
5937
+ const compVars$3 = ButtonClass.cssVarList;
5938
5938
 
5939
5939
  const mode = {
5940
5940
  primary: globalRefs$b.colors.primary,
@@ -5944,7 +5944,7 @@ const mode = {
5944
5944
  surface: globalRefs$b.colors.surface,
5945
5945
  };
5946
5946
 
5947
- const [helperTheme$3, helperRefs$3, helperVars$2] = createHelperVars({ mode }, componentName$r);
5947
+ const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$r);
5948
5948
 
5949
5949
  const verticalPaddingRatio = 3;
5950
5950
  const horizontalPaddingRatio = 2;
@@ -5952,88 +5952,88 @@ const horizontalPaddingRatio = 2;
5952
5952
  const button = {
5953
5953
  ...helperTheme$3,
5954
5954
 
5955
- [compVars$2.fontFamily]: globalRefs$b.fonts.font1.family,
5955
+ [compVars$3.fontFamily]: globalRefs$b.fonts.font1.family,
5956
5956
 
5957
- [compVars$2.cursor]: 'pointer',
5958
- [compVars$2.hostHeight]: '3em',
5957
+ [compVars$3.cursor]: 'pointer',
5958
+ [compVars$3.hostHeight]: '3em',
5959
5959
 
5960
- [compVars$2.borderRadius]: globalRefs$b.radius.sm,
5961
- [compVars$2.borderWidth]: globalRefs$b.border.xs,
5962
- [compVars$2.borderStyle]: 'solid',
5963
- [compVars$2.borderColor]: 'transparent',
5960
+ [compVars$3.borderRadius]: globalRefs$b.radius.sm,
5961
+ [compVars$3.borderWidth]: globalRefs$b.border.xs,
5962
+ [compVars$3.borderStyle]: 'solid',
5963
+ [compVars$3.borderColor]: 'transparent',
5964
5964
 
5965
- [compVars$2.labelSpacing]: '0.25em',
5965
+ [compVars$3.labelSpacing]: '0.25em',
5966
5966
 
5967
- [compVars$2.verticalPadding]: `calc(var(${compVars$2.fontSize}) / ${verticalPaddingRatio})`,
5968
- [compVars$2.horizontalPadding]: `calc(var(${compVars$2.fontSize}) / ${horizontalPaddingRatio})`,
5967
+ [compVars$3.verticalPadding]: `calc(var(${compVars$3.fontSize}) / ${verticalPaddingRatio})`,
5968
+ [compVars$3.horizontalPadding]: `calc(var(${compVars$3.fontSize}) / ${horizontalPaddingRatio})`,
5969
5969
 
5970
- [compVars$2.outlineWidth]: globals.border.sm,
5971
- [compVars$2.outlineOffset]: '0px', // keep `px` unit for external calc
5972
- [compVars$2.outlineStyle]: 'solid',
5973
- [compVars$2.outlineColor]: 'transparent',
5970
+ [compVars$3.outlineWidth]: globals.border.sm,
5971
+ [compVars$3.outlineOffset]: '0px', // keep `px` unit for external calc
5972
+ [compVars$3.outlineStyle]: 'solid',
5973
+ [compVars$3.outlineColor]: 'transparent',
5974
5974
 
5975
5975
  size: {
5976
- xs: { [compVars$2.fontSize]: '12px' },
5977
- sm: { [compVars$2.fontSize]: '14px' },
5978
- md: { [compVars$2.fontSize]: '16px' },
5979
- lg: { [compVars$2.fontSize]: '18px' },
5976
+ xs: { [compVars$3.fontSize]: '12px' },
5977
+ sm: { [compVars$3.fontSize]: '14px' },
5978
+ md: { [compVars$3.fontSize]: '16px' },
5979
+ lg: { [compVars$3.fontSize]: '18px' },
5980
5980
  },
5981
5981
 
5982
5982
  _fullWidth: {
5983
- [compVars$2.hostWidth]: '100%',
5983
+ [compVars$3.hostWidth]: '100%',
5984
5984
  },
5985
5985
 
5986
5986
  _loading: {
5987
- [compVars$2.cursor]: 'wait',
5988
- [compVars$2.labelTextColor]: helperRefs$3.main,
5987
+ [compVars$3.cursor]: 'wait',
5988
+ [compVars$3.labelTextColor]: helperRefs$3.main,
5989
5989
  },
5990
5990
 
5991
5991
  variant: {
5992
5992
  contained: {
5993
- [compVars$2.labelTextColor]: helperRefs$3.contrast,
5994
- [compVars$2.backgroundColor]: helperRefs$3.main,
5993
+ [compVars$3.labelTextColor]: helperRefs$3.contrast,
5994
+ [compVars$3.backgroundColor]: helperRefs$3.main,
5995
5995
  _hover: {
5996
- [compVars$2.backgroundColor]: helperRefs$3.dark,
5996
+ [compVars$3.backgroundColor]: helperRefs$3.dark,
5997
5997
  _loading: {
5998
- [compVars$2.backgroundColor]: helperRefs$3.main,
5998
+ [compVars$3.backgroundColor]: helperRefs$3.main,
5999
5999
  },
6000
6000
  },
6001
6001
  _active: {
6002
- [compVars$2.backgroundColor]: helperRefs$3.main,
6002
+ [compVars$3.backgroundColor]: helperRefs$3.main,
6003
6003
  },
6004
6004
  },
6005
6005
 
6006
6006
  outline: {
6007
- [compVars$2.labelTextColor]: helperRefs$3.main,
6008
- [compVars$2.borderColor]: 'currentColor',
6007
+ [compVars$3.labelTextColor]: helperRefs$3.main,
6008
+ [compVars$3.borderColor]: 'currentColor',
6009
6009
  _hover: {
6010
- [compVars$2.labelTextColor]: helperRefs$3.dark,
6010
+ [compVars$3.labelTextColor]: helperRefs$3.dark,
6011
6011
  },
6012
6012
  _active: {
6013
- [compVars$2.labelTextColor]: helperRefs$3.main,
6013
+ [compVars$3.labelTextColor]: helperRefs$3.main,
6014
6014
  },
6015
6015
  },
6016
6016
 
6017
6017
  link: {
6018
- [compVars$2.labelTextColor]: helperRefs$3.main,
6018
+ [compVars$3.labelTextColor]: helperRefs$3.main,
6019
6019
  _hover: {
6020
- [compVars$2.labelTextColor]: helperRefs$3.dark,
6021
- [compVars$2.labelTextDecoration]: 'underline',
6020
+ [compVars$3.labelTextColor]: helperRefs$3.dark,
6021
+ [compVars$3.labelTextDecoration]: 'underline',
6022
6022
  },
6023
6023
  _active: {
6024
- [compVars$2.labelTextColor]: helperRefs$3.dark,
6024
+ [compVars$3.labelTextColor]: helperRefs$3.dark,
6025
6025
  },
6026
6026
  },
6027
6027
  },
6028
6028
 
6029
6029
  _focused: {
6030
- [compVars$2.outlineColor]: globalRefs$b.colors.surface.main,
6030
+ [compVars$3.outlineColor]: globalRefs$b.colors.surface.main,
6031
6031
  },
6032
6032
  };
6033
6033
 
6034
6034
  const vars$n = {
6035
- ...compVars$2,
6036
- ...helperVars$2,
6035
+ ...compVars$3,
6036
+ ...helperVars$3,
6037
6037
  };
6038
6038
 
6039
6039
  var button$1 = /*#__PURE__*/Object.freeze({
@@ -6394,7 +6394,7 @@ var switchToggle$1 = /*#__PURE__*/Object.freeze({
6394
6394
 
6395
6395
  const globalRefs$6 = getThemeRefs(globals);
6396
6396
 
6397
- const compVars$1 = ContainerClass.cssVarList;
6397
+ const compVars$2 = ContainerClass.cssVarList;
6398
6398
 
6399
6399
  const verticalAlignment = {
6400
6400
  start: { verticalAlignment: 'start' },
@@ -6408,7 +6408,7 @@ const horizontalAlignment = {
6408
6408
  end: { horizontalAlignment: 'end' },
6409
6409
  };
6410
6410
 
6411
- const [helperTheme$2, helperRefs$2, helperVars$1] = createHelperVars(
6411
+ const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
6412
6412
  {
6413
6413
  verticalAlignment,
6414
6414
  horizontalAlignment,
@@ -6422,85 +6422,85 @@ const { shadowColor } = helperRefs$2;
6422
6422
  const container = {
6423
6423
  ...helperTheme$2,
6424
6424
 
6425
- [compVars$1.hostWidth]: '100%',
6426
- [compVars$1.boxShadow]: 'none',
6427
- [compVars$1.backgroundColor]: globalRefs$6.colors.surface.light,
6428
- [compVars$1.color]: globalRefs$6.colors.surface.contrast,
6425
+ [compVars$2.hostWidth]: '100%',
6426
+ [compVars$2.boxShadow]: 'none',
6427
+ [compVars$2.backgroundColor]: globalRefs$6.colors.surface.light,
6428
+ [compVars$2.color]: globalRefs$6.colors.surface.contrast,
6429
6429
 
6430
6430
  verticalPadding: {
6431
- sm: { [compVars$1.verticalPadding]: '5px' },
6432
- md: { [compVars$1.verticalPadding]: '10px' },
6433
- lg: { [compVars$1.verticalPadding]: '20px' },
6431
+ sm: { [compVars$2.verticalPadding]: '5px' },
6432
+ md: { [compVars$2.verticalPadding]: '10px' },
6433
+ lg: { [compVars$2.verticalPadding]: '20px' },
6434
6434
  },
6435
6435
 
6436
6436
  horizontalPadding: {
6437
- sm: { [compVars$1.horizontalPadding]: '5px' },
6438
- md: { [compVars$1.horizontalPadding]: '10px' },
6439
- lg: { [compVars$1.horizontalPadding]: '20px' },
6437
+ sm: { [compVars$2.horizontalPadding]: '5px' },
6438
+ md: { [compVars$2.horizontalPadding]: '10px' },
6439
+ lg: { [compVars$2.horizontalPadding]: '20px' },
6440
6440
  },
6441
6441
 
6442
6442
  direction: {
6443
6443
  row: {
6444
- [compVars$1.flexDirection]: 'row',
6445
- [compVars$1.alignItems]: helperRefs$2.verticalAlignment,
6446
- [compVars$1.justifyContent]: helperRefs$2.horizontalAlignment,
6447
- [compVars$1.flexWrap]: 'wrap',
6444
+ [compVars$2.flexDirection]: 'row',
6445
+ [compVars$2.alignItems]: helperRefs$2.verticalAlignment,
6446
+ [compVars$2.justifyContent]: helperRefs$2.horizontalAlignment,
6447
+ [compVars$2.flexWrap]: 'wrap',
6448
6448
  horizontalAlignment: {
6449
6449
  spaceBetween: {
6450
- [helperVars$1.horizontalAlignment]: 'space-between',
6450
+ [helperVars$2.horizontalAlignment]: 'space-between',
6451
6451
  },
6452
6452
  },
6453
6453
  },
6454
6454
  column: {
6455
- [compVars$1.flexDirection]: 'column',
6456
- [compVars$1.alignItems]: helperRefs$2.horizontalAlignment,
6457
- [compVars$1.justifyContent]: helperRefs$2.verticalAlignment,
6455
+ [compVars$2.flexDirection]: 'column',
6456
+ [compVars$2.alignItems]: helperRefs$2.horizontalAlignment,
6457
+ [compVars$2.justifyContent]: helperRefs$2.verticalAlignment,
6458
6458
  verticalAlignment: {
6459
6459
  spaceBetween: {
6460
- [helperVars$1.verticalAlignment]: 'space-between',
6460
+ [helperVars$2.verticalAlignment]: 'space-between',
6461
6461
  },
6462
6462
  },
6463
6463
  },
6464
6464
  },
6465
6465
 
6466
6466
  spaceBetween: {
6467
- sm: { [compVars$1.gap]: '10px' },
6468
- md: { [compVars$1.gap]: '20px' },
6469
- lg: { [compVars$1.gap]: '30px' },
6467
+ sm: { [compVars$2.gap]: '10px' },
6468
+ md: { [compVars$2.gap]: '20px' },
6469
+ lg: { [compVars$2.gap]: '30px' },
6470
6470
  },
6471
6471
 
6472
6472
  shadow: {
6473
6473
  sm: {
6474
- [compVars$1.boxShadow]: `${globalRefs$6.shadow.wide.sm} ${shadowColor}, ${globalRefs$6.shadow.narrow.sm} ${shadowColor}`,
6474
+ [compVars$2.boxShadow]: `${globalRefs$6.shadow.wide.sm} ${shadowColor}, ${globalRefs$6.shadow.narrow.sm} ${shadowColor}`,
6475
6475
  },
6476
6476
  md: {
6477
- [compVars$1.boxShadow]: `${globalRefs$6.shadow.wide.md} ${shadowColor}, ${globalRefs$6.shadow.narrow.md} ${shadowColor}`,
6477
+ [compVars$2.boxShadow]: `${globalRefs$6.shadow.wide.md} ${shadowColor}, ${globalRefs$6.shadow.narrow.md} ${shadowColor}`,
6478
6478
  },
6479
6479
  lg: {
6480
- [compVars$1.boxShadow]: `${globalRefs$6.shadow.wide.lg} ${shadowColor}, ${globalRefs$6.shadow.narrow.lg} ${shadowColor}`,
6480
+ [compVars$2.boxShadow]: `${globalRefs$6.shadow.wide.lg} ${shadowColor}, ${globalRefs$6.shadow.narrow.lg} ${shadowColor}`,
6481
6481
  },
6482
6482
  xl: {
6483
- [compVars$1.boxShadow]: `${globalRefs$6.shadow.wide.xl} ${shadowColor}, ${globalRefs$6.shadow.narrow.xl} ${shadowColor}`,
6483
+ [compVars$2.boxShadow]: `${globalRefs$6.shadow.wide.xl} ${shadowColor}, ${globalRefs$6.shadow.narrow.xl} ${shadowColor}`,
6484
6484
  },
6485
6485
  '2xl': {
6486
- [helperVars$1.shadowColor]: '#00000050', // mimic daisyUI shadow settings
6487
- [compVars$1.boxShadow]: `${globalRefs$6.shadow.wide['2xl']} ${shadowColor}`,
6486
+ [helperVars$2.shadowColor]: '#00000050', // mimic daisyUI shadow settings
6487
+ [compVars$2.boxShadow]: `${globalRefs$6.shadow.wide['2xl']} ${shadowColor}`,
6488
6488
  },
6489
6489
  },
6490
6490
 
6491
6491
  borderRadius: {
6492
- sm: { [compVars$1.borderRadius]: globalRefs$6.radius.sm },
6493
- md: { [compVars$1.borderRadius]: globalRefs$6.radius.md },
6494
- lg: { [compVars$1.borderRadius]: globalRefs$6.radius.lg },
6495
- xl: { [compVars$1.borderRadius]: globalRefs$6.radius.xl },
6496
- '2xl': { [compVars$1.borderRadius]: globalRefs$6.radius['2xl'] },
6497
- '3xl': { [compVars$1.borderRadius]: globalRefs$6.radius['3xl'] },
6492
+ sm: { [compVars$2.borderRadius]: globalRefs$6.radius.sm },
6493
+ md: { [compVars$2.borderRadius]: globalRefs$6.radius.md },
6494
+ lg: { [compVars$2.borderRadius]: globalRefs$6.radius.lg },
6495
+ xl: { [compVars$2.borderRadius]: globalRefs$6.radius.xl },
6496
+ '2xl': { [compVars$2.borderRadius]: globalRefs$6.radius['2xl'] },
6497
+ '3xl': { [compVars$2.borderRadius]: globalRefs$6.radius['3xl'] },
6498
6498
  },
6499
6499
  };
6500
6500
 
6501
6501
  const vars$e = {
6502
- ...compVars$1,
6503
- ...helperVars$1,
6502
+ ...compVars$2,
6503
+ ...helperVars$2,
6504
6504
  };
6505
6505
 
6506
6506
  var container$1 = /*#__PURE__*/Object.freeze({
@@ -6663,9 +6663,9 @@ var link$1 = /*#__PURE__*/Object.freeze({
6663
6663
  });
6664
6664
 
6665
6665
  const globalRefs$3 = getThemeRefs(globals);
6666
- const compVars = DividerClass.cssVarList;
6666
+ const compVars$1 = DividerClass.cssVarList;
6667
6667
 
6668
- const [helperTheme$1, helperRefs$1, helperVars] = createHelperVars(
6668
+ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
6669
6669
  {
6670
6670
  thickness: '2px',
6671
6671
  spacing: '10px',
@@ -6676,32 +6676,32 @@ const [helperTheme$1, helperRefs$1, helperVars] = createHelperVars(
6676
6676
  const divider = {
6677
6677
  ...helperTheme$1,
6678
6678
 
6679
- [compVars.alignItems]: 'center',
6680
- [compVars.flexDirection]: 'row',
6681
- [compVars.alignSelf]: 'stretch',
6682
- [compVars.hostWidth]: '100%',
6683
- [compVars.stripeColor]: globalRefs$3.colors.surface.main,
6684
- [compVars.stripeColorOpacity]: '0.5',
6685
- [compVars.stripeHorizontalThickness]: helperRefs$1.thickness,
6686
- [compVars.labelTextWidth]: 'fit-content',
6687
- [compVars.labelTextMaxWidth]: 'calc(100% - 100px)',
6688
- [compVars.labelTextHorizontalSpacing]: helperRefs$1.spacing,
6679
+ [compVars$1.alignItems]: 'center',
6680
+ [compVars$1.flexDirection]: 'row',
6681
+ [compVars$1.alignSelf]: 'stretch',
6682
+ [compVars$1.hostWidth]: '100%',
6683
+ [compVars$1.stripeColor]: globalRefs$3.colors.surface.main,
6684
+ [compVars$1.stripeColorOpacity]: '0.5',
6685
+ [compVars$1.stripeHorizontalThickness]: helperRefs$1.thickness,
6686
+ [compVars$1.labelTextWidth]: 'fit-content',
6687
+ [compVars$1.labelTextMaxWidth]: 'calc(100% - 100px)',
6688
+ [compVars$1.labelTextHorizontalSpacing]: helperRefs$1.spacing,
6689
6689
 
6690
6690
  _vertical: {
6691
- [compVars.minHeight]: '200px',
6692
- [compVars.flexDirection]: 'column',
6693
- [compVars.hostWidth]: 'fit-content',
6694
- [compVars.hostPadding]: `0 calc(${helperRefs$1.thickness} * 3)`,
6695
- [compVars.stripeVerticalThickness]: helperRefs$1.thickness,
6696
- [compVars.labelTextWidth]: 'fit-content',
6697
- [compVars.labelTextMaxWidth]: '100%',
6698
- [compVars.labelTextVerticalSpacing]: helperRefs$1.spacing,
6691
+ [compVars$1.minHeight]: '200px',
6692
+ [compVars$1.flexDirection]: 'column',
6693
+ [compVars$1.hostWidth]: 'fit-content',
6694
+ [compVars$1.hostPadding]: `0 calc(${helperRefs$1.thickness} * 3)`,
6695
+ [compVars$1.stripeVerticalThickness]: helperRefs$1.thickness,
6696
+ [compVars$1.labelTextWidth]: 'fit-content',
6697
+ [compVars$1.labelTextMaxWidth]: '100%',
6698
+ [compVars$1.labelTextVerticalSpacing]: helperRefs$1.spacing,
6699
6699
  },
6700
6700
  };
6701
6701
 
6702
6702
  const vars$9 = {
6703
- ...compVars,
6704
- ...helperVars,
6703
+ ...compVars$1,
6704
+ ...helperVars$1,
6705
6705
  };
6706
6706
 
6707
6707
  var divider$1 = /*#__PURE__*/Object.freeze({
@@ -6785,9 +6785,9 @@ var loaderLinear$1 = /*#__PURE__*/Object.freeze({
6785
6785
  });
6786
6786
 
6787
6787
  const globalRefs$1 = getThemeRefs(globals);
6788
- const vars$6 = LoaderRadialClass.cssVarList;
6788
+ const compVars = LoaderRadialClass.cssVarList;
6789
6789
 
6790
- const [helperTheme, helperRefs] = createHelperVars(
6790
+ const [helperTheme, helperRefs, helperVars] = createHelperVars(
6791
6791
  {
6792
6792
  spinnerColor: globalRefs$1.colors.surface.contrast,
6793
6793
  mode: {
@@ -6805,29 +6805,33 @@ const [helperTheme, helperRefs] = createHelperVars(
6805
6805
  const loaderRadial = {
6806
6806
  ...helperTheme,
6807
6807
 
6808
- [vars$6.animationDuration]: '2s',
6809
- [vars$6.animationTimingFunction]: 'linear',
6810
- [vars$6.animationIterationCount]: 'infinite',
6811
- [vars$6.spinnerBorderStyle]: 'solid',
6812
- [vars$6.spinnerBorderWidth]: '0.2em',
6813
- [vars$6.spinnerBorderRadius]: '50%',
6814
- [vars$6.spinnerQuadrant1Color]: helperRefs.spinnerColor,
6815
- [vars$6.spinnerQuadrant2Color]: 'transparent',
6816
- [vars$6.spinnerQuadrant3Color]: helperRefs.spinnerColor,
6817
- [vars$6.spinnerQuadrant4Color]: 'transparent',
6808
+ [compVars.animationDuration]: '2s',
6809
+ [compVars.animationTimingFunction]: 'linear',
6810
+ [compVars.animationIterationCount]: 'infinite',
6811
+ [compVars.spinnerBorderStyle]: 'solid',
6812
+ [compVars.spinnerBorderWidth]: '0.2em',
6813
+ [compVars.spinnerBorderRadius]: '50%',
6814
+ [compVars.spinnerQuadrant1Color]: helperRefs.spinnerColor,
6815
+ [compVars.spinnerQuadrant2Color]: 'transparent',
6816
+ [compVars.spinnerQuadrant3Color]: helperRefs.spinnerColor,
6817
+ [compVars.spinnerQuadrant4Color]: 'transparent',
6818
6818
 
6819
6819
  size: {
6820
- xs: { [vars$6.spinnerSize]: '20px' },
6821
- sm: { [vars$6.spinnerSize]: '30px' },
6822
- md: { [vars$6.spinnerSize]: '40px' },
6823
- lg: { [vars$6.spinnerSize]: '60px' },
6824
- xl: { [vars$6.spinnerSize]: '80px' },
6820
+ xs: { [compVars.spinnerSize]: '20px' },
6821
+ sm: { [compVars.spinnerSize]: '30px' },
6822
+ md: { [compVars.spinnerSize]: '40px' },
6823
+ lg: { [compVars.spinnerSize]: '60px' },
6824
+ xl: { [compVars.spinnerSize]: '80px' },
6825
6825
  },
6826
6826
 
6827
6827
  _hidden: {
6828
- [vars$6.hostDisplay]: 'none',
6828
+ [compVars.hostDisplay]: 'none',
6829
6829
  },
6830
6830
  };
6831
+ const vars$6 = {
6832
+ ...compVars,
6833
+ ...helperVars,
6834
+ };
6831
6835
 
6832
6836
  var loaderRadial$1 = /*#__PURE__*/Object.freeze({
6833
6837
  __proto__: null,