@affinda/wc 0.0.27 → 0.1.0
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-card.entry.esm.js.map +1 -1
- package/dist/affinda/af-client-carousel.entry.esm.js.map +1 -1
- package/dist/affinda/af-feature-accordion.entry.esm.js.map +1 -1
- package/dist/affinda/af-footer.entry.esm.js.map +1 -1
- package/dist/affinda/af-heading.af-logo.af-nav-item.af-navbar.af-text.entry.esm.js.map +1 -1
- package/dist/affinda/af-illustrated-card.entry.esm.js.map +1 -1
- package/dist/affinda/af-in-page-banner.entry.esm.js.map +1 -1
- package/dist/affinda/af-paperclip-decoration.entry.esm.js.map +1 -0
- package/dist/affinda/af-typography-lockup.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-28aaeb3e.entry.js → p-0137e7a5.entry.js} +2 -2
- package/dist/affinda/{p-c5ba91b3.entry.js → p-0201c8bd.entry.js} +2 -2
- package/dist/affinda/p-081cc890.entry.js +2 -0
- package/dist/affinda/{p-45f6c49e.entry.js.map → p-081cc890.entry.js.map} +1 -1
- package/dist/affinda/{p-150f8363.entry.js → p-083fc528.entry.js} +2 -2
- package/dist/affinda/{p-c5fd819e.entry.js → p-0e469ad2.entry.js} +2 -2
- package/dist/affinda/{p-7813390b.entry.js → p-15f0bd34.entry.js} +2 -2
- package/dist/affinda/{p-7fa67014.entry.js → p-1c96856a.entry.js} +2 -2
- package/dist/affinda/{p-4d5b0112.entry.js → p-24e74c10.entry.js} +2 -2
- package/dist/affinda/{p-5aea4c4f.entry.js → p-2e6192eb.entry.js} +2 -2
- package/dist/affinda/{p-7a8ca627.entry.js → p-35607741.entry.js} +2 -2
- package/dist/affinda/{p-8b74fd5e.entry.js → p-364ffa25.entry.js} +2 -2
- package/dist/affinda/p-3a0e45c3.entry.js +2 -0
- package/dist/affinda/{p-8b26a82c.entry.js.map → p-3a0e45c3.entry.js.map} +1 -1
- package/dist/affinda/{p-fb76a5ef.entry.js → p-3ee906de.entry.js} +2 -2
- package/dist/affinda/{p-fb054540.entry.js → p-41643147.entry.js} +2 -2
- package/dist/affinda/{p-226bad82.entry.js → p-43f40921.entry.js} +2 -2
- package/dist/affinda/{p-d34da5ef.entry.js → p-48aadea9.entry.js} +2 -2
- package/dist/affinda/p-49521f2e.entry.js +2 -0
- package/dist/affinda/{p-fee5d2ac.entry.js.map → p-49521f2e.entry.js.map} +1 -1
- package/dist/affinda/{p-398cb86b.entry.js → p-4a355b69.entry.js} +2 -2
- package/dist/affinda/{p-bf8b5474.entry.js → p-4b154e23.entry.js} +2 -2
- package/dist/affinda/{p-02a4fea4.entry.js → p-4b2c0698.entry.js} +2 -2
- package/dist/affinda/{p-6101a8e7.entry.js → p-4c4406bf.entry.js} +2 -2
- package/dist/affinda/{p-6101a8e7.entry.js.map → p-4c4406bf.entry.js.map} +1 -1
- package/dist/affinda/p-4cf65950.entry.js +2 -0
- package/dist/affinda/{p-72d92e22.entry.js.map → p-4cf65950.entry.js.map} +1 -1
- package/dist/affinda/{p-e6ebdd17.entry.js → p-4f59b554.entry.js} +2 -2
- package/dist/affinda/{p-f8c507a2.entry.js → p-50a67fb6.entry.js} +2 -2
- package/dist/affinda/{p-ed1805f8.entry.js → p-5265e82e.entry.js} +2 -2
- package/dist/affinda/{p-0a3cf810.entry.js → p-56fe6e6e.entry.js} +2 -2
- package/dist/affinda/{p-2c8a4be1.entry.js → p-5f6a5741.entry.js} +2 -2
- package/dist/affinda/p-6038a213.entry.js +2 -0
- package/dist/affinda/{p-78878799.entry.js.map → p-6038a213.entry.js.map} +1 -1
- package/dist/affinda/{p-6f32ce63.entry.js → p-6c33fee6.entry.js} +2 -2
- package/dist/affinda/{p-ca59d877.entry.js → p-6c58b283.entry.js} +2 -2
- package/dist/affinda/{p-89224154.entry.js → p-6e40dbdf.entry.js} +2 -2
- package/dist/affinda/{p-eca53803.entry.js → p-76cb736d.entry.js} +2 -2
- package/dist/affinda/{p-bdc28cb8.entry.js → p-78518e6c.entry.js} +2 -2
- package/dist/affinda/{p-56edd6de.entry.js → p-7867c2ff.entry.js} +2 -2
- package/dist/affinda/{p-a48057c0.entry.js → p-81706709.entry.js} +2 -2
- package/dist/affinda/{p-17918daf.entry.js → p-862a2509.entry.js} +2 -2
- package/dist/affinda/{p-29d51294.entry.js → p-86f6dfdc.entry.js} +2 -2
- package/dist/affinda/{p-50049e63.entry.js → p-8c4e3047.entry.js} +2 -2
- package/dist/affinda/{p-58f74509.entry.js → p-90ef7baa.entry.js} +2 -2
- package/dist/affinda/{p-64a0fa57.entry.js → p-94f51238.entry.js} +2 -2
- package/dist/affinda/{p-4d984fae.entry.js → p-95d4696a.entry.js} +2 -2
- package/dist/affinda/{p-f82ed42c.entry.js → p-9aed7039.entry.js} +2 -2
- package/dist/affinda/{p-bf52ca34.entry.js → p-9c1e9bd8.entry.js} +2 -2
- package/dist/affinda/{p-3afcca1b.entry.js → p-9eba91fd.entry.js} +2 -2
- package/dist/affinda/{p-1ddf3bd4.entry.js → p-9f3e7116.entry.js} +2 -2
- package/dist/affinda/p-MwnBSqEY.js +3 -0
- package/dist/affinda/p-MwnBSqEY.js.map +1 -0
- package/dist/affinda/{p-aea8dcee.entry.js → p-a35029eb.entry.js} +2 -2
- package/dist/affinda/{p-3aae8a0c.entry.js → p-a6eda8af.entry.js} +2 -2
- package/dist/affinda/{p-23156b61.entry.js → p-a71d528d.entry.js} +2 -2
- package/dist/affinda/{p-e49c237f.entry.js → p-a84ae4a5.entry.js} +2 -2
- package/dist/affinda/{p-8901e13c.entry.js → p-ad41f905.entry.js} +2 -2
- package/dist/affinda/{p-c753a592.entry.js → p-b2633acb.entry.js} +2 -2
- package/dist/affinda/{p-d145dc5b.entry.js → p-b2b28366.entry.js} +2 -2
- package/dist/affinda/p-c8c4783c.entry.js +2 -0
- package/dist/affinda/{p-7b595da0.entry.js.map → p-c8c4783c.entry.js.map} +1 -1
- package/dist/affinda/{p-bf2c549d.entry.js → p-da2d84f7.entry.js} +2 -2
- package/dist/affinda/{p-a4b9a1f5.entry.js → p-dbe7ab88.entry.js} +2 -2
- package/dist/affinda/{p-d28466b0.entry.js → p-e055407b.entry.js} +2 -2
- package/dist/affinda/p-e1cbe95a.entry.js +2 -0
- package/dist/affinda/{p-9be8ba6a.entry.js.map → p-e1cbe95a.entry.js.map} +1 -1
- package/dist/affinda/{p-a4a4d392.entry.js → p-e1e98cd6.entry.js} +2 -2
- package/dist/affinda/p-ea42c40b.entry.js +2 -0
- package/dist/affinda/p-ea42c40b.entry.js.map +1 -0
- package/dist/affinda/{p-9d0b9203.entry.js → p-edb1a010.entry.js} +2 -2
- package/dist/affinda/p-ef5857cf.entry.js +2 -0
- package/dist/affinda/p-f10a31cb.entry.js +2 -0
- package/dist/affinda/p-f10a31cb.entry.js.map +1 -0
- package/dist/affinda/{p-b8e3c594.entry.js → p-f9315f9e.entry.js} +2 -2
- package/dist/affinda/p-feb3d03f.entry.js +2 -0
- package/dist/cjs/af-accordion-item.cjs.entry.js +1 -1
- package/dist/cjs/af-accordion.cjs.entry.js +1 -1
- package/dist/cjs/af-aspect-ratio.cjs.entry.js +1 -1
- package/dist/cjs/af-button-group.cjs.entry.js +1 -1
- package/dist/cjs/af-button.cjs.entry.js +1 -1
- package/dist/cjs/af-card.cjs.entry.js +2 -2
- package/dist/cjs/af-card.entry.cjs.js.map +1 -1
- package/dist/cjs/af-center.cjs.entry.js +1 -1
- package/dist/cjs/af-checkbox.cjs.entry.js +1 -1
- package/dist/cjs/af-client-carousel.cjs.entry.js +21 -6
- package/dist/cjs/af-client-carousel.entry.cjs.js.map +1 -1
- package/dist/cjs/af-color-swatch.cjs.entry.js +1 -1
- package/dist/cjs/af-contact-item.cjs.entry.js +1 -1
- package/dist/cjs/af-container.cjs.entry.js +1 -1
- package/dist/cjs/af-divider.cjs.entry.js +1 -1
- package/dist/cjs/af-feature-accordion.cjs.entry.js +2 -2
- package/dist/cjs/af-feature-accordion.entry.cjs.js.map +1 -1
- package/dist/cjs/af-feature-card.cjs.entry.js +1 -1
- package/dist/cjs/af-feature-grid.cjs.entry.js +1 -1
- package/dist/cjs/af-fieldset.cjs.entry.js +1 -1
- package/dist/cjs/af-footer-column.cjs.entry.js +1 -1
- package/dist/cjs/af-footer-link.cjs.entry.js +1 -1
- package/dist/cjs/af-footer.cjs.entry.js +2 -2
- package/dist/cjs/af-footer.entry.cjs.js.map +1 -1
- package/dist/cjs/af-grid-callout.cjs.entry.js +1 -1
- package/dist/cjs/af-grid.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 +2 -2
- package/dist/cjs/af-icon-box.cjs.entry.js +1 -1
- package/dist/cjs/af-icon-button.cjs.entry.js +1 -1
- package/dist/cjs/af-icon-text.cjs.entry.js +1 -1
- package/dist/cjs/af-icon.cjs.entry.js +1 -1
- package/dist/cjs/af-illustrated-card.cjs.entry.js +2 -2
- package/dist/cjs/af-illustrated-card.entry.cjs.js.map +1 -1
- package/dist/cjs/af-image.cjs.entry.js +1 -1
- package/dist/cjs/af-in-page-banner.cjs.entry.js +2 -2
- package/dist/cjs/af-in-page-banner.entry.cjs.js.map +1 -1
- package/dist/cjs/af-inline.cjs.entry.js +1 -1
- package/dist/cjs/af-input.cjs.entry.js +1 -1
- package/dist/cjs/af-logo-well.cjs.entry.js +1 -1
- package/dist/cjs/af-nav-accordion-item.cjs.entry.js +1 -1
- package/dist/cjs/af-nav-accordion.cjs.entry.js +1 -1
- package/dist/cjs/af-nav-card.cjs.entry.js +1 -1
- package/dist/cjs/af-nav-menu-nest.cjs.entry.js +1 -1
- package/dist/cjs/af-nav-menu.cjs.entry.js +1 -1
- package/dist/cjs/af-number-badge.cjs.entry.js +1 -1
- package/dist/cjs/af-paperclip-decoration.cjs.entry.js +39 -0
- package/dist/cjs/af-paperclip-decoration.entry.cjs.js.map +1 -0
- package/dist/cjs/af-progress-line.cjs.entry.js +3 -3
- package/dist/cjs/af-radio.cjs.entry.js +1 -1
- package/dist/cjs/af-section.cjs.entry.js +3 -3
- package/dist/cjs/af-show.cjs.entry.js +2 -2
- package/dist/cjs/af-social-link.cjs.entry.js +2 -2
- package/dist/cjs/af-spacer.cjs.entry.js +2 -2
- package/dist/cjs/af-split-section.cjs.entry.js +3 -3
- package/dist/cjs/af-stack.cjs.entry.js +2 -2
- package/dist/cjs/af-stepper-step.cjs.entry.js +2 -2
- package/dist/cjs/af-stepper.cjs.entry.js +2 -2
- package/dist/cjs/af-switch.cjs.entry.js +1 -1
- package/dist/cjs/af-tab-bar.cjs.entry.js +1 -1
- package/dist/cjs/af-tab.cjs.entry.js +1 -1
- package/dist/cjs/af-tag.cjs.entry.js +1 -1
- package/dist/cjs/af-testimonial-carousel.cjs.entry.js +2 -2
- package/dist/cjs/af-testimonial-stat.cjs.entry.js +2 -2
- package/dist/cjs/af-testimonial.cjs.entry.js +3 -3
- package/dist/cjs/af-text-image-nest.cjs.entry.js +2 -2
- package/dist/cjs/af-text-image.cjs.entry.js +1 -1
- package/dist/cjs/af-textarea.cjs.entry.js +1 -1
- package/dist/cjs/af-theme-override.cjs.entry.js +2 -2
- package/dist/cjs/af-typography-lockup.cjs.entry.js +11 -5
- package/dist/cjs/af-typography-lockup.entry.cjs.js.map +1 -1
- package/dist/cjs/af-video-container.cjs.entry.js +2 -2
- package/dist/cjs/af-visually-hidden.cjs.entry.js +2 -2
- package/dist/cjs/affinda.cjs.js +2 -2
- package/dist/cjs/{index-BKMHxS4K.js → index-BzZA0USq.js} +3 -3
- package/dist/cjs/index-BzZA0USq.js.map +1 -0
- package/dist/cjs/index.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/af-card/af-card.css +4 -1
- package/dist/collection/components/af-client-carousel/af-client-carousel.css +36 -0
- package/dist/collection/components/af-client-carousel/af-client-carousel.js +58 -14
- package/dist/collection/components/af-client-carousel/af-client-carousel.js.map +1 -1
- package/dist/collection/components/af-feature-accordion/af-feature-accordion.css +27 -5
- package/dist/collection/components/af-footer/af-footer.css +5 -2
- package/dist/collection/components/af-illustrated-card/af-illustrated-card.css +5 -1
- package/dist/collection/components/af-in-page-banner/af-in-page-banner.css +6 -4
- package/dist/collection/components/af-navbar/af-navbar.css +4 -1
- package/dist/collection/components/af-paperclip-decoration/af-paperclip-decoration.css +11 -0
- package/dist/collection/components/af-paperclip-decoration/af-paperclip-decoration.js +152 -0
- package/dist/collection/components/af-paperclip-decoration/af-paperclip-decoration.js.map +1 -0
- package/dist/collection/components/af-progress-line/af-progress-line.js +2 -2
- package/dist/collection/components/af-section/af-section.js +2 -2
- package/dist/collection/components/af-show/af-show.js +1 -1
- package/dist/collection/components/af-social-link/af-social-link.js +1 -1
- package/dist/collection/components/af-spacer/af-spacer.js +1 -1
- package/dist/collection/components/af-split-section/af-split-section.js +2 -2
- package/dist/collection/components/af-stack/af-stack.js +1 -1
- package/dist/collection/components/af-stepper/af-stepper.js +1 -1
- package/dist/collection/components/af-stepper-step/af-stepper-step.js +1 -1
- package/dist/collection/components/af-testimonial/af-testimonial.js +2 -2
- package/dist/collection/components/af-testimonial-carousel/af-testimonial-carousel.js +1 -1
- package/dist/collection/components/af-testimonial-stat/af-testimonial-stat.js +1 -1
- package/dist/collection/components/af-text-image-nest/af-text-image-nest.js +1 -1
- package/dist/collection/components/af-theme-override/af-theme-override.js +1 -1
- package/dist/collection/components/af-typography-lockup/af-typography-lockup.css +36 -12
- package/dist/collection/components/af-typography-lockup/af-typography-lockup.js +20 -8
- package/dist/collection/components/af-typography-lockup/af-typography-lockup.js.map +1 -1
- package/dist/collection/components/af-video-container/af-video-container.js +1 -1
- package/dist/collection/components/af-visually-hidden/af-visually-hidden.js +1 -1
- package/dist/components/af-accordion-item.js +1 -1
- package/dist/components/af-accordion.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 +1 -1
- package/dist/components/af-center.js +1 -1
- package/dist/components/af-checkbox.js +1 -1
- package/dist/components/af-client-carousel.js +23 -7
- package/dist/components/af-client-carousel.js.map +1 -1
- package/dist/components/af-color-swatch.js +1 -1
- package/dist/components/af-contact-item.js +1 -1
- package/dist/components/af-container.js +1 -1
- package/dist/components/af-divider.js +1 -1
- package/dist/components/af-feature-accordion.js +2 -2
- package/dist/components/af-feature-accordion.js.map +1 -1
- package/dist/components/af-feature-card.js +1 -1
- package/dist/components/af-feature-grid.js +2 -2
- package/dist/components/af-fieldset.js +1 -1
- package/dist/components/af-footer-column.js +1 -1
- package/dist/components/af-footer-link.js +1 -1
- package/dist/components/af-footer.js +2 -2
- package/dist/components/af-footer.js.map +1 -1
- package/dist/components/af-grid-callout.js +2 -2
- package/dist/components/af-grid.js +1 -1
- package/dist/components/af-heading.js +1 -1
- package/dist/components/af-icon-box.js +1 -1
- package/dist/components/af-icon-button.js +1 -1
- package/dist/components/af-icon-text.js +4 -4
- package/dist/components/af-icon.js +1 -1
- package/dist/components/af-illustrated-card.js +1 -1
- package/dist/components/af-image.js +1 -1
- package/dist/components/af-in-page-banner.js +3 -3
- package/dist/components/af-in-page-banner.js.map +1 -1
- package/dist/components/af-inline.js +1 -1
- package/dist/components/af-input.js +1 -1
- package/dist/components/af-logo-well.js +1 -1
- package/dist/components/af-logo.js +1 -1
- package/dist/components/af-nav-accordion-item.js +1 -1
- package/dist/components/af-nav-accordion.js +1 -1
- package/dist/components/af-nav-card.js +1 -1
- package/dist/components/af-nav-item.js +1 -1
- package/dist/components/af-nav-menu-nest.js +1 -1
- package/dist/components/af-nav-menu.js +1 -1
- package/dist/components/af-navbar.js +1 -1
- package/dist/components/af-number-badge.js +1 -1
- package/dist/components/af-paperclip-decoration.d.ts +11 -0
- package/dist/components/af-paperclip-decoration.js +64 -0
- package/dist/components/af-paperclip-decoration.js.map +1 -0
- package/dist/components/af-progress-line.js +1 -1
- package/dist/components/af-radio.js +1 -1
- package/dist/components/af-section.js +4 -4
- package/dist/components/af-show.js +2 -2
- package/dist/components/af-social-link.js +2 -2
- package/dist/components/af-spacer.js +2 -2
- package/dist/components/af-split-section.js +4 -4
- package/dist/components/af-stack.js +2 -2
- package/dist/components/af-stepper-step.js +2 -2
- package/dist/components/af-stepper.js +2 -2
- package/dist/components/af-switch.js +1 -1
- package/dist/components/af-tab-bar.js +1 -1
- package/dist/components/af-tab.js +1 -1
- package/dist/components/af-tag.js +1 -1
- package/dist/components/af-testimonial-carousel.js +3 -3
- package/dist/components/af-testimonial-stat.js +4 -4
- package/dist/components/af-testimonial.js +6 -6
- package/dist/components/af-text-image-nest.js +2 -2
- package/dist/components/af-text-image.js +2 -2
- package/dist/components/af-text.js +1 -1
- package/dist/components/af-textarea.js +1 -1
- package/dist/components/af-theme-override.js +2 -2
- package/dist/components/af-typography-lockup.js +1 -1
- package/dist/components/af-video-container.js +4 -4
- package/dist/components/af-visually-hidden.js +2 -2
- package/dist/components/index.js +24 -24
- package/dist/components/{p-CyTj19Yy.js → p--gChEc0P.js} +3 -3
- package/dist/components/{p-CyTj19Yy.js.map → p--gChEc0P.js.map} +1 -1
- package/dist/components/{p-0-_hX4o-.js → p-BRDu9zN1.js} +3 -3
- package/dist/components/{p-0-_hX4o-.js.map → p-BRDu9zN1.js.map} +1 -1
- package/dist/components/{p-BgDSP0Qs.js → p-BROLmNeM.js} +3 -3
- package/dist/components/{p-BgDSP0Qs.js.map → p-BROLmNeM.js.map} +1 -1
- package/dist/components/{p-D-Xf1-qQ.js → p-BT13eL0Y.js} +3 -3
- package/dist/components/{p-D-Xf1-qQ.js.map → p-BT13eL0Y.js.map} +1 -1
- package/dist/components/{p-CBrB-J4s.js → p-BW-FxZwa.js} +3 -3
- package/dist/components/{p-CBrB-J4s.js.map → p-BW-FxZwa.js.map} +1 -1
- package/dist/components/{p-BFLKhcjQ.js → p-B_OoX__z.js} +3 -3
- package/dist/components/{p-BFLKhcjQ.js.map → p-B_OoX__z.js.map} +1 -1
- package/dist/components/{p-BQ1El6-J.js → p-BgXXQG75.js} +3 -3
- package/dist/components/{p-BQ1El6-J.js.map → p-BgXXQG75.js.map} +1 -1
- package/dist/components/{p-CVYQKqKI.js → p-Bh6Cfgtj.js} +3 -3
- package/dist/components/{p-CVYQKqKI.js.map → p-Bh6Cfgtj.js.map} +1 -1
- package/dist/components/{p-C8y3mc7N.js → p-C4G6votC.js} +3 -3
- package/dist/components/{p-C8y3mc7N.js.map → p-C4G6votC.js.map} +1 -1
- package/dist/components/{p-noO3IF9V.js → p-C6-JATRR.js} +6 -6
- package/dist/components/{p-noO3IF9V.js.map → p-C6-JATRR.js.map} +1 -1
- package/dist/components/p-CKLkuSI3.js +53 -0
- package/dist/components/p-CKLkuSI3.js.map +1 -0
- package/dist/components/{p-BJmoxr_I.js → p-CNzQtskW.js} +5 -5
- package/dist/components/{p-BJmoxr_I.js.map → p-CNzQtskW.js.map} +1 -1
- package/dist/components/{p-DIIZN41O.js → p-CP8rLe_C.js} +3 -3
- package/dist/components/{p-DIIZN41O.js.map → p-CP8rLe_C.js.map} +1 -1
- package/dist/components/{p-Btsw1ple.js → p-CX0pktY8.js} +3 -3
- package/dist/components/{p-Btsw1ple.js.map → p-CX0pktY8.js.map} +1 -1
- package/dist/components/{p-BntvCg5H.js → p-CYKk6Qhi.js} +3 -3
- package/dist/components/{p-BntvCg5H.js.map → p-CYKk6Qhi.js.map} +1 -1
- package/dist/components/{p-BjJS1_8G.js → p-CoL_hRAR.js} +3 -3
- package/dist/components/{p-BjJS1_8G.js.map → p-CoL_hRAR.js.map} +1 -1
- package/dist/components/{p-CkYQbs2f.js → p-D8DmhESZ.js} +3 -3
- package/dist/components/{p-CkYQbs2f.js.map → p-D8DmhESZ.js.map} +1 -1
- package/dist/components/{p-DvXggVot.js → p-DJC-C2BS.js} +3 -3
- package/dist/components/{p-DvXggVot.js.map → p-DJC-C2BS.js.map} +1 -1
- package/dist/components/{p-287-nef9.js → p-DNeNJhuM.js} +14 -8
- package/dist/components/p-DNeNJhuM.js.map +1 -0
- package/dist/components/{p-jTq4gh1Q.js → p-DO9J0XTo.js} +5 -5
- package/dist/components/{p-jTq4gh1Q.js.map → p-DO9J0XTo.js.map} +1 -1
- package/dist/components/{p-BBpihWJI.js → p-DOgb6SUj.js} +3 -3
- package/dist/components/p-DOgb6SUj.js.map +1 -0
- package/dist/components/{p-DREa7k5l.js → p-DbVc-b1e.js} +3 -3
- package/dist/components/{p-DREa7k5l.js.map → p-DbVc-b1e.js.map} +1 -1
- package/dist/components/{p-a9H_FzMp.js → p-Dd3nOGt_.js} +3 -3
- package/dist/components/{p-a9H_FzMp.js.map → p-Dd3nOGt_.js.map} +1 -1
- package/dist/components/{p-CrftZP-C.js → p-Dx_UXI2a.js} +3 -3
- package/dist/components/{p-CrftZP-C.js.map → p-Dx_UXI2a.js.map} +1 -1
- package/dist/components/{p-BnX_qYj5.js → p-DyZaoX4Q.js} +3 -3
- package/dist/components/{p-BnX_qYj5.js.map → p-DyZaoX4Q.js.map} +1 -1
- package/dist/components/{p-tiZXMu0t.js → p-HMlLQQwp.js} +5 -5
- package/dist/components/p-HMlLQQwp.js.map +1 -0
- package/dist/components/{p-DcLua_lK.js → p-NtJ_O8-z.js} +3 -3
- package/dist/components/{p-DcLua_lK.js.map → p-NtJ_O8-z.js.map} +1 -1
- package/dist/components/{p-eAysTBjl.js → p-i_6TLQJ5.js} +4 -4
- package/dist/components/{p-eAysTBjl.js.map → p-i_6TLQJ5.js.map} +1 -1
- package/dist/components/{p-D4YzNoal.js → p-kEqwmn80.js} +3 -3
- package/dist/components/{p-D4YzNoal.js.map → p-kEqwmn80.js.map} +1 -1
- package/dist/esm/af-accordion-item.entry.js +1 -1
- package/dist/esm/af-accordion.entry.js +1 -1
- package/dist/esm/af-aspect-ratio.entry.js +1 -1
- package/dist/esm/af-button-group.entry.js +1 -1
- package/dist/esm/af-button.entry.js +1 -1
- package/dist/esm/af-card.entry.js +2 -2
- package/dist/esm/af-card.entry.js.map +1 -1
- package/dist/esm/af-center.entry.js +1 -1
- package/dist/esm/af-checkbox.entry.js +1 -1
- package/dist/esm/af-client-carousel.entry.js +21 -6
- package/dist/esm/af-client-carousel.entry.js.map +1 -1
- package/dist/esm/af-color-swatch.entry.js +1 -1
- package/dist/esm/af-contact-item.entry.js +1 -1
- package/dist/esm/af-container.entry.js +1 -1
- package/dist/esm/af-divider.entry.js +1 -1
- package/dist/esm/af-feature-accordion.entry.js +2 -2
- package/dist/esm/af-feature-accordion.entry.js.map +1 -1
- package/dist/esm/af-feature-card.entry.js +1 -1
- package/dist/esm/af-feature-grid.entry.js +1 -1
- package/dist/esm/af-fieldset.entry.js +1 -1
- package/dist/esm/af-footer-column.entry.js +1 -1
- package/dist/esm/af-footer-link.entry.js +1 -1
- package/dist/esm/af-footer.entry.js +2 -2
- package/dist/esm/af-footer.entry.js.map +1 -1
- package/dist/esm/af-grid-callout.entry.js +1 -1
- package/dist/esm/af-grid.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 +2 -2
- package/dist/esm/af-icon-box.entry.js +1 -1
- package/dist/esm/af-icon-button.entry.js +1 -1
- package/dist/esm/af-icon-text.entry.js +1 -1
- package/dist/esm/af-icon.entry.js +1 -1
- package/dist/esm/af-illustrated-card.entry.js +2 -2
- package/dist/esm/af-illustrated-card.entry.js.map +1 -1
- package/dist/esm/af-image.entry.js +1 -1
- package/dist/esm/af-in-page-banner.entry.js +2 -2
- package/dist/esm/af-in-page-banner.entry.js.map +1 -1
- package/dist/esm/af-inline.entry.js +1 -1
- package/dist/esm/af-input.entry.js +1 -1
- package/dist/esm/af-logo-well.entry.js +1 -1
- package/dist/esm/af-nav-accordion-item.entry.js +1 -1
- package/dist/esm/af-nav-accordion.entry.js +1 -1
- package/dist/esm/af-nav-card.entry.js +1 -1
- package/dist/esm/af-nav-menu-nest.entry.js +1 -1
- package/dist/esm/af-nav-menu.entry.js +1 -1
- package/dist/esm/af-number-badge.entry.js +1 -1
- package/dist/esm/af-paperclip-decoration.entry.js +37 -0
- package/dist/esm/af-paperclip-decoration.entry.js.map +1 -0
- package/dist/esm/af-progress-line.entry.js +3 -3
- package/dist/esm/af-radio.entry.js +1 -1
- package/dist/esm/af-section.entry.js +3 -3
- package/dist/esm/af-show.entry.js +2 -2
- package/dist/esm/af-social-link.entry.js +2 -2
- package/dist/esm/af-spacer.entry.js +2 -2
- package/dist/esm/af-split-section.entry.js +3 -3
- package/dist/esm/af-stack.entry.js +2 -2
- package/dist/esm/af-stepper-step.entry.js +2 -2
- package/dist/esm/af-stepper.entry.js +2 -2
- package/dist/esm/af-switch.entry.js +1 -1
- package/dist/esm/af-tab-bar.entry.js +1 -1
- package/dist/esm/af-tab.entry.js +1 -1
- package/dist/esm/af-tag.entry.js +1 -1
- package/dist/esm/af-testimonial-carousel.entry.js +2 -2
- package/dist/esm/af-testimonial-stat.entry.js +2 -2
- package/dist/esm/af-testimonial.entry.js +3 -3
- package/dist/esm/af-text-image-nest.entry.js +2 -2
- package/dist/esm/af-text-image.entry.js +1 -1
- package/dist/esm/af-textarea.entry.js +1 -1
- package/dist/esm/af-theme-override.entry.js +2 -2
- package/dist/esm/af-typography-lockup.entry.js +11 -5
- package/dist/esm/af-typography-lockup.entry.js.map +1 -1
- package/dist/esm/af-video-container.entry.js +2 -2
- package/dist/esm/af-visually-hidden.entry.js +2 -2
- package/dist/esm/affinda.js +3 -3
- package/dist/esm/{index-C7nUZsb8.js → index-MwnBSqEY.js} +3 -3
- package/dist/esm/index-MwnBSqEY.js.map +1 -0
- package/dist/esm/index.js +1 -1
- package/dist/esm/loader.js +3 -3
- package/dist/types/components/af-client-carousel/af-client-carousel.d.ts +25 -12
- package/dist/types/components/af-paperclip-decoration/af-paperclip-decoration.d.ts +50 -0
- package/dist/types/components/af-typography-lockup/af-typography-lockup.d.ts +11 -4
- package/dist/types/components.d.ts +233 -46
- package/package.json +4 -4
- package/dist/affinda/p-42dc01c7.entry.js +0 -2
- package/dist/affinda/p-45f6c49e.entry.js +0 -2
- package/dist/affinda/p-4f899b6c.entry.js +0 -2
- package/dist/affinda/p-72d92e22.entry.js +0 -2
- package/dist/affinda/p-78878799.entry.js +0 -2
- package/dist/affinda/p-7b595da0.entry.js +0 -2
- package/dist/affinda/p-81a91090.entry.js +0 -2
- package/dist/affinda/p-81a91090.entry.js.map +0 -1
- package/dist/affinda/p-8b26a82c.entry.js +0 -2
- package/dist/affinda/p-9be8ba6a.entry.js +0 -2
- package/dist/affinda/p-C7nUZsb8.js +0 -3
- package/dist/affinda/p-C7nUZsb8.js.map +0 -1
- package/dist/affinda/p-fee5d2ac.entry.js +0 -2
- package/dist/cjs/index-BKMHxS4K.js.map +0 -1
- package/dist/components/p-287-nef9.js.map +0 -1
- package/dist/components/p-BBpihWJI.js.map +0 -1
- package/dist/components/p-BxwCXPuv.js +0 -53
- package/dist/components/p-BxwCXPuv.js.map +0 -1
- package/dist/components/p-tiZXMu0t.js.map +0 -1
- package/dist/esm/index-C7nUZsb8.js.map +0 -1
- /package/dist/affinda/{p-28aaeb3e.entry.js.map → p-0137e7a5.entry.js.map} +0 -0
- /package/dist/affinda/{p-c5ba91b3.entry.js.map → p-0201c8bd.entry.js.map} +0 -0
- /package/dist/affinda/{p-150f8363.entry.js.map → p-083fc528.entry.js.map} +0 -0
- /package/dist/affinda/{p-c5fd819e.entry.js.map → p-0e469ad2.entry.js.map} +0 -0
- /package/dist/affinda/{p-7813390b.entry.js.map → p-15f0bd34.entry.js.map} +0 -0
- /package/dist/affinda/{p-7fa67014.entry.js.map → p-1c96856a.entry.js.map} +0 -0
- /package/dist/affinda/{p-4d5b0112.entry.js.map → p-24e74c10.entry.js.map} +0 -0
- /package/dist/affinda/{p-5aea4c4f.entry.js.map → p-2e6192eb.entry.js.map} +0 -0
- /package/dist/affinda/{p-7a8ca627.entry.js.map → p-35607741.entry.js.map} +0 -0
- /package/dist/affinda/{p-8b74fd5e.entry.js.map → p-364ffa25.entry.js.map} +0 -0
- /package/dist/affinda/{p-fb76a5ef.entry.js.map → p-3ee906de.entry.js.map} +0 -0
- /package/dist/affinda/{p-fb054540.entry.js.map → p-41643147.entry.js.map} +0 -0
- /package/dist/affinda/{p-226bad82.entry.js.map → p-43f40921.entry.js.map} +0 -0
- /package/dist/affinda/{p-d34da5ef.entry.js.map → p-48aadea9.entry.js.map} +0 -0
- /package/dist/affinda/{p-398cb86b.entry.js.map → p-4a355b69.entry.js.map} +0 -0
- /package/dist/affinda/{p-bf8b5474.entry.js.map → p-4b154e23.entry.js.map} +0 -0
- /package/dist/affinda/{p-02a4fea4.entry.js.map → p-4b2c0698.entry.js.map} +0 -0
- /package/dist/affinda/{p-e6ebdd17.entry.js.map → p-4f59b554.entry.js.map} +0 -0
- /package/dist/affinda/{p-f8c507a2.entry.js.map → p-50a67fb6.entry.js.map} +0 -0
- /package/dist/affinda/{p-ed1805f8.entry.js.map → p-5265e82e.entry.js.map} +0 -0
- /package/dist/affinda/{p-0a3cf810.entry.js.map → p-56fe6e6e.entry.js.map} +0 -0
- /package/dist/affinda/{p-2c8a4be1.entry.js.map → p-5f6a5741.entry.js.map} +0 -0
- /package/dist/affinda/{p-6f32ce63.entry.js.map → p-6c33fee6.entry.js.map} +0 -0
- /package/dist/affinda/{p-ca59d877.entry.js.map → p-6c58b283.entry.js.map} +0 -0
- /package/dist/affinda/{p-89224154.entry.js.map → p-6e40dbdf.entry.js.map} +0 -0
- /package/dist/affinda/{p-eca53803.entry.js.map → p-76cb736d.entry.js.map} +0 -0
- /package/dist/affinda/{p-bdc28cb8.entry.js.map → p-78518e6c.entry.js.map} +0 -0
- /package/dist/affinda/{p-56edd6de.entry.js.map → p-7867c2ff.entry.js.map} +0 -0
- /package/dist/affinda/{p-a48057c0.entry.js.map → p-81706709.entry.js.map} +0 -0
- /package/dist/affinda/{p-17918daf.entry.js.map → p-862a2509.entry.js.map} +0 -0
- /package/dist/affinda/{p-29d51294.entry.js.map → p-86f6dfdc.entry.js.map} +0 -0
- /package/dist/affinda/{p-50049e63.entry.js.map → p-8c4e3047.entry.js.map} +0 -0
- /package/dist/affinda/{p-58f74509.entry.js.map → p-90ef7baa.entry.js.map} +0 -0
- /package/dist/affinda/{p-64a0fa57.entry.js.map → p-94f51238.entry.js.map} +0 -0
- /package/dist/affinda/{p-4d984fae.entry.js.map → p-95d4696a.entry.js.map} +0 -0
- /package/dist/affinda/{p-f82ed42c.entry.js.map → p-9aed7039.entry.js.map} +0 -0
- /package/dist/affinda/{p-bf52ca34.entry.js.map → p-9c1e9bd8.entry.js.map} +0 -0
- /package/dist/affinda/{p-3afcca1b.entry.js.map → p-9eba91fd.entry.js.map} +0 -0
- /package/dist/affinda/{p-1ddf3bd4.entry.js.map → p-9f3e7116.entry.js.map} +0 -0
- /package/dist/affinda/{p-aea8dcee.entry.js.map → p-a35029eb.entry.js.map} +0 -0
- /package/dist/affinda/{p-3aae8a0c.entry.js.map → p-a6eda8af.entry.js.map} +0 -0
- /package/dist/affinda/{p-23156b61.entry.js.map → p-a71d528d.entry.js.map} +0 -0
- /package/dist/affinda/{p-e49c237f.entry.js.map → p-a84ae4a5.entry.js.map} +0 -0
- /package/dist/affinda/{p-8901e13c.entry.js.map → p-ad41f905.entry.js.map} +0 -0
- /package/dist/affinda/{p-c753a592.entry.js.map → p-b2633acb.entry.js.map} +0 -0
- /package/dist/affinda/{p-d145dc5b.entry.js.map → p-b2b28366.entry.js.map} +0 -0
- /package/dist/affinda/{p-bf2c549d.entry.js.map → p-da2d84f7.entry.js.map} +0 -0
- /package/dist/affinda/{p-a4b9a1f5.entry.js.map → p-dbe7ab88.entry.js.map} +0 -0
- /package/dist/affinda/{p-d28466b0.entry.js.map → p-e055407b.entry.js.map} +0 -0
- /package/dist/affinda/{p-a4a4d392.entry.js.map → p-e1e98cd6.entry.js.map} +0 -0
- /package/dist/affinda/{p-9d0b9203.entry.js.map → p-edb1a010.entry.js.map} +0 -0
- /package/dist/affinda/{p-4f899b6c.entry.js.map → p-ef5857cf.entry.js.map} +0 -0
- /package/dist/affinda/{p-b8e3c594.entry.js.map → p-f9315f9e.entry.js.map} +0 -0
- /package/dist/affinda/{p-42dc01c7.entry.js.map → p-feb3d03f.entry.js.map} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"af-in-page-banner.entry.esm.js","sources":["src/components/af-in-page-banner/af-in-page-banner.css?tag=af-in-page-banner&encapsulation=scoped","src/components/af-in-page-banner/af-in-page-banner.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n/* ==========================================================================\n Banner Container\n \n Design specs from Figma:\n - Desktop: max-width 1280px, gap 40px, left padding 40px, right padding 148px\n - Border radius: 32px (desktop), 24px (mobile)\n - Content padding vertical: 48px (margins/margin TB tight)\n ========================================================================== */\n\n.banner {\n position: relative;\n display: flex;\n align-items: center;\n gap: 40px;\n padding-left: 40px;\n padding-right: 148px;\n padding-top: 0;\n padding-bottom: 0;\n border-radius: var(--radii-card-level-1, 32px);\n overflow: hidden;\n max-width: 1280px;\n width: 100%;\n}\n\n/* ==========================================================================\n Theme Variants - Background Colors\n \n Colors from Figma:\n - mist-green: #c6d5d1 (background/base)\n - inkwell: #14343b (Colour/Brand/Inkwell)\n - soft-clay: #c0ab8d (softclay-400)\n - white-ivory: #fff9ee (background/ivory-paper)\n ========================================================================== */\n\n.banner.theme-mist-green {\n background-color: var(--colour-brand-mist-green, #c6d5d1);\n \n /* Typography */\n --banner-heading-color: var(--colour-brand-inkwell, #14343b);\n --banner-body-color: var(--colour-inkwell-400, #2b484f);\n \n /* Buttons - ice primary, inkwell secondary */\n --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);\n --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);\n --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);\n --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);\n --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);\n}\n\n.banner.theme-inkwell {\n background-color: var(--colour-brand-inkwell, #14343b);\n \n /* Typography - light colors on dark background */\n --banner-heading-color: var(--colour-brand-mist-green, #c6d5d1);\n --banner-body-color: var(--colour-inkwell-100, #d0d6d8);\n \n /* Buttons - ice primary, white secondary */\n --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);\n --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);\n --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);\n --af-button-secondary-text: var(--colour-brand-white, #ffffff);\n --af-button-secondary-stroke: var(--colour-brand-white, #ffffff);\n}\n\n.banner.theme-soft-clay {\n background-color: var(--colour-softclay-400, #c0ab8d);\n \n /* Typography */\n --banner-heading-color: var(--colour-brand-inkwell, #14343b);\n --banner-body-color: var(--colour-inkwell-450, #203e45);\n \n /* Buttons */\n --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);\n --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);\n --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);\n --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);\n --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);\n}\n\n.banner.theme-white-ivory {\n background-color: var(--colour-brand-ivory-paper, #fff9ee);\n \n /* Typography */\n --banner-heading-color: var(--colour-brand-inkwell, #14343b);\n --banner-body-color: var(--colour-inkwell-400, #2b484f);\n \n /* Buttons */\n --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);\n --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);\n --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);\n --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);\n --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);\n}\n\n/* ==========================================================================\n Decorative Wave Overlay\n \n Figma specs:\n - Position: bottom -17.41px, right -156px\n - Size: 521px x 323px\n - Fill colors per theme\n ========================================================================== */\n\n.banner__wave-overlay {\n position: absolute;\n bottom: -17px;\n right: -156px;\n width: 521px;\n height: 323px;\n pointer-events: none;\n z-index: 0;\n}\n\n.banner__wave-svg {\n width: 100%;\n height: 100%;\n}\n\n/* ==========================================================================\n Theme-specific Wave Colors\n The SVG uses currentColor, so we set color on the overlay container.\n ========================================================================== */\n\n.banner.theme-mist-green .banner__wave-overlay {\n color: #d1ddda;\n}\n\n.banner.theme-inkwell .banner__wave-overlay {\n color: rgba(255, 255, 255, 0.06);\n}\n\n.banner.theme-soft-clay .banner__wave-overlay {\n color: rgba(20, 52, 59, 0.06);\n}\n\n.banner.theme-white-ivory .banner__wave-overlay {\n color: rgba(20, 52, 59, 0.04);\n}\n\n/* ==========================================================================\n Illustration Area\n \n Figma specs:\n - Desktop: max 360px x 360px, aspect ratio preserved\n - Mobile: 212px x 212px, positioned absolute top-right\n ========================================================================== */\n\n.banner__illustration {\n position: relative;\n z-index: 1;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 288px;\n height: 288px;\n max-width: 288px;\n max-height: 288px;\n aspect-ratio: 1;\n}\n\n.banner__illustration-img {\n width: 100%;\n height: 100%;\n object-fit: contain;\n}\n\n/* Allow slotted content to fill the illustration area */\n.banner__illustration ::slotted(*) {\n width: 100%;\n height: 100%;\n object-fit: contain;\n}\n\n/* ==========================================================================\n Content Area (Typography Lockup)\n \n Figma specs:\n - Vertical padding: 48px (margins/margin TB tight)\n - Gap between copy and buttons: 40px\n - Gap between heading and description: 16px\n - Max-width for copy: 840px\n ========================================================================== */\n\n.banner__content {\n position: relative;\n z-index: 1;\n flex: 1 1 0;\n min-width: 0;\n min-height: 0;\n display: flex;\n flex-direction: column;\n gap: 40px;\n padding-top: 38px;\n padding-bottom: 38px;\n padding-right: 0;\n padding-left: 0;\n}\n\n.banner__copy {\n display: flex;\n flex-direction: column;\n gap: 16px;\n max-width: 840px;\n width: 100%;\n white-space: normal;\n}\n\n/* ==========================================================================\n Heading\n \n Figma specs:\n - Desktop: 44px, line-height 1, letter-spacing -0.88px (-2%)\n - Mobile: 32px, line-height 1, letter-spacing -0.64px (-2%)\n - Font: Typography/primaryFont (NeuSans), weight: Typography/headingWeight (500)\n ========================================================================== */\n\n.banner__heading {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: var(--typography-headingweight, 500);\n font-size: 44px;\n line-height: 1;\n letter-spacing: -0.88px;\n color: var(--banner-heading-color, var(--colour-brand-inkwell, #14343b));\n margin: 0;\n white-space: normal;\n}\n\n/* ==========================================================================\n Description\n \n Figma specs:\n - Font size: 18px\n - Line height: 26px\n - Font: Typography/primaryFont, weight: Typography/bodyWeight (400)\n - Color: typography/body-default #2b484f (or theme variant)\n ========================================================================== */\n\n.banner__description {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: var(--typography-bodyweight, 400);\n font-size: 18px;\n line-height: 26px;\n color: var(--banner-body-color, var(--colour-inkwell-400, #2b484f));\n margin: 0;\n white-space: normal;\n}\n\n/* ==========================================================================\n Button Group\n \n Figma specs:\n - Desktop: horizontal, gap 12px\n - Mobile: vertical, full-width buttons, gap 12px\n - Button padding: 24px horizontal, 12px vertical\n - Button border-radius: 9999px (radii/button)\n ========================================================================== */\n\n.banner__buttons {\n display: flex;\n flex-direction: row;\n gap: 24px;\n align-items: flex-start;\n}\n\n/* ==========================================================================\n Mobile Responsive Styles (≤768px)\n \n Figma mobile specs:\n - Width: 100%\n - Border radius: 24px\n - Padding top: 224px (space for illustration)\n - Content padding: pb 48px, pt 16px, px 28px\n - Content min-height: 320px\n - Illustration: 212px x 212px, positioned at top: 12px, centered horizontally\n ========================================================================== */\n\n/* mobile-only */\n@media (max-width: 768px) {\n .banner {\n flex-direction: column;\n align-items: stretch;\n padding: 224px 0 0 0;\n border-radius: var(--radii-card-level-1-mobile, 24px);\n max-width: 100%;\n min-height: auto;\n }\n\n /* Wave overlay hidden on mobile */\n .banner__wave-overlay {\n display: none;\n }\n\n /* Illustration positioned at top-right on mobile */\n .banner__illustration {\n position: absolute;\n top: 12px;\n left: auto;\n right: 0;\n transform: none;\n width: 212px;\n height: 212px;\n max-width: 280px;\n max-height: 280px;\n }\n\n /* Content takes full width with min-height */\n .banner__content {\n width: 100%;\n min-height: 320px;\n padding: 16px 28px 48px 28px;\n gap: 40px;\n flex: none;\n }\n\n /* Ensure copy section doesn't constrain width on mobile */\n .banner__copy {\n max-width: 100%;\n }\n\n /* Mobile heading size */\n .banner__heading {\n font-size: 32px;\n letter-spacing: -0.64px;\n }\n\n /* Buttons stack vertically on mobile, full width */\n .banner__buttons {\n flex-direction: column;\n align-items: stretch;\n gap: 12px;\n width: 100%;\n }\n\n /* Ensure af-button takes full width on mobile */\n .banner__buttons {\n --af-button-width: 100%;\n }\n\n .banner__buttons af-button {\n display: block;\n width: 100%;\n }\n}\n\n/* ==========================================================================\n Small Mobile (≤480px)\n ========================================================================== */\n\n/* ≤ small */\n@media (max-width: 480px) {\n .banner {\n padding-top: 200px;\n }\n\n .banner__illustration {\n /* Keep right-aligned, just adjust size */\n right: 0;\n width: 180px;\n height: 180px;\n }\n\n .banner__content {\n padding: 16px 20px 36px 20px;\n min-height: 280px;\n }\n\n .banner__heading {\n font-size: 28px;\n letter-spacing: -0.56px;\n }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\ntype BannerTheme = 'white-ivory' | 'mist-green' | 'soft-clay' | 'inkwell';\n\n/**\n * In-page banner component for call-to-action content.\n * \n * A banner card with illustration, heading, description, and action buttons.\n * Typically placed inside a neutral (white) Section to show off its themed background.\n * \n * The component has its own theme prop to control its background color and styling.\n * \n * **Illustration Usage:**\n * Use `illustrationUrl` to pass an illustration image URL. For theme-matched illustrations,\n * use `getIllustrationUrlByScene()` from `@affinda/illustrations` in your consuming app:\n * \n * ```tsx\n * import { getIllustrationUrlByScene } from '@affinda/illustrations';\n * \n * <InPageBanner\n * theme=\"inkwell\"\n * illustrationUrl={getIllustrationUrlByScene('automate', 'inkwell')}\n * ...\n * />\n * ```\n * \n * Alternatively, use the `illustration` slot for completely custom content.\n *\n * **Slot-based composition (preferred for rich content):**\n * - `heading` — heading markup (overrides the `heading` prop when provided).\n * - `description` — description markup (overrides the `description` prop).\n * - `buttons` — custom button group (overrides the primary/secondary button\n * props; use when you need ghost variants, more than two buttons, or\n * per-button icons).\n * - `illustration` — custom illustration markup.\n *\n * The string props remain supported for simple cases.\n */\n@Component({\n tag: 'af-in-page-banner',\n styleUrl: 'af-in-page-banner.css',\n shadow: false,\n scoped: true,\n})\nexport class AfInPageBanner {\n /** Theme - sets the banner background color and typography colors */\n @Prop() theme: BannerTheme = 'mist-green';\n\n /** Banner heading */\n @Prop() heading: string = '';\n\n /** Banner description */\n @Prop() description: string = '';\n\n /** Primary button text */\n @Prop() primaryButtonText: string = '';\n\n /** Primary button URL */\n @Prop() primaryButtonUrl: string = '#';\n\n /** Secondary button text (optional - if empty, button won't show) */\n @Prop() secondaryButtonText: string = '';\n\n /** Secondary button URL */\n @Prop() secondaryButtonUrl: string = '#';\n\n /** \n * Illustration URL. For theme-matched illustrations, use getIllustrationUrlByScene() \n * from @affinda/illustrations in your app code.\n */\n @Prop() illustrationUrl: string = '';\n\n /** Whether to show the decorative wave overlay */\n @Prop() showWaveDecoration: boolean = true;\n\n /**\n * Renders the decorative wave SVG overlay.\n * Uses the Affinda brand \"infinity loop\" wave pattern.\n * Fill color is controlled via CSS custom properties per theme.\n */\n private renderWaveOverlay() {\n return (\n <div class=\"banner__wave-overlay\" aria-hidden=\"true\">\n <svg \n viewBox=\"0 0 521 323\" \n fill=\"none\" \n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"banner__wave-svg\"\n >\n <path \n d=\"M473.775 46.273C443.539 15.92 403.701 -0.631616 361.351 0.0184478H154.183L112.67 67.225H361.893C362.189 67.225 362.533 67.225 362.829 67.225C387.155 67.225 410.004 76.7259 427.289 94.0776C445.017 111.879 454.816 135.682 454.816 161.134C454.816 213.389 412.959 255.843 361.548 255.843H108.041C84.9457 255.843 66.1345 236.742 66.1345 213.289C66.1345 189.837 84.9949 170.435 107.992 169.735H334.957L377.799 102.528H106.859C47.9636 104.029 0 153.683 0 213.289C0 272.895 48.456 323 108.041 323H361.548C449.449 323 521 250.343 521 161.084C521 117.53 504.257 76.7759 473.824 46.2229L473.775 46.273Z\" \n fill=\"currentColor\"\n />\n </svg>\n </div>\n );\n }\n\n render() {\n return (\n <Host>\n <div class={`banner theme-${this.theme}`}>\n {/* Decorative wave overlay */}\n {this.showWaveDecoration && this.renderWaveOverlay()}\n\n {/* Illustration area */}\n <div class=\"banner__illustration\">\n {this.illustrationUrl ? (\n <img \n src={this.illustrationUrl} \n alt=\"\" \n class=\"banner__illustration-img\" \n loading=\"lazy\"\n />\n ) : (\n <slot name=\"illustration\"></slot>\n )}\n </div>\n\n {/* Content area — slots take precedence over string props. */}\n <div class=\"banner__content\">\n <div class=\"banner__copy\">\n <h2 class=\"banner__heading\">\n <slot name=\"heading\">{this.heading}</slot>\n </h2>\n <div class=\"banner__description\">\n <slot name=\"description\">{this.description}</slot>\n </div>\n </div>\n\n <div class=\"banner__buttons\">\n <slot name=\"buttons\">\n {this.primaryButtonText && (\n <af-button href={this.primaryButtonUrl} variant=\"primary\">\n {this.primaryButtonText}\n </af-button>\n )}\n {this.secondaryButtonText && (\n <af-button href={this.secondaryButtonUrl} variant=\"secondary\">\n {this.secondaryButtonText}\n </af-button>\n )}\n </slot>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"af-in-page-banner.entry.esm.js","sources":["src/components/af-in-page-banner/af-in-page-banner.css?tag=af-in-page-banner&encapsulation=scoped","src/components/af-in-page-banner/af-in-page-banner.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n/* ==========================================================================\n Banner Container\n\n Design specs from Figma:\n - Desktop: max-width 1280px, gap 40px, left padding 40px, right padding 148px\n - Border radius: radius-lg (20px) — aligned with af-card across the token ladder\n - Content padding vertical: 48px (margins/margin TB tight)\n ========================================================================== */\n\n.banner {\n position: relative;\n display: flex;\n align-items: center;\n gap: 40px;\n padding-left: 40px;\n padding-right: 148px;\n padding-top: 0;\n padding-bottom: 0;\n border-radius: var(--radius-lg, 20px);\n overflow: hidden;\n max-width: 1280px;\n width: 100%;\n}\n\n/* ==========================================================================\n Theme Variants - Background Colors\n \n Colors from Figma:\n - mist-green: #c6d5d1 (background/base)\n - inkwell: #14343b (Colour/Brand/Inkwell)\n - soft-clay: #c0ab8d (softclay-400)\n - white-ivory: #fff9ee (background/ivory-paper)\n ========================================================================== */\n\n.banner.theme-mist-green {\n background-color: var(--colour-brand-mist-green, #c6d5d1);\n \n /* Typography */\n --banner-heading-color: var(--colour-brand-inkwell, #14343b);\n --banner-body-color: var(--colour-inkwell-400, #2b484f);\n \n /* Buttons - ice primary, inkwell secondary */\n --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);\n --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);\n --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);\n --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);\n --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);\n}\n\n.banner.theme-inkwell {\n background-color: var(--colour-brand-inkwell, #14343b);\n \n /* Typography - light colors on dark background */\n --banner-heading-color: var(--colour-brand-mist-green, #c6d5d1);\n --banner-body-color: var(--colour-inkwell-100, #d0d6d8);\n \n /* Buttons - ice primary, white secondary */\n --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);\n --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);\n --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);\n --af-button-secondary-text: var(--colour-brand-white, #ffffff);\n --af-button-secondary-stroke: var(--colour-brand-white, #ffffff);\n}\n\n.banner.theme-soft-clay {\n background-color: var(--colour-softclay-400, #c0ab8d);\n \n /* Typography */\n --banner-heading-color: var(--colour-brand-inkwell, #14343b);\n --banner-body-color: var(--colour-inkwell-450, #203e45);\n \n /* Buttons */\n --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);\n --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);\n --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);\n --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);\n --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);\n}\n\n.banner.theme-white-ivory {\n background-color: var(--colour-brand-ivory-paper, #fff9ee);\n \n /* Typography */\n --banner-heading-color: var(--colour-brand-inkwell, #14343b);\n --banner-body-color: var(--colour-inkwell-400, #2b484f);\n \n /* Buttons */\n --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);\n --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);\n --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);\n --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);\n --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);\n}\n\n/* ==========================================================================\n Decorative Wave Overlay\n \n Figma specs:\n - Position: bottom -17.41px, right -156px\n - Size: 521px x 323px\n - Fill colors per theme\n ========================================================================== */\n\n.banner__wave-overlay {\n position: absolute;\n bottom: -17px;\n right: -156px;\n width: 521px;\n height: 323px;\n pointer-events: none;\n z-index: 0;\n}\n\n.banner__wave-svg {\n width: 100%;\n height: 100%;\n}\n\n/* ==========================================================================\n Theme-specific Wave Colors\n The SVG uses currentColor, so we set color on the overlay container.\n ========================================================================== */\n\n.banner.theme-mist-green .banner__wave-overlay {\n color: #d1ddda;\n}\n\n.banner.theme-inkwell .banner__wave-overlay {\n color: rgba(255, 255, 255, 0.06);\n}\n\n.banner.theme-soft-clay .banner__wave-overlay {\n color: rgba(20, 52, 59, 0.06);\n}\n\n.banner.theme-white-ivory .banner__wave-overlay {\n color: rgba(20, 52, 59, 0.04);\n}\n\n/* ==========================================================================\n Illustration Area\n \n Figma specs:\n - Desktop: max 360px x 360px, aspect ratio preserved\n - Mobile: 212px x 212px, positioned absolute top-right\n ========================================================================== */\n\n.banner__illustration {\n position: relative;\n z-index: 1;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 288px;\n height: 288px;\n max-width: 288px;\n max-height: 288px;\n aspect-ratio: 1;\n}\n\n.banner__illustration-img {\n width: 100%;\n height: 100%;\n object-fit: contain;\n}\n\n/* Allow slotted content to fill the illustration area */\n.banner__illustration ::slotted(*) {\n width: 100%;\n height: 100%;\n object-fit: contain;\n}\n\n/* ==========================================================================\n Content Area (Typography Lockup)\n \n Figma specs:\n - Vertical padding: 48px (margins/margin TB tight)\n - Gap between copy and buttons: 40px\n - Gap between heading and description: 16px\n - Max-width for copy: 840px\n ========================================================================== */\n\n.banner__content {\n position: relative;\n z-index: 1;\n flex: 1 1 0;\n min-width: 0;\n min-height: 0;\n display: flex;\n flex-direction: column;\n gap: 40px;\n padding-top: 38px;\n padding-bottom: 38px;\n padding-right: 0;\n padding-left: 0;\n}\n\n.banner__copy {\n display: flex;\n flex-direction: column;\n gap: 16px;\n max-width: 840px;\n width: 100%;\n white-space: normal;\n}\n\n/* ==========================================================================\n Heading\n \n Figma specs:\n - Desktop: 44px, line-height 1, letter-spacing -0.88px (-2%)\n - Mobile: 32px, line-height 1, letter-spacing -0.64px (-2%)\n - Font: Typography/primaryFont (NeuSans), weight: Typography/headingWeight (500)\n ========================================================================== */\n\n.banner__heading {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: var(--typography-headingweight, 500);\n font-size: 44px;\n line-height: 1;\n letter-spacing: -0.88px;\n color: var(--banner-heading-color, var(--colour-brand-inkwell, #14343b));\n margin: 0;\n white-space: normal;\n}\n\n/* ==========================================================================\n Description\n \n Figma specs:\n - Font size: 18px\n - Line height: 26px\n - Font: Typography/primaryFont, weight: Typography/bodyWeight (400)\n - Color: typography/body-default #2b484f (or theme variant)\n ========================================================================== */\n\n.banner__description {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: var(--typography-bodyweight, 400);\n font-size: 18px;\n line-height: 26px;\n color: var(--banner-body-color, var(--colour-inkwell-400, #2b484f));\n margin: 0;\n white-space: normal;\n}\n\n/* ==========================================================================\n Button Group\n \n Figma specs:\n - Desktop: horizontal, gap 12px\n - Mobile: vertical, full-width buttons, gap 12px\n - Button padding: 24px horizontal, 12px vertical\n - Button border-radius: 9999px (radii/button)\n ========================================================================== */\n\n.banner__buttons {\n display: flex;\n flex-direction: row;\n gap: 24px;\n align-items: flex-start;\n}\n\n/* ==========================================================================\n Mobile Responsive Styles (≤768px)\n \n Figma mobile specs:\n - Width: 100%\n - Border radius: 24px\n - Padding top: 224px (space for illustration)\n - Content padding: pb 48px, pt 16px, px 28px\n - Content min-height: 320px\n - Illustration: 212px x 212px, positioned at top: 12px, centered horizontally\n ========================================================================== */\n\n/* mobile-only */\n@media (max-width: 768px) {\n .banner {\n flex-direction: column;\n align-items: stretch;\n padding: 224px 0 0 0;\n /* Mobile keeps the same 20px corner as desktop — simpler after the\n * token ladder consolidation. */\n border-radius: var(--radius-lg, 20px);\n max-width: 100%;\n min-height: auto;\n }\n\n /* Wave overlay hidden on mobile */\n .banner__wave-overlay {\n display: none;\n }\n\n /* Illustration positioned at top-right on mobile */\n .banner__illustration {\n position: absolute;\n top: 12px;\n left: auto;\n right: 0;\n transform: none;\n width: 212px;\n height: 212px;\n max-width: 280px;\n max-height: 280px;\n }\n\n /* Content takes full width with min-height */\n .banner__content {\n width: 100%;\n min-height: 320px;\n padding: 16px 28px 48px 28px;\n gap: 40px;\n flex: none;\n }\n\n /* Ensure copy section doesn't constrain width on mobile */\n .banner__copy {\n max-width: 100%;\n }\n\n /* Mobile heading size */\n .banner__heading {\n font-size: 32px;\n letter-spacing: -0.64px;\n }\n\n /* Buttons stack vertically on mobile, full width */\n .banner__buttons {\n flex-direction: column;\n align-items: stretch;\n gap: 12px;\n width: 100%;\n }\n\n /* Ensure af-button takes full width on mobile */\n .banner__buttons {\n --af-button-width: 100%;\n }\n\n .banner__buttons af-button {\n display: block;\n width: 100%;\n }\n}\n\n/* ==========================================================================\n Small Mobile (≤480px)\n ========================================================================== */\n\n/* ≤ small */\n@media (max-width: 480px) {\n .banner {\n padding-top: 200px;\n }\n\n .banner__illustration {\n /* Keep right-aligned, just adjust size */\n right: 0;\n width: 180px;\n height: 180px;\n }\n\n .banner__content {\n padding: 16px 20px 36px 20px;\n min-height: 280px;\n }\n\n .banner__heading {\n font-size: 28px;\n letter-spacing: -0.56px;\n }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\ntype BannerTheme = 'white-ivory' | 'mist-green' | 'soft-clay' | 'inkwell';\n\n/**\n * In-page banner component for call-to-action content.\n * \n * A banner card with illustration, heading, description, and action buttons.\n * Typically placed inside a neutral (white) Section to show off its themed background.\n * \n * The component has its own theme prop to control its background color and styling.\n * \n * **Illustration Usage:**\n * Use `illustrationUrl` to pass an illustration image URL. For theme-matched illustrations,\n * use `getIllustrationUrlByScene()` from `@affinda/illustrations` in your consuming app:\n * \n * ```tsx\n * import { getIllustrationUrlByScene } from '@affinda/illustrations';\n * \n * <InPageBanner\n * theme=\"inkwell\"\n * illustrationUrl={getIllustrationUrlByScene('automate', 'inkwell')}\n * ...\n * />\n * ```\n * \n * Alternatively, use the `illustration` slot for completely custom content.\n *\n * **Slot-based composition (preferred for rich content):**\n * - `heading` — heading markup (overrides the `heading` prop when provided).\n * - `description` — description markup (overrides the `description` prop).\n * - `buttons` — custom button group (overrides the primary/secondary button\n * props; use when you need ghost variants, more than two buttons, or\n * per-button icons).\n * - `illustration` — custom illustration markup.\n *\n * The string props remain supported for simple cases.\n */\n@Component({\n tag: 'af-in-page-banner',\n styleUrl: 'af-in-page-banner.css',\n shadow: false,\n scoped: true,\n})\nexport class AfInPageBanner {\n /** Theme - sets the banner background color and typography colors */\n @Prop() theme: BannerTheme = 'mist-green';\n\n /** Banner heading */\n @Prop() heading: string = '';\n\n /** Banner description */\n @Prop() description: string = '';\n\n /** Primary button text */\n @Prop() primaryButtonText: string = '';\n\n /** Primary button URL */\n @Prop() primaryButtonUrl: string = '#';\n\n /** Secondary button text (optional - if empty, button won't show) */\n @Prop() secondaryButtonText: string = '';\n\n /** Secondary button URL */\n @Prop() secondaryButtonUrl: string = '#';\n\n /** \n * Illustration URL. For theme-matched illustrations, use getIllustrationUrlByScene() \n * from @affinda/illustrations in your app code.\n */\n @Prop() illustrationUrl: string = '';\n\n /** Whether to show the decorative wave overlay */\n @Prop() showWaveDecoration: boolean = true;\n\n /**\n * Renders the decorative wave SVG overlay.\n * Uses the Affinda brand \"infinity loop\" wave pattern.\n * Fill color is controlled via CSS custom properties per theme.\n */\n private renderWaveOverlay() {\n return (\n <div class=\"banner__wave-overlay\" aria-hidden=\"true\">\n <svg \n viewBox=\"0 0 521 323\" \n fill=\"none\" \n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"banner__wave-svg\"\n >\n <path \n d=\"M473.775 46.273C443.539 15.92 403.701 -0.631616 361.351 0.0184478H154.183L112.67 67.225H361.893C362.189 67.225 362.533 67.225 362.829 67.225C387.155 67.225 410.004 76.7259 427.289 94.0776C445.017 111.879 454.816 135.682 454.816 161.134C454.816 213.389 412.959 255.843 361.548 255.843H108.041C84.9457 255.843 66.1345 236.742 66.1345 213.289C66.1345 189.837 84.9949 170.435 107.992 169.735H334.957L377.799 102.528H106.859C47.9636 104.029 0 153.683 0 213.289C0 272.895 48.456 323 108.041 323H361.548C449.449 323 521 250.343 521 161.084C521 117.53 504.257 76.7759 473.824 46.2229L473.775 46.273Z\" \n fill=\"currentColor\"\n />\n </svg>\n </div>\n );\n }\n\n render() {\n return (\n <Host>\n <div class={`banner theme-${this.theme}`}>\n {/* Decorative wave overlay */}\n {this.showWaveDecoration && this.renderWaveOverlay()}\n\n {/* Illustration area */}\n <div class=\"banner__illustration\">\n {this.illustrationUrl ? (\n <img \n src={this.illustrationUrl} \n alt=\"\" \n class=\"banner__illustration-img\" \n loading=\"lazy\"\n />\n ) : (\n <slot name=\"illustration\"></slot>\n )}\n </div>\n\n {/* Content area — slots take precedence over string props. */}\n <div class=\"banner__content\">\n <div class=\"banner__copy\">\n <h2 class=\"banner__heading\">\n <slot name=\"heading\">{this.heading}</slot>\n </h2>\n <div class=\"banner__description\">\n <slot name=\"description\">{this.description}</slot>\n </div>\n </div>\n\n <div class=\"banner__buttons\">\n <slot name=\"buttons\">\n {this.primaryButtonText && (\n <af-button href={this.primaryButtonUrl} variant=\"primary\">\n {this.primaryButtonText}\n </af-button>\n )}\n {this.secondaryButtonText && (\n <af-button href={this.secondaryButtonUrl} variant=\"secondary\">\n {this.secondaryButtonText}\n </af-button>\n )}\n </slot>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"af-paperclip-decoration.entry.esm.js","sources":["src/components/af-paperclip-decoration/af-paperclip-decoration.css?tag=af-paperclip-decoration&encapsulation=shadow","src/components/af-paperclip-decoration/af-paperclip-decoration.tsx"],"sourcesContent":[":host {\n display: block;\n /* Decorative-only; host is sized/positioned by the consumer. */\n pointer-events: none;\n}\n\nsvg {\n display: block;\n /* Let the SVG honour its own width/height attributes rather than\n inheriting host dimensions. */\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * Decorative paperclip vector graphic. Renders the left-half paperclip\n * silhouette (viewBox `0 0 655 754`) that the marketing site bleeds off\n * the right edge of inkwell hero sections.\n *\n * Purely decorative — the inner `<svg>` is `aria-hidden=\"true\"`. Size it\n * via the `width` / `height` props (they accept any CSS length, e.g.\n * `\"655\"`, `\"100%\"`, `\"50vw\"`) and position the host element in CSS.\n *\n * `fill` is white by default (intended for inkwell backgrounds); override\n * for other themes, e.g. `fill=\"var(--colour-brand-inkwell)\"` on a\n * mist-green section. `opacity` defaults to `0.06` to match the\n * watermark treatment used on `/`, `/au`, and `/platform`.\n *\n * @example\n * ```html\n * <af-section theme=\"inkwell\" padding=\"loose\" style=\"position:relative;overflow:hidden\">\n * <af-paperclip-decoration\n * style=\"position:absolute;bottom:-80px;right:-80px\"\n * ></af-paperclip-decoration>\n * <af-container style=\"position:relative;z-index:1\">\n * <!-- hero content -->\n * </af-container>\n * </af-section>\n * ```\n */\n@Component({\n tag: 'af-paperclip-decoration',\n styleUrl: 'af-paperclip-decoration.css',\n shadow: true\n})\nexport class AfPaperclipDecoration {\n /**\n * SVG width — accepts any CSS length or unitless number (pixels).\n * Defaults to the intrinsic viewBox width (`655`).\n */\n @Prop() width: string = '655';\n\n /**\n * SVG height — accepts any CSS length or unitless number (pixels).\n * Defaults to the intrinsic viewBox height (`754`).\n */\n @Prop() height: string = '754';\n\n /**\n * Fill opacity of the paperclip shape. Defaults to `0.06` to match the\n * marketing-site watermark treatment.\n */\n @Prop() opacity: number = 0.06;\n\n /**\n * Fill colour. Defaults to `white` (designed for inkwell backgrounds);\n * override for other themes, e.g. `var(--colour-brand-inkwell)` on a\n * mist-green section.\n */\n @Prop() fill: string = 'white';\n\n render() {\n return (\n <Host>\n <svg\n aria-hidden=\"true\"\n width={this.width}\n height={this.height}\n viewBox=\"0 0 655 754\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n preserveAspectRatio=\"none\"\n >\n <path\n d=\"M1102.14 108.279C1031.8 37.5181 939.128 -1.06817 840.61 0.447304H358.674L262.104 157.124H841.87C842.558 157.124 843.36 157.124 844.047 157.124C900.638 157.124 953.791 179.273 994 219.725C1035.24 261.225 1058.04 316.715 1058.04 376.052C1058.04 497.872 960.665 596.844 841.068 596.844H251.335C197.609 596.844 153.848 552.313 153.848 497.639C153.848 442.965 197.723 397.734 251.221 396.102H779.208L878.872 239.426H248.586C111.577 242.923 0 358.682 0 497.639C0 636.596 112.723 753.404 251.335 753.404H841.068C1045.55 753.404 1212 584.021 1212 375.935C1212 274.398 1173.05 179.39 1102.26 108.162L1102.14 108.279Z\"\n fill={this.fill}\n fill-opacity={this.opacity}\n />\n </svg>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,wBAAwB,GAAG,6DAA6D;;MCiCjF,qBAAqB,GAAA,MAAA;AALlC,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;;AAGG;AACK,QAAA,IAAK,CAAA,KAAA,GAAW,KAAK;AAE7B;;;AAGG;AACK,QAAA,IAAM,CAAA,MAAA,GAAW,KAAK;AAE9B;;;AAGG;AACK,QAAA,IAAO,CAAA,OAAA,GAAW,IAAI;AAE9B;;;;AAIG;AACK,QAAA,IAAI,CAAA,IAAA,GAAW,OAAO;AAuB/B;IArBC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,aAAA,EACc,MAAM,EAClB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAC,aAAa,EACrB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,EAClC,mBAAmB,EAAC,MAAM,EAAA,EAE1B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,CAAC,EAAC,imBAAimB,EACnmB,IAAI,EAAE,IAAI,CAAC,IAAI,EAAA,cAAA,EACD,IAAI,CAAC,OAAO,GAC1B,CACE,CACD;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"af-typography-lockup.entry.esm.js","sources":["src/components/af-typography-lockup/af-typography-lockup.css?tag=af-typography-lockup&encapsulation=shadow","src/components/af-typography-lockup/af-typography-lockup.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.lockup {\n display: flex;\n flex-direction: column;\n}\n\n/* Lockup gap variations (between copy and buttons) - matches copy internal gap */\n/* Heading 1 desktop: 24px gap */\n.breakpoint-desktop.heading-1.lockup {\n gap: var(--space-6, 24px);\n}\n\n/* Heading 1 mobile: 20px gap */\n.breakpoint-mobile.heading-1.lockup {\n gap: var(--space-5, 20px);\n}\n\n/* Heading 2, 3 desktop: 16px gap */\n.breakpoint-desktop.heading-2.lockup,\n.breakpoint-desktop.heading-3.lockup {\n gap: var(--space-4, 16px);\n}\n\n/* Heading 2 mobile: 16px gap */\n.breakpoint-mobile.heading-2.lockup {\n gap: var(--space-4, 16px);\n}\n\n/* Heading 3 mobile, 4 desktop, 5 desktop: 12px gap */\n.breakpoint-mobile.heading-3.lockup,\n.breakpoint-desktop.heading-4.lockup,\n.breakpoint-desktop.heading-5.lockup {\n gap: var(--space-3, 12px);\n}\n\n/* Heading 4 mobile, 5 mobile: 8px gap */\n.breakpoint-mobile.heading-4.lockup,\n.breakpoint-mobile.heading-5.lockup {\n gap: var(--space-2, 8px);\n}\n\n/* Container alignment (affects flexbox positioning) */\n.text-left {\n align-items: flex-start;\n}\n\n.text-center {\n align-items: center;\n}\n\n.text-right {\n align-items: flex-end;\n}\n\n.text-justify {\n align-items: stretch;\n}\n\n/* Individual text alignment classes */\n.align-left {\n text-align: left;\n --af-text-align: left;\n}\n\n.align-center {\n text-align: center;\n --af-text-align: center;\n}\n\n.align-right {\n text-align: right;\n --af-text-align: right;\n}\n\n.align-justify {\n text-align: justify;\n --af-text-align: justify;\n}\n\n/* Copy section - base styles */\n.copy {\n display: flex;\n flex-direction: column;\n width: 100%;\n max-width: 840px;\n}\n\n/* Copy gap variations based on heading size and breakpoint */\n/* Heading 1 desktop: 24px gap */\n.breakpoint-desktop.heading-1 .copy {\n gap: var(--space-6, 24px);\n}\n\n/* Heading 1 mobile: 20px gap */\n.breakpoint-mobile.heading-1 .copy {\n gap: var(--space-5, 20px);\n}\n\n/* Heading 2, 3 desktop: 16px gap */\n.breakpoint-desktop.heading-2 .copy,\n.breakpoint-desktop.heading-3 .copy {\n gap: var(--space-4, 16px);\n}\n\n/* Heading 2 mobile: 16px gap */\n.breakpoint-mobile.heading-2 .copy {\n gap: var(--space-4, 16px);\n}\n\n/* Heading 3 mobile, 4 desktop, 5 desktop: 12px gap */\n.breakpoint-mobile.heading-3 .copy,\n.breakpoint-desktop.heading-4 .copy,\n.breakpoint-desktop.heading-5 .copy {\n gap: var(--space-3, 12px);\n}\n\n/* Heading 4 mobile, 5 mobile: 8px gap */\n.breakpoint-mobile.heading-4 .copy,\n.breakpoint-mobile.heading-5 .copy {\n gap: var(--space-2, 8px);\n}\n\n/* Heading styles - font-weight 400 (regular) matches Webflow's NeuSans usage.\n * display: flex collapses any whitespace-only text nodes that Astro (and\n * other templating engines) leave between the slotted heading and the\n * following named-slot siblings — those stray text nodes get projected into\n * the default slot and, without flex layout, each one occupies a full line\n * of the heading's line-height (user-visible \"extra line break\" after the\n * heading). */\n.heading {\n display: flex;\n flex-direction: column;\n font-family: var(--typography-headingfont, 'NeuSans', sans-serif);\n font-weight: var(--font-weight-regular, 400);\n color: var(--af-typography-heading-primary, var(--colour-typography-heading-primary, #14343B));\n line-height: var(--line-height-heading-tight, 1);\n letter-spacing: var(--letter-spacing-heading, -0.02em);\n white-space: normal;\n}\n\n/* Desktop heading sizes */\n.breakpoint-desktop.heading-1 .heading {\n font-size: var(--font-size-heading-1-desktop, 56px);\n}\n\n.breakpoint-desktop.heading-2 .heading {\n font-size: var(--font-size-heading-2-desktop, 44px);\n}\n\n.breakpoint-desktop.heading-3 .heading {\n font-size: var(--font-size-heading-3-desktop, 34px);\n}\n\n.breakpoint-desktop.heading-4 .heading {\n font-size: var(--font-size-heading-4-desktop, 24px);\n line-height: var(--line-height-heading-relaxed, 1.2);\n}\n\n.breakpoint-desktop.heading-5 .heading {\n font-size: var(--font-size-heading-5-desktop, 20px);\n line-height: var(--line-height-heading-relaxed, 1.2);\n}\n\n/* Mobile heading sizes */\n.breakpoint-mobile.heading-1 .heading {\n font-size: var(--font-size-heading-1-mobile, 38px);\n}\n\n.breakpoint-mobile.heading-2 .heading {\n font-size: var(--font-size-heading-2-mobile, 32px);\n}\n\n.breakpoint-mobile.heading-3 .heading {\n font-size: var(--font-size-heading-3-mobile, 25px);\n}\n\n.breakpoint-mobile.heading-4 .heading {\n font-size: var(--font-size-heading-4-mobile, 20px);\n line-height: var(--line-height-heading-normal, 1.1);\n}\n\n.breakpoint-mobile.heading-5 .heading {\n font-size: var(--font-size-heading-5-mobile, 18px);\n line-height: var(--line-height-heading-normal, 1.1);\n}\n\n/* Description/body text - default (body/large) */\n.description {\n font-family: var(--typography-bodyfont, 'NeuSans', sans-serif);\n font-size: var(--font-size-body-large, 18px);\n font-weight: var(--font-weight-regular, 400);\n line-height: var(--line-height-body-large, 26px);\n color: var(--af-typography-body-default, var(--colour-typography-body-default, #2B484F));\n white-space: normal;\n}\n\n/* Heading colour variants — matches Webflow's h1.primary / h1.secondary pattern */\n.heading.heading-color-primary {\n color: var(--af-typography-heading-primary, var(--colour-typography-heading-primary, #14343B));\n}\n\n.heading.heading-color-secondary {\n color: var(--af-typography-heading-secondary, var(--colour-brand-soft-clay, #B09670));\n}\n\n/* Description colour variants */\n.description.description-color-default {\n color: var(--af-typography-body-default, var(--colour-typography-body-default, #2B484F));\n}\n\n.description.description-color-secondary {\n color: var(--af-typography-heading-secondary, var(--colour-brand-soft-clay, #B09670));\n}\n\n/* Description text size variations - smaller for heading 3 mobile, 4, and 5 */\n.breakpoint-mobile.heading-3 .description,\n.breakpoint-desktop.heading-4 .description,\n.breakpoint-mobile.heading-4 .description,\n.breakpoint-desktop.heading-5 .description,\n.breakpoint-mobile.heading-5 .description {\n font-size: var(--font-size-body-medium, 16px);\n line-height: var(--line-height-body-medium, 24px);\n}\n\n.description:empty {\n display: none;\n}\n\n/* Buttons section */\n.buttons {\n display: flex;\n flex-direction: row;\n gap: var(--space-3, 12px);\n}\n\n.buttons:empty {\n display: none;\n}\n\n/* Button layout - horizontal (inline with copy) */\n.layout-horizontal .buttons {\n align-items: center;\n}\n\n.text-left.layout-horizontal {\n flex-direction: row;\n align-items: center;\n gap: var(--space-4, 16px);\n}\n\n.text-left.layout-horizontal .copy {\n flex: 1 0 0;\n max-width: 950px;\n}\n\n/* Heading 3, 4 horizontal: different max-width */\n.text-left.layout-horizontal.heading-3 .copy,\n.text-left.layout-horizontal.heading-4 .copy {\n max-width: 840px;\n}\n\n.text-left.layout-horizontal .buttons {\n flex-shrink: 0;\n}\n\n/* Button layout - vertical (stacked below copy) */\n.layout-vertical .buttons {\n align-items: flex-start;\n}\n\n/* Button position alignment */\n.buttons.align-left {\n justify-content: flex-start;\n}\n\n.buttons.align-center {\n justify-content: center;\n}\n\n.buttons.align-right {\n justify-content: flex-end;\n}\n\n.buttons.align-justify {\n justify-content: space-between;\n}\n\n/* Mobile button stacking - buttons stack vertically on mobile */\n.breakpoint-mobile .buttons {\n flex-direction: column;\n align-items: stretch;\n}\n\n.breakpoint-mobile .buttons.align-center {\n align-items: center;\n}\n\n.breakpoint-mobile .buttons.align-right {\n align-items: flex-end;\n}\n\n.breakpoint-mobile .buttons.align-left {\n align-items: flex-start;\n}\n\n/* Max width constraints for centered layouts */\n.text-center .copy {\n max-width: 840px;\n}\n\n/* Slot content styling */\n::slotted(*) {\n margin: 0;\n}\n","import { Component, Element, h, Prop, State, Host } from '@stencil/core';\n\ntype TextAlign = 'left' | 'center' | 'right' | 'justify';\n\n/**\n * Marketing-style composition of heading + description + buttons with\n * consistent spacing and alignment driven by the `headingSize` prop.\n *\n * **Semantic vs visual:** `headingSize` controls ONLY the visual scale\n * (the lockup sets font-size via a `heading-{1..5}` class). The semantic\n * level (h1-h6) is whatever the consumer slots in as default content.\n * Keep them aligned by convention so assistive tech and search engines\n * see the right hierarchy:\n *\n * headingSize=1 ↔ <h1> (or <h2> on non-top-of-page sections)\n * headingSize=2 ↔ <h2>\n * headingSize=3 ↔ <h3>\n * headingSize=4 ↔ <h4>\n * headingSize=5 ↔ <h5>\n *\n * When a design asks for a visually small H1 or a visually large H3,\n * pass the two independently — just do it deliberately, not by\n * accident. A console warning fires in dev mode if the slotted tag is\n * more than one level away from the prop.\n */\n@Component({\n tag: 'af-typography-lockup',\n styleUrl: 'af-typography-lockup.css',\n shadow: true\n})\nexport class AfTypographyLockup {\n @Element() el!: HTMLElement;\n\n /**\n * The heading size (1-5, where 1 is largest). Controls visual scale\n * only — pair with a matching <h1>-<h5> slotted element for correct\n * document outline (see component docblock).\n */\n @Prop() headingSize: 1 | 2 | 3 | 4 | 5 = 2;\n\n /**\n * The breakpoint for responsive typography\n */\n @Prop() breakpoint: 'desktop' | 'mobile' = 'desktop';\n\n /**\n * Text alignment for the entire lockup (heading and description).\n * Can be overridden individually with headingAlignment and descriptionAlignment.\n */\n @Prop() textAlignment: TextAlign = 'left';\n\n /**\n * Heading text alignment. Falls back to textAlignment if not specified.\n */\n @Prop() headingAlignment?: TextAlign;\n\n /**\n * Description text alignment. Falls back to textAlignment if not specified.\n */\n @Prop() descriptionAlignment?: TextAlign;\n\n /**\n * Button layout direction (horizontal or vertical stacking)\n */\n @Prop() buttonLayout: 'horizontal' | 'vertical' = 'vertical';\n\n /**\n * Buttons position alignment. Falls back to textAlignment if not specified.\n */\n @Prop() buttonsAlignment?: TextAlign;\n\n /**\n * Maximum width for the copy section (in pixels)\n */\n @Prop() maxWidth?: number;\n\n /**\n * Heading colour variant. Matches the Webflow pattern of `h1.primary` vs\n * `h1.secondary`, where \"secondary\" renders in the theme's accent/heading-\n * secondary colour (soft-clay on most themes).\n * - `primary` (default) - uses `--af-typography-heading-primary`\n * - `secondary` - uses `--af-typography-heading-secondary`\n */\n @Prop() headingColor: 'primary' | 'secondary' = 'primary';\n\n /**\n * Description colour variant. Same pattern as `headingColor`; useful for\n * hero-style lockups where the description is rendered in the accent colour.\n * - `default` (default) - uses `--af-typography-body-default`\n * - `secondary` - uses `--af-typography-heading-secondary`\n */\n @Prop() descriptionColor: 'default' | 'secondary' = 'default';\n\n /**\n * Whether the consumer passed anything into the description / buttons\n * slots. The CSS `:empty` selector can't help here — the `<slot>`\n * element itself counts as a child, so the wrapper divs would always\n * render as empty-but-visible lines of gap. Tracked on mount and on\n * any `slotchange` so wrappers collapse cleanly when there's nothing\n * to show.\n */\n @State() hasDescription: boolean = false;\n @State() hasButtons: boolean = false;\n\n private descriptionSlot?: HTMLSlotElement;\n private buttonsSlot?: HTMLSlotElement;\n\n componentDidLoad() {\n this.syncSlotState();\n this.descriptionSlot?.addEventListener('slotchange', this.syncSlotState);\n this.buttonsSlot?.addEventListener('slotchange', this.syncSlotState);\n // Dev-time check that the slotted semantic tag (h1-h6) is within one\n // level of the visual headingSize. Pairs with the class-level docblock;\n // silent in production unless the author explicitly turned on dev mode\n // via `window.__AF_STRICT_HEADINGS__`.\n if (typeof window === 'undefined') return;\n const strict = (window as unknown as { __AF_STRICT_HEADINGS__?: boolean })\n .__AF_STRICT_HEADINGS__;\n if (!strict) return;\n const heading = Array.from(this.el.children).find(\n (child) => !(child as HTMLElement).hasAttribute('slot') && /^h[1-6]$/i.test(child.tagName),\n );\n if (!heading) return;\n const slottedLevel = Number(heading.tagName.slice(1));\n const expected = this.headingSize;\n if (Math.abs(slottedLevel - expected) > 1) {\n // eslint-disable-next-line no-console\n console.warn(\n `[af-typography-lockup] heading-size=${expected} paired with <${heading.tagName.toLowerCase()}>; ` +\n `expected an <h${expected}> for document outline. Pass deliberately or align the two.`,\n );\n }\n }\n\n disconnectedCallback() {\n this.descriptionSlot?.removeEventListener('slotchange', this.syncSlotState);\n this.buttonsSlot?.removeEventListener('slotchange', this.syncSlotState);\n }\n\n private syncSlotState = () => {\n this.hasDescription = (this.descriptionSlot?.assignedNodes({ flatten: true }).length ?? 0) > 0;\n this.hasButtons = (this.buttonsSlot?.assignedNodes({ flatten: true }).length ?? 0) > 0;\n };\n\n render() {\n const effectiveHeadingAlignment = this.headingAlignment ?? this.textAlignment;\n const effectiveDescriptionAlignment = this.descriptionAlignment ?? this.textAlignment;\n const effectiveButtonsAlignment = this.buttonsAlignment ?? this.textAlignment;\n\n const containerClasses = {\n 'lockup': true,\n [`text-${this.textAlignment}`]: true,\n [`layout-${this.buttonLayout}`]: true,\n [`heading-${this.headingSize}`]: true,\n [`breakpoint-${this.breakpoint}`]: true\n };\n\n const headingClasses = {\n 'heading': true,\n [`align-${effectiveHeadingAlignment}`]: true,\n [`heading-color-${this.headingColor}`]: true\n };\n\n const descriptionClasses = {\n 'description': true,\n [`align-${effectiveDescriptionAlignment}`]: true,\n [`description-color-${this.descriptionColor}`]: true\n };\n\n const buttonsClasses = {\n 'buttons': true,\n [`align-${effectiveButtonsAlignment}`]: true\n };\n\n const copyStyle = this.maxWidth ? { maxWidth: `${this.maxWidth}px` } : {};\n\n return (\n <Host>\n <div class={containerClasses}>\n <div class=\"copy\" style={copyStyle}>\n <div class={headingClasses} part=\"heading\">\n <slot></slot>\n </div>\n <div class={descriptionClasses} part=\"body\" hidden={!this.hasDescription}>\n <slot name=\"description\" ref={(el) => (this.descriptionSlot = el as HTMLSlotElement)}></slot>\n </div>\n </div>\n <div class={buttonsClasses} part=\"buttons\" hidden={!this.hasButtons}>\n <slot name=\"buttons\" ref={(el) => (this.buttonsSlot = el as HTMLSlotElement)}></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"af-typography-lockup.entry.esm.js","sources":["src/components/af-typography-lockup/af-typography-lockup.css?tag=af-typography-lockup&encapsulation=shadow","src/components/af-typography-lockup/af-typography-lockup.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.lockup {\n display: flex;\n flex-direction: column;\n}\n\n/* Lockup gap variations (between copy and buttons) - matches copy internal gap */\n/* Heading 1 desktop: 24px gap */\n.breakpoint-desktop.heading-1.lockup {\n gap: var(--space-6, 24px);\n}\n\n/* Heading 1 mobile: 20px gap */\n.breakpoint-mobile.heading-1.lockup {\n gap: var(--space-5, 20px);\n}\n\n/* Heading 2, 3 desktop: 16px gap */\n.breakpoint-desktop.heading-2.lockup,\n.breakpoint-desktop.heading-3.lockup {\n gap: var(--space-4, 16px);\n}\n\n/* Heading 2 mobile: 16px gap */\n.breakpoint-mobile.heading-2.lockup {\n gap: var(--space-4, 16px);\n}\n\n/* Heading 3 mobile, 4 desktop, 5 desktop, card desktop: 12px gap */\n.breakpoint-mobile.heading-3.lockup,\n.breakpoint-desktop.heading-4.lockup,\n.breakpoint-desktop.heading-5.lockup,\n.breakpoint-desktop.heading-card.lockup {\n gap: var(--space-3, 12px);\n}\n\n/* Heading 4 mobile, 5 mobile, card mobile: 8px gap */\n.breakpoint-mobile.heading-4.lockup,\n.breakpoint-mobile.heading-5.lockup,\n.breakpoint-mobile.heading-card.lockup {\n gap: var(--space-2, 8px);\n}\n\n/* Container alignment (affects flexbox positioning) */\n.text-left {\n align-items: flex-start;\n}\n\n.text-center {\n align-items: center;\n}\n\n.text-right {\n align-items: flex-end;\n}\n\n.text-justify {\n align-items: stretch;\n}\n\n/* Individual text alignment classes */\n.align-left {\n text-align: left;\n --af-text-align: left;\n}\n\n.align-center {\n text-align: center;\n --af-text-align: center;\n}\n\n.align-right {\n text-align: right;\n --af-text-align: right;\n}\n\n.align-justify {\n text-align: justify;\n --af-text-align: justify;\n}\n\n/* Copy section - base styles */\n.copy {\n display: flex;\n flex-direction: column;\n width: 100%;\n max-width: 840px;\n}\n\n/* Copy gap variations based on heading size and breakpoint */\n/* Heading 1 desktop: 24px gap */\n.breakpoint-desktop.heading-1 .copy {\n gap: var(--space-6, 24px);\n}\n\n/* Heading 1 mobile: 20px gap */\n.breakpoint-mobile.heading-1 .copy {\n gap: var(--space-5, 20px);\n}\n\n/* Heading 2, 3 desktop: 16px gap */\n.breakpoint-desktop.heading-2 .copy,\n.breakpoint-desktop.heading-3 .copy {\n gap: var(--space-4, 16px);\n}\n\n/* Heading 2 mobile: 16px gap */\n.breakpoint-mobile.heading-2 .copy {\n gap: var(--space-4, 16px);\n}\n\n/* Heading 3 mobile, 4 desktop, 5 desktop, card desktop: 12px gap */\n.breakpoint-mobile.heading-3 .copy,\n.breakpoint-desktop.heading-4 .copy,\n.breakpoint-desktop.heading-5 .copy,\n.breakpoint-desktop.heading-card .copy {\n gap: var(--space-3, 12px);\n}\n\n/* Heading 4 mobile, 5 mobile, card mobile: 8px gap */\n.breakpoint-mobile.heading-4 .copy,\n.breakpoint-mobile.heading-5 .copy,\n.breakpoint-mobile.heading-card .copy {\n gap: var(--space-2, 8px);\n}\n\n/* Heading styles - font-weight 400 (regular) matches Webflow's NeuSans usage.\n * display: flex collapses any whitespace-only text nodes that Astro (and\n * other templating engines) leave between the slotted heading and the\n * following named-slot siblings — those stray text nodes get projected into\n * the default slot and, without flex layout, each one occupies a full line\n * of the heading's line-height (user-visible \"extra line break\" after the\n * heading). */\n.heading {\n display: flex;\n flex-direction: column;\n font-family: var(--typography-headingfont, 'NeuSans', sans-serif);\n font-weight: var(--font-weight-regular, 400);\n color: var(--af-typography-heading-primary, var(--colour-typography-heading-primary, #14343B));\n line-height: var(--line-height-heading-tight, 1);\n letter-spacing: var(--letter-spacing-heading, -0.02em);\n white-space: normal;\n}\n\n/* Desktop heading sizes */\n.breakpoint-desktop.heading-1 .heading {\n font-size: var(--font-size-heading-1-desktop, 56px);\n}\n\n.breakpoint-desktop.heading-2 .heading {\n font-size: var(--font-size-heading-2-desktop, 44px);\n}\n\n/* Explicit px line-heights (38/30/24) for heading 3/4/5 replace the\n * previous ratio-based values (1.1/1.2) — renders identically within a\n * pixel but exposes a predictable token consumers can reference directly. */\n.breakpoint-desktop.heading-3 .heading {\n font-size: var(--font-size-heading-3-desktop, 34px);\n line-height: var(--line-height-heading-3, 38px);\n}\n\n.breakpoint-desktop.heading-4 .heading {\n font-size: var(--font-size-heading-4-desktop, 24px);\n line-height: var(--line-height-heading-4, 30px);\n}\n\n.breakpoint-desktop.heading-5 .heading {\n font-size: var(--font-size-heading-5-desktop, 20px);\n line-height: var(--line-height-heading-5, 24px);\n}\n\n/* Card-title scale (22/20px): retires the bespoke heading sizes on\n * diff-card h3, NumberedStepper title, and expert-insights related-card h3\n * on the website. Sits between heading-4 (24px) and heading-5 (20px) at\n * desktop, and between heading-4 and heading-5 (both 20px→18px) at mobile. */\n.breakpoint-desktop.heading-card .heading {\n font-size: var(--font-size-heading-card-desktop, 22px);\n line-height: var(--line-height-heading-card, 28px);\n}\n\n/* Mobile heading sizes */\n.breakpoint-mobile.heading-1 .heading {\n font-size: var(--font-size-heading-1-mobile, 38px);\n}\n\n.breakpoint-mobile.heading-2 .heading {\n font-size: var(--font-size-heading-2-mobile, 32px);\n}\n\n.breakpoint-mobile.heading-3 .heading {\n font-size: var(--font-size-heading-3-mobile, 25px);\n}\n\n.breakpoint-mobile.heading-4 .heading {\n font-size: var(--font-size-heading-4-mobile, 20px);\n line-height: var(--line-height-heading-normal, 1.1);\n}\n\n.breakpoint-mobile.heading-5 .heading {\n font-size: var(--font-size-heading-5-mobile, 18px);\n line-height: var(--line-height-heading-normal, 1.1);\n}\n\n.breakpoint-mobile.heading-card .heading {\n font-size: var(--font-size-heading-card-mobile, 20px);\n line-height: var(--line-height-heading-card, 28px);\n}\n\n/* Description/body text - default (body/large) */\n.description {\n font-family: var(--typography-bodyfont, 'NeuSans', sans-serif);\n font-size: var(--font-size-body-large, 18px);\n font-weight: var(--font-weight-regular, 400);\n line-height: var(--line-height-body-large, 26px);\n color: var(--af-typography-body-default, var(--colour-typography-body-default, #2B484F));\n white-space: normal;\n}\n\n/* Heading colour variants — matches Webflow's h1.primary / h1.secondary pattern */\n.heading.heading-color-primary {\n color: var(--af-typography-heading-primary, var(--colour-typography-heading-primary, #14343B));\n}\n\n.heading.heading-color-secondary {\n color: var(--af-typography-heading-secondary, var(--colour-brand-soft-clay, #B09670));\n}\n\n/* Description colour variants */\n.description.description-color-default {\n color: var(--af-typography-body-default, var(--colour-typography-body-default, #2B484F));\n}\n\n.description.description-color-secondary {\n color: var(--af-typography-heading-secondary, var(--colour-brand-soft-clay, #B09670));\n}\n\n/* Description text size variations - smaller for heading 3 mobile, 4, 5, and card */\n.breakpoint-mobile.heading-3 .description,\n.breakpoint-desktop.heading-4 .description,\n.breakpoint-mobile.heading-4 .description,\n.breakpoint-desktop.heading-5 .description,\n.breakpoint-mobile.heading-5 .description,\n.breakpoint-desktop.heading-card .description,\n.breakpoint-mobile.heading-card .description {\n font-size: var(--font-size-body-medium, 16px);\n line-height: var(--line-height-body-medium, 24px);\n}\n\n.description:empty {\n display: none;\n}\n\n/* Buttons section */\n.buttons {\n display: flex;\n flex-direction: row;\n gap: var(--space-3, 12px);\n}\n\n.buttons:empty {\n display: none;\n}\n\n/* Button layout - horizontal (inline with copy) */\n.layout-horizontal .buttons {\n align-items: center;\n}\n\n.text-left.layout-horizontal {\n flex-direction: row;\n align-items: center;\n gap: var(--space-4, 16px);\n}\n\n.text-left.layout-horizontal .copy {\n flex: 1 0 0;\n max-width: 950px;\n}\n\n/* Heading 3, 4 horizontal: different max-width */\n.text-left.layout-horizontal.heading-3 .copy,\n.text-left.layout-horizontal.heading-4 .copy {\n max-width: 840px;\n}\n\n.text-left.layout-horizontal .buttons {\n flex-shrink: 0;\n}\n\n/* Button layout - vertical (stacked below copy) */\n.layout-vertical .buttons {\n align-items: flex-start;\n}\n\n/* Button position alignment */\n.buttons.align-left {\n justify-content: flex-start;\n}\n\n.buttons.align-center {\n justify-content: center;\n}\n\n.buttons.align-right {\n justify-content: flex-end;\n}\n\n.buttons.align-justify {\n justify-content: space-between;\n}\n\n/* Mobile button stacking - buttons stack vertically on mobile */\n.breakpoint-mobile .buttons {\n flex-direction: column;\n align-items: stretch;\n}\n\n.breakpoint-mobile .buttons.align-center {\n align-items: center;\n}\n\n.breakpoint-mobile .buttons.align-right {\n align-items: flex-end;\n}\n\n.breakpoint-mobile .buttons.align-left {\n align-items: flex-start;\n}\n\n/* Max width constraints for centered layouts */\n.text-center .copy {\n max-width: 840px;\n}\n\n/* Slot content styling */\n::slotted(*) {\n margin: 0;\n}\n","import { Component, Element, h, Prop, State, Host } from '@stencil/core';\n\ntype TextAlign = 'left' | 'center' | 'right' | 'justify';\n\n/**\n * Marketing-style composition of heading + description + buttons with\n * consistent spacing and alignment driven by the `headingSize` prop.\n *\n * **Semantic vs visual:** `headingSize` controls ONLY the visual scale\n * (the lockup sets font-size via a `heading-{1..5|card}` class). The semantic\n * level (h1-h6) is whatever the consumer slots in as default content.\n * Keep them aligned by convention so assistive tech and search engines\n * see the right hierarchy:\n *\n * headingSize=1 ↔ <h1> (or <h2> on non-top-of-page sections)\n * headingSize=2 ↔ <h2>\n * headingSize=3 ↔ <h3>\n * headingSize=4 ↔ <h4>\n * headingSize=5 ↔ <h5>\n * headingSize=\"card\" ↔ <h3> (card-title scale: 22/20px)\n *\n * When a design asks for a visually small H1 or a visually large H3,\n * pass the two independently — just do it deliberately, not by\n * accident. A console warning fires in dev mode if the slotted tag is\n * more than one level away from the prop.\n *\n * The `card` variant renders slightly larger than `5` (22/20px vs 20/18px)\n * and targets card titles in dense grids (diff-card h3, NumberedStepper\n * title, expert-insights related-card h3 on the marketing site). It sits\n * between `4` and `5` in the type ladder.\n */\n@Component({\n tag: 'af-typography-lockup',\n styleUrl: 'af-typography-lockup.css',\n shadow: true\n})\nexport class AfTypographyLockup {\n @Element() el!: HTMLElement;\n\n /**\n * The heading size (1-5, or \"card\"; 1 is largest). Controls visual scale\n * only — pair with a matching <h1>-<h5> slotted element for correct\n * document outline (see component docblock). The `card` variant sits\n * between 4 and 5 at 22/20px and is meant for card titles.\n */\n @Prop() headingSize: 1 | 2 | 3 | 4 | 5 | 'card' = 2;\n\n /**\n * The breakpoint for responsive typography\n */\n @Prop() breakpoint: 'desktop' | 'mobile' = 'desktop';\n\n /**\n * Text alignment for the entire lockup (heading and description).\n * Can be overridden individually with headingAlignment and descriptionAlignment.\n */\n @Prop() textAlignment: TextAlign = 'left';\n\n /**\n * Heading text alignment. Falls back to textAlignment if not specified.\n */\n @Prop() headingAlignment?: TextAlign;\n\n /**\n * Description text alignment. Falls back to textAlignment if not specified.\n */\n @Prop() descriptionAlignment?: TextAlign;\n\n /**\n * Button layout direction (horizontal or vertical stacking)\n */\n @Prop() buttonLayout: 'horizontal' | 'vertical' = 'vertical';\n\n /**\n * Buttons position alignment. Falls back to textAlignment if not specified.\n */\n @Prop() buttonsAlignment?: TextAlign;\n\n /**\n * Maximum width for the copy section (in pixels)\n */\n @Prop() maxWidth?: number;\n\n /**\n * Heading colour variant. Matches the Webflow pattern of `h1.primary` vs\n * `h1.secondary`, where \"secondary\" renders in the theme's accent/heading-\n * secondary colour (soft-clay on most themes).\n * - `primary` (default) - uses `--af-typography-heading-primary`\n * - `secondary` - uses `--af-typography-heading-secondary`\n */\n @Prop() headingColor: 'primary' | 'secondary' = 'primary';\n\n /**\n * Description colour variant. Same pattern as `headingColor`; useful for\n * hero-style lockups where the description is rendered in the accent colour.\n * - `default` (default) - uses `--af-typography-body-default`\n * - `secondary` - uses `--af-typography-heading-secondary`\n */\n @Prop() descriptionColor: 'default' | 'secondary' = 'default';\n\n /**\n * Whether the consumer passed anything into the description / buttons\n * slots. The CSS `:empty` selector can't help here — the `<slot>`\n * element itself counts as a child, so the wrapper divs would always\n * render as empty-but-visible lines of gap. Tracked on mount and on\n * any `slotchange` so wrappers collapse cleanly when there's nothing\n * to show.\n */\n @State() hasDescription: boolean = false;\n @State() hasButtons: boolean = false;\n\n private descriptionSlot?: HTMLSlotElement;\n private buttonsSlot?: HTMLSlotElement;\n\n componentDidLoad() {\n this.syncSlotState();\n this.descriptionSlot?.addEventListener('slotchange', this.syncSlotState);\n this.buttonsSlot?.addEventListener('slotchange', this.syncSlotState);\n // Dev-time check that the slotted semantic tag (h1-h6) is within one\n // level of the visual headingSize. Pairs with the class-level docblock;\n // silent in production unless the author explicitly turned on dev mode\n // via `window.__AF_STRICT_HEADINGS__`.\n if (typeof window === 'undefined') return;\n const strict = (window as unknown as { __AF_STRICT_HEADINGS__?: boolean })\n .__AF_STRICT_HEADINGS__;\n if (!strict) return;\n const heading = Array.from(this.el.children).find(\n (child) => !(child as HTMLElement).hasAttribute('slot') && /^h[1-6]$/i.test(child.tagName),\n );\n if (!heading) return;\n const slottedLevel = Number(heading.tagName.slice(1));\n const expected = this.headingSize;\n // The `card` variant is a named scale (card-title), not a semantic level.\n // Skip the numeric-proximity check entirely — convention is <h3>, but\n // consumers may legitimately pair it with <h2>-<h4> depending on context.\n if (expected === 'card') return;\n if (Math.abs(slottedLevel - expected) > 1) {\n // eslint-disable-next-line no-console\n console.warn(\n `[af-typography-lockup] heading-size=${expected} paired with <${heading.tagName.toLowerCase()}>; ` +\n `expected an <h${expected}> for document outline. Pass deliberately or align the two.`,\n );\n }\n }\n\n disconnectedCallback() {\n this.descriptionSlot?.removeEventListener('slotchange', this.syncSlotState);\n this.buttonsSlot?.removeEventListener('slotchange', this.syncSlotState);\n }\n\n private syncSlotState = () => {\n this.hasDescription = (this.descriptionSlot?.assignedNodes({ flatten: true }).length ?? 0) > 0;\n this.hasButtons = (this.buttonsSlot?.assignedNodes({ flatten: true }).length ?? 0) > 0;\n };\n\n render() {\n const effectiveHeadingAlignment = this.headingAlignment ?? this.textAlignment;\n const effectiveDescriptionAlignment = this.descriptionAlignment ?? this.textAlignment;\n const effectiveButtonsAlignment = this.buttonsAlignment ?? this.textAlignment;\n\n const containerClasses = {\n 'lockup': true,\n [`text-${this.textAlignment}`]: true,\n [`layout-${this.buttonLayout}`]: true,\n [`heading-${this.headingSize}`]: true,\n [`breakpoint-${this.breakpoint}`]: true\n };\n\n const headingClasses = {\n 'heading': true,\n [`align-${effectiveHeadingAlignment}`]: true,\n [`heading-color-${this.headingColor}`]: true\n };\n\n const descriptionClasses = {\n 'description': true,\n [`align-${effectiveDescriptionAlignment}`]: true,\n [`description-color-${this.descriptionColor}`]: true\n };\n\n const buttonsClasses = {\n 'buttons': true,\n [`align-${effectiveButtonsAlignment}`]: true\n };\n\n const copyStyle = this.maxWidth ? { maxWidth: `${this.maxWidth}px` } : {};\n\n return (\n <Host>\n <div class={containerClasses}>\n <div class=\"copy\" style={copyStyle}>\n <div class={headingClasses} part=\"heading\">\n <slot></slot>\n </div>\n <div class={descriptionClasses} part=\"body\" hidden={!this.hasDescription}>\n <slot name=\"description\" ref={(el) => (this.descriptionSlot = el as HTMLSlotElement)}></slot>\n </div>\n </div>\n <div class={buttonsClasses} part=\"buttons\" hidden={!this.hasButtons}>\n <slot name=\"buttons\" ref={(el) => (this.buttonsSlot = el as HTMLSlotElement)}></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
|
package/dist/affinda/affinda.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--colour-brand-mist-green:#C6D5D1;--colour-brand-inkwell:#14343B;--colour-brand-soft-clay:#B09670;--colour-brand-white:#FFFFFF;--colour-brand-ivory-paper:#FFF9EE;--colour-brand-azure:#7FE2D4;--colour-brand-ice:#A6FFF8;--colour-tints-mist-green-
|
|
1
|
+
:root{--colour-brand-mist-green:#C6D5D1;--colour-brand-inkwell:#14343B;--colour-brand-soft-clay:#B09670;--colour-brand-white:#FFFFFF;--colour-brand-ivory-paper:#FFF9EE;--colour-brand-azure:#7FE2D4;--colour-brand-ice:#A6FFF8;--colour-tints-mist-green-50:#f9fbfa;--colour-mistgreen-50:#f9fbfa;--colour-tints-mist-green-100:#f4f7f6;--colour-mistgreen-100:#f4f7f6;--colour-tints-mist-green-200:#e8eeed;--colour-mistgreen-200:#e8eeed;--colour-tints-mist-green-300:#dde6e3;--colour-mistgreen-300:#dde6e3;--colour-tints-mist-green-400:#d1ddda;--colour-mistgreen-400:#d1ddda;--colour-tints-mist-green-500:#c6d5d1;--colour-mistgreen-500:#c6d5d1;--colour-tints-mist-green-600:#b2c0bc;--colour-mistgreen-600:#b2c0bc;--colour-tints-mist-green-700:#9eaaa7;--colour-mistgreen-700:#9eaaa7;--colour-tints-inkwell-20:#f9fafa;--colour-inkwell-20:#f9fafa;--colour-tints-inkwell-30:#f3f5f5;--colour-inkwell-30:#f3f5f5;--colour-tints-inkwell-40:#edf0f0;--colour-inkwell-40:#edf0f0;--colour-tints-inkwell-50:#e8ebeb;--colour-inkwell-50:#e8ebeb;--colour-tints-inkwell-100:#d0d6d8;--colour-inkwell-100:#d0d6d8;--colour-tints-inkwell-200:#a1aeb1;--colour-inkwell-200:#a1aeb1;--colour-tints-inkwell-300:#728589;--colour-inkwell-300:#728589;--colour-tints-inkwell-350:#60767b;--colour-inkwell-350:#60767b;--colour-tints-inkwell-400:#2b484f;--colour-inkwell-400:#2b484f;--colour-tints-inkwell-450:#203e45;--colour-inkwell-450:#203e45;--colour-tints-inkwell-500:#14343b;--colour-inkwell-500:#14343b;--colour-tints-inkwell-600:#102a2f;--colour-inkwell-600:#102a2f;--colour-tints-inkwell-700:#102a2f;--colour-inkwell-700:#102a2f;--colour-tints-soft-clay-50:#f7f5f1;--colour-softclay-50:#f7f5f1;--colour-tints-soft-clay-100:#efeae2;--colour-softclay-100:#efeae2;--colour-tints-soft-clay-200:#dfd5c6;--colour-softclay-200:#dfd5c6;--colour-tints-soft-clay-300:#d0c0a9;--colour-softclay-300:#d0c0a9;--colour-tints-soft-clay-400:#c0ab8d;--colour-softclay-400:#c0ab8d;--colour-tints-soft-clay-500:#b09670;--colour-softclay-500:#b09670;--colour-tints-soft-clay-600:#9e8765;--colour-softclay-600:#9e8765;--colour-tints-soft-clay-700:#8d785a;--colour-softclay-700:#8d785a;--colour-tints-soft-clay-800:#8a7049;--colour-softclay-800:#8a7049;--colour-tints-ice-50:#f6ffff;--colour-ice-50:#f6ffff;--colour-tints-ice-100:#edfffe;--colour-ice-100:#edfffe;--colour-tints-ice-200:#dbfffd;--colour-ice-200:#dbfffd;--colour-tints-ice-300:#cafffd;--colour-ice-300:#cafffd;--colour-tints-ice-400:#b8fffc;--colour-ice-400:#b8fffc;--colour-tints-ice-500:#a6fffb;--colour-ice-500:#a6fffb;--colour-tints-ice-600:#95e6e2;--colour-ice-600:#95e6e2;--colour-tints-ice-700:#85ccc9;--colour-ice-700:#85ccc9;--colour-typography-heading-primary:#14343B;--colour-typography-heading-secondary:#B09670;--colour-typography-body-dark:#14343B;--colour-typography-body-default:#14343B;--colour-typography-body-subtle:#708380;--colour-background-mist-green:#C6D5D1;--colour-background-inkwell:#14343B;--colour-background-soft-clay:#B09670;--colour-background-white:#FFFFFF;--colour-background-ivory-paper:#FFF9EE;--colour-background-level1:#E8EEED;--colour-ui-mist-green:#C6D5D1;--colour-ui-inkwell:#14343B;--colour-ui-soft-clay:#B09670;--colour-ui-white:#FFFFFF;--colour-ui-ivory-paper:#FFF9EE;--colour-ui-azure:#7FE2D4;--colour-ui-ice:#A6FFF8;--radius-sm:6px;--radius-md:12px;--radius-lg:20px;--radius-pill:999px;--shadow-sm:0 1px 2px rgba(20, 52, 59, 0.08);--shadow-md:1px 2px 4px rgba(20, 52, 59, 0.2);--shadow-navbar:0 4px 24px rgba(20, 52, 59, 0.12);--status-ok:#3E8F6E;--status-issue:#B94A3B;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--typography-headingfont:'NeuSans', Arial, sans-serif;--typography-bodyfont:'NeuSans', Arial, sans-serif;--typography-sansfont:'NeuSans', Arial, sans-serif;--font-weight-regular:400;--font-weight-book:500;--font-weight-semibold:600;--font-size-heading-1-desktop:56px;--font-size-heading-1-mobile:38px;--font-size-heading-2-desktop:44px;--font-size-heading-2-mobile:32px;--font-size-heading-3-desktop:34px;--font-size-heading-3-mobile:25px;--font-size-heading-4-desktop:24px;--font-size-heading-4-mobile:20px;--font-size-heading-5-desktop:20px;--font-size-heading-5-mobile:18px;--font-size-heading-xl-desktop:80px;--font-size-heading-xl-mobile:50px;--font-size-heading-card-desktop:22px;--font-size-heading-card-mobile:20px;--font-size-body-xlarge:22px;--font-size-body-large:18px;--font-size-body-medium:16px;--font-size-body-small:14px;--font-size-label-button:17px;--font-size-label-tag:14px;--line-height-heading-3:38px;--line-height-heading-4:30px;--line-height-heading-5:24px;--line-height-heading-tight:1;--line-height-heading-normal:1.1;--line-height-heading-relaxed:1.2;--line-height-heading-card:28px;--line-height-body-xlarge:28px;--line-height-body-large:26px;--line-height-body-medium:24px;--line-height-body-small:20px;--line-height-label-button:20px;--line-height-label-tag:1;--letter-spacing-heading:-0.02em;--letter-spacing-body:0;--grid-xlarge-breakpoint:1440px;--grid-xlarge-columns:12;--grid-xlarge-margin:80px;--grid-xlarge-gutter:24px;--grid-xlarge-max-width:1440px;--grid-large-breakpoint:1024px;--grid-large-columns:12;--grid-large-margin:64px;--grid-large-gutter:16px;--grid-large-max-width:1024px;--grid-medium-breakpoint:768px;--grid-medium-columns:6;--grid-medium-margin:32px;--grid-medium-gutter:16px;--grid-medium-max-width:768px;--grid-small-breakpoint:375px;--grid-small-columns:4;--grid-small-margin:20px;--grid-small-gutter:16px;--grid-small-max-width:100%;--grid-xsmall-breakpoint:320px;--grid-xsmall-columns:4;--grid-xsmall-margin:16px;--grid-xsmall-gutter:16px;--grid-xsmall-max-width:100%;--icon-size-small:16px;--icon-size-medium:24px;--icon-size-large:32px;--icon-badge-size:48px;--illustration-size:432px}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,g as a,b as i}from"./p-
|
|
1
|
+
import{p as e,g as a,b as i}from"./p-MwnBSqEY.js";export{s as setNonce}from"./p-MwnBSqEY.js";var t=()=>{const a=import.meta.url;const i={};if(a!==""){i.resourcesUrl=new URL(".",a).href}return e(i)};t().then((async e=>{await a();return i([["p-0e469ad2",[[262,"af-icon-text",{icon:[1],headingSize:[2,"heading-size"],orientation:[1],iconSize:[1,"icon-size"]}]]],["p-6e40dbdf",[[262,"af-testimonial",{backgroundImage:[1,"background-image"],logoImage:[1,"logo-image"],quote:[1],attribution:[1],readMoreLink:[1,"read-more-link"],showNavigation:[1028,"show-navigation"],hasPrev:[1028,"has-prev"],hasNext:[1028,"has-next"]}]]],["p-86f6dfdc",[[262,"af-feature-card",{theme:[1],layout:[1],cardSize:[513,"card-size"],headingSize:[2,"heading-size"],imageSrc:[1,"image-src"],imageAlt:[1,"image-alt"]}]]],["p-e1cbe95a",[[262,"af-illustrated-card",{theme:[1],breakpoint:[1],cardSize:[1,"card-size"]}]]],["p-78518e6c",[[258,"af-testimonial-stat",{value:[1],description:[1],accentBorder:[4,"accent-border"]}]]],["p-4b154e23",[[262,"af-video-container",{videoThumbnailUrl:[1,"video-thumbnail-url"],videoAlt:[1,"video-alt"],videoUrl:[1,"video-url"]}]]],["p-3ee906de",[[262,"af-feature-grid",{columns:[2],mobileLayout:[1,"mobile-layout"],scrollProgress:[32]},null,{mobileLayout:["onMobileLayoutChange"]}]]],["p-1c96856a",[[262,"af-grid-callout",{imageSrc:[1,"image-src"],imageAlt:[1,"image-alt"],imagePosition:[1,"image-position"],columns:[2],headingSize:[2,"heading-size"]}]]],["p-3a0e45c3",[[262,"af-in-page-banner",{theme:[1],heading:[1],description:[1],primaryButtonText:[1,"primary-button-text"],primaryButtonUrl:[1,"primary-button-url"],secondaryButtonText:[1,"secondary-button-text"],secondaryButtonUrl:[1,"secondary-button-url"],illustrationUrl:[1,"illustration-url"],showWaveDecoration:[4,"show-wave-decoration"]}]]],["p-edb1a010",[[262,"af-section",{padding:[1],theme:[1],container:[4]}]]],["p-ad41f905",[[262,"af-split-section",{topTheme:[1,"top-theme"],bottomTheme:[1,"bottom-theme"],padding:[1],container:[4]}]]],["p-50a67fb6",[[262,"af-testimonial-carousel",{currentIndex:[32],isAnimating:[32],testimonialCount:[32]},[[0,"navPrev","handleNavPrev"],[0,"navNext","handleNavNext"]]]]],["p-95d4696a",[[257,"af-color-swatch",{color:[1],name:[1],size:[1]}]]],["p-e055407b",[[258,"af-image",{src:[1],alt:[1],shape:[1]}]]],["p-9c1e9bd8",[[262,"af-text-image",{imagePosition:[1,"image-position"],imageProportion:[1,"image-proportion"],src:[1],alt:[1],showSecondLockup:[4,"show-second-lockup"]}]]],["p-a6eda8af",[[262,"af-accordion",{mode:[1],value:[1025],defaultValue:[1,"default-value"],internalValue:[32]},[[0,"af-accordion-toggle","handleItemToggle"]],{value:["handleValueChange"]}]]],["p-49521f2e",[[257,"af-accordion-item",{itemId:[513,"item-id"],open:[1540],disabled:[516],contentHeight:[32],toggle:[64]},null,{open:["handleOpenChange"]}]]],["p-9eba91fd",[[257,"af-button-group",{direction:[1],gap:[1]}]]],["p-feb3d03f",[[257,"af-center",{axis:[1],inline:[4],minHeight:[1,"min-height"]}]]],["p-4f59b554",[[257,"af-checkbox",{checked:[1540],indeterminate:[516],disabled:[516],name:[1],value:[1]}]]],["p-f10a31cb",[[262,"af-client-carousel",{theme:[1],rows:[2],mode:[1]}]]],["p-41643147",[[262,"af-contact-item",{label:[1],value:[1]}]]],["p-94f51238",[[257,"af-divider",{orientation:[1],spacing:[1]}]]],["p-4cf65950",[[262,"af-feature-accordion",{heading:[1],items:[1],cycleInterval:[2,"cycle-interval"],autoCycle:[4,"auto-cycle"],expandedIndex:[32],timerProgress:[32]},null,{autoCycle:["handleAutoCycleChange"]}]]],["p-862a2509",[[257,"af-fieldset",{legend:[1],orientation:[1],disabled:[516]}]]],["p-6038a213",[[262,"af-footer",{copyrightText:[1,"copyright-text"],statusText:[1,"status-text"],statusUrl:[1,"status-url"],systemsOperational:[4,"systems-operational"],showStatus:[4,"show-status"]}]]],["p-083fc528",[[262,"af-footer-column",{heading:[1]}]]],["p-a35029eb",[[262,"af-footer-link",{href:[1],external:[4]}]]],["p-0201c8bd",[[257,"af-grid",{columns:[2],columnsLg:[2,"columns-lg"],columnsMd:[2,"columns-md"],columnsSm:[2,"columns-sm"],gap:[1],align:[1]}]]],["p-48aadea9",[[257,"af-inline",{gap:[1],align:[1],justify:[1],wrap:[4]}]]],["p-4a355b69",[[257,"af-input",{label:[1],description:[1],placeholder:[1],value:[1025],type:[1],name:[1],disabled:[516],required:[4],readonly:[4],error:[1],showInfoIcon:[4,"show-info-icon"],showSearchIcon:[4,"show-search-icon"],clearable:[4],autocomplete:[1],maxlength:[2],minlength:[2],pattern:[1],isFocused:[32],isHovered:[32]}]]],["p-2e6192eb",[[257,"af-logo-well"]]],["p-ef5857cf",[[262,"af-nav-accordion",{mode:[1],breakpoint:[513],value:[1025],internalValue:[32]},[[0,"af-nav-accordion-item-toggle","handleItemToggle"]]]]],["p-e1e98cd6",[[262,"af-nav-accordion-item",{itemId:[513,"item-id"],label:[1],open:[1540],disabled:[516],href:[1],breakpoint:[513],contentHeight:[32],hasTriggerSlot:[32],hasContent:[32],toggle:[64]},null,{open:["handleOpenChange"]}]]],["p-43f40921",[[258,"af-nav-card",{heading:[1],href:[1],imageSrc:[1,"image-src"],imageAlt:[1,"image-alt"],isHovered:[32]}]]],["p-b2633acb",[[262,"af-nav-menu",{heading:[1],breakpoint:[1],showBorder:[4,"show-border"],cardStyle:[516,"card-style"]}]]],["p-0137e7a5",[[262,"af-nav-menu-nest",{type:[1],breakpoint:[1],showSidebarBorder:[516,"show-sidebar-border"]}]]],["p-81706709",[[257,"af-number-badge",{number:[2],variant:[1],size:[2]}]]],["p-ea42c40b",[[257,"af-paperclip-decoration",{width:[1],height:[1],opacity:[2],fill:[1]}]]],["p-76cb736d",[[257,"af-radio",{checked:[1540],disabled:[516],name:[513],value:[1]}]]],["p-a71d528d",[[257,"af-show",{above:[1],below:[1]}]]],["p-5f6a5741",[[262,"af-social-link",{href:[1],label:[1],icon:[1]}]]],["p-da2d84f7",[[257,"af-spacer",{size:[1],flex:[4],axis:[1]}]]],["p-6c58b283",[[257,"af-stack",{direction:[1],gap:[1],align:[1],justify:[1],wrap:[4]}]]],["p-8c4e3047",[[262,"af-stepper",{orientation:[1]}]]],["p-dbe7ab88",[[262,"af-stepper-step",{index:[514]}]]],["p-7867c2ff",[[257,"af-switch",{active:[1540],disabled:[516],name:[1],value:[1]}]]],["p-9f3e7116",[[257,"af-tab",{label:[1],active:[516],disabled:[516],shape:[513],displayIcon:[4,"display-icon"],displayNumber:[4,"display-number"],value:[1]}]]],["p-35607741",[[257,"af-tab-bar",{shape:[513],breakpoint:[513]},[[0,"keydown","handleKeyDown"]]]]],["p-15f0bd34",[[257,"af-tag",{size:[1],variant:[1],href:[1]}]]],["p-5265e82e",[[262,"af-text-image-nest",{layout:[1]}]]],["p-24e74c10",[[257,"af-textarea",{label:[1],description:[1],placeholder:[1],value:[1025],name:[1],disabled:[516],required:[4],readonly:[4],error:[1],showInfoIcon:[4,"show-info-icon"],rows:[2],maxlength:[2],minlength:[2],resize:[1],isFocused:[32],isHovered:[32]}]]],["p-f9315f9e",[[262,"af-theme-override",{theme:[1]}]]],["p-b2b28366",[[257,"af-visually-hidden",{focusable:[4]}]]],["p-6c33fee6",[[257,"af-aspect-ratio",{ratio:[1]}]]],["p-9aed7039",[[257,"af-icon-button",{variant:[513],size:[1],disabled:[4],href:[1],type:[1],ariaLabel:[1,"aria-label"]}]]],["p-90ef7baa",[[257,"af-button",{variant:[513],size:[1],disabled:[4],type:[1],href:[1],hasIconLeft:[32],hasIconRight:[32]}]]],["p-364ffa25",[[257,"af-icon",{name:[1],size:[2],label:[1]}]]],["p-a84ae4a5",[[258,"af-icon-box",{icon:[1],size:[1]}]]],["p-081cc890",[[262,"af-card",{theme:[1],stretch:[516]}]]],["p-4b2c0698",[[257,"af-container",{maxWidth:[1,"max-width"]}]]],["p-56fe6e6e",[[258,"af-progress-line",{progress:[2],orientation:[1]}]]],["p-4c4406bf",[[262,"af-navbar",{showDefaultLogo:[4,"show-default-logo"],theme:[1],forceMobile:[516,"force-mobile"],mobileMenuOpen:[32],activeDropdown:[32]},[[0,"click","handleTriggerClick"],[1,"mouseover","handleHover"],[1,"mouseleave","handleHostLeave"],[1,"mouseenter","handleHostEnter"],[4,"click","handleDocumentClick"],[4,"keydown","handleKeyDown"]]],[262,"af-nav-item",{hierarchy:[1],variant:[1],breakpoint:[513],href:[1],active:[4]}],[257,"af-heading",{level:[1],align:[1]}],[257,"af-logo"],[257,"af-text",{variant:[1],align:[1],as:[1]}]]],["p-c8c4783c",[[257,"af-typography-lockup",{headingSize:[8,"heading-size"],breakpoint:[1],textAlignment:[1,"text-alignment"],headingAlignment:[1,"heading-alignment"],descriptionAlignment:[1,"description-alignment"],buttonLayout:[1,"button-layout"],buttonsAlignment:[1,"buttons-alignment"],maxWidth:[2,"max-width"],headingColor:[1,"heading-color"],descriptionColor:[1,"description-color"],hasDescription:[32],hasButtons:[32]}]]]],e)}));
|
|
2
2
|
//# sourceMappingURL=affinda.esm.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export{af_heading as AfHeading,af_logo as AfLogo,af_nav_item as AfNavItem,af_navbar as AfNavbar,af_text as AfText}from"./p-
|
|
1
|
+
export{af_heading as AfHeading,af_logo as AfLogo,af_nav_item as AfNavItem,af_navbar as AfNavbar,af_text as AfText}from"./p-4c4406bf.entry.js";export{af_color_swatch as AfColorSwatch}from"./p-95d4696a.entry.js";export{af_container as AfContainer}from"./p-4b2c0698.entry.js";export{af_aspect_ratio as AfAspectRatio}from"./p-6c33fee6.entry.js";export{af_button as AfButton}from"./p-90ef7baa.entry.js";export{af_icon_button as AfIconButton}from"./p-9aed7039.entry.js";export{af_button_group as AfButtonGroup}from"./p-9eba91fd.entry.js";export{af_typography_lockup as AfTypographyLockup}from"./p-c8c4783c.entry.js";export{af_checkbox as AfCheckbox}from"./p-4f59b554.entry.js";export{af_radio as AfRadio}from"./p-76cb736d.entry.js";export{af_switch as AfSwitch}from"./p-7867c2ff.entry.js";export{af_fieldset as AfFieldset}from"./p-862a2509.entry.js";export{af_input as AfInput}from"./p-4a355b69.entry.js";export{af_textarea as AfTextarea}from"./p-24e74c10.entry.js";export{af_tag as AfTag}from"./p-15f0bd34.entry.js";export{af_tab as AfTab}from"./p-9f3e7116.entry.js";export{af_tab_bar as AfTabBar}from"./p-35607741.entry.js";export{af_feature_card as AfFeatureCard}from"./p-86f6dfdc.entry.js";export{af_illustrated_card as AfIllustratedCard}from"./p-e1cbe95a.entry.js";import"./p-MwnBSqEY.js";
|
|
2
2
|
//# sourceMappingURL=index.esm.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as n,h as e,H as a}from"./p-
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as n,h as e,H as a}from"./p-MwnBSqEY.js";const s=".sc-af-nav-menu-nest-h{display:inline-block}.nav-menu-nest.sc-af-nav-menu-nest{display:inline-flex;background:var(--af-background-base, #ffffff);border-radius:32px}.nav-menu-nest.breakpoint-desktop.sc-af-nav-menu-nest{flex-direction:row;align-items:stretch}.nav-menu-nest.breakpoint-desktop.sc-af-nav-menu-nest .menu-columns.sc-af-nav-menu-nest{display:flex;flex-direction:row;gap:32px;padding:24px 0 32px 40px}.nav-menu-nest.breakpoint-desktop.sc-af-nav-menu-nest .menu-sidebar.sc-af-nav-menu-nest{display:flex;flex-direction:column;padding:24px 40px 32px 32px}.nav-menu-nest.breakpoint-desktop .menu-sidebar.sc-af-nav-menu-nest-s>af-nav-menu,.nav-menu-nest.breakpoint-desktop .menu-sidebar .sc-af-nav-menu-nest-s>af-nav-menu{padding-top:16px}.nav-menu-nest.breakpoint-desktop .menu-sidebar.sc-af-nav-menu-nest-s>af-nav-card,.nav-menu-nest.breakpoint-desktop .menu-sidebar .sc-af-nav-menu-nest-s>af-nav-card{margin-top:16px}.nav-menu-nest.breakpoint-desktop .menu-columns.sc-af-nav-menu-nest-s>af-nav-menu,.nav-menu-nest.breakpoint-desktop .menu-columns .sc-af-nav-menu-nest-s>af-nav-menu{flex:1 1 0;min-width:0;border-right:1px solid var(--af-background-border-subtle, #e8eeed);padding-right:32px;padding-top:16px}.nav-menu-nest.breakpoint-desktop .menu-columns.sc-af-nav-menu-nest-s>af-nav-menu,.nav-menu-nest.breakpoint-desktop .menu-columns.sc-af-nav-menu-nest-s>af-nav-menu:last-of-type,.nav-menu-nest.breakpoint-desktop .menu-columns .sc-af-nav-menu-nest-s>af-nav-menu:last-of-type{border-right:none;padding-right:0}.sc-af-nav-menu-nest-h[show-sidebar-border] .nav-menu-nest.breakpoint-desktop .menu-columns.sc-af-nav-menu-nest-s>af-nav-menu,.nav-menu-nest.breakpoint-desktop .menu-columns.sc-af-nav-menu-nest-s>af-nav-menu:last-of-type,.nav-menu-nest.breakpoint-desktop .menu-columns.sc-af-nav-menu-nest-s>af-nav-menu,.nav-menu-nest.breakpoint-desktop .menu-columns .sc-af-nav-menu-nest-s>af-nav-menu:last-of-type{border-right:1px solid var(--af-background-border-heavy, #c6d5d1);padding-right:32px}@media (max-width: 1199px){.nav-menu-nest.breakpoint-desktop.sc-af-nav-menu-nest .menu-columns.sc-af-nav-menu-nest{gap:20px;padding:20px 0 24px 24px}.nav-menu-nest.breakpoint-desktop.sc-af-nav-menu-nest .menu-sidebar.sc-af-nav-menu-nest{padding:20px 24px 24px 20px}.nav-menu-nest.breakpoint-desktop .menu-columns.sc-af-nav-menu-nest-s>af-nav-menu,.nav-menu-nest.breakpoint-desktop .menu-columns .sc-af-nav-menu-nest-s>af-nav-menu{padding-right:20px}.sc-af-nav-menu-nest-h[show-sidebar-border] .nav-menu-nest.breakpoint-desktop .menu-columns.sc-af-nav-menu-nest-s>af-nav-menu,.nav-menu-nest.breakpoint-desktop .menu-columns.sc-af-nav-menu-nest-s>af-nav-menu:last-of-type,.nav-menu-nest.breakpoint-desktop .menu-columns.sc-af-nav-menu-nest-s>af-nav-menu,.nav-menu-nest.breakpoint-desktop .menu-columns .sc-af-nav-menu-nest-s>af-nav-menu:last-of-type{padding-right:20px}}.nav-menu-nest.breakpoint-mobile.sc-af-nav-menu-nest{flex-direction:column;border-radius:0}.nav-menu-nest.breakpoint-mobile.sc-af-nav-menu-nest .menu-columns.sc-af-nav-menu-nest{display:flex;flex-direction:column}.nav-menu-nest.breakpoint-mobile.sc-af-nav-menu-nest .menu-sidebar.sc-af-nav-menu-nest{display:flex;flex-direction:column;padding:32px 12px;border-top:1px solid var(--af-background-border-subtle, #e8eeed)}.nav-menu-nest.breakpoint-mobile .menu-columns.sc-af-nav-menu-nest-s>af-nav-menu,.nav-menu-nest.breakpoint-mobile .menu-columns .sc-af-nav-menu-nest-s>af-nav-menu{border-right:none;border-bottom:1px solid var(--af-background-border-subtle, #e8eeed)}";const t=class{constructor(e){n(this,e);this.type="solutions";this.breakpoint="desktop";this.showSidebarBorder=true}render(){const n={"nav-menu-nest":true,"theme-white":true,[`type-${this.type}`]:true,[`breakpoint-${this.breakpoint}`]:true};return e(a,{key:"10f78b27ad9bb744415303815a0d332c521b97ce"},e("div",{key:"1fd8d7624889e151a7051b0f8b2ee7c773ae4d60",class:n},e("div",{key:"e2fefca6e151476e80c1b45d435bb72b623f8c15",class:"menu-columns"},e("slot",{key:"321200c424b9e4b8b9f1f9cf101de1a2a4fdc742"})),e("div",{key:"8956a487218299d9735ece9a6ca9fe3a23828e0f",class:"menu-sidebar"},e("slot",{key:"8cb04d5028ec97976d38b39a1b66f41600b7fa0f",name:"sidebar"}))))}};t.style=s;export{t as af_nav_menu_nest};
|
|
2
|
+
//# sourceMappingURL=p-0137e7a5.entry.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r,h as i,H as t}from"./p-
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r,h as i,H as t}from"./p-MwnBSqEY.js";const s=":host{display:block;box-sizing:border-box}:host([hidden]){display:none}.grid{display:grid;grid-template-columns:repeat(var(--grid-columns), 1fr);gap:var(--grid-gap);align-items:var(--grid-align)}@media (max-width: 1024px){.grid{grid-template-columns:repeat(var(--grid-columns-lg), 1fr)}}@media (max-width: 768px){.grid{grid-template-columns:repeat(var(--grid-columns-md), 1fr)}}@media (max-width: 480px){.grid{grid-template-columns:repeat(var(--grid-columns-sm), 1fr)}}";const d=class{constructor(i){r(this,i);this.columns=3;this.gap="4";this.align="stretch"}render(){const r={start:"start",center:"center",end:"end",stretch:"stretch"};return i(t,{key:"bcc57cad4861ded2353d7668fa76281f327efac8",style:{"--grid-columns":String(this.columns),"--grid-columns-lg":String(this.columnsLg??this.columns),"--grid-columns-md":String(this.columnsMd??this.columnsLg??this.columns),"--grid-columns-sm":String(this.columnsSm??this.columnsMd??this.columnsLg??1),"--grid-gap":`var(--space-${this.gap})`,"--grid-align":r[this.align]}},i("div",{key:"e4aaf0f25478b42470f24b7eb831f6598be15423",class:"grid"},i("slot",{key:"bc40be3d30c45c2af348bb67804c25f29d606895"})))}};d.style=s;export{d as af_grid};
|
|
2
|
+
//# sourceMappingURL=p-0201c8bd.entry.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as a,h as r,H as o}from"./p-MwnBSqEY.js";const e=".sc-af-card-h{display:block;width:100%}[stretch].sc-af-card-h{display:flex;flex-direction:column;height:100%}[stretch].sc-af-card-h .card.sc-af-card{flex:1 1 auto}[stretch].sc-af-card-h .card__content.sc-af-card{flex:1 1 auto}.card.sc-af-card{border-radius:var(--af-card-radius, var(--radius-lg, 20px));overflow:hidden;position:relative;display:flex;flex-direction:column;box-sizing:border-box}.card.theme-white.sc-af-card{background-color:var(--colour-brand-white, #ffffff);--af-typography-heading-primary:var(--colour-brand-inkwell, #14343b);--af-typography-body-default:var(--colour-inkwell-400, #2b484f);--af-background-level-1:var(--colour-mistgreen-200, #e8eeed)}.card.theme-white-ivory.sc-af-card{background-color:var(--colour-brand-ivory-paper, #fff9ee);--af-typography-heading-primary:var(--colour-brand-inkwell, #14343b);--af-typography-body-default:var(--colour-inkwell-400, #2b484f);--af-background-level-1:var(--colour-ivory-200, #ffefcc)}.card.theme-inkwell.sc-af-card{background-color:var(--colour-brand-inkwell, #14343b);--af-typography-heading-primary:var(--colour-brand-mist-green, #c6d5d1);--af-typography-body-default:var(--colour-inkwell-100, #d0d6d8);--af-background-level-1:var(--colour-inkwell-450, #203e45);--af-button-secondary-text:var(--colour-brand-white, #ffffff);--af-button-secondary-stroke:var(--colour-brand-white, #ffffff);--af-button-ghost-text:var(--colour-brand-white, #ffffff);--af-button-ghost-icon:var(--colour-brand-white, #ffffff);--af-form-control-bg:var(--colour-inkwell-450, #203e45);--af-form-control-bg-checked:var(--colour-brand-mist-green, #c6d5d1);--af-form-control-bg-disabled:var(--colour-inkwell-400, #2b484f);--af-form-control-bg-checked-disabled:var(--colour-mistgreen-700, #9eaaa7);--af-form-control-stroke:var(--colour-inkwell-350, #60767b);--af-form-control-stroke-hover:var(--colour-brand-white, #ffffff);--af-form-control-stroke-disabled:var(--colour-inkwell-400, #2b484f);--af-form-control-icon:var(--colour-brand-inkwell, #14343b);--af-form-control-label:var(--colour-brand-white, #ffffff)}.card.theme-mist-green.sc-af-card{background-color:var(--colour-brand-mist-green, #c6d5d1);--af-typography-heading-primary:var(--colour-brand-inkwell, #14343b);--af-typography-body-default:var(--colour-inkwell-400, #2b484f);--af-background-level-1:var(--colour-mistgreen-300, #dde6e3)}.card.theme-soft-clay.sc-af-card{background-color:var(--colour-softclay-400, #c0ab8d);--af-typography-heading-primary:var(--colour-brand-inkwell, #14343b);--af-typography-heading-secondary:var(--colour-brand-ivory-paper, #fff9ee);--af-typography-body-default:var(--colour-inkwell-400, #2b484f);--af-background-level-1:var(--colour-softclay-500, #b09670)}.card__content.sc-af-card{position:relative;padding:var(--af-card-padding, 40px);display:flex;flex-direction:column;gap:var(--af-card-gap, 24px);flex:1;box-sizing:border-box;z-index:1}.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}";const c=class{constructor(r){a(this,r);this.theme="mist-green";this.stretch=false}render(){const a={card:true,[`theme-${this.theme}`]:true};return r(o,{key:"9847c934dc643291c0b19a5bbd7a5a1f95171573"},r("div",{key:"ef75699eb880055c79cfb605821167e5e9958aa5",class:a},r("div",{key:"48b0ca5f605d7af698564d6907e38dedf2a4beef",class:"card__content"},r("slot",{key:"fa2832e5ff3796fc80b72d5a4cb630e978a4b083"}))))}};c.style=e;export{c as af_card};
|
|
2
|
+
//# sourceMappingURL=p-081cc890.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["registerInstance","h","Host","afCardCss","AfCard","constructor","hostRef","this","theme","stretch","render","classes","card","key","class","style"],"sources":["0"],"mappings":"
|
|
1
|
+
{"version":3,"names":["registerInstance","h","Host","afCardCss","AfCard","constructor","hostRef","this","theme","stretch","render","classes","card","key","class","style"],"sources":["0"],"mappings":"YAAcA,OAAkBC,OAAQC,MAAY,kBAEpD,MAAMC,EAAY,w/FAElB,MAAMC,EAAS,MACX,WAAAC,CAAYC,GACRN,EAAiBO,KAAMD,GAKvBC,KAAKC,MAAQ,aAObD,KAAKE,QAAU,KACnB,CACA,MAAAC,GACI,MAAMC,EAAU,CACZC,KAAQ,KACR,CAAC,SAASL,KAAKC,SAAU,MAE7B,OAAQP,EAAEC,EAAM,CAAEW,IAAK,4CAA8CZ,EAAE,MAAO,CAAEY,IAAK,2CAA4CC,MAAOH,GAAWV,EAAE,MAAO,CAAEY,IAAK,2CAA4CC,MAAO,iBAAmBb,EAAE,OAAQ,CAAEY,IAAK,+CAC9P,GAEJT,EAAOW,MAAQZ,SAENC","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as o,h as e,H as f}from"./p-
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as o,h as e,H as f}from"./p-MwnBSqEY.js";const a=".sc-af-footer-column-h{display:block}.footer-column.sc-af-footer-column{display:flex;flex-direction:column;gap:16px}.footer-column__heading.sc-af-footer-column{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;font-weight:600;color:var(--colour-tints-mistGreen-200, #C6D5D1);margin:0;text-transform:none}.footer-column__list.sc-af-footer-column{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}.footer-column__list.sc-af-footer-column-s>li,.footer-column__list .sc-af-footer-column-s>li{margin:0}";const c=class{constructor(e){o(this,e);this.heading=""}render(){return e(f,{key:"aff327dcb95b40e2835062053b7e59ee38d1e251"},e("div",{key:"1f08aa09e7ffc52dda5603f5b3a1bb8ab8b42426",class:"footer-column"},this.heading&&e("h5",{key:"ef2532c50e755acb21f786edfbc23ade0097e385",class:"footer-column__heading"},this.heading),e("ul",{key:"c96d5cda9bef99805eb17af7689a294adf80e33b",class:"footer-column__list"},e("slot",{key:"5efdffcd7fc885e71a9460bc21a2d40bf486c14d"}))))}};c.style=a;export{c as af_footer_column};
|
|
2
|
+
//# sourceMappingURL=p-083fc528.entry.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as t,h as e,H as c}from"./p-
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as t,h as e,H as c}from"./p-MwnBSqEY.js";const i=".sc-af-icon-text-h{display:block}.icon-text.sc-af-icon-text{display:flex;width:100%}.icon-text--vertical.sc-af-icon-text{flex-direction:column;gap:24px;align-items:flex-start}.icon-text--horizontal.sc-af-icon-text{flex-direction:row;gap:20px;align-items:flex-start}.icon-text__icon.sc-af-icon-text{flex-shrink:0}.icon-text__lockup.sc-af-icon-text{flex:1;min-width:0}@media (max-width: 768px){.icon-text--vertical.sc-af-icon-text{gap:20px}.icon-text--horizontal.sc-af-icon-text{gap:16px}}";const a=class{constructor(e){t(this,e);this.headingSize=4;this.orientation="vertical";this.iconSize="default"}render(){const t={"icon-text":true,[`icon-text--${this.orientation}`]:true};return e(c,{key:"5ee5ddd91804507b0e4029adeee9eebb687448d9"},e("div",{key:"5c00e4451c12aeaf924c2d9dff3ad85cb5555813",class:t},e("af-icon-box",{key:"d375fa1087651f86fd778744c276bd92e387b297",icon:this.icon,size:this.iconSize,class:"icon-text__icon"}),e("af-typography-lockup",{key:"2be428ff1b3210972248ef741086d96eb6829cb9",headingSize:this.headingSize,textAlignment:"left",buttonAlignment:"vertical",class:"icon-text__lockup"},e("slot",{key:"0da48d34ee2d1ab77c2aac80daffdbce4b2774b1"}),e("span",{key:"140db3a089b16211db54b67b786a90795dbe3d8a",slot:"description"},e("slot",{key:"37d6b87dc348b95c5178e9a04e902f04664a0feb",name:"description"})),e("span",{key:"10031a47ef045d9ad95cb1bb90289fa1d599bc35",slot:"buttons"},e("slot",{key:"decf43947df87a58f42d10ba5025e9c6e1149ca2",name:"buttons"})))))}};a.style=i;export{a as af_icon_text};
|
|
2
|
+
//# sourceMappingURL=p-0e469ad2.entry.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as a,h as r,H as o}from"./p-
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as a,h as r,H as o}from"./p-MwnBSqEY.js";const t=":host{display:inline-flex;flex-shrink:0}.tag{display:inline-flex;align-items:center;overflow:hidden;border-radius:4px;font-family:var(--typography-headingfont, 'NeuSans', Arial, sans-serif);font-weight:var(--font-weight-book, 500);line-height:1;text-decoration:none;transition:background-color 0.15s ease, box-shadow 0.15s ease;cursor:default}a.tag{cursor:pointer}.tag.variant-default{background-color:var(--af-tag-bg, var(--colour-brand-soft-clay, #b09670));color:var(--af-tag-text, var(--colour-brand-inkwell, #14343b))}.tag.variant-default:hover{background-color:var(--af-tag-bg-hover, var(--colour-tints-soft-clay-400, #c0ab8d))}.tag.variant-inkwell{background-color:var(--colour-brand-inkwell, #14343b);color:var(--colour-brand-white, #ffffff)}.tag.variant-inkwell:hover{background-color:var(--colour-tints-inkwell-500, #1e4a48)}.tag.variant-white{background-color:var(--colour-brand-white, #ffffff);color:var(--colour-brand-inkwell, #14343b)}.tag.variant-white:hover{background-color:var(--colour-tints-mist-green-100, #e1eee1)}.tag.variant-soft-clay{background-color:var(--colour-brand-soft-clay, #b09670);color:var(--colour-brand-inkwell, #14343b)}.tag.variant-soft-clay:hover{background-color:var(--colour-tints-soft-clay-400, #c0ab8d)}.tag.variant-mist-green{background-color:var(--colour-brand-mist-green, #c6d5d1);color:var(--colour-brand-inkwell, #14343b)}.tag.variant-mist-green:hover{background-color:var(--colour-tints-mist-green-200, #d2e8e3)}.tag.size-x-small{padding:6px 10px;font-size:var(--font-size-label-tag, 14px)}.tag.size-small{padding:8px 12px;font-size:var(--font-size-label-tag, 14px)}.tag.size-large{padding:12px 16px;font-size:var(--font-size-body-large, 18px)}.tag:focus{outline:none;box-shadow:0 0 0 4px var(--af-background-base, var(--colour-background-white, #ffffff)),\n 0 0 0 5px var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b))}.tag:focus-visible{outline:none;box-shadow:0 0 0 4px var(--af-background-base, var(--colour-background-white, #ffffff)),\n 0 0 0 5px var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b))}";const e=class{constructor(r){a(this,r);this.size="small";this.variant="default"}render(){const a=this.href?"a":"span";const t=this.href?{href:this.href}:{};return r(o,{key:"389b869350a0ead31639016403b8bbd86c8be12f"},r(a,{key:"7be8b372a4c391ae3e426827cf425274dfe3dc44",class:{tag:true,[`size-${this.size}`]:true,[`variant-${this.variant}`]:true},...t},r("slot",{key:"cf622bef7dca7e64215e0e778f3893097e9e30d0"})))}};e.style=t;export{e as af_tag};
|
|
2
|
+
//# sourceMappingURL=p-15f0bd34.entry.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as l,h as a,H as i}from"./p-
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as l,h as a,H as i}from"./p-MwnBSqEY.js";const t=".sc-af-grid-callout-h{display:block;width:100%}.grid-callout.sc-af-grid-callout{display:flex;width:100%;gap:40px;align-items:stretch}.grid-callout__image-container.sc-af-grid-callout{flex:0 0 auto;width:45%;min-height:400px;position:relative;overflow:hidden}.grid-callout--image-left.sc-af-grid-callout .grid-callout__image-container.sc-af-grid-callout{border-radius:0 4000px 4000px 0;margin-left:calc(-1 * var(--container-padding, 80px))}.grid-callout--image-right.sc-af-grid-callout .grid-callout__image-container.sc-af-grid-callout{border-radius:4000px 0 0 4000px;margin-right:calc(-1 * var(--container-padding, 80px))}.grid-callout__image.sc-af-grid-callout{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.grid-callout__content.sc-af-grid-callout{flex:1;display:flex;flex-direction:column;gap:48px;padding:40px 0}.grid-callout--image-left.sc-af-grid-callout .grid-callout__content.sc-af-grid-callout{padding-left:40px}.grid-callout--image-right.sc-af-grid-callout .grid-callout__content.sc-af-grid-callout{padding-right:40px}.grid-callout--no-image.sc-af-grid-callout{flex-direction:column}.grid-callout--no-image.sc-af-grid-callout .grid-callout__content.sc-af-grid-callout{padding:0}.grid-callout__heading.sc-af-grid-callout{max-width:840px}.grid-callout__items.sc-af-grid-callout{display:grid;gap:40px;width:100%}.grid-callout__items--cols-2.sc-af-grid-callout{grid-template-columns:repeat(2, 1fr)}.grid-callout__items--cols-3.sc-af-grid-callout{grid-template-columns:repeat(3, 1fr)}.grid-callout__items--cols-4.sc-af-grid-callout{grid-template-columns:repeat(4, 1fr)}.grid-callout__cta.sc-af-grid-callout{display:flex;gap:12px;flex-wrap:wrap}.grid-callout__cta.sc-af-grid-callout:empty{display:none}@media (max-width: 1024px){.grid-callout.sc-af-grid-callout{gap:32px}.grid-callout__image-container.sc-af-grid-callout{width:40%}.grid-callout__content.sc-af-grid-callout{gap:40px}.grid-callout__items--cols-3.sc-af-grid-callout,.grid-callout__items--cols-4.sc-af-grid-callout{grid-template-columns:repeat(2, 1fr)}.grid-callout__items.sc-af-grid-callout{gap:32px}}@media (max-width: 768px){.grid-callout.sc-af-grid-callout{flex-direction:column;gap:32px}.grid-callout__image-container.sc-af-grid-callout{width:calc(100% + 2 * var(--container-padding, 20px));min-height:280px;margin-left:calc(-1 * var(--container-padding, 20px));margin-right:calc(-1 * var(--container-padding, 20px));border-radius:0}.grid-callout--image-left.sc-af-grid-callout .grid-callout__image-container.sc-af-grid-callout,.grid-callout--image-right.sc-af-grid-callout .grid-callout__image-container.sc-af-grid-callout{border-radius:0;margin-left:calc(-1 * var(--container-padding, 20px));margin-right:calc(-1 * var(--container-padding, 20px))}.grid-callout__content.sc-af-grid-callout{padding:0;gap:32px}.grid-callout--image-left.sc-af-grid-callout .grid-callout__content.sc-af-grid-callout,.grid-callout--image-right.sc-af-grid-callout .grid-callout__content.sc-af-grid-callout{padding-left:0;padding-right:0}.grid-callout__items.sc-af-grid-callout{grid-template-columns:1fr;gap:32px}.grid-callout__items--cols-2.sc-af-grid-callout,.grid-callout__items--cols-3.sc-af-grid-callout,.grid-callout__items--cols-4.sc-af-grid-callout{grid-template-columns:1fr}}";const c=class{constructor(a){l(this,a);this.imageAlt="";this.imagePosition="left";this.columns=2;this.headingSize=2}render(){const l=!!this.imageSrc;const t={"grid-callout":true,"grid-callout--has-image":l,"grid-callout--no-image":!l,[`grid-callout--image-${this.imagePosition}`]:l};const c={"grid-callout__items":true,[`grid-callout__items--cols-${this.columns}`]:true};const r=()=>{if(!l)return null;return a("div",{class:"grid-callout__image-container"},a("img",{src:this.imageSrc,alt:this.imageAlt,class:"grid-callout__image"}))};const o=()=>a("div",{class:"grid-callout__content"},a("af-typography-lockup",{headingSize:this.headingSize,textAlignment:"left",buttonAlignment:"vertical",class:"grid-callout__heading"},a("slot",null),a("span",{slot:"description"},a("slot",{name:"description"}))),a("div",{class:c},a("slot",{name:"items"})),a("div",{class:"grid-callout__cta"},a("slot",{name:"cta"})));return a(i,null,a("div",{class:t},this.imagePosition==="left"&&r(),o(),this.imagePosition==="right"&&r()))}};c.style=t;export{c as af_grid_callout};
|
|
2
|
+
//# sourceMappingURL=p-1c96856a.entry.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as e,c as r,h as a,H as t}from"./p-
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as e,c as r,h as a,H as t}from"./p-MwnBSqEY.js";const o=":host{display:block;width:100%}.textarea-wrapper{display:flex;flex-direction:column;gap:var(--sds-size-space-200, 8px);width:100%}.label-row{display:flex;align-items:center;gap:12px}.label{flex:1;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-book, 500);font-size:16px;line-height:24px;color:var(--af-input-label, var(--af-typography-body-dark, #14343b));cursor:default}.required{color:var(--af-input-error, var(--colour-error, #be292a));margin-left:2px}.info-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;background:none;cursor:pointer;color:var(--af-input-icon, var(--af-background-icon-default, #14343b));flex-shrink:0}.info-icon svg{width:20px;height:20px}.info-icon:hover{opacity:0.7}.info-icon:focus-visible{outline:2px solid var(--af-input-focus-ring, var(--af-typography-body-dark, #14343b));outline-offset:2px;border-radius:4px}.description{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-regular, 400);font-size:16px;line-height:24px;color:var(--af-input-description, var(--af-typography-body-default, #2b484f));margin:0}.textarea-container{display:flex;background:var(--af-input-bg, #ffffff);border:1px solid var(--af-input-border, var(--af-background-border-default, #d1ddda));border-radius:var(--radii-input, 8px);transition:all 0.15s ease;box-sizing:border-box;overflow:hidden}.textarea-container.hovered{background:var(--af-input-bg-hover, var(--af-background-base-hover, #f4f7f6));border-color:var(--af-input-border-hover, var(--af-background-border-heavy, #c6d5d1))}.textarea-container.focused{background:var(--af-input-bg, #ffffff);border-color:var(--af-input-border-active, var(--af-typography-body-dark, #14343b));box-shadow:0 0 0 4px var(--af-background-base, #ffffff), \n 0 0 0 5px var(--af-input-focus-ring, var(--af-typography-body-dark, #14343b))}.textarea-container.error{border-color:var(--af-input-border-error, var(--colour-error, #be292a))}.textarea-container.disabled{background:var(--af-input-bg-disabled, var(--af-background-level-1, #e8eeed));border-color:var(--af-input-border, var(--af-background-border-default, #d1ddda));cursor:not-allowed}.textarea{flex:1;min-width:0;min-height:108px;padding:12px 16px;border:none;background:transparent;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-regular, 400);font-size:16px;line-height:24px;color:var(--af-input-text, var(--af-typography-body-dark, #14343b));outline:none;resize:vertical}.textarea::placeholder{color:var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b));opacity:1}.textarea:disabled{cursor:not-allowed;color:var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b));resize:none}.textarea:disabled::placeholder{color:var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b))}.error-row{display:flex;align-items:center;gap:12px}.error-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;color:var(--af-input-error, var(--colour-error, #be292a))}.error-icon svg{width:20px;height:20px}.error-text{flex:1;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-regular, 400);font-size:16px;line-height:24px;color:var(--af-input-error, var(--colour-error, #be292a))}";const i=class{constructor(a){e(this,a);this.afInput=r(this,"afInput");this.afBlur=r(this,"afBlur");this.afFocus=r(this,"afFocus");this.afInfoClick=r(this,"afInfoClick");this.value="";this.disabled=false;this.required=false;this.readonly=false;this.showInfoIcon=false;this.rows=4;this.resize="vertical";this.isFocused=false;this.isHovered=false;this.handleInput=e=>{const r=e.target;this.value=r.value;this.afInput.emit({value:this.value})};this.handleFocus=()=>{this.isFocused=true;this.afFocus.emit()};this.handleBlur=()=>{this.isFocused=false;this.afBlur.emit()};this.handleMouseEnter=()=>{this.isHovered=true};this.handleMouseLeave=()=>{this.isHovered=false};this.handleInfoClick=e=>{e.preventDefault();e.stopPropagation();this.afInfoClick.emit()}}render(){const e=!!this.error;const r=!!(this.value&&this.value.length>0);const o={"textarea-wrapper":true,disabled:this.disabled,error:e,focused:this.isFocused,hovered:this.isHovered&&!this.disabled&&!this.isFocused,populated:r};const i={"textarea-container":true,disabled:this.disabled,error:e,focused:this.isFocused,hovered:this.isHovered&&!this.disabled&&!this.isFocused};return a(t,{key:"88a61db3d3d625cb33566b0696ac7b7b3ac8d936"},a("div",{key:"8648dea230fc9736ae3d37b65dc34e6e60fef966",class:o},this.label&&a("div",{key:"bb1a4c3d441623d6e57780f486d9b84b96197510",class:"label-row"},a("label",{key:"ef2bf25f44797127f45fe6db632678bfacf1bd58",class:"label",htmlFor:"textarea"},this.label,this.required&&a("span",{key:"8b844499eb020f76c526cd6be88695568f094315",class:"required"},"*")),this.showInfoIcon&&a("button",{key:"76bbd8a0feb29ae8480228d155b78833e400da34",type:"button",class:"info-icon",onClick:this.handleInfoClick,"aria-label":"More information"},a("svg",{key:"e9216ef96b54a2f6c6bb01f1e2d46a4483d0f37e",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},a("path",{key:"6a5b3020e369ef4eb21dcb1147530db1223478af",d:"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"}),a("path",{key:"9ddd81bdf497d5589552d09fc54ddccfd69ca8bf",d:"M12 16V12",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"}),a("path",{key:"f6c12cb8e526e37ce99fe7f8993d4c79bdaba1d8",d:"M12 8H12.01",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"}))),a("slot",{key:"bccc36e8dfc14969b1e1133a3f6dc63a088ea85d",name:"label-end"})),this.description&&a("p",{key:"996377a9fa9efb3e18339d5b4fcaa8fc71b2ab6f",class:"description"},this.description),a("div",{key:"3fedeb84278c68211e15915630bae5331a07a138",class:i,onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave},a("textarea",{key:"1a9d3873af28103d77ffda96d33db77caee1d72b",ref:e=>this.textareaEl=e??undefined,id:"textarea",class:"textarea",name:this.name,value:this.value,placeholder:this.placeholder,disabled:this.disabled,required:this.required,readonly:this.readonly,rows:this.rows,maxlength:this.maxlength,minlength:this.minlength,style:{resize:this.resize},"aria-invalid":e?"true":undefined,"aria-describedby":e?"error-message":this.description?"description":undefined,onInput:this.handleInput,onFocus:this.handleFocus,onBlur:this.handleBlur})),e&&a("div",{key:"483e536c546f7b75d887827d070ea39af9932f0f",class:"error-row",id:"error-message"},a("span",{key:"caafe8df9d66a1fe32809a32f273347d56deeba5",class:"error-icon"},a("svg",{key:"0ae4361974775f89a2f9ba69867e02465adcdfc4",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},a("path",{key:"098c189b4551f4714f40e4ebbba886dfcc9806f6",d:"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"}),a("path",{key:"bb29173d7d17694493242b1742944fbbadb480a8",d:"M12 16V12",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"}),a("path",{key:"48a2fb783e0604e24f0c19ba9086cea72bc93b25",d:"M12 8H12.01",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"}))),a("span",{key:"01ba2e635e379805f9505e1e7ac7c5dcdd0fa270",class:"error-text"},this.error))))}};i.style=o;export{i as af_textarea};
|
|
2
|
+
//# sourceMappingURL=p-24e74c10.entry.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as o,h as a,H as e}from"./p-
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as o,h as a,H as e}from"./p-MwnBSqEY.js";const l=":host{display:inline-block}.logo-well{background:var(--af-carousel-logo-well-bg, var(--colour-background-level1-dark, #203e45));border-radius:var(--radius-logo-well-desktop, 16px);height:72px;width:184px;display:flex;align-items:center;justify-content:center;padding:20px 32px;box-sizing:border-box}::slotted(img){max-height:32px;max-width:120px;width:auto;height:auto;display:block;object-fit:contain;filter:var(--af-carousel-logo-filter, brightness(0) invert(1))}::slotted(svg){max-height:32px;max-width:120px;width:auto;height:auto;display:block;color:var(--af-carousel-logo-color, white)}::slotted(div){white-space:nowrap;color:var(--af-carousel-logo-color, white);font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:600;font-size:16px}@media (max-width: 767px){.logo-well{border-radius:var(--radius-logo-well-mobile, 12px);padding:20px 24px}}";const t=class{constructor(a){o(this,a)}render(){return a(e,{key:"c0896e6345cc862d0cd7105117016a5dc76b3141"},a("div",{key:"a754bb9b44319040e9b1bcb03c6440c60c91af25",class:"logo-well"},a("slot",{key:"8f87dc5de8caba94cc30a529aaa8e4c4426c5e81"})))}};t.style=l;export{t as af_logo_well};
|
|
2
|
+
//# sourceMappingURL=p-2e6192eb.entry.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as a,h as r,H as t,a as e}from"./p-
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as a,h as r,H as t,a as e}from"./p-MwnBSqEY.js";const b=":host{display:block;width:100%}.tab-bar{display:flex;flex-wrap:nowrap;align-items:stretch;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--af-scrollbar-thumb, #8a7049) var(--af-scrollbar-track, #d1ddda)}.tab-bar::-webkit-scrollbar{height:4px}.tab-bar::-webkit-scrollbar-track{background:var(--af-scrollbar-track, #d1ddda);border-radius:2px}.tab-bar::-webkit-scrollbar-thumb{background:var(--af-scrollbar-thumb, #8a7049);border-radius:2px}.tab-bar::-webkit-scrollbar-thumb:hover{background:var(--af-scrollbar-thumb-hover, #8d785a)}.tab-bar.shape-square{gap:0;border-bottom:1px solid var(--af-background-border-subtle, #e8eeed)}.tab-bar.shape-pill{gap:0;padding:var(--space-2, 8px);background-color:var(--af-background-level-1, #e8eeed);border-radius:var(--radius-pill, 999px)}.tab-bar.breakpoint-mobile{}.tab-bar.breakpoint-mobile.shape-square{}.tab-bar.breakpoint-mobile.shape-pill{padding:var(--space-1, 4px)}.tab-bar.breakpoint-desktop{}.tab-bar.breakpoint-desktop.shape-square{}.tab-bar.breakpoint-desktop.shape-pill{padding:var(--space-2, 8px)}";const o=class{constructor(r){a(this,r);this.shape="square";this.breakpoint="desktop"}componentDidLoad(){this.syncChildProps()}componentDidUpdate(){this.syncChildProps()}syncChildProps(){const a=this.el.querySelectorAll("af-tab");a.forEach((a=>{a.setAttribute("shape",this.shape);a.setAttribute("data-breakpoint",this.breakpoint)}))}handleKeyDown(a){const r=Array.from(this.el.querySelectorAll("af-tab:not([disabled])"));const t=r.findIndex((a=>a===document.activeElement||a.shadowRoot?.activeElement));if(t===-1)return;let e=t;switch(a.key){case"ArrowLeft":a.preventDefault();e=t>0?t-1:r.length-1;break;case"ArrowRight":a.preventDefault();e=t<r.length-1?t+1:0;break;case"Home":a.preventDefault();e=0;break;case"End":a.preventDefault();e=r.length-1;break;default:return}const b=r[e];const o=b.shadowRoot?.querySelector("button");if(o){o.focus()}}render(){const a={"tab-bar":true,[`shape-${this.shape}`]:true,[`breakpoint-${this.breakpoint}`]:true};return r(t,{key:"79e200382e16ac4fde0bef958763373b01d24feb",role:"tablist"},r("div",{key:"703f11c9ed35f8163feba14a6056435c420ccf49",class:a},r("slot",{key:"959d4581b14fd720f00f2faaf5b9845d9faa367a"})))}get el(){return e(this)}};o.style=b;export{o as af_tab_bar};
|
|
2
|
+
//# sourceMappingURL=p-35607741.entry.js.map
|