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

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

@@ -93,10 +93,10 @@ More info and automated migrator: https://sass-lang.com/d/import
 created dist in 1.2s
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 823ms
+created ./demo/ in 944ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 655ms
+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.30/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/form/.turbo/turbo-build.log

@@ -69,13 +69,13 @@ Run in verbose mode to see all warnings.
 
 
 ./src/index.js → dist...
-created dist in 148ms
+created dist in 159ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 80ms
+created ./demo/ in 83ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 70ms
+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 241ms
+created ./demo/ in 268ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 178ms
+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.30/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 263ms
+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 342ms
+created dist in 778ms

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

@@ -206,13 +206,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.5s
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 1s
+created ./demo/ in 880ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 725ms
+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.30/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/menu/.turbo/turbo-build.log

@@ -101,13 +101,13 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 
 ./src/index.js → dist...
-created dist in 326ms
+created dist in 478ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 485ms
+created ./demo/ in 465ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 383ms
+created ./demo/ in 284ms
 
 > @aurodesignsystem/auro-menu@4.1.4 build:docs
 > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component menu

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

@@ -4,10 +4,10 @@
 
 
 ./src/index.js → dist...
-created dist in 549ms
+created dist in 567ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 376ms
+created ./demo/ in 414ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 280ms
+created ./demo/ in 262ms

package/components/menu/README.md

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

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

@@ -138,13 +138,13 @@ Run in verbose mode to see all warnings.
 
 
 ./src/index.js → dist...
-created dist in 851ms
+created dist in 712ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 595ms
+created ./demo/ in 689ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 591ms
+created ./demo/ in 613ms
 
 > @aurodesignsystem/auro-radio@4.1.1 build:docs
 > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component radio

package/components/radio/README.md

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

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

@@ -137,13 +137,13 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 
 ./src/index.js → dist...
-created dist in 965ms
+created dist in 1.1s
 
 ./demo/index.js → ./demo/...
 created ./demo/ in 1s
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 776ms
+created ./demo/ in 781ms
 
 > @aurodesignsystem/auro-select@3.3.0 build:docs
 > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component select

package/components/select/README.md

@@ -99,9 +99,9 @@ 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-dropdown@2.0.0-beta.30/dist/auro-dropdown__bundled.js" type="module"></script>
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-menu@2.0.0-beta.30/dist/auro-menu__bundled.js" type="module"></script>
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-select@2.0.0-beta.30/dist/auro-select__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>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-menu@2.0.0-beta.31/dist/auro-menu__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-select@2.0.0-beta.31/dist/auro-select__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-select use cases

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurodesignsystem/auro-formkit",
-  "version": "2.0.0-beta.31",
+  "version": "2.0.0-beta.32",
   "description": "A collection of web components used to build forms.",
   "type": "module",
   "license": "Apache-2.0",

package/.turbo/cache/0b59b3b61897d950-meta.json

@@ -1 +0,0 @@
-{"hash":"0b59b3b61897d950","duration":5706}

package/.turbo/cache/1215c5e3dd25e0c3-meta.json

@@ -1 +0,0 @@
-{"hash":"1215c5e3dd25e0c3","duration":4933}

package/.turbo/cache/13ff0d757be18ae9-meta.json

@@ -1 +0,0 @@
-{"hash":"13ff0d757be18ae9","duration":13673}

package/.turbo/cache/1b653bcfa2eef748-meta.json

@@ -1 +0,0 @@
-{"hash":"1b653bcfa2eef748","duration":822}

package/.turbo/cache/24cb18ffa2f611b1-meta.json

@@ -1 +0,0 @@
-{"hash":"24cb18ffa2f611b1","duration":1277}

package/.turbo/cache/4f81392ada08f240-meta.json

@@ -1 +0,0 @@
-{"hash":"4f81392ada08f240","duration":1778}

package/.turbo/cache/59481fd7f6f355ed-meta.json

@@ -1 +0,0 @@
-{"hash":"59481fd7f6f355ed","duration":3037}

package/.turbo/cache/79c16437b6eb7e44-meta.json

@@ -1 +0,0 @@
-{"hash":"79c16437b6eb7e44","duration":13329}

package/.turbo/cache/8388331cc15d7fd2-meta.json

@@ -1 +0,0 @@
-{"hash":"8388331cc15d7fd2","duration":6010}

package/.turbo/cache/8c637a8d4c2166c5-meta.json

@@ -1 +0,0 @@
-{"hash":"8c637a8d4c2166c5","duration":2515}

package/.turbo/cache/8f94ccea023ee254-meta.json

@@ -1 +0,0 @@
-{"hash":"8f94ccea023ee254","duration":14185}

package/.turbo/cache/9337429c745d33f9-meta.json

@@ -1 +0,0 @@
-{"hash":"9337429c745d33f9","duration":25020}

package/.turbo/cache/a5717ca784f036bc-meta.json

@@ -1 +0,0 @@
-{"hash":"a5717ca784f036bc","duration":5937}

package/.turbo/cache/a7dea1f1ae1fdc27-meta.json

@@ -1 +0,0 @@
-{"hash":"a7dea1f1ae1fdc27","duration":1958}

package/.turbo/cache/abfc52db26c84ceb-meta.json

@@ -1 +0,0 @@
-{"hash":"abfc52db26c84ceb","duration":14702}

package/.turbo/cache/b7aefb222b98306d-meta.json

@@ -1 +0,0 @@
-{"hash":"b7aefb222b98306d","duration":819}

package/.turbo/cache/c13e85d809af02f6-meta.json

@@ -1 +0,0 @@
-{"hash":"c13e85d809af02f6","duration":2059}

package/.turbo/cache/c89150633a136dc8-meta.json

@@ -1 +0,0 @@
-{"hash":"c89150633a136dc8","duration":639}

package/.turbo/cache/cdb0e45299352fce-meta.json

@@ -1 +0,0 @@
-{"hash":"cdb0e45299352fce","duration":14196}

package/.turbo/cache/df379f765f10ec9c-meta.json

@@ -1 +0,0 @@
-{"hash":"df379f765f10ec9c","duration":14632}

package/.turbo/cache/e95b9e3b7f35e801-meta.json

@@ -1 +0,0 @@
-{"hash":"e95b9e3b7f35e801","duration":15202}

package/.turbo/cache/fb3845d2ca66fee8-meta.json

@@ -1 +0,0 @@
-{"hash":"fb3845d2ca66fee8","duration":16012}