@aurodesignsystem/auro-formkit 3.5.0-rc-627.2.1 → 4.0.0-rc-658.1

package/components/radio/dist/index.js

@@ -5,7 +5,7 @@ import { unsafeStatic, literal, html as html$1 } from 'lit/static-html.js';
 
 !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t():"function"==typeof define&&define.amd?define(t):t();}(0,function(){function e(e){var t=true,n=false,o=null,d={text:true,search:true,url:true,tel:true,email:true,password:true,number:true,date:true,month:true,week:true,time:true,datetime:true,"datetime-local":true};function i(e){return !!(e&&e!==document&&"HTML"!==e.nodeName&&"BODY"!==e.nodeName&&"classList"in e&&"contains"in e.classList)}function s(e){e.classList.contains("focus-visible")||(e.classList.add("focus-visible"),e.setAttribute("data-focus-visible-added",""));}function u(e){t=false;}function a(){document.addEventListener("mousemove",c),document.addEventListener("mousedown",c),document.addEventListener("mouseup",c),document.addEventListener("pointermove",c),document.addEventListener("pointerdown",c),document.addEventListener("pointerup",c),document.addEventListener("touchmove",c),document.addEventListener("touchstart",c),document.addEventListener("touchend",c);}function c(e){e.target.nodeName&&"html"===e.target.nodeName.toLowerCase()||(t=false,document.removeEventListener("mousemove",c),document.removeEventListener("mousedown",c),document.removeEventListener("mouseup",c),document.removeEventListener("pointermove",c),document.removeEventListener("pointerdown",c),document.removeEventListener("pointerup",c),document.removeEventListener("touchmove",c),document.removeEventListener("touchstart",c),document.removeEventListener("touchend",c));}document.addEventListener("keydown",function(n){n.metaKey||n.altKey||n.ctrlKey||(i(e.activeElement)&&s(e.activeElement),t=true);},true),document.addEventListener("mousedown",u,true),document.addEventListener("pointerdown",u,true),document.addEventListener("touchstart",u,true),document.addEventListener("visibilitychange",function(e){"hidden"===document.visibilityState&&(n&&(t=true),a());},true),a(),e.addEventListener("focus",function(e){var n,o,u;i(e.target)&&(t||(n=e.target,o=n.type,"INPUT"===(u=n.tagName)&&d[o]&&!n.readOnly||"TEXTAREA"===u&&!n.readOnly||n.isContentEditable))&&s(e.target);},true),e.addEventListener("blur",function(e){var t;i(e.target)&&(e.target.classList.contains("focus-visible")||e.target.hasAttribute("data-focus-visible-added"))&&(n=true,window.clearTimeout(o),o=window.setTimeout(function(){n=false;},100),(t=e.target).hasAttribute("data-focus-visible-added")&&(t.classList.remove("focus-visible"),t.removeAttribute("data-focus-visible-added")));},true),e.nodeType===Node.DOCUMENT_FRAGMENT_NODE&&e.host?e.host.setAttribute("data-js-focus-visible",""):e.nodeType===Node.DOCUMENT_NODE&&(document.documentElement.classList.add("js-focus-visible"),document.documentElement.setAttribute("data-js-focus-visible",""));}if("undefined"!=typeof window&&"undefined"!=typeof document){var t;window.applyFocusVisiblePolyfill=e;try{t=new CustomEvent("focus-visible-polyfill-ready");}catch(e){(t=document.createEvent("CustomEvent")).initCustomEvent("focus-visible-polyfill-ready",false,false,{});}window.dispatchEvent(t);}"undefined"!=typeof document&&e(document);});
 
