@tmorrow/cre8-wc 1.0.26 → 1.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (200) hide show
  1. package/cdn/cre8-wc.esm.js +9082 -15604
  2. package/cdn/cre8-wc.esm.js.map +1 -1
  3. package/cdn/cre8-wc.min.js +1231 -8308
  4. package/cdn/cre8-wc.min.js.map +1 -1
  5. package/lib/cdn-entry.d.ts +20 -2
  6. package/lib/cdn-entry.d.ts.map +1 -1
  7. package/lib/components/accordion/accordion.js +18 -64
  8. package/lib/components/accordion/accordion.styles.d.ts.map +1 -1
  9. package/lib/components/accordion-item/accordion-item.js +35 -238
  10. package/lib/components/accordion-item/accordion-item.styles.d.ts.map +1 -1
  11. package/lib/components/alert/alert.js +56 -221
  12. package/lib/components/alert/alert.styles.d.ts.map +1 -1
  13. package/lib/components/badge/badge.js +33 -164
  14. package/lib/components/badge/badge.styles.d.ts.map +1 -1
  15. package/lib/components/band/band.js +11 -261
  16. package/lib/components/band/band.styles.d.ts.map +1 -1
  17. package/lib/components/breadcrumbs/breadcrumbs.js +14 -33
  18. package/lib/components/breadcrumbs/breadcrumbs.styles.d.ts.map +1 -1
  19. package/lib/components/breadcrumbs-item/breadcrumbs-item.js +10 -45
  20. package/lib/components/breadcrumbs-item/breadcrumbs-item.styles.d.ts.map +1 -1
  21. package/lib/components/button/button.js +14 -14
  22. package/lib/components/button-group/button-group.js +10 -261
  23. package/lib/components/button-group/button-group.styles.d.ts.map +1 -1
  24. package/lib/components/card/card.js +17 -130
  25. package/lib/components/card/card.styles.d.ts.map +1 -1
  26. package/lib/components/chart/chart.js +137 -223
  27. package/lib/components/chart/chart.styles.d.ts.map +1 -1
  28. package/lib/components/checkbox-field/checkbox-field.js +26 -59
  29. package/lib/components/checkbox-field/checkbox-field.styles.d.ts.map +1 -1
  30. package/lib/components/checkbox-field-item/checkbox-field-item.js +38 -205
  31. package/lib/components/checkbox-field-item/checkbox-field-item.styles.d.ts.map +1 -1
  32. package/lib/components/danger-button/danger-button.js +53 -582
  33. package/lib/components/danger-button/danger-button.styles.d.ts.map +1 -1
  34. package/lib/components/date-picker/calendar/calendar.styles.d.ts.map +1 -1
  35. package/lib/components/date-picker/calendar-month-modal/calendar-month-modal.styles.d.ts.map +1 -1
  36. package/lib/components/date-picker/calendar-navigation/calendar-navigation.styles.d.ts.map +1 -1
  37. package/lib/components/date-picker/calendar-year-modal/calendar-year-modal.styles.d.ts.map +1 -1
  38. package/lib/components/date-picker/date-picker.js +262 -499
  39. package/lib/components/date-picker/date-picker.styles.d.ts.map +1 -1
  40. package/lib/components/divider/divider.js +20 -61
  41. package/lib/components/divider/divider.styles.d.ts.map +1 -1
  42. package/lib/components/dropdown/dropdown.js +34 -107
  43. package/lib/components/dropdown/dropdown.styles.d.ts.map +1 -1
  44. package/lib/components/dropdown-item/dropdown-item.js +18 -49
  45. package/lib/components/dropdown-item/dropdown-item.styles.d.ts.map +1 -1
  46. package/lib/components/feature/feature.js +19 -81
  47. package/lib/components/feature/feature.styles.d.ts.map +1 -1
  48. package/lib/components/field/field.js +12 -146
  49. package/lib/components/field/field.styles.d.ts.map +1 -1
  50. package/lib/components/field-note/field-note.js +22 -66
  51. package/lib/components/field-note/field-note.styles.d.ts.map +1 -1
  52. package/lib/components/footer/footer.js +10 -29
  53. package/lib/components/footer/footer.styles.d.ts.map +1 -1
  54. package/lib/components/global-nav/global-nav.js +20 -43
  55. package/lib/components/global-nav/global-nav.styles.d.ts.map +1 -1
  56. package/lib/components/global-nav-item/global-nav-item.js +26 -105
  57. package/lib/components/global-nav-item/global-nav-item.styles.d.ts.map +1 -1
  58. package/lib/components/grid/grid.js +15 -337
  59. package/lib/components/grid/grid.styles.d.ts.map +1 -1
  60. package/lib/components/grid-item/grid-item.js +7 -15
  61. package/lib/components/grid-item/grid-item.styles.d.ts.map +1 -1
  62. package/lib/components/header/header.js +17 -80
  63. package/lib/components/header/header.styles.d.ts.map +1 -1
  64. package/lib/components/heading/heading.js +16 -153
  65. package/lib/components/heading/heading.styles.d.ts.map +1 -1
  66. package/lib/components/hero/hero.js +17 -149
  67. package/lib/components/hero/hero.styles.d.ts.map +1 -1
  68. package/lib/components/icon/icon.js +1 -1
  69. package/lib/components/icon/icon.styles.d.ts.map +1 -1
  70. package/lib/components/inline-alert/inline-alert.js +53 -214
  71. package/lib/components/inline-alert/inline-alert.styles.d.ts.map +1 -1
  72. package/lib/components/layout/layout.js +20 -53
  73. package/lib/components/layout/layout.styles.d.ts.map +1 -1
  74. package/lib/components/layout-container/layout-container.js +20 -43
  75. package/lib/components/layout-container/layout-container.styles.d.ts.map +1 -1
  76. package/lib/components/layout-section/layout-section.js +20 -29
  77. package/lib/components/layout-section/layout-section.styles.d.ts.map +1 -1
  78. package/lib/components/linelength-container/linelength-container.js +7 -15
  79. package/lib/components/linelength-container/linelength-container.styles.d.ts.map +1 -1
  80. package/lib/components/link/link.js +33 -228
  81. package/lib/components/link/link.styles.d.ts.map +1 -1
  82. package/lib/components/link-list/link-list.js +23 -129
  83. package/lib/components/link-list/link-list.styles.d.ts.map +1 -1
  84. package/lib/components/link-list-item/link-list-item.js +19 -80
  85. package/lib/components/link-list-item/link-list-item.styles.d.ts.map +1 -1
  86. package/lib/components/list/list.js +17 -67
  87. package/lib/components/list/list.styles.d.ts.map +1 -1
  88. package/lib/components/list-item/list-item.js +11 -16
  89. package/lib/components/list-item/list-item.styles.d.ts.map +1 -1
  90. package/lib/components/loading-spinner/loading-spinner.js +13 -157
  91. package/lib/components/loading-spinner/loading-spinner.styles.d.ts.map +1 -1
  92. package/lib/components/logo/logo.js +20 -30
  93. package/lib/components/logo/logo.styles.d.ts.map +1 -1
  94. package/lib/components/main/main.js +18 -42
  95. package/lib/components/main/main.styles.d.ts.map +1 -1
  96. package/lib/components/modal/modal.js +50 -215
  97. package/lib/components/modal/modal.styles.d.ts.map +1 -1
  98. package/lib/components/multi-select/multi-select.js +71 -532
  99. package/lib/components/multi-select/multi-select.styles.d.ts.map +1 -1
  100. package/lib/components/nav-container/nav-container.js +5 -40
  101. package/lib/components/nav-container/nav-container.styles.d.ts.map +1 -1
  102. package/lib/components/page-header/page-header.js +19 -54
  103. package/lib/components/page-header/page-header.styles.d.ts.map +1 -1
  104. package/lib/components/pagination/page-counter/page-counter.styles.d.ts.map +1 -1
  105. package/lib/components/pagination/pagination.js +102 -183
  106. package/lib/components/pagination/pagination.styles.d.ts.map +1 -1
  107. package/lib/components/percent-bar/percent-bar.js +22 -50
  108. package/lib/components/percent-bar/percent-bar.styles.d.ts.map +1 -1
  109. package/lib/components/popover/popover.js +51 -220
  110. package/lib/components/popover/popover.styles.d.ts.map +1 -1
  111. package/lib/components/primary-nav/primary-nav.js +17 -51
  112. package/lib/components/primary-nav/primary-nav.styles.d.ts.map +1 -1
  113. package/lib/components/primary-nav-item/primary-nav-item.js +24 -191
  114. package/lib/components/primary-nav-item/primary-nav-item.styles.d.ts.map +1 -1
  115. package/lib/components/progress-meter/progress-meter.js +23 -127
  116. package/lib/components/progress-meter/progress-meter.styles.d.ts.map +1 -1
  117. package/lib/components/progress-steps/progress-steps.styles.d.ts.map +1 -1
  118. package/lib/components/progress-steps-item/progress-steps-item.js +27 -118
  119. package/lib/components/progress-steps-item/progress-steps-item.styles.d.ts.map +1 -1
  120. package/lib/components/radio-field/radio-field.js +28 -64
  121. package/lib/components/radio-field/radio-field.styles.d.ts.map +1 -1
  122. package/lib/components/radio-field-item/radio-field-item.js +54 -189
  123. package/lib/components/radio-field-item/radio-field-item.styles.d.ts.map +1 -1
  124. package/lib/components/remove-tag/remove-tag.js +36 -129
  125. package/lib/components/remove-tag/remove-tag.styles.d.ts.map +1 -1
  126. package/lib/components/section/section.js +19 -50
  127. package/lib/components/section/section.styles.d.ts.map +1 -1
  128. package/lib/components/select/select.js +43 -416
  129. package/lib/components/select/select.styles.d.ts.map +1 -1
  130. package/lib/components/select-tile/select-tile.js +18 -442
  131. package/lib/components/select-tile/select-tile.styles.d.ts.map +1 -1
  132. package/lib/components/select-tile-list/select-tile-list.js +24 -62
  133. package/lib/components/select-tile-list/select-tile-list.styles.d.ts.map +1 -1
  134. package/lib/components/skeleton-loader/skeleton-loader.js +19 -73
  135. package/lib/components/skeleton-loader/skeleton-loader.styles.d.ts.map +1 -1
  136. package/lib/components/split-button/split-button.js +21 -37
  137. package/lib/components/split-button/split-button.styles.d.ts.map +1 -1
  138. package/lib/components/submenu/submenu.js +8 -18
  139. package/lib/components/submenu/submenu.styles.d.ts.map +1 -1
  140. package/lib/components/submenu-item/submenu-item.js +21 -42
  141. package/lib/components/submenu-item/submenu-item.styles.d.ts.map +1 -1
  142. package/lib/components/tab/tab.js +17 -100
  143. package/lib/components/tab/tab.styles.d.ts.map +1 -1
  144. package/lib/components/tab-panel/tab-panel.js +18 -52
  145. package/lib/components/tab-panel/tab-panel.styles.d.ts.map +1 -1
  146. package/lib/components/table/table.js +21 -73
  147. package/lib/components/table/table.styles.d.ts.map +1 -1
  148. package/lib/components/table-body/table-body.js +12 -24
  149. package/lib/components/table-body/table-body.styles.d.ts.map +1 -1
  150. package/lib/components/table-cell/table-cell.js +29 -69
  151. package/lib/components/table-cell/table-cell.styles.d.ts.map +1 -1
  152. package/lib/components/table-header/table-header.js +8 -39
  153. package/lib/components/table-header/table-header.styles.d.ts.map +1 -1
  154. package/lib/components/table-header-cell/table-header-cell.js +18 -37
  155. package/lib/components/table-header-cell/table-header-cell.styles.d.ts.map +1 -1
  156. package/lib/components/table-object/table-object.js +13 -32
  157. package/lib/components/table-object/table-object.styles.d.ts.map +1 -1
  158. package/lib/components/table-row/table-row.js +33 -139
  159. package/lib/components/table-row/table-row.styles.d.ts.map +1 -1
  160. package/lib/components/tabs/tabs.js +24 -339
  161. package/lib/components/tabs/tabs.styles.d.ts.map +1 -1
  162. package/lib/components/tag/tag.js +44 -159
  163. package/lib/components/tag/tag.styles.d.ts.map +1 -1
  164. package/lib/components/tag-list/tag-list.js +20 -51
  165. package/lib/components/tag-list/tag-list.styles.d.ts.map +1 -1
  166. package/lib/components/tertiary-nav/tertiary-nav.js +21 -54
  167. package/lib/components/tertiary-nav/tertiary-nav.styles.d.ts.map +1 -1
  168. package/lib/components/tertiary-nav-item/tertiary-nav-item.js +18 -68
  169. package/lib/components/tertiary-nav-item/tertiary-nav-item.styles.d.ts.map +1 -1
  170. package/lib/components/text-link/text-link.js +20 -85
  171. package/lib/components/text-link/text-link.styles.d.ts.map +1 -1
  172. package/lib/components/text-passage/text-passage-light-dom.styles.d.ts.map +1 -1
  173. package/lib/components/text-passage/text-passage.js +17 -189
  174. package/lib/components/text-passage/text-passage.styles.d.ts.map +1 -1
  175. package/lib/components/tooltip/tooltip.js +57 -248
  176. package/lib/components/tooltip/tooltip.styles.d.ts.map +1 -1
  177. package/lib/components/utility-nav/utility-nav.js +23 -56
  178. package/lib/components/utility-nav/utility-nav.styles.d.ts.map +1 -1
  179. package/lib/components/utility-nav-item/utility-nav-item.js +28 -83
  180. package/lib/components/utility-nav-item/utility-nav-item.styles.d.ts.map +1 -1
  181. package/lib/design-tokens/brands/blue/css/tokens_blue.module.d.ts.map +1 -1
  182. package/lib/design-tokens/brands/bolt/tokens_bolt.theme.d.ts.map +1 -1
  183. package/lib/design-tokens/brands/cre8-a2ui/css/tokens_cre8-a2ui.module.d.ts +3 -0
  184. package/lib/design-tokens/brands/cre8-a2ui/css/tokens_cre8-a2ui.module.d.ts.map +1 -0
  185. package/lib/design-tokens/brands/cre8-legacy/css/tokens_cre8-legacy.module.d.ts.map +1 -1
  186. package/lib/design-tokens/brands/femmecubator/css/tokens_femmecubator2.module.d.ts.map +1 -1
  187. package/lib/design-tokens/brands/legacy/css/tokens_legacy.module.d.ts.map +1 -1
  188. package/lib/design-tokens/brands/marketing/css/tokens_marketing.module.d.ts.map +1 -1
  189. package/lib/design-tokens/brands/minimalist/css/tokens_minimalist.module.d.ts +2 -2
  190. package/lib/design-tokens/brands/minimalist/css/tokens_minimalist.module.d.ts.map +1 -1
  191. package/lib/design-tokens/brands/starbucks/tokens_starbucks.module.d.ts.map +1 -1
  192. package/lib/design-tokens/core/scss/theming/component.scss +5 -5
  193. package/lib/design-tokens/core/scss/theming/functions.scss +4 -0
  194. package/lib/design-tokens/core/scss/theming/spacing.scss +60 -60
  195. package/lib/design-tokens/core/scss/theming/variables.scss +11 -11
  196. package/lib/design-tokens/mixins/typography-usage.scss +277 -277
  197. package/lib/design-tokens/tokens_netflix.theme.d.ts.map +1 -1
  198. package/lib/{icon-DImqxDiW.js → icon-D22g8aWB.js} +35 -138
  199. package/lib/index.js +1 -1
  200. package/package.json +7 -6
