@affinda/wc 0.0.7 → 0.0.9
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.
- package/dist/affinda/af-button.entry.esm.js.map +1 -1
- package/dist/affinda/af-card.entry.esm.js.map +1 -1
- package/dist/affinda/af-client-carousel.entry.esm.js.map +1 -0
- package/dist/affinda/af-heading.af-logo.af-nav-item.af-navbar.af-text.entry.esm.js.map +1 -1
- package/dist/affinda/af-hero-section.entry.esm.js.map +1 -0
- package/dist/affinda/af-logo-well.entry.esm.js.map +1 -0
- package/dist/affinda/af-section.entry.esm.js.map +1 -0
- package/dist/affinda/af-testimonial-carousel.entry.esm.js.map +1 -1
- package/dist/affinda/affinda.css +1 -1
- package/dist/affinda/affinda.esm.js +1 -1
- package/dist/affinda/index.esm.js +1 -1
- package/dist/affinda/p-0e642987.entry.js +2 -0
- package/dist/affinda/p-0e642987.entry.js.map +1 -0
- package/dist/affinda/p-0fb55acf.entry.js +2 -0
- package/dist/affinda/{p-56284540.entry.js.map → p-0fb55acf.entry.js.map} +1 -1
- package/dist/affinda/p-10288f13.entry.js +2 -0
- package/dist/affinda/p-10288f13.entry.js.map +1 -0
- package/dist/affinda/p-13c30dd8.entry.js +2 -0
- package/dist/affinda/p-13c30dd8.entry.js.map +1 -0
- package/dist/affinda/{p-c8628633.entry.js → p-23aedaa4.entry.js} +2 -2
- package/dist/affinda/{p-eff7eff1.entry.js → p-39e917eb.entry.js} +2 -2
- package/dist/affinda/{p-16c84e60.entry.js → p-430127fa.entry.js} +2 -2
- package/dist/affinda/{p-43324b6d.entry.js → p-45d0f3e3.entry.js} +2 -2
- package/dist/affinda/p-45d0f3e3.entry.js.map +1 -0
- package/dist/affinda/{p-f53b4847.entry.js → p-46edc753.entry.js} +2 -2
- package/dist/affinda/{p-32f46944.entry.js → p-56a15842.entry.js} +2 -2
- package/dist/affinda/p-7c115698.entry.js +2 -0
- package/dist/affinda/p-7c115698.entry.js.map +1 -0
- package/dist/affinda/p-867c5141.entry.js +2 -0
- package/dist/affinda/{p-UbNmjSSX.js → p-Agei6ZJQ.js} +3 -3
- package/dist/affinda/p-Agei6ZJQ.js.map +1 -0
- package/dist/affinda/{p-750a694b.entry.js → p-d7ff9fd9.entry.js} +2 -2
- package/dist/affinda/{p-9e5bef28.entry.js → p-e2c40f4e.entry.js} +2 -2
- package/dist/affinda/{p-9e5bef28.entry.js.map → p-e2c40f4e.entry.js.map} +1 -1
- package/dist/affinda/p-e56182e4.entry.js +2 -0
- package/dist/affinda/p-e56182e4.entry.js.map +1 -0
- package/dist/affinda/{p-66daadde.entry.js → p-f6f2f1c4.entry.js} +2 -2
- package/dist/cjs/af-aspect-ratio.cjs.entry.js +1 -1
- package/dist/cjs/af-button-group.cjs.entry.js +2 -2
- package/dist/cjs/af-button.cjs.entry.js +7 -2
- package/dist/cjs/af-button.entry.cjs.js.map +1 -1
- package/dist/cjs/af-card.cjs.entry.js +3 -3
- package/dist/cjs/af-card.entry.cjs.js.map +1 -1
- package/dist/cjs/af-client-carousel.cjs.entry.js +22 -0
- package/dist/cjs/af-client-carousel.entry.cjs.js.map +1 -0
- package/dist/cjs/af-color-swatch.cjs.entry.js +1 -1
- package/dist/cjs/af-container.cjs.entry.js +1 -1
- package/dist/cjs/af-heading.af-logo.af-nav-item.af-navbar.af-text.entry.cjs.js.map +1 -1
- package/dist/cjs/af-heading_5.cjs.entry.js +22 -12
- package/dist/cjs/af-hero-section.cjs.entry.js +24 -0
- package/dist/cjs/af-hero-section.entry.cjs.js.map +1 -0
- package/dist/cjs/af-icon-button.cjs.entry.js +1 -1
- package/dist/cjs/af-logo-well.cjs.entry.js +18 -0
- package/dist/cjs/af-logo-well.entry.cjs.js.map +1 -0
- package/dist/cjs/af-section.cjs.entry.js +25 -0
- package/dist/cjs/af-section.entry.cjs.js.map +1 -0
- package/dist/cjs/af-testimonial-carousel.cjs.entry.js +4 -4
- package/dist/cjs/af-testimonial-carousel.entry.cjs.js.map +1 -1
- package/dist/cjs/af-testimonial-stat.cjs.entry.js +2 -2
- package/dist/cjs/af-testimonial.cjs.entry.js +2 -2
- package/dist/cjs/af-typography-lockup.cjs.entry.js +2 -2
- package/dist/cjs/affinda.cjs.js +2 -2
- package/dist/cjs/{index-CNijn8X5.js → index-D_ItFcqt.js} +3 -3
- package/dist/cjs/index-D_ItFcqt.js.map +1 -0
- package/dist/cjs/index.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/collection/assets/paperclip-decoration.svg +3 -0
- package/dist/collection/collection-manifest.json +4 -0
- package/dist/collection/components/af-button/af-button.js +26 -1
- package/dist/collection/components/af-button/af-button.js.map +1 -1
- package/dist/collection/components/af-button-group/af-button-group.js +1 -1
- package/dist/collection/components/af-card/af-card.css +10 -7
- package/dist/collection/components/af-card/af-card.js +1 -1
- package/dist/collection/components/af-client-carousel/af-client-carousel.css +112 -0
- package/dist/collection/components/af-client-carousel/af-client-carousel.js +72 -0
- package/dist/collection/components/af-client-carousel/af-client-carousel.js.map +1 -0
- package/dist/collection/components/af-heading/af-heading.css +9 -0
- package/dist/collection/components/af-heading/af-heading.js +26 -3
- package/dist/collection/components/af-heading/af-heading.js.map +1 -1
- package/dist/collection/components/af-hero-section/af-hero-section.css +69 -0
- package/dist/collection/components/af-hero-section/af-hero-section.js +94 -0
- package/dist/collection/components/af-hero-section/af-hero-section.js.map +1 -0
- package/dist/collection/components/af-logo/af-logo.js +1 -1
- package/dist/collection/components/af-logo-well/af-logo-well.css +27 -0
- package/dist/collection/components/af-logo-well/af-logo-well.js +22 -0
- package/dist/collection/components/af-logo-well/af-logo-well.js.map +1 -0
- package/dist/collection/components/af-navbar/af-navbar.css +40 -3
- package/dist/collection/components/af-navbar/af-navbar.js +13 -1
- package/dist/collection/components/af-navbar/af-navbar.js.map +1 -1
- package/dist/collection/components/af-section/af-section.css +52 -0
- package/dist/collection/components/af-section/af-section.js +95 -0
- package/dist/collection/components/af-section/af-section.js.map +1 -0
- package/dist/collection/components/af-testimonial/af-testimonial.js +1 -1
- package/dist/collection/components/af-testimonial-carousel/af-testimonial-carousel.css +3 -2
- package/dist/collection/components/af-testimonial-carousel/af-testimonial-carousel.js +2 -2
- package/dist/collection/components/af-testimonial-stat/af-testimonial-stat.js +1 -1
- package/dist/collection/components/af-text/af-text.css +9 -0
- package/dist/collection/components/af-text/af-text.js +26 -3
- package/dist/collection/components/af-text/af-text.js.map +1 -1
- package/dist/collection/components/af-typography-lockup/af-typography-lockup.js +1 -1
- package/dist/components/af-aspect-ratio.js +1 -1
- package/dist/components/af-button-group.js +1 -1
- package/dist/components/af-button.js +1 -1
- package/dist/components/af-card.js +3 -3
- package/dist/components/af-card.js.map +1 -1
- package/dist/components/af-client-carousel.d.ts +11 -0
- package/dist/components/af-client-carousel.js +45 -0
- package/dist/components/af-client-carousel.js.map +1 -0
- package/dist/components/af-color-swatch.js +1 -1
- package/dist/components/af-container.js +1 -1
- package/dist/components/af-heading.js +1 -1
- package/dist/components/af-hero-section.d.ts +11 -0
- package/dist/components/af-hero-section.js +53 -0
- package/dist/components/af-hero-section.js.map +1 -0
- package/dist/components/af-icon-button.js +1 -1
- package/dist/components/af-logo-well.d.ts +11 -0
- package/dist/components/af-logo-well.js +38 -0
- package/dist/components/af-logo-well.js.map +1 -0
- package/dist/components/af-logo.js +1 -1
- package/dist/components/af-nav-item.js +1 -1
- package/dist/components/af-navbar.js +1 -1
- package/dist/components/af-section.d.ts +11 -0
- package/dist/components/af-section.js +54 -0
- package/dist/components/af-section.js.map +1 -0
- package/dist/components/af-testimonial-carousel.js +4 -4
- package/dist/components/af-testimonial-carousel.js.map +1 -1
- package/dist/components/af-testimonial-stat.js +2 -2
- package/dist/components/af-testimonial.js +2 -2
- package/dist/components/af-text.js +1 -1
- package/dist/components/af-typography-lockup.js +1 -1
- package/dist/components/index.js +13 -13
- package/dist/components/{p-Bxv9iL3G.js → p-BMl1ggbQ.js} +3 -3
- package/dist/components/{p-Bxv9iL3G.js.map → p-BMl1ggbQ.js.map} +1 -1
- package/dist/components/{p-KtmLxy7z.js → p-BSewwIfD.js} +3 -3
- package/dist/components/{p-KtmLxy7z.js.map → p-BSewwIfD.js.map} +1 -1
- package/dist/components/{p-Bdy85P7Z.js → p-BeQlNDyY.js} +4 -4
- package/dist/components/{p-Bdy85P7Z.js.map → p-BeQlNDyY.js.map} +1 -1
- package/dist/components/{p-DPooX_NW.js → p-BpXkQGDQ.js} +3 -3
- package/dist/components/{p-DPooX_NW.js.map → p-BpXkQGDQ.js.map} +1 -1
- package/dist/components/{p-C0zUdiRs.js → p-C1C1Him5.js} +12 -8
- package/dist/components/p-C1C1Him5.js.map +1 -0
- package/dist/components/{p-Cfj594pp.js → p-CUr7n62X.js} +3 -3
- package/dist/components/{p-Cfj594pp.js.map → p-CUr7n62X.js.map} +1 -1
- package/dist/components/{p-ChRDoPDm.js → p-CZlTvZAm.js} +3 -3
- package/dist/components/p-CZlTvZAm.js.map +1 -0
- package/dist/components/{p-D021PjqL.js → p-CcNomA2o.js} +11 -5
- package/dist/components/p-CcNomA2o.js.map +1 -0
- package/dist/components/p-Csie_upq.js +41 -0
- package/dist/components/p-Csie_upq.js.map +1 -0
- package/dist/components/{p-CLA_jBiH.js → p-D4NomvK5.js} +4 -4
- package/dist/components/{p-CLA_jBiH.js.map → p-D4NomvK5.js.map} +1 -1
- package/dist/components/{p-BuySFAGS.js → p-Vu-NeL7U.js} +12 -8
- package/dist/components/p-Vu-NeL7U.js.map +1 -0
- package/dist/components/{p-C4sw-kYH.js → p-sJI0-JlJ.js} +4 -4
- package/dist/components/{p-C4sw-kYH.js.map → p-sJI0-JlJ.js.map} +1 -1
- package/dist/components/{p-XAy0kGYd.js → p-tFlyM2Th.js} +3 -3
- package/dist/components/{p-XAy0kGYd.js.map → p-tFlyM2Th.js.map} +1 -1
- package/dist/esm/af-aspect-ratio.entry.js +1 -1
- package/dist/esm/af-button-group.entry.js +2 -2
- package/dist/esm/af-button.entry.js +7 -2
- package/dist/esm/af-button.entry.js.map +1 -1
- package/dist/esm/af-card.entry.js +3 -3
- package/dist/esm/af-card.entry.js.map +1 -1
- package/dist/esm/af-client-carousel.entry.js +20 -0
- package/dist/esm/af-client-carousel.entry.js.map +1 -0
- package/dist/esm/af-color-swatch.entry.js +1 -1
- package/dist/esm/af-container.entry.js +1 -1
- package/dist/esm/af-heading.af-logo.af-nav-item.af-navbar.af-text.entry.js.map +1 -1
- package/dist/esm/af-heading_5.entry.js +22 -12
- package/dist/esm/af-hero-section.entry.js +22 -0
- package/dist/esm/af-hero-section.entry.js.map +1 -0
- package/dist/esm/af-icon-button.entry.js +1 -1
- package/dist/esm/af-logo-well.entry.js +16 -0
- package/dist/esm/af-logo-well.entry.js.map +1 -0
- package/dist/esm/af-section.entry.js +23 -0
- package/dist/esm/af-section.entry.js.map +1 -0
- package/dist/esm/af-testimonial-carousel.entry.js +4 -4
- package/dist/esm/af-testimonial-carousel.entry.js.map +1 -1
- package/dist/esm/af-testimonial-stat.entry.js +2 -2
- package/dist/esm/af-testimonial.entry.js +2 -2
- package/dist/esm/af-typography-lockup.entry.js +2 -2
- package/dist/esm/affinda.js +3 -3
- package/dist/esm/{index-UbNmjSSX.js → index-Agei6ZJQ.js} +3 -3
- package/dist/esm/index-Agei6ZJQ.js.map +1 -0
- package/dist/esm/index.js +1 -1
- package/dist/esm/loader.js +3 -3
- package/dist/types/components/af-button/af-button.d.ts +4 -0
- package/dist/types/components/af-client-carousel/af-client-carousel.d.ts +10 -0
- package/dist/types/components/af-heading/af-heading.d.ts +2 -0
- package/dist/types/components/af-hero-section/af-hero-section.d.ts +12 -0
- package/dist/types/components/af-logo-well/af-logo-well.d.ts +6 -0
- package/dist/types/components/af-navbar/af-navbar.d.ts +3 -0
- package/dist/types/components/af-section/af-section.d.ts +12 -0
- package/dist/types/components/af-text/af-text.d.ts +2 -0
- package/dist/types/components.d.ts +214 -0
- package/package.json +6 -2
- package/dist/affinda/p-43324b6d.entry.js.map +0 -1
- package/dist/affinda/p-56284540.entry.js +0 -2
- package/dist/affinda/p-9c0b3380.entry.js +0 -2
- package/dist/affinda/p-UbNmjSSX.js.map +0 -1
- package/dist/affinda/p-fedaec5a.entry.js +0 -2
- package/dist/affinda/p-fedaec5a.entry.js.map +0 -1
- package/dist/cjs/index-CNijn8X5.js.map +0 -1
- package/dist/components/p-BuySFAGS.js.map +0 -1
- package/dist/components/p-C0zUdiRs.js.map +0 -1
- package/dist/components/p-CJccTfm5.js +0 -35
- package/dist/components/p-CJccTfm5.js.map +0 -1
- package/dist/components/p-ChRDoPDm.js.map +0 -1
- package/dist/components/p-D021PjqL.js.map +0 -1
- package/dist/esm/index-UbNmjSSX.js.map +0 -1
- /package/dist/affinda/{p-c8628633.entry.js.map → p-23aedaa4.entry.js.map} +0 -0
- /package/dist/affinda/{p-eff7eff1.entry.js.map → p-39e917eb.entry.js.map} +0 -0
- /package/dist/affinda/{p-16c84e60.entry.js.map → p-430127fa.entry.js.map} +0 -0
- /package/dist/affinda/{p-f53b4847.entry.js.map → p-46edc753.entry.js.map} +0 -0
- /package/dist/affinda/{p-32f46944.entry.js.map → p-56a15842.entry.js.map} +0 -0
- /package/dist/affinda/{p-9c0b3380.entry.js.map → p-867c5141.entry.js.map} +0 -0
- /package/dist/affinda/{p-750a694b.entry.js.map → p-d7ff9fd9.entry.js.map} +0 -0
- /package/dist/affinda/{p-66daadde.entry.js.map → p-f6f2f1c4.entry.js.map} +0 -0
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as e,h as t,H as i}from"./p-
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as e,h as t,H as i}from"./p-Agei6ZJQ.js";const n=":host{display:block}.lockup{display:flex;flex-direction:column;gap:40px}.text-left{align-items:flex-start}.text-center{align-items:center}.text-left .copy,.text-left .heading,.text-left .description{text-align:left}.text-center .copy,.text-center .heading,.text-center .description{text-align:center}.copy{display:flex;flex-direction:column;gap:16px;width:100%}.heading{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:400;color:var(--typography-heading-primary, #14343B);line-height:1;white-space:pre-wrap}.breakpoint-desktop.heading-1 .heading{font-size:56px;letter-spacing:-1.12px}.breakpoint-desktop.heading-2 .heading{font-size:44px;letter-spacing:-0.88px}.breakpoint-desktop.heading-3 .heading{font-size:34px;letter-spacing:-0.68px}.breakpoint-desktop.heading-4 .heading{font-size:24px;letter-spacing:-0.48px;line-height:1.2}.breakpoint-desktop.heading-5 .heading{font-size:20px;letter-spacing:-0.4px;line-height:1.2}.breakpoint-mobile.heading-1 .heading{font-size:38px;letter-spacing:-0.76px}.breakpoint-mobile.heading-2 .heading{font-size:32px;letter-spacing:-0.64px}.breakpoint-mobile.heading-3 .heading{font-size:25px;letter-spacing:-0.5px}.breakpoint-mobile.heading-4 .heading{font-size:20px;letter-spacing:-0.4px;line-height:1.1}.breakpoint-mobile.heading-5 .heading{font-size:18px;letter-spacing:-0.36px;line-height:1.1}.description{font-family:'Helvetica', var(--typography-primaryfont, 'NeuSans', sans-serif), sans-serif;font-size:18px;font-weight:400;line-height:26px;color:var(--typography-body-default, #2B484F);white-space:pre-wrap}.description:empty{display:none}.buttons{display:flex;gap:12px}.buttons:empty{display:none}.button-horizontal .buttons{flex-direction:row;align-items:center}.text-left.button-horizontal{flex-direction:row;align-items:center;gap:16px}.text-left.button-horizontal .copy{flex:1 0 0;max-width:950px}.text-left.button-horizontal .buttons{flex-shrink:0}.button-vertical .buttons{flex-direction:row;align-items:flex-start}.text-center.button-vertical .buttons{align-items:center}.text-center .copy{max-width:840px}::slotted(*){margin:0}";const a=class{constructor(t){e(this,t);this.headingSize=2;this.breakpoint="desktop";this.textAlignment="left";this.buttonAlignment="vertical"}render(){const e={lockup:true,[`text-${this.textAlignment}`]:true,[`button-${this.buttonAlignment}`]:true};const n={copy:true,[`heading-${this.headingSize}`]:true,[`breakpoint-${this.breakpoint}`]:true};const a=this.maxWidth?{maxWidth:`${this.maxWidth}px`}:{};return t(i,{key:"108f59f3983487b19e059fa0f9c9c33cfb9b47ba"},t("div",{key:"4dd1ece34095b91fcf9f41355a16eb4fb4b83ef0",class:e},t("div",{key:"3a472b7ccfe7192ca9f2867e91b366469c030442",class:n,style:a},t("div",{key:"578aa5a20e857a1d822d60a3f8dfb16ddd64f423",class:"heading"},t("slot",{key:"d38c8f2572e16f6f158b37c1a547c5482f1a3351"})),t("div",{key:"4d59415dac2a10f2443b2186e8f71026e9c70e71",class:"description"},t("slot",{key:"e1b4d336405cdf08b7fcb451f7e09811c736a955",name:"description"}))),t("div",{key:"955dda0ad363656d54dca5f9327329a91ee2a96e",class:"buttons"},t("slot",{key:"e6582595577adeb312cb726ea6708c23a46d6ec1",name:"buttons"}))))}};a.style=n;export{a as af_typography_lockup};
|
|
2
|
+
//# sourceMappingURL=p-d7ff9fd9.entry.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as a,h as c,H as r}from"./p-
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as a,h as c,H as r}from"./p-Agei6ZJQ.js";const o=".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}";const d=class{constructor(c){a(this,c);this.darkOverlay=false}render(){const a=!!this.backgroundImage;const o=this.backgroundColor?{backgroundColor:this.backgroundColor}:undefined;return c(r,{key:"2c3c0b6d1889074ae78b2b1f9646dc23829a0e9a"},c("div",{key:"7e1ef884a203ae17e1ad417ac688f59b9acb6932",class:`card ${a?"card--with-image":""} ${this.darkOverlay?"card--dark-overlay":""} ${this.backgroundColor?"card--custom-bg":""}`,style:o},a&&c("div",{key:"4fb3cea588d42345690df68738b725a6debacc55",class:"card__background"},c("img",{key:"0dde30e250c7cb117993e3ccbeab8f108278ae89",src:this.backgroundImage,alt:"",class:"card__background-image"})),c("div",{key:"f604c04997720f4804d148f103f9c4a69b1ec0aa",class:`card__content ${a?"card__content--overlay":""}`},c("slot",{key:"a7668f98c4c8fd10b5581eac69f2a31aecbc3732"}))))}};d.style=o;export{d as af_card};
|
|
2
|
+
//# sourceMappingURL=p-e2c40f4e.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["registerInstance","h","Host","afCardCss","AfCard","constructor","hostRef","this","darkOverlay","render","hasBackgroundImage","backgroundImage","cardStyle","backgroundColor","undefined","key","class","style","src","alt"],"sources":["0"],"mappings":"YAAcA,OAAkBC,OAAQC,MAAY,kBAEpD,MAAMC,EAAY,
|
|
1
|
+
{"version":3,"names":["registerInstance","h","Host","afCardCss","AfCard","constructor","hostRef","this","darkOverlay","render","hasBackgroundImage","backgroundImage","cardStyle","backgroundColor","undefined","key","class","style","src","alt"],"sources":["0"],"mappings":"YAAcA,OAAkBC,OAAQC,MAAY,kBAEpD,MAAMC,EAAY,shEAElB,MAAMC,EAAS,MACX,WAAAC,CAAYC,GACRN,EAAiBO,KAAMD,GAIvBC,KAAKC,YAAc,KACvB,CACA,MAAAC,GACI,MAAMC,IAAuBH,KAAKI,gBAClC,MAAMC,EAAYL,KAAKM,gBAAkB,CAAEA,gBAAiBN,KAAKM,iBAAoBC,UACrF,OAAQb,EAAEC,EAAM,CAAEa,IAAK,4CAA8Cd,EAAE,MAAO,CAAEc,IAAK,2CAA4CC,MAAO,QAAQN,EAAqB,mBAAqB,MAAMH,KAAKC,YAAc,qBAAuB,MAAMD,KAAKM,gBAAkB,kBAAoB,KAAMI,MAAOL,GAAaF,GAAuBT,EAAE,MAAO,CAAEc,IAAK,2CAA4CC,MAAO,oBAAsBf,EAAE,MAAO,CAAEc,IAAK,2CAA4CG,IAAKX,KAAKI,gBAAiBQ,IAAK,GAAIH,MAAO,4BAA+Bf,EAAE,MAAO,CAAEc,IAAK,2CAA4CC,MAAO,iBAAiBN,EAAqB,yBAA2B,MAAQT,EAAE,OAAQ,CAAEc,IAAK,+CAC5sB,GAEJX,EAAOa,MAAQd,SAENC","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as e,h as a,H as i}from"./p-Agei6ZJQ.js";const l=":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}}";const d=class{constructor(a){e(this,a);this.showHeadline=false;this.headlineText="Trusted by some of the world's leading organisations"}render(){return a(i,{key:"6ee5a4e472cb082ac68cb58c00bf5b1d686dd489"},a("div",{key:"dc030f69bfbb55ce999f0b2f1d8a47095d75ac59",class:"client-carousel"},this.showHeadline&&a("div",{key:"d8d7fdbd47e65cc5a3a8e10d88f7425f91d0459e",class:"headline"},a("slot",{key:"3773f567bfd3de6058cd1088ba2c781cf510e63b",name:"headline"},a("h3",{key:"fdcab6ce99a2c477bf1e336f13f7994637b8436d"},this.headlineText))),a("div",{key:"30429a27f88e490051a4623195421e00a34f4db4",class:"carousel-container"},a("div",{key:"de187b8265b84cb3d8f22540ec283bb8b3603aa8",class:"carousel-row scroll-left"},a("div",{key:"d2da7c79388f53425cba20429204fea148030aa5",class:"logo-track"},a("slot",{key:"b4ddb6250d5893290ed40a2c765d0f0bf0a378e6",name:"row-1"}),a("slot",{key:"ccb91ed748f2e51a1d0f2d63d676f7e2558ec2ef",name:"row-1"}))),a("div",{key:"f6a99654384b070bf91e9ea1ebc57de304f2671f",class:"carousel-row scroll-right"},a("div",{key:"8e31a13039f2e2df33eb7ec67f738d71d49d931f",class:"logo-track"},a("slot",{key:"2ffeff2da8ddd4c0faefaf59fc1a45972de26943",name:"row-2"}),a("slot",{key:"2121dc84af370a41290a432e50f3c10f6b3d4b4c",name:"row-2"}))))))}};d.style=l;export{d as af_client_carousel};
|
|
2
|
+
//# sourceMappingURL=p-e56182e4.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["registerInstance","h","Host","afClientCarouselCss","AfClientCarousel","constructor","hostRef","this","showHeadline","headlineText","render","key","class","name","style"],"sources":["0"],"mappings":"YAAcA,OAAkBC,OAAQC,MAAY,kBAEpD,MAAMC,EAAsB,iuCAE5B,MAAMC,EAAmB,MACrB,WAAAC,CAAYC,GACRN,EAAiBO,KAAMD,GAEvBC,KAAKC,aAAe,MAEpBD,KAAKE,aAAe,sDACxB,CACA,MAAAC,GACI,OAAQT,EAAEC,EAAM,CAAES,IAAK,4CAA8CV,EAAE,MAAO,CAAEU,IAAK,2CAA4CC,MAAO,mBAAqBL,KAAKC,cAAiBP,EAAE,MAAO,CAAEU,IAAK,2CAA4CC,MAAO,YAAcX,EAAE,OAAQ,CAAEU,IAAK,2CAA4CE,KAAM,YAAcZ,EAAE,KAAM,CAAEU,IAAK,4CAA8CJ,KAAKE,gBAAkBR,EAAE,MAAO,CAAEU,IAAK,2CAA4CC,MAAO,sBAAwBX,EAAE,MAAO,CAAEU,IAAK,2CAA4CC,MAAO,4BAA8BX,EAAE,MAAO,CAAEU,IAAK,2CAA4CC,MAAO,cAAgBX,EAAE,OAAQ,CAAEU,IAAK,2CAA4CE,KAAM,UAAYZ,EAAE,OAAQ,CAAEU,IAAK,2CAA4CE,KAAM,YAAcZ,EAAE,MAAO,CAAEU,IAAK,2CAA4CC,MAAO,6BAA+BX,EAAE,MAAO,CAAEU,IAAK,2CAA4CC,MAAO,cAAgBX,EAAE,OAAQ,CAAEU,IAAK,2CAA4CE,KAAM,UAAYZ,EAAE,OAAQ,CAAEU,IAAK,2CAA4CE,KAAM,cACnqC,GAEJT,EAAiBU,MAAQX,SAEhBC","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as e,h as
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as e,h as i,H as t}from"./p-Agei6ZJQ.js";const a=".sc-af-testimonial-h{display:block;width:100%}.testimonial-card.sc-af-testimonial{background:var(--colour-background-level-1, #e8eeed);border-radius:var(--border-radius-card-level-1, 32px);overflow:hidden;display:flex;height:544px;box-sizing:border-box}.testimonial-image.sc-af-testimonial{position:relative;width:519px;height:100%;background:#000000;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}.testimonial-bg-image.sc-af-testimonial{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0.7}.testimonial-logo.sc-af-testimonial{position:relative;z-index:1;padding:0 108px;max-width:100%}.testimonial-logo.sc-af-testimonial img.sc-af-testimonial{width:100%;height:auto;display:block}.testimonial-content.sc-af-testimonial{flex:1;display:flex;flex-direction:column;gap:32px;padding:48px;border:1px solid rgba(255, 255, 255, 0.08);border-left:1px solid rgba(255, 255, 255, 0.08);box-sizing:border-box}.testimonial-quote-section.sc-af-testimonial{flex:1;display:flex;flex-direction:column;gap:12px}.testimonial-quote-icon.sc-af-testimonial{width:48px;height:48px;color:var(--colour-brand-inkwell, #14343b);flex-shrink:0}.testimonial-text.sc-af-testimonial{font-family:'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;font-size:22px;font-weight:400;line-height:1.4;color:var(--colour-typography-body-default, #2b484f);margin:0;max-height:155px;overflow:hidden;text-overflow:ellipsis}.testimonial-attribution.sc-af-testimonial{font-family:'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;font-size:22px;font-weight:400;line-height:1.4;color:var(--colour-typography-body-dark, #14343b);margin:0}.testimonial-stats.sc-af-testimonial{display:flex;gap:32px;width:100%}.testimonial-footer.sc-af-testimonial{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--colour-background-border-default, #d1ddda);padding-top:32px}.testimonial-nav.sc-af-testimonial{display:flex;gap:12px}.testimonial-cta.sc-af-testimonial{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border:1px solid var(--colour-brand-inkwell, #14343b);border-radius:9999px;font-family:'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;font-size:17px;font-weight:500;line-height:20px;color:var(--colour-brand-inkwell, #14343b);text-decoration:none;cursor:pointer;transition:all 0.2s ease}.testimonial-cta.sc-af-testimonial:hover{background:var(--colour-background-level-1, #e8eeed);transform:translateY(-1px)}.testimonial-cta.sc-af-testimonial svg.sc-af-testimonial{width:24px;height:24px}";const o=class{constructor(i){e(this,i)}render(){return i(t,{key:"b4a23c841092c119b7e8abd4249b75985f8edf95"},i("div",{key:"65fec4f695a746ef51d4539b33dc166d4f1cb95c",class:"testimonial-card"},i("div",{key:"ad5ec6edb4fd3577f14d9cbcce925c1c68d6262e",class:"testimonial-image"},this.backgroundImage&&i("img",{key:"4e51da94bd106ae50c63186c7cbedee3e86d341e",src:this.backgroundImage,alt:"",class:"testimonial-bg-image"}),this.logoImage&&i("div",{key:"68eea0c228eb7d3e92a3cbab11ee4d1b3d9e590e",class:"testimonial-logo"},i("img",{key:"5f2225a849003d6b4b5ccc08073da121e3d27cf4",src:this.logoImage,alt:"Company logo"}))),i("div",{key:"9e6dbb02f4d87829af74c66029bd93ce3f3c65dd",class:"testimonial-content"},i("div",{key:"efd25f8dc722d79006835406a972da0d5fd7f77f",class:"testimonial-quote-section"},i("div",{key:"46064d44eeed1712130c6c24007f5481b9cc3cf7",class:"testimonial-quote-icon"},i("slot",{key:"e1389d94a5cbb1181862963fd799d7c14b2d3ee5",name:"quote-icon"},i("svg",{key:"6a935e48920b1964036f02fbc830b1319a20f057",width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg"},i("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"})))),i("p",{key:"db71848c9ae10a2a24cdcb6797f8f2b4fbf6cea9",class:"testimonial-text"},this.quote),i("p",{key:"ad7c4fd0a91a1c2ea42d4abcc3ab949e51c3d313",class:"testimonial-attribution"},this.attribution)),i("div",{key:"8042208ced311c39c8d91968ac1bc37c76971ec1",class:"testimonial-stats"},i("slot",{key:"b5c40fdb83b6776b2de0a57e37045a1fde50e78f",name:"stats"})),i("div",{key:"1b19fc1264136cf90cb0c32841678129f5dd711d",class:"testimonial-footer"},i("div",{key:"77058648a8e25ed63b622c7bbf873c299e39e42d",class:"testimonial-nav"},i("slot",{key:"9231316a8dd17ae30c754e1ff1ba9ea70c327c82",name:"navigation"})),this.readMoreLink&&i("a",{key:"01072189417f44da780b5c5a8849e9e66a2a9b0d",href:this.readMoreLink,class:"testimonial-cta"},i("span",{key:"8c5008a42d4c4160bb4950f562872a67ac26c15c"},"Read full story"),i("svg",{key:"881176b723a0f4c3d941d2be0f8983ddc0468ee6",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none"},i("path",{key:"d8fd8469aa2c45286891751b269c692ee90426c0",d:"M5 12H19M19 12L12 5M19 12L12 19",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"})))))))}};o.style=a;export{o as af_testimonial};
|
|
2
|
+
//# sourceMappingURL=p-f6f2f1c4.entry.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-D_ItFcqt.js');
|
|
4
4
|
|
|
5
5
|
const afAspectRatioCss = ":host{display:block;width:100%}.aspect-ratio-container{width:100%;position:relative;overflow:hidden}.aspect-ratio-container ::slotted(*){width:100%;height:100%;object-fit:cover}";
|
|
6
6
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-D_ItFcqt.js');
|
|
4
4
|
|
|
5
5
|
const afButtonGroupCss = ":host{display:inline-block}.button-group{display:inline-flex;align-items:center;box-sizing:border-box}.direction-horizontal{flex-direction:row}.direction-vertical{flex-direction:column}::slotted(*){flex-shrink:0}";
|
|
6
6
|
|
|
@@ -21,7 +21,7 @@ const AfButtonGroup = class {
|
|
|
21
21
|
'button-group': true,
|
|
22
22
|
[`direction-${this.direction}`]: true
|
|
23
23
|
};
|
|
24
|
-
return (index.h(index.Host, { key: '
|
|
24
|
+
return (index.h(index.Host, { key: '5f8f8c8acd7b401c9e217a05200dfca367691723' }, index.h("div", { key: 'b4d14e81177523a584a961e0f20b6e7be101a8e3', class: classes, style: { gap: this.gap } }, index.h("slot", { key: '68cb3173bcf193eb877d66b1588500882aa52a63' }))));
|
|
25
25
|
}
|
|
26
26
|
};
|
|
27
27
|
AfButtonGroup.style = afButtonGroupCss;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-D_ItFcqt.js');
|
|
4
4
|
|
|
5
5
|
const afButtonCss = ":host{display:inline-block}.button{display:inline-flex;align-items:center;justify-content:center;gap:0;border-radius:9999px;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:500;text-decoration:none;cursor:pointer;transition:all 0.2s ease;border:1px solid transparent;box-sizing:border-box;white-space:nowrap}.size-default{padding:12px 24px;font-size:17px;line-height:20px}.size-small{padding:8px 16px;font-size:14px;line-height:16px}.icon-left:empty,.icon-right:empty{display:none}.icon-left,.icon-right{display:flex;align-items:center;justify-content:center;flex-shrink:0}.size-default .icon-left,.size-default .icon-right{width:24px;height:24px}.size-small .icon-left,.size-small .icon-right{width:20px;height:20px}.label{flex:0 1 auto;display:flex;align-items:center;justify-content:center;height:24px}.size-default .label{padding:0 12px;height:24px}.size-small .label{padding:0 8px;height:20px}.variant-primary{background:var(--colour-brand-ice, #A6FFFB);border-color:var(--colour-brand-inkwell, #14343B);color:var(--colour-brand-inkwell, #14343B)}.variant-primary:hover:not(.disabled){background:#8FEBE3;transform:translateY(-1px);box-shadow:0 2px 8px rgba(20, 52, 59, 0.15)}.variant-primary:active:not(.disabled){background:#7FE2D4;transform:translateY(0)}.variant-secondary{background:var(--colour-brand-white, #FFFFFF);border-color:var(--colour-brand-inkwell, #14343B);color:var(--colour-brand-inkwell, #14343B)}.variant-secondary:hover:not(.disabled){background:#F6FAF9;transform:translateY(-1px);box-shadow:0 2px 8px rgba(20, 52, 59, 0.15)}.variant-secondary:active:not(.disabled){background:#E8F1EF;transform:translateY(0)}.variant-outline{background:transparent;border-color:var(--colour-brand-inkwell, #14343B);color:var(--colour-brand-inkwell, #14343B)}.variant-outline:hover:not(.disabled){background:rgba(20, 52, 59, 0.04);transform:translateY(-1px)}.variant-outline:active:not(.disabled){background:rgba(20, 52, 59, 0.08);transform:translateY(0)}.variant-ghost{background:transparent;border-color:transparent;color:var(--colour-brand-inkwell, #14343B);padding-left:0;padding-right:0}.variant-ghost:hover:not(.disabled){text-decoration:underline}.variant-ghost:active:not(.disabled){opacity:0.7}.disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}button.button{background:none;border:none;font:inherit;color:inherit;cursor:pointer}button.button.variant-primary{background:var(--colour-brand-ice, #A6FFFB);border:1px solid var(--colour-brand-inkwell, #14343B)}button.button.variant-secondary{background:var(--colour-brand-white, #FFFFFF);border:1px solid var(--colour-brand-inkwell, #14343B)}button.button.variant-outline{background:transparent;border:1px solid var(--colour-brand-inkwell, #14343B)}button.button.variant-ghost{background:transparent;border:1px solid transparent}";
|
|
6
6
|
|
|
@@ -23,13 +23,18 @@ const AfButton = class {
|
|
|
23
23
|
* Button type (when not using href)
|
|
24
24
|
*/
|
|
25
25
|
this.type = 'button';
|
|
26
|
+
/**
|
|
27
|
+
* Use on dark backgrounds for better contrast
|
|
28
|
+
*/
|
|
29
|
+
this.darkBackground = false;
|
|
26
30
|
}
|
|
27
31
|
render() {
|
|
28
32
|
const classes = {
|
|
29
33
|
'button': true,
|
|
30
34
|
[`variant-${this.variant}`]: true,
|
|
31
35
|
[`size-${this.size}`]: true,
|
|
32
|
-
'disabled': this.disabled
|
|
36
|
+
'disabled': this.disabled,
|
|
37
|
+
'on-dark': this.darkBackground
|
|
33
38
|
};
|
|
34
39
|
const content = [
|
|
35
40
|
index.h("span", { class: "icon-left" }, index.h("slot", { name: "icon-left" })),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"af-button.entry.cjs.js","sources":["src/components/af-button/af-button.css?tag=af-button&encapsulation=shadow","src/components/af-button/af-button.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\n.button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0;\n border-radius: 9999px;\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: 500;\n text-decoration: none;\n cursor: pointer;\n transition: all 0.2s ease;\n border: 1px solid transparent;\n box-sizing: border-box;\n white-space: nowrap;\n}\n\n/* Size variants */\n.size-default {\n padding: 12px 24px;\n font-size: 17px;\n line-height: 20px;\n}\n\n.size-small {\n padding: 8px 16px;\n font-size: 14px;\n line-height: 16px;\n}\n\n/* Icon slots */\n.icon-left:empty,\n.icon-right:empty {\n display: none;\n}\n\n.icon-left,\n.icon-right {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.size-default .icon-left,\n.size-default .icon-right {\n width: 24px;\n height: 24px;\n}\n\n.size-small .icon-left,\n.size-small .icon-right {\n width: 20px;\n height: 20px;\n}\n\n/* Label has additional padding on each side */\n.label {\n flex: 0 1 auto;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 24px;\n}\n\n.size-default .label {\n padding: 0 12px;\n height: 24px;\n}\n\n.size-small .label {\n padding: 0 8px;\n height: 20px;\n}\n\n/* Primary variant (ice) */\n.variant-primary {\n background: var(--colour-brand-ice, #A6FFFB);\n border-color: var(--colour-brand-inkwell, #14343B);\n color: var(--colour-brand-inkwell, #14343B);\n}\n\n.variant-primary:hover:not(.disabled) {\n background: #8FEBE3;\n transform: translateY(-1px);\n box-shadow: 0 2px 8px rgba(20, 52, 59, 0.15);\n}\n\n.variant-primary:active:not(.disabled) {\n background: #7FE2D4;\n transform: translateY(0);\n}\n\n/* Secondary variant (white) */\n.variant-secondary {\n background: var(--colour-brand-white, #FFFFFF);\n border-color: var(--colour-brand-inkwell, #14343B);\n color: var(--colour-brand-inkwell, #14343B);\n}\n\n.variant-secondary:hover:not(.disabled) {\n background: #F6FAF9;\n transform: translateY(-1px);\n box-shadow: 0 2px 8px rgba(20, 52, 59, 0.15);\n}\n\n.variant-secondary:active:not(.disabled) {\n background: #E8F1EF;\n transform: translateY(0);\n}\n\n/* Outline variant */\n.variant-outline {\n background: transparent;\n border-color: var(--colour-brand-inkwell, #14343B);\n color: var(--colour-brand-inkwell, #14343B);\n}\n\n.variant-outline:hover:not(.disabled) {\n background: rgba(20, 52, 59, 0.04);\n transform: translateY(-1px);\n}\n\n.variant-outline:active:not(.disabled) {\n background: rgba(20, 52, 59, 0.08);\n transform: translateY(0);\n}\n\n/* Ghost variant (text only) */\n.variant-ghost {\n background: transparent;\n border-color: transparent;\n color: var(--colour-brand-inkwell, #14343B);\n padding-left: 0;\n padding-right: 0;\n}\n\n.variant-ghost:hover:not(.disabled) {\n text-decoration: underline;\n}\n\n.variant-ghost:active:not(.disabled) {\n opacity: 0.7;\n}\n\n/* Disabled state */\n.disabled {\n opacity: 0.4;\n cursor: not-allowed;\n pointer-events: none;\n}\n\n/* Remove default button styles */\nbutton.button {\n background: none;\n border: none;\n font: inherit;\n color: inherit;\n cursor: pointer;\n}\n\nbutton.button.variant-primary {\n background: var(--colour-brand-ice, #A6FFFB);\n border: 1px solid var(--colour-brand-inkwell, #14343B);\n}\n\nbutton.button.variant-secondary {\n background: var(--colour-brand-white, #FFFFFF);\n border: 1px solid var(--colour-brand-inkwell, #14343B);\n}\n\nbutton.button.variant-outline {\n background: transparent;\n border: 1px solid var(--colour-brand-inkwell, #14343B);\n}\n\nbutton.button.variant-ghost {\n background: transparent;\n border: 1px solid transparent;\n}\n","import { Component, h, Prop, Host } from '@stencil/core';\n\n@Component({\n tag: 'af-button',\n styleUrl: 'af-button.css',\n shadow: true\n})\nexport class AfButton {\n /**\n * The visual variant of the button\n */\n @Prop() variant: 'primary' | 'secondary' | 'outline' | 'ghost' = 'primary';\n\n /**\n * The size of the button\n */\n @Prop() size: 'default' | 'small' = 'default';\n\n /**\n * Whether the button is disabled\n */\n @Prop() disabled: boolean = false;\n\n /**\n * Optional href to render as a link\n */\n @Prop() href?: string;\n\n /**\n * Button type (when not using href)\n */\n @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n render() {\n const classes = {\n 'button': true,\n [`variant-${this.variant}`]: true,\n [`size-${this.size}`]: true,\n 'disabled': this.disabled\n };\n\n const content = [\n <span class=\"icon-left\">\n <slot name=\"icon-left\"></slot>\n </span>,\n <span class=\"label\">\n <slot></slot>\n </span>,\n <span class=\"icon-right\">\n <slot name=\"icon-right\"></slot>\n </span>\n ];\n\n if (this.href && !this.disabled) {\n return (\n <Host>\n <a href={this.href} class={classes}>\n {content}\n </a>\n </Host>\n );\n }\n\n return (\n <Host>\n <button type={this.type} disabled={this.disabled} class={classes}>\n {content}\n </button>\n </Host>\n );\n }\n}\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,WAAW,GAAG,ixFAAixF;;MCOxxF,QAAQ,GAAA,MAAA;AALrB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAkD,SAAS;AAE1E;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAwB,SAAS;AAE7C;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAOjC;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAkC,QAAQ;
|
|
1
|
+
{"version":3,"file":"af-button.entry.cjs.js","sources":["src/components/af-button/af-button.css?tag=af-button&encapsulation=shadow","src/components/af-button/af-button.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\n.button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0;\n border-radius: 9999px;\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: 500;\n text-decoration: none;\n cursor: pointer;\n transition: all 0.2s ease;\n border: 1px solid transparent;\n box-sizing: border-box;\n white-space: nowrap;\n}\n\n/* Size variants */\n.size-default {\n padding: 12px 24px;\n font-size: 17px;\n line-height: 20px;\n}\n\n.size-small {\n padding: 8px 16px;\n font-size: 14px;\n line-height: 16px;\n}\n\n/* Icon slots */\n.icon-left:empty,\n.icon-right:empty {\n display: none;\n}\n\n.icon-left,\n.icon-right {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.size-default .icon-left,\n.size-default .icon-right {\n width: 24px;\n height: 24px;\n}\n\n.size-small .icon-left,\n.size-small .icon-right {\n width: 20px;\n height: 20px;\n}\n\n/* Label has additional padding on each side */\n.label {\n flex: 0 1 auto;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 24px;\n}\n\n.size-default .label {\n padding: 0 12px;\n height: 24px;\n}\n\n.size-small .label {\n padding: 0 8px;\n height: 20px;\n}\n\n/* Primary variant (ice) */\n.variant-primary {\n background: var(--colour-brand-ice, #A6FFFB);\n border-color: var(--colour-brand-inkwell, #14343B);\n color: var(--colour-brand-inkwell, #14343B);\n}\n\n.variant-primary:hover:not(.disabled) {\n background: #8FEBE3;\n transform: translateY(-1px);\n box-shadow: 0 2px 8px rgba(20, 52, 59, 0.15);\n}\n\n.variant-primary:active:not(.disabled) {\n background: #7FE2D4;\n transform: translateY(0);\n}\n\n/* Secondary variant (white) */\n.variant-secondary {\n background: var(--colour-brand-white, #FFFFFF);\n border-color: var(--colour-brand-inkwell, #14343B);\n color: var(--colour-brand-inkwell, #14343B);\n}\n\n.variant-secondary:hover:not(.disabled) {\n background: #F6FAF9;\n transform: translateY(-1px);\n box-shadow: 0 2px 8px rgba(20, 52, 59, 0.15);\n}\n\n.variant-secondary:active:not(.disabled) {\n background: #E8F1EF;\n transform: translateY(0);\n}\n\n/* Outline variant */\n.variant-outline {\n background: transparent;\n border-color: var(--colour-brand-inkwell, #14343B);\n color: var(--colour-brand-inkwell, #14343B);\n}\n\n.variant-outline:hover:not(.disabled) {\n background: rgba(20, 52, 59, 0.04);\n transform: translateY(-1px);\n}\n\n.variant-outline:active:not(.disabled) {\n background: rgba(20, 52, 59, 0.08);\n transform: translateY(0);\n}\n\n/* Ghost variant (text only) */\n.variant-ghost {\n background: transparent;\n border-color: transparent;\n color: var(--colour-brand-inkwell, #14343B);\n padding-left: 0;\n padding-right: 0;\n}\n\n.variant-ghost:hover:not(.disabled) {\n text-decoration: underline;\n}\n\n.variant-ghost:active:not(.disabled) {\n opacity: 0.7;\n}\n\n/* Disabled state */\n.disabled {\n opacity: 0.4;\n cursor: not-allowed;\n pointer-events: none;\n}\n\n/* Remove default button styles */\nbutton.button {\n background: none;\n border: none;\n font: inherit;\n color: inherit;\n cursor: pointer;\n}\n\nbutton.button.variant-primary {\n background: var(--colour-brand-ice, #A6FFFB);\n border: 1px solid var(--colour-brand-inkwell, #14343B);\n}\n\nbutton.button.variant-secondary {\n background: var(--colour-brand-white, #FFFFFF);\n border: 1px solid var(--colour-brand-inkwell, #14343B);\n}\n\nbutton.button.variant-outline {\n background: transparent;\n border: 1px solid var(--colour-brand-inkwell, #14343B);\n}\n\nbutton.button.variant-ghost {\n background: transparent;\n border: 1px solid transparent;\n}\n","import { Component, h, Prop, Host } from '@stencil/core';\n\n@Component({\n tag: 'af-button',\n styleUrl: 'af-button.css',\n shadow: true\n})\nexport class AfButton {\n /**\n * The visual variant of the button\n */\n @Prop() variant: 'primary' | 'secondary' | 'outline' | 'ghost' = 'primary';\n\n /**\n * The size of the button\n */\n @Prop() size: 'default' | 'small' = 'default';\n\n /**\n * Whether the button is disabled\n */\n @Prop() disabled: boolean = false;\n\n /**\n * Optional href to render as a link\n */\n @Prop() href?: string;\n\n /**\n * Button type (when not using href)\n */\n @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n \n /**\n * Use on dark backgrounds for better contrast\n */\n @Prop() darkBackground: boolean = false;\n\n render() {\n const classes = {\n 'button': true,\n [`variant-${this.variant}`]: true,\n [`size-${this.size}`]: true,\n 'disabled': this.disabled,\n 'on-dark': this.darkBackground\n };\n\n const content = [\n <span class=\"icon-left\">\n <slot name=\"icon-left\"></slot>\n </span>,\n <span class=\"label\">\n <slot></slot>\n </span>,\n <span class=\"icon-right\">\n <slot name=\"icon-right\"></slot>\n </span>\n ];\n\n if (this.href && !this.disabled) {\n return (\n <Host>\n <a href={this.href} class={classes}>\n {content}\n </a>\n </Host>\n );\n }\n\n return (\n <Host>\n <button type={this.type} disabled={this.disabled} class={classes}>\n {content}\n </button>\n </Host>\n );\n }\n}\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,WAAW,GAAG,ixFAAixF;;MCOxxF,QAAQ,GAAA,MAAA;AALrB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAkD,SAAS;AAE1E;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAwB,SAAS;AAE7C;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAOjC;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAkC,QAAQ;AAEtD;;AAEG;AACK,QAAA,IAAc,CAAA,cAAA,GAAY,KAAK;AAyCxC;IAvCC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,QAAQ,EAAE,IAAI;AACd,YAAA,CAAC,WAAW,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;AACjC,YAAA,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;YAC3B,UAAU,EAAE,IAAI,CAAC,QAAQ;YACzB,SAAS,EAAE,IAAI,CAAC;SACjB;AAED,QAAA,MAAM,OAAO,GAAG;AACd,YAAAA,OAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,WAAW,EAAA,EACrBA,OAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,WAAW,EAAA,CAAQ,CACzB;AACP,YAAAA,OAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,OAAO,EAAA,EACjBA,OAAA,CAAA,MAAA,EAAA,IAAA,CAAa,CACR;AACP,YAAAA,OAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EACtBA,OAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,YAAY,EAAA,CAAQ;SAElC;QAED,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAC/B,QACEA,QAACC,UAAI,EAAA,IAAA,EACHD,OAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,OAAO,EAC/B,EAAA,OAAO,CACN,CACC;;AAIX,QAAA,QACEA,QAACC,UAAI,EAAA,IAAA,EACHD,OAAQ,CAAA,QAAA,EAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAA,EAC7D,OAAO,CACD,CACJ;;;;;;;"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-D_ItFcqt.js');
|
|
4
4
|
|
|
5
|
-
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) .
|
|
5
|
+
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}";
|
|
6
6
|
|
|
7
7
|
const AfCard = class {
|
|
8
8
|
constructor(hostRef) {
|
|
@@ -15,7 +15,7 @@ const AfCard = class {
|
|
|
15
15
|
render() {
|
|
16
16
|
const hasBackgroundImage = !!this.backgroundImage;
|
|
17
17
|
const cardStyle = this.backgroundColor ? { backgroundColor: this.backgroundColor } : undefined;
|
|
18
|
-
return (index.h(index.Host, { key: '
|
|
18
|
+
return (index.h(index.Host, { key: '2c3c0b6d1889074ae78b2b1f9646dc23829a0e9a' }, index.h("div", { key: '7e1ef884a203ae17e1ad417ac688f59b9acb6932', class: `card ${hasBackgroundImage ? 'card--with-image' : ''} ${this.darkOverlay ? 'card--dark-overlay' : ''} ${this.backgroundColor ? 'card--custom-bg' : ''}`, style: cardStyle }, hasBackgroundImage && (index.h("div", { key: '4fb3cea588d42345690df68738b725a6debacc55', class: "card__background" }, index.h("img", { key: '0dde30e250c7cb117993e3ccbeab8f108278ae89', src: this.backgroundImage, alt: "", class: "card__background-image" }))), index.h("div", { key: 'f604c04997720f4804d148f103f9c4a69b1ec0aa', class: `card__content ${hasBackgroundImage ? 'card__content--overlay' : ''}` }, index.h("slot", { key: 'a7668f98c4c8fd10b5581eac69f2a31aecbc3732' })))));
|
|
19
19
|
}
|
|
20
20
|
};
|
|
21
21
|
AfCard.style = afCardCss;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"af-card.entry.cjs.js","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) .
|
|
1
|
+
{"version":3,"file":"af-card.entry.cjs.js","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"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,SAAS,GAAG,qhEAAqhE;;MCQ1hE,MAAM,GAAA,MAAA;AANnB,IAAA,WAAA,CAAA,OAAA,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,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAA,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,KACjBA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC3BA,OAAA,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,EACDA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAiB,cAAA,EAAA,kBAAkB,GAAG,wBAAwB,GAAG,EAAE,CAAE,CAAA,EAAA,EAC/EA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACF,CACD;;;;;;;"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var index = require('./index-D_ItFcqt.js');
|
|
4
|
+
|
|
5
|
+
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}}";
|
|
6
|
+
|
|
7
|
+
const AfClientCarousel = class {
|
|
8
|
+
constructor(hostRef) {
|
|
9
|
+
index.registerInstance(this, hostRef);
|
|
10
|
+
/** Show headline above carousel */
|
|
11
|
+
this.showHeadline = false;
|
|
12
|
+
/** Headline text */
|
|
13
|
+
this.headlineText = "Trusted by some of the world's leading organisations";
|
|
14
|
+
}
|
|
15
|
+
render() {
|
|
16
|
+
return (index.h(index.Host, { key: '6ee5a4e472cb082ac68cb58c00bf5b1d686dd489' }, index.h("div", { key: 'dc030f69bfbb55ce999f0b2f1d8a47095d75ac59', class: "client-carousel" }, this.showHeadline && (index.h("div", { key: 'd8d7fdbd47e65cc5a3a8e10d88f7425f91d0459e', class: "headline" }, index.h("slot", { key: '3773f567bfd3de6058cd1088ba2c781cf510e63b', name: "headline" }, index.h("h3", { key: 'fdcab6ce99a2c477bf1e336f13f7994637b8436d' }, this.headlineText)))), index.h("div", { key: '30429a27f88e490051a4623195421e00a34f4db4', class: "carousel-container" }, index.h("div", { key: 'de187b8265b84cb3d8f22540ec283bb8b3603aa8', class: "carousel-row scroll-left" }, index.h("div", { key: 'd2da7c79388f53425cba20429204fea148030aa5', class: "logo-track" }, index.h("slot", { key: 'b4ddb6250d5893290ed40a2c765d0f0bf0a378e6', name: "row-1" }), index.h("slot", { key: 'ccb91ed748f2e51a1d0f2d63d676f7e2558ec2ef', name: "row-1" }))), index.h("div", { key: 'f6a99654384b070bf91e9ea1ebc57de304f2671f', class: "carousel-row scroll-right" }, index.h("div", { key: '8e31a13039f2e2df33eb7ec67f738d71d49d931f', class: "logo-track" }, index.h("slot", { key: '2ffeff2da8ddd4c0faefaf59fc1a45972de26943', name: "row-2" }), index.h("slot", { key: '2121dc84af370a41290a432e50f3c10f6b3d4b4c', name: "row-2" })))))));
|
|
17
|
+
}
|
|
18
|
+
};
|
|
19
|
+
AfClientCarousel.style = afClientCarouselCss;
|
|
20
|
+
|
|
21
|
+
exports.af_client_carousel = AfClientCarousel;
|
|
22
|
+
//# sourceMappingURL=af-client-carousel.entry.cjs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"af-client-carousel.entry.cjs.js","sources":["src/components/af-client-carousel/af-client-carousel.css?tag=af-client-carousel&encapsulation=shadow","src/components/af-client-carousel/af-client-carousel.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n background-color: var(--colour-brand-inkwell, #14343B);\n}\n\n.client-carousel {\n padding: 48px 80px;\n display: flex;\n flex-direction: column;\n gap: 40px;\n align-items: center;\n}\n\n.headline {\n text-align: center;\n padding: 24px 220px;\n}\n\n.headline h3 {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: 500;\n font-size: 34px;\n line-height: 1;\n letter-spacing: -0.68px;\n color: var(--colour-brand-mist-green, #C6D5D1);\n margin: 0;\n}\n\n.carousel-container {\n display: flex;\n flex-direction: column;\n gap: 16px;\n width: 100%;\n overflow: hidden;\n}\n\n.carousel-row {\n display: flex;\n width: 100%;\n overflow: hidden;\n position: relative;\n}\n\n.logo-track {\n display: flex;\n gap: 16px;\n animation-timing-function: linear;\n animation-iteration-count: infinite;\n}\n\n/* Scroll left animation */\n.scroll-left .logo-track {\n animation-name: scroll-left;\n animation-duration: 40s;\n}\n\n/* Scroll right animation */\n.scroll-right .logo-track {\n animation-name: scroll-right;\n animation-duration: 40s;\n}\n\n@keyframes scroll-left {\n 0% {\n transform: translateX(0);\n }\n 100% {\n transform: translateX(-50%);\n }\n}\n\n@keyframes scroll-right {\n 0% {\n transform: translateX(-50%);\n }\n 100% {\n transform: translateX(0);\n }\n}\n\n/* Ensure slotted logos maintain their styling */\n::slotted(*) {\n flex-shrink: 0;\n}\n\n/* Tablet adjustments */\n@media (max-width: 1024px) {\n .client-carousel {\n padding: 32px 40px;\n }\n \n .headline {\n padding: 16px 40px;\n }\n}\n\n/* Mobile adjustments */\n@media (max-width: 767px) {\n .client-carousel {\n padding: 24px 16px;\n }\n \n .headline {\n padding: 16px;\n }\n \n .headline h3 {\n font-size: 25px;\n }\n}\n\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * Infinite scrolling carousel for client logos\n */\n@Component({\n tag: 'af-client-carousel',\n styleUrl: 'af-client-carousel.css',\n shadow: true,\n})\nexport class AfClientCarousel {\n /** Show headline above carousel */\n @Prop() showHeadline: boolean = false;\n \n /** Headline text */\n @Prop() headlineText: string = \"Trusted by some of the world's leading organisations\";\n\n render() {\n return (\n <Host>\n <div class=\"client-carousel\">\n {this.showHeadline && (\n <div class=\"headline\">\n <slot name=\"headline\">\n <h3>{this.headlineText}</h3>\n </slot>\n </div>\n )}\n \n <div class=\"carousel-container\">\n {/* Top row - scrolls left */}\n <div class=\"carousel-row scroll-left\">\n <div class=\"logo-track\">\n <slot name=\"row-1\"></slot>\n <slot name=\"row-1\"></slot>\n </div>\n </div>\n \n {/* Bottom row - scrolls right */}\n <div class=\"carousel-row scroll-right\">\n <div class=\"logo-track\">\n <slot name=\"row-2\"></slot>\n <slot name=\"row-2\"></slot>\n </div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,mBAAmB,GAAG,guCAAguC;;MCU/uC,gBAAgB,GAAA,MAAA;AAL7B,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAOU,QAAA,IAAY,CAAA,YAAA,GAAY,KAAK;;AAG7B,QAAA,IAAY,CAAA,YAAA,GAAW,sDAAsD;AAmCtF;IAjCC,MAAM,GAAA;QACJ,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EACzB,IAAI,CAAC,YAAY,KAChBA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,UAAU,EAAA,EACnBA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,UAAU,EAAA,EACnBA,OAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAK,IAAI,CAAC,YAAY,CAAM,CACvB,CACH,CACP,EAEDA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,EAE7BA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,0BAA0B,EAAA,EACnCA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EACrBA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAQ,CAAA,EAC1BA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,OAAO,EAAA,CAAQ,CACtB,CACF,EAGNA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2BAA2B,EAAA,EACpCA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EACrBA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAQ,CAAA,EAC1BA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAQ,CAAA,CACtB,CACF,CACF,CACF,CACD;;;;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-D_ItFcqt.js');
|
|
4
4
|
|
|
5
5
|
const afColorSwatchCss = ":host{display:block}.swatch{display:flex;flex-direction:column;border-radius:8px;overflow:hidden;border:1px solid #ece6f5;background:white}.color-preview{width:100%;height:120px;flex-shrink:0}.size-large .color-preview{height:140px}.color-info{padding:16px;display:flex;flex-direction:column;gap:4px}.color-name{font-family:'NeuSans', 'Inter', system-ui, sans-serif;font-size:16px;font-weight:500;color:#14343B}.color-value{font-family:'Helvetica', 'Inter', monospace, system-ui, sans-serif;font-size:14px;color:#708380}";
|
|
6
6
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-D_ItFcqt.js');
|
|
4
4
|
|
|
5
5
|
const afContainerCss = ":host{display:block;width:100%}.container{width:100%;margin-left:auto;margin-right:auto;box-sizing:border-box;padding-left:16px;padding-right:16px}@media (min-width: 375px){.container{padding-left:20px;padding-right:20px}}@media (min-width: 768px){.container{padding-left:32px;padding-right:32px}.max-width-medium{max-width:768px}}@media (min-width: 1024px){.container{padding-left:64px;padding-right:64px}.max-width-large{max-width:1024px}.max-width-medium{max-width:768px}}@media (min-width: 1440px){.container{padding-left:80px;padding-right:80px}.max-width-xlarge{max-width:1440px}.max-width-large{max-width:1024px}.max-width-medium{max-width:768px}}.max-width-fluid{max-width:none}";
|
|
6
6
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"af-heading.af-logo.af-nav-item.af-navbar.af-text.entry.cjs.js","sources":["src/components/af-heading/af-heading.css?tag=af-heading&encapsulation=shadow","src/components/af-heading/af-heading.tsx","src/components/af-text/af-text.css?tag=af-text&encapsulation=shadow","src/components/af-text/af-text.tsx","src/components/af-nav-item/af-nav-item.css?tag=af-nav-item&encapsulation=shadow","src/components/af-nav-item/af-nav-item.tsx","src/components/af-navbar/af-navbar.css?tag=af-navbar&encapsulation=shadow","src/components/af-navbar/af-navbar.tsx","src/components/af-logo/af-logo.css?tag=af-logo&encapsulation=shadow","src/components/af-logo/af-logo.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.heading {\n margin: 0;\n padding: 0;\n font-family: 'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;\n font-weight: 400;\n color: var(--colour-typography-heading-primary, #14343b);\n letter-spacing: -0.02em;\n}\n\n/* Alignment */\n.align-left {\n text-align: left;\n}\n\n.align-center {\n text-align: center;\n}\n\n.align-right {\n text-align: right;\n}\n\n/* Heading XL */\n.level-xl {\n font-size: 50px;\n line-height: 1;\n}\n\n@media (min-width: 768px) {\n .level-xl {\n font-size: 80px;\n }\n}\n\n/* Heading 1 */\n.level-1 {\n font-size: 38px;\n line-height: 1;\n}\n\n@media (min-width: 768px) {\n .level-1 {\n font-size: 56px;\n }\n}\n\n/* Heading 2 */\n.level-2 {\n font-size: 32px;\n line-height: 1;\n}\n\n@media (min-width: 768px) {\n .level-2 {\n font-size: 44px;\n }\n}\n\n/* Heading 3 */\n.level-3 {\n font-size: 25px;\n line-height: 1;\n}\n\n@media (min-width: 768px) {\n .level-3 {\n font-size: 34px;\n }\n}\n\n/* Heading 4 */\n.level-4 {\n font-size: 20px;\n line-height: 1.1;\n}\n\n@media (min-width: 768px) {\n .level-4 {\n font-size: 24px;\n line-height: 1.2;\n }\n}\n\n/* Heading 5 */\n.level-5 {\n font-size: 18px;\n line-height: 1.1;\n}\n\n@media (min-width: 768px) {\n .level-5 {\n font-size: 20px;\n line-height: 1.2;\n }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'af-heading',\n styleUrl: 'af-heading.css',\n shadow: true\n})\nexport class AfHeading {\n /** Heading level */\n @Prop() level: 'xl' | '1' | '2' | '3' | '4' | '5' = '1';\n\n /** Visual alignment */\n @Prop() align: 'left' | 'center' | 'right' = 'left';\n\n private getHeadingTag() {\n // Map display levels to semantic HTML tags\n const tagMap: Record<string, string> = {\n 'xl': 'h1',\n '1': 'h1',\n '2': 'h2',\n '3': 'h3',\n '4': 'h4',\n '5': 'h5'\n };\n return tagMap[this.level] || 'h1';\n }\n\n render() {\n const Tag = this.getHeadingTag() as any;\n\n return (\n <Tag\n class={{\n 'heading': true,\n [`level-${this.level}`]: true,\n [`align-${this.align}`]: true\n }}\n part=\"base\"\n >\n <slot />\n </Tag>\n );\n }\n}\n",":host {\n display: block;\n}\n\n.text {\n margin: 0;\n padding: 0;\n font-family: 'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;\n font-weight: 400;\n color: var(--colour-typography-body-default, #14343b);\n letter-spacing: 0;\n}\n\n/* Alignment */\n.align-left {\n text-align: left;\n}\n\n.align-center {\n text-align: center;\n}\n\n.align-right {\n text-align: right;\n}\n\n/* Body variants */\n.variant-xlarge {\n font-size: 22px;\n line-height: 28px;\n}\n\n.variant-large {\n font-size: 18px;\n line-height: 26px;\n}\n\n.variant-medium {\n font-size: 16px;\n line-height: 24px;\n}\n\n.variant-small {\n font-size: 14px;\n line-height: 20px;\n}\n\n/* Label variants - use NeuSans Book */\n.variant-label-button {\n font-family: 'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;\n font-weight: 500;\n font-size: 17px;\n line-height: 20px;\n}\n\n.variant-label-tag {\n font-family: 'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;\n font-weight: 500;\n font-size: 14px;\n line-height: 1;\n}\n","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",":host {\n display: inline-block;\n}\n\n.nav-link {\n text-decoration: none;\n color: inherit;\n display: block;\n}\n\n.nav-item {\n display: flex;\n align-items: center;\n gap: 8px;\n box-sizing: border-box;\n cursor: pointer;\n}\n\n/* Primary hierarchy - bold main navigation */\n.hierarchy-primary {\n padding: 12px;\n justify-content: center;\n}\n\n.hierarchy-primary .label-container {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 24px;\n gap: 10px;\n}\n\n/* Primary variant 01 - darker */\n.hierarchy-primary.variant-01 {\n font-family: var(--typography-headingfont, 'NeuSans', 'Inter', system-ui, sans-serif);\n font-size: 16px;\n font-weight: var(--font-weight-book, 500);\n line-height: 20px;\n color: var(--colour-typography-nav-item-primary, #14343b);\n}\n\n/* Primary variant 02 - lighter for light backgrounds */\n.hierarchy-primary.variant-02 {\n font-family: var(--typography-bodyfont, 'Helvetica', 'Inter', system-ui, sans-serif);\n font-size: 16px;\n font-weight: var(--font-weight-regular, 400);\n line-height: 20px;\n color: var(--colour-typography-nav-item-secondary, #2b484f);\n}\n\n/* Hover state for primary variant-01 (dark backgrounds) - underline */\n.hierarchy-primary.variant-01:hover .label-container {\n border-bottom: 1px solid currentColor;\n}\n\n/* Active state for primary variant-01 - thicker border */\n.hierarchy-primary.variant-01.active .label-container {\n border-bottom: 2px solid #8a7049;\n}\n\n/* Hover and active states for variant-02 (light backgrounds) - no border */\n.hierarchy-primary.variant-02:hover {\n background-color: rgba(20, 52, 59, 0.04);\n border-radius: 8px;\n}\n\n.hierarchy-primary.variant-02.active {\n background-color: rgba(20, 52, 59, 0.08);\n border-radius: 8px;\n}\n\n/* Secondary hierarchy - smaller sub-navigation */\n.hierarchy-secondary {\n padding: 4px 0;\n}\n\n.hierarchy-secondary .label-container {\n display: flex;\n align-items: center;\n flex: 1;\n min-height: 24px;\n gap: 8px;\n}\n\n/* Secondary variant 01 - medium weight */\n.hierarchy-secondary.variant-01 {\n font-family: 'NeuSans', 'Inter', system-ui, sans-serif;\n font-size: 14px;\n font-weight: 500;\n line-height: 20px;\n color: #14343b;\n}\n\n/* Secondary variant 02 - regular weight */\n.hierarchy-secondary.variant-02 {\n font-family: 'NeuSans', 'Inter', system-ui, sans-serif;\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n color: #2b484f;\n}\n\n/* Hover state for secondary - underline text */\n.hierarchy-secondary:hover ::slotted(*) {\n text-decoration: underline;\n}\n\n/* Mobile styles */\n@media (max-width: 767px) {\n .hierarchy-primary {\n padding: 20px 12px;\n border-bottom: 1px solid #e8eeed;\n width: 100%;\n }\n\n .hierarchy-primary .label-container {\n flex: 1;\n justify-content: flex-start;\n }\n\n .hierarchy-primary.variant-01 {\n font-size: 20px;\n line-height: 1.1;\n letter-spacing: -0.4px;\n }\n\n .hierarchy-primary.variant-02 {\n font-size: 20px;\n line-height: 1.1;\n letter-spacing: -0.4px;\n color: #60767b;\n }\n}\n\n/* Icon sizing */\n::slotted([slot=\"icon-left\"]),\n::slotted([slot=\"icon-right\"]) {\n width: 24px;\n height: 24px;\n flex-shrink: 0;\n}\n\n.hierarchy-secondary ::slotted([slot=\"icon-right\"]) {\n width: 20px;\n height: 20px;\n}\n","import { Component, h, Prop, Host } from '@stencil/core';\n\n/**\n * A generic navigation item component that can be used in navigation bars, menus, and sidebars.\n * Supports multiple hierarchy levels, variants, and states (active, hover).\n */\n@Component({\n tag: 'af-nav-item',\n styleUrl: 'af-nav-item.css',\n shadow: true\n})\nexport class AfNavItem {\n /**\n * Visual hierarchy level of the navigation item\n * - 'primary': Bold, main navigation (larger text, prominent styling)\n * - 'secondary': Lighter, sub-navigation (smaller text, subtle styling)\n */\n @Prop() hierarchy: 'primary' | 'secondary' = 'primary';\n\n /**\n * Visual variant within the hierarchy level\n * - '01': Darker/more prominent styling\n * - '02': Lighter/more subtle styling\n */\n @Prop() variant: '01' | '02' = '01';\n\n /**\n * URL to navigate to when clicked\n */\n @Prop() href?: string;\n\n /**\n * Whether this nav item is currently active/selected\n */\n @Prop() active: boolean = false;\n\n render() {\n const classes = {\n 'nav-item': true,\n [`hierarchy-${this.hierarchy}`]: true,\n [`variant-${this.variant}`]: true,\n 'active': this.active\n };\n\n const content = (\n <div class={classes}>\n <slot name=\"icon-left\"></slot>\n <div class=\"label-container\">\n <slot></slot>\n </div>\n <slot name=\"icon-right\"></slot>\n </div>\n );\n\n if (this.href) {\n return (\n <Host>\n <a href={this.href} class=\"nav-link\">\n {content}\n </a>\n </Host>\n );\n }\n\n return <Host>{content}</Host>;\n }\n}\n",":host {\n display: block;\n width: 100%;\n position: absolute;\n top: 32px;\n left: 0;\n right: 0;\n z-index: 10;\n}\n\n.navbar-container {\n padding: 0 80px;\n box-sizing: border-box;\n position: relative;\n}\n\n.navbar {\n background: var(--colour-background-white, #ffffff);\n border-radius: 9999px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 8px 8px 8px 40px;\n box-sizing: border-box;\n}\n\n/* Left section */\n.navbar-left {\n display: flex;\n align-items: center;\n gap: 32px;\n}\n\n.logo {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n}\n\n.nav-links {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n/* Right section */\n.navbar-right {\n display: flex;\n align-items: center;\n gap: 20px;\n}\n\n.nav-actions {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.nav-button {\n display: flex;\n align-items: center;\n}\n\n/* Tablet adjustments */\n@media (max-width: 1024px) {\n .navbar-container {\n padding: 24px 40px 0;\n }\n\n .navbar-left {\n gap: 24px;\n }\n\n .nav-links {\n gap: 4px;\n }\n}\n\n/* Mobile adjustments */\n@media (max-width: 767px) {\n .navbar-container {\n padding: 16px 16px 0;\n }\n\n .navbar {\n padding: 8px 16px;\n flex-direction: column;\n border-radius: 16px;\n gap: 16px;\n }\n\n .navbar-left {\n width: 100%;\n flex-direction: column;\n gap: 16px;\n align-items: flex-start;\n }\n\n .nav-links {\n width: 100%;\n flex-direction: column;\n align-items: stretch;\n gap: 0;\n }\n\n .navbar-right {\n width: 100%;\n flex-direction: column;\n gap: 12px;\n align-items: stretch;\n }\n\n .nav-actions {\n width: 100%;\n flex-direction: column;\n align-items: stretch;\n gap: 0;\n }\n\n .nav-button {\n width: 100%;\n }\n}\n","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",":host {\n display: inline-block;\n}\n\n.logo-img {\n display: block;\n height: 22px;\n width: 141px;\n object-fit: contain;\n}\n","import { Component, h, Host } from '@stencil/core';\n\n/**\n * Affinda logo component\n */\n@Component({\n tag: 'af-logo',\n styleUrl: 'af-logo.css',\n shadow: true\n})\nexport class AfLogo {\n render() {\n return (\n <Host>\n <img\n src=\"https://www.figma.com/api/mcp/asset/2cfec484-7ba9-4258-94f3-ef4d0ba1e8fe\"\n alt=\"Affinda\"\n class=\"logo-img\"\n />\n </Host>\n );\n }\n}\n"],"names":["h","Host"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"af-heading.af-logo.af-nav-item.af-navbar.af-text.entry.cjs.js","sources":["src/components/af-heading/af-heading.css?tag=af-heading&encapsulation=shadow","src/components/af-heading/af-heading.tsx","src/components/af-text/af-text.css?tag=af-text&encapsulation=shadow","src/components/af-text/af-text.tsx","src/components/af-nav-item/af-nav-item.css?tag=af-nav-item&encapsulation=shadow","src/components/af-nav-item/af-nav-item.tsx","src/components/af-navbar/af-navbar.css?tag=af-navbar&encapsulation=shadow","src/components/af-navbar/af-navbar.tsx","src/components/af-logo/af-logo.css?tag=af-logo&encapsulation=shadow","src/components/af-logo/af-logo.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.heading {\n margin: 0;\n padding: 0;\n font-family: 'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;\n font-weight: 400;\n color: var(--colour-typography-heading-primary, #14343b);\n letter-spacing: -0.02em;\n}\n\n/* Alignment */\n.align-left {\n text-align: left;\n}\n\n.align-center {\n text-align: center;\n}\n\n.align-right {\n text-align: right;\n}\n\n/* Theme variants */\n.theme-dark {\n color: var(--colour-brand-mist-green, #C6D5D1);\n}\n\n.theme-light {\n color: var(--colour-typography-heading-primary, #14343b);\n}\n\n/* Heading XL */\n.level-xl {\n font-size: 50px;\n line-height: 1;\n}\n\n@media (min-width: 768px) {\n .level-xl {\n font-size: 80px;\n }\n}\n\n/* Heading 1 */\n.level-1 {\n font-size: 38px;\n line-height: 1;\n}\n\n@media (min-width: 768px) {\n .level-1 {\n font-size: 56px;\n }\n}\n\n/* Heading 2 */\n.level-2 {\n font-size: 32px;\n line-height: 1;\n}\n\n@media (min-width: 768px) {\n .level-2 {\n font-size: 44px;\n }\n}\n\n/* Heading 3 */\n.level-3 {\n font-size: 25px;\n line-height: 1;\n}\n\n@media (min-width: 768px) {\n .level-3 {\n font-size: 34px;\n }\n}\n\n/* Heading 4 */\n.level-4 {\n font-size: 20px;\n line-height: 1.1;\n}\n\n@media (min-width: 768px) {\n .level-4 {\n font-size: 24px;\n line-height: 1.2;\n }\n}\n\n/* Heading 5 */\n.level-5 {\n font-size: 18px;\n line-height: 1.1;\n}\n\n@media (min-width: 768px) {\n .level-5 {\n font-size: 20px;\n line-height: 1.2;\n }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'af-heading',\n styleUrl: 'af-heading.css',\n shadow: true\n})\nexport class AfHeading {\n /** Heading level */\n @Prop() level: 'xl' | '1' | '2' | '3' | '4' | '5' = '1';\n\n /** Visual alignment */\n @Prop() align: 'left' | 'center' | 'right' = 'left';\n \n /** Theme for dark backgrounds */\n @Prop() theme: 'light' | 'dark' = 'light';\n\n private getHeadingTag() {\n // Map display levels to semantic HTML tags\n const tagMap: Record<string, string> = {\n 'xl': 'h1',\n '1': 'h1',\n '2': 'h2',\n '3': 'h3',\n '4': 'h4',\n '5': 'h5'\n };\n return tagMap[this.level] || 'h1';\n }\n\n render() {\n const Tag = this.getHeadingTag() as any;\n\n return (\n <Tag\n class={{\n 'heading': true,\n [`level-${this.level}`]: true,\n [`align-${this.align}`]: true,\n [`theme-${this.theme}`]: true\n }}\n part=\"base\"\n >\n <slot />\n </Tag>\n );\n }\n}\n",":host {\n display: block;\n}\n\n.text {\n margin: 0;\n padding: 0;\n font-family: 'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;\n font-weight: 400;\n color: var(--colour-typography-body-default, #14343b);\n letter-spacing: 0;\n}\n\n/* Alignment */\n.align-left {\n text-align: left;\n}\n\n.align-center {\n text-align: center;\n}\n\n.align-right {\n text-align: right;\n}\n\n/* Theme variants */\n.theme-dark {\n color: var(--colour-brand-mist-green, #C6D5D1);\n}\n\n.theme-light {\n color: var(--colour-typography-body-default, #14343b);\n}\n\n/* Body variants */\n.variant-xlarge {\n font-size: 22px;\n line-height: 28px;\n}\n\n.variant-large {\n font-size: 18px;\n line-height: 26px;\n}\n\n.variant-medium {\n font-size: 16px;\n line-height: 24px;\n}\n\n.variant-small {\n font-size: 14px;\n line-height: 20px;\n}\n\n/* Label variants - use NeuSans Book */\n.variant-label-button {\n font-family: 'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;\n font-weight: 500;\n font-size: 17px;\n line-height: 20px;\n}\n\n.variant-label-tag {\n font-family: 'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;\n font-weight: 500;\n font-size: 14px;\n line-height: 1;\n}\n","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",":host {\n display: inline-block;\n}\n\n.nav-link {\n text-decoration: none;\n color: inherit;\n display: block;\n}\n\n.nav-item {\n display: flex;\n align-items: center;\n gap: 8px;\n box-sizing: border-box;\n cursor: pointer;\n}\n\n/* Primary hierarchy - bold main navigation */\n.hierarchy-primary {\n padding: 12px;\n justify-content: center;\n}\n\n.hierarchy-primary .label-container {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 24px;\n gap: 10px;\n}\n\n/* Primary variant 01 - darker */\n.hierarchy-primary.variant-01 {\n font-family: var(--typography-headingfont, 'NeuSans', 'Inter', system-ui, sans-serif);\n font-size: 16px;\n font-weight: var(--font-weight-book, 500);\n line-height: 20px;\n color: var(--colour-typography-nav-item-primary, #14343b);\n}\n\n/* Primary variant 02 - lighter for light backgrounds */\n.hierarchy-primary.variant-02 {\n font-family: var(--typography-bodyfont, 'Helvetica', 'Inter', system-ui, sans-serif);\n font-size: 16px;\n font-weight: var(--font-weight-regular, 400);\n line-height: 20px;\n color: var(--colour-typography-nav-item-secondary, #2b484f);\n}\n\n/* Hover state for primary variant-01 (dark backgrounds) - underline */\n.hierarchy-primary.variant-01:hover .label-container {\n border-bottom: 1px solid currentColor;\n}\n\n/* Active state for primary variant-01 - thicker border */\n.hierarchy-primary.variant-01.active .label-container {\n border-bottom: 2px solid #8a7049;\n}\n\n/* Hover and active states for variant-02 (light backgrounds) - no border */\n.hierarchy-primary.variant-02:hover {\n background-color: rgba(20, 52, 59, 0.04);\n border-radius: 8px;\n}\n\n.hierarchy-primary.variant-02.active {\n background-color: rgba(20, 52, 59, 0.08);\n border-radius: 8px;\n}\n\n/* Secondary hierarchy - smaller sub-navigation */\n.hierarchy-secondary {\n padding: 4px 0;\n}\n\n.hierarchy-secondary .label-container {\n display: flex;\n align-items: center;\n flex: 1;\n min-height: 24px;\n gap: 8px;\n}\n\n/* Secondary variant 01 - medium weight */\n.hierarchy-secondary.variant-01 {\n font-family: 'NeuSans', 'Inter', system-ui, sans-serif;\n font-size: 14px;\n font-weight: 500;\n line-height: 20px;\n color: #14343b;\n}\n\n/* Secondary variant 02 - regular weight */\n.hierarchy-secondary.variant-02 {\n font-family: 'NeuSans', 'Inter', system-ui, sans-serif;\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n color: #2b484f;\n}\n\n/* Hover state for secondary - underline text */\n.hierarchy-secondary:hover ::slotted(*) {\n text-decoration: underline;\n}\n\n/* Mobile styles */\n@media (max-width: 767px) {\n .hierarchy-primary {\n padding: 20px 12px;\n border-bottom: 1px solid #e8eeed;\n width: 100%;\n }\n\n .hierarchy-primary .label-container {\n flex: 1;\n justify-content: flex-start;\n }\n\n .hierarchy-primary.variant-01 {\n font-size: 20px;\n line-height: 1.1;\n letter-spacing: -0.4px;\n }\n\n .hierarchy-primary.variant-02 {\n font-size: 20px;\n line-height: 1.1;\n letter-spacing: -0.4px;\n color: #60767b;\n }\n}\n\n/* Icon sizing */\n::slotted([slot=\"icon-left\"]),\n::slotted([slot=\"icon-right\"]) {\n width: 24px;\n height: 24px;\n flex-shrink: 0;\n}\n\n.hierarchy-secondary ::slotted([slot=\"icon-right\"]) {\n width: 20px;\n height: 20px;\n}\n","import { Component, h, Prop, Host } from '@stencil/core';\n\n/**\n * A generic navigation item component that can be used in navigation bars, menus, and sidebars.\n * Supports multiple hierarchy levels, variants, and states (active, hover).\n */\n@Component({\n tag: 'af-nav-item',\n styleUrl: 'af-nav-item.css',\n shadow: true\n})\nexport class AfNavItem {\n /**\n * Visual hierarchy level of the navigation item\n * - 'primary': Bold, main navigation (larger text, prominent styling)\n * - 'secondary': Lighter, sub-navigation (smaller text, subtle styling)\n */\n @Prop() hierarchy: 'primary' | 'secondary' = 'primary';\n\n /**\n * Visual variant within the hierarchy level\n * - '01': Darker/more prominent styling\n * - '02': Lighter/more subtle styling\n */\n @Prop() variant: '01' | '02' = '01';\n\n /**\n * URL to navigate to when clicked\n */\n @Prop() href?: string;\n\n /**\n * Whether this nav item is currently active/selected\n */\n @Prop() active: boolean = false;\n\n render() {\n const classes = {\n 'nav-item': true,\n [`hierarchy-${this.hierarchy}`]: true,\n [`variant-${this.variant}`]: true,\n 'active': this.active\n };\n\n const content = (\n <div class={classes}>\n <slot name=\"icon-left\"></slot>\n <div class=\"label-container\">\n <slot></slot>\n </div>\n <slot name=\"icon-right\"></slot>\n </div>\n );\n\n if (this.href) {\n return (\n <Host>\n <a href={this.href} class=\"nav-link\">\n {content}\n </a>\n </Host>\n );\n }\n\n return <Host>{content}</Host>;\n }\n}\n",":host {\n display: block;\n width: 100%;\n position: absolute;\n top: 32px;\n left: 0;\n right: 0;\n z-index: 10;\n}\n\n.navbar-container {\n padding: 0 80px;\n box-sizing: border-box;\n position: relative;\n}\n\n.navbar {\n background: var(--colour-background-white, #ffffff);\n border-radius: 9999px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 8px 8px 8px 40px;\n box-sizing: border-box;\n}\n\n/* Left section */\n.navbar-left {\n display: flex;\n align-items: center;\n gap: 32px;\n}\n\n.logo {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n}\n\n/* Mobile menu toggle button */\n.mobile-menu-toggle {\n display: none;\n background: none;\n border: none;\n padding: 8px;\n cursor: pointer;\n color: var(--colour-brand-inkwell, #14343b);\n margin-left: auto;\n}\n\n.mobile-menu-toggle svg {\n display: block;\n}\n\n.nav-links {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n/* Right section */\n.navbar-right {\n display: flex;\n align-items: center;\n gap: 20px;\n}\n\n.nav-actions {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.nav-button {\n display: flex;\n align-items: center;\n}\n\n/* Tablet adjustments */\n@media (max-width: 1024px) {\n .navbar-container {\n padding: 24px 40px 0;\n }\n\n .navbar-left {\n gap: 24px;\n }\n\n .nav-links {\n gap: 4px;\n }\n}\n\n/* Mobile adjustments */\n@media (max-width: 767px) {\n .navbar-container {\n padding: 16px 16px 0;\n }\n\n .navbar {\n padding: 8px 16px;\n flex-direction: column;\n border-radius: 16px;\n gap: 0;\n }\n\n .navbar-left {\n width: 100%;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n gap: 16px;\n }\n\n /* Show hamburger button on mobile */\n .mobile-menu-toggle {\n display: flex;\n }\n\n /* Hide nav links by default on mobile */\n .nav-links {\n display: none;\n width: 100%;\n flex-direction: column;\n align-items: stretch;\n gap: 0;\n margin-top: 16px;\n }\n\n /* Show nav links when menu is open */\n .nav-links.mobile-open {\n display: flex;\n }\n\n /* Hide right section by default on mobile */\n .navbar-right {\n display: none;\n width: 100%;\n flex-direction: column;\n gap: 12px;\n align-items: stretch;\n margin-top: 16px;\n }\n\n /* Show right section when menu is open */\n .navbar-right.mobile-open {\n display: flex;\n }\n\n .nav-actions {\n width: 100%;\n flex-direction: column;\n align-items: stretch;\n gap: 0;\n }\n\n .nav-button {\n width: 100%;\n }\n}\n","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",":host {\n display: inline-block;\n}\n\n.logo-img {\n display: block;\n height: 22px;\n width: 141px;\n object-fit: contain;\n}\n","import { Component, h, Host } from '@stencil/core';\n\n/**\n * Affinda logo component\n */\n@Component({\n tag: 'af-logo',\n styleUrl: 'af-logo.css',\n shadow: true\n})\nexport class AfLogo {\n render() {\n return (\n <Host>\n <img\n src=\"https://www.figma.com/api/mcp/asset/2cfec484-7ba9-4258-94f3-ef4d0ba1e8fe\"\n alt=\"Affinda\"\n class=\"logo-img\"\n />\n </Host>\n );\n }\n}\n"],"names":["h","Host"],"mappings":"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"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-D_ItFcqt.js');
|
|
4
4
|
|
|
5
|
-
const afHeadingCss = ":host{display:block}.heading{margin:0;padding:0;font-family:'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;font-weight:400;color:var(--colour-typography-heading-primary, #14343b);letter-spacing:-0.02em}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}.level-xl{font-size:50px;line-height:1}@media (min-width: 768px){.level-xl{font-size:80px}}.level-1{font-size:38px;line-height:1}@media (min-width: 768px){.level-1{font-size:56px}}.level-2{font-size:32px;line-height:1}@media (min-width: 768px){.level-2{font-size:44px}}.level-3{font-size:25px;line-height:1}@media (min-width: 768px){.level-3{font-size:34px}}.level-4{font-size:20px;line-height:1.1}@media (min-width: 768px){.level-4{font-size:24px;line-height:1.2}}.level-5{font-size:18px;line-height:1.1}@media (min-width: 768px){.level-5{font-size:20px;line-height:1.2}}";
|
|
5
|
+
const afHeadingCss = ":host{display:block}.heading{margin:0;padding:0;font-family:'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;font-weight:400;color:var(--colour-typography-heading-primary, #14343b);letter-spacing:-0.02em}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}.theme-dark{color:var(--colour-brand-mist-green, #C6D5D1)}.theme-light{color:var(--colour-typography-heading-primary, #14343b)}.level-xl{font-size:50px;line-height:1}@media (min-width: 768px){.level-xl{font-size:80px}}.level-1{font-size:38px;line-height:1}@media (min-width: 768px){.level-1{font-size:56px}}.level-2{font-size:32px;line-height:1}@media (min-width: 768px){.level-2{font-size:44px}}.level-3{font-size:25px;line-height:1}@media (min-width: 768px){.level-3{font-size:34px}}.level-4{font-size:20px;line-height:1.1}@media (min-width: 768px){.level-4{font-size:24px;line-height:1.2}}.level-5{font-size:18px;line-height:1.1}@media (min-width: 768px){.level-5{font-size:20px;line-height:1.2}}";
|
|
6
6
|
|
|
7
7
|
const AfHeading = class {
|
|
8
8
|
constructor(hostRef) {
|
|
@@ -11,6 +11,8 @@ const AfHeading = class {
|
|
|
11
11
|
this.level = '1';
|
|
12
12
|
/** Visual alignment */
|
|
13
13
|
this.align = 'left';
|
|
14
|
+
/** Theme for dark backgrounds */
|
|
15
|
+
this.theme = 'light';
|
|
14
16
|
}
|
|
15
17
|
getHeadingTag() {
|
|
16
18
|
// Map display levels to semantic HTML tags
|
|
@@ -26,16 +28,17 @@ const AfHeading = class {
|
|
|
26
28
|
}
|
|
27
29
|
render() {
|
|
28
30
|
const Tag = this.getHeadingTag();
|
|
29
|
-
return (index.h(Tag, { key: '
|
|
31
|
+
return (index.h(Tag, { key: '2cc4b5d43b85fbc8251d61e822deb22641f69683', class: {
|
|
30
32
|
'heading': true,
|
|
31
33
|
[`level-${this.level}`]: true,
|
|
32
|
-
[`align-${this.align}`]: true
|
|
33
|
-
|
|
34
|
+
[`align-${this.align}`]: true,
|
|
35
|
+
[`theme-${this.theme}`]: true
|
|
36
|
+
}, part: "base" }, index.h("slot", { key: '0ac282842c61ec6c16929574a5ffd6530aab9759' })));
|
|
34
37
|
}
|
|
35
38
|
};
|
|
36
39
|
AfHeading.style = afHeadingCss;
|
|
37
40
|
|
|
38
|
-
const afTextCss = ":host{display:block}.text{margin:0;padding:0;font-family:'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;font-weight:400;color:var(--colour-typography-body-default, #14343b);letter-spacing:0}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}.variant-xlarge{font-size:22px;line-height:28px}.variant-large{font-size:18px;line-height:26px}.variant-medium{font-size:16px;line-height:24px}.variant-small{font-size:14px;line-height:20px}.variant-label-button{font-family:'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;font-weight:500;font-size:17px;line-height:20px}.variant-label-tag{font-family:'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;font-weight:500;font-size:14px;line-height:1}";
|
|
41
|
+
const afTextCss = ":host{display:block}.text{margin:0;padding:0;font-family:'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;font-weight:400;color:var(--colour-typography-body-default, #14343b);letter-spacing:0}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}.theme-dark{color:var(--colour-brand-mist-green, #C6D5D1)}.theme-light{color:var(--colour-typography-body-default, #14343b)}.variant-xlarge{font-size:22px;line-height:28px}.variant-large{font-size:18px;line-height:26px}.variant-medium{font-size:16px;line-height:24px}.variant-small{font-size:14px;line-height:20px}.variant-label-button{font-family:'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;font-weight:500;font-size:17px;line-height:20px}.variant-label-tag{font-family:'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;font-weight:500;font-size:14px;line-height:1}";
|
|
39
42
|
|
|
40
43
|
const AfText = class {
|
|
41
44
|
constructor(hostRef) {
|
|
@@ -46,14 +49,17 @@ const AfText = class {
|
|
|
46
49
|
this.align = 'left';
|
|
47
50
|
/** Semantic element to render */
|
|
48
51
|
this.as = 'p';
|
|
52
|
+
/** Theme for dark backgrounds */
|
|
53
|
+
this.theme = 'light';
|
|
49
54
|
}
|
|
50
55
|
render() {
|
|
51
56
|
const Tag = this.as;
|
|
52
|
-
return (index.h(Tag, { key: '
|
|
57
|
+
return (index.h(Tag, { key: 'd24094cc876bf871972eb35651c2c145d135722f', class: {
|
|
53
58
|
'text': true,
|
|
54
59
|
[`variant-${this.variant}`]: true,
|
|
55
|
-
[`align-${this.align}`]: true
|
|
56
|
-
|
|
60
|
+
[`align-${this.align}`]: true,
|
|
61
|
+
[`theme-${this.theme}`]: true
|
|
62
|
+
}, part: "base" }, index.h("slot", { key: 'bb1f690d3b11f76d926da7bc7655fbce9df9973c' })));
|
|
57
63
|
}
|
|
58
64
|
};
|
|
59
65
|
AfText.style = afTextCss;
|
|
@@ -96,14 +102,18 @@ const AfNavItem = class {
|
|
|
96
102
|
};
|
|
97
103
|
AfNavItem.style = afNavItemCss;
|
|
98
104
|
|
|
99
|
-
const afNavbarCss = ":host{display:block;width:100%;position:absolute;top:32px;left:0;right:0;z-index:10}.navbar-container{padding:0 80px;box-sizing:border-box;position:relative}.navbar{background:var(--colour-background-white, #ffffff);border-radius:9999px;display:flex;align-items:center;justify-content:space-between;padding:8px 8px 8px 40px;box-sizing:border-box}.navbar-left{display:flex;align-items:center;gap:32px}.logo{display:flex;align-items:center;flex-shrink:0}.nav-links{display:flex;align-items:center;gap:8px}.navbar-right{display:flex;align-items:center;gap:20px}.nav-actions{display:flex;align-items:center;gap:12px}.nav-button{display:flex;align-items:center}@media (max-width: 1024px){.navbar-container{padding:24px 40px 0}.navbar-left{gap:24px}.nav-links{gap:4px}}@media (max-width: 767px){.navbar-container{padding:16px 16px 0}.navbar{padding:8px 16px;flex-direction:column;border-radius:16px;gap:
|
|
105
|
+
const afNavbarCss = ":host{display:block;width:100%;position:absolute;top:32px;left:0;right:0;z-index:10}.navbar-container{padding:0 80px;box-sizing:border-box;position:relative}.navbar{background:var(--colour-background-white, #ffffff);border-radius:9999px;display:flex;align-items:center;justify-content:space-between;padding:8px 8px 8px 40px;box-sizing:border-box}.navbar-left{display:flex;align-items:center;gap:32px}.logo{display:flex;align-items:center;flex-shrink:0}.mobile-menu-toggle{display:none;background:none;border:none;padding:8px;cursor:pointer;color:var(--colour-brand-inkwell, #14343b);margin-left:auto}.mobile-menu-toggle svg{display:block}.nav-links{display:flex;align-items:center;gap:8px}.navbar-right{display:flex;align-items:center;gap:20px}.nav-actions{display:flex;align-items:center;gap:12px}.nav-button{display:flex;align-items:center}@media (max-width: 1024px){.navbar-container{padding:24px 40px 0}.navbar-left{gap:24px}.nav-links{gap:4px}}@media (max-width: 767px){.navbar-container{padding:16px 16px 0}.navbar{padding:8px 16px;flex-direction:column;border-radius:16px;gap:0}.navbar-left{width:100%;flex-direction:row;justify-content:space-between;align-items:center;gap:16px}.mobile-menu-toggle{display:flex}.nav-links{display:none;width:100%;flex-direction:column;align-items:stretch;gap:0;margin-top:16px}.nav-links.mobile-open{display:flex}.navbar-right{display:none;width:100%;flex-direction:column;gap:12px;align-items:stretch;margin-top:16px}.navbar-right.mobile-open{display:flex}.nav-actions{width:100%;flex-direction:column;align-items:stretch;gap:0}.nav-button{width:100%}}";
|
|
100
106
|
|
|
101
107
|
const AfNavbar = class {
|
|
102
108
|
constructor(hostRef) {
|
|
103
109
|
index.registerInstance(this, hostRef);
|
|
110
|
+
this.mobileMenuOpen = false;
|
|
111
|
+
this.toggleMobileMenu = () => {
|
|
112
|
+
this.mobileMenuOpen = !this.mobileMenuOpen;
|
|
113
|
+
};
|
|
104
114
|
}
|
|
105
115
|
render() {
|
|
106
|
-
return (index.h(index.Host, { key: '
|
|
116
|
+
return (index.h(index.Host, { key: '305d9415a3c14b2dc352588171d4677f4be4a1af' }, index.h("nav", { key: 'c509365f0056b0f26d8e3aea98acda04d29d4387', class: "navbar-container" }, index.h("div", { key: '722fd37a76e7367f0e7cd22729f711e8164b9d60', class: "navbar" }, index.h("div", { key: 'e0e8d341394b30f4badf5062b899123d691123a1', class: "navbar-left" }, index.h("div", { key: '145ab6a0ff46f0e21b429b8e2d881404d1d6c24c', class: "logo" }, index.h("slot", { key: '447d9abfa74c008afac07d3d0386b26ef292ec23', name: "logo" })), index.h("button", { key: '1f3e5512ea1ab6ca5b6a3a1455a9ff9fa9a2c8e3', class: "mobile-menu-toggle", onClick: this.toggleMobileMenu, "aria-label": "Toggle navigation menu", "aria-expanded": this.mobileMenuOpen ? 'true' : 'false' }, this.mobileMenuOpen ? (index.h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, index.h("path", { d: "M18 6L6 18M6 6l12 12", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))) : (index.h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, index.h("path", { d: "M3 12h18M3 6h18M3 18h18", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), index.h("div", { key: '277226e4c433ad4377810c1e3e894b0d9de11b05', class: `nav-links ${this.mobileMenuOpen ? 'mobile-open' : ''}` }, index.h("slot", { key: 'f95617e99651d0e2a4fa28a08fbe5452a8f95aa3', name: "start" }))), index.h("div", { key: 'ad7b9cf31ce290303df0af868e369bc79983fff4', class: `navbar-right ${this.mobileMenuOpen ? 'mobile-open' : ''}` }, index.h("div", { key: '817c73031c45579ec13da6d53bfe1753bcd1e0ef', class: "nav-actions" }, index.h("slot", { key: 'e18d0c55b346722784640c37bbb5e5fe05fec5c0', name: "end" })), index.h("div", { key: '296dd2c84f0a59c54741b40a6333cfff5ec7d200', class: "nav-button" }, index.h("slot", { key: 'd94063758598f14888587d93b5b299f593b2cd31', name: "button" })))))));
|
|
107
117
|
}
|
|
108
118
|
};
|
|
109
119
|
AfNavbar.style = afNavbarCss;
|
|
@@ -115,7 +125,7 @@ const AfLogo = class {
|
|
|
115
125
|
index.registerInstance(this, hostRef);
|
|
116
126
|
}
|
|
117
127
|
render() {
|
|
118
|
-
return (index.h(index.Host, { key: '
|
|
128
|
+
return (index.h(index.Host, { key: '6e7a2dd46fa7143bdac4dee8d7146649ff3c7f57' }, index.h("img", { key: '03fb48e53218c6207927f9337851e3d39c5ca4a7', src: "https://www.figma.com/api/mcp/asset/2cfec484-7ba9-4258-94f3-ef4d0ba1e8fe", alt: "Affinda", class: "logo-img" })));
|
|
119
129
|
}
|
|
120
130
|
};
|
|
121
131
|
AfLogo.style = afLogoCss;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var index = require('./index-D_ItFcqt.js');
|
|
4
|
+
|
|
5
|
+
const afHeroSectionCss = ".sc-af-hero-section-h{display:block;width:100%}.hero-section.sc-af-hero-section{width:100%;padding-top:clamp(2.5rem, 8vh, 4.5rem);padding-bottom:clamp(3rem, 8vh, 5rem);display:flex;align-items:center;justify-content:center;margin-top:0;position:relative;z-index:1;overflow:hidden}.variant-light.sc-af-hero-section{background-color:var(--colour-background-white, #FFFFFF)}.variant-dark.sc-af-hero-section{background-color:var(--colour-brand-inkwell, #14343B)}.variant-dark.sc-af-hero-section af-heading.sc-af-hero-section,.variant-dark.sc-af-hero-section af-text.sc-af-hero-section{--typography-heading-primary:var(--colour-brand-mist-green, #C6D5D1);--typography-body-default:var(--colour-brand-mist-green, #C6D5D1)}.hero-decoration.sc-af-hero-section{position:absolute;inset:0;pointer-events:none;z-index:0;height:0;width:0;overflow:visible}.hero-decoration.sc-af-hero-section-s>*,.hero-decoration .sc-af-hero-section-s>*{position:absolute !important;bottom:-40px;right:-500px;width:1250px;height:820px;opacity:0.5}.hero-content.sc-af-hero-section{text-align:center;max-width:1000px;margin:0 auto;position:relative;z-index:1}@media (max-width: 768px){.hero-section.sc-af-hero-section{padding:3rem 1.5rem 2.5rem}}";
|
|
6
|
+
|
|
7
|
+
const AfHeroSection = class {
|
|
8
|
+
constructor(hostRef) {
|
|
9
|
+
index.registerInstance(this, hostRef);
|
|
10
|
+
/** Hero variant */
|
|
11
|
+
this.variant = 'dark';
|
|
12
|
+
/** Show decorative paperclip */
|
|
13
|
+
this.withDecoration = false;
|
|
14
|
+
/** Minimum height */
|
|
15
|
+
this.minHeight = '60vh';
|
|
16
|
+
}
|
|
17
|
+
render() {
|
|
18
|
+
return (index.h(index.Host, { key: '85061979e5f4d2a766574cbc355e2f833160050b' }, index.h("div", { key: 'f0c1f36c7f5f241d5a3ce590a2eff5b5e9c6f3bc', class: `hero-section variant-${this.variant}`, style: { minHeight: this.minHeight } }, this.withDecoration && (index.h("div", { key: '4a680dcbb970ea9c31fdcd1d4e16ec9b43e859b6', class: "hero-decoration" }, index.h("slot", { key: 'f8c629d60b6fbb0627e0720967bbc5bfeecbfecd', name: "decoration" }))), index.h("af-container", { key: '07ed025ef1b11880896a0ca72916592f4b36dddf' }, index.h("div", { key: 'dbe586394c6e10ed672d12326e21832376661ed1', class: "hero-content" }, index.h("slot", { key: 'd3906e6fd0bdb1439df2c4e6b48e090472bcc2e5' }))))));
|
|
19
|
+
}
|
|
20
|
+
};
|
|
21
|
+
AfHeroSection.style = afHeroSectionCss;
|
|
22
|
+
|
|
23
|
+
exports.af_hero_section = AfHeroSection;
|
|
24
|
+
//# sourceMappingURL=af-hero-section.entry.cjs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"af-hero-section.entry.cjs.js","sources":["src/components/af-hero-section/af-hero-section.css?tag=af-hero-section&encapsulation=scoped","src/components/af-hero-section/af-hero-section.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n.hero-section {\n width: 100%;\n padding-top: clamp(2.5rem, 8vh, 4.5rem);\n padding-bottom: clamp(3rem, 8vh, 5rem);\n display: flex;\n align-items: center;\n justify-content: center;\n margin-top: 0;\n position: relative;\n z-index: 1;\n overflow: hidden;\n}\n\n/* Light variant */\n.variant-light {\n background-color: var(--colour-background-white, #FFFFFF);\n}\n\n/* Dark variant */\n.variant-dark {\n background-color: var(--colour-brand-inkwell, #14343B);\n}\n\n/* Set theme colors on dark backgrounds */\n.variant-dark af-heading,\n.variant-dark af-text {\n --typography-heading-primary: var(--colour-brand-mist-green, #C6D5D1);\n --typography-body-default: var(--colour-brand-mist-green, #C6D5D1);\n}\n\n.hero-decoration {\n position: absolute;\n inset: 0;\n pointer-events: none;\n z-index: 0;\n height: 0;\n width: 0;\n overflow: visible;\n}\n\n.hero-decoration ::slotted(*) {\n position: absolute !important;\n bottom: -40px;\n right: -500px;\n width: 1250px;\n height: 820px;\n opacity: 0.5;\n}\n\n.hero-content {\n text-align: center;\n max-width: 1000px;\n margin: 0 auto;\n position: relative;\n z-index: 1;\n}\n\n/* Mobile adjustments */\n@media (max-width: 768px) {\n .hero-section {\n padding: 3rem 1.5rem 2.5rem;\n }\n}\n\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * Hero section component for marketing pages\n */\n@Component({\n tag: 'af-hero-section',\n styleUrl: 'af-hero-section.css',\n shadow: false,\n scoped: true,\n})\nexport class AfHeroSection {\n /** Hero variant */\n @Prop() variant: 'light' | 'dark' = 'dark';\n \n /** Show decorative paperclip */\n @Prop() withDecoration: boolean = false;\n \n /** Minimum height */\n @Prop() minHeight: string = '60vh';\n\n render() {\n return (\n <Host>\n <div class={`hero-section variant-${this.variant}`} style={{ minHeight: this.minHeight }}>\n {this.withDecoration && (\n <div class=\"hero-decoration\">\n <slot name=\"decoration\"></slot>\n </div>\n )}\n <af-container>\n <div class=\"hero-content\">\n <slot></slot>\n </div>\n </af-container>\n </div>\n </Host>\n );\n }\n}\n\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,+rCAA+rC;;MCW3sC,aAAa,GAAA,MAAA;AAN1B,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAQU,QAAA,IAAO,CAAA,OAAA,GAAqB,MAAM;;AAGlC,QAAA,IAAc,CAAA,cAAA,GAAY,KAAK;;AAG/B,QAAA,IAAS,CAAA,SAAA,GAAW,MAAM;AAoBnC;IAlBC,MAAM,GAAA;QACJ,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAA,qBAAA,EAAwB,IAAI,CAAC,OAAO,CAAA,CAAE,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,EAAA,EACrF,IAAI,CAAC,cAAc,KAClBA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1BA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,YAAY,EAAA,CAAQ,CAC3B,CACP,EACDA,OAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACEA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EACvBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACO,CACX,CACD;;;;;;;"}
|