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

package/components/counter/package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "@alaskaairux/icons": "^4.44.1",
     "@aurodesignsystem/auro-button": "^8.2.1",
+    "@aurodesignsystem/auro-dropdown": "*",
     "chalk": "^5.2.0",
     "lit": "^3.2.1"
   },

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 7.7s
+created dist in 10.6s
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 3.9s
+created ./demo/ in 4.5s
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 3.4s
+created ./demo/ in 3.6s
 
 > @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

@@ -91,12 +91,12 @@ In cases where the project is not able to process JS assets, there are pre-proce
 
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/componentBundleUseModBrowsers.md) -->
 <!-- The below content is automatically added from ../../docs/templates/componentBundleUseModBrowsers.md -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.12.1/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.29/dist/auro-dropdown__bundled.js" type="module"></script>
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-input@2.0.0-beta.29/dist/auro-input__bundled.js" type="module"></script>
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-popover@2.0.0-beta.29/dist/auro-popover__bundled.js" type="module"></script>
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-datepicker@2.0.0-beta.29/dist/auro-datepicker__bundled.js" type="module"></script>
+<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>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-datepicker use cases

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

@@ -957,7 +957,7 @@ class UtilitiesCalendarRender {
   }
 }
 
-var styleCss$a = i$g`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}[auro-input]::part(iconContainer){top:0;display:flex;height:100%;align-items:center}[auro-input]::part(accentIcon){transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}[auro-input]::part(helpText){display:none}[auro-input]::part(wrapper){border-width:0 !important}.outerWrapper{position:relative}.dpTriggerContent{display:flex;flex-direction:row}.dpTriggerContent [auro-input]{flex:1}.dpTriggerContent [auro-input]:first-of-type{margin-right:var(--ds-size-150, 0.75rem)}.dpTriggerContent [auro-input]:nth-child(2){margin-left:var(--ds-size-150, 0.75rem)}.dpTriggerContent [auro-input]:nth-child(2)::part(accentIcon){display:none}.dpTriggerContent [auro-input]:nth-child(2)::part(label){left:0;width:100%}.dpTriggerContent [auro-input]:nth-child(2)::part(input){padding-left:0}.dpTriggerContent [auro-input]:nth-child(2):before{position:absolute;top:13px;left:calc(var(--ds-size-150, 0.75rem)*-1);display:block;width:1px;height:2rem;content:""}:host([range]) [auro-input]{max-width:50%}@media screen and (max-width: 576px){::part(popover){position:fixed !important;top:0 !important;left:0 !important;width:100vw !important;height:100vh !important;margin-bottom:var(--ds-size-200, 1rem);transform:unset !important}.calendarWrapper{display:flex;height:100dvh;flex-direction:row;justify-content:center}}`;
+var styleCss$a = i$g`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}[auro-input]::part(iconContainer){top:0;display:flex;height:100%;align-items:center}[auro-input]::part(accentIcon){transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}[auro-input]::part(helpText){display:none}[auro-input]::part(wrapper){border-width:0 !important}[auro-input]:not(:first-child)::part(wrapper)::after{position:absolute;left:50%;width:95%;height:1px;background-color:var(--ds-auro-datepicker-range-input-divider-color);content:"";transform:translateX(-50%)}.outerWrapper{position:relative;container:outerwrapper/inline-size}.dpTriggerContent{display:flex;flex-direction:column}.dpTriggerContent [auro-input]{flex:1}@container outerwrapper (min-width: 390px){.dpTriggerContent{flex-direction:row}[auro-input]:first-of-type{margin-right:var(--ds-size-150, 0.75rem)}[auro-input]:nth-child(2){margin-left:var(--ds-size-150, 0.75rem)}[auro-input]:nth-child(2)::part(accentIcon){display:none}[auro-input]:nth-child(2)::part(label){left:0;width:100%}[auro-input]:nth-child(2)::part(input){padding-left:0}[auro-input]:nth-child(2):before{position:absolute;top:13px;left:calc(var(--ds-size-150, 0.75rem)*-1);display:block;width:1px;height:2rem;content:""}[auro-input]:not(:first-child)::part(wrapper):after{content:none}:host([range]) [auro-input]{max-width:50%}}@media screen and (max-width: 576px){::part(popover){position:fixed !important;top:0 !important;left:0 !important;width:100vw !important;height:100vh !important;margin-bottom:var(--ds-size-200, 1rem);transform:unset !important}.calendarWrapper{display:flex;height:100dvh;flex-direction:row;justify-content:center}}`;
 
 var colorCss$a = i$g`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}[auro-input]::part(wrapper){--ds-auro-input-border-color: transparent;--ds-auro-input-container-color: transparent}.dpTriggerContent [auro-input]:nth-child(2):before{background-color:var(--ds-auro-datepicker-range-input-divider-color)}.placeholderDate{color:var(--ds-auro-datepicker-placeholder-color)}`;
 
