@aurodesignsystem/auro-formkit 3.0.0 → 3.1.0-beta.1

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 (66) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/components/bibtemplate/dist/auro-bibtemplate.d.ts +1 -0
  3. package/components/bibtemplate/dist/index.js +2 -0
  4. package/components/bibtemplate/dist/registered.js +2 -0
  5. package/components/checkbox/README.md +1 -1
  6. package/components/checkbox/demo/readme.md +1 -1
  7. package/components/combobox/README.md +1 -1
  8. package/components/combobox/demo/api.md +5 -5
  9. package/components/combobox/demo/api.min.js +54 -18
  10. package/components/combobox/demo/index.min.js +54 -18
  11. package/components/combobox/demo/readme.md +1 -1
  12. package/components/combobox/dist/auro-combobox.d.ts +16 -7
  13. package/components/combobox/dist/index.js +54 -18
  14. package/components/combobox/dist/registered.js +54 -18
  15. package/components/counter/README.md +1 -1
  16. package/components/counter/demo/api.md +2 -2
  17. package/components/counter/demo/api.min.js +33 -6
  18. package/components/counter/demo/index.min.js +33 -6
  19. package/components/counter/demo/readme.md +1 -1
  20. package/components/counter/dist/auro-counter-group.d.ts +9 -3
  21. package/components/counter/dist/index.js +33 -6
  22. package/components/counter/dist/registered.js +33 -6
  23. package/components/datepicker/README.md +1 -1
  24. package/components/datepicker/demo/api.md +3 -2
  25. package/components/datepicker/demo/api.min.js +63 -14
  26. package/components/datepicker/demo/index.min.js +63 -14
  27. package/components/datepicker/demo/readme.md +1 -1
  28. package/components/datepicker/dist/auro-calendar-cell.d.ts +1 -0
  29. package/components/datepicker/dist/auro-calendar-month.d.ts +1 -0
  30. package/components/datepicker/dist/auro-calendar.d.ts +3 -2
  31. package/components/datepicker/dist/auro-datepicker.d.ts +16 -0
  32. package/components/datepicker/dist/index.js +63 -14
  33. package/components/datepicker/dist/registered.js +63 -14
  34. package/components/dropdown/README.md +1 -1
  35. package/components/dropdown/demo/api.md +1 -1
  36. package/components/dropdown/demo/api.min.js +21 -3
  37. package/components/dropdown/demo/index.md +83 -0
  38. package/components/dropdown/demo/index.min.js +21 -3
  39. package/components/dropdown/demo/readme.md +1 -1
  40. package/components/dropdown/dist/auro-dropdown.d.ts +12 -1
  41. package/components/dropdown/dist/index.js +21 -3
  42. package/components/dropdown/dist/registered.js +21 -3
  43. package/components/form/README.md +1 -1
  44. package/components/form/demo/autocomplete.html +15 -0
  45. package/components/form/demo/readme.md +1 -1
  46. package/components/input/README.md +1 -1
  47. package/components/input/demo/api.min.js +10 -5
  48. package/components/input/demo/index.min.js +10 -5
  49. package/components/input/demo/readme.md +1 -1
  50. package/components/input/dist/base-input.d.ts +5 -0
  51. package/components/input/dist/index.js +10 -5
  52. package/components/input/dist/registered.js +10 -5
  53. package/components/menu/README.md +1 -1
  54. package/components/menu/demo/readme.md +1 -1
  55. package/components/radio/README.md +1 -1
  56. package/components/radio/demo/readme.md +1 -1
  57. package/components/select/README.md +1 -1
  58. package/components/select/demo/api.md +1 -1
  59. package/components/select/demo/api.min.js +28 -5
  60. package/components/select/demo/index.md +46 -1
  61. package/components/select/demo/index.min.js +28 -5
  62. package/components/select/demo/readme.md +1 -1
  63. package/components/select/dist/auro-select.d.ts +5 -2
  64. package/components/select/dist/index.js +28 -5
  65. package/components/select/dist/registered.js +28 -5
  66. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,24 @@
