@vonage/vivid 3.47.0 → 3.48.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.
Files changed (42) hide show
  1. package/README.md +3 -403
  2. package/alert/index.js +0 -1
  3. package/audio-player/index.js +0 -1
  4. package/banner/index.js +0 -1
  5. package/button/index.js +0 -1
  6. package/combobox/index.js +1 -1
  7. package/custom-elements.json +30 -35
  8. package/date-picker/index.js +1 -1
  9. package/date-range-picker/index.js +1 -1
  10. package/dialog/index.js +1 -1
  11. package/file-picker/index.js +1 -1
  12. package/index.js +1 -1
  13. package/lib/menu-item/menu-item.d.ts +1 -0
  14. package/lib/tabs/tabs.d.ts +1 -0
  15. package/menu/index.js +0 -1
  16. package/menu-item/index.js +0 -1
  17. package/nav-disclosure/index.js +0 -1
  18. package/number-field/index.js +1 -1
  19. package/package.json +1 -1
  20. package/pagination/index.js +0 -1
  21. package/popup/index.js +0 -1
  22. package/select/index.js +1 -1
  23. package/shared/definition11.js +1 -6
  24. package/shared/definition28.js +5 -4
  25. package/shared/definition29.js +1 -1
  26. package/shared/definition30.js +1 -4
  27. package/shared/definition41.js +1 -6
  28. package/shared/definition45.js +1 -6
  29. package/shared/definition46.js +2 -7
  30. package/shared/definition49.js +12 -3
  31. package/shared/presentationDate.js +1 -6
  32. package/split-button/index.js +0 -1
  33. package/style.css +1 -1
  34. package/styles/core/all.css +1 -1
  35. package/styles/core/theme.css +1 -1
  36. package/styles/core/typography.css +1 -1
  37. package/styles/tokens/theme-dark.css +4 -4
  38. package/styles/tokens/theme-light.css +4 -4
  39. package/styles/tokens/vivid-2-compat.css +1 -1
  40. package/switch/index.js +0 -5
  41. package/toggletip/index.js +0 -1
  42. package/tooltip/index.js +0 -1
package/custom-elements.json CHANGED
@@ -4800,19 +4800,6 @@
4800
4800
  "module": "libs/components/src/shared/date-picker/date-picker-base.ts"
4801
4801
  }
4802
4802
  },
4803
- {
4804
- "kind": "field",
4805
- "name": "#isClosingPopup",
4806
- "privacy": "private",
4807
- "type": {
4808
- "text": "boolean"
4809
- },
4810
- "default": "false",
4811
- "inheritedFrom": {
4812
- "name": "DatePickerBase",
4813
- "module": "libs/components/src/shared/date-picker/date-picker-base.ts"
4814
- }
4815
- },
4816
4803
  {
4817
4804
  "kind": "method",
4818
4805
  "name": "#openPopupIfPossible",
@@ -5245,19 +5232,6 @@
5245
5232
  "module": "libs/components/src/shared/date-picker/date-picker-base.ts"
5246
5233
  }
5247
5234
  },
5248
- {
5249
- "kind": "field",
5250
- "name": "#isClosingPopup",
5251
- "privacy": "private",
5252
- "type": {
5253
- "text": "boolean"
5254
- },
5255
- "default": "false",
5256
- "inheritedFrom": {
5257
- "name": "DatePickerBase",
5258
- "module": "libs/components/src/shared/date-picker/date-picker-base.ts"
5259
- }
5260
- },
5261
5235
  {
5262
5236
  "kind": "method",
5263
5237
  "name": "#openPopupIfPossible",
@@ -7738,6 +7712,10 @@
7738
7712
  "description": "Assign nodes to the `meta` slot to set a badge or an additional icon.",
7739
7713
  "name": "meta"
7740
7714
  },
7715
+ {
7716
+ "description": "Assign nodes to the `meta` slot to set a badge or an additional icon.",
7717
+ "name": "trailing-meta"
7718
+ },
7741
7719
  {
7742
7720
  "description": "Assign a Menu to the `submenu` slot to add a submenu.",
7743
7721
  "name": "submenu"
@@ -7781,6 +7759,13 @@
7781
7759
  "description": "Controls the appearance of the check indicator.",
7782
7760
  "privacy": "public"
7783
7761
  },
7762
+ {
7763
+ "kind": "field",
7764
+ "name": "trailingMetaSlottedContent",
7765
+ "type": {
7766
+ "text": "HTMLElement[] | undefined"
7767
+ }
7768
+ },
7784
7769
  {
7785
7770
  "kind": "field",
7786
7771
  "name": "#submenuArray",
@@ -11900,6 +11885,16 @@
11900
11885
  "description": "sets the initial preferred margin from predefined available options",
11901
11886
  "privacy": "public"
11902
11887
  },