@@ -13199,7 +13199,7 @@ const t$6=globalThis,i$1$1=t$6.trustedTypes,s$6=i$1$1?i$1$1.createPolicy("lit-ht
 
 var colorCss$1$1 = i$3$1`:host([error]){--ds-auro-helptext-color: var(--ds-color-text-error-default, #cc1816)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
 
-var styleCss$1$1 = i$3$1`.helptext-wrapper{display:none;margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-size-200, 1rem)}:host([large]) .helptext-wrapper{font-size:var(--ds-text-body-size-default, 1rem)}.helptext-wrapper[visible]{display:block}::slotted(p){margin-block:0}`;
+var styleCss$1$1 = i$3$1`.helptext-wrapper{display:none;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-size-200, 1rem)}:host([large]) .helptext-wrapper{font-size:var(--ds-text-body-size-default, 1rem)}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
 
 var tokensCss$5 = i$3$1`:host{--ds-auro-helptext-color: var(--ds-color-text-tertiary-default, #6a717c)}`;
 
@@ -17970,7 +17970,7 @@ const t=globalThis,i$1=t.trustedTypes,s=i$1?i$1.createPolicy("lit-html",{createH
 
 var colorCss = i$3`:host([error]){--ds-auro-helptext-color: var(--ds-color-text-error-default, #cc1816)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
 
-var styleCss = i$3`.helptext-wrapper{display:none;margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-size-200, 1rem)}:host([large]) .helptext-wrapper{font-size:var(--ds-text-body-size-default, 1rem)}.helptext-wrapper[visible]{display:block}::slotted(p){margin-block:0}`;
+var styleCss = i$3`.helptext-wrapper{display:none;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-size-200, 1rem)}:host([large]) .helptext-wrapper{font-size:var(--ds-text-body-size-default, 1rem)}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
 
 var tokensCss = i$3`:host{--ds-auro-helptext-color: var(--ds-color-text-tertiary-default, #6a717c)}`;
 

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

@@ -697,7 +697,7 @@ class UtilitiesCalendarRender {
   }
 }
 
-var styleCss$a = i$g`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}[auro-input]::part(iconContainer){top:0;display:flex;height:100%;align-items:center}[auro-input]::part(accentIcon){transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}[auro-input]::part(helpText){display:none}[auro-input]::part(wrapper){border-width:0 !important}.outerWrapper{position:relative}.dpTriggerContent{display:flex;flex-direction:row}.dpTriggerContent [auro-input]{flex:1}.dpTriggerContent [auro-input]:first-of-type{margin-right:var(--ds-size-150, 0.75rem)}.dpTriggerContent [auro-input]:nth-child(2){margin-left:var(--ds-size-150, 0.75rem)}.dpTriggerContent [auro-input]:nth-child(2)::part(accentIcon){display:none}.dpTriggerContent [auro-input]:nth-child(2)::part(label){left:0;width:100%}.dpTriggerContent [auro-input]:nth-child(2)::part(input){padding-left:0}.dpTriggerContent [auro-input]:nth-child(2):before{position:absolute;top:13px;left:calc(var(--ds-size-150, 0.75rem)*-1);display:block;width:1px;height:2rem;content:""}:host([range]) [auro-input]{max-width:50%}@media screen and (max-width: 576px){::part(popover){position:fixed !important;top:0 !important;left:0 !important;width:100vw !important;height:100vh !important;margin-bottom:var(--ds-size-200, 1rem);transform:unset !important}.calendarWrapper{display:flex;height:100dvh;flex-direction:row;justify-content:center}}`;
+var styleCss$a = i$g`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}[auro-input]::part(iconContainer){top:0;display:flex;height:100%;align-items:center}[auro-input]::part(accentIcon){transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}[auro-input]::part(helpText){display:none}[auro-input]::part(wrapper){border-width:0 !important}[auro-input]:not(:first-child)::part(wrapper)::after{position:absolute;left:50%;width:95%;height:1px;background-color:var(--ds-auro-datepicker-range-input-divider-color);content:"";transform:translateX(-50%)}.outerWrapper{position:relative;container:outerwrapper/inline-size}.dpTriggerContent{display:flex;flex-direction:column}.dpTriggerContent [auro-input]{flex:1}@container outerwrapper (min-width: 390px){.dpTriggerContent{flex-direction:row}[auro-input]:first-of-type{margin-right:var(--ds-size-150, 0.75rem)}[auro-input]:nth-child(2){margin-left:var(--ds-size-150, 0.75rem)}[auro-input]:nth-child(2)::part(accentIcon){display:none}[auro-input]:nth-child(2)::part(label){left:0;width:100%}[auro-input]:nth-child(2)::part(input){padding-left:0}[auro-input]:nth-child(2):before{position:absolute;top:13px;left:calc(var(--ds-size-150, 0.75rem)*-1);display:block;width:1px;height:2rem;content:""}[auro-input]:not(:first-child)::part(wrapper):after{content:none}:host([range]) [auro-input]{max-width:50%}}@media screen and (max-width: 576px){::part(popover){position:fixed !important;top:0 !important;left:0 !important;width:100vw !important;height:100vh !important;margin-bottom:var(--ds-size-200, 1rem);transform:unset !important}.calendarWrapper{display:flex;height:100dvh;flex-direction:row;justify-content:center}}`;
 
 var colorCss$a = i$g`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}[auro-input]::part(wrapper){--ds-auro-input-border-color: transparent;--ds-auro-input-container-color: transparent}.dpTriggerContent [auro-input]:nth-child(2):before{background-color:var(--ds-auro-datepicker-range-input-divider-color)}.placeholderDate{color:var(--ds-auro-datepicker-placeholder-color)}`;
 
