@vonage/vivid 3.50.1 → 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.
Files changed (38) hide show
  1. package/appearance-ui/index.cjs +1 -1
  2. package/appearance-ui/index.js +1 -1
  3. package/custom-elements.json +198 -13
  4. package/lib/button/button.d.ts +7 -0
  5. package/package.json +1 -1
  6. package/shared/anchored.cjs +20 -1
  7. package/shared/anchored.js +21 -3
  8. package/shared/definition11.cjs +93 -38
  9. package/shared/definition11.js +93 -38
  10. package/shared/definition28.cjs +1 -1
  11. package/shared/definition28.js +2 -2
  12. package/shared/definition29.cjs +4 -1
  13. package/shared/definition29.js +4 -1
  14. package/shared/definition4.cjs +1 -1
  15. package/shared/definition4.js +1 -1
  16. package/shared/definition42.cjs +1 -1
  17. package/shared/definition42.js +1 -1
  18. package/shared/definition46.cjs +1 -1
  19. package/shared/definition46.js +1 -1
  20. package/shared/definition51.cjs +1 -1
  21. package/shared/definition51.js +1 -1
  22. package/shared/definition55.cjs +6 -2
  23. package/shared/definition55.js +7 -3
  24. package/shared/definition56.cjs +3 -1
  25. package/shared/definition56.js +4 -2
  26. package/shared/definition6.cjs +1 -1
  27. package/shared/definition6.js +1 -1
  28. package/shared/definition60.cjs +1 -1
  29. package/shared/definition60.js +1 -1
  30. package/shared/definition7.cjs +1 -1
  31. package/shared/definition7.js +1 -1
  32. package/shared/patterns/anchored.d.ts +4 -0
  33. package/styles/core/all.css +1 -1
  34. package/styles/core/theme.css +1 -1
  35. package/styles/core/typography.css +1 -1
  36. package/styles/tokens/theme-dark.css +4 -4
  37. package/styles/tokens/theme-light.css +4 -4
  38. package/styles/tokens/vivid-2-compat.css +1 -1
package/lib/button/button.d.ts CHANGED
@@ -14,6 +14,13 @@ export declare class Button extends FoundationButton {
14
14
  stacked: boolean;
15
15
  pending: boolean;
16
16
  label?: string;
17
+ href?: string;
18
+ download?: string;
19
+ hreflang?: string;
20
+ ping?: string;
21
+ referrerpolicy?: string;
22
+ rel?: string;
23
+ target?: '_self' | '_blank' | '_parent' | '_top';
17
24
  constructor();
18
25
  }
