@wordpress/ui 0.10.0 → 0.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +38 -0
- package/CONTRIBUTING.md +149 -0
- package/README.md +34 -6
- package/build/alert-dialog/context.cjs +6 -1
- package/build/alert-dialog/context.cjs.map +2 -2
- package/build/alert-dialog/popup.cjs +105 -33
- package/build/alert-dialog/popup.cjs.map +4 -4
- package/build/alert-dialog/root.cjs +106 -6
- package/build/alert-dialog/root.cjs.map +2 -2
- package/build/alert-dialog/trigger.cjs +4 -14
- package/build/alert-dialog/trigger.cjs.map +3 -3
- package/build/alert-dialog/types.cjs.map +1 -1
- package/build/badge/badge.cjs +14 -14
- package/build/badge/badge.cjs.map +2 -2
- package/build/button/button.cjs +16 -6
- package/build/button/button.cjs.map +3 -3
- package/build/card/content.cjs +4 -4
- package/build/card/content.cjs.map +2 -2
- package/build/card/full-bleed.cjs +4 -4
- package/build/card/full-bleed.cjs.map +2 -2
- package/build/card/header.cjs +4 -4
- package/build/card/header.cjs.map +2 -2
- package/build/card/root.cjs +4 -4
- package/build/card/root.cjs.map +2 -2
- package/build/card/title.cjs +5 -25
- package/build/card/title.cjs.map +4 -4
- package/build/collapsible-card/content.cjs +3 -3
- package/build/collapsible-card/content.cjs.map +1 -1
- package/build/collapsible-card/header.cjs +6 -6
- package/build/collapsible-card/header.cjs.map +2 -2
- package/build/dialog/footer.cjs +3 -3
- package/build/dialog/footer.cjs.map +2 -2
- package/build/dialog/header.cjs +3 -3
- package/build/dialog/header.cjs.map +2 -2
- package/build/dialog/popup.cjs +5 -4
- package/build/dialog/popup.cjs.map +2 -2
- package/build/dialog/title.cjs +10 -19
- package/build/dialog/title.cjs.map +3 -3
- package/build/dialog/types.cjs.map +1 -1
- package/build/empty-state/actions.cjs +3 -3
- package/build/empty-state/actions.cjs.map +2 -2
- package/build/empty-state/description.cjs +8 -5
- package/build/empty-state/description.cjs.map +2 -2
- package/build/empty-state/icon.cjs +3 -3
- package/build/empty-state/icon.cjs.map +2 -2
- package/build/empty-state/root.cjs +3 -3
- package/build/empty-state/root.cjs.map +2 -2
- package/build/empty-state/title.cjs +8 -5
- package/build/empty-state/title.cjs.map +2 -2
- package/build/empty-state/visual.cjs +3 -3
- package/build/empty-state/visual.cjs.map +2 -2
- package/build/form/primitives/field/description.cjs +17 -4
- package/build/form/primitives/field/description.cjs.map +3 -3
- package/build/form/primitives/field/details.cjs +4 -4
- package/build/form/primitives/field/details.cjs.map +2 -2
- package/build/form/primitives/field/label.cjs +8 -8
- package/build/form/primitives/field/label.cjs.map +2 -2
- package/build/form/primitives/field/root.cjs +2 -2
- package/build/form/primitives/field/root.cjs.map +2 -2
- package/build/form/primitives/fieldset/description.cjs +20 -4
- package/build/form/primitives/fieldset/description.cjs.map +3 -3
- package/build/form/primitives/fieldset/details.cjs +3 -3
- package/build/form/primitives/fieldset/details.cjs.map +2 -2
- package/build/form/primitives/fieldset/legend.cjs +8 -7
- package/build/form/primitives/fieldset/legend.cjs.map +2 -2
- package/build/form/primitives/input/input.cjs +23 -7
- package/build/form/primitives/input/input.cjs.map +3 -3
- package/build/form/primitives/input-layout/input-layout.cjs +13 -3
- package/build/form/primitives/input-layout/input-layout.cjs.map +3 -3
- package/build/form/primitives/input-layout/slot.cjs +3 -3
- package/build/form/primitives/input-layout/slot.cjs.map +2 -2
- package/build/form/primitives/select/item.cjs +3 -3
- package/build/form/primitives/select/item.cjs.map +2 -2
- package/build/form/primitives/select/popup.cjs +5 -5
- package/build/form/primitives/select/popup.cjs.map +2 -2
- package/build/form/primitives/select/trigger.cjs +6 -6
- package/build/form/primitives/select/trigger.cjs.map +2 -2
- package/build/form/primitives/select/types.cjs.map +1 -1
- package/build/form/primitives/textarea/textarea.cjs +20 -1
- package/build/form/primitives/textarea/textarea.cjs.map +3 -3
- package/build/index.cjs +3 -0
- package/build/index.cjs.map +2 -2
- package/build/link/link.cjs +16 -6
- package/build/link/link.cjs.map +3 -3
- package/build/notice/action-button.cjs +3 -3
- package/build/notice/action-button.cjs.map +2 -2
- package/build/notice/action-link.cjs +3 -3
- package/build/notice/action-link.cjs.map +2 -2
- package/build/notice/actions.cjs +3 -3
- package/build/notice/actions.cjs.map +2 -2
- package/build/notice/close-icon.cjs +3 -3
- package/build/notice/close-icon.cjs.map +2 -2
- package/build/notice/description.cjs +3 -3
- package/build/notice/description.cjs.map +2 -2
- package/build/notice/root.cjs +3 -3
- package/build/notice/root.cjs.map +2 -2
- package/build/notice/title.cjs +3 -3
- package/build/notice/title.cjs.map +2 -2
- package/build/popover/arrow.cjs +94 -0
- package/build/popover/arrow.cjs.map +7 -0
- package/build/popover/close.cjs +45 -0
- package/build/popover/close.cjs.map +7 -0
- package/build/popover/context.cjs +76 -0
- package/build/popover/context.cjs.map +7 -0
- package/build/popover/description.cjs +70 -0
- package/build/popover/description.cjs.map +7 -0
- package/build/popover/index.cjs +49 -0
- package/build/popover/index.cjs.map +7 -0
- package/build/popover/popup.cjs +138 -0
- package/build/popover/popup.cjs.map +7 -0
- package/build/popover/root.cjs +35 -0
- package/build/popover/root.cjs.map +7 -0
- package/build/popover/title.cjs +56 -0
- package/build/popover/title.cjs.map +7 -0
- package/build/popover/trigger.cjs +38 -0
- package/build/popover/trigger.cjs.map +7 -0
- package/build/popover/types.cjs +19 -0
- package/build/popover/types.cjs.map +7 -0
- package/build/tabs/list.cjs +3 -4
- package/build/tabs/list.cjs.map +2 -2
- package/build/tabs/panel.cjs +3 -3
- package/build/tabs/panel.cjs.map +2 -2
- package/build/tabs/tab.cjs +3 -3
- package/build/tabs/tab.cjs.map +2 -2
- package/build/text/text.cjs +20 -5
- package/build/text/text.cjs.map +3 -3
- package/build/tooltip/popup.cjs +5 -4
- package/build/tooltip/popup.cjs.map +2 -2
- package/build/tooltip/root.cjs.map +2 -2
- package/build/tooltip/types.cjs.map +1 -1
- package/build/utils/types.cjs.map +1 -1
- package/build/utils/use-deprioritized-initial-focus.cjs.map +2 -2
- package/build/visually-hidden/visually-hidden.cjs.map +2 -2
- package/build-module/alert-dialog/context.mjs +6 -1
- package/build-module/alert-dialog/context.mjs.map +2 -2
- package/build-module/alert-dialog/popup.mjs +107 -33
- package/build-module/alert-dialog/popup.mjs.map +4 -4
- package/build-module/alert-dialog/root.mjs +113 -7
- package/build-module/alert-dialog/root.mjs.map +2 -2
- package/build-module/alert-dialog/trigger.mjs +4 -4
- package/build-module/alert-dialog/trigger.mjs.map +3 -3
- package/build-module/badge/badge.mjs +14 -14
- package/build-module/badge/badge.mjs.map +2 -2
- package/build-module/button/button.mjs +16 -6
- package/build-module/button/button.mjs.map +3 -3
- package/build-module/card/content.mjs +4 -4
- package/build-module/card/content.mjs.map +2 -2
- package/build-module/card/full-bleed.mjs +4 -4
- package/build-module/card/full-bleed.mjs.map +2 -2
- package/build-module/card/header.mjs +4 -4
- package/build-module/card/header.mjs.map +2 -2
- package/build-module/card/root.mjs +4 -4
- package/build-module/card/root.mjs.map +2 -2
- package/build-module/card/title.mjs +5 -15
- package/build-module/card/title.mjs.map +3 -3
- package/build-module/collapsible-card/content.mjs +3 -3
- package/build-module/collapsible-card/content.mjs.map +1 -1
- package/build-module/collapsible-card/header.mjs +6 -6
- package/build-module/collapsible-card/header.mjs.map +2 -2
- package/build-module/dialog/footer.mjs +3 -3
- package/build-module/dialog/footer.mjs.map +2 -2
- package/build-module/dialog/header.mjs +3 -3
- package/build-module/dialog/header.mjs.map +2 -2
- package/build-module/dialog/popup.mjs +5 -4
- package/build-module/dialog/popup.mjs.map +2 -2
- package/build-module/dialog/title.mjs +10 -9
- package/build-module/dialog/title.mjs.map +2 -2
- package/build-module/empty-state/actions.mjs +3 -3
- package/build-module/empty-state/actions.mjs.map +2 -2
- package/build-module/empty-state/description.mjs +8 -5
- package/build-module/empty-state/description.mjs.map +2 -2
- package/build-module/empty-state/icon.mjs +3 -3
- package/build-module/empty-state/icon.mjs.map +2 -2
- package/build-module/empty-state/root.mjs +3 -3
- package/build-module/empty-state/root.mjs.map +2 -2
- package/build-module/empty-state/title.mjs +8 -5
- package/build-module/empty-state/title.mjs.map +2 -2
- package/build-module/empty-state/visual.mjs +3 -3
- package/build-module/empty-state/visual.mjs.map +2 -2
- package/build-module/form/primitives/field/description.mjs +17 -4
- package/build-module/form/primitives/field/description.mjs.map +3 -3
- package/build-module/form/primitives/field/details.mjs +4 -4
- package/build-module/form/primitives/field/details.mjs.map +2 -2
- package/build-module/form/primitives/field/label.mjs +8 -8
- package/build-module/form/primitives/field/label.mjs.map +2 -2
- package/build-module/form/primitives/field/root.mjs +2 -2
- package/build-module/form/primitives/field/root.mjs.map +2 -2
- package/build-module/form/primitives/fieldset/description.mjs +20 -4
- package/build-module/form/primitives/fieldset/description.mjs.map +3 -3
- package/build-module/form/primitives/fieldset/details.mjs +3 -3
- package/build-module/form/primitives/fieldset/details.mjs.map +2 -2
- package/build-module/form/primitives/fieldset/legend.mjs +8 -7
- package/build-module/form/primitives/fieldset/legend.mjs.map +2 -2
- package/build-module/form/primitives/input/input.mjs +23 -7
- package/build-module/form/primitives/input/input.mjs.map +3 -3
- package/build-module/form/primitives/input-layout/input-layout.mjs +13 -3
- package/build-module/form/primitives/input-layout/input-layout.mjs.map +3 -3
- package/build-module/form/primitives/input-layout/slot.mjs +3 -3
- package/build-module/form/primitives/input-layout/slot.mjs.map +2 -2
- package/build-module/form/primitives/select/item.mjs +3 -3
- package/build-module/form/primitives/select/item.mjs.map +2 -2
- package/build-module/form/primitives/select/popup.mjs +5 -5
- package/build-module/form/primitives/select/popup.mjs.map +2 -2
- package/build-module/form/primitives/select/trigger.mjs +6 -6
- package/build-module/form/primitives/select/trigger.mjs.map +2 -2
- package/build-module/form/primitives/textarea/textarea.mjs +20 -1
- package/build-module/form/primitives/textarea/textarea.mjs.map +3 -3
- package/build-module/index.mjs +2 -0
- package/build-module/index.mjs.map +2 -2
- package/build-module/link/link.mjs +16 -6
- package/build-module/link/link.mjs.map +3 -3
- package/build-module/notice/action-button.mjs +3 -3
- package/build-module/notice/action-button.mjs.map +2 -2
- package/build-module/notice/action-link.mjs +3 -3
- package/build-module/notice/action-link.mjs.map +2 -2
- package/build-module/notice/actions.mjs +3 -3
- package/build-module/notice/actions.mjs.map +2 -2
- package/build-module/notice/close-icon.mjs +3 -3
- package/build-module/notice/close-icon.mjs.map +2 -2
- package/build-module/notice/description.mjs +3 -3
- package/build-module/notice/description.mjs.map +2 -2
- package/build-module/notice/root.mjs +3 -3
- package/build-module/notice/root.mjs.map +2 -2
- package/build-module/notice/title.mjs +3 -3
- package/build-module/notice/title.mjs.map +2 -2
- package/build-module/popover/arrow.mjs +59 -0
- package/build-module/popover/arrow.mjs.map +7 -0
- package/build-module/popover/close.mjs +20 -0
- package/build-module/popover/close.mjs.map +7 -0
- package/build-module/popover/context.mjs +57 -0
- package/build-module/popover/context.mjs.map +7 -0
- package/build-module/popover/description.mjs +35 -0
- package/build-module/popover/description.mjs.map +7 -0
- package/build-module/popover/index.mjs +18 -0
- package/build-module/popover/index.mjs.map +7 -0
- package/build-module/popover/popup.mjs +105 -0
- package/build-module/popover/popup.mjs.map +7 -0
- package/build-module/popover/root.mjs +10 -0
- package/build-module/popover/root.mjs.map +7 -0
- package/build-module/popover/title.mjs +31 -0
- package/build-module/popover/title.mjs.map +7 -0
- package/build-module/popover/trigger.mjs +13 -0
- package/build-module/popover/trigger.mjs.map +7 -0
- package/build-module/popover/types.mjs +1 -0
- package/build-module/popover/types.mjs.map +7 -0
- package/build-module/tabs/list.mjs +3 -4
- package/build-module/tabs/list.mjs.map +2 -2
- package/build-module/tabs/panel.mjs +3 -3
- package/build-module/tabs/panel.mjs.map +2 -2
- package/build-module/tabs/tab.mjs +3 -3
- package/build-module/tabs/tab.mjs.map +2 -2
- package/build-module/text/text.mjs +20 -5
- package/build-module/text/text.mjs.map +3 -3
- package/build-module/tooltip/popup.mjs +5 -4
- package/build-module/tooltip/popup.mjs.map +2 -2
- package/build-module/tooltip/root.mjs.map +2 -2
- package/build-module/utils/use-deprioritized-initial-focus.mjs.map +2 -2
- package/build-module/visually-hidden/visually-hidden.mjs.map +2 -2
- package/build-types/alert-dialog/context.d.ts +6 -3
- package/build-types/alert-dialog/context.d.ts.map +1 -1
- package/build-types/alert-dialog/popup.d.ts.map +1 -1
- package/build-types/alert-dialog/root.d.ts +2 -8
- package/build-types/alert-dialog/root.d.ts.map +1 -1
- package/build-types/alert-dialog/stories/index.story.d.ts +18 -6
- package/build-types/alert-dialog/stories/index.story.d.ts.map +1 -1
- package/build-types/alert-dialog/trigger.d.ts +2 -1
- package/build-types/alert-dialog/trigger.d.ts.map +1 -1
- package/build-types/alert-dialog/types.d.ts +61 -26
- package/build-types/alert-dialog/types.d.ts.map +1 -1
- package/build-types/badge/badge.d.ts.map +1 -1
- package/build-types/button/button.d.ts.map +1 -1
- package/build-types/card/stories/index.story.d.ts.map +1 -1
- package/build-types/card/title.d.ts.map +1 -1
- package/build-types/collapsible/panel.d.ts +2 -1
- package/build-types/collapsible/panel.d.ts.map +1 -1
- package/build-types/collapsible/root.d.ts +2 -1
- package/build-types/collapsible/root.d.ts.map +1 -1
- package/build-types/collapsible/trigger.d.ts +2 -1
- package/build-types/collapsible/trigger.d.ts.map +1 -1
- package/build-types/dialog/popup.d.ts.map +1 -1
- package/build-types/dialog/stories/index.story.d.ts +8 -0
- package/build-types/dialog/stories/index.story.d.ts.map +1 -1
- package/build-types/dialog/title.d.ts +12 -2
- package/build-types/dialog/title.d.ts.map +1 -1
- package/build-types/dialog/types.d.ts +8 -1
- package/build-types/dialog/types.d.ts.map +1 -1
- package/build-types/empty-state/description.d.ts.map +1 -1
- package/build-types/empty-state/title.d.ts.map +1 -1
- package/build-types/form/primitives/field/description.d.ts +2 -1
- package/build-types/form/primitives/field/description.d.ts.map +1 -1
- package/build-types/form/primitives/field/details.d.ts +2 -1
- package/build-types/form/primitives/field/details.d.ts.map +1 -1
- package/build-types/form/primitives/field/label.d.ts +2 -1
- package/build-types/form/primitives/field/label.d.ts.map +1 -1
- package/build-types/form/primitives/fieldset/description.d.ts +2 -1
- package/build-types/form/primitives/fieldset/description.d.ts.map +1 -1
- package/build-types/form/primitives/fieldset/details.d.ts +2 -1
- package/build-types/form/primitives/fieldset/details.d.ts.map +1 -1
- package/build-types/form/primitives/fieldset/legend.d.ts +2 -1
- package/build-types/form/primitives/fieldset/legend.d.ts.map +1 -1
- package/build-types/form/primitives/fieldset/root.d.ts +2 -1
- package/build-types/form/primitives/fieldset/root.d.ts.map +1 -1
- package/build-types/form/primitives/input/input.d.ts.map +1 -1
- package/build-types/form/primitives/input-layout/input-layout.d.ts.map +1 -1
- package/build-types/form/primitives/select/item.d.ts +6 -2
- package/build-types/form/primitives/select/item.d.ts.map +1 -1
- package/build-types/form/primitives/select/popup.d.ts +11 -1
- package/build-types/form/primitives/select/popup.d.ts.map +1 -1
- package/build-types/form/primitives/select/trigger.d.ts +12 -2
- package/build-types/form/primitives/select/trigger.d.ts.map +1 -1
- package/build-types/form/primitives/select/types.d.ts +13 -3
- package/build-types/form/primitives/select/types.d.ts.map +1 -1
- package/build-types/form/primitives/textarea/textarea.d.ts.map +1 -1
- package/build-types/form/stories/shared.d.ts.map +1 -1
- package/build-types/index.d.ts +1 -0
- package/build-types/index.d.ts.map +1 -1
- package/build-types/link/link.d.ts.map +1 -1
- package/build-types/popover/arrow.d.ts +10 -0
- package/build-types/popover/arrow.d.ts.map +1 -0
- package/build-types/popover/close.d.ts +11 -0
- package/build-types/popover/close.d.ts.map +1 -0
- package/build-types/popover/context.d.ts +22 -0
- package/build-types/popover/context.d.ts.map +1 -0
- package/build-types/popover/description.d.ts +10 -0
- package/build-types/popover/description.d.ts.map +1 -0
- package/build-types/popover/index.d.ts +9 -0
- package/build-types/popover/index.d.ts.map +1 -0
- package/build-types/popover/popup.d.ts +11 -0
- package/build-types/popover/popup.d.ts.map +1 -0
- package/build-types/popover/root.d.ts +37 -0
- package/build-types/popover/root.d.ts.map +1 -0
- package/build-types/popover/stories/index.story.d.ts +211 -0
- package/build-types/popover/stories/index.story.d.ts.map +1 -0
- package/build-types/popover/stories/utils.d.ts +25 -0
- package/build-types/popover/stories/utils.d.ts.map +1 -0
- package/build-types/popover/test/index.test.d.ts +2 -0
- package/build-types/popover/test/index.test.d.ts.map +1 -0
- package/build-types/popover/title.d.ts +20 -0
- package/build-types/popover/title.d.ts.map +1 -0
- package/build-types/popover/trigger.d.ts +10 -0
- package/build-types/popover/trigger.d.ts.map +1 -0
- package/build-types/popover/types.d.ts +83 -0
- package/build-types/popover/types.d.ts.map +1 -0
- package/build-types/tabs/list.d.ts +2 -1
- package/build-types/tabs/list.d.ts.map +1 -1
- package/build-types/tabs/panel.d.ts +2 -1
- package/build-types/tabs/panel.d.ts.map +1 -1
- package/build-types/tabs/root.d.ts +2 -1
- package/build-types/tabs/root.d.ts.map +1 -1
- package/build-types/tabs/tab.d.ts +2 -1
- package/build-types/tabs/tab.d.ts.map +1 -1
- package/build-types/text/stories/index.story.d.ts +4 -0
- package/build-types/text/stories/index.story.d.ts.map +1 -1
- package/build-types/text/text.d.ts.map +1 -1
- package/build-types/tooltip/popup.d.ts.map +1 -1
- package/build-types/tooltip/root.d.ts +9 -8
- package/build-types/tooltip/root.d.ts.map +1 -1
- package/build-types/tooltip/stories/usage-guidelines.story.d.ts +21 -0
- package/build-types/tooltip/stories/usage-guidelines.story.d.ts.map +1 -0
- package/build-types/tooltip/types.d.ts +4 -0
- package/build-types/tooltip/types.d.ts.map +1 -1
- package/build-types/utils/types.d.ts +6 -2
- package/build-types/utils/types.d.ts.map +1 -1
- package/build-types/utils/use-deprioritized-initial-focus.d.ts +6 -5
- package/build-types/utils/use-deprioritized-initial-focus.d.ts.map +1 -1
- package/build-types/visually-hidden/stories/index.story.d.ts +7 -0
- package/build-types/visually-hidden/stories/index.story.d.ts.map +1 -1
- package/build-types/visually-hidden/visually-hidden.d.ts +34 -0
- package/build-types/visually-hidden/visually-hidden.d.ts.map +1 -1
- package/package.json +12 -12
- package/src/alert-dialog/context.tsx +12 -4
- package/src/alert-dialog/popup.tsx +91 -33
- package/src/alert-dialog/root.tsx +191 -13
- package/src/alert-dialog/stories/index.story.tsx +116 -65
- package/src/alert-dialog/style.module.css +11 -0
- package/src/alert-dialog/test/index.test.tsx +1319 -347
- package/src/alert-dialog/trigger.tsx +2 -2
- package/src/alert-dialog/types.ts +64 -28
- package/src/badge/badge.tsx +11 -14
- package/src/badge/style.module.css +0 -4
- package/src/button/button.tsx +2 -0
- package/src/button/style.module.css +7 -3
- package/src/card/stories/index.story.tsx +4 -5
- package/src/card/style.module.css +1 -5
- package/src/card/test/index.test.tsx +17 -1
- package/src/card/title.tsx +6 -5
- package/src/collapsible-card/stories/index.story.tsx +5 -5
- package/src/dialog/popup.tsx +2 -1
- package/src/dialog/stories/index.story.tsx +33 -0
- package/src/dialog/style.module.css +13 -9
- package/src/dialog/test/index.test.tsx +63 -4
- package/src/dialog/title.tsx +21 -9
- package/src/dialog/types.ts +9 -1
- package/src/empty-state/description.tsx +6 -2
- package/src/empty-state/style.module.css +1 -1
- package/src/empty-state/test/description.test.tsx +13 -0
- package/src/empty-state/test/title.test.tsx +13 -0
- package/src/empty-state/title.tsx +9 -3
- package/src/form/primitives/field/description.tsx +6 -1
- package/src/form/primitives/field/details.tsx +4 -2
- package/src/form/primitives/field/label.tsx +9 -5
- package/src/form/primitives/field/root.tsx +2 -2
- package/src/form/primitives/field/test/index.test.tsx +11 -0
- package/src/form/primitives/fieldset/description.tsx +9 -1
- package/src/form/primitives/fieldset/legend.tsx +9 -4
- package/src/form/primitives/fieldset/test/index.test.tsx +22 -0
- package/src/form/primitives/input/input.tsx +6 -1
- package/src/form/primitives/input/style.module.css +4 -0
- package/src/form/primitives/input-layout/input-layout.tsx +2 -0
- package/src/form/primitives/input-layout/style.module.css +3 -3
- package/src/form/primitives/select/popup.tsx +5 -2
- package/src/form/primitives/select/test/index.test.tsx +60 -1
- package/src/form/primitives/select/types.ts +14 -4
- package/src/form/primitives/textarea/textarea.tsx +10 -1
- package/src/form/stories/shared.tsx +4 -2
- package/src/index.ts +1 -0
- package/src/link/link.tsx +2 -0
- package/src/link/style.module.css +11 -1
- package/src/notice/style.module.css +5 -5
- package/src/popover/arrow.tsx +49 -0
- package/src/popover/close.tsx +24 -0
- package/src/popover/context.tsx +100 -0
- package/src/popover/description.tsx +29 -0
- package/src/popover/index.ts +9 -0
- package/src/popover/popup.tsx +106 -0
- package/src/popover/root.tsx +41 -0
- package/src/popover/stories/index.story.tsx +1315 -0
- package/src/popover/stories/utils.tsx +91 -0
- package/src/popover/style.module.css +64 -0
- package/src/popover/test/index.test.tsx +727 -0
- package/src/popover/title.tsx +47 -0
- package/src/popover/trigger.tsx +17 -0
- package/src/popover/types.ts +113 -0
- package/src/tabs/list.tsx +0 -1
- package/src/tabs/style.module.css +2 -2
- package/src/text/stories/index.story.tsx +4 -2
- package/src/text/style.module.css +62 -36
- package/src/text/test/index.test.tsx +1 -4
- package/src/text/text.tsx +8 -1
- package/src/tooltip/popup.tsx +2 -1
- package/src/tooltip/root.tsx +9 -8
- package/src/tooltip/stories/usage-guidelines.mdx +91 -0
- package/src/tooltip/stories/usage-guidelines.story.tsx +119 -0
- package/src/tooltip/style.module.css +2 -2
- package/src/tooltip/test/index.test.tsx +61 -0
- package/src/tooltip/types.ts +5 -0
- package/src/utils/css/field.module.css +12 -9
- package/src/utils/css/focus.module.css +7 -5
- package/src/utils/css/global-css-defense.module.css +117 -0
- package/src/utils/css/item-popup.module.css +2 -2
- package/src/utils/types.ts +7 -2
- package/src/utils/use-deprioritized-initial-focus.ts +5 -4
- package/src/visually-hidden/stories/index.story.tsx +25 -0
- package/src/visually-hidden/visually-hidden.tsx +34 -0
|
@@ -0,0 +1,138 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
|
|
30
|
+
// packages/ui/src/popover/popup.tsx
|
|
31
|
+
var popup_exports = {};
|
|
32
|
+
__export(popup_exports, {
|
|
33
|
+
Popup: () => Popup
|
|
34
|
+
});
|
|
35
|
+
module.exports = __toCommonJS(popup_exports);
|
|
36
|
+
var import_popover = require("@base-ui/react/popover");
|
|
37
|
+
var import_clsx = __toESM(require("clsx"));
|
|
38
|
+
var import_element = require("@wordpress/element");
|
|
39
|
+
var import_compose = require("@wordpress/compose");
|
|
40
|
+
var import_theme = require("@wordpress/theme");
|
|
41
|
+
var import_lock_unlock = require("../lock-unlock.cjs");
|
|
42
|
+
|
|
43
|
+
// packages/ui/src/utils/css/resets.module.css
|
|
44
|
+
if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='e3ae230cea']")) {
|
|
45
|
+
const style = document.createElement("style");
|
|
46
|
+
style.setAttribute("data-wp-hash", "e3ae230cea");
|
|
47
|
+
style.appendChild(document.createTextNode("@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-utilities{._336cd3e4e743482f__box-sizing{box-sizing:border-box;*,:after,:before{box-sizing:inherit}}}"));
|
|
48
|
+
document.head.appendChild(style);
|
|
49
|
+
}
|
|
50
|
+
var resets_default = { "box-sizing": "_336cd3e4e743482f__box-sizing" };
|
|
51
|
+
|
|
52
|
+
// packages/ui/src/popover/popup.tsx
|
|
53
|
+
var import_use_deprioritized_initial_focus = require("../utils/use-deprioritized-initial-focus.cjs");
|
|
54
|
+
var import_context = require("./context.cjs");
|
|
55
|
+
|
|
56
|
+
// packages/ui/src/popover/style.module.css
|
|
57
|
+
if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='65854cdb1e']")) {
|
|
58
|
+
const style = document.createElement("style");
|
|
59
|
+
style.setAttribute("data-wp-hash", "65854cdb1e");
|
|
60
|
+
style.appendChild(document.createTextNode('@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._10450722b9676f78__positioner{z-index:var(--wp-ui-popover-z-index,initial)}._84e8f597bcf683b8__popup{background-color:var(--wpds-color-bg-surface-neutral-strong,#fff);border:var(--wpds-border-width-xs,1px) solid var(--wpds-color-stroke-surface-neutral-weak,#e4e4e4);border-radius:var(--wpds-border-radius-md,4px);box-shadow:var(--wpds-elevation-md,0 2px 3px 0 #0000000d,0 4px 5px 0 #0000000a,0 12px 12px 0 #00000008,0 16px 16px 0 #00000005);color:var(--wpds-color-fg-content-neutral,#1e1e1e);font-family:var(--wpds-typography-font-family-body,-apple-system,system-ui,"Segoe UI","Roboto","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif);font-size:var(--wpds-typography-font-size-md,13px);line-height:var(--wpds-typography-line-height-md,24px);outline:0;padding:var(--wpds-dimension-padding-lg,16px)}.ca05d3eb89321fcd__arrow{display:flex;&[data-side=top]{bottom:-8px;rotate:180deg}&[data-side=bottom]{rotate:0deg;top:-8px}&[data-side=left]{inset-inline-end:-13px;rotate:90deg}&[data-side=right]{inset-inline-start:-13px;rotate:-90deg}}._12d8edd9eb946b5f__arrow-fill{fill:var(--wpds-color-bg-surface-neutral-strong,#fff)}._6ddab482bd929dad__arrow-stroke{fill:var(--wpds-color-stroke-surface-neutral-weak,#e4e4e4)}._42cb9ed02a2f0782__description{color:var(--wpds-color-fg-content-neutral-weak,#707070)}.e4d544aa033f05c6__backdrop{background-color:#00000026;inset:0;position:fixed;z-index:var(--wp-ui-popover-z-index,initial)}}'));
|
|
61
|
+
document.head.appendChild(style);
|
|
62
|
+
}
|
|
63
|
+
var style_default = { "positioner": "_10450722b9676f78__positioner", "popup": "_84e8f597bcf683b8__popup", "arrow": "ca05d3eb89321fcd__arrow", "arrow-fill": "_12d8edd9eb946b5f__arrow-fill", "arrow-stroke": "_6ddab482bd929dad__arrow-stroke", "description": "_42cb9ed02a2f0782__description", "backdrop": "e4d544aa033f05c6__backdrop" };
|
|
64
|
+
|
|
65
|
+
// packages/ui/src/popover/popup.tsx
|
|
66
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
67
|
+
var ThemeProvider = (0, import_lock_unlock.unlock)(import_theme.privateApis).ThemeProvider;
|
|
68
|
+
var CLOSE_ATTR = "data-wp-ui-popover-close";
|
|
69
|
+
var Popup = (0, import_element.forwardRef)(function PopoverPopup({
|
|
70
|
+
align = "center",
|
|
71
|
+
alignOffset,
|
|
72
|
+
anchor,
|
|
73
|
+
// Matches the popup's border-radius (--wpds-border-radius-md).
|
|
74
|
+
arrowPadding = 8,
|
|
75
|
+
backdrop = false,
|
|
76
|
+
children,
|
|
77
|
+
className,
|
|
78
|
+
collisionAvoidance,
|
|
79
|
+
collisionBoundary,
|
|
80
|
+
collisionPadding,
|
|
81
|
+
container,
|
|
82
|
+
finalFocus,
|
|
83
|
+
initialFocus,
|
|
84
|
+
side = "bottom",
|
|
85
|
+
sideOffset = 8,
|
|
86
|
+
sticky,
|
|
87
|
+
style,
|
|
88
|
+
variant = "default",
|
|
89
|
+
...props
|
|
90
|
+
}, ref) {
|
|
91
|
+
const { resolvedInitialFocus, popupRef } = (0, import_use_deprioritized_initial_focus.useDeprioritizedInitialFocus)({
|
|
92
|
+
initialFocus,
|
|
93
|
+
deprioritizedAttribute: CLOSE_ATTR
|
|
94
|
+
});
|
|
95
|
+
const mergedPopupRef = (0, import_compose.useMergeRefs)([ref, popupRef]);
|
|
96
|
+
const backdropElement = backdrop ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_popover.Popover.Backdrop, { className: style_default.backdrop }) : null;
|
|
97
|
+
const positioner = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
98
|
+
import_popover.Popover.Positioner,
|
|
99
|
+
{
|
|
100
|
+
align,
|
|
101
|
+
alignOffset,
|
|
102
|
+
anchor,
|
|
103
|
+
arrowPadding,
|
|
104
|
+
collisionAvoidance,
|
|
105
|
+
collisionBoundary,
|
|
106
|
+
collisionPadding,
|
|
107
|
+
side,
|
|
108
|
+
sideOffset,
|
|
109
|
+
sticky,
|
|
110
|
+
style,
|
|
111
|
+
className: (0, import_clsx.default)(
|
|
112
|
+
resets_default["box-sizing"],
|
|
113
|
+
style_default.positioner,
|
|
114
|
+
className
|
|
115
|
+
),
|
|
116
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
117
|
+
import_popover.Popover.Popup,
|
|
118
|
+
{
|
|
119
|
+
ref: mergedPopupRef,
|
|
120
|
+
initialFocus: resolvedInitialFocus,
|
|
121
|
+
finalFocus,
|
|
122
|
+
className: (0, import_clsx.default)(variant !== "unstyled" && style_default.popup),
|
|
123
|
+
...props,
|
|
124
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_context.PopoverValidationProvider, { children })
|
|
125
|
+
}
|
|
126
|
+
) })
|
|
127
|
+
}
|
|
128
|
+
);
|
|
129
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_popover.Popover.Portal, { container, children: [
|
|
130
|
+
backdropElement,
|
|
131
|
+
positioner
|
|
132
|
+
] });
|
|
133
|
+
});
|
|
134
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
135
|
+
0 && (module.exports = {
|
|
136
|
+
Popup
|
|
137
|
+
});
|
|
138
|
+
//# sourceMappingURL=popup.cjs.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/popover/popup.tsx", "../../src/utils/css/resets.module.css", "../../src/popover/style.module.css"],
|
|
4
|
+
"sourcesContent": ["import { Popover as _Popover } from '@base-ui/react/popover';\nimport clsx from 'clsx';\nimport { forwardRef } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\nimport {\n\ttype ThemeProvider as ThemeProviderType,\n\tprivateApis as themePrivateApis,\n} from '@wordpress/theme';\nimport { unlock } from '../lock-unlock';\nimport resetStyles from '../utils/css/resets.module.css';\nimport { useDeprioritizedInitialFocus } from '../utils/use-deprioritized-initial-focus';\nimport { PopoverValidationProvider } from './context';\nimport styles from './style.module.css';\nimport type { PopupProps } from './types';\n\nconst ThemeProvider: typeof ThemeProviderType =\n\tunlock( themePrivateApis ).ThemeProvider;\n\nconst CLOSE_ATTR = 'data-wp-ui-popover-close';\n\n/**\n * Renders the floating popup container for the popover content.\n *\n * Handles portal rendering, positioning relative to the anchor, collision\n * avoidance, focus management, and optional backdrop. Supply a `container`\n * element for cross-document scenarios such as iframes.\n */\nconst Popup = forwardRef< HTMLDivElement, PopupProps >( function PopoverPopup(\n\t{\n\t\talign = 'center',\n\t\talignOffset,\n\t\tanchor,\n\t\t// Matches the popup's border-radius (--wpds-border-radius-md).\n\t\tarrowPadding = 8,\n\t\tbackdrop = false,\n\t\tchildren,\n\t\tclassName,\n\t\tcollisionAvoidance,\n\t\tcollisionBoundary,\n\t\tcollisionPadding,\n\t\tcontainer,\n\t\tfinalFocus,\n\t\tinitialFocus,\n\t\tside = 'bottom',\n\t\tsideOffset = 8,\n\t\tsticky,\n\t\tstyle,\n\t\tvariant = 'default',\n\t\t...props\n\t},\n\tref\n) {\n\tconst { resolvedInitialFocus, popupRef } = useDeprioritizedInitialFocus( {\n\t\tinitialFocus,\n\t\tdeprioritizedAttribute: CLOSE_ATTR,\n\t} );\n\tconst mergedPopupRef = useMergeRefs( [ ref, popupRef ] );\n\n\tconst backdropElement = backdrop ? (\n\t\t<_Popover.Backdrop className={ styles.backdrop } />\n\t) : null;\n\n\tconst positioner = (\n\t\t<_Popover.Positioner\n\t\t\talign={ align }\n\t\t\talignOffset={ alignOffset }\n\t\t\tanchor={ anchor }\n\t\t\tarrowPadding={ arrowPadding }\n\t\t\tcollisionAvoidance={ collisionAvoidance }\n\t\t\tcollisionBoundary={ collisionBoundary }\n\t\t\tcollisionPadding={ collisionPadding }\n\t\t\tside={ side }\n\t\t\tsideOffset={ sideOffset }\n\t\t\tsticky={ sticky }\n\t\t\tstyle={ style }\n\t\t\tclassName={ clsx(\n\t\t\t\tresetStyles[ 'box-sizing' ],\n\t\t\t\tstyles.positioner,\n\t\t\t\tclassName\n\t\t\t) }\n\t\t>\n\t\t\t<ThemeProvider>\n\t\t\t\t<_Popover.Popup\n\t\t\t\t\tref={ mergedPopupRef }\n\t\t\t\t\tinitialFocus={ resolvedInitialFocus }\n\t\t\t\t\tfinalFocus={ finalFocus }\n\t\t\t\t\tclassName={ clsx( variant !== 'unstyled' && styles.popup ) }\n\t\t\t\t\t{ ...props }\n\t\t\t\t>\n\t\t\t\t\t<PopoverValidationProvider>\n\t\t\t\t\t\t{ children }\n\t\t\t\t\t</PopoverValidationProvider>\n\t\t\t\t</_Popover.Popup>\n\t\t\t</ThemeProvider>\n\t\t</_Popover.Positioner>\n\t);\n\n\treturn (\n\t\t<_Popover.Portal container={ container }>\n\t\t\t{ backdropElement }\n\t\t\t{ positioner }\n\t\t</_Popover.Portal>\n\t);\n} );\n\nexport { Popup };\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='e3ae230cea']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"e3ae230cea\");\n\tstyle.appendChild(document.createTextNode(\"@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-utilities{._336cd3e4e743482f__box-sizing{box-sizing:border-box;*,:after,:before{box-sizing:inherit}}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"box-sizing\":\"_336cd3e4e743482f__box-sizing\"};\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='65854cdb1e']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"65854cdb1e\");\n\tstyle.appendChild(document.createTextNode(\"@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._10450722b9676f78__positioner{z-index:var(--wp-ui-popover-z-index,initial)}._84e8f597bcf683b8__popup{background-color:var(--wpds-color-bg-surface-neutral-strong,#fff);border:var(--wpds-border-width-xs,1px) solid var(--wpds-color-stroke-surface-neutral-weak,#e4e4e4);border-radius:var(--wpds-border-radius-md,4px);box-shadow:var(--wpds-elevation-md,0 2px 3px 0 #0000000d,0 4px 5px 0 #0000000a,0 12px 12px 0 #00000008,0 16px 16px 0 #00000005);color:var(--wpds-color-fg-content-neutral,#1e1e1e);font-family:var(--wpds-typography-font-family-body,-apple-system,system-ui,\\\"Segoe UI\\\",\\\"Roboto\\\",\\\"Oxygen-Sans\\\",\\\"Ubuntu\\\",\\\"Cantarell\\\",\\\"Helvetica Neue\\\",sans-serif);font-size:var(--wpds-typography-font-size-md,13px);line-height:var(--wpds-typography-line-height-md,24px);outline:0;padding:var(--wpds-dimension-padding-lg,16px)}.ca05d3eb89321fcd__arrow{display:flex;&[data-side=top]{bottom:-8px;rotate:180deg}&[data-side=bottom]{rotate:0deg;top:-8px}&[data-side=left]{inset-inline-end:-13px;rotate:90deg}&[data-side=right]{inset-inline-start:-13px;rotate:-90deg}}._12d8edd9eb946b5f__arrow-fill{fill:var(--wpds-color-bg-surface-neutral-strong,#fff)}._6ddab482bd929dad__arrow-stroke{fill:var(--wpds-color-stroke-surface-neutral-weak,#e4e4e4)}._42cb9ed02a2f0782__description{color:var(--wpds-color-fg-content-neutral-weak,#707070)}.e4d544aa033f05c6__backdrop{background-color:#00000026;inset:0;position:fixed;z-index:var(--wp-ui-popover-z-index,initial)}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"positioner\":\"_10450722b9676f78__positioner\",\"popup\":\"_84e8f597bcf683b8__popup\",\"arrow\":\"ca05d3eb89321fcd__arrow\",\"arrow-fill\":\"_12d8edd9eb946b5f__arrow-fill\",\"arrow-stroke\":\"_6ddab482bd929dad__arrow-stroke\",\"description\":\"_42cb9ed02a2f0782__description\",\"backdrop\":\"e4d544aa033f05c6__backdrop\"};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAoC;AACpC,kBAAiB;AACjB,qBAA2B;AAC3B,qBAA6B;AAC7B,mBAGO;AACP,yBAAuB;;;ACRvB,IAAI,OAAO,aAAa,eAAe,QAAQ,IAAI,aAAa,UAAU,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AAC3I,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,kMAAkM,CAAC;AAC7O,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,iBAAQ,EAAC,cAAa,gCAA+B;;;ADI5D,6CAA6C;AAC7C,qBAA0C;;;AEX1C,IAAI,OAAO,aAAa,eAAe,QAAQ,IAAI,aAAa,UAAU,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AAC3I,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,sgDAAkhD,CAAC;AAC7jD,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,gBAAQ,EAAC,cAAa,iCAAgC,SAAQ,4BAA2B,SAAQ,2BAA0B,cAAa,iCAAgC,gBAAe,mCAAkC,eAAc,kCAAiC,YAAW,6BAA4B;;;AFqDpT;AA5CF,IAAM,oBACL,2BAAQ,aAAAA,WAAiB,EAAE;AAE5B,IAAM,aAAa;AASnB,IAAM,YAAQ,2BAA0C,SAAS,aAChE;AAAA,EACC,QAAQ;AAAA,EACR;AAAA,EACA;AAAA;AAAA,EAEA,eAAe;AAAA,EACf,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,GAAG;AACJ,GACA,KACC;AACD,QAAM,EAAE,sBAAsB,SAAS,QAAI,qEAA8B;AAAA,IACxE;AAAA,IACA,wBAAwB;AAAA,EACzB,CAAE;AACF,QAAM,qBAAiB,6BAAc,CAAE,KAAK,QAAS,CAAE;AAEvD,QAAM,kBAAkB,WACvB,4CAAC,eAAAC,QAAS,UAAT,EAAkB,WAAY,cAAO,UAAW,IAC9C;AAEJ,QAAM,aACL;AAAA,IAAC,eAAAA,QAAS;AAAA,IAAT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAY,YAAAC;AAAA,QACX,eAAa,YAAa;AAAA,QAC1B,cAAO;AAAA,QACP;AAAA,MACD;AAAA,MAEA,sDAAC,iBACA;AAAA,QAAC,eAAAD,QAAS;AAAA,QAAT;AAAA,UACA,KAAM;AAAA,UACN,cAAe;AAAA,UACf;AAAA,UACA,eAAY,YAAAC,SAAM,YAAY,cAAc,cAAO,KAAM;AAAA,UACvD,GAAG;AAAA,UAEL,sDAAC,4CACE,UACH;AAAA;AAAA,MACD,GACD;AAAA;AAAA,EACD;AAGD,SACC,6CAAC,eAAAD,QAAS,QAAT,EAAgB,WACd;AAAA;AAAA,IACA;AAAA,KACH;AAEF,CAAE;",
|
|
6
|
+
"names": ["themePrivateApis", "_Popover", "clsx"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// packages/ui/src/popover/root.tsx
|
|
21
|
+
var root_exports = {};
|
|
22
|
+
__export(root_exports, {
|
|
23
|
+
Root: () => Root
|
|
24
|
+
});
|
|
25
|
+
module.exports = __toCommonJS(root_exports);
|
|
26
|
+
var import_popover = require("@base-ui/react/popover");
|
|
27
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
28
|
+
function Root(props) {
|
|
29
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_popover.Popover.Root, { ...props });
|
|
30
|
+
}
|
|
31
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
32
|
+
0 && (module.exports = {
|
|
33
|
+
Root
|
|
34
|
+
});
|
|
35
|
+
//# sourceMappingURL=root.cjs.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/popover/root.tsx"],
|
|
4
|
+
"sourcesContent": ["import { Popover as _Popover } from '@base-ui/react/popover';\nimport type { RootProps } from './types';\n\n/**\n * An accessible popup anchored to a trigger element.\n *\n * Popover renders ARIA-compliant floating content that appears next to its\n * trigger. It can contain interactive content such as form controls, menus,\n * and rich descriptions.\n *\n * Compose the compound components to build a popover:\n *\n * - `Popover.Root` \u2014 provides open state and context to all sub-components.\n * - `Popover.Trigger` \u2014 the button that toggles the popup.\n * - `Popover.Popup` \u2014 the floating container (portal, positioning, collision\n * avoidance).\n * - `Popover.Arrow` \u2014 an optional arrow pointing toward the anchor.\n * - `Popover.Title` \u2014 **required** heading that labels the popover for\n * accessibility (can be visually hidden).\n * - `Popover.Description` \u2014 optional paragraph linked via `aria-describedby`.\n * - `Popover.Close` \u2014 a button that closes the popover when clicked.\n * **Required** when `modal` is `true` or `'trap-focus'` so that focus\n * can cycle correctly and the user can dismiss the popover.\n *\n * ```jsx\n * <Popover.Root>\n * <Popover.Trigger>Open</Popover.Trigger>\n * <Popover.Popup>\n * <Popover.Arrow />\n * <Popover.Title>Popover title</Popover.Title>\n * <Popover.Description>Popover description</Popover.Description>\n * <Popover.Close>Close</Popover.Close>\n * </Popover.Popup>\n * </Popover.Root>\n * ```\n */\nfunction Root( props: RootProps ) {\n\treturn <_Popover.Root { ...props } />;\n}\n\nexport { Root };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAoC;AAqC5B;AADR,SAAS,KAAM,OAAmB;AACjC,SAAO,4CAAC,eAAAA,QAAS,MAAT,EAAgB,GAAG,OAAQ;AACpC;",
|
|
6
|
+
"names": ["_Popover"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// packages/ui/src/popover/title.tsx
|
|
21
|
+
var title_exports = {};
|
|
22
|
+
__export(title_exports, {
|
|
23
|
+
Title: () => Title
|
|
24
|
+
});
|
|
25
|
+
module.exports = __toCommonJS(title_exports);
|
|
26
|
+
var import_popover = require("@base-ui/react/popover");
|
|
27
|
+
var import_compose = require("@wordpress/compose");
|
|
28
|
+
var import_element = require("@wordpress/element");
|
|
29
|
+
var import_text = require("../text/index.cjs");
|
|
30
|
+
var import_context = require("./context.cjs");
|
|
31
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
32
|
+
var Title = (0, import_element.forwardRef)(
|
|
33
|
+
function PopoverTitle({ className, children, ...props }, forwardedRef) {
|
|
34
|
+
const validationContext = (0, import_context.usePopoverValidationContext)();
|
|
35
|
+
const internalRef = (0, import_element.useRef)(null);
|
|
36
|
+
const mergedRef = (0, import_compose.useMergeRefs)([internalRef, forwardedRef]);
|
|
37
|
+
(0, import_element.useLayoutEffect)(() => {
|
|
38
|
+
validationContext?.registerTitle(internalRef.current);
|
|
39
|
+
}, [validationContext]);
|
|
40
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
41
|
+
import_text.Text,
|
|
42
|
+
{
|
|
43
|
+
ref: mergedRef,
|
|
44
|
+
variant: "heading-xl",
|
|
45
|
+
render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_popover.Popover.Title, { ...props }),
|
|
46
|
+
className,
|
|
47
|
+
children
|
|
48
|
+
}
|
|
49
|
+
);
|
|
50
|
+
}
|
|
51
|
+
);
|
|
52
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
53
|
+
0 && (module.exports = {
|
|
54
|
+
Title
|
|
55
|
+
});
|
|
56
|
+
//# sourceMappingURL=title.cjs.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/popover/title.tsx"],
|
|
4
|
+
"sourcesContent": ["import { Popover as _Popover } from '@base-ui/react/popover';\nimport { useMergeRefs } from '@wordpress/compose';\nimport { forwardRef, useLayoutEffect, useRef } from '@wordpress/element';\nimport { Text } from '../text';\nimport { usePopoverValidationContext } from './context';\nimport type { TitleProps } from './types';\n\n/**\n * Renders a heading that labels the popover for accessibility.\n *\n * **Required** \u2014 every popover must include a `Popover.Title`, even if\n * visually hidden. The rendered element is linked to the popup via\n * `aria-labelledby`. Uses the `heading-xl` text variant, matching Dialog.\n *\n * To visually hide the title while keeping it accessible, wrap it with\n * `VisuallyHidden` using the `render` prop:\n *\n * ```jsx\n * <VisuallyHidden render={ <Popover.Title /> }>\n * Accessible title text\n * </VisuallyHidden>\n * ```\n */\nconst Title = forwardRef< HTMLHeadingElement, TitleProps >(\n\tfunction PopoverTitle( { className, children, ...props }, forwardedRef ) {\n\t\tconst validationContext = usePopoverValidationContext();\n\t\tconst internalRef = useRef< HTMLHeadingElement >( null );\n\t\tconst mergedRef = useMergeRefs( [ internalRef, forwardedRef ] );\n\n\t\tuseLayoutEffect( () => {\n\t\t\tvalidationContext?.registerTitle( internalRef.current );\n\t\t}, [ validationContext ] );\n\n\t\treturn (\n\t\t\t<Text\n\t\t\t\tref={ mergedRef }\n\t\t\t\tvariant=\"heading-xl\"\n\t\t\t\trender={ <_Popover.Title { ...props } /> }\n\t\t\t\tclassName={ className }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</Text>\n\t\t);\n\t}\n);\n\nexport { Title };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAoC;AACpC,qBAA6B;AAC7B,qBAAoD;AACpD,kBAAqB;AACrB,qBAA4C;AAiC/B;AAdb,IAAM,YAAQ;AAAA,EACb,SAAS,aAAc,EAAE,WAAW,UAAU,GAAG,MAAM,GAAG,cAAe;AACxE,UAAM,wBAAoB,4CAA4B;AACtD,UAAM,kBAAc,uBAA8B,IAAK;AACvD,UAAM,gBAAY,6BAAc,CAAE,aAAa,YAAa,CAAE;AAE9D,wCAAiB,MAAM;AACtB,yBAAmB,cAAe,YAAY,OAAQ;AAAA,IACvD,GAAG,CAAE,iBAAkB,CAAE;AAEzB,WACC;AAAA,MAAC;AAAA;AAAA,QACA,KAAM;AAAA,QACN,SAAQ;AAAA,QACR,QAAS,4CAAC,eAAAA,QAAS,OAAT,EAAiB,GAAG,OAAQ;AAAA,QACtC;AAAA,QAEE;AAAA;AAAA,IACH;AAAA,EAEF;AACD;",
|
|
6
|
+
"names": ["_Popover"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// packages/ui/src/popover/trigger.tsx
|
|
21
|
+
var trigger_exports = {};
|
|
22
|
+
__export(trigger_exports, {
|
|
23
|
+
Trigger: () => Trigger
|
|
24
|
+
});
|
|
25
|
+
module.exports = __toCommonJS(trigger_exports);
|
|
26
|
+
var import_popover = require("@base-ui/react/popover");
|
|
27
|
+
var import_element = require("@wordpress/element");
|
|
28
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
29
|
+
var Trigger = (0, import_element.forwardRef)(
|
|
30
|
+
function PopoverTrigger(props, ref) {
|
|
31
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_popover.Popover.Trigger, { ref, ...props });
|
|
32
|
+
}
|
|
33
|
+
);
|
|
34
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
35
|
+
0 && (module.exports = {
|
|
36
|
+
Trigger
|
|
37
|
+
});
|
|
38
|
+
//# sourceMappingURL=trigger.cjs.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/popover/trigger.tsx"],
|
|
4
|
+
"sourcesContent": ["import { Popover as _Popover } from '@base-ui/react/popover';\nimport { forwardRef } from '@wordpress/element';\nimport type { TriggerProps } from './types';\n\n/**\n * Renders a button that toggles the popover popup when clicked.\n *\n * Renders as a `<button>` by default. Also supports hover-triggered\n * popovers via the `openOnHover`, `delay`, and `closeDelay` props.\n */\nconst Trigger = forwardRef< HTMLButtonElement, TriggerProps >(\n\tfunction PopoverTrigger( props, ref ) {\n\t\treturn <_Popover.Trigger ref={ ref } { ...props } />;\n\t}\n);\n\nexport { Trigger };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAoC;AACpC,qBAA2B;AAWlB;AAFT,IAAM,cAAU;AAAA,EACf,SAAS,eAAgB,OAAO,KAAM;AACrC,WAAO,4CAAC,eAAAA,QAAS,SAAT,EAAiB,KAAc,GAAG,OAAQ;AAAA,EACnD;AACD;",
|
|
6
|
+
"names": ["_Popover"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __copyProps = (to, from, except, desc) => {
|
|
7
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
8
|
+
for (let key of __getOwnPropNames(from))
|
|
9
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
10
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
11
|
+
}
|
|
12
|
+
return to;
|
|
13
|
+
};
|
|
14
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
15
|
+
|
|
16
|
+
// packages/ui/src/popover/types.ts
|
|
17
|
+
var types_exports = {};
|
|
18
|
+
module.exports = __toCommonJS(types_exports);
|
|
19
|
+
//# sourceMappingURL=types.cjs.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/popover/types.ts"],
|
|
4
|
+
"sourcesContent": ["import type { ReactNode } from 'react';\nimport type { Popover as _Popover } from '@base-ui/react/popover';\nimport type { ComponentProps } from '../utils/types';\n\nexport interface RootProps\n\textends Pick<\n\t\t_Popover.Root.Props,\n\t\t'open' | 'onOpenChange' | 'defaultOpen' | 'modal'\n\t> {\n\t/**\n\t * The popover sub-components (`Popover.Trigger`, `Popover.Popup`, etc.).\n\t */\n\tchildren?: ReactNode;\n}\n\nexport interface TriggerProps\n\textends ComponentProps< 'button' >,\n\t\tPick< _Popover.Trigger.Props, 'openOnHover' | 'delay' | 'closeDelay' > {\n\t/**\n\t * The content to be rendered inside the component.\n\t */\n\tchildren?: ReactNode;\n}\n\n/**\n * `Popover.Popup` maps to two Base UI elements internally: the\n * **Positioner** (outer, handles fixed positioning and z-index) and the\n * **Popup** (inner, holds content and visual styles).\n *\n * `style` and `className` are forwarded to the **Positioner** so that\n * z-index overrides (`--wp-ui-popover-z-index`) and Base UI CSS variables\n * (`--available-height`, `--available-width`) work correctly. All other\n * HTML attributes are forwarded to the inner **Popup** element.\n */\nexport interface PopupProps\n\textends ComponentProps< 'div' >,\n\t\tPick<\n\t\t\t_Popover.Positioner.Props,\n\t\t\t| 'align'\n\t\t\t| 'alignOffset'\n\t\t\t| 'anchor'\n\t\t\t| 'arrowPadding'\n\t\t\t| 'collisionAvoidance'\n\t\t\t| 'collisionBoundary'\n\t\t\t| 'collisionPadding'\n\t\t\t| 'side'\n\t\t\t| 'sideOffset'\n\t\t\t| 'sticky'\n\t\t>,\n\t\tPick< _Popover.Popup.Props, 'initialFocus' | 'finalFocus' > {\n\t/**\n\t * Whether to render a backdrop overlay behind the popover.\n\t *\n\t * Typically used with `modal` to signal that interaction with the rest\n\t * of the page is blocked. The backdrop is a semi-transparent dark overlay.\n\t *\n\t * @default false\n\t */\n\tbackdrop?: boolean;\n\n\t/**\n\t * The content to be rendered inside the component.\n\t */\n\tchildren?: ReactNode;\n\n\t/**\n\t * A parent element to render the portal into.\n\t *\n\t * Useful for cross-document rendering, such as rendering a popover\n\t * in a parent document when the trigger is inside an iframe.\n\t */\n\tcontainer?: _Popover.Portal.Props[ 'container' ];\n\n\t/**\n\t * The visual style variant of the popup.\n\t *\n\t * - `'default'` \u2014 standard surface styling with background, padding,\n\t * border radius, and shadow.\n\t * - `'unstyled'` \u2014 no visual treatment; useful as a blank positioning\n\t * container for fully custom content.\n\t *\n\t * @default 'default'\n\t */\n\tvariant?: 'default' | 'unstyled';\n}\n\nexport interface ArrowProps extends ComponentProps< 'div' > {\n\t/**\n\t * Custom arrow visuals to render inside the positioned container.\n\t */\n\tchildren?: ReactNode;\n}\n\nexport interface TitleProps extends ComponentProps< 'h2' > {\n\t/**\n\t * The title content to be rendered.\n\t */\n\tchildren?: ReactNode;\n}\n\nexport interface DescriptionProps extends ComponentProps< 'p' > {\n\t/**\n\t * The description content to be rendered.\n\t */\n\tchildren?: ReactNode;\n}\n\nexport interface CloseProps extends ComponentProps< 'button' > {\n\t/**\n\t * The content to be rendered inside the component.\n\t */\n\tchildren?: ReactNode;\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/build/tabs/list.cjs
CHANGED
|
@@ -39,10 +39,10 @@ var import_tabs = require("@base-ui/react/tabs");
|
|
|
39
39
|
var import_compose = require("@wordpress/compose");
|
|
40
40
|
|
|
41
41
|
// packages/ui/src/tabs/style.module.css
|
|
42
|
-
if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='
|
|
42
|
+
if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='8c9d1dfa2f']")) {
|
|
43
43
|
const style = document.createElement("style");
|
|
44
|
-
style.setAttribute("data-wp-hash", "
|
|
45
|
-
style.appendChild(document.createTextNode('@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._7313adbc8a112e90__tablist{--direction-factor:1;--direction-start:left;--direction-end:right;align-items:stretch;display:flex;overflow-inline:auto;overscroll-behavior-inline:none;position:relative;&:dir(rtl){--direction-factor:-1;--direction-start:right;--direction-end:left}&[data-orientation=horizontal]{--fade-width:4rem;--fade-gradient-base:#0000 0%,#000 var(--fade-width);--fade-gradient-composed:var(--fade-gradient-base),#000 60%,#0000 50%;width:fit-content;&._9f2ac729c68a735a__is-overflowing-first{mask-image:linear-gradient(to var(--direction-end),var(--fade-gradient-base))}&._81c799c1f3cdd261__is-overflowing-last{mask-image:linear-gradient(to var(--direction-start),var(--fade-gradient-base))}&._9f2ac729c68a735a__is-overflowing-first._81c799c1f3cdd261__is-overflowing-last{mask-image:linear-gradient(to right,var(--fade-gradient-composed)),linear-gradient(to left,var(--fade-gradient-composed))}&._59228b5227f38a99__is-minimal-variant{gap:1rem}}&[data-orientation=vertical]{flex-direction:column}}._1c37dcfaa1ad8cda__indicator{@media not (prefers-reduced-motion){transition-duration:.2s;transition-property:translate,width,height,border-radius,border-block;transition-timing-function:ease-out}outline:2px solid #0000;outline-offset:-1px;pointer-events:none;position:absolute;&[data-orientation=horizontal]{background-color:var(--wpds-color-stroke-interactive-neutral-strong,#
|
|
44
|
+
style.setAttribute("data-wp-hash", "8c9d1dfa2f");
|
|
45
|
+
style.appendChild(document.createTextNode('@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._7313adbc8a112e90__tablist{--direction-factor:1;--direction-start:left;--direction-end:right;align-items:stretch;display:flex;overflow-inline:auto;overscroll-behavior-inline:none;position:relative;&:dir(rtl){--direction-factor:-1;--direction-start:right;--direction-end:left}&[data-orientation=horizontal]{--fade-width:4rem;--fade-gradient-base:#0000 0%,#000 var(--fade-width);--fade-gradient-composed:var(--fade-gradient-base),#000 60%,#0000 50%;width:fit-content;&._9f2ac729c68a735a__is-overflowing-first{mask-image:linear-gradient(to var(--direction-end),var(--fade-gradient-base))}&._81c799c1f3cdd261__is-overflowing-last{mask-image:linear-gradient(to var(--direction-start),var(--fade-gradient-base))}&._9f2ac729c68a735a__is-overflowing-first._81c799c1f3cdd261__is-overflowing-last{mask-image:linear-gradient(to right,var(--fade-gradient-composed)),linear-gradient(to left,var(--fade-gradient-composed))}&._59228b5227f38a99__is-minimal-variant{gap:1rem}}&[data-orientation=vertical]{flex-direction:column}}._1c37dcfaa1ad8cda__indicator{@media not (prefers-reduced-motion){transition-duration:.2s;transition-property:translate,width,height,border-radius,border-block;transition-timing-function:ease-out}outline:2px solid #0000;outline-offset:-1px;pointer-events:none;position:absolute;&[data-orientation=horizontal]{background-color:var(--wpds-color-stroke-interactive-neutral-strong,#6e6e6e);bottom:0;height:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px));left:0;translate:var(--active-tab-left) 0;width:var(--active-tab-width);z-index:1}&[data-orientation=vertical]{background-color:var(--wpds-color-bg-interactive-neutral-weak-active,#ededed);border-radius:var(--wpds-border-radius-sm,2px);height:var(--active-tab-height);left:50%;top:0;translate:-50% var(--active-tab-top);width:100%;z-index:0}._7313adbc8a112e90__tablist[data-select-on-move=true]:has(:focus-visible)\n &[data-orientation=vertical]{border:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) solid var(--wpds-color-stroke-focus-brand,var(--wp-admin-theme-color,#3858e9));box-sizing:border-box}}.a5fd8814f195aa5e__tab{align-items:center;background:#0000;border:none;border-radius:0;box-shadow:none;color:var(--wpds-color-fg-interactive-neutral,#1e1e1e);cursor:var(--wpds-cursor-control,pointer);display:flex;flex:1 0 auto;font-family:var(--wpds-typography-font-family-body,-apple-system,system-ui,"Segoe UI","Roboto","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif);font-size:var(--wpds-typography-font-size-md,13px);font-weight:400;line-height:1.2;outline:none;padding:0;position:relative;white-space:nowrap;z-index:1;&[data-disabled]{color:var(--wpds-color-fg-interactive-neutral-disabled,#8d8d8d);cursor:default;@media (forced-colors:active){color:GrayText}}&:not([data-disabled]):is(:hover,:focus-visible){color:var(--wpds-color-fg-interactive-neutral-active,#1e1e1e)}&:after{border-radius:var(--wpds-border-radius-sm,2px);opacity:0;outline:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) solid var(--wpds-color-stroke-focus-brand,var(--wp-admin-theme-color,#3858e9));pointer-events:none;position:absolute;z-index:-1;@media not (prefers-reduced-motion){transition:opacity .1s linear}}&:focus-visible:after{opacity:1}[data-orientation=horizontal] &{height:48px;padding-inline:var(--wpds-dimension-padding-lg,16px);scroll-margin:24px;&:after{content:"";inset:var(--wpds-dimension-padding-md,12px)}}._59228b5227f38a99__is-minimal-variant[data-orientation=horizontal] &{padding-inline:0;&:after{inset-inline:round(up,var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)),1px)}}[data-orientation=vertical] &{min-height:40px;padding:var(--wpds-dimension-padding-sm,8px) var(--wpds-dimension-padding-md,12px)}[data-orientation=vertical][data-select-on-move=false] &:after{content:"";inset:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px))}}._5dfc77e6edd345d4__tab-children{align-items:center;display:flex;flex-grow:1;[data-orientation=horizontal] &{justify-content:center}[data-orientation=vertical] &{justify-content:start}}._4a20e969d15e5ac1__tab-chevron{flex-shrink:0;margin-inline-end:calc(var(--wpds-dimension-gap-xs, 4px)*-1);opacity:0;[data-orientation=horizontal] &{display:none}[role=tab]:is([aria-selected=true],:focus-visible,:hover) &{opacity:1}@media not (prefers-reduced-motion){[data-select-on-move=true]\n [role=tab]:is([aria-selected=true])\n &{transition:opacity .15s linear .15s}}&:dir(rtl){rotate:180deg}}._49f4bf715948892a__tabpanel{&:focus{box-shadow:none;outline:none}&:focus-visible{box-shadow:0 0 0 var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) var(--wpds-color-stroke-focus-brand,var(--wp-admin-theme-color,#3858e9));outline:2px solid #0000;outline-offset:0}}}'));
|
|
46
46
|
document.head.appendChild(style);
|
|
47
47
|
}
|
|
48
48
|
var style_default = { "tablist": "_7313adbc8a112e90__tablist", "is-overflowing-first": "_9f2ac729c68a735a__is-overflowing-first", "is-overflowing-last": "_81c799c1f3cdd261__is-overflowing-last", "is-minimal-variant": "_59228b5227f38a99__is-minimal-variant", "indicator": "_1c37dcfaa1ad8cda__indicator", "tab": "a5fd8814f195aa5e__tab", "tab-children": "_5dfc77e6edd345d4__tab-children", "tab-chevron": "_4a20e969d15e5ac1__tab-chevron", "tabpanel": "_49f4bf715948892a__tabpanel" };
|
|
@@ -56,7 +56,6 @@ var List = (0, import_element.forwardRef)(
|
|
|
56
56
|
variant = "default",
|
|
57
57
|
className,
|
|
58
58
|
activateOnFocus,
|
|
59
|
-
render,
|
|
60
59
|
...otherProps
|
|
61
60
|
}, forwardedRef) {
|
|
62
61
|
const [listEl, setListEl] = (0, import_element.useState)(null);
|
package/build/tabs/list.cjs.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/tabs/list.tsx", "../../src/tabs/style.module.css"],
|
|
4
|
-
"sourcesContent": ["import { forwardRef, useEffect, useState } from '@wordpress/element';\nimport clsx from 'clsx';\nimport { Tabs as _Tabs } from '@base-ui/react/tabs';\nimport { useMergeRefs } from '@wordpress/compose';\nimport styles from './style.module.css';\nimport type { TabListProps } from './types';\n\n// Account for sub-pixel rounding errors.\nconst SCROLL_EPSILON = 1;\n\n/**\n * Groups the individual tab buttons.\n *\n * `Tabs` is a collection of React components that combine to render\n * an [ARIA-compliant tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/).\n */\nexport const List = forwardRef< HTMLDivElement, TabListProps >(\n\tfunction TabList(\n\t\t{\n\t\t\tchildren,\n\t\t\tvariant = 'default',\n\t\t\tclassName,\n\t\t\tactivateOnFocus,\n\t\t\
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAgD;AAChD,kBAAiB;AACjB,kBAA8B;AAC9B,qBAA6B;;;ACH7B,IAAI,OAAO,aAAa,eAAe,QAAQ,IAAI,aAAa,UAAU,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AAC3I,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,
|
|
4
|
+
"sourcesContent": ["import { forwardRef, useEffect, useState } from '@wordpress/element';\nimport clsx from 'clsx';\nimport { Tabs as _Tabs } from '@base-ui/react/tabs';\nimport { useMergeRefs } from '@wordpress/compose';\nimport styles from './style.module.css';\nimport type { TabListProps } from './types';\n\n// Account for sub-pixel rounding errors.\nconst SCROLL_EPSILON = 1;\n\n/**\n * Groups the individual tab buttons.\n *\n * `Tabs` is a collection of React components that combine to render\n * an [ARIA-compliant tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/).\n */\nexport const List = forwardRef< HTMLDivElement, TabListProps >(\n\tfunction TabList(\n\t\t{\n\t\t\tchildren,\n\t\t\tvariant = 'default',\n\t\t\tclassName,\n\t\t\tactivateOnFocus,\n\t\t\t...otherProps\n\t\t},\n\t\tforwardedRef\n\t) {\n\t\tconst [ listEl, setListEl ] = useState< HTMLDivElement | null >( null );\n\t\tconst [ overflow, setOverflow ] = useState< {\n\t\t\tfirst: boolean;\n\t\t\tlast: boolean;\n\t\t\tisScrolling: boolean;\n\t\t} >( {\n\t\t\tfirst: false,\n\t\t\tlast: false,\n\t\t\tisScrolling: false,\n\t\t} );\n\n\t\t// Check if list is overflowing when it scrolls or resizes.\n\t\tuseEffect( () => {\n\t\t\tif ( ! listEl ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst measureOverflow = () => {\n\t\t\t\tconst { scrollWidth, clientWidth, scrollLeft } = listEl;\n\t\t\t\tconst maxScroll = Math.max( scrollWidth - clientWidth, 0 );\n\t\t\t\tconst direction =\n\t\t\t\t\tlistEl.dir ||\n\t\t\t\t\t( typeof window !== 'undefined'\n\t\t\t\t\t\t? window.getComputedStyle( listEl ).direction\n\t\t\t\t\t\t: 'ltr' );\n\n\t\t\t\tconst scrollFromStart =\n\t\t\t\t\tdirection === 'rtl' && scrollLeft < 0\n\t\t\t\t\t\t? // In RTL layouts, scrollLeft is typically 0 at the visual \"start\"\n\t\t\t\t\t\t // (right edge) and becomes negative toward the \"end\" (left edge).\n\t\t\t\t\t\t // Normalize value for correct first/last detection logic.\n\t\t\t\t\t\t -scrollLeft\n\t\t\t\t\t\t: scrollLeft;\n\n\t\t\t\t// Use SCROLL_EPSILON to handle subpixel rendering differences.\n\t\t\t\tsetOverflow( {\n\t\t\t\t\tfirst: scrollFromStart > SCROLL_EPSILON,\n\t\t\t\t\tlast: scrollFromStart < maxScroll - SCROLL_EPSILON,\n\t\t\t\t\tisScrolling: scrollWidth > clientWidth,\n\t\t\t\t} );\n\t\t\t};\n\n\t\t\tconst resizeObserver = new ResizeObserver( measureOverflow );\n\t\t\tresizeObserver.observe( listEl );\n\n\t\t\tlet scrollTick = false;\n\t\t\tconst throttleMeasureOverflowOnScroll = () => {\n\t\t\t\tif ( ! scrollTick ) {\n\t\t\t\t\trequestAnimationFrame( () => {\n\t\t\t\t\t\tmeasureOverflow();\n\t\t\t\t\t\tscrollTick = false;\n\t\t\t\t\t} );\n\t\t\t\t\tscrollTick = true;\n\t\t\t\t}\n\t\t\t};\n\t\t\tlistEl.addEventListener(\n\t\t\t\t'scroll',\n\t\t\t\tthrottleMeasureOverflowOnScroll,\n\t\t\t\t{ passive: true }\n\t\t\t);\n\n\t\t\t// Initial check.\n\t\t\tmeasureOverflow();\n\n\t\t\treturn () => {\n\t\t\t\tlistEl.removeEventListener(\n\t\t\t\t\t'scroll',\n\t\t\t\t\tthrottleMeasureOverflowOnScroll\n\t\t\t\t);\n\t\t\t\tresizeObserver.disconnect();\n\t\t\t};\n\t\t}, [ listEl ] );\n\n\t\tconst mergedListRef = useMergeRefs( [\n\t\t\tforwardedRef,\n\t\t\t( el: HTMLDivElement | null ) => setListEl( el ),\n\t\t] );\n\n\t\treturn (\n\t\t\t<_Tabs.List\n\t\t\t\tref={ mergedListRef }\n\t\t\t\tactivateOnFocus={ activateOnFocus }\n\t\t\t\tdata-select-on-move={ activateOnFocus ? 'true' : 'false' }\n\t\t\t\tclassName={ clsx(\n\t\t\t\t\tstyles.tablist,\n\t\t\t\t\toverflow.first && styles[ 'is-overflowing-first' ],\n\t\t\t\t\toverflow.last && styles[ 'is-overflowing-last' ],\n\t\t\t\t\tstyles[ `is-${ variant }-variant` ],\n\t\t\t\t\tclassName\n\t\t\t\t) }\n\t\t\t\t{ ...otherProps }\n\t\t\t\ttabIndex={\n\t\t\t\t\totherProps.tabIndex ??\n\t\t\t\t\t( overflow.isScrolling ? -1 : undefined )\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t\t<_Tabs.Indicator className={ styles.indicator } />\n\t\t\t</_Tabs.List>\n\t\t);\n\t}\n);\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='8c9d1dfa2f']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"8c9d1dfa2f\");\n\tstyle.appendChild(document.createTextNode(\"@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._7313adbc8a112e90__tablist{--direction-factor:1;--direction-start:left;--direction-end:right;align-items:stretch;display:flex;overflow-inline:auto;overscroll-behavior-inline:none;position:relative;&:dir(rtl){--direction-factor:-1;--direction-start:right;--direction-end:left}&[data-orientation=horizontal]{--fade-width:4rem;--fade-gradient-base:#0000 0%,#000 var(--fade-width);--fade-gradient-composed:var(--fade-gradient-base),#000 60%,#0000 50%;width:fit-content;&._9f2ac729c68a735a__is-overflowing-first{mask-image:linear-gradient(to var(--direction-end),var(--fade-gradient-base))}&._81c799c1f3cdd261__is-overflowing-last{mask-image:linear-gradient(to var(--direction-start),var(--fade-gradient-base))}&._9f2ac729c68a735a__is-overflowing-first._81c799c1f3cdd261__is-overflowing-last{mask-image:linear-gradient(to right,var(--fade-gradient-composed)),linear-gradient(to left,var(--fade-gradient-composed))}&._59228b5227f38a99__is-minimal-variant{gap:1rem}}&[data-orientation=vertical]{flex-direction:column}}._1c37dcfaa1ad8cda__indicator{@media not (prefers-reduced-motion){transition-duration:.2s;transition-property:translate,width,height,border-radius,border-block;transition-timing-function:ease-out}outline:2px solid #0000;outline-offset:-1px;pointer-events:none;position:absolute;&[data-orientation=horizontal]{background-color:var(--wpds-color-stroke-interactive-neutral-strong,#6e6e6e);bottom:0;height:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px));left:0;translate:var(--active-tab-left) 0;width:var(--active-tab-width);z-index:1}&[data-orientation=vertical]{background-color:var(--wpds-color-bg-interactive-neutral-weak-active,#ededed);border-radius:var(--wpds-border-radius-sm,2px);height:var(--active-tab-height);left:50%;top:0;translate:-50% var(--active-tab-top);width:100%;z-index:0}._7313adbc8a112e90__tablist[data-select-on-move=true]:has(:focus-visible)\\n\\t\\t&[data-orientation=vertical]{border:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) solid var(--wpds-color-stroke-focus-brand,var(--wp-admin-theme-color,#3858e9));box-sizing:border-box}}.a5fd8814f195aa5e__tab{align-items:center;background:#0000;border:none;border-radius:0;box-shadow:none;color:var(--wpds-color-fg-interactive-neutral,#1e1e1e);cursor:var(--wpds-cursor-control,pointer);display:flex;flex:1 0 auto;font-family:var(--wpds-typography-font-family-body,-apple-system,system-ui,\\\"Segoe UI\\\",\\\"Roboto\\\",\\\"Oxygen-Sans\\\",\\\"Ubuntu\\\",\\\"Cantarell\\\",\\\"Helvetica Neue\\\",sans-serif);font-size:var(--wpds-typography-font-size-md,13px);font-weight:400;line-height:1.2;outline:none;padding:0;position:relative;white-space:nowrap;z-index:1;&[data-disabled]{color:var(--wpds-color-fg-interactive-neutral-disabled,#8d8d8d);cursor:default;@media (forced-colors:active){color:GrayText}}&:not([data-disabled]):is(:hover,:focus-visible){color:var(--wpds-color-fg-interactive-neutral-active,#1e1e1e)}&:after{border-radius:var(--wpds-border-radius-sm,2px);opacity:0;outline:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) solid var(--wpds-color-stroke-focus-brand,var(--wp-admin-theme-color,#3858e9));pointer-events:none;position:absolute;z-index:-1;@media not (prefers-reduced-motion){transition:opacity .1s linear}}&:focus-visible:after{opacity:1}[data-orientation=horizontal] &{height:48px;padding-inline:var(--wpds-dimension-padding-lg,16px);scroll-margin:24px;&:after{content:\\\"\\\";inset:var(--wpds-dimension-padding-md,12px)}}._59228b5227f38a99__is-minimal-variant[data-orientation=horizontal] &{padding-inline:0;&:after{inset-inline:round(up,var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)),1px)}}[data-orientation=vertical] &{min-height:40px;padding:var(--wpds-dimension-padding-sm,8px) var(--wpds-dimension-padding-md,12px)}[data-orientation=vertical][data-select-on-move=false] &:after{content:\\\"\\\";inset:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px))}}._5dfc77e6edd345d4__tab-children{align-items:center;display:flex;flex-grow:1;[data-orientation=horizontal] &{justify-content:center}[data-orientation=vertical] &{justify-content:start}}._4a20e969d15e5ac1__tab-chevron{flex-shrink:0;margin-inline-end:calc(var(--wpds-dimension-gap-xs, 4px)*-1);opacity:0;[data-orientation=horizontal] &{display:none}[role=tab]:is([aria-selected=true],:focus-visible,:hover) &{opacity:1}@media not (prefers-reduced-motion){[data-select-on-move=true]\\n\\t\\t\\t[role=tab]:is([aria-selected=true])\\n\\t\\t\\t&{transition:opacity .15s linear .15s}}&:dir(rtl){rotate:180deg}}._49f4bf715948892a__tabpanel{&:focus{box-shadow:none;outline:none}&:focus-visible{box-shadow:0 0 0 var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) var(--wpds-color-stroke-focus-brand,var(--wp-admin-theme-color,#3858e9));outline:2px solid #0000;outline-offset:0}}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"tablist\":\"_7313adbc8a112e90__tablist\",\"is-overflowing-first\":\"_9f2ac729c68a735a__is-overflowing-first\",\"is-overflowing-last\":\"_81c799c1f3cdd261__is-overflowing-last\",\"is-minimal-variant\":\"_59228b5227f38a99__is-minimal-variant\",\"indicator\":\"_1c37dcfaa1ad8cda__indicator\",\"tab\":\"a5fd8814f195aa5e__tab\",\"tab-children\":\"_5dfc77e6edd345d4__tab-children\",\"tab-chevron\":\"_4a20e969d15e5ac1__tab-chevron\",\"tabpanel\":\"_49f4bf715948892a__tabpanel\"};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAgD;AAChD,kBAAiB;AACjB,kBAA8B;AAC9B,qBAA6B;;;ACH7B,IAAI,OAAO,aAAa,eAAe,QAAQ,IAAI,aAAa,UAAU,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AAC3I,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,uyJAA+zJ,CAAC;AAC12J,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,gBAAQ,EAAC,WAAU,8BAA6B,wBAAuB,2CAA0C,uBAAsB,0CAAyC,sBAAqB,yCAAwC,aAAY,gCAA+B,OAAM,yBAAwB,gBAAe,mCAAkC,eAAc,kCAAiC,YAAW,8BAA6B;;;ADoGlc;AAlGH,IAAM,iBAAiB;AAQhB,IAAM,WAAO;AAAA,EACnB,SAAS,QACR;AAAA,IACC;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACJ,GACA,cACC;AACD,UAAM,CAAE,QAAQ,SAAU,QAAI,yBAAmC,IAAK;AACtE,UAAM,CAAE,UAAU,WAAY,QAAI,yBAI7B;AAAA,MACJ,OAAO;AAAA,MACP,MAAM;AAAA,MACN,aAAa;AAAA,IACd,CAAE;AAGF,kCAAW,MAAM;AAChB,UAAK,CAAE,QAAS;AACf;AAAA,MACD;AAEA,YAAM,kBAAkB,MAAM;AAC7B,cAAM,EAAE,aAAa,aAAa,WAAW,IAAI;AACjD,cAAM,YAAY,KAAK,IAAK,cAAc,aAAa,CAAE;AACzD,cAAM,YACL,OAAO,QACL,OAAO,WAAW,cACjB,OAAO,iBAAkB,MAAO,EAAE,YAClC;AAEJ,cAAM,kBACL,cAAc,SAAS,aAAa;AAAA;AAAA;AAAA;AAAA,UAIjC,CAAC;AAAA,YACD;AAGJ,oBAAa;AAAA,UACZ,OAAO,kBAAkB;AAAA,UACzB,MAAM,kBAAkB,YAAY;AAAA,UACpC,aAAa,cAAc;AAAA,QAC5B,CAAE;AAAA,MACH;AAEA,YAAM,iBAAiB,IAAI,eAAgB,eAAgB;AAC3D,qBAAe,QAAS,MAAO;AAE/B,UAAI,aAAa;AACjB,YAAM,kCAAkC,MAAM;AAC7C,YAAK,CAAE,YAAa;AACnB,gCAAuB,MAAM;AAC5B,4BAAgB;AAChB,yBAAa;AAAA,UACd,CAAE;AACF,uBAAa;AAAA,QACd;AAAA,MACD;AACA,aAAO;AAAA,QACN;AAAA,QACA;AAAA,QACA,EAAE,SAAS,KAAK;AAAA,MACjB;AAGA,sBAAgB;AAEhB,aAAO,MAAM;AACZ,eAAO;AAAA,UACN;AAAA,UACA;AAAA,QACD;AACA,uBAAe,WAAW;AAAA,MAC3B;AAAA,IACD,GAAG,CAAE,MAAO,CAAE;AAEd,UAAM,oBAAgB,6BAAc;AAAA,MACnC;AAAA,MACA,CAAE,OAA+B,UAAW,EAAG;AAAA,IAChD,CAAE;AAEF,WACC;AAAA,MAAC,YAAAA,KAAM;AAAA,MAAN;AAAA,QACA,KAAM;AAAA,QACN;AAAA,QACA,uBAAsB,kBAAkB,SAAS;AAAA,QACjD,eAAY,YAAAC;AAAA,UACX,cAAO;AAAA,UACP,SAAS,SAAS,cAAQ,sBAAuB;AAAA,UACjD,SAAS,QAAQ,cAAQ,qBAAsB;AAAA,UAC/C,cAAQ,MAAO,OAAQ,UAAW;AAAA,UAClC;AAAA,QACD;AAAA,QACE,GAAG;AAAA,QACL,UACC,WAAW,aACT,SAAS,cAAc,KAAK;AAAA,QAG7B;AAAA;AAAA,UACF,4CAAC,YAAAD,KAAM,WAAN,EAAgB,WAAY,cAAO,WAAY;AAAA;AAAA;AAAA,IACjD;AAAA,EAEF;AACD;",
|
|
6
6
|
"names": ["_Tabs", "clsx"]
|
|
7
7
|
}
|
package/build/tabs/panel.cjs
CHANGED
|
@@ -39,10 +39,10 @@ var import_tabs = require("@base-ui/react/tabs");
|
|
|
39
39
|
var import_context = require("./context.cjs");
|
|
40
40
|
|
|
41
41
|
// packages/ui/src/tabs/style.module.css
|
|
42
|
-
if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='
|
|
42
|
+
if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='8c9d1dfa2f']")) {
|
|
43
43
|
const style = document.createElement("style");
|
|
44
|
-
style.setAttribute("data-wp-hash", "
|
|
45
|
-
style.appendChild(document.createTextNode('@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._7313adbc8a112e90__tablist{--direction-factor:1;--direction-start:left;--direction-end:right;align-items:stretch;display:flex;overflow-inline:auto;overscroll-behavior-inline:none;position:relative;&:dir(rtl){--direction-factor:-1;--direction-start:right;--direction-end:left}&[data-orientation=horizontal]{--fade-width:4rem;--fade-gradient-base:#0000 0%,#000 var(--fade-width);--fade-gradient-composed:var(--fade-gradient-base),#000 60%,#0000 50%;width:fit-content;&._9f2ac729c68a735a__is-overflowing-first{mask-image:linear-gradient(to var(--direction-end),var(--fade-gradient-base))}&._81c799c1f3cdd261__is-overflowing-last{mask-image:linear-gradient(to var(--direction-start),var(--fade-gradient-base))}&._9f2ac729c68a735a__is-overflowing-first._81c799c1f3cdd261__is-overflowing-last{mask-image:linear-gradient(to right,var(--fade-gradient-composed)),linear-gradient(to left,var(--fade-gradient-composed))}&._59228b5227f38a99__is-minimal-variant{gap:1rem}}&[data-orientation=vertical]{flex-direction:column}}._1c37dcfaa1ad8cda__indicator{@media not (prefers-reduced-motion){transition-duration:.2s;transition-property:translate,width,height,border-radius,border-block;transition-timing-function:ease-out}outline:2px solid #0000;outline-offset:-1px;pointer-events:none;position:absolute;&[data-orientation=horizontal]{background-color:var(--wpds-color-stroke-interactive-neutral-strong,#
|
|
44
|
+
style.setAttribute("data-wp-hash", "8c9d1dfa2f");
|
|
45
|
+
style.appendChild(document.createTextNode('@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._7313adbc8a112e90__tablist{--direction-factor:1;--direction-start:left;--direction-end:right;align-items:stretch;display:flex;overflow-inline:auto;overscroll-behavior-inline:none;position:relative;&:dir(rtl){--direction-factor:-1;--direction-start:right;--direction-end:left}&[data-orientation=horizontal]{--fade-width:4rem;--fade-gradient-base:#0000 0%,#000 var(--fade-width);--fade-gradient-composed:var(--fade-gradient-base),#000 60%,#0000 50%;width:fit-content;&._9f2ac729c68a735a__is-overflowing-first{mask-image:linear-gradient(to var(--direction-end),var(--fade-gradient-base))}&._81c799c1f3cdd261__is-overflowing-last{mask-image:linear-gradient(to var(--direction-start),var(--fade-gradient-base))}&._9f2ac729c68a735a__is-overflowing-first._81c799c1f3cdd261__is-overflowing-last{mask-image:linear-gradient(to right,var(--fade-gradient-composed)),linear-gradient(to left,var(--fade-gradient-composed))}&._59228b5227f38a99__is-minimal-variant{gap:1rem}}&[data-orientation=vertical]{flex-direction:column}}._1c37dcfaa1ad8cda__indicator{@media not (prefers-reduced-motion){transition-duration:.2s;transition-property:translate,width,height,border-radius,border-block;transition-timing-function:ease-out}outline:2px solid #0000;outline-offset:-1px;pointer-events:none;position:absolute;&[data-orientation=horizontal]{background-color:var(--wpds-color-stroke-interactive-neutral-strong,#6e6e6e);bottom:0;height:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px));left:0;translate:var(--active-tab-left) 0;width:var(--active-tab-width);z-index:1}&[data-orientation=vertical]{background-color:var(--wpds-color-bg-interactive-neutral-weak-active,#ededed);border-radius:var(--wpds-border-radius-sm,2px);height:var(--active-tab-height);left:50%;top:0;translate:-50% var(--active-tab-top);width:100%;z-index:0}._7313adbc8a112e90__tablist[data-select-on-move=true]:has(:focus-visible)\n &[data-orientation=vertical]{border:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) solid var(--wpds-color-stroke-focus-brand,var(--wp-admin-theme-color,#3858e9));box-sizing:border-box}}.a5fd8814f195aa5e__tab{align-items:center;background:#0000;border:none;border-radius:0;box-shadow:none;color:var(--wpds-color-fg-interactive-neutral,#1e1e1e);cursor:var(--wpds-cursor-control,pointer);display:flex;flex:1 0 auto;font-family:var(--wpds-typography-font-family-body,-apple-system,system-ui,"Segoe UI","Roboto","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif);font-size:var(--wpds-typography-font-size-md,13px);font-weight:400;line-height:1.2;outline:none;padding:0;position:relative;white-space:nowrap;z-index:1;&[data-disabled]{color:var(--wpds-color-fg-interactive-neutral-disabled,#8d8d8d);cursor:default;@media (forced-colors:active){color:GrayText}}&:not([data-disabled]):is(:hover,:focus-visible){color:var(--wpds-color-fg-interactive-neutral-active,#1e1e1e)}&:after{border-radius:var(--wpds-border-radius-sm,2px);opacity:0;outline:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) solid var(--wpds-color-stroke-focus-brand,var(--wp-admin-theme-color,#3858e9));pointer-events:none;position:absolute;z-index:-1;@media not (prefers-reduced-motion){transition:opacity .1s linear}}&:focus-visible:after{opacity:1}[data-orientation=horizontal] &{height:48px;padding-inline:var(--wpds-dimension-padding-lg,16px);scroll-margin:24px;&:after{content:"";inset:var(--wpds-dimension-padding-md,12px)}}._59228b5227f38a99__is-minimal-variant[data-orientation=horizontal] &{padding-inline:0;&:after{inset-inline:round(up,var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)),1px)}}[data-orientation=vertical] &{min-height:40px;padding:var(--wpds-dimension-padding-sm,8px) var(--wpds-dimension-padding-md,12px)}[data-orientation=vertical][data-select-on-move=false] &:after{content:"";inset:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px))}}._5dfc77e6edd345d4__tab-children{align-items:center;display:flex;flex-grow:1;[data-orientation=horizontal] &{justify-content:center}[data-orientation=vertical] &{justify-content:start}}._4a20e969d15e5ac1__tab-chevron{flex-shrink:0;margin-inline-end:calc(var(--wpds-dimension-gap-xs, 4px)*-1);opacity:0;[data-orientation=horizontal] &{display:none}[role=tab]:is([aria-selected=true],:focus-visible,:hover) &{opacity:1}@media not (prefers-reduced-motion){[data-select-on-move=true]\n [role=tab]:is([aria-selected=true])\n &{transition:opacity .15s linear .15s}}&:dir(rtl){rotate:180deg}}._49f4bf715948892a__tabpanel{&:focus{box-shadow:none;outline:none}&:focus-visible{box-shadow:0 0 0 var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) var(--wpds-color-stroke-focus-brand,var(--wp-admin-theme-color,#3858e9));outline:2px solid #0000;outline-offset:0}}}'));
|
|
46
46
|
document.head.appendChild(style);
|
|
47
47
|
}
|
|
48
48
|
var style_default = { "tablist": "_7313adbc8a112e90__tablist", "is-overflowing-first": "_9f2ac729c68a735a__is-overflowing-first", "is-overflowing-last": "_81c799c1f3cdd261__is-overflowing-last", "is-minimal-variant": "_59228b5227f38a99__is-minimal-variant", "indicator": "_1c37dcfaa1ad8cda__indicator", "tab": "a5fd8814f195aa5e__tab", "tab-children": "_5dfc77e6edd345d4__tab-children", "tab-chevron": "_4a20e969d15e5ac1__tab-chevron", "tabpanel": "_49f4bf715948892a__tabpanel" };
|
package/build/tabs/panel.cjs.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/tabs/panel.tsx", "../../src/tabs/style.module.css"],
|
|
4
|
-
"sourcesContent": ["import { forwardRef } from '@wordpress/element';\nimport clsx from 'clsx';\nimport { Tabs as _Tabs } from '@base-ui/react/tabs';\nimport { useRegisterPanel } from './context';\nimport styles from './style.module.css';\nimport type { TabPanelProps } from './types';\n\n/**\n * A panel displayed when the corresponding tab is active.\n *\n * `Tabs` is a collection of React components that combine to render\n * an [ARIA-compliant tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/).\n */\nexport const Panel = forwardRef< HTMLDivElement, TabPanelProps >(\n\tfunction TabPanel( { className, ...otherProps }, forwardedRef ) {\n\t\tuseRegisterPanel();\n\n\t\treturn (\n\t\t\t<_Tabs.Panel\n\t\t\t\tref={ forwardedRef }\n\t\t\t\tclassName={ clsx( styles.tabpanel, className ) }\n\t\t\t\t{ ...otherProps }\n\t\t\t/>\n\t\t);\n\t}\n);\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA2B;AAC3B,kBAAiB;AACjB,kBAA8B;AAC9B,qBAAiC;;;ACHjC,IAAI,OAAO,aAAa,eAAe,QAAQ,IAAI,aAAa,UAAU,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AAC3I,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,
|
|
4
|
+
"sourcesContent": ["import { forwardRef } from '@wordpress/element';\nimport clsx from 'clsx';\nimport { Tabs as _Tabs } from '@base-ui/react/tabs';\nimport { useRegisterPanel } from './context';\nimport styles from './style.module.css';\nimport type { TabPanelProps } from './types';\n\n/**\n * A panel displayed when the corresponding tab is active.\n *\n * `Tabs` is a collection of React components that combine to render\n * an [ARIA-compliant tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/).\n */\nexport const Panel = forwardRef< HTMLDivElement, TabPanelProps >(\n\tfunction TabPanel( { className, ...otherProps }, forwardedRef ) {\n\t\tuseRegisterPanel();\n\n\t\treturn (\n\t\t\t<_Tabs.Panel\n\t\t\t\tref={ forwardedRef }\n\t\t\t\tclassName={ clsx( styles.tabpanel, className ) }\n\t\t\t\t{ ...otherProps }\n\t\t\t/>\n\t\t);\n\t}\n);\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='8c9d1dfa2f']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"8c9d1dfa2f\");\n\tstyle.appendChild(document.createTextNode(\"@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._7313adbc8a112e90__tablist{--direction-factor:1;--direction-start:left;--direction-end:right;align-items:stretch;display:flex;overflow-inline:auto;overscroll-behavior-inline:none;position:relative;&:dir(rtl){--direction-factor:-1;--direction-start:right;--direction-end:left}&[data-orientation=horizontal]{--fade-width:4rem;--fade-gradient-base:#0000 0%,#000 var(--fade-width);--fade-gradient-composed:var(--fade-gradient-base),#000 60%,#0000 50%;width:fit-content;&._9f2ac729c68a735a__is-overflowing-first{mask-image:linear-gradient(to var(--direction-end),var(--fade-gradient-base))}&._81c799c1f3cdd261__is-overflowing-last{mask-image:linear-gradient(to var(--direction-start),var(--fade-gradient-base))}&._9f2ac729c68a735a__is-overflowing-first._81c799c1f3cdd261__is-overflowing-last{mask-image:linear-gradient(to right,var(--fade-gradient-composed)),linear-gradient(to left,var(--fade-gradient-composed))}&._59228b5227f38a99__is-minimal-variant{gap:1rem}}&[data-orientation=vertical]{flex-direction:column}}._1c37dcfaa1ad8cda__indicator{@media not (prefers-reduced-motion){transition-duration:.2s;transition-property:translate,width,height,border-radius,border-block;transition-timing-function:ease-out}outline:2px solid #0000;outline-offset:-1px;pointer-events:none;position:absolute;&[data-orientation=horizontal]{background-color:var(--wpds-color-stroke-interactive-neutral-strong,#6e6e6e);bottom:0;height:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px));left:0;translate:var(--active-tab-left) 0;width:var(--active-tab-width);z-index:1}&[data-orientation=vertical]{background-color:var(--wpds-color-bg-interactive-neutral-weak-active,#ededed);border-radius:var(--wpds-border-radius-sm,2px);height:var(--active-tab-height);left:50%;top:0;translate:-50% var(--active-tab-top);width:100%;z-index:0}._7313adbc8a112e90__tablist[data-select-on-move=true]:has(:focus-visible)\\n\\t\\t&[data-orientation=vertical]{border:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) solid var(--wpds-color-stroke-focus-brand,var(--wp-admin-theme-color,#3858e9));box-sizing:border-box}}.a5fd8814f195aa5e__tab{align-items:center;background:#0000;border:none;border-radius:0;box-shadow:none;color:var(--wpds-color-fg-interactive-neutral,#1e1e1e);cursor:var(--wpds-cursor-control,pointer);display:flex;flex:1 0 auto;font-family:var(--wpds-typography-font-family-body,-apple-system,system-ui,\\\"Segoe UI\\\",\\\"Roboto\\\",\\\"Oxygen-Sans\\\",\\\"Ubuntu\\\",\\\"Cantarell\\\",\\\"Helvetica Neue\\\",sans-serif);font-size:var(--wpds-typography-font-size-md,13px);font-weight:400;line-height:1.2;outline:none;padding:0;position:relative;white-space:nowrap;z-index:1;&[data-disabled]{color:var(--wpds-color-fg-interactive-neutral-disabled,#8d8d8d);cursor:default;@media (forced-colors:active){color:GrayText}}&:not([data-disabled]):is(:hover,:focus-visible){color:var(--wpds-color-fg-interactive-neutral-active,#1e1e1e)}&:after{border-radius:var(--wpds-border-radius-sm,2px);opacity:0;outline:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) solid var(--wpds-color-stroke-focus-brand,var(--wp-admin-theme-color,#3858e9));pointer-events:none;position:absolute;z-index:-1;@media not (prefers-reduced-motion){transition:opacity .1s linear}}&:focus-visible:after{opacity:1}[data-orientation=horizontal] &{height:48px;padding-inline:var(--wpds-dimension-padding-lg,16px);scroll-margin:24px;&:after{content:\\\"\\\";inset:var(--wpds-dimension-padding-md,12px)}}._59228b5227f38a99__is-minimal-variant[data-orientation=horizontal] &{padding-inline:0;&:after{inset-inline:round(up,var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)),1px)}}[data-orientation=vertical] &{min-height:40px;padding:var(--wpds-dimension-padding-sm,8px) var(--wpds-dimension-padding-md,12px)}[data-orientation=vertical][data-select-on-move=false] &:after{content:\\\"\\\";inset:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px))}}._5dfc77e6edd345d4__tab-children{align-items:center;display:flex;flex-grow:1;[data-orientation=horizontal] &{justify-content:center}[data-orientation=vertical] &{justify-content:start}}._4a20e969d15e5ac1__tab-chevron{flex-shrink:0;margin-inline-end:calc(var(--wpds-dimension-gap-xs, 4px)*-1);opacity:0;[data-orientation=horizontal] &{display:none}[role=tab]:is([aria-selected=true],:focus-visible,:hover) &{opacity:1}@media not (prefers-reduced-motion){[data-select-on-move=true]\\n\\t\\t\\t[role=tab]:is([aria-selected=true])\\n\\t\\t\\t&{transition:opacity .15s linear .15s}}&:dir(rtl){rotate:180deg}}._49f4bf715948892a__tabpanel{&:focus{box-shadow:none;outline:none}&:focus-visible{box-shadow:0 0 0 var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) var(--wpds-color-stroke-focus-brand,var(--wp-admin-theme-color,#3858e9));outline:2px solid #0000;outline-offset:0}}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"tablist\":\"_7313adbc8a112e90__tablist\",\"is-overflowing-first\":\"_9f2ac729c68a735a__is-overflowing-first\",\"is-overflowing-last\":\"_81c799c1f3cdd261__is-overflowing-last\",\"is-minimal-variant\":\"_59228b5227f38a99__is-minimal-variant\",\"indicator\":\"_1c37dcfaa1ad8cda__indicator\",\"tab\":\"a5fd8814f195aa5e__tab\",\"tab-children\":\"_5dfc77e6edd345d4__tab-children\",\"tab-chevron\":\"_4a20e969d15e5ac1__tab-chevron\",\"tabpanel\":\"_49f4bf715948892a__tabpanel\"};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA2B;AAC3B,kBAAiB;AACjB,kBAA8B;AAC9B,qBAAiC;;;ACHjC,IAAI,OAAO,aAAa,eAAe,QAAQ,IAAI,aAAa,UAAU,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AAC3I,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,uyJAA+zJ,CAAC;AAC12J,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,gBAAQ,EAAC,WAAU,8BAA6B,wBAAuB,2CAA0C,uBAAsB,0CAAyC,sBAAqB,yCAAwC,aAAY,gCAA+B,OAAM,yBAAwB,gBAAe,mCAAkC,eAAc,kCAAiC,YAAW,8BAA6B;;;ADYlc;AALI,IAAM,YAAQ;AAAA,EACpB,SAAS,SAAU,EAAE,WAAW,GAAG,WAAW,GAAG,cAAe;AAC/D,yCAAiB;AAEjB,WACC;AAAA,MAAC,YAAAA,KAAM;AAAA,MAAN;AAAA,QACA,KAAM;AAAA,QACN,eAAY,YAAAC,SAAM,cAAO,UAAU,SAAU;AAAA,QAC3C,GAAG;AAAA;AAAA,IACN;AAAA,EAEF;AACD;",
|
|
6
6
|
"names": ["_Tabs", "clsx"]
|
|
7
7
|
}
|
package/build/tabs/tab.cjs
CHANGED
|
@@ -41,10 +41,10 @@ var import_icon = require("../icon/index.cjs");
|
|
|
41
41
|
var import_context = require("./context.cjs");
|
|
42
42
|
|
|
43
43
|
// packages/ui/src/tabs/style.module.css
|
|
44
|
-
if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='
|
|
44
|
+
if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='8c9d1dfa2f']")) {
|
|
45
45
|
const style = document.createElement("style");
|
|
46
|
-
style.setAttribute("data-wp-hash", "
|
|
47
|
-
style.appendChild(document.createTextNode('@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._7313adbc8a112e90__tablist{--direction-factor:1;--direction-start:left;--direction-end:right;align-items:stretch;display:flex;overflow-inline:auto;overscroll-behavior-inline:none;position:relative;&:dir(rtl){--direction-factor:-1;--direction-start:right;--direction-end:left}&[data-orientation=horizontal]{--fade-width:4rem;--fade-gradient-base:#0000 0%,#000 var(--fade-width);--fade-gradient-composed:var(--fade-gradient-base),#000 60%,#0000 50%;width:fit-content;&._9f2ac729c68a735a__is-overflowing-first{mask-image:linear-gradient(to var(--direction-end),var(--fade-gradient-base))}&._81c799c1f3cdd261__is-overflowing-last{mask-image:linear-gradient(to var(--direction-start),var(--fade-gradient-base))}&._9f2ac729c68a735a__is-overflowing-first._81c799c1f3cdd261__is-overflowing-last{mask-image:linear-gradient(to right,var(--fade-gradient-composed)),linear-gradient(to left,var(--fade-gradient-composed))}&._59228b5227f38a99__is-minimal-variant{gap:1rem}}&[data-orientation=vertical]{flex-direction:column}}._1c37dcfaa1ad8cda__indicator{@media not (prefers-reduced-motion){transition-duration:.2s;transition-property:translate,width,height,border-radius,border-block;transition-timing-function:ease-out}outline:2px solid #0000;outline-offset:-1px;pointer-events:none;position:absolute;&[data-orientation=horizontal]{background-color:var(--wpds-color-stroke-interactive-neutral-strong,#
|
|
46
|
+
style.setAttribute("data-wp-hash", "8c9d1dfa2f");
|
|
47
|
+
style.appendChild(document.createTextNode('@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._7313adbc8a112e90__tablist{--direction-factor:1;--direction-start:left;--direction-end:right;align-items:stretch;display:flex;overflow-inline:auto;overscroll-behavior-inline:none;position:relative;&:dir(rtl){--direction-factor:-1;--direction-start:right;--direction-end:left}&[data-orientation=horizontal]{--fade-width:4rem;--fade-gradient-base:#0000 0%,#000 var(--fade-width);--fade-gradient-composed:var(--fade-gradient-base),#000 60%,#0000 50%;width:fit-content;&._9f2ac729c68a735a__is-overflowing-first{mask-image:linear-gradient(to var(--direction-end),var(--fade-gradient-base))}&._81c799c1f3cdd261__is-overflowing-last{mask-image:linear-gradient(to var(--direction-start),var(--fade-gradient-base))}&._9f2ac729c68a735a__is-overflowing-first._81c799c1f3cdd261__is-overflowing-last{mask-image:linear-gradient(to right,var(--fade-gradient-composed)),linear-gradient(to left,var(--fade-gradient-composed))}&._59228b5227f38a99__is-minimal-variant{gap:1rem}}&[data-orientation=vertical]{flex-direction:column}}._1c37dcfaa1ad8cda__indicator{@media not (prefers-reduced-motion){transition-duration:.2s;transition-property:translate,width,height,border-radius,border-block;transition-timing-function:ease-out}outline:2px solid #0000;outline-offset:-1px;pointer-events:none;position:absolute;&[data-orientation=horizontal]{background-color:var(--wpds-color-stroke-interactive-neutral-strong,#6e6e6e);bottom:0;height:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px));left:0;translate:var(--active-tab-left) 0;width:var(--active-tab-width);z-index:1}&[data-orientation=vertical]{background-color:var(--wpds-color-bg-interactive-neutral-weak-active,#ededed);border-radius:var(--wpds-border-radius-sm,2px);height:var(--active-tab-height);left:50%;top:0;translate:-50% var(--active-tab-top);width:100%;z-index:0}._7313adbc8a112e90__tablist[data-select-on-move=true]:has(:focus-visible)\n &[data-orientation=vertical]{border:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) solid var(--wpds-color-stroke-focus-brand,var(--wp-admin-theme-color,#3858e9));box-sizing:border-box}}.a5fd8814f195aa5e__tab{align-items:center;background:#0000;border:none;border-radius:0;box-shadow:none;color:var(--wpds-color-fg-interactive-neutral,#1e1e1e);cursor:var(--wpds-cursor-control,pointer);display:flex;flex:1 0 auto;font-family:var(--wpds-typography-font-family-body,-apple-system,system-ui,"Segoe UI","Roboto","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif);font-size:var(--wpds-typography-font-size-md,13px);font-weight:400;line-height:1.2;outline:none;padding:0;position:relative;white-space:nowrap;z-index:1;&[data-disabled]{color:var(--wpds-color-fg-interactive-neutral-disabled,#8d8d8d);cursor:default;@media (forced-colors:active){color:GrayText}}&:not([data-disabled]):is(:hover,:focus-visible){color:var(--wpds-color-fg-interactive-neutral-active,#1e1e1e)}&:after{border-radius:var(--wpds-border-radius-sm,2px);opacity:0;outline:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) solid var(--wpds-color-stroke-focus-brand,var(--wp-admin-theme-color,#3858e9));pointer-events:none;position:absolute;z-index:-1;@media not (prefers-reduced-motion){transition:opacity .1s linear}}&:focus-visible:after{opacity:1}[data-orientation=horizontal] &{height:48px;padding-inline:var(--wpds-dimension-padding-lg,16px);scroll-margin:24px;&:after{content:"";inset:var(--wpds-dimension-padding-md,12px)}}._59228b5227f38a99__is-minimal-variant[data-orientation=horizontal] &{padding-inline:0;&:after{inset-inline:round(up,var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)),1px)}}[data-orientation=vertical] &{min-height:40px;padding:var(--wpds-dimension-padding-sm,8px) var(--wpds-dimension-padding-md,12px)}[data-orientation=vertical][data-select-on-move=false] &:after{content:"";inset:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px))}}._5dfc77e6edd345d4__tab-children{align-items:center;display:flex;flex-grow:1;[data-orientation=horizontal] &{justify-content:center}[data-orientation=vertical] &{justify-content:start}}._4a20e969d15e5ac1__tab-chevron{flex-shrink:0;margin-inline-end:calc(var(--wpds-dimension-gap-xs, 4px)*-1);opacity:0;[data-orientation=horizontal] &{display:none}[role=tab]:is([aria-selected=true],:focus-visible,:hover) &{opacity:1}@media not (prefers-reduced-motion){[data-select-on-move=true]\n [role=tab]:is([aria-selected=true])\n &{transition:opacity .15s linear .15s}}&:dir(rtl){rotate:180deg}}._49f4bf715948892a__tabpanel{&:focus{box-shadow:none;outline:none}&:focus-visible{box-shadow:0 0 0 var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) var(--wpds-color-stroke-focus-brand,var(--wp-admin-theme-color,#3858e9));outline:2px solid #0000;outline-offset:0}}}'));
|
|
48
48
|
document.head.appendChild(style);
|
|
49
49
|
}
|
|
50
50
|
var style_default = { "tablist": "_7313adbc8a112e90__tablist", "is-overflowing-first": "_9f2ac729c68a735a__is-overflowing-first", "is-overflowing-last": "_81c799c1f3cdd261__is-overflowing-last", "is-minimal-variant": "_59228b5227f38a99__is-minimal-variant", "indicator": "_1c37dcfaa1ad8cda__indicator", "tab": "a5fd8814f195aa5e__tab", "tab-children": "_5dfc77e6edd345d4__tab-children", "tab-chevron": "_4a20e969d15e5ac1__tab-chevron", "tabpanel": "_49f4bf715948892a__tabpanel" };
|