@tmorrow/cre8-wc 1.1.2 → 1.1.3

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

@@ -1,79 +1,169 @@
-import { a as h } from "../../icon-D22g8aWB.js";
-import { css as p, html as c } from "lit";
-import { property as t, state as m } from "lit/decorators.js";
-import { ifDefined as f } from "lit-html/directives/if-defined.js";
-import g from "classnames";
-import { Cre8Element as y } from "../cre8-element.js";
-import "../button/button.js";
-const b = p`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}: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}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@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))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@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}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}: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 v = Object.defineProperty, r = (l, o, a, u) => {
-  for (var i = void 0, n = l.length - 1, s; n >= 0; n--)
-    (s = l[n]) && (i = s(o, a, i) || i);
-  return i && v(o, a, i), i;
+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;
 };
-const d = class d extends y {
-  constructor() {
-    super(), this.isActive = !1, this.size = "sm", this.headingTagVariant = "h3";
-    const o = Math.floor(Math.random() * 9e5) + 1e5;
-    this._ariaControls = `cre8-accordion-item-details-${o}`, this.accordionItemId = this.accordionItemId ?? `cre8-accordion-item-${o}`;
-  }
-  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 o = 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"
-    }), a = g("cre8-c-accordion-item__button", {
-      "cre8-is-active": this.isActive,
-      "cre8-u-justify-content-start": this.iconBefore,
-      "cre8-brand-color": this.brandHeader === !0
-    });
-    return c` <div id=${this.accordionItemId} class="${o}">
+import svgCaretUp from '../../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.
+ *
+ */
+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}`;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._setContentHeight();
+        if (this.isActive) {
+            this._fullyOpen = true;
+            this._setContentHeight();
+        }
+    }
+    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';
+        }
+    }
+    _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);
+        }
+    }
+    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="${a}"
-          aria-expanded="${f(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 ? c`
+          ${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=${h} aria-hidden="true"></cre8-icon>
+                  <cre8-icon rotate="180" svg=${svgCaretUp} aria-hidden="true"></cre8-icon>
                 </div>
-                ${this.heading ?? c` <slot name="heading"></slot>`}
+                ${this.heading ?? html ` <slot name="heading"></slot>`}
             </div>
-              ` : c`
+              `
+            : html `
           <div class="cre8-c-accordion-item--icon-after-heading-text">
-            ${this.heading ?? c` <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='${h}' aria-hidden="true"></cre8-icon>
+                  <cre8-icon rotate="180" svg='${svgCaretUp}' aria-hidden="true"></cre8-icon>
                 </div>
             </div>`}
         </button>
@@ -90,45 +180,44 @@ const d = class d extends y {
         </div>
       </div>
     </div>`;
-  }
-};
-d.styles = [b];
-let e = d;
-r([
-  t({ type: Boolean, reflect: !0 })
-], e.prototype, "isActive");
-r([
-  t({ type: String, reflect: !0 })
-], e.prototype, "accordionItemId");
-r([
-  t({ type: Boolean, reflect: !0 })
-], e.prototype, "iconBefore");
-r([
-  t({ type: Boolean, reflect: !0 })
-], e.prototype, "tertiaryIcon");
-r([
-  t({ reflect: !0 })
-], e.prototype, "size");
-r([
-  t({ reflect: !0 })
-], e.prototype, "headingTagVariant");
-r([
-  t({ type: String })
-], e.prototype, "heading");
-r([
-  t({ type: Boolean })
-], e.prototype, "brandHeader");
-r([
-  t({ attribute: "aria-controls" })
-], e.prototype, "_ariaControls");
-r([
-  m()
-], e.prototype, "_height");
-r([
-  m()
-], 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

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

@@ -0,0 +1 @@
+{"version":3,"file":"accordion-item.js","sourceRoot":"","sources":["../../../components/accordion-item/accordion-item.ts"],"names":[],"mappings":"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","sourcesContent":["import svgCaretUp from '../../icons/System/Regular/Caret_Up.svg?raw';\nimport { html,  } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport classnames from 'classnames';\nimport { Cre8Element } from '../cre8-element';\nimport '../icon/icon';\nimport '../button/button';\nimport styles from './accordion-item.styles.js';\n\n/**\n *\n * The accordion item component delivers large amounts of content in a small space\n * through progressive disclosure. That is, the user gets key details about the\n * underlying content and can choose to expand that content within the constraints\n * of the accordion item. Accordion Items work especially well on mobile interfaces or\n * whenever vertical space is at a premium.\n *\n * ## HOW TO USE\n * Avoid “nested” accordion items—that is, collapsible content within collapsible content.\n * This type of pattern goes against UX best practices.\n *\n * The Cre8 accordion item header allows for two sizes:\n * 'sm' [cre8-typography-title-default] or 'lg' [cre8-typography-title-large]\n *\n * A chevron is used to indicate the “expand/collapse” action, though the entire\n * header area is clickable for the same action.\n *\n * **NOTE**: The header of the accordion item uses h tags so be sure to choose the headingTagVariant that\n * fits into the hierarchy of your html page layout. THIS WILL NOT CHANGE THE APPEARANCE OF THE HEADER.\n *\n * @slot The body of the accordion item will be any valid html\n * inserted between the cre8-accordion-item opening and closing tags.\n *\n *\n * @csspart ::part('header') - The container around the interactive header.\n * @csspart ::part('button') - The button containing the header text and the animated icon.\n * @csspart ::part('icon') - The animated icon that revolves on click.\n * @csspart ::part('body') - The container around the expanding body section.\n * @csspart ::part('body-inner') - The container around the slot into which any user provided HTML is inserted.\n *\n */\n\nexport class Cre8AccordionItem extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   *\n   * When true, the Accordion Item is opens, when false it closes;\n   * @prop {boolean} isActive\n   *\n   */\n\n  @property({ type: Boolean, reflect: true })\n      isActive? = false;\n\n\n  /**\n   *\n   * Optional custom id for the accordion item, if one is not set, a random id is generated for you.\n   * @prop {string} accordionItemId\n   *\n   *\n   */\n  @property({ type: String, reflect: true })\n      accordionItemId?: string;\n\n  /**\n   *\n   * Controls the positioning of the dropdown icon in relation to the text, true puts the icon before the text\n   * and false/undefined default the icon to the opposite side of the accordion item\n   * @prop {boolean} iconBefore\n   *\n   *\n   */\n  @property({ type: Boolean, reflect: true })\n      iconBefore?: boolean;\n\n  /**\n   *\n   * Controls the appearance  of dropdown icon as being an icon-only button. true renders the tertiary variant and\n   * false/undefined renders the default secondary appearance.\n   * @prop {boolean} tertiaryIcon\n   *\n   *\n   */\n  @property({ type: Boolean, reflect: true })\n      tertiaryIcon?: boolean;\n\n  /**\n   *\n   * Users can choose between two header sizes:  'sm' [title-default] or 'lg' [title-large].\n   * @prop {'sm' | 'lg'} size\n   *\n   *\n   */\n  @property({ reflect: true })\n      size: 'sm' | 'lg' = 'sm';\n\n  /**\n   *\n   * Purely meant to help the user structure the HTML page hierarchy. Does not change the\n   * header size. Defaults to 'h3'\n   * @prop {'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'} headingTagVariant\n   *\n   *\n   */\n\n  @property({ reflect: true })\n      headingTagVariant: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' = 'h3';\n\n  /**\n   *\n   * Controls the text content of the Accordion Item heading.\n   * @prop {string} heading\n   *\n   *\n   */\n  @property({ type: String })\n      heading!: string;\n\n  /**\n   *\n   * Controls whether the header takes on the theme's 'brand-strong' color\n   * @prop {boolean} brandHeader\n   *\n   *\n   */\n  @property({ type: Boolean })\n      brandHeader?: boolean;\n\n  /**\n   *\n   * The aria attribute to which is assigned the id of the details section which is revealed via interaction\n   * with the header.\n   * @private _ariaControls\n   *\n   *\n   */\n  @property({ attribute: 'aria-controls' })\n  private _ariaControls!: string;\n\n  /**\n   *\n   * Private internal state which indicates the current _height of the accordion item panel.\n   * @private _height\n   *\n   *\n   */\n  @state()\n  private _height!: string;\n\n  /**\n   *\n   * Private internal state which Indicates if the accordion item panel is completely open.\n   * @private _fullyOpen\n   *\n   *\n   */\n\n  @state()\n  private _fullyOpen?: boolean;\n\n  constructor() {\n      super();\n      const randomId = Math.floor(Math.random() * 900000) + 100000;\n      this._ariaControls = `cre8-accordion-item-details-${randomId}`;\n      this.accordionItemId = this.accordionItemId ?? `cre8-accordion-item-${randomId}`;\n  }\n\n  override connectedCallback() {\n      super.connectedCallback();\n      this._setContentHeight();\n      if (this.isActive) {\n          this._fullyOpen = true;\n          this._setContentHeight();\n      }\n  }\n\n  private async _setContentHeight() {\n      await this.updateComplete;\n\n      if ((this.isActive && !this._fullyOpen) || (!this.isActive && this._fullyOpen)) {\n          this._height = `${this.shadowRoot?.querySelector('.cre8-c-accordion-item__body-inner')?.scrollHeight}px`;\n      } else if (this.isActive && this._fullyOpen) {\n          this._height = 'auto';\n      } else if (!this.isActive && !this._fullyOpen) {\n          this._height = '0';\n      }\n  }\n\n  private _toggleAccordionItem() {\n      this.isActive = !this.isActive;\n\n      if (this.isActive) {\n          this._setContentHeight();\n          setTimeout(() => {\n              this._fullyOpen = true;\n              this._setContentHeight();\n          }, 350);\n      } else {\n          this._setContentHeight();\n          setTimeout(() => {\n              this._fullyOpen = false;\n              this._setContentHeight();\n          }, 50);\n      }\n  }\n\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-accordion-item', {\n          'cre8-is-active': this.isActive,\n          'cre8-c-accordion-item--icon-before': this.iconBefore,\n          'cre8-c-accordion-item--small': this.size === 'sm',\n          'cre8-c-accordion-item--large': this.size === 'lg',\n      });\n\n      const buttonClassNames = classnames('cre8-c-accordion-item__button', {\n          'cre8-is-active': this.isActive,\n          'cre8-u-justify-content-start': this.iconBefore,\n          'cre8-brand-color': this.brandHeader === true,\n      });\n\n      return html` <div id=${this.accordionItemId} class=\"${componentClassNames}\">\n      <cre8-heading\n        type=${this.size === 'lg' ? 'title-large' : 'title-default'}\n        part=\"heading\"\n        ?brandColor=${(this.brandHeader)}\n        tagVariant=\"${this.headingTagVariant ?? 'h3'}\"\n        class=\"cre8-c-accordion-item__header\"\n      >\n        <button\n          class=\"${buttonClassNames}\"\n          aria-expanded=\"${ifDefined(this.isActive)}\"\n          aria-controls=\"${this._ariaControls}\"\n          part=\"button\"\n          role=\"button\"\n          id=\"${this.id}\"\n          @click=${this._toggleAccordionItem}\n        >\n          ${this.iconBefore\n        ? html`\n            <div class=\"cre8-c-accordion-item--icon-before-heading-text\">\n                <div\n                  class=${this.tertiaryIcon\n        ? 'cre8-c-accordion-item__tertiary-icon cre8-c-accordion-item__icon-before'\n        : 'cre8-c-accordion-item__icon cre8-c-accordion-item__icon-before'}\n                >\n                  <cre8-icon rotate=\"180\" svg=${svgCaretUp} aria-hidden=\"true\"></cre8-icon>\n                </div>\n                ${this.heading ?? html` <slot name=\"heading\"></slot>`}\n            </div>\n              `\n        : html`\n          <div class=\"cre8-c-accordion-item--icon-after-heading-text\">\n            ${this.heading ?? html` <slot name=\"heading\"></slot>`}\n                <div\n                  class=${this.tertiaryIcon\n        ? 'cre8-c-accordion-item__tertiary-icon cre8-c-accordion-item__icon-after'\n        : 'cre8-c-accordion-item__icon cre8-c-accordion-item__icon-after'}\n                >\n                  <cre8-icon rotate=\"180\" svg='${svgCaretUp}' aria-hidden=\"true\"></cre8-icon>\n                </div>\n            </div>`}\n        </button>\n      </cre8-heading>\n      <div\n        class=\"cre8-c-accordion-item__body\"\n        aria-hidden=\"${!this.isActive}\"\n        id=\"${this._ariaControls}\"\n        part=\"body\"\n        style=${`height: ${this._height}`}\n      >\n        <div class=\"cre8-c-accordion-item__body-inner\" part=\"body-inner\">\n          <slot></slot>\n        </div>\n      </div>\n    </div>`;\n  }\n}\n\nif (customElements.get('cre8-accordion-item') === undefined) {\n    customElements.define('cre8-accordion-item', Cre8AccordionItem);\n}\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-accordion-item': Cre8AccordionItem;\n  }\n}\n\nexport default Cre8AccordionItem;\n"]}

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

@@ -0,0 +1,4 @@
+import { css } from 'lit';
+const styles = css `*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}: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}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@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))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@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}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}: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%}`;
+export default styles;
+//# sourceMappingURL=accordion-item.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"accordion-item.styles.js","sourceRoot":"","sources":["../../../components/accordion-item/accordion-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,ohSAAohS,CAAC;AACviS,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}: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}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@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))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@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}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}: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%}`;\nexport default styles;\n"]}