@aurodesignsystem-dev/auro-formkit 0.0.0-pr754.1 → 0.0.0-pr754.2

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.
Files changed (56) hide show
  1. package/components/bibtemplate/dist/index.js +1 -1
  2. package/components/bibtemplate/dist/registered.js +1 -1
  3. package/components/checkbox/demo/api.min.js +9 -9
  4. package/components/checkbox/demo/index.min.js +9 -9
  5. package/components/checkbox/dist/index.js +9 -9
  6. package/components/checkbox/dist/registered.js +9 -9
  7. package/components/combobox/demo/api.md +12 -6
  8. package/components/combobox/demo/api.min.js +43 -84
  9. package/components/combobox/demo/index.min.js +43 -84
  10. package/components/combobox/dist/index.js +42 -84
  11. package/components/combobox/dist/registered.js +42 -84
  12. package/components/counter/demo/api.md +140 -7
  13. package/components/counter/demo/api.min.js +555 -385
  14. package/components/counter/demo/index.md +82 -0
  15. package/components/counter/demo/index.min.js +555 -385
  16. package/components/counter/dist/auro-counter-group.d.ts +71 -14
  17. package/components/counter/dist/auro-counter.d.ts +10 -0
  18. package/components/counter/dist/index.js +555 -385
  19. package/components/counter/dist/registered.js +555 -385
  20. package/components/datepicker/demo/api.min.js +42 -84
  21. package/components/datepicker/demo/index.min.js +42 -84
  22. package/components/datepicker/dist/index.js +42 -84
  23. package/components/datepicker/dist/registered.js +42 -84
  24. package/components/dropdown/demo/api.md +76 -268
  25. package/components/dropdown/demo/api.min.js +25 -67
  26. package/components/dropdown/demo/index.md +45 -363
  27. package/components/dropdown/demo/index.min.js +25 -67
  28. package/components/dropdown/dist/auro-dropdown.d.ts +21 -71
  29. package/components/dropdown/dist/index.js +25 -67
  30. package/components/dropdown/dist/registered.js +25 -67
  31. package/components/helptext/dist/index.js +1 -1
  32. package/components/helptext/dist/registered.js +1 -1
  33. package/components/input/demo/api.md +1 -1
  34. package/components/input/demo/api.min.js +10 -10
  35. package/components/input/demo/index.min.js +10 -10
  36. package/components/input/dist/base-input.d.ts +1 -1
  37. package/components/input/dist/index.js +10 -10
  38. package/components/input/dist/registered.js +10 -10
  39. package/components/menu/demo/api.md +14 -15
  40. package/components/menu/demo/api.min.js +1 -0
  41. package/components/menu/demo/index.min.js +1 -0
  42. package/components/menu/dist/auro-menu.d.ts +2 -1
  43. package/components/menu/dist/index.js +1 -0
  44. package/components/menu/dist/registered.js +1 -0
  45. package/components/radio/demo/api.min.js +9 -9
  46. package/components/radio/demo/index.min.js +9 -9
  47. package/components/radio/dist/index.js +9 -9
  48. package/components/radio/dist/registered.js +9 -9
  49. package/components/select/demo/api.md +41 -36
  50. package/components/select/demo/api.min.js +60 -102
  51. package/components/select/demo/index.md +1 -1
  52. package/components/select/demo/index.min.js +60 -102
  53. package/components/select/dist/auro-select.d.ts +9 -2
  54. package/components/select/dist/index.js +59 -102
  55. package/components/select/dist/registered.js +59 -102
  56. package/package.json +2 -2
@@ -3187,7 +3187,7 @@ var dropdownVersion = '3.0.0';
3187
3187
 
