@globalbrain/sefirot 3.11.1 → 3.13.0

package/lib/components/SInputDropdownItemAvatar.vue

@@ -36,10 +36,10 @@ defineEmits<{
 <style lang="postcss" scoped>
 .SInputDropdownItemAvatar {
   display: flex;
-  border: 1px solid var(--c-divider);
+  border: 1px solid var(--c-border-mute-1);
   border-radius: 14px;
   padding: 0 12px 0 0;
-  background-color: var(--c-bg-mute);
+  background-color: var(--c-bg-mute-1);
 }
 
 .SInputDropdownItemAvatar.removable {
@@ -48,7 +48,6 @@ defineEmits<{
 
 .SInputDropdownItemUserAvatar.disabled {
   padding: 0 10px 0 0;
-  background-color: var(--c-gray-light-4);
 }
 
 .user {
@@ -88,12 +87,7 @@ defineEmits<{
 
   .remove:hover & {
     color: var(--c-text-1);
-    background-color: var(--c-gray-light-3)
-  }
-
-  .dark .remove:hover & {
-    color: var(--c-text-1);
-    background-color: var(--c-gray-dark-3)
+    background-color: var(--c-bg-mute-2)
   }
 }
 

package/lib/components/SInputDropdownItemText.vue

@@ -29,10 +29,10 @@ defineEmits<{
 <style lang="postcss" scoped>
 .SInputDropdownItemText {
   display: flex;
-  border: 1px solid var(--c-divider);
+  border: 1px solid var(--c-border-mute-1);
   border-radius: 14px;
   padding: 0 12px;
-  background-color: var(--c-bg-mute);
+  background-color: var(--c-bg-mute-1);
 }
 
 .SInputDropdownItemText.removable {
@@ -41,15 +41,6 @@ defineEmits<{
 
 .SInputDropdownItemText.disabled {
   padding: 0 10px;
-  background-color: var(--c-gray-light-4);
-
-  .text {
-    color: var(--c-text-2);
-  }
-}
-
-.dark .SInputDropdownItemText.disabled {
-  background-color: var(--c-gray-dark-2);
 }
 
 .text {
@@ -80,12 +71,7 @@ defineEmits<{
 
   .remove:hover & {
     color: var(--c-text-1);
-    background-color: var(--c-gray-light-3)
-  }
-
-  .dark .remove:hover & {
-    color: var(--c-text-1);
-    background-color: var(--c-gray-dark-3)
+    background-color: var(--c-bg-mute-2);
   }
 }
 

package/lib/components/SInputSwitch.vue

@@ -82,6 +82,40 @@ function emitChange(): void {
 </template>
 
 <style scoped lang="postcss">
+.container {
+  display: flex;
+}
+
+.input {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  cursor: pointer;
+}
+
+.text {
+  flex-grow: 1;
+  margin: 0;
+  padding-right: 16px;
+}
+
+.box {
+  position: relative;
+  flex-shrink: 0;
+  border: 1px solid var(--input-border-color);
+  background-color: var(--input-switch-bg-color);
+  transition: border-color 0.25s, background-color 0.25s, box-shadow 0.25s;
+}
+
+.toggle {
+  position: absolute;
+  border-radius: 50%;
+  background-color: var(--input-switch-toggle-color);
+  transition: background-color 0.25s, transform 0.25s;
+}
+
 .SInputSwitch.mini {
   .input {
     height: 32px;
@@ -168,45 +202,45 @@ function emitChange(): void {
 
 .SInputSwitch.info {
   .box:hover {
-    border-color: var(--c-info-light);
+    border-color: var(--c-border-info-1);
   }
 
   .input.on .box {
-    border-color: var(--c-info-light);
-    background-color: var(--c-info);
+    border-color: var(--c-border-info-1);
+    background-color: var(--c-bg-info-1);
   }
 }
 
 .SInputSwitch.success {
   .box:hover {
-    border-color: var(--c-success-light);
+    border-color: var(--c-border-success-1);
   }
 
   .input.on .box {
-    border-color: var(--c-success-light);
-    background-color: var(--c-success);
+    border-color: var(--c-border-success-1);
+    background-color: var(--c-bg-success-1);
   }
 }
 
 .SInputSwitch.warning {
   .box:hover {
-    border-color: var(--c-warning-light);
+    border-color: var(--c-border-warning-1);
   }
 
   .input.on .box {
-    border-color: var(--c-warning-light);
-    background-color: var(--c-warning);
+    border-color: var(--c-border-warning-1);
+    background-color: var(--c-bg-warning-1);
   }
 }
 
 .SInputSwitch.danger {
   .box:hover {
-    border-color: var(--c-danger-light);
+    border-color: var(--c-border-danger-1);
   }
 
   .input.on .box {
-    border-color: var(--c-danger-light);
-    background-color: var(--c-danger);
+    border-color: var(--c-border-danger-1);
+    background-color: var(--c-bg-danger-1);
   }
 }
 
@@ -220,7 +254,7 @@ function emitChange(): void {
   }
 
   .box:hover {
-    border-color: var(--c-divider-1);
+    border-color: var(--input-border-color);
   }
 
   .toggle {
@@ -233,73 +267,39 @@ function emitChange(): void {
 
   &.info {
     .input.on .box {
-      border-color: var(--c-info);
-      background-color: var(--c-info-dark);
+      border-color: var(--c-border-info-1);
+      background-color: var(--c-blue-8);
     }
   }
 
   &.success {
     .input.on .box {
-      border-color: var(--c-success);
-      background-color: var(--c-success-dark);
+      border-color: var(--c-border-success-1);
+      background-color: var(--c-green-8);
     }
   }
 
   &.warning {
     .input.on .box {
-      border-color: var(--c-warning);
-      background-color: var(--c-warning-dark);
+      border-color: var(--c-border-warning-1);
+      background-color: var(--c-yellow-8);
     }
   }
 
   &.danger {
     .input.on .box {
-      border-color: var(--c-danger);
-      background-color: var(--c-danger-dark);
+      border-color: var(--c-border-danger-1);
+      background-color: var(--c-red-8);
     }
   }
 }
 
-.container {
-  display: flex;
-}
-
-.input {
-  position: relative;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  cursor: pointer;
-}
-
 .input.on .box {
-  border-color: var(--c-info-lighter);
-  background-color: var(--c-info);
+  border-color: var(--c-border-info-1);
+  background-color: var(--c-bg-info-1);
 }
 
 .input.on .toggle {
   background-color: var(--c-white);
 }
-
-.text {
-  flex-grow: 1;
-  margin: 0;
-  padding-right: 16px;
-}
-
-.box {
-  position: relative;
-  flex-shrink: 0;
-  border: 1px solid var(--c-divider-1);
-  background-color: var(--input-switch-bg-color);
-  transition: border-color 0.25s, background-color 0.25s, box-shadow 0.25s;
-}
-
-.toggle {
-  position: absolute;
-  border-radius: 50%;
-  background-color: var(--input-switch-toggle-color);
-  transition: background-color 0.25s, transform 0.25s;
-}
 </style>

package/lib/components/SInputText.vue

@@ -395,10 +395,10 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
   font-family: var(--input-value-font-family);
 
   &.neutral:not(.hide) { color: var(--input-value-color); }
-  &.info:not(.hide)    { color: var(--c-info-text); }
-  &.success:not(.hide) { color: var(--c-success-text); }
-  &.warning:not(.hide) { color: var(--c-warning-text); }
-  &.danger:not(.hide)  { color: var(--c-danger-text); }
+  &.info:not(.hide)    { color: var(--c-text-info-1); }
+  &.success:not(.hide) { color: var(--c-text-success-1); }
+  &.warning:not(.hide) { color: var(--c-text-warning-1); }
+  &.danger:not(.hide)  { color: var(--c-text-danger-1); }
 
   &.hide,
   &.hide::placeholder {

package/lib/components/SLocalNav.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import SLocalNavMenu, { type MenuItem } from './SLocalNavMenu.vue'
+import SLocalNavTitle, { type Title } from './SLocalNavTitle.vue'
+
+export type { Title, MenuItem }
+
+const props = defineProps<{
+  title: Title[]
+  menu?: MenuItem[][]
+}>()
+
+const normalizedMenu = computed(() => {
+  return props.menu?.reduce<MenuItem[][]>((carry, group) => {
+    group.length && carry.push(group)
+    return carry
+  }, []) ?? null
+})
+</script>
+
+<template>
+  <div class="SLocalNav" :class="{ 'has-menu': normalizedMenu }">
+    <SLocalNavTitle :title="title" />
+    <SLocalNavMenu v-if="normalizedMenu" :menu="normalizedMenu" />
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.SLocalNav {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 16px 24px;
+
+  @media (min-width: 768px) {
+    padding: 16px 32px;
+  }
+}
+
+.SLocalNav.has-menu {
+  padding-bottom: 0;
+
+  @media (min-width: 768px) {
+    padding-bottom: 0;
+  }
+}
+</style>

package/lib/components/SLocalNavMenu.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { type IconifyIcon } from '@iconify/vue/dist/offline'
+import SIcon from './SIcon.vue'
+import SLink from './SLink.vue'
+
+export interface MenuItem {
+  icon?: IconifyIcon
+  text: string
+  link: string
+  active?: boolean
+}
+
+defineProps<{
+  menu: MenuItem[][]
+}>()
+</script>
+
+<template>
+  <div class="SLocalNavMenu">
+    <div v-for="nav, index in menu" :key="index" class="group">
+      <div v-for="item in nav" :key="item.text" class="item">
+        <SLink class="link" :class="{ active: item.active }" :href="item.link">
+          <SIcon v-if="item.icon" class="icon-svg" :icon="item.icon" />
+          <span class="text">{{ item.text }}</span>
+        </SLink>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.SLocalNavMenu {
+  display: flex;
+  margin: 0 -24px;
+  padding: 0 24px;
+  overflow: hidden;
+  overflow-x: auto;
+
+  @media (min-width: 768px) {
+    margin: 0 -32px;
+    padding: 0 32px;
+  }
+}
+
+.group {
+  position: relative;
+  display: flex;
+  gap: 16px;
+
+  & + & {
+    padding-left: 32px;
+  }
+
+  & + &::before {
+    position: absolute;
+    top: 4px;
+    left: 16px;
+    display: block;
+    width: 1px;
+    height: 16px;
+    background-color: var(--c-divider);
+    content: "";
+  }
+}
+
+.link {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  border-bottom: 1px solid transparent;
+  padding-bottom: 7px;
+  line-height: 24px;
+  font-size: 14px;
+  color: var(--c-text-2);
+  transition: border-color 0.25s, color 0.25s;
+
+  &:hover {
+    color: var(--c-text-1);
+  }
+
+  &.active,
+  &.router-link-active {
+    color: var(--c-text-1);
+    border-bottom-color: var(--c-border-info-1);
+  }
+}
+
+.icon-svg {
+  width: 16px;
+  height: 16px;
+}
+</style>

package/lib/components/SLocalNavTitle.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import SLink from './SLink.vue'
+
+export interface Title {
+  text: string
+  link?: string
+}
+
+defineProps<{
+  title: Title[]
+}>()
+</script>
+
+<template>
+  <div class="SLocalNavTitle">
+    <div v-for="item in title" :key="item.text" class="title">
+      <SLink class="text" :href="item.link">
+        {{ item.text }}
+      </SLink>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.SLocalNavTitle {
+  display: flex;
+  overflow: hidden;
+}
+
+.title {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  & + &::before {
+    display: inline-block;
+    margin: 0 8px;
+    line-height: 32px;
+    font-size: 20px;
+    color: var(--c-text-3);
+    content: "/";
+  }
+}
+
+.text {
+  line-height: 32px;
+  font-size: 20px;
+  font-weight: 500;
+}
+
+.text.link {
+  color: var(--c-text-info-1);
+  cursor: pointer;
+  transition: color 0.25s;
+
+  &:hover {
+    color: var(--c-text-info-2);
+  }
+}
+</style>

package/lib/components/SSheet.vue

@@ -33,11 +33,11 @@ defineEmits<{
   position: relative;
   border: 1px solid var(--c-divider);
   border-radius: 16px;
-  background-color: var(--c-bg);
+  background-color: var(--c-bg-elv-1);
   transition: opacity 0.25s, transform 0.25s;
 
   .dark & {
-    background-color: var(--c-bg-mute);
+    background-color: var(--c-bg-mute-1);
   }
 
   .SModal & {

package/lib/components/SSheetMedium.vue

@@ -27,11 +27,11 @@
 
 .SSheetMedium :deep(a) {
   font-weight: 500;
-  color: var(--c-info);
+  color: var(--c-text-info-1);
   transition: color .25s;
 
   &:hover {
-    color: var(--c-info-dark);
+    color: var(--c-text-info-2);
   }
 }
 

package/lib/components/STable.vue

@@ -8,6 +8,7 @@ import {
   reactive,
   ref,
   shallowRef,
+  toValue,
   unref,
   watch
 } from 'vue'
@@ -37,7 +38,8 @@ const row = shallowRef<HTMLElement | null>(null)
 
 const ordersToShow = computed(() => {
   const orders = unref(props.options.orders).filter((key) => {
-    return unref(props.options.columns)[key]?.show !== false
+    const show = unref(props.options.columns)[key]?.show
+    return toValue(show) !== false
   })
   if (!props.selected) {
     return orders

package/lib/components/STableCell.vue

@@ -99,6 +99,8 @@ const computedCell = computed<TableCell | undefined>(() =>
       :record="record"
       :avatars="computedCell.avatars"
       :color="computedCell.color"
+      :avatar-count="computedCell.avatarCount"
+      :name-count="computedCell.nameCount"
     />
     <STableCellActions
       v-else-if="computedCell.type === 'actions'"
@@ -130,11 +132,11 @@ const computedCell = computed<TableCell | undefined>(() =>
   overflow: hidden;
 
   .row:hover & {
-    background-color: var(--c-bg-elv-2);
+    background-color: var(--c-bg-elv-4);
   }
 
   .summary & {
-    background-color: var(--c-bg-elv-2);
+    background-color: var(--c-bg-elv-4);
   }
 
   .STableItem:first-child & {

package/lib/components/STableCellAvatar.vue

@@ -64,8 +64,8 @@ function resolve(
   display: inline-block;
   margin-left: 12px;
   line-height: 24px;
-  font-size: 12px;
-  font-weight: 500;
+  font-size: 14px;
+  font-weight: 400;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -78,11 +78,11 @@ function resolve(
   .STableCellAvatar.soft.link &    { color: var(--c-text-2); }
   .STableCellAvatar.mute.link &    { color: var(--c-text-3); }
 
-  .STableCellAvatar.link &       { color: var(--c-info); }
-  .STableCellAvatar.link:hover & { color: var(--c-info-dark); }
+  .STableCellAvatar.link &       { color: var(--c-text-info-1); }
+  .STableCellAvatar.link:hover & { color: var(--c-text-info-2); }
 
-  .STableCellAvatar.neutral.link:hover & { color: var(--c-info); }
-  .STableCellAvatar.soft.link:hover &    { color: var(--c-info); }
-  .STableCellAvatar.mute.link:hover &    { color: var(--c-info); }
+  .STableCellAvatar.neutral.link:hover & { color: var(--c-text-info-1); }
+  .STableCellAvatar.soft.link:hover &    { color: var(--c-text-info-1); }
+  .STableCellAvatar.mute.link:hover &    { color: var(--c-text-info-1); }
 }
 </style>

package/lib/components/STableCellAvatars.vue

@@ -3,12 +3,17 @@ import { computed } from 'vue'
 import { type TableCellAvatarsOption } from '../composables/Table'
 import SAvatar from './SAvatar.vue'
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   value?: any
   record?: any
   avatars: TableCellAvatarsOption[] | ((value: any, record: any) => TableCellAvatarsOption[])
   color?: 'neutral' | 'soft' | 'mute'
-}>()
+  avatarCount?: number
+  nameCount?: number
+}>(), {
+  avatarCount: 2,
+  nameCount: 2
+})
 
 const _avatars = computed(() => {
   return typeof props.avatars === 'function'
@@ -16,39 +21,57 @@ const _avatars = computed(() => {
     : props.avatars
 })
 
+const avatarDiff = computed(() => {
+  return _avatars.value.length - props.avatarCount
+})
+
 const displayAvatars = computed(() => {
-  return _avatars.value.slice(0, 3)
+  return _avatars.value.slice(0, props.avatarCount)
+})
+
+const nameDiff = computed(() => {
+  return _avatars.value.length - props.nameCount
 })
 
-const names = computed(() => {
-  if (_avatars.value.length === 0) {
+const displayNames = computed(() => {
+  // If the count is 0, treat it as "disabling" the name display.
+  if (props.nameCount === 0) {
     return null
   }
 
-  if (_avatars.value.length === 1) {
-    return _avatars.value[0].name
-  }
+  const slicedAvatars = _avatars.value.slice(0, props.nameCount)
+
+  const names = slicedAvatars.map((avatar) => avatar.name).join(', ')
 
-  if (_avatars.value.length === 2) {
-    return `${_avatars.value[0].name}, ${_avatars.value[1].name}`
+  if (nameDiff.value > 0) {
+    return `${names}, ...`
   }
 
-  return `${_avatars.value[0].name}, ${_avatars.value[1].name} +${_avatars.value.length - 2}`
+  return names
 })
 </script>
 
 <template>
   <div class="STableCellAvatars" :class="[color]">
     <div class="container">
-      <div class="avatars">
-        <div v-for="(avatar, index) in displayAvatars" :key="index" class="avatar">
+      <div v-if="displayAvatars.length" class="avatars">
+        <div
+          v-for="(avatar, index) in displayAvatars"
+          :key="index"
+          class="avatar"
+        >
           <div class="avatar-box">
             <SAvatar size="mini" :avatar="avatar.image" :name="avatar.name" />
           </div>
         </div>
+        <div v-if="avatarDiff > 0" class="avatar">
+          <div class="avatar-box placeholder" :class="{ small: avatarDiff >= 10 }">
+            +{{ avatarDiff }}
+          </div>
+        </div>
       </div>
-      <div class="names">
-        {{ names }}
+      <div v-if="displayNames" class="names">
+        {{ displayNames }}
       </div>
     </div>
   </div>
@@ -72,28 +95,44 @@ const names = computed(() => {
 .avatar {
   position: relative;
   width: 20px;
+}
 
-  &:nth-child(1) { z-index: 30; }
-  &:nth-child(2) { z-index: 20; }
-  &:nth-child(3) { z-index: 10; }
+.avatar.placeholder {
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .avatar-box {
-  border: 2px solid var(--c-bg-elv-up);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 2px solid var(--c-bg-elv-3);
   border-radius: 50%;
   width: 28px;
+  height: 28px;
 
   .row:hover & {
-    border: 2px solid var(--c-bg-elv);
+    border: 2px solid var(--c-bg-elv-4);
+  }
+
+  &.placeholder {
+    font-size: 10px;
+    font-weight: 500;
+    color: var(--c-text-2);
+    background-color: var(--c-bg-mute-1);
+  }
+
+  &.placeholder.small {
+    font-size: 9px;
   }
 }
 
 .names {
   line-height: 28px;
   font-size: 12px;
-  font-weight: 500;
-
-  .STableCellAvatars.soft & { color: var(--c-text-2); }
-  .STableCellAvatars.mute & { color: var(--c-text-3); }
 }
+
+.STableCellAvatars.soft .names { color: var(--c-text-2); }
+.STableCellAvatars.mute .names { color: var(--c-text-3); }
 </style>

package/lib/components/STableCellNumber.vue

@@ -76,28 +76,28 @@ const classes = computed(() => [
   &.neutral { color: var(--c-text-1); }
   &.soft    { color: var(--c-text-2); }
   &.mute    { color: var(--c-text-3); }
-  &.info    { color: var(--c-info-text); }
-  &.success { color: var(--c-success-text); }
-  &.warning { color: var(--c-warning-text); }
-  &.danger  { color: var(--c-danger-text); }
+  &.info    { color: var(--c-text-info-1); }
+  &.success { color: var(--c-text-success-1); }
+  &.warning { color: var(--c-text-warning-1); }
+  &.danger  { color: var(--c-text-danger-1); }
 
-  .STableCellNumber.link &       { color: var(--c-info-text); }
-  .STableCellNumber.link:hover & { color: var(--c-info-text-dark); }
+  .STableCellNumber.link &       { color: var(--c-text-info-1); }
+  .STableCellNumber.link:hover & { color: var(--c-text-info-2); }
 
   .STableCellNumber.link &.neutral       { color: var(--c-text-1); }
-  .STableCellNumber.link:hover &.neutral { color: var(--c-info-text); }
+  .STableCellNumber.link:hover &.neutral { color: var(--c-text-info-1); }
   .STableCellNumber.link &.soft          { color: var(--c-text-2); }
-  .STableCellNumber.link:hover &.soft    { color: var(--c-info-text); }
+  .STableCellNumber.link:hover &.soft    { color: var(--c-text-info-1); }
   .STableCellNumber.link &.mute          { color: var(--c-text-3); }
   .STableCellNumber.link:hover &.mute    { color: var(--c-text-3); }
-  .STableCellNumber.link &.info          { color: var(--c-info-text); }
-  .STableCellNumber.link:hover &.info    { color: var(--c-info-text-dark); }
-  .STableCellNumber.link &.success       { color: var(--c-success-text); }
-  .STableCellNumber.link:hover &.success { color: var(--c-success-text-dark); }
-  .STableCellNumber.link &.warning       { color: var(--c-warning-text); }
-  .STableCellNumber.link:hover &.warning { color: var(--c-warning-text-darker); }
-  .STableCellNumber.link &.danger        { color: var(--c-danger-text); }
-  .STableCellNumber.link:hover &.danger  { color: var(--c-danger-text-dark); }
+  .STableCellNumber.link &.info          { color: var(--c-text-info-1); }
+  .STableCellNumber.link:hover &.info    { color: var(--c-text-info-2); }
+  .STableCellNumber.link &.success       { color: var(--c-text-success-1); }
+  .STableCellNumber.link:hover &.success { color: var(--c-text-success-2); }
+  .STableCellNumber.link &.warning       { color: var(--c-text-warning-1); }
+  .STableCellNumber.link:hover &.warning { color: var(--c-text-warning-2); }
+  .STableCellNumber.link &.danger        { color: var(--c-text-danger-1); }
+  .STableCellNumber.link:hover &.danger  { color: var(--c-text-danger-2); }
 
   .STableCell.summary & {
     font-weight: var(--table-cell-summary-font-weight);
@@ -118,23 +118,23 @@ const classes = computed(() => [
   &.soft    { color: var(--c-text-2); }
   &.mute    { color: var(--c-text-3); }
 
-  .STableCellNumber.link &       { color: var(--c-info-text); }
-  .STableCellNumber.link:hover & { color: var(--c-info-text-dark); }
+  .STableCellNumber.link &       { color: var(--c-text-info-1); }
+  .STableCellNumber.link:hover & { color: var(--c-text-info-2); }
 
   .STableCellNumber.link &.neutral       { color: var(--c-text-1); }
-  .STableCellNumber.link:hover &.neutral { color: var(--c-info-text); }
+  .STableCellNumber.link:hover &.neutral { color: var(--c-text-info-1); }
   .STableCellNumber.link &.soft          { color: var(--c-text-2); }
-  .STableCellNumber.link:hover &.soft    { color: var(--c-info-text); }
+  .STableCellNumber.link:hover &.soft    { color: var(--c-text-info-1); }
   .STableCellNumber.link &.mute          { color: var(--c-text-3); }
-  .STableCellNumber.link:hover &.mute    { color: var(--c-info-text); }
-  .STableCellNumber.link &.info          { color: var(--c-info-text); }
-  .STableCellNumber.link:hover &.info    { color: var(--c-info-text-dark); }
-  .STableCellNumber.link &.success       { color: var(--c-success-text); }
-  .STableCellNumber.link:hover &.success { color: var(--c-success-text-dark); }
-  .STableCellNumber.link &.warning       { color: var(--c-warning-text); }
-  .STableCellNumber.link:hover &.warning { color: var(--c-warning-text-dark); }
-  .STableCellNumber.link &.danger        { color: var(--c-danger-text); }
-  .STableCellNumber.link:hover &.danger  { color: var(--c-danger-text-dark); }
+  .STableCellNumber.link:hover &.mute    { color: var(--c-text-3); }
+  .STableCellNumber.link &.info          { color: var(--c-text-info-1); }
+  .STableCellNumber.link:hover &.info    { color: var(--c-text-info-2); }
+  .STableCellNumber.link &.success       { color: var(--c-text-success-1); }
+  .STableCellNumber.link:hover &.success { color: var(--c-text-success-2); }
+  .STableCellNumber.link &.warning       { color: var(--c-text-warning-1); }
+  .STableCellNumber.link:hover &.warning { color: var(--c-text-warning-2); }
+  .STableCellNumber.link &.danger        { color: var(--c-text-danger-1); }
+  .STableCellNumber.link:hover &.danger  { color: var(--c-text-danger-2); }
 }
 
 .svg {

package/lib/components/STableCellText.vue

@@ -100,28 +100,28 @@ const _iconColor = computed(() => {
   &.neutral { color: var(--c-text-1); }
   &.soft    { color: var(--c-text-2); }
   &.mute    { color: var(--c-text-3); }
-  &.info    { color: var(--c-info-text); }
-  &.success { color: var(--c-success-text); }
-  &.warning { color: var(--c-warning-text); }
-  &.danger  { color: var(--c-danger-text); }
+  &.info    { color: var(--c-text-info-1); }
+  &.success { color: var(--c-text-success-1); }
+  &.warning { color: var(--c-text-warning-1); }
+  &.danger  { color: var(--c-text-danger-1); }
 
-  .STableCellText.link &       { color: var(--c-info-text); }
-  .STableCellText.link:hover & { color: var(--c-info-text-dark); }
+  .STableCellText.link &       { color: var(--c-text-info-1); }
+  .STableCellText.link:hover & { color: var(--c-text-info-2); }
 
   .STableCellText.link &.neutral       { color: var(--c-text-1); }
-  .STableCellText.link:hover &.neutral { color: var(--c-info-text); }
+  .STableCellText.link:hover &.neutral { color: var(--c-text-info-1); }
   .STableCellText.link &.soft          { color: var(--c-text-2); }
-  .STableCellText.link:hover &.soft    { color: var(--c-info-text); }
+  .STableCellText.link:hover &.soft    { color: var(--c-text-info-1); }
   .STableCellText.link &.mute          { color: var(--c-text-3); }
   .STableCellText.link:hover &.mute    { color: var(--c-text-3); }
-  .STableCellText.link &.info          { color: var(--c-info-text); }
-  .STableCellText.link:hover &.info    { color: var(--c-info-text-dark); }
-  .STableCellText.link &.success       { color: var(--c-success-text); }
-  .STableCellText.link:hover &.success { color: var(--c-success-text-dark); }
-  .STableCellText.link &.warning       { color: var(--c-warning-text); }
-  .STableCellText.link:hover &.warning { color: var(--c-warning-text-darker); }
-  .STableCellText.link &.danger        { color: var(--c-danger-text); }
-  .STableCellText.link:hover &.danger  { color: var(--c-danger-text-dark); }
+  .STableCellText.link &.info          { color: var(--c-text-info-1); }
+  .STableCellText.link:hover &.info    { color: var(--c-text-info-2); }
+  .STableCellText.link &.success       { color: var(--c-text-success-1); }
+  .STableCellText.link:hover &.success { color: var(--c-text-success-2); }
+  .STableCellText.link &.warning       { color: var(--c-text-warning-1); }
+  .STableCellText.link:hover &.warning { color: var(--c-text-warning-2); }
+  .STableCellText.link &.danger        { color: var(--c-text-danger-1); }
+  .STableCellText.link:hover &.danger  { color: var(--c-text-danger-2); }
 
   .STableCell.summary & {
     font-weight: var(--table-cell-summary-font-weight);
@@ -142,23 +142,23 @@ const _iconColor = computed(() => {
   &.soft    { color: var(--c-text-2); }
   &.mute    { color: var(--c-text-3); }
 
-  .STableCellText.link &       { color: var(--c-info-text); }
-  .STableCellText.link:hover & { color: var(--c-info-text-dark); }
+  .STableCellText.link &       { color: var(--c-text-info-1); }
+  .STableCellText.link:hover & { color: var(--c-text-info-2); }
 
   .STableCellText.link &.neutral       { color: var(--c-text-1); }
-  .STableCellText.link:hover &.neutral { color: var(--c-info-text); }
+  .STableCellText.link:hover &.neutral { color: var(--c-text-info-1); }
   .STableCellText.link &.soft          { color: var(--c-text-2); }
-  .STableCellText.link:hover &.soft    { color: var(--c-info-text); }
+  .STableCellText.link:hover &.soft    { color: var(--c-text-info-1); }
   .STableCellText.link &.mute          { color: var(--c-text-3); }
-  .STableCellText.link:hover &.mute    { color: var(--c-info-text); }
-  .STableCellText.link &.info          { color: var(--c-info-text); }
-  .STableCellText.link:hover &.info    { color: var(--c-info-dark); }
-  .STableCellText.link &.success       { color: var(--c-success-text); }
-  .STableCellText.link:hover &.success { color: var(--c-success-text-dark); }
-  .STableCellText.link &.warning       { color: var(--c-warning-text); }
-  .STableCellText.link:hover &.warning { color: var(--c-warning-text-dark); }
-  .STableCellText.link &.danger        { color: var(--c-danger-text); }
-  .STableCellText.link:hover &.danger  { color: var(--c-danger-text-dark); }
+  .STableCellText.link:hover &.mute    { color: var(--c-text-3); }
+  .STableCellText.link &.info          { color: var(--c-text-info-1); }
+  .STableCellText.link:hover &.info    { color: var(--c-text-info-2); }
+  .STableCellText.link &.success       { color: var(--c-text-success-1); }
+  .STableCellText.link:hover &.success { color: var(--c-text-success-2); }
+  .STableCellText.link &.warning       { color: var(--c-text-warning-1); }
+  .STableCellText.link:hover &.warning { color: var(--c-text-warning-2); }
+  .STableCellText.link &.danger        { color: var(--c-text-danger-1); }
+  .STableCellText.link:hover &.danger  { color: var(--c-text-danger-2); }
 }
 
 .svg {

package/lib/components/STableColumn.vue

@@ -185,7 +185,7 @@ function stopDialogPositionListener() {
   transition: color 0.25s;
 
   .STableColumn.active & {
-    color: var(--c-info);
+    color: var(--c-text-info-1);
   }
 }
 
@@ -208,15 +208,11 @@ function stopDialogPositionListener() {
 
   &:hover {
     color: var(--c-text-1);
-    background-color: var(--c-bg-mute);
+    background-color: var(--c-bg-mute-1);
   }
 
   &.active {
-    color: var(--c-info);
-  }
-
-  .dark &:hover {
-    background-color: var(--c-bg);
+    color: var(--c-text-info-1);
   }
 }
 
@@ -260,7 +256,7 @@ function stopDialogPositionListener() {
   }
 
   &:hover::before {
-    background-color: var(--c-info);
+    background-color: var(--c-border-info-1);
   }
 
   .STableItem:last-child .STableColumn & {

package/lib/components/STableHeaderMenuItem.vue

@@ -47,7 +47,7 @@ const { container, isOpen, toggle } = useFlyout()
   transition: background-color 0.25s;
 
   &:hover {
-    background-color: var(--c-mute);
+    background-color: var(--c-bg-mute-1);
   }
 }
 
@@ -90,7 +90,7 @@ const { container, isOpen, toggle } = useFlyout()
   border-radius: 6px;
   width: 6px;
   height: 6px;
-  background-color: var(--c-info-text);
+  background-color: var(--c-fg-info-1);
 }
 
 .dialog {

package/lib/components/STooltip.vue

@@ -191,10 +191,10 @@ function onBlur() {
 }
 
 .tip :deep(a) {
-  color: var(--c-info-text);
+  color: var(--c-text-info-1);
 
   &:hover {
-    color: var(--c-info-text-dark);
+    color: var(--c-text-info-2);
   }
 }
 </style>

package/lib/composables/Table.ts

@@ -1,4 +1,4 @@
-import { type Component, type MaybeRef } from 'vue'
+import { type Component, type MaybeRef, type MaybeRefOrGetter } from 'vue'
 import { type Mode } from '../components/SButton.vue'
 import { type Day } from '../support/Day'
 import { type DropdownSection } from './Dropdown'
@@ -48,7 +48,7 @@ export interface TableColumn<V, R, SV, SR> {
   resizable?: boolean
   cell?: TableCell<V, R> | TableColumnCellFn<V, R>
   summaryCell?: TableCell<SV, SR> | TableColumnCellFn<SV, SR>
-  show?: boolean
+  show?: MaybeRefOrGetter<boolean>
 }
 
 export type TableColumnCellFn<V, R> = (value: V, record: R) => TableCell<V, R>
@@ -158,6 +158,8 @@ export interface TableCellAvatars<V = any, R = any> extends TableCellBase {
   type: 'avatars'
   avatars: TableCellAvatarsOption[] | ((value: V, record: R) => TableCellAvatarsOption[])
   color?: 'neutral' | 'soft' | 'mute'
+  avatarCount?: number
+  nameCount?: number
 }
 
 export interface TableCellAvatarsOption {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "3.11.1",
+  "version": "3.13.0",
   "packageManager": "pnpm@8.12.1",
   "description": "Vue Components for Global Brain Design System.",
   "author": "Kia Ishii <ka.ishii@globalbrains.com>",

package/lib/components/icon/SIconGoogle.vue

@@ -1,12 +0,0 @@
-<template>
-  <svg
-    viewBox="0 0 16 16"
-    xmlns="http://www.w3.org/2000/svg"
-    fill-rule="evenodd"
-    clip-rule="evenodd"
-    stroke-linejoin="round"
-    stroke-miterlimit="1.414"
-  >
-    <path d="M8.16 6.857V9.6h4.537c-.183 1.177-1.37 3.45-4.537 3.45-2.73 0-4.96-2.26-4.96-5.05s2.23-5.05 4.96-5.05c1.554 0 2.594.66 3.19 1.233l2.17-2.092C12.126.79 10.32 0 8.16 0c-4.423 0-8 3.577-8 8s3.577 8 8 8c4.617 0 7.68-3.246 7.68-7.817 0-.526-.057-.926-.126-1.326H8.16z" />
-  </svg>
-</template>