@aurodesignsystem/auro-formkit 2.0.0-beta.4 → 2.0.0-beta.40

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

@@ -0,0 +1,186 @@
+*, *: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 Wed, 15 Jan 2025 19:25:18 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;
+  touch-action: manipulation;
+  -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: none;
+  transform: unset;
+}

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

@@ -0,0 +1,84 @@
+// 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;
+
+  // prevent double-tap zoom on iOS (included in counterControl for disabled state behaving differently)
+  touch-action: manipulation;
+
+  // 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: none;
+        transform: unset;
+    }
+  }
+
+}

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}[slot=trigger],::slotted([slot=valueText]){display:block;overflow:hidden;text-overflow:ellipsis}[auro-dropdown]{display:block}[auro-dropdown]::part(trigger){max-height:var(--ds-size-300, 1.5rem)}`;

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

@@ -1,4 +1,18 @@
-/* stylelint-disable no-descending-specificity, selector-max-attribute */
+/* stylelint-disable no-descending-specificity, selector-max-attribute, selector-nest-combinators */
 :host {
   position: relative;
+  display: block;
+}
+
+[slot=trigger], ::slotted([slot=valueText]) {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+[auro-dropdown] {
+  display: block;
+}
+[auro-dropdown]::part(trigger) {
+  max-height: var(--ds-size-300, 1.5rem);
 }

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

@@ -10,8 +10,23 @@
 @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;
+}
+
+[slot="trigger"], ::slotted([slot="valueText"]) {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+[auro-dropdown] {
+  display: block;
+
+  &::part(trigger) {
+    max-height: var(--ds-size-300, $ds-size-300);
+  }
 }

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

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

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

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

package/components/counter/src/styles/counter-wrapper-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 */
+
+:host {
+  ::slotted(*:not(:first-child)) {
+    border-color: var(--ds-color-border-divider-default, $ds-color-border-divider-default);
+  }
+}

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

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

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

@@ -0,0 +1,15 @@
+/* stylelint-disable no-descending-specificity, selector-max-attribute, selector-nest-combinators */
+:host {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-size-300, 1.5rem);
+}
+:host ::slotted(*:not(:first-child)) {
+  padding-top: var(--ds-size-300, 1.5rem);
+  border-top-width: 1px;
+  border-top-style: solid;
+}
+
+:host([isindropdown]) {
+  padding: var(--ds-size-300, 1.5rem);
+}

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

@@ -0,0 +1,29 @@
+// 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, selector-nest-combinators */
+
+:host {
+  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;
+  }
+}
+
+:host([isindropdown]) {
+  padding: var(--ds-size-300, $ds-size-300);
+}

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;border-radius:var(--ds-size-500, 2.5rem);line-height:0;touch-action:manipulation}:host::part(counterControl):focus-visible{outline-offset:0;outline-style:solid;outline-width:var(--ds-size-25, 0.125rem)}: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,53 @@
-/* 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;
+  border-radius: var(--ds-size-500, 2.5rem);
+  line-height: 0;
+  touch-action: manipulation;
+}
+:host::part(counterControl):focus-visible {
+  outline-offset: 0;
+  outline-style: solid;
+  outline-width: var(--ds-size-25, 0.125rem);
+}
+: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,64 @@
 @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;
+    border-radius: var(--ds-size-500, $ds-size-500);
+    line-height: 0;
+
+    // prevent double-tap zoom on iOS (included in button for enabled state behaving differently)
+    touch-action: manipulation;
+
+    &:focus-visible {
+      outline-offset: 0;
+      outline-style: solid;
+      outline-width: var(--ds-size-25, $ds-size-25);
+    }
+  }
+
+  &::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);--ds-auro-counter-control-border-active: var(--ds-color-border-active-default, #0074c8)}`;

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

@@ -0,0 +1,12 @@
+: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);
+  --ds-auro-counter-control-border-active: var(--ds-color-border-active-default, #0074c8);
+}

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

@@ -0,0 +1,25 @@
+// 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});
+  --ds-auro-counter-control-border-active: var(--ds-color-border-active-default, #{$ds-color-border-active-default});
+}