@aurodesignsystem-dev/auro-formkit 0.0.0-pr832.0 → 0.0.0-pr832.2

package/components/dropdown/demo/api.md

@@ -60,12 +60,13 @@
 
 ## CSS Shadow Parts
 
-| Part       | Description                                  |
-|------------|----------------------------------------------|
-| [chevron](#chevron)  | The collapsed/expanded state icon container. |
-| [helpText](#helpText) | The helpText content container.              |
-| [popover](#popover)  | The bib content container.                   |
-| [trigger](#trigger)  | The trigger content container.               |
+| Part       | Description                                      |
+|------------|--------------------------------------------------|
+| [chevron](#chevron)  | The collapsed/expanded state icon container.     |
+| [helpText](#helpText) | The helpText content container.                  |
+| [popover](#popover)  | The bib content container.                       |
+| [size](#size)     | The size of the dropdown bib. (height, width, maxHeight, maxWidth only) |
+| [trigger](#trigger)  | The trigger content container.                   |
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## API Examples

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

@@ -3533,6 +3533,7 @@ class AuroElement extends i {
  * @slot trigger - Defines the content of the trigger.
  * @csspart trigger - The trigger content container.
  * @csspart chevron - The collapsed/expanded state icon container.
+ * @csspart size - The size of the dropdown bib. (height, width, maxHeight, maxWidth only)
  * @csspart helpText - The helpText content container.
  * @event auroDropdown-triggerClick - Notifies that the trigger has been clicked.
  * @event auroDropdown-toggled - Notifies that the visibility of the dropdown bib has changed.

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

@@ -3508,6 +3508,7 @@ class AuroElement extends i {
  * @slot trigger - Defines the content of the trigger.
  * @csspart trigger - The trigger content container.
  * @csspart chevron - The collapsed/expanded state icon container.
+ * @csspart size - The size of the dropdown bib. (height, width, maxHeight, maxWidth only)
  * @csspart helpText - The helpText content container.
  * @event auroDropdown-triggerClick - Notifies that the trigger has been clicked.
  * @event auroDropdown-toggled - Notifies that the visibility of the dropdown bib has changed.

package/components/dropdown/dist/index.js

@@ -3461,6 +3461,7 @@ class AuroElement extends LitElement {
  * @slot trigger - Defines the content of the trigger.
  * @csspart trigger - The trigger content container.
  * @csspart chevron - The collapsed/expanded state icon container.
+ * @csspart size - The size of the dropdown bib. (height, width, maxHeight, maxWidth only)
  * @csspart helpText - The helpText content container.
  * @event auroDropdown-triggerClick - Notifies that the trigger has been clicked.
  * @event auroDropdown-toggled - Notifies that the visibility of the dropdown bib has changed.

package/components/dropdown/dist/registered.js

@@ -3461,6 +3461,7 @@ class AuroElement extends LitElement {
  * @slot trigger - Defines the content of the trigger.
  * @csspart trigger - The trigger content container.
  * @csspart chevron - The collapsed/expanded state icon container.
+ * @csspart size - The size of the dropdown bib. (height, width, maxHeight, maxWidth only)
  * @csspart helpText - The helpText content container.
  * @event auroDropdown-triggerClick - Notifies that the trigger has been clicked.
  * @event auroDropdown-toggled - Notifies that the visibility of the dropdown bib has changed.

package/components/input/README.md

@@ -83,6 +83,7 @@ This configuration enables proper module resolution for the component's TypeScri
 
 ```html
 <auro-input>
+  <span slot="ariaLabel.clear">Clear All</span>
   <span slot="label">Label</span>
   <span slot="helpText">Help Text</span>
 </auro-input>

package/components/input/demo/api.md

@@ -72,12 +72,15 @@ Generate unique names for dependency components.
 
 ## Slots
 
-| Name            | Description                                      |
-|-----------------|--------------------------------------------------|
-| [displayValue](#displayValue)  | Allows custom HTML content to display in place of the value when the input is not focused. |
-| [helpText](#helpText)      | Sets the help text displayed below the input.    |
-| [label](#label)         | Sets the label text for the input.               |
-| [optionalLabel](#optionalLabel) | Allows overriding the optional display text "(optional)", which appears next to the label. |
+| Name                      | Description                                      |
+|---------------------------|--------------------------------------------------|
+| `ariaLabel.clear`         | Sets aria-label on clear button for screenreader to read |
+| `ariaLabel.password.hide` | Sets aria-label on password button to toggle off showing password |
+| `ariaLabel.password.show` | Sets aria-label on password button to toggle on showing password |
+| [displayValue](#displayValue)            | Allows custom HTML content to display in place of the value when the input is not focused. |
+| [helpText](#helpText)                | Sets the help text displayed below the input.    |
+| [label](#label)                   | Sets the label text for the input.               |
+| [optionalLabel](#optionalLabel)           | Allows overriding the optional display text "(optional)", which appears next to the label. |
 
 ## CSS Shadow Parts
 
@@ -113,6 +116,7 @@ The default component supports the basic input `type="text"` structure. The `(op
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
   <!-- The below content is automatically added from ./../apiExamples/basic.html -->
   <auro-input>
+    <span slot="ariaLabel.clear">Clear All</span>
     <span slot="label">Label</span>
     <span slot="helpText">Help Text</span>
   </auro-input>
@@ -134,6 +138,7 @@ The default component supports the basic input `type="text"` structure. The `(op
 
 ```html
 <auro-input>
+  <span slot="ariaLabel.clear">Clear All</span>
   <span slot="label">Label</span>
   <span slot="helpText">Help Text</span>
 </auro-input>
@@ -893,6 +898,9 @@ Default help text will be added to the input `type="password"` if custom help te
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/password.html) -->
   <!-- The below content is automatically added from ../apiExamples/password.html -->
   <auro-input type="password" required>
+    <span slot="ariaLabel.clear">Clear All</span>
+    <span slot="ariaLabel.password.show">Show</span>
+    <span slot="ariaLabel.password.hide">Hide</span>
     <span slot="label">Password</span>
     <span slot="helpText">Please enter a secure password.</span>
   </auro-input>

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

@@ -5105,6 +5105,9 @@ let AuroElement$2 = class AuroElement extends i$2 {
  * @prop {string} id - The id global attribute defines an identifier (ID) which must be unique in the whole document.
  * @attr id
  *
+ * @slot ariaLabel.clear - Sets aria-label on clear button for screenreader to read
+ * @slot ariaLabel.password.show - Sets aria-label on password button to toggle on showing password
+ * @slot ariaLabel.password.hide - Sets aria-label on password button to toggle off showing password
  * @slot helpText - Sets the help text displayed below the input.
  * @slot label - Sets the label text for the input.
  * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
@@ -5532,8 +5535,7 @@ class BaseInput extends AuroElement$2 {
        * Populates the `value` attribute on the input. Can also be read to retrieve the current value of the input.
        */
       value: {
-        type: String,
-        reflect: true
+        type: String
       },
 
       /**
@@ -8041,7 +8043,7 @@ class AuroInput extends BaseInput {
   /**
    * Returns classmap configuration for html5 input labels in all layouts.
    * @private
-   * @returns {void}
+   * @returns {Record<string, boolean>}
    */
   get commonLabelClasses() {
     return {
@@ -8055,7 +8057,7 @@ class AuroInput extends BaseInput {
   /**
    * Returns classmap configuration for html5 inputs in all layouts.
    * @private
-   * @returns {object} - Returns classmap.
+   * @returns {Record<string, boolean>} - Returns classmap.
    */
   get commonInputClasses() {
     return {
@@ -8245,12 +8247,13 @@ class AuroInput extends BaseInput {
         <${this.buttonTag}
           @click="${this.handleClickClear}"
           ?onDark="${this.onDark}"
-          aria-label="${i18n(this.lang, 'clearInput')}"
           class="notificationBtn clearBtn"
           shape="circle"
           size="sm"
           variant="ghost">
+          <span><slot name="ariaLabel.clear">Clear Input</slot></span>
           <${this.iconTag}
+            aria-hidden="true"
             ?customColor="${this.onDark}"
             category="interface"
             name="x-lg"
@@ -8273,18 +8276,23 @@ class AuroInput extends BaseInput {
           @click="${this.handleClickShowPassword}"
           ?onDark="${this.onDark}"
           class="notificationBtn passwordBtn"
-          aria-label="${this.showPassword ? i18n(this.lang, "hidePassword") : i18n(this.lang, "showPassword")}"
           shape="circle"
           size="sm"
           variant="ghost">
+            <span>
+            ${this.showPassword ? u$2`<slot name="ariaLabel.password.hide">Hide Password</slot>`
+              : u$2`<slot name="ariaLabel.password.show">Show Password</slot>`}
+            </span>
           <${this.iconTag}
             ?customColor="${this.onDark}"
+            aria-hidden="true"
             ?hidden=${!this.showPassword}
             category="interface"
             name="hide-password-stroke">
           </${this.iconTag}>
           <${this.iconTag}
             ?customColor="${this.onDark}"
+            aria-hidden="true"
             ?hidden=${this.showPassword}
             category="interface"
             name="view-password-stroke">

package/components/input/demo/index.md

@@ -24,6 +24,7 @@ The `<auro-input>` element should be used in situations where users may:
     <label slot="label">From</label>
   </auro-input> -->
   <auro-input id="alpha" value="lax" layout="emphasized" shape="box" size="xl" placeholder="Departure" style="width: 249px;" ondark required>
+    <span slot="ariaLabel.clear">Clear All</span>
     <label slot="label">From</label>
     <span slot="helpText">Example help text</span>
     <span slot="displayValue">
@@ -34,14 +35,17 @@ The `<auro-input>` element should be used in situations where users may:
     </span>
   </auro-input>
   <auro-input id="beta" layout="emphasized" shape="pill" size="xl" placeholder="Departure" style="width: 249px;" ondark required>
+    <span slot="ariaLabel.clear">Clear All</span>
     <label slot="label">From</label>
     <span slot="helpText">Example help text</span>
   </auro-input>
   <auro-input id="charlie" layout="emphasized-left" shape="pill-left" size="xl" placeholder="Departure" style="width: 249px;" ondark required>
+    <span slot="ariaLabel.clear">Clear All</span>
     <label slot="label">From</label>
     <span slot="helpText">Example help text</span>
   </auro-input>
   <auro-input id="delta" layout="emphasized-right" shape="pill-right" size="xl" placeholder="Departure" style="width: 249px;" ondark required>
+    <span slot="ariaLabel.clear">Clear All</span>
     <label slot="label">From</label>
     <span slot="helpText">Example help text</span>
   </auro-input>
@@ -54,6 +58,7 @@ The `<auro-input>` element should be used in situations where users may:
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/snowflake/basic.html) -->
   <!-- The below content is automatically added from ./../apiExamples/snowflake/basic.html -->
   <auro-input id="snowflakePill" layout="snowflake" shape="snowflake" size="lg" placeholder="Departure" style="width: 249px;" ondark required>
+    <span slot="ariaLabel.clear">Clear All</span>
     <label slot="label">From</label>
     <span slot="helpText">Example help text</span>
   </auro-input>
@@ -68,6 +73,7 @@ The default component supports the basic input `type="text"` structure. The `(op
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
   <!-- The below content is automatically added from ./../apiExamples/basic.html -->
   <auro-input>
+    <span slot="ariaLabel.clear">Clear All</span>
     <span slot="label">Label</span>
     <span slot="helpText">Help Text</span>
   </auro-input>
@@ -89,6 +95,7 @@ The default component supports the basic input `type="text"` structure. The `(op
 
 ```html
 <auro-input>
+  <span slot="ariaLabel.clear">Clear All</span>
   <span slot="label">Label</span>
   <span slot="helpText">Help Text</span>
 </auro-input>

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

@@ -5030,6 +5030,9 @@ let AuroElement$2 = class AuroElement extends i$2 {
  * @prop {string} id - The id global attribute defines an identifier (ID) which must be unique in the whole document.
  * @attr id
  *
+ * @slot ariaLabel.clear - Sets aria-label on clear button for screenreader to read
+ * @slot ariaLabel.password.show - Sets aria-label on password button to toggle on showing password
+ * @slot ariaLabel.password.hide - Sets aria-label on password button to toggle off showing password
  * @slot helpText - Sets the help text displayed below the input.
  * @slot label - Sets the label text for the input.
  * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
@@ -5457,8 +5460,7 @@ class BaseInput extends AuroElement$2 {
        * Populates the `value` attribute on the input. Can also be read to retrieve the current value of the input.
        */
       value: {
-        type: String,
-        reflect: true
+        type: String
       },
 
       /**
@@ -7966,7 +7968,7 @@ class AuroInput extends BaseInput {
   /**
    * Returns classmap configuration for html5 input labels in all layouts.
    * @private
-   * @returns {void}
+   * @returns {Record<string, boolean>}
    */
   get commonLabelClasses() {
     return {
@@ -7980,7 +7982,7 @@ class AuroInput extends BaseInput {
   /**
    * Returns classmap configuration for html5 inputs in all layouts.
    * @private
-   * @returns {object} - Returns classmap.
+   * @returns {Record<string, boolean>} - Returns classmap.
    */
   get commonInputClasses() {
     return {
@@ -8170,12 +8172,13 @@ class AuroInput extends BaseInput {
         <${this.buttonTag}
           @click="${this.handleClickClear}"
           ?onDark="${this.onDark}"
-          aria-label="${i18n(this.lang, 'clearInput')}"
           class="notificationBtn clearBtn"
           shape="circle"
           size="sm"
           variant="ghost">
+          <span><slot name="ariaLabel.clear">Clear Input</slot></span>
           <${this.iconTag}
+            aria-hidden="true"
             ?customColor="${this.onDark}"
             category="interface"
             name="x-lg"
@@ -8198,18 +8201,23 @@ class AuroInput extends BaseInput {
           @click="${this.handleClickShowPassword}"
           ?onDark="${this.onDark}"
           class="notificationBtn passwordBtn"
-          aria-label="${this.showPassword ? i18n(this.lang, "hidePassword") : i18n(this.lang, "showPassword")}"
           shape="circle"
           size="sm"
           variant="ghost">
+            <span>
+            ${this.showPassword ? u$2`<slot name="ariaLabel.password.hide">Hide Password</slot>`
+              : u$2`<slot name="ariaLabel.password.show">Show Password</slot>`}
+            </span>
           <${this.iconTag}
             ?customColor="${this.onDark}"
+            aria-hidden="true"
             ?hidden=${!this.showPassword}
             category="interface"
             name="hide-password-stroke">
           </${this.iconTag}>
           <${this.iconTag}
             ?customColor="${this.onDark}"
+            aria-hidden="true"
             ?hidden=${this.showPassword}
             category="interface"
             name="view-password-stroke">

package/components/input/demo/readme.md

@@ -83,6 +83,7 @@ This configuration enables proper module resolution for the component's TypeScri
 
 ```html
 <auro-input>
+  <span slot="ariaLabel.clear">Clear All</span>
   <span slot="label">Label</span>
   <span slot="helpText">Help Text</span>
 </auro-input>

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

@@ -52,13 +52,13 @@ export class AuroInput extends BaseInput {
     /**
      * Returns classmap configuration for html5 input labels in all layouts.
      * @private
-     * @returns {void}
+     * @returns {Record<string, boolean>}
      */
     private get commonLabelClasses();
     /**
      * Returns classmap configuration for html5 inputs in all layouts.
      * @private
-     * @returns {object} - Returns classmap.
+     * @returns {Record<string, boolean>} - Returns classmap.
      */
     private get commonInputClasses();
     /**

package/components/input/dist/base-input.d.ts

@@ -4,6 +4,9 @@
  * @prop {string} id - The id global attribute defines an identifier (ID) which must be unique in the whole document.
  * @attr id
  *
+ * @slot ariaLabel.clear - Sets aria-label on clear button for screenreader to read
+ * @slot ariaLabel.password.show - Sets aria-label on password button to toggle on showing password
+ * @slot ariaLabel.password.hide - Sets aria-label on password button to toggle off showing password
  * @slot helpText - Sets the help text displayed below the input.
  * @slot label - Sets the label text for the input.
  * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
@@ -292,7 +295,6 @@ export default class BaseInput extends AuroElement {
          */
         value: {
             type: StringConstructor;
-            reflect: boolean;
         };
         /**
          * Sets validation mode to re-eval with each input.

package/components/input/dist/index.js

@@ -4954,6 +4954,9 @@ let AuroElement$2 = class AuroElement extends LitElement {
  * @prop {string} id - The id global attribute defines an identifier (ID) which must be unique in the whole document.
  * @attr id
  *
+ * @slot ariaLabel.clear - Sets aria-label on clear button for screenreader to read
+ * @slot ariaLabel.password.show - Sets aria-label on password button to toggle on showing password
+ * @slot ariaLabel.password.hide - Sets aria-label on password button to toggle off showing password
  * @slot helpText - Sets the help text displayed below the input.
  * @slot label - Sets the label text for the input.
  * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
@@ -5381,8 +5384,7 @@ class BaseInput extends AuroElement$2 {
        * Populates the `value` attribute on the input. Can also be read to retrieve the current value of the input.
        */
       value: {
-        type: String,
-        reflect: true
+        type: String
       },
 
       /**
@@ -7890,7 +7892,7 @@ class AuroInput extends BaseInput {
   /**
    * Returns classmap configuration for html5 input labels in all layouts.
    * @private
-   * @returns {void}
+   * @returns {Record<string, boolean>}
    */
   get commonLabelClasses() {
     return {
@@ -7904,7 +7906,7 @@ class AuroInput extends BaseInput {
   /**
    * Returns classmap configuration for html5 inputs in all layouts.
    * @private
-   * @returns {object} - Returns classmap.
+   * @returns {Record<string, boolean>} - Returns classmap.
    */
   get commonInputClasses() {
     return {
@@ -8094,12 +8096,13 @@ class AuroInput extends BaseInput {
         <${this.buttonTag}
           @click="${this.handleClickClear}"
           ?onDark="${this.onDark}"
-          aria-label="${i18n(this.lang, 'clearInput')}"
           class="notificationBtn clearBtn"
           shape="circle"
           size="sm"
           variant="ghost">
+          <span><slot name="ariaLabel.clear">Clear Input</slot></span>
           <${this.iconTag}
+            aria-hidden="true"
             ?customColor="${this.onDark}"
             category="interface"
             name="x-lg"
@@ -8122,18 +8125,23 @@ class AuroInput extends BaseInput {
           @click="${this.handleClickShowPassword}"
           ?onDark="${this.onDark}"
           class="notificationBtn passwordBtn"
-          aria-label="${this.showPassword ? i18n(this.lang, "hidePassword") : i18n(this.lang, "showPassword")}"
           shape="circle"
           size="sm"
           variant="ghost">
+            <span>
+            ${this.showPassword ? html$1`<slot name="ariaLabel.password.hide">Hide Password</slot>`
+              : html$1`<slot name="ariaLabel.password.show">Show Password</slot>`}
+            </span>
           <${this.iconTag}
             ?customColor="${this.onDark}"
+            aria-hidden="true"
             ?hidden=${!this.showPassword}
             category="interface"
             name="hide-password-stroke">
           </${this.iconTag}>
           <${this.iconTag}
             ?customColor="${this.onDark}"
+            aria-hidden="true"
             ?hidden=${this.showPassword}
             category="interface"
             name="view-password-stroke">

package/components/input/dist/registered.js

@@ -4954,6 +4954,9 @@ let AuroElement$2 = class AuroElement extends LitElement {
  * @prop {string} id - The id global attribute defines an identifier (ID) which must be unique in the whole document.
  * @attr id
  *
+ * @slot ariaLabel.clear - Sets aria-label on clear button for screenreader to read
+ * @slot ariaLabel.password.show - Sets aria-label on password button to toggle on showing password
+ * @slot ariaLabel.password.hide - Sets aria-label on password button to toggle off showing password
  * @slot helpText - Sets the help text displayed below the input.
  * @slot label - Sets the label text for the input.
  * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
@@ -5381,8 +5384,7 @@ class BaseInput extends AuroElement$2 {
        * Populates the `value` attribute on the input. Can also be read to retrieve the current value of the input.
        */
       value: {
-        type: String,
-        reflect: true
+        type: String
       },
 
       /**
@@ -7890,7 +7892,7 @@ class AuroInput extends BaseInput {
   /**
    * Returns classmap configuration for html5 input labels in all layouts.
    * @private
-   * @returns {void}
+   * @returns {Record<string, boolean>}
    */
   get commonLabelClasses() {
     return {
@@ -7904,7 +7906,7 @@ class AuroInput extends BaseInput {
   /**
    * Returns classmap configuration for html5 inputs in all layouts.
    * @private
-   * @returns {object} - Returns classmap.
+   * @returns {Record<string, boolean>} - Returns classmap.
    */
   get commonInputClasses() {
     return {
@@ -8094,12 +8096,13 @@ class AuroInput extends BaseInput {
         <${this.buttonTag}
           @click="${this.handleClickClear}"
           ?onDark="${this.onDark}"
-          aria-label="${i18n(this.lang, 'clearInput')}"
           class="notificationBtn clearBtn"
           shape="circle"
           size="sm"
           variant="ghost">
+          <span><slot name="ariaLabel.clear">Clear Input</slot></span>
           <${this.iconTag}
+            aria-hidden="true"
             ?customColor="${this.onDark}"
             category="interface"
             name="x-lg"
@@ -8122,18 +8125,23 @@ class AuroInput extends BaseInput {
           @click="${this.handleClickShowPassword}"
           ?onDark="${this.onDark}"
           class="notificationBtn passwordBtn"
-          aria-label="${this.showPassword ? i18n(this.lang, "hidePassword") : i18n(this.lang, "showPassword")}"
           shape="circle"
           size="sm"
           variant="ghost">
+            <span>
+            ${this.showPassword ? html$1`<slot name="ariaLabel.password.hide">Hide Password</slot>`
+              : html$1`<slot name="ariaLabel.password.show">Show Password</slot>`}
+            </span>
           <${this.iconTag}
             ?customColor="${this.onDark}"
+            aria-hidden="true"
             ?hidden=${!this.showPassword}
             category="interface"
             name="hide-password-stroke">
           </${this.iconTag}>
           <${this.iconTag}
             ?customColor="${this.onDark}"
+            aria-hidden="true"
             ?hidden=${this.showPassword}
             category="interface"
             name="view-password-stroke">