@globalbrain/sefirot 2.34.1 → 2.36.0

package/lib/components/SButton.vue

@@ -86,12 +86,12 @@ function handleClick(): void {
 <template>
   <SFragment
     :is="hasTooltip && STooltip"
-    :tag="tooltip?.tag"
-    :text="unref(tooltip?.text)"
-    :position="tooltip?.position"
+    :tag="props.tooltip?.tag"
+    :text="unref(props.tooltip?.text)"
+    :position="props.tooltip?.position"
     display="inline-block"
-    :trigger="tooltip?.trigger ?? 'both'"
-    :timeout="tooltip?.timeout"
+    :trigger="props.tooltip?.trigger ?? 'both'"
+    :timeout="props.tooltip?.timeout"
     :tabindex="-1"
   >
     <template v-if="$slots['tooltip-text']" #text><slot name="tooltip-text" /></template>
@@ -125,6 +125,7 @@ function handleClick(): void {
 .SButton {
   position: relative;
   display: inline-flex;
+  justify-content: center;
   align-items: center;
   letter-spacing: 0;
   text-align: center;

package/lib/components/SCard.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { provideCardState } from '../composables/Card'
+
+export type Size = 'small' | 'medium'
+
+defineProps<{
+  size?: Size
+}>()
+
+const { isCollapsed } = provideCardState()
+</script>
+
+<template>
+  <div class="SCard" :class="[size, { collapsed: isCollapsed }]">
+    <slot />
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.SCard {
+  display: grid;
+  gap: 1px;
+  border: 1px solid var(--c-divider-2);
+  border-radius: 6px;
+  background-color: var(--c-gutter);
+}
+
+.SCard.collapsed {
+  height: 48px;
+  overflow: hidden;
+}
+
+.SModal > .SCard {
+  margin: 12px 12px 128px;
+  box-shadow: var(--shadow-depth-3);
+  transition: opacity 0.25s, transform 0.25s;
+
+  @media (min-width: 512px) {
+    margin: 24px 24px 128px;
+  }
+
+  @media (min-width: 768px) {
+    margin: 48px 48px 128px;
+  }
+
+  &.small {
+    @media (min-width: 560px) {
+      margin: 24px auto 128px;
+      max-width: 512px;
+    }
+
+    @media (min-width: 768px) {
+      margin: 48px auto 128px;
+    }
+  }
+
+  &.medium {
+    @media (min-width: 864px) {
+      margin: 48px auto 128px;
+      max-width: 768px;
+    }
+  }
+}
+
+.SModal.fade-enter-from > .SCard,
+.SModal.fade-leave-to > .SCard {
+  opacity: 0;
+  transform: translateY(8px);
+}
+</style>

package/lib/components/SCardBlock.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+export type Space = 'compact' | 'wide'
+
+defineProps<{
+  space?: Space
+}>()
+</script>
+
+<template>
+  <div class="SCardBlock" :class="[space]">
+    <slot />
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.SCardBlock {
+  padding: var(--card-padding, 0);
+  background-color: var(--c-bg-elv-3);
+
+  &.compact { padding: 24px; }
+  &.wide    { padding: 48px; }
+}
+
+.SCard > .SCardBlock:first-child {
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+}
+
+.SCard > .SCardBlock:last-child {
+  border-bottom-right-radius: 5px;
+  border-bottom-left-radius: 5px;
+}
+</style>

package/lib/components/SCardFooter.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="SCardFooter">
+    <slot />
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.SCardFooter {
+  display: flex;
+  align-items: center;
+  border-radius: 0 0 5px 5px;
+  background-color: var(--c-bg-elv-3);
+}
+</style>

package/lib/components/SCardFooterAction.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import SButton, { type Mode, type Tooltip } from './SButton.vue'
+
+defineProps<{
+  mode?: Mode
+  label?: string
+  labelMode?: Mode
+  loading?: boolean
+  disabled?: boolean
+  tooltip?: Tooltip
+}>()
+
+defineEmits<{
+  (e: 'click'): void
+}>()
+</script>
+
+<template>
+  <div class="SCardFooterAction">
+    <SButton
+      size="medium"
+      :mode="mode"
+      :label="label"
+      :label-mode="labelMode"
+      :loading="loading"
+      :disabled="disabled"
+      :tooltip="tooltip"
+      @click="$emit('click')"
+    />
+  </div>
+</template>

package/lib/components/SCardFooterActions.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="SCardFooterActions">
+    <slot />
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.SCardFooterActions {
+  display: flex;
+  justify-content: flex-end;
+  flex-grow: 1;
+  gap: 12px;
+  padding: 12px 24px;
+}
+</style>

package/lib/components/SCardHeader.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="SCardHeader">
+    <slot />
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.SCardHeader {
+  display: flex;
+  align-items: center;
+  border-radius: 5px 5px 0 0;
+  height: 48px;
+  background-color: var(--c-bg-soft);
+}
+</style>

package/lib/components/SCardHeaderAction.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { type IconifyIcon } from '@iconify/vue/dist/offline'
+import SButton, { type Tooltip } from './SButton.vue'
+
+defineProps<{
+  icon: IconifyIcon
+  disabled?: boolean
+  tooltip?: Tooltip
+}>()
+
+defineEmits<{
+  (e: 'click'): void
+}>()
+</script>
+
+<template>
+  <div class="SCardHeaderAction">
+    <SButton
+      type="text"
+      mode="mute"
+      size="small"
+      :icon="icon"
+      :disabled="disabled"
+      :tooltip="tooltip"
+      @click="$emit('click')"
+    />
+  </div>
+</template>

package/lib/components/SCardHeaderActionClose.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import IconX from '@iconify-icons/ph/x-bold'
+import SButton, { type Tooltip } from './SButton.vue'
+
+defineProps<{
+  disabled?: boolean
+  tooltip?: Tooltip
+}>()
+
+defineEmits<{
+  (e: 'click'): void
+}>()
+</script>
+
+<template>
+  <div class="SCardHeaderActionClose">
+    <SButton
+      type="text"
+      mode="mute"
+      size="small"
+      :icon="IconX"
+      :disabled="disabled"
+      :tooltip="tooltip"
+      @click="$emit('click')"
+    />
+  </div>
+</template>

package/lib/components/SCardHeaderActionCollapse.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import IconArrowsInLineVertical from '@iconify-icons/ph/arrows-in-line-vertical-bold'
+import IconArrowsOutLineVertical from '@iconify-icons/ph/arrows-out-line-vertical-bold'
+import { computed, shallowRef } from 'vue'
+import { useCardState } from '../composables/Card'
+import SButton, { type Tooltip } from './SButton.vue'
+
+const props = defineProps<{
+  collapsed?: boolean
+  disabled?: boolean
+  tooltip?: Tooltip
+}>()
+
+defineEmits<{
+  (e: 'click'): void
+}>()
+
+const { isCollapsed, setCollapse, toggleCollapse } = useCardState()
+
+setCollapse(props.collapsed)
+
+const el = shallowRef<HTMLElement | null>(null)
+
+const icon = computed(() => {
+  return isCollapsed.value
+    ? IconArrowsOutLineVertical
+    : IconArrowsInLineVertical
+})
+</script>
+
+<template>
+  <div
+    class="SCardHeaderActionCollapse"
+    :class="{ collapsed: isCollapsed }"
+    ref="el"
+  >
+    <SButton
+      type="text"
+      mode="mute"
+      size="small"
+      :icon="icon"
+      :disabled="disabled"
+      :tooltip="tooltip"
+      @click="toggleCollapse"
+    />
+  </div>
+</template>

package/lib/components/SCardHeaderActions.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="SCardHeaderActions">
+    <slot />
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.SCardHeaderActions {
+  display: flex;
+  justify-content: flex-end;
+  padding-right: 8px;
+}
+</style>

package/lib/components/SCardHeaderTitle.vue

@@ -0,0 +1,15 @@
+<template>
+  <p class="SCardHeaderTitle">
+    <slot />
+  </p>
+</template>
+
+<style scoped lang="postcss">
+.SCardHeaderTitle {
+  flex-grow: 1;
+  padding-left: 24px;
+  line-height: 32px;
+  font-size: 14px;
+  font-weight: 600;
+}
+</style>

package/lib/components/SDropdown.vue

@@ -19,25 +19,20 @@ defineProps<{
 
 <style scoped lang="postcss">
 .SDropdown {
-  border: 1px solid var(--c-divider-light);
-  border-radius: 12px;
+  border: 1px solid var(--c-divider-2);
+  border-radius: 6px;
   min-width: 256px;
   max-height: 384px;
-  background-color: var(--c-bg);
   overflow-y: auto;
 
   &::-webkit-scrollbar {
     display: none;
   }
-
-  .dark & {
-    background-color: var(--c-bg-mute);
-  }
 }
 
-.section {
-  & + & {
-    border-top: 1px solid var(--c-divider-light);
-  }
+.container {
+  display: grid;
+  gap: 1px;
+  background-color: var(--c-gutter);
 }
 </style>

package/lib/components/SDropdownSection.vue

@@ -31,28 +31,3 @@ defineProps<{
     :comp="section.component"
   />
 </template>
-
-<style scoped lang="postcss">
-.SDropdown {
-  border: 1px solid var(--c-divider-light);
-  border-radius: 12px;
-  min-width: 256px;
-  max-height: 384px;
-  background-color: var(--c-bg);
-  overflow-y: auto;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
-  .dark & {
-    background-color: var(--c-bg-mute);
-  }
-}
-
-.section {
-  & + & {
-    border-top: 1px solid var(--c-divider-light);
-  }
-}
-</style>

package/lib/components/SDropdownSectionActions.vue

@@ -20,7 +20,9 @@ defineProps<{
 .SDropdownSectionActions {
   display: flex;
   justify-content: flex-end;
+  gap: 4px;
   padding: 8px;
+  background-color: var(--c-bg-elv-3);
 }
 
 .button {
@@ -30,8 +32,7 @@ defineProps<{
   width: 100%;
   text-align: left;
   line-height: 32px;
-  font-size: 12px;
-  font-weight: 500;
+  font-size: 14px;
   transition: color 0.25s, background-color 0.25s;
 
   &.neutral        { color: var(--button-text-neutral-text-color); }

package/lib/components/SDropdownSectionFilter.vue

@@ -74,11 +74,14 @@ function handleClick(option: DropdownSectionFilterOption, value: string | number
           @keyup.down.prevent="focusNext"
           @click="handleClick(option, option.value)"
         >
-          <span class="checkbox">
+          <span v-if="isArray(unref(selected))" class="checkbox">
             <span class="checkbox-box">
               <SIcon :icon="IconCheck" class="checkbox-icon" />
             </span>
           </span>
+          <span v-else class="radio">
+            <span class="radio-dot" />
+          </span>
           <span class="option-item">
             <SDropdownSectionFilterItem :option="option" />
           </span>
@@ -93,33 +96,34 @@ function handleClick(option: DropdownSectionFilterOption, value: string | number
 </template>
 
 <style scoped lang="postcss">
+.SDropdownSectionFilter {
+  background-color: var(--c-bg-elv-3);
+}
+
 .search {
   position: sticky;
   top: 0;
-  border-bottom: 1px solid var(--c-divider-light);
+  border-bottom: 1px solid var(--c-gutter);
   padding: 8px;
   background-color: var(--c-bg-elv-up);
 }
 
 .input {
-  border: 1px solid var(--c-divider);
+  border: 1px solid var(--c-divider-1);
   border-radius: 6px;
   padding: 0 8px;
   width: 100%;
   font-size: 14px;
   line-height: 32px;
-  background-color: var(--c-bg);
+  background-color: var(--input-bg-color);
   transition: border-color 0.25s;
 
   &::placeholder {
-    color: var(--c-text-3);
+    color: var(--input-placeholder-color);
   }
 
-  &:hover { border-color: var(--c-black); }
-  &:focus { border-color: var(--c-info); }
-
-  .dark &:hover { border-color: var(--c-gray); }
-  .dark &:focus { border-color: var(--c-info); }
+  &:hover { border-color: var(--input-hover-border-color); }
+  &:focus { border-color: var(--input-focus-border-color); }
 }
 
 .list {
@@ -136,33 +140,29 @@ function handleClick(option: DropdownSectionFilterOption, value: string | number
 
   &:hover,
   &:focus {
-    background-color: var(--c-bg-mute);
-  }
-
-  .dark &:hover,
-  .dark &:focus {
-    background-color: var(--c-bg);
+    background-color: var(--c-mute);
   }
 }
 
 .checkbox {
   display: block;
   padding-top: 8px;
+  padding-bottom: 8px;
 }
 
 .checkbox-box {
   display: flex;
   justify-content: center;
   align-items: center;
-  border: 1px solid var(--c-divider);
+  border: 1px solid var(--c-divider-1);
   border-radius: 4px;
   width: 16px;
   height: 16px;
-  background-color: var(--c-bg);
+  background-color: var(--input-bg-color);
   transition: border-color 0.1s, background-color 0.1s;
 
   .button.active & {
-    border-color: var(--c-info);
+    border-color: var(--c-info-text);
     background-color: var(--c-info);
   }
 }
@@ -180,19 +180,53 @@ function handleClick(option: DropdownSectionFilterOption, value: string | number
   }
 }
 
+.radio {
+  position: relative;
+  flex-shrink: 0;
+  border: 1px solid var(--c-divider-1);
+  border-radius: 50%;
+  margin-top: 8px;
+  margin-bottom: 8px;
+  width: 16px;
+  height: 16px;
+  background-color: var(--input-bg-color);
+  transition: border-color 0.25s;
+
+  .button.active & {
+    border-color: var(--c-info-light);
+  }
+}
+
+.radio-dot {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  width: 100%;
+  background-color: var(--c-info-light);
+  opacity: 0;
+  transform: scale(0);
+  transition: opacity 0.25s, transform 0.1s;
+
+  .button.active & {
+    opacity: 1;
+    transform: scale(0.6);
+  }
+}
+
 .option-item {
-  padding-left: 8px;
+  padding-left: 12px;
   width: 100%;
 }
 
 .empty {
-  padding: 16px;
+  padding: 14px 16px;
   font-size: 12px;
-  font-weight: 500;
   color: var(--c-text-2);
-
-  .search + & {
-    border-top: 1px solid var(--c-divider-light);
-  }
 }
 </style>

package/lib/components/SDropdownSectionFilterItemAvatar.vue

@@ -31,7 +31,7 @@ defineProps<{
 .name {
   display: inline-block;
   padding-left: 8px;
-  font-size: 12px;
+  font-size: 14px;
   font-weight: 400;
   white-space: nowrap;
   overflow: hidden;

package/lib/components/SDropdownSectionFilterItemText.vue

@@ -15,13 +15,12 @@ defineProps<{
   display: inline-block;
   padding: 6px 0;
   line-height: 20px;
-  font-size: 12px;
 }
 
 .text {
   display: inline-block;
   line-height: 20px;
-  font-size: 12px;
+  font-size: 14px;
   font-weight: 400;
 }
 </style>

package/lib/components/SDropdownSectionMenu.vue

@@ -19,6 +19,7 @@ defineProps<{
 <style scoped lang="postcss">
 .SDropdownSectionMenu {
   padding: 8px;
+  background-color: var(--c-bg-elv-3);
 }
 
 .button {
@@ -28,12 +29,12 @@ defineProps<{
   width: 100%;
   text-align: left;
   line-height: 32px;
-  font-size: 12px;
+  font-size: 14px;
   font-weight: 400;
   transition: color 0.25s, background-color 0.25s;
 
   &:hover {
-    background-color: var(--c-bg-elv-down);
+    background-color: var(--c-mute);
   }
 }
 </style>

package/lib/components/SLink.vue

@@ -1,13 +1,26 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-const props = defineProps({
-  href: { type: String, default: null }
+const props = withDefaults(defineProps<{
+  href?: string | null
+  external?: boolean | null
+}>(), {
+  external: null
 })
 
 const OUTBOUND_REGEX = /^[a-z]+:/i
 
-const isExternal = computed(() => OUTBOUND_REGEX.test(props.href))
+const isExternal = computed(() => {
+  if (!props.href) {
+    return false
+  }
+
+  if (props.external !== null) {
+    return props.external
+  }
+
+  return OUTBOUND_REGEX.test(props.href)
+})
 
 const component = computed(() => {
   if (!props.href) {

package/lib/components/SModal.vue

@@ -29,11 +29,11 @@ function onClick(e: MouseEvent) {
 
 <template>
   <Teleport to="#sefirot-modals">
-    <transition name="fade">
+    <Transition name="fade">
       <div v-if="open" class="SModal" ref="el" @mousedown="onClick">
         <slot />
       </div>
-    </transition>
+    </Transition>
   </Teleport>
 </template>
 

package/lib/components/STableCell.vue

@@ -73,6 +73,7 @@ const computedCell = computed<TableCell | undefined>(() =>
       :name="computedCell.name"
       :link="computedCell.link"
       :color="computedCell.color"
+      :on-click="computedCell.onClick"
     />
     <STableCellAvatars
       v-else-if="computedCell.type === 'avatars'"

package/lib/components/STableCellAvatar.vue

@@ -10,6 +10,7 @@ const props = defineProps<{
   name?: string | null | ((value: any, record: any) => string | null | undefined)
   link?: string | null | ((value: any, record: any) => string | null | undefined)
   color?: 'neutral' | 'soft' | 'mute'
+  onClick?(value: any, record: any): void
 }>()
 
 const _image = computed(() => resolve(props.image))
@@ -30,8 +31,13 @@ function resolve(
 </script>
 
 <template>
-  <div class="STableCellAvatar" :class="[{ link }, color]">
-    <SLink class="container" :href="_link ?? undefined">
+  <div class="STableCellAvatar" :class="[{ link: link || onClick }, color]">
+    <SLink
+      class="container"
+      :href="_link ?? undefined"
+      :role="onClick ? 'button' : null"
+      @click="() => onClick?.(value, record)"
+    >
       <div v-if="_image" class="avatar">
         <SAvatar size="mini" :avatar="_image" :name="_name" />
       </div>

package/lib/components/STableColumn.vue

@@ -90,14 +90,14 @@ function stopResizeListener() {
 }
 
 async function adjustDialogPosition() {
-  if (!props.dropdown || !isOpen.value) {
+  const rect = container.value?.getBoundingClientRect()
+
+  if (!props.dropdown || !isOpen.value || !rect) {
     return
   }
 
   startDialogPositionListener()
 
-  const rect = container.value.getBoundingClientRect()
-
   await nextTick()
 
   const dialogWidth = dialog.value?.offsetWidth ?? 0

package/lib/components/STableHeader.vue

@@ -28,8 +28,10 @@ defineProps<{
 
 <style scoped lang="postcss">
 .STableHeader {
+  border-radius: 6px 6px 0 0;
   padding-right: var(--table-padding-right);
   padding-left: var(--table-padding-left);
+  background-color: var(--c-bg-soft);
 }
 
 .container {

package/lib/composables/Card.ts

@@ -0,0 +1,45 @@
+import { type InjectionKey, type Ref, inject, provide, ref } from 'vue'
+
+export interface CardState {
+  isCollapsed: Ref<boolean>
+  setCollapse(value: boolean): void
+  toggleCollapse(): void
+}
+
+export const cardStateKey = Symbol('card-state') as InjectionKey<CardState>
+
+export function provideCardState(): CardState {
+  const isCollapsed = ref(false)
+
+  function setCollapse(value: boolean): void {
+    isCollapsed.value = value
+  }
+
+  function toggleCollapse(): void {
+    isCollapsed.value = !isCollapsed.value
+  }
+
+  const cardState = {
+    isCollapsed,
+    setCollapse,
+    toggleCollapse
+  }
+
+  provide(cardStateKey, cardState)
+
+  return cardState
+}
+
+export function useCardState(): CardState {
+  const cardState = inject(cardStateKey)
+
+  if (!cardState) {
+    throw new Error(
+      '[sefirot] Unexpected call to `useCardState`. This probably means you'
+      + ' are using `<SCard>` child component outside of `<SCard>`. Make sure'
+      + ' to wrap the component within `<SCard>` component.'
+    )
+  }
+
+  return cardState
+}

package/lib/composables/Flyout.ts

@@ -19,7 +19,7 @@ export function useFlyout(container?: Ref<any>) {
   }
 
   function closeOnClickOutside(event: any) {
-    if (!el.value.contains(event.target) && isVisible(el.value)) {
+    if (!el.value?.contains(event.target) && isVisible(el.value)) {
       isOpen.value = false
     }
   }

package/lib/composables/Form.ts

@@ -1,5 +1,5 @@
 import { type Ref, computed, reactive, toRefs } from 'vue'
-import { useSnackbars } from '../stores/Snackbars'
+import { type Snackbar, useSnackbars } from '../stores/Snackbars'
 import { type UseDataInput, useData } from './Data'
 import { type Validation, useValidation } from './Validation'
 
@@ -9,7 +9,7 @@ export interface Form<T extends Record<string, any>> {
   init(): void
   reset(): void
   validate(): Promise<boolean>
-  validateAndNotify(): Promise<boolean>
+  validateAndNotify(message?: Snackbar): Promise<boolean>
 }
 
 export type ComputedData<T extends Record<string, () => any>> = {
@@ -69,11 +69,11 @@ export function useForm<
     return validation.value.$validate()
   }
 
-  async function validateAndNotify(): Promise<boolean> {
+  async function validateAndNotify(message?: Snackbar): Promise<boolean> {
     const valid = await validate()
 
     if (!valid) {
-      snackbars.push({
+      snackbars.push(message ?? {
         mode: 'danger',
         text: 'Form contains errors. Please correct them and try again.'
       })

package/lib/composables/Table.ts

@@ -122,6 +122,7 @@ export interface TableCellAvatar extends TableCellBase {
   name?: string | null | ((value: any, record: any) => string | null | undefined)
   link?: string | null | ((value: any, record: any) => string | null | undefined)
   color?: 'neutral' | 'soft' | 'mute'
+  onClick?(value: any, record: any): void
 }
 
 export interface TableCellAvatars extends TableCellBase {

package/lib/composables/Tooltip.ts

@@ -8,8 +8,6 @@ export interface Tooltip {
 
 export type Position = 'top' | 'right' | 'bottom' | 'left'
 
-const SCREEN_PADDING = 16
-
 const globalHide = ref<() => void>()
 
 /**
@@ -61,31 +59,32 @@ export function useTooltip(
     // Temporally show tip to get its size.
     tip.value!.style.display = 'block'
 
+    const screenPadding = document.body.clientWidth >= 512 ? 24 : 8
     const contentRect = content.value!.getBoundingClientRect()
     const tipRect = tip.value!.getBoundingClientRect()
 
     const contentRightX = contentRect.x + contentRect.width
     const tipRightX = tipRect.x + tipRect.width
 
-    if (tipRect.x < 0) {
-      adjustLeftPosition(contentRect.x)
-    } else if (tipRightX > window.outerWidth) {
-      adjustRightPosition(contentRightX)
+    if (tipRect.x < screenPadding) {
+      adjustLeftPosition(screenPadding, contentRect.x)
+    } else if (tipRightX > (document.body.clientWidth - screenPadding)) {
+      adjustRightPosition(screenPadding, contentRightX)
     }
 
     tip.value!.style.display = 'none'
   }
 
-  function adjustLeftPosition(contentRectX: number): void {
+  function adjustLeftPosition(screenPadding: number, contentRectX: number): void {
     tip.value!.style.left = '0'
     tip.value!.style.right = 'auto'
-    setTransform(-contentRectX + SCREEN_PADDING)
+    setTransform(-contentRectX + screenPadding)
   }
 
-  function adjustRightPosition(contentRightX: number): void {
+  function adjustRightPosition(screenPadding: number, contentRightX: number): void {
     tip.value!.style.left = 'auto'
     tip.value!.style.right = '0'
-    setTransform((window.outerWidth - contentRightX) - SCREEN_PADDING)
+    setTransform((document.body.clientWidth - contentRightX) - screenPadding)
   }
 
   function resetPosition(): void {

package/lib/mixins/Card.ts

@@ -0,0 +1,30 @@
+import { type App } from 'vue'
+import SCard from '../components/SCard.vue'
+import SCardBlock from '../components/SCardBlock.vue'
+import SCardFooter from '../components/SCardFooter.vue'
+import SCardFooterAction from '../components/SCardFooterAction.vue'
+import SCardFooterActions from '../components/SCardFooterActions.vue'
+import SCardHeader from '../components/SCardHeader.vue'
+import SCardHeaderAction from '../components/SCardHeaderAction.vue'
+import SCardHeaderActionClose from '../components/SCardHeaderActionClose.vue'
+import SCardHeaderActionCollapse from '../components/SCardHeaderActionCollapse.vue'
+import SCardHeaderActions from '../components/SCardHeaderActions.vue'
+import SCardHeaderTitle from '../components/SCardHeaderTitle.vue'
+
+export function mixin(app: App): void {
+  app.mixin({
+    components: {
+      SCard,
+      SCardBlock,
+      SCardFooter,
+      SCardFooterAction,
+      SCardFooterActions,
+      SCardHeader,
+      SCardHeaderAction,
+      SCardHeaderActionClose,
+      SCardHeaderActionCollapse,
+      SCardHeaderActions,
+      SCardHeaderTitle
+    }
+  })
+}

package/lib/styles/variables.css

@@ -67,90 +67,6 @@
   --c-text-dark-1: rgba(235, 235, 245, 0.98);
   --c-text-dark-2: rgba(235, 235, 245, 0.6);
   --c-text-dark-3: rgba(235, 235, 245, 0.3);
-
-  --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);
-  --c-info-text-dark: var(--c-info);
-  --c-info-text-darker: var(--c-info-dark);
-  --c-info-bg: var(--c-info);
-  --c-info-bg-light: var(--c-info-light);
-  --c-info-bg-lighter: var(--c-info-lighter);
-  --c-info-bg-dark: var(--c-info-dark);
-  --c-info-bg-darker: var(--c-info-darker);
-
-  --c-success: #059669;
-  --c-success-light: #10b981;
-  --c-success-lighter: #34d399;
-  --c-success-lghtest: #6ee7b7;
-  --c-success-dark: #047857;
-  --c-success-darker: #065f46;
-  --c-success-darkest: #064e3b;
-  --c-success-dimm-1: rgba(5, 150, 105, 0.12);
-  --c-success-dimm-2: rgba(5, 150, 105, 0.2);
-  --c-success-dimm-3: rgba(5, 150, 105, 0.28);
-  --c-success-text: var(--c-success-light);
-  --c-success-text-light: var(--c-success-lighter);
-  --c-success-text-lighter: var(--c-success-lightest);
-  --c-success-text-dark: var(--c-success);
-  --c-success-text-darker: var(--c-success-dark);
-  --c-success-bg: var(--c-success);
-  --c-success-bg-light: var(--c-success-light);
-  --c-success-bg-lighter: var(--c-success-lighter);
-  --c-success-bg-dark: var(--c-success-dark);
-  --c-success-bg-darker: var(--c-success-darker);
-
-  --c-warning: #ca8a04;
-  --c-warning-light: #eab308;
-  --c-warning-lighter: #facc15;
-  --c-warning-lghtest: #fde047;
-  --c-warning-dark: #a16207;
-  --c-warning-darker: #854d0e;
-  --c-warning-darkest: #713f12;
-  --c-warning-dimm-1: rgba(202, 138, 4, 0.12);
-  --c-warning-dimm-2: rgba(202, 138, 4, 0.2);
-  --c-warning-dimm-3: rgba(202, 138, 4, 0.28);
-  --c-warning-text: var(--c-warning-light);
-  --c-warning-text-light: var(--c-warning-lighter);
-  --c-warning-text-lighter: var(--c-warning-lightest);
-  --c-warning-text-dark: var(--c-warning);
-  --c-warning-text-darker: var(--c-warning-dark);
-  --c-warning-bg: var(--c-warning);
-  --c-warning-bg-light: var(--c-warning-light);
-  --c-warning-bg-lighter: var(--c-warning-lighter);
-  --c-warning-bg-dark: var(--c-warning-dark);
-  --c-warning-bg-darker: var(--c-warning-darker);
-
-  --c-danger: #e11d48;
-  --c-danger-light: #f43f5e;
-  --c-danger-lighter: #fb7185;
-  --c-danger-lghtest: #fda4af;
-  --c-danger-dark: #be123c;
-  --c-danger-darker: #9f1239;
-  --c-danger-darkest: #881337;
-  --c-danger-dimm-1: rgba(225, 29, 72, 0.12);
-  --c-danger-dimm-2: rgba(225, 29, 72, 0.2);
-  --c-danger-dimm-3: rgba(225, 29, 72, 0.28);
-  --c-danger-text: var(--c-danger-light);
-  --c-danger-text-light: var(--c-danger-lighter);
-  --c-danger-text-lighter: var(--c-danger-lightest);
-  --c-danger-text-dark: var(--c-danger);
-  --c-danger-text-darker: var(--c-danger-dark);
-  --c-danger-bg: var(--c-danger);
-  --c-danger-bg-light: var(--c-danger-light);
-  --c-danger-bg-lighter: var(--c-danger-lighter);
-  --c-danger-bg-dark: var(--c-danger-dark);
-  --c-danger-bg-darker: var(--c-danger-darker);
 }
 
 /**
@@ -183,6 +99,8 @@
   --c-divider-1: var(--c-divider-light-1);
   --c-divider-2: var(--c-divider-light-2);
 
+  --c-gutter: #e8e8e8;
+
   --c-neutral-1: var(--c-neutral-light-1);
   --c-neutral-2: var(--c-neutral-light-2);
   --c-neutral-3: var(--c-neutral-light-3);
@@ -210,6 +128,110 @@
   --c-mute-darker: #d1d1d1;
   --c-mute-dimm-1: #f1f1f1;
   --c-mute-dimm-2: #e3e3e3;
+
+  --c-info: #0969da;
+  --c-info-light: #218bff;
+  --c-info-lighter: #54aeff;
+  --c-info-lghtest: #80ccff;
+  --c-info-dark: #0550ae;
+  --c-info-darker: #033d8b;
+  --c-info-darkest: #0a3069;
+  --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-text: var(--c-info-light);
+  --c-info-text-light: var(--c-info-lighter);
+  --c-info-text-lighter: var(--c-info-lightest);
+  --c-info-text-dark: var(--c-info);
+  --c-info-text-darker: var(--c-info-dark);
+  --c-info-border: var(--c-info-light);
+  --c-info-border-light: var(--c-info-lighter);
+  --c-info-border-lighter: var(--c-info-lightest);
+  --c-info-border-dark: var(--c-info);
+  --c-info-border-darker: var(--c-info-dark);
+  --c-info-bg: var(--c-info);
+  --c-info-bg-light: var(--c-info-light);
+  --c-info-bg-lighter: var(--c-info-lighter);
+  --c-info-bg-dark: var(--c-info-dark);
+  --c-info-bg-darker: var(--c-info-darker);
+
+  --c-success: #1a7f58;
+  --c-success-light: #2da476;
+  --c-success-lighter: #4ac294;
+  --c-success-lghtest: #6fddaf;
+  --c-success-dark: #116345;
+  --c-success-darker: #044f37;
+  --c-success-darkest: #003d2b;
+  --c-success-dimm-1: rgba(5, 150, 105, 0.12);
+  --c-success-dimm-2: rgba(5, 150, 105, 0.2);
+  --c-success-dimm-3: rgba(5, 150, 105, 0.28);
+  --c-success-text: var(--c-success-light);
+  --c-success-text-light: var(--c-success-lighter);
+  --c-success-text-lighter: var(--c-success-lightest);
+  --c-success-text-dark: var(--c-success);
+  --c-success-text-darker: var(--c-success-dark);
+  --c-success-border: var(--c-success-light);
+  --c-success-border-light: var(--c-success-lighter);
+  --c-success-border-lighter: var(--c-success-lightest);
+  --c-success-border-dark: var(--c-success);
+  --c-success-border-darker: var(--c-success-dark);
+  --c-success-bg: var(--c-success);
+  --c-success-bg-light: var(--c-success-light);
+  --c-success-bg-lighter: var(--c-success-lighter);
+  --c-success-bg-dark: var(--c-success-dark);
+  --c-success-bg-darker: var(--c-success-darker);
+
+  --c-warning: #bf8700;
+  --c-warning-light: #d4a72c;
+  --c-warning-lighter: #eac54f;
+  --c-warning-lghtest: #fae17d;
+  --c-warning-dark: #9a6700;
+  --c-warning-darker: #7d4e00;
+  --c-warning-darkest: #633c01;
+  --c-warning-dimm-1: rgba(202, 138, 4, 0.12);
+  --c-warning-dimm-2: rgba(202, 138, 4, 0.2);
+  --c-warning-dimm-3: rgba(202, 138, 4, 0.28);
+  --c-warning-text: var(--c-warning-light);
+  --c-warning-text-light: var(--c-warning-lighter);
+  --c-warning-text-lighter: var(--c-warning-lightest);
+  --c-warning-text-dark: var(--c-warning);
+  --c-warning-text-darker: var(--c-warning-dark);
+  --c-warning-border: var(--c-warning-light);
+  --c-warning-border-light: var(--c-warning-lighter);
+  --c-warning-border-lighter: var(--c-warning-lightest);
+  --c-warning-border-dark: var(--c-warning);
+  --c-warning-border-darker: var(--c-warning-dark);
+  --c-warning-bg: var(--c-warning);
+  --c-warning-bg-light: var(--c-warning-light);
+  --c-warning-bg-lighter: var(--c-warning-lighter);
+  --c-warning-bg-dark: var(--c-warning-dark);
+  --c-warning-bg-darker: var(--c-warning-darker);
+
+  --c-danger: #cf222e;
+  --c-danger-light: #fa4549;
+  --c-danger-lighter: #ff8182;
+  --c-danger-lghtest: #ffaba8;
+  --c-danger-dark: #a40e26;
+  --c-danger-darker: #82071e;
+  --c-danger-darkest: #660018;
+  --c-danger-dimm-1: rgba(225, 29, 72, 0.12);
+  --c-danger-dimm-2: rgba(225, 29, 72, 0.2);
+  --c-danger-dimm-3: rgba(225, 29, 72, 0.28);
+  --c-danger-text: var(--c-danger-light);
+  --c-danger-text-light: var(--c-danger-lighter);
+  --c-danger-text-lighter: var(--c-danger-lightest);
+  --c-danger-text-dark: var(--c-danger);
+  --c-danger-text-darker: var(--c-danger-dark);
+  --c-danger-border: var(--c-danger-light);
+  --c-danger-border-light: var(--c-danger-lighter);
+  --c-danger-border-lighter: var(--c-danger-lightest);
+  --c-danger-border-dark: var(--c-danger);
+  --c-danger-border-darker: var(--c-danger-dark);
+  --c-danger-bg: var(--c-danger);
+  --c-danger-bg-light: var(--c-danger-light);
+  --c-danger-bg-lighter: var(--c-danger-lighter);
+  --c-danger-bg-dark: var(--c-danger-dark);
+  --c-danger-bg-darker: var(--c-danger-darker);
 }
 
 .dark {
@@ -238,6 +260,8 @@
   --c-divider-1: var(--c-divider-dark-1);
   --c-divider-2: var(--c-divider-dark-2);
 
+  --c-gutter: #000000;
+
   --c-neutral-1: var(--c-neutral-dark-1);
   --c-neutral-2: var(--c-neutral-dark-2);
   --c-neutral-3: var(--c-neutral-dark-3);
@@ -265,6 +289,110 @@
   --c-mute-darker: #1c1c1e;
   --c-mute-dimm-1: #222226;
   --c-mute-dimm-2: #2c2c2e;
+
+  --c-info: #1f6feb;
+  --c-info-light: #388bfd;
+  --c-info-lighter: #58a6ff;
+  --c-info-lghtest: #79c0ff;
+  --c-info-dark: #1158c7;
+  --c-info-darker: #0d419d;
+  --c-info-darkest: #0c2d6b;
+  --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-text: var(--c-info-light);
+  --c-info-text-light: var(--c-info-lighter);
+  --c-info-text-lighter: var(--c-info-lightest);
+  --c-info-text-dark: var(--c-info);
+  --c-info-text-darker: var(--c-info-dark);
+  --c-info-border: var(--c-info-light);
+  --c-info-border-light: var(--c-info-lighter);
+  --c-info-border-lighter: var(--c-info-lightest);
+  --c-info-border-dark: var(--c-info);
+  --c-info-border-darker: var(--c-info-dark);
+  --c-info-bg: var(--c-info);
+  --c-info-bg-light: var(--c-info-light);
+  --c-info-bg-lighter: var(--c-info-lighter);
+  --c-info-bg-dark: var(--c-info-dark);
+  --c-info-bg-darker: var(--c-info-darker);
+
+  --c-success: #238554;
+  --c-success-light: #2ea069;
+  --c-success-lighter: #3fb978;
+  --c-success-lghtest: #56d38e;
+  --c-success-dark: #196c49;
+  --c-success-darker: #0f533a;
+  --c-success-darkest: #033a29;
+  --c-success-dimm-1: rgba(5, 150, 105, 0.12);
+  --c-success-dimm-2: rgba(5, 150, 105, 0.2);
+  --c-success-dimm-3: rgba(5, 150, 105, 0.28);
+  --c-success-text: var(--c-success-light);
+  --c-success-text-light: var(--c-success-lighter);
+  --c-success-text-lighter: var(--c-success-lightest);
+  --c-success-text-dark: var(--c-success);
+  --c-success-text-darker: var(--c-success-dark);
+  --c-success-border: var(--c-success-light);
+  --c-success-border-light: var(--c-success-lighter);
+  --c-success-border-lighter: var(--c-success-lightest);
+  --c-success-border-dark: var(--c-success);
+  --c-success-border-darker: var(--c-success-dark);
+  --c-success-bg: var(--c-success);
+  --c-success-bg-light: var(--c-success-light);
+  --c-success-bg-lighter: var(--c-success-lighter);
+  --c-success-bg-dark: var(--c-success-dark);
+  --c-success-bg-darker: var(--c-success-darker);
+
+  --c-warning: #bb8009;
+  --c-warning-light: #d29922;
+  --c-warning-lighter: #e3b341;
+  --c-warning-lghtest: #f2cc60;
+  --c-warning-dark: #9e6a03;
+  --c-warning-darker: #845306;
+  --c-warning-darkest: #693e00;
+  --c-warning-dimm-1: rgba(202, 138, 4, 0.12);
+  --c-warning-dimm-2: rgba(202, 138, 4, 0.2);
+  --c-warning-dimm-3: rgba(202, 138, 4, 0.28);
+  --c-warning-text: var(--c-warning-light);
+  --c-warning-text-light: var(--c-warning-lighter);
+  --c-warning-text-lighter: var(--c-warning-lightest);
+  --c-warning-text-dark: var(--c-warning);
+  --c-warning-text-darker: var(--c-warning-dark);
+  --c-warning-border: var(--c-warning-light);
+  --c-warning-border-light: var(--c-warning-lighter);
+  --c-warning-border-lighter: var(--c-warning-lightest);
+  --c-warning-border-dark: var(--c-warning);
+  --c-warning-border-darker: var(--c-warning-dark);
+  --c-warning-bg: var(--c-warning);
+  --c-warning-bg-light: var(--c-warning-light);
+  --c-warning-bg-lighter: var(--c-warning-lighter);
+  --c-warning-bg-dark: var(--c-warning-dark);
+  --c-warning-bg-darker: var(--c-warning-darker);
+
+  --c-danger: #da3633;
+  --c-danger-light: #f85149;
+  --c-danger-lighter: #ff7b72;
+  --c-danger-lghtest: #ffaba8;
+  --c-danger-dark: #b62324;
+  --c-danger-darker: #8e1519;
+  --c-danger-darkest: #67060c;
+  --c-danger-dimm-1: rgba(225, 29, 72, 0.12);
+  --c-danger-dimm-2: rgba(225, 29, 72, 0.2);
+  --c-danger-dimm-3: rgba(225, 29, 72, 0.28);
+  --c-danger-text: var(--c-danger-light);
+  --c-danger-text-light: var(--c-danger-lighter);
+  --c-danger-text-lighter: var(--c-danger-lightest);
+  --c-danger-text-dark: var(--c-danger);
+  --c-danger-text-darker: var(--c-danger-dark);
+  --c-danger-border: var(--c-danger-light);
+  --c-danger-border-light: var(--c-danger-lighter);
+  --c-danger-border-lighter: var(--c-danger-lightest);
+  --c-danger-border-dark: var(--c-danger);
+  --c-danger-border-darker: var(--c-danger-dark);
+  --c-danger-bg: var(--c-danger);
+  --c-danger-bg-light: var(--c-danger-light);
+  --c-danger-bg-lighter: var(--c-danger-lighter);
+  --c-danger-bg-dark: var(--c-danger-dark);
+  --c-danger-bg-darker: var(--c-danger-darker);
 }
 
 /**
@@ -538,8 +666,8 @@
 
   --button-text-mute-text-color: var(--c-text-2);
   --button-text-mute-content-color: var(--c-text-2);
-  --button-text-mute-hover-bg-color: var(--c-mute-dimm-1);
-  --button-text-mute-active-bg-color: var(--c-mute-dimm-2);
+  --button-text-mute-hover-bg-color: var(--c-mute);
+  --button-text-mute-active-bg-color: var(--c-mute-light);
   --button-text-mute-disabled-text-color: var(--c-text-3);
   --button-text-mute-disabled-content-color: var(--c-text-3);
 

package/lib/support/Num.ts

@@ -1,3 +1,10 @@
 export function format(value: number): string {
   return value.toLocaleString('en-US', { maximumFractionDigits: 20 })
 }
+
+export function abbreviate(value: number, precision = 0): string {
+  return value.toLocaleString('en-US', {
+    notation: 'compact',
+    maximumFractionDigits: precision
+  })
+}

package/package.json

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