@swisspost/design-system-components 9.0.0-next.33 → 9.0.0-next.35
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/cjs/{attribute-observer-6d8b886b.js → attribute-observer-c3a805b2.js} +3 -1
- package/dist/cjs/{breakpoints-c6247c71.js → breakpoints-cdf1b747.js} +12 -7
- package/dist/cjs/get-root-8102fecd.js +17 -0
- package/dist/cjs/{index-d6bf2c66.js → index-b60129c4.js} +4 -4
- package/dist/cjs/index.cjs.js +25 -26
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/long-press-event-6e62d113.js +266 -0
- package/dist/cjs/{package-3562c265.js → package-19b74b08.js} +1 -1
- package/dist/cjs/{post-accordion-6c5681ba.js → post-accordion-785f602b.js} +5 -5
- package/dist/cjs/{post-accordion-item-05a78451.js → post-accordion-item-8e1c9bdb.js} +5 -5
- package/dist/cjs/post-accordion-item.cjs.entry.js +5 -4
- package/dist/cjs/post-accordion.cjs.entry.js +4 -3
- package/dist/cjs/{post-avatar-6710a77a.js → post-avatar-eecfd222.js} +6 -5
- package/dist/cjs/post-avatar.cjs.entry.js +4 -3
- package/dist/cjs/{post-back-to-top-d0662842.js → post-back-to-top-49a3abcb.js} +9 -9
- package/dist/cjs/post-back-to-top.cjs.entry.js +4 -3
- package/dist/cjs/{post-banner-bd97db9c.js → post-banner-249ec2ff.js} +5 -9
- package/dist/cjs/post-banner.cjs.entry.js +4 -3
- package/dist/cjs/post-breadcrumb-item_2.cjs.entry.js +4 -3
- package/dist/cjs/{post-breadcrumb-36ab841c.js → post-breadcrumbs-f51590d1.js} +39 -31
- package/dist/cjs/post-breadcrumbs.cjs.entry.js +13 -0
- package/dist/cjs/post-card-control-d0a47015.js +269 -0
- package/dist/cjs/post-card-control.cjs.entry.js +4 -3
- package/dist/cjs/post-closebutton_15.cjs.entry.js +5 -5
- package/dist/cjs/{post-collapsible-trigger-6601c554.js → post-collapsible-trigger-4784edb2.js} +24 -41
- package/dist/cjs/post-collapsible_2.cjs.entry.js +5 -5
- package/dist/cjs/post-components.cjs.js +2 -2
- package/dist/cjs/{post-footer-23699aef.js → post-footer-9d078cb1.js} +11 -11
- package/dist/cjs/post-footer.cjs.entry.js +4 -4
- package/dist/cjs/{post-linkarea-8e5e1a9f.js → post-linkarea-e4ce3960.js} +5 -5
- package/dist/cjs/post-linkarea.cjs.entry.js +3 -3
- package/dist/cjs/{post-menu-item-8dd94792.js → post-menu-item-e9ebd27a.js} +4 -4
- package/dist/cjs/post-popover-5db53ead.js +112 -0
- package/dist/cjs/post-popover.cjs.entry.js +5 -4
- package/dist/cjs/{post-rating-ef592484.js → post-rating-98a06828.js} +5 -15
- package/dist/cjs/post-rating.cjs.entry.js +3 -3
- package/dist/cjs/{post-tab-header-d785e7fc.js → post-tab-header-c8e92f77.js} +6 -5
- package/dist/cjs/post-tab-header.cjs.entry.js +4 -3
- package/dist/cjs/{post-tab-panel-41ea371e.js → post-tab-panel-d966ee38.js} +4 -4
- package/dist/cjs/post-tab-panel.cjs.entry.js +3 -3
- package/dist/cjs/{post-tabs-c6f00130.js → post-tabs-83d99b69.js} +5 -12
- package/dist/cjs/post-tabs.cjs.entry.js +4 -3
- package/dist/cjs/post-tag-a1d78e75.js +47 -0
- package/dist/cjs/post-tag.cjs.entry.js +3 -3
- package/dist/cjs/{post-togglebutton-02c56b7b.js → post-togglebutton-e4651aad.js} +939 -464
- package/dist/cjs/{post-tooltip-3176e280.js → post-tooltip-bb862241.js} +39 -296
- package/dist/cjs/post-tooltip.cjs.entry.js +5 -4
- package/dist/collection/animations/collapse.js +3 -1
- package/dist/collection/collection-manifest.json +1 -1
- package/dist/collection/components/post-accordion/post-accordion.js +1 -3
- package/dist/collection/components/post-accordion-item/post-accordion-item.js +0 -2
- package/dist/collection/components/post-avatar/post-avatar.css +1 -3
- package/dist/collection/components/post-avatar/post-avatar.js +3 -4
- package/dist/collection/components/post-back-to-top/post-back-to-top.js +6 -8
- package/dist/collection/components/post-banner/post-banner.css +1 -3
- package/dist/collection/components/post-banner/post-banner.js +0 -6
- package/dist/collection/components/post-breadcrumb-item/post-breadcrumb-item.js +0 -2
- package/dist/collection/components/post-breadcrumbs/post-breadcrumbs.css +1 -0
- package/dist/collection/components/{post-breadcrumb/post-breadcrumb.js → post-breadcrumbs/post-breadcrumbs.js} +24 -27
- package/dist/collection/components/post-card-control/post-card-control.css +1 -3
- package/dist/collection/components/post-card-control/post-card-control.js +24 -40
- package/dist/collection/components/post-closebutton/post-closebutton.css +1 -0
- package/dist/collection/components/post-closebutton/post-closebutton.js +12 -2
- package/dist/collection/components/post-collapsible/post-collapsible.js +4 -10
- package/dist/collection/components/post-collapsible-trigger/post-collapsible-trigger.js +15 -28
- package/dist/collection/components/post-footer/post-footer.js +8 -9
- package/dist/collection/components/post-header/post-header.css +1 -1
- package/dist/collection/components/post-header/post-header.js +13 -22
- package/dist/collection/components/post-icon/post-icon.js +4 -6
- package/dist/collection/components/post-language-option/post-language-option.css +1 -3
- package/dist/collection/components/post-language-option/post-language-option.js +1 -10
- package/dist/collection/components/post-language-switch/post-language-switch.js +7 -19
- package/dist/collection/components/post-linkarea/post-linkarea.css +1 -1
- package/dist/collection/components/post-linkarea/post-linkarea.js +2 -2
- package/dist/collection/components/post-list/post-list.css +1 -3
- package/dist/collection/components/post-list/post-list.js +1 -3
- package/dist/collection/components/post-list-item/post-list-item.js +1 -2
- package/dist/collection/components/post-logo/post-logo.js +1 -2
- package/dist/collection/components/post-mainnavigation/post-mainnavigation.css +1 -1
- package/dist/collection/components/post-mainnavigation/post-mainnavigation.js +98 -182
- package/dist/collection/components/post-megadropdown/post-megadropdown.js +20 -30
- package/dist/collection/components/post-megadropdown-trigger/post-megadropdown-trigger.js +36 -37
- package/dist/collection/components/post-menu/post-menu.css +1 -3
- package/dist/collection/components/post-menu/post-menu.js +47 -55
- package/dist/collection/components/post-menu-trigger/post-menu-trigger.js +13 -15
- package/dist/collection/components/post-popover/post-popover.css +1 -3
- package/dist/collection/components/post-popover/post-popover.js +13 -13
- package/dist/collection/components/post-popovercontainer/post-popovercontainer.js +30 -33
- package/dist/collection/components/post-rating/post-rating.css +1 -3
- package/dist/collection/components/post-rating/post-rating.js +1 -12
- package/dist/collection/components/post-tab-header/post-tab-header.css +1 -3
- package/dist/collection/components/post-tab-header/post-tab-header.js +2 -3
- package/dist/collection/components/post-tab-panel/post-tab-panel.js +2 -3
- package/dist/collection/components/post-tabs/post-tabs.js +1 -10
- package/dist/collection/components/post-tag/post-tag.css +1 -3
- package/dist/collection/components/post-tag/post-tag.js +1 -2
- package/dist/collection/components/post-togglebutton/post-togglebutton.js +10 -11
- package/dist/collection/components/post-tooltip/post-tooltip.js +37 -33
- package/dist/collection/index.js +1 -1
- package/dist/collection/utils/attribute-observer.js +2 -1
- package/dist/collection/utils/breakpoints.js +9 -7
- package/dist/collection/utils/environment.js +2 -0
- package/dist/collection/utils/get-root.js +6 -1
- package/dist/collection/utils/index.js +5 -0
- package/dist/collection/utils/is-motion-reduced.js +2 -1
- package/dist/components/attribute-observer.js +3 -1
- package/dist/components/breakpoints.js +12 -8
- package/dist/components/get-root.js +7 -1
- package/dist/components/index.js +1 -1
- package/dist/components/long-press-event.js +264 -0
- package/dist/components/package.js +1 -1
- package/dist/components/post-accordion-item2.js +3 -3
- package/dist/components/post-accordion2.js +3 -3
- package/dist/components/post-avatar2.js +5 -4
- package/dist/components/post-back-to-top2.js +8 -8
- package/dist/components/post-banner2.js +3 -7
- package/dist/components/post-breadcrumb-item2.js +2 -2
- package/dist/components/{post-breadcrumb.d.ts → post-breadcrumbs.d.ts} +4 -4
- package/dist/components/post-breadcrumbs.js +6 -0
- package/dist/components/{post-breadcrumb2.js → post-breadcrumbs2.js} +41 -33
- package/dist/components/post-card-control2.js +26 -40
- package/dist/components/post-closebutton2.js +8 -3
- package/dist/components/post-collapsible-trigger2.js +19 -31
- package/dist/components/post-collapsible2.js +9 -12
- package/dist/components/post-footer2.js +8 -8
- package/dist/components/post-header2.js +15 -23
- package/dist/components/post-icon2.js +5 -5
- package/dist/components/post-language-option2.js +4 -11
- package/dist/components/post-language-switch2.js +9 -18
- package/dist/components/post-linkarea2.js +5 -4
- package/dist/components/post-list-item2.js +2 -2
- package/dist/components/post-list2.js +3 -4
- package/dist/components/post-logo2.js +3 -2
- package/dist/components/post-mainnavigation2.js +94 -182
- package/dist/components/post-megadropdown-trigger2.js +38 -37
- package/dist/components/post-megadropdown2.js +21 -30
- package/dist/components/post-menu-trigger2.js +15 -15
- package/dist/components/post-menu2.js +50 -56
- package/dist/components/post-popover2.js +15 -13
- package/dist/components/post-popovercontainer2.js +638 -36
- package/dist/components/post-rating2.js +3 -13
- package/dist/components/post-tab-header2.js +5 -4
- package/dist/components/post-tab-panel2.js +3 -3
- package/dist/components/post-tabs2.js +3 -10
- package/dist/components/post-tag2.js +2 -2
- package/dist/components/post-togglebutton2.js +12 -11
- package/dist/components/post-tooltip2.js +37 -294
- package/dist/docs.json +107 -101
- package/dist/esm/{attribute-observer-2f203993.js → attribute-observer-009deee5.js} +3 -1
- package/dist/esm/{breakpoints-bbe0c54e.js → breakpoints-7812702e.js} +12 -8
- package/dist/esm/get-root-1b1af46f.js +15 -0
- package/dist/esm/{index-3419e46d.js → index-f4d19816.js} +4 -4
- package/dist/esm/index.js +24 -25
- package/dist/esm/loader.js +3 -3
- package/dist/esm/long-press-event-04d24397.js +264 -0
- package/dist/esm/package-791f9257.js +3 -0
- package/dist/esm/{post-accordion-024451fa.js → post-accordion-4de9963b.js} +5 -5
- package/dist/esm/{post-accordion-item-19b996d1.js → post-accordion-item-2cbb32f9.js} +5 -5
- package/dist/esm/post-accordion-item.entry.js +5 -4
- package/dist/esm/post-accordion.entry.js +4 -3
- package/dist/esm/{post-avatar-33aed045.js → post-avatar-0aaefe87.js} +6 -5
- package/dist/esm/post-avatar.entry.js +4 -3
- package/dist/esm/{post-back-to-top-7dd43c3b.js → post-back-to-top-24eef0a0.js} +9 -9
- package/dist/esm/post-back-to-top.entry.js +4 -3
- package/dist/esm/{post-banner-28d18721.js → post-banner-1f37f9f0.js} +5 -9
- package/dist/esm/post-banner.entry.js +4 -3
- package/dist/esm/post-breadcrumb-item_2.entry.js +4 -3
- package/dist/esm/{post-breadcrumb-d86fae7b.js → post-breadcrumbs-2fcccf9f.js} +39 -31
- package/dist/esm/post-breadcrumbs.entry.js +5 -0
- package/dist/esm/post-card-control-75e8d336.js +267 -0
- package/dist/esm/post-card-control.entry.js +4 -3
- package/dist/esm/post-closebutton_15.entry.js +5 -5
- package/dist/esm/{post-collapsible-trigger-b1612866.js → post-collapsible-trigger-08b79162.js} +24 -41
- package/dist/esm/post-collapsible_2.entry.js +5 -5
- package/dist/esm/post-components.js +3 -3
- package/dist/esm/{post-footer-2ed5e520.js → post-footer-01677010.js} +11 -11
- package/dist/esm/post-footer.entry.js +4 -4
- package/dist/esm/{post-linkarea-802bf774.js → post-linkarea-4a178d51.js} +5 -5
- package/dist/esm/post-linkarea.entry.js +3 -3
- package/dist/esm/{post-menu-item-d97611d8.js → post-menu-item-199477fd.js} +4 -4
- package/dist/esm/post-popover-2a6a13d8.js +110 -0
- package/dist/esm/post-popover.entry.js +5 -4
- package/dist/esm/{post-rating-e1ac47ce.js → post-rating-fcf24658.js} +5 -15
- package/dist/esm/post-rating.entry.js +3 -3
- package/dist/esm/{post-tab-header-06dcbf7f.js → post-tab-header-aaa2f0b8.js} +6 -5
- package/dist/esm/post-tab-header.entry.js +4 -3
- package/dist/esm/{post-tab-panel-75932601.js → post-tab-panel-91f35995.js} +4 -4
- package/dist/esm/post-tab-panel.entry.js +3 -3
- package/dist/esm/{post-tabs-3ef2ea23.js → post-tabs-8657f2d6.js} +5 -12
- package/dist/esm/post-tabs.entry.js +4 -3
- package/dist/esm/post-tag-19141551.js +45 -0
- package/dist/esm/post-tag.entry.js +3 -3
- package/dist/esm/{post-togglebutton-db251030.js → post-togglebutton-40cac8c2.js} +939 -464
- package/dist/esm/{post-tooltip-c256d714.js → post-tooltip-165eb353.js} +39 -296
- package/dist/esm/post-tooltip.entry.js +5 -4
- package/dist/post-components/index.esm.js +1 -1
- package/dist/post-components/p-01544069.js +1 -0
- package/dist/post-components/p-02d0c370.js +1 -0
- package/dist/post-components/p-03169497.js +1 -0
- package/dist/post-components/p-06bf6b81.entry.js +1 -0
- package/dist/post-components/p-0ca39161.entry.js +1 -0
- package/dist/post-components/p-0f398677.js +1 -0
- package/dist/post-components/p-10f9d25e.js +1 -0
- package/dist/post-components/p-15da2cf9.js +1 -0
- package/dist/post-components/p-1622ed8c.js +1 -0
- package/dist/post-components/p-1d5e275b.js +1 -0
- package/dist/post-components/p-2a90f66c.js +1 -0
- package/dist/post-components/p-32aa68ac.entry.js +1 -0
- package/dist/post-components/p-3d30acad.entry.js +1 -0
- package/dist/post-components/p-48cd3157.js +1 -0
- package/dist/post-components/p-56da2097.entry.js +1 -0
- package/dist/post-components/p-65824049.entry.js +1 -0
- package/dist/post-components/p-6b31a76a.js +1 -0
- package/dist/post-components/p-722ffaae.js +1 -0
- package/dist/post-components/p-7c6f4c29.js +1 -0
- package/dist/post-components/p-817effd4.js +1 -0
- package/dist/post-components/p-8579ac14.js +8 -0
- package/dist/post-components/p-86859a7b.entry.js +1 -0
- package/dist/post-components/p-8db32dab.js +8 -0
- package/dist/post-components/p-936682bc.entry.js +1 -0
- package/dist/post-components/p-9597127a.js +1 -0
- package/dist/post-components/p-9818ad52.entry.js +1 -0
- package/dist/post-components/{p-5c758f41.js → p-9e461613.js} +1 -1
- package/dist/post-components/p-9ec20111.js +1 -0
- package/dist/post-components/p-a1a39a27.js +1 -0
- package/dist/post-components/p-a1bae666.entry.js +1 -0
- package/dist/post-components/p-a27907cc.js +1 -0
- package/dist/post-components/p-a77a6729.entry.js +1 -0
- package/dist/post-components/p-ab3ab29b.js +1 -0
- package/dist/post-components/p-ad9ffd61.entry.js +1 -0
- package/dist/post-components/p-b8241188.js +1 -0
- package/dist/post-components/p-bece917c.js +1 -0
- package/dist/post-components/p-bf3c80a3.entry.js +1 -0
- package/dist/post-components/p-cd8aef45.entry.js +1 -0
- package/dist/post-components/p-cdd3a06a.entry.js +1 -0
- package/dist/post-components/p-dc702c39.entry.js +1 -0
- package/dist/post-components/p-e077239a.entry.js +1 -0
- package/dist/post-components/p-e653daec.entry.js +1 -0
- package/dist/post-components/p-e8861c07.entry.js +1 -0
- package/dist/post-components/p-f2478a7d.js +1 -0
- package/dist/post-components/post-components.esm.js +1 -1
- package/dist/types/components/post-avatar/post-avatar.d.ts +1 -1
- package/dist/types/components/{post-breadcrumb/post-breadcrumb.d.ts → post-breadcrumbs/post-breadcrumbs.d.ts} +4 -4
- package/dist/types/components/post-card-control/post-card-control.d.ts +1 -1
- package/dist/types/components/post-collapsible-trigger/post-collapsible-trigger.d.ts +4 -14
- package/dist/types/components/post-footer/post-footer.d.ts +2 -2
- package/dist/types/components/post-header/post-header.d.ts +1 -0
- package/dist/types/components/post-icon/post-icon.d.ts +0 -1
- package/dist/types/components/post-language-switch/post-language-switch.d.ts +2 -5
- package/dist/types/components/post-mainnavigation/post-mainnavigation.d.ts +14 -39
- package/dist/types/components/post-menu/post-menu.d.ts +3 -3
- package/dist/types/components/post-menu-trigger/post-menu-trigger.d.ts +1 -1
- package/dist/types/components/post-popover/post-popover.d.ts +6 -4
- package/dist/types/components/post-popovercontainer/post-popovercontainer.d.ts +1 -1
- package/dist/types/components/post-tag/post-tag.d.ts +1 -1
- package/dist/types/components/post-tooltip/post-tooltip.d.ts +9 -4
- package/dist/types/components.d.ts +35 -35
- package/dist/types/index.d.ts +1 -1
- package/dist/types/popover-fn.d.ts +11 -0
- package/dist/types/utils/environment.d.ts +2 -0
- package/dist/types/utils/get-root.d.ts +4 -0
- package/dist/types/utils/index.d.ts +5 -0
- package/loaders/attribute-observer.js +3 -1
- package/loaders/breakpoints.js +12 -8
- package/loaders/get-root.js +7 -1
- package/loaders/index.d.ts +2 -2
- package/loaders/index.js +4 -4
- package/loaders/long-press-event.js +264 -0
- package/loaders/package.js +1 -1
- package/loaders/post-accordion-item2.js +3 -3
- package/loaders/post-accordion.js +3 -3
- package/loaders/post-avatar.js +5 -4
- package/loaders/post-back-to-top.js +8 -8
- package/loaders/post-banner.js +3 -7
- package/loaders/post-breadcrumb-item2.js +2 -2
- package/loaders/{post-breadcrumb.d.ts → post-breadcrumbs.d.ts} +4 -4
- package/loaders/{post-breadcrumb.js → post-breadcrumbs.js} +42 -34
- package/loaders/post-card-control.js +26 -40
- package/loaders/post-closebutton.js +8 -3
- package/loaders/post-collapsible-trigger2.js +19 -31
- package/loaders/post-collapsible2.js +9 -12
- package/loaders/post-footer.js +8 -8
- package/loaders/post-header.js +15 -23
- package/loaders/post-icon2.js +5 -5
- package/loaders/post-language-option.js +4 -11
- package/loaders/post-language-switch.js +9 -18
- package/loaders/post-linkarea.js +5 -4
- package/loaders/post-list-item.js +2 -2
- package/loaders/post-list.js +3 -4
- package/loaders/post-logo.js +3 -2
- package/loaders/post-mainnavigation.js +94 -182
- package/loaders/post-megadropdown-trigger.js +38 -37
- package/loaders/post-megadropdown.js +21 -30
- package/loaders/post-menu-trigger2.js +15 -15
- package/loaders/post-menu2.js +50 -56
- package/loaders/post-popover.js +15 -13
- package/loaders/post-popovercontainer2.js +638 -36
- package/loaders/post-rating.js +3 -13
- package/loaders/post-tab-header.js +5 -4
- package/loaders/post-tab-panel.js +3 -3
- package/loaders/post-tabs.js +3 -10
- package/loaders/post-tag.js +2 -2
- package/loaders/post-togglebutton.js +12 -11
- package/loaders/post-tooltip.js +37 -294
- package/package.json +20 -15
- package/dist/cjs/debounce-158fd76f.js +0 -13
- package/dist/cjs/get-root-7a3498ef.js +0 -11
- package/dist/cjs/post-breadcrumb.cjs.entry.js +0 -13
- package/dist/cjs/post-card-control-155fb433.js +0 -283
- package/dist/cjs/post-popover-858cbd12.js +0 -110
- package/dist/cjs/post-tag-d1a1176c.js +0 -47
- package/dist/collection/components/post-breadcrumb/post-breadcrumb.css +0 -3
- package/dist/components/debounce.js +0 -11
- package/dist/components/post-breadcrumb.js +0 -6
- package/dist/esm/debounce-e54c7131.js +0 -11
- package/dist/esm/get-root-7af2e0d1.js +0 -9
- package/dist/esm/package-da68ab5a.js +0 -3
- package/dist/esm/post-breadcrumb.entry.js +0 -5
- package/dist/esm/post-card-control-aa043898.js +0 -281
- package/dist/esm/post-popover-e51a7a18.js +0 -108
- package/dist/esm/post-tag-a3b989e0.js +0 -45
- package/dist/post-components/p-1376c653.js +0 -1
- package/dist/post-components/p-13835969.js +0 -1
- package/dist/post-components/p-13fdbaf6.entry.js +0 -1
- package/dist/post-components/p-1e2169ae.entry.js +0 -1
- package/dist/post-components/p-23e4c270.entry.js +0 -1
- package/dist/post-components/p-2641e06b.js +0 -1
- package/dist/post-components/p-2d3b16c7.js +0 -1
- package/dist/post-components/p-33c35e15.js +0 -1
- package/dist/post-components/p-3b247d71.entry.js +0 -1
- package/dist/post-components/p-42a5fdf8.js +0 -1
- package/dist/post-components/p-4ed7bab6.js +0 -1
- package/dist/post-components/p-5aeb3656.js +0 -1
- package/dist/post-components/p-5c518421.js +0 -1
- package/dist/post-components/p-6db1a2e0.entry.js +0 -1
- package/dist/post-components/p-6fe98184.entry.js +0 -1
- package/dist/post-components/p-7d731077.entry.js +0 -1
- package/dist/post-components/p-7ee47334.entry.js +0 -1
- package/dist/post-components/p-8223e97b.js +0 -1
- package/dist/post-components/p-8a8376d0.js +0 -1
- package/dist/post-components/p-8bb828cf.entry.js +0 -1
- package/dist/post-components/p-8e55ddd2.js +0 -1
- package/dist/post-components/p-9681efce.js +0 -1
- package/dist/post-components/p-96a59372.entry.js +0 -1
- package/dist/post-components/p-9748a355.js +0 -1
- package/dist/post-components/p-99c8fd43.entry.js +0 -1
- package/dist/post-components/p-ac042f7a.entry.js +0 -1
- package/dist/post-components/p-c34cacb7.js +0 -1
- package/dist/post-components/p-c3a970c5.js +0 -1
- package/dist/post-components/p-c4651d32.entry.js +0 -1
- package/dist/post-components/p-c9b61d31.entry.js +0 -1
- package/dist/post-components/p-d16dd7f9.js +0 -1
- package/dist/post-components/p-d81c5908.entry.js +0 -1
- package/dist/post-components/p-dbe31632.js +0 -1
- package/dist/post-components/p-e1baac59.js +0 -1
- package/dist/post-components/p-e2294014.js +0 -15
- package/dist/post-components/p-e8ff8122.js +0 -1
- package/dist/post-components/p-ed78d04a.entry.js +0 -1
- package/dist/post-components/p-f1c0924a.js +0 -1
- package/dist/post-components/p-f1db96d0.entry.js +0 -1
- package/dist/post-components/p-f7aa917f.entry.js +0 -1
- package/dist/post-components/p-f96b80cc.entry.js +0 -1
- package/dist/post-components/p-fc91cbc2.js +0 -1
- package/dist/post-components/p-fd78716d.js +0 -1
- package/loaders/debounce.js +0 -11
|
@@ -21,7 +21,6 @@ export class PostBanner {
|
|
|
21
21
|
this.icon = undefined;
|
|
22
22
|
this.type = 'neutral';
|
|
23
23
|
}
|
|
24
|
-
host;
|
|
25
24
|
validateDismissible() {
|
|
26
25
|
checkType(this, 'dismissible', 'boolean');
|
|
27
26
|
setTimeout(() => this.validateDismissLabel());
|
|
@@ -37,11 +36,6 @@ export class PostBanner {
|
|
|
37
36
|
validateType() {
|
|
38
37
|
checkEmptyOrOneOf(this, 'type', BANNER_TYPES);
|
|
39
38
|
}
|
|
40
|
-
/**
|
|
41
|
-
* An event emitted when the banner element is dismissed, after the transition.
|
|
42
|
-
* It has no payload and only relevant for dismissible banners.
|
|
43
|
-
*/
|
|
44
|
-
postDismissed;
|
|
45
39
|
componentDidLoad() {
|
|
46
40
|
this.validateDismissible();
|
|
47
41
|
this.validateIcon();
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
:host{display:flex;align-items:center}.breadcrumbs-nav{display:flex;align-items:center}.hidden-items{gap:var(--post-device-spacing-gap-inline-4);position:absolute;height:0;overflow:hidden;white-space:nowrap}.breadcrumbs-list{display:flex;flex-wrap:nowrap;position:relative;margin:0;padding:0;list-style:none;align-items:center;height:100%;gap:var(--post-device-spacing-gap-inline-4)}post-icon{display:inline-block;box-sizing:border-box;color:var(--post-scheme-color-interactive-primary-enabled-fg1);height:var(--post-core-dimension-24);width:var(--post-core-dimension-24)}.breadcrumb-item-icon{padding-block:var(--post-core-dimension-4);padding-inline:var(--post-core-dimension-4)}li a{display:flex;align-items:center}li a{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}li a:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){li a:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){li a:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){li a:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}li a:focus{border-radius:var(--post-device-border-radius-focus)}li a .home-icon{padding-block:var(--post-device-spacing-padding-4);padding-inline:var(--post-device-spacing-padding-4)}li a .home-icon:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){li a .home-icon a,li a .home-icon:focus,li a .home-icon:hover{color:CanvasText !important}}.menu-trigger-wrapper{display:flex;align-items:center;gap:var(--post-device-spacing-gap-inline-5)}.actual-menu{display:flex;align-items:center}post-menu-trigger{display:flex;align-items:center;padding-block:var(--post-device-spacing-padding-block-7)}post-menu-trigger{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}post-menu-trigger:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-menu-trigger:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){post-menu-trigger:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-menu-trigger:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}post-menu-trigger:focus{border-radius:var(--post-device-border-radius-focus)}post-menu-trigger button{background:none;border:none;line-height:150%;font-size:var(--post-device-font-size-6);cursor:pointer;padding:0;color:var(--post-scheme-color-interactive-primary-enabled-fg1)}post-menu-trigger button:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-menu-trigger button a,post-menu-trigger button:focus,post-menu-trigger button:hover{color:LinkText !important}}post-menu::part(popover-container){display:flex;flex-direction:column;align-items:start;padding:.6rem;gap:var(--post-device-spacing-gap-inline-4)}post-menu::part(popover-container) ::slotted(post-menu-item:not(:last-child)){margin-block-end:var(--post-device-spacing-gap-inline-4)}.breadcrumb-item{display:flex;align-items:center;justify-content:center;gap:var(--post-device-spacing-gap-inline-5)}.breadcrumb-item a{text-decoration:none;color:var(--post-scheme-color-surface-default-fg);line-height:150%;padding-block:var(--post-device-spacing-padding-block-7);font-size:var(--post-device-font-size-6)}.breadcrumb-item a{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}.breadcrumb-item a:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.breadcrumb-item a:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.breadcrumb-item a:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.breadcrumb-item a:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.breadcrumb-item a:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1);text-decoration:var(--post-core-text-decoration-underline)}.breadcrumb-item a:focus-visible{border-radius:var(--post-device-border-radius-focus)}.breadcrumb-item span:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1);text-decoration:var(--post-core-text-decoration-underline)}.breadcrumb-item span:focus-visible{border-radius:var(--post-device-border-radius-focus)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.breadcrumb-item a,.breadcrumb-item:focus,.breadcrumb-item:hover{color:LinkText !important}.breadcrumb-item:visited{color:VisitedText !important}}post-breadcrumb-item:last-of-type{pointer-events:none;color:var(--post-scheme-color-interactive-primary-selected-fg1);font-weight:var(--post-device-font-weight-bold);text-decoration:var(--post-core-text-decoration-none)}post-breadcrumb-item:last-of-type:hover{color:var(--post-scheme-color-interactive-primary-selected-fg1);text-decoration:none}.visually-hidden{width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.visually-hidden:not(caption){position:absolute !important}
|
|
@@ -1,17 +1,30 @@
|
|
|
1
1
|
import { h, Host } from "@stencil/core";
|
|
2
2
|
import { version } from "../../../../package";
|
|
3
3
|
import { checkUrl, debounce } from "../../utils/index";
|
|
4
|
-
export class
|
|
4
|
+
export class PostBreadcrumbs {
|
|
5
5
|
constructor() {
|
|
6
|
+
// Waits for breadcrumbs navigation reference to be available
|
|
7
|
+
this.waitForBreadcrumbsRef = debounce(() => {
|
|
8
|
+
if (this.breadcrumbsNavRef?.clientWidth > 0) {
|
|
9
|
+
this.checkConcatenation();
|
|
10
|
+
}
|
|
11
|
+
else {
|
|
12
|
+
this.waitForBreadcrumbsRef();
|
|
13
|
+
}
|
|
14
|
+
}, 50);
|
|
15
|
+
// Handles resizing to check concatenation
|
|
16
|
+
this.handleResize = () => {
|
|
17
|
+
if (window.innerWidth === this.lastWindowWidth)
|
|
18
|
+
return;
|
|
19
|
+
this.lastWindowWidth = window.innerWidth;
|
|
20
|
+
this.checkConcatenation();
|
|
21
|
+
};
|
|
6
22
|
this.homeUrl = undefined;
|
|
7
23
|
this.homeText = 'Home';
|
|
8
24
|
this.breadcrumbItems = [];
|
|
9
25
|
this.isConcatenated = undefined;
|
|
10
26
|
this.lastWindowWidth = undefined;
|
|
11
27
|
}
|
|
12
|
-
host;
|
|
13
|
-
breadcrumbNavRef;
|
|
14
|
-
lastItem;
|
|
15
28
|
validateUrl() {
|
|
16
29
|
checkUrl(this, 'homeUrl');
|
|
17
30
|
}
|
|
@@ -20,20 +33,11 @@ export class PostBreadcrumb {
|
|
|
20
33
|
}
|
|
21
34
|
componentDidLoad() {
|
|
22
35
|
window.addEventListener('resize', this.handleResize);
|
|
23
|
-
this.
|
|
36
|
+
this.waitForBreadcrumbsRef();
|
|
24
37
|
}
|
|
25
38
|
disconnectedCallback() {
|
|
26
39
|
window.removeEventListener('resize', this.handleResize);
|
|
27
40
|
}
|
|
28
|
-
// Waits for breadcrumb navigation reference to be available
|
|
29
|
-
waitForBreadcrumbRef = debounce(() => {
|
|
30
|
-
if (this.breadcrumbNavRef?.clientWidth > 0) {
|
|
31
|
-
this.checkConcatenation();
|
|
32
|
-
}
|
|
33
|
-
else {
|
|
34
|
-
this.waitForBreadcrumbRef();
|
|
35
|
-
}
|
|
36
|
-
}, 50);
|
|
37
41
|
// Updates breadcrumb items and sets the last item
|
|
38
42
|
updateBreadcrumbItems() {
|
|
39
43
|
this.breadcrumbItems = Array.from(this.host.querySelectorAll('post-breadcrumb-item')).map(item => ({
|
|
@@ -42,13 +46,6 @@ export class PostBreadcrumb {
|
|
|
42
46
|
}));
|
|
43
47
|
this.lastItem = this.breadcrumbItems[this.breadcrumbItems.length - 1];
|
|
44
48
|
}
|
|
45
|
-
// Handles resizing to check concatenation
|
|
46
|
-
handleResize = () => {
|
|
47
|
-
if (window.innerWidth === this.lastWindowWidth)
|
|
48
|
-
return;
|
|
49
|
-
this.lastWindowWidth = window.innerWidth;
|
|
50
|
-
this.checkConcatenation();
|
|
51
|
-
};
|
|
52
49
|
// Determines parent width for concatenation logic
|
|
53
50
|
getParentWidth() {
|
|
54
51
|
let parent = this.host.parentNode;
|
|
@@ -58,7 +55,7 @@ export class PostBreadcrumb {
|
|
|
58
55
|
return parent instanceof HTMLElement ? parent.clientWidth : window.innerWidth;
|
|
59
56
|
}
|
|
60
57
|
checkConcatenation() {
|
|
61
|
-
if (!this.
|
|
58
|
+
if (!this.breadcrumbsNavRef)
|
|
62
59
|
return;
|
|
63
60
|
const visibleWidth = this.getParentWidth();
|
|
64
61
|
// Measure all hidden breadcrumb items
|
|
@@ -82,7 +79,7 @@ export class PostBreadcrumb {
|
|
|
82
79
|
}
|
|
83
80
|
render() {
|
|
84
81
|
const visibleItems = this.breadcrumbItems.slice(0, -1);
|
|
85
|
-
return (h(Host, { key: '
|
|
82
|
+
return (h(Host, { key: 'f0c2507a02ea79059af1e4dfefce17ab04780fbe', "data-version": version }, h("nav", { key: '0307206eecadfa5a47ba88f9c17c72b88d26be5c', "aria-label": "Breadcrumbs", class: "breadcrumbs-nav", ref: el => (this.breadcrumbsNavRef = el) }, h("ol", { key: '646809f73775f8cd74b6b97c21b7055569fa5f4c', class: "no-list breadcrumbs-list" }, h("li", { key: '15bd467366517f0b9a11e54dfdffc13a0b681f3c' }, h("a", { key: 'd05e860d2de60b740b77120f0745752ff1ec1d17', href: this.homeUrl, class: "breadcrumb-link" }, h("span", { key: '3241f72e9fdc82e1521762d2fc47a6472366f722', class: "visually-hidden" }, this.homeText), h("post-icon", { key: '2cdfdb5641b1ba459070b724e6578b842b8d90ae', name: "home", class: "home-icon" }))), this.isConcatenated ? (h("div", { class: "menu-trigger-wrapper", "aria-label": "More breadcrumbs", onKeyDown: e => {
|
|
86
83
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
87
84
|
e.preventDefault();
|
|
88
85
|
this.handleBreadcrumbItemClick();
|
|
@@ -93,18 +90,18 @@ export class PostBreadcrumb {
|
|
|
93
90
|
linkElement?.click();
|
|
94
91
|
e.preventDefault();
|
|
95
92
|
}
|
|
96
|
-
} }, item.url ? h("a", { href: item.url }, item.text) : h("span", null, item.text)))))))) : (visibleItems.map(item => (h("post-breadcrumb-item", { url: item.url, key: item.url || item.text }, item.text)))), this.lastItem && (h("post-breadcrumb-item", { key: '
|
|
93
|
+
} }, item.url ? h("a", { href: item.url }, item.text) : h("span", null, item.text)))))))) : (visibleItems.map(item => (h("post-breadcrumb-item", { url: item.url, key: item.url || item.text }, item.text)))), this.lastItem && (h("post-breadcrumb-item", { key: '9820e7cc99072f16f9118e3783de126b1c65c51c', url: this.lastItem.url, "aria-current": "page", tabindex: -1 }, this.lastItem.text))), h("div", { key: '960f5784f11bd87e787722bd888cf91ec65329e1', class: "hidden-items" }, h("a", { key: '73dfb29ff5b45c6e3fe9a8f88abfde56fc9bb5e3', href: this.homeUrl, class: "hidden-breadcrumb-item" }, h("span", { key: 'bf6be08c70fca37879312b2adbf2808d83599cf3', class: "visually-hidden" }, this.homeText), h("post-icon", { key: '8c94c725dc315ac31187e079cb01def2891ac352', name: "home", class: "home-icon" })), this.breadcrumbItems.map(item => (h("post-breadcrumb-item", { url: item.url, key: `hidden-${item.url || item.text}`, class: "hidden-breadcrumb-item" }, item.text)))))));
|
|
97
94
|
}
|
|
98
|
-
static get is() { return "post-
|
|
95
|
+
static get is() { return "post-breadcrumbs"; }
|
|
99
96
|
static get encapsulation() { return "shadow"; }
|
|
100
97
|
static get originalStyleUrls() {
|
|
101
98
|
return {
|
|
102
|
-
"$": ["post-
|
|
99
|
+
"$": ["post-breadcrumbs.scss"]
|
|
103
100
|
};
|
|
104
101
|
}
|
|
105
102
|
static get styleUrls() {
|
|
106
103
|
return {
|
|
107
|
-
"$": ["post-
|
|
104
|
+
"$": ["post-breadcrumbs.css"]
|
|
108
105
|
};
|
|
109
106
|
}
|
|
110
107
|
static get properties() {
|
|
@@ -1,3 +1 @@
|
|
|
1
|
-
/*!
|
|
2
|
-
* Copyright 2021 by Swiss Post, Information Technology
|
|
3
|
-
*/.form-check{display:flex;flex-wrap:wrap;align-items:flex-start;width:fit-content;border-radius:var(--post-device-border-radius-focus)}.form-check-inline{display:inline-flex;vertical-align:top}fieldset>.form-check-inline:not(:last-of-type){margin-right:var(--post-core-dimension-24)}.form-check:has(>input:not(:only-child)){outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}.form-check:has(>input:not(:only-child)):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:has(>input:not(:only-child)):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.form-check:has(>input:not(:only-child)):is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:has(>input:not(:only-child)):is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.form-check:has(>input:not(:only-child))>input{outline:none !important}.form-check:has(input[type=checkbox]):not(.form-switch){padding-block:var(--post-device-spacing-padding-block-19)}fieldset>.form-check:has(input[type=checkbox]):not(.form-switch):not(:last-of-type){margin-bottom:var(--post-device-spacing-gap-4)}.form-check:has(input[type=checkbox]):not(.form-switch)>input[type=checkbox]~label{padding-block:var(--post-device-spacing-padding-block-20);padding-inline-start:var(--post-device-spacing-gap-inline-12);color:var(--post-scheme-color-interactive-primary-enabled-fg1)}.form-check:has(input[type=checkbox]):not(.form-switch)>input[type=checkbox]:not([disabled])~label{cursor:pointer}.form-check:has(input[type=checkbox]):not(.form-switch)>input[type=checkbox]:not([disabled]):hover~label{color:var(--post-scheme-color-interactive-primary-hover-fg1)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:has(input[type=checkbox]):not(.form-switch)>input[type=checkbox]:not([disabled]):hover~label{color:Highlight}}.form-check:has(input[type=checkbox]):not(.form-switch)>input[type=checkbox][disabled]~label{color:var(--post-scheme-color-interactive-primary-disabled-fg4)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:has(input[type=checkbox]):not(.form-switch)>input[type=checkbox][disabled]~label{color:GrayText}}.form-check.form-switch>input[type=checkbox]~label{color:var(--post-scheme-color-interactive-primary-enabled-fg1)}.form-check.form-switch>input[type=checkbox]:not([disabled])~label{cursor:pointer}.form-check.form-switch>input[type=checkbox]:not([disabled]):hover~label{color:var(--post-scheme-color-interactive-primary-enabled-fg1)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check.form-switch>input[type=checkbox]:not([disabled]):hover~label{color:Highlight}}.form-check.form-switch>input[type=checkbox][disabled]~label{color:var(--post-scheme-color-interactive-primary-disabled-fg1)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check.form-switch>input[type=checkbox][disabled]~label{color:GrayText}}.form-check:has(input[type=radio]){padding-block:var(--post-device-spacing-padding-block-19)}fieldset>.form-check:has(input[type=radio]):not(:last-of-type){margin-bottom:var(--post-device-spacing-gap-4)}.form-check:has(input[type=radio])>input[type=radio]~label{padding-block:var(--post-device-spacing-padding-block-20);padding-inline-start:var(--post-device-spacing-gap-inline-12);color:var(--post-scheme-color-interactive-primary-enabled-fg1)}.form-check:has(input[type=radio])>input[type=radio]:not([disabled])~label{cursor:pointer}.form-check:has(input[type=radio])>input[type=radio]:not([disabled]):hover~label{color:var(--post-scheme-color-interactive-primary-hover-fg1)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:has(input[type=radio])>input[type=radio]:not([disabled]):hover~label{color:Highlight}}.form-check:has(input[type=radio])>input[type=radio][disabled]~label{color:var(--post-scheme-color-interactive-primary-disabled-fg4)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:has(input[type=radio])>input[type=radio][disabled]~label{color:GrayText}}.form-check>label{transition:color 250ms cubic-bezier(0.4, 0, 0.2, 1);flex:1}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check>label{transition:none}}:where(.form-check>input[type=checkbox]){outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}:where(.form-check>input[type=checkbox]):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:where(.form-check>input[type=checkbox]):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){:where(.form-check>input[type=checkbox]):is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:where(.form-check>input[type=checkbox]):is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.form-check:not(.form-switch):has(input[type=checkbox])>input{appearance:none;flex:none;display:inline-flex;margin:var(--post-device-spacing-padding-1);margin-block:calc(var(--post-device-spacing-padding-1) + var(--post-device-spacing-padding-block-18));width:var(--post-device-sizing-interactive-icon-size);height:var(--post-device-sizing-interactive-icon-size);background-color:var(--post-scheme-color-interactive-primary-enabled-bg3);border:var(--post-device-border-width-default) var(--post-core-border-style-solid) var(--post-scheme-color-interactive-primary-enabled-stroke);border-radius:var(--post-core-dimension-2);color:var(--post-scheme-color-interactive-primary-enabled-fg1);vertical-align:top;transition:background-color 250ms cubic-bezier(0.4, 0, 0.2, 1),border-color 250ms cubic-bezier(0.4, 0, 0.2, 1),color 250ms cubic-bezier(0.4, 0, 0.2, 1),box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:not(.form-switch):has(input[type=checkbox])>input{background-color:Field;border-color:FieldText;color:FieldText;transition:none}}.form-check:not(.form-switch):has(input[type=checkbox])>input:not([disabled]){cursor:pointer}.form-check:not(.form-switch):has(input[type=checkbox])>input::after{display:block;content:"";width:100%;height:100%;mask-size:var(--post-device-sizing-interactive-icon-size);mask-repeat:no-repeat;mask-position:center}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:not(.form-switch):has(input[type=checkbox])>input:checked,.form-check:not(.form-switch):has(input[type=checkbox])>input:indeterminate{background-color:SelectedItem}}.form-check:not(.form-switch):has(input[type=checkbox])>input:checked::after,.form-check:not(.form-switch):has(input[type=checkbox])>input:indeterminate::after{background-color:currentColor}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:not(.form-switch):has(input[type=checkbox])>input:checked::after,.form-check:not(.form-switch):has(input[type=checkbox])>input:indeterminate::after{background-color:SelectedItemText}}.form-check:not(.form-switch):has(input[type=checkbox])>input:not([disabled]):hover{background-color:var(--post-scheme-color-interactive-primary-hover-bg3);border-color:var(--post-scheme-color-interactive-primary-hover-stroke);color:var(--post-scheme-color-interactive-primary-hover-fg1)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:not(.form-switch):has(input[type=checkbox])>input:not([disabled]):hover{background-color:Field;border-color:Highlight}.form-check:not(.form-switch):has(input[type=checkbox])>input:not([disabled]):hover:checked::after,.form-check:not(.form-switch):has(input[type=checkbox])>input:not([disabled]):hover:indeterminate::after{background-color:Highlight}}.form-check:not(.form-switch):has(input[type=checkbox])>input:checked::after{mask-image:url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='M7.51712 12.1332L4.30712 8.69325C4.02712 8.39325 4.03712 7.91325 4.34712 7.63325C4.64712 7.35325 5.12712 7.36325 5.40712 7.67325L7.31712 9.72325L10.7171 4.57325C10.9471 4.22325 11.4071 4.13325 11.7571 4.36325C12.1071 4.59325 12.1971 5.05325 11.9671 5.40325L7.51712 12.1332Z'/></svg>")}.form-check:not(.form-switch):has(input[type=checkbox])>input:indeterminate::after{mask-image:url("data:image/svg+xml,<svg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='M11.21 8.5H4.75C4.34 8.5 4 8.16 4 7.75C4 7.34 4.34 7 4.75 7H11.21C11.62 7 11.96 7.34 11.96 7.75C11.96 8.16 11.62 8.5 11.21 8.5Z'/></svg>")}.form-check:not(.form-switch):has(input[type=checkbox])>input[disabled]{background-color:var(--post-scheme-color-interactive-primary-disabled-bg6);border:var(--post-device-border-width-default) var(--post-core-border-style-dash) var(--post-scheme-color-interactive-primary-disabled-stroke4);color:var(--post-scheme-color-interactive-primary-disabled-fg4)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:not(.form-switch):has(input[type=checkbox])>input[disabled]{background-color:Field;border-color:GrayText}.form-check:not(.form-switch):has(input[type=checkbox])>input[disabled]:checked::after,.form-check:not(.form-switch):has(input[type=checkbox])>input[disabled]:indeterminate::after{background-color:GrayText}}:where(.form-check>input[type=radio]){outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}:where(.form-check>input[type=radio]):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:where(.form-check>input[type=radio]):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){:where(.form-check>input[type=radio]):is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:where(.form-check>input[type=radio]):is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.form-check>input[type=radio]{appearance:none;flex:none;display:inline-flex;justify-content:center;align-items:center;margin-block:calc(var(--post-device-spacing-padding-1) + var(--post-device-spacing-padding-block-18));margin-inline:var(--post-device-spacing-padding-1);width:var(--post-device-sizing-interactive-icon-size);height:var(--post-device-sizing-interactive-icon-size);background-color:var(--post-scheme-color-interactive-primary-enabled-bg3);border:var(--post-device-border-width-default) var(--post-core-border-style-solid) var(--post-scheme-color-interactive-primary-enabled-stroke);border-radius:var(--post-device-border-radius-round);color:var(--post-scheme-color-interactive-primary-enabled-fg1);vertical-align:top;transition:background-color 250ms cubic-bezier(0.4, 0, 0.2, 1),border-color 250ms cubic-bezier(0.4, 0, 0.2, 1),color 250ms cubic-bezier(0.4, 0, 0.2, 1),box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check>input[type=radio]{background-color:Field;border-color:FieldText;color:FieldText;transition:none}}.form-check>input[type=radio]:not([disabled]){cursor:pointer}.form-check>input[type=radio]::after{display:block;content:"";width:var(--post-device-sizing-icon-3);height:var(--post-device-sizing-icon-3);border-radius:inherit}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check>input[type=radio]:checked{background-color:SelectedItem}.form-check>input[type=radio]:checked::after{background-color:SelectedItemText !important}}.form-check>input[type=radio]:checked::after{background-color:var(--post-scheme-color-interactive-primary-enabled-fg1)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check>input[type=radio]:checked::after{background-color:FieldText}}.form-check>input[type=radio]:not([disabled]):hover{background-color:var(--post-scheme-color-interactive-primary-hover-bg3);border-color:var(--post-scheme-color-interactive-primary-hover-stroke);color:var(--post-scheme-color-interactive-primary-hover-fg1)}.form-check>input[type=radio]:not([disabled]):hover:checked::after{background-color:var(--post-scheme-color-interactive-primary-hover-fg1)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check>input[type=radio]:not([disabled]):hover{background-color:Field;border-color:Highlight}.form-check>input[type=radio]:not([disabled]):hover:checked::after{background-color:Highlight !important}}.form-check>input[type=radio][disabled]{background-color:var(--post-scheme-color-interactive-primary-disabled-bg6);border:var(--post-device-border-width-default) var(--post-core-border-style-dash) var(--post-scheme-color-interactive-primary-disabled-stroke4);color:var(--post-scheme-color-interactive-primary-disabled-fg4)}.form-check>input[type=radio][disabled]:checked::after{background-color:var(--post-scheme-color-interactive-primary-disabled-fg4)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check>input[type=radio][disabled]{background-color:Field;border-color:GrayText}.form-check>input[type=radio][disabled]:checked::after{background-color:GrayText}}:host{--post-card-control-bg-context: .bg-yellow, .bg-white, .bg-light, .bg-gray, .bg-warning, .bg-info, .bg-success-background, .bg-warning-background, .bg-error-background, .bg-dark, .bg-black, .bg-primary, .bg-secondary, .bg-success, .bg-error;display:flex;width:100%}:host-context(fieldset):host(:not(:last-child)) .card-control{margin-block-end:var(--post-core-dimension-16)}.card-control{--post-card-control-border-color: hsl(0, 0%, 40%);--post-card-control-bg: #fff;--post-card-control-color: hsl(0, 0%, 20%);--post-card-control-input-border-color: hsl(0, 0%, 20%);--post-card-control-input-bg: #fff;flex-basis:100%;display:grid;grid-template:"input label icon" "input content content"/min-content auto min-content;align-items:center;gap:0 var(--post-core-dimension-8);margin:0;padding:var(--post-core-dimension-12);background-color:var(--post-card-control-bg);border:var(--post-core-dimension-2) solid var(--post-card-control-border-color);border-radius:4px;color:var(--post-card-control-color) !important;cursor:pointer}.card-control .card-control--input{grid-area:input;margin:var(--post-core-dimension-4) 0;background-color:var(--post-card-control-input-bg) !important;border-color:var(--post-card-control-input-border-color) !important;color:var(--post-card-control-input-border-color) !important;cursor:inherit;transition:none;outline:none !important}.card-control .card-control--input:hover:not([disabled]),.card-control .card-control--input:hover:not([disabled])~label.form-check-label{color:#000;background-color:rgba(0,0,0,0)}.card-control .card-control--input:focus,.card-control .card-control--input:focus-visible{box-shadow:none}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.card-control .card-control--input::after{forced-color-adjust:none;border-color:rgba(0,0,0,0)}}.card-control .card-control--label{grid-area:label;margin:var(--post-core-dimension-4) 0;padding:0 !important;color:var(--post-scheme-color-surface-default-fg) !important;pointer-events:none;transition:none}.card-control .card-control--label:not(:has(+.card-control--icon)){grid-area:1/label/1/icon}.card-control .card-control--description{grid-area:label;font-size:.75rem}.card-control .card-control--content{grid-area:content}.card-control .card-control--icon{grid-area:icon;width:var(--post-core-dimension-32);height:var(--post-core-dimension-32);pointer-events:none}.card-control .card-control--icon>slot>*{width:100%;height:100%}.card-control:not(.is-disabled).is-checked{--post-card-control-border-color: #000;--post-card-control-bg: #fc0}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.card-control:not(.is-disabled).is-checked{--post-card-control-border-color: FieldText;--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText;--post-card-control-input-border-color: SelectedItemText;--post-card-control-input-bg: SelectedItem}.card-control:not(.is-disabled).is-checked .card-control--input::after{background-color:var(--post-card-control-color) !important}}.card-control:not(.is-disabled).is-invalid{--post-card-control-border-color: #a51728;--post-card-control-color: #a51728;--post-card-control-input-border-color: #a51728}.card-control:not(.is-disabled):hover{--post-card-control-border-color: hsl(0, 0%, 20%);--post-card-control-bg: hsl(0, 0%, 40%);--post-card-control-color: #fff;--post-card-control-input-border-color: #000}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.card-control:not(.is-disabled):hover{--post-card-control-border-color: Highlight;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: Highlight;--post-card-control-input-bg: Field}.card-control:not(.is-disabled):hover .card-control--input::after{color:FieldText}}.card-control.is-focused:where(:has(.card-control--input:focus-visible)){outline-offset:var(--post-core-dimension-2);outline:var(--post-core-dimension-2) solid #1976c8}.card-control.is-disabled{--post-card-control-border-color: hsl(0, 0%, 40%);--post-card-control-bg: transparent;--post-card-control-color: hsl(0, 0%, 40%);--post-card-control-input-border-color: hsl(0, 0%, 40%);--post-card-control-input-bg: transparent;border-style:dashed;cursor:default}.card-control.is-disabled .card-control--input{padding:2px;border-style:dashed}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.card-control{--post-card-control-border-color: FieldText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: FieldText;--post-card-control-input-bg: Field;outline:var(--post-core-dimension-2) solid Field;outline-offset:calc(var(--post-core-dimension-2)*-2)}.card-control .card-control--input{outline:var(--post-core-dimension-2) solid Field}.card-control .card-control--input[type]{background-color:Field !important}.card-control .card-control--input::after{border-color:Field !important}.card-control .card-control--label,.card-control .card-control--content{background-color:var(--post-card-control-bg) !important}.card-control:not(.is-disabled).is-checked{--post-card-control-border-color: FieldText;--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText;--post-card-control-input-border-color: FieldText}.card-control:not(.is-disabled).is-checked .card-control--input::after{background-color:FieldText !important}.card-control:not(.is-disabled):hover{--post-card-control-border-color: Highlight;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: Highlight}.card-control.is-disabled{--post-card-control-border-color: GrayText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: GrayText;--post-card-control-input-bg: Field}.card-control.is-disabled .card-control--input{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%' height='100%' fill='none' stroke='GrayText' stroke-width='4px ' stroke-dasharray='2 1.5 4 1.5 4 1.5 4 1.5 2 3.5 4 1.5 4 1.5 4 1.5 2 3.5 4 1.5 4 1.5 4 1.5 2 3.5 4 1.5 4 1.5 4' pathLength='88' /%3e%3c/svg%3e")}.card-control.is-disabled .card-control--input[type=radio]{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%' height='100%' rx='100' ry='100' fill='none' stroke='GrayText' stroke-width='4px ' stroke-dasharray='4 2' /%3e%3c/svg%3e")}.card-control.is-disabled.is-checked{--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText;position:relative;background-color:Field}.card-control.is-disabled.is-checked::before{display:block;content:"";position:absolute;inset:var(--post-core-dimension-2);background-color:SelectedItem;z-index:1}.card-control.is-disabled.is-checked>*{position:relative;z-index:2}.card-control.is-disabled.is-checked .card-control--input::after{background-color:FieldText !important}}@media(forced-colors: active)and (forced-colors: active),(forced-colors: active)and (-ms-high-contrast: active),(forced-colors: active)and (-ms-high-contrast: white-on-black),(-ms-high-contrast: active)and (forced-colors: active),(-ms-high-contrast: active)and (-ms-high-contrast: active),(-ms-high-contrast: active)and (-ms-high-contrast: white-on-black),(-ms-high-contrast: white-on-black)and (forced-colors: active),(-ms-high-contrast: white-on-black)and (-ms-high-contrast: active),(-ms-high-contrast: white-on-black)and (-ms-high-contrast: white-on-black){.card-control{--post-card-control-border-color: GrayText;--post-card-control-color: GrayText;--post-card-control-input-border-color: GrayText}.card-control.is-checked{--post-card-control-input-bg: field;position:relative}.card-control.is-checked::before{display:block;content:"";position:absolute;inset:var(--post-core-dimension-2);border-radius:calc(var(--post-core-dimension-2)*.5);background-color:SelectedItem}.card-control.is-checked>*{position:relative}.card-control.is-checked .card-control--input{outline:var(--post-core-dimension-2) solid Field}}:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control{--post-card-control-border-color: #fff;--post-card-control-bg: transparent;--post-card-control-color: #fff;--post-card-control-input-border-color: #fff;--post-card-control-input-bg: transparent}:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control:not(.is-disabled).is-checked{--post-card-control-border-color: #fc0;--post-card-control-bg: #fc0;--post-card-control-color: hsl(0, 0%, 20%);--post-card-control-input-border-color: hsl(0, 0%, 20%);--post-card-control-input-bg: #fff}:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control:not(.is-disabled).is-invalid{--post-card-control-border-color: #a51728;--post-card-control-bg: #ffdade;--post-card-control-color: #a51728;--post-card-control-input-border-color: #a51728;--post-card-control-input-bg: #fff}:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control:not(.is-disabled).is-invalid:where(.is-checked){--post-card-control-bg: #fc0}:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control:not(.is-disabled):hover{--post-card-control-border-color: #000;--post-card-control-bg: hsl(0, 0%, 80%);--post-card-control-color: #000;--post-card-control-input-border-color: #000;--post-card-control-input-bg: #fff}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control:not(.is-disabled):hover{--post-card-control-border-color: Highlight;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: Highlight;--post-card-control-input-bg: Field}}:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control.is-focused:where(:has(.card-control--input:focus-visible)){outline-color:#fff}:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control.is-disabled{--post-card-control-border-color: post.$white-alpha-80;--post-card-control-bg: transparent;--post-card-control-color: post.$white-alpha-80;--post-card-control-input-border-color: post.$white-alpha-80;--post-card-control-input-bg: transparent}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control.is-disabled{--post-card-control-border-color: GrayText;--post-card-control-color: GrayText;--post-card-control-input-border-color: GrayText}:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control.is-disabled.is-checked{--post-card-control-input-bg: Field}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control{--post-card-control-border-color: FieldText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: FieldText;--post-card-control-input-bg: Field}:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control:not(.is-disabled).is-checked{--post-card-control-border-color: FieldText;--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText;--post-card-control-input-border-color: FieldText}:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control:not(.is-disabled):hover{--post-card-control-border-color: Highlight;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: Highlight}:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control.is-disabled{--post-card-control-border-color: GrayText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: GrayText;--post-card-control-input-bg: Field}:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control.is-disabled.is-checked{--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText}}:host(:not([data-context])){display:none}:host([data-context*=fieldset]:not(:last-child)) .card-control{margin-block-end:var(--post-core-dimension-16)}:host(:is([data-context*=".bg-dark"],[data-context*=".bg-black"],[data-context*=".bg-primary"],[data-context*=".bg-secondary"],[data-context*=".bg-success"],[data-context*=".bg-error"])) .card-control{--post-card-control-border-color: #fff;--post-card-control-bg: transparent;--post-card-control-color: #fff;--post-card-control-input-border-color: #fff;--post-card-control-input-bg: transparent}:host(:is([data-context*=".bg-dark"],[data-context*=".bg-black"],[data-context*=".bg-primary"],[data-context*=".bg-secondary"],[data-context*=".bg-success"],[data-context*=".bg-error"])) .card-control:not(.is-disabled).is-checked{--post-card-control-border-color: #fc0;--post-card-control-bg: #fc0;--post-card-control-color: hsl(0, 0%, 20%);--post-card-control-input-border-color: hsl(0, 0%, 20%);--post-card-control-input-bg: #fff}:host(:is([data-context*=".bg-dark"],[data-context*=".bg-black"],[data-context*=".bg-primary"],[data-context*=".bg-secondary"],[data-context*=".bg-success"],[data-context*=".bg-error"])) .card-control:not(.is-disabled).is-invalid{--post-card-control-border-color: #a51728;--post-card-control-bg: #ffdade;--post-card-control-color: #a51728;--post-card-control-input-border-color: #a51728;--post-card-control-input-bg: #fff}:host(:is([data-context*=".bg-dark"],[data-context*=".bg-black"],[data-context*=".bg-primary"],[data-context*=".bg-secondary"],[data-context*=".bg-success"],[data-context*=".bg-error"])) .card-control:not(.is-disabled).is-invalid:where(.is-checked){--post-card-control-bg: #fc0}:host(:is([data-context*=".bg-dark"],[data-context*=".bg-black"],[data-context*=".bg-primary"],[data-context*=".bg-secondary"],[data-context*=".bg-success"],[data-context*=".bg-error"])) .card-control:not(.is-disabled):hover{--post-card-control-border-color: #000;--post-card-control-bg: hsl(0, 0%, 80%);--post-card-control-color: #000;--post-card-control-input-border-color: #000;--post-card-control-input-bg: #fff}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host(:is([data-context*=".bg-dark"],[data-context*=".bg-black"],[data-context*=".bg-primary"],[data-context*=".bg-secondary"],[data-context*=".bg-success"],[data-context*=".bg-error"])) .card-control:not(.is-disabled):hover{--post-card-control-border-color: Highlight;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: Highlight;--post-card-control-input-bg: Field}}:host(:is([data-context*=".bg-dark"],[data-context*=".bg-black"],[data-context*=".bg-primary"],[data-context*=".bg-secondary"],[data-context*=".bg-success"],[data-context*=".bg-error"])) .card-control.is-focused:where(:has(.card-control--input:focus-visible)){outline-color:#fff}:host(:is([data-context*=".bg-dark"],[data-context*=".bg-black"],[data-context*=".bg-primary"],[data-context*=".bg-secondary"],[data-context*=".bg-success"],[data-context*=".bg-error"])) .card-control.is-disabled{--post-card-control-border-color: post.$white-alpha-80;--post-card-control-bg: transparent;--post-card-control-color: post.$white-alpha-80;--post-card-control-input-border-color: post.$white-alpha-80;--post-card-control-input-bg: transparent}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host(:is([data-context*=".bg-dark"],[data-context*=".bg-black"],[data-context*=".bg-primary"],[data-context*=".bg-secondary"],[data-context*=".bg-success"],[data-context*=".bg-error"])) .card-control.is-disabled{--post-card-control-border-color: GrayText;--post-card-control-color: GrayText;--post-card-control-input-border-color: GrayText}:host(:is([data-context*=".bg-dark"],[data-context*=".bg-black"],[data-context*=".bg-primary"],[data-context*=".bg-secondary"],[data-context*=".bg-success"],[data-context*=".bg-error"])) .card-control.is-disabled.is-checked{--post-card-control-input-bg: Field}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host(:is([data-context*=".bg-dark"],[data-context*=".bg-black"],[data-context*=".bg-primary"],[data-context*=".bg-secondary"],[data-context*=".bg-success"],[data-context*=".bg-error"])) .card-control{--post-card-control-border-color: FieldText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: FieldText;--post-card-control-input-bg: Field}:host(:is([data-context*=".bg-dark"],[data-context*=".bg-black"],[data-context*=".bg-primary"],[data-context*=".bg-secondary"],[data-context*=".bg-success"],[data-context*=".bg-error"])) .card-control:not(.is-disabled).is-checked{--post-card-control-border-color: FieldText;--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText;--post-card-control-input-border-color: FieldText}:host(:is([data-context*=".bg-dark"],[data-context*=".bg-black"],[data-context*=".bg-primary"],[data-context*=".bg-secondary"],[data-context*=".bg-success"],[data-context*=".bg-error"])) .card-control:not(.is-disabled):hover{--post-card-control-border-color: Highlight;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: Highlight}:host(:is([data-context*=".bg-dark"],[data-context*=".bg-black"],[data-context*=".bg-primary"],[data-context*=".bg-secondary"],[data-context*=".bg-success"],[data-context*=".bg-error"])) .card-control.is-disabled{--post-card-control-border-color: GrayText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: GrayText;--post-card-control-input-bg: Field}:host(:is([data-context*=".bg-dark"],[data-context*=".bg-black"],[data-context*=".bg-primary"],[data-context*=".bg-secondary"],[data-context*=".bg-success"],[data-context*=".bg-error"])) .card-control.is-disabled.is-checked{--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText}}
|
|
1
|
+
.form-check{display:flex;flex-wrap:wrap;align-items:flex-start;width:fit-content;border-radius:var(--post-device-border-radius-focus)}.form-check-inline{display:inline-flex;vertical-align:top}fieldset>.form-check-inline:not(:last-of-type){margin-right:var(--post-core-dimension-24)}.form-check:has(>input:not(:only-child)){outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}.form-check:has(>input:not(:only-child)):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:has(>input:not(:only-child)):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.form-check:has(>input:not(:only-child)):is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:has(>input:not(:only-child)):is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.form-check:has(>input:not(:only-child))>input{outline:none !important}.form-check:has(input[type=checkbox]):not(.form-switch){padding-block:var(--post-device-spacing-padding-block-19)}fieldset>.form-check:has(input[type=checkbox]):not(.form-switch):not(:last-of-type){margin-bottom:var(--post-device-spacing-gap-4)}.form-check:has(input[type=checkbox]):not(.form-switch)>input[type=checkbox]~label{padding-block:var(--post-device-spacing-padding-block-20);padding-inline-start:var(--post-device-spacing-gap-inline-12);color:var(--post-scheme-color-interactive-primary-enabled-fg1)}.form-check:has(input[type=checkbox]):not(.form-switch)>input[type=checkbox]:not([disabled])~label{cursor:pointer}.form-check:has(input[type=checkbox]):not(.form-switch)>input[type=checkbox]:not([disabled]):hover~label{color:var(--post-scheme-color-interactive-primary-hover-fg1)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:has(input[type=checkbox]):not(.form-switch)>input[type=checkbox]:not([disabled]):hover~label{color:Highlight}}.form-check:has(input[type=checkbox]):not(.form-switch)>input[type=checkbox][disabled]~label{color:var(--post-scheme-color-interactive-primary-disabled-fg4)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:has(input[type=checkbox]):not(.form-switch)>input[type=checkbox][disabled]~label{color:GrayText}}.form-check.form-switch>input[type=checkbox]~label{color:var(--post-scheme-color-interactive-primary-enabled-fg1)}.form-check.form-switch>input[type=checkbox]:not([disabled])~label{cursor:pointer}.form-check.form-switch>input[type=checkbox]:not([disabled]):hover~label{color:var(--post-scheme-color-interactive-primary-enabled-fg1)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check.form-switch>input[type=checkbox]:not([disabled]):hover~label{color:Highlight}}.form-check.form-switch>input[type=checkbox][disabled]~label{color:var(--post-scheme-color-interactive-primary-disabled-fg1)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check.form-switch>input[type=checkbox][disabled]~label{color:GrayText}}.form-check:has(input[type=radio]){padding-block:var(--post-device-spacing-padding-block-19)}fieldset>.form-check:has(input[type=radio]):not(:last-of-type){margin-bottom:var(--post-device-spacing-gap-4)}.form-check:has(input[type=radio])>input[type=radio]~label{padding-block:var(--post-device-spacing-padding-block-20);padding-inline-start:var(--post-device-spacing-gap-inline-12);color:var(--post-scheme-color-interactive-primary-enabled-fg1)}.form-check:has(input[type=radio])>input[type=radio]:not([disabled])~label{cursor:pointer}.form-check:has(input[type=radio])>input[type=radio]:not([disabled]):hover~label{color:var(--post-scheme-color-interactive-primary-hover-fg1)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:has(input[type=radio])>input[type=radio]:not([disabled]):hover~label{color:Highlight}}.form-check:has(input[type=radio])>input[type=radio][disabled]~label{color:var(--post-scheme-color-interactive-primary-disabled-fg4)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:has(input[type=radio])>input[type=radio][disabled]~label{color:GrayText}}.form-check>label{transition:color 250ms cubic-bezier(0.4, 0, 0.2, 1);flex:1}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check>label{transition:none}}:where(.form-check>input[type=checkbox]){outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}:where(.form-check>input[type=checkbox]):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:where(.form-check>input[type=checkbox]):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){:where(.form-check>input[type=checkbox]):is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:where(.form-check>input[type=checkbox]):is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.form-check:not(.form-switch):has(input[type=checkbox])>input{appearance:none;flex:none;display:inline-flex;margin:var(--post-device-spacing-padding-1);margin-block:calc(var(--post-device-spacing-padding-1) + var(--post-device-spacing-padding-block-18));width:var(--post-device-sizing-interactive-icon-size);height:var(--post-device-sizing-interactive-icon-size);background-color:var(--post-scheme-color-interactive-primary-enabled-bg3);border:var(--post-device-border-width-default) var(--post-core-border-style-solid) var(--post-scheme-color-interactive-primary-enabled-stroke);border-radius:var(--post-core-dimension-2);color:var(--post-scheme-color-interactive-primary-enabled-fg1);vertical-align:top;transition:background-color 250ms cubic-bezier(0.4, 0, 0.2, 1),border-color 250ms cubic-bezier(0.4, 0, 0.2, 1),color 250ms cubic-bezier(0.4, 0, 0.2, 1),box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:not(.form-switch):has(input[type=checkbox])>input{background-color:Field;border-color:FieldText;color:FieldText;transition:none}}.form-check:not(.form-switch):has(input[type=checkbox])>input:not([disabled]){cursor:pointer}.form-check:not(.form-switch):has(input[type=checkbox])>input::after{display:block;content:"";width:100%;height:100%;mask-size:var(--post-device-sizing-interactive-icon-size);mask-repeat:no-repeat;mask-position:center}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:not(.form-switch):has(input[type=checkbox])>input:checked,.form-check:not(.form-switch):has(input[type=checkbox])>input:indeterminate{background-color:SelectedItem}}.form-check:not(.form-switch):has(input[type=checkbox])>input:checked::after,.form-check:not(.form-switch):has(input[type=checkbox])>input:indeterminate::after{background-color:currentColor}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:not(.form-switch):has(input[type=checkbox])>input:checked::after,.form-check:not(.form-switch):has(input[type=checkbox])>input:indeterminate::after{background-color:SelectedItemText}}.form-check:not(.form-switch):has(input[type=checkbox])>input:not([disabled]):hover{background-color:var(--post-scheme-color-interactive-primary-hover-bg3);border-color:var(--post-scheme-color-interactive-primary-hover-stroke);color:var(--post-scheme-color-interactive-primary-hover-fg1)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:not(.form-switch):has(input[type=checkbox])>input:not([disabled]):hover{background-color:Field;border-color:Highlight}.form-check:not(.form-switch):has(input[type=checkbox])>input:not([disabled]):hover:checked::after,.form-check:not(.form-switch):has(input[type=checkbox])>input:not([disabled]):hover:indeterminate::after{background-color:Highlight}}.form-check:not(.form-switch):has(input[type=checkbox])>input:checked::after{mask-image:url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='M7.51712 12.1332L4.30712 8.69325C4.02712 8.39325 4.03712 7.91325 4.34712 7.63325C4.64712 7.35325 5.12712 7.36325 5.40712 7.67325L7.31712 9.72325L10.7171 4.57325C10.9471 4.22325 11.4071 4.13325 11.7571 4.36325C12.1071 4.59325 12.1971 5.05325 11.9671 5.40325L7.51712 12.1332Z'/></svg>")}.form-check:not(.form-switch):has(input[type=checkbox])>input:indeterminate::after{mask-image:url("data:image/svg+xml,<svg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='M11.21 8.5H4.75C4.34 8.5 4 8.16 4 7.75C4 7.34 4.34 7 4.75 7H11.21C11.62 7 11.96 7.34 11.96 7.75C11.96 8.16 11.62 8.5 11.21 8.5Z'/></svg>")}.form-check:not(.form-switch):has(input[type=checkbox])>input[disabled]{background-color:var(--post-scheme-color-interactive-primary-disabled-bg6);border:var(--post-device-border-width-default) var(--post-core-border-style-dash) var(--post-scheme-color-interactive-primary-disabled-stroke4);color:var(--post-scheme-color-interactive-primary-disabled-fg4)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:not(.form-switch):has(input[type=checkbox])>input[disabled]{background-color:Field;border-color:GrayText}.form-check:not(.form-switch):has(input[type=checkbox])>input[disabled]:checked::after,.form-check:not(.form-switch):has(input[type=checkbox])>input[disabled]:indeterminate::after{background-color:GrayText}}:where(.form-check>input[type=radio]){outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}:where(.form-check>input[type=radio]):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:where(.form-check>input[type=radio]):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){:where(.form-check>input[type=radio]):is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:where(.form-check>input[type=radio]):is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.form-check>input[type=radio]{appearance:none;flex:none;display:inline-flex;justify-content:center;align-items:center;margin-block:calc(var(--post-device-spacing-padding-1) + var(--post-device-spacing-padding-block-18));margin-inline:var(--post-device-spacing-padding-1);width:var(--post-device-sizing-interactive-icon-size);height:var(--post-device-sizing-interactive-icon-size);background-color:var(--post-scheme-color-interactive-primary-enabled-bg3);border:var(--post-device-border-width-default) var(--post-core-border-style-solid) var(--post-scheme-color-interactive-primary-enabled-stroke);border-radius:var(--post-device-border-radius-round);color:var(--post-scheme-color-interactive-primary-enabled-fg1);vertical-align:top;transition:background-color 250ms cubic-bezier(0.4, 0, 0.2, 1),border-color 250ms cubic-bezier(0.4, 0, 0.2, 1),color 250ms cubic-bezier(0.4, 0, 0.2, 1),box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check>input[type=radio]{background-color:Field;border-color:FieldText;color:FieldText;transition:none}}.form-check>input[type=radio]:not([disabled]){cursor:pointer}.form-check>input[type=radio]::after{display:block;content:"";width:var(--post-device-sizing-icon-3);height:var(--post-device-sizing-icon-3);border-radius:inherit}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check>input[type=radio]:checked{background-color:SelectedItem}.form-check>input[type=radio]:checked::after{background-color:SelectedItemText !important}}.form-check>input[type=radio]:checked::after{background-color:var(--post-scheme-color-interactive-primary-enabled-fg1)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check>input[type=radio]:checked::after{background-color:FieldText}}.form-check>input[type=radio]:not([disabled]):hover{background-color:var(--post-scheme-color-interactive-primary-hover-bg3);border-color:var(--post-scheme-color-interactive-primary-hover-stroke);color:var(--post-scheme-color-interactive-primary-hover-fg1)}.form-check>input[type=radio]:not([disabled]):hover:checked::after{background-color:var(--post-scheme-color-interactive-primary-hover-fg1)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check>input[type=radio]:not([disabled]):hover{background-color:Field;border-color:Highlight}.form-check>input[type=radio]:not([disabled]):hover:checked::after{background-color:Highlight !important}}.form-check>input[type=radio][disabled]{background-color:var(--post-scheme-color-interactive-primary-disabled-bg6);border:var(--post-device-border-width-default) var(--post-core-border-style-dash) var(--post-scheme-color-interactive-primary-disabled-stroke4);color:var(--post-scheme-color-interactive-primary-disabled-fg4)}.form-check>input[type=radio][disabled]:checked::after{background-color:var(--post-scheme-color-interactive-primary-disabled-fg4)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check>input[type=radio][disabled]{background-color:Field;border-color:GrayText}.form-check>input[type=radio][disabled]:checked::after{background-color:GrayText}}:host{--post-card-control-bg-context: .bg-yellow, .bg-white, .bg-light, .bg-gray, .bg-warning, .bg-info, .bg-success-background, .bg-warning-background, .bg-error-background, .bg-dark, .bg-black, .bg-primary, .bg-secondary, .bg-success, .bg-error;display:flex;width:100%}:host-context(fieldset):host(:not(:last-child)) .card-control{margin-block-end:var(--post-core-dimension-16)}.card-control{--post-card-control-border-color: hsl(0, 0%, 40%);--post-card-control-bg: #fff;--post-card-control-color: hsl(0, 0%, 20%);--post-card-control-input-border-color: hsl(0, 0%, 20%);--post-card-control-input-bg: #fff;flex-basis:100%;display:grid;grid-template:"input label icon" "input content content"/min-content auto min-content;align-items:center;gap:0 var(--post-core-dimension-8);margin:0;padding:var(--post-core-dimension-12);background-color:var(--post-card-control-bg);border:var(--post-core-dimension-2) solid var(--post-card-control-border-color);border-radius:4px;color:var(--post-card-control-color) !important;cursor:pointer}.card-control .card-control--input{grid-area:input;margin:var(--post-core-dimension-4) 0;background-color:var(--post-card-control-input-bg) !important;border-color:var(--post-card-control-input-border-color) !important;color:var(--post-card-control-input-border-color) !important;cursor:inherit;transition:none;outline:none !important}.card-control .card-control--input:hover:not([disabled]),.card-control .card-control--input:hover:not([disabled])~label.form-check-label{color:#000;background-color:rgba(0,0,0,0)}.card-control .card-control--input:focus,.card-control .card-control--input:focus-visible{box-shadow:none}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.card-control .card-control--input::after{forced-color-adjust:none;border-color:rgba(0,0,0,0)}}.card-control .card-control--label{grid-area:label;margin:var(--post-core-dimension-4) 0;padding:0 !important;color:var(--post-scheme-color-surface-default-fg) !important;pointer-events:none;transition:none}.card-control .card-control--label:not(:has(+.card-control--icon)){grid-area:1/label/1/icon}.card-control .card-control--description{grid-area:label;font-size:.75rem}.card-control .card-control--content{grid-area:content}.card-control .card-control--icon{grid-area:icon;width:var(--post-core-dimension-32);height:var(--post-core-dimension-32);pointer-events:none}.card-control .card-control--icon>slot>*{width:100%;height:100%}.card-control:not(.is-disabled).is-checked{--post-card-control-border-color: #000;--post-card-control-bg: #fc0}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.card-control:not(.is-disabled).is-checked{--post-card-control-border-color: FieldText;--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText;--post-card-control-input-border-color: SelectedItemText;--post-card-control-input-bg: SelectedItem}.card-control:not(.is-disabled).is-checked .card-control--input::after{background-color:var(--post-card-control-color) !important}}.card-control:not(.is-disabled).is-invalid{--post-card-control-border-color: #a51728;--post-card-control-color: #a51728;--post-card-control-input-border-color: #a51728}.card-control:not(.is-disabled):hover{--post-card-control-border-color: hsl(0, 0%, 20%);--post-card-control-bg: hsl(0, 0%, 40%);--post-card-control-color: #fff;--post-card-control-input-border-color: #000}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.card-control:not(.is-disabled):hover{--post-card-control-border-color: Highlight;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: Highlight;--post-card-control-input-bg: Field}.card-control:not(.is-disabled):hover .card-control--input::after{color:FieldText}}.card-control.is-focused:where(:has(.card-control--input:focus-visible)){outline-offset:var(--post-core-dimension-2);outline:var(--post-core-dimension-2) solid #1976c8}.card-control.is-disabled{--post-card-control-border-color: hsl(0, 0%, 40%);--post-card-control-bg: transparent;--post-card-control-color: hsl(0, 0%, 40%);--post-card-control-input-border-color: hsl(0, 0%, 40%);--post-card-control-input-bg: transparent;border-style:dashed;cursor:default}.card-control.is-disabled .card-control--input{padding:2px;border-style:dashed}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.card-control{--post-card-control-border-color: FieldText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: FieldText;--post-card-control-input-bg: Field;outline:var(--post-core-dimension-2) solid Field;outline-offset:calc(var(--post-core-dimension-2)*-2)}.card-control .card-control--input{outline:var(--post-core-dimension-2) solid Field}.card-control .card-control--input[type]{background-color:Field !important}.card-control .card-control--input::after{border-color:Field !important}.card-control .card-control--label,.card-control .card-control--content{background-color:var(--post-card-control-bg) !important}.card-control:not(.is-disabled).is-checked{--post-card-control-border-color: FieldText;--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText;--post-card-control-input-border-color: FieldText}.card-control:not(.is-disabled).is-checked .card-control--input::after{background-color:FieldText !important}.card-control:not(.is-disabled):hover{--post-card-control-border-color: Highlight;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: Highlight}.card-control.is-disabled{--post-card-control-border-color: GrayText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: GrayText;--post-card-control-input-bg: Field}.card-control.is-disabled .card-control--input{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%' height='100%' fill='none' stroke='GrayText' stroke-width='4px ' stroke-dasharray='2 1.5 4 1.5 4 1.5 4 1.5 2 3.5 4 1.5 4 1.5 4 1.5 2 3.5 4 1.5 4 1.5 4 1.5 2 3.5 4 1.5 4 1.5 4' pathLength='88' /%3e%3c/svg%3e")}.card-control.is-disabled .card-control--input[type=radio]{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%' height='100%' rx='100' ry='100' fill='none' stroke='GrayText' stroke-width='4px ' stroke-dasharray='4 2' /%3e%3c/svg%3e")}.card-control.is-disabled.is-checked{--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText;position:relative;background-color:Field}.card-control.is-disabled.is-checked::before{display:block;content:"";position:absolute;inset:var(--post-core-dimension-2);background-color:SelectedItem;z-index:1}.card-control.is-disabled.is-checked>*{position:relative;z-index:2}.card-control.is-disabled.is-checked .card-control--input::after{background-color:FieldText !important}}@media(forced-colors: active)and (forced-colors: active),(forced-colors: active)and (-ms-high-contrast: active),(forced-colors: active)and (-ms-high-contrast: white-on-black),(-ms-high-contrast: active)and (forced-colors: active),(-ms-high-contrast: active)and (-ms-high-contrast: active),(-ms-high-contrast: active)and (-ms-high-contrast: white-on-black),(-ms-high-contrast: white-on-black)and (forced-colors: active),(-ms-high-contrast: white-on-black)and (-ms-high-contrast: active),(-ms-high-contrast: white-on-black)and (-ms-high-contrast: white-on-black){.card-control{--post-card-control-border-color: GrayText;--post-card-control-color: GrayText;--post-card-control-input-border-color: GrayText}.card-control.is-checked{--post-card-control-input-bg: field;position:relative}.card-control.is-checked::before{display:block;content:"";position:absolute;inset:var(--post-core-dimension-2);border-radius:calc(var(--post-core-dimension-2)*.5);background-color:SelectedItem}.card-control.is-checked>*{position:relative}.card-control.is-checked .card-control--input{outline:var(--post-core-dimension-2) solid Field}}:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control{--post-card-control-border-color: #fff;--post-card-control-bg: transparent;--post-card-control-color: #fff;--post-card-control-input-border-color: #fff;--post-card-control-input-bg: transparent}:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control:not(.is-disabled).is-checked{--post-card-control-border-color: #fc0;--post-card-control-bg: #fc0;--post-card-control-color: hsl(0, 0%, 20%);--post-card-control-input-border-color: hsl(0, 0%, 20%);--post-card-control-input-bg: #fff}:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control:not(.is-disabled).is-invalid{--post-card-control-border-color: #a51728;--post-card-control-bg: #ffdade;--post-card-control-color: #a51728;--post-card-control-input-border-color: #a51728;--post-card-control-input-bg: #fff}:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control:not(.is-disabled).is-invalid:where(.is-checked){--post-card-control-bg: #fc0}:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control:not(.is-disabled):hover{--post-card-control-border-color: #000;--post-card-control-bg: hsl(0, 0%, 80%);--post-card-control-color: #000;--post-card-control-input-border-color: #000;--post-card-control-input-bg: #fff}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control:not(.is-disabled):hover{--post-card-control-border-color: Highlight;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: Highlight;--post-card-control-input-bg: Field}}:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control.is-focused:where(:has(.card-control--input:focus-visible)){outline-color:#fff}:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control.is-disabled{--post-card-control-border-color: post.$white-alpha-80;--post-card-control-bg: transparent;--post-card-control-color: post.$white-alpha-80;--post-card-control-input-border-color: post.$white-alpha-80;--post-card-control-input-bg: transparent}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control.is-disabled{--post-card-control-border-color: GrayText;--post-card-control-color: GrayText;--post-card-control-input-border-color: GrayText}:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control.is-disabled.is-checked{--post-card-control-input-bg: Field}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control{--post-card-control-border-color: FieldText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: FieldText;--post-card-control-input-bg: Field}:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control:not(.is-disabled).is-checked{--post-card-control-border-color: FieldText;--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText;--post-card-control-input-border-color: FieldText}:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control:not(.is-disabled):hover{--post-card-control-border-color: Highlight;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: Highlight}:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control.is-disabled{--post-card-control-border-color: GrayText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: GrayText;--post-card-control-input-bg: Field}:host-context(:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error)) .card-control.is-disabled.is-checked{--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText}}:host(:not([data-context])){display:none}:host([data-context*=fieldset]:not(:last-child)) .card-control{margin-block-end:var(--post-core-dimension-16)}:host(:is([data-context*=".bg-dark"],[data-context*=".bg-black"],[data-context*=".bg-primary"],[data-context*=".bg-secondary"],[data-context*=".bg-success"],[data-context*=".bg-error"])) .card-control{--post-card-control-border-color: #fff;--post-card-control-bg: transparent;--post-card-control-color: #fff;--post-card-control-input-border-color: #fff;--post-card-control-input-bg: transparent}:host(:is([data-context*=".bg-dark"],[data-context*=".bg-black"],[data-context*=".bg-primary"],[data-context*=".bg-secondary"],[data-context*=".bg-success"],[data-context*=".bg-error"])) .card-control:not(.is-disabled).is-checked{--post-card-control-border-color: #fc0;--post-card-control-bg: #fc0;--post-card-control-color: hsl(0, 0%, 20%);--post-card-control-input-border-color: hsl(0, 0%, 20%);--post-card-control-input-bg: #fff}:host(:is([data-context*=".bg-dark"],[data-context*=".bg-black"],[data-context*=".bg-primary"],[data-context*=".bg-secondary"],[data-context*=".bg-success"],[data-context*=".bg-error"])) .card-control:not(.is-disabled).is-invalid{--post-card-control-border-color: #a51728;--post-card-control-bg: #ffdade;--post-card-control-color: #a51728;--post-card-control-input-border-color: #a51728;--post-card-control-input-bg: #fff}:host(:is([data-context*=".bg-dark"],[data-context*=".bg-black"],[data-context*=".bg-primary"],[data-context*=".bg-secondary"],[data-context*=".bg-success"],[data-context*=".bg-error"])) .card-control:not(.is-disabled).is-invalid:where(.is-checked){--post-card-control-bg: #fc0}:host(:is([data-context*=".bg-dark"],[data-context*=".bg-black"],[data-context*=".bg-primary"],[data-context*=".bg-secondary"],[data-context*=".bg-success"],[data-context*=".bg-error"])) .card-control:not(.is-disabled):hover{--post-card-control-border-color: #000;--post-card-control-bg: hsl(0, 0%, 80%);--post-card-control-color: #000;--post-card-control-input-border-color: #000;--post-card-control-input-bg: #fff}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host(:is([data-context*=".bg-dark"],[data-context*=".bg-black"],[data-context*=".bg-primary"],[data-context*=".bg-secondary"],[data-context*=".bg-success"],[data-context*=".bg-error"])) .card-control:not(.is-disabled):hover{--post-card-control-border-color: Highlight;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: Highlight;--post-card-control-input-bg: Field}}:host(:is([data-context*=".bg-dark"],[data-context*=".bg-black"],[data-context*=".bg-primary"],[data-context*=".bg-secondary"],[data-context*=".bg-success"],[data-context*=".bg-error"])) .card-control.is-focused:where(:has(.card-control--input:focus-visible)){outline-color:#fff}:host(:is([data-context*=".bg-dark"],[data-context*=".bg-black"],[data-context*=".bg-primary"],[data-context*=".bg-secondary"],[data-context*=".bg-success"],[data-context*=".bg-error"])) .card-control.is-disabled{--post-card-control-border-color: post.$white-alpha-80;--post-card-control-bg: transparent;--post-card-control-color: post.$white-alpha-80;--post-card-control-input-border-color: post.$white-alpha-80;--post-card-control-input-bg: transparent}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host(:is([data-context*=".bg-dark"],[data-context*=".bg-black"],[data-context*=".bg-primary"],[data-context*=".bg-secondary"],[data-context*=".bg-success"],[data-context*=".bg-error"])) .card-control.is-disabled{--post-card-control-border-color: GrayText;--post-card-control-color: GrayText;--post-card-control-input-border-color: GrayText}:host(:is([data-context*=".bg-dark"],[data-context*=".bg-black"],[data-context*=".bg-primary"],[data-context*=".bg-secondary"],[data-context*=".bg-success"],[data-context*=".bg-error"])) .card-control.is-disabled.is-checked{--post-card-control-input-bg: Field}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host(:is([data-context*=".bg-dark"],[data-context*=".bg-black"],[data-context*=".bg-primary"],[data-context*=".bg-secondary"],[data-context*=".bg-success"],[data-context*=".bg-error"])) .card-control{--post-card-control-border-color: FieldText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: FieldText;--post-card-control-input-bg: Field}:host(:is([data-context*=".bg-dark"],[data-context*=".bg-black"],[data-context*=".bg-primary"],[data-context*=".bg-secondary"],[data-context*=".bg-success"],[data-context*=".bg-error"])) .card-control:not(.is-disabled).is-checked{--post-card-control-border-color: FieldText;--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText;--post-card-control-input-border-color: FieldText}:host(:is([data-context*=".bg-dark"],[data-context*=".bg-black"],[data-context*=".bg-primary"],[data-context*=".bg-secondary"],[data-context*=".bg-success"],[data-context*=".bg-error"])) .card-control:not(.is-disabled):hover{--post-card-control-border-color: Highlight;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: Highlight}:host(:is([data-context*=".bg-dark"],[data-context*=".bg-black"],[data-context*=".bg-primary"],[data-context*=".bg-secondary"],[data-context*=".bg-success"],[data-context*=".bg-error"])) .card-control.is-disabled{--post-card-control-border-color: GrayText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: GrayText;--post-card-control-input-bg: Field}:host(:is([data-context*=".bg-dark"],[data-context*=".bg-black"],[data-context*=".bg-primary"],[data-context*=".bg-secondary"],[data-context*=".bg-success"],[data-context*=".bg-error"])) .card-control.is-disabled.is-checked{--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText}}
|
|
@@ -9,42 +9,6 @@ let cardControlIds = 0;
|
|
|
9
9
|
* @slot icon - To insert a custom icon into the named `icon` slot.<p>Markup accepted: <a href="https://developer.mozilla.org/en-US/docs/Glossary/Inline-level_content">inline content</a>.<p className="banner banner-sm banner-info">It is only meant for <code>img</code> or <code>svg</code> elements and overrides the `icon` property.</p>
|
|
10
10
|
*/
|
|
11
11
|
export class PostCardControl {
|
|
12
|
-
EVENT_MAP = {
|
|
13
|
-
input: 'postInput',
|
|
14
|
-
change: 'postChange',
|
|
15
|
-
};
|
|
16
|
-
KEYCODES = {
|
|
17
|
-
SPACE: 'Space',
|
|
18
|
-
LEFT: 'ArrowLeft',
|
|
19
|
-
UP: 'ArrowUp',
|
|
20
|
-
RIGHT: 'ArrowRight',
|
|
21
|
-
DOWN: 'ArrowDown',
|
|
22
|
-
};
|
|
23
|
-
group = {
|
|
24
|
-
hosts: [],
|
|
25
|
-
members: [],
|
|
26
|
-
first: null,
|
|
27
|
-
last: null,
|
|
28
|
-
checked: null,
|
|
29
|
-
focused: null,
|
|
30
|
-
};
|
|
31
|
-
control;
|
|
32
|
-
controlId = `PostCardControl_${cardControlIds++}`;
|
|
33
|
-
initialChecked;
|
|
34
|
-
hasIcon;
|
|
35
|
-
host;
|
|
36
|
-
internals;
|
|
37
|
-
/**
|
|
38
|
-
* An event emitted whenever the components checked state is toggled.
|
|
39
|
-
* The event payload (emitted under `event.detail.state`) is a boolean: `true` if the component is checked, `false` if it is unchecked.
|
|
40
|
-
*/
|
|
41
|
-
postInput;
|
|
42
|
-
/**
|
|
43
|
-
* An event emitted whenever the components checked state is toggled.
|
|
44
|
-
* The event payload (emitted under `event.detail.state`) is a boolean: `true` if the component is checked, `false` if it is unchecked.
|
|
45
|
-
* <span className="banner banner-sm banner-info">If the component is used with type `radio`, it will only emit this event, when the checked state is changing to `true`.</span>
|
|
46
|
-
*/
|
|
47
|
-
postChange;
|
|
48
12
|
/**
|
|
49
13
|
* A public method to reset the controls `checked` and `validity` state.
|
|
50
14
|
* The validity state is set to `null`, so it's neither valid nor invalid.
|
|
@@ -74,6 +38,26 @@ export class PostCardControl {
|
|
|
74
38
|
this.controlSetChecked(this.checked);
|
|
75
39
|
}
|
|
76
40
|
constructor() {
|
|
41
|
+
this.EVENT_MAP = {
|
|
42
|
+
input: 'postInput',
|
|
43
|
+
change: 'postChange',
|
|
44
|
+
};
|
|
45
|
+
this.KEYCODES = {
|
|
46
|
+
SPACE: 'Space',
|
|
47
|
+
LEFT: 'ArrowLeft',
|
|
48
|
+
UP: 'ArrowUp',
|
|
49
|
+
RIGHT: 'ArrowRight',
|
|
50
|
+
DOWN: 'ArrowDown',
|
|
51
|
+
};
|
|
52
|
+
this.group = {
|
|
53
|
+
hosts: [],
|
|
54
|
+
members: [],
|
|
55
|
+
first: null,
|
|
56
|
+
last: null,
|
|
57
|
+
checked: null,
|
|
58
|
+
focused: null,
|
|
59
|
+
};
|
|
60
|
+
this.controlId = `PostCardControl_${cardControlIds++}`;
|
|
77
61
|
this.focused = false;
|
|
78
62
|
this.label = undefined;
|
|
79
63
|
this.description = null;
|
|
@@ -232,14 +216,14 @@ export class PostCardControl {
|
|
|
232
216
|
this.hasIcon = Boolean(this.host.querySelector('[slot="icon"]') || this.icon);
|
|
233
217
|
}
|
|
234
218
|
render() {
|
|
235
|
-
return (h(Host, { key: '
|
|
219
|
+
return (h(Host, { key: '9172642a4424a3393c0738feba3a3ef8dcea43e8', "data-version": version, onClick: this.cardClickHandler }, h("div", { key: 'd6e47613dfe9d33647fd2379010275d70cbcbdcb', class: {
|
|
236
220
|
'card-control': true,
|
|
237
221
|
'is-checked': this.checked,
|
|
238
222
|
'is-disabled': this.disabled,
|
|
239
223
|
'is-focused': this.focused,
|
|
240
224
|
'is-valid': this.validity !== null && this.validity !== 'false',
|
|
241
225
|
'is-invalid': this.validity === 'false',
|
|
242
|
-
} }, h("input", { key: '
|
|
226
|
+
} }, h("input", { key: '44b0e5d5c2c6a759300979a5c33c2a65afaaa27d', ref: el => (this.control = el), id: this.controlId, class: "card-control--input", type: this.type, name: this.name, value: this.value, checked: this.checked, "aria-describedby": `${this.controlId}_content`, "aria-disabled": this.disabled, "aria-invalid": this.validity === 'false', onClick: this.controlClickHandler, onInput: this.controlChangeHandler, onChange: this.controlChangeHandler, onFocus: this.controlFocusHandler, onBlur: this.controlFocusHandler, onKeyDown: this.controlKeyDownHandler }), h("label", { key: 'fd3106562bfcb5ca0e7e5704272f927bfb201af5', id: `${this.controlId}_label`, htmlFor: this.controlId, class: "card-control--label" }, this.label, this.description ? (h("div", { class: "card-control--description" }, this.description)) : null), this.hasIcon ? (h("div", { class: "card-control--icon" }, h("slot", { name: "icon" }, this.icon ? h("post-icon", { name: this.icon }) : null))) : null, h("div", { key: 'ebfa245a0e2b6e45384586408614ce85494fbc58', id: `${this.controlId}_content`, class: "card-control--content" }, h("slot", { key: '99b406bc58fbfcd054f1b551a453a7ac1f4276f6' })))));
|
|
243
227
|
}
|
|
244
228
|
componentDidRender() {
|
|
245
229
|
this.setHostContext();
|
|
@@ -291,7 +275,7 @@ export class PostCardControl {
|
|
|
291
275
|
"text": "Defines the text in the control-label."
|
|
292
276
|
},
|
|
293
277
|
"attribute": "label",
|
|
294
|
-
"reflect":
|
|
278
|
+
"reflect": true
|
|
295
279
|
},
|
|
296
280
|
"description": {
|
|
297
281
|
"type": "string",
|
|
@@ -340,7 +324,7 @@ export class PostCardControl {
|
|
|
340
324
|
"optional": false,
|
|
341
325
|
"docs": {
|
|
342
326
|
"tags": [],
|
|
343
|
-
"text": "Defines the `name` attribute of the control.\n<span className=\"banner banner-sm banner-info\">This is a required property, when the control should participate in a native `form`. If not specified, a native `form` will never contain this controls value.</span>\n<span className=\"banner banner-sm banner-info\">This is a required property, when the control is used with type `radio`.</span>"
|
|
327
|
+
"text": "Defines the `name` attribute of the control.\n<span className=\"mb-4 banner banner-sm banner-info\">This is a required property, when the control should participate in a native `form`. If not specified, a native `form` will never contain this controls value.</span>\n<span className=\"banner banner-sm banner-info\">This is a required property, when the control is used with type `radio`.</span>"
|
|
344
328
|
},
|
|
345
329
|
"attribute": "name",
|
|
346
330
|
"reflect": false,
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.btn-icon-close{padding:0;border:unset;min-height:unset;min-width:unset;width:var(--post-device-sizing-notification-1);height:var(--post-device-sizing-notification-1);border-radius:var(--post-device-border-radius-round);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg)}.btn-icon-close>post-icon{min-width:var(--post-device-sizing-interactive-icon-size4);width:var(--post-device-sizing-interactive-icon-size4);height:var(--post-device-sizing-interactive-icon-size4)}.btn-icon-close:not(:disabled):hover,.btn-icon-close.pretend-hover{cursor:pointer;background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-icon-close:not(:disabled):hover,.btn-icon-close.pretend-hover{color:HighlightText !important}}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}
|
|
@@ -4,10 +4,20 @@ import { version } from "../../../../package";
|
|
|
4
4
|
* @slot default - Slot for placing visually hidden label in the close button.
|
|
5
5
|
*/
|
|
6
6
|
export class PostClosebutton {
|
|
7
|
-
host;
|
|
8
7
|
render() {
|
|
9
|
-
return (h(Host, { key: '
|
|
8
|
+
return (h(Host, { key: 'cfa55f799fdf9ad0f3ac1eb296e063b5001de997', "data-version": version }, h("button", { key: '7c8a084f6d7278329ddfb5fc4b2b8f992a185666', class: "btn btn-icon-close", type: "button" }, h("post-icon", { key: 'fc74ccb4f0c4c091a02a41cdef918d6c3b065c8c', "aria-hidden": "true", name: "closex" }), h("span", { key: '98478b013714df6d82c6c2f533ac8ecd2abae778', class: "visually-hidden" }, h("slot", { key: '109e2bca4436986dd037d8c29088cc79395bc200' })))));
|
|
10
9
|
}
|
|
11
10
|
static get is() { return "post-closebutton"; }
|
|
11
|
+
static get encapsulation() { return "shadow"; }
|
|
12
|
+
static get originalStyleUrls() {
|
|
13
|
+
return {
|
|
14
|
+
"$": ["post-closebutton.scss"]
|
|
15
|
+
};
|
|
16
|
+
}
|
|
17
|
+
static get styleUrls() {
|
|
18
|
+
return {
|
|
19
|
+
"$": ["post-closebutton.css"]
|
|
20
|
+
};
|
|
21
|
+
}
|
|
12
22
|
static get elementRef() { return "host"; }
|
|
13
23
|
}
|
|
@@ -7,21 +7,14 @@ import { checkEmptyOrType, isMotionReduced } from "../../utils/index";
|
|
|
7
7
|
*/
|
|
8
8
|
export class PostCollapsible {
|
|
9
9
|
constructor() {
|
|
10
|
+
this.isLoaded = false;
|
|
11
|
+
this.isOpen = true;
|
|
10
12
|
this.collapsed = false;
|
|
11
13
|
}
|
|
12
|
-
isLoaded = false;
|
|
13
|
-
isOpen = true;
|
|
14
|
-
host;
|
|
15
14
|
collapsedChange() {
|
|
16
15
|
checkEmptyOrType(this, 'collapsed', 'boolean');
|
|
17
16
|
void this.toggle(!this.collapsed);
|
|
18
17
|
}
|
|
19
|
-
/**
|
|
20
|
-
* An event emitted when the collapse element is shown or hidden, before the transition.
|
|
21
|
-
*
|
|
22
|
-
* The event payload is a boolean: `true` if the collapsible was opened, `false` if it was closed.
|
|
23
|
-
*/
|
|
24
|
-
postToggle;
|
|
25
18
|
componentDidLoad() {
|
|
26
19
|
this.collapsedChange();
|
|
27
20
|
this.isLoaded = true;
|
|
@@ -46,6 +39,7 @@ export class PostCollapsible {
|
|
|
46
39
|
const isHostRendered = this.host.offsetParent;
|
|
47
40
|
if (isHostRendered)
|
|
48
41
|
animation.commitStyles();
|
|
42
|
+
this.updateTriggers();
|
|
49
43
|
return open;
|
|
50
44
|
}
|
|
51
45
|
/**
|
|
@@ -56,7 +50,7 @@ export class PostCollapsible {
|
|
|
56
50
|
triggers.forEach(trigger => trigger.update());
|
|
57
51
|
}
|
|
58
52
|
render() {
|
|
59
|
-
return (h(Host, { key: '
|
|
53
|
+
return (h(Host, { key: 'a678bc639dfd7686d8e1bd57ca0f09984a24ab61', "data-version": version, tabindex: this.collapsed ? -1 : undefined }, h("slot", { key: 'e0b88ac152fa09314b4bc01c9abdb11480e2cb4d' })));
|
|
60
54
|
}
|
|
61
55
|
static get is() { return "post-collapsible"; }
|
|
62
56
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1,21 +1,17 @@
|
|
|
1
|
+
import { h, Host } from "@stencil/core";
|
|
1
2
|
import { version } from "../../../../package";
|
|
2
|
-
import { checkNonEmpty, checkType,
|
|
3
|
-
import { eventGuard } from "../../utils/event-gua";
|
|
3
|
+
import { checkNonEmpty, checkType, eventGuard, getRoot } from "../../utils/index";
|
|
4
4
|
export class PostCollapsibleTrigger {
|
|
5
5
|
constructor() {
|
|
6
|
+
this.observer = new MutationObserver(() => this.setTrigger());
|
|
6
7
|
this.for = undefined;
|
|
7
8
|
}
|
|
8
|
-
trigger;
|
|
9
|
-
observer = new MutationObserver(() => this.setTrigger());
|
|
10
|
-
root;
|
|
11
|
-
host;
|
|
12
9
|
/**
|
|
13
10
|
* Set the "aria-controls" and "aria-expanded" attributes on the trigger to match the state of the controlled post-collapsible
|
|
14
11
|
*/
|
|
15
|
-
|
|
12
|
+
validateAriaAttributes() {
|
|
16
13
|
checkNonEmpty(this, 'for');
|
|
17
14
|
checkType(this, 'for', 'string', 'The post-collapsible-trigger "for" prop should be a id.');
|
|
18
|
-
void this.update();
|
|
19
15
|
}
|
|
20
16
|
/**
|
|
21
17
|
* Initiate a mutation observer that updates the trigger whenever necessary
|
|
@@ -25,25 +21,12 @@ export class PostCollapsibleTrigger {
|
|
|
25
21
|
this.root.addEventListener('postToggle', this.handlePostToggle);
|
|
26
22
|
this.observer.observe(this.host, { childList: true, subtree: true });
|
|
27
23
|
}
|
|
28
|
-
/**
|
|
29
|
-
* Attach a "postToggle" event listener to the root node
|
|
30
|
-
* to update the trigger's "aria-expanded" attribute whenever the controlled post-collapsible is toggled
|
|
31
|
-
*/
|
|
32
|
-
componentWillLoad() {
|
|
33
|
-
this.root = getRoot(this.host);
|
|
34
|
-
}
|
|
35
|
-
/**
|
|
36
|
-
* Add the "data-version" to the host element and set the trigger
|
|
37
|
-
*/
|
|
38
24
|
componentDidLoad() {
|
|
39
|
-
this.host.setAttribute('data-version', version);
|
|
40
25
|
this.setTrigger();
|
|
41
26
|
if (!this.trigger)
|
|
42
27
|
console.warn('The post-collapsible-trigger must contain a button.');
|
|
28
|
+
this.validateAriaAttributes();
|
|
43
29
|
}
|
|
44
|
-
/**
|
|
45
|
-
* Disconnect the mutation observer
|
|
46
|
-
*/
|
|
47
30
|
disconnectedCallback() {
|
|
48
31
|
this.observer.disconnect();
|
|
49
32
|
this.root.removeEventListener('postToggle', this.handlePostToggle);
|
|
@@ -52,7 +35,7 @@ export class PostCollapsibleTrigger {
|
|
|
52
35
|
* Update the "aria-controls" and "aria-expanded" attributes on the trigger button
|
|
53
36
|
*/
|
|
54
37
|
async update() {
|
|
55
|
-
this.
|
|
38
|
+
this.updateAriaAttributes();
|
|
56
39
|
}
|
|
57
40
|
/**
|
|
58
41
|
* Private handler for the 'postToggle' event.
|
|
@@ -65,7 +48,7 @@ export class PostCollapsibleTrigger {
|
|
|
65
48
|
}
|
|
66
49
|
});
|
|
67
50
|
}
|
|
68
|
-
|
|
51
|
+
updateAriaAttributes() {
|
|
69
52
|
if (!this.trigger)
|
|
70
53
|
return;
|
|
71
54
|
// add the provided id to the aria-controls list
|
|
@@ -78,7 +61,7 @@ export class PostCollapsibleTrigger {
|
|
|
78
61
|
const isCollapsed = this.collapsible?.collapsed;
|
|
79
62
|
const newAriaExpanded = isCollapsed !== undefined ? !isCollapsed : undefined;
|
|
80
63
|
this.trigger.setAttribute('aria-expanded', `${newAriaExpanded}`);
|
|
81
|
-
}
|
|
64
|
+
}
|
|
82
65
|
/**
|
|
83
66
|
* Toggle the post-collapsible controlled by the trigger
|
|
84
67
|
*/
|
|
@@ -104,9 +87,13 @@ export class PostCollapsibleTrigger {
|
|
|
104
87
|
return;
|
|
105
88
|
this.trigger = trigger;
|
|
106
89
|
this.trigger.addEventListener('click', () => this.toggleCollapsible());
|
|
107
|
-
this.
|
|
90
|
+
this.updateAriaAttributes();
|
|
91
|
+
}
|
|
92
|
+
render() {
|
|
93
|
+
return (h(Host, { key: 'cd703fe34b8c82afc5956b58724d36b06054bc0b', "data-version": version }, h("slot", { key: '5abe4ba2b8922b941cc8aebbc7039e34e1853855' })));
|
|
108
94
|
}
|
|
109
95
|
static get is() { return "post-collapsible-trigger"; }
|
|
96
|
+
static get encapsulation() { return "shadow"; }
|
|
110
97
|
static get properties() {
|
|
111
98
|
return {
|
|
112
99
|
"for": {
|
|
@@ -124,7 +111,7 @@ export class PostCollapsibleTrigger {
|
|
|
124
111
|
"text": "Link the trigger to a post-collapsible with this id"
|
|
125
112
|
},
|
|
126
113
|
"attribute": "for",
|
|
127
|
-
"reflect":
|
|
114
|
+
"reflect": true
|
|
128
115
|
}
|
|
129
116
|
};
|
|
130
117
|
}
|
|
@@ -153,7 +140,7 @@ export class PostCollapsibleTrigger {
|
|
|
153
140
|
static get watchers() {
|
|
154
141
|
return [{
|
|
155
142
|
"propName": "for",
|
|
156
|
-
"methodName": "
|
|
143
|
+
"methodName": "validateAriaAttributes"
|
|
157
144
|
}];
|
|
158
145
|
}
|
|
159
146
|
}
|