@@ -12939,7 +12939,7 @@ const t$6=globalThis,i$1$1=t$6.trustedTypes,s$6=i$1$1?i$1$1.createPolicy("lit-ht
 
 var colorCss$1$1 = i$3$1`:host([error]){--ds-auro-helptext-color: var(--ds-color-text-error-default, #cc1816)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
 
-var styleCss$1$1 = i$3$1`.helptext-wrapper{display:none;margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-size-200, 1rem)}:host([large]) .helptext-wrapper{font-size:var(--ds-text-body-size-default, 1rem)}.helptext-wrapper[visible]{display:block}::slotted(p){margin-block:0}`;
+var styleCss$1$1 = i$3$1`.helptext-wrapper{display:none;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-size-200, 1rem)}:host([large]) .helptext-wrapper{font-size:var(--ds-text-body-size-default, 1rem)}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
 
 var tokensCss$5 = i$3$1`:host{--ds-auro-helptext-color: var(--ds-color-text-tertiary-default, #6a717c)}`;
 
@@ -17710,7 +17710,7 @@ const t=globalThis,i$1=t.trustedTypes,s=i$1?i$1.createPolicy("lit-html",{createH
 
 var colorCss = i$3`:host([error]){--ds-auro-helptext-color: var(--ds-color-text-error-default, #cc1816)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
 
-var styleCss = i$3`.helptext-wrapper{display:none;margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-size-200, 1rem)}:host([large]) .helptext-wrapper{font-size:var(--ds-text-body-size-default, 1rem)}.helptext-wrapper[visible]{display:block}::slotted(p){margin-block:0}`;
+var styleCss = i$3`.helptext-wrapper{display:none;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-size-200, 1rem)}:host([large]) .helptext-wrapper{font-size:var(--ds-text-body-size-default, 1rem)}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
 
 var tokensCss = i$3`:host{--ds-auro-helptext-color: var(--ds-color-text-tertiary-default, #6a717c)}`;
 

package/components/datepicker/dist/index.js

@@ -697,7 +697,7 @@ class UtilitiesCalendarRender {
   }
 }
 
