webcake-ui-kit 1.1.24 → 1.1.26

package/package.json

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

package/src/components/breadcrumb/Breadcrumb.vue

@@ -5,8 +5,8 @@
         <li v-for="(item, index) in items" :key="index" class="ui-breadcrumb__row">
           <span v-if="index > 0" class="ui-breadcrumb__separator" aria-hidden="true">
             <slot name="separator" :type="separator">
-              <WkiSlash v-if="separator === 'slash'" :size="16" />
-              <WkiChevronRight v-else :size="16" />
+              <WkiSlash2 v-if="separator === 'slash'" :size="14" color="var(--mid-alt)" />
+              <WkiChevronRight v-else :size="14" color="var(--mid-alt)" />
             </slot>
           </span>
           <component
@@ -30,13 +30,13 @@
 </template>
 
 <script>
-import WkiSlash from '../../icons/Slash.vue'
+import WkiSlash2 from '../../icons/Slash2.vue'
 import WkiChevronRight from '../../icons/ChevronRight.vue'
 
 export default {
   name: 'Breadcrumb',
   components: {
-    WkiSlash,
+    WkiSlash2,
     WkiChevronRight
   },
   props: {

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

@@ -3,19 +3,22 @@
   align-items: stretch;
 }
 
-/* Reset radius on all children, re-apply corners to first/last */
-.ui-button-group .ui-btn {
+/* Reset radius on all children, re-apply corners to first/last.
+   Class doubled (.ui-btn.ui-btn) to outrank the per-size radius rules
+   in button.css (e.g. .ui-btn--xs.ui-btn--round-default), which tie at
+   the same specificity and would otherwise win on source order. */
+.ui-button-group .ui-btn.ui-btn {
   border-radius: 0;
 }
-.ui-button-group .ui-btn:first-child {
+.ui-button-group .ui-btn.ui-btn:first-child {
   border-top-left-radius: var(--rounded-xl);
   border-bottom-left-radius: var(--rounded-xl);
 }
-.ui-button-group .ui-btn:last-child {
+.ui-button-group .ui-btn.ui-btn:last-child {
   border-top-right-radius: var(--rounded-xl);
   border-bottom-right-radius: var(--rounded-xl);
 }
-.ui-button-group .ui-btn:first-child:last-child {
+.ui-button-group .ui-btn.ui-btn:first-child:last-child {
   border-radius: var(--rounded-xl);
 }
 

package/src/components/dialog/Dialog.vue

@@ -25,9 +25,6 @@
                     <div class="ui-dialog-header__title">
                       <slot name="title">{{ title }}</slot>
                     </div>
-                    <div v-if="hasSubText" class="ui-dialog-header__sub-text">
-                      <slot name="sub-text">{{ subText }}</slot>
-                    </div>
                   </div>
                   <div v-else class="ui-dialog-header__content ui-dialog-header__content--empty"></div>
                 </slot>
@@ -64,6 +61,10 @@
                   </Button>
                 </div>
               </div>
+
+              <div v-if="hasSubText" class="ui-dialog-header__sub-text">
+                <slot name="sub-text">{{ subText }}</slot>
+              </div>
             </div>
 
             <div v-show="!minimized" class="ui-dialog-body">

package/src/components/dropdown/Dropdown.vue

@@ -21,7 +21,7 @@
         <slot></slot>
       </span>
     </template>
-    <DropdownMenuItems v-if="hasItems" :items="items" :value="value" @select="onItemSelect" />
+    <DropdownMenuItems v-if="hasItems" :items="items" :value="value" @select="onItemSelect" :size="size" />
     <slot v-else name="overlay"></slot>
   </Menu>
 </template>
@@ -75,6 +75,11 @@ export default {
     value: {
       type: [String, Array],
       default: null
+    },
+    size: {
+      type: String,
+      default: 'md',
+      validator: v => ['sm', 'md', 'lg'].includes(v)
     }
   },
   emits: ['change', 'update:modelValue', 'open', 'close', 'select'],

package/src/components/dropdown/DropdownMenuItems.vue

@@ -17,12 +17,20 @@
           :class="{
             'ui-dropdown-items__item--disabled': child.disabled,
             'ui-dropdown-items__item--destructive': child.destructive,
-            'ui-dropdown-items__item--active': isActive(child.key)
+            'ui-dropdown-items__item--active': isActive(child.key),
+            [`ui-dropdown-items__item--${size}`]: size
           }"
           :title="child.title || undefined"
           @click="onItemClick(child)"
         >
-          <component :is="child.icon" v-if="child.icon && isComponent(child.icon)" :size="20" :color="item.colorIcon" />
+          <span class="ui-dropdown-items__icon" v-if="child.icon">
+            <component
+              :is="child.icon"
+              v-if="child.icon && isComponent(child.icon)"
+              :size="['sm', 'md'].includes(size) ? 16 : 20"
+              :color="item.colorIcon"
+            />
+          </span>
           <span class="ui-dropdown-items__label" :style="child.color ? { color: child.color } : undefined">{{
             child.label
           }}</span>
@@ -37,11 +45,19 @@
           class="ui-dropdown-items__submenu-label"
           :class="{
             'ui-dropdown-items__item--disabled': item.disabled,
-            'ui-dropdown-items__item--destructive': item.destructive
+            'ui-dropdown-items__item--destructive': item.destructive,
+            [`ui-dropdown-items__item--${size}`]: size
           }"
           :title="item.title || undefined"
         >
-          <component :is="item.icon" v-if="item.icon && isComponent(item.icon)" :size="20" :color="item.colorIcon" />
+          <span class="ui-dropdown-items__icon" v-if="item.icon">
+            <component
+              :is="item.icon"
+              v-if="item.icon && isComponent(item.icon)"
+              :size="['sm', 'md'].includes(size) ? 16 : 20"
+              :color="item.colorIcon"
+            />
+          </span>
           <span class="ui-dropdown-items__label" :style="item.color ? { color: item.color } : undefined">{{
             item.label
           }}</span>
@@ -53,12 +69,20 @@
           :class="{
             'ui-dropdown-items__item--disabled': child.disabled || item.disabled,
             'ui-dropdown-items__item--destructive': child.destructive,
-            'ui-dropdown-items__item--active': isActive(child.key)
+            'ui-dropdown-items__item--active': isActive(child.key),
+            [`ui-dropdown-items__item--${size}`]: size
           }"
           :title="child.title || undefined"
           @click="onItemClick(child, item)"
         >
-          <component :is="child.icon" v-if="child.icon && isComponent(child.icon)" :size="20" :color="item.colorIcon" />
+          <span class="ui-dropdown-items__icon" v-if="child.icon">
+            <component
+              :is="child.icon"
+              v-if="child.icon && isComponent(child.icon)"
+              :size="['sm', 'md'].includes(size) ? 16 : 20"
+              :color="item.colorIcon"
+            />
+          </span>
           <span class="ui-dropdown-items__label" :style="child.color ? { color: child.color } : undefined">{{
             child.label
           }}</span>
@@ -74,12 +98,20 @@
         :class="{
           'ui-dropdown-items__item--disabled': item.disabled,
           'ui-dropdown-items__item--destructive': item.destructive,
-          'ui-dropdown-items__item--active': isActive(item.key)
+          'ui-dropdown-items__item--active': isActive(item.key),
+          [`ui-dropdown-items__item--${size}`]: size
         }"
         :title="item.title || undefined"
         @click="onItemClick(item)"
       >
-        <component :is="item.icon" v-if="item.icon && isComponent(item.icon)" :size="20" :color="item.colorIcon" />
+        <span class="ui-dropdown-items__icon" v-if="item.icon">
+          <component
+            :is="item.icon"
+            v-if="item.icon && isComponent(item.icon)"
+            :size="['sm', 'md'].includes(size) ? 16 : 20"
+            :color="item.colorIcon"
+          />
+        </span>
         <span class="ui-dropdown-items__label" :style="item.color ? { color: item.color } : undefined">{{
           item.label
         }}</span>
@@ -114,6 +146,10 @@ export default {
     value: {
       type: [String, Array],
       default: null
+    },
+    size: {
+      type: String,
+      default: 'md'
     }
   },
 

package/src/components/dropdown/dropdown-menu-items.css

@@ -20,8 +20,6 @@
 .ui-dropdown-items__item {
   display: flex;
   align-items: center;
-  gap: var(--spacing-sm);
-  padding: var(--spacing-7p5) var(--spacing-sm);
   min-height: 36px;
   border-radius: var(--radius-8, 8px);
   font-family: var(--font-family-body);
@@ -61,6 +59,48 @@
   flex-direction: column;
 }
 
+.ui-dropdown-items__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  overflow: hidden;
+  width: 20px;
+  height: 20px;
+}
+
+/* size */
+
+.ui-dropdown-items__item--sm {
+  min-height: 28px;
+  padding: var(--spacing-2xs) var(--spacing-xs);
+  gap: var(--spacing-xs);
+  font-size: var(--paragraph-mini-font-size);
+  line-height: var(--paragraph-mini-line-height);
+}
+
+.ui-dropdown-items__item--sm .ui-dropdown-items__icon {
+  width: 16px;
+  height: 16px;
+}
+
+.ui-dropdown-items__item--sm .ui-dropdown-items__extra {
+  font-size: var(--paragraph-mini-font-size);
+  line-height: var(--paragraph-mini-line-height);
+}
+
+.ui-dropdown-items__item--md {
+  min-height: 32px;
+  padding: var(--spacing-5p5) var(--spacing-xs);
+  gap: var(--spacing-xs);
+}
+
+.ui-dropdown-items__item--lg {
+  min-height: 36px;
+  padding: var(--spacing-7p5) var(--spacing-sm);
+  gap: var(--spacing-sm);
+}
+
 /* Mini label, 500 weight, muted — 5.5px vertical / 8px horizontal */
 .ui-dropdown-items__group-label {
   display: flex;

package/src/components/select/Select.vue

@@ -128,6 +128,11 @@ export default {
         return ['xs', 'sm', 'md', 'lg'].indexOf(v) !== -1
       }
     },
