@vonage/vivid 4.23.0 → 4.24.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 (49) hide show
  1. package/custom-elements.json +574 -642
  2. package/lib/file-picker/file-picker.d.ts +2 -2
  3. package/lib/file-picker/locale.d.ts +1 -0
  4. package/lib/rich-text-editor/locale.d.ts +9 -0
  5. package/lib/rich-text-editor/menubar/menubar.d.ts +334 -1
  6. package/lib/searchable-select/locale.d.ts +1 -0
  7. package/lib/searchable-select/searchable-select.d.ts +1 -0
  8. package/lib/tabs/tabs.d.ts +5 -21
  9. package/locales/de-DE.cjs +15 -1
  10. package/locales/de-DE.js +15 -1
  11. package/locales/en-GB.cjs +15 -1
  12. package/locales/en-GB.js +15 -1
  13. package/locales/en-US.cjs +15 -1
  14. package/locales/en-US.js +15 -1
  15. package/locales/ja-JP.cjs +15 -1
  16. package/locales/ja-JP.js +15 -1
  17. package/locales/zh-CN.cjs +15 -1
  18. package/locales/zh-CN.js +15 -1
  19. package/package.json +1 -1
  20. package/shared/button.cjs +6 -3
  21. package/shared/button.js +6 -3
  22. package/shared/definition12.cjs +1 -1
  23. package/shared/definition12.js +1 -1
  24. package/shared/definition17.cjs +4 -1
  25. package/shared/definition17.js +4 -1
  26. package/shared/definition22.cjs +8 -2
  27. package/shared/definition22.js +8 -2
  28. package/shared/definition26.cjs +13 -2
  29. package/shared/definition26.js +13 -2
  30. package/shared/definition43.cjs +96 -32
  31. package/shared/definition43.js +96 -32
  32. package/shared/definition44.cjs +74 -4
  33. package/shared/definition44.js +74 -4
  34. package/shared/definition45.cjs +7 -1
  35. package/shared/definition45.js +7 -1
  36. package/shared/definition50.cjs +1 -1
  37. package/shared/definition50.js +1 -1
  38. package/shared/definition53.cjs +219 -297
  39. package/shared/definition53.js +221 -299
  40. package/shared/localization/Locale.d.ts +2 -0
  41. package/shared/vivid-element.cjs +1 -1
  42. package/shared/vivid-element.js +1 -1
  43. package/styles/core/all.css +1 -1
  44. package/styles/core/theme.css +1 -1
  45. package/styles/core/typography.css +1 -1
  46. package/styles/tokens/theme-dark.css +4 -4
  47. package/styles/tokens/theme-light.css +4 -4
  48. package/styles/tokens/vivid-2-compat.css +1 -1
  49. package/vivid.api.json +33 -3
package/locales/ja-JP.js CHANGED
@@ -297,7 +297,8 @@ const jaJP = {
297
297
  invalidFileTypeError: "この種類のファイルは選択できません。",
298
298
  maxFilesExceededError: "これ以上ファイルを選択できません。",
299
299
  fileTooBigError: "ファイルが大きすぎます ({{filesize}}MiB)。最大ファイルサイズ: {{maxFilesize}}MiB。",
300
- removeFileLabel: "ファイルを削除"
300
+ removeFileLabel: "ファイルを削除",
301
+ invalidFilesError: "選択したファイルの1つ以上が無効です。サイズ制限以下の有効なファイル形式のみをアップロードしてください。"
301
302
  },
302
303
  audioPlayer: {
303
304
  playButtonLabel: "開始",
@@ -368,7 +369,20 @@ const jaJP = {
368
369
  optionFocusedMessage: (
369
370
  /* istanbul ignore next */
370
371
  (name, position, total) => `オプション ${name} がフォーカスされました。${position}/${total}`
372
+ ),
373
+ maxSelectedMessage: (
374
+ /* istanbul ignore next */
375
+ (total, limit) => `${limit}件中${total}件を選択。`
371
376
  )
377
+ },
378
+ richTextEditor: {
379
+ textBlockType: "テキストブロックタイプ",
380
+ textSize: "文字サイズ",
381
+ bold: "太字",
382
+ italics: "斜体",
383
+ underline: "下線",
384
+ strikethrough: "取り消し線",
385
+ monospace: "等幅"
372
386
  }
373
387
  };
