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

package/components/radio/dist/index.js

@@ -217,6 +217,7 @@ class AuroRadio extends LitElement {
        */
       onDark: {
         type: Boolean,
+        attribute: 'ondark',
         reflect: true
       },
 
@@ -1040,6 +1041,8 @@ class AuroHelpText extends LitElement {
     super();
 
     this.error = false;
+
+    /** @type {'default' | 'inverse'} */
     this.appearance = "default";
     this.onDark = false;
     this.hasTextContent = false;
@@ -1060,8 +1063,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: {
@@ -1074,6 +1077,7 @@ class AuroHelpText extends LitElement {
        */
       slotNodes: {
         type: Boolean,
+        attribute: 'slotnodes',
       },
 
       /**
@@ -1081,6 +1085,7 @@ class AuroHelpText extends LitElement {
        */
       hasTextContent: {
         type: Boolean,
+        attribute: 'hastextcontent',
       },
 
       /**
@@ -1096,6 +1101,7 @@ class AuroHelpText extends LitElement {
        */
       onDark: {
         type: Boolean,
+        attribute: 'ondark',
         reflect: true
       }
     };
@@ -1166,7 +1172,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202608261850';
+var formkitVersion = '202608291822';
 
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -1181,6 +1187,7 @@ var formkitVersion = '202608261850';
  * @customElement auro-radio-group
  *
  * @csspart radio-group - Apply css to the fieldset element in the shadow DOM
+ * @csspart helpText - Apply css to the help text element that displays helper or error messages.
  * @slot {HTMLSlotElement} legend - Allows for the legend to be overridden.
  * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
  * @slot {HTMLSlotElement} helpText - Allows for the helper text to be overridden.
@@ -1295,6 +1302,7 @@ class AuroRadioGroup extends LitElement {
        */
       noValidate: {
         type: Boolean,
+        attribute: 'novalidate',
         reflect: true
       },
 
@@ -1303,6 +1311,7 @@ class AuroRadioGroup extends LitElement {
        */
       onDark: {
         type: Boolean,
+        attribute: 'ondark',
         reflect: true
       },
 
@@ -1310,7 +1319,8 @@ class AuroRadioGroup extends LitElement {
        * Specifies the current selected radio button.
        */
       optionSelected: {
-        type: Object
+        type: Object,
+        attribute: 'optionselected'
       },
 
       /**
@@ -1325,21 +1335,24 @@ class AuroRadioGroup 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/radio/dist/registered.js

@@ -217,6 +217,7 @@ class AuroRadio extends LitElement {
        */
       onDark: {
         type: Boolean,
+        attribute: 'ondark',
         reflect: true
       },
 
@@ -1040,6 +1041,8 @@ class AuroHelpText extends LitElement {
     super();
 
     this.error = false;
+
+    /** @type {'default' | 'inverse'} */
     this.appearance = "default";
     this.onDark = false;
     this.hasTextContent = false;
@@ -1060,8 +1063,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: {
@@ -1074,6 +1077,7 @@ class AuroHelpText extends LitElement {
        */
       slotNodes: {
         type: Boolean,
+        attribute: 'slotnodes',
       },
 
       /**
@@ -1081,6 +1085,7 @@ class AuroHelpText extends LitElement {
        */
       hasTextContent: {
         type: Boolean,
+        attribute: 'hastextcontent',
       },
 
       /**
@@ -1096,6 +1101,7 @@ class AuroHelpText extends LitElement {
        */
       onDark: {
         type: Boolean,
+        attribute: 'ondark',
         reflect: true
       }
     };
@@ -1166,7 +1172,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202608261850';
+var formkitVersion = '202608291822';
 
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -1181,6 +1187,7 @@ var formkitVersion = '202608261850';
  * @customElement auro-radio-group
  *
  * @csspart radio-group - Apply css to the fieldset element in the shadow DOM
+ * @csspart helpText - Apply css to the help text element that displays helper or error messages.
  * @slot {HTMLSlotElement} legend - Allows for the legend to be overridden.
  * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
  * @slot {HTMLSlotElement} helpText - Allows for the helper text to be overridden.
@@ -1295,6 +1302,7 @@ class AuroRadioGroup extends LitElement {
        */
       noValidate: {
         type: Boolean,
+        attribute: 'novalidate',
         reflect: true
       },
 
@@ -1303,6 +1311,7 @@ class AuroRadioGroup extends LitElement {
        */
       onDark: {
         type: Boolean,
+        attribute: 'ondark',
         reflect: true
       },
 
@@ -1310,7 +1319,8 @@ class AuroRadioGroup extends LitElement {
        * Specifies the current selected radio button.
        */
       optionSelected: {
-        type: Object
+        type: Object,
+        attribute: 'optionselected'
       },
 
       /**
@@ -1325,21 +1335,24 @@ class AuroRadioGroup 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/select/demo/api.md

@@ -10,35 +10,35 @@ The `auro-select` element is a wrapper for auro-dropdown and auro-menu to create
 | Property                        | Attribute                       | Type                                             | Default          | Description                                      |
 |---------------------------------|---------------------------------|--------------------------------------------------|------------------|--------------------------------------------------|
 | `appearance`                    | `appearance`                    | `'default' \| 'inverse'`                         | "'default'"      | Defines whether the component will be on lighter or darker backgrounds. |
-| `autoPlacement`                 | `autoPlacement`                 | `boolean`                                        | false            | If declared, bib's position will be automatically calculated where to appear. |
+| `autoPlacement`                 | `autoplacement`                 | `boolean`                                        | false            | If declared, bib's position will be automatically calculated where to appear. |
 | `autocomplete`                  | `autocomplete`                  | `string`                                         |                  | If declared, sets the autocomplete attribute for the select element. |
 | `disabled`                      | `disabled`                      | `boolean`                                        |                  | When attribute is present, element shows disabled state. |
 | `error`                         | `error`                         | `string`                                         |                  | When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value. |
-| `flexMenuWidth`                 | `flexMenuWidth`                 | `boolean`                                        |                  | If declared, make the width of the bib match the width of the content, rather than the trigger. |
+| `flexMenuWidth`                 | `flexmenuwidth`                 | `boolean`                                        |                  | If declared, make the width of the bib match the width of the content, rather than the trigger. |
 | `fluid`                         | `fluid`                         | `boolean`                                        |                  | When attribute is present, element will be 100% width of container element. |
-| `forceDisplayValue`             | `forceDisplayValue`             | `boolean`                                        | false            | If declared, the label and value will be visually hidden and the displayValue will render 100% of the time. |
-| `fullscreenBreakpoint`          | `fullscreenBreakpoint`          | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'disabled'` | "'sm'"           | Defines the screen size breakpoint 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`       | `boolean`                                        |                  | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600. |
+| `forceDisplayValue`             | `forcedisplayvalue`             | `boolean`                                        | false            | If declared, the label and value will be visually hidden and the displayValue will render 100% of the time. |
+| `fullscreenBreakpoint`          | `fullscreenbreakpoint`          | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'disabled'` | "'sm'"           | Defines the screen size breakpoint 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`       | `boolean`                                        |                  | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600. |
 | `layout`                        | `layout`                        | `'classic' \| 'emphasized' \| 'snowflake'`       | "'classic'"      | Determines the overall layout of the select component. |
-| `matchWidth`                    | `matchWidth`                    | `boolean`                                        | false            | If declared, the popover and trigger will be set to the same width. |
+| `matchWidth`                    | `matchwidth`                    | `boolean`                                        | false            | If declared, the popover and trigger will be set to the same width. |
 | `multiSelect`                   | `multiselect`                   | `boolean`                                        |                  | Sets multi-select mode, allowing multiple options to be selected at once. |
 | `name`                          | `name`                          | `string`                                         |                  | The name for the select element.                 |
-| `noCheckmark`                   | `noCheckmark`                   | `boolean`                                        |                  | When true, checkmark on selected option will no longer be present. |
-| `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`                    | `boolean`                                        |                  | If set, disables auto-validation on blur.        |
+| `noCheckmark`                   | `nocheckmark`                   | `boolean`                                        |                  | When true, checkmark on selected option will no longer be present. |
+| `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`                    | `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\|Array<HTMLElement>`                |                  | Specifies the current selected menuOption. Default type is `HTMLElement`, changing to `Array<HTMLElement>` when `multiSelect` is true. |
+| `onDark`                        | `ondark`                        | `boolean`                                        |                  | DEPRECATED - use `appearance="inverse"` instead. |
+| `optionSelected`                | `optionselected`                | `HTMLElement\|Array<HTMLElement>`                |                  | Specifies the current selected menuOption. Default type is `HTMLElement`, changing to `Array<HTMLElement>` when `multiSelect` is true. |
 | `placeholder`                   | `placeholder`                   | `string`                                         |                  | Define custom placeholder text.                  |
 | `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 element. 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`. |
+| `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`. |
 | `shape`                         | `shape`                         | `'classic' \| 'pill' \| 'pill-left' \| 'pill-right' \| 'snowflake'` |                  | Determines the shape of the dropdown bib.        |
 | `shift`                         | `shift`                         | `boolean`                                        | false            | If set, the dropdown will shift its position to avoid being cut off by the viewport. |
 | `size`                          | `size`                          | `'lg' \| 'xl'`                                   |                  | Determines the size of the dropdown bib. Only the `emphasized` layout supports size=`xl`, while all other layouts support size=`lg`. |
-| `typeaheadTimeoutMs`            | `typeaheadTimeoutMs`            | `number`                                         | "500"            | Milliseconds of keyboard inactivity before the type-ahead buffer resets.<br />Increase for users who type slowly. |
+| `typeaheadTimeoutMs`            | `typeaheadtimeoutms`            | `number`                                         | "500"            | Milliseconds of keyboard inactivity before the type-ahead buffer resets.<br />Increase for users who type slowly. |
 | `validity`                      | `validity`                      | `string`                                         |                  | Specifies the `validityState` this element is in. |
 | `value`                         | `value`                         | `string`                                         |                  | Value selected for the component. 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` is cleared to `undefined` while `optionSelected` is cleared to `undefined` in single-select or `[]` in multiSelect. `hidden` options remain selectable by value. |
 
@@ -78,8 +78,11 @@ The `auro-select` element is a wrapper for auro-dropdown and auro-menu to create
 
 | Part              | Description                                      |
 |-------------------|--------------------------------------------------|
+| `displayValue`    | Apply CSS to the custom displayValue container.  |
+| `dropdown`        | Apply CSS to the underlying dropdown element.    |
 | `dropdownChevron` | Apply CSS to the collapsed/expanded state icon container. |
 | `dropdownSize`    | Apply size styles to the dropdown bib (height, width, maxHeight, maxWidth only). |
 | `dropdownTrigger` | Apply CSS to the trigger content container.      |
 | `helpText`        | Apply CSS to the help text.                      |
+| `wrapper`         | Apply CSS to the root wrapper element of the select. |
 <!-- AURO-GENERATED-CONTENT:END -->