@aurodesignsystem/auro-formkit 1.6.0-beta.8 → 2.0.0-beta.1

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

@@ -13,7 +13,7 @@
 }
 .trigger:focus-within:not(:active) {
   --ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);
-  box-shadow: inset 0 0 0 1px var(--ds-color-border-ui-focus-default, #2c67b5);
+  outline: 1px solid var(--ds-color-border-ui-focus-default, #2c67b5);
 }
 .trigger:hover {
   --ds-auro-dropdown-trigger-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03));
@@ -43,15 +43,14 @@
   --ds-auro-dropdown-trigger-border-color: var(--ds-color-border-error-default, #cc1816);
 }
 :host([error]) .trigger {
-  box-shadow: inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color);
+  outline: solid 1px var(--ds-auro-dropdown-trigger-border-color);
 }
-:host([error]) .trigger:focus-within {
-  --ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);
-  box-shadow: none;
+:host([error]) .trigger:focus-within, :host([error]) .trigger:active {
+  --ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #0074c8);
 }
 :host([error]) .trigger:active {
-  --ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);
-  box-shadow: inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color);
+  box-shadow: none;
+  outline: none;
 }
 
 :host([disabled][common]),

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

@@ -24,7 +24,7 @@
   &:focus-within {
     &:not(:active) {
       --ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #{$ds-color-border-ui-focus-default});
-      box-shadow: inset 0 0 0 1px var(--ds-color-border-ui-focus-default, #{$ds-color-border-ui-focus-default});
+      outline: 1px solid var(--ds-color-border-ui-focus-default, #{$ds-color-border-ui-focus-default});
     }
   }
 
@@ -59,16 +59,16 @@
   --ds-auro-dropdown-trigger-border-color: var(--ds-color-border-error-default, #{$ds-color-border-error-default});
 
   .trigger {
-    box-shadow: inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color);
+    outline: solid 1px var(--ds-auro-dropdown-trigger-border-color);
 
-    &:focus-within {
-      --ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #{$ds-color-border-ui-focus-default});
-      box-shadow: none;
+    &:focus-within,
+    &:active {
+      --ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #{$ds-color-border-active-default});
     }
 
     &:active {
-      --ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #{$ds-color-border-ui-focus-default});
-      box-shadow: inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color);
+      box-shadow: none;
+      outline: none;
     }
   }
 }

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export default css`:host{position:relative;display:inline-block;max-width:100%}:host([fluid]){display:block}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);white-space:normal}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`;
+export default css`:host{position:relative;display:inline-block;max-width:100%}:host([fluid]){display:block}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);white-space:normal}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;overflow:hidden;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`;

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

@@ -45,6 +45,7 @@
 /* stylelint-disable selector-id-pattern */
 #showStateIcon {
   display: flex;
+  overflow: hidden;
   height: 100%;
   align-items: center;
   margin-left: var(--ds-size-100, 0.5rem);

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

@@ -62,6 +62,7 @@
 /* stylelint-disable selector-id-pattern */
 #showStateIcon {
   display: flex;
+  overflow: hidden;
   height: 100%;
   align-items: center;
   margin-left: var(--ds-size-100, $ds-size-100);

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

@@ -69,13 +69,13 @@ Run in verbose mode to see all warnings.
 
 
 ./src/index.js → dist...
-created dist in 511ms
+created dist in 577ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 187ms
+created ./demo/ in 225ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 172ms
+created ./demo/ in 189ms
 
 > @auro-formkit/auro-form@1.0.0 build:docs
 > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component form

package/components/form/.turbo/turbo-bundler.log

@@ -4,10 +4,10 @@
 
 
 ./src/index.js → dist...
-created dist in 578ms
+created dist in 404ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 330ms
+created ./demo/ in 277ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 218ms
+created ./demo/ in 263ms

package/components/input/.turbo/turbo-build$colon$sass.log

@@ -58,10 +58,10 @@ DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Da
 More info and automated migrator: https://sass-lang.com/d/import
 
   ╷
-2 │ @import '@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
+4 │ @import '@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
   │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
-    src/styles/input.scss 2:9  root stylesheet
+    src/styles/input.scss 4:9  root stylesheet
 
 DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 

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

@@ -72,10 +72,10 @@ DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Da
 More info and automated migrator: https://sass-lang.com/d/import
 
   ╷
-2 │ @import '@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
+4 │ @import '@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
   │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
-    src/styles/input.scss 2:9  root stylesheet
+    src/styles/input.scss 4:9  root stylesheet
 
 DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 
@@ -166,13 +166,13 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 
 ./src/index.js → dist...
-created dist in 1.4s
+created dist in 1.3s
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 1.1s
+created ./demo/ in 986ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 1s
+created ./demo/ in 726ms
 
 > @auro-formkit/auro-input@4.2.0 build:docs
 > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component input
@@ -227,9 +227,11 @@ Retrieving latest "/home/runner/work/auro-formkit/auro-formkit/components/input/
   ⁕ FILE:src=../apiExamples/programmaticValue.html 
   ⁕ FILE:src=../apiExamples/value.html 
   ⁕ FILE:src=../apiExamples/maxDate.html 
-  ⁕ FILE:src=../apiExamples/maxNumeric.html 
+  ⁕ FILE:src=../apiExamples/maxNumber.html 
+  ⁕ FILE:src=../apiExamples/maxLength.html 
   ⁕ FILE:src=../apiExamples/minDate.html 
-  ⁕ FILE:src=../apiExamples/minNumeric.html 
+  ⁕ FILE:src=../apiExamples/minNumber.html 
+  ⁕ FILE:src=../apiExamples/minLength.html 
   ⁕ FILE:src=../apiExamples/pattern.html 
   ⁕ FILE:src=../apiExamples/borderless.html 
   ⁕ FILE:src=../apiExamples/readonly.html 
@@ -242,8 +244,6 @@ Retrieving latest "/home/runner/work/auro-formkit/auro-formkit/components/input/
   ⁕ FILE:src=../apiExamples/password.html 
   ⁕ FILE:src=../apiExamples/email.html 
   ⁕ FILE:src=../apiExamples/number.html 
-  ⁕ FILE:src=../apiExamples/maxLength.html 
-  ⁕ FILE:src=../apiExamples/minLength.html 
   ⁕ FILE:src=../apiExamples/creditCard.html 
   ⁕ FILE:src=../apiExamples/creditCardIcon.html 
   ⁕ FILE:src=../apiExamples/monthDayYear.html 
@@ -253,6 +253,7 @@ Retrieving latest "/home/runner/work/auro-formkit/auro-formkit/components/input/
   ⁕ FILE:src=../apiExamples/month.html 
   ⁕ FILE:src=../apiExamples/year.html 
   ⁕ FILE:src=../apiExamples/fullYear.html 
+  ⁕ FILE:src=../apiExamples/resetState.html 
   ⁕ FILE:src=../apiExamples/swapValue.html 
   ⁕ CODE:src=../apiExamples/basic.html 
   ⁕ CODE:src=../apiExamples/disabled.html 
@@ -261,9 +262,11 @@ Retrieving latest "/home/runner/work/auro-formkit/auro-formkit/components/input/
   ⁕ CODE:src=../apiExamples/value.html 
   ⁕ CODE:src=../apiExamples/value.js 
   ⁕ CODE:src=../apiExamples/maxDate.html 
-  ⁕ CODE:src=../apiExamples/maxNumeric.html 
+  ⁕ CODE:src=../apiExamples/maxNumber.html 
+  ⁕ CODE:src=../apiExamples/maxLength.html 
   ⁕ CODE:src=../apiExamples/minDate.html 
-  ⁕ CODE:src=../apiExamples/minNumeric.html 
+  ⁕ CODE:src=../apiExamples/minNumber.html 
+  ⁕ CODE:src=../apiExamples/minLength.html 
   ⁕ CODE:src=../apiExamples/pattern.html 
   ⁕ CODE:src=../apiExamples/borderless.html 
   ⁕ CODE:src=../apiExamples/readonly.html 
@@ -278,8 +281,6 @@ Retrieving latest "/home/runner/work/auro-formkit/auro-formkit/components/input/
   ⁕ CODE:src=../apiExamples/password.html 
   ⁕ CODE:src=../apiExamples/email.html 
   ⁕ CODE:src=../apiExamples/number.html 
-  ⁕ CODE:src=../apiExamples/maxLength.html 
-  ⁕ CODE:src=../apiExamples/minLength.html 
   ⁕ CODE:src=../apiExamples/creditCard.html 
   ⁕ CODE:src=../apiExamples/creditCardIcon.html 
   ⁕ CODE:src=../apiExamples/monthDayYear.html 
@@ -289,6 +290,8 @@ Retrieving latest "/home/runner/work/auro-formkit/auro-formkit/components/input/
   ⁕ CODE:src=../apiExamples/month.html 
   ⁕ CODE:src=../apiExamples/year.html 
   ⁕ CODE:src=../apiExamples/fullYear.html 
+  ⁕ CODE:src=../apiExamples/resetState.html 
+  ⁕ CODE:src=../apiExamples/resetState.js 
   ⁕ CODE:src=../apiExamples/swapValue.html 
   ⁕ CODE:src=../apiExamples/swapValue.js 
   ⁕ CODE:src=../src/styles/tokens.scss 

package/components/input/.turbo/turbo-bundler.log

@@ -4,10 +4,10 @@
 
 
 ./src/index.js → dist...
-created dist in 1.3s
+created dist in 1.6s
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 882ms
+created ./demo/ in 792ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 745ms
+created ./demo/ in 670ms

package/components/input/demo/api.js

@@ -3,6 +3,7 @@ import { customError } from "../apiExamples/error";
 import { setReadonlyValue } from "../apiExamples/readonly";
 import { swapInputValues } from "../apiExamples/swapValue";
 import { programmaticallySetValue } from "../apiExamples/value";
+import { resetStateExample } from "../apiExamples/resetState";
 import './index.js';
 
 export function initExamples(initCount) {
@@ -14,6 +15,7 @@ export function initExamples(initCount) {
     setReadonlyValue();
     swapInputValues();
     programmaticallySetValue();
+    resetStateExample();
   } catch (error) {
     if (initCount <= 20) {
       // setTimeout handles issue where content is sometimes loaded after the functions get called