@tmorrow/cre8-wc 1.1.2 → 1.1.3

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

@@ -0,0 +1,145 @@
+import { css } from 'lit';
+const styles = css `@import '/design-tokens/core/scss/theming/component';
+
+/**
+ * 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'] {
+  @include technology.cre8-typography-body-default();
+
+  /**
+  * Generic h1 within text passage
+  */
+
+  h1 {
+    @include technology.cre8-typography-display-small();
+    margin-bottom: size(1.5);
+  }
+
+  /**
+  * Generic h2 within text passage
+  */
+  h2 {
+    @include technology.cre8-typography-headline-default();
+    margin-bottom: size(1.5);
+  }
+
+  /**
+  * Generic h3 within text passage
+  */
+  h3 {
+    @include technology.cre8-typography-headline-small();
+    margin-bottom: size(1.5);
+  }
+
+  /**
+  * Generic h4 within text passage
+  */
+  h4 {
+    @include technology.cre8-typography-title-large();
+    margin-bottom: size(1.5);
+  }
+
+  /**
+  * Generic h5 within text passage
+  */
+  h5 {
+    @include technology.cre8-typography-meta-large();
+    margin-bottom: size(1.5);
+  }
+
+  /**
+  * Generic unordered and ordered lists within text passage
+  */
+  ul,
+  ol {
+    margin-top: 0;
+  }
+
+  /**
+  * Unordered list within text passage
+  */
+  ul {
+    margin-left: size(2.5);
+    padding-left: 0;
+  }
+
+  /**
+  * Ordered list within text passage
+  */
+  ol {
+    margin-left: size(2.25);
+    padding-left: 0;
+  }
+
+  /**
+  * Generic link tag within text passage
+  */
+  a {
+    color: var(--cre8-color-content-link);
+
+    &:hover,
+    &:focus {
+      text-decoration: underline;
+      color: var(--cre8-color-content-link-hover);
+    }
+  }
+
+  /**
+  * Paragraph tag within text passage
+  */
+  p {
+    margin-top: 0;
+    margin-bottom: size(3);
+  }
+
+  /**
+  * Blockquote within text passage
+  */
+  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: size(2);
+    margin-left: 0;
+    margin-bottom: size(2);
+  }
+
+  /**
+* Last item declared in the text passage
+* 1) Remove default margin bottom from the item
+*/
+  :last-child {
+    margin-bottom: 0;
+  }
+}
+
+/**
+* Inverted text passage
+*/
+cre8-text-passage[inverted] {
+  /**
+  * Blockquote within inverted text passage
+  */
+  a {
+    color: var(--cre8-color-content-brand-knockout);
+    &:hover,
+    &:focus {
+      color: var(--cre8-color-content-brand-knockout-hover);
+    }
+  }
+  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: size(2);
+    margin-left: 0;
+    margin-bottom: size(2);
+  }
+}
+`;
+export default styles;
+//# sourceMappingURL=text-passage-light-dom.js.map

package/lib/components/text-passage/text-passage-light-dom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-passage-light-dom.js","sourceRoot":"","sources":["../../../components/text-passage/text-passage-light-dom.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6IjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`@import '/design-tokens/core/scss/theming/component';\n\n/**\n * 1) A passage of text  (e.g. article, blog post), including uncontrolled elements\n *    (e.g. unclassed h2, h3, ul, li, and so on).\n * 2) Use this file only for styling text passage and elements inside of text passage.\n */\ncre8-text-passage,\ncre8-text-passage[size='default'] {\n  @include technology.cre8-typography-body-default();\n\n  /**\n  * Generic h1 within text passage\n  */\n\n  h1 {\n    @include technology.cre8-typography-display-small();\n    margin-bottom: size(1.5);\n  }\n\n  /**\n  * Generic h2 within text passage\n  */\n  h2 {\n    @include technology.cre8-typography-headline-default();\n    margin-bottom: size(1.5);\n  }\n\n  /**\n  * Generic h3 within text passage\n  */\n  h3 {\n    @include technology.cre8-typography-headline-small();\n    margin-bottom: size(1.5);\n  }\n\n  /**\n  * Generic h4 within text passage\n  */\n  h4 {\n    @include technology.cre8-typography-title-large();\n    margin-bottom: size(1.5);\n  }\n\n  /**\n  * Generic h5 within text passage\n  */\n  h5 {\n    @include technology.cre8-typography-meta-large();\n    margin-bottom: size(1.5);\n  }\n\n  /**\n  * Generic unordered and ordered lists within text passage\n  */\n  ul,\n  ol {\n    margin-top: 0;\n  }\n\n  /**\n  * Unordered list within text passage\n  */\n  ul {\n    margin-left: size(2.5);\n    padding-left: 0;\n  }\n\n  /**\n  * Ordered list within text passage\n  */\n  ol {\n    margin-left: size(2.25);\n    padding-left: 0;\n  }\n\n  /**\n  * Generic link tag within text passage\n  */\n  a {\n    color: var(--cre8-color-content-link);\n\n    &:hover,\n    &:focus {\n      text-decoration: underline;\n      color: var(--cre8-color-content-link-hover);\n    }\n  }\n\n  /**\n  * Paragraph tag within text passage\n  */\n  p {\n    margin-top: 0;\n    margin-bottom: size(3);\n  }\n\n  /**\n  * Blockquote within text passage\n  */\n  blockquote {\n    font-style: italic;\n    border-left: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-content-subtle);\n    color: var(--cre8-color-content-subtle);\n    padding-left: size(2);\n    margin-left: 0;\n    margin-bottom: size(2);\n  }\n\n  /**\n* Last item declared in the text passage\n* 1) Remove default margin bottom from the item\n*/\n  :last-child {\n    margin-bottom: 0;\n  }\n}\n\n/**\n* Inverted text passage\n*/\ncre8-text-passage[inverted] {\n  /**\n  * Blockquote within inverted text passage\n  */\n  a {\n    color: var(--cre8-color-content-brand-knockout);\n    &:hover,\n    &:focus {\n      color: var(--cre8-color-content-brand-knockout-hover);\n    }\n  }\n  blockquote {\n    color: var(--cre8-color-content-knockout);\n    font-style: italic;\n    border-left: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-knockout);\n    padding-left: size(2);\n    margin-left: 0;\n    margin-bottom: size(2);\n  }\n}\n`;\nexport default styles;\n"]}

