@nldd/design-system 0.8.62 → 0.8.64
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/styles/{slotted-reset.d.ts → style-resets.d.ts} +1 -1
- package/dist/assets/styles/style-resets.d.ts.map +1 -0
- package/dist/assets/styles/{slotted-reset.fixtures.d.ts → style-resets.fixtures.d.ts} +4 -4
- package/dist/assets/styles/style-resets.fixtures.d.ts.map +1 -0
- package/dist/assets/styles/{slotted-reset.fixtures.js → style-resets.fixtures.js} +4 -4
- package/dist/assets/styles/style-resets.fixtures.js.map +1 -0
- package/dist/assets/styles/{slotted-reset.js → style-resets.js} +1 -1
- package/dist/assets/styles/style-resets.js.map +1 -0
- package/dist/components/actions/button/button.d.ts +9 -2
- package/dist/components/actions/button/button.d.ts.map +1 -1
- package/dist/components/actions/button/button.i18n.d.ts +5 -0
- package/dist/components/actions/button/button.i18n.d.ts.map +1 -0
- package/dist/components/actions/button/button.i18n.js +4 -0
- package/dist/components/actions/button/button.i18n.js.map +1 -0
- package/dist/components/actions/button/button.js +5 -2
- package/dist/components/actions/button/button.js.map +1 -1
- package/dist/components/actions/button/button.styles.d.ts.map +1 -1
- package/dist/components/actions/button/button.styles.js +21 -7
- package/dist/components/actions/button/button.styles.js.map +1 -1
- package/dist/components/actions/button/button.template.d.ts.map +1 -1
- package/dist/components/actions/button/button.template.js +17 -4
- package/dist/components/actions/button/button.template.js.map +1 -1
- package/dist/components/actions/button-bar/button-bar.styles.d.ts.map +1 -1
- package/dist/components/actions/button-bar/button-bar.styles.js +3 -0
- package/dist/components/actions/button-bar/button-bar.styles.js.map +1 -1
- package/dist/components/actions/button-group/button-group.styles.d.ts.map +1 -1
- package/dist/components/actions/button-group/button-group.styles.js +3 -0
- package/dist/components/actions/button-group/button-group.styles.js.map +1 -1
- package/dist/components/actions/icon-button/icon-button.d.ts +10 -2
- package/dist/components/actions/icon-button/icon-button.d.ts.map +1 -1
- package/dist/components/actions/icon-button/icon-button.i18n.d.ts +5 -0
- package/dist/components/actions/icon-button/icon-button.i18n.d.ts.map +1 -0
- package/dist/components/actions/icon-button/icon-button.i18n.js +4 -0
- package/dist/components/actions/icon-button/icon-button.i18n.js.map +1 -0
- package/dist/components/actions/icon-button/icon-button.js +5 -2
- package/dist/components/actions/icon-button/icon-button.js.map +1 -1
- package/dist/components/actions/icon-button/icon-button.styles.d.ts.map +1 -1
- package/dist/components/actions/icon-button/icon-button.styles.js +4 -1
- package/dist/components/actions/icon-button/icon-button.styles.js.map +1 -1
- package/dist/components/actions/icon-button/icon-button.template.d.ts.map +1 -1
- package/dist/components/actions/icon-button/icon-button.template.js +11 -2
- package/dist/components/actions/icon-button/icon-button.template.js.map +1 -1
- package/dist/components/actions/menu/menu.styles.d.ts.map +1 -1
- package/dist/components/actions/menu/menu.styles.js +4 -1
- package/dist/components/actions/menu/menu.styles.js.map +1 -1
- package/dist/components/actions/split-button/split-button.styles.d.ts.map +1 -1
- package/dist/components/actions/split-button/split-button.styles.js +4 -1
- package/dist/components/actions/split-button/split-button.styles.js.map +1 -1
- package/dist/components/actions/toolbar/toolbar.styles.d.ts.map +1 -1
- package/dist/components/actions/toolbar/toolbar.styles.js +4 -1
- package/dist/components/actions/toolbar/toolbar.styles.js.map +1 -1
- package/dist/components/components.js +64 -62
- package/dist/components/content/blockquote/blockquote.styles.d.ts.map +1 -1
- package/dist/components/content/blockquote/blockquote.styles.js +4 -1
- package/dist/components/content/blockquote/blockquote.styles.js.map +1 -1
- package/dist/components/content/byline/byline.d.ts +11 -0
- package/dist/components/content/byline/byline.d.ts.map +1 -1
- package/dist/components/content/byline/byline.js +20 -0
- package/dist/components/content/byline/byline.js.map +1 -1
- package/dist/components/content/byline/byline.styles.d.ts.map +1 -1
- package/dist/components/content/byline/byline.styles.js +17 -2
- package/dist/components/content/byline/byline.styles.js.map +1 -1
- package/dist/components/content/byline/byline.template.d.ts.map +1 -1
- package/dist/components/content/byline/byline.template.js +17 -2
- package/dist/components/content/byline/byline.template.js.map +1 -1
- package/dist/components/content/code-viewer/code-viewer.styles.d.ts.map +1 -1
- package/dist/components/content/code-viewer/code-viewer.styles.js +4 -1
- package/dist/components/content/code-viewer/code-viewer.styles.js.map +1 -1
- package/dist/components/content/icon/icon-aliases.js +1 -1
- package/dist/components/content/icon/icon-aliases.js.map +1 -1
- package/dist/components/content/icon/icon.styles.d.ts.map +1 -1
- package/dist/components/content/icon/icon.styles.js +3 -0
- package/dist/components/content/icon/icon.styles.js.map +1 -1
- package/dist/components/content/image/image.styles.d.ts.map +1 -1
- package/dist/components/content/image/image.styles.js +4 -1
- package/dist/components/content/image/image.styles.js.map +1 -1
- package/dist/components/content/keyboard-shortcut/keyboard-shortcut.styles.d.ts.map +1 -1
- package/dist/components/content/keyboard-shortcut/keyboard-shortcut.styles.js +4 -1
- package/dist/components/content/keyboard-shortcut/keyboard-shortcut.styles.js.map +1 -1
- package/dist/components/content/tag/tag.styles.d.ts.map +1 -1
- package/dist/components/content/tag/tag.styles.js +4 -1
- package/dist/components/content/tag/tag.styles.js.map +1 -1
- package/dist/components/content/title/title.styles.d.ts.map +1 -1
- package/dist/components/content/title/title.styles.js +4 -1
- package/dist/components/content/title/title.styles.js.map +1 -1
- package/dist/components/content/tooltip/tooltip.styles.d.ts.map +1 -1
- package/dist/components/content/tooltip/tooltip.styles.js +4 -1
- package/dist/components/content/tooltip/tooltip.styles.js.map +1 -1
- package/dist/components/forms/form-actions/form-actions.styles.d.ts.map +1 -1
- package/dist/components/forms/form-actions/form-actions.styles.js +4 -0
- package/dist/components/forms/form-actions/form-actions.styles.js.map +1 -1
- package/dist/components/forms/form-field/form-field.styles.d.ts.map +1 -1
- package/dist/components/forms/form-field/form-field.styles.js +5 -1
- package/dist/components/forms/form-field/form-field.styles.js.map +1 -1
- package/dist/components/{index-DPe5myEj.js → index-BNhqNvDd.js} +4882 -2776
- package/dist/components/index.d.ts +2 -0
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +2 -0
- package/dist/components/index.js.map +1 -1
- package/dist/components/inputs/checkbox/checkbox.styles.d.ts.map +1 -1
- package/dist/components/inputs/checkbox/checkbox.styles.js +3 -0
- package/dist/components/inputs/checkbox/checkbox.styles.js.map +1 -1
- package/dist/components/inputs/checkbox-field/checkbox-field.styles.d.ts.map +1 -1
- package/dist/components/inputs/checkbox-field/checkbox-field.styles.js +4 -1
- package/dist/components/inputs/checkbox-field/checkbox-field.styles.js.map +1 -1
- package/dist/components/inputs/code-editor/code-editor.styles.d.ts.map +1 -1
- package/dist/components/inputs/code-editor/code-editor.styles.js +4 -1
- package/dist/components/inputs/code-editor/code-editor.styles.js.map +1 -1
- package/dist/components/inputs/combo-box/combo-box.styles.d.ts.map +1 -1
- package/dist/components/inputs/combo-box/combo-box.styles.js +4 -1
- package/dist/components/inputs/combo-box/combo-box.styles.js.map +1 -1
- package/dist/components/inputs/dropdown/dropdown.styles.d.ts.map +1 -1
- package/dist/components/inputs/dropdown/dropdown.styles.js +4 -1
- package/dist/components/inputs/dropdown/dropdown.styles.js.map +1 -1
- package/dist/components/inputs/multi-line-text-field/multi-line-text-field.styles.d.ts.map +1 -1
- package/dist/components/inputs/multi-line-text-field/multi-line-text-field.styles.js +4 -1
- package/dist/components/inputs/multi-line-text-field/multi-line-text-field.styles.js.map +1 -1
- package/dist/components/inputs/number-field/number-field.styles.d.ts.map +1 -1
- package/dist/components/inputs/number-field/number-field.styles.js +4 -1
- package/dist/components/inputs/number-field/number-field.styles.js.map +1 -1
- package/dist/components/inputs/password-field/password-field.styles.d.ts.map +1 -1
- package/dist/components/inputs/password-field/password-field.styles.js +4 -1
- package/dist/components/inputs/password-field/password-field.styles.js.map +1 -1
- package/dist/components/inputs/radio-button/radio-button.styles.d.ts.map +1 -1
- package/dist/components/inputs/radio-button/radio-button.styles.js +3 -0
- package/dist/components/inputs/radio-button/radio-button.styles.js.map +1 -1
- package/dist/components/inputs/radio-button-field/radio-button-field.styles.d.ts.map +1 -1
- package/dist/components/inputs/radio-button-field/radio-button-field.styles.js +4 -1
- package/dist/components/inputs/radio-button-field/radio-button-field.styles.js.map +1 -1
- package/dist/components/inputs/radio-button-group/radio-button-group.styles.d.ts.map +1 -1
- package/dist/components/inputs/radio-button-group/radio-button-group.styles.js +4 -1
- package/dist/components/inputs/radio-button-group/radio-button-group.styles.js.map +1 -1
- package/dist/components/inputs/search-field/search-field.styles.d.ts.map +1 -1
- package/dist/components/inputs/search-field/search-field.styles.js +13 -1
- package/dist/components/inputs/search-field/search-field.styles.js.map +1 -1
- package/dist/components/inputs/search-field/search-field.template.d.ts.map +1 -1
- package/dist/components/inputs/search-field/search-field.template.js +47 -39
- package/dist/components/inputs/search-field/search-field.template.js.map +1 -1
- package/dist/components/inputs/segmented-control/segmented-control.styles.d.ts.map +1 -1
- package/dist/components/inputs/segmented-control/segmented-control.styles.js +4 -1
- package/dist/components/inputs/segmented-control/segmented-control.styles.js.map +1 -1
- package/dist/components/inputs/stepper/stepper.styles.d.ts.map +1 -1
- package/dist/components/inputs/stepper/stepper.styles.js +3 -0
- package/dist/components/inputs/stepper/stepper.styles.js.map +1 -1
- package/dist/components/inputs/switch/switch.styles.d.ts.map +1 -1
- package/dist/components/inputs/switch/switch.styles.js +3 -0
- package/dist/components/inputs/switch/switch.styles.js.map +1 -1
- package/dist/components/inputs/switch-field/switch-field.styles.d.ts.map +1 -1
- package/dist/components/inputs/switch-field/switch-field.styles.js +4 -1
- package/dist/components/inputs/switch-field/switch-field.styles.js.map +1 -1
- package/dist/components/inputs/text-field/text-field.styles.d.ts.map +1 -1
- package/dist/components/inputs/text-field/text-field.styles.js +4 -1
- package/dist/components/inputs/text-field/text-field.styles.js.map +1 -1
- package/dist/components/inputs/toggle-button/toggle-button.styles.d.ts.map +1 -1
- package/dist/components/inputs/toggle-button/toggle-button.styles.js +4 -1
- package/dist/components/inputs/toggle-button/toggle-button.styles.js.map +1 -1
- package/dist/components/inputs/toggle-button-group/toggle-button-group.styles.d.ts.map +1 -1
- package/dist/components/inputs/toggle-button-group/toggle-button-group.styles.js +3 -0
- package/dist/components/inputs/toggle-button-group/toggle-button-group.styles.js.map +1 -1
- package/dist/components/inputs/token/token.styles.d.ts.map +1 -1
- package/dist/components/inputs/token/token.styles.js +4 -1
- package/dist/components/inputs/token/token.styles.js.map +1 -1
- package/dist/components/layout/app-view/app-view.styles.d.ts.map +1 -1
- package/dist/components/layout/app-view/app-view.styles.js +3 -0
- package/dist/components/layout/app-view/app-view.styles.js.map +1 -1
- package/dist/components/layout/box/box.styles.d.ts.map +1 -1
- package/dist/components/layout/box/box.styles.js +3 -0
- package/dist/components/layout/box/box.styles.js.map +1 -1
- package/dist/components/layout/card/card.d.ts +28 -2
- package/dist/components/layout/card/card.d.ts.map +1 -1
- package/dist/components/layout/card/card.i18n.d.ts +5 -0
- package/dist/components/layout/card/card.i18n.d.ts.map +1 -0
- package/dist/components/layout/card/card.i18n.js +4 -0
- package/dist/components/layout/card/card.i18n.js.map +1 -0
- package/dist/components/layout/card/card.js +54 -2
- package/dist/components/layout/card/card.js.map +1 -1
- package/dist/components/layout/card/card.styles.d.ts.map +1 -1
- package/dist/components/layout/card/card.styles.js +20 -0
- package/dist/components/layout/card/card.styles.js.map +1 -1
- package/dist/components/layout/card/card.template.d.ts.map +1 -1
- package/dist/components/layout/card/card.template.js +17 -1
- package/dist/components/layout/card/card.template.js.map +1 -1
- package/dist/components/layout/collection/collection.d.ts +7 -5
- package/dist/components/layout/collection/collection.d.ts.map +1 -1
- package/dist/components/layout/collection/collection.js +17 -5
- package/dist/components/layout/collection/collection.js.map +1 -1
- package/dist/components/layout/collection/collection.styles.js +12 -12
- package/dist/components/layout/collection/collection.styles.js.map +1 -1
- package/dist/components/layout/collection/collection.template.d.ts.map +1 -1
- package/dist/components/layout/collection/collection.template.js +4 -2
- package/dist/components/layout/collection/collection.template.js.map +1 -1
- package/dist/components/layout/container/container.d.ts +7 -3
- package/dist/components/layout/container/container.d.ts.map +1 -1
- package/dist/components/layout/container/container.js +15 -3
- package/dist/components/layout/container/container.js.map +1 -1
- package/dist/components/layout/container/container.styles.d.ts.map +1 -1
- package/dist/components/layout/container/container.styles.js +42 -1
- package/dist/components/layout/container/container.styles.js.map +1 -1
- package/dist/components/layout/divider/divider.styles.d.ts.map +1 -1
- package/dist/components/layout/divider/divider.styles.js +3 -0
- package/dist/components/layout/divider/divider.styles.js.map +1 -1
- package/dist/components/layout/page/page.styles.d.ts.map +1 -1
- package/dist/components/layout/page/page.styles.js +3 -0
- package/dist/components/layout/page/page.styles.js.map +1 -1
- package/dist/components/layout/page-footer/page-footer.d.ts +1 -0
- package/dist/components/layout/page-footer/page-footer.d.ts.map +1 -1
- package/dist/components/layout/page-footer/page-footer.js +12 -4
- package/dist/components/layout/page-footer/page-footer.js.map +1 -1
- package/dist/components/layout/page-footer/page-footer.styles.d.ts.map +1 -1
- package/dist/components/layout/page-footer/page-footer.styles.js +13 -1
- package/dist/components/layout/page-footer/page-footer.styles.js.map +1 -1
- package/dist/components/layout/page-sections/full-bleed-section/full-bleed-section.styles.d.ts.map +1 -1
- package/dist/components/layout/page-sections/full-bleed-section/full-bleed-section.styles.js +3 -0
- package/dist/components/layout/page-sections/full-bleed-section/full-bleed-section.styles.js.map +1 -1
- package/dist/components/layout/page-sections/hero/hero.d.ts +25 -5
- package/dist/components/layout/page-sections/hero/hero.d.ts.map +1 -1
- package/dist/components/layout/page-sections/hero/hero.js +60 -11
- package/dist/components/layout/page-sections/hero/hero.js.map +1 -1
- package/dist/components/layout/page-sections/hero/hero.styles.d.ts.map +1 -1
- package/dist/components/layout/page-sections/hero/hero.styles.js +15 -4
- package/dist/components/layout/page-sections/hero/hero.styles.js.map +1 -1
- package/dist/components/layout/page-sections/hero/hero.template.d.ts.map +1 -1
- package/dist/components/layout/page-sections/hero/hero.template.js +13 -1
- package/dist/components/layout/page-sections/hero/hero.template.js.map +1 -1
- package/dist/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.styles.d.ts.map +1 -1
- package/dist/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.styles.js +3 -0
- package/dist/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.styles.js.map +1 -1
- package/dist/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.styles.d.ts.map +1 -1
- package/dist/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.styles.js +3 -0
- package/dist/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.styles.js.map +1 -1
- package/dist/components/layout/page-sections/sidebar-section/sidebar-section.d.ts +119 -0
- package/dist/components/layout/page-sections/sidebar-section/sidebar-section.d.ts.map +1 -0
- package/dist/components/layout/page-sections/sidebar-section/sidebar-section.i18n.d.ts +6 -0
- package/dist/components/layout/page-sections/sidebar-section/sidebar-section.i18n.d.ts.map +1 -0
- package/dist/components/layout/page-sections/sidebar-section/sidebar-section.i18n.js +5 -0
- package/dist/components/layout/page-sections/sidebar-section/sidebar-section.i18n.js.map +1 -0
- package/dist/components/layout/page-sections/sidebar-section/sidebar-section.js +219 -0
- package/dist/components/layout/page-sections/sidebar-section/sidebar-section.js.map +1 -0
- package/dist/components/layout/page-sections/sidebar-section/sidebar-section.styles.d.ts +2 -0
- package/dist/components/layout/page-sections/sidebar-section/sidebar-section.styles.d.ts.map +1 -0
- package/dist/components/layout/page-sections/sidebar-section/sidebar-section.styles.js +157 -0
- package/dist/components/layout/page-sections/sidebar-section/sidebar-section.styles.js.map +1 -0
- package/dist/components/layout/page-sections/sidebar-section/sidebar-section.template.d.ts +4 -0
- package/dist/components/layout/page-sections/sidebar-section/sidebar-section.template.d.ts.map +1 -0
- package/dist/components/layout/page-sections/sidebar-section/sidebar-section.template.js +57 -0
- package/dist/components/layout/page-sections/sidebar-section/sidebar-section.template.js.map +1 -0
- package/dist/components/layout/page-sections/simple-section/simple-section.styles.d.ts.map +1 -1
- package/dist/components/layout/page-sections/simple-section/simple-section.styles.js +3 -0
- package/dist/components/layout/page-sections/simple-section/simple-section.styles.js.map +1 -1
- package/dist/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-section.styles.d.ts.map +1 -1
- package/dist/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-section.styles.js +3 -0
- package/dist/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-section.styles.js.map +1 -1
- package/dist/components/layout/popover/popover.styles.d.ts.map +1 -1
- package/dist/components/layout/popover/popover.styles.js +3 -0
- package/dist/components/layout/popover/popover.styles.js.map +1 -1
- package/dist/components/layout/sheet/sheet.styles.d.ts.map +1 -1
- package/dist/components/layout/sheet/sheet.styles.js +3 -0
- package/dist/components/layout/sheet/sheet.styles.js.map +1 -1
- package/dist/components/layout/spacer/spacer.styles.d.ts.map +1 -1
- package/dist/components/layout/spacer/spacer.styles.js +3 -0
- package/dist/components/layout/spacer/spacer.styles.js.map +1 -1
- package/dist/components/layout/split-views/bar-split-view/bar-split-view.styles.d.ts.map +1 -1
- package/dist/components/layout/split-views/bar-split-view/bar-split-view.styles.js +3 -0
- package/dist/components/layout/split-views/bar-split-view/bar-split-view.styles.js.map +1 -1
- package/dist/components/layout/split-views/navigation-split-view/navigation-split-view.d.ts +47 -19
- package/dist/components/layout/split-views/navigation-split-view/navigation-split-view.d.ts.map +1 -1
- package/dist/components/layout/split-views/navigation-split-view/navigation-split-view.js +123 -73
- package/dist/components/layout/split-views/navigation-split-view/navigation-split-view.js.map +1 -1
- package/dist/components/layout/split-views/navigation-split-view/navigation-split-view.styles.d.ts.map +1 -1
- package/dist/components/layout/split-views/navigation-split-view/navigation-split-view.styles.js +17 -14
- package/dist/components/layout/split-views/navigation-split-view/navigation-split-view.styles.js.map +1 -1
- package/dist/components/layout/split-views/navigation-split-view/navigation-split-view.template.d.ts.map +1 -1
- package/dist/components/layout/split-views/navigation-split-view/navigation-split-view.template.js +10 -8
- package/dist/components/layout/split-views/navigation-split-view/navigation-split-view.template.js.map +1 -1
- package/dist/components/layout/split-views/side-by-side-split-view/side-by-side-split-view.styles.d.ts.map +1 -1
- package/dist/components/layout/split-views/side-by-side-split-view/side-by-side-split-view.styles.js +3 -0
- package/dist/components/layout/split-views/side-by-side-split-view/side-by-side-split-view.styles.js.map +1 -1
- package/dist/components/layout/split-views/split-view-divider/split-view-divider.styles.d.ts.map +1 -1
- package/dist/components/layout/split-views/split-view-divider/split-view-divider.styles.js +3 -0
- package/dist/components/layout/split-views/split-view-divider/split-view-divider.styles.js.map +1 -1
- package/dist/components/layout/split-views/split-view-pane/split-view-pane.styles.d.ts.map +1 -1
- package/dist/components/layout/split-views/split-view-pane/split-view-pane.styles.js +3 -0
- package/dist/components/layout/split-views/split-view-pane/split-view-pane.styles.js.map +1 -1
- package/dist/components/layout/split-views/stacked-split-view/stacked-split-view.styles.d.ts.map +1 -1
- package/dist/components/layout/split-views/stacked-split-view/stacked-split-view.styles.js +3 -0
- package/dist/components/layout/split-views/stacked-split-view/stacked-split-view.styles.js.map +1 -1
- package/dist/components/layout/window/window.d.ts +1 -19
- package/dist/components/layout/window/window.d.ts.map +1 -1
- package/dist/components/layout/window/window.js +1 -187
- package/dist/components/layout/window/window.js.map +1 -1
- package/dist/components/layout/window/window.styles.d.ts.map +1 -1
- package/dist/components/layout/window/window.styles.js +5 -28
- package/dist/components/layout/window/window.styles.js.map +1 -1
- package/dist/components/layout/window/window.template.d.ts.map +1 -1
- package/dist/components/layout/window/window.template.js +1 -2
- package/dist/components/layout/window/window.template.js.map +1 -1
- package/dist/components/lists-and-tables/cells/cell/cell.styles.d.ts.map +1 -1
- package/dist/components/lists-and-tables/cells/cell/cell.styles.js +4 -1
- package/dist/components/lists-and-tables/cells/cell/cell.styles.js.map +1 -1
- package/dist/components/lists-and-tables/cells/description-cell/description-cell.styles.d.ts.map +1 -1
- package/dist/components/lists-and-tables/cells/description-cell/description-cell.styles.js +4 -1
- package/dist/components/lists-and-tables/cells/description-cell/description-cell.styles.js.map +1 -1
- package/dist/components/lists-and-tables/cells/drag-handle-cell/drag-handle-cell.styles.d.ts.map +1 -1
- package/dist/components/lists-and-tables/cells/drag-handle-cell/drag-handle-cell.styles.js +3 -0
- package/dist/components/lists-and-tables/cells/drag-handle-cell/drag-handle-cell.styles.js.map +1 -1
- package/dist/components/lists-and-tables/cells/icon-cell/icon-cell.styles.d.ts.map +1 -1
- package/dist/components/lists-and-tables/cells/icon-cell/icon-cell.styles.js +3 -0
- package/dist/components/lists-and-tables/cells/icon-cell/icon-cell.styles.js.map +1 -1
- package/dist/components/lists-and-tables/cells/spacer-cell/spacer-cell.styles.d.ts.map +1 -1
- package/dist/components/lists-and-tables/cells/spacer-cell/spacer-cell.styles.js +3 -0
- package/dist/components/lists-and-tables/cells/spacer-cell/spacer-cell.styles.js.map +1 -1
- package/dist/components/lists-and-tables/cells/text-cell/text-cell.styles.d.ts.map +1 -1
- package/dist/components/lists-and-tables/cells/text-cell/text-cell.styles.js +4 -1
- package/dist/components/lists-and-tables/cells/text-cell/text-cell.styles.js.map +1 -1
- package/dist/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.styles.d.ts.map +1 -1
- package/dist/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.styles.js +3 -0
- package/dist/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.styles.js.map +1 -1
- package/dist/components/lists-and-tables/cells/title-cell/title-cell.styles.d.ts.map +1 -1
- package/dist/components/lists-and-tables/cells/title-cell/title-cell.styles.js +4 -1
- package/dist/components/lists-and-tables/cells/title-cell/title-cell.styles.js.map +1 -1
- package/dist/components/lists-and-tables/list/list.d.ts +183 -8
- package/dist/components/lists-and-tables/list/list.d.ts.map +1 -1
- package/dist/components/lists-and-tables/list/list.i18n.d.ts +3 -0
- package/dist/components/lists-and-tables/list/list.i18n.d.ts.map +1 -1
- package/dist/components/lists-and-tables/list/list.i18n.js +3 -0
- package/dist/components/lists-and-tables/list/list.i18n.js.map +1 -1
- package/dist/components/lists-and-tables/list/list.js +522 -17
- package/dist/components/lists-and-tables/list/list.js.map +1 -1
- package/dist/components/lists-and-tables/list/list.styles.d.ts.map +1 -1
- package/dist/components/lists-and-tables/list/list.styles.js +163 -25
- package/dist/components/lists-and-tables/list/list.styles.js.map +1 -1
- package/dist/components/lists-and-tables/list/list.template.d.ts +26 -1
- package/dist/components/lists-and-tables/list/list.template.d.ts.map +1 -1
- package/dist/components/lists-and-tables/list/list.template.js +76 -18
- package/dist/components/lists-and-tables/list/list.template.js.map +1 -1
- package/dist/components/lists-and-tables/list-item/list-item.d.ts +30 -9
- package/dist/components/lists-and-tables/list-item/list-item.d.ts.map +1 -1
- package/dist/components/lists-and-tables/list-item/list-item.i18n.d.ts +1 -1
- package/dist/components/lists-and-tables/list-item/list-item.i18n.js +1 -1
- package/dist/components/lists-and-tables/list-item/list-item.i18n.js.map +1 -1
- package/dist/components/lists-and-tables/list-item/list-item.js +81 -20
- package/dist/components/lists-and-tables/list-item/list-item.js.map +1 -1
- package/dist/components/lists-and-tables/list-item/list-item.styles.d.ts.map +1 -1
- package/dist/components/lists-and-tables/list-item/list-item.styles.js +55 -32
- package/dist/components/lists-and-tables/list-item/list-item.styles.js.map +1 -1
- package/dist/components/lists-and-tables/list-item/list-item.template.d.ts +1 -1
- package/dist/components/lists-and-tables/list-item/list-item.template.d.ts.map +1 -1
- package/dist/components/lists-and-tables/list-item/list-item.template.js +10 -5
- package/dist/components/lists-and-tables/list-item/list-item.template.js.map +1 -1
- package/dist/components/lists-and-tables/table/table.styles.d.ts.map +1 -1
- package/dist/components/lists-and-tables/table/table.styles.js +4 -1
- package/dist/components/lists-and-tables/table/table.styles.js.map +1 -1
- package/dist/components/navigation/breadcrumbs/breadcrumbs.d.ts +0 -44
- package/dist/components/navigation/breadcrumbs/breadcrumbs.d.ts.map +1 -1
- package/dist/components/navigation/breadcrumbs/breadcrumbs.i18n.d.ts +0 -1
- package/dist/components/navigation/breadcrumbs/breadcrumbs.i18n.d.ts.map +1 -1
- package/dist/components/navigation/breadcrumbs/breadcrumbs.i18n.js +0 -1
- package/dist/components/navigation/breadcrumbs/breadcrumbs.i18n.js.map +1 -1
- package/dist/components/navigation/breadcrumbs/breadcrumbs.js +1 -84
- package/dist/components/navigation/breadcrumbs/breadcrumbs.js.map +1 -1
- package/dist/components/navigation/breadcrumbs/breadcrumbs.styles.d.ts.map +1 -1
- package/dist/components/navigation/breadcrumbs/breadcrumbs.styles.js +6 -52
- package/dist/components/navigation/breadcrumbs/breadcrumbs.styles.js.map +1 -1
- package/dist/components/navigation/breadcrumbs/breadcrumbs.template.d.ts.map +1 -1
- package/dist/components/navigation/breadcrumbs/breadcrumbs.template.js +1 -17
- package/dist/components/navigation/breadcrumbs/breadcrumbs.template.js.map +1 -1
- package/dist/components/navigation/document-tab-bar/document-tab-bar.styles.d.ts.map +1 -1
- package/dist/components/navigation/document-tab-bar/document-tab-bar.styles.js +5 -1
- package/dist/components/navigation/document-tab-bar/document-tab-bar.styles.js.map +1 -1
- package/dist/components/navigation/link/link.d.ts +9 -2
- package/dist/components/navigation/link/link.d.ts.map +1 -1
- package/dist/components/navigation/link/link.i18n.d.ts +5 -0
- package/dist/components/navigation/link/link.i18n.d.ts.map +1 -0
- package/dist/components/navigation/link/link.i18n.js +4 -0
- package/dist/components/navigation/link/link.i18n.js.map +1 -0
- package/dist/components/navigation/link/link.js +5 -2
- package/dist/components/navigation/link/link.js.map +1 -1
- package/dist/components/navigation/link/link.styles.d.ts.map +1 -1
- package/dist/components/navigation/link/link.styles.js +18 -1
- package/dist/components/navigation/link/link.styles.js.map +1 -1
- package/dist/components/navigation/link/link.template.d.ts.map +1 -1
- package/dist/components/navigation/link/link.template.js +14 -1
- package/dist/components/navigation/link/link.template.js.map +1 -1
- package/dist/components/navigation/menu-bar/menu-bar.styles.d.ts.map +1 -1
- package/dist/components/navigation/menu-bar/menu-bar.styles.js +4 -1
- package/dist/components/navigation/menu-bar/menu-bar.styles.js.map +1 -1
- package/dist/components/navigation/menu-bar-item/menu-bar-item.styles.d.ts.map +1 -1
- package/dist/components/navigation/menu-bar-item/menu-bar-item.styles.js +4 -1
- package/dist/components/navigation/menu-bar-item/menu-bar-item.styles.js.map +1 -1
- package/dist/components/navigation/pagination/pagination.styles.d.ts.map +1 -1
- package/dist/components/navigation/pagination/pagination.styles.js +4 -1
- package/dist/components/navigation/pagination/pagination.styles.js.map +1 -1
- package/dist/components/navigation/skip-link/skip-link.styles.d.ts.map +1 -1
- package/dist/components/navigation/skip-link/skip-link.styles.js +4 -1
- package/dist/components/navigation/skip-link/skip-link.styles.js.map +1 -1
- package/dist/components/navigation/tab-bar/tab-bar.d.ts.map +1 -1
- package/dist/components/navigation/tab-bar/tab-bar.js +11 -4
- package/dist/components/navigation/tab-bar/tab-bar.js.map +1 -1
- package/dist/components/navigation/tab-bar/tab-bar.styles.d.ts.map +1 -1
- package/dist/components/navigation/tab-bar/tab-bar.styles.js +29 -4
- package/dist/components/navigation/tab-bar/tab-bar.styles.js.map +1 -1
- package/dist/components/navigation/top-navigation-bar/top-navigation-bar.d.ts +5 -0
- package/dist/components/navigation/top-navigation-bar/top-navigation-bar.d.ts.map +1 -1
- package/dist/components/navigation/top-navigation-bar/top-navigation-bar.js +17 -0
- package/dist/components/navigation/top-navigation-bar/top-navigation-bar.js.map +1 -1
- package/dist/components/navigation/top-navigation-bar/top-navigation-bar.styles.d.ts.map +1 -1
- package/dist/components/navigation/top-navigation-bar/top-navigation-bar.styles.js +32 -16
- package/dist/components/navigation/top-navigation-bar/top-navigation-bar.styles.js.map +1 -1
- package/dist/components/navigation/top-title-bar/top-title-bar.styles.d.ts.map +1 -1
- package/dist/components/navigation/top-title-bar/top-title-bar.styles.js +4 -1
- package/dist/components/navigation/top-title-bar/top-title-bar.styles.js.map +1 -1
- package/dist/components/{prism-python-mIMEATOA.js → prism-python--N285k7w.js} +1 -1
- package/dist/components/{prism-rust-Ig3wVTFD.js → prism-rust-Cnm1tSdo.js} +1 -1
- package/dist/components/{prism-typescript-BeulJu8Z.js → prism-typescript-BPJAiB1s.js} +1 -1
- package/dist/components/status-and-feedback/activity-indicator/activity-indicator.d.ts +35 -12
- package/dist/components/status-and-feedback/activity-indicator/activity-indicator.d.ts.map +1 -1
- package/dist/components/status-and-feedback/activity-indicator/activity-indicator.js +48 -13
- package/dist/components/status-and-feedback/activity-indicator/activity-indicator.js.map +1 -1
- package/dist/components/status-and-feedback/activity-indicator/activity-indicator.styles.d.ts.map +1 -1
- package/dist/components/status-and-feedback/activity-indicator/activity-indicator.styles.js +81 -18
- package/dist/components/status-and-feedback/activity-indicator/activity-indicator.styles.js.map +1 -1
- package/dist/components/status-and-feedback/activity-indicator/activity-indicator.template.d.ts +1 -2
- package/dist/components/status-and-feedback/activity-indicator/activity-indicator.template.d.ts.map +1 -1
- package/dist/components/status-and-feedback/activity-indicator/activity-indicator.template.js +21 -7
- package/dist/components/status-and-feedback/activity-indicator/activity-indicator.template.js.map +1 -1
- package/dist/components/status-and-feedback/badge/badge.styles.d.ts.map +1 -1
- package/dist/components/status-and-feedback/badge/badge.styles.js +4 -1
- package/dist/components/status-and-feedback/badge/badge.styles.js.map +1 -1
- package/dist/components/status-and-feedback/banner/banner.styles.d.ts.map +1 -1
- package/dist/components/status-and-feedback/banner/banner.styles.js +4 -1
- package/dist/components/status-and-feedback/banner/banner.styles.js.map +1 -1
- package/dist/components/status-and-feedback/inline-dialog/inline-dialog.d.ts.map +1 -1
- package/dist/components/status-and-feedback/inline-dialog/inline-dialog.js +12 -2
- package/dist/components/status-and-feedback/inline-dialog/inline-dialog.js.map +1 -1
- package/dist/components/status-and-feedback/inline-dialog/inline-dialog.styles.d.ts.map +1 -1
- package/dist/components/status-and-feedback/inline-dialog/inline-dialog.styles.js +4 -1
- package/dist/components/status-and-feedback/inline-dialog/inline-dialog.styles.js.map +1 -1
- package/dist/components/status-and-feedback/just-in-time-education/just-in-time-education.d.ts +124 -0
- package/dist/components/status-and-feedback/just-in-time-education/just-in-time-education.d.ts.map +1 -0
- package/dist/components/status-and-feedback/just-in-time-education/just-in-time-education.i18n.d.ts +6 -0
- package/dist/components/status-and-feedback/just-in-time-education/just-in-time-education.i18n.d.ts.map +1 -0
- package/dist/components/status-and-feedback/just-in-time-education/just-in-time-education.i18n.js +5 -0
- package/dist/components/status-and-feedback/just-in-time-education/just-in-time-education.i18n.js.map +1 -0
- package/dist/components/status-and-feedback/just-in-time-education/just-in-time-education.js +550 -0
- package/dist/components/status-and-feedback/just-in-time-education/just-in-time-education.js.map +1 -0
- package/dist/components/status-and-feedback/just-in-time-education/just-in-time-education.styles.d.ts +2 -0
- package/dist/components/status-and-feedback/just-in-time-education/just-in-time-education.styles.d.ts.map +1 -0
- package/dist/components/status-and-feedback/just-in-time-education/just-in-time-education.styles.js +304 -0
- package/dist/components/status-and-feedback/just-in-time-education/just-in-time-education.styles.js.map +1 -0
- package/dist/components/status-and-feedback/just-in-time-education/just-in-time-education.template.d.ts +4 -0
- package/dist/components/status-and-feedback/just-in-time-education/just-in-time-education.template.d.ts.map +1 -0
- package/dist/components/status-and-feedback/just-in-time-education/just-in-time-education.template.js +72 -0
- package/dist/components/status-and-feedback/just-in-time-education/just-in-time-education.template.js.map +1 -0
- package/dist/components/status-and-feedback/modal-dialog/modal-dialog.styles.d.ts.map +1 -1
- package/dist/components/status-and-feedback/modal-dialog/modal-dialog.styles.js +4 -1
- package/dist/components/status-and-feedback/modal-dialog/modal-dialog.styles.js.map +1 -1
- package/dist/components/status-and-feedback/progress-bar/progress-bar.styles.d.ts.map +1 -1
- package/dist/components/status-and-feedback/progress-bar/progress-bar.styles.js +4 -1
- package/dist/components/status-and-feedback/progress-bar/progress-bar.styles.js.map +1 -1
- package/dist/components/status-and-feedback/progress-circle/progress-circle.styles.d.ts.map +1 -1
- package/dist/components/status-and-feedback/progress-circle/progress-circle.styles.js +4 -1
- package/dist/components/status-and-feedback/progress-circle/progress-circle.styles.js.map +1 -1
- package/dist/components/status-and-feedback/status-bar/status-bar.d.ts +6 -1
- package/dist/components/status-and-feedback/status-bar/status-bar.d.ts.map +1 -1
- package/dist/components/status-and-feedback/status-bar/status-bar.js +23 -9
- package/dist/components/status-and-feedback/status-bar/status-bar.js.map +1 -1
- package/dist/components/status-and-feedback/status-bar/status-bar.styles.d.ts.map +1 -1
- package/dist/components/status-and-feedback/status-bar/status-bar.styles.js +4 -1
- package/dist/components/status-and-feedback/status-bar/status-bar.styles.js.map +1 -1
- package/dist/css/rich-text.css +63 -0
- package/dist/css/settings.css +10 -3
- package/package.json +9 -1
- package/dist/assets/styles/slotted-reset.d.ts.map +0 -1
- package/dist/assets/styles/slotted-reset.fixtures.d.ts.map +0 -1
- package/dist/assets/styles/slotted-reset.fixtures.js.map +0 -1
- package/dist/assets/styles/slotted-reset.js.map +0 -1
package/dist/components/status-and-feedback/just-in-time-education/just-in-time-education.styles.js
ADDED
|
@@ -0,0 +1,304 @@
|
|
|
1
|
+
import { css } from 'lit';
|
|
2
|
+
import { inheritedTextReset } from '../../../assets/styles/style-resets.js';
|
|
3
|
+
export const justInTimeEducationStyles = css `
|
|
4
|
+
:host {
|
|
5
|
+
box-sizing: border-box;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
/* # Host */
|
|
10
|
+
|
|
11
|
+
:host {
|
|
12
|
+
--_arrow-length: var(--primitives-space-64); /* JS overrides this with the arrow-length attribute when valid */
|
|
13
|
+
--_desired-arrow-length: max(var(--primitives-space-40), var(--_arrow-length));
|
|
14
|
+
--_no-arrow-gap: var(--primitives-space-16);
|
|
15
|
+
--_gap: min(var(--_desired-arrow-length), var(--_available-distance));
|
|
16
|
+
--_available-distance: 9999px; /* JS sets the px distance to the viewport/document edge; default = no clamp */
|
|
17
|
+
--_background-blur: var(--primitives-space-8);
|
|
18
|
+
--_background-z-index: -1;
|
|
19
|
+
--_corner-radius: var(--primitives-space-40);
|
|
20
|
+
--_text-width: var(--primitives-area-320);
|
|
21
|
+
--_min-text-width: var(--primitives-area-200);
|
|
22
|
+
--_dismiss-width: var(--semantics-controls-md-min-size);
|
|
23
|
+
--_main-width: var(--_text-width);
|
|
24
|
+
--_max-width: var(--_main-width);
|
|
25
|
+
--_show-duration: var(--primitives-transition-duration-fast);
|
|
26
|
+
--_hide-duration: var(--primitives-transition-duration-medium);
|
|
27
|
+
--_offset: 0; /* px, unitless — read by JS */
|
|
28
|
+
--_shift-padding: 8; /* px, unitless — read by JS */
|
|
29
|
+
--_main-padding: var(--primitives-space-16);
|
|
30
|
+
--_main-background-color: color-mix(in srgb, var(--semantics-surfaces-base-background-color) 90%, transparent);
|
|
31
|
+
--_text-color: var(--semantics-content-color);
|
|
32
|
+
--_text-font: var(--primitives-font-body-lg-bold-tight);
|
|
33
|
+
--_supporting-text-color: var(--semantics-content-color);
|
|
34
|
+
--_supporting-text-font: var(--primitives-font-body-md-regular-tight);
|
|
35
|
+
--_arrow-color: var(--semantics-content-color);
|
|
36
|
+
|
|
37
|
+
${inheritedTextReset}
|
|
38
|
+
display: contents;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
:host([hidden]) {
|
|
42
|
+
display: none;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
/* no-arrow (consumer) or the auto-collapsed state (JS sets it when the gap would
|
|
46
|
+
* fall below its minimum): drop to a small fixed gap, with no arrow drawn. */
|
|
47
|
+
:host([no-arrow]),
|
|
48
|
+
:host([data-arrow-collapsed]) {
|
|
49
|
+
--_gap: var(--_no-arrow-gap);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
/* Horizontal placement: the arrow gap is horizontal here (unlike vertical), so
|
|
53
|
+
* the container is the main plus the arrow length. (Vertical keeps the base
|
|
54
|
+
* --_max-width = --_main-width.) */
|
|
55
|
+
:host([data-arrow-side="left"]),
|
|
56
|
+
:host([data-arrow-side="right"]) {
|
|
57
|
+
--_max-width: calc(var(--_main-width) + var(--_desired-arrow-length));
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
/* The dismiss button widens the main — it sits beside the text — for horizontal
|
|
61
|
+
* placement only; vertical stacks it below. --_max-width follows via --_main-width. */
|
|
62
|
+
:host([dismissable][data-arrow-side="left"]),
|
|
63
|
+
:host([dismissable][data-arrow-side="right"]) {
|
|
64
|
+
--_main-width: calc(var(--_text-width) + var(--_dismiss-width));
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
/* Horizontal placement near a viewport edge: --_available-distance (JS) is the
|
|
68
|
+
* distance to that edge. Reserve the main's width (--_main-width) so the arrow
|
|
69
|
+
* gap absorbs the first shrink and falls to 0; the container cap then narrows
|
|
70
|
+
* the main itself. Skipped for no-arrow, which keeps its fixed gap. */
|
|
71
|
+
:host(:not([no-arrow]):not([data-arrow-collapsed])[data-arrow-side="left"]),
|
|
72
|
+
:host(:not([no-arrow]):not([data-arrow-collapsed])[data-arrow-side="right"]) {
|
|
73
|
+
--_gap: clamp(0px, var(--_desired-arrow-length), calc(var(--_available-distance) - var(--_main-width)));
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
/* # Container */
|
|
78
|
+
|
|
79
|
+
/* Transparent top-layer wrapper. It carries the arrow gap as padding on the
|
|
80
|
+
* side facing the control (so the arrow lives INSIDE the box and is never
|
|
81
|
+
* clipped); the other sides keep a small margin for the blurred background.
|
|
82
|
+
* pointer-events are off so clicks on the empty padding fall through to the
|
|
83
|
+
* page (counted as "outside"). The whole thing fades as one on open/close;
|
|
84
|
+
* the base rule holds the (slower) hide timing, :popover-open the show. */
|
|
85
|
+
.just-in-time-education {
|
|
86
|
+
box-sizing: border-box;
|
|
87
|
+
position: absolute;
|
|
88
|
+
opacity: 0;
|
|
89
|
+
margin: 0;
|
|
90
|
+
border: none;
|
|
91
|
+
background: none;
|
|
92
|
+
width: max-content;
|
|
93
|
+
max-width: var(--_max-width);
|
|
94
|
+
padding: var(--_background-blur);
|
|
95
|
+
pointer-events: none;
|
|
96
|
+
overflow: visible;
|
|
97
|
+
transition:
|
|
98
|
+
opacity var(--_hide-duration) ease,
|
|
99
|
+
display var(--_hide-duration) allow-discrete,
|
|
100
|
+
overlay var(--_hide-duration) allow-discrete;
|
|
101
|
+
/* Force a GPU layer so Safari paints the freshly-opened top-layer popover
|
|
102
|
+
* (blurred background + SVG arrow) correctly instead of leaving it stale
|
|
103
|
+
* until a manual resize. */
|
|
104
|
+
transform: translate3d(0, 0, 0);
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
/* Horizontal placement: never exceed the room to the viewport edge. Once the
|
|
108
|
+
* arrow gap has shrunk to 0, this is what makes the main itself narrower. */
|
|
109
|
+
:host([data-arrow-side="left"]) .just-in-time-education,
|
|
110
|
+
:host([data-arrow-side="right"]) .just-in-time-education {
|
|
111
|
+
max-width: min(var(--_max-width), var(--_available-distance));
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
|
|
115
|
+
/* ## Arrow-side padding (only the side facing the control needs the gap) */
|
|
116
|
+
|
|
117
|
+
:host([data-arrow-side="bottom"]) .just-in-time-education {
|
|
118
|
+
padding-block-start: var(--_gap);
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
:host([data-arrow-side="top"]) .just-in-time-education {
|
|
122
|
+
padding-block-end: var(--_gap);
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
:host([data-arrow-side="left"]) .just-in-time-education {
|
|
126
|
+
padding-inline-end: var(--_gap);
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
:host([data-arrow-side="right"]) .just-in-time-education {
|
|
130
|
+
padding-inline-start: var(--_gap);
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
|
|
134
|
+
/* ## Fade */
|
|
135
|
+
|
|
136
|
+
.just-in-time-education:popover-open {
|
|
137
|
+
opacity: 1;
|
|
138
|
+
transition:
|
|
139
|
+
opacity var(--_show-duration) ease,
|
|
140
|
+
display var(--_show-duration) allow-discrete,
|
|
141
|
+
overlay var(--_show-duration) allow-discrete;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
@starting-style {
|
|
145
|
+
.just-in-time-education:popover-open {
|
|
146
|
+
opacity: 0;
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
@media (prefers-reduced-motion: reduce) {
|
|
151
|
+
.just-in-time-education {
|
|
152
|
+
transition: none;
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
|
|
157
|
+
/* # Main */
|
|
158
|
+
|
|
159
|
+
.just-in-time-education__main {
|
|
160
|
+
box-sizing: border-box;
|
|
161
|
+
position: relative;
|
|
162
|
+
isolation: isolate;
|
|
163
|
+
pointer-events: auto;
|
|
164
|
+
padding: var(--_main-padding);
|
|
165
|
+
display: flex;
|
|
166
|
+
flex-direction: column;
|
|
167
|
+
align-items: center;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
/* The dismiss sits on the side away from the arrow: below the text for bottom,
|
|
171
|
+
* above it for top, beside it (on the placement's own side) for left/right —
|
|
172
|
+
* so the text always leans toward the control. */
|
|
173
|
+
:host([data-arrow-side="top"]) .just-in-time-education__main {
|
|
174
|
+
flex-direction: column-reverse;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
:host([data-arrow-side="left"]) .just-in-time-education__main {
|
|
178
|
+
flex-direction: row-reverse;
|
|
179
|
+
align-items: center;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
:host([data-arrow-side="right"]) .just-in-time-education__main {
|
|
183
|
+
flex-direction: row;
|
|
184
|
+
align-items: center;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
/* Horizontal placement floor: as the room narrows the main (after the arrow
|
|
188
|
+
* has collapsed), keep it usable at this minimum — the card overflows the
|
|
189
|
+
* viewport edge rather than shrinking further. */
|
|
190
|
+
:host([data-arrow-side="left"]) .just-in-time-education__main,
|
|
191
|
+
:host([data-arrow-side="right"]) .just-in-time-education__main {
|
|
192
|
+
min-width: var(--_min-text-width);
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
/* ...plus the dismiss button when dismissable: it sits beside the text, so the
|
|
196
|
+
* text keeps its 200px floor with the button next to it. */
|
|
197
|
+
:host([dismissable][data-arrow-side="left"]) .just-in-time-education__main,
|
|
198
|
+
:host([dismissable][data-arrow-side="right"]) .just-in-time-education__main {
|
|
199
|
+
min-width: calc(var(--_min-text-width) + var(--_dismiss-width));
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
/* Background lives on a blurred pseudo-element so its edges fade softly (no
|
|
203
|
+
* hard border, no drop shadow). The radius is a local, free value because
|
|
204
|
+
* this surface has a different function than the standard surfaces. The
|
|
205
|
+
* element is grown by the blur radius so the solid centre still covers the
|
|
206
|
+
* content after blurring. */
|
|
207
|
+
.just-in-time-education__main::before {
|
|
208
|
+
content: '';
|
|
209
|
+
position: absolute;
|
|
210
|
+
z-index: var(--_background-z-index);
|
|
211
|
+
inset: calc(-1 * var(--_background-blur));
|
|
212
|
+
border-radius: var(--_corner-radius);
|
|
213
|
+
background-color: var(--_main-background-color);
|
|
214
|
+
filter: blur(var(--_background-blur));
|
|
215
|
+
transform: translate3d(0, 0, 0);
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
|
|
219
|
+
/* ## Text */
|
|
220
|
+
|
|
221
|
+
.just-in-time-education__text-area {
|
|
222
|
+
display: flex;
|
|
223
|
+
flex-direction: column;
|
|
224
|
+
text-align: center;
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
:host([data-arrow-side="left"]) .just-in-time-education__text-area {
|
|
228
|
+
text-align: right;
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
:host([data-arrow-side="right"]) .just-in-time-education__text-area {
|
|
232
|
+
text-align: left;
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
.just-in-time-education__text {
|
|
236
|
+
margin: 0;
|
|
237
|
+
color: var(--_text-color);
|
|
238
|
+
font: var(--_text-font);
|
|
239
|
+
font-style: italic;
|
|
240
|
+
text-wrap: pretty;
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
.just-in-time-education__supporting-text {
|
|
244
|
+
margin: 0;
|
|
245
|
+
color: var(--_supporting-text-color);
|
|
246
|
+
font: var(--_supporting-text-font);
|
|
247
|
+
font-style: italic;
|
|
248
|
+
text-wrap: pretty;
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
|
|
252
|
+
/* ## Dismiss button */
|
|
253
|
+
|
|
254
|
+
.just-in-time-education__dismiss-button {
|
|
255
|
+
display: flex;
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
|
|
259
|
+
/* # Arrow */
|
|
260
|
+
|
|
261
|
+
.just-in-time-education__arrow {
|
|
262
|
+
position: absolute;
|
|
263
|
+
pointer-events: none;
|
|
264
|
+
overflow: visible;
|
|
265
|
+
color: var(--_arrow-color);
|
|
266
|
+
transform: translate3d(0, 0, 0);
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
/* Auto-collapsed (gap below its minimum near an edge): hide the arrow; the gap
|
|
270
|
+
* has already dropped to the small no-arrow value. */
|
|
271
|
+
:host([data-arrow-collapsed]) .just-in-time-education__arrow {
|
|
272
|
+
display: none;
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
.just-in-time-education__arrow-path {
|
|
276
|
+
fill: none;
|
|
277
|
+
stroke: currentColor;
|
|
278
|
+
stroke-width: 2;
|
|
279
|
+
stroke-linecap: butt;
|
|
280
|
+
stroke-dasharray: 5 3;
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
.just-in-time-education__arrow-head {
|
|
284
|
+
fill: currentColor;
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
|
|
288
|
+
/* # Live-region announcer */
|
|
289
|
+
|
|
290
|
+
/* Visually hidden but present in the a11y tree, so the polite announcement set
|
|
291
|
+
* on open reaches assistive tech without moving focus into the callout. */
|
|
292
|
+
.just-in-time-education__announcer {
|
|
293
|
+
position: absolute;
|
|
294
|
+
margin: -1px;
|
|
295
|
+
border: 0;
|
|
296
|
+
width: 1px;
|
|
297
|
+
height: 1px;
|
|
298
|
+
overflow: hidden;
|
|
299
|
+
padding: 0;
|
|
300
|
+
white-space: nowrap;
|
|
301
|
+
clip-path: inset(50%);
|
|
302
|
+
}
|
|
303
|
+
`;
|
|
304
|
+
//# sourceMappingURL=just-in-time-education.styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"just-in-time-education.styles.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/just-in-time-education/just-in-time-education.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,wCAAwC,CAAC;AAE5E,MAAM,CAAC,MAAM,yBAAyB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAkCxC,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0QrB,CAAC"}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import type { TemplateResult } from 'lit';
|
|
2
|
+
import type { NLDDJustInTimeEducation } from './just-in-time-education.js';
|
|
3
|
+
export declare function justInTimeEducationTemplate(component: NLDDJustInTimeEducation): TemplateResult;
|
|
4
|
+
//# sourceMappingURL=just-in-time-education.template.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"just-in-time-education.template.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/just-in-time-education/just-in-time-education.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1C,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AAE3E,wBAAgB,2BAA2B,CAAC,SAAS,EAAE,uBAAuB,GAAG,cAAc,CAqE9F"}
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import { html, nothing } from 'lit';
|
|
2
|
+
export function justInTimeEducationTemplate(component) {
|
|
3
|
+
return html `
|
|
4
|
+
<slot
|
|
5
|
+
@slotchange=${component._handleSlotChange}
|
|
6
|
+
@focusin=${component._handleAdvisedInteraction}
|
|
7
|
+
@pointerdown=${component._handleAdvisedInteraction}
|
|
8
|
+
></slot>
|
|
9
|
+
<div class="just-in-time-education__announcer"
|
|
10
|
+
aria-live="polite"
|
|
11
|
+
aria-atomic="true"
|
|
12
|
+
></div>
|
|
13
|
+
<div class="just-in-time-education"
|
|
14
|
+
popover="manual"
|
|
15
|
+
role=${component.dismissable ? 'dialog' : 'region'}
|
|
16
|
+
tabindex=${component.dismissable ? '-1' : nothing}
|
|
17
|
+
aria-label=${component.text || component._t('components.just-in-time-education.accessible-label')}
|
|
18
|
+
@keydown=${component._handleCalloutKeydown}
|
|
19
|
+
>
|
|
20
|
+
<div class="just-in-time-education__main">
|
|
21
|
+
<div class="just-in-time-education__text-area">
|
|
22
|
+
${component.text ? html `
|
|
23
|
+
<p class="just-in-time-education__text">
|
|
24
|
+
${component.text}
|
|
25
|
+
</p>
|
|
26
|
+
` : nothing}
|
|
27
|
+
${component.supportingText ? html `
|
|
28
|
+
<p class="just-in-time-education__supporting-text">
|
|
29
|
+
${component.supportingText}
|
|
30
|
+
</p>
|
|
31
|
+
` : nothing}
|
|
32
|
+
</div>
|
|
33
|
+
${component.dismissable ? html `
|
|
34
|
+
<div class="just-in-time-education__dismiss-button">
|
|
35
|
+
<nldd-icon-button
|
|
36
|
+
icon="dismiss"
|
|
37
|
+
variant="neutral-transparent"
|
|
38
|
+
size="md"
|
|
39
|
+
accessible-label=${component._t('components.just-in-time-education.dismiss-action')}
|
|
40
|
+
@click=${component._handleDismiss}
|
|
41
|
+
></nldd-icon-button>
|
|
42
|
+
</div>
|
|
43
|
+
` : nothing}
|
|
44
|
+
</div>
|
|
45
|
+
${component.noArrow ? nothing : html `
|
|
46
|
+
<svg class="just-in-time-education__arrow"
|
|
47
|
+
aria-hidden="true"
|
|
48
|
+
>
|
|
49
|
+
<defs>
|
|
50
|
+
<marker
|
|
51
|
+
id=${component._arrowMarkerId}
|
|
52
|
+
markerWidth="10"
|
|
53
|
+
markerHeight="12"
|
|
54
|
+
refX="0"
|
|
55
|
+
refY="5.78"
|
|
56
|
+
orient="auto"
|
|
57
|
+
markerUnits="userSpaceOnUse"
|
|
58
|
+
>
|
|
59
|
+
<path class="just-in-time-education__arrow-head"
|
|
60
|
+
d="M0,0 L10,5.78 L0,11.55 Z"
|
|
61
|
+
></path>
|
|
62
|
+
</marker>
|
|
63
|
+
</defs>
|
|
64
|
+
<path class="just-in-time-education__arrow-path"
|
|
65
|
+
marker-end=${`url(#${component._arrowMarkerId})`}
|
|
66
|
+
></path>
|
|
67
|
+
</svg>
|
|
68
|
+
`}
|
|
69
|
+
</div>
|
|
70
|
+
`;
|
|
71
|
+
}
|
|
72
|
+
//# sourceMappingURL=just-in-time-education.template.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"just-in-time-education.template.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/just-in-time-education/just-in-time-education.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAIpC,MAAM,UAAU,2BAA2B,CAAC,SAAkC;IAC7E,OAAO,IAAI,CAAA;;iBAEK,SAAS,CAAC,iBAAiB;cAC9B,SAAS,CAAC,yBAAyB;kBAC/B,SAAS,CAAC,yBAAyB;;;;;;;;UAQ3C,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ;cACvC,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO;gBACpC,SAAS,CAAC,IAAI,IAAI,SAAS,CAAC,EAAE,CAAC,oDAAoD,CAAC;cACtF,SAAS,CAAC,qBAAqB;;;;OAItC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;;SAEnB,SAAS,CAAC,IAAI;;MAEjB,CAAC,CAAC,CAAC,OAAO;OACT,SAAS,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAA;;SAE7B,SAAS,CAAC,cAAc;;MAE3B,CAAC,CAAC,CAAC,OAAO;;MAEV,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAA;;;;;;0BAMR,SAAS,CAAC,EAAE,CAAC,kDAAkD,CAAC;gBAC1E,SAAS,CAAC,cAAc;;;KAGnC,CAAC,CAAC,CAAC,OAAO;;KAEV,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAA;;;;;;YAM3B,SAAS,CAAC,cAAc;;;;;;;;;;;;;;mBAcjB,QAAQ,SAAS,CAAC,cAAc,GAAG;;;IAGlD;;EAEF,CAAC;AACH,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal-dialog.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/modal-dialog/modal-dialog.styles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,iBAAiB,
|
|
1
|
+
{"version":3,"file":"modal-dialog.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/modal-dialog/modal-dialog.styles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,iBAAiB,yBA+F7B,CAAC"}
|
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
import { css, unsafeCSS } from 'lit';
|
|
2
2
|
import { breakpoints } from '../../../assets/styles/breakpoints.js';
|
|
3
|
-
import { inheritedTextReset } from '../../../assets/styles/
|
|
3
|
+
import { inheritedTextReset } from '../../../assets/styles/style-resets.js';
|
|
4
4
|
const mdMin = unsafeCSS(breakpoints.mdMin);
|
|
5
5
|
export const modalDialogStyles = css `
|
|
6
|
+
:host {
|
|
7
|
+
box-sizing: border-box;
|
|
8
|
+
}
|
|
6
9
|
|
|
7
10
|
|
|
8
11
|
/* # Host */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal-dialog.styles.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/modal-dialog/modal-dialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"modal-dialog.styles.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/modal-dialog/modal-dialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,wCAAwC,CAAC;AAE5E,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;IAahC,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;uBAwBC,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0D3B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"progress-bar.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/progress-bar/progress-bar.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,iBAAiB,
|
|
1
|
+
{"version":3,"file":"progress-bar.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/progress-bar/progress-bar.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,iBAAiB,yBA8M7B,CAAC;AAGF,eAAO,MAAM,iCAAiC,yBA8L7C,CAAC"}
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
import { inheritedTextReset } from '../../../assets/styles/
|
|
2
|
+
import { inheritedTextReset } from '../../../assets/styles/style-resets.js';
|
|
3
3
|
export const progressBarStyles = css `
|
|
4
|
+
:host {
|
|
5
|
+
box-sizing: border-box;
|
|
6
|
+
}
|
|
4
7
|
|
|
5
8
|
|
|
6
9
|
/* # Host */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"progress-bar.styles.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/progress-bar/progress-bar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"progress-bar.styles.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/progress-bar/progress-bar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,wCAAwC,CAAC;AAE5E,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;IA0BhC,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoLrB,CAAC;AAGF,MAAM,CAAC,MAAM,iCAAiC,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8LnD,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"progress-circle.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/progress-circle/progress-circle.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,oBAAoB,
|
|
1
|
+
{"version":3,"file":"progress-circle.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/progress-circle/progress-circle.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,oBAAoB,yBA8PhC,CAAC;AAGF,eAAO,MAAM,oCAAoC,yBAIhD,CAAC"}
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
import { inheritedTextReset } from '../../../assets/styles/
|
|
2
|
+
import { inheritedTextReset } from '../../../assets/styles/style-resets.js';
|
|
3
3
|
export const progressCircleStyles = css `
|
|
4
|
+
:host {
|
|
5
|
+
box-sizing: border-box;
|
|
6
|
+
}
|
|
4
7
|
|
|
5
8
|
|
|
6
9
|
/* # Host */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"progress-circle.styles.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/progress-circle/progress-circle.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"progress-circle.styles.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/progress-circle/progress-circle.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,wCAAwC,CAAC;AAE5E,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;IAwBnC,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsOrB,CAAC;AAGF,MAAM,CAAC,MAAM,oCAAoC,GAAG,GAAG,CAAA;;;;CAItD,CAAC"}
|
|
@@ -8,6 +8,11 @@
|
|
|
8
8
|
* benoemen ("Storing: …", "Gepland onderhoud …"), zodat de betekenis niet
|
|
9
9
|
* alleen uit kleur volgt (WCAG 1.4.1).
|
|
10
10
|
*
|
|
11
|
+
* Houd de tekst kort: de balk toont één regel en kapt af met ellipsis, zeker
|
|
12
|
+
* op smallere schermen. Bij een lang bericht met veel informatie hoort alleen
|
|
13
|
+
* de kern in de balk; verwijs voor de rest naar een losse pagina of sheet
|
|
14
|
+
* (bijvoorbeeld via `href` of `button`) waar de gebruiker verder kan lezen.
|
|
15
|
+
*
|
|
11
16
|
* De hele balk kan klikbaar zijn: zet `href` (rendert een `<a>`) of `button`
|
|
12
17
|
* (rendert een `<button>`; luister naar het native `click` event). Zonder
|
|
13
18
|
* beide is de balk statisch. Bij interactie verschijnt een chevron als
|
|
@@ -45,7 +50,7 @@ export declare class NLDDStatusBar extends LitElement {
|
|
|
45
50
|
/** Link rel attribute. Only used when href is set. */
|
|
46
51
|
rel: string;
|
|
47
52
|
button: boolean;
|
|
48
|
-
|
|
53
|
+
connectedCallback(): void;
|
|
49
54
|
/** @internal Auto-secure rel for new-tab links unless the consumer set one. */
|
|
50
55
|
_resolvedRel(): string;
|
|
51
56
|
updated(changed: Map<string, unknown>): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"status-bar.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/status-bar/status-bar.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"status-bar.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/status-bar/status-bar.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAIjC,OAAO,4BAA4B,CAAC;AAEpC,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAEzF,qBACa,aAAc,SAAQ,UAAU;IAC5C,OAAgB,MAAM,0BAAmB;IAGzC,OAAO,EAAE,gBAAgB,CAAa;IAGtC,IAAI,SAAM;IAGV,IAAI,SAAM;IAEV,+DAA+D;IAE/D,MAAM,SAAM;IAEZ,sDAAsD;IAEtD,GAAG,SAAM;IAGT,MAAM,UAAS;IAEN,iBAAiB,IAAI,IAAI;IAYlC,+EAA+E;IAC/E,YAAY,IAAI,MAAM;IAKb,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAIrD,OAAO,CAAC,oBAAoB;IAmBnB,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,iBAAiB,EAAE,aAAa,CAAC;KACjC;CACD"}
|
|
@@ -14,6 +14,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
14
14
|
* benoemen ("Storing: …", "Gepland onderhoud …"), zodat de betekenis niet
|
|
15
15
|
* alleen uit kleur volgt (WCAG 1.4.1).
|
|
16
16
|
*
|
|
17
|
+
* Houd de tekst kort: de balk toont één regel en kapt af met ellipsis, zeker
|
|
18
|
+
* op smallere schermen. Bij een lang bericht met veel informatie hoort alleen
|
|
19
|
+
* de kern in de balk; verwijs voor de rest naar een losse pagina of sheet
|
|
20
|
+
* (bijvoorbeeld via `href` of `button`) waar de gebruiker verder kan lezen.
|
|
21
|
+
*
|
|
17
22
|
* De hele balk kan klikbaar zijn: zet `href` (rendert een `<a>`) of `button`
|
|
18
23
|
* (rendert een `<button>`; luister naar het native `click` event). Zonder
|
|
19
24
|
* beide is de balk statisch. Bij interactie verschijnt een chevron als
|
|
@@ -45,7 +50,7 @@ import { statusBarTemplate } from './status-bar.template.js';
|
|
|
45
50
|
import '../../content/icon/icon.js';
|
|
46
51
|
let NLDDStatusBar = class NLDDStatusBar extends LitElement {
|
|
47
52
|
constructor() {
|
|
48
|
-
super();
|
|
53
|
+
super(...arguments);
|
|
49
54
|
this.variant = 'neutral';
|
|
50
55
|
this.text = '';
|
|
51
56
|
this.href = '';
|
|
@@ -54,14 +59,17 @@ let NLDDStatusBar = class NLDDStatusBar extends LitElement {
|
|
|
54
59
|
/** Link rel attribute. Only used when href is set. */
|
|
55
60
|
this.rel = '';
|
|
56
61
|
this.button = false;
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
//
|
|
61
|
-
//
|
|
62
|
-
//
|
|
63
|
-
|
|
64
|
-
|
|
62
|
+
}
|
|
63
|
+
connectedCallback() {
|
|
64
|
+
super.connectedCallback();
|
|
65
|
+
// Set role + aria-live here, NOT in the constructor: the custom-element
|
|
66
|
+
// spec forbids a constructor from adding attributes to its element, so
|
|
67
|
+
// document.createElement (the path Vue, React and other createElement-based
|
|
68
|
+
// frameworks use) would throw NotSupportedError and the element would never
|
|
69
|
+
// upgrade. connectedCallback runs at insertion, before the first render, so
|
|
70
|
+
// the live-region role is present from the start; updated() keeps it in sync
|
|
71
|
+
// on later variant changes.
|
|
72
|
+
this._applyAriaForVariant(this.variant);
|
|
65
73
|
}
|
|
66
74
|
/** @internal Auto-secure rel for new-tab links unless the consumer set one. */
|
|
67
75
|
_resolvedRel() {
|
|
@@ -74,6 +82,12 @@ let NLDDStatusBar = class NLDDStatusBar extends LitElement {
|
|
|
74
82
|
this._applyAriaForVariant(this.variant);
|
|
75
83
|
}
|
|
76
84
|
_applyAriaForVariant(variant) {
|
|
85
|
+
// role + aria-live are component-owned and tied to the variant for correct
|
|
86
|
+
// announcement (critical = assertive alert, else polite status). They are
|
|
87
|
+
// (re)applied unconditionally on every connect/variant change, NOT guarded
|
|
88
|
+
// behind "consumer hasn't set role" — deliberately, since the docs state they
|
|
89
|
+
// are not consumer-overridable: a wrong role here (e.g. presentation on a
|
|
90
|
+
// critical alert) would silently break the a11y contract.
|
|
77
91
|
if (variant === 'critical') {
|
|
78
92
|
this.setAttribute('role', 'alert');
|
|
79
93
|
this.removeAttribute('aria-live');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"status-bar.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/status-bar/status-bar.ts"],"names":[],"mappings":";;;;;;AAAA
|
|
1
|
+
{"version":3,"file":"status-bar.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/status-bar/status-bar.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,4BAA4B,CAAC;AAK7B,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAIN,YAAO,GAAqB,SAAS,CAAC;QAGtC,SAAI,GAAG,EAAE,CAAC;QAGV,SAAI,GAAG,EAAE,CAAC;QAEV,+DAA+D;QAE/D,WAAM,GAAG,EAAE,CAAC;QAEZ,sDAAsD;QAEtD,QAAG,GAAG,EAAE,CAAC;QAGT,WAAM,GAAG,KAAK,CAAC;IA8ChB,CAAC;IA5CS,iBAAiB;QACzB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,wEAAwE;QACxE,uEAAuE;QACvE,4EAA4E;QAC5E,4EAA4E;QAC5E,4EAA4E;QAC5E,6EAA6E;QAC7E,4BAA4B;QAC5B,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACzC,CAAC;IAED,+EAA+E;IAC/E,YAAY;QACX,IAAI,IAAI,CAAC,GAAG;YAAE,OAAO,IAAI,CAAC,GAAG,CAAC;QAC9B,OAAO,IAAI,CAAC,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,CAAC;IAC9D,CAAC;IAEQ,OAAO,CAAC,OAA6B;QAC7C,IAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC;YAAE,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACrE,CAAC;IAEO,oBAAoB,CAAC,OAAyB;QACrD,2EAA2E;QAC3E,0EAA0E;QAC1E,2EAA2E;QAC3E,8EAA8E;QAC9E,0EAA0E;QAC1E,0DAA0D;QAC1D,IAAI,OAAO,KAAK,UAAU,EAAE,CAAC;YAC5B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;YACnC,IAAI,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC;QACnC,CAAC;aAAM,CAAC;YACP,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;YACpC,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;QAC1C,CAAC;QACD,oEAAoE;QACpE,6DAA6D;QAC7D,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IAC1C,CAAC;IAEQ,MAAM;QACd,OAAO,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAChC,CAAC;;AAjEe,oBAAM,GAAG,eAAe,AAAlB,CAAmB;AAGzC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CACJ;AAGtC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACjB;AAIV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CACf;AAIZ;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAClB;AAGT;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAC5B;AArBH,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CAmEzB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"status-bar.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/status-bar/status-bar.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe,
|
|
1
|
+
{"version":3,"file":"status-bar.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/status-bar/status-bar.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe,yBA6I3B,CAAC"}
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
import { inheritedTextReset } from '../../../assets/styles/
|
|
2
|
+
import { inheritedTextReset } from '../../../assets/styles/style-resets.js';
|
|
3
3
|
export const statusBarStyles = css `
|
|
4
|
+
:host {
|
|
5
|
+
box-sizing: border-box;
|
|
6
|
+
}
|
|
4
7
|
|
|
5
8
|
|
|
6
9
|
/* # Host */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"status-bar.styles.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/status-bar/status-bar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"status-bar.styles.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/status-bar/status-bar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,wCAAwC,CAAC;AAE5E,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;IAoB9B,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyHrB,CAAC"}
|