webcake-ui-kit 1.1.31 → 1.1.33

package/package.json

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

package/src/components/button/button.css

@@ -4,7 +4,6 @@
 .ui-btn {
   display: inline-flex;
   align-items: center;
-  justify-content: center;
   border: 1px solid transparent;
   margin: 0;
   cursor: pointer;
@@ -21,6 +20,7 @@
 
 .ui-btn__label {
   display: inline-flex;
+  flex: 1;
 }
 
 .ui-btn__icon {

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'
-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'
+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'
 
 dayjs.extend(customParseFormat)
 dayjs.extend(localeData)

package/src/components/dialog/Dialog.vue

@@ -95,7 +95,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 +143,8 @@ export default {
       hasOpened: false,
       isVisible: false,
       minimized: false,
-      isFullscreen: false
+      isFullscreen: false,
+      activeZIndex: 0
     }
   },
   computed: {
@@ -151,7 +152,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 +226,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 +265,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-number/InputNumber.vue

@@ -8,6 +8,8 @@
       disabled && 'ui-input-number--disabled',
       $attrs.class
     ]"
+    :style="draggable && !focused && !disabled ? { cursor: 'ew-resize' } : {}"
+    @mousedown="onDragStart"
   >
     <span v-if="hasPrefix" class="ui-input-number__decoration ui-input-number__prefix" aria-hidden="true">
       <slot name="prefix"></slot>
@@ -17,13 +19,17 @@
       class="ui-input-number__field"
       type="text"
       inputmode="decimal"
-      :style="centered ? { textAlign: 'center' } : {}"
+      :style="{
+        ...(centered ? { textAlign: 'center' } : {}),
+        cursor: draggable && !focused && !disabled ? 'ew-resize' : ''
+      }"
       :value="displayValue"
       :placeholder="placeholder"
       :disabled="disabled"
       :readonly="readonly"
       :name="name"
       v-bind="{ ...$attrs, class: undefined }"
+      v-on="nativeListeners"
       @input="onInput"
       @focus="onFocus"
       @blur="onBlur"
@@ -61,13 +67,17 @@ export default {
       validator: v => ['default', 'round'].includes(v)
     },
     error: { type: Boolean, default: false },
-    centered: { type: Boolean, default: false }
+    centered: { type: Boolean, default: false },
+    draggable: { type: Boolean, default: false }
   },
   emits: ['input', 'update:modelValue', 'change', 'focus', 'blur', 'pressEnter'],
   data() {
     return {
       focused: false,
-      inputText: ''
+      inputText: '',
+      dragActive: false,
+      dragStartX: 0,
+      dragStartValue: 0
     }
   },
   computed: {
@@ -86,6 +96,11 @@ export default {
       const dot = s.indexOf('.')
       return dot >= 0 ? s.length - dot - 1 : 0
     },
+    nativeListeners() {
+      const excluded = new Set(['input', 'change', 'focus', 'blur', 'update:modelValue', 'pressEnter'])
+      const listeners = this.$listeners || {}
+      return Object.fromEntries(Object.entries(listeners).filter(([k]) => !excluded.has(k)))
+    },
     displayValue() {
       if (this.focused) return this.inputText
       const v = this.currentValue
@@ -174,6 +189,38 @@ export default {
       this.commitInput()
       this.$emit('blur', this.currentValue, e)
     },
+    onDragStart(e) {
+      if (!this.draggable || this.disabled || this.readonly) return
+      this.dragStartX = e.clientX
+      this.dragStartValue =
+        this.currentValue !== null && this.currentValue !== undefined ? Number(this.currentValue) : 0
+      this.dragActive = false
+      document.addEventListener('mousemove', this.onDragMove)
+      document.addEventListener('mouseup', this.onDragEnd)
+    },
+    onDragMove(e) {
+      const delta = e.clientX - this.dragStartX
+      if (!this.dragActive && Math.abs(delta) < 3) return
+      if (!this.dragActive) {
+        this.dragActive = true
+        document.body.style.cursor = 'ew-resize'
+        if (this.$refs.input) this.$refs.input.blur()
+      }
+      const newVal = this.clamp(this.toPrecision(this.dragStartValue + delta * this.step))
+      this.$emit('input', newVal)
+      this.$emit('update:modelValue', newVal)
+    },
+    onDragEnd(e) {
+      document.removeEventListener('mousemove', this.onDragMove)
+      document.removeEventListener('mouseup', this.onDragEnd)
+      if (this.dragActive) {
+        const delta = e.clientX - this.dragStartX
+        const newVal = this.clamp(this.toPrecision(this.dragStartValue + delta * this.step))
+        this.$emit('change', newVal)
+        document.body.style.cursor = ''
+      }
+      this.dragActive = false
+    },
     onKeydown(e) {
       if (e.key === 'ArrowUp') {
         e.preventDefault()
@@ -196,6 +243,11 @@ export default {
         this.$emit('pressEnter', this.currentValue, e)
       }
     }
+  },
+  beforeUnmount() {
+    document.removeEventListener('mousemove', this.onDragMove)
+    document.removeEventListener('mouseup', this.onDragEnd)
+    if (this.dragActive) document.body.style.cursor = ''
   }
 }
 </script>

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/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'
@@ -279,6 +283,31 @@ export default {
     },
     listStyle() {
       return { maxHeight: this.listHeight + 'px' }
+    },
+    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
     }
   },
 

