@tmorrow/cre8-wc 1.2.4 → 1.2.6

package/lib/components/heading/heading.js

@@ -1,981 +1,115 @@
-import { css as h, html as t } from "lit";
-import { property as l } from "lit/decorators.js";
-import { Cre8Element as m } from "../cre8-element.js";
-const s = h`@charset "UTF-8";
-.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 { html, } from 'lit';
+import { property } from 'lit/decorators.js';
+import { Cre8Element } from '../cre8-element';
+import styles from './heading.styles.js';
+/**
+ *  HTML headings are titles or subtitles that you want to display on a webpage. The H1 is the most important and H6
+ *  is the least important in the content hierarchy.
+ *
+ * # How to Use
+ * 1. The cre8-heading tag wraps around one of the six native HTML "h" tags, depending on your chosen variation.
+ * 2. There are two main use cases for using this component:
+ *    text passage headings and Components with a title (i.e. modal, card or alert)
+ * 3. There will be instances when the design requires the heading text to have the brand color applied
+ *    in which case you should set the [brandColor](?path=/story/cre8-components-heading--brand-color)
+ *    attribute to true on the cre8-heading tag.
+ * 4. For dark backgrounds, add the [inverted](?path=/story/cre8-components-heading--inverted)
+ *    attribute to the tag for white text.
+ *
+ *
+ * @slot - The heading text content
  */
-/*
-=======
-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;
+export class Cre8Heading extends Cre8Element {
+    constructor() {
+        super(...arguments);
+        /**
+         * Dynamic tag name for the component
+         * 1) This is needed to use proper semantic heading treatments depending on where the banner lives on the page
+         * <cre8-text-passage size="small">
+         * <ul>
+         * <li>**h1** renders an `h1` tag</li>
+         * <li>**h2** renders an `h2` tag. This is the default</li>
+         * <li>**h3** renders an `h3` tag</li>
+         * <li>**h4** renders an `h4` tag</li>
+         * <li>**h5** renders an `h5` tag</li>
+         * <li>**h6** renders an `h6` tag</li>
+         * </ul>
+         * </cre8-text-passage>
+         *
+         * @attr{string}
+         */
+        this.tagVariant = 'h5';
     }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 417px;
-      height: 417px;
+    render() {
+        const tagVariantClassNames = !this.type
+            ? {
+                'cre8-c-heading--headline-large': this.tagVariant === 'h1',
+                'cre8-c-heading--headline-default': this.tagVariant === 'h2',
+                'cre8-c-heading--headline-small': this.tagVariant === 'h3',
+                'cre8-c-heading--title-large': this.tagVariant === 'h4',
+                'cre8-c-heading--title-default': this.tagVariant === 'h5',
+                'cre8-c-heading--title-small': this.tagVariant === 'h6',
+            }
+            : {};
+        const componentClassName = this.componentClassNames('cre8-c-heading', {
+            ...tagVariantClassNames,
+            'cre8-c-heading--headline-large': this.type === 'headline-large',
+            'cre8-c-heading--headline-default': this.type === 'headline-default',
+            'cre8-c-heading--headline-small': this.type === 'headline-small',
+            'cre8-c-heading--title-large': this.type === 'title-large',
+            'cre8-c-heading--title-default': this.type === 'title-default',
+            'cre8-c-heading--title-small': this.type === 'title-small',
+            'cre8-c-heading--title-xlarge': this.type === 'title-xlarge',
+            'cre8-c-heading--display-default': this.type === 'display-default',
+            'cre8-c-heading--display-small': this.type === 'display-small',
+            'cre8-c-heading--label-large': this.type === 'label-large',
+            'cre8-c-heading--label-default': this.type === 'label-default',
+            'cre8-c-heading--label-small': this.type === 'label-small',
+            'cre8-c-heading--meta-large': this.type === 'meta-large',
+            'cre8-c-heading--meta-default': this.type === 'meta-default',
+            'cre8-c-heading--meta-small': this.type === 'meta-small',
+            'cre8-c-heading--brand-color': this.brandColor,
+            'cre8-c-heading--inverted': this.inverted,
+        });
+        switch (this.tagVariant) {
+            case 'h1':
+                return html ` <h1 part="tag" class="${componentClassName}"><slot></slot></h1> `;
+            case 'h2':
+                return html ` <h2 part="tag" class="${componentClassName}"><slot></slot></h2> `;
+            case 'h3':
+                return html ` <h3 part="tag" class="${componentClassName}"><slot></slot></h3> `;
+            case 'h4':
+                return html ` <h4 part="tag" class="${componentClassName}"><slot></slot></h4> `;
+            case 'h5':
+                return html ` <h5 part="tag" class="${componentClassName}"><slot></slot></h5> `;
+            case 'h6':
+                return html ` <h6 part="tag" class="${componentClassName}"><slot></slot></h6> `;
+            default:
+                return html ` <h4 part="tag" class="${componentClassName}"><slot></slot></h4> `;
+        }
     }
-  }
-}
-@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;
-}
-
-/**
- * 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
- */
-:host {
-  display: inline;
-  text-align: left;
-}
-
-/**
- * DefaultHeading component styling/Heading title-large
- */
-.cre8-c-heading,
-.cre8-c-heading--title-large {
-  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-heading,
-  .cre8-c-heading--title-large {
-    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-heading,
-.cre8-c-heading--title-large {
-  margin: 0;
-  color: var(--cre8-color-content-default);
 }
-
-/**
- * Heading with theme headline-large preset applied
- */
-.cre8-c-heading--headline-large {
-  font-family: var(--cre8-typography-headline-large-mobile-font-family);
-  font-size: var(--cre8-typography-headline-large-mobile-font-size);
-  font-weight: var(--cre8-typography-headline-large-mobile-font-weight);
-  line-height: var(--cre8-typography-headline-large-mobile-line-height);
-  text-decoration: var(--cre8-typography-headline-large-mobile-text-decoration);
-  text-transform: var(--cre8-typography-headline-large-mobile-text-transform);
-}
-@media all and (min-width: 768px) {
-  .cre8-c-heading--headline-large {
-    font-family: var(--cre8-typography-headline-large-font-family);
-    font-size: var(--cre8-typography-headline-large-font-size);
-    font-weight: var(--cre8-typography-headline-large-font-weight);
-    line-height: var(--cre8-typography-headline-large-line-height);
-    text-decoration: var(--cre8-typography-headline-large-text-decoration);
-    text-transform: var(--cre8-typography-headline-large-text-transform);
-  }
-}
-
-/**
- * Heading with theme headline-default preset applied
- */
-.cre8-c-heading--headline-default {
-  font-family: var(--cre8-typography-headline-default-mobile-font-family);
-  font-size: var(--cre8-typography-headline-default-mobile-font-size);
-  font-weight: var(--cre8-typography-headline-default-mobile-font-weight);
-  line-height: var(--cre8-typography-headline-default-mobile-line-height);
-  text-decoration: var(--cre8-typography-headline-default-mobile-text-decoration);
-  text-transform: var(--cre8-typography-headline-default-mobile-text-transform);
-}
-@media all and (min-width: 768px) {
-  .cre8-c-heading--headline-default {
-    font-family: var(--cre8-typography-headline-default-font-family);
-    font-size: var(--cre8-typography-headline-default-font-size);
-    font-weight: var(--cre8-typography-headline-default-font-weight);
-    line-height: var(--cre8-typography-headline-default-line-height);
-    text-decoration: var(--cre8-typography-headline-default-text-decoration);
-    text-transform: var(--cre8-typography-headline-default-text-transform);
-  }
-}
-
-/**
- * Heading with theme headline-small preset applied
- */
-.cre8-c-heading--headline-small {
-  font-family: var(--cre8-typography-headline-small-mobile-font-family);
-  font-size: var(--cre8-typography-headline-small-mobile-font-size);
-  font-weight: var(--cre8-typography-headline-small-mobile-font-weight);
-  line-height: var(--cre8-typography-headline-small-mobile-line-height);
-  text-decoration: var(--cre8-typography-headline-small-mobile-text-decoration);
-  text-transform: var(--cre8-typography-headline-small-mobile-text-transform);
-}
-@media all and (min-width: 768px) {
-  .cre8-c-heading--headline-small {
-    font-family: var(--cre8-typography-headline-small-font-family);
-    font-size: var(--cre8-typography-headline-small-font-size);
-    font-weight: var(--cre8-typography-headline-small-font-weight);
-    line-height: var(--cre8-typography-headline-small-line-height);
-    text-decoration: var(--cre8-typography-headline-small-text-decoration);
-    text-transform: var(--cre8-typography-headline-small-text-transform);
-  }
-}
-
-/**
- * Heading with theme title-xlarge preset applied
- */
-.cre8-c-heading--title-xlarge {
-  font-family: var(--cre8-typography-title-xlarge-mobile-font-family);
-  font-size: var(--cre8-typography-title-xlarge-mobile-font-size);
-  font-weight: var(--cre8-typography-title-xlarge-mobile-font-weight);
-  line-height: var(--cre8-typography-title-xlarge-mobile-line-height);
-  text-decoration: var(--cre8-typography-title-xlarge-mobile-text-decoration);
-  text-transform: var(--cre8-typography-title-xlarge-mobile-text-transform);
-}
-@media all and (min-width: 768px) {
-  .cre8-c-heading--title-xlarge {
-    font-family: var(--cre8-typography-title-xlarge-font-family);
-    font-size: var(--cre8-typography-title-xlarge-font-size);
-    font-weight: var(--cre8-typography-title-xlarge-font-weight);
-    line-height: var(--cre8-typography-title-xlarge-line-height);
-    text-decoration: var(--cre8-typography-title-xlarge-text-decoration);
-    text-transform: var(--cre8-typography-title-xlarge-text-transform);
-  }
-}
-
-/**
- * Heading with theme title-large preset applied
- */
-.cre8-c-heading--title-large {
-  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-heading--title-large {
-    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);
-  }
-}
-
-/**
- * Heading with theme title-default preset applied
- */
-.cre8-c-heading--title-default {
-  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-heading--title-default {
-    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);
-  }
-}
-
-/**
- * Heading with theme title-small preset applied
- */
-.cre8-c-heading--title-small {
-  font-family: var(--cre8-typography-title-small-mobile-font-family);
-  font-size: var(--cre8-typography-title-small-mobile-font-size);
-  font-weight: var(--cre8-typography-title-small-mobile-font-weight);
-  line-height: var(--cre8-typography-title-small-mobile-line-height);
-  text-decoration: var(--cre8-typography-title-small-mobile-text-decoration);
-  text-transform: var(--cre8-typography-title-small-mobile-text-transform);
-}
-@media all and (min-width: 768px) {
-  .cre8-c-heading--title-small {
-    font-family: var(--cre8-typography-title-small-font-family);
-    font-size: var(--cre8-typography-title-small-font-size);
-    font-weight: var(--cre8-typography-title-small-font-weight);
-    line-height: var(--cre8-typography-title-small-line-height);
-    text-decoration: var(--cre8-typography-title-small-text-decoration);
-    text-transform: var(--cre8-typography-title-small-text-transform);
-  }
-}
-
-/**
- * Heading with theme display-small preset applied
- */
-.cre8-c-heading--display-small {
-  font-family: var(--cre8-typography-display-small-mobile-font-family);
-  font-size: var(--cre8-typography-display-small-mobile-font-size);
-  font-weight: var(--cre8-typography-display-small-mobile-font-weight);
-  line-height: var(--cre8-typography-display-small-mobile-line-height);
-  text-decoration: var(--cre8-typography-display-small-mobile-text-decoration);
-  text-transform: var(--cre8-typography-display-small-mobile-text-transform);
-}
-@media all and (min-width: 768px) {
-  .cre8-c-heading--display-small {
-    font-family: var(--cre8-typography-display-small-font-family);
-    font-size: var(--cre8-typography-display-small-font-size);
-    font-weight: var(--cre8-typography-display-small-font-weight);
-    line-height: var(--cre8-typography-display-small-line-height);
-    text-decoration: var(--cre8-typography-display-small-text-decoration);
-    text-transform: var(--cre8-typography-display-small-text-transform);
-  }
-}
-
-/**
- * Heading with theme display-default preset applied
- */
-.cre8-c-heading--display-default {
-  font-family: var(--cre8-typography-display-default-mobile-font-family);
-  font-size: var(--cre8-typography-display-default-mobile-font-size);
-  font-weight: var(--cre8-typography-display-default-mobile-font-weight);
-  line-height: var(--cre8-typography-display-default-mobile-line-height);
-  text-decoration: var(--cre8-typography-display-default-mobile-text-decoration);
-  text-transform: var(--cre8-typography-display-default-mobile-text-transform);
-}
-@media all and (min-width: 768px) {
-  .cre8-c-heading--display-default {
-    font-family: var(--cre8-typography-display-default-font-family);
-    font-size: var(--cre8-typography-display-default-font-size);
-    font-weight: var(--cre8-typography-display-default-font-weight);
-    line-height: var(--cre8-typography-display-default-line-height);
-    text-decoration: var(--cre8-typography-display-default-text-decoration);
-    text-transform: var(--cre8-typography-display-default-text-transform);
-  }
-}
-
-/**
- * Heading with theme label-large preset applied
- */
-.cre8-c-heading--label-large {
-  font-family: var(--cre8-typography-label-large-font-family);
-  font-size: var(--cre8-typography-label-large-font-size);
-  font-weight: var(--cre8-typography-label-large-font-weight);
-  line-height: var(--cre8-typography-label-large-line-height);
-  text-decoration: var(--cre8-typography-label-large-text-decoration);
-  text-transform: var(--cre8-typography-label-large-text-transform);
-}
-
-/**
- * Heading with theme label-default preset applied
- */
-.cre8-c-heading--label-default {
-  font-family: var(--cre8-typography-label-default-font-family);
-  font-size: var(--cre8-typography-label-default-font-size);
-  font-weight: var(--cre8-typography-label-default-font-weight);
-  line-height: var(--cre8-typography-label-default-line-height);
-  text-decoration: var(--cre8-typography-label-default-text-decoration);
-  text-transform: var(--cre8-typography-label-default-text-transform);
-}
-
-/**
- * Heading with theme label-small preset applied
- */
-.cre8-c-heading--label-small {
-  font-family: var(--cre8-typography-label-small-font-family);
-  font-size: var(--cre8-typography-label-small-font-size);
-  font-weight: var(--cre8-typography-label-small-font-weight);
-  line-height: var(--cre8-typography-label-small-line-height);
-  text-decoration: var(--cre8-typography-label-small-text-decoration);
-  text-transform: var(--cre8-typography-label-small-text-transform);
-}
-
-/**
- * Heading with theme meta-default preset applied
- */
-.cre8-c-heading--meta-large {
-  font-family: var(--cre8-typography-meta-large-font-family);
-  font-size: var(--cre8-typography-meta-large-font-size);
-  font-weight: var(--cre8-typography-meta-large-font-weight);
-  line-height: var(--cre8-typography-meta-large-line-height);
-  text-decoration: var(--cre8-typography-meta-large-text-decoration);
-  text-transform: var(--cre8-typography-meta-large-text-transform);
-  text-transform: uppercase;
-}
-
-/**
- * Heading with theme meta-default preset applied
- */
-.cre8-c-heading--meta-default {
-  font-family: var(--cre8-typography-meta-default-font-family);
-  font-size: var(--cre8-typography-meta-default-font-size);
-  font-weight: var(--cre8-typography-meta-default-font-weight);
-  line-height: var(--cre8-typography-meta-default-line-height);
-  text-decoration: var(--cre8-typography-meta-default-text-decoration);
-  text-transform: var(--cre8-typography-meta-default-text-transform);
-  text-transform: uppercase;
-}
-
-/**
- * Heading with theme meta-small preset applied
- */
-.cre8-c-heading--meta-small {
-  font-family: var(--cre8-typography-meta-small-font-family);
-  font-size: var(--cre8-typography-meta-small-font-size);
-  font-weight: var(--cre8-typography-meta-small-font-weight);
-  line-height: var(--cre8-typography-meta-small-line-height);
-  text-decoration: var(--cre8-typography-meta-small-text-decoration);
-  text-transform: var(--cre8-typography-meta-small-text-transform);
-  text-transform: uppercase;
-}
-
-/**
- * Heading with brand color applied
- */
-.cre8-c-heading--brand-color {
-  color: var(--cre8-color-content-brand-strong);
-}
-.cre8-c-heading--brand-color.cre8-c-heading--inverted {
-  color: var(--cre8-color-content-brand-knockout);
-}
-
-.cre8-c-heading--inverted {
-  color: var(--cre8-color-content-knockout);
-}`;
-var c = Object.defineProperty, o = (d, i, e, y) => {
-  for (var r = void 0, n = d.length - 1, g; n >= 0; n--)
-    (g = d[n]) && (r = g(i, e, r) || r);
-  return r && c(i, e, r), r;
-};
-const p = class p extends m {
-  constructor() {
-    super(...arguments), this.tagVariant = "h5";
-  }
-  render() {
-    const i = this.type ? {} : {
-      "cre8-c-heading--headline-large": this.tagVariant === "h1",
-      "cre8-c-heading--headline-default": this.tagVariant === "h2",
-      "cre8-c-heading--headline-small": this.tagVariant === "h3",
-      "cre8-c-heading--title-large": this.tagVariant === "h4",
-      "cre8-c-heading--title-default": this.tagVariant === "h5",
-      "cre8-c-heading--title-small": this.tagVariant === "h6"
-    }, e = this.componentClassNames("cre8-c-heading", {
-      ...i,
-      "cre8-c-heading--headline-large": this.type === "headline-large",
-      "cre8-c-heading--headline-default": this.type === "headline-default",
-      "cre8-c-heading--headline-small": this.type === "headline-small",
-      "cre8-c-heading--title-large": this.type === "title-large",
-      "cre8-c-heading--title-default": this.type === "title-default",
-      "cre8-c-heading--title-small": this.type === "title-small",
-      "cre8-c-heading--title-xlarge": this.type === "title-xlarge",
-      "cre8-c-heading--display-default": this.type === "display-default",
-      "cre8-c-heading--display-small": this.type === "display-small",
-      "cre8-c-heading--label-large": this.type === "label-large",
-      "cre8-c-heading--label-default": this.type === "label-default",
-      "cre8-c-heading--label-small": this.type === "label-small",
-      "cre8-c-heading--meta-large": this.type === "meta-large",
-      "cre8-c-heading--meta-default": this.type === "meta-default",
-      "cre8-c-heading--meta-small": this.type === "meta-small",
-      "cre8-c-heading--brand-color": this.brandColor,
-      "cre8-c-heading--inverted": this.inverted
-    });
-    switch (this.tagVariant) {
-      case "h1":
-        return t` <h1 part="tag" class="${e}"><slot></slot></h1> `;
-      case "h2":
-        return t` <h2 part="tag" class="${e}"><slot></slot></h2> `;
-      case "h3":
-        return t` <h3 part="tag" class="${e}"><slot></slot></h3> `;
-      case "h4":
-        return t` <h4 part="tag" class="${e}"><slot></slot></h4> `;
-      case "h5":
-        return t` <h5 part="tag" class="${e}"><slot></slot></h5> `;
-      case "h6":
-        return t` <h6 part="tag" class="${e}"><slot></slot></h6> `;
-      default:
-        return t` <h4 part="tag" class="${e}"><slot></slot></h4> `;
-    }
-  }
-};
-p.styles = [s];
-let a = p;
-o([
-  l()
-], a.prototype, "type");
-o([
-  l()
-], a.prototype, "tagVariant");
-o([
-  l({ type: Boolean, reflect: !0 })
-], a.prototype, "inverted");
-o([
-  l({ type: Boolean, reflect: !0 })
-], a.prototype, "brandColor");
-customElements.get("cre8-heading") === void 0 && customElements.define("cre8-heading", a);
-export {
-  a as Cre8Heading,
-  a as default
-};
+Cre8Heading.styles = [styles];
+__decorate([
+    property()
+], Cre8Heading.prototype, "type", void 0);
+__decorate([
+    property()
+], Cre8Heading.prototype, "tagVariant", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8Heading.prototype, "inverted", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8Heading.prototype, "brandColor", void 0);
+if (customElements.get('cre8-heading') === undefined) {
+    customElements.define('cre8-heading', Cre8Heading);
+}
+export default Cre8Heading;
+//# sourceMappingURL=heading.js.map