374
388
 
package/locales/zh-CN.cjs CHANGED
@@ -301,7 +301,8 @@ const zhCN = {
301
301
  invalidFileTypeError: "您不能选择此类型的文件。",
302
302
  maxFilesExceededError: "您不能再选择任何文件。",
303
303
  fileTooBigError: "文件太大 ({{filesize}}MiB)。最大文件大小: {{maxFilesize}}MiB。",
304
- removeFileLabel: "删除文件"
304
+ removeFileLabel: "删除文件",
305
+ invalidFilesError: "所选的一个或多个文件无效。请仅上传大小限制内的有效文件类型。"
305
306
  },
306
307
  audioPlayer: {
307
308
  playButtonLabel: "草創",
@@ -372,7 +373,20 @@ const zhCN = {
372
373
  optionFocusedMessage: (
373
374
  /* istanbul ignore next */
374
375
  (name, position, total) => `选项 ${name} 已聚焦, ${position} 的 ${total}。`
376
+ ),
377
+ maxSelectedMessage: (
378
+ /* istanbul ignore next */
379
+ (total, limit) => `已选择 ${limit} 个中的 ${total} 个。`
375
380
  )
381
+ },
382
+ richTextEditor: {
383
+ textBlockType: "文本块类型",
384
+ textSize: "文字大小",
385
+ bold: "加粗",
386
+ italics: "斜体",
387
+ underline: "下划线",
388
+ strikethrough: "删除线",
389
+ monospace: "等宽字体"
376
390
  }
377
391
  };
378
392
 
package/locales/zh-CN.js CHANGED
@@ -299,7 +299,8 @@ const zhCN = {
299
299
  invalidFileTypeError: "您不能选择此类型的文件。",
300
300
  maxFilesExceededError: "您不能再选择任何文件。",
301
301
  fileTooBigError: "文件太大 ({{filesize}}MiB)。最大文件大小: {{maxFilesize}}MiB。",
302
- removeFileLabel: "删除文件"
302
+ removeFileLabel: "删除文件",
303
+ invalidFilesError: "所选的一个或多个文件无效。请仅上传大小限制内的有效文件类型。"
303
304
  },
304
305
  audioPlayer: {
305
306
  playButtonLabel: "草創",
@@ -370,7 +371,20 @@ const zhCN = {
370
371
  optionFocusedMessage: (
371
372
  /* istanbul ignore next */
372
373
  (name, position, total) => `选项 ${name} 已聚焦, ${position} 的 ${total}。`
374
+ ),
375
+ maxSelectedMessage: (
376
+ /* istanbul ignore next */
377
+ (total, limit) => `已选择 ${limit} 个中的 ${total} 个。`
373
378
  )
379
+ },
380
+ richTextEditor: {
381
+ textBlockType: "文本块类型",
382
+ textSize: "文字大小",
383
+ bold: "加粗",
384
+ italics: "斜体",
385
+ underline: "下划线",
386
+ strikethrough: "删除线",
387
+ monospace: "等宽字体"
374
388
  }
375
389
  };
376
390
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vonage/vivid",
3
- "version": "4.23.0",
3
+ "version": "4.24.0",
4
4
  "type": "module",
5
5
  "module": "./index.js",
6
6
  "main": "./index.cjs",
package/shared/button.cjs CHANGED
@@ -60,9 +60,12 @@ class VividFoundationButton extends delegatesAria.DelegatesAria(FormAssociatedBu
60
60
  if (this.$fastController.definition.shadowOptions) {
61
61
  if (window.ShadowRoot && /* eslint-disable-next-line */
62
62
  !window.ShadowRoot.prototype.hasOwnProperty("delegatesFocus") && this.$fastController.definition.shadowOptions.delegatesFocus) {
63
- this.focus = () => {
64
- this.control.focus();
65
- };
63
+ Object.defineProperty(this, "focus", {
64
+ value: () => {
65
+ this.control.focus();
66
+ },
67
+ configurable: true
68
+ });
66
69
  }
67
70
  }
68
71
  };
