@globalbrain/sefirot 4.27.0 → 4.29.0

package/lib/components/SActionMenu.vue

@@ -7,7 +7,7 @@ import SDropdown from './SDropdown.vue'
 
 export type { Mode, Size, Tooltip, Type }
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   tag?: Component | string
   size?: Size
   type?: Type
@@ -23,8 +23,11 @@ const props = defineProps<{
   loading?: boolean
   disabled?: boolean
   tooltip?: string | Tooltip
+  dropdownAlign?: 'left' | 'right'
   options: DropdownSection[]
-}>()
+}>(), {
+  dropdownAlign: 'left'
+})
 
 const container = ref<any>(null)
 
@@ -40,7 +43,7 @@ async function onOpen() {
 </script>
 
 <template>
-  <div class="SActionMenu" :class="[block]" ref="container">
+  <div class="SActionMenu" :class="[{ block }, dropdownAlign]" ref="container">
     <div class="button">
       <SButton
         :tag
@@ -75,7 +78,6 @@ async function onOpen() {
 
 .dropdown {
   position: absolute;
-  left: 0;
   z-index: var(--z-index-dropdown);
 
   &.top    { bottom: calc(100% + 8px); }
@@ -85,4 +87,7 @@ async function onOpen() {
 .SActionMenu.block {
   display: block;
 }
+
+.SActionMenu.left .dropdown  { left: 0; }
+.SActionMenu.right .dropdown { right: 0; }
 </style>

package/lib/components/SButton.vue

@@ -6,7 +6,17 @@ import SLink from './SLink.vue'
 import SSpinner from './SSpinner.vue'
 import STooltip from './STooltip.vue'
 
-export type Size = 'mini' | 'small' | 'medium' | 'large' | 'jumbo'
+export type Size =
+  | 'xs'
+  | 'sm'
+  | 'md'
+  | 'lg'
+  | 'xl'
+  | 'mini'
+  | 'small'
+  | 'medium'
+  | 'large'
+  | 'jumbo'
 
 export type Type = 'fill' | 'outline' | 'text'
 
@@ -206,17 +216,18 @@ function handleClick(): void {
   background-color: var(--button-count-bg-color);
 }
 
+.SButton.xs,
 .SButton.mini {
   min-width: 28px;
   min-height: 28px;
   font-size: var(--button-font-size, var(--button-mini-font-size));
 
   &.rounded                  { border-radius: 16px; }
-  &.has-label                { padding: var(--button-padding, 0 12px); }
+  &.has-label                { padding: var(--button-padding, 0 10px); }
   &.has-label.has-lead-icon  { padding: var(--button-padding, 0 10px 0 8px); }
   &.has-label.has-trail-icon { padding: var(--button-padding, 0 8px 0 10px); }
-  .content                   { gap: 4px; }
-  .icon-svg                  { width: 16px; height: 16px; }
+  .content                   { gap: 6px; }
+  .icon-svg                  { width: 14px; height: 14px; }
 
   .count {
     border-radius: 9px;
@@ -228,13 +239,14 @@ function handleClick(): void {
   }
 }
 
+.SButton.sm,
 .SButton.small {
   min-width: 32px;
   min-height: 32px;
   font-size: var(--button-font-size, var(--button-small-font-size));
 
   &.rounded                  { border-radius: 16px; }
-  &.has-label                { padding: var(--button-padding, 0 12px); }
+  &.has-label                { padding: var(--button-padding, 0 10px); }
   &.has-label.has-lead-icon  { padding: var(--button-padding, 0 10px 0 8px); }
   &.has-label.has-trail-icon { padding: var(--button-padding, 0 8px 0 10px); }
   .content                   { gap: 6px; }
@@ -250,17 +262,17 @@ function handleClick(): void {
   }
 }
 
-.SButton.medium {
-  min-width: 40px;
-  min-height: 40px;
+.SButton.md {
+  min-width: 36px;
+  min-height: 36px;
   font-size: var(--button-font-size, var(--button-medium-font-size));
 
-  &.rounded                  { border-radius: 20px; }
-  &.has-label                { padding: var(--button-padding, 0 16px); }
+  &.rounded                  { border-radius: 18px; }
+  &.has-label                { padding: var(--button-padding, 0 12px); }
   &.has-label.has-lead-icon  { padding: var(--button-padding, 0 12px 0 10px); }
   &.has-label.has-trail-icon { padding: var(--button-padding, 0 10px 0 12px); }
-  .content                   { gap: 8px; }
-  .icon-svg                  { width: 18px; height: 18px; }
+  .content                   { gap: 6px; }
+  .icon-svg                  { width: 16px; height: 16px; }
 
   .count {
     border-radius: 10px;
@@ -272,17 +284,19 @@ function handleClick(): void {
   }
 }
 
+.SButton.lg,
+.SButton.medium,
 .SButton.large {
-  min-width: 48px;
-  min-height: 48px;
+  min-width: 40px;
+  min-height: 40px;
   font-size: var(--button-font-size, var(--button-large-font-size));
 
-  &.rounded                  { border-radius: 24px; }
-  &.has-label                { padding: var(--button-padding, 0 20px); }
+  &.rounded                  { border-radius: 20px; }
+  &.has-label                { padding: var(--button-padding, 0 14px); }
   &.has-label.has-lead-icon  { padding: var(--button-padding, 0 14px 0 12px); }
   &.has-label.has-trail-icon { padding: var(--button-padding, 0 12px 0 14px); }
   .content                   { gap: 8px; }
-  .icon-svg                  { width: 18px; height: 18px; }
+  .icon-svg                  { width: 16px; height: 16px; }
 
   .count {
     border-radius: 10px;
@@ -294,16 +308,17 @@ function handleClick(): void {
   }
 }
 
+.SButton.xl,
 .SButton.jumbo {
-  min-width: 64px;
-  min-height: 64px;
+  min-width: 48px;
+  min-height: 48px;
   font-size: var(--button-font-size, var(--button-jumbo-font-size));
 
-  &.rounded                  { border-radius: 32px; }
-  &.has-label                { padding: var(--button-padding, 0 24px); }
-  &.has-label.has-lead-icon  { padding: var(--button-padding, 0 20px 0 18px); }
-  &.has-label.has-trail-icon { padding: var(--button-padding, 0 18px 0 20px); }
-  .content                   { gap: 8px; }
+  &.rounded                  { border-radius: 24px; }
+  &.has-label                { padding: var(--button-padding, 0 16px); }
+  &.has-label.has-lead-icon  { padding: var(--button-padding, 0 16px 0 14px); }
+  &.has-label.has-trail-icon { padding: var(--button-padding, 0 14px 0 16px); }
+  .content                   { gap: 10px; }
   .icon-svg                  { width: 20px; height: 20px; }
 
   .count {

package/lib/components/SContent.vue

@@ -8,25 +8,25 @@
 .SContent {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 8px;
 }
 
 .SContent :deep(h1),
 .SContent :deep(.h1) {
   margin: 0;
   padding: 0;
-  max-width: 640px;
-  line-height: 40px;
-  font-size: 32px;
+  max-width: 720px;
+  line-height: 36px;
+  font-size: 24px;
   font-weight: 500;
   color: var(--c-text-1);
 }
 
 .SContent :deep(h2),
 .SContent :deep(.h2) {
-  margin: 0;
+  margin: 16px 0 0;
   padding: 0;
-  max-width: 640px;
+  max-width: 720px;
   line-height: 32px;
   font-size: 20px;
   font-weight: 500;
@@ -35,18 +35,27 @@
 
 .SContent :deep(h3),
 .SContent :deep(.h3) {
-  margin: 0;
+  margin: 16px 0 0;
   padding: 0;
-  max-width: 640px;
-  line-height: 24px;
-  font-size: 16px;
+  max-width: 720px;
+  line-height: 28px;
+  font-size: 18px;
   font-weight: 500;
   color: var(--c-text-1);
 }
 
+.SContent :deep(h1:first-child),
+.SContent :deep(.h1:first-child),
+.SContent :deep(h2:first-child),
+.SContent :deep(.h2:first-child),
+.SContent :deep(h3:first-child),
+.SContent :deep(.h3:first-child) {
+  margin-top: 0;
+}
+
 .SContent :deep(p) {
   margin: 0;
-  max-width: 640px;
+  max-width: 720px;
   line-height: 24px;
   font-size: 14px;
   font-weight: 400;
@@ -70,7 +79,7 @@
 .SContent :deep(ol) {
   margin: 0;
   padding-left: 0;
-  max-width: 640px;
+  max-width: 720px;
   list-style: none;
 }
 

package/lib/components/SControl.vue

@@ -12,6 +12,9 @@ const props = defineProps<{
 const cardSize = useCardBlockSize()
 
 const sizeDict = {
+  xs: 'xs',
+  sm: 'sm',
+  md: 'md',
   xsmall: 'small',
   small: 'small',
   medium: 'small',
@@ -45,6 +48,12 @@ provideControlSize(_size)
   flex-grow: 1;
 }
 
+.SControl.xs { gap: 8px; height: 28px; }
+.SControl.sm { gap: 8px; height: 32px; }
+.SControl.md { gap: 8px; height: 36px; }
+.SControl.lg { gap: 12px; height: 40px; }
+.SControl.xl { gap: 16px; height: 48px; }
+
 .SControl.small  { gap: 8px; height: 32px; }
 .SControl.medium { gap: 12px; height: 40px; }
 </style>

package/lib/components/SControlActionBarClose.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import IconX from '~icons/ph/x-bold'
+import IconX from '~icons/ph/x'
 import SControlActionBarButton from './SControlActionBarButton.vue'
 
 defineProps<{

package/lib/components/SControlActionBarCollapse.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import IconArrowsInLineVertical from '~icons/ph/arrows-in-line-vertical-bold'
-import IconArrowsOutLineVertical from '~icons/ph/arrows-out-line-vertical-bold'
+import IconArrowsInLineVertical from '~icons/ph/arrows-in-line-vertical'
+import IconArrowsOutLineVertical from '~icons/ph/arrows-out-line-vertical'
 import { computed, shallowRef } from 'vue'
 import { useCardState } from '../composables/Card'
 import SControlActionBarButton from './SControlActionBarButton.vue'

package/lib/components/SControlInputSearch.vue

@@ -33,6 +33,9 @@ const { t } = useTrans({
 const size = useControlSize()
 
 const sizeDict = {
+  xs: 'sm',
+  sm: 'sm',
+  md: 'md',
   small: 'mini',
   medium: 'small'
 } as const

package/lib/components/SControlLeft.vue

@@ -19,6 +19,12 @@ provideControlPosition('left')
   flex-shrink: 0;
 }
 
+.SControl.xs .SControlLeft { gap: 8px; height: 28px; }
+.SControl.sm .SControlLeft { gap: 8px; height: 32px; }
+.SControl.md .SControlLeft { gap: 8px; height: 36px; }
+.SControl.lg .SControlLeft { gap: 12px; height: 40px; }
+.SControl.xl .SControlLeft { gap: 16px; height: 48px; }
+
 .SControl.small .SControlLeft  { gap: 8px; }
 .SControl.medium .SControlLeft { gap: 12px; }
 </style>

package/lib/components/SControlRight.vue

@@ -19,6 +19,12 @@ provideControlPosition('right')
   flex-shrink: 0;
 }
 
+.SControl.xs .SControlRight { gap: 8px; height: 28px; }
+.SControl.sm .SControlRight { gap: 8px; height: 32px; }
+.SControl.md .SControlRight { gap: 8px; height: 36px; }
+.SControl.lg .SControlRight { gap: 12px; height: 40px; }
+.SControl.xl .SControlRight { gap: 16px; height: 48px; }
+
 .SControl.small .SControlRight  { gap: 8px; }
 .SControl.medium .SControlRight { gap: 12px; }
 

package/lib/components/SInputBase.vue

@@ -20,7 +20,7 @@ export interface Props {
   hideWarning?: boolean
 }
 
-export type Size = 'mini' | 'small' | 'medium'
+export type Size = 'sm' | 'md' | 'mini' | 'small' | 'medium'
 export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
 
 const props = defineProps<Props>()
@@ -105,6 +105,8 @@ function getErrorMsg(validation: Validatable) {
   .check           { padding-top: 0; line-height: 20px; }
 }
 
+.SInputBase.sm,
+.SInputBase.md,
 .SInputBase.small {
   .label      { padding-bottom: 6px; min-height: 26px; }
   .label-text { font-size: var(--input-label-font-size, var(--input-small-label-font-size)); }

package/lib/components/SInputCheckbox.vue

@@ -5,7 +5,7 @@ import { type Component, computed } from 'vue'
 import { type Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 
-export type Size = 'mini' | 'small' | 'medium'
+export type Size = 'sm' | 'md' | 'mini' | 'small' | 'medium'
 export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
 
 const props = withDefaults(defineProps<{
@@ -60,6 +60,7 @@ function onClick() {
   <SInputBase
     class="SInputCheckbox"
     :class="classes"
+    :size
     :label
     :note
     :info
@@ -158,6 +159,12 @@ function onClick() {
   font-weight: 400;
 }
 
+.SInputCheckbox.md {
+  .input {
+    height: 36px;
+  }
+}
+
 .SInputCheckbox.disabled {
   .input {
     cursor: not-allowed;

package/lib/components/SInputCheckboxes.vue

@@ -4,7 +4,7 @@ import { type Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 import SInputCheckbox from './SInputCheckbox.vue'
 
-export type Size = 'mini' | 'small' | 'medium'
+export type Size = 'sm' | 'md' | 'mini' | 'small' | 'medium'
 export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
 
 export type Value = any
@@ -69,6 +69,7 @@ function handleChange(value: Value): void {
   <SInputBase
     class="SInputCheckboxes"
     :class="[size ?? 'small']"
+    :size
     :name
     :label
     :note
@@ -82,6 +83,7 @@ function handleChange(value: Value): void {
       <div class="row">
         <div v-for="option in options" :key="String(option.value)" class="col">
           <SInputCheckbox
+            size="sm"
             :text="option.label"
             :disabled="option.disabled ?? disabled"
             :model-value="isChecked(option.value)"

package/lib/components/SInputDate.vue

@@ -5,7 +5,7 @@ import { type Validatable } from '../composables/Validation'
 import { type Day, day } from '../support/Day'
 import SInputBase from './SInputBase.vue'
 
-export type Size = 'mini' | 'small' | 'medium'
+export type Size = 'sm' | 'md' | 'mini' | 'small' | 'medium'
 export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
 
 const props = defineProps<{
@@ -54,6 +54,7 @@ function emitBlur() {
   <SInputBase
     class="SInputDate"
     :class="classes"
+    :size
     :name
     :label
     :note
@@ -95,6 +96,7 @@ function emitBlur() {
 </template>
 
 <style lang="postcss" scoped>
+.SInputDate.sm,
 .SInputDate.mini {
   .input {
     padding: 3px 8px;
@@ -109,13 +111,27 @@ function emitBlur() {
   }
 }
 
+.SInputDate.md {
+  .input {
+    padding: 6px 10px;
+    max-width: 120px;
+    height: 36px;
+    line-height: 24px;
+    font-size: var(--input-font-size, var(--input-small-font-size));
+  }
+
+  .input.block {
+    max-width: 100%;
+  }
+}
+
 .SInputDate.small {
   .input {
     padding: 5px 12px;
     max-width: 136px;
     height: 40px;
     line-height: 24px;
-    font-size: var(--input-font-size, var(--input-small-font-size));
+    font-size: var(--input-font-size, 14px);
   }
 
   .input.block {

package/lib/components/SInputDropdown.vue

@@ -241,6 +241,7 @@ function handleArray(value: OptionValue) {
   z-index: var(--z-index-dropdown);
 }
 
+.SInputDropdown.sm,
 .SInputDropdown.mini {
   .box {
     min-height: 32px;
@@ -262,6 +263,27 @@ function handleArray(value: OptionValue) {
   }
 }
 
+.SInputDropdown.md {
+  .box {
+    min-height: 36px;
+  }
+
+  .box-content {
+    padding: 0 30px 0 0;
+    line-height: 24px;
+    font-size: var(--input-font-size, 14px);
+  }
+
+  .box-placeholder {
+    padding-left: 10px;
+  }
+
+  .box-icon {
+    top: 5px;
+    right: 8px;
+  }
+}
+
 .SInputDropdown.small {
   .box {
     min-height: 40px;

package/lib/components/SInputDropdownItem.vue

@@ -20,7 +20,7 @@ export interface ItemAvatar extends ItemBase {
   image?: string | null
 }
 
-export type Size = 'mini' | 'small' | 'medium'
+export type Size = 'sm' | 'md' | 'mini' | 'small' | 'medium'
 
 defineProps<{
   item: Item | Item[]
@@ -240,6 +240,7 @@ defineEmits<{
   height: 16px;
 }
 
+.SInputDropdownItem.sm,
 .SInputDropdownItem.mini {
   .many {
     padding: 3px 0 3px 3px;
@@ -259,6 +260,25 @@ defineEmits<{
   }
 }
 
+.SInputDropdownItem.md {
+  .many {
+    padding: 5px 0 5px 4px;
+  }
+
+  .one-text {
+    padding-left: 12px;
+  }
+
+  .one-text-value {
+    font-size: var(--input-font-size, 14px);
+  }
+
+  .one-avatar {
+    gap: 8px;
+    padding-left: 10px;
+  }
+}
+
 .SInputDropdownItem.small {
   .many {
     padding: 7px 0 7px 7px;

package/lib/components/SInputFile.vue

@@ -3,7 +3,7 @@ import { type Component, computed, ref } from 'vue'
 import { type Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 
-export type Size = 'mini' | 'small' | 'medium'
+export type Size = 'sm' | 'md' | 'mini' | 'small' | 'medium'
 export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
 
 const props = defineProps<{
@@ -65,6 +65,7 @@ function onChange(e: Event) {
   <SInputBase
     class="SInputFile"
     :class="classes"
+    :size
     :label
     :note
     :info
@@ -101,6 +102,7 @@ function onChange(e: Event) {
 </template>
 
 <style lang="postcss" scoped>
+.SInputFile.sm,
 .SInputFile.mini {
   .action {
     padding: 3px 8px 3px 3px;
@@ -121,6 +123,26 @@ function onChange(e: Event) {
   }
 }
 
+.SInputFile.md {
+  .action {
+    padding: 3px 8px 3px 3px;
+  }
+
+  .button {
+    padding: 0 8px;
+    line-height: 26px;
+    font-size: 12px;
+    font-weight: 500;
+  }
+
+  .file-name,
+  .placeholder {
+    line-height: 34px;
+    font-size: var(--input-font-size, 14px);
+    font-weight: 400;
+  }
+}
+
 .SInputFile.small {
   .action {
     padding: 5px 8px 5px 5px;

package/lib/components/SInputHMS.vue

@@ -184,6 +184,7 @@ function createRequiredTouched(): boolean[] {
 </template>
 
 <style lang="postcss" scoped>
+.SInputHMS.sm,
 .SInputHMS.mini {
   .container {
     padding: 0 8px;
@@ -207,6 +208,32 @@ function createRequiredTouched(): boolean[] {
   }
 }
 
+.SInputHMS.md {
+  .container {
+    padding: 0 10px;
+    min-height: 36px;
+  }
+
+  .input {
+    flex-shrink: 0;
+    padding: 5px 0;
+    width: 20px;
+    text-align: center;
+    line-height: 24px;
+    font-size: var(--input-font-size, 14px);
+  }
+
+  .separator {
+    padding: 4px 0;
+    line-height: 24px;
+    font-size: var(--input-font-size, 14px);
+  }
+
+  .separator::before {
+    padding: 0 6px;
+  }
+}
+
 .SInputHMS.small {
   .container {
     padding: 0 12px;

package/lib/components/SInputRadio.vue

@@ -3,7 +3,7 @@ import { type Component, computed } from 'vue'
 import { type Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 
-export type Size = 'mini' | 'small' | 'medium'
+export type Size = 'sm' | 'md' | 'mini' | 'small' | 'medium'
 export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
 
 const props = defineProps<{
@@ -45,6 +45,7 @@ function onClick() {
   <SInputBase
     class="SInputRadio"
     :class="classes"
+    :size
     :label
     :note
     :info
@@ -139,6 +140,12 @@ function onClick() {
   font-weight: 400;
 }
 
+.SInputRadio.md {
+  .input {
+    height: 36px;
+  }
+}
+
 .SInputRadio.disabled {
   .input {
     cursor: not-allowed;

package/lib/components/SInputRadios.vue

@@ -11,7 +11,7 @@ import { type Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 import SInputRadio from './SInputRadio.vue'
 
-export type Size = 'mini' | 'small' | 'medium'
+export type Size = 'sm' | 'md' | 'mini' | 'small' | 'medium'
 export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
 
 export interface Option<
@@ -88,6 +88,7 @@ function onChange(value: ValueType) {
   <SInputBase
     class="SInputRadios"
     :class="[size ?? 'small']"
+    :size
     :label
     :note
     :info
@@ -102,6 +103,7 @@ function onChange(value: ValueType) {
       <div class="row">
         <div v-for="(option, index) in options" :key="index" class="col">
           <SInputRadio
+            size="sm"
             :text="option.label"
             :disabled="option.disabled ?? disabled"
             :model-value="isChecked(option.value)"

package/lib/components/SInputSegments.vue

@@ -4,7 +4,7 @@ import { type Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 import SInputSegmentsOption, { type Mode } from './SInputSegmentsOption.vue'
 
-export type Size = 'mini' | 'small' | 'medium'
+export type Size = 'sm' | 'md' | 'mini' | 'small' | 'medium'
 export type Color = 'default' | 'mute' | 'neutral' | 'info' | 'success' | 'warning' | 'danger'
 export type CheckColor = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
 
@@ -90,6 +90,7 @@ function onSelect(value: T) {
 </template>
 
 <style scoped lang="postcss">
+.SInputSegments.sm,
 .SInputSegments.mini {
   .box {
     padding: 2px;
@@ -97,6 +98,13 @@ function onSelect(value: T) {
   }
 }
 
+.SInputSegments.md {
+  .box {
+    padding: 2px;
+    height: 36px;
+  }
+}
+
 .SInputSegments.small {
   .box {
     padding: 4px;

package/lib/components/SInputSegmentsOption.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts" generic="T extends string | number | boolean">
-export type Size = 'mini' | 'small' | 'medium'
+export type Size = 'sm' | 'md' | 'mini' | 'small' | 'medium'
 export type Mode = 'default' | 'mute' | 'neutral' | 'info' | 'success' | 'warning' | 'danger'
 
 const props = defineProps<{
@@ -78,6 +78,7 @@ function onClick() {
   }
 }
 
+.SInputSegmentsOption.sm,
 .SInputSegmentsOption.mini {
   .SInputSegmentsOption + &::before {
     top: 4px;
@@ -88,6 +89,16 @@ function onClick() {
   }
 }
 
+.SInputSegmentsOption.md {
+  .SInputSegmentsOption + &::before {
+    top: 6px;
+  }
+
+  .label {
+    padding: 0 12px;
+  }
+}
+
 .SInputSegmentsOption.small {
   .SInputSegmentsOption + &::before {
     top: 7px;

package/lib/components/SInputSelect.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import IconCaretDown from '~icons/ph/caret-down-bold'
-import IconCaretUp from '~icons/ph/caret-up-bold'
+import IconCaretDown from '~icons/ph/caret-down'
+import IconCaretUp from '~icons/ph/caret-up'
 import { computed, ref } from 'vue'
 import SInputBase, { type Props as BaseProps } from './SInputBase.vue'
 
@@ -121,6 +121,7 @@ function emitChange(e: any): void {
 </template>
 
 <style scoped lang="postcss">
+.SInputSelect.sm,
 .SInputSelect.mini {
   line-height: 30px;
   font-size: var(--input-font-size, var(--input-mini-font-size));
@@ -131,6 +132,16 @@ function emitChange(e: any): void {
   .icon-svg { width: 12px; height: 12px; }
 }
 
+.SInputSelect.md {
+  line-height: 34px;
+  font-size: var(--input-font-size, 14px);
+
+  .box      { height: 36px; }
+  .select   { padding: 0 30px 0 10px; }
+  .icon     { top: 5px; right: 8px; }
+  .icon-svg { width: 14px; height: 14px; }
+}
+
 .SInputSelect.small {
   line-height: 38px;
   font-size: var(--input-font-size, var(--input-small-font-size));

package/lib/components/SInputSwitch.vue

@@ -3,7 +3,7 @@ import { type Component, computed } from 'vue'
 import { type Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 
-export type Size = 'mini' | 'small' | 'medium'
+export type Size = 'sm' | 'md' | 'mini' | 'small' | 'medium'
 export type ActiveColor = 'info' | 'success' | 'warning' | 'danger'
 export type CheckColor = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
 
@@ -58,6 +58,7 @@ function emitChange(): void {
   <SInputBase
     class="SInputSwitch"
     :class="classes"
+    :size
     :name
     :label
     :note
@@ -115,6 +116,7 @@ function emitChange(): void {
   transition: background-color 0.25s, transform 0.25s;
 }
 
+.SInputSwitch.sm,
 .SInputSwitch.mini {
   .input {
     height: 32px;
@@ -126,20 +128,48 @@ function emitChange(): void {
   }
 
   .box {
-    border-radius: 9px;
-    width: 32px;
-    height: 18px;
+    border-radius: 10px;
+    width: 36px;
+    height: 20px;
   }
 
   .toggle {
-    top: 1px;
-    left: 1px;
+    top: 2px;
+    left: 2px;
     width: 14px;
     height: 14px;
   }
 
   .input.on .toggle {
-    transform: translateX(14px);
+    transform: translateX(16px);
+  }
+}
+
+.SInputSwitch.md {
+  .input {
+    height: 36px;
+  }
+
+  .text {
+    line-height: 20px;
+    font-size: 14px;
+  }
+
+  .box {
+    border-radius: 12px;
+    width: 44px;
+    height: 24px;
+  }
+
+  .toggle {
+    top: 3px;
+    left: 3px;
+    width: 16px;
+    height: 16px;
+  }
+
+  .input.on .toggle {
+    transform: translateX(20px);
   }
 }
 

package/lib/components/SInputSwitches.vue

@@ -4,7 +4,7 @@ import { type Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 import SInputSwitch from './SInputSwitch.vue'
 
-export type Size = 'mini' | 'small' | 'medium'
+export type Size = 'sm' | 'md' | 'mini' | 'small' | 'medium'
 export type CheckColor = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
 
 export interface Option {
@@ -54,6 +54,7 @@ function handleChange(value: any): void {
   <SInputBase
     class="SInputSwitches"
     :class="classes"
+    :size
     :name
     :label
     :note
@@ -68,7 +69,7 @@ function handleChange(value: any): void {
       <div class="row">
         <div v-for="(option, index) in options" :key="index" class="col">
           <SInputSwitch
-            :size
+            size="sm"
             :text="option.label"
             :model-value="isChecked(option.value)"
             @update:model-value="handleChange(option.value)"

package/lib/components/SInputText.vue

@@ -161,7 +161,8 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
 </template>
 
 <style scoped lang="postcss">
-.SInputText.mini {
+.SInputText.sm,
+.SInputText.small {
   .box   { min-height: 32px; }
   .value { min-height: 30px; }
   .area  { min-height: 30px; }
@@ -210,6 +211,55 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
   }
 }
 
+.SInputText.md {
+  .box   { min-height: 36px; }
+  .value { min-height: 34px; }
+  .area  { min-height: 34px; }
+  .unit  { min-height: 34px; }
+
+  .input {
+    padding: 5px 10px;
+    letter-spacing: 0;
+    line-height: 24px;
+    font-size: var(--input-font-size, 14px);
+  }
+
+  .unit + .area .input      { padding-left: 8px; }
+  .area:has(+ .unit) .input { padding-right: 8px; }
+
+  .unit {
+    padding: 5px 10px;
+    line-height: 24px;
+    font-size: var(--input-font-size, 14px);
+  }
+
+  .unit.before { padding-right: 0; }
+  .unit.after  { padding-left: 0; }
+
+  .unit-icon {
+    width: 16px;
+    height: 16px;
+  }
+
+  :slotted(.SInputAddon) .action {
+    padding: 0 12px;
+    font-size: 14px;
+    font-weight: 500;
+  }
+
+  :slotted(.SInputAddon) .action-icon {
+    width: 16px;
+    height: 16px;
+  }
+
+  :slotted(.SInputAddon) .caret {
+    margin-left: 6px;
+    margin-right: -2px;
+    width: 12px;
+    height: 12px;
+  }
+}
+
 .SInputText.small {
   .box   { min-height: 40px; }
   .value { min-height: 38px; }
@@ -423,10 +473,6 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
   color: var(--c-text-2);
 }
 
-.unit-text {
-  font-weight: 500;
-}
-
 .addon {
   display: flex;
   flex-shrink: 0;

package/lib/components/SInputTextarea.vue

@@ -27,6 +27,8 @@ const emit = defineEmits<{
 }>()
 
 const sizePaddingYDict = {
+  sm: 12,
+  md: 14,
   mini: 12,
   small: 14,
   medium: 22
@@ -182,17 +184,29 @@ const isPreview = ref(false)
   }
 }
 
+.SInputTextarea.sm,
 .SInputTextarea.mini {
   .input,
   .prose {
-    padding: 6px 10px;
+    padding: 3px 8px;
     width: 100%;
     min-height: 30px;
-    line-height: 20px;
+    line-height: 24px;
     font-size: var(--input-font-size, var(--input-mini-font-size));
   }
 }
 
+.SInputTextarea.md {
+  .input,
+  .prose {
+    padding: 5px 10px;
+    width: 100%;
+    min-height: 34px;
+    line-height: 24px;
+    font-size: var(--input-font-size, 14px);
+  }
+}
+
 .SInputTextarea.small {
   .input,
   .prose {

package/lib/components/SInputYMD.vue

@@ -187,6 +187,7 @@ function createRequiredTouched(): boolean[] {
 </template>
 
 <style scoped lang="postcss">
+.SInputYMD.sm,
 .SInputYMD.mini {
   .container {
     padding: 0 4px;
@@ -209,6 +210,31 @@ function createRequiredTouched(): boolean[] {
   }
 }
 
+.SInputYMD.md {
+  .container {
+    padding: 0 6px;
+    height: 36px;
+  }
+
+  .input {
+    padding: 5px 0;
+    text-align: center;
+    line-height: 24px;
+    font-size: var(--input-font-size, 14px);
+  }
+
+  .input.year  { margin-right: 2px; }
+  .input.year  { width: 48px; }
+  .input.month { width: 32px; }
+  .input.date  { width: 32px; }
+
+  .separator {
+    padding: 5px 0;
+    line-height: 24px;
+    font-size: var(--input-font-size, 14px);
+  }
+}
+
 .SInputYMD.small {
   .container {
     padding: 0 8px;

package/lib/components/SPagination.vue

@@ -6,7 +6,7 @@ import { useTrans } from '../composables/Lang'
 import { format } from '../support/Num'
 import SButton from './SButton.vue'
 
-export type Size = 'mini' | 'small' | 'medium'
+export type Size = 'xs' | 'sm' | 'md' | 'mini' | 'small' | 'medium'
 export type Align = 'left' | 'center' | 'right'
 
 const props = withDefaults(defineProps<{

package/lib/composables/Control.ts

@@ -1,6 +1,6 @@
 import { type ComputedRef, computed, inject, provide, toValue } from 'vue'
 
-export type ControlSize = 'small' | 'medium'
+export type ControlSize = 'xs' | 'sm' | 'md' | 'small' | 'medium'
 export type ControlPosition = 'left' | 'center' | 'right'
 
 export const ControlSizeKey = 'sefirot-control-size-key'

package/lib/styles/utilities.css

@@ -143,11 +143,13 @@
 .s-w-256  { width: 256px; }
 .s-w-320  { width: 320px; }
 .s-w-512  { width: 512px; }
+.s-w-720  { width: 720px; }
 .s-w-full { max-width: 100%; }
 
 .s-max-w-256    { max-width: 256px; }
 .s-max-w-320    { max-width: 320px; }
 .s-max-w-512    { max-width: 512px; }
+.s-max-w-720    { max-width: 720px; }
 .s-max-w-prose  { max-width: 65ch; }
 .s-max-w-full   { max-width: 100%; }
 .s-max-w-xs     { max-width: 320px; }

package/lib/styles/variables.css

@@ -419,7 +419,7 @@
 
 :root {
   --button-mini-font-size: 12px;
-  --button-small-font-size: 13px;
+  --button-small-font-size: 12px;
   --button-medium-font-size: 14px;
   --button-large-font-size: 14px;
   --button-jumbo-font-size: 16px;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@globalbrain/sefirot",
   "type": "module",
-  "version": "4.27.0",
+  "version": "4.29.0",
   "packageManager": "pnpm@9.15.4",
   "description": "Vue Components for Global Brain Design System.",
   "author": "Kia Ishii <ka.ishii@globalbrains.com>",