@scalar/sidebar 0.8.15 → 0.8.17

package/dist/helpers/scroll-sidebar-to-top.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-sidebar-to-top.d.ts","sourceRoot":"","sources":["../../src/helpers/scroll-sidebar-to-top.ts"],"names":[],"mappings":"AAiDA;;GAEG;AACH,eAAO,MAAM,kBAAkB,GAAI,IAAI,MAAM,EAAE,YAAW,MAAkC,KAAG,IAoB9F,CAAA"}
+{"version":3,"file":"scroll-sidebar-to-top.d.ts","sourceRoot":"","sources":["../../src/helpers/scroll-sidebar-to-top.ts"],"names":[],"mappings":"AAiDA;;GAEG;AACH,eAAO,MAAM,kBAAkB,GAAI,IAAI,MAAM,EAAE,YAAW,MAAkC,KAAG,IAmB9F,CAAA"}

package/dist/helpers/scroll-sidebar-to-top.js

@@ -40,10 +40,7 @@ var scrollSidebarToTop = (id, offsetTop = DEFAULT_SCROLL_OFFSET_TOP) => {
 	const scroller = element?.closest(".custom-scroll, .custom-scrollbar") ?? null;
 	if (!element || !scroller) return;
 	const targetTop = getTopRelativeToScroller(getMeasurableElement(element), scroller) + getHeadingOffset(element) - offsetTop;
-	scroller.scrollTo({
-		top: targetTop > 0 ? targetTop : 0,
-		behavior: "smooth"
-	});
+	scroller.scrollTo({ top: targetTop > 0 ? targetTop : 0 });
 };
 //#endregion
 export { scrollSidebarToTop };