package/shared/button.js CHANGED
@@ -58,9 +58,12 @@ class VividFoundationButton extends DelegatesAria(FormAssociatedButton) {
58
58
  if (this.$fastController.definition.shadowOptions) {
59
59
  if (window.ShadowRoot && /* eslint-disable-next-line */
60
60
  !window.ShadowRoot.prototype.hasOwnProperty("delegatesFocus") && this.$fastController.definition.shadowOptions.delegatesFocus) {
61
- this.focus = () => {
62
- this.control.focus();
63
- };
61
+ Object.defineProperty(this, "focus", {
62
+ value: () => {
63
+ this.control.focus();
64
+ },
65
+ configurable: true
66
+ });
64
67
  }
65
68
  }
66
69
  };
package/shared/definition12.cjs CHANGED
@@ -6,7 +6,7 @@ const delegatesAria = require('./delegates-aria.cjs');
6
6
  const classNames = require('./class-names.cjs');
7
7
  const when = require('./when.cjs');
8
8
 
9
- const styles = ":host{display:contents}.base.connotation-accent{--_connotation-color-primary: var(--vvd-calendar-event-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-calendar-event-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-soft: var(--vvd-calendar-event-accent-soft, var(--vvd-color-neutral-100))}.base.connotation-cta{--_connotation-color-primary: var(--vvd-calendar-event-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-calendar-event-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-soft: var(--vvd-calendar-event-cta-soft, var(--vvd-color-cta-100))}.base.connotation-success{--_connotation-color-primary: var(--vvd-calendar-event-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-calendar-event-success-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-success-contrast, var(--vvd-color-success-800));--_connotation-color-soft: var(--vvd-calendar-event-success-soft, var(--vvd-color-success-100))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-calendar-event-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-calendar-event-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-soft: var(--vvd-calendar-event-alert-soft, var(--vvd-color-alert-100))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-calendar-event-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-calendar-event-warning-primary-text, var(--vvd-color-canvas-text));--_connotation-color-contrast: var(--vvd-calendar-event-warning-contrast, var(--vvd-color-warning-800));--_connotation-color-soft: var(--vvd-calendar-event-warning-soft, var(--vvd-color-warning-100))}.base.connotation-announcement{--_connotation-color-primary: var(--vvd-calendar-event-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-calendar-event-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-soft: var(--vvd-calendar-event-announcement-soft, var(--vvd-color-announcement-100))}.base:not(.connotation-accent,.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-announcement){--_connotation-color-primary: var(--vvd-calendar-event-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-calendar-event-information-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-information-contrast, var(--vvd-color-information-800));--_connotation-color-soft: var(--vvd-calendar-event-information-soft, var(--vvd-color-information-100))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base{--vvd-calendar-event--indent: calc(0px + var(--vvd-calendar-event--overlap-count, 0) * 8px);position:absolute;z-index:var(--vvd-calendar-event--overlap-count);top:calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0)));overflow:hidden;box-sizing:border-box;padding:4px 8px;border-radius:8px;background-color:var(--_appearance-color-fill);block-size:calc(var(--vvd-calendar-event--duration, 1) * calc((100% - 23px) / 24) + calc(1px * (var(--vvd-calendar-event--duration, 1) - 1)) - 4px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(100% - 8px - min(var(--vvd-calendar-event--indent),32px));margin-block-start:2px;margin-inline:min(var(--vvd-calendar-event--indent),32px) 8px;max-block-size:calc(100% - calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0))) - 4px)}@supports (contain: content){.base{contain:strict}}@supports not (contain: content){.base{overflow:hidden}}.base:focus{z-index:2000;filter:var(--vvd-shadow-surface-8dp);outline:none}h2{margin:0;font:var(--vvd-typography-base-condensed-bold)}h2>strong{font:inherit}p{margin:0;font:var(--vvd-typography-base-condensed)}";
9
+ const styles = ":host{display:contents}.base.connotation-accent{--_connotation-color-primary: var(--vvd-calendar-event-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-calendar-event-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-soft: var(--vvd-calendar-event-accent-soft, var(--vvd-color-neutral-100))}.base.connotation-cta{--_connotation-color-primary: var(--vvd-calendar-event-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-calendar-event-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-soft: var(--vvd-calendar-event-cta-soft, var(--vvd-color-cta-100))}.base.connotation-success{--_connotation-color-primary: var(--vvd-calendar-event-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-calendar-event-success-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-success-contrast, var(--vvd-color-success-800));--_connotation-color-soft: var(--vvd-calendar-event-success-soft, var(--vvd-color-success-100))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-calendar-event-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-calendar-event-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-soft: var(--vvd-calendar-event-alert-soft, var(--vvd-color-alert-100))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-calendar-event-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-calendar-event-warning-primary-text, var(--vvd-color-canvas-text));--_connotation-color-contrast: var(--vvd-calendar-event-warning-contrast, var(--vvd-color-warning-800));--_connotation-color-soft: var(--vvd-calendar-event-warning-soft, var(--vvd-color-warning-100))}.base.connotation-announcement{--_connotation-color-primary: var(--vvd-calendar-event-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-calendar-event-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-soft: var(--vvd-calendar-event-announcement-soft, var(--vvd-color-announcement-100))}.base:not(.connotation-accent,.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-announcement){--_connotation-color-primary: var(--vvd-calendar-event-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-calendar-event-information-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-information-contrast, var(--vvd-color-information-800));--_connotation-color-soft: var(--vvd-calendar-event-information-soft, var(--vvd-color-information-100))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base{--vvd-calendar-event--indent: calc(0px + var(--vvd-calendar-event--overlap-count, 0) * 8px);--focus-stroke-gap-color: transparent;position:absolute;z-index:var(--vvd-calendar-event--overlap-count);top:calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0)));overflow:hidden;box-sizing:border-box;padding:4px 8px;border-radius:8px;background-color:var(--_appearance-color-fill);block-size:calc(var(--vvd-calendar-event--duration, 1) * calc((100% - 23px) / 24) + calc(1px * (var(--vvd-calendar-event--duration, 1) - 1)) - 4px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(100% - 8px - min(var(--vvd-calendar-event--indent),32px));margin-block-start:2px;margin-inline:min(var(--vvd-calendar-event--indent),32px) 8px;max-block-size:calc(100% - calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0))) - 4px)}@supports (contain: content){.base{contain:strict}}@supports not (contain: content){.base{overflow:hidden}}.base:focus{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));z-index:2000}:host([overlap-count]) .base{--focus-stroke-gap-color: var(--vvd-color-canvas)}:host([overlap-count]) .base:not(:focus){box-shadow:inset 0 0 0 1px var(--vvd-color-canvas)}h2{margin:0;font:var(--vvd-typography-base-condensed-bold)}h2>strong{font:inherit}p{margin:0;font:var(--vvd-typography-base-condensed)}";
10
10
 
