sit-onyx 1.4.0-dev-20251110081753 → 1.4.0-dev-20251110091137

package/dist/i18n/locales/de-DE.json

@@ -247,6 +247,7 @@
         "label": "Codeausschnitte",
         "copySnippet": "Code kopieren",
         "copied": "Kopiert!",
+        "failed": "Fehlgeschlagen!",
         "tabLabel": "Code"
     }
 }

package/dist/i18n/locales/en-US.json

@@ -250,6 +250,7 @@
         "label": "Code snippets",
         "copySnippet": "Copy code",
         "copied": "Copied!",
+        "failed": "Failed!",
         "tabLabel": "Code"
     }
 }

package/dist/i18n/locales/en-US.json.d.ts

@@ -250,6 +250,7 @@ declare const _default: {
     "label": "Code snippets",
     "copySnippet": "Copy code",
     "copied": "Copied!",
+    "failed": "Failed!",
     "tabLabel": "Code"
   }
 }

package/dist/index.esm-bundler.js

@@ -252,7 +252,7 @@ const _sfc_main$1H = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$1c = ["open"];
-const _hoisted_2$S = ["id", "tabindex", "aria-expanded", "aria-controls", "aria-disabled"];
+const _hoisted_2$T = ["id", "tabindex", "aria-expanded", "aria-controls", "aria-disabled"];
 const _hoisted_3$z = { class: "onyx-accordion-item__header-content" };
 const _hoisted_4$n = ["id", "aria-labelledby"];
 function _sfc_render$1H(_ctx, _cache, $props, $setup, $data, $options) {
@@ -298,7 +298,7 @@ function _sfc_render$1H(_ctx, _cache, $props, $setup, $data, $options) {
         icon: $setup.iconChevronDownSmall,
         class: "onyx-accordion-item__header-icon"
       }, null, 8, ["icon"])