package/src/components/slider/Slider.vue

@@ -191,6 +191,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/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/tooltip/Tooltip.vue

@@ -105,6 +105,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

package/src/icons/FrameCorners.vue

@@ -0,0 +1,36 @@
+<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.82716 13.3562C6.05636 13.3562 6.27659 13.4467 6.43866 13.6085C6.60073 13.7704 6.69136 13.9903 6.69136 14.2192V16.3151H8.79012C9.01932 16.3151 9.23955 16.4056 9.40162 16.5674C9.56369 16.7293 9.65432 16.9492 9.65432 17.1781C9.65432 17.407 9.56369 17.6269 9.40162 17.7887C9.23955 17.9506 9.01932 18.0411 8.79012 18.0411H5.82716C5.59796 18.0411 5.37773 17.9506 5.21566 17.7887C5.0536 17.6269 4.96296 17.407 4.96296 17.1781V14.2192C4.96296 13.9903 5.0536 13.7704 5.21566 13.6085C5.37773 13.4467 5.59796 13.3562 5.82716 13.3562Z"
+        fill="currentColor"
+      />
+      <path
+        d="M18.1728 5.9589C18.402 5.9589 18.6223 6.04941 18.7843 6.21126C18.9464 6.37311 19.037 6.59303 19.037 6.82192V9.78082C19.037 10.0097 18.9464 10.2296 18.7843 10.3915C18.6223 10.5533 18.402 10.6438 18.1728 10.6438C17.9436 10.6438 17.7234 10.5533 17.5613 10.3915C17.3993 10.2296 17.3086 10.0097 17.3086 9.78082V7.68493H15.2099C14.9807 7.68493 14.7604 7.59442 14.5984 7.43258C14.4363 7.27073 14.3457 7.0508 14.3457 6.82192C14.3457 6.59303 14.4363 6.37311 14.5984 6.21126C14.7604 6.04941 14.9807 5.9589 15.2099 5.9589H18.1728Z"
+        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"
+      />
+    </svg>
+  </BaseIcon>
+</template>
+
+<script>
+import BaseIcon from './BaseIcon.vue'
+
+export default {
+  name: 'FrameCorners',
+  components: { BaseIcon },
+  inheritAttrs: false,
+  emits: [],
+  computed: {
+    listeners() {
+      return this.$listeners || {}
+    }
+  }
+}
+</script>

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

@@ -1741,5 +1741,8 @@ export { default as WkiSlash2 } from './Slash2.vue'
 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;