@vonage/vivid 3.49.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 +0 -2
- package/alert/index.js +0 -2
- 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/checkbox/index.cjs +0 -3
- package/checkbox/index.js +0 -3
- package/combobox/index.cjs +4 -4
- package/combobox/index.js +4 -4
- package/custom-elements.json +749 -230
- package/data-grid/index.cjs +0 -2
- package/data-grid/index.js +0 -2
- package/date-picker/index.cjs +3 -2
- package/date-picker/index.js +3 -2
- package/date-range-picker/index.cjs +3 -2
- package/date-range-picker/index.js +3 -2
- package/dialog/index.cjs +0 -3
- package/dialog/index.js +0 -3
- 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/index.cjs +20 -15
- package/index.js +9 -7
- package/lib/components.d.ts +1 -0
- 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/lib/time-picker/definition.d.ts +3 -0
- package/lib/time-picker/locale.d.ts +12 -0
- package/lib/time-picker/time/picker.d.ts +9 -0
- package/lib/time-picker/time/presentationTime.d.ts +5 -0
- package/lib/time-picker/time/time.d.ts +15 -0
- package/lib/time-picker/time-picker.d.ts +16 -0
- package/lib/time-picker/time-picker.form-associated.d.ts +10 -0
- package/lib/time-picker/time-picker.template.d.ts +4 -0
- package/listbox/index.cjs +4 -12
- package/listbox/index.js +4 -12
- package/locales/en-GB.cjs +15 -0
- package/locales/en-GB.js +15 -0
- package/locales/en-US.cjs +15 -0
- package/locales/en-US.js +15 -0
- package/locales/ja-JP.cjs +15 -0
- package/locales/ja-JP.js +15 -0
- package/locales/zh-CN.cjs +15 -0
- package/locales/zh-CN.js +15 -0
- package/menu/index.cjs +0 -2
- package/menu/index.js +0 -2
- 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 +0 -2
- package/popup/index.js +0 -2
- package/radio/index.cjs +0 -3
- package/radio/index.js +0 -3
- package/select/index.cjs +0 -3
- package/select/index.js +0 -3
- package/selectable-box/index.cjs +0 -3
- package/selectable-box/index.js +0 -3
- package/shared/date-picker/date-picker-base.d.ts +2 -2
- 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/definition15.cjs +2 -6
- package/shared/definition15.js +2 -6
- package/shared/definition16.cjs +1 -1
- package/shared/definition16.js +1 -1
- package/shared/definition17.cjs +1 -4
- package/shared/definition17.js +1 -4
- package/shared/definition18.cjs +2 -4
- package/shared/definition18.js +0 -2
- package/shared/definition19.cjs +2 -4
- package/shared/definition19.js +0 -2
- package/shared/definition20.cjs +1 -4
- package/shared/definition20.js +1 -4
- 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/definition28.cjs +2 -3
- package/shared/definition28.js +2 -3
- 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 +3 -3
- package/shared/definition4.js +4 -4
- package/shared/definition40.cjs +3 -7
- package/shared/definition40.js +3 -7
- package/shared/definition41.cjs +5 -6
- package/shared/definition41.js +4 -5
- 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 +768 -90
- package/shared/definition54.js +767 -89
- package/shared/definition55.cjs +75 -57
- package/shared/definition55.js +74 -56
- package/shared/definition56.cjs +100 -71
- package/shared/definition56.js +99 -70
- package/shared/definition57.cjs +76 -291
- package/shared/definition57.js +77 -292
- package/shared/definition58.cjs +303 -13
- package/shared/definition58.js +302 -13
- package/shared/definition61.cjs +20 -0
- package/shared/definition61.js +17 -0
- 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/localization/Locale.d.ts +2 -0
- package/shared/patterns/index.d.ts +1 -0
- package/shared/patterns/trapped-focus.d.ts +4 -0
- package/shared/presentationDate.cjs +15 -34
- package/shared/presentationDate.js +15 -34
- package/shared/text-field.cjs +1 -1
- package/shared/text-field.js +1 -1
- package/shared/trapped-focus.cjs +29 -0
- package/shared/trapped-focus.js +27 -0
- 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 +38 -0
- package/time-picker/index.js +36 -0
- package/toggletip/index.cjs +1 -3
- package/toggletip/index.js +1 -3
- package/tooltip/index.cjs +1 -3
- package/tooltip/index.js +1 -3
- package/tree-item/index.cjs +1 -4
- package/tree-item/index.js +1 -4
- package/tree-view/index.cjs +1 -1
- package/tree-view/index.js +1 -1
- package/vivid.api.json +111 -42
- package/style.css +0 -1
package/shared/definition30.js
CHANGED
|
@@ -1,13 +1,12 @@
|
|
|
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 './definition58.js';
|
|
4
3
|
import { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
|
|
5
4
|
import { a as applyMixins } from './apply-mixins.js';
|
|
6
5
|
import { I as Icon } from './icon.js';
|
|
7
6
|
import { r as ref } from './ref.js';
|
|
8
7
|
import { w as when } from './when.js';
|
|
9
8
|
|
|
10
|
-
const styles = ".control{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(--_appearance-color-text);cursor:pointer;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-block:10px;padding-inline:16px;text-decoration:none;vertical-align:middle
|
|
9
|
+
const styles = ".control{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(--_appearance-color-text);cursor:pointer;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-block:10px;padding-inline:16px;text-decoration:none;vertical-align:middle}.control{--_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(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control: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}.control:where(.selected,[aria-current]):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control:where(.selected,[aria-current]):where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control{--_connotation-color-primary: var(--vvd-nav-disclosure-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-nav-disclosure-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-nav-disclosure-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-faint: var(--vvd-nav-disclosure-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-nav-disclosure-accent-soft, var(--vvd-color-neutral-100))}.control:focus-visible{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(:where([aria-current=true][open])) .control,:host(:not([aria-current=true])) .control{--focus-stroke-gap-color: transparent}@supports (user-select: none){.control{user-select:none}}.control .toggleIcon{margin-inline-start:auto}slot[name=icon]{font-size:20px;line-height:1}.content{display:flex;flex-direction:column;border-inline-start:1px solid var(--vvd-color-neutral-200);gap:4px;margin-block:4px;margin-inline-start:20px;padding-inline-start:12px}details>summary{list-style:none}details>summary::-webkit-details-marker{display:none}\n";
|
|
11
10
|
|
|
12
11
|
var __defProp = Object.defineProperty;
|
|
13
12
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
@@ -88,7 +87,7 @@ const navDisclosureDefinition = NavDisclosure.compose({
|
|
|
88
87
|
template: NavDisclosureTemplate,
|
|
89
88
|
styles
|
|
90
89
|
});
|
|
91
|
-
const navDisclosureRegistries = [navDisclosureDefinition(), ...iconRegistries
|
|
90
|
+
const navDisclosureRegistries = [navDisclosureDefinition(), ...iconRegistries];
|
|
92
91
|
const registerNavDisclosure = registerFactory(navDisclosureRegistries);
|
|
93
92
|
|
|
94
93
|
export { navDisclosureRegistries as a, navDisclosureDefinition as n, registerNavDisclosure as r };
|
package/shared/definition31.cjs
CHANGED
|
@@ -2,13 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
const index = require('./index.cjs');
|
|
4
4
|
const definition = require('./definition26.cjs');
|
|
5
|
-
const definition$1 = require('./definition58.cjs');
|
|
6
5
|
const affix = require('./affix.cjs');
|
|
7
6
|
const textAnchor = require('./text-anchor.cjs');
|
|
8
7
|
const applyMixins = require('./apply-mixins.cjs');
|
|
9
8
|
const textAnchor_template = require('./text-anchor.template.cjs');
|
|
10
9
|
|
|
11
|
-
const styles = ".control{display:inline-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(--_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)));text-decoration:none;vertical-align:middle}.control{--_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(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control: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}.control:where(.selected,[aria-current]):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control:where(.selected,[aria-current]):where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control{--_connotation-color-primary: var(--vvd-nav-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-nav-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-nav-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-faint: var(--vvd-nav-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-nav-item-accent-soft, var(--vvd-color-neutral-100))}.control
|
|
10
|
+
const styles = ".control{display:inline-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(--_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)));text-decoration:none;vertical-align:middle}.control{--_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(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control: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}.control:where(.selected,[aria-current]):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control:where(.selected,[aria-current]):where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control{--_connotation-color-primary: var(--vvd-nav-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-nav-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-nav-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-faint: var(--vvd-nav-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-nav-item-accent-soft, var(--vvd-color-neutral-100))}.control.icon-only{display:flex;block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));inline-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));place-content:center}.control:not(.icon-only){padding-block:10px;padding-inline:16px}.control:focus-visible{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(:not([aria-current=page])) .control{--focus-stroke-gap-color: transparent}slot[name=icon]{font-size:20px;line-height:1}\n";
|
|
12
11
|
|
|
13
12
|
class NavItem extends textAnchor.TextAnchor {
|
|
14
13
|
getBodyTemplate() {
|
|
@@ -29,7 +28,7 @@ const navItemDefinition = NavItem.compose({
|
|
|
29
28
|
delegatesFocus: true
|
|
30
29
|
}
|
|
31
30
|
});
|
|
32
|
-
const navItemRegistries = [navItemDefinition(), ...definition.iconRegistries
|
|
31
|
+
const navItemRegistries = [navItemDefinition(), ...definition.iconRegistries];
|
|
33
32
|
const registerNavItem = index.registerFactory(navItemRegistries);
|
|
34
33
|
|
|
35
34
|
exports.navItemDefinition = navItemDefinition;
|
package/shared/definition31.js
CHANGED
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
import { h as html, r as registerFactory } from './index.js';
|
|
2
2
|
import { a as iconRegistries } from './definition26.js';
|
|
3
|
-
import { f as focusRegistries } from './definition58.js';
|
|
4
3
|
import { A as AffixIcon } from './affix.js';
|
|
5
4
|
import { T as TextAnchor } from './text-anchor.js';
|
|
6
5
|
import { a as applyMixins } from './apply-mixins.js';
|
|
7
6
|
import { t as textAnchorTemplate } from './text-anchor.template.js';
|
|
8
7
|
|
|
9
|
-
const styles = ".control{display:inline-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(--_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)));text-decoration:none;vertical-align:middle}.control{--_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(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control: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}.control:where(.selected,[aria-current]):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control:where(.selected,[aria-current]):where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control{--_connotation-color-primary: var(--vvd-nav-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-nav-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-nav-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-faint: var(--vvd-nav-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-nav-item-accent-soft, var(--vvd-color-neutral-100))}.control
|
|
8
|
+
const styles = ".control{display:inline-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(--_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)));text-decoration:none;vertical-align:middle}.control{--_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(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control: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}.control:where(.selected,[aria-current]):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control:where(.selected,[aria-current]):where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control{--_connotation-color-primary: var(--vvd-nav-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-nav-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-nav-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-faint: var(--vvd-nav-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-nav-item-accent-soft, var(--vvd-color-neutral-100))}.control.icon-only{display:flex;block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));inline-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));place-content:center}.control:not(.icon-only){padding-block:10px;padding-inline:16px}.control:focus-visible{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(:not([aria-current=page])) .control{--focus-stroke-gap-color: transparent}slot[name=icon]{font-size:20px;line-height:1}\n";
|
|
10
9
|
|
|
11
10
|
class NavItem extends TextAnchor {
|
|
12
11
|
getBodyTemplate() {
|
|
@@ -27,7 +26,7 @@ const navItemDefinition = NavItem.compose({
|
|
|
27
26
|
delegatesFocus: true
|
|
28
27
|
}
|
|
29
28
|
});
|
|
30
|
-
const navItemRegistries = [navItemDefinition(), ...iconRegistries
|
|
29
|
+
const navItemRegistries = [navItemDefinition(), ...iconRegistries];
|
|
31
30
|
const registerNavItem = registerFactory(navItemRegistries);
|
|
32
31
|
|
|
33
32
|
export { navItemRegistries as a, navItemDefinition as n, registerNavItem as r };
|
package/shared/definition34.cjs
CHANGED
|
@@ -313,7 +313,7 @@ index.__decorate([
|
|
|
313
313
|
], NumberField$1.prototype, "defaultSlottedNodes", void 0);
|
|
314
314
|
applyMixins.applyMixins(NumberField$1, startEnd.StartEnd, textField.DelegatesARIATextbox);
|
|
315
315
|
|
|
316
|
-
const styles = ":host{display:inline-block}.base{--_text-field-gutter-start:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4);--_text-field-gutter-end:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4);--_text-field-icon-size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2);display:inline-grid;width:100%;gap:4px;grid-template-columns:min-content 1fr max-content}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-ghost{--_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(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-fierce)}.base: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}.base: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)}.base:where(:disabled,.disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base: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)}.base:where(.readonly):where(:not(:disabled,.disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base: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)}.base:where(.error):where(:not(:disabled,.disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base: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)}.base:where(.success):where(:not(:disabled,.disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base
|
|
316
|
+
const styles = ":host{display:inline-block}.base{--_text-field-gutter-start:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4);--_text-field-gutter-end:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4);--_text-field-icon-size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2);display:inline-grid;width:100%;gap:4px;grid-template-columns:min-content 1fr max-content}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-ghost{--_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(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-fierce)}.base: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}.base: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)}.base:where(:disabled,.disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base: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)}.base:where(.readonly):where(:not(:disabled,.disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base: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)}.base:where(.error):where(:not(:disabled,.disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base: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)}.base:where(.success):where(:not(:disabled,.disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base{--_connotation-color-primary: var(--vvd-text-field-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-text-field-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-field-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-text-field-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-text-field-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-text-field-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-text-field-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-text-field-accent-soft, var(--vvd-color-neutral-100))}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color: var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color: var(--_appearance-color-text)}.label:not(slot),.label::slotted(label){box-sizing:initial!important;padding:initial!important;margin:initial!important;color:var(--vvd-color-canvas-text)!important;contain:inline-size!important;font:var(--vvd-typography-base);grid-column:1/4;grid-row:1}.char-count+.label:not(slot),.char-count+.label::slotted(label){grid-column:1/3}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base);grid-column:3/4}.fieldset{position:relative;display:flex;align-items:center;background-color:var(--_appearance-color-fill);font:var(--vvd-typography-base);grid-column:1/4;padding-block:0;transition:color .2s,background-color .2s}.fieldset:after{position:absolute;display:block;block-size:100%;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";inline-size:100%;pointer-events:none;transition:box-shadow .2s}.fieldset:focus-visible{outline:none}.base>.fieldset{block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base:not(.shape-pill) .fieldset{border-radius:8px}.base.shape-pill .fieldset{border-radius:24px}.wrapper{block-size:100%;border-radius:inherit;inline-size:100%}.wrapper:focus-visible{outline:none}.control:not(slot),.control::slotted(input){width:100%!important;box-sizing:border-box!important;border:0 none!important;margin:initial!important;appearance:none!important;background-color:transparent!important;block-size:100%!important;border-radius:inherit!important;color:inherit!important;font:inherit;padding-block:0!important;padding-inline-end:var(--_text-field-gutter-end)!important;padding-inline-start:var(--_text-field-gutter-start)!important}.control:not(slot):disabled,.control::slotted(input:disabled){cursor:not-allowed!important;opacity:1!important;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control:not(slot)::placeholder{opacity:1!important;-webkit-text-fill-color:var(--_low-ink-color)!important}.control:not(slot):focus-visible,.control::slotted(input:focus-visible){outline:none}.has-icon .control:not(slot),.has-icon .control::slotted(input){padding-inline-start:calc(var(--_text-field-icon-size) + var(--_text-field-gutter-start) * 2)!important}.icon{position:absolute;z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:calc(100% + var(--_text-field-gutter-start));line-height:1;transform:translateY(-50%)}.leading-items-wrapper{position:relative}.base.no-leading .leading-items-wrapper{display:none}.action-items-wrapper{margin-inline-end:4px}.base:not(.action-items) .action-items-wrapper{display:none}.focus-indicator{--focus-stroke-gap-color: transparent;pointer-events:none}.wrapper:not(:focus-visible,:focus-within)>.focus-indicator,.fieldset:not(:focus-visible,:focus-within)>.focus-indicator{display:none}.base{--_text-field-gutter-end: 70px}.control::-webkit-outer-spin-button,.control::-webkit-inner-spin-button{appearance:none}.control-buttons{position:absolute;z-index:1;right:3px;display:flex}.readonly .control-buttons,.disabled .control-buttons{pointer-events:none}.control-buttons .divider{margin-block:8px}.control-buttons>*{flex-shrink:0}.disabled .focus-indicator{display:none;pointer-events:none}\n";
|
|
317
317
|
|
|
318
318
|
var __defProp = Object.defineProperty;
|
|
319
319
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
package/shared/definition34.js
CHANGED
|
@@ -311,7 +311,7 @@ __decorate([
|
|
|
311
311
|
], NumberField$1.prototype, "defaultSlottedNodes", void 0);
|
|
312
312
|
applyMixins(NumberField$1, StartEnd, DelegatesARIATextbox);
|
|
313
313
|
|
|
314
|
-
const styles = ":host{display:inline-block}.base{--_text-field-gutter-start:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4);--_text-field-gutter-end:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4);--_text-field-icon-size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2);display:inline-grid;width:100%;gap:4px;grid-template-columns:min-content 1fr max-content}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-ghost{--_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(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-fierce)}.base: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}.base: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)}.base:where(:disabled,.disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base: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)}.base:where(.readonly):where(:not(:disabled,.disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base: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)}.base:where(.error):where(:not(:disabled,.disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base: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)}.base:where(.success):where(:not(:disabled,.disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base
|
|
314
|
+
const styles = ":host{display:inline-block}.base{--_text-field-gutter-start:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4);--_text-field-gutter-end:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4);--_text-field-icon-size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2);display:inline-grid;width:100%;gap:4px;grid-template-columns:min-content 1fr max-content}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-ghost{--_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(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-fierce)}.base: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}.base: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)}.base:where(:disabled,.disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base: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)}.base:where(.readonly):where(:not(:disabled,.disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base: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)}.base:where(.error):where(:not(:disabled,.disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base: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)}.base:where(.success):where(:not(:disabled,.disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base{--_connotation-color-primary: var(--vvd-text-field-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-text-field-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-field-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-text-field-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-text-field-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-text-field-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-text-field-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-text-field-accent-soft, var(--vvd-color-neutral-100))}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color: var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color: var(--_appearance-color-text)}.label:not(slot),.label::slotted(label){box-sizing:initial!important;padding:initial!important;margin:initial!important;color:var(--vvd-color-canvas-text)!important;contain:inline-size!important;font:var(--vvd-typography-base);grid-column:1/4;grid-row:1}.char-count+.label:not(slot),.char-count+.label::slotted(label){grid-column:1/3}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base);grid-column:3/4}.fieldset{position:relative;display:flex;align-items:center;background-color:var(--_appearance-color-fill);font:var(--vvd-typography-base);grid-column:1/4;padding-block:0;transition:color .2s,background-color .2s}.fieldset:after{position:absolute;display:block;block-size:100%;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";inline-size:100%;pointer-events:none;transition:box-shadow .2s}.fieldset:focus-visible{outline:none}.base>.fieldset{block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base:not(.shape-pill) .fieldset{border-radius:8px}.base.shape-pill .fieldset{border-radius:24px}.wrapper{block-size:100%;border-radius:inherit;inline-size:100%}.wrapper:focus-visible{outline:none}.control:not(slot),.control::slotted(input){width:100%!important;box-sizing:border-box!important;border:0 none!important;margin:initial!important;appearance:none!important;background-color:transparent!important;block-size:100%!important;border-radius:inherit!important;color:inherit!important;font:inherit;padding-block:0!important;padding-inline-end:var(--_text-field-gutter-end)!important;padding-inline-start:var(--_text-field-gutter-start)!important}.control:not(slot):disabled,.control::slotted(input:disabled){cursor:not-allowed!important;opacity:1!important;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control:not(slot)::placeholder{opacity:1!important;-webkit-text-fill-color:var(--_low-ink-color)!important}.control:not(slot):focus-visible,.control::slotted(input:focus-visible){outline:none}.has-icon .control:not(slot),.has-icon .control::slotted(input){padding-inline-start:calc(var(--_text-field-icon-size) + var(--_text-field-gutter-start) * 2)!important}.icon{position:absolute;z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:calc(100% + var(--_text-field-gutter-start));line-height:1;transform:translateY(-50%)}.leading-items-wrapper{position:relative}.base.no-leading .leading-items-wrapper{display:none}.action-items-wrapper{margin-inline-end:4px}.base:not(.action-items) .action-items-wrapper{display:none}.focus-indicator{--focus-stroke-gap-color: transparent;pointer-events:none}.wrapper:not(:focus-visible,:focus-within)>.focus-indicator,.fieldset:not(:focus-visible,:focus-within)>.focus-indicator{display:none}.base{--_text-field-gutter-end: 70px}.control::-webkit-outer-spin-button,.control::-webkit-inner-spin-button{appearance:none}.control-buttons{position:absolute;z-index:1;right:3px;display:flex}.readonly .control-buttons,.disabled .control-buttons{pointer-events:none}.control-buttons .divider{margin-block:8px}.control-buttons>*{flex-shrink:0}.disabled .focus-indicator{display:none;pointer-events:none}\n";
|
|
315
315
|
|
|
316
316
|
var __defProp = Object.defineProperty;
|
|
317
317
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
package/shared/definition35.cjs
CHANGED
|
@@ -2,14 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
const index = require('./index.cjs');
|
|
4
4
|
const definition = require('./definition26.cjs');
|
|
5
|
-
const definition$1 = require('./definition58.cjs');
|
|
6
5
|
const affix = require('./affix.cjs');
|
|
7
6
|
const ariaGlobal = require('./aria-global.cjs');
|
|
8
7
|
const startEnd = require('./start-end.cjs');
|
|
9
8
|
const applyMixins = require('./apply-mixins.cjs');
|
|
10
9
|
const dom = require('./dom.cjs');
|
|
11
|
-
const focus = require('./focus2.cjs');
|
|
12
|
-
require('./index2.cjs');
|
|
13
10
|
const when = require('./when.cjs');
|
|
14
11
|
const classNames = require('./class-names.cjs');
|
|
15
12
|
|
|
@@ -260,7 +257,6 @@ const getClasses = ({
|
|
|
260
257
|
);
|
|
261
258
|
const ListboxOptionTemplate = (context) => {
|
|
262
259
|
const affixIconTemplate = affix.affixIconTemplateFactory(context);
|
|
263
|
-
const focusTemplate = focus.focusTemplateFactory(context);
|
|
264
260
|
return index.html`
|
|
265
261
|
<template
|
|
266
262
|
aria-checked="${(x) => x.ariaChecked}"
|
|
@@ -270,7 +266,6 @@ const ListboxOptionTemplate = (context) => {
|
|
|
270
266
|
aria-setsize="${(x) => x.ariaSetSize}"
|
|
271
267
|
role="option">
|
|
272
268
|
<div class="${getClasses}">
|
|
273
|
-
${() => focusTemplate}
|
|
274
269
|
${(x) => affixIconTemplate(x.icon, affix.IconWrapper.Slot)}
|
|
275
270
|
${when.when((x) => x.text, index.html`<div class="text">${(x) => x.text}</div>`)}
|
|
276
271
|
</div>
|
|
@@ -278,14 +273,14 @@ const ListboxOptionTemplate = (context) => {
|
|
|
278
273
|
`;
|
|
279
274
|
};
|
|
280
275
|
|
|
281
|
-
const styles = ":host([disabled]){cursor:not-allowed}.base{
|
|
276
|
+
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";
|
|
282
277
|
|
|
283
278
|
const listboxOptionDefinition = ListboxOption.compose({
|
|
284
279
|
baseName: "option",
|
|
285
280
|
template: ListboxOptionTemplate,
|
|
286
281
|
styles
|
|
287
282
|
});
|
|
288
|
-
const listboxOptionRegistries = [listboxOptionDefinition(), ...definition.iconRegistries
|
|
283
|
+
const listboxOptionRegistries = [listboxOptionDefinition(), ...definition.iconRegistries];
|
|
289
284
|
const registerOption = index.registerFactory(listboxOptionRegistries);
|
|
290
285
|
|
|
291
286
|
exports.ListboxOption = ListboxOption;
|
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 './definition58.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
|
@@ -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
|
@@ -3,7 +3,7 @@ import { a as buttonRegistries } from './definition11.js';
|
|
|
3
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,13 +1,11 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
const index = require('./index.cjs');
|
|
4
|
-
const definition = require('./definition58.cjs');
|
|
5
4
|
const radio = require('./radio.cjs');
|
|
6
|
-
const focus = require('./focus2.cjs');
|
|
7
5
|
const when = require('./when.cjs');
|
|
8
6
|
const classNames = require('./class-names.cjs');
|
|
9
7
|
|
|
10
|
-
const styles = "
|
|
8
|
+
const styles = ":host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.base{display:inline-flex;align-items:center;cursor:pointer;gap:8px}.base.connotation-cta{--_connotation-color-primary: var(--vvd-radio-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-radio-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-radio-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-intermediate: var(--vvd-radio-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-firm: var(--vvd-radio-cta-firm, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-radio-cta-fierce, var(--vvd-color-cta-700))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-radio-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-radio-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-radio-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-radio-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-radio-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-radio-accent-fierce, var(--vvd-color-neutral-700))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base: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)}.base:where(:checked,.checked):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}.base:where(:checked,.checked):where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary-increment)}.base: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)}.base: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)}@supports (user-select: none){.base{user-select:none}}.base.disabled{pointer-events:none}.control{position:relative;flex-shrink:0;block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));border-radius:50%;box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base:not(.checked) .control{background-color:var(--_appearance-color-fill)}.control:after{position:absolute;background-color:var(--_appearance-color-outline);border-radius:inherit;content:\"\";inset:5px;opacity:1;transition:opacity .2s}.base:not(.checked) .control:after{opacity:0}:host(:focus-visible) .control{--focus-inset: -3px;--focus-stroke-gap-color: transparent}:host(:focus-visible) .control:before{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));position:absolute;display:block;block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));border-radius:inherit;content:\"\";inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base)}.focus-indicator{--focus-inset: -3px;--focus-stroke-gap-color: transparent;border-radius:50%}:host(:not(:focus-visible)) .focus-indicator{display:none}\n";
|
|
11
9
|
|
|
12
10
|
const getClasses = ({ connotation, checked, readOnly, disabled }) => classNames.classNames(
|
|
13
11
|
"base",
|
|
@@ -16,8 +14,7 @@ const getClasses = ({ connotation, checked, readOnly, disabled }) => classNames.
|
|
|
16
14
|
["readonly", Boolean(readOnly)],
|
|
17
15
|
["disabled", Boolean(disabled)]
|
|
18
16
|
);
|
|
19
|
-
const RadioTemplate = (
|
|
20
|
-
const focusTemplate = focus.focusTemplateFactory(context);
|
|
17
|
+
const RadioTemplate = () => {
|
|
21
18
|
return index.html`<template role="${(x) => x.ariaLabel ? "presentation" : null}">
|
|
22
19
|
<div class="${getClasses}"
|
|
23
20
|
role="radio"
|
|
@@ -29,7 +26,6 @@ const RadioTemplate = (context) => {
|
|
|
29
26
|
@click="${(x, c) => x.clickHandler(c.event)}"
|
|
30
27
|
>
|
|
31
28
|
<div class="control">
|
|
32
|
-
${() => focusTemplate}
|
|
33
29
|
</div>
|
|
34
30
|
${when.when((x) => x.label, index.html`<label class="label">${(x) => x.label}</label>`)}
|
|
35
31
|
</div>
|
|
@@ -41,7 +37,7 @@ const radioDefinition = radio.Radio.compose({
|
|
|
41
37
|
template: RadioTemplate,
|
|
42
38
|
styles
|
|
43
39
|
});
|
|
44
|
-
const radioRegistries = [radioDefinition()
|
|
40
|
+
const radioRegistries = [radioDefinition()];
|
|
45
41
|
const registerRadio = index.registerFactory(radioRegistries);
|
|
46
42
|
|
|
47
43
|
exports.radioDefinition = radioDefinition;
|
package/shared/definition40.js
CHANGED
|
@@ -1,11 +1,9 @@
|
|
|
1
1
|
import { h as html, r as registerFactory } from './index.js';
|
|
2
|
-
import { f as focusRegistries } from './definition58.js';
|
|
3
2
|
import { R as Radio } from './radio.js';
|
|
4
|
-
import { f as focusTemplateFactory } from './focus2.js';
|
|
5
3
|
import { w as when } from './when.js';
|
|
6
4
|
import { c as classNames } from './class-names.js';
|
|
7
5
|
|
|
8
|
-
const styles = "
|
|
6
|
+
const styles = ":host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.base{display:inline-flex;align-items:center;cursor:pointer;gap:8px}.base.connotation-cta{--_connotation-color-primary: var(--vvd-radio-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-radio-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-radio-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-intermediate: var(--vvd-radio-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-firm: var(--vvd-radio-cta-firm, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-radio-cta-fierce, var(--vvd-color-cta-700))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-radio-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-radio-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-radio-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-radio-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-radio-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-radio-accent-fierce, var(--vvd-color-neutral-700))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base: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)}.base:where(:checked,.checked):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}.base:where(:checked,.checked):where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary-increment)}.base: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)}.base: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)}@supports (user-select: none){.base{user-select:none}}.base.disabled{pointer-events:none}.control{position:relative;flex-shrink:0;block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));border-radius:50%;box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base:not(.checked) .control{background-color:var(--_appearance-color-fill)}.control:after{position:absolute;background-color:var(--_appearance-color-outline);border-radius:inherit;content:\"\";inset:5px;opacity:1;transition:opacity .2s}.base:not(.checked) .control:after{opacity:0}:host(:focus-visible) .control{--focus-inset: -3px;--focus-stroke-gap-color: transparent}:host(:focus-visible) .control:before{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));position:absolute;display:block;block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));border-radius:inherit;content:\"\";inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base)}.focus-indicator{--focus-inset: -3px;--focus-stroke-gap-color: transparent;border-radius:50%}:host(:not(:focus-visible)) .focus-indicator{display:none}\n";
|
|
9
7
|
|
|
10
8
|
const getClasses = ({ connotation, checked, readOnly, disabled }) => classNames(
|
|
11
9
|
"base",
|
|
@@ -14,8 +12,7 @@ const getClasses = ({ connotation, checked, readOnly, disabled }) => classNames(
|
|
|
14
12
|
["readonly", Boolean(readOnly)],
|
|
15
13
|
["disabled", Boolean(disabled)]
|
|
16
14
|
);
|
|
17
|
-
const RadioTemplate = (
|
|
18
|
-
const focusTemplate = focusTemplateFactory(context);
|
|
15
|
+
const RadioTemplate = () => {
|
|
19
16
|
return html`<template role="${(x) => x.ariaLabel ? "presentation" : null}">
|
|
20
17
|
<div class="${getClasses}"
|
|
21
18
|
role="radio"
|
|
@@ -27,7 +24,6 @@ const RadioTemplate = (context) => {
|
|
|
27
24
|
@click="${(x, c) => x.clickHandler(c.event)}"
|
|
28
25
|
>
|
|
29
26
|
<div class="control">
|
|
30
|
-
${() => focusTemplate}
|
|
31
27
|
</div>
|
|
32
28
|
${when((x) => x.label, html`<label class="label">${(x) => x.label}</label>`)}
|
|
33
29
|
</div>
|
|
@@ -39,7 +35,7 @@ const radioDefinition = Radio.compose({
|
|
|
39
35
|
template: RadioTemplate,
|
|
40
36
|
styles
|
|
41
37
|
});
|
|
42
|
-
const radioRegistries = [radioDefinition()
|
|
38
|
+
const radioRegistries = [radioDefinition()];
|
|
43
39
|
const registerRadio = registerFactory(radioRegistries);
|
|
44
40
|
|
|
45
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$2 = require('./definition58.cjs');
|
|
5
4
|
const definition = require('./definition60.cjs');
|
|
6
|
-
const definition$
|
|
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;
|