@vonage/vivid 4.2.0 → 4.4.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 (155) hide show
  1. package/appearance-ui/index.cjs +1 -2
  2. package/appearance-ui/index.js +1 -2
  3. package/custom-elements.json +435 -41
  4. package/index.cjs +1 -0
  5. package/index.js +1 -1
  6. package/lib/button/button.d.ts +1 -0
  7. package/lib/dialog/dialog.d.ts +1 -0
  8. package/lib/empty-state/definition.d.ts +1 -0
  9. package/lib/empty-state/empty-state.d.ts +5 -0
  10. package/lib/enums.d.ts +4 -0
  11. package/lib/popup/popup.d.ts +5 -0
  12. package/lib/range-slider/range-slider.d.ts +2 -0
  13. package/lib/slider/slider.d.ts +5 -0
  14. package/lib/slider/slider.template.d.ts +2 -2
  15. package/lib/switch/switch.d.ts +1 -1
  16. package/package.json +1 -1
  17. package/shared/affix.cjs +1 -2
  18. package/shared/affix.js +1 -2
  19. package/shared/anchored.cjs +1 -2
  20. package/shared/anchored.js +1 -2
  21. package/shared/calendar-event.cjs +1 -2
  22. package/shared/calendar-event.js +1 -2
  23. package/shared/definition.cjs +2 -3
  24. package/shared/definition.js +2 -3
  25. package/shared/definition11.cjs +29 -13
  26. package/shared/definition11.js +29 -14
  27. package/shared/definition12.cjs +1 -1
  28. package/shared/definition12.js +1 -1
  29. package/shared/definition13.cjs +1 -2
  30. package/shared/definition13.js +1 -2
  31. package/shared/definition14.cjs +1 -2
  32. package/shared/definition14.js +1 -2
  33. package/shared/definition15.cjs +1 -2
  34. package/shared/definition15.js +1 -2
  35. package/shared/definition16.cjs +1 -2
  36. package/shared/definition16.js +1 -2
  37. package/shared/definition17.cjs +4 -8
  38. package/shared/definition17.js +4 -8
  39. package/shared/definition18.cjs +14 -22
  40. package/shared/definition18.js +14 -22
  41. package/shared/definition19.cjs +29 -50
  42. package/shared/definition19.js +29 -50
  43. package/shared/definition20.cjs +1 -2
  44. package/shared/definition20.js +1 -2
  45. package/shared/definition21.cjs +68 -32
  46. package/shared/definition21.js +68 -32
  47. package/shared/definition23.cjs +19 -5
  48. package/shared/definition23.js +20 -6
  49. package/shared/definition24.cjs +2 -3
  50. package/shared/definition24.js +2 -3
  51. package/shared/definition25.cjs +23 -48
  52. package/shared/definition25.js +23 -48
  53. package/shared/definition26.cjs +1 -2
  54. package/shared/definition26.js +1 -2
  55. package/shared/definition28.cjs +1 -2
  56. package/shared/definition28.js +1 -2
  57. package/shared/definition29.cjs +19 -39
  58. package/shared/definition29.js +19 -39
  59. package/shared/definition3.cjs +1 -2
  60. package/shared/definition3.js +1 -2
  61. package/shared/definition30.cjs +1 -1
  62. package/shared/definition30.js +1 -1
  63. package/shared/definition31.cjs +1 -2
  64. package/shared/definition31.js +1 -2
  65. package/shared/definition34.cjs +1 -2
  66. package/shared/definition34.js +1 -2
  67. package/shared/definition35.cjs +14 -26
  68. package/shared/definition35.js +14 -26
  69. package/shared/definition36.cjs +1 -2
  70. package/shared/definition36.js +1 -2
  71. package/shared/definition37.cjs +8 -16
  72. package/shared/definition37.js +8 -16
  73. package/shared/definition38.cjs +1 -2
  74. package/shared/definition38.js +1 -2
  75. package/shared/definition39.cjs +1 -2
  76. package/shared/definition39.js +1 -2
  77. package/shared/definition4.cjs +7 -13
  78. package/shared/definition4.js +7 -13
  79. package/shared/definition40.cjs +1 -2
  80. package/shared/definition40.js +1 -2
  81. package/shared/definition42.cjs +172 -106
  82. package/shared/definition42.js +172 -106
  83. package/shared/definition43.cjs +7 -6
  84. package/shared/definition43.js +5 -4
  85. package/shared/definition44.cjs +4 -8
  86. package/shared/definition44.js +4 -8
  87. package/shared/definition45.cjs +1 -2
  88. package/shared/definition45.js +1 -2
  89. package/shared/definition46.cjs +96 -12
  90. package/shared/definition46.js +97 -13
  91. package/shared/definition47.cjs +1 -2
  92. package/shared/definition47.js +1 -2
  93. package/shared/definition48.cjs +2 -3
  94. package/shared/definition48.js +2 -3
  95. package/shared/definition5.cjs +1 -2
  96. package/shared/definition5.js +1 -2
  97. package/shared/definition50.cjs +1 -2
  98. package/shared/definition50.js +1 -2
  99. package/shared/definition51.cjs +5 -10
  100. package/shared/definition51.js +5 -10
  101. package/shared/definition52.cjs +1 -2
  102. package/shared/definition52.js +1 -2
  103. package/shared/definition53.cjs +1 -2
  104. package/shared/definition53.js +1 -2
  105. package/shared/definition54.cjs +9 -21
  106. package/shared/definition54.js +9 -21
  107. package/shared/definition55.cjs +24 -43
  108. package/shared/definition55.js +24 -43
  109. package/shared/definition56.cjs +24 -39
  110. package/shared/definition56.js +24 -39
  111. package/shared/definition57.cjs +22 -45
  112. package/shared/definition57.js +22 -45
  113. package/shared/definition58.cjs +18 -37
  114. package/shared/definition58.js +18 -37
  115. package/shared/definition59.cjs +1 -2
  116. package/shared/definition59.js +1 -2
  117. package/shared/definition6.cjs +1 -2
  118. package/shared/definition6.js +1 -2
  119. package/shared/definition62.cjs +1 -2
  120. package/shared/definition62.js +1 -2
  121. package/shared/definition63.cjs +156 -4
  122. package/shared/definition63.js +157 -6
  123. package/shared/definition7.cjs +1 -2
  124. package/shared/definition7.js +1 -2
  125. package/shared/definition8.cjs +1 -2
  126. package/shared/definition8.js +1 -2
  127. package/shared/definition9.cjs +1 -2
  128. package/shared/definition9.js +1 -2
  129. package/shared/enums.cjs +6 -0
  130. package/shared/enums.js +6 -1
  131. package/shared/icon.cjs +2 -3
  132. package/shared/icon.js +2 -3
  133. package/shared/index2.cjs +3 -6
  134. package/shared/index2.js +3 -6
  135. package/shared/listbox.cjs +1 -2
  136. package/shared/listbox.js +1 -2
  137. package/shared/patterns/anchored.d.ts +4 -4
  138. package/shared/patterns/chevron.d.ts +2 -0
  139. package/shared/presentationDate.cjs +2 -3
  140. package/shared/presentationDate.js +2 -3
  141. package/shared/radio.cjs +1 -2
  142. package/shared/radio.js +1 -2
  143. package/shared/slider.template.cjs +27 -4
  144. package/shared/slider.template.js +27 -4
  145. package/shared/text-anchor.cjs +1 -2
  146. package/shared/text-anchor.js +1 -2
  147. package/shared/video-player.cjs +4 -8
  148. package/shared/video-player.js +4 -8
  149. package/styles/core/all.css +1 -1
  150. package/styles/core/theme.css +1 -1
  151. package/styles/core/typography.css +1 -1
  152. package/styles/tokens/theme-dark.css +4 -4
  153. package/styles/tokens/theme-light.css +4 -4
  154. package/styles/tokens/vivid-2-compat.css +1 -1
  155. package/vivid.api.json +3228 -1108