@@ -1,79 +1,14 @@
1
1
  import { css as p, html as d } from "lit";
2
- import { ifDefined as k } from "lit-html/directives/if-defined.js";
3
- import { property as o } from "lit/decorators.js";
4
- import { Cre8Element as m } from "../cre8-element.js";
5
- const f = p`@import '../../design-tokens/core/scss/theming/component';
6
-
7
- /**
8
- * 1) General text link used across the product
9
- */
10
- .cre8-c-text-link {
11
- @include cre8-typography-body-default-link();
12
- display: inline-flex;
13
- color: var(--cre8-color-content-link);
14
- cursor: pointer;
15
-
16
- &:hover,
17
- &:focus {
18
- text-decoration: underline;
19
- color: var(--cre8-color-content-link-hover);
20
- }
21
-
22
- &:active {
23
- color: var(--cre8-color-content-link-active);
24
- }
25
-
26
- &:visited {
27
- color: var(--cre8-color-content-link-visited);
28
- }
29
- }
30
-
31
- /**
32
- * Display text link
33
- * 1) Used for items like article title links
34
- */
35
- .cre8-c-text-link--display {
36
- color: var(--cre8-color-content-default);
37
- }
38
-
39
- /**
40
- * A secondary link list
41
- * 1) Uses a more subtle treatment than the default link list
42
- */
43
- .cre8-c-text-link--secondary {
44
- color: var(--cre8-color-content-subtle);
45
- }
46
-
47
- /**
48
- * Inverted text link
49
- * 1) Used on dark backgrounds
50
- */
51
- .cre8-c-text-link--inverted {
52
- color: var(--cre8-color-content-knockout);
53
- }
54
-
55
- /**
56
- * Small text link
57
- * 1) Shrink the typography size
58
- */
59
- .cre8-c-text-link--sm {
60
- @include cre8-typography-body-small();
61
- }
62
-
63
- /**
64
- * Text link after
65
- * 1) Container used to place items after the text link
66
- */
67
- .cre8-c-text-link__after {
68
- margin-left: calc(8px * 1);
69
- }
70
- `;
71
- var v = Object.defineProperty, n = (c, r, s, y) => {
72
- for (var t = void 0, l = c.length - 1, a; l >= 0; l--)
73
- (a = c[l]) && (t = a(r, s, t) || t);
74
- return t && v(r, s, t), t;
2
+ import { ifDefined as h } from "lit-html/directives/if-defined.js";
3
+ import { property as i } from "lit/decorators.js";
4
+ import { Cre8Element as f } from "../cre8-element.js";
5
+ const m = p`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}.cre8-c-text-link{font-family:var(--cre8-typography-body-default-link-font-family);font-size:var(--cre8-typography-body-default-link-font-size);font-weight:var(--cre8-typography-body-default-link-font-weight);line-height:var(--cre8-typography-body-default-link-line-height);text-decoration:var(--cre8-typography-body-default-link-text-decoration);text-transform:var(--cre8-typography-body-default-link-text-transform);display:inline-flex;color:var(--cre8-color-content-link);cursor:pointer}.cre8-c-text-link:hover,.cre8-c-text-link:focus{text-decoration:underline;color:var(--cre8-color-content-link-hover)}.cre8-c-text-link:active{color:var(--cre8-color-content-link-active)}.cre8-c-text-link:visited{color:var(--cre8-color-content-link-visited)}.cre8-c-text-link--display{color:var(--cre8-color-content-default)}.cre8-c-text-link--secondary{color:var(--cre8-color-content-subtle)}.cre8-c-text-link--inverted{color:var(--cre8-color-content-knockout)}.cre8-c-text-link--sm{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-link__after{margin-left:0.5rem}`;
6
+ var y = Object.defineProperty, a = (n, r, s, x) => {
7
+ for (var t = void 0, o = n.length - 1, c; o >= 0; o--)
8
+ (c = n[o]) && (t = c(r, s, t) || t);
9
+ return t && y(r, s, t), t;
75
10
  };
76
- const i = class i extends m {
11
+ const l = class l extends f {
77
12
  render() {
78
13
  const r = this.componentClassNames("cre8-c-text-link", {
79
14
  "cre8-c-text-link--inverted": this.inverted === !0,
@@ -82,7 +17,7 @@ const i = class i extends m {
82
17
  "cre8-c-text-link--sm": this.size === "sm"
83
18
  });
84
19
  return d`
85
- <a href="${k(this.href)}" class="${r}">
20
+ <a href="${h(this.href)}" class="${r}">
86
21
  <slot></slot>
87
22
  ${this.slotNotEmpty("linkAfter") && d`<div class="cre8-c-text-link__after">
88
23
  <slot name="linkAfter"></slot>
@@ -91,19 +26,19 @@ const i = class i extends m {
91
26
  `;
92
27
  }
93
28
  };
94
- i.styles = [f];
95
- let e = i;
96
- n([
97
- o()
29
+ l.styles = [m];
30
+ let e = l;
31
+ a([
32
+ i()
98
33
  ], e.prototype, "href");
99
- n([
100
- o()
34
+ a([
35
+ i()
101
36
  ], e.prototype, "variant");
102
- n([
103
- o()
37
+ a([
38
+ i()
104
39
  ], e.prototype, "size");
105
- n([
106
- o({ type: Boolean, reflect: !0 })
40
+ a([
41
+ i({ type: Boolean, reflect: !0 })
107
42
  ], e.prototype, "inverted");
108
43
  customElements.get("cre8-text-link") === void 0 && customElements.define("cre8-text-link", e);
109
44
  export {
@@ -1 +1 @@
1
- {"version":3,"file":"text-link.styles.d.ts","sourceRoot":"","sources":["../../../components/text-link/text-link.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAiEX,CAAC;AACF,eAAe,MAAM,CAAC"}
1
+ {"version":3,"file":"text-link.styles.d.ts","sourceRoot":"","sources":["../../../components/text-link/text-link.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAA+mG,CAAC;AAC5nG,eAAe,MAAM,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"text-passage-light-dom.styles.d.ts","sourceRoot":"","sources":["../../../components/text-passage/text-passage-light-dom.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBA6IX,CAAC;AACF,eAAe,MAAM,CAAC"}
1
+ {"version":3,"file":"text-passage-light-dom.styles.d.ts","sourceRoot":"","sources":["../../../components/text-passage/text-passage-light-dom.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAAwmQ,CAAC;AACrnQ,eAAe,MAAM,CAAC"}
@@ -1,185 +1,13 @@
1
- import { css as n, html as p } from "lit";
2
- import { property as i } from "lit/decorators.js";
3
- import { Cre8Element as g } from "../cre8-element.js";
4
- const m = n`@import '../../design-tokens/core/scss/theming/component';
5
-
6
- /**
7
- * 1) A passage of text (e.g. article, blog post), including uncontrolled elements
8
- * (e.g. unclassed h2, h3, ul, li, and so on).
9
- * 2) Use this file only for styling text passage and elements inside of text passage.
10
- */
11
- cre8-text-passage,
12
- cre8-text-passage[size='default'] {
13
- @include cre8-typography-body-default();
14
-
15
- /**
16
- * Generic h1 within text passage
17
- */
18
-
19
- h1 {
20
- @include cre8-typography-display-small();
21
- margin-bottom: calc(8px * 1.5);
22
- }
23
-
24
- /**
25
- * Generic h2 within text passage
26
- */
27
- h2 {
28
- @include cre8-typography-headline-default();
29
- margin-bottom: calc(8px * 1.5);
30
- }
31
-
32
- /**
33
- * Generic h3 within text passage
34
- */
35
- h3 {
36
- @include cre8-typography-headline-small();
37
- margin-bottom: calc(8px * 1.5);
38
- }
39
-
40
- /**
41
- * Generic h4 within text passage
42
- */
43
- h4 {
44
- @include cre8-typography-title-large();
45
- margin-bottom: calc(8px * 1.5);
46
- }
47
-
48
- /**
49
- * Generic h5 within text passage
50
- */
51
- h5 {
52
- @include cre8-typography-meta-large();
53
- margin-bottom: calc(8px * 1.5);
54
- }
55
-
56
- /**
57
- * Generic unordered and ordered lists within text passage
58
- */
59
- ul,
60
- ol {
61
- margin-top: 0;
62
- }
63
-
64
- /**
65
- * Unordered list within text passage
66
- */
67
- ul {
68
- margin-left: calc(8px * 2.5);
69
- padding-left: 0;
70
- }
71
-
72
- /**
73
- * Ordered list within text passage
74
- */
75
- ol {
76
- margin-left: calc(8px * 2.25);
77
- padding-left: 0;
78
- }
79
-
80
- /**
81
- * Generic link tag within text passage
82
- */
83
- a {
84
- color: var(--cre8-color-content-link);
85
-
86
- &:hover,
87
- &:focus {
88
- text-decoration: underline;
89
- color: var(--cre8-color-content-link-hover);
90
- }
91
- }
92
-
93
- /**
94
- * Paragraph tag within text passage
95
- */
96
- p {
97
- margin-top: 0;
98
- margin-bottom: calc(8px * 3);
99
- }
100
-
101
- /**
102
- * Blockquote within text passage
103
- */
104
- blockquote {
105
- font-style: italic;
106
- border-left: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-content-subtle);
107
- color: var(--cre8-color-content-subtle);
108
- padding-left: calc(8px * 2);
109
- margin-left: 0;
110
- margin-bottom: calc(8px * 2);
111
- }
112
-
113
- /**
114
- * Last item declared in the text passage
115
- * 1) Remove default margin bottom from the item
116
- */
117
- :last-child {
118
- margin-bottom: 0;
119
- }
120
- }
121
-
122
- /**
123
- * Inverted text passage
124
- */
125
- cre8-text-passage[inverted] {
126
- /**
127
- * Blockquote within inverted text passage
128
- */
129
- a {
130
- color: var(--cre8-color-content-brand-knockout);
131
- &:hover,
132
- &:focus {
133
- color: var(--cre8-color-content-brand-knockout-hover);
134
- }
135
- }
136
- blockquote {
137
- color: var(--cre8-color-content-knockout);
138
- font-style: italic;
139
- border-left: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-knockout);
140
- padding-left: calc(8px * 2);
141
- margin-left: 0;
142
- margin-bottom: calc(8px * 2);
143
- }
144
- }
145
- `, h = n`@import '../../design-tokens/core/scss/theming/component';
146
-
147
- /**
148
- * !!! DO NOT USE THIS FILE for styling specific elements within text passage.
149
- * Use text-passage-ligh-dom.scss to for styling.!!!
150
- */
151
-
152
- :host {
153
- display: inline-flex;
154
- }
155
-
156
- .cre8-c-text-passage--small {
157
- @include cre8-typography-body-small();
158
-
159
- /**
160
- * Unordered list within small text passage
161
- */
162
- }
163
- .cre8-c-text-passage--large {
164
- @include cre8-typography-body-large();
165
-
166
- /**
167
- * Unordered list within small text passage
168
- */
169
- }
170
- .cre8-c-text-passage--inverted {
171
- color: var(--cre8-color-content-knockout);
172
- }
173
- ::slotted(.header) {
174
- margin-bottom: calc(8px * 1.5);
175
- }
176
- `;
177
- var u = Object.defineProperty, d = (c, a, e, x) => {
178
- for (var t = void 0, o = c.length - 1, l; o >= 0; o--)
179
- (l = c[o]) && (t = l(a, e, t) || t);
180
- return t && u(a, e, t), t;
1
+ import { css as n, html as d } from "lit";
2
+ import { property as p } from "lit/decorators.js";
3
+ import { Cre8Element as c } from "../cre8-element.js";
4
+ 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}`;
5
+ var f = Object.defineProperty, h = (l, a, e, y) => {
6
+ for (var t = void 0, i = l.length - 1, s; i >= 0; i--)
7
+ (s = l[i]) && (t = s(a, e, t) || t);
8
+ return t && f(a, e, t), t;
181
9
  };
182
- const s = class s extends g {
10
+ const o = class o extends c {
183
11
  constructor() {
184
12
  super(...arguments), this.size = "default";
185
13
  }
@@ -189,7 +17,7 @@ const s = class s extends g {
189
17
  connectedCallback() {
190
18
  if (super.connectedCallback(), !document.head.querySelector("#cre8-text-passage-styles")) {
191
19
  const e = document.createElement("style");
192
- e.id = "cre8-text-passage-styles", e.innerHTML = m.cssText, document.head.appendChild(e);
20
+ e.id = "cre8-text-passage-styles", e.innerHTML = g.cssText, document.head.appendChild(e);
193
21
  }
194
22
  }
195
23
  render() {
@@ -199,20 +27,20 @@ const s = class s extends g {
199
27
  "cre8-c-text-passage--small": this.size === "small",
200
28
  "cre8-c-text-passage--large": this.size === "large"
201
29
  });
202
- return p`
30
+ return d`
203
31
  <div class="${a}">
204
32
  <slot></slot>
205
33
  </div>
206
34
  `;
207
35
  }
208
36
  };
209
- s.styles = [h];
210
- let r = s;
211
- d([
212
- i({ type: Boolean, reflect: !0 })
37
+ o.styles = [m];
38
+ let r = o;
39
+ h([
40
+ p({ type: Boolean, reflect: !0 })
213
41
  ], r.prototype, "inverted");
214
- d([
215
- i()
42
+ h([
43
+ p()
216
44
  ], r.prototype, "size");
217
45
  customElements.get("cre8-text-passage") === void 0 && customElements.define("cre8-text-passage", r);
218
46
  export {
@@ -1 +1 @@
1
- {"version":3,"file":"text-passage.styles.d.ts","sourceRoot":"","sources":["../../../components/text-passage/text-passage.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBA+BX,CAAC;AACF,eAAe,MAAM,CAAC"}
1
+ {"version":3,"file":"text-passage.styles.d.ts","sourceRoot":"","sources":["../../../components/text-passage/text-passage.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAA+pF,CAAC;AAC5qF,eAAe,MAAM,CAAC"}