npm - @aurodesignsystem/auro-formkit - Versions diffs - 3.0.0 → 3.1.0-beta.1 - Mend

@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

package/CHANGELOG.md +19 -0
package/components/bibtemplate/dist/auro-bibtemplate.d.ts +1 -0
package/components/bibtemplate/dist/index.js +2 -0
package/components/bibtemplate/dist/registered.js +2 -0
package/components/checkbox/README.md +1 -1
package/components/checkbox/demo/readme.md +1 -1
package/components/combobox/README.md +1 -1
package/components/combobox/demo/api.md +5 -5
package/components/combobox/demo/api.min.js +54 -18
package/components/combobox/demo/index.min.js +54 -18
package/components/combobox/demo/readme.md +1 -1
package/components/combobox/dist/auro-combobox.d.ts +16 -7
package/components/combobox/dist/index.js +54 -18
package/components/combobox/dist/registered.js +54 -18
package/components/counter/README.md +1 -1
package/components/counter/demo/api.md +2 -2
package/components/counter/demo/api.min.js +33 -6
package/components/counter/demo/index.min.js +33 -6
package/components/counter/demo/readme.md +1 -1
package/components/counter/dist/auro-counter-group.d.ts +9 -3
package/components/counter/dist/index.js +33 -6
package/components/counter/dist/registered.js +33 -6
package/components/datepicker/README.md +1 -1
package/components/datepicker/demo/api.md +3 -2
package/components/datepicker/demo/api.min.js +63 -14
package/components/datepicker/demo/index.min.js +63 -14
package/components/datepicker/demo/readme.md +1 -1
package/components/datepicker/dist/auro-calendar-cell.d.ts +1 -0
package/components/datepicker/dist/auro-calendar-month.d.ts +1 -0
package/components/datepicker/dist/auro-calendar.d.ts +3 -2
package/components/datepicker/dist/auro-datepicker.d.ts +16 -0
package/components/datepicker/dist/index.js +63 -14
package/components/datepicker/dist/registered.js +63 -14
package/components/dropdown/README.md +1 -1
package/components/dropdown/demo/api.md +1 -1
package/components/dropdown/demo/api.min.js +21 -3
package/components/dropdown/demo/index.md +83 -0
package/components/dropdown/demo/index.min.js +21 -3
package/components/dropdown/demo/readme.md +1 -1
package/components/dropdown/dist/auro-dropdown.d.ts +12 -1
package/components/dropdown/dist/index.js +21 -3
package/components/dropdown/dist/registered.js +21 -3
package/components/form/README.md +1 -1
package/components/form/demo/autocomplete.html +15 -0
package/components/form/demo/readme.md +1 -1
package/components/input/README.md +1 -1
package/components/input/demo/api.min.js +10 -5
package/components/input/demo/index.min.js +10 -5
package/components/input/demo/readme.md +1 -1
package/components/input/dist/base-input.d.ts +5 -0
package/components/input/dist/index.js +10 -5
package/components/input/dist/registered.js +10 -5
package/components/menu/README.md +1 -1
package/components/menu/demo/readme.md +1 -1
package/components/radio/README.md +1 -1
package/components/radio/demo/readme.md +1 -1
package/components/select/README.md +1 -1
package/components/select/demo/api.md +1 -1
package/components/select/demo/api.min.js +28 -5
package/components/select/demo/index.md +46 -1
package/components/select/demo/index.min.js +28 -5
package/components/select/demo/readme.md +1 -1
package/components/select/dist/auro-select.d.ts +5 -2
package/components/select/dist/index.js +28 -5
package/components/select/dist/registered.js +28 -5
package/package.json +1 -1

package/components/form/README.md CHANGED Viewed

@@ -109,7 +109,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 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.
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.2.1/auro-form/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.0.1/auro-form/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->

package/components/form/demo/autocomplete.html ADDED Viewed

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Demo page for auto-complete</title>
+</head>
+<body>
+<!-- EVERY AUTOCOMPLETE OPTION, auro inputs -->
+<!-- EVERY AUTOCOMPLETE OPTION, auro combobox -->
+<!-- LOGIN FORM -->
+</body>
+</html>

package/components/form/demo/readme.md CHANGED Viewed

@@ -109,7 +109,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 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.
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.2.1/auro-form/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.0.1/auro-form/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->

package/components/input/README.md CHANGED Viewed

@@ -99,7 +99,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 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.
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.2.1/auro-input/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.0.1/auro-input/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->

package/components/input/demo/api.min.js CHANGED Viewed