-var styleCss$2 = css`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;outline:unset}:host(.focus-visible) .displayFlex .inputGroup:focus-within{width:auto}:host(.focus-visible) .rdoGroup{display:block;padding-right:var(--ds-size-100, 0.5rem);outline:3px solid transparent}:host(.focus-visible) .rdoGroup .label:after{outline-width:1px;outline-style:solid}.rdoGroup{position:relative;padding-right:var(--ds-size-100, 0.5rem);padding-left:var(--ds-size-100, 0.5rem);line-height:var(--ds-size-400, 2rem)}.label{display:block;margin-left:var(--ds-size-300, 1.5rem)}.label:hover{cursor:pointer}.label:after{position:absolute;z-index:1;top:50%;left:var(--ds-size-50, 0.25rem);width:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));transform:translateY(-50%);content:"";border-radius:50%;border:1px solid}.slotContent{display:block;margin-left:var(--ds-size-400, 2rem);padding-left:var(--ds-size-100, 0.5rem)}`;
+var styleCss$2 = css`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;outline:unset}:host(.focus-visible) .displayFlex .inputGroup:focus-within{width:auto}:host(.focus-visible) .rdoGroup{display:block;padding-right:var(--ds-size-100, 0.5rem);outline:3px solid transparent}:host(.focus-visible) .rdoGroup .label:after{outline-width:1px;outline-style:solid}.rdoGroup{position:relative;padding-right:var(--ds-size-100, 0.5rem);padding-left:var(--ds-size-100, 0.5rem);line-height:var(--ds-size-400, 2rem)}.label{display:block;margin-left:var(--ds-size-300, 1.5rem)}.label:hover{cursor:pointer}.label:after{position:absolute;z-index:1;top:var(--ds-size-200, 1rem);left:var(--ds-size-50, 0.25rem);width:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));transform:translateY(-50%);content:"";border-radius:50%;border:1px solid}.slotContent{display:block;margin-left:var(--ds-size-400, 2rem);padding-left:var(--ds-size-100, 0.5rem)}`;
 
 var colorCss$2 = css`.label{color:var(--ds-auro-radio-label-color)}.label:after{background-color:var(--ds-auro-radio-btn-fill-color);border-color:var(--ds-auro-radio-btn-border-color);box-shadow:inset 0 0 0 3px var(--ds-auro-radio-btn-inset-color);outline-color:var(--ds-auro-radio-btn-border-color);-webkit-tap-highlight-color:var(--ds-auro-radio-tap-color)}:host([checked]){--ds-auro-radio-btn-inset-color: var(--ds-advanced-color-boolean-indicator, #ffffff);--ds-auro-radio-btn-fill-color: var(--ds-advanced-color-boolean-istrue, #01426a);--ds-auro-radio-btn-border-color: var(--ds-advanced-color-boolean-istrue, #01426a)}:host([error]){--ds-auro-radio-btn-border-color: var(--ds-advanced-color-boolean-error, #e31f26)}:host([checked][error]){--ds-auro-radio-btn-fill-color: var(--ds-advanced-color-boolean-error, #e31f26)}:host([disabled]){--ds-auro-radio-btn-border-color: var(--ds-advanced-color-state-background-disabled, #dddddd);--ds-auro-radio-label-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([checked][disabled]){--ds-auro-radio-btn-fill-color: var(--ds-advanced-color-state-background-disabled, #dddddd)}:host(.focus-visible){--ds-auro-radio-btn-border-color: var(--ds-advanced-color-state-focused, #01426a)}:host([onDark]){--ds-auro-radio-label-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-radio-btn-border-color: var(--ds-basic-color-border-inverse, #ffffff)}:host([onDark][checked]){--ds-auro-radio-btn-inset-color: var(--ds-advanced-color-boolean-indicator-inverse, #00274a);--ds-auro-radio-btn-fill-color: var(--ds-advanced-color-boolean-istrue-inverse, #ffffff);--ds-auro-radio-btn-border-color: var(--ds-advanced-color-boolean-istrue-inverse, #ffffff)}:host([onDark][error]){--ds-auro-radio-btn-border-color: var(--ds-advanced-color-boolean-error-inverse, #f9a4a8)}:host([onDark][checked][error]){--ds-auro-radio-btn-fill-color: var(--ds-advanced-color-boolean-error-inverse, #f9a4a8)}:host([onDark][disabled]){--ds-auro-radio-btn-border-color: var(--ds-advanced-color-state-background-inverse-disabled, #7e8894);--ds-auro-radio-label-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][checked][disabled]){--ds-auro-radio-btn-fill-color: var(--ds-advanced-color-state-background-inverse-disabled, #7e8894)}:host([onDark].focus-visible){--ds-auro-radio-btn-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}`;
 
@@ -100,6 +100,10 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
  * @event auroRadio-blur - Notifies that the component has lost focus.
  * @event resetRadio - Notifies that the component has reset the checked/selected state.
  * @event auroRadio-selected - Notifies that the component has been marked as checked/selected.
