@tmorrow/cre8-wc 1.2.4 → 1.2.6

package/lib/components/accordion-item/accordion-item.js

@@ -1,889 +1,169 @@
-import { css as g, html as a } from "lit";
-import { property as r, state as p } from "lit/decorators.js";
-import { ifDefined as h } from "lit-html/directives/if-defined.js";
-import u from "classnames";
-import { Cre8Element as f } from "../cre8-element.js";
-import "../icon/icon.js";
-import "../button/button.js";
-const b = g`.cre8-u-content-knockout-brand {
-  color: var(----cre8-color-content-knockout-brand);
-}
-
-.cre8-u-is-hidden {
-  display: none !important;
-  visibility: hidden !important;
-}
-
-.cre8-u-is-vishidden {
-  position: absolute !important;
-  overflow: hidden;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  border: 0;
-  clip: rect(1px, 1px, 1px, 1px);
-}
-
-@media all and (min-width: 23.4375rem) {
-  .cre8-u-hide-sm {
-    display: none !important;
-  }
-}
-@media all and (min-width: 35rem) {
-  .cre8-u-hide-sm-2 {
-    display: none !important;
-  }
-}
-@media all and (min-width: 48rem) {
-  .cre8-u-hide-md {
-    display: none !important;
-  }
-}
-@media all and (min-width: 60rem) {
-  .cre8-u-hide-lg {
-    display: none !important;
-  }
-}
-@media all and (min-width: 75rem) {
-  .cre8-u-hide-xl {
-    display: none !important;
-  }
-}
-@media all and (max-width: 23.4375rem) {
-  .cre8-u-show-sm {
-    display: none !important;
-  }
-}
-@media all and (max-width: 35rem) {
-  .cre8-u-show-sm-2 {
-    display: none !important;
-  }
-}
-@media all and (max-width: 48rem) {
-  .cre8-u-show-md {
-    display: none !important;
-  }
-}
-@media all and (max-width: 60rem) {
-  .cre8-u-show-lg {
-    display: none !important;
-  }
-}
-@media all and (max-width: 75rem) {
-  .cre8-u-show-xl {
-    display: none !important;
-  }
-}
-.cre8-u-margin-none {
-  margin: 0 !important;
-}
-
-.cre8-u-margin-sm {
-  margin: size(1) !important;
-}
-
-.cre8-u-margin-md {
-  margin: size(2) !important;
-}
-
-.cre8-u-margin-lg {
-  margin: size(3) !important;
-}
-
-.cre8-u-margin-xl {
-  margin: size(4) !important;
-}
-
-.cre8-u-margin-xxl {
-  margin: size(8) !important;
-}
-
-.cre8-u-margin-top-none {
-  margin-top: 0 !important;
-}
-
-.cre8-u-margin-top-sm {
-  margin-top: size(1) !important;
-}
-
-.cre8-u-margin-top-md {
-  margin-top: size(2) !important;
-}
-
-.cre8-u-margin-top-lg {
-  margin-top: size(3) !important;
-}
-
-.cre8-u-margin-top-xl {
-  margin-top: size(4) !important;
-}
-
-.cre8-u-margin-top-xxl {
-  margin-top: size(8) !important;
-}
-
-.cre8-u-margin-right-none {
-  margin-right: 0 !important;
-}
-
-.cre8-u-margin-right-sm {
-  margin-right: size(1) !important;
-}
-
-.cre8-u-margin-right-md {
-  margin-right: size(2) !important;
-}
-
-.cre8-u-margin-right-lg {
-  margin-right: size(3) !important;
-}
-
-.cre8-u-margin-right-xl {
-  margin-right: size(4) !important;
-}
-
-.cre8-u-margin-right-xxl {
-  margin-right: size(8) !important;
-}
-
-.cre8-u-margin-bottom-none {
-  margin-bottom: 0 !important;
-}
-
-.cre8-u-margin-bottom-sm {
-  margin-bottom: size(1) !important;
-}
-
-.cre8-u-margin-bottom-md {
-  margin-bottom: size(2) !important;
-}
-
-.cre8-u-margin-bottom-lg {
-  margin-bottom: size(3) !important;
-}
-
-.cre8-u-margin-bottom-xl {
-  margin-bottom: size(4) !important;
-}
-
-.cre8-u-margin-bottom-xxl {
-  margin-bottom: size(8) !important;
-}
-
-.cre8-u-margin-bottom-xl-xxl {
-  margin-bottom: size(4) !important;
-}
-
-@media all and (min-width: 768px) {
-  .cre8-u-margin-bottom-xl-xxl {
-    margin-bottom: size(8) !important;
-  }
-}
-.cre8-u-margin-left-none {
-  margin-left: 0 !important;
-}
-
-.cre8-u-margin-left-sm {
-  margin-left: size(1) !important;
-}
-
-.cre8-u-margin-left-md {
-  margin-left: size(2) !important;
-}
-
-.cre8-u-margin-left-lg {
-  margin-left: size(3) !important;
-}
-
-.cre8-u-margin-left-xl {
-  margin-left: size(4) !important;
-}
-
-.cre8-u-margin-left-xxl {
-  margin-left: size(8) !important;
-}
-
-.cre8-u-padding-none {
-  padding: 0 !important;
-}
-
-.cre8-u-padding-sm {
-  padding: size(1) !important;
-}
-
-.cre8-u-padding-md {
-  padding: size(2) !important;
-}
-
-.cre8-u-padding-lg {
-  padding: size(3) !important;
-}
-
-.cre8-u-padding-xl {
-  padding: size(4) !important;
-}
-
-.cre8-u-padding-xxl {
-  padding: size(8) !important;
-}
-
-.cre8-u-padding-top-none {
-  padding-top: 0 !important;
-}
-
-.cre8-u-padding-top-sm {
-  padding-top: size(1) !important;
-}
-
-.cre8-u-padding-top-md {
-  padding-top: size(2) !important;
-}
-
-.cre8-u-padding-top-lg {
-  padding-top: size(3) !important;
-}
-
-.cre8-u-padding-top-xl {
-  padding-top: size(4) !important;
-}
-
-.cre8-u-padding-top-xxl {
-  padding-top: size(8) !important;
-}
-
-.cre8-u-padding-right-none {
-  padding-right: 0 !important;
-}
-
-.cre8-u-padding-right-sm {
-  padding-right: size(1) !important;
-}
-
-.cre8-u-padding-right-md {
-  padding-right: size(2) !important;
-}
-
-.cre8-u-padding-right-lg {
-  padding-right: size(3) !important;
-}
-
-.cre8-u-padding-right-xl {
-  padding-right: size(4) !important;
-}
-
-.cre8-u-padding-right-xxl {
-  padding-right: size(8) !important;
-}
-
-.cre8-u-padding-bottom-none {
-  padding-bottom: 0 !important;
-}
-
-.cre8-u-padding-bottom-sm {
-  padding-bottom: size(1) !important;
-}
-
-.cre8-u-padding-bottom-md {
-  padding-bottom: size(2) !important;
-}
-
-.cre8-u-padding-bottom-lg {
-  padding-bottom: size(3) !important;
-}
-
-.cre8-u-padding-bottom-xl {
-  padding-bottom: size(4) !important;
-}
-
-.cre8-u-padding-bottom-xxl {
-  padding-bottom: size(8) !important;
-}
-
-.cre8-u-padding-left-none {
-  padding-left: 0 !important;
-}
-
-.cre8-u-padding-left-sm {
-  padding-left: size(1) !important;
-}
-
-.cre8-u-padding-left-md {
-  padding-left: size(2) !important;
-}
-
-.cre8-u-padding-left-lg {
-  padding-left: size(3) !important;
-}
-
-.cre8-u-padding-left-xl {
-  padding-left: size(4) !important;
-}
-
-.cre8-u-padding-left-xxl {
-  padding-left: size(8) !important;
-}
-
-.cre8-u-display-flex {
-  display: flex !important;
-}
-
-.cre8-u-display-block {
-  display: block !important;
-}
-
-body {
-  font-family: var(--cre8-typography-body-default-font-family);
-  font-size: var(--cre8-typography-body-default-font-size);
-  font-weight: var(--cre8-typography-body-default-font-weight);
-  line-height: var(--cre8-typography-body-default-line-height);
-  -webkit-text-decoration: var(--cre8-typography-body-default-text-decoration);
-  text-decoration: var(--cre8-typography-body-default-text-decoration);
-  text-transform: var(--cre8-typography-body-default-text-transform);
-  display: flex;
-  flex-direction: column;
-  padding: 0;
-  margin: 0;
-  color: var(--cre8-color-content-default);
-  background: var(--background-default);
-}
-
-@media all and (min-width: 60rem) {
-  .page-container {
-    background: linear-gradient(90deg, #fff 0, #fff 66.66%, #f8f8f9 0, #f8f8f9 0);
-  }
-}
-.band__inner {
-  margin-left: 2rem;
-  margin-right: 2rem;
-}
-
-@media all and (min-width: 60rem) {
-  .band__inner {
-    margin-right: 0;
-  }
-}
-img {
-  max-width: 100%;
-  height: auto;
-}
-
-/**
- * Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/
- */
-*,
-::slotted(*),
-*:before,
-*:after {
-  box-sizing: border-box;
-}
-
-:root {
-  --size-base-unit: 0.5rem;
-}
-
-/**
- * RTL support for values logical properties can't automatically adjust for
- * 1) Percentage based horizontal translate values need to be flipped
- * 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
- * 3) Inverse items that have 45degs
- */
-[dir=rtl] {
-  --rtlTranslateX: 50%;
-  /* 1 */
-  --rtlGradientToRight: 270deg;
-  /* 2 */
-  --rtlRotate45Inverse: -45deg;
-  /* 3 */
-}
-
-/**
- * Visible focus outline for elements on a light background
- */
-/**
- * Visible focus outline for elements with an error status
- */
-/**
- * Visible focus outline for elements on a dark background
- */
-/**
-* Focus state for themes that need a dashed outline for focus
-* state
-**/
-/**
- * Invisible focus outline for elements that need a more visible
- * focus state for high-contrast mode
- */
-/**
- * Visually hidden from display
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import svgCaretUp from '@tmorrow/cre8-wc/icons/System/Regular/Caret_Up.svg?raw';
+import { html, } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import classnames from 'classnames';
+import { Cre8Element } from '../cre8-element';
+import '../icon/icon';
+import '../button/button';
+import styles from './accordion-item.styles.js';
+/**
+ *
+ * The accordion item component delivers large amounts of content in a small space
+ * through progressive disclosure. That is, the user gets key details about the
+ * underlying content and can choose to expand that content within the constraints
+ * of the accordion item. Accordion Items work especially well on mobile interfaces or
+ * whenever vertical space is at a premium.
+ *
+ * ## HOW TO USE
+ * Avoid “nested” accordion items—that is, collapsible content within collapsible content.
+ * This type of pattern goes against UX best practices.
+ *
+ * The Cre8 accordion item header allows for two sizes:
+ * 'sm' [cre8-typography-title-default] or 'lg' [cre8-typography-title-large]
+ *
+ * A chevron is used to indicate the “expand/collapse” action, though the entire
+ * header area is clickable for the same action.
+ *
+ * **NOTE**: The header of the accordion item uses h tags so be sure to choose the headingTagVariant that
+ * fits into the hierarchy of your html page layout. THIS WILL NOT CHANGE THE APPEARANCE OF THE HEADER.
+ *
+ * @slot The body of the accordion item will be any valid html
+ * inserted between the cre8-accordion-item opening and closing tags.
+ *
+ *
+ * @csspart ::part('header') - The container around the interactive header.
+ * @csspart ::part('button') - The button containing the header text and the animated icon.
+ * @csspart ::part('icon') - The animated icon that revolves on click.
+ * @csspart ::part('body') - The container around the expanding body section.
+ * @csspart ::part('body-inner') - The container around the slot into which any user provided HTML is inserted.
+ *
  */
-/*
-=======
-Animations
-=======
-*/
-:host {
-  --cre8-z-index-1: 1;
-  --cre8-z-index-50: 50;
-  --cre8-z-index-100: 100;
-  --cre8-z-index-200: 200;
-  --cre8-z-index-1030: 1030;
-  --cre8-anim-fade-quick: 0.35s;
-  --cre8-anim-ease: ease;
-}
-
-@keyframes fadeIn {
-  100% {
-    opacity: 1;
-  }
-}
-@keyframes slideIn {
-  100% {
-    transform: translateX(0);
-  }
-}
-@keyframes slideInFwd {
-  100% {
-    width: 272px;
-    height: 272px;
-  }
-}
-@keyframes slideOutRight {
-  100% {
-    width: 272px;
-    height: 272px;
-  }
-}
-@keyframes slideUp {
-  100% {
-    transform: translateY(0);
-  }
-}
-@media (width >= 481px) {
-  @keyframes slideInFwd {
-    100% {
-      width: 417px;
-      height: 417px;
-    }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 417px;
-      height: 417px;
-    }
-  }
-}
-@media (width >= 48rem) {
-  @keyframes slideInFwd {
-    100% {
-      width: 330px;
-      height: 330px;
+export class Cre8AccordionItem extends Cre8Element {
+    constructor() {
+        super();
+        /**
+         *
+         * When true, the Accordion Item is opens, when false it closes;
+         * @prop {boolean} isActive
+         *
+         */
+        this.isActive = false;
+        /**
+         *
+         * Users can choose between two header sizes:  'sm' [title-default] or 'lg' [title-large].
+         * @prop {'sm' | 'lg'} size
+         *
+         *
+         */
+        this.size = 'sm';
+        /**
+         *
+         * Purely meant to help the user structure the HTML page hierarchy. Does not change the
+         * header size. Defaults to 'h3'
+         * @prop {'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'} headingTagVariant
+         *
+         *
+         */
+        this.headingTagVariant = 'h3';
+        const randomId = Math.floor(Math.random() * 900000) + 100000;
+        this._ariaControls = `cre8-accordion-item-details-${randomId}`;
+        this.accordionItemId = this.accordionItemId ?? `cre8-accordion-item-${randomId}`;
     }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 330px;
-      height: 330px;
-      transform: translateX(calc(100vw - 45px));
+    connectedCallback() {
+        super.connectedCallback();
+        this._setContentHeight();
+        if (this.isActive) {
+            this._fullyOpen = true;
+            this._setContentHeight();
+        }
     }
-  }
-}
-@media (width >= 60rem) {
-  @keyframes slideInFwd {
-    100% {
-      width: 460px;
-      height: 460px;
-    }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 460px;
-      height: 460px;
-      transform: translateX(calc(100vw - 45px));
-    }
-  }
-}
-@media (width >= 75rem) {
-  @keyframes slideInFwd {
-    100% {
-      width: 592px;
-      height: 591px;
-    }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 592px;
-      height: 591px;
-      transform: translateX(calc(100vw - 45px));
+    async _setContentHeight() {
+        await this.updateComplete;
+        if ((this.isActive && !this._fullyOpen) || (!this.isActive && this._fullyOpen)) {
+            this._height = `${this.shadowRoot?.querySelector('.cre8-c-accordion-item__body-inner')?.scrollHeight}px`;
+        }
+        else if (this.isActive && this._fullyOpen) {
+            this._height = 'auto';
+        }
+        else if (!this.isActive && !this._fullyOpen) {
+            this._height = '0';
+        }
     }
-  }
-}
-@media (width >= 87.5rem) {
-  @keyframes slideOutRight {
-    100% {
-      width: 592px;
-      height: 591px;
-      transform: translateX(calc(100vw - 120px));
+    _toggleAccordionItem() {
+        this.isActive = !this.isActive;
+        if (this.isActive) {
+            this._setContentHeight();
+            setTimeout(() => {
+                this._fullyOpen = true;
+                this._setContentHeight();
+            }, 350);
+        }
+        else {
+            this._setContentHeight();
+            setTimeout(() => {
+                this._fullyOpen = false;
+                this._setContentHeight();
+            }, 50);
+        }
     }
-  }
-}
-@media (width >= 2200px) {
-  @keyframes slideOutRight {
-    100% {
-      width: 592px;
-      height: 591px;
-      transform: translateX(calc(100vw - 592px));
-    }
-  }
-}
-span.ripple {
-  position: absolute;
-  border-radius: 50%;
-  transform: scale(0);
-  animation: ripple 600ms linear;
-  background-color: var(--ripple-bg-color);
-}
-
-@keyframes ripple {
-  to {
-    transform: scale(4);
-    opacity: 1;
-  }
-}
-:root {
-  --size-base-unit: 0.5rem;
-}
-
-/**
- * RTL support for values logical properties can't automatically adjust for
- * 1) Percentage based horizontal translate values need to be flipped
- * 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
- * 3) Inverse items that have 45degs
- */
-[dir=rtl] {
-  --rtlTranslateX: 50%;
-  /* 1 */
-  --rtlGradientToRight: 270deg;
-  /* 2 */
-  --rtlRotate45Inverse: -45deg;
-  /* 3 */
-}
-
-/**
- * Visible focus outline for elements on a light background
- */
-/**
- * Visible focus outline for elements with an error status
- */
-/**
- * Visible focus outline for elements on a dark background
- */
-/**
-* Focus state for themes that need a dashed outline for focus
-* state
-**/
-/**
- * Invisible focus outline for elements that need a more visible
- * focus state for high-contrast mode
- */
-/**
- * Visually hidden from display
- */
-/**
-* Accordion Item panel button
-* 1) Icon rotating on open was causing scrollbar to continuously appear/disappear
-*    during the animation, overflow-x: hidden; prevents this from happening
-*/
-:host {
-  display: block;
-}
-:host ::slotted(*) {
-  text-align: left;
-  width: 100%;
-}
-
-.cre8-c-accordion-item {
-  border-bottom: var(--cre8-accordion-item-border-bottom);
-  border-radius: var(--cre8-border-radius-none);
-  --cre8-u-icon-display: flex;
-  --cre8-u-icon-align-items: center;
-  --cre8-u-icon-justify-content: center;
-  padding: 1.5rem 0.5rem;
-}
-
-.cre8-c-accordion-item--small cre8-heading button {
-  font-family: var(--cre8-typography-title-default-mobile-font-family);
-  font-size: var(--cre8-typography-title-default-mobile-font-size);
-  font-weight: var(--cre8-typography-title-default-mobile-font-weight);
-  line-height: var(--cre8-typography-title-default-mobile-line-height);
-  text-decoration: var(--cre8-typography-title-default-mobile-text-decoration);
-  text-transform: var(--cre8-typography-title-default-mobile-text-transform);
-}
-@media all and (min-width: 768px) {
-  .cre8-c-accordion-item--small cre8-heading button {
-    font-family: var(--cre8-typography-title-default-font-family);
-    font-size: var(--cre8-typography-title-default-font-size);
-    font-weight: var(--cre8-typography-title-default-font-weight);
-    line-height: var(--cre8-typography-title-default-line-height);
-    text-decoration: var(--cre8-typography-title-default-text-decoration);
-    text-transform: var(--cre8-typography-title-default-text-transform);
-  }
-}
-
-.cre8-c-accordion-item--large cre8-heading button {
-  font-family: var(--cre8-typography-title-large-mobile-font-family);
-  font-size: var(--cre8-typography-title-large-mobile-font-size);
-  font-weight: var(--cre8-typography-title-large-mobile-font-weight);
-  line-height: var(--cre8-typography-title-large-mobile-line-height);
-  text-decoration: var(--cre8-typography-title-large-mobile-text-decoration);
-  text-transform: var(--cre8-typography-title-large-mobile-text-transform);
-}
-@media all and (min-width: 768px) {
-  .cre8-c-accordion-item--large cre8-heading button {
-    font-family: var(--cre8-typography-title-large-font-family);
-    font-size: var(--cre8-typography-title-large-font-size);
-    font-weight: var(--cre8-typography-title-large-font-weight);
-    line-height: var(--cre8-typography-title-large-line-height);
-    text-decoration: var(--cre8-typography-title-large-text-decoration);
-    text-transform: var(--cre8-typography-title-large-text-transform);
-  }
-}
-
-.cre8-c-accordion-item__body {
-  margin-right: 0rem;
-  margin-left: 0rem;
-  padding: 0rem;
-  overflow: hidden;
-  visibility: hidden;
-  transition: height var(--cre8-anim-fade-quick) var(--cre8-anim-ease), visibility var(--cre8-anim-fade-quick) var(--cre8-anim-ease);
-}
-.cre8-c-accordion-item.cre8-is-active .cre8-c-accordion-item__body {
-  visibility: visible;
-}
-
-.cre8-c-accordion-item__body-inner {
-  display: flex;
-  font-family: var(--cre8-typography-body-default-font-family);
-  font-size: var(--cre8-typography-body-default-font-size);
-  font-weight: var(--cre8-typography-body-default-font-weight);
-  line-height: var(--cre8-typography-body-default-line-height);
-  text-decoration: var(--cre8-typography-body-default-text-decoration);
-  text-transform: var(--cre8-typography-body-default-text-transform);
-  padding: 0.5rem 3rem 0rem 0.5rem;
-}
-
-cre8-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 1.5rem;
-  min-height: 1.5rem;
-  min-width: 1.5rem;
-  transition: transform var(--cre8-anim-fade-quick) var(--cre8-anim-ease);
-  width: 1.5rem;
-}
-.cre8-c-accordion-item.cre8-is-active cre8-icon {
-  transform: rotate(180deg);
-}
-
-.cre8-c-accordion-item__icon {
-  align-items: center;
-  background: var(--cre8-color-bg-brand-strong);
-  border-radius: var(--cre8-border-radius-round);
-  color: var(--cre8-color-content-knockout);
-  display: flex;
-  height: 2rem;
-  justify-content: center;
-  margin-left: 0.5rem;
-  margin-right: 0.125rem;
-  min-height: 2rem;
-  min-width: 2rem;
-  width: 2rem;
-}
-.cre8-c-accordion-item.cre8-is-active .cre8-c-accordion-item__icon {
-  background: var(--cre8-color-button-secondary-bg);
-  border: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-button-secondary-border);
-  color: var(--cre8-color-button-secondary-content);
-}
-.cre8-c-accordion-item.cre8-is-active .cre8-c-accordion-item__icon:hover {
-  border-color: var(--cre8-color-button-secondary-border-hover);
-  background-color: var(--cre8-color-button-secondary-bg-hover);
-  color: var(--cre8-color-button-secondary-content-hover);
-}
-.cre8-c-accordion-item.cre8-is-active .cre8-c-accordion-item__icon:focus {
-  border-radius: var(--cre8-border-radius-default);
-  box-shadow: 0rem 0rem 0rem 0.125rem var(--cre8-color-border-active-outline);
-  outline: none;
-}
-.cre8-c-accordion-item.cre8-is-active .cre8-c-accordion-item__icon:focus .cre8-c-accordion-item__icon {
-  border-color: var(--cre8-color-button-secondary-border-active);
-  color: var(--cre8-color-button-secondary-content-active);
-  background-color: var(--cre8-color-button-secondary-bg-active);
-}
-.cre8-c-accordion-item.cre8-is-active .cre8-c-accordion-item__icon:focus .cre8-c-accordion-item__tertiary-icon {
-  border-color: var(--cre8-color-border-transparent);
-  color: var(--cre8-color-button-tertiary-content-active);
-  background-color: var(--cre8-color-bg-transparent);
-}
-
-.cre8-c-accordion-item__button {
-  color: var(--cre8-color-content-default);
-  display: block;
-  appearance: none;
-  background-color: var(--cre8-color-bg-transparent);
-  border: var(--cre8-border-width-none);
-  cursor: pointer;
-  padding: 0.25rem 0.5rem;
-  overflow-x: hidden;
-  transition: color var(--cre8-anim-fade-quick) var(--cre8-anim-ease);
-  width: 100%;
-}
-.cre8-c-accordion-item__button.cre8-brand-color {
-  color: var(--cre8-color-content-brand-strong);
-}
-.cre8-c-accordion-item__button.cre8-u-justify-content-start {
-  justify-content: flex-start;
-}
-.cre8-c-accordion-item__button.cre8-u-justify-content-start .cre8-c-accordion-item__icon-before {
-  margin-left: 0rem;
-}
-.cre8-c-accordion-item__button:hover .cre8-c-accordion-item__icon {
-  border-color: var(--cre8-color-button-primary-border-hover);
-  background-color: var(--cre8-color-button-primary-bg-hover);
-  color: var(--cre8-color-button-primary-content-hover);
-}
-.cre8-c-accordion-item.cre8-is-active .cre8-c-accordion-item__button:hover .cre8-c-accordion-item__icon {
-  border-color: var(--cre8-color-button-secondary-border-hover);
-  background-color: var(--cre8-color-button-secondary-bg-hover);
-  color: var(--cre8-color-button-secondary-content-hover);
-}
-.cre8-c-accordion-item__button:hover .cre8-c-accordion-item__tertiary-icon {
-  border-color: var(--cre8-color-border-transparent);
-  color: var(--cre8-color-button-tertiary-content-hover);
-  background-color: var(--cre8-color-bg-transparent);
-}
-.cre8-c-accordion-item__button:focus {
-  border-radius: var(--cre8-border-radius-default);
-  box-shadow: 0rem 0rem 0rem 0.125rem var(--cre8-color-border-active-outline);
-  outline: none;
-}
-.cre8-c-accordion-item__button:focus .cre8-c-accordion-item__icon {
-  border-color: var(--cre8-color-button-primary-border-active);
-  color: var(--cre8-color-button-primary-content-active);
-  background-color: var(--cre8-color-button-primary-bg-active);
-}
-.cre8-c-accordion-item__button:focus .cre8-c-accordion-item__tertiary-icon {
-  border-color: var(--cre8-color-border-transparent);
-  color: var(--cre8-color-button-tertiary-content-active);
-  background-color: var(--cre8-color-bg-transparent);
-}
-
-.cre8-c-accordion-item--icon-before .cre8-c-accordion-item__body {
-  margin-left: 2.5rem;
-}
-
-.cre8-c-accordion-item__icon-before {
-  margin-right: 0.75rem;
-}
-.cre8-c-accordion-item__icon-before h4[slot=header] {
-  display: block;
-  pointer-events: none;
-}
-
-.cre8-c-accordion-item__button slot {
-  display: contents;
-  text-align: initial;
-}
-
-.cre8-c-accordion-item--icon-before-heading-text {
-  display: flex;
-  text-align: left;
-  flex-direction: row;
-  justify-content: flex-start;
-  align-items: center;
-  width: 100%;
-  min-width: 100%;
-}
-
-.cre8-c-accordion-item--icon-after-heading-text {
-  display: flex;
-  text-align: left;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  min-width: 100%;
-}`;
-var y = Object.defineProperty, t = (l, i, n, v) => {
-  for (var o = void 0, c = l.length - 1, s; c >= 0; c--)
-    (s = l[c]) && (o = s(i, n, o) || o);
-  return o && y(i, n, o), o;
-};
-const m = `<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-<path d="M15.7867 12.1506C15.7192 12.2183 15.639 12.2719 15.5507 12.3085C15.4624 12.3451 15.3678 12.3639 15.2722 12.3639C15.1766 12.3639 15.082 12.3451 14.9937 12.3085C14.9054 12.2719 14.8252 12.2183 14.7577 12.1506L7.99992 5.39197L1.24215 12.1506C1.10569 12.2871 0.920613 12.3638 0.727633 12.3638C0.534652 12.3638 0.349576 12.2871 0.213119 12.1506C0.076661 12.0142 3.8041e-09 11.8291 0 11.6361C-3.8041e-09 11.4432 0.076661 11.2581 0.213119 11.1216L7.4854 3.84933C7.55294 3.78172 7.63315 3.72808 7.72143 3.69148C7.80972 3.65488 7.90435 3.63605 7.99992 3.63605C8.09548 3.63605 8.19012 3.65488 8.2784 3.69148C8.36668 3.72808 8.44689 3.78172 8.51443 3.84933L15.7867 11.1216C15.8543 11.1892 15.908 11.2694 15.9446 11.3576C15.9812 11.4459 16 11.5406 16 11.6361C16 11.7317 15.9812 11.8263 15.9446 11.9146C15.908 12.0029 15.8543 12.0831 15.7867 12.1506Z"/>
-</svg>
-`, d = class d extends f {
-  constructor() {
-    super(), this.isActive = !1, this.size = "sm", this.headingTagVariant = "h3";
-    const i = Math.floor(Math.random() * 9e5) + 1e5;
-    this._ariaControls = `cre8-accordion-item-details-${i}`, this.accordionItemId = this.accordionItemId ?? `cre8-accordion-item-${i}`;
-  }
-  connectedCallback() {
-    super.connectedCallback(), this._setContentHeight(), this.isActive && (this._fullyOpen = !0, this._setContentHeight());
-  }
-  async _setContentHeight() {
-    await this.updateComplete, this.isActive && !this._fullyOpen || !this.isActive && this._fullyOpen ? this._height = `${this.shadowRoot?.querySelector(".cre8-c-accordion-item__body-inner")?.scrollHeight}px` : this.isActive && this._fullyOpen ? this._height = "auto" : !this.isActive && !this._fullyOpen && (this._height = "0");
-  }
-  _toggleAccordionItem() {
-    this.isActive = !this.isActive, this.isActive ? (this._setContentHeight(), setTimeout(() => {
-      this._fullyOpen = !0, this._setContentHeight();
-    }, 350)) : (this._setContentHeight(), setTimeout(() => {
-      this._fullyOpen = !1, this._setContentHeight();
-    }, 50));
-  }
-  render() {
-    const i = this.componentClassNames("cre8-c-accordion-item", {
-      "cre8-is-active": this.isActive,
-      "cre8-c-accordion-item--icon-before": this.iconBefore,
-      "cre8-c-accordion-item--small": this.size === "sm",
-      "cre8-c-accordion-item--large": this.size === "lg"
-    }), n = u("cre8-c-accordion-item__button", {
-      "cre8-is-active": this.isActive,
-      "cre8-u-justify-content-start": this.iconBefore,
-      "cre8-brand-color": this.brandHeader === !0
-    });
-    return a` <div id=${this.accordionItemId} class="${i}">
+    render() {
+        const componentClassNames = this.componentClassNames('cre8-c-accordion-item', {
+            'cre8-is-active': this.isActive,
+            'cre8-c-accordion-item--icon-before': this.iconBefore,
+            'cre8-c-accordion-item--small': this.size === 'sm',
+            'cre8-c-accordion-item--large': this.size === 'lg',
+        });
+        const buttonClassNames = classnames('cre8-c-accordion-item__button', {
+            'cre8-is-active': this.isActive,
+            'cre8-u-justify-content-start': this.iconBefore,
+            'cre8-brand-color': this.brandHeader === true,
+        });
+        return html ` <div id=${this.accordionItemId} class="${componentClassNames}">
       <cre8-heading
-        type=${this.size === "lg" ? "title-large" : "title-default"}
+        type=${this.size === 'lg' ? 'title-large' : 'title-default'}
         part="heading"
-        ?brandColor=${this.brandHeader}
-        tagVariant="${this.headingTagVariant ?? "h3"}"
+        ?brandColor=${(this.brandHeader)}
+        tagVariant="${this.headingTagVariant ?? 'h3'}"
         class="cre8-c-accordion-item__header"
       >
         <button
-          class="${n}"
-          aria-expanded="${h(this.isActive)}"
+          class="${buttonClassNames}"
+          aria-expanded="${ifDefined(this.isActive)}"
           aria-controls="${this._ariaControls}"
           part="button"
           role="button"
           id="${this.id}"
           @click=${this._toggleAccordionItem}
         >
-          ${this.iconBefore ? a`
+          ${this.iconBefore
+            ? html `
             <div class="cre8-c-accordion-item--icon-before-heading-text">
                 <div
-                  class=${this.tertiaryIcon ? "cre8-c-accordion-item__tertiary-icon cre8-c-accordion-item__icon-before" : "cre8-c-accordion-item__icon cre8-c-accordion-item__icon-before"}
+                  class=${this.tertiaryIcon
+                ? 'cre8-c-accordion-item__tertiary-icon cre8-c-accordion-item__icon-before'
+                : 'cre8-c-accordion-item__icon cre8-c-accordion-item__icon-before'}
                 >
-                  <cre8-icon rotate="180" svg=${m} aria-hidden="true"></cre8-icon>
+                  <cre8-icon rotate="180" svg=${svgCaretUp} aria-hidden="true"></cre8-icon>
                 </div>
-                ${this.heading ?? a` <slot name="heading"></slot>`}
+                ${this.heading ?? html ` <slot name="heading"></slot>`}
             </div>
-              ` : a`
+              `
+            : html `
           <div class="cre8-c-accordion-item--icon-after-heading-text">
-            ${this.heading ?? a` <slot name="heading"></slot>`}
+            ${this.heading ?? html ` <slot name="heading"></slot>`}
                 <div
-                  class=${this.tertiaryIcon ? "cre8-c-accordion-item__tertiary-icon cre8-c-accordion-item__icon-after" : "cre8-c-accordion-item__icon cre8-c-accordion-item__icon-after"}
+                  class=${this.tertiaryIcon
+                ? 'cre8-c-accordion-item__tertiary-icon cre8-c-accordion-item__icon-after'
+                : 'cre8-c-accordion-item__icon cre8-c-accordion-item__icon-after'}
                 >
-                  <cre8-icon rotate="180" svg='${m}' aria-hidden="true"></cre8-icon>
+                  <cre8-icon rotate="180" svg='${svgCaretUp}' aria-hidden="true"></cre8-icon>
                 </div>
             </div>`}
         </button>
@@ -900,45 +180,44 @@ const m = `<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" x
         </div>
       </div>
     </div>`;
-  }
-};
-d.styles = [b];
-let e = d;
-t([
-  r({ type: Boolean, reflect: !0 })
-], e.prototype, "isActive");
-t([
-  r({ type: String, reflect: !0 })
-], e.prototype, "accordionItemId");
-t([
-  r({ type: Boolean, reflect: !0 })
-], e.prototype, "iconBefore");
-t([
-  r({ type: Boolean, reflect: !0 })
-], e.prototype, "tertiaryIcon");
-t([
-  r({ reflect: !0 })
-], e.prototype, "size");
-t([
-  r({ reflect: !0 })
-], e.prototype, "headingTagVariant");
-t([
-  r({ type: String })
-], e.prototype, "heading");
-t([
-  r({ type: Boolean })
-], e.prototype, "brandHeader");
-t([
-  r({ attribute: "aria-controls" })
-], e.prototype, "_ariaControls");
-t([
-  p()
-], e.prototype, "_height");
-t([
-  p()
-], e.prototype, "_fullyOpen");
-customElements.get("cre8-accordion-item") === void 0 && customElements.define("cre8-accordion-item", e);
-export {
-  e as Cre8AccordionItem,
-  e as default
-};
+    }
+}
+Cre8AccordionItem.styles = [styles];
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8AccordionItem.prototype, "isActive", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], Cre8AccordionItem.prototype, "accordionItemId", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8AccordionItem.prototype, "iconBefore", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8AccordionItem.prototype, "tertiaryIcon", void 0);
+__decorate([
+    property({ reflect: true })
+], Cre8AccordionItem.prototype, "size", void 0);
+__decorate([
+    property({ reflect: true })
+], Cre8AccordionItem.prototype, "headingTagVariant", void 0);
+__decorate([
+    property({ type: String })
+], Cre8AccordionItem.prototype, "heading", void 0);
+__decorate([
+    property({ type: Boolean })
+], Cre8AccordionItem.prototype, "brandHeader", void 0);
+__decorate([
+    property({ attribute: 'aria-controls' })
+], Cre8AccordionItem.prototype, "_ariaControls", void 0);
+__decorate([
+    state()
+], Cre8AccordionItem.prototype, "_height", void 0);
+__decorate([
+    state()
+], Cre8AccordionItem.prototype, "_fullyOpen", void 0);
+if (customElements.get('cre8-accordion-item') === undefined) {
+    customElements.define('cre8-accordion-item', Cre8AccordionItem);
+}
+export default Cre8AccordionItem;
+//# sourceMappingURL=accordion-item.js.map