11888
+ {
11889
+ "kind": "field",
11890
+ "name": "scrollablePanel",
11891
+ "type": {
11892
+ "text": "boolean"
11893
+ },
11894
+ "default": "false",
11895
+ "description": "sets overflow to the tab-panel",
11896
+ "privacy": "public"
11897
+ },
11903
11898
  {
11904
11899
  "kind": "method",
11905
11900
  "name": "connotationChanged"
@@ -12001,6 +11996,15 @@
12001
11996
  },
12002
11997
  "description": "sets the initial preferred margin from predefined available options",
12003
11998
  "fieldName": "gutters"
11999
+ },
12000
+ {
12001
+ "name": "scrollable-panel",
12002
+ "type": {
12003
+ "text": "boolean"
12004
+ },
12005
+ "default": "false",
12006
+ "description": "sets overflow to the tab-panel",
12007
+ "fieldName": "scrollablePanel"
12004
12008
  }
12005
12009
  ],
12006
12010
  "superclass": {
@@ -13693,15 +13697,6 @@
13693
13697
  "name": "#dismissOnClickOutside",
13694
13698
  "privacy": "private"
13695
13699
  },
13696
- {
13697
- "kind": "field",
13698
- "name": "#isClosingPopup",
13699
- "privacy": "private",
13700
- "type": {
13701
- "text": "boolean"
13702
- },
13703
- "default": "false"
13704
- },
13705
13700
  {
13706
13701
  "kind": "method",
13707
13702
  "name": "#openPopupIfPossible"
package/date-picker/index.js CHANGED
@@ -20,7 +20,6 @@ import '../shared/key-codes.js';
20
20
  import '../shared/aria-global.js';
21
21
  import '../shared/start-end.js';
22
22
  import '../shared/ref.js';
23
- import '../shared/focus2.js';
24
23
  import '../shared/enums.js';
25
24
  import '../shared/definition59.js';
26
25
  import '../shared/definition53.js';
@@ -29,6 +28,7 @@ import '../locales/en-US.js';
29
28
  import '../shared/Reflector.js';
30
29
  import '../shared/text-field2.js';
31
30
  import '../shared/text-field.js';
31
+ import '../shared/focus2.js';
32
32
  import '../shared/definition21.js';
33
33
  import '../shared/aria.js';
34
34
  import '../shared/presentationDate.js';
package/date-range-picker/index.js CHANGED
@@ -19,7 +19,6 @@ import '../shared/key-codes.js';
19
19
  import '../shared/aria-global.js';
20
20
  import '../shared/start-end.js';
21
21
  import '../shared/ref.js';
22
- import '../shared/focus2.js';
23
22
  import '../shared/enums.js';
24
23
  import '../shared/definition60.js';
25
24
  import '../shared/definition59.js';
@@ -29,6 +28,7 @@ import '../locales/en-US.js';
29
28
  import '../shared/Reflector.js';
30
29
  import '../shared/text-field2.js';
31
30
  import '../shared/text-field.js';
31
+ import '../shared/focus2.js';
32
32
  import '../shared/definition21.js';
33
33
  import '../shared/aria.js';
34
34
  import '../shared/presentationDate.js';
package/dialog/index.js CHANGED
@@ -19,11 +19,11 @@ import '../shared/key-codes.js';
19
19
  import '../shared/aria-global.js';
20
20
  import '../shared/start-end.js';
21
21
  import '../shared/ref.js';
22
- import '../shared/focus2.js';
23
22
  import '../shared/enums.js';
24
23
  import '../shared/definition59.js';
25
24
  import '../shared/index2.js';
26
25
  import '../locales/en-US.js';
27
26
  import '../shared/localized.js';
27
+ import '../shared/focus2.js';
28
28
 
29
29
  registerDialog();
package/file-picker/index.js CHANGED
@@ -19,10 +19,10 @@ import '../shared/key-codes.js';
19
19
  import '../shared/aria-global.js';
20
20
  import '../shared/start-end.js';
21
21
  import '../shared/ref.js';
22
- import '../shared/focus2.js';
23
22
  import '../shared/enums.js';
24
23
  import '../shared/index2.js';
25
24
  import '../locales/en-US.js';
26
25
  import '../shared/localized.js';
26
+ import '../shared/focus2.js';
27
27
 
28
28
  registerFilePicker();
package/index.js CHANGED
@@ -79,9 +79,9 @@ import './shared/aria-global.js';
79
79
  import './shared/breadcrumb-item.js';
80
80
  import './shared/anchor.js';
81
81
  import './shared/text-anchor.template.js';
82
- import './shared/focus2.js';
83
82
  import './shared/calendar-event.js';
84
83
  import './shared/repeat.js';
84
+ import './shared/focus2.js';
85
85
  import './shared/definition60.js';
86
86
  import './shared/text-field.js';
87
87
  import './shared/listbox.js';
package/lib/menu-item/menu-item.d.ts CHANGED
@@ -16,6 +16,7 @@ export declare class MenuItem extends FastMenuItem {
16
16
  textSecondary?: string;
17
17
  checkTrailing: boolean;
18
18
  checkedAppearance?: CheckAppearance;
19
+ trailingMetaSlottedContent?: HTMLElement[];
19
20
  constructor();
20
21
  }
21
22
  export interface MenuItem extends AffixIcon {
package/lib/tabs/tabs.d.ts CHANGED
@@ -8,6 +8,7 @@ export declare class Tabs extends FoundationTabs {
8
8
  tablist?: HTMLElement;
9
9
  connotation?: TabsConnotation;
10
10
  gutters?: Gutters;
11
+ scrollablePanel: boolean;
11
12
  connotationChanged(): void;
12
13
  orientationChanged(): void;
13
14
  activeidChanged(oldValue: string, newValue: string): void;
package/menu/index.js CHANGED
@@ -20,7 +20,6 @@ import '../shared/key-codes.js';
20
20
  import '../shared/aria-global.js';
21
21
  import '../shared/start-end.js';
22
22
  import '../shared/ref.js';
23
- import '../shared/focus2.js';
24
23
  import '../shared/enums.js';
25
24
  import '../shared/definition59.js';
26
25
  import '../shared/definition28.js';
package/menu-item/index.js CHANGED
@@ -16,6 +16,5 @@ import '../shared/direction.js';
16
16
  import '../shared/key-codes.js';
17
17
  import '../shared/anchored.js';
18
18
  import '../shared/dom.js';
19
- import '../shared/focus2.js';
20
19
 
21
20
  registerMenuItem();
package/nav-disclosure/index.js CHANGED
@@ -10,7 +10,6 @@ import '../shared/focus.js';
10
10
  import '../shared/affix.js';
11
11
  import '../shared/slotted.js';
12
12
  import '../shared/apply-mixins.js';
13
- import '../shared/focus2.js';
14
13
  import '../shared/ref.js';
15
14
 
16
15
  registerNavDisclosure();
package/number-field/index.js CHANGED
@@ -19,7 +19,6 @@ import '../shared/key-codes.js';
19
19
  import '../shared/aria-global.js';
20
20
  import '../shared/start-end.js';
21
21
  import '../shared/ref.js';
22
- import '../shared/focus2.js';
23
22
  import '../shared/enums.js';
24
23
  import '../shared/definition21.js';
25
24
  import '../shared/aria.js';
@@ -27,5 +26,6 @@ import '../shared/index2.js';
27
26
  import '../locales/en-US.js';
28
27
  import '../shared/localized.js';
29
28
  import '../shared/text-field2.js';
29
+ import '../shared/focus2.js';
30
30
 
31
31
  registerNumberField();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vonage/vivid",
3
- "version": "3.47.0",
3
+ "version": "3.48.0",
4
4
  "type": "module",
5
5
  "module": "./index.js",
6
6
  "main": "./index.js",
package/pagination/index.js CHANGED
@@ -19,7 +19,6 @@ import '../shared/key-codes.js';
19
19
  import '../shared/aria-global.js';
20
20
  import '../shared/start-end.js';
21
21
  import '../shared/ref.js';
22
- import '../shared/focus2.js';
23
22
  import '../shared/enums.js';
24
23
  import '../shared/children.js';
25
24
  import '../shared/repeat.js';
package/popup/index.js CHANGED
@@ -19,7 +19,6 @@ import '../shared/key-codes.js';
19
19
  import '../shared/aria-global.js';
20
20
  import '../shared/start-end.js';
21
21
  import '../shared/ref.js';
22
- import '../shared/focus2.js';
23
22
  import '../shared/enums.js';
24
23
  import '../shared/definition59.js';
25
24
 
package/select/index.js CHANGED
@@ -20,11 +20,11 @@ import '../shared/key-codes.js';
20
20
  import '../shared/aria-global.js';
21
21
  import '../shared/start-end.js';
22
22
  import '../shared/ref.js';
23
- import '../shared/focus2.js';
24
23
  import '../shared/enums.js';
25
24
  import '../shared/definition59.js';
26
25
  import '../shared/definition35.js';
27
26
  import '../shared/dom.js';
27
+ import '../shared/focus2.js';
28
28
  import '../shared/index2.js';
29
29
  import '../locales/en-US.js';
30
30
  import '../shared/listbox.js';
package/shared/definition11.js CHANGED
@@ -5,7 +5,6 @@ import { P as ProgressRing, a as progressRingRegistries } from './definition37.j
5
5
  import { b as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
6
6
  import { B as Button$1 } from './button.js';
7
7
  import { a as applyMixins } from './apply-mixins.js';
8
- import { f as focusTemplateFactory } from './focus2.js';
9
8
  import { b as Size } from './enums.js';
10
9
  import { r as ref } from './ref.js';
11
10
  import { w as when } from './when.js';
@@ -62,7 +61,7 @@ __decorateClass([
62
61
  ], Button.prototype, "label", 2);
63
62
  applyMixins(Button, AffixIconWithTrailing);
64
63
 
65
- const styles = ":host{display:inline-block}.control{position:relative;display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;border:0 none;margin:0;background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size);border-radius:var(--_button-border-radius);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);gap:var(--_button-icon-gap);vertical-align:middle}.control.connotation-cta{--_connotation-color-primary: var(--vvd-button-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-button-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-button-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-button-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-button-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-button-cta-soft, var(--vvd-color-cta-100));--_connotation-color-faint: var(--vvd-button-cta-faint, var(--vvd-color-cta-50))}.control.connotation-success{--_connotation-color-primary: var(--vvd-button-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-button-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-contrast: var(--vvd-button-success-contrast, var(--vvd-color-success-800));--_connotation-color-fierce: var(--vvd-button-success-fierce, var(--vvd-color-success-700));--_connotation-color-firm: var(--vvd-button-success-firm, var(--vvd-color-success-600));--_connotation-color-soft: var(--vvd-button-success-soft, var(--vvd-color-success-100));--_connotation-color-faint: var(--vvd-button-success-faint, var(--vvd-color-success-50))}.control.connotation-alert{--_connotation-color-primary: var(--vvd-button-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-button-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-contrast: var(--vvd-button-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-fierce: var(--vvd-button-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-firm: var(--vvd-button-alert-firm, var(--vvd-color-alert-600));--_connotation-color-soft: var(--vvd-button-alert-soft, var(--vvd-color-alert-100));--_connotation-color-faint: var(--vvd-button-alert-faint, var(--vvd-color-alert-50))}.control:not(.connotation-cta,.connotation-success,.connotation-alert){--_connotation-color-primary: var(--vvd-button-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-button-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-button-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-button-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-button-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-button-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-faint: var(--vvd-button-accent-faint, var(--vvd-color-neutral-50))}.control.appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control.appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm)}.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-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm)}.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(:disabled,.disabled).appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:where(:disabled,.disabled).appearance-outlined{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:where(:disabled,.disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(:active,.active):where(:not(:disabled,.disabled)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control:where(:active,.active):where(:not(:disabled,.disabled)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-firm)}.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 .text{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--button-line-clamp, 1);max-inline-size:100%}.control:not(.icon-only){inline-size:100%}@supports selector(:focus-visible){.control:focus-visible{outline:none}}@supports (user-select: none){.control{user-select:none}}.control:not(:disabled){cursor:pointer}.control:disabled{cursor:not-allowed}.control.icon-only{contain:size;padding-inline:0;place-content:center}@supports (aspect-ratio: 1){.control.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.control.icon-only{inline-size:var(--_button-block-size)}}.control:not(.stacked).size-super-condensed{--_button-block-size:calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));font:var(--vvd-typography-base-condensed-bold)}.control:not(.stacked).size-super-condensed:not(.icon-only){--_button-icon-gap: 4px;padding-inline:8px}.control:not(.stacked).size-condensed{--_button-block-size:calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));font:var(--vvd-typography-base-condensed-bold)}.control:not(.stacked).size-condensed:not(.icon-only){--_button-icon-gap: 8px;padding-inline:12px}.control:not(.stacked).size-expanded{--_button-block-size:calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));font:var(--vvd-typography-base-extended-bold)}.control:not(.stacked).size-expanded:not(.icon-only){--_button-icon-gap: 10px;padding-inline:20px}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed){--_button-block-size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));font:var(--vvd-typography-base-bold)}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){--_button-icon-gap: 8px;padding-inline:16px}.control:not(.shape-pill){--_button-border-radius: 8px}.control:not(.shape-pill).size-condensed:not(.stacked),.control:not(.shape-pill).size-super-condensed:not(.stacked){--_button-border-radius: 4px}.control.shape-pill:not(.icon-only,.stacked){--_button-border-radius: 24px}.control.shape-pill.stacked{--_button-border-radius: 24px}.control.shape-pill.icon-only{--_button-border-radius: 50%}.control.stacked{flex-direction:column;justify-content:center}.control.stacked.size-super-condensed{--stacked-size:calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));--_button-block-size: calc(var(--stacked-size) + 20px);font:var(--vvd-typography-base-condensed-bold)}.control.stacked.size-super-condensed:not(.icon-only){--_button-icon-gap: 4px;padding-inline:8px}.control.stacked.size-condensed{--stacked-size:calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));--_button-block-size: calc(var(--stacked-size) + 24px);font:var(--vvd-typography-base-condensed-bold)}.control.stacked.size-condensed:not(.icon-only){--_button-icon-gap: 6px;padding-inline:12px}.control.stacked.size-expanded{--stacked-size:calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));--_button-block-size: calc(var(--stacked-size) + 32px);font:var(--vvd-typography-base-extended-bold)}.control.stacked.size-expanded:not(.icon-only){--_button-icon-gap: 10px;padding-inline:20px}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed){--stacked-size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));--_button-block-size: calc(var(--stacked-size) + 28px);font:var(--vvd-typography-base-bold)}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){--_button-icon-gap: 8px;padding-inline:16px}slot[name=icon]{line-height:1}.icon-trailing slot[name=icon]{display:flex;order:1}.control.stacked>slot[name=icon]{font-size:calc(var(--stacked-size) / 2)}.control:not(.stacked)>slot[name=icon]{font-size:calc(var(--_button-block-size) / 2)}.focus-indicator{--focus-stroke-gap-color: transparent}.appearance-filled .focus-indicator{--focus-stroke-gap-color: unset}.control:not(:focus-visible)>.focus-indicator{display:none}:host(:not([icon])) .pending{position:absolute}:host(:not([icon])) .pending+.text{visibility:hidden}\n";
64
+ const styles = ":host{display:inline-block}.control{display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;border:0 none;margin:0;background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size);border-radius:var(--_button-border-radius);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);gap:var(--_button-icon-gap);vertical-align:middle;--focus-stroke-gap-color: transparent}.control.connotation-cta{--_connotation-color-primary: var(--vvd-button-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-button-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-button-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-button-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-button-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-button-cta-soft, var(--vvd-color-cta-100));--_connotation-color-faint: var(--vvd-button-cta-faint, var(--vvd-color-cta-50))}.control.connotation-success{--_connotation-color-primary: var(--vvd-button-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-button-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-contrast: var(--vvd-button-success-contrast, var(--vvd-color-success-800));--_connotation-color-fierce: var(--vvd-button-success-fierce, var(--vvd-color-success-700));--_connotation-color-firm: var(--vvd-button-success-firm, var(--vvd-color-success-600));--_connotation-color-soft: var(--vvd-button-success-soft, var(--vvd-color-success-100));--_connotation-color-faint: var(--vvd-button-success-faint, var(--vvd-color-success-50))}.control.connotation-alert{--_connotation-color-primary: var(--vvd-button-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-button-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-contrast: var(--vvd-button-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-fierce: var(--vvd-button-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-firm: var(--vvd-button-alert-firm, var(--vvd-color-alert-600));--_connotation-color-soft: var(--vvd-button-alert-soft, var(--vvd-color-alert-100));--_connotation-color-faint: var(--vvd-button-alert-faint, var(--vvd-color-alert-50))}.control:not(.connotation-cta,.connotation-success,.connotation-alert){--_connotation-color-primary: var(--vvd-button-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-button-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-button-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-button-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-button-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-button-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-faint: var(--vvd-button-accent-faint, var(--vvd-color-neutral-50))}.control.appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control.appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm)}.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-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm)}.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(:disabled,.disabled).appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:where(:disabled,.disabled).appearance-outlined{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:where(:disabled,.disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(:active,.active):where(:not(:disabled,.disabled)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control:where(:active,.active):where(:not(:disabled,.disabled)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-firm)}.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 .text{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--button-line-clamp, 1);max-inline-size:100%}.control:not(.icon-only){inline-size:100%}.control.appearance-filled{--focus-stroke-gap-color: unset}.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))}@supports (user-select: none){.control{user-select:none}}.control:not(:disabled){cursor:pointer}.control:disabled{cursor:not-allowed}.control.icon-only{contain:size;padding-inline:0;place-content:center}@supports (aspect-ratio: 1){.control.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.control.icon-only{inline-size:var(--_button-block-size)}}.control:not(.stacked).size-super-condensed{--_button-block-size:calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));font:var(--vvd-typography-base-condensed-bold)}.control:not(.stacked).size-super-condensed:not(.icon-only){--_button-icon-gap: 4px;padding-inline:8px}.control:not(.stacked).size-condensed{--_button-block-size:calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));font:var(--vvd-typography-base-condensed-bold)}.control:not(.stacked).size-condensed:not(.icon-only){--_button-icon-gap: 8px;padding-inline:12px}.control:not(.stacked).size-expanded{--_button-block-size:calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));font:var(--vvd-typography-base-extended-bold)}.control:not(.stacked).size-expanded:not(.icon-only){--_button-icon-gap: 10px;padding-inline:20px}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed){--_button-block-size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));font:var(--vvd-typography-base-bold)}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){--_button-icon-gap: 8px;padding-inline:16px}.control:not(.shape-pill){--_button-border-radius: 8px}.control:not(.shape-pill).size-condensed:not(.stacked),.control:not(.shape-pill).size-super-condensed:not(.stacked){--_button-border-radius: 4px}.control.shape-pill:not(.icon-only,.stacked){--_button-border-radius: 24px}.control.shape-pill.stacked{--_button-border-radius: 24px}.control.shape-pill.icon-only{--_button-border-radius: 50%}.control.stacked{flex-direction:column;justify-content:center}.control.stacked.size-super-condensed{--stacked-size:calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));--_button-block-size: calc(var(--stacked-size) + 20px);font:var(--vvd-typography-base-condensed-bold)}.control.stacked.size-super-condensed:not(.icon-only){--_button-icon-gap: 4px;padding-inline:8px}.control.stacked.size-condensed{--stacked-size:calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));--_button-block-size: calc(var(--stacked-size) + 24px);font:var(--vvd-typography-base-condensed-bold)}.control.stacked.size-condensed:not(.icon-only){--_button-icon-gap: 6px;padding-inline:12px}.control.stacked.size-expanded{--stacked-size:calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));--_button-block-size: calc(var(--stacked-size) + 32px);font:var(--vvd-typography-base-extended-bold)}.control.stacked.size-expanded:not(.icon-only){--_button-icon-gap: 10px;padding-inline:20px}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed){--stacked-size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));--_button-block-size: calc(var(--stacked-size) + 28px);font:var(--vvd-typography-base-bold)}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){--_button-icon-gap: 8px;padding-inline:16px}slot[name=icon]{line-height:1}.icon-trailing slot[name=icon]{display:flex;order:1}.control.stacked>slot[name=icon]{font-size:calc(var(--stacked-size) / 2)}.control:not(.stacked)>slot[name=icon]{font-size:calc(var(--_button-block-size) / 2)}:host(:not([icon])) .pending{position:absolute}:host(:not([icon])) .pending+.text{visibility:hidden}\n";
66
65
 
67
66
  const getAppearanceClassName = (appearance, disabled) => {
68
67
  let className = `appearance-${appearance}`;
@@ -105,7 +104,6 @@ function renderIconOrPending(context, icon, pending, size = Size.Normal) {
105
104
  }
106
105
  }
107
106
  const buttonTemplate = (context) => {
108
- const focusTemplate = focusTemplateFactory(context);
109
107
  return html`
110
108
  <button
111
109
  class="${getClasses}"
@@ -138,10 +136,7 @@ const buttonTemplate = (context) => {
138
136
  title="${(x) => x.title}"
139
137
  ${ref("control")}
140
138
  >
141
- ${() => focusTemplate}
142
-
143
139
  ${(x) => renderIconOrPending(context, x.icon, x.pending, x.size)}
144
-
145
140
  ${when((x) => x.label, html`<span class="text">${(x) => x.label}</span>`)}
146
141
  </button>
147
142
  `;
package/shared/definition28.js CHANGED
@@ -9,7 +9,6 @@ import { i as keyArrowLeft, h as keyArrowRight, a as keySpace, k as keyEnter, g
9
9
  import { I as Icon } from './icon.js';
10
10
  import { a as anchored } from './anchored.js';
11
11
  import { i as isHTMLElement } from './dom.js';
12
- import { f as focusTemplateFactory } from './focus2.js';
13
12
  import { s as slotted, e as elements } from './slotted.js';
14
13
  import { w as when } from './when.js';
15
14
  import { c as classNames } from './class-names.js';
@@ -570,7 +569,7 @@ __decorate([
570
569
  observable
571
570
  ], Menu$1.prototype, "items", void 0);
572
571
 
573
- const styles = "@supports selector(:focus-visible){:host(:focus-visible){outline:none}}:host([disabled]){pointer-events:none}.base{position:relative;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}.focus-indicator{border-radius:8px}:host(:not(:focus-visible)) .focus-indicator{display:none}.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:1;margin-inline-start:auto}.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;margin-inline-start:auto}.chevron{margin-inline-start:auto}.text{display:flex;overflow:hidden;flex-direction:column}.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";
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";
574
573
 
575
574
  var __defProp$1 = Object.defineProperty;
576
575
  var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
@@ -642,6 +641,9 @@ __decorateClass$1([
642
641
  __decorateClass$1([
643
642
  observable
644
643
  ], MenuItem.prototype, "metaSlottedContent", 2);
644
+ __decorateClass$1([
645
+ observable
646
+ ], MenuItem.prototype, "trailingMetaSlottedContent", 2);
645
647
  __decorateClass$1([
646
648
  observable
647
649
  ], MenuItem.prototype, "slottedSubmenu", 2);
@@ -805,7 +807,6 @@ function text() {
805
807
  }
806
808
  const MenuItemTemplate = (context) => {
807
809
  const affixIconTemplate = affixIconTemplateFactory(context);
808
- const focusTemplate = focusTemplateFactory(context);
809
810
  const iconTag = context.tagFor(Icon);
810
811
  return html`
811
812
  <template
@@ -820,11 +821,11 @@ const MenuItemTemplate = (context) => {
820
821
  @mouseout="${(x, c) => x.handleMouseOut(c.event)}"
821
822
  >
822
823
  <div class="${getClasses}">
823
- ${() => focusTemplate}
824
824
  <slot name="meta" ${slotted("metaSlottedContent")}></slot>
825
825
  ${checkIndicator(context)}
826
826
  ${when((x) => x.icon, html`<span class="decorative">${(x) => affixIconTemplate(x.icon)}</span>`)}
827
827
  ${text()}
828
+ <slot name="trailing-meta" ${slotted("trailingMetaSlottedContent")}></slot>
828
829
  ${when((x) => x.hasSubmenu, html`<${iconTag} class="chevron" name="chevron-right-line"></${iconTag}>`)}
829
830
  </div>
830
831
  <slot name="submenu" ${slotted({ property: "slottedSubmenu", filter: elements(context.tagFor(Menu)) })}></slot>
package/shared/definition29.js CHANGED
@@ -4,7 +4,7 @@ import { b as Menu, a as menuItemRegistries } from './definition28.js';
4
4
  import { s as slotted } from './slotted.js';
5
5
  import { c as classNames } from './class-names.js';
6
6
 
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){display:block;border-radius:8px;box-shadow:inset 0 0 0 3px currentColor;outline:2px solid currentColor;outline-offset:-2px}.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";
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
8
 
9
9
  const getClasses = ({
10
10
  headerSlottedContent,
package/shared/definition30.js CHANGED
@@ -4,11 +4,10 @@ import { f as focusRegistries } from './definition58.js';
4
4
  import { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
5
5
  import { a as applyMixins } from './apply-mixins.js';
6
6
  import { I as Icon } from './icon.js';
7
- import { f as focusTemplateFactory } from './focus2.js';
8
7
  import { r as ref } from './ref.js';
9
8
  import { w as when } from './when.js';
10
9
 
11
- const styles = ".control{position:relative;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))}@supports selector(:focus-visible){.control:focus-visible{outline:none}}@supports (user-select: none){.control{user-select:none}}.control .toggleIcon{margin-inline-start:auto}.focus-indicator{--focus-stroke-gap-color: transparent}.control:not(:focus-visible) .focus-indicator{display:none}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";
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;--focus-stroke-gap-color: transparent}.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))}@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";
12
11
 
13
12
  var __defProp = Object.defineProperty;
14
13
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -64,7 +63,6 @@ function getAriaCurrent(ariaCurrent, open) {
64
63
  }
65
64
  const NavDisclosureTemplate = (context) => {
66
65
  const affixIconTemplate = affixIconTemplateFactory(context);
67
- const focusTemplate = focusTemplateFactory(context);
68
66
  const iconTag = context.tagFor(Icon);
69
67
  return html`<details class="base" ${ref("details")} ?open=${(x) => x.open}>
70
68
  <summary class="control"
@@ -77,7 +75,6 @@ const NavDisclosureTemplate = (context) => {
77
75
  <slot name="meta"></slot>
78
76
  ${when((x) => x.open, html`<${iconTag} class="toggleIcon" name='chevron-up-solid'></${iconTag}>`)}
79
77
  ${when((x) => !x.open, html`<${iconTag} class="toggleIcon" name='chevron-down-solid'></${iconTag}>`)}
80
- ${() => focusTemplate}
81
78
  </summary>
82
79
  <div class="content" id="disclosure-content">
83
80
  <slot></slot>
package/shared/definition41.js CHANGED
@@ -12,7 +12,6 @@ import { F as FormAssociated } from './form-associated.js';
12
12
  import { S as SelectPosition } from './select.options.js';
13
13
  import { u as uniqueId } from './strings.js';
14
14
  import { c as keyTab, b as keyEscape, k as keyEnter, d as keyEnd, g as keyHome, a as keySpace, f as keyArrowDown, e as keyArrowUp } from './key-codes.js';
15
- import { f as focusTemplateFactory } from './focus2.js';
16
15
  import { w as when } from './when.js';
17
16
  import { r as ref } from './ref.js';
18
17
  import { s as slotted } from './slotted.js';
@@ -515,7 +514,7 @@ __decorate([
515
514
  applyMixins(DelegatesARIASelect, DelegatesARIAListbox);
516
515
  applyMixins(Select$1, StartEnd, DelegatesARIASelect);
517
516
 
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)}: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(--_connotation-color-backdrop);--_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(--_connotation-color-backdrop);--_appearance-color-outline: var(--_connotation-color-firm)}.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.connotation-success{--_connotation-color-primary: var(--vvd-select-success-primary, var(--vvd-color-success-500));--_connotation-color-backdrop: var(--vvd-select-success-backdrop, var(--vvd-color-success-50));--_connotation-color-intermediate: var(--vvd-select-success-intermediate, var(--vvd-color-success-500));--_connotation-color-firm: var(--vvd-select-success-firm, var(--vvd-color-success-600))}.control.connotation-alert{--_connotation-color-primary: var(--vvd-select-alert-primary, var(--vvd-color-alert-500));--_connotation-color-backdrop: var(--vvd-select-alert-backdrop, var(--vvd-color-alert-50));--_connotation-color-intermediate: var(--vvd-select-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-firm: var(--vvd-select-alert-firm, var(--vvd-color-alert-600))}.control:not(.connotation-success,.connotation-alert){--_connotation-color-primary: var(--vvd-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-backdrop: var(--vvd-select-accent-backdrop, var(--vvd-color-canvas));--_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))}.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}.listbox{display:flex;max-height:var(--select-height, 408px);flex-direction:column;padding:4px;gap:2px;overflow-y:auto}.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}.focus-indicator{--focus-stroke-gap-color: transparent;border-radius:var(--_select-control-border-radius);pointer-events:none}:host(:not(:focus-visible)) .focus-indicator{display:none}:host([multiple]) .focus-indicator{--_select-control-border-radius: 8px}\n";
517
+ const styles = "@supports selector(:focus-visible){:host(:focus-visible){outline:none}}:host{display:inline-flex;flex-direction:column;gap:4px;--_low-ink-color: var(--vvd-color-neutral-600);--focus-stroke-gap-color: transparent}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);contain:inline-size;font:var(--vvd-typography-base)}.control{display:flex;align-items:center;justify-content:space-between;background-color:var(--_appearance-color-fill);block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));border-radius:var(--_select-control-border-radius);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:8px;padding-inline:16px;transition:box-shadow .2s,background-color .2s}.control{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--_connotation-color-backdrop);--_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(--_connotation-color-backdrop);--_appearance-color-outline: var(--_connotation-color-firm)}.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.connotation-success{--_connotation-color-primary: var(--vvd-select-success-primary, var(--vvd-color-success-500));--_connotation-color-backdrop: var(--vvd-select-success-backdrop, var(--vvd-color-success-50));--_connotation-color-intermediate: var(--vvd-select-success-intermediate, var(--vvd-color-success-500));--_connotation-color-firm: var(--vvd-select-success-firm, var(--vvd-color-success-600))}.control.connotation-alert{--_connotation-color-primary: var(--vvd-select-alert-primary, var(--vvd-color-alert-500));--_connotation-color-backdrop: var(--vvd-select-alert-backdrop, var(--vvd-color-alert-50));--_connotation-color-intermediate: var(--vvd-select-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-firm: var(--vvd-select-alert-firm, var(--vvd-color-alert-600))}.control:not(.connotation-success,.connotation-alert){--_connotation-color-primary: var(--vvd-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-backdrop: var(--vvd-select-accent-backdrop, var(--vvd-color-canvas));--_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))}.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";
519
518
 
520
519
  var __defProp = Object.defineProperty;
521
520
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -614,7 +613,6 @@ function renderPlaceholder(context) {
614
613
  }
615
614
  function selectValue(context) {
616
615
  const affixIconTemplate = affixIconTemplateFactory(context);
617
- const focusTemplate = focusTemplateFactory(context);
618
616
  return html`
619
617
  <div class="control ${getStateClasses}" ${ref("_anchor")}
620
618
  id="control" ?disabled="${(x) => x.disabled}">
@@ -624,14 +622,12 @@ function selectValue(context) {
624
622
  <slot name="meta" ${slotted("metaSlottedContent")}></slot>
625
623
  </div>
626
624
  ${() => affixIconTemplate("chevron-down-line")}
627
- ${() => focusTemplate}
628
625
  </div>`;
629
626
  }
630
627
  function setFixedDropdownVarWidth(x) {
631
628
  return x.open && x.fixedDropdown ? `--_select-fixed-width: ${Math.round(x.getBoundingClientRect().width)}px` : null;
632
629
  }
633
630
  function renderControl(context) {
634
- const focusTemplate = focusTemplateFactory(context);
635
631
  const popupTag = context.tagFor(Popup);
636
632
  return html`
637
633
  ${when((x) => x.label, renderLabel())}
@@ -650,7 +646,6 @@ function renderControl(context) {
650
646
  ?hidden="${(x) => x.collapsible ? !x.open : false}"
651
647
  ${ref("listbox")}>
652
648
  ${when((x) => x.placeholder, renderPlaceholder(context))}
653
- ${when((x) => x.multiple, focusTemplate)}
654
649
  <slot
655
650
  ${slotted({ filter: Listbox$1.slottedOptionFilter, flatten: true, property: "slottedOptions" })}>
656
651
  </slot>