@scalar/components 0.27.10 → 0.27.11

package/dist/style.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
 @layer properties {
   @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
     *, :before, :after, ::backdrop {
@@ -682,22 +682,6 @@
   inset-block: 2px;
 }
 
-.scalar-app .-start {
-  inset-inline-start: -4px;
-}
-
-.scalar-app .start {
-  inset-inline-start: 4px;
-}
-
-.scalar-app .-end {
-  inset-inline-end: -4px;
-}
-
-.scalar-app .end {
-  inset-inline-end: 4px;
-}
-
 .scalar-app .-top-1 {
   top: -4px;
 }
@@ -828,7 +812,6 @@
 
 .scalar-app .z-10 {
   z-index: 10;
-  z-index: 10;
 }
 
 .scalar-app .z-context {
@@ -1465,7 +1448,7 @@
 }
 
 .scalar-app .translate-x-0 {
-  --tw-translate-x: calc(4px * 0);
+  --tw-translate-x: 0px;
   translate: var(--tw-translate-x) var(--tw-translate-y);
 }
 
@@ -1500,7 +1483,7 @@
 }
 
 .scalar-app .translate-y-0 {
-  --tw-translate-y: calc(4px * 0);
+  --tw-translate-y: 0px;
   translate: var(--tw-translate-x) var(--tw-translate-y);
 }
 
@@ -2461,7 +2444,7 @@
 }
 
 .scalar-app .shadow-border {
-  --tw-shadow: inset 0 0 0 var(--tw-shadow-color, var(--scalar-border-width)) var(--scalar-border-color);
+  --tw-shadow: inset 0 0 0 var(--scalar-border-width) var(--scalar-border-color);
   box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
 }
 
@@ -2696,6 +2679,16 @@
   .scalar-app .group-hover\/button\:text-c-header-1:is(:where(.group\/button):hover *) {
     color: var(--scalar-header-color-1, var(--scalar-color-1));
   }
+
+  .scalar-app .group-hover\/copy-button\:bg-b-1\.5:is(:where(.group\/copy-button):hover *) {
+    background-color: var(--scalar-background-1);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .scalar-app .group-hover\/copy-button\:bg-b-1\.5:is(:where(.group\/copy-button):hover *) {
+      background-color: color-mix(in srgb, var(--scalar-background-1), var(--scalar-background-2));
+    }
+  }
 }
 
 .scalar-app .group-focus-visible\/toggle\:outline:is(:where(.group\/toggle):focus-visible *) {
@@ -2756,16 +2749,22 @@
   border-bottom-left-radius: inherit;
 }
 
-.scalar-app .focus-within\:bg-b-1:focus-within {
-  background-color: var(--scalar-background-1);
-}
-
 .scalar-app .focus-within\:outline-none:focus-within {
   --tw-outline-style: none;
   outline-style: none;
 }
 
 @media (hover: hover) {
+  .scalar-app .hover\:bg-b-1\.5:hover {
+    background-color: var(--scalar-background-1);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .scalar-app .hover\:bg-b-1\.5:hover {
+      background-color: color-mix(in srgb, var(--scalar-background-1), var(--scalar-background-2));
+    }
+  }
+
   .scalar-app .hover\:bg-b-2:hover {
     background-color: var(--scalar-background-2);
   }
@@ -2920,6 +2919,20 @@
   background-color: var(--bg-dark);
 }
 
+.scalar-app .dark\:bg-b-1\.5:where(.dark-mode, .dark-mode *) {
+  background-color: var(--scalar-background-1);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  .scalar-app .dark\:bg-b-1\.5:where(.dark-mode, .dark-mode *) {
+    background-color: color-mix(in srgb, var(--scalar-background-1), var(--scalar-background-2));
+  }
+}
+
+.scalar-app .dark\:bg-b-2:where(.dark-mode, .dark-mode *) {
+  background-color: var(--scalar-background-2);
+}
+
 .scalar-app .dark\:bg-b-3:where(.dark-mode, .dark-mode *) {
   background-color: var(--scalar-background-3);
 }
@@ -2943,6 +2956,20 @@
 }
 
 @media (hover: hover) {
+  .scalar-app .dark\:group-hover\/copy-button\:bg-b-1\.5:where(.dark-mode, .dark-mode *):is(:where(.group\/copy-button):hover *) {
+    background-color: var(--scalar-background-1);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .scalar-app .dark\:group-hover\/copy-button\:bg-b-1\.5:where(.dark-mode, .dark-mode *):is(:where(.group\/copy-button):hover *) {
+      background-color: color-mix(in srgb, var(--scalar-background-1), var(--scalar-background-2));
+    }
+  }
+
+  .scalar-app .dark\:hover\:bg-b-2:where(.dark-mode, .dark-mode *):hover {
+    background-color: var(--scalar-background-2);
+  }
+
   .scalar-app .dark\:hover\:bg-b-3:where(.dark-mode, .dark-mode *):hover {
     background-color: var(--scalar-background-3);
   }
@@ -3537,7 +3564,7 @@ to {
     transform: scale(3.5) rotate(360deg);
 }
 }
