@globalbrain/sefirot 2.21.0 → 2.23.0

package/lib/components/SDropdown.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { DropdownSection } from '../composables/Dropdown'
+import type { DropdownSection } from '../composables/Dropdown'
 import SDropdownSection from './SDropdownSection.vue'
 
 defineProps<{

package/lib/components/SDropdownSection.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { DropdownSection } from '../composables/Dropdown'
+import type { DropdownSection } from '../composables/Dropdown'
 import SDropdownSectionActions from './SDropdownSectionActions.vue'
 import SDropdownSectionComponent from './SDropdownSectionComponent.vue'
 import SDropdownSectionFilter from './SDropdownSectionFilter.vue'

package/lib/components/SDropdownSectionActions.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { DropdownSectionActionsOption } from '../composables/Dropdown'
+import type { DropdownSectionActionsOption } from '../composables/Dropdown'
 
 defineProps<{
   options: DropdownSectionActionsOption[]

package/lib/components/SDropdownSectionComponent.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { DefineComponent } from 'vue'
+import type { DefineComponent } from 'vue'
 
 defineProps<{
   comp: DefineComponent

package/lib/components/SDropdownSectionFilter.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import IconCheck from '@iconify-icons/ph/check'
-import { MaybeRef } from '@vueuse/core'
+import type { MaybeRef } from '@vueuse/core'
 import Fuse from 'fuse.js'
 import { computed, onMounted, ref, unref } from 'vue'
-import { DropdownSectionFilterOption, DropdownSectionFilterSelectedValue } from '../composables/Dropdown'
+import type { DropdownSectionFilterOption, DropdownSectionFilterSelectedValue } from '../composables/Dropdown'
 import { isArray } from '../support/Utils'
 import SDropdownSectionFilterItem from './SDropdownSectionFilterItem.vue'
 import SIcon from './SIcon.vue'
@@ -23,7 +23,7 @@ const fuse = computed(() => {
 })
 
 const filteredOptions = computed(() => {
-  return !props.search || !query.value
+  return (!props.search || !query.value)
     ? unref(props.options)
     : fuse.value.search(query.value).map((r) => r.item)
 })

package/lib/components/SDropdownSectionFilterItem.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { DropdownSectionFilterOption } from '../composables/Dropdown'
+import type { DropdownSectionFilterOption } from '../composables/Dropdown'
 import SDropdownSectionFilterItemAvatar from './SDropdownSectionFilterItemAvatar.vue'
 import SDropdownSectionFilterItemText from './SDropdownSectionFilterItemText.vue'
 

package/lib/components/SDropdownSectionMenu.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { DropdownSectionMenuOption } from '../composables/Dropdown'
+import type { DropdownSectionMenuOption } from '../composables/Dropdown'
 
 defineProps<{
   options: DropdownSectionMenuOption[]

package/lib/components/SIcon.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Icon, IconifyIcon } from '@iconify/vue/dist/offline'
-import { DefineComponent } from 'vue'
+import type { DefineComponent } from 'vue'
 
 defineProps<{
   icon: IconifyIcon | DefineComponent

package/lib/components/SInputAddon.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import IconCaretDown from '@iconify-icons/ph/caret-down-bold'
+import type { DropdownSection } from 'sefirot/composables/Dropdown'
 import {
-  DropdownSection,
   getSelectedOption,
   useManualDropdownPosition
 } from 'sefirot/composables/Dropdown'

package/lib/components/SInputBase.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
+import type { IconifyIcon } from '@iconify/vue/dist/offline'
 import IconQuestion from '@iconify-icons/ph/question'
-import { IconifyIcon } from '@iconify/vue/dist/offline'
-import { DefineComponent, computed, unref, useSlots } from 'vue'
-import { Validatable } from '../composables/Validation'
+import type { DefineComponent } from 'vue'
+import { computed, unref, useSlots } from 'vue'
+import type { Validatable } from '../composables/Validation'
 import SIcon from './SIcon.vue'
 import STooltip from './STooltip.vue'
 
@@ -122,11 +123,13 @@ function getErrorMsg(validation: Validatable) {
   display: flex;
   align-items: center;
   gap: 4px;
+  transition: color 0.25s;
 }
 
 .label-text-value {
   font-weight: 500;
   color: var(--input-label-color);
+  transition: color 0.25s;
 }
 
 .label-text-info {

package/lib/components/SInputCheckbox.vue

@@ -1,39 +1,54 @@
 <script setup lang="ts">
-import IconCheck from '@iconify-icons/ph/check'
-import { IconifyIcon } from '@iconify/vue/dist/offline'
-import { DefineComponent, PropType } from 'vue'
-import { Validatable } from '../composables/Validation'
+import type { IconifyIcon } from '@iconify/vue/dist/offline'
+import IconCheck from '@iconify-icons/ph/check-bold'
+import { computed } from 'vue'
+import type { Validatable } from '../composables/Validation'
 import SIcon from './SIcon.vue'
 import SInputBase from './SInputBase.vue'
 
 export type Size = 'mini' | 'small' | 'medium'
 export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
 
-const props = defineProps({
-  size: { type: String as PropType<Size>, default: 'small' },
-  label: { type: String, default: null },
-  info: { type: String, default: null },
-  note: { type: String, default: null },
-  help: { type: String, default: null },
-  checkIcon: { type: Object as PropType<IconifyIcon | DefineComponent>, default: null },
-  checkText: { type: String, default: null },
-  checkColor: { type: String as PropType<Color>, default: null },
-  text: { type: String, required: true },
-  modelValue: { type: Boolean, required: true },
-  validation: { type: Object as PropType<Validatable>, default: null }
+const props = withDefaults(defineProps<{
+  size?: Size
+  label?: string
+  info?: string
+  note?: string
+  help?: string
+  checkIcon?: IconifyIcon
+  checkText?: string
+  checkColor?: Color
+  text?: string
+  value?: boolean
+  modelValue?: boolean
+  validation?: Validatable
+  hideError?: boolean
+}>(), {
+  value: undefined,
+  modelValue: undefined
 })
 
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits<{
+  (e: 'update:model-value', value: boolean): void
+  (e: 'change', value: boolean): void
+}>()
 
-function emitChange() {
-  emit('update:modelValue', !props.modelValue)
+const _value = computed(() => {
+  return props.modelValue !== undefined
+    ? props.modelValue
+    : props.value !== undefined ? props.value : false
+})
+
+function onClick() {
+  emit('update:model-value', !_value.value)
+  emit('change', !_value.value)
 }
 </script>
 
 <template>
   <SInputBase
     class="SInputCheckbox"
-    :class="[size]"
+    :class="[size ?? 'small']"
     :label="label"
     :note="note"
     :info="info"
@@ -44,21 +59,21 @@ function emitChange() {
     :validation="validation"
   >
     <div class="container">
-      <div class="input" :class="{ on: modelValue }" role="button" @click="emitChange">
+      <div class="input" :class="{ on: _value }" role="button" @click="onClick">
         <div class="box">
           <div class="check">
             <SIcon :icon="IconCheck" class="check-icon" />
           </div>
         </div>
 
-        <p class="text">{{ text }}</p>
+        <p v-if="text" class="text">{{ text }}</p>
       </div>
     </div>
     <template v-if="$slots.info" #info><slot name="info" /></template>
   </SInputBase>
 </template>
 
-<style lang="postcss" scoped>
+<style scoped lang="postcss">
 .container {
   display: flex;
 }
@@ -68,19 +83,19 @@ function emitChange() {
   display: flex;
   align-items: center;
   height: 32px;
+  cursor: pointer;
 
   &:hover {
     .box {
-      border-color: var(--c-black);
+      border-color: var(--c-info-light);
     }
   }
 }
 
 .input.on {
   .box {
-    border-color: var(--c-black);
-    background-color: var(--c-black);
-    box-shadow: var(--shadow-depth-3);
+    border-color: var(--c-info-light);
+    background-color: var(--c-info-light);
   }
 
   .check {
@@ -91,11 +106,12 @@ function emitChange() {
 
 .box {
   position: relative;
-  border: 2px solid var(--c-text-3);
-  border-radius: 2px;
-  width: 18px;
-  height: 18px;
-  transition: border-color .25s, background-color .25s, box-shadow .25s;
+  border: 1px solid var(--c-divider-1);
+  border-radius: 4px;
+  width: 16px;
+  height: 16px;
+  background-color: var(--input-bg-color);
+  transition: border-color 0.25s, background-color 0.25s;
 }
 
 .check {
@@ -118,9 +134,9 @@ function emitChange() {
 
 .text {
   margin: 0;
-  padding-left: 12px;
+  padding-left: 10px;
   line-height: 20px;
   font-size: 14px;
-  font-weight: 500;
+  font-weight: 400;
 }
 </style>

package/lib/components/SInputCheckboxes.vue

@@ -1,50 +1,73 @@
 <script setup lang="ts">
-import { IconifyIcon } from '@iconify/vue/dist/offline'
-import { DefineComponent, PropType } from 'vue'
+import type { IconifyIcon } from '@iconify/vue/dist/offline'
+import { computed } from 'vue'
+import type { Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 import SInputCheckbox from './SInputCheckbox.vue'
 
 export type Size = 'mini' | 'small' | 'medium'
 export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
 
-interface CheckboxOption {
+export type Value = string | number | boolean
+
+export interface Option {
   label: string
-  value: any
+  value: Value
 }
 
-const props = defineProps({
-  size: { type: String as PropType<Size>, default: 'small' },
-  name: { type: String, default: null },
-  label: { type: String, default: null },
-  info: { type: String, default: null },
-  note: { type: String, default: null },
-  help: { type: String, default: null },
-  checkIcon: { type: Object as PropType<IconifyIcon | DefineComponent>, default: null },
-  checkText: { type: String, default: null },
-  checkColor: { type: String as PropType<Color>, default: null },
-  options: { type: Array as PropType<CheckboxOption[]>, required: true },
-  modelValue: { type: Array, required: true }
+const props = withDefaults(defineProps<{
+  size?: Size
+  name?: string
+  label?: string
+  info?: string
+  note?: string
+  help?: string
+  checkIcon?: IconifyIcon
+  checkText?: string
+  checkColor?: Color
+  options: Option[]
+  nullable?: boolean
+  value?: Value[]
+  modelValue?: Value[]
+  validation?: Validatable
+  hideError?: boolean
+}>(), {
+  nullable: true
 })
 
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits<{
+  (e: 'update:model-value', value: Value[]): void
+  (e: 'change', value: Value[]): void
+}>()
+
+const _value = computed(() => {
+  return props.modelValue !== undefined
+    ? props.modelValue
+    : props.value !== undefined ? props.value : []
+})
 
-function isChecked(value: unknown): boolean {
-  return props.modelValue.includes(value)
+function isChecked(value: Value): boolean {
+  return _value.value.includes(value)
 }
 
-function handleChange(value: unknown): void {
-  const distinct = props.modelValue
+function handleChange(value: Value): void {
+  const distinct = _value.value
     .filter((v) => v !== value)
-    .concat(props.modelValue.includes(value) ? [] : [value])
+    .concat(_value.value.includes(value) ? [] : [value])
 
-  emit('update:modelValue', distinct)
+  if (distinct.length === 0 && !props.nullable) {
+    return
+  }
+
+  emit('update:model-value', distinct)
+  emit('change', distinct)
 }
 </script>
 
 <template>
   <SInputBase
     class="SInputCheckboxes"
-    :class="[size]"
+    :class="[size ?? 'small']"
     :name="name"
     :label="label"
     :note="note"
@@ -56,7 +79,7 @@ function handleChange(value: unknown): void {
   >
     <div class="container">
       <div class="row">
-        <div v-for="option in options" :key="option.value" class="col">
+        <div v-for="option in options" :key="String(option.value)" class="col">
           <SInputCheckbox
             :text="option.label"
             :model-value="isChecked(option.value)"
@@ -68,17 +91,3 @@ function handleChange(value: unknown): void {
     <template v-if="$slots.info" #info><slot name="info" /></template>
   </SInputBase>
 </template>
-
-<style lang="postcss" scoped>
-.container {
-  display: flex;
-}
-
-.row {
-  margin: -2px -8px;
-}
-
-.col {
-  padding: 2px 8px;
-}
-</style>

package/lib/components/SInputDate.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
-import { IconifyIcon } from '@iconify/vue/dist/offline'
+import type { IconifyIcon } from '@iconify/vue/dist/offline'
 import { DatePicker } from 'v-calendar'
-import { DefineComponent, computed } from 'vue'
-import { Validatable } from '../composables/Validation'
-import { Day, day } from '../support/Day'
+import type { DefineComponent } from 'vue'
+import { computed } from 'vue'
+import type { Validatable } from '../composables/Validation'
+import type { Day } from '../support/Day'
+import { day } from '../support/Day'
 import SInputBase from './SInputBase.vue'
 
 export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'

package/lib/components/SInputDropdown.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
+import type { IconifyIcon } from '@iconify/vue/dist/offline'
 import IconCaretDown from '@iconify-icons/ph/caret-down-bold'
 import IconCaretUp from '@iconify-icons/ph/caret-up-bold'
-import { IconifyIcon } from '@iconify/vue/dist/offline'
 import xor from 'lodash-es/xor'
-import { DefineComponent, computed, ref } from 'vue'
-import { DropdownSectionFilter, useManualDropdownPosition } from '../composables/Dropdown'
+import type { DefineComponent } from 'vue'
+import { computed, ref } from 'vue'
+import type { DropdownSectionFilter } from '../composables/Dropdown'
+import { useManualDropdownPosition } from '../composables/Dropdown'
 import { useFlyout } from '../composables/Flyout'
-import { Validatable } from '../composables/Validation'
+import type { Validatable } from '../composables/Validation'
 import { isArray } from '../support/Utils'
 import SDropdown from './SDropdown.vue'
 import SIcon from './SIcon.vue'

package/lib/components/SInputFile.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { IconifyIcon } from '@iconify/vue/dist/offline'
-import { DefineComponent, computed, ref } from 'vue'
-import { Validatable } from '../composables/Validation'
+import type { IconifyIcon } from '@iconify/vue/dist/offline'
+import type { DefineComponent } from 'vue'
+import { computed, ref } from 'vue'
+import type { Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 
 export type Size = 'mini' | 'small' | 'medium'
@@ -110,7 +111,7 @@ function onChange(e: Event) {
   .placeholder {
     line-height: 30px;
     font-size: var(--input-font-size, var(--input-mini-font-size));
-    font-weight: 500;
+    font-weight: 400;
   }
 }
 
@@ -122,7 +123,7 @@ function onChange(e: Event) {
   .button {
     padding: 0 8px;
     line-height: 26px;
-    font-size: 14px;
+    font-size: 13px;
     font-weight: 500;
   }
 
@@ -132,10 +133,6 @@ function onChange(e: Event) {
     font-size: var(--input-font-size, var(--input-small-font-size));
     font-weight: 400;
   }
-
-  .placeholder {
-    font-weight: 500;
-  }
 }
 
 .SInputFile.medium {
@@ -156,10 +153,6 @@ function onChange(e: Event) {
     font-size: var(--input-font-size, var(--input-medium-font-size));
     font-weight: 400;
   }
-
-  .placeholder {
-    font-weight: 500;
-  }
 }
 
 .SInputFile.has-error {

package/lib/components/SInputHMS.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { IconifyIcon } from '@iconify/vue/dist/offline'
-import { DefineComponent, computed, ref } from 'vue'
-import { Validatable } from '../composables/Validation'
+import type { IconifyIcon } from '@iconify/vue/dist/offline'
+import type { DefineComponent } from 'vue'
+import { computed, ref } from 'vue'
+import type { Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 
 export type Size = 'mini' | 'small' | 'medium'

package/lib/components/SInputNumber.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { IconifyIcon } from '@iconify/vue/dist/offline'
-import { DefineComponent, computed } from 'vue'
-import { Validatable } from '../composables/Validation'
+import type { IconifyIcon } from '@iconify/vue/dist/offline'
+import type { DefineComponent } from 'vue'
+import { computed } from 'vue'
+import type { Validatable } from '../composables/Validation'
 import { isNullish, isString } from '../support/Utils'
 import SInputText from './SInputText.vue'
 
@@ -40,7 +41,7 @@ const emit = defineEmits<{
 }>()
 
 const _value = computed(() => {
-  return props.modelValue !== undefined
+  return (props.modelValue !== undefined)
     ? props.modelValue
     : props.value !== undefined ? props.value : null
 })
@@ -72,7 +73,7 @@ const displayValue = computed(() => {
     return props.displayValue
   }
 
-  return !props.separator || valueWithSeparator.value === null
+  return (!props.separator || valueWithSeparator.value === null)
     ? null
     : valueWithSeparator.value
 })

package/lib/components/SInputRadio.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { IconifyIcon } from '@iconify/vue/dist/offline'
-import { DefineComponent } from 'vue'
-import { Validatable } from '../composables/Validation'
+import type { IconifyIcon } from '@iconify/vue/dist/offline'
+import type { DefineComponent } from 'vue'
+import type { Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 
 export type Size = 'mini' | 'small' | 'medium'
@@ -112,7 +112,7 @@ function onClick() {
   align-items: center;
   border-radius: 50%;
   width: 100%;
-  background-color: var(--c-info-bg);
+  background-color: var(--c-info-light);
   opacity: 0;
   transform: scale(0);
   transition: opacity 0.25s, transform 0.1s;

package/lib/components/SInputRadios.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { IconifyIcon } from '@iconify/vue/dist/offline'
-import { DefineComponent, computed } from 'vue'
-import { Validatable } from '../composables/Validation'
+import type { IconifyIcon } from '@iconify/vue/dist/offline'
+import type { DefineComponent } from 'vue'
+import { computed } from 'vue'
+import type { Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 import SInputRadio from './SInputRadio.vue'
 

package/lib/components/SInputSelect.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
+import type { IconifyIcon } from '@iconify/vue/dist/offline'
 import IconCaretDown from '@iconify-icons/ph/caret-down-bold'
 import IconCaretUp from '@iconify-icons/ph/caret-up-bold'
-import { IconifyIcon } from '@iconify/vue/dist/offline'
-import { DefineComponent, computed, ref } from 'vue'
-import { Validatable } from '../composables/Validation'
+import type { DefineComponent } from 'vue'
+import { computed, ref } from 'vue'
+import type { Validatable } from '../composables/Validation'
 import SIcon from './SIcon.vue'
 import SInputBase from './SInputBase.vue'
 

package/lib/components/SInputSwitch.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { IconifyIcon } from '@iconify/vue/dist/offline'
-import { DefineComponent, computed } from 'vue'
-import { Validatable } from '../composables/Validation'
+import type { IconifyIcon } from '@iconify/vue/dist/offline'
+import type { DefineComponent } from 'vue'
+import { computed } from 'vue'
+import type { Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 
 export type Size = 'mini' | 'small' | 'medium'

package/lib/components/SInputSwitches.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { IconifyIcon } from '@iconify/vue/dist/offline'
-import { DefineComponent, computed } from 'vue'
-import { Validatable } from '../composables/Validation'
+import type { IconifyIcon } from '@iconify/vue/dist/offline'
+import type { DefineComponent } from 'vue'
+import { computed } from 'vue'
+import type { Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 import SInputSwitch from './SInputSwitch.vue'
 

package/lib/components/SInputText.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { IconifyIcon } from '@iconify/vue/dist/offline'
-import { DefineComponent, computed, ref } from 'vue'
-import { Validatable } from '../composables/Validation'
+import type { IconifyIcon } from '@iconify/vue/dist/offline'
+import type { DefineComponent } from 'vue'
+import { computed, ref } from 'vue'
+import type { Validatable } from '../composables/Validation'
 import { isString } from '../support/Utils'
 import SIcon from './SIcon.vue'
 import SInputBase from './SInputBase.vue'

package/lib/components/SInputTextarea.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { IconifyIcon } from '@iconify/vue/dist/offline'
-import { DefineComponent, computed } from 'vue'
-import { Validatable } from '../composables/Validation'
+import type { IconifyIcon } from '@iconify/vue/dist/offline'
+import { computed } from 'vue'
+import type { Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 
 export type Size = 'mini' | 'small' | 'medium'
@@ -14,21 +14,30 @@ const props = defineProps<{
   info?: string
   note?: string
   help?: string
-  checkIcon?: IconifyIcon | DefineComponent
+  checkIcon?: IconifyIcon
   checkText?: string
   checkColor?: Color
   placeholder?: string
   disabled?: boolean
   rows?: number | 'fill'
-  modelValue: string | null
+  value?: string | null
+  modelValue?: string | null
   hideError?: boolean
   validation?: Validatable
 }>()
 
 const emit = defineEmits<{
-  (e: 'update:modelValue', value: string): void
+  (e: 'update:model-value', value: string | null): void
+  (e: 'input', value: string | null): void
+  (e: 'blur', value: string | null): void
 }>()
 
+const _value = computed(() => {
+  return props.modelValue !== undefined
+    ? props.modelValue
+    : props.value !== undefined ? props.value : null
+})
+
 const classes = computed(() => [
   props.size ?? 'small',
   { disabled: props.disabled },
@@ -36,12 +45,17 @@ const classes = computed(() => [
 ])
 
 function emitInput(e: Event): void {
-  emit('update:modelValue', (e.target as HTMLInputElement).value)
+  const v = (e.target as HTMLInputElement).value || null
+  emit('update:model-value', v)
+  emit('input', v)
 }
 
 function emitBlur(e: FocusEvent): void {
   props.validation?.$touch()
-  emit('update:modelValue', (e.target as HTMLInputElement).value)
+
+  const v = (e.target as HTMLInputElement).value || null
+  emit('update:model-value', v)
+  emit('blur', v)
 }
 </script>
 
@@ -67,7 +81,7 @@ function emitBlur(e: FocusEvent): void {
       :placeholder="placeholder"
       :rows="rows ?? 3"
       :disabled="disabled"
-      :value="modelValue ?? ''"
+      :value="_value ?? undefined"
       @input="emitInput"
       @blur="emitBlur"
     />
@@ -78,21 +92,21 @@ function emitBlur(e: FocusEvent): void {
 <style scoped lang="postcss">
 .SInputTextarea.mini {
   .input {
-    padding: 6px 12px;
+    padding: 6px 10px;
     width: 100%;
     min-height: 80px;
     line-height: 20px;
-    font-size: 14px;
+    font-size: var(--input-font-size, var(--input-mini-font-size));
   }
 }
 
 .SInputTextarea.small {
   .input {
-    padding: 12px;
+    padding: 7px 12px;
     width: 100%;
     min-height: 96px;
     line-height: 24px;
-    font-size: 16px;
+    font-size: var(--input-font-size, var(--input-small-font-size));
   }
 }
 
@@ -102,25 +116,27 @@ function emitBlur(e: FocusEvent): void {
     width: 100%;
     min-height: 96px;
     line-height: 24px;
-    font-size: 16px;
+    font-size: var(--input-font-size, var(--input-medium-font-size));
   }
 }
 
 .SInputTextarea.disabled {
   .input,
   .input:hover {
-    background-color: var(--input-disabled-bg);
+    border-color: var(--input-disabled-border-color);
+    color: var(--input-disabled-value-color);
+    background-color: var(--input-disabled-bg-color);
     cursor: not-allowed;
   }
 }
 
 .SInputTextarea.has-error {
   .input {
-    border-color: var(--c-danger);
+    border-color: var(--input-error-border-color);
 
     &:hover,
     &:focus {
-      border-color: var(--c-danger);
+      border-color: var(--input-error-border-color);
     }
   }
 }
@@ -128,34 +144,24 @@ function emitBlur(e: FocusEvent): void {
 .input {
   display: block;
   flex-grow: 1;
-  border: 1px solid var(--c-divider);
+  border: 1px solid var(--input-border-color);
   border-radius: 6px;
   width: 100%;
   font-weight: 400;
-  background-color: var(--c-bg);
+  background-color: var(--input-bg-color);
   transition: border-color 0.25s, background-color 0.25s;
 
   &::placeholder {
-    font-weight: 500;
-    color: var(--c-text-3);
+    color: var(--input-placeholder-color);
   }
 
   &:hover {
-    border-color: var(--c-black);
+    border-color: var(--input-hover-border-color);
   }
 
   &:focus,
   &:hover:focus {
-    border-color: var(--c-info);
-  }
-
-  .dark &:hover {
-    border-color: var(--c-gray);
-  }
-
-  .dark &:focus,
-  .dark &:hover:focus {
-    border-color: var(--c-info);
+    border-color: var(--input-focus-border-color);
   }
 
   &.fill {

package/lib/components/SInputYMD.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { IconifyIcon } from '@iconify/vue/dist/offline'
-import { DefineComponent, computed, ref } from 'vue'
-import { Validatable } from '../composables/Validation'
+import type { IconifyIcon } from '@iconify/vue/dist/offline'
+import type { DefineComponent } from 'vue'
+import { computed, ref } from 'vue'
+import type { Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 
 export type Size = 'mini' | 'small' | 'medium'

package/lib/components/SMarkdown.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, nextTick, ref, watch } from 'vue'
-import { LinkCallback, LinkSubscriberPayload, useLink, useMarkdown } from '../composables/Markdown'
+import type { LinkCallback, LinkSubscriberPayload } from '../composables/Markdown'
+import { useLink, useMarkdown } from '../composables/Markdown'
 
 const props = defineProps<{
   tag?: string

package/lib/components/SSheetFooterAction.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import SButton, { Mode, Type } from './SButton.vue'
+import type { Mode, Type } from './SButton.vue'
+import SButton from './SButton.vue'
 
 defineProps<{
   type?: Type

package/lib/components/SSnackbar.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import IconX from '@iconify-icons/ph/x'
-import { SnackbarAction, useSnackbars } from '../stores/Snackbars'
+import type { SnackbarAction } from '../stores/Snackbars'
+import { useSnackbars } from '../stores/Snackbars'
 import SButton from './SButton.vue'
 import SIcon from './SIcon.vue'
 

package/lib/components/SStep.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import IconCheck from '@iconify-icons/ph/check'
 import IconX from '@iconify-icons/ph/x'
-import { PropType } from 'vue'
-import { BarMode, StepStatus } from '../composables/Step'
+import type { PropType } from 'vue'
+import type { BarMode, StepStatus } from '../composables/Step'
 import SIcon from './SIcon.vue'
 
 defineProps({

package/lib/components/SSteps.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { PropType, computed } from 'vue'
-import { BarMode, Step } from '../composables/Step'
+import type { PropType } from 'vue'
+import { computed } from 'vue'
+import type { BarMode, Step } from '../composables/Step'
 import SStep from './SStep.vue'
 
 const props = defineProps({
@@ -19,7 +20,7 @@ function getBarLeftMode(index: number): BarMode | null {
   const current = props.steps[index]
   const prev = props.steps[index - 1]
 
-  return isActive(prev) && isActive(current) ? 'active' : 'mute'
+  return (isActive(prev) && isActive(current)) ? 'active' : 'mute'
 }
 
 function getBarRightMode(index: number): BarMode | null {
@@ -30,7 +31,7 @@ function getBarRightMode(index: number): BarMode | null {
   const current = props.steps[index]
   const next = props.steps[index + 1]
 
-  return isActive(current) && isActive(next) ? 'active' : 'mute'
+  return (isActive(current) && isActive(next)) ? 'active' : 'mute'
 }
 
 function isActive(step: Step): boolean {

package/lib/components/STable.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, reactive, ref, toRefs, watch } from 'vue'
-import { Table } from '../composables/Table'
+import type { Table } from '../composables/Table'
 import SSpinner from './SSpinner.vue'
 import STableCell from './STableCell.vue'
 import STableColumn from './STableColumn.vue'

package/lib/components/STableCell.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { TableCell } from '../composables/Table'
+import type { TableCell } from '../composables/Table'
 import STableCellAvatar from './STableCellAvatar.vue'
 import STableCellAvatars from './STableCellAvatars.vue'
 import STableCellDay from './STableCellDay.vue'

package/lib/components/STableCellAvatars.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { TableCellAvatarsOption } from '../composables/Table'
+import type { TableCellAvatarsOption } from '../composables/Table'
 import SAvatar from './SAvatar.vue'
 
 const props = defineProps<{

package/lib/components/STableCellDay.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Day } from '../support/Day'
+import type { Day } from '../support/Day'
 
 defineProps<{
   value?: Day | null

package/lib/components/STableCellPills.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { TableCellPillColor } from '../composables/Table'
+import type { TableCellPillColor } from '../composables/Table'
 import STableCellPill from './STableCellPill.vue'
 
 export interface Pill {

package/lib/components/STableColumn.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import IconDotsThree from '@iconify-icons/ph/dots-three'
 import { computed, nextTick, ref, unref, watch } from 'vue'
-import { DropdownSection } from '../composables/Dropdown'
+import type { DropdownSection } from '../composables/Dropdown'
 import { useFlyout } from '../composables/Flyout'
 import { isArray } from '../support/Utils'
 import SDropdown from './SDropdown.vue'

package/lib/components/STooltip.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-import { Position, useTooltip } from '../composables/Tooltip'
+import type { Position } from '../composables/Tooltip'
+import { useTooltip } from '../composables/Tooltip'
 import SMarkdown from './SMarkdown.vue'
 
 const props = defineProps<{

package/lib/composables/Data.ts

@@ -1,6 +1,7 @@
 import { watchOnce } from '@vueuse/core'
 import cloneDeep from 'lodash-es/cloneDeep'
-import { WatchSource, reactive } from 'vue'
+import type { WatchSource } from 'vue'
+import { reactive } from 'vue'
 import { isNullish, isObject } from '../support/Utils'
 
 export interface Data<T extends Record<string, any>> {

package/lib/composables/Dropdown.ts

@@ -1,5 +1,7 @@
-import { MaybeRef, useElementBounding, useWindowSize } from '@vueuse/core'
-import { Ref, ref, unref } from 'vue'
+import type { MaybeRef } from '@vueuse/core'
+import { useElementBounding, useWindowSize } from '@vueuse/core'
+import type { Ref } from 'vue'
+import { ref, unref } from 'vue'
 
 export type DropdownSection =
   | DropdownSectionMenu

package/lib/composables/Flyout.ts

@@ -1,4 +1,5 @@
-import { Ref, ref, watch } from 'vue'
+import type { Ref } from 'vue'
+import { ref, watch } from 'vue'
 
 export function useFlyout(container?: Ref<any>) {
   const el = container ?? ref<any>(null)

package/lib/composables/Form.ts

@@ -1,7 +1,10 @@
-import { Ref, computed } from 'vue'
+import type { Ref } from 'vue'
+import { computed } from 'vue'
 import { useSnackbars } from '../stores/Snackbars'
-import { UseDataInput, useData } from './Data'
-import { Validation, useValidation } from './Validation'
+import type { UseDataInput } from './Data'
+import { useData } from './Data'
+import type { Validation } from './Validation'
+import { useValidation } from './Validation'
 
 export interface Form<T extends Record<string, any>> {
   data: T

package/lib/composables/Grid.ts

@@ -1,4 +1,5 @@
-import { Ref, onMounted, onUnmounted, ref, watchEffect } from 'vue'
+import type { Ref } from 'vue'
+import { onMounted, onUnmounted, ref, watchEffect } from 'vue'
 
 export interface Grid {
   container: Ref<HTMLElement | null>

package/lib/composables/Markdown.ts

@@ -1,7 +1,9 @@
 import MarkdownIt from 'markdown-it'
-import { Ref, onUnmounted } from 'vue'
+import type { Ref } from 'vue'
+import { onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
-import { LinkAttrs, isCallbackUrl, isExternalUrl, linkPlugin } from './markdown/LinkPlugin'
+import type { LinkAttrs } from './markdown/LinkPlugin'
+import { isCallbackUrl, isExternalUrl, linkPlugin } from './markdown/LinkPlugin'
 
 export type UseMarkdown = (source: string, inline: boolean) => string
 

package/lib/composables/Table.ts

@@ -1,6 +1,7 @@
-import { MaybeRef } from '@vueuse/core'
-import { Component, reactive } from 'vue'
-import { DropdownSection } from './Dropdown'
+import type { MaybeRef } from '@vueuse/core'
+import type { Component } from 'vue'
+import { reactive } from 'vue'
+import type { DropdownSection } from './Dropdown'
 
 export interface Table {
   orders: string[]

package/lib/composables/Tooltip.ts

@@ -1,4 +1,5 @@
-import { Ref, ref } from 'vue'
+import type { Ref } from 'vue'
+import { ref } from 'vue'
 
 export type Position = 'top' | 'right' | 'bottom' | 'left'
 

package/lib/composables/Utils.ts

@@ -1,5 +1,7 @@
-import { MaybeComputedRef, resolveUnref } from '@vueuse/core'
-import { ComputedRef, computed } from 'vue'
+import type { MaybeComputedRef } from '@vueuse/core'
+import { resolveUnref } from '@vueuse/core'
+import type { ComputedRef } from 'vue'
+import { computed } from 'vue'
 
 export type WhenCondition<T> = MaybeComputedRef<T>
 

package/lib/composables/Validation.ts

@@ -1,10 +1,12 @@
-import {
+import type {
   GlobalConfig,
   Validation,
-  ValidationArgs,
+  ValidationArgs
+} from '@vuelidate/core'
+import {
   useVuelidate
 } from '@vuelidate/core'
-import { Ref, ToRefs } from 'vue'
+import type { Ref, ToRefs } from 'vue'
 
 export type { Validation, ValidationArgs, GlobalConfig }
 

package/lib/composables/markdown/LinkPlugin.ts

@@ -1,4 +1,4 @@
-import MarkdownIt from 'markdown-it'
+import type MarkdownIt from 'markdown-it'
 
 export type LinkAttrs = Record<string, string>
 

package/lib/mixins/Sheet.ts

@@ -1,4 +1,4 @@
-import { App } from 'vue'
+import type { App } from 'vue'
 import SSheet from '../components/SSheet.vue'
 import SSheetFooter from '../components/SSheetFooter.vue'
 import SSheetFooterAction from '../components/SSheetFooterAction.vue'

package/lib/styles/variables.css

@@ -65,16 +65,16 @@
   --c-text-dark-2: rgba(235, 235, 245, 0.6);
   --c-text-dark-3: rgba(235, 235, 245, 0.3);
 
-  --c-info: #0284c7;
-  --c-info-light: #0ea5e9;
-  --c-info-lighter: #38bdf8;
-  --c-info-lghtest: #7dd3fc;
-  --c-info-dark: #0369a1;
-  --c-info-darker: #075985;
-  --c-info-darkest: #0c4a6e;
-  --c-info-dimm-1: rgba(2, 132, 199, 0.12);
-  --c-info-dimm-2: rgba(2, 132, 199, 0.2);
-  --c-info-dimm-3: rgba(2, 132, 199, 0.28);
+  --c-info: #1668b6;
+  --c-info-light: #2997ff;
+  --c-info-lighter: #5bafff;
+  --c-info-lghtest: #7dc0ff;
+  --c-info-dark: #104c85;
+  --c-info-darker: #0c3963;
+  --c-info-darkest: #092e51;
+  --c-info-dimm-1: rgba(22, 104, 182, 0.12);
+  --c-info-dimm-2: rgba(22, 104, 182, 0.2);
+  --c-info-dimm-3: rgba(22, 104, 182, 0.28);
   --c-info-text: var(--c-info-light);
   --c-info-text-light: var(--c-info-lighter);
   --c-info-text-lighter: var(--c-info-lightest);

package/lib/support/Day.ts

@@ -1,4 +1,5 @@
-import dayjs, { ConfigType, Dayjs } from 'dayjs'
+import type { ConfigType, Dayjs } from 'dayjs'
+import dayjs from 'dayjs'
 import PluginRelativeTime from 'dayjs/plugin/relativeTime'
 import PluginTimezone from 'dayjs/plugin/timezone'
 import PluginUtc from 'dayjs/plugin/utc'

package/lib/validation/rules/hms.ts

@@ -1,5 +1,6 @@
 import { helpers } from '@vuelidate/validators'
-import { Hms, HmsType, hms as baseHms } from '../validators/hms'
+import type { Hms, HmsType } from '../validators/hms'
+import { hms as baseHms } from '../validators/hms'
 
 export function hms(required?: HmsType[], msg?: string) {
   return helpers.withMessage(

package/lib/validation/rules/requiredHms.ts

@@ -1,5 +1,6 @@
 import { helpers } from '@vuelidate/validators'
-import { Hms, HmsType, requiredHms as baseRequiredHms } from '../validators/requiredHms'
+import type { Hms, HmsType } from '../validators/requiredHms'
+import { requiredHms as baseRequiredHms } from '../validators/requiredHms'
 
 export function requiredHms(required?: HmsType[], msg?: string) {
   return helpers.withMessage(

package/lib/validation/rules/requiredYmd.ts

@@ -1,5 +1,6 @@
 import { helpers } from '@vuelidate/validators'
-import { Ymd, YmdType, requiredYmd as baseRequiredYmd } from '../validators/requiredYmd'
+import type { Ymd, YmdType } from '../validators/requiredYmd'
+import { requiredYmd as baseRequiredYmd } from '../validators/requiredYmd'
 
 export function requiredYmd(required?: YmdType[], msg?: string) {
   return helpers.withMessage(

package/lib/validation/rules/ymd.ts

@@ -1,5 +1,6 @@
 import { helpers } from '@vuelidate/validators'
-import { Ymd, YmdType, ymd as baseYmd } from '../validators/ymd'
+import type { Ymd, YmdType } from '../validators/ymd'
+import { ymd as baseYmd } from '../validators/ymd'
 
 export function ymd(required?: YmdType[], msg?: string) {
   return helpers.withMessage(

package/lib/validation/validators/hms.ts

@@ -22,8 +22,8 @@ export function hms(hms: Hms, required: HmsType[] = ['h', 'm', 's']): boolean {
 
     const valueAsNumber = Number(value)
 
-    return r === 'h'
-      ? valueAsNumber >= 0 && valueAsNumber < 24
-      : valueAsNumber >= 0 && valueAsNumber < 60
+    return (r === 'h')
+      ? (valueAsNumber >= 0 && valueAsNumber < 24)
+      : (valueAsNumber >= 0 && valueAsNumber < 60)
   })
 }

package/lib/validation/validators/requiredYmd.ts

@@ -1,4 +1,5 @@
-import { Ymd, YmdMap, YmdType } from './ymd'
+import type { Ymd, YmdType } from './ymd'
+import { YmdMap } from './ymd'
 
 export type { Ymd, YmdType, YmdMap }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "2.21.0",
+  "version": "2.23.0",
   "packageManager": "pnpm@7.26.2",
   "description": "Vue Components for Global Brain Design System.",
   "author": "Kia Ishii <ka.ishii@globalbrains.com>",
@@ -46,7 +46,7 @@
     "dayjs": "^1.11.7"
   },
   "devDependencies": {
-    "@globalbrain/eslint-config": "^1.2.1",
+    "@globalbrain/eslint-config": "^1.3.0",
     "@histoire/plugin-vue": "^0.12.4",
     "@iconify-icons/ph": "^1.2.3",
     "@iconify/vue": "^4.0.2",
@@ -64,7 +64,7 @@
     "chalk": "^4.1.2",
     "conventional-changelog-cli": "^2.2.2",
     "enquirer": "^2.3.6",
-    "eslint": "^8.32.0",
+    "eslint": "^8.35.0",
     "execa": "^5.1.1",
     "fuse.js": "^6.6.2",
     "histoire": "^0.12.4",