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

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

@@ -0,0 +1,25 @@
+/* stylelint-disable selector-max-attribute, scss/selector-nest-combinators */
+.counter {
+  color: var(--ds-auro-counter-text-default);
+}
+
+[name=description]::slotted(*) {
+  color: var(--ds-auro-counter-text-secondary);
+}
+
+.controlIcon {
+  color: var(--ds-auro-counter-icon-color-default);
+}
+
+.quantityWrapper {
+  background-color: var(--ds-auro-counter-control-ui-bkg);
+}
+
+[disabled] .controlIcon, :host([disabled]) .controlIcon {
+  color: var(--ds-auro-counter-control-ui-disabled);
+}
+[disabled] label,
+[disabled] [name=description]::slotted(*), [disabled]::part(counterControl), :host([disabled]) label,
+:host([disabled]) [name=description]::slotted(*), :host([disabled])::part(counterControl) {
+  color: var(--ds-auro-counter-text-disabled);
+}

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

@@ -0,0 +1,44 @@
+/* stylelint-disable selector-max-attribute, scss/selector-nest-combinators */
+
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license.
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+// layout styles - define any layout specifications for UI that is contained WITHIN the component
+// never define layout that would cause effect on element outside the scope of this component
+
+// Support for fallback values
+@import "@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables";
+@import '@aurodesignsystem/webcorestylesheets/src/breakpoints';
+
+.counter {
+  color: var(--ds-auro-counter-text-default);
+}
+
+[name="description"]{
+  &::slotted(*) {
+    color: var(--ds-auro-counter-text-secondary);
+  }
+}
+  
+
+.controlIcon {
+  color: var(--ds-auro-counter-icon-color-default);
+}
+
+.quantityWrapper {
+  background-color: var(--ds-auro-counter-control-ui-bkg);
+}
+
+[disabled], :host([disabled]) {
+  .controlIcon {
+    color: var(--ds-auro-counter-control-ui-disabled);
+  }
+
+  label,
+  [name="description"]::slotted(*),
+  &::part(counterControl) {
+    color: var(--ds-auro-counter-text-disabled);
+  }
+}

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

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

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

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

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

@@ -0,0 +1,29 @@
+// stylelint-disable max-nesting-depth
+
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+@import "./../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables";
+
+.auroButton {
+  border-color: unset;
+  background-color: var(--ds-auro-counter-control-ui-bkg);
+  color: var(--ds-auro-button-text-color);
+  -webkit-tap-highlight-color: var(--ds-auro-button-tap-color);
+
+  &:focus-visible {
+    &:not(&:disabled) {
+      outline-color: var(--ds-auro-counter-control-border-active);
+    }
+  }
+
+  @media (hover: hover) {
+    &:active, &:hover{
+      &:not(:disabled) {
+        background-color: var(--ds-auro-counter-control-ui-hover);
+      }
+    }
+  }
+}

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

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

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

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

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

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

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

