@aurodesignsystem/auro-accordion 5.2.6 → 6.0.0-rc-206.1

package/src/styles/style.css

@@ -1,341 +0,0 @@
-/* stylelint-disable order/properties-order, selector-max-combinators, selector-max-compound-selectors, declaration-empty-line-before, declaration-no-important, no-descending-specificity */
-/*
- * Copyright (c) Alaska Air. All rights reserved. Licensed under the Apache-2.0 license
- * See LICENSE in the project root for license information.
- */
-.body-default {
-  font-size: var(--wcss-body-default-font-size, 1rem);
-  line-height: var(--wcss-body-default-line-height, 1.5rem);
-}
-
-.body-default, .body-lg {
-  font-family: var(--wcss-body-family, "AS Circular"), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  font-weight: var(--wcss-body-weight, 450);
-  letter-spacing: var(--wcss-body-letter-spacing, 0);
-}
-
-.body-lg {
-  font-size: var(--wcss-body-lg-font-size, 1.125rem);
-  line-height: var(--wcss-body-lg-line-height, 1.625rem);
-}
-
-.body-sm {
-  font-size: var(--wcss-body-sm-font-size, 0.875rem);
-  line-height: var(--wcss-body-sm-line-height, 1.25rem);
-}
-
-.body-sm, .body-xs {
-  font-family: var(--wcss-body-family, "AS Circular"), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  font-weight: var(--wcss-body-weight, 450);
-  letter-spacing: var(--wcss-body-letter-spacing, 0);
-}
-
-.body-xs {
-  font-size: var(--wcss-body-xs-font-size, 0.75rem);
-  line-height: var(--wcss-body-xs-line-height, 1rem);
-}
-
-.body-2xs {
-  font-family: var(--wcss-body-family, "AS Circular"), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  font-size: var(--wcss-body-2xs-font-size, 0.625rem);
-  font-weight: var(--wcss-body-weight, 450);
-  letter-spacing: var(--wcss-body-letter-spacing, 0);
-  line-height: var(--wcss-body-2xs-line-height, 0.875rem);
-}
-
-.display-2xl {
-  font-family: var(--wcss-display-2xl-family, "AS Circular"), var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
-  font-size: var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));
-  font-weight: var(--wcss-display-2xl-weight, 300);
-  letter-spacing: var(--wcss-display-2xl-letter-spacing, 0);
-  line-height: var(--wcss-display-2xl-line-height, 1.3);
-}
-
-.display-xl {
-  font-family: var(--wcss-display-xl-family, "AS Circular"), var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
-  font-size: var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));
-  font-weight: var(--wcss-display-xl-weight, 300);
-  letter-spacing: var(--wcss-display-xl-letter-spacing, 0);
-  line-height: var(--wcss-display-xl-line-height, 1.3);
-}
-
-.display-lg {
-  font-family: var(--wcss-display-lg-family, "AS Circular"), var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
-  font-size: var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));
-  font-weight: var(--wcss-display-lg-weight, 300);
-  letter-spacing: var(--wcss-display-lg-letter-spacing, 0);
-  line-height: var(--wcss-display-lg-line-height, 1.3);
-}
-
-.display-md {
-  font-family: var(--wcss-display-md-family, "AS Circular"), var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
-  font-size: var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));
-  font-weight: var(--wcss-display-md-weight, 300);
-  letter-spacing: var(--wcss-display-md-letter-spacing, 0);
-  line-height: var(--wcss-display-md-line-height, 1.3);
-}
-
-.display-sm {
-  font-family: var(--wcss-display-sm-family, "AS Circular"), var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
-  font-size: var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));
-  font-weight: var(--wcss-display-sm-weight, 300);
-  letter-spacing: var(--wcss-display-sm-letter-spacing, 0);
-  line-height: var(--wcss-display-sm-line-height, 1.3);
-}
-
-.display-xs {
-  font-family: var(--wcss-display-xs-family, "AS Circular"), var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
-  font-size: var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));
-  font-weight: var(--wcss-display-xs-weight, 300);
-  letter-spacing: var(--wcss-display-xs-letter-spacing, 0);
-  line-height: var(--wcss-display-xs-line-height, 1.3);
-}
-
-.heading-xl {
-  font-family: var(--wcss-heading-xl-family, "AS Circular"), var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
-  font-size: var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));
-  font-weight: var(--wcss-heading-xl-weight, 300);
-  letter-spacing: var(--wcss-heading-xl-letter-spacing, 0);
-  line-height: var(--wcss-heading-xl-line-height, 1.3);
-}
-
-.heading-lg {
-  font-family: var(--wcss-heading-lg-family, "AS Circular"), var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
-  font-size: var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));
-  font-weight: var(--wcss-heading-lg-weight, 300);
-  letter-spacing: var(--wcss-heading-lg-letter-spacing, 0);
-  line-height: var(--wcss-heading-lg-line-height, 1.3);
-}
-
-.heading-md {
-  font-family: var(--wcss-heading-md-family, "AS Circular"), var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
-  font-size: var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));
-  font-weight: var(--wcss-heading-md-weight, 300);
-  letter-spacing: var(--wcss-heading-md-letter-spacing, 0);
-  line-height: var(--wcss-heading-md-line-height, 1.3);
-}
-
-.heading-sm {
-  font-family: var(--wcss-heading-sm-family, "AS Circular"), var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
-  font-size: var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));
-  font-weight: var(--wcss-heading-sm-weight, 300);
-  letter-spacing: var(--wcss-heading-sm-letter-spacing, 0);
-  line-height: var(--wcss-heading-sm-line-height, 1.3);
-}
-
-.heading-xs {
-  font-family: var(--wcss-heading-xs-family, "AS Circular"), var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
-  font-size: var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));
-  font-weight: var(--wcss-heading-xs-weight, 450);
-  letter-spacing: var(--wcss-heading-xs-letter-spacing, 0);
-  line-height: var(--wcss-heading-xs-line-height, 1.3);
-}
-
-.heading-2xs {
-  font-family: var(--wcss-heading-2xs-family, "AS Circular"), var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
-  font-size: var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));
-  font-weight: var(--wcss-heading-2xs-weight, 450);
-  letter-spacing: var(--wcss-heading-2xs-letter-spacing, 0);
-  line-height: var(--wcss-heading-2xs-line-height, 1.3);
-}
-
-.accent-2xl {
-  font-family: var(--wcss-accent-2xl-family, "Good OT"), var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
-  font-size: var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));
-  font-weight: var(--wcss-accent-2xl-weight, 450);
-  letter-spacing: var(--wcss-accent-2xl-letter-spacing, 0.05em);
-  line-height: var(--wcss-accent-2xl-line-height, 1);
-}
-
-.accent-2xl, .accent-xl {
-  text-transform: uppercase;
-}
-
-.accent-xl {
-  font-family: var(--wcss-accent-xl-family, "Good OT"), var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
-  font-size: var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));
-  font-weight: var(--wcss-accent-xl-weight, 450);
-  letter-spacing: var(--wcss-accent-xl-letter-spacing, 0.05em);
-  line-height: var(--wcss-accent-xl-line-height, 1.3);
-}
-
-.accent-lg {
-  font-family: var(--wcss-accent-lg-family, "Good OT"), var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
-  font-size: var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));
-  font-weight: var(--wcss-accent-lg-weight, 450);
-  letter-spacing: var(--wcss-accent-lg-letter-spacing, 0.05em);
-  line-height: var(--wcss-accent-lg-line-height, 1.3);
-}
-
-.accent-lg, .accent-md {
-  text-transform: uppercase;
-}
-
-.accent-md {
-  font-family: var(--wcss-accent-md-family, "Good OT"), var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
-  font-size: var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));
-  font-weight: var(--wcss-accent-md-weight, 500);
-  letter-spacing: var(--wcss-accent-md-letter-spacing, 0.05em);
-  line-height: var(--wcss-accent-md-line-height, 1.3);
-}
-
-.accent-sm {
-  font-family: var(--wcss-accent-sm-family, "Good OT"), var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
-  font-size: var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));
-  font-weight: var(--wcss-accent-sm-weight, 500);
-  letter-spacing: var(--wcss-accent-sm-letter-spacing, 0.05em);
-  line-height: var(--wcss-accent-sm-line-height, 1.3);
-}
-
-.accent-sm, .accent-xs {
-  text-transform: uppercase;
-}
-
-.accent-xs {
-  font-family: var(--wcss-accent-xs-family, "Good OT"), var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
-  font-size: var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));
-  font-weight: var(--wcss-accent-xs-weight, 500);
-  letter-spacing: var(--wcss-accent-xs-letter-spacing, 0.1em);
-  line-height: var(--wcss-accent-xs-line-height, 1.3);
-}
-
-.accent-2xs {
-  font-family: var(--wcss-accent-2xs-family, "Good OT"), var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
-  font-size: var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));
-  font-weight: var(--wcss-accent-2xs-weight, 450);
-  letter-spacing: var(--wcss-accent-2xs-letter-spacing, 0.1em);
-  line-height: var(--wcss-accent-2xs-line-height, 1.3);
-  text-transform: uppercase;
-}
-
-:host {
-  interpolate-size: allow-keywords;
-  --webkit-fill: -webkit-fill-available;
-}
-:host .trigger {
-  position: relative;
-  display: inline-block;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: var(--ds-border-radius, 0.375rem);
-}
-:host .trigger:hover {
-  text-decoration: underline;
-}
-:host .trigger[fluid] {
-  max-width: calc(100% - 3px);
-}
-:host ::slotted([slot=trigger]) {
-  padding-left: var(--ds-size-100, 0.5rem);
-  padding-right: var(--ds-size-200, 1rem);
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-:host .iconWrapper {
-  height: var(--ds-size-300, 1.5rem);
-  margin-top: -2px;
-}
-:host [auro-icon] {
-  --ds-auro-icon-size: var(--ds-size-300, 1.5rem);
-}
-:host [auro-icon][hidden] {
-  display: none;
-}
-:host .content {
-  width: 100%;
-  transition: all 0.5s ease-in-out;
-  transition-property: height;
-}
-:host .componentWrapper {
-  height: 100%;
-  overflow: hidden;
-}
-:host .contentWrapper {
-  padding-left: var(--ds-size-400, 2rem);
-  padding-bottom: var(--ds-size-300, 1.5rem);
-}
-
-:host(:focus) .trigger {
-  border-width: 1px;
-  border-style: solid;
-}
-
-:host([chevron=right]) ::slotted([slot=trigger]) {
-  padding-left: 0;
-  padding-right: var(--ds-size-100, 0.5rem);
-}
-:host([chevron=right]) .contentWrapper {
-  padding-left: 0;
-}
-
-:host([alignRight]) .componentWrapper {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-}
-
-:host([fluid]) .trigger {
-  width: 100%;
-}
-
-:host([grouped]) .componentWrapper {
-  border-bottom-width: 1px;
-  border-bottom-style: solid;
-}
-
-:host([grouped][chevron=right]:not([alignright])) .trigger {
-  width: var(--webkit-fill, 100%);
-  --trigger-padding-right: var(--ds-size-200, 1rem);
-}
-
-:host(:not([expanded])) .content,
-:host([expanded=false]) .content {
-  height: 0 !important;
-}
-
-:host([expanded]) .content {
-  height: auto;
-}
-
-:host([emphasis]) .trigger {
-  border-style: solid;
-  border-width: 1px;
-  border-left-width: 2px;
-  --trigger-padding-left: var(--ds-size-200, 1rem);
-}
-:host([emphasis]) .trigger:before {
-  display: block;
-  position: absolute;
-  top: -1px;
-  left: -2px;
-  width: 1px;
-  height: calc(100% + 2px);
-  content: "";
-  border-left-style: solid;
-  border-left-width: 2px;
-}
-:host([emphasis]) .trigger:focus {
-  border-left-width: 1px;
-  margin-left: 1px;
-}
-:host([emphasis]) .content {
-  border-left-width: 2px;
-  border-left-style: solid;
-  padding: unset;
-}
-:host([emphasis]) .contentWrapper {
-  padding-left: var(--ds-size-200, 1rem);
-}
-:host([emphasis]) .iconWrapper {
-  padding-right: var(--ds-size-200, 1rem);
-}
-
-:host([emphasis]:not([expanded]):hover) .trigger {
-  text-decoration: unset;
-}
-
-:host([chevron=none]) ::slotted([slot=trigger]),
-:host([chevron=none]) .contentWrapper {
-  padding-left: unset;
-}

package/src/styles/style.scss

@@ -1,191 +0,0 @@
-// Copyright (c) 2023 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
-// See LICENSE in the project root for license information.
-
-// ---------------------------------------------------------------------
-
-/* stylelint-disable order/properties-order, selector-max-combinators, selector-max-compound-selectors, declaration-empty-line-before, declaration-no-important, no-descending-specificity */
-
-// Import Auro tokens
-@use "@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables" as vac;
-
-@use "@aurodesignsystem/webcorestylesheets/dist/bundled/type/classes.alaska.min.css";
-
-:host {
-  interpolate-size: allow-keywords; // stylelint-disable-line
-
-  --webkit-fill: -webkit-fill-available;
-
-  .trigger {
-    position: relative;
-
-    display: inline-block;
-
-    border-width: 1px;
-    border-style: solid;
-    border-radius: var(--ds-border-radius, vac.$ds-border-radius);
-
-    &:hover {
-      text-decoration: underline;
-    }
-
-    &[fluid] {
-      max-width: calc(100% - 3px); // 3px to account for borders
-    }
-  }
-
-  ::slotted([slot="trigger"]) {
-    padding-left: var(--ds-size-100, vac.$ds-size-100);
-    padding-right: var(--ds-size-200, vac.$ds-size-200);
-
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  .iconWrapper {
-    height: var(--ds-size-300, vac.$ds-size-300);
-    margin-top: -2px;
-  }
-
-  [auro-icon] {
-    --ds-auro-icon-size: var(--ds-size-300, #{vac.$ds-size-300});
-
-    &[hidden] { // stylelint-disable-line selector-max-attribute
-      display: none;
-    }
-  }
-
-  .content {
-    width: 100%;
-
-    transition: all 0.5s ease-in-out;
-    transition-property: height;
-  }
-
-  .componentWrapper {
-    height: 100%;
-    overflow: hidden;
-  }
-
-  .contentWrapper {
-    padding-left: var(--ds-size-400, vac.$ds-size-400);
-    padding-bottom: var(--ds-size-300, vac.$ds-size-300);
-  }
-}
-
-:host(:focus) {
-  .trigger {
-    border-width: 1px;
-    border-style: solid;
-  }
-}
-
-:host([chevron="right"]) {
-  ::slotted([slot="trigger"]) {
-    padding-left: 0;
-    padding-right: var(--ds-size-100, vac.$ds-size-100);
-  }
-
-  .contentWrapper {
-    padding-left: 0;
-  }
-}
-
-:host([alignRight]) {
-  .componentWrapper {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-  }
-}
-
-:host([fluid]) {
-  .trigger {
-    width: 100%;
-  }
-}
-
-:host([grouped]) {
-  .componentWrapper {
-    border-bottom-width: 1px;
-    border-bottom-style: solid;
-  }
-}
-
-:host([grouped][chevron="right"]:not([alignright])) {
-  .trigger {
-    width: var(--webkit-fill, 100%);
-
-    --trigger-padding-right: var(--ds-size-200, #{vac.$ds-size-200}); // will be passed to the child component
-  }
-}
-
-:host(:not([expanded])),
-:host([expanded="false"]) {
-  .content  {
-    height: 0 !important;
-  }
-}
-
-:host([expanded]) {
-  .content {
-    height: auto;
-  }
-}
-
-:host([emphasis]) {
-  .trigger {
-    border-style: solid;
-    border-width: 1px;
-    border-left-width: 2px;
-
-    --trigger-padding-left: var(--ds-size-200, #{vac.$ds-size-200}); // will be passed to the child component
-
-    &:before {
-      display: block;
-
-      position: absolute;
-
-      top: -1px;
-      left: -2px;
-
-      width: 1px;
-      height: calc(100% + 2px);
-      content: '';
-      border-left-style: solid;
-      border-left-width: 2px;
-    }
-
-    &:focus {
-      border-left-width: 1px;
-      margin-left: 1px;
-    }
-  }
-
-  .content {
-    border-left-width: 2px;
-    border-left-style: solid;
-    padding: unset;
-  }
-
-  .contentWrapper {
-    padding-left: var(--ds-size-200, vac.$ds-size-200);
-  }
-
-  .iconWrapper {
-    padding-right: var(--ds-size-200, vac.$ds-size-200);
-  }
-}
-
-:host([emphasis]:not([expanded]):hover) {
-  .trigger {
-    text-decoration: unset;
-  }
-}
-
-:host([chevron="none"]) {
-  ::slotted([slot="trigger"]),
-  .contentWrapper {
-    padding-left: unset;
-  }
-}

package/src/styles/tokens-css.js

@@ -1,2 +0,0 @@
-import { css } from 'lit';
-export default css`:host{--ds-auro-accordion-content-border-color: transparent;--ds-auro-accordion-group-border-color: var(--ds-basic-color-border-divider, rgba(0, 0, 0, 0.15));--ds-auro-accordion-trigger-border-color: transparent;--ds-auro-accordion-trigger-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-accordion-trigger-icon-color: var(--ds-basic-color-texticon-default, #2a2a2a)}`;

package/src/styles/tokens.css

@@ -1,7 +0,0 @@
-:host {
-  --ds-auro-accordion-content-border-color: transparent;
-  --ds-auro-accordion-group-border-color: var(--ds-basic-color-border-divider, rgba(0, 0, 0, 0.15));
-  --ds-auro-accordion-trigger-border-color: transparent;
-  --ds-auro-accordion-trigger-color: var(--ds-basic-color-texticon-default, #2a2a2a);
-  --ds-auro-accordion-trigger-icon-color: var(--ds-basic-color-texticon-default, #2a2a2a);
-}

package/src/styles/tokens.scss

@@ -1,9 +0,0 @@
-@use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;
-
-:host {
-  --ds-auro-accordion-content-border-color: transparent;
-  --ds-auro-accordion-group-border-color: var(--ds-basic-color-border-divider, #{v.$ds-basic-color-border-divider});
-  --ds-auro-accordion-trigger-border-color: transparent;
-  --ds-auro-accordion-trigger-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
-  --ds-auro-accordion-trigger-icon-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
-}