@tmorrow/cre8-wc 1.2.4 → 1.2.6

package/lib/components/text-passage/text-passage.js

@@ -1,1509 +1,77 @@
-import { css as d, html as m } from "lit";
-import { property as l } from "lit/decorators.js";
-import { Cre8Element as g } from "../cre8-element.js";
-const c = d`.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
- */
-/*
-=======
-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;
-    }
-  }
-  @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
- */
-/**
- * 1) A passage of text  (e.g. article, blog post), including uncontrolled elements
- *    (e.g. unclassed h2, h3, ul, li, and so on).
- * 2) Use this file only for styling text passage and elements inside of text passage.
- */
-cre8-text-passage,
-cre8-text-passage[size=default] {
-  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);
-  /**
-  * Generic h1 within text passage
-  */
-}
-cre8-text-passage h1,
-cre8-text-passage[size=default] h1 {
-  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-text-passage h1,
-  cre8-text-passage[size=default] h1 {
-    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);
-  }
-}
-cre8-text-passage h1,
-cre8-text-passage[size=default] h1 {
-  margin-bottom: 0.75rem;
-}
-cre8-text-passage,
-cre8-text-passage[size=default] {
-  /**
-  * Generic h2 within text passage
-  */
-}
-cre8-text-passage h2,
-cre8-text-passage[size=default] h2 {
-  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-text-passage h2,
-  cre8-text-passage[size=default] h2 {
-    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);
-  }
-}
-cre8-text-passage h2,
-cre8-text-passage[size=default] h2 {
-  margin-bottom: 0.75rem;
-}
-cre8-text-passage,
-cre8-text-passage[size=default] {
-  /**
-  * Generic h3 within text passage
-  */
-}
-cre8-text-passage h3,
-cre8-text-passage[size=default] h3 {
-  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-text-passage h3,
-  cre8-text-passage[size=default] h3 {
-    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);
-  }
-}
-cre8-text-passage h3,
-cre8-text-passage[size=default] h3 {
-  margin-bottom: 0.75rem;
-}
-cre8-text-passage,
-cre8-text-passage[size=default] {
-  /**
-  * Generic h4 within text passage
-  */
-}
-cre8-text-passage h4,
-cre8-text-passage[size=default] h4 {
-  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-text-passage h4,
-  cre8-text-passage[size=default] h4 {
-    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-text-passage h4,
-cre8-text-passage[size=default] h4 {
-  margin-bottom: 0.75rem;
-}
-cre8-text-passage,
-cre8-text-passage[size=default] {
-  /**
-  * Generic h5 within text passage
-  */
-}
-cre8-text-passage h5,
-cre8-text-passage[size=default] h5 {
-  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);
-  margin-bottom: 0.75rem;
-}
-cre8-text-passage,
-cre8-text-passage[size=default] {
-  /**
-  * Generic unordered and ordered lists within text passage
-  */
-}
-cre8-text-passage ul,
-cre8-text-passage ol,
-cre8-text-passage[size=default] ul,
-cre8-text-passage[size=default] ol {
-  margin-top: 0;
-}
-cre8-text-passage,
-cre8-text-passage[size=default] {
-  /**
-  * Unordered list within text passage
-  */
-}
-cre8-text-passage ul,
-cre8-text-passage[size=default] ul {
-  margin-left: 1.25rem;
-  padding-left: 0;
-}
-cre8-text-passage,
-cre8-text-passage[size=default] {
-  /**
-  * Ordered list within text passage
-  */
-}
-cre8-text-passage ol,
-cre8-text-passage[size=default] ol {
-  margin-left: 1.125rem;
-  padding-left: 0;
-}
-cre8-text-passage,
-cre8-text-passage[size=default] {
-  /**
-  * Generic link tag within text passage
-  */
-}
-cre8-text-passage a,
-cre8-text-passage[size=default] a {
-  color: var(--cre8-color-content-link);
-}
-cre8-text-passage a:hover, cre8-text-passage a:focus,
-cre8-text-passage[size=default] a:hover,
-cre8-text-passage[size=default] a:focus {
-  text-decoration: underline;
-  color: var(--cre8-color-content-link-hover);
-}
-cre8-text-passage,
-cre8-text-passage[size=default] {
-  /**
-  * Paragraph tag within text passage
-  */
-}
-cre8-text-passage p,
-cre8-text-passage[size=default] p {
-  margin-top: 0;
-  margin-bottom: 1.5rem;
-}
-cre8-text-passage,
-cre8-text-passage[size=default] {
-  /**
-  * Blockquote within text passage
-  */
-}
-cre8-text-passage blockquote,
-cre8-text-passage[size=default] blockquote {
-  font-style: italic;
-  border-left: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-content-subtle);
-  color: var(--cre8-color-content-subtle);
-  padding-left: 1rem;
-  margin-left: 0;
-  margin-bottom: 1rem;
-}
-cre8-text-passage,
-cre8-text-passage[size=default] {
-  /**
-  * Last item declared in the text passage
-  * 1) Remove default margin bottom from the item
-  */
-}
-cre8-text-passage :last-child,
-cre8-text-passage[size=default] :last-child {
-  margin-bottom: 0;
-}
-
-/**
-* Inverted text passage
-*/
-cre8-text-passage[inverted] {
-  /**
-  * Blockquote within inverted text passage
-  */
-}
-cre8-text-passage[inverted] a {
-  color: var(--cre8-color-content-brand-knockout);
-}
-cre8-text-passage[inverted] a:hover, cre8-text-passage[inverted] a:focus {
-  color: var(--cre8-color-content-brand-knockout-hover);
-}
-cre8-text-passage[inverted] blockquote {
-  color: var(--cre8-color-content-knockout);
-  font-style: italic;
-  border-left: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-knockout);
-  padding-left: 1rem;
-  margin-left: 0;
-  margin-bottom: 1rem;
-}`, h = d`.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
- */
-/*
-=======
-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;
-    }
-  }
-  @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
- */
-/**
- * !!! DO NOT USE THIS FILE for styling specific elements within text passage.
- * Use text-passage-ligh-dom.scss to for styling.!!!
- */
-:host {
-  display: inline-flex;
-}
-
-.cre8-c-text-passage--small {
-  font-family: var(--cre8-typography-body-small-font-family);
-  font-size: var(--cre8-typography-body-small-font-size);
-  font-weight: var(--cre8-typography-body-small-font-weight);
-  line-height: var(--cre8-typography-body-small-line-height);
-  text-decoration: var(--cre8-typography-body-small-text-decoration);
-  text-transform: var(--cre8-typography-body-small-text-transform);
-  /**
-    * Unordered list within small text passage
-    */
-}
-
-.cre8-c-text-passage--large {
-  font-family: var(--cre8-typography-body-large-font-family);
-  font-size: var(--cre8-typography-body-large-font-size);
-  font-weight: var(--cre8-typography-body-large-font-weight);
-  line-height: var(--cre8-typography-body-large-line-height);
-  text-decoration: var(--cre8-typography-body-large-text-decoration);
-  text-transform: var(--cre8-typography-body-large-text-transform);
-  /**
-    * Unordered list within small text passage
-    */
-}
-
-.cre8-c-text-passage--inverted {
-  color: var(--cre8-color-content-knockout);
-}
-
-::slotted(.header) {
-  margin-bottom: 0.75rem;
-}`;
-var f = Object.defineProperty, p = (n, a, e, u) => {
-  for (var t = void 0, i = n.length - 1, s; i >= 0; i--)
-    (s = n[i]) && (t = s(a, e, t) || t);
-  return t && f(a, e, t), t;
+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 o = class o extends g {
-  constructor() {
-    super(...arguments), this.size = "default";
-  }
-  /**
-   * Add the light dom styles when this component is connected to a page
-   */
-  connectedCallback() {
-    if (super.connectedCallback(), !document.head.querySelector("#cre8-text-passage-styles")) {
-      const e = document.createElement("style");
-      e.id = "cre8-text-passage-styles", e.innerHTML = c.cssText, document.head.appendChild(e);
-    }
-  }
-  render() {
-    const a = this.componentClassNames("cre8-c-text-passage", {
-      "cre8-c-text-passage--default": this.size === "default" || void 0,
-      "cre8-c-text-passage--inverted": this.inverted,
-      "cre8-c-text-passage--small": this.size === "small",
-      "cre8-c-text-passage--large": this.size === "large"
-    });
-    return m`
-      <div class="${a}">
+import { html, } from 'lit';
+import { property } from 'lit/decorators.js';
+import { Cre8Element } from '../cre8-element';
+import lightDomStyles from './text-passage-light-dom.styles.js';
+import styles from './text-passage.styles.js';
+/**
+ * The text-passage component acts a general wrapper element
+ * for any text content that needs to be used in your project.
+ *
+ * # How to Use
+ * 1. Code your text passage using any of the native html text elements (p, ol, ul, blockquote, cite, etc.)
+ *    or other Cre8 Components like cre8-heading and wrap them with the cre8-text-passage tags.
+ * 2. Choose between three sizes for your text content or apply inline styling if you need additional styling.
+ * 3. For dark backgrounds, add the 'inverted' attribute to the <cre8-text-passage> tag.
+ * 3. Your text-passage will render with brand-approved styling!
+ *
+ *
+ * NOTE: It is recommended that you use the cre8-heading component for any heading elements in your HTML template
+ *
+ * @slot - The component content
+ */
+export class Cre8TextPassage extends Cre8Element {
+    constructor() {
+        super(...arguments);
+        /**
+         * Size variant
+         * - **small** renders smaller typography than the default variant
+         * - **default** renders default typography variant
+         * - **large** renders larger typography than the default variant
+         */
+        this.size = 'default';
+    }
+    /**
+     * Add the light dom styles when this component is connected to a page
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        const lightDomExists = document.head.querySelector('#cre8-text-passage-styles');
+        if (!lightDomExists) {
+            const lightDomStyle = document.createElement('style');
+            lightDomStyle.id = 'cre8-text-passage-styles';
+            lightDomStyle.innerHTML = lightDomStyles.cssText;
+            document.head.appendChild(lightDomStyle);
+        }
+    }
+    render() {
+        const componentClassName = this.componentClassNames('cre8-c-text-passage', {
+            'cre8-c-text-passage--default': this.size === 'default' || undefined,
+            'cre8-c-text-passage--inverted': this.inverted,
+            'cre8-c-text-passage--small': this.size === 'small',
+            'cre8-c-text-passage--large': this.size === 'large',
+        });
+        return html `
+      <div class="${componentClassName}">
         <slot></slot>
       </div>
     `;
-  }
-};
-o.styles = [h];
-let r = o;
-p([
-  l({ type: Boolean, reflect: !0 })
-], r.prototype, "inverted");
-p([
-  l()
-], r.prototype, "size");
-customElements.get("cre8-text-passage") === void 0 && customElements.define("cre8-text-passage", r);
-export {
-  r as Cre8TextPassage,
-  r as default
-};
+    }
+}
+Cre8TextPassage.styles = [styles];
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8TextPassage.prototype, "inverted", void 0);
+__decorate([
+    property()
+], Cre8TextPassage.prototype, "size", void 0);
+if (customElements.get('cre8-text-passage') === undefined) {
+    customElements.define('cre8-text-passage', Cre8TextPassage);
+}
+export default Cre8TextPassage;
+//# sourceMappingURL=text-passage.js.map