@affinda/wc 0.4.1 → 0.4.2
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-heading.af-logo.af-nav-item.af-navbar.af-text.entry.esm.js.map +1 -1
- package/dist/affinda/affinda.esm.js +1 -1
- package/dist/affinda/index.esm.js +1 -1
- package/dist/affinda/{p-e90a3892.entry.js → p-02427605.entry.js} +2 -2
- package/dist/affinda/{p-57fcfd78.entry.js → p-0254b263.entry.js} +2 -2
- package/dist/affinda/{p-7ce2b434.entry.js → p-09e202d1.entry.js} +2 -2
- package/dist/affinda/{p-ea150b3d.entry.js → p-15eac0d5.entry.js} +2 -2
- package/dist/affinda/{p-bac968a1.entry.js → p-17c2999b.entry.js} +2 -2
- package/dist/affinda/{p-479a300e.entry.js → p-1aa795c7.entry.js} +2 -2
- package/dist/affinda/p-1efa4787.entry.js +2 -0
- package/dist/affinda/p-27026c90.entry.js +2 -0
- package/dist/affinda/p-283a9dec.entry.js +2 -0
- package/dist/affinda/{p-7013570d.entry.js → p-2d5eb5ac.entry.js} +2 -2
- package/dist/affinda/{p-26a6d9a7.entry.js → p-369dfdd8.entry.js} +2 -2
- package/dist/affinda/{p-44e976ee.entry.js → p-3a7afe33.entry.js} +2 -2
- package/dist/affinda/p-3b429a16.entry.js +2 -0
- package/dist/affinda/{p-f7fc76d2.entry.js → p-3cd4edd0.entry.js} +2 -2
- package/dist/affinda/{p-2586fbb8.entry.js → p-42c69bc9.entry.js} +2 -2
- package/dist/affinda/{p-95b49b45.entry.js → p-4f422489.entry.js} +2 -2
- package/dist/affinda/{p-f9ecbde8.entry.js → p-4f731d31.entry.js} +2 -2
- package/dist/affinda/{p-6b7fcb18.entry.js → p-4ff626de.entry.js} +2 -2
- package/dist/affinda/p-5e01b103.entry.js +2 -0
- package/dist/affinda/{p-3238f8e8.entry.js.map → p-5e01b103.entry.js.map} +1 -1
- package/dist/affinda/{p-a7b51bb6.entry.js → p-606159d2.entry.js} +2 -2
- package/dist/affinda/{p-fff252df.entry.js → p-62eb01fa.entry.js} +2 -2
- package/dist/affinda/{p-3c6790f8.entry.js → p-646b73fb.entry.js} +2 -2
- package/dist/affinda/{p-3c6790f8.entry.js.map → p-646b73fb.entry.js.map} +1 -1
- package/dist/affinda/{p-d647ae06.entry.js → p-64f24ab4.entry.js} +2 -2
- package/dist/affinda/{p-750063ab.entry.js → p-6898d4bd.entry.js} +2 -2
- package/dist/affinda/{p-9ca72e02.entry.js → p-6949fbdf.entry.js} +2 -2
- package/dist/affinda/{p-d06ae9cd.entry.js → p-6de54e73.entry.js} +2 -2
- package/dist/affinda/p-6df7b689.entry.js +2 -0
- package/dist/affinda/{p-c4fd7d48.entry.js → p-73de3aa7.entry.js} +2 -2
- package/dist/affinda/{p-e0619222.entry.js → p-78941fec.entry.js} +2 -2
- package/dist/affinda/{p-67e8c6f6.entry.js → p-7eb0875d.entry.js} +2 -2
- package/dist/affinda/{p-7c9683d8.entry.js → p-7faa3fb9.entry.js} +2 -2
- package/dist/affinda/{p-67a27eaf.entry.js → p-8a2cbcf0.entry.js} +2 -2
- package/dist/affinda/{p-2a8441cb.entry.js → p-8eb60b77.entry.js} +2 -2
- package/dist/affinda/{p-9610cd3c.entry.js → p-8fe10b18.entry.js} +2 -2
- package/dist/affinda/{p-ac45df4b.entry.js → p-91b71a8f.entry.js} +2 -2
- package/dist/affinda/p-972984a9.entry.js +2 -0
- package/dist/affinda/p-988fb256.entry.js +2 -0
- package/dist/affinda/{p-d923549d.entry.js → p-9dfb5fab.entry.js} +2 -2
- package/dist/affinda/{p-27469df6.entry.js → p-a326d8f6.entry.js} +2 -2
- package/dist/affinda/{p-9e19a477.entry.js → p-a35ab849.entry.js} +2 -2
- package/dist/affinda/{p-d9913985.entry.js → p-a70ce66f.entry.js} +2 -2
- package/dist/affinda/{p-7eca844d.entry.js → p-aa9c2609.entry.js} +2 -2
- package/dist/affinda/{p-587fd0fa.entry.js → p-b13c1438.entry.js} +2 -2
- package/dist/affinda/{p-d6b8c3b4.entry.js → p-b2a41a48.entry.js} +2 -2
- package/dist/affinda/{p-9b115359.entry.js → p-b69bce30.entry.js} +2 -2
- package/dist/affinda/{p-19dc4331.entry.js → p-bc1088a7.entry.js} +2 -2
- package/dist/affinda/{p-255a8254.entry.js → p-bdb3e590.entry.js} +2 -2
- package/dist/affinda/{p-ce77f08f.entry.js → p-c0f71971.entry.js} +2 -2
- package/dist/affinda/{p-9b9e81cf.entry.js → p-c2c16447.entry.js} +2 -2
- package/dist/affinda/{p-75443f08.entry.js → p-cebfc8a9.entry.js} +2 -2
- package/dist/affinda/p-d0fdef08.entry.js +2 -0
- package/dist/affinda/{p-adabec15.entry.js.map → p-d0fdef08.entry.js.map} +1 -1
- package/dist/affinda/{p-5f3419c3.entry.js → p-d12d33c8.entry.js} +2 -2
- package/dist/affinda/{p-77ec01ee.entry.js → p-d275fb5d.entry.js} +2 -2
- package/dist/affinda/{p-bc77706d.entry.js → p-d40f8d18.entry.js} +2 -2
- package/dist/affinda/{p-dd0cd57e.entry.js → p-d9ff321b.entry.js} +2 -2
- package/dist/affinda/{p-b8ea57a9.entry.js → p-db7eb209.entry.js} +2 -2
- package/dist/affinda/{p-3dd90f46.entry.js → p-dd933272.entry.js} +2 -2
- package/dist/affinda/{p-dd4c8640.entry.js → p-f5b4923f.entry.js} +2 -2
- package/dist/affinda/{p-6986f604.entry.js → p-f76ef563.entry.js} +2 -2
- package/dist/cjs/af-accordion-item.cjs.entry.js +1 -1
- package/dist/cjs/af-accordion.cjs.entry.js +1 -1
- package/dist/cjs/af-button-group.cjs.entry.js +1 -1
- package/dist/cjs/af-card.cjs.entry.js +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-contact-item.cjs.entry.js +1 -1
- package/dist/cjs/af-divider.cjs.entry.js +1 -1
- package/dist/cjs/af-feature-accordion.cjs.entry.js +2 -2
- package/dist/cjs/af-feature-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.cjs.entry.js +2 -2
- package/dist/cjs/af-heading.af-logo.af-nav-item.af-navbar.af-text.entry.cjs.js.map +1 -1
- package/dist/cjs/af-heading_5.cjs.entry.js +2 -2
- package/dist/cjs/af-hero.cjs.entry.js +2 -2
- package/dist/cjs/af-icon-box.cjs.entry.js +1 -1
- package/dist/cjs/af-icon-text.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.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 +2 -2
- package/dist/cjs/af-radio.cjs.entry.js +1 -1
- package/dist/cjs/af-section.cjs.entry.js +2 -2
- 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 +2 -2
- package/dist/cjs/af-stack.cjs.entry.js +1 -1
- package/dist/cjs/af-stat.cjs.entry.js +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 +2 -2
- package/dist/cjs/af-testimonial-carousel.cjs.entry.js +1 -1
- package/dist/cjs/af-testimonial-stat.cjs.entry.js +1 -1
- package/dist/cjs/af-testimonial.cjs.entry.js +2 -2
- package/dist/cjs/af-text-image-nest.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/collection/components/af-accordion/af-accordion.js +1 -1
- package/dist/collection/components/af-accordion-item/af-accordion-item.js +1 -1
- package/dist/collection/components/af-button-group/af-button-group.js +1 -1
- package/dist/collection/components/af-card/af-card.js +1 -1
- package/dist/collection/components/af-center/af-center.js +1 -1
- package/dist/collection/components/af-checkbox/af-checkbox.js +1 -1
- package/dist/collection/components/af-client-carousel/af-client-carousel.js +1 -1
- package/dist/collection/components/af-contact-item/af-contact-item.js +1 -1
- package/dist/collection/components/af-divider/af-divider.js +1 -1
- package/dist/collection/components/af-feature-accordion/af-feature-accordion.js +2 -2
- package/dist/collection/components/af-feature-grid/af-feature-grid.js +1 -1
- package/dist/collection/components/af-fieldset/af-fieldset.js +1 -1
- package/dist/collection/components/af-footer/af-footer.js +1 -1
- package/dist/collection/components/af-footer-column/af-footer-column.js +1 -1
- package/dist/collection/components/af-footer-link/af-footer-link.js +1 -1
- package/dist/collection/components/af-grid/af-grid.js +2 -2
- package/dist/collection/components/af-hero/af-hero.js +2 -2
- package/dist/collection/components/af-icon-box/af-icon-box.js +1 -1
- package/dist/collection/components/af-icon-text/af-icon-text.js +1 -1
- package/dist/collection/components/af-illustrated-card/af-illustrated-card.js +1 -1
- package/dist/collection/components/af-image/af-image.js +1 -1
- package/dist/collection/components/af-in-page-banner/af-in-page-banner.js +1 -1
- package/dist/collection/components/af-inline/af-inline.js +1 -1
- package/dist/collection/components/af-input/af-input.js +1 -1
- package/dist/collection/components/af-logo/af-logo.js +1 -1
- package/dist/collection/components/af-logo-well/af-logo-well.js +1 -1
- package/dist/collection/components/af-nav-accordion/af-nav-accordion.js +1 -1
- package/dist/collection/components/af-nav-accordion-item/af-nav-accordion-item.js +2 -2
- package/dist/collection/components/af-nav-menu/af-nav-menu.js +1 -1
- package/dist/collection/components/af-nav-menu-nest/af-nav-menu-nest.js +1 -1
- package/dist/collection/components/af-navbar/af-navbar.js +1 -1
- package/dist/collection/components/af-navbar/af-navbar.js.map +1 -1
- package/dist/collection/components/af-number-badge/af-number-badge.js +1 -1
- package/dist/collection/components/af-numbered-stepper/af-numbered-stepper.js +1 -1
- package/dist/collection/components/af-numbered-stepper-item/af-numbered-stepper-item.js +1 -1
- package/dist/collection/components/af-paperclip-decoration/af-paperclip-decoration.js +1 -1
- package/dist/collection/components/af-progress-line/af-progress-line.js +2 -2
- package/dist/collection/components/af-radio/af-radio.js +1 -1
- package/dist/collection/components/af-section/af-section.js +2 -2
- package/dist/collection/components/af-show/af-show.js +1 -1
- package/dist/collection/components/af-social-link/af-social-link.js +1 -1
- package/dist/collection/components/af-spacer/af-spacer.js +1 -1
- package/dist/collection/components/af-split-section/af-split-section.js +2 -2
- package/dist/collection/components/af-stack/af-stack.js +1 -1
- package/dist/collection/components/af-stat/af-stat.js +1 -1
- package/dist/collection/components/af-stats-row/af-stats-row.js +1 -1
- package/dist/collection/components/af-stepper/af-stepper.js +1 -1
- package/dist/collection/components/af-stepper-step/af-stepper-step.js +1 -1
- package/dist/collection/components/af-switch/af-switch.js +1 -1
- package/dist/collection/components/af-tab/af-tab.js +1 -1
- package/dist/collection/components/af-tab-bar/af-tab-bar.js +1 -1
- package/dist/collection/components/af-tag/af-tag.js +2 -2
- package/dist/collection/components/af-testimonial/af-testimonial.js +2 -2
- package/dist/collection/components/af-testimonial-carousel/af-testimonial-carousel.js +1 -1
- package/dist/collection/components/af-testimonial-stat/af-testimonial-stat.js +1 -1
- package/dist/collection/components/af-text-image-nest/af-text-image-nest.js +1 -1
- package/dist/collection/components/af-textarea/af-textarea.js +1 -1
- package/dist/collection/components/af-theme-override/af-theme-override.js +1 -1
- package/dist/collection/components/af-typography-lockup/af-typography-lockup.js +1 -1
- package/dist/collection/components/af-video-container/af-video-container.js +1 -1
- package/dist/collection/components/af-visually-hidden/af-visually-hidden.js +1 -1
- package/dist/components/af-accordion-item.js +1 -1
- package/dist/components/af-accordion.js +1 -1
- package/dist/components/af-button-group.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-contact-item.js +1 -1
- package/dist/components/af-divider.js +1 -1
- package/dist/components/af-feature-accordion.js +2 -2
- package/dist/components/af-feature-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 +1 -1
- package/dist/components/af-grid.js +2 -2
- package/dist/components/af-hero.js +1 -1
- package/dist/components/af-icon-box.js +1 -1
- package/dist/components/af-icon-text.js +3 -3
- 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 +1 -1
- package/dist/components/af-inline.js +1 -1
- package/dist/components/af-input.js +1 -1
- package/dist/components/af-logo-well.js +1 -1
- package/dist/components/af-logo.js +1 -1
- package/dist/components/af-nav-accordion-item.js +2 -2
- package/dist/components/af-nav-accordion.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 +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 +1 -1
- package/dist/components/af-testimonial.js +2 -2
- package/dist/components/af-text-image-nest.js +1 -1
- package/dist/components/af-text-image.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 +1 -1
- package/dist/components/af-visually-hidden.js +1 -1
- package/dist/components/index.js +16 -16
- package/dist/components/{p-D6WBvdoZ.js → p-B4IVxpr4.js} +4 -4
- package/dist/components/{p-D6WBvdoZ.js.map → p-B4IVxpr4.js.map} +1 -1
- package/dist/components/{p-D7xVlaes.js → p-BMs3J6ty.js} +6 -6
- package/dist/components/{p-D7xVlaes.js.map → p-BMs3J6ty.js.map} +1 -1
- package/dist/components/{p-gD0WsQqs.js → p-BTZzBVqv.js} +3 -3
- package/dist/components/{p-gD0WsQqs.js.map → p-BTZzBVqv.js.map} +1 -1
- package/dist/components/{p-DYZT-0xm.js → p-B_32JVKl.js} +3 -3
- package/dist/components/{p-DYZT-0xm.js.map → p-B_32JVKl.js.map} +1 -1
- package/dist/components/{p-C7gWqhJQ.js → p-BkTUo72F.js} +3 -3
- package/dist/components/{p-C7gWqhJQ.js.map → p-BkTUo72F.js.map} +1 -1
- package/dist/components/{p-Xy0_sffa.js → p-BsHk9vlU.js} +3 -3
- package/dist/components/{p-Xy0_sffa.js.map → p-BsHk9vlU.js.map} +1 -1
- package/dist/components/{p-BysQTjHh.js → p-BuiXTazC.js} +3 -3
- package/dist/components/{p-BysQTjHh.js.map → p-BuiXTazC.js.map} +1 -1
- package/dist/components/{p-Dga7rIrc.js → p-CImZ9bq8.js} +3 -3
- package/dist/components/{p-Dga7rIrc.js.map → p-CImZ9bq8.js.map} +1 -1
- package/dist/components/{p-D44TKuX4.js → p-CJU2A9Ab.js} +3 -3
- package/dist/components/{p-D44TKuX4.js.map → p-CJU2A9Ab.js.map} +1 -1
- package/dist/components/{p-CTDelwMf.js → p-CUmn76Kf.js} +3 -3
- package/dist/components/{p-CTDelwMf.js.map → p-CUmn76Kf.js.map} +1 -1
- package/dist/components/{p-1ol-T8nk.js → p-CZdcAZe_.js} +4 -4
- package/dist/components/p-CZdcAZe_.js.map +1 -0
- package/dist/components/{p-DBkfDqnN.js → p-C_y6F4SM.js} +3 -3
- package/dist/components/{p-DBkfDqnN.js.map → p-C_y6F4SM.js.map} +1 -1
- package/dist/components/{p-G-vNzZpq.js → p-CnbO_hx0.js} +3 -3
- package/dist/components/{p-G-vNzZpq.js.map → p-CnbO_hx0.js.map} +1 -1
- package/dist/components/{p-C0enaaNi.js → p-DQF6qg3h.js} +3 -3
- package/dist/components/{p-C0enaaNi.js.map → p-DQF6qg3h.js.map} +1 -1
- package/dist/components/{p-sxltTNnO.js → p-DQFOagz0.js} +3 -3
- package/dist/components/{p-sxltTNnO.js.map → p-DQFOagz0.js.map} +1 -1
- package/dist/components/{p-DjjPGV3a.js → p-DdH3uwBx.js} +4 -4
- package/dist/components/{p-DjjPGV3a.js.map → p-DdH3uwBx.js.map} +1 -1
- package/dist/components/{p-Bi6_eN-1.js → p-DnDXrxJ7.js} +3 -3
- package/dist/components/{p-Bi6_eN-1.js.map → p-DnDXrxJ7.js.map} +1 -1
- package/dist/components/{p-PKWusChD.js → p-DobkLkti.js} +3 -3
- package/dist/components/{p-PKWusChD.js.map → p-DobkLkti.js.map} +1 -1
- package/dist/components/{p-CdR70Kv1.js → p-DrCZBGKv.js} +5 -5
- package/dist/components/{p-CdR70Kv1.js.map → p-DrCZBGKv.js.map} +1 -1
- package/dist/components/{p-uvbCz67Q.js → p-Dye7hRk7.js} +4 -4
- package/dist/components/{p-uvbCz67Q.js.map → p-Dye7hRk7.js.map} +1 -1
- package/dist/components/{p-CDPPh9ES.js → p-DyqBBl8X.js} +4 -4
- package/dist/components/{p-CDPPh9ES.js.map → p-DyqBBl8X.js.map} +1 -1
- package/dist/components/{p-OefAiC9E.js → p-QpoTJlVn.js} +3 -3
- package/dist/components/{p-OefAiC9E.js.map → p-QpoTJlVn.js.map} +1 -1
- package/dist/esm/af-accordion-item.entry.js +1 -1
- package/dist/esm/af-accordion.entry.js +1 -1
- package/dist/esm/af-button-group.entry.js +1 -1
- package/dist/esm/af-card.entry.js +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-contact-item.entry.js +1 -1
- package/dist/esm/af-divider.entry.js +1 -1
- package/dist/esm/af-feature-accordion.entry.js +2 -2
- package/dist/esm/af-feature-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.entry.js +2 -2
- package/dist/esm/af-heading.af-logo.af-nav-item.af-navbar.af-text.entry.js.map +1 -1
- package/dist/esm/af-heading_5.entry.js +2 -2
- package/dist/esm/af-hero.entry.js +2 -2
- package/dist/esm/af-icon-box.entry.js +1 -1
- package/dist/esm/af-icon-text.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.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 +2 -2
- package/dist/esm/af-radio.entry.js +1 -1
- package/dist/esm/af-section.entry.js +2 -2
- 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 +2 -2
- package/dist/esm/af-stack.entry.js +1 -1
- package/dist/esm/af-stat.entry.js +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 +2 -2
- package/dist/esm/af-testimonial-carousel.entry.js +1 -1
- package/dist/esm/af-testimonial-stat.entry.js +1 -1
- package/dist/esm/af-testimonial.entry.js +2 -2
- package/dist/esm/af-text-image-nest.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/package.json +1 -1
- package/dist/affinda/p-05072f90.entry.js +0 -2
- package/dist/affinda/p-14bd7903.entry.js +0 -2
- package/dist/affinda/p-1902ed20.entry.js +0 -2
- package/dist/affinda/p-3238f8e8.entry.js +0 -2
- package/dist/affinda/p-432ee0e3.entry.js +0 -2
- package/dist/affinda/p-9963bec0.entry.js +0 -2
- package/dist/affinda/p-adabec15.entry.js +0 -2
- package/dist/affinda/p-b65cf4c3.entry.js +0 -2
- package/dist/affinda/p-ec042bc4.entry.js +0 -2
- package/dist/components/p-1ol-T8nk.js.map +0 -1
- /package/dist/affinda/{p-e90a3892.entry.js.map → p-02427605.entry.js.map} +0 -0
- /package/dist/affinda/{p-57fcfd78.entry.js.map → p-0254b263.entry.js.map} +0 -0
- /package/dist/affinda/{p-7ce2b434.entry.js.map → p-09e202d1.entry.js.map} +0 -0
- /package/dist/affinda/{p-ea150b3d.entry.js.map → p-15eac0d5.entry.js.map} +0 -0
- /package/dist/affinda/{p-bac968a1.entry.js.map → p-17c2999b.entry.js.map} +0 -0
- /package/dist/affinda/{p-479a300e.entry.js.map → p-1aa795c7.entry.js.map} +0 -0
- /package/dist/affinda/{p-1902ed20.entry.js.map → p-1efa4787.entry.js.map} +0 -0
- /package/dist/affinda/{p-432ee0e3.entry.js.map → p-27026c90.entry.js.map} +0 -0
- /package/dist/affinda/{p-05072f90.entry.js.map → p-283a9dec.entry.js.map} +0 -0
- /package/dist/affinda/{p-7013570d.entry.js.map → p-2d5eb5ac.entry.js.map} +0 -0
- /package/dist/affinda/{p-26a6d9a7.entry.js.map → p-369dfdd8.entry.js.map} +0 -0
- /package/dist/affinda/{p-44e976ee.entry.js.map → p-3a7afe33.entry.js.map} +0 -0
- /package/dist/affinda/{p-ec042bc4.entry.js.map → p-3b429a16.entry.js.map} +0 -0
- /package/dist/affinda/{p-f7fc76d2.entry.js.map → p-3cd4edd0.entry.js.map} +0 -0
- /package/dist/affinda/{p-2586fbb8.entry.js.map → p-42c69bc9.entry.js.map} +0 -0
- /package/dist/affinda/{p-95b49b45.entry.js.map → p-4f422489.entry.js.map} +0 -0
- /package/dist/affinda/{p-f9ecbde8.entry.js.map → p-4f731d31.entry.js.map} +0 -0
- /package/dist/affinda/{p-6b7fcb18.entry.js.map → p-4ff626de.entry.js.map} +0 -0
- /package/dist/affinda/{p-a7b51bb6.entry.js.map → p-606159d2.entry.js.map} +0 -0
- /package/dist/affinda/{p-fff252df.entry.js.map → p-62eb01fa.entry.js.map} +0 -0
- /package/dist/affinda/{p-d647ae06.entry.js.map → p-64f24ab4.entry.js.map} +0 -0
- /package/dist/affinda/{p-750063ab.entry.js.map → p-6898d4bd.entry.js.map} +0 -0
- /package/dist/affinda/{p-9ca72e02.entry.js.map → p-6949fbdf.entry.js.map} +0 -0
- /package/dist/affinda/{p-d06ae9cd.entry.js.map → p-6de54e73.entry.js.map} +0 -0
- /package/dist/affinda/{p-14bd7903.entry.js.map → p-6df7b689.entry.js.map} +0 -0
- /package/dist/affinda/{p-c4fd7d48.entry.js.map → p-73de3aa7.entry.js.map} +0 -0
- /package/dist/affinda/{p-e0619222.entry.js.map → p-78941fec.entry.js.map} +0 -0
- /package/dist/affinda/{p-67e8c6f6.entry.js.map → p-7eb0875d.entry.js.map} +0 -0
- /package/dist/affinda/{p-7c9683d8.entry.js.map → p-7faa3fb9.entry.js.map} +0 -0
- /package/dist/affinda/{p-67a27eaf.entry.js.map → p-8a2cbcf0.entry.js.map} +0 -0
- /package/dist/affinda/{p-2a8441cb.entry.js.map → p-8eb60b77.entry.js.map} +0 -0
- /package/dist/affinda/{p-9610cd3c.entry.js.map → p-8fe10b18.entry.js.map} +0 -0
- /package/dist/affinda/{p-ac45df4b.entry.js.map → p-91b71a8f.entry.js.map} +0 -0
- /package/dist/affinda/{p-b65cf4c3.entry.js.map → p-972984a9.entry.js.map} +0 -0
- /package/dist/affinda/{p-9963bec0.entry.js.map → p-988fb256.entry.js.map} +0 -0
- /package/dist/affinda/{p-d923549d.entry.js.map → p-9dfb5fab.entry.js.map} +0 -0
- /package/dist/affinda/{p-27469df6.entry.js.map → p-a326d8f6.entry.js.map} +0 -0
- /package/dist/affinda/{p-9e19a477.entry.js.map → p-a35ab849.entry.js.map} +0 -0
- /package/dist/affinda/{p-d9913985.entry.js.map → p-a70ce66f.entry.js.map} +0 -0
- /package/dist/affinda/{p-7eca844d.entry.js.map → p-aa9c2609.entry.js.map} +0 -0
- /package/dist/affinda/{p-587fd0fa.entry.js.map → p-b13c1438.entry.js.map} +0 -0
- /package/dist/affinda/{p-d6b8c3b4.entry.js.map → p-b2a41a48.entry.js.map} +0 -0
- /package/dist/affinda/{p-9b115359.entry.js.map → p-b69bce30.entry.js.map} +0 -0
- /package/dist/affinda/{p-19dc4331.entry.js.map → p-bc1088a7.entry.js.map} +0 -0
- /package/dist/affinda/{p-255a8254.entry.js.map → p-bdb3e590.entry.js.map} +0 -0
- /package/dist/affinda/{p-ce77f08f.entry.js.map → p-c0f71971.entry.js.map} +0 -0
- /package/dist/affinda/{p-9b9e81cf.entry.js.map → p-c2c16447.entry.js.map} +0 -0
- /package/dist/affinda/{p-75443f08.entry.js.map → p-cebfc8a9.entry.js.map} +0 -0
- /package/dist/affinda/{p-5f3419c3.entry.js.map → p-d12d33c8.entry.js.map} +0 -0
- /package/dist/affinda/{p-77ec01ee.entry.js.map → p-d275fb5d.entry.js.map} +0 -0
- /package/dist/affinda/{p-bc77706d.entry.js.map → p-d40f8d18.entry.js.map} +0 -0
- /package/dist/affinda/{p-dd0cd57e.entry.js.map → p-d9ff321b.entry.js.map} +0 -0
- /package/dist/affinda/{p-b8ea57a9.entry.js.map → p-db7eb209.entry.js.map} +0 -0
- /package/dist/affinda/{p-3dd90f46.entry.js.map → p-dd933272.entry.js.map} +0 -0
- /package/dist/affinda/{p-dd4c8640.entry.js.map → p-f5b4923f.entry.js.map} +0 -0
- /package/dist/affinda/{p-6986f604.entry.js.map → p-f76ef563.entry.js.map} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-D7xVlaes.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-hero/af-hero.css?tag=af-hero&encapsulation=scoped","src/components/af-hero/af-hero.tsx"],"sourcesContent":[":host {\n display: block;\n position: relative;\n width: 100%;\n /* Image-lift custom property — consumers override per-page via inline\n style or a page-level rule. The negative value pulls the photo's\n crown above the hero top so it reads behind the floating navbar\n pill. Matches the live Webflow stack (~-260px on .page-banner). */\n --af-hero-image-lift: -260px;\n /* Blob mask container size override — rarely needed; defaults to the\n photo column's natural dimensions. */\n --af-hero-image-min-height: 360px;\n}\n\n.hero__section {\n position: relative;\n overflow: hidden;\n}\n\n/* -----------------------------------------------------------------\n Paperclip watermark slot (inkwell-centered only)\n ----------------------------------------------------------------- */\n.hero__paperclip {\n position: absolute;\n top: 50%;\n right: 0;\n transform: translateY(-50%);\n pointer-events: none;\n z-index: 0;\n /* Default size — consumers can resize the slotted decoration via its\n own width/height props. */\n width: 655px;\n height: 754px;\n}\n\n@media (max-width: 991px) {\n .hero__paperclip {\n width: 480px;\n height: 552px;\n }\n}\n\n@media (max-width: 767px) {\n .hero__paperclip {\n display: none;\n }\n}\n\n/* -----------------------------------------------------------------\n Inner wrapper — top/bottom padding\n ----------------------------------------------------------------- */\n.hero__inner {\n position: relative;\n z-index: 1;\n padding-bottom: 40px;\n}\n\n:host(.hero--pad-default) .hero__inner {\n padding-top: 124px;\n}\n\n:host(.hero--pad-loose) .hero__inner {\n padding-top: 164px;\n}\n\n/* Centered variant: leave clear breathing room under the floating navbar\n pill so the heading isn't clipped at the top. The live affinda.com\n reference at 1280 vw renders the heading roughly 180 px below the\n viewport top — pad accordingly. (Earlier value of 80 px clipped the\n heading behind the navbar; caught by qa/regression-compare in the\n site repo.) */\n:host(.hero--inkwell-centered.hero--pad-default) .hero__inner {\n padding-top: 180px;\n}\n\n/* -----------------------------------------------------------------\n Grid layout (photo + illustration variants)\n ----------------------------------------------------------------- */\n.hero__grid {\n display: grid;\n grid-template-columns: 5fr 7fr;\n gap: 40px;\n align-items: center;\n}\n\n/* Illustration variants use a looser two-column split so the art\n doesn't dominate. */\n:host(.hero--soft-clay-illustration) .hero__grid,\n:host(.hero--mist-green-illustration) .hero__grid {\n grid-template-columns: 1fr auto;\n gap: 48px;\n}\n\n/* inkwell-illustration: 50/50 split. The 5fr/7fr default tilts the\n illustration column too wide, which pinches the heading down to\n 4-6 lines at 1280 vw. Even split keeps the heading at 2-3 lines\n matching the live affinda.com reference. */\n:host(.hero--inkwell-illustration) .hero__grid {\n grid-template-columns: 1fr 1fr;\n}\n\n.hero__copy {\n /* Small inset pushes heading inward from the hard container edge —\n matches the live .page-banner-text treatment. Only applied to\n left-aligned variants. */\n padding-left: 16px;\n}\n\n:host(.hero--inkwell-photo.hero--pad-loose) .hero__copy {\n /* Mirrors ListingHero's `padding-bottom: 120px` — combined with\n `align-items: center` on the grid, this shifts the heading visually\n upward so the subtitle lines up near the image's vertical centre. */\n padding-bottom: 120px;\n}\n\n:host(.hero--inkwell-centered) .hero__copy {\n padding-left: 0;\n text-align: center;\n}\n\n.hero__badge:not(:has(*)) {\n display: none;\n}\n\n.hero__badge:has(*) {\n margin-bottom: 16px;\n}\n\n.hero__copy ::slotted([slot='badge']) {\n display: inline-block;\n}\n\n.hero__buttons {\n margin-top: 32px;\n}\n\n.hero__buttons:empty {\n display: none;\n}\n\n:host(.hero--inkwell-centered) .hero__buttons {\n display: flex;\n justify-content: center;\n}\n\n/* -----------------------------------------------------------------\n Photo (inkwell-photo)\n Blob-mask shape defined once as a CSS custom property so Stencil\n doesn't duplicate the giant base64 URL for prefixed/unprefixed pairs.\n ----------------------------------------------------------------- */\n:host {\n --af-hero-blob-mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3NDEgOTQwIj48cGF0aCBkPSJNMTcwLjA2MyAxODEuOTQ1QzIzNC4xNTYgMzAuOTUxNCA0MDguNTE4IC0zOS40OTU1IDU1OS41MTIgMjQuNTk3NUM3MTAuNTA2IDg4LjY5MDQgNzgwLjk1MiAyNjMuMDUzIDcxNi44NTkgNDE0LjA0Nkw1NzAuODQ3IDc1OC4wMzFDNTA2Ljc1NCA5MDkuMDI0IDMzMi4zOTIgOTc5LjQ3MSAxODEuMzk4IDkxNS4zNzhDMzAuNDA0NSA4NTEuMjg1IC00MC4wNDI0IDY3Ni45MjMgMjQuMDUwNiA1MjUuOTI5TDE3MC4wNjMgMTgxLjk0NVoiIGZpbGw9IiMwMDAiLz48L3N2Zz4=');\n --af-hero-blob-mask-mobile: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1024 768\"><path fill=\"%23000\" d=\"M1024 0H384A384 384 0 0 0 384 768H1024V0Z\"/></svg>');\n}\n\n.hero__image {\n min-height: var(--af-hero-image-min-height);\n overflow: visible;\n margin-top: var(--af-hero-image-lift);\n position: relative;\n z-index: 1;\n}\n\n.hero__image--masked ::slotted(img),\n.hero__image--masked ::slotted(picture img),\n.hero__image--masked ::slotted(.af-hero-image) {\n display: block;\n width: 100%;\n height: auto;\n -webkit-mask-image: var(--af-hero-blob-mask);\n mask-image: var(--af-hero-blob-mask);\n -webkit-mask-size: 100% 100%;\n mask-size: 100% 100%;\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n -webkit-mask-position: center;\n mask-position: center;\n mask-mode: alpha;\n}\n\n/* Fallback: some consumers slot a raw <img> wrapped in a container.\n Descendant selector per repo convention. */\n.hero__image--masked img {\n -webkit-mask-image: var(--af-hero-blob-mask);\n mask-image: var(--af-hero-blob-mask);\n -webkit-mask-size: 100% 100%;\n mask-size: 100% 100%;\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n -webkit-mask-position: center;\n mask-position: center;\n mask-mode: alpha;\n}\n\n/* -----------------------------------------------------------------\n Illustration (inkwell/soft-clay/mist-green -illustration)\n ----------------------------------------------------------------- */\n.hero__illustration {\n flex: 0 0 auto;\n width: 100%;\n max-width: 432px;\n line-height: 0;\n justify-self: end;\n}\n\n.hero__illustration ::slotted(svg),\n.hero__illustration ::slotted(img) {\n width: 100%;\n height: auto;\n display: block;\n border-radius: 16px;\n}\n\n/* Cap inkwell-illustration's slotted SVG so square-aspect art doesn't\n tower past the text column. 540 px matches the live treatment for\n the /industries + /integrations heroes. */\n:host(.hero--inkwell-illustration) .hero__illustration {\n max-width: 540px;\n}\n\n/* -----------------------------------------------------------------\n Logos-below overlap\n Painted in the theme's background token so the strip cleanly overlaps\n the bottom of the photo on the -photo variant. Empty = collapsed.\n ----------------------------------------------------------------- */\n.hero__logos {\n position: relative;\n z-index: 2;\n}\n\n.hero__logos:not(:has(*)) {\n display: none;\n}\n\n/* Photo variant pulls the logos row up so it covers the image's bottom\n edge — matches the ListingHero `.listing-hero__footer` treatment. */\n:host(.hero--inkwell-photo) .hero__logos:has(*) {\n margin-top: -240px;\n padding-top: 48px;\n padding-bottom: 48px;\n background: var(--af-background-base, var(--colour-brand-inkwell, #14343b));\n border-top: 1px solid\n var(--af-background-border-subtle, var(--colour-inkwell-450, #203e45));\n}\n\n/* -----------------------------------------------------------------\n Mobile / tablet\n ----------------------------------------------------------------- */\n@media (max-width: 991px) {\n :host(.hero--pad-default) .hero__inner,\n :host(.hero--pad-loose) .hero__inner {\n padding-top: 112px;\n }\n\n /* Centered variant still needs a touch more clearance under the\n navbar pill on tablet. */\n :host(.hero--inkwell-centered.hero--pad-default) .hero__inner {\n padding-top: 144px;\n }\n\n .hero__grid {\n grid-template-columns: 1fr;\n gap: 32px;\n }\n\n :host(.hero--soft-clay-illustration) .hero__grid,\n :host(.hero--mist-green-illustration) .hero__grid,\n :host(.hero--inkwell-illustration) .hero__grid {\n grid-template-columns: 1fr;\n }\n\n .hero__copy {\n padding-left: 0;\n padding-bottom: 0;\n }\n\n .hero__illustration {\n max-width: 360px;\n margin-inline: auto;\n justify-self: center;\n }\n\n /* Photo on mobile: swap the desktop blob mask for the softer D-curve\n mobile variant, and drop the lift so the image doesn't crash into\n the navbar. */\n .hero__image {\n margin-top: 0;\n min-height: auto;\n }\n\n :host(.hero--inkwell-photo) .hero__image--masked ::slotted(img),\n :host(.hero--inkwell-photo) .hero__image--masked img {\n -webkit-mask-image: var(--af-hero-blob-mask-mobile);\n mask-image: var(--af-hero-blob-mask-mobile);\n }\n\n :host(.hero--inkwell-photo) .hero__logos:has(*) {\n margin-top: 24px;\n padding-top: 32px;\n padding-bottom: 32px;\n background: transparent;\n border-top: none;\n }\n}\n","import { Component, h, Host, Prop, Element } from '@stencil/core';\n\nexport type HeroVariant =\n | 'inkwell-photo'\n | 'inkwell-illustration'\n | 'inkwell-centered'\n | 'soft-clay-illustration'\n | 'mist-green-illustration';\n\nexport type HeroTopPad = 'default' | 'loose';\n\n/**\n * Blob-shape mask used to clip hero photos on the inkwell-photo variant.\n * Extracted from the 7+ hand-rolled copies in the website so the path is\n * defined exactly once. Intrinsic viewBox: 741 × 940.\n */\nconst BLOB_MASK_URL =\n \"url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3NDEgOTQwIj48cGF0aCBkPSJNMTcwLjA2MyAxODEuOTQ1QzIzNC4xNTYgMzAuOTUxNCA0MDguNTE4IC0zOS40OTU1IDU1OS41MTIgMjQuNTk3NUM3MTAuNTA2IDg4LjY5MDQgNzgwLjk1MiAyNjMuMDUzIDcxNi44NTkgNDE0LjA0Nkw1NzAuODQ3IDc1OC4wMzFDNTA2Ljc1NCA5MDkuMDI0IDMzMi4zOTIgOTc5LjQ3MSAxODEuMzk4IDkxNS4zNzhDMzAuNDA0NSA4NTEuMjg1IC00MC4wNDI0IDY3Ni45MjMgMjQuMDUwNiA1MjUuOTI5TDE3MC4wNjMgMTgxLjk0NVoiIGZpbGw9IiMwMDAiLz48L3N2Zz4=')\";\n\n/**\n * Mobile blob shape — simpler D-curve matching the live mobile banner.\n */\nconst BLOB_MASK_URL_MOBILE =\n \"url('data:image/svg+xml;utf8,<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" viewBox=\\\"0 0 1024 768\\\"><path fill=\\\"%23000\\\" d=\\\"M1024 0H384A384 384 0 0 0 384 768H1024V0Z\\\"/></svg>')\";\n\n/**\n * Map each variant to its underlying section theme token. Keeps one source\n * of truth instead of having consumers spell the theme twice.\n */\nconst VARIANT_THEMES: Record<HeroVariant, 'inkwell' | 'soft-clay' | 'mist-green'> = {\n 'inkwell-photo': 'inkwell',\n 'inkwell-illustration': 'inkwell',\n 'inkwell-centered': 'inkwell',\n 'soft-clay-illustration': 'soft-clay',\n 'mist-green-illustration': 'mist-green',\n};\n\n/**\n * Unified top-of-page hero — replaces the 7+ hand-rolled hero implementations\n * the Affinda marketing site (and sibling apps) currently ship. Covers five\n * canonical patterns via the `variant` prop:\n *\n * - `inkwell-photo` — inkwell background, blob-masked photo on the right.\n * Use for: listing / archive pages (blog, case-studies, whitepapers,\n * value-creation, about-us) and industry landing pages that carry a\n * photograph instead of an illustration.\n * - `inkwell-illustration` — inkwell background, illustration on the right.\n * Use for: industry landing pages, /industries, /integrations, /platform\n * with bespoke art.\n * - `inkwell-centered` — inkwell background, centred typography lockup.\n * Slot `<af-paperclip-decoration />` into the `paperclip` slot for the\n * watermark treatment. Use for: `/`, `/au`, `/platform`.\n * - `soft-clay-illustration` — soft-clay background, illustration on the\n * right. Use for: /news, /industries overview, /security, /compare.\n * - `mist-green-illustration` — same layout as soft-clay-illustration but on\n * the mist-green theme. Reserved for future pages.\n *\n * ## Slots\n *\n * - default — heading content (use when richer markup than the `heading`\n * prop can express is needed; e.g. coloured spans or line breaks).\n * - `description` — supporting copy under the heading.\n * - `badge` — optional pre-heading label (pill, version tag).\n * - `buttons` — hero CTAs (usually an `<af-button-group>`).\n * - `image` — the photograph for the `inkwell-photo` variant. Wrapped in\n * the blob mask automatically.\n * - `illustration` — the illustration SVG for `-illustration` variants.\n * - `paperclip` — watermark for `inkwell-centered`. Consumers typically\n * slot `<af-paperclip-decoration />` here.\n * - `logos-below` — overlap row at the bottom gutter (logo carousel etc.).\n * Painted with the theme's background so it cleanly overlaps the image's\n * lower edge on the photo variant.\n *\n * ## Float-navbar handling\n *\n * When `floatNavbar` is true (the default for the inkwell variants) the\n * component sets `data-af-hero-float-navbar=\"true\"` on `<body>` via a\n * lifecycle hook, and a companion rule in `@affinda/css/base.css` applies\n * the `body > header { position: absolute }` / `main { padding-top: 0 }`\n * / navbar-spacer-transparent treatment. Consumers already import\n * `@affinda/css` so no extra import is required. The rule deactivates\n * when the hero is removed from the DOM.\n *\n * ## Image lift\n *\n * The `inkwell-photo` variant renders the photo column with\n * `margin-top: var(--af-hero-image-lift, -260px)`. Override per-page by\n * setting `--af-hero-image-lift` on the `<af-hero>` element.\n */\n@Component({\n tag: 'af-hero',\n styleUrl: 'af-hero.css',\n shadow: false,\n scoped: true,\n})\nexport class AfHero {\n @Element() el!: HTMLElement;\n\n /** Layout / theme preset. See variant docs in the component header. */\n @Prop({ reflect: true }) variant: HeroVariant = 'inkwell-photo';\n\n /** Heading text (use the default slot for richer markup). */\n @Prop() heading: string = '';\n\n /** Description text (use the `description` slot for richer markup). */\n @Prop() description: string = '';\n\n /**\n * Float the site header over the hero and paint the navbar-spacer\n * transparent so the hero background flows to the top of the viewport.\n * Defaults to true for the three inkwell variants, false for the\n * soft-clay / mist-green illustration variants (whose consumers don't\n * always want a full-bleed crown).\n */\n @Prop({ reflect: true }) floatNavbar?: boolean;\n\n /**\n * Top padding preset. `default` = 124px (matches IndustryHero /\n * IllustrationHero). `loose` = 164px (matches ListingHero — gives the\n * image a touch more breathing room above the lockup on archive pages).\n */\n @Prop() topPad: HeroTopPad = 'default';\n\n /** Typography lockup max-width (px). Defaults to 620, matching the live site. */\n @Prop() maxWidth: number = 620;\n\n /**\n * Whether to apply the blob mask to the slotted `image`. Defaults to\n * `true` for `inkwell-photo`. Set `false` if you want to slot in a\n * pre-masked raster or a custom wrapper.\n */\n @Prop() maskImage: boolean = true;\n\n private get resolvedFloatNavbar(): boolean {\n if (typeof this.floatNavbar === 'boolean') return this.floatNavbar;\n return (\n this.variant === 'inkwell-photo' ||\n this.variant === 'inkwell-illustration' ||\n this.variant === 'inkwell-centered'\n );\n }\n\n private get theme() {\n return VARIANT_THEMES[this.variant];\n }\n\n connectedCallback() {\n if (this.resolvedFloatNavbar && typeof document !== 'undefined') {\n document.body.setAttribute('data-af-hero-float-navbar', 'true');\n }\n }\n\n disconnectedCallback() {\n if (typeof document !== 'undefined' && !document.querySelector('af-hero')) {\n document.body.removeAttribute('data-af-hero-float-navbar');\n }\n }\n\n private renderCopy() {\n const alignment = this.variant === 'inkwell-centered' ? 'center' : 'left';\n return (\n <div class=\"hero__copy\">\n <div class=\"hero__badge\">\n <slot name=\"badge\"></slot>\n </div>\n <af-typography-lockup\n heading-size=\"1\"\n text-alignment={alignment}\n max-width={String(this.maxWidth)}\n >\n {this.heading ? <h1>{this.heading}</h1> : <slot></slot>}\n {this.description ? (\n <span slot=\"description\">{this.description}</span>\n ) : (\n <slot name=\"description\" slot=\"description\"></slot>\n )}\n </af-typography-lockup>\n <div class=\"hero__buttons\">\n <slot name=\"buttons\"></slot>\n </div>\n </div>\n );\n }\n\n private renderPhoto() {\n return (\n <div\n class={{\n hero__image: true,\n 'hero__image--masked': this.maskImage,\n }}\n >\n <slot name=\"image\"></slot>\n </div>\n );\n }\n\n private renderIllustration() {\n return (\n <div class=\"hero__illustration\">\n <slot name=\"illustration\"></slot>\n </div>\n );\n }\n\n render() {\n const v = this.variant;\n const centered = v === 'inkwell-centered';\n const hasImage = v === 'inkwell-photo';\n const hasIllustration =\n v === 'inkwell-illustration' ||\n v === 'soft-clay-illustration' ||\n v === 'mist-green-illustration';\n\n return (\n <Host\n class={{\n [`hero--${v}`]: true,\n [`hero--pad-${this.topPad}`]: true,\n [`hero--theme-${this.theme}`]: true,\n 'hero--float-navbar': this.resolvedFloatNavbar,\n }}\n >\n <af-section\n theme={this.theme}\n padding=\"none\"\n container={false}\n class=\"hero__section\"\n >\n {centered && (\n <div class=\"hero__paperclip\" aria-hidden=\"true\">\n <slot name=\"paperclip\"></slot>\n </div>\n )}\n <af-container class=\"hero__inner\">\n {centered ? (\n this.renderCopy()\n ) : (\n <div class=\"hero__grid\">\n {this.renderCopy()}\n {hasImage && this.renderPhoto()}\n {hasIllustration && this.renderIllustration()}\n </div>\n )}\n </af-container>\n <div class=\"hero__logos\">\n <slot name=\"logos-below\"></slot>\n </div>\n </af-section>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"p-BMs3J6ty.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-hero/af-hero.css?tag=af-hero&encapsulation=scoped","src/components/af-hero/af-hero.tsx"],"sourcesContent":[":host {\n display: block;\n position: relative;\n width: 100%;\n /* Image-lift custom property — consumers override per-page via inline\n style or a page-level rule. The negative value pulls the photo's\n crown above the hero top so it reads behind the floating navbar\n pill. Matches the live Webflow stack (~-260px on .page-banner). */\n --af-hero-image-lift: -260px;\n /* Blob mask container size override — rarely needed; defaults to the\n photo column's natural dimensions. */\n --af-hero-image-min-height: 360px;\n}\n\n.hero__section {\n position: relative;\n overflow: hidden;\n}\n\n/* -----------------------------------------------------------------\n Paperclip watermark slot (inkwell-centered only)\n ----------------------------------------------------------------- */\n.hero__paperclip {\n position: absolute;\n top: 50%;\n right: 0;\n transform: translateY(-50%);\n pointer-events: none;\n z-index: 0;\n /* Default size — consumers can resize the slotted decoration via its\n own width/height props. */\n width: 655px;\n height: 754px;\n}\n\n@media (max-width: 991px) {\n .hero__paperclip {\n width: 480px;\n height: 552px;\n }\n}\n\n@media (max-width: 767px) {\n .hero__paperclip {\n display: none;\n }\n}\n\n/* -----------------------------------------------------------------\n Inner wrapper — top/bottom padding\n ----------------------------------------------------------------- */\n.hero__inner {\n position: relative;\n z-index: 1;\n padding-bottom: 40px;\n}\n\n:host(.hero--pad-default) .hero__inner {\n padding-top: 124px;\n}\n\n:host(.hero--pad-loose) .hero__inner {\n padding-top: 164px;\n}\n\n/* Centered variant: leave clear breathing room under the floating navbar\n pill so the heading isn't clipped at the top. The live affinda.com\n reference at 1280 vw renders the heading roughly 180 px below the\n viewport top — pad accordingly. (Earlier value of 80 px clipped the\n heading behind the navbar; caught by qa/regression-compare in the\n site repo.) */\n:host(.hero--inkwell-centered.hero--pad-default) .hero__inner {\n padding-top: 180px;\n}\n\n/* -----------------------------------------------------------------\n Grid layout (photo + illustration variants)\n ----------------------------------------------------------------- */\n.hero__grid {\n display: grid;\n grid-template-columns: 5fr 7fr;\n gap: 40px;\n align-items: center;\n}\n\n/* Illustration variants use a looser two-column split so the art\n doesn't dominate. */\n:host(.hero--soft-clay-illustration) .hero__grid,\n:host(.hero--mist-green-illustration) .hero__grid {\n grid-template-columns: 1fr auto;\n gap: 48px;\n}\n\n/* inkwell-illustration: 50/50 split. The 5fr/7fr default tilts the\n illustration column too wide, which pinches the heading down to\n 4-6 lines at 1280 vw. Even split keeps the heading at 2-3 lines\n matching the live affinda.com reference. */\n:host(.hero--inkwell-illustration) .hero__grid {\n grid-template-columns: 1fr 1fr;\n}\n\n.hero__copy {\n /* Small inset pushes heading inward from the hard container edge —\n matches the live .page-banner-text treatment. Only applied to\n left-aligned variants. */\n padding-left: 16px;\n}\n\n:host(.hero--inkwell-photo.hero--pad-loose) .hero__copy {\n /* Mirrors ListingHero's `padding-bottom: 120px` — combined with\n `align-items: center` on the grid, this shifts the heading visually\n upward so the subtitle lines up near the image's vertical centre. */\n padding-bottom: 120px;\n}\n\n:host(.hero--inkwell-centered) .hero__copy {\n padding-left: 0;\n text-align: center;\n}\n\n.hero__badge:not(:has(*)) {\n display: none;\n}\n\n.hero__badge:has(*) {\n margin-bottom: 16px;\n}\n\n.hero__copy ::slotted([slot='badge']) {\n display: inline-block;\n}\n\n.hero__buttons {\n margin-top: 32px;\n}\n\n.hero__buttons:empty {\n display: none;\n}\n\n:host(.hero--inkwell-centered) .hero__buttons {\n display: flex;\n justify-content: center;\n}\n\n/* -----------------------------------------------------------------\n Photo (inkwell-photo)\n Blob-mask shape defined once as a CSS custom property so Stencil\n doesn't duplicate the giant base64 URL for prefixed/unprefixed pairs.\n ----------------------------------------------------------------- */\n:host {\n --af-hero-blob-mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3NDEgOTQwIj48cGF0aCBkPSJNMTcwLjA2MyAxODEuOTQ1QzIzNC4xNTYgMzAuOTUxNCA0MDguNTE4IC0zOS40OTU1IDU1OS41MTIgMjQuNTk3NUM3MTAuNTA2IDg4LjY5MDQgNzgwLjk1MiAyNjMuMDUzIDcxNi44NTkgNDE0LjA0Nkw1NzAuODQ3IDc1OC4wMzFDNTA2Ljc1NCA5MDkuMDI0IDMzMi4zOTIgOTc5LjQ3MSAxODEuMzk4IDkxNS4zNzhDMzAuNDA0NSA4NTEuMjg1IC00MC4wNDI0IDY3Ni45MjMgMjQuMDUwNiA1MjUuOTI5TDE3MC4wNjMgMTgxLjk0NVoiIGZpbGw9IiMwMDAiLz48L3N2Zz4=');\n --af-hero-blob-mask-mobile: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1024 768\"><path fill=\"%23000\" d=\"M1024 0H384A384 384 0 0 0 384 768H1024V0Z\"/></svg>');\n}\n\n.hero__image {\n min-height: var(--af-hero-image-min-height);\n overflow: visible;\n margin-top: var(--af-hero-image-lift);\n position: relative;\n z-index: 1;\n}\n\n.hero__image--masked ::slotted(img),\n.hero__image--masked ::slotted(picture img),\n.hero__image--masked ::slotted(.af-hero-image) {\n display: block;\n width: 100%;\n height: auto;\n -webkit-mask-image: var(--af-hero-blob-mask);\n mask-image: var(--af-hero-blob-mask);\n -webkit-mask-size: 100% 100%;\n mask-size: 100% 100%;\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n -webkit-mask-position: center;\n mask-position: center;\n mask-mode: alpha;\n}\n\n/* Fallback: some consumers slot a raw <img> wrapped in a container.\n Descendant selector per repo convention. */\n.hero__image--masked img {\n -webkit-mask-image: var(--af-hero-blob-mask);\n mask-image: var(--af-hero-blob-mask);\n -webkit-mask-size: 100% 100%;\n mask-size: 100% 100%;\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n -webkit-mask-position: center;\n mask-position: center;\n mask-mode: alpha;\n}\n\n/* -----------------------------------------------------------------\n Illustration (inkwell/soft-clay/mist-green -illustration)\n ----------------------------------------------------------------- */\n.hero__illustration {\n flex: 0 0 auto;\n width: 100%;\n max-width: 432px;\n line-height: 0;\n justify-self: end;\n}\n\n.hero__illustration ::slotted(svg),\n.hero__illustration ::slotted(img) {\n width: 100%;\n height: auto;\n display: block;\n border-radius: 16px;\n}\n\n/* Cap inkwell-illustration's slotted SVG so square-aspect art doesn't\n tower past the text column. 540 px matches the live treatment for\n the /industries + /integrations heroes. */\n:host(.hero--inkwell-illustration) .hero__illustration {\n max-width: 540px;\n}\n\n/* -----------------------------------------------------------------\n Logos-below overlap\n Painted in the theme's background token so the strip cleanly overlaps\n the bottom of the photo on the -photo variant. Empty = collapsed.\n ----------------------------------------------------------------- */\n.hero__logos {\n position: relative;\n z-index: 2;\n}\n\n.hero__logos:not(:has(*)) {\n display: none;\n}\n\n/* Photo variant pulls the logos row up so it covers the image's bottom\n edge — matches the ListingHero `.listing-hero__footer` treatment. */\n:host(.hero--inkwell-photo) .hero__logos:has(*) {\n margin-top: -240px;\n padding-top: 48px;\n padding-bottom: 48px;\n background: var(--af-background-base, var(--colour-brand-inkwell, #14343b));\n border-top: 1px solid\n var(--af-background-border-subtle, var(--colour-inkwell-450, #203e45));\n}\n\n/* -----------------------------------------------------------------\n Mobile / tablet\n ----------------------------------------------------------------- */\n@media (max-width: 991px) {\n :host(.hero--pad-default) .hero__inner,\n :host(.hero--pad-loose) .hero__inner {\n padding-top: 112px;\n }\n\n /* Centered variant still needs a touch more clearance under the\n navbar pill on tablet. */\n :host(.hero--inkwell-centered.hero--pad-default) .hero__inner {\n padding-top: 144px;\n }\n\n .hero__grid {\n grid-template-columns: 1fr;\n gap: 32px;\n }\n\n :host(.hero--soft-clay-illustration) .hero__grid,\n :host(.hero--mist-green-illustration) .hero__grid,\n :host(.hero--inkwell-illustration) .hero__grid {\n grid-template-columns: 1fr;\n }\n\n .hero__copy {\n padding-left: 0;\n padding-bottom: 0;\n }\n\n .hero__illustration {\n max-width: 360px;\n margin-inline: auto;\n justify-self: center;\n }\n\n /* Photo on mobile: swap the desktop blob mask for the softer D-curve\n mobile variant, and drop the lift so the image doesn't crash into\n the navbar. */\n .hero__image {\n margin-top: 0;\n min-height: auto;\n }\n\n :host(.hero--inkwell-photo) .hero__image--masked ::slotted(img),\n :host(.hero--inkwell-photo) .hero__image--masked img {\n -webkit-mask-image: var(--af-hero-blob-mask-mobile);\n mask-image: var(--af-hero-blob-mask-mobile);\n }\n\n :host(.hero--inkwell-photo) .hero__logos:has(*) {\n margin-top: 24px;\n padding-top: 32px;\n padding-bottom: 32px;\n background: transparent;\n border-top: none;\n }\n}\n","import { Component, h, Host, Prop, Element } from '@stencil/core';\n\nexport type HeroVariant =\n | 'inkwell-photo'\n | 'inkwell-illustration'\n | 'inkwell-centered'\n | 'soft-clay-illustration'\n | 'mist-green-illustration';\n\nexport type HeroTopPad = 'default' | 'loose';\n\n/**\n * Blob-shape mask used to clip hero photos on the inkwell-photo variant.\n * Extracted from the 7+ hand-rolled copies in the website so the path is\n * defined exactly once. Intrinsic viewBox: 741 × 940.\n */\nconst BLOB_MASK_URL =\n \"url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3NDEgOTQwIj48cGF0aCBkPSJNMTcwLjA2MyAxODEuOTQ1QzIzNC4xNTYgMzAuOTUxNCA0MDguNTE4IC0zOS40OTU1IDU1OS41MTIgMjQuNTk3NUM3MTAuNTA2IDg4LjY5MDQgNzgwLjk1MiAyNjMuMDUzIDcxNi44NTkgNDE0LjA0Nkw1NzAuODQ3IDc1OC4wMzFDNTA2Ljc1NCA5MDkuMDI0IDMzMi4zOTIgOTc5LjQ3MSAxODEuMzk4IDkxNS4zNzhDMzAuNDA0NSA4NTEuMjg1IC00MC4wNDI0IDY3Ni45MjMgMjQuMDUwNiA1MjUuOTI5TDE3MC4wNjMgMTgxLjk0NVoiIGZpbGw9IiMwMDAiLz48L3N2Zz4=')\";\n\n/**\n * Mobile blob shape — simpler D-curve matching the live mobile banner.\n */\nconst BLOB_MASK_URL_MOBILE =\n \"url('data:image/svg+xml;utf8,<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" viewBox=\\\"0 0 1024 768\\\"><path fill=\\\"%23000\\\" d=\\\"M1024 0H384A384 384 0 0 0 384 768H1024V0Z\\\"/></svg>')\";\n\n/**\n * Map each variant to its underlying section theme token. Keeps one source\n * of truth instead of having consumers spell the theme twice.\n */\nconst VARIANT_THEMES: Record<HeroVariant, 'inkwell' | 'soft-clay' | 'mist-green'> = {\n 'inkwell-photo': 'inkwell',\n 'inkwell-illustration': 'inkwell',\n 'inkwell-centered': 'inkwell',\n 'soft-clay-illustration': 'soft-clay',\n 'mist-green-illustration': 'mist-green',\n};\n\n/**\n * Unified top-of-page hero — replaces the 7+ hand-rolled hero implementations\n * the Affinda marketing site (and sibling apps) currently ship. Covers five\n * canonical patterns via the `variant` prop:\n *\n * - `inkwell-photo` — inkwell background, blob-masked photo on the right.\n * Use for: listing / archive pages (blog, case-studies, whitepapers,\n * value-creation, about-us) and industry landing pages that carry a\n * photograph instead of an illustration.\n * - `inkwell-illustration` — inkwell background, illustration on the right.\n * Use for: industry landing pages, /industries, /integrations, /platform\n * with bespoke art.\n * - `inkwell-centered` — inkwell background, centred typography lockup.\n * Slot `<af-paperclip-decoration />` into the `paperclip` slot for the\n * watermark treatment. Use for: `/`, `/au`, `/platform`.\n * - `soft-clay-illustration` — soft-clay background, illustration on the\n * right. Use for: /news, /industries overview, /security, /compare.\n * - `mist-green-illustration` — same layout as soft-clay-illustration but on\n * the mist-green theme. Reserved for future pages.\n *\n * ## Slots\n *\n * - default — heading content (use when richer markup than the `heading`\n * prop can express is needed; e.g. coloured spans or line breaks).\n * - `description` — supporting copy under the heading.\n * - `badge` — optional pre-heading label (pill, version tag).\n * - `buttons` — hero CTAs (usually an `<af-button-group>`).\n * - `image` — the photograph for the `inkwell-photo` variant. Wrapped in\n * the blob mask automatically.\n * - `illustration` — the illustration SVG for `-illustration` variants.\n * - `paperclip` — watermark for `inkwell-centered`. Consumers typically\n * slot `<af-paperclip-decoration />` here.\n * - `logos-below` — overlap row at the bottom gutter (logo carousel etc.).\n * Painted with the theme's background so it cleanly overlaps the image's\n * lower edge on the photo variant.\n *\n * ## Float-navbar handling\n *\n * When `floatNavbar` is true (the default for the inkwell variants) the\n * component sets `data-af-hero-float-navbar=\"true\"` on `<body>` via a\n * lifecycle hook, and a companion rule in `@affinda/css/base.css` applies\n * the `body > header { position: absolute }` / `main { padding-top: 0 }`\n * / navbar-spacer-transparent treatment. Consumers already import\n * `@affinda/css` so no extra import is required. The rule deactivates\n * when the hero is removed from the DOM.\n *\n * ## Image lift\n *\n * The `inkwell-photo` variant renders the photo column with\n * `margin-top: var(--af-hero-image-lift, -260px)`. Override per-page by\n * setting `--af-hero-image-lift` on the `<af-hero>` element.\n */\n@Component({\n tag: 'af-hero',\n styleUrl: 'af-hero.css',\n shadow: false,\n scoped: true,\n})\nexport class AfHero {\n @Element() el!: HTMLElement;\n\n /** Layout / theme preset. See variant docs in the component header. */\n @Prop({ reflect: true }) variant: HeroVariant = 'inkwell-photo';\n\n /** Heading text (use the default slot for richer markup). */\n @Prop() heading: string = '';\n\n /** Description text (use the `description` slot for richer markup). */\n @Prop() description: string = '';\n\n /**\n * Float the site header over the hero and paint the navbar-spacer\n * transparent so the hero background flows to the top of the viewport.\n * Defaults to true for the three inkwell variants, false for the\n * soft-clay / mist-green illustration variants (whose consumers don't\n * always want a full-bleed crown).\n */\n @Prop({ reflect: true }) floatNavbar?: boolean;\n\n /**\n * Top padding preset. `default` = 124px (matches IndustryHero /\n * IllustrationHero). `loose` = 164px (matches ListingHero — gives the\n * image a touch more breathing room above the lockup on archive pages).\n */\n @Prop() topPad: HeroTopPad = 'default';\n\n /** Typography lockup max-width (px). Defaults to 620, matching the live site. */\n @Prop() maxWidth: number = 620;\n\n /**\n * Whether to apply the blob mask to the slotted `image`. Defaults to\n * `true` for `inkwell-photo`. Set `false` if you want to slot in a\n * pre-masked raster or a custom wrapper.\n */\n @Prop() maskImage: boolean = true;\n\n private get resolvedFloatNavbar(): boolean {\n if (typeof this.floatNavbar === 'boolean') return this.floatNavbar;\n return (\n this.variant === 'inkwell-photo' ||\n this.variant === 'inkwell-illustration' ||\n this.variant === 'inkwell-centered'\n );\n }\n\n private get theme() {\n return VARIANT_THEMES[this.variant];\n }\n\n connectedCallback() {\n if (this.resolvedFloatNavbar && typeof document !== 'undefined') {\n document.body.setAttribute('data-af-hero-float-navbar', 'true');\n }\n }\n\n disconnectedCallback() {\n if (typeof document !== 'undefined' && !document.querySelector('af-hero')) {\n document.body.removeAttribute('data-af-hero-float-navbar');\n }\n }\n\n private renderCopy() {\n const alignment = this.variant === 'inkwell-centered' ? 'center' : 'left';\n return (\n <div class=\"hero__copy\">\n <div class=\"hero__badge\">\n <slot name=\"badge\"></slot>\n </div>\n <af-typography-lockup\n heading-size=\"1\"\n text-alignment={alignment}\n max-width={String(this.maxWidth)}\n >\n {this.heading ? <h1>{this.heading}</h1> : <slot></slot>}\n {this.description ? (\n <span slot=\"description\">{this.description}</span>\n ) : (\n <slot name=\"description\" slot=\"description\"></slot>\n )}\n </af-typography-lockup>\n <div class=\"hero__buttons\">\n <slot name=\"buttons\"></slot>\n </div>\n </div>\n );\n }\n\n private renderPhoto() {\n return (\n <div\n class={{\n hero__image: true,\n 'hero__image--masked': this.maskImage,\n }}\n >\n <slot name=\"image\"></slot>\n </div>\n );\n }\n\n private renderIllustration() {\n return (\n <div class=\"hero__illustration\">\n <slot name=\"illustration\"></slot>\n </div>\n );\n }\n\n render() {\n const v = this.variant;\n const centered = v === 'inkwell-centered';\n const hasImage = v === 'inkwell-photo';\n const hasIllustration =\n v === 'inkwell-illustration' ||\n v === 'soft-clay-illustration' ||\n v === 'mist-green-illustration';\n\n return (\n <Host\n class={{\n [`hero--${v}`]: true,\n [`hero--pad-${this.topPad}`]: true,\n [`hero--theme-${this.theme}`]: true,\n 'hero--float-navbar': this.resolvedFloatNavbar,\n }}\n >\n <af-section\n theme={this.theme}\n padding=\"none\"\n container={false}\n class=\"hero__section\"\n >\n {centered && (\n <div class=\"hero__paperclip\" aria-hidden=\"true\">\n <slot name=\"paperclip\"></slot>\n </div>\n )}\n <af-container class=\"hero__inner\">\n {centered ? (\n this.renderCopy()\n ) : (\n <div class=\"hero__grid\">\n {this.renderCopy()}\n {hasImage && this.renderPhoto()}\n {hasIllustration && this.renderIllustration()}\n </div>\n )}\n </af-container>\n <div class=\"hero__logos\">\n <slot name=\"logos-below\"></slot>\n </div>\n </af-section>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -23,7 +23,7 @@ const AfIconBox = /*@__PURE__*/ proxyCustomElement(class AfIconBox extends H {
|
|
|
23
23
|
[`icon-box--size-${this.size}`]: true,
|
|
24
24
|
};
|
|
25
25
|
const iconSize = this.size === 'small' ? 20 : this.size === 'large' ? 48 : 40;
|
|
26
|
-
return (h(Host, { key: '
|
|
26
|
+
return (h(Host, { key: 'b224f522fa4db3081cb97fbe88aec0a4f4198d61' }, h("div", { key: '99ee87a2104918c6d3855cc5d7e90dcbda2d9638', class: containerClasses }, h("af-icon", { key: '778170ce3b08ca6b34289cc6bd1d49ade9583bc1', name: this.icon, size: iconSize }))));
|
|
27
27
|
}
|
|
28
28
|
static get style() { return afIconBoxCss; }
|
|
29
29
|
}, [258, "af-icon-box", {
|
|
@@ -50,6 +50,6 @@ function defineCustomElement() {
|
|
|
50
50
|
}
|
|
51
51
|
|
|
52
52
|
export { AfIconBox as A, defineCustomElement as d };
|
|
53
|
-
//# sourceMappingURL=p-
|
|
53
|
+
//# sourceMappingURL=p-BTZzBVqv.js.map
|
|
54
54
|
|
|
55
|
-
//# sourceMappingURL=p-
|
|
55
|
+
//# sourceMappingURL=p-BTZzBVqv.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-BTZzBVqv.js","mappings":";;;AAAA,MAAM,YAAY,GAAG,6lBAA6lB;;MCqBrmB,SAAS,iBAAAA,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;AANtB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;AAYE;;;;;AAKG;AACK,QAAA,IAAI,CAAA,IAAA,GAAkC,SAAS;AAkBxD;IAhBC,MAAM,GAAA;AACJ,QAAA,MAAM,gBAAgB,GAAG;AACvB,YAAA,UAAU,EAAE,IAAI;AAChB,YAAA,CAAC,kBAAkB,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;SACtC;QAED,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,KAAK,OAAO,GAAG,EAAE,GAAG,IAAI,CAAC,IAAI,KAAK,OAAO,GAAG,EAAE,GAAG,EAAE;QAE7E,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,gBAAgB,EAAA,EAC1B,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAA,CAAY,CAChD,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-icon-box/af-icon-box.css?tag=af-icon-box&encapsulation=scoped","src/components/af-icon-box/af-icon-box.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\n.icon-box {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: 16px;\n background-color: var(--af-background-contrast, var(--colour-brand-mist-green, #c6d5d1));\n color: var(--af-background-icon-default, var(--colour-brand-inkwell, #14343b));\n flex-shrink: 0;\n}\n\n/* Size variants */\n.icon-box--size-small {\n width: 48px;\n height: 48px;\n padding: 14px;\n border-radius: 12px;\n}\n\n.icon-box--size-default {\n width: 64px;\n height: 64px;\n padding: 12px;\n border-radius: 16px;\n}\n\n.icon-box--size-large {\n width: 80px;\n height: 80px;\n padding: 16px;\n border-radius: 20px;\n}\n\n","import { Component, h, Prop, Host } from '@stencil/core';\nimport type { IconName } from '@affinda/icons';\n\n/**\n * IconBox atom - a themed container for displaying an icon with a rounded background.\n * \n * Inherits theme colors from parent Section via CSS custom properties:\n * - Background uses `--af-background-contrast`\n * - Icon color uses `--af-background-icon-default`\n * \n * @example\n * ```html\n * <af-icon-box icon=\"settings\" size=\"default\"></af-icon-box>\n * ```\n */\n@Component({\n tag: 'af-icon-box',\n styleUrl: 'af-icon-box.css',\n shadow: false,\n scoped: true,\n})\nexport class AfIconBox {\n /**\n * The name of the icon to display (from @affinda/icons)\n */\n @Prop() icon!: IconName;\n\n /**\n * Size variant of the icon box\n * - 'small': 48px container, 20px icon\n * - 'default': 64px container, 40px icon\n * - 'large': 80px container, 48px icon\n */\n @Prop() size: 'small' | 'default' | 'large' = 'default';\n\n render() {\n const containerClasses = {\n 'icon-box': true,\n [`icon-box--size-${this.size}`]: true,\n };\n\n const iconSize = this.size === 'small' ? 20 : this.size === 'large' ? 48 : 40;\n\n return (\n <Host>\n <div class={containerClasses}>\n <af-icon name={this.icon} size={iconSize}></af-icon>\n </div>\n </Host>\n );\n }\n}\n\n"],"version":3}
|
|
@@ -32,7 +32,7 @@ const AfNumberBadge = /*@__PURE__*/ proxyCustomElement(class AfNumberBadge exten
|
|
|
32
32
|
height: `${this.size}px`,
|
|
33
33
|
fontSize: `${fontSize}px`,
|
|
34
34
|
};
|
|
35
|
-
return (h(Host, { key: '
|
|
35
|
+
return (h(Host, { key: '6d275b5b5e029c0d34508dca9cd674cfcc686130', role: "img", "aria-label": `Number ${this.number}${isInCircle ? ' badge' : ''}` }, h("span", { key: 'd158b8c0139ac46b892170859ae0d0c43ec2eb9a', class: {
|
|
36
36
|
'badge': true,
|
|
37
37
|
[`variant-${this.variant}`]: true,
|
|
38
38
|
}, style: badgeStyle }, this.number)));
|
|
@@ -58,6 +58,6 @@ function defineCustomElement() {
|
|
|
58
58
|
}
|
|
59
59
|
|
|
60
60
|
export { AfNumberBadge as A, defineCustomElement as d };
|
|
61
|
-
//# sourceMappingURL=p-
|
|
61
|
+
//# sourceMappingURL=p-B_32JVKl.js.map
|
|
62
62
|
|
|
63
|
-
//# sourceMappingURL=p-
|
|
63
|
+
//# sourceMappingURL=p-B_32JVKl.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-B_32JVKl.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,mgBAAmgB;;MCoB/gB,aAAa,iBAAAA,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;AAL1B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAME;;AAEG;AACK,QAAA,IAAM,CAAA,MAAA,GAAsB,CAAC;AAErC;;;;AAIG;AACK,QAAA,IAAO,CAAA,OAAA,GAAuB,UAAU;AAEhD;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAW,EAAE;AA6B1B;IA3BC,MAAM,GAAA;AACJ,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,KAAK,UAAU;AAC9C,QAAA,MAAM,QAAQ,GAAG,UAAU,GAAG,IAAI,CAAC,IAAI,GAAG,GAAG,GAAG,IAAI,CAAC,IAAI,GAAG,GAAG;AAE/D,QAAA,MAAM,UAAU,GAAG;AACjB,YAAA,KAAK,EAAE,CAAA,EAAG,IAAI,CAAC,IAAI,CAAI,EAAA,CAAA;AACvB,YAAA,MAAM,EAAE,CAAA,EAAG,IAAI,CAAC,IAAI,CAAI,EAAA,CAAA;YACxB,QAAQ,EAAE,CAAG,EAAA,QAAQ,CAAI,EAAA,CAAA;SAC1B;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,IAAI,EAAC,KAAK,EACE,YAAA,EAAA,CAAU,OAAA,EAAA,IAAI,CAAC,MAAM,CAAA,EAAG,UAAU,GAAG,QAAQ,GAAG,EAAE,EAAE,EAAA,EAEhE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,OAAO,EAAE,IAAI;AACb,gBAAA,CAAC,WAAW,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;aAClC,EACD,KAAK,EAAE,UAAU,EAEhB,EAAA,IAAI,CAAC,MAAM,CACP,CACF;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-number-badge/af-number-badge.css?tag=af-number-badge&encapsulation=shadow","src/components/af-number-badge/af-number-badge.tsx"],"sourcesContent":[":host {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n line-height: 1;\n user-select: none;\n flex-shrink: 0;\n}\n\n.badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-family: var(--af-font-family-sans, 'NeuSans', Arial, sans-serif);\n font-weight: 500;\n}\n\n/* In Circle variant - filled soft-clay circle */\n.badge.variant-inCircle {\n border-radius: 50%;\n background-color: var(--af-color-brand-soft-clay, #B09670);\n color: var(--af-color-brand-inkwell, #14343B);\n}\n\n/* Outlined variant - text only in mist-green */\n.badge.variant-outlined {\n background-color: transparent;\n color: var(--af-color-brand-mist-green, #C6D5D1);\n}\n\n","import { Component, h, Prop, Host } from '@stencil/core';\n\nexport type NumberBadgeNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;\nexport type NumberBadgeVariant = 'inCircle' | 'outlined';\n\n/**\n * NumberBadge displays numbers 1-10 in either a filled circle or text-only style.\n * Perfect for numbered lists, step indicators, or ordered content.\n * \n * @example\n * ```html\n * <af-number-badge number=\"1\" variant=\"inCircle\" size=\"48\"></af-number-badge>\n * <af-number-badge number=\"5\" variant=\"outlined\" size=\"32\"></af-number-badge>\n * ```\n */\n@Component({\n tag: 'af-number-badge',\n styleUrl: 'af-number-badge.css',\n shadow: true\n})\nexport class AfNumberBadge {\n /**\n * The number to display (1-10)\n */\n @Prop() number: NumberBadgeNumber = 1;\n\n /**\n * Visual variant of the badge\n * - `inCircle` - Number in filled soft-clay circle\n * - `outlined` - Number text only in mist-green\n */\n @Prop() variant: NumberBadgeVariant = 'inCircle';\n\n /**\n * Size of the badge in pixels\n */\n @Prop() size: number = 48;\n\n render() {\n const isInCircle = this.variant === 'inCircle';\n const fontSize = isInCircle ? this.size * 0.4 : this.size * 0.8;\n\n const badgeStyle = {\n width: `${this.size}px`,\n height: `${this.size}px`,\n fontSize: `${fontSize}px`,\n };\n\n return (\n <Host\n role=\"img\"\n aria-label={`Number ${this.number}${isInCircle ? ' badge' : ''}`}\n >\n <span\n class={{\n 'badge': true,\n [`variant-${this.variant}`]: true,\n }}\n style={badgeStyle}\n >\n {this.number}\n </span>\n </Host>\n );\n }\n}\n\n"],"version":3}
|
|
@@ -41,7 +41,7 @@ const AfSwitch = /*@__PURE__*/ proxyCustomElement(class AfSwitch extends H {
|
|
|
41
41
|
'active': this.active,
|
|
42
42
|
'disabled': this.disabled
|
|
43
43
|
};
|
|
44
|
-
return (h(Host, { key: '
|
|
44
|
+
return (h(Host, { key: '21c42503d55acd6e642e303fbb94ae46f061ae4a' }, h("label", { key: 'a01f3dc6b3bde4070afd1289115dd45c699baead', class: switchClasses }, h("input", { key: 'fc19c909701239fb40204eefa9b2754871db5e1b', type: "checkbox", role: "switch", class: "input", checked: this.active, disabled: this.disabled, name: this.name, value: this.value, onChange: this.handleChange }), h("span", { key: 'b09ab35a5157959712e11b1fe336e9d2b3ede0d7', class: trackClasses }, h("span", { key: '51681ef5a21b06777a2dcd3f29ccaadcb8f6a0c6', class: knobClasses })), h("span", { key: 'f17194f5988bce168aa499413ecbe05f7c238b05', class: "label" }, h("slot", { key: 'a659c4750a0ccb3413290a461de82e5714e498a4' })))));
|
|
45
45
|
}
|
|
46
46
|
static get style() { return afSwitchCss; }
|
|
47
47
|
}, [257, "af-switch", {
|
|
@@ -65,6 +65,6 @@ function defineCustomElement() {
|
|
|
65
65
|
}
|
|
66
66
|
|
|
67
67
|
export { AfSwitch as A, defineCustomElement as d };
|
|
68
|
-
//# sourceMappingURL=p-
|
|
68
|
+
//# sourceMappingURL=p-BkTUo72F.js.map
|
|
69
69
|
|
|
70
|
-
//# sourceMappingURL=p-
|
|
70
|
+
//# sourceMappingURL=p-BkTUo72F.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-BkTUo72F.js","mappings":";;AAAA,MAAM,WAAW,GAAG,+3DAA+3D;;MCYt4D,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;AALrB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAME;;AAEG;AACqC,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AAE/D;;AAEG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAiB1C,QAAA,IAAY,CAAA,YAAA,GAAG,MAAK;YAC1B,IAAI,IAAI,CAAC,QAAQ;gBAAE;AACnB,YAAA,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM;AAC1B,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;AAC7C,SAAC;AA4CF;IA1CC,MAAM,GAAA;AACJ,QAAA,MAAM,aAAa,GAAG;AACpB,YAAA,QAAQ,EAAE,IAAI;YACd,QAAQ,EAAE,IAAI,CAAC,MAAM;YACrB,UAAU,EAAE,IAAI,CAAC;SAClB;AAED,QAAA,MAAM,YAAY,GAAG;AACnB,YAAA,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI,CAAC,MAAM;YACrB,UAAU,EAAE,IAAI,CAAC;SAClB;AAED,QAAA,MAAM,WAAW,GAAG;AAClB,YAAA,MAAM,EAAE,IAAI;YACZ,QAAQ,EAAE,IAAI,CAAC,MAAM;YACrB,UAAU,EAAE,IAAI,CAAC;SAClB;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,aAAa,EAAA,EACzB,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,UAAU,EACf,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,OAAO,EACb,OAAO,EAAE,IAAI,CAAC,MAAM,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,CAAA,EACF,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,YAAY,EAAA,EACvB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAE,WAAW,EAAA,CAAS,CAC5B,EACP,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,OAAO,EAAA,EACjB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACR,CACD,CACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-switch/af-switch.css?tag=af-switch&encapsulation=shadow","src/components/af-switch/af-switch.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\n.switch {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n cursor: pointer;\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-size: 14px;\n line-height: 20px;\n color: var(--af-form-control-label, var(--af-typography-body-dark, #14343b));\n user-select: none;\n}\n\n.switch.disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n/* Hidden native input */\n.input {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n\n/* Switch track */\n.track {\n position: relative;\n display: flex;\n align-items: center;\n flex-shrink: 0;\n width: 52px;\n height: 30px;\n border-radius: var(--radii-switch, 9999px);\n background: var(--af-form-control-bg-disabled, var(--af-background-level-1, #e8eeed));\n transition: background 0.2s ease;\n box-sizing: border-box;\n}\n\n/* Track active state */\n.track.active {\n background: var(--af-form-control-bg-checked, var(--colour-brand-inkwell, #14343b));\n}\n\n/* Track disabled state */\n.track.disabled {\n background: var(--af-form-control-bg-disabled, var(--af-background-level-1, #e8eeed));\n}\n\n/* Track active + disabled state */\n.track.active.disabled {\n background: var(--af-form-control-bg-checked-disabled, #708380);\n}\n\n/* Hover state */\n.switch:not(.disabled):hover .track:not(.active) {\n background: var(--af-form-control-stroke, var(--af-background-level-1-hover, #dde6e3));\n}\n\n/* Focus state */\n.input:focus-visible + .track {\n box-shadow: 0 0 0 4px var(--af-background-base, #ffffff), 0 0 0 5px var(--af-form-control-stroke-hover, var(--colour-brand-inkwell, #14343b));\n outline: none;\n}\n\n/* Switch knob */\n.knob {\n position: absolute;\n width: 26px;\n height: 26px;\n border-radius: 50%;\n background: var(--af-form-control-bg, var(--colour-brand-white, #ffffff));\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);\n transition: transform 0.2s ease, background 0.2s ease;\n transform: translateX(2px);\n}\n\n/* Knob active position */\n.knob.active {\n transform: translateX(24px);\n /* When active, knob should contrast with the checked track */\n background: var(--af-form-control-icon, var(--colour-brand-white, #ffffff));\n}\n\n/* Knob disabled state */\n.knob.disabled {\n background: var(--af-form-control-stroke-disabled, var(--colour-inkwell-200, #a1aeb1));\n box-shadow: none;\n}\n\n/* Label styling */\n.label {\n display: flex;\n align-items: center;\n min-height: 24px;\n}\n\n/* Empty label - hide if no content */\n.label:empty {\n display: none;\n}\n","import { Component, h, Prop, Host, Event, EventEmitter } from '@stencil/core';\n\n/**\n * Switch component for toggling between on and off states.\n * \n * @slot - Switch label text\n */\n@Component({\n tag: 'af-switch',\n styleUrl: 'af-switch.css',\n shadow: true\n})\nexport class AfSwitch {\n /**\n * Whether the switch is active (on)\n */\n @Prop({ mutable: true, reflect: true }) active: boolean = false;\n\n /**\n * Whether the switch is disabled\n */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /**\n * The name of the switch for form submission\n */\n @Prop() name?: string;\n\n /**\n * The value of the switch for form submission\n */\n @Prop() value?: string;\n\n /**\n * Emitted when the switch state changes\n */\n @Event() afChange!: EventEmitter<{ active: boolean }>;\n\n private handleChange = () => {\n if (this.disabled) return;\n this.active = !this.active;\n this.afChange.emit({ active: this.active });\n };\n\n render() {\n const switchClasses = {\n 'switch': true,\n 'active': this.active,\n 'disabled': this.disabled\n };\n\n const trackClasses = {\n 'track': true,\n 'active': this.active,\n 'disabled': this.disabled\n };\n\n const knobClasses = {\n 'knob': true,\n 'active': this.active,\n 'disabled': this.disabled\n };\n\n return (\n <Host>\n <label class={switchClasses}>\n <input\n type=\"checkbox\"\n role=\"switch\"\n class=\"input\"\n checked={this.active}\n disabled={this.disabled}\n name={this.name}\n value={this.value}\n onChange={this.handleChange}\n />\n <span class={trackClasses}>\n <span class={knobClasses}></span>\n </span>\n <span class=\"label\">\n <slot></slot>\n </span>\n </label>\n </Host>\n );\n }\n}\n\n"],"version":3}
|
|
@@ -57,7 +57,7 @@ const AfTab = /*@__PURE__*/ proxyCustomElement(class AfTab extends H {
|
|
|
57
57
|
'disabled': this.disabled,
|
|
58
58
|
[`shape-${this.shape}`]: true,
|
|
59
59
|
};
|
|
60
|
-
return (h(Host, { key: '
|
|
60
|
+
return (h(Host, { key: '5127117fc8ffbf1ed62de57af0a3ba569398bd0b' }, h("button", { key: 'e32591d0448724b7ead02702b21c5f31518bf982', class: tabClasses, role: "tab", "aria-selected": this.active ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, tabindex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown, disabled: this.disabled }, this.displayNumber && (h("span", { key: '2d9756769c9a9442e632faac4710eceb6ec7dcb2', class: "number-slot" }, h("slot", { key: 'fc9b02645ada6c015cbdb07db5d02c7f8fee9320', name: "number" }))), this.displayIcon && (h("span", { key: '8f9ef1b8cec03bea2231a0cc19a91537b84de31f', class: "icon-slot" }, h("slot", { key: '9fae54937c7876df37624aa8928dbfe478bec556', name: "icon" }))), h("span", { key: 'e332be1f9007beb3bed7bc4b74480f0fcacd8a6e', class: "label" }, this.label))));
|
|
61
61
|
}
|
|
62
62
|
static get style() { return afTabCss; }
|
|
63
63
|
}, [257, "af-tab", {
|
|
@@ -84,6 +84,6 @@ function defineCustomElement() {
|
|
|
84
84
|
}
|
|
85
85
|
|
|
86
86
|
export { AfTab as A, defineCustomElement as d };
|
|
87
|
-
//# sourceMappingURL=p-
|
|
87
|
+
//# sourceMappingURL=p-BsHk9vlU.js.map
|
|
88
88
|
|
|
89
|
-
//# sourceMappingURL=p-
|
|
89
|
+
//# sourceMappingURL=p-BsHk9vlU.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-Xy0_sffa.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,8nGAA8nG;;MC2BloG,KAAK,iBAAAA,kBAAA,CAAA,MAAA,KAAA,SAAAC,CAAA,CAAA;AALlB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAME;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAW,EAAE;AAE1B;;AAEG;AACsB,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AAEhD;;AAEG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAElD;;;;AAIG;AACsB,QAAA,IAAK,CAAA,KAAA,GAAa,QAAQ;AAEnD;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;AAEpC;;AAEG;AACK,QAAA,IAAa,CAAA,aAAA,GAAY,KAAK;AAY9B,QAAA,IAAW,CAAA,WAAA,GAAG,MAAK;YACzB,IAAI,IAAI,CAAC,QAAQ;gBAAE;AACnB,YAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;AAC7C,SAAC;AAEO,QAAA,IAAA,CAAA,aAAa,GAAG,CAAC,KAAoB,KAAI;YAC/C,IAAI,IAAI,CAAC,QAAQ;gBAAE;AACnB,YAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;gBAC9C,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;;AAE/C,SAAC;AAqCF;IAnCC,MAAM,GAAA;AACJ,QAAA,MAAM,UAAU,GAAG;AACjB,YAAA,KAAK,EAAE,IAAI;YACX,QAAQ,EAAE,IAAI,CAAC,MAAM;YACrB,UAAU,EAAE,IAAI,CAAC,QAAQ;AACzB,YAAA,CAAC,SAAS,IAAI,CAAC,KAAK,CAAE,CAAA,GAAG,IAAI;SAC9B;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,UAAU,EACjB,IAAI,EAAC,KAAK,EAAA,eAAA,EACK,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,EAAA,eAAA,EAC9B,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,SAAS,EACjD,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,EAAE,GAAG,CAAC,EAChC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,EAEtB,IAAI,CAAC,aAAa,KACjB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACvB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAG,CACjB,CACR,EACA,IAAI,CAAC,WAAW,KACf,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,WAAW,EAAA,EACrB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAA,CAAG,CACf,CACR,EACD,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,OAAO,EAAE,EAAA,IAAI,CAAC,KAAK,CAAQ,CAChC,CACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-tab/af-tab.css?tag=af-tab&encapsulation=shadow","src/components/af-tab/af-tab.tsx"],"sourcesContent":["/* Tab component styles */\n:host {\n display: inline-flex;\n flex-shrink: 0;\n}\n\n.tab {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0;\n border: none;\n background: transparent;\n cursor: pointer;\n font-family: var(--typography-headingfont, 'NeuSans', Arial, sans-serif);\n font-weight: var(--font-weight-book, 500);\n font-size: var(--font-size-label-button, 17px);\n line-height: var(--line-height-label-button, 20px);\n text-align: center;\n transition: \n color 0.15s ease,\n background-color 0.15s ease,\n border-color 0.15s ease,\n box-shadow 0.15s ease;\n}\n\n.tab:focus {\n outline: none;\n}\n\n.tab:focus-visible {\n outline: none;\n box-shadow: \n 0 0 0 4px var(--af-background-base, #ffffff),\n 0 0 0 5px var(--af-background-border-active, #8a7049);\n}\n\n/* ==========================================================================\n SLOTS\n ========================================================================== */\n\n.icon-slot,\n.number-slot {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.icon-slot {\n width: 24px;\n height: 24px;\n}\n\n.number-slot {\n width: 24px;\n height: 24px;\n}\n\n.label {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: 24px;\n padding: 0 var(--space-3, 12px);\n}\n\n/* ==========================================================================\n SHAPE: SQUARE\n ========================================================================== */\n\n.tab.shape-square {\n padding: var(--space-3, 12px);\n border-radius: 0;\n overflow: hidden;\n border-bottom: 3px solid transparent;\n}\n\n/* Square - Default state */\n.tab.shape-square:not(.active):not(.disabled) {\n color: var(--af-typography-body-default, #2b484f);\n border-bottom-color: var(--af-background-border-subtle, #e8eeed);\n}\n\n/* Square - Hover state */\n.tab.shape-square:not(.active):not(.disabled):hover {\n color: var(--af-typography-body-dark, #14343b);\n border-bottom-color: var(--af-background-border-default, #d1ddda);\n}\n\n/* Square - Active state */\n.tab.shape-square.active {\n color: var(--af-typography-body-dark, #14343b);\n border-bottom-color: var(--af-background-border-active, #8a7049);\n}\n\n/* Square - Disabled state */\n.tab.shape-square.disabled {\n color: var(--af-typography-body-subtle, #60767b);\n border-bottom-color: transparent;\n cursor: not-allowed;\n opacity: 0.6;\n}\n\n/* Square - Icon colors */\n.tab.shape-square:not(.active):not(.disabled) .icon-slot {\n color: var(--af-typography-body-default, #2b484f);\n}\n\n.tab.shape-square:not(.active):not(.disabled):hover .icon-slot {\n color: var(--af-typography-body-dark, #14343b);\n}\n\n.tab.shape-square.active .icon-slot {\n color: var(--af-typography-body-dark, #14343b);\n}\n\n/* ==========================================================================\n SHAPE: PILL\n ========================================================================== */\n\n.tab.shape-pill {\n padding: var(--space-3, 12px) var(--space-4, 16px);\n border-radius: var(--radius-pill, 999px);\n overflow: hidden;\n}\n\n/* Pill - Default state */\n.tab.shape-pill:not(.active):not(.disabled) {\n color: var(--af-typography-body-default, #2b484f);\n background-color: transparent;\n}\n\n/* Pill - Hover state */\n.tab.shape-pill:not(.active):not(.disabled):hover {\n color: var(--af-typography-body-dark, #14343b);\n background-color: var(--af-background-level-1-hover, #dde6e3);\n}\n\n/* Pill - Active state */\n.tab.shape-pill.active {\n color: var(--af-typography-body-dark, #14343b);\n background-color: var(--af-background-base, #ffffff);\n box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.08);\n}\n\n/* Pill - Disabled state */\n.tab.shape-pill.disabled {\n color: var(--af-typography-body-subtle, #60767b);\n background-color: transparent;\n cursor: not-allowed;\n opacity: 0.6;\n}\n\n/* Pill - Icon colors */\n.tab.shape-pill:not(.active):not(.disabled) .icon-slot {\n color: var(--af-typography-body-default, #2b484f);\n}\n\n.tab.shape-pill:not(.active):not(.disabled):hover .icon-slot {\n color: var(--af-typography-body-dark, #14343b);\n}\n\n.tab.shape-pill.active .icon-slot {\n color: var(--af-typography-body-dark, #14343b);\n}\n\n/* ==========================================================================\n DESKTOP BREAKPOINT ADJUSTMENTS\n Tabs in desktop mode get larger padding via the tab-bar parent\n These are applied via CSS custom properties set by af-tab-bar\n ========================================================================== */\n\n:host([data-breakpoint=\"desktop\"]) .tab.shape-square {\n padding: var(--space-6, 24px) var(--space-5, 20px);\n border-bottom-width: 4px;\n}\n\n:host([data-breakpoint=\"desktop\"]) .tab.shape-pill {\n padding: var(--space-3, 12px) var(--space-4, 16px);\n}\n\n","import { Component, h, Prop, Host, Event, EventEmitter } from '@stencil/core';\n\nexport type TabShape = 'square' | 'pill';\n\n/**\n * Tab component for use within a TabBar.\n * Represents an individual selectable tab with support for icons and number badges.\n * \n * @slot icon - Optional icon to display before the label\n * @slot number - Optional number badge to display\n * \n * @example\n * ```html\n * <af-tab label=\"Overview\" active></af-tab>\n * <af-tab label=\"Details\">\n * <af-icon slot=\"icon\" name=\"document\"></af-icon>\n * </af-tab>\n * <af-tab label=\"Step 1\">\n * <af-number-badge slot=\"number\" number=\"1\"></af-number-badge>\n * </af-tab>\n * ```\n */\n@Component({\n tag: 'af-tab',\n styleUrl: 'af-tab.css',\n shadow: true\n})\nexport class AfTab {\n /**\n * The text label for the tab\n */\n @Prop() label: string = '';\n\n /**\n * Whether the tab is currently active/selected\n */\n @Prop({ reflect: true }) active: boolean = false;\n\n /**\n * Whether the tab is disabled\n */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /**\n * Visual shape variant\n * - `square` - Rectangular tab with bottom border indicator\n * - `pill` - Rounded pill shape with background for active state\n */\n @Prop({ reflect: true }) shape: TabShape = 'square';\n\n /**\n * Whether to show the icon slot\n */\n @Prop() displayIcon: boolean = false;\n\n /**\n * Whether to show the number badge slot\n */\n @Prop() displayNumber: boolean = false;\n\n /**\n * Unique value for the tab, used for programmatic selection\n */\n @Prop() value?: string;\n\n /**\n * Emitted when the tab is clicked\n */\n @Event() afTabClick!: EventEmitter<{ value?: string }>;\n\n private handleClick = () => {\n if (this.disabled) return;\n this.afTabClick.emit({ value: this.value });\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (this.disabled) return;\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n this.afTabClick.emit({ value: this.value });\n }\n };\n\n render() {\n const tabClasses = {\n 'tab': true,\n 'active': this.active,\n 'disabled': this.disabled,\n [`shape-${this.shape}`]: true,\n };\n\n return (\n <Host>\n <button\n class={tabClasses}\n role=\"tab\"\n aria-selected={this.active ? 'true' : 'false'}\n aria-disabled={this.disabled ? 'true' : undefined}\n tabindex={this.disabled ? -1 : 0}\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n disabled={this.disabled}\n >\n {this.displayNumber && (\n <span class=\"number-slot\">\n <slot name=\"number\" />\n </span>\n )}\n {this.displayIcon && (\n <span class=\"icon-slot\">\n <slot name=\"icon\" />\n </span>\n )}\n <span class=\"label\">{this.label}</span>\n </button>\n </Host>\n );\n }\n}\n\n"],"version":3}
|
|
1
|
+
{"file":"p-BsHk9vlU.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,8nGAA8nG;;MC2BloG,KAAK,iBAAAA,kBAAA,CAAA,MAAA,KAAA,SAAAC,CAAA,CAAA;AALlB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAME;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAW,EAAE;AAE1B;;AAEG;AACsB,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AAEhD;;AAEG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAElD;;;;AAIG;AACsB,QAAA,IAAK,CAAA,KAAA,GAAa,QAAQ;AAEnD;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;AAEpC;;AAEG;AACK,QAAA,IAAa,CAAA,aAAA,GAAY,KAAK;AAY9B,QAAA,IAAW,CAAA,WAAA,GAAG,MAAK;YACzB,IAAI,IAAI,CAAC,QAAQ;gBAAE;AACnB,YAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;AAC7C,SAAC;AAEO,QAAA,IAAA,CAAA,aAAa,GAAG,CAAC,KAAoB,KAAI;YAC/C,IAAI,IAAI,CAAC,QAAQ;gBAAE;AACnB,YAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;gBAC9C,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;;AAE/C,SAAC;AAqCF;IAnCC,MAAM,GAAA;AACJ,QAAA,MAAM,UAAU,GAAG;AACjB,YAAA,KAAK,EAAE,IAAI;YACX,QAAQ,EAAE,IAAI,CAAC,MAAM;YACrB,UAAU,EAAE,IAAI,CAAC,QAAQ;AACzB,YAAA,CAAC,SAAS,IAAI,CAAC,KAAK,CAAE,CAAA,GAAG,IAAI;SAC9B;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,UAAU,EACjB,IAAI,EAAC,KAAK,EAAA,eAAA,EACK,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,EAAA,eAAA,EAC9B,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,SAAS,EACjD,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,EAAE,GAAG,CAAC,EAChC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,EAEtB,IAAI,CAAC,aAAa,KACjB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACvB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAG,CACjB,CACR,EACA,IAAI,CAAC,WAAW,KACf,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,WAAW,EAAA,EACrB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAA,CAAG,CACf,CACR,EACD,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,OAAO,EAAE,EAAA,IAAI,CAAC,KAAK,CAAQ,CAChC,CACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-tab/af-tab.css?tag=af-tab&encapsulation=shadow","src/components/af-tab/af-tab.tsx"],"sourcesContent":["/* Tab component styles */\n:host {\n display: inline-flex;\n flex-shrink: 0;\n}\n\n.tab {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0;\n border: none;\n background: transparent;\n cursor: pointer;\n font-family: var(--typography-headingfont, 'NeuSans', Arial, sans-serif);\n font-weight: var(--font-weight-book, 500);\n font-size: var(--font-size-label-button, 17px);\n line-height: var(--line-height-label-button, 20px);\n text-align: center;\n transition: \n color 0.15s ease,\n background-color 0.15s ease,\n border-color 0.15s ease,\n box-shadow 0.15s ease;\n}\n\n.tab:focus {\n outline: none;\n}\n\n.tab:focus-visible {\n outline: none;\n box-shadow: \n 0 0 0 4px var(--af-background-base, #ffffff),\n 0 0 0 5px var(--af-background-border-active, #8a7049);\n}\n\n/* ==========================================================================\n SLOTS\n ========================================================================== */\n\n.icon-slot,\n.number-slot {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.icon-slot {\n width: 24px;\n height: 24px;\n}\n\n.number-slot {\n width: 24px;\n height: 24px;\n}\n\n.label {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: 24px;\n padding: 0 var(--space-3, 12px);\n}\n\n/* ==========================================================================\n SHAPE: SQUARE\n ========================================================================== */\n\n.tab.shape-square {\n padding: var(--space-3, 12px);\n border-radius: 0;\n overflow: hidden;\n border-bottom: 3px solid transparent;\n}\n\n/* Square - Default state */\n.tab.shape-square:not(.active):not(.disabled) {\n color: var(--af-typography-body-default, #2b484f);\n border-bottom-color: var(--af-background-border-subtle, #e8eeed);\n}\n\n/* Square - Hover state */\n.tab.shape-square:not(.active):not(.disabled):hover {\n color: var(--af-typography-body-dark, #14343b);\n border-bottom-color: var(--af-background-border-default, #d1ddda);\n}\n\n/* Square - Active state */\n.tab.shape-square.active {\n color: var(--af-typography-body-dark, #14343b);\n border-bottom-color: var(--af-background-border-active, #8a7049);\n}\n\n/* Square - Disabled state */\n.tab.shape-square.disabled {\n color: var(--af-typography-body-subtle, #60767b);\n border-bottom-color: transparent;\n cursor: not-allowed;\n opacity: 0.6;\n}\n\n/* Square - Icon colors */\n.tab.shape-square:not(.active):not(.disabled) .icon-slot {\n color: var(--af-typography-body-default, #2b484f);\n}\n\n.tab.shape-square:not(.active):not(.disabled):hover .icon-slot {\n color: var(--af-typography-body-dark, #14343b);\n}\n\n.tab.shape-square.active .icon-slot {\n color: var(--af-typography-body-dark, #14343b);\n}\n\n/* ==========================================================================\n SHAPE: PILL\n ========================================================================== */\n\n.tab.shape-pill {\n padding: var(--space-3, 12px) var(--space-4, 16px);\n border-radius: var(--radius-pill, 999px);\n overflow: hidden;\n}\n\n/* Pill - Default state */\n.tab.shape-pill:not(.active):not(.disabled) {\n color: var(--af-typography-body-default, #2b484f);\n background-color: transparent;\n}\n\n/* Pill - Hover state */\n.tab.shape-pill:not(.active):not(.disabled):hover {\n color: var(--af-typography-body-dark, #14343b);\n background-color: var(--af-background-level-1-hover, #dde6e3);\n}\n\n/* Pill - Active state */\n.tab.shape-pill.active {\n color: var(--af-typography-body-dark, #14343b);\n background-color: var(--af-background-base, #ffffff);\n box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.08);\n}\n\n/* Pill - Disabled state */\n.tab.shape-pill.disabled {\n color: var(--af-typography-body-subtle, #60767b);\n background-color: transparent;\n cursor: not-allowed;\n opacity: 0.6;\n}\n\n/* Pill - Icon colors */\n.tab.shape-pill:not(.active):not(.disabled) .icon-slot {\n color: var(--af-typography-body-default, #2b484f);\n}\n\n.tab.shape-pill:not(.active):not(.disabled):hover .icon-slot {\n color: var(--af-typography-body-dark, #14343b);\n}\n\n.tab.shape-pill.active .icon-slot {\n color: var(--af-typography-body-dark, #14343b);\n}\n\n/* ==========================================================================\n DESKTOP BREAKPOINT ADJUSTMENTS\n Tabs in desktop mode get larger padding via the tab-bar parent\n These are applied via CSS custom properties set by af-tab-bar\n ========================================================================== */\n\n:host([data-breakpoint=\"desktop\"]) .tab.shape-square {\n padding: var(--space-6, 24px) var(--space-5, 20px);\n border-bottom-width: 4px;\n}\n\n:host([data-breakpoint=\"desktop\"]) .tab.shape-pill {\n padding: var(--space-3, 12px) var(--space-4, 16px);\n}\n\n","import { Component, h, Prop, Host, Event, EventEmitter } from '@stencil/core';\n\nexport type TabShape = 'square' | 'pill';\n\n/**\n * Tab component for use within a TabBar.\n * Represents an individual selectable tab with support for icons and number badges.\n * \n * @slot icon - Optional icon to display before the label\n * @slot number - Optional number badge to display\n * \n * @example\n * ```html\n * <af-tab label=\"Overview\" active></af-tab>\n * <af-tab label=\"Details\">\n * <af-icon slot=\"icon\" name=\"document\"></af-icon>\n * </af-tab>\n * <af-tab label=\"Step 1\">\n * <af-number-badge slot=\"number\" number=\"1\"></af-number-badge>\n * </af-tab>\n * ```\n */\n@Component({\n tag: 'af-tab',\n styleUrl: 'af-tab.css',\n shadow: true\n})\nexport class AfTab {\n /**\n * The text label for the tab\n */\n @Prop() label: string = '';\n\n /**\n * Whether the tab is currently active/selected\n */\n @Prop({ reflect: true }) active: boolean = false;\n\n /**\n * Whether the tab is disabled\n */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /**\n * Visual shape variant\n * - `square` - Rectangular tab with bottom border indicator\n * - `pill` - Rounded pill shape with background for active state\n */\n @Prop({ reflect: true }) shape: TabShape = 'square';\n\n /**\n * Whether to show the icon slot\n */\n @Prop() displayIcon: boolean = false;\n\n /**\n * Whether to show the number badge slot\n */\n @Prop() displayNumber: boolean = false;\n\n /**\n * Unique value for the tab, used for programmatic selection\n */\n @Prop() value?: string;\n\n /**\n * Emitted when the tab is clicked\n */\n @Event() afTabClick!: EventEmitter<{ value?: string }>;\n\n private handleClick = () => {\n if (this.disabled) return;\n this.afTabClick.emit({ value: this.value });\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (this.disabled) return;\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n this.afTabClick.emit({ value: this.value });\n }\n };\n\n render() {\n const tabClasses = {\n 'tab': true,\n 'active': this.active,\n 'disabled': this.disabled,\n [`shape-${this.shape}`]: true,\n };\n\n return (\n <Host>\n <button\n class={tabClasses}\n role=\"tab\"\n aria-selected={this.active ? 'true' : 'false'}\n aria-disabled={this.disabled ? 'true' : undefined}\n tabindex={this.disabled ? -1 : 0}\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n disabled={this.disabled}\n >\n {this.displayNumber && (\n <span class=\"number-slot\">\n <slot name=\"number\" />\n </span>\n )}\n {this.displayIcon && (\n <span class=\"icon-slot\">\n <slot name=\"icon\" />\n </span>\n )}\n <span class=\"label\">{this.label}</span>\n </button>\n </Host>\n );\n }\n}\n\n"],"version":3}
|
|
@@ -51,7 +51,7 @@ const AfCheckbox = /*@__PURE__*/ proxyCustomElement(class AfCheckbox extends H {
|
|
|
51
51
|
'checked': this.checked || this.indeterminate,
|
|
52
52
|
'disabled': this.disabled
|
|
53
53
|
};
|
|
54
|
-
return (h(Host, { key: '
|
|
54
|
+
return (h(Host, { key: '704dbd9106798984fcbd46e56f8a9baca515bdbf' }, h("label", { key: '81ca6ce4e7a75eb371670a3dda2020e2b0b964fa', class: checkboxClasses }, h("input", { key: 'eb1b53e57dcbdb642d27980059e193d91ecfe926', type: "checkbox", class: "input", ref: (el) => this.inputEl = el ?? undefined, checked: this.checked, disabled: this.disabled, name: this.name, value: this.value, onChange: this.handleChange }), h("span", { key: 'de52fa18c14faf38a40aff2a5d99c679efabcfa3', class: controlClasses }, this.checked && !this.indeterminate && (h("svg", { key: '4e8d59f891090221798d9aae19156ccf51d1b297', class: "icon", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: 'c53cce8b04e2c4c5e08744bc184add29a3e808b5', d: "M13.5 4L6 11.5L2.5 8", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.indeterminate && (h("svg", { key: '420a6222b098df08f66a84e3f92734f7d9a7fc43', class: "icon", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: '8ff3b3d01c6db33f2eb753caea38f0a1feeab717', d: "M3 8H13", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" })))), h("span", { key: '9513888140fbe087a71ef79b4c80a66f6a8e49ec', class: "label" }, h("slot", { key: '4fd9ddb4b6e25ded5f806ad7682a553fba119671' })))));
|
|
55
55
|
}
|
|
56
56
|
static get style() { return afCheckboxCss; }
|
|
57
57
|
}, [257, "af-checkbox", {
|
|
@@ -76,6 +76,6 @@ function defineCustomElement() {
|
|
|
76
76
|
}
|
|
77
77
|
|
|
78
78
|
export { AfCheckbox as A, defineCustomElement as d };
|
|
79
|
-
//# sourceMappingURL=p-
|
|
79
|
+
//# sourceMappingURL=p-BuiXTazC.js.map
|
|
80
80
|
|
|
81
|
-
//# sourceMappingURL=p-
|
|
81
|
+
//# sourceMappingURL=p-BuiXTazC.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-BuiXTazC.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-checkbox/af-checkbox.css?tag=af-checkbox&encapsulation=shadow","src/components/af-checkbox/af-checkbox.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\n.checkbox {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n cursor: pointer;\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-size: 14px;\n line-height: 20px;\n color: var(--af-form-control-label, var(--colour-brand-inkwell, #14343b));\n user-select: none;\n}\n\n.checkbox.disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n/* Hidden native input */\n.input {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n\n/* Custom checkbox control */\n.control {\n position: relative;\n display: block;\n flex-shrink: 0;\n width: 20px;\n height: 20px;\n border-radius: var(--radii-checkbox, 4px);\n /* Use inset box-shadow instead of border to prevent layout shift */\n border: none;\n box-shadow: inset 0 0 0 1px var(--af-form-control-stroke, var(--colour-mistgreen-500, #d0d6d8));\n background: var(--af-form-control-bg, var(--colour-brand-white, #ffffff));\n transition: all 0.15s ease;\n box-sizing: border-box;\n}\n\n/* Checked/indeterminate state */\n.control.checked {\n background: var(--af-form-control-bg-checked, var(--colour-brand-inkwell, #14343b));\n box-shadow: none;\n}\n\n/* Disabled state */\n.control.disabled {\n background: var(--af-form-control-bg-disabled, var(--colour-mistgreen-200, #e8ebeb));\n box-shadow: inset 0 0 0 1px var(--af-form-control-stroke-disabled, var(--colour-mistgreen-500, #d0d6d8));\n}\n\n.control.checked.disabled {\n background: var(--af-form-control-bg-checked-disabled, var(--colour-inkwell-350, #708380));\n box-shadow: none;\n}\n\n/* Hover state */\n.checkbox:not(.disabled):hover .control:not(.checked) {\n box-shadow: inset 0 0 0 1px var(--af-form-control-stroke-hover, var(--colour-brand-inkwell, #14343b));\n}\n\n/* Focus state */\n.input:focus-visible + .control {\n outline: none;\n box-shadow: \n inset 0 0 0 1px var(--af-form-control-stroke, var(--colour-mistgreen-500, #d0d6d8)),\n 0 0 0 4px var(--af-background-base, var(--colour-brand-white, #ffffff)), \n 0 0 0 5px var(--af-form-control-stroke-hover, var(--colour-brand-inkwell, #14343b));\n}\n\n.input:focus-visible + .control.checked {\n box-shadow: \n 0 0 0 4px var(--af-background-base, var(--colour-brand-white, #ffffff)), \n 0 0 0 5px var(--af-form-control-stroke-hover, var(--colour-brand-inkwell, #14343b));\n}\n\n/* Icon styling - absolutely positioned to prevent layout shift */\n.icon {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 16px;\n height: 16px;\n color: var(--af-form-control-icon, var(--colour-brand-white, #ffffff));\n}\n\n/* Label styling */\n.label {\n display: flex;\n align-items: center;\n min-height: 24px;\n}\n\n/* Empty label - hide if no content */\n.label:empty {\n display: none;\n}\n","import { Component, h, Prop, Host, Event, EventEmitter } from '@stencil/core';\n\n/**\n * Checkbox component for selecting multiple options.\n * Supports checked, unchecked, and indeterminate states.\n * \n * @slot - Checkbox label text\n */\n@Component({\n tag: 'af-checkbox',\n styleUrl: 'af-checkbox.css',\n shadow: true\n})\nexport class AfCheckbox {\n /**\n * Whether the checkbox is checked\n */\n @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n /**\n * Whether the checkbox is in an indeterminate state\n */\n @Prop({ reflect: true }) indeterminate: boolean = false;\n\n /**\n * Whether the checkbox is disabled\n */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /**\n * The name of the checkbox for form submission\n */\n @Prop() name?: string;\n\n /**\n * The value of the checkbox for form submission\n */\n @Prop() value?: string;\n\n /**\n * Emitted when the checkbox checked state changes\n */\n @Event() afChange!: EventEmitter<{ checked: boolean }>;\n\n private inputEl?: HTMLInputElement;\n\n private handleChange = () => {\n if (this.disabled) return;\n this.checked = !this.checked;\n this.afChange.emit({ checked: this.checked });\n };\n\n componentDidLoad() {\n if (this.inputEl) {\n this.inputEl.indeterminate = this.indeterminate;\n }\n }\n\n componentDidUpdate() {\n if (this.inputEl) {\n this.inputEl.indeterminate = this.indeterminate;\n }\n }\n\n render() {\n const checkboxClasses = {\n 'checkbox': true,\n 'checked': this.checked,\n 'indeterminate': this.indeterminate,\n 'disabled': this.disabled\n };\n\n const controlClasses = {\n 'control': true,\n 'checked': this.checked || this.indeterminate,\n 'disabled': this.disabled\n };\n\n return (\n <Host>\n <label class={checkboxClasses}>\n <input\n type=\"checkbox\"\n class=\"input\"\n ref={(el) => this.inputEl = el ?? undefined}\n checked={this.checked}\n disabled={this.disabled}\n name={this.name}\n value={this.value}\n onChange={this.handleChange}\n />\n <span class={controlClasses}>\n {this.checked && !this.indeterminate && (\n <svg class=\"icon\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path \n d=\"M13.5 4L6 11.5L2.5 8\" \n stroke=\"currentColor\" \n stroke-width=\"2\" \n stroke-linecap=\"round\" \n stroke-linejoin=\"round\"\n />\n </svg>\n )}\n {this.indeterminate && (\n <svg class=\"icon\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path \n d=\"M3 8H13\" \n stroke=\"currentColor\" \n stroke-width=\"2\" \n stroke-linecap=\"round\"\n />\n </svg>\n )}\n </span>\n <span class=\"label\">\n <slot></slot>\n </span>\n </label>\n </Host>\n );\n }\n}\n\n"],"version":3}
|
|
@@ -11,7 +11,7 @@ const AfLogo = /*@__PURE__*/ proxyCustomElement(class AfLogo extends H {
|
|
|
11
11
|
this.__attachShadow();
|
|
12
12
|
}
|
|
13
13
|
render() {
|
|
14
|
-
return (h(Host, { key: '
|
|
14
|
+
return (h(Host, { key: '6e315eac8e083807fb987237502d1bdaa06a579c' }, h("svg", { key: 'a837202d331f867eecd017d388d952cdbd09c0b0', class: "logo-svg", viewBox: "0 0 9290 1432", "aria-label": "Affinda", role: "img" }, h("path", { key: '425b4957d10c5427134caa67834ea5f306d23d14', fill: "currentColor", d: "M1691.17,452.11c-107.93-107.48-250.13-166.09-401.3-163.79h-739.51l-148.18,237.98h892.96c86.83,0,168.39,33.64,230.09,95.09,63.28,63.04,98.26,147.32,98.26,237.45,0,185.03-149.41,335.36-332.92,335.36H385.66c-82.44,0-149.59-67.64-149.59-150.68s67.32-151.75,149.41-154.23h810.17l152.93-237.98H381.44C171.21,656.62,0,832.45,0,1043.52s172.97,388.48,385.66,388.48h904.91c313.76,0,569.17-257.28,569.17-573.34,0-154.22-59.76-298.53-168.4-406.72l-.17.18Z" }), h("path", { key: '3dbe122502fce7882967a8a77a04b38e61a9d30f', fill: "currentColor", d: "M3265.12,353.81c-21.8-16.16-44.47-30.56-68.02-42.85-75.76-39.69-161-59.89-253.45-59.89-159.6,0-297.92,58.13-411.29,172.82-113.02,114.33-170.49,253.96-170.49,415.01s56.77,304.89,168.73,419.58c112.49,115.21,250.29,173.52,409.35,173.52,89.47,0,173.31-18.97,249.06-56.38,26.19-12.99,51.68-28.1,76.11-45.49v89.05h268.39V276.36h-268.39v77.45ZM3232.07,1013.47c-27.24,48.65-65.38,86.24-116.35,114.87-51.85,29.15-105.11,43.38-162.58,43.38s-107.92-14.05-157.31-43.21c-49.57-28.98-87.88-68.85-117.59-121.53-29.88-53.04-44.29-106.79-44.29-164.39s14.41-111.88,43.94-164.21c29.18-51.99,67.32-91.15,116.36-119.6,49.21-28.63,101.41-42.5,159.94-42.5,90.87,0,165.04,30.56,226.73,93.61,62.23,63.4,92.46,140.68,92.46,236.22,0,63.05-13.54,117.67-41.13,167.02l-.18.35Z" }), h("path", { key: 'e0f15cb4025c3fadcc740fc8f4b47e240f4497c3', fill: "currentColor", d: "M5569.92,278.96h-269.66v1143.74h269.66V278.96Z" }), h("path", { key: 'b7054c3fe019f0c42e8d56338c6034d9843a4a05', fill: "currentColor", d: "M6504.78,328.74c-68.7-45.4-148.11-68.37-235.78-68.37s-163.57,19.96-235.61,59.36c-21.61,11.84-42.69,25.44-63.07,40.81v-89.22h-270.22v1151.2h270.22v-436.03c0-154.94,8.78-223.14,15.81-252.11,15.64-61.13,47.44-110.95,96.81-152.65,47.96-40.28,100.49-59.89,160.58-59.89,51.13,0,89.96,11.13,118.95,34.28,28.81,22.79,48.14,58.13,59.56,109.18,4.56,18.37,12.12,70.14,12.12,211.83v545.57h270.21v-583.02c0-146.29-15.28-253.17-46.56-326.67-32.67-76.85-84.33-138.69-153.2-184.27h.18Z" }), h("path", { key: 'abb1e667124d30d807c41ab1cd446c4568990a18', fill: "currentColor", d: "M7728.49,355.19c-21.79-16.14-44.46-30.52-68.02-42.8-75.75-39.64-161-59.81-253.45-59.81-159.59,0-297.92,58.06-411.28,172.6-113.02,114.19-170.49,253.63-170.49,414.48s56.77,304.68,168.73,419.04c112.49,115.07,250.29,173.3,409.35,173.3,89.47,0,173.3-18.94,249.06-56.3,26.19-12.98,51.67-28.07,76.1-45.43v90.68h268.39V0h-268.39v355.37-.17ZM7695.45,1014.01c-27.24,48.59-65.38,86.13-116.36,114.72-51.85,29.11-104.93,43.32-162.58,43.32s-107.92-14.03-157.31-43.15c-49.56-28.94-87.88-68.76-117.58-121.38-29.88-52.97-44.29-106.64-44.29-164.18s14.41-111.73,43.94-164c29.17-51.92,67.32-91.03,116.35-119.45,49.22-28.59,101.42-42.45,159.95-42.45,90.87,0,165.04,30.52,226.73,93.49,62.22,63.32,92.45,140.5,92.45,235.92,0,62.97-13.53,117.52-41.12,166.81l-.18.35Z" }), h("path", { key: '8cd032a3cb346e1e2bf41b33a8c888d366a9c634', fill: "currentColor", d: "M9021.01,277.76v76.05c-21.79-16.16-44.47-30.56-68.02-42.85-75.75-39.69-161-59.89-253.45-59.89-159.59,0-297.92,58.13-411.29,172.82-113.01,114.33-170.48,253.96-170.48,415.01s56.77,304.89,168.73,419.58c112.49,115.21,250.28,173.52,409.35,173.52,89.46,0,173.3-18.97,249.06-56.38,26.19-12.99,51.67-28.1,76.1-45.49v89.05h268.39V277.76h-268.39ZM8987.97,1013.47c-27.25,48.65-65.39,86.24-116.36,114.87-51.85,29.15-105.1,43.38-162.58,43.38s-107.92-14.05-157.3-43.21c-49.57-28.98-87.89-68.85-117.59-121.53-29.88-53.04-44.29-106.79-44.29-164.39s14.41-111.88,43.94-164.21c29.17-51.99,67.31-91.15,116.35-119.6,49.22-28.63,101.42-42.5,159.95-42.5,90.87,0,165.04,30.56,226.73,93.61,62.22,63.4,92.45,140.68,92.45,236.22,0,63.05-13.53,117.67-41.13,167.02l-.17.35Z" }), h("path", { key: '3087e75a044032e2bf6ff1a49f78d18adb3a0688', fill: "currentColor", d: "M3927.32,519.82c0-140.11,112.99-241.01,251.96-241.01h302.69V0h-302.69c-284.39,0-515.59,233.28-515.59,519.82v902.88h263.81v-445.28h431.9v-265.98h-431.9v-191.62h-.18Z" }), h("path", { key: '3118ef825a1bc7640b1a49abddc5f0b6f1743bf0', fill: "currentColor", d: "M4745.61,519.82c0-140.11,112.99-241.01,251.95-241.01h302.7V0h-302.7c-284.38,0-515.59,233.28-515.59,519.82v902.88h263.82v-445.28h431.89v-265.98h-431.89v-191.62h-.18Z" }))));
|
|
15
15
|
}
|
|
16
16
|
static get style() { return afLogoCss; }
|
|
17
17
|
}, [257, "af-logo"]);
|
|
@@ -30,6 +30,6 @@ function defineCustomElement() {
|
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
export { AfLogo as A, defineCustomElement as d };
|
|
33
|
-
//# sourceMappingURL=p-
|
|
33
|
+
//# sourceMappingURL=p-CImZ9bq8.js.map
|
|
34
34
|
|
|
35
|
-
//# sourceMappingURL=p-
|
|
35
|
+
//# sourceMappingURL=p-CImZ9bq8.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-CImZ9bq8.js","mappings":";;AAAA,MAAM,SAAS,GAAG,0JAA0J;;MCU/J,MAAM,iBAAAA,kBAAA,CAAA,MAAA,MAAA,SAAAC,CAAA,CAAA;;;;;;;;IACjB,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,UAAU,EAChB,OAAO,EAAC,eAAe,EAAA,YAAA,EACZ,SAAS,EACpB,IAAI,EAAC,KAAK,EAAA,EAEV,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,6bAA6b,EAC/b,CAAA,EACF,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,4uBAA4uB,EAC9uB,CAAA,EACF,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,cAAc,EAAC,CAAC,EAAC,gDAAgD,EAAE,CAAA,EAC9E,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,udAAud,EACzd,CAAA,EACF,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,wuBAAwuB,EAC1uB,CAAA,EACF,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,0uBAA0uB,EAC5uB,CAAA,EACF,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,cAAc,EAAC,CAAC,EAAC,sKAAsK,EAAE,CAAA,EACpM,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,cAAc,EAAC,CAAC,EAAC,sKAAsK,EAAE,CAAA,CAChM,CACD;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-logo/af-logo.css?tag=af-logo&encapsulation=shadow","src/components/af-logo/af-logo.tsx"],"sourcesContent":[":host {\n display: inline-block;\n color: var(--af-background-icon-default, var(--colour-brand-inkwell, #14343b));\n}\n\n.logo-svg {\n display: block;\n /* Maintain aspect ratio based on viewBox (9290:1432 ≈ 6.49:1) */\n width: auto;\n height: 22px;\n}\n","import { Component, h, Host } from '@stencil/core';\n\n/**\n * Affinda logo component\n */\n@Component({\n tag: 'af-logo',\n styleUrl: 'af-logo.css',\n shadow: true\n})\nexport class AfLogo {\n render() {\n return (\n <Host>\n <svg \n class=\"logo-svg\" \n viewBox=\"0 0 9290 1432\" \n aria-label=\"Affinda\"\n role=\"img\"\n >\n <path \n fill=\"currentColor\" \n d=\"M1691.17,452.11c-107.93-107.48-250.13-166.09-401.3-163.79h-739.51l-148.18,237.98h892.96c86.83,0,168.39,33.64,230.09,95.09,63.28,63.04,98.26,147.32,98.26,237.45,0,185.03-149.41,335.36-332.92,335.36H385.66c-82.44,0-149.59-67.64-149.59-150.68s67.32-151.75,149.41-154.23h810.17l152.93-237.98H381.44C171.21,656.62,0,832.45,0,1043.52s172.97,388.48,385.66,388.48h904.91c313.76,0,569.17-257.28,569.17-573.34,0-154.22-59.76-298.53-168.4-406.72l-.17.18Z\"\n />\n <path \n fill=\"currentColor\" \n d=\"M3265.12,353.81c-21.8-16.16-44.47-30.56-68.02-42.85-75.76-39.69-161-59.89-253.45-59.89-159.6,0-297.92,58.13-411.29,172.82-113.02,114.33-170.49,253.96-170.49,415.01s56.77,304.89,168.73,419.58c112.49,115.21,250.29,173.52,409.35,173.52,89.47,0,173.31-18.97,249.06-56.38,26.19-12.99,51.68-28.1,76.11-45.49v89.05h268.39V276.36h-268.39v77.45ZM3232.07,1013.47c-27.24,48.65-65.38,86.24-116.35,114.87-51.85,29.15-105.11,43.38-162.58,43.38s-107.92-14.05-157.31-43.21c-49.57-28.98-87.88-68.85-117.59-121.53-29.88-53.04-44.29-106.79-44.29-164.39s14.41-111.88,43.94-164.21c29.18-51.99,67.32-91.15,116.36-119.6,49.21-28.63,101.41-42.5,159.94-42.5,90.87,0,165.04,30.56,226.73,93.61,62.23,63.4,92.46,140.68,92.46,236.22,0,63.05-13.54,117.67-41.13,167.02l-.18.35Z\"\n />\n <path fill=\"currentColor\" d=\"M5569.92,278.96h-269.66v1143.74h269.66V278.96Z\"/>\n <path \n fill=\"currentColor\" \n d=\"M6504.78,328.74c-68.7-45.4-148.11-68.37-235.78-68.37s-163.57,19.96-235.61,59.36c-21.61,11.84-42.69,25.44-63.07,40.81v-89.22h-270.22v1151.2h270.22v-436.03c0-154.94,8.78-223.14,15.81-252.11,15.64-61.13,47.44-110.95,96.81-152.65,47.96-40.28,100.49-59.89,160.58-59.89,51.13,0,89.96,11.13,118.95,34.28,28.81,22.79,48.14,58.13,59.56,109.18,4.56,18.37,12.12,70.14,12.12,211.83v545.57h270.21v-583.02c0-146.29-15.28-253.17-46.56-326.67-32.67-76.85-84.33-138.69-153.2-184.27h.18Z\"\n />\n <path \n fill=\"currentColor\" \n d=\"M7728.49,355.19c-21.79-16.14-44.46-30.52-68.02-42.8-75.75-39.64-161-59.81-253.45-59.81-159.59,0-297.92,58.06-411.28,172.6-113.02,114.19-170.49,253.63-170.49,414.48s56.77,304.68,168.73,419.04c112.49,115.07,250.29,173.3,409.35,173.3,89.47,0,173.3-18.94,249.06-56.3,26.19-12.98,51.67-28.07,76.1-45.43v90.68h268.39V0h-268.39v355.37-.17ZM7695.45,1014.01c-27.24,48.59-65.38,86.13-116.36,114.72-51.85,29.11-104.93,43.32-162.58,43.32s-107.92-14.03-157.31-43.15c-49.56-28.94-87.88-68.76-117.58-121.38-29.88-52.97-44.29-106.64-44.29-164.18s14.41-111.73,43.94-164c29.17-51.92,67.32-91.03,116.35-119.45,49.22-28.59,101.42-42.45,159.95-42.45,90.87,0,165.04,30.52,226.73,93.49,62.22,63.32,92.45,140.5,92.45,235.92,0,62.97-13.53,117.52-41.12,166.81l-.18.35Z\"\n />\n <path \n fill=\"currentColor\" \n d=\"M9021.01,277.76v76.05c-21.79-16.16-44.47-30.56-68.02-42.85-75.75-39.69-161-59.89-253.45-59.89-159.59,0-297.92,58.13-411.29,172.82-113.01,114.33-170.48,253.96-170.48,415.01s56.77,304.89,168.73,419.58c112.49,115.21,250.28,173.52,409.35,173.52,89.46,0,173.3-18.97,249.06-56.38,26.19-12.99,51.67-28.1,76.1-45.49v89.05h268.39V277.76h-268.39ZM8987.97,1013.47c-27.25,48.65-65.39,86.24-116.36,114.87-51.85,29.15-105.1,43.38-162.58,43.38s-107.92-14.05-157.3-43.21c-49.57-28.98-87.89-68.85-117.59-121.53-29.88-53.04-44.29-106.79-44.29-164.39s14.41-111.88,43.94-164.21c29.17-51.99,67.31-91.15,116.35-119.6,49.22-28.63,101.42-42.5,159.95-42.5,90.87,0,165.04,30.56,226.73,93.61,62.22,63.4,92.45,140.68,92.45,236.22,0,63.05-13.53,117.67-41.13,167.02l-.17.35Z\"\n />\n <path fill=\"currentColor\" d=\"M3927.32,519.82c0-140.11,112.99-241.01,251.96-241.01h302.69V0h-302.69c-284.39,0-515.59,233.28-515.59,519.82v902.88h263.81v-445.28h431.9v-265.98h-431.9v-191.62h-.18Z\"/>\n <path fill=\"currentColor\" d=\"M4745.61,519.82c0-140.11,112.99-241.01,251.95-241.01h302.7V0h-302.7c-284.38,0-515.59,233.28-515.59,519.82v902.88h263.82v-445.28h431.89v-265.98h-431.89v-191.62h-.18Z\"/>\n </svg>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -44,7 +44,7 @@ const AfRadio = /*@__PURE__*/ proxyCustomElement(class AfRadio extends H {
|
|
|
44
44
|
'checked': this.checked,
|
|
45
45
|
'disabled': this.disabled
|
|
46
46
|
};
|
|
47
|
-
return (h(Host, { key: '
|
|
47
|
+
return (h(Host, { key: 'ea05800b0695e8cae7caf4aeb8d031c8ac3350dd' }, h("label", { key: '96eaf81e111843a237b9beca9a28e9ab9034bcd8', class: radioClasses, onClick: this.handleClick }, h("input", { key: 'ec299f984e570e0a04c6fb97ec464e5fccd35e8d', type: "radio", class: "input", checked: this.checked, disabled: this.disabled, name: this.name, value: this.value, tabindex: this.disabled ? -1 : 0 }), h("span", { key: '0e430ede39bb2abb0868023b82173532bf5e27b1', class: controlClasses }, h("span", { key: '62753bce135b02a504e0f4e1428a23571cc30c16', class: "dot" })), h("span", { key: 'd7fe1ebf41d9a56e02adf1fe3f1d1e3cbfa3ecbb', class: "label" }, h("slot", { key: 'ceed1e2851b07a0938dc314c32454c811494af07' })))));
|
|
48
48
|
}
|
|
49
49
|
get el() { return this; }
|
|
50
50
|
static get style() { return afRadioCss; }
|
|
@@ -69,6 +69,6 @@ function defineCustomElement() {
|
|
|
69
69
|
}
|
|
70
70
|
|
|
71
71
|
export { AfRadio as A, defineCustomElement as d };
|
|
72
|
-
//# sourceMappingURL=p-
|
|
72
|
+
//# sourceMappingURL=p-CJU2A9Ab.js.map
|
|
73
73
|
|
|
74
|
-
//# sourceMappingURL=p-
|
|
74
|
+
//# sourceMappingURL=p-CJU2A9Ab.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-CJU2A9Ab.js","mappings":";;AAAA,MAAM,UAAU,GAAG,2rEAA2rE;;MCajsE,OAAO,iBAAAA,kBAAA,CAAA,MAAA,OAAA,SAAAC,CAAA,CAAA;AALpB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAQE;;AAEG;AACqC,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AAEhE;;AAEG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAiB1C,QAAA,IAAW,CAAA,WAAA,GAAG,MAAK;AACzB,YAAA,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;gBAAE;;AAGnC,YAAA,IAAI,IAAI,CAAC,IAAI,EAAE;AACb,gBAAA,MAAM,QAAQ,GAAG,QAAQ,CAAC,gBAAgB,CAAC,CAAkB,eAAA,EAAA,IAAI,CAAC,IAAI,CAAI,EAAA,CAAA,CAAC;AAC3E,gBAAA,QAAQ,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;oBACzB,IAAI,KAAK,KAAK,IAAI,CAAC,EAAE,IAAK,KAAa,CAAC,OAAO,EAAE;AAC9C,wBAAA,KAAa,CAAC,OAAO,GAAG,KAAK;;AAElC,iBAAC,CAAC;;AAGJ,YAAA,IAAI,CAAC,OAAO,GAAG,IAAI;YACnB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC;AACnF,SAAC;AAoCF;IAlCC,MAAM,GAAA;AACJ,QAAA,MAAM,YAAY,GAAG;AACnB,YAAA,OAAO,EAAE,IAAI;YACb,UAAU,EAAE,IAAI,CAAC;SAClB;AAED,QAAA,MAAM,cAAc,GAAG;AACrB,YAAA,SAAS,EAAE,IAAI;YACf,SAAS,EAAE,IAAI,CAAC,OAAO;YACvB,UAAU,EAAE,IAAI,CAAC;SAClB;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,YAAY,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,EACnD,CACE,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,OAAO,EACb,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,EAAE,GAAG,CAAC,EAChC,CAAA,EACF,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,cAAc,EAAA,EACzB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,KAAK,EAAA,CAAQ,CACpB,EACP,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,OAAO,EAAA,EACjB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACR,CACD,CACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-radio/af-radio.css?tag=af-radio&encapsulation=shadow","src/components/af-radio/af-radio.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\n.radio {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n cursor: pointer;\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-size: 14px;\n line-height: 20px;\n color: var(--af-form-control-label, var(--colour-brand-inkwell, #14343b));\n user-select: none;\n}\n\n.radio.disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n/* Hidden native input */\n.input {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n\n/* Custom radio control */\n.control {\n position: relative;\n flex-shrink: 0;\n width: 20px;\n height: 20px;\n border-radius: var(--radii-radio, 9999px);\n /* Use inset box-shadow instead of border to prevent layout shift */\n border: none;\n box-shadow: inset 0 0 0 1px var(--af-form-control-stroke, var(--colour-mistgreen-500, #d0d6d8));\n background: var(--af-form-control-bg, var(--colour-brand-white, #ffffff));\n transition: all 0.15s ease;\n box-sizing: border-box;\n}\n\n/* Checked state */\n.control.checked {\n background: var(--af-form-control-bg-checked, var(--colour-brand-inkwell, #14343b));\n box-shadow: none;\n}\n\n/* Disabled state */\n.control.disabled {\n background: var(--af-form-control-bg-disabled, var(--colour-mistgreen-200, #e8ebeb));\n box-shadow: inset 0 0 0 1px var(--af-form-control-stroke-disabled, var(--colour-mistgreen-500, #d0d6d8));\n}\n\n.control.checked.disabled {\n background: var(--af-form-control-bg-checked-disabled, var(--colour-inkwell-350, #708380));\n box-shadow: none;\n}\n\n/* Hover state */\n.radio:not(.disabled):hover .control:not(.checked) {\n box-shadow: inset 0 0 0 1px var(--af-form-control-stroke-hover, var(--colour-brand-inkwell, #14343b));\n}\n\n/* Focus state */\n.input:focus-visible + .control {\n outline: none;\n box-shadow: \n inset 0 0 0 1px var(--af-form-control-stroke, var(--colour-mistgreen-500, #d0d6d8)),\n 0 0 0 4px var(--af-background-base, var(--colour-brand-white, #ffffff)), \n 0 0 0 5px var(--af-form-control-stroke-hover, var(--colour-brand-inkwell, #14343b));\n}\n\n.input:focus-visible + .control.checked {\n box-shadow: \n 0 0 0 4px var(--af-background-base, var(--colour-brand-white, #ffffff)), \n 0 0 0 5px var(--af-form-control-stroke-hover, var(--colour-brand-inkwell, #14343b));\n}\n\n/* Inner dot - always present, visibility controlled by opacity */\n.dot {\n position: absolute;\n inset: 0;\n margin: auto;\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: var(--af-form-control-icon, var(--colour-brand-white, #ffffff));\n opacity: 0;\n transition: opacity 0.15s ease;\n}\n\n.control.checked .dot {\n opacity: 1;\n}\n\n/* Label styling */\n.label {\n display: flex;\n align-items: center;\n min-height: 24px;\n}\n\n/* Empty label - hide if no content */\n.label:empty {\n display: none;\n}\n","import { Component, h, Prop, Host, Event, EventEmitter, Element } from '@stencil/core';\n\n/**\n * Radio component for selecting a single option from a group.\n * Radios with the same `name` prop are mutually exclusive.\n * \n * @slot - Radio label text\n */\n@Component({\n tag: 'af-radio',\n styleUrl: 'af-radio.css',\n shadow: true\n})\nexport class AfRadio {\n @Element() el!: HTMLElement;\n\n /**\n * Whether the radio is checked\n */\n @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n /**\n * Whether the radio is disabled\n */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /**\n * The name of the radio for form submission (radios with same name are grouped)\n */\n @Prop({ reflect: true }) name?: string;\n\n /**\n * The value of the radio for form submission\n */\n @Prop() value?: string;\n\n /**\n * Emitted when the radio checked state changes\n */\n @Event() afChange!: EventEmitter<{ checked: boolean; value?: string; name?: string }>;\n\n private handleClick = () => {\n if (this.disabled || this.checked) return;\n \n // Uncheck other radios with the same name\n if (this.name) {\n const siblings = document.querySelectorAll(`af-radio[name=\"${this.name}\"]`);\n siblings.forEach((radio) => {\n if (radio !== this.el && (radio as any).checked) {\n (radio as any).checked = false;\n }\n });\n }\n \n this.checked = true;\n this.afChange.emit({ checked: this.checked, value: this.value, name: this.name });\n };\n\n render() {\n const radioClasses = {\n 'radio': true,\n 'disabled': this.disabled\n };\n\n const controlClasses = {\n 'control': true,\n 'checked': this.checked,\n 'disabled': this.disabled\n };\n\n return (\n <Host>\n <label class={radioClasses} onClick={this.handleClick}>\n <input\n type=\"radio\"\n class=\"input\"\n checked={this.checked}\n disabled={this.disabled}\n name={this.name}\n value={this.value}\n tabindex={this.disabled ? -1 : 0}\n />\n <span class={controlClasses}>\n <span class=\"dot\"></span>\n </span>\n <span class=\"label\">\n <slot></slot>\n </span>\n </label>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -119,7 +119,7 @@ const AfTypographyLockup = /*@__PURE__*/ proxyCustomElement(class AfTypographyLo
|
|
|
119
119
|
[`align-${effectiveButtonsAlignment}`]: true
|
|
120
120
|
};
|
|
121
121
|
const copyStyle = this.maxWidth ? { maxWidth: `${this.maxWidth}px` } : {};
|
|
122
|
-
return (h(Host, { key: '
|
|
122
|
+
return (h(Host, { key: '0cd130764dedfa1bdc81c96efb6dc07881d4a73b' }, h("div", { key: '3a1c3813247f5729901fed6317761ee8e8bd3bce', class: containerClasses }, h("div", { key: '7e39a31d19f1e2ce5ba5bad248b9461bf9089931', class: "copy", style: copyStyle }, h("div", { key: 'db3c4253ab71421ceef7f8e0ad3c68503567a2ce', class: headingClasses, part: "heading" }, h("slot", { key: 'ee621dde4c0cb166b786b2aa30306276bcdf0866' })), h("div", { key: '2c336c4deac96cf97a9d1ef1d9d3f9b32cb4847a', class: descriptionClasses, part: "body", hidden: !this.hasDescription }, h("slot", { key: '045895fd56acc215c75a1e4ee87f7755017d4bff', name: "description", ref: (el) => (this.descriptionSlot = el) }))), h("div", { key: '03d873fd3502af1b1b9ad83f11a54b2c4c55fb9a', class: buttonsClasses, part: "buttons", hidden: !this.hasButtons }, h("slot", { key: '638bad74073f1243804fd8bba5624c6f811f24c6', name: "buttons", ref: (el) => (this.buttonsSlot = el) })))));
|
|
123
123
|
}
|
|
124
124
|
get el() { return this; }
|
|
125
125
|
static get style() { return afTypographyLockupCss; }
|
|
@@ -152,6 +152,6 @@ function defineCustomElement() {
|
|
|
152
152
|
}
|
|
153
153
|
|
|
154
154
|
export { AfTypographyLockup as A, defineCustomElement as d };
|
|
155
|
-
//# sourceMappingURL=p-
|
|
155
|
+
//# sourceMappingURL=p-CUmn76Kf.js.map
|
|
156
156
|
|
|
157
|
-
//# sourceMappingURL=p-
|
|
157
|
+
//# sourceMappingURL=p-CUmn76Kf.js.map
|