+    optionSize: {
+      type: String,
+      default: 'md',
+      validator: v => ['xs', 'md', 'lg'].indexOf(v) !== -1
+    },
     value: {
       type: [String, Array],
       default: null
@@ -211,8 +216,8 @@ export default {
       return this.mode === 'tags' || this.searchable || !!this.filterOption
     },
     tagSize() {
-      if (this.size === 'sm' || this.size === 'md') return this.size
-      return 'sm'
+      if (['xs', 'sm'].includes(this.size)) return 'sm'
+      return 'md'
     },
     normalizedOptions() {
       var base = this.mode === 'tags' ? this.options.concat(this.tagOptions) : this.options

package/src/components/select/select.css

@@ -152,29 +152,27 @@
 
 /* — multiple mode — */
 .ui-select--multiple {
-  height: auto;
-  min-height: 36px;
+  height: 36px;
   align-items: center;
   flex-wrap: wrap;
   padding: var(--spacing-2xs) var(--spacing-sm) var(--spacing-2xs) var(--spacing-xs);
 }
 
 .ui-select--multiple.ui-select--lg {
-  min-height: 40px;
+  height: 40px;
   height: auto;
   padding: var(--spacing-xs) var(--spacing-md) var(--spacing-xs) var(--spacing-xs);
   align-items: center;
 }
 
 .ui-select--multiple.ui-select--sm {
-  min-height: 32px;
+  height: 32px;
   height: auto;
   padding: var(--spacing-5p5) var(--spacing-xs);
 }
 
 .ui-select--multiple.ui-select--xs {
-  min-height: 28px;
-  height: auto;
+  height: 28px;
   padding: var(--spacing-2xs) var(--spacing-6) var(--spacing-2xs) var(--spacing-2xs);
 }
 

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

@@ -3,7 +3,9 @@
     v-show="!isHidden"
     class="ui-select-option"
     :class="[
-      size === 'large' ? 'ui-select-option--large' : null,
+      effectiveSize === 'sm' ? 'ui-select-option--sm' : null,
+      effectiveSize === 'md' ? 'ui-select-option--md' : null,
+      effectiveSize === 'lg' ? 'ui-select-option--lg' : null,
       variant === 'destructive' ? 'ui-select-option--destructive' : null,
       isDisabled ? 'ui-select-option--disabled' : null,
       isSelected ? 'ui-select-option--selected' : null
@@ -48,9 +50,9 @@ export default {
     },
     size: {
       type: String,
-      default: 'regular',
+      default: null,
       validator: function (v) {
-        return ['regular', 'large'].indexOf(v) !== -1
+        return v === null || ['sm', 'md', 'lg'].indexOf(v) !== -1
       }
     },
     variant: {
@@ -84,6 +86,10 @@ export default {
   },
 
   computed: {
+    effectiveSize() {
+      // explicit prop wins; otherwise inherit from parent Select; else regular
+      return this.size || (this.select && (this.select.optionSize || this.select.size)) || 'md'
+    },
     isHidden() {
       if (!this.select || !this.select.filterText) return false
       var q = this.select.filterText.toLowerCase()

package/src/components/select-option/select_option.css

@@ -1,9 +1,7 @@
 .ui-select-option {
   display: flex;
   align-items: center;
-  gap: var(--spacing-xs);
   min-height: 32px;
-  padding: var(--spacing-5p5) var(--spacing-xs);
   border-radius: var(--radius);
   font-family: var(--font-family-body);
   font-size: var(--paragraph-small-font-size);
@@ -39,7 +37,21 @@
   pointer-events: none;
 }
 
-.ui-select-option--large {
+.ui-select-option--sm {
+  min-height: 28px;
+  padding: var(--spacing-2xs) var(--spacing-xs);
+  gap: var(--spacing-xs);
+  font-size: var(--paragraph-mini-font-size);
+  line-height: var(--paragraph-mini-line-height);
+}
+
+.ui-select-option--md {
+  min-height: 32px;
+  padding: var(--spacing-5p5) var(--spacing-xs);
+  gap: var(--spacing-xs);
+}
+
+.ui-select-option--lg {
   min-height: 36px;
   padding: var(--spacing-7p5) var(--spacing-sm);
   gap: var(--spacing-sm);

package/src/components/table/table.css

@@ -172,12 +172,19 @@
 }
 
 .ui-table__body::-webkit-scrollbar {
-  width: 6px;
+  width: 10px;
+}
+
+.ui-table__body::-webkit-scrollbar-track {
+  border-left: 1px solid var(--border-primary);
 }
 
 .ui-table__body::-webkit-scrollbar-thumb {
   background: var(--border-primary);
   border-radius: 3px;
+  border-left: 2px solid transparent;
+  border-right: 1px solid transparent;
+  background-clip: content-box;
 }
 
 .ui-table--scroll-y .ui-table__head {

package/src/components/toggle/Toggle.vue

@@ -46,7 +46,7 @@ export default {
     size: {
       type: String,
       default: 'md',
-      validator: v => ['xs', 'sm', 'md', 'lg'].includes(v)
+      validator: v => ['mini', 'xs', 'sm', 'md', 'lg'].includes(v)
     },
     roundness: {
       type: String,

package/src/components/toggle/toggle.css

@@ -37,7 +37,7 @@
 /* ============================================================
    Sizes  (Mini → xs, Small → sm, Default → md, Large → lg)
    ============================================================ */
-.ui-toggle--xs {
+.ui-toggle--mini {
   height: 24px;
   padding: var(--spacing-3) var(--spacing-2xs);
   gap: var(--spacing-6);
@@ -45,6 +45,19 @@
   line-height: var(--paragraph-mini-line-height);
   letter-spacing: var(--paragraph-mini-letter-spacing);
 }
+.ui-toggle--mini .ui-toggle__icon {
+  width: 16px;
+  height: 16px;
+}
+
+.ui-toggle--xs {
+  height: 28px;
+  padding: var(--spacing-6);
+  justify-content: center;
+  align-items: center;
+  gap: var(--spacing-2xs);
+  font-size: var(--paragraph-mini-font-size);
+}
 .ui-toggle--xs .ui-toggle__icon {
   width: 16px;
   height: 16px;
@@ -95,9 +108,12 @@
 .ui-toggle--round-default {
   border-radius: var(--radius-10);
 }
-.ui-toggle--xs.ui-toggle--round-default {
+.ui-toggle--mini.ui-toggle--round-default {
   border-radius: var(--rounded-lg);
 }
+.ui-toggle--xs.ui-toggle--round-default {
+  border-radius: var(--radius);
+}
 .ui-toggle--lg.ui-toggle--round-default {
   border-radius: var(--rounded-2xl);
 }
@@ -155,20 +171,28 @@
 .ui-toggle--icon-only {
   gap: 0;
 }
+.ui-toggle--icon-only.ui-toggle--mini {
+  height: 24px;
+  min-width: 24px;
+  padding: var(--spacing-3xs);
+}
 .ui-toggle--icon-only.ui-toggle--xs {
-  min-height: 28px;
   min-width: 28px;
-  padding: var(--spacing-3xs);
+  height: 28px;
+  padding: var(--spacing-6) var(--spacing-6) var(--spacing-6) var(--spacing-xs);
 }
 .ui-toggle--icon-only.ui-toggle--sm {
   min-width: 32px;
+  height: 32px;
   padding: var(--spacing-6);
 }
 .ui-toggle--icon-only.ui-toggle--md {
   min-width: 36px;
+  height: 36px;
   padding: var(--spacing-xs);
 }
 .ui-toggle--icon-only.ui-toggle--lg {
   min-width: 40px;
+  height: 40px;
   padding: var(--spacing-10);
 }

package/src/components/toggle-group/ToggleGroup.vue

@@ -16,7 +16,7 @@ export default {
     size: {
       type: String,
       default: 'md',
-      validator: v => ['xs', 'sm', 'md', 'lg'].includes(v)
+      validator: v => ['mini', 'xs', 'sm', 'md', 'lg'].includes(v)
     }
   },
   emits: ['change', 'update:modelValue'],

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

@@ -26,18 +26,30 @@
 }
 
 /* xs */
-.ui-toggle-group .ui-toggle--xs.ui-toggle--in-group:first-child {
+.ui-toggle-group .ui-toggle--mini.ui-toggle--in-group:first-child {
   border-top-left-radius: var(--rounded-lg);
   border-bottom-left-radius: var(--rounded-lg);
 }
-.ui-toggle-group .ui-toggle--xs.ui-toggle--in-group:last-child {
+.ui-toggle-group .ui-toggle--mini.ui-toggle--in-group:last-child {
   border-top-right-radius: var(--rounded-lg);
   border-bottom-right-radius: var(--rounded-lg);
 }
-.ui-toggle-group .ui-toggle--xs.ui-toggle--in-group:first-child:last-child {
+.ui-toggle-group .ui-toggle--mini.ui-toggle--in-group:first-child:last-child {
   border-radius: var(--rounded-lg);
 }
 
+.ui-toggle-group .ui-toggle--xs.ui-toggle--in-group:first-child {
+  border-top-left-radius: var(--radius);
+  border-bottom-left-radius: var(--radius);
+}
+.ui-toggle-group .ui-toggle--xs.ui-toggle--in-group:last-child {
+  border-top-right-radius: var(--radius);
+  border-bottom-right-radius: var(--radius);
+}
+.ui-toggle-group .ui-toggle--xs.ui-toggle--in-group:first-child:last-child {
+  border-radius: var(--radius);
+}
+
 /* lg */
 .ui-toggle-group .ui-toggle--lg.ui-toggle--in-group:first-child {
   border-top-left-radius: var(--rounded-2xl);

package/src/icons/Columns3Add.vue

@@ -0,0 +1,30 @@
+<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="M20.125 11.125V5C20.125 4.70163 20.0069 4.41508 19.7959 4.2041C19.5849 3.99312 19.2984 3.875 19 3.875H15.875V11.125C15.875 11.6082 15.4832 12 15 12C14.5168 12 14.125 11.6082 14.125 11.125V3.875H9.875V20.125H11.125C11.6082 20.125 12 20.5168 12 21C12 21.4832 11.6082 21.875 11.125 21.875H5C4.2375 21.875 3.50596 21.5724 2.9668 21.0332C2.42763 20.494 2.125 19.7625 2.125 19V5C2.125 4.2375 2.42763 3.50596 2.9668 2.9668C3.50596 2.42763 4.2375 2.125 5 2.125H19C19.7625 2.125 20.494 2.42763 21.0332 2.9668C21.5724 3.50596 21.875 4.2375 21.875 5V11.125C21.875 11.6082 21.4832 12 21 12C20.5168 12 20.125 11.6082 20.125 11.125ZM3.875 19C3.875 19.2984 3.99312 19.5849 4.2041 19.7959C4.41508 20.0069 4.70163 20.125 5 20.125H8.125V3.875H5C4.70163 3.875 4.41508 3.99312 4.2041 4.2041C3.99312 4.41508 3.875 4.70163 3.875 5V19Z"
+        fill="currentColor"
+      />
+      <path
+        d="M17.1026 18.8974V21.1026C17.1026 21.5982 17.5044 22 18 22C18.4956 22 18.8974 21.5982 18.8974 21.1026V18.8974H21.1026C21.5982 18.8974 22 18.4956 22 18C22 17.5044 21.5982 17.1026 21.1026 17.1026H18.8974V14.8974C18.8974 14.4018 18.4956 14 18 14C17.5044 14 17.1026 14.4018 17.1026 14.8974V17.1026H14.8974C14.4018 17.1026 14 17.5044 14 18C14 18.4956 14.4018 18.8974 14.8974 18.8974H17.1026Z"
+        fill="currentColor"
+      />
+    </svg>
+  </BaseIcon>
+</template>
+
+<script>
+import BaseIcon from './BaseIcon.vue'
+
+export default {
+  name: 'Columns3Add',
+  components: { BaseIcon },
+  inheritAttrs: false,
+  emits: [],
+  computed: {
+    listeners() {
+      return this.$listeners || {}
+    }
+  }
+}
+</script>

package/src/icons/Rows3Add.vue

@@ -0,0 +1,32 @@
+<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="M18 14C18.4956 14 18.8975 14.4018 18.8975 14.8975V17.1025H21.1025C21.5982 17.1025 22 17.5044 22 18C22 18.4956 21.5982 18.8975 21.1025 18.8975H18.8975V21.1025C18.8975 21.5982 18.4956 22 18 22C17.5044 22 17.1025 21.5982 17.1025 21.1025V18.8975H14.8975C14.4018 18.8975 14 18.4956 14 18C14 17.5044 14.4018 17.1025 14.8975 17.1025H17.1025V14.8975C17.1025 14.4018 17.5044 14 18 14Z"
+        fill="currentColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M19 2.125C20.5878 2.125 21.875 3.41218 21.875 5V11.125C21.875 11.6082 21.4832 12 21 12C20.5168 12 20.125 11.6082 20.125 11.125V9.875H3.875V14.125H11.125C11.6082 14.125 12 14.5168 12 15C12 15.4832 11.6082 15.875 11.125 15.875H3.875V19C3.875 19.6213 4.37868 20.125 5 20.125H11.125C11.6082 20.125 12 20.5168 12 21C12 21.4832 11.6082 21.875 11.125 21.875H5C3.41218 21.875 2.125 20.5878 2.125 19V5C2.125 3.41218 3.41218 2.125 5 2.125H19ZM5 3.875C4.37868 3.875 3.875 4.37868 3.875 5V8.125H20.125V5C20.125 4.37868 19.6213 3.875 19 3.875H5Z"
+        fill="currentColor"
+      />
+    </svg>
+  </BaseIcon>
+</template>
+
+<script>
+import BaseIcon from './BaseIcon.vue'
+
+export default {
+  name: 'Rows3Add',
+  components: { BaseIcon },
+  inheritAttrs: false,
+  emits: [],
+  computed: {
+    listeners() {
+      return this.$listeners || {}
+    }
+  }
+}
+</script>

package/src/icons/Slash2.vue

@@ -0,0 +1,26 @@
+<template>
+  <BaseIcon v-bind="$attrs" v-on="listeners">
+    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
+      <path
+        d="M9.55289 0.776523C9.67638 0.529534 9.9768 0.429396 10.2238 0.552891C10.4708 0.676385 10.5709 0.9768 10.4474 1.22379L4.44742 13.2238C4.32393 13.4708 4.02351 13.5709 3.77652 13.4474C3.52953 13.3239 3.4294 13.0235 3.55289 12.7765L9.55289 0.776523Z"
+        fill="currentColor"
+      />
+    </svg>
+  </BaseIcon>
+</template>
+
+<script>
+import BaseIcon from './BaseIcon.vue'
+
+export default {
+  name: 'Slash2',
+  components: { BaseIcon },
+  inheritAttrs: false,
+  emits: [],
+  computed: {
+    listeners() {
+      return this.$listeners || {}
+    }
+  }
+}
+</script>

package/src/icons/SquareNumber.vue

@@ -0,0 +1,30 @@
+<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="M20.125 5C20.125 4.37868 19.6213 3.875 19 3.875H5C4.37868 3.875 3.875 4.37868 3.875 5V19C3.875 19.6213 4.37868 20.125 5 20.125H19C19.6213 20.125 20.125 19.6213 20.125 19V5ZM21.875 19C21.875 20.5878 20.5878 21.875 19 21.875H5C3.41218 21.875 2.125 20.5878 2.125 19V5C2.125 3.41218 3.41218 2.125 5 2.125H19C20.5878 2.125 21.875 3.41218 21.875 5V19Z"
+        fill="currentColor"
+      />
+      <path
+        d="M13.0435 8.47455C13.0435 7.91043 12.5868 7.45312 12.0234 7.45312H9.69192C9.12856 7.45312 8.67188 7.91043 8.67188 8.47455C8.67188 9.03866 9.12856 9.49597 9.69192 9.49597H11.0034V14.4572H9.69192C9.12856 14.4572 8.67188 14.9145 8.67188 15.4786C8.67188 16.0427 9.12856 16.5 9.69192 16.5H14.355C14.9183 16.5 15.375 16.0427 15.375 15.4786C15.375 14.9145 14.9183 14.4572 14.355 14.4572H13.0435V8.47455Z"
+        fill="currentColor"
+      />
+    </svg>
+  </BaseIcon>
+</template>
+
+<script>
+import BaseIcon from './BaseIcon.vue'
+
+export default {
+  name: 'SquareNumber',
+  components: { BaseIcon },
+  inheritAttrs: false,
+  emits: [],
+  computed: {
+    listeners() {
+      return this.$listeners || {}
+    }
+  }
+}
+</script>

package/src/icons/index.js

@@ -1737,4 +1737,9 @@ export { default as WkiLayersUpToTop } from './LayersUpToTop.vue'
 export { default as WkiLayersDownToBottom } from './LayersDownToBottom.vue'
 export { default as WkiGeneratePrompt } from './GeneratePrompt.vue'
 export { default as WkiClippingMask } from './ClippingMask.vue'
+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'
+
 // --- AUTO-GENERATED LUCIDE EXPORTS END ---

package/src/styles/color_general.css

@@ -44,7 +44,7 @@
   --outline: var(--color-white-alpha-10);
   --outline-hover: var(--color-black-alpha-333);
   --outline-active: var(--color-black-alpha-5);
-  --accent-0: rgba(245, 245, 245, 0.5);
+  --accent-0: #fafafa;
   --accent-1: var(--color-brand-neutrals-100);
   --accent-2: var(--color-brand-neutrals-200);
   --border-0: var(--color-brand-neutrals-50);
@@ -156,7 +156,7 @@
   --outline: var(--color-white-alpha-5);
   --outline-hover: var(--color-black-alpha-10);
   --outline-active: var(--color-white-alpha-15);
-  --accent-0: rgba(38, 38, 38, 0.5);
+  --accent-0: var(--color-neutral-900);
   --accent-1: var(--color-brand-neutrals-800);
   --accent-2: var(--color-brand-neutrals-800);
   --border-0: var(--color-brand-neutrals-950);