@vonage/vivid 4.21.1 → 4.23.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/custom-elements.json +2055 -640
- package/index.cjs +1 -1
- package/index.js +2 -2
- package/lib/accordion-item/accordion-item.d.ts +11 -5
- package/lib/action-group/action-group.d.ts +8 -6
- package/lib/alert/alert.d.ts +21 -9
- package/lib/audio-player/audio-player.d.ts +13 -6
- package/lib/badge/badge.d.ts +11 -5
- package/lib/banner/banner.d.ts +26 -12
- package/lib/breadcrumb/breadcrumb.d.ts +333 -1
- package/lib/breadcrumb/breadcrumb.template.d.ts +2 -3
- package/lib/breadcrumb-item/breadcrumb-item.d.ts +8 -6
- package/lib/button/button.d.ts +11 -5
- package/lib/calendar/calendar.d.ts +3 -1
- package/lib/calendar-event/calendar-event.d.ts +333 -1
- package/lib/checkbox/checkbox.d.ts +8 -6
- package/lib/combobox/combobox.d.ts +11 -5
- package/lib/date-picker/date-picker.d.ts +74 -50
- package/lib/date-range-picker/date-range-picker.d.ts +38 -26
- package/lib/date-time-picker/date-time-picker.d.ts +76 -52
- package/lib/dial-pad/dial-pad.d.ts +11 -5
- package/lib/dialog/dialog.d.ts +16 -8
- package/lib/divider/divider.d.ts +8 -6
- package/lib/enums.d.ts +0 -4
- package/lib/fab/fab.d.ts +11 -5
- package/lib/file-picker/file-picker.d.ts +338 -1
- package/lib/header/header.d.ts +333 -1
- package/lib/menu/menu.d.ts +16 -8
- package/lib/menu-item/menu-item.d.ts +338 -2
- package/lib/nav/nav.d.ts +333 -1
- package/lib/nav-disclosure/nav-disclosure.d.ts +16 -8
- package/lib/nav-item/nav-item.d.ts +11 -5
- package/lib/note/note.d.ts +11 -5
- package/lib/number-field/number-field.d.ts +26 -12
- package/lib/option/option.d.ts +341 -3
- package/lib/progress/progress.d.ts +8 -6
- package/lib/progress-ring/progress-ring.d.ts +8 -6
- package/lib/radio-group/radio-group.d.ts +333 -1
- package/lib/range-slider/range-slider.d.ts +11 -5
- package/lib/rich-text-editor/facades/prose-mirror-vivid.schema.d.ts +1 -1
- package/lib/rich-text-editor/facades/vivid-prose-mirror.facade.d.ts +7 -1
- package/lib/rich-text-editor/menubar/consts.d.ts +18 -0
- package/lib/rich-text-editor/menubar/menubar.d.ts +3 -0
- package/lib/rich-text-editor/rich-text-editor.d.ts +14 -3
- package/lib/searchable-select/option-tag.d.ts +14 -6
- package/lib/searchable-select/searchable-select.d.ts +349 -7
- package/lib/select/select.d.ts +339 -3
- package/lib/selectable-box/selectable-box.d.ts +8 -6
- package/lib/slider/slider.d.ts +16 -8
- package/lib/split-button/split-button.d.ts +26 -12
- package/lib/switch/switch.d.ts +8 -6
- package/lib/tab/tab.d.ts +349 -7
- package/lib/tab-panel/tab-panel.d.ts +333 -1
- package/lib/tabs/definition.d.ts +1 -0
- package/lib/tabs/tabs.d.ts +6 -1
- package/lib/tag/tag.d.ts +338 -2
- package/lib/tag-group/tag-group.d.ts +8 -6
- package/lib/text-anchor/text-anchor.d.ts +16 -8
- package/lib/text-area/text-area.d.ts +8 -6
- package/lib/text-field/text-field.d.ts +16 -8
- package/lib/time-picker/time-picker.d.ts +38 -26
- package/lib/toggletip/toggletip.d.ts +9 -3
- package/lib/tooltip/tooltip.d.ts +9 -3
- package/lib/tree-item/tree-item.d.ts +338 -2
- package/lib/tree-view/tree-view.d.ts +333 -1
- package/lib/video-player/video-player.d.ts +14 -6
- package/package.json +1 -1
- package/shared/affix.js +1 -1
- package/shared/aria/aria-change-subscription.d.ts +6 -0
- package/shared/aria/aria-mixin.d.ts +338 -0
- package/shared/aria/delegate-aria-behavior.d.ts +31 -0
- package/shared/aria/delegates-aria.d.ts +14 -9
- package/shared/aria/host-semantics-behavior.d.ts +22 -0
- package/shared/aria/host-semantics.d.ts +337 -0
- package/shared/attribute-binding-behaviour.cjs +41 -0
- package/shared/attribute-binding-behaviour.js +39 -0
- package/shared/calendar-event.cjs +2 -1
- package/shared/calendar-event.js +2 -1
- package/shared/definition.js +1 -1
- package/shared/definition10.cjs +8 -2
- package/shared/definition10.js +9 -3
- package/shared/definition11.cjs +4 -28
- package/shared/definition11.js +5 -29
- package/shared/definition12.cjs +4 -1
- package/shared/definition12.js +5 -2
- package/shared/definition13.js +1 -1
- package/shared/definition14.js +1 -1
- package/shared/definition15.cjs +9 -8
- package/shared/definition15.js +11 -10
- package/shared/definition16.cjs +1 -1
- package/shared/definition16.js +2 -2
- package/shared/definition17.js +1 -1
- package/shared/definition18.js +1 -1
- package/shared/definition19.cjs +3 -0
- package/shared/definition19.js +4 -1
- package/shared/definition2.js +1 -1
- package/shared/definition20.js +1 -1
- package/shared/definition21.js +1 -1
- package/shared/definition22.cjs +3 -2
- package/shared/definition22.js +5 -4
- package/shared/definition23.cjs +4 -2
- package/shared/definition23.js +6 -4
- package/shared/definition24.js +1 -1
- package/shared/definition25.cjs +2 -14
- package/shared/definition25.js +3 -15
- package/shared/definition26.cjs +15 -2
- package/shared/definition26.js +16 -3
- package/shared/definition27.cjs +3 -2
- package/shared/definition27.js +4 -3
- package/shared/definition28.cjs +1 -1
- package/shared/definition28.js +2 -2
- package/shared/definition29.js +1 -1
- package/shared/definition3.cjs +4 -3
- package/shared/definition3.js +6 -5
- package/shared/definition30.cjs +34 -34
- package/shared/definition30.js +36 -36
- package/shared/definition31.cjs +6 -4
- package/shared/definition31.js +8 -6
- package/shared/definition32.js +1 -1
- package/shared/definition33.cjs +7 -2
- package/shared/definition33.js +8 -3
- package/shared/definition34.js +1 -1
- package/shared/definition35.cjs +3 -14
- package/shared/definition35.js +5 -16
- package/shared/definition36.cjs +8 -5
- package/shared/definition36.js +9 -6
- package/shared/definition37.js +1 -1
- package/shared/definition38.cjs +7 -8
- package/shared/definition38.js +9 -10
- package/shared/definition39.cjs +7 -8
- package/shared/definition39.js +9 -10
- package/shared/definition4.cjs +1 -1
- package/shared/definition4.js +2 -2
- package/shared/definition40.cjs +8 -5
- package/shared/definition40.js +9 -6
- package/shared/definition41.cjs +1 -1
- package/shared/definition41.js +2 -2
- package/shared/definition42.js +1 -1
- package/shared/definition43.cjs +506 -93
- package/shared/definition43.js +502 -89
- package/shared/definition44.cjs +27 -10
- package/shared/definition44.js +28 -11
- package/shared/definition45.cjs +12 -6
- package/shared/definition45.js +13 -7
- package/shared/definition46.cjs +18 -6
- package/shared/definition46.js +20 -8
- package/shared/definition47.js +1 -1
- package/shared/definition48.js +1 -1
- package/shared/definition49.cjs +10 -3
- package/shared/definition49.js +12 -5
- package/shared/definition5.cjs +7 -2
- package/shared/definition5.js +8 -3
- package/shared/definition50.cjs +8 -7
- package/shared/definition50.js +10 -9
- package/shared/definition51.cjs +3 -2
- package/shared/definition51.js +4 -3
- package/shared/definition52.cjs +8 -4
- package/shared/definition52.js +9 -5
- package/shared/definition53.cjs +5 -0
- package/shared/definition53.js +6 -2
- package/shared/definition54.cjs +4 -3
- package/shared/definition54.js +6 -5
- package/shared/definition55.cjs +7 -4
- package/shared/definition55.js +8 -5
- package/shared/definition56.cjs +69 -15
- package/shared/definition56.js +70 -16
- package/shared/definition57.cjs +163 -112
- package/shared/definition57.js +165 -114
- package/shared/definition58.js +1 -1
- package/shared/definition59.js +1 -1
- package/shared/definition6.js +1 -1
- package/shared/definition60.js +1 -1
- package/shared/definition61.cjs +8 -5
- package/shared/definition61.js +9 -6
- package/shared/definition62.cjs +5 -2
- package/shared/definition62.js +6 -3
- package/shared/definition63.js +1 -1
- package/shared/definition64.js +1 -1
- package/shared/definition65.js +1 -1
- package/shared/definition7.js +1 -1
- package/shared/definition8.cjs +4 -2
- package/shared/definition8.js +6 -4
- package/shared/definition9.js +1 -1
- package/shared/delegates-aria.cjs +106 -56
- package/shared/delegates-aria.js +107 -58
- package/shared/enums.cjs +0 -6
- package/shared/enums.js +1 -6
- package/shared/foundation/button/button.d.ts +8 -6
- package/shared/foundation/vivid-element/vivid-element.d.ts +339 -1
- package/shared/host-semantics.cjs +65 -0
- package/shared/host-semantics.js +62 -0
- package/shared/option.cjs +7 -1
- package/shared/option.js +7 -1
- package/shared/patterns/affix.d.ts +22 -10
- package/shared/patterns/anchored.d.ts +18 -6
- package/shared/patterns/localized.d.ts +11 -5
- package/shared/patterns/trapped-focus.d.ts +11 -5
- package/shared/picker-field/mixins/calendar-picker.d.ts +19 -13
- package/shared/picker-field/mixins/calendar-picker.template.d.ts +19 -13
- package/shared/picker-field/mixins/inline-time-picker/inline-time-picker.d.ts +11 -5
- package/shared/picker-field/mixins/min-max-calendar-picker.d.ts +38 -26
- package/shared/picker-field/mixins/single-date-picker.d.ts +55 -37
- package/shared/picker-field/mixins/single-value-picker.d.ts +17 -11
- package/shared/picker-field/mixins/time-selection-picker.d.ts +38 -26
- package/shared/picker-field/mixins/time-selection-picker.template.d.ts +38 -26
- package/shared/picker-field/picker-field.d.ts +21 -9
- package/shared/picker-field.template.js +1 -1
- package/shared/repeat.js +1 -1
- package/shared/single-value-picker.cjs +3 -0
- package/shared/single-value-picker.js +3 -0
- package/shared/slider.template.cjs +10 -9
- package/shared/slider.template.js +10 -9
- package/shared/templating/attribute-binding-behaviour.d.ts +15 -0
- package/shared/templating/render-in-light-dom.d.ts +22 -0
- package/shared/text-anchor.template.cjs +2 -13
- package/shared/text-anchor.template.js +2 -13
- package/shared/text-field.cjs +1 -1
- package/shared/text-field.js +1 -1
- package/shared/time-selection-picker.template.js +1 -1
- package/shared/vivid-element.cjs +96 -2
- package/shared/vivid-element.js +93 -3
- package/styles/core/all.css +1 -1
- package/styles/core/theme.css +1 -1
- package/styles/core/typography.css +1 -1
- package/styles/tokens/theme-dark.css +4 -4
- package/styles/tokens/theme-light.css +4 -4
- package/styles/tokens/vivid-2-compat.css +1 -1
- package/text-anchor/index.js +1 -1
- package/vivid.api.json +316 -70
- package/shared/Reflector.cjs +0 -71
- package/shared/Reflector.js +0 -69
package/shared/definition44.cjs
CHANGED
|
@@ -7,6 +7,7 @@ const definition$2 = require('./definition38.cjs');
|
|
|
7
7
|
const vividElement = require('./vivid-element.cjs');
|
|
8
8
|
const applyMixinsWithObservables = require('./applyMixinsWithObservables.cjs');
|
|
9
9
|
const scrollIntoView = require('./scrollIntoView.cjs');
|
|
10
|
+
const delegatesAria = require('./delegates-aria.cjs');
|
|
10
11
|
const formAssociated = require('./form-associated.cjs');
|
|
11
12
|
const affix = require('./affix.cjs');
|
|
12
13
|
const localized = require('./localized.cjs');
|
|
@@ -18,9 +19,9 @@ const slotted = require('./slotted.cjs');
|
|
|
18
19
|
const classNames = require('./class-names.cjs');
|
|
19
20
|
const repeat = require('./repeat.cjs');
|
|
20
21
|
|
|
21
|
-
const styles = ".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([aria-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host(:focus-visible){outline:none}:host{display:inline-block;inline-size:300px;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.control-wrapper{display:flex;flex-direction:column;gap:4px}.label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.fieldset{--_connotation-color-primary: var(--vvd-searchable-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-searchable-select-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-searchable-select-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-searchable-select-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-searchable-select-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-searchable-select-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-searchable-select-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-searchable-select-accent-fierce, var(--vvd-color-neutral-700))}.fieldset{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--
|
|
22
|
+
const styles = ".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([aria-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host(:focus-visible){outline:none}:host{display:inline-block;inline-size:300px;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.control-wrapper{display:flex;flex-direction:column;gap:4px}.label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.fieldset{--_connotation-color-primary: var(--vvd-searchable-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-searchable-select-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-searchable-select-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-searchable-select-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-searchable-select-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-searchable-select-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-searchable-select-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-searchable-select-accent-fierce, var(--vvd-color-neutral-700))}.fieldset{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.fieldset.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.fieldset:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.fieldset:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.fieldset:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset:where(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.fieldset:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset:where(.error):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.fieldset:where(.error):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.fieldset:where(.success):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.fieldset:where(.success):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.fieldset{display:flex;align-items:center;justify-content:space-between;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);gap:8px;padding-block:8px;padding-inline:16px;transition:box-shadow .2s,background-color .2s}.fieldset:focus-within{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}:host(:not([shape=pill])) .fieldset{border-radius:8px}:host([shape=pill]) .fieldset{border-radius:24px}.popup-wrapper{position:relative}.content-area{display:flex;overflow:hidden;flex:1;flex-direction:column;gap:8px;min-block-size:24px}.tag-row{display:flex;gap:8px;inline-size:100%}.tag-row.contains-only-input:not(:focus-within){display:contents}.tag-wrapper{overflow:hidden}.tag{max-inline-size:100%}input{box-sizing:border-box;flex:1;border:none;background:none;block-size:24px;font:var(--vvd-typography-base);max-inline-size:100%;min-inline-size:100px;outline:none}.contains-only-input input:not(:focus){position:absolute;block-size:0;inline-size:0;min-inline-size:0;opacity:0;pointer-events:none}.listbox{display:flex;flex-direction:column;padding:4px;gap:2px;max-block-size:var(--searchable-select-height, 408px);overflow-y:auto}.empty-message{display:flex;align-items:center;justify-content:center;color:var(--vvd-color-neutral-300);font:var(--vvd-typography-base);min-block-size:40px;text-align:center}::part(popup-base){inline-size:max-content;min-inline-size:var(--_searchable-select-fixed-width, 100%)}slot[name=icon]{font-size:20px}.visually-hidden{position:absolute;overflow:hidden;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}";
|
|
22
23
|
|
|
23
|
-
const optionTagStyles = ".base{--_connotation-color-contrast: var(--vvd-option-tag-accent-contrast, var(--vvd-color-neutral-800))}.base{position:relative;display:inline-flex;box-sizing:border-box;align-items:center;background-color:var(--fill-color);block-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 1px var(--outline-color);color:var(--text-color);column-gap:8px;font:var(--vvd-typography-base-bold);max-inline-size:100%;padding-inline:8px;user-select:none;vertical-align:middle}.base:not(.disabled){--text-color: var(--_connotation-color-contrast);--fill-color: color-mix( in srgb, var(--_connotation-color-contrast), transparent 87.5% );--outline-color: transparent}.base.disabled{--text-color: var(--vvd-color-neutral-300);--fill-color: color-mix( in srgb, var(--vvd-color-neutral-800), transparent 87.5% );--outline-color: transparent}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.label{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}slot[name=icon]{font-size:calc(calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 1.5);line-height:1}.icon-placeholder{inline-size:calc(calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 1.5)}.remove-button{display:flex;align-items:center;border-radius:inherit;cursor:pointer;outline:none}.disabled .remove-button{pointer-events:none}.remove-button:focus-visible:before{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}";
|
|
24
|
+
const optionTagStyles = ".base.connotation-cta{--_connotation-color-contrast: var(--vvd-option-tag-cta-contrast, var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-contrast: var(--vvd-option-tag-accent-contrast, var(--vvd-color-neutral-800))}.base{position:relative;display:inline-flex;box-sizing:border-box;align-items:center;background-color:var(--fill-color);block-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 1px var(--outline-color);color:var(--text-color);column-gap:8px;font:var(--vvd-typography-base-bold);max-inline-size:100%;padding-inline:8px;user-select:none;vertical-align:middle}.base:not(.disabled){--text-color: var(--_connotation-color-contrast);--fill-color: color-mix( in srgb, var(--_connotation-color-contrast), transparent 87.5% );--outline-color: transparent}.base.disabled{--text-color: var(--vvd-color-neutral-300);--fill-color: color-mix( in srgb, var(--vvd-color-neutral-800), transparent 87.5% );--outline-color: transparent}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.label{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}slot[name=icon]{font-size:calc(calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 1.5);line-height:1}.icon-placeholder{inline-size:calc(calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 1.5)}.remove-button{display:flex;align-items:center;border-radius:inherit;cursor:pointer;outline:none}.disabled .remove-button{pointer-events:none}.remove-button:focus-visible:before{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}";
|
|
24
25
|
|
|
25
26
|
class _SearchableSelect extends vividElement.VividElement {
|
|
26
27
|
}
|
|
@@ -55,8 +56,8 @@ const TagGapPx = 8;
|
|
|
55
56
|
const InputMinWidthPx = 100;
|
|
56
57
|
const PageSize = 10;
|
|
57
58
|
const isFormAssociatedTryingToSetFormValue = (value) => typeof value === "string";
|
|
58
|
-
exports.SearchableSelect = class SearchableSelect extends
|
|
59
|
-
localized.Localized(FormAssociatedSearchableSelect)
|
|
59
|
+
exports.SearchableSelect = class SearchableSelect extends delegatesAria.DelegatesAria(
|
|
60
|
+
affix.AffixIconWithTrailing(localized.Localized(FormAssociatedSearchableSelect))
|
|
60
61
|
) {
|
|
61
62
|
constructor() {
|
|
62
63
|
super(...arguments);
|
|
@@ -353,6 +354,15 @@ exports.SearchableSelect = class SearchableSelect extends affix.AffixIconWithTra
|
|
|
353
354
|
);
|
|
354
355
|
return option.label;
|
|
355
356
|
}
|
|
357
|
+
/**
|
|
358
|
+
* @internal
|
|
359
|
+
*/
|
|
360
|
+
_tagConnotationForValue(value) {
|
|
361
|
+
const option = this._slottedOptions.find(
|
|
362
|
+
(option2) => option2.value === value
|
|
363
|
+
);
|
|
364
|
+
return option.tagConnotation;
|
|
365
|
+
}
|
|
356
366
|
/**
|
|
357
367
|
* @internal
|
|
358
368
|
*/
|
|
@@ -879,6 +889,9 @@ class OptionTag extends localized.Localized(vividElement.VividElement) {
|
|
|
879
889
|
__decorateClass([
|
|
880
890
|
vividElement.attr
|
|
881
891
|
], OptionTag.prototype, "shape");
|
|
892
|
+
__decorateClass([
|
|
893
|
+
vividElement.observable
|
|
894
|
+
], OptionTag.prototype, "connotation");
|
|
882
895
|
__decorateClass([
|
|
883
896
|
vividElement.attr
|
|
884
897
|
], OptionTag.prototype, "label");
|
|
@@ -915,6 +928,7 @@ const tagTemplateFactory = (context, getComponent) => {
|
|
|
915
928
|
removable
|
|
916
929
|
:label="${(x, c) => getComponent(c)._tagLabelForValue(x)}"
|
|
917
930
|
:shape="${(_, c) => getComponent(c).shape}"
|
|
931
|
+
:connotation="${(x, c) => getComponent(c)._tagConnotationForValue(x)}"
|
|
918
932
|
?disabled="${(x, c) => getComponent(c)._isTagDisabled(x)}"
|
|
919
933
|
@remove="${(x, c) => getComponent(c)._onTagRemoved(x)}"
|
|
920
934
|
@keydown="${(_, c) => getComponent(c)._onTagKeydown(c.event)}"
|
|
@@ -988,12 +1002,14 @@ function renderFieldset(context) {
|
|
|
988
1002
|
id="control"
|
|
989
1003
|
class="control"
|
|
990
1004
|
autocomplete="off"
|
|
991
|
-
aria-autocomplete="list"
|
|
992
|
-
aria-expanded="${(x) => x.open}"
|
|
993
|
-
aria-haspopup="listbox"
|
|
994
1005
|
aria-controls="listbox"
|
|
1006
|
+
${delegatesAria.delegateAria({
|
|
1007
|
+
role: "combobox",
|
|
1008
|
+
ariaAutoComplete: "list",
|
|
1009
|
+
ariaHasPopup: "listbox",
|
|
1010
|
+
ariaExpanded: (x) => x.open
|
|
1011
|
+
})}
|
|
995
1012
|
placeholder="${(x) => x.multiple && x.values.length ? "" : x.placeholder}"
|
|
996
|
-
role="combobox"
|
|
997
1013
|
type="text"
|
|
998
1014
|
?disabled="${(x) => x.disabled}"
|
|
999
1015
|
:value="${(x) => x._inputValue}"
|
|
@@ -1117,11 +1133,12 @@ const SearchableSelectTemplate = (context) => {
|
|
|
1117
1133
|
`;
|
|
1118
1134
|
};
|
|
1119
1135
|
|
|
1120
|
-
const getClasses = ({ shape, disabled, removable }) => classNames.classNames(
|
|
1136
|
+
const getClasses = ({ shape, connotation, disabled, removable }) => classNames.classNames(
|
|
1121
1137
|
"base",
|
|
1122
1138
|
["disabled", disabled],
|
|
1123
1139
|
["removable", removable],
|
|
1124
|
-
[`shape-${shape}`, Boolean(shape)]
|
|
1140
|
+
[`shape-${shape}`, Boolean(shape)],
|
|
1141
|
+
[`connotation-${connotation}`, Boolean(connotation)]
|
|
1125
1142
|
);
|
|
1126
1143
|
function renderRemoveButton(iconTag) {
|
|
1127
1144
|
return vividElement.html`
|
package/shared/definition44.js
CHANGED
|
@@ -2,9 +2,10 @@ import { B as Button, c as chevronTemplateFactory, b as buttonDefinition } from
|
|
|
2
2
|
import { P as Popup, p as popupDefinition } from './definition65.js';
|
|
3
3
|
import { I as Icon, i as iconDefinition } from './definition28.js';
|
|
4
4
|
import { P as ProgressRing, p as progressRingDefinition } from './definition38.js';
|
|
5
|
-
import { V as VividElement, O as Observable, D as DOM, a as attr, n as nullableNumberConverter, o as observable, h as html,
|
|
5
|
+
import { V as VividElement, O as Observable, D as DOM, a as attr, n as nullableNumberConverter, o as observable, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
|
|
6
6
|
import { a as applyMixinsWithObservables } from './applyMixinsWithObservables.js';
|
|
7
7
|
import { s as scrollIntoView } from './scrollIntoView.js';
|
|
8
|
+
import { D as DelegatesAria, d as delegateAria } from './delegates-aria.js';
|
|
8
9
|
import { F as FormAssociated } from './form-associated.js';
|
|
9
10
|
import { A as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
|
|
10
11
|
import { L as Localized } from './localized.js';
|
|
@@ -16,9 +17,9 @@ import { s as slotted } from './slotted.js';
|
|
|
16
17
|
import { c as classNames } from './class-names.js';
|
|
17
18
|
import { r as repeat } from './repeat.js';
|
|
18
19
|
|
|
19
|
-
const styles = ".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([aria-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host(:focus-visible){outline:none}:host{display:inline-block;inline-size:300px;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.control-wrapper{display:flex;flex-direction:column;gap:4px}.label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.fieldset{--_connotation-color-primary: var(--vvd-searchable-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-searchable-select-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-searchable-select-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-searchable-select-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-searchable-select-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-searchable-select-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-searchable-select-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-searchable-select-accent-fierce, var(--vvd-color-neutral-700))}.fieldset{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--
|
|
20
|
+
const styles = ".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([aria-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host(:focus-visible){outline:none}:host{display:inline-block;inline-size:300px;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.control-wrapper{display:flex;flex-direction:column;gap:4px}.label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.fieldset{--_connotation-color-primary: var(--vvd-searchable-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-searchable-select-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-searchable-select-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-searchable-select-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-searchable-select-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-searchable-select-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-searchable-select-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-searchable-select-accent-fierce, var(--vvd-color-neutral-700))}.fieldset{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.fieldset.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.fieldset:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.fieldset:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.fieldset:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset:where(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.fieldset:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset:where(.error):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.fieldset:where(.error):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.fieldset:where(.success):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.fieldset:where(.success):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.fieldset{display:flex;align-items:center;justify-content:space-between;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);gap:8px;padding-block:8px;padding-inline:16px;transition:box-shadow .2s,background-color .2s}.fieldset:focus-within{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}:host(:not([shape=pill])) .fieldset{border-radius:8px}:host([shape=pill]) .fieldset{border-radius:24px}.popup-wrapper{position:relative}.content-area{display:flex;overflow:hidden;flex:1;flex-direction:column;gap:8px;min-block-size:24px}.tag-row{display:flex;gap:8px;inline-size:100%}.tag-row.contains-only-input:not(:focus-within){display:contents}.tag-wrapper{overflow:hidden}.tag{max-inline-size:100%}input{box-sizing:border-box;flex:1;border:none;background:none;block-size:24px;font:var(--vvd-typography-base);max-inline-size:100%;min-inline-size:100px;outline:none}.contains-only-input input:not(:focus){position:absolute;block-size:0;inline-size:0;min-inline-size:0;opacity:0;pointer-events:none}.listbox{display:flex;flex-direction:column;padding:4px;gap:2px;max-block-size:var(--searchable-select-height, 408px);overflow-y:auto}.empty-message{display:flex;align-items:center;justify-content:center;color:var(--vvd-color-neutral-300);font:var(--vvd-typography-base);min-block-size:40px;text-align:center}::part(popup-base){inline-size:max-content;min-inline-size:var(--_searchable-select-fixed-width, 100%)}slot[name=icon]{font-size:20px}.visually-hidden{position:absolute;overflow:hidden;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}";
|
|
20
21
|
|
|
21
|
-
const optionTagStyles = ".base{--_connotation-color-contrast: var(--vvd-option-tag-accent-contrast, var(--vvd-color-neutral-800))}.base{position:relative;display:inline-flex;box-sizing:border-box;align-items:center;background-color:var(--fill-color);block-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 1px var(--outline-color);color:var(--text-color);column-gap:8px;font:var(--vvd-typography-base-bold);max-inline-size:100%;padding-inline:8px;user-select:none;vertical-align:middle}.base:not(.disabled){--text-color: var(--_connotation-color-contrast);--fill-color: color-mix( in srgb, var(--_connotation-color-contrast), transparent 87.5% );--outline-color: transparent}.base.disabled{--text-color: var(--vvd-color-neutral-300);--fill-color: color-mix( in srgb, var(--vvd-color-neutral-800), transparent 87.5% );--outline-color: transparent}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.label{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}slot[name=icon]{font-size:calc(calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 1.5);line-height:1}.icon-placeholder{inline-size:calc(calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 1.5)}.remove-button{display:flex;align-items:center;border-radius:inherit;cursor:pointer;outline:none}.disabled .remove-button{pointer-events:none}.remove-button:focus-visible:before{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}";
|
|
22
|
+
const optionTagStyles = ".base.connotation-cta{--_connotation-color-contrast: var(--vvd-option-tag-cta-contrast, var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-contrast: var(--vvd-option-tag-accent-contrast, var(--vvd-color-neutral-800))}.base{position:relative;display:inline-flex;box-sizing:border-box;align-items:center;background-color:var(--fill-color);block-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 1px var(--outline-color);color:var(--text-color);column-gap:8px;font:var(--vvd-typography-base-bold);max-inline-size:100%;padding-inline:8px;user-select:none;vertical-align:middle}.base:not(.disabled){--text-color: var(--_connotation-color-contrast);--fill-color: color-mix( in srgb, var(--_connotation-color-contrast), transparent 87.5% );--outline-color: transparent}.base.disabled{--text-color: var(--vvd-color-neutral-300);--fill-color: color-mix( in srgb, var(--vvd-color-neutral-800), transparent 87.5% );--outline-color: transparent}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.label{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}slot[name=icon]{font-size:calc(calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 1.5);line-height:1}.icon-placeholder{inline-size:calc(calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 1.5)}.remove-button{display:flex;align-items:center;border-radius:inherit;cursor:pointer;outline:none}.disabled .remove-button{pointer-events:none}.remove-button:focus-visible:before{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}";
|
|
22
23
|
|
|
23
24
|
class _SearchableSelect extends VividElement {
|
|
24
25
|
}
|
|
@@ -53,8 +54,8 @@ const TagGapPx = 8;
|
|
|
53
54
|
const InputMinWidthPx = 100;
|
|
54
55
|
const PageSize = 10;
|
|
55
56
|
const isFormAssociatedTryingToSetFormValue = (value) => typeof value === "string";
|
|
56
|
-
let SearchableSelect = class extends
|
|
57
|
-
Localized(FormAssociatedSearchableSelect)
|
|
57
|
+
let SearchableSelect = class extends DelegatesAria(
|
|
58
|
+
AffixIconWithTrailing(Localized(FormAssociatedSearchableSelect))
|
|
58
59
|
) {
|
|
59
60
|
constructor() {
|
|
60
61
|
super(...arguments);
|
|
@@ -351,6 +352,15 @@ let SearchableSelect = class extends AffixIconWithTrailing(
|
|
|
351
352
|
);
|
|
352
353
|
return option.label;
|
|
353
354
|
}
|
|
355
|
+
/**
|
|
356
|
+
* @internal
|
|
357
|
+
*/
|
|
358
|
+
_tagConnotationForValue(value) {
|
|
359
|
+
const option = this._slottedOptions.find(
|
|
360
|
+
(option2) => option2.value === value
|
|
361
|
+
);
|
|
362
|
+
return option.tagConnotation;
|
|
363
|
+
}
|
|
354
364
|
/**
|
|
355
365
|
* @internal
|
|
356
366
|
*/
|
|
@@ -877,6 +887,9 @@ class OptionTag extends Localized(VividElement) {
|
|
|
877
887
|
__decorateClass([
|
|
878
888
|
attr
|
|
879
889
|
], OptionTag.prototype, "shape");
|
|
890
|
+
__decorateClass([
|
|
891
|
+
observable
|
|
892
|
+
], OptionTag.prototype, "connotation");
|
|
880
893
|
__decorateClass([
|
|
881
894
|
attr
|
|
882
895
|
], OptionTag.prototype, "label");
|
|
@@ -913,6 +926,7 @@ const tagTemplateFactory = (context, getComponent) => {
|
|
|
913
926
|
removable
|
|
914
927
|
:label="${(x, c) => getComponent(c)._tagLabelForValue(x)}"
|
|
915
928
|
:shape="${(_, c) => getComponent(c).shape}"
|
|
929
|
+
:connotation="${(x, c) => getComponent(c)._tagConnotationForValue(x)}"
|
|
916
930
|
?disabled="${(x, c) => getComponent(c)._isTagDisabled(x)}"
|
|
917
931
|
@remove="${(x, c) => getComponent(c)._onTagRemoved(x)}"
|
|
918
932
|
@keydown="${(_, c) => getComponent(c)._onTagKeydown(c.event)}"
|
|
@@ -986,12 +1000,14 @@ function renderFieldset(context) {
|
|
|
986
1000
|
id="control"
|
|
987
1001
|
class="control"
|
|
988
1002
|
autocomplete="off"
|
|
989
|
-
aria-autocomplete="list"
|
|
990
|
-
aria-expanded="${(x) => x.open}"
|
|
991
|
-
aria-haspopup="listbox"
|
|
992
1003
|
aria-controls="listbox"
|
|
1004
|
+
${delegateAria({
|
|
1005
|
+
role: "combobox",
|
|
1006
|
+
ariaAutoComplete: "list",
|
|
1007
|
+
ariaHasPopup: "listbox",
|
|
1008
|
+
ariaExpanded: (x) => x.open
|
|
1009
|
+
})}
|
|
993
1010
|
placeholder="${(x) => x.multiple && x.values.length ? "" : x.placeholder}"
|
|
994
|
-
role="combobox"
|
|
995
1011
|
type="text"
|
|
996
1012
|
?disabled="${(x) => x.disabled}"
|
|
997
1013
|
:value="${(x) => x._inputValue}"
|
|
@@ -1115,11 +1131,12 @@ const SearchableSelectTemplate = (context) => {
|
|
|
1115
1131
|
`;
|
|
1116
1132
|
};
|
|
1117
1133
|
|
|
1118
|
-
const getClasses = ({ shape, disabled, removable }) => classNames(
|
|
1134
|
+
const getClasses = ({ shape, connotation, disabled, removable }) => classNames(
|
|
1119
1135
|
"base",
|
|
1120
1136
|
["disabled", disabled],
|
|
1121
1137
|
["removable", removable],
|
|
1122
|
-
[`shape-${shape}`, Boolean(shape)]
|
|
1138
|
+
[`shape-${shape}`, Boolean(shape)],
|
|
1139
|
+
[`connotation-${connotation}`, Boolean(connotation)]
|
|
1123
1140
|
);
|
|
1124
1141
|
function renderRemoveButton(iconTag) {
|
|
1125
1142
|
return html`
|
package/shared/definition45.cjs
CHANGED
|
@@ -6,6 +6,7 @@ const definition$3 = require('./definition36.cjs');
|
|
|
6
6
|
const vividElement = require('./vivid-element.cjs');
|
|
7
7
|
const applyMixinsWithObservables = require('./applyMixinsWithObservables.cjs');
|
|
8
8
|
const listbox = require('./listbox.cjs');
|
|
9
|
+
const hostSemantics = require('./host-semantics.cjs');
|
|
9
10
|
const formAssociated = require('./form-associated.cjs');
|
|
10
11
|
const numbers = require('./numbers.cjs');
|
|
11
12
|
const affix = require('./affix.cjs');
|
|
@@ -20,7 +21,7 @@ const when = require('./when.cjs');
|
|
|
20
21
|
const slotted = require('./slotted.cjs');
|
|
21
22
|
const classNames = require('./class-names.cjs');
|
|
22
23
|
|
|
23
|
-
const styles = ".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([aria-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:host(:focus-visible){outline:none}:host{display:inline-flex;flex-direction:column;gap:4px;--_low-ink-color: var(--vvd-color-neutral-600);--focus-stroke-gap-color: transparent}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);contain:inline-size;font:var(--vvd-typography-base)}.control{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--
|
|
24
|
+
const styles = ".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([aria-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:host(:focus-visible){outline:none}:host{display:inline-flex;flex-direction:column;gap:4px;--_low-ink-color: var(--vvd-color-neutral-600);--focus-stroke-gap-color: transparent}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);contain:inline-size;font:var(--vvd-typography-base)}.control{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.control.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.control:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.error):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.control:where(.error):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.control:where(.success):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.control:where(.success):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.control{--_connotation-color-primary: var(--vvd-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-select-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-select-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-select-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-select-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-select-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-select-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-select-accent-fierce, var(--vvd-color-neutral-700))}.control{border-radius:var(--_select-control-border-radius);block-size:var(--_select-block-size);padding-inline:var(--_select-padding-inline)}.control{--_select-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_select-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_select-padding-inline: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;display:flex;align-items:center;justify-content:space-between;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);gap:8px;transition:box-shadow .2s,background-color .2s}.control.size-condensed{--_select-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_select-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_select-padding-inline: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) }.control.size-condensed:not(.shape-pill){--_select-control-border-radius: 4px}.control-wrapper{position:relative}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}.control:not(.shape-pill){--_select-control-border-radius: 8px}.control.shape-pill{--_select-control-border-radius: 24px}:host(:focus-visible) .control{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.listbox{display:flex;max-height:var(--select-height, 408px);flex-direction:column;padding:4px;gap:2px;overflow-y:auto}:host([multiple]:focus-visible) .listbox{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));border-radius:8px}.selected-value{display:flex;overflow:hidden;flex-grow:1;align-items:center;column-gap:12px;white-space:nowrap}.selected-value .text{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis}.control.shows-placeholder .selected-value .text{color:var(--vvd-color-neutral-600)}.selected-value slot[name=icon]{flex:0 0 var(--_select-icon-size);font-size:var(--_select-icon-size);line-height:1}.control.has-meta .selected-value{padding-inline-end:8px}.feedback-wrapper{display:contents}::part(popup-base){inline-size:max-content;min-inline-size:var(--_select-fixed-width, 100%)}:host([multiple]) ::part(popup-base){position:static}";
|
|
24
25
|
|
|
25
26
|
class _Select extends listbox.Listbox {
|
|
26
27
|
}
|
|
@@ -41,7 +42,9 @@ var __decorateClass = (decorators, target, key, kind) => {
|
|
|
41
42
|
if (kind && result) __defProp(target, key, result);
|
|
42
43
|
return result;
|
|
43
44
|
};
|
|
44
|
-
exports.Select = class Select extends
|
|
45
|
+
exports.Select = class Select extends hostSemantics.HostSemantics(
|
|
46
|
+
affix.AffixIconWithTrailing(FormAssociatedSelect)
|
|
47
|
+
) {
|
|
45
48
|
constructor() {
|
|
46
49
|
super(...arguments);
|
|
47
50
|
this.activeIndex = -1;
|
|
@@ -852,11 +855,14 @@ const SelectTemplate = (context) => {
|
|
|
852
855
|
return vividElement.html`
|
|
853
856
|
<template
|
|
854
857
|
class="base"
|
|
855
|
-
|
|
856
|
-
|
|
858
|
+
${hostSemantics.applyHostSemantics({
|
|
859
|
+
role: "combobox",
|
|
860
|
+
ariaLabel: (x) => x.ariaLabel ?? x.label,
|
|
861
|
+
ariaHasPopup: (x) => x.collapsible ? "listbox" : "false",
|
|
862
|
+
ariaExpanded: (x) => x.open,
|
|
863
|
+
ariaDisabled: (x) => x.disabled
|
|
864
|
+
})}
|
|
857
865
|
aria-controls="${(x) => x.listboxId}"
|
|
858
|
-
aria-expanded="${(x) => x.open}"
|
|
859
|
-
aria-disabled="${(x) => x.disabled}"
|
|
860
866
|
aria-activedescendant="${(x) => x._activeDescendant}"
|
|
861
867
|
tabindex="${(x) => !x.disabled ? "0" : null}"
|
|
862
868
|
@click="${ifNotFromFeedback((x, e) => x.clickHandler(e))}"
|
package/shared/definition45.js
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { P as Popup, p as popupDefinition } from './definition65.js';
|
|
2
2
|
import { i as iconDefinition } from './definition28.js';
|
|
3
3
|
import { l as listboxOptionDefinition } from './definition36.js';
|
|
4
|
-
import { D as DOM, O as Observable, o as observable, a as attr, v as volatile, h as html,
|
|
4
|
+
import { D as DOM, O as Observable, o as observable, a as attr, v as volatile, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
|
|
5
5
|
import { a as applyMixinsWithObservables } from './applyMixinsWithObservables.js';
|
|
6
6
|
import { L as Listbox } from './listbox.js';
|
|
7
|
+
import { H as HostSemantics, a as applyHostSemantics } from './host-semantics.js';
|
|
7
8
|
import { F as FormAssociated } from './form-associated.js';
|
|
8
9
|
import { i as inRange } from './numbers.js';
|
|
9
10
|
import { A as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
|
|
@@ -18,7 +19,7 @@ import { w as when } from './when.js';
|
|
|
18
19
|
import { s as slotted } from './slotted.js';
|
|
19
20
|
import { c as classNames } from './class-names.js';
|
|
20
21
|
|
|
21
|
-
const styles = ".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([aria-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:host(:focus-visible){outline:none}:host{display:inline-flex;flex-direction:column;gap:4px;--_low-ink-color: var(--vvd-color-neutral-600);--focus-stroke-gap-color: transparent}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);contain:inline-size;font:var(--vvd-typography-base)}.control{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--
|
|
22
|
+
const styles = ".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([aria-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:host(:focus-visible){outline:none}:host{display:inline-flex;flex-direction:column;gap:4px;--_low-ink-color: var(--vvd-color-neutral-600);--focus-stroke-gap-color: transparent}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);contain:inline-size;font:var(--vvd-typography-base)}.control{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.control.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.control:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.error):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.control:where(.error):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.control:where(.success):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.control:where(.success):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.control{--_connotation-color-primary: var(--vvd-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-select-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-select-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-select-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-select-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-select-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-select-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-select-accent-fierce, var(--vvd-color-neutral-700))}.control{border-radius:var(--_select-control-border-radius);block-size:var(--_select-block-size);padding-inline:var(--_select-padding-inline)}.control{--_select-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_select-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_select-padding-inline: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;display:flex;align-items:center;justify-content:space-between;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);gap:8px;transition:box-shadow .2s,background-color .2s}.control.size-condensed{--_select-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_select-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_select-padding-inline: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) }.control.size-condensed:not(.shape-pill){--_select-control-border-radius: 4px}.control-wrapper{position:relative}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}.control:not(.shape-pill){--_select-control-border-radius: 8px}.control.shape-pill{--_select-control-border-radius: 24px}:host(:focus-visible) .control{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.listbox{display:flex;max-height:var(--select-height, 408px);flex-direction:column;padding:4px;gap:2px;overflow-y:auto}:host([multiple]:focus-visible) .listbox{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));border-radius:8px}.selected-value{display:flex;overflow:hidden;flex-grow:1;align-items:center;column-gap:12px;white-space:nowrap}.selected-value .text{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis}.control.shows-placeholder .selected-value .text{color:var(--vvd-color-neutral-600)}.selected-value slot[name=icon]{flex:0 0 var(--_select-icon-size);font-size:var(--_select-icon-size);line-height:1}.control.has-meta .selected-value{padding-inline-end:8px}.feedback-wrapper{display:contents}::part(popup-base){inline-size:max-content;min-inline-size:var(--_select-fixed-width, 100%)}:host([multiple]) ::part(popup-base){position:static}";
|
|
22
23
|
|
|
23
24
|
class _Select extends Listbox {
|
|
24
25
|
}
|
|
@@ -39,7 +40,9 @@ var __decorateClass = (decorators, target, key, kind) => {
|
|
|
39
40
|
if (kind && result) __defProp(target, key, result);
|
|
40
41
|
return result;
|
|
41
42
|
};
|
|
42
|
-
let Select = class extends
|
|
43
|
+
let Select = class extends HostSemantics(
|
|
44
|
+
AffixIconWithTrailing(FormAssociatedSelect)
|
|
45
|
+
) {
|
|
43
46
|
constructor() {
|
|
44
47
|
super(...arguments);
|
|
45
48
|
this.activeIndex = -1;
|
|
@@ -850,11 +853,14 @@ const SelectTemplate = (context) => {
|
|
|
850
853
|
return html`
|
|
851
854
|
<template
|
|
852
855
|
class="base"
|
|
853
|
-
|
|
854
|
-
|
|
856
|
+
${applyHostSemantics({
|
|
857
|
+
role: "combobox",
|
|
858
|
+
ariaLabel: (x) => x.ariaLabel ?? x.label,
|
|
859
|
+
ariaHasPopup: (x) => x.collapsible ? "listbox" : "false",
|
|
860
|
+
ariaExpanded: (x) => x.open,
|
|
861
|
+
ariaDisabled: (x) => x.disabled
|
|
862
|
+
})}
|
|
855
863
|
aria-controls="${(x) => x.listboxId}"
|
|
856
|
-
aria-expanded="${(x) => x.open}"
|
|
857
|
-
aria-disabled="${(x) => x.disabled}"
|
|
858
864
|
aria-activedescendant="${(x) => x._activeDescendant}"
|
|
859
865
|
tabindex="${(x) => !x.disabled ? "0" : null}"
|
|
860
866
|
@click="${ifNotFromFeedback((x, e) => x.clickHandler(e))}"
|
package/shared/definition46.cjs
CHANGED
|
@@ -86,7 +86,12 @@ function checkbox(context) {
|
|
|
86
86
|
(x) => x.controlType !== "radio",
|
|
87
87
|
vividElement.html`
|
|
88
88
|
<${checkboxTag}
|
|
89
|
-
|
|
89
|
+
${delegatesAria.delegateAria(
|
|
90
|
+
{
|
|
91
|
+
ariaLabel: (x) => !x.clickableBox && !x.clickable && x.ariaLabel ? x.ariaLabel : null
|
|
92
|
+
},
|
|
93
|
+
{ onlySpecified: true }
|
|
94
|
+
)}
|
|
90
95
|
@change="${(x) => handleControlChange(x)}"
|
|
91
96
|
class="control checkbox"
|
|
92
97
|
connotation="${(x) => x.connotation === "cta" ? enums.Connotation.CTA : enums.Connotation.Accent}"
|
|
@@ -101,7 +106,12 @@ function radio(context) {
|
|
|
101
106
|
(x) => x.controlType === "radio",
|
|
102
107
|
vividElement.html`
|
|
103
108
|
<${radioTag}
|
|
104
|
-
|
|
109
|
+
${delegatesAria.delegateAria(
|
|
110
|
+
{
|
|
111
|
+
ariaLabel: (x) => !x.clickableBox && !x.clickable && x.ariaLabel ? x.ariaLabel : null
|
|
112
|
+
},
|
|
113
|
+
{ onlySpecified: true }
|
|
114
|
+
)}
|
|
105
115
|
@change="${(x) => handleControlChange(x)}"
|
|
106
116
|
class="control radio"
|
|
107
117
|
connotation="${(x) => x.connotation === "cta" ? enums.Connotation.CTA : enums.Connotation.Accent}"
|
|
@@ -111,13 +121,15 @@ function radio(context) {
|
|
|
111
121
|
)} `;
|
|
112
122
|
}
|
|
113
123
|
const SelectableBoxTemplate = (context) => {
|
|
114
|
-
return vividElement.html`<template
|
|
124
|
+
return vividElement.html`<template>
|
|
115
125
|
<div
|
|
116
126
|
class="${getClasses}"
|
|
117
127
|
tabindex="${(x) => x.clickableBox || x.clickable ? "0" : null}"
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
128
|
+
${delegatesAria.delegateAria({
|
|
129
|
+
role: (x) => x.clickableBox || x.clickable ? "button" : null,
|
|
130
|
+
ariaPressed: (x) => x.clickableBox || x.clickable ? x.checked ? "true" : "false" : null,
|
|
131
|
+
ariaLabel: (x) => x.clickableBox || x.clickable ? x.ariaLabel : null
|
|
132
|
+
})}
|
|
121
133
|
@keydown="${(x, c) => x._handleKeydown(c.event)}"
|
|
122
134
|
@click="${(x) => x.clickableBox || x.clickable ? x._handleCheckedChange() : null}"
|
|
123
135
|
>
|
package/shared/definition46.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { C as Checkbox, c as checkboxDefinition } from './definition15.js';
|
|
2
2
|
import { R as Radio, r as radioDefinition } from './definition41.js';
|
|
3
|
-
import { V as VividElement, a as attr, h as html,
|
|
4
|
-
import { D as DelegatesAria } from './delegates-aria.js';
|
|
3
|
+
import { V as VividElement, a as attr, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
|
|
4
|
+
import { D as DelegatesAria, d as delegateAria } from './delegates-aria.js';
|
|
5
5
|
import { C as Connotation } from './enums.js';
|
|
6
6
|
import { c as classNames } from './class-names.js';
|
|
7
7
|
import { w as when } from './when.js';
|
|
@@ -84,7 +84,12 @@ function checkbox(context) {
|
|
|
84
84
|
(x) => x.controlType !== "radio",
|
|
85
85
|
html`
|
|
86
86
|
<${checkboxTag}
|
|
87
|
-
|
|
87
|
+
${delegateAria(
|
|
88
|
+
{
|
|
89
|
+
ariaLabel: (x) => !x.clickableBox && !x.clickable && x.ariaLabel ? x.ariaLabel : null
|
|
90
|
+
},
|
|
91
|
+
{ onlySpecified: true }
|
|
92
|
+
)}
|
|
88
93
|
@change="${(x) => handleControlChange(x)}"
|
|
89
94
|
class="control checkbox"
|
|
90
95
|
connotation="${(x) => x.connotation === "cta" ? Connotation.CTA : Connotation.Accent}"
|
|
@@ -99,7 +104,12 @@ function radio(context) {
|
|
|
99
104
|
(x) => x.controlType === "radio",
|
|
100
105
|
html`
|
|
101
106
|
<${radioTag}
|
|
102
|
-
|
|
107
|
+
${delegateAria(
|
|
108
|
+
{
|
|
109
|
+
ariaLabel: (x) => !x.clickableBox && !x.clickable && x.ariaLabel ? x.ariaLabel : null
|
|
110
|
+
},
|
|
111
|
+
{ onlySpecified: true }
|
|
112
|
+
)}
|
|
103
113
|
@change="${(x) => handleControlChange(x)}"
|
|
104
114
|
class="control radio"
|
|
105
115
|
connotation="${(x) => x.connotation === "cta" ? Connotation.CTA : Connotation.Accent}"
|
|
@@ -109,13 +119,15 @@ function radio(context) {
|
|
|
109
119
|
)} `;
|
|
110
120
|
}
|
|
111
121
|
const SelectableBoxTemplate = (context) => {
|
|
112
|
-
return html`<template
|
|
122
|
+
return html`<template>
|
|
113
123
|
<div
|
|
114
124
|
class="${getClasses}"
|
|
115
125
|
tabindex="${(x) => x.clickableBox || x.clickable ? "0" : null}"
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
126
|
+
${delegateAria({
|
|
127
|
+
role: (x) => x.clickableBox || x.clickable ? "button" : null,
|
|
128
|
+
ariaPressed: (x) => x.clickableBox || x.clickable ? x.checked ? "true" : "false" : null,
|
|
129
|
+
ariaLabel: (x) => x.clickableBox || x.clickable ? x.ariaLabel : null
|
|
130
|
+
})}
|
|
119
131
|
@keydown="${(x, c) => x._handleKeydown(c.event)}"
|
|
120
132
|
@click="${(x) => x.clickableBox || x.clickable ? x._handleCheckedChange() : null}"
|
|
121
133
|
>
|
package/shared/definition47.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { V as VividElement, a as attr, h as html,
|
|
1
|
+
import { V as VividElement, a as attr, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
|
|
2
2
|
import { h as handleEscapeKeyAndStopPropogation } from './index.js';
|
|
3
3
|
import { c as classNames } from './class-names.js';
|
|
4
4
|
import { w as when } from './when.js';
|
package/shared/definition48.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { p as popupDefinition } from './definition65.js';
|
|
2
|
-
import { V as VividElement, a as attr, o as observable, n as nullableNumberConverter, v as volatile,
|
|
2
|
+
import { V as VividElement, a as attr, o as observable, n as nullableNumberConverter, v as volatile, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
|
|
3
3
|
import { g as keyHome, d as keyEnd, f as keyArrowDown, h as keyArrowLeft, e as keyArrowUp, i as keyArrowRight } from './key-codes.js';
|
|
4
4
|
import { D as Direction, g as getDirection } from './direction.js';
|
|
5
5
|
import { i as inverseLerp, l as lerp, r as roundToStepValue, d as defaultToOneConverter, S as SliderTemplate } from './slider.template.js';
|
package/shared/definition49.cjs
CHANGED
|
@@ -83,7 +83,9 @@ function actionButton(context) {
|
|
|
83
83
|
<button
|
|
84
84
|
${ref.ref("_action")}
|
|
85
85
|
class="control ${getClasses}"
|
|
86
|
-
|
|
86
|
+
${delegatesAria.delegateAria({
|
|
87
|
+
ariaExpanded: null
|
|
88
|
+
})}
|
|
87
89
|
?disabled="${(x) => x.disabled}"
|
|
88
90
|
@click="${(x) => x.$emit("action-click", void 0, {
|
|
89
91
|
bubbles: false
|
|
@@ -102,7 +104,12 @@ function indicatorButton(context) {
|
|
|
102
104
|
class="indicator ${getClasses}"
|
|
103
105
|
?disabled="${(x) => x.disabled}"
|
|
104
106
|
aria-label="${(x) => x.indicatorAriaLabel || x.locale.splitButton.showMoreActionsLabel}"
|
|
105
|
-
|
|
107
|
+
${delegatesAria.delegateAria(
|
|
108
|
+
{
|
|
109
|
+
ariaExpanded: (x) => x.ariaExpanded
|
|
110
|
+
},
|
|
111
|
+
{ onlySpecified: true }
|
|
112
|
+
)}
|
|
106
113
|
@click="${(x) => x.$emit("indicator-click", void 0, {
|
|
107
114
|
bubbles: false
|
|
108
115
|
})}"
|
|
@@ -112,7 +119,7 @@ function indicatorButton(context) {
|
|
|
112
119
|
`;
|
|
113
120
|
}
|
|
114
121
|
const SplitButtonTemplate = (context) => {
|
|
115
|
-
return vividElement.html` <template
|
|
122
|
+
return vividElement.html` <template>
|
|
116
123
|
<div class="base" role="group">
|
|
117
124
|
${actionButton(context)} ${indicatorButton(context)}
|
|
118
125
|
<slot></slot>
|
package/shared/definition49.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { i as iconDefinition } from './definition28.js';
|
|
2
|
-
import { V as VividElement, a as attr, h as html,
|
|
2
|
+
import { V as VividElement, a as attr, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
|
|
3
3
|
import { b as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
|
|
4
|
-
import { D as DelegatesAria } from './delegates-aria.js';
|
|
4
|
+
import { D as DelegatesAria, d as delegateAria } from './delegates-aria.js';
|
|
5
5
|
import { L as Localized } from './localized.js';
|
|
6
6
|
import { r as ref } from './ref.js';
|
|
7
7
|
import { c as classNames } from './class-names.js';
|
|
@@ -81,7 +81,9 @@ function actionButton(context) {
|
|
|
81
81
|
<button
|
|
82
82
|
${ref("_action")}
|
|
83
83
|
class="control ${getClasses}"
|
|
84
|
-
|
|
84
|
+
${delegateAria({
|
|
85
|
+
ariaExpanded: null
|
|
86
|
+
})}
|
|
85
87
|
?disabled="${(x) => x.disabled}"
|
|
86
88
|
@click="${(x) => x.$emit("action-click", void 0, {
|
|
87
89
|
bubbles: false
|
|
@@ -100,7 +102,12 @@ function indicatorButton(context) {
|
|
|
100
102
|
class="indicator ${getClasses}"
|
|
101
103
|
?disabled="${(x) => x.disabled}"
|
|
102
104
|
aria-label="${(x) => x.indicatorAriaLabel || x.locale.splitButton.showMoreActionsLabel}"
|
|
103
|
-
|
|
105
|
+
${delegateAria(
|
|
106
|
+
{
|
|
107
|
+
ariaExpanded: (x) => x.ariaExpanded
|
|
108
|
+
},
|
|
109
|
+
{ onlySpecified: true }
|
|
110
|
+
)}
|
|
104
111
|
@click="${(x) => x.$emit("indicator-click", void 0, {
|
|
105
112
|
bubbles: false
|
|
106
113
|
})}"
|
|
@@ -110,7 +117,7 @@ function indicatorButton(context) {
|
|
|
110
117
|
`;
|
|
111
118
|
}
|
|
112
119
|
const SplitButtonTemplate = (context) => {
|
|
113
|
-
return html` <template
|
|
120
|
+
return html` <template>
|
|
114
121
|
<div class="base" role="group">
|
|
115
122
|
${actionButton(context)} ${indicatorButton(context)}
|
|
116
123
|
<slot></slot>
|
package/shared/definition5.cjs
CHANGED
|
@@ -287,8 +287,13 @@ function renderSlider(context) {
|
|
|
287
287
|
function renderTimestamp() {
|
|
288
288
|
return vividElement.html` <div class="time-stamp">
|
|
289
289
|
<span class="current-time">${(x) => formatTime(x.currentTime)}</span>
|
|
290
|
-
|
|
291
|
-
|
|
290
|
+
${when.when(
|
|
291
|
+
(x) => x.duration && x.duration !== Infinity,
|
|
292
|
+
vividElement.html`
|
|
293
|
+
<span>/</span>
|
|
294
|
+
<span class="total-time">${(x) => formatTime(x.duration)}</span>
|
|
295
|
+
`
|
|
296
|
+
)}
|
|
292
297
|
</div>`;
|
|
293
298
|
}
|
|
294
299
|
function handlePlaybackRateClick(playbackRate, context) {
|