@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.14 → 0.0.0-pr624.16

package/components/menu/dist/registered.js

@@ -3,11 +3,106 @@ import { unsafeStatic, literal, html as html$1 } from 'lit/static-html.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
-var styleCss$2 = css`:focus:not(:focus-visible){outline:3px solid transparent}:host{display:inline-block;width:100%;margin:0;padding:0;vertical-align:middle}:host ::slotted(auro-menuoption),:host ::slotted([auro-menuoption]),:host auro-menuoption[loadingplaceholder]{padding-left:calc(var(--ds-size-150, 0.75rem) + 24px + var(--ds-size-100, 0.5rem))}:host ::slotted([selected]){padding-left:0}:host ::slotted(hr){box-sizing:content-box !important;height:0 !important;overflow:visible !important;margin:var(--ds-size-100, 0.5rem) 0 !important;border-width:0 !important;border-top-width:1px !important;border-top-style:solid !important}:host([nocheckmark]) ::slotted(auro-menuoption),:host([nocheckmark]) auro-menuoption[loadingplaceholder]{padding-left:var(--ds-size-200, 1rem)}:host([root]){overflow-y:auto}[loadingplaceholder].empty{opacity:0;position:absolute}[loadingplaceholder] slot[name=loadingIcon]{vertical-align:middle;line-height:1;display:inline-block}[loadingplaceholder] slot[name=loadingIcon]::slotted(*){margin-right:var(--ds-size-150, 0.75rem)}`;
+var styleCss$2 = css`:focus:not(:focus-visible){outline:3px solid transparent}:host{display:block;vertical-align:middle}:host .wrapper{box-sizing:border-box;display:inline-block;width:100%;margin:0;padding:0}:host ::slotted(hr){box-sizing:content-box !important;height:0 !important;overflow:visible !important;margin:var(--ds-size-100, 0.5rem) 0 !important;border-width:0 !important;border-top-width:1px !important;border-top-style:solid !important}:host [loadingplaceholder].empty{opacity:0;position:absolute}:host [loadingplaceholder] slot[name=loadingIcon]{vertical-align:middle;line-height:1;display:inline-block}:host [loadingplaceholder] slot[name=loadingIcon]::slotted(*){margin-right:var(--ds-size-150, 0.75rem)}:host([root]){overflow-y:auto}:host([root]) .wrapper[class*=-lg]{padding:var(--ds-size-150, 0.75rem)}:host([root]) .wrapper[class*=-xl]{padding:var(--ds-size-200, 1rem)}`;
 
 var colorCss$2 = css`:host ::slotted(hr){border-top-color:var(--ds-auro-menu-divider-color)}[loadingplaceholder] slot[name=loadingIcon]{color:var(--ds-auro-menu-loader-color)}[loadingplaceholder] slot[name=loadingText]{color:var(--ds-auro-menu-loader-text-color)}`;
 
