@vonage/vivid 3.50.0 → 3.50.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/accordion/index.cjs +0 -2
- package/accordion/index.js +0 -2
- package/accordion-item/index.cjs +0 -2
- package/accordion-item/index.js +0 -2
- package/alert/index.cjs +1 -3
- package/alert/index.js +1 -3
- package/audio-player/index.cjs +0 -2
- package/audio-player/index.js +0 -2
- package/banner/index.cjs +0 -2
- package/banner/index.js +0 -2
- package/breadcrumb-item/index.cjs +0 -2
- package/breadcrumb-item/index.js +0 -2
- package/button/index.cjs +0 -2
- package/button/index.js +0 -2
- package/card/index.cjs +1 -1
- package/card/index.js +1 -1
- package/checkbox/index.cjs +0 -2
- package/checkbox/index.js +0 -2
- package/combobox/index.cjs +6 -6
- package/combobox/index.js +6 -6
- package/custom-elements.json +33 -187
- package/data-grid/index.cjs +0 -2
- package/data-grid/index.js +0 -2
- package/date-picker/index.cjs +4 -4
- package/date-picker/index.js +4 -4
- package/date-range-picker/index.cjs +3 -3
- package/date-range-picker/index.js +3 -3
- package/dialog/index.cjs +1 -4
- package/dialog/index.js +1 -4
- package/elevation/index.cjs +1 -1
- package/elevation/index.js +1 -1
- package/fab/index.cjs +0 -2
- package/fab/index.js +0 -2
- package/file-picker/index.cjs +1 -2
- package/file-picker/index.js +1 -2
- package/focus/index.cjs +1 -1
- package/focus/index.js +1 -1
- package/header/index.cjs +1 -1
- package/header/index.js +1 -1
- package/index.cjs +3 -3
- package/index.js +3 -3
- package/lib/file-picker/file-picker.d.ts +2 -2
- package/lib/menu/definition.d.ts +2 -2
- package/lib/radio-group/definition.d.ts +2 -2
- package/lib/switch/switch.d.ts +2 -2
- package/listbox/index.cjs +4 -12
- package/listbox/index.js +4 -12
- package/menu/index.cjs +2 -4
- package/menu/index.js +2 -4
- package/menu-item/index.cjs +0 -2
- package/menu-item/index.js +0 -2
- package/nav-disclosure/index.cjs +0 -2
- package/nav-disclosure/index.js +0 -2
- package/nav-item/index.cjs +0 -2
- package/nav-item/index.js +0 -2
- package/number-field/index.cjs +1 -2
- package/number-field/index.js +1 -2
- package/option/index.cjs +0 -5
- package/option/index.js +0 -5
- package/package.json +1 -1
- package/pagination/index.cjs +0 -2
- package/pagination/index.js +0 -2
- package/popup/index.cjs +2 -4
- package/popup/index.js +2 -4
- package/radio/index.cjs +0 -2
- package/radio/index.js +0 -2
- package/select/index.cjs +2 -5
- package/select/index.js +2 -5
- package/selectable-box/index.cjs +0 -3
- package/selectable-box/index.js +0 -3
- package/shared/definition.cjs +2 -6
- package/shared/definition.js +2 -6
- package/shared/definition11.cjs +1 -2
- package/shared/definition11.js +1 -2
- package/shared/definition14.cjs +1 -1
- package/shared/definition14.js +1 -1
- package/shared/definition15.cjs +2 -3
- package/shared/definition15.js +2 -3
- package/shared/definition16.cjs +2 -2
- package/shared/definition16.js +2 -2
- package/shared/definition17.cjs +1 -4
- package/shared/definition17.js +1 -4
- package/shared/definition18.cjs +3 -5
- package/shared/definition18.js +1 -3
- package/shared/definition19.cjs +3 -5
- package/shared/definition19.js +1 -3
- package/shared/definition20.cjs +2 -5
- package/shared/definition20.js +2 -5
- package/shared/definition23.cjs +1 -2
- package/shared/definition23.js +1 -2
- package/shared/definition24.cjs +2 -5
- package/shared/definition24.js +2 -5
- package/shared/definition25.cjs +1 -1
- package/shared/definition25.js +1 -1
- package/shared/definition28.cjs +2 -3
- package/shared/definition28.js +2 -3
- package/shared/definition29.cjs +1 -1
- package/shared/definition29.js +1 -1
- package/shared/definition30.cjs +2 -3
- package/shared/definition30.js +2 -3
- package/shared/definition31.cjs +2 -3
- package/shared/definition31.js +2 -3
- package/shared/definition34.cjs +1 -1
- package/shared/definition34.js +1 -1
- package/shared/definition35.cjs +2 -7
- package/shared/definition35.js +2 -7
- package/shared/definition4.cjs +4 -4
- package/shared/definition4.js +5 -5
- package/shared/definition40.cjs +1 -2
- package/shared/definition40.js +1 -2
- package/shared/definition41.cjs +6 -7
- package/shared/definition41.js +5 -6
- package/shared/definition42.cjs +5 -10
- package/shared/definition42.js +3 -8
- package/shared/definition44.cjs +1 -2
- package/shared/definition44.js +1 -2
- package/shared/definition45.cjs +1 -2
- package/shared/definition45.js +1 -2
- package/shared/definition46.cjs +1 -2
- package/shared/definition46.js +1 -2
- package/shared/definition48.cjs +2 -6
- package/shared/definition48.js +2 -6
- package/shared/definition5.cjs +1 -2
- package/shared/definition5.js +1 -2
- package/shared/definition51.cjs +2 -6
- package/shared/definition51.js +2 -6
- package/shared/definition52.cjs +2 -3
- package/shared/definition52.js +2 -3
- package/shared/definition53.cjs +1 -1
- package/shared/definition53.js +1 -1
- package/shared/definition54.cjs +1 -1
- package/shared/definition54.js +1 -1
- package/shared/definition55.cjs +1 -1
- package/shared/definition55.js +1 -1
- package/shared/definition56.cjs +1 -1
- package/shared/definition56.js +1 -1
- package/shared/definition57.cjs +2 -6
- package/shared/definition57.js +2 -6
- package/shared/definition59.cjs +42 -11
- package/shared/definition59.js +41 -11
- package/shared/definition60.cjs +1782 -23
- package/shared/definition60.js +1781 -22
- package/shared/definition61.cjs +11 -1801
- package/shared/definition61.js +11 -1800
- package/shared/definition9.cjs +1 -2
- package/shared/definition9.js +1 -2
- package/shared/icon.cjs +1 -1
- package/shared/icon.js +1 -1
- package/shared/presentationDate.cjs +6 -11
- package/shared/presentationDate.js +6 -11
- package/shared/text-field.cjs +1 -1
- package/shared/text-field.js +1 -1
- package/slider/index.cjs +0 -2
- package/slider/index.js +0 -2
- package/split-button/index.cjs +0 -2
- package/split-button/index.js +0 -2
- package/styles/core/all.css +1 -1
- package/styles/core/theme.css +1 -1
- package/styles/core/typography.css +1 -1
- package/styles/tokens/theme-dark.css +4 -4
- package/styles/tokens/theme-light.css +4 -4
- package/styles/tokens/vivid-2-compat.css +1 -1
- package/switch/index.cjs +0 -2
- package/switch/index.js +0 -2
- package/tab/index.cjs +0 -3
- package/tab/index.js +0 -3
- package/tabs/index.cjs +0 -3
- package/tabs/index.js +0 -3
- package/tag/index.cjs +0 -3
- package/tag/index.js +0 -3
- package/text-area/index.cjs +0 -2
- package/text-area/index.js +0 -2
- package/text-field/index.cjs +1 -1
- package/text-field/index.js +1 -1
- package/time-picker/index.cjs +3 -3
- package/time-picker/index.js +3 -3
- package/toggletip/index.cjs +2 -4
- package/toggletip/index.js +2 -4
- package/tooltip/index.cjs +2 -4
- package/tooltip/index.js +2 -4
- package/tree-item/index.cjs +0 -3
- package/tree-item/index.js +0 -3
- package/vivid.api.json +6 -42
- package/style.css +0 -1
package/shared/definition35.js
CHANGED
|
@@ -1,13 +1,10 @@
|
|
|
1
1
|
import { F as FoundationElement, O as Observable, _ as __decorate, o as observable, a as attr, h as html, r as registerFactory } from './index.js';
|
|
2
2
|
import { a as iconRegistries } from './definition26.js';
|
|
3
|
-
import { f as focusRegistries } from './definition59.js';
|
|
4
3
|
import { b as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
|
|
5
4
|
import { A as ARIAGlobalStatesAndProperties } from './aria-global.js';
|
|
6
5
|
import { S as StartEnd } from './start-end.js';
|
|
7
6
|
import { a as applyMixins } from './apply-mixins.js';
|
|
8
7
|
import { i as isHTMLElement } from './dom.js';
|
|
9
|
-
import { f as focusTemplateFactory } from './focus2.js';
|
|
10
|
-
import './index2.js';
|
|
11
8
|
import { w as when } from './when.js';
|
|
12
9
|
import { c as classNames } from './class-names.js';
|
|
13
10
|
|
|
@@ -258,7 +255,6 @@ const getClasses = ({
|
|
|
258
255
|
);
|
|
259
256
|
const ListboxOptionTemplate = (context) => {
|
|
260
257
|
const affixIconTemplate = affixIconTemplateFactory(context);
|
|
261
|
-
const focusTemplate = focusTemplateFactory(context);
|
|
262
258
|
return html`
|
|
263
259
|
<template
|
|
264
260
|
aria-checked="${(x) => x.ariaChecked}"
|
|
@@ -268,7 +264,6 @@ const ListboxOptionTemplate = (context) => {
|
|
|
268
264
|
aria-setsize="${(x) => x.ariaSetSize}"
|
|
269
265
|
role="option">
|
|
270
266
|
<div class="${getClasses}">
|
|
271
|
-
${() => focusTemplate}
|
|
272
267
|
${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)}
|
|
273
268
|
${when((x) => x.text, html`<div class="text">${(x) => x.text}</div>`)}
|
|
274
269
|
</div>
|
|
@@ -276,14 +271,14 @@ const ListboxOptionTemplate = (context) => {
|
|
|
276
271
|
`;
|
|
277
272
|
};
|
|
278
273
|
|
|
279
|
-
const styles = ":host([disabled]){cursor:not-allowed}.base{
|
|
274
|
+
const styles = ":host([disabled]){cursor:not-allowed}.base{display:flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);border-radius:8px;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_option-appearance-color-text, var(--_appearance-color-text));font:var(--vvd-typography-base);gap:12px;hyphens:auto;inline-size:100%;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-inline:16px;vertical-align:middle;word-break:break-word}.base{--_connotation-color-primary: var(--vvd-option-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-option-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-option-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-faint: var(--vvd-option-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-option-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-option-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-option-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(:disabled,.disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(:active,.active):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected,[aria-current]):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base:where(.selected,[aria-current]):where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-pale);--_appearance-color-outline: transparent}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.base .text{font:var(--vvd-typography-base)}:host([aria-checked=true]) .base{--focus-stroke-color: var(--vvd-color-neutral-500);--focus-stroke-gap-color: transparent;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}slot[name=icon]{font-size:20px;line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}\n";
|
|
280
275
|
|
|
281
276
|
const listboxOptionDefinition = ListboxOption.compose({
|
|
282
277
|
baseName: "option",
|
|
283
278
|
template: ListboxOptionTemplate,
|
|
284
279
|
styles
|
|
285
280
|
});
|
|
286
|
-
const listboxOptionRegistries = [listboxOptionDefinition(), ...iconRegistries
|
|
281
|
+
const listboxOptionRegistries = [listboxOptionDefinition(), ...iconRegistries];
|
|
287
282
|
const registerOption = registerFactory(listboxOptionRegistries);
|
|
288
283
|
|
|
289
284
|
export { ListboxOption as L, listboxOptionRegistries as a, isListboxOption as i, listboxOptionDefinition as l, registerOption as r };
|
package/shared/definition4.cjs
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
const index = require('./index.cjs');
|
|
4
4
|
const definition$2 = require('./definition11.cjs');
|
|
5
|
-
const definition = require('./
|
|
5
|
+
const definition = require('./definition59.cjs');
|
|
6
6
|
const definition$1 = require('./definition26.cjs');
|
|
7
7
|
const enums = require('./enums.cjs');
|
|
8
8
|
const affix = require('./affix.cjs');
|
|
@@ -13,7 +13,7 @@ const button = require('./button.cjs');
|
|
|
13
13
|
const when = require('./when.cjs');
|
|
14
14
|
const classNames = require('./class-names.cjs');
|
|
15
15
|
|
|
16
|
-
const styles = ".control{position:fixed;z-index:10;border-radius:8px;inline-size:max-content;inset-block-end:0;inset-inline-end:0;inset-inline-start:0;margin-block:16px;margin-inline:auto;max-inline-size:var(--alert-max-inline-size, fit-content);min-inline-size:var(--alert-min-inline-size, 420px);transition:opacity .15s cubic-bezier(0,0,.2,1) 0ms,transform .15s cubic-bezier(0,0,.2,1) 0ms}.control.placement-top,.control.placement-top-start,.control.placement-top-end{inset-block-end:auto;inset-block-start:0}.control.placement-top-start,.control.placement-bottom-start{right:auto;inset-inline-end:auto;margin-inline:16px}.control.placement-top-end,.control.placement-bottom-end{inset-inline-start:auto;margin-inline:16px}.control:where(.strategy-static){position:static;margin:0;inline-size:auto}.control:not(.open){opacity:0;transform:scale(.8)}.control.open{opacity:1;transform:scale(1)}.base{display:flex;align-items:center;padding:16px;background-color:var(--vvd-color-neutral-50);border-radius:8px;color:var(--vvd-color-canvas-text);column-gap:16px}.base.connotation-success{--_connotation-color-primary: var(--vvd-alert-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-alert-success-primary-text, var(--vvd-color-canvas))}.base.connotation-information{--_connotation-color-primary: var(--vvd-alert-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-alert-information-primary-text, var(--vvd-color-canvas))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-alert-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-alert-alert-primary-text, var(--vvd-color-canvas))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-alert-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-alert-warning-primary-text, var(--vvd-color-canvas-text))}.base:not(.connotation-success,.connotation-information,.connotation-alert,.connotation-warning){--_connotation-color-primary: var(--vvd-alert-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-alert-accent-primary-text, var(--vvd-color-canvas))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base .alert-text{margin-inline-end:auto}.base .alert-text .headline{font:var(--vvd-typography-base-bold);margin-block-end:4px}.base .alert-text .main-text{font:var(--vvd-typography-base)}.base
|
|
16
|
+
const styles = ".control{position:fixed;z-index:10;border-radius:8px;inline-size:max-content;inset-block-end:0;inset-inline-end:0;inset-inline-start:0;margin-block:16px;margin-inline:auto;max-inline-size:var(--alert-max-inline-size, fit-content);min-inline-size:var(--alert-min-inline-size, 420px);transition:opacity .15s cubic-bezier(0,0,.2,1) 0ms,transform .15s cubic-bezier(0,0,.2,1) 0ms}.control.placement-top,.control.placement-top-start,.control.placement-top-end{inset-block-end:auto;inset-block-start:0}.control.placement-top-start,.control.placement-bottom-start{right:auto;inset-inline-end:auto;margin-inline:16px}.control.placement-top-end,.control.placement-bottom-end{inset-inline-start:auto;margin-inline:16px}.control:where(.strategy-static){position:static;margin:0;inline-size:auto}.control:not(.open){opacity:0;transform:scale(.8)}.control.open{opacity:1;transform:scale(1)}.base{display:flex;align-items:center;padding:16px;background-color:var(--vvd-color-neutral-50);border-radius:8px;color:var(--vvd-color-canvas-text);column-gap:16px}.base.connotation-success{--_connotation-color-primary: var(--vvd-alert-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-alert-success-primary-text, var(--vvd-color-canvas))}.base.connotation-information{--_connotation-color-primary: var(--vvd-alert-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-alert-information-primary-text, var(--vvd-color-canvas))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-alert-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-alert-alert-primary-text, var(--vvd-color-canvas))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-alert-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-alert-warning-primary-text, var(--vvd-color-canvas-text))}.base:not(.connotation-success,.connotation-information,.connotation-alert,.connotation-warning){--_connotation-color-primary: var(--vvd-alert-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-alert-accent-primary-text, var(--vvd-color-canvas))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base .alert-text{margin-inline-end:auto}.base .alert-text .headline{font:var(--vvd-typography-base-bold);margin-block-end:4px}.base .alert-text .main-text{font:var(--vvd-typography-base)}.base slot[name=icon]{flex-shrink:0;color:var(--_appearance-color-fill);font-size:24px;line-height:1}.base .dismiss-button{border-left:1px solid var(--vvd-color-neutral-200);padding-inline-start:8px}\n";
|
|
17
17
|
|
|
18
18
|
var __defProp = Object.defineProperty;
|
|
19
19
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
@@ -149,7 +149,7 @@ const getControlClasses = ({ open, placement, strategy }) => classNames.classNam
|
|
|
149
149
|
);
|
|
150
150
|
function renderIcon(context) {
|
|
151
151
|
const affixIconTemplate = affix.affixIconTemplateFactory(context);
|
|
152
|
-
return index.html`${(x) => affixIconTemplate(x.conditionedIcon)}`;
|
|
152
|
+
return index.html`${(x) => affixIconTemplate(x.conditionedIcon, affix.IconWrapper.Slot)}`;
|
|
153
153
|
}
|
|
154
154
|
function renderDismissButton(buttonTag) {
|
|
155
155
|
return index.html`
|
|
@@ -172,7 +172,7 @@ const AlertTemplate = (context) => {
|
|
|
172
172
|
aria-live="assertive"
|
|
173
173
|
>
|
|
174
174
|
<div part="vvd-theme-alternate" class="${getClasses}">
|
|
175
|
-
${
|
|
175
|
+
${renderIcon(context)}
|
|
176
176
|
<div class="alert-text">
|
|
177
177
|
${when.when((x) => x.headline, index.html`<header class="headline">${(x) => x.headline}</header>`)}
|
|
178
178
|
${when.when((x) => x.text, index.html`<div class="main-text">${(x) => x.text}</div>`)}
|
package/shared/definition4.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { a as attr, F as FoundationElement, n as nullableNumberConverter, h as html, r as registerFactory } from './index.js';
|
|
2
2
|
import { a as buttonRegistries } from './definition11.js';
|
|
3
|
-
import { E as Elevation, e as elevationRegistries } from './
|
|
3
|
+
import { E as Elevation, e as elevationRegistries } from './definition59.js';
|
|
4
4
|
import { a as iconRegistries } from './definition26.js';
|
|
5
5
|
import { C as Connotation } from './enums.js';
|
|
6
|
-
import { A as AffixIcon, a as affixIconTemplateFactory } from './affix.js';
|
|
6
|
+
import { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
|
|
7
7
|
import './index2.js';
|
|
8
8
|
import { L as Localized } from './localized.js';
|
|
9
9
|
import { a as applyMixins } from './apply-mixins.js';
|
|
@@ -11,7 +11,7 @@ import { B as Button$1 } from './button.js';
|
|
|
11
11
|
import { w as when } from './when.js';
|
|
12
12
|
import { c as classNames } from './class-names.js';
|
|
13
13
|
|
|
14
|
-
const styles = ".control{position:fixed;z-index:10;border-radius:8px;inline-size:max-content;inset-block-end:0;inset-inline-end:0;inset-inline-start:0;margin-block:16px;margin-inline:auto;max-inline-size:var(--alert-max-inline-size, fit-content);min-inline-size:var(--alert-min-inline-size, 420px);transition:opacity .15s cubic-bezier(0,0,.2,1) 0ms,transform .15s cubic-bezier(0,0,.2,1) 0ms}.control.placement-top,.control.placement-top-start,.control.placement-top-end{inset-block-end:auto;inset-block-start:0}.control.placement-top-start,.control.placement-bottom-start{right:auto;inset-inline-end:auto;margin-inline:16px}.control.placement-top-end,.control.placement-bottom-end{inset-inline-start:auto;margin-inline:16px}.control:where(.strategy-static){position:static;margin:0;inline-size:auto}.control:not(.open){opacity:0;transform:scale(.8)}.control.open{opacity:1;transform:scale(1)}.base{display:flex;align-items:center;padding:16px;background-color:var(--vvd-color-neutral-50);border-radius:8px;color:var(--vvd-color-canvas-text);column-gap:16px}.base.connotation-success{--_connotation-color-primary: var(--vvd-alert-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-alert-success-primary-text, var(--vvd-color-canvas))}.base.connotation-information{--_connotation-color-primary: var(--vvd-alert-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-alert-information-primary-text, var(--vvd-color-canvas))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-alert-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-alert-alert-primary-text, var(--vvd-color-canvas))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-alert-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-alert-warning-primary-text, var(--vvd-color-canvas-text))}.base:not(.connotation-success,.connotation-information,.connotation-alert,.connotation-warning){--_connotation-color-primary: var(--vvd-alert-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-alert-accent-primary-text, var(--vvd-color-canvas))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base .alert-text{margin-inline-end:auto}.base .alert-text .headline{font:var(--vvd-typography-base-bold);margin-block-end:4px}.base .alert-text .main-text{font:var(--vvd-typography-base)}.base
|
|
14
|
+
const styles = ".control{position:fixed;z-index:10;border-radius:8px;inline-size:max-content;inset-block-end:0;inset-inline-end:0;inset-inline-start:0;margin-block:16px;margin-inline:auto;max-inline-size:var(--alert-max-inline-size, fit-content);min-inline-size:var(--alert-min-inline-size, 420px);transition:opacity .15s cubic-bezier(0,0,.2,1) 0ms,transform .15s cubic-bezier(0,0,.2,1) 0ms}.control.placement-top,.control.placement-top-start,.control.placement-top-end{inset-block-end:auto;inset-block-start:0}.control.placement-top-start,.control.placement-bottom-start{right:auto;inset-inline-end:auto;margin-inline:16px}.control.placement-top-end,.control.placement-bottom-end{inset-inline-start:auto;margin-inline:16px}.control:where(.strategy-static){position:static;margin:0;inline-size:auto}.control:not(.open){opacity:0;transform:scale(.8)}.control.open{opacity:1;transform:scale(1)}.base{display:flex;align-items:center;padding:16px;background-color:var(--vvd-color-neutral-50);border-radius:8px;color:var(--vvd-color-canvas-text);column-gap:16px}.base.connotation-success{--_connotation-color-primary: var(--vvd-alert-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-alert-success-primary-text, var(--vvd-color-canvas))}.base.connotation-information{--_connotation-color-primary: var(--vvd-alert-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-alert-information-primary-text, var(--vvd-color-canvas))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-alert-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-alert-alert-primary-text, var(--vvd-color-canvas))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-alert-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-alert-warning-primary-text, var(--vvd-color-canvas-text))}.base:not(.connotation-success,.connotation-information,.connotation-alert,.connotation-warning){--_connotation-color-primary: var(--vvd-alert-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-alert-accent-primary-text, var(--vvd-color-canvas))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base .alert-text{margin-inline-end:auto}.base .alert-text .headline{font:var(--vvd-typography-base-bold);margin-block-end:4px}.base .alert-text .main-text{font:var(--vvd-typography-base)}.base slot[name=icon]{flex-shrink:0;color:var(--_appearance-color-fill);font-size:24px;line-height:1}.base .dismiss-button{border-left:1px solid var(--vvd-color-neutral-200);padding-inline-start:8px}\n";
|
|
15
15
|
|
|
16
16
|
var __defProp = Object.defineProperty;
|
|
17
17
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
@@ -147,7 +147,7 @@ const getControlClasses = ({ open, placement, strategy }) => classNames(
|
|
|
147
147
|
);
|
|
148
148
|
function renderIcon(context) {
|
|
149
149
|
const affixIconTemplate = affixIconTemplateFactory(context);
|
|
150
|
-
return html`${(x) => affixIconTemplate(x.conditionedIcon)}`;
|
|
150
|
+
return html`${(x) => affixIconTemplate(x.conditionedIcon, IconWrapper.Slot)}`;
|
|
151
151
|
}
|
|
152
152
|
function renderDismissButton(buttonTag) {
|
|
153
153
|
return html`
|
|
@@ -170,7 +170,7 @@ const AlertTemplate = (context) => {
|
|
|
170
170
|
aria-live="assertive"
|
|
171
171
|
>
|
|
172
172
|
<div part="vvd-theme-alternate" class="${getClasses}">
|
|
173
|
-
${
|
|
173
|
+
${renderIcon(context)}
|
|
174
174
|
<div class="alert-text">
|
|
175
175
|
${when((x) => x.headline, html`<header class="headline">${(x) => x.headline}</header>`)}
|
|
176
176
|
${when((x) => x.text, html`<div class="main-text">${(x) => x.text}</div>`)}
|
package/shared/definition40.cjs
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
const index = require('./index.cjs');
|
|
4
|
-
const definition = require('./definition59.cjs');
|
|
5
4
|
const radio = require('./radio.cjs');
|
|
6
5
|
const when = require('./when.cjs');
|
|
7
6
|
const classNames = require('./class-names.cjs');
|
|
@@ -38,7 +37,7 @@ const radioDefinition = radio.Radio.compose({
|
|
|
38
37
|
template: RadioTemplate,
|
|
39
38
|
styles
|
|
40
39
|
});
|
|
41
|
-
const radioRegistries = [radioDefinition()
|
|
40
|
+
const radioRegistries = [radioDefinition()];
|
|
42
41
|
const registerRadio = index.registerFactory(radioRegistries);
|
|
43
42
|
|
|
44
43
|
exports.radioDefinition = radioDefinition;
|
package/shared/definition40.js
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { h as html, r as registerFactory } from './index.js';
|
|
2
|
-
import { f as focusRegistries } from './definition59.js';
|
|
3
2
|
import { R as Radio } from './radio.js';
|
|
4
3
|
import { w as when } from './when.js';
|
|
5
4
|
import { c as classNames } from './class-names.js';
|
|
@@ -36,7 +35,7 @@ const radioDefinition = Radio.compose({
|
|
|
36
35
|
template: RadioTemplate,
|
|
37
36
|
styles
|
|
38
37
|
});
|
|
39
|
-
const radioRegistries = [radioDefinition()
|
|
38
|
+
const radioRegistries = [radioDefinition()];
|
|
40
39
|
const registerRadio = registerFactory(radioRegistries);
|
|
41
40
|
|
|
42
41
|
export { radioRegistries as a, registerRadio as b, radioDefinition as r };
|
package/shared/definition41.cjs
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
const index = require('./index.cjs');
|
|
4
|
-
const definition
|
|
5
|
-
const definition = require('./
|
|
6
|
-
const definition$3 = require('./definition26.cjs');
|
|
4
|
+
const definition = require('./definition60.cjs');
|
|
5
|
+
const definition$2 = require('./definition26.cjs');
|
|
7
6
|
const definition$1 = require('./definition35.cjs');
|
|
8
7
|
const affix = require('./affix.cjs');
|
|
9
8
|
const index$1 = require('./index2.cjs');
|
|
@@ -516,7 +515,7 @@ index.__decorate([
|
|
|
516
515
|
applyMixins.applyMixins(DelegatesARIASelect, listbox.DelegatesARIAListbox);
|
|
517
516
|
applyMixins.applyMixins(Select$1, startEnd.StartEnd, DelegatesARIASelect);
|
|
518
517
|
|
|
519
|
-
const styles = "@supports selector(:focus-visible){: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{display:flex;align-items:center;justify-content:space-between;background-color:var(--_appearance-color-fill);block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));border-radius:var(--_select-control-border-radius);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:8px;padding-inline:16px;transition:box-shadow .2s,background-color .2s}.control{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.control.appearance-ghost{--_appearance-color-text: var(--_connotation-color-primary);--_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(--_connotation-color-fierce)}.control:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-primary);--_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.
|
|
518
|
+
const styles = "@supports selector(:focus-visible){: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{display:flex;align-items:center;justify-content:space-between;background-color:var(--_appearance-color-fill);block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));border-radius:var(--_select-control-border-radius);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:8px;padding-inline:16px;transition:box-shadow .2s,background-color .2s}.control{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.control.appearance-ghost{--_appearance-color-text: var(--_connotation-color-primary);--_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(--_connotation-color-fierce)}.control:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-primary);--_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-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-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:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - 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:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));border-radius:8px}.icon{display:flex;flex-shrink:0}.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}.selected-value slot[name=icon]{flex:0 0 20px;font-size:20px;line-height:1}.control.has-meta .selected-value{padding-inline-end:8px}::part(popup-base){inline-size:max-content;min-inline-size:var(--_select-fixed-width, 100%)}:host([multiple]) ::part(popup-base){position:static}\n";
|
|
520
519
|
|
|
521
520
|
var __defProp = Object.defineProperty;
|
|
522
521
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
@@ -596,8 +595,8 @@ const getStateClasses = ({
|
|
|
596
595
|
[`appearance-${appearance}`, Boolean(appearance)],
|
|
597
596
|
[`shape-${shape}`, Boolean(shape)],
|
|
598
597
|
["has-meta", Boolean(metaSlottedContent?.length)],
|
|
599
|
-
["error
|
|
600
|
-
["success
|
|
598
|
+
["error", Boolean(errorValidationMessage)],
|
|
599
|
+
["success", !!successText],
|
|
601
600
|
["has-meta", Boolean(metaSlottedContent?.length)]
|
|
602
601
|
);
|
|
603
602
|
function renderLabel() {
|
|
@@ -686,7 +685,7 @@ const selectDefinition = Select.compose({
|
|
|
686
685
|
template: SelectTemplate,
|
|
687
686
|
styles
|
|
688
687
|
});
|
|
689
|
-
const selectRegistries = [selectDefinition(), ...definition
|
|
688
|
+
const selectRegistries = [selectDefinition(), ...definition.popupRegistries, ...definition$2.iconRegistries, ...definition$1.listboxOptionRegistries];
|
|
690
689
|
const registerSelect = index.registerFactory(selectRegistries);
|
|
691
690
|
|
|
692
691
|
exports.registerSelect = registerSelect;
|
package/shared/definition41.js
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { D as DOM, O as Observable, _ as __decorate, a as attr, v as volatile, o as observable, h as html, r as registerFactory } from './index.js';
|
|
2
|
-
import {
|
|
3
|
-
import { P as Popup, p as popupRegistries } from './definition61.js';
|
|
2
|
+
import { P as Popup, p as popupRegistries } from './definition60.js';
|
|
4
3
|
import { a as iconRegistries } from './definition26.js';
|
|
5
4
|
import { L as ListboxOption, a as listboxOptionRegistries } from './definition35.js';
|
|
6
5
|
import { b as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
|
|
@@ -514,7 +513,7 @@ __decorate([
|
|
|
514
513
|
applyMixins(DelegatesARIASelect, DelegatesARIAListbox);
|
|
515
514
|
applyMixins(Select$1, StartEnd, DelegatesARIASelect);
|
|
516
515
|
|
|
517
|
-
const styles = "@supports selector(:focus-visible){: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{display:flex;align-items:center;justify-content:space-between;background-color:var(--_appearance-color-fill);block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));border-radius:var(--_select-control-border-radius);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:8px;padding-inline:16px;transition:box-shadow .2s,background-color .2s}.control{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.control.appearance-ghost{--_appearance-color-text: var(--_connotation-color-primary);--_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(--_connotation-color-fierce)}.control:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-primary);--_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.
|
|
516
|
+
const styles = "@supports selector(:focus-visible){: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{display:flex;align-items:center;justify-content:space-between;background-color:var(--_appearance-color-fill);block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));border-radius:var(--_select-control-border-radius);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:8px;padding-inline:16px;transition:box-shadow .2s,background-color .2s}.control{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.control.appearance-ghost{--_appearance-color-text: var(--_connotation-color-primary);--_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(--_connotation-color-fierce)}.control:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-primary);--_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-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-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:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - 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:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));border-radius:8px}.icon{display:flex;flex-shrink:0}.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}.selected-value slot[name=icon]{flex:0 0 20px;font-size:20px;line-height:1}.control.has-meta .selected-value{padding-inline-end:8px}::part(popup-base){inline-size:max-content;min-inline-size:var(--_select-fixed-width, 100%)}:host([multiple]) ::part(popup-base){position:static}\n";
|
|
518
517
|
|
|
519
518
|
var __defProp = Object.defineProperty;
|
|
520
519
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
@@ -594,8 +593,8 @@ const getStateClasses = ({
|
|
|
594
593
|
[`appearance-${appearance}`, Boolean(appearance)],
|
|
595
594
|
[`shape-${shape}`, Boolean(shape)],
|
|
596
595
|
["has-meta", Boolean(metaSlottedContent?.length)],
|
|
597
|
-
["error
|
|
598
|
-
["success
|
|
596
|
+
["error", Boolean(errorValidationMessage)],
|
|
597
|
+
["success", !!successText],
|
|
599
598
|
["has-meta", Boolean(metaSlottedContent?.length)]
|
|
600
599
|
);
|
|
601
600
|
function renderLabel() {
|
|
@@ -684,7 +683,7 @@ const selectDefinition = Select.compose({
|
|
|
684
683
|
template: SelectTemplate,
|
|
685
684
|
styles
|
|
686
685
|
});
|
|
687
|
-
const selectRegistries = [selectDefinition(), ...
|
|
686
|
+
const selectRegistries = [selectDefinition(), ...popupRegistries, ...iconRegistries, ...listboxOptionRegistries];
|
|
688
687
|
const registerSelect = registerFactory(selectRegistries);
|
|
689
688
|
|
|
690
689
|
export { selectRegistries as a, registerSelect as r, selectDefinition as s };
|
package/shared/definition42.cjs
CHANGED
|
@@ -2,15 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
const index = require('./index.cjs');
|
|
4
4
|
const definition = require('./definition15.cjs');
|
|
5
|
-
const definition$1 = require('./
|
|
6
|
-
const definition$2 = require('./definition40.cjs');
|
|
7
|
-
const focus = require('./focus2.cjs');
|
|
5
|
+
const definition$1 = require('./definition40.cjs');
|
|
8
6
|
const enums = require('./enums.cjs');
|
|
9
7
|
const radio$1 = require('./radio.cjs');
|
|
10
8
|
const classNames = require('./class-names.cjs');
|
|
11
9
|
const when = require('./when.cjs');
|
|
12
10
|
|
|
13
|
-
const styles = "
|
|
11
|
+
const styles = ":host{display:flex}.base{position:relative;padding:var(--selectable-box-spacing, 16px);border:1px solid var(--_appearance-color-outline);background-color:var(--_appearance-color-fill);border-radius:8px;inline-size:100%;padding-block-start:calc(var(--selectable-box-spacing, 16px) + 36px);text-align:start}.base.connotation-cta{--_connotation-color-firm: var(--vvd-selectable-box-cta-firm, var(--vvd-color-cta-600));--_connotation-color-pale: var(--vvd-selectable-box-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-selectable-box-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-faint: var(--vvd-selectable-box-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-selectable-box-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-firm: var(--vvd-selectable-box-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-pale: var(--vvd-selectable-box-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-selectable-box-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-selectable-box-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-selectable-box-accent-soft, var(--vvd-color-neutral-100))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm)}.base:where(.selected,[aria-current]):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(.selected,[aria-current]):where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm)}.base:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}.base.tight{overflow:hidden;min-height:calc(var(--selectable-box-spacing, 16px) * 2 + 22px);padding:0}.base.clickable{cursor:pointer}.control{position:absolute;inset-block-start:var(--selectable-box-spacing, 16px);inset-inline-end:var(--selectable-box-spacing, 16px)}\n";
|
|
14
12
|
|
|
15
13
|
var __defProp = Object.defineProperty;
|
|
16
14
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
@@ -91,7 +89,7 @@ function checkbox(context) {
|
|
|
91
89
|
<${checkboxTag}
|
|
92
90
|
aria-label="${(x) => !x.clickableBox && !x.clickable && x.ariaLabel ? x.ariaLabel : null}"
|
|
93
91
|
@change="${(x) => handleControlChange(x)}"
|
|
94
|
-
class="control checkbox"
|
|
92
|
+
class="control checkbox"
|
|
95
93
|
connotation="${(x) => x.connotation === "cta" ? enums.Connotation.CTA : enums.Connotation.Accent}"
|
|
96
94
|
:checked="${(x) => x.checked}"
|
|
97
95
|
inert="${(x) => x.clickableBox || x.clickable ? true : null}"
|
|
@@ -104,7 +102,7 @@ function radio(context) {
|
|
|
104
102
|
<${radioTag}
|
|
105
103
|
aria-label="${(x) => !x.clickableBox && !x.clickable && x.ariaLabel ? x.ariaLabel : null}"
|
|
106
104
|
@change="${(x) => handleControlChange(x)}"
|
|
107
|
-
class="control radio"
|
|
105
|
+
class="control radio"
|
|
108
106
|
connotation="${(x) => x.connotation === "cta" ? enums.Connotation.CTA : enums.Connotation.Accent}"
|
|
109
107
|
:checked="${(x) => x.checked}"
|
|
110
108
|
inert="${(x) => x.clickableBox || x.clickable ? true : null}"
|
|
@@ -112,7 +110,6 @@ function radio(context) {
|
|
|
112
110
|
`;
|
|
113
111
|
}
|
|
114
112
|
const SelectableBoxTemplate = (context) => {
|
|
115
|
-
const focusTemplate = focus.focusTemplateFactory(context);
|
|
116
113
|
return index.html`<template role="presentation">
|
|
117
114
|
<div
|
|
118
115
|
class="${getClasses}"
|
|
@@ -123,7 +120,6 @@ const SelectableBoxTemplate = (context) => {
|
|
|
123
120
|
@keydown="${(x, c) => x._handleKeydown(c.event)}"
|
|
124
121
|
@click="${(x) => x.clickableBox || x.clickable ? x._handleCheckedChange() : null}"
|
|
125
122
|
>
|
|
126
|
-
${(x) => x.clickableBox || x.clickable ? focusTemplate : ""}
|
|
127
123
|
${checkbox(context)}
|
|
128
124
|
${radio(context)}
|
|
129
125
|
<slot></slot>
|
|
@@ -142,8 +138,7 @@ const selectableBoxDefinition = SelectableBox.compose({
|
|
|
142
138
|
const selectableBoxRegistries = [
|
|
143
139
|
selectableBoxDefinition(),
|
|
144
140
|
...definition.checkboxRegistries,
|
|
145
|
-
...definition$1.
|
|
146
|
-
...definition$2.radioRegistries
|
|
141
|
+
...definition$1.radioRegistries
|
|
147
142
|
];
|
|
148
143
|
const registerSelectableBox = index.registerFactory(selectableBoxRegistries);
|
|
149
144
|
|
package/shared/definition42.js
CHANGED
|
@@ -1,14 +1,12 @@
|
|
|
1
1
|
import { a as attr, F as FoundationElement, h as html, r as registerFactory } from './index.js';
|
|
2
2
|
import { C as Checkbox, a as checkboxRegistries } from './definition15.js';
|
|
3
|
-
import { f as focusRegistries } from './definition59.js';
|
|
4
3
|
import { a as radioRegistries } from './definition40.js';
|
|
5
|
-
import { f as focusTemplateFactory } from './focus2.js';
|
|
6
4
|
import { C as Connotation } from './enums.js';
|
|
7
5
|
import { R as Radio } from './radio.js';
|
|
8
6
|
import { c as classNames } from './class-names.js';
|
|
9
7
|
import { w as when } from './when.js';
|
|
10
8
|
|
|
11
|
-
const styles = "
|
|
9
|
+
const styles = ":host{display:flex}.base{position:relative;padding:var(--selectable-box-spacing, 16px);border:1px solid var(--_appearance-color-outline);background-color:var(--_appearance-color-fill);border-radius:8px;inline-size:100%;padding-block-start:calc(var(--selectable-box-spacing, 16px) + 36px);text-align:start}.base.connotation-cta{--_connotation-color-firm: var(--vvd-selectable-box-cta-firm, var(--vvd-color-cta-600));--_connotation-color-pale: var(--vvd-selectable-box-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-selectable-box-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-faint: var(--vvd-selectable-box-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-selectable-box-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-firm: var(--vvd-selectable-box-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-pale: var(--vvd-selectable-box-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-selectable-box-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-selectable-box-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-selectable-box-accent-soft, var(--vvd-color-neutral-100))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm)}.base:where(.selected,[aria-current]):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(.selected,[aria-current]):where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm)}.base:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}.base.tight{overflow:hidden;min-height:calc(var(--selectable-box-spacing, 16px) * 2 + 22px);padding:0}.base.clickable{cursor:pointer}.control{position:absolute;inset-block-start:var(--selectable-box-spacing, 16px);inset-inline-end:var(--selectable-box-spacing, 16px)}\n";
|
|
12
10
|
|
|
13
11
|
var __defProp = Object.defineProperty;
|
|
14
12
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
@@ -89,7 +87,7 @@ function checkbox(context) {
|
|
|
89
87
|
<${checkboxTag}
|
|
90
88
|
aria-label="${(x) => !x.clickableBox && !x.clickable && x.ariaLabel ? x.ariaLabel : null}"
|
|
91
89
|
@change="${(x) => handleControlChange(x)}"
|
|
92
|
-
class="control checkbox"
|
|
90
|
+
class="control checkbox"
|
|
93
91
|
connotation="${(x) => x.connotation === "cta" ? Connotation.CTA : Connotation.Accent}"
|
|
94
92
|
:checked="${(x) => x.checked}"
|
|
95
93
|
inert="${(x) => x.clickableBox || x.clickable ? true : null}"
|
|
@@ -102,7 +100,7 @@ function radio(context) {
|
|
|
102
100
|
<${radioTag}
|
|
103
101
|
aria-label="${(x) => !x.clickableBox && !x.clickable && x.ariaLabel ? x.ariaLabel : null}"
|
|
104
102
|
@change="${(x) => handleControlChange(x)}"
|
|
105
|
-
class="control radio"
|
|
103
|
+
class="control radio"
|
|
106
104
|
connotation="${(x) => x.connotation === "cta" ? Connotation.CTA : Connotation.Accent}"
|
|
107
105
|
:checked="${(x) => x.checked}"
|
|
108
106
|
inert="${(x) => x.clickableBox || x.clickable ? true : null}"
|
|
@@ -110,7 +108,6 @@ function radio(context) {
|
|
|
110
108
|
`;
|
|
111
109
|
}
|
|
112
110
|
const SelectableBoxTemplate = (context) => {
|
|
113
|
-
const focusTemplate = focusTemplateFactory(context);
|
|
114
111
|
return html`<template role="presentation">
|
|
115
112
|
<div
|
|
116
113
|
class="${getClasses}"
|
|
@@ -121,7 +118,6 @@ const SelectableBoxTemplate = (context) => {
|
|
|
121
118
|
@keydown="${(x, c) => x._handleKeydown(c.event)}"
|
|
122
119
|
@click="${(x) => x.clickableBox || x.clickable ? x._handleCheckedChange() : null}"
|
|
123
120
|
>
|
|
124
|
-
${(x) => x.clickableBox || x.clickable ? focusTemplate : ""}
|
|
125
121
|
${checkbox(context)}
|
|
126
122
|
${radio(context)}
|
|
127
123
|
<slot></slot>
|
|
@@ -140,7 +136,6 @@ const selectableBoxDefinition = SelectableBox.compose({
|
|
|
140
136
|
const selectableBoxRegistries = [
|
|
141
137
|
selectableBoxDefinition(),
|
|
142
138
|
...checkboxRegistries,
|
|
143
|
-
...focusRegistries,
|
|
144
139
|
...radioRegistries
|
|
145
140
|
];
|
|
146
141
|
const registerSelectableBox = registerFactory(selectableBoxRegistries);
|
package/shared/definition44.cjs
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
const index = require('./index.cjs');
|
|
4
|
-
const definition = require('./definition59.cjs');
|
|
5
4
|
const direction = require('./direction.cjs');
|
|
6
5
|
const numbers = require('./numbers.cjs');
|
|
7
6
|
const formAssociated = require('./form-associated.cjs');
|
|
@@ -598,7 +597,7 @@ const sliderDefinition = Slider.compose({
|
|
|
598
597
|
delegatesFocus: true
|
|
599
598
|
}
|
|
600
599
|
});
|
|
601
|
-
const sliderRegistries = [sliderDefinition()
|
|
600
|
+
const sliderRegistries = [sliderDefinition()];
|
|
602
601
|
const registerSlider = index.registerFactory(sliderRegistries);
|
|
603
602
|
|
|
604
603
|
exports.Slider = Slider;
|
package/shared/definition44.js
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { F as FoundationElement, _ as __decorate, a as attr, o as observable, n as nullableNumberConverter, h as html, r as registerFactory } from './index.js';
|
|
2
|
-
import { f as focusRegistries } from './definition59.js';
|
|
3
2
|
import { D as Direction, g as getDirection } from './direction.js';
|
|
4
3
|
import { l as limit$1 } from './numbers.js';
|
|
5
4
|
import { F as FormAssociated } from './form-associated.js';
|
|
@@ -596,7 +595,7 @@ const sliderDefinition = Slider.compose({
|
|
|
596
595
|
delegatesFocus: true
|
|
597
596
|
}
|
|
598
597
|
});
|
|
599
|
-
const sliderRegistries = [sliderDefinition()
|
|
598
|
+
const sliderRegistries = [sliderDefinition()];
|
|
600
599
|
const registerSlider = registerFactory(sliderRegistries);
|
|
601
600
|
|
|
602
601
|
export { Slider as S, sliderRegistries as a, registerSlider as r, sliderDefinition as s };
|
package/shared/definition45.cjs
CHANGED
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
|
|
3
3
|
const index = require('./index.cjs');
|
|
4
4
|
const definition = require('./definition26.cjs');
|
|
5
|
-
const definition$1 = require('./definition59.cjs');
|
|
6
5
|
const affix = require('./affix.cjs');
|
|
7
6
|
require('./index2.cjs');
|
|
8
7
|
const localized = require('./localized.cjs');
|
|
@@ -144,7 +143,7 @@ const splitButtonDefinition = SplitButton.compose({
|
|
|
144
143
|
delegatesFocus: true
|
|
145
144
|
}
|
|
146
145
|
});
|
|
147
|
-
const splitButtonRegistries = [splitButtonDefinition(), ...definition.iconRegistries
|
|
146
|
+
const splitButtonRegistries = [splitButtonDefinition(), ...definition.iconRegistries];
|
|
148
147
|
const registerSplitButton = index.registerFactory(splitButtonRegistries);
|
|
149
148
|
|
|
150
149
|
exports.registerSplitButton = registerSplitButton;
|
package/shared/definition45.js
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { a as attr, F as FoundationElement, h as html, r as registerFactory } from './index.js';
|
|
2
2
|
import { a as iconRegistries } from './definition26.js';
|
|
3
|
-
import { f as focusRegistries } from './definition59.js';
|
|
4
3
|
import { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
|
|
5
4
|
import './index2.js';
|
|
6
5
|
import { L as Localized } from './localized.js';
|
|
@@ -142,7 +141,7 @@ const splitButtonDefinition = SplitButton.compose({
|
|
|
142
141
|
delegatesFocus: true
|
|
143
142
|
}
|
|
144
143
|
});
|
|
145
|
-
const splitButtonRegistries = [splitButtonDefinition(), ...iconRegistries
|
|
144
|
+
const splitButtonRegistries = [splitButtonDefinition(), ...iconRegistries];
|
|
146
145
|
const registerSplitButton = registerFactory(splitButtonRegistries);
|
|
147
146
|
|
|
148
147
|
export { splitButtonRegistries as a, registerSplitButton as r, splitButtonDefinition as s };
|
package/shared/definition46.cjs
CHANGED
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
|
|
3
3
|
const index = require('./index.cjs');
|
|
4
4
|
const definition = require('./definition26.cjs');
|
|
5
|
-
const definition$1 = require('./definition59.cjs');
|
|
6
5
|
const formAssociated = require('./form-associated.cjs');
|
|
7
6
|
const keyCodes = require('./key-codes.cjs');
|
|
8
7
|
const when = require('./when.cjs');
|
|
@@ -158,7 +157,7 @@ const switchDefinition = Switch.compose({
|
|
|
158
157
|
delegatesFocus: true
|
|
159
158
|
}
|
|
160
159
|
});
|
|
161
|
-
const switchRegistries = [switchDefinition(), ...definition.iconRegistries
|
|
160
|
+
const switchRegistries = [switchDefinition(), ...definition.iconRegistries];
|
|
162
161
|
const registerSwitch = index.registerFactory(switchRegistries);
|
|
163
162
|
|
|
164
163
|
exports.registerSwitch = registerSwitch;
|
package/shared/definition46.js
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { F as FoundationElement, _ as __decorate, a as attr, o as observable, h as html, r as registerFactory } from './index.js';
|
|
2
2
|
import { a as iconRegistries } from './definition26.js';
|
|
3
|
-
import { f as focusRegistries } from './definition59.js';
|
|
4
3
|
import { C as CheckableFormAssociated } from './form-associated.js';
|
|
5
4
|
import { a as keySpace, k as keyEnter } from './key-codes.js';
|
|
6
5
|
import { w as when } from './when.js';
|
|
@@ -156,7 +155,7 @@ const switchDefinition = Switch.compose({
|
|
|
156
155
|
delegatesFocus: true
|
|
157
156
|
}
|
|
158
157
|
});
|
|
159
|
-
const switchRegistries = [switchDefinition(), ...iconRegistries
|
|
158
|
+
const switchRegistries = [switchDefinition(), ...iconRegistries];
|
|
160
159
|
const registerSwitch = registerFactory(switchRegistries);
|
|
161
160
|
|
|
162
161
|
export { switchRegistries as a, registerSwitch as r, switchDefinition as s };
|
package/shared/definition48.cjs
CHANGED
|
@@ -2,10 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
const index = require('./index.cjs');
|
|
4
4
|
const definition = require('./definition26.cjs');
|
|
5
|
-
const definition$1 = require('./definition59.cjs');
|
|
6
5
|
const affix = require('./affix.cjs');
|
|
7
6
|
const applyMixins = require('./apply-mixins.cjs');
|
|
8
|
-
const focus = require('./focus2.cjs');
|
|
9
7
|
const classNames = require('./class-names.cjs');
|
|
10
8
|
|
|
11
9
|
/**
|
|
@@ -21,7 +19,7 @@ index.__decorate([
|
|
|
21
19
|
index.attr({ mode: "boolean" })
|
|
22
20
|
], Tab$1.prototype, "disabled", void 0);
|
|
23
21
|
|
|
24
|
-
const styles = "
|
|
22
|
+
const styles = ":host(.vertical){justify-content:end;grid-column:1/auto}:host([disabled]){cursor:not-allowed}:host(:focus-visible){outline:none}.base{position:relative;display:flex;box-sizing:border-box;align-items:center;padding:var(--_tabs-tablist-gutter);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-bold);gap:var(--_tabs-tablist-gutter);min-block-size:40px;vertical-align:middle;white-space:nowrap}.base{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(:disabled,.disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(:active,.active):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.connotation-cta{--_connotation-color-primary: var(--vvd-tab-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-tab-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-tab-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-tab-cta-faint, var(--vvd-color-cta-50));--_connotation-color-fierce: var(--vvd-tab-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-pale: var(--vvd-tab-cta-pale, var(--vvd-color-cta-300))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-tab-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-tab-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-tab-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-tab-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-fierce: var(--vvd-tab-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-pale: var(--vvd-tab-accent-pale, var(--vvd-color-neutral-300))}@supports (user-select: none){.base{user-select:none}}.base:not(.shape-sharp){border-radius:8px}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}:host(:focus-visible) .base{--focus-stroke-gap-color: transparent;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}:host(.vertical) .base{padding-inline-start:calc(var(--_tabs-active-indicator-stroke-width) + var(--_tabs-tablist-gutter))}slot[name=icon]{font-size:20px;line-height:1}.icon-trailing slot[name=icon]{display:inline-block;order:1;margin-inline-start:auto}:host(:not(.vertical)) .base:after{position:absolute;background:currentColor;block-size:2px;border-radius:2px;content:\"\";inline-size:100%;inset-block-end:0;inset-inline-start:0;pointer-events:none;transition-property:opacity}:host(:not(.vertical)):host([aria-selected=true]) .base:after{transition-delay:.2s}:host(:not(.vertical)):host(:not([aria-selected=true])) .base:after{opacity:0}\n";
|
|
25
23
|
|
|
26
24
|
var __defProp = Object.defineProperty;
|
|
27
25
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
@@ -74,11 +72,9 @@ const getClasses = ({
|
|
|
74
72
|
);
|
|
75
73
|
function TabTemplate(context) {
|
|
76
74
|
const affixIconTemplate = affix.affixIconTemplateFactory(context);
|
|
77
|
-
const focusTemplate = focus.focusTemplateFactory(context);
|
|
78
75
|
return index.html`
|
|
79
76
|
<template slot="tab" role="tab" aria-disabled="${(x) => x.disabled}" aria-selected="${(x) => x.ariaSelected}">
|
|
80
77
|
<div class="${getClasses}" >
|
|
81
|
-
${() => focusTemplate}
|
|
82
78
|
${(x) => affixIconTemplate(x.icon, affix.IconWrapper.Slot)}
|
|
83
79
|
${(x) => x.label}
|
|
84
80
|
</div>
|
|
@@ -90,7 +86,7 @@ const tabDefinition = Tab.compose({
|
|
|
90
86
|
template: TabTemplate,
|
|
91
87
|
styles
|
|
92
88
|
});
|
|
93
|
-
const tabRegistries = [tabDefinition(), ...definition.iconRegistries
|
|
89
|
+
const tabRegistries = [tabDefinition(), ...definition.iconRegistries];
|
|
94
90
|
const registerTab = index.registerFactory(tabRegistries);
|
|
95
91
|
|
|
96
92
|
exports.registerTab = registerTab;
|