@vonage/vivid 3.50.0 → 3.51.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/accordion/index.cjs +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/appearance-ui/index.cjs +1 -1
- package/appearance-ui/index.js +1 -1
- 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 +231 -200
- 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/button/button.d.ts +7 -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/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/anchored.cjs +20 -1
- package/shared/anchored.js +21 -3
- package/shared/definition.cjs +2 -6
- package/shared/definition.js +2 -6
- package/shared/definition11.cjs +94 -40
- package/shared/definition11.js +94 -40
- 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 +3 -4
- package/shared/definition29.cjs +5 -2
- package/shared/definition29.js +5 -2
- 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 +2 -3
- package/shared/definition46.js +2 -3
- 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 +7 -3
- package/shared/definition55.js +8 -4
- package/shared/definition56.cjs +4 -2
- package/shared/definition56.js +5 -3
- 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/definition6.cjs +1 -1
- package/shared/definition6.js +1 -1
- 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/definition7.cjs +1 -1
- package/shared/definition7.js +1 -1
- 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/patterns/anchored.d.ts +4 -0
- 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/definition23.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
|
const applyMixins = require('./apply-mixins.cjs');
|
|
8
7
|
const button = require('./button.cjs');
|
|
@@ -98,7 +97,7 @@ const fabDefinition = Fab.compose({
|
|
|
98
97
|
delegatesFocus: true
|
|
99
98
|
}
|
|
100
99
|
});
|
|
101
|
-
const fabRegistries = [fabDefinition(), ...definition.iconRegistries
|
|
100
|
+
const fabRegistries = [fabDefinition(), ...definition.iconRegistries];
|
|
102
101
|
const registerFab = index.registerFactory(fabRegistries);
|
|
103
102
|
|
|
104
103
|
exports.fabDefinition = fabDefinition;
|
package/shared/definition23.js
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { 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 applyMixins } from './apply-mixins.js';
|
|
6
5
|
import { B as Button$1 } from './button.js';
|
|
@@ -96,7 +95,7 @@ const fabDefinition = Fab.compose({
|
|
|
96
95
|
delegatesFocus: true
|
|
97
96
|
}
|
|
98
97
|
});
|
|
99
|
-
const fabRegistries = [fabDefinition(), ...iconRegistries
|
|
98
|
+
const fabRegistries = [fabDefinition(), ...iconRegistries];
|
|
100
99
|
const registerFab = registerFactory(fabRegistries);
|
|
101
100
|
|
|
102
101
|
export { fabRegistries as a, fabDefinition as f, registerFab as r };
|
package/shared/definition24.cjs
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
const index = require('./index.cjs');
|
|
4
4
|
const definition$1 = require('./definition26.cjs');
|
|
5
|
-
const definition$2 = require('./
|
|
5
|
+
const definition$2 = require('./definition61.cjs');
|
|
6
6
|
const definition = require('./definition11.cjs');
|
|
7
7
|
const enums = require('./enums.cjs');
|
|
8
8
|
require('./affix.cjs');
|
|
@@ -10,12 +10,11 @@ const index$1 = require('./index2.cjs');
|
|
|
10
10
|
const localized = require('./localized.cjs');
|
|
11
11
|
const formAssociated = require('./form-associated.cjs');
|
|
12
12
|
const applyMixins = require('./apply-mixins.cjs');
|
|
13
|
-
const focus = require('./focus2.cjs');
|
|
14
13
|
const when = require('./when.cjs');
|
|
15
14
|
const ref = require('./ref.cjs');
|
|
16
15
|
const classNames = require('./class-names.cjs');
|
|
17
16
|
|
|
18
|
-
const styles = ":host{display:block;max-inline-size:400px}.base{display:flex;flex-direction:column}.control{
|
|
17
|
+
const styles = ":host{display:block;max-inline-size:400px}.base{display:flex;flex-direction:column}.control{display:flex;box-sizing:border-box;flex-wrap:wrap;align-items:center;justify-content:center;padding:16px;border:1px dashed var(--vvd-color-neutral-400);background-color:var(--vvd-color-cta-50);border-radius:8px;color:var(--vvd-color-neutral-600);cursor:pointer;font:var(--vvd-typography-base);gap:8px;inline-size:100%;min-block-size:52px;outline:none}.control:not(.size-expanded){min-block-size:52px}.control.size-expanded{min-block-size:120px}.control:focus-visible{--focus-stroke-gap-color: transparent;--focus-inset: 1px;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))}.main{pointer-events:none}.dz-preview{display:grid;box-sizing:border-box;padding:6px 12px;border-radius:8px;grid-template-columns:1fr auto;grid-template-rows:auto auto;inline-size:100%}.dz-preview .dz-details{display:flex;min-width:0;flex-direction:column;max-inline-size:100%}.dz-preview .dz-details .dz-filename{overflow:hidden;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-overflow:ellipsis;white-space:nowrap}.dz-preview .dz-details .dz-size{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.dz-preview .dz-error-message{color:var(--vvd-color-alert-500);font:var(--vvd-typography-base-condensed);margin-block-start:4px}.dz-preview:not(.dz-error) .dz-error-message{display:none}.dz-preview.dz-error{border:1px solid var(--vvd-color-alert-500)}.dz-preview.dz-error .dz-details .dz-size,.dz-preview.dz-error .dz-progress{display:none}.dz-preview .remove-btn{display:inline;align-self:center;grid-column:2/-1;grid-row:1/-1}.message{margin-block-start:4px;--_low-ink-color: var(--vvd-color-neutral-600)}.preview-list{display:flex;flex-direction:column;gap:12px;margin-block-start:12px;overflow-y:auto}.preview-list:empty{display:none}\n";
|
|
19
18
|
|
|
20
19
|
var objectExtend = extend;
|
|
21
20
|
|
|
@@ -2357,7 +2356,6 @@ const getClasses = ({
|
|
|
2357
2356
|
[`size-${size}`, Boolean(size)]
|
|
2358
2357
|
);
|
|
2359
2358
|
const FilePickerTemplate = (context) => {
|
|
2360
|
-
const focusTemplate = focus.focusTemplateFactory(context);
|
|
2361
2359
|
return index.html`
|
|
2362
2360
|
${(x) => {
|
|
2363
2361
|
x.setButtonTag(context.tagFor(definition.Button));
|
|
@@ -2367,7 +2365,6 @@ const FilePickerTemplate = (context) => {
|
|
|
2367
2365
|
<div ${ref.ref("control")} class="${getClasses}" tabindex="0" role="button"
|
|
2368
2366
|
@keydown="${(x, c) => x.handleKeydown(c.event)}">
|
|
2369
2367
|
<slot class="main"></slot>
|
|
2370
|
-
${() => focusTemplate}
|
|
2371
2368
|
</div>
|
|
2372
2369
|
${when.when((x) => !x.errorValidationMessage && x.helperText?.length, index$1.getFeedbackTemplate("helper", context))}
|
|
2373
2370
|
${when.when((x) => x.errorValidationMessage, index$1.getFeedbackTemplate("error", context))}
|
package/shared/definition24.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { F as FoundationElement, 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 './
|
|
3
|
+
import { f as focusRegistries } from './definition61.js';
|
|
4
4
|
import { B as Button, a as buttonRegistries } from './definition11.js';
|
|
5
5
|
import { C as Connotation } from './enums.js';
|
|
6
6
|
import './affix.js';
|
|
@@ -8,12 +8,11 @@ import { e as errorText, f as formElements, a as FormElementHelperText, g as get
|
|
|
8
8
|
import { L as Localized } from './localized.js';
|
|
9
9
|
import { F as FormAssociated } from './form-associated.js';
|
|
10
10
|
import { a as applyMixins } from './apply-mixins.js';
|
|
11
|
-
import { f as focusTemplateFactory } from './focus2.js';
|
|
12
11
|
import { w as when } from './when.js';
|
|
13
12
|
import { r as ref } from './ref.js';
|
|
14
13
|
import { c as classNames } from './class-names.js';
|
|
15
14
|
|
|
16
|
-
const styles = ":host{display:block;max-inline-size:400px}.base{display:flex;flex-direction:column}.control{
|
|
15
|
+
const styles = ":host{display:block;max-inline-size:400px}.base{display:flex;flex-direction:column}.control{display:flex;box-sizing:border-box;flex-wrap:wrap;align-items:center;justify-content:center;padding:16px;border:1px dashed var(--vvd-color-neutral-400);background-color:var(--vvd-color-cta-50);border-radius:8px;color:var(--vvd-color-neutral-600);cursor:pointer;font:var(--vvd-typography-base);gap:8px;inline-size:100%;min-block-size:52px;outline:none}.control:not(.size-expanded){min-block-size:52px}.control.size-expanded{min-block-size:120px}.control:focus-visible{--focus-stroke-gap-color: transparent;--focus-inset: 1px;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))}.main{pointer-events:none}.dz-preview{display:grid;box-sizing:border-box;padding:6px 12px;border-radius:8px;grid-template-columns:1fr auto;grid-template-rows:auto auto;inline-size:100%}.dz-preview .dz-details{display:flex;min-width:0;flex-direction:column;max-inline-size:100%}.dz-preview .dz-details .dz-filename{overflow:hidden;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-overflow:ellipsis;white-space:nowrap}.dz-preview .dz-details .dz-size{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.dz-preview .dz-error-message{color:var(--vvd-color-alert-500);font:var(--vvd-typography-base-condensed);margin-block-start:4px}.dz-preview:not(.dz-error) .dz-error-message{display:none}.dz-preview.dz-error{border:1px solid var(--vvd-color-alert-500)}.dz-preview.dz-error .dz-details .dz-size,.dz-preview.dz-error .dz-progress{display:none}.dz-preview .remove-btn{display:inline;align-self:center;grid-column:2/-1;grid-row:1/-1}.message{margin-block-start:4px;--_low-ink-color: var(--vvd-color-neutral-600)}.preview-list{display:flex;flex-direction:column;gap:12px;margin-block-start:12px;overflow-y:auto}.preview-list:empty{display:none}\n";
|
|
17
16
|
|
|
18
17
|
var objectExtend = extend;
|
|
19
18
|
|
|
@@ -2355,7 +2354,6 @@ const getClasses = ({
|
|
|
2355
2354
|
[`size-${size}`, Boolean(size)]
|
|
2356
2355
|
);
|
|
2357
2356
|
const FilePickerTemplate = (context) => {
|
|
2358
|
-
const focusTemplate = focusTemplateFactory(context);
|
|
2359
2357
|
return html`
|
|
2360
2358
|
${(x) => {
|
|
2361
2359
|
x.setButtonTag(context.tagFor(Button));
|
|
@@ -2365,7 +2363,6 @@ const FilePickerTemplate = (context) => {
|
|
|
2365
2363
|
<div ${ref("control")} class="${getClasses}" tabindex="0" role="button"
|
|
2366
2364
|
@keydown="${(x, c) => x.handleKeydown(c.event)}">
|
|
2367
2365
|
<slot class="main"></slot>
|
|
2368
|
-
${() => focusTemplate}
|
|
2369
2366
|
</div>
|
|
2370
2367
|
${when((x) => !x.errorValidationMessage && x.helperText?.length, getFeedbackTemplate("helper", context))}
|
|
2371
2368
|
${when((x) => x.errorValidationMessage, getFeedbackTemplate("error", context))}
|
package/shared/definition25.cjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
const index = require('./index.cjs');
|
|
4
|
-
const definition = require('./
|
|
4
|
+
const definition = require('./definition59.cjs');
|
|
5
5
|
const classNames = require('./class-names.cjs');
|
|
6
6
|
|
|
7
7
|
const styles = ".base{z-index:1;block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) + 1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)));font:var(--vvd-typography-heading-4);inline-size:100%}.base .header-content{display:inline-flex;align-items:center;column-gap:4px}.container{display:flex;box-sizing:border-box;justify-content:space-between;background-color:var(--header-bg-color, var(--vvd-color-canvas));block-size:inherit;color:var(--vvd-color-canvas-text);column-gap:12px;padding-block:8px;padding-inline:16px}.container[part~=vvd-theme-alternate]{color-scheme:var(--vvd-color-scheme)}.app-content{--vvd-header-block-size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) + 1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}\n";
|
package/shared/definition25.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { a as attr, F as FoundationElement, h as html, r as registerFactory } from './index.js';
|
|
2
|
-
import { E as Elevation, e as elevationRegistries } from './
|
|
2
|
+
import { E as Elevation, e as elevationRegistries } from './definition59.js';
|
|
3
3
|
import { c as classNames } from './class-names.js';
|
|
4
4
|
|
|
5
5
|
const styles = ".base{z-index:1;block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) + 1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)));font:var(--vvd-typography-heading-4);inline-size:100%}.base .header-content{display:inline-flex;align-items:center;column-gap:4px}.container{display:flex;box-sizing:border-box;justify-content:space-between;background-color:var(--header-bg-color, var(--vvd-color-canvas));block-size:inherit;color:var(--vvd-color-canvas-text);column-gap:12px;padding-block:8px;padding-inline:16px}.container[part~=vvd-theme-alternate]{color-scheme:var(--vvd-color-scheme)}.app-content{--vvd-header-block-size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) + 1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}\n";
|
package/shared/definition28.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
|
const applyMixins = require('./apply-mixins.cjs');
|
|
8
7
|
const startEnd = require('./start-end.cjs');
|
|
@@ -571,7 +570,7 @@ index.__decorate([
|
|
|
571
570
|
index.observable
|
|
572
571
|
], Menu$1.prototype, "items", void 0);
|
|
573
572
|
|
|
574
|
-
const styles = ":host(:focus-visible){outline:none}:host([disabled]){pointer-events:none}.base{display:flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);gap:12px;inline-size:100%;padding-block:2px;padding-inline:16px}.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}.base{--_connotation-color-primary: var(--vvd-menu-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-menu-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-menu-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-faint: var(--vvd-menu-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-menu-item-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-menu-item-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-menu-item-accent-dim, var(--vvd-color-neutral-200))}.base:not(.two-lines){min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.two-lines{min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) + 1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}:host(:not([role=presentation]):focus-visible) .base{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));--focus-stroke-gap-color: transparent;border-radius:8px}.icon{flex-shrink:0;font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.action,.decorative{display:flex;place-content:center}.action{color:var(--_appearance-color-text)}.base.trailing .action,.base.has-meta .action{order:2}.base:not(.disabled) .decorative{color:var(--vvd-color-neutral-600)}.base.disabled .decorative{color:var(--vvd-color-neutral-200)}.base.has-meta .decorative{order:1}.chevron{order:3}.text{display:flex;overflow:hidden;flex-direction:column;margin-inline-end:auto}.text-primary,.text-secondary{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;color:var(--_appearance-color-text);font:var(--vvd-typography-base)}.text-primary{-webkit-line-clamp:var(--text-primary-line-clamp, 1)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{-webkit-line-clamp:var(--text-secondary-line-clamp, 1)}.base.two-lines .text-secondary{color:var(--vvd-color-neutral-600)}\n";
|
|
573
|
+
const styles = ":host(:focus-visible){outline:none}:host([disabled]){pointer-events:none}.base{display:flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);gap:12px;inline-size:100%;padding-block:2px;padding-inline:16px}.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}.base{--_connotation-color-primary: var(--vvd-menu-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-menu-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-menu-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-faint: var(--vvd-menu-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-menu-item-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-menu-item-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-menu-item-accent-dim, var(--vvd-color-neutral-200))}.base:not(.two-lines){min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.two-lines{min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) + 1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}:host(:not([role=presentation]):focus-visible) .base{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));--focus-stroke-gap-color: transparent;border-radius:8px}.icon{flex-shrink:0;font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.action,.decorative{display:flex;place-content:center}.action{color:var(--_appearance-color-text)}:host(:not([check-appearance],[aria-checked=true])) .action{color:var(--vvd-color-neutral-500)}.base.trailing .action,.base.has-meta .action{order:2}.base:not(.disabled) .decorative{color:var(--vvd-color-neutral-600)}.base.disabled .decorative{color:var(--vvd-color-neutral-200)}.base.has-meta .decorative{order:1}.chevron{order:3}.text{display:flex;overflow:hidden;flex-direction:column;margin-inline-end:auto}.text-primary,.text-secondary{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;color:var(--_appearance-color-text);font:var(--vvd-typography-base)}.text-primary{-webkit-line-clamp:var(--text-primary-line-clamp, 1)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{-webkit-line-clamp:var(--text-secondary-line-clamp, 1)}.base.two-lines:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-600)}\n";
|
|
575
574
|
|
|
576
575
|
var __defProp$1 = Object.defineProperty;
|
|
577
576
|
var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
|
|
@@ -840,7 +839,7 @@ const menuItemDefinition = MenuItem.compose({
|
|
|
840
839
|
template: MenuItemTemplate,
|
|
841
840
|
styles
|
|
842
841
|
});
|
|
843
|
-
const menuItemRegistries = [menuItemDefinition(), ...definition.iconRegistries
|
|
842
|
+
const menuItemRegistries = [menuItemDefinition(), ...definition.iconRegistries];
|
|
844
843
|
const registerMenuItem = index.registerFactory(menuItemRegistries);
|
|
845
844
|
|
|
846
845
|
exports.MenuItemRole = MenuItemRole;
|
package/shared/definition28.js
CHANGED
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
import { F as FoundationElement, D as DOM, _ 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 { A as AffixIcon, a as affixIconTemplateFactory } from './affix.js';
|
|
5
4
|
import { a as applyMixins } from './apply-mixins.js';
|
|
6
5
|
import { S as StartEnd } from './start-end.js';
|
|
7
6
|
import { D as Direction, g as getDirection } from './direction.js';
|
|
8
7
|
import { i as keyArrowLeft, h as keyArrowRight, a as keySpace, k as keyEnter, g as keyHome, d as keyEnd, e as keyArrowUp, f as keyArrowDown } from './key-codes.js';
|
|
9
8
|
import { I as Icon } from './icon.js';
|
|
10
|
-
import {
|
|
9
|
+
import { b as anchored } from './anchored.js';
|
|
11
10
|
import { i as isHTMLElement } from './dom.js';
|
|
12
11
|
import { s as slotted, e as elements } from './slotted.js';
|
|
13
12
|
import { w as when } from './when.js';
|
|
@@ -569,7 +568,7 @@ __decorate([
|
|
|
569
568
|
observable
|
|
570
569
|
], Menu$1.prototype, "items", void 0);
|
|
571
570
|
|
|
572
|
-
const styles = ":host(:focus-visible){outline:none}:host([disabled]){pointer-events:none}.base{display:flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);gap:12px;inline-size:100%;padding-block:2px;padding-inline:16px}.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}.base{--_connotation-color-primary: var(--vvd-menu-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-menu-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-menu-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-faint: var(--vvd-menu-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-menu-item-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-menu-item-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-menu-item-accent-dim, var(--vvd-color-neutral-200))}.base:not(.two-lines){min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.two-lines{min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) + 1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}:host(:not([role=presentation]):focus-visible) .base{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));--focus-stroke-gap-color: transparent;border-radius:8px}.icon{flex-shrink:0;font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.action,.decorative{display:flex;place-content:center}.action{color:var(--_appearance-color-text)}.base.trailing .action,.base.has-meta .action{order:2}.base:not(.disabled) .decorative{color:var(--vvd-color-neutral-600)}.base.disabled .decorative{color:var(--vvd-color-neutral-200)}.base.has-meta .decorative{order:1}.chevron{order:3}.text{display:flex;overflow:hidden;flex-direction:column;margin-inline-end:auto}.text-primary,.text-secondary{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;color:var(--_appearance-color-text);font:var(--vvd-typography-base)}.text-primary{-webkit-line-clamp:var(--text-primary-line-clamp, 1)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{-webkit-line-clamp:var(--text-secondary-line-clamp, 1)}.base.two-lines .text-secondary{color:var(--vvd-color-neutral-600)}\n";
|
|
571
|
+
const styles = ":host(:focus-visible){outline:none}:host([disabled]){pointer-events:none}.base{display:flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);gap:12px;inline-size:100%;padding-block:2px;padding-inline:16px}.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}.base{--_connotation-color-primary: var(--vvd-menu-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-menu-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-menu-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-faint: var(--vvd-menu-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-menu-item-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-menu-item-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-menu-item-accent-dim, var(--vvd-color-neutral-200))}.base:not(.two-lines){min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.two-lines{min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) + 1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}:host(:not([role=presentation]):focus-visible) .base{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));--focus-stroke-gap-color: transparent;border-radius:8px}.icon{flex-shrink:0;font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.action,.decorative{display:flex;place-content:center}.action{color:var(--_appearance-color-text)}:host(:not([check-appearance],[aria-checked=true])) .action{color:var(--vvd-color-neutral-500)}.base.trailing .action,.base.has-meta .action{order:2}.base:not(.disabled) .decorative{color:var(--vvd-color-neutral-600)}.base.disabled .decorative{color:var(--vvd-color-neutral-200)}.base.has-meta .decorative{order:1}.chevron{order:3}.text{display:flex;overflow:hidden;flex-direction:column;margin-inline-end:auto}.text-primary,.text-secondary{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;color:var(--_appearance-color-text);font:var(--vvd-typography-base)}.text-primary{-webkit-line-clamp:var(--text-primary-line-clamp, 1)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{-webkit-line-clamp:var(--text-secondary-line-clamp, 1)}.base.two-lines:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-600)}\n";
|
|
573
572
|
|
|
574
573
|
var __defProp$1 = Object.defineProperty;
|
|
575
574
|
var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
|
|
@@ -838,7 +837,7 @@ const menuItemDefinition = MenuItem.compose({
|
|
|
838
837
|
template: MenuItemTemplate,
|
|
839
838
|
styles
|
|
840
839
|
});
|
|
841
|
-
const menuItemRegistries = [menuItemDefinition(), ...iconRegistries
|
|
840
|
+
const menuItemRegistries = [menuItemDefinition(), ...iconRegistries];
|
|
842
841
|
const registerMenuItem = registerFactory(menuItemRegistries);
|
|
843
842
|
|
|
844
843
|
export { MenuItemRole as M, menuItemRegistries as a, Menu as b, menuItemDefinition as m, registerMenuItem as r };
|
package/shared/definition29.cjs
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
const index = require('./index.cjs');
|
|
4
|
-
const definition = require('./
|
|
4
|
+
const definition = require('./definition60.cjs');
|
|
5
5
|
const definition$1 = require('./definition28.cjs');
|
|
6
|
+
const anchored = require('./anchored.cjs');
|
|
6
7
|
const slotted = require('./slotted.cjs');
|
|
7
8
|
const classNames = require('./class-names.cjs');
|
|
8
9
|
|
|
9
|
-
const styles = ".base{display:flex;box-sizing:border-box;flex-direction:column;gap:8px;inline-size:max-content;max-block-size:var(--menu-block-size, 408px);max-inline-size:var(--menu-max-inline-size);min-inline-size:var(--menu-min-inline-size);overflow-x:hidden;overflow-y:auto;padding-block:8px}::slotted(a){color:var(--vvd-color-canvas-text);text-decoration:none}::slotted(a[role=menuitem]: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));--focus-stroke-gap-color: transparent;display:block;border-radius:8px}.header{padding-block-start:8px;padding-inline:16px}.hide-header .header,.hide-body .body{display:none}.action-items{display:flex;justify-content:flex-end;gap:8px;padding-inline:8px}.hide-actions .action-items{display:none}\n";
|
|
10
|
+
const styles = ":host{display:var(--_popup-display, inline)}:host([slotted-anchor]){--_popup-display: contents}.base{display:flex;box-sizing:border-box;flex-direction:column;gap:8px;inline-size:max-content;max-block-size:var(--menu-block-size, 408px);max-inline-size:var(--menu-max-inline-size);min-inline-size:var(--menu-min-inline-size);overflow-x:hidden;overflow-y:auto;padding-block:8px}::slotted(a){color:var(--vvd-color-canvas-text);text-decoration:none}::slotted(a[role=menuitem]: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));--focus-stroke-gap-color: transparent;display:block;border-radius:8px}.header{padding-block-start:8px;padding-inline:16px}.hide-header .header,.hide-body .body{display:none}.action-items{display:flex;justify-content:flex-end;gap:8px;padding-inline:8px}.hide-actions .action-items{display:none}\n";
|
|
10
11
|
|
|
11
12
|
const getClasses = ({
|
|
12
13
|
headerSlottedContent,
|
|
@@ -26,12 +27,14 @@ function handleEscapeKey(menu, event) {
|
|
|
26
27
|
}
|
|
27
28
|
const MenuTemplate = (context) => {
|
|
28
29
|
const popupTag = context.tagFor(definition.Popup);
|
|
30
|
+
const anchorSlotTemplate = anchored.anchorSlotTemplateFactory();
|
|
29
31
|
function handlePopupEvents(x, e, state) {
|
|
30
32
|
e.stopPropagation();
|
|
31
33
|
x.open = state;
|
|
32
34
|
}
|
|
33
35
|
return index.html`
|
|
34
36
|
<template role="presentation">
|
|
37
|
+
${anchorSlotTemplate}
|
|
35
38
|
<${popupTag}
|
|
36
39
|
:placement=${(x) => x.placement}
|
|
37
40
|
:open=${(x) => x.open}
|
package/shared/definition29.js
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import { h as html, r as registerFactory } from './index.js';
|
|
2
|
-
import { P as Popup, p as popupRegistries } from './
|
|
2
|
+
import { P as Popup, p as popupRegistries } from './definition60.js';
|
|
3
3
|
import { b as Menu, a as menuItemRegistries } from './definition28.js';
|
|
4
|
+
import { a as anchorSlotTemplateFactory } from './anchored.js';
|
|
4
5
|
import { s as slotted } from './slotted.js';
|
|
5
6
|
import { c as classNames } from './class-names.js';
|
|
6
7
|
|
|
7
|
-
const styles = ".base{display:flex;box-sizing:border-box;flex-direction:column;gap:8px;inline-size:max-content;max-block-size:var(--menu-block-size, 408px);max-inline-size:var(--menu-max-inline-size);min-inline-size:var(--menu-min-inline-size);overflow-x:hidden;overflow-y:auto;padding-block:8px}::slotted(a){color:var(--vvd-color-canvas-text);text-decoration:none}::slotted(a[role=menuitem]: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));--focus-stroke-gap-color: transparent;display:block;border-radius:8px}.header{padding-block-start:8px;padding-inline:16px}.hide-header .header,.hide-body .body{display:none}.action-items{display:flex;justify-content:flex-end;gap:8px;padding-inline:8px}.hide-actions .action-items{display:none}\n";
|
|
8
|
+
const styles = ":host{display:var(--_popup-display, inline)}:host([slotted-anchor]){--_popup-display: contents}.base{display:flex;box-sizing:border-box;flex-direction:column;gap:8px;inline-size:max-content;max-block-size:var(--menu-block-size, 408px);max-inline-size:var(--menu-max-inline-size);min-inline-size:var(--menu-min-inline-size);overflow-x:hidden;overflow-y:auto;padding-block:8px}::slotted(a){color:var(--vvd-color-canvas-text);text-decoration:none}::slotted(a[role=menuitem]: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));--focus-stroke-gap-color: transparent;display:block;border-radius:8px}.header{padding-block-start:8px;padding-inline:16px}.hide-header .header,.hide-body .body{display:none}.action-items{display:flex;justify-content:flex-end;gap:8px;padding-inline:8px}.hide-actions .action-items{display:none}\n";
|
|
8
9
|
|
|
9
10
|
const getClasses = ({
|
|
10
11
|
headerSlottedContent,
|
|
@@ -24,12 +25,14 @@ function handleEscapeKey(menu, event) {
|
|
|
24
25
|
}
|
|
25
26
|
const MenuTemplate = (context) => {
|
|
26
27
|
const popupTag = context.tagFor(Popup);
|
|
28
|
+
const anchorSlotTemplate = anchorSlotTemplateFactory();
|
|
27
29
|
function handlePopupEvents(x, e, state) {
|
|
28
30
|
e.stopPropagation();
|
|
29
31
|
x.open = state;
|
|
30
32
|
}
|
|
31
33
|
return html`
|
|
32
34
|
<template role="presentation">
|
|
35
|
+
${anchorSlotTemplate}
|
|
33
36
|
<${popupTag}
|
|
34
37
|
:placement=${(x) => x.placement}
|
|
35
38
|
:open=${(x) => x.open}
|
package/shared/definition30.cjs
CHANGED
|
@@ -2,14 +2,13 @@
|
|
|
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
7
|
const icon = require('./icon.cjs');
|
|
9
8
|
const ref = require('./ref.cjs');
|
|
10
9
|
const when = require('./when.cjs');
|
|
11
10
|
|
|
12
|
-
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
|
|
11
|
+
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";
|
|
13
12
|
|
|
14
13
|
var __defProp = Object.defineProperty;
|
|
15
14
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
@@ -90,7 +89,7 @@ const navDisclosureDefinition = NavDisclosure.compose({
|
|
|
90
89
|
template: NavDisclosureTemplate,
|
|
91
90
|
styles
|
|
92
91
|
});
|
|
93
|
-
const navDisclosureRegistries = [navDisclosureDefinition(), ...definition.iconRegistries
|
|
92
|
+
const navDisclosureRegistries = [navDisclosureDefinition(), ...definition.iconRegistries];
|
|
94
93
|
const registerNavDisclosure = index.registerFactory(navDisclosureRegistries);
|
|
95
94
|
|
|
96
95
|
exports.navDisclosureDefinition = navDisclosureDefinition;
|
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 './definition59.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('./definition59.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 './definition59.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('./definition59.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;
|