@vonage/vivid 5.2.0 → 5.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/accordion-item/definition.cjs +2 -1
- package/accordion-item/definition.js +3 -2
- package/alert/definition.cjs +1 -1
- package/alert/definition.js +2 -2
- package/alert/index.cjs +1 -1
- package/alert/index.js +1 -1
- package/audio-player/definition.cjs +4 -2
- package/audio-player/definition.js +4 -2
- package/audio-player/index.cjs +5 -3
- package/audio-player/index.js +5 -3
- package/badge/definition.js +1 -1
- package/badge/index.cjs +2 -2
- package/badge/index.js +4 -4
- package/banner/definition.js +1 -1
- package/banner/index.cjs +3 -3
- package/banner/index.js +6 -6
- package/breadcrumb-item/index.cjs +1 -1
- package/breadcrumb-item/index.js +1 -1
- package/bundled/affix.cjs +7 -7
- package/bundled/affix.js +5 -5
- package/bundled/anchored.cjs +1 -1
- package/bundled/anchored.js +6 -6
- package/bundled/attribute-binding-behaviour.cjs +1 -1
- package/bundled/attribute-binding-behaviour.js +15 -13
- package/bundled/base-color-picker.cjs +13 -0
- package/bundled/base-color-picker.js +194 -0
- package/bundled/button.cjs +1 -1
- package/bundled/button.js +2 -2
- package/bundled/calendar-picker.template.cjs +7 -7
- package/bundled/calendar-picker.template.js +118 -118
- package/bundled/char-count.cjs +1 -1
- package/bundled/char-count.js +1 -1
- package/bundled/children.cjs +1 -1
- package/bundled/children.js +28 -20
- package/bundled/definition.cjs +3 -3
- package/bundled/definition.js +38 -38
- package/bundled/definition10.cjs +72 -18
- package/bundled/definition10.js +351 -65
- package/bundled/definition11.cjs +19 -10
- package/bundled/definition11.js +217 -36
- package/bundled/definition12.cjs +10 -1
- package/bundled/definition12.js +38 -14
- package/bundled/definition13.cjs +1 -73
- package/bundled/definition13.js +15 -354
- package/bundled/definition15.cjs +1 -1
- package/bundled/definition15.js +1 -1
- package/bundled/definition16.cjs +2 -2
- package/bundled/definition16.js +8 -8
- package/bundled/definition17.cjs +7 -7
- package/bundled/definition17.js +17 -17
- package/bundled/definition19.cjs +23 -24
- package/bundled/definition19.js +151 -163
- package/bundled/definition2.cjs +9 -5
- package/bundled/definition2.js +21 -17
- package/bundled/definition22.cjs +9 -9
- package/bundled/definition22.js +31 -31
- package/bundled/definition3.cjs +1 -1
- package/bundled/definition3.js +1 -1
- package/bundled/definition6.cjs +3 -3
- package/bundled/definition6.js +28 -28
- package/bundled/definition7.cjs +1 -1
- package/bundled/definition7.js +6 -6
- package/bundled/definition8.cjs +2 -2
- package/bundled/definition8.js +4 -4
- package/bundled/definition9.cjs +5 -5
- package/bundled/definition9.js +394 -392
- package/bundled/delegates-aria.cjs +1 -1
- package/bundled/delegates-aria.js +59 -46
- package/bundled/form-associated.cjs +1 -1
- package/bundled/form-associated.js +3 -3
- package/bundled/host-semantics.cjs +1 -1
- package/bundled/host-semantics.js +48 -34
- package/bundled/listbox.cjs +1 -1
- package/bundled/listbox.js +82 -102
- package/bundled/localized.cjs +1 -1
- package/bundled/localized.js +51 -36
- package/bundled/mixins.cjs +18 -18
- package/bundled/mixins.js +99 -93
- package/bundled/normalize.cjs +1 -0
- package/bundled/normalize.js +7 -0
- package/bundled/picker-field.template.cjs +1 -1
- package/bundled/picker-field.template.js +4 -4
- package/bundled/ref.cjs +1 -1
- package/bundled/ref.js +8 -25
- package/bundled/repeat.cjs +1 -1
- package/bundled/repeat.js +459 -233
- package/bundled/slider.template.cjs +1 -1
- package/bundled/slider.template.js +2 -2
- package/bundled/slotted.cjs +1 -1
- package/bundled/slotted.js +62 -45
- package/bundled/time-selection-picker.template.cjs +1 -1
- package/bundled/time-selection-picker.template.js +5 -5
- package/bundled/vivid-element.cjs +5 -1
- package/bundled/vivid-element.js +2159 -1162
- package/bundled/when.cjs +1 -1
- package/bundled/when.js +8 -7
- package/calendar/definition.cjs +1 -1
- package/calendar/definition.js +2 -2
- package/calendar/index.cjs +1 -1
- package/calendar/index.js +15 -15
- package/calendar-event/index.cjs +1 -1
- package/calendar-event/index.js +1 -1
- package/card/definition.cjs +11 -3
- package/card/definition.js +11 -3
- package/card/index.cjs +19 -11
- package/card/index.js +35 -27
- package/color-picker/definition.cjs +1079 -0
- package/color-picker/definition.js +1073 -0
- package/color-picker/index.cjs +127 -0
- package/color-picker/index.js +726 -0
- package/combobox/definition.cjs +8 -28
- package/combobox/definition.js +10 -30
- package/combobox/index.cjs +7 -7
- package/combobox/index.js +60 -74
- package/contextual-help/index.cjs +1 -1
- package/contextual-help/index.js +1 -1
- package/custom-elements.json +1670 -163
- package/data-grid/definition.cjs +862 -27
- package/data-grid/definition.js +863 -28
- package/data-grid/index.cjs +25 -25
- package/data-grid/index.js +175 -168
- package/date-picker/definition.cjs +1 -1
- package/date-picker/definition.js +1 -1
- package/date-picker/index.cjs +1 -1
- package/date-picker/index.js +2 -2
- package/date-range-picker/definition.cjs +1 -1
- package/date-range-picker/definition.js +1 -1
- package/date-range-picker/index.cjs +1 -1
- package/date-range-picker/index.js +2 -2
- package/date-time-picker/definition.cjs +1 -1
- package/date-time-picker/definition.js +1 -1
- package/date-time-picker/index.cjs +1 -1
- package/date-time-picker/index.js +2 -2
- package/dial-pad/definition.cjs +4 -0
- package/dial-pad/definition.js +4 -0
- package/dial-pad/index.cjs +3 -3
- package/dial-pad/index.js +42 -39
- package/dialog/definition.cjs +6 -3
- package/dialog/definition.js +6 -3
- package/dialog/index.cjs +22 -19
- package/dialog/index.js +48 -45
- package/elevation/definition.cjs +1 -1
- package/elevation/definition.js +1 -1
- package/empty-state/definition.cjs +7 -2
- package/empty-state/definition.js +7 -2
- package/empty-state/index.cjs +10 -5
- package/empty-state/index.js +18 -13
- package/fab/definition.js +1 -1
- package/fab/index.cjs +2 -2
- package/fab/index.js +4 -4
- package/file-picker/definition.cjs +2 -2
- package/file-picker/definition.js +3 -3
- package/file-picker/index.cjs +1 -1
- package/file-picker/index.js +4 -4
- package/header/definition.cjs +1 -1
- package/header/definition.js +1 -1
- package/icon/definition.cjs +10 -6
- package/icon/definition.js +10 -6
- package/index.cjs +7 -4
- package/index.js +3 -3
- package/lib/accordion/accordion.d.ts +1 -1
- package/lib/accordion/definition.d.ts +1 -1
- package/lib/accordion-item/accordion-item.d.ts +2 -2
- package/lib/action-group/action-group.d.ts +2 -2
- package/lib/alert/alert.d.ts +4 -4
- package/lib/audio-player/audio-player.d.ts +3 -3
- package/lib/avatar/avatar.d.ts +2 -2
- package/lib/badge/badge.d.ts +2 -2
- package/lib/banner/banner.d.ts +6 -6
- package/lib/breadcrumb/breadcrumb.d.ts +2 -2
- package/lib/breadcrumb-item/breadcrumb-item.d.ts +2 -2
- package/lib/button/button.d.ts +6 -6
- package/lib/button/button.template.d.ts +2 -1
- package/lib/calendar/calendar.d.ts +1 -1
- package/lib/calendar-event/calendar-event.d.ts +2 -2
- package/lib/card/card.d.ts +2 -2
- package/lib/checkbox/checkbox.d.ts +12 -12
- package/lib/color-picker/color-picker.d.ts +2420 -0
- package/lib/color-picker/color-picker.template.d.ts +3 -0
- package/lib/color-picker/definition.d.ts +4 -0
- package/lib/color-picker/locale.d.ts +9 -0
- package/lib/combobox/combobox.d.ts +15 -14
- package/lib/combobox/combobox.options.d.ts +1 -1
- package/lib/components.d.ts +1 -0
- package/lib/data-grid/data-grid-cell.d.ts +4 -4
- package/lib/data-grid/data-grid-row.d.ts +3 -4
- package/lib/data-grid/data-grid.d.ts +1 -2
- package/lib/date-picker/date-picker.d.ts +54 -54
- package/lib/date-range-picker/date-range-picker.d.ts +28 -28
- package/lib/date-time-picker/date-time-picker.d.ts +56 -56
- package/lib/dial-pad/dial-pad.d.ts +3 -2
- package/lib/dialog/dialog.d.ts +4 -4
- package/lib/divider/divider.d.ts +3 -3
- package/lib/fab/fab.d.ts +2 -2
- package/lib/file-picker/file-picker.d.ts +14 -14
- package/lib/header/header.d.ts +2 -2
- package/lib/menu/menu.d.ts +4 -4
- package/lib/menu-item/menu-item-role.d.ts +1 -1
- package/lib/menu-item/menu-item.d.ts +4 -4
- package/lib/nav/nav.d.ts +2 -2
- package/lib/nav-disclosure/nav-disclosure.d.ts +4 -4
- package/lib/nav-item/nav-item.d.ts +4 -4
- package/lib/note/note.d.ts +2 -2
- package/lib/number-field/number-field.d.ts +18 -18
- package/lib/option/option.d.ts +4 -4
- package/lib/pagination/pagination.d.ts +2 -2
- package/lib/popup/popup.d.ts +1 -1
- package/lib/progress/progress.d.ts +2 -2
- package/lib/progress-ring/progress-ring.d.ts +2 -2
- package/lib/radio/radio.d.ts +6 -6
- package/lib/radio-group/radio-group.d.ts +2 -2
- package/lib/range-slider/range-slider.d.ts +6 -6
- package/lib/rich-text-editor/menubar/menubar.d.ts +2 -2
- package/lib/rich-text-editor/rich-text-editor.d.ts +2 -2
- package/lib/searchable-select/locale.d.ts +4 -0
- package/lib/searchable-select/option-tag.d.ts +2 -2
- package/lib/searchable-select/searchable-select.d.ts +21 -18
- package/lib/select/select.d.ts +19 -17
- package/lib/selectable-box/selectable-box.d.ts +2 -2
- package/lib/simple-color-picker/locale.d.ts +0 -1
- package/lib/simple-color-picker/simple-color-picker.d.ts +47 -821
- package/lib/slider/slider.d.ts +7 -7
- package/lib/split-button/split-button.d.ts +6 -6
- package/lib/switch/switch.d.ts +4 -4
- package/lib/tab/tab.d.ts +6 -6
- package/lib/tab-panel/tab-panel.d.ts +2 -2
- package/lib/tabs/tabs.d.ts +2 -2
- package/lib/tag/tag.d.ts +6 -6
- package/lib/tag-group/tag-group.d.ts +2 -2
- package/lib/tag-name-map.d.ts +2 -1
- package/lib/text-area/text-area.d.ts +17 -17
- package/lib/text-field/text-field.d.ts +19 -19
- package/lib/time-picker/time-picker.d.ts +28 -28
- package/lib/toggletip/toggletip.d.ts +4 -4
- package/lib/tooltip/tooltip.d.ts +2 -2
- package/lib/tree-item/tree-item.d.ts +4 -4
- package/lib/tree-view/tree-view.d.ts +2 -2
- package/lib/video-player/video-player.d.ts +2 -2
- package/locales/de-DE.cjs +17 -2
- package/locales/de-DE.js +17 -2
- package/locales/en-GB.cjs +17 -2
- package/locales/en-GB.js +17 -2
- package/locales/en-US.cjs +17 -2
- package/locales/en-US.js +17 -2
- package/locales/ja-JP.cjs +17 -2
- package/locales/ja-JP.js +17 -2
- package/locales/zh-CN.cjs +17 -2
- package/locales/zh-CN.js +17 -2
- package/menu/definition.cjs +6 -6
- package/menu/definition.js +7 -7
- package/nav-disclosure/definition.js +1 -1
- package/nav-item/definition.js +1 -1
- package/note/definition.js +1 -1
- package/note/index.cjs +2 -2
- package/note/index.js +4 -4
- package/number-field/definition.cjs +1 -1
- package/number-field/definition.js +3 -3
- package/number-field/index.cjs +5 -5
- package/number-field/index.js +21 -21
- package/option/definition.cjs +6 -77
- package/option/definition.js +3 -78
- package/option/index.cjs +1 -1
- package/option/index.js +1 -1
- package/package.json +34 -8
- package/pagination/definition.cjs +2 -1
- package/pagination/definition.js +2 -1
- package/pagination/index.cjs +12 -12
- package/pagination/index.js +59 -59
- package/popup/definition.cjs +2 -2
- package/popup/definition.js +2 -2
- package/progress/index.cjs +1 -1
- package/progress/index.js +1 -1
- package/radio/definition.cjs +9 -9
- package/radio/definition.js +10 -10
- package/radio-group/definition.cjs +2 -1
- package/radio-group/definition.js +2 -1
- package/radio-group/index.cjs +5 -5
- package/radio-group/index.js +80 -77
- package/range-slider/definition.cjs +1 -1
- package/range-slider/definition.js +1 -1
- package/range-slider/index.cjs +1 -1
- package/range-slider/index.js +1 -1
- package/rich-text-editor/definition.cjs +3 -4
- package/rich-text-editor/definition.js +3 -4
- package/rich-text-editor/index.cjs +27 -27
- package/rich-text-editor/index.js +1208 -1198
- package/searchable-select/definition.cjs +106 -14
- package/searchable-select/definition.js +107 -15
- package/searchable-select/index.cjs +81 -69
- package/searchable-select/index.js +362 -276
- package/select/definition.cjs +25 -42
- package/select/definition.js +26 -43
- package/selectable-box/definition.cjs +1 -1
- package/selectable-box/definition.js +1 -1
- package/selectable-box/index.cjs +3 -3
- package/selectable-box/index.js +20 -20
- package/shared/aria/aria-change-subscription.d.ts +0 -1
- package/shared/aria/aria-mixin.d.ts +3 -3
- package/shared/aria/delegate-aria-behavior.d.ts +5 -10
- package/shared/aria/delegates-aria.d.ts +3 -3
- package/shared/aria/host-semantics-behavior.d.ts +5 -8
- package/shared/aria/host-semantics.d.ts +3 -3
- package/shared/color-picker/base-color-picker.d.ts +436 -0
- package/shared/color-picker/index.d.ts +1 -0
- package/shared/color-picker/locale.d.ts +3 -0
- package/shared/color-picker/utils.d.ts +1 -0
- package/shared/deprecation/replaced-props.d.ts +317 -2
- package/shared/design-system/defineVividComponent.d.ts +2 -2
- package/shared/feedback/feedback-message.d.ts +2 -2
- package/shared/feedback/mixins.d.ts +4 -4
- package/shared/foundation/button/button.d.ts +4 -4
- package/shared/foundation/form-associated/form-associated.d.ts +4 -4
- package/shared/foundation/listbox/listbox.d.ts +4 -0
- package/shared/foundation/vivid-element/vivid-element.d.ts +335 -8
- package/shared/localization/Locale.d.ts +4 -0
- package/shared/patterns/affix.d.ts +4 -4
- package/shared/patterns/anchored.d.ts +4 -4
- package/shared/patterns/char-count/char-count.d.ts +2 -2
- package/shared/patterns/form-elements/form-element.d.ts +4 -4
- package/shared/patterns/form-elements/with-contextual-help.d.ts +6 -6
- package/shared/patterns/form-elements/with-error-text.d.ts +6 -6
- package/shared/patterns/form-elements/with-success-text.d.ts +2 -2
- package/shared/patterns/linkable.d.ts +2 -2
- package/shared/patterns/localized.d.ts +2 -2
- package/shared/patterns/trapped-focus.d.ts +2 -2
- package/shared/picker-field/mixins/calendar-picker.d.ts +14 -14
- package/shared/picker-field/mixins/calendar-picker.template.d.ts +14 -14
- package/shared/picker-field/mixins/inline-time-picker/inline-time-picker.d.ts +2 -2
- package/shared/picker-field/mixins/min-max-calendar-picker.d.ts +28 -28
- package/shared/picker-field/mixins/single-date-picker.d.ts +40 -40
- package/shared/picker-field/mixins/single-value-picker.d.ts +12 -12
- package/shared/picker-field/mixins/time-selection-picker.d.ts +29 -29
- package/shared/picker-field/mixins/time-selection-picker.template.d.ts +28 -28
- package/shared/picker-field/picker-field.d.ts +14 -14
- package/shared/templating/attribute-binding-behaviour.d.ts +3 -4
- package/shared/templating/render-in-light-dom.d.ts +13 -12
- package/side-drawer/index.cjs +1 -1
- package/side-drawer/index.js +1 -1
- package/simple-color-picker/definition.cjs +29 -216
- package/simple-color-picker/definition.js +30 -217
- package/simple-color-picker/index.cjs +9 -21
- package/simple-color-picker/index.js +71 -185
- package/slider/definition.cjs +1 -1
- package/slider/definition.js +1 -1
- package/split-button/definition.js +1 -1
- package/styles/core/all.css +1 -1
- package/styles/core/theme.css +1 -1
- package/styles/core/typography.css +1 -1
- package/styles/tokens/theme-dark.css +4 -4
- package/styles/tokens/theme-light.css +4 -4
- package/styles/tokens/vivid-2-compat.css +1 -1
- package/switch/index.cjs +2 -2
- package/switch/index.js +4 -4
- package/tab/definition.js +1 -1
- package/tabs/definition.cjs +1 -1
- package/tabs/definition.js +2 -2
- package/tabs/index.cjs +2 -2
- package/tabs/index.js +16 -16
- package/tag/definition.js +1 -1
- package/tag/index.cjs +1 -1
- package/tag/index.js +1 -1
- package/text-area/index.cjs +3 -3
- package/text-area/index.js +8 -8
- package/text-field/definition.cjs +2 -2
- package/text-field/definition.js +4 -4
- package/text-field/index.cjs +1 -1
- package/text-field/index.js +1 -1
- package/time-picker/definition.cjs +1 -1
- package/time-picker/definition.js +1 -1
- package/time-picker/index.cjs +1 -1
- package/time-picker/index.js +2 -2
- package/toggletip/definition.cjs +2 -2
- package/toggletip/definition.js +3 -3
- package/tooltip/definition.cjs +1 -1
- package/tooltip/definition.js +1 -1
- package/tree-item/definition.cjs +1 -1
- package/tree-item/definition.js +1 -1
- package/tree-view/definition.cjs +2 -2
- package/tree-view/definition.js +3 -3
- package/tree-view/index.cjs +2 -2
- package/tree-view/index.js +6 -6
- package/unbundled/_commonjsHelpers.cjs +36 -0
- package/unbundled/_commonjsHelpers.js +32 -0
- package/unbundled/affix.cjs +1 -1
- package/unbundled/affix.js +2 -2
- package/unbundled/attribute-binding-behaviour.cjs +11 -10
- package/unbundled/attribute-binding-behaviour.js +11 -10
- package/unbundled/base-color-picker.cjs +278 -0
- package/unbundled/base-color-picker.js +275 -0
- package/unbundled/button.cjs +1 -1
- package/unbundled/button.js +2 -2
- package/unbundled/calendar-picker.template.cjs +4 -4
- package/unbundled/calendar-picker.template.js +5 -5
- package/unbundled/definition.js +1 -1
- package/unbundled/definition2.cjs +1 -1
- package/unbundled/definition2.js +3 -3
- package/unbundled/definition3.cjs +222 -140
- package/unbundled/definition3.js +220 -138
- package/unbundled/definition4.cjs +145 -235
- package/unbundled/definition4.js +143 -233
- package/unbundled/definition5.cjs +269 -27
- package/unbundled/definition5.js +267 -26
- package/unbundled/definition6.cjs +56 -0
- package/unbundled/definition6.js +52 -0
- package/unbundled/delegates-aria.cjs +67 -33
- package/unbundled/delegates-aria.js +69 -35
- package/unbundled/form-associated.cjs +2 -2
- package/unbundled/form-associated.js +3 -3
- package/unbundled/host-semantics.cjs +47 -22
- package/unbundled/host-semantics.js +48 -23
- package/unbundled/listbox.cjs +41 -63
- package/unbundled/listbox.js +39 -61
- package/unbundled/mixins.cjs +34 -27
- package/unbundled/mixins.js +35 -28
- package/unbundled/picker-field.template.cjs +3 -3
- package/unbundled/picker-field.template.js +4 -4
- package/unbundled/slider.template.cjs +1 -1
- package/unbundled/slider.template.js +1 -1
- package/unbundled/time-selection-picker.template.cjs +4 -4
- package/unbundled/time-selection-picker.template.js +5 -5
- package/unbundled/vivid-element.cjs +22 -15
- package/unbundled/vivid-element.js +23 -15
- package/video-player/definition.cjs +69047 -1
- package/video-player/definition.js +69047 -1
- package/video-player/index.cjs +36 -36
- package/video-player/index.js +1895 -1905
- package/visually-hidden/index.cjs +1 -1
- package/visually-hidden/index.js +1 -1
- package/vivid.api.json +719 -224
- package/bundled/option.cjs +0 -1
- package/bundled/option.js +0 -158
- package/unbundled/option.cjs +0 -217
- package/unbundled/option.js +0 -214
|
@@ -78,8 +78,9 @@ const getClasses = ({ appearance, size }) => fastWebUtilities.classNames(
|
|
|
78
78
|
[`appearance-${appearance}`, Boolean(appearance)],
|
|
79
79
|
[`size-${size}`, Boolean(size)]
|
|
80
80
|
);
|
|
81
|
-
const header = (context,
|
|
81
|
+
const header = (context, hTagName) => {
|
|
82
82
|
const affixIconTemplate = affix.affixIconTemplateFactory(context);
|
|
83
|
+
const hTag = fastElement.html.partial(hTagName);
|
|
83
84
|
return fastElement.html`
|
|
84
85
|
<${hTag} class="heading-container">
|
|
85
86
|
<button
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
|
|
2
2
|
import { iconDefinition } from '../icon/definition.js';
|
|
3
3
|
import { attr, nullableNumberConverter, observable, html, ref, slotted, when } from '@microsoft/fast-element';
|
|
4
|
-
import {
|
|
4
|
+
import { b as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from '../unbundled/affix.js';
|
|
5
5
|
import { classNames } from '@microsoft/fast-web-utilities';
|
|
6
6
|
|
|
7
7
|
const styles = ":host{--_vvd-accordion-item-accent-firm-wrapper: var( --vvd-accordion-item-accent-firm )}.heading-button{--vvd-accordion-item-accent-firm: var( --_vvd-accordion-item-accent-firm-wrapper, var(--vvd-accordion-item-accent-primary) )}:host{display:flex;box-sizing:border-box;flex-direction:column}.heading-container{margin:0}.heading-button,.heading-button.appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.heading-button.appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}@media (hover: hover){.heading-button:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.heading-button:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline: transparent}.heading-button:hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}}.heading-button.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.heading-button.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline: transparent}.heading-button.hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.heading-button:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.heading-button:active:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline: transparent}.heading-button:active:where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.heading-button.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.heading-button.active:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline: transparent}.heading-button.active:where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.heading-button{--_connotation-color-primary: var(--vvd-accordion-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-accordion-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-accordion-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-accordion-item-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-accordion-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-accordion-item-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-accordion-item-accent-firm, var(--vvd-color-canvas-text))}.heading-button{--focus-stroke-gap-color: transparent;display:flex;width:100%;align-items:center;padding:16px;border:none;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);cursor:pointer;text-align:left}.heading-button:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.heading-button.size-condensed{font:var(--vvd-typography-base-extended-bold);gap:12px}.heading-button:not(.size-condensed){font:var(--vvd-typography-heading-4);gap:16px}.heading-content{flex:auto}.meta{overflow:hidden;max-width:var(--accordion-item-meta-inline-size, 20%);flex-shrink:0;color:var(--vvd-color-neutral-600);text-align:end;text-overflow:ellipsis;white-space:nowrap}.heading-button:not(.size-condensed) .meta{font:var(--vvd-typography-base-bold)}.heading-button.size-condensed .meta{font:var(--vvd-typography-base-condensed-bold)}.region{display:none;padding:8px 32px 24px 16px}.region:not(.size-condensed).padded{padding-inline-start:52px}:host([expanded]) .region{display:block}.region.size-condensed.padded{padding-inline-start:44px}slot[name=icon]{color:var(--vvd-color-neutral-600)}.heading-button:not(.size-condensed) slot[name=icon]{font:inherit}.heading-button.size-condensed slot[name=icon]{font:var(--vvd-typography-base-extended)}:host(:not([icon-trailing])) slot[name=icon]:last-of-type{color:var(--_appearance-color-text)}";
|
|
@@ -74,8 +74,9 @@ const getClasses = ({ appearance, size }) => classNames(
|
|
|
74
74
|
[`appearance-${appearance}`, Boolean(appearance)],
|
|
75
75
|
[`size-${size}`, Boolean(size)]
|
|
76
76
|
);
|
|
77
|
-
const header = (context,
|
|
77
|
+
const header = (context, hTagName) => {
|
|
78
78
|
const affixIconTemplate = affixIconTemplateFactory(context);
|
|
79
|
+
const hTag = html.partial(hTagName);
|
|
79
80
|
return html`
|
|
80
81
|
<${hTag} class="heading-container">
|
|
81
82
|
<button
|
package/alert/definition.cjs
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
4
|
|
|
5
5
|
const button_definition = require('../unbundled/definition.cjs');
|
|
6
|
-
const elevation_definition = require('../unbundled/
|
|
6
|
+
const elevation_definition = require('../unbundled/definition6.cjs');
|
|
7
7
|
const vividElement = require('../unbundled/vivid-element.cjs');
|
|
8
8
|
const icon_definition = require('../icon/definition.cjs');
|
|
9
9
|
const fastElement = require('@microsoft/fast-element');
|
package/alert/definition.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { B as Button, b as buttonDefinition } from '../unbundled/definition.js';
|
|
2
|
-
import { E as Elevation, e as elevationDefinition } from '../unbundled/
|
|
2
|
+
import { E as Elevation, e as elevationDefinition } from '../unbundled/definition6.js';
|
|
3
3
|
import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
|
|
4
4
|
import { iconDefinition } from '../icon/definition.js';
|
|
5
5
|
import { attr, nullableNumberConverter, when, html } from '@microsoft/fast-element';
|
|
6
6
|
import { C as Connotation } from '../unbundled/enums.js';
|
|
7
|
-
import {
|
|
7
|
+
import { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper, c as IconAriaHidden } from '../unbundled/affix.js';
|
|
8
8
|
import { h as handleEscapeKeyAndStopPropogation } from '../unbundled/index.js';
|
|
9
9
|
import { L as Localized } from '../unbundled/localized.js';
|
|
10
10
|
import { classNames } from '@microsoft/fast-web-utilities';
|
package/alert/index.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";const p=require("../bundled/definition3.cjs"),u=require("../bundled/definition4.cjs"),e=require("../bundled/vivid-element.cjs"),f=require("../bundled/definition2.cjs"),l=require("../bundled/enums.cjs"),c=require("../bundled/affix.cjs"),b=require("../bundled/index.cjs"),y=require("../bundled/localized.cjs"),
|
|
1
|
+
"use strict";const p=require("../bundled/definition3.cjs"),u=require("../bundled/definition4.cjs"),e=require("../bundled/vivid-element.cjs"),f=require("../bundled/definition2.cjs"),l=require("../bundled/enums.cjs"),c=require("../bundled/affix.cjs"),b=require("../bundled/index.cjs"),y=require("../bundled/localized.cjs"),m=require("../bundled/when.cjs"),h=require("../bundled/class-names.cjs"),x='.control{position:fixed;z-index:10;border-radius:8px;inline-size:max-content;inset-block-end:0;inset-inline:0;margin-block:16px;margin-inline:auto;max-inline-size:var(--alert-max-inline-size, fit-content);min-inline-size:var(--alert-min-inline-size, 420px);transition:opacity .15s cubic-bezier(0,0,.2,1) 0ms,transform .15s cubic-bezier(0,0,.2,1) 0ms}.control.placement-top,.control.placement-top-start,.control.placement-top-end{inset-block:0 auto}.control.placement-top-start,.control.placement-bottom-start{right:auto;inset-inline-end:auto;margin-inline:16px}.control.placement-top-end,.control.placement-bottom-end{inset-inline-start:auto;margin-inline:16px}.control:where(.strategy-static){position:static;margin:0;inline-size:auto}.control:not(.open){opacity:0;transform:scale(.8)}.control.open{opacity:1;transform:scale(1)}@media (width <= 768px){.control{min-inline-size:var(--alert-min-inline-size, auto)}}.base.connotation-success{--_connotation-color-primary: var(--vvd-alert-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-alert-success-primary-text, var(--vvd-color-canvas))}.base.connotation-information{--_connotation-color-primary: var(--vvd-alert-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-alert-information-primary-text, var(--vvd-color-canvas))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-alert-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-alert-alert-primary-text, var(--vvd-color-canvas))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-alert-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-alert-warning-primary-text, var(--vvd-color-canvas-text))}.base.connotation-announcement{--_connotation-color-primary: var(--vvd-alert-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-alert-announcement-primary-text, var(--vvd-color-canvas))}.base:not(.connotation-success,.connotation-information,.connotation-alert,.connotation-warning,.connotation-announcement){--_connotation-color-primary: var(--vvd-alert-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-alert-accent-primary-text, var(--vvd-color-canvas))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base{display:flex;align-items:center;padding:16px;border-radius:8px;background-color:var(--vvd-color-neutral-50);color:var(--vvd-color-canvas-text);column-gap:16px}.base .alert-text{margin-inline-end:auto}.base .alert-text .headline{font:var(--vvd-typography-base-bold);margin-block:0 4px}.base .alert-text .main-text{font:var(--vvd-typography-base)}.base .alert-text .headline+::slotted([slot=main i]:first-child):before,.base .alert-text .main-text+::slotted([slot=main i]:first-child):before{display:block;margin-top:8px;content:""}.base slot[name=icon]{flex-shrink:0;color:var(--_appearance-color-fill);font-size:24px;line-height:1}.base .dismiss-button{border-left:1px solid var(--vvd-color-neutral-200);padding-inline-start:16px}';var g=Object.defineProperty,r=(o,t,i,n)=>{for(var s=void 0,d=o.length-1,v;d>=0;d--)(v=o[d])&&(s=v(t,i,s)||s);return s&&g(t,i,s),s};const _={[l.Connotation.Accent]:"megaphone-line",[l.Connotation.Information]:"info-line",[l.Connotation.Success]:"check-circle-line",[l.Connotation.Warning]:"warning-line",[l.Connotation.Announcement]:"sparkles-line",[l.Connotation.Alert]:"error-line"};class a extends c.AffixIcon(y.Localized(e.VividElement)){constructor(){super(...arguments),this.dismissButtonAriaLabel=null,this.removable=!1,this.placement="bottom",this.timeoutms=0,this.open=!1,this.#n=t=>{this.open&&this.removable&&b.handleEscapeKeyAndStopPropogation(t)&&(this.open=!1)},this.#o=()=>{this.open?this.style.display="contents":this.style.display="none"}}#t;openChanged(t,i){if(t!==void 0)if(this.$emit(i?"open":"close"),this.#e(),i){this.style.display="contents";const n=this.shadowRoot.querySelector(".dismiss-button");this.removable&&n&&n.focus()}else this.style.display="none"}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",this.#n),this.controlEl=this.shadowRoot.querySelector(".control"),this.controlEl&&this.controlEl.addEventListener("transitionend",this.#o),this.#e()}disconnectedCallback(){super.disconnectedCallback(),this.#t&&clearTimeout(this.#t),this.removeEventListener("keydown",this.#n),this.controlEl&&this.controlEl.removeEventListener("transitionend",this.#o)}get conditionedIcon(){return this.icon||this.connotation&&_[this.connotation]}#e(){this.#t&&clearTimeout(this.#t),this.open&&this.timeoutms>0&&(this.#t=setTimeout(()=>this.open=!1,this.timeoutms))}#n;#o}r([e.attr({attribute:"dismiss-button-aria-label"})],a.prototype,"dismissButtonAriaLabel");r([e.attr({mode:"boolean"})],a.prototype,"removable");r([e.attr({mode:"fromView"})],a.prototype,"placement");r([e.attr],a.prototype,"headline");r([e.attr],a.prototype,"text");r([e.attr({mode:"fromView",converter:e.nullableNumberConverter})],a.prototype,"timeoutms");r([e.attr],a.prototype,"connotation");r([e.attr],a.prototype,"strategy");r([e.attr({mode:"boolean"})],a.prototype,"open");const $=({connotation:o})=>h.classNames("base",[`connotation-${o}`,!!o]),C=({open:o,placement:t,strategy:i})=>h.classNames("control",["open",o],[`placement-${t}`,!!t],[`strategy-${i}`,!!i]);function w(o,t){const i=c.affixIconTemplateFactory(o),n=t.conditionedIcon,s=!t.icon&&t.connotation?{label:t.locale.connotationAnnoncement[`${t.connotation}Icon`],announceOnUpdate:!0}:void 0;return i(n,c.IconWrapper.Slot,c.IconAriaHidden.Hidden,s)}function k(o){return e.html`
|
|
2
2
|
<${o}
|
|
3
3
|
aria-label="${t=>t.dismissButtonAriaLabel||t.locale.alert.dismissButtonLabel}"
|
|
4
4
|
size="condensed"
|
package/alert/index.js
CHANGED
|
@@ -6,8 +6,8 @@ import { C as l } from "../bundled/enums.js";
|
|
|
6
6
|
import { b as k, a as w, I as A, c as C } from "../bundled/affix.js";
|
|
7
7
|
import { h as E } from "../bundled/index.js";
|
|
8
8
|
import { L as z } from "../bundled/localized.js";
|
|
9
|
-
import { c as d } from "../bundled/class-names.js";
|
|
10
9
|
import { w as p } from "../bundled/when.js";
|
|
10
|
+
import { c as d } from "../bundled/class-names.js";
|
|
11
11
|
const I = '.control{position:fixed;z-index:10;border-radius:8px;inline-size:max-content;inset-block-end:0;inset-inline:0;margin-block:16px;margin-inline:auto;max-inline-size:var(--alert-max-inline-size, fit-content);min-inline-size:var(--alert-min-inline-size, 420px);transition:opacity .15s cubic-bezier(0,0,.2,1) 0ms,transform .15s cubic-bezier(0,0,.2,1) 0ms}.control.placement-top,.control.placement-top-start,.control.placement-top-end{inset-block:0 auto}.control.placement-top-start,.control.placement-bottom-start{right:auto;inset-inline-end:auto;margin-inline:16px}.control.placement-top-end,.control.placement-bottom-end{inset-inline-start:auto;margin-inline:16px}.control:where(.strategy-static){position:static;margin:0;inline-size:auto}.control:not(.open){opacity:0;transform:scale(.8)}.control.open{opacity:1;transform:scale(1)}@media (width <= 768px){.control{min-inline-size:var(--alert-min-inline-size, auto)}}.base.connotation-success{--_connotation-color-primary: var(--vvd-alert-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-alert-success-primary-text, var(--vvd-color-canvas))}.base.connotation-information{--_connotation-color-primary: var(--vvd-alert-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-alert-information-primary-text, var(--vvd-color-canvas))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-alert-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-alert-alert-primary-text, var(--vvd-color-canvas))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-alert-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-alert-warning-primary-text, var(--vvd-color-canvas-text))}.base.connotation-announcement{--_connotation-color-primary: var(--vvd-alert-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-alert-announcement-primary-text, var(--vvd-color-canvas))}.base:not(.connotation-success,.connotation-information,.connotation-alert,.connotation-warning,.connotation-announcement){--_connotation-color-primary: var(--vvd-alert-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-alert-accent-primary-text, var(--vvd-color-canvas))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base{display:flex;align-items:center;padding:16px;border-radius:8px;background-color:var(--vvd-color-neutral-50);color:var(--vvd-color-canvas-text);column-gap:16px}.base .alert-text{margin-inline-end:auto}.base .alert-text .headline{font:var(--vvd-typography-base-bold);margin-block:0 4px}.base .alert-text .main-text{font:var(--vvd-typography-base)}.base .alert-text .headline+::slotted([slot=main i]:first-child):before,.base .alert-text .main-text+::slotted([slot=main i]:first-child):before{display:block;margin-top:8px;content:""}.base slot[name=icon]{flex-shrink:0;color:var(--_appearance-color-fill);font-size:24px;line-height:1}.base .dismiss-button{border-left:1px solid var(--vvd-color-neutral-200);padding-inline-start:16px}';
|
|
12
12
|
var B = Object.defineProperty, r = (n, t, e, o) => {
|
|
13
13
|
for (var s = void 0, m = n.length - 1, v; m >= 0; m--)
|
|
@@ -377,12 +377,14 @@ function renderSlider(context) {
|
|
|
377
377
|
}
|
|
378
378
|
function renderTimestamp() {
|
|
379
379
|
return fastElement.html` <div class="time-stamp">
|
|
380
|
-
<span class="current-time"
|
|
380
|
+
<span class="current-time"
|
|
381
|
+
>${(x) => formatTime(x.currentTime || 0)}</span
|
|
382
|
+
>
|
|
381
383
|
${fastElement.when(
|
|
382
384
|
(x) => x.duration && x.duration !== Infinity,
|
|
383
385
|
fastElement.html`
|
|
384
386
|
<span>/</span>
|
|
385
|
-
<span class="total-time">${(x) => formatTime(x
|
|
387
|
+
<span class="total-time">${(x) => formatTime(x?.duration)}</span>
|
|
386
388
|
`
|
|
387
389
|
)}
|
|
388
390
|
</div>`;
|
|
@@ -373,12 +373,14 @@ function renderSlider(context) {
|
|
|
373
373
|
}
|
|
374
374
|
function renderTimestamp() {
|
|
375
375
|
return html` <div class="time-stamp">
|
|
376
|
-
<span class="current-time"
|
|
376
|
+
<span class="current-time"
|
|
377
|
+
>${(x) => formatTime(x.currentTime || 0)}</span
|
|
378
|
+
>
|
|
377
379
|
${when(
|
|
378
380
|
(x) => x.duration && x.duration !== Infinity,
|
|
379
381
|
html`
|
|
380
382
|
<span>/</span>
|
|
381
|
-
<span class="total-time">${(x) => formatTime(x
|
|
383
|
+
<span class="total-time">${(x) => formatTime(x?.duration)}</span>
|
|
382
384
|
`
|
|
383
385
|
)}
|
|
384
386
|
</div>`;
|
package/audio-player/index.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";const u=require("../bundled/definition3.cjs"),h=require("../bundled/definition5.cjs"),y=require("../bundled/definition6.cjs"),r=require("../bundled/vivid-element.cjs"),m=require("../bundled/definition7.cjs"),c=require("../bundled/enums.cjs"),f=require("../bundled/localized.cjs"),g=require("../bundled/playbackRates.cjs"),
|
|
1
|
+
"use strict";const u=require("../bundled/definition3.cjs"),h=require("../bundled/definition5.cjs"),y=require("../bundled/definition6.cjs"),r=require("../bundled/vivid-element.cjs"),m=require("../bundled/definition7.cjs"),c=require("../bundled/enums.cjs"),f=require("../bundled/localized.cjs"),g=require("../bundled/playbackRates.cjs"),d=require("../bundled/when.cjs"),v=require("../bundled/repeat.cjs"),B=require("../bundled/class-names.cjs"),$=':host{display:block}.wrapper{container-type:inline-size}.base{display:inline-flex;box-sizing:border-box;align-items:center;padding:8px;color:var(--vvd-color-canvas-text);gap:8px;inline-size:100%;user-select:none}.base.disabled{color:var(--vvd-color-neutral-300)}.base .slider{flex:1;grid-area:slider}.base .controls{display:flex;align-items:center;justify-content:center;gap:8px;grid-area:controls}.base .time-stamp{display:inline-flex}.base .time-stamp .current-time,.base .time-stamp .total-time{margin-inline:6px;min-inline-size:32px}.base .playback-button{grid-area:playback}@container (max-width: 500px){.base.two-lines{display:inline-grid;grid-template:auto auto/1fr;grid-template-areas:"slider" "controls";inline-size:100%;row-gap:4px}.base.two-lines .time-stamp{margin-inline:auto 2px}.base.two-lines.playback{grid-template-areas:"slider slider" "controls playback";grid-template-columns:1fr auto}.base.two-lines.playback .time-stamp{margin-inline:auto}.base .slider{box-sizing:border-box;min-inline-size:auto;padding-inline:2px}}';var w=Object.defineProperty,o=(i,e,t,s)=>{for(var a=void 0,l=i.length-1,p;l>=0;l--)(p=i[l])&&(a=p(e,t,a)||a);return a&&w(e,t,a),a};const k={FORWARD:1,BACKWARD:-1};function b(i){if(!i||Number.isNaN(i))return"0:00";const e=Math.floor(i/60),t=Math.floor(i%60);return e+":"+(t<10?"0"+t:t)}const A=!0,L=!1,T={toView(i){return i},fromView(i){return Object.values(c.MediaSkipBy).includes(i)?i:void 0}};class n extends f.Localized(r.VividElement){constructor(){super(),this.playButtonAriaLabel=null,this.pauseButtonAriaLabel=null,this.sliderAriaLabel=null,this.skipForwardButtonAriaLabel=null,this.skipBackwardButtonAriaLabel=null,this.disabled=!1,this.notime=!1,this.playbackRates=null,this.#t=new Audio,this.#n=!1,this.durationFallback=!1,this.#l=e=>{if(e===this.paused){this.#o();return}this.paused?(this.#r(),this.#t.play()):this.#t.pause(),this.#o()},this.#r=()=>{r.Observable.notify(this,"currentTime");const e=this.duration,t=this.currentTime,s=Number.isFinite(e)&&e>0&&Number.isFinite(t)&&t>=0,a=s?t/e*100:0;this.#e&&(this.#n=!0,this.#e.value=a.toString(),this.#n=!1),s&&a===100&&this.pause()},this.#s=()=>{r.Observable.notify(this,"duration"),(!Number.isFinite(this.#t.duration)||this.#t.duration<=0)&&this.durationFallback&&this.#p()},this.#u=()=>{!this.paused&&this.#e.isDragging&&(this.pause(),this.#d=window.setInterval(()=>{this.#e.isDragging||(clearInterval(this.#d),this.play())},0)),!this.#n&&this.#t&&(this.currentTime=this.duration*Number(this.#e.value)/100)},this.#o=()=>{r.Observable.notify(this,"paused")}}srcChanged(){this.src===void 0?this.setSrc(""):this.setSrc(this.src)}revokeSrc(){const e=this.getCurrentSrc();e&&e.startsWith("blob:")&&URL.revokeObjectURL(e)}getCurrentSrc(){return this.#t.currentSrc||this.#t.src||""}canPlayType(e){return this.#t.canPlayType(e)!==""}setSrc(e,t){const s=this.getCurrentSrc();this.revokeSrc(),this.#i=void 0,this.#a&&(this.#a.abort(),this.#a=void 0);const a=t&&(this.canPlayType(t.type)||!e)?URL.createObjectURL(t):e;if(s&&this.#t.removeAttribute("src"),a||e)try{this.#t.src=a}catch(l){console.log("Falling back to original URL due to error:",l),this.#t.src=e}}get playbackRate(){return r.Observable.track(this,"playbackRate"),this.#t.playbackRate}set playbackRate(e){this.#t.playbackRate=e,r.Observable.notify(this,"playbackRate")}get paused(){return r.Observable.track(this,"paused"),this.#t.paused}set paused(e){}#i;#a;async#p(){if(this.#i||!this.src)return;this.#a=new AbortController;const e=this.#a.signal;try{const s=await(await fetch(this.src,{signal:e})).blob();this.setSrc(this.src,s);const a=await s.arrayBuffer(),l=new window.AudioContext,p=await l.decodeAudioData(a);l.close(),this.#i=p,r.Observable.notify(this,"duration")}catch(t){t instanceof Error&&t.name!=="AbortError"&&console.error("Error loading audio:",t)}finally{this.#a=void 0}}get duration(){r.Observable.track(this,"duration");const e=this.#t.duration;return Number.isFinite(e)&&e>0?e:this.#i&&this.#i.duration>0?this.#i.duration:e}set duration(e){}get currentTime(){return r.Observable.track(this,"currentTime"),this.#t.currentTime}set currentTime(e){this.#t.currentTime=e}get#e(){return this.shadowRoot.querySelector(".slider")}#t;#n;connectedCallback(){super.connectedCallback(),this.#t.addEventListener("timeupdate",this.#r),this.#t.addEventListener("loadedmetadata",this.#s),this.#t.addEventListener("durationchange",this.#s),this.#c(),this.#o(),this.#r()}disconnectedCallback(){super.disconnectedCallback(),this.#c(!1),this.pause(),this.#t.removeEventListener("timeupdate",this.#r),this.#t.removeEventListener("loadedmetadata",this.#s),this.#t.removeEventListener("durationchange",this.#s)}play(){this.#l(L)}pause(){this.#l(A)}#c(e=!0){const t=e?"addEventListener":"removeEventListener";this.#e&&this.#e[t]("change",this.#u)}#l;#r;#s;#d;#u;#o;skip(e){const t=this.currentTime,s=parseInt(this.skipBy)*e,a=t+s;this.currentTime=Math.max(0,Math.min(this.duration,a))}}o([r.attr({attribute:"play-button-aria-label"})],n.prototype,"playButtonAriaLabel");o([r.attr({attribute:"pause-button-aria-label"})],n.prototype,"pauseButtonAriaLabel");o([r.attr({attribute:"slider-aria-label"})],n.prototype,"sliderAriaLabel");o([r.attr({attribute:"skip-forward-aria-label"})],n.prototype,"skipForwardButtonAriaLabel");o([r.attr({attribute:"skip-backward-aria-label"})],n.prototype,"skipBackwardButtonAriaLabel");o([r.attr],n.prototype,"connotation");o([r.attr],n.prototype,"src");o([r.attr({mode:"boolean"})],n.prototype,"disabled");o([r.attr({mode:"boolean"})],n.prototype,"notime");o([r.attr({attribute:"skip-by",converter:T})],n.prototype,"skipBy");o([r.attr({attribute:"playback-rates"})],n.prototype,"playbackRates");o([r.attr({mode:"boolean",attribute:"duration-fallback"})],n.prototype,"durationFallback");const S=({notime:i,disabled:e,duration:t,skipBy:s,playbackRates:a})=>B.classNames(["disabled",!!e||!t],["two-lines",!i&&(!!Number(s)||!!a)],["playback",!!a]),R=(i,{parent:e})=>i===e.playbackRate;function C(i){const e=i.tagFor(u.Button);return r.html`<${e} class="pause" @click="${t=>t.paused?t.play():t.pause()}"
|
|
2
2
|
icon="${t=>t.paused?"play-solid":"pause-solid"}"
|
|
3
3
|
aria-label="${t=>t.paused?t.playButtonAriaLabel||t.locale.audioPlayer.playButtonLabel:t.pauseButtonAriaLabel||t.locale.audioPlayer.pauseButtonLabel}"
|
|
4
4
|
size='condensed'
|
|
@@ -32,10 +32,12 @@
|
|
|
32
32
|
?disabled="${t=>t.disabled||!t.duration}"
|
|
33
33
|
internal-part>
|
|
34
34
|
</${e}>`}function O(){return r.html` <div class="time-stamp">
|
|
35
|
-
<span class="current-time"
|
|
35
|
+
<span class="current-time"
|
|
36
|
+
>${i=>b(i.currentTime||0)}</span
|
|
37
|
+
>
|
|
36
38
|
${d.when(i=>i.duration&&i.duration!==1/0,r.html`
|
|
37
39
|
<span>/</span>
|
|
38
|
-
<span class="total-time">${i=>b(i
|
|
40
|
+
<span class="total-time">${i=>b(i?.duration)}</span>
|
|
39
41
|
`)}
|
|
40
42
|
</div>`}function M(i,e){return e.parent.playbackRate=i,!0}const z=i=>{const e=i.tagFor(y.Menu),t=i.tagFor(u.Button),s=i.tagFor(m.MenuItem);return r.html` <div class="wrapper">
|
|
41
43
|
<div class="base ${S}">
|
package/audio-player/index.js
CHANGED
|
@@ -6,9 +6,9 @@ import { M as L, m as T } from "../bundled/definition7.js";
|
|
|
6
6
|
import { M as u } from "../bundled/enums.js";
|
|
7
7
|
import { L as S } from "../bundled/localized.js";
|
|
8
8
|
import { g as R } from "../bundled/playbackRates.js";
|
|
9
|
+
import { w as p } from "../bundled/when.js";
|
|
9
10
|
import { r as C } from "../bundled/repeat.js";
|
|
10
11
|
import { c as F } from "../bundled/class-names.js";
|
|
11
|
-
import { w as p } from "../bundled/when.js";
|
|
12
12
|
const P = ':host{display:block}.wrapper{container-type:inline-size}.base{display:inline-flex;box-sizing:border-box;align-items:center;padding:8px;color:var(--vvd-color-canvas-text);gap:8px;inline-size:100%;user-select:none}.base.disabled{color:var(--vvd-color-neutral-300)}.base .slider{flex:1;grid-area:slider}.base .controls{display:flex;align-items:center;justify-content:center;gap:8px;grid-area:controls}.base .time-stamp{display:inline-flex}.base .time-stamp .current-time,.base .time-stamp .total-time{margin-inline:6px;min-inline-size:32px}.base .playback-button{grid-area:playback}@container (max-width: 500px){.base.two-lines{display:inline-grid;grid-template:auto auto/1fr;grid-template-areas:"slider" "controls";inline-size:100%;row-gap:4px}.base.two-lines .time-stamp{margin-inline:auto 2px}.base.two-lines.playback{grid-template-areas:"slider slider" "controls playback";grid-template-columns:1fr auto}.base.two-lines.playback .time-stamp{margin-inline:auto}.base .slider{box-sizing:border-box;min-inline-size:auto;padding-inline:2px}}';
|
|
13
13
|
var E = Object.defineProperty, o = (a, e, t, r) => {
|
|
14
14
|
for (var i = void 0, d = a.length - 1, h; d >= 0; d--)
|
|
@@ -263,12 +263,14 @@ function _(a) {
|
|
|
263
263
|
}
|
|
264
264
|
function j() {
|
|
265
265
|
return c` <div class="time-stamp">
|
|
266
|
-
<span class="current-time"
|
|
266
|
+
<span class="current-time"
|
|
267
|
+
>${(a) => m(a.currentTime || 0)}</span
|
|
268
|
+
>
|
|
267
269
|
${p(
|
|
268
270
|
(a) => a.duration && a.duration !== 1 / 0,
|
|
269
271
|
c`
|
|
270
272
|
<span>/</span>
|
|
271
|
-
<span class="total-time">${(a) => m(a
|
|
273
|
+
<span class="total-time">${(a) => m(a?.duration)}</span>
|
|
272
274
|
`
|
|
273
275
|
)}
|
|
274
276
|
</div>`;
|
package/badge/definition.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
|
|
2
2
|
import { iconDefinition } from '../icon/definition.js';
|
|
3
3
|
import { attr, when, html } from '@microsoft/fast-element';
|
|
4
|
-
import {
|
|
4
|
+
import { b as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from '../unbundled/affix.js';
|
|
5
5
|
import { classNames } from '@microsoft/fast-web-utilities';
|
|
6
6
|
|
|
7
7
|
var __defProp = Object.defineProperty;
|
package/badge/index.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";const a=require("../bundled/vivid-element.cjs"),p=require("../bundled/definition2.cjs"),d=require("../bundled/affix.cjs"),m=require("../bundled/
|
|
1
|
+
"use strict";const a=require("../bundled/vivid-element.cjs"),p=require("../bundled/definition2.cjs"),d=require("../bundled/affix.cjs"),m=require("../bundled/when.cjs"),f=require("../bundled/class-names.cjs");var b=Object.defineProperty,v=(n,t,o,l)=>{for(var r=void 0,c=n.length-1,i;c>=0;c--)(i=n[c])&&(r=i(t,o,r)||r);return r&&b(t,o,r),r};class e extends d.AffixIconWithTrailing(a.VividElement){}v([a.attr],e.prototype,"connotation");v([a.attr],e.prototype,"shape");v([a.attr],e.prototype,"size");v([a.attr],e.prototype,"appearance");v([a.attr],e.prototype,"text");const g=":host{display:inline-block}.base.connotation-cta{--_connotation-color-primary: var(--vvd-badge-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-badge-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-soft: var(--vvd-badge-cta-soft, var(--vvd-color-cta-100));--_connotation-color-contrast: var(--vvd-badge-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-pale: var(--vvd-badge-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-badge-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-fierce-primary: var(--vvd-badge-cta-fierce-primary, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-badge-cta-firm, var(--vvd-color-cta-600));--_connotation-color-firm-all: var(--vvd-badge-cta-firm-all, var(--vvd-color-cta-600))}.base.connotation-success{--_connotation-color-primary: var(--vvd-badge-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-badge-success-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-success-intermediate, var(--vvd-color-success-500));--_connotation-color-soft: var(--vvd-badge-success-soft, var(--vvd-color-success-100));--_connotation-color-contrast: var(--vvd-badge-success-contrast, var(--vvd-color-success-800));--_connotation-color-pale: var(--vvd-badge-success-pale, var(--vvd-color-success-300));--_connotation-color-fierce: var(--vvd-badge-success-fierce, var(--vvd-color-success-700));--_connotation-color-fierce-primary: var(--vvd-badge-success-fierce-primary, var(--vvd-color-success-700));--_connotation-color-firm: var(--vvd-badge-success-firm, var(--vvd-color-success-600));--_connotation-color-firm-all: var(--vvd-badge-success-firm-all, var(--vvd-color-success-600))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-badge-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-badge-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-soft: var(--vvd-badge-alert-soft, var(--vvd-color-alert-100));--_connotation-color-contrast: var(--vvd-badge-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-pale: var(--vvd-badge-alert-pale, var(--vvd-color-alert-300));--_connotation-color-fierce: var(--vvd-badge-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-fierce-primary: var(--vvd-badge-alert-fierce-primary, var(--vvd-color-alert-700));--_connotation-color-firm: var(--vvd-badge-alert-firm, var(--vvd-color-alert-600));--_connotation-color-firm-all: var(--vvd-badge-alert-firm-all, var(--vvd-color-alert-600))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-badge-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-badge-warning-primary-text, var(--vvd-color-canvas-text));--_connotation-color-intermediate: var(--vvd-badge-warning-intermediate, var(--vvd-color-warning-300));--_connotation-color-soft: var(--vvd-badge-warning-soft, var(--vvd-color-warning-100));--_connotation-color-contrast: var(--vvd-badge-warning-contrast, var(--vvd-color-warning-800));--_connotation-color-pale: var(--vvd-badge-warning-pale, var(--vvd-color-warning-300));--_connotation-color-fierce: var(--vvd-badge-warning-fierce, var(--vvd-color-warning-700));--_connotation-color-fierce-primary: var(--vvd-badge-warning-fierce-primary, var(--vvd-color-warning-300));--_connotation-color-firm: var(--vvd-badge-warning-firm, var(--vvd-color-warning-600));--_connotation-color-firm-all: var(--vvd-badge-warning-firm-all, var(--vvd-color-warning-600))}.base.connotation-information{--_connotation-color-primary: var(--vvd-badge-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-badge-information-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-information-intermediate, var(--vvd-color-information-500));--_connotation-color-soft: var(--vvd-badge-information-soft, var(--vvd-color-information-100));--_connotation-color-contrast: var(--vvd-badge-information-contrast, var(--vvd-color-information-800));--_connotation-color-pale: var(--vvd-badge-information-pale, var(--vvd-color-information-300));--_connotation-color-fierce: var(--vvd-badge-information-fierce, var(--vvd-color-information-700));--_connotation-color-fierce-primary: var(--vvd-badge-information-fierce-primary, var(--vvd-color-information-700));--_connotation-color-firm: var(--vvd-badge-information-firm, var(--vvd-color-information-600));--_connotation-color-firm-all: var(--vvd-badge-information-firm-all, var(--vvd-color-information-600))}.base.connotation-announcement{--_connotation-color-primary: var(--vvd-badge-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-badge-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-announcement-intermediate, var(--vvd-color-announcement-500));--_connotation-color-soft: var(--vvd-badge-announcement-soft, var(--vvd-color-announcement-100));--_connotation-color-contrast: var(--vvd-badge-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-pale: var(--vvd-badge-announcement-pale, var(--vvd-color-announcement-300));--_connotation-color-fierce: var(--vvd-badge-announcement-fierce, var(--vvd-color-announcement-700));--_connotation-color-fierce-primary: var(--vvd-badge-announcement-fierce-primary, var(--vvd-color-announcement-700));--_connotation-color-firm: var(--vvd-badge-announcement-firm, var(--vvd-color-announcement-600));--_connotation-color-firm-all: var(--vvd-badge-announcement-firm-all, var(--vvd-color-announcement-600))}.base:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-information,.connotation-announcement){--_connotation-color-primary: var(--vvd-badge-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-badge-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-soft: var(--vvd-badge-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-contrast: var(--vvd-badge-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-pale: var(--vvd-badge-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-badge-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-fierce-primary: var(--vvd-badge-accent-fierce-primary, var(--vvd-color-canvas-text));--_connotation-color-firm: var(--vvd-badge-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-firm-all: var(--vvd-badge-accent-firm-all, var(--vvd-color-neutral-600))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.appearance-subtle-light{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 85%);--_appearance-color-outline: transparent}.base{display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;background-color:var(--_appearance-color-fill);block-size:var(--_badge-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);column-gap:8px;font:var(--vvd-typography-base-condensed-bold);inline-size:100%;padding-inline:8px;vertical-align:middle}.base:not(.size-expanded){--_badge-block-size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-expanded{--_badge-block-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base:not(.icon-only){max-inline-size:100%}.base.icon-only{contain:size;padding-inline:0;place-content:center}@supports (aspect-ratio: 1){.base.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.base.icon-only{inline-size:var(--_badge-block-size)}}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.text{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}slot[name=icon]{flex-shrink:0;font-size:calc(var(--_badge-block-size) / 1.6667);line-height:1}.icon-trailing slot[name=icon]{display:flex;order:1}",_=({iconSlottedContent:n,connotation:t,appearance:o,shape:l,size:r,iconTrailing:c,text:i,icon:s})=>f.classNames("base",[`connotation-${t}`,!!t],[`appearance-${o}`,!!o],[`shape-${l}`,!!l],[`size-${r}`,!!r],["icon-trailing",c],["icon-only",!i&&(!!s||!!n?.length)]),u=n=>{const t=d.affixIconTemplateFactory(n);return a.html` <span class="${_}">
|
|
2
2
|
${o=>t(o.icon,d.IconWrapper.Slot)}
|
|
3
|
-
${
|
|
3
|
+
${m.when(o=>o.text,o=>a.html`<span class="text">${o.text}</span>`)}
|
|
4
4
|
</span>`},y=a.defineVividComponent("badge",e,u,[p.iconDefinition],{styles:g}),x=a.createRegisterFunction(y);x();
|
package/badge/index.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { V as p, a as c, h as d, c as m, d as f } from "../bundled/vivid-element.js";
|
|
2
2
|
import { i as b } from "../bundled/definition2.js";
|
|
3
3
|
import { A as g, a as _, I as u } from "../bundled/affix.js";
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
4
|
+
import { w as y } from "../bundled/when.js";
|
|
5
|
+
import { c as x } from "../bundled/class-names.js";
|
|
6
6
|
var w = Object.defineProperty, v = (r, n, o, l) => {
|
|
7
7
|
for (var a = void 0, e = r.length - 1, i; e >= 0; e--)
|
|
8
8
|
(i = r[e]) && (a = i(n, o, a) || a);
|
|
@@ -34,7 +34,7 @@ const h = ":host{display:inline-block}.base.connotation-cta{--_connotation-color
|
|
|
34
34
|
iconTrailing: e,
|
|
35
35
|
text: i,
|
|
36
36
|
icon: s
|
|
37
|
-
}) =>
|
|
37
|
+
}) => x(
|
|
38
38
|
"base",
|
|
39
39
|
[`connotation-${n}`, !!n],
|
|
40
40
|
[`appearance-${o}`, !!o],
|
|
@@ -49,7 +49,7 @@ const h = ":host{display:inline-block}.base.connotation-cta{--_connotation-color
|
|
|
49
49
|
const n = _(r);
|
|
50
50
|
return d` <span class="${z}">
|
|
51
51
|
${(o) => n(o.icon, u.Slot)}
|
|
52
|
-
${
|
|
52
|
+
${y(
|
|
53
53
|
(o) => o.text,
|
|
54
54
|
(o) => d`<span class="text">${o.text}</span>`
|
|
55
55
|
)}
|
package/banner/definition.js
CHANGED
|
@@ -4,7 +4,7 @@ import { V as VividElement, d as defineVividComponent, c as createRegisterFuncti
|
|
|
4
4
|
import { attr, observable, slotted, when, html } from '@microsoft/fast-element';
|
|
5
5
|
import { C as Connotation } from '../unbundled/enums.js';
|
|
6
6
|
import { D as DelegatesAria, d as delegateAria } from '../unbundled/delegates-aria.js';
|
|
7
|
-
import {
|
|
7
|
+
import { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper, c as IconAriaHidden } from '../unbundled/affix.js';
|
|
8
8
|
import { L as Localized } from '../unbundled/localized.js';
|
|
9
9
|
import { classNames } from '@microsoft/fast-web-utilities';
|
|
10
10
|
|
package/banner/index.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";const m=require("../bundled/definition3.cjs"),u=require("../bundled/definition2.cjs"),e=require("../bundled/vivid-element.cjs"),c=require("../bundled/enums.cjs"),p=require("../bundled/delegates-aria.cjs"),s=require("../bundled/affix.cjs"),h=require("../bundled/localized.cjs"),b=require("../bundled/
|
|
1
|
+
"use strict";const m=require("../bundled/definition3.cjs"),u=require("../bundled/definition2.cjs"),e=require("../bundled/vivid-element.cjs"),c=require("../bundled/enums.cjs"),p=require("../bundled/delegates-aria.cjs"),s=require("../bundled/affix.cjs"),h=require("../bundled/localized.cjs"),b=require("../bundled/slotted.cjs"),f=require("../bundled/when.cjs"),y=require("../bundled/class-names.cjs"),g=":host{display:block}.control.connotation-success{--_connotation-color-primary: var(--vvd-banner-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-banner-success-primary-text, var(--vvd-color-canvas))}.control.connotation-alert{--_connotation-color-primary: var(--vvd-banner-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-banner-alert-primary-text, var(--vvd-color-canvas))}.control.connotation-announcement{--_connotation-color-primary: var(--vvd-banner-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-banner-announcement-primary-text, var(--vvd-color-canvas))}.control.connotation-warning{--_connotation-color-primary: var(--vvd-banner-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-banner-warning-primary-text, var(--vvd-color-canvas-text))}.control:not(.connotation-success,.connotation-alert,.connotation-announcement,.connotation-warning){--_connotation-color-primary: var(--vvd-banner-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-banner-information-primary-text, var(--vvd-color-canvas))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control{overflow:hidden;max-height:160px;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);transition:max-height var(--transition-delay, .2s)}.control.removing{max-height:0}.header{display:flex;box-sizing:border-box;align-items:center;font:var(--vvd-typography-base-bold);inline-size:100%;min-block-size:calc(1px*(60 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.header .content{display:flex;flex-grow:1;align-items:center;justify-content:center;padding:10px 16px;column-gap:16px;inline-size:100%}.header .content slot[name=icon]{flex-shrink:0;font-size:20px;line-height:1}.header .content .action-items{flex-shrink:0}.header .dismiss-button{flex-shrink:0;margin-inline-end:8px}";var x=Object.defineProperty,i=(o,n,t,d)=>{for(var r=void 0,l=o.length-1,v;l>=0;l--)(v=o[l])&&(r=v(n,t,r)||r);return r&&x(n,t,r),r};const _={[c.Connotation.Information]:"info-solid",[c.Connotation.Announcement]:"megaphone-solid",[c.Connotation.Success]:"check-circle-solid",[c.Connotation.Warning]:"warning-solid",[c.Connotation.Alert]:"error-solid"},C=(o=c.Connotation.Information)=>_[o];class a extends s.AffixIcon(h.Localized(p.DelegatesAria(e.VividElement))){constructor(){super(...arguments),this.dismissButtonAriaLabel=null,this.removable=!1,this.#o=()=>{this.$emit("removed"),this.parentElement&&this.parentElement.removeChild(this)},this.#n=n=>{n.key!=="Escape"||!this.removable||this.remove()}}get conditionedIcon(){return this.icon??C(this.connotation)}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",this.#n)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this.#n)}remove(){this.$emit("removing");const n=this.shadowRoot&&this.shadowRoot.querySelector(".control");n&&(n.classList.add("removing"),n.addEventListener("transitionend",this.#o))}#o;#n}i([e.attr({attribute:"dismiss-aria-label"})],a.prototype,"dismissButtonAriaLabel");i([e.attr({attribute:"action-href"})],a.prototype,"actionHref");i([e.attr({attribute:"action-text"})],a.prototype,"actionText");i([e.attr({mode:"boolean"})],a.prototype,"removable");i([e.attr()],a.prototype,"text");i([e.attr()],a.prototype,"connotation");i([e.observable],a.prototype,"actionItemsSlottedContent");const w=o=>y.classNames("control",[`connotation-${o.connotation}`,!!o.connotation]);function I(o){return e.html`
|
|
2
2
|
<${o}
|
|
3
3
|
aria-label="${n=>n.dismissButtonAriaLabel||n.locale.banner.dismissButtonLabel}"
|
|
4
4
|
part="${n=>n.connotation==="warning"?"":"vvd-theme-alternate"}"
|
|
@@ -19,12 +19,12 @@
|
|
|
19
19
|
</div>
|
|
20
20
|
<slot
|
|
21
21
|
class="action-items"
|
|
22
|
-
${
|
|
22
|
+
${b.slotted("actionItemsSlottedContent")}
|
|
23
23
|
name="action-items"
|
|
24
24
|
></slot>
|
|
25
25
|
</div>
|
|
26
26
|
|
|
27
|
-
${
|
|
27
|
+
${f.when(t=>t.removable,I(n))}
|
|
28
28
|
</header>
|
|
29
29
|
</div>
|
|
30
30
|
`},A=e.defineVividComponent("banner",a,k,[u.iconDefinition,m.buttonDefinition],{styles:g}),L=e.createRegisterFunction(A);L();
|
package/banner/index.js
CHANGED
|
@@ -5,9 +5,9 @@ import { C as i } from "../bundled/enums.js";
|
|
|
5
5
|
import { D as g, d as x } from "../bundled/delegates-aria.js";
|
|
6
6
|
import { b as _, a as I, I as w, c as k } from "../bundled/affix.js";
|
|
7
7
|
import { L as C } from "../bundled/localized.js";
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
8
|
+
import { s as $ } from "../bundled/slotted.js";
|
|
9
|
+
import { w as L } from "../bundled/when.js";
|
|
10
|
+
import { c as A } from "../bundled/class-names.js";
|
|
11
11
|
const B = ":host{display:block}.control.connotation-success{--_connotation-color-primary: var(--vvd-banner-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-banner-success-primary-text, var(--vvd-color-canvas))}.control.connotation-alert{--_connotation-color-primary: var(--vvd-banner-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-banner-alert-primary-text, var(--vvd-color-canvas))}.control.connotation-announcement{--_connotation-color-primary: var(--vvd-banner-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-banner-announcement-primary-text, var(--vvd-color-canvas))}.control.connotation-warning{--_connotation-color-primary: var(--vvd-banner-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-banner-warning-primary-text, var(--vvd-color-canvas-text))}.control:not(.connotation-success,.connotation-alert,.connotation-announcement,.connotation-warning){--_connotation-color-primary: var(--vvd-banner-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-banner-information-primary-text, var(--vvd-color-canvas))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control{overflow:hidden;max-height:160px;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);transition:max-height var(--transition-delay, .2s)}.control.removing{max-height:0}.header{display:flex;box-sizing:border-box;align-items:center;font:var(--vvd-typography-base-bold);inline-size:100%;min-block-size:calc(1px*(60 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.header .content{display:flex;flex-grow:1;align-items:center;justify-content:center;padding:10px 16px;column-gap:16px;inline-size:100%}.header .content slot[name=icon]{flex-shrink:0;font-size:20px;line-height:1}.header .content .action-items{flex-shrink:0}.header .dismiss-button{flex-shrink:0;margin-inline-end:8px}";
|
|
12
12
|
var z = Object.defineProperty, r = (o, n, t, l) => {
|
|
13
13
|
for (var e = void 0, s = o.length - 1, v; s >= 0; s--)
|
|
@@ -67,7 +67,7 @@ r([
|
|
|
67
67
|
r([
|
|
68
68
|
f
|
|
69
69
|
], a.prototype, "actionItemsSlottedContent");
|
|
70
|
-
const O = (o) =>
|
|
70
|
+
const O = (o) => A("control", [`connotation-${o.connotation}`, !!o.connotation]);
|
|
71
71
|
function T(o) {
|
|
72
72
|
return d`
|
|
73
73
|
<${o}
|
|
@@ -108,12 +108,12 @@ const N = (o, n) => {
|
|
|
108
108
|
</div>
|
|
109
109
|
<slot
|
|
110
110
|
class="action-items"
|
|
111
|
-
${
|
|
111
|
+
${$("actionItemsSlottedContent")}
|
|
112
112
|
name="action-items"
|
|
113
113
|
></slot>
|
|
114
114
|
</div>
|
|
115
115
|
|
|
116
|
-
${
|
|
116
|
+
${L((t) => t.removable, T(n))}
|
|
117
117
|
</header>
|
|
118
118
|
</div>
|
|
119
119
|
`;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";const s=require("../bundled/definition2.cjs"),o=require("../bundled/vivid-element.cjs"),a=require("../bundled/breadcrumb-item.cjs"),
|
|
1
|
+
"use strict";const s=require("../bundled/definition2.cjs"),o=require("../bundled/vivid-element.cjs"),a=require("../bundled/breadcrumb-item.cjs"),t=require("../bundled/when.cjs"),c=require("../bundled/class-names.cjs"),l='.base{display:flex;align-items:center;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.base .separator{margin:0 16px;color:var(--vvd-color-neutral-600);font-size:12px}.control{font:inherit}.control:focus-visible{position:relative;outline:none}.control:focus-visible:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:"";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%);--focus-stroke-gap-color: transparent;--focus-block-size-addition: 8px;--focus-border-radius: 4px}.control:any-link{color:var(--vvd-color-cta-600);text-decoration:none}@media (hover: hover){.control:any-link:hover{text-decoration:underline}}',d=r=>c.classNames("base"),u=r=>{const n=r.tagFor(s.Icon);return o.html` <div role="listitem" class="${d}">
|
|
2
2
|
${t.when(e=>e.text&&!e.href,o.html`${e=>e.text}`)}
|
|
3
3
|
${t.when(e=>e.text&&e.href&&e.href.length>0,o.html`${e=>e._renderLinkElement(o.html`${i=>i.text}`,"control")}`)}
|
|
4
4
|
${t.when(e=>e.separator,o.html`<${n} class="separator" name="chevron-right-solid"></${n}>`)}
|
package/breadcrumb-item/index.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { I as i, i as n } from "../bundled/definition2.js";
|
|
2
2
|
import { h as r, c, d as l } from "../bundled/vivid-element.js";
|
|
3
3
|
import { B as d } from "../bundled/breadcrumb-item.js";
|
|
4
|
-
import { c as v } from "../bundled/class-names.js";
|
|
5
4
|
import { w as e } from "../bundled/when.js";
|
|
5
|
+
import { c as v } from "../bundled/class-names.js";
|
|
6
6
|
const m = '.base{display:flex;align-items:center;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.base .separator{margin:0 16px;color:var(--vvd-color-neutral-600);font-size:12px}.control{font:inherit}.control:focus-visible{position:relative;outline:none}.control:focus-visible:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:"";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%);--focus-stroke-gap-color: transparent;--focus-block-size-addition: 8px;--focus-border-radius: 4px}.control:any-link{color:var(--vvd-color-cta-600);text-decoration:none}@media (hover: hover){.control:any-link:hover{text-decoration:underline}}', p = (t) => v("base"), f = (t) => {
|
|
7
7
|
const a = t.tagFor(i);
|
|
8
8
|
return r` <div role="listitem" class="${p}">
|
package/bundled/affix.cjs
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
"use strict";const u=require("./definition2.cjs"),
|
|
1
|
+
"use strict";const u=require("./definition2.cjs"),r=require("./vivid-element.cjs"),v=require("./slotted.cjs");var $=Object.defineProperty,c=(i,n,t,a)=>{for(var e=void 0,o=i.length-1,l;o>=0;o--)(l=i[o])&&(e=l(n,t,e)||e);return e&&$(n,t,e),e};const f=i=>{class n extends i{}return c([r.attr],n.prototype,"icon"),c([r.observable],n.prototype,"iconSlottedContent"),n},I=i=>{class n extends f(i){constructor(){super(...arguments),this.iconTrailing=!1}}return c([r.attr({mode:"boolean",attribute:"icon-trailing"})],n.prototype,"iconTrailing"),n},d={Slot:!1,Span:!0},p={Hidden:"true"},m=i=>{const n=i.tagFor(u.Icon);return(t,a=d.Span,e=p.Hidden,o={label:"",announceOnUpdate:!1})=>{if(!t&&!a)return r.html`<slot
|
|
2
2
|
name="icon"
|
|
3
3
|
aria-hidden="${()=>e}"
|
|
4
4
|
${v.slotted("iconSlottedContent")}
|
|
5
|
-
></slot>`;if(!
|
|
6
|
-
class="${()=>
|
|
7
|
-
:name="${()=>
|
|
8
|
-
aria-hidden="${()=>
|
|
9
|
-
:role="${()=>
|
|
10
|
-
:ariaLive="${()=>
|
|
5
|
+
></slot>`;if(!t&&a)return null;const l=r.html`<${n} :name="${()=>t}" :label="${()=>o?.label||void 0}"></${n}>`,s=r.html.partial(a?"span":"slot");return r.html`<${s}
|
|
6
|
+
class="${()=>a?"icon":void 0}"
|
|
7
|
+
:name="${()=>a?void 0:"icon"}"
|
|
8
|
+
aria-hidden="${()=>o?.label?!1:e}"
|
|
9
|
+
:role="${()=>o?.announceOnUpdate?"status":void 0}"
|
|
10
|
+
:ariaLive="${()=>o?.announceOnUpdate?"polite":void 0}"
|
|
11
11
|
>
|
|
12
12
|
${l}
|
|
13
13
|
</${s}>`}};exports.AffixIcon=f;exports.AffixIconWithTrailing=I;exports.IconAriaHidden=p;exports.IconWrapper=d;exports.affixIconTemplateFactory=m;
|
package/bundled/affix.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { I as f } from "./definition2.js";
|
|
2
|
-
import { s as d } from "./
|
|
3
|
-
import {
|
|
2
|
+
import { a as p, h as s, o as d } from "./vivid-element.js";
|
|
3
|
+
import { s as u } from "./slotted.js";
|
|
4
4
|
var $ = Object.defineProperty, l = (a, n, e, i) => {
|
|
5
5
|
for (var o = void 0, r = a.length - 1, t; r >= 0; r--)
|
|
6
6
|
(t = a[r]) && (o = t(n, e, o) || o);
|
|
@@ -12,7 +12,7 @@ const m = (a) => {
|
|
|
12
12
|
return l([
|
|
13
13
|
p
|
|
14
14
|
], n.prototype, "icon"), l([
|
|
15
|
-
|
|
15
|
+
d
|
|
16
16
|
], n.prototype, "iconSlottedContent"), n;
|
|
17
17
|
}, x = (a) => {
|
|
18
18
|
class n extends m(a) {
|
|
@@ -38,11 +38,11 @@ const m = (a) => {
|
|
|
38
38
|
return s`<slot
|
|
39
39
|
name="icon"
|
|
40
40
|
aria-hidden="${() => o}"
|
|
41
|
-
${
|
|
41
|
+
${u("iconSlottedContent")}
|
|
42
42
|
></slot>`;
|
|
43
43
|
if (!e && i)
|
|
44
44
|
return null;
|
|
45
|
-
const t = s`<${n} :name="${() => e}" :label="${() => r?.label || void 0}"></${n}>`, c = i ? "span" : "slot";
|
|
45
|
+
const t = s`<${n} :name="${() => e}" :label="${() => r?.label || void 0}"></${n}>`, c = s.partial(i ? "span" : "slot");
|
|
46
46
|
return s`<${c}
|
|
47
47
|
class="${() => i ? "icon" : void 0}"
|
|
48
48
|
:name="${() => i ? void 0 : "icon"}"
|
package/bundled/anchored.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";const
|
|
1
|
+
"use strict";const l=require("./slotted.cjs"),n=require("./vivid-element.cjs");var a=Object.defineProperty,c=(s,o,r,t)=>{for(var e=void 0,h=s.length-1,i;h>=0;h--)(i=s[h])&&(e=i(o,r,e)||e);return e&&a(o,r,e),e};const d=s=>{class o extends s{anchorChanged(){this.#e()}_slottedAnchorChanged(){const t=!!(this._slottedAnchor&&this._slottedAnchor.length>0);n.DOM.setBooleanAttribute(this,"slotted-anchor",t),this.#e()}#e=()=>{if(!this.isConnected){this._anchorEl=void 0;return}this.#o();let t;this._slottedAnchor&&this._slottedAnchor.length>0?t=this._slottedAnchor[0]:this.anchor instanceof HTMLElement?t=this.anchor:typeof this.anchor=="string"&&(t=document.getElementById(this.anchor)??void 0,t||this.#n(this.anchor)),this._anchorEl=t};#t;#n=t=>{this.#t=new MutationObserver(()=>{const e=document.getElementById(t);e&&(this._anchorEl=e,this.#o())}),this.#t.observe(document.body,{childList:!0,subtree:!0})};#o=()=>{this.#t?.disconnect(),this.#t=void 0};connectedCallback(){super.connectedCallback(),this.#e()}disconnectedCallback(){super.disconnectedCallback(),this.#o(),this._anchorEl=void 0}}return c([n.attr],o.prototype,"anchor"),c([n.observable],o.prototype,"_slottedAnchor"),c([n.observable],o.prototype,"_anchorEl"),o},u=()=>n.html`<slot
|
|
2
2
|
name="anchor"
|
|
3
3
|
${l.slotted("_slottedAnchor")}
|
|
4
4
|
></slot>`;exports.Anchored=d;exports.anchorSlotTemplateFactory=u;
|
package/bundled/anchored.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import { s as a } from "./slotted.js";
|
|
2
|
+
import { h as l, D as d, a as p, o as i } from "./vivid-element.js";
|
|
3
3
|
var u = Object.defineProperty, h = (s, o, n, t) => {
|
|
4
4
|
for (var e = void 0, r = s.length - 1, c; r >= 0; r--)
|
|
5
5
|
(c = s[r]) && (e = c(o, n, e) || e);
|
|
@@ -18,7 +18,7 @@ const v = (s) => {
|
|
|
18
18
|
*/
|
|
19
19
|
_slottedAnchorChanged() {
|
|
20
20
|
const t = !!(this._slottedAnchor && this._slottedAnchor.length > 0);
|
|
21
|
-
|
|
21
|
+
d.setBooleanAttribute(
|
|
22
22
|
this,
|
|
23
23
|
"slotted-anchor",
|
|
24
24
|
t
|
|
@@ -51,15 +51,15 @@ const v = (s) => {
|
|
|
51
51
|
}
|
|
52
52
|
}
|
|
53
53
|
return h([
|
|
54
|
-
|
|
54
|
+
p
|
|
55
55
|
], o.prototype, "anchor"), h([
|
|
56
56
|
i
|
|
57
57
|
], o.prototype, "_slottedAnchor"), h([
|
|
58
58
|
i
|
|
59
59
|
], o.prototype, "_anchorEl"), o;
|
|
60
|
-
}, b = () =>
|
|
60
|
+
}, b = () => l`<slot
|
|
61
61
|
name="anchor"
|
|
62
|
-
${
|
|
62
|
+
${a("_slottedAnchor")}
|
|
63
63
|
></slot>`;
|
|
64
64
|
export {
|
|
65
65
|
v as A,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";const
|
|
1
|
+
"use strict";const i=require("./vivid-element.cjs");class r{constructor(t,e,s,n){this.target=t,this.binding=e,this.isBindingVolatile=s,this.attributeName=n,this.source=null,this.context=null}bind(t){this.source=t.source,this.context=t.context,this.bindingObserver||(this.bindingObserver=i.Observable.binding(this.binding.evaluate,this,this.isBindingVolatile)),this.bindingObserver.observe(this.source,this.context),this.updateTarget(this.bindingObserver.observe(this.source,this.context))}handleChange(){this.updateTarget(this.bindingObserver.observe(this.source,this.context))}updateTarget(t){i.DOM.setAttribute(this.target,this.attributeName,t)}}exports.AttributeBindingBehavior=r;
|