@aurodesignsystem/auro-formkit 2.0.0-beta.41 → 2.0.0-beta.42

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

@@ -16,12 +16,15 @@ import { AuroDependencyVersioning } from '@aurodesignsystem/auro-library/scripts
 import { AuroIcon } from '@aurodesignsystem/auro-icon/src/auro-icon.js';
 import iconVersion from './iconVersion.js';
 
+
+import { AuroDropdownBib } from './auro-dropdownBib.js';
+import dropdownVersion from './dropdownVersion.js';
+
 import styleCss from "./styles/style-css.js";
 import colorCss from "./styles/color-css.js";
 import tokensCss from "./styles/tokens-css.js";
 
 import '@aurodesignsystem/auro-helptext';
-import './auro-dropdownBib.js';
 
 /**
  * @attr { Boolean } disableEventShow - If declared, the dropdown will only show by calling the API .show() public method.
@@ -40,6 +43,7 @@ export class AuroDropdown extends LitElement {
     super();
 
     this.isPopoverVisible = false;
+    this.isBibFullscreen = false;
     this.matchWidth = false;
     this.noHideOnThisFocusLoss = false;
 
@@ -114,7 +118,16 @@ export class AuroDropdown extends LitElement {
      * Generate unique names for dependency components.
      */
     const versioning = new AuroDependencyVersioning();
+
+    /**
+     * @private
+     */
     this.iconTag = versioning.generateTag('auro-icon', iconVersion, AuroIcon);
+
+    /**
+     * @private
+     */
+    this.dropdownBibTag = versioning.generateTag('auro-dropdownbib', dropdownVersion, AuroDropdownBib);
   }
 
   /**
@@ -216,6 +229,14 @@ export class AuroDropdown extends LitElement {
         type: Boolean
       },
 
+      /**
+       * If true, the dropdown bib is taking the fullscreen when it's open
+       */
+      isBibFullscreen: {
+        type: Boolean,
+        reflect: true,
+      },
+
       /**
        * If declared, the trigger will toggle the dropdown on mouseover/mouseout.
        */