package/dist/helpers/scroll-sidebar-to-top.js.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-sidebar-to-top.js","names":[],"sources":["../../src/helpers/scroll-sidebar-to-top.ts"],"sourcesContent":["const DEFAULT_SCROLL_OFFSET_TOP = 100\n\n/**\n * Returns the element that should be used for vertical position measurement.\n */\nconst getMeasurableElement = (element: HTMLElement): HTMLElement => {\n  if (window.getComputedStyle(element).display !== 'contents') {\n    return element\n  }\n\n  /**\n   * `display: contents` does not render a layout box, so use the first child with\n   * a measurable offset to keep the scroll target aligned with what users see.\n   */\n  for (const child of element.children) {\n    if (child instanceof HTMLElement && child.offsetParent !== null) {\n      return child\n    }\n  }\n\n  return element\n}\n\n/**\n * Adds extra offset for heading rows so the selected item stays visible below labels.\n */\nconst getHeadingOffset = (element: HTMLElement): number => {\n  if (element.dataset.sidebarType !== 'heading') {\n    return 0\n  }\n\n  return element.querySelector<HTMLElement>('.sidebar-heading')?.offsetHeight ?? 0\n}\n\n/**\n * Computes an element top position relative to the provided scroll container.\n */\nconst getTopRelativeToScroller = (element: HTMLElement, scroller: HTMLElement): number => {\n  let top = element.offsetTop\n  let currentOffsetParent = element.offsetParent as HTMLElement | null\n\n  while (currentOffsetParent && currentOffsetParent !== scroller) {\n    top += currentOffsetParent.offsetTop\n    currentOffsetParent = currentOffsetParent.offsetParent as HTMLElement | null\n  }\n\n  return top\n}\n\n/**\n * Scrolls the sidebar container so the requested item appears near the top.\n */\nexport const scrollSidebarToTop = (id: string, offsetTop: number = DEFAULT_SCROLL_OFFSET_TOP): void => {\n  if (typeof window === 'undefined') {\n    return\n  }\n\n  const element = document.querySelector<HTMLElement>(`[data-sidebar-id=\"${id}\"]`)\n  const scroller = element?.closest<HTMLElement>('.custom-scroll, .custom-scrollbar') ?? null\n  if (!element || !scroller) {\n    return\n  }\n\n  const measurableElement = getMeasurableElement(element)\n  const itemTop = getTopRelativeToScroller(measurableElement, scroller)\n  const itemOffset = getHeadingOffset(element)\n  const targetTop = itemTop + itemOffset - offsetTop\n\n  scroller.scrollTo({\n    top: targetTop > 0 ? targetTop : 0,\n    behavior: 'smooth',\n  })\n}\n"],"mappings":";AAAA,IAAM,4BAA4B;;;;AAKlC,IAAM,wBAAwB,YAAsC;AAClE,KAAI,OAAO,iBAAiB,QAAQ,CAAC,YAAY,WAC/C,QAAO;;;;;AAOT,MAAK,MAAM,SAAS,QAAQ,SAC1B,KAAI,iBAAiB,eAAe,MAAM,iBAAiB,KACzD,QAAO;AAIX,QAAO;;;;;AAMT,IAAM,oBAAoB,YAAiC;AACzD,KAAI,QAAQ,QAAQ,gBAAgB,UAClC,QAAO;AAGT,QAAO,QAAQ,cAA2B,mBAAmB,EAAE,gBAAgB;;;;;AAMjF,IAAM,4BAA4B,SAAsB,aAAkC;CACxF,IAAI,MAAM,QAAQ;CAClB,IAAI,sBAAsB,QAAQ;AAElC,QAAO,uBAAuB,wBAAwB,UAAU;AAC9D,SAAO,oBAAoB;AAC3B,wBAAsB,oBAAoB;;AAG5C,QAAO;;;;;AAMT,IAAa,sBAAsB,IAAY,YAAoB,8BAAoC;AACrG,KAAI,OAAO,WAAW,YACpB;CAGF,MAAM,UAAU,SAAS,cAA2B,qBAAqB,GAAG,IAAI;CAChF,MAAM,WAAW,SAAS,QAAqB,oCAAoC,IAAI;AACvF,KAAI,CAAC,WAAW,CAAC,SACf;CAMF,MAAM,YAFU,yBADU,qBAAqB,QAAQ,EACK,SAAS,GAClD,iBAAiB,QAAQ,GACH;AAEzC,UAAS,SAAS;EAChB,KAAK,YAAY,IAAI,YAAY;EACjC,UAAU;EACX,CAAC"}
+{"version":3,"file":"scroll-sidebar-to-top.js","names":[],"sources":["../../src/helpers/scroll-sidebar-to-top.ts"],"sourcesContent":["const DEFAULT_SCROLL_OFFSET_TOP = 100\n\n/**\n * Returns the element that should be used for vertical position measurement.\n */\nconst getMeasurableElement = (element: HTMLElement): HTMLElement => {\n  if (window.getComputedStyle(element).display !== 'contents') {\n    return element\n  }\n\n  /**\n   * `display: contents` does not render a layout box, so use the first child with\n   * a measurable offset to keep the scroll target aligned with what users see.\n   */\n  for (const child of element.children) {\n    if (child instanceof HTMLElement && child.offsetParent !== null) {\n      return child\n    }\n  }\n\n  return element\n}\n\n/**\n * Adds extra offset for heading rows so the selected item stays visible below labels.\n */\nconst getHeadingOffset = (element: HTMLElement): number => {\n  if (element.dataset.sidebarType !== 'heading') {\n    return 0\n  }\n\n  return element.querySelector<HTMLElement>('.sidebar-heading')?.offsetHeight ?? 0\n}\n\n/**\n * Computes an element top position relative to the provided scroll container.\n */\nconst getTopRelativeToScroller = (element: HTMLElement, scroller: HTMLElement): number => {\n  let top = element.offsetTop\n  let currentOffsetParent = element.offsetParent as HTMLElement | null\n\n  while (currentOffsetParent && currentOffsetParent !== scroller) {\n    top += currentOffsetParent.offsetTop\n    currentOffsetParent = currentOffsetParent.offsetParent as HTMLElement | null\n  }\n\n  return top\n}\n\n/**\n * Scrolls the sidebar container so the requested item appears near the top.\n */\nexport const scrollSidebarToTop = (id: string, offsetTop: number = DEFAULT_SCROLL_OFFSET_TOP): void => {\n  if (typeof window === 'undefined') {\n    return\n  }\n\n  const element = document.querySelector<HTMLElement>(`[data-sidebar-id=\"${id}\"]`)\n  const scroller = element?.closest<HTMLElement>('.custom-scroll, .custom-scrollbar') ?? null\n  if (!element || !scroller) {\n    return\n  }\n\n  const measurableElement = getMeasurableElement(element)\n  const itemTop = getTopRelativeToScroller(measurableElement, scroller)\n  const itemOffset = getHeadingOffset(element)\n  const targetTop = itemTop + itemOffset - offsetTop\n\n  scroller.scrollTo({\n    top: targetTop > 0 ? targetTop : 0,\n  })\n}\n"],"mappings":";AAAA,IAAM,4BAA4B;;;;AAKlC,IAAM,wBAAwB,YAAsC;AAClE,KAAI,OAAO,iBAAiB,QAAQ,CAAC,YAAY,WAC/C,QAAO;;;;;AAOT,MAAK,MAAM,SAAS,QAAQ,SAC1B,KAAI,iBAAiB,eAAe,MAAM,iBAAiB,KACzD,QAAO;AAIX,QAAO;;;;;AAMT,IAAM,oBAAoB,YAAiC;AACzD,KAAI,QAAQ,QAAQ,gBAAgB,UAClC,QAAO;AAGT,QAAO,QAAQ,cAA2B,mBAAmB,EAAE,gBAAgB;;;;;AAMjF,IAAM,4BAA4B,SAAsB,aAAkC;CACxF,IAAI,MAAM,QAAQ;CAClB,IAAI,sBAAsB,QAAQ;AAElC,QAAO,uBAAuB,wBAAwB,UAAU;AAC9D,SAAO,oBAAoB;AAC3B,wBAAsB,oBAAoB;;AAG5C,QAAO;;;;;AAMT,IAAa,sBAAsB,IAAY,YAAoB,8BAAoC;AACrG,KAAI,OAAO,WAAW,YACpB;CAGF,MAAM,UAAU,SAAS,cAA2B,qBAAqB,GAAG,IAAI;CAChF,MAAM,WAAW,SAAS,QAAqB,oCAAoC,IAAI;AACvF,KAAI,CAAC,WAAW,CAAC,SACf;CAMF,MAAM,YAFU,yBADU,qBAAqB,QAAQ,EACK,SAAS,GAClD,iBAAiB,QAAQ,GACH;AAEzC,UAAS,SAAS,EAChB,KAAK,YAAY,IAAI,YAAY,GAClC,CAAC"}

