@kupola/kupola 2.0.0-alpha.1 → 2.0.0-beta.10

package/README.md

@@ -1,4 +1,4 @@
-[中文文档](./README.zh-CN.md)
+[中文文档](./README.zh-CN.md)  | [Pages](https://kupola-cn.github.io/kupola/)
 
 ![npm](https://img.shields.io/npm/v/@kupola/kupola)
 ![bundlephobia](https://img.shields.io/bundlephobia/minzip/@kupola/kupola)
@@ -51,16 +51,18 @@ Or use the programmatic API:
 
 ## Installation
 
+> **Current version**: `2.0.0-alpha.1` (pre-release). Use `@next` tag to install:
+
 ```bash
-npm install @kupola/kupola              # Full package
+npm install @kupola/kupola@next              # Full package
 # Or core engine only
-npm install @kupola/kupola/core          # signal + template + render + SSR
+npm install @kupola/kupola/core@next          # signal + template + render + SSR
 ```
 
 ```bash
 # CDN
-https://cdn.jsdelivr.net/npm/@kupola/kupola/dist/kupola-core.esm.js
-https://cdn.jsdelivr.net/npm/@kupola/kupola/dist/kupola-core.cjs.js
+https://cdn.jsdelivr.net/npm/@kupola/kupola@next/dist/kupola-core.esm.js
+https://cdn.jsdelivr.net/npm/@kupola/kupola@next/dist/kupola-core.cjs.js
 ```
 
 ---

package/README.zh-CN.md

@@ -51,16 +51,18 @@
 
 ## 安装
 
+> **当前版本**：`2.0.0-alpha.1`（预发布版）。请使用 `@next` 标签安装：
+
 ```bash
-npm install @kupola/kupola              # 完整包
+npm install @kupola/kupola@next              # 完整包
 # 或仅核心引擎
-npm install @kupola/kupola/core          # signal + template + render + SSR
+npm install @kupola/kupola/core@next          # signal + template + render + SSR
 ```
 
 ```bash
 # CDN
-https://cdn.jsdelivr.net/npm/@kupola/kupola/dist/kupola-core.esm.js
-https://cdn.jsdelivr.net/npm/@kupola/kupola/dist/kupola-core.cjs.js
+https://cdn.jsdelivr.net/npm/@kupola/kupola@next/dist/kupola-core.esm.js
+https://cdn.jsdelivr.net/npm/@kupola/kupola@next/dist/kupola-core.cjs.js
 ```
 
 ---

package/dist/css/components.css

@@ -0,0 +1,273 @@
+/**
+ * Kupola Component Styles
+ * Core ds-* class definitions using design tokens.
+ */
+
+/* ── Reset ────────────────────────────────────────────────── */
+*, *::before, *::after { box-sizing: border-box; }
+
+/* ── Base ─────────────────────────────────────────────────── */
+body {
+  margin: 0;
+  background: var(--color-background);
+  color: var(--color-foreground);
+  font-family: var(--font-family-default);
+  font-size: var(--body-base-font-size);
+  line-height: var(--body-base-line-height);
+}
+
+/* ── Button ───────────────────────────────────────────────── */
+.ds-btn {
+  display: inline-flex; align-items: center; justify-content: center;
+  gap: var(--spacer-6); padding: 0 var(--spacer-12); height: 28px;
+  border-radius: var(--radius-4); border: 1px solid transparent;
+  cursor: pointer; user-select: none; white-space: nowrap;
+  font-size: var(--body-sm-font-size); font-weight: var(--font-weight-medium);
+  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
+}
+.ds-btn--sm { height: 24px; padding: 0 var(--spacer-8); font-size: var(--body-xs-font-size); }
+.ds-btn--lg { height: 32px; padding: 0 var(--spacer-16); font-size: var(--body-base-font-size); }
+.ds-btn--primary { background: var(--bg-brand); color: var(--text-onbrand); border-color: var(--bg-brand); }
+.ds-btn--primary:hover { background: var(--bg-brand-hover); }
+.ds-btn--secondary { background: var(--bg-overlay-l2); color: var(--text-default); border-color: var(--border-neutral-l1); }
+.ds-btn--secondary:hover { background: var(--bg-overlay-l3); }
+.ds-btn--tertiary { background: transparent; color: var(--text-default); }
+.ds-btn--tertiary:hover { background: var(--bg-overlay-l2); }
+.ds-btn--danger { background: var(--status-error-default); color: #fff; }
+.ds-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
+
+/* ── Input ────────────────────────────────────────────────── */
+.ds-input {
+  display: flex; align-items: center; gap: var(--spacer-8);
+  padding: 0 var(--spacer-12); height: 28px;
+  background: var(--bg-overlay-l1); border: 1px solid var(--border-neutral-l1);
+  border-radius: var(--radius-4); color: var(--text-default); width: 100%;
+  font-size: var(--body-sm-font-size);
+}
+.ds-input:focus-within { border-color: var(--bg-brand); }
+.ds-input input { flex: 1; background: transparent; border: none; outline: none; color: inherit; font: inherit; }
+.ds-input input::placeholder { color: var(--text-tertiary); }
+.ds-input.is-error { border-color: var(--status-error-default); }
+
+/* ── Modal ────────────────────────────────────────────────── */
+.ds-modal-mask {
+  position: fixed; inset: 0; z-index: var(--z-index-modal);
+  background: rgba(0, 0, 0, 0.5);
+  display: none; align-items: center; justify-content: center;
+}
+.ds-modal-mask.is-visible { display: flex; }
+.ds-modal {
+  background: var(--bg-base-secondary); border: 1px solid var(--border-neutral-l1);
+  border-radius: var(--radius-8); width: 100%; max-width: 480px;
+  outline: none;
+}
+.ds-modal__header {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: var(--spacer-16) var(--spacer-24);
+  border-bottom: 1px solid var(--border-neutral-l1);
+}
+.ds-modal__title { font-size: var(--heading-sm-font-size); font-weight: var(--font-weight-strong); }
+.ds-modal__close {
+  width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
+  background: transparent; border: none; color: var(--icon-secondary);
+  cursor: pointer; border-radius: var(--radius-4);
+}
+.ds-modal__close:hover { background: var(--bg-overlay-l2); }
+.ds-modal__body { padding: var(--spacer-16) var(--spacer-24); }
+.ds-modal__footer {
+  display: flex; justify-content: flex-end; gap: var(--spacer-8);
+  padding: var(--spacer-12) var(--spacer-24);
+  border-top: 1px solid var(--border-neutral-l1);
+}
+
+/* ── Drawer ───────────────────────────────────────────────── */
+.ds-drawer-mask {
+  position: fixed; inset: 0; z-index: var(--z-index-drawer);
+  background: rgba(0, 0, 0, 0.5); display: none;
+}
+.ds-drawer-mask.is-visible { display: block; }
+.ds-drawer {
+  position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--z-index-drawer);
+  width: 360px; max-width: 100vw;
+  background: var(--bg-base-secondary); border-left: 1px solid var(--border-neutral-l1);
+  display: flex; flex-direction: column;
+  transform: translateX(100%); transition: transform var(--transition-slow);
+}
+.ds-drawer.is-visible { transform: translateX(0); }
+.ds-drawer__header {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: var(--spacer-16) var(--spacer-24);
+  border-bottom: 1px solid var(--border-neutral-l1);
+}
+.ds-drawer__body { padding: var(--spacer-16) var(--spacer-24); flex: 1; overflow-y: auto; }
+
+/* ── Dropdown ─────────────────────────────────────────────── */
+.ds-dropdown { position: relative; display: inline-block; }
+.ds-dropdown__menu {
+  position: absolute; top: calc(100% + 4px); left: 0; min-width: 160px;
+  background: var(--bg-base-secondary); border: 1px solid var(--border-neutral-l2);
+  border-radius: var(--radius-4); box-shadow: 0 4px 16px rgba(0,0,0,0.2);
+  z-index: var(--z-index-dropdown); display: none; padding: var(--spacer-4);
+}
+.ds-dropdown__menu.is-open { display: block; }
+.ds-dropdown__item {
+  display: flex; align-items: center; padding: var(--spacer-6) var(--spacer-8);
+  border-radius: var(--radius-2); color: var(--text-default);
+  font-size: var(--body-sm-font-size); cursor: pointer;
+}
+.ds-dropdown__item:hover { background: var(--bg-overlay-l1); }
+
+/* ── Tooltip ──────────────────────────────────────────────── */
+.ds-tooltip {
+  position: fixed; z-index: var(--z-index-tooltip);
+  padding: var(--spacer-4) var(--spacer-8);
+  background: var(--bg-base-tertiary); border: 1px solid var(--border-neutral-l1);
+  border-radius: var(--radius-4); font-size: var(--body-xs-font-size);
+  color: var(--text-default); pointer-events: none;
+  max-width: 280px; white-space: pre-wrap;
+}
+
+/* ── Table ────────────────────────────────────────────────── */
+.ds-table { width: 100%; border-collapse: collapse; }
+.ds-table th, .ds-table td {
+  text-align: left; padding: var(--spacer-12) var(--spacer-8);
+  border-bottom: 1px solid var(--border-neutral-l1);
+  font-size: var(--body-sm-font-size);
+}
+.ds-table th { color: var(--text-tertiary); font-weight: var(--font-weight-default); font-size: var(--body-xs-font-size); text-transform: uppercase; letter-spacing: 0.04em; }
+.ds-table td { color: var(--text-default); }
+.ds-table--striped tbody tr:nth-child(even) { background: var(--bg-base-secondary); }
+.ds-table--hover tbody tr:hover { background: var(--bg-overlay-l1); }
+
+/* ── Form ─────────────────────────────────────────────────── */
+.ds-form { display: flex; flex-direction: column; gap: var(--spacer-16); }
+.ds-form__group { display: flex; flex-direction: column; gap: var(--spacer-6); }
+.ds-form__label { font-size: var(--body-sm-font-size); font-weight: var(--font-weight-medium); color: var(--text-default); }
+.ds-form__error { font-size: var(--body-xs-font-size); color: var(--status-error-default); }
+.ds-form__actions { display: flex; justify-content: flex-end; gap: var(--spacer-8); margin-top: var(--spacer-16); }
+
+/* ── Alert ────────────────────────────────────────────────── */
+.ds-alert {
+  display: flex; gap: var(--spacer-12);
+  padding: var(--spacer-12) var(--spacer-16);
+  background: var(--bg-base-secondary); border: 1px solid var(--border-neutral-l1);
+  border-radius: var(--radius-4); color: var(--text-default);
+}
+.ds-alert--success { background: var(--status-success-surface-l1); border-color: var(--status-success-default); }
+.ds-alert--warning { background: var(--status-warning-surface-l1); border-color: var(--status-warning-default); }
+.ds-alert--error   { background: var(--status-error-surface-l1);   border-color: var(--status-error-default); }
+.ds-alert--info    { background: var(--status-info-surface-l1);    border-color: var(--status-info-default); }
+
+/* ── Tag / Badge ──────────────────────────────────────────── */
+.ds-tag {
+  display: inline-flex; align-items: center;
+  padding: 0 var(--spacer-6); height: 18px;
+  border-radius: var(--radius-2); font-size: var(--body-xs-font-size);
+  background: var(--bg-overlay-l2); color: var(--text-secondary);
+  border: 1px solid var(--border-neutral-l1);
+}
+.ds-tag--success { background: var(--status-success-surface-l1); color: var(--status-success-default); }
+.ds-tag--warning { background: var(--status-warning-surface-l1); color: var(--status-warning-default); }
+.ds-tag--error   { background: var(--status-error-surface-l1);   color: var(--status-error-default); }
+
+/* ── Tabs ─────────────────────────────────────────────────── */
+.ds-tabs { display: flex; gap: var(--spacer-24); border-bottom: 1px solid var(--border-neutral-l1); }
+.ds-tab {
+  padding: var(--spacer-12) 0; background: transparent; border: none;
+  color: var(--text-tertiary); cursor: pointer; font: inherit;
+  font-size: var(--body-sm-font-size); position: relative;
+}
+.ds-tab:hover { color: var(--text-default); }
+.ds-tab.is-active { color: var(--text-default); }
+.ds-tab.is-active::after {
+  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
+  background: var(--icon-default);
+}
+
+/* ── Message / Notification ───────────────────────────────── */
+.ds-message {
+  position: fixed; top: var(--spacer-24); left: 50%; transform: translateX(-50%);
+  z-index: var(--z-index-notification);
+  padding: var(--spacer-8) var(--spacer-16);
+  background: var(--bg-base-secondary); border: 1px solid var(--border-neutral-l1);
+  border-radius: var(--radius-4); box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+  font-size: var(--body-sm-font-size); color: var(--text-default);
+}
+
+/* ── Progress ─────────────────────────────────────────────── */
+.ds-progress { width: 100%; height: 4px; background: var(--bg-overlay-l2); border-radius: var(--radius-full); overflow: hidden; }
+.ds-progress__bar { height: 100%; background: var(--bg-brand); border-radius: var(--radius-full); transition: width var(--transition-normal); }
+
+/* ── Switch ───────────────────────────────────────────────── */
+.ds-switch {
+  position: relative; width: 36px; height: 20px;
+  background: var(--bg-overlay-l3); border-radius: var(--radius-full);
+  cursor: pointer; transition: background var(--transition-fast);
+}
+.ds-switch.is-active { background: var(--bg-brand); }
+.ds-switch::after {
+  content: ''; position: absolute; top: 2px; left: 2px;
+  width: 16px; height: 16px; border-radius: 50%;
+  background: #fff; transition: transform var(--transition-fast);
+}
+.ds-switch.is-active::after { transform: translateX(16px); }
+
+/* ── Card ─────────────────────────────────────────────────── */
+.ds-card {
+  background: var(--bg-base-secondary); border: 1px solid var(--border-neutral-l1);
+  border-radius: var(--radius-4); padding: var(--spacer-24);
+}
+
+/* ── Skeleton ─────────────────────────────────────────────── */
+.ds-skeleton {
+  background: var(--bg-overlay-l2); border-radius: var(--radius-4);
+  animation: ds-skeleton-pulse 1.5s ease-in-out infinite;
+}
+@keyframes ds-skeleton-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+
+/* ── Empty ────────────────────────────────────────────────── */
+.ds-empty {
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  padding: var(--spacer-40); color: var(--text-tertiary);
+  font-size: var(--body-sm-font-size);
+}
+
+/* ── Divider ──────────────────────────────────────────────── */
+.ds-divider { height: 1px; background: var(--border-neutral-l1); }
+
+/* ── Avatar ───────────────────────────────────────────────── */
+.ds-avatar {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 32px; height: 32px; border-radius: 50%;
+  background: var(--bg-overlay-l3); color: var(--text-default);
+  font-size: var(--body-sm-font-size); font-weight: var(--font-weight-strong);
+}
+
+/* ── Badge ────────────────────────────────────────────────── */
+.ds-badge {
+  display: inline-flex; align-items: center; justify-content: center;
+  min-width: 18px; height: 18px; padding: 0 var(--spacer-4);
+  border-radius: var(--radius-full); font-size: 11px; font-weight: 600;
+  background: var(--status-error-default); color: #fff;
+}
+
+/* ── Collapse ─────────────────────────────────────────────── */
+.ds-collapse__header {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: var(--spacer-12) var(--spacer-16);
+  cursor: pointer; color: var(--text-default); font-weight: var(--font-weight-medium);
+}
+.ds-collapse__body { padding: 0 var(--spacer-16) var(--spacer-16); }
+
+/* ── Spin / Loading ───────────────────────────────────────── */
+.ds-spin {
+  display: inline-block; width: 24px; height: 24px;
+  border: 2px solid var(--bg-overlay-l3); border-top-color: var(--bg-brand);
+  border-radius: 50%; animation: ds-spin-rotate 0.8s linear infinite;
+}
+@keyframes ds-spin-rotate {
+  to { transform: rotate(360deg); }
+}

package/dist/css/components.min.css

@@ -0,0 +1 @@
+*,::after,::before{box-sizing:border-box}body{margin:0;background:var(--color-background);color:var(--color-foreground);font-family:var(--font-family-default);font-size:var(--body-base-font-size);line-height:var(--body-base-line-height)}.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacer-6);padding:0 var(--spacer-12);height:28px;border-radius:var(--radius-4);border:1px solid transparent;cursor:pointer;user-select:none;white-space:nowrap;font-size:var(--body-sm-font-size);font-weight:var(--font-weight-medium);transition:background var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast)}.ds-btn--sm{height:24px;padding:0 var(--spacer-8);font-size:var(--body-xs-font-size)}.ds-btn--lg{height:32px;padding:0 var(--spacer-16);font-size:var(--body-base-font-size)}.ds-btn--primary{background:var(--bg-brand);color:var(--text-onbrand);border-color:var(--bg-brand)}.ds-btn--primary:hover{background:var(--bg-brand-hover)}.ds-btn--secondary{background:var(--bg-overlay-l2);color:var(--text-default);border-color:var(--border-neutral-l1)}.ds-btn--secondary:hover{background:var(--bg-overlay-l3)}.ds-btn--tertiary{background:0 0;color:var(--text-default)}.ds-btn--tertiary:hover{background:var(--bg-overlay-l2)}.ds-btn--danger{background:var(--status-error-default);color:#fff}.ds-btn[disabled]{opacity:.5;cursor:not-allowed}.ds-input{display:flex;align-items:center;gap:var(--spacer-8);padding:0 var(--spacer-12);height:28px;background:var(--bg-overlay-l1);border:1px solid var(--border-neutral-l1);border-radius:var(--radius-4);color:var(--text-default);width:100%;font-size:var(--body-sm-font-size)}.ds-input:focus-within{border-color:var(--bg-brand)}.ds-input input{flex:1;background:0 0;border:none;outline:0;color:inherit;font:inherit}.ds-input input::placeholder{color:var(--text-tertiary)}.ds-input.is-error{border-color:var(--status-error-default)}.ds-modal-mask{position:fixed;inset:0;z-index:var(--z-index-modal);background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center}.ds-modal-mask.is-visible{display:flex}.ds-modal{background:var(--bg-base-secondary);border:1px solid var(--border-neutral-l1);border-radius:var(--radius-8);width:100%;max-width:480px;outline:0}.ds-modal__header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacer-16) var(--spacer-24);border-bottom:1px solid var(--border-neutral-l1)}.ds-modal__title{font-size:var(--heading-sm-font-size);font-weight:var(--font-weight-strong)}.ds-modal__close{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;background:0 0;border:none;color:var(--icon-secondary);cursor:pointer;border-radius:var(--radius-4)}.ds-modal__close:hover{background:var(--bg-overlay-l2)}.ds-modal__body{padding:var(--spacer-16) var(--spacer-24)}.ds-modal__footer{display:flex;justify-content:flex-end;gap:var(--spacer-8);padding:var(--spacer-12) var(--spacer-24);border-top:1px solid var(--border-neutral-l1)}.ds-drawer-mask{position:fixed;inset:0;z-index:var(--z-index-drawer);background:rgba(0,0,0,.5);display:none}.ds-drawer-mask.is-visible{display:block}.ds-drawer{position:fixed;top:0;right:0;bottom:0;z-index:var(--z-index-drawer);width:360px;max-width:100vw;background:var(--bg-base-secondary);border-left:1px solid var(--border-neutral-l1);display:flex;flex-direction:column;transform:translateX(100%);transition:transform var(--transition-slow)}.ds-drawer.is-visible{transform:translateX(0)}.ds-drawer__header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacer-16) var(--spacer-24);border-bottom:1px solid var(--border-neutral-l1)}.ds-drawer__body{padding:var(--spacer-16) var(--spacer-24);flex:1;overflow-y:auto}.ds-dropdown{position:relative;display:inline-block}.ds-dropdown__menu{position:absolute;top:calc(100% + 4px);left:0;min-width:160px;background:var(--bg-base-secondary);border:1px solid var(--border-neutral-l2);border-radius:var(--radius-4);box-shadow:0 4px 16px rgba(0,0,0,.2);z-index:var(--z-index-dropdown);display:none;padding:var(--spacer-4)}.ds-dropdown__menu.is-open{display:block}.ds-dropdown__item{display:flex;align-items:center;padding:var(--spacer-6) var(--spacer-8);border-radius:var(--radius-2);color:var(--text-default);font-size:var(--body-sm-font-size);cursor:pointer}.ds-dropdown__item:hover{background:var(--bg-overlay-l1)}.ds-tooltip{position:fixed;z-index:var(--z-index-tooltip);padding:var(--spacer-4) var(--spacer-8);background:var(--bg-base-tertiary);border:1px solid var(--border-neutral-l1);border-radius:var(--radius-4);font-size:var(--body-xs-font-size);color:var(--text-default);pointer-events:none;max-width:280px;white-space:pre-wrap}.ds-table{width:100%;border-collapse:collapse}.ds-table td,.ds-table th{text-align:left;padding:var(--spacer-12) var(--spacer-8);border-bottom:1px solid var(--border-neutral-l1);font-size:var(--body-sm-font-size)}.ds-table th{color:var(--text-tertiary);font-weight:var(--font-weight-default);font-size:var(--body-xs-font-size);text-transform:uppercase;letter-spacing:.04em}.ds-table td{color:var(--text-default)}.ds-table--striped tbody tr:nth-child(2n){background:var(--bg-base-secondary)}.ds-table--hover tbody tr:hover{background:var(--bg-overlay-l1)}.ds-form{display:flex;flex-direction:column;gap:var(--spacer-16)}.ds-form__group{display:flex;flex-direction:column;gap:var(--spacer-6)}.ds-form__label{font-size:var(--body-sm-font-size);font-weight:var(--font-weight-medium);color:var(--text-default)}.ds-form__error{font-size:var(--body-xs-font-size);color:var(--status-error-default)}.ds-form__actions{display:flex;justify-content:flex-end;gap:var(--spacer-8);margin-top:var(--spacer-16)}.ds-alert{display:flex;gap:var(--spacer-12);padding:var(--spacer-12) var(--spacer-16);background:var(--bg-base-secondary);border:1px solid var(--border-neutral-l1);border-radius:var(--radius-4);color:var(--text-default)}.ds-alert--success{background:var(--status-success-surface-l1);border-color:var(--status-success-default)}.ds-alert--warning{background:var(--status-warning-surface-l1);border-color:var(--status-warning-default)}.ds-alert--error{background:var(--status-error-surface-l1);border-color:var(--status-error-default)}.ds-alert--info{background:var(--status-info-surface-l1);border-color:var(--status-info-default)}.ds-tag{display:inline-flex;align-items:center;padding:0 var(--spacer-6);height:18px;border-radius:var(--radius-2);font-size:var(--body-xs-font-size);background:var(--bg-overlay-l2);color:var(--text-secondary);border:1px solid var(--border-neutral-l1)}.ds-tag--success{background:var(--status-success-surface-l1);color:var(--status-success-default)}.ds-tag--warning{background:var(--status-warning-surface-l1);color:var(--status-warning-default)}.ds-tag--error{background:var(--status-error-surface-l1);color:var(--status-error-default)}.ds-tabs{display:flex;gap:var(--spacer-24);border-bottom:1px solid var(--border-neutral-l1)}.ds-tab{padding:var(--spacer-12) 0;background:0 0;border:none;color:var(--text-tertiary);cursor:pointer;font:inherit;font-size:var(--body-sm-font-size);position:relative}.ds-tab.is-active,.ds-tab:hover{color:var(--text-default)}.ds-tab.is-active::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--icon-default)}.ds-message{position:fixed;top:var(--spacer-24);left:50%;transform:translateX(-50%);z-index:var(--z-index-notification);padding:var(--spacer-8) var(--spacer-16);background:var(--bg-base-secondary);border:1px solid var(--border-neutral-l1);border-radius:var(--radius-4);box-shadow:0 4px 12px rgba(0,0,0,.15);font-size:var(--body-sm-font-size);color:var(--text-default)}.ds-progress{width:100%;height:4px;background:var(--bg-overlay-l2);border-radius:var(--radius-full);overflow:hidden}.ds-progress__bar{height:100%;background:var(--bg-brand);border-radius:var(--radius-full);transition:width var(--transition-normal)}.ds-switch{position:relative;width:36px;height:20px;background:var(--bg-overlay-l3);border-radius:var(--radius-full);cursor:pointer;transition:background var(--transition-fast)}.ds-switch.is-active{background:var(--bg-brand)}.ds-switch::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform var(--transition-fast)}.ds-switch.is-active::after{transform:translateX(16px)}.ds-card{background:var(--bg-base-secondary);border:1px solid var(--border-neutral-l1);border-radius:var(--radius-4);padding:var(--spacer-24)}.ds-skeleton{background:var(--bg-overlay-l2);border-radius:var(--radius-4);animation:1.5s ease-in-out infinite ds-skeleton-pulse}@keyframes ds-skeleton-pulse{0%,100%{opacity:1}50%{opacity:.4}}.ds-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacer-40);color:var(--text-tertiary);font-size:var(--body-sm-font-size)}.ds-divider{height:1px;background:var(--border-neutral-l1)}.ds-avatar{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--bg-overlay-l3);color:var(--text-default);font-size:var(--body-sm-font-size);font-weight:var(--font-weight-strong)}.ds-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 var(--spacer-4);border-radius:var(--radius-full);font-size:11px;font-weight:600;background:var(--status-error-default);color:#fff}.ds-collapse__header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacer-12) var(--spacer-16);cursor:pointer;color:var(--text-default);font-weight:var(--font-weight-medium)}.ds-collapse__body{padding:0 var(--spacer-16) var(--spacer-16)}.ds-spin{display:inline-block;width:24px;height:24px;border:2px solid var(--bg-overlay-l3);border-top-color:var(--bg-brand);border-radius:50%;animation:.8s linear infinite ds-spin-rotate}@keyframes ds-spin-rotate{to{transform:rotate(360deg)}}

package/dist/css/index.css

@@ -0,0 +1,14 @@
+/**
+ * Kupola CSS — Full stylesheet bundle.
+ *
+ * @module @kupola/kupola/css
+ *
+ * Usage:
+ *   <link rel="stylesheet" href="node_modules/@kupola/kupola/dist/kupola.css">
+ *   // or in JS:
+ *   import '@kupola/kupola/css';
+ */
+
+@import './tokens.css';
+@import './components.css';
+@import './responsive.css';

package/dist/css/index.min.css

@@ -0,0 +1 @@
+'Cascadia Code','Fira Code','Segoe UI',-apple-system,[data-theme=dark]{color-scheme:dark;--bg-base-default:#0C0C0D;--bg-base-secondary:#1A1B1D;--bg-base-tertiary:#222427;--bg-overlay-l1:rgba(255, 255, 255, 0.04);--bg-overlay-l2:rgba(255, 255, 255, 0.06);--bg-overlay-l3:rgba(255, 255, 255, 0.08);--bg-overlay-l4:rgba(255, 255, 255, 0.12);--text-default:#E5E7EB;--text-secondary:#B8BDCA;--text-tertiary:#9CA3AF;--text-disabled:#8B93A1;--text-onbrand:#FFFFFF;--icon-default:#E5E7EB;--icon-secondary:#B8BDCA;--icon-tertiary:#9CA3AF;--icon-disabled:#8B93A1;--border-neutral-l1:rgba(255, 255, 255, 0.12);--border-neutral-l2:rgba(255, 255, 255, 0.18);--border-neutral-l3:rgba(255, 255, 255, 0.25);--bg-brand:#32F08C;--bg-brand-hover:#53F4A2;--bg-brand-disabled:rgba(50, 240, 140, 0.3);--status-success-default:#32F08C;--status-warning-default:#FFAD5B;--status-error-default:#FF9CA8;--status-info-default:#79B8FF;--status-success-surface-l1:rgba(50, 240, 140, 0.12);--status-warning-surface-l1:rgba(255, 173, 91, 0.12);--status-error-surface-l1:rgba(255, 156, 168, 0.12);--status-info-surface-l1:rgba(121, 184, 255, 0.12);--color-background:var(--bg-base-default);--color-surface:var(--bg-base-secondary);--color-foreground:var(--text-default);--color-border:var(--border-neutral-l1)}[data-theme=light]{color-scheme:light;--bg-base-default:#FFFFFF;--bg-base-secondary:#F5F6F8;--bg-base-tertiary:#EDF0F5;--bg-overlay-l1:rgba(0, 0, 0, 0.04);--bg-overlay-l2:rgba(0, 0, 0, 0.06);--bg-overlay-l3:rgba(0, 0, 0, 0.08);--bg-overlay-l4:rgba(0, 0, 0, 0.12);--text-default:#0F1117;--text-secondary:#4B5563;--text-tertiary:#5B6370;--text-disabled:#525A68;--text-onbrand:#FFFFFF;--icon-default:#0F1117;--icon-secondary:#4B5563;--icon-tertiary:#5B6370;--icon-disabled:#525A68;--border-neutral-l1:rgba(0, 0, 0, 0.12);--border-neutral-l2:rgba(0, 0, 0, 0.18);--border-neutral-l3:rgba(0, 0, 0, 0.25);--bg-brand:#22C55E;--bg-brand-hover:#16A34A;--bg-brand-disabled:rgba(34, 197, 94, 0.3);--status-success-default:#16A34A;--status-warning-default:#CA8A04;--status-error-default:#DC2626;--status-info-default:#2E69FF;--status-success-surface-l1:rgba(22, 163, 74, 0.08);--status-warning-surface-l1:rgba(202, 138, 4, 0.08);--status-error-surface-l1:rgba(220, 38, 38, 0.08);--status-info-surface-l1:rgba(46, 105, 255, 0.08);--color-background:var(--bg-base-default);--color-surface:var(--bg-base-secondary);--color-foreground:var(--text-default);--color-border:var(--border-neutral-l1)}*,::after,::before{box-sizing:border-box}body{margin:0;background:var(--color-background);color:var(--color-foreground);font-family:var(--font-family-default);font-size:var(--body-base-font-size);line-height:var(--body-base-line-height)}.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacer-6);padding:0 var(--spacer-12);height:28px;border-radius:var(--radius-4);border:1px solid transparent;cursor:pointer;user-select:none;white-space:nowrap;font-size:var(--body-sm-font-size);font-weight:var(--font-weight-medium);transition:background var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast)}.ds-btn--sm{height:24px;padding:0 var(--spacer-8);font-size:var(--body-xs-font-size)}.ds-btn--lg{height:32px;padding:0 var(--spacer-16);font-size:var(--body-base-font-size)}.ds-btn--primary{background:var(--bg-brand);color:var(--text-onbrand);border-color:var(--bg-brand)}.ds-btn--primary:hover{background:var(--bg-brand-hover)}.ds-btn--secondary{background:var(--bg-overlay-l2);color:var(--text-default);border-color:var(--border-neutral-l1)}.ds-btn--secondary:hover{background:var(--bg-overlay-l3)}.ds-btn--tertiary{background:0 0;color:var(--text-default)}.ds-btn--tertiary:hover{background:var(--bg-overlay-l2)}.ds-btn--danger{background:var(--status-error-default);color:#fff}.ds-btn[disabled]{opacity:.5;cursor:not-allowed}.ds-input{display:flex;align-items:center;gap:var(--spacer-8);padding:0 var(--spacer-12);height:28px;background:var(--bg-overlay-l1);border:1px solid var(--border-neutral-l1);border-radius:var(--radius-4);color:var(--text-default);width:100%;font-size:var(--body-sm-font-size)}.ds-input:focus-within{border-color:var(--bg-brand)}.ds-input input{flex:1;background:0 0;border:none;outline:0;color:inherit;font:inherit}.ds-input input::placeholder{color:var(--text-tertiary)}.ds-input.is-error{border-color:var(--status-error-default)}.ds-modal-mask{position:fixed;inset:0;z-index:var(--z-index-modal);background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center}.ds-modal-mask.is-visible{display:flex}.ds-modal{background:var(--bg-base-secondary);border:1px solid var(--border-neutral-l1);border-radius:var(--radius-8);width:100%;max-width:480px;outline:0}.ds-modal__header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacer-16) var(--spacer-24);border-bottom:1px solid var(--border-neutral-l1)}.ds-modal__title{font-size:var(--heading-sm-font-size);font-weight:var(--font-weight-strong)}.ds-modal__close{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;background:0 0;border:none;color:var(--icon-secondary);cursor:pointer;border-radius:var(--radius-4)}.ds-modal__close:hover{background:var(--bg-overlay-l2)}.ds-modal__body{padding:var(--spacer-16) var(--spacer-24)}.ds-modal__footer{display:flex;justify-content:flex-end;gap:var(--spacer-8);padding:var(--spacer-12) var(--spacer-24);border-top:1px solid var(--border-neutral-l1)}.ds-drawer-mask{position:fixed;inset:0;z-index:var(--z-index-drawer);background:rgba(0,0,0,.5);display:none}.ds-drawer-mask.is-visible{display:block}.ds-drawer{position:fixed;top:0;right:0;bottom:0;z-index:var(--z-index-drawer);width:360px;max-width:100vw;background:var(--bg-base-secondary);border-left:1px solid var(--border-neutral-l1);display:flex;flex-direction:column;transform:translateX(100%);transition:transform var(--transition-slow)}.ds-drawer.is-visible{transform:translateX(0)}.ds-drawer__header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacer-16) var(--spacer-24);border-bottom:1px solid var(--border-neutral-l1)}.ds-drawer__body{padding:var(--spacer-16) var(--spacer-24);flex:1;overflow-y:auto}.ds-dropdown{position:relative;display:inline-block}.ds-dropdown__menu{position:absolute;top:calc(100% + 4px);left:0;min-width:160px;background:var(--bg-base-secondary);border:1px solid var(--border-neutral-l2);border-radius:var(--radius-4);box-shadow:0 4px 16px rgba(0,0,0,.2);z-index:var(--z-index-dropdown);display:none;padding:var(--spacer-4)}.ds-dropdown__menu.is-open{display:block}.ds-dropdown__item{display:flex;align-items:center;padding:var(--spacer-6) var(--spacer-8);border-radius:var(--radius-2);color:var(--text-default);font-size:var(--body-sm-font-size);cursor:pointer}.ds-dropdown__item:hover{background:var(--bg-overlay-l1)}.ds-tooltip{position:fixed;z-index:var(--z-index-tooltip);padding:var(--spacer-4) var(--spacer-8);background:var(--bg-base-tertiary);border:1px solid var(--border-neutral-l1);border-radius:var(--radius-4);font-size:var(--body-xs-font-size);color:var(--text-default);pointer-events:none;max-width:280px;white-space:pre-wrap}.ds-table{width:100%;border-collapse:collapse}.ds-table td,.ds-table th{text-align:left;padding:var(--spacer-12) var(--spacer-8);border-bottom:1px solid var(--border-neutral-l1);font-size:var(--body-sm-font-size)}.ds-table th{color:var(--text-tertiary);font-weight:var(--font-weight-default);font-size:var(--body-xs-font-size);text-transform:uppercase;letter-spacing:.04em}.ds-table td{color:var(--text-default)}.ds-table--striped tbody tr:nth-child(2n){background:var(--bg-base-secondary)}.ds-table--hover tbody tr:hover{background:var(--bg-overlay-l1)}.ds-form{display:flex;flex-direction:column;gap:var(--spacer-16)}.ds-form__group{display:flex;flex-direction:column;gap:var(--spacer-6)}.ds-form__label{font-size:var(--body-sm-font-size);font-weight:var(--font-weight-medium);color:var(--text-default)}.ds-form__error{font-size:var(--body-xs-font-size);color:var(--status-error-default)}.ds-form__actions{display:flex;justify-content:flex-end;gap:var(--spacer-8);margin-top:var(--spacer-16)}.ds-alert{display:flex;gap:var(--spacer-12);padding:var(--spacer-12) var(--spacer-16);background:var(--bg-base-secondary);border:1px solid var(--border-neutral-l1);border-radius:var(--radius-4);color:var(--text-default)}.ds-alert--success{background:var(--status-success-surface-l1);border-color:var(--status-success-default)}.ds-alert--warning{background:var(--status-warning-surface-l1);border-color:var(--status-warning-default)}.ds-alert--error{background:var(--status-error-surface-l1);border-color:var(--status-error-default)}.ds-alert--info{background:var(--status-info-surface-l1);border-color:var(--status-info-default)}.ds-tag{display:inline-flex;align-items:center;padding:0 var(--spacer-6);height:18px;border-radius:var(--radius-2);font-size:var(--body-xs-font-size);background:var(--bg-overlay-l2);color:var(--text-secondary);border:1px solid var(--border-neutral-l1)}.ds-tag--success{background:var(--status-success-surface-l1);color:var(--status-success-default)}.ds-tag--warning{background:var(--status-warning-surface-l1);color:var(--status-warning-default)}.ds-tag--error{background:var(--status-error-surface-l1);color:var(--status-error-default)}.ds-tabs{display:flex;gap:var(--spacer-24);border-bottom:1px solid var(--border-neutral-l1)}.ds-tab{padding:var(--spacer-12) 0;background:0 0;border:none;color:var(--text-tertiary);cursor:pointer;font:inherit;font-size:var(--body-sm-font-size);position:relative}.ds-tab.is-active,.ds-tab:hover{color:var(--text-default)}.ds-tab.is-active::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--icon-default)}.ds-message{position:fixed;top:var(--spacer-24);left:50%;transform:translateX(-50%);z-index:var(--z-index-notification);padding:var(--spacer-8) var(--spacer-16);background:var(--bg-base-secondary);border:1px solid var(--border-neutral-l1);border-radius:var(--radius-4);box-shadow:0 4px 12px rgba(0,0,0,.15);font-size:var(--body-sm-font-size);color:var(--text-default)}.ds-progress{width:100%;height:4px;background:var(--bg-overlay-l2);border-radius:var(--radius-full);overflow:hidden}.ds-progress__bar{height:100%;background:var(--bg-brand);border-radius:var(--radius-full);transition:width var(--transition-normal)}.ds-switch{position:relative;width:36px;height:20px;background:var(--bg-overlay-l3);border-radius:var(--radius-full);cursor:pointer;transition:background var(--transition-fast)}.ds-switch.is-active{background:var(--bg-brand)}.ds-switch::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform var(--transition-fast)}.ds-switch.is-active::after{transform:translateX(16px)}.ds-card{background:var(--bg-base-secondary);border:1px solid var(--border-neutral-l1);border-radius:var(--radius-4);padding:var(--spacer-24)}.ds-skeleton{background:var(--bg-overlay-l2);border-radius:var(--radius-4);animation:1.5s ease-in-out infinite ds-skeleton-pulse}@keyframes ds-skeleton-pulse{0%,100%{opacity:1}50%{opacity:.4}}.ds-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacer-40);color:var(--text-tertiary);font-size:var(--body-sm-font-size)}.ds-divider{height:1px;background:var(--border-neutral-l1)}.ds-avatar{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--bg-overlay-l3);color:var(--text-default);font-size:var(--body-sm-font-size);font-weight:var(--font-weight-strong)}.ds-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 var(--spacer-4);border-radius:var(--radius-full);font-size:11px;font-weight:600;background:var(--status-error-default);color:#fff}.ds-collapse__header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacer-12) var(--spacer-16);cursor:pointer;color:var(--text-default);font-weight:var(--font-weight-medium)}.ds-collapse__body{padding:0 var(--spacer-16) var(--spacer-16)}.ds-spin{display:inline-block;width:24px;height:24px;border:2px solid var(--bg-overlay-l3);border-top-color:var(--bg-brand);border-radius:50%;animation:.8s linear infinite ds-spin-rotate}@keyframes ds-spin-rotate{to{transform:rotate(360deg)}}@media (min-width:576px){.ds-show-sm{display:none!important}}@media (min-width:768px){.ds-show-md{display:none!important}}@media (max-width:1023.98px){.ds-hide-below-lg,.ds-hide-lg{display:none!important}}@media (min-width:1024px){.ds-show-lg{display:none!important}}@media (max-width:1279.98px){.ds-hide-below-xl,.ds-hide-xl{display:none!important}}@media (min-width:1280px){.ds-show-xl{display:none!important}}@media (max-width:767.98px){.ds-hide-below-md,.ds-hide-md{display:none!important}.ds-padding-responsive{padding:var(--spacing-3,12px)!important}.ds-margin-responsive{margin:var(--spacing-3,12px)!important}.ds-text-responsive{font-size:var(--font-size-sm, 13px)!important}.ds-table-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch}.ds-table{min-width:600px}.ds-table td,.ds-table th{white-space:nowrap;padding:var(--spacing-2,8px) var(--spacing-3,12px);font-size:var(--font-size-sm, 13px)}}@media (max-width:575.98px){.ds-hide-below-sm,.ds-hide-sm{display:none!important}.ds-modal-content{width:100%!important;max-width:100%!important;min-height:100vh!important;border-radius:0!important;margin:0!important}.ds-modal-mask{padding:0!important}.ds-drawer-left,.ds-drawer-right{width:100%!important;max-width:100%!important}.ds-drawer-bottom,.ds-drawer-top{height:90vh!important;max-height:90vh!important}.ds-dialog{width:calc(100% - 32px)!important;max-width:100%!important;margin:16px!important}.ds-select-dropdown{position:fixed!important;bottom:0;left:0;right:0;max-height:50vh;border-radius:12px 12px 0 0;z-index:var(--z-index-modal,3000)}.ds-datepicker-panel{width:calc(100vw - 32px)!important;max-width:100%!important}.ds-notification{width:calc(100% - 24px)!important;max-width:100%!important;right:12px!important;left:12px!important}}

package/dist/css/responsive.css

@@ -0,0 +1,153 @@
+/**
+ * Kupola CSS — Responsive utilities & component adaptations.
+ *
+ * Breakpoints:
+ *   sm: 576px  (phones landscape)
+ *   md: 768px  (tablets)
+ *   lg: 1024px (laptops)
+ *   xl: 1280px (desktops)
+ *
+ * Usage:
+ *   <div class="ds-hide-sm">Hidden on phones</div>
+ *   <div class="ds-show-md">Only visible on tablets+</div>
+ *   <div class="ds-hide-lg">Hidden below laptops</div>
+ */
+
+/* ═══════════════════════════════════════════════════════════
+   Responsive display utilities
+   ═══════════════════════════════════════════════════════════ */
+
+/* ── sm: < 576px (phones) ─────────────────────────────── */
+@media (max-width: 575.98px) {
+  .ds-hide-sm { display: none !important; }
+  .ds-hide-below-sm { display: none !important; }
+}
+@media (min-width: 576px) {
+  .ds-show-sm { display: none !important; }
+}
+
+/* ── md: < 768px (below tablets) ──────────────────────── */
+@media (max-width: 767.98px) {
+  .ds-hide-md { display: none !important; }
+  .ds-hide-below-md { display: none !important; }
+}
+@media (min-width: 768px) {
+  .ds-show-md { display: none !important; }
+}
+
+/* ── lg: < 1024px (below laptops) ─────────────────────── */
+@media (max-width: 1023.98px) {
+  .ds-hide-lg { display: none !important; }
+  .ds-hide-below-lg { display: none !important; }
+}
+@media (min-width: 1024px) {
+  .ds-show-lg { display: none !important; }
+}
+
+/* ── xl: < 1280px (below desktops) ────────────────────── */
+@media (max-width: 1279.98px) {
+  .ds-hide-xl { display: none !important; }
+  .ds-hide-below-xl { display: none !important; }
+}
+@media (min-width: 1280px) {
+  .ds-show-xl { display: none !important; }
+}
+
+/* ═══════════════════════════════════════════════════════════
+   Responsive spacing utilities
+   ═══════════════════════════════════════════════════════════ */
+
+@media (max-width: 767.98px) {
+  .ds-padding-responsive { padding: var(--spacing-3, 12px) !important; }
+  .ds-margin-responsive { margin: var(--spacing-3, 12px) !important; }
+  .ds-text-responsive { font-size: var(--font-size-sm, 13px) !important; }
+}
+
+/* ═══════════════════════════════════════════════════════════
+   Component responsive adaptations
+   ═══════════════════════════════════════════════════════════ */
+
+/* ── Modal: full-screen on phones ─────────────────────────── */
+@media (max-width: 575.98px) {
+  .ds-modal-content {
+    width: 100% !important;
+    max-width: 100% !important;
+    min-height: 100vh !important;
+    border-radius: 0 !important;
+    margin: 0 !important;
+  }
+  .ds-modal-mask {
+    padding: 0 !important;
+  }
+}
+
+/* ── Drawer: full-width/height on phones ──────────────────── */
+@media (max-width: 575.98px) {
+  .ds-drawer-right,
+  .ds-drawer-left {
+    width: 100% !important;
+    max-width: 100% !important;
+  }
+  .ds-drawer-bottom,
+  .ds-drawer-top {
+    height: 90vh !important;
+    max-height: 90vh !important;
+  }
+}
+
+/* ── Dialog: full-width on phones ─────────────────────────── */
+@media (max-width: 575.98px) {
+  .ds-dialog {
+    width: calc(100% - 32px) !important;
+    max-width: 100% !important;
+    margin: 16px !important;
+  }
+}
+
+/* ── Table: horizontal scroll on small screens ────────────── */
+@media (max-width: 767.98px) {
+  .ds-table-wrapper {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+  .ds-table {
+    min-width: 600px;
+  }
+  .ds-table th,
+  .ds-table td {
+    white-space: nowrap;
+    padding: var(--spacing-2, 8px) var(--spacing-3, 12px);
+    font-size: var(--font-size-sm, 13px);
+  }
+}
+
+/* ── Select: full-width on phones ─────────────────────────── */
+@media (max-width: 575.98px) {
+  .ds-select-dropdown {
+    position: fixed !important;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    max-height: 50vh;
+    border-radius: 12px 12px 0 0;
+    z-index: var(--z-index-modal, 3000);
+  }
+}
+
+/* ── DatePicker: full-width on phones ─────────────────────── */
+@media (max-width: 575.98px) {
+  .ds-datepicker-panel {
+    width: calc(100vw - 32px) !important;
+    max-width: 100% !important;
+  }
+}
+
+/* ── Notification: stack full-width on phones ─────────────── */
+@media (max-width: 575.98px) {
+  .ds-notification {
+    width: calc(100% - 24px) !important;
+    max-width: 100% !important;
+    right: 12px !important;
+    left: 12px !important;
+  }
+}

package/dist/css/responsive.min.css

@@ -0,0 +1 @@
+@media (min-width:576px){.ds-show-sm{display:none!important}}@media (min-width:768px){.ds-show-md{display:none!important}}@media (max-width:1023.98px){.ds-hide-below-lg,.ds-hide-lg{display:none!important}}@media (min-width:1024px){.ds-show-lg{display:none!important}}@media (max-width:1279.98px){.ds-hide-below-xl,.ds-hide-xl{display:none!important}}@media (min-width:1280px){.ds-show-xl{display:none!important}}@media (max-width:767.98px){.ds-hide-below-md,.ds-hide-md{display:none!important}.ds-padding-responsive{padding:var(--spacing-3,12px)!important}.ds-margin-responsive{margin:var(--spacing-3,12px)!important}.ds-text-responsive{font-size:var(--font-size-sm, 13px)!important}.ds-table-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch}.ds-table{min-width:600px}.ds-table td,.ds-table th{white-space:nowrap;padding:var(--spacing-2,8px) var(--spacing-3,12px);font-size:var(--font-size-sm, 13px)}}@media (max-width:575.98px){.ds-hide-below-sm,.ds-hide-sm{display:none!important}.ds-modal-content{width:100%!important;max-width:100%!important;min-height:100vh!important;border-radius:0!important;margin:0!important}.ds-modal-mask{padding:0!important}.ds-drawer-left,.ds-drawer-right{width:100%!important;max-width:100%!important}.ds-drawer-bottom,.ds-drawer-top{height:90vh!important;max-height:90vh!important}.ds-dialog{width:calc(100% - 32px)!important;max-width:100%!important;margin:16px!important}.ds-select-dropdown{position:fixed!important;bottom:0;left:0;right:0;max-height:50vh;border-radius:12px 12px 0 0;z-index:var(--z-index-modal,3000)}.ds-datepicker-panel{width:calc(100vw - 32px)!important;max-width:100%!important}.ds-notification{width:calc(100% - 24px)!important;max-width:100%!important;right:12px!important;left:12px!important}}