package/lib/components/text-passage/text-passage-light-dom.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}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)}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 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 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 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 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 ul,cre8-text-passage ol,cre8-text-passage[size=default] ul,cre8-text-passage[size=default] ol{margin-top:0}cre8-text-passage ul,cre8-text-passage[size=default] ul{margin-left:1.25rem;padding-left:0}cre8-text-passage ol,cre8-text-passage[size=default] ol{margin-left:1.125rem;padding-left:0}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 p,cre8-text-passage[size=default] p{margin-top:0;margin-bottom:1.5rem}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 :last-child,cre8-text-passage[size=default] :last-child{margin-bottom:0}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}`;
+export default styles;
+//# sourceMappingURL=text-passage-light-dom.styles.js.map

package/lib/components/text-passage/text-passage-light-dom.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-passage-light-dom.styles.js","sourceRoot":"","sources":["../../../components/text-passage/text-passage-light-dom.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,kmQAAkmQ,CAAC;AACrnQ,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}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)}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 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 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 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 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 ul,cre8-text-passage ol,cre8-text-passage[size=default] ul,cre8-text-passage[size=default] ol{margin-top:0}cre8-text-passage ul,cre8-text-passage[size=default] ul{margin-left:1.25rem;padding-left:0}cre8-text-passage ol,cre8-text-passage[size=default] ol{margin-left:1.125rem;padding-left:0}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 p,cre8-text-passage[size=default] p{margin-top:0;margin-bottom:1.5rem}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 :last-child,cre8-text-passage[size=default] :last-child{margin-bottom:0}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}`;\nexport default styles;\n"]}

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

