webcake-ui-kit 1.1.9 → 1.1.11

package/package.json

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

package/src/components/input/Input.vue

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

package/src/components/input/input.css

@@ -49,6 +49,15 @@
   letter-spacing: var(--paragraph-mini-letter-spacing);
 }
 
+.ui-input--size-tiny {
+  height: 24px;
+  gap: var(--spacing-2xs);
+  padding: var(--spacing-2xs) var(--spacing-6);
+  font-size: var(--paragraph-mini-font-size);
+  line-height: var(--paragraph-mini-line-height);
+  letter-spacing: var(--paragraph-mini-letter-spacing);
+}
+
 /* Roundness — Mini uses smaller default radius per Figma. */
 .ui-input--round-default {
   border-radius: var(--rounded-xl);
@@ -58,6 +67,10 @@
   border-radius: var(--radius);
 }
 
+.ui-input--size-tiny.ui-input--round-default {
+  border-radius: var(--rounded-lg);
+}
+
 .ui-input--round-round {
   border-radius: var(--rounded-full);
 }
@@ -124,7 +137,8 @@
   color: var(--muted-fg);
 }
 
-.ui-input--size-xs .ui-input__decoration {
+.ui-input--size-xs .ui-input__decoration,
+.ui-input--size-tiny .ui-input__decoration {
   width: 16px;
   height: 16px;
 }

package/src/components/select/Select.vue

@@ -19,21 +19,56 @@
             'ui-select--open': open,
             'ui-select--disabled': disabled,
             'ui-select--error': error,
-            'ui-select--loading': loading
+            'ui-select--loading': loading,
+            'ui-select--multiple': isMultiMode,
+            'ui-select--searchable': isSearchable
           }
         ]"
-        tabindex="0"
+        :tabindex="isSearchable ? -1 : 0"
         v-bind="attrs"
-        @click="toggle"
-        @keydown.enter.prevent="toggle"
-        @keydown.space.prevent="toggle"
+        @click="isSearchable ? openIfClosed() : toggle()"
+        @keydown.enter.prevent="toggle()"
+        @keydown.space.prevent="toggle()"
       >
         <span class="ui-select__left">
           <span v-if="hasIconSlot" class="ui-select__icon">
             <slot name="icon" />
           </span>
           <span v-if="prepend" class="ui-select__prepend">{{ prepend }}</span>
-          <span class="ui-select__value" :class="{ 'ui-select__value--placeholder': !selectedLabel }">
+          <span v-if="isMultiMode" class="ui-select__tags">
+            <Tag
+              v-for="item in selectedItems"
+              :key="item.value"
+              :size="tagSize"
+              type="default"
+              :label="item.label"
+              :closable="!disabled"
+              @close="deselectItem(item.value)"
+            />
+            <input
+              v-if="isSearchable"
+              ref="searchInput"
+              class="ui-select__search"
+              type="text"
+              :value="filterText"
+              :placeholder="!selectedItems.length ? placeholder : ''"
+              @input="onFilterInput"
+              @click.stop="openIfClosed"
+              @keydown.stop="onSearchKeydown"
+            />
+          </span>
+          <input
+            v-else-if="isSearchable"
+            ref="searchInput"
+            class="ui-select__search ui-select__search--single"
+            type="text"
+            :value="open ? filterText : selectedLabel"
+            :placeholder="open ? selectedLabel || placeholder : !selectedLabel ? placeholder : ''"
+            @input="onFilterInput"
+            @click.stop="openIfClosed"
+            @keydown.stop="onSearchKeydown"
+          />
+          <span v-else class="ui-select__value" :class="{ 'ui-select__value--placeholder': !selectedLabel }">
             {{ selectedLabel || placeholder }}
           </span>
         </span>
@@ -46,7 +81,7 @@
     <div class="ui-select__list" :style="listStyle">
       <slot>
         <SelectOption
-          v-for="opt in normalizedOptions"
+          v-for="opt in filteredOptions"
           :key="opt.value"
           :value="opt.value"
           :label="opt.label"
@@ -62,11 +97,12 @@ import WkiChevronDown from '../../icons/ChevronDown.vue'
 import Menu from '../menu/Menu.vue'
 import SelectOption from '../select-option/SelectOption.vue'
 import Spinner from '../spinner/Spinner.vue'
