@aurodesignsystem/auro-formkit 1.6.0-beta.4 → 1.6.0-beta.6

package/components/combobox/dist/index.js

@@ -2768,13 +2768,13 @@ let AuroIcon$1 = class AuroIcon extends BaseIcon$1 {
 
 var iconVersion$1 = '6.1.1';
 
-var styleCss$1$1 = i$3$1`:host{position:relative}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);white-space:normal}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`;
+var styleCss$1$1 = i$3$1`:host{position:relative;display:inline-block;max-width:100%}:host([fluid]){display:block}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);white-space:normal}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`;
 
 var colorCss$1$1 = i$3$1`.label{color:var(--ds-auro-dropdown-label-text-color)}.trigger{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-container-color);color:var(--ds-auro-dropdown-trigger-text-color)}.trigger:focus-within,.trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}.trigger:focus-within:not(:active){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-color-border-ui-focus-default, #2c67b5)}.trigger:hover{--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}.helpText{color:var(--ds-auro-dropdown-help-text-color)}:host([disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-ui-disabled-default, #adadad);--ds-auro-dropdown-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host([common]),:host([bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-primary-default, #585e67)}:host([common]) .trigger:active,:host([common]) .trigger:focus-within,:host([bordered]) .trigger:active,:host([bordered]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host([error]){--ds-auro-dropdown-help-text-color: var(--ds-color-text-error-default, #cc1816);--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-error-default, #cc1816)}:host([error]) .trigger{box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([error]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:none}:host([error]) .trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([disabled][common]),:host([disabled][bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-disabled-default, #adadad)}`;
 
 var tokensCss$4 = i$3$1`:host{--ds-auro-dropdown-help-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-dropdown-label-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-dropdown-popover-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-popover-border-color: transparent;--ds-auro-dropdown-popover-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-trigger-border-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdownbib-text-color: var(--ds-color-text-primary-default, #2a2a2a)}`;
 
-var styleCss$5 = i$3$1`:host{position:absolute;z-index:var(--depth-tooltip, 400);display:none}.container{display:inline-block;overflow:auto;box-sizing:border-box;margin-top:var(--ds-size-50, 0.25rem)}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset}:host([data-show]){display:block}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common]) .container,:host([inset]) .container{padding:var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}`;
+var styleCss$5 = i$3$1`:host{position:absolute;z-index:var(--depth-tooltip, 400);display:none}.container{display:inline-block;overflow:auto;box-sizing:border-box;margin:var(--ds-size-50, 0.25rem) 0}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset}:host([data-show]){display:flex}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common]) .container,:host([inset]) .container{padding:var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}`;
 
 var colorCss$4 = i$3$1`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`;
 
@@ -2877,12 +2877,13 @@ if (!customElements.get("auro-dropdownbib")) {
  * @attr { Boolean } disabled - If declared, the dropdown is not interactive.
  * @attr { Boolean } disableEventShow - If declared, the dropdown will only show by calling the API .show() public method.
  * @attr { Boolean } error - If declared in combination with `bordered` property or `helpText` slot content, will apply red color to both.
+ * @attr {Boolean} fluid - Makes the trigger to be full width of its parent container
  * @attr { Boolean } matchWidth - If declared, the popover and trigger will be set to the same width.
  * @attr { Boolean } inset - If declared, will apply padding around trigger slot content.
  * @attr { Boolean } rounded - If declared, will apply border-radius to trigger and default slots.
  * @attr { Boolean } hoverToggle - if declared, the trigger will toggle the big on mouseover/mouseout.
- * @attr { Boolean } noToggle - If declared, the trigger will only show the the dropdown bib.
- * @attr { Boolean } focusShow - if declared, the the bib will display when focus is applied to the trigger.
+ * @attr { Boolean } noToggle - If declared, the trigger will only show the dropdown bib.
+ * @attr { Boolean } focusShow - if declared, the bib will display when focus is applied to the trigger.
  * @attr { Boolean } noHideOnThisFocusLoss - If declared, the dropdown will not hide when moving focus outside the element.
  * @attr { String } mobileFullscreenBreakpoint - 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.
  * @prop { Boolean } isPopoverVisible - If true, the dropdown bib is displayed.
@@ -2985,6 +2986,10 @@ class AuroDropdown extends r$5 {
         type: Boolean,
         reflect: true
       },
+      fluid: {
+        type: Boolean,
+        reflect: true,
+      },
       focusShow: {
         type: Boolean,
         reflect: true
@@ -7592,7 +7597,7 @@ class AuroCombobox extends r$6 {
       this.handleMenuOptions();
 
       this.handleInputValueChange();
-      // validate only if the the value was set programmatically
+      // validate only if the value was set programmatically
       if (document.activeElement !== this) {
         this.validation.validate(this);
       }
@@ -7802,6 +7807,7 @@ class AuroCombobox extends r$6 {
         </div>
         <${this.dropdownTag}
           for="dropdownMenu"
+          fluid
           bordered
           rounded
           matchWidth

package/components/combobox/src/auro-combobox.js

@@ -428,7 +428,7 @@ export class AuroCombobox extends LitElement {
       this.handleMenuOptions();
 
       this.handleInputValueChange();
-      // validate only if the the value was set programmatically
+      // validate only if the value was set programmatically
       if (document.activeElement !== this) {
         this.validation.validate(this);
       }
@@ -638,6 +638,7 @@ export class AuroCombobox extends LitElement {
         </div>
         <${this.dropdownTag}
           for="dropdownMenu"
+          fluid
           bordered
           rounded
           matchWidth

package/components/counter/.turbo/turbo-build.log

@@ -74,13 +74,13 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 
 ./src/index.js → dist...
-created dist in 453ms
+created dist in 515ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 271ms
+created ./demo/ in 273ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 442ms
+created ./demo/ in 304ms
 
 > @auro-formkit/auro-counter@1.0.0 types
 > tsc --project tsconfig.json

package/components/counter/.turbo/turbo-bundler.log

@@ -4,10 +4,10 @@
 
 
 ./src/index.js → dist...
-created dist in 652ms
+created dist in 668ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 334ms
+created ./demo/ in 346ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 380ms
+created ./demo/ in 303ms

package/components/counter/demo/api.md

@@ -21,7 +21,7 @@
 | [isPopoverVisible](#isPopoverVisible)      | `isPopoverVisible`      | ` Boolean ` | false   | If true, the dropdown bib is displayed.          |
 | [matchWidth](#matchWidth)            | `matchWidth`            | ` Boolean ` | false   | If declared, the popover and trigger will be set to the same width. |
 | [noHideOnThisFocusLoss](#noHideOnThisFocusLoss) | `noHideOnThisFocusLoss` | ` Boolean ` | false   | If delclared, the dropdown will not hide when moving focus outside the element. |
-| [noToggle](#noToggle)              | `noToggle`              | ` Boolean ` |         | If declared, the trigger will only show the the dropdown bib. |
+| [noToggle](#noToggle)              | `noToggle`              | ` Boolean ` |         | If declared, the trigger will only show the dropdown bib. |
 | [ready](#ready)                 | `ready`                 | ` Boolean ` |         | When false the component API should not be called. |
 | [rounded](#rounded)               | `rounded`               | ` Boolean ` |         | If declared, will apply border-radius to trigger and default slots. |
 

package/components/datepicker/.turbo/turbo-build.log

@@ -373,13 +373,13 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 
 ./src/index.js → dist...
-created dist in 7.9s
+created dist in 7.3s
 
 ./demo/index.js → ./demo/...
 created ./demo/ in 3.6s
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 3.5s
+created ./demo/ in 3.4s
 
 > @auro-formkit/auro-datepicker@3.2.0 build:docs
 > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component datepicker

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

@@ -13066,13 +13066,13 @@ let AuroIcon$1 = class AuroIcon extends BaseIcon$1 {
 
 var iconVersion$1 = '6.1.1';
 
-var styleCss$1$1 = i$3$1`:host{position:relative}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);white-space:normal}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`;
+var styleCss$1$1 = i$3$1`:host{position:relative;display:inline-block;max-width:100%}:host([fluid]){display:block}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);white-space:normal}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`;
 
 var colorCss$1$1 = i$3$1`.label{color:var(--ds-auro-dropdown-label-text-color)}.trigger{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-container-color);color:var(--ds-auro-dropdown-trigger-text-color)}.trigger:focus-within,.trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}.trigger:focus-within:not(:active){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-color-border-ui-focus-default, #2c67b5)}.trigger:hover{--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}.helpText{color:var(--ds-auro-dropdown-help-text-color)}:host([disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-ui-disabled-default, #adadad);--ds-auro-dropdown-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host([common]),:host([bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-primary-default, #585e67)}:host([common]) .trigger:active,:host([common]) .trigger:focus-within,:host([bordered]) .trigger:active,:host([bordered]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host([error]){--ds-auro-dropdown-help-text-color: var(--ds-color-text-error-default, #cc1816);--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-error-default, #cc1816)}:host([error]) .trigger{box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([error]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:none}:host([error]) .trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([disabled][common]),:host([disabled][bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-disabled-default, #adadad)}`;
 
 var tokensCss$4 = i$3$1`:host{--ds-auro-dropdown-help-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-dropdown-label-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-dropdown-popover-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-popover-border-color: transparent;--ds-auro-dropdown-popover-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-trigger-border-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdownbib-text-color: var(--ds-color-text-primary-default, #2a2a2a)}`;
 
-var styleCss$4 = i$3$1`:host{position:absolute;z-index:var(--depth-tooltip, 400);display:none}.container{display:inline-block;overflow:auto;box-sizing:border-box;margin-top:var(--ds-size-50, 0.25rem)}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset}:host([data-show]){display:block}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common]) .container,:host([inset]) .container{padding:var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}`;
+var styleCss$4 = i$3$1`:host{position:absolute;z-index:var(--depth-tooltip, 400);display:none}.container{display:inline-block;overflow:auto;box-sizing:border-box;margin:var(--ds-size-50, 0.25rem) 0}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset}:host([data-show]){display:flex}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common]) .container,:host([inset]) .container{padding:var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}`;
 
 var colorCss$4 = i$3$1`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`;
 
@@ -13175,12 +13175,13 @@ if (!customElements.get("auro-dropdownbib")) {
  * @attr { Boolean } disabled - If declared, the dropdown is not interactive.
  * @attr { Boolean } disableEventShow - If declared, the dropdown will only show by calling the API .show() public method.
  * @attr { Boolean } error - If declared in combination with `bordered` property or `helpText` slot content, will apply red color to both.
+ * @attr {Boolean} fluid - Makes the trigger to be full width of its parent container
  * @attr { Boolean } matchWidth - If declared, the popover and trigger will be set to the same width.
  * @attr { Boolean } inset - If declared, will apply padding around trigger slot content.
  * @attr { Boolean } rounded - If declared, will apply border-radius to trigger and default slots.
  * @attr { Boolean } hoverToggle - if declared, the trigger will toggle the big on mouseover/mouseout.
- * @attr { Boolean } noToggle - If declared, the trigger will only show the the dropdown bib.
- * @attr { Boolean } focusShow - if declared, the the bib will display when focus is applied to the trigger.
+ * @attr { Boolean } noToggle - If declared, the trigger will only show the dropdown bib.
+ * @attr { Boolean } focusShow - if declared, the bib will display when focus is applied to the trigger.
  * @attr { Boolean } noHideOnThisFocusLoss - If declared, the dropdown will not hide when moving focus outside the element.
  * @attr { String } mobileFullscreenBreakpoint - 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.
  * @prop { Boolean } isPopoverVisible - If true, the dropdown bib is displayed.
@@ -13283,6 +13284,10 @@ class AuroDropdown extends r$5 {
         type: Boolean,
         reflect: true
       },
+      fluid: {
+        type: Boolean,
+        reflect: true,
+      },
       focusShow: {
         type: Boolean,
         reflect: true
@@ -18343,6 +18348,7 @@ class AuroDatePicker extends r$7 {
       <div class="outerWrapper">
         <${this.dropdownTag}
           for="dropdownMenu"
+          fluid
           bordered
           rounded
           ?disabled="${this.disabled}"

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

@@ -12814,13 +12814,13 @@ let AuroIcon$1 = class AuroIcon extends BaseIcon$1 {
 
 var iconVersion$1 = '6.1.1';
 
-var styleCss$1$1 = i$3$1`:host{position:relative}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);white-space:normal}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`;
+var styleCss$1$1 = i$3$1`:host{position:relative;display:inline-block;max-width:100%}:host([fluid]){display:block}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);white-space:normal}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`;
 
 var colorCss$1$1 = i$3$1`.label{color:var(--ds-auro-dropdown-label-text-color)}.trigger{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-container-color);color:var(--ds-auro-dropdown-trigger-text-color)}.trigger:focus-within,.trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}.trigger:focus-within:not(:active){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-color-border-ui-focus-default, #2c67b5)}.trigger:hover{--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}.helpText{color:var(--ds-auro-dropdown-help-text-color)}:host([disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-ui-disabled-default, #adadad);--ds-auro-dropdown-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host([common]),:host([bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-primary-default, #585e67)}:host([common]) .trigger:active,:host([common]) .trigger:focus-within,:host([bordered]) .trigger:active,:host([bordered]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host([error]){--ds-auro-dropdown-help-text-color: var(--ds-color-text-error-default, #cc1816);--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-error-default, #cc1816)}:host([error]) .trigger{box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([error]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:none}:host([error]) .trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([disabled][common]),:host([disabled][bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-disabled-default, #adadad)}`;
 
 var tokensCss$4 = i$3$1`:host{--ds-auro-dropdown-help-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-dropdown-label-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-dropdown-popover-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-popover-border-color: transparent;--ds-auro-dropdown-popover-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-trigger-border-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdownbib-text-color: var(--ds-color-text-primary-default, #2a2a2a)}`;
 
-var styleCss$4 = i$3$1`:host{position:absolute;z-index:var(--depth-tooltip, 400);display:none}.container{display:inline-block;overflow:auto;box-sizing:border-box;margin-top:var(--ds-size-50, 0.25rem)}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset}:host([data-show]){display:block}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common]) .container,:host([inset]) .container{padding:var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}`;
+var styleCss$4 = i$3$1`:host{position:absolute;z-index:var(--depth-tooltip, 400);display:none}.container{display:inline-block;overflow:auto;box-sizing:border-box;margin:var(--ds-size-50, 0.25rem) 0}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset}:host([data-show]){display:flex}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common]) .container,:host([inset]) .container{padding:var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}`;
 
 var colorCss$4 = i$3$1`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`;
 
@@ -12923,12 +12923,13 @@ if (!customElements.get("auro-dropdownbib")) {
  * @attr { Boolean } disabled - If declared, the dropdown is not interactive.
  * @attr { Boolean } disableEventShow - If declared, the dropdown will only show by calling the API .show() public method.
  * @attr { Boolean } error - If declared in combination with `bordered` property or `helpText` slot content, will apply red color to both.
+ * @attr {Boolean} fluid - Makes the trigger to be full width of its parent container
  * @attr { Boolean } matchWidth - If declared, the popover and trigger will be set to the same width.
  * @attr { Boolean } inset - If declared, will apply padding around trigger slot content.
  * @attr { Boolean } rounded - If declared, will apply border-radius to trigger and default slots.
  * @attr { Boolean } hoverToggle - if declared, the trigger will toggle the big on mouseover/mouseout.
- * @attr { Boolean } noToggle - If declared, the trigger will only show the the dropdown bib.
- * @attr { Boolean } focusShow - if declared, the the bib will display when focus is applied to the trigger.
+ * @attr { Boolean } noToggle - If declared, the trigger will only show the dropdown bib.
+ * @attr { Boolean } focusShow - if declared, the bib will display when focus is applied to the trigger.
  * @attr { Boolean } noHideOnThisFocusLoss - If declared, the dropdown will not hide when moving focus outside the element.
  * @attr { String } mobileFullscreenBreakpoint - 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.
  * @prop { Boolean } isPopoverVisible - If true, the dropdown bib is displayed.
@@ -13031,6 +13032,10 @@ class AuroDropdown extends r$5 {
         type: Boolean,
         reflect: true
       },
+      fluid: {
+        type: Boolean,
+        reflect: true,
+      },
       focusShow: {
         type: Boolean,
         reflect: true
@@ -18091,6 +18096,7 @@ class AuroDatePicker extends r$7 {
       <div class="outerWrapper">
         <${this.dropdownTag}
           for="dropdownMenu"
+          fluid
           bordered
           rounded
           ?disabled="${this.disabled}"

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

@@ -1 +1 @@
-{"version":3,"file":"auro-datepicker.d.ts","sourceRoot":"","sources":["../src/auro-datepicker.js"],"names":[],"mappings":"AAkCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AAGH;IAkFE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAiFI;;WAEG;;;;QAGH;;WAEG;;;;QAGH;;WAEG;;;;QAGH;;WAEG;;;;MAGN;IAED,+CAMC;IAED;;;;;;;OAOG;IACH,uBANW,MAAM,QAQhB;IAvMC;;OAEG;IACH,aAAyC;IAEzC;;OAEG;IACH,2BAAuD;IASvD,kBAAqB;IACrB,kBAAqB;IACrB,eAAkB;IAClB,oBAAuB;IACvB,cAAyB;IACzB,WAAsB;IACtB,cAAyB;IACzB,uBAAkC;IAClC,qBAAgC;IAChC,uBAAmC;IACnC,qBAaC;IAED;;OAEG;IACH,aAA4B;IAE5B;;OAEG;IACH,wBAAyB;IAEzB;;OAEG;IACH,mBAA0C;IAE1C;;OAEG;IACH,qBAAiD;IAEjD;;OAEG;IACH,8CAAkD;IAMlD,iBAAyF;IACzF,cAA6E;IAiI/E;;;;OAIG;IACH,8BAMC;IAED;;;;OAIG;IACH,6BAEC;IAED;;;;OAIG;IACH,2BAFa,IAAI,CAIhB;IAGD;;;;;OAKG;IACH,6BAEC;IAED;;;;;OAKG;IACH,4BAMC;IAED;;;;OAIG;IACH,2BAUC;IAED;;;;;OAKG;IACH,yBAiBC;IAED;;;;OAIG;IACH,wBAiBC;IAZO,kBAA2C;IAcnD;;;;OAIG;IACH,gCAEC;IAED;;;;OAIG;IACH,gCAQC;IAED;;;;;OAKG;IACH,2BAUC;IAED;;;;OAIG;IACH,0BA0BC;IAzBC,cAA4E;IA2B9E;;;;OAIG;IACH,uBAsCC;IArCC,kBAAkE;IAElE,iBAAgF;IAyB1E,uBAA2C;IAYnD;;;;OAIG;IACH,0BA2BC;IA1BC,kBAA8D;IA4BhE;;;;OAIG;IACH,4BAwDC;IAED;;;;OAIG;IACH,uBAWC;IAED;;;;;OAKG;IACH,wCAMC;IAED;;;;;OAKG;IACH,wBAuBC;IAtBC,yBAA2B;IAwB7B;;;;OAIG;IACH,wBAEC;IAED,sCAwKC;IAED;;;;;;;OAOG;IACH,yBAGC;IAED,qBAYC;IAGD,4CA6EC;CACF;2BA97B0B,KAAK"}
+{"version":3,"file":"auro-datepicker.d.ts","sourceRoot":"","sources":["../src/auro-datepicker.js"],"names":[],"mappings":"AAkCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AAGH;IAkFE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAiFI;;WAEG;;;;QAGH;;WAEG;;;;QAGH;;WAEG;;;;QAGH;;WAEG;;;;MAGN;IAED,+CAMC;IAED;;;;;;;OAOG;IACH,uBANW,MAAM,QAQhB;IAvMC;;OAEG;IACH,aAAyC;IAEzC;;OAEG;IACH,2BAAuD;IASvD,kBAAqB;IACrB,kBAAqB;IACrB,eAAkB;IAClB,oBAAuB;IACvB,cAAyB;IACzB,WAAsB;IACtB,cAAyB;IACzB,uBAAkC;IAClC,qBAAgC;IAChC,uBAAmC;IACnC,qBAaC;IAED;;OAEG;IACH,aAA4B;IAE5B;;OAEG;IACH,wBAAyB;IAEzB;;OAEG;IACH,mBAA0C;IAE1C;;OAEG;IACH,qBAAiD;IAEjD;;OAEG;IACH,8CAAkD;IAMlD,iBAAyF;IACzF,cAA6E;IAiI/E;;;;OAIG;IACH,8BAMC;IAED;;;;OAIG;IACH,6BAEC;IAED;;;;OAIG;IACH,2BAFa,IAAI,CAIhB;IAGD;;;;;OAKG;IACH,6BAEC;IAED;;;;;OAKG;IACH,4BAMC;IAED;;;;OAIG;IACH,2BAUC;IAED;;;;;OAKG;IACH,yBAiBC;IAED;;;;OAIG;IACH,wBAiBC;IAZO,kBAA2C;IAcnD;;;;OAIG;IACH,gCAEC;IAED;;;;OAIG;IACH,gCAQC;IAED;;;;;OAKG;IACH,2BAUC;IAED;;;;OAIG;IACH,0BA0BC;IAzBC,cAA4E;IA2B9E;;;;OAIG;IACH,uBAsCC;IArCC,kBAAkE;IAElE,iBAAgF;IAyB1E,uBAA2C;IAYnD;;;;OAIG;IACH,0BA2BC;IA1BC,kBAA8D;IA4BhE;;;;OAIG;IACH,4BAwDC;IAED;;;;OAIG;IACH,uBAWC;IAED;;;;;OAKG;IACH,wCAMC;IAED;;;;;OAKG;IACH,wBAuBC;IAtBC,yBAA2B;IAwB7B;;;;OAIG;IACH,wBAEC;IAED,sCAwKC;IAED;;;;;;;OAOG;IACH,yBAGC;IAED,qBAYC;IAGD,4CA8EC;CACF;2BA/7B0B,KAAK"}

package/components/datepicker/dist/index.js

@@ -12814,13 +12814,13 @@ let AuroIcon$1 = class AuroIcon extends BaseIcon$1 {
 
 var iconVersion$1 = '6.1.1';
 
-var styleCss$1$1 = i$3$1`:host{position:relative}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);white-space:normal}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`;
+var styleCss$1$1 = i$3$1`:host{position:relative;display:inline-block;max-width:100%}:host([fluid]){display:block}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);white-space:normal}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`;
 
 var colorCss$1$1 = i$3$1`.label{color:var(--ds-auro-dropdown-label-text-color)}.trigger{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-container-color);color:var(--ds-auro-dropdown-trigger-text-color)}.trigger:focus-within,.trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}.trigger:focus-within:not(:active){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-color-border-ui-focus-default, #2c67b5)}.trigger:hover{--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}.helpText{color:var(--ds-auro-dropdown-help-text-color)}:host([disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-ui-disabled-default, #adadad);--ds-auro-dropdown-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host([common]),:host([bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-primary-default, #585e67)}:host([common]) .trigger:active,:host([common]) .trigger:focus-within,:host([bordered]) .trigger:active,:host([bordered]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host([error]){--ds-auro-dropdown-help-text-color: var(--ds-color-text-error-default, #cc1816);--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-error-default, #cc1816)}:host([error]) .trigger{box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([error]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:none}:host([error]) .trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([disabled][common]),:host([disabled][bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-disabled-default, #adadad)}`;
 
 var tokensCss$4 = i$3$1`:host{--ds-auro-dropdown-help-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-dropdown-label-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-dropdown-popover-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-popover-border-color: transparent;--ds-auro-dropdown-popover-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-trigger-border-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdownbib-text-color: var(--ds-color-text-primary-default, #2a2a2a)}`;
 
-var styleCss$4 = i$3$1`:host{position:absolute;z-index:var(--depth-tooltip, 400);display:none}.container{display:inline-block;overflow:auto;box-sizing:border-box;margin-top:var(--ds-size-50, 0.25rem)}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset}:host([data-show]){display:block}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common]) .container,:host([inset]) .container{padding:var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}`;
+var styleCss$4 = i$3$1`:host{position:absolute;z-index:var(--depth-tooltip, 400);display:none}.container{display:inline-block;overflow:auto;box-sizing:border-box;margin:var(--ds-size-50, 0.25rem) 0}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset}:host([data-show]){display:flex}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common]) .container,:host([inset]) .container{padding:var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}`;
 
 var colorCss$4 = i$3$1`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`;
 
@@ -12923,12 +12923,13 @@ if (!customElements.get("auro-dropdownbib")) {
  * @attr { Boolean } disabled - If declared, the dropdown is not interactive.
  * @attr { Boolean } disableEventShow - If declared, the dropdown will only show by calling the API .show() public method.
  * @attr { Boolean } error - If declared in combination with `bordered` property or `helpText` slot content, will apply red color to both.
+ * @attr {Boolean} fluid - Makes the trigger to be full width of its parent container
  * @attr { Boolean } matchWidth - If declared, the popover and trigger will be set to the same width.
  * @attr { Boolean } inset - If declared, will apply padding around trigger slot content.
  * @attr { Boolean } rounded - If declared, will apply border-radius to trigger and default slots.
  * @attr { Boolean } hoverToggle - if declared, the trigger will toggle the big on mouseover/mouseout.
- * @attr { Boolean } noToggle - If declared, the trigger will only show the the dropdown bib.
- * @attr { Boolean } focusShow - if declared, the the bib will display when focus is applied to the trigger.
+ * @attr { Boolean } noToggle - If declared, the trigger will only show the dropdown bib.
+ * @attr { Boolean } focusShow - if declared, the bib will display when focus is applied to the trigger.
  * @attr { Boolean } noHideOnThisFocusLoss - If declared, the dropdown will not hide when moving focus outside the element.
  * @attr { String } mobileFullscreenBreakpoint - 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.
  * @prop { Boolean } isPopoverVisible - If true, the dropdown bib is displayed.
@@ -13031,6 +13032,10 @@ class AuroDropdown extends r$5 {
         type: Boolean,
         reflect: true
       },
+      fluid: {
+        type: Boolean,
+        reflect: true,
+      },
       focusShow: {
         type: Boolean,
         reflect: true
@@ -18091,6 +18096,7 @@ class AuroDatePicker extends r$7 {
       <div class="outerWrapper">
         <${this.dropdownTag}
           for="dropdownMenu"
+          fluid
           bordered
           rounded
           ?disabled="${this.disabled}"

package/components/datepicker/src/auro-datepicker.js

@@ -892,6 +892,7 @@ export class AuroDatePicker extends LitElement {
       <div class="outerWrapper">
         <${this.dropdownTag}
           for="dropdownMenu"
+          fluid
           bordered
           rounded
           ?disabled="${this.disabled}"

package/components/dropdown/.turbo/turbo-build.log

@@ -90,13 +90,13 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 
 ./src/index.js → dist...
-created dist in 1.3s
+created dist in 1.5s
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 928ms
+created ./demo/ in 1s
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 783ms
+created ./demo/ in 746ms
 
 > @auro-formkit/auro-dropdown@3.0.0 build:docs
 > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component dropdown
@@ -128,16 +128,16 @@ Retrieving latest "/home/runner/work/auro-formkit/auro-formkit/components/dropdo
   ⁕ FILE:src=./../docs/partials/description.md 
   ⁕ FILE:src=./../docs/partials/useCases.md 
   ⁕ FILE:src=./../apiExamples/common.html 
-  ⁕ FILE:src=./../apiExamples/commonLabelledby.html 
   ⁕ FILE:src=./../apiExamples/commonSlot.html 
   ⁕ FILE:src=./../apiExamples/widerPopover.html 
   ⁕ FILE:src=./../apiExamples/commonMatchWidth.html 
+  ⁕ FILE:src=./../apiExamples/inline.html 
   ⁕ FILE:src=./../apiExamples/custom.html 
   ⁕ CODE:src=./../apiExamples/common.html 
-  ⁕ CODE:src=./../apiExamples/commonLabelledby.html 
   ⁕ CODE:src=./../apiExamples/commonSlot.html 
   ⁕ CODE:src=./../apiExamples/widerPopover.html 
   ⁕ CODE:src=./../apiExamples/commonMatchWidth.html 
+  ⁕ CODE:src=./../apiExamples/inline.html 
   ⁕ CODE:src=./../apiExamples/custom.html 
 
 ✔ /demo/api.md Updated
@@ -146,7 +146,6 @@ Retrieving latest "/home/runner/work/auro-formkit/auro-formkit/components/dropdo
   ⁕ FILE:src=./../apiExamples/basic.html 
   ⁕ FILE:src=./../apiExamples/basicIcon.html 
   ⁕ FILE:src=./../apiExamples/basicButton.html 
-  ⁕ FILE:src=./../apiExamples/basicInput.html 
   ⁕ FILE:src=./../apiExamples/bordered.html 
   ⁕ FILE:src=./../apiExamples/chevron.html 
   ⁕ FILE:src=./../apiExamples/chevronIcon.html 
@@ -156,6 +155,7 @@ Retrieving latest "/home/runner/work/auro-formkit/auro-formkit/components/dropdo
   ⁕ FILE:src=./../apiExamples/disabledAll.html 
   ⁕ FILE:src=./../apiExamples/error.html 
   ⁕ FILE:src=./../apiExamples/errorBordered.html 
+  ⁕ FILE:src=./../apiExamples/fluid.html 
   ⁕ FILE:src=./../apiExamples/inset.html 
   ⁕ FILE:src=./../apiExamples/insetBordered.html 
   ⁕ FILE:src=./../apiExamples/rounded.html 
@@ -172,7 +172,6 @@ Retrieving latest "/home/runner/work/auro-formkit/auro-formkit/components/dropdo
   ⁕ CODE:src=./../apiExamples/basic.html 
   ⁕ CODE:src=./../apiExamples/basicIcon.html 
   ⁕ CODE:src=./../apiExamples/basicButton.html 
-  ⁕ CODE:src=./../apiExamples/basicInput.html 
   ⁕ CODE:src=./../apiExamples/bordered.html 
   ⁕ CODE:src=./../apiExamples/chevron.html 
   ⁕ CODE:src=./../apiExamples/chevronIcon.html 
@@ -182,6 +181,7 @@ Retrieving latest "/home/runner/work/auro-formkit/auro-formkit/components/dropdo
   ⁕ CODE:src=./../apiExamples/disabledAll.html 
   ⁕ CODE:src=./../apiExamples/error.html 
   ⁕ CODE:src=./../apiExamples/errorBordered.html 
+  ⁕ CODE:src=./../apiExamples/fluid.html 
   ⁕ CODE:src=./../apiExamples/inset.html 
   ⁕ CODE:src=./../apiExamples/insetBordered.html 
   ⁕ CODE:src=./../apiExamples/rounded.html 

package/components/dropdown/.turbo/turbo-bundler.log

@@ -4,10 +4,10 @@
 
 
 ./src/index.js → dist...
-created dist in 1.1s
+created dist in 1.3s
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 900ms
+created ./demo/ in 1s
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 704ms
+created ./demo/ in 606ms

package/components/dropdown/demo/api.html

@@ -49,5 +49,7 @@
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-dialog@latest/dist/auro-dialog__bundled.js" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/dist/auro-icon__bundled.js" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-input@latest/dist/auro-input__bundled.js" type="module"></script>
   </body>
 </html>

package/components/dropdown/demo/api.md

@@ -18,14 +18,15 @@
 | [common](#common)                     | `common`                     | ` Boolean ` |         | If declared, the dropdown will be styled with the common theme. |
 | [disabled](#disabled)                   | `disabled`                   | ` Boolean ` |         | If declared, the dropdown is not interactive.    |
 | [error](#error)                      | `error`                      | ` Boolean ` |         | If declared in combination with `bordered` property or `helpText` slot content, will apply red color to both. |
-| [focusShow](#focusShow)                  | `focusShow`                  | ` Boolean ` |         | if declared, the the bib will display when focus is applied to the trigger. |
+| [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. |
 | [hoverToggle](#hoverToggle)                | `hoverToggle`                | ` Boolean ` |         | if declared, the trigger will toggle the big on mouseover/mouseout. |
 | [inset](#inset)                      | `inset`                      | ` Boolean ` |         | If declared, will apply padding around trigger slot content. |
 | [isPopoverVisible](#isPopoverVisible)           | `isPopoverVisible`           | ` Boolean ` | false   | If true, the dropdown bib is displayed.          |
 | [matchWidth](#matchWidth)                 | `matchWidth`                 | ` Boolean ` | false   | If declared, the popover and trigger will be set to the same width. |
 | [mobileFullscreenBreakpoint](#mobileFullscreenBreakpoint) | `mobileFullscreenBreakpoint` | ` 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. |
 | [noHideOnThisFocusLoss](#noHideOnThisFocusLoss)      | `noHideOnThisFocusLoss`      | ` Boolean ` | false   | If declared, the dropdown will not hide when moving focus outside the element. |
-| [noToggle](#noToggle)                   | `noToggle`                   | ` Boolean ` |         | If declared, the trigger will only show the the dropdown bib. |
+| [noToggle](#noToggle)                   | `noToggle`                   | ` Boolean ` |         | If declared, the trigger will only show the dropdown bib. |
 | [onSlotChange](#onSlotChange)               | `onSlotChange`               |             |         |                                                  |
 | [rounded](#rounded)                    | `rounded`                    | ` Boolean ` |         | If declared, will apply border-radius to trigger and default slots. |
 
@@ -158,40 +159,6 @@ The most basic, simple version of `auro-dropdown`.
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
-<div class="exampleWrapper">
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basicInput.html) -->
-<!-- The below content is automatically added from ./../apiExamples/basicInput.html -->
-<auro-dropdown aria-label="custom label">
-  Lorem ipsum solar
-  <div slot="trigger">
-    <auro-input
-      borderless
-      slot="trigger"
-      id="inputExampleTrigger">
-    </auro-input>
-  </div>
-</auro-dropdown>
-<!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basicInput.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/basicInput.html -->
-
-```html
-<auro-dropdown aria-label="custom label">
-  Lorem ipsum solar
-  <div slot="trigger">
-    <auro-input
-      borderless
-      slot="trigger"
-      id="inputExampleTrigger">
-    </auro-input>
-  </div>
-</auro-dropdown>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
 
 ### Property Examples
 
@@ -501,9 +468,48 @@ Adds the error state UI to the trigger.
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
+#### fluid
+
+The `fluid` property makes the trigger to have the full width.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/fluid.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/fluid.html -->
+  <auro-dropdown aria-label="custom label" fluid>
+    Lorem ipsum solar
+    <div slot="trigger">
+      <auro-input
+        borderless
+        slot="trigger"
+        id="inputExampleTrigger">
+      </auro-input>
+    </div>
+  </auro-dropdown>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/fluid.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/fluid.html -->
+
+```html
+<auro-dropdown aria-label="custom label" fluid>
+  Lorem ipsum solar
+  <div slot="trigger">
+    <auro-input
+      borderless
+      slot="trigger"
+      id="inputExampleTrigger">
+    </auro-input>
+  </div>
+</auro-dropdown>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 #### inset
 
-The `inset` property applies a predefined amount of CSS `padding` to the `trigger` slot content.
+The `inset` property applies a predefined amount of CSS `padding` to the `trigger` slot content. Use this property to apply borderless style.
 
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inset.html) -->
@@ -852,7 +858,7 @@ The `show` method may also be called from anywhere in your code by executing `do
   <auro-input id="showExampleTriggerInput" required>
     <span slot="label">Enter a value to show the dropdown</span>
   </auro-input>
-  <auro-dropdown id="showMethodExample" aria-label="custom label" rounded bordered inset>
+  <auro-dropdown id="showMethodExample" aria-label="custom label" fluid rounded bordered inset>
     <p>
       Lorem ipsum solar
     </p>
@@ -869,7 +875,7 @@ The `show` method may also be called from anywhere in your code by executing `do
 <auro-input id="showExampleTriggerInput" required>
   <span slot="label">Enter a value to show the dropdown</span>
 </auro-input>
-<auro-dropdown id="showMethodExample" aria-label="custom label" rounded bordered inset>
+<auro-dropdown id="showMethodExample" aria-label="custom label" fluid rounded bordered inset>
   <p>
     Lorem ipsum solar
   </p>
@@ -904,7 +910,7 @@ This example demonstrations collapsing the dropdown by clicking a button within
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/programmaticallyHide.html) -->
   <!-- The below content is automatically added from ./../apiExamples/programmaticallyHide.html -->
-  <auro-dropdown id="hideExample" aria-label="custom label" rounded bordered inset>
+  <auro-dropdown id="hideExample" aria-label="custom label" fluid rounded bordered inset>
     <p>
       Lorem ipsum solar
     </p>
@@ -924,7 +930,7 @@ This example demonstrations collapsing the dropdown by clicking a button within
 <!-- The below code snippet is automatically added from ./../apiExamples/programmaticallyHide.html -->
 
 ```html
-<auro-dropdown id="hideExample" aria-label="custom label" rounded bordered inset>
+<auro-dropdown id="hideExample" aria-label="custom label" fluid rounded bordered inset>
   <p>
     Lorem ipsum solar
   </p>