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

package/components/counter/dist/index.js

@@ -4613,7 +4613,6 @@ 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',
@@ -4685,7 +4684,6 @@ 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;
@@ -5211,12 +5209,7 @@ class AuroDropdown extends LitElement {
       },
 
       /**
-       * 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
+       * 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: {
         type: String,
@@ -5356,15 +5349,6 @@ 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();
   }
@@ -5378,8 +5362,6 @@ 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;
     }
@@ -5530,7 +5512,7 @@ class AuroDropdown extends LitElement {
 
     this.triggerContentSlot.forEach((node) => {
       if (node.querySelectorAll) {
-        const auroElements = node.querySelectorAll(this.focusableEntityQuery);
+        const auroElements = node.querySelectorAll('auro-input, [auro-input], auro-button, [auro-button], button, input');
         auroElements.forEach((auroEl) => {
           auroEl.addEventListener('focus', this.bindFocusEventToTrigger);
           auroEl.addEventListener('blur', this.bindFocusEventToTrigger);
@@ -5551,7 +5533,7 @@ class AuroDropdown extends LitElement {
 
     this.triggerContentSlot.forEach((node) => {
       if (node.querySelectorAll) {
-        const auroElements = node.querySelectorAll(this.focusableEntityQuery);
+        const auroElements = node.querySelectorAll('auro-input, [auro-input], auro-button, [auro-button], button, input');
         auroElements.forEach((auroEl) => {
           auroEl.removeEventListener('focus', this.bindFocusEventToTrigger);
           auroEl.removeEventListener('blur', this.bindFocusEventToTrigger);
@@ -6681,11 +6663,8 @@ class AuroCounterGroup extends LitElement {
       },
 
       /**
-       * 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.
+       * 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.
        * @default sm
        */
       fullscreenBreakpoint: {

package/components/counter/dist/registered.js

@@ -4613,7 +4613,6 @@ 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',
@@ -4685,7 +4684,6 @@ 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;
@@ -5211,12 +5209,7 @@ class AuroDropdown extends LitElement {
       },
 
       /**
-       * 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
+       * 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: {
         type: String,
@@ -5356,15 +5349,6 @@ 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();
   }
@@ -5378,8 +5362,6 @@ 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;
     }
@@ -5530,7 +5512,7 @@ class AuroDropdown extends LitElement {
 
     this.triggerContentSlot.forEach((node) => {
       if (node.querySelectorAll) {
-        const auroElements = node.querySelectorAll(this.focusableEntityQuery);
+        const auroElements = node.querySelectorAll('auro-input, [auro-input], auro-button, [auro-button], button, input');
         auroElements.forEach((auroEl) => {
           auroEl.addEventListener('focus', this.bindFocusEventToTrigger);
           auroEl.addEventListener('blur', this.bindFocusEventToTrigger);
@@ -5551,7 +5533,7 @@ class AuroDropdown extends LitElement {
 
     this.triggerContentSlot.forEach((node) => {
       if (node.querySelectorAll) {
-        const auroElements = node.querySelectorAll(this.focusableEntityQuery);
+        const auroElements = node.querySelectorAll('auro-input, [auro-input], auro-button, [auro-button], button, input');
         auroElements.forEach((auroEl) => {
           auroEl.removeEventListener('focus', this.bindFocusEventToTrigger);
           auroEl.removeEventListener('blur', this.bindFocusEventToTrigger);
@@ -6681,11 +6663,8 @@ class AuroCounterGroup extends LitElement {
       },
 
       /**
-       * 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.
+       * 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.
        * @default sm
        */
       fullscreenBreakpoint: {

package/components/datepicker/demo/api.md

@@ -15,7 +15,6 @@
 | [disabled](#disabled)                        | `disabled`                        |           | `boolean`  | false                                            | If set, disables the datepicker.                 |
 | [error](#error)                           | `error`                           |           | `string`   |                                                  | When defined, sets persistent validity to `customError` and sets the validation message to the attribute value. |
 | [format](#format)                          | `format`                          |           | `string`   | "mm/dd/yyyy"                                     | Specifies the date format. The default is `mm/dd/yyyy`. |
-| [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`  | false                                            | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600. |
 | [maxDate](#maxDate)                         | `maxDate`                         |           | `string`   |                                                  | Maximum date. All dates after will be disabled.  |
 | [minDate](#minDate)                         | `minDate`                         |           | `string`   |                                                  | Minimum date. All dates before will be disabled. |

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

@@ -15197,7 +15197,6 @@ 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',
@@ -15269,7 +15268,6 @@ class AuroDropdownBib extends r$2 {
 
   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;
@@ -15795,12 +15793,7 @@ class AuroDropdown extends r$2 {
       },
 
       /**
-       * 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
+       * 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: {
         type: String,
@@ -15940,15 +15933,6 @@ class AuroDropdown extends r$2 {
     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();
   }
@@ -15962,8 +15946,6 @@ class AuroDropdown extends r$2 {
   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;
     }
@@ -16114,7 +16096,7 @@ class AuroDropdown extends r$2 {
 
     this.triggerContentSlot.forEach((node) => {
       if (node.querySelectorAll) {
-        const auroElements = node.querySelectorAll(this.focusableEntityQuery);
+        const auroElements = node.querySelectorAll('auro-input, [auro-input], auro-button, [auro-button], button, input');
         auroElements.forEach((auroEl) => {
           auroEl.addEventListener('focus', this.bindFocusEventToTrigger);
           auroEl.addEventListener('blur', this.bindFocusEventToTrigger);
@@ -16135,7 +16117,7 @@ class AuroDropdown extends r$2 {
 
     this.triggerContentSlot.forEach((node) => {
       if (node.querySelectorAll) {
-        const auroElements = node.querySelectorAll(this.focusableEntityQuery);
+        const auroElements = node.querySelectorAll('auro-input, [auro-input], auro-button, [auro-button], button, input');
         auroElements.forEach((auroEl) => {
           auroEl.removeEventListener('focus', this.bindFocusEventToTrigger);
           auroEl.removeEventListener('blur', this.bindFocusEventToTrigger);
@@ -23442,7 +23424,6 @@ class AuroDatePicker extends r$2 {
     this.calendarEndDate = undefined;
     this.calendarFocusDate = this.value;
     this.format = 'mm/dd/yyyy';
-    this.fullscreenBreakpoint = 'sm';
     this.monthNames = [
       'January',
       'February',
@@ -23580,19 +23561,6 @@ class AuroDatePicker extends r$2 {
         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.
@@ -24419,7 +24387,7 @@ class AuroDatePicker extends r$2 {
           ?disabled="${this.disabled}"
           ?error="${this.validity !== undefined && this.validity !== 'valid'}"
           disableEventShow
-          .fullscreenBreakpoint="${this.fullscreenBreakpoint}"
+          fullscreenBreakpoint="sm"
           .placement="${this.placement}"
           .offset="${this.offset}"
           ?autoPlacement="${this.autoPlacement}"

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

@@ -14938,7 +14938,6 @@ 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',
@@ -15010,7 +15009,6 @@ class AuroDropdownBib extends r$2 {
 
   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;
@@ -15536,12 +15534,7 @@ class AuroDropdown extends r$2 {
       },
 
       /**
-       * 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
+       * 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: {
         type: String,
@@ -15681,15 +15674,6 @@ class AuroDropdown extends r$2 {
     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();
   }
@@ -15703,8 +15687,6 @@ class AuroDropdown extends r$2 {
   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;
     }
@@ -15855,7 +15837,7 @@ class AuroDropdown extends r$2 {
 
     this.triggerContentSlot.forEach((node) => {
       if (node.querySelectorAll) {
-        const auroElements = node.querySelectorAll(this.focusableEntityQuery);
+        const auroElements = node.querySelectorAll('auro-input, [auro-input], auro-button, [auro-button], button, input');
         auroElements.forEach((auroEl) => {
           auroEl.addEventListener('focus', this.bindFocusEventToTrigger);
           auroEl.addEventListener('blur', this.bindFocusEventToTrigger);
@@ -15876,7 +15858,7 @@ class AuroDropdown extends r$2 {
 
     this.triggerContentSlot.forEach((node) => {
       if (node.querySelectorAll) {
-        const auroElements = node.querySelectorAll(this.focusableEntityQuery);
+        const auroElements = node.querySelectorAll('auro-input, [auro-input], auro-button, [auro-button], button, input');
         auroElements.forEach((auroEl) => {
           auroEl.removeEventListener('focus', this.bindFocusEventToTrigger);
           auroEl.removeEventListener('blur', this.bindFocusEventToTrigger);
@@ -23183,7 +23165,6 @@ class AuroDatePicker extends r$2 {
     this.calendarEndDate = undefined;
     this.calendarFocusDate = this.value;
     this.format = 'mm/dd/yyyy';
-    this.fullscreenBreakpoint = 'sm';
     this.monthNames = [
       'January',
       'February',
@@ -23321,19 +23302,6 @@ class AuroDatePicker extends r$2 {
         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.
@@ -24160,7 +24128,7 @@ class AuroDatePicker extends r$2 {
           ?disabled="${this.disabled}"
           ?error="${this.validity !== undefined && this.validity !== 'valid'}"
           disableEventShow
-          .fullscreenBreakpoint="${this.fullscreenBreakpoint}"
+          fullscreenBreakpoint="sm"
           .placement="${this.placement}"
           .offset="${this.offset}"
           ?autoPlacement="${this.autoPlacement}"

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

@@ -77,18 +77,6 @@ export class AuroDatePicker extends LitElement {
             type: StringConstructor;
             reflect: boolean;
         };
-        /**
-         * 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;
-            reflect: boolean;
-        };
         /**
          * If declared, make bib.fullscreen.headline in HeadingDisplay.
          * Otherwise, Heading 600.
@@ -270,7 +258,6 @@ export class AuroDatePicker extends LitElement {
     calendarEndDate: any;
     calendarFocusDate: any;
     format: string;
-    fullscreenBreakpoint: string;
     monthNames: string[];
     monthFirst: boolean;
     placement: string;

package/components/datepicker/dist/index.js

@@ -14887,7 +14887,6 @@ 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',
@@ -14959,7 +14958,6 @@ 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;
@@ -15485,12 +15483,7 @@ class AuroDropdown extends LitElement {
       },
 
       /**
-       * 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
+       * 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: {
         type: String,
@@ -15630,15 +15623,6 @@ 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();
   }
@@ -15652,8 +15636,6 @@ 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;
     }
@@ -15804,7 +15786,7 @@ class AuroDropdown extends LitElement {
 
     this.triggerContentSlot.forEach((node) => {
       if (node.querySelectorAll) {
-        const auroElements = node.querySelectorAll(this.focusableEntityQuery);
+        const auroElements = node.querySelectorAll('auro-input, [auro-input], auro-button, [auro-button], button, input');
         auroElements.forEach((auroEl) => {
           auroEl.addEventListener('focus', this.bindFocusEventToTrigger);
           auroEl.addEventListener('blur', this.bindFocusEventToTrigger);
@@ -15825,7 +15807,7 @@ class AuroDropdown extends LitElement {
 
     this.triggerContentSlot.forEach((node) => {
       if (node.querySelectorAll) {
-        const auroElements = node.querySelectorAll(this.focusableEntityQuery);
+        const auroElements = node.querySelectorAll('auro-input, [auro-input], auro-button, [auro-button], button, input');
         auroElements.forEach((auroEl) => {
           auroEl.removeEventListener('focus', this.bindFocusEventToTrigger);
           auroEl.removeEventListener('blur', this.bindFocusEventToTrigger);
@@ -23119,7 +23101,6 @@ class AuroDatePicker extends LitElement {
     this.calendarEndDate = undefined;
     this.calendarFocusDate = this.value;
     this.format = 'mm/dd/yyyy';
-    this.fullscreenBreakpoint = 'sm';
     this.monthNames = [
       'January',
       'February',
@@ -23257,19 +23238,6 @@ 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.
@@ -24096,7 +24064,7 @@ class AuroDatePicker extends LitElement {
           ?disabled="${this.disabled}"
           ?error="${this.validity !== undefined && this.validity !== 'valid'}"
           disableEventShow
-          .fullscreenBreakpoint="${this.fullscreenBreakpoint}"
+          fullscreenBreakpoint="sm"
           .placement="${this.placement}"
           .offset="${this.offset}"
           ?autoPlacement="${this.autoPlacement}"

package/components/datepicker/dist/registered.js

@@ -14887,7 +14887,6 @@ 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',
@@ -14959,7 +14958,6 @@ 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;
@@ -15485,12 +15483,7 @@ class AuroDropdown extends LitElement {
       },
 
       /**
-       * 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
+       * 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: {
         type: String,
@@ -15630,15 +15623,6 @@ 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();
   }
@@ -15652,8 +15636,6 @@ 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;
     }
@@ -15804,7 +15786,7 @@ class AuroDropdown extends LitElement {
 
     this.triggerContentSlot.forEach((node) => {
       if (node.querySelectorAll) {
-        const auroElements = node.querySelectorAll(this.focusableEntityQuery);
+        const auroElements = node.querySelectorAll('auro-input, [auro-input], auro-button, [auro-button], button, input');
         auroElements.forEach((auroEl) => {
           auroEl.addEventListener('focus', this.bindFocusEventToTrigger);
           auroEl.addEventListener('blur', this.bindFocusEventToTrigger);
@@ -15825,7 +15807,7 @@ class AuroDropdown extends LitElement {
 
     this.triggerContentSlot.forEach((node) => {
       if (node.querySelectorAll) {
-        const auroElements = node.querySelectorAll(this.focusableEntityQuery);
+        const auroElements = node.querySelectorAll('auro-input, [auro-input], auro-button, [auro-button], button, input');
         auroElements.forEach((auroEl) => {
           auroEl.removeEventListener('focus', this.bindFocusEventToTrigger);
           auroEl.removeEventListener('blur', this.bindFocusEventToTrigger);
@@ -23119,7 +23101,6 @@ class AuroDatePicker extends LitElement {
     this.calendarEndDate = undefined;
     this.calendarFocusDate = this.value;
     this.format = 'mm/dd/yyyy';
-    this.fullscreenBreakpoint = 'sm';
     this.monthNames = [
       'January',
       'February',
@@ -23257,19 +23238,6 @@ 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.
@@ -24096,7 +24064,7 @@ class AuroDatePicker extends LitElement {
           ?disabled="${this.disabled}"
           ?error="${this.validity !== undefined && this.validity !== 'valid'}"
           disableEventShow
-          .fullscreenBreakpoint="${this.fullscreenBreakpoint}"
+          fullscreenBreakpoint="sm"
           .placement="${this.placement}"
           .offset="${this.offset}"
           ?autoPlacement="${this.autoPlacement}"

package/components/dropdown/demo/api.md

@@ -23,7 +23,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 `  | "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. |
+| [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. |
 | [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. |