@aurodesignsystem/auro-formkit 2.0.0-beta.1 → 2.0.0-beta.10

package/components/input/src/styles/mixins.scss

@@ -0,0 +1,45 @@
+// Handles the hidden state of the notification icons
+@mixin hidden-notification {
+  overflow: hidden;
+  width: 0;
+  height: 0;
+  padding: 0;
+  margin: 0;
+  visibility: hidden;
+}
+
+// Handles the transition animation for the input field
+@mixin transition-animation {
+  transition: all .3s cubic-bezier(.215, .61, .355, 1);
+}
+
+// Handles highlighting the border during focus and invalid states
+@mixin border-highlight-style {
+  &:before {
+    position: absolute;
+    display: block;
+
+    /* stylelint-disable declaration-block-no-redundant-longhand-properties */
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+    /* stylelint-enable declaration-block-no-redundant-longhand-properties */
+
+    content: '';
+    inset: 0;
+    pointer-events: none;
+  }
+}
+
+// Handle highlighting the border during focus and invalid state
+@mixin border-highlight-color {
+  &:before {
+    border-bottom-color: transparent;
+  }
+}
+
+// Handle the active state of the label
+@mixin active-label {
+  top: var(--ds-size-100, $ds-size-100);
+  font-size: var(--ds-text-body-size-xs, $ds-text-body-size-xs);
+  transform: unset;
+}

package/components/input/src/styles/notificationIcons-css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export default css`.typeIcon{display:flex;flex-direction:row;align-items:center}.typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([bordered]) .notificationIcons{align-items:center}.notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}.alertNotification{width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}.clearBtn{width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));opacity:0;pointer-events:none}:host .wrapper:hover .clearBtn,:host .wrapper:focus-within .clearBtn{opacity:1;pointer-events:auto}.passwordBtn{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}.notificationBtn{display:block;width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);padding:0;border:0;background:unset;cursor:pointer}.notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}.notificationBtn [auro-icon][hidden]{display:none}:host(:not([bordered])) .typeIcon,:host(:not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}:host(:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}`;
+export default css`.typeIcon{display:flex;flex-direction:row;align-items:center}.typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([bordered]) .notificationIcons{align-items:center}.notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}.alertNotification{width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}.passwordBtn{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}.notificationBtn{display:block;width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);padding:0;border:0;background:unset;cursor:pointer}.notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}.notificationBtn [auro-icon][hidden]{display:none}:host(:not([bordered])) .typeIcon,:host(:not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}.clearBtn{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);overflow:hidden;width:0;opacity:0}:host .wrapper:hover .clearBtn,:host .wrapper:focus-within .clearBtn{width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));opacity:1}:host(:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}`;

package/components/input/src/styles/notificationIcons.css

@@ -32,18 +32,6 @@
   height: calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));
 }
 
-.clearBtn {
-  width: calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));
-  height: calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));
-  opacity: 0;
-  pointer-events: none;
-}
-
-:host .wrapper:hover .clearBtn, :host .wrapper:focus-within .clearBtn {
-  opacity: 1;
-  pointer-events: auto;
-}
-
 .passwordBtn {
   width: calc(var(--ds-size-300, 1.5rem));
   height: calc(var(--ds-size-300, 1.5rem));
@@ -73,6 +61,19 @@
   padding-bottom: var(--ds-size-50, 0.25rem);
 }
 
