@affinda/wc 0.3.0 → 0.4.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-accordion-item.entry.esm.js.map +1 -1
- package/dist/affinda/af-button.entry.esm.js.map +1 -1
- package/dist/affinda/af-card.entry.esm.js.map +1 -1
- package/dist/affinda/af-feature-accordion.entry.esm.js.map +1 -1
- package/dist/affinda/af-icon-button.entry.esm.js.map +1 -1
- package/dist/affinda/af-nav-accordion-item.entry.esm.js.map +1 -1
- package/dist/affinda/af-stat.entry.esm.js.map +1 -1
- package/dist/affinda/af-testimonial-stat.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-bbfc9df6.entry.js → p-05072f90.entry.js} +2 -2
- package/dist/affinda/p-08a42935.entry.js +2 -0
- package/dist/affinda/{p-9aed7039.entry.js.map → p-08a42935.entry.js.map} +1 -1
- package/dist/affinda/{p-3ed408f6.entry.js → p-14bd7903.entry.js} +2 -2
- package/dist/affinda/{p-9eba91fd.entry.js → p-1902ed20.entry.js} +2 -2
- package/dist/affinda/{p-165c413d.entry.js → p-19dc4331.entry.js} +2 -2
- package/dist/affinda/{p-ae430873.entry.js → p-255a8254.entry.js} +2 -2
- package/dist/affinda/{p-4a9b192b.entry.js → p-2586fbb8.entry.js} +2 -2
- package/dist/affinda/{p-631d141c.entry.js → p-26a6d9a7.entry.js} +2 -2
- package/dist/affinda/{p-7867c2ff.entry.js → p-27469df6.entry.js} +2 -2
- package/dist/affinda/{p-5c163c5b.entry.js → p-2a8441cb.entry.js} +2 -2
- package/dist/affinda/{p-dabd389a.entry.js → p-3238f8e8.entry.js} +2 -2
- package/dist/affinda/{p-b9ec0e75.entry.js → p-3c6790f8.entry.js} +2 -2
- package/dist/affinda/{p-f19cb091.entry.js → p-3dd90f46.entry.js} +2 -2
- package/dist/affinda/{p-9c1e9bd8.entry.js → p-42c4d7b1.entry.js} +2 -2
- package/dist/affinda/{p-6e181b2b.entry.js → p-432ee0e3.entry.js} +2 -2
- package/dist/affinda/{p-1c96856a.entry.js → p-43a0286a.entry.js} +2 -2
- package/dist/affinda/{p-e07e27f1.entry.js → p-44e976ee.entry.js} +2 -2
- package/dist/affinda/{p-7111051c.entry.js → p-479a300e.entry.js} +2 -2
- package/dist/affinda/{p-4b2c0698.entry.js → p-4ccc3147.entry.js} +2 -2
- package/dist/affinda/{p-6c33fee6.entry.js → p-4f15b8f0.entry.js} +2 -2
- package/dist/affinda/p-57fcfd78.entry.js +2 -0
- package/dist/affinda/{p-2237e652.entry.js.map → p-57fcfd78.entry.js.map} +1 -1
- package/dist/affinda/{p-d362651c.entry.js → p-587fd0fa.entry.js} +2 -2
- package/dist/affinda/p-5885ebd3.entry.js +2 -0
- package/dist/affinda/{p-90ef7baa.entry.js.map → p-5885ebd3.entry.js.map} +1 -1
- package/dist/affinda/p-5f3419c3.entry.js +2 -0
- package/dist/affinda/p-5f3419c3.entry.js.map +1 -0
- package/dist/affinda/{p-862a2509.entry.js → p-67a27eaf.entry.js} +2 -2
- package/dist/affinda/{p-44d960ca.entry.js → p-67e8c6f6.entry.js} +2 -2
- package/dist/affinda/{p-41bbb218.entry.js → p-6986f604.entry.js} +2 -2
- package/dist/affinda/{p-85cc55bb.entry.js → p-6b7fcb18.entry.js} +2 -2
- package/dist/affinda/{p-4a355b69.entry.js → p-7013570d.entry.js} +2 -2
- package/dist/affinda/p-750063ab.entry.js +2 -0
- package/dist/affinda/p-750063ab.entry.js.map +1 -0
- package/dist/affinda/{p-15f0bd34.entry.js → p-75443f08.entry.js} +2 -2
- package/dist/affinda/{p-364ffa25.entry.js → p-7640c285.entry.js} +2 -2
- package/dist/affinda/{p-827f3050.entry.js → p-77ec01ee.entry.js} +2 -2
- package/dist/affinda/{p-256970e3.entry.js → p-7c9683d8.entry.js} +2 -2
- package/dist/affinda/{p-0acadf6f.entry.js → p-7ce2b434.entry.js} +2 -2
- package/dist/affinda/{p-7d3cdda1.entry.js → p-7d08db58.entry.js} +2 -2
- package/dist/affinda/{p-dcc89b4c.entry.js → p-7eca844d.entry.js} +2 -2
- package/dist/affinda/{p-5e5e7d75.entry.js → p-95b49b45.entry.js} +2 -2
- package/dist/affinda/{p-365a75e2.entry.js → p-9610cd3c.entry.js} +2 -2
- package/dist/affinda/{p-6756aa66.entry.js → p-9963bec0.entry.js} +2 -2
- package/dist/affinda/{p-342b08e5.entry.js → p-9b115359.entry.js} +2 -2
- package/dist/affinda/p-9ca72e02.entry.js +2 -0
- package/dist/affinda/{p-83bb96cc.entry.js.map → p-9ca72e02.entry.js.map} +1 -1
- package/dist/affinda/{p-4f59b554.entry.js → p-9e19a477.entry.js} +2 -2
- package/dist/affinda/p-C4WBekD2.js +3 -0
- package/dist/affinda/p-C4WBekD2.js.map +1 -0
- package/dist/affinda/{p-a8d75eb1.entry.js → p-a7b51bb6.entry.js} +2 -2
- package/dist/affinda/{p-9f3e7116.entry.js → p-ac45df4b.entry.js} +2 -2
- package/dist/affinda/{p-32d62fbb.entry.js → p-adabec15.entry.js} +2 -2
- package/dist/affinda/{p-bed7d9a1.entry.js → p-b65cf4c3.entry.js} +2 -2
- package/dist/affinda/{p-95d4696a.entry.js → p-b82fc7f1.entry.js} +2 -2
- package/dist/affinda/{p-6475796d.entry.js → p-b8ea57a9.entry.js} +2 -2
- package/dist/affinda/{p-4058a1eb.entry.js → p-bac968a1.entry.js} +2 -2
- package/dist/affinda/{p-76cb736d.entry.js → p-bc77706d.entry.js} +2 -2
- package/dist/affinda/{p-d7d82986.entry.js → p-c4fd7d48.entry.js} +2 -2
- package/dist/affinda/{p-6ea474a3.entry.js → p-ce77f08f.entry.js} +2 -2
- package/dist/affinda/{p-35607741.entry.js → p-d06ae9cd.entry.js} +2 -2
- package/dist/affinda/{p-86f6dfdc.entry.js → p-d34da6c0.entry.js} +2 -2
- package/dist/affinda/{p-24e74c10.entry.js → p-d647ae06.entry.js} +2 -2
- package/dist/affinda/{p-436673bb.entry.js → p-d6b8c3b4.entry.js} +2 -2
- package/dist/affinda/p-d923549d.entry.js +2 -0
- package/dist/affinda/{p-068ac2fb.entry.js.map → p-d923549d.entry.js.map} +1 -1
- package/dist/affinda/{p-65dd559a.entry.js → p-d9913985.entry.js} +2 -2
- package/dist/affinda/{p-9480f00d.entry.js → p-dd0cd57e.entry.js} +2 -2
- package/dist/affinda/{p-a25d3257.entry.js → p-dd4c8640.entry.js} +2 -2
- package/dist/affinda/{p-43f40921.entry.js → p-df6c7170.entry.js} +2 -2
- package/dist/affinda/p-e0619222.entry.js +2 -0
- package/dist/affinda/{p-4eeeb8a1.entry.js.map → p-e0619222.entry.js.map} +1 -1
- package/dist/affinda/{p-eeda78ea.entry.js → p-e90a3892.entry.js} +2 -2
- package/dist/affinda/p-ea150b3d.entry.js +2 -0
- package/dist/affinda/{p-1b4b0c88.entry.js.map → p-ea150b3d.entry.js.map} +1 -1
- package/dist/affinda/{p-a1e80460.entry.js → p-ec042bc4.entry.js} +2 -2
- package/dist/affinda/{p-a02d6192.entry.js → p-f7fc76d2.entry.js} +2 -2
- package/dist/affinda/{p-9ce0adc2.entry.js → p-f9ecbde8.entry.js} +2 -2
- package/dist/affinda/{p-61a6b43d.entry.js → p-fff252df.entry.js} +2 -2
- package/dist/cjs/af-accordion-item.cjs.entry.js +2 -2
- package/dist/cjs/af-accordion-item.entry.cjs.js.map +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 +2 -2
- package/dist/cjs/af-button.entry.cjs.js.map +1 -1
- package/dist/cjs/af-card.cjs.entry.js +11 -3
- 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 +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 +4 -4
- 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 +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_5.cjs.entry.js +1 -1
- package/dist/cjs/af-hero.cjs.entry.js +1 -1
- package/dist/cjs/af-icon-box.cjs.entry.js +1 -1
- package/dist/cjs/af-icon-button.cjs.entry.js +2 -2
- package/dist/cjs/af-icon-button.entry.cjs.js.map +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 +1 -1
- package/dist/cjs/af-image.cjs.entry.js +1 -1
- package/dist/cjs/af-in-page-banner.cjs.entry.js +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 +2 -2
- package/dist/cjs/af-nav-accordion-item.entry.cjs.js.map +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-numbered-stepper-item.cjs.entry.js +1 -1
- package/dist/cjs/af-numbered-stepper.cjs.entry.js +1 -1
- package/dist/cjs/af-paperclip-decoration.cjs.entry.js +1 -1
- package/dist/cjs/af-progress-line.cjs.entry.js +1 -1
- package/dist/cjs/af-radio.cjs.entry.js +1 -1
- package/dist/cjs/af-section.cjs.entry.js +1 -1
- package/dist/cjs/af-show.cjs.entry.js +1 -1
- package/dist/cjs/af-social-link.cjs.entry.js +1 -1
- package/dist/cjs/af-spacer.cjs.entry.js +1 -1
- package/dist/cjs/af-split-section.cjs.entry.js +1 -1
- package/dist/cjs/af-stack.cjs.entry.js +1 -1
- package/dist/cjs/af-stat.cjs.entry.js +2 -2
- package/dist/cjs/af-stat.entry.cjs.js.map +1 -1
- package/dist/cjs/af-stats-row.cjs.entry.js +1 -1
- package/dist/cjs/af-stepper-step.cjs.entry.js +1 -1
- package/dist/cjs/af-stepper.cjs.entry.js +1 -1
- 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 +1 -1
- package/dist/cjs/af-testimonial-stat.cjs.entry.js +2 -2
- package/dist/cjs/af-testimonial-stat.entry.cjs.js.map +1 -1
- package/dist/cjs/af-testimonial.cjs.entry.js +1 -1
- package/dist/cjs/af-text-image-nest.cjs.entry.js +1 -1
- 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 +1 -1
- package/dist/cjs/af-typography-lockup.cjs.entry.js +1 -1
- package/dist/cjs/af-video-container.cjs.entry.js +1 -1
- package/dist/cjs/af-visually-hidden.cjs.entry.js +1 -1
- package/dist/cjs/affinda.cjs.js +2 -2
- package/dist/cjs/{index-BzZA0USq.js → index-3161MbMQ.js} +3 -3
- package/dist/cjs/index-3161MbMQ.js.map +1 -0
- package/dist/cjs/index.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/collection/components/af-accordion-item/af-accordion-item.css +11 -3
- package/dist/collection/components/af-button/af-button.css +16 -1
- package/dist/collection/components/af-card/af-card.css +30 -0
- package/dist/collection/components/af-card/af-card.js +29 -1
- package/dist/collection/components/af-card/af-card.js.map +1 -1
- package/dist/collection/components/af-feature-accordion/af-feature-accordion.css +36 -2
- package/dist/collection/components/af-feature-accordion/af-feature-accordion.js +2 -2
- package/dist/collection/components/af-feature-accordion/af-feature-accordion.js.map +1 -1
- package/dist/collection/components/af-icon-button/af-icon-button.css +15 -1
- package/dist/collection/components/af-nav-accordion-item/af-nav-accordion-item.css +10 -2
- package/dist/collection/components/af-stat/af-stat.css +5 -0
- package/dist/collection/components/af-testimonial-stat/af-testimonial-stat.css +4 -0
- package/dist/components/af-accordion-item.js +2 -2
- package/dist/components/af-accordion-item.js.map +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 +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 +4 -4
- 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 +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-hero.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 +2 -2
- 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 +2 -2
- package/dist/components/af-nav-accordion-item.js.map +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-numbered-stepper-item.js +3 -3
- package/dist/components/af-numbered-stepper.js +1 -1
- package/dist/components/af-paperclip-decoration.js +1 -1
- package/dist/components/af-progress-line.js +1 -1
- package/dist/components/af-radio.js +1 -1
- package/dist/components/af-section.js +1 -1
- package/dist/components/af-show.js +1 -1
- package/dist/components/af-social-link.js +1 -1
- package/dist/components/af-spacer.js +1 -1
- package/dist/components/af-split-section.js +2 -2
- package/dist/components/af-stack.js +1 -1
- package/dist/components/af-stat.js +4 -4
- package/dist/components/af-stat.js.map +1 -1
- package/dist/components/af-stats-row.js +1 -1
- package/dist/components/af-stepper-step.js +1 -1
- package/dist/components/af-stepper.js +1 -1
- 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 +2 -2
- package/dist/components/af-testimonial-stat.js +4 -4
- package/dist/components/af-testimonial-stat.js.map +1 -1
- package/dist/components/af-testimonial.js +4 -4
- package/dist/components/af-text-image-nest.js +1 -1
- 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 +1 -1
- package/dist/components/af-typography-lockup.js +1 -1
- package/dist/components/af-video-container.js +3 -3
- package/dist/components/af-visually-hidden.js +1 -1
- package/dist/components/index.js +25 -25
- package/dist/components/{p-Dd3nOGt_.js → p--aWqZ9H9.js} +3 -3
- package/dist/components/{p-Dd3nOGt_.js.map → p--aWqZ9H9.js.map} +1 -1
- package/dist/components/{p-DqJRvNOl.js → p-1ol-T8nk.js} +4 -4
- package/dist/components/{p-DqJRvNOl.js.map → p-1ol-T8nk.js.map} +1 -1
- package/dist/components/{p--gChEc0P.js → p-B-hgy9Qr.js} +4 -4
- package/dist/components/p-B-hgy9Qr.js.map +1 -0
- package/dist/components/{p-DyZaoX4Q.js → p-Bi6_eN-1.js} +3 -3
- package/dist/components/{p-DyZaoX4Q.js.map → p-Bi6_eN-1.js.map} +1 -1
- package/dist/components/{p-CYKk6Qhi.js → p-Bx-hxLP0.js} +3 -3
- package/dist/components/{p-CYKk6Qhi.js.map → p-Bx-hxLP0.js.map} +1 -1
- package/dist/components/{p-DbVc-b1e.js → p-BysQTjHh.js} +3 -3
- package/dist/components/{p-DbVc-b1e.js.map → p-BysQTjHh.js.map} +1 -1
- package/dist/components/{p-C4G6votC.js → p-C0enaaNi.js} +3 -3
- package/dist/components/{p-C4G6votC.js.map → p-C0enaaNi.js.map} +1 -1
- package/dist/components/{p-BROLmNeM.js → p-C7gWqhJQ.js} +3 -3
- package/dist/components/{p-BROLmNeM.js.map → p-C7gWqhJQ.js.map} +1 -1
- package/dist/components/{p-mbl86-w6.js → p-CDPPh9ES.js} +5 -5
- package/dist/components/{p-mbl86-w6.js.map → p-CDPPh9ES.js.map} +1 -1
- package/dist/components/{p-ClZAZSzR.js → p-CTDelwMf.js} +3 -3
- package/dist/components/{p-ClZAZSzR.js.map → p-CTDelwMf.js.map} +1 -1
- package/dist/components/{p-CRnEuh5f.js → p-CVZQcdGR.js} +6 -6
- package/dist/components/{p-CRnEuh5f.js.map → p-CVZQcdGR.js.map} +1 -1
- package/dist/components/{p-CX0pktY8.js → p-CaHyFRpU.js} +3 -3
- package/dist/components/{p-CX0pktY8.js.map → p-CaHyFRpU.js.map} +1 -1
- package/dist/components/{p-3Gzh4deR.js → p-CdR70Kv1.js} +5 -5
- package/dist/components/{p-3Gzh4deR.js.map → p-CdR70Kv1.js.map} +1 -1
- package/dist/components/{p-NtJ_O8-z.js → p-CeBCwjRf.js} +3 -3
- package/dist/components/{p-NtJ_O8-z.js.map → p-CeBCwjRf.js.map} +1 -1
- package/dist/components/{p-DOgb6SUj.js → p-CiY0Twna.js} +3 -3
- package/dist/components/p-CiY0Twna.js.map +1 -0
- package/dist/components/{p-CP8rLe_C.js → p-D44TKuX4.js} +3 -3
- package/dist/components/{p-CP8rLe_C.js.map → p-D44TKuX4.js.map} +1 -1
- package/dist/components/{p-Dx_UXI2a.js → p-D6WBvdoZ.js} +3 -3
- package/dist/components/{p-Dx_UXI2a.js.map → p-D6WBvdoZ.js.map} +1 -1
- package/dist/components/{p-BT13eL0Y.js → p-DBkfDqnN.js} +3 -3
- package/dist/components/{p-BT13eL0Y.js.map → p-DBkfDqnN.js.map} +1 -1
- package/dist/components/p-DGlAo2Hc.js +71 -0
- package/dist/components/p-DGlAo2Hc.js.map +1 -0
- package/dist/components/{p-CoL_hRAR.js → p-DWD7Oc5l.js} +3 -3
- package/dist/components/{p-CoL_hRAR.js.map → p-DWD7Oc5l.js.map} +1 -1
- package/dist/components/{p-QoDae21y.js → p-DYZT-0xm.js} +3 -3
- package/dist/components/{p-QoDae21y.js.map → p-DYZT-0xm.js.map} +1 -1
- package/dist/components/{p-BRDu9zN1.js → p-Dga7rIrc.js} +3 -3
- package/dist/components/{p-BRDu9zN1.js.map → p-Dga7rIrc.js.map} +1 -1
- package/dist/components/{p-O26uYJSV.js → p-DjjPGV3a.js} +4 -4
- package/dist/components/{p-O26uYJSV.js.map → p-DjjPGV3a.js.map} +1 -1
- package/dist/components/{p-B_OoX__z.js → p-DmlCoFGW.js} +3 -3
- package/dist/components/{p-B_OoX__z.js.map → p-DmlCoFGW.js.map} +1 -1
- package/dist/components/p-G-vNzZpq.js +62 -0
- package/dist/components/p-G-vNzZpq.js.map +1 -0
- package/dist/components/{p-BgXXQG75.js → p-G5cG9ahw.js} +3 -3
- package/dist/components/{p-BgXXQG75.js.map → p-G5cG9ahw.js.map} +1 -1
- package/dist/components/{p-kEqwmn80.js → p-OefAiC9E.js} +3 -3
- package/dist/components/{p-kEqwmn80.js.map → p-OefAiC9E.js.map} +1 -1
- package/dist/components/{p-DJC-C2BS.js → p-PKWusChD.js} +3 -3
- package/dist/components/{p-DJC-C2BS.js.map → p-PKWusChD.js.map} +1 -1
- package/dist/components/{p-D8DmhESZ.js → p-Xy0_sffa.js} +3 -3
- package/dist/components/{p-D8DmhESZ.js.map → p-Xy0_sffa.js.map} +1 -1
- package/dist/components/{p-nA3Uvhwb.js → p-gD0WsQqs.js} +4 -4
- package/dist/components/{p-nA3Uvhwb.js.map → p-gD0WsQqs.js.map} +1 -1
- package/dist/components/{p-LRPXnaSx.js → p-sxltTNnO.js} +3 -3
- package/dist/components/{p-LRPXnaSx.js.map → p-sxltTNnO.js.map} +1 -1
- package/dist/components/{p-BXmiPS9x.js → p-uvbCz67Q.js} +3 -3
- package/dist/components/{p-BXmiPS9x.js.map → p-uvbCz67Q.js.map} +1 -1
- package/dist/esm/af-accordion-item.entry.js +2 -2
- package/dist/esm/af-accordion-item.entry.js.map +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 +2 -2
- package/dist/esm/af-button.entry.js.map +1 -1
- package/dist/esm/af-card.entry.js +11 -3
- 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 +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 +4 -4
- 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 +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_5.entry.js +1 -1
- package/dist/esm/af-hero.entry.js +1 -1
- package/dist/esm/af-icon-box.entry.js +1 -1
- package/dist/esm/af-icon-button.entry.js +2 -2
- package/dist/esm/af-icon-button.entry.js.map +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 +1 -1
- package/dist/esm/af-image.entry.js +1 -1
- package/dist/esm/af-in-page-banner.entry.js +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 +2 -2
- package/dist/esm/af-nav-accordion-item.entry.js.map +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-numbered-stepper-item.entry.js +1 -1
- package/dist/esm/af-numbered-stepper.entry.js +1 -1
- package/dist/esm/af-paperclip-decoration.entry.js +1 -1
- package/dist/esm/af-progress-line.entry.js +1 -1
- package/dist/esm/af-radio.entry.js +1 -1
- package/dist/esm/af-section.entry.js +1 -1
- package/dist/esm/af-show.entry.js +1 -1
- package/dist/esm/af-social-link.entry.js +1 -1
- package/dist/esm/af-spacer.entry.js +1 -1
- package/dist/esm/af-split-section.entry.js +1 -1
- package/dist/esm/af-stack.entry.js +1 -1
- package/dist/esm/af-stat.entry.js +2 -2
- package/dist/esm/af-stat.entry.js.map +1 -1
- package/dist/esm/af-stats-row.entry.js +1 -1
- package/dist/esm/af-stepper-step.entry.js +1 -1
- package/dist/esm/af-stepper.entry.js +1 -1
- 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 +1 -1
- package/dist/esm/af-testimonial-stat.entry.js +2 -2
- package/dist/esm/af-testimonial-stat.entry.js.map +1 -1
- package/dist/esm/af-testimonial.entry.js +1 -1
- package/dist/esm/af-text-image-nest.entry.js +1 -1
- 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 +1 -1
- package/dist/esm/af-typography-lockup.entry.js +1 -1
- package/dist/esm/af-video-container.entry.js +1 -1
- package/dist/esm/af-visually-hidden.entry.js +1 -1
- package/dist/esm/affinda.js +3 -3
- package/dist/esm/{index-MwnBSqEY.js → index-C4WBekD2.js} +3 -3
- package/dist/esm/index-C4WBekD2.js.map +1 -0
- package/dist/esm/index.js +1 -1
- package/dist/esm/loader.js +3 -3
- package/dist/types/components/af-card/af-card.d.ts +8 -0
- package/dist/types/components.d.ts +10 -0
- package/package.json +3 -3
- package/dist/affinda/p-068ac2fb.entry.js +0 -2
- package/dist/affinda/p-1b4b0c88.entry.js +0 -2
- package/dist/affinda/p-2237e652.entry.js +0 -2
- package/dist/affinda/p-2526604b.entry.js +0 -2
- package/dist/affinda/p-2526604b.entry.js.map +0 -1
- package/dist/affinda/p-4eeeb8a1.entry.js +0 -2
- package/dist/affinda/p-83bb96cc.entry.js +0 -2
- package/dist/affinda/p-90ef7baa.entry.js +0 -2
- package/dist/affinda/p-9aed7039.entry.js +0 -2
- package/dist/affinda/p-MwnBSqEY.js +0 -3
- package/dist/affinda/p-MwnBSqEY.js.map +0 -1
- package/dist/affinda/p-b39eea31.entry.js +0 -2
- package/dist/affinda/p-b39eea31.entry.js.map +0 -1
- package/dist/cjs/index-BzZA0USq.js.map +0 -1
- package/dist/components/p--gChEc0P.js.map +0 -1
- package/dist/components/p-BW-FxZwa.js +0 -71
- package/dist/components/p-BW-FxZwa.js.map +0 -1
- package/dist/components/p-CJxqw006.js +0 -53
- package/dist/components/p-CJxqw006.js.map +0 -1
- package/dist/components/p-DOgb6SUj.js.map +0 -1
- package/dist/esm/index-MwnBSqEY.js.map +0 -1
- /package/dist/affinda/{p-bbfc9df6.entry.js.map → p-05072f90.entry.js.map} +0 -0
- /package/dist/affinda/{p-3ed408f6.entry.js.map → p-14bd7903.entry.js.map} +0 -0
- /package/dist/affinda/{p-9eba91fd.entry.js.map → p-1902ed20.entry.js.map} +0 -0
- /package/dist/affinda/{p-165c413d.entry.js.map → p-19dc4331.entry.js.map} +0 -0
- /package/dist/affinda/{p-ae430873.entry.js.map → p-255a8254.entry.js.map} +0 -0
- /package/dist/affinda/{p-4a9b192b.entry.js.map → p-2586fbb8.entry.js.map} +0 -0
- /package/dist/affinda/{p-631d141c.entry.js.map → p-26a6d9a7.entry.js.map} +0 -0
- /package/dist/affinda/{p-7867c2ff.entry.js.map → p-27469df6.entry.js.map} +0 -0
- /package/dist/affinda/{p-5c163c5b.entry.js.map → p-2a8441cb.entry.js.map} +0 -0
- /package/dist/affinda/{p-dabd389a.entry.js.map → p-3238f8e8.entry.js.map} +0 -0
- /package/dist/affinda/{p-b9ec0e75.entry.js.map → p-3c6790f8.entry.js.map} +0 -0
- /package/dist/affinda/{p-f19cb091.entry.js.map → p-3dd90f46.entry.js.map} +0 -0
- /package/dist/affinda/{p-9c1e9bd8.entry.js.map → p-42c4d7b1.entry.js.map} +0 -0
- /package/dist/affinda/{p-6e181b2b.entry.js.map → p-432ee0e3.entry.js.map} +0 -0
- /package/dist/affinda/{p-1c96856a.entry.js.map → p-43a0286a.entry.js.map} +0 -0
- /package/dist/affinda/{p-e07e27f1.entry.js.map → p-44e976ee.entry.js.map} +0 -0
- /package/dist/affinda/{p-7111051c.entry.js.map → p-479a300e.entry.js.map} +0 -0
- /package/dist/affinda/{p-4b2c0698.entry.js.map → p-4ccc3147.entry.js.map} +0 -0
- /package/dist/affinda/{p-6c33fee6.entry.js.map → p-4f15b8f0.entry.js.map} +0 -0
- /package/dist/affinda/{p-d362651c.entry.js.map → p-587fd0fa.entry.js.map} +0 -0
- /package/dist/affinda/{p-862a2509.entry.js.map → p-67a27eaf.entry.js.map} +0 -0
- /package/dist/affinda/{p-44d960ca.entry.js.map → p-67e8c6f6.entry.js.map} +0 -0
- /package/dist/affinda/{p-41bbb218.entry.js.map → p-6986f604.entry.js.map} +0 -0
- /package/dist/affinda/{p-85cc55bb.entry.js.map → p-6b7fcb18.entry.js.map} +0 -0
- /package/dist/affinda/{p-4a355b69.entry.js.map → p-7013570d.entry.js.map} +0 -0
- /package/dist/affinda/{p-15f0bd34.entry.js.map → p-75443f08.entry.js.map} +0 -0
- /package/dist/affinda/{p-364ffa25.entry.js.map → p-7640c285.entry.js.map} +0 -0
- /package/dist/affinda/{p-827f3050.entry.js.map → p-77ec01ee.entry.js.map} +0 -0
- /package/dist/affinda/{p-256970e3.entry.js.map → p-7c9683d8.entry.js.map} +0 -0
- /package/dist/affinda/{p-0acadf6f.entry.js.map → p-7ce2b434.entry.js.map} +0 -0
- /package/dist/affinda/{p-7d3cdda1.entry.js.map → p-7d08db58.entry.js.map} +0 -0
- /package/dist/affinda/{p-dcc89b4c.entry.js.map → p-7eca844d.entry.js.map} +0 -0
- /package/dist/affinda/{p-5e5e7d75.entry.js.map → p-95b49b45.entry.js.map} +0 -0
- /package/dist/affinda/{p-365a75e2.entry.js.map → p-9610cd3c.entry.js.map} +0 -0
- /package/dist/affinda/{p-6756aa66.entry.js.map → p-9963bec0.entry.js.map} +0 -0
- /package/dist/affinda/{p-342b08e5.entry.js.map → p-9b115359.entry.js.map} +0 -0
- /package/dist/affinda/{p-4f59b554.entry.js.map → p-9e19a477.entry.js.map} +0 -0
- /package/dist/affinda/{p-a8d75eb1.entry.js.map → p-a7b51bb6.entry.js.map} +0 -0
- /package/dist/affinda/{p-9f3e7116.entry.js.map → p-ac45df4b.entry.js.map} +0 -0
- /package/dist/affinda/{p-32d62fbb.entry.js.map → p-adabec15.entry.js.map} +0 -0
- /package/dist/affinda/{p-bed7d9a1.entry.js.map → p-b65cf4c3.entry.js.map} +0 -0
- /package/dist/affinda/{p-95d4696a.entry.js.map → p-b82fc7f1.entry.js.map} +0 -0
- /package/dist/affinda/{p-6475796d.entry.js.map → p-b8ea57a9.entry.js.map} +0 -0
- /package/dist/affinda/{p-4058a1eb.entry.js.map → p-bac968a1.entry.js.map} +0 -0
- /package/dist/affinda/{p-76cb736d.entry.js.map → p-bc77706d.entry.js.map} +0 -0
- /package/dist/affinda/{p-d7d82986.entry.js.map → p-c4fd7d48.entry.js.map} +0 -0
- /package/dist/affinda/{p-6ea474a3.entry.js.map → p-ce77f08f.entry.js.map} +0 -0
- /package/dist/affinda/{p-35607741.entry.js.map → p-d06ae9cd.entry.js.map} +0 -0
- /package/dist/affinda/{p-86f6dfdc.entry.js.map → p-d34da6c0.entry.js.map} +0 -0
- /package/dist/affinda/{p-24e74c10.entry.js.map → p-d647ae06.entry.js.map} +0 -0
- /package/dist/affinda/{p-436673bb.entry.js.map → p-d6b8c3b4.entry.js.map} +0 -0
- /package/dist/affinda/{p-65dd559a.entry.js.map → p-d9913985.entry.js.map} +0 -0
- /package/dist/affinda/{p-9480f00d.entry.js.map → p-dd0cd57e.entry.js.map} +0 -0
- /package/dist/affinda/{p-a25d3257.entry.js.map → p-dd4c8640.entry.js.map} +0 -0
- /package/dist/affinda/{p-43f40921.entry.js.map → p-df6c7170.entry.js.map} +0 -0
- /package/dist/affinda/{p-eeda78ea.entry.js.map → p-e90a3892.entry.js.map} +0 -0
- /package/dist/affinda/{p-a1e80460.entry.js.map → p-ec042bc4.entry.js.map} +0 -0
- /package/dist/affinda/{p-a02d6192.entry.js.map → p-f7fc76d2.entry.js.map} +0 -0
- /package/dist/affinda/{p-9ce0adc2.entry.js.map → p-f9ecbde8.entry.js.map} +0 -0
- /package/dist/affinda/{p-61a6b43d.entry.js.map → p-fff252df.entry.js.map} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"af-accordion-item.entry.esm.js","sources":["src/components/af-accordion-item/af-accordion-item.css?tag=af-accordion-item&encapsulation=shadow","src/components/af-accordion-item/af-accordion-item.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n.accordion-item {\n width: 100%;\n}\n\n/* Trigger button - clickable header */\n.trigger {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding: 16px 0;\n background: transparent;\n border: none;\n border-bottom: 1px solid var(--af-background-border-subtle, #e8eeed);\n cursor: pointer;\n font: inherit;\n text-align: left;\n color: var(--af-typography-body-dark, #14343b);\n transition: background-color 0.
|
|
1
|
+
{"version":3,"file":"af-accordion-item.entry.esm.js","sources":["src/components/af-accordion-item/af-accordion-item.css?tag=af-accordion-item&encapsulation=shadow","src/components/af-accordion-item/af-accordion-item.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n.accordion-item {\n width: 100%;\n}\n\n/* Trigger button - clickable header */\n.trigger {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding: 16px 0;\n background: transparent;\n border: none;\n border-bottom: 1px solid var(--af-background-border-subtle, #e8eeed);\n cursor: pointer;\n font: inherit;\n text-align: left;\n color: var(--af-typography-body-dark, #14343b);\n transition: background-color var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));\n}\n\n.trigger:hover:not(:disabled) {\n background-color: var(--af-background-base-hover, rgba(20, 52, 59, 0.02));\n}\n\n.trigger:focus-visible {\n outline: 2px solid var(--af-background-border-active, #8a7049);\n outline-offset: -2px;\n}\n\n.trigger:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n.trigger-content {\n flex: 1;\n min-width: 0;\n}\n\n/* Chevron indicator */\n.chevron {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n flex-shrink: 0;\n color: var(--af-typography-body-dark, #14343b);\n transition: transform var(--motion-duration-slow, 300ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));\n}\n\n.chevron.is-open {\n transform: rotate(180deg);\n}\n\n/* Content wrapper - handles animation */\n.content-wrapper {\n overflow: hidden;\n transition: max-height var(--motion-duration-slow, 300ms) var(--motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1));\n}\n\n@media (prefers-reduced-motion: reduce) {\n .trigger,\n .chevron,\n .content-wrapper {\n transition-duration: 0.01ms;\n }\n}\n\n.content {\n padding: 0;\n}\n\n/* Disabled state */\n:host(.is-disabled) .trigger {\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n:host(.is-disabled) .trigger:hover {\n background-color: transparent;\n}\n\n/* Open state styling */\n:host(.is-open) .trigger {\n border-bottom-color: transparent;\n}\n\n","import { Component, h, Prop, Host, Event, EventEmitter, Element, State, Watch, Method } from '@stencil/core';\n\n/**\n * A single collapsible accordion item with header and content.\n * Can be used standalone or within an af-accordion container.\n *\n * @slot trigger - The clickable header content\n * @slot - The collapsible content (default slot)\n */\n@Component({\n tag: 'af-accordion-item',\n styleUrl: 'af-accordion-item.css',\n shadow: true,\n})\nexport class AfAccordionItem {\n @Element() el!: HTMLElement;\n\n /**\n * Unique identifier for this accordion item.\n * Used by parent af-accordion to track open state.\n */\n @Prop({ reflect: true }) itemId!: string;\n\n /**\n * Whether this item is currently expanded\n */\n @Prop({ reflect: true, mutable: true }) open: boolean = false;\n\n /**\n * Whether this item is disabled (cannot be toggled)\n */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /**\n * Emitted when the accordion item is toggled\n */\n @Event({ eventName: 'af-accordion-toggle' }) accordionToggle!: EventEmitter<{ itemId: string; open: boolean }>;\n\n @State() contentHeight: number = 0;\n\n private contentRef?: HTMLElement;\n private resizeObserver?: ResizeObserver;\n\n @Watch('open')\n handleOpenChange(newValue: boolean) {\n if (newValue) {\n this.measureContent();\n }\n }\n\n componentDidLoad() {\n if (this.open) {\n this.measureContent();\n }\n\n this.resizeObserver = new ResizeObserver(() => {\n if (this.open && this.contentRef) {\n this.contentHeight = this.contentRef.scrollHeight;\n }\n });\n\n if (this.contentRef) {\n this.resizeObserver.observe(this.contentRef);\n }\n }\n\n disconnectedCallback() {\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n }\n\n /**\n * Programmatically toggle the accordion item\n */\n @Method()\n async toggle() {\n if (!this.disabled) {\n this.open = !this.open;\n this.accordionToggle.emit({ itemId: this.itemId, open: this.open });\n }\n }\n\n private measureContent() {\n requestAnimationFrame(() => {\n if (this.contentRef) {\n this.contentHeight = this.contentRef.scrollHeight;\n }\n });\n }\n\n private handleTriggerClick = () => {\n if (!this.disabled) {\n this.toggle();\n }\n };\n\n render() {\n const contentStyle = {\n maxHeight: this.open ? `${this.contentHeight}px` : '0px'\n };\n\n return (\n <Host class={{ 'is-open': this.open, 'is-disabled': this.disabled }}>\n <div class=\"accordion-item\">\n <button\n class=\"trigger\"\n onClick={this.handleTriggerClick}\n aria-expanded={this.open ? 'true' : 'false'}\n aria-controls={`content-${this.itemId}`}\n disabled={this.disabled}\n type=\"button\"\n >\n <div class=\"trigger-content\">\n <slot name=\"trigger\"></slot>\n </div>\n <div class={{ 'chevron': true, 'is-open': this.open }}>\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\">\n <path d=\"M6 9l6 6 6-6\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n </button>\n <div\n id={`content-${this.itemId}`}\n class=\"content-wrapper\"\n style={contentStyle}\n aria-hidden={!this.open ? 'true' : 'false'}\n >\n <div class=\"content\" ref={(el) => (this.contentRef = el)}>\n <slot></slot>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"af-button.entry.esm.js","sources":["src/components/af-button/af-button.css?tag=af-button&encapsulation=shadow","src/components/af-button/af-button.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\n/* Set color on host for slotted content (icons) inheritance */\n:host([variant=\"primary\"]) {\n color: var(--af-button-primary-icon, var(--colour-brand-inkwell, #14343B));\n}\n\n:host([variant=\"secondary\"]) {\n color: var(--af-button-secondary-icon, var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343B)));\n}\n\n:host([variant=\"ghost\"]) {\n color: var(--af-button-ghost-icon, var(--colour-brand-inkwell, #14343B));\n}\n\n/* Full-width mode - when host is display: block */\n:host([full-width]),\n:host(.full-width) {\n display: block;\n width: 100%;\n}\n\n:host([full-width]) .button,\n:host(.full-width) .button {\n width: 100%;\n}\n\n.button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0;\n border-radius: 9999px;\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: 500;\n text-decoration: none;\n cursor: pointer;\n transition: all 0.2s ease;\n border: 1px solid transparent;\n box-sizing: border-box;\n white-space: nowrap;\n /* Allow width to be controlled from outside via CSS custom property */\n width: var(--af-button-width, auto);\n}\n\n/* Size variants */\n.size-default {\n padding: 12px 24px;\n font-size: 17px;\n line-height: 20px;\n}\n\n.size-thin {\n padding: 8px 16px;\n font-size: 14px;\n line-height: 16px;\n}\n\n/* Icon slots - only show when they have slotted content */\n.icon-left,\n.icon-right {\n display: none;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.icon-left.has-content,\n.icon-right.has-content {\n display: flex;\n}\n\n.size-default .icon-left,\n.size-default .icon-right {\n width: 24px;\n height: 24px;\n}\n\n.size-thin .icon-left,\n.size-thin .icon-right {\n width: 20px;\n height: 20px;\n}\n\n/* Add spacing between icon and label only when icon is present */\n.size-default .icon-left.has-content {\n margin-right: 12px;\n}\n\n.size-default .icon-right.has-content {\n margin-left: 12px;\n}\n\n.size-thin .icon-left.has-content {\n margin-right: 8px;\n}\n\n.size-thin .icon-right.has-content {\n margin-left: 8px;\n}\n\n/* Label styling */\n.label {\n flex: 0 1 auto;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.size-default .label {\n height: 24px;\n}\n\n.size-thin .label {\n height: 20px;\n}\n\n/* ==========================================================================\n Primary Button\n Filled background with ice color, inkwell text\n ========================================================================== */\n\n.variant-primary {\n background: var(--af-button-primary-bg, var(--colour-brand-ice, #a6fffb));\n border-color: var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343b));\n color: var(--af-button-primary-text, var(--colour-brand-inkwell, #14343b));\n}\n\n.variant-primary .icon-left,\n.variant-primary .icon-right {\n color: var(--af-button-primary-icon, var(--colour-brand-inkwell, #14343b));\n}\n\n.variant-primary:hover:not(.disabled) {\n background: var(--af-button-primary-bg-hover, #95E6E2);\n border-color: var(--af-button-primary-stroke, #14343B);\n}\n\n.variant-primary:focus:not(.disabled),\n.variant-primary:focus-visible:not(.disabled) {\n background: var(--af-button-primary-bg, #A6FFFB);\n border-color: var(--af-button-primary-stroke, #14343B);\n box-shadow: 0 0 0 4px var(--af-background-base, #FFF), 0 0 0 5px var(--af-button-primary-stroke, #14343B);\n outline: none;\n}\n\n.variant-primary:active:not(.disabled) {\n background: var(--af-button-primary-bg-hover, #95E6E2);\n}\n\n/* ==========================================================================\n Secondary Button\n Transparent background with visible border\n ========================================================================== */\n\n.variant-secondary {\n background: var(--af-button-secondary-bg, transparent);\n border-color: var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b));\n color: var(--af-button-secondary-text, var(--colour-brand-inkwell, #14343b));\n}\n\n.variant-secondary .icon-left,\n.variant-secondary .icon-right {\n color: var(--af-button-secondary-icon, var(--colour-brand-inkwell, #14343b));\n}\n\n.variant-secondary:hover:not(.disabled) {\n background: var(--af-button-secondary-bg-hover, rgba(128, 128, 128, 0.1));\n border-color: var(--af-button-secondary-stroke, currentColor);\n}\n\n.variant-secondary:focus:not(.disabled),\n.variant-secondary:focus-visible:not(.disabled) {\n background: var(--af-background-base, #FFF);\n border-color: var(--af-button-secondary-stroke, currentColor);\n box-shadow: 0 0 0 4px var(--af-background-base, #FFF), 0 0 0 5px var(--af-button-secondary-stroke, currentColor);\n outline: none;\n}\n\n.variant-secondary:active:not(.disabled) {\n background: var(--af-button-secondary-bg-hover, rgba(128, 128, 128, 0.1));\n}\n\n/* ==========================================================================\n Tertiary Button\n Text-only link style with underline, no border or background\n ========================================================================== */\n\n.variant-ghost {\n background: transparent;\n border-color: transparent;\n border-radius: 0;\n color: var(--af-button-ghost-text, var(--colour-brand-inkwell, #14343b));\n padding-left: 0;\n padding-right: 0;\n}\n\n.variant-ghost .label {\n border-bottom: 2px solid var(--af-button-ghost-stroke, var(--colour-brand-soft-clay, #B09670));\n}\n\n.variant-ghost .icon-left,\n.variant-ghost .icon-right {\n color: var(--af-button-ghost-icon, var(--colour-brand-inkwell, #14343b));\n}\n\n.variant-ghost:hover:not(.disabled) {\n opacity: 0.8;\n}\n\n.variant-ghost:focus:not(.disabled),\n.variant-ghost:focus-visible:not(.disabled) {\n outline: none;\n}\n\n.variant-ghost:focus-visible:not(.disabled) .label {\n box-shadow: 0 4px 0 0 var(--af-button-ghost-stroke, var(--colour-brand-soft-clay, #B09670));\n}\n\n.variant-ghost:active:not(.disabled) {\n opacity: 0.6;\n}\n\n/* ==========================================================================\n Disabled states\n ========================================================================== */\n\n.disabled {\n cursor: not-allowed;\n pointer-events: none;\n}\n\n.variant-primary.disabled {\n border: 1px solid var(--af-button-primary-stroke, #14343B);\n background: var(--af-button-primary-bg, #A6FFFB);\n opacity: 0.6;\n}\n\n.variant-secondary.disabled {\n border: 1px solid var(--af-button-secondary-stroke, currentColor);\n opacity: 0.6;\n}\n\n.variant-ghost.disabled {\n opacity: 0.6;\n}\n\n/* ==========================================================================\n Reset button element styles\n ========================================================================== */\n\nbutton.button {\n font: inherit;\n cursor: pointer;\n}\n\nbutton.button.variant-primary {\n background: var(--af-button-primary-bg, var(--colour-brand-ice, #a6fffb));\n border: 1px solid var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343b));\n}\n\nbutton.button.variant-secondary {\n background: var(--af-button-secondary-bg, transparent);\n border: 1px solid var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b));\n}\n\nbutton.button.variant-ghost {\n background: transparent;\n border: none;\n}\n\n/* ==========================================================================\n Reset anchor element styles (when using href prop)\n ========================================================================== */\n\na.button {\n text-decoration: none;\n color: inherit;\n}\n\na.button.variant-primary {\n background: var(--af-button-primary-bg, var(--colour-brand-ice, #a6fffb));\n border: 1px solid var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343b));\n}\n\na.button.variant-secondary {\n background: var(--af-button-secondary-bg, transparent);\n border: 1px solid var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b));\n}\n\na.button.variant-ghost {\n background: transparent;\n border: none;\n}\n","import { Component, h, Prop, Host, State } from '@stencil/core';\n\n/**\n * Button component that inherits colors from theme context.\n * Colors are determined by the parent theme (af-section, af-card, etc.)\n * via CSS custom properties.\n * \n * @slot - Button label text\n * @slot icon-left - Icon displayed before the label\n * @slot icon-right - Icon displayed after the label\n */\n@Component({\n tag: 'af-button',\n styleUrl: 'af-button.css',\n shadow: true\n})\nexport class AfButton {\n /**\n * The visual variant of the button.\n * - `primary` - Main CTA with filled background (use sparingly, 1-2 per view)\n * - `secondary` - Supporting action with outlined style\n * - `ghost` - Link-style with themed underline on the label; commonly paired\n * with a right-pointing icon. Matches Webflow's \"button ghost\" variant.\n */\n @Prop({ reflect: true }) variant: 'primary' | 'secondary' | 'ghost' = 'primary';\n\n /**\n * The size of the button.\n * - `default` - Standard size for primary CTAs (12/24px padding)\n * - `thin` - Compact inline/secondary size (8/16px padding)\n */\n @Prop() size: 'default' | 'thin' = 'default';\n\n /**\n * Whether the button is disabled\n */\n @Prop() disabled: boolean = false;\n\n /**\n * Button type (when not using href)\n */\n @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n /**\n * Optional href to render as a link instead of a button\n */\n @Prop() href?: string;\n\n @State() hasIconLeft: boolean = false;\n @State() hasIconRight: boolean = false;\n\n private handleSlotChange = (slotName: 'icon-left' | 'icon-right') => (event: Event) => {\n const slot = event.target as HTMLSlotElement;\n const hasContent = slot.assignedNodes().length > 0;\n if (slotName === 'icon-left') {\n this.hasIconLeft = hasContent;\n } else {\n this.hasIconRight = hasContent;\n }\n };\n\n render() {\n const classes = {\n 'button': true,\n [`variant-${this.variant}`]: true,\n [`size-${this.size}`]: true,\n 'disabled': this.disabled\n };\n\n const content = [\n <span class={{ 'icon-left': true, 'has-content': this.hasIconLeft }}>\n <slot name=\"icon-left\" onSlotchange={this.handleSlotChange('icon-left')}></slot>\n </span>,\n <span class=\"label\">\n <slot></slot>\n </span>,\n <span class={{ 'icon-right': true, 'has-content': this.hasIconRight }}>\n <slot name=\"icon-right\" onSlotchange={this.handleSlotChange('icon-right')}></slot>\n </span>\n ];\n\n // Render as anchor if href is provided (and not disabled)\n if (this.href && !this.disabled) {\n return (\n <Host>\n <a href={this.href} class={classes}>\n {content}\n </a>\n </Host>\n );\n }\n\n return (\n <Host>\n <button type={this.type} disabled={this.disabled} class={classes}>\n {content}\n </button>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,WAAW,GAAG,s5KAAs5K;;MCgB75K,QAAQ,GAAA,MAAA;AALrB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;;;;;AAMG;AACsB,QAAA,IAAO,CAAA,OAAA,GAAsC,SAAS;AAE/E;;;;AAIG;AACK,QAAA,IAAI,CAAA,IAAA,GAAuB,SAAS;AAE5C;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAEjC;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAkC,QAAQ;AAO7C,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;AAC5B,QAAA,IAAY,CAAA,YAAA,GAAY,KAAK;QAE9B,IAAgB,CAAA,gBAAA,GAAG,CAAC,QAAoC,KAAK,CAAC,KAAY,KAAI;AACpF,YAAA,MAAM,IAAI,GAAG,KAAK,CAAC,MAAyB;YAC5C,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,MAAM,GAAG,CAAC;AAClD,YAAA,IAAI,QAAQ,KAAK,WAAW,EAAE;AAC5B,gBAAA,IAAI,CAAC,WAAW,GAAG,UAAU;;iBACxB;AACL,gBAAA,IAAI,CAAC,YAAY,GAAG,UAAU;;AAElC,SAAC;AAyCF;IAvCC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,QAAQ,EAAE,IAAI;AACd,YAAA,CAAC,WAAW,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;AACjC,YAAA,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;YAC3B,UAAU,EAAE,IAAI,CAAC;SAClB;AAED,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,CAAC,WAAW,EAAE,EAAA,EACjE,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,WAAW,EAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC,GAAS,CAC3E;AACP,YAAA,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,OAAO,EAAA,EACjB,CAAA,CAAA,MAAA,EAAA,IAAA,CAAa,CACR;AACP,YAAA,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,CAAC,YAAY,EAAE,EAAA,EACnE,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,YAAY,EAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,GAAS;SAErF;;QAGD,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAC/B,QACE,EAAC,IAAI,EAAA,IAAA,EACH,CAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,OAAO,EAC/B,EAAA,OAAO,CACN,CACC;;AAIX,QAAA,QACE,EAAC,IAAI,EAAA,IAAA,EACH,CAAQ,CAAA,QAAA,EAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAA,EAC7D,OAAO,CACD,CACJ;;;;;;;"}
|
|
1
|
+
{"version":3,"file":"af-button.entry.esm.js","sources":["src/components/af-button/af-button.css?tag=af-button&encapsulation=shadow","src/components/af-button/af-button.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\n/* Set color on host for slotted content (icons) inheritance */\n:host([variant=\"primary\"]) {\n color: var(--af-button-primary-icon, var(--colour-brand-inkwell, #14343B));\n}\n\n:host([variant=\"secondary\"]) {\n color: var(--af-button-secondary-icon, var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343B)));\n}\n\n:host([variant=\"ghost\"]) {\n color: var(--af-button-ghost-icon, var(--colour-brand-inkwell, #14343B));\n}\n\n/* Full-width mode - when host is display: block */\n:host([full-width]),\n:host(.full-width) {\n display: block;\n width: 100%;\n}\n\n:host([full-width]) .button,\n:host(.full-width) .button {\n width: 100%;\n}\n\n.button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0;\n border-radius: 9999px;\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: 500;\n text-decoration: none;\n cursor: pointer;\n /* Motion — tokens fall back to the prior 0.2s ease so nothing drifts. */\n transition:\n background-color var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),\n border-color var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),\n color var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),\n box-shadow var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),\n transform var(--motion-duration-fast, 150ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));\n border: 1px solid transparent;\n box-sizing: border-box;\n white-space: nowrap;\n /* Allow width to be controlled from outside via CSS custom property */\n width: var(--af-button-width, auto);\n will-change: transform;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .button {\n transition-duration: 0.01ms;\n }\n}\n\n/* Size variants */\n.size-default {\n padding: 12px 24px;\n font-size: 17px;\n line-height: 20px;\n}\n\n.size-thin {\n padding: 8px 16px;\n font-size: 14px;\n line-height: 16px;\n}\n\n/* Icon slots - only show when they have slotted content */\n.icon-left,\n.icon-right {\n display: none;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.icon-left.has-content,\n.icon-right.has-content {\n display: flex;\n}\n\n.size-default .icon-left,\n.size-default .icon-right {\n width: 24px;\n height: 24px;\n}\n\n.size-thin .icon-left,\n.size-thin .icon-right {\n width: 20px;\n height: 20px;\n}\n\n/* Add spacing between icon and label only when icon is present */\n.size-default .icon-left.has-content {\n margin-right: 12px;\n}\n\n.size-default .icon-right.has-content {\n margin-left: 12px;\n}\n\n.size-thin .icon-left.has-content {\n margin-right: 8px;\n}\n\n.size-thin .icon-right.has-content {\n margin-left: 8px;\n}\n\n/* Label styling */\n.label {\n flex: 0 1 auto;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.size-default .label {\n height: 24px;\n}\n\n.size-thin .label {\n height: 20px;\n}\n\n/* ==========================================================================\n Primary Button\n Filled background with ice color, inkwell text\n ========================================================================== */\n\n.variant-primary {\n background: var(--af-button-primary-bg, var(--colour-brand-ice, #a6fffb));\n border-color: var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343b));\n color: var(--af-button-primary-text, var(--colour-brand-inkwell, #14343b));\n}\n\n.variant-primary .icon-left,\n.variant-primary .icon-right {\n color: var(--af-button-primary-icon, var(--colour-brand-inkwell, #14343b));\n}\n\n.variant-primary:hover:not(.disabled) {\n background: var(--af-button-primary-bg-hover, #95E6E2);\n border-color: var(--af-button-primary-stroke, #14343B);\n}\n\n.variant-primary:focus:not(.disabled),\n.variant-primary:focus-visible:not(.disabled) {\n background: var(--af-button-primary-bg, #A6FFFB);\n border-color: var(--af-button-primary-stroke, #14343B);\n box-shadow: 0 0 0 4px var(--af-background-base, #FFF), 0 0 0 5px var(--af-button-primary-stroke, #14343B);\n outline: none;\n}\n\n.variant-primary:active:not(.disabled) {\n background: var(--af-button-primary-bg-hover, #95E6E2);\n transform: translateY(1px);\n}\n\n/* ==========================================================================\n Secondary Button\n Transparent background with visible border\n ========================================================================== */\n\n.variant-secondary {\n background: var(--af-button-secondary-bg, transparent);\n border-color: var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b));\n color: var(--af-button-secondary-text, var(--colour-brand-inkwell, #14343b));\n}\n\n.variant-secondary .icon-left,\n.variant-secondary .icon-right {\n color: var(--af-button-secondary-icon, var(--colour-brand-inkwell, #14343b));\n}\n\n.variant-secondary:hover:not(.disabled) {\n background: var(--af-button-secondary-bg-hover, rgba(128, 128, 128, 0.1));\n border-color: var(--af-button-secondary-stroke, currentColor);\n}\n\n.variant-secondary:focus:not(.disabled),\n.variant-secondary:focus-visible:not(.disabled) {\n background: var(--af-background-base, #FFF);\n border-color: var(--af-button-secondary-stroke, currentColor);\n box-shadow: 0 0 0 4px var(--af-background-base, #FFF), 0 0 0 5px var(--af-button-secondary-stroke, currentColor);\n outline: none;\n}\n\n.variant-secondary:active:not(.disabled) {\n background: var(--af-button-secondary-bg-hover, rgba(128, 128, 128, 0.1));\n transform: translateY(1px);\n}\n\n/* ==========================================================================\n Tertiary Button\n Text-only link style with underline, no border or background\n ========================================================================== */\n\n.variant-ghost {\n background: transparent;\n border-color: transparent;\n border-radius: 0;\n color: var(--af-button-ghost-text, var(--colour-brand-inkwell, #14343b));\n padding-left: 0;\n padding-right: 0;\n}\n\n.variant-ghost .label {\n border-bottom: 2px solid var(--af-button-ghost-stroke, var(--colour-brand-soft-clay, #B09670));\n}\n\n.variant-ghost .icon-left,\n.variant-ghost .icon-right {\n color: var(--af-button-ghost-icon, var(--colour-brand-inkwell, #14343b));\n}\n\n.variant-ghost:hover:not(.disabled) {\n opacity: 0.8;\n}\n\n.variant-ghost:focus:not(.disabled),\n.variant-ghost:focus-visible:not(.disabled) {\n outline: none;\n}\n\n.variant-ghost:focus-visible:not(.disabled) .label {\n box-shadow: 0 4px 0 0 var(--af-button-ghost-stroke, var(--colour-brand-soft-clay, #B09670));\n}\n\n.variant-ghost:active:not(.disabled) {\n opacity: 0.6;\n}\n\n/* ==========================================================================\n Disabled states\n ========================================================================== */\n\n.disabled {\n cursor: not-allowed;\n pointer-events: none;\n}\n\n.variant-primary.disabled {\n border: 1px solid var(--af-button-primary-stroke, #14343B);\n background: var(--af-button-primary-bg, #A6FFFB);\n opacity: 0.6;\n}\n\n.variant-secondary.disabled {\n border: 1px solid var(--af-button-secondary-stroke, currentColor);\n opacity: 0.6;\n}\n\n.variant-ghost.disabled {\n opacity: 0.6;\n}\n\n/* ==========================================================================\n Reset button element styles\n ========================================================================== */\n\nbutton.button {\n font: inherit;\n cursor: pointer;\n}\n\nbutton.button.variant-primary {\n background: var(--af-button-primary-bg, var(--colour-brand-ice, #a6fffb));\n border: 1px solid var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343b));\n}\n\nbutton.button.variant-secondary {\n background: var(--af-button-secondary-bg, transparent);\n border: 1px solid var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b));\n}\n\nbutton.button.variant-ghost {\n background: transparent;\n border: none;\n}\n\n/* ==========================================================================\n Reset anchor element styles (when using href prop)\n ========================================================================== */\n\na.button {\n text-decoration: none;\n color: inherit;\n}\n\na.button.variant-primary {\n background: var(--af-button-primary-bg, var(--colour-brand-ice, #a6fffb));\n border: 1px solid var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343b));\n}\n\na.button.variant-secondary {\n background: var(--af-button-secondary-bg, transparent);\n border: 1px solid var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b));\n}\n\na.button.variant-ghost {\n background: transparent;\n border: none;\n}\n","import { Component, h, Prop, Host, State } from '@stencil/core';\n\n/**\n * Button component that inherits colors from theme context.\n * Colors are determined by the parent theme (af-section, af-card, etc.)\n * via CSS custom properties.\n * \n * @slot - Button label text\n * @slot icon-left - Icon displayed before the label\n * @slot icon-right - Icon displayed after the label\n */\n@Component({\n tag: 'af-button',\n styleUrl: 'af-button.css',\n shadow: true\n})\nexport class AfButton {\n /**\n * The visual variant of the button.\n * - `primary` - Main CTA with filled background (use sparingly, 1-2 per view)\n * - `secondary` - Supporting action with outlined style\n * - `ghost` - Link-style with themed underline on the label; commonly paired\n * with a right-pointing icon. Matches Webflow's \"button ghost\" variant.\n */\n @Prop({ reflect: true }) variant: 'primary' | 'secondary' | 'ghost' = 'primary';\n\n /**\n * The size of the button.\n * - `default` - Standard size for primary CTAs (12/24px padding)\n * - `thin` - Compact inline/secondary size (8/16px padding)\n */\n @Prop() size: 'default' | 'thin' = 'default';\n\n /**\n * Whether the button is disabled\n */\n @Prop() disabled: boolean = false;\n\n /**\n * Button type (when not using href)\n */\n @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n /**\n * Optional href to render as a link instead of a button\n */\n @Prop() href?: string;\n\n @State() hasIconLeft: boolean = false;\n @State() hasIconRight: boolean = false;\n\n private handleSlotChange = (slotName: 'icon-left' | 'icon-right') => (event: Event) => {\n const slot = event.target as HTMLSlotElement;\n const hasContent = slot.assignedNodes().length > 0;\n if (slotName === 'icon-left') {\n this.hasIconLeft = hasContent;\n } else {\n this.hasIconRight = hasContent;\n }\n };\n\n render() {\n const classes = {\n 'button': true,\n [`variant-${this.variant}`]: true,\n [`size-${this.size}`]: true,\n 'disabled': this.disabled\n };\n\n const content = [\n <span class={{ 'icon-left': true, 'has-content': this.hasIconLeft }}>\n <slot name=\"icon-left\" onSlotchange={this.handleSlotChange('icon-left')}></slot>\n </span>,\n <span class=\"label\">\n <slot></slot>\n </span>,\n <span class={{ 'icon-right': true, 'has-content': this.hasIconRight }}>\n <slot name=\"icon-right\" onSlotchange={this.handleSlotChange('icon-right')}></slot>\n </span>\n ];\n\n // Render as anchor if href is provided (and not disabled)\n if (this.href && !this.disabled) {\n return (\n <Host>\n <a href={this.href} class={classes}>\n {content}\n </a>\n </Host>\n );\n }\n\n return (\n <Host>\n <button type={this.type} disabled={this.disabled} class={classes}>\n {content}\n </button>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,WAAW,GAAG,0kMAA0kM;;MCgBjlM,QAAQ,GAAA,MAAA;AALrB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;;;;;AAMG;AACsB,QAAA,IAAO,CAAA,OAAA,GAAsC,SAAS;AAE/E;;;;AAIG;AACK,QAAA,IAAI,CAAA,IAAA,GAAuB,SAAS;AAE5C;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAEjC;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAkC,QAAQ;AAO7C,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;AAC5B,QAAA,IAAY,CAAA,YAAA,GAAY,KAAK;QAE9B,IAAgB,CAAA,gBAAA,GAAG,CAAC,QAAoC,KAAK,CAAC,KAAY,KAAI;AACpF,YAAA,MAAM,IAAI,GAAG,KAAK,CAAC,MAAyB;YAC5C,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,MAAM,GAAG,CAAC;AAClD,YAAA,IAAI,QAAQ,KAAK,WAAW,EAAE;AAC5B,gBAAA,IAAI,CAAC,WAAW,GAAG,UAAU;;iBACxB;AACL,gBAAA,IAAI,CAAC,YAAY,GAAG,UAAU;;AAElC,SAAC;AAyCF;IAvCC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,QAAQ,EAAE,IAAI;AACd,YAAA,CAAC,WAAW,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;AACjC,YAAA,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;YAC3B,UAAU,EAAE,IAAI,CAAC;SAClB;AAED,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,CAAC,WAAW,EAAE,EAAA,EACjE,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,WAAW,EAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC,GAAS,CAC3E;AACP,YAAA,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,OAAO,EAAA,EACjB,CAAA,CAAA,MAAA,EAAA,IAAA,CAAa,CACR;AACP,YAAA,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,CAAC,YAAY,EAAE,EAAA,EACnE,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,YAAY,EAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,GAAS;SAErF;;QAGD,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAC/B,QACE,EAAC,IAAI,EAAA,IAAA,EACH,CAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,OAAO,EAC/B,EAAA,OAAO,CACN,CACC;;AAIX,QAAA,QACE,EAAC,IAAI,EAAA,IAAA,EACH,CAAQ,CAAA,QAAA,EAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAA,EAC7D,OAAO,CACD,CACJ;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"af-card.entry.esm.js","sources":["src/components/af-card/af-card.css?tag=af-card&encapsulation=scoped","src/components/af-card/af-card.tsx"],"sourcesContent":["/* Theme CSS custom properties follow the global token structure from @affinda/tokens */\n\n:host {\n display: block;\n width: 100%;\n}\n\n/* ==========================================================================\n Stretch Mode\n \n When stretch attribute is present, the card fills its container height\n and uses flexbox to distribute space between children. This enables\n equal-height cards in grid/flex layouts.\n ========================================================================== */\n\n:host([stretch]) {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n:host([stretch]) .card {\n flex: 1 1 auto;\n}\n\n:host([stretch]) .card__content {\n flex: 1 1 auto;\n}\n\n/* ==========================================================================\n Base Card Styles\n ========================================================================== */\n\n.card {\n /* radius-lg (20px) is the Affinda card corner — replaces the bespoke\n * `--border-radius-card-level-1` that previously shimmed in at 32px.\n * Consumers can still override by setting `--af-card-radius` on the host. */\n border-radius: var(--af-card-radius, var(--radius-lg, 20px));\n overflow: hidden;\n position: relative;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n}\n\n/* ==========================================================================\n Theme Variants\n \n Background colors from Figma tokens:\n - white: #ffffff (Colour/Brand/White)\n - white-ivory: #fff9ee (Colour/Brand/Ivory-Paper)\n - inkwell: #14343b (Colour/Brand/Inkwell)\n - mist-green: #c6d5d1 (Colour/Brand/Mist-Green)\n - soft-clay: #c0ab8d (Colour/Softclay/400)\n ========================================================================== */\n\n/* WHITE THEME */\n.card.theme-white {\n background-color: var(--colour-brand-white, #ffffff);\n \n /* Typography */\n --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n --af-background-level-1: var(--colour-mistgreen-200, #e8eeed);\n}\n\n/* WHITE-IVORY THEME */\n.card.theme-white-ivory {\n background-color: var(--colour-brand-ivory-paper, #fff9ee);\n \n /* Typography */\n --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n --af-background-level-1: var(--colour-ivory-200, #ffefcc);\n}\n\n/* INKWELL THEME (Dark) */\n.card.theme-inkwell {\n background-color: var(--colour-brand-inkwell, #14343b);\n \n /* Typography - light colors on dark background */\n --af-typography-heading-primary: var(--colour-brand-mist-green, #c6d5d1);\n --af-typography-body-default: var(--colour-inkwell-100, #d0d6d8);\n --af-background-level-1: var(--colour-inkwell-450, #203e45);\n \n /* Button variants for dark theme */\n --af-button-secondary-text: var(--colour-brand-white, #ffffff);\n --af-button-secondary-stroke: var(--colour-brand-white, #ffffff);\n --af-button-ghost-text: var(--colour-brand-white, #ffffff);\n --af-button-ghost-icon: var(--colour-brand-white, #ffffff);\n \n /* Form control tokens (checkbox, radio, switch) */\n --af-form-control-bg: var(--colour-inkwell-450, #203e45);\n --af-form-control-bg-checked: var(--colour-brand-mist-green, #c6d5d1);\n --af-form-control-bg-disabled: var(--colour-inkwell-400, #2b484f);\n --af-form-control-bg-checked-disabled: var(--colour-mistgreen-700, #9eaaa7);\n --af-form-control-stroke: var(--colour-inkwell-350, #60767b);\n --af-form-control-stroke-hover: var(--colour-brand-white, #ffffff);\n --af-form-control-stroke-disabled: var(--colour-inkwell-400, #2b484f);\n --af-form-control-icon: var(--colour-brand-inkwell, #14343b);\n --af-form-control-label: var(--colour-brand-white, #ffffff);\n}\n\n/* MIST-GREEN THEME */\n.card.theme-mist-green {\n background-color: var(--colour-brand-mist-green, #c6d5d1);\n \n /* Typography */\n --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n --af-background-level-1: var(--colour-mistgreen-300, #dde6e3);\n}\n\n/* SOFT-CLAY THEME */\n.card.theme-soft-clay {\n background-color: var(--colour-softclay-400, #c0ab8d);\n \n /* Typography */\n --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n --af-typography-heading-secondary: var(--colour-brand-ivory-paper, #fff9ee);\n --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n --af-background-level-1: var(--colour-softclay-500, #b09670);\n}\n\n/* ==========================================================================\n Card Content\n ========================================================================== */\n\n.card__content {\n position: relative;\n padding: var(--af-card-padding, 40px);\n display: flex;\n flex-direction: column;\n gap: var(--af-card-gap, 24px);\n flex: 1;\n box-sizing: border-box;\n z-index: 1;\n}\n\n/* Heading spacing within cards */\n.card__content ::slotted(af-heading) {\n margin-bottom: 0;\n}\n\n/* Text line-height within cards */\n.card__content ::slotted(af-text) {\n line-height: 1.44;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport type { Theme } from '../../types';\n\n/**\n * Card atom component - a themed container with consistent styling.\n * Provides theme context to children via CSS custom properties.\n * \n * This is a base building block used by molecule components like\n * af-feature-card and af-illustrated-card.\n */\n@Component({\n tag: 'af-card',\n styleUrl: 'af-card.css',\n shadow: false,\n scoped: true,\n})\nexport class AfCard {\n /**\n * Theme - sets background color and provides theme context to children.\n * Defaults to 'mist-green' if not specified.\n */\n @Prop() theme?: Theme = 'mist-green';\n\n /**\n * When true, the card stretches to fill its container height.\n * Use this when the card is in a flex/grid container and needs to\n * participate in equal-height layouts. The card's content will use\n * flexbox to distribute space between children.\n */\n @Prop({ reflect: true }) stretch: boolean = false;\n\n render() {\n const classes = {\n 'card': true,\n [`theme-${this.theme}`]: true\n };\n\n return (\n <Host>\n <div class={classes}>\n <div class=\"card__content\">\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,SAAS,GAAG,
|
|
1
|
+
{"version":3,"file":"af-card.entry.esm.js","sources":["src/components/af-card/af-card.css?tag=af-card&encapsulation=scoped","src/components/af-card/af-card.tsx"],"sourcesContent":["/* Theme CSS custom properties follow the global token structure from @affinda/tokens */\n\n:host {\n display: block;\n width: 100%;\n}\n\n/* ==========================================================================\n Stretch Mode\n \n When stretch attribute is present, the card fills its container height\n and uses flexbox to distribute space between children. This enables\n equal-height cards in grid/flex layouts.\n ========================================================================== */\n\n:host([stretch]) {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n:host([stretch]) .card {\n flex: 1 1 auto;\n}\n\n:host([stretch]) .card__content {\n flex: 1 1 auto;\n}\n\n/* ==========================================================================\n Base Card Styles\n ========================================================================== */\n\n.card {\n /* radius-lg (20px) is the Affinda card corner — replaces the bespoke\n * `--border-radius-card-level-1` that previously shimmed in at 32px.\n * Consumers can still override by setting `--af-card-radius` on the host. */\n border-radius: var(--af-card-radius, var(--radius-lg, 20px));\n overflow: hidden;\n position: relative;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n}\n\n/* ==========================================================================\n Interactive Mode\n Opt-in hover lift for cards that are the primary click target. Adds a\n subtle translateY and shadow on hover; the card is raised, not tinted,\n so the themed background stays intact.\n ========================================================================== */\n\n:host([interactive]) .card {\n transition:\n transform var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),\n box-shadow var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));\n will-change: transform;\n}\n\n:host([interactive]:hover) .card,\n:host([interactive]:focus-within) .card {\n transform: translateY(-2px);\n box-shadow: var(--shadow-lift, 0 12px 32px -8px rgba(20, 52, 59, 0.18), 0 4px 10px -4px rgba(20, 52, 59, 0.08));\n}\n\n@media (prefers-reduced-motion: reduce) {\n :host([interactive]) .card {\n transition-duration: 0.01ms;\n }\n :host([interactive]:hover) .card,\n :host([interactive]:focus-within) .card {\n transform: none;\n }\n}\n\n/* ==========================================================================\n Theme Variants\n \n Background colors from Figma tokens:\n - white: #ffffff (Colour/Brand/White)\n - white-ivory: #fff9ee (Colour/Brand/Ivory-Paper)\n - inkwell: #14343b (Colour/Brand/Inkwell)\n - mist-green: #c6d5d1 (Colour/Brand/Mist-Green)\n - soft-clay: #c0ab8d (Colour/Softclay/400)\n ========================================================================== */\n\n/* WHITE THEME */\n.card.theme-white {\n background-color: var(--colour-brand-white, #ffffff);\n \n /* Typography */\n --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n --af-background-level-1: var(--colour-mistgreen-200, #e8eeed);\n}\n\n/* WHITE-IVORY THEME */\n.card.theme-white-ivory {\n background-color: var(--colour-brand-ivory-paper, #fff9ee);\n \n /* Typography */\n --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n --af-background-level-1: var(--colour-ivory-200, #ffefcc);\n}\n\n/* INKWELL THEME (Dark) */\n.card.theme-inkwell {\n background-color: var(--colour-brand-inkwell, #14343b);\n \n /* Typography - light colors on dark background */\n --af-typography-heading-primary: var(--colour-brand-mist-green, #c6d5d1);\n --af-typography-body-default: var(--colour-inkwell-100, #d0d6d8);\n --af-background-level-1: var(--colour-inkwell-450, #203e45);\n \n /* Button variants for dark theme */\n --af-button-secondary-text: var(--colour-brand-white, #ffffff);\n --af-button-secondary-stroke: var(--colour-brand-white, #ffffff);\n --af-button-ghost-text: var(--colour-brand-white, #ffffff);\n --af-button-ghost-icon: var(--colour-brand-white, #ffffff);\n \n /* Form control tokens (checkbox, radio, switch) */\n --af-form-control-bg: var(--colour-inkwell-450, #203e45);\n --af-form-control-bg-checked: var(--colour-brand-mist-green, #c6d5d1);\n --af-form-control-bg-disabled: var(--colour-inkwell-400, #2b484f);\n --af-form-control-bg-checked-disabled: var(--colour-mistgreen-700, #9eaaa7);\n --af-form-control-stroke: var(--colour-inkwell-350, #60767b);\n --af-form-control-stroke-hover: var(--colour-brand-white, #ffffff);\n --af-form-control-stroke-disabled: var(--colour-inkwell-400, #2b484f);\n --af-form-control-icon: var(--colour-brand-inkwell, #14343b);\n --af-form-control-label: var(--colour-brand-white, #ffffff);\n}\n\n/* MIST-GREEN THEME */\n.card.theme-mist-green {\n background-color: var(--colour-brand-mist-green, #c6d5d1);\n \n /* Typography */\n --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n --af-background-level-1: var(--colour-mistgreen-300, #dde6e3);\n}\n\n/* SOFT-CLAY THEME */\n.card.theme-soft-clay {\n background-color: var(--colour-softclay-400, #c0ab8d);\n \n /* Typography */\n --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n --af-typography-heading-secondary: var(--colour-brand-ivory-paper, #fff9ee);\n --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n --af-background-level-1: var(--colour-softclay-500, #b09670);\n}\n\n/* ==========================================================================\n Card Content\n ========================================================================== */\n\n.card__content {\n position: relative;\n padding: var(--af-card-padding, 40px);\n display: flex;\n flex-direction: column;\n gap: var(--af-card-gap, 24px);\n flex: 1;\n box-sizing: border-box;\n z-index: 1;\n}\n\n/* Heading spacing within cards */\n.card__content ::slotted(af-heading) {\n margin-bottom: 0;\n}\n\n/* Text line-height within cards */\n.card__content ::slotted(af-text) {\n line-height: 1.44;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport type { Theme } from '../../types';\n\n/**\n * Card atom component - a themed container with consistent styling.\n * Provides theme context to children via CSS custom properties.\n * \n * This is a base building block used by molecule components like\n * af-feature-card and af-illustrated-card.\n */\n@Component({\n tag: 'af-card',\n styleUrl: 'af-card.css',\n shadow: false,\n scoped: true,\n})\nexport class AfCard {\n /**\n * Theme - sets background color and provides theme context to children.\n * Defaults to 'mist-green' if not specified.\n */\n @Prop() theme?: Theme = 'mist-green';\n\n /**\n * When true, the card stretches to fill its container height.\n * Use this when the card is in a flex/grid container and needs to\n * participate in equal-height layouts. The card's content will use\n * flexbox to distribute space between children.\n */\n @Prop({ reflect: true }) stretch: boolean = false;\n\n /**\n * When true, the card reacts to pointer hover with a subtle lift\n * (translateY + shadow). Use for cards that are themselves the primary\n * click target (e.g. wrapped in an `<a>` or using `onClick`). Purely\n * cosmetic — does not change focus or click behaviour. Honours\n * `prefers-reduced-motion: reduce`.\n */\n @Prop({ reflect: true }) interactive: boolean = false;\n\n render() {\n const classes = {\n 'card': true,\n [`theme-${this.theme}`]: true\n };\n\n return (\n <Host>\n <div class={classes}>\n <div class=\"card__content\">\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,SAAS,GAAG,4vHAA4vH;;MCgBjwH,MAAM,GAAA,MAAA;AANnB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAOE;;;AAGG;AACK,QAAA,IAAK,CAAA,KAAA,GAAW,YAAY;AAEpC;;;;;AAKG;AACsB,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AAEjD;;;;;;AAMG;AACsB,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;AAkBtD;IAhBC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,MAAM,EAAE,IAAI;AACZ,YAAA,CAAC,SAAS,IAAI,CAAC,KAAK,CAAE,CAAA,GAAG;SAC1B;QAED,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,OAAO,EAAA,EACjB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACxB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACF,CACD;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"af-feature-accordion.entry.esm.js","sources":["src/components/af-feature-accordion/af-feature-accordion.css?tag=af-feature-accordion&encapsulation=scoped","src/components/af-feature-accordion/af-feature-accordion.tsx"],"sourcesContent":["/*\n * af-feature-accordion\n * ---------------------------------------------------------------------------\n * Themable CSS custom properties (safe to override from consumers):\n *\n * --af-accent-progress Colour of the per-item timer/progress bar.\n * Defaults to --colour-softclay-600 (brand\n * soft-clay). Override to retheme the accent.\n * --af-feature-accordion-image-pad\n * Padding around the accompanying image\n * inside its rounded container. Defaults to\n * 40px — tune for tighter or looser rhythm.\n *\n * The component also inherits the following theme tokens from its parent\n * <af-section> (or any ancestor setting them):\n *\n * --af-typography-heading-primary heading colour\n * --af-typography-body-default body colour\n * --af-background-border-default rule/divider colour\n * --af-background-level-1 image-container background\n */\n\n:host {\n display: block;\n width: 100%;\n}\n\n.feature-accordion {\n /* Inherits theme from parent Section via CSS custom properties */\n padding: 0 24px;\n\n /* Internal custom properties that inherit from parent Section's theme */\n --_heading-color: var(--af-typography-heading-primary, var(--colour-brand-inkwell, #14343b));\n --_body-color: var(--af-typography-body-default, var(--colour-inkwell-400, #2b484f));\n --_border-color: var(--af-background-border-default, rgba(20, 52, 59, 0.12));\n}\n\n.feature-accordion__heading {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: 400;\n font-size: clamp(36px, 5vw, 52px);\n line-height: 1.05;\n letter-spacing: -0.025em;\n color: var(--_heading-color);\n margin: 0 0 56px 0;\n}\n\n.feature-accordion__content {\n display: flex;\n gap: 48px;\n}\n\n/* Accordion List */\n.feature-accordion__list {\n display: flex;\n flex-direction: column;\n flex: 1;\n min-width: 0;\n}\n\n/* Accordion Item */\n.accordion-item {\n border-bottom: 1px solid var(--_border-color);\n}\n\n.accordion-item:first-child {\n border-top: 1px solid var(--_border-color);\n}\n\n.accordion-item__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding: 24px 0;\n background: none;\n border: none;\n cursor: pointer;\n text-align: left;\n gap: 16px;\n}\n\n.accordion-item__header:hover .accordion-item__title {\n color: var(--_heading-color);\n}\n\n.accordion-item__title {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: 500;\n font-size: 22px;\n line-height: 1.25;\n color: var(--_heading-color);\n margin: 0;\n flex: 1;\n transition: color 0.2s ease;\n}\n\n/* Collapsed items have lighter text */\n.accordion-item:not(.accordion-item--expanded) .accordion-item__title {\n opacity: 0.7;\n}\n\n.accordion-item__icon {\n flex-shrink: 0;\n width: 24px;\n height: 24px;\n color: var(--_heading-color);\n transition: transform 0.2s ease;\n}\n\n.accordion-item:not(.accordion-item--expanded) .accordion-item__icon {\n opacity: 0.5;\n}\n\n.accordion-item__content {\n overflow: hidden;\n transition: max-height 0.3s ease, opacity 0.3s ease;\n}\n\n.accordion-item__description {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: 400;\n font-size: 17px;\n line-height: 1.6;\n color: var(--_body-color);\n margin: 0 0 20px 0;\n padding-right: 40px;\n opacity: 0.85;\n}\n\n/* Timer track - the progress bar at the bottom of expanded items */\n.accordion-item__timer-track {\n height: 3px;\n background-color: var(--_border-color);\n border-radius: 2px;\n margin-bottom: 8px;\n overflow: hidden;\n display: flex;\n justify-content: flex-start;\n}\n\n.accordion-item__timer-progress {\n height: 100%;\n background-color: var(--af-accent-progress, var(--colour-softclay-600, #9e8765));\n border-radius: 2px;\n transition: width 0.05s linear;\n}\n\n/* Image Container - stretches full height to align with accordion */\n.feature-accordion__image-container {\n display: flex;\n align-items: center;\n justify-content: center;\n /* Flows from parent Section's theme; mist-green fallback for unthemed use */\n background-color: var(--af-background-level-1, var(--colour-mistgreen-300, #dde6e3));\n border-radius: 20px;\n overflow: hidden;\n flex: 1;\n min-width: 0;\n}\n\n.feature-accordion__image-wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n padding: var(--af-feature-accordion-image-pad, 40px);\n}\n\n.feature-accordion__image {\n max-width: 100%;\n max-height: 100%;\n width: auto;\n height: auto;\n object-fit: contain;\n border-radius: 12px;\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);\n}\n\n.feature-accordion__image-placeholder {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n/* Tablet */\n/* ≤ tablet */\n@media (max-width: 1024px) {\n .feature-accordion__content {\n gap: 32px;\n }\n\n .feature-accordion__heading {\n margin-bottom: 40px;\n }\n\n .accordion-item__title {\n font-size: 20px;\n }\n}\n\n/* Mobile */\n/* mobile-only */\n@media (max-width: 768px) {\n .feature-accordion__content {\n flex-direction: column;\n gap: 32px;\n }\n\n .feature-accordion__image-container {\n order: -1;\n min-height: 280px;\n flex: none;\n }\n\n .feature-accordion__list {\n flex: none;\n }\n\n .accordion-item__title {\n font-size: 18px;\n }\n\n .accordion-item__description {\n font-size: 15px;\n padding-right: 0;\n }\n}\n","import { Component, h, Host, Prop, State, Element, Watch } from '@stencil/core';\n\nexport interface FeatureAccordionItem {\n title: string;\n description: string;\n imageUrl?: string;\n imageAlt?: string;\n}\n\n/**\n * Feature accordion component with expandable items and accompanying image.\n * Used for showcasing product features with visual examples.\n * Features auto-cycling through items with a progress timer.\n * \n * **Must be wrapped in a Section component** to inherit theme styling.\n * The component automatically adapts colors based on the parent Section's theme.\n * \n * @example\n * ```tsx\n * <Section theme=\"inkwell\">\n * <FeatureAccordion heading=\"Features\" items={...} />\n * </Section>\n * ```\n */\n@Component({\n tag: 'af-feature-accordion',\n styleUrl: 'af-feature-accordion.css',\n shadow: false,\n scoped: true,\n})\nexport class AfFeatureAccordion {\n @Element() el!: HTMLElement;\n\n /** Section heading */\n @Prop() heading: string = 'Give AI agents your paperwork';\n\n /** JSON string of accordion items */\n @Prop() items: string = '[]';\n\n /** Auto-cycle interval in milliseconds (default: 6000ms = 6 seconds) */\n @Prop() cycleInterval: number = 6000;\n\n /** Whether auto-cycling is enabled */\n @Prop() autoCycle: boolean = true;\n\n /** Currently expanded item index */\n @State() expandedIndex: number = 0;\n\n /** Progress of current timer (0-100) */\n @State() timerProgress: number = 100;\n\n private progressTimer: number | null = null;\n private progressStartTime: number = 0;\n\n componentDidLoad() {\n if (this.autoCycle) {\n this.startCycling();\n }\n }\n\n disconnectedCallback() {\n this.stopCycling();\n }\n\n @Watch('autoCycle')\n handleAutoCycleChange(newValue: boolean) {\n if (newValue) {\n this.startCycling();\n } else {\n this.stopCycling();\n }\n }\n\n private getItems(): FeatureAccordionItem[] {\n try {\n return JSON.parse(this.items);\n } catch {\n return [];\n }\n }\n\n private startCycling() {\n this.stopCycling();\n this.progressStartTime = Date.now();\n this.timerProgress = 100;\n \n // Progress animation frame\n const updateProgress = () => {\n const elapsed = Date.now() - this.progressStartTime;\n const remaining = this.cycleInterval - elapsed;\n \n if (remaining <= 0) {\n this.moveToNextItem();\n } else {\n this.timerProgress = (remaining / this.cycleInterval) * 100;\n this.progressTimer = requestAnimationFrame(updateProgress);\n }\n };\n \n this.progressTimer = requestAnimationFrame(updateProgress);\n }\n\n private stopCycling() {\n if (this.progressTimer) {\n cancelAnimationFrame(this.progressTimer);\n this.progressTimer = null;\n }\n }\n\n private moveToNextItem() {\n const items = this.getItems();\n if (items.length === 0) return;\n \n this.expandedIndex = (this.expandedIndex + 1) % items.length;\n // Restart the cycling timer for the new item\n this.startCycling();\n }\n\n private handleItemClick(index: number) {\n // Reset timer when user clicks\n this.expandedIndex = index;\n // Restart the cycling timer for the clicked item\n if (this.autoCycle) {\n this.startCycling();\n }\n }\n\n render() {\n const items = this.getItems();\n const currentItem = items[this.expandedIndex];\n\n return (\n <Host>\n <div class=\"feature-accordion\">\n <div class=\"feature-accordion__container\">\n <h2 class=\"feature-accordion__heading\">{this.heading}</h2>\n \n <div class=\"feature-accordion__content\">\n {/* Left side - Accordion */}\n <div class=\"feature-accordion__list\">\n {items.map((item, index) => (\n <div \n class={{\n 'accordion-item': true,\n 'accordion-item--expanded': this.expandedIndex === index\n }}\n key={index}\n >\n <button \n class=\"accordion-item__header\"\n onClick={() => this.handleItemClick(index)}\n aria-expanded={this.expandedIndex === index ? 'true' : 'false'}\n >\n <h4 class=\"accordion-item__title\">{item.title}</h4>\n <span class=\"accordion-item__icon\">\n {this.expandedIndex === index ? (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5 12H19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n </svg>\n ) : (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 5V19M5 12H19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n </svg>\n )}\n </span>\n </button>\n <div \n class=\"accordion-item__content\"\n style={{ \n maxHeight: this.expandedIndex === index ? '200px' : '0',\n opacity: this.expandedIndex === index ? '1' : '0'\n }}\n >\n <p class=\"accordion-item__description\">{item.description}</p>\n {this.expandedIndex === index && this.autoCycle && (\n <div class=\"accordion-item__timer-track\">\n <div \n class=\"accordion-item__timer-progress\"\n style={{ width: `${this.timerProgress}%` }}\n ></div>\n </div>\n )}\n </div>\n </div>\n ))}\n </div>\n\n {/* Right side - Image */}\n <div class=\"feature-accordion__image-container\">\n <div class=\"feature-accordion__image-wrapper\">\n {currentItem?.imageUrl && (\n <img \n src={currentItem.imageUrl} \n alt={currentItem.imageAlt || currentItem.title}\n class=\"feature-accordion__image\"\n />\n )}\n {!currentItem?.imageUrl && (\n <div class=\"feature-accordion__image-placeholder\">\n <slot name=\"image\"></slot>\n </div>\n )}\n </div>\n </div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"af-feature-accordion.entry.esm.js","sources":["src/components/af-feature-accordion/af-feature-accordion.css?tag=af-feature-accordion&encapsulation=scoped","src/components/af-feature-accordion/af-feature-accordion.tsx"],"sourcesContent":["/*\n * af-feature-accordion\n * ---------------------------------------------------------------------------\n * Themable CSS custom properties (safe to override from consumers):\n *\n * --af-accent-progress Colour of the per-item timer/progress bar.\n * Defaults to --colour-softclay-600 (brand\n * soft-clay). Override to retheme the accent.\n * --af-feature-accordion-image-pad\n * Padding around the accompanying image\n * inside its rounded container. Defaults to\n * 40px — tune for tighter or looser rhythm.\n *\n * The component also inherits the following theme tokens from its parent\n * <af-section> (or any ancestor setting them):\n *\n * --af-typography-heading-primary heading colour\n * --af-typography-body-default body colour\n * --af-background-border-default rule/divider colour\n * --af-background-level-1 image-container background\n */\n\n:host {\n display: block;\n width: 100%;\n}\n\n.feature-accordion {\n /* Inherits theme from parent Section via CSS custom properties */\n padding: 0 24px;\n\n /* Internal custom properties that inherit from parent Section's theme */\n --_heading-color: var(--af-typography-heading-primary, var(--colour-brand-inkwell, #14343b));\n --_body-color: var(--af-typography-body-default, var(--colour-inkwell-400, #2b484f));\n --_border-color: var(--af-background-border-default, rgba(20, 52, 59, 0.12));\n}\n\n.feature-accordion__heading {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: 400;\n font-size: clamp(36px, 5vw, 52px);\n line-height: 1.05;\n letter-spacing: -0.025em;\n color: var(--_heading-color);\n margin: 0 0 56px 0;\n}\n\n.feature-accordion__content {\n display: flex;\n gap: 48px;\n}\n\n/* Accordion List */\n.feature-accordion__list {\n display: flex;\n flex-direction: column;\n flex: 1;\n min-width: 0;\n}\n\n/* Accordion Item */\n.accordion-item {\n border-bottom: 1px solid var(--_border-color);\n}\n\n.accordion-item:first-child {\n border-top: 1px solid var(--_border-color);\n}\n\n.accordion-item__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding: 24px 0;\n background: none;\n border: none;\n cursor: pointer;\n text-align: left;\n gap: 16px;\n}\n\n.accordion-item__header:hover .accordion-item__title {\n color: var(--_heading-color);\n}\n\n.accordion-item__title {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: 500;\n font-size: 22px;\n line-height: 1.25;\n color: var(--_heading-color);\n margin: 0;\n flex: 1;\n transition: color 0.2s ease;\n}\n\n/* Collapsed items have lighter text */\n.accordion-item:not(.accordion-item--expanded) .accordion-item__title {\n opacity: 0.7;\n}\n\n.accordion-item__icon {\n flex-shrink: 0;\n width: 24px;\n height: 24px;\n color: var(--_heading-color);\n transition:\n transform var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),\n opacity var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));\n}\n\n.accordion-item__icon svg {\n display: block;\n width: 100%;\n height: 100%;\n overflow: visible;\n}\n\n/* Plus → minus morph: vertical bar collapses and the whole icon rotates\n 45° when expanding, giving a single, fluid gesture. */\n.accordion-item__icon-bar {\n transition:\n transform var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),\n opacity var(--motion-duration-fast, 150ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));\n transform-origin: 12px 12px;\n}\n\n.accordion-item--expanded .accordion-item__icon-bar--vert {\n transform: scaleY(0);\n opacity: 0;\n}\n\n.accordion-item:not(.accordion-item--expanded) .accordion-item__icon {\n opacity: 0.5;\n}\n\n.accordion-item__content {\n overflow: hidden;\n transition:\n max-height var(--motion-duration-slow, 300ms) var(--motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1)),\n opacity var(--motion-duration-slow, 300ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));\n}\n\n@media (prefers-reduced-motion: reduce) {\n .accordion-item__icon,\n .accordion-item__icon-bar,\n .accordion-item__content,\n .accordion-item__title {\n transition-duration: 0.01ms;\n }\n}\n\n.accordion-item__description {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: 400;\n font-size: 17px;\n line-height: 1.6;\n color: var(--_body-color);\n margin: 0 0 20px 0;\n padding-right: 40px;\n opacity: 0.85;\n}\n\n/* Timer track - the progress bar at the bottom of expanded items */\n.accordion-item__timer-track {\n height: 3px;\n background-color: var(--_border-color);\n border-radius: 2px;\n margin-bottom: 8px;\n overflow: hidden;\n display: flex;\n justify-content: flex-start;\n}\n\n.accordion-item__timer-progress {\n height: 100%;\n background-color: var(--af-accent-progress, var(--colour-softclay-600, #9e8765));\n border-radius: 2px;\n transition: width 0.05s linear;\n}\n\n/* Image Container - stretches full height to align with accordion */\n.feature-accordion__image-container {\n display: flex;\n align-items: center;\n justify-content: center;\n /* Flows from parent Section's theme; mist-green fallback for unthemed use */\n background-color: var(--af-background-level-1, var(--colour-mistgreen-300, #dde6e3));\n border-radius: 20px;\n overflow: hidden;\n flex: 1;\n min-width: 0;\n}\n\n.feature-accordion__image-wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n padding: var(--af-feature-accordion-image-pad, 40px);\n}\n\n.feature-accordion__image {\n max-width: 100%;\n max-height: 100%;\n width: auto;\n height: auto;\n object-fit: contain;\n border-radius: 12px;\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);\n}\n\n.feature-accordion__image-placeholder {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n/* Tablet */\n/* ≤ tablet */\n@media (max-width: 1024px) {\n .feature-accordion__content {\n gap: 32px;\n }\n\n .feature-accordion__heading {\n margin-bottom: 40px;\n }\n\n .accordion-item__title {\n font-size: 20px;\n }\n}\n\n/* Mobile */\n/* mobile-only */\n@media (max-width: 768px) {\n .feature-accordion__content {\n flex-direction: column;\n gap: 32px;\n }\n\n .feature-accordion__image-container {\n order: -1;\n min-height: 280px;\n flex: none;\n }\n\n .feature-accordion__list {\n flex: none;\n }\n\n .accordion-item__title {\n font-size: 18px;\n }\n\n .accordion-item__description {\n font-size: 15px;\n padding-right: 0;\n }\n}\n","import { Component, h, Host, Prop, State, Element, Watch } from '@stencil/core';\n\nexport interface FeatureAccordionItem {\n title: string;\n description: string;\n imageUrl?: string;\n imageAlt?: string;\n}\n\n/**\n * Feature accordion component with expandable items and accompanying image.\n * Used for showcasing product features with visual examples.\n * Features auto-cycling through items with a progress timer.\n * \n * **Must be wrapped in a Section component** to inherit theme styling.\n * The component automatically adapts colors based on the parent Section's theme.\n * \n * @example\n * ```tsx\n * <Section theme=\"inkwell\">\n * <FeatureAccordion heading=\"Features\" items={...} />\n * </Section>\n * ```\n */\n@Component({\n tag: 'af-feature-accordion',\n styleUrl: 'af-feature-accordion.css',\n shadow: false,\n scoped: true,\n})\nexport class AfFeatureAccordion {\n @Element() el!: HTMLElement;\n\n /** Section heading */\n @Prop() heading: string = 'Give AI agents your paperwork';\n\n /** JSON string of accordion items */\n @Prop() items: string = '[]';\n\n /** Auto-cycle interval in milliseconds (default: 6000ms = 6 seconds) */\n @Prop() cycleInterval: number = 6000;\n\n /** Whether auto-cycling is enabled */\n @Prop() autoCycle: boolean = true;\n\n /** Currently expanded item index */\n @State() expandedIndex: number = 0;\n\n /** Progress of current timer (0-100) */\n @State() timerProgress: number = 100;\n\n private progressTimer: number | null = null;\n private progressStartTime: number = 0;\n\n componentDidLoad() {\n if (this.autoCycle) {\n this.startCycling();\n }\n }\n\n disconnectedCallback() {\n this.stopCycling();\n }\n\n @Watch('autoCycle')\n handleAutoCycleChange(newValue: boolean) {\n if (newValue) {\n this.startCycling();\n } else {\n this.stopCycling();\n }\n }\n\n private getItems(): FeatureAccordionItem[] {\n try {\n return JSON.parse(this.items);\n } catch {\n return [];\n }\n }\n\n private startCycling() {\n this.stopCycling();\n this.progressStartTime = Date.now();\n this.timerProgress = 100;\n \n // Progress animation frame\n const updateProgress = () => {\n const elapsed = Date.now() - this.progressStartTime;\n const remaining = this.cycleInterval - elapsed;\n \n if (remaining <= 0) {\n this.moveToNextItem();\n } else {\n this.timerProgress = (remaining / this.cycleInterval) * 100;\n this.progressTimer = requestAnimationFrame(updateProgress);\n }\n };\n \n this.progressTimer = requestAnimationFrame(updateProgress);\n }\n\n private stopCycling() {\n if (this.progressTimer) {\n cancelAnimationFrame(this.progressTimer);\n this.progressTimer = null;\n }\n }\n\n private moveToNextItem() {\n const items = this.getItems();\n if (items.length === 0) return;\n \n this.expandedIndex = (this.expandedIndex + 1) % items.length;\n // Restart the cycling timer for the new item\n this.startCycling();\n }\n\n private handleItemClick(index: number) {\n // Reset timer when user clicks\n this.expandedIndex = index;\n // Restart the cycling timer for the clicked item\n if (this.autoCycle) {\n this.startCycling();\n }\n }\n\n render() {\n const items = this.getItems();\n const currentItem = items[this.expandedIndex];\n\n return (\n <Host>\n <div class=\"feature-accordion\">\n <div class=\"feature-accordion__container\">\n <h2 class=\"feature-accordion__heading\">{this.heading}</h2>\n \n <div class=\"feature-accordion__content\">\n {/* Left side - Accordion */}\n <div class=\"feature-accordion__list\">\n {items.map((item, index) => (\n <div \n class={{\n 'accordion-item': true,\n 'accordion-item--expanded': this.expandedIndex === index\n }}\n key={index}\n >\n <button\n class=\"accordion-item__header\"\n onClick={() => this.handleItemClick(index)}\n aria-expanded={this.expandedIndex === index ? 'true' : 'false'}\n >\n <h4 class=\"accordion-item__title\">{item.title}</h4>\n {/* Plus → minus: a single SVG with two strokes, the\n vertical one rotated-out to zero when expanded. This\n gives a fluid morph instead of swapping SVGs mid-\n animation. */}\n <span class=\"accordion-item__icon\" aria-hidden=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path class=\"accordion-item__icon-bar\" d=\"M5 12H19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n <path class=\"accordion-item__icon-bar accordion-item__icon-bar--vert\" d=\"M12 5V19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n </svg>\n </span>\n </button>\n <div \n class=\"accordion-item__content\"\n style={{ \n maxHeight: this.expandedIndex === index ? '200px' : '0',\n opacity: this.expandedIndex === index ? '1' : '0'\n }}\n >\n <p class=\"accordion-item__description\">{item.description}</p>\n {this.expandedIndex === index && this.autoCycle && (\n <div class=\"accordion-item__timer-track\">\n <div \n class=\"accordion-item__timer-progress\"\n style={{ width: `${this.timerProgress}%` }}\n ></div>\n </div>\n )}\n </div>\n </div>\n ))}\n </div>\n\n {/* Right side - Image */}\n <div class=\"feature-accordion__image-container\">\n <div class=\"feature-accordion__image-wrapper\">\n {currentItem?.imageUrl && (\n <img \n src={currentItem.imageUrl} \n alt={currentItem.imageAlt || currentItem.title}\n class=\"feature-accordion__image\"\n />\n )}\n {!currentItem?.imageUrl && (\n <div class=\"feature-accordion__image-placeholder\">\n <slot name=\"image\"></slot>\n </div>\n )}\n </div>\n </div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"af-icon-button.entry.esm.js","sources":["src/components/af-icon-button/af-icon-button.css?tag=af-icon-button&encapsulation=shadow","src/components/af-icon-button/af-icon-button.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\n/* Set color on host for slotted content inheritance */\n:host([variant=\"secondary\"]) {\n color: var(--af-button-secondary-icon, var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343B)));\n}\n\n:host([variant=\"primary\"]) {\n color: var(--af-button-primary-icon, var(--colour-brand-inkwell, #14343B));\n}\n\n:host([variant=\"tertiary\"]) {\n color: var(--af-button-ghost-icon, var(--colour-brand-inkwell, #14343B));\n}\n\n.icon-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n cursor: pointer;\n transition
|
|
1
|
+
{"version":3,"file":"af-icon-button.entry.esm.js","sources":["src/components/af-icon-button/af-icon-button.css?tag=af-icon-button&encapsulation=shadow","src/components/af-icon-button/af-icon-button.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\n/* Set color on host for slotted content inheritance */\n:host([variant=\"secondary\"]) {\n color: var(--af-button-secondary-icon, var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343B)));\n}\n\n:host([variant=\"primary\"]) {\n color: var(--af-button-primary-icon, var(--colour-brand-inkwell, #14343B));\n}\n\n:host([variant=\"tertiary\"]) {\n color: var(--af-button-ghost-icon, var(--colour-brand-inkwell, #14343B));\n}\n\n.icon-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n cursor: pointer;\n transition:\n background-color var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),\n border-color var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),\n color var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),\n opacity var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),\n transform var(--motion-duration-fast, 150ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));\n border: 1px solid transparent;\n box-sizing: border-box;\n flex-shrink: 0;\n text-decoration: none;\n padding: 0;\n will-change: transform;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .icon-button {\n transition-duration: 0.01ms;\n }\n}\n\n/* Size variants */\n.size-large {\n width: 72px;\n height: 72px;\n padding: 24px;\n}\n\n.size-large .icon {\n width: 24px;\n height: 24px;\n}\n\n.size-medium {\n width: 48px;\n height: 48px;\n padding: 12px;\n}\n\n.size-medium .icon {\n width: 24px;\n height: 24px;\n}\n\n.size-small {\n width: 36px;\n height: 36px;\n padding: 8px;\n}\n\n.size-small .icon {\n width: 20px;\n height: 20px;\n}\n\n/* Icon slot - inherits color from parent */\n.icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n color: inherit;\n}\n\n.icon ::slotted(*) {\n width: 100%;\n height: 100%;\n color: inherit;\n}\n\n/* Primary variant (ice background) */\n.variant-primary {\n background: var(--af-button-primary-bg, var(--colour-brand-ice, #A6FFFB));\n border-color: var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343B));\n color: var(--af-button-primary-text, var(--colour-brand-inkwell, #14343B));\n}\n\n.variant-primary:hover:not(.disabled) {\n background: var(--af-button-primary-bg-hover, #95e6e2);\n}\n\n.variant-primary:active:not(.disabled) {\n background: var(--af-button-primary-bg-hover, #95e6e2);\n transform: translateY(1px);\n}\n\n/* Secondary variant (outlined) */\n.variant-secondary {\n background: var(--af-button-secondary-bg, transparent);\n border-color: var(--af-button-secondary-stroke, currentColor);\n color: var(--af-button-secondary-text, var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343B)));\n}\n\n.variant-secondary:hover:not(.disabled) {\n background: var(--af-button-secondary-bg-hover, rgba(128, 128, 128, 0.1));\n}\n\n.variant-secondary:active:not(.disabled) {\n background: var(--af-button-secondary-bg-hover, rgba(128, 128, 128, 0.1));\n transform: translateY(1px);\n}\n\n/* Tertiary variant (minimal, no border) */\n.variant-tertiary {\n background: transparent;\n border-color: transparent;\n color: var(--af-button-ghost-text, var(--colour-brand-inkwell, #14343B));\n}\n\n.variant-tertiary:hover:not(.disabled) {\n opacity: 0.8;\n}\n\n.variant-tertiary:active:not(.disabled) {\n opacity: 0.6;\n}\n\n/* Disabled state */\n.disabled {\n opacity: 0.4;\n cursor: not-allowed;\n pointer-events: none;\n}\n\n/* Remove default button styles */\nbutton.icon-button {\n background: none;\n border: none;\n padding: 0;\n font: inherit;\n color: inherit;\n cursor: pointer;\n}\n\nbutton.icon-button.variant-primary {\n background: var(--af-button-primary-bg, var(--colour-brand-ice, #A6FFFB));\n border: 1px solid var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343B));\n}\n\nbutton.icon-button.variant-secondary {\n background: var(--af-button-secondary-bg, transparent);\n border: 1px solid var(--af-button-secondary-stroke, currentColor);\n color: var(--af-button-secondary-text, var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343B)));\n}\n\nbutton.icon-button.variant-tertiary {\n background: transparent;\n border: 1px solid transparent;\n}\n","import { Component, h, Prop, Host } from '@stencil/core';\n\n@Component({\n tag: 'af-icon-button',\n styleUrl: 'af-icon-button.css',\n shadow: true\n})\nexport class AfIconButton {\n /**\n * The visual variant of the button.\n * - `primary` - Main CTA with filled ice background\n * - `secondary` - Supporting action with white background\n * - `tertiary` - Minimal style with transparent background\n */\n @Prop({ reflect: true }) variant: 'primary' | 'secondary' | 'tertiary' = 'primary';\n\n /**\n * The size of the button\n */\n @Prop() size: 'large' | 'medium' | 'small' = 'medium';\n\n /**\n * Whether the button is disabled\n */\n @Prop() disabled: boolean = false;\n\n /**\n * Optional href to render as a link\n */\n @Prop() href?: string;\n\n /**\n * Button type (when not using href)\n */\n @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n /**\n * Accessible label for screen readers\n */\n @Prop() ariaLabel!: string;\n\n render() {\n const classes = {\n 'icon-button': true,\n [`variant-${this.variant}`]: true,\n [`size-${this.size}`]: true,\n 'disabled': this.disabled\n };\n\n const content = (\n <span class=\"icon\">\n <slot></slot>\n </span>\n );\n\n if (this.href && !this.disabled) {\n return (\n <Host>\n <a href={this.href} class={classes} aria-label={this.ariaLabel}>\n {content}\n </a>\n </Host>\n );\n }\n\n return (\n <Host>\n <button type={this.type} disabled={this.disabled} class={classes} aria-label={this.ariaLabel}>\n {content}\n </button>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,eAAe,GAAG,s+GAAs+G;;MCOj/G,YAAY,GAAA,MAAA;AALzB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;;;;AAKG;AACsB,QAAA,IAAO,CAAA,OAAA,GAAyC,SAAS;AAElF;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAiC,QAAQ;AAErD;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAOjC;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAkC,QAAQ;AAuCvD;IAhCC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,aAAa,EAAE,IAAI;AACnB,YAAA,CAAC,WAAW,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;AACjC,YAAA,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;YAC3B,UAAU,EAAE,IAAI,CAAC;SAClB;QAED,MAAM,OAAO,IACX,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,MAAM,EAAA,EAChB,CAAa,CAAA,MAAA,EAAA,IAAA,CAAA,CACR,CACR;QAED,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAC/B,YAAA,QACE,EAAC,IAAI,EAAA,IAAA,EACH,CAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,OAAO,EAAc,YAAA,EAAA,IAAI,CAAC,SAAS,EAAA,EAC3D,OAAO,CACN,CACC;;AAIX,QAAA,QACE,EAAC,IAAI,EAAA,IAAA,EACH,CAAQ,CAAA,QAAA,EAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAc,YAAA,EAAA,IAAI,CAAC,SAAS,IACzF,OAAO,CACD,CACJ;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"af-nav-accordion-item.entry.esm.js","sources":["src/components/af-nav-accordion-item/af-nav-accordion-item.css?tag=af-nav-accordion-item&encapsulation=scoped","src/components/af-nav-accordion-item/af-nav-accordion-item.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n.nav-accordion-item {\n width: 100%;\n}\n\n/* Trigger button/link - clickable header */\n.trigger {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n width: 100%;\n padding: 20px 12px;\n background: transparent;\n border: none;\n border-bottom: 1px solid var(--af-nav-border-subtle, var(--af-background-border-subtle, #e8eeed));\n cursor: pointer;\n font: inherit;\n text-align: left;\n text-decoration: none;\n color: inherit;\n box-sizing: border-box;\n}\n\na.trigger {\n color: inherit;\n}\n\n.trigger:hover:not(:disabled) {\n background-color: rgba(20, 52, 59, 0.02);\n}\n\n.trigger:focus-visible {\n outline: 2px solid var(--af-nav-border-active, var(--af-background-border-active, #8a7049));\n outline-offset: -2px;\n}\n\n.trigger:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n/* Trigger content */\n.trigger-content {\n flex: 1;\n min-width: 0;\n display: flex;\n align-items: center;\n min-height: 24px;\n}\n\n/* Label styling - matches NavItem primary-01 mobile */\n.label {\n font-family: var(--typography-primaryfont, 'NeuSans', 'Inter', system-ui, sans-serif);\n font-weight: var(--typography-headingweight, 500);\n font-size: 20px;\n line-height: 1.1;\n letter-spacing: -0.4px;\n color: var(--af-nav-item-primary, var(--af-typography-body-dark, #14343b));\n}\n\n/* Chevron indicator */\n.chevron,\n.chevron-button {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n flex-shrink: 0;\n color: var(--af-nav-item-primary, var(--af-typography-body-dark, #14343b));\n transition: transform 0.3s ease;\n}\n\n.chevron-button {\n background: transparent;\n border: none;\n cursor: pointer;\n padding: 0;\n}\n\n.chevron-button:hover {\n opacity: 0.7;\n}\n\n.chevron.is-open {\n transform: rotate(180deg);\n}\n\n/* Content wrapper - handles animation */\n.content-wrapper {\n overflow: hidden;\n transition: max-height 0.3s ease;\n}\n\n.content {\n padding: 0;\n background: var(--af-background-base, white);\n}\n\n/* Disabled state */\n:host(.is-disabled) .trigger {\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n:host(.is-disabled) .trigger:hover {\n background-color: transparent;\n}\n\n/* Open state styling */\n:host(.is-open) .trigger {\n border-bottom-color: transparent;\n}\n\n/* Mobile breakpoint styling */\n:host(.breakpoint-mobile) .trigger {\n padding: 20px 12px;\n}\n\n:host(.breakpoint-mobile) .label {\n font-size: 20px;\n line-height: 1.1;\n letter-spacing: -0.4px;\n}\n\n/* Desktop breakpoint styling */\n:host(.breakpoint-desktop) .trigger {\n padding: 12px;\n}\n\n:host(.breakpoint-desktop) .label {\n font-size: 16px;\n line-height: 20px;\n letter-spacing: 0;\n}\n\n/* Nested content uses different padding */\n:host(.breakpoint-mobile) .content {\n padding-left: 0;\n}\n\n","import { Component, h, Prop, Host, Event, EventEmitter, Element, State, Watch, Method } from '@stencil/core';\n\n/**\n * Navigation accordion item with NavItem-styled trigger.\n * Combines navigation item styling with accordion collapse behavior.\n * \n * @slot trigger - Custom trigger content (optional - uses label if not provided)\n * @slot - The collapsible content (typically NavMenuNest or NavMenu components)\n */\n@Component({\n tag: 'af-nav-accordion-item',\n styleUrl: 'af-nav-accordion-item.css',\n shadow: false,\n scoped: true,\n})\nexport class AfNavAccordionItem {\n @Element() el!: HTMLElement;\n\n /**\n * Unique identifier for this accordion item\n */\n @Prop({ reflect: true }) itemId!: string;\n\n /**\n * Label text for the navigation item trigger\n */\n @Prop() label?: string;\n\n /**\n * Whether this item is currently expanded\n */\n @Prop({ reflect: true, mutable: true }) open: boolean = false;\n\n /**\n * Whether this item is disabled\n */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /**\n * Optional href - if provided, clicking navigates instead of expanding\n * (chevron area would still toggle expansion if both behaviors needed)\n */\n @Prop() href?: string;\n\n /**\n * Breakpoint for styling\n */\n @Prop({ reflect: true }) breakpoint: 'desktop' | 'mobile' = 'mobile';\n\n /**\n * Emitted when the accordion item is toggled\n */\n @Event({ eventName: 'af-nav-accordion-item-toggle' }) navAccordionItemToggle!: EventEmitter<{ itemId: string; open: boolean }>;\n\n @State() contentHeight: number = 0;\n @State() hasTriggerSlot: boolean = false;\n @State() hasContent: boolean = false;\n\n private contentRef?: HTMLElement;\n\n @Watch('open')\n handleOpenChange(newValue: boolean) {\n if (newValue) {\n this.measureContent();\n }\n }\n\n /**\n * Detect whether the host has any default-slot children — i.e. whether\n * this item expands to reveal a sub-menu, or is just a simple link.\n * We check in componentWillLoad (before render) because after render\n * Stencil has appended its own output to the host and this.el.children\n * would include that.\n */\n componentWillLoad() {\n this.hasContent = Array.from(this.el.children).some(\n (child) => !(child as HTMLElement).hasAttribute('slot'),\n );\n }\n\n componentDidLoad() {\n if (this.open) {\n this.measureContent();\n }\n }\n\n /**\n * Programmatically toggle the accordion item\n */\n @Method()\n async toggle() {\n if (!this.disabled && !this.href) {\n this.open = !this.open;\n this.navAccordionItemToggle.emit({ itemId: this.itemId, open: this.open });\n }\n }\n\n private measureContent() {\n if (this.contentRef) {\n this.contentHeight = this.contentRef.scrollHeight;\n }\n }\n\n private handleTriggerClick = (event: MouseEvent) => {\n // If it's a link, let it navigate (unless they clicked the chevron specifically)\n if (this.href) {\n return;\n }\n event.preventDefault();\n this.toggle();\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if ((event.key === 'Enter' || event.key === ' ') && !this.href) {\n event.preventDefault();\n this.toggle();\n }\n };\n\n private handleSlotChange = (event: Event) => {\n const slot = event.target as HTMLSlotElement;\n this.hasTriggerSlot = slot.assignedNodes().length > 0;\n };\n\n render() {\n const contentStyle = {\n maxHeight: this.open ? `${this.contentHeight}px` : '0px'\n };\n\n // Only render the chevron toggle when this item actually has\n // sub-content to expand. A plain href item with no children is a\n // direct link and shouldn't show a disclosure affordance.\n const hasDropdownContent = this.hasContent;\n\n return (\n <Host \n class={{ \n 'is-open': this.open, \n 'is-disabled': this.disabled,\n [`breakpoint-${this.breakpoint}`]: true\n }}\n >\n <div class=\"nav-accordion-item\">\n {/* Trigger */}\n {this.href ? (\n <a\n href={this.href}\n class=\"trigger\"\n aria-expanded={this.open ? 'true' : 'false'}\n aria-controls={`content-${this.itemId}`}\n >\n <div class=\"trigger-content\">\n <slot name=\"trigger\" onSlotchange={this.handleSlotChange}>\n <span class=\"label\">{this.label}</span>\n </slot>\n </div>\n {hasDropdownContent && (\n <button \n class=\"chevron-button\"\n onClick={(e) => { e.preventDefault(); e.stopPropagation(); this.toggle(); }}\n aria-label={this.open ? 'Collapse' : 'Expand'}\n type=\"button\"\n >\n <div class={{ 'chevron': true, 'is-open': this.open }}>\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\">\n <path d=\"M6 9l6 6 6-6\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n </button>\n )}\n </a>\n ) : (\n <button\n class=\"trigger\"\n onClick={this.handleTriggerClick}\n onKeyDown={this.handleKeyDown}\n aria-expanded={this.open ? 'true' : 'false'}\n aria-controls={`content-${this.itemId}`}\n disabled={this.disabled}\n type=\"button\"\n >\n <div class=\"trigger-content\">\n <slot name=\"trigger\" onSlotchange={this.handleSlotChange}>\n <span class=\"label\">{this.label}</span>\n </slot>\n </div>\n {hasDropdownContent && (\n <div class={{ 'chevron': true, 'is-open': this.open }}>\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\">\n <path d=\"M6 9l6 6 6-6\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n )}\n </button>\n )}\n\n {/* Collapsible content */}\n <div\n id={`content-${this.itemId}`}\n class=\"content-wrapper\"\n style={contentStyle}\n aria-hidden={!this.open ? 'true' : 'false'}\n >\n <div class=\"content\" ref={(el) => (this.contentRef = el)}>\n <slot></slot>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n\n"],"names":[],"mappings":";;AAAA,MAAM,qBAAqB,GAAG,2uFAA2uF;;MCe5vF,kBAAkB,GAAA,MAAA;AAN/B,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAmBE;;AAEG;AACqC,QAAA,IAAI,CAAA,IAAA,GAAY,KAAK;AAE7D;;AAEG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAQlD;;AAEG;AACsB,QAAA,IAAU,CAAA,UAAA,GAAyB,QAAQ;AAO3D,QAAA,IAAa,CAAA,aAAA,GAAW,CAAC;AACzB,QAAA,IAAc,CAAA,cAAA,GAAY,KAAK;AAC/B,QAAA,IAAU,CAAA,UAAA,GAAY,KAAK;AA+C5B,QAAA,IAAA,CAAA,kBAAkB,GAAG,CAAC,KAAiB,KAAI;;AAEjD,YAAA,IAAI,IAAI,CAAC,IAAI,EAAE;gBACb;;YAEF,KAAK,CAAC,cAAc,EAAE;YACtB,IAAI,CAAC,MAAM,EAAE;AACf,SAAC;AAEO,QAAA,IAAA,CAAA,aAAa,GAAG,CAAC,KAAoB,KAAI;AAC/C,YAAA,IAAI,CAAC,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE;gBAC9D,KAAK,CAAC,cAAc,EAAE;gBACtB,IAAI,CAAC,MAAM,EAAE;;AAEjB,SAAC;AAEO,QAAA,IAAA,CAAA,gBAAgB,GAAG,CAAC,KAAY,KAAI;AAC1C,YAAA,MAAM,IAAI,GAAG,KAAK,CAAC,MAAyB;YAC5C,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,MAAM,GAAG,CAAC;AACvD,SAAC;AAyFF;AAtJC,IAAA,gBAAgB,CAAC,QAAiB,EAAA;QAChC,IAAI,QAAQ,EAAE;YACZ,IAAI,CAAC,cAAc,EAAE;;;AAIzB;;;;;;AAMG;IACH,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,IAAI,CACjD,CAAC,KAAK,KAAK,CAAE,KAAqB,CAAC,YAAY,CAAC,MAAM,CAAC,CACxD;;IAGH,gBAAgB,GAAA;AACd,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,cAAc,EAAE;;;AAIzB;;AAEG;AAEH,IAAA,MAAM,MAAM,GAAA;QACV,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;AAChC,YAAA,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI;AACtB,YAAA,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC;;;IAItE,cAAc,GAAA;AACpB,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,UAAU,CAAC,YAAY;;;IAyBrD,MAAM,GAAA;AACJ,QAAA,MAAM,YAAY,GAAG;AACnB,YAAA,SAAS,EAAE,IAAI,CAAC,IAAI,GAAG,CAAG,EAAA,IAAI,CAAC,aAAa,CAAA,EAAA,CAAI,GAAG;SACpD;;;;AAKD,QAAA,MAAM,kBAAkB,GAAG,IAAI,CAAC,UAAU;QAE1C,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;gBACL,SAAS,EAAE,IAAI,CAAC,IAAI;gBACpB,aAAa,EAAE,IAAI,CAAC,QAAQ;AAC5B,gBAAA,CAAC,cAAc,IAAI,CAAC,UAAU,CAAE,CAAA,GAAG;aACpC,EAAA,EAED,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,EAE5B,IAAI,CAAC,IAAI,IACR,CAAA,CAAA,GAAA,EAAA,EACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAC,SAAS,EACA,eAAA,EAAA,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,OAAO,EAC5B,eAAA,EAAA,CAAA,QAAA,EAAW,IAAI,CAAC,MAAM,CAAA,CAAE,EAAA,EAEvC,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,SAAS,EAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,EAAA,EACtD,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,OAAO,EAAA,EAAE,IAAI,CAAC,KAAK,CAAQ,CAClC,CACH,EACL,kBAAkB,KACjB,CACE,CAAA,QAAA,EAAA,EAAA,KAAK,EAAC,gBAAgB,EACtB,OAAO,EAAE,CAAC,CAAC,KAAO,EAAA,CAAC,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,CAAC,eAAe,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,EAC/D,YAAA,EAAA,IAAI,CAAC,IAAI,GAAG,UAAU,GAAG,QAAQ,EAC7C,IAAI,EAAC,QAAQ,EAAA,EAEb,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,CAAC,IAAI,EAAE,EAAA,EACnD,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,EAAA,EAC/E,CAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,cAAc,EAAA,cAAA,EAAc,GAAG,EAAA,gBAAA,EAAgB,OAAO,EAAA,iBAAA,EAAiB,OAAO,EAAA,CAAE,CACpF,CACF,CACC,CACV,CACC,KAEJ,CACE,CAAA,QAAA,EAAA,EAAA,KAAK,EAAC,SAAS,EACf,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAChC,SAAS,EAAE,IAAI,CAAC,aAAa,EAAA,eAAA,EACd,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,OAAO,EAC5B,eAAA,EAAA,CAAW,QAAA,EAAA,IAAI,CAAC,MAAM,EAAE,EACvC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,QAAQ,EAAA,EAEb,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,SAAS,EAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,EAAA,EACtD,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,OAAO,EAAA,EAAE,IAAI,CAAC,KAAK,CAAQ,CAClC,CACH,EACL,kBAAkB,KACjB,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,CAAC,IAAI,EAAE,EAAA,EACnD,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,EAAA,EAC/E,CAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,cAAc,EAAA,cAAA,EAAc,GAAG,EAAgB,gBAAA,EAAA,OAAO,EAAiB,iBAAA,EAAA,OAAO,EAAE,CAAA,CACpF,CACF,CACP,CACM,CACV,EAGD,CACE,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,EAAE,CAAA,QAAA,EAAW,IAAI,CAAC,MAAM,CAAA,CAAE,EAC5B,KAAK,EAAC,iBAAiB,EACvB,KAAK,EAAE,YAAY,EACN,aAAA,EAAA,CAAC,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,OAAO,EAAA,EAE1C,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,SAAS,EAAC,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC,EAAA,EACtD,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACF,CACF,CACD;;;;;;;;;;;"}
|
|
1
|
+
{"version":3,"file":"af-nav-accordion-item.entry.esm.js","sources":["src/components/af-nav-accordion-item/af-nav-accordion-item.css?tag=af-nav-accordion-item&encapsulation=scoped","src/components/af-nav-accordion-item/af-nav-accordion-item.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n.nav-accordion-item {\n width: 100%;\n}\n\n/* Trigger button/link - clickable header */\n.trigger {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n width: 100%;\n padding: 20px 12px;\n background: transparent;\n border: none;\n border-bottom: 1px solid var(--af-nav-border-subtle, var(--af-background-border-subtle, #e8eeed));\n cursor: pointer;\n font: inherit;\n text-align: left;\n text-decoration: none;\n color: inherit;\n box-sizing: border-box;\n}\n\na.trigger {\n color: inherit;\n}\n\n.trigger:hover:not(:disabled) {\n background-color: rgba(20, 52, 59, 0.02);\n}\n\n.trigger:focus-visible {\n outline: 2px solid var(--af-nav-border-active, var(--af-background-border-active, #8a7049));\n outline-offset: -2px;\n}\n\n.trigger:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n/* Trigger content */\n.trigger-content {\n flex: 1;\n min-width: 0;\n display: flex;\n align-items: center;\n min-height: 24px;\n}\n\n/* Label styling - matches NavItem primary-01 mobile */\n.label {\n font-family: var(--typography-primaryfont, 'NeuSans', 'Inter', system-ui, sans-serif);\n font-weight: var(--typography-headingweight, 500);\n font-size: 20px;\n line-height: 1.1;\n letter-spacing: -0.4px;\n color: var(--af-nav-item-primary, var(--af-typography-body-dark, #14343b));\n}\n\n/* Chevron indicator */\n.chevron,\n.chevron-button {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n flex-shrink: 0;\n color: var(--af-nav-item-primary, var(--af-typography-body-dark, #14343b));\n transition: transform var(--motion-duration-slow, 300ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));\n}\n\n.chevron-button {\n background: transparent;\n border: none;\n cursor: pointer;\n padding: 0;\n}\n\n.chevron-button:hover {\n opacity: 0.7;\n}\n\n.chevron.is-open {\n transform: rotate(180deg);\n}\n\n/* Content wrapper - handles animation */\n.content-wrapper {\n overflow: hidden;\n transition: max-height var(--motion-duration-slow, 300ms) var(--motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1));\n}\n\n@media (prefers-reduced-motion: reduce) {\n .chevron,\n .chevron-button,\n .content-wrapper {\n transition-duration: 0.01ms;\n }\n}\n\n.content {\n padding: 0;\n background: var(--af-background-base, white);\n}\n\n/* Disabled state */\n:host(.is-disabled) .trigger {\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n:host(.is-disabled) .trigger:hover {\n background-color: transparent;\n}\n\n/* Open state styling */\n:host(.is-open) .trigger {\n border-bottom-color: transparent;\n}\n\n/* Mobile breakpoint styling */\n:host(.breakpoint-mobile) .trigger {\n padding: 20px 12px;\n}\n\n:host(.breakpoint-mobile) .label {\n font-size: 20px;\n line-height: 1.1;\n letter-spacing: -0.4px;\n}\n\n/* Desktop breakpoint styling */\n:host(.breakpoint-desktop) .trigger {\n padding: 12px;\n}\n\n:host(.breakpoint-desktop) .label {\n font-size: 16px;\n line-height: 20px;\n letter-spacing: 0;\n}\n\n/* Nested content uses different padding */\n:host(.breakpoint-mobile) .content {\n padding-left: 0;\n}\n\n","import { Component, h, Prop, Host, Event, EventEmitter, Element, State, Watch, Method } from '@stencil/core';\n\n/**\n * Navigation accordion item with NavItem-styled trigger.\n * Combines navigation item styling with accordion collapse behavior.\n * \n * @slot trigger - Custom trigger content (optional - uses label if not provided)\n * @slot - The collapsible content (typically NavMenuNest or NavMenu components)\n */\n@Component({\n tag: 'af-nav-accordion-item',\n styleUrl: 'af-nav-accordion-item.css',\n shadow: false,\n scoped: true,\n})\nexport class AfNavAccordionItem {\n @Element() el!: HTMLElement;\n\n /**\n * Unique identifier for this accordion item\n */\n @Prop({ reflect: true }) itemId!: string;\n\n /**\n * Label text for the navigation item trigger\n */\n @Prop() label?: string;\n\n /**\n * Whether this item is currently expanded\n */\n @Prop({ reflect: true, mutable: true }) open: boolean = false;\n\n /**\n * Whether this item is disabled\n */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /**\n * Optional href - if provided, clicking navigates instead of expanding\n * (chevron area would still toggle expansion if both behaviors needed)\n */\n @Prop() href?: string;\n\n /**\n * Breakpoint for styling\n */\n @Prop({ reflect: true }) breakpoint: 'desktop' | 'mobile' = 'mobile';\n\n /**\n * Emitted when the accordion item is toggled\n */\n @Event({ eventName: 'af-nav-accordion-item-toggle' }) navAccordionItemToggle!: EventEmitter<{ itemId: string; open: boolean }>;\n\n @State() contentHeight: number = 0;\n @State() hasTriggerSlot: boolean = false;\n @State() hasContent: boolean = false;\n\n private contentRef?: HTMLElement;\n\n @Watch('open')\n handleOpenChange(newValue: boolean) {\n if (newValue) {\n this.measureContent();\n }\n }\n\n /**\n * Detect whether the host has any default-slot children — i.e. whether\n * this item expands to reveal a sub-menu, or is just a simple link.\n * We check in componentWillLoad (before render) because after render\n * Stencil has appended its own output to the host and this.el.children\n * would include that.\n */\n componentWillLoad() {\n this.hasContent = Array.from(this.el.children).some(\n (child) => !(child as HTMLElement).hasAttribute('slot'),\n );\n }\n\n componentDidLoad() {\n if (this.open) {\n this.measureContent();\n }\n }\n\n /**\n * Programmatically toggle the accordion item\n */\n @Method()\n async toggle() {\n if (!this.disabled && !this.href) {\n this.open = !this.open;\n this.navAccordionItemToggle.emit({ itemId: this.itemId, open: this.open });\n }\n }\n\n private measureContent() {\n if (this.contentRef) {\n this.contentHeight = this.contentRef.scrollHeight;\n }\n }\n\n private handleTriggerClick = (event: MouseEvent) => {\n // If it's a link, let it navigate (unless they clicked the chevron specifically)\n if (this.href) {\n return;\n }\n event.preventDefault();\n this.toggle();\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if ((event.key === 'Enter' || event.key === ' ') && !this.href) {\n event.preventDefault();\n this.toggle();\n }\n };\n\n private handleSlotChange = (event: Event) => {\n const slot = event.target as HTMLSlotElement;\n this.hasTriggerSlot = slot.assignedNodes().length > 0;\n };\n\n render() {\n const contentStyle = {\n maxHeight: this.open ? `${this.contentHeight}px` : '0px'\n };\n\n // Only render the chevron toggle when this item actually has\n // sub-content to expand. A plain href item with no children is a\n // direct link and shouldn't show a disclosure affordance.\n const hasDropdownContent = this.hasContent;\n\n return (\n <Host \n class={{ \n 'is-open': this.open, \n 'is-disabled': this.disabled,\n [`breakpoint-${this.breakpoint}`]: true\n }}\n >\n <div class=\"nav-accordion-item\">\n {/* Trigger */}\n {this.href ? (\n <a\n href={this.href}\n class=\"trigger\"\n aria-expanded={this.open ? 'true' : 'false'}\n aria-controls={`content-${this.itemId}`}\n >\n <div class=\"trigger-content\">\n <slot name=\"trigger\" onSlotchange={this.handleSlotChange}>\n <span class=\"label\">{this.label}</span>\n </slot>\n </div>\n {hasDropdownContent && (\n <button \n class=\"chevron-button\"\n onClick={(e) => { e.preventDefault(); e.stopPropagation(); this.toggle(); }}\n aria-label={this.open ? 'Collapse' : 'Expand'}\n type=\"button\"\n >\n <div class={{ 'chevron': true, 'is-open': this.open }}>\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\">\n <path d=\"M6 9l6 6 6-6\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n </button>\n )}\n </a>\n ) : (\n <button\n class=\"trigger\"\n onClick={this.handleTriggerClick}\n onKeyDown={this.handleKeyDown}\n aria-expanded={this.open ? 'true' : 'false'}\n aria-controls={`content-${this.itemId}`}\n disabled={this.disabled}\n type=\"button\"\n >\n <div class=\"trigger-content\">\n <slot name=\"trigger\" onSlotchange={this.handleSlotChange}>\n <span class=\"label\">{this.label}</span>\n </slot>\n </div>\n {hasDropdownContent && (\n <div class={{ 'chevron': true, 'is-open': this.open }}>\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\">\n <path d=\"M6 9l6 6 6-6\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n )}\n </button>\n )}\n\n {/* Collapsible content */}\n <div\n id={`content-${this.itemId}`}\n class=\"content-wrapper\"\n style={contentStyle}\n aria-hidden={!this.open ? 'true' : 'false'}\n >\n <div class=\"content\" ref={(el) => (this.contentRef = el)}>\n <slot></slot>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"af-stat.entry.esm.js","sources":["src/components/af-stat/af-stat.css?tag=af-stat&encapsulation=shadow","src/components/af-stat/af-stat.tsx"],"sourcesContent":[":host {\n display: block;\n flex: 1 1 0;\n min-width: 0;\n /* Left accent border mirrors the website's stats-row styling. Reads\n the active border colour from whatever theme the ancestor sets. */\n border-left: 2px solid var(--af-background-border-active, var(--colour-brand-soft-clay, #b09670));\n padding-left: var(--space-4, 16px);\n}\n\n.stat {\n display: flex;\n flex-direction: column;\n gap: var(--space-2, 8px);\n min-height: 76px;\n justify-content: center;\n}\n\n/* Nudge the value towards the theme's secondary heading colour for that\n gold/ochre accent on light themes — matches af-testimonial-stat. */\n.stat__value {\n --af-typography-heading-primary: var(--af-typography-heading-secondary, var(--colour-brand-soft-clay, #b09670));\n letter-spacing: -0.88px;\n white-space: nowrap;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * Individual stat — a large value (e.g. \"1B+\") paired with a descriptive label.\n *\n * Intended as a slotted child of `af-stats-row`, but renders standalone too.\n * Colour is inherited from the ancestor theme context (`af-section` /\n * `af-card` / `af-theme-override`) via the `--af-typography-*` tokens that\n * `af-heading` and `af-text` already consume — no theme prop needed here.\n */\n@Component({\n tag: 'af-stat',\n styleUrl: 'af-stat.css',\n shadow: true,\n})\nexport class AfStat {\n /** The statistic headline value (e.g. \"1B+\", \"95%\", \"10+\"). */\n @Prop() value!: string;\n\n /** Description / caption rendered beneath the value. */\n @Prop() label!: string;\n\n render() {\n return (\n <Host>\n <div class=\"stat\">\n <af-heading level=\"2\" class=\"stat__value\">{this.value}</af-heading>\n <af-text variant=\"medium\" class=\"stat__label\">{this.label}</af-text>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,SAAS,GAAG,
|
|
1
|
+
{"version":3,"file":"af-stat.entry.esm.js","sources":["src/components/af-stat/af-stat.css?tag=af-stat&encapsulation=shadow","src/components/af-stat/af-stat.tsx"],"sourcesContent":[":host {\n display: block;\n flex: 1 1 0;\n min-width: 0;\n /* Left accent border mirrors the website's stats-row styling. Reads\n the active border colour from whatever theme the ancestor sets. */\n border-left: 2px solid var(--af-background-border-active, var(--colour-brand-soft-clay, #b09670));\n padding-left: var(--space-4, 16px);\n}\n\n.stat {\n display: flex;\n flex-direction: column;\n gap: var(--space-2, 8px);\n min-height: 76px;\n justify-content: center;\n}\n\n/* Nudge the value towards the theme's secondary heading colour for that\n gold/ochre accent on light themes — matches af-testimonial-stat. */\n.stat__value {\n --af-typography-heading-primary: var(--af-typography-heading-secondary, var(--colour-brand-soft-clay, #b09670));\n letter-spacing: -0.88px;\n white-space: nowrap;\n /* Stat values are a typographic beat — enable proportional lining\n figures and discretionary ligatures so numerals like \"1B+\" align\n on the baseline and sit at the expected optical weight. */\n font-variant-numeric: lining-nums proportional-nums;\n font-feature-settings: 'ss01', 'kern';\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * Individual stat — a large value (e.g. \"1B+\") paired with a descriptive label.\n *\n * Intended as a slotted child of `af-stats-row`, but renders standalone too.\n * Colour is inherited from the ancestor theme context (`af-section` /\n * `af-card` / `af-theme-override`) via the `--af-typography-*` tokens that\n * `af-heading` and `af-text` already consume — no theme prop needed here.\n */\n@Component({\n tag: 'af-stat',\n styleUrl: 'af-stat.css',\n shadow: true,\n})\nexport class AfStat {\n /** The statistic headline value (e.g. \"1B+\", \"95%\", \"10+\"). */\n @Prop() value!: string;\n\n /** Description / caption rendered beneath the value. */\n @Prop() label!: string;\n\n render() {\n return (\n <Host>\n <div class=\"stat\">\n <af-heading level=\"2\" class=\"stat__value\">{this.value}</af-heading>\n <af-text variant=\"medium\" class=\"stat__label\">{this.label}</af-text>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,SAAS,GAAG,shBAAshB;;MCe3hB,MAAM,GAAA,MAAA;;;;IAOjB,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,EAAA,EACf,CAAY,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,GAAG,EAAC,KAAK,EAAC,aAAa,EAAE,EAAA,IAAI,CAAC,KAAK,CAAc,EACnE,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,OAAO,EAAC,QAAQ,EAAC,KAAK,EAAC,aAAa,EAAE,EAAA,IAAI,CAAC,KAAK,CAAW,CAChE,CACD;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"af-testimonial-stat.entry.esm.js","sources":["src/components/af-testimonial-stat/af-testimonial-stat.css?tag=af-testimonial-stat&encapsulation=scoped","src/components/af-testimonial-stat/af-testimonial-stat.tsx"],"sourcesContent":[":host {\n display: block;\n flex: 1;\n min-width: 0;\n}\n\n.stat {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.stat--accent {\n /* Themed active/accent border color */\n border-left: 2px solid var(--af-background-border-active, var(--colour-softclay-800, #8a7049));\n padding-left: 16px;\n min-height: 76px;\n justify-content: center;\n}\n\n/* Stat value - override af-heading to use secondary color */\n.stat-value {\n /* Override the heading color to use secondary (gold/ochre) instead of primary */\n --af-typography-heading-primary: var(--af-typography-heading-secondary, var(--colour-brand-soft-clay, #b09670));\n letter-spacing: -0.88px;\n white-space: nowrap;\n}\n\n/* Description - override af-text to use body-dark for emphasis */\n.stat-description {\n --af-typography-body-default: var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343b));\n overflow: hidden;\n text-overflow: ellipsis;\n}","import { Component, Prop, h, Host } from '@stencil/core';\n\n@Component({\n tag: 'af-testimonial-stat',\n styleUrl: 'af-testimonial-stat.css',\n shadow: false,\n scoped: true,\n})\nexport class AfTestimonialStat {\n /**\n * The statistic value (e.g., \"95%\", \"10×\", \"120,000\")\n */\n @Prop() value!: string;\n\n /**\n * Description text for the statistic\n */\n @Prop() description!: string;\n\n /**\n * Whether to show left accent border\n */\n @Prop() accentBorder: boolean = false;\n\n render() {\n return (\n <Host>\n <div class={`stat ${this.accentBorder ? 'stat--accent' : ''}`}>\n {/* Stat value uses secondary heading color via CSS override */}\n <af-heading level={2} class=\"stat-value\">{this.value}</af-heading>\n {/* Description uses af-text for proper theming */}\n <af-text variant=\"medium\" class=\"stat-description\">{this.description}</af-text>\n </div>\n </Host>\n );\n }\n}\n\n\n"],"names":[],"mappings":";;AAAA,MAAM,oBAAoB,GAAG
|
|
1
|
+
{"version":3,"file":"af-testimonial-stat.entry.esm.js","sources":["src/components/af-testimonial-stat/af-testimonial-stat.css?tag=af-testimonial-stat&encapsulation=scoped","src/components/af-testimonial-stat/af-testimonial-stat.tsx"],"sourcesContent":[":host {\n display: block;\n flex: 1;\n min-width: 0;\n}\n\n.stat {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.stat--accent {\n /* Themed active/accent border color */\n border-left: 2px solid var(--af-background-border-active, var(--colour-softclay-800, #8a7049));\n padding-left: 16px;\n min-height: 76px;\n justify-content: center;\n}\n\n/* Stat value - override af-heading to use secondary color */\n.stat-value {\n /* Override the heading color to use secondary (gold/ochre) instead of primary */\n --af-typography-heading-primary: var(--af-typography-heading-secondary, var(--colour-brand-soft-clay, #b09670));\n letter-spacing: -0.88px;\n white-space: nowrap;\n /* Lining figures so \"1B+\" / \"95%\" hit a consistent baseline and\n optical weight, matching af-stat. */\n font-variant-numeric: lining-nums proportional-nums;\n font-feature-settings: 'ss01', 'kern';\n}\n\n/* Description - override af-text to use body-dark for emphasis */\n.stat-description {\n --af-typography-body-default: var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343b));\n overflow: hidden;\n text-overflow: ellipsis;\n}","import { Component, Prop, h, Host } from '@stencil/core';\n\n@Component({\n tag: 'af-testimonial-stat',\n styleUrl: 'af-testimonial-stat.css',\n shadow: false,\n scoped: true,\n})\nexport class AfTestimonialStat {\n /**\n * The statistic value (e.g., \"95%\", \"10×\", \"120,000\")\n */\n @Prop() value!: string;\n\n /**\n * Description text for the statistic\n */\n @Prop() description!: string;\n\n /**\n * Whether to show left accent border\n */\n @Prop() accentBorder: boolean = false;\n\n render() {\n return (\n <Host>\n <div class={`stat ${this.accentBorder ? 'stat--accent' : ''}`}>\n {/* Stat value uses secondary heading color via CSS override */}\n <af-heading level={2} class=\"stat-value\">{this.value}</af-heading>\n {/* Description uses af-text for proper theming */}\n <af-text variant=\"medium\" class=\"stat-description\">{this.description}</af-text>\n </div>\n </Host>\n );\n }\n}\n\n\n"],"names":[],"mappings":";;AAAA,MAAM,oBAAoB,GAAG,uwBAAuwB;;MCQvxB,iBAAiB,GAAA,MAAA;AAN9B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAiBE;;AAEG;AACK,QAAA,IAAY,CAAA,YAAA,GAAY,KAAK;AActC;IAZC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,QAAQ,IAAI,CAAC,YAAY,GAAG,cAAc,GAAG,EAAE,CAAE,CAAA,EAAA,EAE3D,CAAY,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAC,EAAE,KAAK,EAAC,YAAY,EAAE,EAAA,IAAI,CAAC,KAAK,CAAc,EAElE,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,OAAO,EAAC,QAAQ,EAAC,KAAK,EAAC,kBAAkB,EAAE,EAAA,IAAI,CAAC,WAAW,CAAW,CAC3E,CACD;;;;;;;"}
|
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-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
|
+
: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-lift:0 12px 32px -8px rgba(20, 52, 59, 0.18), 0 4px 10px -4px rgba(20, 52, 59, 0.08);--shadow-navbar:0 4px 24px rgba(20, 52, 59, 0.12);--status-ok:#3E8F6E;--status-issue:#B94A3B;--motion-duration-fast:150ms;--motion-duration-base:200ms;--motion-duration-slow:300ms;--motion-easing-standard:cubic-bezier(0.4, 0, 0.2, 1);--motion-easing-emphasized:cubic-bezier(0.2, 0, 0, 1);--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 t}from"./p-
|
|
1
|
+
import{p as e,g as a,b as t}from"./p-C4WBekD2.js";export{s as setNonce}from"./p-C4WBekD2.js";var i=()=>{const a=import.meta.url;const t={};if(a!==""){t.resourcesUrl=new URL(".",a).href}return e(t)};i().then((async e=>{await a();return t([["p-7d08db58",[[262,"af-hero",{variant:[513],heading:[1],description:[1],floatNavbar:[516,"float-navbar"],topPad:[1,"top-pad"],maxWidth:[2,"max-width"],maskImage:[4,"mask-image"]}]]],["p-432ee0e3",[[262,"af-icon-text",{icon:[1],headingSize:[2,"heading-size"],orientation:[1],iconSize:[1,"icon-size"]}]]],["p-19dc4331",[[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-d34da6c0",[[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-2586fbb8",[[262,"af-illustrated-card",{theme:[1],breakpoint:[1],cardSize:[1,"card-size"]}]]],["p-d6b8c3b4",[[262,"af-numbered-stepper-item",{index:[514]}]]],["p-750063ab",[[257,"af-stat",{value:[1],label:[1]}]]],["p-9ca72e02",[[258,"af-testimonial-stat",{value:[1],description:[1],accentBorder:[4,"accent-border"]}]]],["p-587fd0fa",[[262,"af-video-container",{videoThumbnailUrl:[1,"video-thumbnail-url"],videoAlt:[1,"video-alt"],videoUrl:[1,"video-url"]}]]],["p-9b115359",[[262,"af-feature-grid",{columns:[2],mobileLayout:[1,"mobile-layout"],scrollProgress:[32]},null,{mobileLayout:["onMobileLayoutChange"]}]]],["p-43a0286a",[[262,"af-grid-callout",{imageSrc:[1,"image-src"],imageAlt:[1,"image-alt"],imagePosition:[1,"image-position"],columns:[2],headingSize:[2,"heading-size"]}]]],["p-c4fd7d48",[[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-dd4c8640",[[262,"af-split-section",{topTheme:[1,"top-theme"],bottomTheme:[1,"bottom-theme"],padding:[1],container:[4]}]]],["p-d9913985",[[262,"af-testimonial-carousel",{currentIndex:[32],isAnimating:[32],testimonialCount:[32]},[[0,"afNavPrev","handleNavPrev"],[0,"afNavNext","handleNavNext"]]]]],["p-42c4d7b1",[[262,"af-text-image",{imagePosition:[1,"image-position"],imageProportion:[1,"image-proportion"],src:[1],alt:[1],showSecondLockup:[4,"show-second-lockup"]}]]],["p-adabec15",[[262,"af-accordion",{mode:[1],value:[1025],defaultValue:[1,"default-value"],internalValue:[32]},[[0,"af-accordion-toggle","handleItemToggle"]],{value:["handleValueChange"]}]]],["p-e0619222",[[257,"af-accordion-item",{itemId:[513,"item-id"],open:[1540],disabled:[516],contentHeight:[32],toggle:[64]},null,{open:["handleOpenChange"]}]]],["p-1902ed20",[[257,"af-button-group",{direction:[1],gap:[1]}]]],["p-05072f90",[[257,"af-center",{axis:[1],inline:[4],minHeight:[1,"min-height"]}]]],["p-9e19a477",[[257,"af-checkbox",{checked:[1540],indeterminate:[516],disabled:[516],name:[1],value:[1]}]]],["p-7ce2b434",[[262,"af-client-carousel",{theme:[1],rows:[2],mode:[1]}]]],["p-b82fc7f1",[[257,"af-color-swatch",{color:[1],name:[1],size:[1]}]]],["p-14bd7903",[[262,"af-contact-item",{label:[1],value:[1]}]]],["p-6986f604",[[257,"af-divider",{orientation:[1],spacing:[1]}]]],["p-d923549d",[[262,"af-feature-accordion",{heading:[1],items:[1],cycleInterval:[2,"cycle-interval"],autoCycle:[4,"auto-cycle"],expandedIndex:[32],timerProgress:[32]},null,{autoCycle:["handleAutoCycleChange"]}]]],["p-67a27eaf",[[257,"af-fieldset",{legend:[1],orientation:[1],disabled:[516]}]]],["p-b8ea57a9",[[262,"af-footer",{copyrightText:[1,"copyright-text"],statusText:[1,"status-text"],statusUrl:[1,"status-url"],systemsOperational:[4,"systems-operational"],showStatus:[4,"show-status"]}]]],["p-9963bec0",[[262,"af-footer-column",{heading:[1]}]]],["p-7eca844d",[[262,"af-footer-link",{href:[1],external:[4]}]]],["p-ce77f08f",[[257,"af-grid",{columns:[2],columnsLg:[2,"columns-lg"],columnsMd:[2,"columns-md"],columnsSm:[2,"columns-sm"],gap:[1],align:[1]}]]],["p-95b49b45",[[257,"af-inline",{gap:[1],align:[1],justify:[1],wrap:[4]}]]],["p-7013570d",[[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-dd0cd57e",[[257,"af-logo-well"]]],["p-ec042bc4",[[262,"af-nav-accordion",{mode:[1],breakpoint:[513],value:[1025],internalValue:[32]},[[0,"af-nav-accordion-item-toggle","handleItemToggle"]]]]],["p-ea150b3d",[[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-df6c7170",[[258,"af-nav-card",{heading:[1],href:[1],imageSrc:[1,"image-src"],imageAlt:[1,"image-alt"],isHovered:[32]}]]],["p-2a8441cb",[[262,"af-nav-menu",{heading:[1],breakpoint:[1],showBorder:[4,"show-border"],cardStyle:[516,"card-style"]}]]],["p-77ec01ee",[[262,"af-nav-menu-nest",{type:[1],breakpoint:[1],showSidebarBorder:[516,"show-sidebar-border"]}]]],["p-3238f8e8",[[262,"af-numbered-stepper",{orientation:[1]}]]],["p-26a6d9a7",[[257,"af-paperclip-decoration",{width:[1],height:[1],opacity:[2],fill:[1]}]]],["p-bc77706d",[[257,"af-radio",{checked:[1540],disabled:[516],name:[513],value:[1]}]]],["p-479a300e",[[257,"af-show",{above:[1],below:[1]}]]],["p-a7b51bb6",[[262,"af-social-link",{href:[1],label:[1],icon:[1]}]]],["p-fff252df",[[257,"af-spacer",{size:[1],flex:[4],axis:[1]}]]],["p-b65cf4c3",[[257,"af-stack",{direction:[1],gap:[1],align:[1],justify:[1],wrap:[4]}]]],["p-6b7fcb18",[[262,"af-stats-row"]]],["p-7c9683d8",[[262,"af-stepper",{orientation:[1]}]]],["p-e90a3892",[[262,"af-stepper-step",{index:[514]}]]],["p-27469df6",[[257,"af-switch",{active:[1540],disabled:[516],name:[1],value:[1]}]]],["p-ac45df4b",[[257,"af-tab",{label:[1],active:[516],disabled:[516],shape:[513],displayIcon:[4,"display-icon"],displayNumber:[4,"display-number"],value:[1]}]]],["p-d06ae9cd",[[257,"af-tab-bar",{shape:[513],breakpoint:[513]},[[0,"keydown","handleKeyDown"]]]]],["p-75443f08",[[257,"af-tag",{size:[1],variant:[1],href:[1]}]]],["p-255a8254",[[262,"af-text-image-nest",{layout:[1]}]]],["p-d647ae06",[[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-44e976ee",[[262,"af-theme-override",{theme:[1]}]]],["p-3dd90f46",[[257,"af-visually-hidden",{focusable:[4]}]]],["p-9610cd3c",[[258,"af-icon-box",{icon:[1],size:[1]}]]],["p-bac968a1",[[262,"af-section",{padding:[1],theme:[1],container:[4]}]]],["p-4f15b8f0",[[257,"af-aspect-ratio",{ratio:[1]}]]],["p-08a42935",[[257,"af-icon-button",{variant:[513],size:[1],disabled:[4],href:[1],type:[1],ariaLabel:[1,"aria-label"]}]]],["p-f9ecbde8",[[258,"af-image",{src:[1],alt:[1],shape:[1]}]]],["p-f7fc76d2",[[257,"af-number-badge",{number:[2],variant:[1],size:[2]}]]],["p-5885ebd3",[[257,"af-button",{variant:[513],size:[1],disabled:[4],type:[1],href:[1],hasIconLeft:[32],hasIconRight:[32]}]]],["p-5f3419c3",[[262,"af-card",{theme:[1],stretch:[516],interactive:[516]}]]],["p-57fcfd78",[[258,"af-progress-line",{progress:[2],orientation:[1]}]]],["p-4ccc3147",[[257,"af-container",{maxWidth:[1,"max-width"]}]]],["p-7640c285",[[257,"af-icon",{name:[1],size:[2],label:[1]}]]],["p-3c6790f8",[[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-logo"],[257,"af-heading",{level:[1],align:[1]}],[257,"af-text",{variant:[1],align:[1],as:[1]}]]],["p-67e8c6f6",[[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-3c6790f8.entry.js";export{af_color_swatch as AfColorSwatch}from"./p-b82fc7f1.entry.js";export{af_container as AfContainer}from"./p-4ccc3147.entry.js";export{af_aspect_ratio as AfAspectRatio}from"./p-4f15b8f0.entry.js";export{af_button as AfButton}from"./p-5885ebd3.entry.js";export{af_icon_button as AfIconButton}from"./p-08a42935.entry.js";export{af_button_group as AfButtonGroup}from"./p-1902ed20.entry.js";export{af_typography_lockup as AfTypographyLockup}from"./p-67e8c6f6.entry.js";export{af_checkbox as AfCheckbox}from"./p-9e19a477.entry.js";export{af_radio as AfRadio}from"./p-bc77706d.entry.js";export{af_switch as AfSwitch}from"./p-27469df6.entry.js";export{af_fieldset as AfFieldset}from"./p-67a27eaf.entry.js";export{af_input as AfInput}from"./p-7013570d.entry.js";export{af_textarea as AfTextarea}from"./p-d647ae06.entry.js";export{af_tag as AfTag}from"./p-75443f08.entry.js";export{af_tab as AfTab}from"./p-ac45df4b.entry.js";export{af_tab_bar as AfTabBar}from"./p-d06ae9cd.entry.js";export{af_feature_card as AfFeatureCard}from"./p-d34da6c0.entry.js";export{af_illustrated_card as AfIllustratedCard}from"./p-2586fbb8.entry.js";export{af_hero as AfHero}from"./p-7d08db58.entry.js";import"./p-C4WBekD2.js";
|
|
2
2
|
//# sourceMappingURL=index.esm.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as t,h as s,H as e}from"./p-
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as t,h as s,H as e}from"./p-C4WBekD2.js";const i=":host{display:flex;box-sizing:border-box}:host([hidden]){display:none}";const o=class{constructor(s){t(this,s);this.axis="both";this.inline=false}render(){const t={display:this.inline?"inline-flex":"flex"};if(this.axis==="horizontal"||this.axis==="both"){t.justifyContent="center"}if(this.axis==="vertical"||this.axis==="both"){t.alignItems="center"}if(this.minHeight){t.minHeight=this.minHeight}return s(e,{key:"0b93a207374e7665f06187ae2f8837f251ea1312",style:t},s("slot",{key:"c5d0fb0f3a37effb8e8cd466bd13d86c88958229"}))}};o.style=i;export{o as af_center};
|
|
2
|
+
//# sourceMappingURL=p-05072f90.entry.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r,h as a,H as t}from"./p-C4WBekD2.js";const o=':host{display:inline-block}:host([variant="secondary"]){color:var(--af-button-secondary-icon, var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343B)))}:host([variant="primary"]){color:var(--af-button-primary-icon, var(--colour-brand-inkwell, #14343B))}:host([variant="tertiary"]){color:var(--af-button-ghost-icon, var(--colour-brand-inkwell, #14343B))}.icon-button{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;transition:background-color var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),\n border-color var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),\n color var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),\n opacity var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),\n transform var(--motion-duration-fast, 150ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));border:1px solid transparent;box-sizing:border-box;flex-shrink:0;text-decoration:none;padding:0;will-change:transform}@media (prefers-reduced-motion: reduce){.icon-button{transition-duration:0.01ms}}.size-large{width:72px;height:72px;padding:24px}.size-large .icon{width:24px;height:24px}.size-medium{width:48px;height:48px;padding:12px}.size-medium .icon{width:24px;height:24px}.size-small{width:36px;height:36px;padding:8px}.size-small .icon{width:20px;height:20px}.icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:inherit}.icon ::slotted(*){width:100%;height:100%;color:inherit}.variant-primary{background:var(--af-button-primary-bg, var(--colour-brand-ice, #A6FFFB));border-color:var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343B));color:var(--af-button-primary-text, var(--colour-brand-inkwell, #14343B))}.variant-primary:hover:not(.disabled){background:var(--af-button-primary-bg-hover, #95e6e2)}.variant-primary:active:not(.disabled){background:var(--af-button-primary-bg-hover, #95e6e2);transform:translateY(1px)}.variant-secondary{background:var(--af-button-secondary-bg, transparent);border-color:var(--af-button-secondary-stroke, currentColor);color:var(--af-button-secondary-text, var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343B)))}.variant-secondary:hover:not(.disabled){background:var(--af-button-secondary-bg-hover, rgba(128, 128, 128, 0.1))}.variant-secondary:active:not(.disabled){background:var(--af-button-secondary-bg-hover, rgba(128, 128, 128, 0.1));transform:translateY(1px)}.variant-tertiary{background:transparent;border-color:transparent;color:var(--af-button-ghost-text, var(--colour-brand-inkwell, #14343B))}.variant-tertiary:hover:not(.disabled){opacity:0.8}.variant-tertiary:active:not(.disabled){opacity:0.6}.disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}button.icon-button{background:none;border:none;padding:0;font:inherit;color:inherit;cursor:pointer}button.icon-button.variant-primary{background:var(--af-button-primary-bg, var(--colour-brand-ice, #A6FFFB));border:1px solid var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343B))}button.icon-button.variant-secondary{background:var(--af-button-secondary-bg, transparent);border:1px solid var(--af-button-secondary-stroke, currentColor);color:var(--af-button-secondary-text, var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343B)))}button.icon-button.variant-tertiary{background:transparent;border:1px solid transparent}';const n=class{constructor(a){r(this,a);this.variant="primary";this.size="medium";this.disabled=false;this.type="button"}render(){const r={"icon-button":true,[`variant-${this.variant}`]:true,[`size-${this.size}`]:true,disabled:this.disabled};const o=a("span",{class:"icon"},a("slot",null));if(this.href&&!this.disabled){return a(t,null,a("a",{href:this.href,class:r,"aria-label":this.ariaLabel},o))}return a(t,null,a("button",{type:this.type,disabled:this.disabled,class:r,"aria-label":this.ariaLabel},o))}};n.style=o;export{n as af_icon_button};
|
|
2
|
+
//# sourceMappingURL=p-08a42935.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["registerInstance","h","Host","afIconButtonCss","AfIconButton","constructor","hostRef","this","variant","size","disabled","type","render","classes","content","class","href","ariaLabel","style"],"sources":["0"],"mappings":"OAAcA,OAAkBC,OAAQC,MAAY,kBAEpD,MAAMC,EAAkB,
|
|
1
|
+
{"version":3,"names":["registerInstance","h","Host","afIconButtonCss","AfIconButton","constructor","hostRef","this","variant","size","disabled","type","render","classes","content","class","href","ariaLabel","style"],"sources":["0"],"mappings":"OAAcA,OAAkBC,OAAQC,MAAY,kBAEpD,MAAMC,EAAkB,i+GAExB,MAAMC,EAAe,MACjB,WAAAC,CAAYC,GACRN,EAAiBO,KAAMD,GAOvBC,KAAKC,QAAU,UAIfD,KAAKE,KAAO,SAIZF,KAAKG,SAAW,MAIhBH,KAAKI,KAAO,QAChB,CACA,MAAAC,GACI,MAAMC,EAAU,CACZ,cAAe,KACf,CAAC,WAAWN,KAAKC,WAAY,KAC7B,CAAC,QAAQD,KAAKE,QAAS,KACvBC,SAAYH,KAAKG,UAErB,MAAMI,EAAWb,EAAE,OAAQ,CAAEc,MAAO,QAAUd,EAAE,OAAQ,OACxD,GAAIM,KAAKS,OAAST,KAAKG,SAAU,CAC7B,OAAQT,EAAEC,EAAM,KAAMD,EAAE,IAAK,CAAEe,KAAMT,KAAKS,KAAMD,MAAOF,EAAS,aAAcN,KAAKU,WAAaH,GACpG,CACA,OAAQb,EAAEC,EAAM,KAAMD,EAAE,SAAU,CAAEU,KAAMJ,KAAKI,KAAMD,SAAUH,KAAKG,SAAUK,MAAOF,EAAS,aAAcN,KAAKU,WAAaH,GAClI,GAEJV,EAAac,MAAQf,SAEZC","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as t,h as a,H as c}from"./p-
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as t,h as a,H as c}from"./p-C4WBekD2.js";const e=".sc-af-contact-item-h{display:block}.contact-item.sc-af-contact-item{display:flex;flex-direction:column;gap:4px}.contact-item__label.sc-af-contact-item{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;font-weight:600;color:var(--colour-tints-mistGreen-200, #C6D5D1);margin:0}.contact-item__value.sc-af-contact-item{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;font-weight:400;color:rgba(198, 213, 209, 0.7);margin:0}";const s=class{constructor(a){t(this,a);this.label="";this.value=""}render(){return a(c,{key:"96c81142044b30c89d0b57ca51796bb11b20a939"},a("div",{key:"91e097ce9e31a20896a2df199c905a848a35065b",class:"contact-item"},this.label&&a("h5",{key:"8ed3a89a50249ca99f50637ec1486b0def63a057",class:"contact-item__label"},this.label),this.value&&a("p",{key:"1503e602ac07c85a88b612eb600f07c4cb152e00",class:"contact-item__value"},this.value),a("slot",{key:"700f83924b662a99f5450a97b79b48c9b21e9cd0"})))}};s.style=e;export{s as af_contact_item};
|
|
2
|
+
//# sourceMappingURL=p-14bd7903.entry.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as t,h as o,H as i}from"./p-
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as t,h as o,H as i}from"./p-C4WBekD2.js";const e=":host{display:inline-block}.button-group{display:inline-flex;align-items:center;box-sizing:border-box}.direction-horizontal{flex-direction:row}.direction-vertical{flex-direction:column}::slotted(*){flex-shrink:0}";const r=class{constructor(o){t(this,o);this.direction="horizontal";this.gap="8px"}render(){const t={"button-group":true,[`direction-${this.direction}`]:true};return o(i,{key:"abd684c0b9a003fa1c8cad9f0f37a450d068c24a"},o("div",{key:"a4f5b89ac0fab2f2a853d10b8dd8f7b20e98cbe7",class:t,style:{gap:this.gap}},o("slot",{key:"764d1d9b7b1283452c75b8a69adf6ff34c8b26a2"})))}};r.style=e;export{r as af_button_group};
|
|
2
|
+
//# sourceMappingURL=p-1902ed20.entry.js.map
|