@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.50 → 0.0.0-pr624.52

package/components/combobox/dist/registered.js

@@ -590,19 +590,19 @@ let AuroFormValidation$1 = class AuroFormValidation {
           {
             check: (e) => e.value?.length > 0 && e.value?.length < e.minLength,
             validity: 'tooShort',
-            message: e => e.setCustomValidityTooShort || e.setCustomValidity || ''
+            message: e => e.getAttribute('setCustomValidityTooShort') || e.setCustomValidity || ''
           },
           {
             check: (e) => e.value?.length > e.maxLength,
             validity: 'tooLong',
-            message: e => e.setCustomValidityTooLong || e.setCustomValidity || ''
+            message: e => e.getAttribute('setCustomValidityTooLong') || e.setCustomValidity || ''
           }
         ],
         pattern: [
           {
             check: (e) => e.pattern && !new RegExp(`^${e.pattern}$`, 'u').test(e.value),
             validity: 'patternMismatch',
-            message: e => e.setCustomValidityPatternMismatch || e.setCustomValidity || ''
+            message: e => e.getAttribute('setCustomValidityPatternMismatch') || e.setCustomValidity || ''
           }
         ]
       },
@@ -797,10 +797,10 @@ let AuroFormValidation$1 = class AuroFormValidation {
       if (!hasValue && elem.required && elem.touched) {
         elem.validity = 'valueMissing';
         elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
-      } else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
+      } else if (hasValue && this.runtimeUtils.elementMatch(elem, 'auro-input')) {
         this.validateType(elem);
         this.validateElementAttributes(elem);
-      } else if (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group')) {
+      } else if (hasValue && (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group'))) {
         this.validateElementAttributes(elem);
       }
     }
