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

package/components/datepicker/dist/registered.js

@@ -9419,7 +9419,10 @@ class AuroCalendarCell extends LitElement {
       month:         { type: String },
       min:           { type: Number },
       max:           { type: Number },
-      disabled:      { type: Boolean },
+      disabled:      {
+        type: Boolean,
+        reflect: true
+      },
       disabledDays:  { type: Array },
       hoveredDate:   { type: String },
       isCurrentDate: { type: Boolean },
@@ -9760,7 +9763,8 @@ class AuroCalendarMonth extends RangeDatepickerCalendar {
        * @private
        */
       monthFirst: {
-        type: Boolean
+        type: Boolean,
+        reflect: true
       }
     };
   }
@@ -10952,6 +10956,8 @@ class AuroBibtemplate extends LitElement {
   constructor() {
     super();
 
+    this.large = false;
+
     AuroLibraryRuntimeUtils$1$2.prototype.handleComponentTagRename(this, 'auro-bibtemplate');
 
     const versioning = new AuroDependencyVersioning$2();
@@ -11551,6 +11557,10 @@ class AuroCalendar extends RangeDatepicker {
     this.showPrevMonthBtn = true;
     this.showNextMonthBtn = true;
 
+    this.visible = false;
+    this.largeFullscreenHeadline = false;
+    this.isFullscreen = false;
+
     /**
      * @private
      */
@@ -11566,8 +11576,6 @@ class AuroCalendar extends RangeDatepicker {
      */
     this.numCalendars = undefined;
 
-    this.visible = false;
-
     /**
      * @private
      */
@@ -14436,6 +14444,7 @@ var tokensCss$1$1 = css`: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',
@@ -14507,6 +14516,7 @@ class AuroDropdownBib extends LitElement {
 
   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;
@@ -15019,7 +15029,12 @@ class AuroDropdown extends LitElement {
       },
 
       /**
-       * 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,
@@ -15142,6 +15157,15 @@ class AuroDropdown extends LitElement {
     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();
   }
@@ -15155,6 +15179,8 @@ class AuroDropdown extends LitElement {
   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;
     }
@@ -15290,7 +15316,7 @@ class AuroDropdown extends LitElement {
 
     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);
@@ -15311,7 +15337,7 @@ class AuroDropdown extends LitElement {
 
     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);
@@ -19973,7 +19999,8 @@ class BaseInput extends LitElement {
        * If set, disables the input.
        */
       disabled: {
-        type: Boolean
+        type: Boolean,
+        reflect: true
       },
 
       /**
@@ -20003,7 +20030,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
       },
 
       /**
@@ -20059,7 +20087,8 @@ class BaseInput extends LitElement {
        * If set, disables auto-validation on blur.
        */
       noValidate: {
-        type: Boolean
+        type: Boolean,
+        reflect: true
       },
 
       /**
@@ -20089,14 +20118,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
       },
 
       /**
@@ -22076,6 +22107,7 @@ class AuroDatePicker extends LitElement {
     this.required = false;
     this.onDark = false;
     this.range = false;
+    this.stacked = false;
     this.noValidate = false;
     this.validity = undefined;
     this.value = undefined;
@@ -22084,6 +22116,7 @@ class AuroDatePicker extends LitElement {
     this.calendarEndDate = undefined;
     this.calendarFocusDate = this.value;
     this.format = 'mm/dd/yyyy';
+    this.fullscreenBreakpoint = 'sm';
     this.monthNames = [
       'January',
       'February',
@@ -22107,6 +22140,8 @@ class AuroDatePicker extends LitElement {
     this.noFlip = false;
     this.autoPlacement = false;
 
+    this.largeFullscreenHeadline = false;
+
     /**
      * @private
      */
@@ -22219,6 +22254,19 @@ class AuroDatePicker extends LitElement {
         reflect: true
       },
 
+      /**
+       * 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,
+        reflect: true
+      },
+
       /**
        * If declared, make bib.fullscreen.headline in HeadingDisplay.
        * Otherwise, Heading 600.
@@ -22272,7 +22320,8 @@ class AuroDatePicker extends LitElement {
        * If set, disables auto-validation on blur.
        */
       noValidate: {
-        type: Boolean
+        type: Boolean,
+        reflect: true
       },
 
       /**
@@ -23044,7 +23093,7 @@ class AuroDatePicker extends LitElement {
           ?disabled="${this.disabled}"
           ?error="${this.validity !== undefined && this.validity !== 'valid'}"
           disableEventShow
-          fullscreenBreakpoint="sm"
+          .fullscreenBreakpoint="${this.fullscreenBreakpoint}"
           .placement="${this.placement}"
           .offset="${this.offset}"
           ?autoPlacement="${this.autoPlacement}"

package/components/dropdown/README.md

@@ -107,7 +107,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-dropdown/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.0.1/auro-dropdown/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/dropdown/demo/api.md

@@ -21,7 +21,7 @@
 | [error](#error)                 | `error`                 | ` Boolean ` |                | If declared in combination with `bordered` property or `helpText` slot content, will apply red color to both. |
 | [fluid](#fluid)                 | `fluid`                 | `Boolean`   |                | Makes the trigger to be full width of its parent container. |
 | [focusShow](#focusShow)             | `focusShow`             | ` Boolean ` |                | If declared, the bib will display when focus is applied to the trigger. |
-| [fullscreenBreakpoint](#fullscreenBreakpoint)  | `fullscreenBreakpoint`  | ` String `  |                | 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. |
+| [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. |
 | [hoverToggle](#hoverToggle)           | `hoverToggle`           | ` Boolean ` |                | If declared, the trigger will toggle the dropdown on mouseover/mouseout. |
 | [inset](#inset)                 | `inset`                 | ` Boolean ` |                | If declared, will apply padding around trigger slot content. |
 | [isBibFullscreen](#isBibFullscreen)       | `isBibFullscreen`       | `boolean`   | false          | If true, the dropdown bib is taking the fullscreen when it's open. |

package/components/dropdown/demo/api.min.js

@@ -2653,6 +2653,7 @@ var tokensCss$1 = i$3`:host{--ds-auro-dropdown-label-text-color: var(--ds-basic-
 
 const DESIGN_TOKEN_BREAKPOINT_PREFIX = '--ds-grid-breakpoint-';
 const DESIGN_TOKEN_BREAKPOINT_OPTIONS = [
+  'xl',
   'lg',
   'md',
   'sm',
@@ -2724,6 +2725,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;
@@ -3236,7 +3238,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,
@@ -3359,6 +3366,15 @@ class AuroDropdown extends r {
     AuroLibraryRuntimeUtils$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();
   }
@@ -3372,6 +3388,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;
     }
@@ -3507,7 +3525,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);
@@ -3528,7 +3546,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);

package/components/dropdown/demo/index.md

@@ -411,6 +411,89 @@ To make the dropdown to be just big as the trigger's content, style the `auro-dr
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
+## Triggering a fullscreen dropdown
+This example shows how to set a dropdown fullscreen breakpoint attribute. Most consuming components use `sm` by default, but
+dropdown supports `xs`, `sm`, `md`, `lg`, `xl` and `disabled`, with `disabled` ensuring that the dropdown will never be fullscreen.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/fullscreen.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/fullscreen.html -->
+  <h3>Never fullscreen</h3>
+  <auro-dropdown id="common-never-fullscreen" common aria-label="Label content for screen reader" fullscreenBreakpoint="disabled">
+    <div style="padding: var(--ds-size-150);">
+      Lorem ipsum solar
+      <br />
+      <auro-button onclick="document.querySelector('#common-never-fullscreen').hide()">
+        Dismiss Dropdown
+      </auro-button>
+    </div>
+    <span slot="helpText">
+      Help text
+    </span>
+    <div slot="trigger">
+      Trigger
+    </div>
+  </auro-dropdown>
+  <h3>Always fullscreen</h3>
+  <auro-dropdown id="common-always-fullscreen" common aria-label="Label content for screen reader" fullscreenBreakpoint="xl">
+    <div style="padding: var(--ds-size-150);">
+      Lorem ipsum solar
+      <br />
+      <auro-button onclick="document.querySelector('#common-always-fullscreen').hide()">
+        Dismiss Dropdown
+      </auro-button>
+    </div>
+    <span slot="helpText">
+      Help text
+    </span>
+    <div slot="trigger">
+      Trigger
+    </div>
+  </auro-dropdown>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/fullscreen.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/fullscreen.html -->
+
+```html
+<h3>Never fullscreen</h3>
+<auro-dropdown id="common-never-fullscreen" common aria-label="Label content for screen reader" fullscreenBreakpoint="disabled">
+  <div style="padding: var(--ds-size-150);">
+    Lorem ipsum solar
+    <br />
+    <auro-button onclick="document.querySelector('#common-never-fullscreen').hide()">
+      Dismiss Dropdown
+    </auro-button>
+  </div>
+  <span slot="helpText">
+    Help text
+  </span>
+  <div slot="trigger">
+    Trigger
+  </div>
+</auro-dropdown>
+<h3>Always fullscreen</h3>
+<auro-dropdown id="common-always-fullscreen" common aria-label="Label content for screen reader" fullscreenBreakpoint="xl">
+  <div style="padding: var(--ds-size-150);">
+    Lorem ipsum solar
+    <br />
+    <auro-button onclick="document.querySelector('#common-always-fullscreen').hide()">
+      Dismiss Dropdown
+    </auro-button>
+  </div>
+  <span slot="helpText">
+    Help text
+  </span>
+  <div slot="trigger">
+    Trigger
+  </div>
+</auro-dropdown>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 ## Supported standard and accessible interactions
 
 The dropdown can be opened with the following actions:

package/components/dropdown/demo/index.min.js

@@ -2628,6 +2628,7 @@ var tokensCss$1 = i$3`:host{--ds-auro-dropdown-label-text-color: var(--ds-basic-
 
 const DESIGN_TOKEN_BREAKPOINT_PREFIX = '--ds-grid-breakpoint-';
 const DESIGN_TOKEN_BREAKPOINT_OPTIONS = [
+  'xl',
   'lg',
   'md',
   'sm',
@@ -2699,6 +2700,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;
@@ -3211,7 +3213,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,
@@ -3334,6 +3341,15 @@ class AuroDropdown extends r {
     AuroLibraryRuntimeUtils$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();
   }
@@ -3347,6 +3363,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;
     }
@@ -3482,7 +3500,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);
@@ -3503,7 +3521,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);

package/components/dropdown/demo/readme.md

@@ -107,7 +107,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-dropdown/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.0.1/auro-dropdown/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/dropdown/dist/auro-dropdown.d.ts

@@ -110,7 +110,12 @@ export class AuroDropdown extends LitElement {
             type: BooleanConstructor;
         };
         /**
-         * 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: StringConstructor;
@@ -293,6 +298,12 @@ export class AuroDropdown extends LitElement {
      * @returns {void}
      */
     show(): void;
+    /**
+     * Accessor for reusing the focusable entity query string.
+     * @private
+     * @returns {string}
+     */
+    private get focusableEntityQuery();
     updated(changedProperties: any): void;
     firstUpdated(): void;
     bibContent: any;

package/components/dropdown/dist/index.js

@@ -2581,6 +2581,7 @@ var tokensCss$1 = css`:host{--ds-auro-dropdown-label-text-color: var(--ds-basic-
 
 const DESIGN_TOKEN_BREAKPOINT_PREFIX = '--ds-grid-breakpoint-';
 const DESIGN_TOKEN_BREAKPOINT_OPTIONS = [
+  'xl',
   'lg',
   'md',
   'sm',
@@ -2652,6 +2653,7 @@ class AuroDropdownBib extends LitElement {
 
   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;
@@ -3164,7 +3166,12 @@ class AuroDropdown extends LitElement {
       },
 
       /**
-       * 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,
@@ -3287,6 +3294,15 @@ class AuroDropdown extends LitElement {
     AuroLibraryRuntimeUtils$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();
   }
@@ -3300,6 +3316,8 @@ class AuroDropdown extends LitElement {
   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;
     }
@@ -3435,7 +3453,7 @@ class AuroDropdown extends LitElement {
 
     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);
@@ -3456,7 +3474,7 @@ class AuroDropdown extends LitElement {
 
     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);

package/components/dropdown/dist/registered.js

@@ -2581,6 +2581,7 @@ var tokensCss$1 = css`:host{--ds-auro-dropdown-label-text-color: var(--ds-basic-
 
 const DESIGN_TOKEN_BREAKPOINT_PREFIX = '--ds-grid-breakpoint-';
 const DESIGN_TOKEN_BREAKPOINT_OPTIONS = [
+  'xl',
   'lg',
   'md',
   'sm',
@@ -2652,6 +2653,7 @@ class AuroDropdownBib extends LitElement {
 
   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;
@@ -3164,7 +3166,12 @@ class AuroDropdown extends LitElement {
       },
 
       /**
-       * 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,
@@ -3287,6 +3294,15 @@ class AuroDropdown extends LitElement {
     AuroLibraryRuntimeUtils$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();
   }
@@ -3300,6 +3316,8 @@ class AuroDropdown extends LitElement {
   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;
     }
@@ -3435,7 +3453,7 @@ class AuroDropdown extends LitElement {
 
     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);
@@ -3456,7 +3474,7 @@ class AuroDropdown extends LitElement {
 
     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);