3188
3188
  var shapeSizeCss = i$2`.wrapper{overflow:hidden}.shape-classic-xl,.shape-classic-lg,.shape-classic-md,.shape-classic-sm,.shape-classic-xs{min-height:58px;max-height:58px;border-style:solid;border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}.shape-classic-xl.simple,.shape-classic-lg.simple,.shape-classic-md.simple,.shape-classic-sm.simple,.shape-classic-xs.simple{border-width:0px;min-height:60px;max-height:60px;background-color:unset;box-shadow:none}.shape-classic-xl.thin,.shape-classic-lg.thin,.shape-classic-md.thin,.shape-classic-sm.thin,.shape-classic-xs.thin{border-width:1px;min-height:58px;max-height:58px;background-color:unset}.shape-classic-xl.parentBorder,.shape-classic-lg.parentBorder,.shape-classic-md.parentBorder,.shape-classic-sm.parentBorder,.shape-classic-xs.parentBorder{border:0;box-shadow:unset;min-height:56px;max-height:56px}.shape-snowflake-xl,.shape-snowflake-lg,.shape-snowflake-md,.shape-snowflake-sm,.shape-snowflake-xs{min-height:56px;max-height:56px;border-style:solid;border-width:2px;border-color:transparent;border-radius:30px}.shape-snowflake-xl.simple,.shape-snowflake-lg.simple,.shape-snowflake-md.simple,.shape-snowflake-sm.simple,.shape-snowflake-xs.simple{border-width:0px;min-height:60px;max-height:60px;background-color:unset;box-shadow:none}.shape-snowflake-xl.thin,.shape-snowflake-lg.thin,.shape-snowflake-md.thin,.shape-snowflake-sm.thin,.shape-snowflake-xs.thin{border-width:1px;min-height:58px;max-height:58px;background-color:unset}.shape-snowflake-xl.parentBorder,.shape-snowflake-lg.parentBorder,.shape-snowflake-md.parentBorder,.shape-snowflake-sm.parentBorder,.shape-snowflake-xs.parentBorder{border:0;box-shadow:unset;min-height:56px;max-height:56px}.shape-box-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent}.shape-box-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-box-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-box-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-rounded-lg{min-height:56px;max-height:56px;border-style:solid;border-width:2px;border-color:transparent;border-radius:6px}.shape-rounded-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-rounded-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-rounded-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-pill-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px}.shape-pill-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-left-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px 0 0 36px}.shape-pill-left-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-left-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-left-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-right-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:0 36px 36px 0}.shape-pill-right-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-right-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-right-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px}.shape-pill-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-pill-left-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px 0 0 36px}.shape-pill-left-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-left-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-left-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-pill-right-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent;border-radius:0 36px 36px 0}.shape-pill-right-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-right-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-right-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}`;
3189
3189
 
3190
- var colorCss$1 = i$2`:host(:not([ondark])) .wrapper{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-background-color);color:var(--ds-auro-dropdown-trigger-text-color)}:host(:not([ondark])) .wrapper:focus-within,:host(:not([ondark])) .wrapper:active{--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-dropdown-trigger-outline-color: var(--ds-advanced-color-state-focused, #01426a)}:host(:not([onDark])[disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([ondark])[error]){--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]) .label{color:var(--ds-auro-dropdown-label-text-color)}:host([onDark]) .wrapper{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-background-color);color:var(--ds-auro-dropdown-trigger-text-color)}:host([onDark]) .wrapper:focus-within,:host([onDark]) .wrapper:active{--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-dropdown-trigger-outline-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([onDark][disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-dropdown-trigger-container-color: var(--ds-advanced-color-shared-background-inverse-disabled, rgba(255, 255, 255, 0.1))}:host([ondark][error]){--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}`;
3190
+ var colorCss$1 = i$2`:host(:not([layout*=classic])){--ds-auro-dropdown-trigger-border-color: transparent}:host(:not([ondark])) .wrapper{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-background-color);color:var(--ds-auro-dropdown-trigger-text-color)}:host(:not([ondark])) .wrapper:focus-within,:host(:not([ondark])) .wrapper:active{--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-dropdown-trigger-outline-color: var(--ds-advanced-color-state-focused, #01426a)}:host(:not([onDark])[disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([ondark])[error]){--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]) .label{color:var(--ds-auro-dropdown-label-text-color)}:host([onDark]) .wrapper{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-background-color);color:var(--ds-auro-dropdown-trigger-text-color)}:host([onDark]) .wrapper:focus-within,:host([onDark]) .wrapper:active{--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-dropdown-trigger-outline-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([onDark][disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-dropdown-trigger-container-color: var(--ds-advanced-color-shared-background-inverse-disabled, rgba(255, 255, 255, 0.1))}:host([ondark][error]){--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}`;
3191
3191
 
3192
3192
  var classicColorCss = i$2``;
3193
3193
 