@@ -4642,7 +4642,8 @@ class BaseInput extends r {
        * If set, disables the input.
        */
       disabled: {
-        type: Boolean
+        type: Boolean,
+        reflect: true
       },
       /**
@@ -4672,7 +4673,8 @@ class BaseInput extends r {
        * 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.
        */
       icon: {
-        type: Boolean
+        type: Boolean,
+        reflect: true
       },
       /**
@@ -4728,7 +4730,8 @@ class BaseInput extends r {
        * If set, disables auto-validation on blur.
        */
       noValidate: {
-        type: Boolean
+        type: Boolean,
+        reflect: true
       },
       /**
@@ -4758,14 +4761,16 @@ class BaseInput extends r {
        * Makes the input read-only, but can be set programmatically.
        */
       readonly: {
-        type: Boolean
+        type: Boolean,
+        reflect: true
       },
       /**
        * Populates the `required` attribute on the input. Used for client-side validation.
        */
       required: {
-        type: Boolean
+        type: Boolean,
+        reflect: true
       },
       /**

package/components/input/demo/index.min.js CHANGED Viewed

@@ -4567,7 +4567,8 @@ class BaseInput extends r {
        * If set, disables the input.
        */
       disabled: {
-        type: Boolean
+        type: Boolean,
+        reflect: true
       },
       /**
@@ -4597,7 +4598,8 @@ class BaseInput extends r {
        * 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.
        */
       icon: {
-        type: Boolean
+        type: Boolean,
+        reflect: true
       },
       /**
@@ -4653,7 +4655,8 @@ class BaseInput extends r {
        * If set, disables auto-validation on blur.
        */
       noValidate: {
-        type: Boolean
+        type: Boolean,
+        reflect: true
       },
       /**
@@ -4683,14 +4686,16 @@ class BaseInput extends r {
        * Makes the input read-only, but can be set programmatically.
        */
       readonly: {
-        type: Boolean
+        type: Boolean,
+        reflect: true
       },
       /**
        * Populates the `required` attribute on the input. Used for client-side validation.
        */
       required: {
-        type: Boolean
+        type: Boolean,
+        reflect: true
       },
       /**

package/components/input/demo/readme.md CHANGED Viewed

@@ -99,7 +99,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 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.
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.2.1/auro-input/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.0.1/auro-input/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->

package/components/input/dist/base-input.d.ts CHANGED Viewed

@@ -48,6 +48,7 @@ export default class BaseInput extends LitElement {
          */
         disabled: {
             type: BooleanConstructor;
+            reflect: boolean;
         };
         /**
          * When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value.
@@ -74,6 +75,7 @@ export default class BaseInput extends LitElement {
          */
         icon: {
             type: BooleanConstructor;
+            reflect: boolean;
         };
         /**
          * Sets the unique ID of the element.
@@ -122,6 +124,7 @@ export default class BaseInput extends LitElement {
          */
         noValidate: {
             type: BooleanConstructor;
+            reflect: boolean;
         };
         /**
          * Sets onDark styles on input.
@@ -148,12 +151,14 @@ export default class BaseInput extends LitElement {
          */
         readonly: {
             type: BooleanConstructor;
+            reflect: boolean;
         };
         /**
          * Populates the `required` attribute on the input. Used for client-side validation.
          */
         required: {
             type: BooleanConstructor;
+            reflect: boolean;
         };
         /**
          * @ignore

package/components/input/dist/index.js CHANGED Viewed

@@ -4491,7 +4491,8 @@ class BaseInput extends LitElement {
        * If set, disables the input.
        */
       disabled: {
-        type: Boolean
+        type: Boolean,
+        reflect: true
       },
       /**
@@ -4521,7 +4522,8 @@ class BaseInput extends LitElement {
        * 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.
        */
       icon: {
-        type: Boolean
+        type: Boolean,
+        reflect: true
       },
       /**
@@ -4577,7 +4579,8 @@ class BaseInput extends LitElement {
        * If set, disables auto-validation on blur.
        */
       noValidate: {
-        type: Boolean
+        type: Boolean,
+        reflect: true
       },
       /**
@@ -4607,14 +4610,16 @@ class BaseInput extends LitElement {
        * Makes the input read-only, but can be set programmatically.
        */
       readonly: {
-        type: Boolean
+        type: Boolean,
+        reflect: true
       },
       /**
        * Populates the `required` attribute on the input. Used for client-side validation.
        */
       required: {
-        type: Boolean
+        type: Boolean,
+        reflect: true
       },
       /**

package/components/input/dist/registered.js CHANGED Viewed

@@ -4491,7 +4491,8 @@ class BaseInput extends LitElement {
        * If set, disables the input.
        */
       disabled: {
-        type: Boolean
+        type: Boolean,
+        reflect: true
       },
       /**
@@ -4521,7 +4522,8 @@ class BaseInput extends LitElement {
        * 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.
        */
       icon: {
-        type: Boolean
+        type: Boolean,
+        reflect: true
       },
       /**
@@ -4577,7 +4579,8 @@ class BaseInput extends LitElement {
        * If set, disables auto-validation on blur.
        */
       noValidate: {
-        type: Boolean
+        type: Boolean,
+        reflect: true
       },
       /**
@@ -4607,14 +4610,16 @@ class BaseInput extends LitElement {
        * Makes the input read-only, but can be set programmatically.
        */
       readonly: {
-        type: Boolean
+        type: Boolean,
+        reflect: true
       },
       /**
        * Populates the `required` attribute on the input. Used for client-side validation.
        */
       required: {
-        type: Boolean
+        type: Boolean,
+        reflect: true
       },
       /**

package/components/menu/README.md CHANGED Viewed

@@ -110,7 +110,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 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.
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.2.1/auro-menu/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.0.1/auro-menu/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->

package/components/menu/demo/readme.md CHANGED Viewed

@@ -110,7 +110,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 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.
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.2.1/auro-menu/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.0.1/auro-menu/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->

package/components/radio/README.md CHANGED Viewed

@@ -100,7 +100,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 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.
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.2.1/auro-radio/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.0.1/auro-radio/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->

package/components/radio/demo/readme.md CHANGED Viewed

@@ -100,7 +100,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 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.
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.2.1/auro-radio/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.0.1/auro-radio/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->

package/components/select/README.md CHANGED Viewed

@@ -111,7 +111,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 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.
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.2.1/auro-select/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.0.1/auro-select/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->

package/components/select/demo/api.md CHANGED Viewed

@@ -20,7 +20,7 @@ The auro-select element is a wrapper for auro-dropdown and auro-menu to create a
 | [disabled](#disabled)                      | `disabled`                      | `boolean` |                | When attribute is present, element shows disabled state. |
 | [error](#error)                         | `error`                         | `string`  |                | When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value. |
 | [flexMenuWidth](#flexMenuWidth)                 | `flexMenuWidth`                 | `boolean` |                | If set, makes dropdown width match the size of the content, rather than the width of the trigger. |
-| [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. |
+| [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. |
 | [largeFullscreenHeadline](#largeFullscreenHeadline)       | `largeFullscreenHeadline`       | `boolean` |                | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600 |
 | [multiSelect](#multiSelect)                   | `multiselect`                   | `boolean` |                | Sets multi-select mode, allowing multiple options to be selected at once. |
 | [noCheckmark](#noCheckmark)                   | `noCheckmark`                   | `boolean` |                | When true, checkmark on selected option will no longer be present. |

package/components/select/demo/api.min.js CHANGED Viewed

@@ -3141,6 +3141,7 @@ var tokensCss$1$1 = i$5`:host{--ds-auro-dropdown-label-text-color: var(--ds-basi
 const DESIGN_TOKEN_BREAKPOINT_PREFIX = '--ds-grid-breakpoint-';
 const DESIGN_TOKEN_BREAKPOINT_OPTIONS = [
+  'xl',
   'lg',
   'md',
   'sm',
@@ -3212,6 +3213,7 @@ class AuroDropdownBib extends r {
   set mobileFullscreenBreakpoint(value) {
     // verify the defined breakpoint is valid and exit out if not
+    // 'disabled' is a design token breakpoint so it acts as our "undefined" value
     const validatedValue = DESIGN_TOKEN_BREAKPOINT_OPTIONS.includes(value) ? value : undefined;
     if (!validatedValue) {
       this._mobileBreakpointValue = undefined;
@@ -3724,7 +3726,12 @@ class AuroDropdown extends r {
       },
       /**
-       * 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.
+       * Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)
+       * at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
+       *
+       * When expanded, the dropdown will automatically display in fullscreen mode
+       * if the screen size is equal to or smaller than the selected breakpoint.
+       * @default sm
        */
       fullscreenBreakpoint: {
         type: String,
@@ -3847,6 +3854,15 @@ class AuroDropdown extends r {
     AuroLibraryRuntimeUtils$1$1.prototype.registerComponent(name, AuroDropdown);
   }
+  /**
+   * Accessor for reusing the focusable entity query string.
+   * @private
+   * @returns {string}
+   */
+  get focusableEntityQuery () {
+    return 'auro-input, [auro-input], auro-button, [auro-button], button, input';
+  }
   connectedCallback() {
     super.connectedCallback();
   }
@@ -3860,6 +3876,8 @@ class AuroDropdown extends r {
   updated(changedProperties) {
     this.floater.handleUpdate(changedProperties);
+    // Note: `disabled` is not a breakpoint (it is not a screen size),
+    // so it looks like we never consume this - however, dropdownBib handles this in the setter as "undefined"
     if (changedProperties.has('fullscreenBreakpoint')) {
       this.bibContent.mobileFullscreenBreakpoint = this.fullscreenBreakpoint;
     }
@@ -3995,7 +4013,7 @@ class AuroDropdown extends r {
     this.triggerContentSlot.forEach((node) => {
       if (node.querySelectorAll) {
-        const auroElements = node.querySelectorAll('auro-input, [auro-input], auro-button, [auro-button], button, input');
+        const auroElements = node.querySelectorAll(this.focusableEntityQuery);
         auroElements.forEach((auroEl) => {
           auroEl.addEventListener('focus', this.bindFocusEventToTrigger);
           auroEl.addEventListener('blur', this.bindFocusEventToTrigger);
@@ -4016,7 +4034,7 @@ class AuroDropdown extends r {
     this.triggerContentSlot.forEach((node) => {
       if (node.querySelectorAll) {
-        const auroElements = node.querySelectorAll('auro-input, [auro-input], auro-button, [auro-button], button, input');
+        const auroElements = node.querySelectorAll(this.focusableEntityQuery);
         auroElements.forEach((auroEl) => {
           auroEl.removeEventListener('focus', this.bindFocusEventToTrigger);
           auroEl.removeEventListener('blur', this.bindFocusEventToTrigger);
@@ -4853,6 +4871,8 @@ class AuroBibtemplate extends r {
   constructor() {
     super();
+    this.large = false;
     AuroLibraryRuntimeUtils$1.prototype.handleComponentTagRename(this, 'auro-bibtemplate');
     const versioning = new AuroDependencyVersioning();
@@ -5201,8 +5221,11 @@ class AuroSelect extends r {
       },
       /**
-       * 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.
+       * Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)
+       * at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
+       *
+       * When expanded, the dropdown will automatically display in fullscreen mode
+       * if the screen size is equal to or smaller than the selected breakpoint.
        * @default sm
        */
       fullscreenBreakpoint: {

package/components/select/demo/index.md CHANGED Viewed

@@ -379,7 +379,7 @@ Applying the `noCheckmark` attribute will prevent the checkmark icon from being
 ## Example with custom bib height
-This example shows how to set a custom height for the bib from `<auro-dropdown>`.
+This example shows how to set a custom height for the bib from `<auro-dropdown>`.
 Custom height dimensions are set by using the `dropdownSize` CSS Part and then applying a `max-height` rule and value.
@@ -434,6 +434,51 @@ Custom height dimensions are set by using the `dropdownSize` CSS Part and then a
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
+## Example with fullscreen dropdown breakpoint override
+This example overrides the default dropdown behavior to force a non-fullscreen view on any screen size. `disabled`
+ensures that the dropdown will never be fullscreen.
+Please use `xl` if you want the opposite behavior, where a dropdown is always fullscreen.
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/forcedFullscreenDisabled.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/forcedFullscreenDisabled.html -->
+  <auro-select fullscreenBreakpoint="disabled">
+    <span slot="bib.fullscreen.headline">Bib Headline</span>
+    <span slot="label">Select Example</span>
+    <auro-menu>
+      <auro-menuoption value="stops">Stops</auro-menuoption>
+      <auro-menuoption value="price">Price</auro-menuoption>
+      <auro-menuoption value="duration">Duration</auro-menuoption>
+      <auro-menuoption value="departure">Departure</auro-menuoption>
+      <auro-menuoption value="arrival">Arrival</auro-menuoption>
+      <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
+    </auro-menu>
+  </auro-select>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/forcedFullscreenDisabled.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/forcedFullscreenDisabled.html -->
+```html
+<auro-select fullscreenBreakpoint="disabled">
+  <span slot="bib.fullscreen.headline">Bib Headline</span>
+  <span slot="label">Select Example</span>
+  <auro-menu>
+    <auro-menuoption value="stops">Stops</auro-menuoption>
+    <auro-menuoption value="price">Price</auro-menuoption>
+    <auro-menuoption value="duration">Duration</auro-menuoption>
+    <auro-menuoption value="departure">Departure</auro-menuoption>
+    <auro-menuoption value="arrival">Arrival</auro-menuoption>
+    <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
+  </auro-menu>
+</auro-select>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
 ## Error State
 Use the `error` boolean attribute to toggle the error UI.

package/components/select/demo/index.min.js CHANGED Viewed

@@ -3049,6 +3049,7 @@ var tokensCss$1$1 = i$5`:host{--ds-auro-dropdown-label-text-color: var(--ds-basi
 const DESIGN_TOKEN_BREAKPOINT_PREFIX = '--ds-grid-breakpoint-';
 const DESIGN_TOKEN_BREAKPOINT_OPTIONS = [
+  'xl',
   'lg',
   'md',
   'sm',
@@ -3120,6 +3121,7 @@ class AuroDropdownBib extends r {
   set mobileFullscreenBreakpoint(value) {
     // verify the defined breakpoint is valid and exit out if not
+    // 'disabled' is a design token breakpoint so it acts as our "undefined" value
     const validatedValue = DESIGN_TOKEN_BREAKPOINT_OPTIONS.includes(value) ? value : undefined;
     if (!validatedValue) {
       this._mobileBreakpointValue = undefined;
@@ -3632,7 +3634,12 @@ class AuroDropdown extends r {
       },
       /**
-       * 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.
+       * Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)
+       * at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
+       *
+       * When expanded, the dropdown will automatically display in fullscreen mode
+       * if the screen size is equal to or smaller than the selected breakpoint.
+       * @default sm
        */
       fullscreenBreakpoint: {
         type: String,
@@ -3755,6 +3762,15 @@ class AuroDropdown extends r {
     AuroLibraryRuntimeUtils$1$1.prototype.registerComponent(name, AuroDropdown);
   }
+  /**
+   * Accessor for reusing the focusable entity query string.
+   * @private
+   * @returns {string}
+   */
+  get focusableEntityQuery () {
+    return 'auro-input, [auro-input], auro-button, [auro-button], button, input';
+  }
   connectedCallback() {
     super.connectedCallback();
   }
@@ -3768,6 +3784,8 @@ class AuroDropdown extends r {
   updated(changedProperties) {
     this.floater.handleUpdate(changedProperties);
+    // Note: `disabled` is not a breakpoint (it is not a screen size),
+    // so it looks like we never consume this - however, dropdownBib handles this in the setter as "undefined"
     if (changedProperties.has('fullscreenBreakpoint')) {
       this.bibContent.mobileFullscreenBreakpoint = this.fullscreenBreakpoint;
     }
@@ -3903,7 +3921,7 @@ class AuroDropdown extends r {
     this.triggerContentSlot.forEach((node) => {
       if (node.querySelectorAll) {
-        const auroElements = node.querySelectorAll('auro-input, [auro-input], auro-button, [auro-button], button, input');
+        const auroElements = node.querySelectorAll(this.focusableEntityQuery);
         auroElements.forEach((auroEl) => {
           auroEl.addEventListener('focus', this.bindFocusEventToTrigger);
           auroEl.addEventListener('blur', this.bindFocusEventToTrigger);
@@ -3924,7 +3942,7 @@ class AuroDropdown extends r {
     this.triggerContentSlot.forEach((node) => {
       if (node.querySelectorAll) {
-        const auroElements = node.querySelectorAll('auro-input, [auro-input], auro-button, [auro-button], button, input');
+        const auroElements = node.querySelectorAll(this.focusableEntityQuery);
         auroElements.forEach((auroEl) => {
           auroEl.removeEventListener('focus', this.bindFocusEventToTrigger);
           auroEl.removeEventListener('blur', this.bindFocusEventToTrigger);
@@ -4761,6 +4779,8 @@ class AuroBibtemplate extends r {
   constructor() {
     super();
+    this.large = false;
     AuroLibraryRuntimeUtils$1.prototype.handleComponentTagRename(this, 'auro-bibtemplate');
     const versioning = new AuroDependencyVersioning();
@@ -5109,8 +5129,11 @@ class AuroSelect extends r {
       },
       /**
-       * 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.
+       * Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)
+       * at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
+       *
+       * When expanded, the dropdown will automatically display in fullscreen mode
+       * if the screen size is equal to or smaller than the selected breakpoint.
        * @default sm
        */
       fullscreenBreakpoint: {

package/components/select/demo/readme.md CHANGED Viewed

@@ -111,7 +111,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 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.
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.2.1/auro-select/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.0.1/auro-select/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->

package/components/select/dist/auro-select.d.ts CHANGED Viewed

@@ -36,8 +36,11 @@ export class AuroSelect extends LitElement {
             reflect: boolean;
         };
         /**
-         * 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.
+         * Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)
+         * at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
+         *
+         * When expanded, the dropdown will automatically display in fullscreen mode
+         * if the screen size is equal to or smaller than the selected breakpoint.
          * @default sm
          */
         fullscreenBreakpoint: {