@@ -0,0 +1,9 @@
+@import "./../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables";
+
+:host {  
+    --ds-auro-counter-control-ui-hover: var(--ds-color-ui-bkg-hover-default, #{$ds-color-ui-bkg-hover-default});
+    --ds-auro-counter-control-ui-active: var(--ds-color-ui-active-default, #{$ds-color-ui-active-default});
+    --ds-auro-counter-control-border-active: var(--ds-color-border-active-default, #{$ds-color-border-active-default});
+    --ds-auro-counter-control-border-hover: var(--ds-color-ui-bkg-hover-default, #{$ds-color-ui-bkg-hover-default});
+    --ds-auro-counter-control-ui-bkg: var(--ds-color-ui-bkg-default-default, #{$ds-color-ui-bkg-default-default});
+}

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

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

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

@@ -0,0 +1,83 @@
+// stylelint-disable selector-max-class
+
+// Import Auro Sass variables
+@import "@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables";
+
+// general WCSS imports
+@import "@aurodesignsystem/webcorestylesheets/src/breakpoints";
+@import "@aurodesignsystem/webcorestylesheets/src/core";
+@import "@aurodesignsystem/webcorestylesheets/src/animation";
+
+@import "@aurodesignsystem/design-tokens/dist/tokens/SCSSVariableMap";
+
+$auro-inset-spacing-options: lg;
+$auro-inset-directions: '--squish';
+
+@import "@aurodesignsystem/webcorestylesheets/src/utilityMixins/insetUtility";
+
+// adjust alignment for slotted SVG icon
+::slotted(svg) {
+  vertical-align: middle;
+}
+
+// Note: without this, events on a disabled element will still fire
+slot {
+  pointer-events: none;
+}
+
+.contentWrapper {
+  display: flex;
+  align-items: center;
+
+  span {
+      display: block;
+      height: var(--ds-size-300, $ds-size-300);
+  }
+}
+
+.auroButton {
+  position: relative;
+  display: inline-flex;
+  overflow: visible;
+  width: calc(var(--ds-size-50, $ds-size-50) + var(--ds-size-400, $ds-size-400));
+  height: calc(var(--ds-size-25, $ds-size-25) + var(--ds-size-400, $ds-size-400));
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  padding: var(--ds-auro-counter-control-padding);
+  border: none;
+  border-radius: var(--ds-auro-counter-control-border-radius);
+
+  // removes margins around button in Safari
+  margin: 0;
+  cursor: pointer;
+  gap: var(--ds-size-100, $ds-size-100);
+  line-height: unset;
+
+  // macOS / iOS agents
+  -webkit-touch-callout: none;
+  user-select: none;
+  white-space: nowrap;
+
+  // handle active state
+  &:active {
+    .contentWrapper {
+      transform: scale(0.95);
+    }
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    transform: unset;
+  }
+
+  &:focus-visible {
+    &:not(&:disabled) {
+        outline-offset: 0;
+        outline-style: solid;
+        outline-width: var(--ds-size-25, $ds-size-25);
+        transform: unset;
+    }
+  }
+
+}

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

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export default css`.counters ::slotted(*:not(:first-child)){border-color:var(--ds-color-border-divider-default, rgba(0, 0, 0, 0.12))}`;

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

@@ -0,0 +1,4 @@
+/* stylelint-disable no-descending-specificity, selector-max-attribute */
+.counters ::slotted(*:not(:first-child)) {
+  border-color: var(--ds-color-border-divider-default, rgba(0, 0, 0, 0.12));
+}

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

@@ -0,0 +1,19 @@
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license.
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+// layout styles - define any layout specifications for UI that is contained WITHIN the component
+// never define layout that would cause effect on element outside the scope of this component
+
+// Support for fallback values
+@import "@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables";
+@import '@aurodesignsystem/webcorestylesheets/src/breakpoints';
+
+/* stylelint-disable no-descending-specificity, selector-max-attribute */
+
+.counters {
+  ::slotted(*:not(:first-child)) {
+    border-color: var(--ds-color-border-divider-default, $ds-color-border-divider-default);
+  }
+}

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export default css`:host{position:relative}`;
+export default css`:host{position:relative;display:block}.counters{display:flex;flex-direction:column;gap:var(--ds-size-300, 1.5rem)}.counters ::slotted(*:not(:first-child)){padding-top:var(--ds-size-300, 1.5rem);border-top-width:1px;border-top-style:solid}`;

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

@@ -1,4 +1,16 @@
-/* stylelint-disable no-descending-specificity, selector-max-attribute */
+/* stylelint-disable no-descending-specificity, selector-max-attribute, selector-nest-combinators */
 :host {
   position: relative;
+  display: block;
+}
+
+.counters {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-size-300, 1.5rem);
+}
+.counters ::slotted(*:not(:first-child)) {
+  padding-top: var(--ds-size-300, 1.5rem);
+  border-top-width: 1px;
+  border-top-style: solid;
 }

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

@@ -10,8 +10,21 @@
 @import "@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables";
 @import '@aurodesignsystem/webcorestylesheets/src/breakpoints';
 
-/* stylelint-disable no-descending-specificity, selector-max-attribute */
+/* stylelint-disable no-descending-specificity, selector-max-attribute, selector-nest-combinators */
 
 :host {
   position: relative;
+  display: block;
+}
+
+.counters {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-size-300, $ds-size-300);
+
+  ::slotted(*:not(:first-child)) {
+    padding-top: var(--ds-size-300, $ds-size-300);
+    border-top-width: 1px;
+    border-top-style: solid;
+  }
 }

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

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

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

@@ -1,4 +1,46 @@
-/* stylelint-disable no-descending-specificity, selector-max-attribute */
+.counter {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  column-gap: var(--ds-size-150, 0.75rem);
+}
+
+.content {
+  display: flex;
+  flex-flow: column;
+}
+
+[name=description]::slotted(*) {
+  display: block;
+  font-size: var(--ds-text-body-size-xs, 0.75rem);
+  line-height: var(--ds-size-200, 1rem);
+}
+
+.quantityWrapper {
+  width: var(--ds-size-400, 2rem);
+  height: calc(var(--ds-size-25, 0.125rem) + var(--ds-size-400, 2rem));
+  align-content: center;
+  cursor: default;
+  font-size: var(--ds-size-250, 1.25rem);
+  text-align: center;
+}
+
 :host {
   position: relative;
 }
+:host::part(counterControl) {
+  display: flex;
+  line-height: 0;
+}
+:host::part(controlMinus) {
+  --ds-auro-counter-control-border-radius: var(--ds-size-500, 2.5rem) 0 0 var(--ds-size-500, 2.5rem);
+  --ds-auro-counter-control-padding: var(--ds-size-50, 0.25rem) var(--ds-size-50, 0.25rem) var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem);
+}
+:host::part(controlPlus) {
+  --ds-auro-counter-control-border-radius: 0 var(--ds-size-500, 2.5rem) var(--ds-size-500, 2.5rem) 0;
+  --ds-auro-counter-control-padding: var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem) var(--ds-size-50, 0.25rem) var(--ds-size-50, 0.25rem);
+}
+
+auro-counter-button {
+  display: flex;
+}

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

@@ -10,8 +10,54 @@
 @import "@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables";
 @import '@aurodesignsystem/webcorestylesheets/src/breakpoints';
 
-/* stylelint-disable no-descending-specificity, selector-max-attribute */
+.counter {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  column-gap: var(--ds-size-150, $ds-size-150);
+}
+
+.content {
+  display: flex;
+  flex-flow: column;  
+}
+
+[name="description"] {
+  &::slotted(*) {
+    display: block;
+    font-size: var(--ds-text-body-size-xs, $ds-text-body-size-xs);
+    line-height: var(--ds-size-200, $ds-size-200);
+  }
+}
+
+.quantityWrapper {
+  width: var(--ds-size-400, $ds-size-400);
+  height: calc(var(--ds-size-25, $ds-size-25) + var(--ds-size-400, $ds-size-400));
+  align-content: center;
+  cursor: default;
+  font-size: var(--ds-size-250, $ds-size-250);
+  text-align: center;
+}
 
-:host {
+:host{
   position: relative;
+
+  &::part(counterControl) {
+    display: flex;
+    line-height: 0;
+  }
+
+  &::part(controlMinus) {
+    --ds-auro-counter-control-border-radius: var(--ds-size-500, #{$ds-size-500}) 0 0 var(--ds-size-500, #{$ds-size-500});
+    --ds-auro-counter-control-padding: var(--ds-size-50, #{$ds-size-50}) var(--ds-size-50, #{$ds-size-50}) var(--ds-size-50, #{$ds-size-50}) var(--ds-size-100, #{$ds-size-100});
+  }
+
+  &::part(controlPlus) {
+    --ds-auro-counter-control-border-radius: 0 var(--ds-size-500, #{$ds-size-500}) var(--ds-size-500, #{$ds-size-500}) 0;
+    --ds-auro-counter-control-padding: var(--ds-size-50, #{$ds-size-50}) var(--ds-size-100, #{$ds-size-100}) var(--ds-size-50, #{$ds-size-50}) var(--ds-size-50, #{$ds-size-50});
+  }
+}
+
+auro-counter-button {
+  display: flex;
 }

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

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

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

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

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

@@ -0,0 +1,24 @@
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license.
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+// layout styles - define any layout specifications for UI that is contained WITHIN the component
+// never define layout that would cause effect on element outside the scope of this component
+
+// Support for fallback values
+@import "@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables";
+@import '@aurodesignsystem/webcorestylesheets/src/breakpoints';
+
+
+:host {
+  --ds-auro-counter-text-default: var(--ds-color-text-primary-default, #{$ds-color-text-primary-default});
+  --ds-auro-counter-text-secondary: var(--ds-color-text-secondary-default, #{$ds-color-text-secondary-default});
+  --ds-auro-counter-text-disabled: var(--ds-color-text-ui-disabled-default, #{$ds-color-text-ui-disabled-default});;
+  --ds-auro-counter-control-ui-active: var(--ds-color-ui-active-default, #{$ds-color-ui-active-default});
+  --ds-auro-counter-control-ui-hover: var(--ds-color-ui-hover-default, #{$ds-color-ui-hover-default});
+  --ds-auro-counter-control-ui-disabled: var(--ds-color-ui-disabled-default, #{$ds-color-ui-disabled-default});
+  --ds-auro-counter-control-ui-bkg: var(--ds-color-ui-bkg-default-default, #{$ds-color-ui-bkg-default-default});
+  --ds-auro-counter-control-line-height: var(--ds-text-body-size-sm, #{$ds-text-body-size-sm});
+  --ds-auro-counter-icon-color-default: var(--ds-color-ui-default-default, #{$ds-color-ui-default-default});
+}