11
11
  const getClasses = ({ connotation, appearance }) => classNames.classNames(
12
12
  "base",
package/shared/definition12.js CHANGED
@@ -4,7 +4,7 @@ import { d as delegateAria } from './delegates-aria.js';
4
4
  import { c as classNames } from './class-names.js';
5
5
  import { w as when } from './when.js';
6
6
 
7
- const styles = ":host{display:contents}.base.connotation-accent{--_connotation-color-primary: var(--vvd-calendar-event-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-calendar-event-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-soft: var(--vvd-calendar-event-accent-soft, var(--vvd-color-neutral-100))}.base.connotation-cta{--_connotation-color-primary: var(--vvd-calendar-event-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-calendar-event-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-soft: var(--vvd-calendar-event-cta-soft, var(--vvd-color-cta-100))}.base.connotation-success{--_connotation-color-primary: var(--vvd-calendar-event-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-calendar-event-success-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-success-contrast, var(--vvd-color-success-800));--_connotation-color-soft: var(--vvd-calendar-event-success-soft, var(--vvd-color-success-100))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-calendar-event-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-calendar-event-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-soft: var(--vvd-calendar-event-alert-soft, var(--vvd-color-alert-100))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-calendar-event-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-calendar-event-warning-primary-text, var(--vvd-color-canvas-text));--_connotation-color-contrast: var(--vvd-calendar-event-warning-contrast, var(--vvd-color-warning-800));--_connotation-color-soft: var(--vvd-calendar-event-warning-soft, var(--vvd-color-warning-100))}.base.connotation-announcement{--_connotation-color-primary: var(--vvd-calendar-event-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-calendar-event-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-soft: var(--vvd-calendar-event-announcement-soft, var(--vvd-color-announcement-100))}.base:not(.connotation-accent,.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-announcement){--_connotation-color-primary: var(--vvd-calendar-event-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-calendar-event-information-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-information-contrast, var(--vvd-color-information-800));--_connotation-color-soft: var(--vvd-calendar-event-information-soft, var(--vvd-color-information-100))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base{--vvd-calendar-event--indent: calc(0px + var(--vvd-calendar-event--overlap-count, 0) * 8px);position:absolute;z-index:var(--vvd-calendar-event--overlap-count);top:calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0)));overflow:hidden;box-sizing:border-box;padding:4px 8px;border-radius:8px;background-color:var(--_appearance-color-fill);block-size:calc(var(--vvd-calendar-event--duration, 1) * calc((100% - 23px) / 24) + calc(1px * (var(--vvd-calendar-event--duration, 1) - 1)) - 4px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(100% - 8px - min(var(--vvd-calendar-event--indent),32px));margin-block-start:2px;margin-inline:min(var(--vvd-calendar-event--indent),32px) 8px;max-block-size:calc(100% - calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0))) - 4px)}@supports (contain: content){.base{contain:strict}}@supports not (contain: content){.base{overflow:hidden}}.base:focus{z-index:2000;filter:var(--vvd-shadow-surface-8dp);outline:none}h2{margin:0;font:var(--vvd-typography-base-condensed-bold)}h2>strong{font:inherit}p{margin:0;font:var(--vvd-typography-base-condensed)}";
7
+ const styles = ":host{display:contents}.base.connotation-accent{--_connotation-color-primary: var(--vvd-calendar-event-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-calendar-event-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-soft: var(--vvd-calendar-event-accent-soft, var(--vvd-color-neutral-100))}.base.connotation-cta{--_connotation-color-primary: var(--vvd-calendar-event-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-calendar-event-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-soft: var(--vvd-calendar-event-cta-soft, var(--vvd-color-cta-100))}.base.connotation-success{--_connotation-color-primary: var(--vvd-calendar-event-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-calendar-event-success-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-success-contrast, var(--vvd-color-success-800));--_connotation-color-soft: var(--vvd-calendar-event-success-soft, var(--vvd-color-success-100))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-calendar-event-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-calendar-event-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-soft: var(--vvd-calendar-event-alert-soft, var(--vvd-color-alert-100))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-calendar-event-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-calendar-event-warning-primary-text, var(--vvd-color-canvas-text));--_connotation-color-contrast: var(--vvd-calendar-event-warning-contrast, var(--vvd-color-warning-800));--_connotation-color-soft: var(--vvd-calendar-event-warning-soft, var(--vvd-color-warning-100))}.base.connotation-announcement{--_connotation-color-primary: var(--vvd-calendar-event-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-calendar-event-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-soft: var(--vvd-calendar-event-announcement-soft, var(--vvd-color-announcement-100))}.base:not(.connotation-accent,.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-announcement){--_connotation-color-primary: var(--vvd-calendar-event-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-calendar-event-information-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-information-contrast, var(--vvd-color-information-800));--_connotation-color-soft: var(--vvd-calendar-event-information-soft, var(--vvd-color-information-100))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base{--vvd-calendar-event--indent: calc(0px + var(--vvd-calendar-event--overlap-count, 0) * 8px);--focus-stroke-gap-color: transparent;position:absolute;z-index:var(--vvd-calendar-event--overlap-count);top:calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0)));overflow:hidden;box-sizing:border-box;padding:4px 8px;border-radius:8px;background-color:var(--_appearance-color-fill);block-size:calc(var(--vvd-calendar-event--duration, 1) * calc((100% - 23px) / 24) + calc(1px * (var(--vvd-calendar-event--duration, 1) - 1)) - 4px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(100% - 8px - min(var(--vvd-calendar-event--indent),32px));margin-block-start:2px;margin-inline:min(var(--vvd-calendar-event--indent),32px) 8px;max-block-size:calc(100% - calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0))) - 4px)}@supports (contain: content){.base{contain:strict}}@supports not (contain: content){.base{overflow:hidden}}.base:focus{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));z-index:2000}:host([overlap-count]) .base{--focus-stroke-gap-color: var(--vvd-color-canvas)}:host([overlap-count]) .base:not(:focus){box-shadow:inset 0 0 0 1px var(--vvd-color-canvas)}h2{margin:0;font:var(--vvd-typography-base-condensed-bold)}h2>strong{font:inherit}p{margin:0;font:var(--vvd-typography-base-condensed)}";
8
8
 
9
9
  const getClasses = ({ connotation, appearance }) => classNames(
10
10
  "base",
package/shared/definition17.cjs CHANGED
@@ -1190,7 +1190,10 @@ const DataGridCellTemplate = (context) => {
1190
1190
  @click="${(x) => x._handleInteraction()}"
1191
1191
  @keydown="${(x, c) => handleKeyDown(x, c.event)}"
1192
1192
  >
1193
- <div class="base">
1193
+ <div
1194
+ class="base"
1195
+ role="${(x) => shouldShowSortIcons(x) ? "button" : void 0}"
1196
+ >
1194
1197
  <slot></slot>
1195
1198
  ${(_) => renderSortIcons(context)}
1196
1199
  </div>
package/shared/definition17.js CHANGED
@@ -1188,7 +1188,10 @@ const DataGridCellTemplate = (context) => {
1188
1188
  @click="${(x) => x._handleInteraction()}"
1189
1189
  @keydown="${(x, c) => handleKeyDown(x, c.event)}"
1190
1190
  >
1191
- <div class="base">
1191
+ <div
1192
+ class="base"
1193
+ role="${(x) => shouldShowSortIcons(x) ? "button" : void 0}"
1194
+ >
1192
1195
  <slot></slot>
1193
1196
  ${(_) => renderSortIcons(context)}
1194
1197
  </div>
package/shared/definition22.cjs CHANGED
@@ -267,6 +267,11 @@ function headline() {
267
267
  function subtitle() {
268
268
  return vividElement.html` <div class="subtitle">${(x) => x.subtitle}</div> `;
269
269
  }
270
+ function renderHeaderText() {
271
+ return vividElement.html`
272
+ <div class="header-text">${headline()} ${subtitle()}</div>
273
+ `;
274
+ }
270
275
  function renderDismissButton(buttonTag) {
271
276
  return vividElement.html`
272
277
  <${buttonTag}
@@ -296,8 +301,9 @@ const DialogTemplate = (context) => {
296
301
  <slot name="graphic">
297
302
  ${when.when((x) => x.icon, icon(iconTag))}
298
303
  </slot>
299
- ${when.when((x) => x.headline, headline())}
300
- ${when.when((x) => x.subtitle, subtitle())}
304
+ ${when.when((x) => x.headline && x.subtitle, renderHeaderText())}
305
+ ${when.when((x) => x.headline && !x.subtitle, headline())}
306
+ ${when.when((x) => x.subtitle && !x.headline, subtitle())}
301
307
  ${when.when((x) => x._showDismissButton, renderDismissButton(buttonTag))}
302
308
  </div>
303
309
  <div class="body ${(x) => x.fullWidthBody ? "full-width" : ""}" >
package/shared/definition22.js CHANGED
@@ -265,6 +265,11 @@ function headline() {
265
265
  function subtitle() {
266
266
  return html` <div class="subtitle">${(x) => x.subtitle}</div> `;
267
267
  }
268
+ function renderHeaderText() {
269
+ return html`
270
+ <div class="header-text">${headline()} ${subtitle()}</div>
271
+ `;
272
+ }
268
273
  function renderDismissButton(buttonTag) {
269
274
  return html`
270
275
  <${buttonTag}
@@ -294,8 +299,9 @@ const DialogTemplate = (context) => {
294
299
  <slot name="graphic">
295
300
  ${when((x) => x.icon, icon(iconTag))}
296
301
  </slot>
297
- ${when((x) => x.headline, headline())}
298
- ${when((x) => x.subtitle, subtitle())}
302
+ ${when((x) => x.headline && x.subtitle, renderHeaderText())}
303
+ ${when((x) => x.headline && !x.subtitle, headline())}
304
+ ${when((x) => x.subtitle && !x.headline, subtitle())}
299
305
  ${when((x) => x._showDismissButton, renderDismissButton(buttonTag))}
300
306
  </div>
301
307
  <div class="body ${(x) => x.fullWidthBody ? "full-width" : ""}" >
package/shared/definition26.cjs CHANGED
@@ -3,8 +3,8 @@
3
3
  const definition$1 = require('./definition28.cjs');
4
4
  const definition = require('./definition11.cjs');
5
5
  const vividElement = require('./vivid-element.cjs');
6
- const applyMixinsWithObservables = require('./applyMixinsWithObservables.cjs');
7
6
  const delegatesAria = require('./delegates-aria.cjs');
7
+ const applyMixinsWithObservables = require('./applyMixinsWithObservables.cjs');
8
8
  const formAssociated = require('./form-associated.cjs');
9
9
  const localized = require('./localized.cjs');
10
10
  const formElements = require('./form-elements.cjs');
@@ -2167,7 +2167,7 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
2167
2167
  var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
2168
2168
  var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
2169
2169
  var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
2170
- var _dropzone, _FilePicker_instances, syncSingleFileState_fn, _localizeErrorMessage, _localizeFileSizeNumberAndUnits, addRemoveButtonToFilesPreview_fn, chooseFile_fn, updateHiddenFileInput_fn, keepOnlyNewestFile_fn, handleFilesChanged_fn, updateFormValue_fn, setValueToAFakePathLikeNativeInput_fn, formatNumbersInMessage_fn;
2170
+ var _dropzone, _FilePicker_instances, syncSingleFileState_fn, _localizeErrorMessage, _localizeFileSizeNumberAndUnits, addRemoveButtonToFilesPreview_fn, chooseFile_fn, updateHiddenFileInput_fn, keepOnlyNewestFile_fn, handleFilesChanged_fn, updateFormValue_fn, setValueToAFakePathLikeNativeInput_fn, getCustomValidationError_fn, formatNumbersInMessage_fn;
2171
2171
  const isFormAssociatedTryingToSetFormValueToFakePath = (value) => typeof value === "string";
2172
2172
  const generateFilePreviewTemplate = (buttonTag, iconTag, locale) => {
2173
2173
  return `<div class="dz-preview dz-file-preview">
@@ -2350,7 +2350,11 @@ exports.FilePicker = class FilePicker extends delegatesAria.DelegatesAria(
2350
2350
  }
2351
2351
  return true;
2352
2352
  }
2353
+ /** {@inheritDoc (FormAssociated:interface).validate} */
2353
2354
  validate() {
2355
+ if (this.proxy) {
2356
+ this.proxy.setCustomValidity(__privateMethod(this, _FilePicker_instances, getCustomValidationError_fn).call(this) ?? "");
2357
+ }
2354
2358
  super.validate(this.control);
2355
2359
  }
2356
2360
  formResetCallback() {
@@ -2413,6 +2417,7 @@ handleFilesChanged_fn = function() {
2413
2417
  }
2414
2418
  this.$emit("change");
2415
2419
  __privateMethod(this, _FilePicker_instances, updateFormValue_fn).call(this);
2420
+ this.validate();
2416
2421
  requestAnimationFrame(() => __privateMethod(this, _FilePicker_instances, syncSingleFileState_fn).call(this));
2417
2422
  };
2418
2423
  updateFormValue_fn = function() {
@@ -2431,6 +2436,12 @@ updateFormValue_fn = function() {
2431
2436
  setValueToAFakePathLikeNativeInput_fn = function() {
2432
2437
  this.value = this.files.length > 0 ? `C:\\fakepath\\${this.files[0].name}` : "";
2433
2438
  };
2439
+ getCustomValidationError_fn = function() {
2440
+ if (this.rejectedFiles.length > 0) {
2441
+ return this.locale.filePicker.invalidFilesError;
2442
+ }
2443
+ return null;
2444
+ };
2434
2445
  formatNumbersInMessage_fn = function(message) {
2435
2446
  if (this.locale.common.useCommaAsDecimalSeparator) {
2436
2447
  return message.replace(/(\d+)\.(\d+)/g, "$1,$2");
package/shared/definition26.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import { I as Icon, i as iconDefinition } from './definition28.js';
2
2
  import { B as Button, b as buttonDefinition } from './definition11.js';
3
3
  import { V as VividElement, a as attr, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
4
- import { a as applyMixinsWithObservables } from './applyMixinsWithObservables.js';
5
4
  import { D as DelegatesAria, d as delegateAria } from './delegates-aria.js';
5
+ import { a as applyMixinsWithObservables } from './applyMixinsWithObservables.js';
6
6
  import { F as FormAssociated } from './form-associated.js';
7
7
  import { L as Localized } from './localized.js';
8
8
  import { a as FormElementHelperText, e as errorText, f as formElements, g as getFeedbackTemplate } from './form-elements.js';
@@ -2165,7 +2165,7 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
2165
2165
  var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
2166
2166
  var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
2167
2167
  var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
2168
- var _dropzone, _FilePicker_instances, syncSingleFileState_fn, _localizeErrorMessage, _localizeFileSizeNumberAndUnits, addRemoveButtonToFilesPreview_fn, chooseFile_fn, updateHiddenFileInput_fn, keepOnlyNewestFile_fn, handleFilesChanged_fn, updateFormValue_fn, setValueToAFakePathLikeNativeInput_fn, formatNumbersInMessage_fn;
2168
+ var _dropzone, _FilePicker_instances, syncSingleFileState_fn, _localizeErrorMessage, _localizeFileSizeNumberAndUnits, addRemoveButtonToFilesPreview_fn, chooseFile_fn, updateHiddenFileInput_fn, keepOnlyNewestFile_fn, handleFilesChanged_fn, updateFormValue_fn, setValueToAFakePathLikeNativeInput_fn, getCustomValidationError_fn, formatNumbersInMessage_fn;
2169
2169
  const isFormAssociatedTryingToSetFormValueToFakePath = (value) => typeof value === "string";
2170
2170
  const generateFilePreviewTemplate = (buttonTag, iconTag, locale) => {
2171
2171
  return `<div class="dz-preview dz-file-preview">
@@ -2348,7 +2348,11 @@ let FilePicker = class extends DelegatesAria(
2348
2348
  }
2349
2349
  return true;
2350
2350
  }
2351
+ /** {@inheritDoc (FormAssociated:interface).validate} */
2351
2352
  validate() {
2353
+ if (this.proxy) {
2354
+ this.proxy.setCustomValidity(__privateMethod(this, _FilePicker_instances, getCustomValidationError_fn).call(this) ?? "");
2355
+ }
2352
2356
  super.validate(this.control);
2353
2357
  }
2354
2358
  formResetCallback() {
@@ -2411,6 +2415,7 @@ handleFilesChanged_fn = function() {
2411
2415
  }
2412
2416
  this.$emit("change");
2413
2417
  __privateMethod(this, _FilePicker_instances, updateFormValue_fn).call(this);
2418
+ this.validate();
2414
2419
  requestAnimationFrame(() => __privateMethod(this, _FilePicker_instances, syncSingleFileState_fn).call(this));
2415
2420
  };
2416
2421
  updateFormValue_fn = function() {
@@ -2429,6 +2434,12 @@ updateFormValue_fn = function() {
2429
2434
  setValueToAFakePathLikeNativeInput_fn = function() {
2430
2435
  this.value = this.files.length > 0 ? `C:\\fakepath\\${this.files[0].name}` : "";
2431
2436
  };
2437
+ getCustomValidationError_fn = function() {
2438
+ if (this.rejectedFiles.length > 0) {
2439
+ return this.locale.filePicker.invalidFilesError;
2440
+ }
2441
+ return null;
2442
+ };
2432
2443
  formatNumbersInMessage_fn = function(message) {
2433
2444
  if (this.locale.common.useCommaAsDecimalSeparator) {
2434
2445
  return message.replace(/(\d+)\.(\d+)/g, "$1,$2");