webcake-ui-kit 1.1.27 → 1.1.29

package/src/components/table/table.css

@@ -2,6 +2,9 @@
   width: 100%;
   font-family: var(--font-family-body);
   color: var(--primary-fg);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--rounded-2xl);
+  overflow: hidden;
 }
 
 .ui-table__table {
@@ -10,6 +13,11 @@
   border-spacing: 0;
 }
 
+/* drag col is always 36px — the header cell is empty so it has no content to size it */
+.ui-table__col--drag {
+  width: 1%;
+}
+
 .ui-table__col--selection {
   width: 1%;
 }
@@ -40,17 +48,139 @@
   text-overflow: ellipsis;
 }
 
+.ui-table__cell--drag {
+  width: 1%;
+  white-space: nowrap;
+  text-align: center;
+}
+
+.ui-table__td.ui-table__cell--drag {
+  cursor: grab;
+  color: var(--muted-fg);
+}
+
+.ui-table__td.ui-table__cell--drag:active {
+  cursor: grabbing;
+}
+
 .ui-table__cell--selection {
   width: 1%;
   white-space: nowrap;
   text-align: center;
 }
 
+.ui-table__cell--fixed-left,
+.ui-table__cell--fixed-right {
+  position: sticky;
+  z-index: 1;
+}
+
+@keyframes ui-table-sticky-shadow {
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes ui-table-sticky-shadow-right {
+  to {
+    opacity: 0;
+  }
+}
+
+.ui-table__cell--fixed-left-last::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: -6px;
+  bottom: 0;
+  width: 6px;
+  box-shadow: inset var(--shadow-fixed-column-left);
+  pointer-events: none;
+  opacity: 0;
+  animation: ui-table-sticky-shadow linear both;
+  animation-timeline: scroll(nearest x);
+  animation-range: 0px 1px;
+}
+
+.ui-table__cell--fixed-right-first::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -6px;
+  bottom: 0;
+  width: 6px;
+  box-shadow: inset var(--shadow-fixed-column-right);
+  pointer-events: none;
+  animation: ui-table-sticky-shadow-right linear both;
+  animation-timeline: scroll(nearest x);
+  animation-range: calc(100% - 2px) 100%;
+}
+
+/* Sticky cells need an opaque background so content doesn't bleed through. */
+.ui-table__th.ui-table__cell--fixed-left,
+.ui-table__th.ui-table__cell--fixed-right {
+  background: var(--secondary-bg);
+}
+
+.ui-table__td.ui-table__cell--fixed-left,
+.ui-table__td.ui-table__cell--fixed-right {
+  background: var(--primary-bg);
+  transition: background-color 0.12s ease;
+}
+
+.ui-table__row--body:hover .ui-table__td.ui-table__cell--fixed-left,
+.ui-table__row--body:hover .ui-table__td.ui-table__cell--fixed-right {
+  background: var(--accent-bg);
+}
+
+.ui-table__row--selected .ui-table__td.ui-table__cell--fixed-left,
+.ui-table__row--selected .ui-table__td.ui-table__cell--fixed-right {
+  background: var(--secondary-bg);
+}
+
 /* ---------- Header ---------- */
 .ui-table__th {
   background: var(--secondary-bg);
   font-weight: var(--paragraph-medium-font-weight);
   white-space: nowrap;
+  padding: 0;
+}
+
+.ui-table__th-inner-wrap {
+  padding: var(--spacing-xs);
+  position: relative;
+}
+
+.ui-table__resize-handle {
+  position: absolute;
+  top: 50%;
+  right: -4px;
+  width: 8px;
+  height: 50%;
+  transform: translateY(-50%);
+  cursor: col-resize;
+}
+
+.ui-table__resize-handle--left {
+  right: auto;
+  left: -4px;
+}
+
+.ui-table__resize-handle::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  width: 1px;
+  transform: translateX(-50%);
+  background: var(--border-focus);
+}
+
+.ui-table__resize-handle:hover::before,
+.ui-table__resize-handle.resizing::before {
+  width: 2px;
+  background: var(--border-focus);
 }
 
 .ui-table__th-inner {
@@ -65,7 +195,8 @@
   user-select: none;
 }
 
-.ui-table__th--sortable:hover {
+.ui-table__th--sortable:hover,
+.ui-table__th:has(:is(.ui-table__resize-handle, .ui-table__resize-handle--left)):hover {
   background: var(--accent-2);
 }
 
@@ -103,6 +234,18 @@
   transition: background-color 0.12s ease;
 }
 
+.ui-table__row--dragging .ui-table__td {
+  opacity: 0.35;
+}
+
+.ui-table__row--drag-over .ui-table__td {
+  border-top: 2px solid var(--border-focus);
+}
+
+.ui-table__row--drag-preview .ui-table__td {
+  background: var(--accent-bg);
+}
+
 .ui-table__row--body:hover .ui-table__td {
   background: var(--accent-bg);
 }
