@kupola/kupola 1.9.7 → 1.9.9

package/dist/kupola.css

@@ -406,7 +406,7 @@
   --bg-layout-2: var(--bg-overlay-l1);
   --border-1: var(--border-neutral-l1);
 }
-
+
 /* ===== Dark Theme (Default) ===== */
 
 :root {
@@ -747,7 +747,7 @@
   .ds-input--prefix {
     background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239599A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'></circle><line x1='21' y1='21' x2='16.65' y2='16.65'></line></svg>") !important;
   }
-}
+}
 /* ===== Light Theme ===== */
 
 [data-theme="light"] {
@@ -1045,7 +1045,7 @@
   .ds-input--prefix {
     background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666B75' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'></circle><line x1='21' y1='21' x2='16.65' y2='16.65'></line></svg>") !important;
   }
-}
+}
 /* ===== Brand Color Themes ===== */
 /* 仅替换品牌绿色系，其他颜色保持不变 */
 
@@ -1345,7 +1345,7 @@
   --bg-brand: #106898;
   --bg-brand-hover: #0E5C87;
   --bg-brand-popup: rgba(16, 104, 152, 0.15);
-}
+}
 /*
  * scaffold.css - Layout, reset, typography utilities, shared atoms
  * Provides the page chrome consumed by preview/component-*.html and
@@ -1353,6 +1353,47 @@
  */
 * { box-sizing: border-box; margin: 0; padding: 0; }
 
+/* ===== Theme Loading ===== */
+body:not(.theme-initialized) > :not(.ds-theme-loader) {
+  opacity: 0 !important;
+}
+
+.ds-theme-loader {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg-base-default);
+  z-index: 9999;
+  transition: opacity 0.3s ease;
+}
+
+body.theme-initialized .ds-theme-loader {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.ds-theme-loader__spinner {
+  width: 32px;
+  height: 32px;
+  border: 2px solid var(--border-neutral-l2);
+  border-top-color: var(--bg-brand);
+  border-radius: 50%;
+  animation: ds-spin 0.8s linear infinite;
+}
+
+.ds-theme-loader__text {
+  margin-top: 16px;
+  color: var(--text-secondary);
+  font-size: 14px;
+}
+
+@keyframes ds-spin {
+  to { transform: rotate(360deg); }
+}
+
 html, body {
   background: var(--bg-base-default);
   color: var(--text-default);
@@ -1490,7 +1531,7 @@ code, kbd, samp, pre {
   font-variant-numeric: tabular-nums;
   font-feature-settings: "tnum" 1, "lnum" 1;
 }
-
+
 /* ===== Dashboard Layout ===== */
 
 html.ds-dashboard-page,
@@ -1858,7 +1899,7 @@ body.ds-dashboard-page {
   .ds-dashboard__footer {
     padding-bottom: calc(env(safe-area-inset-bottom) + 4px);
   }
-}
+}
 /* ═══════════════════════════════════════════════════════════════
    components.css — Design System Component Definitions
    Auto-extracted from preview/component-*.html
@@ -3435,7 +3476,7 @@ body.ds-dashboard-page {
   font-size: var(--body-xs-font-size);
   color: var(--text-tertiary);
 }
-
+
 /* Activity Rail */
 .ds-activityrail {
   display: flex;
@@ -7836,7 +7877,7 @@ body.ds-dashboard-page {
 
 .ds-tree--compact .ds-tree__item {
   padding: var(--spacer-2) var(--spacer-8);
-}
+}
 /* ===== Component States ===== */
 
 /* Loading State */
@@ -8152,7 +8193,7 @@ body.ds-dashboard-page {
   100% {
     box-shadow: 0 0 0 0 rgba(50, 240, 140, 0);
   }
-}
+}
 /* ===== Utility Classes ===== */
 
 /* Spacing */
@@ -8486,7 +8527,7 @@ body.ds-dashboard-page {
 .ds-z-tooltip { z-index: var(--z-index-tooltip, 2100); }
 .ds-z-message { z-index: var(--z-index-message, 3000); }
 .ds-z-notification { z-index: var(--z-index-notification, 3100); }
-.ds-z-loading { z-index: var(--z-index-loading, 5000); }
+.ds-z-loading { z-index: var(--z-index-loading, 5000); }
 /* Responsive Design */
 /* Breakpoints: Phone < 768px, Pad 768px - 1024px, PC > 1024px */
 
@@ -9183,7 +9224,7 @@ body.ds-dashboard-page {
   .ds-btn--sm {
     padding: 2px 6px;
   }
-}
+}
 /* Accessibility (a11y) */
 
 /* Focus styles */
@@ -9302,7 +9343,7 @@ body.ds-dashboard-page {
   content: '';
   display: table;
   clear: both;
-}
+}
 /* Animations and Transitions */
 
 /* Button hover and active */
@@ -9526,7 +9567,7 @@ body.ds-dashboard-page {
 .focus-ring:focus-visible {
   outline: 2px solid var(--bg-brand);
   outline-offset: 2px;
-}
+}
 /* ================================================================
    KupolaTable Styles
    ================================================================ */
@@ -9601,4 +9642,4 @@ body.ds-dashboard-page {
 .kupola-table-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
 .kupola-table-page-ellipsis { padding: 0 4px; color: var(--text-tertiary); }
 .kupola-table-page-size { padding: 4px 8px; border: 1px solid var(--border-neutral-l2); border-radius: 4px; font-size: 13px; }
-.kupola-table-page-info { color: var(--text-tertiary); font-size: 13px; }
+.kupola-table-page-info { color: var(--text-tertiary); font-size: 13px; }