-/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
 .scalar-app :where(code.hljs) * {
   font-size: inherit;
   font-family: var(--scalar-font-code);
@@ -3879,7 +3906,6 @@ code.hljs {
 }
 
 /* -------------------------------------------------------------- */
-
 /* Language specific overrides */
 
 /** For HTML we leave the content strings brighter */
@@ -4459,7 +4485,7 @@ img,
 }
 }
 }
-/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
 .scalar-modal-layout[data-v-5bb1dcc2] {
   animation: .3s ease-in-out forwards fadein-layout-5bb1dcc2;
 }
@@ -4529,7 +4555,7 @@ img,
   top: 0;
   right: -50dvw;
 }
-/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
 .group\/item > * > .scalar-sidebar-indent .scalar-sidebar-indent-border[data-v-3e080c68] {
   inset-block: -1px;
 }
@@ -4539,11 +4565,11 @@ img,
 .group\/item:last-child > * > .scalar-sidebar-indent .scalar-sidebar-indent-border[data-v-3e080c68] {
   bottom: 0;
 }
-/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
 .group\/item:last-of-type > .group\/button > .group\/button-label > .group\/button-loading {
   width: 66.6667%;
 }
-/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
 .group\/items.-translate-x-full .group\/button {
   transition-behavior: allow-discrete;
   max-height: 0;
@@ -4556,7 +4582,7 @@ img,
   max-height: 3.40282e38px;
   display: flex;
 }
-/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
 .animate-sidebar-border-bottom {
   animation: forwards border-bottom;
   animation-timeline: scroll();
@@ -4570,7 +4596,7 @@ to {
     border-bottom-width: var(--scalar-border-width);
 }
 }
-/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
 .group\/sidebar-section:first-of-type > .group\/spacer-before, .group\/sidebar-section:last-of-type > .group\/spacer-after {
   height: 0;
 }
@@ -4578,7 +4604,7 @@ to {
   height: 0;
   margin-bottom: -1px;
 }
-/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
 @layer properties {
 @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
 *, :before, :after, ::backdrop {
@@ -4610,7 +4636,7 @@ to {
 }
 }
 }