@@ -173,20 +316,34 @@
 
 .ui-table__body::-webkit-scrollbar {
   width: 10px;
+  height: 10px;
 }
 
-.ui-table__body::-webkit-scrollbar-track {
+.ui-table__body::-webkit-scrollbar-track:vertical {
   border-left: 1px solid var(--border-primary);
 }
 
+.ui-table__body::-webkit-scrollbar-track:horizontal {
+  border-top: 1px solid var(--border-primary);
+}
+
 .ui-table__body::-webkit-scrollbar-thumb {
   background: var(--border-primary);
   border-radius: 3px;
+}
+
+.ui-table__body::-webkit-scrollbar-thumb:vertical {
   border-left: 2px solid transparent;
   border-right: 1px solid transparent;
   background-clip: content-box;
 }
 
+.ui-table__body::-webkit-scrollbar-thumb:horizontal {
+  border-top: 2px solid transparent;
+  border-bottom: 1px solid transparent;
+  background-clip: content-box;
+}
+
 .ui-table--scroll-y .ui-table__head {
   overflow: hidden;
 }
@@ -196,11 +353,11 @@
   border: none;
   background: var(--secondary-bg);
   border-bottom: 1px solid var(--border-primary);
-  box-sizing: border-box;
 }
 
-.ui-table--scroll-y .ui-table__cell--selection {
-  width: 44px;
+.ui-table--scroll-y .ui-table__cell--selection,
+.ui-table--scroll-y .ui-table__cell--drag {
+  width: 36px;
 }
 
 /* ---------- Virtual scroll spacers ---------- */

package/src/components/tooltip/Tooltip.vue

@@ -17,9 +17,10 @@
         'ui-tooltip__content',
         `ui-tooltip__content--${color}`,
         `ui-tooltip__content--${side}`,
-        hasMaxWidth && 'ui-tooltip__content--wrap'
+        hasMaxWidth && 'ui-tooltip__content--wrap',
+        overlayClassName
       ]"
-      :style="tooltipStyle"
+      :style="overlayStyle ? [tooltipStyle, overlayStyle] : tooltipStyle"
       role="tooltip"
     >
       <span class="ui-tooltip__text">
@@ -52,7 +53,9 @@ export default {
       default: 'default',
       validator: v => ['default', 'brand', 'destructive'].includes(v)
     },
