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

package/components/checkbox/dist/index.js

@@ -111,6 +111,9 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
  *
  * @fires change - (Deprecated) Notifies when checked value is changed.
  * @fires input - Notifies when when checked value is changed by user's interface.
+ * @event auroCheckbox-input - (Deprecated) Notifies when the checked value is changed by user interaction.
+ * @event auroCheckbox-focusin - Notifies when the checkbox receives focus.
+ * @event auroCheckbox-focusout - Notifies when the checkbox loses focus.
  */
 /* eslint-enable jsdoc/no-undefined-types */
 
@@ -214,6 +217,7 @@ class AuroCheckbox extends LitElement {
        */
       onDark: {
         type: Boolean,
+        attribute: 'ondark',
         reflect: true
       },
 
@@ -1102,6 +1106,8 @@ class AuroHelpText extends LitElement {
     super();
 
     this.error = false;
+
+    /** @type {'default' | 'inverse'} */
     this.appearance = "default";
     this.onDark = false;
     this.hasTextContent = false;
@@ -1122,8 +1128,8 @@ class AuroHelpText extends LitElement {
     return {
 
       /**
-       * Defines whether the component will be on lighter or darker backgrounds.
-       * @property {'default', 'inverse'} - The appearance of the help text, either default (for light backgrounds) or inverse (for dark backgrounds).
+       * The appearance of the help text, either default (for light backgrounds) or inverse (for dark backgrounds).
+       * @type {'default' | 'inverse'}
        * @default 'default'
        */
       appearance: {
@@ -1136,6 +1142,7 @@ class AuroHelpText extends LitElement {
        */
       slotNodes: {
         type: Boolean,
+        attribute: 'slotnodes',
       },
 
       /**
@@ -1143,6 +1150,7 @@ class AuroHelpText extends LitElement {
        */
       hasTextContent: {
         type: Boolean,
+        attribute: 'hastextcontent',
       },
 
       /**
@@ -1158,6 +1166,7 @@ class AuroHelpText extends LitElement {
        */
       onDark: {
         type: Boolean,
+        attribute: 'ondark',
         reflect: true
       }
     };
@@ -1228,7 +1237,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202608261850';
+var formkitVersion = '202608291822';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -1238,11 +1247,14 @@ var formkitVersion = '202608261850';
  * The `auro-checkbox-group` element is a wrapper for `auro-checkbox` elements.
  * @customElement auro-checkbox-group
  *
+ * @csspart helpText - Apply css to the help text element that displays helper or error messages.
+ *
  * @slot legend - Allows for the legend to be overridden.
  * @slot optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
  * @slot helpText - Allows for the helper text to be overridden.
  * @slot default - The default slot for the checkbox items.
  * @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` values have changed.
+ * @event input - Notifies when the group's value changes due to a checkbox selection being added or removed.
  */
 
 class AuroCheckboxGroup extends LitElement {
@@ -1355,6 +1367,7 @@ class AuroCheckboxGroup extends LitElement {
        */
       noValidate: {
         type: Boolean,
+        attribute: 'novalidate',
         reflect: true
       },
 
@@ -1363,6 +1376,7 @@ class AuroCheckboxGroup extends LitElement {
        */
       onDark: {
         type: Boolean,
+        attribute: 'ondark',
         reflect: true
       },
 
@@ -1378,21 +1392,24 @@ class AuroCheckboxGroup extends LitElement {
        * Sets a custom help text message to display for all validityStates.
        */
       setCustomValidity: {
-        type: String
+        type: String,
+        attribute: 'setcustomvalidity'
       },
 
       /**
        * Custom help text message to display when validity = `customError`.
        */
       setCustomValidityCustomError: {
-        type: String
+        type: String,
+        attribute: 'setcustomvaliditycustomerror'
       },
 
       /**
        * Custom help text message to display when validity = `valueMissing`.
        */
       setCustomValidityValueMissing: {
-        type: String
+        type: String,
+        attribute: 'setcustomvalidityvaluemissing'
       },
 
       /**

package/components/checkbox/dist/registered.js

@@ -111,6 +111,9 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
  *
  * @fires change - (Deprecated) Notifies when checked value is changed.
  * @fires input - Notifies when when checked value is changed by user's interface.
+ * @event auroCheckbox-input - (Deprecated) Notifies when the checked value is changed by user interaction.
+ * @event auroCheckbox-focusin - Notifies when the checkbox receives focus.
+ * @event auroCheckbox-focusout - Notifies when the checkbox loses focus.
  */
 /* eslint-enable jsdoc/no-undefined-types */
 
@@ -214,6 +217,7 @@ class AuroCheckbox extends LitElement {
        */
       onDark: {
         type: Boolean,
+        attribute: 'ondark',
         reflect: true
       },
 
@@ -1102,6 +1106,8 @@ class AuroHelpText extends LitElement {
     super();
 
     this.error = false;
+
+    /** @type {'default' | 'inverse'} */
     this.appearance = "default";
     this.onDark = false;
     this.hasTextContent = false;
@@ -1122,8 +1128,8 @@ class AuroHelpText extends LitElement {
     return {
 
       /**
-       * Defines whether the component will be on lighter or darker backgrounds.
-       * @property {'default', 'inverse'} - The appearance of the help text, either default (for light backgrounds) or inverse (for dark backgrounds).
+       * The appearance of the help text, either default (for light backgrounds) or inverse (for dark backgrounds).
+       * @type {'default' | 'inverse'}
        * @default 'default'
        */
       appearance: {
@@ -1136,6 +1142,7 @@ class AuroHelpText extends LitElement {
        */
       slotNodes: {
         type: Boolean,
+        attribute: 'slotnodes',
       },
 
       /**
@@ -1143,6 +1150,7 @@ class AuroHelpText extends LitElement {
        */
       hasTextContent: {
         type: Boolean,
+        attribute: 'hastextcontent',
       },
 
       /**
@@ -1158,6 +1166,7 @@ class AuroHelpText extends LitElement {
        */
       onDark: {
         type: Boolean,
+        attribute: 'ondark',
         reflect: true
       }
     };
@@ -1228,7 +1237,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202608261850';
+var formkitVersion = '202608291822';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -1238,11 +1247,14 @@ var formkitVersion = '202608261850';
  * The `auro-checkbox-group` element is a wrapper for `auro-checkbox` elements.
  * @customElement auro-checkbox-group
  *
+ * @csspart helpText - Apply css to the help text element that displays helper or error messages.
+ *
  * @slot legend - Allows for the legend to be overridden.
  * @slot optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
  * @slot helpText - Allows for the helper text to be overridden.
  * @slot default - The default slot for the checkbox items.
  * @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` values have changed.
+ * @event input - Notifies when the group's value changes due to a checkbox selection being added or removed.
  */
 
 class AuroCheckboxGroup extends LitElement {
@@ -1355,6 +1367,7 @@ class AuroCheckboxGroup extends LitElement {
        */
       noValidate: {
         type: Boolean,
+        attribute: 'novalidate',
         reflect: true
       },
 
@@ -1363,6 +1376,7 @@ class AuroCheckboxGroup extends LitElement {
        */
       onDark: {
         type: Boolean,
+        attribute: 'ondark',
         reflect: true
       },
 
@@ -1378,21 +1392,24 @@ class AuroCheckboxGroup extends LitElement {
        * Sets a custom help text message to display for all validityStates.
        */
       setCustomValidity: {
-        type: String
+        type: String,
+        attribute: 'setcustomvalidity'
       },
 
       /**
        * Custom help text message to display when validity = `customError`.
        */
       setCustomValidityCustomError: {
-        type: String
+        type: String,
+        attribute: 'setcustomvaliditycustomerror'
       },
 
       /**
        * Custom help text message to display when validity = `valueMissing`.
        */
       setCustomValidityValueMissing: {
-        type: String
+        type: String,
+        attribute: 'setcustomvalidityvaluemissing'
       },
 
       /**

package/components/combobox/demo/api.md

@@ -10,37 +10,39 @@ The `auro-combobox` element provides users with a way to select an option from a
 | Property                              | Attribute                             | Modifiers | Type                                             | Default          | Description                                      |
 |---------------------------------------|---------------------------------------|-----------|--------------------------------------------------|------------------|--------------------------------------------------|
 | `appearance`                          | `appearance`                          |           | `string`                                         | "'default'"      | Defines whether the component will be on lighter or darker backgrounds. |
-| `autoPlacement`                       | `autoPlacement`                       |           | `boolean`                                        |                  | If declared, bib's position will be automatically calculated where to appear. |
+| `autoPlacement`                       | `autoplacement`                       |           | `boolean`                                        |                  | If declared, bib's position will be automatically calculated where to appear. |
 | `autocomplete`                        | `autocomplete`                        |           | `string`                                         |                  | An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported. |
 | `behavior`                            | `behavior`                            |           | `'filter' \| 'suggestion'`                       | "'suggestion'"   | Sets the behavior of the combobox, "filter" or "suggestion".<br />"filter" requires the user to select an option from the menu.<br />"suggestion" allows the user to enter a value not present in the menu options. |
 | `checkmark`                           | `checkmark`                           |           | `boolean`                                        |                  | When attribute is present auro-menu will apply check marks to selected options. |
 | `disabled`                            | `disabled`                            |           | `boolean`                                        |                  | If set, disables the combobox.                   |
-| `dvInputOnly`                         | `dvInputOnly`                         |           | `boolean`                                        |                  | If defined, the display value slot content will only mask the HTML5 input element. The inputs label will not be masked. |
+| `dvInputOnly`                         | `dvinputonly`                         |           | `boolean`                                        |                  | If defined, the display value slot content will only mask the HTML5 input element. The inputs label will not be masked. |
 | `error`                               | `error`                               |           | `string`                                         |                  | When defined, sets persistent validity to `customError` and sets the validation message to the attribute value. |
 | `format`                              | `format`                              |           | `string`                                         |                  | Specifies the input mask format.                 |
-| `fullscreenBreakpoint`                | `fullscreenBreakpoint`                |           | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'disabled'` | "'sm'"           | Defines the screen size breakpointat 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. |
+| `fullscreenBreakpoint`                | `fullscreenbreakpoint`                |           | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'disabled'` | "'sm'"           | Defines the screen size breakpointat 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. |
 | `inputValue`                          |                                       | readonly  | `string \| undefined`                            |                  | Returns the current value of the input element within the combobox. |
 | `inputmode`                           | `inputmode`                           |           | `string`                                         |                  | Exposes inputmode attribute for input.           |
-| `largeFullscreenHeadline`             | `largeFullscreenHeadline`             |           | `boolean`                                        |                  | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600 |
+| `largeFullscreenHeadline`             | `largefullscreenheadline`             |           | `boolean`                                        |                  | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600 |
 | `layout`                              | `layout`                              |           | `'classic' \| 'emphasized' \| 'snowflake'`       | "'classic'"      | Sets the layout of the combobox.                 |
-| `noFilter`                            | `noFilter`                            |           | `boolean`                                        |                  | If set, combobox will not filter menuoptions based on input. |
-| `noFlip`                              | `noFlip`                              |           | `boolean`                                        |                  | If declared, the bib will NOT flip to an alternate position<br />when there isn't enough space in the specified `placement`. |
-| `noValidate`                          | `noValidate`                          |           | `boolean`                                        |                  | If set, disables auto-validation on blur.        |
+| `noFilter`                            | `nofilter`                            |           | `boolean`                                        |                  | If set, combobox will not filter menuoptions based on input. |
+| `noFlip`                              | `noflip`                              |           | `boolean`                                        |                  | If declared, the bib will NOT flip to an alternate position<br />when there isn't enough space in the specified `placement`. |
+| `noValidate`                          | `novalidate`                          |           | `boolean`                                        |                  | If set, disables auto-validation on blur.        |
 | `offset`                              | `offset`                              |           | `number`                                         | "0"              | Gap between the trigger element and bib.         |
-| `onDark`                              | `onDark`                              |           | `boolean`                                        |                  | DEPRECATED - use `appearance="inverse"` instead. |
-| `optionSelected`                      | `optionSelected`                      |           | `HTMLElement`                                    |                  | Specifies the current selected option.           |
-| `persistInput`                        | `persistInput`                        |           | `boolean`                                        |                  | If declared, selecting a menu option will not change the input value. By doing so,<br />the current menu filter will be preserved and the user can continue from their last<br />filter state. It is recommended to use this in combination with the `displayValue` slot. |
+| `onDark`                              | `ondark`                              |           | `boolean`                                        |                  | DEPRECATED - use `appearance="inverse"` instead. |
+| `optionSelected`                      | `optionselected`                      |           | `HTMLElement`                                    |                  | Specifies the current selected option.           |
+| `persistInput`                        | `persistinput`                        |           | `boolean`                                        |                  | If declared, selecting a menu option will not change the input value. By doing so,<br />the current menu filter will be preserved and the user can continue from their last<br />filter state. It is recommended to use this in combination with the `displayValue` slot. |
 | `placeholder`                         | `placeholder`                         |           | `string`                                         |                  | Define custom placeholder text, only supported by date input formats. |
 | `placement`                           | `placement`                           |           | `'top' \| 'right' \| 'bottom' \| 'left' \| 'bottom-start' \| 'top-start' \| 'top-end' \| 'right-start' \| 'right-end' \| 'bottom-end' \| 'left-start' \| 'left-end'` | "'bottom-start'" | Position where the bib should appear relative to the trigger. |
 | `required`                            | `required`                            |           | `boolean`                                        |                  | Populates the `required` attribute on the input. Used for client-side validation. |
-| `setCustomValidity`                   | `setCustomValidity`                   |           | `string`                                         |                  | Sets a custom help text message to display for all validityStates. |
-| `setCustomValidityCustomError`        | `setCustomValidityCustomError`        |           | `string`                                         |                  | Custom help text message to display when validity = `customError`. |
-| `setCustomValidityValueMissing`       | `setCustomValidityValueMissing`       |           | `string`                                         |                  | Custom help text message to display when validity = `valueMissing`. |
-| `setCustomValidityValueMissingFilter` | `setCustomValidityValueMissingFilter` |           | `string`                                         |                  | Custom help text message to display when validity = `valueMissing` due to the user not choosing a menu option when behavior = "filter". |
+| `setCustomValidity`                   | `setcustomvalidity`                   |           | `string`                                         |                  | Sets a custom help text message to display for all validityStates. |
+| `setCustomValidityCustomError`        | `setcustomvaliditycustomerror`        |           | `string`                                         |                  | Custom help text message to display when validity = `customError`. |
+| `setCustomValidityValueMissing`       | `setcustomvalidityvaluemissing`       |           | `string`                                         |                  | Custom help text message to display when validity = `valueMissing`. |
+| `setCustomValidityValueMissingFilter` | `setcustomvalidityvaluemissingfilter` |           | `string`                                         |                  | Custom help text message to display when validity = `valueMissing` due to the user not choosing a menu option when behavior = "filter". |
+| `shape`                               | `shape`                               |           | `'box' \| 'classic' \| 'pill' \| 'pill-left' \| 'pill-right' \| 'rounded' \| 'snowflake'` | "'classic'"      | Sets the shape of the combobox.                  |
 | `shift`                               | `shift`                               |           | `boolean`                                        |                  | If declared, the dropdown will shift its position to avoid being cut off by the viewport. |
-| `triggerIcon`                         | `triggerIcon`                         |           | `boolean`                                        |                  | If set, the `icon` attribute will be applied to the trigger `auro-input` element.<br />Icon rendering is currently limited to `type="credit-card"`. Setting `triggerIcon`<br />without a supported `type` propagates the attribute but does not render a visible icon. |
+| `size`                                | `size`                                |           | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`           | "'xl'"           | Sets the size of the combobox.                   |
+| `triggerIcon`                         | `triggericon`                         |           | `boolean`                                        |                  | If set, the `icon` attribute will be applied to the trigger `auro-input` element.<br />Icon rendering is currently limited to `type="credit-card"`. Setting `triggerIcon`<br />without a supported `type` propagates the attribute but does not render a visible icon. |
 | `type`                                | `type`                                |           | `string`                                         |                  | Applies the defined value as the type attribute on `auro-input`. |
-| `typedValue`                          | `typedValue`                          |           | `string`                                         |                  | Specifies the value of the input element within the combobox. |
+| `typedValue`                          | `typedvalue`                          |           | `string`                                         |                  | Specifies the value of the input element within the combobox. |
 | `validity`                            | `validity`                            |           | `string`                                         |                  | Specifies the `validityState` this element is in. |
 | `value`                               | `value`                               |           | `string`                                         |                  | Value selected for the dropdown menu. When set programmatically or as a preset attribute, the value must match a selectable option. If it matches an option marked `disabled` or `static`, the selection is rejected: `value` and `optionSelected` are cleared to `undefined`. `hidden` options (including those filtered out by type-ahead) remain selectable by value. |
 
@@ -79,4 +81,10 @@ The `auro-combobox` element provides users with a way to select an option from a
 | `helpText`                | Defines the content of the helpText.             |
 | `label`                   | Defines the content of the label.                |
 | `optionalLabel`           | Allows overriding the optional display text "(optional)", which appears next to the label. |
+
+## CSS Shadow Parts
+
+| Part       | Description                                      |
+|------------|--------------------------------------------------|
+| `helpText` | The help text and error message content container. |
 <!-- AURO-GENERATED-CONTENT:END -->