@kupola/kupola 1.3.1 → 1.4.0

package/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;
@@ -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/css/components.css

@@ -540,6 +540,24 @@
     .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: 28px;
+          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);
+        }
+        select.ds-input::-ms-expand { display: none; }
+    
     .ds-input__status-icon {
       position: absolute;
       right: 12px;
@@ -980,6 +998,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 +1341,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);

package/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/css/utilities.css

@@ -168,4 +168,122 @@
 @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); }
+
+/* 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; }

package/dist/css/kupola.css

@@ -1,12 +1 @@
-@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 "../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";

package/dist/css/kupola.min.css

@@ -0,0 +1 @@
+@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";