1
1
  # Semantic Release Automated Changelog
2
2
 
3
+ # [3.1.0-beta.1](https://github.com/AlaskaAirlines/auro-formkit/compare/v3.0.1...v3.1.0-beta.1) (2025-04-30)
4
+
5
+
6
+ ### Bug Fixes
7
+
8
+ * pr feedback Apr 28, 2025 ([2dcd705](https://github.com/AlaskaAirlines/auro-formkit/commit/2dcd70543c206229286a69364b7e503c6e12fb5f))
9
+
10
+
11
+ ### Features
12
+
13
+ * surface fullscreenBreakpoint with new `disabled` value ([4f00b48](https://github.com/AlaskaAirlines/auro-formkit/commit/4f00b4808254490419ca6ae387344e49834ca896))
14
+
15
+ ## [3.0.1](https://github.com/AlaskaAirlines/auro-formkit/compare/v3.0.0...v3.0.1) (2025-04-29)
16
+
17
+
18
+ ### Bug Fixes
19
+
20
+ * add `reflect: true` on boolean props ([05cc3db](https://github.com/AlaskaAirlines/auro-formkit/commit/05cc3db9a5069a172a835066d4b08a2082c318e3))
21
+
3
22
  # [3.0.0](https://github.com/AlaskaAirlines/auro-formkit/compare/v2.2.1...v3.0.0) (2025-04-29)
4
23
 
5
24
 
@@ -19,6 +19,7 @@ export class AuroBibtemplate extends LitElement {
19
19
  *
20
20
  */
21
21
  static register(name?: string): void;
22
+ large: boolean;
22
23
  iconTag: any;
23
24
  headerTag: any;
24
25
  /**
@@ -665,6 +665,8 @@ class AuroBibtemplate extends LitElement {
665
665
  constructor() {
666
666
  super();
667
667
 
668
+ this.large = false;
669
+
668
670
  AuroLibraryRuntimeUtils$1.prototype.handleComponentTagRename(this, 'auro-bibtemplate');
669
671
 
670
672
  const versioning = new AuroDependencyVersioning();
@@ -665,6 +665,8 @@ class AuroBibtemplate extends LitElement {
665
665
  constructor() {
666
666
  super();
667
667
 
668
+ this.large = false;
669
+
668
670
  AuroLibraryRuntimeUtils$1.prototype.handleComponentTagRename(this, 'auro-bibtemplate');
669
671
 
670
672
  const versioning = new AuroDependencyVersioning();
@@ -106,7 +106,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
106
106
  In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
107
107
 
108
108
  ```html
109
- <script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.2.1/auro-checkbox/+esm"></script>
109
+ <script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.0.1/auro-checkbox/+esm"></script>
110
110
  ```
111
111
  <!-- AURO-GENERATED-CONTENT:END -->
112
112
 
@@ -106,7 +106,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
106
106
  In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
107
107
 
108
108
  ```html
109
- <script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.2.1/auro-checkbox/+esm"></script>
109
+ <script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.0.1/auro-checkbox/+esm"></script>
110
110
  ```
111
111
  <!-- AURO-GENERATED-CONTENT:END -->
112
112
 
@@ -111,7 +111,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
111
111
  In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
112
112
 
113
113
  ```html
114
- <script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.2.1/auro-combobox/+esm"></script>
114
+ <script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.0.1/auro-combobox/+esm"></script>
115
115
  ```
116
116
  <!-- AURO-GENERATED-CONTENT:END -->
117
117
 
@@ -12,14 +12,14 @@
12
12
  | [checkmark](#checkmark) | `checkmark` | `boolean` | | When attribute is present auro-menu will apply checkmarks to selected options. |
13
13
  | [disabled](#disabled) | `disabled` | `boolean` | | If set, disables the combobox. |
14
14
  | [error](#error) | `error` | `string` | | When defined, sets persistent validity to `customError` and sets the validation message to the attribute value. |
15
- | [fullscreenBreakpoint](#fullscreenBreakpoint) | `fullscreenBreakpoint` | `string` | "sm" | Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile.<br />When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint. |
15
+ | [fullscreenBreakpoint](#fullscreenBreakpoint) | `fullscreenBreakpoint` | `string` | "sm" | Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)<br />at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.<br /><br />When expanded, the dropdown will automatically display in fullscreen mode<br />if the screen size is equal to or smaller than the selected breakpoint. |
16
16
  | [largeFullscreenHeadline](#largeFullscreenHeadline) | `largeFullscreenHeadline` | `boolean` | | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600 |
17
- | [noFilter](#noFilter) | `noFilter` | `boolean` | false | If set, combobox will not filter menuoptions based in input. |
17
+ | [noFilter](#noFilter) | `noFilter` | `boolean` | | If set, combobox will not filter menuoptions based in input. |
18
18
  | [noFlip](#noFlip) | `noFlip` | `boolean` | "false" | If declared, the bib will NOT flip to an alternate position<br />when there isn't enough space in the specified `placement`. |
19
19
  | [noValidate](#noValidate) | `noValidate` | `boolean` | | If set, disables auto-validation on blur. |
20
20
  | [offset](#offset) | `offset` | `number` | "0" | Gap between the trigger element and bib. |
21
21
  | [onDark](#onDark) | `onDark` | `boolean` | | If declared, onDark styles will be applied to the trigger. |
22
- | [optionSelected](#optionSelected) | `optionSelected` | `object` | "undefined" | Specifies the current selected option. |
22
+ | [optionSelected](#optionSelected) | `optionSelected` | `object` | | Specifies the current selected option. |
23
23
  | [placement](#placement) | `placement` | `string` | "bottom-start" | Position where the bib should appear relative to the trigger.<br />Accepted values:<br />"top" \| "right" \| "bottom" \| "left" \|<br />"bottom-start" \| "top-start" \| "top-end" \|<br />"right-start" \| "right-end" \| "bottom-end" \|<br />"left-start" \| "left-end" |
24
24
  | [required](#required) | `required` | `boolean` | | Populates the `required` attribute on the input. Used for client-side validation. |
25
25
  | [setCustomValidity](#setCustomValidity) | `setCustomValidity` | `string` | | Sets a custom help text message to display for all validityStates. |
@@ -27,8 +27,8 @@
27
27
  | [setCustomValidityValueMissing](#setCustomValidityValueMissing) | `setCustomValidityValueMissing` | `string` | | Custom help text message to display when validity = `valueMissing`. |
28
28
  | [triggerIcon](#triggerIcon) | `triggerIcon` | `boolean` | | If set, the `icon` attribute will be applied to the trigger `auro-input` element. |
29
29
  | [type](#type) | `type` | `string` | | Applies the defined value as the type attribute on auro-input. |
30
- | [validity](#validity) | `validity` | `string` | "undefined" | Specifies the `validityState` this element is in. |
31
- | [value](#value) | `value` | | "undefined" | Value selected for the dropdown menu. |
30
+ | [validity](#validity) | `validity` | `string` | | Specifies the `validityState` this element is in. |
31
+ | [value](#value) | `value` | | | Value selected for the dropdown menu. |
32
32
 
33
33
  ## Methods
34
34
 
@@ -3214,6 +3214,7 @@ var tokensCss$1$2 = i$5`:host{--ds-auro-dropdown-label-text-color: var(--ds-basi
3214
3214
 
3215
3215
  const DESIGN_TOKEN_BREAKPOINT_PREFIX = '--ds-grid-breakpoint-';
3216
3216
  const DESIGN_TOKEN_BREAKPOINT_OPTIONS = [
3217
+ 'xl',
3217
3218
  'lg',
3218
3219
  'md',
3219
3220
  'sm',
@@ -3285,6 +3286,7 @@ class AuroDropdownBib extends r$1 {
3285
3286
 
3286
3287
  set mobileFullscreenBreakpoint(value) {
3287
3288
  // verify the defined breakpoint is valid and exit out if not
3289
+ // 'disabled' is a design token breakpoint so it acts as our "undefined" value
3288
3290
  const validatedValue = DESIGN_TOKEN_BREAKPOINT_OPTIONS.includes(value) ? value : undefined;
3289
3291
  if (!validatedValue) {
3290
3292
  this._mobileBreakpointValue = undefined;
@@ -3797,7 +3799,12 @@ class AuroDropdown extends r$1 {
3797
3799
  },
3798
3800
 
3799
3801
  /**
3800
- * Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint.
3802
+ * Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)
3803
+ * at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
3804
+ *
3805
+ * When expanded, the dropdown will automatically display in fullscreen mode
3806
+ * if the screen size is equal to or smaller than the selected breakpoint.
3807
+ * @default sm
3801
3808
  */
3802
3809
  fullscreenBreakpoint: {
3803
3810
  type: String,
@@ -3920,6 +3927,15 @@ class AuroDropdown extends r$1 {
3920
3927
  AuroLibraryRuntimeUtils$1$2.prototype.registerComponent(name, AuroDropdown);
3921
3928
  }
3922
3929
 
3930
+ /**
3931
+ * Accessor for reusing the focusable entity query string.
3932
+ * @private
3933
+ * @returns {string}
3934
+ */
3935
+ get focusableEntityQuery () {
3936
+ return 'auro-input, [auro-input], auro-button, [auro-button], button, input';
3937
+ }
3938
+
3923
3939
  connectedCallback() {
3924
3940
  super.connectedCallback();
3925
3941
  }
@@ -3933,6 +3949,8 @@ class AuroDropdown extends r$1 {
3933
3949
  updated(changedProperties) {
3934
3950
  this.floater.handleUpdate(changedProperties);
3935
3951
 
3952
+ // Note: `disabled` is not a breakpoint (it is not a screen size),
3953
+ // so it looks like we never consume this - however, dropdownBib handles this in the setter as "undefined"
3936
3954
  if (changedProperties.has('fullscreenBreakpoint')) {
3937
3955
  this.bibContent.mobileFullscreenBreakpoint = this.fullscreenBreakpoint;
3938
3956
  }
@@ -4068,7 +4086,7 @@ class AuroDropdown extends r$1 {
4068
4086
 
4069
4087
  this.triggerContentSlot.forEach((node) => {
4070
4088
  if (node.querySelectorAll) {
4071
- const auroElements = node.querySelectorAll('auro-input, [auro-input], auro-button, [auro-button], button, input');
4089
+ const auroElements = node.querySelectorAll(this.focusableEntityQuery);
4072
4090
  auroElements.forEach((auroEl) => {
4073
4091
  auroEl.addEventListener('focus', this.bindFocusEventToTrigger);
4074
4092
  auroEl.addEventListener('blur', this.bindFocusEventToTrigger);
@@ -4089,7 +4107,7 @@ class AuroDropdown extends r$1 {
4089
4107
 
4090
4108
  this.triggerContentSlot.forEach((node) => {
4091
4109
  if (node.querySelectorAll) {
4092
- const auroElements = node.querySelectorAll('auro-input, [auro-input], auro-button, [auro-button], button, input');
4110
+ const auroElements = node.querySelectorAll(this.focusableEntityQuery);
4093
4111
  auroElements.forEach((auroEl) => {
4094
4112
  auroEl.removeEventListener('focus', this.bindFocusEventToTrigger);
4095
4113
  auroEl.removeEventListener('blur', this.bindFocusEventToTrigger);
@@ -8764,7 +8782,8 @@ class BaseInput extends r$1 {
8764
8782
  * If set, disables the input.
8765
8783
  */
8766
8784
  disabled: {
8767
- type: Boolean
8785
+ type: Boolean,
8786
+ reflect: true
8768
8787
  },
8769
8788
 
8770
8789
  /**
@@ -8794,7 +8813,8 @@ class BaseInput extends r$1 {
8794
8813
  * If set, will render an icon inside the input to the left of the value. Support is limited to auro-input instances with credit card format.
8795
8814
  */
8796
8815
  icon: {
8797
- type: Boolean
8816
+ type: Boolean,
8817
+ reflect: true
8798
8818
  },
8799
8819
 
8800
8820
  /**
@@ -8850,7 +8870,8 @@ class BaseInput extends r$1 {
8850
8870
  * If set, disables auto-validation on blur.
8851
8871
  */
8852
8872
  noValidate: {
8853
- type: Boolean
8873
+ type: Boolean,
8874
+ reflect: true
8854
8875
  },
8855
8876
 
8856
8877
  /**
@@ -8880,14 +8901,16 @@ class BaseInput extends r$1 {
8880
8901
  * Makes the input read-only, but can be set programmatically.
8881
8902
  */
8882
8903
  readonly: {
8883
- type: Boolean
8904
+ type: Boolean,
8905
+ reflect: true
8884
8906
  },
8885
8907
 
8886
8908
  /**
8887
8909
  * Populates the `required` attribute on the input. Used for client-side validation.
8888
8910
  */
8889
8911
  required: {
8890
- type: Boolean
8912
+ type: Boolean,
8913
+ reflect: true
8891
8914
  },
8892
8915
 
8893
8916
  /**
@@ -11475,6 +11498,8 @@ class AuroBibtemplate extends r$1 {
11475
11498
  constructor() {
11476
11499
  super();
11477
11500
 
11501
+ this.large = false;
11502
+
11478
11503
  AuroLibraryRuntimeUtils$1.prototype.handleComponentTagRename(this, 'auro-bibtemplate');
11479
11504
 
11480
11505
  const versioning = new AuroDependencyVersioning();
@@ -11723,11 +11748,6 @@ class AuroCombobox extends r$1 {
11723
11748
  constructor() {
11724
11749
  super();
11725
11750
 
11726
- this.noFilter = false;
11727
- this.validity = undefined;
11728
- this.value = undefined;
11729
- this.optionSelected = undefined;
11730
-
11731
11751
  this.privateDefaults();
11732
11752
  }
11733
11753
 
@@ -11737,11 +11757,24 @@ class AuroCombobox extends r$1 {
11737
11757
  */
11738
11758
  privateDefaults() {
11739
11759
  this.onDark = false;
11760
+
11761
+ this.noFilter = false;
11762
+ this.validity = undefined;
11763
+ this.value = undefined;
11764
+ this.optionSelected = undefined;
11765
+
11766
+ this.checkmark = false;
11767
+ this.disabled = false;
11768
+ this.noValidate = false;
11769
+ this.required = false;
11770
+ this.triggerIcon = false;
11771
+
11740
11772
  this.availableOptions = [];
11741
11773
  this.optionActive = null;
11742
11774
  this.msgSelectionMissing = 'Please select an option.';
11743
11775
 
11744
11776
  this.fullscreenBreakpoint = 'sm';
11777
+ this.largeFullscreenHeadline = false;
11745
11778
 
11746
11779
  this.validation = new AuroFormValidation$1();
11747
11780
 
@@ -11832,7 +11865,8 @@ class AuroCombobox extends r$1 {
11832
11865
  * If set, disables auto-validation on blur.
11833
11866
  */
11834
11867
  noValidate: {
11835
- type: Boolean
11868
+ type: Boolean,
11869
+ reflect: true
11836
11870
  },
11837
11871
 
11838
11872
  /**
@@ -11946,8 +11980,11 @@ class AuroCombobox extends r$1 {
11946
11980
  },
11947
11981
 
11948
11982
  /**
11949
- * Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile.
11950
- * When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint.
11983
+ * Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)
11984
+ * at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
11985
+ *
11986
+ * When expanded, the dropdown will automatically display in fullscreen mode
11987
+ * if the screen size is equal to or smaller than the selected breakpoint.
11951
11988
  * @default sm
11952
11989
  */
11953
11990
  fullscreenBreakpoint: {
@@ -11959,8 +11996,7 @@ class AuroCombobox extends r$1 {
11959
11996
  * @private
11960
11997
  */
11961
11998
  isDropdownFullscreen: {
11962
- type: Boolean,
11963
- reflect: false
11999
+ type: Boolean
11964
12000
  }
11965
12001
  };
11966
12002
  }
@@ -3072,6 +3072,7 @@ var tokensCss$1$2 = i$5`:host{--ds-auro-dropdown-label-text-color: var(--ds-basi
3072
3072
 
3073
3073
  const DESIGN_TOKEN_BREAKPOINT_PREFIX = '--ds-grid-breakpoint-';
3074
3074
  const DESIGN_TOKEN_BREAKPOINT_OPTIONS = [
3075
+ 'xl',
3075
3076
  'lg',
3076
3077
  'md',
3077
3078
  'sm',
@@ -3143,6 +3144,7 @@ class AuroDropdownBib extends r$1 {
3143
3144
 
3144
3145
  set mobileFullscreenBreakpoint(value) {
3145
3146
  // verify the defined breakpoint is valid and exit out if not
3147
+ // 'disabled' is a design token breakpoint so it acts as our "undefined" value
3146
3148
  const validatedValue = DESIGN_TOKEN_BREAKPOINT_OPTIONS.includes(value) ? value : undefined;
3147
3149
  if (!validatedValue) {
3148
3150
  this._mobileBreakpointValue = undefined;
@@ -3655,7 +3657,12 @@ class AuroDropdown extends r$1 {
3655
3657
  },
3656
3658
 
3657
3659
  /**
3658
- * Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint.
3660
+ * Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)
3661
+ * at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
3662
+ *
3663
+ * When expanded, the dropdown will automatically display in fullscreen mode
3664
+ * if the screen size is equal to or smaller than the selected breakpoint.
3665
+ * @default sm
3659
3666
  */
3660
3667
  fullscreenBreakpoint: {
3661
3668
  type: String,
@@ -3778,6 +3785,15 @@ class AuroDropdown extends r$1 {
3778
3785
  AuroLibraryRuntimeUtils$1$2.prototype.registerComponent(name, AuroDropdown);
3779
3786
  }
3780
3787
 
3788
+ /**
3789
+ * Accessor for reusing the focusable entity query string.
3790
+ * @private
3791
+ * @returns {string}
3792
+ */
3793
+ get focusableEntityQuery () {
3794
+ return 'auro-input, [auro-input], auro-button, [auro-button], button, input';
3795
+ }
3796
+
3781
3797
  connectedCallback() {
3782
3798
  super.connectedCallback();
3783
3799
  }
@@ -3791,6 +3807,8 @@ class AuroDropdown extends r$1 {
3791
3807
  updated(changedProperties) {
3792
3808
  this.floater.handleUpdate(changedProperties);
3793
3809
 
3810
+ // Note: `disabled` is not a breakpoint (it is not a screen size),
3811
+ // so it looks like we never consume this - however, dropdownBib handles this in the setter as "undefined"
3794
3812
  if (changedProperties.has('fullscreenBreakpoint')) {
3795
3813
  this.bibContent.mobileFullscreenBreakpoint = this.fullscreenBreakpoint;
3796
3814
  }
@@ -3926,7 +3944,7 @@ class AuroDropdown extends r$1 {
3926
3944
 
3927
3945
  this.triggerContentSlot.forEach((node) => {
3928
3946
  if (node.querySelectorAll) {
3929
- const auroElements = node.querySelectorAll('auro-input, [auro-input], auro-button, [auro-button], button, input');
3947
+ const auroElements = node.querySelectorAll(this.focusableEntityQuery);
3930
3948
  auroElements.forEach((auroEl) => {
3931
3949
  auroEl.addEventListener('focus', this.bindFocusEventToTrigger);
3932
3950
  auroEl.addEventListener('blur', this.bindFocusEventToTrigger);
@@ -3947,7 +3965,7 @@ class AuroDropdown extends r$1 {
3947
3965
 
3948
3966
  this.triggerContentSlot.forEach((node) => {
3949
3967
  if (node.querySelectorAll) {
3950
- const auroElements = node.querySelectorAll('auro-input, [auro-input], auro-button, [auro-button], button, input');
3968
+ const auroElements = node.querySelectorAll(this.focusableEntityQuery);
3951
3969
  auroElements.forEach((auroEl) => {
3952
3970
  auroEl.removeEventListener('focus', this.bindFocusEventToTrigger);
3953
3971
  auroEl.removeEventListener('blur', this.bindFocusEventToTrigger);
@@ -8622,7 +8640,8 @@ class BaseInput extends r$1 {
8622
8640
  * If set, disables the input.
8623
8641
  */
8624
8642
  disabled: {
8625
- type: Boolean
8643
+ type: Boolean,
8644
+ reflect: true
8626
8645
  },
8627
8646
 
8628
8647
  /**
@@ -8652,7 +8671,8 @@ class BaseInput extends r$1 {
8652
8671
  * If set, will render an icon inside the input to the left of the value. Support is limited to auro-input instances with credit card format.
8653
8672
  */
8654
8673
  icon: {
8655
- type: Boolean
8674
+ type: Boolean,
8675
+ reflect: true
8656
8676
  },
8657
8677
 
8658
8678
  /**
@@ -8708,7 +8728,8 @@ class BaseInput extends r$1 {
8708
8728
  * If set, disables auto-validation on blur.
8709
8729
  */
8710
8730
  noValidate: {
8711
- type: Boolean
8731
+ type: Boolean,
8732
+ reflect: true
8712
8733
  },
8713
8734
 
8714
8735
  /**
@@ -8738,14 +8759,16 @@ class BaseInput extends r$1 {
8738
8759
  * Makes the input read-only, but can be set programmatically.
8739
8760
  */
8740
8761
  readonly: {
8741
- type: Boolean
8762
+ type: Boolean,
8763
+ reflect: true
8742
8764
  },
8743
8765
 
8744
8766
  /**
8745
8767
  * Populates the `required` attribute on the input. Used for client-side validation.
8746
8768
  */
8747
8769
  required: {
8748
- type: Boolean
8770
+ type: Boolean,
8771
+ reflect: true
8749
8772
  },
8750
8773
 
8751
8774
  /**
@@ -11333,6 +11356,8 @@ class AuroBibtemplate extends r$1 {
11333
11356
  constructor() {
11334
11357
  super();
11335
11358
 
11359
+ this.large = false;
11360
+
11336
11361
  AuroLibraryRuntimeUtils$1.prototype.handleComponentTagRename(this, 'auro-bibtemplate');
11337
11362
 
11338
11363
  const versioning = new AuroDependencyVersioning();
@@ -11581,11 +11606,6 @@ class AuroCombobox extends r$1 {
11581
11606
  constructor() {
11582
11607
  super();
11583
11608
 
11584
- this.noFilter = false;
11585
- this.validity = undefined;
11586
- this.value = undefined;
11587
- this.optionSelected = undefined;
11588
-
11589
11609
  this.privateDefaults();
11590
11610
  }
11591
11611
 
@@ -11595,11 +11615,24 @@ class AuroCombobox extends r$1 {
11595
11615
  */
11596
11616
  privateDefaults() {
11597
11617
  this.onDark = false;
11618
+
11619
+ this.noFilter = false;
11620
+ this.validity = undefined;
11621
+ this.value = undefined;
11622
+ this.optionSelected = undefined;
11623
+
11624
+ this.checkmark = false;
11625
+ this.disabled = false;
11626
+ this.noValidate = false;
11627
+ this.required = false;
11628
+ this.triggerIcon = false;
11629
+
11598
11630
  this.availableOptions = [];
11599
11631
  this.optionActive = null;
11600
11632
  this.msgSelectionMissing = 'Please select an option.';
11601
11633
 
11602
11634
  this.fullscreenBreakpoint = 'sm';
11635
+ this.largeFullscreenHeadline = false;
11603
11636
 
11604
11637
  this.validation = new AuroFormValidation$1();
11605
11638
 
@@ -11690,7 +11723,8 @@ class AuroCombobox extends r$1 {
11690
11723
  * If set, disables auto-validation on blur.
11691
11724
  */
11692
11725
  noValidate: {
11693
- type: Boolean
11726
+ type: Boolean,
11727
+ reflect: true
11694
11728
  },
11695
11729
 
11696
11730
  /**
@@ -11804,8 +11838,11 @@ class AuroCombobox extends r$1 {
11804
11838
  },
11805
11839
 
11806
11840
  /**
11807
- * Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile.
11808
- * When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint.
11841
+ * Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)
11842
+ * at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
11843
+ *
11844
+ * When expanded, the dropdown will automatically display in fullscreen mode
11845
+ * if the screen size is equal to or smaller than the selected breakpoint.
11809
11846
  * @default sm
11810
11847
  */
11811
11848
  fullscreenBreakpoint: {
@@ -11817,8 +11854,7 @@ class AuroCombobox extends r$1 {
11817
11854
  * @private
11818
11855
  */
11819
11856
  isDropdownFullscreen: {
11820
- type: Boolean,
11821
- reflect: false
11857
+ type: Boolean
11822
11858
  }
11823
11859
  };
11824
11860
  }
@@ -111,7 +111,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
111
111
  In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
112
112
 
113
113
  ```html
114
- <script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.2.1/auro-combobox/+esm"></script>
114
+ <script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.0.1/auro-combobox/+esm"></script>
115
115
  ```
116
116
  <!-- AURO-GENERATED-CONTENT:END -->
117
117
 
@@ -65,6 +65,7 @@ export class AuroCombobox extends LitElement {
65
65
  */
66
66
  noValidate: {
67
67
  type: BooleanConstructor;
68
+ reflect: boolean;
68
69
  };
69
70
  /**
70
71
  * Gap between the trigger element and bib.
@@ -164,8 +165,11 @@ export class AuroCombobox extends LitElement {
164
165
  reflect: boolean;
165
166
  };
166
167
  /**
167
- * Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile.
168
- * When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint.
168
+ * Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)
169
+ * at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
170
+ *
171
+ * When expanded, the dropdown will automatically display in fullscreen mode
172
+ * if the screen size is equal to or smaller than the selected breakpoint.
169
173
  * @default sm
170
174
  */
171
175
  fullscreenBreakpoint: {
@@ -177,7 +181,6 @@ export class AuroCombobox extends LitElement {
177
181
  */
178
182
  isDropdownFullscreen: {
179
183
  type: BooleanConstructor;
180
- reflect: boolean;
181
184
  };
182
185
  };
183
186
  static get styles(): import("lit").CSSResult[];
@@ -190,20 +193,26 @@ export class AuroCombobox extends LitElement {
190
193
  *
191
194
  */
192
195
  static register(name?: string): void;
193
- noFilter: boolean;
194
- validity: any;
195
- value: any;
196
- optionSelected: any[];
197
196
  /**
198
197
  * @private
199
198
  * @returns {void} Internal defaults.
200
199
  */
201
200
  private privateDefaults;
202
201
  onDark: boolean;
202
+ noFilter: boolean;
203
+ validity: any;
204
+ value: any;
205
+ optionSelected: any[];
206
+ checkmark: boolean;
207
+ disabled: boolean;
208
+ noValidate: boolean;
209
+ required: boolean;
210
+ triggerIcon: boolean;
203
211
  availableOptions: any[];
204
212
  optionActive: any;
205
213
  msgSelectionMissing: string;
206
214
  fullscreenBreakpoint: string;
215
+ largeFullscreenHeadline: boolean;
207
216
  validation: AuroFormValidation;
208
217
  runtimeUtils: any;
209
218
  isHiddenWhileLoading: boolean;