webcake-ui-kit 1.1.32 → 1.1.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webcake-ui-kit",
-  "version": "1.1.32",
+  "version": "1.1.34",
   "description": "UI Kit for Vue 2 && 3 - Pure Options API",
   "main": "src/index.js",
   "module": "src/index.js",

package/src/components/alert-dialog/AlertDialog.vue

@@ -25,10 +25,17 @@
     </div>
     <template #footer>
       <slot name="footer">
-        <Button :variant="cancelVariant" class="ui-alert-dialog-btn" @click="handleCancel">{{ cancelText }}</Button>
-        <Button :variant="okVariant" :loading="confirmLoading" class="ui-alert-dialog-btn" @click="handleOk">{{
-          okText
+        <Button size="sm" :variant="cancelVariant" class="ui-alert-dialog-btn" @click="handleCancel">{{
+          cancelText
         }}</Button>
+        <Button
+          size="sm"
+          :variant="okVariant"
+          :loading="confirmLoading"
+          class="ui-alert-dialog-btn"
+          @click="handleOk"
+          >{{ okText }}</Button
+        >
       </slot>
     </template>
   </Dialog>

package/src/components/badge/badge.css

@@ -11,6 +11,8 @@
   font-weight: var(--paragraph-bold-font-weight);
   white-space: nowrap;
   transition: box-shadow 0.15s ease;
+  border-width: 1px;
+  border-style: solid;
 }
 
 .ui-badge--round-default {
@@ -21,35 +23,39 @@
 }
 
 .ui-badge--primary {
-  background: var(--primary-brand-bg);
-  color: var(--inverse-fg);
+  background: var(--positive-subtle);
+  color: var(--primary-brand-fg);
+  border-color: var(--positive-border-subtle);
 }
 .ui-badge--secondary {
   background: var(--secondary-bg);
   color: var(--secondary-fg);
+  border: none;
 }
 .ui-badge--outline {
   background: var(--outline);
   color: var(--primary-fg);
-  border-width: 1px;
-  border-style: solid;
   border-color: var(--border-primary);
 }
 .ui-badge--ghost {
   background: var(--ghost);
   color: var(--primary-fg);
+  border: none;
 }
 .ui-badge--destructive {
-  background: var(--destructive);
-  color: var(--destructive-inverse-fg);
+  background: var(--destructive-subtle);
+  color: var(--destructive);
+  border-color: var(--destructive-border-subtle);
 }
 .ui-badge--info {
-  background: var(--blue-500);
-  color: var(--inverse-fg);
+  background: var(--infor-subtle);
+  color: var(--infor);
+  border-color: var(--infor-border-subtle);
 }
 .ui-badge--warning {
-  background: var(--yellow-500);
-  color: var(--inverse-fg);
+  background: var(--warning-subtle);
+  color: var(--warning);
+  border-color: var(--warning-border-subtle);
 }
 
 .ui-badge:focus-visible {

package/src/components/button/Button.vue

@@ -48,7 +48,8 @@ export default {
     variant: {
       type: String,
       default: 'primary',
-      validator: v => ['primary', 'neutral', 'secondary', 'outline', 'ghost', 'destructive', 'link'].includes(v)
+      validator: v =>
+        ['primary', 'neutral', 'secondary', 'outline', 'ghost', 'destructive', 'link', 'ghost-destructive'].includes(v)
     },
     size: {
       type: String,

package/src/components/button/button.css

@@ -4,12 +4,12 @@
 .ui-btn {
   display: inline-flex;
   align-items: center;
-  justify-content: center;
   border: 1px solid transparent;
   margin: 0;
   cursor: pointer;
   font-family: var(--font-family-body);
   font-weight: var(--paragraph-medium-font-weight);
+  justify-content: center;
   text-align: center;
   white-space: nowrap;
   transition:
@@ -218,6 +218,17 @@
   background: var(--destructive-hover);
 }
 
+/* ghost-destructive */
+.ui-btn--ghost-destructive {
+  background: var(--ghost);
+  color: var(--destructive);
+}
+
+.ui-btn--ghost-destructive:hover,
+.ui-btn--ghost-destructive:active {
+  background: var(--destructive-subtle);
+}
+
 /* Link — text-only button on transparent ghost bg, brand-colored. */
 .ui-btn--link {
   background: var(--ghost);
@@ -252,7 +263,8 @@
   border-color: var(--border-focus);
 }
 
-.ui-btn--destructive:focus-visible {
+.ui-btn--destructive:focus-visible,
+.ui-btn--ghost-destructive:focus-visible {
   box-shadow: 0 0 0 3px var(--focus-ring-error);
 }
 
@@ -265,6 +277,13 @@
   pointer-events: none;
 }
 
+.ui-btn:not(.ui-btn--ghost):not(.ui-btn--link):disabled {
+  background: var(--muted-bg);
+  color: var(--muted-fg);
+  border: 1px solid var(--border-primary);
+  box-shadow: var(--shadow-xs);
+}
+
 /* ============================================================
    Icon-only — square button, uniform padding per size.
    Width = height; default slot content rendered in .ui-btn__icon

package/src/components/button-group/button-group.css

@@ -31,3 +31,7 @@
   position: relative;
   z-index: 1;
 }
+
+.ui-button-group .ui-btn--outline:disabled {
+  background: var(--secondary-hover) !important;
+}

package/src/components/date-picker/calendar-view.css

@@ -8,18 +8,19 @@
 /* Weekday header row — 7 fixed 36px tracks, muted labels. */
 .ui-cal-view__weekdays {
   display: grid;
-  grid-template-columns: repeat(7, 32px);
+  grid-template-columns: repeat(7, 36px);
 }
 
 .ui-cal-view__weekday {
   height: 32px;
-  width: 32px;
+  width: 36px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   color: var(--muted-fg);
-  font-size: var(--paragraph-small-font-size);
-  line-height: var(--paragraph-small-line-height);
+  font-size: var(--paragraph-mini-font-size);
+  line-height: var(--paragraph-mini-line-height);
+  letter-spacing: var(--paragraph-mini-letter-spacing);
 }
 
 /*
@@ -28,15 +29,15 @@
  */
 .ui-cal-view__grid {
   display: grid;
-  grid-template-columns: repeat(7, 32px);
+  grid-template-columns: repeat(7, 36px);
   row-gap: 1px;
   column-gap: 0;
 }
 
 .ui-cal-cell {
   position: relative;
-  width: 32px;
-  height: 32px;
+  width: 36px;
+  height: 36px;
   padding: 0;
   border: 0;
   background: transparent;
@@ -85,8 +86,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 32px;
-  height: 32px;
+  width: 36px;
+  height: 36px;
   border-radius: var(--rounded-lg);
   transition:
     background-color 0.12s ease,

package/src/components/date-picker/dayjs.js

@@ -11,15 +11,15 @@
 // (Vue 3) and webpack (Vue 2) bundlers.
 import dayjs from 'dayjs'
 
-import customParseFormat from 'dayjs/plugin/customParseFormat.js'
-import localeData from 'dayjs/plugin/localeData.js'
-import weekday from 'dayjs/plugin/weekday.js'
-import weekOfYear from 'dayjs/plugin/weekOfYear.js'
-import isoWeek from 'dayjs/plugin/isoWeek.js'
-import advancedFormat from 'dayjs/plugin/advancedFormat.js'
-import isSameOrBefore from 'dayjs/plugin/isSameOrBefore.js'
-import isSameOrAfter from 'dayjs/plugin/isSameOrAfter.js'
-import quarterOfYear from 'dayjs/plugin/quarterOfYear.js'
+import customParseFormat from 'dayjs/plugin/customParseFormat'
+import localeData from 'dayjs/plugin/localeData'
+import weekday from 'dayjs/plugin/weekday'
+import weekOfYear from 'dayjs/plugin/weekOfYear'
+import isoWeek from 'dayjs/plugin/isoWeek'
+import advancedFormat from 'dayjs/plugin/advancedFormat'
+import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'
+import isSameOrAfter from 'dayjs/plugin/isSameOrAfter'
+import quarterOfYear from 'dayjs/plugin/quarterOfYear'
 
 dayjs.extend(customParseFormat)
 dayjs.extend(localeData)

package/src/components/date-picker/time-panel.css

@@ -1,7 +1,7 @@
 .ui-time-panel {
   display: flex;
   gap: var(--spacing-3xs);
-  height: 200px;
+  height: 220px;
   font-family: var(--font-family-body);
 }
 

package/src/components/dialog/Dialog.vue

@@ -81,8 +81,10 @@
             >
               <div class="ui-dialog-footer__inner">
                 <slot name="footer">
-                  <Button :variant="cancelVariant" @click="handleCancel">{{ cancelText }}</Button>
-                  <Button :variant="okVariant" :loading="confirmLoading" @click="handleOk">{{ okText }}</Button>
+                  <Button size="sm" :variant="cancelVariant" @click="handleCancel">{{ cancelText }}</Button>
+                  <Button size="sm" :variant="okVariant" :loading="confirmLoading" @click="handleOk">{{
+                    okText
+                  }}</Button>
                 </slot>
               </div>
             </div>
@@ -95,7 +97,7 @@
 
 <script>
 import { acquire, release } from '../../floating/portal-root.js'
-import { bumpTo } from '../../floating/layer-manager.js'
+import { bumpTo, nextZIndex } from '../../floating/layer-manager.js'
 import Button from '../button/Button.vue'
 import WkiMinus from '../../icons/Minus.vue'
 import WkiUnfoldVertical from '../../icons/UnfoldVertical.vue'
@@ -143,7 +145,8 @@ export default {
       hasOpened: false,
       isVisible: false,
       minimized: false,
-      isFullscreen: false
+      isFullscreen: false,
+      activeZIndex: 0
     }
   },
   computed: {
@@ -151,7 +154,7 @@ export default {
       return this.modelValue !== undefined ? this.modelValue : this.open
     },
     rootStyle() {
-      return { zIndex: this.zIndex }
+      return { zIndex: this.activeZIndex || this.zIndex }
     },
     maskStyle() {
       if (!this.blur) return {}
@@ -225,6 +228,10 @@ export default {
   beforeUnmount() {
     this.cleanup()
   },
+  // eslint-disable-next-line vue/no-deprecated-destroyed-lifecycle, vue/no-dupe-keys
+  beforeDestroy() {
+    this.cleanup()
+  },
   methods: {
     setOpen(v) {
       this.$emit('change', v)
@@ -260,6 +267,7 @@ export default {
     onOpen() {
       this.hasOpened = true
       bumpTo(this.zIndex)
+      this.activeZIndex = nextZIndex()
       this.lockBody()
       if (typeof document !== 'undefined') {
         this._prevFocus = document.activeElement

package/src/components/dropdown/Dropdown.vue

@@ -5,6 +5,7 @@
     :offset="4"
     :close-on-esc="closeOnEsc"
     :disabled="disabled"
+    :persistent="persistent"
     @change="onMenuChange"
     @open="$emit('open')"
     @close="$emit('close')"
@@ -68,7 +69,7 @@ export default {
     },
     closeOnEsc: { type: Boolean, default: true },
     disabled: { type: Boolean, default: false },
-    width: { type: [String, Number], default: null },
+    width: { type: [String, Number], default: 280 },
     trigger: {
       type: Array,
       default: function () {
@@ -92,7 +93,8 @@ export default {
     },
     overlayClassName: { type: [String, Array, Object], default: null },
     overlayStyle: { type: [Object, Array], default: null },
-    showChecked: { type: Boolean, default: false }
+    showChecked: { type: Boolean, default: false },
+    persistent: { type: Boolean, default: false }
   },
   emits: ['change', 'update:modelValue', 'open', 'close', 'select'],
   data() {
@@ -149,6 +151,10 @@ export default {
   },
   beforeUnmount() {
     if (this._hoverTimer) clearTimeout(this._hoverTimer)
+  },
+  // eslint-disable-next-line vue/no-deprecated-destroyed-lifecycle, vue/no-dupe-keys
+  beforeDestroy() {
+    if (this._hoverTimer) clearTimeout(this._hoverTimer)
   }
 }
 </script>

package/src/components/input/input.css

@@ -95,6 +95,7 @@
 /* Disabled — visual only; cursor handled by inner field. */
 .ui-input--disabled {
   opacity: 0.5;
+  background: var(--secondary-bg);
 }
 
 .ui-input--disabled:focus-within {

package/src/components/menu/Menu.vue

@@ -66,6 +66,7 @@ export default {
     closeOnSelect: { type: Boolean, default: true },
     closeOnEsc: { type: Boolean, default: true },
     disabled: { type: Boolean, default: false },
+    persistent: { type: Boolean, default: false },
     anchorWidth: { type: Boolean, default: false },
     width: { type: [String, Number], default: null },
     overlayClassName: { type: [String, Array, Object], default: null },
@@ -110,9 +111,9 @@ export default {
         zIndex: this.zIndex || null
       }
       if (this.anchorWidth && this.pmAnchorWidth) {
-        style.minWidth = this.pmAnchorWidth + 'px'
+        style.width = this.pmAnchorWidth + 'px'
       } else if (this.width) {
-        style.minWidth = typeof this.width === 'number' ? `${this.width}px` : this.width
+        style.width = typeof this.width === 'number' ? `${this.width}px` : this.width
       }
       return style
     }
@@ -146,6 +147,10 @@ export default {
   beforeUnmount() {
     this._cleanupAll()
   },
+  // eslint-disable-next-line vue/no-deprecated-destroyed-lifecycle, vue/no-dupe-keys
+  beforeDestroy() {
+    this._cleanupAll()
+  },
   methods: {
     setOpenState(v) {
       this.$emit('change', v)
@@ -210,6 +215,7 @@ export default {
       this.closeMenu()
     },
     _coOnOutside() {
+      if (this.persistent) return
       this.closeMenu()
     },
     _cleanupAll() {

package/src/components/menu/menu.css

@@ -19,7 +19,6 @@
   box-shadow: var(--shadow-md);
   display: flex;
   flex-direction: column;
-  min-width: 176px;
   outline: none;
   pointer-events: auto;
   box-sizing: border-box;

package/src/components/message/Message.vue

@@ -1,25 +1,40 @@
 <template>
   <div class="ui-message" :class="`ui-message--${type}`" role="status" aria-live="polite">
-    <span class="ui-message__icon">
-      <WkSpinner v-if="type === 'loading'" size="sm" />
-      <component :is="iconComponent" v-else :size="18" />
-    </span>
-    <div class="ui-message__wrapper">
-      <span class="ui-message__content">
-        <slot>{{ content }}</slot>
+    <div class="ui-message__row">
+      <div v-if="imgSrc" class="ui-message__file-upload__preview">
+        <img :src="imgSrc" alt="" />
+      </div>
+      <span v-else class="ui-message__icon">
+        <WkSpinner v-if="type === 'loading'" size="sm" />
+        <component :is="iconComponent" v-else :size="18" />
       </span>
-      <span v-if="description" class="ui-message__description">{{ description }}</span>
+      <div class="ui-message__wrapper">
+        <span class="ui-message__content">
+          <slot>{{ content }}</slot>
+        </span>
+        <span v-if="description" class="ui-message__description">{{ description }}</span>
+      </div>
+      <WkButton
+        v-if="action"
+        size="mini"
+        :variant="progress ? 'ghost' : action.variant || 'primary'"
+        @click="handleAction"
+        :label="action.label"
+      >
+        <template #icon>
+          <WkiPause />
+        </template>
+      </WkButton>
     </div>
-    <WkButton v-if="action" size="mini" :variant="action.variant || 'primary'" @click="handleAction">{{
-      action.label
-    }}</WkButton>
+    <WkProgress v-if="progress !== null" :value="progress" />
   </div>
 </template>
 
 <script>
 import WkSpinner from '../spinner/Spinner.vue'
 import WkButton from '../button/Button.vue'
-import { WkiCircleCheck, WkiCircleX, WkiTriangleAlert, WkiInfo } from '../../icons'
+import WkProgress from '../progress/Progress.vue'
+import { WkiCircleCheck, WkiCircleX, WkiTriangleAlert, WkiInfo, WkiPause } from '../../icons'
 
 const ICON_BY_TYPE = {
   success: 'WkiCircleCheck',
@@ -30,7 +45,7 @@ const ICON_BY_TYPE = {
 
 export default {
   name: 'Message',
-  components: { WkSpinner, WkButton, WkiCircleCheck, WkiCircleX, WkiTriangleAlert, WkiInfo },
+  components: { WkSpinner, WkButton, WkProgress, WkiCircleCheck, WkiCircleX, WkiTriangleAlert, WkiInfo, WkiPause },
   props: {
     type: {
       type: String,
@@ -50,6 +65,14 @@ export default {
     action: {
       type: Object,
       default: null
+    },
+    progress: {
+      type: Number,
+      default: null
+    },
+    imgSrc: {
+      type: String,
+      default: ''
     }
   },
   emits: ['close'],

package/src/components/message/MessageContainer.vue

@@ -13,6 +13,8 @@
           :content="item.content"
           :description="item.description"
           :action="item.action"
+          :progress="item.progress"
+          :img-src="item.imgSrc"
           @close="remove(item.key)"
         />
       </div>
@@ -145,7 +147,9 @@ export default {
         existing.content = config.content != null ? config.content : ''
         existing.description = config.description || null
         existing.action = config.action || null
-        existing.onClose = config.onClose || null
+        ;((existing.progress = config.progress != null ? config.progress : null),
+          (existing.imgSrc = config.imgSrc),
+          (existing.onClose = config.onClose || null))
         this.scheduleRemoval(key, config.duration)
         return key
       }
@@ -155,6 +159,8 @@ export default {
         content: config.content != null ? config.content : '',
         description: config.description || null,
         action: config.action || null,
+        progress: config.progress != null ? config.progress : null,
+        imgSrc: config.imgSrc,
         onClose: config.onClose || null
       })
       // Enforce maxCount by evicting the oldest entries.

package/src/components/message/message.css

@@ -1,7 +1,7 @@
 .ui-message {
   pointer-events: auto;
   display: inline-flex;
-  align-items: center;
+  flex-direction: column;
   gap: var(--spacing-sm);
   max-width: 480px;
   padding: var(--spacing-sm) var(--spacing-md);
@@ -11,6 +11,12 @@
   box-shadow: var(--shadow-sonner);
 }
 
+.ui-message__row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
 .ui-message__icon {
   display: inline-flex;
   align-items: center;
@@ -35,6 +41,9 @@
   line-height: var(--paragraph-small-line-height);
   letter-spacing: var(--paragraph-small-letter-spacing, 0);
   word-break: break-word;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .ui-message__description {
@@ -46,6 +55,27 @@
   line-height: var(--paragraph-small-line-height);
   letter-spacing: var(--paragraph-small-letter-spacing);
   word-break: break-word;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  overflow: hidden;
+}
+
+.ui-message--file-upload {
+  width: 360px;
+}
+
+.ui-message__file-upload__preview {
+  width: 32px;
+  height: 32px;
+  border-radius: var(--rounded-sm);
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.ui-message__file-upload__preview img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 
 .ui-message--success .ui-message__icon {

package/src/components/message/message.js

@@ -87,6 +87,8 @@ function open(config) {
     content: config.content,
     description: config.description,
     action: config.action,
+    progress: config.progress != null ? config.progress : null,
+    imgSrc: config.imgSrc,
     duration,
     onClose: config.onClose
   })

package/src/components/select/Select.vue

@@ -24,8 +24,10 @@
             'ui-select--loading': loading,
             'ui-select--multiple': isMultiMode,
             'ui-select--searchable': isSearchable
-          }
+          },
+          externalClass
         ]"
+        :style="externalStyle"
         :tabindex="isSearchable ? -1 : 0"
         v-bind="attrs"
         @click="isSearchable ? openIfClosed() : toggle()"
@@ -118,6 +120,8 @@ export default {
     return { select: this }
   },
 
+  inheritAttrs: false,
+
   model: {
     prop: 'value',
     event: 'change'
@@ -172,7 +176,7 @@ export default {
       default: false
     },
     listHeight: {
-      type: Number,
+      type: [Number, String],
       default: 256
     },
     mode: {
@@ -278,7 +282,33 @@ export default {
       return !!((this.$scopedSlots && this.$scopedSlots['icon']) || this.$slots['icon'])
     },
     listStyle() {
-      return { maxHeight: this.listHeight + 'px' }
+      if (typeof this.listHeight === 'number') return { maxHeight: this.listHeight + 'px' }
+      return { maxHeight: this.listHeight }
+    },
+    externalClass() {
+      // Vue 3: class is in $attrs (inheritAttrs:false keeps it off the root)
+      if (this.$attrs && Object.prototype.hasOwnProperty.call(this.$attrs, 'class')) {
+        return this.$attrs.class
+      }
+      // Vue 2: class always lands on root regardless of inheritAttrs; also bind here
+      if (this.$vnode && this.$vnode.data) {
+        var parts = []
+        if (this.$vnode.data.staticClass) parts.push(this.$vnode.data.staticClass)
+        if (this.$vnode.data.class) parts.push(this.$vnode.data.class)
+        return parts.length ? parts : null
+      }
+      return null
+    },
+    externalStyle() {
+      // Vue 3: style is in $attrs
+      if (this.$attrs && Object.prototype.hasOwnProperty.call(this.$attrs, 'style')) {
+        return this.$attrs.style
+      }
+      // Vue 2: style always lands on root; also bind here for consistency
+      if (this.$vnode && this.$vnode.data) {
+        return this.$vnode.data.staticStyle || this.$vnode.data.style || null
+      }
+      return null
     }
   },
 
@@ -394,9 +424,16 @@ export default {
       }
     },
     registerOption(value, label) {
+      // Guard: SelectOption.updated() calls this on every re-render. Reassigning
+      // labelCache to a new object each time invalidates dependent computeds
+      // (selectedLabel, option.isHidden), forcing another render → updated() →
+      // registerOption → … an infinite loop that lags typing in searchable mode.
+      // Skip when the label is unchanged so the reference stays stable.
+      if (this.labelCache[value] === label) return
       this.labelCache = Object.assign({}, this.labelCache, { [value]: label })
     },
     setSlotOptionVisible(value, visible) {
+      if (this.slotOptionVisible[value] === visible) return
       this.slotOptionVisible = Object.assign({}, this.slotOptionVisible, { [value]: visible })
     },
     removeSlotOption(value) {

package/src/components/select-option/SelectOption.vue

@@ -85,6 +85,10 @@ export default {
     if (this.select) this.select.removeSlotOption(this.value)
   },
 
+  // eslint-disable-next-line vue/no-deprecated-destroyed-lifecycle, vue/no-dupe-keys
+  beforeDestroy() {
+    if (this.select) this.select.removeSlotOption(this.value)
+  },
   watch: {
     isHidden(val) {
       if (this.select) this.select.setSlotOptionVisible(this.value, !val)

package/src/components/slider/Slider.vue

@@ -4,7 +4,8 @@
     :class="{
       'ui-slider--vertical': orientation === 'vertical',
       'ui-slider--disabled': disabled,
-      'ui-slider--range': range
+      'ui-slider--range': range,
+      [`ui-slider--${variant}`]: variant
     }"
     :style="rootStyle"
   >
@@ -88,6 +89,13 @@ export default {
         return ['horizontal', 'vertical'].indexOf(v) !== -1
       }
     },
+    variant: {
+      type: String,
+      default: 'neutral',
+      validator: function (v) {
+        return ['neutral', 'primary'].indexOf(v) !== -1
+      }
+    },
     disabled: { type: Boolean, default: false },
     width: { type: [String, Number], default: null },
     stepRanges: {
@@ -191,6 +199,10 @@ export default {
   beforeUnmount: function () {
     this.cleanup()
   },
+  // eslint-disable-next-line vue/no-deprecated-destroyed-lifecycle, vue/no-dupe-keys
+  beforeDestroy() {
+    this.cleanup()
+  },
   methods: {
     cleanup: function () {
       document.removeEventListener('mousemove', this.boundMouseMove)

package/src/components/slider/slider.css

@@ -45,6 +45,10 @@
   pointer-events: none;
 }
 
+.ui-slider--neutral .ui-slider__fill {
+  background: var(--primary-fg);
+}
+
 .ui-slider--vertical .ui-slider__fill {
   top: auto;
   left: 0;
@@ -67,6 +71,10 @@
   transition: box-shadow 0.1s ease;
 }
 
+.ui-slider--neutral .ui-slider__thumb {
+  background: var(--primary-fg);
+}
+
 .ui-slider--vertical .ui-slider__thumb {
   top: auto;
   left: 50%;
@@ -79,6 +87,12 @@
     0 0 0 5px color-mix(in srgb, var(--primary-brand-bg) 20%, transparent);
 }
 
+.ui-slider--neutral .ui-slider__thumb:hover {
+  box-shadow:
+    var(--shadow-xs),
+    0 0 0 5px color-mix(in srgb, var(--primary-fg) 20%, transparent);
+}
+
 .ui-slider__thumb:focus-visible {
   box-shadow: var(--shadow-xs), var(--shadow-focus-ring);
 }

package/src/components/tag/Tag.vue

@@ -1,5 +1,8 @@
 <template>
-  <span class="ui-tag" :class="[`ui-tag--type-${type}`, `ui-tag--${size}`, { 'ui-tag--with-icon': hasIcon }]">
+  <span
+    :class="['ui-tag', `ui-tag--type-${type}`, `ui-tag--${size}`, { 'ui-tag--with-icon': hasIcon }]"
+    @click="handleClick"
+  >
     <span v-if="hasIcon" class="ui-tag__icon"><slot name="icon" /></span>
     <span class="ui-tag__label"
       ><slot>{{ label }}</slot></span
@@ -35,11 +38,16 @@ export default {
     closable: { type: Boolean, default: false },
     label: { type: String, default: '' }
   },
-  emits: ['close'],
+  emits: ['close', 'click'],
   computed: {
     hasIcon: function () {
       return !!((this.$scopedSlots && this.$scopedSlots['icon']) || this.$slots['icon'])
     }
+  },
+  methods: {
+    handleClick(e) {
+      this.$emit('click', e)
+    }
   }
 }
 </script>

package/src/components/toggle/toggle.css

@@ -132,7 +132,6 @@
 }
 .ui-toggle--variant-outlined.ui-toggle--active {
   background: var(--outline-active);
-  color: var(--primary-fg);
 }
 
 /* ============================================================
@@ -165,6 +164,14 @@
   pointer-events: none;
 }
 
+.ui-toggle--variant-outlined:disabled {
+  background: var(--secondary-bg);
+}
+
+.ui-toggle--variant-outlined.ui-toggle--active:disabled {
+  background: var(--tertiary-bg);
+}
+
 /* ============================================================
    Icon-only — square button per size
    ============================================================ */

package/src/components/tooltip/Tooltip.vue

@@ -26,7 +26,12 @@
       <span class="ui-tooltip__text">
         <slot name="content">{{ title }}</slot>
       </span>
-      <span v-if="arrow" :class="['ui-tooltip__arrow', `ui-tooltip__arrow--${side}`]" aria-hidden="true"></span>
+      <span
+        v-if="arrow"
+        :class="['ui-tooltip__arrow', `ui-tooltip__arrow--${side}`]"
+        :style="arrowStyle"
+        aria-hidden="true"
+      ></span>
     </span>
   </span>
 </template>
@@ -36,6 +41,7 @@ import { acquire, release } from '../../floating/portal-root.js'
 import { nextZIndex } from '../../floating/layer-manager.js'
 
 const GAP = 4
+const EDGE_PAD = 4
 
 export default {
   name: 'Tooltip',
@@ -61,12 +67,14 @@ export default {
   data() {
     return {
       hovered: false,
-      positionStyle: {}
+      triggerInView: true,
+      positionStyle: {},
+      arrowStyle: {}
     }
   },
   computed: {
     isVisible() {
-      return this.open || this.hovered
+      return (this.open || this.hovered) && this.triggerInView
     },
     hasMaxWidth() {
       return this.maxWidth !== '' && this.maxWidth !== null && this.maxWidth !== undefined
@@ -81,22 +89,42 @@ export default {
   },
   watch: {
     isVisible(v) {
-      if (v) this.$nextTick(this.updatePosition)
+      if (v) {
+        this.$nextTick(() => {
+          this._mountToPortal()
+          this.updatePosition()
+        })
+      } else {
+        this._unmountFromPortal()
+      }
     },
     side() {
       if (this.isVisible) this.$nextTick(this.updatePosition)
     }
   },
   mounted() {
-    if (typeof document !== 'undefined' && this.$refs.tooltip) {
-      this._tooltipPortalRoot = acquire()
-      if (this._tooltipPortalRoot) {
-        this._tooltipPortalRoot.appendChild(this.$refs.tooltip)
-      }
+    const tip = this.$refs.tooltip
+    if (tip) {
+      this._originalParent = tip.parentNode
+      this._originalNextSibling = tip.nextSibling
+    }
+    if (typeof IntersectionObserver !== 'undefined' && this.$refs.trigger) {
+      this._triggerObserver = new IntersectionObserver(
+        ([entry]) => {
+          this.triggerInView = entry.isIntersecting
+        },
+        { threshold: 0 }
+      )
+      this._triggerObserver.observe(this.$refs.trigger)
     }
     window.addEventListener('scroll', this.onScrollOrResize, true)
     window.addEventListener('resize', this.onScrollOrResize)
-    if (this.open) this.$nextTick(this.updatePosition)
+    if (this.open) {
+      this.$nextTick(() => {
+        this._mountToPortal()
+        this.updatePosition()
+      })
+    }
     if (typeof this.$on === 'function') {
       // eslint-disable-next-line vue/no-deprecated-events-api
       this.$on('hook:beforeDestroy', this.cleanup)
@@ -105,6 +133,10 @@ export default {
   beforeUnmount() {
     this.cleanup()
   },
+  // eslint-disable-next-line vue/no-deprecated-destroyed-lifecycle, vue/no-dupe-keys
+  beforeDestroy() {
+    this.cleanup()
+  },
   methods: {
     onShow() {
       this.hovered = true
@@ -137,6 +169,17 @@ export default {
         top = t.top + (t.height - th) / 2
         left = t.right + GAP
       }
+      const vw = window.innerWidth
+      const vh = window.innerHeight
+      left = Math.max(EDGE_PAD, Math.min(left, vw - tw - EDGE_PAD))
+      top = Math.max(EDGE_PAD, Math.min(top, vh - th - EDGE_PAD))
+
+      if (this.side === 'top' || this.side === 'bottom') {
+        this.arrowStyle = { left: t.left + t.width / 2 - left + 'px' }
+      } else {
+        this.arrowStyle = { top: t.top + t.height / 2 - top + 'px' }
+      }
+
       this.positionStyle = {
         position: 'fixed',
         top: top + 'px',
@@ -144,11 +187,35 @@ export default {
         zIndex: nextZIndex()
       }
     },
+    _mountToPortal() {
+      const tip = this.$refs.tooltip
+      if (typeof document === 'undefined' || !tip) return
+      if (!this._tooltipPortalRoot) {
+        this._tooltipPortalRoot = acquire()
+      }
+      if (this._tooltipPortalRoot && tip.parentNode !== this._tooltipPortalRoot) {
+        this._tooltipPortalRoot.appendChild(tip)
+      }
+    },
+    _unmountFromPortal() {
+      const tip = this.$refs.tooltip
+      if (!tip || !this._tooltipPortalRoot) return
+      if (tip.parentNode === this._tooltipPortalRoot && this._originalParent) {
+        this._originalParent.insertBefore(tip, this._originalNextSibling || null)
+      }
+      release()
+      this._tooltipPortalRoot = null
+    },
     cleanup() {
+      if (this._triggerObserver) {
+        this._triggerObserver.disconnect()
+        this._triggerObserver = null
+      }
       window.removeEventListener('scroll', this.onScrollOrResize, true)
       window.removeEventListener('resize', this.onScrollOrResize)
-      if (this.$refs.tooltip && this.$refs.tooltip.parentNode) {
-        this.$refs.tooltip.parentNode.removeChild(this.$refs.tooltip)
+      const tip = this.$refs.tooltip
+      if (tip && tip.parentNode && tip.parentNode !== this._originalParent) {
+        tip.parentNode.removeChild(tip)
       }
       if (this._tooltipPortalRoot) {
         release()

package/src/icons/FrameCornersDash.vue

@@ -0,0 +1,48 @@
+<template>
+  <BaseIcon v-bind="$attrs" v-on="listeners">
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+      <path
+        d="M5.17284 14C5.40204 14 5.62227 14.0905 5.78434 14.2524C5.9464 14.4142 6.03704 14.6341 6.03704 14.863V16.9589H8.1358C8.365 16.9589 8.58523 17.0494 8.7473 17.2113C8.90937 17.3731 9 17.593 9 17.8219C9 18.0508 8.90937 18.2707 8.7473 18.4326C8.58523 18.5944 8.365 18.6849 8.1358 18.6849H5.17284C4.94364 18.6849 4.72341 18.5944 4.56134 18.4326C4.39927 18.2707 4.30864 18.0508 4.30864 17.8219V14.863C4.30864 14.6341 4.39927 14.4142 4.56134 14.2524C4.72341 14.0905 4.94364 14 5.17284 14Z"
+        fill="currentColor"
+      />
+      <path
+        d="M18.8272 5.31507C19.0564 5.31507 19.2766 5.40558 19.4387 5.56742C19.6007 5.72927 19.6914 5.9492 19.6914 6.17808V9.13699C19.6914 9.36587 19.6007 9.5858 19.4387 9.74765C19.2766 9.90949 19.0564 10 18.8272 10C18.598 10 18.3777 9.90949 18.2157 9.74765C18.0536 9.5858 17.963 9.36587 17.963 9.13699V7.0411H15.8642C15.635 7.0411 15.4148 6.95059 15.2527 6.78874C15.0906 6.62689 15 6.40697 15 6.17808C15 5.9492 15.0906 5.72927 15.2527 5.56742C15.4148 5.40558 15.635 5.31507 15.8642 5.31507H18.8272Z"
+        fill="currentColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M20.3951 3C20.8207 3 21.2293 3.1685 21.5303 3.46907C21.8313 3.76964 22 4.17767 22 4.60274V19.3973C22 19.8223 21.8313 20.2304 21.5303 20.5309C21.2293 20.8315 20.8207 21 20.3951 21H3.60494C3.17928 21 2.7707 20.8315 2.46971 20.5309C2.16873 20.2304 2 19.8223 2 19.3973V4.60274C2 4.17767 2.16873 3.76964 2.46971 3.46907C2.7707 3.1685 3.17928 3 3.60494 3H20.3951ZM3.7284 19.274H20.2716V4.72603H3.7284V19.274Z"
+        fill="currentColor"
+      />
+      <path
+        d="M12.1281 12.8517L12.8096 12.3073C13.1389 12.0442 13.1882 11.5689 12.9198 11.2456C12.6513 10.9224 12.1667 10.8736 11.8374 11.1367L11.156 11.6811C10.8267 11.9441 10.7774 12.4195 11.0458 12.7427C11.3143 13.066 11.7988 13.1148 12.1281 12.8517Z"
+        fill="currentColor"
+      />
+      <path
+        d="M8.72096 15.5736L9.4024 15.0292C9.7317 14.7662 9.78103 14.2909 9.51258 13.9676C9.24413 13.6443 8.75956 13.5955 8.43025 13.8586L7.74882 14.403C7.41951 14.6661 7.37018 15.1414 7.63863 15.4647C7.90708 15.7879 8.39165 15.8367 8.72096 15.5736Z"
+        fill="currentColor"
+      />
+      <path
+        d="M15.5353 10.1297L16.2168 9.58535C16.5461 9.32228 16.5954 8.84696 16.327 8.5237C16.0585 8.20044 15.5739 8.15165 15.2446 8.41472L14.5632 8.95911C14.2339 9.22219 14.1846 9.69751 14.453 10.0208C14.7215 10.344 15.206 10.3928 15.5353 10.1297Z"
+        fill="currentColor"
+      />
+    </svg>
+  </BaseIcon>
+</template>
+
+<script>
+import BaseIcon from './BaseIcon.vue'
+
+export default {
+  name: 'FrameCornersDash',
+  components: { BaseIcon },
+  inheritAttrs: false,
+  emits: [],
+  computed: {
+    listeners() {
+      return this.$listeners || {}
+    }
+  }
+}
+</script>

package/src/icons/Opacity.vue

@@ -0,0 +1,68 @@
+<template>
+  <BaseIcon v-bind="$attrs" v-on="listeners">
+    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+      <path
+        d="M4.96582 13.6934C5.56831 13.6934 6.05664 14.1817 6.05664 14.7842C6.05659 15.3866 5.56828 15.875 4.96582 15.875H4.9541C4.35164 15.875 3.86333 15.3866 3.86328 14.7842C3.86328 14.1817 4.35161 13.6934 4.9541 13.6934H4.96582Z"
+        fill="currentColor"
+      />
+      <path
+        d="M8.25098 13.6934C8.85339 13.6934 9.3418 14.1817 9.3418 14.7842C9.34175 15.3866 8.85336 15.8749 8.25098 15.875H8.23828C7.63598 15.8748 7.14751 15.3865 7.14746 14.7842C7.14746 14.1818 7.63595 13.6936 8.23828 13.6934H8.25098Z"
+        fill="currentColor"
+      />
+      <path
+        d="M11.5117 13.6934C12.1141 13.6935 12.6025 14.1818 12.6025 14.7842C12.6025 15.3865 12.114 15.8748 11.5117 15.875H11.499C10.8966 15.8749 10.4083 15.3866 10.4082 14.7842C10.4082 14.1817 10.8966 13.6935 11.499 13.6934H11.5117Z"
+        fill="currentColor"
+      />
+      <path
+        d="M14.7842 13.6934C15.3866 13.6934 15.875 14.1817 15.875 14.7842C15.875 15.3866 15.3866 15.875 14.7842 15.875H14.7715C14.1692 15.8748 13.6807 15.3865 13.6807 14.7842C13.6807 14.1818 14.1692 13.6936 14.7715 13.6934H14.7842Z"
+        fill="currentColor"
+      />
+      <path
+        d="M8.25098 10.4209C8.85339 10.421 9.3418 10.9093 9.3418 11.5117C9.34161 12.114 8.85327 12.6024 8.25098 12.6025H8.23828C7.63607 12.6023 7.14765 12.1139 7.14746 11.5117C7.14746 10.9093 7.63595 10.4211 8.23828 10.4209H8.25098Z"
+        fill="currentColor"
+      />
+      <path
+        d="M11.5234 10.4209C12.1259 10.4209 12.6143 10.9092 12.6143 11.5117C12.6141 12.114 12.1258 12.6025 11.5234 12.6025H11.5117C10.9093 12.6025 10.4211 12.114 10.4209 11.5117C10.4209 10.9092 10.9092 10.4209 11.5117 10.4209H11.5234Z"
+        fill="currentColor"
+      />
+      <path
+        d="M14.7842 10.4209C15.3866 10.4209 15.875 10.9093 15.875 11.5117C15.8748 12.114 15.3865 12.6025 14.7842 12.6025H14.7715C14.1693 12.6023 13.6809 12.1139 13.6807 11.5117C13.6807 10.9094 14.1692 10.4211 14.7715 10.4209H14.7842Z"
+        fill="currentColor"
+      />
+      <path
+        d="M11.5117 7.14746C12.1139 7.14765 12.6023 7.63607 12.6025 8.23828C12.6025 8.84065 12.114 9.32891 11.5117 9.3291H11.499C10.8966 9.32901 10.4082 8.84072 10.4082 8.23828C10.4084 7.63601 10.8967 7.14755 11.499 7.14746H11.5117Z"
+        fill="currentColor"
+      />
+      <path
+        d="M14.7842 7.14746C15.3865 7.14751 15.8748 7.63598 15.875 8.23828C15.875 8.84074 15.3866 9.32905 14.7842 9.3291H14.7715C14.1692 9.32887 13.6807 8.84063 13.6807 8.23828C13.6809 7.6361 14.1693 7.14769 14.7715 7.14746H14.7842Z"
+        fill="currentColor"
+      />
+      <path
+        d="M14.7842 3.875C15.3866 3.87505 15.875 4.3634 15.875 4.96582C15.875 5.56828 15.3866 6.05659 14.7842 6.05664H14.7715C14.1692 6.05641 13.6807 5.56817 13.6807 4.96582C13.6807 4.36351 14.1692 3.87523 14.7715 3.875H14.7842Z"
+        fill="currentColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M16.875 0C18.4628 0 19.75 1.28718 19.75 2.875V16.875C19.75 18.4628 18.4628 19.75 16.875 19.75H2.875C1.28718 19.75 0 18.4628 0 16.875V2.875C0 1.28718 1.28718 0 2.875 0H16.875ZM2.875 1.75C2.25368 1.75 1.75 2.25368 1.75 2.875V16.875C1.75 17.4963 2.25368 18 2.875 18H16.875C17.4963 18 18 17.4963 18 16.875V2.875C18 2.25368 17.4963 1.75 16.875 1.75H2.875Z"
+        fill="currentColor"
+      />
+    </svg>
+  </BaseIcon>
+</template>
+
+<script>
+import BaseIcon from './BaseIcon.vue'
+
+export default {
+  name: 'Opacity',
+  components: { BaseIcon },
+  inheritAttrs: false,
+  emits: [],
+  computed: {
+    listeners() {
+      return this.$listeners || {}
+    }
+  }
+}
+</script>

package/src/icons/index.js

@@ -1742,5 +1742,7 @@ export { default as WkiSquareNumber } from './SquareNumber.vue'
 export { default as WkiRows3Add } from './Rows3Add.vue'
 export { default as WkiColumns3Add } from './Columns3Add.vue'
 export { default as WkiFrameCorners } from './FrameCorners.vue'
+export { default as WkiFrameCornersDash } from './FrameCornersDash.vue'
+export { default as WkiOpacity } from './Opacity.vue'
 
 // --- AUTO-GENERATED LUCIDE EXPORTS END ---

package/src/styles/typography.css

@@ -15,8 +15,8 @@
 
   /* ========================= Heading 2 ========================= */
   --heading-2-font-family: var(--font-family-heading);
-  --heading-2-font-size: 30px;
-  --heading-2-line-height: 30px;
+  --heading-2-font-size: 32px;
+  --heading-2-line-height: 40px;
   --heading-2-font-weight: 600;
   --heading-2-letter-spacing: -1px;