@globalbrain/sefirot 4.38.1 → 4.39.0

package/lib/components/SAvatar.vue

@@ -55,7 +55,7 @@ const tooltipPosition = computed(() => {
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: var(--c-bg-elv-1);
+  background-color: var(--c-bg-1);
   border-radius: 50%;
   overflow: hidden;
 }
@@ -115,6 +115,11 @@ const tooltipPosition = computed(() => {
 }
 
 .SAvatar.no-image {
-  border: 1px solid var(--c-border-mute-1);
+  border: 1px solid var(--c-border);
+  background-color: var(--c-bg-3);
+
+  .dark & {
+    border-color: transparent;
+  }
 }
 </style>

package/lib/components/SAvatarStack.vue

@@ -42,11 +42,12 @@ const count = computed(() => {
 .SAvatarStack {
   display: flex;
 
-  :slotted(.SAvatar), :deep(.SAvatar), .more {
+  :slotted(.SAvatar),
+  :deep(.SAvatar),
+  .more {
     flex-shrink: 0;
-    border: 2px solid var(--c-bg-elv-2);
-    border-radius: 50%;
     overflow: hidden;
+    box-shadow: 0 0 0 2px var(--c-bg-1);
   }
 
   &.mini > :deep(*):not(:last-child)   { margin-right: -6px; }
@@ -62,7 +63,7 @@ const count = computed(() => {
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: var(--c-bg-mute-1);
+  background-color: var(--c-bg-3);
   border-radius: 50%;
   line-height: 1;
   color: var(--c-text-2);

package/lib/components/SButton.vue

@@ -152,11 +152,12 @@ function onClick(): void {
   letter-spacing: 0;
   text-align: center;
   border: 1px solid var(--button-border-color);
-  border-radius: 6px;
+  border-radius: 8px;
   color: var(--button-text-color);
   background-color: var(--button-bg-color);
   overflow: hidden;
   white-space: nowrap;
+  box-shadow: var(--button-box-shadow, none);
   transition: color 0.25s, border-color 0.25s, background-color 0.25s;
 
   &:hover {
@@ -356,6 +357,7 @@ function onClick(): void {
     --button-text-color: var(--button-fill-default-text-color);
     --button-bg-color: var(--button-fill-default-bg-color);
     --button-count-bg-color: var(--button-fill-default-count-bg-color);
+    --button-box-shadow: var(--button-fill-default-box-shadow);
     --button-hover-border-color: var(--button-fill-default-hover-border-color);
     --button-hover-text-color: var(--button-fill-default-hover-text-color);
     --button-hover-bg-color: var(--button-fill-default-hover-bg-color);

package/lib/components/SCard.vue

@@ -2,19 +2,26 @@
 import { computed } from 'vue'
 import { provideCardState } from '../composables/Card'
 
+export interface Props {
+  size?: Size
+  mode?: Mode
+  muted?: boolean
+}
+
 export type Size = 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'
 export type Mode = 'neutral' | 'info' | 'success' | 'warning' | 'danger'
 
-const props = defineProps<{
-  size?: Size
-  mode?: Mode
-}>()
+const props = withDefaults(defineProps<Props>(), {
+  size: 'medium',
+  mode: 'neutral'
+})
 
 const { isCollapsed } = provideCardState()
 
 const classes = computed(() => [
   props.size,
-  props.mode ?? 'neutral',
+  props.mode,
+  { muted: props.muted },
   { collapsed: isCollapsed.value }
 ])
 </script>
@@ -25,17 +32,18 @@ const classes = computed(() => [
   </div>
 </template>
 
-<style scoped lang="postcss">
+<style scoped>
 .SCard {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
+  position: relative;
+  display: flex;
+  flex-direction: column;
   gap: 1px;
   border: 1px solid transparent;
-  border-radius: 6px;
-  background-color: var(--c-gutter);
+  border-radius: 12px;
+  background-color: var(--c-divider);
 }
 
-.SCard.neutral { border-color: var(--c-divider); }
+.SCard.neutral { border-color: var(--c-border); }
 .SCard.info    { border-color: var(--c-border-info-1); }
 .SCard.success { border-color: var(--c-border-success-1); }
 .SCard.warning { border-color: var(--c-border-warning-1); }
@@ -46,62 +54,25 @@ const classes = computed(() => [
   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: 736px) {
-      margin: 48px auto 128px;
-      max-width: 640px;
-    }
-  }
-
-  &.large {
-    @media (min-width: 864px) {
-      margin: 48px auto 128px;
-      max-width: 768px;
-    }
-  }
+.SCard :deep(> .SCardBlock:first-child),
+.SCard :deep(> .SCardClose + .SCardBlock) {
+  border-top-left-radius: 11px;
+  border-top-right-radius: 11px;
+}
 
-  &.xlarge {
-    @media (min-width: 1056px) {
-      margin: 48px auto 128px;
-      max-width: 960px;
-    }
-  }
+.SCard :deep(> .SCardBlock:last-child) {
+  border-bottom-right-radius: 11px;
+  border-bottom-left-radius: 11px;
+}
 
-  &.xxlarge {
-    @media (min-width: 1248px) {
-      margin: 48px auto 128px;
-      max-width: 1152px;
-    }
-  }
+.SCard.muted :deep(> .SCardBlock) {
+  background-color: var(--c-bg-2);
 }
 
-.SModal.fade-enter-from > .SCard,
-.SModal.fade-leave-to > .SCard {
-  opacity: 0;
-  transform: translateY(8px);
+.SCard :deep(> .SCardClose) {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 10;
 }
 </style>

package/lib/components/SCardBlock.vue

@@ -5,6 +5,9 @@ import { type CardBlockSize, provideCardBlockSize } from '../composables/Card'
 export type { CardBlockSize as Size }
 
 export type Bg =
+  | '1'
+  | '2'
+  | '3'
   | 'elv-1'
   | 'elv-2'
   | 'elv-3'
@@ -15,7 +18,7 @@ const props = withDefaults(defineProps<{
   size?: CardBlockSize
   bg?: Bg
 }>(), {
-  bg: 'elv-3'
+  bg: '1'
 })
 
 const _bg = computed(() => {
@@ -31,23 +34,13 @@ provideCardBlockSize(computed(() => props.size ?? null))
   </div>
 </template>
 
-<style scoped lang="postcss">
+<style scoped>
 .SCardBlock {
   &.compact { padding: 12px; }
   &.wide    { padding: 16px; }
   &.xwide   { padding: 24px; }
 }
 
-.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;
-}
-
 .SCardBlock.xsmall,
 .SCardBlock.small,
 .SCardBlock.medium,

package/lib/components/SCardClose.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import IconX from '~icons/ph/x'
+import SButton from './SButton.vue'
+
+defineEmits<{
+  click: []
+}>()
+</script>
+
+<template>
+  <div class="SCardClose">
+    <SButton
+      size="sm"
+      type="text"
+      mode="mute"
+      :icon="IconX"
+      @click="$emit('click')"
+    />
+  </div>
+</template>

package/lib/components/SCardFooter.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="SCardFooter">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.SCardFooter {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  border-radius: 0 0 11px 11px;
+  background-color: var(--c-bg-2);
+}
+</style>

package/lib/components/SContent.vue

@@ -4,7 +4,7 @@
   </div>
 </template>
 
-<style scoped lang="postcss">
+<style scoped>
 .SContent {
   display: flex;
   flex-direction: column;
@@ -18,7 +18,7 @@
   max-width: 720px;
   line-height: 36px;
   font-size: 24px;
-  font-weight: 500;
+  font-weight: 600;
   color: var(--c-text-1);
 }
 
@@ -27,9 +27,9 @@
   margin: 16px 0 0;
   padding: 0;
   max-width: 720px;
-  line-height: 32px;
+  line-height: 28px;
   font-size: 20px;
-  font-weight: 500;
+  font-weight: 600;
   color: var(--c-text-1);
 }
 
@@ -38,9 +38,20 @@
   margin: 16px 0 0;
   padding: 0;
   max-width: 720px;
-  line-height: 28px;
+  line-height: 30px;
   font-size: 18px;
-  font-weight: 500;
+  font-weight: 600;
+  color: var(--c-text-1);
+}
+
+.SContent :deep(h4),
+.SContent :deep(.h4) {
+  margin: 16px 0 0;
+  padding: 0;
+  max-width: 720px;
+  line-height: 28px;
+  font-size: 16px;
+  font-weight: 600;
   color: var(--c-text-1);
 }
 
@@ -49,7 +60,9 @@
 .SContent :deep(h2:first-child),
 .SContent :deep(.h2:first-child),
 .SContent :deep(h3:first-child),
-.SContent :deep(.h3:first-child) {
+.SContent :deep(.h3:first-child),
+.SContent :deep(h4:first-child),
+.SContent :deep(.h4:first-child) {
   margin-top: 0;
 }
 
@@ -124,16 +137,16 @@
 .SContent :deep(table) {
   margin: 8px 0;
   border-style: hidden;
-  border-radius: 6px;
+  border-radius: 8px;
   text-align: left;
   font-size: 14px;
   color: var(--c-text-1);
   overflow: clip;
-  box-shadow: 0 0 0 1px var(--c-divider);
+  box-shadow: 0 0 0 1px var(--c-border);
 }
 
 .SContent :deep(table tr:hover td) {
-  background-color: var(--c-bg-elv-4);
+  background-color: var(--c-bg-2);
 }
 
 .SContent :deep(table thead > tr > th) {
@@ -142,18 +155,17 @@
 
 .SContent :deep(table th),
 .SContent :deep(table td) {
-  border: 1px solid var(--c-gutter);
+  border: 1px solid var(--c-divider);
   padding: 8px 16px;
   height: 40px;
   vertical-align: top;
   text-wrap: pretty;
-  background-color: var(--c-bg-elv-3);
   overflow-wrap: break-word;
 }
 
 .SContent :deep(table th) {
   font-size: 12px;
-  font-weight: 600;
+  font-weight: 500;
   color: var(--c-text-2);
   text-wrap: balance;
 }

package/lib/components/SInputCheckbox.vue

@@ -132,6 +132,7 @@ function onClick() {
   width: 16px;
   height: 16px;
   background-color: var(--input-bg-color);
+  box-shadow: var(--input-box-shadow);
   transition: border-color 0.25s, background-color 0.25s;
 }
 

package/lib/components/SInputDate.vue

@@ -113,7 +113,7 @@ function onBlur() {
 .SInputDate.md {
   .input {
     padding: 6px 10px;
-    max-width: 120px;
+    max-width: 128px;
     height: 36px;
     line-height: 24px;
     font-size: var(--input-font-size, var(--input-small-font-size));
@@ -165,11 +165,12 @@ function onBlur() {
 .input {
   display: block;
   border: 1px solid var(--input-border-color);
-  border-radius: 6px;
+  border-radius: 8px;
   width: 100%;
   font-weight: 400;
   font-feature-settings: 'tnum';
   background-color: var(--input-bg-color);
+  box-shadow: var(--input-box-shadow);
   transition: border-color 0.25s, background-color 0.25s;
 
   &::placeholder {

package/lib/components/SInputDropdown.vue

@@ -192,10 +192,11 @@ function onSelect(value: OptionValue) {
   display: flex;
   align-items: center;
   border: 1px solid var(--input-border-color);
-  border-radius: 6px;
+  border-radius: 8px;
   width: 100%;
   color: var(--input-text);
   background-color: var(--input-bg-color);
+  box-shadow: var(--input-box-shadow);
   cursor: pointer;
   transition: border-color 0.25s, background-color 0.25s;
 

package/lib/components/SInputFile.vue

@@ -203,6 +203,7 @@ function onChange(e: Event) {
   border: 1px solid var(--input-border-color);
   border-radius: 6px;
   background-color: var(--input-bg-color);
+  box-shadow: var(--input-box-shadow);
   cursor: pointer;
   transition: border-color 0.25s;
 
@@ -211,8 +212,7 @@ function onChange(e: Event) {
   }
 
   &:hover .button {
-    border-color: var(--c-border-mute-2);
-    background-color: var(--c-bg-mute-2);
+    background-color: var(--button-fill-default-hover-bg-color);
   }
 }
 
@@ -221,10 +221,11 @@ function onChange(e: Event) {
 }
 
 .button {
-  border: 1px solid var(--c-border-mute-1);
+  border: 1px solid var(--button-fill-default-border-color);
   border-radius: 3px;
   color: var(--c-text-1);
-  background-color: var(--c-bg-mute-1);
+  background-color: var(--button-fill-default-bg-color);
+  box-shadow: var(--button-fill-default-box-shadow);
   transition: border-color 0.25s, background-color 0.25s;
 }
 

package/lib/components/SInputFileUpload.vue

@@ -265,7 +265,7 @@ function toFileObjects(files: File[]) {
   align-items: center;
   gap: 16px;
   border: 1px dashed var(--c-border-mute-1);
-  border-radius: 3px;
+  border-radius: 8px;
   padding: 24px 0;
   min-height: 192px;
   text-align: center;

package/lib/components/SInputHMS.vue

@@ -308,8 +308,9 @@ function createRequiredTouched(): boolean[] {
 .container {
   display: inline-flex;
   border: 1px solid var(--input-border-color);
-  border-radius: 6px;
+  border-radius: 8px;
   background-color: var(--input-bg-color);
+  box-shadow: var(--input-box-shadow);
   transition: border-color 0.25s;
 
   &:hover { border-color: var(--input-hover-border-color); }

package/lib/components/SInputRadio.vue

@@ -112,6 +112,7 @@ function onClick() {
   width: 16px;
   height: 16px;
   background-color: var(--input-bg-color);
+  box-shadow: var(--input-box-shadow);
   transition: border-color 0.25s;
 }
 

package/lib/components/SInputSelect.vue

@@ -186,10 +186,11 @@ function emitChange(e: any): void {
 .box {
   position: relative;
   border: 1px solid var(--input-border-color);
-  border-radius: 6px;
+  border-radius: 8px;
   width: 100%;
   color: var(--input-value-color);
   background-color: var(--input-bg-color);
+  box-shadow: var(--input-box-shadow);
   cursor: pointer;
   transition: border-color 0.25s, background-color 0.25s;
 

package/lib/components/SInputText.vue

@@ -404,9 +404,10 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
   flex-grow: 1;
   max-width: 100%;
   border: 1px solid var(--input-border-color);
-  border-radius: 6px;
+  border-radius: 8px;
   background-color: var(--input-bg-color);
-  transition: border-color 0.25s;
+  box-shadow: var(--input-box-shadow);
+  transition: border-color 0.25s, background-color 0.25s;
 
   &:hover {
     border-color: var(--input-hover-border-color);

package/lib/components/SInputTextarea.vue

@@ -151,9 +151,10 @@ const isPreview = ref(false)
   gap: 1px;
   flex-grow: 1;
   border: 1px solid var(--input-border-color);
-  border-radius: 6px;
+  border-radius: 8px;
   width: 100%;
   background-color: var(--c-gutter);
+  box-shadow: var(--input-box-shadow);
   overflow: hidden;
   transition: border-color 0.25s;
 

package/lib/components/SInputYMD.vue

@@ -307,8 +307,9 @@ function createRequiredTouched(): boolean[] {
 .container {
   display: inline-flex;
   border: 1px solid var(--input-border-color);
-  border-radius: 6px;
+  border-radius: 8px;
   background-color: var(--input-bg-color);
+  box-shadow: var(--input-box-shadow);
   transition: border-color 0.25s, background-color 0.25s;
 
   &:hover { border-color: var(--input-hover-border-color); }

package/lib/components/SModal.vue

@@ -37,7 +37,7 @@ function onClick(e: MouseEvent) {
   </Teleport>
 </template>
 
-<style scoped lang="postcss">
+<style scoped>
 .SModal {
   position: fixed;
   top: 0;
@@ -55,4 +55,63 @@ function onClick(e: MouseEvent) {
 .SModal.fade-leave-to {
   opacity: 0;
 }
+
+.SModal :deep(> .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: 736px) {
+      margin: 48px auto 128px;
+      max-width: 640px;
+    }
+  }
+
+  &.large {
+    @media (min-width: 864px) {
+      margin: 48px auto 128px;
+      max-width: 768px;
+    }
+  }
+
+  &.xlarge {
+    @media (min-width: 1056px) {
+      margin: 48px auto 128px;
+      max-width: 960px;
+    }
+  }
+
+  &.xxlarge {
+    @media (min-width: 1248px) {
+      margin: 48px auto 128px;
+      max-width: 1152px;
+    }
+  }
+}
+
+.SModal.fade-enter-from :deep(> .SCard),
+.SModal.fade-leave-to :deep(> .SCard) {
+  opacity: 0;
+  transform: translateY(8px);
+}
 </style>

package/lib/components/SPagination.vue

@@ -55,8 +55,6 @@ const hasNext = computed(() => {
   <div class="SPagination" :class="[size, align]">
     <div class="button prev">
       <SButton
-        type="outline"
-        mode="mute"
         :size
         :lead-icon="IconCaretLeft"
         :label="t.prev"
@@ -69,8 +67,6 @@ const hasNext = computed(() => {
     </div>
     <div class="button next">
       <SButton
-        type="outline"
-        mode="mute"
         :size
         :trail-icon="IconCaretRight"
         :label="t.next"

package/lib/components/STable.vue

@@ -711,7 +711,7 @@ function onResizeEnd(data: { columnName: string; finalWidth: string }) {
   top: var(--table-head-top, auto);
   z-index: 100;
   border-radius: calc(var(--table-border-radius) - 1px) calc(var(--table-border-radius) - 1px) 0 0;
-  background-color: var(--bg-elv-2);
+  background-color: var(--c-bg-1);
   scrollbar-width: none;
   line-height: 0;
 
@@ -764,7 +764,7 @@ function onResizeEnd(data: { columnName: string; finalWidth: string }) {
 
 :deep(.row) {
   display: flex;
-  border-bottom: 1px solid var(--c-gutter);
+  border-bottom: 1px solid var(--c-divider);
 }
 
 :deep(.row.last),
@@ -783,7 +783,7 @@ function onResizeEnd(data: { columnName: string; finalWidth: string }) {
   border-radius: 0 0 calc(var(--table-border-radius) - 1px) calc(var(--table-border-radius) - 1px);
   padding: 48px 32px;
   text-align: center;
-  background-color: var(--c-bg-elv-3);
+  background-color: var(--c-bg-1);
   line-height: 24px;
   font-size: 14px;
   font-weight: 500;
@@ -796,7 +796,7 @@ function onResizeEnd(data: { columnName: string; finalWidth: string }) {
 
 .loading {
   border-radius: 0 0 calc(var(--table-border-radius) - 1px) calc(var(--table-border-radius) - 1px);
-  background-color: var(--c-bg-elv-3);
+  background-color: var(--c-bg-1);
   overflow: hidden;
 
   .has-footer & {
@@ -863,7 +863,7 @@ function onResizeEnd(data: { columnName: string; finalWidth: string }) {
 
   :deep(.input) {
     align-items: center;
-    padding: 0 16px;
+    padding: 0 16px 0 15px;
     min-height: 40px;
     user-select: none;
   }

package/lib/components/STableCell.vue

@@ -132,20 +132,20 @@ const valueIsImagePath = computed(() => {
 
 <style scoped lang="postcss">
 .STableCell {
-  background-color: var(--c-bg-elv-3);
+  background-color: var(--c-bg-1);
   transition: background-color 0.1s;
   overflow: hidden;
 
   :where(.row:has(.input.on)) & {
-    background-color: var(--c-bg-elv-4);
+    background-color: var(--c-bg-2);
   }
 
   .row:hover & {
-    background-color: var(--c-bg-elv-4);
+    background-color: var(--c-bg-2);
   }
 
   .summary & {
-    background-color: var(--c-bg-elv-4);
+    background-color: var(--c-bg-2);
   }
 
   .STableItem:first-child & {

package/lib/components/STableColumn.vue

@@ -168,10 +168,10 @@ function stopDialogPositionListener() {
 
 <style scoped lang="postcss">
 .STableColumn {
-  background-color: var(--c-bg-elv-3);
+  background-color: var(--c-bg-1);
 
   &.has-header {
-    border-top: 1px solid var(--c-gutter);
+    border-top: 1px solid var(--c-divider);
   }
 
   .STableItem:first-child & {
@@ -197,7 +197,7 @@ function stopDialogPositionListener() {
   line-height: 40px;
   text-align: left;
   font-size: 12px;
-  font-weight: 600;
+  font-weight: 500;
   color: var(--c-text-2);
   white-space: nowrap;
   overflow: hidden;
@@ -228,7 +228,7 @@ function stopDialogPositionListener() {
 
   &:hover {
     color: var(--c-text-1);
-    background-color: var(--c-bg-mute-1);
+    background-color: var(--button-fill-default-hover-bg-color);
   }
 
   &.active {

package/lib/components/STableFooter.vue

@@ -63,11 +63,11 @@ const hasNext = computed(() => {
 
 <style scoped lang="postcss">
 .STableFooter {
-  border-top: 1px solid var(--c-gutter);
+  border-top: 1px solid var(--c-divider);
   border-radius: 0 0 calc(var(--table-border-radius) - 1px) calc(var(--table-border-radius) - 1px);
   padding-right: var(--table-padding-right);
   padding-left: var(--table-padding-left);
-  background-color: var(--c-bg-elv-3);
+  background-color: var(--c-bg-1);
 
   &.borderless {
     border-radius: 0;
@@ -117,7 +117,7 @@ const hasNext = computed(() => {
   }
 
   &.active:hover {
-    background-color: var(--c-bg-elv-1);
+    background-color: var(--c-bg-1);
   }
 }
 

package/lib/components/STableHeader.vue

@@ -42,7 +42,7 @@ const stats = computed(() => {
   border-radius: calc(var(--table-border-radius) - 1px) calc(var(--table-border-radius) - 1px) 0 0;
   padding-right: var(--table-padding-right);
   padding-left: var(--table-padding-left);
-  background-color: var(--c-bg-elv-4);
+  background-color: var(--c-bg-1);
 
   &.borderless {
     border-radius: 0;

package/lib/components/STableItem.vue

@@ -30,8 +30,8 @@ const classes = computed(() => [
   z-index: var(--table-col-z-index, auto);
   flex-shrink: 0;
   flex-grow: 1;
-  border-left: var(--table-col-border-left, 0px) solid var(--c-gutter);
-  border-right: 1px solid var(--c-gutter);
+  border-left: var(--table-col-border-left, 0px) solid var(--c-divider);
+  border-right: 1px solid var(--c-divider);
   margin-left: calc(var(--table-col-border-left, 0px) * -1);
   min-width: var(--table-col-width);
   max-width: var(--table-col-width);

package/lib/styles/utilities.css

@@ -85,6 +85,7 @@
 .s-py-8  { padding-top: 8px; padding-bottom: 8px; }
 .s-py-12 { padding-top: 12px; padding-bottom: 12px; }
 .s-py-16 { padding-top: 16px; padding-bottom: 16px; }
+.s-py-20 { padding-top: 20px; padding-bottom: 20px; }
 .s-py-24 { padding-top: 24px; padding-bottom: 24px; }
 .s-py-32 { padding-top: 32px; padding-bottom: 32px; }
 .s-py-48 { padding-top: 48px; padding-bottom: 48px; }
@@ -94,6 +95,7 @@
 .s-px-8  { padding-right: 8px; padding-left: 8px; }
 .s-px-12 { padding-right: 12px; padding-left: 12px; }
 .s-px-16 { padding-right: 16px; padding-left: 16px; }
+.s-px-20 { padding-right: 20px; padding-left: 20px; }
 .s-px-24 { padding-right: 24px; padding-left: 24px; }
 .s-px-32 { padding-right: 32px; padding-left: 32px; }
 .s-px-48 { padding-right: 48px; padding-left: 48px; }
@@ -103,6 +105,7 @@
 .s-pt-8  { padding-top: 8px; }
 .s-pt-12 { padding-top: 12px; }
 .s-pt-16 { padding-top: 16px; }
+.s-pt-20 { padding-top: 20px; }
 .s-pt-24 { padding-top: 24px; }
 .s-pt-32 { padding-top: 32px; }
 .s-pt-48 { padding-top: 48px; }
@@ -112,6 +115,7 @@
 .s-pr-8  { padding-right: 8px; }
 .s-pr-12 { padding-right: 12px; }
 .s-pr-16 { padding-right: 16px; }
+.s-pr-20 { padding-right: 20px; }
 .s-pr-24 { padding-right: 24px; }
 .s-pr-32 { padding-right: 32px; }
 .s-pr-48 { padding-right: 48px; }
@@ -121,6 +125,7 @@
 .s-pb-8  { padding-bottom: 8px; }
 .s-pb-12 { padding-bottom: 12px; }
 .s-pb-16 { padding-bottom: 16px; }
+.s-pb-20 { padding-bottom: 20px; }
 .s-pb-24 { padding-bottom: 24px; }
 .s-pb-32 { padding-bottom: 32px; }
 .s-pb-48 { padding-bottom: 48px; }
@@ -130,6 +135,7 @@
 .s-pl-8  { padding-left: 8px; }
 .s-pl-12 { padding-left: 12px; }
 .s-pl-16 { padding-left: 16px; }
+.s-pl-20 { padding-left: 20px; }
 .s-pl-24 { padding-left: 24px; }
 .s-pl-32 { padding-left: 32px; }
 .s-pl-48 { padding-left: 48px; }
@@ -210,6 +216,10 @@
  * Backgrounds
  * -------------------------------------------------------------------------- */
 
+.s-bg-1 { background-color: var(--c-bg-1); }
+.s-bg-2 { background-color: var(--c-bg-2); }
+.s-bg-3 { background-color: var(--c-bg-3); }
+
 .s-bg-elv-1 { background-color: var(--c-bg-elv-1); }
 .s-bg-elv-2 { background-color: var(--c-bg-elv-2); }
 .s-bg-elv-3 { background-color: var(--c-bg-elv-3); }

package/lib/styles/variables.css

@@ -51,14 +51,14 @@
  * -------------------------------------------------------------------------- */
 
 :root {
-  --c-gray-1: #fcfcfd;
-  --c-gray-2: #f9f9fb;
-  --c-gray-3: #f2f2f5;
-  --c-gray-4: #ebebef;
-  --c-gray-5: #e4e4e9;
-  --c-gray-6: #dddde3;
-  --c-gray-7: #d3d4db;
-  --c-gray-8: #b9bbc6;
+  --c-gray-1: #f9f9fb;
+  --c-gray-2: #f2f2f5;
+  --c-gray-3: #ebebef;
+  --c-gray-4: #e4e4e9;
+  --c-gray-5: #dddde3;
+  --c-gray-6: #d3d4db;
+  --c-gray-7: #b9bbc6;
+  --c-gray-8: #989ba6;
   --c-gray-9: #8b8d98;
   --c-gray-10: #7e808a;
   --c-gray-11: #60646c;
@@ -151,17 +151,19 @@
 }
 
 /**
- * Color: Divider and Gutter
+ * Color: Base Border, Divider, and Gutter
  * -------------------------------------------------------------------------- */
 
 :root {
-  --c-divider: #e0e0e1;
-  --c-gutter: #e2e2e3;
+  --c-border: #dddddd;
+  --c-divider: #dddddd;
+  --c-gutter: #dddddd;
 }
 
 .dark {
-  --c-divider: #2e3035;
-  --c-gutter: #000000;
+  --c-border: #262626;
+  --c-divider: #262626;
+  --c-gutter: #262626;
 }
 
 /**
@@ -230,8 +232,8 @@
 
 :root {
   --c-bg-1: var(--c-white);
-  --c-bg-2: var(--c-gray-3);
-  --c-bg-3: var(--c-gray-4);
+  --c-bg-2: oklch(0.98 0 0);
+  --c-bg-3: oklch(0.97 0 0);
 
   --c-bg-elv-1: #ffffff;
   --c-bg-elv-2: #f5f5f7;
@@ -268,9 +270,9 @@
 }
 
 .dark {
-  --c-bg-1: var(--c-gray-1);
-  --c-bg-2: var(--c-gray-3);
-  --c-bg-3: var(--c-gray-4);
+  --c-bg-1: oklch(0.145 0 0);
+  --c-bg-2: oklch(0.205 0 0);
+  --c-bg-3: oklch(0.269 0 0);
 
   --c-bg-elv-1: #000000;
   --c-bg-elv-2: #151517;
@@ -419,45 +421,45 @@
 
 :root {
   --button-mini-font-size: 12px;
-  --button-small-font-size: 12px;
+  --button-small-font-size: 14px;
   --button-medium-font-size: 14px;
   --button-large-font-size: 14px;
   --button-jumbo-font-size: 16px;
 
-  --button-fill-default-border-color: var(--c-border-mute-1);
+  --button-fill-default-border-color: var(--input-border-color);
   --button-fill-default-text-color: var(--c-text-1);
   --button-fill-default-content-color: var(--c-text-1);
-  --button-fill-default-bg-color: var(--c-bg-mute-1);
+  --button-fill-default-bg-color: var(--c-bg-1);
   --button-fill-default-count-bg-color: var(--c-gray-7);
   --button-fill-default-loader-color: var(--c-neutral-1);
-  --button-fill-default-hover-border-color: var(--c-border-mute-2);
+  --button-fill-default-box-shadow: var(--shadow-depth-1);
+  --button-fill-default-hover-border-color: var(--button-fill-default-border-color);
   --button-fill-default-hover-text-color: var(--c-text-1);
-  --button-fill-default-hover-bg-color: var(--c-bg-mute-2);
-  --button-fill-default-active-border-color: var(--c-border-mute-3);
+  --button-fill-default-hover-bg-color: color-mix(in oklab, var(--button-fill-default-border-color) 40%, transparent);
+  --button-fill-default-active-border-color: var(--button-fill-default-border-color);
   --button-fill-default-active-text-color: var(--c-text-1);
-  --button-fill-default-active-bg-color: var(--c-bg-mute-3);
-  --button-fill-default-disabled-border-color: var(--c-border-mute-1);
+  --button-fill-default-active-bg-color: color-mix(in oklab, var(--button-fill-default-border-color) 60%, transparent);
+  --button-fill-default-disabled-border-color: var(--input-border-color);
   --button-fill-default-disabled-text-color: var(--c-text-3);
   --button-fill-default-disabled-content-color: var(--c-text-3);
-  --button-fill-default-disabled-bg-color: var(--c-bg-mute-1);
+  --button-fill-default-disabled-bg-color: var(--button-fill-default-bg-color);
 
-  --button-fill-mute-border-color: var(--c-border-mute-1);
+  --button-fill-mute-border-color: var(--input-border-color);
   --button-fill-mute-text-color: var(--c-text-2);
   --button-fill-mute-content-color: var(--c-text-2);
-  --button-fill-mute-bg-color: var(--c-bg-mute-1);
+  --button-fill-mute-bg-color: var(--button-fill-default-bg-color);
   --button-fill-mute-count-bg-color: var(--c-gray-6);
-  --button-fill-default-count-bg-color: var(--c-gray-7);
-  --button-fill-mute-loader-color: var(--c-neutral);
-  --button-fill-mute-hover-border-color: var(--c-border-mute-2);
+  --button-fill-mute-loader-color: var(--c-text-2);
+  --button-fill-mute-hover-border-color: var(--input-border-color);
   --button-fill-mute-hover-text-color: var(--c-text-2);
-  --button-fill-mute-hover-bg-color: var(--c-bg-mute-2);
-  --button-fill-mute-active-border-color: var(--c-border-mute-3);
+  --button-fill-mute-hover-bg-color: var(--button-fill-default-hover-bg-color);
+  --button-fill-mute-active-border-color: var(--input-border-color);
   --button-fill-mute-active-text-color: var(--c-text-2);
-  --button-fill-mute-active-bg-color: var(--c-bg-mute-3);
-  --button-fill-mute-disabled-border-color: var(--c-border-mute-1);
+  --button-fill-mute-active-bg-color: var(--button-fill-default-active-bg-color);
+  --button-fill-mute-disabled-border-color: var(--button-fill-default-disabled-border-color);
   --button-fill-mute-disabled-text-color: var(--c-text-3);
   --button-fill-mute-disabled-content-color: var(--c-text-3);
-  --button-fill-mute-disabled-bg-color: var(--c-bg-mute-1);
+  --button-fill-mute-disabled-bg-color: var(--button-fill-default-disabled-bg-color);
 
   --button-fill-neutral-border-color: transparent;
   --button-fill-neutral-text-color: var(--c-text-inverse-1);
@@ -544,59 +546,59 @@
   --button-fill-success-disabled-content-color: var(--c-white-a2);
   --button-fill-success-disabled-bg-color: var(--c-green-8);
 
-  --button-fill-warning-border-color: var(--c-border-mute-1);
-  --button-fill-warning-text-color: var(--c-text-warning-1);
-  --button-fill-warning-content-color: var(--c-text-warning-1);
-  --button-fill-warning-bg-color: var(--c-bg-mute-1);
-  --button-fill-warning-loader-color: var(--c-neutral);
-  --button-fill-warning-count-bg-color: var(--c-bg-mute-3);
-  --button-fill-warning-hover-border-color: var(--c-border-warning-1);
-  --button-fill-warning-hover-text-color: var(--c-white);
-  --button-fill-warning-hover-bg-color: var(--c-bg-warning-1);
-  --button-fill-warning-active-border-color: var(--c-border-warning-2);
-  --button-fill-warning-active-text-color: var(--c-white);
-  --button-fill-warning-active-bg-color: var(--c-bg-warning-2);
-  --button-fill-warning-disabled-border-color: var(--c-border-mute-1);
-  --button-fill-warning-disabled-text-color: var(--c-text-warning-2);
-  --button-fill-warning-disabled-content-color: var(--c-text-warning-2);
-  --button-fill-warning-disabled-bg-color: var(--c-bg-mute-1);
-
-  --button-fill-danger-border-color: var(--c-border-mute-1);
-  --button-fill-danger-text-color: var(--c-text-danger-1);
-  --button-fill-danger-content-color: var(--c-text-danger-1);
-  --button-fill-danger-bg-color: var(--c-bg-mute-1);
-  --button-fill-danger-loader-color: var(--c-neutral);
-  --button-fill-danger-count-bg-color: var(--c-bg-mute-3);
-  --button-fill-danger-hover-border-color: var(--c-border-danger-1);
-  --button-fill-danger-hover-text-color: var(--c-white);
-  --button-fill-danger-hover-bg-color: var(--c-bg-danger-1);
-  --button-fill-danger-active-border-color: var(--c-border-danger-2);
-  --button-fill-danger-active-text-color: var(--c-white);
-  --button-fill-danger-active-bg-color: var(--c-bg-danger-2);
-  --button-fill-danger-disabled-border-color: var(--c-border-mute-1);
-  --button-fill-danger-disabled-text-color: var(--c-text-danger-2);
-  --button-fill-danger-disabled-content-color: var(--c-text-danger-2);
-  --button-fill-danger-disabled-bg-color: var(--c-bg-mute-1);
-
-  --button-outline-default-border-color: var(--c-border-mute-1);
+  --button-fill-warning-border-color: var(--c-border-warning-1);
+  --button-fill-warning-text-color: var(--c-white-1);
+  --button-fill-warning-content-color: var(--c-white-1);
+  --button-fill-warning-bg-color: var(--c-bg-warning-1);
+  --button-fill-warning-loader-color: var(--c-white-1);
+  --button-fill-warning-count-bg-color: var(--c-yellow-8);
+  --button-fill-warning-hover-border-color: var(--c-border-warning-2);
+  --button-fill-warning-hover-text-color: var(--c-white-1);
+  --button-fill-warning-hover-bg-color: var(--c-bg-warning-2);
+  --button-fill-warning-active-border-color: var(--c-border-warning-3);
+  --button-fill-warning-active-text-color: var(--c-white-1);
+  --button-fill-warning-active-bg-color: var(--c-bg-warning-3);
+  --button-fill-warning-disabled-border-color: var(--c-yellow-9);
+  --button-fill-warning-disabled-text-color: var(--c-white-a2);
+  --button-fill-warning-disabled-content-color: var(--c-white-a2);
+  --button-fill-warning-disabled-bg-color: var(--c-yellow-8);
+
+  --button-fill-danger-border-color: var(--c-border-danger-1);
+  --button-fill-danger-text-color: var(--c-white-1);
+  --button-fill-danger-content-color: var(--c-white-1);
+  --button-fill-danger-bg-color: var(--c-bg-danger-1);
+  --button-fill-danger-loader-color: var(--c-white-1);
+  --button-fill-danger-count-bg-color: var(--c-red-8);
+  --button-fill-danger-hover-border-color: var(--c-border-danger-2);
+  --button-fill-danger-hover-text-color: var(--c-white-1);
+  --button-fill-danger-hover-bg-color: var(--c-bg-danger-2);
+  --button-fill-danger-active-border-color: var(--c-border-danger-3);
+  --button-fill-danger-active-text-color: var(--c-white-1);
+  --button-fill-danger-active-bg-color: var(--c-bg-danger-3);
+  --button-fill-danger-disabled-border-color: var(--c-red-9);
+  --button-fill-danger-disabled-text-color: var(--c-white-a2);
+  --button-fill-danger-disabled-content-color: var(--c-white-a2);
+  --button-fill-danger-disabled-bg-color: var(--c-red-8);
+
+  --button-outline-default-border-color: var(--input-border-color);
   --button-outline-default-text-color: var(--c-text-1);
   --button-outline-default-content-color: var(--c-text-1);
   --button-outline-default-loader-color: var(--c-neutral-1);
   --button-outline-default-count-bg-color: var(--c-bg-mute-1);
-  --button-outline-default-hover-bg-color: var(--c-neutral-dimm-a1);
-  --button-outline-default-active-bg-color: var(--c-neutral-dimm-a2);
-  --button-outline-default-disabled-border-color: var(--c-border-mute-1);
+  --button-outline-default-hover-bg-color: var(--button-fill-default-hover-bg-color);
+  --button-outline-default-active-bg-color: var(--button-fill-default-active-bg-color);
+  --button-outline-default-disabled-border-color: var(--input-border-color);
   --button-outline-default-disabled-text-color: var(--c-text-3);
   --button-outline-default-disabled-content-color: var(--c-text-3);
 
-  --button-outline-mute-border-color: var(--c-border-mute-1);
+  --button-outline-mute-border-color: var(--input-border-color);
   --button-outline-mute-text-color: var(--c-text-2);
   --button-outline-mute-content-color: var(--c-text-2);
   --button-outline-mute-loader-color: var(--c-neutral-1);
   --button-outline-mute-count-bg-color: var(--c-bg-mute-1);
-  --button-outline-mute-hover-bg-color: var(--c-neutral-dimm-a1);
-  --button-outline-mute-active-bg-color: var(--c-neutral-dimm-a2);
-  --button-outline-mute-disabled-border-color: var(--c-border-mute-1);
+  --button-outline-mute-hover-bg-color: var(--button-fill-default-hover-bg-color);
+  --button-outline-mute-active-bg-color: var(--button-fill-default-active-bg-color);
+  --button-outline-mute-disabled-border-color: var(--input-border-color);
   --button-outline-mute-disabled-text-color: var(--c-text-3);
   --button-outline-mute-disabled-content-color: var(--c-text-3);
 
@@ -605,9 +607,9 @@
   --button-outline-neutral-content-color: var(--c-text-1);
   --button-outline-neutral-loader-color: var(--c-neutral-1);
   --button-outline-neutral-count-bg-color: var(--c-bg-mute-1);
-  --button-outline-neutral-hover-bg-color: var(--c-neutral-dimm-a1);
-  --button-outline-neutral-active-bg-color: var(--c-neutral-dimm-a2);
-  --button-outline-neutral-disabled-border-color: var(--c-neutral-3);
+  --button-outline-neutral-hover-bg-color: var(--button-fill-default-hover-bg-color);
+  --button-outline-neutral-active-bg-color: var(--button-fill-default-active-bg-color);
+  --button-outline-neutral-disabled-border-color: var(--button-fill-default-disabled-border-color);
   --button-outline-neutral-disabled-text-color: var(--c-text-3);
   --button-outline-neutral-disabled-content-color: var(--c-text-3);
 
@@ -680,24 +682,24 @@
   --button-text-default-text-color: var(--c-text-1);
   --button-text-default-content-color: var(--c-text-1);
   --button-text-default-count-bg-color: var(--c-bg-mute-1);
-  --button-text-default-hover-bg-color: var(--c-bg-mute-1);
-  --button-text-default-active-bg-color: var(--c-bg-mute-2);
+  --button-text-default-hover-bg-color: var(--button-fill-default-hover-bg-color);
+  --button-text-default-active-bg-color: var(--button-fill-default-active-bg-color);
   --button-text-default-disabled-text-color: var(--c-text-3);
   --button-text-default-disabled-content-color: var(--c-text-3);
 
   --button-text-mute-text-color: var(--c-text-2);
   --button-text-mute-content-color: var(--c-text-2);
   --button-text-mute-count-bg-color: var(--c-bg-mute-1);
-  --button-text-mute-hover-bg-color: var(--c-bg-mute-1);
-  --button-text-mute-active-bg-color: var(--c-bg-mute-2);
+  --button-text-mute-hover-bg-color: var(--button-fill-default-hover-bg-color);
+  --button-text-mute-active-bg-color: var(--button-fill-default-active-bg-color);
   --button-text-mute-disabled-text-color: var(--c-text-3);
   --button-text-mute-disabled-content-color: var(--c-text-3);
 
   --button-text-neutral-text-color: var(--c-text-1);
   --button-text-neutral-content-color: var(--c-text-1);
   --button-text-neutral-count-bg-color: var(--c-bg-mute-1);
-  --button-text-neutral-hover-bg-color: var(--c-neutral-dimm-a1);
-  --button-text-neutral-active-bg-color: var(--c-neutral-dimm-a2);
+  --button-text-neutral-hover-bg-color: var(--button-fill-default-hover-bg-color);
+  --button-text-neutral-active-bg-color: var(--button-fill-default-active-bg-color);
   --button-text-neutral-disabled-text-color: var(--c-text-3);
   --button-text-neutral-disabled-content-color: var(--c-text-3);
 
@@ -750,18 +752,27 @@
   --button-text-danger-disabled-content-color: var(--c-text-danger-3);
 }
 
+.dark {
+  --button-fill-default-bg-color: color-mix(in oklab, var(--button-fill-default-border-color) 30%, transparent);
+  --button-fill-default-box-shadow: none;
+  --button-fill-default-hover-bg-color: color-mix(in oklab, var(--button-fill-default-border-color) 50%, transparent);
+  --button-fill-default-active-bg-color: color-mix(in oklab, var(--button-fill-default-border-color) 70%, transparent);
+  --button-fill-default-disabled-border-color: var(--c-border);
+  --button-fill-default-disabled-bg-color: var(--button-fill-default-bg-color);
+}
+
 /**
  * Component: Pill
  * -------------------------------------------------------------------------- */
 
 :root {
-  --pill-dimm-default-border-color: var(--c-divider);
+  --pill-dimm-default-border-color: var(--c-border);
   --pill-dimm-default-text-color: var(--c-text-1);
   --pill-dimm-default-bg-color: transparent;
   --pill-dimm-default-hover-bg-color: var(--c-bg-2);
   --pill-dimm-default-active-bg-color: var(--c-bg-3);
 
-  --pill-dimm-mute-border-color: var(--c-divider);
+  --pill-dimm-mute-border-color: var(--c-border);
   --pill-dimm-mute-text-color: var(--c-text-2);
   --pill-dimm-mute-bg-color: transparent;
   --pill-dimm-mute-hover-bg-color: var(--c-bg-2);
@@ -885,20 +896,21 @@
  * -------------------------------------------------------------------------- */
 
 :root {
+  --input-border-color: oklch(0.922 0 0);
   --input-label-color: var(--c-text-1);
-  --input-border-color: var(--c-border-mute-1);
   --input-value-color: var(--c-text-1);
   --input-placeholder-color: var(--c-text-3);
-  --input-bg-color: var(--c-bg-elv-2);
-  --input-hover-border-color: var(--c-border-mute-3);
+  --input-bg-color: var(--c-bg-1);
+  --input-box-shadow: var(--shadow-depth-1);
+  --input-hover-border-color: oklch(0.708 0 0);
   --input-focus-border-color: var(--c-border-info-1);
   --input-error-text-color: var(--c-text-danger-1);
   --input-error-border-color: var(--c-border-danger-1);
   --input-warning-text-color: var(--c-text-warning-1);
   --input-warning-border-color: var(--c-border-warning-1);
-  --input-disabled-border-color: var(--c-border-mute-1);
+  --input-disabled-border-color: var(--input-border-color);
   --input-disabled-value-color: var(--c-text-1);
-  --input-disabled-bg-color: var(--c-bg-mute-1);
+  --input-disabled-bg-color: color-mix(in oklab, var(--input-disabled-border-color) 50%, transparent);
 
   --input-mini-font-size: 14px;
   --input-mini-label-font-size: 12px;
@@ -914,3 +926,11 @@
   --input-switch-disabled-toggle-color: var(--c-fg-gray-1);
   --input-switch-disabled-bg-color: var(--c-bg-mute-1);
 }
+
+.dark {
+  --input-border-color: oklch(1 0 0 / 15%);
+  --input-bg-color: color-mix(in oklab, var(--input-border-color) 30%, transparent);
+  --input-hover-border-color: oklch(0.556 0 0);
+  --input-disabled-border-color: var(--c-border);
+  --input-disabled-bg-color: color-mix(in oklab, var(--input-disabled-border-color) 80%, transparent);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "4.38.1",
+  "version": "4.39.0",
   "description": "Vue Components for Global Brain Design System.",
   "keywords": [
     "components",
@@ -59,8 +59,8 @@
     "@iconify-json/ph": "^1.2.2",
     "@iconify-json/ri": "^1.2.10",
     "@popperjs/core": "^2.11.8",
-    "@sentry/browser": "^10.40.0",
-    "@sentry/vue": "^10.40.0",
+    "@sentry/browser": "^10.44.0",
+    "@sentry/vue": "^10.44.0",
     "@tanstack/vue-virtual": "3.0.0-beta.62",
     "@tinyhttp/content-disposition": "^2.2.4",
     "@tinyhttp/cookie": "^2.1.1",
@@ -70,53 +70,54 @@
     "@types/file-saver": "^2.0.7",
     "@types/lodash-es": "^4.17.12",
     "@types/markdown-it": "^14.1.2",
-    "@types/qs": "^6.14.0",
-    "@vitejs/plugin-vue": "^6.0.4",
-    "@vue/reactivity": "^3.5.29",
+    "@types/qs": "^6.15.0",
+    "@vitejs/plugin-vue": "^6.0.5",
+    "@vue/reactivity": "^3.5.30",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
     "@vueuse/core": "^14.2.1",
     "body-scroll-lock": "4.0.0-beta.0",
     "d3": "^7.9.0",
-    "dayjs": "^1.11.19",
-    "dompurify": "^3.3.1",
+    "dayjs": "^1.11.20",
+    "dompurify": "^3.3.3",
     "file-saver": "^2.0.5",
     "fuse.js": "^7.1.0",
     "html2canvas": "^1.4.1",
-    "jsdom": "^28.1.0",
+    "jsdom": "^29.0.0",
     "lodash-es": "^4.17.23",
     "magic-string": "^0.30.21",
     "markdown-it": "^14.1.1",
     "normalize.css": "^8.0.1",
     "ofetch": "^1.5.1",
     "pinia": "^3.0.4",
-    "postcss": "^8.5.6",
+    "postcss": "^8.5.8",
     "postcss-nested": "^7.0.2",
     "punycode": "^2.3.1",
     "qs": "^6.15.0",
     "unplugin-icons": "^23.0.1",
     "v-calendar": "3.0.1",
     "vite": "^7.3.1",
-    "vue": "^3.5.29",
+    "vue": "^3.5.30",
     "vue-draggable-plus": "^0.6.1",
     "vue-router": "^4.6.4"
   },
   "devDependencies": {
     "@globalbrain/eslint-config": "^3.0.1",
     "@histoire/plugin-vue": "1.0.0-beta.1",
-    "@release-it/conventional-changelog": "^10.0.5",
+    "@release-it/conventional-changelog": "^10.0.6",
     "@types/jsdom": "^28.0.0",
-    "@types/node": "^25.3.3",
-    "@vitest/coverage-v8": "^4.0.18",
+    "@types/node": "^25.5.0",
+    "@typescript-eslint/rule-tester": "^8.57.1",
+    "@vitest/coverage-v8": "^4.1.0",
     "@vue/test-utils": "^2.4.6",
-    "eslint": "^9.39.3",
-    "happy-dom": "^20.7.0",
+    "eslint": "^9.39.4",
+    "happy-dom": "^20.8.4",
     "histoire": "1.0.0-beta.1",
     "release-it": "^19.2.4",
     "typescript": "~5.9.3",
     "vitepress": "^2.0.0-alpha.16",
-    "vitest": "^4.0.18",
-    "vue-tsc": "^3.2.5"
+    "vitest": "^4.1.0",
+    "vue-tsc": "^3.2.6"
   },
-  "packageManager": "pnpm@10.30.3"
+  "packageManager": "pnpm@10.32.1"
 }