boltdocs 1.6.0 → 1.7.1

package/dist/client/ssr.css

@@ -4,60 +4,84 @@
 .boltdocs-link-preview {
   position: fixed;
   z-index: 1000;
-  width: 320px;
-  padding: 1rem;
-  background-color: var(--ld-navbar-bg);
-  backdrop-filter: blur(var(--ld-navbar-blur));
-  -webkit-backdrop-filter: blur(var(--ld-navbar-blur));
-  border: 1px solid var(--ld-border-subtle);
-  border-radius: var(--ld-radius-md);
-  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+  width: 260px;
   pointer-events: none;
   opacity: 0;
-  transform: translateY(10px) scale(0.95);
-  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  transform: translateY(8px) scale(0.98);
+  transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
   font-family: var(--ld-font-sans);
 }
 .boltdocs-link-preview.is-visible {
   opacity: 1;
   transform: translateY(0) scale(1);
 }
+.boltdocs-link-preview-content {
+  padding: 0.85rem 1rem;
+  background-color: var(--ld-navbar-bg);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid var(--ld-border-subtle);
+  border-radius: var(--ld-radius-lg);
+  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.2), 0 4px 10px -5px rgba(0, 0, 0, 0.1);
+}
 .boltdocs-link-preview-title {
   display: block;
   font-weight: 600;
-  font-size: 0.95rem;
+  font-size: 0.875rem;
   color: var(--ld-text-main);
-  margin-bottom: 0.5rem;
-  line-height: 1.4;
+  margin-bottom: 0.35rem;
+  line-height: 1.3;
 }
 .boltdocs-link-preview-summary {
   display: block;
-  font-size: 0.85rem;
+  font-size: 0.775rem;
   color: var(--ld-text-muted);
   line-height: 1.5;
   display: -webkit-box;
-  -webkit-line-clamp: 4;
-  line-clamp: 4;
+  -webkit-line-clamp: 3;
+  line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
-[data-theme=dark] .boltdocs-link-preview {
-  background-color: var(--ld-navbar-bg);
-  border-color: var(--ld-border-subtle);
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
+[data-theme=dark] .boltdocs-link-preview-content {
+  background-color: rgba(15, 15, 20, 0.8);
+  border-color: rgba(255, 255, 255, 0.08);
+  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5), 0 8px 16px -8px rgba(0, 0, 0, 0.3);
 }
 [data-theme=dark] .boltdocs-link-preview-title {
-  color: #f8fafc;
+  color: #fff;
 }
 [data-theme=dark] .boltdocs-link-preview-summary {
   color: #94a3b8;
 }
 
+/* src/client/theme/ui/ProgressBar/ProgressBar.css */
+.boltdocs-progress-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  z-index: 1000;
+  pointer-events: none;
+  background: transparent;
+}
+.boltdocs-progress-bar {
+  height: 100%;
+  background:
+    linear-gradient(
+      90deg,
+      var(--ld-color-primary),
+      var(--ld-gradient-to, var(--ld-color-primary)));
+  box-shadow: 0 0 8px var(--ld-color-primary-glow);
+  transition: width 0.1s ease-out;
+}
+
 /* src/client/theme/styles/variables.css */
 :root[data-theme=light],
 :root.theme-light {
   --ld-bg-main: #ffffff;
-  --ld-bg-soft: #f9fafb;
+  --ld-bg-soft: #eeeeee;
   --ld-bg-mute: #f3f4f6;
   --ld-surface: #ffffff;
   --ld-border-subtle: #e5e7eb;
@@ -84,7 +108,7 @@
   --ld-sidebar-bg: transparent;
   --ld-sidebar-blur: 0px;
   --ld-glow-1-bg: var(--ld-color-primary-glow);
-  --ld-glow-2-bg: rgba(59, 130, 246, 0.15);
+  --ld-glow-2-bg: rgba(215, 59, 246, 0.15);
   --ld-ui-btn-primary-bg: var(--ld-btn-primary-bg);
   --ld-ui-btn-primary-text: var(--ld-btn-primary-text);
   --ld-ui-btn-secondary-bg: var(--ld-btn-secondary-bg);
@@ -109,10 +133,10 @@
   --ld-ui-tip-border: rgba(34, 197, 94, 0.3);
 }
 :root {
-  --ld-bg-main: #0a0a0f;
-  --ld-bg-soft: rgba(10, 10, 15, 0.2);
-  --ld-bg-mute: #141420;
-  --ld-surface: #1a1a2e;
+  --ld-bg-main: #000;
+  --ld-bg-soft: #12121272;
+  --ld-bg-mute: #090909;
+  --ld-surface: #1a1a1a;
   --ld-border-subtle: rgba(255, 255, 255, 0.06);
   --ld-border-strong: rgba(255, 255, 255, 0.12);
   --ld-text-main: #e4e4ed;
@@ -130,15 +154,15 @@
   --ld-btn-secondary-text: #e4e4ed;
   --ld-gradient-from: #ffffff;
   --ld-gradient-to: rgba(255, 255, 255, 0.7);
-  --ld-code-bg: #0d0d14;
+  --ld-code-bg: #050505;
   --ld-code-header: #111119;
   --ld-code-text: #d4d4d4;
-  --ld-navbar-bg: rgba(10, 10, 15, 0.2);
+  --ld-navbar-bg: #000;
   --ld-navbar-blur: 12px;
   --ld-sidebar-bg: transparent;
   --ld-sidebar-blur: 0px;
   --ld-glow-1-bg: var(--ld-color-primary-glow);
-  --ld-glow-2-bg: rgba(59, 130, 246, 0.15);
+  --ld-glow-2-bg: rgba(246, 59, 187, 0.15);
   --ld-ui-btn-primary-bg: var(--ld-btn-primary-bg);
   --ld-ui-btn-primary-text: var(--ld-btn-primary-text);
   --ld-ui-btn-secondary-bg: var(--ld-btn-secondary-bg);
@@ -175,6 +199,7 @@
     Consolas,
     monospace;
   --ld-navbar-height: 3.5rem;
+  --ld-header-height: var(--ld-navbar-height);
   --ld-sidebar-width: 14.5rem;
   --ld-toc-width: 13rem;
   --ld-content-max-width: 820px;
@@ -182,6 +207,23 @@
   --ld-radius-md: 8px;
   --ld-radius-lg: 12px;
   --ld-radius-full: 9999px;
+  scrollbar-width: thin;
+  scrollbar-color: var(--ld-border-strong) transparent;
+}
+*::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+*::-webkit-scrollbar-thumb {
+  background-color: var(--ld-border-strong);
+  border-radius: 20px;
+  border: transparent;
+}
+*::-webkit-scrollbar-thumb:hover {
+  background-color: var(--ld-text-dim);
 }
 
 /* src/client/theme/ui/Layout/base.css */
