@globalbrain/sefirot 2.19.0 → 2.21.0

package/lib/components/SButton.vue

@@ -81,7 +81,7 @@ function handleClick(): void {
   </component>
 </template>
 
-<style lang="postcss" scoped>
+<style scoped lang="postcss">
 .SButton {
   position: relative;
   display: inline-flex;
@@ -156,7 +156,7 @@ function handleClick(): void {
 }
 
 .SButton.fill {
-  font-weight: 600;
+  font-weight: 500;
 
   &.neutral {
     border-color: var(--button-fill-neutral-border-color);

package/lib/components/SButtonGroup.vue

@@ -1,148 +1,17 @@
-<script setup lang="ts">
-import { PropType, computed } from 'vue'
-
-export interface ButtonGroupItem {
-  label: string
-  value: string
-  mode?: Mode
-}
-
-export type Mode = 'neutral' | 'info' | 'success' | 'warning' | 'danger'
-export type Size = 'mini' | 'small' | 'medium' | 'large' | 'jumbo'
-
-const props = defineProps({
-  items: { type: Array as PropType<ButtonGroupItem[]>, required: true },
-  size: { type: String as PropType<Size>, default: 'medium' },
-  modelValue: { type: String, default: null }
-})
-
-const emit = defineEmits(['update:modelValue'])
-
-const classes = computed(() => [props.size])
-
-function getButtonClasses(button: ButtonGroupItem) {
-  return [
-    { active: button.value === props.modelValue },
-    button.mode ?? 'neutral'
-  ]
-}
-
-function handleClick(value: string) {
-  emit('update:modelValue', value)
-}
-</script>
-
 <template>
-  <div class="SButtonGroup" :class="classes">
-    <button
-      v-for="item in items"
-      :key="item.value"
-      class="button"
-      :class="getButtonClasses(item)"
-      @click="handleClick(item.value)"
-    >
-      <span class="content">
-        {{ item.label }}
-      </span>
-    </button>
+  <div class="SButtonGroup">
+    <slot />
   </div>
 </template>
 
-<style lang="postcss" scoped>
-.SButtonGroup {
-  display: flex;
-  width: fit-content;
-  border: 1px solid var(--c-divider);
-  border-radius: 4px;
-  overflow: hidden;
-}
-
-.SButtonGroup.mini {
-  height: 28px;
-
-  .button {
-    padding: 0 8px;
-    height: 28px;
-    font-size: 12px;
-    font-weight: 500;
-  }
-}
-
-.SButtonGroup.small {
-  height: 32px;
-
-  .button {
-    padding: 0 10px;
-    height: 32px;
-    font-size: 12px;
-    font-weight: 500;
-  }
-}
-
-.SButtonGroup.medium {
-  height: 40px;
-
-  .button {
-    padding: 0 12px;
-    height: 40px;
-    font-size: 13px;
-    font-weight: 500;
-  }
-}
-
-.SButtonGroup.large {
-  height: 48px;
-
-  .button {
-    padding: 0 14px;
-    height: 48px;
-    font-size: 14px;
-    font-weight: 500;
-  }
-}
-
-.SButtonGroup.jumbo {
-  height: 64px;
-
-  .button {
-    padding: 0 24px;
-    height: 64px;
-    font-size: 14px;
-    font-weight: 500;
-  }
-}
-
-.button {
-  border-left: 1px solid transparent;
-  letter-spacing: .4px;
-  color: var(--c-text-2);
-  white-space: nowrap;
-  transition: color .25s, background-color .25s;
-
-  &:hover {
-    color: var(--c-text-1);
-  }
-}
-
-.button:not(:first-child) {
-  border-left: 1px solid var(--c-divider);
-}
-
-.button.active {
-  color: var(--c-text-dark-1);
-}
+<style scoped lang="postcss">
+.SButtonGroup :slotted(.SButton) {
+  border-left-width: 0;
+  border-radius: 0;
 
-.button.neutral.active { background-color: var(--c-black); }
-.button.info.active    { background-color: var(--c-info); }
-.button.success.active { background-color: var(--c-success); }
-.button.warning.active { background-color: var(--c-warning); }
-.button.danger.active  { background-color: var(--c-danger); }
+  &:first-child { border-left-width: 1px; }
 
-.content {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
+  &:first-child { border-radius: 6px 0 0 6px; }
+  &:last-child  { border-radius: 0 6px 6px 0; }
 }
 </style>

package/lib/components/SDropdownSection.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { DropdownSection } from '../composables/Dropdown'
+import SDropdownSectionActions from './SDropdownSectionActions.vue'
+import SDropdownSectionComponent from './SDropdownSectionComponent.vue'
 import SDropdownSectionFilter from './SDropdownSectionFilter.vue'
 import SDropdownSectionMenu from './SDropdownSectionMenu.vue'
 
@@ -20,6 +22,14 @@ defineProps<{
     :options="section.options"
     :on-click="section.onClick"
   />
+  <SDropdownSectionActions
+    v-if="section.type === 'actions'"
+    :options="section.options"
+  />
+  <SDropdownSectionComponent
+    v-else-if="section.type === 'component'"
+    :comp="section.component"
+  />
 </template>
 
 <style scoped lang="postcss">

package/lib/components/SDropdownSectionActions.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { DropdownSectionActionsOption } from '../composables/Dropdown'
+
+defineProps<{
+  options: DropdownSectionActionsOption[]
+}>()
+</script>
+
+<template>
+  <div class="SDropdownSectionActions">
+    <div v-for="option in options" :key="option.label" class="item">
+      <button class="button" :class="[option.mode ?? 'neutral']" @click="option.onClick">
+        {{ option.label }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.SDropdownSectionActions {
+  display: flex;
+  justify-content: flex-end;
+  padding: 8px;
+}
+
+.button {
+  display: block;
+  border-radius: 6px;
+  padding: 0 8px;
+  width: 100%;
+  text-align: left;
+  line-height: 32px;
+  font-size: 12px;
+  font-weight: 500;
+  transition: color 0.25s, background-color 0.25s;
+
+  &.neutral        { color: var(--button-text-neutral-text-color); }
+  &.neutral:hover  { background-color: var(--button-text-neutral-hover-bg-color); }
+  &.neutral:active { background-color: var(--button-text-neutral-active-bg-color); }
+
+  &.mute        { color: var(--button-text-mute-text-color); }
+  &.mute:hover  { background-color: var(--button-text-mute-hover-bg-color); }
+  &.mute:active { background-color: var(--button-text-mute-active-bg-color); }
+
+  &.info        { color: var(--button-text-info-text-color); }
+  &.info:hover  { background-color: var(--button-text-info-hover-bg-color); }
+  &.info:active { background-color: var(--button-text-info-active-bg-color); }
+
+  &.success        { color: var(--button-text-success-text-color); }
+  &.success:hover  { background-color: var(--button-text-success-hover-bg-color); }
+  &.success:active { background-color: var(--button-text-success-active-bg-color); }
+
+  &.warning        { color: var(--button-text-warning-text-color); }
+  &.warning:hover  { background-color: var(--button-text-warning-hover-bg-color); }
+  &.warning:active { background-color: var(--button-text-warning-active-bg-color); }
+
+  &.danger        { color: var(--button-text-danger-text-color); }
+  &.danger:hover  { background-color: var(--button-text-danger-hover-bg-color); }
+  &.danger:active { background-color: var(--button-text-danger-active-bg-color); }
+}
+</style>

package/lib/components/SDropdownSectionComponent.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { DefineComponent } from 'vue'
+
+defineProps<{
+  comp: DefineComponent
+}>()
+</script>
+
+<template>
+  <Component :is="comp" />
+</template>

package/lib/components/SDropdownSectionFilter.vue

@@ -102,13 +102,12 @@ function handleClick(option: DropdownSectionFilterOption, value: string | number
   border-radius: 6px;
   padding: 0 8px;
   width: 100%;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 32px;
   background-color: var(--c-bg);
   transition: border-color 0.25s;
 
   &::placeholder {
-    font-weight: 500;
     color: var(--c-text-3);
   }
 

package/lib/components/SDropdownSectionFilterItemAvatar.vue

@@ -32,7 +32,7 @@ defineProps<{
   display: inline-block;
   padding-left: 8px;
   font-size: 12px;
-  font-weight: 500;
+  font-weight: 400;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;

package/lib/components/SDropdownSectionFilterItemText.vue

@@ -22,6 +22,6 @@ defineProps<{
   display: inline-block;
   line-height: 20px;
   font-size: 12px;
-  font-weight: 500;
+  font-weight: 400;
 }
 </style>

package/lib/components/SDropdownSectionMenu.vue

@@ -29,7 +29,7 @@ defineProps<{
   text-align: left;
   line-height: 32px;
   font-size: 12px;
-  font-weight: 500;
+  font-weight: 400;
   transition: color 0.25s, background-color 0.25s;
 
   &:hover {

package/lib/components/SInputBase.vue

@@ -114,7 +114,6 @@ function getErrorMsg(validation: Validatable) {
   align-items: baseline;
   width: 100%;
   line-height: 16px;
-  font-weight: 500;
   cursor: pointer;
   transition: color 0.25s;
 }
@@ -126,6 +125,7 @@ function getErrorMsg(validation: Validatable) {
 }
 
 .label-text-value {
+  font-weight: 500;
   color: var(--input-label-color);
 }
 
@@ -144,7 +144,7 @@ function getErrorMsg(validation: Validatable) {
   display: inline-block;
   margin-left: 8px;
   font-size: 12px;
-  font-weight: 500;
+  font-weight: 400;
   color: var(--c-text-2);
 }
 
@@ -158,7 +158,7 @@ function getErrorMsg(validation: Validatable) {
   padding: 6px 0 0 0;
   line-height: 18px;
   font-size: 12px;
-  font-weight: 500;
+  font-weight: 400;
   color: var(--input-error-text-color);
   transition: opacity 0.25s, transform 0.25s;
 }
@@ -168,7 +168,7 @@ function getErrorMsg(validation: Validatable) {
   padding: 4px 0 0;
   line-height: 20px;
   font-size: 12px;
-  font-weight: 500;
+  font-weight: 400;
   color: var(--c-text-2);
 }
 

package/lib/components/SInputRadio.vue

@@ -123,6 +123,6 @@ function onClick() {
   padding-left: 10px;
   line-height: 20px;
   font-size: 14px;
-  font-weight: 500;
+  font-weight: 400;
 }
 </style>

package/lib/components/SInputSwitch.vue

@@ -5,36 +5,53 @@ import { Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 
 export type Size = 'mini' | 'small' | 'medium'
-export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
+export type ActiveColor = 'info' | 'success' | 'warning' | 'danger'
+export type CheckColor = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   size?: Size
   name?: string
   label?: string
   info?: string
   note?: string
   text?: string
+  color?: ActiveColor
   help?: string
   checkIcon?: IconifyIcon | DefineComponent
   checkText?: string
-  checkColor?: Color
+  checkColor?: CheckColor
   disabled?: boolean
-  modelValue: boolean
+  value?: boolean
+  modelValue?: boolean
   hideError?: boolean
   validation?: Validatable
-}>()
+}>(), {
+  value: undefined,
+  modelValue: undefined
+})
 
 const emit = defineEmits<{
-  (e: 'update:modelValue', value: boolean): void
+  (e: 'update:model-value', value: boolean): void
+  (e: 'change', value: boolean): void
 }>()
 
+const _value = computed(() => {
+  return props.modelValue !== undefined
+    ? props.modelValue
+    : props.value !== undefined ? props.value : false
+})
+
 const classes = computed(() => [
-  [props.size ?? 'small'],
+  props.size ?? 'small',
+  props.color ?? 'info',
   { disabled: props.disabled }
 ])
 
 function emitChange(): void {
-  !props.disabled && emit('update:modelValue', !props.modelValue)
+  if (!props.disabled) {
+    emit('update:model-value', !_value.value)
+    emit('change', !_value.value)
+  }
 }
 </script>
 
@@ -53,11 +70,10 @@ function emitChange(): void {
     :hide-error="hideError"
   >
     <div class="container">
-      <div class="input" :class="{ on: modelValue }" role="button" @click="emitChange">
+      <div class="input" :class="{ on: _value }" role="button" @click="emitChange">
         <p v-if="text" class="text">{{ text }}</p>
-
         <div class="box">
-          <div class="check" />
+          <div class="toggle" />
         </div>
       </div>
     </div>
@@ -65,7 +81,185 @@ function emitChange(): void {
   </SInputBase>
 </template>
 
-<style lang="postcss" scoped>
+<style scoped lang="postcss">
+.SInputSwitch.mini {
+  .input {
+    height: 32px;
+  }
+
+  .text {
+    line-height: 20px;
+    font-size: 14px;
+  }
+
+  .box {
+    border-radius: 9px;
+    width: 32px;
+    height: 18px;
+  }
+
+  .toggle {
+    top: 1px;
+    left: 1px;
+    width: 14px;
+    height: 14px;
+  }
+
+  .input.on .toggle {
+    transform: translateX(14px);
+  }
+}
+
+.SInputSwitch.small {
+  .input {
+    height: 32px;
+  }
+
+  .text {
+    line-height: 20px;
+    font-size: 14px;
+  }
+
+  .box {
+    border-radius: 11px;
+    width: 40px;
+    height: 22px;
+  }
+
+  .toggle {
+    top: 2px;
+    left: 2px;
+    width: 16px;
+    height: 16px;
+  }
+
+  .input.on .toggle {
+    transform: translateX(18px);
+  }
+}
+
+.SInputSwitch.medium {
+  .input {
+    height: 32px;
+  }
+
+  .text {
+    line-height: 20px;
+    font-size: 14px;
+  }
+
+  .box {
+    border-radius: 13px;
+    width: 46px;
+    height: 26px;
+  }
+
+  .toggle {
+    top: 3px;
+    left: 3px;
+    width: 18px;
+    height: 18px;
+  }
+
+  .input.on .toggle {
+    transform: translateX(20px);
+  }
+}
+
+.SInputSwitch.info {
+  .box:hover {
+    border-color: var(--c-info-light);
+  }
+
+  .input.on .box {
+    border-color: var(--c-info-light);
+    background-color: var(--c-info);
+  }
+}
+
+.SInputSwitch.success {
+  .box:hover {
+    border-color: var(--c-success-light);
+  }
+
+  .input.on .box {
+    border-color: var(--c-success-light);
+    background-color: var(--c-success);
+  }
+}
+
+.SInputSwitch.warning {
+  .box:hover {
+    border-color: var(--c-warning-light);
+  }
+
+  .input.on .box {
+    border-color: var(--c-warning-light);
+    background-color: var(--c-warning);
+  }
+}
+
+.SInputSwitch.danger {
+  .box:hover {
+    border-color: var(--c-danger-light);
+  }
+
+  .input.on .box {
+    border-color: var(--c-danger-light);
+    background-color: var(--c-danger);
+  }
+}
+
+.SInputSwitch.disabled {
+  .input {
+    cursor: not-allowed;
+  }
+
+  .box {
+    background-color: var(--input-switch-disabled-bg-color);
+  }
+
+  .box:hover {
+    border-color: var(--c-divider-1);
+  }
+
+  .toggle {
+    background-color: var(--input-switch-disabled-toggle-color);
+  }
+
+  .input.on .toggle {
+    opacity: 0.5;
+  }
+
+  &.info {
+    .input.on .box {
+      border-color: var(--c-info);
+      background-color: var(--c-info-dark);
+    }
+  }
+
+  &.success {
+    .input.on .box {
+      border-color: var(--c-success);
+      background-color: var(--c-success-dark);
+    }
+  }
+
+  &.warning {
+    .input.on .box {
+      border-color: var(--c-warning);
+      background-color: var(--c-warning-dark);
+    }
+  }
+
+  &.danger {
+    .input.on .box {
+      border-color: var(--c-danger);
+      background-color: var(--c-danger-dark);
+    }
+  }
+}
+
 .container {
   display: flex;
 }
@@ -76,11 +270,7 @@ function emitChange(): void {
   justify-content: space-between;
   align-items: center;
   width: 100%;
-  height: 32px;
-
-  &:hover {
-    .box { border-color: var(--c-info); }
-  }
+  cursor: pointer;
 }
 
 .input.on .box {
@@ -88,43 +278,28 @@ function emitChange(): void {
   background-color: var(--c-info);
 }
 
-.input.on .check {
+.input.on .toggle {
   background-color: var(--c-white);
-  transform: translateX(18px);
 }
 
 .text {
   flex-grow: 1;
   margin: 0;
   padding-right: 16px;
-  line-height: 20px;
-  font-size: 14px;
-  font-weight: 500;
 }
 
 .box {
   position: relative;
   flex-shrink: 0;
-  border: 1px solid var(--c-divider);
-  border-radius: 11px;
-  width: 40px;
-  height: 22px;
-  background-color: var(--c-bg-elv-down);
+  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;
 }
 
-.check {
+.toggle {
   position: absolute;
   border-radius: 50%;
-  background-color: var(--c-black);
-  top: 2px;
-  left: 2px;
-  width: 16px;
-  height: 16px;
-  transition: background-color .25s, transform .25s;
-
-  .dark & {
-    background-color: var(--c-white);
-  }
+  background-color: var(--input-switch-toggle-color);
+  transition: background-color 0.25s, transform 0.25s;
 }
 </style>

package/lib/components/SInputSwitches.vue

@@ -6,7 +6,7 @@ import SInputBase from './SInputBase.vue'
 import SInputSwitch from './SInputSwitch.vue'
 
 export type Size = 'mini' | 'small' | 'medium'
-export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
+export type CheckColor = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
 
 export interface Option {
   label: string
@@ -22,7 +22,7 @@ const props = defineProps<{
   help?: string
   checkIcon?: IconifyIcon | DefineComponent
   checkText?: string
-  checkColor?: Color
+  checkColor?: CheckColor
   options: Option[]
   disabled?: boolean
   modelValue: (string | number | boolean)[]

package/lib/components/SPill.vue

@@ -53,7 +53,7 @@ function onClick() {
   display: inline-block;
   border: 1px solid transparent;
   letter-spacing: 0.4px;
-  font-weight: 600;
+  font-weight: 500;
   transition: border-color 0.25s, color 0.25s, background-color 0.25s;
 }
 

package/lib/composables/Dropdown.ts

@@ -4,8 +4,10 @@ import { Ref, ref, unref } from 'vue'
 export type DropdownSection =
   | DropdownSectionMenu
   | DropdownSectionFilter
+  | DropdownSectionComponent
+  | DropdownSectionActions
 
-export type DropdownSectionType = 'menu' | 'filter'
+export type DropdownSectionType = 'menu' | 'filter' | 'actions' | 'component'
 
 export interface DropdownSectionBase {
   type: DropdownSectionType
@@ -56,6 +58,22 @@ export interface DropdownSectionFilterOptionAvatar extends DropdownSectionFilter
   image?: string | null
 }
 
+export interface DropdownSectionActions extends DropdownSectionBase {
+  type: 'actions'
+  options: DropdownSectionActionsOption[]
+}
+
+export interface DropdownSectionActionsOption {
+  mode?: 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
+  label: string
+  onClick(): void
+}
+
+export interface DropdownSectionComponent extends DropdownSectionBase {
+  type: 'component'
+  component: any
+}
+
 export interface ManualDropdownPosition {
   container: Ref<any>
   position: Ref<'top' | 'bottom'>

package/lib/styles/base.css

@@ -9,17 +9,11 @@ body {
   min-width: 320px;
   min-height: 100vh;
   font-family: var(--font-family-base);
-  letter-spacing: .4px;
   line-height: 24px;
   font-size: 16px;
   font-weight: 400;
   color: var(--c-text-1);
   background-color: var(--c-bg);
-  direction: ltr;
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
 }
 
 blockquote,
@@ -103,7 +97,6 @@ iframe,
 embed,
 object {
   display: block;
-  vertical-align: middle;
 }
 
 img,
@@ -119,6 +112,7 @@ select,
 textarea {
   border: 0;
   padding: 0;
+  letter-spacing: inherit;
   line-height: inherit;
   color: inherit;
 }
@@ -171,17 +165,20 @@ textarea {
 
 input[type="number"] {
   -moz-appearance: textfield;
+  appearance: textfield;
 }
 
 input[type="number"]::-webkit-outer-spin-button,
 input[type="number"]::-webkit-inner-spin-button {
-  -webkit-appearance: none;
   margin: 0;
+  -webkit-appearance: none;
+  appearance: none;
 }
 
 input[type="select"],
 select {
   -webkit-appearance: none;
+  appearance: none;
 }
 
 fieldset {

package/lib/styles/variables.css

@@ -58,8 +58,8 @@
   --c-neutral-dark-dimm-2: rgba(255, 255, 255, 0.24);
 
   --c-text-light-1: #1f1f1f;
-  --c-text-light-2: rgba(60, 60, 67, 0.6);
-  --c-text-light-3: rgba(60, 60, 67, 0.3);
+  --c-text-light-2: rgba(60, 60, 67, 0.72);
+  --c-text-light-3: rgba(60, 60, 67, 0.39);
 
   --c-text-dark-1: rgba(235, 235, 245, 0.98);
   --c-text-dark-2: rgba(235, 235, 245, 0.6);
@@ -198,6 +198,8 @@
   --c-text-inverse-2: var(--c-text-dark-2);
   --c-text-inverse-3: var(--c-text-dark-3);
 
+  --c-soft: var(--c-white-soft);
+
   --c-mute: #f1f1f1;
   --c-mute-light: #f9f9f9;
   --c-mute-lighter: #ffffff;
@@ -251,6 +253,8 @@
   --c-text-inverse-2: var(--c-text-light-2);
   --c-text-inverse-3: var(--c-text-light-3);
 
+  --c-soft: #222226;
+
   --c-mute: #2c2c2e;
   --c-mute-light: #3a3a3c;
   --c-mute-lighter: #505053;
@@ -662,4 +666,14 @@
   --input-mini-label-font-size: 12px;
   --input-small-label-font-size: 14px;
   --input-medium-label-font-size: 14px;
+
+  --input-switch-toggle-color: var(--c-neutral-1);
+  --input-switch-bg-color: var(--c-mute);
+  --input-switch-disabled-toggle-color: var(--c-gray);
+  --input-switch-disabled-bg-color: var(--c-mute);
+}
+
+.dark {
+  --input-switch-bg-color: var(--c-bg-elv-1);
+  --input-switch-disabled-bg-color: var(--c-mute);
 }

package/lib/validation/validators/hms.ts

@@ -1,7 +1,7 @@
 export interface Hms {
-  hour?: string
-  minute?: string
-  second?: string
+  hour?: string | null
+  minute?: string | null
+  second?: string | null
 }
 
 export type HmsType = 'h' | 'm' | 's'

package/lib/validation/validators/requiredHms.ts

@@ -1,7 +1,7 @@
 export interface Hms {
-  hour?: string
-  minute?: string
-  second?: string
+  hour?: string | null
+  minute?: string | null
+  second?: string | null
 }
 
 export type HmsType = 'h' | 'm' | 's'
@@ -13,5 +13,5 @@ export const HmsMap = {
 } as const
 
 export function requiredHms(hms: Hms, required: HmsType[] = ['h', 'm', 's']): boolean {
-  return required.every((r) => hms[HmsMap[r]] !== undefined)
+  return required.every((r) => hms[HmsMap[r]] != null)
 }

package/lib/validation/validators/requiredYmd.ts

@@ -3,5 +3,5 @@ import { Ymd, YmdMap, YmdType } from './ymd'
 export type { Ymd, YmdType, YmdMap }
 
 export function requiredYmd(ymd: Ymd, required: YmdType[] = ['y', 'm', 'd']): boolean {
-  return required.every((r) => ymd[YmdMap[r]] !== null)
+  return required.every((r) => ymd[YmdMap[r]] != null)
 }

package/package.json

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