@sondor-technology/sondor-components 1.0.9 → 1.0.10
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/components/accordion/accordion.constants.d.ts +5 -0
- package/dist/components/accordion/accordion.constants.d.ts.map +1 -0
- package/dist/components/accordion/accordion.constants.js +3 -0
- package/dist/components/accordion/accordion.constants.js.map +1 -0
- package/dist/components/accordion/accordion.d.ts +29 -0
- package/dist/components/accordion/accordion.d.ts.map +1 -0
- package/dist/components/accordion/accordion.js +226 -0
- package/dist/components/accordion/accordion.js.map +1 -0
- package/dist/components/alert/alert.constants.d.ts +2 -0
- package/dist/components/alert/alert.constants.d.ts.map +1 -1
- package/dist/components/alert/alert.d.ts +50 -2
- package/dist/components/alert/alert.d.ts.map +1 -1
- package/dist/components/alert/alert.js +285 -16
- package/dist/components/alert/alert.js.map +1 -1
- package/dist/components/avatar/avatar.d.ts +20 -0
- package/dist/components/avatar/avatar.d.ts.map +1 -0
- package/dist/components/avatar/avatar.js +100 -0
- package/dist/components/avatar/avatar.js.map +1 -0
- package/dist/components/back-to-top/back-to-top.d.ts +29 -0
- package/dist/components/back-to-top/back-to-top.d.ts.map +1 -0
- package/dist/components/back-to-top/back-to-top.js +149 -0
- package/dist/components/back-to-top/back-to-top.js.map +1 -0
- package/dist/components/bar-chart/bar-chart.d.ts +42 -0
- package/dist/components/bar-chart/bar-chart.d.ts.map +1 -0
- package/dist/components/bar-chart/bar-chart.js +298 -0
- package/dist/components/bar-chart/bar-chart.js.map +1 -0
- package/dist/components/breadcrumb/breadcrumb.js +2 -2
- package/dist/components/button/button.d.ts +1 -0
- package/dist/components/button/button.d.ts.map +1 -1
- package/dist/components/button/button.js +8 -8
- package/dist/components/button/button.js.map +1 -1
- package/dist/components/button-group/button-group.js +4 -4
- package/dist/components/calendar/calendar.d.ts.map +1 -1
- package/dist/components/calendar/calendar.js +11 -9
- package/dist/components/calendar/calendar.js.map +1 -1
- package/dist/components/chart/chart-base.d.ts +59 -0
- package/dist/components/chart/chart-base.d.ts.map +1 -0
- package/dist/components/chart/chart-base.js +261 -0
- package/dist/components/chart/chart-base.js.map +1 -0
- package/dist/components/chart/chart.utils.d.ts +27 -0
- package/dist/components/chart/chart.utils.d.ts.map +1 -0
- package/dist/components/chart/chart.utils.js +117 -0
- package/dist/components/chart/chart.utils.js.map +1 -0
- package/dist/components/code-block/code-block.d.ts +5 -0
- package/dist/components/code-block/code-block.d.ts.map +1 -1
- package/dist/components/code-block/code-block.js +34 -24
- package/dist/components/code-block/code-block.js.map +1 -1
- package/dist/components/consent/consent.d.ts +63 -0
- package/dist/components/consent/consent.d.ts.map +1 -0
- package/dist/components/consent/consent.js +327 -0
- package/dist/components/consent/consent.js.map +1 -0
- package/dist/components/consent/consent.utils.d.ts +36 -0
- package/dist/components/consent/consent.utils.d.ts.map +1 -0
- package/dist/components/consent/consent.utils.js +82 -0
- package/dist/components/consent/consent.utils.js.map +1 -0
- package/dist/components/contact/contact.d.ts +22 -0
- package/dist/components/contact/contact.d.ts.map +1 -0
- package/dist/components/contact/contact.js +83 -0
- package/dist/components/contact/contact.js.map +1 -0
- package/dist/components/container/container.d.ts +20 -0
- package/dist/components/container/container.d.ts.map +1 -0
- package/dist/components/container/container.js +68 -0
- package/dist/components/container/container.js.map +1 -0
- package/dist/components/content-card/content-card.js +4 -4
- package/dist/components/context-menu/context-menu.d.ts +89 -0
- package/dist/components/context-menu/context-menu.d.ts.map +1 -0
- package/dist/components/context-menu/context-menu.js +414 -0
- package/dist/components/context-menu/context-menu.js.map +1 -0
- package/dist/components/cron-builder/cron-builder.d.ts.map +1 -1
- package/dist/components/cron-builder/cron-builder.js +13 -11
- package/dist/components/cron-builder/cron-builder.js.map +1 -1
- package/dist/components/cta/cta.d.ts +20 -0
- package/dist/components/cta/cta.d.ts.map +1 -0
- package/dist/components/cta/cta.js +64 -0
- package/dist/components/cta/cta.js.map +1 -0
- package/dist/components/drawer/drawer.js +6 -6
- package/dist/components/faq/faq-item.d.ts +22 -0
- package/dist/components/faq/faq-item.d.ts.map +1 -0
- package/dist/components/faq/faq-item.js +117 -0
- package/dist/components/faq/faq-item.js.map +1 -0
- package/dist/components/faq/faq.d.ts +18 -0
- package/dist/components/faq/faq.d.ts.map +1 -0
- package/dist/components/faq/faq.js +38 -0
- package/dist/components/faq/faq.js.map +1 -0
- package/dist/components/feature-grid/feature-grid.d.ts +22 -0
- package/dist/components/feature-grid/feature-grid.d.ts.map +1 -0
- package/dist/components/feature-grid/feature-grid.js +55 -0
- package/dist/components/feature-grid/feature-grid.js.map +1 -0
- package/dist/components/feature-grid/feature.d.ts +18 -0
- package/dist/components/feature-grid/feature.d.ts.map +1 -0
- package/dist/components/feature-grid/feature.js +91 -0
- package/dist/components/feature-grid/feature.js.map +1 -0
- package/dist/components/field/field.js +2 -2
- package/dist/components/footer/footer.js +4 -4
- package/dist/components/form/form-reset.d.ts +7 -0
- package/dist/components/form/form-reset.d.ts.map +1 -0
- package/dist/components/form/form-reset.js +47 -0
- package/dist/components/form/form-reset.js.map +1 -0
- package/dist/components/form/form.d.ts +5 -0
- package/dist/components/form/form.d.ts.map +1 -1
- package/dist/components/form/form.js +17 -3
- package/dist/components/form/form.js.map +1 -1
- package/dist/components/grid/grid.d.ts +5 -0
- package/dist/components/grid/grid.d.ts.map +1 -1
- package/dist/components/grid/grid.js +86 -4
- package/dist/components/grid/grid.js.map +1 -1
- package/dist/components/heat-map/heat-map.d.ts +39 -0
- package/dist/components/heat-map/heat-map.d.ts.map +1 -0
- package/dist/components/heat-map/heat-map.js +306 -0
- package/dist/components/heat-map/heat-map.js.map +1 -0
- package/dist/components/hero/hero.d.ts +26 -0
- package/dist/components/hero/hero.d.ts.map +1 -0
- package/dist/components/hero/hero.js +132 -0
- package/dist/components/hero/hero.js.map +1 -0
- package/dist/components/icon/icon-paths.d.ts +84 -0
- package/dist/components/icon/icon-paths.d.ts.map +1 -1
- package/dist/components/icon/icon-paths.js +89 -0
- package/dist/components/icon/icon-paths.js.map +1 -1
- package/dist/components/icon/icon.d.ts +2 -0
- package/dist/components/icon/icon.d.ts.map +1 -1
- package/dist/components/icon/icon.js +10 -1
- package/dist/components/icon/icon.js.map +1 -1
- package/dist/components/image/image.d.ts +31 -0
- package/dist/components/image/image.d.ts.map +1 -0
- package/dist/components/image/image.js +179 -0
- package/dist/components/image/image.js.map +1 -0
- package/dist/components/input/input.js +4 -4
- package/dist/components/lazy/lazy.d.ts +34 -0
- package/dist/components/lazy/lazy.d.ts.map +1 -0
- package/dist/components/lazy/lazy.js +104 -0
- package/dist/components/lazy/lazy.js.map +1 -0
- package/dist/components/line-chart/line-chart.d.ts +37 -0
- package/dist/components/line-chart/line-chart.d.ts.map +1 -0
- package/dist/components/line-chart/line-chart.js +271 -0
- package/dist/components/line-chart/line-chart.js.map +1 -0
- package/dist/components/list/list-item.d.ts +45 -0
- package/dist/components/list/list-item.d.ts.map +1 -0
- package/dist/components/list/list-item.js +263 -0
- package/dist/components/list/list-item.js.map +1 -0
- package/dist/components/list/list.d.ts +50 -0
- package/dist/components/list/list.d.ts.map +1 -0
- package/dist/components/list/list.js +161 -0
- package/dist/components/list/list.js.map +1 -0
- package/dist/components/logo-cloud/logo-cloud.d.ts +19 -0
- package/dist/components/logo-cloud/logo-cloud.d.ts.map +1 -0
- package/dist/components/logo-cloud/logo-cloud.js +66 -0
- package/dist/components/logo-cloud/logo-cloud.js.map +1 -0
- package/dist/components/modal/modal.d.ts +12 -0
- package/dist/components/modal/modal.d.ts.map +1 -1
- package/dist/components/modal/modal.js +40 -11
- package/dist/components/modal/modal.js.map +1 -1
- package/dist/components/page-layout/page-layout.js +8 -8
- package/dist/components/pagination/pagination.d.ts +15 -0
- package/dist/components/pagination/pagination.d.ts.map +1 -0
- package/dist/components/pagination/pagination.js +126 -0
- package/dist/components/pagination/pagination.js.map +1 -0
- package/dist/components/pagination/pagination.utils.d.ts +3 -0
- package/dist/components/pagination/pagination.utils.d.ts.map +1 -0
- package/dist/components/pagination/pagination.utils.js +19 -0
- package/dist/components/pagination/pagination.utils.js.map +1 -0
- package/dist/components/pie-chart/pie-chart.d.ts +33 -0
- package/dist/components/pie-chart/pie-chart.d.ts.map +1 -0
- package/dist/components/pie-chart/pie-chart.js +233 -0
- package/dist/components/pie-chart/pie-chart.js.map +1 -0
- package/dist/components/pin-input/pin-input.js +4 -4
- package/dist/components/popover/popover.d.ts.map +1 -1
- package/dist/components/popover/popover.js +1 -3
- package/dist/components/popover/popover.js.map +1 -1
- package/dist/components/post-list/post-card.d.ts +16 -0
- package/dist/components/post-list/post-card.d.ts.map +1 -0
- package/dist/components/post-list/post-card.js +22 -0
- package/dist/components/post-list/post-card.js.map +1 -0
- package/dist/components/post-list/post-list.d.ts +17 -0
- package/dist/components/post-list/post-list.d.ts.map +1 -0
- package/dist/components/post-list/post-list.js +23 -0
- package/dist/components/post-list/post-list.js.map +1 -0
- package/dist/components/pricing/pricing-tier.d.ts +23 -0
- package/dist/components/pricing/pricing-tier.d.ts.map +1 -0
- package/dist/components/pricing/pricing-tier.js +144 -0
- package/dist/components/pricing/pricing-tier.js.map +1 -0
- package/dist/components/pricing/pricing.d.ts +18 -0
- package/dist/components/pricing/pricing.d.ts.map +1 -0
- package/dist/components/pricing/pricing.js +38 -0
- package/dist/components/pricing/pricing.js.map +1 -0
- package/dist/components/progress/progress.d.ts +17 -0
- package/dist/components/progress/progress.d.ts.map +1 -0
- package/dist/components/progress/progress.js +109 -0
- package/dist/components/progress/progress.js.map +1 -0
- package/dist/components/project-grid/project-card.d.ts +17 -0
- package/dist/components/project-grid/project-card.d.ts.map +1 -0
- package/dist/components/project-grid/project-card.js +23 -0
- package/dist/components/project-grid/project-card.js.map +1 -0
- package/dist/components/project-grid/project-grid.d.ts +17 -0
- package/dist/components/project-grid/project-grid.d.ts.map +1 -0
- package/dist/components/project-grid/project-grid.js +23 -0
- package/dist/components/project-grid/project-grid.js.map +1 -0
- package/dist/components/radio/radio.js +1 -1
- package/dist/components/reveal/reveal.constants.d.ts +10 -0
- package/dist/components/reveal/reveal.constants.d.ts.map +1 -0
- package/dist/components/reveal/reveal.constants.js +11 -0
- package/dist/components/reveal/reveal.constants.js.map +1 -0
- package/dist/components/reveal/reveal.d.ts +64 -0
- package/dist/components/reveal/reveal.d.ts.map +1 -0
- package/dist/components/reveal/reveal.js +352 -0
- package/dist/components/reveal/reveal.js.map +1 -0
- package/dist/components/scroll-progress/scroll-progress.d.ts +32 -0
- package/dist/components/scroll-progress/scroll-progress.d.ts.map +1 -0
- package/dist/components/scroll-progress/scroll-progress.js +120 -0
- package/dist/components/scroll-progress/scroll-progress.js.map +1 -0
- package/dist/components/section/card-row.d.ts +30 -0
- package/dist/components/section/card-row.d.ts.map +1 -0
- package/dist/components/section/card-row.js +174 -0
- package/dist/components/section/card-row.js.map +1 -0
- package/dist/components/section/card.d.ts +27 -0
- package/dist/components/section/card.d.ts.map +1 -0
- package/dist/components/section/card.js +205 -0
- package/dist/components/section/card.js.map +1 -0
- package/dist/components/section/row-item.d.ts +22 -0
- package/dist/components/section/row-item.d.ts.map +1 -0
- package/dist/components/section/row-item.js +53 -0
- package/dist/components/section/row-item.js.map +1 -0
- package/dist/components/section/section.d.ts +70 -0
- package/dist/components/section/section.d.ts.map +1 -0
- package/dist/components/section/section.js +240 -0
- package/dist/components/section/section.js.map +1 -0
- package/dist/components/select/select.js +3 -3
- package/dist/components/series-nav/series-nav.d.ts +29 -0
- package/dist/components/series-nav/series-nav.d.ts.map +1 -0
- package/dist/components/series-nav/series-nav.js +178 -0
- package/dist/components/series-nav/series-nav.js.map +1 -0
- package/dist/components/site-header/site-header.d.ts +51 -0
- package/dist/components/site-header/site-header.d.ts.map +1 -0
- package/dist/components/site-header/site-header.js +296 -0
- package/dist/components/site-header/site-header.js.map +1 -0
- package/dist/components/skeleton/skeleton.js +7 -7
- package/dist/components/sparkline/sparkline.d.ts +19 -0
- package/dist/components/sparkline/sparkline.d.ts.map +1 -0
- package/dist/components/sparkline/sparkline.js +99 -0
- package/dist/components/sparkline/sparkline.js.map +1 -0
- package/dist/components/spinner/spinner.d.ts +13 -0
- package/dist/components/spinner/spinner.d.ts.map +1 -0
- package/dist/components/spinner/spinner.js +65 -0
- package/dist/components/spinner/spinner.js.map +1 -0
- package/dist/components/split/split.d.ts +23 -0
- package/dist/components/split/split.d.ts.map +1 -0
- package/dist/components/split/split.js +104 -0
- package/dist/components/split/split.js.map +1 -0
- package/dist/components/stack/stack.d.ts +21 -0
- package/dist/components/stack/stack.d.ts.map +1 -0
- package/dist/components/stack/stack.js +102 -0
- package/dist/components/stack/stack.js.map +1 -0
- package/dist/components/stat-card/stat-card.d.ts +35 -0
- package/dist/components/stat-card/stat-card.d.ts.map +1 -0
- package/dist/components/stat-card/stat-card.js +199 -0
- package/dist/components/stat-card/stat-card.js.map +1 -0
- package/dist/components/stats/stat.d.ts +16 -0
- package/dist/components/stats/stat.d.ts.map +1 -0
- package/dist/components/stats/stat.js +51 -0
- package/dist/components/stats/stat.js.map +1 -0
- package/dist/components/stats/stats.d.ts +19 -0
- package/dist/components/stats/stats.d.ts.map +1 -0
- package/dist/components/stats/stats.js +45 -0
- package/dist/components/stats/stats.js.map +1 -0
- package/dist/components/switch/switch.js +2 -2
- package/dist/components/table/data-table.d.ts +115 -27
- package/dist/components/table/data-table.d.ts.map +1 -1
- package/dist/components/table/data-table.js +1012 -411
- package/dist/components/table/data-table.js.map +1 -1
- package/dist/components/table/data-table.utils.d.ts +81 -0
- package/dist/components/table/data-table.utils.d.ts.map +1 -0
- package/dist/components/table/data-table.utils.js +208 -0
- package/dist/components/table/data-table.utils.js.map +1 -0
- package/dist/components/table/table.d.ts +28 -0
- package/dist/components/table/table.d.ts.map +1 -1
- package/dist/components/table/table.js +161 -33
- package/dist/components/table/table.js.map +1 -1
- package/dist/components/team/person.d.ts +19 -0
- package/dist/components/team/person.d.ts.map +1 -0
- package/dist/components/team/person.js +123 -0
- package/dist/components/team/person.js.map +1 -0
- package/dist/components/team/team.d.ts +18 -0
- package/dist/components/team/team.d.ts.map +1 -0
- package/dist/components/team/team.js +36 -0
- package/dist/components/team/team.js.map +1 -0
- package/dist/components/testimonials/testimonial.d.ts +18 -0
- package/dist/components/testimonials/testimonial.d.ts.map +1 -0
- package/dist/components/testimonials/testimonial.js +115 -0
- package/dist/components/testimonials/testimonial.js.map +1 -0
- package/dist/components/testimonials/testimonials.d.ts +18 -0
- package/dist/components/testimonials/testimonials.d.ts.map +1 -0
- package/dist/components/testimonials/testimonials.js +36 -0
- package/dist/components/testimonials/testimonials.js.map +1 -0
- package/dist/components/textarea/textarea.js +3 -3
- package/dist/components/theme-toggle/theme-toggle.js +1 -1
- package/dist/components/time-picker/time-picker.js +3 -3
- package/dist/components/timeline/timeline-item.d.ts +18 -0
- package/dist/components/timeline/timeline-item.d.ts.map +1 -0
- package/dist/components/timeline/timeline-item.js +102 -0
- package/dist/components/timeline/timeline-item.js.map +1 -0
- package/dist/components/timeline/timeline.d.ts +18 -0
- package/dist/components/timeline/timeline.d.ts.map +1 -0
- package/dist/components/timeline/timeline.js +30 -0
- package/dist/components/timeline/timeline.js.map +1 -0
- package/dist/components/toast/toast.d.ts +33 -0
- package/dist/components/toast/toast.d.ts.map +1 -0
- package/dist/components/toast/toast.js +147 -0
- package/dist/components/toast/toast.js.map +1 -0
- package/dist/components/toggle-group/toggle-button.d.ts +2 -0
- package/dist/components/toggle-group/toggle-button.d.ts.map +1 -1
- package/dist/components/toggle-group/toggle-button.js +12 -4
- package/dist/components/toggle-group/toggle-button.js.map +1 -1
- package/dist/components/toggle-group/toggle-group.js +4 -4
- package/dist/components/tooltip/tooltip.js +21 -21
- package/dist/components/vertical-nav/vertical-nav-group.js +3 -3
- package/dist/components/vertical-nav/vertical-nav-item.js +4 -4
- package/dist/components/video-embed/video-embed.d.ts +37 -0
- package/dist/components/video-embed/video-embed.d.ts.map +1 -0
- package/dist/components/video-embed/video-embed.js +183 -0
- package/dist/components/video-embed/video-embed.js.map +1 -0
- package/dist/index.d.ts +107 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +104 -0
- package/dist/index.js.map +1 -0
- package/dist/styles/index.css +205 -2
- package/dist/styles/reset.d.ts.map +1 -1
- package/dist/styles/reset.js +5 -0
- package/dist/styles/reset.js.map +1 -1
- package/package.json +210 -7
- package/src/components/accordion/accordion.constants.ts +5 -0
- package/src/components/accordion/accordion.ts +209 -0
- package/src/components/alert/alert.constants.ts +3 -0
- package/src/components/alert/alert.ts +284 -17
- package/src/components/avatar/avatar.ts +84 -0
- package/src/components/back-to-top/back-to-top.ts +140 -0
- package/src/components/bar-chart/bar-chart.ts +295 -0
- package/src/components/breadcrumb/breadcrumb.ts +2 -2
- package/src/components/button/button.ts +9 -8
- package/src/components/button-group/button-group.ts +4 -4
- package/src/components/calendar/calendar.ts +12 -9
- package/src/components/chart/chart-base.ts +275 -0
- package/src/components/chart/chart.utils.ts +140 -0
- package/src/components/code-block/code-block.ts +35 -24
- package/src/components/consent/consent.ts +312 -0
- package/src/components/consent/consent.utils.ts +110 -0
- package/src/components/contact/contact.ts +83 -0
- package/src/components/container/container.ts +60 -0
- package/src/components/content-card/content-card.ts +4 -4
- package/src/components/context-menu/context-menu.ts +426 -0
- package/src/components/cron-builder/cron-builder.ts +21 -18
- package/src/components/cta/cta.ts +64 -0
- package/src/components/drawer/drawer.ts +6 -6
- package/src/components/faq/faq-item.ts +110 -0
- package/src/components/faq/faq.ts +40 -0
- package/src/components/feature-grid/feature-grid.ts +52 -0
- package/src/components/feature-grid/feature.ts +84 -0
- package/src/components/field/field.ts +2 -2
- package/src/components/footer/footer.ts +4 -4
- package/src/components/form/form-reset.ts +45 -0
- package/src/components/form/form.ts +17 -3
- package/src/components/grid/grid.ts +73 -4
- package/src/components/heat-map/heat-map.ts +292 -0
- package/src/components/hero/hero.ts +132 -0
- package/src/components/icon/icon-paths.ts +92 -1
- package/src/components/icon/icon.ts +8 -1
- package/src/components/image/image.ts +165 -0
- package/src/components/input/input.ts +4 -4
- package/src/components/lazy/lazy.ts +94 -0
- package/src/components/line-chart/line-chart.ts +271 -0
- package/src/components/list/list-item.ts +225 -0
- package/src/components/list/list.ts +157 -0
- package/src/components/logo-cloud/logo-cloud.ts +65 -0
- package/src/components/modal/modal.ts +37 -11
- package/src/components/page-layout/page-layout.ts +8 -8
- package/src/components/pagination/pagination.ts +120 -0
- package/src/components/pagination/pagination.utils.ts +14 -0
- package/src/components/pie-chart/pie-chart.ts +230 -0
- package/src/components/pin-input/pin-input.ts +4 -4
- package/src/components/popover/popover.ts +1 -3
- package/src/components/post-list/post-card.ts +18 -0
- package/src/components/post-list/post-list.ts +19 -0
- package/src/components/pricing/pricing-tier.ts +132 -0
- package/src/components/pricing/pricing.ts +39 -0
- package/src/components/progress/progress.ts +95 -0
- package/src/components/project-grid/project-card.ts +19 -0
- package/src/components/project-grid/project-grid.ts +19 -0
- package/src/components/radio/radio.ts +1 -1
- package/src/components/reveal/reveal.constants.ts +20 -0
- package/src/components/reveal/reveal.ts +344 -0
- package/src/components/scroll-progress/scroll-progress.ts +119 -0
- package/src/components/section/card-row.ts +152 -0
- package/src/components/section/card.ts +197 -0
- package/src/components/section/row-item.ts +38 -0
- package/src/components/section/section.ts +232 -0
- package/src/components/select/select.ts +3 -3
- package/src/components/series-nav/series-nav.ts +164 -0
- package/src/components/site-header/site-header.ts +276 -0
- package/src/components/skeleton/skeleton.ts +7 -7
- package/src/components/sparkline/sparkline.ts +83 -0
- package/src/components/spinner/spinner.ts +55 -0
- package/src/components/split/split.ts +106 -0
- package/src/components/stack/stack.ts +88 -0
- package/src/components/stat-card/stat-card.ts +179 -0
- package/src/components/stats/stat.ts +49 -0
- package/src/components/stats/stats.ts +47 -0
- package/src/components/switch/switch.ts +2 -2
- package/src/components/table/data-table.ts +1015 -425
- package/src/components/table/data-table.utils.ts +276 -0
- package/src/components/table/table.ts +168 -38
- package/src/components/team/person.ts +113 -0
- package/src/components/team/team.ts +37 -0
- package/src/components/testimonials/testimonial.ts +108 -0
- package/src/components/testimonials/testimonials.ts +37 -0
- package/src/components/textarea/textarea.ts +3 -3
- package/src/components/theme-toggle/theme-toggle.ts +1 -1
- package/src/components/time-picker/time-picker.ts +3 -3
- package/src/components/timeline/timeline-item.ts +100 -0
- package/src/components/timeline/timeline.ts +31 -0
- package/src/components/toast/toast.ts +153 -0
- package/src/components/toggle-group/toggle-button.ts +9 -4
- package/src/components/toggle-group/toggle-group.ts +4 -4
- package/src/components/tooltip/tooltip.ts +21 -21
- package/src/components/vertical-nav/vertical-nav-group.ts +3 -3
- package/src/components/vertical-nav/vertical-nav-item.ts +4 -4
- package/src/components/video-embed/video-embed.ts +162 -0
- package/src/index.ts +108 -0
- package/src/styles/globals.css +63 -0
- package/src/styles/index.css +3 -1
- package/src/styles/prose.css +154 -0
- package/src/styles/reset.ts +5 -0
- package/src/styles/theme.css +53 -1
- package/src/styles/typography.css +1 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"scroll-progress.js","sourceRoot":"","sources":["../../../src/components/scroll-progress/scroll-progress.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { PropertyValues, TemplateResult } from "lit";
|
|
2
|
+
import { StSection } from "./section.js";
|
|
3
|
+
/**
|
|
4
|
+
* Base for rows that list cards (blog posts, projects). Cards sit in a grid or a single column and
|
|
5
|
+
* can be filtered by topic: add `filterable` and a button appears for every topic used in the
|
|
6
|
+
* cards' `tags`.
|
|
7
|
+
*/
|
|
8
|
+
export declare abstract class StCardRow extends StSection {
|
|
9
|
+
/** The most columns on wide screens (grid layout). */
|
|
10
|
+
columns: number;
|
|
11
|
+
/** `grid` or one card per row. */
|
|
12
|
+
layout: "grid" | "list";
|
|
13
|
+
/** Shows topic buttons that filter the cards. */
|
|
14
|
+
filterable: boolean;
|
|
15
|
+
filterLabel: string;
|
|
16
|
+
allLabel: string;
|
|
17
|
+
private _tags;
|
|
18
|
+
private _active;
|
|
19
|
+
private _visible;
|
|
20
|
+
private _total;
|
|
21
|
+
static styles: import("lit").CSSResult[];
|
|
22
|
+
private get _cards();
|
|
23
|
+
protected updated(changed: PropertyValues<this>): void;
|
|
24
|
+
private _onCardsChange;
|
|
25
|
+
private _applyFilter;
|
|
26
|
+
private _choose;
|
|
27
|
+
private _renderFilters;
|
|
28
|
+
render(): TemplateResult;
|
|
29
|
+
}
|
|
30
|
+
//# sourceMappingURL=card-row.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"card-row.d.ts","sourceRoot":"","sources":["../../../src/components/section/card-row.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,cAAc,EAAE,cAAc,EAAC,MAAM,KAAK,CAAC;AAEvE,OAAO,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAGvC;;;;GAIG;AACH,8BAAsB,SAAU,SAAQ,SAAS;IAC/C,sDAAsD;IAC5B,OAAO,SAAK;IACtC,kCAAkC;IACO,MAAM,EAAE,MAAM,GAAG,MAAM,CAAU;IAC1E,iDAAiD;IACP,UAAU,UAAS;IACR,WAAW,SAAqB;IACnC,QAAQ,SAAS;IAE1D,OAAO,CAAC,KAAK,CAAgB;IAC7B,OAAO,CAAC,OAAO,CAAM;IACrB,OAAO,CAAC,QAAQ,CAAK;IACrB,OAAO,CAAC,MAAM,CAAK;IAE5B,MAAM,CAAC,MAAM,4BA0DX;IAEF,OAAO,KAAK,MAAM,GAGjB;IAED,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,QAM9C;IAED,OAAO,CAAC,cAAc,CAOpB;IAEF,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,OAAO;IAQf,OAAO,CAAC,cAAc;IAqBtB,MAAM,mBAQL;CACF"}
|
|
@@ -0,0 +1,174 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
import { html, css, nothing } from "lit";
|
|
8
|
+
import { property, state } from "lit/decorators.js";
|
|
9
|
+
import { StSection } from "./section.js";
|
|
10
|
+
import { StCard } from "./card.js";
|
|
11
|
+
/**
|
|
12
|
+
* Base for rows that list cards (blog posts, projects). Cards sit in a grid or a single column and
|
|
13
|
+
* can be filtered by topic: add `filterable` and a button appears for every topic used in the
|
|
14
|
+
* cards' `tags`.
|
|
15
|
+
*/
|
|
16
|
+
export class StCardRow extends StSection {
|
|
17
|
+
constructor() {
|
|
18
|
+
super(...arguments);
|
|
19
|
+
/** The most columns on wide screens (grid layout). */
|
|
20
|
+
this.columns = 3;
|
|
21
|
+
/** `grid` or one card per row. */
|
|
22
|
+
this.layout = "grid";
|
|
23
|
+
/** Shows topic buttons that filter the cards. */
|
|
24
|
+
this.filterable = false;
|
|
25
|
+
this.filterLabel = "Filter by topic";
|
|
26
|
+
this.allLabel = "All";
|
|
27
|
+
this._tags = [];
|
|
28
|
+
this._active = "";
|
|
29
|
+
this._visible = 0;
|
|
30
|
+
this._total = 0;
|
|
31
|
+
this._onCardsChange = (e) => {
|
|
32
|
+
this._onItemsChange(e);
|
|
33
|
+
const cards = this._cards;
|
|
34
|
+
cards.forEach((card) => (card.layout = this.layout));
|
|
35
|
+
this._tags = [...new Set(cards.flatMap((card) => card.tagList))].sort((a, b) => a.localeCompare(b));
|
|
36
|
+
this._total = cards.length;
|
|
37
|
+
this._applyFilter();
|
|
38
|
+
};
|
|
39
|
+
}
|
|
40
|
+
get _cards() {
|
|
41
|
+
const slot = this.renderRoot?.querySelector(".items slot");
|
|
42
|
+
return (slot?.assignedElements({ flatten: true }) ?? []).filter((el) => el instanceof StCard);
|
|
43
|
+
}
|
|
44
|
+
updated(changed) {
|
|
45
|
+
super.updated(changed);
|
|
46
|
+
this.renderRoot
|
|
47
|
+
.querySelector(".items")
|
|
48
|
+
?.style.setProperty("--_columns", String(Math.max(1, this.columns)));
|
|
49
|
+
if (changed.has("layout"))
|
|
50
|
+
this._cards.forEach((card) => (card.layout = this.layout));
|
|
51
|
+
}
|
|
52
|
+
_applyFilter() {
|
|
53
|
+
const cards = this._cards;
|
|
54
|
+
cards.forEach((card) => card.toggleAttribute("hidden", !!this._active && !card.tagList.includes(this._active)));
|
|
55
|
+
this._visible = cards.filter((card) => !card.hidden).length;
|
|
56
|
+
}
|
|
57
|
+
_choose(tag) {
|
|
58
|
+
this._active = tag;
|
|
59
|
+
this._applyFilter();
|
|
60
|
+
this.dispatchEvent(new CustomEvent("st-filter", { detail: { tag: tag || null, count: this._visible }, bubbles: true, composed: true }));
|
|
61
|
+
}
|
|
62
|
+
_renderFilters() {
|
|
63
|
+
if (!this.filterable || this._tags.length === 0)
|
|
64
|
+
return nothing;
|
|
65
|
+
return html `
|
|
66
|
+
<div class="filters" role="group" aria-label=${this.filterLabel}>
|
|
67
|
+
${["", ...this._tags].map((tag) => html `
|
|
68
|
+
<button
|
|
69
|
+
type="button"
|
|
70
|
+
class="chip"
|
|
71
|
+
aria-pressed=${this._active === tag ? "true" : "false"}
|
|
72
|
+
@click=${() => this._choose(tag)}
|
|
73
|
+
>
|
|
74
|
+
${tag || this.allLabel}
|
|
75
|
+
</button>
|
|
76
|
+
`)}
|
|
77
|
+
</div>
|
|
78
|
+
<p class="status" role="status">${this._visible} of ${this._total} shown</p>
|
|
79
|
+
`;
|
|
80
|
+
}
|
|
81
|
+
render() {
|
|
82
|
+
return this.frame(html `
|
|
83
|
+
${this._renderFilters()}
|
|
84
|
+
<div class="items"><slot @slotchange=${this._onCardsChange}></slot></div>
|
|
85
|
+
`, { animated: false });
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
StCardRow.styles = [
|
|
89
|
+
...StSection.styles,
|
|
90
|
+
css `
|
|
91
|
+
.items {
|
|
92
|
+
--_columns: 3;
|
|
93
|
+
--_gap: var(--st-spacing-lg);
|
|
94
|
+
display: grid;
|
|
95
|
+
gap: var(--_gap);
|
|
96
|
+
grid-template-columns: repeat(
|
|
97
|
+
auto-fill,
|
|
98
|
+
minmax(max(16rem, calc((100% - (var(--_columns) - 1) * var(--_gap)) / var(--_columns))), 1fr)
|
|
99
|
+
);
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
:host([layout="list"]) .items {
|
|
103
|
+
grid-template-columns: minmax(0, 1fr);
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.filters {
|
|
107
|
+
display: flex;
|
|
108
|
+
flex-wrap: wrap;
|
|
109
|
+
justify-content: center;
|
|
110
|
+
gap: var(--st-spacing-sm);
|
|
111
|
+
margin-bottom: var(--st-spacing-xl);
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.chip {
|
|
115
|
+
padding: var(--st-spacing-xs) var(--st-spacing-md);
|
|
116
|
+
border: 1px solid var(--st-color-border);
|
|
117
|
+
border-radius: 999px;
|
|
118
|
+
background: none;
|
|
119
|
+
color: var(--st-color-text);
|
|
120
|
+
cursor: pointer;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.chip:hover {
|
|
124
|
+
background: var(--st-color-surface-hover);
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.chip[aria-pressed="true"] {
|
|
128
|
+
border-color: var(--st-color-primary);
|
|
129
|
+
background: var(--st-color-primary);
|
|
130
|
+
color: var(--st-color-bg);
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.chip:focus-visible {
|
|
134
|
+
outline: 2px solid var(--st-color-primary);
|
|
135
|
+
outline-offset: 2px;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.status {
|
|
139
|
+
position: absolute;
|
|
140
|
+
width: 1px;
|
|
141
|
+
height: 1px;
|
|
142
|
+
overflow: hidden;
|
|
143
|
+
clip-path: inset(50%);
|
|
144
|
+
}
|
|
145
|
+
`,
|
|
146
|
+
];
|
|
147
|
+
__decorate([
|
|
148
|
+
property({ type: Number })
|
|
149
|
+
], StCardRow.prototype, "columns", void 0);
|
|
150
|
+
__decorate([
|
|
151
|
+
property({ type: String, reflect: true })
|
|
152
|
+
], StCardRow.prototype, "layout", void 0);
|
|
153
|
+
__decorate([
|
|
154
|
+
property({ type: Boolean, reflect: true })
|
|
155
|
+
], StCardRow.prototype, "filterable", void 0);
|
|
156
|
+
__decorate([
|
|
157
|
+
property({ type: String, attribute: "filter-label" })
|
|
158
|
+
], StCardRow.prototype, "filterLabel", void 0);
|
|
159
|
+
__decorate([
|
|
160
|
+
property({ type: String, attribute: "all-label" })
|
|
161
|
+
], StCardRow.prototype, "allLabel", void 0);
|
|
162
|
+
__decorate([
|
|
163
|
+
state()
|
|
164
|
+
], StCardRow.prototype, "_tags", void 0);
|
|
165
|
+
__decorate([
|
|
166
|
+
state()
|
|
167
|
+
], StCardRow.prototype, "_active", void 0);
|
|
168
|
+
__decorate([
|
|
169
|
+
state()
|
|
170
|
+
], StCardRow.prototype, "_visible", void 0);
|
|
171
|
+
__decorate([
|
|
172
|
+
state()
|
|
173
|
+
], StCardRow.prototype, "_total", void 0);
|
|
174
|
+
//# sourceMappingURL=card-row.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"card-row.js","sourceRoot":"","sources":["../../../src/components/section/card-row.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { TemplateResult } from "lit";
|
|
2
|
+
import { StRowItem } from "./row-item.js";
|
|
3
|
+
/**
|
|
4
|
+
* Base for the cards in a filterable list (a blog post, a project). A card is a link target as a
|
|
5
|
+
* whole: pressing anywhere on it follows the link in its `title`, while that link stays a normal
|
|
6
|
+
* anchor in your markup for keyboard users, screen readers and search engines.
|
|
7
|
+
*
|
|
8
|
+
* Slots: `image`, `meta` (a date, reading time, tags), `title` (a heading containing the link),
|
|
9
|
+
* the default slot (a short description) and `footer` (extra links or buttons).
|
|
10
|
+
*/
|
|
11
|
+
export declare abstract class StCard extends StRowItem {
|
|
12
|
+
/** Comma-separated topics, used by the list's filter, such as `web, design`. */
|
|
13
|
+
tags: string;
|
|
14
|
+
/** Set by the list: a column of cards, or one card per row with the picture beside it. */
|
|
15
|
+
layout: "grid" | "list";
|
|
16
|
+
static styles: import("lit").CSSResult[];
|
|
17
|
+
/** The topics as a clean list. */
|
|
18
|
+
get tagList(): string[];
|
|
19
|
+
connectedCallback(): void;
|
|
20
|
+
disconnectedCallback(): void;
|
|
21
|
+
private _titleLink;
|
|
22
|
+
private _markLinked;
|
|
23
|
+
private _onClick;
|
|
24
|
+
protected renderCard(): TemplateResult;
|
|
25
|
+
render(): TemplateResult;
|
|
26
|
+
}
|
|
27
|
+
//# sourceMappingURL=card.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/components/section/card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,cAAc,EAAC,MAAM,KAAK,CAAC;AAG9C,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;AAExC;;;;;;;GAOG;AACH,8BAAsB,MAAO,SAAQ,SAAS;IAC5C,gFAAgF;IACtD,IAAI,SAAM;IACpC,0FAA0F;IACjD,MAAM,EAAE,MAAM,GAAG,MAAM,CAAU;IAE1E,MAAM,CAAC,MAAM,4BAuHX;IAEF,kCAAkC;IAClC,IAAI,OAAO,IAAI,MAAM,EAAE,CAKtB;IAED,iBAAiB,SAIhB;IAED,oBAAoB,SAGnB;IAED,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,QAAQ,CAQd;IAEF,SAAS,CAAC,UAAU,IAAI,cAAc,CAcrC;IAED,MAAM,mBAEL;CACF"}
|
|
@@ -0,0 +1,205 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
import { html, css } from "lit";
|
|
8
|
+
import { property } from "lit/decorators.js";
|
|
9
|
+
import { resetStyles } from "../../styles/reset.js";
|
|
10
|
+
import { StRowItem } from "./row-item.js";
|
|
11
|
+
/**
|
|
12
|
+
* Base for the cards in a filterable list (a blog post, a project). A card is a link target as a
|
|
13
|
+
* whole: pressing anywhere on it follows the link in its `title`, while that link stays a normal
|
|
14
|
+
* anchor in your markup for keyboard users, screen readers and search engines.
|
|
15
|
+
*
|
|
16
|
+
* Slots: `image`, `meta` (a date, reading time, tags), `title` (a heading containing the link),
|
|
17
|
+
* the default slot (a short description) and `footer` (extra links or buttons).
|
|
18
|
+
*/
|
|
19
|
+
export class StCard extends StRowItem {
|
|
20
|
+
constructor() {
|
|
21
|
+
super(...arguments);
|
|
22
|
+
/** Comma-separated topics, used by the list's filter, such as `web, design`. */
|
|
23
|
+
this.tags = "";
|
|
24
|
+
/** Set by the list: a column of cards, or one card per row with the picture beside it. */
|
|
25
|
+
this.layout = "grid";
|
|
26
|
+
this._onClick = (e) => {
|
|
27
|
+
if (e.defaultPrevented || e.button !== 0)
|
|
28
|
+
return;
|
|
29
|
+
// Real links, buttons and fields inside the card keep doing their own thing.
|
|
30
|
+
const interactive = e
|
|
31
|
+
.composedPath()
|
|
32
|
+
.some((el) => el instanceof HTMLElement && el !== this && el.matches("a, button, input, select, textarea, summary"));
|
|
33
|
+
if (interactive)
|
|
34
|
+
return;
|
|
35
|
+
this._titleLink()?.click();
|
|
36
|
+
};
|
|
37
|
+
}
|
|
38
|
+
/** The topics as a clean list. */
|
|
39
|
+
get tagList() {
|
|
40
|
+
return this.tags
|
|
41
|
+
.split(",")
|
|
42
|
+
.map((tag) => tag.trim())
|
|
43
|
+
.filter(Boolean);
|
|
44
|
+
}
|
|
45
|
+
connectedCallback() {
|
|
46
|
+
super.connectedCallback();
|
|
47
|
+
this.addEventListener("click", this._onClick);
|
|
48
|
+
this._markLinked();
|
|
49
|
+
}
|
|
50
|
+
disconnectedCallback() {
|
|
51
|
+
this.removeEventListener("click", this._onClick);
|
|
52
|
+
super.disconnectedCallback();
|
|
53
|
+
}
|
|
54
|
+
_titleLink() {
|
|
55
|
+
return this.querySelector(':scope > [slot="title"] a[href], :scope > a[slot="title"]');
|
|
56
|
+
}
|
|
57
|
+
_markLinked() {
|
|
58
|
+
this.toggleAttribute("data-linked", !!this._titleLink());
|
|
59
|
+
}
|
|
60
|
+
renderCard() {
|
|
61
|
+
return this.frame(html `
|
|
62
|
+
<article>
|
|
63
|
+
<div class="image"><slot name="image"></slot></div>
|
|
64
|
+
<div class="content">
|
|
65
|
+
<div class="body">
|
|
66
|
+
<slot name="meta"></slot>
|
|
67
|
+
<slot name="title" @slotchange=${() => this._markLinked()}></slot>
|
|
68
|
+
<div class="description"><slot></slot></div>
|
|
69
|
+
</div>
|
|
70
|
+
<div class="footer"><slot name="footer"></slot></div>
|
|
71
|
+
</div>
|
|
72
|
+
</article>
|
|
73
|
+
`);
|
|
74
|
+
}
|
|
75
|
+
render() {
|
|
76
|
+
return this.renderCard();
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
StCard.styles = [
|
|
80
|
+
resetStyles,
|
|
81
|
+
css `
|
|
82
|
+
:host {
|
|
83
|
+
display: block;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
article {
|
|
87
|
+
display: flex;
|
|
88
|
+
flex-direction: column;
|
|
89
|
+
height: 100%;
|
|
90
|
+
overflow: hidden;
|
|
91
|
+
border: 1px solid var(--st-color-border);
|
|
92
|
+
border-radius: var(--st-radius-lg);
|
|
93
|
+
background: var(--st-row-card-bg, var(--st-color-surface));
|
|
94
|
+
transition:
|
|
95
|
+
border-color 0.2s ease,
|
|
96
|
+
box-shadow 0.2s ease;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
:host([data-linked]) article {
|
|
100
|
+
cursor: pointer;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
:host([data-linked]:hover) article {
|
|
104
|
+
border-color: var(--st-color-primary);
|
|
105
|
+
box-shadow: var(--st-shadow-md);
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
:host(:focus-within) article {
|
|
109
|
+
border-color: var(--st-color-primary);
|
|
110
|
+
outline: 2px solid var(--st-color-primary);
|
|
111
|
+
outline-offset: 2px;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.image:empty,
|
|
115
|
+
.image[hidden] {
|
|
116
|
+
display: none;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.image ::slotted(*) {
|
|
120
|
+
display: block;
|
|
121
|
+
width: 100%;
|
|
122
|
+
height: 100%;
|
|
123
|
+
aspect-ratio: 16 / 9;
|
|
124
|
+
object-fit: cover;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.body {
|
|
128
|
+
display: grid;
|
|
129
|
+
flex: 1;
|
|
130
|
+
align-content: start;
|
|
131
|
+
gap: var(--st-spacing-sm);
|
|
132
|
+
padding: var(--st-spacing-lg);
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
::slotted([slot="meta"]) {
|
|
136
|
+
display: flex;
|
|
137
|
+
flex-wrap: wrap;
|
|
138
|
+
gap: var(--st-spacing-sm);
|
|
139
|
+
color: var(--st-color-text-muted);
|
|
140
|
+
font-size: var(--st-font-size-sm);
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
::slotted([slot="title"]) {
|
|
144
|
+
margin: 0 !important;
|
|
145
|
+
font-size: var(--st-font-size-xl) !important;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.description {
|
|
149
|
+
color: var(--st-color-text-muted);
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.description ::slotted(*) {
|
|
153
|
+
margin: 0;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.footer {
|
|
157
|
+
display: flex;
|
|
158
|
+
flex-wrap: wrap;
|
|
159
|
+
gap: var(--st-spacing-md);
|
|
160
|
+
padding: 0 var(--st-spacing-lg) var(--st-spacing-lg);
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.footer[hidden] {
|
|
164
|
+
display: none;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.content {
|
|
168
|
+
display: contents;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
/* One card per row, with the picture beside the text. */
|
|
172
|
+
@media (min-width: 40rem) {
|
|
173
|
+
:host([layout="list"]) article {
|
|
174
|
+
flex-direction: row;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
:host([layout="list"]) .image {
|
|
178
|
+
flex: 0 0 34%;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
:host([layout="list"]) .image ::slotted(*) {
|
|
182
|
+
aspect-ratio: auto;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
:host([layout="list"]) .content {
|
|
186
|
+
display: flex;
|
|
187
|
+
flex: 1;
|
|
188
|
+
flex-direction: column;
|
|
189
|
+
}
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
@media (prefers-reduced-motion: reduce) {
|
|
193
|
+
article {
|
|
194
|
+
transition: none;
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
`,
|
|
198
|
+
];
|
|
199
|
+
__decorate([
|
|
200
|
+
property({ type: String })
|
|
201
|
+
], StCard.prototype, "tags", void 0);
|
|
202
|
+
__decorate([
|
|
203
|
+
property({ type: String, reflect: true })
|
|
204
|
+
], StCard.prototype, "layout", void 0);
|
|
205
|
+
//# sourceMappingURL=card.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../src/components/section/card.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,IAAI,EAAE,GAAG,EAAiB,MAAM,KAAK,CAAC;AAC9C,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;AAExC;;;;;;;GAOG;AACH,MAAM,OAAgB,MAAO,SAAQ,SAAS;IAA9C;;QACE,gFAAgF;QACtD,SAAI,GAAG,EAAE,CAAC;QACpC,0FAA0F;QACjD,WAAM,GAAoB,MAAM,CAAC;QAsJlE,aAAQ,GAAG,CAAC,CAAa,EAAE,EAAE;YACnC,IAAI,CAAC,CAAC,gBAAgB,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC;gBAAE,OAAO;YACjD,6EAA6E;YAC7E,MAAM,WAAW,GAAG,CAAC;iBAClB,YAAY,EAAE;iBACd,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,YAAY,WAAW,IAAI,EAAE,KAAK,IAAI,IAAI,EAAE,CAAC,OAAO,CAAC,6CAA6C,CAAC,CAAC,CAAC;YACvH,IAAI,WAAW;gBAAE,OAAO;YACxB,IAAI,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,CAAC;QAC7B,CAAC,CAAC;IAqBJ,CAAC;IAxDC,kCAAkC;IAClC,IAAI,OAAO;QACT,OAAO,IAAI,CAAC,IAAI;aACb,KAAK,CAAC,GAAG,CAAC;aACV,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;aACxB,MAAM,CAAC,OAAO,CAAC,CAAC;IACrB,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC9C,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;QACjD,KAAK,CAAC,oBAAoB,EAAE,CAAC;IAC/B,CAAC;IAEO,UAAU;QAChB,OAAO,IAAI,CAAC,aAAa,CAAoB,2DAA2D,CAAC,CAAC;IAC5G,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,eAAe,CAAC,aAAa,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC;IAC3D,CAAC;IAYS,UAAU;QAClB,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAA;;;;;;6CAMmB,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE;;;;;;KAMhE,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,UAAU,EAAE,CAAC;IAC3B,CAAC;CACF;AAjLQ,aAAM,GAAG;IACd,WAAW;IACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoHF;CACF,AAvHY,CAuHX;AA3HwB;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;oCAAW;AAEK;IAAxC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;sCAAkC"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { LitElement, TemplateResult } from "lit";
|
|
2
|
+
import type { RevealEffect } from "../reveal/reveal.constants.js";
|
|
3
|
+
import "../reveal/reveal.js";
|
|
4
|
+
/**
|
|
5
|
+
* Base class for the repeated items inside a row (a feature, a stat, a testimonial...). It makes
|
|
6
|
+
* each item animate in as it is scrolled to. The row hands down its own `reveal` setting and a
|
|
7
|
+
* small delay by position, so items arrive one after another. Set `reveal` on an item to
|
|
8
|
+
* override the row.
|
|
9
|
+
*/
|
|
10
|
+
export declare abstract class StRowItem extends LitElement {
|
|
11
|
+
/** How the item animates in. Leave empty to follow the row it is in. */
|
|
12
|
+
reveal: RevealEffect | "";
|
|
13
|
+
/** The row's own effect, set by the row. */
|
|
14
|
+
inheritedReveal: RevealEffect;
|
|
15
|
+
/** Milliseconds before the animation starts. Set by the row. */
|
|
16
|
+
revealDelay: number;
|
|
17
|
+
/** The effect in use: the item's own, otherwise its row's. */
|
|
18
|
+
get effect(): RevealEffect;
|
|
19
|
+
/** Wraps the item's content so it animates in. */
|
|
20
|
+
protected frame(content: TemplateResult): TemplateResult;
|
|
21
|
+
}
|
|
22
|
+
//# sourceMappingURL=row-item.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"row-item.d.ts","sourceRoot":"","sources":["../../../src/components/section/row-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAQ,cAAc,EAAC,MAAM,KAAK,CAAC;AAErD,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,+BAA+B,CAAC;AAChE,OAAO,qBAAqB,CAAC;AAE7B;;;;;GAKG;AACH,8BAAsB,SAAU,SAAQ,UAAU;IAChD,wEAAwE;IAC/B,MAAM,EAAE,YAAY,GAAG,EAAE,CAAM;IACxE,4CAA4C;IACd,eAAe,EAAE,YAAY,CAAc;IACzE,gEAAgE;IACX,WAAW,SAAK;IAErE,8DAA8D;IAC9D,IAAI,MAAM,IAAI,YAAY,CAEzB;IAED,kDAAkD;IAClD,SAAS,CAAC,KAAK,CAAC,OAAO,EAAE,cAAc,GAAG,cAAc,CAWvD;CACF"}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
import { LitElement, html } from "lit";
|
|
8
|
+
import { property } from "lit/decorators.js";
|
|
9
|
+
import "../reveal/reveal.js";
|
|
10
|
+
/**
|
|
11
|
+
* Base class for the repeated items inside a row (a feature, a stat, a testimonial...). It makes
|
|
12
|
+
* each item animate in as it is scrolled to. The row hands down its own `reveal` setting and a
|
|
13
|
+
* small delay by position, so items arrive one after another. Set `reveal` on an item to
|
|
14
|
+
* override the row.
|
|
15
|
+
*/
|
|
16
|
+
export class StRowItem extends LitElement {
|
|
17
|
+
constructor() {
|
|
18
|
+
super(...arguments);
|
|
19
|
+
/** How the item animates in. Leave empty to follow the row it is in. */
|
|
20
|
+
this.reveal = "";
|
|
21
|
+
/** The row's own effect, set by the row. */
|
|
22
|
+
this.inheritedReveal = "slide-up";
|
|
23
|
+
/** Milliseconds before the animation starts. Set by the row. */
|
|
24
|
+
this.revealDelay = 0;
|
|
25
|
+
}
|
|
26
|
+
/** The effect in use: the item's own, otherwise its row's. */
|
|
27
|
+
get effect() {
|
|
28
|
+
return this.reveal || this.inheritedReveal;
|
|
29
|
+
}
|
|
30
|
+
/** Wraps the item's content so it animates in. */
|
|
31
|
+
frame(content) {
|
|
32
|
+
return html `
|
|
33
|
+
<st-reveal
|
|
34
|
+
effect=${this.effect}
|
|
35
|
+
delay=${this.revealDelay}
|
|
36
|
+
offset="5"
|
|
37
|
+
style="display: block; height: 100%"
|
|
38
|
+
>
|
|
39
|
+
${content}
|
|
40
|
+
</st-reveal>
|
|
41
|
+
`;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
__decorate([
|
|
45
|
+
property({ type: String, reflect: true })
|
|
46
|
+
], StRowItem.prototype, "reveal", void 0);
|
|
47
|
+
__decorate([
|
|
48
|
+
property({ attribute: false })
|
|
49
|
+
], StRowItem.prototype, "inheritedReveal", void 0);
|
|
50
|
+
__decorate([
|
|
51
|
+
property({ type: Number, attribute: "reveal-delay" })
|
|
52
|
+
], StRowItem.prototype, "revealDelay", void 0);
|
|
53
|
+
//# sourceMappingURL=row-item.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"row-item.js","sourceRoot":"","sources":["../../../src/components/section/row-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,UAAU,EAAE,IAAI,EAAiB,MAAM,KAAK,CAAC;AACrD,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAE3C,OAAO,qBAAqB,CAAC;AAE7B;;;;;GAKG;AACH,MAAM,OAAgB,SAAU,SAAQ,UAAU;IAAlD;;QACE,wEAAwE;QAC/B,WAAM,GAAsB,EAAE,CAAC;QACxE,4CAA4C;QACd,oBAAe,GAAiB,UAAU,CAAC;QACzE,gEAAgE;QACX,gBAAW,GAAG,CAAC,CAAC;IAoBvE,CAAC;IAlBC,8DAA8D;IAC9D,IAAI,MAAM;QACR,OAAO,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,eAAe,CAAC;IAC7C,CAAC;IAED,kDAAkD;IACxC,KAAK,CAAC,OAAuB;QACrC,OAAO,IAAI,CAAA;;iBAEE,IAAI,CAAC,MAAM;gBACZ,IAAI,CAAC,WAAW;;;;UAItB,OAAO;;KAEZ,CAAC;IACJ,CAAC;CACF;AAxB0C;IAAxC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;yCAAgC;AAE1C;IAA7B,QAAQ,CAAC,EAAC,SAAS,EAAE,KAAK,EAAC,CAAC;kDAA4C;AAEpB;IAApD,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAC,CAAC;8CAAiB"}
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import { LitElement, PropertyValues, TemplateResult } from "lit";
|
|
2
|
+
import type { ContainerSize } from "../container/container.js";
|
|
3
|
+
import type { RevealEffect } from "../reveal/reveal.constants.js";
|
|
4
|
+
import "../container/container.js";
|
|
5
|
+
import "../reveal/reveal.js";
|
|
6
|
+
export declare const sectionTones: readonly ["auto", "default", "surface", "accent"];
|
|
7
|
+
export type SectionTone = (typeof sectionTones)[number];
|
|
8
|
+
export declare const sectionSpaces: readonly ["none", "sm", "md", "lg"];
|
|
9
|
+
export type SectionSpace = (typeof sectionSpaces)[number];
|
|
10
|
+
/**
|
|
11
|
+
* A full-width row of a page: a background, responsive vertical spacing, a centred container and
|
|
12
|
+
* an optional header made of an eyebrow, title and lead. Stack rows to build a page. The ready-made
|
|
13
|
+
* rows (hero, features, call to action and so on) are all built on it, so every row shares the
|
|
14
|
+
* same spacing, header, tones and animation, and any row can follow any other.
|
|
15
|
+
*
|
|
16
|
+
* Slots: `eyebrow`, `title`, `lead` (the header: slot real headings so search engines and screen
|
|
17
|
+
* readers understand the page outline) and the default slot for the content.
|
|
18
|
+
*
|
|
19
|
+
* Tone: by default (`auto`) neighbouring rows alternate between the page and surface colours, so
|
|
20
|
+
* stacked rows are visually separated with no effort. Set `tone` to choose one yourself.
|
|
21
|
+
*
|
|
22
|
+
* Animation: the header and content animate in as they scroll into view (`reveal`, turn off with
|
|
23
|
+
* `reveal="none"`). Give the host an `id` to link to it (`#pricing`). Off-screen rows are not
|
|
24
|
+
* rendered until they are near the viewport (`content-visibility`); add `eager` to turn that off.
|
|
25
|
+
*/
|
|
26
|
+
export declare class StSection extends LitElement {
|
|
27
|
+
/** `auto` alternates between rows; the others are fixed. */
|
|
28
|
+
tone: SectionTone;
|
|
29
|
+
/** Vertical padding. */
|
|
30
|
+
space: SectionSpace;
|
|
31
|
+
/** Maximum width of the content. */
|
|
32
|
+
width: ContainerSize;
|
|
33
|
+
/** Alignment of the header block. */
|
|
34
|
+
align: "start" | "center";
|
|
35
|
+
/** How the row animates in as it is scrolled to. `none` turns it off. */
|
|
36
|
+
reveal: RevealEffect;
|
|
37
|
+
/** Accessible name. When set the section becomes a labelled landmark. */
|
|
38
|
+
label: string;
|
|
39
|
+
/** Renders immediately even when off screen. */
|
|
40
|
+
eager: boolean;
|
|
41
|
+
private _hasHeader;
|
|
42
|
+
static styles: import("lit").CSSResult[];
|
|
43
|
+
private _onHeaderSlotChange;
|
|
44
|
+
protected willUpdate(changed: PropertyValues<this>): void;
|
|
45
|
+
private _headerPresent;
|
|
46
|
+
/** Hands the row's animation settings to any item components inside it. */
|
|
47
|
+
protected _onItemsChange: (e: Event) => void;
|
|
48
|
+
protected updated(changed: PropertyValues<this>): void;
|
|
49
|
+
/** The eyebrow, title and lead. Rows that lay the header out themselves call this directly. */
|
|
50
|
+
protected renderHeader(): TemplateResult;
|
|
51
|
+
/** Wraps part of a row so it animates in with the row's effect. */
|
|
52
|
+
protected animateIn(content: TemplateResult, delay?: number): TemplateResult;
|
|
53
|
+
/**
|
|
54
|
+
* The band every row sits in. Pass the row's content.
|
|
55
|
+
* - `header: false`: the row lays the header out itself and calls `renderHeader()`.
|
|
56
|
+
* - `animated: false`: the row animates its own parts (or its items do), so the content is not
|
|
57
|
+
* wrapped in a second animation.
|
|
58
|
+
*/
|
|
59
|
+
protected frame(content: TemplateResult, options?: {
|
|
60
|
+
header?: boolean;
|
|
61
|
+
animated?: boolean;
|
|
62
|
+
}): TemplateResult;
|
|
63
|
+
render(): TemplateResult;
|
|
64
|
+
}
|
|
65
|
+
declare global {
|
|
66
|
+
interface HTMLElementTagNameMap {
|
|
67
|
+
"st-section": StSection;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
//# sourceMappingURL=section.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"section.d.ts","sourceRoot":"","sources":["../../../src/components/section/section.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAgC,cAAc,EAAE,cAAc,EAAC,MAAM,KAAK,CAAC;AAG7F,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,2BAA2B,CAAC;AAC7D,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,+BAA+B,CAAC;AAChE,OAAO,2BAA2B,CAAC;AACnC,OAAO,qBAAqB,CAAC;AAG7B,eAAO,MAAM,YAAY,YAAI,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,CAAU,CAAC;AAC9E,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AACxD,eAAO,MAAM,aAAa,YAAI,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAU,CAAC;AACjE,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAQ1D;;;;;;;;;;;;;;;GAeG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC,4DAA4D;IACnB,IAAI,EAAE,WAAW,CAAU;IACpE,wBAAwB;IACiB,KAAK,EAAE,YAAY,CAAQ;IACpE,oCAAoC;IACK,KAAK,EAAE,aAAa,CAAQ;IACrE,qCAAqC;IACI,KAAK,EAAE,OAAO,GAAG,QAAQ,CAAY;IAC9E,yEAAyE;IAChC,MAAM,EAAE,YAAY,CAAc;IAC3E,yEAAyE;IAC/C,KAAK,SAAM;IACrC,gDAAgD;IACN,KAAK,UAAS;IAE/C,OAAO,CAAC,UAAU,CAAS;IAEpC,MAAM,CAAC,MAAM,4BA+FX;IAEF,OAAO,CAAC,mBAAmB,CAAmD;IAE9E,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,QAKjD;IAED,OAAO,CAAC,cAAc;IAItB,2EAA2E;IAC3E,SAAS,CAAC,cAAc,MAAO,KAAK,UAQlC;IAEF,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,QAK9C;IAED,+FAA+F;IAC/F,SAAS,CAAC,YAAY,IAAI,cAAc,CAUvC;IAED,mEAAmE;IACnE,SAAS,CAAC,SAAS,CAAC,OAAO,EAAE,cAAc,EAAE,KAAK,SAAI,GAAG,cAAc,CAEtE;IAED;;;;;OAKG;IACH,SAAS,CAAC,KAAK,CACb,OAAO,EAAE,cAAc,EACvB,OAAO,GAAE;QAAC,MAAM,CAAC,EAAE,OAAO,CAAC;QAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAM,GACnD,cAAc,CAUhB;IAED,MAAM,mBAEL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}
|