@vonage/vivid 5.5.0 → 5.6.0

package/locales/de-DE.js

@@ -404,14 +404,40 @@ const deDE = {
     )
   },
   richTextEditor: {
-    textBlockType: "Textblocktyp",
+    paragraphStyles: "Absatzstile",
     textSize: "Textgröße",
     bold: "Fett",
-    italics: "Kursiv",
+    italic: "Kursiv",
     underline: "Unterstrichen",
     strikethrough: "Durchgestrichen",
     monospace: "Monospace",
-    dragAndDropFilesHere: "Dateien hierher ziehen & ablegen"
+    textColor: "Textfarbe",
+    undo: "Rückgängig",
+    redo: "Wiederholen",
+    bulletList: "Aufzählung",
+    numberedList: "Nummerierung",
+    alignment: "Ausrichtung",
+    alignments: {
+      left: "Linksbündig",
+      center: "Zentriert",
+      right: "Rechtsbündig"
+    },
+    hyperlink: "Hyperlink",
+    linkText: "Text",
+    linkUrl: "URL",
+    linkTextPlaceholder: "Text eingeben, um Link zu erstellen",
+    linkUrlPlaceholder: "Link-URL einfügen",
+    cancel: "Abbrechen",
+    apply: "Anwenden",
+    close: "Schließen",
+    edit: "Bearbeiten",
+    delete: "Löschen",
+    clickHere: "Hier klicken",
+    imageSizes: {
+      small: "Klein",
+      fit: "Anpassen",
+      original: "Originalgröße"
+    }
   },
   button: {
     pendingLabel: "Laden..."
@@ -442,7 +468,19 @@ const deDE = {
   dataGrid: {
     cell: {
       selected: "Ausgewählt",
-      button: "(Schaltfläche)"
+      button: "(Schaltfläche)",
+      sortStatus: {
+        ascending: "Aufsteigend sortiert.",
+        descending: "Absteigend sortiert.",
+        none: "Nicht sortiert.",
+        other: "Benutzerdefinierte Sortierung aktiv."
+      },
+      sortInstruction: {
+        ascending: "Zum Absteigend sortieren klicken.",
+        descending: "Zum Entfernen der Sortierung klicken.",
+        none: "Zum Aufsteigend sortieren klicken.",
+        other: "Zum Zurücksetzen der Sortierung klicken."
+      }
     }
   },
   pagination: {

package/locales/en-GB.cjs

@@ -238,14 +238,40 @@ const enGB = {
     )
   },
   richTextEditor: {
-    textBlockType: "Text Block Type",
-    textSize: "Text Size",
+    paragraphStyles: "Paragraph styles",
+    textSize: "Text size",
     bold: "Bold",
-    italics: "Italics",
+    italic: "Italic",
     underline: "Underline",
     strikethrough: "Strikethrough",
     monospace: "Monospace",
-    dragAndDropFilesHere: "Drag&Drop files here"
+    textColor: "Text colour",
+    undo: "Undo",
+    redo: "Redo",
+    bulletList: "Bullet list",
+    numberedList: "Numbered list",
+    alignment: "Alignment",
+    alignments: {
+      left: "Left",
+      center: "Centre",
+      right: "Right"
+    },
+    hyperlink: "Hyperlink",
+    linkText: "Text",
+    linkUrl: "URL",
+    linkTextPlaceholder: "Type text to convert into link",
+    linkUrlPlaceholder: "Insert link URL",
+    cancel: "Cancel",
+    apply: "Apply",
+    close: "Close",
+    edit: "Edit",
+    delete: "Delete",
+    clickHere: "Click here",
+    imageSizes: {
+      small: "Small",
+      fit: "Fit",
+      original: "Original size"
+    }
   },
   button: {
     pendingLabel: "Loading..."
@@ -276,7 +302,19 @@ const enGB = {
   dataGrid: {
     cell: {
       selected: "Selected",
-      button: "(button)"
+      button: "(button)",
+      sortStatus: {
+        ascending: "Sorted ascending.",
+        descending: "Sorted descending.",
+        none: "Not sorted.",
+        other: "Custom sort applied."
+      },
+      sortInstruction: {
+        ascending: "Click to sort descending.",
+        descending: "Click to un-sort.",
+        none: "Click to sort ascending.",
+        other: "Click to reset sorting."
+      }
     }
   },
   pagination: {

package/locales/en-GB.js

@@ -236,14 +236,40 @@ const enGB = {
     )
   },
   richTextEditor: {
-    textBlockType: "Text Block Type",
-    textSize: "Text Size",
+    paragraphStyles: "Paragraph styles",
+    textSize: "Text size",
     bold: "Bold",
-    italics: "Italics",
+    italic: "Italic",
     underline: "Underline",
     strikethrough: "Strikethrough",
     monospace: "Monospace",
-    dragAndDropFilesHere: "Drag&Drop files here"
+    textColor: "Text colour",
+    undo: "Undo",
+    redo: "Redo",
+    bulletList: "Bullet list",
+    numberedList: "Numbered list",
+    alignment: "Alignment",
+    alignments: {
+      left: "Left",
+      center: "Centre",
+      right: "Right"
+    },
+    hyperlink: "Hyperlink",
+    linkText: "Text",
+    linkUrl: "URL",
+    linkTextPlaceholder: "Type text to convert into link",
+    linkUrlPlaceholder: "Insert link URL",
+    cancel: "Cancel",
+    apply: "Apply",
+    close: "Close",
+    edit: "Edit",
+    delete: "Delete",
+    clickHere: "Click here",
+    imageSizes: {
+      small: "Small",
+      fit: "Fit",
+      original: "Original size"
+    }
   },
   button: {
     pendingLabel: "Loading..."
@@ -274,7 +300,19 @@ const enGB = {
   dataGrid: {
     cell: {
       selected: "Selected",
-      button: "(button)"
+      button: "(button)",
+      sortStatus: {
+        ascending: "Sorted ascending.",
+        descending: "Sorted descending.",
+        none: "Not sorted.",
+        other: "Custom sort applied."
+      },
+      sortInstruction: {
+        ascending: "Click to sort descending.",
+        descending: "Click to un-sort.",
+        none: "Click to sort ascending.",
+        other: "Click to reset sorting."
+      }
     }
   },
   pagination: {

package/locales/en-US.cjs

@@ -406,14 +406,40 @@ const enUS = {
     )
   },
   richTextEditor: {
-    textBlockType: "Text Block Type",
-    textSize: "Text Size",
+    paragraphStyles: "Paragraph styles",
+    textSize: "Text size",
     bold: "Bold",
-    italics: "Italics",
+    italic: "Italic",
     underline: "Underline",
     strikethrough: "Strikethrough",
     monospace: "Monospace",
-    dragAndDropFilesHere: "Drag&Drop files here"
+    textColor: "Text color",
+    undo: "Undo",
+    redo: "Redo",
+    bulletList: "Bullet list",
+    numberedList: "Numbered list",
+    alignment: "Alignment",
+    alignments: {
+      left: "Left",
+      center: "Center",
+      right: "Right"
+    },
+    hyperlink: "Hyperlink",
+    linkText: "Text",
+    linkUrl: "URL",
+    linkTextPlaceholder: "Type text to convert into link",
+    linkUrlPlaceholder: "Insert link URL",
+    cancel: "Cancel",
+    apply: "Apply",
+    close: "Close",
+    edit: "Edit",
+    delete: "Delete",
+    clickHere: "Click here",
+    imageSizes: {
+      small: "Small",
+      fit: "Fit",
+      original: "Original size"
+    }
   },
   button: {
     pendingLabel: "Loading..."
@@ -444,7 +470,19 @@ const enUS = {
   dataGrid: {
     cell: {
       selected: "Selected",
-      button: "(button)"
+      button: "(button)",
+      sortStatus: {
+        ascending: "Sorted ascending.",
+        descending: "Sorted descending.",
+        none: "Not sorted.",
+        other: "Custom sort applied."
+      },
+      sortInstruction: {
+        ascending: "Click to sort descending.",
+        descending: "Click to un-sort.",
+        none: "Click to sort ascending.",
+        other: "Click to reset sorting."
+      }
     }
   },
   pagination: {

package/locales/en-US.js

@@ -404,14 +404,40 @@ const enUS = {
     )
   },
   richTextEditor: {
-    textBlockType: "Text Block Type",
-    textSize: "Text Size",
+    paragraphStyles: "Paragraph styles",
+    textSize: "Text size",
     bold: "Bold",
-    italics: "Italics",
+    italic: "Italic",
     underline: "Underline",
     strikethrough: "Strikethrough",
     monospace: "Monospace",
-    dragAndDropFilesHere: "Drag&Drop files here"
+    textColor: "Text color",
+    undo: "Undo",
+    redo: "Redo",
+    bulletList: "Bullet list",
+    numberedList: "Numbered list",
+    alignment: "Alignment",
+    alignments: {
+      left: "Left",
+      center: "Center",
+      right: "Right"
+    },
+    hyperlink: "Hyperlink",
+    linkText: "Text",
+    linkUrl: "URL",
+    linkTextPlaceholder: "Type text to convert into link",
+    linkUrlPlaceholder: "Insert link URL",
+    cancel: "Cancel",
+    apply: "Apply",
+    close: "Close",
+    edit: "Edit",
+    delete: "Delete",
+    clickHere: "Click here",
+    imageSizes: {
+      small: "Small",
+      fit: "Fit",
+      original: "Original size"
+    }
   },
   button: {
     pendingLabel: "Loading..."
@@ -442,7 +468,19 @@ const enUS = {
   dataGrid: {
     cell: {
       selected: "Selected",
-      button: "(button)"
+      button: "(button)",
+      sortStatus: {
+        ascending: "Sorted ascending.",
+        descending: "Sorted descending.",
+        none: "Not sorted.",
+        other: "Custom sort applied."
+      },
+      sortInstruction: {
+        ascending: "Click to sort descending.",
+        descending: "Click to un-sort.",
+        none: "Click to sort ascending.",
+        other: "Click to reset sorting."
+      }
     }
   },
   pagination: {

package/locales/ja-JP.cjs

@@ -405,14 +405,40 @@ const jaJP = {
     )
   },
   richTextEditor: {
-    textBlockType: "テキストブロックタイプ",
+    paragraphStyles: "段落スタイル",
     textSize: "文字サイズ",
     bold: "太字",
-    italics: "斜体",
+    italic: "斜体",
     underline: "下線",
     strikethrough: "取り消し線",
-    monospace: "等幅",
-    dragAndDropFilesHere: "ここにファイルをドラッグ＆ドロップ"
+    monospace: "等幅フォント",
+    textColor: "文字色",
+    undo: "元に戻す",
+    redo: "やり直し",
+    bulletList: "箇条書き",
+    numberedList: "番号付きリスト",
+    alignment: "配置",
+    alignments: {
+      left: "左揃え",
+      center: "中央揃え",
+      right: "右揃え"
+    },
+    hyperlink: "ハイパーリンク",
+    linkText: "テキスト",
+    linkUrl: "URL",
+    linkTextPlaceholder: "リンクに変換するテキストを入力",
+    linkUrlPlaceholder: "リンクURLを挿入",
+    cancel: "キャンセル",
+    apply: "適用",
+    close: "閉じる",
+    edit: "編集",
+    delete: "削除",
+    clickHere: "ここをクリック",
+    imageSizes: {
+      small: "小",
+      fit: "フィット",
+      original: "元のサイズ"
+    }
   },
   button: {
     pendingLabel: "読み込み中"
@@ -443,7 +469,19 @@ const jaJP = {
   dataGrid: {
     cell: {
       selected: "選択済み",
-      button: "（ボタン）"
+      button: "（ボタン）",
+      sortStatus: {
+        ascending: "昇順で並べ替えています。",
+        descending: "降順で並べ替えています。",
+        none: "並べ替えは適用されていません。",
+        other: "カスタムの並べ替えが適用されています。"
+      },
+      sortInstruction: {
+        ascending: "クリックすると降順で並べ替えます。",
+        descending: "クリックすると並べ替えを解除します。",
+        none: "クリックすると昇順で並べ替えます。",
+        other: "クリックすると並べ替えをリセットします。"
+      }
     }
   },
   pagination: {

package/locales/ja-JP.js

@@ -403,14 +403,40 @@ const jaJP = {
     )
   },
   richTextEditor: {
-    textBlockType: "テキストブロックタイプ",
+    paragraphStyles: "段落スタイル",
     textSize: "文字サイズ",
     bold: "太字",
-    italics: "斜体",
+    italic: "斜体",
     underline: "下線",
     strikethrough: "取り消し線",
-    monospace: "等幅",
-    dragAndDropFilesHere: "ここにファイルをドラッグ＆ドロップ"
+    monospace: "等幅フォント",
+    textColor: "文字色",
+    undo: "元に戻す",
+    redo: "やり直し",
+    bulletList: "箇条書き",
+    numberedList: "番号付きリスト",
+    alignment: "配置",
+    alignments: {
+      left: "左揃え",
+      center: "中央揃え",
+      right: "右揃え"
+    },
+    hyperlink: "ハイパーリンク",
+    linkText: "テキスト",
+    linkUrl: "URL",
+    linkTextPlaceholder: "リンクに変換するテキストを入力",
+    linkUrlPlaceholder: "リンクURLを挿入",
+    cancel: "キャンセル",
+    apply: "適用",
+    close: "閉じる",
+    edit: "編集",
+    delete: "削除",
+    clickHere: "ここをクリック",
+    imageSizes: {
+      small: "小",
+      fit: "フィット",
+      original: "元のサイズ"
+    }
   },
   button: {
     pendingLabel: "読み込み中"
@@ -441,7 +467,19 @@ const jaJP = {
   dataGrid: {
     cell: {
       selected: "選択済み",
-      button: "（ボタン）"
+      button: "（ボタン）",
+      sortStatus: {
+        ascending: "昇順で並べ替えています。",
+        descending: "降順で並べ替えています。",
+        none: "並べ替えは適用されていません。",
+        other: "カスタムの並べ替えが適用されています。"
+      },
+      sortInstruction: {
+        ascending: "クリックすると降順で並べ替えます。",
+        descending: "クリックすると並べ替えを解除します。",
+        none: "クリックすると昇順で並べ替えます。",
+        other: "クリックすると並べ替えをリセットします。"
+      }
     }
   },
   pagination: {

package/locales/zh-CN.cjs

@@ -407,14 +407,40 @@ const zhCN = {
     )
   },
   richTextEditor: {
-    textBlockType: "文本块类型",
+    paragraphStyles: "段落样式",
     textSize: "文字大小",
-    bold: "加粗",
-    italics: "斜体",
+    bold: "粗体",
+    italic: "斜体",
     underline: "下划线",
     strikethrough: "删除线",
     monospace: "等宽字体",
-    dragAndDropFilesHere: "将文件拖放到此处"
+    textColor: "文字颜色",
+    undo: "撤销",
+    redo: "重做",
+    bulletList: "项目符号列表",
+    numberedList: "编号列表",
+    alignment: "对齐",
+    alignments: {
+      left: "左对齐",
+      center: "居中",
+      right: "右对齐"
+    },
+    hyperlink: "超链接",
+    linkText: "文本",
+    linkUrl: "URL",
+    linkTextPlaceholder: "输入要转换为链接的文本",
+    linkUrlPlaceholder: "插入链接URL",
+    cancel: "取消",
+    apply: "应用",
+    close: "关闭",
+    edit: "编辑",
+    delete: "删除",
+    clickHere: "点击这里",
+    imageSizes: {
+      small: "小",
+      fit: "适应",
+      original: "原始大小"
+    }
   },
   button: {
     pendingLabel: "加载中"
@@ -445,7 +471,19 @@ const zhCN = {
   dataGrid: {
     cell: {
       selected: "已选择",
-      button: "（按钮）"
+      button: "（按钮）",
+      sortStatus: {
+        ascending: "已按升序排序。",
+        descending: "已按降序排序。",
+        none: "未排序。",
+        other: "已应用自定义排序。"
+      },
+      sortInstruction: {
+        ascending: "单击以按降序排序。",
+        descending: "单击以取消排序。",
+        none: "单击以按升序排序。",
+        other: "单击以重置排序。"
+      }
     }
   },
   pagination: {

package/locales/zh-CN.js

@@ -405,14 +405,40 @@ const zhCN = {
     )
   },
   richTextEditor: {
-    textBlockType: "文本块类型",
+    paragraphStyles: "段落样式",
     textSize: "文字大小",
-    bold: "加粗",
-    italics: "斜体",
+    bold: "粗体",
+    italic: "斜体",
     underline: "下划线",
     strikethrough: "删除线",
     monospace: "等宽字体",
-    dragAndDropFilesHere: "将文件拖放到此处"
+    textColor: "文字颜色",
+    undo: "撤销",
+    redo: "重做",
+    bulletList: "项目符号列表",
+    numberedList: "编号列表",
+    alignment: "对齐",
+    alignments: {
+      left: "左对齐",
+      center: "居中",
+      right: "右对齐"
+    },
+    hyperlink: "超链接",
+    linkText: "文本",
+    linkUrl: "URL",
+    linkTextPlaceholder: "输入要转换为链接的文本",
+    linkUrlPlaceholder: "插入链接URL",
+    cancel: "取消",
+    apply: "应用",
+    close: "关闭",
+    edit: "编辑",
+    delete: "删除",
+    clickHere: "点击这里",
+    imageSizes: {
+      small: "小",
+      fit: "适应",
+      original: "原始大小"
+    }
   },
   button: {
     pendingLabel: "加载中"
@@ -443,7 +469,19 @@ const zhCN = {
   dataGrid: {
     cell: {
       selected: "已选择",
-      button: "（按钮）"
+      button: "（按钮）",
+      sortStatus: {
+        ascending: "已按升序排序。",
+        descending: "已按降序排序。",
+        none: "未排序。",
+        other: "已应用自定义排序。"
+      },
+      sortInstruction: {
+        ascending: "单击以按降序排序。",
+        descending: "单击以取消排序。",
+        none: "单击以按升序排序。",
+        other: "单击以重置排序。"
+      }
     }
   },
   pagination: {

package/menu/definition.cjs

@@ -203,6 +203,7 @@ class Menu extends anchored.Anchored(delegatesAria.DelegatesAria(vividElement.Vi
     }
     if (focusIndex >= 0 && focusIndex < this.menuItems.length) {
       const child = this.menuItems[focusIndex];
+      /* v8 ignore else -- @preserve */
       if (this.focusIndex > -1 && this.menuItems.length >= this.focusIndex - 1) {
         this.menuItems[this.focusIndex].setAttribute("tabindex", "-1");
       }

package/menu/definition.js

@@ -199,6 +199,7 @@ class Menu extends Anchored(DelegatesAria(VividElement)) {
     }
     if (focusIndex >= 0 && focusIndex < this.menuItems.length) {
       const child = this.menuItems[focusIndex];
+      /* v8 ignore else -- @preserve */
       if (this.focusIndex > -1 && this.menuItems.length >= this.focusIndex - 1) {
         this.menuItems[this.focusIndex].setAttribute("tabindex", "-1");
       }

package/number-field/definition.cjs

@@ -22,7 +22,7 @@ const localized = require('../unbundled/localized.cjs');
 const enums = require('../unbundled/enums.cjs');
 const divider = require('../unbundled/divider.cjs');
 
-const styles = ":host{display:inline-block}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.error:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base.success:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base{--_connotation-color-primary: var(--vvd-text-field-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-text-field-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-field-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-text-field-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-text-field-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-text-field-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-text-field-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-text-field-accent-soft, var(--vvd-color-neutral-100))}.base{--_text-field-gutter-start: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-gutter-end: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 8px;--_text-field-pill-border-radius: 24px;display:inline-grid;width:100%;align-items:center;gap:4px;grid-template-columns:min-content 1fr max-content}.base.size-condensed{--_text-field-gutter-start: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-gutter-end: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-icon-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 4px}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color: var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color: var(--_appearance-color-text)}.label:not(slot),.label::slotted(label){box-sizing:initial!important;padding:initial!important;margin:initial!important;color:var(--vvd-color-canvas-text)!important;contain:inline-size!important;font:var(--vvd-typography-base);grid-column:1/4;grid-row:1}.char-count+.label:not(slot),.char-count+.label::slotted(label){grid-column:1/3}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.fieldset{position:relative;display:flex;align-items:center;background-color:var(--_appearance-color-fill);font:var(--vvd-typography-base);grid-column:1/4;padding-block:0;transition:color .2s,background-color .2s}.fieldset:after{position:absolute;display:block;border-radius:inherit;block-size:100%;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";inline-size:100%;pointer-events:none;transition:box-shadow .2s}.fieldset:focus-visible{outline:none}.base>.fieldset{block-size:var(--_text-field-block-size)}.base:not(.shape-pill) .fieldset{border-radius:var(--_text-field-border-radius)}.base.shape-pill .fieldset{border-radius:var(--_text-field-pill-border-radius)}.wrapper{border-radius:inherit;block-size:100%;inline-size:100%}.control{border-radius:inherit;text-align:start}.control:not(slot),.control::slotted(input){width:100%!important;box-sizing:border-box!important;border:0 none!important;border-radius:inherit!important;margin:initial!important;appearance:none!important;background-color:transparent!important;block-size:100%!important;color:inherit!important;font:inherit;outline:transparent;padding-block:0!important;padding-inline:var(--_text-field-gutter-start) var(--_text-field-gutter-end)!important;text-align:inherit}.control:not(slot):disabled,.control::slotted(input:disabled){cursor:not-allowed!important;opacity:1!important;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control:not(slot)::placeholder{opacity:1!important;-webkit-text-fill-color:var(--_low-ink-color)!important}.control::slotted(input:-webkit-autofill),.control:not(slot):-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.has-icon .control:not(slot),.has-icon .control::slotted(input){padding-inline-start:calc(var(--_text-field-icon-size) + var(--_text-field-gutter-start) * 2)!important}.icon{position:absolute;z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:calc(100% + var(--_text-field-gutter-start));line-height:1;transform:translateY(-50%)}.leading-items-wrapper{position:relative}.base.no-leading .leading-items-wrapper{display:none}.action-items-wrapper{margin-inline-end:4px}.base:not(.action-items) .action-items-wrapper{display:none}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.wrapper .control:focus-within):after{--focus-stroke-gap-color: transparent;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))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .wrapper:focus-within:after{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));--focus-stroke-gap-color: transparent;position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}}:host([internal-part]) .fieldset{background-color:transparent;font:var(--vvd-typography-heading-4);line-height:1.1}:host([internal-part]) .fieldset:not(:focus-within):after{block-size:1px;inset-block-end:0}@supports selector(:has(*)){:host([internal-part]) .fieldset:has(.action-items-wrapper:focus-within):after{block-size:1px;inset-block-end:0}}:host([internal-part]) .control{text-align:center}slot[name=_mirrored-helper-text]{display:none}.label-suffix{display:flex;align-items:center;gap:var(--label-suffix-gap, 8px);grid-column-end:-1;grid-row:1}.label-suffix[hidden]{display:none}slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){grid-column-end:-1;grid-row:1}.base{--_text-field-gutter-end: 70px}.control::-webkit-outer-spin-button,.control::-webkit-inner-spin-button{appearance:none}.control-buttons{position:absolute;z-index:1;right:3px;display:flex}.readonly .control-buttons,.disabled .control-buttons{pointer-events:none}.control-buttons .divider{margin-block:8px}.control-buttons>*{flex-shrink:0}";
+const styles = ".label-wrapper{display:flex;flex-direction:row;align-items:center;gap:var(--label-wrapper-gap, 4px)}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 1 auto}:host{display:inline-block}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.error:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base.success:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base{--_connotation-color-primary: var(--vvd-text-field-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-text-field-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-field-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-text-field-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-text-field-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-text-field-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-text-field-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-text-field-accent-soft, var(--vvd-color-neutral-100))}.base{--_text-field-gutter-start: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-gutter-end: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 8px;--_text-field-pill-border-radius: 24px;display:inline-grid;width:100%;align-items:center;gap:4px;grid-template-columns:min-content 1fr max-content}.base.size-condensed{--_text-field-gutter-start: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-gutter-end: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-icon-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 4px}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color: var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color: var(--_appearance-color-text)}.label:not(slot),.label::slotted(label){box-sizing:initial!important;padding:initial!important;margin:initial!important;color:var(--vvd-color-canvas-text)!important;font:var(--vvd-typography-base);grid-column:1/4;grid-row:1}.char-count+.label:not(slot),.char-count+.label::slotted(label){grid-column:1/3}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.label-wrapper{grid-column:1/4;grid-row:1}.char-count+.label-wrapper{grid-column:1/3}.fieldset{position:relative;display:flex;align-items:center;background-color:var(--_appearance-color-fill);font:var(--vvd-typography-base);grid-column:1/4;padding-block:0;transition:color .2s,background-color .2s}.fieldset:after{position:absolute;display:block;border-radius:inherit;block-size:100%;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";inline-size:100%;pointer-events:none;transition:box-shadow .2s}.fieldset:focus-visible{outline:none}.base>.fieldset{block-size:var(--_text-field-block-size)}.base:not(.shape-pill) .fieldset{border-radius:var(--_text-field-border-radius)}.base.shape-pill .fieldset{border-radius:var(--_text-field-pill-border-radius)}.wrapper{border-radius:inherit;block-size:100%;inline-size:100%}.control{border-radius:inherit;text-align:start}.control:not(slot),.control::slotted(input){width:100%!important;box-sizing:border-box!important;border:0 none!important;border-radius:inherit!important;margin:initial!important;appearance:none!important;background-color:transparent!important;block-size:100%!important;color:inherit!important;font:inherit;outline:transparent;padding-block:0!important;padding-inline:var(--_text-field-gutter-start) var(--_text-field-gutter-end)!important;text-align:inherit}.control:not(slot):disabled,.control::slotted(input:disabled){cursor:not-allowed!important;opacity:1!important;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control:not(slot)::placeholder{opacity:1!important;-webkit-text-fill-color:var(--_low-ink-color)!important}.control::slotted(input:-webkit-autofill),.control:not(slot):-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.has-icon .control:not(slot),.has-icon .control::slotted(input){padding-inline-start:calc(var(--_text-field-icon-size) + var(--_text-field-gutter-start) * 2)!important}.icon{position:absolute;z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:calc(100% + var(--_text-field-gutter-start));line-height:1;transform:translateY(-50%)}.leading-items-wrapper{position:relative}.base.no-leading .leading-items-wrapper{display:none}.action-items-wrapper{margin-inline-end:4px}.base:not(.action-items) .action-items-wrapper{display:none}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.wrapper .control:focus-within):after{--focus-stroke-gap-color: transparent;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))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .wrapper:focus-within:after{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));--focus-stroke-gap-color: transparent;position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}}:host([internal-part]) .fieldset{background-color:transparent;font:var(--vvd-typography-heading-4);line-height:1.1}:host([internal-part]) .fieldset:not(:focus-within):after{block-size:1px;inset-block-end:0}@supports selector(:has(*)){:host([internal-part]) .fieldset:has(.action-items-wrapper:focus-within):after{block-size:1px;inset-block-end:0}}:host([internal-part]) .control{text-align:center}slot[name=_mirrored-helper-text]{display:none}.base{--_text-field-gutter-end: 70px}.control::-webkit-outer-spin-button,.control::-webkit-inner-spin-button{appearance:none}.control-buttons{position:absolute;z-index:1;right:3px;display:flex}.readonly .control-buttons,.disabled .control-buttons{pointer-events:none}.control-buttons .divider{margin-block:8px}.control-buttons>*{flex-shrink:0}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -372,8 +372,10 @@ const NumberFieldTemplate = (context) => {
   const visuallyHiddenTag = context.tagFor(visuallyHidden_definition.VwcVisuallyHiddenElement);
   return fastElement.html`
 		<div class="base ${getStateClasses}">
-			${fastElement.when((x) => x.label, renderLabel())}
-			<slot name="contextual-help" ${fastElement.slotted("_contextualHelpSlottedContent")}></slot>
+			<div class="label-wrapper" ?hidden=${(x) => !x.label && !x._hasContextualHelp}>
+				${fastElement.when((x) => x.label, renderLabel())}
+				<slot name="contextual-help" ${fastElement.slotted("_contextualHelpSlottedContent")}></slot>
+			</div>
 			<div class="fieldset">
 				<div class="wrapper">
 					<input