-var styleCss$a = i$g`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}[auro-input]::part(iconContainer){top:0;display:flex;height:100%;align-items:center}[auro-input]::part(accentIcon){transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}[auro-input]::part(helpText){display:none}[auro-input]::part(wrapper){border-width:0 !important}.outerWrapper{position:relative}.dpTriggerContent{display:flex;flex-direction:row}.dpTriggerContent [auro-input]{flex:1}.dpTriggerContent [auro-input]:first-of-type{margin-right:var(--ds-size-150, 0.75rem)}.dpTriggerContent [auro-input]:nth-child(2){margin-left:var(--ds-size-150, 0.75rem)}.dpTriggerContent [auro-input]:nth-child(2)::part(accentIcon){display:none}.dpTriggerContent [auro-input]:nth-child(2)::part(label){left:0;width:100%}.dpTriggerContent [auro-input]:nth-child(2)::part(input){padding-left:0}.dpTriggerContent [auro-input]:nth-child(2):before{position:absolute;top:13px;left:calc(var(--ds-size-150, 0.75rem)*-1);display:block;width:1px;height:2rem;content:""}:host([range]) [auro-input]{max-width:50%}@media screen and (max-width: 576px){::part(popover){position:fixed !important;top:0 !important;left:0 !important;width:100vw !important;height:100vh !important;margin-bottom:var(--ds-size-200, 1rem);transform:unset !important}.calendarWrapper{display:flex;height:100dvh;flex-direction:row;justify-content:center}}`;
+var styleCss$a = i$g`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}[auro-input]::part(iconContainer){top:0;display:flex;height:100%;align-items:center}[auro-input]::part(accentIcon){transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}[auro-input]::part(helpText){display:none}[auro-input]::part(wrapper){border-width:0 !important}[auro-input]:not(:first-child)::part(wrapper)::after{position:absolute;left:50%;width:95%;height:1px;background-color:var(--ds-auro-datepicker-range-input-divider-color);content:"";transform:translateX(-50%)}.outerWrapper{position:relative;container:outerwrapper/inline-size}.dpTriggerContent{display:flex;flex-direction:column}.dpTriggerContent [auro-input]{flex:1}@container outerwrapper (min-width: 390px){.dpTriggerContent{flex-direction:row}[auro-input]:first-of-type{margin-right:var(--ds-size-150, 0.75rem)}[auro-input]:nth-child(2){margin-left:var(--ds-size-150, 0.75rem)}[auro-input]:nth-child(2)::part(accentIcon){display:none}[auro-input]:nth-child(2)::part(label){left:0;width:100%}[auro-input]:nth-child(2)::part(input){padding-left:0}[auro-input]:nth-child(2):before{position:absolute;top:13px;left:calc(var(--ds-size-150, 0.75rem)*-1);display:block;width:1px;height:2rem;content:""}[auro-input]:not(:first-child)::part(wrapper):after{content:none}:host([range]) [auro-input]{max-width:50%}}@media screen and (max-width: 576px){::part(popover){position:fixed !important;top:0 !important;left:0 !important;width:100vw !important;height:100vh !important;margin-bottom:var(--ds-size-200, 1rem);transform:unset !important}.calendarWrapper{display:flex;height:100dvh;flex-direction:row;justify-content:center}}`;
 
 var colorCss$a = i$g`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}[auro-input]::part(wrapper){--ds-auro-input-border-color: transparent;--ds-auro-input-container-color: transparent}.dpTriggerContent [auro-input]:nth-child(2):before{background-color:var(--ds-auro-datepicker-range-input-divider-color)}.placeholderDate{color:var(--ds-auro-datepicker-placeholder-color)}`;
 
@@ -12939,7 +12939,7 @@ const t$6=globalThis,i$1$1=t$6.trustedTypes,s$6=i$1$1?i$1$1.createPolicy("lit-ht
 
 var colorCss$1$1 = i$3$1`:host([error]){--ds-auro-helptext-color: var(--ds-color-text-error-default, #cc1816)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
 
-var styleCss$1$1 = i$3$1`.helptext-wrapper{display:none;margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-size-200, 1rem)}:host([large]) .helptext-wrapper{font-size:var(--ds-text-body-size-default, 1rem)}.helptext-wrapper[visible]{display:block}::slotted(p){margin-block:0}`;
+var styleCss$1$1 = i$3$1`.helptext-wrapper{display:none;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-size-200, 1rem)}:host([large]) .helptext-wrapper{font-size:var(--ds-text-body-size-default, 1rem)}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
 
 var tokensCss$5 = i$3$1`:host{--ds-auro-helptext-color: var(--ds-color-text-tertiary-default, #6a717c)}`;
 
@@ -17710,7 +17710,7 @@ const t=globalThis,i$1=t.trustedTypes,s=i$1?i$1.createPolicy("lit-html",{createH
 
 var colorCss = i$3`:host([error]){--ds-auro-helptext-color: var(--ds-color-text-error-default, #cc1816)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
 
-var styleCss = i$3`.helptext-wrapper{display:none;margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-size-200, 1rem)}:host([large]) .helptext-wrapper{font-size:var(--ds-text-body-size-default, 1rem)}.helptext-wrapper[visible]{display:block}::slotted(p){margin-block:0}`;
+var styleCss = i$3`.helptext-wrapper{display:none;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-size-200, 1rem)}:host([large]) .helptext-wrapper{font-size:var(--ds-text-body-size-default, 1rem)}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
 
 var tokensCss = i$3`:host{--ds-auro-helptext-color: var(--ds-color-text-tertiary-default, #6a717c)}`;
 

package/components/datepicker/package.json