@@ -1,49 +1,77 @@
-import { css as n, html as d } from "lit";
-import { property as p } from "lit/decorators.js";
-import { Cre8Element as c } from "../cre8-element.js";
-const g = n`*,::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}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)}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 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 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 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 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 ul,cre8-text-passage ol,cre8-text-passage[size=default] ul,cre8-text-passage[size=default] ol{margin-top:0}cre8-text-passage ul,cre8-text-passage[size=default] ul{margin-left:1.25rem;padding-left:0}cre8-text-passage ol,cre8-text-passage[size=default] ol{margin-left:1.125rem;padding-left:0}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 p,cre8-text-passage[size=default] p{margin-top:0;margin-bottom:1.5rem}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 :last-child,cre8-text-passage[size=default] :last-child{margin-bottom:0}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}`, m = n`*,::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: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)}.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)}.cre8-c-text-passage--inverted{color:var(--cre8-color-content-knockout)}::slotted(.header){margin-bottom:0.75rem}`;
-var f = Object.defineProperty, h = (l, a, e, y) => {
-  for (var t = void 0, i = l.length - 1, s; i >= 0; i--)
-    (s = l[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 c {
-  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 = g.cssText, document.head.appendChild(e);
+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';
     }
-  }
-  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 d`
-      <div class="${a}">
+    /**
+     * 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 = [m];
-let r = o;
-h([
-  p({ type: Boolean, reflect: !0 })
-], r.prototype, "inverted");
-h([
-  p()
-], 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

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

@@ -0,0 +1 @@
+{"version":3,"file":"text-passage.js","sourceRoot":"","sources":["../../../components/text-passage/text-passage.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,cAAc,MAAM,oCAAoC,CAAC;AAChE,OAAO,MAAM,MAAM,0BAA0B,CAAC;AAE9C;;;;;;;;;;;;;;;GAeG;AACH,MAAM,OAAO,eAAgB,SAAQ,WAAW;IAAhD;;QAUE;;;;;WAKG;QAEC,SAAI,GAAmC,SAAS,CAAC;IA+BvD,CAAC;IA7BC;;OAEG;IACH,iBAAiB;QACb,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,MAAM,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,aAAa,CAAC,2BAA2B,CAAC,CAAC;QAChF,IAAI,CAAC,cAAc,EAAE,CAAC;YAClB,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;YACtD,aAAa,CAAC,EAAE,GAAG,0BAA0B,CAAC;YAC9C,aAAa,CAAC,SAAS,GAAG,cAAc,CAAC,OAAO,CAAC;YACjD,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC;QAC7C,CAAC;IACL,CAAC;IAED,MAAM;QACF,MAAM,kBAAkB,GAAG,IAAI,CAAC,mBAAmB,CAAC,qBAAqB,EAAE;YACvE,8BAA8B,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,SAAS;YACpE,+BAA+B,EAAE,IAAI,CAAC,QAAQ;YAC9C,4BAA4B,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;YACnD,4BAA4B,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;SACtD,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;oBACG,kBAAkB;;;KAGjC,CAAC;IACJ,CAAC;;AA9CQ,sBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAOvB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDACpB;AASnB;IADH,QAAQ,EAAE;6CAC0C;AAiCvD,IAAI,cAAc,CAAC,GAAG,CAAC,mBAAmB,CAAC,KAAK,SAAS,EAAE,CAAC;IACxD,cAAc,CAAC,MAAM,CAAC,mBAAmB,EAAE,eAAe,CAAC,CAAC;AAChE,CAAC;AAQD,eAAe,eAAe,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport lightDomStyles from './text-passage-light-dom.styles.js';\nimport styles from './text-passage.styles.js';\n\n/**\n * The text-passage component acts a general wrapper element\n * for any text content that needs to be used in your project.\n *\n * # How to Use\n * 1. Code your text passage using any of the native html text elements (p, ol, ul, blockquote, cite, etc.)\n *    or other Cre8 Components like cre8-heading and wrap them with the cre8-text-passage tags.\n * 2. Choose between three sizes for your text content or apply inline styling if you need additional styling.\n * 3. For dark backgrounds, add the 'inverted' attribute to the <cre8-text-passage> tag.\n * 3. Your text-passage will render with brand-approved styling!\n *\n *\n * NOTE: It is recommended that you use the cre8-heading component for any heading elements in your HTML template\n *\n * @slot - The component content\n */\nexport class Cre8TextPassage extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * Inverted variant\n   * 1) Used for dark backgrounds\n   */\n  @property({ type: Boolean, reflect: true })\n      inverted?: boolean;\n\n  /**\n   * Size variant\n   * - **small** renders smaller typography than the default variant\n   * - **default** renders default typography variant\n   * - **large** renders larger typography than the default variant\n   */\n  @property()\n      size?: 'small' | 'default' | 'large' = 'default';\n\n  /**\n   * Add the light dom styles when this component is connected to a page\n   */\n  connectedCallback() {\n      super.connectedCallback();\n\n      const lightDomExists = document.head.querySelector('#cre8-text-passage-styles');\n      if (!lightDomExists) {\n          const lightDomStyle = document.createElement('style');\n          lightDomStyle.id = 'cre8-text-passage-styles';\n          lightDomStyle.innerHTML = lightDomStyles.cssText;\n          document.head.appendChild(lightDomStyle);\n      }\n  }\n\n  render() {\n      const componentClassName = this.componentClassNames('cre8-c-text-passage', {\n          'cre8-c-text-passage--default': this.size === 'default' || undefined,\n          'cre8-c-text-passage--inverted': this.inverted,\n          'cre8-c-text-passage--small': this.size === 'small',\n          'cre8-c-text-passage--large': this.size === 'large',\n      });\n\n      return html`\n      <div class=\"${componentClassName}\">\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\nif (customElements.get('cre8-text-passage') === undefined) {\n    customElements.define('cre8-text-passage', Cre8TextPassage);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-text-passage': Cre8TextPassage;\n  }\n}\n\nexport default Cre8TextPassage;\n"]}

package/lib/components/text-passage/text-passage.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: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)}.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)}.cre8-c-text-passage--inverted{color:var(--cre8-color-content-knockout)}::slotted(.header){margin-bottom:0.75rem}`;
+export default styles;
+//# sourceMappingURL=text-passage.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"text-passage.styles.js","sourceRoot":"","sources":["../../../components/text-passage/text-passage.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,ypFAAypF,CAAC;AAC5qF,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: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)}.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)}.cre8-c-text-passage--inverted{color:var(--cre8-color-content-knockout)}::slotted(.header){margin-bottom:0.75rem}`;\nexport default styles;\n"]}