@aurodesignsystem/auro-formkit 3.2.0-beta.1 → 3.2.0

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 (39) hide show
  1. package/CHANGELOG.md +2 -7
  2. package/components/combobox/demo/api.md +1 -1
  3. package/components/combobox/demo/api.min.js +6 -26
  4. package/components/combobox/demo/index.min.js +6 -26
  5. package/components/combobox/dist/auro-combobox.d.ts +2 -5
  6. package/components/combobox/dist/index.js +5 -26
  7. package/components/combobox/dist/registered.js +5 -26
  8. package/components/counter/demo/api.md +1 -1
  9. package/components/counter/demo/api.min.js +5 -26
  10. package/components/counter/demo/index.min.js +5 -26
  11. package/components/counter/dist/auro-counter-group.d.ts +2 -5
  12. package/components/counter/dist/index.js +5 -26
  13. package/components/counter/dist/registered.js +5 -26
  14. package/components/datepicker/demo/api.md +0 -1
  15. package/components/datepicker/demo/api.min.js +4 -36
  16. package/components/datepicker/demo/index.min.js +4 -36
  17. package/components/datepicker/dist/auro-datepicker.d.ts +0 -13
  18. package/components/datepicker/dist/index.js +4 -36
  19. package/components/datepicker/dist/registered.js +4 -36
  20. package/components/dropdown/demo/api.md +1 -1
  21. package/components/dropdown/demo/api.min.js +3 -21
  22. package/components/dropdown/demo/index.md +0 -83
  23. package/components/dropdown/demo/index.min.js +3 -21
  24. package/components/dropdown/dist/auro-dropdown.d.ts +1 -12
  25. package/components/dropdown/dist/index.js +3 -21
  26. package/components/dropdown/dist/registered.js +3 -21
  27. package/components/menu/demo/api.min.js +1 -0
  28. package/components/menu/demo/index.min.js +1 -0
  29. package/components/menu/dist/index.js +1 -0
  30. package/components/menu/dist/registered.js +1 -0
  31. package/components/select/demo/api.md +6 -5
  32. package/components/select/demo/api.min.js +56 -26
  33. package/components/select/demo/index.md +1 -46
  34. package/components/select/demo/index.min.js +56 -26
  35. package/components/select/dist/auro-select.d.ts +5 -5
  36. package/components/select/dist/index.js +55 -26
  37. package/components/select/dist/registered.js +55 -26
  38. package/package.json +1 -1
  39. package/components/form/demo/autocomplete.html +0 -15
package/CHANGELOG.md CHANGED
@@ -1,16 +1,11 @@
1
1
  # Semantic Release Automated Changelog
2
2
 
3
- # [3.2.0-beta.1](https://github.com/AlaskaAirlines/auro-formkit/compare/v3.1.0...v3.2.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))
3
+ # [3.2.0](https://github.com/AlaskaAirlines/auro-formkit/compare/v3.1.0...v3.2.0) (2025-04-30)
9
4
 
10
5
 
11
6
  ### Features
12
7
 