+ *
+ * @csspart radio - apply css to a specific checkbox.
+ * @csspart radio-input - apply css to a specific checkbox's input.
+ * @csspart radio-label - apply css to a specific checkbox's label.
  */
 
 // build the component class
@@ -330,9 +334,10 @@ class AuroRadio extends LitElement {
     };
 
     return html`
-      <div class="ods-inputGroup rdoGroup">
+      <div class="ods-inputGroup rdoGroup" part="radio">
         <input
           class="util_displayHiddenVisually ods-inputOption rdo--input"
+          part="radio-input"
           @focus="${this.handleFocus}"
           @input="${this.handleInput}"
           @change="${this.handleChange}"
@@ -344,13 +349,16 @@ class AuroRadio extends LitElement {
           name="${ifDefined(this.name)}"
           type="radio"
           .value="${this.value}"
-          tabIndex="-1"
+          tabindex="-1"
         />
 
-        <label for="${this.inputId}" class="${classMap(labelClasses)}">
+        <label
+          for="${this.inputId}"
+          class="${classMap(labelClasses)}"
+          part="radio-label"
+        >
           <slot>${this.label}</slot>
         </label>
-
       </div>
       <slot name="content" class="slotContent"></slot>
     `;

package/components/radio/dist/registered.js

@@ -5,7 +5,7 @@ import { unsafeStatic, literal, html as html$1 } from 'lit/static-html.js';
 
 !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t():"function"==typeof define&&define.amd?define(t):t();}(0,function(){function e(e){var t=true,n=false,o=null,d={text:true,search:true,url:true,tel:true,email:true,password:true,number:true,date:true,month:true,week:true,time:true,datetime:true,"datetime-local":true};function i(e){return !!(e&&e!==document&&"HTML"!==e.nodeName&&"BODY"!==e.nodeName&&"classList"in e&&"contains"in e.classList)}function s(e){e.classList.contains("focus-visible")||(e.classList.add("focus-visible"),e.setAttribute("data-focus-visible-added",""));}function u(e){t=false;}function a(){document.addEventListener("mousemove",c),document.addEventListener("mousedown",c),document.addEventListener("mouseup",c),document.addEventListener("pointermove",c),document.addEventListener("pointerdown",c),document.addEventListener("pointerup",c),document.addEventListener("touchmove",c),document.addEventListener("touchstart",c),document.addEventListener("touchend",c);}function c(e){e.target.nodeName&&"html"===e.target.nodeName.toLowerCase()||(t=false,document.removeEventListener("mousemove",c),document.removeEventListener("mousedown",c),document.removeEventListener("mouseup",c),document.removeEventListener("pointermove",c),document.removeEventListener("pointerdown",c),document.removeEventListener("pointerup",c),document.removeEventListener("touchmove",c),document.removeEventListener("touchstart",c),document.removeEventListener("touchend",c));}document.addEventListener("keydown",function(n){n.metaKey||n.altKey||n.ctrlKey||(i(e.activeElement)&&s(e.activeElement),t=true);},true),document.addEventListener("mousedown",u,true),document.addEventListener("pointerdown",u,true),document.addEventListener("touchstart",u,true),document.addEventListener("visibilitychange",function(e){"hidden"===document.visibilityState&&(n&&(t=true),a());},true),a(),e.addEventListener("focus",function(e){var n,o,u;i(e.target)&&(t||(n=e.target,o=n.type,"INPUT"===(u=n.tagName)&&d[o]&&!n.readOnly||"TEXTAREA"===u&&!n.readOnly||n.isContentEditable))&&s(e.target);},true),e.addEventListener("blur",function(e){var t;i(e.target)&&(e.target.classList.contains("focus-visible")||e.target.hasAttribute("data-focus-visible-added"))&&(n=true,window.clearTimeout(o),o=window.setTimeout(function(){n=false;},100),(t=e.target).hasAttribute("data-focus-visible-added")&&(t.classList.remove("focus-visible"),t.removeAttribute("data-focus-visible-added")));},true),e.nodeType===Node.DOCUMENT_FRAGMENT_NODE&&e.host?e.host.setAttribute("data-js-focus-visible",""):e.nodeType===Node.DOCUMENT_NODE&&(document.documentElement.classList.add("js-focus-visible"),document.documentElement.setAttribute("data-js-focus-visible",""));}if("undefined"!=typeof window&&"undefined"!=typeof document){var t;window.applyFocusVisiblePolyfill=e;try{t=new CustomEvent("focus-visible-polyfill-ready");}catch(e){(t=document.createEvent("CustomEvent")).initCustomEvent("focus-visible-polyfill-ready",false,false,{});}window.dispatchEvent(t);}"undefined"!=typeof document&&e(document);});
 
