@aurodesignsystem/auro-formkit 2.0.0-beta.32 → 2.0.0-beta.34

package/components/counter/src/auro-counter.js

@@ -37,6 +37,7 @@ export class AuroCounter extends LitElement {
   constructor() {
     super();
 
+    this.defaultSlot = undefined;
     this.disabled = false;
     this.disableMax = false;
     this.disableMin = false;
@@ -62,6 +63,25 @@ export class AuroCounter extends LitElement {
      * @type {string}
      */
     this.iconTag = versioning.generateTag("auro-icon", iconVersion, AuroIcon);
+
+    /**
+     * @private
+     * @property {boolean} delegatesFocus - Whether the shadow root delegates focus.
+     */
+    this.constructor.shadowRootOptions = {
+      ...LitElement.shadowRootOptions,
+      delegatesFocus: true,
+    };
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener('keydown', this.handleKeyDown);
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener('keydown', this.handleKeyDown);
+    super.disconnectedCallback();
   }
 
   /**
@@ -71,6 +91,15 @@ export class AuroCounter extends LitElement {
   static get properties() {
     return {
 
+      /**
+       * The default slot content.
+       * @type {string}
+       * @private
+       */
+      defaultSlot: {
+        type: String,
+      },
+
       /**
        * Indicates if the counter is disabled.
        */
@@ -153,7 +182,7 @@ export class AuroCounter extends LitElement {
    * @returns {void}
    */
   increment(value) {
-    if (this.disabled) {
+    if (this.disabled || this.disableMax || this.value >= this.max) {
       return;
     }
 
@@ -167,7 +196,7 @@ export class AuroCounter extends LitElement {
    * @returns {void}
    */
   decrement(value) {
-    if (this.disabled) {
+    if (this.disabled || this.disableMin || this.value <= this.min) {
       return;
     }
 
@@ -205,19 +234,6 @@ export class AuroCounter extends LitElement {
     return true;
   }
 
-  /**
-   * Moves the focus to the first enabled button within the shadow DOM.
-   * This method searches for the first `auro-counter-button` element that is not disabled
-   * and sets the focus on it.
-   * @private
-   */
-  jumpFocusToEnabled() {
-    const button = this.shadowRoot.querySelector("auro-counter-button:not([disabled])");
-    if (button && button instanceof HTMLButtonElement) {
-      button.focus();
-    }
-  }
-
   /**
    * Validates value.
    * @param {boolean} [force=false] - Whether to force validation.
@@ -226,11 +242,49 @@ export class AuroCounter extends LitElement {
     this.validation.validate(this, force);
   }
 
+  /**
+   * Handles the keydown event for the counter component.
+   * @param {KeyboardEvent} event - The keyboard event object.
+   * @returns {void}
+   * @private
+   */
+  handleKeyDown(event) {
+    if (this.disabled) {
+      return;
+    }
+
+    switch (event.key) {
+      case 'ArrowUp':
+        event.preventDefault();
+        this.increment();
+        break;
+      case 'ArrowDown':
+        event.preventDefault();
+        this.decrement();
+        break;
+      default:
+        break;
+    }
+  }
 
   firstUpdated() {
     this.initValue();
   }
 
+  /**
+   * Handles the change event for the default slot.
+   * Updates the defaultSlot property with the trimmed text content of the first assigned node.
+   *
+   * @param {Event} event - The event object representing the slot change event.
+   * @private
+   */
+  onDefaultSlotChange(event) {
+    const assignedNodes = event.target.assignedNodes();
+    if (assignedNodes.length > 0) {
+      this.defaultSlot = assignedNodes[0].textContent.trim();
+    }
+  }
+
   updated(changedProperties) {
     if (changedProperties.has("value")) {
       this.validate();
@@ -241,42 +295,25 @@ export class AuroCounter extends LitElement {
           },
         }),
         {
-          bubble: true,
-          composable: true,
+          bubbles: true,
+          composed: true,
         }
       );
-
-      if (
-        this.value === this.max ||
-        this.value === this.min ||
-        changedProperties.get("disableMax") ||
-        changedProperties.get("disableMin")
-      ) {
-        this.jumpFocusToEnabled();
-      }
-    }
-    /* eslint-disable no-extra-parens */
-    if (
-      (changedProperties.has("disableMax") &&
-        changedProperties.get("disableMax") !== undefined) ||
-      (changedProperties.has("disableMin") &&
-        changedProperties.get("disableMin") !== undefined)
-    ) {
-      this.jumpFocusToEnabled();
     }
-    /* eslint-enable no-extra-parens */
   }
 
   render() {
     return html`
       <div class="counter">
         <div class="content" >
-          <label class="label"><slot></slot></label>
-          <slot name="description"></slot>
+          <label id="counter-label" class="label"><slot @slotchange="${this.onDefaultSlotChange}" ></slot></label>
+          <slot id="counter-description" name="description"></slot>
         </div>
-        
-        <div part="counterControl">
+        <div part="counterControl" aria-labelledby="counter-label" aria-describedby="counter-description" tabindex="${this.disabled ? '-1' : '0'}" role="spinbutton" aria-valuemin="${this.min}" aria-valuemax="${this.max}" aria-valuenow="${this.value}">
           <auro-counter-button
+          aria-hidden="true"
+          iconOnly
+          tabindex="-1"
           part="controlMinus"
           @click="${() => this.decrement()}"
           ?disabled="${this.disabled || this.disableMin || this.isIncrementDisabled(this.min)}"
@@ -289,6 +326,9 @@ export class AuroCounter extends LitElement {
           </div>
 
           <auro-counter-button
+          aria-hidden="true"
+          iconOnly
+          tabindex="-1"
           part="controlPlus"
           @click="${() => this.increment()}"
           ?disabled="${this.disabled || this.disableMax || this.isIncrementDisabled(this.max)}"

package/components/counter/src/styles/color-css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export default css`.counter{color:var(--ds-auro-counter-text-default)}[name=description]::slotted(*){color:var(--ds-auro-counter-text-secondary)}.controlIcon{color:var(--ds-auro-counter-icon-color-default)}.quantityWrapper{background-color:var(--ds-auro-counter-control-ui-bkg)}[disabled] .controlIcon,:host([disabled]) .controlIcon{color:var(--ds-auro-counter-control-ui-disabled)}[disabled] label,[disabled] [name=description]::slotted(*),[disabled]::part(counterControl),:host([disabled]) label,:host([disabled]) [name=description]::slotted(*),:host([disabled])::part(counterControl){color:var(--ds-auro-counter-text-disabled)}`;
+export default css`.counter{color:var(--ds-auro-counter-text-default)}[name=description]::slotted(*){color:var(--ds-auro-counter-text-secondary)}.controlIcon{color:var(--ds-auro-counter-icon-color-default)}.quantityWrapper{background-color:var(--ds-auro-counter-control-ui-bkg)}::part(counterControl):focus-visible{outline-color:var(--ds-auro-counter-control-border-active)}[disabled] .controlIcon,:host([disabled]) .controlIcon{color:var(--ds-auro-counter-control-ui-disabled)}[disabled] label,[disabled] [name=description]::slotted(*),[disabled]::part(counterControl),:host([disabled]) label,:host([disabled]) [name=description]::slotted(*),:host([disabled])::part(counterControl){color:var(--ds-auro-counter-text-disabled)}`;

package/components/counter/src/styles/color.css

@@ -15,6 +15,10 @@
   background-color: var(--ds-auro-counter-control-ui-bkg);
 }
 
+::part(counterControl):focus-visible {
+  outline-color: var(--ds-auro-counter-control-border-active);
+}
+
 [disabled] .controlIcon, :host([disabled]) .controlIcon {
   color: var(--ds-auro-counter-control-ui-disabled);
 }

package/components/counter/src/styles/color.scss

@@ -22,7 +22,6 @@
   }
 }
   
-
 .controlIcon {
   color: var(--ds-auro-counter-icon-color-default);
 }
@@ -31,6 +30,12 @@
   background-color: var(--ds-auro-counter-control-ui-bkg);
 }
 
+::part(counterControl) {
+  &:focus-visible {
+    outline-color: var(--ds-auro-counter-control-border-active);
+  }
+}
+
 [disabled], :host([disabled]) {
   .controlIcon {
     color: var(--ds-auro-counter-control-ui-disabled);

package/components/counter/src/styles/counter-button-color-css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export default css`.auroButton{border-color:unset;background-color:var(--ds-auro-counter-control-ui-bkg);color:var(--ds-auro-button-text-color);-webkit-tap-highlight-color:var(--ds-auro-button-tap-color)}.auroButton:focus-visible:not(.auroButton:focus-visible:disabled){outline-color:var(--ds-auro-counter-control-border-active)}@media(hover: hover){.auroButton:active:not(:disabled),.auroButton:hover:not(:disabled){background-color:var(--ds-auro-counter-control-ui-hover)}}`;
+export default css`.auroButton{border-color:unset;background-color:var(--ds-auro-counter-control-ui-bkg);color:var(--ds-auro-button-text-color);-webkit-tap-highlight-color:var(--ds-auro-button-tap-color)}@media(hover: hover){.auroButton:active:not(:disabled),.auroButton:hover:not(:disabled){background-color:var(--ds-auro-counter-control-ui-hover)}}`;

package/components/counter/src/styles/counter-button-color.css

@@ -4,9 +4,6 @@
   color: var(--ds-auro-button-text-color);
   -webkit-tap-highlight-color: var(--ds-auro-button-tap-color);
 }
-.auroButton:focus-visible:not(.auroButton:focus-visible:disabled) {
-  outline-color: var(--ds-auro-counter-control-border-active);
-}
 @media (hover: hover) {
   .auroButton:active:not(:disabled), .auroButton:hover:not(:disabled) {
     background-color: var(--ds-auro-counter-control-ui-hover);

package/components/counter/src/styles/counter-button-color.scss

@@ -13,12 +13,6 @@
   color: var(--ds-auro-button-text-color);
   -webkit-tap-highlight-color: var(--ds-auro-button-tap-color);
 
-  &:focus-visible {
-    &:not(&:disabled) {
-      outline-color: var(--ds-auro-counter-control-border-active);
-    }
-  }
-
   @media (hover: hover) {
     &:active, &:hover{
       &:not(:disabled) {

package/components/counter/src/styles/counter-button-css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export default css`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_insetNone{padding:0}.util_insetXxxs{padding:.125rem}.util_insetXxxs--stretch{padding:.25rem .125rem}.util_insetXxxs--squish{padding:0 .125rem}.util_insetXxs{padding:.25rem}.util_insetXxs--stretch{padding:.375rem .25rem}.util_insetXxs--squish{padding:.125rem .25rem}.util_insetXs{padding:.5rem}.util_insetXs--stretch{padding:.75rem .5rem}.util_insetXs--squish{padding:.25rem .5rem}.util_insetSm{padding:.75rem}.util_insetSm--stretch{padding:1.125rem .75rem}.util_insetSm--squish{padding:.375rem .75rem}.util_insetMd{padding:1rem}.util_insetMd--stretch{padding:1.5rem 1rem}.util_insetMd--squish{padding:.5rem 1rem}.util_insetLg{padding:1.5rem}.util_insetLg--stretch{padding:2.25rem 1.5rem}.util_insetLg--squish{padding:.75rem 1.5rem}.util_insetXl{padding:2rem}.util_insetXl--stretch{padding:3rem 2rem}.util_insetXl--squish{padding:1rem 2rem}.util_insetXxl{padding:3rem}.util_insetXxl--stretch{padding:4.5rem 3rem}.util_insetXxl--squish{padding:1.5rem 3rem}.util_insetXxxl{padding:4rem}.util_insetXxxl--stretch{padding:6rem 4rem}.util_insetXxxl--squish{padding:2rem 4rem}::slotted(svg){vertical-align:middle}slot{pointer-events:none}.contentWrapper{display:flex;align-items:center}.contentWrapper span{display:block;height:var(--ds-size-300, 1.5rem)}.auroButton{position:relative;display:inline-flex;overflow:visible;width:calc(var(--ds-size-50, 0.25rem) + var(--ds-size-400, 2rem));height:calc(var(--ds-size-25, 0.125rem) + var(--ds-size-400, 2rem));flex-direction:row;align-items:center;justify-content:center;padding:var(--ds-auro-counter-control-padding);border:none;border-radius:var(--ds-auro-counter-control-border-radius);margin:0;cursor:pointer;gap:var(--ds-size-100, 0.5rem);line-height:unset;-webkit-touch-callout:none;user-select:none;white-space:nowrap}.auroButton:active .contentWrapper{transform:scale(0.95)}.auroButton:disabled{cursor:not-allowed;transform:unset}.auroButton:focus-visible:not(.auroButton:focus-visible:disabled){outline-offset:0;outline-style:solid;outline-width:var(--ds-size-25, 0.125rem);transform:unset}`;
+export default css`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_insetNone{padding:0}.util_insetXxxs{padding:.125rem}.util_insetXxxs--stretch{padding:.25rem .125rem}.util_insetXxxs--squish{padding:0 .125rem}.util_insetXxs{padding:.25rem}.util_insetXxs--stretch{padding:.375rem .25rem}.util_insetXxs--squish{padding:.125rem .25rem}.util_insetXs{padding:.5rem}.util_insetXs--stretch{padding:.75rem .5rem}.util_insetXs--squish{padding:.25rem .5rem}.util_insetSm{padding:.75rem}.util_insetSm--stretch{padding:1.125rem .75rem}.util_insetSm--squish{padding:.375rem .75rem}.util_insetMd{padding:1rem}.util_insetMd--stretch{padding:1.5rem 1rem}.util_insetMd--squish{padding:.5rem 1rem}.util_insetLg{padding:1.5rem}.util_insetLg--stretch{padding:2.25rem 1.5rem}.util_insetLg--squish{padding:.75rem 1.5rem}.util_insetXl{padding:2rem}.util_insetXl--stretch{padding:3rem 2rem}.util_insetXl--squish{padding:1rem 2rem}.util_insetXxl{padding:3rem}.util_insetXxl--stretch{padding:4.5rem 3rem}.util_insetXxl--squish{padding:1.5rem 3rem}.util_insetXxxl{padding:4rem}.util_insetXxxl--stretch{padding:6rem 4rem}.util_insetXxxl--squish{padding:2rem 4rem}::slotted(svg){vertical-align:middle}slot{pointer-events:none}.contentWrapper{display:flex;align-items:center}.contentWrapper span{display:block;height:var(--ds-size-300, 1.5rem)}.auroButton{position:relative;display:inline-flex;overflow:visible;width:calc(var(--ds-size-50, 0.25rem) + var(--ds-size-400, 2rem));height:calc(var(--ds-size-25, 0.125rem) + var(--ds-size-400, 2rem));flex-direction:row;align-items:center;justify-content:center;padding:var(--ds-auro-counter-control-padding);border:none;border-radius:var(--ds-auro-counter-control-border-radius);margin:0;cursor:pointer;gap:var(--ds-size-100, 0.5rem);line-height:unset;-webkit-touch-callout:none;user-select:none;white-space:nowrap}.auroButton:active .contentWrapper{transform:scale(0.95)}.auroButton:disabled{cursor:not-allowed;transform:unset}.auroButton:focus-visible:not(.auroButton:focus-visible:disabled){outline:none;transform:unset}`;

package/components/counter/src/styles/counter-button-tokens-css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export default css`:host{--ds-auro-counter-control-ui-hover: var(--ds-color-ui-bkg-hover-default, rgba(0, 0, 0, 0.06));--ds-auro-counter-control-ui-active: var(--ds-color-ui-active-default, #054687);--ds-auro-counter-control-border-active: var(--ds-color-border-active-default, #0074c8);--ds-auro-counter-control-border-hover: var(--ds-color-ui-bkg-hover-default, rgba(0, 0, 0, 0.06));--ds-auro-counter-control-ui-bkg: var(--ds-color-ui-bkg-default-default, rgba(0, 0, 0, 0.03))}`;
+export default css`:host{--ds-auro-counter-control-ui-hover: var(--ds-color-ui-bkg-hover-default, rgba(0, 0, 0, 0.06));--ds-auro-counter-control-ui-active: var(--ds-color-ui-active-default, #054687);--ds-auro-counter-control-border-hover: var(--ds-color-ui-bkg-hover-default, rgba(0, 0, 0, 0.06));--ds-auro-counter-control-ui-bkg: var(--ds-color-ui-bkg-default-default, rgba(0, 0, 0, 0.03))}`;

package/components/counter/src/styles/counter-button-tokens.css

@@ -1,7 +1,6 @@
 :host {
   --ds-auro-counter-control-ui-hover: var(--ds-color-ui-bkg-hover-default, rgba(0, 0, 0, 0.06));
   --ds-auro-counter-control-ui-active: var(--ds-color-ui-active-default, #054687);
-  --ds-auro-counter-control-border-active: var(--ds-color-border-active-default, #0074c8);
   --ds-auro-counter-control-border-hover: var(--ds-color-ui-bkg-hover-default, rgba(0, 0, 0, 0.06));
   --ds-auro-counter-control-ui-bkg: var(--ds-color-ui-bkg-default-default, rgba(0, 0, 0, 0.03));
 }

package/components/counter/src/styles/counter-button-tokens.scss

@@ -3,7 +3,6 @@
 :host {  
     --ds-auro-counter-control-ui-hover: var(--ds-color-ui-bkg-hover-default, #{$ds-color-ui-bkg-hover-default});
     --ds-auro-counter-control-ui-active: var(--ds-color-ui-active-default, #{$ds-color-ui-active-default});
-    --ds-auro-counter-control-border-active: var(--ds-color-border-active-default, #{$ds-color-border-active-default});
     --ds-auro-counter-control-border-hover: var(--ds-color-ui-bkg-hover-default, #{$ds-color-ui-bkg-hover-default});
     --ds-auro-counter-control-ui-bkg: var(--ds-color-ui-bkg-default-default, #{$ds-color-ui-bkg-default-default});
-}
+}

package/components/counter/src/styles/counter-button.css

@@ -180,8 +180,6 @@ slot {
   transform: unset;
 }
 .auroButton:focus-visible:not(.auroButton:focus-visible:disabled) {
-  outline-offset: 0;
-  outline-style: solid;
-  outline-width: var(--ds-size-25, 0.125rem);
+  outline: none;
   transform: unset;
 }

package/components/counter/src/styles/counter-button.scss

@@ -73,11 +73,9 @@ slot {
 
   &:focus-visible {
     &:not(&:disabled) {
-        outline-offset: 0;
-        outline-style: solid;
-        outline-width: var(--ds-size-25, $ds-size-25);
+        outline: none;
         transform: unset;
     }
   }
 
-}
+}

package/components/counter/src/styles/counter-wrapper.scss

@@ -26,4 +26,4 @@
 
 :host([isindropdown]) {
   padding: var(--ds-size-300, $ds-size-300);
-}
+}

package/components/counter/src/styles/style-css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export default css`.counter{display:flex;align-items:center;justify-content:space-between;column-gap:var(--ds-size-150, 0.75rem)}.content{display:flex;flex-flow:column}[name=description]::slotted(*){display:block;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-size-200, 1rem)}.quantityWrapper{width:var(--ds-size-400, 2rem);height:calc(var(--ds-size-25, 0.125rem) + var(--ds-size-400, 2rem));align-content:center;cursor:default;font-size:var(--ds-size-250, 1.25rem);text-align:center}:host{position:relative}:host::part(counterControl){display:flex;line-height:0}:host::part(controlMinus){--ds-auro-counter-control-border-radius: var(--ds-size-500, 2.5rem) 0 0 var(--ds-size-500, 2.5rem);--ds-auro-counter-control-padding: var(--ds-size-50, 0.25rem) var(--ds-size-50, 0.25rem) var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem)}:host::part(controlPlus){--ds-auro-counter-control-border-radius: 0 var(--ds-size-500, 2.5rem) var(--ds-size-500, 2.5rem) 0;--ds-auro-counter-control-padding: var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem) var(--ds-size-50, 0.25rem) var(--ds-size-50, 0.25rem)}auro-counter-button{display:flex}`;
+export default css`.counter{display:flex;align-items:center;justify-content:space-between;column-gap:var(--ds-size-150, 0.75rem)}.content{display:flex;flex-flow:column}[name=description]::slotted(*){display:block;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-size-200, 1rem)}.quantityWrapper{width:var(--ds-size-400, 2rem);height:calc(var(--ds-size-25, 0.125rem) + var(--ds-size-400, 2rem));align-content:center;cursor:default;font-size:var(--ds-size-250, 1.25rem);text-align:center}:host{position:relative}:host::part(counterControl){display:flex;border-radius:var(--ds-size-500, 2.5rem);line-height:0}:host::part(counterControl):focus-visible{outline-offset:0;outline-style:solid;outline-width:var(--ds-size-25, 0.125rem)}:host::part(controlMinus){--ds-auro-counter-control-border-radius: var(--ds-size-500, 2.5rem) 0 0 var(--ds-size-500, 2.5rem);--ds-auro-counter-control-padding: var(--ds-size-50, 0.25rem) var(--ds-size-50, 0.25rem) var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem)}:host::part(controlPlus){--ds-auro-counter-control-border-radius: 0 var(--ds-size-500, 2.5rem) var(--ds-size-500, 2.5rem) 0;--ds-auro-counter-control-padding: var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem) var(--ds-size-50, 0.25rem) var(--ds-size-50, 0.25rem)}auro-counter-button{display:flex}`;

package/components/counter/src/styles/style.css

@@ -30,8 +30,14 @@
 }
 :host::part(counterControl) {
   display: flex;
+  border-radius: var(--ds-size-500, 2.5rem);
   line-height: 0;
 }
+:host::part(counterControl):focus-visible {
+  outline-offset: 0;
+  outline-style: solid;
+  outline-width: var(--ds-size-25, 0.125rem);
+}
 :host::part(controlMinus) {
   --ds-auro-counter-control-border-radius: var(--ds-size-500, 2.5rem) 0 0 var(--ds-size-500, 2.5rem);
   --ds-auro-counter-control-padding: var(--ds-size-50, 0.25rem) var(--ds-size-50, 0.25rem) var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem);

package/components/counter/src/styles/style.scss

@@ -44,7 +44,14 @@
 
   &::part(counterControl) {
     display: flex;
+    border-radius: var(--ds-size-500, $ds-size-500);
     line-height: 0;
+
+    &:focus-visible {
+      outline-offset: 0;
+      outline-style: solid;
+      outline-width: var(--ds-size-25, $ds-size-25);
+    }
   }
 
   &::part(controlMinus) {

package/components/counter/src/styles/tokens-css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export default css`:host{--ds-auro-counter-text-default: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-counter-text-secondary: var(--ds-color-text-secondary-default, #525252);--ds-auro-counter-text-disabled: var(--ds-color-text-ui-disabled-default, #adadad);--ds-auro-counter-control-ui-active: var(--ds-color-ui-active-default, #054687);--ds-auro-counter-control-ui-hover: var(--ds-color-ui-hover-default, #054687);--ds-auro-counter-control-ui-disabled: var(--ds-color-ui-disabled-default, rgba(0, 116, 200, 0.2));--ds-auro-counter-control-ui-bkg: var(--ds-color-ui-bkg-default-default, rgba(0, 0, 0, 0.03));--ds-auro-counter-control-line-height: var(--ds-text-body-size-sm, 0.875rem);--ds-auro-counter-icon-color-default: var(--ds-color-ui-default-default, #0074c8)}`;
+export default css`:host{--ds-auro-counter-text-default: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-counter-text-secondary: var(--ds-color-text-secondary-default, #525252);--ds-auro-counter-text-disabled: var(--ds-color-text-ui-disabled-default, #adadad);--ds-auro-counter-control-ui-active: var(--ds-color-ui-active-default, #054687);--ds-auro-counter-control-ui-hover: var(--ds-color-ui-hover-default, #054687);--ds-auro-counter-control-ui-disabled: var(--ds-color-ui-disabled-default, rgba(0, 116, 200, 0.2));--ds-auro-counter-control-ui-bkg: var(--ds-color-ui-bkg-default-default, rgba(0, 0, 0, 0.03));--ds-auro-counter-control-line-height: var(--ds-text-body-size-sm, 0.875rem);--ds-auro-counter-icon-color-default: var(--ds-color-ui-default-default, #0074c8);--ds-auro-counter-control-border-active: var(--ds-color-border-active-default, #0074c8)}`;

package/components/counter/src/styles/tokens.css

@@ -8,4 +8,5 @@
   --ds-auro-counter-control-ui-bkg: var(--ds-color-ui-bkg-default-default, rgba(0, 0, 0, 0.03));
   --ds-auro-counter-control-line-height: var(--ds-text-body-size-sm, 0.875rem);
   --ds-auro-counter-icon-color-default: var(--ds-color-ui-default-default, #0074c8);
+  --ds-auro-counter-control-border-active: var(--ds-color-border-active-default, #0074c8);
 }

package/components/counter/src/styles/tokens.scss

@@ -21,4 +21,5 @@
   --ds-auro-counter-control-ui-bkg: var(--ds-color-ui-bkg-default-default, #{$ds-color-ui-bkg-default-default});
   --ds-auro-counter-control-line-height: var(--ds-text-body-size-sm, #{$ds-text-body-size-sm});
   --ds-auro-counter-icon-color-default: var(--ds-color-ui-default-default, #{$ds-color-ui-default-default});
-}
+  --ds-auro-counter-control-border-active: var(--ds-color-border-active-default, #{$ds-color-border-active-default});
+}

package/components/datepicker/.turbo/turbo-build.log

@@ -373,13 +373,13 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 
 ./src/index.js → dist...
-created dist in 10.6s
+created dist in 10.2s
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 4.5s
+created ./demo/ in 4s
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 3.6s
+created ./demo/ in 3.5s
 
 > @aurodesignsystem/auro-datepicker@3.2.0 build:docs
 > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component datepicker

package/components/datepicker/README.md

@@ -93,10 +93,10 @@ In cases where the project is not able to process JS assets, there are pre-proce
 <!-- The below content is automatically added from ../../docs/templates/componentBundleUseModBrowsers.md -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.13/dist/tokens/CSSCustomProperties.css" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@6.0.0/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-dropdown@2.0.0-beta.31/dist/auro-dropdown__bundled.js" type="module"></script>
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-input@2.0.0-beta.31/dist/auro-input__bundled.js" type="module"></script>
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-popover@2.0.0-beta.31/dist/auro-popover__bundled.js" type="module"></script>
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-datepicker@2.0.0-beta.31/dist/auro-datepicker__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-dropdown@2.0.0-beta.33/dist/auro-dropdown__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-input@2.0.0-beta.33/dist/auro-input__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-popover@2.0.0-beta.33/dist/auro-popover__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-datepicker@2.0.0-beta.33/dist/auro-datepicker__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-datepicker use cases

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

@@ -13521,6 +13521,15 @@ class AuroDropdown extends r$4$1 {
     this.noHideOnThisFocusLoss = false;
 
     this.privateDefaults();
+
+    /**
+     * @private
+     * @property {boolean} delegatesFocus - Whether the shadow root delegates focus.
+     */
+    this.constructor.shadowRootOptions = {
+      ...r$4$1.shadowRootOptions,
+      delegatesFocus: true,
+    };
   }
 
   /**
@@ -13841,7 +13850,7 @@ class AuroDropdown extends r$4$1 {
    *
    * @private
    * @method handleTriggerContentSlotChange
-   * @param {Event} event - native slotchange event
+   * @param {Event} event - Native slotchange event.
    * @returns {void}
    */
   handleTriggerContentSlotChange(event) {

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

@@ -13261,6 +13261,15 @@ class AuroDropdown extends r$4$1 {
     this.noHideOnThisFocusLoss = false;
 
     this.privateDefaults();
+
+    /**
+     * @private
+     * @property {boolean} delegatesFocus - Whether the shadow root delegates focus.
+     */
+    this.constructor.shadowRootOptions = {
+      ...r$4$1.shadowRootOptions,
+      delegatesFocus: true,
+    };
   }
 
   /**
@@ -13581,7 +13590,7 @@ class AuroDropdown extends r$4$1 {
    *
    * @private
    * @method handleTriggerContentSlotChange
-   * @param {Event} event - native slotchange event
+   * @param {Event} event - Native slotchange event.
    * @returns {void}
    */
   handleTriggerContentSlotChange(event) {

package/components/datepicker/dist/index.js

@@ -13261,6 +13261,15 @@ class AuroDropdown extends r$4$1 {
     this.noHideOnThisFocusLoss = false;
 
     this.privateDefaults();
+
+    /**
+     * @private
+     * @property {boolean} delegatesFocus - Whether the shadow root delegates focus.
+     */
+    this.constructor.shadowRootOptions = {
+      ...r$4$1.shadowRootOptions,
+      delegatesFocus: true,
+    };
   }
 
   /**
@@ -13581,7 +13590,7 @@ class AuroDropdown extends r$4$1 {
    *
    * @private
    * @method handleTriggerContentSlotChange
-   * @param {Event} event - native slotchange event
+   * @param {Event} event - Native slotchange event.
    * @returns {void}
    */
   handleTriggerContentSlotChange(event) {

package/components/dropdown/.turbo/turbo-build.log

@@ -90,13 +90,13 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 
 ./src/index.js → dist...
-created dist in 1.2s
+created dist in 1.1s
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 944ms
+created ./demo/ in 840ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 866ms
+created ./demo/ in 641ms
 
 > @aurodesignsystem/auro-dropdown@3.0.0 build:docs
 > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component dropdown

package/components/dropdown/README.md

@@ -97,7 +97,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
 <!-- The below content is automatically added from ../../docs/templates/componentBundleUseModBrowsers.md -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.9.2/dist/tokens/CSSCustomProperties.css" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.1.2/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-dropdown@2.0.0-beta.31/dist/auro-dropdown__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-dropdown@2.0.0-beta.33/dist/auro-dropdown__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-dropdown use cases

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

@@ -2783,6 +2783,15 @@ class AuroDropdown extends r$4 {
     this.noHideOnThisFocusLoss = false;
 
     this.privateDefaults();
+
+    /**
+     * @private
+     * @property {boolean} delegatesFocus - Whether the shadow root delegates focus.
+     */
+    this.constructor.shadowRootOptions = {
+      ...r$4.shadowRootOptions,
+      delegatesFocus: true,
+    };
   }
 
   /**
@@ -3103,7 +3112,7 @@ class AuroDropdown extends r$4 {
    *
    * @private
    * @method handleTriggerContentSlotChange
-   * @param {Event} event - native slotchange event
+   * @param {Event} event - Native slotchange event.
    * @returns {void}
    */
   handleTriggerContentSlotChange(event) {

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

@@ -2758,6 +2758,15 @@ class AuroDropdown extends r$4 {
     this.noHideOnThisFocusLoss = false;
 
     this.privateDefaults();
+
+    /**
+     * @private
+     * @property {boolean} delegatesFocus - Whether the shadow root delegates focus.
+     */
+    this.constructor.shadowRootOptions = {
+      ...r$4.shadowRootOptions,
+      delegatesFocus: true,
+    };
   }
 
   /**
@@ -3078,7 +3087,7 @@ class AuroDropdown extends r$4 {
    *
    * @private
    * @method handleTriggerContentSlotChange
-   * @param {Event} event - native slotchange event
+   * @param {Event} event - Native slotchange event.
    * @returns {void}
    */
   handleTriggerContentSlotChange(event) {

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

@@ -229,7 +229,7 @@ export class AuroDropdown extends LitElement {
      *
      * @private
      * @method handleTriggerContentSlotChange
-     * @param {Event} event - native slotchange event
+     * @param {Event} event - Native slotchange event.
      * @returns {void}
      */
     private handleTriggerContentSlotChange;

package/components/dropdown/dist/auro-dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"auro-dropdown.d.ts","sourceRoot":"","sources":["../src/auro-dropdown.js"],"names":[],"mappings":"AA0BA;;;;;;;;;;;;GAYG;AACH;IAgFE;QAGI;;WAEG;;;;;QAMH;;;WAGG;;;;;QAMH;;WAEG;;;;;QAMH;;WAEG;;;;;QAMH;;WAEG;;;;QAKH;;WAEG;;;;;QAMH;;WAEG;;;;;QAMH;;WAEG;;;;;QAMH;;WAEG;;;;;QAMH;;WAEG;;;;QAKH;;WAEG;;;;;QAMH;;WAEG;;;;QAKH;;WAEG;;;;;QAMH;;WAEG;;;;;QAMH;;WAEG;;;;;QAMH;;WAEG;;;;;;;;;QAWH;;WAEG;;;;QAKH;;WAEG;;;;;QAMH;;WAEG;;;;MAKN;IAED,+CAMC;IAED;;;;;;;OAOG;IACH,uBANW,MAAM,QAQhB;IA5PC,0BAA6B;IAC7B,oBAAuB;IACvB,+BAAkC;IAKpC;;;OAGG;IACH,wBA8CC;IA7CC,kBAAqB;IACrB,iBAAoB;IACpB,kBAAqB;IACrB,eAAkB;IAClB,eAAkB;IAClB,kBAA+B;IAC/B,iBAAoB;IAEpB,kBAAqB;IAErB;;OAEG;IACH,0BAA8B;IAE9B;;OAEG;IACH,2BAAmC;IAEnC;;OAEG;IACH,qBAAiD;IAEjD;;OAEG;IACH,gBAAmC;IAEnC;;OAEG;IACH,sBAKC;IAMD,aAAyE;IAG3E;;;OAGG;IACH,QAFa,IAAI,CAIhB;IAED;;;OAGG;IACH,QAFa,IAAI,CAIhB;IA6LD,sCAYC;IAED,qBAMC;IAJC,gBAA0C;IAM5C;;;;OAIG;IACH,uBAEC;IAED;;;;;OAKG;IACH,4BAiBC;IAED;;;;;;;;;;;OAWG;IACH,uCAuBC;IAnBG,yBAA+B;IAqBnC;;;;;;;;;;;OAWG;IACH,0BAMC;IAGD,4CAoDC;CACF;2BA/c0B,KAAK"}
+{"version":3,"file":"auro-dropdown.d.ts","sourceRoot":"","sources":["../src/auro-dropdown.js"],"names":[],"mappings":"AAyBA;;;;;;;;;;;;GAYG;AACH;IAyFE;QAGI;;WAEG;;;;;QAMH;;;WAGG;;;;;QAMH;;WAEG;;;;;QAMH;;WAEG;;;;;QAMH;;WAEG;;;;QAKH;;WAEG;;;;;QAMH;;WAEG;;;;;QAMH;;WAEG;;;;;QAMH;;WAEG;;;;;QAMH;;WAEG;;;;QAKH;;WAEG;;;;;QAMH;;WAEG;;;;QAKH;;WAEG;;;;;QAMH;;WAEG;;;;;QAMH;;WAEG;;;;;QAMH;;WAEG;;;;;;;;;QAWH;;WAEG;;;;QAKH;;WAEG;;;;;QAMH;;WAEG;;;;MAKN;IAED,+CAMC;IAED;;;;;;;OAOG;IACH,uBANW,MAAM,QAQhB;IArQC,0BAA6B;IAC7B,oBAAuB;IACvB,+BAAkC;IAcpC;;;OAGG;IACH,wBA8CC;IA7CC,kBAAqB;IACrB,iBAAoB;IACpB,kBAAqB;IACrB,eAAkB;IAClB,eAAkB;IAClB,kBAA+B;IAC/B,iBAAoB;IAEpB,kBAAqB;IAErB;;OAEG;IACH,0BAA8B;IAE9B;;OAEG;IACH,2BAAmC;IAEnC;;OAEG;IACH,qBAAiD;IAEjD;;OAEG;IACH,gBAAmC;IAEnC;;OAEG;IACH,sBAKC;IAMD,aAAyE;IAG3E;;;OAGG;IACH,QAFa,IAAI,CAIhB;IAED;;;OAGG;IACH,QAFa,IAAI,CAIhB;IA6LD,sCAYC;IAED,qBAMC;IAJC,gBAA0C;IAM5C;;;;OAIG;IACH,uBAEC;IAED;;;;;OAKG;IACH,4BAiBC;IAED;;;;;;;;;;;OAWG;IACH,uCAuBC;IAnBG,yBAA+B;IAqBnC;;;;;;;;;;;OAWG;IACH,0BAMC;IAGD,4CAoDC;CACF;2BAxd0B,KAAK"}

package/components/dropdown/dist/index.js

@@ -2758,6 +2758,15 @@ class AuroDropdown extends r$4 {
     this.noHideOnThisFocusLoss = false;
 
     this.privateDefaults();
+
+    /**
+     * @private
+     * @property {boolean} delegatesFocus - Whether the shadow root delegates focus.
+     */
+    this.constructor.shadowRootOptions = {
+      ...r$4.shadowRootOptions,
+      delegatesFocus: true,
+    };
   }
 
   /**
@@ -3078,7 +3087,7 @@ class AuroDropdown extends r$4 {
    *
    * @private
    * @method handleTriggerContentSlotChange
-   * @param {Event} event - native slotchange event
+   * @param {Event} event - Native slotchange event.
    * @returns {void}
    */
   handleTriggerContentSlotChange(event) {