13
- * surface fullscreenBreakpoint with new `disabled` value ([4f00b48](https://github.com/AlaskaAirlines/auro-formkit/commit/4f00b4808254490419ca6ae387344e49834ca896))
8
+ * added press-key-to-jump-to-selection functionality to auro-select component ([66fed78](https://github.com/AlaskaAirlines/auro-formkit/commit/66fed788ab07e431b42850da4167166eaa981473)), closes [#404](https://github.com/AlaskaAirlines/auro-formkit/issues/404)
14
9
 
15
10
  # [3.1.0](https://github.com/AlaskaAirlines/auro-formkit/compare/v3.0.1...v3.1.0) (2025-04-30)
16
11
 
@@ -12,7 +12,7 @@
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 (`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. |
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. |
16
16
  | [largeFullscreenHeadline](#largeFullscreenHeadline) | `largeFullscreenHeadline` | `boolean` | | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600 |
17
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`. |
@@ -3657,7 +3657,6 @@ var tokensCss$1$2 = i$5`:host{--ds-auro-dropdown-label-text-color: var(--ds-basi
3657
3657
 
3658
3658
  const DESIGN_TOKEN_BREAKPOINT_PREFIX = '--ds-grid-breakpoint-';
3659
3659
  const DESIGN_TOKEN_BREAKPOINT_OPTIONS = [
3660
- 'xl',
3661
3660
  'lg',
3662
3661
  'md',
3663
3662
  'sm',
@@ -3729,7 +3728,6 @@ class AuroDropdownBib extends r$1 {
3729
3728
 
3730
3729
  set mobileFullscreenBreakpoint(value) {
3731
3730
  // verify the defined breakpoint is valid and exit out if not
3732
- // 'disabled' is a design token breakpoint so it acts as our "undefined" value
3733
3731
  const validatedValue = DESIGN_TOKEN_BREAKPOINT_OPTIONS.includes(value) ? value : undefined;
3734
3732
  if (!validatedValue) {
3735
3733
  this._mobileBreakpointValue = undefined;
@@ -4255,12 +4253,7 @@ class AuroDropdown extends r$1 {
4255
4253
  },
4256
4254
 
4257
4255
  /**
4258
- * Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)
4259
- * at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
4260
- *
4261
- * When expanded, the dropdown will automatically display in fullscreen mode
4262
- * if the screen size is equal to or smaller than the selected breakpoint.
4263
- * @default sm
4256
+ * 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.
4264
4257
  */
4265
4258
  fullscreenBreakpoint: {
4266
4259
  type: String,
@@ -4400,15 +4393,6 @@ class AuroDropdown extends r$1 {
4400
4393
  AuroLibraryRuntimeUtils$1$2.prototype.registerComponent(name, AuroDropdown);
4401
4394
  }
4402
4395
 
4403
- /**
4404
- * Accessor for reusing the focusable entity query string.
4405
- * @private
4406
- * @returns {string}
4407
- */
4408
- get focusableEntityQuery () {
4409
- return 'auro-input, [auro-input], auro-button, [auro-button], button, input';
4410
- }
4411
-
4412
4396
  connectedCallback() {
4413
4397
  super.connectedCallback();
4414
4398
  }
@@ -4422,8 +4406,6 @@ class AuroDropdown extends r$1 {
4422
4406
  updated(changedProperties) {
4423
4407
  this.floater.handleUpdate(changedProperties);
4424
4408
 
4425
- // Note: `disabled` is not a breakpoint (it is not a screen size),
4426
- // so it looks like we never consume this - however, dropdownBib handles this in the setter as "undefined"
4427
4409
  if (changedProperties.has('fullscreenBreakpoint')) {
4428
4410
  this.bibContent.mobileFullscreenBreakpoint = this.fullscreenBreakpoint;
4429
4411
  }
@@ -4574,7 +4556,7 @@ class AuroDropdown extends r$1 {
4574
4556
 
4575
4557
  this.triggerContentSlot.forEach((node) => {
4576
4558
  if (node.querySelectorAll) {
4577
- const auroElements = node.querySelectorAll(this.focusableEntityQuery);
4559
+ const auroElements = node.querySelectorAll('auro-input, [auro-input], auro-button, [auro-button], button, input');
4578
4560
  auroElements.forEach((auroEl) => {
4579
4561
  auroEl.addEventListener('focus', this.bindFocusEventToTrigger);
4580
4562
  auroEl.addEventListener('blur', this.bindFocusEventToTrigger);
@@ -4595,7 +4577,7 @@ class AuroDropdown extends r$1 {
4595
4577
 
4596
4578
  this.triggerContentSlot.forEach((node) => {
4597
4579
  if (node.querySelectorAll) {
4598
- const auroElements = node.querySelectorAll(this.focusableEntityQuery);
4580
+ const auroElements = node.querySelectorAll('auro-input, [auro-input], auro-button, [auro-button], button, input');
4599
4581
  auroElements.forEach((auroEl) => {
4600
4582
  auroEl.removeEventListener('focus', this.bindFocusEventToTrigger);
4601
4583
  auroEl.removeEventListener('blur', this.bindFocusEventToTrigger);
@@ -13006,11 +12988,8 @@ class AuroCombobox extends r$1 {
13006
12988
  },
13007
12989
 
13008
12990
  /**
13009
- * Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)
13010
- * at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
13011
- *
13012
- * When expanded, the dropdown will automatically display in fullscreen mode
13013
- * if the screen size is equal to or smaller than the selected breakpoint.
12991
+ * Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile.
12992
+ * When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint.
13014
12993
  * @default sm
13015
12994
  */
13016
12995
  fullscreenBreakpoint: {
@@ -14544,6 +14523,7 @@ class AuroMenu extends r$1 {
14544
14523
  this.items.forEach((item) => item.classList.remove('active'));
14545
14524
  this.items[index].classList.add('active');
14546
14525
  this.optionActive = this.items[index];
14526
+ this.index = index;
14547
14527
 
14548
14528
  dispatchMenuEvent(this, 'auroMenu-activatedOption', this.items[index]);
14549
14529
  }
@@ -3515,7 +3515,6 @@ var tokensCss$1$2 = i$5`:host{--ds-auro-dropdown-label-text-color: var(--ds-basi
3515
3515
 
3516
3516
  const DESIGN_TOKEN_BREAKPOINT_PREFIX = '--ds-grid-breakpoint-';
3517
3517
  const DESIGN_TOKEN_BREAKPOINT_OPTIONS = [
3518
- 'xl',
3519
3518
  'lg',
3520
3519
  'md',
3521
3520
  'sm',
@@ -3587,7 +3586,6 @@ class AuroDropdownBib extends r$1 {
3587
3586
 
3588
3587
  set mobileFullscreenBreakpoint(value) {
3589
3588
  // verify the defined breakpoint is valid and exit out if not
3590
- // 'disabled' is a design token breakpoint so it acts as our "undefined" value
3591
3589
  const validatedValue = DESIGN_TOKEN_BREAKPOINT_OPTIONS.includes(value) ? value : undefined;
3592
3590
  if (!validatedValue) {
3593
3591
  this._mobileBreakpointValue = undefined;
@@ -4113,12 +4111,7 @@ class AuroDropdown extends r$1 {
4113
4111
  },
4114
4112
 
4115
4113
  /**
4116
- * Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)
4117
- * at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
4118
- *
4119
- * When expanded, the dropdown will automatically display in fullscreen mode
4120
- * if the screen size is equal to or smaller than the selected breakpoint.
4121
- * @default sm
4114
+ * 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.
4122
4115
  */
4123
4116
  fullscreenBreakpoint: {
4124
4117
  type: String,
@@ -4258,15 +4251,6 @@ class AuroDropdown extends r$1 {
4258
4251
  AuroLibraryRuntimeUtils$1$2.prototype.registerComponent(name, AuroDropdown);
4259
4252
  }
4260
4253
 
4261
- /**
4262
- * Accessor for reusing the focusable entity query string.
4263
- * @private
4264
- * @returns {string}
4265
- */
4266
- get focusableEntityQuery () {
4267
- return 'auro-input, [auro-input], auro-button, [auro-button], button, input';
4268
- }
4269
-
4270
4254
  connectedCallback() {
4271
4255
  super.connectedCallback();
4272
4256
  }
@@ -4280,8 +4264,6 @@ class AuroDropdown extends r$1 {
4280
4264
  updated(changedProperties) {
4281
4265
  this.floater.handleUpdate(changedProperties);
4282
4266
 
4283
- // Note: `disabled` is not a breakpoint (it is not a screen size),
4284
- // so it looks like we never consume this - however, dropdownBib handles this in the setter as "undefined"
4285
4267
  if (changedProperties.has('fullscreenBreakpoint')) {
4286
4268
  this.bibContent.mobileFullscreenBreakpoint = this.fullscreenBreakpoint;
4287
4269
  }
@@ -4432,7 +4414,7 @@ class AuroDropdown extends r$1 {
4432
4414
 
4433
4415
  this.triggerContentSlot.forEach((node) => {
4434
4416
  if (node.querySelectorAll) {
4435
- const auroElements = node.querySelectorAll(this.focusableEntityQuery);
4417
+ const auroElements = node.querySelectorAll('auro-input, [auro-input], auro-button, [auro-button], button, input');
4436
4418
  auroElements.forEach((auroEl) => {
4437
4419
  auroEl.addEventListener('focus', this.bindFocusEventToTrigger);
4438
4420
  auroEl.addEventListener('blur', this.bindFocusEventToTrigger);
@@ -4453,7 +4435,7 @@ class AuroDropdown extends r$1 {
4453
4435
 
4454
4436
  this.triggerContentSlot.forEach((node) => {
4455
4437
  if (node.querySelectorAll) {
4456
- const auroElements = node.querySelectorAll(this.focusableEntityQuery);
4438
+ const auroElements = node.querySelectorAll('auro-input, [auro-input], auro-button, [auro-button], button, input');
4457
4439
  auroElements.forEach((auroEl) => {
4458
4440
  auroEl.removeEventListener('focus', this.bindFocusEventToTrigger);
4459
4441
  auroEl.removeEventListener('blur', this.bindFocusEventToTrigger);
@@ -12864,11 +12846,8 @@ class AuroCombobox extends r$1 {
12864
12846
  },
12865
12847
 
12866
12848
  /**
12867
- * Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)
12868
- * at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
12869
- *
12870
- * When expanded, the dropdown will automatically display in fullscreen mode
12871
- * if the screen size is equal to or smaller than the selected breakpoint.
12849
+ * Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile.
12850
+ * When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint.
12872
12851
  * @default sm
12873
12852
  */
12874
12853
  fullscreenBreakpoint: {
@@ -14402,6 +14381,7 @@ class AuroMenu extends r$1 {
14402
14381
  this.items.forEach((item) => item.classList.remove('active'));
14403
14382
  this.items[index].classList.add('active');
14404
14383
  this.optionActive = this.items[index];
14384
+ this.index = index;
14405
14385
 
14406
14386
  dispatchMenuEvent(this, 'auroMenu-activatedOption', this.items[index]);
14407
14387
  }
@@ -183,11 +183,8 @@ export class AuroCombobox extends LitElement {
183
183
  reflect: boolean;
184
184
  };
185
185
  /**
186
- * Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)
187
- * at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
188
- *
189
- * When expanded, the dropdown will automatically display in fullscreen mode
190
- * if the screen size is equal to or smaller than the selected breakpoint.
186
+ * Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile.
187
+ * When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint.
191
188
  * @default sm
192
189
  */
193
190
  fullscreenBreakpoint: {
@@ -3446,7 +3446,6 @@ var tokensCss$1$1 = css`:host{--ds-auro-dropdown-label-text-color: var(--ds-basi
3446
3446
 
3447
3447
  const DESIGN_TOKEN_BREAKPOINT_PREFIX = '--ds-grid-breakpoint-';
3448
3448
  const DESIGN_TOKEN_BREAKPOINT_OPTIONS = [
3449
- 'xl',
3450
3449
  'lg',
3451
3450
  'md',
3452
3451
  'sm',
@@ -3518,7 +3517,6 @@ class AuroDropdownBib extends LitElement {
3518
3517
 
3519
3518
  set mobileFullscreenBreakpoint(value) {
3520
3519
  // verify the defined breakpoint is valid and exit out if not
3521
- // 'disabled' is a design token breakpoint so it acts as our "undefined" value
3522
3520
  const validatedValue = DESIGN_TOKEN_BREAKPOINT_OPTIONS.includes(value) ? value : undefined;
3523
3521
  if (!validatedValue) {
3524
3522
  this._mobileBreakpointValue = undefined;
@@ -4044,12 +4042,7 @@ class AuroDropdown extends LitElement {
4044
4042
  },
4045
4043
 
4046
4044
  /**
4047
- * Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)
4048
- * at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
4049
- *
4050
- * When expanded, the dropdown will automatically display in fullscreen mode
4051
- * if the screen size is equal to or smaller than the selected breakpoint.
4052
- * @default sm
4045
+ * 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.
4053
4046
  */
4054
4047
  fullscreenBreakpoint: {
4055
4048
  type: String,
@@ -4189,15 +4182,6 @@ class AuroDropdown extends LitElement {
4189
4182
  AuroLibraryRuntimeUtils$1$2.prototype.registerComponent(name, AuroDropdown);
4190
4183
  }
4191
4184
 
4192
- /**
4193
- * Accessor for reusing the focusable entity query string.
4194
- * @private
4195
- * @returns {string}
4196
- */
4197
- get focusableEntityQuery () {
4198
- return 'auro-input, [auro-input], auro-button, [auro-button], button, input';
4199
- }
4200
-
4201
4185
  connectedCallback() {
4202
4186
  super.connectedCallback();
4203
4187
  }
@@ -4211,8 +4195,6 @@ class AuroDropdown extends LitElement {
4211
4195
  updated(changedProperties) {
4212
4196
  this.floater.handleUpdate(changedProperties);
4213
4197
 
4214
- // Note: `disabled` is not a breakpoint (it is not a screen size),
4215
- // so it looks like we never consume this - however, dropdownBib handles this in the setter as "undefined"
4216
4198
  if (changedProperties.has('fullscreenBreakpoint')) {
4217
4199
  this.bibContent.mobileFullscreenBreakpoint = this.fullscreenBreakpoint;
4218
4200
  }
@@ -4363,7 +4345,7 @@ class AuroDropdown extends LitElement {
4363
4345
 
4364
4346
  this.triggerContentSlot.forEach((node) => {
4365
4347
  if (node.querySelectorAll) {
4366
- const auroElements = node.querySelectorAll(this.focusableEntityQuery);
4348
+ const auroElements = node.querySelectorAll('auro-input, [auro-input], auro-button, [auro-button], button, input');
4367
4349
  auroElements.forEach((auroEl) => {
4368
4350
  auroEl.addEventListener('focus', this.bindFocusEventToTrigger);
4369
4351
  auroEl.addEventListener('blur', this.bindFocusEventToTrigger);
@@ -4384,7 +4366,7 @@ class AuroDropdown extends LitElement {
4384
4366
 
4385
4367
  this.triggerContentSlot.forEach((node) => {
4386
4368
  if (node.querySelectorAll) {
4387
- const auroElements = node.querySelectorAll(this.focusableEntityQuery);
4369
+ const auroElements = node.querySelectorAll('auro-input, [auro-input], auro-button, [auro-button], button, input');
4388
4370
  auroElements.forEach((auroEl) => {
4389
4371
  auroEl.removeEventListener('focus', this.bindFocusEventToTrigger);
4390
4372
  auroEl.removeEventListener('blur', this.bindFocusEventToTrigger);
@@ -12782,11 +12764,8 @@ class AuroCombobox extends LitElement {
12782
12764
  },
12783
12765
 
12784
12766
  /**
12785
- * Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)
12786
- * at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
12787
- *
12788
- * When expanded, the dropdown will automatically display in fullscreen mode
12789
- * if the screen size is equal to or smaller than the selected breakpoint.
12767
+ * Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile.
12768
+ * When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint.
12790
12769
  * @default sm
12791
12770
  */
12792
12771
  fullscreenBreakpoint: {
@@ -3446,7 +3446,6 @@ var tokensCss$1$1 = css`:host{--ds-auro-dropdown-label-text-color: var(--ds-basi
3446
3446
 
3447
3447
  const DESIGN_TOKEN_BREAKPOINT_PREFIX = '--ds-grid-breakpoint-';
3448
3448
  const DESIGN_TOKEN_BREAKPOINT_OPTIONS = [
3449
- 'xl',
3450
3449
  'lg',
3451
3450
  'md',
3452
3451
  'sm',
@@ -3518,7 +3517,6 @@ class AuroDropdownBib extends LitElement {
3518
3517
 
3519
3518
  set mobileFullscreenBreakpoint(value) {
3520
3519
  // verify the defined breakpoint is valid and exit out if not
3521
- // 'disabled' is a design token breakpoint so it acts as our "undefined" value
3522
3520
  const validatedValue = DESIGN_TOKEN_BREAKPOINT_OPTIONS.includes(value) ? value : undefined;
3523
3521
  if (!validatedValue) {
3524
3522
  this._mobileBreakpointValue = undefined;
@@ -4044,12 +4042,7 @@ class AuroDropdown extends LitElement {
4044
4042
  },
4045
4043
 
4046
4044
  /**
4047
- * Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)
4048
- * at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
4049
- *
4050
- * When expanded, the dropdown will automatically display in fullscreen mode
4051
- * if the screen size is equal to or smaller than the selected breakpoint.
4052
- * @default sm
4045
+ * 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.
4053
4046
  */
4054
4047
  fullscreenBreakpoint: {
4055
4048
  type: String,
@@ -4189,15 +4182,6 @@ class AuroDropdown extends LitElement {
4189
4182
  AuroLibraryRuntimeUtils$1$2.prototype.registerComponent(name, AuroDropdown);
4190
4183
  }
4191
4184
 
4192
- /**
4193
- * Accessor for reusing the focusable entity query string.
4194
- * @private
4195
- * @returns {string}
4196
- */
4197
- get focusableEntityQuery () {
4198
- return 'auro-input, [auro-input], auro-button, [auro-button], button, input';
4199
- }
4200
-
4201
4185
  connectedCallback() {
4202
4186
  super.connectedCallback();
4203
4187
  }
@@ -4211,8 +4195,6 @@ class AuroDropdown extends LitElement {
4211
4195
  updated(changedProperties) {
4212
4196
  this.floater.handleUpdate(changedProperties);
4213
4197
 
4214
- // Note: `disabled` is not a breakpoint (it is not a screen size),
4215
- // so it looks like we never consume this - however, dropdownBib handles this in the setter as "undefined"
4216
4198
  if (changedProperties.has('fullscreenBreakpoint')) {
4217
4199
  this.bibContent.mobileFullscreenBreakpoint = this.fullscreenBreakpoint;
4218
4200
  }
@@ -4363,7 +4345,7 @@ class AuroDropdown extends LitElement {
4363
4345
 
4364
4346
  this.triggerContentSlot.forEach((node) => {
4365
4347
  if (node.querySelectorAll) {
4366
- const auroElements = node.querySelectorAll(this.focusableEntityQuery);
4348
+ const auroElements = node.querySelectorAll('auro-input, [auro-input], auro-button, [auro-button], button, input');
4367
4349
  auroElements.forEach((auroEl) => {
4368
4350
  auroEl.addEventListener('focus', this.bindFocusEventToTrigger);
4369
4351
  auroEl.addEventListener('blur', this.bindFocusEventToTrigger);
@@ -4384,7 +4366,7 @@ class AuroDropdown extends LitElement {
4384
4366
 
4385
4367
  this.triggerContentSlot.forEach((node) => {
4386
4368
  if (node.querySelectorAll) {
4387
- const auroElements = node.querySelectorAll(this.focusableEntityQuery);
4369
+ const auroElements = node.querySelectorAll('auro-input, [auro-input], auro-button, [auro-button], button, input');
4388
4370
  auroElements.forEach((auroEl) => {
4389
4371
  auroEl.removeEventListener('focus', this.bindFocusEventToTrigger);
4390
4372
  auroEl.removeEventListener('blur', this.bindFocusEventToTrigger);
@@ -12782,11 +12764,8 @@ class AuroCombobox extends LitElement {
12782
12764
  },
12783
12765
 
12784
12766
  /**
12785
- * Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)
12786
- * at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
12787
- *
12788
- * When expanded, the dropdown will automatically display in fullscreen mode
12789
- * if the screen size is equal to or smaller than the selected breakpoint.
12767
+ * Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile.
12768
+ * When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint.
12790
12769
  * @default sm
12791
12770
  */
12792
12771
  fullscreenBreakpoint: {
@@ -42,7 +42,7 @@
42
42
  | Property | Attribute | Type | Default | Description |
43
43
  |---------------------------|---------------------------|-----------|----------------|--------------------------------------------------|
44
44
  | [autoPlacement](#autoPlacement) | `autoPlacement` | `boolean` | "false" | If declared, bib's position will be automatically calculated where to appear. |
45
- | [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. |
45
+ | [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. |
46
46
  | [isDropdown](#isDropdown) | `isDropdown` | `boolean` | false | Indicates if the counter group is displayed as a dropdown. |
47
47
  | [largeFullscreenHeadline](#largeFullscreenHeadline) | `largeFullscreenHeadline` | `boolean` | false | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600. |
48
48
  | [max](#max) | `max` | `number` | "undefined" | The maximum value allowed for the whole group of counters. |
@@ -4660,7 +4660,6 @@ var tokensCss$1 = i$5`:host{--ds-auro-dropdown-label-text-color: var(--ds-basic-
4660
4660
 
4661
4661
  const DESIGN_TOKEN_BREAKPOINT_PREFIX = '--ds-grid-breakpoint-';
4662
4662
  const DESIGN_TOKEN_BREAKPOINT_OPTIONS = [
4663
- 'xl',
4664
4663
  'lg',
4665
4664
  'md',
4666
4665
  'sm',
@@ -4732,7 +4731,6 @@ class AuroDropdownBib extends r {
4732
4731
 
4733
4732
  set mobileFullscreenBreakpoint(value) {
4734
4733
  // verify the defined breakpoint is valid and exit out if not
4735
- // 'disabled' is a design token breakpoint so it acts as our "undefined" value
4736
4734
  const validatedValue = DESIGN_TOKEN_BREAKPOINT_OPTIONS.includes(value) ? value : undefined;
4737
4735
  if (!validatedValue) {
4738
4736
  this._mobileBreakpointValue = undefined;
@@ -5258,12 +5256,7 @@ class AuroDropdown extends r {
5258
5256
  },
5259
5257
 
5260
5258
  /**
5261
- * Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)
5262
- * at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
5263
- *
5264
- * When expanded, the dropdown will automatically display in fullscreen mode
5265
- * if the screen size is equal to or smaller than the selected breakpoint.
5266
- * @default sm
5259
+ * 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.
5267
5260
  */
5268
5261
  fullscreenBreakpoint: {
5269
5262
  type: String,
@@ -5403,15 +5396,6 @@ class AuroDropdown extends r {
5403
5396
  AuroLibraryRuntimeUtils$1$1.prototype.registerComponent(name, AuroDropdown);
5404
5397
  }
5405
5398
 
5406
- /**
5407
- * Accessor for reusing the focusable entity query string.
5408
- * @private
5409
- * @returns {string}
5410
- */
5411
- get focusableEntityQuery () {
5412
- return 'auro-input, [auro-input], auro-button, [auro-button], button, input';
5413
- }
5414
-
5415
5399
  connectedCallback() {
5416
5400
  super.connectedCallback();
5417
5401
  }
@@ -5425,8 +5409,6 @@ class AuroDropdown extends r {
5425
5409
  updated(changedProperties) {
5426
5410
  this.floater.handleUpdate(changedProperties);
5427
5411
 
5428
- // Note: `disabled` is not a breakpoint (it is not a screen size),
5429
- // so it looks like we never consume this - however, dropdownBib handles this in the setter as "undefined"
5430
5412
  if (changedProperties.has('fullscreenBreakpoint')) {
5431
5413
  this.bibContent.mobileFullscreenBreakpoint = this.fullscreenBreakpoint;
5432
5414
  }
@@ -5577,7 +5559,7 @@ class AuroDropdown extends r {
5577
5559
 
5578
5560
  this.triggerContentSlot.forEach((node) => {
5579
5561
  if (node.querySelectorAll) {
5580
- const auroElements = node.querySelectorAll(this.focusableEntityQuery);
5562
+ const auroElements = node.querySelectorAll('auro-input, [auro-input], auro-button, [auro-button], button, input');
5581
5563
  auroElements.forEach((auroEl) => {
5582
5564
  auroEl.addEventListener('focus', this.bindFocusEventToTrigger);
5583
5565
  auroEl.addEventListener('blur', this.bindFocusEventToTrigger);
@@ -5598,7 +5580,7 @@ class AuroDropdown extends r {
5598
5580
 
5599
5581
  this.triggerContentSlot.forEach((node) => {
5600
5582
  if (node.querySelectorAll) {
5601
- const auroElements = node.querySelectorAll(this.focusableEntityQuery);
5583
+ const auroElements = node.querySelectorAll('auro-input, [auro-input], auro-button, [auro-button], button, input');
5602
5584
  auroElements.forEach((auroEl) => {
5603
5585
  auroEl.removeEventListener('focus', this.bindFocusEventToTrigger);
5604
5586
  auroEl.removeEventListener('blur', this.bindFocusEventToTrigger);
@@ -6728,11 +6710,8 @@ class AuroCounterGroup extends r {
6728
6710
  },
6729
6711
 
6730
6712
  /**
6731
- * Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)
6732
- * at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
6733
- *
6734
- * When expanded, the dropdown will automatically display in fullscreen mode
6735
- * if the screen size is equal to or smaller than the selected breakpoint.
6713
+ * Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile.
6714
+ * When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint.
6736
6715
  * @default sm
6737
6716
  */
6738
6717
  fullscreenBreakpoint: {
@@ -4660,7 +4660,6 @@ var tokensCss$1 = i$5`:host{--ds-auro-dropdown-label-text-color: var(--ds-basic-
4660
4660
 
4661
4661
  const DESIGN_TOKEN_BREAKPOINT_PREFIX = '--ds-grid-breakpoint-';
4662
4662
  const DESIGN_TOKEN_BREAKPOINT_OPTIONS = [
4663
- 'xl',
4664
4663
  'lg',
4665
4664
  'md',
4666
4665
  'sm',
@@ -4732,7 +4731,6 @@ class AuroDropdownBib extends r {
4732
4731
 
4733
4732
  set mobileFullscreenBreakpoint(value) {
4734
4733
  // verify the defined breakpoint is valid and exit out if not
4735
- // 'disabled' is a design token breakpoint so it acts as our "undefined" value
4736
4734
  const validatedValue = DESIGN_TOKEN_BREAKPOINT_OPTIONS.includes(value) ? value : undefined;
4737
4735
  if (!validatedValue) {
4738
4736
  this._mobileBreakpointValue = undefined;
@@ -5258,12 +5256,7 @@ class AuroDropdown extends r {
5258
5256
  },
5259
5257
 
5260
5258
  /**
5261
- * Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)
5262
- * at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
5263
- *
5264
- * When expanded, the dropdown will automatically display in fullscreen mode
5265
- * if the screen size is equal to or smaller than the selected breakpoint.
5266
- * @default sm
5259
+ * 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.
5267
5260
  */
5268
5261
  fullscreenBreakpoint: {
5269
5262
  type: String,
@@ -5403,15 +5396,6 @@ class AuroDropdown extends r {
5403
5396
  AuroLibraryRuntimeUtils$1$1.prototype.registerComponent(name, AuroDropdown);
5404
5397
  }
5405
5398
 
5406
- /**
5407
- * Accessor for reusing the focusable entity query string.
5408
- * @private
5409
- * @returns {string}
5410
- */
5411
- get focusableEntityQuery () {
5412
- return 'auro-input, [auro-input], auro-button, [auro-button], button, input';
5413
- }
5414
-
5415
5399
  connectedCallback() {
5416
5400
  super.connectedCallback();
5417
5401
  }
@@ -5425,8 +5409,6 @@ class AuroDropdown extends r {
5425
5409
  updated(changedProperties) {
5426
5410
  this.floater.handleUpdate(changedProperties);
5427
5411
 
5428
- // Note: `disabled` is not a breakpoint (it is not a screen size),
5429
- // so it looks like we never consume this - however, dropdownBib handles this in the setter as "undefined"
5430
5412
  if (changedProperties.has('fullscreenBreakpoint')) {
5431
5413
  this.bibContent.mobileFullscreenBreakpoint = this.fullscreenBreakpoint;
5432
5414
  }
@@ -5577,7 +5559,7 @@ class AuroDropdown extends r {
5577
5559
 
5578
5560
  this.triggerContentSlot.forEach((node) => {
5579
5561
  if (node.querySelectorAll) {
5580
- const auroElements = node.querySelectorAll(this.focusableEntityQuery);
5562
+ const auroElements = node.querySelectorAll('auro-input, [auro-input], auro-button, [auro-button], button, input');
5581
5563
  auroElements.forEach((auroEl) => {
5582
5564
  auroEl.addEventListener('focus', this.bindFocusEventToTrigger);
5583
5565
  auroEl.addEventListener('blur', this.bindFocusEventToTrigger);
@@ -5598,7 +5580,7 @@ class AuroDropdown extends r {
5598
5580
 
5599
5581
  this.triggerContentSlot.forEach((node) => {
5600
5582
  if (node.querySelectorAll) {
5601
- const auroElements = node.querySelectorAll(this.focusableEntityQuery);
5583
+ const auroElements = node.querySelectorAll('auro-input, [auro-input], auro-button, [auro-button], button, input');
5602
5584
  auroElements.forEach((auroEl) => {
5603
5585
  auroEl.removeEventListener('focus', this.bindFocusEventToTrigger);
5604
5586
  auroEl.removeEventListener('blur', this.bindFocusEventToTrigger);
@@ -6728,11 +6710,8 @@ class AuroCounterGroup extends r {
6728
6710
  },
6729
6711
 
6730
6712
  /**
6731
- * Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)
6732
- * at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
6733
- *
6734
- * When expanded, the dropdown will automatically display in fullscreen mode
6735
- * if the screen size is equal to or smaller than the selected breakpoint.
6713
+ * Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile.
6714
+ * When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint.
6736
6715
  * @default sm
6737
6716
  */
6738
6717
  fullscreenBreakpoint: {
@@ -25,11 +25,8 @@ export class AuroCounterGroup extends LitElement {
25
25
  reflect: boolean;
26
26
  };
27
27
  /**
28
- * Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)
29
- * at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
30
- *
31
- * When expanded, the dropdown will automatically display in fullscreen mode
32
- * if the screen size is equal to or smaller than the selected breakpoint.
28
+ * Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile.
29
+ * When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint.
33
30
  * @default sm
34
31
  */
35
32
  fullscreenBreakpoint: {