19
26
  export interface Button extends AffixIconWithTrailing {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vonage/vivid",
3
- "version": "3.50.1",
3
+ "version": "3.51.0",
4
4
  "type": "module",
5
5
  "module": "./index.js",
6
6
  "main": "./index.cjs",
package/shared/anchored.cjs CHANGED
@@ -1,6 +1,7 @@
1
1
  'use strict';
2
2
 
3
3
  const index = require('./index.cjs');
4
+ const slotted = require('./slotted.cjs');
4
5
 
5
6
  var __defProp = Object.defineProperty;
6
7
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -24,7 +25,9 @@ function anchored(constructor) {
24
25
  }
25
26
  this.#cleanupObserverIfNeeded();
26
27
  let newAnchor = void 0;
27
- if (this.anchor instanceof HTMLElement) {
28
+ if (this._slottedAnchor && this._slottedAnchor.length > 0) {
29
+ newAnchor = this._slottedAnchor[0];
30
+ } else if (this.anchor instanceof HTMLElement) {
28
31
  newAnchor = this.anchor;
29
32
  } else if (typeof this.anchor === "string") {
30
33
  newAnchor = document.getElementById(this.anchor) ?? void 0;
@@ -49,9 +52,20 @@ function anchored(constructor) {
49
52
  this.#observer = void 0;
50
53
  };
51
54
  }
55
+ /**
56
+ * @internal
57
+ */
52
58
  anchorChanged() {
53
59
  this.#updateAnchorEl();
54
60
  }
61
+ /**
62
+ * @internal
63
+ */
64
+ _slottedAnchorChanged() {
65
+ const isOccupied = Boolean(this._slottedAnchor && this._slottedAnchor.length > 0);
66
+ index.DOM.setBooleanAttribute(this, "slotted-anchor", isOccupied);
67
+ this.#updateAnchorEl();
68
+ }
55
69
  #updateAnchorEl;
56
70
  #observer;
57
71
  #observeMissingAnchor;
@@ -69,10 +83,15 @@ function anchored(constructor) {
69
83
  __decorateClass([
70
84
  index.attr
71
85
  ], Decorated.prototype, "anchor", 2);
86
+ __decorateClass([
87
+ index.observable
88
+ ], Decorated.prototype, "_slottedAnchor", 2);
72
89
  __decorateClass([
73
90
  index.observable
74
91
  ], Decorated.prototype, "_anchorEl", 2);
75
92
  return Decorated;
76
93
  }
94
+ const anchorSlotTemplateFactory = () => index.html`<slot name="anchor" ${slotted.slotted("_slottedAnchor")}></slot>`;
77
95
 
96
+ exports.anchorSlotTemplateFactory = anchorSlotTemplateFactory;
78
97
  exports.anchored = anchored;
package/shared/anchored.js CHANGED
@@ -1,4 +1,5 @@
1
- import { a as attr, o as observable } from './index.js';
1
+ import { a as attr, o as observable, h as html, D as DOM } from './index.js';
2
+ import { s as slotted } from './slotted.js';
2
3
 
3
4
  var __defProp = Object.defineProperty;
4
5
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -22,7 +23,9 @@ function anchored(constructor) {
22
23
  }
23
24
  this.#cleanupObserverIfNeeded();
24
25
  let newAnchor = void 0;
25
- if (this.anchor instanceof HTMLElement) {
26
+ if (this._slottedAnchor && this._slottedAnchor.length > 0) {
27
+ newAnchor = this._slottedAnchor[0];
28
+ } else if (this.anchor instanceof HTMLElement) {
26
29
  newAnchor = this.anchor;
27
30
  } else if (typeof this.anchor === "string") {
28
31
  newAnchor = document.getElementById(this.anchor) ?? void 0;
@@ -47,9 +50,20 @@ function anchored(constructor) {
47
50
  this.#observer = void 0;
48
51
  };
49
52
  }
53
+ /**
54
+ * @internal
55
+ */
50
56
  anchorChanged() {
51
57
  this.#updateAnchorEl();
52
58
  }
59
+ /**
60
+ * @internal
61
+ */
62
+ _slottedAnchorChanged() {
63
+ const isOccupied = Boolean(this._slottedAnchor && this._slottedAnchor.length > 0);
64
+ DOM.setBooleanAttribute(this, "slotted-anchor", isOccupied);
65
+ this.#updateAnchorEl();
66
+ }
53
67
  #updateAnchorEl;
54
68
  #observer;
55
69
  #observeMissingAnchor;
@@ -67,10 +81,14 @@ function anchored(constructor) {
67
81
  __decorateClass([
68
82
  attr
69
83
  ], Decorated.prototype, "anchor", 2);
84
+ __decorateClass([
85
+ observable
86
+ ], Decorated.prototype, "_slottedAnchor", 2);
70
87
  __decorateClass([
71
88
  observable
72
89
  ], Decorated.prototype, "_anchorEl", 2);
73
90
  return Decorated;
74
91
  }
92
+ const anchorSlotTemplateFactory = () => html`<slot name="anchor" ${slotted("_slottedAnchor")}></slot>`;
75
93
 
76
- export { anchored as a };
94
+ export { anchorSlotTemplateFactory as a, anchored as b };
package/shared/definition11.cjs CHANGED
@@ -7,8 +7,8 @@ const affix = require('./affix.cjs');
7
7
  const button = require('./button.cjs');
8
8
  const applyMixins = require('./apply-mixins.cjs');
9
9
  const enums = require('./enums.cjs');
10
- const ref = require('./ref.cjs');
11
10
  const when = require('./when.cjs');
11
+ const ref = require('./ref.cjs');
12
12
  const classNames = require('./class-names.cjs');
13
13
 
14
14
  var __defProp = Object.defineProperty;
@@ -60,9 +60,30 @@ __decorateClass([
60
60
  __decorateClass([
61
61
  index.attr
62
62
  ], Button.prototype, "label", 2);
63
+ __decorateClass([
64
+ index.attr
65
+ ], Button.prototype, "href", 2);
66
+ __decorateClass([
67
+ index.attr
68
+ ], Button.prototype, "download", 2);
69
+ __decorateClass([
70
+ index.attr
71
+ ], Button.prototype, "hreflang", 2);
72
+ __decorateClass([
73
+ index.attr
74
+ ], Button.prototype, "ping", 2);
75
+ __decorateClass([
76
+ index.attr
77
+ ], Button.prototype, "referrerpolicy", 2);
78
+ __decorateClass([
79
+ index.attr
80
+ ], Button.prototype, "rel", 2);
81
+ __decorateClass([
82
+ index.attr
83
+ ], Button.prototype, "target", 2);
63
84
  applyMixins.applyMixins(Button, affix.AffixIconWithTrailing);
64
85
 
65
- 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";
86
+ 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);text-decoration:none;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
87
 
67
88
  const getAppearanceClassName = (appearance, disabled) => {
68
89
  let className = `appearance-${appearance}`;
@@ -104,45 +125,79 @@ function renderIconOrPending(context, icon, pending, size = enums.Size.Normal) {
104
125
  return affixIconTemplate(icon, affix.IconWrapper.Slot, affix.IconAriaHidden.Hidden);
105
126
  }
106
127
  }
128
+ function renderButtonContent(context) {
129
+ return index.html`
130
+ <button
131
+ class="${getClasses}"
132
+ ?autofocus="${(x) => x.autofocus}"
133
+ ?disabled="${(x) => x.disabled || x.pending}"
134
+ form="${(x) => x.formId}"
135
+ formaction="${(x) => x.formaction}"
136
+ formenctype="${(x) => x.formenctype}"
137
+ formmethod="${(x) => x.formmethod}"
138
+ formnovalidate="${(x) => x.formnovalidate}"
139
+ formtarget="${(x) => x.formtarget}"
140
+ name="${(x) => x.name}"
141
+ type="${(x) => x.type}"
142
+ value="${(x) => x.value}"
143
+ aria-atomic="${(x) => x.ariaAtomic}"
144
+ aria-busy="${(x) => x.ariaBusy}"
145
+ aria-current="${(x) => x.ariaCurrent}"
146
+ aria-details="${(x) => x.ariaDetails}"
147
+ aria-disabled="${(x) => x.ariaDisabled}"
148
+ aria-expanded="${(x) => x.ariaExpanded}"
149
+ aria-haspopup="${(x) => x.ariaHaspopup}"
150
+ aria-hidden="${(x) => x.ariaHidden}"
151
+ aria-invalid="${(x) => x.ariaInvalid}"
152
+ aria-keyshortcuts="${(x) => x.ariaKeyshortcuts}"
153
+ aria-label="${(x) => x.ariaLabel}"
154
+ aria-live="${(x) => x.ariaLive}"
155
+ aria-pressed="${(x) => x.ariaPressed}"
156
+ aria-relevant="${(x) => x.ariaRelevant}"
157
+ aria-roledescription="${(x) => x.ariaRoledescription}"
158
+ title="${(x) => x.title}"
159
+ ${ref.ref("control")}>
160
+ ${(x) => renderIconOrPending(context, x.icon, x.pending, x.size)}
161
+ ${when.when((x) => x.label, index.html`<span class="text" role="presentation">${(x) => x.label}</span>`)}
162
+ </button>`;
163
+ }
164
+ function renderAnchorContent(context) {
165
+ return index.html`<a
166
+ class="${getClasses}"
167
+ download="${(x) => x.download}"
168
+ href="${(x) => x.href}"
169
+ hreflang="${(x) => x.hreflang}"
170
+ ping="${(x) => x.ping}"
171
+ referrerpolicy="${(x) => x.referrerpolicy}"
172
+ rel="${(x) => x.rel}"
173
+ target="${(x) => x.target}"
174
+ type="${(x) => x.type}"
175
+ aria-atomic="${(x) => x.ariaAtomic}"
176
+ aria-busy="${(x) => x.ariaBusy}"
177
+ aria-current="${(x) => x.ariaCurrent}"
178
+ aria-details="${(x) => x.ariaDetails}"
179
+ aria-disabled="${(x) => x.ariaDisabled}"
180
+ aria-errormessage="${(x) => x.ariaErrormessage}"
181
+ aria-expanded="${(x) => x.ariaExpanded}"
182
+ aria-haspopup="${(x) => x.ariaHaspopup}"
183
+ aria-hidden="${(x) => x.ariaHidden}"
184
+ aria-invalid="${(x) => x.ariaInvalid}"
185
+ aria-keyshortcuts="${(x) => x.ariaKeyshortcuts}"
186
+ aria-label="${(x) => x.ariaLabel}"
187
+ aria-live="${(x) => x.ariaLive}"
188
+ aria-relevant="${(x) => x.ariaRelevant}"
189
+ aria-roledescription="${(x) => x.ariaRoledescription}"
190
+ ${ref.ref("control")}>
191
+ ${(x) => renderIconOrPending(context, x.icon, x.pending, x.size)}
192
+ ${when.when((x) => x.label, index.html`<span class="text" role="presentation">${(x) => x.label}</span>`)}
193
+ </a>`;
194
+ }
107
195
  const buttonTemplate = (context) => {
108
196
  return index.html`
109
197
  <template role="presentation">
110
- <button
111
- class="${getClasses}"
112
- ?autofocus="${(x) => x.autofocus}"
113
- ?disabled="${(x) => x.disabled || x.pending}"
114
- form="${(x) => x.formId}"
115
- formaction="${(x) => x.formaction}"
116
- formenctype="${(x) => x.formenctype}"
117
- formmethod="${(x) => x.formmethod}"
118
- formnovalidate="${(x) => x.formnovalidate}"
119
- formtarget="${(x) => x.formtarget}"
120
- name="${(x) => x.name}"
121
- type="${(x) => x.type}"
122
- value="${(x) => x.value}"
123
- aria-atomic="${(x) => x.ariaAtomic}"
124
- aria-busy="${(x) => x.ariaBusy}"
125
- aria-current="${(x) => x.ariaCurrent}"
126
- aria-details="${(x) => x.ariaDetails}"
127
- aria-disabled="${(x) => x.ariaDisabled}"
128
- aria-expanded="${(x) => x.ariaExpanded}"
129
- aria-haspopup="${(x) => x.ariaHaspopup}"
130
- aria-hidden="${(x) => x.ariaHidden}"
131
- aria-invalid="${(x) => x.ariaInvalid}"
132
- aria-keyshortcuts="${(x) => x.ariaKeyshortcuts}"
133
- aria-label="${(x) => x.ariaLabel}"
134
- aria-live="${(x) => x.ariaLive}"
135
- aria-pressed="${(x) => x.ariaPressed}"
136
- aria-relevant="${(x) => x.ariaRelevant}"
137
- aria-roledescription="${(x) => x.ariaRoledescription}"
138
- title="${(x) => x.title}"
139
- ${ref.ref("control")}
140
- >
141
- ${(x) => renderIconOrPending(context, x.icon, x.pending, x.size)}
142
- ${when.when((x) => x.label, index.html`<span class="text" role="presentation">${(x) => x.label}</span>`)}
143
- </button>
144
- </template>
145
- `;
198
+ ${when.when((x) => !x.href, index.html`${renderButtonContent(context)}`)}
199
+ ${when.when((x) => x.href, index.html`${renderAnchorContent(context)}`)}
200
+ </template>`;
146
201
  };
147
202
 
148
203
  const buttonDefinition = Button.compose({
package/shared/definition11.js CHANGED
@@ -5,8 +5,8 @@ import { b as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWra
5
5
  import { B as Button$1 } from './button.js';
6
6
  import { a as applyMixins } from './apply-mixins.js';
7
7
  import { b as Size } from './enums.js';
8
- import { r as ref } from './ref.js';
9
8
  import { w as when } from './when.js';
9
+ import { r as ref } from './ref.js';
10
10
  import { c as classNames } from './class-names.js';
11
11
 
12
12
  var __defProp = Object.defineProperty;
@@ -58,9 +58,30 @@ __decorateClass([
58
58
  __decorateClass([
59
59
  attr
60
60
  ], Button.prototype, "label", 2);
61
+ __decorateClass([
62
+ attr
63
+ ], Button.prototype, "href", 2);
64
+ __decorateClass([
65
+ attr
66
+ ], Button.prototype, "download", 2);
67
+ __decorateClass([
68
+ attr
69
+ ], Button.prototype, "hreflang", 2);
70
+ __decorateClass([
71
+ attr
72
+ ], Button.prototype, "ping", 2);
73
+ __decorateClass([
74
+ attr
75
+ ], Button.prototype, "referrerpolicy", 2);
76
+ __decorateClass([
77
+ attr
78
+ ], Button.prototype, "rel", 2);
79
+ __decorateClass([
80
+ attr
81
+ ], Button.prototype, "target", 2);
61
82
  applyMixins(Button, AffixIconWithTrailing);
62
83
 
63
- 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";
84
+ 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);text-decoration:none;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";
64
85
 
65
86
  const getAppearanceClassName = (appearance, disabled) => {
66
87
  let className = `appearance-${appearance}`;
@@ -102,45 +123,79 @@ function renderIconOrPending(context, icon, pending, size = Size.Normal) {
102
123
  return affixIconTemplate(icon, IconWrapper.Slot, IconAriaHidden.Hidden);
103
124
  }
104
125
  }
126
+ function renderButtonContent(context) {
127
+ return html`
128
+ <button
129
+ class="${getClasses}"
130
+ ?autofocus="${(x) => x.autofocus}"
131
+ ?disabled="${(x) => x.disabled || x.pending}"
132
+ form="${(x) => x.formId}"
133
+ formaction="${(x) => x.formaction}"
134
+ formenctype="${(x) => x.formenctype}"
135
+ formmethod="${(x) => x.formmethod}"
136
+ formnovalidate="${(x) => x.formnovalidate}"
137
+ formtarget="${(x) => x.formtarget}"
138
+ name="${(x) => x.name}"
139
+ type="${(x) => x.type}"
140
+ value="${(x) => x.value}"
141
+ aria-atomic="${(x) => x.ariaAtomic}"
142
+ aria-busy="${(x) => x.ariaBusy}"
143
+ aria-current="${(x) => x.ariaCurrent}"
144
+ aria-details="${(x) => x.ariaDetails}"
145
+ aria-disabled="${(x) => x.ariaDisabled}"
146
+ aria-expanded="${(x) => x.ariaExpanded}"
147
+ aria-haspopup="${(x) => x.ariaHaspopup}"
148
+ aria-hidden="${(x) => x.ariaHidden}"
149
+ aria-invalid="${(x) => x.ariaInvalid}"
150
+ aria-keyshortcuts="${(x) => x.ariaKeyshortcuts}"
151
+ aria-label="${(x) => x.ariaLabel}"
152
+ aria-live="${(x) => x.ariaLive}"
153
+ aria-pressed="${(x) => x.ariaPressed}"
154
+ aria-relevant="${(x) => x.ariaRelevant}"
155
+ aria-roledescription="${(x) => x.ariaRoledescription}"
156
+ title="${(x) => x.title}"
157
+ ${ref("control")}>
158
+ ${(x) => renderIconOrPending(context, x.icon, x.pending, x.size)}
159
+ ${when((x) => x.label, html`<span class="text" role="presentation">${(x) => x.label}</span>`)}
160
+ </button>`;
161
+ }
162
+ function renderAnchorContent(context) {
163
+ return html`<a
164
+ class="${getClasses}"
165
+ download="${(x) => x.download}"
166
+ href="${(x) => x.href}"
167
+ hreflang="${(x) => x.hreflang}"
168
+ ping="${(x) => x.ping}"
169
+ referrerpolicy="${(x) => x.referrerpolicy}"
170
+ rel="${(x) => x.rel}"
171
+ target="${(x) => x.target}"
172
+ type="${(x) => x.type}"
173
+ aria-atomic="${(x) => x.ariaAtomic}"
174
+ aria-busy="${(x) => x.ariaBusy}"
175
+ aria-current="${(x) => x.ariaCurrent}"
176
+ aria-details="${(x) => x.ariaDetails}"
177
+ aria-disabled="${(x) => x.ariaDisabled}"
178
+ aria-errormessage="${(x) => x.ariaErrormessage}"
179
+ aria-expanded="${(x) => x.ariaExpanded}"
180
+ aria-haspopup="${(x) => x.ariaHaspopup}"
181
+ aria-hidden="${(x) => x.ariaHidden}"
182
+ aria-invalid="${(x) => x.ariaInvalid}"
183
+ aria-keyshortcuts="${(x) => x.ariaKeyshortcuts}"
184
+ aria-label="${(x) => x.ariaLabel}"
185
+ aria-live="${(x) => x.ariaLive}"
186
+ aria-relevant="${(x) => x.ariaRelevant}"
187
+ aria-roledescription="${(x) => x.ariaRoledescription}"
188
+ ${ref("control")}>
189
+ ${(x) => renderIconOrPending(context, x.icon, x.pending, x.size)}
190
+ ${when((x) => x.label, html`<span class="text" role="presentation">${(x) => x.label}</span>`)}
191
+ </a>`;
192
+ }
105
193
  const buttonTemplate = (context) => {
106
194
  return html`
107
195
  <template role="presentation">
108
- <button
109
- class="${getClasses}"
110
- ?autofocus="${(x) => x.autofocus}"
111
- ?disabled="${(x) => x.disabled || x.pending}"
112
- form="${(x) => x.formId}"
113
- formaction="${(x) => x.formaction}"
114
- formenctype="${(x) => x.formenctype}"
115
- formmethod="${(x) => x.formmethod}"
116
- formnovalidate="${(x) => x.formnovalidate}"
117
- formtarget="${(x) => x.formtarget}"
118
- name="${(x) => x.name}"
119
- type="${(x) => x.type}"
120
- value="${(x) => x.value}"
121
- aria-atomic="${(x) => x.ariaAtomic}"
122
- aria-busy="${(x) => x.ariaBusy}"
123
- aria-current="${(x) => x.ariaCurrent}"
124
- aria-details="${(x) => x.ariaDetails}"
125
- aria-disabled="${(x) => x.ariaDisabled}"
126
- aria-expanded="${(x) => x.ariaExpanded}"
127
- aria-haspopup="${(x) => x.ariaHaspopup}"
128
- aria-hidden="${(x) => x.ariaHidden}"
129
- aria-invalid="${(x) => x.ariaInvalid}"
130
- aria-keyshortcuts="${(x) => x.ariaKeyshortcuts}"
131
- aria-label="${(x) => x.ariaLabel}"
132
- aria-live="${(x) => x.ariaLive}"
133
- aria-pressed="${(x) => x.ariaPressed}"
134
- aria-relevant="${(x) => x.ariaRelevant}"
135
- aria-roledescription="${(x) => x.ariaRoledescription}"
136
- title="${(x) => x.title}"
137
- ${ref("control")}
138
- >
139
- ${(x) => renderIconOrPending(context, x.icon, x.pending, x.size)}
140
- ${when((x) => x.label, html`<span class="text" role="presentation">${(x) => x.label}</span>`)}
141
- </button>
142
- </template>
143
- `;
196
+ ${when((x) => !x.href, html`${renderButtonContent(context)}`)}
197
+ ${when((x) => x.href, html`${renderAnchorContent(context)}`)}
198
+ </template>`;
144
199
  };
145
200
 
146
201
  const buttonDefinition = Button.compose({
package/shared/definition28.cjs CHANGED
@@ -570,7 +570,7 @@ index.__decorate([
570
570
  index.observable
571
571
  ], Menu$1.prototype, "items", void 0);
572
572
 
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 .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";
574
574
 
575
575
  var __defProp$1 = Object.defineProperty;
576
576
  var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
package/shared/definition28.js CHANGED
@@ -6,7 +6,7 @@ import { S as StartEnd } from './start-end.js';
6
6
  import { D as Direction, g as getDirection } from './direction.js';
7
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';
8
8
  import { I as Icon } from './icon.js';
9
- import { a as anchored } from './anchored.js';
9
+ import { b as anchored } from './anchored.js';
10
10
  import { i as isHTMLElement } from './dom.js';
11
11
  import { s as slotted, e as elements } from './slotted.js';
12
12
  import { w as when } from './when.js';
@@ -568,7 +568,7 @@ __decorate([
568
568
  observable
569
569
  ], Menu$1.prototype, "items", void 0);
570
570
 
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 .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";
572
572
 
573
573
  var __defProp$1 = Object.defineProperty;
574
574
  var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
package/shared/definition29.cjs CHANGED
@@ -3,10 +3,11 @@
3
3
  const index = require('./index.cjs');
4
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}