@fluentui/web-components 3.0.0-rc.20 → 3.0.0-rc.22
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 +22 -2
- package/custom-elements.json +1594 -260
- package/dist/esm/accordion/accordion.definition-async.d.ts +10 -0
- package/dist/esm/accordion/accordion.definition-async.js +14 -0
- package/dist/esm/accordion/accordion.definition-async.js.map +1 -0
- package/dist/esm/accordion/accordion.js +1 -1
- package/dist/esm/accordion/accordion.js.map +1 -1
- package/dist/esm/accordion/accordion.styles.css +8 -0
- package/dist/esm/accordion/accordion.template.html +5 -0
- package/dist/esm/accordion/define-async.d.ts +1 -0
- package/dist/esm/accordion/define-async.js +5 -0
- package/dist/esm/accordion/define-async.js.map +1 -0
- package/dist/esm/accordion-item/accordion-item.definition-async.d.ts +10 -0
- package/dist/esm/accordion-item/accordion-item.definition-async.js +14 -0
- package/dist/esm/accordion-item/accordion-item.definition-async.js.map +1 -0
- package/dist/esm/accordion-item/accordion-item.styles.css +170 -0
- package/dist/esm/accordion-item/accordion-item.template.html +47 -0
- package/dist/esm/accordion-item/define-async.d.ts +1 -0
- package/dist/esm/accordion-item/define-async.js +5 -0
- package/dist/esm/accordion-item/define-async.js.map +1 -0
- package/dist/esm/anchor-button/anchor-button.definition-async.d.ts +10 -0
- package/dist/esm/anchor-button/anchor-button.definition-async.js +14 -0
- package/dist/esm/anchor-button/anchor-button.definition-async.js.map +1 -0
- package/dist/esm/anchor-button/anchor-button.styles.css +225 -0
- package/dist/esm/anchor-button/anchor-button.template.html +13 -0
- package/dist/esm/anchor-button/define-async.d.ts +1 -0
- package/dist/esm/anchor-button/define-async.js +5 -0
- package/dist/esm/anchor-button/define-async.js.map +1 -0
- package/dist/esm/avatar/avatar.definition-async.d.ts +10 -0
- package/dist/esm/avatar/avatar.definition-async.js +14 -0
- package/dist/esm/avatar/avatar.definition-async.js.map +1 -0
- package/dist/esm/avatar/avatar.styles.css +475 -0
- package/dist/esm/avatar/avatar.template.html +17 -0
- package/dist/esm/avatar/define-async.d.ts +1 -0
- package/dist/esm/avatar/define-async.js +5 -0
- package/dist/esm/avatar/define-async.js.map +1 -0
- package/dist/esm/badge/badge.definition-async.d.ts +10 -0
- package/dist/esm/badge/badge.definition-async.js +14 -0
- package/dist/esm/badge/badge.definition-async.js.map +1 -0
- package/dist/esm/badge/badge.styles.css +268 -0
- package/dist/esm/badge/badge.template.html +5 -0
- package/dist/esm/badge/define-async.d.ts +1 -0
- package/dist/esm/badge/define-async.js +5 -0
- package/dist/esm/badge/define-async.js.map +1 -0
- package/dist/esm/button/button.definition-async.d.ts +10 -0
- package/dist/esm/button/button.definition-async.js +14 -0
- package/dist/esm/button/button.definition-async.js.map +1 -0
- package/dist/esm/button/button.styles.css +267 -0
- package/dist/esm/button/button.template.html +12 -0
- package/dist/esm/button/define-async.d.ts +1 -0
- package/dist/esm/button/define-async.js +5 -0
- package/dist/esm/button/define-async.js.map +1 -0
- package/dist/esm/checkbox/checkbox.base.js +9 -7
- package/dist/esm/checkbox/checkbox.base.js.map +1 -1
- package/dist/esm/checkbox/checkbox.definition-async.d.ts +10 -0
- package/dist/esm/checkbox/checkbox.definition-async.js +14 -0
- package/dist/esm/checkbox/checkbox.definition-async.js.map +1 -0
- package/dist/esm/checkbox/checkbox.styles.css +168 -0
- package/dist/esm/checkbox/checkbox.template.html +24 -0
- package/dist/esm/checkbox/define-async.d.ts +1 -0
- package/dist/esm/checkbox/define-async.js +5 -0
- package/dist/esm/checkbox/define-async.js.map +1 -0
- package/dist/esm/compound-button/compound-button.definition-async.d.ts +10 -0
- package/dist/esm/compound-button/compound-button.definition-async.js +14 -0
- package/dist/esm/compound-button/compound-button.definition-async.js.map +1 -0
- package/dist/esm/compound-button/compound-button.styles.css +372 -0
- package/dist/esm/compound-button/compound-button.template.html +13 -0
- package/dist/esm/compound-button/define-async.d.ts +1 -0
- package/dist/esm/compound-button/define-async.js +5 -0
- package/dist/esm/compound-button/define-async.js.map +1 -0
- package/dist/esm/counter-badge/counter-badge.definition-async.d.ts +10 -0
- package/dist/esm/counter-badge/counter-badge.definition-async.js +14 -0
- package/dist/esm/counter-badge/counter-badge.definition-async.js.map +1 -0
- package/dist/esm/counter-badge/counter-badge.styles.css +177 -0
- package/dist/esm/counter-badge/counter-badge.template.html +5 -0
- package/dist/esm/counter-badge/define-async.d.ts +1 -0
- package/dist/esm/counter-badge/define-async.js +5 -0
- package/dist/esm/counter-badge/define-async.js.map +1 -0
- package/dist/esm/dialog/define-async.d.ts +1 -0
- package/dist/esm/dialog/define-async.js +5 -0
- package/dist/esm/dialog/define-async.js.map +1 -0
- package/dist/esm/dialog/dialog.definition-async.d.ts +10 -0
- package/dist/esm/dialog/dialog.definition-async.js +14 -0
- package/dist/esm/dialog/dialog.definition-async.js.map +1 -0
- package/dist/esm/dialog/dialog.styles.css +86 -0
- package/dist/esm/dialog/dialog.template.html +16 -0
- package/dist/esm/dialog-body/define-async.d.ts +1 -0
- package/dist/esm/dialog-body/define-async.js +5 -0
- package/dist/esm/dialog-body/define-async.js.map +1 -0
- package/dist/esm/dialog-body/dialog-body.definition-async.d.ts +10 -0
- package/dist/esm/dialog-body/dialog-body.definition-async.js +14 -0
- package/dist/esm/dialog-body/dialog-body.definition-async.js.map +1 -0
- package/dist/esm/dialog-body/dialog-body.styles.css +87 -0
- package/dist/esm/dialog-body/dialog-body.template.html +11 -0
- package/dist/esm/divider/define-async.d.ts +1 -0
- package/dist/esm/divider/define-async.js +5 -0
- package/dist/esm/divider/define-async.js.map +1 -0
- package/dist/esm/divider/divider.definition-async.d.ts +10 -0
- package/dist/esm/divider/divider.definition-async.js +14 -0
- package/dist/esm/divider/divider.definition-async.js.map +1 -0
- package/dist/esm/divider/divider.styles.css +119 -0
- package/dist/esm/divider/divider.template.html +1 -0
- package/dist/esm/drawer/define-async.d.ts +1 -0
- package/dist/esm/drawer/define-async.js +5 -0
- package/dist/esm/drawer/define-async.js.map +1 -0
- package/dist/esm/drawer/drawer.definition-async.d.ts +10 -0
- package/dist/esm/drawer/drawer.definition-async.js +14 -0
- package/dist/esm/drawer/drawer.definition-async.js.map +1 -0
- package/dist/esm/drawer/drawer.styles.css +130 -0
- package/dist/esm/drawer/drawer.template.html +18 -0
- package/dist/esm/drawer-body/define-async.d.ts +1 -0
- package/dist/esm/drawer-body/define-async.js +5 -0
- package/dist/esm/drawer-body/define-async.js.map +1 -0
- package/dist/esm/drawer-body/drawer-body.definition-async.d.ts +10 -0
- package/dist/esm/drawer-body/drawer-body.definition-async.js +14 -0
- package/dist/esm/drawer-body/drawer-body.definition-async.js.map +1 -0
- package/dist/esm/drawer-body/drawer-body.styles.css +33 -0
- package/dist/esm/drawer-body/drawer-body.template.html +12 -0
- package/dist/esm/dropdown/define-async.d.ts +1 -0
- package/dist/esm/dropdown/define-async.js +5 -0
- package/dist/esm/dropdown/define-async.js.map +1 -0
- package/dist/esm/dropdown/dropdown.base.js +5 -4
- package/dist/esm/dropdown/dropdown.base.js.map +1 -1
- package/dist/esm/dropdown/dropdown.definition-async.d.ts +10 -0
- package/dist/esm/dropdown/dropdown.definition-async.js +14 -0
- package/dist/esm/dropdown/dropdown.definition-async.js.map +1 -0
- package/dist/esm/dropdown/dropdown.styles.css +221 -0
- package/dist/esm/dropdown/dropdown.template.html +21 -0
- package/dist/esm/field/define-async.d.ts +1 -0
- package/dist/esm/field/define-async.js +5 -0
- package/dist/esm/field/define-async.js.map +1 -0
- package/dist/esm/field/field.definition-async.d.ts +10 -0
- package/dist/esm/field/field.definition-async.js +17 -0
- package/dist/esm/field/field.definition-async.js.map +1 -0
- package/dist/esm/field/field.styles.css +121 -0
- package/dist/esm/field/field.template.html +12 -0
- package/dist/esm/image/define-async.d.ts +1 -0
- package/dist/esm/image/define-async.js +5 -0
- package/dist/esm/image/define-async.js.map +1 -0
- package/dist/esm/image/image.definition-async.d.ts +10 -0
- package/dist/esm/image/image.definition-async.js +14 -0
- package/dist/esm/image/image.definition-async.js.map +1 -0
- package/dist/esm/image/image.styles.css +51 -0
- package/dist/esm/image/image.template.html +1 -0
- package/dist/esm/label/define-async.d.ts +1 -0
- package/dist/esm/label/define-async.js +5 -0
- package/dist/esm/label/define-async.js.map +1 -0
- package/dist/esm/label/label.definition-async.d.ts +10 -0
- package/dist/esm/label/label.definition-async.js +14 -0
- package/dist/esm/label/label.definition-async.js.map +1 -0
- package/dist/esm/label/label.styles.css +36 -0
- package/dist/esm/label/label.template.html +4 -0
- package/dist/esm/link/define-async.d.ts +1 -0
- package/dist/esm/link/define-async.js +5 -0
- package/dist/esm/link/define-async.js.map +1 -0
- package/dist/esm/link/link.definition-async.d.ts +10 -0
- package/dist/esm/link/link.definition-async.js +14 -0
- package/dist/esm/link/link.definition-async.js.map +1 -0
- package/dist/esm/link/link.styles.css +68 -0
- package/dist/esm/link/link.template.html +9 -0
- package/dist/esm/listbox/define-async.d.ts +1 -0
- package/dist/esm/listbox/define-async.js +5 -0
- package/dist/esm/listbox/define-async.js.map +1 -0
- package/dist/esm/listbox/listbox.definition-async.d.ts +10 -0
- package/dist/esm/listbox/listbox.definition-async.js +14 -0
- package/dist/esm/listbox/listbox.definition-async.js.map +1 -0
- package/dist/esm/listbox/listbox.styles.css +51 -0
- package/dist/esm/listbox/listbox.template.html +8 -0
- package/dist/esm/menu/define-async.d.ts +1 -0
- package/dist/esm/menu/define-async.js +5 -0
- package/dist/esm/menu/define-async.js.map +1 -0
- package/dist/esm/menu/menu.definition-async.d.ts +10 -0
- package/dist/esm/menu/menu.definition-async.js +14 -0
- package/dist/esm/menu/menu.definition-async.js.map +1 -0
- package/dist/esm/menu/menu.styles.css +53 -0
- package/dist/esm/menu/menu.template.html +7 -0
- package/dist/esm/menu/menu.template.js +1 -7
- package/dist/esm/menu/menu.template.js.map +1 -1
- package/dist/esm/menu-button/define-async.d.ts +1 -0
- package/dist/esm/menu-button/define-async.js +5 -0
- package/dist/esm/menu-button/define-async.js.map +1 -0
- package/dist/esm/menu-button/menu-button.definition-async.d.ts +10 -0
- package/dist/esm/menu-button/menu-button.definition-async.js +14 -0
- package/dist/esm/menu-button/menu-button.definition-async.js.map +1 -0
- package/dist/esm/menu-button/menu-button.definition.js +1 -1
- package/dist/esm/menu-button/menu-button.definition.js.map +1 -1
- package/dist/esm/menu-button/menu-button.styles.css +267 -0
- package/dist/esm/menu-button/menu-button.styles.d.ts +6 -0
- package/dist/esm/menu-button/menu-button.styles.js +8 -0
- package/dist/esm/menu-button/menu-button.styles.js.map +1 -0
- package/dist/esm/menu-button/menu-button.template.html +16 -0
- package/dist/esm/menu-item/define-async.d.ts +1 -0
- package/dist/esm/menu-item/define-async.js +5 -0
- package/dist/esm/menu-item/define-async.js.map +1 -0
- package/dist/esm/menu-item/menu-item.definition-async.d.ts +10 -0
- package/dist/esm/menu-item/menu-item.definition-async.js +14 -0
- package/dist/esm/menu-item/menu-item.definition-async.js.map +1 -0
- package/dist/esm/menu-item/menu-item.styles.css +152 -0
- package/dist/esm/menu-item/menu-item.template.html +19 -0
- package/dist/esm/menu-list/define-async.d.ts +1 -0
- package/dist/esm/menu-list/define-async.js +5 -0
- package/dist/esm/menu-list/define-async.js.map +1 -0
- package/dist/esm/menu-list/menu-list.base.js +3 -0
- package/dist/esm/menu-list/menu-list.base.js.map +1 -1
- package/dist/esm/menu-list/menu-list.definition-async.d.ts +10 -0
- package/dist/esm/menu-list/menu-list.definition-async.js +14 -0
- package/dist/esm/menu-list/menu-list.definition-async.js.map +1 -0
- package/dist/esm/menu-list/menu-list.styles.css +16 -0
- package/dist/esm/menu-list/menu-list.template.html +5 -0
- package/dist/esm/menu-list/menu-list.template.js +1 -1
- package/dist/esm/menu-list/menu-list.template.js.map +1 -1
- package/dist/esm/message-bar/define-async.d.ts +1 -0
- package/dist/esm/message-bar/define-async.js +5 -0
- package/dist/esm/message-bar/define-async.js.map +1 -0
- package/dist/esm/message-bar/message-bar.definition-async.d.ts +10 -0
- package/dist/esm/message-bar/message-bar.definition-async.js +14 -0
- package/dist/esm/message-bar/message-bar.definition-async.js.map +1 -0
- package/dist/esm/message-bar/message-bar.styles.css +98 -0
- package/dist/esm/message-bar/message-bar.template.html +8 -0
- package/dist/esm/option/define-async.d.ts +1 -0
- package/dist/esm/option/define-async.js +5 -0
- package/dist/esm/option/define-async.js.map +1 -0
- package/dist/esm/option/option.definition-async.d.ts +10 -0
- package/dist/esm/option/option.definition-async.js +14 -0
- package/dist/esm/option/option.definition-async.js.map +1 -0
- package/dist/esm/option/option.styles.css +131 -0
- package/dist/esm/option/option.template.html +21 -0
- package/dist/esm/progress-bar/define-async.d.ts +1 -0
- package/dist/esm/progress-bar/define-async.js +5 -0
- package/dist/esm/progress-bar/define-async.js.map +1 -0
- package/dist/esm/progress-bar/progress-bar.definition-async.d.ts +10 -0
- package/dist/esm/progress-bar/progress-bar.definition-async.js +14 -0
- package/dist/esm/progress-bar/progress-bar.definition-async.js.map +1 -0
- package/dist/esm/progress-bar/progress-bar.styles.css +99 -0
- package/dist/esm/progress-bar/progress-bar.template.html +3 -0
- package/dist/esm/radio/define-async.d.ts +1 -0
- package/dist/esm/radio/define-async.js +5 -0
- package/dist/esm/radio/define-async.js.map +1 -0
- package/dist/esm/radio/radio.definition-async.d.ts +10 -0
- package/dist/esm/radio/radio.definition-async.js +14 -0
- package/dist/esm/radio/radio.definition-async.js.map +1 -0
- package/dist/esm/radio/radio.styles.css +115 -0
- package/dist/esm/radio/radio.template.html +11 -0
- package/dist/esm/radio-group/define-async.d.ts +1 -0
- package/dist/esm/radio-group/define-async.js +5 -0
- package/dist/esm/radio-group/define-async.js.map +1 -0
- package/dist/esm/radio-group/radio-group.definition-async.d.ts +10 -0
- package/dist/esm/radio-group/radio-group.definition-async.js +14 -0
- package/dist/esm/radio-group/radio-group.definition-async.js.map +1 -0
- package/dist/esm/radio-group/radio-group.styles.css +41 -0
- package/dist/esm/radio-group/radio-group.template.html +12 -0
- package/dist/esm/rating-display/define-async.d.ts +1 -0
- package/dist/esm/rating-display/define-async.js +5 -0
- package/dist/esm/rating-display/define-async.js.map +1 -0
- package/dist/esm/rating-display/rating-display.definition-async.d.ts +10 -0
- package/dist/esm/rating-display/rating-display.definition-async.js +14 -0
- package/dist/esm/rating-display/rating-display.definition-async.js.map +1 -0
- package/dist/esm/rating-display/rating-display.styles.css +140 -0
- package/dist/esm/rating-display/rating-display.template.html +6 -0
- package/dist/esm/slider/define-async.d.ts +1 -0
- package/dist/esm/slider/define-async.js +5 -0
- package/dist/esm/slider/define-async.js.map +1 -0
- package/dist/esm/slider/slider.definition-async.d.ts +10 -0
- package/dist/esm/slider/slider.definition-async.js +14 -0
- package/dist/esm/slider/slider.definition-async.js.map +1 -0
- package/dist/esm/slider/slider.styles.css +189 -0
- package/dist/esm/slider/slider.template.html +17 -0
- package/dist/esm/spinner/define-async.d.ts +1 -0
- package/dist/esm/spinner/define-async.js +5 -0
- package/dist/esm/spinner/define-async.js.map +1 -0
- package/dist/esm/spinner/spinner.definition-async.d.ts +10 -0
- package/dist/esm/spinner/spinner.definition-async.js +14 -0
- package/dist/esm/spinner/spinner.definition-async.js.map +1 -0
- package/dist/esm/spinner/spinner.styles.css +155 -0
- package/dist/esm/spinner/spinner.template.html +13 -0
- package/dist/esm/switch/define-async.d.ts +1 -0
- package/dist/esm/switch/define-async.js +5 -0
- package/dist/esm/switch/define-async.js.map +1 -0
- package/dist/esm/switch/switch.definition-async.d.ts +10 -0
- package/dist/esm/switch/switch.definition-async.js +14 -0
- package/dist/esm/switch/switch.definition-async.js.map +1 -0
- package/dist/esm/switch/switch.styles.css +121 -0
- package/dist/esm/switch/switch.template.html +10 -0
- package/dist/esm/tab/define-async.d.ts +1 -0
- package/dist/esm/tab/define-async.js +5 -0
- package/dist/esm/tab/define-async.js.map +1 -0
- package/dist/esm/tab/tab.definition-async.d.ts +10 -0
- package/dist/esm/tab/tab.definition-async.js +14 -0
- package/dist/esm/tab/tab.definition-async.js.map +1 -0
- package/dist/esm/tab/tab.styles.css +118 -0
- package/dist/esm/tab/tab.template.html +7 -0
- package/dist/esm/tablist/define-async.d.ts +1 -0
- package/dist/esm/tablist/define-async.js +5 -0
- package/dist/esm/tablist/define-async.js.map +1 -0
- package/dist/esm/tablist/tablist.definition-async.d.ts +10 -0
- package/dist/esm/tablist/tablist.definition-async.js +14 -0
- package/dist/esm/tablist/tablist.definition-async.js.map +1 -0
- package/dist/esm/tablist/tablist.styles.css +203 -0
- package/dist/esm/tablist/tablist.template.html +9 -0
- package/dist/esm/text/define-async.d.ts +1 -0
- package/dist/esm/text/define-async.js +5 -0
- package/dist/esm/text/define-async.js.map +1 -0
- package/dist/esm/text/text.definition-async.d.ts +10 -0
- package/dist/esm/text/text.definition-async.js +14 -0
- package/dist/esm/text/text.definition-async.js.map +1 -0
- package/dist/esm/text/text.styles.css +104 -0
- package/dist/esm/text/text.template.html +1 -0
- package/dist/esm/text-input/define-async.d.ts +1 -0
- package/dist/esm/text-input/define-async.js +5 -0
- package/dist/esm/text-input/define-async.js.map +1 -0
- package/dist/esm/text-input/text-input.base.d.ts +0 -6
- package/dist/esm/text-input/text-input.base.js +3 -14
- package/dist/esm/text-input/text-input.base.js.map +1 -1
- package/dist/esm/text-input/text-input.definition-async.d.ts +10 -0
- package/dist/esm/text-input/text-input.definition-async.js +17 -0
- package/dist/esm/text-input/text-input.definition-async.js.map +1 -0
- package/dist/esm/text-input/text-input.styles.css +200 -0
- package/dist/esm/text-input/text-input.template.html +38 -0
- package/dist/esm/text-input/text-input.template.js +1 -2
- package/dist/esm/text-input/text-input.template.js.map +1 -1
- package/dist/esm/textarea/define-async.d.ts +1 -0
- package/dist/esm/textarea/define-async.js +5 -0
- package/dist/esm/textarea/define-async.js.map +1 -0
- package/dist/esm/textarea/textarea.base.js +12 -10
- package/dist/esm/textarea/textarea.base.js.map +1 -1
- package/dist/esm/textarea/textarea.definition-async.d.ts +10 -0
- package/dist/esm/textarea/textarea.definition-async.js +17 -0
- package/dist/esm/textarea/textarea.definition-async.js.map +1 -0
- package/dist/esm/textarea/textarea.styles.css +258 -0
- package/dist/esm/textarea/textarea.template.html +29 -0
- package/dist/esm/toggle-button/define-async.d.ts +1 -0
- package/dist/esm/toggle-button/define-async.js +5 -0
- package/dist/esm/toggle-button/define-async.js.map +1 -0
- package/dist/esm/toggle-button/toggle-button.definition-async.d.ts +10 -0
- package/dist/esm/toggle-button/toggle-button.definition-async.js +14 -0
- package/dist/esm/toggle-button/toggle-button.definition-async.js.map +1 -0
- package/dist/esm/toggle-button/toggle-button.js +2 -3
- package/dist/esm/toggle-button/toggle-button.js.map +1 -1
- package/dist/esm/toggle-button/toggle-button.styles.css +358 -0
- package/dist/esm/toggle-button/toggle-button.template.html +12 -0
- package/dist/esm/tooltip/define-async.d.ts +1 -0
- package/dist/esm/tooltip/define-async.js +5 -0
- package/dist/esm/tooltip/define-async.js.map +1 -0
- package/dist/esm/tooltip/tooltip.d.ts +9 -9
- package/dist/esm/tooltip/tooltip.definition-async.d.ts +10 -0
- package/dist/esm/tooltip/tooltip.definition-async.js +14 -0
- package/dist/esm/tooltip/tooltip.definition-async.js.map +1 -0
- package/dist/esm/tooltip/tooltip.js +38 -6
- package/dist/esm/tooltip/tooltip.js.map +1 -1
- package/dist/esm/tooltip/tooltip.styles.css +86 -0
- package/dist/esm/tooltip/tooltip.template.html +1 -0
- package/dist/esm/tree/define-async.d.ts +1 -0
- package/dist/esm/tree/define-async.js +5 -0
- package/dist/esm/tree/define-async.js.map +1 -0
- package/dist/esm/tree/tree.definition-async.d.ts +10 -0
- package/dist/esm/tree/tree.definition-async.js +14 -0
- package/dist/esm/tree/tree.definition-async.js.map +1 -0
- package/dist/esm/tree/tree.styles.css +6 -0
- package/dist/esm/tree/tree.template.html +12 -0
- package/dist/esm/tree/tree.template.js +1 -0
- package/dist/esm/tree/tree.template.js.map +1 -1
- package/dist/esm/tree-item/define-async.d.ts +1 -0
- package/dist/esm/tree-item/define-async.js +5 -0
- package/dist/esm/tree-item/define-async.js.map +1 -0
- package/dist/esm/tree-item/tree-item.base.d.ts +1 -0
- package/dist/esm/tree-item/tree-item.base.js +12 -3
- package/dist/esm/tree-item/tree-item.base.js.map +1 -1
- package/dist/esm/tree-item/tree-item.definition-async.d.ts +10 -0
- package/dist/esm/tree-item/tree-item.definition-async.js +14 -0
- package/dist/esm/tree-item/tree-item.definition-async.js.map +1 -0
- package/dist/esm/tree-item/tree-item.styles.css +157 -0
- package/dist/esm/tree-item/tree-item.template.html +26 -0
- package/dist/esm/tree-item/tree-item.template.js +1 -1
- package/dist/esm/tree-item/tree-item.template.js.map +1 -1
- package/dist/web-components-all.js +140 -110
- package/dist/web-components-all.min.js +11 -11
- package/dist/web-components.d.ts +10 -6
- package/dist/web-components.js +139 -109
- package/dist/web-components.min.js +11 -11
- package/package.json +16 -2
|
@@ -3236,7 +3236,7 @@ function attr(configOrTarget, prop) {
|
|
|
3236
3236
|
return decorator;
|
|
3237
3237
|
}
|
|
3238
3238
|
|
|
3239
|
-
var __awaiter = (
|
|
3239
|
+
var __awaiter = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
3240
3240
|
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3241
3241
|
return new (P || (P = Promise))(function (resolve, reject) {
|
|
3242
3242
|
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
@@ -5276,7 +5276,7 @@ const zIndexFloating = "var(--zIndexFloating)";
|
|
|
5276
5276
|
const zIndexPriority = "var(--zIndexPriority)";
|
|
5277
5277
|
const zIndexDebug = "var(--zIndexDebug)";
|
|
5278
5278
|
|
|
5279
|
-
const styles$
|
|
5279
|
+
const styles$F = css`${display("block")} :host{max-width:fit-content;contain:content}.heading{height:44px;display:grid;position:relative;padding-inline:${spacingHorizontalM} ${spacingHorizontalMNudge};border-radius:${borderRadiusMedium};font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};grid-template-columns:auto auto 1fr auto}.button{appearance:none;background:${colorTransparentBackground};border:none;box-sizing:border-box;color:${colorNeutralForeground1};cursor:pointer;font:inherit;grid-column:auto/span 2;grid-row:1;height:44px;outline:none;padding:0;text-align:start}.button::before{content:'';position:absolute;inset:0px;cursor:pointer;border-radius:${borderRadiusSmall}}:where(.default-marker-collapsed,.default-marker-expanded),::slotted(:is([slot='marker-collapsed'],[slot='marker-expanded'])){display:flex;align-items:center;justify-content:center;pointer-events:none;position:relative;height:100%;padding-inline-end:${spacingHorizontalS};grid-column:1/span 1;grid-row:1}.content{margin:0 ${spacingHorizontalM}}::slotted([slot='start']){display:flex;justify-content:center;align-items:center;padding-right:${spacingHorizontalS};grid-column:2/span 1;grid-row:1}button:focus-visible::after{content:'';position:absolute;inset:0px;cursor:pointer;border-radius:${borderRadiusSmall};outline:none;border:2px solid ${colorStrokeFocus1};box-shadow:inset 0 0 0 1px ${colorStrokeFocus2}}:host([disabled]) .button{color:${colorNeutralForegroundDisabled}}:host([disabled]) svg{filter:invert(89%) sepia(0%) saturate(569%) hue-rotate(155deg) brightness(88%) contrast(87%)}:host([expanded]) .content{display:block}:host([expanded]) .default-marker-collapsed,:host([expanded]) ::slotted([slot='marker-collapsed']),:host(:not([expanded])) :is(.default-marker-expanded,.content),:host(:not([expanded])) ::slotted([slot='marker-expanded']){display:none}:host([expanded]) ::slotted([slot='marker-expanded']),:host(:not([expanded])) ::slotted([slot='marker-collapsed']){display:flex}.heading{font-size:${fontSizeBase300};line-height:${lineHeightBase300}}:host([size='small']) .heading{font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host([size='large']) .heading{font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='extra-large']) .heading{font-size:${fontSizeBase500};line-height:${lineHeightBase500}}:host([marker-position='end']) ::slotted([slot='start']){grid-column:1/span 1}:host([marker-position='end']) :is(.default-marker-collapsed,.default-marker-expanded){grid-column:4/span 1;padding-inline-start:${spacingHorizontalS};padding-inline-end:0}:host([marker-position='end']) .button{grid-column:2/span 3}:host([block]){max-width:100%}:host([marker-position='end']) .heading{grid-template-columns:auto auto 28px;padding-inline:${spacingHorizontalM}}:host([marker-position='end']:has([slot='start'])) .heading{padding-inline:${spacingHorizontalMNudge} ${spacingHorizontalM}}:host([block][marker-position='end']) .heading{grid-template-columns:auto 1fr}:host([marker-position='end']) :is(.default-marker-collapsed,.default-marker-expanded){grid-column:5/span 1}`;
|
|
5280
5280
|
|
|
5281
5281
|
const chevronRight20Filled = html.partial(`<svg width=20 height=20 viewBox="0 0 20 20" fill=none xmlns=http://www.w3.org/2000/svg class=default-marker-collapsed aria-hidden=true><path d="M7.73271 4.20694C8.03263 3.92125 8.50737 3.93279 8.79306 4.23271L13.7944 9.48318C14.0703 9.77285 14.0703 10.2281 13.7944 10.5178L8.79306 15.7682C8.50737 16.0681 8.03263 16.0797 7.73271 15.794C7.43279 15.5083 7.42125 15.0336 7.70694 14.7336L12.2155 10.0005L7.70694 5.26729C7.42125 4.96737 7.43279 4.49264 7.73271 4.20694Z" fill=currentColor /></svg>`);
|
|
5282
5282
|
const chevronDown20Filled = html.partial(`<svg width=20 height=20 viewBox="0 0 20 20" fill=none xmlns=http://www.w3.org/2000/svg class=default-marker-expanded aria-hidden=true><path d="M15.794 7.73271C16.0797 8.03263 16.0681 8.50737 15.7682 8.79306L10.5178 13.7944C10.2281 14.0703 9.77285 14.0703 9.48318 13.7944L4.23271 8.79306C3.93279 8.50737 3.92125 8.03263 4.20694 7.73271C4.49264 7.43279 4.96737 7.42125 5.26729 7.70694L10.0005 12.2155L14.7336 7.70694C15.0336 7.42125 15.5083 7.43279 15.794 7.73271Z" fill=currentColor /></svg>`);
|
|
@@ -5291,7 +5291,7 @@ const template$F = accordionItemTemplate({
|
|
|
5291
5291
|
const definition$F = AccordionItem.compose({
|
|
5292
5292
|
name: tagName$F,
|
|
5293
5293
|
template: template$F,
|
|
5294
|
-
styles: styles$
|
|
5294
|
+
styles: styles$F
|
|
5295
5295
|
});
|
|
5296
5296
|
|
|
5297
5297
|
definition$F.define(FluentDesignSystem.registry);
|
|
@@ -5358,7 +5358,7 @@ class Accordion extends FASTElement {
|
|
|
5358
5358
|
*/
|
|
5359
5359
|
this.setItems = () => {
|
|
5360
5360
|
waitForConnectedDescendants(this, () => {
|
|
5361
|
-
if (this.slottedAccordionItems
|
|
5361
|
+
if (!this.slottedAccordionItems?.length) {
|
|
5362
5362
|
return;
|
|
5363
5363
|
}
|
|
5364
5364
|
const children = Array.from(this.children);
|
|
@@ -5492,7 +5492,7 @@ __decorateClass$N([
|
|
|
5492
5492
|
observable
|
|
5493
5493
|
], Accordion.prototype, "slottedAccordionItems", 2);
|
|
5494
5494
|
|
|
5495
|
-
const styles$
|
|
5495
|
+
const styles$E = css`${display("flex")} :host{flex-direction:column;width:100%;contain:content}`;
|
|
5496
5496
|
|
|
5497
5497
|
function accordionTemplate() {
|
|
5498
5498
|
return html`<template><slot ${slotted({ property: "slottedAccordionItems", filter: elements() })}></slot></template>`;
|
|
@@ -5502,7 +5502,7 @@ const template$E = accordionTemplate();
|
|
|
5502
5502
|
const definition$E = Accordion.compose({
|
|
5503
5503
|
name: tagName$E,
|
|
5504
5504
|
template: template$E,
|
|
5505
|
-
styles: styles$
|
|
5505
|
+
styles: styles$E
|
|
5506
5506
|
});
|
|
5507
5507
|
|
|
5508
5508
|
definition$E.define(FluentDesignSystem.registry);
|
|
@@ -5805,9 +5805,9 @@ __decorateClass$L([
|
|
|
5805
5805
|
applyMixins(AnchorButton, StartEnd);
|
|
5806
5806
|
|
|
5807
5807
|
const baseButtonStyles = css`${display("inline-flex")} :host{--icon-spacing:${spacingHorizontalSNudge};position:relative;contain:layout style;vertical-align:middle;align-items:center;box-sizing:border-box;justify-content:center;text-align:center;text-decoration-line:none;margin:0;min-height:32px;outline-style:none;background-color:${colorNeutralBackground1};color:${colorNeutralForeground1};border:${strokeWidthThin} solid ${colorNeutralStroke1};padding:0 ${spacingHorizontalM};min-width:96px;border-radius:${borderRadiusMedium};font-size:${fontSizeBase300};font-family:${fontFamilyBase};font-weight:${fontWeightSemibold};line-height:${lineHeightBase300};transition-duration:${durationFaster};transition-property:background,border,color;transition-timing-function:${curveEasyEase};cursor:pointer;user-select:none}.content{display:inherit}:host(:hover){background-color:${colorNeutralBackground1Hover};color:${colorNeutralForeground1Hover};border-color:${colorNeutralStroke1Hover}}:host(:hover:active){background-color:${colorNeutralBackground1Pressed};border-color:${colorNeutralStroke1Pressed};color:${colorNeutralForeground1Pressed};outline-style:none}:host(:focus-visible){border-color:${colorTransparentStroke};outline:${strokeWidthThick} solid ${colorTransparentStroke};box-shadow:${shadow4},0 0 0 2px ${colorStrokeFocus2}}@media screen and (prefers-reduced-motion:reduce){:host{transition-duration:0.01ms}}::slotted(svg){font-size:20px;height:20px;width:20px;fill:currentColor}::slotted([slot='start']){margin-inline-end:var(--icon-spacing)}::slotted([slot='end']),[slot='end']{flex-shrink:0;margin-inline-start:var(--icon-spacing)}:host([icon-only]){min-width:32px;max-width:32px}:host([size='small']){--icon-spacing:${spacingHorizontalXS};min-height:24px;min-width:64px;padding:0 ${spacingHorizontalS};border-radius:${borderRadiusSmall};font-size:${fontSizeBase200};line-height:${lineHeightBase200};font-weight:${fontWeightRegular}}:host([size='small'][icon-only]){min-width:24px;max-width:24px}:host([size='large']){min-height:40px;border-radius:${borderRadiusLarge};padding:0 ${spacingHorizontalL};font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='large'][icon-only]){min-width:40px;max-width:40px}:host([size='large']) ::slotted(svg){font-size:24px;height:24px;width:24px}:host(:is([shape='circular'],[shape='circular']:focus-visible)){border-radius:${borderRadiusCircular}}:host(:is([shape='square'],[shape='square']:focus-visible)){border-radius:${borderRadiusNone}}:host([appearance='primary']){background-color:${colorBrandBackground};color:${colorNeutralForegroundOnBrand};border-color:transparent}:host([appearance='primary']:hover){background-color:${colorBrandBackgroundHover}}:host([appearance='primary']:is(:hover,:hover:active):not(:focus-visible)){border-color:transparent}:host([appearance='primary']:is(:hover,:hover:active)){color:${colorNeutralForegroundOnBrand}}:host([appearance='primary']:hover:active){background-color:${colorBrandBackgroundPressed}}:host([appearance='primary']:focus-visible){border-color:${colorNeutralForegroundOnBrand};box-shadow:${shadow2},0 0 0 2px ${colorStrokeFocus2}}:host([appearance='outline']){background-color:${colorTransparentBackground}}:host([appearance='outline']:hover){background-color:${colorTransparentBackgroundHover}}:host([appearance='outline']:hover:active){background-color:${colorTransparentBackgroundPressed}}:host([appearance='subtle']){background-color:${colorSubtleBackground};color:${colorNeutralForeground2};border-color:transparent}:host([appearance='subtle']:hover){background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground2Hover};border-color:transparent}:host([appearance='subtle']:hover:active){background-color:${colorSubtleBackgroundPressed};color:${colorNeutralForeground2Pressed};border-color:transparent}:host([appearance='subtle']:hover) ::slotted(svg){fill:${colorNeutralForeground2BrandHover}}:host([appearance='subtle']:hover:active) ::slotted(svg){fill:${colorNeutralForeground2BrandPressed}}:host([appearance='transparent']){background-color:${colorTransparentBackground};color:${colorNeutralForeground2}}:host([appearance='transparent']:hover){background-color:${colorTransparentBackgroundHover};color:${colorNeutralForeground2BrandHover}}:host([appearance='transparent']:hover:active){background-color:${colorTransparentBackgroundPressed};color:${colorNeutralForeground2BrandPressed}}:host(:is([appearance='transparent'],[appearance='transparent']:is(:hover,:active))){border-color:transparent}`;
|
|
5808
|
-
const styles$
|
|
5808
|
+
const styles$D = css`${baseButtonStyles} :host(:is(:disabled,[disabled-focusable],[appearance]:disabled,[appearance][disabled-focusable])),:host(:is(:disabled,[disabled-focusable],[appearance]:disabled,[appearance][disabled-focusable]):hover),:host(:is(:disabled,[disabled-focusable],[appearance]:disabled,[appearance][disabled-focusable]):hover:active){background-color:${colorNeutralBackgroundDisabled};border-color:${colorNeutralStrokeDisabled};color:${colorNeutralForegroundDisabled};cursor:not-allowed}:host([appearance='primary']:is(:disabled,[disabled-focusable])),:host([appearance='primary']:is(:disabled,[disabled-focusable]):is(:hover,:hover:active)){border-color:transparent}:host([appearance='outline']:is(:disabled,[disabled-focusable])),:host([appearance='outline']:is(:disabled,[disabled-focusable]):is(:hover,:hover:active)){background-color:${colorTransparentBackground}}:host([appearance='subtle']:is(:disabled,[disabled-focusable])),:host([appearance='subtle']:is(:disabled,[disabled-focusable]):is(:hover,:hover:active)){background-color:${colorTransparentBackground};border-color:transparent}:host([appearance='transparent']:is(:disabled,[disabled-focusable])),:host([appearance='transparent']:is(:disabled,[disabled-focusable]):is(:hover,:hover:active)){border-color:transparent;background-color:${colorTransparentBackground}}@media (forced-colors:active){:host{background-color:ButtonFace;color:ButtonText}:host(:is(:hover,:focus-visible)){border-color:Highlight !important}:host([appearance='primary']:not(:is(:hover,:focus-visible))){background-color:Highlight;color:HighlightText;forced-color-adjust:none}:host(:is(:disabled,[disabled-focusable],[appearance]:disabled,[appearance][disabled-focusable])){background-color:ButtonFace;color:GrayText;border-color:ButtonText}}`;
|
|
5809
5809
|
|
|
5810
|
-
const styles$
|
|
5810
|
+
const styles$C = css`${baseButtonStyles} ::slotted(a){position:absolute;inset:0}@media (forced-colors:active){:host{border-color:LinkText;color:LinkText}}`;
|
|
5811
5811
|
|
|
5812
5812
|
function anchorTemplate$1(options = {}) {
|
|
5813
5813
|
return html`<template tabindex=0 @click=${(x, c) => x.clickHandler(c.event)} @keydown=${(x, c) => x.keydownHandler(c.event)}>${startSlotTemplate(options)} <span class=content part=content><slot></slot></span>${endSlotTemplate(options)}</template>`;
|
|
@@ -5817,7 +5817,7 @@ const template$D = anchorTemplate$1();
|
|
|
5817
5817
|
const definition$D = AnchorButton.compose({
|
|
5818
5818
|
name: tagName$C,
|
|
5819
5819
|
template: template$D,
|
|
5820
|
-
styles: styles$
|
|
5820
|
+
styles: styles$C
|
|
5821
5821
|
});
|
|
5822
5822
|
|
|
5823
5823
|
definition$D.define(FluentDesignSystem.registry);
|
|
@@ -6166,7 +6166,7 @@ const animations = {
|
|
|
6166
6166
|
normalEase: curveEasyEase,
|
|
6167
6167
|
nullEasing: curveLinear
|
|
6168
6168
|
};
|
|
6169
|
-
const styles$
|
|
6169
|
+
const styles$B = css`${display("inline-grid")} :host{position:relative;place-items:center;place-content:center;grid-template:1fr/1fr;flex-shrink:0;width:32px;height:32px;font-family:${fontFamilyBase};font-weight:${fontWeightSemibold};font-size:${fontSizeBase300};border-radius:${borderRadiusCircular};color:${colorNeutralForeground3};background-color:${colorNeutralBackground6};contain:layout style}.monogram,.default-icon{grid-area:1/1/-1/-1}.monogram:empty{display:none}.default-slot:is(.has-slotted,:has-slotted)~.default-icon,.default-slot:is(.has-slotted,:has-slotted)~.monogram,:host(:is([name]):not([name=''])) .default-icon,:host(:is([initials]):not([initials=''])) .default-icon{display:none}.default-icon,::slotted(svg){width:20px;height:20px;font-size:20px}::slotted(img){box-sizing:border-box;width:100%;height:100%;border-radius:${borderRadiusCircular}}::slotted([slot='badge']){position:absolute;bottom:0;right:0;box-shadow:0 0 0 ${strokeWidthThin} ${colorNeutralBackground1}}:host([size='64']) ::slotted([slot='badge']),:host([size='72']) ::slotted([slot='badge']),:host([size='96']) ::slotted([slot='badge']),:host([size='120']) ::slotted([slot='badge']),:host([size='128']) ::slotted([slot='badge']){box-shadow:0 0 0 ${strokeWidthThick} ${colorNeutralBackground1}}:host([size='16']),:host([size='20']),:host([size='24']){font-size:${fontSizeBase100};font-weight:${fontWeightRegular}}:host([size='16']){width:16px;height:16px}:host([size='20']){width:20px;height:20px}:host([size='24']){width:24px;height:24px}:host([size='16']) .default-icon,:host([size='16']) ::slotted(svg){width:12px;height:12px;font-size:12px}:host([size='20']) .default-icon,:host([size='24']) .default-icon,:host([size='20']) ::slotted(svg),:host([size='24']) ::slotted(svg){width:16px;height:16px;font-size:16px}:host([size='28']){width:28px;height:28px;font-size:${fontSizeBase200}}:host([size='36']){width:36px;height:36px}:host([size='40']){width:40px;height:40px}:host([size='48']),:host([size='56']){font-size:${fontSizeBase400}}:host([size='48']){width:48px;height:48px}:host([size='48']) .default-icon,:host([size='48']) ::slotted(svg){width:24px;height:24px;font-size:24px}:host([size='56']){width:56px;height:56px}:host([size='56']) .default-icon,:host([size='56']) ::slotted(svg){width:28px;height:28px;font-size:28px}:host([size='64']),:host([size='72']),:host([size='96']){font-size:${fontSizeBase500}}:host([size='64']) .default-icon,:host([size='72']) .default-icon,:host([size='64']) ::slotted(svg),:host([size='72']) ::slotted(svg){width:32px;height:32px;font-size:32px}:host([size='64']){width:64px;height:64px}:host([size='72']){width:72px;height:72px}:host([size='96']){width:96px;height:96px}:host([size='96']) .default-icon,:host([size='120']) .default-icon,:host([size='128']) .default-icon,:host([size='96']) ::slotted(svg),:host([size='120']) ::slotted(svg),:host([size='128']) ::slotted(svg){width:48px;height:48px;font-size:48px}:host([size='120']),:host([size='128']){font-size:${fontSizeBase600}}:host([size='120']){width:120px;height:120px}:host([size='128']){width:128px;height:128px}:host([shape='square']){border-radius:${borderRadiusMedium}}:host([shape='square'][size='20']),:host([shape='square'][size='24']){border-radius:${borderRadiusSmall}}:host([shape='square'][size='56']),:host([shape='square'][size='64']),:host([shape='square'][size='72']){border-radius:${borderRadiusLarge}}:host([shape='square'][size='96']),:host([shape='square'][size='120']),:host([shape='square'][size='128']){border-radius:${borderRadiusXLarge}}:host([data-color='brand']){color:${colorNeutralForegroundStaticInverted};background-color:${colorBrandBackgroundStatic}}:host([data-color='dark-red']){color:${colorPaletteDarkRedForeground2};background-color:${colorPaletteDarkRedBackground2}}:host([data-color='cranberry']){color:${colorPaletteCranberryForeground2};background-color:${colorPaletteCranberryBackground2}}:host([data-color='red']){color:${colorPaletteRedForeground2};background-color:${colorPaletteRedBackground2}}:host([data-color='pumpkin']){color:${colorPalettePumpkinForeground2};background-color:${colorPalettePumpkinBackground2}}:host([data-color='peach']){color:${colorPalettePeachForeground2};background-color:${colorPalettePeachBackground2}}:host([data-color='marigold']){color:${colorPaletteMarigoldForeground2};background-color:${colorPaletteMarigoldBackground2}}:host([data-color='gold']){color:${colorPaletteGoldForeground2};background-color:${colorPaletteGoldBackground2}}:host([data-color='brass']){color:${colorPaletteBrassForeground2};background-color:${colorPaletteBrassBackground2}}:host([data-color='brown']){color:${colorPaletteBrownForeground2};background-color:${colorPaletteBrownBackground2}}:host([data-color='forest']){color:${colorPaletteForestForeground2};background-color:${colorPaletteForestBackground2}}:host([data-color='seafoam']){color:${colorPaletteSeafoamForeground2};background-color:${colorPaletteSeafoamBackground2}}:host([data-color='dark-green']){color:${colorPaletteDarkGreenForeground2};background-color:${colorPaletteDarkGreenBackground2}}:host([data-color='light-teal']){color:${colorPaletteLightTealForeground2};background-color:${colorPaletteLightTealBackground2}}:host([data-color='teal']){color:${colorPaletteTealForeground2};background-color:${colorPaletteTealBackground2}}:host([data-color='steel']){color:${colorPaletteSteelForeground2};background-color:${colorPaletteSteelBackground2}}:host([data-color='blue']){color:${colorPaletteBlueForeground2};background-color:${colorPaletteBlueBackground2}}:host([data-color='royal-blue']){color:${colorPaletteRoyalBlueForeground2};background-color:${colorPaletteRoyalBlueBackground2}}:host([data-color='cornflower']){color:${colorPaletteCornflowerForeground2};background-color:${colorPaletteCornflowerBackground2}}:host([data-color='navy']){color:${colorPaletteNavyForeground2};background-color:${colorPaletteNavyBackground2}}:host([data-color='lavender']){color:${colorPaletteLavenderForeground2};background-color:${colorPaletteLavenderBackground2}}:host([data-color='purple']){color:${colorPalettePurpleForeground2};background-color:${colorPalettePurpleBackground2}}:host([data-color='grape']){color:${colorPaletteGrapeForeground2};background-color:${colorPaletteGrapeBackground2}}:host([data-color='lilac']){color:${colorPaletteLilacForeground2};background-color:${colorPaletteLilacBackground2}}:host([data-color='pink']){color:${colorPalettePinkForeground2};background-color:${colorPalettePinkBackground2}}:host([data-color='magenta']){color:${colorPaletteMagentaForeground2};background-color:${colorPaletteMagentaBackground2}}:host([data-color='plum']){color:${colorPalettePlumForeground2};background-color:${colorPalettePlumBackground2}}:host([data-color='beige']){color:${colorPaletteBeigeForeground2};background-color:${colorPaletteBeigeBackground2}}:host([data-color='mink']){color:${colorPaletteMinkForeground2};background-color:${colorPaletteMinkBackground2}}:host([data-color='platinum']){color:${colorPalettePlatinumForeground2};background-color:${colorPalettePlatinumBackground2}}:host([data-color='anchor']){color:${colorPaletteAnchorForeground2};background-color:${colorPaletteAnchorBackground2}}:host([active]){transform:perspective(1px);transition-property:transform,opacity;transition-duration:${durationUltraSlow},${durationFaster};transition-delay:${animations.fastEase},${animations.nullEasing}}:host([active])::before{content:'';position:absolute;top:0;left:0;bottom:0;right:0;border-radius:inherit;transition-property:margin,opacity;transition-duration:${durationUltraSlow},${durationSlower};transition-delay:${animations.fastEase},${animations.nullEasing}}:host([active])::before{box-shadow:${shadow8};border-style:solid;border-color:${colorBrandBackgroundStatic}}:host([active][appearance='shadow'])::before{border-style:none;border-color:none}:host([active]:not([appearance='shadow']))::before{margin:calc(-2 * ${strokeWidthThick});border-width:${strokeWidthThick}}:host([size='56'][active]:not([appearance='shadow']))::before,:host([size='64'][active]:not([appearance='shadow']))::before{margin:calc(-2 * ${strokeWidthThicker});border-width:${strokeWidthThicker}}:host([size='72'][active]:not([appearance='shadow']))::before,:host([size='96'][active]:not([appearance='shadow']))::before,:host([size='120'][active]:not([appearance='shadow']))::before,:host([size='128'][active]:not([appearance='shadow']))::before{margin:calc(-2 * ${strokeWidthThickest});border-width:${strokeWidthThickest}}:host([size='20'][active][appearance])::before,:host([size='24'][active][appearance])::before,:host([size='28'][active][appearance])::before{box-shadow:${shadow4}}:host([size='56'][active][appearance])::before,:host([size='64'][active][appearance])::before{box-shadow:${shadow16}}:host([size='72'][active][appearance])::before,:host([size='96'][active][appearance])::before,:host([size='120'][active][appearance])::before,:host([size='128'][active][appearance])::before{box-shadow:${shadow28}}:host([active][appearance='ring'])::before{box-shadow:none}:host([active='inactive']){opacity:0.8;transform:scale(0.875);transition-property:transform,opacity;transition-duration:${durationUltraSlow},${durationFaster};transition-delay:${animations.fastOutSlowInMin},${animations.nullEasing}}:host([active='inactive'])::before{margin:0;opacity:0;transition-property:margin,opacity;transition-duration:${durationUltraSlow},${durationSlower};transition-delay:${animations.fastOutSlowInMin},${animations.nullEasing}}@media screen and (prefers-reduced-motion:reduce){:host([active]){transition-duration:0.01ms}:host([active])::before{transition-duration:0.01ms;transition-delay:0.01ms}}`;
|
|
6170
6170
|
|
|
6171
6171
|
const defaultIconTemplate = html`<svg width=1em height=1em viewBox="0 0 20 20" class=default-icon fill=currentcolor aria-hidden=true><path d="M10 2a4 4 0 100 8 4 4 0 000-8zM7 6a3 3 0 116 0 3 3 0 01-6 0zm-2 5a2 2 0 00-2 2c0 1.7.83 2.97 2.13 3.8A9.14 9.14 0 0010 18c1.85 0 3.58-.39 4.87-1.2A4.35 4.35 0 0017 13a2 2 0 00-2-2H5zm-1 2a1 1 0 011-1h10a1 1 0 011 1c0 1.3-.62 2.28-1.67 2.95A8.16 8.16 0 0110 17a8.16 8.16 0 01-4.33-1.05A3.36 3.36 0 014 13z"></path></svg>`;
|
|
6172
6172
|
function avatarTemplate() {
|
|
@@ -6177,7 +6177,7 @@ const template$C = avatarTemplate();
|
|
|
6177
6177
|
const definition$C = Avatar.compose({
|
|
6178
6178
|
name: tagName$B,
|
|
6179
6179
|
template: template$C,
|
|
6180
|
-
styles: styles$
|
|
6180
|
+
styles: styles$B
|
|
6181
6181
|
});
|
|
6182
6182
|
|
|
6183
6183
|
definition$C.define(FluentDesignSystem.registry);
|
|
@@ -6251,7 +6251,7 @@ const badgeGhostStyles = css.partial`:host([appearance='ghost']){color:${colorBr
|
|
|
6251
6251
|
const badgeOutlineStyles = css.partial`:host([appearance='outline']){border-color:currentColor;color:${colorBrandForeground1};background-color:initial}:host([appearance='outline'][color='danger']){color:${colorPaletteRedForeground3}}:host([appearance='outline'][color='important']){color:${colorNeutralForeground3};border-color:${colorNeutralStrokeAccessible}}:host([appearance='outline'][color='informative']){color:${colorNeutralForeground3};border-color:${colorNeutralStroke2}}:host([appearance='outline'][color='severe']){color:${colorPaletteDarkOrangeForeground3}}:host([appearance='outline'][color='subtle']){color:${colorNeutralForegroundStaticInverted}}:host([appearance='outline'][color='success']){color:${colorPaletteGreenForeground2}}:host([appearance='outline'][color='warning']){color:${colorPaletteYellowForeground2}}`;
|
|
6252
6252
|
const badgeTintStyles = css.partial`:host([appearance='tint']){background-color:${colorBrandBackground2};color:${colorBrandForeground2};border-color:${colorBrandStroke2}}:host([appearance='tint'][color='danger']){background-color:${colorPaletteRedBackground1};color:${colorPaletteRedForeground1};border-color:${colorPaletteRedBorder1}}:host([appearance='tint'][color='important']){background-color:${colorNeutralForeground3};color:${colorNeutralBackground1};border-color:${colorTransparentStroke}}:host([appearance='tint'][color='informative']){background-color:${colorNeutralBackground4};color:${colorNeutralForeground3};border-color:${colorNeutralStroke2}}:host([appearance='tint'][color='severe']){background-color:${colorPaletteDarkOrangeBackground1};color:${colorPaletteDarkOrangeForeground1};border-color:${colorPaletteDarkOrangeBorder1}}:host([appearance='tint'][color='subtle']){background-color:${colorNeutralBackground1};color:${colorNeutralForeground3};border-color:${colorNeutralStroke2}}:host([appearance='tint'][color='success']){background-color:${colorPaletteGreenBackground1};color:${colorPaletteGreenForeground1};border-color:${colorPaletteGreenBorder2}}:host([appearance='tint'][color='warning']){background-color:${colorPaletteYellowBackground1};color:${colorPaletteYellowForeground2};border-color:${colorPaletteYellowBorder1}}`;
|
|
6253
6253
|
|
|
6254
|
-
const styles$
|
|
6254
|
+
const styles$A = css`:host([shape='square']){border-radius:${borderRadiusNone}}:host([shape='rounded']){border-radius:${borderRadiusMedium}}:host([shape='rounded']:is([size='tiny'],[size='extra-small'],[size='small'])){border-radius:${borderRadiusSmall}}${badgeTintStyles} ${badgeOutlineStyles} ${badgeGhostStyles} ${badgeFilledStyles} ${badgeSizeStyles} ${badgeBaseStyles} @media (forced-colors:active){:host,:host([appearance='outline']),:host([appearance='tint']){border-color:CanvasText}}`;
|
|
6255
6255
|
|
|
6256
6256
|
function badgeTemplate(options = {}) {
|
|
6257
6257
|
return html`${startSlotTemplate(options)}<slot>${staticallyCompose(options.defaultContent)}</slot>${endSlotTemplate(options)}`;
|
|
@@ -6261,7 +6261,7 @@ const template$B = badgeTemplate();
|
|
|
6261
6261
|
const definition$B = Badge.compose({
|
|
6262
6262
|
name: tagName$A,
|
|
6263
6263
|
template: template$B,
|
|
6264
|
-
styles: styles$
|
|
6264
|
+
styles: styles$A
|
|
6265
6265
|
});
|
|
6266
6266
|
|
|
6267
6267
|
definition$B.define(FluentDesignSystem.registry);
|
|
@@ -6576,7 +6576,7 @@ const template$A = buttonTemplate$1();
|
|
|
6576
6576
|
const definition$A = Button.compose({
|
|
6577
6577
|
name: tagName$D,
|
|
6578
6578
|
template: template$A,
|
|
6579
|
-
styles: styles$
|
|
6579
|
+
styles: styles$D
|
|
6580
6580
|
});
|
|
6581
6581
|
|
|
6582
6582
|
definition$A.define(FluentDesignSystem.registry);
|
|
@@ -6709,7 +6709,7 @@ class BaseCheckbox extends FASTElement {
|
|
|
6709
6709
|
* @internal
|
|
6710
6710
|
*/
|
|
6711
6711
|
requiredChanged(prev, next) {
|
|
6712
|
-
if (this
|
|
6712
|
+
if (this.elementInternals) {
|
|
6713
6713
|
this.setValidity();
|
|
6714
6714
|
this.elementInternals.ariaRequired = this.required ? "true" : "false";
|
|
6715
6715
|
}
|
|
@@ -6741,7 +6741,7 @@ class BaseCheckbox extends FASTElement {
|
|
|
6741
6741
|
* Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/validationMessage | `ElementInternals.validationMessage`} property.
|
|
6742
6742
|
*/
|
|
6743
6743
|
get validationMessage() {
|
|
6744
|
-
if (this.elementInternals
|
|
6744
|
+
if (this.elementInternals?.validationMessage) {
|
|
6745
6745
|
return this.elementInternals.validationMessage;
|
|
6746
6746
|
}
|
|
6747
6747
|
if (!this._validationFallbackMessage) {
|
|
@@ -6774,11 +6774,11 @@ class BaseCheckbox extends FASTElement {
|
|
|
6774
6774
|
}
|
|
6775
6775
|
set value(value) {
|
|
6776
6776
|
this._value = value;
|
|
6777
|
-
if (this
|
|
6777
|
+
if (this.elementInternals) {
|
|
6778
6778
|
this.setFormValue(value);
|
|
6779
6779
|
this.setValidity();
|
|
6780
|
-
Observable.notify(this, "value");
|
|
6781
6780
|
}
|
|
6781
|
+
Observable.notify(this, "value");
|
|
6782
6782
|
}
|
|
6783
6783
|
/**
|
|
6784
6784
|
* Determines if the control can be submitted for constraint validation.
|
|
@@ -6889,7 +6889,9 @@ class BaseCheckbox extends FASTElement {
|
|
|
6889
6889
|
* @internal
|
|
6890
6890
|
*/
|
|
6891
6891
|
setAriaChecked(value = this.checked) {
|
|
6892
|
-
this.elementInternals
|
|
6892
|
+
if (this.elementInternals) {
|
|
6893
|
+
this.elementInternals.ariaChecked = value ? "true" : "false";
|
|
6894
|
+
}
|
|
6893
6895
|
}
|
|
6894
6896
|
/**
|
|
6895
6897
|
* Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/setFormValue | `ElementInternals.setFormValue()`} method.
|
|
@@ -6897,7 +6899,7 @@ class BaseCheckbox extends FASTElement {
|
|
|
6897
6899
|
* @internal
|
|
6898
6900
|
*/
|
|
6899
6901
|
setFormValue(value, state) {
|
|
6900
|
-
this.elementInternals
|
|
6902
|
+
this.elementInternals?.setFormValue(value, value ?? state);
|
|
6901
6903
|
}
|
|
6902
6904
|
/**
|
|
6903
6905
|
* Sets a custom validity message.
|
|
@@ -6919,7 +6921,7 @@ class BaseCheckbox extends FASTElement {
|
|
|
6919
6921
|
* @internal
|
|
6920
6922
|
*/
|
|
6921
6923
|
setValidity(flags, message, anchor) {
|
|
6922
|
-
if (this
|
|
6924
|
+
if (this.elementInternals) {
|
|
6923
6925
|
if (this.disabled || !this.required) {
|
|
6924
6926
|
this.elementInternals.setValidity({});
|
|
6925
6927
|
return;
|
|
@@ -7062,7 +7064,7 @@ const userInvalidState = stateSelector("user-invalid");
|
|
|
7062
7064
|
const validState = stateSelector("valid");
|
|
7063
7065
|
const valueMissingState = stateSelector("value-missing");
|
|
7064
7066
|
|
|
7065
|
-
const styles$
|
|
7067
|
+
const styles$z = css`${display("inline-flex")} :host{--size:16px;background-color:${colorNeutralBackground1};border-radius:${borderRadiusSmall};border:${strokeWidthThin} solid ${colorNeutralStrokeAccessible};box-sizing:border-box;cursor:pointer;position:relative;width:var(--size)}:host,.indeterminate-indicator,.checked-indicator{aspect-ratio:1}:host(:hover){border-color:${colorNeutralStrokeAccessibleHover}}:host(:active){border-color:${colorNeutralStrokeAccessiblePressed}}:host(${checkedState}:hover){background-color:${colorCompoundBrandBackgroundHover};border-color:${colorCompoundBrandStrokeHover}}:host(${checkedState}:active){background-color:${colorCompoundBrandBackgroundPressed};border-color:${colorCompoundBrandStrokePressed}}:host(:focus-visible){outline:none}:host(:not([slot='input']))::after{content:'';position:absolute;inset:-8px;box-sizing:border-box;outline:none;border:${strokeWidthThick} solid ${colorTransparentStroke};border-radius:${borderRadiusMedium}}:host(:not([slot='input']):focus-visible)::after{border-color:${colorStrokeFocus2}}.indeterminate-indicator,.checked-indicator{color:${colorNeutralForegroundInverted};inset:0;margin:auto;position:absolute}::slotted([slot='checked-indicator']),.checked-indicator{fill:currentColor;display:inline-flex;flex:1 0 auto;width:12px}:host(:not(${checkedState})) *:is(::slotted([slot='checked-indicator']),.checked-indicator){display:none}:host(${checkedState}),:host(${indeterminateState}){border-color:${colorCompoundBrandStroke}}:host(${checkedState}),:host(${indeterminateState}) .indeterminate-indicator{background-color:${colorCompoundBrandBackground}}:host(${indeterminateState}) .indeterminate-indicator{border-radius:${borderRadiusSmall};position:absolute;width:calc(var(--size)/2);inset:0}:host([size='large']){--size:20px}:host([size='large']) ::slotted([slot='checked-indicator']),:host([size='large']) .checked-indicator{width:16px}:host([shape='circular']),:host([shape='circular']) .indeterminate-indicator{border-radius:${borderRadiusCircular}}:host([disabled]),:host([disabled]${checkedState}){background-color:${colorNeutralBackgroundDisabled};border-color:${colorNeutralStrokeDisabled}}:host([disabled]){cursor:unset}:host([disabled]${indeterminateState}) .indeterminate-indicator{background-color:${colorNeutralStrokeDisabled}}:host([disabled]${checkedState}) .checked-indicator{color:${colorNeutralStrokeDisabled}}@media (forced-colors:active){:host{border-color:FieldText}:host(:not([slot='input']:focus-visible))::after{border-color:Canvas}:host(:not([disabled]):hover),:host(${checkedState}:not([disabled]):hover),:host(:not([slot='input']):focus-visible)::after{border-color:Highlight}.indeterminate-indicator,.checked-indicator{color:HighlightText}:host(${checkedState}),:host(${indeterminateState}) .indeterminate-indicator{background-color:FieldText}:host(${checkedState}:not([disabled]):hover),:host(${indeterminateState}:not([disabled]):hover) .indeterminate-indicator{background-color:Highlight}:host([disabled]){border-color:GrayText}:host([disabled]${indeterminateState}) .indeterminate-indicator{background-color:GrayText}:host([disabled]),:host([disabled]${checkedState}) .checked-indicator{color:GrayText}}`;
|
|
7066
7068
|
|
|
7067
7069
|
const checkedIndicator$2 = html.partial(
|
|
7068
7070
|
/* html */
|
|
@@ -7083,7 +7085,7 @@ const template$z = checkboxTemplate({
|
|
|
7083
7085
|
const definition$z = Checkbox.compose({
|
|
7084
7086
|
name: tagName$z,
|
|
7085
7087
|
template: template$z,
|
|
7086
|
-
styles: styles$
|
|
7088
|
+
styles: styles$z
|
|
7087
7089
|
});
|
|
7088
7090
|
|
|
7089
7091
|
definition$z.define(FluentDesignSystem.registry);
|
|
@@ -7096,7 +7098,7 @@ const tagName$y = `${FluentDesignSystem.prefix}-compound-button`;
|
|
|
7096
7098
|
class CompoundButton extends Button {
|
|
7097
7099
|
}
|
|
7098
7100
|
|
|
7099
|
-
const styles$
|
|
7101
|
+
const styles$y = css`${styles$D} :host,:host(:is([size])){gap:12px;height:auto;padding-top:14px;padding-inline:12px;padding-bottom:16px;font-size:${fontSizeBase300};line-height:${lineHeightBase300}}.content{display:flex;flex-direction:column;text-align:start}::slotted([slot='description']){color:${colorNeutralForeground2};line-height:100%;font-size:${fontSizeBase200};font-weight:${fontWeightRegular}}::slotted(svg),:host([size='large']) ::slotted(svg){font-size:40px;height:40px;width:40px}:host(:hover) ::slotted([slot='description']){color:${colorNeutralForeground2Hover}}:host(:active) ::slotted([slot='description']){color:${colorNeutralForeground2Pressed}}:host(:is([appearance='primary'],[appearance='primary']:is(:hover,:active))) ::slotted([slot='description']){color:${colorNeutralForegroundOnBrand}}:host(:is([appearance='transparent'],[appearance='subtle'],[appearance='subtle']:is(:hover,:active))) ::slotted([slot='description']){color:${colorNeutralForeground2}}:host([appearance='transparent']:hover) ::slotted([slot='description']){color:${colorNeutralForeground2BrandHover}}:host([appearance='transparent']:active) ::slotted([slot='description']){color:${colorNeutralForeground2BrandPressed}}:host(:is(:disabled,:disabled[appearance],[disabled-focusable],[disabled-focusable][appearance])) ::slotted([slot='description']){color:${colorNeutralForegroundDisabled}}:host([size='small']){padding:8px;padding-bottom:10px}:host([icon-only]){min-width:52px;max-width:52px;padding:${spacingHorizontalSNudge}}:host([icon-only][size='small']){min-width:48px;max-width:48px;padding:${spacingHorizontalXS}}:host([icon-only][size='large']){min-width:56px;max-width:56px;padding:${spacingHorizontalS}}:host([size='large']){padding-top:18px;padding-inline:16px;padding-bottom:20px;font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='large']) ::slotted([slot='description']){font-size:${fontSizeBase300}}@media (forced-colors:active){:host([appearance='primary']:not(:hover,:focus-visible,:disabled,[disabled-focusable])) ::slotted([slot='description']){color:HighlightText}}`;
|
|
7100
7102
|
|
|
7101
7103
|
function buttonTemplate(options = {}) {
|
|
7102
7104
|
return html`<template @click=${(x, c) => x.clickHandler(c.event)} @keypress=${(x, c) => x.keypressHandler(c.event)}>${startSlotTemplate(options)} <span class=content part=content><slot ${slotted("defaultSlottedContent")}></slot><slot name=description></slot></span>${endSlotTemplate(options)}</template>`;
|
|
@@ -7106,7 +7108,7 @@ const template$y = buttonTemplate();
|
|
|
7106
7108
|
const definition$y = CompoundButton.compose({
|
|
7107
7109
|
name: tagName$y,
|
|
7108
7110
|
template: template$y,
|
|
7109
|
-
styles: styles$
|
|
7111
|
+
styles: styles$y
|
|
7110
7112
|
});
|
|
7111
7113
|
|
|
7112
7114
|
definition$y.define(FluentDesignSystem.registry);
|
|
@@ -7216,7 +7218,7 @@ __decorateClass$C([
|
|
|
7216
7218
|
], CounterBadge.prototype, "size", 2);
|
|
7217
7219
|
applyMixins(CounterBadge, StartEnd);
|
|
7218
7220
|
|
|
7219
|
-
const styles$
|
|
7221
|
+
const styles$x = css`:host([shape='rounded']){border-radius:${borderRadiusMedium}}:host([shape='rounded']:is([size='tiny'],[size='extra-small'],[size='small'])){border-radius:${borderRadiusSmall}}${badgeSizeStyles} ${badgeFilledStyles} ${badgeGhostStyles} ${badgeBaseStyles} :host(:is([dot],[dot][appearance][size])){min-width:auto;width:6px;height:6px;padding:0}`;
|
|
7220
7222
|
|
|
7221
7223
|
function counterBadgeTemplate(options = {}) {
|
|
7222
7224
|
return html`${startSlotTemplate(options)} <span>${(x) => x.displayValue}</span> ${endSlotTemplate(options)}`;
|
|
@@ -7226,7 +7228,7 @@ const template$x = counterBadgeTemplate();
|
|
|
7226
7228
|
const definition$x = CounterBadge.compose({
|
|
7227
7229
|
name: tagName$x,
|
|
7228
7230
|
template: template$x,
|
|
7229
|
-
styles: styles$
|
|
7231
|
+
styles: styles$x
|
|
7230
7232
|
});
|
|
7231
7233
|
|
|
7232
7234
|
definition$x.define(FluentDesignSystem.registry);
|
|
@@ -7386,12 +7388,12 @@ __decorateClass$B([
|
|
|
7386
7388
|
|
|
7387
7389
|
const template$w = html`<dialog class=dialog part=dialog aria-modal=${(x) => x.dialogModal} aria-describedby=${(x) => x.dialogDescribedby} aria-labelledby=${(x) => x.dialogLabelledby} aria-label=${(x) => x.dialogLabel} role=${(x) => x.dialogRole} @click=${(x, c) => x.clickHandler(c.event)} @cancel=${(x) => x.hide()} ${ref("dialog")}><slot></slot></dialog>`;
|
|
7388
7390
|
|
|
7389
|
-
const styles$
|
|
7391
|
+
const styles$w = css`@layer base{:host{--dialog-backdrop:${colorBackgroundOverlay};--dialog-starting-scale:0.85}::backdrop{background:var(--dialog-backdrop,rgba(0,0,0,0.4))}dialog{background:${colorNeutralBackground1};border-radius:${borderRadiusXLarge};border:none;box-shadow:${shadow64};color:${colorNeutralForeground1};max-height:100vh;padding:0;width:100%;max-width:600px}:host([type='non-modal']) dialog{inset:0;position:fixed;z-index:2;overflow:auto}@supports (max-height:1dvh){dialog{max-height:100dvh}}}@layer animations{@media (prefers-reduced-motion:no-preference){dialog,::backdrop{transition:display allow-discrete,opacity,overlay allow-discrete,scale;transition-duration:${durationGentle};transition-timing-function:${curveDecelerateMid};opacity:0}::backdrop{transition-timing-function:${curveLinear}}[open],[open]::backdrop{opacity:1}dialog:not([open]){scale:var(--dialog-starting-scale);transition-timing-function:${curveAccelerateMid}}}@starting-style{[open],[open]::backdrop{opacity:0}dialog{scale:var(--dialog-starting-scale)}}}@media (forced-colors:active){@layer base{dialog{border:${strokeWidthThin} solid ${colorTransparentStroke}}}}`;
|
|
7390
7392
|
|
|
7391
7393
|
const definition$w = Dialog.compose({
|
|
7392
7394
|
name: tagName$w,
|
|
7393
7395
|
template: template$w,
|
|
7394
|
-
styles: styles$
|
|
7396
|
+
styles: styles$w
|
|
7395
7397
|
});
|
|
7396
7398
|
|
|
7397
7399
|
definition$w.define(FluentDesignSystem.registry);
|
|
@@ -7418,12 +7420,12 @@ class DialogBody extends FASTElement {
|
|
|
7418
7420
|
|
|
7419
7421
|
const template$v = html`<template><div class=title part=title><slot name=title></slot><slot name=title-action></slot><slot name=close @click=${(x, c) => x.clickHandler(c.event)}></slot></div><div class=content part=content><slot></slot></div><div class=actions part=actions><slot name=action></slot></div></template>`;
|
|
7420
7422
|
|
|
7421
|
-
const styles$
|
|
7423
|
+
const styles$v = css`${display("grid")} :host{background:${colorNeutralBackground1};box-sizing:border-box;gap:${spacingVerticalS};padding:${spacingVerticalXXL} ${spacingHorizontalXXL};container:dialog-body/inline-size}.title{box-sizing:border-box;align-items:flex-start;background:${colorNeutralBackground1};color:${colorNeutralForeground1};column-gap:8px;display:flex;font-family:${fontFamilyBase};font-size:${fontSizeBase500};font-weight:${fontWeightSemibold};inset-block-start:0;justify-content:space-between;line-height:${lineHeightBase500};margin-block-end:calc(${spacingVerticalS} * -1);margin-block-start:calc(${spacingVerticalXXL} * -1);padding-block-end:${spacingVerticalS};padding-block-start:${spacingVerticalXXL}}.content{box-sizing:border-box;color:${colorNeutralForeground1};font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};min-height:32px}.actions{box-sizing:border-box;background:${colorNeutralBackground1};display:flex;flex-direction:column;gap:${spacingVerticalS};inset-block-end:0;margin-block-end:calc(${spacingVerticalXXL} * -1);padding-block-end:${spacingVerticalXXL};padding-block-start:${spacingVerticalL}}::slotted([slot='title-action']){margin-inline-start:auto}::slotted([slot='title']){font:inherit;padding:0;margin:0}:not(:has(:is([slot='title'],[slot='title-action']))) .title{justify-content:end}@container (min-width:480px){.actions{align-items:center;flex-direction:row;justify-content:flex-end;margin-block-start:calc(${spacingVerticalS} * -1);padding-block-start:${spacingVerticalS}}}@media (min-height:480px){.title{position:sticky;z-index:1}.actions{position:sticky;z-index:2}`;
|
|
7422
7424
|
|
|
7423
7425
|
const definition$v = DialogBody.compose({
|
|
7424
7426
|
name: tagName$v,
|
|
7425
7427
|
template: template$v,
|
|
7426
|
-
styles: styles$
|
|
7428
|
+
styles: styles$v
|
|
7427
7429
|
});
|
|
7428
7430
|
|
|
7429
7431
|
definition$v.define(FluentDesignSystem.registry);
|
|
@@ -7544,12 +7546,12 @@ function dividerTemplate() {
|
|
|
7544
7546
|
}
|
|
7545
7547
|
const template$u = dividerTemplate();
|
|
7546
7548
|
|
|
7547
|
-
const styles$
|
|
7549
|
+
const styles$u = css`${display("flex")} :host{contain:content}:host::after,:host::before{align-self:center;background:${colorNeutralStroke2};box-sizing:border-box;content:'';display:flex;flex-grow:1;height:${strokeWidthThin}}:host([inset]){padding:0 12px}:host ::slotted(*){color:${colorNeutralForeground2};font-family:${fontFamilyBase};font-size:${fontSizeBase200};font-weight:${fontWeightRegular};margin:0;padding:0 12px}:host([align-content='start'])::before,:host([align-content='end'])::after{flex-basis:12px;flex-grow:0;flex-shrink:0}:host([orientation='vertical']){align-items:center;flex-direction:column;height:100%;min-height:84px}:host([orientation='vertical']):empty{min-height:20px}:host([orientation='vertical'][inset])::before{margin-top:12px}:host([orientation='vertical'][inset])::after{margin-bottom:12px}:host([orientation='vertical']):empty::before,:host([orientation='vertical']):empty::after{height:10px;min-height:10px;flex-grow:0}:host([orientation='vertical'])::before,:host([orientation='vertical'])::after{width:${strokeWidthThin};min-height:20px;height:100%}:host([orientation='vertical']) ::slotted(*){display:flex;flex-direction:column;padding:12px 0;line-height:20px}:host([orientation='vertical'][align-content='start'])::before{min-height:8px}:host([orientation='vertical'][align-content='end'])::after{min-height:8px}:host([appearance='strong'])::before,:host([appearance='strong'])::after{background:${colorNeutralStroke1}}:host([appearance='strong']) ::slotted(*){color:${colorNeutralForeground1}}:host([appearance='brand'])::before,:host([appearance='brand'])::after{background:${colorBrandStroke1}}:host([appearance='brand']) ::slotted(*){color:${colorBrandForeground1}}:host([appearance='subtle'])::before,:host([appearance='subtle'])::after{background:${colorNeutralStroke3}}:host([appearance='subtle']) ::slotted(*){color:${colorNeutralForeground3}}@media (forced-colors:active){:host([appearance='strong'])::before,:host([appearance='strong'])::after,:host([appearance='brand'])::before,:host([appearance='brand'])::after,:host([appearance='subtle'])::before,:host([appearance='subtle'])::after,:host::after,:host::before{background:WindowText;color:WindowText}}`;
|
|
7548
7550
|
|
|
7549
7551
|
const definition$u = Divider.compose({
|
|
7550
7552
|
name: tagName$u,
|
|
7551
7553
|
template: template$u,
|
|
7552
|
-
styles: styles$
|
|
7554
|
+
styles: styles$u
|
|
7553
7555
|
});
|
|
7554
7556
|
|
|
7555
7557
|
definition$u.define(FluentDesignSystem.registry);
|
|
@@ -7727,7 +7729,7 @@ __decorateClass$y([
|
|
|
7727
7729
|
volatile
|
|
7728
7730
|
], Drawer.prototype, "dialogRole", 1);
|
|
7729
7731
|
|
|
7730
|
-
const styles$
|
|
7732
|
+
const styles$t = css`${display("block")} :host{--dialog-backdrop:${colorBackgroundOverlay}}:host([type='non-modal']) dialog[open]::backdrop{display:none}:host([type='non-modal']) dialog{position:fixed;top:0;bottom:0}:host([type='inline']){height:100%;width:fit-content}:host([type='inline']) dialog[open]{box-shadow:none;position:relative}:host([size='small']) dialog{width:320px;max-width:320px}:host([size='large']) dialog{width:940px;max-width:940px}:host([size='full']) dialog{width:100%;max-width:100%}:host([position='end']) dialog{margin-inline-start:auto;margin-inline-end:0}dialog{box-sizing:border-box;z-index:var(--drawer-elevation,1000);font-size:${fontSizeBase300};line-height:${lineHeightBase300};font-family:${fontFamilyBase};font-weight:${fontWeightRegular};color:${colorNeutralForeground1};max-width:var(--drawer-width,592px);max-height:100vh;height:100%;margin-inline-start:0;margin-inline-end:auto;border-inline-end-color:${colorTransparentStroke};border-inline-start-color:var(--drawer-separator,${colorTransparentStroke});outline:none;top:0;bottom:0;width:var(--drawer-width,592px);border-radius:0;padding:0;max-width:var(--drawer-width,592px);box-shadow:${shadow64};border:${strokeWidthThin} solid ${colorTransparentStroke};background:${colorNeutralBackground1}}dialog::backdrop{background:var(--dialog-backdrop)}@layer animations{@media (prefers-reduced-motion:no-preference){dialog{transition:display allow-discrete,opacity,overlay allow-discrete,transform;transition-duration:${durationGentle};transition-timing-function:${curveDecelerateMid}}:host dialog:not([open]){transform:translateX(-100%);transition-timing-function:${curveAccelerateMid}}:host([position='end']) dialog:not([open]){transform:translateX(100%);transition-timing-function:${curveAccelerateMid}}dialog[open]{transform:translateX(0)}dialog::backdrop{transition:display allow-discrete,opacity,overlay allow-discrete,scale;transition-duration:${durationGentle};transition-timing-function:${curveDecelerateMid};background:var(--dialog-backdrop,${colorBackgroundOverlay});opacity:0}dialog[open]::backdrop{opacity:1}dialog::backdrop{transition-timing-function:${curveLinear}}}@starting-style{dialog[open]{transform:translateX(-100%)}:host([position='end']) dialog[open]{transform:translateX(100%)}dialog[open]::backdrop{opacity:0}}}`;
|
|
7731
7733
|
|
|
7732
7734
|
function drawerTemplate() {
|
|
7733
7735
|
return html`<dialog class=dialog part=dialog aria-describedby=${(x) => x.dialogDescribedby} aria-labelledby=${(x) => x.dialogLabelledby} aria-label=${(x) => x.dialogLabel} aria-modal=${(x) => x.dialogModal} role=${(x) => x.dialogRole} size=${(x) => x.size} position=${(x) => x.position} @click=${(x, c) => x.clickHandler(c.event)} @cancel=${(x) => x.cancelHandler()} ${ref("dialog")}><slot></slot></dialog>`;
|
|
@@ -7737,7 +7739,7 @@ const template$t = drawerTemplate();
|
|
|
7737
7739
|
const definition$t = Drawer.compose({
|
|
7738
7740
|
name: tagName$t,
|
|
7739
7741
|
template: template$t,
|
|
7740
|
-
styles: styles$
|
|
7742
|
+
styles: styles$t
|
|
7741
7743
|
});
|
|
7742
7744
|
|
|
7743
7745
|
definition$t.define(FluentDesignSystem.registry);
|
|
@@ -7780,7 +7782,7 @@ const typographyTitle3Styles = css.partial`font-family:${fontFamilyBase};font-si
|
|
|
7780
7782
|
const typographyLargeTitleStyles = css.partial`font-family:${fontFamilyBase};font-size:${fontSizeHero900};line-height:${lineHeightHero900};font-weight:${fontWeightSemibold};`;
|
|
7781
7783
|
const typographyDisplayStyles = css.partial`font-family:${fontFamilyBase};font-size:${fontSizeHero1000};line-height:${lineHeightHero1000};font-weight:${fontWeightSemibold};`;
|
|
7782
7784
|
|
|
7783
|
-
const styles$
|
|
7785
|
+
const styles$s = css`${display("grid")} :host{box-sizing:border-box;grid-template-rows:min-content auto min-content;position:relative;height:100%;padding:${spacingHorizontalXL};max-height:100svh}.header{display:flex;justify-content:space-between;align-items:center;${typographySubtitle1Styles}}.footer{display:flex;justify-content:flex-start;gap:${spacingHorizontalM}}::slotted([slot='title']){font:inherit;padding:0;margin:0}`;
|
|
7784
7786
|
|
|
7785
7787
|
function drawerBodyTemplate() {
|
|
7786
7788
|
return html`<div class=header part=header><slot name=title></slot><slot name=close @click=${(x, c) => x.clickHandler(c.event)}></slot></div><div class=content part=content><slot></slot></div><div class=footer part=footer><slot name=footer></slot></div>`;
|
|
@@ -7790,7 +7792,7 @@ const template$s = drawerBodyTemplate();
|
|
|
7790
7792
|
const definition$s = DrawerBody.compose({
|
|
7791
7793
|
name: tagName$s,
|
|
7792
7794
|
template: template$s,
|
|
7793
|
-
styles: styles$
|
|
7795
|
+
styles: styles$s
|
|
7794
7796
|
});
|
|
7795
7797
|
|
|
7796
7798
|
definition$s.define(FluentDesignSystem.registry);
|
|
@@ -8009,20 +8011,16 @@ const _BaseDropdown = class _BaseDropdown extends FASTElement {
|
|
|
8009
8011
|
const notifier = Observable.getNotifier(this);
|
|
8010
8012
|
notifier.subscribe(next);
|
|
8011
8013
|
notifier.notify("multiple");
|
|
8012
|
-
|
|
8013
|
-
|
|
8014
|
-
|
|
8015
|
-
|
|
8016
|
-
|
|
8017
|
-
|
|
8018
|
-
|
|
8019
|
-
|
|
8020
|
-
|
|
8021
|
-
|
|
8022
|
-
this.setValidity();
|
|
8023
|
-
},
|
|
8024
|
-
{ idleCallback: true }
|
|
8025
|
-
);
|
|
8014
|
+
Updates.enqueue(() => {
|
|
8015
|
+
this.options.forEach((option) => {
|
|
8016
|
+
option.disabled = option.disabledAttribute || this.disabled;
|
|
8017
|
+
option.name = this.name;
|
|
8018
|
+
});
|
|
8019
|
+
this.enabledOptions.filter((x) => x.defaultSelected).forEach((x, i) => {
|
|
8020
|
+
x.selected = this.multiple || i === 0;
|
|
8021
|
+
});
|
|
8022
|
+
this.setValidity();
|
|
8023
|
+
});
|
|
8026
8024
|
if (AnchorPositioningCSSSupported) {
|
|
8027
8025
|
const anchorName = uniqueId("--dropdown-anchor-");
|
|
8028
8026
|
this.style.setProperty("anchor-name", anchorName);
|
|
@@ -8090,7 +8088,7 @@ const _BaseDropdown = class _BaseDropdown extends FASTElement {
|
|
|
8090
8088
|
* @public
|
|
8091
8089
|
*/
|
|
8092
8090
|
get enabledOptions() {
|
|
8093
|
-
return this.listbox?.enabledOptions ??
|
|
8091
|
+
return this.listbox?.enabledOptions ?? Array.from(this.querySelectorAll("*")).filter((o) => isDropdownOption(o) && !o.disabled);
|
|
8094
8092
|
}
|
|
8095
8093
|
/**
|
|
8096
8094
|
* A reference to the first freeform option, if present.
|
|
@@ -8122,7 +8120,7 @@ const _BaseDropdown = class _BaseDropdown extends FASTElement {
|
|
|
8122
8120
|
* @public
|
|
8123
8121
|
*/
|
|
8124
8122
|
get options() {
|
|
8125
|
-
return this.listbox?.options ??
|
|
8123
|
+
return this.listbox?.options ?? Array.from(this.querySelectorAll("*")).filter((o) => isDropdownOption(o));
|
|
8126
8124
|
}
|
|
8127
8125
|
/**
|
|
8128
8126
|
* The index of the first selected option, scoped to the enabled options.
|
|
@@ -8682,12 +8680,12 @@ __decorateClass$w([
|
|
|
8682
8680
|
attr
|
|
8683
8681
|
], Dropdown.prototype, "size", 2);
|
|
8684
8682
|
|
|
8685
|
-
const styles$
|
|
8683
|
+
const styles$r = css`${display("inline-flex")} :host{anchor-name:--dropdown-trigger;box-sizing:border-box;color:${colorNeutralForeground1};cursor:pointer}:host(${placeholderShownState}){color:${colorNeutralForeground4}}.control{appearance:none;background-color:${colorNeutralBackground1};border-radius:${borderRadiusMedium};border:${strokeWidthThin} solid ${colorTransparentStroke};box-shadow:inset 0 0 0 ${strokeWidthThin} var(--control-border-color);box-sizing:border-box;color:inherit;column-gap:${spacingHorizontalXXS};display:inline-flex;justify-content:space-between;min-width:160px;overflow:hidden;padding:${spacingVerticalSNudge} ${spacingHorizontalMNudge};white-space:normal;position:relative;text-align:start;width:100%;z-index:1;${typographyBody1Styles}}:host([size='small']) .control{column-gap:${spacingHorizontalXXS};padding:${spacingVerticalXS} ${spacingHorizontalSNudge};${typographyCaption1Styles}}:host([size='large']) .control{column-gap:${spacingHorizontalS};padding:${spacingVerticalS} ${spacingHorizontalM};${typographyBody2Styles}}::slotted(:is(input,button)){all:unset;flex:1 1 auto}::slotted(button){cursor:pointer}::slotted(input){cursor:text}:where(slot[name='indicator']>*,::slotted([slot='indicator'])){all:unset;align-items:center;appearance:none;aspect-ratio:1;color:${colorNeutralForeground3};display:inline-flex;justify-content:center;width:20px}:host([size='small']) :where(slot[name='indicator']>*,::slotted([slot='indicator'])){width:16px}:host([size='large']) :where(slot[name='indicator']>*,::slotted([slot='indicator'])){width:24px}.control::after,.control::before{content:''/'';inset:auto 0 0;pointer-events:none;position:absolute}.control::before{height:${strokeWidthThin}}.control::after{background-color:${colorCompoundBrandStroke};height:${strokeWidthThick};scale:0 1;transition:scale ${durationUltraFast} ${curveDecelerateMid}}:host(:where(:focus-within)) .control{border-radius:${borderRadiusMedium};box-shadow:inset 0 0 0 1px ${colorStrokeFocus1};outline:${strokeWidthThick} solid ${colorStrokeFocus2}}:host(:where(${openState},:focus-within)) .control::after{scale:1 1;transition-duration:${durationNormal};transition-timing-function:${curveAccelerateMid}}:host(:where([appearance='outline'],[appearance='transparent'])) .control::before{background-color:${colorNeutralStrokeAccessible}}:host([appearance='transparent']) .control{--control-border-color:${colorTransparentStrokeInteractive};background-color:${colorTransparentBackground};border-radius:${borderRadiusNone}}:host([appearance='outline']) .control{--control-border-color:${colorNeutralStroke1}}:host([appearance='outline']) .control:hover{--control-border-color:${colorNeutralStroke1Hover}}:host(:where([appearance='outline'],[appearance='transparent'])) .control:hover::before{background-color:${colorNeutralStrokeAccessibleHover}}:host([appearance='outline']) .control:hover::after{background-color:${colorCompoundBrandBackgroundHover}}:host([appearance='outline']) .control:active{--control-border-color:${colorNeutralStroke1Pressed}}:host(:where([appearance='outline'],[appearance='transparent'])) .control:active::before{background-color:${colorNeutralStrokeAccessiblePressed}}:host(:where([appearance='outline'],[appearance='transparent'])) .control:active::after{background-color:${colorCompoundBrandBackgroundPressed}}:host([appearance='filled-darker']) .control{background-color:${colorNeutralBackground3}}:host(:where([appearance='filled-lighter'],[appearance='filled-darker'])) .control{--control-border-color:${colorTransparentStroke}}:host(:disabled),:host(:disabled) ::slotted(:where(button,input)){cursor:not-allowed}:host(:disabled) .control::before,:host(:disabled) .control::after{content:none}:host(:disabled) .control:is(*,:active,:hover),:host(:disabled) :where(slot[name='indicator']>*,::slotted([slot='indicator'])){--control-border-color:${colorNeutralStrokeDisabled};background-color:${colorNeutralBackgroundDisabled};color:${colorNeutralForegroundDisabled}}::slotted(:not([slot]):not([popover])),::slotted([popover]:not(:popover-open)){display:none}@supports not (anchor-name:--anchor){:host{--listbox-max-height:50vh;--margin-offset:calc(${lineHeightBase300} + (${spacingVerticalSNudge} * 2) + ${strokeWidthThin})}:host([size='small']){--margin-offset:calc(${lineHeightBase200} + (${spacingVerticalXS} * 2) + ${strokeWidthThin})}:host([size='large']){--margin-offset:calc(${lineHeightBase400} + (${spacingVerticalS} * 2) + ${strokeWidthThin})}}@media (forced-colors:active){:host(:disabled) .control{border-color:GrayText}:host(:disabled) :where(slot[name='indicator']>*,::slotted([slot='indicator'])){color:GrayText}`;
|
|
8686
8684
|
|
|
8687
8685
|
const definition$r = Dropdown.compose({
|
|
8688
8686
|
name: tagName$r,
|
|
8689
8687
|
template: template$r,
|
|
8690
|
-
styles: styles$
|
|
8688
|
+
styles: styles$r
|
|
8691
8689
|
});
|
|
8692
8690
|
|
|
8693
8691
|
definition$r.define(FluentDesignSystem.registry);
|
|
@@ -8927,14 +8925,14 @@ __decorateClass$u([
|
|
|
8927
8925
|
attr({ attribute: "label-position" })
|
|
8928
8926
|
], Field.prototype, "labelPosition", 2);
|
|
8929
8927
|
|
|
8930
|
-
const styles$
|
|
8928
|
+
const styles$q = css`${display("inline-grid")} :host{color:${colorNeutralForeground1};align-items:center;gap:0 ${spacingHorizontalM};justify-items:start}:has([slot='message']){color:${colorNeutralForeground1};row-gap:${spacingVerticalS}}:not(::slotted([slot='label'])){gap:0}:host([label-position='before']){grid-template-areas:'label input' 'label message'}:host([label-position='after']){gap:0;grid-template-areas:'input label' 'message message';grid-template-columns:auto 1fr}:host([label-position='after']) ::slotted([slot='input']){margin-inline-end:${spacingHorizontalM}}:host([label-position='above']){grid-template-areas:'label' 'input' 'message';row-gap:${spacingVerticalXXS}}:host([label-position='below']){grid-template-areas:'input' 'label' 'message';justify-items:center}:host([label-position='below']) ::slotted([slot='label']){margin-block-start:${spacingVerticalM}}:host(${requiredState}) ::slotted([slot='label'])::after{content:'*'/'';color:${colorPaletteRedForeground1};margin-inline-start:${spacingHorizontalXS}}::slotted([slot='input']){grid-area:input}::slotted([slot='message']){color:${colorNeutralForeground3};font-family:${fontFamilyBase};font-size:${fontSizeBase200};font-weight:${fontWeightRegular};grid-area:message;line-height:${lineHeightBase200};margin-block-start:${spacingVerticalXXS}}:host(${focusVisibleState}:focus-within){border-radius:${borderRadiusMedium};outline:${strokeWidthThick} solid ${colorStrokeFocus2}}::slotted(label),::slotted([slot='label']){cursor:inherit;display:inline-flex;font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};grid-area:label;line-height:${lineHeightBase300};justify-self:stretch;user-select:none}:host([size='small']) ::slotted(label){font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host([size='large']) ::slotted(label){font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='large']) ::slotted(label),:host([weight='semibold']) ::slotted(label){font-weight:${fontWeightSemibold}}:host(${disabledState}){cursor:default}::slotted([flag]){display:none}:host(${badInputState}) ::slotted([flag='${ValidationFlags.badInput}']),:host(${customErrorState}) ::slotted([flag='${ValidationFlags.customError}']),:host(${patternMismatchState}) ::slotted([flag='${ValidationFlags.patternMismatch}']),:host(${rangeOverflowState}) ::slotted([flag='${ValidationFlags.rangeOverflow}']),:host(${rangeUnderflowState}) ::slotted([flag='${ValidationFlags.rangeUnderflow}']),:host(${stepMismatchState}) ::slotted([flag='${ValidationFlags.stepMismatch}']),:host(${tooLongState}) ::slotted([flag='${ValidationFlags.tooLong}']),:host(${tooShortState}) ::slotted([flag='${ValidationFlags.tooShort}']),:host(${typeMismatchState}) ::slotted([flag='${ValidationFlags.typeMismatch}']),:host(${valueMissingState}) ::slotted([flag='${ValidationFlags.valueMissing}']),:host(${validState}) ::slotted([flag='${ValidationFlags.valid}']){display:block}`;
|
|
8931
8929
|
|
|
8932
8930
|
const template$q = html`<template @click=${(x, c) => x.clickHandler(c.event)} @change=${(x, c) => x.changeHandler(c.event)} @focusin=${(x, c) => x.focusinHandler(c.event)} @focusout=${(x, c) => x.focusoutHandler(c.event)}><slot name=label part=label ${slotted("labelSlot")}></slot><slot name=input part=input ${slotted("slottedInputs")}></slot><slot name=message part=message ${slotted({ property: "messageSlot", filter: elements("[flag]") })}></slot></template>`;
|
|
8933
8931
|
|
|
8934
8932
|
const definition$q = Field.compose({
|
|
8935
8933
|
name: tagName$o,
|
|
8936
8934
|
template: template$q,
|
|
8937
|
-
styles: styles$
|
|
8935
|
+
styles: styles$q,
|
|
8938
8936
|
shadowOptions: {
|
|
8939
8937
|
delegatesFocus: true
|
|
8940
8938
|
}
|
|
@@ -8985,12 +8983,12 @@ __decorateClass$t([
|
|
|
8985
8983
|
|
|
8986
8984
|
const template$p = html`<slot></slot>`;
|
|
8987
8985
|
|
|
8988
|
-
const styles$
|
|
8986
|
+
const styles$p = css`:host{contain:content}:host ::slotted(img){box-sizing:border-box;min-height:8px;min-width:8px;display:inline-block}:host([block]) ::slotted(img){width:100%;height:auto}:host([bordered]) ::slotted(img){border:${strokeWidthThin} solid ${colorNeutralStroke2}}:host([fit='none']) ::slotted(img){object-fit:none;object-position:top left;height:100%;width:100%}:host([fit='center']) ::slotted(img){object-fit:none;object-position:center;height:100%;width:100%}:host([fit='contain']) ::slotted(img){object-fit:contain;object-position:center;height:100%;width:100%}:host([fit='cover']) ::slotted(img){object-fit:cover;object-position:center;height:100%;width:100%}:host([shadow]) ::slotted(img){box-shadow:${shadow4}}:host([shape='circular']) ::slotted(img){border-radius:${borderRadiusCircular}}:host([shape='rounded']) ::slotted(img){border-radius:${borderRadiusMedium}}`;
|
|
8989
8987
|
|
|
8990
8988
|
const definition$p = Image.compose({
|
|
8991
8989
|
name: tagName$n,
|
|
8992
8990
|
template: template$p,
|
|
8993
|
-
styles: styles$
|
|
8991
|
+
styles: styles$p
|
|
8994
8992
|
});
|
|
8995
8993
|
|
|
8996
8994
|
definition$p.define(FluentDesignSystem.registry);
|
|
@@ -9036,7 +9034,7 @@ __decorateClass$s([
|
|
|
9036
9034
|
attr({ mode: "boolean" })
|
|
9037
9035
|
], Label.prototype, "required", 2);
|
|
9038
9036
|
|
|
9039
|
-
const styles$
|
|
9037
|
+
const styles$o = css`${display("inline-flex")} :host{color:${colorNeutralForeground1};cursor:pointer;font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};user-select:none}.asterisk{color:${colorPaletteRedForeground1};margin-inline-start:${spacingHorizontalXS}}:host([size='small']){font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host([size='large']){font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host(:is([size='large'],[weight='semibold'])){font-weight:${fontWeightSemibold}}:host([disabled]),:host([disabled]) .asterisk{color:${colorNeutralForegroundDisabled}}`;
|
|
9040
9038
|
|
|
9041
9039
|
function labelTemplate() {
|
|
9042
9040
|
return html`<slot></slot><span part=asterisk class=asterisk aria-hidden=true ?hidden=${(x) => !x.required}>*</span>`;
|
|
@@ -9046,7 +9044,7 @@ const template$o = labelTemplate();
|
|
|
9046
9044
|
const definition$o = Label.compose({
|
|
9047
9045
|
name: tagName$m,
|
|
9048
9046
|
template: template$o,
|
|
9049
|
-
styles: styles$
|
|
9047
|
+
styles: styles$o
|
|
9050
9048
|
});
|
|
9051
9049
|
|
|
9052
9050
|
definition$o.define(FluentDesignSystem.registry);
|
|
@@ -9080,7 +9078,7 @@ __decorateClass$r([
|
|
|
9080
9078
|
attr({ mode: "boolean" })
|
|
9081
9079
|
], Link.prototype, "inline", 2);
|
|
9082
9080
|
|
|
9083
|
-
const styles$
|
|
9081
|
+
const styles$n = css`${display("inline")} :host{position:relative;box-sizing:border-box;background-color:transparent;color:${colorBrandForegroundLink};cursor:pointer;font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};overflow:inherit;text-align:start;text-decoration:none;text-decoration-thickness:${strokeWidthThin};text-overflow:inherit;user-select:text}:host(:is(:hover,:focus-visible)){outline:none;text-decoration-line:underline}@media (hover:hover){:host(:hover){color:${colorBrandForegroundLinkHover}}:host(:active){color:${colorBrandForegroundLinkPressed}}:host([appearance='subtle']:hover){color:${colorNeutralForeground2LinkHover}}:host([appearance='subtle']:active){color:${colorNeutralForeground2LinkPressed}}}:host([appearance='subtle']){color:${colorNeutralForeground2Link}}:host-context(:is(h1,h2,h3,h4,h5,h6,p,fluent-text)),:host([inline]){font:inherit;text-decoration:underline}:host(:not([href])){color:inherit;text-decoration:none}::slotted(a){position:absolute;inset:0}@media (forced-colors:active){:host{color:LinkText}}`;
|
|
9084
9082
|
|
|
9085
9083
|
function anchorTemplate() {
|
|
9086
9084
|
return html`<template tabindex=0 @click=${(x, c) => x.clickHandler(c.event)} @keydown=${(x, c) => x.keydownHandler(c.event)}><slot></slot></template>`;
|
|
@@ -9090,7 +9088,7 @@ const template$n = anchorTemplate();
|
|
|
9090
9088
|
const definition$n = Link.compose({
|
|
9091
9089
|
name: tagName$l,
|
|
9092
9090
|
template: template$n,
|
|
9093
|
-
styles: styles$
|
|
9091
|
+
styles: styles$n
|
|
9094
9092
|
});
|
|
9095
9093
|
|
|
9096
9094
|
definition$n.define(FluentDesignSystem.registry);
|
|
@@ -9285,7 +9283,7 @@ __decorateClass$q([
|
|
|
9285
9283
|
observable
|
|
9286
9284
|
], Listbox.prototype, "dropdown", 2);
|
|
9287
9285
|
|
|
9288
|
-
const styles$
|
|
9286
|
+
const styles$m = css`${display("inline-flex")} :host{background-color:${colorNeutralBackground1};border-radius:${borderRadiusMedium};border:${strokeWidthThin} solid ${colorTransparentStroke};box-shadow:${shadow16};box-sizing:border-box;flex-direction:column;margin:0;min-width:160px;padding:${spacingHorizontalXS};row-gap:${spacingHorizontalXXS};width:auto}:host([popover]){inset:unset;overflow:auto}@supports (anchor-name:--anchor){:host([popover]){position:absolute;margin-block-start:0;max-height:var(--listbox-max-height,calc(50vh - anchor-size(self-block)));min-width:anchor-size(width);position-anchor:--dropdown;position-area:block-end span-inline-end;position-try-fallbacks:flip-inline,flip-block,--flip-block,block-start}@position-try --flip-block{bottom:anchor(top);top:unset}}@supports not (anchor-name:--anchor){:host([popover]){margin-block-start:var(--margin-offset,0);max-height:var(--listbox-max-height,50vh);position:fixed}:host([popover]${flipBlockState}){margin-block-start:revert;translate:0 -100%}}`;
|
|
9289
9287
|
|
|
9290
9288
|
function listboxTemplate() {
|
|
9291
9289
|
return html`<template @beforetoggle=${(x, c) => x.beforetoggleHandler(c.event)} @click=${(x, c) => x.clickHandler(c.event)}><slot ${ref("defaultSlot")} @slotchange=${(x, c) => x.slotchangeHandler(c.event)}></slot></template>`;
|
|
@@ -9295,11 +9293,13 @@ const template$m = listboxTemplate();
|
|
|
9295
9293
|
const definition$m = Listbox.compose({
|
|
9296
9294
|
name: tagName$q,
|
|
9297
9295
|
template: template$m,
|
|
9298
|
-
styles: styles$
|
|
9296
|
+
styles: styles$m
|
|
9299
9297
|
});
|
|
9300
9298
|
|
|
9301
9299
|
definition$m.define(FluentDesignSystem.registry);
|
|
9302
9300
|
|
|
9301
|
+
const styles$l = styles$D;
|
|
9302
|
+
|
|
9303
9303
|
const MenuButtonAppearance = ButtonAppearance;
|
|
9304
9304
|
const MenuButtonShape = ButtonShape;
|
|
9305
9305
|
const MenuButtonSize = ButtonSize;
|
|
@@ -9318,7 +9318,7 @@ const template$l = buttonTemplate$1({
|
|
|
9318
9318
|
const definition$l = MenuButton.compose({
|
|
9319
9319
|
name: tagName$k,
|
|
9320
9320
|
template: template$l,
|
|
9321
|
-
styles: styles$
|
|
9321
|
+
styles: styles$l
|
|
9322
9322
|
});
|
|
9323
9323
|
|
|
9324
9324
|
definition$l.define(FluentDesignSystem.registry);
|
|
@@ -9633,7 +9633,7 @@ function nodeContains(node, otherNode) {
|
|
|
9633
9633
|
* @returns {boolean}
|
|
9634
9634
|
*/
|
|
9635
9635
|
function supportsFocusGroup() {
|
|
9636
|
-
return "focusgroup" in (globalThis?.HTMLElement?.prototype ?? {});
|
|
9636
|
+
return "focusgroup" in (globalThis?.HTMLElement?.prototype ?? {}) || "focusGroup" in (globalThis?.HTMLElement?.prototype ?? {});
|
|
9637
9637
|
}
|
|
9638
9638
|
/**
|
|
9639
9639
|
* Gets the navigation direction (“forward” or “backward”) based on:
|
|
@@ -10140,6 +10140,9 @@ const _BaseMenuList = class _BaseMenuList extends FASTElement {
|
|
|
10140
10140
|
*/
|
|
10141
10141
|
connectedCallback() {
|
|
10142
10142
|
super.connectedCallback();
|
|
10143
|
+
if (!this.slot && this.isNestedMenu()) {
|
|
10144
|
+
this.slot = "submenu";
|
|
10145
|
+
}
|
|
10143
10146
|
Updates.enqueue(() => {
|
|
10144
10147
|
this.setItems();
|
|
10145
10148
|
});
|
|
@@ -10233,7 +10236,7 @@ class MenuList extends BaseMenuList {
|
|
|
10233
10236
|
const styles$j = css`${display("flex")} :host{flex-direction:column;height:fit-content;max-width:300px;min-width:160px;width:auto;background-color:${colorNeutralBackground1};border:1px solid ${colorTransparentStroke};border-radius:${borderRadiusMedium};box-shadow:${shadow16};padding:4px;row-gap:2px}`;
|
|
10234
10237
|
|
|
10235
10238
|
function menuTemplate$1() {
|
|
10236
|
-
return html`<template focusgroup=menu
|
|
10239
|
+
return html`<template focusgroup=menu><slot ${slotted("items")}></slot></template>`;
|
|
10237
10240
|
}
|
|
10238
10241
|
const template$j = menuTemplate$1();
|
|
10239
10242
|
|
|
@@ -10576,7 +10579,7 @@ __decorateClass$n([
|
|
|
10576
10579
|
const styles$i = css`${display("inline-block")} ::slotted([slot='trigger']){anchor-name:--menu-trigger}::slotted([popover]){margin:0;max-height:var(--menu-max-height,auto);position-anchor:--menu-trigger;position-area:block-end span-inline-end;position-try-fallbacks:flip-block;position:absolute;z-index:1}:host([split]) ::slotted([popover]){position-area:block-end span-inline-start}::slotted([popover]:popover-open){inset:unset}::slotted([popover]:not(:popover-open)){display:none}:host([split]){display:inline-flex}:host([split]) ::slotted([slot='primary-action']){border-inline-end:${strokeWidthThin} solid ${colorNeutralStroke1};border-start-end-radius:0;border-end-end-radius:0}:host([split]) ::slotted([slot='primary-action']:focus-visible){z-index:1}:host([split]) ::slotted([slot='primary-action'][appearance='primary']){border-inline-end:${strokeWidthThin} solid white}:host([split]) ::slotted([slot='trigger']){border-inline-start:0;border-start-start-radius:0;border-end-start-radius:0}`;
|
|
10577
10580
|
|
|
10578
10581
|
function menuTemplate() {
|
|
10579
|
-
return html`<template
|
|
10582
|
+
return html`<template @keydown=${(x, c) => x.menuKeydownHandler(c.event)}><slot name=primary-action ${ref("primaryAction")}></slot><slot name=trigger ${slotted({ property: "slottedTriggers", filter: elements() })}></slot><slot ${slotted({ property: "slottedMenuList", filter: elements() })}></slot></template>`;
|
|
10580
10583
|
}
|
|
10581
10584
|
const template$i = menuTemplate();
|
|
10582
10585
|
|
|
@@ -12968,9 +12971,11 @@ class BaseTextArea extends FASTElement {
|
|
|
12968
12971
|
this.controlEl.addEventListener("input", () => this.userInteracted = true, { once: true });
|
|
12969
12972
|
}
|
|
12970
12973
|
defaultSlottedNodesChanged() {
|
|
12971
|
-
|
|
12972
|
-
|
|
12973
|
-
|
|
12974
|
+
Updates.enqueue(() => {
|
|
12975
|
+
const next = this.getContent();
|
|
12976
|
+
this.defaultValue = next;
|
|
12977
|
+
this.value = next;
|
|
12978
|
+
});
|
|
12974
12979
|
}
|
|
12975
12980
|
labelSlottedNodesChanged() {
|
|
12976
12981
|
this.filteredLabelSlottedNodes = this.labelSlottedNodes.filter(whitespaceFilter);
|
|
@@ -13007,8 +13012,8 @@ class BaseTextArea extends FASTElement {
|
|
|
13007
13012
|
return this.elementInternals.labels;
|
|
13008
13013
|
}
|
|
13009
13014
|
readOnlyChanged() {
|
|
13010
|
-
this.elementInternals
|
|
13011
|
-
|
|
13015
|
+
if (this.elementInternals) {
|
|
13016
|
+
this.elementInternals.ariaReadOnly = `${!!this.readOnly}`;
|
|
13012
13017
|
this.setValidity();
|
|
13013
13018
|
}
|
|
13014
13019
|
}
|
|
@@ -13187,7 +13192,7 @@ class BaseTextArea extends FASTElement {
|
|
|
13187
13192
|
* @public
|
|
13188
13193
|
*/
|
|
13189
13194
|
setCustomValidity(message) {
|
|
13190
|
-
this.elementInternals
|
|
13195
|
+
this.elementInternals?.setValidity({ customError: !!message }, !!message ? message.toString() : void 0);
|
|
13191
13196
|
this.reportValidity();
|
|
13192
13197
|
}
|
|
13193
13198
|
/**
|
|
@@ -13200,15 +13205,15 @@ class BaseTextArea extends FASTElement {
|
|
|
13200
13205
|
* @internal
|
|
13201
13206
|
*/
|
|
13202
13207
|
setValidity(flags, message, anchor) {
|
|
13203
|
-
if (!this
|
|
13208
|
+
if (!this.elementInternals) {
|
|
13204
13209
|
return;
|
|
13205
13210
|
}
|
|
13206
13211
|
if (this.disabled || this.readOnly) {
|
|
13207
13212
|
this.elementInternals.setValidity({});
|
|
13208
13213
|
} else {
|
|
13209
13214
|
this.elementInternals.setValidity(
|
|
13210
|
-
flags ?? this.controlEl
|
|
13211
|
-
message ?? this.controlEl
|
|
13215
|
+
flags ?? this.controlEl?.validity,
|
|
13216
|
+
message ?? this.controlEl?.validationMessage,
|
|
13212
13217
|
anchor ?? this.controlEl
|
|
13213
13218
|
);
|
|
13214
13219
|
}
|
|
@@ -13228,7 +13233,7 @@ class BaseTextArea extends FASTElement {
|
|
|
13228
13233
|
* Gets the content inside the light DOM, if any HTML element is present, use its `outerHTML` value.
|
|
13229
13234
|
*/
|
|
13230
13235
|
getContent() {
|
|
13231
|
-
return this.defaultSlottedNodes
|
|
13236
|
+
return this.defaultSlottedNodes?.map((node) => {
|
|
13232
13237
|
switch (node.nodeType) {
|
|
13233
13238
|
case Node.ELEMENT_NODE:
|
|
13234
13239
|
return node.outerHTML;
|
|
@@ -13605,7 +13610,7 @@ class BaseTextInput extends FASTElement {
|
|
|
13605
13610
|
}
|
|
13606
13611
|
set value(value) {
|
|
13607
13612
|
this.currentValue = value;
|
|
13608
|
-
if (this
|
|
13613
|
+
if (this.elementInternals && this.control) {
|
|
13609
13614
|
this.control.value = value ?? "";
|
|
13610
13615
|
this.setFormValue(value);
|
|
13611
13616
|
this.setValidity();
|
|
@@ -13632,17 +13637,6 @@ class BaseTextInput extends FASTElement {
|
|
|
13632
13637
|
get form() {
|
|
13633
13638
|
return this.elementInternals.form;
|
|
13634
13639
|
}
|
|
13635
|
-
/**
|
|
13636
|
-
* Handles the internal control's `keypress` event.
|
|
13637
|
-
*
|
|
13638
|
-
* @internal
|
|
13639
|
-
*/
|
|
13640
|
-
beforeinputHandler(e) {
|
|
13641
|
-
if (e.inputType === "insertLineBreak") {
|
|
13642
|
-
this.implicitSubmit();
|
|
13643
|
-
}
|
|
13644
|
-
return true;
|
|
13645
|
-
}
|
|
13646
13640
|
/**
|
|
13647
13641
|
* Change event handler for inner control.
|
|
13648
13642
|
*
|
|
@@ -13795,7 +13789,7 @@ class BaseTextInput extends FASTElement {
|
|
|
13795
13789
|
* @internal
|
|
13796
13790
|
*/
|
|
13797
13791
|
setFormValue(value, state) {
|
|
13798
|
-
this.elementInternals
|
|
13792
|
+
this.elementInternals?.setFormValue(value, value ?? state);
|
|
13799
13793
|
}
|
|
13800
13794
|
/**
|
|
13801
13795
|
* Sets the validity of the control.
|
|
@@ -13807,7 +13801,7 @@ class BaseTextInput extends FASTElement {
|
|
|
13807
13801
|
* @internal
|
|
13808
13802
|
*/
|
|
13809
13803
|
setValidity(flags, message, anchor) {
|
|
13810
|
-
if (this
|
|
13804
|
+
if (this.elementInternals && this.control) {
|
|
13811
13805
|
if (this.disabled) {
|
|
13812
13806
|
this.elementInternals.setValidity({});
|
|
13813
13807
|
return;
|
|
@@ -13922,7 +13916,7 @@ applyMixins(TextInput, StartEnd);
|
|
|
13922
13916
|
const styles$5 = css`${display("block")} :host{font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};max-width:400px}.label{display:flex;color:${colorNeutralForeground1};padding-bottom:${spacingVerticalXS};flex-shrink:0;padding-inline-end:${spacingHorizontalXS}}.label[hidden],:host(:empty) .label{display:none}.root{align-items:center;background-color:${colorNeutralBackground1};border:${strokeWidthThin} solid ${colorNeutralStroke1};border-bottom-color:${colorNeutralStrokeAccessible};border-radius:${borderRadiusMedium};box-sizing:border-box;height:32px;display:inline-flex;flex-direction:row;gap:${spacingHorizontalXXS};padding:0 ${spacingHorizontalMNudge};position:relative;width:100%}:has(.control:user-invalid){border-color:${colorPaletteRedBorder2}}.root::after{box-sizing:border-box;content:'';position:absolute;left:-1px;bottom:0px;right:-1px;height:max(2px,${borderRadiusMedium});border-radius:0 0 ${borderRadiusMedium} ${borderRadiusMedium};border-bottom:2px solid ${colorCompoundBrandStroke};clip-path:inset(calc(100% - 2px) 1px 0px);transform:scaleX(0);transition-property:transform;transition-duration:${durationUltraFast};transition-delay:${curveAccelerateMid}}.control{width:100%;height:100%;box-sizing:border-box;color:${colorNeutralForeground1};border-radius:${borderRadiusMedium};background:${colorTransparentBackground};font-family:${fontFamilyBase};font-weight:${fontWeightRegular};font-size:${fontSizeBase300};border:none;vertical-align:center}.control:focus-visible{outline:0;border:0}.control::placeholder{color:${colorNeutralForeground4}}:host ::slotted([slot='start']),:host ::slotted([slot='end']){display:flex;align-items:center;justify-content:center;color:${colorNeutralForeground3};font-size:${fontSizeBase500}}:host ::slotted([slot='start']){padding-right:${spacingHorizontalXXS}}:host ::slotted([slot='end']){padding-left:${spacingHorizontalXXS};gap:${spacingHorizontalXS}}:host(:hover) .root{border-color:${colorNeutralStroke1Hover};border-bottom-color:${colorNeutralStrokeAccessibleHover}}:host(:active) .root{border-color:${colorNeutralStroke1Pressed}}:host(:focus-within) .root{outline:transparent solid 2px;border-bottom:0}:host(:focus-within) .root::after{transform:scaleX(1);transition-property:transform;transition-duration:${durationNormal};transition-delay:${curveDecelerateMid}}:host(:focus-within:active) .root:after{border-bottom-color:${colorCompoundBrandStrokePressed}}:host([appearance='outline']:focus-within) .root{border:${strokeWidthThin} solid ${colorNeutralStroke1}}:host(:focus-within) .control{color:${colorNeutralForeground1}}:host([disabled]) .root{background:${colorTransparentBackground};border:${strokeWidthThin} solid ${colorNeutralStrokeDisabled}}:host([disabled]) .control::placeholder,:host([disabled]) ::slotted([slot='start']),:host([disabled]) ::slotted([slot='end']){color:${colorNeutralForegroundDisabled}}::selection{color:${colorNeutralForegroundInverted};background-color:${colorNeutralBackgroundInverted}}:host([control-size='small']) .control{font-size:${fontSizeBase200};font-weight:${fontWeightRegular};line-height:${lineHeightBase200}}:host([control-size='small']) .root{height:24px;gap:${spacingHorizontalXXS};padding:0 ${spacingHorizontalSNudge}}:host([control-size='small']) ::slotted([slot='start']),:host([control-size='small']) ::slotted([slot='end']){font-size:${fontSizeBase400}}:host([control-size='large']) .control{font-size:${fontSizeBase400};font-weight:${fontWeightRegular};line-height:${lineHeightBase400}}:host([control-size='large']) .root{height:40px;gap:${spacingHorizontalS};padding:0 ${spacingHorizontalM}}:host([control-size='large']) ::slotted([slot='start']),:host([control-size='large']) ::slotted([slot='end']){font-size:${fontSizeBase600}}:host([appearance='underline']) .root{background:${colorTransparentBackground};border:0;border-radius:0;border-bottom:${strokeWidthThin} solid ${colorNeutralStrokeAccessible}}:host([appearance='underline']:hover) .root{border-bottom-color:${colorNeutralStrokeAccessibleHover}}:host([appearance='underline']:active) .root{border-bottom-color:${colorNeutralStrokeAccessiblePressed}}:host([appearance='underline']:focus-within) .root{border:0;border-bottom-color:${colorNeutralStrokeAccessiblePressed}}:host([appearance='underline'][disabled]) .root{border-bottom-color:${colorNeutralStrokeDisabled}}:host([appearance='filled-lighter']) .root,:host([appearance='filled-darker']) .root{border:${strokeWidthThin} solid ${colorTransparentStroke};box-shadow:${shadow2}}:host([appearance='filled-lighter']) .root{background:${colorNeutralBackground1}}:host([appearance='filled-darker']) .root{background:${colorNeutralBackground3}}:host([appearance='filled-lighter']:hover) .root,:host([appearance='filled-darker']:hover) .root{border-color:${colorTransparentStrokeInteractive}}:host([appearance='filled-lighter']:active) .root,:host([appearance='filled-darker']:active) .root{border-color:${colorTransparentStrokeInteractive};background:${colorNeutralBackground3}}`;
|
|
13923
13917
|
|
|
13924
13918
|
function textInputTemplate(options = {}) {
|
|
13925
|
-
return html`<template @
|
|
13919
|
+
return html`<template @focusin=${(x, c) => x.focusinHandler(c.event)} @keydown=${(x, c) => x.keydownHandler(c.event)}><label part=label for=control class=label ${ref("controlLabel")}><slot ${slotted("defaultSlottedNodes")}></slot></label><div class=root part=root>${startSlotTemplate(options)} <input class=control part=control id=control @change=${(x, c) => x.changeHandler(c.event)} @input=${(x, c) => x.inputHandler(c.event)} ?autofocus=${(x) => x.autofocus} autocomplete=${(x) => x.autocomplete} ?disabled=${(x) => x.disabled} list=${(x) => x.list} maxlength=${(x) => x.maxlength} minlength=${(x) => x.minlength} ?multiple=${(x) => x.multiple} name=${(x) => x.name} pattern=${(x) => x.pattern} placeholder=${(x) => x.placeholder} ?readonly=${(x) => x.readOnly} ?required=${(x) => x.required} size=${(x) => x.size} spellcheck=${(x) => x.spellcheck} type=${(x) => x.type} value=${(x) => x.value} ${ref("control")}> ${endSlotTemplate(options)}</div></template>`;
|
|
13926
13920
|
}
|
|
13927
13921
|
const template$5 = textInputTemplate();
|
|
13928
13922
|
|
|
@@ -14090,9 +14084,8 @@ class ToggleButton extends Button {
|
|
|
14090
14084
|
* @internal
|
|
14091
14085
|
*/
|
|
14092
14086
|
setPressedState() {
|
|
14093
|
-
if (this
|
|
14094
|
-
|
|
14095
|
-
this.elementInternals.ariaPressed = ariaPressed;
|
|
14087
|
+
if (this.elementInternals) {
|
|
14088
|
+
this.elementInternals.ariaPressed = `${this.mixed ? "mixed" : !!this.pressed}`;
|
|
14096
14089
|
toggleState(this.elementInternals, "pressed", !!this.pressed || !!this.mixed);
|
|
14097
14090
|
}
|
|
14098
14091
|
}
|
|
@@ -14104,7 +14097,7 @@ __decorateClass$5([
|
|
|
14104
14097
|
attr({ mode: "boolean" })
|
|
14105
14098
|
], ToggleButton.prototype, "mixed", 2);
|
|
14106
14099
|
|
|
14107
|
-
const styles$3 = css`${styles$
|
|
14100
|
+
const styles$3 = css`${styles$D} :host(${pressedState}){border-color:${colorNeutralStroke1};background-color:${colorNeutralBackground1Selected};color:${colorNeutralForeground1};border-width:${strokeWidthThin}}:host(${pressedState}:hover){border-color:${colorNeutralStroke1Hover};background-color:${colorNeutralBackground1Hover}}:host(${pressedState}:active){border-color:${colorNeutralStroke1Pressed};background-color:${colorNeutralBackground1Pressed}}:host(${pressedState}[appearance='primary']:not(:focus-visible)){border-color:transparent}:host(${pressedState}[appearance='primary']){background-color:${colorBrandBackgroundSelected};color:${colorNeutralForegroundOnBrand}}:host(${pressedState}[appearance='primary']:hover){background-color:${colorBrandBackgroundHover}}:host(${pressedState}[appearance='primary']:active){background-color:${colorBrandBackgroundPressed}}:host(${pressedState}[appearance='subtle']){border-color:transparent;background-color:${colorSubtleBackgroundSelected};color:${colorNeutralForeground2Selected}}:host(${pressedState}[appearance='subtle']:hover){background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground2Hover}}:host(${pressedState}[appearance='subtle']:active){background-color:${colorSubtleBackgroundPressed};color:${colorNeutralForeground2Pressed}}:host(${pressedState}[appearance='outline']),:host(${pressedState}[appearance='transparent']){background-color:${colorTransparentBackgroundSelected}}:host(${pressedState}[appearance='outline']:hover),:host(${pressedState}[appearance='transparent']:hover){background-color:${colorTransparentBackgroundHover}}:host(${pressedState}[appearance='outline']:active),:host(${pressedState}[appearance='transparent']:active){background-color:${colorTransparentBackgroundPressed}}:host(${pressedState}[appearance='transparent']){border-color:transparent;color:${colorNeutralForeground2BrandSelected}}:host(${pressedState}[appearance='transparent']:hover){color:${colorNeutralForeground2BrandHover}}:host(${pressedState}[appearance='transparent']:active){color:${colorNeutralForeground2BrandPressed}}@media (forced-colors:active){:host(${pressedState}),:host( ${pressedState}:is([appearance='primary'],[appearance='subtle'],[appearance='outline'],[appearance='transparent']) ){background:SelectedItem;color:SelectedItemText}}`;
|
|
14108
14101
|
|
|
14109
14102
|
const template$3 = buttonTemplate$1();
|
|
14110
14103
|
|
|
@@ -14177,6 +14170,11 @@ class Tooltip extends FASTElement {
|
|
|
14177
14170
|
* Hide the tooltip on blur
|
|
14178
14171
|
*/
|
|
14179
14172
|
this.blurAnchorHandler = () => this.hideTooltip(0);
|
|
14173
|
+
/**
|
|
14174
|
+
* Indicates whether the tooltip styles have been applied for browsers that do not support anchor positioning.
|
|
14175
|
+
* @internal
|
|
14176
|
+
*/
|
|
14177
|
+
this.anchorPositioningReady = false;
|
|
14180
14178
|
this.elementInternals.role = "tooltip";
|
|
14181
14179
|
}
|
|
14182
14180
|
/**
|
|
@@ -14185,9 +14183,7 @@ class Tooltip extends FASTElement {
|
|
|
14185
14183
|
* @internal
|
|
14186
14184
|
*/
|
|
14187
14185
|
positioningChanged() {
|
|
14188
|
-
|
|
14189
|
-
this.setFallbackStyles();
|
|
14190
|
-
}
|
|
14186
|
+
this.setFallbackStyles();
|
|
14191
14187
|
}
|
|
14192
14188
|
/**
|
|
14193
14189
|
* Reference to the anchor element
|
|
@@ -14199,6 +14195,7 @@ class Tooltip extends FASTElement {
|
|
|
14199
14195
|
}
|
|
14200
14196
|
connectedCallback() {
|
|
14201
14197
|
super.connectedCallback();
|
|
14198
|
+
this.popover ?? (this.popover = "auto");
|
|
14202
14199
|
if (!this.anchorElement) {
|
|
14203
14200
|
return;
|
|
14204
14201
|
}
|
|
@@ -14219,11 +14216,20 @@ class Tooltip extends FASTElement {
|
|
|
14219
14216
|
Updates.enqueue(() => this.setFallbackStyles());
|
|
14220
14217
|
}
|
|
14221
14218
|
disconnectedCallback() {
|
|
14222
|
-
super.disconnectedCallback();
|
|
14223
14219
|
this.anchorElement?.removeEventListener("focus", this.focusAnchorHandler);
|
|
14224
14220
|
this.anchorElement?.removeEventListener("blur", this.blurAnchorHandler);
|
|
14225
14221
|
this.anchorElement?.removeEventListener("mouseenter", this.mouseenterAnchorHandler);
|
|
14226
14222
|
this.anchorElement?.removeEventListener("mouseleave", this.mouseleaveAnchorHandler);
|
|
14223
|
+
if (this.anchorElement) {
|
|
14224
|
+
const describedBy = this.anchorElement.getAttribute("aria-describedby") ?? "";
|
|
14225
|
+
const ids = describedBy.trim().split(/\s+/).filter((id) => id !== this.id);
|
|
14226
|
+
if (ids.length) {
|
|
14227
|
+
this.anchorElement.setAttribute("aria-describedby", ids.join(" "));
|
|
14228
|
+
} else {
|
|
14229
|
+
this.anchorElement.removeAttribute("aria-describedby");
|
|
14230
|
+
}
|
|
14231
|
+
}
|
|
14232
|
+
super.disconnectedCallback();
|
|
14227
14233
|
}
|
|
14228
14234
|
/**
|
|
14229
14235
|
* Shows the tooltip
|
|
@@ -14231,6 +14237,12 @@ class Tooltip extends FASTElement {
|
|
|
14231
14237
|
* @internal
|
|
14232
14238
|
*/
|
|
14233
14239
|
showTooltip(delay = this.defaultDelay) {
|
|
14240
|
+
if (!this.anchorPositioningReady) {
|
|
14241
|
+
this.setFallbackStyles().then(() => {
|
|
14242
|
+
this.showTooltip(delay);
|
|
14243
|
+
});
|
|
14244
|
+
return;
|
|
14245
|
+
}
|
|
14234
14246
|
setTimeout(() => {
|
|
14235
14247
|
this.setAttribute("aria-hidden", "false");
|
|
14236
14248
|
this.showPopover();
|
|
@@ -14251,7 +14263,15 @@ class Tooltip extends FASTElement {
|
|
|
14251
14263
|
this.hidePopover();
|
|
14252
14264
|
}, delay);
|
|
14253
14265
|
}
|
|
14254
|
-
|
|
14266
|
+
/**
|
|
14267
|
+
* Sets fallback styles for the tooltip for browsers that do not support CSS anchor positioning.
|
|
14268
|
+
* @internal
|
|
14269
|
+
*/
|
|
14270
|
+
async setFallbackStyles() {
|
|
14271
|
+
if (AnchorPositioningCSSSupported) {
|
|
14272
|
+
this.anchorPositioningReady = true;
|
|
14273
|
+
return;
|
|
14274
|
+
}
|
|
14255
14275
|
if (!this.anchorElement) {
|
|
14256
14276
|
return;
|
|
14257
14277
|
}
|
|
@@ -14299,7 +14319,8 @@ class Tooltip extends FASTElement {
|
|
|
14299
14319
|
}
|
|
14300
14320
|
`;
|
|
14301
14321
|
if (window.CSS_ANCHOR_POLYFILL) {
|
|
14302
|
-
window.CSS_ANCHOR_POLYFILL
|
|
14322
|
+
await window.CSS_ANCHOR_POLYFILL({ elements: [this.anchorPositioningStyleElement] });
|
|
14323
|
+
this.anchorPositioningReady = true;
|
|
14303
14324
|
}
|
|
14304
14325
|
}
|
|
14305
14326
|
}
|
|
@@ -14580,7 +14601,7 @@ __decorateClass$2([
|
|
|
14580
14601
|
|
|
14581
14602
|
const styles$1 = css`${display("block")} :host{outline:none}`;
|
|
14582
14603
|
|
|
14583
|
-
const template$1 = html`<template focusgroup="menu inline block nowrap nomemory" @click=${(x, c) => x.clickHandler(c.event)} @keydown=${(x, c) => x.keydownHandler(c.event)} @change=${(x, c) => x.changeHandler(c.event)} @toggle=${(x, c) => x.itemToggleHandler()}><slot ${ref("defaultSlot")} @slotchange=${(x) => x.handleDefaultSlotChange()}></slot></template>`;
|
|
14604
|
+
const template$1 = html`<template tabindex=0 focusgroup="menu inline block nowrap nomemory" @click=${(x, c) => x.clickHandler(c.event)} @keydown=${(x, c) => x.keydownHandler(c.event)} @change=${(x, c) => x.changeHandler(c.event)} @toggle=${(x, c) => x.itemToggleHandler()}><slot ${ref("defaultSlot")} @slotchange=${(x) => x.handleDefaultSlotChange()}></slot></template>`;
|
|
14584
14605
|
|
|
14585
14606
|
const definition$1 = Tree.compose({
|
|
14586
14607
|
name: tagName$1,
|
|
@@ -14623,6 +14644,13 @@ class BaseTreeItem extends FASTElement {
|
|
|
14623
14644
|
itemSlotChanged() {
|
|
14624
14645
|
this.handleItemSlotChange();
|
|
14625
14646
|
}
|
|
14647
|
+
connectedCallback() {
|
|
14648
|
+
super.connectedCallback();
|
|
14649
|
+
this.tabIndex = Number(this.getAttribute("tabindex") || "0");
|
|
14650
|
+
if (isTreeItem(this.parentElement)) {
|
|
14651
|
+
this.slot || (this.slot = "item");
|
|
14652
|
+
}
|
|
14653
|
+
}
|
|
14626
14654
|
/**
|
|
14627
14655
|
* Handles changes to the expanded attribute
|
|
14628
14656
|
* @param prev - the previous state
|
|
@@ -14636,7 +14664,7 @@ class BaseTreeItem extends FASTElement {
|
|
|
14636
14664
|
newState: next ? "open" : "closed"
|
|
14637
14665
|
});
|
|
14638
14666
|
toggleState(this.elementInternals, "expanded", next);
|
|
14639
|
-
if (this.childTreeItems
|
|
14667
|
+
if (this.childTreeItems?.length) {
|
|
14640
14668
|
this.elementInternals.ariaExpanded = next ? "true" : "false";
|
|
14641
14669
|
requestAnimationFrame(() => {
|
|
14642
14670
|
const walker = document.createTreeWalker(
|
|
@@ -14667,8 +14695,10 @@ class BaseTreeItem extends FASTElement {
|
|
|
14667
14695
|
*/
|
|
14668
14696
|
selectedChanged(prev, next) {
|
|
14669
14697
|
this.$emit("change");
|
|
14670
|
-
|
|
14671
|
-
|
|
14698
|
+
if (this.elementInternals) {
|
|
14699
|
+
toggleState(this.elementInternals, "selected", next);
|
|
14700
|
+
this.elementInternals.ariaSelected = next ? "true" : "false";
|
|
14701
|
+
}
|
|
14672
14702
|
}
|
|
14673
14703
|
dataIndentChanged(prev, next) {
|
|
14674
14704
|
if (this.styles !== void 0) {
|
|
@@ -14830,7 +14860,7 @@ __decorateClass([
|
|
|
14830
14860
|
const styles = css`${display("block")} :host{outline:none;font-size:${fontSizeBase300};line-height:${lineHeightBase300}}:host(:focus-visible) .positioning-region{box-shadow:${spacingVerticalNone} ${spacingVerticalNone} ${spacingVerticalNone} ${spacingVerticalXXS} ${colorStrokeFocus2} inset}.positioning-region{display:flex;align-items:center;justify-content:space-between;cursor:pointer;height:${spacingVerticalXXXL};padding-inline-start:calc(var(--indent) * ${spacingHorizontalXXL});padding-inline-end:${spacingVerticalS};border-radius:${borderRadiusMedium};background-color:${colorSubtleBackground};color:${colorNeutralForeground2};gap:${spacingHorizontalXS}}@media (prefers-contrast:more){:host(:focus-visible) .positioning-region{outline:1px solid ${colorStrokeFocus2}}}.content{display:flex;align-items:center;gap:${spacingHorizontalXS}}.chevron{display:flex;align-items:center;flex-shrink:0;justify-content:center;width:${spacingHorizontalXXL};height:${spacingVerticalXXL};transition:transform ${durationFaster} ${curveEasyEaseMax};transform:rotate(0deg)}.chevron:dir(rtl){transform:rotate(180deg)}.chevron svg{inline-size:12px;block-size:12px}.aside{display:flex;align-items:center}.positioning-region:hover{background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground2Hover}}.positioning-region:active{background-color:${colorSubtleBackgroundPressed};color:${colorNeutralForeground2Pressed}}::slotted([slot='start']),::slotted([slot='end']),::slotted(:not([slot])){display:flex;align-items:center;min-width:0}::slotted([slot='start']){flex-shrink:0}::slotted(:not([slot])){padding-inline:${spacingHorizontalXXS}}.items{display:none}:host([expanded]) .items{display:block}:host([empty]) .chevron,:host([empty]) .items{visibility:hidden}:host([selected]) .positioning-region{background-color:${colorSubtleBackgroundSelected};color:${colorNeutralForeground2Selected}}:host([selected]) .content,:host([selected]) .chevron{color:${colorNeutralForeground3Selected}}:host([size='small']) .positioning-region{height:${spacingVerticalXXL};padding-inline-start:calc(var(--indent) * ${spacingHorizontalM})}:host([appearance='subtle-alpha']) .positioning-region:hover{background-color:${colorSubtleBackgroundLightAlphaHover}}:host([appearance='subtle-alpha']) .positioning-region:active{background-color:${colorSubtleBackgroundLightAlphaPressed}}:host([appearance='subtle-alpha'][selected]) .positioning-region{background-color:${colorSubtleBackgroundLightAlphaSelected};color:${colorNeutralForeground2Selected}}:host([appearance='transparent']) .positioning-region{background-color:${colorTransparentBackground}}:host([appearance='transparent']) .positioning-region:hover{background-color:${colorTransparentBackgroundHover}}:host([appearance='transparent']) .positioning-region:active{background-color:${colorTransparentBackgroundPressed}}:host([appearance='transparent'][selected]) .positioning-region{background-color:${colorTransparentBackgroundSelected};color:${colorNeutralForeground2Selected}}:host([expanded]) .chevron{transform:rotate(90deg)}`;
|
|
14831
14861
|
|
|
14832
14862
|
const chevronIcon = html`<svg viewBox="0 0 12 12" fill=currentColor><path d="M4.65 2.15a.5.5 0 000 .7L7.79 6 4.65 9.15a.5.5 0 10.7.7l3.5-3.5a.5.5 0 000-.7l-3.5-3.5a.5.5 0 00-.7 0z"></path></svg>`;
|
|
14833
|
-
const template = html`<template
|
|
14863
|
+
const template = html`<template tabindex=0 ?focusgroupstart=${(x) => x.selected}><div class=positioning-region part=positioning-region><div class=content part=content><span class=chevron part=chevron aria-hidden=true><slot name=chevron>${chevronIcon}</slot></span><slot name=start></slot><slot></slot><slot name=end></slot></div><div class=aside part=aside><slot name=aside></slot></div></div><div role=group class=items part=items><slot name=item ${ref("itemSlot")} @slotchange=${(x) => x.handleItemSlotChange()}></slot></div></template>`;
|
|
14834
14864
|
|
|
14835
14865
|
const definition = TreeItem.compose({
|
|
14836
14866
|
name: tagName,
|
|
@@ -14971,4 +15001,4 @@ function forceRepaint(element) {
|
|
|
14971
15001
|
|
|
14972
15002
|
globalThis.Fluent = { ...globalThis.Fluent, setTheme };
|
|
14973
15003
|
|
|
14974
|
-
export { Accordion, AccordionExpandMode, AccordionItem, AccordionItemMarkerPosition, AccordionItemSize, AnchorButton, AnchorButtonAppearance, definition$D as AnchorButtonDefinition, AnchorButtonShape, AnchorButtonSize, template$D as AnchorButtonTemplate, AnchorTarget, Avatar, AvatarActive, AvatarAppearance, AvatarColor, definition$C as AvatarDefinition, AvatarNamedColor, AvatarShape, AvatarSize, styles$A as AvatarStyles, template$C as AvatarTemplate, Badge, BadgeAppearance, BadgeColor, definition$B as BadgeDefinition, BadgeShape, BadgeSize, styles$z as BadgeStyles, template$B as BadgeTemplate, BaseAccordionItem, BaseAnchor, BaseAvatar, BaseButton, BaseCheckbox, BaseCounterBadge, BaseDivider, BaseDropdown, BaseField, BaseMenuList, BaseProgressBar, BaseRadioGroup, BaseRatingDisplay, BaseSpinner, BaseTablist, BaseTextArea, BaseTextInput, BaseTree, Button, ButtonAppearance, definition$A as ButtonDefinition, ButtonFormTarget, ButtonShape, ButtonSize, styles$C as ButtonStyles, template$A as ButtonTemplate, ButtonType, Checkbox, definition$z as CheckboxDefinition, CheckboxShape, CheckboxSize, styles$y as CheckboxStyles, template$z as CheckboxTemplate, CompoundButton, CompoundButtonAppearance, definition$y as CompoundButtonDefinition, CompoundButtonShape, CompoundButtonSize, styles$x as CompoundButtonStyles, template$y as CompoundButtonTemplate, CounterBadge, CounterBadgeAppearance, CounterBadgeColor, definition$x as CounterBadgeDefinition, CounterBadgeShape, CounterBadgeSize, styles$w as CounterBadgeStyles, tagName$x as CounterBadgeTagName, template$x as CounterBadgeTemplate, Dialog, DialogBody, definition$v as DialogBodyDefinition, styles$u as DialogBodyStyles, template$v as DialogBodyTemplate, definition$w as DialogDefinition, styles$v as DialogStyles, template$w as DialogTemplate, DialogType, Direction, Divider, DividerAlignContent, DividerAppearance, definition$u as DividerDefinition, DividerOrientation, DividerRole, styles$t as DividerStyles, template$u as DividerTemplate, Drawer, DrawerBody, definition$s as DrawerBodyDefinition, styles$r as DrawerBodyStyles, template$s as DrawerBodyTemplate, definition$t as DrawerDefinition, DrawerPosition, DrawerSize, styles$s as DrawerStyles, template$t as DrawerTemplate, DrawerType, Dropdown, DropdownAppearance, definition$r as DropdownDefinition, DropdownOption, definition$g as DropdownOptionDefinition, styles$g as DropdownOptionStyles, template$g as DropdownOptionTemplate, DropdownSize, styles$q as DropdownStyles, template$r as DropdownTemplate, DropdownType, Field, definition$q as FieldDefinition, LabelPosition as FieldLabelPosition, styles$p as FieldStyles, template$q as FieldTemplate, FluentDesignSystem, Image, definition$p as ImageDefinition, ImageFit, ImageShape, styles$o as ImageStyles, template$p as ImageTemplate, Label, definition$o as LabelDefinition, LabelSize, styles$n as LabelStyles, template$o as LabelTemplate, LabelWeight, Link, LinkAppearance, definition$n as LinkDefinition, styles$m as LinkStyles, LinkTarget, template$n as LinkTemplate, Listbox, definition$m as ListboxDefinition, styles$l as ListboxStyles, template$m as ListboxTemplate, Menu, MenuButton, MenuButtonAppearance, definition$l as MenuButtonDefinition, MenuButtonShape, MenuButtonSize, styles$C as MenuButtonStyles, template$l as MenuButtonTemplate, definition$i as MenuDefinition, MenuItem, definition$k as MenuItemDefinition, MenuItemRole, styles$k as MenuItemStyles, template$k as MenuItemTemplate, MenuList, definition$j as MenuListDefinition, styles$j as MenuListStyles, template$j as MenuListTemplate, styles$i as MenuStyles, template$i as MenuTemplate, MessageBar, definition$h as MessageBarDefinition, MessageBarIntent, MessageBarLayout, MessageBarShape, styles$h as MessageBarStyles, template$h as MessageBarTemplate, Orientation, ProgressBar, definition$f as ProgressBarDefinition, ProgressBarShape, styles$f as ProgressBarStyles, template$f as ProgressBarTemplate, ProgressBarThickness, ProgressBarValidationState, Radio, definition$d as RadioDefinition, RadioGroup, definition$e as RadioGroupDefinition, RadioGroupOrientation, styles$e as RadioGroupStyles, template$e as RadioGroupTemplate, styles$d as RadioStyles, template$d as RadioTemplate, RatingDisplay, RatingDisplayColor, definition$c as RatingDisplayDefinition, RatingDisplaySize, styles$c as RatingDisplayStyles, template$c as RatingDisplayTemplate, Slider, definition$b as SliderDefinition, SliderMode, SliderOrientation, SliderSize, styles$b as SliderStyles, template$b as SliderTemplate, Spinner, SpinnerAppearance, definition$a as SpinnerDefinition, SpinnerSize, styles$a as SpinnerStyles, template$a as SpinnerTemplate, StartEnd, Switch, definition$9 as SwitchDefinition, SwitchLabelPosition, styles$9 as SwitchStyles, template$9 as SwitchTemplate, Tab, definition$8 as TabDefinition, styles$8 as TabStyles, template$8 as TabTemplate, Tablist, TablistAppearance, definition$7 as TablistDefinition, TablistOrientation, TablistSize, styles$7 as TablistStyles, template$7 as TablistTemplate, Text, TextAlign, TextArea, TextAreaAppearance, TextAreaAppearancesForDisplayShadow, TextAreaAutocomplete, definition$6 as TextAreaDefinition, TextAreaResize, TextAreaSize, styles$6 as TextAreaStyles, template$6 as TextAreaTemplate, definition$4 as TextDefinition, TextFont, TextInput, TextInputAppearance, TextInputControlSize, definition$5 as TextInputDefinition, styles$5 as TextInputStyles, template$5 as TextInputTemplate, TextInputType, TextSize, styles$4 as TextStyles, template$4 as TextTemplate, TextWeight, ToggleButton, ToggleButtonAppearance, definition$3 as ToggleButtonDefinition, ToggleButtonShape, ToggleButtonSize, styles$3 as ToggleButtonStyles, template$3 as ToggleButtonTemplate, Tooltip, definition$2 as TooltipDefinition, TooltipPositioningOption, styles$2 as TooltipStyles, template$2 as TooltipTemplate, Tree, definition$1 as TreeDefinition, TreeItem, definition as TreeItemDefinition, styles as TreeItemStyles, template as TreeItemTemplate, styles$1 as TreeStyles, template$1 as TreeTemplate, ValidationFlags, definition$E as accordionDefinition, definition$F as accordionItemDefinition, styles$E as accordionItemStyles, template$F as accordionItemTemplate, styles$D as accordionStyles, template$E as accordionTemplate, borderRadius2XLarge, borderRadius3XLarge, borderRadius4XLarge, borderRadius5XLarge, borderRadius6XLarge, borderRadiusCircular, borderRadiusLarge, borderRadiusMedium, borderRadiusNone, borderRadiusSmall, borderRadiusXLarge, colorBackgroundOverlay, colorBrandBackground, colorBrandBackground2, colorBrandBackground2Hover, colorBrandBackground2Pressed, colorBrandBackground3Static, colorBrandBackground4Static, colorBrandBackgroundHover, colorBrandBackgroundInverted, colorBrandBackgroundInvertedHover, colorBrandBackgroundInvertedPressed, colorBrandBackgroundInvertedSelected, colorBrandBackgroundPressed, colorBrandBackgroundSelected, colorBrandBackgroundStatic, colorBrandForeground1, colorBrandForeground2, colorBrandForeground2Hover, colorBrandForeground2Pressed, colorBrandForegroundInverted, colorBrandForegroundInvertedHover, colorBrandForegroundInvertedPressed, colorBrandForegroundLink, colorBrandForegroundLinkHover, colorBrandForegroundLinkPressed, colorBrandForegroundLinkSelected, colorBrandForegroundOnLight, colorBrandForegroundOnLightHover, colorBrandForegroundOnLightPressed, colorBrandForegroundOnLightSelected, colorBrandShadowAmbient, colorBrandShadowKey, colorBrandStroke1, colorBrandStroke2, colorBrandStroke2Contrast, colorBrandStroke2Hover, colorBrandStroke2Pressed, colorCompoundBrandBackground, colorCompoundBrandBackgroundHover, colorCompoundBrandBackgroundPressed, colorCompoundBrandForeground1, colorCompoundBrandForeground1Hover, colorCompoundBrandForeground1Pressed, colorCompoundBrandStroke, colorCompoundBrandStrokeHover, colorCompoundBrandStrokePressed, colorNeutralBackground1, colorNeutralBackground1Hover, colorNeutralBackground1Pressed, colorNeutralBackground1Selected, colorNeutralBackground2, colorNeutralBackground2Hover, colorNeutralBackground2Pressed, colorNeutralBackground2Selected, colorNeutralBackground3, colorNeutralBackground3Hover, colorNeutralBackground3Pressed, colorNeutralBackground3Selected, colorNeutralBackground4, colorNeutralBackground4Hover, colorNeutralBackground4Pressed, colorNeutralBackground4Selected, colorNeutralBackground5, colorNeutralBackground5Hover, colorNeutralBackground5Pressed, colorNeutralBackground5Selected, colorNeutralBackground6, colorNeutralBackground7, colorNeutralBackground7Hover, colorNeutralBackground7Pressed, colorNeutralBackground7Selected, colorNeutralBackground8, colorNeutralBackgroundAlpha, colorNeutralBackgroundAlpha2, colorNeutralBackgroundDisabled, colorNeutralBackgroundDisabled2, colorNeutralBackgroundInverted, colorNeutralBackgroundInvertedDisabled, colorNeutralBackgroundInvertedHover, colorNeutralBackgroundInvertedPressed, colorNeutralBackgroundInvertedSelected, colorNeutralBackgroundStatic, colorNeutralCardBackground, colorNeutralCardBackgroundDisabled, colorNeutralCardBackgroundHover, colorNeutralCardBackgroundPressed, colorNeutralCardBackgroundSelected, colorNeutralForeground1, colorNeutralForeground1Hover, colorNeutralForeground1Pressed, colorNeutralForeground1Selected, colorNeutralForeground1Static, colorNeutralForeground2, colorNeutralForeground2BrandHover, colorNeutralForeground2BrandPressed, colorNeutralForeground2BrandSelected, colorNeutralForeground2Hover, colorNeutralForeground2Link, colorNeutralForeground2LinkHover, colorNeutralForeground2LinkPressed, colorNeutralForeground2LinkSelected, colorNeutralForeground2Pressed, colorNeutralForeground2Selected, colorNeutralForeground3, colorNeutralForeground3BrandHover, colorNeutralForeground3BrandPressed, colorNeutralForeground3BrandSelected, colorNeutralForeground3Hover, colorNeutralForeground3Pressed, colorNeutralForeground3Selected, colorNeutralForeground4, colorNeutralForeground5, colorNeutralForeground5Hover, colorNeutralForeground5Pressed, colorNeutralForeground5Selected, colorNeutralForegroundDisabled, colorNeutralForegroundInverted, colorNeutralForegroundInverted2, colorNeutralForegroundInvertedDisabled, colorNeutralForegroundInvertedHover, colorNeutralForegroundInvertedLink, colorNeutralForegroundInvertedLinkHover, colorNeutralForegroundInvertedLinkPressed, colorNeutralForegroundInvertedLinkSelected, colorNeutralForegroundInvertedPressed, colorNeutralForegroundInvertedSelected, colorNeutralForegroundOnBrand, colorNeutralForegroundStaticInverted, colorNeutralShadowAmbient, colorNeutralShadowAmbientDarker, colorNeutralShadowAmbientLighter, colorNeutralShadowKey, colorNeutralShadowKeyDarker, colorNeutralShadowKeyLighter, colorNeutralStencil1, colorNeutralStencil1Alpha, colorNeutralStencil2, colorNeutralStencil2Alpha, colorNeutralStroke1, colorNeutralStroke1Hover, colorNeutralStroke1Pressed, colorNeutralStroke1Selected, colorNeutralStroke2, colorNeutralStroke3, colorNeutralStroke4, colorNeutralStroke4Hover, colorNeutralStroke4Pressed, colorNeutralStroke4Selected, colorNeutralStrokeAccessible, colorNeutralStrokeAccessibleHover, colorNeutralStrokeAccessiblePressed, colorNeutralStrokeAccessibleSelected, colorNeutralStrokeAlpha, colorNeutralStrokeAlpha2, colorNeutralStrokeDisabled, colorNeutralStrokeDisabled2, colorNeutralStrokeInvertedDisabled, colorNeutralStrokeOnBrand, colorNeutralStrokeOnBrand2, colorNeutralStrokeOnBrand2Hover, colorNeutralStrokeOnBrand2Pressed, colorNeutralStrokeOnBrand2Selected, colorNeutralStrokeSubtle, colorPaletteAnchorBackground2, colorPaletteAnchorBorderActive, colorPaletteAnchorForeground2, colorPaletteBeigeBackground2, colorPaletteBeigeBorderActive, colorPaletteBeigeForeground2, colorPaletteBerryBackground1, colorPaletteBerryBackground2, colorPaletteBerryBackground3, colorPaletteBerryBorder1, colorPaletteBerryBorder2, colorPaletteBerryBorderActive, colorPaletteBerryForeground1, colorPaletteBerryForeground2, colorPaletteBerryForeground3, colorPaletteBlueBackground2, colorPaletteBlueBorderActive, colorPaletteBlueForeground2, colorPaletteBrassBackground2, colorPaletteBrassBorderActive, colorPaletteBrassForeground2, colorPaletteBrownBackground2, colorPaletteBrownBorderActive, colorPaletteBrownForeground2, colorPaletteCornflowerBackground2, colorPaletteCornflowerBorderActive, colorPaletteCornflowerForeground2, colorPaletteCranberryBackground2, colorPaletteCranberryBorderActive, colorPaletteCranberryForeground2, colorPaletteDarkGreenBackground2, colorPaletteDarkGreenBorderActive, colorPaletteDarkGreenForeground2, colorPaletteDarkOrangeBackground1, colorPaletteDarkOrangeBackground2, colorPaletteDarkOrangeBackground3, colorPaletteDarkOrangeBorder1, colorPaletteDarkOrangeBorder2, colorPaletteDarkOrangeBorderActive, colorPaletteDarkOrangeForeground1, colorPaletteDarkOrangeForeground2, colorPaletteDarkOrangeForeground3, colorPaletteDarkRedBackground2, colorPaletteDarkRedBorderActive, colorPaletteDarkRedForeground2, colorPaletteForestBackground2, colorPaletteForestBorderActive, colorPaletteForestForeground2, colorPaletteGoldBackground2, colorPaletteGoldBorderActive, colorPaletteGoldForeground2, colorPaletteGrapeBackground2, colorPaletteGrapeBorderActive, colorPaletteGrapeForeground2, colorPaletteGreenBackground1, colorPaletteGreenBackground2, colorPaletteGreenBackground3, colorPaletteGreenBorder1, colorPaletteGreenBorder2, colorPaletteGreenBorderActive, colorPaletteGreenForeground1, colorPaletteGreenForeground2, colorPaletteGreenForeground3, colorPaletteGreenForegroundInverted, colorPaletteLavenderBackground2, colorPaletteLavenderBorderActive, colorPaletteLavenderForeground2, colorPaletteLightGreenBackground1, colorPaletteLightGreenBackground2, colorPaletteLightGreenBackground3, colorPaletteLightGreenBorder1, colorPaletteLightGreenBorder2, colorPaletteLightGreenBorderActive, colorPaletteLightGreenForeground1, colorPaletteLightGreenForeground2, colorPaletteLightGreenForeground3, colorPaletteLightTealBackground2, colorPaletteLightTealBorderActive, colorPaletteLightTealForeground2, colorPaletteLilacBackground2, colorPaletteLilacBorderActive, colorPaletteLilacForeground2, colorPaletteMagentaBackground2, colorPaletteMagentaBorderActive, colorPaletteMagentaForeground2, colorPaletteMarigoldBackground1, colorPaletteMarigoldBackground2, colorPaletteMarigoldBackground3, colorPaletteMarigoldBorder1, colorPaletteMarigoldBorder2, colorPaletteMarigoldBorderActive, colorPaletteMarigoldForeground1, colorPaletteMarigoldForeground2, colorPaletteMarigoldForeground3, colorPaletteMinkBackground2, colorPaletteMinkBorderActive, colorPaletteMinkForeground2, colorPaletteNavyBackground2, colorPaletteNavyBorderActive, colorPaletteNavyForeground2, colorPalettePeachBackground2, colorPalettePeachBorderActive, colorPalettePeachForeground2, colorPalettePinkBackground2, colorPalettePinkBorderActive, colorPalettePinkForeground2, colorPalettePlatinumBackground2, colorPalettePlatinumBorderActive, colorPalettePlatinumForeground2, colorPalettePlumBackground2, colorPalettePlumBorderActive, colorPalettePlumForeground2, colorPalettePumpkinBackground2, colorPalettePumpkinBorderActive, colorPalettePumpkinForeground2, colorPalettePurpleBackground2, colorPalettePurpleBorderActive, colorPalettePurpleForeground2, colorPaletteRedBackground1, colorPaletteRedBackground2, colorPaletteRedBackground3, colorPaletteRedBorder1, colorPaletteRedBorder2, colorPaletteRedBorderActive, colorPaletteRedForeground1, colorPaletteRedForeground2, colorPaletteRedForeground3, colorPaletteRedForegroundInverted, colorPaletteRoyalBlueBackground2, colorPaletteRoyalBlueBorderActive, colorPaletteRoyalBlueForeground2, colorPaletteSeafoamBackground2, colorPaletteSeafoamBorderActive, colorPaletteSeafoamForeground2, colorPaletteSteelBackground2, colorPaletteSteelBorderActive, colorPaletteSteelForeground2, colorPaletteTealBackground2, colorPaletteTealBorderActive, colorPaletteTealForeground2, colorPaletteYellowBackground1, colorPaletteYellowBackground2, colorPaletteYellowBackground3, colorPaletteYellowBorder1, colorPaletteYellowBorder2, colorPaletteYellowBorderActive, colorPaletteYellowForeground1, colorPaletteYellowForeground2, colorPaletteYellowForeground3, colorPaletteYellowForegroundInverted, colorScrollbarOverlay, colorStatusDangerBackground1, colorStatusDangerBackground2, colorStatusDangerBackground3, colorStatusDangerBackground3Hover, colorStatusDangerBackground3Pressed, colorStatusDangerBorder1, colorStatusDangerBorder2, colorStatusDangerBorderActive, colorStatusDangerForeground1, colorStatusDangerForeground2, colorStatusDangerForeground3, colorStatusDangerForegroundInverted, colorStatusSuccessBackground1, colorStatusSuccessBackground2, colorStatusSuccessBackground3, colorStatusSuccessBorder1, colorStatusSuccessBorder2, colorStatusSuccessBorderActive, colorStatusSuccessForeground1, colorStatusSuccessForeground2, colorStatusSuccessForeground3, colorStatusSuccessForegroundInverted, colorStatusWarningBackground1, colorStatusWarningBackground2, colorStatusWarningBackground3, colorStatusWarningBorder1, colorStatusWarningBorder2, colorStatusWarningBorderActive, colorStatusWarningForeground1, colorStatusWarningForeground2, colorStatusWarningForeground3, colorStatusWarningForegroundInverted, colorStrokeFocus1, colorStrokeFocus2, colorSubtleBackground, colorSubtleBackgroundHover, colorSubtleBackgroundInverted, colorSubtleBackgroundInvertedHover, colorSubtleBackgroundInvertedPressed, colorSubtleBackgroundInvertedSelected, colorSubtleBackgroundLightAlphaHover, colorSubtleBackgroundLightAlphaPressed, colorSubtleBackgroundLightAlphaSelected, colorSubtleBackgroundPressed, colorSubtleBackgroundSelected, colorTransparentBackground, colorTransparentBackgroundHover, colorTransparentBackgroundPressed, colorTransparentBackgroundSelected, colorTransparentStroke, colorTransparentStrokeDisabled, colorTransparentStrokeInteractive, curveAccelerateMax, curveAccelerateMid, curveAccelerateMin, curveDecelerateMax, curveDecelerateMid, curveDecelerateMin, curveEasyEase, curveEasyEaseMax, curveLinear, display, dropdownButtonTemplate, dropdownInputTemplate, durationFast, durationFaster, durationGentle, durationNormal, durationSlow, durationSlower, durationUltraFast, durationUltraSlow, endSlotTemplate, fontFamilyBase, fontFamilyMonospace, fontFamilyNumeric, fontSizeBase100, fontSizeBase200, fontSizeBase300, fontSizeBase400, fontSizeBase500, fontSizeBase600, fontSizeHero1000, fontSizeHero700, fontSizeHero800, fontSizeHero900, fontWeightBold, fontWeightMedium, fontWeightRegular, fontWeightSemibold, getDirection, isDialog, isDropdown, isDropdownOption, isListbox, isTab, lineHeightBase100, lineHeightBase200, lineHeightBase300, lineHeightBase400, lineHeightBase500, lineHeightBase600, lineHeightHero1000, lineHeightHero700, lineHeightHero800, lineHeightHero900, listboxTemplate, roleForMenuItem, setTheme, shadow16, shadow16Brand, shadow2, shadow28, shadow28Brand, shadow2Brand, shadow4, shadow4Brand, shadow64, shadow64Brand, shadow8, shadow8Brand, spacingHorizontalL, spacingHorizontalM, spacingHorizontalMNudge, spacingHorizontalNone, spacingHorizontalS, spacingHorizontalSNudge, spacingHorizontalXL, spacingHorizontalXS, spacingHorizontalXXL, spacingHorizontalXXS, spacingHorizontalXXXL, spacingVerticalL, spacingVerticalM, spacingVerticalMNudge, spacingVerticalNone, spacingVerticalS, spacingVerticalSNudge, spacingVerticalXL, spacingVerticalXS, spacingVerticalXXL, spacingVerticalXXS, spacingVerticalXXXL, startSlotTemplate, strokeWidthThick, strokeWidthThicker, strokeWidthThickest, strokeWidthThin, typographyBody1StrongStyles, typographyBody1StrongerStyles, typographyBody1Styles, typographyBody2Styles, typographyCaption1StrongStyles, typographyCaption1StrongerStyles, typographyCaption1Styles, typographyCaption2StrongStyles, typographyCaption2Styles, typographyDisplayStyles, typographyLargeTitleStyles, typographySubtitle1Styles, typographySubtitle2StrongerStyles, typographySubtitle2Styles, typographyTitle1Styles, typographyTitle2Styles, typographyTitle3Styles, zIndexBackground, zIndexContent, zIndexDebug, zIndexFloating, zIndexMessages, zIndexOverlay, zIndexPopup, zIndexPriority };
|
|
15004
|
+
export { Accordion, AccordionExpandMode, AccordionItem, AccordionItemMarkerPosition, AccordionItemSize, AnchorButton, AnchorButtonAppearance, definition$D as AnchorButtonDefinition, AnchorButtonShape, AnchorButtonSize, template$D as AnchorButtonTemplate, AnchorTarget, Avatar, AvatarActive, AvatarAppearance, AvatarColor, definition$C as AvatarDefinition, AvatarNamedColor, AvatarShape, AvatarSize, styles$B as AvatarStyles, template$C as AvatarTemplate, Badge, BadgeAppearance, BadgeColor, definition$B as BadgeDefinition, BadgeShape, BadgeSize, styles$A as BadgeStyles, template$B as BadgeTemplate, BaseAccordionItem, BaseAnchor, BaseAvatar, BaseButton, BaseCheckbox, BaseCounterBadge, BaseDivider, BaseDropdown, BaseField, BaseMenuList, BaseProgressBar, BaseRadioGroup, BaseRatingDisplay, BaseSpinner, BaseTablist, BaseTextArea, BaseTextInput, BaseTree, Button, ButtonAppearance, definition$A as ButtonDefinition, ButtonFormTarget, ButtonShape, ButtonSize, styles$D as ButtonStyles, template$A as ButtonTemplate, ButtonType, Checkbox, definition$z as CheckboxDefinition, CheckboxShape, CheckboxSize, styles$z as CheckboxStyles, template$z as CheckboxTemplate, CompoundButton, CompoundButtonAppearance, definition$y as CompoundButtonDefinition, CompoundButtonShape, CompoundButtonSize, styles$y as CompoundButtonStyles, template$y as CompoundButtonTemplate, CounterBadge, CounterBadgeAppearance, CounterBadgeColor, definition$x as CounterBadgeDefinition, CounterBadgeShape, CounterBadgeSize, styles$x as CounterBadgeStyles, tagName$x as CounterBadgeTagName, template$x as CounterBadgeTemplate, Dialog, DialogBody, definition$v as DialogBodyDefinition, styles$v as DialogBodyStyles, template$v as DialogBodyTemplate, definition$w as DialogDefinition, styles$w as DialogStyles, template$w as DialogTemplate, DialogType, Direction, Divider, DividerAlignContent, DividerAppearance, definition$u as DividerDefinition, DividerOrientation, DividerRole, styles$u as DividerStyles, template$u as DividerTemplate, Drawer, DrawerBody, definition$s as DrawerBodyDefinition, styles$s as DrawerBodyStyles, template$s as DrawerBodyTemplate, definition$t as DrawerDefinition, DrawerPosition, DrawerSize, styles$t as DrawerStyles, template$t as DrawerTemplate, DrawerType, Dropdown, DropdownAppearance, definition$r as DropdownDefinition, DropdownOption, definition$g as DropdownOptionDefinition, styles$g as DropdownOptionStyles, template$g as DropdownOptionTemplate, DropdownSize, styles$r as DropdownStyles, template$r as DropdownTemplate, DropdownType, Field, definition$q as FieldDefinition, LabelPosition as FieldLabelPosition, styles$q as FieldStyles, template$q as FieldTemplate, FluentDesignSystem, Image, definition$p as ImageDefinition, ImageFit, ImageShape, styles$p as ImageStyles, template$p as ImageTemplate, Label, definition$o as LabelDefinition, LabelSize, styles$o as LabelStyles, template$o as LabelTemplate, LabelWeight, Link, LinkAppearance, definition$n as LinkDefinition, styles$n as LinkStyles, LinkTarget, template$n as LinkTemplate, Listbox, definition$m as ListboxDefinition, styles$m as ListboxStyles, template$m as ListboxTemplate, Menu, MenuButton, MenuButtonAppearance, definition$l as MenuButtonDefinition, MenuButtonShape, MenuButtonSize, styles$D as MenuButtonStyles, template$l as MenuButtonTemplate, definition$i as MenuDefinition, MenuItem, definition$k as MenuItemDefinition, MenuItemRole, styles$k as MenuItemStyles, template$k as MenuItemTemplate, MenuList, definition$j as MenuListDefinition, styles$j as MenuListStyles, template$j as MenuListTemplate, styles$i as MenuStyles, template$i as MenuTemplate, MessageBar, definition$h as MessageBarDefinition, MessageBarIntent, MessageBarLayout, MessageBarShape, styles$h as MessageBarStyles, template$h as MessageBarTemplate, Orientation, ProgressBar, definition$f as ProgressBarDefinition, ProgressBarShape, styles$f as ProgressBarStyles, template$f as ProgressBarTemplate, ProgressBarThickness, ProgressBarValidationState, Radio, definition$d as RadioDefinition, RadioGroup, definition$e as RadioGroupDefinition, RadioGroupOrientation, styles$e as RadioGroupStyles, template$e as RadioGroupTemplate, styles$d as RadioStyles, template$d as RadioTemplate, RatingDisplay, RatingDisplayColor, definition$c as RatingDisplayDefinition, RatingDisplaySize, styles$c as RatingDisplayStyles, template$c as RatingDisplayTemplate, Slider, definition$b as SliderDefinition, SliderMode, SliderOrientation, SliderSize, styles$b as SliderStyles, template$b as SliderTemplate, Spinner, SpinnerAppearance, definition$a as SpinnerDefinition, SpinnerSize, styles$a as SpinnerStyles, template$a as SpinnerTemplate, StartEnd, Switch, definition$9 as SwitchDefinition, SwitchLabelPosition, styles$9 as SwitchStyles, template$9 as SwitchTemplate, Tab, definition$8 as TabDefinition, styles$8 as TabStyles, template$8 as TabTemplate, Tablist, TablistAppearance, definition$7 as TablistDefinition, TablistOrientation, TablistSize, styles$7 as TablistStyles, template$7 as TablistTemplate, Text, TextAlign, TextArea, TextAreaAppearance, TextAreaAppearancesForDisplayShadow, TextAreaAutocomplete, definition$6 as TextAreaDefinition, TextAreaResize, TextAreaSize, styles$6 as TextAreaStyles, template$6 as TextAreaTemplate, definition$4 as TextDefinition, TextFont, TextInput, TextInputAppearance, TextInputControlSize, definition$5 as TextInputDefinition, styles$5 as TextInputStyles, template$5 as TextInputTemplate, TextInputType, TextSize, styles$4 as TextStyles, template$4 as TextTemplate, TextWeight, ToggleButton, ToggleButtonAppearance, definition$3 as ToggleButtonDefinition, ToggleButtonShape, ToggleButtonSize, styles$3 as ToggleButtonStyles, template$3 as ToggleButtonTemplate, Tooltip, definition$2 as TooltipDefinition, TooltipPositioningOption, styles$2 as TooltipStyles, template$2 as TooltipTemplate, Tree, definition$1 as TreeDefinition, TreeItem, definition as TreeItemDefinition, styles as TreeItemStyles, template as TreeItemTemplate, styles$1 as TreeStyles, template$1 as TreeTemplate, ValidationFlags, definition$E as accordionDefinition, definition$F as accordionItemDefinition, styles$F as accordionItemStyles, template$F as accordionItemTemplate, styles$E as accordionStyles, template$E as accordionTemplate, borderRadius2XLarge, borderRadius3XLarge, borderRadius4XLarge, borderRadius5XLarge, borderRadius6XLarge, borderRadiusCircular, borderRadiusLarge, borderRadiusMedium, borderRadiusNone, borderRadiusSmall, borderRadiusXLarge, colorBackgroundOverlay, colorBrandBackground, colorBrandBackground2, colorBrandBackground2Hover, colorBrandBackground2Pressed, colorBrandBackground3Static, colorBrandBackground4Static, colorBrandBackgroundHover, colorBrandBackgroundInverted, colorBrandBackgroundInvertedHover, colorBrandBackgroundInvertedPressed, colorBrandBackgroundInvertedSelected, colorBrandBackgroundPressed, colorBrandBackgroundSelected, colorBrandBackgroundStatic, colorBrandForeground1, colorBrandForeground2, colorBrandForeground2Hover, colorBrandForeground2Pressed, colorBrandForegroundInverted, colorBrandForegroundInvertedHover, colorBrandForegroundInvertedPressed, colorBrandForegroundLink, colorBrandForegroundLinkHover, colorBrandForegroundLinkPressed, colorBrandForegroundLinkSelected, colorBrandForegroundOnLight, colorBrandForegroundOnLightHover, colorBrandForegroundOnLightPressed, colorBrandForegroundOnLightSelected, colorBrandShadowAmbient, colorBrandShadowKey, colorBrandStroke1, colorBrandStroke2, colorBrandStroke2Contrast, colorBrandStroke2Hover, colorBrandStroke2Pressed, colorCompoundBrandBackground, colorCompoundBrandBackgroundHover, colorCompoundBrandBackgroundPressed, colorCompoundBrandForeground1, colorCompoundBrandForeground1Hover, colorCompoundBrandForeground1Pressed, colorCompoundBrandStroke, colorCompoundBrandStrokeHover, colorCompoundBrandStrokePressed, colorNeutralBackground1, colorNeutralBackground1Hover, colorNeutralBackground1Pressed, colorNeutralBackground1Selected, colorNeutralBackground2, colorNeutralBackground2Hover, colorNeutralBackground2Pressed, colorNeutralBackground2Selected, colorNeutralBackground3, colorNeutralBackground3Hover, colorNeutralBackground3Pressed, colorNeutralBackground3Selected, colorNeutralBackground4, colorNeutralBackground4Hover, colorNeutralBackground4Pressed, colorNeutralBackground4Selected, colorNeutralBackground5, colorNeutralBackground5Hover, colorNeutralBackground5Pressed, colorNeutralBackground5Selected, colorNeutralBackground6, colorNeutralBackground7, colorNeutralBackground7Hover, colorNeutralBackground7Pressed, colorNeutralBackground7Selected, colorNeutralBackground8, colorNeutralBackgroundAlpha, colorNeutralBackgroundAlpha2, colorNeutralBackgroundDisabled, colorNeutralBackgroundDisabled2, colorNeutralBackgroundInverted, colorNeutralBackgroundInvertedDisabled, colorNeutralBackgroundInvertedHover, colorNeutralBackgroundInvertedPressed, colorNeutralBackgroundInvertedSelected, colorNeutralBackgroundStatic, colorNeutralCardBackground, colorNeutralCardBackgroundDisabled, colorNeutralCardBackgroundHover, colorNeutralCardBackgroundPressed, colorNeutralCardBackgroundSelected, colorNeutralForeground1, colorNeutralForeground1Hover, colorNeutralForeground1Pressed, colorNeutralForeground1Selected, colorNeutralForeground1Static, colorNeutralForeground2, colorNeutralForeground2BrandHover, colorNeutralForeground2BrandPressed, colorNeutralForeground2BrandSelected, colorNeutralForeground2Hover, colorNeutralForeground2Link, colorNeutralForeground2LinkHover, colorNeutralForeground2LinkPressed, colorNeutralForeground2LinkSelected, colorNeutralForeground2Pressed, colorNeutralForeground2Selected, colorNeutralForeground3, colorNeutralForeground3BrandHover, colorNeutralForeground3BrandPressed, colorNeutralForeground3BrandSelected, colorNeutralForeground3Hover, colorNeutralForeground3Pressed, colorNeutralForeground3Selected, colorNeutralForeground4, colorNeutralForeground5, colorNeutralForeground5Hover, colorNeutralForeground5Pressed, colorNeutralForeground5Selected, colorNeutralForegroundDisabled, colorNeutralForegroundInverted, colorNeutralForegroundInverted2, colorNeutralForegroundInvertedDisabled, colorNeutralForegroundInvertedHover, colorNeutralForegroundInvertedLink, colorNeutralForegroundInvertedLinkHover, colorNeutralForegroundInvertedLinkPressed, colorNeutralForegroundInvertedLinkSelected, colorNeutralForegroundInvertedPressed, colorNeutralForegroundInvertedSelected, colorNeutralForegroundOnBrand, colorNeutralForegroundStaticInverted, colorNeutralShadowAmbient, colorNeutralShadowAmbientDarker, colorNeutralShadowAmbientLighter, colorNeutralShadowKey, colorNeutralShadowKeyDarker, colorNeutralShadowKeyLighter, colorNeutralStencil1, colorNeutralStencil1Alpha, colorNeutralStencil2, colorNeutralStencil2Alpha, colorNeutralStroke1, colorNeutralStroke1Hover, colorNeutralStroke1Pressed, colorNeutralStroke1Selected, colorNeutralStroke2, colorNeutralStroke3, colorNeutralStroke4, colorNeutralStroke4Hover, colorNeutralStroke4Pressed, colorNeutralStroke4Selected, colorNeutralStrokeAccessible, colorNeutralStrokeAccessibleHover, colorNeutralStrokeAccessiblePressed, colorNeutralStrokeAccessibleSelected, colorNeutralStrokeAlpha, colorNeutralStrokeAlpha2, colorNeutralStrokeDisabled, colorNeutralStrokeDisabled2, colorNeutralStrokeInvertedDisabled, colorNeutralStrokeOnBrand, colorNeutralStrokeOnBrand2, colorNeutralStrokeOnBrand2Hover, colorNeutralStrokeOnBrand2Pressed, colorNeutralStrokeOnBrand2Selected, colorNeutralStrokeSubtle, colorPaletteAnchorBackground2, colorPaletteAnchorBorderActive, colorPaletteAnchorForeground2, colorPaletteBeigeBackground2, colorPaletteBeigeBorderActive, colorPaletteBeigeForeground2, colorPaletteBerryBackground1, colorPaletteBerryBackground2, colorPaletteBerryBackground3, colorPaletteBerryBorder1, colorPaletteBerryBorder2, colorPaletteBerryBorderActive, colorPaletteBerryForeground1, colorPaletteBerryForeground2, colorPaletteBerryForeground3, colorPaletteBlueBackground2, colorPaletteBlueBorderActive, colorPaletteBlueForeground2, colorPaletteBrassBackground2, colorPaletteBrassBorderActive, colorPaletteBrassForeground2, colorPaletteBrownBackground2, colorPaletteBrownBorderActive, colorPaletteBrownForeground2, colorPaletteCornflowerBackground2, colorPaletteCornflowerBorderActive, colorPaletteCornflowerForeground2, colorPaletteCranberryBackground2, colorPaletteCranberryBorderActive, colorPaletteCranberryForeground2, colorPaletteDarkGreenBackground2, colorPaletteDarkGreenBorderActive, colorPaletteDarkGreenForeground2, colorPaletteDarkOrangeBackground1, colorPaletteDarkOrangeBackground2, colorPaletteDarkOrangeBackground3, colorPaletteDarkOrangeBorder1, colorPaletteDarkOrangeBorder2, colorPaletteDarkOrangeBorderActive, colorPaletteDarkOrangeForeground1, colorPaletteDarkOrangeForeground2, colorPaletteDarkOrangeForeground3, colorPaletteDarkRedBackground2, colorPaletteDarkRedBorderActive, colorPaletteDarkRedForeground2, colorPaletteForestBackground2, colorPaletteForestBorderActive, colorPaletteForestForeground2, colorPaletteGoldBackground2, colorPaletteGoldBorderActive, colorPaletteGoldForeground2, colorPaletteGrapeBackground2, colorPaletteGrapeBorderActive, colorPaletteGrapeForeground2, colorPaletteGreenBackground1, colorPaletteGreenBackground2, colorPaletteGreenBackground3, colorPaletteGreenBorder1, colorPaletteGreenBorder2, colorPaletteGreenBorderActive, colorPaletteGreenForeground1, colorPaletteGreenForeground2, colorPaletteGreenForeground3, colorPaletteGreenForegroundInverted, colorPaletteLavenderBackground2, colorPaletteLavenderBorderActive, colorPaletteLavenderForeground2, colorPaletteLightGreenBackground1, colorPaletteLightGreenBackground2, colorPaletteLightGreenBackground3, colorPaletteLightGreenBorder1, colorPaletteLightGreenBorder2, colorPaletteLightGreenBorderActive, colorPaletteLightGreenForeground1, colorPaletteLightGreenForeground2, colorPaletteLightGreenForeground3, colorPaletteLightTealBackground2, colorPaletteLightTealBorderActive, colorPaletteLightTealForeground2, colorPaletteLilacBackground2, colorPaletteLilacBorderActive, colorPaletteLilacForeground2, colorPaletteMagentaBackground2, colorPaletteMagentaBorderActive, colorPaletteMagentaForeground2, colorPaletteMarigoldBackground1, colorPaletteMarigoldBackground2, colorPaletteMarigoldBackground3, colorPaletteMarigoldBorder1, colorPaletteMarigoldBorder2, colorPaletteMarigoldBorderActive, colorPaletteMarigoldForeground1, colorPaletteMarigoldForeground2, colorPaletteMarigoldForeground3, colorPaletteMinkBackground2, colorPaletteMinkBorderActive, colorPaletteMinkForeground2, colorPaletteNavyBackground2, colorPaletteNavyBorderActive, colorPaletteNavyForeground2, colorPalettePeachBackground2, colorPalettePeachBorderActive, colorPalettePeachForeground2, colorPalettePinkBackground2, colorPalettePinkBorderActive, colorPalettePinkForeground2, colorPalettePlatinumBackground2, colorPalettePlatinumBorderActive, colorPalettePlatinumForeground2, colorPalettePlumBackground2, colorPalettePlumBorderActive, colorPalettePlumForeground2, colorPalettePumpkinBackground2, colorPalettePumpkinBorderActive, colorPalettePumpkinForeground2, colorPalettePurpleBackground2, colorPalettePurpleBorderActive, colorPalettePurpleForeground2, colorPaletteRedBackground1, colorPaletteRedBackground2, colorPaletteRedBackground3, colorPaletteRedBorder1, colorPaletteRedBorder2, colorPaletteRedBorderActive, colorPaletteRedForeground1, colorPaletteRedForeground2, colorPaletteRedForeground3, colorPaletteRedForegroundInverted, colorPaletteRoyalBlueBackground2, colorPaletteRoyalBlueBorderActive, colorPaletteRoyalBlueForeground2, colorPaletteSeafoamBackground2, colorPaletteSeafoamBorderActive, colorPaletteSeafoamForeground2, colorPaletteSteelBackground2, colorPaletteSteelBorderActive, colorPaletteSteelForeground2, colorPaletteTealBackground2, colorPaletteTealBorderActive, colorPaletteTealForeground2, colorPaletteYellowBackground1, colorPaletteYellowBackground2, colorPaletteYellowBackground3, colorPaletteYellowBorder1, colorPaletteYellowBorder2, colorPaletteYellowBorderActive, colorPaletteYellowForeground1, colorPaletteYellowForeground2, colorPaletteYellowForeground3, colorPaletteYellowForegroundInverted, colorScrollbarOverlay, colorStatusDangerBackground1, colorStatusDangerBackground2, colorStatusDangerBackground3, colorStatusDangerBackground3Hover, colorStatusDangerBackground3Pressed, colorStatusDangerBorder1, colorStatusDangerBorder2, colorStatusDangerBorderActive, colorStatusDangerForeground1, colorStatusDangerForeground2, colorStatusDangerForeground3, colorStatusDangerForegroundInverted, colorStatusSuccessBackground1, colorStatusSuccessBackground2, colorStatusSuccessBackground3, colorStatusSuccessBorder1, colorStatusSuccessBorder2, colorStatusSuccessBorderActive, colorStatusSuccessForeground1, colorStatusSuccessForeground2, colorStatusSuccessForeground3, colorStatusSuccessForegroundInverted, colorStatusWarningBackground1, colorStatusWarningBackground2, colorStatusWarningBackground3, colorStatusWarningBorder1, colorStatusWarningBorder2, colorStatusWarningBorderActive, colorStatusWarningForeground1, colorStatusWarningForeground2, colorStatusWarningForeground3, colorStatusWarningForegroundInverted, colorStrokeFocus1, colorStrokeFocus2, colorSubtleBackground, colorSubtleBackgroundHover, colorSubtleBackgroundInverted, colorSubtleBackgroundInvertedHover, colorSubtleBackgroundInvertedPressed, colorSubtleBackgroundInvertedSelected, colorSubtleBackgroundLightAlphaHover, colorSubtleBackgroundLightAlphaPressed, colorSubtleBackgroundLightAlphaSelected, colorSubtleBackgroundPressed, colorSubtleBackgroundSelected, colorTransparentBackground, colorTransparentBackgroundHover, colorTransparentBackgroundPressed, colorTransparentBackgroundSelected, colorTransparentStroke, colorTransparentStrokeDisabled, colorTransparentStrokeInteractive, curveAccelerateMax, curveAccelerateMid, curveAccelerateMin, curveDecelerateMax, curveDecelerateMid, curveDecelerateMin, curveEasyEase, curveEasyEaseMax, curveLinear, display, dropdownButtonTemplate, dropdownInputTemplate, durationFast, durationFaster, durationGentle, durationNormal, durationSlow, durationSlower, durationUltraFast, durationUltraSlow, endSlotTemplate, fontFamilyBase, fontFamilyMonospace, fontFamilyNumeric, fontSizeBase100, fontSizeBase200, fontSizeBase300, fontSizeBase400, fontSizeBase500, fontSizeBase600, fontSizeHero1000, fontSizeHero700, fontSizeHero800, fontSizeHero900, fontWeightBold, fontWeightMedium, fontWeightRegular, fontWeightSemibold, getDirection, isDialog, isDropdown, isDropdownOption, isListbox, isTab, lineHeightBase100, lineHeightBase200, lineHeightBase300, lineHeightBase400, lineHeightBase500, lineHeightBase600, lineHeightHero1000, lineHeightHero700, lineHeightHero800, lineHeightHero900, listboxTemplate, roleForMenuItem, setTheme, shadow16, shadow16Brand, shadow2, shadow28, shadow28Brand, shadow2Brand, shadow4, shadow4Brand, shadow64, shadow64Brand, shadow8, shadow8Brand, spacingHorizontalL, spacingHorizontalM, spacingHorizontalMNudge, spacingHorizontalNone, spacingHorizontalS, spacingHorizontalSNudge, spacingHorizontalXL, spacingHorizontalXS, spacingHorizontalXXL, spacingHorizontalXXS, spacingHorizontalXXXL, spacingVerticalL, spacingVerticalM, spacingVerticalMNudge, spacingVerticalNone, spacingVerticalS, spacingVerticalSNudge, spacingVerticalXL, spacingVerticalXS, spacingVerticalXXL, spacingVerticalXXS, spacingVerticalXXXL, startSlotTemplate, strokeWidthThick, strokeWidthThicker, strokeWidthThickest, strokeWidthThin, typographyBody1StrongStyles, typographyBody1StrongerStyles, typographyBody1Styles, typographyBody2Styles, typographyCaption1StrongStyles, typographyCaption1StrongerStyles, typographyCaption1Styles, typographyCaption2StrongStyles, typographyCaption2Styles, typographyDisplayStyles, typographyLargeTitleStyles, typographySubtitle1Styles, typographySubtitle2StrongerStyles, typographySubtitle2Styles, typographyTitle1Styles, typographyTitle2Styles, typographyTitle3Styles, zIndexBackground, zIndexContent, zIndexDebug, zIndexFloating, zIndexMessages, zIndexOverlay, zIndexPopup, zIndexPriority };
|