package/dist/style.css

@@ -1604,22 +1604,22 @@
   display: none;
 }
 
-.scalar-modal-layout[data-v-c36b47da] {
-  animation: .3s ease-in-out forwards fadein-layout-c36b47da;
+.scalar-modal-layout[data-v-5bb1dcc2] {
+  animation: .3s ease-in-out forwards fadein-layout-5bb1dcc2;
 }
 
-.scalar-modal[data-v-c36b47da] {
+.scalar-modal[data-v-5bb1dcc2] {
   box-shadow: var(--scalar-shadow-2);
-  animation: .3s ease-in-out .1s forwards fadein-modal-c36b47da;
+  animation: .3s ease-in-out .1s forwards fadein-modal-5bb1dcc2;
   transform: translate3d(0, 10px, 0);
 }
 
-.scalar-modal-layout-full[data-v-c36b47da] {
+.scalar-modal-layout-full[data-v-5bb1dcc2] {
   opacity: 1 !important;
   background: none !important;
 }
 
-.modal-content-search .modal-body[data-v-c36b47da] {
+.modal-content-search .modal-body[data-v-5bb1dcc2] {
   flex-direction: column;
   max-height: 440px;
   padding: 0;
@@ -1628,13 +1628,13 @@
 }
 
 @media (max-width: 720px) and (max-height: 480px) {
-  .scalar-modal-layout .scalar-modal[data-v-c36b47da] {
+  .scalar-modal-layout .scalar-modal[data-v-5bb1dcc2] {
     max-height: 90svh;
     margin-top: 5svh;
   }
 }
 
-@keyframes fadein-layout-c36b47da {
+@keyframes fadein-layout-5bb1dcc2 {
   0% {
     opacity: 0;
   }
@@ -1644,7 +1644,7 @@
   }
 }
 
-@keyframes fadein-modal-c36b47da {
+@keyframes fadein-modal-5bb1dcc2 {
   0% {
     opacity: 0;
     transform: translate3d(0, 10px, 0);
@@ -1656,10 +1656,10 @@
   }
 }
 
-.full-size-styles[data-v-c36b47da] {
+.full-size-styles[data-v-5bb1dcc2] {
   margin: initial;
   border-right: var(--scalar-border-width) solid var(--scalar-border-color);
-  animation: .3s ease-in-out forwards fadein-layout-c36b47da;
+  animation: .3s ease-in-out forwards fadein-layout-5bb1dcc2;
   left: 0;
   transform: translate3d(0, 0, 0);
   background-color: var(--scalar-background-1) !important;
@@ -1671,12 +1671,12 @@
 }
 
 @media (min-width: 800px) {
-  .full-size-styles[data-v-c36b47da] {
+  .full-size-styles[data-v-5bb1dcc2] {
     width: 50dvw !important;
   }
 }
 
-.full-size-styles[data-v-c36b47da]:after {
+.full-size-styles[data-v-5bb1dcc2]:after {
   content: "";
   width: 50dvw;
   height: 100dvh;
@@ -2228,10 +2228,18 @@
   right: 10px;
 }
 
+.scalar-app .bottom-4 {
+  bottom: 16px;
+}
+
 .scalar-app .left-0 {
   left: 0;
 }
 
+.scalar-app .left-1\/2 {
+  left: 50%;
+}
+
 .scalar-app .left-2 {
   left: 8px;
 }
@@ -2348,6 +2356,10 @@
   margin: -6px;
 }
 
+.scalar-app .-m-2 {
+  margin: -8px;
+}
+
 .scalar-app .-m-px {
   margin: -1px;
 }
@@ -2547,11 +2559,6 @@
   height: 14px;
 }
 
-.scalar-app .size-3\.25 {
-  width: 13px;
-  height: 13px;
-}
-
 .scalar-app .size-4 {
   width: 16px;
   height: 16px;
@@ -2768,6 +2775,10 @@
   width: var(--scalar-border-width);
 }
 
+.scalar-app .w-content {
+  width: 720px;
+}
+
 .scalar-app .w-dvw {
   width: 100dvw;
 }
@@ -2816,6 +2827,10 @@
   max-width: inherit;
 }
 
+.scalar-app .max-w-screen-padded-4 {
+  max-width: calc(100vw - 32px);
+}
+
 .scalar-app .max-w-xs {
   max-width: 320px;
 }
@@ -2848,6 +2863,11 @@
   flex-shrink: 0;
 }
 
+.scalar-app .-translate-x-1\/2 {
+  --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
+  translate: var(--tw-translate-x) var(--tw-translate-y);
+}
+
 .scalar-app .-translate-x-full {
   --tw-translate-x: -100%;
   translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -2893,6 +2913,11 @@
   translate: var(--tw-translate-x) var(--tw-translate-y);
 }
 
+.scalar-app .translate-y-\[200\%\] {
+  --tw-translate-y: 200%;
+  translate: var(--tw-translate-x) var(--tw-translate-y);
+}
+
 .scalar-app .scale-0 {
   --tw-scale-x: 0%;
   --tw-scale-y: 0%;
@@ -3852,6 +3877,11 @@
   transition-duration: .3s;
 }
 
+.scalar-app .duration-400 {
+  --tw-duration: .4s;
+  transition-duration: .4s;
+}
+
 .scalar-app .ease-in {
   --tw-ease: var(--ease-in);
   transition-timing-function: var(--ease-in);
@@ -3867,6 +3897,29 @@
   transition-timing-function: var(--ease-out);
 }
 
+.scalar-app .ease-spring {
+  --tw-ease: linear(0,
+    .008 1.1%,
+    .034 2.3%,
+    .134 4.9%,
+    .264 7.3%,
+    .683 14.3%,
+    .797 16.5%,
+    .89 18.6%,
+    .967 20.7%,
+    1.027 22.8%,
+    1.073 25%,
+    1.104 27.3%,
+    1.123 30.6%,
+    1.119 34.3%,
+    1.018 49.5%,
+    .988 58.6%,
+    .985 65.2%,
+    1 84.5%,
+    1);
+  transition-timing-function: linear(0, .008 1.1%, .034 2.3%, .134 4.9%, .264 7.3%, .683 14.3%, .797 16.5%, .89 18.6%, .967 20.7%, 1.027 22.8%, 1.073 25%, 1.104 27.3%, 1.123 30.6%, 1.119 34.3%, 1.018 49.5%, .988 58.6%, .985 65.2%, 1 84.5%, 1);
+}
+
 .scalar-app .outline-none {
   --tw-outline-style: none;
   outline-style: none;

package/package.json

@@ -10,12 +10,12 @@
     "url": "git+https://github.com/scalar/scalar.git",
     "directory": "packages/sidebar"
   },
-  "version": "0.8.15",
+  "version": "0.8.17",
   "engines": {
     "node": ">=22"
   },
   "type": "module",
-  "main": "./dist/index.cjs",
+  "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -30,13 +30,13 @@
     "dist"
   ],
   "dependencies": {
-    "vue": "^3.5.26",
-    "@scalar/components": "0.21.1",
-    "@scalar/icons": "0.7.0",
-    "@scalar/themes": "0.15.1",
-    "@scalar/use-hooks": "0.4.1",
-    "@scalar/workspace-store": "0.41.2",
-    "@scalar/helpers": "0.4.2"
+    "vue": "^3.5.30",
+    "@scalar/components": "0.21.3",
+    "@scalar/helpers": "0.4.3",
+    "@scalar/themes": "0.15.2",
+    "@scalar/workspace-store": "0.43.0",
+    "@scalar/use-hooks": "0.4.2",
+    "@scalar/icons": "0.7.2"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.2.0",