@vonage/vivid 5.16.0 → 5.17.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/index.cjs +1 -1
- package/accordion/index.js +1 -1
- package/accordion-item/index.cjs +1 -1
- package/accordion-item/index.js +1 -1
- package/action-group/index.cjs +3 -3
- package/action-group/index.js +5 -5
- package/alert/index.cjs +3 -3
- package/alert/index.js +17 -17
- package/audio-player/index.cjs +16 -16
- package/audio-player/index.js +27 -27
- package/avatar/index.cjs +2 -2
- package/avatar/index.js +6 -6
- package/badge/index.cjs +2 -2
- package/badge/index.js +6 -6
- package/banner/index.cjs +3 -3
- package/banner/index.js +15 -15
- package/bundled/base-color-picker.cjs +2 -2
- package/bundled/base-color-picker.js +5 -5
- package/bundled/button.cjs +1 -1
- package/bundled/button.js +2 -2
- package/bundled/calendar-picker.template.cjs +2 -2
- package/bundled/calendar-picker.template.js +498 -498
- package/bundled/definition10.cjs +18 -30
- package/bundled/definition10.js +53 -155
- package/bundled/definition11.cjs +10 -19
- package/bundled/definition11.js +25 -74
- package/bundled/definition12.cjs +72 -18
- package/bundled/definition12.js +171 -107
- package/bundled/definition13.cjs +18 -17
- package/bundled/definition13.js +45 -65
- package/bundled/definition14.cjs +5 -10
- package/bundled/definition14.js +9 -27
- package/bundled/definition15.cjs +17 -71
- package/bundled/definition15.js +64 -181
- package/bundled/definition16.cjs +12 -4
- package/bundled/definition16.js +79 -14
- package/bundled/definition17.cjs +19 -13
- package/bundled/definition17.js +119 -70
- package/bundled/definition18.cjs +87 -12
- package/bundled/definition18.js +409 -52
- package/bundled/definition19.cjs +5 -87
- package/bundled/definition19.js +14 -422
- package/bundled/definition2.cjs +3 -3
- package/bundled/definition2.js +27 -27
- package/bundled/definition20.cjs +30 -5
- package/bundled/definition20.js +159 -9
- package/bundled/definition21.cjs +28 -19
- package/bundled/definition21.js +164 -47
- package/bundled/definition22.cjs +38 -23
- package/bundled/definition22.js +64 -82
- package/bundled/definition3.cjs +1 -1
- package/bundled/definition3.js +15 -15
- package/bundled/definition4.cjs +23 -38
- package/bundled/definition4.js +82 -64
- package/bundled/definition5.cjs +2 -2
- package/bundled/definition5.js +5 -5
- package/bundled/definition6.cjs +2 -2
- package/bundled/definition6.js +24 -24
- package/bundled/definition9.cjs +12 -30
- package/bundled/definition9.js +55 -148
- package/bundled/divider.cjs +1 -1
- package/bundled/divider.js +5 -5
- package/bundled/listbox.cjs +1 -1
- package/bundled/listbox.js +1 -1
- package/bundled/mixins.cjs +4 -4
- package/bundled/mixins.js +43 -43
- package/bundled/picker-field.template.cjs +7 -7
- package/bundled/picker-field.template.js +14 -14
- package/bundled/slider.template.cjs +7 -7
- package/bundled/slider.template.js +12 -12
- package/bundled/slottable-request.cjs +1 -1
- package/bundled/slottable-request.js +8 -38
- package/bundled/time-selection-picker.template.cjs +4 -4
- package/bundled/time-selection-picker.template.js +35 -35
- package/bundled/vivid-element.cjs +1 -1
- package/bundled/vivid-element.js +1 -1
- package/calendar/index.cjs +11 -11
- package/calendar/index.js +30 -237
- package/calendar-event/index.cjs +3 -3
- package/calendar-event/index.js +4 -4
- package/card/index.cjs +14 -11
- package/card/index.js +16 -13
- package/checkbox/index.cjs +1 -1
- package/checkbox/index.js +1 -1
- package/color-picker/definition.cjs +1 -1
- package/color-picker/definition.js +1 -1
- package/color-picker/index.cjs +6 -6
- package/color-picker/index.js +24 -24
- package/combobox/definition.cjs +1 -1
- package/combobox/definition.js +1 -1
- package/combobox/index.cjs +9 -8
- package/combobox/index.js +32 -28
- package/contextual-help/definition.cjs +1 -1
- package/contextual-help/definition.js +1 -1
- package/contextual-help/index.cjs +1 -1
- package/contextual-help/index.js +1 -1
- package/custom-elements.json +1027 -615
- package/data-grid/definition.js +1 -1
- package/data-grid/index.cjs +17 -17
- package/data-grid/index.js +261 -264
- package/date-picker/index.cjs +1 -1
- package/date-picker/index.js +12 -12
- package/date-range-picker/index.cjs +1 -1
- package/date-range-picker/index.js +7 -7
- package/date-time-picker/index.cjs +4 -4
- package/date-time-picker/index.js +24 -24
- package/dial-pad/index.cjs +3 -2
- package/dial-pad/index.js +6 -5
- package/dialog/index.cjs +4 -4
- package/dialog/index.js +5 -5
- package/divider/index.cjs +1 -1
- package/divider/index.js +1 -1
- package/fab/index.cjs +3 -3
- package/fab/index.js +8 -8
- package/file-picker/index.cjs +16 -13
- package/file-picker/index.js +31 -28
- package/header/index.cjs +4 -4
- package/header/index.js +5 -5
- package/index.cjs +24 -21
- package/index.js +11 -11
- package/lib/combobox/combobox.d.ts +0 -3
- package/lib/date-time-picker/date-time-picker.d.ts +0 -4
- package/lib/dial-pad/dial-pad.d.ts +6 -2
- package/lib/dialog/dialog.d.ts +0 -1
- package/lib/menu/menu.d.ts +0 -1
- package/lib/option/option.d.ts +0 -1
- package/lib/rich-text-editor/rte/exports.d.ts +1 -0
- package/lib/rich-text-editor/rte/features/alignment.d.ts +1 -1
- package/lib/rich-text-editor/rte/features/character-count.d.ts +21 -0
- package/lib/rich-text-editor/rte/features/font-size-picker.d.ts +1 -1
- package/lib/rich-text-editor/rte/features/internal/basic-text-blocks.d.ts +1 -1
- package/lib/rich-text-editor/rte/features/keyboard-shortcuts.d.ts +1 -1
- package/lib/rich-text-editor/rte/features/text-color-picker.d.ts +1 -1
- package/lib/rich-text-editor/rte/public-interface.d.ts +6 -0
- package/lib/searchable-select/option-tag.d.ts +0 -1
- package/lib/table/definition.d.ts +2 -1
- package/lib/table/table-header-cell.d.ts +3 -0
- package/lib/table/table-sorting-button.d.ts +415 -0
- package/lib/table/table-sorting-button.template.d.ts +3 -0
- package/locales/de-DE.cjs +4 -178
- package/locales/de-DE.js +2 -179
- package/locales/en-GB.cjs +4 -9
- package/locales/en-GB.js +2 -10
- package/locales/en-US.cjs +268 -2
- package/locales/en-US.js +265 -1
- package/locales/ja-JP.cjs +4 -171
- package/locales/ja-JP.js +2 -172
- package/locales/zh-CN.cjs +4 -172
- package/locales/zh-CN.js +2 -173
- package/menu/index.cjs +1 -1
- package/menu/index.js +1 -1
- package/menu-item/index.cjs +1 -1
- package/menu-item/index.js +1 -1
- package/nav-disclosure/index.cjs +3 -3
- package/nav-disclosure/index.js +8 -8
- package/nav-item/index.cjs +1 -1
- package/nav-item/index.js +7 -7
- package/note/index.cjs +2 -2
- package/note/index.js +6 -6
- package/number-field/index.cjs +4 -4
- package/number-field/index.js +31 -31
- package/option/definition.cjs +1 -1
- package/option/definition.js +1 -1
- package/option/index.cjs +1 -1
- package/option/index.js +1 -1
- package/package.json +7 -8
- package/pagination/index.cjs +3 -3
- package/pagination/index.js +15 -15
- package/popover/index.cjs +4 -4
- package/popover/index.js +5 -5
- package/progress/index.cjs +2 -2
- package/progress/index.js +5 -5
- package/radio/index.cjs +1 -1
- package/radio/index.js +1 -1
- package/radio-group/index.cjs +4 -4
- package/radio-group/index.js +10 -10
- package/range-slider/index.cjs +4 -4
- package/range-slider/index.js +17 -17
- package/rich-text-editor/definition.cjs +1 -0
- package/rich-text-editor/definition.js +2 -2
- package/rich-text-editor/index.cjs +13 -13
- package/rich-text-editor/index.js +1886 -1829
- package/rich-text-view/index.cjs +1 -1
- package/rich-text-view/index.js +8 -8
- package/searchable-select/index.cjs +12 -12
- package/searchable-select/index.js +25 -25
- package/select/index.cjs +1 -1
- package/select/index.js +1 -1
- package/selectable-box/index.cjs +7 -7
- package/selectable-box/index.js +11 -11
- package/shared/foundation/test-utilities/fixture.d.ts +1 -1
- package/shared/patterns/linkable.d.ts +1 -1
- package/simple-color-picker/index.cjs +3 -3
- package/simple-color-picker/index.js +10 -10
- package/split-button/index.cjs +5 -5
- package/split-button/index.js +10 -10
- package/status/index.cjs +2 -2
- package/status/index.js +12 -12
- package/switch/index.cjs +3 -3
- package/switch/index.js +5 -5
- package/tab/index.cjs +1 -1
- package/tab/index.js +1 -1
- package/tab-panel/index.cjs +1 -1
- package/tab-panel/index.js +1 -1
- package/table/definition.cjs +17 -14
- package/table/definition.js +3 -2
- package/table/index.cjs +19 -10
- package/table/index.js +69 -21
- package/tabs/index.cjs +2 -2
- package/tabs/index.js +4 -4
- package/tag/index.cjs +7 -7
- package/tag/index.js +9 -9
- package/tag-group/index.cjs +3 -3
- package/tag-group/index.js +5 -5
- package/text-area/index.cjs +2 -2
- package/text-area/index.js +12 -12
- package/text-field/definition.cjs +1 -1
- package/text-field/definition.js +1 -1
- package/text-field/index.cjs +1 -1
- package/text-field/index.js +1 -1
- package/time-picker/index.cjs +1 -1
- package/time-picker/index.js +1 -1
- package/toggletip/definition.cjs +1 -1
- package/toggletip/definition.js +1 -1
- package/toggletip/index.cjs +1 -1
- package/toggletip/index.js +1 -1
- package/tooltip/definition.cjs +1 -1
- package/tooltip/definition.js +1 -1
- package/tooltip/index.cjs +1 -1
- package/tooltip/index.js +1 -1
- package/tree-item/index.cjs +1 -1
- package/tree-item/index.js +1 -1
- package/tree-view/index.cjs +3 -3
- package/tree-view/index.js +17 -17
- package/unbundled/button.cjs +2 -2
- package/unbundled/button.js +2 -2
- package/unbundled/calendar-picker.template.cjs +4347 -9
- package/unbundled/calendar-picker.template.js +4345 -7
- package/unbundled/chunk.cjs +0 -22
- package/unbundled/definition13.cjs +1 -8
- package/unbundled/definition13.js +1 -8
- package/unbundled/definition14.cjs +2 -2
- package/unbundled/definition14.js +2 -2
- package/unbundled/definition2.cjs +1 -1
- package/unbundled/definition2.js +1 -1
- package/unbundled/definition21.cjs +1 -2
- package/unbundled/definition21.js +1 -2
- package/unbundled/definition22.cjs +7 -2
- package/unbundled/definition22.js +7 -2
- package/unbundled/definition24.cjs +98 -979
- package/unbundled/definition24.js +93 -974
- package/unbundled/definition25.cjs +37 -322
- package/unbundled/definition25.js +33 -318
- package/unbundled/definition26.cjs +317 -91
- package/unbundled/definition26.js +313 -87
- package/unbundled/definition27.cjs +94 -192
- package/unbundled/definition27.js +91 -183
- package/unbundled/definition28.cjs +387 -395
- package/unbundled/definition28.js +387 -395
- package/unbundled/definition29.cjs +189 -110
- package/unbundled/definition29.js +180 -107
- package/unbundled/definition30.cjs +520 -36
- package/unbundled/definition30.js +519 -35
- package/unbundled/definition32.cjs +477 -477
- package/unbundled/definition32.js +475 -475
- package/unbundled/definition33.cjs +87 -2
- package/unbundled/definition33.js +77 -4
- package/unbundled/definition35.cjs +2 -2
- package/unbundled/definition35.js +2 -2
- package/unbundled/definition36.cjs +1 -1
- package/unbundled/definition36.js +1 -1
- package/unbundled/definition37.cjs +6 -2
- package/unbundled/definition37.js +6 -2
- package/unbundled/definition38.cjs +7 -5
- package/unbundled/definition38.js +7 -5
- package/unbundled/definition39.cjs +1 -0
- package/unbundled/definition39.js +1 -0
- package/unbundled/definition42.cjs +22 -11
- package/unbundled/definition42.js +22 -11
- package/unbundled/definition49.cjs +3 -3
- package/unbundled/definition49.js +3 -3
- package/unbundled/definition56.cjs +437 -9506
- package/unbundled/definition56.js +340 -9415
- package/unbundled/definition57.cjs +5 -5
- package/unbundled/definition57.js +5 -5
- package/unbundled/definition58.cjs +4 -3
- package/unbundled/definition58.js +2 -1
- package/unbundled/definition59.cjs +4 -3
- package/unbundled/definition59.js +4 -3
- package/unbundled/definition62.cjs +2 -2
- package/unbundled/definition62.js +2 -2
- package/unbundled/definition64.cjs +1 -1
- package/unbundled/definition64.js +1 -1
- package/unbundled/definition71.cjs +2 -2
- package/unbundled/definition71.js +2 -2
- package/unbundled/definition72.cjs +1 -2
- package/unbundled/definition72.js +1 -2
- package/unbundled/definition75.cjs +3 -51711
- package/unbundled/definition75.js +1 -51711
- package/unbundled/listbox.cjs +1 -1
- package/unbundled/listbox.js +1 -1
- package/unbundled/localized.cjs +2 -2
- package/unbundled/localized.js +1 -1
- package/unbundled/picker-field.template.cjs +1 -1
- package/unbundled/picker-field.template.js +1 -1
- package/unbundled/slottable-request.cjs +2 -3168
- package/unbundled/slottable-request.js +3 -3097
- package/unbundled/time-selection-picker.template.cjs +1 -1
- package/unbundled/time-selection-picker.template.js +1 -1
- package/unbundled/vivid-element.cjs +1 -1
- package/unbundled/vivid-element.js +1 -1
- package/video-player/index.cjs +3 -3
- package/video-player/index.js +9 -9
- package/vivid.api.json +220 -282
- package/unbundled/chunk.js +0 -33
- package/unbundled/en-US.cjs +0 -447
- package/unbundled/en-US.js +0 -443
package/bundled/definition4.js
CHANGED
|
@@ -1,72 +1,90 @@
|
|
|
1
|
-
import { T as e, d as t, l as n, o as r, s as i, t as a
|
|
2
|
-
import { t as
|
|
3
|
-
import { t as
|
|
4
|
-
import { t as l } from "./slotted.js";
|
|
5
|
-
import { t as u } from "./
|
|
6
|
-
import {
|
|
7
|
-
import { t as
|
|
8
|
-
import { a as
|
|
9
|
-
|
|
10
|
-
|
|
1
|
+
import { T as e, d as t, l as n, o as r, s as i, t as a } from "./vivid-element.js";
|
|
2
|
+
import { t as o } from "./ref.js";
|
|
3
|
+
import { t as s } from "./when.js";
|
|
4
|
+
import { r as c, t as l } from "./slotted.js";
|
|
5
|
+
import { t as u } from "./children.js";
|
|
6
|
+
import { r as d, t as f } from "./definition2.js";
|
|
7
|
+
import { t as p } from "./decorate.js";
|
|
8
|
+
import { a as m, i as h, t as g } from "./affix.js";
|
|
9
|
+
import { t as _ } from "./class-names.js";
|
|
10
|
+
import { t as v } from "./dom.js";
|
|
11
|
+
import { n as y, t as b } from "./host-semantics.js";
|
|
12
|
+
//#region src/lib/tree-item/tree-item.scss?inline
|
|
13
|
+
var x = ":host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.control{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control:disabled,.control.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control:active:where(:not(.disabled,:disabled)),.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control.selected:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}@media (hover:hover){.control.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:transparent}}.control.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:transparent}.control{--_connotation-color-primary:var(--vvd-tree-item-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-tree-item-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-tree-item-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-faint:var(--vvd-tree-item-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-tree-item-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-firm:var(--vvd-tree-item-accent-firm,var(--vvd-color-canvas-text));box-sizing:border-box;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);hyphens:auto;inline-size:100%;min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));vertical-align:middle;word-break:break-word;border-radius:8px;align-items:center;gap:12px;padding-inline:16px;text-decoration:none;display:inline-flex;position:relative}@supports (user-select:none){.control{user-select:none}}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}:host(:focus-visible) .control{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,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))}:host(:focus-visible) .control:not(.selected){--focus-stroke-gap-color:transparent}.control .text{font:var(--vvd-typography-base)}.expandCollapseButton{border-radius:8px;align-items:center;font-size:20px;display:flex}.expandCollapseButton .expandCollapseIcon{margin:4px}@media (hover:hover){.expandCollapseButton:hover{background-color:var(--vvd-color-neutral-100)}.selected .expandCollapseButton:hover{background-color:var(--vvd-color-neutral-700)}}.items{flex-direction:column;gap:4px;margin-block-start:4px;padding-inline-start:48px;display:flex}slot[name=icon]{font-size:20px;line-height:1}.control:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}";
|
|
14
|
+
//#endregion
|
|
15
|
+
//#region src/lib/tree-item/tree-item.ts
|
|
16
|
+
function S(e) {
|
|
17
|
+
return v(e) && (e.getAttribute("role") === "treeitem" || e instanceof C);
|
|
18
|
+
}
|
|
19
|
+
var C = class extends b(g(a)) {
|
|
11
20
|
constructor(...e) {
|
|
12
|
-
super(...e), this.
|
|
13
|
-
this.
|
|
14
|
-
}, this.
|
|
15
|
-
this
|
|
21
|
+
super(...e), this.expanded = !1, this.selected = !1, this.disabled = !1, this.focusable = !1, this.isNestedItem = () => S(this.parentElement), this.handleExpandCollapseButtonClick = (e) => {
|
|
22
|
+
!this.disabled && !e.defaultPrevented && (this.expanded = !this.expanded);
|
|
23
|
+
}, this.handleFocus = (e) => {
|
|
24
|
+
this.setAttribute("tabindex", "0");
|
|
25
|
+
}, this.handleBlur = (e) => {
|
|
26
|
+
this.setAttribute("tabindex", "-1");
|
|
16
27
|
};
|
|
17
28
|
}
|
|
29
|
+
expandedChanged() {
|
|
30
|
+
this.$fastController.isConnected && this.$emit("expanded-change", this);
|
|
31
|
+
}
|
|
32
|
+
selectedChanged() {
|
|
33
|
+
this.$fastController.isConnected && this.$emit("selected-change", this);
|
|
34
|
+
}
|
|
35
|
+
itemsChanged() {
|
|
36
|
+
this.$fastController.isConnected && this.items.forEach((e) => {
|
|
37
|
+
/* v8 ignore else -- @preserve */
|
|
38
|
+
S(e) && (e.nested = !0);
|
|
39
|
+
});
|
|
40
|
+
}
|
|
41
|
+
static focusItem(e) {
|
|
42
|
+
e.focusable = !0, e.focus();
|
|
43
|
+
}
|
|
44
|
+
childItemLength() {
|
|
45
|
+
return this.childItems.filter((e) => S(e)).length;
|
|
46
|
+
}
|
|
18
47
|
};
|
|
19
|
-
|
|
20
|
-
attribute: "heading-level",
|
|
21
|
-
mode: "fromView",
|
|
22
|
-
converter: o
|
|
23
|
-
})], _.prototype, "headinglevel", void 0), d([n], _.prototype, "appearance", void 0), d([n({ mode: "boolean" })], _.prototype, "expanded", void 0), d([n], _.prototype, "id", void 0), d([n], _.prototype, "heading", void 0), d([e], _.prototype, "_headingSlottedContent", void 0), d([n({
|
|
24
|
-
mode: "boolean",
|
|
25
|
-
attribute: "no-indicator"
|
|
26
|
-
})], _.prototype, "noIndicator", void 0), d([n], _.prototype, "meta", void 0), d([e], _.prototype, "_metaSlottedContent", void 0), d([n], _.prototype, "size", void 0);
|
|
48
|
+
p([n], C.prototype, "text", void 0), p([n({ mode: "boolean" })], C.prototype, "expanded", void 0), p([n({ mode: "boolean" })], C.prototype, "selected", void 0), p([n({ mode: "boolean" })], C.prototype, "disabled", void 0), p([e], C.prototype, "focusable", void 0), p([e], C.prototype, "childItems", void 0), p([e], C.prototype, "items", void 0), p([e], C.prototype, "nested", void 0), p([e], C.prototype, "renderCollapsedChildren", void 0);
|
|
27
49
|
//#endregion
|
|
28
|
-
//#region src/lib/
|
|
29
|
-
var
|
|
30
|
-
let
|
|
50
|
+
//#region src/lib/tree-item/tree-item.template.ts
|
|
51
|
+
var w = ({ disabled: e, selected: t }) => _("control", ["disabled", e], ["selected", !!t]), T = (e) => {
|
|
52
|
+
let n = e.tagFor(d);
|
|
31
53
|
return t`
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
</button>
|
|
58
|
-
</${i}>
|
|
59
|
-
`;
|
|
60
|
-
}, b = r("accordion-item", _, (e) => t`
|
|
61
|
-
${(t) => y(e, "h" + t.headinglevel)}
|
|
62
|
-
<div
|
|
63
|
-
id="${(e) => e.id}-panel"
|
|
64
|
-
aria-labelledby="${(e) => e.id}"
|
|
65
|
-
role="region"
|
|
66
|
-
class="region ${(e) => e.icon && !e.iconTrailing ? "padded" : ""} ${(e) => e.size ? `size-${e.size}` : ""}"
|
|
54
|
+
<div aria-hidden="true"
|
|
55
|
+
class="expandCollapseButton"
|
|
56
|
+
@click="${(e, t) => e.handleExpandCollapseButtonClick(t.event)}"
|
|
57
|
+
${o("expandCollapseButton")}
|
|
58
|
+
>
|
|
59
|
+
<${n} class="expandCollapseIcon" name="${(e) => e.expanded ? "chevron-down-line" : "chevron-right-line"}"></${n}>
|
|
60
|
+
</div>`;
|
|
61
|
+
}, E = r("tree-item", C, (e) => {
|
|
62
|
+
let n = m(e), r = e.tagFor(C, !0);
|
|
63
|
+
return t` <template
|
|
64
|
+
slot="${(e) => e.isNestedItem() ? "item" : void 0}"
|
|
65
|
+
tabindex="-1"
|
|
66
|
+
${y({
|
|
67
|
+
role: "treeitem",
|
|
68
|
+
ariaExpanded: (e) => e.childItems && e.childItems.length > 0 ? e.expanded : void 0,
|
|
69
|
+
ariaSelected: (e) => e.selected,
|
|
70
|
+
ariaDisabled: (e) => e.disabled
|
|
71
|
+
})}
|
|
72
|
+
@focusin="${(e, t) => e.handleFocus(t.event)}"
|
|
73
|
+
@focusout="${(e, t) => e.handleBlur(t.event)}"
|
|
74
|
+
${u({
|
|
75
|
+
property: "childItems",
|
|
76
|
+
filter: c(r)
|
|
77
|
+
})}
|
|
67
78
|
>
|
|
68
|
-
<
|
|
69
|
-
|
|
70
|
-
|
|
79
|
+
<div class="${w}">
|
|
80
|
+
${s((e) => e.childItems && e.childItems.length > 0, T(e))}
|
|
81
|
+
${(e) => n(e.icon, h.Slot)}
|
|
82
|
+
${(e) => e.text}
|
|
83
|
+
</div>
|
|
84
|
+
${s((e) => e.childItems && e.childItems.length > 0 && e.expanded, t` <div role="group" class="items">
|
|
85
|
+
<slot name="item" ${l("items")}></slot>
|
|
86
|
+
</div>`)}
|
|
87
|
+
</template>`;
|
|
88
|
+
}, [f], { styles: x }), D = i(E);
|
|
71
89
|
//#endregion
|
|
72
|
-
export {
|
|
90
|
+
export { S as i, E as n, C as r, D as t };
|
package/bundled/definition5.cjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
const e=require(`./vivid-element.cjs`),t=require(`./when.cjs`),n=require(`./decorate.cjs`),r=require(`./
|
|
1
|
+
const e=require(`./vivid-element.cjs`),t=require(`./when.cjs`),n=require(`./decorate.cjs`),r=require(`./delegates-aria.cjs`),i=require(`./class-names.cjs`),a=require(`./base-progress.cjs`);var o=`:host{--_vvd-progress-ring-accent-firm-wrapper:var(--vvd-progress-ring-accent-firm);--_vvd-progress-ring-cta-firm-wrapper:var(--vvd-progress-ring-cta-firm);--_vvd-progress-ring-alert-firm-wrapper:var(--vvd-progress-ring-alert-firm);--_vvd-progress-ring-success-firm-wrapper:var(--vvd-progress-ring-success-firm)}.base{--vvd-progress-ring-accent-firm:var(--_vvd-progress-ring-accent-firm-wrapper,var(--vvd-progress-ring-accent-primary));--vvd-progress-ring-cta-firm:var(--_vvd-progress-ring-cta-firm-wrapper,var(--vvd-progress-ring-cta-primary));--vvd-progress-ring-alert-firm:var(--_vvd-progress-ring-alert-firm-wrapper,var(--vvd-progress-ring-alert-primary));--vvd-progress-ring-success-firm:var(--_vvd-progress-ring-success-firm-wrapper,var(--vvd-progress-ring-success-primary))}.base.connotation-cta{--_connotation-color-firm:var(--vvd-progress-ring-cta-firm,var(--vvd-color-cta-600))}.base.connotation-alert{--_connotation-color-firm:var(--vvd-progress-ring-alert-firm,var(--vvd-color-alert-600))}.base.connotation-success{--_connotation-color-firm:var(--vvd-progress-ring-success-firm,var(--vvd-color-success-600))}.base:not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-firm:var(--vvd-progress-ring-accent-firm,var(--vvd-color-canvas-text))}.base{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.size--6{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)) - 1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.base.size--5{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20))}.base.size--4{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.base.size--3{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 12))}.base.size--2{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.base.size--1{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4))}.base.size-1{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 4))}.base.size-2{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8))}.base.size-3{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 12))}.base.size-4{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 16))}.base.size-5{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 20))}.base:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-1,.size-2,.size-3,.size-4,.size-5){--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}.base{block-size:var(--_size);color:var(--_appearance-color-text);inline-size:var(--_size);outline:none;align-items:center}.progress{width:100%;height:100%}.background{fill:none;stroke:#0000;stroke-width:1px}.determinate{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform-origin:50%;transition:all .2s ease-in-out;transform:rotate(-90deg)}.indeterminate-indicator-1{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform-origin:50%;transition:all .2s ease-in-out;animation:2s linear infinite spin-infinite;transform:rotate(-90deg)}.base.paused .indeterminate-indicator-1{animation-play-state:paused}@keyframes spin-infinite{0%{stroke-dasharray:.01 43.97;transform:rotate(0)}50%{stroke-dasharray:21.99 21.99;transform:rotate(450deg)}to{stroke-dasharray:.01 43.97;transform:rotate(1080deg)}}`,s=class extends r.t(a.t){};n.t([e.l],s.prototype,`connotation`,void 0),n.t([e.l],s.prototype,`size`,void 0);var c=({connotation:e,size:t,paused:n})=>i.t(`base`,[`disabled`,!!n],[`connotation-${e}`,!!e],[`size-${t}`,!!t]),l=44,u=e.d`<template>
|
|
2
2
|
<div
|
|
3
3
|
class="${e=>e.paused?`paused`:``} ${c}"
|
|
4
|
-
${
|
|
4
|
+
${r.n({role:`progressbar`,ariaValueNow:e=>e.value,ariaValueMin:e=>e.min,ariaValueMax:e=>e.max})}
|
|
5
5
|
>
|
|
6
6
|
${t.t(e=>typeof e.value==`number`,e.d`
|
|
7
7
|
<svg class="progress" viewBox="0 0 16 16">
|
package/bundled/definition5.js
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
import { d as e, l as t, o as n, s as r } from "./vivid-element.js";
|
|
2
2
|
import { t as i } from "./when.js";
|
|
3
3
|
import { t as a } from "./decorate.js";
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
4
|
+
import { n as o, t as s } from "./delegates-aria.js";
|
|
5
|
+
import { t as c } from "./class-names.js";
|
|
6
6
|
import { t as l } from "./base-progress.js";
|
|
7
7
|
//#region src/lib/progress-ring/progress-ring.scss?inline
|
|
8
|
-
var u = ":host{--_vvd-progress-ring-accent-firm-wrapper:var(--vvd-progress-ring-accent-firm);--_vvd-progress-ring-cta-firm-wrapper:var(--vvd-progress-ring-cta-firm);--_vvd-progress-ring-alert-firm-wrapper:var(--vvd-progress-ring-alert-firm);--_vvd-progress-ring-success-firm-wrapper:var(--vvd-progress-ring-success-firm)}.base{--vvd-progress-ring-accent-firm:var(--_vvd-progress-ring-accent-firm-wrapper,var(--vvd-progress-ring-accent-primary));--vvd-progress-ring-cta-firm:var(--_vvd-progress-ring-cta-firm-wrapper,var(--vvd-progress-ring-cta-primary));--vvd-progress-ring-alert-firm:var(--_vvd-progress-ring-alert-firm-wrapper,var(--vvd-progress-ring-alert-primary));--vvd-progress-ring-success-firm:var(--_vvd-progress-ring-success-firm-wrapper,var(--vvd-progress-ring-success-primary))}.base.connotation-cta{--_connotation-color-firm:var(--vvd-progress-ring-cta-firm,var(--vvd-color-cta-600))}.base.connotation-alert{--_connotation-color-firm:var(--vvd-progress-ring-alert-firm,var(--vvd-color-alert-600))}.base.connotation-success{--_connotation-color-firm:var(--vvd-progress-ring-success-firm,var(--vvd-color-success-600))}.base:not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-firm:var(--vvd-progress-ring-accent-firm,var(--vvd-color-canvas-text))}.base{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.size--6{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)) - 1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.base.size--5{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20))}.base.size--4{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.base.size--3{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 12))}.base.size--2{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.base.size--1{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4))}.base.size-1{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 4))}.base.size-2{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8))}.base.size-3{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 12))}.base.size-4{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 16))}.base.size-5{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 20))}.base:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-1,.size-2,.size-3,.size-4,.size-5){--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}.base{block-size:var(--_size);color:var(--_appearance-color-text);inline-size:var(--_size);outline:none;align-items:center}.progress{width:100%;height:100%}.background{fill:none;stroke:#0000;stroke-width:1px}.determinate{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform-origin:50%;transition:all .2s ease-in-out;transform:rotate(-90deg)}.indeterminate-indicator-1{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform-origin:50%;transition:all .2s ease-in-out;animation:2s linear infinite spin-infinite;transform:rotate(-90deg)}.base.paused .indeterminate-indicator-1{animation-play-state:paused}@keyframes spin-infinite{0%{stroke-dasharray:.01 43.97;transform:rotate(0)}50%{stroke-dasharray:21.99 21.99;transform:rotate(450deg)}to{stroke-dasharray:.01 43.97;transform:rotate(1080deg)}}", d = class extends
|
|
8
|
+
var u = ":host{--_vvd-progress-ring-accent-firm-wrapper:var(--vvd-progress-ring-accent-firm);--_vvd-progress-ring-cta-firm-wrapper:var(--vvd-progress-ring-cta-firm);--_vvd-progress-ring-alert-firm-wrapper:var(--vvd-progress-ring-alert-firm);--_vvd-progress-ring-success-firm-wrapper:var(--vvd-progress-ring-success-firm)}.base{--vvd-progress-ring-accent-firm:var(--_vvd-progress-ring-accent-firm-wrapper,var(--vvd-progress-ring-accent-primary));--vvd-progress-ring-cta-firm:var(--_vvd-progress-ring-cta-firm-wrapper,var(--vvd-progress-ring-cta-primary));--vvd-progress-ring-alert-firm:var(--_vvd-progress-ring-alert-firm-wrapper,var(--vvd-progress-ring-alert-primary));--vvd-progress-ring-success-firm:var(--_vvd-progress-ring-success-firm-wrapper,var(--vvd-progress-ring-success-primary))}.base.connotation-cta{--_connotation-color-firm:var(--vvd-progress-ring-cta-firm,var(--vvd-color-cta-600))}.base.connotation-alert{--_connotation-color-firm:var(--vvd-progress-ring-alert-firm,var(--vvd-color-alert-600))}.base.connotation-success{--_connotation-color-firm:var(--vvd-progress-ring-success-firm,var(--vvd-color-success-600))}.base:not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-firm:var(--vvd-progress-ring-accent-firm,var(--vvd-color-canvas-text))}.base{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.size--6{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)) - 1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.base.size--5{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20))}.base.size--4{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.base.size--3{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 12))}.base.size--2{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.base.size--1{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4))}.base.size-1{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 4))}.base.size-2{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8))}.base.size-3{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 12))}.base.size-4{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 16))}.base.size-5{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 20))}.base:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-1,.size-2,.size-3,.size-4,.size-5){--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}.base{block-size:var(--_size);color:var(--_appearance-color-text);inline-size:var(--_size);outline:none;align-items:center}.progress{width:100%;height:100%}.background{fill:none;stroke:#0000;stroke-width:1px}.determinate{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform-origin:50%;transition:all .2s ease-in-out;transform:rotate(-90deg)}.indeterminate-indicator-1{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform-origin:50%;transition:all .2s ease-in-out;animation:2s linear infinite spin-infinite;transform:rotate(-90deg)}.base.paused .indeterminate-indicator-1{animation-play-state:paused}@keyframes spin-infinite{0%{stroke-dasharray:.01 43.97;transform:rotate(0)}50%{stroke-dasharray:21.99 21.99;transform:rotate(450deg)}to{stroke-dasharray:.01 43.97;transform:rotate(1080deg)}}", d = class extends s(l) {};
|
|
9
9
|
a([t], d.prototype, "connotation", void 0), a([t], d.prototype, "size", void 0);
|
|
10
10
|
//#endregion
|
|
11
11
|
//#region src/lib/progress-ring/progress-ring.template.ts
|
|
12
|
-
var f = ({ connotation: e, size: t, paused: n }) =>
|
|
12
|
+
var f = ({ connotation: e, size: t, paused: n }) => c("base", ["disabled", !!n], [`connotation-${e}`, !!e], [`size-${t}`, !!t]), p = 44, m = n("progress-ring", d, e`<template>
|
|
13
13
|
<div
|
|
14
14
|
class="${(e) => e.paused ? "paused" : ""} ${f}"
|
|
15
|
-
${
|
|
15
|
+
${o({
|
|
16
16
|
role: "progressbar",
|
|
17
17
|
ariaValueNow: (e) => e.value,
|
|
18
18
|
ariaValueMin: (e) => e.min,
|
package/bundled/definition6.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const e=require(`./localized.cjs`),t=require(`./vivid-element.cjs`),n=require(`./ref.cjs`),r=require(`./when.cjs`),i=require(`./definition2.cjs`),a=require(`./decorate.cjs`),o=require(`./class-names.cjs`),s=require(`./affix.cjs`),c=require(`./delegates-aria.cjs`),l=require(`./definition5.cjs`),u=require(`./button.cjs`),d=require(`./linkable.cjs`),f=require(`./enums.cjs`);var p=class extends s.n(e.t(d.t(u.t))){constructor(){super(),this.stacked=!1,this.pending=!1,this.dropdownIndicator=!1,this.active=!1,this.title=``}clickHandler(e){if(this.disabled||this.pending){e.preventDefault(),e.stopImmediatePropagation();return}}};a.t([t.l({converter:{fromView:e=>e||null,toView:e=>e||null}})],p.prototype,`title`,void 0),a.t([t.l],p.prototype,`connotation`,void 0),a.t([t.l],p.prototype,`shape`,void 0),a.t([t.l],p.prototype,`appearance`,void 0),a.t([t.l],p.prototype,`size`,void 0),a.t([t.l({mode:`boolean`,attribute:`stacked`})],p.prototype,`stacked`,void 0),a.t([t.l({mode:`boolean`,attribute:`pending`})],p.prototype,`pending`,void 0),a.t([t.l({mode:`boolean`,attribute:`dropdown-indicator`})],p.prototype,`dropdownIndicator`,void 0),a.t([t.l({mode:`boolean`,attribute:`active`})],p.prototype,`active`,void 0),a.t([t.l],p.prototype,`label`,void 0);var m=`.chevron{font:var(--vvd-typography-base-extended);flex-shrink:0;transition:transform .2s;display:flex;transform:rotate(0)}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:host{--_vvd-button-accent-firm-wrapper:var(--vvd-button-accent-firm);--_vvd-button-cta-firm-wrapper:var(--vvd-button-cta-firm);--_vvd-button-success-firm-wrapper:var(--vvd-button-success-firm);--_vvd-button-alert-firm-wrapper:var(--vvd-button-alert-firm);--_vvd-button-announcement-firm-wrapper:var(--vvd-button-announcement-firm)}.control:not(.appearance-ghost-light,.appearance-filled,.appearance-outlined){--vvd-button-accent-firm:var(--_vvd-button-accent-firm-wrapper,var(--vvd-button-accent-primary));--vvd-button-cta-firm:var(--_vvd-button-cta-firm-wrapper,var(--vvd-button-cta-primary));--vvd-button-success-firm:var(--_vvd-button-success-firm-wrapper,var(--vvd-button-success-primary));--vvd-button-alert-firm:var(--_vvd-button-alert-firm-wrapper,var(--vvd-button-alert-primary));--vvd-button-announcement-firm:var(--_vvd-button-announcement-firm-wrapper,var(--vvd-button-announcement-primary))}:host{display:inline-block}.control.connotation-cta{--_connotation-color-primary:var(--vvd-button-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-button-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-button-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-contrast:var(--vvd-button-cta-contrast,var(--vvd-color-cta-800));--_connotation-color-fierce:var(--vvd-button-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-firm:var(--vvd-button-cta-firm,var(--vvd-color-cta-600));--_connotation-color-soft:var(--vvd-button-cta-soft,var(--vvd-color-cta-100));--_connotation-color-faint:var(--vvd-button-cta-faint,var(--vvd-color-cta-50));--_connotation-color-fierce-primary:var(--vvd-button-cta-fierce-primary,var(--vvd-color-cta-700))}.control.connotation-success{--_connotation-color-primary:var(--vvd-button-success-primary,var(--vvd-color-success-500));--_connotation-color-primary-text:var(--vvd-button-success-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-button-success-primary-increment,var(--vvd-color-success-600));--_connotation-color-contrast:var(--vvd-button-success-contrast,var(--vvd-color-success-800));--_connotation-color-fierce:var(--vvd-button-success-fierce,var(--vvd-color-success-700));--_connotation-color-firm:var(--vvd-button-success-firm,var(--vvd-color-success-600));--_connotation-color-soft:var(--vvd-button-success-soft,var(--vvd-color-success-100));--_connotation-color-faint:var(--vvd-button-success-faint,var(--vvd-color-success-50));--_connotation-color-fierce-primary:var(--vvd-button-success-fierce-primary,var(--vvd-color-success-700))}.control.connotation-alert{--_connotation-color-primary:var(--vvd-button-alert-primary,var(--vvd-color-alert-500));--_connotation-color-primary-text:var(--vvd-button-alert-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-button-alert-primary-increment,var(--vvd-color-alert-600));--_connotation-color-contrast:var(--vvd-button-alert-contrast,var(--vvd-color-alert-800));--_connotation-color-fierce:var(--vvd-button-alert-fierce,var(--vvd-color-alert-700));--_connotation-color-firm:var(--vvd-button-alert-firm,var(--vvd-color-alert-600));--_connotation-color-soft:var(--vvd-button-alert-soft,var(--vvd-color-alert-100));--_connotation-color-faint:var(--vvd-button-alert-faint,var(--vvd-color-alert-50));--_connotation-color-fierce-primary:var(--vvd-button-alert-fierce-primary,var(--vvd-color-alert-700))}.control.connotation-announcement{--_connotation-color-primary:var(--vvd-button-announcement-primary,var(--vvd-color-announcement-500));--_connotation-color-primary-text:var(--vvd-button-announcement-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-button-announcement-primary-increment,var(--vvd-color-announcement-600));--_connotation-color-contrast:var(--vvd-button-announcement-contrast,var(--vvd-color-announcement-800));--_connotation-color-fierce:var(--vvd-button-announcement-fierce,var(--vvd-color-announcement-700));--_connotation-color-firm:var(--vvd-button-announcement-firm,var(--vvd-color-announcement-600));--_connotation-color-soft:var(--vvd-button-announcement-soft,var(--vvd-color-announcement-100));--_connotation-color-faint:var(--vvd-button-announcement-faint,var(--vvd-color-announcement-50));--_connotation-color-fierce-primary:var(--vvd-button-announcement-fierce-primary,var(--vvd-color-announcement-700))}.control:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-announcement){--_connotation-color-primary:var(--vvd-button-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-button-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-button-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-contrast:var(--vvd-button-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-button-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-firm:var(--vvd-button-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-button-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-faint:var(--vvd-button-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-fierce-primary:var(--vvd-button-accent-fierce-primary,var(--vvd-color-canvas-text))}.control.appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}.control.appearance-outlined{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-300)}.control,.control.appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control.appearance-outlined-light{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-300)}@media (hover:hover){.control: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}.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--vvd-color-neutral-300)}.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control: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}.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined-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:var(--vvd-color-neutral-300)}}.control.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}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--vvd-color-neutral-300)}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control.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}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined-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:var(--vvd-color-neutral-300)}.control:disabled.appearance-filled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:transparent}.control:disabled.appearance-outlined{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-300)}.control:disabled,.control:disabled.appearance-ghost-light{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control:disabled.appearance-outlined-light{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-300)}.control.disabled.appearance-filled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:transparent}.control.disabled.appearance-outlined{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-300)}.control.disabled,.control.disabled.appearance-ghost-light{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control.disabled.appearance-outlined-light{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-300)}.control: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}.control:active:where(:not(.disabled,:disabled)).appearance-outlined{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:var(--vvd-color-neutral-300)}.control:active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control: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}.control:active:where(:not(.disabled,:disabled)).appearance-outlined-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:var(--vvd-color-neutral-300)}.control.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}.control.active:where(:not(.disabled,:disabled)).appearance-outlined{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:var(--vvd-color-neutral-300)}.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control.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}.control.active:where(:not(.disabled,:disabled)).appearance-outlined-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:var(--vvd-color-neutral-300)}.control{--focus-stroke-gap-color:transparent;box-sizing:border-box;border-radius:var(--_button-border-radius);background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);justify-content:space-between;align-items:center;gap:var(--_button-icon-gap);vertical-align:middle;border:0;margin:0;text-decoration:none;display:inline-flex}.control .text{-webkit-line-clamp:var(--button-line-clamp,1);text-align:start;-webkit-box-orient:vertical;max-inline-size:100%;display:-webkit-box;overflow:hidden}.control:not(.icon-only){inline-size:100%}.control:not(.disabled){cursor:var(--button-cursor,pointer)}.control.disabled{cursor:not-allowed}@supports (user-select:none){.control{user-select:none}}.control:not(.stacked).size-super-condensed{--_button-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap:4px;--_button-chevron-size:10px}.control:not(.stacked).size-super-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked).size-super-condensed:not(.icon-only){padding-inline:8px}.control:not(.stacked).size-condensed{--_button-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap:8px;--_button-chevron-size:12px}.control:not(.stacked).size-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked).size-condensed:not(.icon-only){padding-inline:12px}.control:not(.stacked).size-expanded{--_button-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));font:var(--vvd-typography-base-extended-bold);--_button-icon-gap:10px;--_button-chevron-size:16px}.control:not(.stacked).size-expanded.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked).size-expanded:not(.icon-only){padding-inline:20px}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed){--_button-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));font:var(--vvd-typography-base-bold);--_button-icon-gap:8px;--_button-chevron-size:16px}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed).icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){padding-inline:16px}.control:not(.shape-pill){--_button-border-radius:8px}.control:not(.shape-pill).size-condensed:not(.stacked),.control:not(.shape-pill).size-super-condensed:not(.stacked){--_button-border-radius:4px}.control.shape-pill:not(.icon-only,.stacked.size-super-condensed,.stacked.size-condensed,.stacked.normal){--_button-border-radius:24px}.control.shape-pill.stacked.size-condensed,.control.shape-pill.stacked.size-super-condensed{--_button-border-radius:16px}.control.shape-pill.stacked.size-normal{--_button-border-radius:20px}.control.shape-pill.icon-only{--_button-border-radius:50%}.control.stacked.size-super-condensed{--stacked-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));--_button-block-size:calc(var(--stacked-size) + 20px);font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap:4px;--_button-chevron-size:10px}.control.stacked.size-super-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked.size-super-condensed:not(.icon-only){padding-inline:16px}.control.stacked.size-condensed{--stacked-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));--_button-block-size:calc(var(--stacked-size) + 24px);font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap:6px;--_button-chevron-size:12px}.control.stacked.size-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked.size-condensed:not(.icon-only){padding-inline:12px}.control.stacked.size-expanded{--stacked-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));--_button-block-size:calc(var(--stacked-size) + 32px);font:var(--vvd-typography-base-extended-bold);--_button-icon-gap:10px;--_button-chevron-size:16px}.control.stacked.size-expanded.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked.size-expanded:not(.icon-only){padding-inline:20px}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed){--stacked-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));--_button-block-size:calc(var(--stacked-size) + 28px);font:var(--vvd-typography-base-bold);--_button-icon-gap:8px;--_button-chevron-size:16px}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed).icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){padding-inline:16px}.control.appearance-filled{--focus-stroke-gap-color:transparent}.control.appearance-filled:focus-visible{outline:none;position:relative}.control.appearance-filled:focus-visible:after{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,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));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));display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.control:not(.appearance-filled):focus-visible{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,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))}slot[name=icon]{line-height:1}.icon-trailing slot[name=icon]{order:1;display:flex}.control.stacked slot[name=icon]{font-size:calc(var(--stacked-size) / 2)}.control:not(.stacked) slot[name=icon]{font-size:calc(var(--_button-block-size) / 2)}.chevron{font-size:var(--_button-chevron-size)}.content{justify-content:center;align-items:center;gap:var(--_button-icon-gap);flex:1;display:flex;overflow:hidden}.control.stacked .content{flex-direction:column}:host([dropdown-indicator]) .content{justify-content:var(--button-content-alignment,flex-start);text-align:start}:host([dropdown-indicator][stacked]) .content{align-items:var(--button-content-alignment,flex-start);justify-content:center}.pending-no-icon{position:absolute}.pending-no-icon+.text{visibility:hidden}:host([icon-trailing][pending]) .pending{order:1}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}`,h=e=>{let n=e.tagFor(i.r);return t.d`<${n} class="chevron" aria-hidden="true" name="chevron-down-line"></${n}>`},g=({connotation:e,appearance:t,shape:n,iconTrailing:r,icon:i,label:a,disabled:s,pending:c,stacked:l,size:u,iconSlottedContent:d,ariaExpanded:f,active:p,dropdownIndicator:m})=>o.t(`control`,[`connotation-${e}`,!!e],[`appearance-${t}`,!!t],[`disabled`,s||c],[`shape-${n}`,!!n],[`size-${u}`,!!u],[`icon-only`,!a&&!!(i||d?.length)&&!m],[`icon-trailing`,r],[`stacked`,!!l],[`active`,f===`true`||p]);function _(e,n,r,i=f.a.Normal){if(r&&i!=f.a.SuperCondensed){let r=e.tagFor(l.r),a={[f.a.Condensed]:`-6`,[f.a.Normal]:`-5`,[f.a.Expanded]:`-4`};return t.d`<span class="${e=>{let t=e.querySelector(`[slot="icon"]`);return o.t(`icon`,`pending`,[`pending-no-icon`,!(n||t)])}}" aria-hidden="true"><${r} size="${a[i]}"></${r}></span>`}else return s.a(e)(n,s.i.Slot)}var v=e=>[`submit`,`button`,`reset`].indexOf(e)>-1?e:`submit`,y=e=>{let n=h(e);return t.d`<span class="content">
|
|
1
|
+
const e=require(`./localized.cjs`),t=require(`./vivid-element.cjs`),n=require(`./ref.cjs`),r=require(`./when.cjs`),i=require(`./enums.cjs`),a=require(`./definition2.cjs`),o=require(`./decorate.cjs`),s=require(`./affix.cjs`),c=require(`./delegates-aria.cjs`),l=require(`./linkable.cjs`),u=require(`./class-names.cjs`),d=require(`./definition5.cjs`),f=require(`./button.cjs`);var p=class extends s.n(e.t(l.t(f.t))){constructor(){super(),this.stacked=!1,this.pending=!1,this.dropdownIndicator=!1,this.active=!1,this.title=``}clickHandler(e){if(this.disabled||this.pending){e.preventDefault(),e.stopImmediatePropagation();return}}};o.t([t.l({converter:{fromView:e=>e||null,toView:e=>e||null}})],p.prototype,`title`,void 0),o.t([t.l],p.prototype,`connotation`,void 0),o.t([t.l],p.prototype,`shape`,void 0),o.t([t.l],p.prototype,`appearance`,void 0),o.t([t.l],p.prototype,`size`,void 0),o.t([t.l({mode:`boolean`,attribute:`stacked`})],p.prototype,`stacked`,void 0),o.t([t.l({mode:`boolean`,attribute:`pending`})],p.prototype,`pending`,void 0),o.t([t.l({mode:`boolean`,attribute:`dropdown-indicator`})],p.prototype,`dropdownIndicator`,void 0),o.t([t.l({mode:`boolean`,attribute:`active`})],p.prototype,`active`,void 0),o.t([t.l],p.prototype,`label`,void 0);var m=`.chevron{font:var(--vvd-typography-base-extended);flex-shrink:0;transition:transform .2s;display:flex;transform:rotate(0)}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:host{--_vvd-button-accent-firm-wrapper:var(--vvd-button-accent-firm);--_vvd-button-cta-firm-wrapper:var(--vvd-button-cta-firm);--_vvd-button-success-firm-wrapper:var(--vvd-button-success-firm);--_vvd-button-alert-firm-wrapper:var(--vvd-button-alert-firm);--_vvd-button-announcement-firm-wrapper:var(--vvd-button-announcement-firm)}.control:not(.appearance-ghost-light,.appearance-filled,.appearance-outlined){--vvd-button-accent-firm:var(--_vvd-button-accent-firm-wrapper,var(--vvd-button-accent-primary));--vvd-button-cta-firm:var(--_vvd-button-cta-firm-wrapper,var(--vvd-button-cta-primary));--vvd-button-success-firm:var(--_vvd-button-success-firm-wrapper,var(--vvd-button-success-primary));--vvd-button-alert-firm:var(--_vvd-button-alert-firm-wrapper,var(--vvd-button-alert-primary));--vvd-button-announcement-firm:var(--_vvd-button-announcement-firm-wrapper,var(--vvd-button-announcement-primary))}:host{display:inline-block}.control.connotation-cta{--_connotation-color-primary:var(--vvd-button-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-button-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-button-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-contrast:var(--vvd-button-cta-contrast,var(--vvd-color-cta-800));--_connotation-color-fierce:var(--vvd-button-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-firm:var(--vvd-button-cta-firm,var(--vvd-color-cta-600));--_connotation-color-soft:var(--vvd-button-cta-soft,var(--vvd-color-cta-100));--_connotation-color-faint:var(--vvd-button-cta-faint,var(--vvd-color-cta-50));--_connotation-color-fierce-primary:var(--vvd-button-cta-fierce-primary,var(--vvd-color-cta-700))}.control.connotation-success{--_connotation-color-primary:var(--vvd-button-success-primary,var(--vvd-color-success-500));--_connotation-color-primary-text:var(--vvd-button-success-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-button-success-primary-increment,var(--vvd-color-success-600));--_connotation-color-contrast:var(--vvd-button-success-contrast,var(--vvd-color-success-800));--_connotation-color-fierce:var(--vvd-button-success-fierce,var(--vvd-color-success-700));--_connotation-color-firm:var(--vvd-button-success-firm,var(--vvd-color-success-600));--_connotation-color-soft:var(--vvd-button-success-soft,var(--vvd-color-success-100));--_connotation-color-faint:var(--vvd-button-success-faint,var(--vvd-color-success-50));--_connotation-color-fierce-primary:var(--vvd-button-success-fierce-primary,var(--vvd-color-success-700))}.control.connotation-alert{--_connotation-color-primary:var(--vvd-button-alert-primary,var(--vvd-color-alert-500));--_connotation-color-primary-text:var(--vvd-button-alert-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-button-alert-primary-increment,var(--vvd-color-alert-600));--_connotation-color-contrast:var(--vvd-button-alert-contrast,var(--vvd-color-alert-800));--_connotation-color-fierce:var(--vvd-button-alert-fierce,var(--vvd-color-alert-700));--_connotation-color-firm:var(--vvd-button-alert-firm,var(--vvd-color-alert-600));--_connotation-color-soft:var(--vvd-button-alert-soft,var(--vvd-color-alert-100));--_connotation-color-faint:var(--vvd-button-alert-faint,var(--vvd-color-alert-50));--_connotation-color-fierce-primary:var(--vvd-button-alert-fierce-primary,var(--vvd-color-alert-700))}.control.connotation-announcement{--_connotation-color-primary:var(--vvd-button-announcement-primary,var(--vvd-color-announcement-500));--_connotation-color-primary-text:var(--vvd-button-announcement-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-button-announcement-primary-increment,var(--vvd-color-announcement-600));--_connotation-color-contrast:var(--vvd-button-announcement-contrast,var(--vvd-color-announcement-800));--_connotation-color-fierce:var(--vvd-button-announcement-fierce,var(--vvd-color-announcement-700));--_connotation-color-firm:var(--vvd-button-announcement-firm,var(--vvd-color-announcement-600));--_connotation-color-soft:var(--vvd-button-announcement-soft,var(--vvd-color-announcement-100));--_connotation-color-faint:var(--vvd-button-announcement-faint,var(--vvd-color-announcement-50));--_connotation-color-fierce-primary:var(--vvd-button-announcement-fierce-primary,var(--vvd-color-announcement-700))}.control:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-announcement){--_connotation-color-primary:var(--vvd-button-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-button-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-button-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-contrast:var(--vvd-button-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-button-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-firm:var(--vvd-button-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-button-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-faint:var(--vvd-button-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-fierce-primary:var(--vvd-button-accent-fierce-primary,var(--vvd-color-canvas-text))}.control.appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}.control.appearance-outlined{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-300)}.control,.control.appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control.appearance-outlined-light{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-300)}@media (hover:hover){.control: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}.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--vvd-color-neutral-300)}.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control: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}.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined-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:var(--vvd-color-neutral-300)}}.control.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}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--vvd-color-neutral-300)}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control.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}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined-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:var(--vvd-color-neutral-300)}.control:disabled.appearance-filled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:transparent}.control:disabled.appearance-outlined{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-300)}.control:disabled,.control:disabled.appearance-ghost-light{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control:disabled.appearance-outlined-light{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-300)}.control.disabled.appearance-filled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:transparent}.control.disabled.appearance-outlined{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-300)}.control.disabled,.control.disabled.appearance-ghost-light{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control.disabled.appearance-outlined-light{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-300)}.control: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}.control:active:where(:not(.disabled,:disabled)).appearance-outlined{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:var(--vvd-color-neutral-300)}.control:active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control: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}.control:active:where(:not(.disabled,:disabled)).appearance-outlined-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:var(--vvd-color-neutral-300)}.control.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}.control.active:where(:not(.disabled,:disabled)).appearance-outlined{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:var(--vvd-color-neutral-300)}.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control.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}.control.active:where(:not(.disabled,:disabled)).appearance-outlined-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:var(--vvd-color-neutral-300)}.control{--focus-stroke-gap-color:transparent;box-sizing:border-box;border-radius:var(--_button-border-radius);background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);justify-content:space-between;align-items:center;gap:var(--_button-icon-gap);vertical-align:middle;border:0;margin:0;text-decoration:none;display:inline-flex}.control .text{-webkit-line-clamp:var(--button-line-clamp,1);text-align:start;-webkit-box-orient:vertical;max-inline-size:100%;display:-webkit-box;overflow:hidden}.control:not(.icon-only){inline-size:100%}.control:not(.disabled){cursor:var(--button-cursor,pointer)}.control.disabled{cursor:not-allowed}@supports (user-select:none){.control{user-select:none}}.control:not(.stacked).size-super-condensed{--_button-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap:4px;--_button-chevron-size:10px}.control:not(.stacked).size-super-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked).size-super-condensed:not(.icon-only){padding-inline:8px}.control:not(.stacked).size-condensed{--_button-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap:8px;--_button-chevron-size:12px}.control:not(.stacked).size-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked).size-condensed:not(.icon-only){padding-inline:12px}.control:not(.stacked).size-expanded{--_button-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));font:var(--vvd-typography-base-extended-bold);--_button-icon-gap:10px;--_button-chevron-size:16px}.control:not(.stacked).size-expanded.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked).size-expanded:not(.icon-only){padding-inline:20px}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed){--_button-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));font:var(--vvd-typography-base-bold);--_button-icon-gap:8px;--_button-chevron-size:16px}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed).icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){padding-inline:16px}.control:not(.shape-pill){--_button-border-radius:8px}.control:not(.shape-pill).size-condensed:not(.stacked),.control:not(.shape-pill).size-super-condensed:not(.stacked){--_button-border-radius:4px}.control.shape-pill:not(.icon-only,.stacked.size-super-condensed,.stacked.size-condensed,.stacked.normal){--_button-border-radius:24px}.control.shape-pill.stacked.size-condensed,.control.shape-pill.stacked.size-super-condensed{--_button-border-radius:16px}.control.shape-pill.stacked.size-normal{--_button-border-radius:20px}.control.shape-pill.icon-only{--_button-border-radius:50%}.control.stacked.size-super-condensed{--stacked-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));--_button-block-size:calc(var(--stacked-size) + 20px);font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap:4px;--_button-chevron-size:10px}.control.stacked.size-super-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked.size-super-condensed:not(.icon-only){padding-inline:16px}.control.stacked.size-condensed{--stacked-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));--_button-block-size:calc(var(--stacked-size) + 24px);font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap:6px;--_button-chevron-size:12px}.control.stacked.size-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked.size-condensed:not(.icon-only){padding-inline:12px}.control.stacked.size-expanded{--stacked-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));--_button-block-size:calc(var(--stacked-size) + 32px);font:var(--vvd-typography-base-extended-bold);--_button-icon-gap:10px;--_button-chevron-size:16px}.control.stacked.size-expanded.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked.size-expanded:not(.icon-only){padding-inline:20px}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed){--stacked-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));--_button-block-size:calc(var(--stacked-size) + 28px);font:var(--vvd-typography-base-bold);--_button-icon-gap:8px;--_button-chevron-size:16px}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed).icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){padding-inline:16px}.control.appearance-filled{--focus-stroke-gap-color:transparent}.control.appearance-filled:focus-visible{outline:none;position:relative}.control.appearance-filled:focus-visible:after{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,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));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));display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.control:not(.appearance-filled):focus-visible{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,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))}slot[name=icon]{line-height:1}.icon-trailing slot[name=icon]{order:1;display:flex}.control.stacked slot[name=icon]{font-size:calc(var(--stacked-size) / 2)}.control:not(.stacked) slot[name=icon]{font-size:calc(var(--_button-block-size) / 2)}.chevron{font-size:var(--_button-chevron-size)}.content{justify-content:center;align-items:center;gap:var(--_button-icon-gap);flex:1;display:flex;overflow:hidden}.control.stacked .content{flex-direction:column}:host([dropdown-indicator]) .content{justify-content:var(--button-content-alignment,flex-start);text-align:start}:host([dropdown-indicator][stacked]) .content{align-items:var(--button-content-alignment,flex-start);justify-content:center}.pending-no-icon{position:absolute}.pending-no-icon+.text{visibility:hidden}:host([icon-trailing][pending]) .pending{order:1}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}`,h=e=>{let n=e.tagFor(a.r);return t.d`<${n} class="chevron" aria-hidden="true" name="chevron-down-line"></${n}>`},g=({connotation:e,appearance:t,shape:n,iconTrailing:r,icon:i,label:a,disabled:o,pending:s,stacked:c,size:l,iconSlottedContent:d,ariaExpanded:f,active:p,dropdownIndicator:m})=>u.t(`control`,[`connotation-${e}`,!!e],[`appearance-${t}`,!!t],[`disabled`,o||s],[`shape-${n}`,!!n],[`size-${l}`,!!l],[`icon-only`,!a&&!!(i||d?.length)&&!m],[`icon-trailing`,r],[`stacked`,!!c],[`active`,f===`true`||p]);function _(e,n,r,a=i.a.Normal){if(r&&a!=i.a.SuperCondensed){let r=e.tagFor(d.r),o={[i.a.Condensed]:`-6`,[i.a.Normal]:`-5`,[i.a.Expanded]:`-4`};return t.d`<span class="${e=>{let t=e.querySelector(`[slot="icon"]`);return u.t(`icon`,`pending`,[`pending-no-icon`,!(n||t)])}}" aria-hidden="true"><${r} size="${o[a]}"></${r}></span>`}else return s.a(e)(n,s.i.Slot)}var v=e=>[`submit`,`button`,`reset`].indexOf(e)>-1?e:`submit`,y=e=>{let n=h(e);return t.d`<span class="content">
|
|
2
2
|
${t=>_(e,t.icon,t.pending,t.size)}
|
|
3
3
|
${r.t(e=>e.label,t.d`<span class="text" aria-hidden="true">${e=>e.label}</span>`)}
|
|
4
4
|
<span class="sr-only"
|
|
@@ -26,4 +26,4 @@ const e=require(`./localized.cjs`),t=require(`./vivid-element.cjs`),n=require(`.
|
|
|
26
26
|
</button>`}function x(e){return t.d`${t=>t._renderLinkElement(y(e),g,{ariaLabel:null})}`}var S=t.o(`button`,p,e=>t.d` <template>
|
|
27
27
|
${r.t(e=>!e.href,t.d`${b(e)}`)}
|
|
28
28
|
${r.t(e=>e.href,x(e))}
|
|
29
|
-
</template>`,[
|
|
29
|
+
</template>`,[a.t,d.t],{styles:m,shadowOptions:{delegatesFocus:!0}}),C=t.s(S);Object.defineProperty(exports,`i`,{enumerable:!0,get:function(){return p}}),Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return C}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return h}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return S}});
|
package/bundled/definition6.js
CHANGED
|
@@ -2,17 +2,17 @@ import { t as e } from "./localized.js";
|
|
|
2
2
|
import { d as t, l as n, o as r, s as i } from "./vivid-element.js";
|
|
3
3
|
import { t as a } from "./ref.js";
|
|
4
4
|
import { t as o } from "./when.js";
|
|
5
|
-
import {
|
|
6
|
-
import { t as l } from "./
|
|
7
|
-
import { t as u } from "./
|
|
5
|
+
import { a as s } from "./enums.js";
|
|
6
|
+
import { r as c, t as l } from "./definition2.js";
|
|
7
|
+
import { t as u } from "./decorate.js";
|
|
8
8
|
import { a as d, i as f, n as p } from "./affix.js";
|
|
9
9
|
import { n as m } from "./delegates-aria.js";
|
|
10
|
-
import {
|
|
11
|
-
import { t as
|
|
12
|
-
import { t as v } from "./
|
|
13
|
-
import {
|
|
10
|
+
import { t as h } from "./linkable.js";
|
|
11
|
+
import { t as g } from "./class-names.js";
|
|
12
|
+
import { r as _, t as v } from "./definition5.js";
|
|
13
|
+
import { t as y } from "./button.js";
|
|
14
14
|
//#region src/lib/button/button.ts
|
|
15
|
-
var b = class extends p(e(
|
|
15
|
+
var b = class extends p(e(h(y))) {
|
|
16
16
|
constructor() {
|
|
17
17
|
super(), this.stacked = !1, this.pending = !1, this.dropdownIndicator = !1, this.active = !1, this.title = "";
|
|
18
18
|
}
|
|
@@ -24,38 +24,38 @@ var b = class extends p(e(v(_))) {
|
|
|
24
24
|
}
|
|
25
25
|
}
|
|
26
26
|
};
|
|
27
|
-
|
|
27
|
+
u([n({ converter: {
|
|
28
28
|
fromView: (e) => e || null,
|
|
29
29
|
toView: (e) => e || null
|
|
30
|
-
} })], b.prototype, "title", void 0),
|
|
30
|
+
} })], b.prototype, "title", void 0), u([n], b.prototype, "connotation", void 0), u([n], b.prototype, "shape", void 0), u([n], b.prototype, "appearance", void 0), u([n], b.prototype, "size", void 0), u([n({
|
|
31
31
|
mode: "boolean",
|
|
32
32
|
attribute: "stacked"
|
|
33
|
-
})], b.prototype, "stacked", void 0),
|
|
33
|
+
})], b.prototype, "stacked", void 0), u([n({
|
|
34
34
|
mode: "boolean",
|
|
35
35
|
attribute: "pending"
|
|
36
|
-
})], b.prototype, "pending", void 0),
|
|
36
|
+
})], b.prototype, "pending", void 0), u([n({
|
|
37
37
|
mode: "boolean",
|
|
38
38
|
attribute: "dropdown-indicator"
|
|
39
|
-
})], b.prototype, "dropdownIndicator", void 0),
|
|
39
|
+
})], b.prototype, "dropdownIndicator", void 0), u([n({
|
|
40
40
|
mode: "boolean",
|
|
41
41
|
attribute: "active"
|
|
42
|
-
})], b.prototype, "active", void 0),
|
|
42
|
+
})], b.prototype, "active", void 0), u([n], b.prototype, "label", void 0);
|
|
43
43
|
//#endregion
|
|
44
44
|
//#region src/lib/button/button.scss?inline
|
|
45
45
|
var x = ".chevron{font:var(--vvd-typography-base-extended);flex-shrink:0;transition:transform .2s;display:flex;transform:rotate(0)}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:host{--_vvd-button-accent-firm-wrapper:var(--vvd-button-accent-firm);--_vvd-button-cta-firm-wrapper:var(--vvd-button-cta-firm);--_vvd-button-success-firm-wrapper:var(--vvd-button-success-firm);--_vvd-button-alert-firm-wrapper:var(--vvd-button-alert-firm);--_vvd-button-announcement-firm-wrapper:var(--vvd-button-announcement-firm)}.control:not(.appearance-ghost-light,.appearance-filled,.appearance-outlined){--vvd-button-accent-firm:var(--_vvd-button-accent-firm-wrapper,var(--vvd-button-accent-primary));--vvd-button-cta-firm:var(--_vvd-button-cta-firm-wrapper,var(--vvd-button-cta-primary));--vvd-button-success-firm:var(--_vvd-button-success-firm-wrapper,var(--vvd-button-success-primary));--vvd-button-alert-firm:var(--_vvd-button-alert-firm-wrapper,var(--vvd-button-alert-primary));--vvd-button-announcement-firm:var(--_vvd-button-announcement-firm-wrapper,var(--vvd-button-announcement-primary))}:host{display:inline-block}.control.connotation-cta{--_connotation-color-primary:var(--vvd-button-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-button-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-button-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-contrast:var(--vvd-button-cta-contrast,var(--vvd-color-cta-800));--_connotation-color-fierce:var(--vvd-button-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-firm:var(--vvd-button-cta-firm,var(--vvd-color-cta-600));--_connotation-color-soft:var(--vvd-button-cta-soft,var(--vvd-color-cta-100));--_connotation-color-faint:var(--vvd-button-cta-faint,var(--vvd-color-cta-50));--_connotation-color-fierce-primary:var(--vvd-button-cta-fierce-primary,var(--vvd-color-cta-700))}.control.connotation-success{--_connotation-color-primary:var(--vvd-button-success-primary,var(--vvd-color-success-500));--_connotation-color-primary-text:var(--vvd-button-success-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-button-success-primary-increment,var(--vvd-color-success-600));--_connotation-color-contrast:var(--vvd-button-success-contrast,var(--vvd-color-success-800));--_connotation-color-fierce:var(--vvd-button-success-fierce,var(--vvd-color-success-700));--_connotation-color-firm:var(--vvd-button-success-firm,var(--vvd-color-success-600));--_connotation-color-soft:var(--vvd-button-success-soft,var(--vvd-color-success-100));--_connotation-color-faint:var(--vvd-button-success-faint,var(--vvd-color-success-50));--_connotation-color-fierce-primary:var(--vvd-button-success-fierce-primary,var(--vvd-color-success-700))}.control.connotation-alert{--_connotation-color-primary:var(--vvd-button-alert-primary,var(--vvd-color-alert-500));--_connotation-color-primary-text:var(--vvd-button-alert-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-button-alert-primary-increment,var(--vvd-color-alert-600));--_connotation-color-contrast:var(--vvd-button-alert-contrast,var(--vvd-color-alert-800));--_connotation-color-fierce:var(--vvd-button-alert-fierce,var(--vvd-color-alert-700));--_connotation-color-firm:var(--vvd-button-alert-firm,var(--vvd-color-alert-600));--_connotation-color-soft:var(--vvd-button-alert-soft,var(--vvd-color-alert-100));--_connotation-color-faint:var(--vvd-button-alert-faint,var(--vvd-color-alert-50));--_connotation-color-fierce-primary:var(--vvd-button-alert-fierce-primary,var(--vvd-color-alert-700))}.control.connotation-announcement{--_connotation-color-primary:var(--vvd-button-announcement-primary,var(--vvd-color-announcement-500));--_connotation-color-primary-text:var(--vvd-button-announcement-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-button-announcement-primary-increment,var(--vvd-color-announcement-600));--_connotation-color-contrast:var(--vvd-button-announcement-contrast,var(--vvd-color-announcement-800));--_connotation-color-fierce:var(--vvd-button-announcement-fierce,var(--vvd-color-announcement-700));--_connotation-color-firm:var(--vvd-button-announcement-firm,var(--vvd-color-announcement-600));--_connotation-color-soft:var(--vvd-button-announcement-soft,var(--vvd-color-announcement-100));--_connotation-color-faint:var(--vvd-button-announcement-faint,var(--vvd-color-announcement-50));--_connotation-color-fierce-primary:var(--vvd-button-announcement-fierce-primary,var(--vvd-color-announcement-700))}.control:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-announcement){--_connotation-color-primary:var(--vvd-button-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-button-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-button-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-contrast:var(--vvd-button-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-button-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-firm:var(--vvd-button-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-button-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-faint:var(--vvd-button-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-fierce-primary:var(--vvd-button-accent-fierce-primary,var(--vvd-color-canvas-text))}.control.appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}.control.appearance-outlined{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-300)}.control,.control.appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control.appearance-outlined-light{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-300)}@media (hover:hover){.control: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}.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--vvd-color-neutral-300)}.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control: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}.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined-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:var(--vvd-color-neutral-300)}}.control.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}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--vvd-color-neutral-300)}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control.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}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined-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:var(--vvd-color-neutral-300)}.control:disabled.appearance-filled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:transparent}.control:disabled.appearance-outlined{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-300)}.control:disabled,.control:disabled.appearance-ghost-light{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control:disabled.appearance-outlined-light{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-300)}.control.disabled.appearance-filled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:transparent}.control.disabled.appearance-outlined{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-300)}.control.disabled,.control.disabled.appearance-ghost-light{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control.disabled.appearance-outlined-light{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-300)}.control: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}.control:active:where(:not(.disabled,:disabled)).appearance-outlined{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:var(--vvd-color-neutral-300)}.control:active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control: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}.control:active:where(:not(.disabled,:disabled)).appearance-outlined-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:var(--vvd-color-neutral-300)}.control.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}.control.active:where(:not(.disabled,:disabled)).appearance-outlined{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:var(--vvd-color-neutral-300)}.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control.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}.control.active:where(:not(.disabled,:disabled)).appearance-outlined-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:var(--vvd-color-neutral-300)}.control{--focus-stroke-gap-color:transparent;box-sizing:border-box;border-radius:var(--_button-border-radius);background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);justify-content:space-between;align-items:center;gap:var(--_button-icon-gap);vertical-align:middle;border:0;margin:0;text-decoration:none;display:inline-flex}.control .text{-webkit-line-clamp:var(--button-line-clamp,1);text-align:start;-webkit-box-orient:vertical;max-inline-size:100%;display:-webkit-box;overflow:hidden}.control:not(.icon-only){inline-size:100%}.control:not(.disabled){cursor:var(--button-cursor,pointer)}.control.disabled{cursor:not-allowed}@supports (user-select:none){.control{user-select:none}}.control:not(.stacked).size-super-condensed{--_button-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap:4px;--_button-chevron-size:10px}.control:not(.stacked).size-super-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked).size-super-condensed:not(.icon-only){padding-inline:8px}.control:not(.stacked).size-condensed{--_button-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap:8px;--_button-chevron-size:12px}.control:not(.stacked).size-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked).size-condensed:not(.icon-only){padding-inline:12px}.control:not(.stacked).size-expanded{--_button-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));font:var(--vvd-typography-base-extended-bold);--_button-icon-gap:10px;--_button-chevron-size:16px}.control:not(.stacked).size-expanded.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked).size-expanded:not(.icon-only){padding-inline:20px}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed){--_button-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));font:var(--vvd-typography-base-bold);--_button-icon-gap:8px;--_button-chevron-size:16px}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed).icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){padding-inline:16px}.control:not(.shape-pill){--_button-border-radius:8px}.control:not(.shape-pill).size-condensed:not(.stacked),.control:not(.shape-pill).size-super-condensed:not(.stacked){--_button-border-radius:4px}.control.shape-pill:not(.icon-only,.stacked.size-super-condensed,.stacked.size-condensed,.stacked.normal){--_button-border-radius:24px}.control.shape-pill.stacked.size-condensed,.control.shape-pill.stacked.size-super-condensed{--_button-border-radius:16px}.control.shape-pill.stacked.size-normal{--_button-border-radius:20px}.control.shape-pill.icon-only{--_button-border-radius:50%}.control.stacked.size-super-condensed{--stacked-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));--_button-block-size:calc(var(--stacked-size) + 20px);font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap:4px;--_button-chevron-size:10px}.control.stacked.size-super-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked.size-super-condensed:not(.icon-only){padding-inline:16px}.control.stacked.size-condensed{--stacked-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));--_button-block-size:calc(var(--stacked-size) + 24px);font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap:6px;--_button-chevron-size:12px}.control.stacked.size-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked.size-condensed:not(.icon-only){padding-inline:12px}.control.stacked.size-expanded{--stacked-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));--_button-block-size:calc(var(--stacked-size) + 32px);font:var(--vvd-typography-base-extended-bold);--_button-icon-gap:10px;--_button-chevron-size:16px}.control.stacked.size-expanded.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked.size-expanded:not(.icon-only){padding-inline:20px}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed){--stacked-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));--_button-block-size:calc(var(--stacked-size) + 28px);font:var(--vvd-typography-base-bold);--_button-icon-gap:8px;--_button-chevron-size:16px}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed).icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){padding-inline:16px}.control.appearance-filled{--focus-stroke-gap-color:transparent}.control.appearance-filled:focus-visible{outline:none;position:relative}.control.appearance-filled:focus-visible:after{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,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));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));display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.control:not(.appearance-filled):focus-visible{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,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))}slot[name=icon]{line-height:1}.icon-trailing slot[name=icon]{order:1;display:flex}.control.stacked slot[name=icon]{font-size:calc(var(--stacked-size) / 2)}.control:not(.stacked) slot[name=icon]{font-size:calc(var(--_button-block-size) / 2)}.chevron{font-size:var(--_button-chevron-size)}.content{justify-content:center;align-items:center;gap:var(--_button-icon-gap);flex:1;display:flex;overflow:hidden}.control.stacked .content{flex-direction:column}:host([dropdown-indicator]) .content{justify-content:var(--button-content-alignment,flex-start);text-align:start}:host([dropdown-indicator][stacked]) .content{align-items:var(--button-content-alignment,flex-start);justify-content:center}.pending-no-icon{position:absolute}.pending-no-icon+.text{visibility:hidden}:host([icon-trailing][pending]) .pending{order:1}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}", S = (e) => {
|
|
46
|
-
let n = e.tagFor(
|
|
46
|
+
let n = e.tagFor(c);
|
|
47
47
|
return t`<${n} class="chevron" aria-hidden="true" name="chevron-down-line"></${n}>`;
|
|
48
|
-
}, C = ({ connotation: e, appearance: t, shape: n, iconTrailing: r, icon: i, label: a, disabled: o, pending: s, stacked: c, size: l, iconSlottedContent:
|
|
49
|
-
function w(e, n, r, i =
|
|
50
|
-
if (r && i !=
|
|
51
|
-
let r = e.tagFor(
|
|
48
|
+
}, C = ({ connotation: e, appearance: t, shape: n, iconTrailing: r, icon: i, label: a, disabled: o, pending: s, stacked: c, size: l, iconSlottedContent: u, ariaExpanded: d, active: f, dropdownIndicator: p }) => g("control", [`connotation-${e}`, !!e], [`appearance-${t}`, !!t], ["disabled", o || s], [`shape-${n}`, !!n], [`size-${l}`, !!l], ["icon-only", !a && !!(i || u?.length) && !p], ["icon-trailing", r], ["stacked", !!c], ["active", d === "true" || f]);
|
|
49
|
+
function w(e, n, r, i = s.Normal) {
|
|
50
|
+
if (r && i != s.SuperCondensed) {
|
|
51
|
+
let r = e.tagFor(_);
|
|
52
52
|
return t`<span class="${(e) => {
|
|
53
53
|
let t = e.querySelector("[slot=\"icon\"]");
|
|
54
|
-
return
|
|
54
|
+
return g("icon", "pending", ["pending-no-icon", !(n || t)]);
|
|
55
55
|
}}" aria-hidden="true"><${r} size="${{
|
|
56
|
-
[
|
|
57
|
-
[
|
|
58
|
-
[
|
|
56
|
+
[s.Condensed]: "-6",
|
|
57
|
+
[s.Normal]: "-5",
|
|
58
|
+
[s.Expanded]: "-4"
|
|
59
59
|
}[i]}"></${r}></span>`;
|
|
60
60
|
} else return d(e)(n, f.Slot);
|
|
61
61
|
}
|
|
@@ -106,7 +106,7 @@ function O(e) {
|
|
|
106
106
|
var k = r("button", b, (e) => t` <template>
|
|
107
107
|
${o((e) => !e.href, t`${D(e)}`)}
|
|
108
108
|
${o((e) => e.href, O(e))}
|
|
109
|
-
</template>`, [
|
|
109
|
+
</template>`, [l, v], {
|
|
110
110
|
styles: x,
|
|
111
111
|
shadowOptions: { delegatesFocus: !0 }
|
|
112
112
|
}), A = i(k);
|
package/bundled/definition9.cjs
CHANGED
|
@@ -1,30 +1,12 @@
|
|
|
1
|
-
const e=require(`./vivid-element.cjs`),t=require(`./when.cjs`),n=require(`./slotted.cjs`),r=require(`./definition2.cjs`),i=require(`./decorate.cjs`),a=require(`./class-names.cjs`),o=require(`./key-codes.cjs`),s=require(`./affix.cjs`),c=require(`./host-semantics.cjs`);var l=`:host(:focus-visible){outline:none}:host([disabled]){pointer-events:none}.base{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base:active:where(:not(.disabled,:disabled)),.base.active:where(:not(.disabled,:disabled)),.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}@media (hover:hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-dim);--_appearance-color-outline:transparent}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-dim);--_appearance-color-outline:transparent}.base.connotation-cta{--_connotation-color-primary:var(--vvd-menu-item-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-menu-item-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-menu-item-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-firm:var(--vvd-menu-item-cta-firm,var(--vvd-color-cta-600));--_connotation-color-faint:var(--vvd-menu-item-cta-faint,var(--vvd-color-cta-50));--_connotation-color-soft:var(--vvd-menu-item-cta-soft,var(--vvd-color-cta-100));--_connotation-color-pale:var(--vvd-menu-item-cta-pale,var(--vvd-color-cta-300));--_connotation-color-dim:var(--vvd-menu-item-cta-dim,var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary:var(--vvd-menu-item-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-menu-item-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-menu-item-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-firm:var(--vvd-menu-item-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-faint:var(--vvd-menu-item-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-menu-item-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-pale:var(--vvd-menu-item-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-dim:var(--vvd-menu-item-accent-dim,var(--vvd-color-neutral-200))}.base{--_menu-item-padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);box-sizing:border-box;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);border-radius:8px;align-items:center;inline-size:100%;display:flex}.base:not(.two-lines){min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));padding-block:8px;padding-inline:var(--_menu-item-padding-inline);gap:12px}.base.two-lines{min-block-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) + calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)));padding-block:12px;padding-inline:var(--_menu-item-padding-inline);gap:16px}@supports (user-select:none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}:host(:not([role=presentation]):focus-visible) .base{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,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));--focus-stroke-gap-color:transparent}.icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2);flex-shrink:0;line-height:1}.action,.decorative{place-content:center;display:flex}.action{color:var(--_appearance-color-text)}.base.trailing .action,.base.has-meta .action{order:2}:host(:not([check-appearance],[checked],[disabled])) .action{color:var(--vvd-color-neutral-500)}.base:not(.disabled) .decorative{color:var(--vvd-color-neutral-600)}.base.disabled .decorative{color:var(--vvd-color-neutral-200)}.base.has-meta .decorative{order:1}.chevron{order:3}.text{flex-direction:column;gap:4px;margin-inline-end:auto;display:flex;overflow:hidden}.text-primary,.text-secondary{font:var(--vvd-typography-base);-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.text-primary{font:var(--vvd-typography-base);-webkit-line-clamp:var(--text-primary-line-clamp,1)}.base:not(.disabled) .text-primary{color:var(--vvd-color-canvas-text)}.base.disabled .text-primary{color:var(--_appearance-color-text)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{color:var(--vvd-color-neutral-800);font:var(--vvd-typography-base-condensed);-webkit-line-clamp:var(--text-secondary-line-clamp,1)}.base.two-lines .text-secondary{color:var(--vvd-color-neutral-600)}.base.disabled .text-secondary{color:var(--_appearance-color-text)}.base.selected:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-800)}:host([internal-part]) .text-primary{font:var(--_text-primary-custom-size,var--vvd-typography-base)}`,u={menuitem:`menuitem`,menuitemcheckbox:`menuitemcheckbox`,menuitemradio:`menuitemradio`,presentation:`presentation`},d=class extends c.t(s.t(e.t)){expandedChanged(){this.$fastController.isConnected&&(this.submenu&&!this.expanded&&this.submenu.collapseExpandedItem(),this.$emit(`expanded-change`,this,{bubbles:!1}))}#e(){this._isPresentational?this.role===`menuitem`&&(this.role=`presentation`):this.role===`presentation`&&(this.role=u.menuitem)}_isPresentationalChanged(){this.$fastController.isConnected&&this.#e()}checkedChanged(){this.$fastController.isConnected&&this.$emit(`change`)}connectedCallback(){super.connectedCallback(),e.O.enqueue(()=>{this._isPresentational=this._isPresentational??!0,this.#e()})}slottedSubmenuChanged(){this.submenu&&(this.submenu.anchor=this,this.submenu.placement=`right-start`,this.submenu.collapseExpandedItem=()=>this.#t(),this.submenu._popupOffset=5)}get submenu(){return this.slottedSubmenu?.length?this.slottedSubmenu[0]:null}get hasSubmenu(){return this.submenu!==null}constructor(){super(),this.role=u.menuitem,this.checked=!1,this.handleMenuItemClick=e=>this._isSyntheticClickEvent(e)?!0:(this.invoke(),!!this._isPresentational),this.handleMouseOver=e=>(this.disabled||!this.submenu||this.expanded||(this.expanded=!0),!1),this.handleMouseOut=e=>(!this.expanded||this.contains(document.activeElement)||(this.expanded=!1),!1),this.invoke=()=>{if(!(this.disabled||this._isPresentational))switch(this.controlType){case`checkbox`:this.checked=!this.checked;break;case`radio`:this.checked||=!0;break;default:this.submenu?this.expanded=!0:this.$emit(`change`);break}},this.checkTrailing=!1,this.handleMenuItemKeyDown=e=>{if(e.defaultPrevented)return!1;switch(e.key){case o.a:case` `:return this.invoke(),this.disabled||this.#i(),!1;case o.r:return this.submenu&&(this.expanded=!0,this.#i()),!1;case o.n:if(this.expanded)return this.#i(),this.expanded=!1,this.focus(),!1}return!0},this.addEventListener(`expanded-change`,this.#n)}#t(){this.expanded=!1}#n(){this.submenu&&(this.submenu.open=this.expanded)}#r=new WeakSet;_isSyntheticClickEvent(e){return this.#r.has(e)}#i(){let e=new MouseEvent(`click`,{bubbles:!0,composed:!0});this.#r.add(e),this.dispatchEvent(e)}};i.t([e.l({mode:`boolean`})],d.prototype,`disabled`,void 0),i.t([e.l({mode:`boolean`})],d.prototype,`expanded`,void 0),i.t([e.T],d.prototype,`_isPresentational`,void 0),i.t([e.n({deprecatedPropertyName:`role`,fromDeprecated:e=>{switch(e){case`menuitemcheckbox`:return`checkbox`;case`menuitemradio`:return`radio`;default:return}},toDeprecated:e=>{switch(e){case`checkbox`:return`menuitemcheckbox`;case`radio`:return`menuitemradio`;default:return`menuitem`}}}),e.l({attribute:`control-type`})],d.prototype,`controlType`,void 0),i.t([e.l({mode:`boolean`})],d.prototype,`checked`,void 0),i.t([e.l],d.prototype,`text`,void 0),i.t([e.l({attribute:`text-secondary`})],d.prototype,`textSecondary`,void 0),i.t([e.l],d.prototype,`connotation`,void 0),i.t([e.l({mode:`boolean`,attribute:`check-trailing`})],d.prototype,`checkTrailing`,void 0),i.t([e.l({attribute:`check-appearance`})],d.prototype,`checkedAppearance`,void 0),i.t([e.T],d.prototype,`metaSlottedContent`,void 0),i.t([e.T],d.prototype,`trailingMetaSlottedContent`,void 0),i.t([e.T],d.prototype,`slottedSubmenu`,void 0);var f=`menu`,p=e=>e.checkedAppearance===`tick-only`?e.checked?`check-line`:``:`${e.controlType===`checkbox`?`checkbox`:`radio`}-${e.checked?`checked`:`unchecked`}-2-line`,m=({connotation:e,disabled:t,checked:n,controlType:r,text:i,textSecondary:o,icon:s,metaSlottedContent:c,checkTrailing:l})=>a.t(`base`,[`connotation-${e}`,!!e],[`disabled`,!!t],[`selected`,!!(r&&n)],[`trailing`,!!(r&&(l||s))],[`item-checkbox`,r===`checkbox`],[`item-radio`,r===`radio`],[`two-lines`,!!i?.length&&!!o?.length],[`has-meta`,!!c?.length]);function h(n){let i=n.tagFor(r.r);return e.d`${t.t(e=>!!e.controlType,e.d`<span class="action"><${i} class="icon" name="${e=>p(e)}"></${i}></span>`)}`}function g(){return e.d`${t.t(e=>e.text||e.textSecondary,e.d`<span class="text">
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
<slot name="meta" ${n.t(`metaSlottedContent`)}></slot>
|
|
14
|
-
${h(i)}
|
|
15
|
-
${t.t(e=>e.icon,e.d`<span class="decorative"
|
|
16
|
-
>${e=>a(e.icon)}</span
|
|
17
|
-
>`)}
|
|
18
|
-
${g()}
|
|
19
|
-
<slot
|
|
20
|
-
name="trailing-meta"
|
|
21
|
-
${n.t(`trailingMetaSlottedContent`)}
|
|
22
|
-
></slot>
|
|
23
|
-
${t.t(e=>e.hasSubmenu,e.d`<${o} class="chevron" name="chevron-right-line"></${o}>`)}
|
|
24
|
-
</div>
|
|
25
|
-
<slot
|
|
26
|
-
name="submenu"
|
|
27
|
-
${n.t({property:`slottedSubmenu`,filter:n.r(i.tagForNonDependency(f))})}
|
|
28
|
-
></slot>
|
|
29
|
-
</template>
|
|
30
|
-
`},[r.t],{styles:l}),v=e.s(_);Object.defineProperty(exports,`a`,{enumerable:!0,get:function(){return u}}),Object.defineProperty(exports,`i`,{enumerable:!0,get:function(){return d}}),Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return v}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return f}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return _}});
|
|
1
|
+
const e=require(`./vivid-element.cjs`),t=require(`./decorate.cjs`),n=require(`./class-names.cjs`),r=require(`./definition8.cjs`),i=require(`./anchored.cjs`),a=require(`./dialog.cjs`);var o=`:host :host{display:var(--_popup-display,inline)}:host :host([slotted-anchor]){--_popup-display:contents}.control{pointer-events:none}.tooltip{width:var(--tooltip-inline-size,auto);box-sizing:border-box;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);max-inline-size:var(--tooltip-max-inline-size,30ch);padding:8px 12px}`,s=class extends i.t(e.t){constructor(...e){super(...e),this.open=!1}connectedCallback(){super.connectedCallback(),this.#a()}disconnectedCallback(){super.disconnectedCallback(),this.#a()}_anchorElChanged(e,t){e&&this.#t(e),t&&this.#e(t)}#e(e){e.addEventListener(`mouseover`,this.#n),e.addEventListener(`mouseout`,this.#r),e.addEventListener(`focusin`,this.#n),e.addEventListener(`focusout`,this.#r),e.setAttribute(`aria-haspopup`,`true`),e.setAttribute(`aria-expanded`,String(this.open))}#t(e){e.removeEventListener(`mouseover`,this.#n),e.removeEventListener(`mouseout`,this.#r),e.removeEventListener(`focusin`,this.#n),e.removeEventListener(`focusout`,this.#r),e.removeAttribute(`aria-haspopup`),e.removeAttribute(`aria-expanded`)}#n=()=>{this.open=!0,this.#i()};#r=()=>{this.open=!1,this.#i()};#i(){this._anchorEl&&this._anchorEl.setAttribute(`aria-expanded`,String(this.open))}#a(){document.removeEventListener(`keydown`,this.#o),this.open&&this.isConnected&&document.addEventListener(`keydown`,this.#o)}#o=e=>{e.key===`Escape`&&this.#r()};openChanged(e){e!==void 0&&this.#a()}};t.t([e.l],s.prototype,`text`,void 0),t.t([e.l({mode:`fromView`})],s.prototype,`placement`,void 0),t.t([e.l({mode:`boolean`})],s.prototype,`open`,void 0);var c=({open:e})=>n.t(`control`,[`open`,!!e]),l=e.o(`tooltip`,s,t=>{let n=t.tagFor(r.i);return e.d`
|
|
2
|
+
${i.n()}
|
|
3
|
+
<${n} class="${c}" arrow alternate
|
|
4
|
+
:placement=${e=>e.placement}
|
|
5
|
+
:anchor="${e=>e._anchorEl}"
|
|
6
|
+
:open="${e=>e.open}"
|
|
7
|
+
@keydown="${(e,t)=>{e.open&&a.t(t.event)&&(e.open=!1)}}"
|
|
8
|
+
exportparts="vvd-theme-alternate">
|
|
9
|
+
<div part="vvd-theme-alternate" class="tooltip" role="tooltip">
|
|
10
|
+
${e=>e.text}
|
|
11
|
+
</div>
|
|
12
|
+
</${n}>`},[r.t],{styles:o}),u=e.s(l);Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return l}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return s}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return u}});
|