@@ -190,8 +232,14 @@
 *::after {
   box-sizing: border-box;
 }
+html,
 body {
   margin: 0;
+  padding: 0;
+  height: 100%;
+  overflow: hidden;
+}
+body {
   font-family: var(--ld-font-sans);
   background-color: var(--ld-bg-main);
   color: var(--ld-text-main);
@@ -208,7 +256,9 @@ a {
 .boltdocs-layout {
   display: flex;
   flex-direction: column;
-  min-height: 100vh;
+  height: 100vh;
+  width: 100vw;
+  overflow: hidden;
 }
 .boltdocs-main-container {
   display: flex;
@@ -216,7 +266,10 @@ a {
   width: 100%;
   max-width: 1440px;
   margin: 0 auto;
-  padding: 0 1.5rem;
+  padding: 0 0.5rem;
+  height: calc(100vh - var(--ld-header-height));
+  overflow: hidden;
+  align-items: stretch;
 }
 .boltdocs-background-glow {
   position: fixed;
@@ -252,18 +305,22 @@ a {
 /* src/client/theme/ui/Navbar/navbar.css */
 .boltdocs-navbar {
   display: flex;
-  align-items: center;
+  flex-direction: column;
   justify-content: center;
-  height: var(--ld-navbar-height);
-  padding: 0;
   background-color: var(--ld-navbar-bg);
-  backdrop-filter: blur(var(--ld-navbar-blur));
-  -webkit-backdrop-filter: blur(var(--ld-navbar-blur));
   border-bottom: 1px solid var(--ld-border-subtle);
   position: sticky;
   top: 0;
   z-index: 100;
 }
+.boltdocs-navbar.has-tabs {
+  --ld-header-height: 102px !important;
+  height: 102px;
+}
+.boltdocs-navbar:not(.has-tabs) {
+  --ld-header-height: var(--ld-navbar-height);
+  height: var(--ld-navbar-height);
+}
 .navbar-container {
   display: flex;
   align-items: center;
@@ -348,6 +405,15 @@ a {
   font-size: 0.875rem;
   border-radius: var(--ld-radius-md);
   transition: color 0.2s, background-color 0.2s;
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+.navbar-external-icon {
+  display: inline-flex;
+  align-items: center;
+  opacity: 0.6;
+  margin-top: 1px;
 }
 .navbar-links a:hover {
   color: var(--ld-text-main);
@@ -448,6 +514,94 @@ a {
   width: 18px;
   height: 18px;
 }
+.boltdocs-tabs-container {
+  position: relative;
+  background: var(--ld-navbar-bg);
+  padding: 0;
+  height: 46px;
+}
+.boltdocs-tabs-container::after {
+  content: "";
+  position: absolute;
+  bottom: 0px;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: var(--ld-border-subtle);
+  z-index: 10;
+}
+.boltdocs-tabs {
+  max-width: 1440px;
+  margin: 0 auto;
+  display: flex;
+  gap: 2rem;
+  overflow-x: auto;
+  scrollbar-width: none;
+  padding: 0 1.5rem;
+  position: relative;
+  height: 100%;
+}
+.boltdocs-tabs::-webkit-scrollbar {
+  display: none;
+}
+.boltdocs-tab-item {
+  padding: 0.85rem 0;
+  padding-bottom: calc(0.85rem + 1px);
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--ld-text-muted);
+  text-decoration: none;
+  position: relative;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  opacity: 0.7;
+  z-index: 20;
+}
+.boltdocs-tab-item:hover {
+  color: var(--ld-text-main);
+  opacity: 1;
+}
+.tab-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.2s ease;
+}
+.boltdocs-tab-item:hover .tab-icon {
+  transform: translateY(-1px);
+}
+.tab-icon.lucide-icon,
+.tab-icon.svg-icon svg {
+  width: 18px;
+  height: 18px;
+  stroke-width: 2.25px;
+}
+.boltdocs-tab-item.active {
+  color: var(--ld-text-main);
+  font-weight: 600;
+  opacity: 1;
+  text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
+}
+.boltdocs-tab-indicator {
+  position: absolute;
+  bottom: 0px;
+  left: 0;
+  height: 3px;
+  background: var(--ld-color-primary);
+  border-radius: 2px 2px 0 0;
+  box-shadow: 0 -2px 15px var(--ld-color-primary-glow);
+  transition:
+    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+    width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+    opacity 0.3s ease;
+  z-index: 100;
+  pointer-events: none;
+  transform-origin: left;
+}
 
 /* src/client/theme/ui/Sidebar/sidebar.css */
 .boltdocs-sidebar {
@@ -457,64 +611,38 @@ a {
   backdrop-filter: blur(var(--ld-sidebar-blur));
   -webkit-backdrop-filter: blur(var(--ld-sidebar-blur));
   border-right: 1px solid var(--ld-border-subtle);
-  padding: 1rem 0.6rem;
+  padding: 1.5rem 0.6rem;
   overflow-y: auto;
-  position: sticky;
-  top: var(--ld-navbar-height);
-  height: calc(100vh - var(--ld-navbar-height));
-  scrollbar-width: thin;
-  scrollbar-color: var(--ld-bg-mute) transparent;
+  height: 100%;
+  scrollbar-width: none;
   display: flex;
   flex-direction: column;
-  transition:
-    width 0.3s cubic-bezier(0.16, 1, 0.3, 1),
-    padding 0.3s cubic-bezier(0.16, 1, 0.3, 1),
-    opacity 0.2s ease;
-}
-.boltdocs-sidebar > nav {
-  flex: 1;
-}
-.boltdocs-main-container.sidebar-collapsed .boltdocs-sidebar {
-  width: 54px;
-  padding: 1rem 0;
-  border-right: 1px solid var(--ld-border-subtle);
-  opacity: 1;
-  pointer-events: auto;
-  overflow: hidden;
+  transform: translate3d(0, 0, 0);
+  backface-visibility: hidden;
 }
-.sidebar-collapse {
-  width: 100%;
+.sidebar-icon {
+  flex-shrink: 0;
   display: flex;
   align-items: center;
-  justify-content: flex-end;
-  padding: 0 0.75rem 1rem;
-  transition: justify-content 0.3s ease;
-}
-.boltdocs-main-container.sidebar-collapsed .sidebar-collapse {
   justify-content: center;
-  padding: 0 0 1rem;
 }
-.sidebar-collapse-btn {
+.sidebar-icon.lucide-icon,
+.sidebar-icon.svg-icon svg {
   color: var(--ld-text-muted);
-  border: none;
-  box-shadow: none;
-  background-color: transparent;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  border-radius: var(--ld-radius-md);
-  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+  width: 18px;
+  height: 18px;
+  stroke-width: 2px;
+  transition: color 0.2s ease;
 }
-.sidebar-collapse-btn:hover {
-  background-color: var(--ld-bg-mute);
-  color: var(--ld-text-main);
-  transform: scale(1.05);
+.sidebar-link:hover .sidebar-icon.lucide-icon,
+.sidebar-link.active .sidebar-icon.lucide-icon {
+  color: var(--ld-color-primary);
+}
+.boltdocs-sidebar > nav {
+  flex: 1;
 }
 .boltdocs-sidebar::-webkit-scrollbar {
-  width: 4px;
+  display: none;
 }
 .boltdocs-sidebar::-webkit-scrollbar-track {
   background: transparent;
@@ -529,21 +657,26 @@ a {
   margin: 0 0 0.5rem;
 }
 .sidebar-list li {
-  margin-bottom: 1px;
+  margin-bottom: 2px;
 }
 .sidebar-link {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0.45rem 0.75rem;
+  padding: 0.5rem 0.75rem;
   color: var(--ld-text-muted);
   text-decoration: none;
-  border-radius: var(--ld-radius-md);
+  border-radius: 0.75rem;
   font-size: 0.875rem;
   font-weight: 500;
   transition: all 0.2s ease;
   margin: 0.15rem 0;
 }
+.sidebar-link-title-container {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
 .sidebar-link-content {
   display: flex;
   align-items: center;
@@ -551,7 +684,7 @@ a {
   width: 100%;
   gap: 0.5rem;
 }
-.sidebar-link-content > span:first-child {
+.sidebar-link-content > span:last-child {
   flex: 1;
   word-wrap: break-word;
 }
@@ -590,10 +723,12 @@ a {
 }
 .sidebar-link:hover {
   color: var(--ld-color-primary-hover);
+  background-color: var(--ld-bg-soft);
 }
 .sidebar-link.active {
   color: var(--ld-color-primary);
   font-weight: 600;
+  background-color: var(--ld-bg-soft);
 }
 .sidebar-group {
   margin-top: 1.25rem;
@@ -606,25 +741,27 @@ a {
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  padding: 0.35rem 0.75rem;
+  padding: 0.5rem 0.75rem;
   background: none;
   border: none;
   border-radius: var(--ld-radius-md);
-  color: var(--ld-text-dim);
+  color: var(--ld-text-muted);
   font-family: var(--ld-font-sans);
-  font-size: 0.6875rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
+  font-size: 0.8125rem;
+  font-weight: 600;
   cursor: pointer;
   transition: color 0.2s, background-color 0.2s;
 }
+.sidebar-group-header-content {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
 .sidebar-group-header:hover {
-  color: var(--ld-text-muted);
-  background-color: rgba(255, 255, 255, 0.03);
+  color: var(--ld-text-main);
 }
 .sidebar-group-header.active {
-  color: var(--ld-color-primary);
+  color: var(--ld-text-main);
 }
 .sidebar-group-chevron {
   display: inline-flex;
@@ -639,14 +776,23 @@ a {
 .sidebar-group-list {
   list-style: none;
   padding: 0;
-  margin: 0.35rem 0 0;
-  overflow: hidden;
+  margin: 0.35rem 0 0.5rem 0;
+  position: relative;
 }
 .sidebar-group-list li {
-  margin-bottom: 1px;
+  margin-bottom: 2px;
 }
 .sidebar-link-nested {
-  padding-left: 1.25rem;
+  padding-left: 0.75rem;
+}
+.sidebar-group-list {
+  list-style: none;
+  padding: 0;
+  margin: 0.35rem 0 0.5rem 0;
+  position: relative;
+}
+.sidebar-group-list li {
+  margin-bottom: 2px;
 }
 
 /* src/client/theme/ui/OnThisPage/toc.css */
@@ -654,12 +800,11 @@ a {
   width: var(--ld-toc-width);
   flex-shrink: 0;
   padding: 1.5rem 1rem;
-  position: sticky;
-  top: var(--ld-navbar-height);
-  height: calc(100vh - var(--ld-navbar-height));
-  overflow-y: auto;
-  scrollbar-width: thin;
-  scrollbar-color: var(--ld-bg-mute) transparent;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  transform: translate3d(0, 0, 0);
+  backface-visibility: hidden;
 }
 .on-this-page-title {
   font-size: 0.6875rem;
@@ -669,10 +814,25 @@ a {
   color: var(--ld-text-dim);
   margin: 0 0 0.75rem;
   padding-left: 0.75rem;
+  flex-shrink: 0;
 }
 .on-this-page-container {
   position: relative;
   padding-left: 2px;
+  flex: 0 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+.on-this-page-list-container {
+  overflow-y: auto;
+  max-height: 50vh;
+  flex: 0 1 auto;
+  position: relative;
+  scrollbar-width: none;
+}
+.on-this-page-list-container::-webkit-scrollbar {
+  display: none;
 }
 .on-this-page-list {
   list-style: none;
@@ -709,7 +869,7 @@ a {
   border-left: 2px solid transparent;
   margin-left: -2px;
   line-height: 1.4;
-  transition: color 0.2s;
+  transition: color 0.2s, font-weight 0.2s;
 }
 .toc-link:hover {
   color: var(--ld-text-main);
@@ -719,9 +879,10 @@ a {
   font-weight: 500;
 }
 .toc-help {
-  margin-top: 2rem;
+  margin-top: 1.5rem;
   padding-top: 1rem;
   border-top: 1px solid var(--ld-border-subtle);
+  flex-shrink: 0;
 }
 .toc-help-title {
   font-size: 0.6875rem;
@@ -752,8 +913,8 @@ a {
   transition: color 0.2s, background-color 0.2s;
 }
 .toc-help-link:hover {
-  color: var(--ld-text-muted);
-  background-color: rgba(255, 255, 255, 0.03);
+  color: var(--ld-text-main);
+  background-color: var(--ld-bg-mute);
 }
 .toc-help-link svg {
   width: 14px;
@@ -947,14 +1108,18 @@ a {
 /* src/client/theme/styles/markdown.css */
 .boltdocs-content {
   flex: 1;
-  padding: 2rem 2.5rem 2.5rem;
+  padding: 2rem 2.5rem 6rem;
   max-width: var(--ld-content-max-width);
   margin: 0 auto;
   min-width: 0;
+  height: 100%;
+  overflow-y: auto;
+  scrollbar-width: none;
+  scroll-behavior: smooth;
   transition: max-width 0.3s cubic-bezier(0.16, 1, 0.3, 1), padding 0.3s ease;
 }
-.boltdocs-main-container.sidebar-collapsed .boltdocs-content {
-  max-width: 100%;
+.boltdocs-content::-webkit-scrollbar {
+  display: none;
 }
 .boltdocs-breadcrumbs {
   margin-bottom: 1.5rem;
@@ -1715,6 +1880,113 @@ a {
 .ld-file-tree__icon--spacer {
   width: 14px;
 }
+.ld-table-container {
+  margin: 1.5rem 0;
+  border: 1px solid var(--ld-border-subtle);
+  border-radius: var(--ld-radius-lg);
+  overflow: hidden;
+  background: var(--ld-bg-soft);
+  display: flex;
+  flex-direction: column;
+}
+.ld-table-wrapper {
+  overflow-x: auto;
+  scrollbar-width: thin;
+}
+.ld-table {
+  width: 100%;
+  border-collapse: collapse;
+  text-align: left;
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+.ld-table thead {
+  background: var(--ld-bg-mute);
+  border-bottom: 1px solid var(--ld-border-subtle);
+}
+.ld-table th {
+  padding: 0.75rem 1rem;
+  font-weight: 600;
+  color: var(--ld-text-main);
+  font-size: 0.8125rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  white-space: nowrap;
+}
+.ld-table-header--sortable {
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+.ld-table-header--sortable:hover {
+  background-color: var(--ld-bg-soft);
+}
+.ld-table-header-content {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.ld-table-sort-icon {
+  opacity: 0.8;
+  color: var(--ld-color-primary);
+  transition: opacity 0.2s;
+}
+.ld-table-sort-icon--hidden {
+  opacity: 0;
+}
+.ld-table-header--sortable:hover .ld-table-sort-icon--hidden {
+  opacity: 0.3;
+}
+.ld-table td {
+  padding: 0.875rem 1rem;
+  color: var(--ld-text-muted);
+  border-bottom: 1px solid var(--ld-border-subtle);
+}
+.ld-table tr:last-child td {
+  border-bottom: none;
+}
+.ld-table code {
+  font-size: 0.8rem;
+  padding: 0.2rem 0.4rem;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 4px;
+}
+.ld-table-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  background: var(--ld-bg-mute);
+  border-top: 1px solid var(--ld-border-subtle);
+  font-size: 0.75rem;
+  color: var(--ld-text-dim);
+}
+.ld-table-pagination-controls {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+.ld-table-pagination-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: var(--ld-radius-md);
+  border: 1px solid var(--ld-border-subtle);
+  background: var(--ld-bg-soft);
+  color: var(--ld-text-muted);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+.ld-table-pagination-btn:hover:not(:disabled) {
+  background: var(--ld-bg-mute);
+  color: var(--ld-text-main);
+  border-color: var(--ld-border-strong);
+}
+.ld-table-pagination-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
 
 /* src/client/theme/components/PackageManagerTabs/pkg-tabs.css */
 .pkg-tabs-wrapper {