package/shared/definition37.js CHANGED
@@ -17,8 +17,7 @@ var __decorateClass = (decorators, target, key, kind) => {
17
17
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
18
18
  if (decorator = decorators[i])
19
19
  result = (kind ? decorator(target, key, result) : decorator(result)) || result;
20
- if (kind && result)
21
- __defProp(target, key, result);
20
+ if (kind && result) __defProp(target, key, result);
22
21
  return result;
23
22
  };
24
23
  const MAX_DIGITS_AND_PLACEHOLDERS = 7;
@@ -52,26 +51,20 @@ class Pagination extends FoundationElement {
52
51
  return new Array(
53
52
  this.total < MAX_DIGITS_AND_PLACEHOLDERS ? this.total : MAX_DIGITS_AND_PLACEHOLDERS
54
53
  ).fill(0).map((_, i, arr) => {
55
- if (i === 0)
56
- return 1;
57
- if (i === arr.length - 1)
58
- return this.total;
54
+ if (i === 0) return 1;
55
+ if (i === arr.length - 1) return this.total;
59
56
  if (this.selectedIndex !== void 0 && this.total > MAX_DIGITS_AND_PLACEHOLDERS) {
60
57
  if (this.selectedIndex < 4) {
61
- if (i === MAX_DIGITS_AND_PLACEHOLDERS - 2)
62
- return "...";
58
+ if (i === MAX_DIGITS_AND_PLACEHOLDERS - 2) return "...";
63
59
  }
64
60
  if (this.selectedIndex >= 4 && this.selectedIndex <= this.total - 5) {
65
61
  if (i > 1 && i < MAX_DIGITS_AND_PLACEHOLDERS - 2)
66
62
  return this.selectedIndex + (i - 2);
67
- if (i === 1 || i === MAX_DIGITS_AND_PLACEHOLDERS - 2)
68
- return "...";
63
+ if (i === 1 || i === MAX_DIGITS_AND_PLACEHOLDERS - 2) return "...";
69
64
  }
70
65
  if (this.selectedIndex > this.total - 5) {
71
- if (i > 1)
72
- return this.total - (6 - i);
73
- if (i === 1)
74
- return "...";
66
+ if (i > 1) return this.total - (6 - i);
67
+ if (i === 1) return "...";
75
68
  }
76
69
  }
77
70
  return i + 1;
@@ -84,8 +77,7 @@ class Pagination extends FoundationElement {
84
77
  this.selectedIndex = 0;
85
78
  }
86
79
  selectedIndexChanged(oldValue, newValue) {
87
- if (oldValue === void 0)
88
- return;
80
+ if (oldValue === void 0) return;
89
81
  this.$emit("pagination-change", {
90
82
  selectedIndex: newValue,
91
83
  total: this.total,
package/shared/definition38.cjs CHANGED
@@ -13,8 +13,7 @@ var __decorateClass = (decorators, target, key, kind) => {
13
13
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
14
14
  if (decorator = decorators[i])
15
15
  result = (decorator(target, key, result) ) || result;
16
- if (result)
17
- __defProp(target, key, result);
16
+ if (result) __defProp(target, key, result);
18
17
  return result;
19
18
  };
20
19
  class ProgressRing extends baseProgress.BaseProgress {
package/shared/definition38.js CHANGED
@@ -11,8 +11,7 @@ var __decorateClass = (decorators, target, key, kind) => {
11
11
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
12
12
  if (decorator = decorators[i])
13
13
  result = (decorator(target, key, result) ) || result;
14
- if (result)
15
- __defProp(target, key, result);
14
+ if (result) __defProp(target, key, result);
16
15
  return result;
17
16
  };
18
17
  class ProgressRing extends BaseProgress {
package/shared/definition39.cjs CHANGED
@@ -13,8 +13,7 @@ var __decorateClass = (decorators, target, key, kind) => {
13
13
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
14
14
  if (decorator = decorators[i])
15
15
  result = (decorator(target, key, result) ) || result;
16
- if (result)
17
- __defProp(target, key, result);
16
+ if (result) __defProp(target, key, result);
18
17
  return result;
19
18
  };
20
19
  class Progress extends baseProgress.BaseProgress {
package/shared/definition39.js CHANGED
@@ -11,8 +11,7 @@ var __decorateClass = (decorators, target, key, kind) => {
11
11
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
12
12
  if (decorator = decorators[i])
13
13
  result = (decorator(target, key, result) ) || result;
14
- if (result)
15
- __defProp(target, key, result);
14
+ if (result) __defProp(target, key, result);
16
15
  return result;
17
16
  };
18
17
  class Progress extends BaseProgress {
package/shared/definition4.cjs CHANGED
@@ -13,7 +13,7 @@ const button = require('./button.cjs');
13
13
  const when = require('./when.cjs');
14
14
  const classNames = require('./class-names.cjs');
15
15
 
16
- const styles = ".control{position:fixed;z-index:10;border-radius:8px;inline-size:max-content;inset-block-end:0;inset-inline:0 0;margin-block:16px;margin-inline:auto;max-inline-size:var(--alert-max-inline-size, fit-content);min-inline-size:var(--alert-min-inline-size, 420px);transition:opacity .15s cubic-bezier(0,0,.2,1) 0ms,transform .15s cubic-bezier(0,0,.2,1) 0ms}.control.placement-top,.control.placement-top-start,.control.placement-top-end{inset-block:0 auto}.control.placement-top-start,.control.placement-bottom-start{right:auto;inset-inline-end:auto;margin-inline:16px}.control.placement-top-end,.control.placement-bottom-end{inset-inline-start:auto;margin-inline:16px}.control:where(.strategy-static){position:static;margin:0;inline-size:auto}.control:not(.open){opacity:0;transform:scale(.8)}.control.open{opacity:1;transform:scale(1)}@media (width <= 768px){.control{min-inline-size:var(--alert-min-inline-size, auto)}}.base{display:flex;align-items:center;padding:16px;border-radius:8px;background-color:var(--vvd-color-neutral-50);color:var(--vvd-color-canvas-text);column-gap:16px}.base.connotation-success{--_connotation-color-primary: var(--vvd-alert-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-alert-success-primary-text, var(--vvd-color-canvas))}.base.connotation-information{--_connotation-color-primary: var(--vvd-alert-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-alert-information-primary-text, var(--vvd-color-canvas))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-alert-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-alert-alert-primary-text, var(--vvd-color-canvas))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-alert-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-alert-warning-primary-text, var(--vvd-color-canvas-text))}.base.connotation-announcement{--_connotation-color-primary: var(--vvd-alert-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-alert-announcement-primary-text, var(--vvd-color-canvas))}.base:not(.connotation-success,.connotation-information,.connotation-alert,.connotation-warning,.connotation-announcement){--_connotation-color-primary: var(--vvd-alert-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-alert-accent-primary-text, var(--vvd-color-canvas))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base .alert-text{margin-inline-end:auto}.base .alert-text .headline{font:var(--vvd-typography-base-bold);margin-block-end:4px}.base .alert-text .main-text{font:var(--vvd-typography-base)}.base slot[name=icon]{flex-shrink:0;color:var(--_appearance-color-fill);font-size:24px;line-height:1}.base .dismiss-button{border-left:1px solid var(--vvd-color-neutral-200);padding-inline-start:8px}";
16
+ const styles = ".control{position:fixed;z-index:10;border-radius:8px;inline-size:max-content;inset-block-end:0;inset-inline:0 0;margin-block:16px;margin-inline:auto;max-inline-size:var(--alert-max-inline-size, fit-content);min-inline-size:var(--alert-min-inline-size, 420px);transition:opacity .15s cubic-bezier(0,0,.2,1) 0ms,transform .15s cubic-bezier(0,0,.2,1) 0ms}.control.placement-top,.control.placement-top-start,.control.placement-top-end{inset-block:0 auto}.control.placement-top-start,.control.placement-bottom-start{right:auto;inset-inline-end:auto;margin-inline:16px}.control.placement-top-end,.control.placement-bottom-end{inset-inline-start:auto;margin-inline:16px}.control:where(.strategy-static){position:static;margin:0;inline-size:auto}.control:not(.open){opacity:0;transform:scale(.8)}.control.open{opacity:1;transform:scale(1)}@media (width <= 768px){.control{min-inline-size:var(--alert-min-inline-size, auto)}}.base{display:flex;align-items:center;padding:16px;border-radius:8px;background-color:var(--vvd-color-neutral-50);color:var(--vvd-color-canvas-text);column-gap:16px}.base.connotation-success{--_connotation-color-primary: var(--vvd-alert-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-alert-success-primary-text, var(--vvd-color-canvas))}.base.connotation-information{--_connotation-color-primary: var(--vvd-alert-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-alert-information-primary-text, var(--vvd-color-canvas))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-alert-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-alert-alert-primary-text, var(--vvd-color-canvas))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-alert-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-alert-warning-primary-text, var(--vvd-color-canvas-text))}.base.connotation-announcement{--_connotation-color-primary: var(--vvd-alert-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-alert-announcement-primary-text, var(--vvd-color-canvas))}.base:not(.connotation-success,.connotation-information,.connotation-alert,.connotation-warning,.connotation-announcement){--_connotation-color-primary: var(--vvd-alert-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-alert-accent-primary-text, var(--vvd-color-canvas))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base .alert-text{margin-inline-end:auto}.base .alert-text .headline{font:var(--vvd-typography-base-bold);margin-block-end:4px}.base .alert-text .main-text{font:var(--vvd-typography-base)}.base .alert-text .headline+::slotted([slot=main i]:first-child):before,.base .alert-text .main-text+::slotted([slot=main i]:first-child):before{display:block;margin-top:8px;content:\"\"}.base slot[name=icon]{flex-shrink:0;color:var(--_appearance-color-fill);font-size:24px;line-height:1}.base .dismiss-button{border-left:1px solid var(--vvd-color-neutral-200);padding-inline-start:8px}";
17
17
 
18
18
  var __defProp = Object.defineProperty;
19
19
  var __decorateClass = (decorators, target, key, kind) => {
@@ -21,8 +21,7 @@ var __decorateClass = (decorators, target, key, kind) => {
21
21
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
22
22
  if (decorator = decorators[i])
23
23
  result = (decorator(target, key, result) ) || result;
24
- if (result)
25
- __defProp(target, key, result);
24
+ if (result) __defProp(target, key, result);
26
25
  return result;
27
26
  };
28
27
  const connotationIconMap = /* @__PURE__ */ new Map([
@@ -42,8 +41,7 @@ class Alert extends index.FoundationElement {
42
41
  this.timeoutms = 0;
43
42
  this.open = false;
44
43
  this.#closeOnEscape = (e) => {
45
- if (this.removable && e.key === "Escape")
46
- this.open = false;
44
+ if (this.removable && e.key === "Escape") this.open = false;
47
45
  };
48
46
  this.#onTransitionEnd = () => {
49
47
  if (!this.open) {
@@ -56,8 +54,7 @@ class Alert extends index.FoundationElement {
56
54
  // timeout to close the alert
57
55
  #timeoutID;
58
56
  openChanged(oldValue, newValue) {
59
- if (oldValue === void 0)
60
- return;
57
+ if (oldValue === void 0) return;
61
58
  this.$emit(newValue ? "open" : "close");
62
59
  this.#setupTimeout();
63
60
  if (newValue) {
@@ -86,8 +83,7 @@ class Alert extends index.FoundationElement {
86
83
  }
87
84
  disconnectedCallback() {
88
85
  super.disconnectedCallback();
89
- if (this.#timeoutID)
90
- clearTimeout(this.#timeoutID);
86
+ if (this.#timeoutID) clearTimeout(this.#timeoutID);
91
87
  this.removeEventListener("keydown", this.#closeOnEscape);
92
88
  if (this.controlEl)
93
89
  this.controlEl.removeEventListener(
@@ -99,8 +95,7 @@ class Alert extends index.FoundationElement {
99
95
  return this.icon || connotationIconMap.get(this.connotation);
100
96
  }
101
97
  #setupTimeout() {
102
- if (this.#timeoutID)
103
- clearTimeout(this.#timeoutID);
98
+ if (this.#timeoutID) clearTimeout(this.#timeoutID);
104
99
  if (this.open && this.timeoutms > 0) {
105
100
  this.#timeoutID = setTimeout(() => this.open = false, this.timeoutms);
106
101
  }
@@ -183,8 +178,7 @@ const AlertTemplate = (context) => {
183
178
  index.html`<header class="headline">${(x) => x.headline}</header>`
184
179
  )}
185
180
  ${when.when((x) => x.text, index.html`<div class="main-text">${(x) => x.text}</div>`)}
186
- <slot name="main">
187
- </slot>
181
+ <slot name="main"></slot>
188
182
  </div>
189
183
  <slot class="action-items" name="action-items"></slot>
190
184
  ${when.when((x) => x.removable, renderDismissButton(buttonTag))}
package/shared/definition4.js CHANGED
@@ -11,7 +11,7 @@ import { B as Button$1 } from './button.js';
11
11
  import { w as when } from './when.js';
12
12
  import { c as classNames } from './class-names.js';
13
13
 
14
- const styles = ".control{position:fixed;z-index:10;border-radius:8px;inline-size:max-content;inset-block-end:0;inset-inline:0 0;margin-block:16px;margin-inline:auto;max-inline-size:var(--alert-max-inline-size, fit-content);min-inline-size:var(--alert-min-inline-size, 420px);transition:opacity .15s cubic-bezier(0,0,.2,1) 0ms,transform .15s cubic-bezier(0,0,.2,1) 0ms}.control.placement-top,.control.placement-top-start,.control.placement-top-end{inset-block:0 auto}.control.placement-top-start,.control.placement-bottom-start{right:auto;inset-inline-end:auto;margin-inline:16px}.control.placement-top-end,.control.placement-bottom-end{inset-inline-start:auto;margin-inline:16px}.control:where(.strategy-static){position:static;margin:0;inline-size:auto}.control:not(.open){opacity:0;transform:scale(.8)}.control.open{opacity:1;transform:scale(1)}@media (width <= 768px){.control{min-inline-size:var(--alert-min-inline-size, auto)}}.base{display:flex;align-items:center;padding:16px;border-radius:8px;background-color:var(--vvd-color-neutral-50);color:var(--vvd-color-canvas-text);column-gap:16px}.base.connotation-success{--_connotation-color-primary: var(--vvd-alert-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-alert-success-primary-text, var(--vvd-color-canvas))}.base.connotation-information{--_connotation-color-primary: var(--vvd-alert-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-alert-information-primary-text, var(--vvd-color-canvas))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-alert-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-alert-alert-primary-text, var(--vvd-color-canvas))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-alert-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-alert-warning-primary-text, var(--vvd-color-canvas-text))}.base.connotation-announcement{--_connotation-color-primary: var(--vvd-alert-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-alert-announcement-primary-text, var(--vvd-color-canvas))}.base:not(.connotation-success,.connotation-information,.connotation-alert,.connotation-warning,.connotation-announcement){--_connotation-color-primary: var(--vvd-alert-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-alert-accent-primary-text, var(--vvd-color-canvas))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base .alert-text{margin-inline-end:auto}.base .alert-text .headline{font:var(--vvd-typography-base-bold);margin-block-end:4px}.base .alert-text .main-text{font:var(--vvd-typography-base)}.base slot[name=icon]{flex-shrink:0;color:var(--_appearance-color-fill);font-size:24px;line-height:1}.base .dismiss-button{border-left:1px solid var(--vvd-color-neutral-200);padding-inline-start:8px}";
14
+ const styles = ".control{position:fixed;z-index:10;border-radius:8px;inline-size:max-content;inset-block-end:0;inset-inline:0 0;margin-block:16px;margin-inline:auto;max-inline-size:var(--alert-max-inline-size, fit-content);min-inline-size:var(--alert-min-inline-size, 420px);transition:opacity .15s cubic-bezier(0,0,.2,1) 0ms,transform .15s cubic-bezier(0,0,.2,1) 0ms}.control.placement-top,.control.placement-top-start,.control.placement-top-end{inset-block:0 auto}.control.placement-top-start,.control.placement-bottom-start{right:auto;inset-inline-end:auto;margin-inline:16px}.control.placement-top-end,.control.placement-bottom-end{inset-inline-start:auto;margin-inline:16px}.control:where(.strategy-static){position:static;margin:0;inline-size:auto}.control:not(.open){opacity:0;transform:scale(.8)}.control.open{opacity:1;transform:scale(1)}@media (width <= 768px){.control{min-inline-size:var(--alert-min-inline-size, auto)}}.base{display:flex;align-items:center;padding:16px;border-radius:8px;background-color:var(--vvd-color-neutral-50);color:var(--vvd-color-canvas-text);column-gap:16px}.base.connotation-success{--_connotation-color-primary: var(--vvd-alert-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-alert-success-primary-text, var(--vvd-color-canvas))}.base.connotation-information{--_connotation-color-primary: var(--vvd-alert-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-alert-information-primary-text, var(--vvd-color-canvas))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-alert-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-alert-alert-primary-text, var(--vvd-color-canvas))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-alert-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-alert-warning-primary-text, var(--vvd-color-canvas-text))}.base.connotation-announcement{--_connotation-color-primary: var(--vvd-alert-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-alert-announcement-primary-text, var(--vvd-color-canvas))}.base:not(.connotation-success,.connotation-information,.connotation-alert,.connotation-warning,.connotation-announcement){--_connotation-color-primary: var(--vvd-alert-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-alert-accent-primary-text, var(--vvd-color-canvas))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base .alert-text{margin-inline-end:auto}.base .alert-text .headline{font:var(--vvd-typography-base-bold);margin-block-end:4px}.base .alert-text .main-text{font:var(--vvd-typography-base)}.base .alert-text .headline+::slotted([slot=main i]:first-child):before,.base .alert-text .main-text+::slotted([slot=main i]:first-child):before{display:block;margin-top:8px;content:\"\"}.base slot[name=icon]{flex-shrink:0;color:var(--_appearance-color-fill);font-size:24px;line-height:1}.base .dismiss-button{border-left:1px solid var(--vvd-color-neutral-200);padding-inline-start:8px}";
15
15
 
16
16
  var __defProp = Object.defineProperty;
17
17
  var __decorateClass = (decorators, target, key, kind) => {
@@ -19,8 +19,7 @@ var __decorateClass = (decorators, target, key, kind) => {
19
19
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
20
20
  if (decorator = decorators[i])
21
21
  result = (decorator(target, key, result) ) || result;
22
- if (result)
23
- __defProp(target, key, result);
22
+ if (result) __defProp(target, key, result);
24
23
  return result;
25
24
  };
26
25
  const connotationIconMap = /* @__PURE__ */ new Map([
@@ -40,8 +39,7 @@ class Alert extends FoundationElement {
40
39
  this.timeoutms = 0;
41
40
  this.open = false;
42
41
  this.#closeOnEscape = (e) => {
43
- if (this.removable && e.key === "Escape")
44
- this.open = false;
42
+ if (this.removable && e.key === "Escape") this.open = false;
45
43
  };
46
44
  this.#onTransitionEnd = () => {
47
45
  if (!this.open) {
@@ -54,8 +52,7 @@ class Alert extends FoundationElement {
54
52
  // timeout to close the alert
55
53
  #timeoutID;
56
54
  openChanged(oldValue, newValue) {
57
- if (oldValue === void 0)
58
- return;
55
+ if (oldValue === void 0) return;
59
56
  this.$emit(newValue ? "open" : "close");
60
57
  this.#setupTimeout();
61
58
  if (newValue) {
@@ -84,8 +81,7 @@ class Alert extends FoundationElement {
84
81
  }
85
82
  disconnectedCallback() {
86
83
  super.disconnectedCallback();
87
- if (this.#timeoutID)
88
- clearTimeout(this.#timeoutID);
84
+ if (this.#timeoutID) clearTimeout(this.#timeoutID);
89
85
  this.removeEventListener("keydown", this.#closeOnEscape);
90
86
  if (this.controlEl)
91
87
  this.controlEl.removeEventListener(
@@ -97,8 +93,7 @@ class Alert extends FoundationElement {
97
93
  return this.icon || connotationIconMap.get(this.connotation);
98
94
  }
99
95
  #setupTimeout() {
100
- if (this.#timeoutID)
101
- clearTimeout(this.#timeoutID);
96
+ if (this.#timeoutID) clearTimeout(this.#timeoutID);
102
97
  if (this.open && this.timeoutms > 0) {
103
98
  this.#timeoutID = setTimeout(() => this.open = false, this.timeoutms);
104
99
  }
@@ -181,8 +176,7 @@ const AlertTemplate = (context) => {
181
176
  html`<header class="headline">${(x) => x.headline}</header>`
182
177
  )}
183
178
  ${when((x) => x.text, html`<div class="main-text">${(x) => x.text}</div>`)}
184
- <slot name="main">
185
- </slot>
179
+ <slot name="main"></slot>
186
180
  </div>
187
181
  <slot class="action-items" name="action-items"></slot>
188
182
  ${when((x) => x.removable, renderDismissButton(buttonTag))}
package/shared/definition40.cjs CHANGED
@@ -403,8 +403,7 @@ var __decorateClass = (decorators, target, key, kind) => {
403
403
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
404
404
  if (decorator = decorators[i])
405
405
  result = (decorator(target, key, result) ) || result;
406
- if (result)
407
- __defProp(target, key, result);
406
+ if (result) __defProp(target, key, result);
408
407
  return result;
409
408
  };
410
409
  class RadioGroup extends RadioGroup$1 {
package/shared/definition40.js CHANGED
@@ -401,8 +401,7 @@ var __decorateClass = (decorators, target, key, kind) => {
401
401
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
402
402
  if (decorator = decorators[i])
403
403
  result = (decorator(target, key, result) ) || result;
404
- if (result)
405
- __defProp(target, key, result);
404
+ if (result) __defProp(target, key, result);
406
405
  return result;
407
406
  };
408
407
  class RadioGroup extends RadioGroup$1 {