@scalar/components 0.21.4 → 0.22.1

package/dist/docs/useBindCx/MockComponents.d.ts

@@ -11,59 +11,11 @@ export declare const SimpleComponent: import("vue").DefineComponent<import("vue"
     variants: (props?: ({
         active?: boolean | undefined;
     } & ({
-        class?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | /*elided*/ any | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined;
+        class?: import("cva").ClassValue;
         className?: never;
     } | {
         class?: never;
-        className?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | /*elided*/ any | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined;
+        className?: import("cva").ClassValue;
     })) | undefined) => string;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     active: {
@@ -89,59 +41,11 @@ export declare const ComplexComponent: import("vue").DefineComponent<import("vue
     variants: (props?: ({
         active?: boolean | undefined;
     } & ({
-        class?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | /*elided*/ any | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined;
+        class?: import("cva").ClassValue;
         className?: never;
     } | {
         class?: never;
-        className?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | /*elided*/ any | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined)[] | {
-            [x: string]: any;
-        } | null | undefined;
+        className?: import("cva").ClassValue;
     })) | undefined) => string;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     active: {

package/dist/docs/useBindCx/MockComponents.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MockComponents.d.ts","sourceRoot":"","sources":["../../../src/docs/useBindCx/MockComponents.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4EAU1B,CAAA;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4EAgB3B,CAAA"}
+{"version":3,"file":"MockComponents.d.ts","sourceRoot":"","sources":["../../../src/docs/useBindCx/MockComponents.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;4EAU1B,CAAA;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4EAgB3B,CAAA"}

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;
 }
@@ -2750,10 +2786,6 @@ to {
   cursor: auto;
 }
 
-.scalar-app .cursor-default {
-  cursor: default;
-}
-
 .scalar-app .cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -3029,6 +3061,10 @@ to {
   border-color: var(--scalar-background-3);
 }
 
+.scalar-app .border-border-header {
+  border-color: var(--scalar-header-border-color, var(--scalar-border-color));
+}
+
 .scalar-app .border-c-1 {
   border-color: var(--scalar-color-1);
 }
@@ -3091,6 +3127,14 @@ to {
   background-color: var(--scalar-background-danger);
 }
 
+.scalar-app .bg-b-header-1 {
+  background-color: var(--scalar-header-background-1, var(--scalar-background-1));
+}
+
+.scalar-app .bg-b-header-cta {
+  background-color: var(--scalar-header-call-to-action-color, var(--scalar-button-1));
+}
+
 .scalar-app .bg-b-tooltip {
   background-color: var(--scalar-tooltip-background);
 }
@@ -3262,6 +3306,10 @@ to {
   padding: 1px;
 }
 
+.scalar-app .px-1 {
+  padding-inline: 4px;
+}
+
 .scalar-app .px-1\.5 {
   padding-inline: 6px;
 }
@@ -3302,6 +3350,10 @@ to {
   padding-inline: 36px;
 }
 
+.scalar-app .py-0\.5 {
+  padding-block: 2px;
+}
+
 .scalar-app .py-1 {
   padding-block: 4px;
 }
@@ -3334,10 +3386,6 @@ to {
   padding-block: 6.75px;
 }
 
-.scalar-app .pt-0 {
-  padding-top: 0;
-}
-
 .scalar-app .pt-3 {
   padding-top: 12px;
 }
@@ -3362,6 +3410,10 @@ to {
   padding-bottom: 0;
 }
 
+.scalar-app .pb-3 {
+  padding-bottom: 12px;
+}
+
 .scalar-app .pl-2 {
   padding-left: 8px;
 }
@@ -3437,11 +3489,6 @@ to {
   font-size: var(--scalar-font-size-6);
 }
 
-.scalar-app .leading-5 {
-  --tw-leading: calc(4px * 5);
-  line-height: 20px;
-}
-
 .scalar-app .leading-\[22px\] {
   --tw-leading: 22px;
   line-height: 22px;
@@ -3530,6 +3577,18 @@ to {
   color: var(--scalar-color-danger);
 }
 
+.scalar-app .text-c-header-1 {
+  color: var(--scalar-header-color-1, var(--scalar-color-1));
+}
+
+.scalar-app .text-c-header-2 {
+  color: var(--scalar-header-color-2, var(--scalar-color-2));
+}
+
+.scalar-app .text-c-header-cta {
+  color: var(--scalar-button-1-color);
+}
+
 .scalar-app .text-c-tooltip {
   color: var(--scalar-tooltip-color);
 }
@@ -3574,6 +3633,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 +3673,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);
@@ -3788,8 +3857,8 @@ to {
   justify-content: center;
 }
 
-:is(.scalar-app .\*\:gap-px > *) {
-  gap: 1px;
+:is(.scalar-app .\*\:gap-1 > *) {
+  gap: 4px;
 }
 
 :is(.scalar-app .\*\:rounded > *) {
@@ -3828,8 +3897,8 @@ to {
     background-color: var(--scalar-sidebar-indent-border-hover, var(--scalar-border-color));
   }
 
-  .scalar-app .group-hover\/button\:text-c-1:is(:where(.group\/button):hover *) {
-    color: var(--scalar-color-1);
+  .scalar-app .group-hover\/button\:text-c-header-1:is(:where(.group\/button):hover *) {
+    color: var(--scalar-header-color-1, var(--scalar-color-1));
   }
 }
 
@@ -3909,10 +3978,26 @@ to {
     background-color: var(--scalar-background-3);
   }
 
+  .scalar-app .hover\:bg-b-header-2:hover {
+    background-color: var(--scalar-header-background-2, var(--scalar-background-2));
+  }
+
   .scalar-app .hover\:bg-h-btn:hover {
     background-color: var(--scalar-button-1-hover);
   }
 
+  .scalar-app .hover\:bg-h-header-cta:hover {
+    background-color: var(--scalar-header-call-to-action-color, var(--scalar-button-1));
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .scalar-app .hover\:bg-h-header-cta:hover {
+      background-color: color-mix(in srgb,
+    var(--scalar-header-call-to-action-color, var(--scalar-button-1)),
+    var(--scalar-header-background-1, var(--scalar-background-1)) 15%);
+    }
+  }
+
   .scalar-app .hover\:bg-sidebar-b-1:hover {
     background-color: var(--scalar-sidebar-background-1, var(--scalar-background-1));
   }
@@ -3953,6 +4038,10 @@ to {
     color: var(--scalar-color-1);
   }
 
+  .scalar-app .hover\:text-c-header-1:hover {
+    color: var(--scalar-header-color-1, var(--scalar-color-1));
+  }
+
   .scalar-app .hover\:text-sidebar-c-1:hover {
     color: var(--scalar-sidebar-color-1, var(--scalar-color-1));
   }
@@ -3998,6 +4087,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 +4416,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.1",
   "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.1",
     "@scalar/icons": "0.7.2",
-    "@scalar/code-highlight": "0.3.2",
     "@scalar/use-hooks": "0.4.2",
     "@scalar/themes": "0.15.3"
   },
   "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",