-var styleCss$2 = css`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;outline:unset}:host(.focus-visible) .displayFlex .inputGroup:focus-within{width:auto}:host(.focus-visible) .rdoGroup{display:block;padding-right:var(--ds-size-100, 0.5rem);outline:3px solid transparent}:host(.focus-visible) .rdoGroup .label:after{outline-width:1px;outline-style:solid}.rdoGroup{position:relative;padding-right:var(--ds-size-100, 0.5rem);padding-left:var(--ds-size-100, 0.5rem);line-height:var(--ds-size-400, 2rem)}.label{display:block;margin-left:var(--ds-size-300, 1.5rem)}.label:hover{cursor:pointer}.label:after{position:absolute;z-index:1;top:50%;left:var(--ds-size-50, 0.25rem);width:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));transform:translateY(-50%);content:"";border-radius:50%;border:1px solid}.slotContent{display:block;margin-left:var(--ds-size-400, 2rem);padding-left:var(--ds-size-100, 0.5rem)}`;
+var styleCss$2 = css`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;outline:unset}:host(.focus-visible) .displayFlex .inputGroup:focus-within{width:auto}:host(.focus-visible) .rdoGroup{display:block;padding-right:var(--ds-size-100, 0.5rem);outline:3px solid transparent}:host(.focus-visible) .rdoGroup .label:after{outline-width:1px;outline-style:solid}.rdoGroup{position:relative;padding-right:var(--ds-size-100, 0.5rem);padding-left:var(--ds-size-100, 0.5rem);line-height:var(--ds-size-400, 2rem)}.label{display:block;margin-left:var(--ds-size-300, 1.5rem)}.label:hover{cursor:pointer}.label:after{position:absolute;z-index:1;top:var(--ds-size-200, 1rem);left:var(--ds-size-50, 0.25rem);width:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));transform:translateY(-50%);content:"";border-radius:50%;border:1px solid}.slotContent{display:block;margin-left:var(--ds-size-400, 2rem);padding-left:var(--ds-size-100, 0.5rem)}`;
 
 var colorCss$2 = css`.label{color:var(--ds-auro-radio-label-color)}.label:after{background-color:var(--ds-auro-radio-btn-fill-color);border-color:var(--ds-auro-radio-btn-border-color);box-shadow:inset 0 0 0 3px var(--ds-auro-radio-btn-inset-color);outline-color:var(--ds-auro-radio-btn-border-color);-webkit-tap-highlight-color:var(--ds-auro-radio-tap-color)}:host([checked]){--ds-auro-radio-btn-inset-color: var(--ds-advanced-color-boolean-indicator, #ffffff);--ds-auro-radio-btn-fill-color: var(--ds-advanced-color-boolean-istrue, #01426a);--ds-auro-radio-btn-border-color: var(--ds-advanced-color-boolean-istrue, #01426a)}:host([error]){--ds-auro-radio-btn-border-color: var(--ds-advanced-color-boolean-error, #e31f26)}:host([checked][error]){--ds-auro-radio-btn-fill-color: var(--ds-advanced-color-boolean-error, #e31f26)}:host([disabled]){--ds-auro-radio-btn-border-color: var(--ds-advanced-color-state-background-disabled, #dddddd);--ds-auro-radio-label-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([checked][disabled]){--ds-auro-radio-btn-fill-color: var(--ds-advanced-color-state-background-disabled, #dddddd)}:host(.focus-visible){--ds-auro-radio-btn-border-color: var(--ds-advanced-color-state-focused, #01426a)}:host([onDark]){--ds-auro-radio-label-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-radio-btn-border-color: var(--ds-basic-color-border-inverse, #ffffff)}:host([onDark][checked]){--ds-auro-radio-btn-inset-color: var(--ds-advanced-color-boolean-indicator-inverse, #00274a);--ds-auro-radio-btn-fill-color: var(--ds-advanced-color-boolean-istrue-inverse, #ffffff);--ds-auro-radio-btn-border-color: var(--ds-advanced-color-boolean-istrue-inverse, #ffffff)}:host([onDark][error]){--ds-auro-radio-btn-border-color: var(--ds-advanced-color-boolean-error-inverse, #f9a4a8)}:host([onDark][checked][error]){--ds-auro-radio-btn-fill-color: var(--ds-advanced-color-boolean-error-inverse, #f9a4a8)}:host([onDark][disabled]){--ds-auro-radio-btn-border-color: var(--ds-advanced-color-state-background-inverse-disabled, #7e8894);--ds-auro-radio-label-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][checked][disabled]){--ds-auro-radio-btn-fill-color: var(--ds-advanced-color-state-background-inverse-disabled, #7e8894)}:host([onDark].focus-visible){--ds-auro-radio-btn-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}`;
 
