@affinda/wc 0.0.7 → 0.0.8

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 (218) hide show
  1. package/dist/affinda/af-button.entry.esm.js.map +1 -1
  2. package/dist/affinda/af-card.entry.esm.js.map +1 -1
  3. package/dist/affinda/af-client-carousel.entry.esm.js.map +1 -0
  4. package/dist/affinda/af-heading.af-logo.af-nav-item.af-navbar.af-text.entry.esm.js.map +1 -1
  5. package/dist/affinda/af-hero-section.entry.esm.js.map +1 -0
  6. package/dist/affinda/af-logo-well.entry.esm.js.map +1 -0
  7. package/dist/affinda/af-section.entry.esm.js.map +1 -0
  8. package/dist/affinda/af-testimonial-carousel.entry.esm.js.map +1 -1
  9. package/dist/affinda/affinda.css +1 -1
  10. package/dist/affinda/affinda.esm.js +1 -1
  11. package/dist/affinda/index.esm.js +1 -1
  12. package/dist/affinda/p-0c4a30a4.entry.js +2 -0
  13. package/dist/affinda/p-0c4a30a4.entry.js.map +1 -0
  14. package/dist/affinda/p-0fb55acf.entry.js +2 -0
  15. package/dist/affinda/{p-56284540.entry.js.map → p-0fb55acf.entry.js.map} +1 -1
  16. package/dist/affinda/p-10288f13.entry.js +2 -0
  17. package/dist/affinda/p-10288f13.entry.js.map +1 -0
  18. package/dist/affinda/p-13c30dd8.entry.js +2 -0
  19. package/dist/affinda/p-13c30dd8.entry.js.map +1 -0
  20. package/dist/affinda/{p-c8628633.entry.js → p-23aedaa4.entry.js} +2 -2
  21. package/dist/affinda/{p-eff7eff1.entry.js → p-39e917eb.entry.js} +2 -2
  22. package/dist/affinda/{p-16c84e60.entry.js → p-430127fa.entry.js} +2 -2
  23. package/dist/affinda/{p-43324b6d.entry.js → p-45d0f3e3.entry.js} +2 -2
  24. package/dist/affinda/p-45d0f3e3.entry.js.map +1 -0
  25. package/dist/affinda/{p-f53b4847.entry.js → p-46edc753.entry.js} +2 -2
  26. package/dist/affinda/{p-32f46944.entry.js → p-56a15842.entry.js} +2 -2
  27. package/dist/affinda/p-7c115698.entry.js +2 -0
  28. package/dist/affinda/p-7c115698.entry.js.map +1 -0
  29. package/dist/affinda/p-867c5141.entry.js +2 -0
  30. package/dist/affinda/{p-UbNmjSSX.js → p-Agei6ZJQ.js} +3 -3
  31. package/dist/affinda/p-Agei6ZJQ.js.map +1 -0
  32. package/dist/affinda/{p-750a694b.entry.js → p-d7ff9fd9.entry.js} +2 -2
  33. package/dist/affinda/{p-9e5bef28.entry.js → p-e2c40f4e.entry.js} +2 -2
  34. package/dist/affinda/{p-9e5bef28.entry.js.map → p-e2c40f4e.entry.js.map} +1 -1
  35. package/dist/affinda/p-e56182e4.entry.js +2 -0
  36. package/dist/affinda/p-e56182e4.entry.js.map +1 -0
  37. package/dist/affinda/{p-66daadde.entry.js → p-f6f2f1c4.entry.js} +2 -2
  38. package/dist/cjs/af-aspect-ratio.cjs.entry.js +1 -1
  39. package/dist/cjs/af-button-group.cjs.entry.js +2 -2
  40. package/dist/cjs/af-button.cjs.entry.js +7 -2
  41. package/dist/cjs/af-button.entry.cjs.js.map +1 -1
  42. package/dist/cjs/af-card.cjs.entry.js +3 -3
  43. package/dist/cjs/af-card.entry.cjs.js.map +1 -1
  44. package/dist/cjs/af-client-carousel.cjs.entry.js +22 -0
  45. package/dist/cjs/af-client-carousel.entry.cjs.js.map +1 -0
  46. package/dist/cjs/af-color-swatch.cjs.entry.js +1 -1
  47. package/dist/cjs/af-container.cjs.entry.js +1 -1
  48. package/dist/cjs/af-heading.af-logo.af-nav-item.af-navbar.af-text.entry.cjs.js.map +1 -1
  49. package/dist/cjs/af-heading_5.cjs.entry.js +22 -12
  50. package/dist/cjs/af-hero-section.cjs.entry.js +24 -0
  51. package/dist/cjs/af-hero-section.entry.cjs.js.map +1 -0
  52. package/dist/cjs/af-icon-button.cjs.entry.js +1 -1
  53. package/dist/cjs/af-logo-well.cjs.entry.js +18 -0
  54. package/dist/cjs/af-logo-well.entry.cjs.js.map +1 -0
  55. package/dist/cjs/af-section.cjs.entry.js +25 -0
  56. package/dist/cjs/af-section.entry.cjs.js.map +1 -0
  57. package/dist/cjs/af-testimonial-carousel.cjs.entry.js +4 -4
  58. package/dist/cjs/af-testimonial-carousel.entry.cjs.js.map +1 -1
  59. package/dist/cjs/af-testimonial-stat.cjs.entry.js +2 -2
  60. package/dist/cjs/af-testimonial.cjs.entry.js +2 -2
  61. package/dist/cjs/af-typography-lockup.cjs.entry.js +2 -2
  62. package/dist/cjs/affinda.cjs.js +2 -2
  63. package/dist/cjs/{index-CNijn8X5.js → index-D_ItFcqt.js} +3 -3
  64. package/dist/cjs/index-D_ItFcqt.js.map +1 -0
  65. package/dist/cjs/index.cjs.js +1 -1
  66. package/dist/cjs/loader.cjs.js +2 -2
  67. package/dist/collection/assets/paperclip-decoration.svg +3 -0
  68. package/dist/collection/collection-manifest.json +4 -0
  69. package/dist/collection/components/af-button/af-button.js +26 -1
  70. package/dist/collection/components/af-button/af-button.js.map +1 -1
  71. package/dist/collection/components/af-button-group/af-button-group.js +1 -1
  72. package/dist/collection/components/af-card/af-card.css +10 -7
  73. package/dist/collection/components/af-card/af-card.js +1 -1
  74. package/dist/collection/components/af-client-carousel/af-client-carousel.css +112 -0
  75. package/dist/collection/components/af-client-carousel/af-client-carousel.js +72 -0
  76. package/dist/collection/components/af-client-carousel/af-client-carousel.js.map +1 -0
  77. package/dist/collection/components/af-heading/af-heading.css +9 -0
  78. package/dist/collection/components/af-heading/af-heading.js +26 -3
  79. package/dist/collection/components/af-heading/af-heading.js.map +1 -1
  80. package/dist/collection/components/af-hero-section/af-hero-section.css +69 -0
  81. package/dist/collection/components/af-hero-section/af-hero-section.js +94 -0
  82. package/dist/collection/components/af-hero-section/af-hero-section.js.map +1 -0
  83. package/dist/collection/components/af-logo/af-logo.js +1 -1
  84. package/dist/collection/components/af-logo-well/af-logo-well.css +27 -0
  85. package/dist/collection/components/af-logo-well/af-logo-well.js +22 -0
  86. package/dist/collection/components/af-logo-well/af-logo-well.js.map +1 -0
  87. package/dist/collection/components/af-navbar/af-navbar.css +40 -3
  88. package/dist/collection/components/af-navbar/af-navbar.js +13 -1
  89. package/dist/collection/components/af-navbar/af-navbar.js.map +1 -1
  90. package/dist/collection/components/af-section/af-section.css +52 -0
  91. package/dist/collection/components/af-section/af-section.js +95 -0
  92. package/dist/collection/components/af-section/af-section.js.map +1 -0
  93. package/dist/collection/components/af-testimonial/af-testimonial.js +1 -1
  94. package/dist/collection/components/af-testimonial-carousel/af-testimonial-carousel.css +3 -2
  95. package/dist/collection/components/af-testimonial-carousel/af-testimonial-carousel.js +2 -2
  96. package/dist/collection/components/af-testimonial-stat/af-testimonial-stat.js +1 -1
  97. package/dist/collection/components/af-text/af-text.css +9 -0
  98. package/dist/collection/components/af-text/af-text.js +26 -3
  99. package/dist/collection/components/af-text/af-text.js.map +1 -1
  100. package/dist/collection/components/af-typography-lockup/af-typography-lockup.js +1 -1
  101. package/dist/components/af-aspect-ratio.js +1 -1
  102. package/dist/components/af-button-group.js +1 -1
  103. package/dist/components/af-button.js +1 -1
  104. package/dist/components/af-card.js +3 -3
  105. package/dist/components/af-card.js.map +1 -1
  106. package/dist/components/af-client-carousel.d.ts +11 -0
  107. package/dist/components/af-client-carousel.js +45 -0
  108. package/dist/components/af-client-carousel.js.map +1 -0
  109. package/dist/components/af-color-swatch.js +1 -1
  110. package/dist/components/af-container.js +1 -1
  111. package/dist/components/af-heading.js +1 -1
  112. package/dist/components/af-hero-section.d.ts +11 -0
  113. package/dist/components/af-hero-section.js +53 -0
  114. package/dist/components/af-hero-section.js.map +1 -0
  115. package/dist/components/af-icon-button.js +1 -1
  116. package/dist/components/af-logo-well.d.ts +11 -0
  117. package/dist/components/af-logo-well.js +38 -0
  118. package/dist/components/af-logo-well.js.map +1 -0
  119. package/dist/components/af-logo.js +1 -1
  120. package/dist/components/af-nav-item.js +1 -1
  121. package/dist/components/af-navbar.js +1 -1
  122. package/dist/components/af-section.d.ts +11 -0
  123. package/dist/components/af-section.js +54 -0
  124. package/dist/components/af-section.js.map +1 -0
  125. package/dist/components/af-testimonial-carousel.js +4 -4
  126. package/dist/components/af-testimonial-carousel.js.map +1 -1
  127. package/dist/components/af-testimonial-stat.js +2 -2
  128. package/dist/components/af-testimonial.js +2 -2
  129. package/dist/components/af-text.js +1 -1
  130. package/dist/components/af-typography-lockup.js +1 -1
  131. package/dist/components/index.js +13 -13
  132. package/dist/components/{p-Bxv9iL3G.js → p-BMl1ggbQ.js} +3 -3
  133. package/dist/components/{p-Bxv9iL3G.js.map → p-BMl1ggbQ.js.map} +1 -1
  134. package/dist/components/{p-KtmLxy7z.js → p-BSewwIfD.js} +3 -3
  135. package/dist/components/{p-KtmLxy7z.js.map → p-BSewwIfD.js.map} +1 -1
  136. package/dist/components/{p-Bdy85P7Z.js → p-BeQlNDyY.js} +4 -4
  137. package/dist/components/{p-Bdy85P7Z.js.map → p-BeQlNDyY.js.map} +1 -1
  138. package/dist/components/{p-DPooX_NW.js → p-BpXkQGDQ.js} +3 -3
  139. package/dist/components/{p-DPooX_NW.js.map → p-BpXkQGDQ.js.map} +1 -1
  140. package/dist/components/{p-C0zUdiRs.js → p-C1C1Him5.js} +12 -8
  141. package/dist/components/p-C1C1Him5.js.map +1 -0
  142. package/dist/components/{p-Cfj594pp.js → p-CUr7n62X.js} +3 -3
  143. package/dist/components/{p-Cfj594pp.js.map → p-CUr7n62X.js.map} +1 -1
  144. package/dist/components/{p-ChRDoPDm.js → p-CZlTvZAm.js} +3 -3
  145. package/dist/components/p-CZlTvZAm.js.map +1 -0
  146. package/dist/components/{p-D021PjqL.js → p-CcNomA2o.js} +11 -5
  147. package/dist/components/p-CcNomA2o.js.map +1 -0
  148. package/dist/components/p-Csie_upq.js +41 -0
  149. package/dist/components/p-Csie_upq.js.map +1 -0
  150. package/dist/components/{p-CLA_jBiH.js → p-D4NomvK5.js} +4 -4
  151. package/dist/components/{p-CLA_jBiH.js.map → p-D4NomvK5.js.map} +1 -1
  152. package/dist/components/{p-BuySFAGS.js → p-Vu-NeL7U.js} +12 -8
  153. package/dist/components/p-Vu-NeL7U.js.map +1 -0
  154. package/dist/components/{p-C4sw-kYH.js → p-sJI0-JlJ.js} +4 -4
  155. package/dist/components/{p-C4sw-kYH.js.map → p-sJI0-JlJ.js.map} +1 -1
  156. package/dist/components/{p-XAy0kGYd.js → p-tFlyM2Th.js} +3 -3
  157. package/dist/components/{p-XAy0kGYd.js.map → p-tFlyM2Th.js.map} +1 -1
  158. package/dist/esm/af-aspect-ratio.entry.js +1 -1
  159. package/dist/esm/af-button-group.entry.js +2 -2
  160. package/dist/esm/af-button.entry.js +7 -2
  161. package/dist/esm/af-button.entry.js.map +1 -1
  162. package/dist/esm/af-card.entry.js +3 -3
  163. package/dist/esm/af-card.entry.js.map +1 -1
  164. package/dist/esm/af-client-carousel.entry.js +20 -0
  165. package/dist/esm/af-client-carousel.entry.js.map +1 -0
  166. package/dist/esm/af-color-swatch.entry.js +1 -1
  167. package/dist/esm/af-container.entry.js +1 -1
  168. package/dist/esm/af-heading.af-logo.af-nav-item.af-navbar.af-text.entry.js.map +1 -1
  169. package/dist/esm/af-heading_5.entry.js +22 -12
  170. package/dist/esm/af-hero-section.entry.js +22 -0
  171. package/dist/esm/af-hero-section.entry.js.map +1 -0
  172. package/dist/esm/af-icon-button.entry.js +1 -1
  173. package/dist/esm/af-logo-well.entry.js +16 -0
  174. package/dist/esm/af-logo-well.entry.js.map +1 -0
  175. package/dist/esm/af-section.entry.js +23 -0
  176. package/dist/esm/af-section.entry.js.map +1 -0
  177. package/dist/esm/af-testimonial-carousel.entry.js +4 -4
  178. package/dist/esm/af-testimonial-carousel.entry.js.map +1 -1
  179. package/dist/esm/af-testimonial-stat.entry.js +2 -2
  180. package/dist/esm/af-testimonial.entry.js +2 -2
  181. package/dist/esm/af-typography-lockup.entry.js +2 -2
  182. package/dist/esm/affinda.js +3 -3
  183. package/dist/esm/{index-UbNmjSSX.js → index-Agei6ZJQ.js} +3 -3
  184. package/dist/esm/index-Agei6ZJQ.js.map +1 -0
  185. package/dist/esm/index.js +1 -1
  186. package/dist/esm/loader.js +3 -3
  187. package/dist/types/components/af-button/af-button.d.ts +4 -0
  188. package/dist/types/components/af-client-carousel/af-client-carousel.d.ts +10 -0
  189. package/dist/types/components/af-heading/af-heading.d.ts +2 -0
  190. package/dist/types/components/af-hero-section/af-hero-section.d.ts +12 -0
  191. package/dist/types/components/af-logo-well/af-logo-well.d.ts +6 -0
  192. package/dist/types/components/af-navbar/af-navbar.d.ts +3 -0
  193. package/dist/types/components/af-section/af-section.d.ts +12 -0
  194. package/dist/types/components/af-text/af-text.d.ts +2 -0
  195. package/dist/types/components.d.ts +214 -0
  196. package/package.json +13 -9
  197. package/dist/affinda/p-43324b6d.entry.js.map +0 -1
  198. package/dist/affinda/p-56284540.entry.js +0 -2
  199. package/dist/affinda/p-9c0b3380.entry.js +0 -2
  200. package/dist/affinda/p-UbNmjSSX.js.map +0 -1
  201. package/dist/affinda/p-fedaec5a.entry.js +0 -2
  202. package/dist/affinda/p-fedaec5a.entry.js.map +0 -1
  203. package/dist/cjs/index-CNijn8X5.js.map +0 -1
  204. package/dist/components/p-BuySFAGS.js.map +0 -1
  205. package/dist/components/p-C0zUdiRs.js.map +0 -1
  206. package/dist/components/p-CJccTfm5.js +0 -35
  207. package/dist/components/p-CJccTfm5.js.map +0 -1
  208. package/dist/components/p-ChRDoPDm.js.map +0 -1
  209. package/dist/components/p-D021PjqL.js.map +0 -1
  210. package/dist/esm/index-UbNmjSSX.js.map +0 -1
  211. /package/dist/affinda/{p-c8628633.entry.js.map → p-23aedaa4.entry.js.map} +0 -0
  212. /package/dist/affinda/{p-eff7eff1.entry.js.map → p-39e917eb.entry.js.map} +0 -0
  213. /package/dist/affinda/{p-16c84e60.entry.js.map → p-430127fa.entry.js.map} +0 -0
  214. /package/dist/affinda/{p-f53b4847.entry.js.map → p-46edc753.entry.js.map} +0 -0
  215. /package/dist/affinda/{p-32f46944.entry.js.map → p-56a15842.entry.js.map} +0 -0
  216. /package/dist/affinda/{p-9c0b3380.entry.js.map → p-867c5141.entry.js.map} +0 -0
  217. /package/dist/affinda/{p-750a694b.entry.js.map → p-d7ff9fd9.entry.js.map} +0 -0
  218. /package/dist/affinda/{p-66daadde.entry.js.map → p-f6f2f1c4.entry.js.map} +0 -0