+.clearBtn {
+  transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
+  overflow: hidden;
+  width: 0;
+  opacity: 0;
+}
+
+:host .wrapper:hover .clearBtn, :host .wrapper:focus-within .clearBtn {
+  width: calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));
+  height: calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));
+  opacity: 1;
+}
+
 :host(:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification {
   overflow: hidden;
   width: 0;

package/components/input/src/styles/notificationIcons.scss

@@ -1,4 +1,5 @@
 @import '@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
+@import 'mixins';
 
 /* stylelint-disable  selector-max-attribute, max-nesting-depth, selector-max-class, selector-max-combinators, selector-max-compound-selectors */
 
@@ -42,25 +43,6 @@
   height: calc(var(--ds-size-300, $ds-size-300) + var(--ds-size-25, $ds-size-25));
 }
 
-.clearBtn {
-  width: calc(var(--ds-size-200, $ds-size-200) + var(--ds-size-25, $ds-size-25)); 
-  height: calc(var(--ds-size-200, $ds-size-200) + var(--ds-size-25, $ds-size-25));
-  opacity: 0;
-  pointer-events: none;
-}
-
-:host {
-  .wrapper {
-    &:hover,
-    &:focus-within {
-      .clearBtn {
-        opacity: 1;
-        pointer-events: auto;
-      }
-    }
-  }
-}
-
 .passwordBtn {
   width: calc(var(--ds-size-300, $ds-size-300));
   height: calc(var(--ds-size-300, $ds-size-300));
@@ -95,15 +77,25 @@
   }
 }
 