@@ -3199,7 +3199,7 @@ var styleSnowflakeCss = i$2`:host{display:block}.wrapper{display:flex;flex:1;fle
3199
3199
 
3200
3200
  var colorCss = i$2`:host([error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]){--ds-auro-helptext-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
3201
3201
 
3202
- var styleCss = i$2`.helptext-wrapper{display:none;font-size:12px;font-weight:450;letter-spacing:0;line-height:16px}:host([large]) .helptext-wrapper{font-size:16px;font-weight:450;letter-spacing:0;line-height:24px}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
3202
+ var styleCss = i$2`:host{position:relative;display:block}.helptext-wrapper{display:none;font-size:12px;font-weight:450;letter-spacing:0;line-height:16px}:host([large]) .helptext-wrapper{font-size:16px;font-weight:450;letter-spacing:0;line-height:24px}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
3203
3203
 
3204
3204
  var tokensCss = i$2`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
3205
3205
 
@@ -3504,10 +3504,8 @@ class AuroElement extends i {
3504
3504
  // See LICENSE in the project root for license information.
3505
3505
 
3506
3506
 
3507
- /**
3508
- * @attr { Boolean } disableEventShow - If declared, the dropdown will only show by calling the API .show() public method.
3507
+ /*
3509
3508
  * @slot - Default slot for the popover content.
3510
- * @slot label - Defines the content of the label.
3511
3509
  * @slot helpText - Defines the content of the helpText.
3512
3510
  * @slot trigger - Defines the content of the trigger.
3513
3511
  * @csspart trigger - The trigger content container.
@@ -3526,18 +3524,22 @@ class AuroDropdown extends AuroElement {
3526
3524
  this.matchWidth = false;
3527
3525
  this.noHideOnThisFocusLoss = false;
3528
3526
 
3529
- this.errorMessage = ''; // TODO - check with Doug if there is still more to do here
3527
+ this.errorMessage = undefined; // TODO - check with Doug if there is still more to do here
3530
3528
 
3531
3529
  // Layout Config
3532
- this.layout = 'classic';
3533
- this.shape = 'classic';
3534
- this.size = 'xl';
3530
+ this.layout = undefined;
3531
+ this.shape = undefined;
3532
+ this.size = undefined;
3535
3533
 
3536
3534
  this.parentBorder = false;
3537
3535
 
3538
3536
  this.privateDefaults();
3539
3537
  }
3540
3538
 
3539
+ /**
3540
+ * @private
3541
+ * @returns {object} Class definition for the wrapper element.
3542
+ */
3541
3543
  get commonWrapperClasses() {
3542
3544
  return {
3543
3545
  'trigger': true,
@@ -3557,12 +3559,8 @@ class AuroDropdown extends AuroElement {
3557
3559
  this.disabled = false;
3558
3560
  this.disableFocusTrap = false;
3559
3561
  this.error = false;
3560
- this.inset = false;
3561
- this.rounded = false;
3562
3562
  this.tabIndex = 0;
3563
3563
  this.noToggle = false;
3564
- this.a11yAutocomplete = 'none';
3565
- this.labeled = true;
3566
3564
  this.a11yRole = 'button';
3567
3565
  this.onDark = false;
3568
3566
  this.showTriggerBorders = true;
@@ -3684,26 +3682,27 @@ class AuroDropdown extends AuroElement {
3684
3682
  },
3685
3683
 
3686
3684
  /**
3687
- * If declared, applies a border around the trigger slot.
3685
+ * If declared, the dropdown will only show by calling the API .show() public method.
3686
+ * @default false
3688
3687
  */
3689
- simple: {
3688
+ disableEventShow: {
3690
3689
  type: Boolean,
3691
3690
  reflect: true
3692
3691
  },
3693
3692
 
3694
3693
  /**
3695
- * If declared, the dropdown displays a chevron on the right.
3696
- * @attr {Boolean} chevron
3694
+ * If declared, applies a border around the trigger slot.
3697
3695
  */
3698
- chevron: {
3696
+ simple: {
3699
3697
  type: Boolean,
3700
3698
  reflect: true
3701
3699
  },
3702
3700
 
3703
3701
  /**
3704
- * If declared, the dropdown will be styled with the common theme.
3702
+ * If declared, the dropdown displays a chevron on the right.
3703
+ * @attr {Boolean} chevron
3705
3704
  */
3706
- common: {
3705
+ chevron: {
3707
3706
  type: Boolean,
3708
3707
  reflect: true
3709
3708
  },
@@ -3717,7 +3716,7 @@ class AuroDropdown extends AuroElement {
3717
3716
  },
3718
3717
 
3719
3718
  /**
3720
- * If declare, the focus trap inside of bib will be turned off.
3719
+ * If declared, the focus trap inside of bib will be turned off.
3721
3720
  */
3722
3721
  disableFocusTrap: {
3723
3722
  type: Boolean,
@@ -3764,22 +3763,6 @@ class AuroDropdown extends AuroElement {
3764
3763
  reflect: true
3765
3764
  },
3766
3765
 
3767
- /**
3768
- * Makes the trigger to be full width of its parent container.
3769
- */
3770
- fluid: {
3771
- type: Boolean,
3772
- reflect: true
3773
- },
3774
-
3775
- /**
3776
- * If declared, will apply padding around trigger slot content.
3777
- */
3778
- inset: {
3779
- type: Boolean,
3780
- reflect: true
3781
- },
3782
-
3783
3766
  /**
3784
3767
  * If true, the dropdown bib is displayed.
3785
3768
  */
@@ -3823,15 +3806,6 @@ class AuroDropdown extends AuroElement {
3823
3806
  reflect: true
3824
3807
  },
3825
3808
 
3826
- /**
3827
- * Defines if there is a label preset.
3828
- * @private
3829
- */
3830
- labeled: {
3831
- type: Boolean,
3832
- reflect: true
3833
- },
3834
-
3835
3809
  /**
3836
3810
  * Defines if the trigger should size based on the parent element providing the border UI.
3837
3811
  * @private
@@ -3892,6 +3866,9 @@ class AuroDropdown extends AuroElement {
3892
3866
  reflect: true
3893
3867
  },
3894
3868
 
3869
+ /**
3870
+ * If declared, and a function is set, that function will execute when the slot content is updated.
3871
+ */
3895
3872
  onSlotChange: {
3896
3873
  type: Function,
3897
3874
  reflect: false
@@ -3906,14 +3883,6 @@ class AuroDropdown extends AuroElement {
3906
3883
  reflect: true
3907
3884
  },
3908
3885
 
3909
- /**
3910
- * If declared, will apply border-radius to trigger and default slots.
3911
- */
3912
- rounded: {
3913
- type: Boolean,
3914
- reflect: true
3915
- },
3916
-
3917
3886
  /**
3918
3887
  * @private
3919
3888
  */
@@ -3928,22 +3897,14 @@ class AuroDropdown extends AuroElement {
3928
3897
  type: String || undefined,
3929
3898
  attribute: false,
3930
3899
  reflect: false
3931
- },
3932
-
3933
- /**
3934
- * The value for the aria-autocomplete attribute of the trigger element.
3935
- */
3936
- a11yAutocomplete: {
3937
- type: String,
3938
- attribute: false,
3939
3900
  }
3940
3901
  };
3941
3902
  }
3942
3903
 
3943
3904
  static get styles() {
3944
3905
  return [
3945
- colorCss$1,
3946
3906
  tokensCss$1,
3907
+ colorCss$1,
3947
3908
 
3948
3909
  // default layout
3949
3910
  classicColorCss,
@@ -4383,10 +4344,7 @@ class AuroDropdown extends AuroElement {
4383
4344
  id="bib"
4384
4345
  shape="${this.shape}"
4385
4346
  ?data-show="${this.isPopoverVisible}"
4386
- ?isfullscreen="${this.isBibFullscreen}"
4387
- ?common="${this.common}"
4388
- ?rounded="${this.common || this.rounded}"
4389
- ?inset="${this.common || this.inset}">
4347
+ ?isfullscreen="${this.isBibFullscreen}">
4390
4348
  <div class="slotContent">
4391
4349
  <slot @slotchange="${this.handleDefaultSlot}"></slot>
4392
4350
  </div>
@@ -1,16 +1,3 @@
1
- /**
2
- * @attr { Boolean } disableEventShow - If declared, the dropdown will only show by calling the API .show() public method.
3
- * @slot - Default slot for the popover content.
4
- * @slot label - Defines the content of the label.
5
- * @slot helpText - Defines the content of the helpText.
6
- * @slot trigger - Defines the content of the trigger.
7
- * @csspart trigger - The trigger content container.
8
- * @csspart chevron - The collapsed/expanded state icon container.
9
- * @csspart helpText - The helpText content container.
10
- * @event auroDropdown-triggerClick - Notifies that the trigger has been clicked.
11
- * @event auroDropdown-toggled - Notifies that the visibility of the dropdown bib has changed.
12
- * @event auroDropdown-idAdded - Notifies consumers that the unique ID for the dropdown bib has been generated.
13
- */
14
1
  export class AuroDropdown extends AuroElement {
15
2
  static get properties(): {
16
3
  /**
@@ -22,24 +9,25 @@ export class AuroDropdown extends AuroElement {
22
9
  reflect: boolean;
23
10
  };
24
11
  /**
25
- * If declared, applies a border around the trigger slot.
12
+ * If declared, the dropdown will only show by calling the API .show() public method.
13
+ * @default false
26
14
  */
27
- simple: {
15
+ disableEventShow: {
28
16
  type: BooleanConstructor;
29
17
  reflect: boolean;
30
18
  };
31
19
  /**
32
- * If declared, the dropdown displays a chevron on the right.
33
- * @attr {Boolean} chevron
20
+ * If declared, applies a border around the trigger slot.
34
21
  */
35
- chevron: {
22
+ simple: {
36
23
  type: BooleanConstructor;
37
24
  reflect: boolean;
38
25
  };
39
26
  /**
40
- * If declared, the dropdown will be styled with the common theme.
27
+ * If declared, the dropdown displays a chevron on the right.
28
+ * @attr {Boolean} chevron
41
29
  */
42
- common: {
30
+ chevron: {
43
31
  type: BooleanConstructor;
44
32
  reflect: boolean;
45
33
  };
@@ -51,7 +39,7 @@ export class AuroDropdown extends AuroElement {
51
39
  reflect: boolean;
52
40
  };
53
41
  /**
54
- * If declare, the focus trap inside of bib will be turned off.
42
+ * If declared, the focus trap inside of bib will be turned off.
55
43
  */
56
44
  disableFocusTrap: {
57
45
  type: BooleanConstructor;
@@ -92,20 +80,6 @@ export class AuroDropdown extends AuroElement {
92
80
  type: BooleanConstructor;
93
81
  reflect: boolean;
94
82
  };
95
- /**
96
- * Makes the trigger to be full width of its parent container.
97
- */
98
- fluid: {
99
- type: BooleanConstructor;
100
- reflect: boolean;
101
- };
102
- /**
103
- * If declared, will apply padding around trigger slot content.
104
- */
105
- inset: {
106
- type: BooleanConstructor;
107
- reflect: boolean;
108
- };
109
83
  /**
110
84
  * If true, the dropdown bib is displayed.
111
85
  */
@@ -144,14 +118,6 @@ export class AuroDropdown extends AuroElement {
144
118
  type: StringConstructor;
145
119
  reflect: boolean;
146
120
  };
147
- /**
148
- * Defines if there is a label preset.
149
- * @private
150
- */
151
- labeled: {
152
- type: BooleanConstructor;
153
- reflect: boolean;
154
- };
155
121
  /**
156
122
  * Defines if the trigger should size based on the parent element providing the border UI.
157
123
  * @private
@@ -205,6 +171,9 @@ export class AuroDropdown extends AuroElement {
205
171
  type: BooleanConstructor;
206
172
  reflect: boolean;
207
173
  };
174
+ /**
175
+ * If declared, and a function is set, that function will execute when the slot content is updated.
176
+ */
208
177
  onSlotChange: {
209
178
  type: FunctionConstructor;
210
179
  reflect: boolean;
@@ -217,13 +186,6 @@ export class AuroDropdown extends AuroElement {
217
186
  type: StringConstructor;
218
187
  reflect: boolean;
219
188
  };
220
- /**
221
- * If declared, will apply border-radius to trigger and default slots.
222
- */
223
- rounded: {
224
- type: BooleanConstructor;
225
- reflect: boolean;
226
- };
227
189
  /**
228
190
  * @private
229
191
  */
@@ -238,13 +200,6 @@ export class AuroDropdown extends AuroElement {
238
200
  attribute: boolean;
239
201
  reflect: boolean;
240
202
  };
241
- /**
242
- * The value for the aria-autocomplete attribute of the trigger element.
243
- */
244
- a11yAutocomplete: {
245
- type: StringConstructor;
246
- attribute: boolean;
247
- };
248
203
  };
249
204
  static get styles(): import("lit").CSSResult[];
250
205
  /**
@@ -260,17 +215,16 @@ export class AuroDropdown extends AuroElement {
260
215
  isBibFullscreen: boolean;
261
216
  matchWidth: boolean;
262
217
  noHideOnThisFocusLoss: boolean;
263
- errorMessage: string;
264
- shape: string;
265
- size: string;
218
+ errorMessage: any;
219
+ layout: any;
220
+ shape: any;
221
+ size: any;
266
222
  parentBorder: boolean;
267
- get commonWrapperClasses(): {
268
- trigger: boolean;
269
- wrapper: boolean;
270
- hasFocus: boolean;
271
- simple: boolean;
272
- parentBorder: boolean;
273
- };
223
+ /**
224
+ * @private
225
+ * @returns {object} Class definition for the wrapper element.
226
+ */
227
+ private get commonWrapperClasses();
274
228
  /**
275
229
  * @private
276
230
  * @returns {void} Internal defaults.
@@ -280,11 +234,7 @@ export class AuroDropdown extends AuroElement {
280
234
  disabled: boolean;
281
235
  disableFocusTrap: boolean;
282
236
  error: boolean;
283
- inset: boolean;
284
- rounded: boolean;
285
237
  noToggle: boolean;
286
- a11yAutocomplete: string;
287
- labeled: boolean;
288
238
  a11yRole: string;
289
239
  onDark: boolean;
290
240
  showTriggerBorders: boolean;
@@ -3140,7 +3140,7 @@ var dropdownVersion = '3.0.0';
3140
3140
 
3141
3141
  var shapeSizeCss = css`.wrapper{overflow:hidden}.shape-classic-xl,.shape-classic-lg,.shape-classic-md,.shape-classic-sm,.shape-classic-xs{min-height:58px;max-height:58px;border-style:solid;border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}.shape-classic-xl.simple,.shape-classic-lg.simple,.shape-classic-md.simple,.shape-classic-sm.simple,.shape-classic-xs.simple{border-width:0px;min-height:60px;max-height:60px;background-color:unset;box-shadow:none}.shape-classic-xl.thin,.shape-classic-lg.thin,.shape-classic-md.thin,.shape-classic-sm.thin,.shape-classic-xs.thin{border-width:1px;min-height:58px;max-height:58px;background-color:unset}.shape-classic-xl.parentBorder,.shape-classic-lg.parentBorder,.shape-classic-md.parentBorder,.shape-classic-sm.parentBorder,.shape-classic-xs.parentBorder{border:0;box-shadow:unset;min-height:56px;max-height:56px}.shape-snowflake-xl,.shape-snowflake-lg,.shape-snowflake-md,.shape-snowflake-sm,.shape-snowflake-xs{min-height:56px;max-height:56px;border-style:solid;border-width:2px;border-color:transparent;border-radius:30px}.shape-snowflake-xl.simple,.shape-snowflake-lg.simple,.shape-snowflake-md.simple,.shape-snowflake-sm.simple,.shape-snowflake-xs.simple{border-width:0px;min-height:60px;max-height:60px;background-color:unset;box-shadow:none}.shape-snowflake-xl.thin,.shape-snowflake-lg.thin,.shape-snowflake-md.thin,.shape-snowflake-sm.thin,.shape-snowflake-xs.thin{border-width:1px;min-height:58px;max-height:58px;background-color:unset}.shape-snowflake-xl.parentBorder,.shape-snowflake-lg.parentBorder,.shape-snowflake-md.parentBorder,.shape-snowflake-sm.parentBorder,.shape-snowflake-xs.parentBorder{border:0;box-shadow:unset;min-height:56px;max-height:56px}.shape-box-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent}.shape-box-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-box-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-box-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-rounded-lg{min-height:56px;max-height:56px;border-style:solid;border-width:2px;border-color:transparent;border-radius:6px}.shape-rounded-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-rounded-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-rounded-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-pill-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px}.shape-pill-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-left-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px 0 0 36px}.shape-pill-left-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-left-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-left-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-right-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:0 36px 36px 0}.shape-pill-right-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-right-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-right-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px}.shape-pill-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-pill-left-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px 0 0 36px}.shape-pill-left-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-left-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-left-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-pill-right-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent;border-radius:0 36px 36px 0}.shape-pill-right-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-right-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-right-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}`;
3142
3142
 
3143
- var colorCss$1 = css`:host(:not([ondark])) .wrapper{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-background-color);color:var(--ds-auro-dropdown-trigger-text-color)}:host(:not([ondark])) .wrapper:focus-within,:host(:not([ondark])) .wrapper:active{--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-dropdown-trigger-outline-color: var(--ds-advanced-color-state-focused, #01426a)}:host(:not([onDark])[disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([ondark])[error]){--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]) .label{color:var(--ds-auro-dropdown-label-text-color)}:host([onDark]) .wrapper{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-background-color);color:var(--ds-auro-dropdown-trigger-text-color)}:host([onDark]) .wrapper:focus-within,:host([onDark]) .wrapper:active{--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-dropdown-trigger-outline-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([onDark][disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-dropdown-trigger-container-color: var(--ds-advanced-color-shared-background-inverse-disabled, rgba(255, 255, 255, 0.1))}:host([ondark][error]){--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}`;
3143
+ var colorCss$1 = css`:host(:not([layout*=classic])){--ds-auro-dropdown-trigger-border-color: transparent}:host(:not([ondark])) .wrapper{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-background-color);color:var(--ds-auro-dropdown-trigger-text-color)}:host(:not([ondark])) .wrapper:focus-within,:host(:not([ondark])) .wrapper:active{--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-dropdown-trigger-outline-color: var(--ds-advanced-color-state-focused, #01426a)}:host(:not([onDark])[disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([ondark])[error]){--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]) .label{color:var(--ds-auro-dropdown-label-text-color)}:host([onDark]) .wrapper{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-background-color);color:var(--ds-auro-dropdown-trigger-text-color)}:host([onDark]) .wrapper:focus-within,:host([onDark]) .wrapper:active{--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-dropdown-trigger-outline-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([onDark][disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-dropdown-trigger-container-color: var(--ds-advanced-color-shared-background-inverse-disabled, rgba(255, 255, 255, 0.1))}:host([ondark][error]){--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}`;
3144
3144
 
3145
3145
  var classicColorCss = css``;
3146
3146
 
@@ -3152,7 +3152,7 @@ var styleSnowflakeCss = css`:host{display:block}.wrapper{display:flex;flex:1;fle
3152
3152
 
3153
3153
  var colorCss = css`:host([error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]){--ds-auro-helptext-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
3154
3154
 
3155
- var styleCss = css`.helptext-wrapper{display:none;font-size:12px;font-weight:450;letter-spacing:0;line-height:16px}:host([large]) .helptext-wrapper{font-size:16px;font-weight:450;letter-spacing:0;line-height:24px}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
3155
+ var styleCss = css`:host{position:relative;display:block}.helptext-wrapper{display:none;font-size:12px;font-weight:450;letter-spacing:0;line-height:16px}:host([large]) .helptext-wrapper{font-size:16px;font-weight:450;letter-spacing:0;line-height:24px}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
3156
3156
 
3157
3157
  var tokensCss = css`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
3158
3158
 
@@ -3457,10 +3457,8 @@ class AuroElement extends LitElement {
3457
3457
  // See LICENSE in the project root for license information.
3458
3458
 
3459
3459
 
3460
- /**
3461
- * @attr { Boolean } disableEventShow - If declared, the dropdown will only show by calling the API .show() public method.
3460
+ /*
3462
3461
  * @slot - Default slot for the popover content.
3463
- * @slot label - Defines the content of the label.
3464
3462
  * @slot helpText - Defines the content of the helpText.
3465
3463
  * @slot trigger - Defines the content of the trigger.
3466
3464
  * @csspart trigger - The trigger content container.
@@ -3479,18 +3477,22 @@ class AuroDropdown extends AuroElement {
3479
3477
  this.matchWidth = false;
3480
3478
  this.noHideOnThisFocusLoss = false;
3481
3479
 
3482
- this.errorMessage = ''; // TODO - check with Doug if there is still more to do here
3480
+ this.errorMessage = undefined; // TODO - check with Doug if there is still more to do here
3483
3481
 
3484
3482
  // Layout Config
3485
- this.layout = 'classic';
3486
- this.shape = 'classic';
3487
- this.size = 'xl';
3483
+ this.layout = undefined;
3484
+ this.shape = undefined;
3485
+ this.size = undefined;
3488
3486
 
3489
3487
  this.parentBorder = false;
3490
3488
 
3491
3489
  this.privateDefaults();
3492
3490
  }
3493
3491
 
3492
+ /**
3493
+ * @private
3494
+ * @returns {object} Class definition for the wrapper element.
3495
+ */
3494
3496
  get commonWrapperClasses() {
3495
3497
  return {
3496
3498
  'trigger': true,
@@ -3510,12 +3512,8 @@ class AuroDropdown extends AuroElement {
3510
3512
  this.disabled = false;
3511
3513
  this.disableFocusTrap = false;
3512
3514
  this.error = false;
3513
- this.inset = false;
3514
- this.rounded = false;
3515
3515
  this.tabIndex = 0;
3516
3516
  this.noToggle = false;
3517
- this.a11yAutocomplete = 'none';
3518
- this.labeled = true;
3519
3517
  this.a11yRole = 'button';
3520
3518
  this.onDark = false;
3521
3519
  this.showTriggerBorders = true;
@@ -3637,26 +3635,27 @@ class AuroDropdown extends AuroElement {
3637
3635
  },
3638
3636
 
3639
3637
  /**
3640
- * If declared, applies a border around the trigger slot.
3638
+ * If declared, the dropdown will only show by calling the API .show() public method.
3639
+ * @default false
3641
3640
  */
3642
- simple: {
3641
+ disableEventShow: {
3643
3642
  type: Boolean,
3644
3643
  reflect: true
3645
3644
  },
3646
3645
 
3647
3646
  /**
3648
- * If declared, the dropdown displays a chevron on the right.
3649
- * @attr {Boolean} chevron
3647
+ * If declared, applies a border around the trigger slot.
3650
3648
  */
3651
- chevron: {
3649
+ simple: {
3652
3650
  type: Boolean,
3653
3651
  reflect: true
3654
3652
  },
3655
3653
 
3656
3654
  /**
3657
- * If declared, the dropdown will be styled with the common theme.
3655
+ * If declared, the dropdown displays a chevron on the right.
3656
+ * @attr {Boolean} chevron
3658
3657
  */
3659
- common: {
3658
+ chevron: {
3660
3659
  type: Boolean,
3661
3660
  reflect: true
3662
3661
  },
@@ -3670,7 +3669,7 @@ class AuroDropdown extends AuroElement {
3670
3669
  },
3671
3670
 
3672
3671
  /**
3673
- * If declare, the focus trap inside of bib will be turned off.
3672
+ * If declared, the focus trap inside of bib will be turned off.
3674
3673
  */
3675
3674
  disableFocusTrap: {
3676
3675
  type: Boolean,
@@ -3717,22 +3716,6 @@ class AuroDropdown extends AuroElement {
3717
3716
  reflect: true
3718
3717
  },
3719
3718
 
3720
- /**
3721
- * Makes the trigger to be full width of its parent container.
3722
- */
3723
- fluid: {
3724
- type: Boolean,
3725
- reflect: true
3726
- },
3727
-
3728
- /**
3729
- * If declared, will apply padding around trigger slot content.
3730
- */
3731
- inset: {
3732
- type: Boolean,
3733
- reflect: true
3734
- },
3735
-
3736
3719
  /**
3737
3720
  * If true, the dropdown bib is displayed.
3738
3721
  */
@@ -3776,15 +3759,6 @@ class AuroDropdown extends AuroElement {
3776
3759
  reflect: true
3777
3760
  },
3778
3761
 
3779
- /**
3780
- * Defines if there is a label preset.
3781
- * @private
3782
- */
3783
- labeled: {
3784
- type: Boolean,
3785
- reflect: true
3786
- },
3787
-
3788
3762
  /**
3789
3763
  * Defines if the trigger should size based on the parent element providing the border UI.
3790
3764
  * @private
@@ -3845,6 +3819,9 @@ class AuroDropdown extends AuroElement {
3845
3819
  reflect: true
3846
3820
  },
3847
3821
 
3822
+ /**
3823
+ * If declared, and a function is set, that function will execute when the slot content is updated.
3824
+ */
3848
3825
  onSlotChange: {
3849
3826
  type: Function,
3850
3827
  reflect: false
@@ -3859,14 +3836,6 @@ class AuroDropdown extends AuroElement {
3859
3836
  reflect: true
3860
3837
  },
3861
3838
 
3862
- /**
3863
- * If declared, will apply border-radius to trigger and default slots.
3864
- */
3865
- rounded: {
3866
- type: Boolean,
3867
- reflect: true
3868
- },
3869
-
3870
3839
  /**
3871
3840
  * @private
3872
3841
  */
@@ -3881,22 +3850,14 @@ class AuroDropdown extends AuroElement {
3881
3850
  type: String || undefined,
3882
3851
  attribute: false,
3883
3852
  reflect: false
3884
- },
3885
-
3886
- /**
3887
- * The value for the aria-autocomplete attribute of the trigger element.
3888
- */
3889
- a11yAutocomplete: {
3890
- type: String,
3891
- attribute: false,
3892
3853
  }
3893
3854
  };
3894
3855
  }
3895
3856
 
3896
3857
  static get styles() {
3897
3858
  return [
3898
- colorCss$1,
3899
3859
  tokensCss$1,
3860
+ colorCss$1,
3900
3861
 
3901
3862
  // default layout
3902
3863
  classicColorCss,
@@ -4336,10 +4297,7 @@ class AuroDropdown extends AuroElement {
4336
4297
  id="bib"
4337
4298
  shape="${this.shape}"
4338
4299
  ?data-show="${this.isPopoverVisible}"
4339
- ?isfullscreen="${this.isBibFullscreen}"
4340
- ?common="${this.common}"
4341
- ?rounded="${this.common || this.rounded}"
4342
- ?inset="${this.common || this.inset}">
4300
+ ?isfullscreen="${this.isBibFullscreen}">
4343
4301
  <div class="slotContent">
4344
4302
  <slot @slotchange="${this.handleDefaultSlot}"></slot>
4345
4303
  </div>