@@ -0,0 +1,22 @@
1
+ import { h, Host } from "@stencil/core";
2
+ /**
3
+ * A rounded container for displaying client logos
4
+ */
5
+ export class AfLogoWell {
6
+ render() {
7
+ return (h(Host, { key: '6443fda91c37fd9f2efd49fbd10b1899f311cd54' }, h("div", { key: '30ec1e2891dfd89af7cc310986d3c5c48e05c556', class: "logo-well" }, h("slot", { key: '4601797d3cef6ed117dc6c93083652dd22f51f05' }))));
8
+ }
9
+ static get is() { return "af-logo-well"; }
10
+ static get encapsulation() { return "shadow"; }
11
+ static get originalStyleUrls() {
12
+ return {
13
+ "$": ["af-logo-well.css"]
14
+ };
15
+ }
16
+ static get styleUrls() {
17
+ return {
18
+ "$": ["af-logo-well.css"]
19
+ };
20
+ }
21
+ }
22
+ //# sourceMappingURL=af-logo-well.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"af-logo-well.js","sourceRoot":"","sources":["../../../src/components/af-logo-well/af-logo-well.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;GAEG;AAMH,MAAM,OAAO,UAAU;IACrB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,WAAW;gBACpB,8DAAa,CACT,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host } from '@stencil/core';\n\n/**\n * A rounded container for displaying client logos\n */\n@Component({\n tag: 'af-logo-well',\n styleUrl: 'af-logo-well.css',\n shadow: true,\n})\nexport class AfLogoWell {\n render() {\n return (\n <Host>\n <div class=\"logo-well\">\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n\n"]}
@@ -37,6 +37,21 @@
37
37
  flex-shrink: 0;
38
38
  }
39
39
 