@@ -26,8 +26,8 @@
     "wc-range-datepicker": "^1.3.0"
   },
   "peerDependencies": {
-    "@aurodesignsystem/design-tokens": "^4.12.1",
-    "@aurodesignsystem/webcorestylesheets": "^5.1.2"
+    "@aurodesignsystem/design-tokens": "^4.13",
+    "@aurodesignsystem/webcorestylesheets": "^6.0.0"
   },
   "devDependencies": {
     "@auro-formkit/build-tools": "*",

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export default css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}[auro-input]::part(iconContainer){top:0;display:flex;height:100%;align-items:center}[auro-input]::part(accentIcon){transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}[auro-input]::part(helpText){display:none}[auro-input]::part(wrapper){border-width:0 !important}.outerWrapper{position:relative}.dpTriggerContent{display:flex;flex-direction:row}.dpTriggerContent [auro-input]{flex:1}.dpTriggerContent [auro-input]:first-of-type{margin-right:var(--ds-size-150, 0.75rem)}.dpTriggerContent [auro-input]:nth-child(2){margin-left:var(--ds-size-150, 0.75rem)}.dpTriggerContent [auro-input]:nth-child(2)::part(accentIcon){display:none}.dpTriggerContent [auro-input]:nth-child(2)::part(label){left:0;width:100%}.dpTriggerContent [auro-input]:nth-child(2)::part(input){padding-left:0}.dpTriggerContent [auro-input]:nth-child(2):before{position:absolute;top:13px;left:calc(var(--ds-size-150, 0.75rem)*-1);display:block;width:1px;height:2rem;content:""}:host([range]) [auro-input]{max-width:50%}@media screen and (max-width: 576px){::part(popover){position:fixed !important;top:0 !important;left:0 !important;width:100vw !important;height:100vh !important;margin-bottom:var(--ds-size-200, 1rem);transform:unset !important}.calendarWrapper{display:flex;height:100dvh;flex-direction:row;justify-content:center}}`;
+export default css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}[auro-input]::part(iconContainer){top:0;display:flex;height:100%;align-items:center}[auro-input]::part(accentIcon){transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}[auro-input]::part(helpText){display:none}[auro-input]::part(wrapper){border-width:0 !important}[auro-input]:not(:first-child)::part(wrapper)::after{position:absolute;left:50%;width:95%;height:1px;background-color:var(--ds-auro-datepicker-range-input-divider-color);content:"";transform:translateX(-50%)}.outerWrapper{position:relative;container:outerwrapper/inline-size}.dpTriggerContent{display:flex;flex-direction:column}.dpTriggerContent [auro-input]{flex:1}@container outerwrapper (min-width: 390px){.dpTriggerContent{flex-direction:row}[auro-input]:first-of-type{margin-right:var(--ds-size-150, 0.75rem)}[auro-input]:nth-child(2){margin-left:var(--ds-size-150, 0.75rem)}[auro-input]:nth-child(2)::part(accentIcon){display:none}[auro-input]:nth-child(2)::part(label){left:0;width:100%}[auro-input]:nth-child(2)::part(input){padding-left:0}[auro-input]:nth-child(2):before{position:absolute;top:13px;left:calc(var(--ds-size-150, 0.75rem)*-1);display:block;width:1px;height:2rem;content:""}[auro-input]:not(:first-child)::part(wrapper):after{content:none}:host([range]) [auro-input]{max-width:50%}}@media screen and (max-width: 576px){::part(popover){position:fixed !important;top:0 !important;left:0 !important;width:100vw !important;height:100vh !important;margin-bottom:var(--ds-size-200, 1rem);transform:unset !important}.calendarWrapper{display:flex;height:100dvh;flex-direction:row;justify-content:center}}`;

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

@@ -44,48 +44,74 @@
 [auro-input]::part(wrapper) {
   border-width: 0 !important;
 }
+[auro-input]:not(:first-child)::part(wrapper) {
+  /* stylelint-disable-next-line selector-pseudo-element-colon-notation */
+}
+[auro-input]:not(:first-child)::part(wrapper)::after {
+  position: absolute;
+  left: 50%;
+  width: 95%;
+  height: 1px;
+  background-color: var(--ds-auro-datepicker-range-input-divider-color);
+  content: "";
+  transform: translateX(-50%);
+}
 
 .outerWrapper {
   position: relative;
+  container: outerwrapper/inline-size;
 }
 
 .dpTriggerContent {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
 }
 .dpTriggerContent [auro-input] {
   flex: 1;
 }
