@scalar/components 0.31.0 → 0.32.0

package/dist/style.css

@@ -91,12 +91,12 @@
 }
 
 @layer scalar-base {
-  body {
+  body.scalar-app {
     line-height: inherit;
     margin: 0;
   }
 
-  :root {
+  :root, :host {
     --scalar-border-width: .5px;
     --scalar-radius: 3px;
     --scalar-radius-max: 20px;
@@ -180,7 +180,7 @@
   }
 
   @media (max-width: 460px) {
-    :root {
+    :root, :host {
       --scalar-font-size-1: 22px;
       --scalar-font-size-2: 14px;
       --scalar-font-size-3: 12px;
@@ -188,7 +188,7 @@
   }
 
   @media (max-width: 720px) {
-    :root {
+    :root, :host {
       --scalar-heading-1: 24px;
       --scalar-page-description: 20px;
     }
@@ -196,13 +196,13 @@
 
   @media (max-resolution: 1.5x) {
     @supports ((-moz-appearance: none)) {
-      :root {
+      :root, :host {
         --scalar-border-width: 1px;
       }
     }
   }
 
-  :root {
+  :root, :host {
     --scalar-text-decoration: underline;
     --scalar-text-decoration-hover: underline;
   }
@@ -763,8 +763,8 @@
   right: 4px;
 }
 
-.scalar-app .right-1\.25 {
-  right: 5px;
+.scalar-app .right-1\.75 {
+  right: 7px;
 }
 
 .scalar-app .right-2 {
@@ -1190,6 +1190,10 @@
   height: 14px;
 }
 
+.scalar-app .h-4 {
+  height: 16px;
+}
+
 .scalar-app .h-5 {
   height: 20px;
 }
@@ -1294,10 +1298,18 @@
   width: var(--scalar-sidebar-width);
 }
 
+.scalar-app .w-2\/3 {
+  width: 66.6667%;
+}
+
 .scalar-app .w-3 {
   width: 12px;
 }
 
+.scalar-app .w-5 {
+  width: 20px;
+}
+
 .scalar-app .w-6 {
   width: 24px;
 }
@@ -2205,6 +2217,10 @@
   padding-right: 24px;
 }
 
+.scalar-app .pr-7\.25 {
+  padding-right: 29px;
+}
+
 .scalar-app .pr-\[100\%\] {
   padding-right: 100%;
 }
@@ -4505,7 +4521,8 @@ ol > li::marker,
 }
 
     /* Hide elements that don't make sense in the summary */
-img,
+[data-markdown-block],
+    img,
     svg,
     hr,
     pre {
@@ -4637,7 +4654,6 @@ to {
 @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 {
       --tw-font-weight: initial;
-      --tw-border-style: solid;
       --tw-shadow: 0 0 #0000;
       --tw-shadow-color: initial;
       --tw-shadow-alpha: 100%;
@@ -4691,10 +4707,9 @@ to {
 }
 :where(body, dialog) > .scalar-tooltip:before {
   content: "";
+  border: var(--scalar-border-width) solid var(--scalar-border-color);
   z-index: calc(1 * -1);
   border-radius: var(--scalar-radius-lg);
-  border-style: var(--tw-border-style);
-  border-width: var(--scalar-border-width);
   background-color: var(--scalar-tooltip-background);
   --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);
@@ -4720,11 +4735,6 @@ to {
   syntax: "*";
   inherits: false
 }
-@property --tw-border-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
 @property --tw-shadow {
   syntax: "*";
   inherits: false;

package/dist/vue-styles.css

@@ -996,7 +996,8 @@ ol > li::marker,
 }
 
     /* Hide elements that don't make sense in the summary */
-img,
+[data-markdown-block],
+    img,
     svg,
     hr,
     pre {
@@ -1128,7 +1129,6 @@ to {
 @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 {
       --tw-font-weight: initial;
-      --tw-border-style: solid;
       --tw-shadow: 0 0 #0000;
       --tw-shadow-color: initial;
       --tw-shadow-alpha: 100%;
@@ -1182,10 +1182,9 @@ to {
 }
 :where(body, dialog) > .scalar-tooltip:before {
   content: "";
+  border: var(--scalar-border-width) solid var(--scalar-border-color);
   z-index: calc(1 * -1);
   border-radius: var(--scalar-radius-lg);
-  border-style: var(--tw-border-style);
-  border-width: var(--scalar-border-width);
   background-color: var(--scalar-tooltip-background);
   --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);
@@ -1211,11 +1210,6 @@ to {
   syntax: "*";
   inherits: false
 }
-@property --tw-border-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
 @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.31.0",
+  "version": "0.32.0",
   "engines": {
     "node": ">=22"
   },
@@ -216,11 +216,11 @@
     "@floating-ui/vue": "1.1.9",
     "@headlessui/tailwindcss": "^0.2.2",
     "@headlessui/vue": "1.7.23",
-    "@scalar/code-highlight": "0.4.8",
-    "@scalar/helpers": "0.16.2",
-    "@scalar/icons": "0.7.6",
-    "@scalar/themes": "0.19.0",
-    "@scalar/use-hooks": "0.4.19",
+    "@scalar/code-highlight": "0.4.10",
+    "@scalar/helpers": "0.16.4",
+    "@scalar/icons": "0.7.7",
+    "@scalar/themes": "0.19.2",
+    "@scalar/use-hooks": "0.4.21",
     "@vueuse/core": "13.9.0",
     "cva": "1.0.0-beta.4",
     "radix-vue": "^1.9.17",