@scalar/components 0.21.4 → 0.22.0

package/dist/style.css

@@ -1282,6 +1282,25 @@ to {
   inherits: false;
   initial-value: 0 0 #0000;
 }
+
+.scalar-virtual-text-search-input[data-v-95edadbb]::-webkit-search-cancel-button {
+  display: none;
+}
+
+.scalar-virtual-text[data-v-b50a85e1]:focus {
+  outline: none;
+}
+.scalar-virtual-text-highlight[data-v-b50a85e1] {
+  background: var(--scalar-background-accent);
+  color: inherit;
+  border-radius: 2px;
+  padding: 1px 0;
+}
+.scalar-virtual-text-highlight-active[data-v-b50a85e1] {
+  background: var(--scalar-color-accent);
+  color: var(--scalar-background-1);
+  border-radius: 2px;
+}
 /*! tailwindcss v4.2.1 | 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)))) {
@@ -1326,6 +1345,11 @@ to {
       --tw-mask-bottom-to-color: transparent;
       --tw-leading: initial;
       --tw-font-weight: initial;
+      --tw-ordinal: initial;
+      --tw-slashed-zero: initial;
+      --tw-numeric-figure: initial;
+      --tw-numeric-spacing: initial;
+      --tw-numeric-fraction: initial;
       --tw-shadow: 0 0 #0000;
       --tw-shadow-color: initial;
       --tw-shadow-alpha: 100%;
@@ -2174,10 +2198,6 @@ to {
   margin: auto;
 }
 
-.scalar-app .-mx-0\.25 {
-  margin-inline: -1px;
-}
-
 .scalar-app .-mx-0\.75 {
   margin-inline: -3px;
 }
@@ -2186,6 +2206,10 @@ to {
   margin-inline: -1px;
 }
 
+.scalar-app .mx-0\.5 {
+  margin-inline: 2px;
+}
+
 .scalar-app .mx-px {
   margin-inline: 1px;
 }
@@ -2238,7 +2262,7 @@ to {
   margin-top: 20svh;
 }
 
-.scalar-app .-mr-0\.25 {
+.scalar-app .-mr-px {
   margin-right: -1px;
 }
 
@@ -2254,6 +2278,10 @@ to {
   margin-right: 6px;
 }
 
+.scalar-app .mr-2 {
+  margin-right: 8px;
+}
+
 .scalar-app .mr-3 {
   margin-right: 12px;
 }
@@ -2537,6 +2565,10 @@ to {
   width: 128px;
 }
 
+.scalar-app .w-36 {
+  width: 144px;
+}
+
 .scalar-app .w-40 {
   width: 160px;
 }
@@ -2597,6 +2629,10 @@ to {
   width: min-content;
 }
 
+.scalar-app .w-px {
+  width: 1px;
+}
+
 .scalar-app .w-screen {
   width: 100vw;
 }
@@ -3262,6 +3298,10 @@ to {
   padding: 1px;
 }
 
+.scalar-app .px-1 {
+  padding-inline: 4px;
+}
+
 .scalar-app .px-1\.5 {
   padding-inline: 6px;
 }
@@ -3302,6 +3342,10 @@ to {
   padding-inline: 36px;
 }
 
+.scalar-app .py-0\.5 {
+  padding-block: 2px;
+}
+
 .scalar-app .py-1 {
   padding-block: 4px;
 }
@@ -3334,10 +3378,6 @@ to {
   padding-block: 6.75px;
 }
 
-.scalar-app .pt-0 {
-  padding-top: 0;
-}
-
 .scalar-app .pt-3 {
   padding-top: 12px;
 }
@@ -3362,6 +3402,10 @@ to {
   padding-bottom: 0;
 }
 
+.scalar-app .pb-3 {
+  padding-bottom: 12px;
+}
+
 .scalar-app .pl-2 {
   padding-left: 8px;
 }
@@ -3574,6 +3618,11 @@ to {
   text-transform: uppercase;
 }
 
+.scalar-app .tabular-nums {
+  --tw-numeric-spacing: tabular-nums;
+  font-variant-numeric: var(--tw-ordinal,  ) var(--tw-slashed-zero,  ) var(--tw-numeric-figure,  ) var(--tw-numeric-spacing,  ) var(--tw-numeric-fraction,  );
+}
+
 .scalar-app .no-underline {
   text-decoration-line: none;
 }
@@ -3609,6 +3658,11 @@ to {
   box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
 }
 
+.scalar-app .shadow-md {
+  --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);
+}
+
 .scalar-app .shadow-none {
   --tw-shadow: 0 0 #0000;
   box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -3998,6 +4052,14 @@ to {
   filter: var(--tw-blur,  ) var(--tw-brightness,  ) var(--tw-contrast,  ) var(--tw-grayscale,  ) var(--tw-hue-rotate,  ) var(--tw-invert,  ) var(--tw-saturate,  ) var(--tw-sepia,  ) var(--tw-drop-shadow,  );
 }
 
+.scalar-app .disabled\:pointer-events-none:disabled {
+  pointer-events: none;
+}
+
+.scalar-app .disabled\:opacity-30:disabled {
+  opacity: .3;
+}
+
 .scalar-app .has-\[\:focus-visible\]\:bg-sidebar-b-1:has(:focus-visible) {
   background-color: var(--scalar-sidebar-background-1, var(--scalar-background-1));
 }
@@ -4319,6 +4381,31 @@ to {
   inherits: false
 }
 
+@property --tw-ordinal {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-slashed-zero {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-numeric-figure {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-numeric-spacing {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-numeric-fraction {
+  syntax: "*";
+  inherits: false
+}
+
 @property --tw-shadow {
   syntax: "*";
   inherits: false;

package/package.json

@@ -10,7 +10,7 @@
     "url": "git+https://github.com/scalar/scalar.git",
     "directory": "packages/components"
   },
-  "version": "0.21.4",
+  "version": "0.22.0",
   "engines": {
     "node": ">=22"
   },
@@ -38,29 +38,29 @@
     "nanoid": "^5.1.6",
     "radix-vue": "^1.9.17",
     "vue": "^3.5.30",
-    "vue-component-type-helpers": "^3.2.2",
-    "@scalar/helpers": "0.4.3",
+    "vue-component-type-helpers": "^3.2.6",
+    "@scalar/code-highlight": "0.3.3",
+    "@scalar/helpers": "0.5.0",
+    "@scalar/themes": "0.15.3",
     "@scalar/icons": "0.7.2",
-    "@scalar/code-highlight": "0.3.2",
-    "@scalar/use-hooks": "0.4.2",
-    "@scalar/themes": "0.15.3"
+    "@scalar/use-hooks": "0.4.2"
   },
   "devDependencies": {
     "@headlessui/tailwindcss": "^0.2.2",
     "@playwright/test": "1.56.0",
-    "@storybook/addon-docs": "10.2.19",
-    "@storybook/addon-links": "10.2.19",
-    "@storybook/vue3-vite": "10.2.19",
+    "@storybook/addon-docs": "10.3.5",
+    "@storybook/addon-links": "10.3.5",
+    "@storybook/vue3-vite": "10.3.5",
     "@tailwindcss/vite": "^4.2.0",
-    "@types/jsdom": "27.0.0",
+    "@types/jsdom": "28.0.1",
     "@types/node": "^24.1.0",
     "@vitejs/plugin-vue": "^6.0.3",
     "@vue/test-utils": "2.4.6",
-    "@vueless/storybook-dark-mode": "^10.0.6",
+    "@vueless/storybook-dark-mode": "^10.0.7",
     "concurrently": "9.1.2",
     "jsdom": "27.4.0",
-    "storybook": "10.2.19",
-    "svglint": "^4.1.2",
+    "storybook": "10.3.5",
+    "svglint": "^4.2.1",
     "tailwindcss": "^4.1.18",
     "vite": "8.0.0",
     "vite-svg-loader": "5.1.1",
@@ -75,7 +75,7 @@
     "lint:check": "pnpm lint:icons",
     "lint:icons": "svglint src/components/ScalarIcon/icons/*.svg --config src/components/ScalarIcon/.svglintrc.js",
     "preview": "vite preview --outDir storybook-static -c test/vite.config.ts 1>&2",
-    "test": "vitest",
+    "test": "vitest --run",
     "test:e2e": "PW_TEST_CONNECT_WS_ENDPOINT=ws://127.0.0.1:5001/ playwright test",
     "test:e2e:ci": "CI=1 playwright test",
     "test:e2e:update": "pnpm test:e2e --update-snapshots",