-// Determine which icons to show based on focus state
+.clearBtn {
+  @include transition-animation;
 
-@mixin hidden-notification {
   overflow: hidden;
   width: 0;
-  height: 0;
-  padding: 0;
-  margin: 0;
-  visibility: hidden;
+  opacity: 0;
+}
+
+:host {
+  .wrapper {
+    &:hover,
+    &:focus-within {
+      .clearBtn {
+        width: calc(var(--ds-size-200, $ds-size-200) + var(--ds-size-25, $ds-size-25)); 
+        height: calc(var(--ds-size-200, $ds-size-200) + var(--ds-size-25, $ds-size-25));
+        opacity: 1;
+      }
+    }
+  }
 }
 
 :host(:focus-within[type="password"]) {

package/components/input/src/styles/style-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_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.typeIcon{display:flex;flex-direction:row;align-items:center}.typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([bordered]) .notificationIcons{align-items:center}.notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}.alertNotification{width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}.clearBtn{width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));opacity:0;pointer-events:none}:host .wrapper:hover .clearBtn,:host .wrapper:focus-within .clearBtn{opacity:1;pointer-events:auto}.passwordBtn{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}.notificationBtn{display:block;width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);padding:0;border:0;background:unset;cursor:pointer}.notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}.notificationBtn [auro-icon][hidden]{display:none}:host(:not([bordered])) .typeIcon,:host(:not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}:host(:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}.inputElement-helpText{margin:var(--ds-size-50, 0.25rem) 0;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-size-200, 1rem)}input{border:unset}.wrapper{position:relative;overflow:hidden;border-style:solid}:host(:not([bordered],[borderless])) .wrapper{border-width:1px 0}:host([bordered]) .wrapper{border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}:host(:not([borderless])) .wrapper:focus-within:before{position:absolute;display:block;border-bottom-width:1px;border-bottom-style:solid;content:"";inset:0;pointer-events:none}:host([validity]:not([validity=valid])) .wrapper:before{border-bottom:0}label{position:absolute;overflow:hidden;pointer-events:none;text-overflow:ellipsis;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:nowrap}:host(:not([bordered])) label{top:calc(100% - var(--ds-size-25, 0.125rem));transform:translateY(-100%)}:host(:not([bordered])) label.withIcon{left:var(--ds-size-400, 2rem)}:host([bordered]) label{top:50%;transform:translateY(-50%)}:host([bordered]) label.withIcon{left:var(--ds-size-500, 2.5rem)}:host([bordered]) label:not(label.withIcon){left:var(--ds-size-100, 0.5rem)}:host .wrapper:focus-within label{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host label.withValue{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host([activeLabel]) .wrapper label{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host{--size-lgsm: 1.875rem;--size-xlsm: 2.75rem;--size-mdxxs: 1.2rem;position:relative;display:block}.wrapper{display:flex;flex-direction:row}.main{display:flex;flex-direction:row;position:relative;flex:1}input{position:relative;overflow:hidden;min-height:calc(var(--ds-size-700, 3.5rem) + var(--ds-size-25, 0.125rem));max-height:calc(var(--ds-size-700, 3.5rem) + var(--ds-size-25, 0.125rem));flex:1;padding:var(--ds-size-400, 2rem) 0 var(--ds-size-50, 0.25rem);margin:0;font-family:var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);font-size:var(--ds-size-200, 1rem);outline:none;text-overflow:ellipsis;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:nowrap}input::-ms-reveal,input::-ms-clear{display:none}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}input[type=number]{-moz-appearance:textfield;appearance:textfield}input:disabled{background:none;pointer-events:none}:host([bordered]) input{padding:var(--ds-size-400, 2rem) 0 var(--ds-size-100, 0.5rem)}`;
+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_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.typeIcon{display:flex;flex-direction:row;align-items:center}.typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([bordered]) .notificationIcons{align-items:center}.notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}.alertNotification{width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}.passwordBtn{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}.notificationBtn{display:block;width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);padding:0;border:0;background:unset;cursor:pointer}.notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}.notificationBtn [auro-icon][hidden]{display:none}:host(:not([bordered])) .typeIcon,:host(:not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}.clearBtn{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);overflow:hidden;width:0;opacity:0}:host .wrapper:hover .clearBtn,:host .wrapper:focus-within .clearBtn{width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));opacity:1}:host(:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}.inputElement-helpText{margin:var(--ds-size-50, 0.25rem) 0;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-size-200, 1rem)}input{border:unset}.wrapper{position:relative;overflow:hidden;border-style:solid}:host(:not([bordered],[borderless])) .wrapper{border-width:1px 0}:host([bordered]) .wrapper{border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}:host(:not([borderless])) .wrapper:focus-within:before{position:absolute;display:block;border-bottom-width:1px;border-bottom-style:solid;content:"";inset:0;pointer-events:none}:host([validity]:not([validity=valid])) .wrapper:before{border-bottom:0}label{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);position:absolute;overflow:hidden;pointer-events:none;text-overflow:ellipsis;white-space:nowrap}:host(:not([bordered])) label{top:calc(100% - var(--ds-size-25, 0.125rem));transform:translateY(-100%)}:host(:not([bordered])) label.withIcon{left:var(--ds-size-400, 2rem)}:host([bordered]) label{top:50%;transform:translateY(-50%)}:host([bordered]) label.withIcon{left:var(--ds-size-500, 2.5rem)}:host([bordered]) label:not(label.withIcon){left:var(--ds-size-100, 0.5rem)}:host .wrapper:focus-within label{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host label.withValue{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host([activeLabel]) .wrapper label{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host{position:relative;display:block}.wrapper{display:flex;flex-direction:row}.main{display:flex;flex-direction:row;position:relative;flex:1}input{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);position:relative;overflow:hidden;min-height:calc(var(--ds-size-700, 3.5rem) + var(--ds-size-25, 0.125rem));max-height:calc(var(--ds-size-700, 3.5rem) + var(--ds-size-25, 0.125rem));flex:1;padding:var(--ds-size-400, 2rem) 0 var(--ds-size-50, 0.25rem);margin:0;font-family:var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);font-size:var(--ds-size-200, 1rem);outline:none;text-overflow:ellipsis;white-space:nowrap}input::-ms-reveal,input::-ms-clear{display:none}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}input[type=number]{-moz-appearance:textfield;appearance:textfield}input:disabled{background:none;pointer-events:none}:host([bordered]) input{padding:var(--ds-size-400, 2rem) 0 var(--ds-size-100, 0.5rem)}`;

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

@@ -96,18 +96,6 @@
   height: calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));
 }
 
-.clearBtn {
-  width: calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));
-  height: calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));
-  opacity: 0;
-  pointer-events: none;
-}
-
-:host .wrapper:hover .clearBtn, :host .wrapper:focus-within .clearBtn {
-  opacity: 1;
-  pointer-events: auto;
-}
-
 .passwordBtn {
   width: calc(var(--ds-size-300, 1.5rem));
   height: calc(var(--ds-size-300, 1.5rem));
@@ -137,6 +125,19 @@
   padding-bottom: var(--ds-size-50, 0.25rem);
 }
 
