@scalar/components 0.21.3 → 0.22.0

package/dist/style.css

@@ -1098,6 +1098,20 @@ img,
   display: flex;
 }
 /*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
+.animate-sidebar-border-bottom {
+  animation: forwards border-bottom;
+  animation-timeline: scroll();
+  animation-range-end: 1px;
+}
+@keyframes border-bottom {
+from {
+    border-bottom-width: 0;
+}
+to {
+    border-bottom-width: var(--scalar-border-width);
+}
+}
+/*! tailwindcss v4.2.1 | 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;
 }
@@ -1268,6 +1282,25 @@ img,
   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)))) {
@@ -1312,6 +1345,11 @@ img,
       --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%;
@@ -1405,6 +1443,7 @@ img,
     --scalar-text-decoration-hover: underline;
     --scalar-link-font-weight: inherit;
     --scalar-sidebar-indent: 20px;
+    --scalar-sidebar-padding: 12px;
   }
 
   .dark-mode {
@@ -1837,6 +1876,10 @@ img,
   }
 }
 
+:where(.scalar-app) [class*="rotate-"], :where(.scalar-app) [class*="translate-"], :where(.scalar-app) [class*="scale-"] {
+  transform: none;
+}
+
 .scalar-app .pointer-events-none {
   pointer-events: none;
 }
@@ -1930,6 +1973,10 @@ img,
   top: var(--nested-items-offset) !important;
 }
 
+.scalar-app .top-\(--scalar-sidebar-sticky-offset\,0\) {
+  top: var(--scalar-sidebar-sticky-offset, 0);
+}
+
 .scalar-app .top-0 {
   top: 0;
 }
@@ -2115,6 +2162,10 @@ img,
   margin: 0 !important;
 }
 
+.scalar-app .-m-\(--scalar-sidebar-padding\) {
+  margin: calc(var(--scalar-sidebar-padding) * -1);
+}
+
 .scalar-app .-m-0\.5 {
   margin: -2px;
 }
@@ -2147,10 +2198,6 @@ img,
   margin: auto;
 }
 
-.scalar-app .-mx-0\.25 {
-  margin-inline: -1px;
-}
-
 .scalar-app .-mx-0\.75 {
   margin-inline: -3px;
 }
@@ -2159,6 +2206,10 @@ img,
   margin-inline: -1px;
 }
 
+.scalar-app .mx-0\.5 {
+  margin-inline: 2px;
+}
+
 .scalar-app .mx-px {
   margin-inline: 1px;
 }
@@ -2211,7 +2262,7 @@ img,
   margin-top: 20svh;
 }
 
-.scalar-app .-mr-0\.25 {
+.scalar-app .-mr-px {
   margin-right: -1px;
 }
 
@@ -2227,6 +2278,10 @@ img,
   margin-right: 6px;
 }
 
+.scalar-app .mr-2 {
+  margin-right: 8px;
+}
+
 .scalar-app .mr-3 {
   margin-right: 12px;
 }
@@ -2478,6 +2533,10 @@ img,
   min-height: 48px;
 }
 
+.scalar-app .w-\(--scalar-sidebar-width\) {
+  width: var(--scalar-sidebar-width);
+}
+
 .scalar-app .w-3 {
   width: 12px;
 }
@@ -2506,6 +2565,10 @@ img,
   width: 128px;
 }
 
+.scalar-app .w-36 {
+  width: 144px;
+}
+
 .scalar-app .w-40 {
   width: 160px;
 }
@@ -2566,6 +2629,10 @@ img,
   width: min-content;
 }
 
+.scalar-app .w-px {
+  width: 1px;
+}
+
 .scalar-app .w-screen {
   width: 100vw;
 }
@@ -3022,6 +3089,10 @@ img,
   border-color: var(--scalar-sidebar-search-border-color, var(--scalar-border-color));
 }
 
+.scalar-app .border-b-sidebar-border {
+  border-bottom-color: var(--scalar-sidebar-border-color, var(--scalar-border-color));
+}
+
 .scalar-app .bg-\(--bg-light\) {
   background-color: var(--bg-light);
 }
@@ -3179,6 +3250,10 @@ img,
   mask-repeat: repeat;
 }
 
+.scalar-app .p-\(--scalar-sidebar-padding\) {
+  padding: var(--scalar-sidebar-padding);
+}
+
 .scalar-app .p-0 {
   padding: 0;
 }
@@ -3223,6 +3298,10 @@ img,
   padding: 1px;
 }
 
+.scalar-app .px-1 {
+  padding-inline: 4px;
+}
+
 .scalar-app .px-1\.5 {
   padding-inline: 6px;
 }
@@ -3263,6 +3342,10 @@ img,
   padding-inline: 36px;
 }
 
+.scalar-app .py-0\.5 {
+  padding-block: 2px;
+}
+
 .scalar-app .py-1 {
   padding-block: 4px;
 }
@@ -3295,10 +3378,6 @@ img,
   padding-block: 6.75px;
 }
 
-.scalar-app .pt-0 {
-  padding-top: 0;
-}
-
 .scalar-app .pt-3 {
   padding-top: 12px;
 }
@@ -3323,6 +3402,10 @@ img,
   padding-bottom: 0;
 }
 
+.scalar-app .pb-3 {
+  padding-bottom: 12px;
+}
+
 .scalar-app .pl-2 {
   padding-left: 8px;
 }
@@ -3535,6 +3618,11 @@ img,
   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;
 }
@@ -3570,6 +3658,11 @@ img,
   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);
@@ -3842,12 +3935,12 @@ img,
   font-family: inherit;
 }
 
-.scalar-app .first\:rounded-t-\[inherit\]:first-child, :is(.scalar-app .\*\:first\:rounded-t-\[inherit\] > *):first-child {
+.scalar-app .first\:rounded-t-\[inherit\]:first-child {
   border-top-left-radius: inherit;
   border-top-right-radius: inherit;
 }
 
-.scalar-app .last\:rounded-b-\[inherit\]:last-child, :is(.scalar-app .\*\:last\:rounded-b-\[inherit\] > *):last-child {
+.scalar-app .last\:rounded-b-\[inherit\]:last-child {
   border-bottom-right-radius: inherit;
   border-bottom-left-radius: inherit;
 }
@@ -3959,6 +4052,14 @@ img,
   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));
 }
@@ -4280,6 +4381,31 @@ img,
   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.3",
+  "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/code-highlight": "0.3.2",
+    "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/themes": "0.15.2",
-    "@scalar/use-hooks": "0.4.2",
-    "@scalar/helpers": "0.4.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",