-    ], 8, _hoisted_2$S),
+    ], 8, _hoisted_2$T),
     createElementVNode("div", {
       id: $setup.panelId,
       class: "onyx-accordion-item__panel",
@@ -357,7 +357,7 @@ const globalFAB = { "label": "Global actions" };
 const calendar = { "todayButton": { "label": "Today", "tooltip": "Jump to today" }, "calendarWeek": "CW", "calendarWeekButtonLabel": "Select calendar week {weekNumber}", "previousMonthButton": "Previous month", "nextMonthButton": "Next month" };
 const flyoutMenu = { "moreActions": "More actions", "toggleActions": { "click": "Click to toggle action visibility", "hover": "Hover/Focus to toggle action visibility" } };
 const slider = { "decreaseValueBy": "Decrease value by {n}", "increaseValueBy": "Increase value by {n}", "changeValue": "Change value" };
-const codeTabs = { "label": "Code snippets", "copySnippet": "Copy code", "copied": "Copied!", "tabLabel": "Code" };
+const codeTabs = { "label": "Code snippets", "copySnippet": "Copy code", "copied": "Copied!", "failed": "Failed!", "tabLabel": "Code" };
 const enUS = {
   yes,
   no,
@@ -2191,7 +2191,7 @@ const _sfc_main$1G = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$1b = ["aria-modal", "aria-label", "role"];
-const _hoisted_2$R = {
+const _hoisted_2$S = {
   ref: "contentRef",
   class: "onyx-basic-dialog__content"
 };
@@ -2214,7 +2214,7 @@ function _sfc_render$1G(_ctx, _cache, $props, $setup, $data, $options) {
   }, [
     createElementVNode(
       "div",
-      _hoisted_2$R,
+      _hoisted_2$S,
       [
         renderSlot(_ctx.$slots, "default")
       ],
@@ -2616,7 +2616,7 @@ const _sfc_main$1A = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$18 = { class: "onyx-alert-modal__content" };
-const _hoisted_2$Q = { class: "onyx-alert-modal__headline" };
+const _hoisted_2$R = { class: "onyx-alert-modal__headline" };
 const _hoisted_3$y = ["id"];
 const _hoisted_4$m = { class: "onyx-alert-modal__actions" };
 function _sfc_render$1A(_ctx, _cache, $props, $setup, $data, $options) {
@@ -2641,7 +2641,7 @@ function _sfc_render$1A(_ctx, _cache, $props, $setup, $data, $options) {
           /* FULL_PROPS */
         )) : createCommentVNode("v-if", true),
         createElementVNode("div", null, [
-          createElementVNode("div", _hoisted_2$Q, [
+          createElementVNode("div", _hoisted_2$R, [
             renderSlot(_ctx.$slots, "headline", {
               label: $setup.props.label
             }, () => [
@@ -3354,7 +3354,7 @@ const _sfc_main$1x = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$15 = { class: "onyx-flyout-menu__list-header" };
-const _hoisted_2$P = { class: "onyx-flyout-menu__list-footer" };
+const _hoisted_2$Q = { class: "onyx-flyout-menu__list-footer" };
 function _sfc_render$1x(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock($setup["OnyxBasicPopover"], mergeProps($setup.mergeVueProps($setup.root, { ref: $setup.popover }), {
     class: "onyx-component onyx-flyout-menu",
@@ -3376,7 +3376,7 @@ function _sfc_render$1x(_ctx, _cache, $props, $setup, $data, $options) {
         16
         /* FULL_PROPS */
       )) : createCommentVNode("v-if", true),
-      createElementVNode("div", _hoisted_2$P, [
+      createElementVNode("div", _hoisted_2$Q, [
         renderSlot(_ctx.$slots, "footer")
       ])
     ]),
@@ -3710,7 +3710,7 @@ const _hoisted_1$12 = {
   class: "onyx-component onyx-ripple",
   "aria-hidden": "true"
 };
-const _hoisted_2$O = ["data-rippleid"];
+const _hoisted_2$P = ["data-rippleid"];
 function _sfc_render$1q(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "span",
@@ -3729,7 +3729,7 @@ function _sfc_render$1q(_ctx, _cache, $props, $setup, $data, $options) {
             }),
             "data-rippleid": key,
             onAnimationend: _cache[0] || (_cache[0] = ($event) => $setup.hideRipple($event.target))
-          }, null, 44, _hoisted_2$O);
+          }, null, 44, _hoisted_2$P);
         }),
         128
         /* KEYED_FRAGMENT */
@@ -3852,7 +3852,7 @@ const _sfc_main$1o = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$10 = { class: "onyx-info-card__content" };
-const _hoisted_2$N = {
+const _hoisted_2$O = {
   key: 3,
   class: "onyx-info-card__description onyx-text--small"
 };
@@ -3915,7 +3915,7 @@ function _sfc_render$1o(_ctx, _cache, $props, $setup, $data, $options) {
           color: $setup.systemButtonColor,
           onClick: _cache[0] || (_cache[0] = ($event) => $setup.emit("close"))
         }, null, 8, ["icon", "label", "color"])) : createCommentVNode("v-if", true),
-        !!$setup.slots.default ? (openBlock(), createElementBlock("p", _hoisted_2$N, [
+        !!$setup.slots.default ? (openBlock(), createElementBlock("p", _hoisted_2$O, [
           renderSlot(_ctx.$slots, "default")
         ])) : createCommentVNode("v-if", true),
         !!$setup.slots.buttons ? (openBlock(), createElementBlock("div", _hoisted_3$x, [
@@ -4132,7 +4132,7 @@ const _sfc_main$1l = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$_ = { class: "onyx-toast-message__wrapper" };
-const _hoisted_2$M = { class: "onyx-toast-message__content onyx-truncation-ellipsis" };
+const _hoisted_2$N = { class: "onyx-toast-message__content onyx-truncation-ellipsis" };
 const _hoisted_3$w = { class: "onyx-toast-message__headline onyx-text" };
 const _hoisted_4$l = { class: "onyx-truncation-ellipsis" };
 const _hoisted_5$f = ["aria-label"];
@@ -4153,7 +4153,7 @@ function _sfc_render$1l(_ctx, _cache, $props, $setup, $data, $options) {
           key: 0,
           icon: $setup.icon
         }, null, 8, ["icon"])) : createCommentVNode("v-if", true),
-        createElementVNode("div", _hoisted_2$M, [
+        createElementVNode("div", _hoisted_2$N, [
           createElementVNode("div", _hoisted_3$w, [
             createElementVNode(
               "span",
@@ -4297,7 +4297,7 @@ const _hoisted_1$Y = {
   key: 0,
   class: "onyx-app__nav"
 };
-const _hoisted_2$L = { class: "onyx-app__page" };
+const _hoisted_2$M = { class: "onyx-app__page" };
 function _sfc_render$1j(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
@@ -4308,7 +4308,7 @@ function _sfc_render$1j(_ctx, _cache, $props, $setup, $data, $options) {
       $setup.slots.navBar ? (openBlock(), createElementBlock("div", _hoisted_1$Y, [
         renderSlot(_ctx.$slots, "navBar")
       ])) : createCommentVNode("v-if", true),
-      createElementVNode("div", _hoisted_2$L, [
+      createElementVNode("div", _hoisted_2$M, [
         renderSlot(_ctx.$slots, "default")
       ]),
       createVNode($setup["OnyxToast"]),
@@ -4355,7 +4355,7 @@ const _sfc_main$1i = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$X = ["title", "aria-label"];
-const _hoisted_2$K = ["src", "alt"];
+const _hoisted_2$L = ["src", "alt"];
 const _hoisted_3$v = {
   key: 0,
   class: "onyx-avatar__initials"
@@ -4377,7 +4377,7 @@ function _sfc_render$1i(_ctx, _cache, $props, $setup, $data, $options) {
       src: $setup.props.src,
       alt: $setup.ariaLabel,
       onError: _cache[0] || (_cache[0] = ($event) => $setup.hasImageError = true)
-    }, null, 40, _hoisted_2$K)) : (openBlock(), createElementBlock(
+    }, null, 40, _hoisted_2$L)) : (openBlock(), createElementBlock(
       Fragment,
       { key: 1 },
       [
@@ -4480,7 +4480,7 @@ const _sfc_main$1f = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$V = { class: "onyx-bottom-bar__content onyx-grid-container" };
-const _hoisted_2$J = { class: "onyx-bottom-bar__content--left" };
+const _hoisted_2$K = { class: "onyx-bottom-bar__content--left" };
 const _hoisted_3$u = { class: "onyx-bottom-bar__content--right" };
 function _sfc_render$1f(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
@@ -4495,7 +4495,7 @@ function _sfc_render$1f(_ctx, _cache, $props, $setup, $data, $options) {
     },
     [
       createElementVNode("div", _hoisted_1$V, [
-        createElementVNode("div", _hoisted_2$J, [
+        createElementVNode("div", _hoisted_2$K, [
           renderSlot(_ctx.$slots, "left")
         ]),
         createElementVNode("div", _hoisted_3$u, [
@@ -4754,7 +4754,7 @@ const _sfc_main$1c = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$U = { class: "onyx-truncation-ellipsis" };
-const _hoisted_2$I = {
+const _hoisted_2$J = {
   key: 0,
   class: "onyx-menu-item__chevron"
 };
@@ -4798,7 +4798,7 @@ function _sfc_render$1c(_ctx, _cache, $props, $setup, $data, $options) {
               )
             ])
           ]),
-          $setup.hasChildren ? (openBlock(), createElementBlock("div", _hoisted_2$I, [
+          $setup.hasChildren ? (openBlock(), createElementBlock("div", _hoisted_2$J, [
             createVNode($setup["OnyxIcon"], {
               icon: $setup.iconChevronRightSmall,
               size: "24px"
@@ -5038,7 +5038,7 @@ const _sfc_main$19 = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$T = ["aria-label", "aria-hidden"];
-const _hoisted_2$H = {
+const _hoisted_2$I = {
   class: "onyx-breadcrumb__list onyx-grid-container",
   role: "menu"
 };
@@ -5054,7 +5054,7 @@ function _sfc_render$19(_ctx, _cache, $props, $setup, $data, $options) {
     "aria-label": $setup.t("breadcrumb.label"),
     "aria-hidden": $setup.props.skeleton
   }, [
-    createElementVNode("ol", _hoisted_2$H, [
+    createElementVNode("ol", _hoisted_2$I, [
       createVNode($setup["OnyxBreadcrumbItem"], {
         class: "onyx-breadcrumb__home",
         href: $setup.props.home?.link ?? "/",
@@ -5401,7 +5401,7 @@ const _sfc_main$16 = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$R = { class: "onyx-calendar-cell__header" };
-const _hoisted_2$G = { class: "onyx-calendar-cell__date-container" };
+const _hoisted_2$H = { class: "onyx-calendar-cell__date-container" };
 const _hoisted_3$r = {
   key: 1,
   class: "onyx-calendar-cell__date"
@@ -5437,7 +5437,7 @@ function _sfc_render$16(_ctx, _cache, $props, $setup, $data, $options) {
       }), {
         default: withCtx(() => [
           createElementVNode("div", _hoisted_1$R, [
-            createElementVNode("div", _hoisted_2$G, [
+            createElementVNode("div", _hoisted_2$H, [
               $setup.props.tooltipText ? (openBlock(), createBlock($setup["OnyxTooltip"], {
                 key: 0,
                 text: $setup.props.tooltipText,
@@ -5558,7 +5558,7 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$Q = { class: "onyx-text--small onyx-truncation-ellipsis" };
-const _hoisted_2$F = { class: "onyx-text--small onyx-truncation-ellipsis" };
+const _hoisted_2$G = { class: "onyx-text--small onyx-truncation-ellipsis" };
 function _sfc_render$14(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createBlock($setup["OnyxSkeleton"], {
     key: 0,
@@ -5613,7 +5613,7 @@ function _sfc_render$14(_ctx, _cache, $props, $setup, $data, $options) {
       }, null, 8, ["icon"])) : createCommentVNode("v-if", true),
       createElementVNode(
         "span",
-        _hoisted_2$F,
+        _hoisted_2$G,
         toDisplayString($setup.props.label),
         1
         /* TEXT */
@@ -5741,7 +5741,7 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$P = { class: "onyx-calendar__header" };
-const _hoisted_2$E = { class: "control-container time-control-container" };
+const _hoisted_2$F = { class: "control-container time-control-container" };
 const _hoisted_3$q = { class: "control-container" };
 const _hoisted_4$j = { class: "onyx-calendar__body" };
 const _hoisted_5$e = ["abbr"];
@@ -5767,7 +5767,7 @@ function _sfc_render$13(_ctx, _cache, $props, $setup, $data, $options) {
     },
     [
       createElementVNode("div", _hoisted_1$P, [
-        createElementVNode("div", _hoisted_2$E, [
+        createElementVNode("div", _hoisted_2$F, [
           createVNode($setup["OnyxSystemButton"], {
             label: $setup.t("calendar.todayButton.label"),
             class: "control-container__today-btn",
@@ -6139,7 +6139,7 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$O = { class: "onyx-component" };
-const _hoisted_2$D = {
+const _hoisted_2$E = {
   key: 0,
   ref: "targetRef"
 };
@@ -6147,7 +6147,7 @@ function _sfc_render$12(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", _hoisted_1$O, [
     !$setup.tooltipError || $setup.props.disabled ? (openBlock(), createElementBlock(
       "div",
-      _hoisted_2$D,
+      _hoisted_2$E,
       null,
       512
       /* NEED_PATCH */
@@ -6229,7 +6229,7 @@ const _sfc_main$11 = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$N = ["title"];
-const _hoisted_2$C = { class: "onyx-checkbox__container" };
+const _hoisted_2$D = { class: "onyx-checkbox__container" };
 const _hoisted_3$p = ["aria-label", "indeterminate", "disabled", "required", "value", "autofocus"];
 function _sfc_render$11(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createElementBlock(
@@ -6257,7 +6257,7 @@ function _sfc_render$11(_ctx, _cache, $props, $setup, $data, $options) {
         class: normalizeClass(["onyx-component onyx-checkbox", [$setup.requiredTypeClass, $setup.densityClass]]),
         title: $setup.title
       }, [
-        createElementVNode("div", _hoisted_2$C, [
+        createElementVNode("div", _hoisted_2$D, [
           $setup.props.loading ? (openBlock(), createBlock($setup["OnyxLoadingIndicator"], {
             key: 0,
             class: "onyx-checkbox__loading",
@@ -6507,7 +6507,7 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$L = ["disabled", "aria-label"];
-const _hoisted_2$B = {
+const _hoisted_2$C = {
   key: 0,
   class: "onyx-checkbox-group__label"
 };
@@ -6517,7 +6517,7 @@ function _sfc_render$$(_ctx, _cache, $props, $setup, $data, $options) {
     disabled: $setup.disabled,
     "aria-label": $setup.props.label
   }, [
-    !$setup.props.hideLabel ? (openBlock(), createElementBlock("legend", _hoisted_2$B, [
+    !$setup.props.hideLabel ? (openBlock(), createElementBlock("legend", _hoisted_2$C, [
       createVNode($setup["OnyxHeadline"], { is: "h3" }, {
         default: withCtx(() => [
           createTextVNode(
@@ -6634,7 +6634,7 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$K = ["disabled"];
-const _hoisted_2$A = { class: "onyx-tab__label" };
+const _hoisted_2$B = { class: "onyx-tab__label" };
 function _sfc_render$_(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     Fragment,
@@ -6656,7 +6656,7 @@ function _sfc_render$_(_ctx, _cache, $props, $setup, $data, $options) {
         type: "button",
         disabled: $setup.props.disabled
       }), [
-        createElementVNode("div", _hoisted_2$A, [
+        createElementVNode("div", _hoisted_2$B, [
           renderSlot(_ctx.$slots, "tab", {}, () => [
             createTextVNode(
               toDisplayString($setup.props.label),
@@ -6711,6 +6711,7 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
     const tabProps = useForwardProps(props, OnyxTab);
     const tabsContext = inject(CODE_TABS_INJECTION_KEY, void 0);
     const label = computed(() => props.label ?? t.value("codeTabs.tabLabel"));
+    const skeleton = useSkeletonContext(props);
     watch(
       [() => props.value, () => props.code],
       ([newValue, newCode], [oldValue]) => {
@@ -6728,12 +6729,16 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
       if (props.disabled != void 0) return props.disabled;
       return tabsContext && tabsContext.tabs.value.size <= 1;
     });
-    const __returned__ = { props, t, tabProps, tabsContext, label, disabled, OnyxIcon, OnyxTab };
+    const __returned__ = { props, t, tabProps, tabsContext, label, skeleton, disabled, OnyxIcon, OnyxSkeleton, OnyxTab };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
 });
 const _hoisted_1$J = {
+  key: 0,
+  class: "onyx-code-tab__skeletons"
+};
+const _hoisted_2$A = {
   key: 0,
   class: "onyx-code-tab__language onyx-text--small"
 };
@@ -6758,24 +6763,45 @@ function _sfc_render$Z(_ctx, _cache, $props, $setup, $data, $options) {
       ])
     ]),
     default: withCtx(() => [
-      renderSlot(_ctx.$slots, "default", {}, () => [
-        createElementVNode("pre", null, [
-          createElementVNode(
-            "code",
-            null,
-            toDisplayString($setup.props.code),
+      $setup.skeleton ? (openBlock(), createElementBlock("div", _hoisted_1$J, [
+        (openBlock(), createElementBlock(
+          Fragment,
+          null,
+          renderList(3, (i) => {
+            return createVNode($setup["OnyxSkeleton"], {
+              key: i,
+              class: "onyx-code-tab__skeleton"
+            });
+          }),
+          64
+          /* STABLE_FRAGMENT */
+        ))
+      ])) : (openBlock(), createElementBlock(
+        Fragment,
+        { key: 1 },
+        [
+          renderSlot(_ctx.$slots, "default", {}, () => [
+            createElementVNode("pre", null, [
+              createElementVNode(
+                "code",
+                null,
+                toDisplayString($setup.props.code),
+                1
+                /* TEXT */
+              )
+            ])
+          ]),
+          $setup.props.language ? (openBlock(), createElementBlock(
+            "span",
+            _hoisted_2$A,
+            toDisplayString($setup.props.language),
             1
             /* TEXT */
-          )
-        ])
-      ]),
-      $setup.props.language ? (openBlock(), createElementBlock(
-        "span",
-        _hoisted_1$J,
-        toDisplayString($setup.props.language),
-        1
-        /* TEXT */
-      )) : createCommentVNode("v-if", true)
+          )) : createCommentVNode("v-if", true)
+        ],
+        64
+        /* STABLE_FRAGMENT */
+      ))
     ]),
     _: 3
     /* FORWARDED */
@@ -6883,14 +6909,19 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
     const tabs = ref(/* @__PURE__ */ new Map());
     provide(CODE_TABS_INJECTION_KEY, { tabs });
     const activeTabCode = computed(() => tabs.value.get(modelValue.value));
-    const isCopied = ref(false);
+    const copyStatus = ref();
     const handleCopy = async () => {
       if (!activeTabCode.value) return;
-      await navigator.clipboard.writeText(activeTabCode.value);
-      isCopied.value = true;
-      setTimeout(() => isCopied.value = false, 3e3);
+      try {
+        await navigator.clipboard.writeText(activeTabCode.value);
+        copyStatus.value = "success";
+      } catch {
+        copyStatus.value = "error";
+      } finally {
+        setTimeout(() => copyStatus.value = void 0, 3e3);
+      }
     };
-    const __returned__ = { props, emit, t, tabsProps, modelValue, tabs, activeTabCode, isCopied, handleCopy, get iconFileCopy() {
+    const __returned__ = { props, emit, t, tabsProps, modelValue, tabs, activeTabCode, copyStatus, handleCopy, get iconFileCopy() {
       return iconFileCopy;
     }, OnyxSystemButton, OnyxTabs, OnyxTag };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
@@ -6907,17 +6938,21 @@ function _sfc_render$X(_ctx, _cache, $props, $setup, $data, $options) {
     density: "compact"
   }), {
     actions: withCtx(() => [
-      !$setup.isCopied ? (openBlock(), createBlock($setup["OnyxSystemButton"], {
+      !$setup.copyStatus ? (openBlock(), createBlock($setup["OnyxSystemButton"], {
         key: 0,
         label: $setup.t("codeTabs.copySnippet"),
         icon: $setup.iconFileCopy,
         disabled: !$setup.activeTabCode,
         onClick: $setup.handleCopy
-      }, null, 8, ["label", "icon", "disabled"])) : (openBlock(), createBlock($setup["OnyxTag"], {
+      }, null, 8, ["label", "icon", "disabled"])) : $setup.copyStatus === "success" ? (openBlock(), createBlock($setup["OnyxTag"], {
         key: 1,
         label: $setup.t("codeTabs.copied"),
         color: "success"
-      }, null, 8, ["label"]))
+      }, null, 8, ["label"])) : $setup.copyStatus === "error" ? (openBlock(), createBlock($setup["OnyxTag"], {
+        key: 2,
+        label: $setup.t("codeTabs.failed"),
+        color: "danger"
+      }, null, 8, ["label"])) : createCommentVNode("v-if", true)
     ]),
     default: withCtx(() => [
       renderSlot(_ctx.$slots, "default")