-:where(body) > .scalar-tooltip {
+:where(body, dialog) > .scalar-tooltip {
   --scalar-tooltip-padding-x: 8px;
   --scalar-tooltip-padding-y: 6px;
   padding: var(--scalar-tooltip-padding-y) var(--scalar-tooltip-padding-x);
@@ -4623,19 +4649,19 @@ to {
   overflow-wrap: break-word;
   color: var(--scalar-tooltip-color);
 }
-:where(body) > .scalar-tooltip[data-side="top"] {
+:where(body, dialog) > .scalar-tooltip[data-side="top"] {
   padding-bottom: calc(var(--scalar-tooltip-padding-y) + var(--scalar-tooltip-offset));
 }
-:where(body) > .scalar-tooltip[data-side="bottom"] {
+:where(body, dialog) > .scalar-tooltip[data-side="bottom"] {
   padding-top: calc(var(--scalar-tooltip-padding-y) + var(--scalar-tooltip-offset));
 }
-:where(body) > .scalar-tooltip[data-side="left"] {
+:where(body, dialog) > .scalar-tooltip[data-side="left"] {
   padding-right: calc(var(--scalar-tooltip-padding-x) + var(--scalar-tooltip-offset));
 }
-:where(body) > .scalar-tooltip[data-side="right"] {
+:where(body, dialog) > .scalar-tooltip[data-side="right"] {
   padding-left: calc(var(--scalar-tooltip-padding-x) + var(--scalar-tooltip-offset));
 }
-:where(body) > .scalar-tooltip:before {
+:where(body, dialog) > .scalar-tooltip:before {
   content: "";
   z-index: calc(1 * -1);
   border-radius: var(--scalar-radius-lg);
@@ -4645,21 +4671,21 @@ to {
   --tw-shadow: var(--scalar-shadow-1);
   box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   --tw-backdrop-blur: blur(8px);
-  -webkit-backdrop-filter: var(--tw-backdrop-blur,  ) var(--tw-backdrop-brightness,  ) var(--tw-backdrop-contrast,  ) var(--tw-backdrop-grayscale,  ) var(--tw-backdrop-hue-rotate,  ) var(--tw-backdrop-invert,  ) var(--tw-backdrop-opacity,  ) var(--tw-backdrop-saturate,  ) var(--tw-backdrop-sepia,  );
-  backdrop-filter: var(--tw-backdrop-blur,  ) var(--tw-backdrop-brightness,  ) var(--tw-backdrop-contrast,  ) var(--tw-backdrop-grayscale,  ) var(--tw-backdrop-hue-rotate,  ) var(--tw-backdrop-invert,  ) var(--tw-backdrop-opacity,  ) var(--tw-backdrop-saturate,  ) var(--tw-backdrop-sepia,  );
+  -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
+  backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
   position: absolute;
   inset: 0;
 }
-:where(body) > .scalar-tooltip[data-side="top"]:before {
+:where(body, dialog) > .scalar-tooltip[data-side="top"]:before {
   bottom: var(--scalar-tooltip-offset);
 }
-:where(body) > .scalar-tooltip[data-side="bottom"]:before {
+:where(body, dialog) > .scalar-tooltip[data-side="bottom"]:before {
   top: var(--scalar-tooltip-offset);
 }
-:where(body) > .scalar-tooltip[data-side="left"]:before {
+:where(body, dialog) > .scalar-tooltip[data-side="left"]:before {
   right: var(--scalar-tooltip-offset);
 }
-:where(body) > .scalar-tooltip[data-side="right"]:before {
+:where(body, dialog) > .scalar-tooltip[data-side="right"]:before {
   left: var(--scalar-tooltip-offset);
 }
 @property --tw-font-weight {

package/dist/vue-styles.css

@@ -83,7 +83,7 @@ to {
     transform: scale(3.5) rotate(360deg);
 }
 }
-/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
 .scalar-app :where(code.hljs) * {
   font-size: inherit;
   font-family: var(--scalar-font-code);
@@ -425,7 +425,6 @@ code.hljs {
 }
 
 /* -------------------------------------------------------------- */
-
 /* Language specific overrides */
 
 /** For HTML we leave the content strings brighter */
@@ -1005,7 +1004,7 @@ img,
 }
 }
 }
-/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
 .scalar-modal-layout[data-v-5bb1dcc2] {
   animation: .3s ease-in-out forwards fadein-layout-5bb1dcc2;
 }
@@ -1075,7 +1074,7 @@ img,
   top: 0;
   right: -50dvw;
 }
-/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
 .group\/item > * > .scalar-sidebar-indent .scalar-sidebar-indent-border[data-v-3e080c68] {
   inset-block: -1px;
 }
@@ -1085,11 +1084,11 @@ img,
 .group\/item:last-child > * > .scalar-sidebar-indent .scalar-sidebar-indent-border[data-v-3e080c68] {
   bottom: 0;
 }
-/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
 .group\/item:last-of-type > .group\/button > .group\/button-label > .group\/button-loading {
   width: 66.6667%;
 }
-/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
 .group\/items.-translate-x-full .group\/button {
   transition-behavior: allow-discrete;
   max-height: 0;
@@ -1102,7 +1101,7 @@ img,
   max-height: 3.40282e38px;
   display: flex;
 }
-/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
 .animate-sidebar-border-bottom {
   animation: forwards border-bottom;
   animation-timeline: scroll();
@@ -1116,7 +1115,7 @@ to {
     border-bottom-width: var(--scalar-border-width);
 }
 }
-/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
 .group\/sidebar-section:first-of-type > .group\/spacer-before, .group\/sidebar-section:last-of-type > .group\/spacer-after {
   height: 0;
 }
@@ -1124,7 +1123,7 @@ to {
   height: 0;
   margin-bottom: -1px;
 }
-/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
 @layer properties {
 @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
 *, :before, :after, ::backdrop {
@@ -1156,7 +1155,7 @@ to {
 }
 }
 }
-:where(body) > .scalar-tooltip {
+:where(body, dialog) > .scalar-tooltip {
   --scalar-tooltip-padding-x: 8px;
   --scalar-tooltip-padding-y: 6px;
   padding: var(--scalar-tooltip-padding-y) var(--scalar-tooltip-padding-x);
@@ -1169,19 +1168,19 @@ to {
   overflow-wrap: break-word;
   color: var(--scalar-tooltip-color);
 }
-:where(body) > .scalar-tooltip[data-side="top"] {
+:where(body, dialog) > .scalar-tooltip[data-side="top"] {
   padding-bottom: calc(var(--scalar-tooltip-padding-y) + var(--scalar-tooltip-offset));
 }
-:where(body) > .scalar-tooltip[data-side="bottom"] {
+:where(body, dialog) > .scalar-tooltip[data-side="bottom"] {
   padding-top: calc(var(--scalar-tooltip-padding-y) + var(--scalar-tooltip-offset));
 }
-:where(body) > .scalar-tooltip[data-side="left"] {
+:where(body, dialog) > .scalar-tooltip[data-side="left"] {
   padding-right: calc(var(--scalar-tooltip-padding-x) + var(--scalar-tooltip-offset));
 }
-:where(body) > .scalar-tooltip[data-side="right"] {
+:where(body, dialog) > .scalar-tooltip[data-side="right"] {
   padding-left: calc(var(--scalar-tooltip-padding-x) + var(--scalar-tooltip-offset));
 }
-:where(body) > .scalar-tooltip:before {
+:where(body, dialog) > .scalar-tooltip:before {
   content: "";
   z-index: calc(1 * -1);
   border-radius: var(--scalar-radius-lg);
@@ -1191,21 +1190,21 @@ to {
   --tw-shadow: var(--scalar-shadow-1);
   box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   --tw-backdrop-blur: blur(8px);
-  -webkit-backdrop-filter: var(--tw-backdrop-blur,  ) var(--tw-backdrop-brightness,  ) var(--tw-backdrop-contrast,  ) var(--tw-backdrop-grayscale,  ) var(--tw-backdrop-hue-rotate,  ) var(--tw-backdrop-invert,  ) var(--tw-backdrop-opacity,  ) var(--tw-backdrop-saturate,  ) var(--tw-backdrop-sepia,  );
-  backdrop-filter: var(--tw-backdrop-blur,  ) var(--tw-backdrop-brightness,  ) var(--tw-backdrop-contrast,  ) var(--tw-backdrop-grayscale,  ) var(--tw-backdrop-hue-rotate,  ) var(--tw-backdrop-invert,  ) var(--tw-backdrop-opacity,  ) var(--tw-backdrop-saturate,  ) var(--tw-backdrop-sepia,  );
+  -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
+  backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
   position: absolute;
   inset: 0;
 }
-:where(body) > .scalar-tooltip[data-side="top"]:before {
+:where(body, dialog) > .scalar-tooltip[data-side="top"]:before {
   bottom: var(--scalar-tooltip-offset);
 }
-:where(body) > .scalar-tooltip[data-side="bottom"]:before {
+:where(body, dialog) > .scalar-tooltip[data-side="bottom"]:before {
   top: var(--scalar-tooltip-offset);
 }
-:where(body) > .scalar-tooltip[data-side="left"]:before {
+:where(body, dialog) > .scalar-tooltip[data-side="left"]:before {
   right: var(--scalar-tooltip-offset);
 }
-:where(body) > .scalar-tooltip[data-side="right"]:before {
+:where(body, dialog) > .scalar-tooltip[data-side="right"]:before {
   left: var(--scalar-tooltip-offset);
 }
 @property --tw-font-weight {

package/package.json

@@ -10,7 +10,7 @@
     "url": "git+https://github.com/scalar/scalar.git",
     "directory": "packages/components"
   },
-  "version": "0.27.10",
+  "version": "0.27.11",
   "engines": {
     "node": ">=22"
   },
@@ -219,12 +219,12 @@
     "@vueuse/core": "13.9.0",
     "cva": "1.0.0-beta.4",
     "radix-vue": "^1.9.17",
-    "vue": "^3.5.30",
+    "vue": "^3.5.40",
     "vue-component-type-helpers": "^3.2.6",
     "@scalar/code-highlight": "0.4.3",
-    "@scalar/icons": "0.7.5",
-    "@scalar/helpers": "0.9.2",
+    "@scalar/helpers": "0.10.0",
     "@scalar/themes": "0.17.2",
+    "@scalar/icons": "0.7.5",
     "@scalar/use-hooks": "0.4.9"
   },
   "devDependencies": {
@@ -232,21 +232,21 @@
     "@storybook/addon-docs": "10.3.5",
     "@storybook/addon-links": "10.3.5",
     "@storybook/vue3-vite": "10.3.5",
-    "@tailwindcss/cli": "^4.2.4",
-    "@tailwindcss/vite": "^4.2.0",
+    "@tailwindcss/cli": "^4.3.3",
+    "@tailwindcss/vite": "^4.3.3",
     "@types/jsdom": "28.0.1",
     "@types/node": "^24.1.0",
-    "@vitejs/plugin-vue": "^6.0.3",
-    "@vue/test-utils": "2.4.6",
+    "@vitejs/plugin-vue": "^6.0.8",
+    "@vue/test-utils": "2.4.11",
     "@vueless/storybook-dark-mode": "^10.0.7",
     "concurrently": "9.1.2",
     "jsdom": "27.4.0",
     "storybook": "10.3.5",
     "svglint": "^4.2.1",
-    "tailwindcss": "^4.1.18",
-    "vite": "8.0.0",
+    "tailwindcss": "^4.3.3",
+    "vite": "8.1.5",
     "vite-svg-loader": "5.1.1",
-    "vitest": "4.1.0"
+    "vitest": "4.1.10"
   },
   "scripts": {
     "build": "pnpm typegen:icons && vite build && pnpm build:styles && vue-tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json",