@@ -4345,10 +4345,8 @@ let AuroElement$4 = class AuroElement extends LitElement {
 // See LICENSE in the project root for license information.
 
 
-/**
- * @attr { Boolean } disableEventShow - If declared, the dropdown will only show by calling the API .show() public method.
+/*
  * @slot - Default slot for the popover content.
- * @slot label - Defines the content of the label.
  * @slot helpText - Defines the content of the helpText.
  * @slot trigger - Defines the content of the trigger.
  * @csspart trigger - The trigger content container.
@@ -4367,18 +4365,22 @@ class AuroDropdown extends AuroElement$4 {
     this.matchWidth = false;
     this.noHideOnThisFocusLoss = false;
 
-    this.errorMessage = ''; // TODO - check with Doug if there is still more to do here
+    this.errorMessage = undefined; // TODO - check with Doug if there is still more to do here
 
     // Layout Config
-    this.layout = 'classic';
-    this.shape = 'classic';
-    this.size = 'xl';
+    this.layout = undefined;
+    this.shape = undefined;
+    this.size = undefined;
 
     this.parentBorder = false;
 
     this.privateDefaults();
   }
 
+  /**
+   * @private
+   * @returns {object} Class definition for the wrapper element.
+   */
   get commonWrapperClasses() {
     return {
       'trigger': true,
@@ -4398,12 +4400,8 @@ class AuroDropdown extends AuroElement$4 {
     this.disabled = false;
     this.disableFocusTrap = false;
     this.error = false;
-    this.inset = false;
-    this.rounded = false;
     this.tabIndex = 0;
     this.noToggle = false;
-    this.a11yAutocomplete = 'none';
-    this.labeled = true;
     this.a11yRole = 'button';
     this.onDark = false;
     this.showTriggerBorders = true;
@@ -4525,26 +4523,27 @@ class AuroDropdown extends AuroElement$4 {
       },
 
       /**
-       * If declared, applies a border around the trigger slot.
+       * If declared, the dropdown will only show by calling the API .show() public method.
+       * @default false
        */
-      simple: {
+      disableEventShow: {
         type: Boolean,
         reflect: true
       },
 
       /**
-       * If declared, the dropdown displays a chevron on the right.
-       * @attr {Boolean} chevron
+       * If declared, applies a border around the trigger slot.
        */
-      chevron: {
+      simple: {
         type: Boolean,
         reflect: true
       },
 
       /**
-       * If declared, the dropdown will be styled with the common theme.
+       * If declared, the dropdown displays a chevron on the right.
+       * @attr {Boolean} chevron
        */
-      common: {
+      chevron: {
         type: Boolean,
         reflect: true
       },
@@ -4558,7 +4557,7 @@ class AuroDropdown extends AuroElement$4 {
       },
 
       /**
-       * If declare, the focus trap inside of bib will be turned off.
+       * If declared, the focus trap inside of bib will be turned off.
        */
       disableFocusTrap: {
         type: Boolean,
@@ -4605,22 +4604,6 @@ class AuroDropdown extends AuroElement$4 {
         reflect: true
       },
 
-      /**
-       * Makes the trigger to be full width of its parent container.
-       */
-      fluid: {
-        type: Boolean,
-        reflect: true
-      },
-
-      /**
-       * If declared, will apply padding around trigger slot content.
-       */
-      inset: {
-        type: Boolean,
-        reflect: true
-      },
-
       /**
        * If true, the dropdown bib is displayed.
        */
@@ -4664,15 +4647,6 @@ class AuroDropdown extends AuroElement$4 {
         reflect: true
       },
 
-      /**
-       * Defines if there is a label preset.
-       * @private
-       */
-      labeled: {
-        type: Boolean,
-        reflect: true
-      },
-
       /**
        * Defines if the trigger should size based on the parent element providing the border UI.
        * @private
@@ -4733,6 +4707,9 @@ class AuroDropdown extends AuroElement$4 {
         reflect: true
       },
 
+      /**
+       *  If declared, and a function is set, that function will execute when the slot content is updated.
+       */
       onSlotChange: {
         type: Function,
         reflect: false
@@ -4747,14 +4724,6 @@ class AuroDropdown extends AuroElement$4 {
         reflect: true
       },
 
-      /**
-       * If declared, will apply border-radius to trigger and default slots.
-       */
-      rounded: {
-        type: Boolean,
-        reflect: true
-      },
-
       /**
        * @private
        */
@@ -4769,14 +4738,6 @@ class AuroDropdown extends AuroElement$4 {
         type: String || undefined,
         attribute: false,
         reflect: false
-      },
-
-      /**
-       * The value for the aria-autocomplete attribute of the trigger element.
-       */
-      a11yAutocomplete: {
-        type: String,
-        attribute: false,
       }
     };
   }
@@ -5224,10 +5185,7 @@ class AuroDropdown extends AuroElement$4 {
           id="bib"
           shape="${this.shape}"
           ?data-show="${this.isPopoverVisible}"
-          ?isfullscreen="${this.isBibFullscreen}"
-          ?common="${this.common}"
-          ?rounded="${this.common || this.rounded}"
-          ?inset="${this.common || this.inset}">
+          ?isfullscreen="${this.isBibFullscreen}">
           <div class="slotContent">
             <slot @slotchange="${this.handleDefaultSlot}"></slot>
           </div>
@@ -9849,19 +9807,19 @@ class AuroFormValidation {
           {
             check: (e) => e.value?.length > 0 && e.value?.length < e.minLength,
             validity: 'tooShort',
-            message: e => e.setCustomValidityTooShort || e.setCustomValidity || ''
+            message: e => e.getAttribute('setCustomValidityTooShort') || e.setCustomValidity || ''
           },
           {
             check: (e) => e.value?.length > e.maxLength,
             validity: 'tooLong',
-            message: e => e.setCustomValidityTooLong || e.setCustomValidity || ''
+            message: e => e.getAttribute('setCustomValidityTooLong') || e.setCustomValidity || ''
           }
         ],
         pattern: [
           {
             check: (e) => e.pattern && !new RegExp(`^${e.pattern}$`, 'u').test(e.value),
             validity: 'patternMismatch',
-            message: e => e.setCustomValidityPatternMismatch || e.setCustomValidity || ''
+            message: e => e.getAttribute('setCustomValidityPatternMismatch') || e.setCustomValidity || ''
           }
         ]
       },
@@ -10056,10 +10014,10 @@ class AuroFormValidation {
       if (!hasValue && elem.required && elem.touched) {
         elem.validity = 'valueMissing';
         elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
-      } else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
+      } else if (hasValue && this.runtimeUtils.elementMatch(elem, 'auro-input')) {
         this.validateType(elem);
         this.validateElementAttributes(elem);
-      } else if (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group')) {
+      } else if (hasValue && (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group'))) {
         this.validateElementAttributes(elem);
       }
     }
@@ -15417,7 +15375,7 @@ class AuroBibtemplate extends LitElement {
       <div id="bibTemplate" part="bibtemplate">
       ${this.isFullscreen ? html`
         <div id="headerContainer">
-          <${this.buttonTag} id="closeButton" variant="ghost" shape="circle" size="sm" @click="${this.onCloseButtonClick}">
+          <${this.buttonTag} id="closeButton" aria-label="Close" variant="ghost" shape="circle" size="sm" @click="${this.onCloseButtonClick}">
             <${this.iconTag} category="interface" name="x-lg"></${this.iconTag}>
           </${this.buttonTag}>
           <${this.headerTag} display="${this.large ? 'display' : '600'}" level="3" size="none" id="header" no-margin-block>

package/components/counter/demo/api.md

@@ -8,6 +8,7 @@
 | Property   | Attribute  | Type      | Default     | Description                                      |
 |------------|------------|-----------|-------------|--------------------------------------------------|
 | [disabled](#disabled) | `disabled` | `boolean` | false       | Indicates if the counter is disabled.            |
+| [error](#error)    | `error`    | `string`  |             | Error state and message.<br />True if set, value is the error message. |
 | [max](#max)      | `max`      | `number`  | 9           | The maximum value for the counter.               |
 | [min](#min)      | `min`      | `number`  | 0           | The minimum value for the counter.               |
 | [onDark](#onDark)   | `onDark`   | `boolean` | false       | If declared, the counter will be rendered with onDark styles. |
@@ -42,6 +43,7 @@
 | Property                  | Attribute                 | Type                     | Default        | Description                                      |
 |---------------------------|---------------------------|--------------------------|----------------|--------------------------------------------------|
 | [autoPlacement](#autoPlacement)           | `autoPlacement`           | `boolean`                | "false"        | If declared, bib's position will be automatically calculated where to appear. |
+| [error](#error)                   | `error`                   | `string`                 |                | The current error message to display when the component is invalid. |
 | [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. |
 | [isDropdown](#isDropdown)              | `isDropdown`              | `boolean`                | false          | Indicates if the counter group is displayed as a dropdown. |
 | [largeFullscreenHeadline](#largeFullscreenHeadline) | `largeFullscreenHeadline` | `boolean`                | false          | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600. |
@@ -340,6 +342,131 @@ counter.addEventListener('input', (event) => {
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
+### Counter with Custom Error
+
+A custom error can be set on the counter by adding the `error` attribute the desired message.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/counter-error.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/counter-error.html -->
+  <auro-counter error="There is an error with the counter">
+    Adults
+  </auro-counter>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<div class="exampleWrapper--ondark" aria-hidden>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/ondark-counter-error.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/ondark-counter-error.html -->
+  <auro-counter ondark error="There is an error with the counter">
+    Adults
+  </auro-counter>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/counter-error.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/counter-error.html -->
+
+```html
+<auro-counter error="There is an error with the counter">
+  Adults
+</auro-counter>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/ondark-counter-error.html) -->
+<!-- The below content is automatically added from ./../apiExamples/ondark-counter-error.html -->
+<auro-counter ondark error="There is an error with the counter">
+  Adults
+</auro-counter>
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+### Counter Dropdown with Errored Counters
+
+A counter dropdown with counters in an errored state will display the errors for each errored counter by default
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dropdown-error-basic.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/dropdown-error-basic.html -->
+  <auro-counter-group isDropdown>
+    <div slot="bib.fullscreen.headline">Passengers</div>
+    <div slot="label">Passengers</div>
+    <auro-counter error="Cannot have less than 1 adult passenger">
+      Adults
+      <span slot="description">18 years or older</span>
+    </auro-counter>
+    <auro-counter error="Cannot have more than 2 child passengers">
+      Children
+      <span slot="description">2-17 years</span>
+    </auro-counter>
+  </auro-counter-group>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/dropdown-error-basic.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/dropdown-error-basic.html -->
+
+```html
+<auro-counter-group isDropdown>
+  <div slot="bib.fullscreen.headline">Passengers</div>
+  <div slot="label">Passengers</div>
+  <auro-counter error="Cannot have less than 1 adult passenger">
+    Adults
+    <span slot="description">18 years or older</span>
+  </auro-counter>
+  <auro-counter error="Cannot have more than 2 child passengers">
+    Children
+    <span slot="description">2-17 years</span>
+  </auro-counter>
+</auro-counter-group>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+### Counter Dropdown with Custom Error
+
+The error message for a dropdown counter with errored counters can also be overridden with the `error` attribute.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dropdown-error-custom.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/dropdown-error-custom.html -->
+  <auro-counter-group error="Please select the appropriate number of passengers" isDropdown>
+    <div slot="bib.fullscreen.headline">Passengers</div>
+    <div slot="label">Passengers</div>
+    <auro-counter error="Cannot have less than 1 adult passenger">
+      Adults
+      <span slot="description">18 years or older</span>
+    </auro-counter>
+    <auro-counter error="Cannot have more than 2 child passengers">
+      Children
+      <span slot="description">2-17 years</span>
+    </auro-counter>
+  </auro-counter-group>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/dropdown-error-custom.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/dropdown-error-custom.html -->
+
+```html
+<auro-counter-group error="Please select the appropriate number of passengers" isDropdown>
+  <div slot="bib.fullscreen.headline">Passengers</div>
+  <div slot="label">Passengers</div>
+  <auro-counter error="Cannot have less than 1 adult passenger">
+    Adults
+    <span slot="description">18 years or older</span>
+  </auro-counter>
+  <auro-counter error="Cannot have more than 2 child passengers">
+    Children
+    <span slot="description">2-17 years</span>
+  </auro-counter>
+</auro-counter-group>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 ### Group Max/Min
 
 The group counter max or min property sets the value for all counters in the group. If a counter has a max value set, the group max attribute will override it. All increment buttons as a result will be disabled to prevent the group of counters from exceeding the group max.