-.dpTriggerContent [auro-input]:first-of-type {
-  margin-right: var(--ds-size-150, 0.75rem);
-}
-.dpTriggerContent [auro-input]:nth-child(2) {
-  margin-left: var(--ds-size-150, 0.75rem);
-}
-.dpTriggerContent [auro-input]:nth-child(2)::part(accentIcon) {
-  display: none;
-}
-.dpTriggerContent [auro-input]:nth-child(2)::part(label) {
-  left: 0;
-  width: 100%;
-}
-.dpTriggerContent [auro-input]:nth-child(2)::part(input) {
-  padding-left: 0;
-}
-.dpTriggerContent [auro-input]:nth-child(2):before {
-  position: absolute;
-  top: 13px;
-  left: calc(var(--ds-size-150, 0.75rem) * -1);
-  display: block;
-  width: 1px;
-  height: 2rem;
-  content: "";
-}
 
-:host([range]) [auro-input] {
-  max-width: 50%;
+/* This value is per design but relates to 
+   https://github.com/AlaskaAirlines/AuroDesignTokens/issues/206
+*/
+@container outerwrapper (min-width: 390px) {
+  .dpTriggerContent {
+    flex-direction: row;
+  }
+  [auro-input]:first-of-type {
+    margin-right: var(--ds-size-150, 0.75rem);
+  }
+  [auro-input]:nth-child(2) {
+    margin-left: var(--ds-size-150, 0.75rem);
+  }
+  [auro-input]:nth-child(2)::part(accentIcon) {
+    display: none;
+  }
+  [auro-input]:nth-child(2)::part(label) {
+    left: 0;
+    width: 100%;
+  }
+  [auro-input]:nth-child(2)::part(input) {
+    padding-left: 0;
+  }
+  [auro-input]:nth-child(2):before {
+    position: absolute;
+    top: 13px;
+    left: calc(var(--ds-size-150, 0.75rem) * -1);
+    display: block;
+    width: 1px;
+    height: 2rem;
+    content: "";
+  }
+  [auro-input]:not(:first-child) {
+    /* stylelint-disable-next-line selector-pseudo-element-colon-notation */
+  }
+  [auro-input]:not(:first-child)::part(wrapper):after {
+    content: none;
+  }
+  :host([range]) [auro-input] {
+    max-width: 50%;
+  }
 }
-
 @media screen and (max-width: 576px) {
   ::part(popover) {
     position: fixed !important;

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

@@ -11,10 +11,8 @@
 [auro-input] {
   &::part(iconContainer) {
     top: 0;
-
     display: flex;
     height: 100%;
-
     align-items: center;
   }
 
@@ -29,19 +27,49 @@
   &::part(wrapper) {
     border-width: 0 !important;
   }
+
+  // Horizontal ruler
+  &:not(:first-child) {
+    &::part(wrapper) {
+      /* stylelint-disable-next-line selector-pseudo-element-colon-notation */
+      &::after {
+        position: absolute;
+        left: 50%;
+        width: 95%;
+        height: 1px;
+        background-color: var(--ds-auro-datepicker-range-input-divider-color);
+        content: '';
+        transform: translateX(-50%);
+      }
+    }
+  }
 }
 
 .outerWrapper {
   position: relative;
+  container: outerwrapper / inline-size;
 }
 
 .dpTriggerContent {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
 
   [auro-input] {
     flex: 1;
+  }
+}
+
+// Container queries
 
+/* This value is per design but relates to 
+   https://github.com/AlaskaAirlines/AuroDesignTokens/issues/206
+*/
+@container outerwrapper (min-width: 390px) {
+  .dpTriggerContent {
+    flex-direction: row;
+  }
+
+  [auro-input] {
     &:first-of-type {
       margin-right: var(--ds-size-150, $ds-size-150);
     }
@@ -72,12 +100,22 @@
         content: '';
       }
     }
+
+    // Hide horizontal ruler
+    &:not(:first-child) {
+      /* stylelint-disable-next-line selector-pseudo-element-colon-notation */
+      &::part(wrapper) {
+        &:after {
+          content: none;
+        }
+      }
+    }
   }
-}
 
-:host([range]) {
-  [auro-input] {
-    max-width: 50%;
+  :host([range]) {
+    [auro-input] {
+      max-width: 50%;
+    }
   }
 }
 

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.6s
+created dist in 1.2s
 
 ./demo/index.js → ./demo/...
 created ./demo/ in 944ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 1.1s
+created ./demo/ in 866ms
 
 > @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.29/dist/auro-dropdown__bundled.js" type="module"></script>
+<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>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-dropdown use cases

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

@@ -2461,7 +2461,7 @@ const t=globalThis,i$1=t.trustedTypes,s=i$1?i$1.createPolicy("lit-html",{createH
 
 var colorCss$1 = i$3`:host([error]){--ds-auro-helptext-color: var(--ds-color-text-error-default, #cc1816)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
 
-var styleCss$1 = i$3`.helptext-wrapper{display:none;margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-size-200, 1rem)}:host([large]) .helptext-wrapper{font-size:var(--ds-text-body-size-default, 1rem)}.helptext-wrapper[visible]{display:block}::slotted(p){margin-block:0}`;
+var styleCss$1 = i$3`.helptext-wrapper{display:none;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-size-200, 1rem)}:host([large]) .helptext-wrapper{font-size:var(--ds-text-body-size-default, 1rem)}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
 
 var tokensCss = i$3`:host{--ds-auro-helptext-color: var(--ds-color-text-tertiary-default, #6a717c)}`;
 

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

@@ -2436,7 +2436,7 @@ const t=globalThis,i$1=t.trustedTypes,s=i$1?i$1.createPolicy("lit-html",{createH
 
 var colorCss$1 = i$3`:host([error]){--ds-auro-helptext-color: var(--ds-color-text-error-default, #cc1816)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
 
-var styleCss$1 = i$3`.helptext-wrapper{display:none;margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-size-200, 1rem)}:host([large]) .helptext-wrapper{font-size:var(--ds-text-body-size-default, 1rem)}.helptext-wrapper[visible]{display:block}::slotted(p){margin-block:0}`;
+var styleCss$1 = i$3`.helptext-wrapper{display:none;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-size-200, 1rem)}:host([large]) .helptext-wrapper{font-size:var(--ds-text-body-size-default, 1rem)}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
 
 var tokensCss = i$3`:host{--ds-auro-helptext-color: var(--ds-color-text-tertiary-default, #6a717c)}`;
 

package/components/dropdown/dist/index.js

@@ -2436,7 +2436,7 @@ const t=globalThis,i$1=t.trustedTypes,s=i$1?i$1.createPolicy("lit-html",{createH
 
 var colorCss$1 = i$3`:host([error]){--ds-auro-helptext-color: var(--ds-color-text-error-default, #cc1816)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
 
-var styleCss$1 = i$3`.helptext-wrapper{display:none;margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-size-200, 1rem)}:host([large]) .helptext-wrapper{font-size:var(--ds-text-body-size-default, 1rem)}.helptext-wrapper[visible]{display:block}::slotted(p){margin-block:0}`;
+var styleCss$1 = i$3`.helptext-wrapper{display:none;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-size-200, 1rem)}:host([large]) .helptext-wrapper{font-size:var(--ds-text-body-size-default, 1rem)}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
 
 var tokensCss = i$3`:host{--ds-auro-helptext-color: var(--ds-color-text-tertiary-default, #6a717c)}`;
 

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 151ms
+created dist in 159ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 76ms
+created ./demo/ in 83ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 67ms
+created ./demo/ in 76ms
 
 > @aurodesignsystem/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 299ms
+created dist in 369ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 188ms
+created ./demo/ in 268ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 135ms
+created ./demo/ in 186ms

package/components/form/README.md

@@ -98,7 +98,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.12.1/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-form@2.0.0-beta.29/dist/auro-form__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-form@2.0.0-beta.31/dist/auro-form__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-form use cases

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

@@ -42,7 +42,7 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 
 ./src/index.js → dist...
-created dist in 243ms
+created dist in 182ms
 
 > @aurodesignsystem/auro-helptext@1.0.0 types
 > tsc --project tsconfig.json

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

@@ -4,4 +4,4 @@
 
 
 ./src/index.js → dist...
-created dist in 339ms
+created dist in 778ms

package/components/helptext/dist/index.js

@@ -26,7 +26,7 @@ const t=globalThis,i$1=t.trustedTypes,s=i$1?i$1.createPolicy("lit-html",{createH
 
 var colorCss = i$3`:host([error]){--ds-auro-helptext-color: var(--ds-color-text-error-default, #cc1816)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
 
-var styleCss = i$3`.helptext-wrapper{display:none;margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-size-200, 1rem)}:host([large]) .helptext-wrapper{font-size:var(--ds-text-body-size-default, 1rem)}.helptext-wrapper[visible]{display:block}::slotted(p){margin-block:0}`;
+var styleCss = i$3`.helptext-wrapper{display:none;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-size-200, 1rem)}:host([large]) .helptext-wrapper{font-size:var(--ds-text-body-size-default, 1rem)}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
 
 var tokensCss = i$3`:host{--ds-auro-helptext-color: var(--ds-color-text-tertiary-default, #6a717c)}`;
 

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export default css`.helptext-wrapper{display:none;margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-size-200, 1rem)}:host([large]) .helptext-wrapper{font-size:var(--ds-text-body-size-default, 1rem)}.helptext-wrapper[visible]{display:block}::slotted(p){margin-block:0}`;
+export default css`.helptext-wrapper{display:none;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-size-200, 1rem)}:host([large]) .helptext-wrapper{font-size:var(--ds-text-body-size-default, 1rem)}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;

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

@@ -1,8 +1,6 @@
 /* stylelint-disable scss/selector-nest-combinators, selector-class-pattern */
 .helptext-wrapper {
   display: none;
-  margin-top: var(--ds-size-50, 0.25rem);
-  margin-bottom: 0;
   font-size: var(--ds-text-body-size-xs, 0.75rem);
   line-height: var(--ds-size-200, 1rem);
 }
@@ -15,6 +13,11 @@
   display: block;
 }
 
+::slotted(*:not(:empty)) {
+  margin-top: var(--ds-size-50, 0.25rem);
+  margin-bottom: 0;
+}
+
 ::slotted(p) {
   margin-block: 0;
 }

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

@@ -9,8 +9,6 @@
 
 .helptext-wrapper {
   display: none;
-  margin-top: var(--ds-size-50, $ds-size-50);
-  margin-bottom: 0;
   font-size: var(--ds-text-body-size-xs, $ds-text-body-size-xs);
   line-height: var(--ds-size-200, $ds-size-200);
 }
@@ -25,6 +23,11 @@
   display: block;
 }
 
+::slotted(*:not(:empty)) {
+  margin-top: var(--ds-size-50, $ds-size-50);
+  margin-bottom: 0;
+}
+
 ::slotted(p) {
   margin-block: 0;
 }

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

@@ -209,10 +209,10 @@ More info and automated migrator: https://sass-lang.com/d/import
 created dist in 1.5s
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 960ms
+created ./demo/ in 880ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 902ms
+created ./demo/ in 927ms
 
 > @aurodesignsystem/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

package/components/input/README.md

@@ -89,7 +89,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.12.1/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-input@2.0.0-beta.29/dist/auro-input__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>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-input use cases

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

@@ -4098,7 +4098,7 @@ const t=globalThis,i$1=t.trustedTypes,s=i$1?i$1.createPolicy("lit-html",{createH
 
 var colorCss = i$3`:host([error]){--ds-auro-helptext-color: var(--ds-color-text-error-default, #cc1816)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
 
-var styleCss = i$3`.helptext-wrapper{display:none;margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-size-200, 1rem)}:host([large]) .helptext-wrapper{font-size:var(--ds-text-body-size-default, 1rem)}.helptext-wrapper[visible]{display:block}::slotted(p){margin-block:0}`;
+var styleCss = i$3`.helptext-wrapper{display:none;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-size-200, 1rem)}:host([large]) .helptext-wrapper{font-size:var(--ds-text-body-size-default, 1rem)}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
 
 var tokensCss = i$3`:host{--ds-auro-helptext-color: var(--ds-color-text-tertiary-default, #6a717c)}`;
 

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

@@ -4036,7 +4036,7 @@ const t=globalThis,i$1=t.trustedTypes,s=i$1?i$1.createPolicy("lit-html",{createH
 
 var colorCss = i$3`:host([error]){--ds-auro-helptext-color: var(--ds-color-text-error-default, #cc1816)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
 
-var styleCss = i$3`.helptext-wrapper{display:none;margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-size-200, 1rem)}:host([large]) .helptext-wrapper{font-size:var(--ds-text-body-size-default, 1rem)}.helptext-wrapper[visible]{display:block}::slotted(p){margin-block:0}`;
+var styleCss = i$3`.helptext-wrapper{display:none;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-size-200, 1rem)}:host([large]) .helptext-wrapper{font-size:var(--ds-text-body-size-default, 1rem)}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
 
 var tokensCss = i$3`:host{--ds-auro-helptext-color: var(--ds-color-text-tertiary-default, #6a717c)}`;
 

package/components/input/dist/index.js

@@ -4019,7 +4019,7 @@ const t=globalThis,i$1=t.trustedTypes,s=i$1?i$1.createPolicy("lit-html",{createH
 
 var colorCss = i$3`:host([error]){--ds-auro-helptext-color: var(--ds-color-text-error-default, #cc1816)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
 
-var styleCss = i$3`.helptext-wrapper{display:none;margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-size-200, 1rem)}:host([large]) .helptext-wrapper{font-size:var(--ds-text-body-size-default, 1rem)}.helptext-wrapper[visible]{display:block}::slotted(p){margin-block:0}`;
+var styleCss = i$3`.helptext-wrapper{display:none;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-size-200, 1rem)}:host([large]) .helptext-wrapper{font-size:var(--ds-text-body-size-default, 1rem)}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
 
 var tokensCss = i$3`:host{--ds-auro-helptext-color: var(--ds-color-text-tertiary-default, #6a717c)}`;