@kupola/kupola 1.4.3 → 1.4.4

package/README.md

@@ -6,7 +6,7 @@
 
 [![License](https://img.shields.io/github/license/kupola-cn/kupola)](https://github.com/kupola-cn/kupola/blob/main/LICENSE)
 [![npm](https://img.shields.io/npm/v/@kupola/kupola)](https://www.npmjs.com/package/@kupola/kupola)
-[![bundle size (gzip)](https://img.shields.io/badge/gzip-104%20KB-blue)](https://bundlephobia.com/package/@kupola/kupola)
+[![bundle size (gzip)](https://img.shields.io/badge/gzip-75%20KB-blue)](https://bundlephobia.com/package/@kupola/kupola)
 [![GitHub stars](https://img.shields.io/github/stars/kupola-cn/kupola)](https://github.com/kupola-cn/kupola/stargazers)
 
 **HTMX** (data fetching) + **Alpine.js** (declarative interaction) + **Bootstrap** (component richness) — in one zero-dependency package.
@@ -18,6 +18,11 @@
 - [English](#english)
 - [中文](#中文)
 
+## 📖 Documentation
+
+- [**用户文档**](https://kupola-cn.github.io/kupola/docs/index.html) — 安装、组件速查、核心 API、主题、后端集成
+- [**架构文档**](https://kupola-cn.github.io/kupola/docs/architecture.html) — 内部引擎、模块依赖、构建管线、贡献指南
+
 ---
 
 <a id="english"></a>
@@ -32,7 +37,7 @@
 - **Responsive** — PC, Pad, and Phone
 - **Accessible** — WCAG AA compliant
 - **Form Validation** — Built-in validation with custom rules
-- **Zero Dependencies** — Pure HTML/CSS/JavaScript, ~104 KB gzipped
+- **Zero Dependencies** — Pure HTML/CSS/JavaScript, ~75 KB minified gzipped
 - **Backend Agnostic** — Works with Flask, Django, FastAPI, Gin, Spring Boot, ASP.NET, Express, Rails, Actix-web, and any backend that outputs HTML
 - **TypeScript Ready** — Full type definitions included
 
@@ -40,6 +45,16 @@
 
 ## 🚀 Quick Start
 
+### Scaffold (recommended)
+
+Create a fully configured Kupola project in seconds:
+
+```bash
+npx @kupola/create-kupola
+```
+
+Choose from **Static**, **Flask**, **FastAPI**, or **Gin** — with dark theme, brand colors, and example pages out of the box.
+
 ### npm
 
 ```bash
@@ -181,7 +196,7 @@ Chrome, Firefox, Safari, Edge (latest)
 - **响应式** — 适配 PC、平板、手机
 - **无障碍** — 符合 WCAG AA 标准
 - **表单验证** — 内置验证系统，支持自定义规则
-- **零依赖** — 纯 HTML/CSS/JavaScript，gzip 后约 104 KB
+- **零依赖** — 纯 HTML/CSS/JavaScript，minified gzip 约 75 KB
 - **后端无关** — 支持 Flask、Django、FastAPI、Gin、Spring Boot、ASP.NET、Express、Rails、Actix-web 等任何输出 HTML 的后端
 - **TypeScript 支持** — 完整类型定义
 
@@ -189,6 +204,16 @@ Chrome, Firefox, Safari, Edge (latest)
 
 ## 🚀 快速开始
 
+### 脚手架（推荐）
+
+一行命令创建配置好的 Kupola 项目：
+
+```bash
+npx @kupola/create-kupola
+```
+
+支持 **Static**、**Flask**、**FastAPI**、**Gin** 四种后端模板，自带暗色主题、品牌色和示例页面。
+
 ### npm 安装
 
 ```bash

package/css/components-ext.css

@@ -3406,7 +3406,7 @@
   justify-content: center;
 }
 
-.ds-image-list__item.is-selected::after::before {
+.ds-image-list__item.is-selected::after {
   content: '';
   width: 6px;
   height: 3px;

package/dist/css/components-ext.css

@@ -1403,6 +1403,42 @@
   border-radius: 50%;
 }
 
+/* IMP-009: Skeleton size variants */
+.ds-skeleton--text {
+  height: 14px;
+  margin-bottom: var(--spacer-8);
+}
+
+.ds-skeleton--heading {
+  height: 24px;
+  width: 40%;
+  margin-bottom: var(--spacer-12);
+}
+
+.ds-skeleton--block {
+  height: 200px;
+}
+
+.ds-skeleton--avatar {
+  width: 40px;
+  height: 40px;
+}
+
+.ds-skeleton--button {
+  height: 28px;
+  width: 80px;
+}
+
+.ds-skeleton--input {
+  height: 28px;
+  width: 100%;
+}
+
+.ds-skeleton--table {
+  height: 200px;
+  width: 100%;
+}
+
 @keyframes ds-skeleton-pulse {
   0%, 100% { opacity: 1; }
   50% { opacity: 0.5; }
@@ -2661,6 +2697,17 @@
   right: 2px;
 }
 
+/* IMP-006: Badge info variant */
+.ds-badge--info {
+  background: var(--status-info-surface-l1);
+  color: var(--status-info-default);
+}
+
+.ds-badge--neutral {
+  background: var(--bg-overlay-l2);
+  color: var(--text-tertiary);
+}
+
 /* ── Tooltip ──────────────────────────────────────────────── */
 [data-tooltip] {
   position: relative;
@@ -3359,7 +3406,7 @@
   justify-content: center;
 }
 
-.ds-image-list__item.is-selected::after::before {
+.ds-image-list__item.is-selected::after {
   content: '';
   width: 6px;
   height: 3px;
@@ -4162,4 +4209,114 @@
 
 .ds-virtual-list--horizontal .ds-virtual-list__item:last-child {
   border-right: none;
+}
+
+/* ── Tree (IMP-008) ──────────────────────────────────────── */
+.ds-tree {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  font-size: var(--body-sm-font-size, 13px);
+}
+
+.ds-tree ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.ds-tree__item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacer-6);
+  padding: var(--spacer-4) var(--spacer-8);
+  border-radius: var(--radius-4);
+  cursor: default;
+  transition: background-color 0.12s ease;
+  user-select: none;
+}
+
+.ds-tree__item:hover {
+  background-color: var(--bg-overlay-l1);
+}
+
+.ds-tree__item.is-selected {
+  background-color: var(--bg-brand-popup);
+}
+
+.ds-tree__toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  cursor: pointer;
+  color: var(--icon-secondary);
+  transition: transform 0.15s ease;
+  background: none;
+  border: none;
+  padding: 0;
+}
+
+.ds-tree__toggle::before {
+  content: '';
+  display: block;
+  width: 0;
+  height: 0;
+  border-left: 5px solid currentColor;
+  border-top: 3.5px solid transparent;
+  border-bottom: 3.5px solid transparent;
+}
+
+.ds-tree__toggle.is-open {
+  transform: rotate(90deg);
+}
+
+.ds-tree__toggle.is-leaf {
+  visibility: hidden;
+}
+
+.ds-tree__checkbox {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+  accent-color: var(--bg-brand);
+  cursor: pointer;
+}
+
+.ds-tree__icon {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  color: var(--icon-secondary);
+}
+
+.ds-tree__label {
+  flex: 1;
+  color: var(--text-default);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ds-tree__badge {
+  font-size: var(--body-xs-font-size, 10px);
+  color: var(--text-tertiary);
+  margin-left: auto;
+}
+
+.ds-tree__children {
+  padding-left: var(--spacer-20);
+  border-left: 1px solid var(--border-neutral-l1);
+  margin-left: 7px;
+}
+
+/* Tree line guides */
+.ds-tree--lined .ds-tree__children {
+  border-left-color: var(--border-neutral-l1);
+}
+
+.ds-tree--compact .ds-tree__item {
+  padding: var(--spacer-2) var(--spacer-8);
 }

package/dist/css/components.css

@@ -540,6 +540,45 @@
     .ds-input.is-error { border-color: var(--bg-error-default); }
     .ds-input.is-success { border-color: var(--bg-success-default); }
     
+        /* BUG-003 fix: ensure <select class="ds-input"> matches <input> height/padding */
+        select.ds-input,
+        .ds-input select {
+          height: 36px;
+          padding: 0 var(--spacer-24) 0 var(--spacer-12);
+          appearance: none;
+          -webkit-appearance: none;
+          -moz-appearance: none;
+          background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239599A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
+          background-repeat: no-repeat;
+          background-position: right 8px center;
+          background-size: 12px;
+          cursor: pointer;
+          font: inherit;
+          color: var(--text-default);
+          background-color: var(--bg-overlay-l1);
+          line-height: 36px;
+          font-size: 14px;
+        }
+        select.ds-input::-ms-expand { display: none; }
+        
+        /* Fix dropdown options background color - Note: limited browser support */
+        select.ds-input option,
+        .ds-input select option {
+          background-color: var(--bg-base-secondary);
+          color: var(--text-default);
+          padding: 10px 12px;
+          line-height: 1.8;
+          min-height: 36px;
+        }
+        
+        select.ds-input optgroup,
+        .ds-input select optgroup {
+          background-color: var(--bg-base-secondary);
+          color: var(--text-default);
+          padding: 8px 12px;
+          line-height: 1.6;
+        }
+    
     .ds-input__status-icon {
       position: absolute;
       right: 12px;
@@ -980,6 +1019,18 @@
     }
     .ds-table__pagination { display: flex; align-items: center; gap: var(--spacer-8); }
 
+    /* Table variants (IMP-001) */
+    .ds-table--striped tbody tr:nth-child(even) { background: var(--bg-base-secondary); }
+    .ds-table--hover tbody tr:hover { background: var(--bg-overlay-l1); cursor: default; }
+    .ds-table--compact th,
+    .ds-table--compact td { padding: var(--spacer-6) var(--spacer-8); font-size: var(--body-xs-font-size); }
+
+    /* Table cell utilities */
+    .ds-td--strong { font-weight: 500; color: var(--text-default); }
+    .ds-td--actions { display: flex; gap: var(--spacer-4); align-items: center; }
+    .ds-td--mono { font-family: var(--code-editor-font-family); font-variant-numeric: tabular-nums; }
+    .ds-td--truncate { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
 /* ── Tabs ──────────────────────────────────────────────────── */
 /* ===== Tabs ===== */
     .ds-tabs { display: flex; gap: var(--spacer-24); border-bottom: 1px solid var(--border-neutral-l1); }
@@ -1311,6 +1362,45 @@
   margin-top: var(--spacer-16);
 }
 
+/* IMP-004: Flat aliases — use these without BEM __ nesting */
+.ds-form-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacer-6);
+  margin-bottom: var(--spacer-12);
+}
+
+.ds-form-label {
+  display: block;
+  font-size: var(--body-sm-font-size);
+  font-weight: var(--font-weight-medium);
+  color: var(--text-default);
+  margin-bottom: var(--spacer-4);
+}
+
+.ds-form-row {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--spacer-12);
+}
+
+.ds-form-row--3 {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.ds-form-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--spacer-8);
+  margin-top: var(--spacer-16);
+}
+
+.ds-form-hint {
+  font-size: var(--body-xs-font-size);
+  color: var(--text-tertiary);
+  margin-top: var(--spacer-2);
+}
+
 .ds-radio-group {
   display: flex;
   gap: var(--spacer-16);
@@ -1391,12 +1481,14 @@
   display: flex;
   align-items: center;
   width: 100%;
-  padding: var(--spacer-8) var(--spacer-12);
+  padding: 12px var(--spacer-12);
+  min-height: 40px;
   background: none;
   border: none;
   border-radius: var(--radius-2);
   color: var(--text-default);
   font-size: var(--body-sm-font-size);
+  line-height: 1.6;
   cursor: pointer;
   text-align: left;
 }

package/dist/css/kupola.css

@@ -1,12 +1,13 @@
-@import '../css/scaffold.css';
-@import '../css/colors_and_type.css';
-@import '../css/theme-light.css';
-@import '../css/brand-themes.css';
-@import '../css/components.css';
-@import '../css/components-ext.css';
-@import '../css/states.css';
-@import '../css/responsive.css';
-@import '../css/animations.css';
-@import '../css/accessibility.css';
-@import '../css/utilities.css';
-@import '../css/table.css';
+@import url('colors-and-type.css');
+@import url('theme-light.css');
+@import url('theme-dark.css');
+@import url('brand-themes.css');
+@import url('scaffold.css');
+@import url('components.css');
+@import url('components-ext.css');
+@import url('states.css');
+@import url('utilities.css');
+@import url('responsive.css');
+@import url('accessibility.css');
+@import url('animations.css');
+@import url('table.css');

package/dist/css/table.css

@@ -0,0 +1,74 @@
+/* ================================================================
+   KupolaTable Styles
+   ================================================================ */
+
+.kupola-table-wrapper { width: 100%; }
+.kupola-table-container { overflow-x: auto; }
+.kupola-table { width: 100%; border-collapse: collapse; font-size: 14px; }
+.kupola-table th, .kupola-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid #e8e8e8; }
+.kupola-table th { background: #fafafa; font-weight: 600; color: #333; white-space: nowrap; }
+.kupola-table-striped tbody tr:nth-child(even) { background: #fafafa; }
+.kupola-table-hover tbody tr:hover { background: #f0f7ff; }
+.kupola-table-bordered { border: 1px solid #e8e8e8; }
+.kupola-table-bordered th, .kupola-table-bordered td { border: 1px solid #e8e8e8; }
+.kupola-table-compact th, .kupola-table-compact td { padding: 8px 12px; }
+.kupola-table-sortable { cursor: pointer; user-select: none; position: relative; }
+.kupola-table-sortable:hover { background: #f0f0f0; }
+.kupola-table-sort-icon { font-size: 12px; opacity: 0.5; margin-left: 4px; }
+.kupola-table-sort-asc .kupola-table-sort-icon,
+.kupola-table-sort-desc .kupola-table-sort-icon { opacity: 1; color: #1890ff; }
+.kupola-table-empty, .kupola-table-loading { text-align: center; padding: 40px 16px !important; color: #999; }
+.kupola-table-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; }
+.kupola-table-toolbar-right { display: flex; align-items: center; gap: 8px; }
+.kupola-table-filter-input { padding: 6px 12px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 14px; width: 240px; }
+.kupola-table-filter-input:focus { outline: none; border-color: #1890ff; box-shadow: 0 0 0 2px rgba(24,144,255,0.1); }
+.kupola-table-info { color: #999; font-size: 13px; }
+.kupola-table-selection-info { color: #1890ff; font-size: 13px; font-weight: 500; }
+.kupola-table-col-selection { width: 40px; text-align: center; }
+.kupola-table-col-expand { width: 40px; text-align: center; }
+.kupola-table-expand-btn { background: none; border: none; cursor: pointer; font-size: 12px; padding: 2px 6px; color: #666; }
+.kupola-table-expand-btn:hover { color: #1890ff; }
+.kupola-table-expand-row td { background: #fafafa; padding: 16px; }
+.kupola-table-row-selected { background: #e6f7ff !important; }
+.kupola-table-row-selected:hover { background: #bae7ff !important; }
+
+/* Resize */
+.kupola-table-resize-handle { position: absolute; right: 0; top: 0; bottom: 0; width: 6px; cursor: col-resize; background: transparent; }
+.kupola-table-resize-handle:hover { background: #1890ff; opacity: 0.3; }
+
+/* Drag */
+.kupola-table-draggable { transition: opacity 0.2s; }
+.kupola-table-dragging { opacity: 0.4; }
+.kupola-table-drag-over { border-top: 2px solid #1890ff !important; }
+
+/* Edit */
+.kupola-table-editable-cell { cursor: text; }
+.kupola-table-editable-cell:hover { background: #e6f7ff; }
+.kupola-table-edit-cell { display: flex; gap: 4px; align-items: center; }
+.kupola-table-edit-input { flex: 1; padding: 2px 6px; font-size: 13px; }
+.kupola-table-edit-actions { display: flex; gap: 2px; }
+.kupola-table-edit-save, .kupola-table-edit-cancel { background: none; border: 1px solid #d9d9d9; border-radius: 3px; cursor: pointer; padding: 2px 6px; font-size: 12px; }
+.kupola-table-edit-save { color: #52c41a; border-color: #52c41a; }
+.kupola-table-edit-cancel { color: #ff4d4f; border-color: #ff4d4f; }
+.kupola-table-edit-save:hover { background: #f6ffed; }
+.kupola-table-edit-cancel:hover { background: #fff2f0; }
+
+/* Tree */
+.kupola-table-tree-indent { display: inline-block; }
+.kupola-table-tree-toggle { background: none; border: none; cursor: pointer; font-size: 10px; padding: 0 4px; color: #666; }
+.kupola-table-tree-toggle:hover { color: #1890ff; }
+.kupola-table-tree-toggle-placeholder { display: inline-block; width: 18px; }
+
+/* Virtual */
+.kupola-table-virtual-wrapper .kupola-table-container { overflow-y: auto; }
+
+/* Pagination */
+.kupola-table-pagination { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 16px; padding: 8px 0; }
+.kupola-table-pages { display: flex; gap: 4px; align-items: center; }
+.kupola-table-page-btn { min-width: 32px; height: 32px; border: 1px solid #d9d9d9; border-radius: 4px; background: #fff; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; }
+.kupola-table-page-btn:hover:not(:disabled):not(.active) { border-color: #1890ff; color: #1890ff; }
+.kupola-table-page-btn.active { background: #1890ff; color: #fff; border-color: #1890ff; }
+.kupola-table-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+.kupola-table-page-ellipsis { padding: 0 4px; color: #999; }
+.kupola-table-page-size { padding: 4px 8px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 13px; }
+.kupola-table-page-info { color: #999; font-size: 13px; }

package/dist/css/theme-dark.css

@@ -18,11 +18,11 @@
   --text-default: #D1D3DB;
   --text-default-hover: #FFFFFF;
   --text-default-active: #FFFFFF;
-  --text-secondary: #9599A6;
+  --text-secondary: #A0A5B2;
   --text-secondary-hover: #D1D3DB;
   --text-secondary-active: #D1D3DB;
-  --text-tertiary: #6B7280;
-  --text-disabled: #6F7482;
+  --text-tertiary: #7D8493;
+  --text-disabled: #7D8493;
   --text-onbrand: #FFFFFF;
   --text-onaccent: #FFFFFF;
 
@@ -32,8 +32,8 @@
   --icon-secondary: #9599A6;
   --icon-secondary-hover: #D1D3DB;
   --icon-secondary-active: #D1D3DB;
-  --icon-tertiary: #6B7280;
-  --icon-disabled: #6F7482;
+  --icon-tertiary: #7D8493;
+  --icon-disabled: #7D8493;
   --icon-onbrand: #FFFFFF;
   --icon-onaccent: #FFFFFF;
 

package/dist/css/utilities.css

@@ -168,4 +168,162 @@
 @keyframes pulse {
   0%, 100% { opacity: 1; }
   50% { opacity: 0.5; }
-}
+}
+
+/* ===== ds- prefixed utility classes (IMP-002) =====
+ * Canonical ds-* aliases for all utility classes.
+ * Both prefixed and unprefixed versions are supported.
+ */
+
+/* Flexbox */
+.ds-flex { display: flex; }
+.ds-flex-col { display: flex; flex-direction: column; }
+.ds-flex--col { flex-direction: column; }
+.ds-flex--wrap { flex-wrap: wrap; }
+.ds-flex-1 { flex: 1; }
+.ds-flex-none { flex: none; }
+.ds-items-center { align-items: center; }
+.ds-items-start { align-items: flex-start; }
+.ds-items-end { align-items: flex-end; }
+.ds-items-stretch { align-items: stretch; }
+.ds-justify-center { justify-content: center; }
+.ds-justify-between { justify-content: space-between; }
+.ds-justify-end { justify-content: flex-end; }
+.ds-justify-start { justify-content: flex-start; }
+
+/* Gap */
+.ds-gap-2 { gap: var(--spacer-2); }
+.ds-gap-4 { gap: var(--spacer-4); }
+.ds-gap-6 { gap: var(--spacer-6); }
+.ds-gap-8 { gap: var(--spacer-8); }
+.ds-gap-12 { gap: var(--spacer-12); }
+.ds-gap-16 { gap: var(--spacer-16); }
+.ds-gap-24 { gap: var(--spacer-24); }
+.ds-gap-32 { gap: var(--spacer-32); }
+
+/* Grid */
+.ds-grid { display: grid; }
+.ds-grid--2 { grid-template-columns: repeat(2, 1fr); }
+.ds-grid--3 { grid-template-columns: repeat(3, 1fr); }
+.ds-grid--4 { grid-template-columns: repeat(4, 1fr); }
+.ds-grid--5 { grid-template-columns: repeat(5, 1fr); }
+.ds-grid--6 { grid-template-columns: repeat(6, 1fr); }
+.ds-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
+.ds-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
+.ds-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
+
+/* Display */
+.ds-block { display: block; }
+.ds-inline-block { display: inline-block; }
+.ds-inline { display: inline; }
+.ds-hidden { display: none; }
+
+/* Text */
+.ds-text-left { text-align: left; }
+.ds-text-center { text-align: center; }
+.ds-text-right { text-align: right; }
+.ds-text-xs { font-size: var(--body-xs-font-size); }
+.ds-text-sm { font-size: var(--body-sm-font-size); }
+.ds-text-md { font-size: var(--body-md-font-size); }
+.ds-text-base { font-size: var(--body-base-font-size); }
+.ds-font-medium { font-weight: var(--font-weight-medium); }
+.ds-font-strong { font-weight: var(--font-weight-strong); }
+.ds-text-default { color: var(--text-default); }
+.ds-text-secondary { color: var(--text-secondary); }
+.ds-text-tertiary { color: var(--text-tertiary); }
+.ds-text-brand { color: var(--text-brand); }
+.ds-text-success { color: var(--status-success-default); }
+.ds-text-warning { color: var(--status-warning-default); }
+.ds-text-error { color: var(--status-error-default); }
+
+/* Width */
+.ds-w-full { width: 100%; }
+.ds-w-auto { width: auto; }
+.ds-max-w-md { max-width: 480px; }
+.ds-max-w-lg { max-width: 640px; }
+.ds-max-w-xl { max-width: 960px; }
+
+/* Spacing (ds- prefixed margin/padding) */
+.ds-m-0 { margin: var(--spacer-0); }
+.ds-m-4 { margin: var(--spacer-4); }
+.ds-m-8 { margin: var(--spacer-8); }
+.ds-m-12 { margin: var(--spacer-12); }
+.ds-m-16 { margin: var(--spacer-16); }
+.ds-m-auto { margin: auto; }
+.ds-mt-0 { margin-top: var(--spacer-0); }
+.ds-mt-4 { margin-top: var(--spacer-4); }
+.ds-mt-8 { margin-top: var(--spacer-8); }
+.ds-mt-12 { margin-top: var(--spacer-12); }
+.ds-mt-16 { margin-top: var(--spacer-16); }
+.ds-mb-0 { margin-bottom: var(--spacer-0); }
+.ds-mb-4 { margin-bottom: var(--spacer-4); }
+.ds-mb-8 { margin-bottom: var(--spacer-8); }
+.ds-mb-12 { margin-bottom: var(--spacer-12); }
+.ds-mb-16 { margin-bottom: var(--spacer-16); }
+.ds-p-0 { padding: var(--spacer-0); }
+.ds-p-4 { padding: var(--spacer-4); }
+.ds-p-8 { padding: var(--spacer-8); }
+.ds-p-12 { padding: var(--spacer-12); }
+.ds-p-16 { padding: var(--spacer-16); }
+.ds-p-24 { padding: var(--spacer-24); }
+.ds-p-32 { padding: var(--spacer-32); }
+.ds-mb-24 { margin-bottom: var(--spacer-24); }
+.ds-mb-32 { margin-bottom: var(--spacer-32); }
+.ds-mt-24 { margin-top: var(--spacer-24); }
+.ds-mt-16 { margin-top: var(--spacer-16); }
+
+/* Width extras */
+.ds-w-200 { width: 200px; }
+.ds-w-400 { width: 400px; }
+.ds-w-440 { width: 440px; }
+.ds-w-480 { width: 480px; }
+.ds-w-500 { width: 500px; }
+.ds-w-520 { width: 520px; }
+.ds-w-560 { width: 560px; }
+.ds-w-640 { width: 640px; }
+
+/* Overflow extras */
+.ds-overflow-x-auto { overflow-x: auto; }
+.ds-overflow-y-auto { overflow-y: auto; }
+
+/* Max height */
+.ds-max-h-80vh { max-height: 80vh; }
+.ds-max-h-85vh { max-height: 85vh; }
+
+/* Rounded */
+.ds-rounded-2 { border-radius: var(--radius-2); }
+.ds-rounded-4 { border-radius: var(--radius-4); }
+.ds-rounded-6 { border-radius: var(--radius-6); }
+.ds-rounded-8 { border-radius: var(--radius-8); }
+.ds-rounded-full { border-radius: var(--radius-full); }
+
+/* Position */
+.ds-relative { position: relative; }
+.ds-absolute { position: absolute; }
+.ds-fixed { position: fixed; }
+.ds-sticky { position: sticky; }
+
+/* Overflow */
+.ds-overflow-hidden { overflow: hidden; }
+.ds-overflow-auto { overflow: auto; }
+
+/* Cursor */
+.ds-cursor-pointer { cursor: pointer; }
+.ds-cursor-not-allowed { cursor: not-allowed; }
+
+/* Inset (for modals) */
+.ds-inset-0 { inset: 0; }
+
+/* Text heading */
+.ds-text-heading-sm { font-size: var(--heading-sm-font-size); }
+.ds-text-heading-md { font-size: var(--heading-md-font-size); }
+
+/* Text semantic colors */
+.ds-text-info { color: var(--status-info-default); }
+
+/* Background */
+.ds-bg-overlay { background: rgba(0,0,0,.5); }
+.ds-bg-base { background: var(--bg-base-secondary); }
+
+/* Z-index */
+.ds-z-modal { z-index: 1000; }