40
+ /* Mobile menu toggle button */
41
+ .mobile-menu-toggle {
42
+ display: none;
43
+ background: none;
44
+ border: none;
45
+ padding: 8px;
46
+ cursor: pointer;
47
+ color: var(--colour-brand-inkwell, #14343b);
48
+ margin-left: auto;
49
+ }
50
+
51
+ .mobile-menu-toggle svg {
52
+ display: block;
53
+ }
54
+
40
55
  .nav-links {
41
56
  display: flex;
42
57
  align-items: center;
@@ -86,28 +101,50 @@
86
101
  padding: 8px 16px;
87
102
  flex-direction: column;
88
103
  border-radius: 16px;
89
- gap: 16px;
104
+ gap: 0;
90
105
  }
91
106
 
92
107
  .navbar-left {
93
108
  width: 100%;
94
- flex-direction: column;
109
+ flex-direction: row;
110
+ justify-content: space-between;
111
+ align-items: center;
95
112
  gap: 16px;
96
- align-items: flex-start;
97
113
  }
98
114
 
115
+ /* Show hamburger button on mobile */
116
+ .mobile-menu-toggle {
117
+ display: flex;
118
+ }
119
+
120
+ /* Hide nav links by default on mobile */
99
121
  .nav-links {
122
+ display: none;
100
123
  width: 100%;
101
124
  flex-direction: column;
102
125
  align-items: stretch;
103
126
  gap: 0;
127
+ margin-top: 16px;
104
128
  }
105
129
 
130
+ /* Show nav links when menu is open */
131
+ .nav-links.mobile-open {
132
+ display: flex;
133
+ }
134
+
135
+ /* Hide right section by default on mobile */
106
136
  .navbar-right {
137
+ display: none;
107
138
  width: 100%;
108
139
  flex-direction: column;
109
140
  gap: 12px;
110
141
  align-items: stretch;
142
+ margin-top: 16px;
143
+ }
144
+
145
+ /* Show right section when menu is open */
146
+ .navbar-right.mobile-open {
147
+ display: flex;
111
148
  }
112
149
 
113
150
  .nav-actions {
@@ -2,10 +2,17 @@ import { h, Host } from "@stencil/core";
2
2
  /**
3
3
  * A full-width navigation bar component that provides the main site navigation.
4
4
  * Features a pill-shaped container with logo, navigation links, and action buttons.
5
+ * Includes mobile hamburger menu.
5
6
  */
6
7
  export class AfNavbar {
8
+ constructor() {
9
+ this.mobileMenuOpen = false;
10
+ this.toggleMobileMenu = () => {
11
+ this.mobileMenuOpen = !this.mobileMenuOpen;
12
+ };
13
+ }
7
14
  render() {
8
- return (h(Host, { key: 'a66b7e6939aebec67d26604dea422ec2e64fe6bd' }, h("nav", { key: '54064edc20beeafacafd2b43b25bfa9fc6e0e362', class: "navbar-container" }, h("div", { key: '2020a0761f646c0a13cc604605d3b9d5b1625278', class: "navbar" }, h("div", { key: '6038de1eba48a2bedf7e689bb65521406fc6b8b1', class: "navbar-left" }, h("div", { key: '63f31053e7d3d1402f2a1e88a4ae2171f9e00d4f', class: "logo" }, h("slot", { key: 'bf73abaf20be9cfcaa6328fe8ac224d109944bef', name: "logo" })), h("div", { key: 'c9cc09537d26c55d319f08c4622b17248f6ffba4', class: "nav-links" }, h("slot", { key: '5c2d8df163e2fd9967492d39522df1e11dfcd977', name: "start" }))), h("div", { key: '45265b4d765ad52a33f81efa80e9daa910948e1c', class: "navbar-right" }, h("div", { key: '48c913dd3d8fa17ee7eb2e9a41f9493929cd7af0', class: "nav-actions" }, h("slot", { key: '9d144675950a723d9ff004f5e1d0bad83f372d7e', name: "end" })), h("div", { key: 'bd10fc8edaef5f85382e53abf12b0686ec4c6acd', class: "nav-button" }, h("slot", { key: 'c3c01e44c37a1d51f20a29ce059a02a94094f377', name: "button" })))))));
15
+ return (h(Host, { key: '305d9415a3c14b2dc352588171d4677f4be4a1af' }, h("nav", { key: 'c509365f0056b0f26d8e3aea98acda04d29d4387', class: "navbar-container" }, h("div", { key: '722fd37a76e7367f0e7cd22729f711e8164b9d60', class: "navbar" }, h("div", { key: 'e0e8d341394b30f4badf5062b899123d691123a1', class: "navbar-left" }, h("div", { key: '145ab6a0ff46f0e21b429b8e2d881404d1d6c24c', class: "logo" }, h("slot", { key: '447d9abfa74c008afac07d3d0386b26ef292ec23', name: "logo" })), h("button", { key: '1f3e5512ea1ab6ca5b6a3a1455a9ff9fa9a2c8e3', class: "mobile-menu-toggle", onClick: this.toggleMobileMenu, "aria-label": "Toggle navigation menu", "aria-expanded": this.mobileMenuOpen ? 'true' : 'false' }, this.mobileMenuOpen ? (h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { d: "M18 6L6 18M6 6l12 12", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))) : (h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { d: "M3 12h18M3 6h18M3 18h18", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("div", { key: '277226e4c433ad4377810c1e3e894b0d9de11b05', class: `nav-links ${this.mobileMenuOpen ? 'mobile-open' : ''}` }, h("slot", { key: 'f95617e99651d0e2a4fa28a08fbe5452a8f95aa3', name: "start" }))), h("div", { key: 'ad7b9cf31ce290303df0af868e369bc79983fff4', class: `navbar-right ${this.mobileMenuOpen ? 'mobile-open' : ''}` }, h("div", { key: '817c73031c45579ec13da6d53bfe1753bcd1e0ef', class: "nav-actions" }, h("slot", { key: 'e18d0c55b346722784640c37bbb5e5fe05fec5c0', name: "end" })), h("div", { key: '296dd2c84f0a59c54741b40a6333cfff5ec7d200', class: "nav-button" }, h("slot", { key: 'd94063758598f14888587d93b5b299f593b2cd31', name: "button" })))))));
9
16
  }
10
17
  static get is() { return "af-navbar"; }
11
18
  static get encapsulation() { return "shadow"; }
@@ -19,5 +26,10 @@ export class AfNavbar {
19
26
  "$": ["af-navbar.css"]
20
27
  };
21
28
  }
29
+ static get states() {
30
+ return {
31
+ "mobileMenuOpen": {}
32
+ };
33
+ }
22
34
  }
23
35
  //# sourceMappingURL=af-navbar.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"af-navbar.js","sourceRoot":"","sources":["../../../src/components/af-navbar/af-navbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;GAGG;AAMH,MAAM,OAAO,QAAQ;IACnB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,kBAAkB;gBAC3B,4DAAK,KAAK,EAAC,QAAQ;oBAEjB,4DAAK,KAAK,EAAC,aAAa;wBACtB,4DAAK,KAAK,EAAC,MAAM;4BACf,6DAAM,IAAI,EAAC,MAAM,GAAQ,CACrB;wBACN,4DAAK,KAAK,EAAC,WAAW;4BACpB,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,CACF;oBAGN,4DAAK,KAAK,EAAC,cAAc;wBACvB,4DAAK,KAAK,EAAC,aAAa;4BACtB,6DAAM,IAAI,EAAC,KAAK,GAAQ,CACpB;wBACN,4DAAK,KAAK,EAAC,YAAY;4BACrB,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACF,CACF,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host } from '@stencil/core';\n\n/**\n * A full-width navigation bar component that provides the main site navigation.\n * Features a pill-shaped container with logo, navigation links, and action buttons.\n */\n@Component({\n tag: 'af-navbar',\n styleUrl: 'af-navbar.css',\n shadow: true\n})\nexport class AfNavbar {\n render() {\n return (\n <Host>\n <nav class=\"navbar-container\">\n <div class=\"navbar\">\n {/* Left section: Logo + Nav Links */}\n <div class=\"navbar-left\">\n <div class=\"logo\">\n <slot name=\"logo\"></slot>\n </div>\n <div class=\"nav-links\">\n <slot name=\"start\"></slot>\n </div>\n </div>\n\n {/* Right section: Actions + Button */}\n <div class=\"navbar-right\">\n <div class=\"nav-actions\">\n <slot name=\"end\"></slot>\n </div>\n <div class=\"nav-button\">\n <slot name=\"button\"></slot>\n </div>\n </div>\n </div>\n </nav>\n </Host>\n );\n }\n}\n"]}
1
+ {"version":3,"file":"af-navbar.js","sourceRoot":"","sources":["../../../src/components/af-navbar/af-navbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAE1D;;;;GAIG;AAMH,MAAM,OAAO,QAAQ;IALrB;QAMW,mBAAc,GAAY,KAAK,CAAC;QAEjC,qBAAgB,GAAG,GAAG,EAAE;YAC9B,IAAI,CAAC,cAAc,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC;QAC7C,CAAC,CAAC;KAkDH;IAhDC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,kBAAkB;gBAC3B,4DAAK,KAAK,EAAC,QAAQ;oBAEjB,4DAAK,KAAK,EAAC,aAAa;wBACtB,4DAAK,KAAK,EAAC,MAAM;4BACf,6DAAM,IAAI,EAAC,MAAM,GAAQ,CACrB;wBAGN,+DACE,KAAK,EAAC,oBAAoB,EAC1B,OAAO,EAAE,IAAI,CAAC,gBAAgB,gBACnB,wBAAwB,mBACpB,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,IAEpD,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,CACrB,WAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc;4BAC/E,YAAM,CAAC,EAAC,sBAAsB,kBAAc,GAAG,oBAAgB,OAAO,qBAAiB,OAAO,GAAE,CAC5F,CACP,CAAC,CAAC,CAAC,CACF,WAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc;4BAC/E,YAAM,CAAC,EAAC,yBAAyB,kBAAc,GAAG,oBAAgB,OAAO,qBAAiB,OAAO,GAAE,CAC/F,CACP,CACM;wBAET,4DAAK,KAAK,EAAE,aAAa,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,EAAE;4BACjE,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,CACF;oBAGN,4DAAK,KAAK,EAAE,gBAAgB,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,EAAE;wBACpE,4DAAK,KAAK,EAAC,aAAa;4BACtB,6DAAM,IAAI,EAAC,KAAK,GAAQ,CACpB;wBACN,4DAAK,KAAK,EAAC,YAAY;4BACrB,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACF,CACF,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;CACF","sourcesContent":["import { Component, State, h, Host } from '@stencil/core';\n\n/**\n * A full-width navigation bar component that provides the main site navigation.\n * Features a pill-shaped container with logo, navigation links, and action buttons.\n * Includes mobile hamburger menu.\n */\n@Component({\n tag: 'af-navbar',\n styleUrl: 'af-navbar.css',\n shadow: true\n})\nexport class AfNavbar {\n @State() mobileMenuOpen: boolean = false;\n\n private toggleMobileMenu = () => {\n this.mobileMenuOpen = !this.mobileMenuOpen;\n };\n\n render() {\n return (\n <Host>\n <nav class=\"navbar-container\">\n <div class=\"navbar\">\n {/* Left section: Logo + Nav Links */}\n <div class=\"navbar-left\">\n <div class=\"logo\">\n <slot name=\"logo\"></slot>\n </div>\n \n {/* Hamburger menu button - mobile only */}\n <button \n class=\"mobile-menu-toggle\"\n onClick={this.toggleMobileMenu}\n aria-label=\"Toggle navigation menu\"\n aria-expanded={this.mobileMenuOpen ? 'true' : 'false'}\n >\n {this.mobileMenuOpen ? (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\">\n <path d=\"M18 6L6 18M6 6l12 12\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n ) : (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\">\n <path d=\"M3 12h18M3 6h18M3 18h18\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n )}\n </button>\n \n <div class={`nav-links ${this.mobileMenuOpen ? 'mobile-open' : ''}`}>\n <slot name=\"start\"></slot>\n </div>\n </div>\n\n {/* Right section: Actions + Button */}\n <div class={`navbar-right ${this.mobileMenuOpen ? 'mobile-open' : ''}`}>\n <div class=\"nav-actions\">\n <slot name=\"end\"></slot>\n </div>\n <div class=\"nav-button\">\n <slot name=\"button\"></slot>\n </div>\n </div>\n </div>\n </nav>\n </Host>\n );\n }\n}\n"]}
@@ -0,0 +1,52 @@
1
+ :host {
2
+ display: block;
3
+ width: 100%;
4
+ }
5
+
6
+ .section {
7
+ width: 100%;
8
+ position: relative;
9
+ }
10
+
11
+ /* Padding variants */
12
+ .padding-tight {
13
+ padding: 48px 0;
14
+ }
15
+
16
+ .padding-default {
17
+ padding: 96px 0;
18
+ }
19
+
20
+ .padding-loose {
21
+ padding: 120px 0 96px;
22
+ }
23
+
24
+ /* Background variants */
25
+ .bg-white {
26
+ background-color: var(--colour-background-white, #FFFFFF);
27
+ }
28
+
29
+ .bg-level1 {
30
+ background-color: var(--colour-background-level-1, #E8EEED);
31
+ }
32
+
33
+ .bg-dark,
34
+ .bg-inkwell {
35
+ background-color: var(--colour-brand-inkwell, #14343B);
36
+ }
37
+
38
+ /* Mobile adjustments */
39
+ @media (max-width: 768px) {
40
+ .padding-tight {
41
+ padding: 32px 0;
42
+ }
43
+
44
+ .padding-default {
45
+ padding: 64px 0;
46
+ }
47
+
48
+ .padding-loose {
49
+ padding: 80px 0 64px;
50
+ }
51
+ }
52
+
@@ -0,0 +1,95 @@
1
+ import { h, Host } from "@stencil/core";
2
+ /**
3
+ * Section layout component for consistent spacing and backgrounds
4
+ */
5
+ export class AfSection {
6
+ constructor() {
7
+ /** Padding variant */
8
+ this.padding = 'default';
9
+ /** Background color */
10
+ this.background = 'white';
11
+ /** Whether to include a Container wrapper */
12
+ this.container = true;
13
+ }
14
+ render() {
15
+ const content = h("slot", { key: '269517d1852d1e459db9dc2673b88b4d8042f61b' });
16
+ return (h(Host, { key: 'a080f296f2f7178db29e973cce05048847e66c83' }, h("div", { key: '54bdca28715bdd18e38d85e2ed95a5699f793d3e', class: `section padding-${this.padding} bg-${this.background}` }, this.container ? (h("af-container", null, content)) : content)));
17
+ }
18
+ static get is() { return "af-section"; }
19
+ static get encapsulation() { return "scoped"; }
20
+ static get originalStyleUrls() {
21
+ return {
22
+ "$": ["af-section.css"]
23
+ };
24
+ }
25
+ static get styleUrls() {
26
+ return {
27
+ "$": ["af-section.css"]
28
+ };
29
+ }
30
+ static get properties() {
31
+ return {
32
+ "padding": {
33
+ "type": "string",
34
+ "mutable": false,
35
+ "complexType": {
36
+ "original": "'tight' | 'default' | 'loose'",
37
+ "resolved": "\"default\" | \"loose\" | \"tight\"",
38
+ "references": {}
39
+ },
40
+ "required": false,
41
+ "optional": false,
42
+ "docs": {
43
+ "tags": [],
44
+ "text": "Padding variant"
45
+ },
46
+ "getter": false,
47
+ "setter": false,
48
+ "reflect": false,
49
+ "attribute": "padding",
50
+ "defaultValue": "'default'"
51
+ },
52
+ "background": {
53
+ "type": "string",
54
+ "mutable": false,
55
+ "complexType": {
56
+ "original": "'white' | 'level1' | 'dark' | 'inkwell'",
57
+ "resolved": "\"dark\" | \"inkwell\" | \"level1\" | \"white\"",
58
+ "references": {}
59
+ },
60
+ "required": false,
61
+ "optional": false,
62
+ "docs": {
63
+ "tags": [],
64
+ "text": "Background color"
65
+ },
66
+ "getter": false,
67
+ "setter": false,
68
+ "reflect": false,
69
+ "attribute": "background",
70
+ "defaultValue": "'white'"
71
+ },
72
+ "container": {
73
+ "type": "boolean",
74
+ "mutable": false,
75
+ "complexType": {
76
+ "original": "boolean",
77
+ "resolved": "boolean",
78
+ "references": {}
79
+ },
80
+ "required": false,
81
+ "optional": false,
82
+ "docs": {
83
+ "tags": [],
84
+ "text": "Whether to include a Container wrapper"
85
+ },
86
+ "getter": false,
87
+ "setter": false,
88
+ "reflect": false,
89
+ "attribute": "container",
90
+ "defaultValue": "true"
91
+ }
92
+ };
93
+ }
94
+ }
95
+ //# sourceMappingURL=af-section.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"af-section.js","sourceRoot":"","sources":["../../../src/components/af-section/af-section.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;GAEG;AAOH,MAAM,OAAO,SAAS;IANtB;QAOE,sBAAsB;QACd,YAAO,GAAkC,SAAS,CAAC;QAE3D,uBAAuB;QACf,eAAU,GAA4C,OAAO,CAAC;QAEtE,6CAA6C;QACrC,cAAS,GAAY,IAAI,CAAC;KAenC;IAbC,MAAM;QACJ,MAAM,OAAO,GAAG,8DAAa,CAAC;QAE9B,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,mBAAmB,IAAI,CAAC,OAAO,OAAO,IAAI,CAAC,UAAU,EAAE,IAChE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAChB,wBAAe,OAAO,CAAgB,CACvC,CAAC,CAAC,CAAC,OAAO,CACP,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * Section layout component for consistent spacing and backgrounds\n */\n@Component({\n tag: 'af-section',\n styleUrl: 'af-section.css',\n shadow: false,\n scoped: true,\n})\nexport class AfSection {\n /** Padding variant */\n @Prop() padding: 'tight' | 'default' | 'loose' = 'default';\n \n /** Background color */\n @Prop() background: 'white' | 'level1' | 'dark' | 'inkwell' = 'white';\n \n /** Whether to include a Container wrapper */\n @Prop() container: boolean = true;\n\n render() {\n const content = <slot></slot>;\n \n return (\n <Host>\n <div class={`section padding-${this.padding} bg-${this.background}`}>\n {this.container ? (\n <af-container>{content}</af-container>\n ) : content}\n </div>\n </Host>\n );\n }\n}\n\n"]}
@@ -1,7 +1,7 @@
1
1
  import { h, Host } from "@stencil/core";
2
2
  export class AfTestimonial {
3
3
  render() {
4
- return (h(Host, { key: '963791303c22cdea677a7923ffce8b16ea97cb26' }, h("div", { key: '369ad62ceb17461c4511f0cb7338a5f812b69717', class: "testimonial-card" }, h("div", { key: 'e548a64653054d54b282b83c0a64326c0973122d', class: "testimonial-image" }, this.backgroundImage && (h("img", { key: '21f779030e13675278b4cd18ae2df0c0bf9c59a3', src: this.backgroundImage, alt: "", class: "testimonial-bg-image" })), this.logoImage && (h("div", { key: '23298bd5b1c3db0ed5bff4c1d1cd0582e09b50a2', class: "testimonial-logo" }, h("img", { key: '357214f50e38cfa9e53cf7914c87f22c7971f1d5', src: this.logoImage, alt: "Company logo" })))), h("div", { key: 'd2913ca4d9b38a048ebedb123fdb0b7b9e78cc6f', class: "testimonial-content" }, h("div", { key: '92756afbcbd391a7fcb8b1a99d92bcc370f3787d', class: "testimonial-quote-section" }, h("div", { key: '40f844093eb232bf06b353a27c066f5ae99a85bf', class: "testimonial-quote-icon" }, h("slot", { key: '3cf6da2811c1cdf6a4540f72727fe479c7d4d4ca', name: "quote-icon" }, h("svg", { key: 'f59e4ceb77b67bbba1b5d647d10dd6f15b1d9319', width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'dbcc67a7e7ab90b4d1172f0cced568eeeb182150', d: "M10.5 25.5C10.5 23.0147 12.5147 21 15 21H18C18.8284 21 19.5 20.3284 19.5 19.5V15C19.5 12.5147 17.4853 10.5 15 10.5H10.5C6.35786 10.5 3 13.8579 3 18V33C3 35.4853 5.01472 37.5 7.5 37.5H15C17.4853 37.5 19.5 35.4853 19.5 33V25.5C19.5 23.0147 17.4853 21 15 21H10.5ZM33 25.5C33 23.0147 35.0147 21 37.5 21H40.5C41.3284 21 42 20.3284 42 19.5V15C42 12.5147 39.9853 10.5 37.5 10.5H33C28.8579 10.5 25.5 13.8579 25.5 18V33C25.5 35.4853 27.5147 37.5 30 37.5H37.5C39.9853 37.5 42 35.4853 42 33V25.5C42 23.0147 39.9853 21 37.5 21H33Z", fill: "currentColor" })))), h("p", { key: '1b487f7ab688642b9c5166a3fc8eb1191e1daa36', class: "testimonial-text" }, this.quote), h("p", { key: '539600a1d6eb098ea329307d40cac941d1d631a4', class: "testimonial-attribution" }, this.attribution)), h("div", { key: '307e784601fd66cdd4573eaf0a83c8d61ab83301', class: "testimonial-stats" }, h("slot", { key: '2ab5758e92ed670e6d6ed554f3fce7a7e1fc0077', name: "stats" })), h("div", { key: 'b13d6b51a27f5e94d40929f6c337513ca84af1cd', class: "testimonial-footer" }, h("div", { key: '69b92a55946c936cdc78d7f317caacb8fd334779', class: "testimonial-nav" }, h("slot", { key: '41c0ef3a1497d33d7c2dc7b34a267d9158ff1aa0', name: "navigation" })), this.readMoreLink && (h("a", { key: 'd4c7e0acce78b7fb16085cd9c7c8762325dc6b6c', href: this.readMoreLink, class: "testimonial-cta" }, h("span", { key: '0576e6e26afeb35f07aa4ad0190cdd6e3b4242c1' }, "Read full story"), h("svg", { key: 'd3c6d905c55782f2b22e6070a4adcca4bd0164cf', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: '61c7ecddf75102a501626fc59fe55cd1402b06e2', d: "M5 12H19M19 12L12 5M19 12L12 19", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))))))));
4
+ return (h(Host, { key: 'b4a23c841092c119b7e8abd4249b75985f8edf95' }, h("div", { key: '65fec4f695a746ef51d4539b33dc166d4f1cb95c', class: "testimonial-card" }, h("div", { key: 'ad5ec6edb4fd3577f14d9cbcce925c1c68d6262e', class: "testimonial-image" }, this.backgroundImage && (h("img", { key: '4e51da94bd106ae50c63186c7cbedee3e86d341e', src: this.backgroundImage, alt: "", class: "testimonial-bg-image" })), this.logoImage && (h("div", { key: '68eea0c228eb7d3e92a3cbab11ee4d1b3d9e590e', class: "testimonial-logo" }, h("img", { key: '5f2225a849003d6b4b5ccc08073da121e3d27cf4', src: this.logoImage, alt: "Company logo" })))), h("div", { key: '9e6dbb02f4d87829af74c66029bd93ce3f3c65dd', class: "testimonial-content" }, h("div", { key: 'efd25f8dc722d79006835406a972da0d5fd7f77f', class: "testimonial-quote-section" }, h("div", { key: '46064d44eeed1712130c6c24007f5481b9cc3cf7', class: "testimonial-quote-icon" }, h("slot", { key: 'e1389d94a5cbb1181862963fd799d7c14b2d3ee5', name: "quote-icon" }, h("svg", { key: '6a935e48920b1964036f02fbc830b1319a20f057', width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'cf0de3883bdf5a39cd377591ec34a02d75afd39c', d: "M10.5 25.5C10.5 23.0147 12.5147 21 15 21H18C18.8284 21 19.5 20.3284 19.5 19.5V15C19.5 12.5147 17.4853 10.5 15 10.5H10.5C6.35786 10.5 3 13.8579 3 18V33C3 35.4853 5.01472 37.5 7.5 37.5H15C17.4853 37.5 19.5 35.4853 19.5 33V25.5C19.5 23.0147 17.4853 21 15 21H10.5ZM33 25.5C33 23.0147 35.0147 21 37.5 21H40.5C41.3284 21 42 20.3284 42 19.5V15C42 12.5147 39.9853 10.5 37.5 10.5H33C28.8579 10.5 25.5 13.8579 25.5 18V33C25.5 35.4853 27.5147 37.5 30 37.5H37.5C39.9853 37.5 42 35.4853 42 33V25.5C42 23.0147 39.9853 21 37.5 21H33Z", fill: "currentColor" })))), h("p", { key: 'db71848c9ae10a2a24cdcb6797f8f2b4fbf6cea9', class: "testimonial-text" }, this.quote), h("p", { key: 'ad7c4fd0a91a1c2ea42d4abcc3ab949e51c3d313', class: "testimonial-attribution" }, this.attribution)), h("div", { key: '8042208ced311c39c8d91968ac1bc37c76971ec1', class: "testimonial-stats" }, h("slot", { key: 'b5c40fdb83b6776b2de0a57e37045a1fde50e78f', name: "stats" })), h("div", { key: '1b19fc1264136cf90cb0c32841678129f5dd711d', class: "testimonial-footer" }, h("div", { key: '77058648a8e25ed63b622c7bbf873c299e39e42d', class: "testimonial-nav" }, h("slot", { key: '9231316a8dd17ae30c754e1ff1ba9ea70c327c82', name: "navigation" })), this.readMoreLink && (h("a", { key: '01072189417f44da780b5c5a8849e9e66a2a9b0d', href: this.readMoreLink, class: "testimonial-cta" }, h("span", { key: '8c5008a42d4c4160bb4950f562872a67ac26c15c' }, "Read full story"), h("svg", { key: '881176b723a0f4c3d941d2be0f8983ddc0468ee6', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: 'd8fd8469aa2c45286891751b269c692ee90426c0', d: "M5 12H19M19 12L12 5M19 12L12 19", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))))))));
5
5
  }
6
6
  static get is() { return "af-testimonial"; }
7
7
  static get encapsulation() { return "scoped"; }
@@ -53,11 +53,12 @@
53
53
  background: var(--colour-background-border-default, #c1cdc9);
54
54
  }
55
55
 
56
- /* Navigation buttons - positioned bottom left, next to each other */
56
+ /* Navigation buttons - positioned bottom left of content area (not on image) */
57
57
  .carousel-navigation {
58
58
  position: absolute;
59
59
  bottom: 48px;
60
- left: 48px;
60
+ left: 50%;
61
+ margin-left: 48px;
61
62
  display: flex;
62
63
  gap: 12px;
63
64
  align-items: center;
@@ -65,7 +65,7 @@ export class AfTestimonialCarousel {
65
65
  render() {
66
66
  const hasPrev = this.currentIndex > 0;
67
67
  const hasNext = this.currentIndex < this.testimonialCount - 1;
68
- return (h(Host, { key: 'ffa14246fa8a47d1cc079b0026df5a914e2b9362' }, h("div", { key: 'e984a28fd99ca671d8bdd55a780fbf76d7a189dc', class: "testimonial-carousel" }, h("div", { key: '55d09df04a1ee008d30a9227d3e6914dce46e173', class: "testimonial-slides" }, h("slot", { key: '992ac1e4849bcc042ccd0eeb47319b3e34364a1f' })), this.testimonialCount > 1 && (h("div", { key: '247420c536242d5e66ada662a23828eaa0190c84', class: "testimonial-progress" }, Array.from({ length: this.testimonialCount }).map((_, index) => (h("div", { class: `progress-dot ${index === this.currentIndex ? 'active' : ''}`, onClick: () => {
68
+ return (h(Host, { key: '93e4222eaa683eda0e5d68d445691e5dcf764b10' }, h("div", { key: '8679d282c0644b463eee86fa90282f59ba1c6cb5', class: "testimonial-carousel" }, h("div", { key: '6779793a882493c73b31bdf5742e2d068b8db72f', class: "testimonial-slides" }, h("slot", { key: '4326f6b06a60174edc2ba74c3d5704707965bf5d' })), this.testimonialCount > 1 && (h("div", { key: 'ba63a40e6a0789df3af7ff51d36a0f9c2e0651c6', class: "testimonial-progress" }, Array.from({ length: this.testimonialCount }).map((_, index) => (h("div", { class: `progress-dot ${index === this.currentIndex ? 'active' : ''}`, onClick: () => {
69
69
  if (!this.isAnimating && index !== this.currentIndex) {
70
70
  this.isAnimating = true;
71
71
  this.currentIndex = index;
@@ -74,7 +74,7 @@ export class AfTestimonialCarousel {
74
74
  this.isAnimating = false;
75
75
  }, 500);
76
76
  }
77
- } }))))), this.testimonialCount > 1 && (h("div", { key: 'dc31d36ed57808d5c28d2c1dcb2729e6ed5342f7', class: "carousel-navigation" }, h("button", { key: '37f18430b88a9e983fc6e673d206be03c4cc1d40', class: "nav-button prev", disabled: !hasPrev, onClick: this.goToPrevious, "aria-label": "Previous testimonial" }, h("svg", { key: '9292c82f1b5f993aa8cffd301592dba8f5261c10', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: '0c34f308ae42547d24584858769ee295e01e02c9', d: "M19 12H5M5 12L12 19M5 12L12 5", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("button", { key: '984436b6d311d92623a9740d871c57d09de1a06e', class: "nav-button next", disabled: !hasNext, onClick: this.goToNext, "aria-label": "Next testimonial" }, h("svg", { key: 'e3d55f1efb6c29a74256c4db64283cb1abaa0aa5', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: 'c9404bc3ad64ccb8ad0da3291ce7d4b622637e3d', d: "M5 12H19M19 12L12 5M19 12L12 19", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
77
+ } }))))), this.testimonialCount > 1 && (h("div", { key: 'e15676334f291d496302381e3625b8c18f46626d', class: "carousel-navigation" }, h("button", { key: '511c7cf3b514d07ec4b2c6e9a6a2231a6c98b1d3', class: "nav-button prev", disabled: !hasPrev, onClick: this.goToPrevious, "aria-label": "Previous testimonial" }, h("svg", { key: '477016d99fb337bed5ae757ff14dc290819450ba', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: '989e2119171bb332ca39a45d9b18d46736e0a82f', d: "M19 12H5M5 12L12 19M5 12L12 5", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("button", { key: '5b52c2b3d6aef2b17e144ae30eebd6c6a3c07323', class: "nav-button next", disabled: !hasNext, onClick: this.goToNext, "aria-label": "Next testimonial" }, h("svg", { key: '9d03ebe923108338a4fdab149d02c04e19df6e5e', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: 'a90a52e8cfb3df339d42894448b184b1229f429d', d: "M5 12H19M19 12L12 5M19 12L12 19", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
78
78
  }
79
79
  static get is() { return "af-testimonial-carousel"; }
80
80
  static get encapsulation() { return "scoped"; }
@@ -7,7 +7,7 @@ export class AfTestimonialStat {
7
7
  this.accentBorder = false;
8
8
  }
9
9
  render() {
10
- return (h(Host, { key: 'dec2d76b0cdf8e2b4c9a996046e6537b586ff674' }, h("div", { key: 'c7a9a5c15735850e7eec668e700da23494424c3c', class: `stat ${this.accentBorder ? 'stat--accent' : ''}` }, h("p", { key: 'c876b9e81e3150ef5cc651ee8f7435671b40966b', class: "stat-value" }, this.value), h("p", { key: 'f369972595ed4301eb827a0084388284096ec47f', class: "stat-description" }, this.description))));
10
+ return (h(Host, { key: '38055fcad76047030e7907ad11933c229e33fe05' }, h("div", { key: 'ae01845c6494f9da213f7b823aa5a57b51d94e96', class: `stat ${this.accentBorder ? 'stat--accent' : ''}` }, h("p", { key: 'd1ee0c278a840f343e442178fa2c8ae35e04304e', class: "stat-value" }, this.value), h("p", { key: '29322d5a6e3048f6c1a3df68393f6367bb4b6631', class: "stat-description" }, this.description))));
11
11
  }
12
12
  static get is() { return "af-testimonial-stat"; }
13
13
  static get encapsulation() { return "scoped"; }
@@ -24,6 +24,15 @@
24
24
  text-align: right;
25
25
  }
26
26
 
27
+ /* Theme variants */
28
+ .theme-dark {
29
+ color: var(--colour-brand-mist-green, #C6D5D1);
30
+ }
31
+
32
+ .theme-light {
33
+ color: var(--colour-typography-body-default, #14343b);
34
+ }
35
+
27
36
  /* Body variants */
28
37
  .variant-xlarge {
29
38
  font-size: 22px;
@@ -7,14 +7,17 @@ export class AfText {
7
7
  this.align = 'left';
8
8
  /** Semantic element to render */
9
9
  this.as = 'p';
10
+ /** Theme for dark backgrounds */
11
+ this.theme = 'light';
10
12
  }
11
13
  render() {
12
14
  const Tag = this.as;
13
- return (h(Tag, { key: '778a86a185f2416dec867ca2457acb2fe1ad4bcb', class: {
15
+ return (h(Tag, { key: 'd24094cc876bf871972eb35651c2c145d135722f', class: {
14
16
  'text': true,
15
17
  [`variant-${this.variant}`]: true,
16
- [`align-${this.align}`]: true
17
- }, part: "base" }, h("slot", { key: '2b3ee364c989ca8d233583946e24665df0192fb9' })));
18
+ [`align-${this.align}`]: true,
19
+ [`theme-${this.theme}`]: true
20
+ }, part: "base" }, h("slot", { key: 'bb1f690d3b11f76d926da7bc7655fbce9df9973c' })));
18
21
  }
19
22
  static get is() { return "af-text"; }
20
23
  static get encapsulation() { return "shadow"; }
@@ -89,6 +92,26 @@ export class AfText {
89
92
  "reflect": false,
90
93
  "attribute": "as",
91
94
  "defaultValue": "'p'"
95
+ },
96
+ "theme": {
97
+ "type": "string",
98
+ "mutable": false,
99
+ "complexType": {
100
+ "original": "'light' | 'dark'",
101
+ "resolved": "\"dark\" | \"light\"",
102
+ "references": {}
103
+ },
104
+ "required": false,
105
+ "optional": false,
106
+ "docs": {
107
+ "tags": [],
108
+ "text": "Theme for dark backgrounds"
109
+ },
110
+ "getter": false,
111
+ "setter": false,
112
+ "reflect": false,
113
+ "attribute": "theme",
114
+ "defaultValue": "'light'"
92
115
  }
93
116
  };
94
117
  }
@@ -1 +1 @@
1
- {"version":3,"file":"af-text.js","sourceRoot":"","sources":["../../../src/components/af-text/af-text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,MAAM;IALnB;QAME,mBAAmB;QACX,YAAO,GAA2E,QAAQ,CAAC;QAEnG,uBAAuB;QACf,UAAK,GAAgC,MAAM,CAAC;QAEpD,iCAAiC;QACzB,OAAE,GAAmC,GAAG,CAAC;KAkBlD;IAhBC,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,EAAS,CAAC;QAE3B,OAAO,CACL,EAAC,GAAG,qDACF,KAAK,EAAE;gBACL,MAAM,EAAE,IAAI;gBACZ,CAAC,WAAW,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;gBACjC,CAAC,SAAS,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI;aAC9B,EACD,IAAI,EAAC,MAAM;YAEX,8DAAQ,CACJ,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'af-text',\n styleUrl: 'af-text.css',\n shadow: true\n})\nexport class AfText {\n /** Text variant */\n @Prop() variant: 'xlarge' | 'large' | 'medium' | 'small' | 'label-button' | 'label-tag' = 'medium';\n\n /** Visual alignment */\n @Prop() align: 'left' | 'center' | 'right' = 'left';\n\n /** Semantic element to render */\n @Prop() as: 'p' | 'span' | 'div' | 'label' = 'p';\n\n render() {\n const Tag = this.as as any;\n\n return (\n <Tag\n class={{\n 'text': true,\n [`variant-${this.variant}`]: true,\n [`align-${this.align}`]: true\n }}\n part=\"base\"\n >\n <slot />\n </Tag>\n );\n }\n}\n"]}
1
+ {"version":3,"file":"af-text.js","sourceRoot":"","sources":["../../../src/components/af-text/af-text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,MAAM;IALnB;QAME,mBAAmB;QACX,YAAO,GAA2E,QAAQ,CAAC;QAEnG,uBAAuB;QACf,UAAK,GAAgC,MAAM,CAAC;QAEpD,iCAAiC;QACzB,OAAE,GAAmC,GAAG,CAAC;QAEjD,iCAAiC;QACzB,UAAK,GAAqB,OAAO,CAAC;KAmB3C;IAjBC,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,EAAS,CAAC;QAE3B,OAAO,CACL,EAAC,GAAG,qDACF,KAAK,EAAE;gBACL,MAAM,EAAE,IAAI;gBACZ,CAAC,WAAW,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;gBACjC,CAAC,SAAS,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI;gBAC7B,CAAC,SAAS,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI;aAC9B,EACD,IAAI,EAAC,MAAM;YAEX,8DAAQ,CACJ,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'af-text',\n styleUrl: 'af-text.css',\n shadow: true\n})\nexport class AfText {\n /** Text variant */\n @Prop() variant: 'xlarge' | 'large' | 'medium' | 'small' | 'label-button' | 'label-tag' = 'medium';\n\n /** Visual alignment */\n @Prop() align: 'left' | 'center' | 'right' = 'left';\n\n /** Semantic element to render */\n @Prop() as: 'p' | 'span' | 'div' | 'label' = 'p';\n \n /** Theme for dark backgrounds */\n @Prop() theme: 'light' | 'dark' = 'light';\n\n render() {\n const Tag = this.as as any;\n\n return (\n <Tag\n class={{\n 'text': true,\n [`variant-${this.variant}`]: true,\n [`align-${this.align}`]: true,\n [`theme-${this.theme}`]: true\n }}\n part=\"base\"\n >\n <slot />\n </Tag>\n );\n }\n}\n"]}
@@ -30,7 +30,7 @@ export class AfTypographyLockup {
30
30
  [`breakpoint-${this.breakpoint}`]: true
31
31
  };
32
32
  const copyStyle = this.maxWidth ? { maxWidth: `${this.maxWidth}px` } : {};
33
- return (h(Host, { key: 'c8bc936e14d143125926e4cc03a3344911d46360' }, h("div", { key: '4c51fcb278daba5e4b8287130a1e61021750af18', class: containerClasses }, h("div", { key: '6d563b91c8b548a72f898978569bceda44a26b14', class: copyClasses, style: copyStyle }, h("div", { key: '4351708a5d68297499f7d12109941b7dec8939ad', class: "heading" }, h("slot", { key: '92c799fb2cbf596ab8778cf8d5c9cf88663ed219' })), h("div", { key: '0911e146d7aa3c34d6c825eb849e883b2f69893b', class: "description" }, h("slot", { key: 'b3184843c5646db87a3bd7660214fd4cf2bafc0f', name: "description" }))), h("div", { key: '4b2b814e55a574c7330c517eca3f1765d11cdcdc', class: "buttons" }, h("slot", { key: 'f35ea7c3bc5592f8e6776464b6878d819792894b', name: "buttons" })))));
33
+ return (h(Host, { key: '108f59f3983487b19e059fa0f9c9c33cfb9b47ba' }, h("div", { key: '4dd1ece34095b91fcf9f41355a16eb4fb4b83ef0', class: containerClasses }, h("div", { key: '3a472b7ccfe7192ca9f2867e91b366469c030442', class: copyClasses, style: copyStyle }, h("div", { key: '578aa5a20e857a1d822d60a3f8dfb16ddd64f423', class: "heading" }, h("slot", { key: 'd38c8f2572e16f6f158b37c1a547c5482f1a3351' })), h("div", { key: '4d59415dac2a10f2443b2186e8f71026e9c70e71', class: "description" }, h("slot", { key: 'e1b4d336405cdf08b7fcb451f7e09811c736a955', name: "description" }))), h("div", { key: '955dda0ad363656d54dca5f9327329a91ee2a96e', class: "buttons" }, h("slot", { key: 'e6582595577adeb312cb726ea6708c23a46d6ec1', name: "buttons" })))));
34
34
  }
35
35
  static get is() { return "af-typography-lockup"; }
36
36
  static get encapsulation() { return "shadow"; }
@@ -1,4 +1,4 @@
1
- import { A as AfAspectRatio$1, d as defineCustomElement$1 } from './p-Bxv9iL3G.js';
1
+ import { A as AfAspectRatio$1, d as defineCustomElement$1 } from './p-BMl1ggbQ.js';
2
2
 
3
3
  const AfAspectRatio = AfAspectRatio$1;
4
4
  const defineCustomElement = defineCustomElement$1;
@@ -1,4 +1,4 @@
1
- import { A as AfButtonGroup$1, d as defineCustomElement$1 } from './p-Bdy85P7Z.js';
1
+ import { A as AfButtonGroup$1, d as defineCustomElement$1 } from './p-BeQlNDyY.js';
2
2
 
3
3
  const AfButtonGroup = AfButtonGroup$1;
4
4
  const defineCustomElement = defineCustomElement$1;
@@ -1,4 +1,4 @@
1
- import { A as AfButton$1, d as defineCustomElement$1 } from './p-D021PjqL.js';
1
+ import { A as AfButton$1, d as defineCustomElement$1 } from './p-CcNomA2o.js';
2
2
 
3
3
  const AfButton = AfButton$1;
4
4
  const defineCustomElement = defineCustomElement$1;
@@ -1,6 +1,6 @@
1
- import { p as proxyCustomElement, H, h, c as Host } from './p-ChRDoPDm.js';
1
+ import { p as proxyCustomElement, H, h, c as Host } from './p-CZlTvZAm.js';
2
2
 
3
- const afCardCss = ".sc-af-card-h{display:block;width:100%;min-height:400px}.card.sc-af-card{background:var(--colour-background-level-1, #e8eeed);border-radius:var(--border-radius-card-level-1, 32px);overflow:hidden;position:relative;display:flex;flex-direction:column;min-height:400px;height:100%;box-sizing:border-box}.card--with-image.sc-af-card{background:var(--colour-brand-inkwell, #14343b);min-height:480px}.card__background.sc-af-card{position:absolute;inset:0;pointer-events:none;z-index:0}.card__background-image.sc-af-card{width:100%;height:100%;object-fit:cover;object-position:center}.card__content.sc-af-card{position:relative;padding:40px;display:flex;flex-direction:column;gap:24px;flex:1;box-sizing:border-box;z-index:1}.card__content.sc-af-card-s>img,.card__content .sc-af-card-s>img{width:100%;height:auto;min-height:200px;margin-top:auto;object-fit:cover;object-position:top center}.card__content.sc-af-card-s>af-heading,.card__content .sc-af-card-s>af-heading{margin-bottom:0}.card__content.sc-af-card-s>af-text,.card__content .sc-af-card-s>af-text{line-height:1.44}.card__content--overlay.sc-af-card{backdrop-filter:blur(2px);background:linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);padding:32px;padding-top:200px;justify-content:flex-end;--colour-typography-heading-primary:#ffffff;--colour-typography-heading-secondary:#ffffff;--colour-typography-body-default:#ffffff;--colour-typography-body-dark:#ffffff;color:#ffffff}.card__content--overlay.sc-af-card *.sc-af-card{color:#ffffff !important}.card.sc-af-card:not(.card--with-image) .card__content.sc-af-card{color:var(--colour-typography-heading-primary, #14343b)}.card--custom-bg.sc-af-card .card__content.sc-af-card{--colour-typography-heading-primary:#ffffff;--colour-typography-body-default:#ffffff}";
3
+ const afCardCss = ".sc-af-card-h{display:block;width:100%;min-height:400px}.card.sc-af-card{background:var(--colour-background-level-1, #e8eeed);border-radius:var(--border-radius-card-level-1, 32px);overflow:hidden;position:relative;display:flex;flex-direction:column;min-height:400px;height:100%;box-sizing:border-box}.card--with-image.sc-af-card{background:var(--colour-brand-inkwell, #14343b);min-height:480px}.card__background.sc-af-card{position:absolute;inset:0;pointer-events:none;z-index:0}.card__background-image.sc-af-card{width:100%;height:100%;object-fit:cover;object-position:center}.card__content.sc-af-card{position:relative;padding:40px;display:flex;flex-direction:column;gap:24px;flex:1;box-sizing:border-box;z-index:1}.card__content.sc-af-card-s>img,.card__content .sc-af-card-s>img{width:100%;height:auto;min-height:200px;margin-top:auto;object-fit:cover;object-position:top center}.card__content.sc-af-card-s>af-heading,.card__content .sc-af-card-s>af-heading{margin-bottom:0}.card__content.sc-af-card-s>af-text,.card__content .sc-af-card-s>af-text{line-height:1.44}.card__content--overlay.sc-af-card{backdrop-filter:blur(2px);background:linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);padding:32px;padding-top:200px;justify-content:flex-end;--colour-typography-heading-primary:#ffffff;--colour-typography-heading-secondary:#ffffff;--colour-typography-body-default:#ffffff;--colour-typography-body-dark:#ffffff;color:#ffffff}.card__content--overlay.sc-af-card *.sc-af-card{color:#ffffff !important}.card.sc-af-card:not(.card--with-image):not(.card--dark-overlay) af-heading.sc-af-card,.card.sc-af-card:not(.card--with-image):not(.card--dark-overlay) af-text.sc-af-card{--colour-typography-heading-primary:var(--colour-brand-inkwell, #14343B);--colour-typography-body-default:#2B484F}.card--custom-bg.sc-af-card:not(.card--dark-overlay) af-heading.sc-af-card,.card--custom-bg.sc-af-card:not(.card--dark-overlay) af-text.sc-af-card{--colour-typography-heading-primary:var(--colour-brand-inkwell, #14343B);--colour-typography-body-default:#2B484F}";
4
4
 
5
5
  const AfCard$1 = /*@__PURE__*/ proxyCustomElement(class AfCard extends H {
6
6
  constructor(registerHost) {
@@ -16,7 +16,7 @@ const AfCard$1 = /*@__PURE__*/ proxyCustomElement(class AfCard extends H {
16
16
  render() {
17
17
  const hasBackgroundImage = !!this.backgroundImage;
18
18
  const cardStyle = this.backgroundColor ? { backgroundColor: this.backgroundColor } : undefined;
19
- return (h(Host, { key: '026a3f9e10d281558913cd6eb69db800da37deb4' }, h("div", { key: 'd6b43e724d5611e75ec096dad88c5373ef5c5adc', class: `card ${hasBackgroundImage ? 'card--with-image' : ''} ${this.darkOverlay ? 'card--dark-overlay' : ''} ${this.backgroundColor ? 'card--custom-bg' : ''}`, style: cardStyle }, hasBackgroundImage && (h("div", { key: 'f71753ba962411320c45f06c7c9a5c98b89883a9', class: "card__background" }, h("img", { key: '2d3b19e350ddf5a1efa1c1a9a343851e423cc275', src: this.backgroundImage, alt: "", class: "card__background-image" }))), h("div", { key: '459e00230ef7a470ee808d0d674412b18822d473', class: `card__content ${hasBackgroundImage ? 'card__content--overlay' : ''}` }, h("slot", { key: 'd2f4f261f0b2a766c912504d17f0caec96ae02c4' })))));
19
+ return (h(Host, { key: '2c3c0b6d1889074ae78b2b1f9646dc23829a0e9a' }, h("div", { key: '7e1ef884a203ae17e1ad417ac688f59b9acb6932', class: `card ${hasBackgroundImage ? 'card--with-image' : ''} ${this.darkOverlay ? 'card--dark-overlay' : ''} ${this.backgroundColor ? 'card--custom-bg' : ''}`, style: cardStyle }, hasBackgroundImage && (h("div", { key: '4fb3cea588d42345690df68738b725a6debacc55', class: "card__background" }, h("img", { key: '0dde30e250c7cb117993e3ccbeab8f108278ae89', src: this.backgroundImage, alt: "", class: "card__background-image" }))), h("div", { key: 'f604c04997720f4804d148f103f9c4a69b1ec0aa', class: `card__content ${hasBackgroundImage ? 'card__content--overlay' : ''}` }, h("slot", { key: 'a7668f98c4c8fd10b5581eac69f2a31aecbc3732' })))));
20
20
  }
21
21
  static get style() { return afCardCss; }
22
22
  }, [262, "af-card", {
@@ -1 +1 @@
1
- {"file":"af-card.js","mappings":";;AAAA,MAAM,SAAS,GAAG,wvDAAwvD;;MCQ7vDA,QAAM,iBAAAC,kBAAA,CAAA,MAAA,MAAA,SAAAC,CAAA,CAAA;AANnB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;AAiBE;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;AAwBrC;IAtBC,MAAM,GAAA;AACJ,QAAA,MAAM,kBAAkB,GAAG,CAAC,CAAC,IAAI,CAAC,eAAe;AACjD,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,eAAe,GAAG,EAAE,eAAe,EAAE,IAAI,CAAC,eAAe,EAAE,GAAG,SAAS;AAE9F,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,QAAQ,kBAAkB,GAAG,kBAAkB,GAAG,EAAE,IAAI,IAAI,CAAC,WAAW,GAAG,oBAAoB,GAAG,EAAE,CAAI,CAAA,EAAA,IAAI,CAAC,eAAe,GAAG,iBAAiB,GAAG,EAAE,CAAA,CAAE,EAC9J,KAAK,EAAE,SAAS,EAAA,EAEf,kBAAkB,KACjB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC3B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,GAAG,EAAE,IAAI,CAAC,eAAe,EAAE,GAAG,EAAC,EAAE,EAAC,KAAK,EAAC,wBAAwB,EAAA,CAAG,CACpE,CACP,EACD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAiB,cAAA,EAAA,kBAAkB,GAAG,wBAAwB,GAAG,EAAE,CAAE,CAAA,EAAA,EAC/E,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["AfCard","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-card/af-card.css?tag=af-card&encapsulation=scoped","src/components/af-card/af-card.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n min-height: 400px;\n}\n\n.card {\n background: var(--colour-background-level-1, #e8eeed);\n border-radius: var(--border-radius-card-level-1, 32px);\n overflow: hidden;\n position: relative;\n display: flex;\n flex-direction: column;\n min-height: 400px;\n height: 100%;\n box-sizing: border-box;\n}\n\n.card--with-image {\n background: var(--colour-brand-inkwell, #14343b);\n min-height: 480px;\n}\n\n.card__background {\n position: absolute;\n inset: 0;\n pointer-events: none;\n z-index: 0;\n}\n\n.card__background-image {\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center;\n}\n\n.card__content {\n position: relative;\n padding: 40px;\n display: flex;\n flex-direction: column;\n gap: 24px;\n flex: 1;\n box-sizing: border-box;\n z-index: 1;\n}\n\n/* Image styling within cards */\n.card__content ::slotted(img) {\n width: 100%;\n height: auto;\n min-height: 200px;\n margin-top: auto;\n object-fit: cover;\n object-position: top center;\n}\n\n/* Heading spacing within cards */\n.card__content ::slotted(af-heading) {\n margin-bottom: 0;\n}\n\n/* Text line-height within cards */\n.card__content ::slotted(af-text) {\n line-height: 1.44;\n}\n\n.card__content--overlay {\n backdrop-filter: blur(2px);\n background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);\n padding: 32px;\n padding-top: 200px;\n justify-content: flex-end;\n \n /* Set CSS custom properties for text color that child components can use */\n --colour-typography-heading-primary: #ffffff;\n --colour-typography-heading-secondary: #ffffff;\n --colour-typography-body-default: #ffffff;\n --colour-typography-body-dark: #ffffff;\n color: #ffffff;\n}\n\n/* Force white text in overlay cards using both direct styling and custom properties */\n.card__content--overlay * {\n color: #ffffff !important;\n}\n\n/* Dark text for regular cards */\n.card:not(.card--with-image) .card__content {\n color: var(--colour-typography-heading-primary, #14343b);\n}\n\n/* Custom background color cards with white text */\n.card--custom-bg .card__content {\n --colour-typography-heading-primary: #ffffff;\n --colour-typography-body-default: #ffffff;\n}\n\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n@Component({\n tag: 'af-card',\n styleUrl: 'af-card.css',\n shadow: false,\n scoped: true,\n})\nexport class AfCard {\n /**\n * Background image URL for the card\n */\n @Prop() backgroundImage?: string;\n\n /**\n * Background color for the card (CSS color value)\n */\n @Prop() backgroundColor?: string;\n\n /**\n * Whether to apply a dark gradient overlay (for cards with background images)\n */\n @Prop() darkOverlay: boolean = false;\n\n render() {\n const hasBackgroundImage = !!this.backgroundImage;\n const cardStyle = this.backgroundColor ? { backgroundColor: this.backgroundColor } : undefined;\n\n return (\n <Host>\n <div \n class={`card ${hasBackgroundImage ? 'card--with-image' : ''} ${this.darkOverlay ? 'card--dark-overlay' : ''} ${this.backgroundColor ? 'card--custom-bg' : ''}`}\n style={cardStyle}\n >\n {hasBackgroundImage && (\n <div class=\"card__background\">\n <img src={this.backgroundImage} alt=\"\" class=\"card__background-image\" />\n </div>\n )}\n <div class={`card__content ${hasBackgroundImage ? 'card__content--overlay' : ''}`}>\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n\n"],"version":3}
1
+ {"file":"af-card.js","mappings":";;AAAA,MAAM,SAAS,GAAG,qhEAAqhE;;MCQ1hEA,QAAM,iBAAAC,kBAAA,CAAA,MAAA,MAAA,SAAAC,CAAA,CAAA;AANnB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;AAiBE;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;AAwBrC;IAtBC,MAAM,GAAA;AACJ,QAAA,MAAM,kBAAkB,GAAG,CAAC,CAAC,IAAI,CAAC,eAAe;AACjD,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,eAAe,GAAG,EAAE,eAAe,EAAE,IAAI,CAAC,eAAe,EAAE,GAAG,SAAS;AAE9F,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,QAAQ,kBAAkB,GAAG,kBAAkB,GAAG,EAAE,IAAI,IAAI,CAAC,WAAW,GAAG,oBAAoB,GAAG,EAAE,CAAI,CAAA,EAAA,IAAI,CAAC,eAAe,GAAG,iBAAiB,GAAG,EAAE,CAAA,CAAE,EAC9J,KAAK,EAAE,SAAS,EAAA,EAEf,kBAAkB,KACjB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC3B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,GAAG,EAAE,IAAI,CAAC,eAAe,EAAE,GAAG,EAAC,EAAE,EAAC,KAAK,EAAC,wBAAwB,EAAA,CAAG,CACpE,CACP,EACD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAiB,cAAA,EAAA,kBAAkB,GAAG,wBAAwB,GAAG,EAAE,CAAE,CAAA,EAAA,EAC/E,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["AfCard","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-card/af-card.css?tag=af-card&encapsulation=scoped","src/components/af-card/af-card.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n min-height: 400px;\n}\n\n.card {\n background: var(--colour-background-level-1, #e8eeed);\n border-radius: var(--border-radius-card-level-1, 32px);\n overflow: hidden;\n position: relative;\n display: flex;\n flex-direction: column;\n min-height: 400px;\n height: 100%;\n box-sizing: border-box;\n}\n\n.card--with-image {\n background: var(--colour-brand-inkwell, #14343b);\n min-height: 480px;\n}\n\n.card__background {\n position: absolute;\n inset: 0;\n pointer-events: none;\n z-index: 0;\n}\n\n.card__background-image {\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center;\n}\n\n.card__content {\n position: relative;\n padding: 40px;\n display: flex;\n flex-direction: column;\n gap: 24px;\n flex: 1;\n box-sizing: border-box;\n z-index: 1;\n}\n\n/* Image styling within cards */\n.card__content ::slotted(img) {\n width: 100%;\n height: auto;\n min-height: 200px;\n margin-top: auto;\n object-fit: cover;\n object-position: top center;\n}\n\n/* Heading spacing within cards */\n.card__content ::slotted(af-heading) {\n margin-bottom: 0;\n}\n\n/* Text line-height within cards */\n.card__content ::slotted(af-text) {\n line-height: 1.44;\n}\n\n.card__content--overlay {\n backdrop-filter: blur(2px);\n background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);\n padding: 32px;\n padding-top: 200px;\n justify-content: flex-end;\n \n /* Set CSS custom properties for text color that child components can use */\n --colour-typography-heading-primary: #ffffff;\n --colour-typography-heading-secondary: #ffffff;\n --colour-typography-body-default: #ffffff;\n --colour-typography-body-dark: #ffffff;\n color: #ffffff;\n}\n\n/* Force white text in overlay cards using both direct styling and custom properties */\n.card__content--overlay * {\n color: #ffffff !important;\n}\n\n/* Dark text for regular cards (light backgrounds) */\n.card:not(.card--with-image):not(.card--dark-overlay) af-heading,\n.card:not(.card--with-image):not(.card--dark-overlay) af-text {\n --colour-typography-heading-primary: var(--colour-brand-inkwell, #14343B);\n --colour-typography-body-default: #2B484F;\n}\n\n/* Dark text for custom background color cards (unless they have dark overlay) */\n.card--custom-bg:not(.card--dark-overlay) af-heading,\n.card--custom-bg:not(.card--dark-overlay) af-text {\n --colour-typography-heading-primary: var(--colour-brand-inkwell, #14343B);\n --colour-typography-body-default: #2B484F;\n}\n\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n@Component({\n tag: 'af-card',\n styleUrl: 'af-card.css',\n shadow: false,\n scoped: true,\n})\nexport class AfCard {\n /**\n * Background image URL for the card\n */\n @Prop() backgroundImage?: string;\n\n /**\n * Background color for the card (CSS color value)\n */\n @Prop() backgroundColor?: string;\n\n /**\n * Whether to apply a dark gradient overlay (for cards with background images)\n */\n @Prop() darkOverlay: boolean = false;\n\n render() {\n const hasBackgroundImage = !!this.backgroundImage;\n const cardStyle = this.backgroundColor ? { backgroundColor: this.backgroundColor } : undefined;\n\n return (\n <Host>\n <div \n class={`card ${hasBackgroundImage ? 'card--with-image' : ''} ${this.darkOverlay ? 'card--dark-overlay' : ''} ${this.backgroundColor ? 'card--custom-bg' : ''}`}\n style={cardStyle}\n >\n {hasBackgroundImage && (\n <div class=\"card__background\">\n <img src={this.backgroundImage} alt=\"\" class=\"card__background-image\" />\n </div>\n )}\n <div class={`card__content ${hasBackgroundImage ? 'card__content--overlay' : ''}`}>\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n\n"],"version":3}
@@ -0,0 +1,11 @@
1
+ import type { Components, JSX } from "../types/components";
2
+
3
+ interface AfClientCarousel extends Components.AfClientCarousel, HTMLElement {}
4
+ export const AfClientCarousel: {
5
+ prototype: AfClientCarousel;
6
+ new (): AfClientCarousel;
7
+ };
8
+ /**
9
+ * Used to define this component and all nested components recursively.
10
+ */
11
+ export const defineCustomElement: () => void;
@@ -0,0 +1,45 @@
1
+ import { p as proxyCustomElement, H, h, c as Host } from './p-CZlTvZAm.js';
2
+
3
+ const afClientCarouselCss = ":host{display:block;width:100%;background-color:var(--colour-brand-inkwell, #14343B)}.client-carousel{padding:48px 80px;display:flex;flex-direction:column;gap:40px;align-items:center}.headline{text-align:center;padding:24px 220px}.headline h3{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:500;font-size:34px;line-height:1;letter-spacing:-0.68px;color:var(--colour-brand-mist-green, #C6D5D1);margin:0}.carousel-container{display:flex;flex-direction:column;gap:16px;width:100%;overflow:hidden}.carousel-row{display:flex;width:100%;overflow:hidden;position:relative}.logo-track{display:flex;gap:16px;animation-timing-function:linear;animation-iteration-count:infinite}.scroll-left .logo-track{animation-name:scroll-left;animation-duration:40s}.scroll-right .logo-track{animation-name:scroll-right;animation-duration:40s}@keyframes scroll-left{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}@keyframes scroll-right{0%{transform:translateX(-50%)}100%{transform:translateX(0)}}::slotted(*){flex-shrink:0}@media (max-width: 1024px){.client-carousel{padding:32px 40px}.headline{padding:16px 40px}}@media (max-width: 767px){.client-carousel{padding:24px 16px}.headline{padding:16px}.headline h3{font-size:25px}}";
4
+
5
+ const AfClientCarousel$1 = /*@__PURE__*/ proxyCustomElement(class AfClientCarousel extends H {
6
+ constructor(registerHost) {
7
+ super();
8
+ if (registerHost !== false) {
9
+ this.__registerHost();
10
+ }
11
+ this.__attachShadow();
12
+ /** Show headline above carousel */
13
+ this.showHeadline = false;
14
+ /** Headline text */
15
+ this.headlineText = "Trusted by some of the world's leading organisations";
16
+ }
17
+ render() {
18
+ return (h(Host, { key: '6ee5a4e472cb082ac68cb58c00bf5b1d686dd489' }, h("div", { key: 'dc030f69bfbb55ce999f0b2f1d8a47095d75ac59', class: "client-carousel" }, this.showHeadline && (h("div", { key: 'd8d7fdbd47e65cc5a3a8e10d88f7425f91d0459e', class: "headline" }, h("slot", { key: '3773f567bfd3de6058cd1088ba2c781cf510e63b', name: "headline" }, h("h3", { key: 'fdcab6ce99a2c477bf1e336f13f7994637b8436d' }, this.headlineText)))), h("div", { key: '30429a27f88e490051a4623195421e00a34f4db4', class: "carousel-container" }, h("div", { key: 'de187b8265b84cb3d8f22540ec283bb8b3603aa8', class: "carousel-row scroll-left" }, h("div", { key: 'd2da7c79388f53425cba20429204fea148030aa5', class: "logo-track" }, h("slot", { key: 'b4ddb6250d5893290ed40a2c765d0f0bf0a378e6', name: "row-1" }), h("slot", { key: 'ccb91ed748f2e51a1d0f2d63d676f7e2558ec2ef', name: "row-1" }))), h("div", { key: 'f6a99654384b070bf91e9ea1ebc57de304f2671f', class: "carousel-row scroll-right" }, h("div", { key: '8e31a13039f2e2df33eb7ec67f738d71d49d931f', class: "logo-track" }, h("slot", { key: '2ffeff2da8ddd4c0faefaf59fc1a45972de26943', name: "row-2" }), h("slot", { key: '2121dc84af370a41290a432e50f3c10f6b3d4b4c', name: "row-2" })))))));
19
+ }
20
+ static get style() { return afClientCarouselCss; }
21
+ }, [257, "af-client-carousel", {
22
+ "showHeadline": [4, "show-headline"],
23
+ "headlineText": [1, "headline-text"]
24
+ }]);
25
+ function defineCustomElement$1() {
26
+ if (typeof customElements === "undefined") {
27
+ return;
28
+ }
29
+ const components = ["af-client-carousel"];
30
+ components.forEach(tagName => { switch (tagName) {
31
+ case "af-client-carousel":
32
+ if (!customElements.get(tagName)) {
33
+ customElements.define(tagName, AfClientCarousel$1);
34
+ }
35
+ break;
36
+ } });
37
+ }
38
+
39
+ const AfClientCarousel = AfClientCarousel$1;
40
+ const defineCustomElement = defineCustomElement$1;
41
+
42
+ export { AfClientCarousel, defineCustomElement };
43
+ //# sourceMappingURL=af-client-carousel.js.map
44
+
45
+ //# sourceMappingURL=af-client-carousel.js.map