-var tokensCss$1 = css`:host{--ds-auro-menu-divider-color: var(--ds-basic-color-border-divider, rgba(0, 0, 0, 0.15));--ds-auro-menu-loader-color: var(--ds-basic-color-brand-primary, #01426a);--ds-auro-menu-loader-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-menuoption-container-color: transparent;--ds-auro-menuoption-icon-color: transparent;--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}`;
+var tokensCss$1 = css`:host{--ds-auro-menu-divider-color: var(--ds-basic-color-border-divider, rgba(0, 0, 0, 0.15));--ds-auro-menu-loader-color: var(--ds-basic-color-brand-primary, #01426a);--ds-auro-menu-loader-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-menuoption-container-color: transparent;--ds-auro-menuoption-container-border-color: var(--ds-auro-menuoption-container-color);--ds-auro-menuoption-icon-color: transparent;--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}`;
+
+let AuroElement$1 = class AuroElement extends LitElement {
+  static get properties() {
+    return {
+
+      /**
+       * Defines the language of an element.
+       * @default {'default'}
+       */
+      layout: {
+        type: String,
+        attribute: "layout",
+        reflect: true
+      },
+
+      shape: {
+        type: String,
+        attribute: "shape",
+        reflect: true
+      },
+
+      size: {
+        type: String,
+        attribute: "size",
+        reflect: true
+      },
+
+      onDark: {
+        type: Boolean,
+        attribute: "ondark",
+        reflect: true
+      }
+    };
+  }
+
+  resetShapeClasses() {
+    const wrapper = this.shadowRoot.querySelector('.wrapper');
+
+    if (wrapper) {
+      wrapper.classList.forEach((className) => {
+        if (className.startsWith('shape-')) {
+          wrapper.classList.remove(className);
+        }
+      });
+
+    }
+
+    if (this.shape && this.size) {
+      wrapper.classList.add(`shape-${this.shape.toLowerCase()}-${this.size.toLowerCase()}`);
+    } else {
+      wrapper.classList.add('shape-none');
+    }
+  }
+
+  resetLayoutClasses() {
+    if (this.layout) {
+      const wrapper = this.shadowRoot.querySelector('.wrapper');
+
+      if (wrapper) {
+        wrapper.classList.forEach((className) => {
+          if (className.startsWith('layout-')) {
+            wrapper.classList.remove(className);
+          }
+        });
+
+        wrapper.classList.add(`layout-${this.layout.toLowerCase()}`);
+      }
+    }
+  }
+
+  updateComponentArchitecture() {
+    this.resetLayoutClasses();
+    this.resetShapeClasses();
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has('layout') || changedProperties.has('shape') || changedProperties.has('size')) {
+      this.updateComponentArchitecture();
+    }
+  }
+
+  // Try to render the defined `this.layout` layout. If that fails, fall back to the default layout.
+  // This will catch if an invalid layout value is passed in and render the default layout if so.
+  render() {
+    try {
+      return this.renderLayout();
+    } catch (error) {
+      // failed to get the defined layout
+      console.error('Failed to get the defined layout - using the default layout', error); // eslint-disable-line no-console
+
+      // fallback to the default layout
+      return this.getLayout('default');
+    }
+  }
+};
 
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -143,14 +238,17 @@ function dispatchMenuEvent(element, eventName, detail = null) {
  * @slot - Slot for insertion of menu options.
  */
 
-/* eslint-disable no-magic-numbers, max-lines, no-extra-parens */
+/* eslint-disable no-magic-numbers, max-lines, no-extra-parens, no-inline-comments, line-comment-position */
 
-class AuroMenu extends LitElement {
+class AuroMenu extends AuroElement$1 {
   constructor() {
     super();
 
     // State properties (reactive)
 
+    this.shape = ""; // box, rounded, pill
+    this.size = ""; // md, lg, xl
+
     // Value of the selected options
     this.value = undefined;
     // Currently selected option
@@ -209,6 +307,7 @@ class AuroMenu extends LitElement {
 
   static get properties() {
     return {
+      ...super.properties,
       noCheckmark: {
         type: Boolean,
         reflect: true,
@@ -242,6 +341,16 @@ class AuroMenu extends LitElement {
       value: {
         // Allow string, string[] arrays and undefined
         type: Object
+      },
+
+      /**
+       * Indent level for submenus.
+       * @private
+       */
+      level: {
+        type: Number,
+        reflect: false,
+        attribute: false
       }
     };
   }
@@ -294,12 +403,15 @@ class AuroMenu extends LitElement {
   }
 
   updated(changedProperties) {
+    super.updated(changedProperties);
+
     if (changedProperties.has('multiSelect')) {
       // Reset selection if multiSelect mode changes
       this.clearSelection();
     }
 
-    if (changedProperties.has('value')) {
+
+    if (changedProperties.has("value")) {
       // Handle null/undefined case
       if (this.value === undefined || this.value === null) {
         this.optionSelected = undefined;
@@ -367,6 +479,19 @@ class AuroMenu extends LitElement {
       this.querySelectorAll('auro-menu, [auro-menu], auro-menuoption, [auro-menuoption]').forEach((element) => element.setAttribute('noCheckmark', ''));
     }
 
+    // Handle layout propagation to all menus and options
+    const propagationTargets = this.querySelectorAll('auro-menu, [auro-menu], auro-menuoption, [auro-menuoption]');
+    [
+      'size',
+      'shape'
+    ].forEach((prop) => {
+      if (changedProperties.has(prop)) {
+        propagationTargets.forEach((el) => {
+          el.setAttribute(prop, this[prop]);
+        });
+      }
+    });
+
     // Regex for matchWord if needed
     let regexWord = null;
 
@@ -563,21 +688,20 @@ class AuroMenu extends LitElement {
    * @param {HTMLElement} menu - Root menu element.
    */
   handleNestedMenus(menu) {
-    const nestedMenus = menu.querySelectorAll('auro-menu, [auro-menu]');
+    menu.level = menu.parentElement.level >= 0 ? menu.parentElement.level + 1 : 0;
 
-    nestedMenus.forEach((nestedMenu) => {
-      // role="listbox" only allows "role=group" for children.
-      nestedMenu.setAttribute('role', 'group');
-      if (!nestedMenu.hasAttribute('aria-label')) {
-        nestedMenu.setAttribute('aria-label', 'submenu');
+    if (menu.level > 0) {
+      menu.setAttribute('role', 'group');
+      menu.removeAttribute("root");
+      if (!menu.hasAttribute('aria-label')) {
+        menu.setAttribute('aria-label', 'submenu');
       }
+    }
 
-      const options = nestedMenu.querySelectorAll(':scope > auro-menuoption, :scope > [auro-menuoption]');
-      options.forEach((option) => {
-        option.innerHTML = this.nestingSpacer + option.innerHTML;
-      });
-
-      this.handleNestedMenus(nestedMenu);
+    const options = menu.querySelectorAll(':scope > auro-menuoption, :scope > [auro-menuoption]');
+    options.forEach((option) => {
+      const regex = new RegExp(this.nestingSpacer, "gu");
+      option.innerHTML = this.nestingSpacer.repeat(menu.level) + option.innerHTML.replace(regex, '');
     });
   }
 
@@ -819,28 +943,39 @@ class AuroMenu extends LitElement {
   }
 
   /**
-   * Renders the component.
-   * @returns {boolean} - True if loading slots are present and non-empty.
+   * Logic to determine the layout of the component.
+   * @protected
+   * @returns {void}
    */
-  render() {
+  renderLayout() {
     if (this.loading) {
       return html`
-        <auro-menuoption disabled loadingplaceholder class="${this.hasLoadingPlaceholder ? '' : 'empty'}">
-          <div>
-            <slot name="loadingIcon"></slot>
-            <slot name="loadingText"></slot>
-          </div>
-        </auro-menuoption>
+        <div class="wrapper">
+          <auro-menuoption
+            disabled
+            loadingplaceholder
+            class="${this.hasLoadingPlaceholder ? "" : "empty"}"
+          >
+            <div>
+              <slot name="loadingIcon"></slot>
+              <slot name="loadingText"></slot>
+            </div>
+          </auro-menuoption>
+        </div>
       `;
     }
 
-    return html`<slot @slotchange=${this.handleSlotChange}></slot>`;
+    return html`
+      <div class="wrapper">
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
   }
 }
 
-var styleCss$1 = css`:host{display:flex;align-items:center;padding:var(--ds-size-50, 0.25rem) var(--ds-size-200, 1rem) var(--ds-size-50, 0.25rem) 0;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}:host slot{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-150, 0.75rem);margin-left:var(--ds-size-100, 0.5rem)}:host ::slotted(.nestingSpacer){display:inline-block;width:var(--ds-size-300, 1.5rem)}:host ::slotted(strong){font-weight:700}:host([hidden]){display:none}:host([static]){pointer-events:none}:host([disabled]:hover){cursor:auto}:host([disabled]){user-select:none;pointer-events:none}`;
+var styleCss$1 = css`:host{cursor:pointer;user-select:none}:host .wrapper{display:flex;align-items:center;padding-right:var(--ds-size-200, 1rem);padding-left:calc(var(--ds-size-150, 0.75rem) + 24px + var(--ds-size-100, 0.5rem));padding-top:var(--ds-size-50, 0.25rem);padding-bottom:var(--ds-size-50, 0.25rem);-webkit-tap-highlight-color:transparent}:host .wrapper[class*=shape-box],:host .wrapper[class*=shape-snowflake]{border-radius:unset}:host .wrapper[class*=shape-pill]{border-radius:30px}:host .wrapper[class*=-lg]{font-size:var(--ds-text-body-size-lg, 1.125rem);line-height:var(--ds-text-body-height-lg, 1.625rem);padding-top:var(--ds-size-75, 0.375rem);padding-bottom:var(--ds-size-75, 0.375rem);padding-right:var(--ds-size-150, 0.75rem);margin-bottom:var(--ds-size-50, 0.25rem)}:host .wrapper[class*=-xl]{font-size:var(--ds-text-body-size-lg, 1.125rem);line-height:var(--ds-text-body-height-lg, 1.625rem);padding-top:var(--ds-size-100, 0.5rem);padding-bottom:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-200, 1rem);margin-bottom:var(--ds-size-100, 0.5rem)}:host slot{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-150, 0.75rem);margin-left:var(--ds-size-100, 0.5rem)}:host ::slotted(.nestingSpacer){display:inline-block;width:var(--ds-size-300, 1.5rem)}:host ::slotted(strong){font-weight:700}:host([loadingplaceholder]) .wrapper{padding-left:calc(var(--ds-size-150, 0.75rem) + 24px + var(--ds-size-100, 0.5rem))}:host([selected]) .wrapper{padding-left:0}:host([nocheckmark]) .wrapper{padding-left:var(--ds-size-150, 0.75rem)}:host([nocheckmark]) .wrapper[class*=-lg]{padding-left:var(--ds-size-150, 0.75rem)}:host([nocheckmark]) .wrapper[class*=-xl]{padding-left:var(--ds-size-200, 1rem)}:host([hidden]){display:none}:host([static]){pointer-events:none}:host([disabled]:hover){cursor:auto}:host([disabled]){user-select:none;pointer-events:none}`;
 
-var colorCss$1 = css`:host{background-color:var(--ds-auro-menuoption-container-color);color:var(--ds-auro-menuoption-text-color)}:host svg{fill:var(--ds-auro-menuoption-icon-color)}:host([disabled]){--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:hover),:host(.active){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-neutral-subtle, #f7f7f7)}:host([selected]){--ds-auro-menuoption-container-color: var(--ds-advanced-color-state-selected, #01426a);--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-menuoption-icon-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([selected]):host(:hover),:host([selected]):host(.active){--ds-auro-menuoption-container-color: var(--ds-advanced-color-state-selected-hover, #00274a)}`;
+var colorCss$1 = css`:host .wrapper{border:1px solid var(--ds-auro-menuoption-container-border-color);background-color:var(--ds-auro-menuoption-container-color);color:var(--ds-auro-menuoption-text-color)}:host svg{fill:var(--ds-auro-menuoption-icon-color)}:host([disabled]){--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:hover),:host(.active){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-neutral-subtle, #f7f7f7)}:host([selected]){--ds-auro-menuoption-container-color: var(--ds-advanced-color-state-selected, #01426a);--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-menuoption-icon-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([selected]):host(:hover),:host([selected]):host(.active){--ds-auro-menuoption-container-color: var(--ds-advanced-color-state-selected-hover, #00274a)}`;
 
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -1228,8 +1363,12 @@ class AuroIcon extends BaseIcon {
   async firstUpdated() {
     await super.firstUpdated();
 
-    // Removes the SVG description for screenreader if ariaHidden is set to true
-    if (!this.hasAttribute('ariaHidden') && this.svg) {
+    /**
+     * icons provide a description for screen readers. Icon only instances Auro-button
+     * depend on this description to provide context for the user using a screen reader.
+     * Removes the SVG description for screen reader if ariaHidden is set to true.
+     */
+    if (this.hasAttribute('ariaHidden') && this.svg) {
       const svgDesc = this.svg.querySelector('desc');
 
       if (svgDesc) {
@@ -1273,7 +1412,7 @@ class AuroIcon extends BaseIcon {
   }
 }
 
-var iconVersion = '8.0.3';
+var iconVersion = '8.0.4';
 
 var checkmarkIcon = {"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"checkmark-sm__desc\" class=\"ico_squareLarge\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"checkmark-sm__desc\">a small check mark.</desc><path d=\"M8.461 11.84a.625.625 0 1 0-.922.844l2.504 2.738c.247.27.674.27.922 0l5.496-6a.625.625 0 1 0-.922-.844l-5.035 5.496z\"/></svg>"};
 
@@ -1291,10 +1430,13 @@ var checkmarkIcon = {"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlin
  * @event auroMenuOption-mouseover - Notifies that this option has been hovered over.
  * @slot - Specifies text for an option, but is not the value.
  */
-class AuroMenuOption extends LitElement {
+class AuroMenuOption extends AuroElement$1 {
   constructor() {
     super();
 
+    this.size = ""; // md, lg, xl
+    this.shape = ""; // box, rounded, pill
+
     /**
      * Generate unique names for dependency components.
      */
@@ -1318,6 +1460,7 @@ class AuroMenuOption extends LitElement {
 
   static get properties() {
     return {
+      ...super.properties,
       nocheckmark: {
         type: Boolean,
         reflect: true
@@ -1379,6 +1522,8 @@ class AuroMenuOption extends LitElement {
 
   // observer for selected property changes
   updated(changedProperties) {
+    super.updated(changedProperties);
+
     if (changedProperties.has('selected')) {
       this.setAttribute('aria-selected', this.selected.toString());
     }
@@ -1400,10 +1545,19 @@ class AuroMenuOption extends LitElement {
     return html$1`<${this.iconTag} customColor customSvg slot="icon">${svg}</${this.iconTag}>`;
   }
 
-  render() {
+  /**
+   * Logic to determine the layout of the component.
+   * @protected
+   * @returns {void}
+   */
+  renderLayout() {
     return html$1`
-      ${this.selected && !this.nocheckmark ? this.generateIconHtml(checkmarkIcon.svg) : undefined}
-      <slot></slot>
+      <div class="wrapper">
+        ${this.selected && !this.nocheckmark
+          ? this.generateIconHtml(checkmarkIcon.svg)
+          : undefined}
+        <slot></slot>
+      </div>
     `;
   }
 }

package/components/menu/dist/styles/default/tokens-css.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

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

@@ -239,8 +239,8 @@ class AuroRadio extends i$2 {
       },
 
       /**
+       * ID for input node.
        * @private
-       * id for input node
        */
       inputId: {
         type: String,
@@ -1136,7 +1136,9 @@ class AuroFormValidation {
       elem.validity = this.auroInputElements[0].validity;
       elem.errorMessage = this.auroInputElements[0].errorMessage;
 
-      if (elem.validity === 'valid' && this.auroInputElements.length > 1) {
+      // combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib. 
+      // combobox's 2nd input will have noValidate set true.
+      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.auroInputElements[1].noValidate) {
         elem.validity = this.auroInputElements[1].validity;
         elem.errorMessage = this.auroInputElements[1].errorMessage;
       }

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

@@ -214,8 +214,8 @@ class AuroRadio extends i$2 {
       },
 
       /**
+       * ID for input node.
        * @private
-       * id for input node
        */
       inputId: {
         type: String,
@@ -1111,7 +1111,9 @@ class AuroFormValidation {
       elem.validity = this.auroInputElements[0].validity;
       elem.errorMessage = this.auroInputElements[0].errorMessage;
 
-      if (elem.validity === 'valid' && this.auroInputElements.length > 1) {
+      // combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib. 
+      // combobox's 2nd input will have noValidate set true.
+      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.auroInputElements[1].noValidate) {
         elem.validity = this.auroInputElements[1].validity;
         elem.errorMessage = this.auroInputElements[1].errorMessage;
       }

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

@@ -64,8 +64,8 @@ export class AuroRadio extends LitElement {
             attribute: boolean;
         };
         /**
+         * ID for input node.
          * @private
-         * id for input node
          */
         inputId: {
             type: StringConstructor;

package/components/radio/dist/index.js

@@ -174,8 +174,8 @@ class AuroRadio extends LitElement {
       },
 
       /**
+       * ID for input node.
        * @private
-       * id for input node
        */
       inputId: {
         type: String,
@@ -1064,7 +1064,9 @@ class AuroFormValidation {
       elem.validity = this.auroInputElements[0].validity;
       elem.errorMessage = this.auroInputElements[0].errorMessage;
 
-      if (elem.validity === 'valid' && this.auroInputElements.length > 1) {
+      // combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib. 
+      // combobox's 2nd input will have noValidate set true.
+      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.auroInputElements[1].noValidate) {
         elem.validity = this.auroInputElements[1].validity;
         elem.errorMessage = this.auroInputElements[1].errorMessage;
       }

package/components/radio/dist/registered.js

@@ -174,8 +174,8 @@ class AuroRadio extends LitElement {
       },
 
       /**
+       * ID for input node.
        * @private
-       * id for input node
        */
       inputId: {
         type: String,
@@ -1064,7 +1064,9 @@ class AuroFormValidation {
       elem.validity = this.auroInputElements[0].validity;
       elem.errorMessage = this.auroInputElements[0].errorMessage;
 
-      if (elem.validity === 'valid' && this.auroInputElements.length > 1) {
+      // combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib. 
+      // combobox's 2nd input will have noValidate set true.
+      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.auroInputElements[1].noValidate) {
         elem.validity = this.auroInputElements[1].validity;
         elem.errorMessage = this.auroInputElements[1].errorMessage;
       }

package/components/select/demo/api.md

@@ -20,12 +20,11 @@ The auro-select element is a wrapper for auro-dropdown and auro-menu to create a
 | [autocomplete](#autocomplete)                  | `autocomplete`                  | `string`                          |                | If declared, sets the autocomplete attribute for the select element. |
 | [disabled](#disabled)                      | `disabled`                      | `boolean`                         |                | When attribute is present, element shows disabled state. |
 | [error](#error)                         | `error`                         | `string`                          |                | When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value. |
-| [flexMenuWidth](#flexMenuWidth)                 | `flexMenuWidth`                 | `boolean`                         |                | If set, makes dropdown width match the size of the content, rather than the width of the trigger. |
 | [forceDisplayValue](#forceDisplayValue)             | `forceDisplayValue`             | `boolean`                         | false          | If declared, the label and value will be visually hidden and the displayValue will render 100% of the time. |
 | [fullscreenBreakpoint](#fullscreenBreakpoint)          | `fullscreenBreakpoint`          | `string`                          | "sm"           | Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)<br />at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.<br /><br />When expanded, the dropdown will automatically display in fullscreen mode<br />if the screen size is equal to or smaller than the selected breakpoint. |
 | [largeFullscreenHeadline](#largeFullscreenHeadline)       | `largeFullscreenHeadline`       | `boolean`                         |                | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600. |
-| [layout](#layout)                        |                                 | `string`                          | "classic"      |                                                  |
-| [matchWidth](#matchWidth)                    | `matchWidth`                    | `boolean`                         | true           | If declared, the popover and trigger will be set to the same width. |
+| [layout](#layout)                        |                                 | `string`                          | "snowflake"    |                                                  |
+| [matchWidth](#matchWidth)                    | `matchWidth`                    | `boolean`                         | false          | If declared, the popover and trigger will be set to the same width. |
 | [multiSelect](#multiSelect)                   | `multiselect`                   | `boolean`                         |                | Sets multi-select mode, allowing multiple options to be selected at once. |
 | [name](#name)                          | `name`                          | `string`                          |                | The name for the select element.                 |
 | [noCheckmark](#noCheckmark)                   | `noCheckmark`                   | `boolean`                         |                | When true, checkmark on selected option will no longer be present. |
@@ -34,12 +33,12 @@ The auro-select element is a wrapper for auro-dropdown and auro-menu to create a
 | [offset](#offset)                        | `offset`                        | `number`                          | "0"            | Gap between the trigger element and bib.         |
 | [onDark](#onDark)                        | `onDark`                        | `boolean`                         |                | If declared, onDark styles will be applied to the trigger. |
 | [optionSelected](#optionSelected)                | `optionSelected`                | `HTMLElement\|Array<HTMLElement>` |                | Specifies the current selected menuOption. Default type is `HTMLElement`, changing to `Array<HTMLElement>` when `multiSelect` is true. |
-| [placement](#placement)                     | `placement`                     | `string`                          | "bottom-start" | Position where the bib should appear relative to the trigger.<br />Accepted values:<br />"top" \| "right" \| "bottom" \| "left" \|<br />"bottom-start" \| "top-start" \| "top-end" \|<br />"right-start" \| "right-end" \| "bottom-end" \|<br />"left-start" \| "left-end" |
+| [placement](#placement)                     | `placement`                     | `string`                          | "bottom-start" | Position where the bib should appear relative to the trigger.<br />Accepted values:<br />"top" \| "right" \| "bottom" \| "left" \|<br />"bottom-start" \| "top-start" \| "top-end" \|<br />"right-start" \| "right-end" \| "bottom-end" \|<br />"left-start" \| "left-end". |
 | [required](#required)                      | `required`                      | `boolean`                         |                | Populates the `required` attribute on the element. Used for client-side validation. |
 | [setCustomValidity](#setCustomValidity)             | `setCustomValidity`             | `string`                          |                | Sets a custom help text message to display for all validityStates. |
 | [setCustomValidityCustomError](#setCustomValidityCustomError)  | `setCustomValidityCustomError`  | `string`                          |                | Custom help text message to display when validity = `customError`. |
 | [setCustomValidityValueMissing](#setCustomValidityValueMissing) | `setCustomValidityValueMissing` | `string`                          |                | Custom help text message to display when validity = `valueMissing`. |
-| [shape](#shape)                         |                                 | `string`                          | "classic"      |                                                  |
+| [shape](#shape)                         |                                 | `string`                          | "snowflake"    |                                                  |
 | [size](#size)                          |                                 | `string`                          | "xl"           |                                                  |
 | [validity](#validity)                      | `validity`                      | `string`                          |                | Specifies the `validityState` this element is in. |
 | [value](#value)                         | `value`                         | `String\|Array<String>`           |                | Value selected for the component. Default type is `String`, changing to `Array<String>` when `multiSelect` is true. |
@@ -68,6 +67,7 @@ The auro-select element is a wrapper for auro-dropdown and auro-menu to create a
 |---------------------------|--------------------------------------------------|
 |                           | Default slot for the menu content.               |
 | `bib.fullscreen.headline` | Defines the headline to display above menu-options |
+| [displayValue](#displayValue)            | Allows custom HTML content to display the selected value when select is not focused. |
 | [helpText](#helpText)                | Defines the content of the helpText.             |
 | [label](#label)                   | Defines the content of the label.                |
 | [placeholder](#placeholder)             | Defines the content of the placeholder to be shown when there is no value |