@vonage/vivid 5.24.0 → 5.25.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/README.md +1 -1
- package/avatar/index.cjs +10 -10
- package/avatar/index.js +4 -3
- package/breadcrumb-item/index.cjs +9 -5
- package/breadcrumb-item/index.js +11 -6
- package/bundled/affix.cjs +1 -1
- package/bundled/affix.js +1 -1
- package/bundled/definition10.cjs +2 -1
- package/bundled/definition10.js +3 -2
- package/bundled/definition11.cjs +4 -4
- package/bundled/definition11.js +4 -3
- package/bundled/definition12.cjs +1 -1
- package/bundled/definition12.js +1 -0
- package/bundled/definition15.cjs +5 -5
- package/bundled/definition15.js +4 -3
- package/bundled/definition17.cjs +7 -7
- package/bundled/definition17.js +22 -109
- package/bundled/definition18.cjs +3 -3
- package/bundled/definition18.js +9 -31
- package/bundled/definition19.cjs +19 -19
- package/bundled/definition19.js +3 -2
- package/bundled/definition21.cjs +8 -8
- package/bundled/definition21.js +5 -4
- package/bundled/definition22.cjs +2 -2
- package/bundled/definition22.js +2 -2
- package/bundled/definition24.cjs +4 -4
- package/bundled/definition24.js +4 -3
- package/bundled/definition25.cjs +3 -3
- package/bundled/definition25.js +32 -28
- package/bundled/definition3.cjs +5 -5
- package/bundled/definition3.js +10 -40
- package/bundled/definition4.cjs +6 -6
- package/bundled/definition4.js +4 -3
- package/bundled/definition6.cjs +11 -11
- package/bundled/definition6.js +4 -3
- package/bundled/definition9.cjs +12 -6
- package/bundled/definition9.js +66 -43
- package/bundled/extractOptions.cjs +1 -1
- package/bundled/extractOptions.js +2 -2
- package/bundled/icon.cjs +1 -0
- package/bundled/icon.js +34 -0
- package/bundled/listbox.cjs +1 -1
- package/bundled/listbox.js +5 -2
- package/bundled/mixins.cjs +8 -8
- package/bundled/mixins.js +4 -3
- package/bundled/optgroup.cjs +1 -0
- package/bundled/optgroup.js +27 -0
- package/bundled/option.cjs +1 -0
- package/bundled/option.js +93 -0
- package/bundled/vivid-element.cjs +1 -1
- package/bundled/vivid-element.js +1 -1
- package/card/index.cjs +22 -22
- package/card/index.js +4 -3
- package/color-picker/index.cjs +18 -18
- package/color-picker/index.js +4 -3
- package/combobox/index.cjs +7 -7
- package/combobox/index.js +4 -2
- package/custom-elements.json +4159 -3847
- package/data-grid/index.cjs +24 -24
- package/data-grid/index.js +4 -3
- package/dial-pad/index.cjs +21 -21
- package/dial-pad/index.js +4 -3
- package/dialog/index.cjs +14 -14
- package/dialog/index.js +4 -3
- package/empty-state/index.cjs +3 -3
- package/empty-state/index.js +4 -3
- package/file-picker/index.cjs +7 -7
- package/file-picker/index.js +4 -3
- package/icon/definition.cjs +2 -1
- package/icon/definition.js +2 -1
- package/index.cjs +148 -141
- package/index.js +41 -37
- package/lib/accordion-item/accordion-item.d.ts +1 -0
- package/lib/combobox/combobox.d.ts +1 -1
- package/lib/components.d.ts +1 -0
- package/lib/dial-pad/dial-pad.d.ts +0 -1
- package/lib/listbox/definition.d.ts +3 -0
- package/lib/listbox/index.d.ts +1 -0
- package/lib/listbox/listbox.d.ts +1302 -0
- package/lib/listbox/listbox.template.d.ts +3 -0
- package/lib/listbox/variations.browser-spec.d.ts +1 -0
- package/lib/menu/menu.d.ts +0 -1
- package/lib/number-field/number-field.d.ts +0 -1
- package/lib/rich-text-editor/rte/features/base.d.ts +1 -0
- package/lib/rich-text-editor/rte/utils/default-textblock.d.ts +2 -2
- package/lib/tag-name-map.d.ts +2 -1
- package/lib/text-field/text-field.d.ts +1 -0
- package/lib/toggletip/toggletip.d.ts +1 -0
- package/lib/tooltip/tooltip.d.ts +1 -0
- package/listbox/definition.cjs +5 -0
- package/listbox/definition.js +2 -0
- package/listbox/index.cjs +11 -0
- package/listbox/index.js +540 -0
- package/nav/definition.cjs +1 -1
- package/nav/definition.js +1 -1
- package/nav-disclosure/definition.cjs +1 -1
- package/nav-disclosure/definition.js +1 -1
- package/nav-disclosure/index.cjs +4 -4
- package/nav-disclosure/index.js +4 -3
- package/nav-item/definition.cjs +1 -1
- package/nav-item/definition.js +1 -1
- package/note/definition.cjs +1 -1
- package/note/definition.js +1 -1
- package/number-field/definition.cjs +1 -1
- package/number-field/definition.js +1 -1
- package/optgroup/definition.cjs +2 -1
- package/optgroup/definition.js +2 -1
- package/option/definition.cjs +2 -1
- package/option/definition.js +2 -1
- package/package.json +8 -7
- package/pagination/definition.cjs +1 -1
- package/pagination/definition.js +1 -1
- package/platform-switch/definition.cjs +1 -1
- package/platform-switch/definition.js +1 -1
- package/popover/definition.cjs +1 -1
- package/popover/definition.js +1 -1
- package/popover/index.cjs +5 -5
- package/popover/index.js +4 -3
- package/progress/definition.cjs +1 -1
- package/progress/definition.js +1 -1
- package/radio/definition.cjs +1 -1
- package/radio/definition.js +1 -1
- package/radio-group/definition.cjs +1 -1
- package/radio-group/definition.js +1 -1
- package/range-slider/definition.cjs +1 -1
- package/range-slider/definition.js +1 -1
- package/rich-text-editor/definition.cjs +1 -1
- package/rich-text-editor/definition.js +1 -1
- package/rich-text-editor/index.cjs +13 -13
- package/rich-text-editor/index.js +22 -19
- package/rich-text-view/definition.cjs +1 -1
- package/rich-text-view/definition.js +1 -1
- package/searchable-select/definition.cjs +1 -1
- package/searchable-select/definition.js +1 -1
- package/searchable-select/index.cjs +23 -23
- package/searchable-select/index.js +10 -7
- package/select/definition.cjs +1 -1
- package/select/definition.js +1 -1
- package/selectable-box/definition.cjs +1 -1
- package/selectable-box/definition.js +1 -1
- package/shared/listbox/commands.d.ts +17 -0
- package/shared/listbox/move.d.ts +6 -0
- package/shared/listbox/options.d.ts +12 -0
- package/shared/listbox/selection.d.ts +28 -0
- package/shared/listbox/state.d.ts +26 -0
- package/shared/listbox/typeahead.d.ts +8 -0
- package/shared/listbox/with-options-filter.d.ts +440 -0
- package/shared/listbox/with-options.d.ts +862 -0
- package/side-drawer/definition.cjs +1 -1
- package/side-drawer/definition.js +1 -1
- package/simple-color-picker/definition.cjs +1 -1
- package/simple-color-picker/definition.js +1 -1
- package/simple-color-picker/index.cjs +6 -6
- package/simple-color-picker/index.js +4 -3
- package/split-button/definition.cjs +1 -1
- package/split-button/definition.js +1 -1
- package/status/definition.cjs +1 -1
- package/status/definition.js +1 -1
- package/switch/definition.cjs +1 -1
- package/switch/definition.js +1 -1
- package/tab/definition.cjs +1 -1
- package/tab/definition.js +1 -1
- package/tab-panel/definition.cjs +1 -1
- package/tab-panel/definition.js +1 -1
- package/table/definition.cjs +1 -1
- package/table/definition.js +1 -1
- package/table/index.cjs +13 -13
- package/table/index.js +4 -3
- package/tabs/definition.cjs +1 -1
- package/tabs/definition.js +1 -1
- package/tag/definition.cjs +1 -1
- package/tag/definition.js +1 -1
- package/tag/index.cjs +11 -11
- package/tag/index.js +4 -3
- package/tag-group/definition.cjs +1 -1
- package/tag-group/definition.js +1 -1
- package/text-area/definition.cjs +1 -1
- package/text-area/definition.js +1 -1
- package/time-picker/definition.cjs +1 -1
- package/time-picker/definition.js +1 -1
- package/tree-item/definition.cjs +1 -1
- package/tree-item/definition.js +1 -1
- package/tree-view/definition.cjs +1 -1
- package/tree-view/definition.js +1 -1
- package/unbundled/affix.cjs +2 -2
- package/unbundled/affix.js +1 -1
- package/unbundled/base-progress.cjs +1 -1
- package/unbundled/base-progress.js +1 -1
- package/unbundled/button.cjs +2 -2
- package/unbundled/button.js +2 -2
- package/unbundled/definition.cjs +2 -65
- package/unbundled/definition.js +4 -61
- package/unbundled/definition11.cjs +4 -3
- package/unbundled/definition11.js +3 -2
- package/unbundled/definition12.cjs +3 -2
- package/unbundled/definition12.js +3 -2
- package/unbundled/definition14.cjs +2 -1
- package/unbundled/definition14.js +2 -1
- package/unbundled/definition17.cjs +9 -4
- package/unbundled/definition17.js +9 -4
- package/unbundled/definition2.cjs +7 -2
- package/unbundled/definition2.js +8 -3
- package/unbundled/definition21.cjs +2 -1
- package/unbundled/definition21.js +2 -1
- package/unbundled/definition23.cjs +2 -1
- package/unbundled/definition23.js +2 -1
- package/unbundled/definition24.cjs +6 -4
- package/unbundled/definition24.js +6 -4
- package/unbundled/definition25.cjs +2 -1
- package/unbundled/definition25.js +2 -1
- package/unbundled/definition26.cjs +7 -4
- package/unbundled/definition26.js +7 -4
- package/unbundled/definition27.cjs +39 -5
- package/unbundled/definition27.js +40 -6
- package/unbundled/definition28.cjs +4 -3
- package/unbundled/definition28.js +4 -3
- package/unbundled/definition29.cjs +5 -168
- package/unbundled/definition29.js +11 -162
- package/unbundled/definition30.cjs +2 -63
- package/unbundled/definition30.js +5 -54
- package/unbundled/definition31.cjs +5 -3
- package/unbundled/definition31.js +5 -3
- package/unbundled/definition32.cjs +2 -1
- package/unbundled/definition32.js +2 -1
- package/unbundled/definition35.cjs +2 -1
- package/unbundled/definition35.js +2 -1
- package/unbundled/definition37.cjs +1 -1
- package/unbundled/definition37.js +1 -1
- package/unbundled/definition39.cjs +1 -1
- package/unbundled/definition39.js +1 -1
- package/unbundled/definition40.cjs +4 -2
- package/unbundled/definition40.js +4 -2
- package/unbundled/definition41.cjs +11 -6
- package/unbundled/definition41.js +11 -6
- package/unbundled/definition42.cjs +5 -4
- package/unbundled/definition42.js +5 -4
- package/unbundled/definition44.cjs +3 -2
- package/unbundled/definition44.js +3 -2
- package/unbundled/definition45.cjs +2 -2
- package/unbundled/definition45.js +2 -2
- package/unbundled/definition49.cjs +583 -79
- package/unbundled/definition49.js +579 -76
- package/unbundled/definition50.cjs +71 -33
- package/unbundled/definition50.js +67 -29
- package/unbundled/definition51.cjs +54 -23
- package/unbundled/definition51.js +52 -18
- package/unbundled/definition52.cjs +23 -39
- package/unbundled/definition52.js +17 -36
- package/unbundled/definition53.cjs +29 -314
- package/unbundled/definition53.js +27 -312
- package/unbundled/definition54.cjs +302 -195
- package/unbundled/definition54.js +298 -191
- package/unbundled/definition55.cjs +210 -40
- package/unbundled/definition55.js +206 -36
- package/unbundled/definition56.cjs +42 -266
- package/unbundled/definition56.js +38 -262
- package/unbundled/definition57.cjs +270 -50
- package/unbundled/definition57.js +267 -46
- package/unbundled/definition58.cjs +48 -146
- package/unbundled/definition58.js +47 -143
- package/unbundled/definition59.cjs +127 -225
- package/unbundled/definition59.js +122 -223
- package/unbundled/definition6.cjs +2 -1
- package/unbundled/definition6.js +2 -1
- package/unbundled/definition60.cjs +199 -418
- package/unbundled/definition60.js +196 -415
- package/unbundled/definition61.cjs +442 -3738
- package/unbundled/definition61.js +432 -3565
- package/unbundled/definition62.cjs +3717 -730
- package/unbundled/definition62.js +3544 -720
- package/unbundled/definition63.cjs +770 -97
- package/unbundled/definition63.js +767 -94
- package/unbundled/definition64.cjs +100 -999
- package/unbundled/definition64.js +98 -994
- package/unbundled/definition65.cjs +991 -93
- package/unbundled/definition65.js +985 -90
- package/unbundled/definition66.cjs +109 -73
- package/unbundled/definition66.js +105 -63
- package/unbundled/definition67.cjs +69 -155
- package/unbundled/definition67.js +60 -152
- package/unbundled/definition68.cjs +155 -119
- package/unbundled/definition68.js +151 -115
- package/unbundled/definition69.cjs +124 -49
- package/unbundled/definition69.js +120 -45
- package/unbundled/definition70.cjs +51 -85
- package/unbundled/definition70.js +50 -81
- package/unbundled/definition71.cjs +91 -19
- package/unbundled/definition71.js +86 -14
- package/unbundled/definition72.cjs +20 -87
- package/unbundled/definition72.js +14 -84
- package/unbundled/definition73.cjs +77 -294
- package/unbundled/definition73.js +72 -217
- package/unbundled/definition74.cjs +289 -311
- package/unbundled/definition74.js +219 -306
- package/unbundled/definition75.cjs +326 -26
- package/unbundled/definition75.js +317 -23
- package/unbundled/definition76.cjs +27 -122
- package/unbundled/definition76.js +22 -118
- package/unbundled/definition77.cjs +105 -232
- package/unbundled/definition77.js +101 -228
- package/unbundled/definition78.cjs +259 -26
- package/unbundled/definition78.js +249 -23
- package/unbundled/definition79.cjs +29 -148
- package/unbundled/definition79.js +27 -133
- package/unbundled/definition80.cjs +118 -173
- package/unbundled/definition80.js +109 -169
- package/unbundled/definition81.cjs +181 -477
- package/unbundled/definition81.js +176 -471
- package/unbundled/definition82.cjs +517 -0
- package/unbundled/definition82.js +497 -0
- package/unbundled/extractOptions.cjs +5 -5
- package/unbundled/extractOptions.js +2 -2
- package/unbundled/icon.cjs +67 -0
- package/unbundled/icon.js +61 -0
- package/unbundled/linkable.cjs +1 -1
- package/unbundled/linkable.js +1 -1
- package/unbundled/listbox.cjs +8 -3
- package/unbundled/listbox.js +7 -2
- package/unbundled/mixins.cjs +2 -1
- package/unbundled/mixins.js +2 -1
- package/unbundled/optgroup.cjs +66 -0
- package/unbundled/optgroup.js +54 -0
- package/unbundled/option.cjs +176 -0
- package/unbundled/option.js +164 -0
- 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/definition.cjs +1 -1
- package/video-player/definition.js +1 -1
- package/vivid.api.json +336 -193
package/bundled/definition22.cjs
CHANGED
|
@@ -11,7 +11,7 @@ const e=require(`./vivid-element.cjs`),t=require(`./slotted.cjs`),n=require(`./r
|
|
|
11
11
|
@keydown="${(e,t)=>v(e,t.event)}"
|
|
12
12
|
>
|
|
13
13
|
<div class="${e=>i.t(`base`,[`hide-header`,!e.headerSlottedContent?.length],[`hide-actions`,!e.actionItemsSlottedContent?.length],[`hide-body`,e.items&&!e.items.length])}">
|
|
14
|
-
<div class="header">
|
|
14
|
+
<div class="header" part="header">
|
|
15
15
|
<slot name="header" ${t.t(`headerSlottedContent`)}></slot>
|
|
16
16
|
</div>
|
|
17
17
|
<div
|
|
@@ -23,7 +23,7 @@ const e=require(`./vivid-element.cjs`),t=require(`./slotted.cjs`),n=require(`./r
|
|
|
23
23
|
>
|
|
24
24
|
<slot ${t.t(`items`)}></slot>
|
|
25
25
|
</div>
|
|
26
|
-
<footer class="action-items"><slot name="action-items" ${t.t(`actionItemsSlottedContent`)}></slot></footer>
|
|
26
|
+
<footer class="action-items" part="action-items"><slot name="action-items" ${t.t(`actionItemsSlottedContent`)}></slot></footer>
|
|
27
27
|
</div>
|
|
28
28
|
</${a}>
|
|
29
29
|
</template>`},[s.t,d.t],{styles:f}),b=e.d(y);Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return b}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return _}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return y}});
|
package/bundled/definition22.js
CHANGED
|
@@ -153,7 +153,7 @@ var P = s(T, M, (e) => {
|
|
|
153
153
|
@keydown="${(e, t) => N(e, t.event)}"
|
|
154
154
|
>
|
|
155
155
|
<div class="${(e) => d("base", ["hide-header", !e.headerSlottedContent?.length], ["hide-actions", !e.actionItemsSlottedContent?.length], ["hide-body", e.items && !e.items.length])}">
|
|
156
|
-
<div class="header">
|
|
156
|
+
<div class="header" part="header">
|
|
157
157
|
<slot name="header" ${c("headerSlottedContent")}></slot>
|
|
158
158
|
</div>
|
|
159
159
|
<div
|
|
@@ -165,7 +165,7 @@ var P = s(T, M, (e) => {
|
|
|
165
165
|
>
|
|
166
166
|
<slot ${c("items")}></slot>
|
|
167
167
|
</div>
|
|
168
|
-
<footer class="action-items"><slot name="action-items" ${c("actionItemsSlottedContent")}></slot></footer>
|
|
168
|
+
<footer class="action-items" part="action-items"><slot name="action-items" ${c("actionItemsSlottedContent")}></slot></footer>
|
|
169
169
|
</div>
|
|
170
170
|
</${t}>
|
|
171
171
|
</template>`;
|
package/bundled/definition24.cjs
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
const e=require(`./vivid-element.cjs`),t=require(`./when.cjs`),n=require(`./decorate.cjs`),r=require(`./definition3.cjs`),i=require(`./utils.cjs`);var
|
|
1
|
+
const e=require(`./vivid-element.cjs`),t=require(`./when.cjs`),n=require(`./decorate.cjs`),r=require(`./definition3.cjs`),i=require(`./icon.cjs`),a=require(`./utils.cjs`);var o=`:host{display:inline-flex}.base{align-items:center;column-gap:8px;display:inline-flex}.icon{align-items:center;display:inline-flex}.icon [data-vvd-component=icon]{block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));flex-shrink:0;inline-size:auto}.icon ::slotted(*){block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));object-fit:contain;border-radius:2px;inline-size:auto;display:block}.text{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}`,s=class extends e.t{get flagIconName(){return a.t(this.code)}get displayText(){let e=this.label?.trim();if(e)return e;let t=this.code?.trim();return t?t.toUpperCase():void 0}};n.t([e.m],s.prototype,`code`,void 0),n.t([e.m],s.prototype,`label`,void 0);var c=e.u(`country`,s,n=>{let r=n.tagFor(i.t);return e.p`
|
|
2
2
|
<div class="base">
|
|
3
3
|
<slot name="icon" class="icon">
|
|
4
|
-
${t.t(e=>e.flagIconName,e.p`<${
|
|
4
|
+
${t.t(e=>e.flagIconName,e.p`<${r}
|
|
5
5
|
size="-4"
|
|
6
6
|
name="${e=>e.flagIconName}"
|
|
7
7
|
aria-hidden="true"
|
|
8
|
-
></${
|
|
8
|
+
></${r}>`)}
|
|
9
9
|
</slot>
|
|
10
10
|
${t.t(e=>e.displayText,e.p`<span class="text">${e=>e.displayText}</span>`)}
|
|
11
11
|
</div>
|
|
12
|
-
`},[r.t],{styles:
|
|
12
|
+
`},[r.t],{styles:o}),l=e.d(c);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 c}});
|
package/bundled/definition24.js
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { d as e, m as t, p as n, t as r, u as i } from "./vivid-element.js";
|
|
2
2
|
import { t as a } from "./when.js";
|
|
3
3
|
import { t as o } from "./decorate.js";
|
|
4
|
-
import {
|
|
4
|
+
import { t as s } from "./definition3.js";
|
|
5
|
+
import { t as c } from "./icon.js";
|
|
5
6
|
import { t as l } from "./utils.js";
|
|
6
7
|
//#region src/lib/country/country.scss?inline
|
|
7
8
|
var u = ":host{display:inline-flex}.base{align-items:center;column-gap:8px;display:inline-flex}.icon{align-items:center;display:inline-flex}.icon [data-vvd-component=icon]{block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));flex-shrink:0;inline-size:auto}.icon ::slotted(*){block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));object-fit:contain;border-radius:2px;inline-size:auto;display:block}.text{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}", d = class extends r {
|
|
@@ -19,7 +20,7 @@ o([t], d.prototype, "code", void 0), o([t], d.prototype, "label", void 0);
|
|
|
19
20
|
//#endregion
|
|
20
21
|
//#region src/lib/country/definition.ts
|
|
21
22
|
var f = i("country", d, (e) => {
|
|
22
|
-
let t = e.tagFor(
|
|
23
|
+
let t = e.tagFor(c);
|
|
23
24
|
return n`
|
|
24
25
|
<div class="base">
|
|
25
26
|
<slot name="icon" class="icon">
|
|
@@ -32,6 +33,6 @@ var f = i("country", d, (e) => {
|
|
|
32
33
|
${a((e) => e.displayText, n`<span class="text">${(e) => e.displayText}</span>`)}
|
|
33
34
|
</div>
|
|
34
35
|
`;
|
|
35
|
-
}, [
|
|
36
|
+
}, [s], { styles: u }), p = e(f);
|
|
36
37
|
//#endregion
|
|
37
38
|
export { p as n, d as r, f as t };
|
package/bundled/definition25.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const e=require(`./vivid-element.cjs`),t=require(`./slotted.cjs`),n=require(`./ref.cjs`),r=require(`./when.cjs`),i=require(`./decorate.cjs`),a=require(`./class-names.cjs`),o=require(`./definition3.cjs`),s=require(`./affix.cjs`);var c=`:host{--_vvd-accordion-item-accent-firm-wrapper:var(--vvd-accordion-item-accent-firm)}.heading-button{--vvd-accordion-item-accent-firm:var(--_vvd-accordion-item-accent-firm-wrapper,var(--vvd-accordion-item-accent-primary))}:host{box-sizing:border-box;flex-direction:column;display:flex}.heading-container{margin:0}.heading-button,.heading-button.appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.heading-button.appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}@media (hover:hover){.heading-button:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.heading-button:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline:transparent}.heading-button:hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:transparent}}.heading-button.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.heading-button.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline:transparent}.heading-button.hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:transparent}.heading-button:active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.heading-button:active:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline:transparent}.heading-button:active:where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-fierce);--_appearance-color-outline:transparent}.heading-button.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.heading-button.active:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline:transparent}.heading-button.active:where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-fierce);--_appearance-color-outline:transparent}.heading-button{--_connotation-color-primary:var(--vvd-accordion-item-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-accordion-item-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-accordion-item-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-accordion-item-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-faint:var(--vvd-accordion-item-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-accordion-item-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-firm:var(--vvd-accordion-item-accent-firm,var(--vvd-color-canvas-text));--focus-stroke-gap-color:transparent;background-color:var(--_appearance-color-fill);width:100%;color:var(--_appearance-color-text);cursor:pointer;text-align:left;border:none;align-items:center;padding:16px;display:flex}.heading-button: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))}.heading-button.size-condensed{font:var(--vvd-typography-base-extended-bold);gap:12px}.heading-button:not(.size-condensed){font:var(--vvd-typography-heading-4);gap:16px}.heading-content{flex-direction:column;flex:auto;gap:4px;min-inline-size:0;display:flex}.heading-primary{min-inline-size:0}.heading-secondary{color:var(--vvd-color-neutral-600)}.heading-button:not(.size-condensed) .heading-secondary,.heading-button.size-condensed .heading-secondary{font:var(--vvd-typography-base)}.meta{max-width:var(--accordion-item-meta-inline-size,20%);color:var(--vvd-color-neutral-600);text-align:end;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0;overflow:hidden}.heading-button:not(.size-condensed) .meta{font:var(--vvd-typography-base-bold)}.heading-button.size-condensed .meta{font:var(--vvd-typography-base-condensed-bold)}.region{padding:8px 32px 24px 16px;display:none}.region:not(.size-condensed).padded{padding-inline-start:52px}:host([expanded]) .region{display:block}.region.size-condensed.padded{padding-inline-start:44px}slot[name=icon]{color:var(--vvd-color-neutral-600)}.heading-button:not(.size-condensed) slot[name=icon]{font:inherit}.heading-button.size-condensed slot[name=icon]{font:var(--vvd-typography-base-extended)}:host(:not([icon-trailing])) slot[name=icon]:last-of-type{color:var(--_appearance-color-text)}`,l=class extends s.n(e.t){constructor(...e){super(...e),this.headinglevel=2,this.expanded=!1,this.noIndicator=!1,this.clickHandler=()=>{this.expanded=!this.expanded,this.change()},this.change=()=>{this.$emit(`change`)}}};i.t([e.m({attribute:`heading-level`,mode:`fromView`,converter:e.h})],l.prototype,`headinglevel`,void 0),i.t([e.m],l.prototype,`appearance`,void 0),i.t([e.m({mode:`boolean`})],l.prototype,`expanded`,void 0),i.t([e.m],l.prototype,`id`,void 0),i.t([e.m],l.prototype,`heading`,void 0),i.t([e.m({attribute:`secondary-text`})],l.prototype,`secondaryText`,void 0),i.t([e.A],l.prototype,`_headingSlottedContent`,void 0),i.t([e.m({mode:`boolean`,attribute:`no-indicator`})],l.prototype,`noIndicator`,void 0),i.t([e.m],l.prototype,`meta`,void 0),i.t([e.A],l.prototype,`_metaSlottedContent`,void 0),i.t([e.m],l.prototype,`size`,void 0);var u=(i,o)=>{let c=s.a(i),l=e.p.partial(o);return e.p`
|
|
1
|
+
const e=require(`./vivid-element.cjs`),t=require(`./slotted.cjs`),n=require(`./ref.cjs`),r=require(`./when.cjs`),i=require(`./decorate.cjs`),a=require(`./class-names.cjs`),o=require(`./definition3.cjs`),s=require(`./affix.cjs`);var c=`:host{--_vvd-accordion-item-accent-firm-wrapper:var(--vvd-accordion-item-accent-firm)}.heading-button{--vvd-accordion-item-accent-firm:var(--_vvd-accordion-item-accent-firm-wrapper,var(--vvd-accordion-item-accent-primary))}:host{box-sizing:border-box;flex-direction:column;display:flex}.heading-container{margin:0}.heading-button,.heading-button.appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.heading-button.appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}@media (hover:hover){.heading-button:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.heading-button:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline:transparent}.heading-button:hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:transparent}}.heading-button.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.heading-button.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline:transparent}.heading-button.hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:transparent}.heading-button:active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.heading-button:active:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline:transparent}.heading-button:active:where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-fierce);--_appearance-color-outline:transparent}.heading-button.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.heading-button.active:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline:transparent}.heading-button.active:where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-fierce);--_appearance-color-outline:transparent}.heading-button{--_connotation-color-primary:var(--vvd-accordion-item-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-accordion-item-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-accordion-item-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-accordion-item-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-faint:var(--vvd-accordion-item-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-accordion-item-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-firm:var(--vvd-accordion-item-accent-firm,var(--vvd-color-canvas-text));--focus-stroke-gap-color:transparent;background-color:var(--_appearance-color-fill);width:100%;color:var(--_appearance-color-text);cursor:pointer;text-align:left;border:none;align-items:center;padding:16px;display:flex}.heading-button: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))}.heading-button.size-condensed{font:var(--vvd-typography-base-extended-bold);gap:12px}.heading-button:not(.size-condensed){font:var(--vvd-typography-heading-4);gap:16px}.heading-content{flex-direction:column;flex:auto;gap:4px;min-inline-size:0;display:flex}.heading-primary{min-inline-size:0}.heading-secondary{color:var(--vvd-color-neutral-600)}.heading-button:not(.size-condensed) .heading-secondary,.heading-button.size-condensed .heading-secondary{font:var(--vvd-typography-base)}.meta{max-width:var(--accordion-item-meta-inline-size,20%);color:var(--vvd-color-neutral-600);text-align:end;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0;overflow:hidden}.heading-button:not(.size-condensed) .meta{font:var(--vvd-typography-base-bold)}.heading-button.size-condensed .meta{font:var(--vvd-typography-base-condensed-bold)}.region{padding:8px 32px 24px 16px;display:none}.region:not(.size-condensed).padded{padding-inline-start:52px}:host([expanded]) .region{display:block}.region.size-condensed.padded{padding-inline-start:44px}slot[name=icon]{color:var(--vvd-color-neutral-600)}.heading-button:not(.size-condensed) slot[name=icon]{font:inherit}.heading-button.size-condensed slot[name=icon]{font:var(--vvd-typography-base-extended)}:host(:not([icon-trailing])) slot[name=icon]:last-of-type{color:var(--_appearance-color-text)}`,l=class extends s.n(e.t){constructor(...e){super(...e),this.headinglevel=2,this.expanded=!1,this.noIndicator=!1,this.clickHandler=()=>{this.expanded=!this.expanded,this.change()},this.change=()=>{this.$emit(`change`)}}};i.t([e.m({attribute:`heading-level`,mode:`fromView`,converter:e.h})],l.prototype,`headinglevel`,void 0),i.t([e.m],l.prototype,`appearance`,void 0),i.t([e.m({mode:`boolean`})],l.prototype,`expanded`,void 0),i.t([e.m],l.prototype,`id`,void 0),i.t([e.m],l.prototype,`heading`,void 0),i.t([e.m({attribute:`secondary-text`})],l.prototype,`secondaryText`,void 0),i.t([e.n({deprecatedPropertyName:`secondaryText`,fromDeprecated:e=>e,toDeprecated:e=>e}),e.m({attribute:`text-secondary`})],l.prototype,`textSecondary`,void 0),i.t([e.A],l.prototype,`_headingSlottedContent`,void 0),i.t([e.m({mode:`boolean`,attribute:`no-indicator`})],l.prototype,`noIndicator`,void 0),i.t([e.m],l.prototype,`meta`,void 0),i.t([e.A],l.prototype,`_metaSlottedContent`,void 0),i.t([e.m],l.prototype,`size`,void 0);var u=(i,o)=>{let c=s.a(i),l=e.p.partial(o);return e.p`
|
|
2
2
|
<${l} class="heading-container">
|
|
3
3
|
<button
|
|
4
4
|
class="${e=>a.t(`heading-button`,[`appearance-${e.appearance}`,!!e.appearance],[`size-${e.size}`,!!e.size])}"
|
|
@@ -16,8 +16,8 @@ const e=require(`./vivid-element.cjs`),t=require(`./slotted.cjs`),n=require(`./r
|
|
|
16
16
|
<slot name="heading" ${t.t(`_headingSlottedContent`)}></slot>
|
|
17
17
|
${r.t(e=>e.heading&&!e._headingSlottedContent?.length,e.p`${e=>e.heading}`)}
|
|
18
18
|
</span>
|
|
19
|
-
${r.t(e=>!!e.
|
|
20
|
-
>${e=>e.
|
|
19
|
+
${r.t(e=>!!e.textSecondary,e.p`<span class="heading-secondary"
|
|
20
|
+
>${e=>e.textSecondary}</span
|
|
21
21
|
>`)}
|
|
22
22
|
</span>
|
|
23
23
|
|
package/bundled/definition25.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import { A as e, d as t, h as n, m as r,
|
|
2
|
-
import { t as
|
|
3
|
-
import { t as
|
|
4
|
-
import { t as
|
|
5
|
-
import { t as
|
|
6
|
-
import { t as
|
|
7
|
-
import { t as
|
|
8
|
-
import { a as
|
|
1
|
+
import { A as e, d as t, h as n, m as r, n as i, p as a, t as o, u as s } from "./vivid-element.js";
|
|
2
|
+
import { t as c } from "./slotted.js";
|
|
3
|
+
import { t as l } from "./ref.js";
|
|
4
|
+
import { t as u } from "./when.js";
|
|
5
|
+
import { t as d } from "./decorate.js";
|
|
6
|
+
import { t as f } from "./class-names.js";
|
|
7
|
+
import { t as p } from "./definition3.js";
|
|
8
|
+
import { a as m, i as h, n as g } from "./affix.js";
|
|
9
9
|
//#region src/lib/accordion-item/accordion-item.scss?inline
|
|
10
|
-
var
|
|
10
|
+
var _ = ":host{--_vvd-accordion-item-accent-firm-wrapper:var(--vvd-accordion-item-accent-firm)}.heading-button{--vvd-accordion-item-accent-firm:var(--_vvd-accordion-item-accent-firm-wrapper,var(--vvd-accordion-item-accent-primary))}:host{box-sizing:border-box;flex-direction:column;display:flex}.heading-container{margin:0}.heading-button,.heading-button.appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.heading-button.appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}@media (hover:hover){.heading-button:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.heading-button:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline:transparent}.heading-button:hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:transparent}}.heading-button.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.heading-button.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline:transparent}.heading-button.hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:transparent}.heading-button:active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.heading-button:active:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline:transparent}.heading-button:active:where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-fierce);--_appearance-color-outline:transparent}.heading-button.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.heading-button.active:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline:transparent}.heading-button.active:where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-fierce);--_appearance-color-outline:transparent}.heading-button{--_connotation-color-primary:var(--vvd-accordion-item-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-accordion-item-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-accordion-item-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-accordion-item-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-faint:var(--vvd-accordion-item-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-accordion-item-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-firm:var(--vvd-accordion-item-accent-firm,var(--vvd-color-canvas-text));--focus-stroke-gap-color:transparent;background-color:var(--_appearance-color-fill);width:100%;color:var(--_appearance-color-text);cursor:pointer;text-align:left;border:none;align-items:center;padding:16px;display:flex}.heading-button: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))}.heading-button.size-condensed{font:var(--vvd-typography-base-extended-bold);gap:12px}.heading-button:not(.size-condensed){font:var(--vvd-typography-heading-4);gap:16px}.heading-content{flex-direction:column;flex:auto;gap:4px;min-inline-size:0;display:flex}.heading-primary{min-inline-size:0}.heading-secondary{color:var(--vvd-color-neutral-600)}.heading-button:not(.size-condensed) .heading-secondary,.heading-button.size-condensed .heading-secondary{font:var(--vvd-typography-base)}.meta{max-width:var(--accordion-item-meta-inline-size,20%);color:var(--vvd-color-neutral-600);text-align:end;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0;overflow:hidden}.heading-button:not(.size-condensed) .meta{font:var(--vvd-typography-base-bold)}.heading-button.size-condensed .meta{font:var(--vvd-typography-base-condensed-bold)}.region{padding:8px 32px 24px 16px;display:none}.region:not(.size-condensed).padded{padding-inline-start:52px}:host([expanded]) .region{display:block}.region.size-condensed.padded{padding-inline-start:44px}slot[name=icon]{color:var(--vvd-color-neutral-600)}.heading-button:not(.size-condensed) slot[name=icon]{font:inherit}.heading-button.size-condensed slot[name=icon]{font:var(--vvd-typography-base-extended)}:host(:not([icon-trailing])) slot[name=icon]:last-of-type{color:var(--_appearance-color-text)}", v = class extends g(o) {
|
|
11
11
|
constructor(...e) {
|
|
12
12
|
super(...e), this.headinglevel = 2, this.expanded = !1, this.noIndicator = !1, this.clickHandler = () => {
|
|
13
13
|
this.expanded = !this.expanded, this.change();
|
|
@@ -16,44 +16,48 @@ var g = ":host{--_vvd-accordion-item-accent-firm-wrapper:var(--vvd-accordion-ite
|
|
|
16
16
|
};
|
|
17
17
|
}
|
|
18
18
|
};
|
|
19
|
-
|
|
19
|
+
d([r({
|
|
20
20
|
attribute: "heading-level",
|
|
21
21
|
mode: "fromView",
|
|
22
22
|
converter: n
|
|
23
|
-
})],
|
|
23
|
+
})], v.prototype, "headinglevel", void 0), d([r], v.prototype, "appearance", void 0), d([r({ mode: "boolean" })], v.prototype, "expanded", void 0), d([r], v.prototype, "id", void 0), d([r], v.prototype, "heading", void 0), d([r({ attribute: "secondary-text" })], v.prototype, "secondaryText", void 0), d([i({
|
|
24
|
+
deprecatedPropertyName: "secondaryText",
|
|
25
|
+
fromDeprecated: (e) => e,
|
|
26
|
+
toDeprecated: (e) => e
|
|
27
|
+
}), r({ attribute: "text-secondary" })], v.prototype, "textSecondary", void 0), d([e], v.prototype, "_headingSlottedContent", void 0), d([r({
|
|
24
28
|
mode: "boolean",
|
|
25
29
|
attribute: "no-indicator"
|
|
26
|
-
})],
|
|
30
|
+
})], v.prototype, "noIndicator", void 0), d([r], v.prototype, "meta", void 0), d([e], v.prototype, "_metaSlottedContent", void 0), d([r], v.prototype, "size", void 0);
|
|
27
31
|
//#endregion
|
|
28
32
|
//#region src/lib/accordion-item/accordion-item.template.ts
|
|
29
|
-
var
|
|
30
|
-
let n =
|
|
31
|
-
return
|
|
33
|
+
var y = (e, t) => {
|
|
34
|
+
let n = m(e), r = a.partial(t);
|
|
35
|
+
return a`
|
|
32
36
|
<${r} class="heading-container">
|
|
33
37
|
<button
|
|
34
|
-
class="${(e) =>
|
|
38
|
+
class="${(e) => f("heading-button", [`appearance-${e.appearance}`, !!e.appearance], [`size-${e.size}`, !!e.size])}"
|
|
35
39
|
id="${(e) => e.id}"
|
|
36
40
|
aria-expanded="${(e) => e.expanded}"
|
|
37
41
|
aria-controls="${(e) => e.id}-panel"
|
|
38
42
|
@click="${(e) => e.clickHandler()}"
|
|
39
|
-
${
|
|
43
|
+
${l("expandbutton")}
|
|
40
44
|
>
|
|
41
45
|
|
|
42
|
-
${(e) => e.iconTrailing ? null : n(e.icon,
|
|
46
|
+
${(e) => e.iconTrailing ? null : n(e.icon, h.Slot)}
|
|
43
47
|
|
|
44
48
|
<span class="heading-content">
|
|
45
49
|
<span class="heading-primary">
|
|
46
|
-
<slot name="heading" ${
|
|
47
|
-
${
|
|
50
|
+
<slot name="heading" ${c("_headingSlottedContent")}></slot>
|
|
51
|
+
${u((e) => e.heading && !e._headingSlottedContent?.length, a`${(e) => e.heading}`)}
|
|
48
52
|
</span>
|
|
49
|
-
${
|
|
50
|
-
>${(e) => e.
|
|
53
|
+
${u((e) => !!e.textSecondary, a`<span class="heading-secondary"
|
|
54
|
+
>${(e) => e.textSecondary}</span
|
|
51
55
|
>`)}
|
|
52
56
|
</span>
|
|
53
57
|
|
|
54
58
|
<span class="meta">
|
|
55
|
-
<slot name="meta" ${
|
|
56
|
-
${
|
|
59
|
+
<slot name="meta" ${c("_metaSlottedContent")}></slot>
|
|
60
|
+
${u((e) => e.meta && !e._metaSlottedContent?.length, a`${(e) => e.meta}`)}
|
|
57
61
|
</span>
|
|
58
62
|
|
|
59
63
|
${(e) => e.icon && e.iconTrailing ? n(e.icon) : null}
|
|
@@ -62,8 +66,8 @@ var v = (e, t) => {
|
|
|
62
66
|
</button>
|
|
63
67
|
</${r}>
|
|
64
68
|
`;
|
|
65
|
-
},
|
|
66
|
-
${(t) =>
|
|
69
|
+
}, b = s("accordion-item", v, (e) => a`
|
|
70
|
+
${(t) => y(e, `h${t.headinglevel}`)}
|
|
67
71
|
<div
|
|
68
72
|
id="${(e) => e.id}-panel"
|
|
69
73
|
aria-labelledby="${(e) => e.id}"
|
|
@@ -72,6 +76,6 @@ var v = (e, t) => {
|
|
|
72
76
|
>
|
|
73
77
|
<slot></slot>
|
|
74
78
|
</div>
|
|
75
|
-
`, [
|
|
79
|
+
`, [p], { styles: _ }), x = t(b);
|
|
76
80
|
//#endregion
|
|
77
|
-
export {
|
|
81
|
+
export { x as n, v as r, b as t };
|
package/bundled/definition3.cjs
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
const e=require(`./vivid-element.cjs`),t=require(`./when.cjs`),n=require(`./
|
|
1
|
+
const e=require(`./vivid-element.cjs`),t=require(`./when.cjs`),n=require(`./class-names.cjs`),r=require(`./icon.cjs`);var i=e.u(`icon`,r.t,()=>{let r=e=>!e.label||e.label.trim().length===0;return e.p`
|
|
2
2
|
<span
|
|
3
|
-
class="${e=>
|
|
4
|
-
role="${e=>
|
|
5
|
-
?aria-hidden="${e=>
|
|
3
|
+
class="${e=>n.t(`control`,[`connotation-${e.connotation}`,!!e.connotation],[`size-${e.size}`,typeof e.size==`number`])}"
|
|
4
|
+
role="${e=>r(e)?null:`img`}"
|
|
5
|
+
?aria-hidden="${e=>r(e)}"
|
|
6
6
|
aria-label="${e=>e.label||null}"
|
|
7
7
|
?aria-busy="${e=>!e?.iconLoaded}"
|
|
8
8
|
>
|
|
@@ -10,4 +10,4 @@ const e=require(`./vivid-element.cjs`),t=require(`./when.cjs`),n=require(`./deco
|
|
|
10
10
|
${t.t(e=>e?.iconLoaded&&e?._svg,t=>e.p`${e.p.partial(t._svg)}`)}
|
|
11
11
|
</slot>
|
|
12
12
|
</span>
|
|
13
|
-
`},[],{styles:
|
|
13
|
+
`},[],{styles:`:host{vertical-align:sub;display:inline-block}.control.connotation-accent{--_connotation-color-primary:var(--vvd-icon-accent-primary,var(--vvd-color-canvas-text))}.control.connotation-announcement{--_connotation-color-primary:var(--vvd-icon-announcement-primary,var(--vvd-color-announcement-500))}.control.connotation-cta{--_connotation-color-primary:var(--vvd-icon-cta-primary,var(--vvd-color-cta-500))}.control.connotation-success{--_connotation-color-primary:var(--vvd-icon-success-primary,var(--vvd-color-success-500))}.control.connotation-warning{--_connotation-color-primary:var(--vvd-icon-warning-primary,var(--vvd-color-warning-300))}.control.connotation-alert{--_connotation-color-primary:var(--vvd-icon-alert-primary,var(--vvd-color-alert-500))}.control.connotation-information{--_connotation-color-primary:var(--vvd-icon-information-primary,var(--vvd-color-information-500))}.control.size--6{--_icon-block-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))}.control.size--5{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20))}.control.size--4{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.size--3{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 12))}.control.size--2{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.control.size--1{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4))}.control.size-0{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}.control.size-1{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 4))}.control.size-2{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8))}.control.size-3{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 12))}.control.size-4{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 16))}.control.size-5{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 20))}.control:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-0,.size-1,.size-2,.size-3,.size-4,.size-5){--_icon-block-size:1em}.control{margin:unset;block-size:var(--_icon-block-size);color:currentColor;contain:strict;inline-size:var(--_icon-block-size);display:flex}.control[class*=connotation]{color:var(--_connotation-color-primary)}slot,svg,::slotted(:where(svg,img)){block-size:inherit;inline-size:inherit;margin:auto}`}),a=e.d(i);Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return i}});
|
package/bundled/definition3.js
CHANGED
|
@@ -1,54 +1,24 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { t as
|
|
3
|
-
import { t as
|
|
4
|
-
import { t as
|
|
5
|
-
import { n as l, r as u, t as d } from "./numberConverter.js";
|
|
6
|
-
//#region src/lib/icon/icon.scss?inline
|
|
7
|
-
var f = ":host{vertical-align:sub;display:inline-block}.control.connotation-accent{--_connotation-color-primary:var(--vvd-icon-accent-primary,var(--vvd-color-canvas-text))}.control.connotation-announcement{--_connotation-color-primary:var(--vvd-icon-announcement-primary,var(--vvd-color-announcement-500))}.control.connotation-cta{--_connotation-color-primary:var(--vvd-icon-cta-primary,var(--vvd-color-cta-500))}.control.connotation-success{--_connotation-color-primary:var(--vvd-icon-success-primary,var(--vvd-color-success-500))}.control.connotation-warning{--_connotation-color-primary:var(--vvd-icon-warning-primary,var(--vvd-color-warning-300))}.control.connotation-alert{--_connotation-color-primary:var(--vvd-icon-alert-primary,var(--vvd-color-alert-500))}.control.connotation-information{--_connotation-color-primary:var(--vvd-icon-information-primary,var(--vvd-color-information-500))}.control.size--6{--_icon-block-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))}.control.size--5{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20))}.control.size--4{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.size--3{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 12))}.control.size--2{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.control.size--1{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4))}.control.size-0{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}.control.size-1{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 4))}.control.size-2{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8))}.control.size-3{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 12))}.control.size-4{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 16))}.control.size-5{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 20))}.control:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-0,.size-1,.size-2,.size-3,.size-4,.size-5){--_icon-block-size:1em}.control{margin:unset;block-size:var(--_icon-block-size);color:currentColor;contain:strict;inline-size:var(--_icon-block-size);display:flex}.control[class*=connotation]{color:var(--_connotation-color-primary)}slot,svg,::slotted(:where(svg,img)){block-size:inherit;inline-size:inherit;margin:auto}", p = 500, m = 2e3, h = class extends i {
|
|
8
|
-
constructor(...e) {
|
|
9
|
-
super(...e), this.iconLoaded = !1, this.#e = 0, this.#t = null;
|
|
10
|
-
}
|
|
11
|
-
#e;
|
|
12
|
-
#t;
|
|
13
|
-
async nameChanged() {
|
|
14
|
-
let e = ++this.#e;
|
|
15
|
-
this.#t && this.#t.abort(), this.#t = new AbortController(), this._svg = void 0, this.iconLoaded = !1;
|
|
16
|
-
let t = setTimeout(() => {
|
|
17
|
-
/* v8 ignore else -- @preserve */
|
|
18
|
-
this.#e === e && (this._svg = u, t = setTimeout(() => {
|
|
19
|
-
/* v8 ignore else -- @preserve */
|
|
20
|
-
this.#e === e && this._svg === u && (this._svg = void 0);
|
|
21
|
-
}, m));
|
|
22
|
-
}, p);
|
|
23
|
-
try {
|
|
24
|
-
let t = await l(this.name, this.#t.signal);
|
|
25
|
-
/* v8 ignore else -- @preserve */
|
|
26
|
-
this.#e === e && (this._svg = t);
|
|
27
|
-
} catch {
|
|
28
|
-
this.#e === e && (this._svg = void 0);
|
|
29
|
-
} finally {
|
|
30
|
-
this.#e === e && (clearTimeout(t), this.iconLoaded = !0);
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
};
|
|
34
|
-
s([n], h.prototype, "connotation", void 0), s([n({ converter: d })], h.prototype, "size", void 0), s([e], h.prototype, "_svg", void 0), s([e], h.prototype, "iconLoaded", void 0), s([n], h.prototype, "label", void 0), s([n], h.prototype, "name", void 0);
|
|
1
|
+
import { d as e, p as t, u as n } from "./vivid-element.js";
|
|
2
|
+
import { t as r } from "./when.js";
|
|
3
|
+
import { t as i } from "./class-names.js";
|
|
4
|
+
import { t as a } from "./icon.js";
|
|
35
5
|
//#endregion
|
|
36
6
|
//#region src/lib/icon/definition.ts
|
|
37
|
-
var
|
|
7
|
+
var o = n("icon", a, () => {
|
|
38
8
|
let e = (e) => !e.label || e.label.trim().length === 0;
|
|
39
|
-
return
|
|
9
|
+
return t`
|
|
40
10
|
<span
|
|
41
|
-
class="${(e) =>
|
|
11
|
+
class="${(e) => i("control", [`connotation-${e.connotation}`, !!e.connotation], [`size-${e.size}`, typeof e.size == "number"])}"
|
|
42
12
|
role="${(t) => e(t) ? null : "img"}"
|
|
43
13
|
?aria-hidden="${(t) => e(t)}"
|
|
44
14
|
aria-label="${(e) => e.label || null}"
|
|
45
15
|
?aria-busy="${(e) => !e?.iconLoaded}"
|
|
46
16
|
>
|
|
47
17
|
<slot aria-hidden="true">
|
|
48
|
-
${
|
|
18
|
+
${r((e) => e?.iconLoaded && e?._svg, (e) => t`${t.partial(e._svg)}`)}
|
|
49
19
|
</slot>
|
|
50
20
|
</span>
|
|
51
21
|
`;
|
|
52
|
-
}, [], { styles:
|
|
22
|
+
}, [], { styles: ":host{vertical-align:sub;display:inline-block}.control.connotation-accent{--_connotation-color-primary:var(--vvd-icon-accent-primary,var(--vvd-color-canvas-text))}.control.connotation-announcement{--_connotation-color-primary:var(--vvd-icon-announcement-primary,var(--vvd-color-announcement-500))}.control.connotation-cta{--_connotation-color-primary:var(--vvd-icon-cta-primary,var(--vvd-color-cta-500))}.control.connotation-success{--_connotation-color-primary:var(--vvd-icon-success-primary,var(--vvd-color-success-500))}.control.connotation-warning{--_connotation-color-primary:var(--vvd-icon-warning-primary,var(--vvd-color-warning-300))}.control.connotation-alert{--_connotation-color-primary:var(--vvd-icon-alert-primary,var(--vvd-color-alert-500))}.control.connotation-information{--_connotation-color-primary:var(--vvd-icon-information-primary,var(--vvd-color-information-500))}.control.size--6{--_icon-block-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))}.control.size--5{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20))}.control.size--4{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.size--3{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 12))}.control.size--2{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.control.size--1{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4))}.control.size-0{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}.control.size-1{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 4))}.control.size-2{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8))}.control.size-3{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 12))}.control.size-4{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 16))}.control.size-5{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 20))}.control:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-0,.size-1,.size-2,.size-3,.size-4,.size-5){--_icon-block-size:1em}.control{margin:unset;block-size:var(--_icon-block-size);color:currentColor;contain:strict;inline-size:var(--_icon-block-size);display:flex}.control[class*=connotation]{color:var(--_connotation-color-primary)}slot,svg,::slotted(:where(svg,img)){block-size:inherit;inline-size:inherit;margin:auto}" }), s = e(o);
|
|
53
23
|
//#endregion
|
|
54
|
-
export {
|
|
24
|
+
export { s as n, o as t };
|
package/bundled/definition4.cjs
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
const e=require(`./vivid-element.cjs`),t=require(`./slotted.cjs`),n=require(`./children.cjs`),r=require(`./ref.cjs`),i=require(`./when.cjs`),a=require(`./decorate.cjs`),o=require(`./class-names.cjs`),s=require(`./dom.cjs`),c=require(`./definition3.cjs`),l=require(`./
|
|
1
|
+
const e=require(`./vivid-element.cjs`),t=require(`./slotted.cjs`),n=require(`./children.cjs`),r=require(`./ref.cjs`),i=require(`./when.cjs`),a=require(`./decorate.cjs`),o=require(`./class-names.cjs`),s=require(`./dom.cjs`),c=require(`./definition3.cjs`),l=require(`./icon.cjs`),u=require(`./affix.cjs`),d=require(`./host-semantics.cjs`);var f=`: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;user-select:none;border-radius:8px;align-items:center;gap:12px;padding-inline:16px;text-decoration:none;display:inline-flex;position:relative}.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)}`;function p(e){return s.t(e)&&(e.getAttribute(`role`)===`treeitem`||e instanceof m)}var m=class extends d.t(u.t(e.t)){constructor(...e){super(...e),this.expanded=!1,this.selected=!1,this.disabled=!1,this.focusable=!1,this.isNestedItem=()=>p(this.parentElement),this.handleExpandCollapseButtonClick=e=>{!this.disabled&&!e.defaultPrevented&&(this.expanded=!this.expanded)},this.handleFocus=e=>{this.setAttribute(`tabindex`,`0`)},this.handleBlur=e=>{this.setAttribute(`tabindex`,`-1`)}}expandedChanged(){this.$fastController.isConnected&&this.$emit(`expanded-change`,this)}selectedChanged(){this.$fastController.isConnected&&this.$emit(`selected-change`,this)}itemsChanged(){this.$fastController.isConnected&&this.items.forEach(e=>{p(e)&&(e.nested=!0)})}static focusItem(e){e.focusable=!0,e.focus()}childItemLength(){return this.childItems.filter(e=>p(e)).length}};a.t([e.m],m.prototype,`text`,void 0),a.t([e.m({mode:`boolean`})],m.prototype,`expanded`,void 0),a.t([e.m({mode:`boolean`})],m.prototype,`selected`,void 0),a.t([e.m({mode:`boolean`})],m.prototype,`disabled`,void 0),a.t([e.A],m.prototype,`focusable`,void 0),a.t([e.A],m.prototype,`childItems`,void 0),a.t([e.A],m.prototype,`items`,void 0),a.t([e.A],m.prototype,`nested`,void 0),a.t([e.A],m.prototype,`renderCollapsedChildren`,void 0);var h=t=>{let n=t.tagFor(l.t);return e.p`
|
|
2
2
|
<div aria-hidden="true"
|
|
3
3
|
class="expandCollapseButton"
|
|
4
4
|
@click="${(e,t)=>e.handleExpandCollapseButtonClick(t.event)}"
|
|
5
5
|
${r.t(`expandCollapseButton`)}
|
|
6
6
|
>
|
|
7
7
|
<${n} class="expandCollapseIcon" name="${e=>e.expanded?`chevron-down-line`:`chevron-right-line`}"></${n}>
|
|
8
|
-
</div>`},
|
|
8
|
+
</div>`},g=e.u(`tree-item`,m,r=>{let a=u.a(r),s=r.tagFor(m,!0);return e.p` <template
|
|
9
9
|
slot="${e=>e.isNestedItem()?`item`:void 0}"
|
|
10
10
|
tabindex="-1"
|
|
11
|
-
${
|
|
11
|
+
${d.n({role:`treeitem`,ariaExpanded:e=>e.childItems&&e.childItems.length>0?e.expanded:void 0,ariaSelected:e=>e.selected,ariaDisabled:e=>e.disabled})}
|
|
12
12
|
@focusin="${(e,t)=>e.handleFocus(t.event)}"
|
|
13
13
|
@focusout="${(e,t)=>e.handleBlur(t.event)}"
|
|
14
14
|
${n.t({property:`childItems`,filter:t.r(s)})}
|
|
@@ -16,11 +16,11 @@ const e=require(`./vivid-element.cjs`),t=require(`./slotted.cjs`),n=require(`./c
|
|
|
16
16
|
<div
|
|
17
17
|
class="${e=>o.t(`control`,[`disabled`,e.disabled],[`selected`,e.selected])}"
|
|
18
18
|
>
|
|
19
|
-
${i.t(e=>e.childItems&&e.childItems.length>0,
|
|
20
|
-
${e=>a(e.icon,
|
|
19
|
+
${i.t(e=>e.childItems&&e.childItems.length>0,h(r))}
|
|
20
|
+
${e=>a(e.icon,u.i.Slot)}
|
|
21
21
|
${e=>e.text}
|
|
22
22
|
</div>
|
|
23
23
|
${i.t(e=>e.childItems&&e.childItems.length>0&&e.expanded,e.p` <div role="group" class="items">
|
|
24
24
|
<slot name="item" ${t.t(`items`)}></slot>
|
|
25
25
|
</div>`)}
|
|
26
|
-
</template>`},[c.t],{styles:
|
|
26
|
+
</template>`},[c.t],{styles:f}),_=e.d(g);Object.defineProperty(exports,`i`,{enumerable:!0,get:function(){return p}}),Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return g}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return m}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return _}});
|
package/bundled/definition4.js
CHANGED
|
@@ -6,7 +6,8 @@ import { t as u } from "./when.js";
|
|
|
6
6
|
import { t as d } from "./decorate.js";
|
|
7
7
|
import { t as f } from "./class-names.js";
|
|
8
8
|
import { t as p } from "./dom.js";
|
|
9
|
-
import {
|
|
9
|
+
import { t as m } from "./definition3.js";
|
|
10
|
+
import { t as h } from "./icon.js";
|
|
10
11
|
import { a as g, i as _, t as v } from "./affix.js";
|
|
11
12
|
import { n as y, t as b } from "./host-semantics.js";
|
|
12
13
|
//#region src/lib/tree-item/tree-item.scss?inline
|
|
@@ -49,7 +50,7 @@ d([n], C.prototype, "text", void 0), d([n({ mode: "boolean" })], C.prototype, "e
|
|
|
49
50
|
//#endregion
|
|
50
51
|
//#region src/lib/tree-item/tree-item.template.ts
|
|
51
52
|
var w = (e) => {
|
|
52
|
-
let t = e.tagFor(
|
|
53
|
+
let t = e.tagFor(h);
|
|
53
54
|
return r`
|
|
54
55
|
<div aria-hidden="true"
|
|
55
56
|
class="expandCollapseButton"
|
|
@@ -87,6 +88,6 @@ var w = (e) => {
|
|
|
87
88
|
<slot name="item" ${s("items")}></slot>
|
|
88
89
|
</div>`)}
|
|
89
90
|
</template>`;
|
|
90
|
-
}, [
|
|
91
|
+
}, [m], { styles: x }), E = t(T);
|
|
91
92
|
//#endregion
|
|
92
93
|
export { S as i, T as n, C as r, E as t };
|