+import Tag from '../tag/Tag.vue'
 
 export default {
   name: 'Select',
 
-  components: { Menu, SelectOption, Spinner, WkiChevronDown },
+  components: { Menu, SelectOption, Spinner, WkiChevronDown, Tag },
 
   provide() {
     return { select: this }
@@ -80,14 +116,14 @@ export default {
   props: {
     size: {
       type: String,
-      default: 'default',
+      default: 'md',
       validator: function (v) {
-        return ['xs', 'sm', 'default', 'lg'].indexOf(v) !== -1
+        return ['xs', 'sm', 'md', 'lg'].indexOf(v) !== -1
       }
     },
     value: {
-      type: String,
-      default: ''
+      type: [String, Array],
+      default: null
     },
     modelValue: {
       default: null
@@ -119,6 +155,21 @@ export default {
     listHeight: {
       type: Number,
       default: 256
+    },
+    mode: {
+      type: String,
+      default: 'single',
+      validator: function (v) {
+        return ['single', 'multiple', 'tags'].includes(v)
+      }
+    },
+    searchable: {
+      type: Boolean,
+      default: false
+    },
+    filterOption: {
+      type: Function,
+      default: null
     }
   },
 
@@ -127,26 +178,70 @@ export default {
   data() {
     return {
       isOpen: false,
-      labelCache: {}
+      labelCache: {},
+      filterText: '',
+      tagOptions: []
     }
   },
 
+  mounted() {
+    this._syncSlotLabels()
+  },
+
+  updated() {
+    this._syncSlotLabels()
+  },
+
   computed: {
     effectiveValue() {
       return this.modelValue !== null ? this.modelValue : this.value
     },
+    isMultiMode() {
+      return this.mode === 'multiple' || this.mode === 'tags'
+    },
+    isSearchable() {
+      return this.mode === 'tags' || this.searchable || !!this.filterOption
+    },
+    tagSize() {
+      if (this.size === 'sm' || this.size === 'md') return this.size
+      return 'sm'
+    },
     normalizedOptions() {
-      return this.options.map(opt =>
-        typeof opt === 'string'
+      var base = this.mode === 'tags' ? this.options.concat(this.tagOptions) : this.options
+      return base.map(function (opt) {
+        return typeof opt === 'string'
           ? { label: opt, value: opt, disabled: false }
           : { label: opt.label || opt.value, value: opt.value, disabled: !!opt.disabled }
-      )
+      })
+    },
+    filteredOptions() {
+      if (!this.filterText) return this.normalizedOptions
+      if (this.filterOption) {
+        return this.normalizedOptions.filter(opt => this.filterOption(this.filterText, opt))
+      }
+      var q = this.filterText.toLowerCase()
+      return this.normalizedOptions.filter(function (opt) {
+        return opt.label.toLowerCase().indexOf(q) !== -1
+      })
     },
     selectedLabel() {
+      if (this.isMultiMode) return ''
       if (!this.effectiveValue) return ''
       if (this.labelCache[this.effectiveValue]) return this.labelCache[this.effectiveValue]
       const opt = this.normalizedOptions.find(o => o.value === this.effectiveValue)
-      return opt ? opt.label : this.effectiveValue
+      if (opt) return opt.label
+      return this._findLabelInSlot(this.effectiveValue) || this.effectiveValue
+    },
+    selectedItems() {
+      if (!this.isMultiMode) return []
+      var values = Array.isArray(this.effectiveValue) ? this.effectiveValue : []
+      var self = this
+      return values.map(function (v) {
+        var opt = self.normalizedOptions.find(function (o) {
+          return o.value === v
+        })
+        return { value: v, label: opt ? opt.label : self.labelCache[v] || v }
+      })
     },
     hasIconSlot() {
       return !!((this.$scopedSlots && this.$scopedSlots['icon']) || this.$slots['icon'])
@@ -156,6 +251,24 @@ export default {
     }
   },
 
+  watch: {
+    isOpen: function (v) {
+      if (!v) {
+        this.filterText = ''
+      } else if (this.isSearchable) {
+        var self = this
+        // Double nextTick: Menu's handleOpen also uses $nextTick to call _fmFocus(float).
+        // Our first tick runs before Menu's, so Menu steals focus back. The second tick
+        // runs after Menu's floating-panel focus, letting us reclaim it for the input.
+        this.$nextTick(function () {
+          self.$nextTick(function () {
+            if (self.$refs.searchInput) self.$refs.searchInput.focus()
+          })
+        })
+      }
+    }
+  },
+
   methods: {
     onMenuChange(v) {
       this.isOpen = v
@@ -163,13 +276,129 @@ export default {
     onMenuClose() {
       this.isOpen = false
     },
+    openIfClosed() {
+      if (this.disabled || this.loading) return
+      if (!this.isOpen) this.isOpen = true
+    },
+    onFilterInput(e) {
+      this.filterText = e.target.value
+      if (!this.isOpen) this.isOpen = true
+    },
+    onSearchKeydown(e) {
+      if (e.key === 'Enter') {
+        e.preventDefault()
+        if (this.mode === 'tags' && this.filterText.trim()) {
+          const text = this.filterText.trim()
+          const existing = this.normalizedOptions.find(function (o) {
+            return o.label.toLowerCase() === text.toLowerCase() || o.value === text
+          })
+          const val = existing ? existing.value : text
+          if (!existing) {
+            this.tagOptions = this.tagOptions.concat([{ label: text, value: text, disabled: false }])
+          }
+          const current = Array.isArray(this.effectiveValue) ? this.effectiveValue.slice() : []
+          if (current.indexOf(val) === -1) {
+            current.push(val)
+            this.$emit('change', current)
+            this.$emit('update:modelValue', current)
+          }
+          this.filterText = ''
+        } else if (!this.isOpen) {
+          this.isOpen = true
+        }
+      } else if (e.key === 'Escape') {
+        e.preventDefault()
+        this.isOpen = false
+      } else if (e.key === 'Backspace' && this.isMultiMode && !this.filterText) {
+        const current = Array.isArray(this.effectiveValue) ? this.effectiveValue.slice() : []
+        if (current.length > 0) {
+          const removed = current[current.length - 1]
+          current.pop()
+          this.$emit('change', current)
+          this.$emit('update:modelValue', current)
+          if (this.mode === 'tags') {
+            this.tagOptions = this.tagOptions.filter(function (o) {
+              return o.value !== removed
+            })
+          }
+        }
+      }
+    },
     select(val) {
-      this.$emit('change', val)
-      this.$emit('update:modelValue', val)
-      this.isOpen = false
+      if (this.isMultiMode) {
+        var current = Array.isArray(this.effectiveValue) ? this.effectiveValue.slice() : []
+        var idx = current.indexOf(val)
+        if (idx === -1) current.push(val)
+        else current.splice(idx, 1)
+        this.$emit('change', current)
+        this.$emit('update:modelValue', current)
+        this.filterText = ''
+        this.$nextTick(function () {
+          if (this.$refs.searchInput) this.$refs.searchInput.focus()
+        })
+      } else {
+        this.$emit('change', val)
+        this.$emit('update:modelValue', val)
+        this.isOpen = false
+        this.filterText = ''
+        this.$nextTick(function () {
+          if (this.$refs.searchInput) this.$refs.searchInput.blur()
+        })
+      }
+    },
+    deselectItem(val) {
+      if (!this.isMultiMode) return
+      var current = Array.isArray(this.effectiveValue) ? this.effectiveValue.slice() : []
+      var idx = current.indexOf(val)
+      if (idx !== -1) {
+        current.splice(idx, 1)
+        this.$emit('change', current)
+        this.$emit('update:modelValue', current)
+      }
+      if (this.mode === 'tags') {
+        this.tagOptions = this.tagOptions.filter(function (o) {
+          return o.value !== val
+        })
+      }
     },
     registerOption(value, label) {
       this.labelCache = Object.assign({}, this.labelCache, { [value]: label })
+    },
+    _slotNodes() {
+      // Vue 3: $slots.default is a function; Vue 2: it's an array
+      return typeof this.$slots.default === 'function' ? this.$slots.default() : this.$slots.default || []
+    },
+    _syncSlotLabels() {
+      const collect = nodes => {
+        if (!Array.isArray(nodes)) return
+        nodes.forEach(vnode => {
+          if (!vnode) return
+          const props = vnode.props || (vnode.componentOptions && vnode.componentOptions.propsData)
+          if (props && props.value != null && props.label) {
+            this.registerOption(String(props.value), String(props.label))
+          }
+          if (Array.isArray(vnode.children)) collect(vnode.children)
+        })
+      }
+      collect(this._slotNodes())
+    },
+    _findLabelInSlot(value) {
+      const scan = nodes => {
+        if (!Array.isArray(nodes)) return null
+        for (const vnode of nodes) {
+          if (!vnode) continue
+          const props = vnode.props || (vnode.componentOptions && vnode.componentOptions.propsData)
+          if (props && String(props.value) === String(value) && props.label) {
+            return String(props.label)
+          }
+          if (Array.isArray(vnode.children)) {
+            const found = scan(vnode.children)
+            if (found) return found
+          }
+        }
+        return null
+      }
+      return scan(this._slotNodes())
     }
   }
 }

package/src/components/select/select.css

@@ -150,6 +150,77 @@
   line-height: var(--paragraph-mini-line-height);
 }
 
+/* — multiple mode — */
+.ui-select--multiple {
+  height: auto;
+  min-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: 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: auto;
+  padding: var(--spacing-5p5) var(--spacing-xs);
+}
+
+.ui-select--multiple.ui-select--xs {
+  min-height: 28px;
+  height: auto;
+  padding: var(--spacing-2xs) var(--spacing-6) var(--spacing-2xs) var(--spacing-2xs);
+}
+
+.ui-select--multiple .ui-select__chevron {
+  align-self: center;
+}
+
+.ui-select__tags {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-2xs);
+  flex: 1;
+  min-width: 0;
+}
+
+/* — search input (inline in trigger) — */
+.ui-select__search {
+  border: none;
+  outline: none;
+  background: transparent;
+  font-family: var(--font-family-body);
+  font-size: var(--paragraph-small-font-size);
+  line-height: var(--paragraph-small-line-height);
+  color: var(--primary-fg);
+  padding: 0;
+  margin: 0;
+  min-width: 60px;
+  flex: 1;
+}
+
+.ui-select__search::placeholder {
+  color: var(--muted-fg);
+}
+
+.ui-select__search--single {
+  width: 100%;
+  flex: 1;
+  min-width: 0;
+}
+
+.ui-select--xs .ui-select__search {
+  font-size: var(--paragraph-mini-font-size);
+  line-height: var(--paragraph-mini-line-height);
+}
+
 /* List wrapper inside the portal'd Menu. Width is anchored to trigger via the
    Menu component's anchorWidth prop (computes min-width). */
 .ui-select__list {

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

@@ -57,7 +57,12 @@ export default {
 
   computed: {
     isSelected() {
-      return !!(this.select && this.select.effectiveValue !== undefined && this.select.effectiveValue === this.value)
+      if (!this.select) return false
+      var val = this.select.effectiveValue
+      if (this.select.isMultiMode) {
+        return Array.isArray(val) && val.indexOf(this.value) !== -1
+      }
+      return val !== undefined && val === this.value
     },
     isDisabled() {
       return this.disabled || !!(this.select && this.select.disabled)

package/src/components/tag/Tag.vue

@@ -6,16 +6,16 @@
     >
     <span v-if="counter > 0" class="ui-tag__counter">{{ counter }}</span>
     <button v-if="closable" class="ui-tag__close" type="button" @click.stop="$emit('close')">
-      <svg class="ui-tag__close-icon" viewBox="0 0 12 12" fill="none">
-        <path d="M2.5 2.5L9.5 9.5M9.5 2.5L2.5 9.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
-      </svg>
+      <WkiX :size="12" class="ui-tag__close-icon" />
     </button>
   </span>
 </template>
 
 <script>
+import { WkiX } from '../../icons'
 export default {
   name: 'Tag',
+  components: { WkiX },
   props: {
     type: {
       type: String,

package/src/icons/LayersDown.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
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M1.96051 10.6146L8.96755 14.6329V12.5926L2.83712 9.07609C2.81768 9.06506 2.79704 9.047 2.78578 9.02767C2.7747 9.00847 2.76903 8.9866 2.769 8.96443C2.769 8.94205 2.77453 8.91953 2.78578 8.9002C2.79137 8.89063 2.79872 8.88224 2.80652 8.87451L2.83317 8.85375L11.4294 3.9249C11.6023 3.82501 11.8004 3.77077 12 3.77075C12.1996 3.77075 12.3958 3.82306 12.5686 3.92292L21.1639 8.85178C21.1832 8.86277 21.203 8.88097 21.2142 8.9002C21.2255 8.91953 21.231 8.94205 21.231 8.96443C21.231 8.98664 21.2253 9.00845 21.2142 9.02767C21.203 9.047 21.1863 9.06308 21.1668 9.07411L15.0327 12.5924V14.6335L22.0434 10.6126C22.3335 10.4473 22.5742 10.2087 22.7424 9.91996C22.9111 9.63003 23 9.29999 23 8.96443C23 8.62882 22.9112 8.29887 22.7424 8.00889C22.5736 7.71902 22.3311 7.47867 22.0395 7.31324L13.4521 2.39032C13.0104 2.13505 12.5101 2 12 2C11.4899 2.00002 10.9887 2.13402 10.5469 2.38933L1.96051 7.31423C1.66908 7.47967 1.42635 7.71914 1.25765 8.00889C1.08885 8.29886 1 8.62882 1 8.96443C1.00002 9.29999 1.08887 9.63003 1.25765 9.91996C1.42637 10.2097 1.66909 10.4492 1.96051 10.6146Z"
+        fill="currentColor"
+      />
+      <path
+        d="M12.7782 19.8192L15.1123 17.5476C15.2595 17.4057 15.4586 17.3265 15.6658 17.3274C15.873 17.3284 16.0713 17.4094 16.2172 17.5526C16.363 17.6959 16.4444 17.8897 16.4434 18.0913C16.4424 18.2929 16.3592 18.4859 16.212 18.6279L13.2761 21.485C12.9359 21.8148 12.4752 22 11.9949 22C11.5147 22 11.054 21.8148 10.7137 21.485L7.77788 18.6279C7.63068 18.4859 7.54744 18.2929 7.54647 18.0913C7.5455 17.8897 7.62687 17.6959 7.77269 17.5526C7.91852 17.4094 8.11684 17.3284 8.32404 17.3274C8.42663 17.327 8.52832 17.3462 8.62328 17.3839C8.71825 17.4217 8.80464 17.4773 8.87753 17.5476L11.2221 19.8293V10.2988C11.2221 10.0979 11.304 9.90535 11.45 9.76335C11.5959 9.62135 11.7938 9.54158 12.0001 9.54158C12.2065 9.54158 12.4044 9.62135 12.5503 9.76335C12.6962 9.90535 12.7782 10.0979 12.7782 10.2988V19.8192Z"
+        fill="currentColor"
+      />
+    </svg>
+  </BaseIcon>
+</template>
+
+<script>
+import BaseIcon from './BaseIcon.vue'
+
+export default {
+  name: 'LayersDown',
+  components: { BaseIcon },
+  inheritAttrs: false,
+  emits: [],
+  computed: {
+    listeners() {
+      return this.$listeners || {}
+    }
+  }
+}
+</script>

package/src/icons/LayersDownToBottom.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
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M22.75 6.87988C22.7461 7.36301 22.3513 7.75182 21.8682 7.74805C21.385 7.74423 20.9964 7.3493 21 6.86621C21.0002 6.84211 20.9934 6.81818 20.9805 6.79785C20.9675 6.77757 20.9448 6.75899 20.9229 6.74902L12.3428 2.84961C12.1973 2.78394 12.0395 2.75 11.8799 2.75C11.7199 2.75002 11.5627 2.78365 11.417 2.84961L2.81837 6.75977C2.79872 6.76983 2.78148 6.7841 2.76954 6.80273C2.75669 6.8229 2.74995 6.84719 2.75001 6.87109C2.75095 7.35413 2.36005 7.74685 1.87696 7.74805C1.39382 7.74913 1.00122 7.35816 1.00001 6.875C0.999118 6.51637 1.1012 6.16473 1.29395 5.8623C1.4867 5.55999 1.7674 5.3166 2.09278 5.16602L10.6943 1.25586C11.0669 1.08721 11.471 1.00002 11.8799 1C12.2889 1 12.6948 1.08714 13.0674 1.25586L21.6436 5.1543C21.9754 5.30343 22.2567 5.54635 22.4531 5.85254C22.6496 6.15884 22.7529 6.51602 22.75 6.87988ZM1.30762 12.9014C1.1092 12.5969 1.00298 12.2414 1.00294 11.8779C1.00294 11.5143 1.10903 11.1581 1.30762 10.8535C1.50425 10.5519 1.78389 10.3131 2.11231 10.166L10.6914 6.25684C11.0659 6.08602 11.4732 5.9971 11.8848 5.99707C12.2959 5.99707 12.703 6.08546 13.0772 6.25586L21.6563 10.1572C21.9851 10.3043 22.2651 10.5419 22.4619 10.8438C22.6605 11.1484 22.7666 11.5045 22.7666 11.8682C22.7665 12.2316 22.6604 12.5871 22.4619 12.8916C22.265 13.1936 21.9863 13.4321 21.6572 13.5791L14.875 16.6668V14.7438L20.9326 11.9863L20.9424 11.9824C20.9645 11.9726 20.9829 11.9558 20.9961 11.9355C21.0092 11.9154 21.0165 11.8922 21.0166 11.8682C21.0166 11.844 21.0093 11.8201 20.9961 11.7998C20.9829 11.7796 20.9645 11.7627 20.9424 11.7529L20.9326 11.749L12.3516 7.84863C12.2051 7.78186 12.0458 7.74707 11.8848 7.74707C11.764 7.74709 11.6444 7.76679 11.5303 7.80469L11.418 7.84863L2.8379 11.7588L2.82813 11.7637L2.79786 11.7822C2.78859 11.79 2.78014 11.7993 2.77344 11.8096C2.7603 11.8298 2.75391 11.8538 2.75391 11.8779C2.75396 11.9021 2.76025 11.926 2.77344 11.9463C2.78668 11.9665 2.81478 11.9863 2.83692 11.9961L8.875 14.7437V16.6663L2.12208 13.5938L2.00001 13.5342C1.72007 13.3857 1.48148 13.168 1.30762 12.9014Z"
+        fill="currentColor"
+      />
+      <path
+        d="M12.6447 20.4052L14.9538 18.1602C15.0994 18.02 15.2964 17.9417 15.5013 17.9427C15.7063 17.9436 15.9025 18.0237 16.0467 18.1652C16.191 18.3068 16.2715 18.4983 16.2705 18.6976C16.2696 18.8968 16.1872 19.0876 16.0416 19.2278L13.1373 22.0515C12.8007 22.3775 12.345 22.5605 11.8699 22.5605C11.3948 22.5605 10.939 22.3775 10.6024 22.0515L7.69811 19.2278C7.5525 19.0876 7.47015 18.8968 7.46919 18.6976C7.46822 18.4983 7.54873 18.3068 7.69298 18.1652C7.83724 18.0237 8.03343 17.9436 8.2384 17.9427C8.33989 17.9422 8.44049 17.9612 8.53443 17.9985C8.62838 18.0358 8.71385 18.0908 8.78595 18.1602L11.1053 20.4152V10.9964C11.1053 10.7979 11.1864 10.6076 11.3307 10.4672C11.4751 10.3269 11.6709 10.248 11.875 10.248C12.0791 10.248 12.2749 10.3269 12.4193 10.4672C12.5636 10.6076 12.6447 10.7979 12.6447 10.9964V20.4052Z"
+        fill="currentColor"
+      />
+    </svg>
+  </BaseIcon>
+</template>
+
+<script>
+import BaseIcon from './BaseIcon.vue'
+
+export default {
+  name: 'LayersDownToBottom',
+  components: { BaseIcon },
+  inheritAttrs: false,
+  emits: [],
+  computed: {
+    listeners() {
+      return this.$listeners || {}
+    }
+  }
+}
+</script>

package/src/icons/LayersUp.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
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M1.96051 13.3854L8.96755 9.36715V11.4074L2.83712 14.9239C2.81768 14.9349 2.79704 14.953 2.78578 14.9723C2.7747 14.9915 2.76903 15.0134 2.769 15.0356C2.769 15.0579 2.77453 15.0805 2.78578 15.0998C2.79137 15.1094 2.79872 15.1178 2.80652 15.1255L2.83317 15.1462L11.4294 20.0751C11.6023 20.175 11.8004 20.2292 12 20.2292C12.1996 20.2292 12.3958 20.1769 12.5686 20.0771L21.1639 15.1482C21.1832 15.1372 21.203 15.119 21.2142 15.0998C21.2255 15.0805 21.231 15.0579 21.231 15.0356C21.231 15.0134 21.2253 14.9916 21.2142 14.9723C21.203 14.953 21.1863 14.9369 21.1668 14.9259L15.0327 11.4076V9.36655L22.0434 13.3874C22.3335 13.5527 22.5742 13.7913 22.7424 14.08C22.9111 14.37 23 14.7 23 15.0356C23 15.3712 22.9111 15.7011 22.7424 15.9911C22.5736 16.281 22.3311 16.5213 22.0395 16.6868L13.4521 21.6097C13.0104 21.865 12.5101 22 12 22C11.4899 22 10.9887 21.866 10.5469 21.6107L1.96051 16.6858C1.66908 16.5203 1.42635 16.2809 1.25765 15.9911C1.08885 15.7011 1 15.3712 1 15.0356C1.00002 14.7 1.08887 14.37 1.25765 14.08C1.42637 13.7903 1.66909 13.5508 1.96051 13.3854Z"
+        fill="currentColor"
+      />
+      <path
+        d="M12.7782 4.18084L15.1123 6.45241C15.2595 6.59432 15.4586 6.67351 15.6658 6.67257C15.873 6.67162 16.0713 6.59061 16.2172 6.44736C16.363 6.30411 16.4444 6.11035 16.4434 5.90871C16.4424 5.70707 16.3592 5.51406 16.212 5.37215L13.2761 2.51502C12.9359 2.18519 12.4752 2 11.9949 2C11.5147 2 11.054 2.18519 10.7137 2.51502L7.77788 5.37215C7.63068 5.51406 7.54744 5.70707 7.54647 5.90871C7.5455 6.11035 7.62687 6.30411 7.77269 6.44736C7.91852 6.59061 8.11684 6.67162 8.32404 6.67257C8.42663 6.67303 8.52832 6.65383 8.62328 6.61606C8.71825 6.57828 8.80464 6.52268 8.87753 6.45241L11.2221 4.17074V13.7012C11.2221 13.9021 11.304 14.0946 11.45 14.2366C11.5959 14.3786 11.7938 14.4584 12.0001 14.4584C12.2065 14.4584 12.4044 14.3786 12.5503 14.2366C12.6962 14.0946 12.7782 13.9021 12.7782 13.7012V4.18084Z"
+        fill="currentColor"
+      />
+    </svg>
+  </BaseIcon>
+</template>
+
+<script>
+import BaseIcon from './BaseIcon.vue'
+
+export default {
+  name: 'LayersUp',
+  components: { BaseIcon },
+  inheritAttrs: false,
+  emits: [],
+  computed: {
+    listeners() {
+      return this.$listeners || {}
+    }
+  }
+}
+</script>

package/src/icons/LayersUpToTop.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
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M22.75 16.6806C22.7461 16.1975 22.3513 15.8087 21.8682 15.8124C21.385 15.8162 20.9964 16.2112 21 16.6943C21.0002 16.7184 20.9934 16.7423 20.9805 16.7626C20.9675 16.7829 20.9448 16.8015 20.9229 16.8115L12.3428 20.7109C12.1973 20.7765 12.0395 20.8105 11.8799 20.8105C11.7199 20.8105 11.5627 20.7768 11.417 20.7109L2.81837 16.8007C2.79872 16.7906 2.78148 16.7764 2.76954 16.7577C2.75669 16.7376 2.74995 16.7133 2.75001 16.6894C2.75095 16.2063 2.36005 15.8136 1.87696 15.8124C1.39382 15.8113 1.00122 16.2023 1.00001 16.6855C0.999118 17.0441 1.1012 17.3957 1.29395 17.6982C1.4867 18.0005 1.7674 18.2439 2.09278 18.3945L10.6943 22.3046C11.0669 22.4733 11.471 22.5605 11.8799 22.5605C12.2889 22.5605 12.6948 22.4733 13.0674 22.3046L21.6436 18.4062C21.9754 18.257 22.2567 18.0141 22.4531 17.7079C22.6496 17.4016 22.7529 17.0445 22.75 16.6806ZM1.30762 10.6591C1.1092 10.9636 1.00298 11.3191 1.00294 11.6825C1.00294 12.0462 1.10903 12.4024 1.30762 12.707C1.50425 13.0085 1.78389 13.2474 2.11231 13.3945L10.6914 17.3036C11.0659 17.4745 11.4732 17.5634 11.8848 17.5634C12.2959 17.5634 12.703 17.475 13.0772 17.3046L21.6563 13.4032C21.9851 13.2562 22.2651 13.0186 22.4619 12.7167C22.6605 12.4121 22.7666 12.0559 22.7666 11.6923C22.7665 11.3288 22.6604 10.9734 22.4619 10.6689C22.265 10.3669 21.9863 10.1284 21.6572 9.98137L14.875 6.8937V8.81667L20.9326 11.5741L20.9424 11.5781C20.9645 11.5878 20.9829 11.6047 20.9961 11.6249C21.0092 11.645 21.0165 11.6683 21.0166 11.6923C21.0166 11.7165 21.0093 11.7404 20.9961 11.7607C20.9829 11.7809 20.9645 11.7978 20.9424 11.8075L20.9326 11.8115L12.3516 15.7118C12.2051 15.7786 12.0458 15.8134 11.8848 15.8134C11.764 15.8134 11.6444 15.7937 11.5303 15.7558L11.418 15.7118L2.8379 11.8017L2.82813 11.7968L2.79786 11.7782C2.78859 11.7704 2.78014 11.7612 2.77344 11.7509C2.7603 11.7306 2.75391 11.7067 2.75391 11.6825C2.75396 11.6584 2.76025 11.6344 2.77344 11.6142C2.78668 11.5939 2.81478 11.5741 2.83692 11.5644L8.875 8.81673V6.8942L2.12208 9.96672L2.00001 10.0263C1.72007 10.1747 1.48148 10.3924 1.30762 10.6591Z"
+        fill="currentColor"
+      />
+      <path
+        d="M12.6447 3.15528L14.9538 5.40023C15.0994 5.54048 15.2964 5.61874 15.5013 5.61781C15.7063 5.61687 15.9025 5.53681 16.0467 5.39524C16.191 5.25367 16.2715 5.06218 16.2705 4.8629C16.2696 4.66363 16.1872 4.47288 16.0416 4.33263L13.1373 1.50899C12.8007 1.18302 12.345 1 11.8699 1C11.3948 1 10.939 1.18302 10.6024 1.50899L7.69811 4.33263C7.5525 4.47288 7.47015 4.66363 7.46919 4.8629C7.46822 5.06218 7.54873 5.25367 7.69298 5.39524C7.83724 5.53681 8.03343 5.61687 8.2384 5.61781C8.33989 5.61827 8.44049 5.5993 8.53443 5.56196C8.62838 5.52463 8.71385 5.46967 8.78595 5.40023L11.1053 3.1453V12.5641C11.1053 12.7626 11.1864 12.9529 11.3307 13.0932C11.4751 13.2336 11.6709 13.3124 11.875 13.3124C12.0791 13.3124 12.2749 13.2336 12.4193 13.0932C12.5636 12.9529 12.6447 12.7626 12.6447 12.5641V3.15528Z"
+        fill="currentColor"
+      />
+    </svg>
+  </BaseIcon>
+</template>
+
+<script>
+import BaseIcon from './BaseIcon.vue'
+
+export default {
+  name: 'LayersUpToTop',
+  components: { BaseIcon },
+  inheritAttrs: false,
+  emits: [],
+  computed: {
+    listeners() {
+      return this.$listeners || {}
+    }
+  }
+}
+</script>

package/src/icons/index.js

@@ -1731,4 +1731,8 @@ export { default as WkiZoomOut } from './ZoomOut.vue'
 export { default as WkiClickButton } from './ClickButton.vue'
 export { default as WkiSectionBuilder } from './SectionBuilder.vue'
 export { default as WkiGenerateImage } from './GenerateImage.vue'
+export { default as WkiLayersUp } from './LayersUp.vue'
+export { default as WkiLayersDown } from './LayersDown.vue'
+export { default as WkiLayersUpToTop } from './LayersUpToTop.vue'
+export { default as WkiLayersDownToBottom } from './LayersDownToBottom.vue'
 // --- AUTO-GENERATED LUCIDE EXPORTS END ---

package/src/styles/color_general.css

@@ -32,6 +32,12 @@
   --destructive-subtle: var(--color-red-50);
   --destructive-border: var(--color-red-500);
   --destructive-text: var(--color-red-600);
+  --warning-subtle: var(--color-orange-50);
+  --warning-border: var(--color-orange-400);
+  --warning-text: var(--color-orange-500);
+  --info-subtle: var(--color-indigo-50);
+  --info-border: var(--color-indigo-500);
+  --info-text: var(--color-indigo-600);
   --ghost: var(--color-white-alpha-001);
   --ghost-foreground: var(--color-brand-neutrals-700);
   --ghost-hover: var(--color-black-alpha-5);
@@ -138,6 +144,12 @@
   --destructive-subtle: var(--color-red-950);
   --destructive-border: var(--color-red-500);
   --destructive-text: var(--color-red-400);
+  --warning-subtle: var(--color-yellow-950);
+  --warning-border: var(--color-orange-600);
+  --warning-text: var(--color-orange-500);
+  --info-subtle: var(--color-indigo-950);
+  --info-border: var(--color-indigo-500);
+  --info-text: var(--color-indigo-600);
   --ghost: var(--color-white-alpha-001);
   --ghost-foreground: var(--color-brand-neutrals-200);
   --ghost-hover: var(--color-black-alpha-10);