@@ -344,7 +365,6 @@ export class AuroDropdown extends LitElement {
 
   /**
    * Exposes CSS parts for styling from parent components.
-   * @private
    * @returns {void}
    */
   exposeCssParts() {
@@ -552,13 +572,14 @@ export class AuroDropdown extends LitElement {
           <slot @slotchange="${this.handleDefaultSlot}"></slot>
         </div>
         <div id="bibSizer" part="size"></div>
-        <auro-dropdownbib
+        <${this.dropdownBibTag}
           id="bib"
           role="tooltip"
+          ?isfullscreen="${this.isBibFullscreen}"
           ?common="${this.common}"
           ?rounded="${this.common || this.rounded}"
           ?inset="${this.common || this.inset}">
-        </auro-dropdownbib>
+        </${this.dropdownBibTag}>
       </div>
     `;
   }

package/components/dropdown/src/auro-dropdownBib.js

@@ -8,6 +8,8 @@
 import { html } from "lit/static-html.js";
 import { LitElement } from "lit";
 
+import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+
 import styleCss from "./styles/bibStyles-css.js";
 import colorCss from "./styles/bibColors-css.js";
 import tokensCss from "./styles/tokens-css.js";
@@ -35,6 +37,8 @@ export class AuroDropdownBib extends LitElement {
      * @private
      */
     this._mobileBreakpointValue = undefined;
+
+    AuroLibraryRuntimeUtils.prototype.handleComponentTagRename(this, 'auro-dropdownbib');
   }
 
   static get styles() {
@@ -48,6 +52,14 @@ export class AuroDropdownBib extends LitElement {
   static get properties() {
     return {
 
+      /**
+       * If declared, will take the fullscreen when the bib is displayed.
+       */
+      isFullscreen: {
+        type: Boolean,
+        reflect: true
+      },
+
       /**
        * If declared, will apply all styles for the common theme.
        */
@@ -90,6 +102,21 @@ export class AuroDropdownBib extends LitElement {
     return this._mobileBreakpointValue;
   }
 
+  updated(changedProperties) {
+    if (changedProperties.has('isFullscreen')) {
+      this.childNodes.forEach((child) => {
+        // skip any text that is not in an HTMLElement on setting `isFullscreen` attr.
+        if (child.nodeName !== '#text') {
+          if (this.isFullscreen) {
+            child.setAttribute('isFullscreen', 'true');
+          } else {
+            child.removeAttribute('isFullscreen');
+          }
+        }
+      });
+    }
+  }
+
   // function that renders the HTML and CSS into  the scope of the component
   render() {
     return html`
@@ -99,8 +126,3 @@ export class AuroDropdownBib extends LitElement {
     `;
   }
 }
-
-// default internal definition
-if (!customElements.get("auro-dropdownbib")) {
-  customElements.define("auro-dropdownbib", AuroDropdownBib);
-}

package/components/dropdown/src/dropdownVersion.js

@@ -0,0 +1 @@
+export default '3.0.0';

package/components/dropdown/src/styles/bibStyles-css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export default css`: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][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}`;
+export default css`: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;overscroll-behavior:contain}: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][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}`;

package/components/dropdown/src/styles/bibStyles.css

@@ -25,6 +25,7 @@
   border-radius: unset;
   margin-top: 0;
   box-shadow: unset;
+  overscroll-behavior: contain;
 }
 
 :host([data-show]) {

package/components/dropdown/src/styles/bibStyles.scss

@@ -37,6 +37,7 @@
     border-radius: unset;
     margin-top: 0;
     box-shadow: unset;
+    overscroll-behavior: contain;
  }
 }
 

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

@@ -69,13 +69,13 @@ Run in verbose mode to see all warnings.
 
 
 ./src/index.js → dist...
-created dist in 149ms
+created dist in 156ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 75ms
+created ./demo/ in 78ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 67ms
+created ./demo/ in 71ms
 
 > @aurodesignsystem/auro-form@1.0.0 build:docs
 > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component form

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

@@ -4,10 +4,10 @@
 
 
 ./src/index.js → dist...
-created dist in 299ms
+created dist in 373ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 190ms
+created ./demo/ in 262ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 222ms
+created ./demo/ in 201ms

package/components/form/README.md

@@ -98,7 +98,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
 <!-- The below content is automatically added from ../../docs/templates/componentBundleUseModBrowsers.md -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.13.0/dist/tokens/CSSCustomProperties.css" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.1.2/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-form@2.0.0-beta.40/dist/auro-form__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-form@2.0.0-beta.41/dist/auro-form__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-form use cases

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

@@ -42,7 +42,7 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 
 ./src/index.js → dist...
-created dist in 203ms
+created dist in 249ms
 
 > @aurodesignsystem/auro-helptext@1.0.0 types
 > tsc --project tsconfig.json

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

@@ -4,4 +4,4 @@
 
 
 ./src/index.js → dist...
-created dist in 311ms
+created dist in 378ms

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

@@ -209,10 +209,10 @@ More info and automated migrator: https://sass-lang.com/d/import
 created dist in 1.5s
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 675ms
+created ./demo/ in 867ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 1.1s
+created ./demo/ in 734ms
 
 > @aurodesignsystem/auro-input@4.2.0 build:docs
 > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component input

package/components/input/README.md

@@ -89,7 +89,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
 <!-- The below content is automatically added from ../../docs/templates/componentBundleUseModBrowsers.md -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.13.0/dist/tokens/CSSCustomProperties.css" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.1.2/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-input@2.0.0-beta.40/dist/auro-input__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-input@2.0.0-beta.41/dist/auro-input__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-input use cases

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

@@ -101,13 +101,13 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 
 ./src/index.js → dist...
-created dist in 574ms
+created dist in 480ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 416ms
+created ./demo/ in 491ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 429ms
+created ./demo/ in 361ms
 
 > @aurodesignsystem/auro-menu@4.1.4 build:docs
 > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component menu

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

@@ -4,10 +4,10 @@
 
 
 ./src/index.js → dist...
-created dist in 451ms
+created dist in 490ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 284ms
+created ./demo/ in 370ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 240ms
+created ./demo/ in 329ms

package/components/menu/README.md

@@ -100,7 +100,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
 <!-- The below content is automatically added from ../../docs/templates/componentBundleUseModBrowsers.md -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.13.0/dist/tokens/CSSCustomProperties.css" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.1.2/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-menu@2.0.0-beta.40/dist/auro-menu__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-menu@2.0.0-beta.41/dist/auro-menu__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-menu use cases

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

@@ -138,13 +138,13 @@ Run in verbose mode to see all warnings.
 
 
 ./src/index.js → dist...
-created dist in 637ms
+created dist in 786ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 469ms
+created ./demo/ in 604ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 383ms
+created ./demo/ in 669ms
 
 > @aurodesignsystem/auro-radio@4.1.1 build:docs
 > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component radio

package/components/radio/README.md

@@ -90,7 +90,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
 <!-- The below content is automatically added from ../../docs/templates/componentBundleUseModBrowsers.md -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.13.0/dist/tokens/CSSCustomProperties.css" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.1.2/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-radio@2.0.0-beta.40/dist/auro-radio__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-radio@2.0.0-beta.41/dist/auro-radio__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-radio use cases

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

@@ -140,10 +140,10 @@ More info and automated migrator: https://sass-lang.com/d/import
 created dist in 1s
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 951ms
+created ./demo/ in 1s
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 794ms
+created ./demo/ in 803ms
 
 > @aurodesignsystem/auro-select@3.3.0 build:docs
 > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component select

package/components/select/README.md

@@ -99,9 +99,9 @@ In cases where the project is not able to process JS assets, there are pre-proce
 <!-- The below content is automatically added from ../../docs/templates/componentBundleUseModBrowsers.md -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.13.0/dist/tokens/CSSCustomProperties.css" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.1.2/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-dropdown@2.0.0-beta.40/dist/auro-dropdown__bundled.js" type="module"></script>
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-menu@2.0.0-beta.40/dist/auro-menu__bundled.js" type="module"></script>
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-select@2.0.0-beta.40/dist/auro-select__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-dropdown@2.0.0-beta.41/dist/auro-dropdown__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-menu@2.0.0-beta.41/dist/auro-menu__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-select@2.0.0-beta.41/dist/auro-select__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-select use cases