@@ -100,6 +100,10 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
  * @event auroRadio-blur - Notifies that the component has lost focus.
  * @event resetRadio - Notifies that the component has reset the checked/selected state.
  * @event auroRadio-selected - Notifies that the component has been marked as checked/selected.
+ *
+ * @csspart radio - apply css to a specific checkbox.
+ * @csspart radio-input - apply css to a specific checkbox's input.
+ * @csspart radio-label - apply css to a specific checkbox's label.
  */
 
 // build the component class
@@ -330,9 +334,10 @@ class AuroRadio extends LitElement {
     };
 
     return html`
-      <div class="ods-inputGroup rdoGroup">
+      <div class="ods-inputGroup rdoGroup" part="radio">
         <input
           class="util_displayHiddenVisually ods-inputOption rdo--input"
+          part="radio-input"
           @focus="${this.handleFocus}"
           @input="${this.handleInput}"
           @change="${this.handleChange}"
@@ -344,13 +349,16 @@ class AuroRadio extends LitElement {
           name="${ifDefined(this.name)}"
           type="radio"
           .value="${this.value}"
-          tabIndex="-1"
+          tabindex="-1"
         />
 
-        <label for="${this.inputId}" class="${classMap(labelClasses)}">
+        <label
+          for="${this.inputId}"
+          class="${classMap(labelClasses)}"
+          part="radio-label"
+        >
           <slot>${this.label}</slot>
         </label>
-
       </div>
       <slot name="content" class="slotContent"></slot>
     `;

package/components/select/README.md

@@ -15,33 +15,33 @@ The following sections are editable by making changes to the following files:
 | Use Cases              | Examples for when to use this component           | `./docs/partials/useCases.md`       |
 | Additional Information | For use to add any component specific information | `./docs/partials/readmeAddlInfo.md` |
 | Component Example Code | HTML sample code of the components use            | `./apiExamples/basic.html`          |
--->
-
+-->
+
 # Select
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
 <!-- The below content is automatically added from ./docs/partials/description.md -->
 `<auro-select>` is a combination <auro-hyperlink href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements">HTML custom element</auro-hyperlink> that consists of a pre-defined trigger element, `<auro-menu>` for the panel content. The `<auro-select>` element presents a menu of options. The options within the menu are represented by `<auro-menu>` and `<auro-menuoption>` elements. You can pre-select options for the user with the `selected` attribute as part of the `<auro-menuoption>` API.
-<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeAddlInfo.md) -->
 <!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->
 <!-- AURO-GENERATED-CONTENT This file is to be used for any additional content that should be included in the README.md which is specific to this component. -->
-<!-- AURO-GENERATED-CONTENT:END -->
-
+<!-- AURO-GENERATED-CONTENT:END -->
+
 ## Getting Started
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/componentInstall.md) -->
-<!-- The below content is automatically added from ../../docs/templates/componentInstall.md -->
-
+<!-- The below content is automatically added from ../../docs/templates/componentInstall.md -->
+
 #### NPM Installation
 
 ```shell
 $ npm i @aurodesignsystem/auro-formkit
 ```
-<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/gettingStarted.md) -->
-<!-- The below content is automatically added from ../../docs/templates/gettingStarted.md -->
-
-### Import Options
-
+<!-- The below content is automatically added from ../../docs/templates/gettingStarted.md -->
+
+### Import Options
+
 #### Automatic Registration
 
 For automatic registration, simply import the component:
@@ -49,8 +49,8 @@ For automatic registration, simply import the component:
 ```javascript
 // Registers <auro-select> automatically
 import '@aurodesignsystem/auro-formkit/auro-select';
-```
-
+```
+
 #### Custom Registration
 
 To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our static `AuroSelect.register('custom-select')` method on the component class and pass in a unique name.
@@ -61,8 +61,8 @@ import { AuroSelect } from '@aurodesignsystem/auro-formkit/auro-select/class';
 
 // Register with a custom name if desired
 AuroSelect.register('custom-select');
-```
-
+```
+
 #### TypeScript Module Resolution
 
 When using TypeScript set `moduleResolution` to `bundler`, add the following to your `tsconfig.json`:
@@ -76,12 +76,12 @@ When using TypeScript set `moduleResolution` to `bundler`, add the following to
 ```
 
 This configuration enables proper module resolution for the component's TypeScript files.
-<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:END -->
 **Reference component in HTML**
 
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
-<!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
-
+<!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
+
 ```html
 <auro-select>
   <span slot="bib.fullscreen.headline">Bib Headline</span>
@@ -94,44 +94,44 @@ This configuration enables proper module resolution for the component's TypeScri
     <auro-menuoption value="arrival">Arrival</auro-menuoption>
     <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
   </auro-menu>
-</auro-select>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-
+</auro-select>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+
 ### Design Token CSS Custom Property dependency
 
 <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/designTokens.md) -->
 The use of any Auro custom element has a dependency on the [Auro Design Tokens](https://auro.alaskaair.com/getting-started/developers/design-tokens).
 
-<!-- AURO-GENERATED-CONTENT:END -->
-
+<!-- AURO-GENERATED-CONTENT:END -->
+
 ## Install from CDN
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/bundleInstallDescription.md) -->
 <!-- The below content is automatically added from ../../docs/templates/bundleInstallDescription.md -->
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@0.0.0/auro-select/+esm"></script>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-select/+esm"></script>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+
 ## UI development browser support
 <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/browserSupport.md) -->
 For the most up to date information on [UI development browser support](https://auro.alaskaair.com/support/browsersSupport)
 
-<!-- AURO-GENERATED-CONTENT:END -->
-
+<!-- AURO-GENERATED-CONTENT:END -->
+
 ## auro-select use cases
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
 <!-- The below content is automatically added from ./docs/partials/useCases.md -->
 See description.
-<!-- AURO-GENERATED-CONTENT:END -->
-
+<!-- AURO-GENERATED-CONTENT:END -->
+
 ## Formkit development
 
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/partials/developmentDescription.md) -->
-<!-- The below content is automatically added from ../../docs/partials/developmentDescription.md -->
-
+<!-- The below content is automatically added from ../../docs/partials/developmentDescription.md -->
+
 ### Filtering
 
 Running the `dev` command will open a `localhost` development server for all components in the monorepo at once.

package/components/select/demo/api.md

@@ -14,30 +14,30 @@ The auro-select element is a wrapper for auro-dropdown and auro-menu to create a
 
 ## Properties
 
-| Property                        | Attribute                       | Type      | Default        | Description                                      |
-|---------------------------------|---------------------------------|-----------|----------------|--------------------------------------------------|
-| [autoPlacement](#autoPlacement)                 | `autoPlacement`                 | `boolean` | "false"        | If declared, bib's position will be automatically calculated where to appear. |
-| [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. |
-| [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 |
-| [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. |
-| [noFlip](#noFlip)                        | `noFlip`                        | `boolean` | "false"        | If declared, the bib will NOT flip to an alternate position<br />when there isn't enough space in the specified `placement`. |
-| [noValidate](#noValidate)                    | `noValidate`                    | `boolean` |                | If set, disables auto-validation on blur.        |
-| [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`                |           |                | Specifies the current selected menuOption.       |
-| [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`. |
-| [validity](#validity)                      | `validity`                      | `string`  |                | Specifies the `validityState` this element is in. |
-| [value](#value)                         | `value`                         |           |                | Value selected for the component.                |
+| Property                        | Attribute                       | Type                              | Default        | Description                                      |
+|---------------------------------|---------------------------------|-----------------------------------|----------------|--------------------------------------------------|
+| [autoPlacement](#autoPlacement)                 | `autoPlacement`                 | `boolean`                         | "false"        | If declared, bib's position will be automatically calculated where to appear. |
+| [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. |
+| [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. |
+| [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. |
+| [noFlip](#noFlip)                        | `noFlip`                        | `boolean`                         | "false"        | If declared, the bib will NOT flip to an alternate position<br />when there isn't enough space in the specified `placement`. |
+| [noValidate](#noValidate)                    | `noValidate`                    | `boolean`                         |                | If set, disables auto-validation on blur.        |
+| [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" |
+| [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`. |
+| [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. |
 
 ## Methods
 
@@ -161,7 +161,7 @@ To pre-set the value of auro-select on load, use the `value` property. The `sele
   <auro-button id="validValueExampleBtn">Set Value to Valid Option</auro-button>
   <auro-button id="invalidValueExampleBtn">Set Value to Invalid Option</auro-button>
   <br/><br/>
-  <auro-select id="valueExample" value='["price"]'>
+  <auro-select id="valueExample" multiselect value='["price", "duration"]'>
     <span slot="bib.fullscreen.headline">Bib Headline</span>
     <span slot="label">Name</span>
     <auro-menu>
@@ -184,7 +184,7 @@ To pre-set the value of auro-select on load, use the `value` property. The `sele
 <auro-button id="validValueExampleBtn">Set Value to Valid Option</auro-button>
 <auro-button id="invalidValueExampleBtn">Set Value to Invalid Option</auro-button>
 <br/><br/>
-<auro-select id="valueExample" value='["price"]'>
+<auro-select id="valueExample" multiselect value='["price", "duration"]'>
   <span slot="bib.fullscreen.headline">Bib Headline</span>
   <span slot="label">Name</span>
   <auro-menu>
@@ -206,11 +206,11 @@ export function valueExample() {
   const valueExample = document.querySelector('#valueExample');
 
   document.querySelector('#validValueExampleBtn').addEventListener('click', () => {
-    valueExample.value = ['arrival'];
+    valueExample.value = '["arrival", "prefer alaska"]';
   });
 
   document.querySelector('#invalidValueExampleBtn').addEventListener('click', () => {
-    valueExample.value = ['flight course'];
+    valueExample.value = '["flight course"]';
   });
 }
 ```
@@ -786,7 +786,7 @@ Use the `reset()` method to reset the `<auro-select>`'s `value` and `validity` s
   <!-- The below content is automatically added from ./../apiExamples/resetState.html -->
   <auro-button id="resetStateBtn">Reset</auro-button>
   <br/><br/>
-  <auro-select id="resetStateExample" value='["price"]'>
+  <auro-select id="resetStateExample" value="price">
     <span slot="bib.fullscreen.headline">Bib Headline</span>
     <label slot="placeholder">Placeholder Text</label>
     <span slot="label">Name</span>
@@ -809,7 +809,7 @@ Use the `reset()` method to reset the `<auro-select>`'s `value` and `validity` s
 ```html
 <auro-button id="resetStateBtn">Reset</auro-button>
 <br/><br/>
-<auro-select id="resetStateExample" value='["price"]'>
+<auro-select id="resetStateExample" value="price">
   <span slot="bib.fullscreen.headline">Bib Headline</span>
   <label slot="placeholder">Placeholder Text</label>
   <span slot="label">Name</span>
@@ -1193,7 +1193,7 @@ The component can be in a dialog.
     <auro-dialog id="select-dialog">
       <span slot="header">Select in Dialog</span>
       <div slot="content">
-        <auro-select id="valueExample" value='["price"]'>
+        <auro-select id="valueExample" value="price">
           <span slot="bib.fullscreen.headline">Bib Headline</span>
           <span slot="label">Name</span>
           <auro-menu>
@@ -1221,7 +1221,7 @@ The component can be in a dialog.
   <auro-dialog id="select-dialog">
     <span slot="header">Select in Dialog</span>
     <div slot="content">
-      <auro-select id="valueExample" value='["price"]'>
+      <auro-select id="valueExample" value="price">
         <span slot="bib.fullscreen.headline">Bib Headline</span>
         <span slot="label">Name</span>
         <auro-menu>