-    arrow: { type: Boolean, default: true }
+    arrow: { type: Boolean, default: true },
+    overlayClassName: { type: [String, Array, Object], default: null },
+    overlayStyle: { type: [Object, Array], default: null }
   },
   emits: [],
   data() {

package/src/floating/click-outside-mixin.js

@@ -12,6 +12,24 @@ export default {
       this._coTriggerEl = trigger
       this._coFloatEl = floating
     },
+    // Returns true if `target` is inside a portal-hosted floating panel whose
+    // trigger element lives inside `myFloat`. This covers the case where a nested
+    // component (e.g. WkSelect inside a WkDropdown overlay) portals its own menu
+    // to #wk-portal-root — the nested panel is a sibling in the DOM, not a
+    // descendant of myFloat, so a plain `contains()` check misses it.
+    _coIsInsideDescendantPortal(target, myFloat) {
+      if (!myFloat || typeof document === 'undefined') return false
+      const portalRoot = document.querySelector('[data-wk-portal-root]')
+      if (!portalRoot || !portalRoot.contains(target)) return false
+      const floatingEls = portalRoot.querySelectorAll('[id^="wk-menu-"]')
+      for (let i = 0; i < floatingEls.length; i++) {
+        const fp = floatingEls[i]
+        if (!fp.contains(target)) continue
+        const trig = fp._wkTrigger
+        if (trig && myFloat.contains(trig)) return true
+      }
+      return false
+    },
     _coAttach() {
       if (typeof document === 'undefined' || this.coAttached) return
       this._coHandler = e => {
@@ -23,7 +41,9 @@ export default {
           trigger && (path.indexOf(trigger) !== -1 || (trigger.contains && trigger.contains(target)))
         const insideFloat =
           floating && (path.indexOf(floating) !== -1 || (floating.contains && floating.contains(target)))
-        if (!insideTrigger && !insideFloat) this._coOnOutside(e)
+        if (!insideTrigger && !insideFloat && !this._coIsInsideDescendantPortal(target, floating)) {
+          this._coOnOutside(e)
+        }
       }
       document.addEventListener('pointerdown', this._coHandler, true)
       this.coAttached = true

package/src/styles/color_general.css

@@ -18,6 +18,9 @@
   --primary-brand-fg: var(--color-brand-shades-600);
   --inverse-fg: var(--color-white-alpha-100);
   --destructive: var(--color-red-600);
+  --positive: var(--color-emerald-600);
+  --warning: var(--color-amber-600);
+  --infor: var(--color-blue-600);
   --destructive-inverse-fg: var(--color-white-alpha-100);
   --border-primary: var(--color-brand-neutrals-200);
   --border-secondary: var(--color-brand-neutrals-100);
@@ -28,19 +31,20 @@
   --primary-hover: var(--color-brand-neutrals-50);
   --secondary-hover: var(--color-brand-neutrals-50);
   --primary-brand-hover: var(--color-brand-shades-500);
+  --destructive-text: var(--color-red-600);
   --destructive-hover: var(--color-red-500);
   --destructive-subtle: var(--color-red-50);
   --destructive-border: var(--color-red-500);
   --destructive-border-subtle: var(--color-red-200);
-  --destructive-text: var(--color-red-600);
-  --warning-subtle: var(--color-yellow-50);
-  --warning-border: var(--color-yellow-500);
-  --warning-border-subtle: var(--color-yellow-200);
-  --warning-text: var(--color-orange-800);
+  --positive-subtle: var(--color-emerald-50);
+  --positive-border: var(--color-emerald-500);
+  --positive-border-subtle: var(--color-emerald-200);
+  --warning-subtle: var(--color-amber-50);
+  --warning-border: var(--color-amber-500);
+  --warning-border-subtle: var(--color-amber-200);
   --infor-subtle: var(--color-blue-50);
   --infor-border: var(--color-blue-500);
   --infor-border-subtle: var(--color-blue-200);
-  --infor-text: var(--color-blue-800);
   --ghost: var(--color-white-alpha-001);
   --ghost-foreground: var(--color-brand-neutrals-700);
   --ghost-hover: var(--color-black-alpha-5);
@@ -133,6 +137,9 @@
   --primary-brand-fg: var(--color-brand-shades-500);
   --inverse-fg: var(--color-white-alpha-100);
   --destructive: #9e4042;
+  --positive: var(--color-emerald-400);
+  --warning: var(--color-amber-400);
+  --infor: var(--color-blue-400);
   --destructive-inverse-fg: var(--color-white-alpha-100);
   --border-primary: var(--color-brand-neutrals-700);
   --border-secondary: var(--color-brand-neutrals-800);
@@ -143,19 +150,20 @@
   --primary-hover: var(--color-brand-neutrals-950);
   --secondary-hover: var(--color-brand-neutrals-900);
   --primary-brand-hover: var(--color-brand-shades-500);
+  --destructive-text: var(--color-red-400);
   --destructive-hover: var(--color-red-500);
   --destructive-subtle: var(--color-red-950);
   --destructive-border: var(--color-red-500);
   --destructive-border-subtle: var(--color-red-800);
-  --destructive-text: var(--color-red-400);
-  --warning-subtle: var(--color-yellow-950);
-  --warning-border: var(--color-yellow-500);
-  --warning-border-subtle: var(--color-yellow-800);
-  --warning-text: var(--color-orange-300);
+  --positive-subtle: var(--color-emerald-950);
+  --positive-border: var(--color-emerald-500);
+  --positive-border-subtle: var(--color-emerald-800);
+  --warning-subtle: var(--color-amber-950);
+  --warning-border: var(--color-amber-500);
+  --warning-border-subtle: var(--color-amber-800);
   --infor-subtle: var(--color-blue-950);
   --infor-border: var(--color-blue-500);
   --infor-border-subtle: var(--color-blue-800);
-  --infor-text: var(--color-blue-300);
   --ghost: var(--color-white-alpha-001);
   --ghost-foreground: var(--color-brand-neutrals-200);
   --ghost-hover: var(--color-black-alpha-10);

package/src/styles/raw_colors.css

@@ -133,10 +133,10 @@
   --color-lime-950: #1a2e05;
 
   /* ========================= Emerald ========================= */
-  --color-emerald-50: #ecfdf5;
-  --color-emerald-100: #d1fae5;
-  --color-emerald-200: #a7f3d0;
-  --color-emerald-300: #6ee7b7;
+  --color-emerald-50: #f2fcf8;
+  --color-emerald-100: #d5f6e5;
+  --color-emerald-200: #afebcf;
+  --color-emerald-300: #76dfb5;
   --color-emerald-400: #34d399;
   --color-emerald-500: #10b981;
   --color-emerald-600: #059669;

package/src/styles/shadow.css

@@ -8,6 +8,9 @@
   --shadow-lg: 0px 10px 15px -3px var(--color-black-alpha-10), 0px 4px 6px -4px var(--color-black-alpha-10);
   --shadow-xl: 0px 20px 25px -5px var(--color-black-alpha-10), 0px 8px 10px -6px var(--color-black-alpha-10);
   --shadow-2xl: 0px 25px 50px -12px var(--color-black-alpha-10);
+  --shadow-sonner: 0px 4px 12px 0px var(--color-black-alpha-10);
+  --shadow-fixed-column-left: 6px 0 6px -4px var(--color-black-alpha-10);
+  --shadow-fixed-column-right: -6px 0 6px -4px var(--color-black-alpha-10);
 
   --shadow-focus-ring: 0 0 0 3px var(--focus-ring);
   --shadow-focus-ring-error: 0 0 0 3px var(--focus-ring-error);