@aurodesignsystem/auro-formkit 5.9.4 → 5.11.0

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

@@ -1,3 +1,25 @@
+/**
+ * The `auro-input` element provides users a way to enter data into a text field.
+ * @customElement auro-input
+ *
+ * @slot ariaLabel.clear - Sets aria-label on clear button for screen reader 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 optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
+ * @slot displayValue - Allows custom HTML content to display in place of the value when the input is not focused.
+ * @csspart wrapper - Use for customizing the style of the root element
+ * @csspart label - Use for customizing the style of the label element
+ * @csspart helpText - Use for customizing the style of the helpText element
+ * @csspart input - Use for customizing the style of the input element
+ * @csspart accentIcon - Use for customizing the style of the accentIcon element (e.g. credit card icon, calendar icon)
+ * @csspart iconContainer - Use for customizing the style of the iconContainer (e.g. X icon for clearing input value)
+ * @csspart accent-left - Use for customizing the style of the left accent element (e.g. padding, margin)
+ * @csspart accent-right - Use for customizing the style of the right accent element (e.g. padding, margin)
+ * @csspart displayValue - Use for customizing the style of the displayValue element
+ * @csspart inputHelpText - Use for customizing the style of the input help text wrapper
+ */
 export class AuroInput extends BaseInput {
     static get styles(): import("lit").CSSResult[];
     /**
@@ -74,6 +96,7 @@ export class AuroInput extends BaseInput {
     /**
      * Common display value wrapper classes.
      * @private
+     * @returns {Record<string, boolean>}
      */
     private get commonDisplayValueWrapperClasses();
     /**

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

@@ -1,26 +1,17 @@
 /**
- * The `auro-input` element provides users a way to enter data into a text field.
- * @customElement auro-input
- *
- * @slot ariaLabel.clear - Sets aria-label on clear button for screen reader 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 optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
- * @slot displayValue - Allows custom HTML content to display in place of the value when the input is not focused.
- * @csspart wrapper - Use for customizing the style of the root element
- * @csspart label - Use for customizing the style of the label element
- * @csspart helpText - Use for customizing the style of the helpText element
- * @csspart input - Use for customizing the style of the input element
- * @csspart accentIcon - Use for customizing the style of the accentIcon element (e.g. credit card icon, calendar icon)
- * @csspart iconContainer - Use for customizing the style of the iconContainer (e.g. X icon for clearing input value)
- * @csspart accent-left - Use for customizing the style of the left accent element (e.g. padding, margin)
- * @csspart accent-right - Use for customizing the style of the right accent element (e.g. padding, margin)
+ * Base class for auro-input component that provides core input functionality.
  * @event input - Event fires when the value of an `auro-input` has been changed.
  * @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` value has changed.
  */
 export default class BaseInput extends AuroElement {
+    static get shadowRootOptions(): {
+        delegatesFocus: boolean;
+        clonable?: boolean;
+        customElementRegistry?: CustomElementRegistry;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
     static get properties(): {
         /**
          * The value for the role attribute.
@@ -43,6 +34,14 @@ export default class BaseInput extends AuroElement {
             type: BooleanConstructor;
             reflect: boolean;
         };
+        /**
+         * The value for the aria-activedescendant attribute.
+         * Points to the ID of the currently active/highlighted option in a listbox.
+         */
+        a11yActivedescendant: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
         /**
          * If set, the label will remain fixed in the active position.
          */
@@ -133,6 +132,14 @@ export default class BaseInput extends AuroElement {
             reflect: boolean;
             attribute: boolean;
         };
+        /**
+         * If set, the label will be hidden visually but still accessible to assistive technologies.
+         * @private
+         */
+        hideLabelVisually: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
         /**
          * If set, will render an icon inside the input to the left of the value. Support is limited to auro-input instances with credit card format.
          */
@@ -175,6 +182,7 @@ export default class BaseInput extends AuroElement {
         };
         /**
          * The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher.
+         * **Note**: This attribute is not intended to be used with a `type` or `format` that already has a defined length, such as credit-cards, dates or phone numbers.
          */
         maxLength: {
             type: NumberConstructor;
@@ -375,6 +383,7 @@ export default class BaseInput extends AuroElement {
     icon: boolean;
     disabled: boolean;
     dvInputOnly: boolean;
+    hideLabelVisually: boolean;
     max: any;
     maxLength: any;
     min: any;
@@ -532,6 +541,15 @@ export default class BaseInput extends AuroElement {
      * @returns {Object}
      */
     private getActiveElement;
+    /**
+     * Sets the active descendant element for accessibility.
+     * Uses ariaActiveDescendantElement to cross shadow DOM boundaries.
+     * This function is used in components that contain `auro-input` to set the active descendant.
+     * @private
+     * @param {HTMLElement|null} element - The element to set as the active descendant, or null to clear.
+     * @returns {void}
+     */
+    private setActiveDescendant;
     /**
      * Validates value.
      * @param {boolean} [force=false] - Whether to force validation.

package/components/input/dist/buttonVersion.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "12.3.0";
+declare const _default: "12.3.2";
 export default _default;

package/components/input/dist/iconVersion.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "9.1.1";
+declare const _default: "9.1.2";
 export default _default;