+.clearBtn {
+  transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
+  overflow: hidden;
+  width: 0;
+  opacity: 0;
+}
+
+:host .wrapper:hover .clearBtn, :host .wrapper:focus-within .clearBtn {
+  width: calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));
+  height: calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));
+  opacity: 1;
+}
+
 :host(:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification {
   overflow: hidden;
   width: 0;
@@ -191,11 +192,11 @@ input {
 
 /* stylelint-disable no-duplicate-selectors, max-nesting-depth, no-descending-specificity, selector-max-combinators, selector-max-compound-selectors, selector-no-qualifying-type */
 label {
+  transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
   position: absolute;
   overflow: hidden;
   pointer-events: none;
   text-overflow: ellipsis;
-  transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
   white-space: nowrap;
 }
 
@@ -236,9 +237,6 @@ label {
 }
 
 :host {
-  --size-lgsm: 1.875rem;
-  --size-xlsm: 2.75rem;
-  --size-mdxxs: 1.2rem;
   position: relative;
   display: block;
 }
@@ -257,6 +255,7 @@ label {
 
 /* stylelint-disable property-no-vendor-prefix, selector-no-qualifying-type */
 input {
+  transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
   position: relative;
   overflow: hidden;
   min-height: calc(var(--ds-size-700, 3.5rem) + var(--ds-size-25, 0.125rem));
@@ -268,7 +267,6 @@ input {
   font-size: var(--ds-size-200, 1rem);
   outline: none;
   text-overflow: ellipsis;
-  transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
   white-space: nowrap;
 }
 input::-ms-reveal, input::-ms-clear {

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

@@ -34,10 +34,6 @@
 
 // container styles - defines the look of the outer custom component
 :host {
-  --size-lgsm: 1.875rem;
-  --size-xlsm: 2.75rem;
-  --size-mdxxs: 1.2rem;
-
   position: relative;
   display: block;
 }

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

@@ -1,8 +1,8 @@
 
-> @auro-formkit/auro-menu@4.1.4 build:sass
+> @aurodesignsystem/auro-menu@4.1.4 build:sass
 > sass --no-source-map --load-path=../../node_modules "./src/styles/:./src/styles/"
 
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 
 More info and automated migrator: https://sass-lang.com/d/import
 
@@ -12,7 +12,7 @@ More info and automated migrator: https://sass-lang.com/d/import
   ╵
     src/styles/color-menuoption.scss 8:9  root stylesheet
 
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 
 More info and automated migrator: https://sass-lang.com/d/import
 
@@ -22,7 +22,7 @@ More info and automated migrator: https://sass-lang.com/d/import
   ╵
     src/styles/style-menu.scss 9:9  root stylesheet
 
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 
 More info and automated migrator: https://sass-lang.com/d/import
 
@@ -32,7 +32,7 @@ More info and automated migrator: https://sass-lang.com/d/import
    ╵
     src/styles/style-menu.scss 10:9  root stylesheet
 
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 
 More info and automated migrator: https://sass-lang.com/d/import
 
@@ -42,7 +42,7 @@ More info and automated migrator: https://sass-lang.com/d/import
    ╵
     src/styles/style-menu.scss 11:9  root stylesheet
 
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 
 More info and automated migrator: https://sass-lang.com/d/import
 
@@ -53,7 +53,7 @@ More info and automated migrator: https://sass-lang.com/d/import
     @aurodesignsystem/webcorestylesheets/src/_core.scss 5:9  @import
     src/styles/style-menu.scss 11:9                          root stylesheet
 
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 
 More info and automated migrator: https://sass-lang.com/d/import
 
@@ -63,7 +63,7 @@ More info and automated migrator: https://sass-lang.com/d/import
   ╵
     src/styles/style-menuoption.scss 8:9  root stylesheet
 
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 
 More info and automated migrator: https://sass-lang.com/d/import
 
@@ -73,7 +73,7 @@ More info and automated migrator: https://sass-lang.com/d/import
   ╵
     src/styles/style-menuoption.scss 9:9  root stylesheet
 
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 
 More info and automated migrator: https://sass-lang.com/d/import
 

package/components/menu/.turbo/turbo-build$colon$version.log

@@ -1,5 +1,5 @@
 
-> @auro-formkit/auro-menu@4.1.4 build:version
+> @aurodesignsystem/auro-menu@4.1.4 build:version
 > node ./src/scripts/version.mjs
 
 Found package.json at: /home/runner/work/auro-formkit/auro-formkit/node_modules/@aurodesignsystem/auro-icon/package.json

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

@@ -1,19 +1,19 @@
 
-> @auro-formkit/auro-menu@4.1.4 build
+> @aurodesignsystem/auro-menu@4.1.4 build
 > run-s build:version build:sass bundler build:docs types
 
 
-> @auro-formkit/auro-menu@4.1.4 build:version
+> @aurodesignsystem/auro-menu@4.1.4 build:version
 > node ./src/scripts/version.mjs
 
 Found package.json at: /home/runner/work/auro-formkit/auro-formkit/node_modules/@aurodesignsystem/auro-icon/package.json
 Writing version file to: ./src/iconVersion.js
 Successfully wrote version file for @aurodesignsystem/auro-icon
 
-> @auro-formkit/auro-menu@4.1.4 build:sass
+> @aurodesignsystem/auro-menu@4.1.4 build:sass
 > sass --no-source-map --load-path=../../node_modules "./src/styles/:./src/styles/"
 
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 
 More info and automated migrator: https://sass-lang.com/d/import
 
@@ -23,7 +23,7 @@ More info and automated migrator: https://sass-lang.com/d/import
   ╵
     src/styles/color-menuoption.scss 8:9  root stylesheet
 
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 
 More info and automated migrator: https://sass-lang.com/d/import
 
@@ -33,7 +33,7 @@ More info and automated migrator: https://sass-lang.com/d/import
   ╵
     src/styles/style-menu.scss 9:9  root stylesheet
 
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 
 More info and automated migrator: https://sass-lang.com/d/import
 
@@ -43,7 +43,7 @@ More info and automated migrator: https://sass-lang.com/d/import
    ╵
     src/styles/style-menu.scss 10:9  root stylesheet
 
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 
 More info and automated migrator: https://sass-lang.com/d/import
 
@@ -53,7 +53,7 @@ More info and automated migrator: https://sass-lang.com/d/import
    ╵
     src/styles/style-menu.scss 11:9  root stylesheet
 
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 
 More info and automated migrator: https://sass-lang.com/d/import
 
@@ -64,7 +64,7 @@ More info and automated migrator: https://sass-lang.com/d/import
     @aurodesignsystem/webcorestylesheets/src/_core.scss 5:9  @import
     src/styles/style-menu.scss 11:9                          root stylesheet
 
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 
 More info and automated migrator: https://sass-lang.com/d/import
 
@@ -74,7 +74,7 @@ More info and automated migrator: https://sass-lang.com/d/import
   ╵
     src/styles/style-menuoption.scss 8:9  root stylesheet
 
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 
 More info and automated migrator: https://sass-lang.com/d/import
 
@@ -84,7 +84,7 @@ More info and automated migrator: https://sass-lang.com/d/import
   ╵
     src/styles/style-menuoption.scss 9:9  root stylesheet
 
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 
 More info and automated migrator: https://sass-lang.com/d/import
 
@@ -96,33 +96,29 @@ More info and automated migrator: https://sass-lang.com/d/import
     src/styles/style-menuoption.scss 9:9                            root stylesheet
 
 
-> @auro-formkit/auro-menu@4.1.4 bundler
+> @aurodesignsystem/auro-menu@4.1.4 bundler
 > rollup -c node:@auro-formkit/config/rollup
 
 
 ./src/index.js → dist...
-created dist in 1.2s
+created dist in 1s
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 659ms
+created ./demo/ in 654ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 434ms
+created ./demo/ in 627ms
 
-> @auro-formkit/auro-menu@4.1.4 build:docs
+> @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
 
 Web Component Analyzer analyzing 2 files...
-Retrieving latest "/home/runner/work/auro-formkit/auro-formkit/components/menu/docTemplates/README.md" file...
 ✔ /README.md Updated
  Transforms run
   ⁕ REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/browserSupport.md 
-  ⁕ REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/componentInstall_esm.md 
   ⁕ REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/designTokens.md 
   ⁕ REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/componentImportDescription.md 
-  ⁕ REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/componentImport.md 
   ⁕ REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/bundleInstallDescription.md 
-  ⁕ REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/bundleUseModBrowsers.md 
   ⁕ REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/developmentDescription.md 
   ⁕ REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/localhost.md 
   ⁕ REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/api.md 
@@ -130,6 +126,9 @@ Retrieving latest "/home/runner/work/auro-formkit/auro-formkit/components/menu/d
   ⁕ REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/bundles.md 
   ⁕ FILE:src=./docs/partials/description.md 
   ⁕ FILE:src=./docs/partials/readmeAddlInfo.md 
+  ⁕ FILE:src=../../docs/templates/componentInstall.md 
+  ⁕ FILE:src=../../docs/templates/componentUsage.md 
+  ⁕ FILE:src=../../docs/templates/componentBundleUseModBrowsers.md 
   ⁕ FILE:src=./docs/partials/useCases.md 
   ⁕ CODE:src=./apiExamples/basic.html 
   ⁕ CODE:src=./apiExamples/basic.html 
@@ -179,6 +178,6 @@ Retrieving latest "/home/runner/work/auro-formkit/auro-formkit/components/menu/d
 
 Docs processed successfully for menu
 
-> @auro-formkit/auro-menu@4.1.4 types
+> @aurodesignsystem/auro-menu@4.1.4 types
 > tsc --project tsconfig.json
 

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

@@ -1,13 +1,13 @@
 
-> @auro-formkit/auro-menu@4.1.4 bundler
+> @aurodesignsystem/auro-menu@4.1.4 bundler
 > rollup -c node:@auro-formkit/config/rollup
 
 
 ./src/index.js → dist...
-created dist in 860ms
+created dist in 1.1s
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 781ms
+created ./demo/ in 791ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 561ms
+created ./demo/ in 648ms

package/components/menu/.turbo/turbo-postCss$colon$component.log

@@ -1,5 +1,4 @@
 
-> @auro-formkit/auro-menu@4.1.4 postCss:component
+> @aurodesignsystem/auro-menu@4.1.4 postCss:component
 > node ../../node_modules/@aurodesignsystem/auro-library/scripts/build/postCss.mjs
 
-Unable to scan directory: Error: ENOENT: no such file or directory, scandir '/home/runner/work/auro-formkit/auro-formkit/node_modules/@aurodesignsystem/auro-library/scripts/src'

package/components/menu/.turbo/turbo-sass$colon$render.log

@@ -1,5 +1,5 @@
 
-> @auro-formkit/auro-menu@4.1.4 sass:render
+> @aurodesignsystem/auro-menu@4.1.4 sass:render
 > sass-render --load-path=../../node_modules 'src/**/*.css' -t ../../node_modules/@aurodesignsystem/auro-library/scripts/build/staticStyles-template.js
 
 Rendering src/styles/color-menu.css...
@@ -7,23 +7,23 @@ Rendering src/styles/color-menuoption.css...
 Rendering src/styles/style-menu.css...
 Rendering src/styles/style-menuoption.css...
 Rendering src/styles/tokens.css...
-DEPRECATION WARNING: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
+DEPRECATION WARNING [user-authored]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
 
 More info: https://sass-lang.com/d/legacy-js-api
 
-DEPRECATION WARNING: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
+DEPRECATION WARNING [user-authored]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
 
 More info: https://sass-lang.com/d/legacy-js-api
 
-DEPRECATION WARNING: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
+DEPRECATION WARNING [user-authored]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
 
 More info: https://sass-lang.com/d/legacy-js-api
 
-DEPRECATION WARNING: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
+DEPRECATION WARNING [user-authored]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
 
 More info: https://sass-lang.com/d/legacy-js-api
 
-DEPRECATION WARNING: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
+DEPRECATION WARNING [user-authored]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
 
 More info: https://sass-lang.com/d/legacy-js-api
 

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

@@ -1,4 +1,4 @@
 
-> @auro-formkit/auro-menu@4.1.4 types
+> @aurodesignsystem/auro-menu@4.1.4 types
 > tsc --project tsconfig.json