@globalbrain/sefirot 4.21.0 → 4.23.0

package/lib/components/SButton.vue

@@ -42,6 +42,7 @@ const props = defineProps<{
   iconMode?: Mode
   label?: string
   labelMode?: Mode
+  count?: number
   href?: string
   rounded?: boolean
   block?: boolean
@@ -120,6 +121,9 @@ function handleClick(): void {
         <span v-if="trailIcon" class="icon" :class="iconMode">
           <component :is="trailIcon" class="icon-svg" />
         </span>
+        <span v-else-if="count !== undefined" class="count">
+          {{ count }}
+        </span>
       </span>
 
       <transition name="fade">
@@ -197,6 +201,11 @@ function handleClick(): void {
   color: var(--button-loader-color);
 }
 
+.count {
+  display: inline-block;
+  background-color: var(--button-count-bg-color);
+}
+
 .SButton.mini {
   min-width: 28px;
   min-height: 28px;
@@ -208,6 +217,15 @@ function handleClick(): void {
   &.has-label.has-trail-icon { padding: var(--button-padding, 0 8px 0 10px); }
   .content                   { gap: 4px; }
   .icon-svg                  { width: 16px; height: 16px; }
+
+  .count {
+    border-radius: 9px;
+    padding: 0 6px;
+    min-width: 18px;
+    line-height: 18px;
+    font-size: 12px;
+    font-weight: 500;
+  }
 }
 
 .SButton.small {
@@ -219,8 +237,17 @@ function handleClick(): void {
   &.has-label                { padding: var(--button-padding, 0 12px); }
   &.has-label.has-lead-icon  { padding: var(--button-padding, 0 10px 0 8px); }
   &.has-label.has-trail-icon { padding: var(--button-padding, 0 8px 0 10px); }
-  .content                   { gap: 8px; }
+  .content                   { gap: 6px; }
   .icon-svg                  { width: 16px; height: 16px; }
+
+  .count {
+    border-radius: 9px;
+    padding: 0 6px;
+    min-width: 18px;
+    line-height: 18px;
+    font-size: 12px;
+    font-weight: 600;
+  }
 }
 
 .SButton.medium {
@@ -234,6 +261,15 @@ function handleClick(): void {
   &.has-label.has-trail-icon { padding: var(--button-padding, 0 10px 0 12px); }
   .content                   { gap: 8px; }
   .icon-svg                  { width: 18px; height: 18px; }
+
+  .count {
+    border-radius: 10px;
+    padding: 0 6px;
+    min-width: 20px;
+    line-height: 20px;
+    font-size: 12px;
+    font-weight: 600;
+  }
 }
 
 .SButton.large {
@@ -247,6 +283,15 @@ function handleClick(): void {
   &.has-label.has-trail-icon { padding: var(--button-padding, 0 12px 0 14px); }
   .content                   { gap: 8px; }
   .icon-svg                  { width: 18px; height: 18px; }
+
+  .count {
+    border-radius: 10px;
+    padding: 0 6px;
+    min-width: 20px;
+    line-height: 20px;
+    font-size: 12px;
+    font-weight: 600;
+  }
 }
 
 .SButton.jumbo {
@@ -260,6 +305,15 @@ function handleClick(): void {
   &.has-label.has-trail-icon { padding: var(--button-padding, 0 18px 0 20px); }
   .content                   { gap: 8px; }
   .icon-svg                  { width: 20px; height: 20px; }
+
+  .count {
+    border-radius: 12px;
+    padding: 0 8px;
+    min-width: 24px;
+    line-height: 24px;
+    font-size: 14px;
+    font-weight: 500;
+  }
 }
 
 .SButton.disabled {
@@ -288,6 +342,7 @@ function handleClick(): void {
     --button-border-color: var(--button-fill-default-border-color);
     --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-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);
@@ -304,6 +359,7 @@ function handleClick(): void {
     --button-border-color: var(--button-fill-mute-border-color);
     --button-text-color: var(--button-fill-mute-text-color);
     --button-bg-color: var(--button-fill-mute-bg-color);
+    --button-count-bg-color: var(--button-fill-mute-count-bg-color);
     --button-hover-border-color: var(--button-fill-mute-hover-border-color);
     --button-hover-text-color: var(--button-fill-mute-hover-text-color);
     --button-hover-bg-color: var(--button-fill-mute-hover-bg-color);
@@ -320,6 +376,7 @@ function handleClick(): void {
     --button-border-color: var(--button-fill-neutral-border-color);
     --button-text-color: var(--button-fill-neutral-text-color);
     --button-bg-color: var(--button-fill-neutral-bg-color);
+    --button-count-bg-color: var(--button-fill-neutral-count-bg-color);
     --button-hover-border-color: var(--button-fill-neutral-hover-border-color);
     --button-hover-text-color: var(--button-fill-neutral-hover-text-color);
     --button-hover-bg-color: var(--button-fill-neutral-hover-bg-color);
@@ -336,6 +393,7 @@ function handleClick(): void {
     --button-border-color: var(--button-fill-white-border-color);
     --button-text-color: var(--button-fill-white-text-color);
     --button-bg-color: var(--button-fill-white-bg-color);
+    --button-count-bg-color: var(--button-fill-white-count-bg-color);
     --button-hover-border-color: var(--button-fill-white-hover-border-color);
     --button-hover-text-color: var(--button-fill-white-hover-text-color);
     --button-hover-bg-color: var(--button-fill-white-hover-bg-color);
@@ -352,6 +410,7 @@ function handleClick(): void {
     --button-border-color: var(--button-fill-black-border-color);
     --button-text-color: var(--button-fill-black-text-color);
     --button-bg-color: var(--button-fill-black-bg-color);
+    --button-count-bg-color: var(--button-fill-black-count-bg-color);
     --button-hover-border-color: var(--button-fill-black-hover-border-color);
     --button-hover-text-color: var(--button-fill-black-hover-text-color);
     --button-hover-bg-color: var(--button-fill-black-hover-bg-color);
@@ -368,6 +427,7 @@ function handleClick(): void {
     --button-border-color: var(--button-fill-info-border-color);
     --button-text-color: var(--button-fill-info-text-color);
     --button-bg-color: var(--button-fill-info-bg-color);
+    --button-count-bg-color: var(--button-fill-info-count-bg-color);
     --button-hover-border-color: var(--button-fill-info-hover-border-color);
     --button-hover-text-color: var(--button-fill-info-hover-text-color);
     --button-hover-bg-color: var(--button-fill-info-hover-bg-color);
@@ -384,6 +444,7 @@ function handleClick(): void {
     --button-border-color: var(--button-fill-success-border-color);
     --button-text-color: var(--button-fill-success-text-color);
     --button-bg-color: var(--button-fill-success-bg-color);
+    --button-count-bg-color: var(--button-fill-success-count-bg-color);
     --button-hover-border-color: var(--button-fill-success-hover-border-color);
     --button-hover-text-color: var(--button-fill-success-hover-text-color);
     --button-hover-bg-color: var(--button-fill-success-hover-bg-color);
@@ -400,6 +461,7 @@ function handleClick(): void {
     --button-border-color: var(--button-fill-warning-border-color);
     --button-text-color: var(--button-fill-warning-text-color);
     --button-bg-color: var(--button-fill-warning-bg-color);
+    --button-count-bg-color: var(--button-fill-warning-count-bg-color);
     --button-hover-border-color: var(--button-fill-warning-hover-border-color);
     --button-hover-text-color: var(--button-fill-warning-hover-text-color);
     --button-hover-bg-color: var(--button-fill-warning-hover-bg-color);
@@ -416,6 +478,7 @@ function handleClick(): void {
     --button-border-color: var(--button-fill-danger-border-color);
     --button-text-color: var(--button-fill-danger-text-color);
     --button-bg-color: var(--button-fill-danger-bg-color);
+    --button-count-bg-color: var(--button-fill-danger-count-bg-color);
     --button-hover-border-color: var(--button-fill-danger-hover-border-color);
     --button-hover-text-color: var(--button-fill-danger-hover-text-color);
     --button-hover-bg-color: var(--button-fill-danger-hover-bg-color);
@@ -489,6 +552,7 @@ function handleClick(): void {
   &.default {
     --button-border-color: var(--button-outline-default-border-color);
     --button-text-color: var(--button-outline-default-text-color);
+    --button-count-bg-color: var(--button-outline-default-count-bg-color);
     --button-hover-bg-color: var(--button-outline-default-hover-bg-color);
     --button-active-bg-color: var(--button-outline-default-active-bg-color);
     --button-disabled-border-color: var(--button-outline-default-disabled-border-color);
@@ -498,6 +562,7 @@ function handleClick(): void {
   &.mute {
     --button-border-color: var(--button-outline-mute-border-color);
     --button-text-color: var(--button-outline-mute-text-color);
+    --button-count-bg-color: var(--button-outline-mute-count-bg-color);
     --button-hover-bg-color: var(--button-outline-mute-hover-bg-color);
     --button-active-bg-color: var(--button-outline-mute-active-bg-color);
     --button-disabled-border-color: var(--button-outline-mute-disabled-border-color);
@@ -507,6 +572,7 @@ function handleClick(): void {
   &.neutral {
     --button-border-color: var(--button-outline-neutral-border-color);
     --button-text-color: var(--button-outline-neutral-text-color);
+    --button-count-bg-color: var(--button-outline-neutral-count-bg-color);
     --button-hover-bg-color: var(--button-outline-neutral-hover-bg-color);
     --button-active-bg-color: var(--button-outline-neutral-active-bg-color);
     --button-disabled-border-color: var(--button-outline-neutral-disabled-border-color);
@@ -516,6 +582,7 @@ function handleClick(): void {
   &.white {
     --button-border-color: var(--button-outline-white-border-color);
     --button-text-color: var(--button-outline-white-text-color);
+    --button-count-bg-color: var(--button-outline-white-count-bg-color);
     --button-hover-bg-color: var(--button-outline-white-hover-bg-color);
     --button-active-bg-color: var(--button-outline-white-active-bg-color);
     --button-disabled-border-color: var(--button-outline-white-disabled-border-color);
@@ -525,6 +592,7 @@ function handleClick(): void {
   &.black {
     --button-border-color: var(--button-outline-black-border-color);
     --button-text-color: var(--button-outline-black-text-color);
+    --button-count-bg-color: var(--button-outline-black-count-bg-color);
     --button-hover-bg-color: var(--button-outline-black-hover-bg-color);
     --button-active-bg-color: var(--button-outline-black-active-bg-color);
     --button-disabled-border-color: var(--button-outline-black-disabled-border-color);
@@ -534,6 +602,7 @@ function handleClick(): void {
   &.info {
     --button-border-color: var(--button-outline-info-border-color);
     --button-text-color: var(--button-outline-info-text-color);
+    --button-count-bg-color: var(--button-outline-info-count-bg-color);
     --button-hover-bg-color: var(--button-outline-info-hover-bg-color);
     --button-active-bg-color: var(--button-outline-info-active-bg-color);
     --button-disabled-border-color: var(--button-outline-info-disabled-border-color);
@@ -543,6 +612,7 @@ function handleClick(): void {
   &.success {
     --button-border-color: var(--button-outline-success-border-color);
     --button-text-color: var(--button-outline-success-text-color);
+    --button-count-bg-color: var(--button-outline-success-count-bg-color);
     --button-hover-bg-color: var(--button-outline-success-hover-bg-color);
     --button-active-bg-color: var(--button-outline-success-active-bg-color);
     --button-disabled-border-color: var(--button-outline-success-disabled-border-color);
@@ -552,6 +622,7 @@ function handleClick(): void {
   &.warning {
     --button-border-color: var(--button-outline-warning-border-color);
     --button-text-color: var(--button-outline-warning-text-color);
+    --button-count-bg-color: var(--button-outline-warning-count-bg-color);
     --button-hover-bg-color: var(--button-outline-warning-hover-bg-color);
     --button-active-bg-color: var(--button-outline-warning-active-bg-color);
     --button-disabled-border-color: var(--button-outline-warning-disabled-border-color);
@@ -561,6 +632,7 @@ function handleClick(): void {
   &.danger {
     --button-border-color: var(--button-outline-danger-border-color);
     --button-text-color: var(--button-outline-danger-text-color);
+    --button-count-bg-color: var(--button-outline-danger-count-bg-color);
     --button-hover-bg-color: var(--button-outline-danger-hover-bg-color);
     --button-active-bg-color: var(--button-outline-danger-active-bg-color);
     --button-disabled-border-color: var(--button-outline-danger-disabled-border-color);
@@ -629,6 +701,7 @@ function handleClick(): void {
 
   &.default {
     --button-text-color: var(--button-text-default-text-color);
+    --button-count-bg-color: var(--button-text-default-count-bg-color);
     --button-hover-bg-color: var(--button-text-default-hover-bg-color);
     --button-active-bg-color: var(--button-text-default-active-bg-color);
     --button-disabled-text-color: var(--button-text-default-disabled-text-color);
@@ -636,6 +709,7 @@ function handleClick(): void {
 
   &.mute {
     --button-text-color: var(--button-text-mute-text-color);
+    --button-count-bg-color: var(--button-text-mute-count-bg-color);
     --button-hover-bg-color: var(--button-text-mute-hover-bg-color);
     --button-active-bg-color: var(--button-text-mute-active-bg-color);
     --button-disabled-text-color: var(--button-text-mute-disabled-text-color);
@@ -643,6 +717,7 @@ function handleClick(): void {
 
   &.neutral {
     --button-text-color: var(--button-text-neutral-text-color);
+    --button-count-bg-color: var(--button-text-neutral-count-bg-color);
     --button-hover-bg-color: var(--button-text-neutral-hover-bg-color);
     --button-active-bg-color: var(--button-text-neutral-active-bg-color);
     --button-disabled-text-color: var(--button-text-neutral-disabled-text-color);
@@ -650,6 +725,7 @@ function handleClick(): void {
 
   &.white {
     --button-text-color: var(--button-text-white-text-color);
+    --button-count-bg-color: var(--button-text-white-count-bg-color);
     --button-hover-bg-color: var(--button-text-white-hover-bg-color);
     --button-active-bg-color: var(--button-text-white-active-bg-color);
     --button-disabled-text-color: var(--button-text-white-disabled-text-color);
@@ -657,6 +733,7 @@ function handleClick(): void {
 
   &.black {
     --button-text-color: var(--button-text-black-text-color);
+    --button-count-bg-color: var(--button-text-black-count-bg-color);
     --button-hover-bg-color: var(--button-text-black-hover-bg-color);
     --button-active-bg-color: var(--button-text-black-active-bg-color);
     --button-disabled-text-color: var(--button-text-black-disabled-text-color);
@@ -664,6 +741,7 @@ function handleClick(): void {
 
   &.info {
     --button-text-color: var(--button-text-info-text-color);
+    --button-count-bg-color: var(--button-text-info-count-bg-color);
     --button-hover-bg-color: var(--button-text-info-hover-bg-color);
     --button-active-bg-color: var(--button-text-info-active-bg-color);
     --button-disabled-text-color: var(--button-text-info-disabled-text-color);
@@ -671,6 +749,7 @@ function handleClick(): void {
 
   &.success {
     --button-text-color: var(--button-text-success-text-color);
+    --button-count-bg-color: var(--button-text-success-count-bg-color);
     --button-hover-bg-color: var(--button-text-success-hover-bg-color);
     --button-active-bg-color: var(--button-text-success-active-bg-color);
     --button-disabled-text-color: var(--button-text-success-disabled-text-color);
@@ -678,6 +757,7 @@ function handleClick(): void {
 
   &.warning {
     --button-text-color: var(--button-text-warning-text-color);
+    --button-count-bg-color: var(--button-text-warning-count-bg-color);
     --button-hover-bg-color: var(--button-text-warning-hover-bg-color);
     --button-active-bg-color: var(--button-text-warning-active-bg-color);
     --button-disabled-text-color: var(--button-text-warning-disabled-text-color);
@@ -685,6 +765,7 @@ function handleClick(): void {
 
   &.danger {
     --button-text-color: var(--button-text-danger-text-color);
+    --button-count-bg-color: var(--button-text-danger-count-bg-color);
     --button-hover-bg-color: var(--button-text-danger-hover-bg-color);
     --button-active-bg-color: var(--button-text-danger-active-bg-color);
     --button-disabled-text-color: var(--button-text-danger-disabled-text-color);

package/lib/components/SChartBar.vue

@@ -124,10 +124,12 @@ function renderChart({
     .range(vertical ? [0, width] : [0, height])
     .padding(0.4)
 
-  // Y scale for bar values
+  // Y scale for bar values, including negative values
+  const minValue = d3.min(props.data, (d) => d.value)!
+  const maxValue = d3.max(props.data, (d) => d.value)!
   const y = d3
     .scaleLinear()
-    .domain([0, d3.max(props.data, (d) => d.value)!])
+    .domain([Math.min(0, minValue), Math.max(0, maxValue)])
     .nice()
     .range(vertical ? [height, 0] : [0, width])
 
@@ -137,6 +139,9 @@ function renderChart({
   const bandwidth = Math.min(paddedScale.bandwidth(), props.maxBandwidth)
   const innerOffset = (paddedScale.bandwidth() - bandwidth) / 2
 
+  // Baseline coordinate for zero value
+  const y0 = y(0)
+
   // For the axes, use the paddedScale so ticks remain centered on the bars.
   svg
     .append('g')
@@ -241,24 +246,24 @@ function renderChart({
     if (vertical) {
       outerBars
         .attr('x', 0)
-        .attr('y', (d) => Math.max(0, y(d.value) - heightPadding))
+        .attr('y', (d) => Math.min(y(d.value), y0) - (d.value >= 0 ? heightPadding : 0))
         .attr('width', paddedScale.step())
-        .attr('height', (d) => height - Math.max(0, y(d.value) - heightPadding))
+        .attr('height', (d) => Math.abs(y(d.value) - y0) + heightPadding)
       bars
         .attr('x', groupOffset + innerOffset)
-        .attr('y', (d) => y(d.value))
+        .attr('y', (d) => (d.value >= 0 ? y(d.value) : y0))
         .attr('width', bandwidth)
-        .attr('height', (d) => height - y(d.value))
+        .attr('height', (d) => Math.abs(y(d.value) - y0))
     } else {
       outerBars
-        .attr('x', 0)
+        .attr('x', (d) => Math.min(y(d.value), y0) - (d.value >= 0 ? 0 : heightPadding))
         .attr('y', 0)
-        .attr('width', (d) => Math.min(width, y(d.value) + heightPadding))
+        .attr('width', (d) => Math.abs(y(d.value) - y0) + heightPadding)
         .attr('height', paddedScale.step())
       bars
-        .attr('x', 0)
+        .attr('x', (d) => (d.value >= 0 ? y0 : y(d.value)))
         .attr('y', groupOffset + innerOffset)
-        .attr('width', (d) => y(d.value))
+        .attr('width', (d) => Math.abs(y(d.value) - y0))
         .attr('height', bandwidth)
     }
   } else {
@@ -266,43 +271,45 @@ function renderChart({
     if (vertical) {
       outerBars
         .attr('x', 0)
-        .attr('y', height)
+        .attr('y', y0)
         .attr('width', paddedScale.step())
         .attr('height', 0)
         .transition()
         .duration(800)
         .delay((_, i) => i * 100)
-        .attr('y', (d) => Math.max(0, y(d.value) - heightPadding))
-        .attr('height', (d) => height - Math.max(0, y(d.value) - heightPadding))
+        .attr('y', (d) => Math.min(y(d.value), y0) - (d.value >= 0 ? heightPadding : 0))
+        .attr('height', (d) => Math.abs(y(d.value) - y0) + heightPadding)
       bars
         .attr('x', groupOffset + innerOffset)
-        .attr('y', height)
+        .attr('y', y0)
         .attr('width', bandwidth)
         .attr('height', 0)
         .transition()
         .duration(800)
         .delay((_, i) => i * 100)
-        .attr('y', (d) => y(d.value))
-        .attr('height', (d) => height - y(d.value))
+        .attr('y', (d) => (d.value >= 0 ? y(d.value) : y0))
+        .attr('height', (d) => Math.abs(y(d.value) - y0))
     } else {
       outerBars
-        .attr('x', 0)
+        .attr('x', y0)
         .attr('y', 0)
         .attr('width', 0)
         .attr('height', paddedScale.step())
         .transition()
         .duration(800)
         .delay((_, i) => i * 100)
-        .attr('width', (d) => Math.min(width, y(d.value) + heightPadding))
+        .attr('x', (d) => Math.min(y(d.value), y0) - (d.value >= 0 ? 0 : heightPadding))
+        .attr('width', (d) => Math.abs(y(d.value) - y0) + heightPadding)
       bars
-        .attr('x', 0)
+        .attr('x', y0)
         .attr('y', groupOffset + innerOffset)
         .attr('width', 0)
         .attr('height', bandwidth)
         .transition()
         .duration(800)
         .delay((_, i) => i * 100)
-        .attr('width', (d) => y(d.value))
+        .attr('x', (d) => (d.value >= 0 ? y0 : y(d.value)))
+        .attr('width', (d) => Math.abs(y(d.value) - y0))
     }
   }
 
@@ -389,6 +396,7 @@ watch(
   position: absolute;
   top: 0;
   left: 0;
+  z-index: 1;
   padding: 2px 8px;
   background-color: var(--c-bg-elv-2);
   border: 1px solid var(--c-divider);

package/lib/components/SChartPie.vue

@@ -370,6 +370,7 @@ watch(
   position: absolute;
   top: 0;
   left: 0;
+  z-index: 1;
   padding: 2px 8px;
   background-color: var(--c-bg-elv-2);
   border: 1px solid var(--c-divider);

package/lib/components/SInputDropdown.vue

@@ -2,17 +2,23 @@
 import IconCaretDown from '~icons/ph/caret-down'
 import IconCaretUp from '~icons/ph/caret-up'
 import xor from 'lodash-es/xor'
-import { type Component, computed, ref } from 'vue'
+import { computed, ref } from 'vue'
 import { type DropdownSectionFilter, useManualDropdownPosition } from '../composables/Dropdown'
 import { useFlyout } from '../composables/Flyout'
 import { useTrans } from '../composables/Lang'
-import { type Validatable } from '../composables/Validation'
 import SDropdown from './SDropdown.vue'
-import SInputBase from './SInputBase.vue'
+import SInputBase, { type Props as BaseProps } from './SInputBase.vue'
 import SInputDropdownItem from './SInputDropdownItem.vue'
 
-export type Size = 'mini' | 'small' | 'medium'
-export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
+export interface Props extends BaseProps {
+  placeholder?: string
+  options: Option[]
+  position?: 'top' | 'bottom'
+  noSearch?: boolean
+  nullable?: boolean
+  closeOnClick?: boolean
+  disabled?: boolean
+}
 
 export type PrimitiveValue = any
 export type ArrayValue = any[]
@@ -37,24 +43,7 @@ export interface OptionAvatar extends OptionBase {
   image?: string | null
 }
 
-const props = defineProps<{
-  size?: Size
-  label?: string
-  info?: string
-  note?: string
-  help?: string
-  placeholder?: string
-  checkIcon?: Component
-  checkText?: string
-  checkColor?: Color
-  options: Option[]
-  position?: 'top' | 'bottom'
-  noSearch?: boolean
-  nullable?: boolean
-  closeOnClick?: boolean
-  disabled?: boolean
-  validation?: Validatable
-}>()
+const props = defineProps<Props>()
 
 const model = defineModel<PrimitiveValue | ArrayValue>({ required: true })
 
@@ -67,10 +56,10 @@ const { t } = useTrans({
   }
 })
 
-const container = ref<any>(null)
+const container = ref<HTMLDivElement>()
 
 const { isOpen, open } = useFlyout(container)
-const { position, update: updatePosition } = useManualDropdownPosition(container)
+const { inset, update: updatePosition } = useManualDropdownPosition(container, () => props.position)
 
 const classes = computed(() => [
   props.size ?? 'small',
@@ -143,6 +132,7 @@ function handleArray(value: OptionValue) {
   <SInputBase
     class="SInputDropdown"
     :class="classes"
+    :size
     :label
     :note
     :info
@@ -181,8 +171,10 @@ function handleArray(value: OptionValue) {
         </div>
       </div>
 
-      <div v-if="isOpen" class="dropdown" :class="position">
-        <SDropdown :sections="dropdownOptions" />
+      <div v-if="isOpen" class="dropdown" :style="inset">
+        <div class="dropdown-content">
+          <SDropdown :sections="dropdownOptions" />
+        </div>
       </div>
     </div>
     <template v-if="$slots.info" #info><slot name="info" /></template>
@@ -244,12 +236,8 @@ function handleArray(value: OptionValue) {
 }
 
 .dropdown {
-  position: absolute;
-  left: 0;
+  position: fixed;
   z-index: var(--z-index-dropdown);
-
-  &.top    { bottom: calc(100% + 8px); }
-  &.bottom { top: calc(100% + 8px); }
 }
 
 .SInputDropdown.mini {

package/lib/components/SInputHMS.vue

@@ -1,10 +1,16 @@
 <script setup lang="ts">
-import { type Component, computed, ref } from 'vue'
-import { type Validatable } from '../composables/Validation'
-import SInputBase from './SInputBase.vue'
+import { computed, ref } from 'vue'
+import SInputBase, { type Props as BaseProps } from './SInputBase.vue'
 
-export type Size = 'mini' | 'small' | 'medium'
-export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
+export interface Props extends BaseProps {
+  placeholder?: Placeholder
+  noHour?: boolean
+  noMinute?: boolean
+  noSecond?: boolean
+  disabled?: boolean
+  value?: Value
+  modelValue?: Value
+}
 
 export interface Value {
   hour: string | null
@@ -20,25 +26,7 @@ export interface Placeholder {
 
 export type ValueType = 'hour' | 'minute' | 'second'
 
-const props = defineProps<{
-  size?: Size
-  label?: string
-  info?: string
-  note?: string
-  help?: string
-  placeholder?: Placeholder
-  checkIcon?: Component
-  checkText?: string
-  checkColor?: Color
-  noHour?: boolean
-  noMinute?: boolean
-  noSecond?: boolean
-  disabled?: boolean
-  value?: Value
-  modelValue?: Value
-  validation?: Validatable
-  hideError?: boolean
-}>()
+const props = defineProps<Props>()
 
 const emit = defineEmits<{
   'update:model-value': [value: Value]
@@ -144,6 +132,7 @@ function createRequiredTouched(): boolean[] {
   <SInputBase
     class="SInputHMS"
     :class="[size ?? 'small', { disabled }]"
+    :size
     :label
     :note
     :info

package/lib/components/SInputYMD.vue

@@ -1,10 +1,17 @@
 <script setup lang="ts">
-import { type Component, computed, ref } from 'vue'
-import { type Validatable } from '../composables/Validation'
-import SInputBase from './SInputBase.vue'
+import { computed, ref } from 'vue'
+import SInputBase, { type Props as BaseProps } from './SInputBase.vue'
 
-export type Size = 'mini' | 'small' | 'medium'
-export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
+export interface Props extends BaseProps {
+  placeholder?: Placeholder
+  noYear?: boolean
+  noMonth?: boolean
+  noDate?: boolean
+  block?: boolean
+  disabled?: boolean
+  value?: Value
+  modelValue?: Value
+}
 
 export interface Value {
   year: number | null
@@ -20,26 +27,7 @@ export interface Placeholder {
   date?: number
 }
 
-const props = defineProps<{
-  size?: Size
-  label?: string
-  info?: string
-  note?: string
-  help?: string
-  placeholder?: Placeholder
-  checkIcon?: Component
-  checkText?: string
-  checkColor?: Color
-  noYear?: boolean
-  noMonth?: boolean
-  noDate?: boolean
-  block?: boolean
-  disabled?: boolean
-  value?: Value
-  modelValue?: Value
-  validation?: Validatable
-  hideError?: boolean
-}>()
+const props = defineProps<Props>()
 
 const emit = defineEmits<{
   'update:model-value': [value: Value]
@@ -143,6 +131,7 @@ function createRequiredTouched(): boolean[] {
   <SInputBase
     class="SInputYMD"
     :class="[size ?? 'small', { disabled }]"
+    :size
     :label
     :note
     :info

package/lib/composables/Dropdown.ts

@@ -1,5 +1,5 @@
 import { useElementBounding, useWindowSize } from '@vueuse/core'
-import { type Component, type MaybeRef, type MaybeRefOrGetter, type Ref, ref, unref } from 'vue'
+import { type Component, type MaybeRef, type MaybeRefOrGetter, type Ref, computed, ref, toValue, unref } from 'vue'
 import { type ActionList } from '../components/SActionList.vue'
 import { type DateRange } from '../support/DateRange'
 
@@ -83,6 +83,7 @@ export interface DropdownSectionComponent extends DropdownSectionBase {
 export interface ManualDropdownPosition {
   container: Ref<any>
   position: Ref<'top' | 'bottom'>
+  inset: Ref<{ top?: string; right?: string; bottom?: string; left?: string; transform?: string }>
   update(): void
 }
 
@@ -122,19 +123,20 @@ export function createDropdownComponent(
 
 export function useManualDropdownPosition(
   container?: Ref<any>,
-  initPosition?: 'top' | 'bottom'
+  override?: MaybeRefOrGetter<'top' | 'bottom' | undefined>
 ): ManualDropdownPosition {
   const el = container ?? ref<any>(null)
 
-  const { top, bottom } = useElementBounding(el)
+  const { top, bottom, left } = useElementBounding(el)
   const { height } = useWindowSize()
 
-  const position = ref<'top' | 'bottom'>(initPosition ?? 'bottom')
-
+  const position = ref<'top' | 'bottom'>(toValue(override) ?? 'bottom')
   const dialogHeight = 400
 
   function update(): void {
-    if (initPosition) {
+    const overrideValue = toValue(override)
+    if (overrideValue) {
+      position.value = overrideValue
       return
     }
 
@@ -154,9 +156,25 @@ export function useManualDropdownPosition(
     position.value = 'top'
   }
 
+  const inset = computed(() => {
+    if (position.value === 'top') {
+      return {
+        top: `${top.value - 8}px`,
+        left: `${left.value}px`,
+        transform: 'translateY(-100%)'
+      }
+    }
+
+    return {
+      top: `${bottom.value + 8}px`,
+      left: `${left.value}px`
+    }
+  })
+
   return {
     container: el,
     position,
+    inset,
     update
   }
 }

package/lib/styles/utilities.css

@@ -51,6 +51,7 @@
 .s-gap-8  { gap: 8px; }
 .s-gap-12 { gap: 12px; }
 .s-gap-16 { gap: 16px; }
+.s-gap-24 { gap: 24px; }
 
 .s-order-1  { order: 1; }
 .s-order-2  { order: 2; }

package/lib/styles/variables.css

@@ -428,6 +428,7 @@
   --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-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-hover-text-color: var(--c-text-1);
@@ -444,6 +445,8 @@
   --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-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-hover-text-color: var(--c-text-2);
@@ -461,6 +464,7 @@
   --button-fill-neutral-content-color: var(--c-text-1);
   --button-fill-neutral-bg-color: var(--c-neutral-1);
   --button-fill-neutral-loader-color: var(--c-neutral-inverse-1);
+  --button-fill-neutral-count-bg-color: var(--c-neutral-2);
   --button-fill-neutral-hover-border-color: transparent;
   --button-fill-neutral-hover-text-color: var(--c-text-inverse-1);
   --button-fill-neutral-hover-bg-color: var(--c-neutral-2);
@@ -477,6 +481,7 @@
   --button-fill-white-content-color: var(--c-text-dark-1);
   --button-fill-white-bg-color: var(--c-neutral-dark-1);
   --button-fill-white-loader-color: var(--c-neutral-light-1);
+  --button-fill-white-count-bg-color: var(--c-neutral-dark-2);
   --button-fill-white-hover-border-color: transparent;
   --button-fill-white-hover-text-color: var(--c-text-light-1);
   --button-fill-white-hover-bg-color: var(--c-neutral-dark-2);
@@ -493,6 +498,7 @@
   --button-fill-black-content-color: var(--c-text-light-1);
   --button-fill-black-bg-color: var(--c-neutral-light-1);
   --button-fill-black-loader-color: var(--c-neutral-dark-1);
+  --button-fill-black-count-bg-color: var(--c-neutral-light-2);
   --button-fill-black-hover-border-color: transparent;
   --button-fill-black-hover-text-color: var(--c-text-dark-1);
   --button-fill-black-hover-bg-color: var(--c-neutral-light-2);
@@ -509,6 +515,7 @@
   --button-fill-info-content-color: var(--c-white-1);
   --button-fill-info-bg-color: var(--c-bg-info-1);
   --button-fill-info-loader-color: var(--c-white-1);
+  --button-fill-info-count-bg-color: var(--c-blue-8);
   --button-fill-info-hover-border-color: var(--c-border-info-2);
   --button-fill-info-hover-text-color: var(--c-white-1);
   --button-fill-info-hover-bg-color: var(--c-bg-info-2);
@@ -525,6 +532,7 @@
   --button-fill-success-content-color: var(--c-white-1);
   --button-fill-success-bg-color: var(--c-bg-success-1);
   --button-fill-success-loader-color: var(--c-white);
+  --button-fill-success-count-bg-color: var(--c-green-8);
   --button-fill-success-hover-border-color: var(--c-border-success-2);
   --button-fill-success-hover-text-color: var(--c-white);
   --button-fill-success-hover-bg-color: var(--c-bg-success-2);
@@ -541,6 +549,7 @@
   --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);
@@ -557,6 +566,7 @@
   --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);
@@ -572,6 +582,7 @@
   --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);
@@ -582,6 +593,7 @@
   --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);
@@ -592,6 +604,7 @@
   --button-outline-neutral-text-color: var(--c-text-1);
   --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);
@@ -602,6 +615,7 @@
   --button-outline-white-text-color: var(--c-text-dark-1);
   --button-outline-white-content-color: var(--c-text-dark-1);
   --button-outline-white-loader-color: var(--c-neutral-dark-1);
+  --button-outline-white-count-bg-color: var(--c-bg-mute-1);
   --button-outline-white-hover-bg-color: var(--c-neutral-dark-dimm-a1);
   --button-outline-white-active-bg-color: var(--c-neutral-dark-dimm-a2);
   --button-outline-white-disabled-border-color: var(--c-neutral-dark-3);
@@ -612,6 +626,7 @@
   --button-outline-black-text-color: var(--c-text-light-1);
   --button-outline-black-content-color: var(--c-text-light-1);
   --button-outline-black-loader-color: var(--c-neutral-light-1);
+  --button-outline-black-count-bg-color: var(--c-bg-mute-1);
   --button-outline-black-hover-bg-color: var(--c-neutral-light-dimm-a1);
   --button-outline-black-active-bg-color: var(--c-neutral-light-dimm-a2);
   --button-outline-black-disabled-border-color: var(--c-neutral-light-3);
@@ -622,6 +637,7 @@
   --button-outline-info-text-color: var(--c-text-info-1);
   --button-outline-info-content-color: var(--c-text-info-1);
   --button-outline-info-loader-color: var(--c-neutral-1);
+  --button-outline-info-count-bg-color: var(--c-bg-info-dimm-a2);
   --button-outline-info-hover-bg-color: var(--c-bg-info-dimm-a1);
   --button-outline-info-active-bg-color: var(--c-bg-info-dimm-a2);
   --button-outline-info-disabled-border-color: var(--c-blue-8);
@@ -632,6 +648,7 @@
   --button-outline-success-text-color: var(--c-text-success-1);
   --button-outline-success-content-color: var(--c-text-success-1);
   --button-outline-success-loader-color: var(--c-neutral-1);
+  --button-outline-success-count-bg-color: var(--c-bg-success-dimm-a2);
   --button-outline-success-hover-bg-color: var(--c-bg-success-dimm-a1);
   --button-outline-success-active-bg-color: var(--c-bg-success-dimm-a2);
   --button-outline-success-disabled-border-color: var(--c-green-8);
@@ -642,6 +659,7 @@
   --button-outline-warning-text-color: var(--c-text-warning-1);
   --button-outline-warning-content-color: var(--c-text-warning-1);
   --button-outline-warning-loader-color: var(--c-neutral-1);
+  --button-outline-warning-count-bg-color: var(--c-bg-warning-dimm-a2);
   --button-outline-warning-hover-bg-color: var(--c-bg-warning-dimm-a1);
   --button-outline-warning-active-bg-color: var(--c-bg-warning-dimm-a2);
   --button-outline-warning-disabled-border-color: var(--c-yellow-8);
@@ -652,6 +670,7 @@
   --button-outline-danger-text-color: var(--c-text-danger-1);
   --button-outline-danger-content-color: var(--c-text-danger-1);
   --button-outline-danger-loader-color: var(--c-neutral-1);
+  --button-outline-danger-count-bg-color: var(--c-bg-danger-dimm-a2);
   --button-outline-danger-hover-bg-color: var(--c-bg-danger-dimm-a1);
   --button-outline-danger-active-bg-color: var(--c-bg-danger-dimm-a2);
   --button-outline-danger-disabled-border-color: var(--c-red-8);
@@ -660,6 +679,7 @@
 
   --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-disabled-text-color: var(--c-text-3);
@@ -667,6 +687,7 @@
 
   --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-disabled-text-color: var(--c-text-3);
@@ -674,6 +695,7 @@
 
   --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-disabled-text-color: var(--c-text-3);
@@ -681,6 +703,7 @@
 
   --button-text-white-text-color: var(--c-text-dark-1);
   --button-text-white-content-color: var(--c-text-dark-1);
+  --button-text-white-count-bg-color: var(--c-bg-mute-1);
   --button-text-white-hover-bg-color: var(--c-neutral-dark-dimm-a1);
   --button-text-white-active-bg-color: var(--c-neutral-dark-dimm-a2);
   --button-text-white-disabled-text-color: var(--c-text-dark-3);
@@ -688,6 +711,7 @@
 
   --button-text-black-text-color: var(--c-text-light-1);
   --button-text-black-content-color: var(--c-text-light-1);
+  --button-text-black-count-bg-color: var(--c-bg-mute-1);
   --button-text-black-hover-bg-color: var(--c-neutral-light-dimm-a1);
   --button-text-black-active-bg-color: var(--c-neutral-light-dimm-a2);
   --button-text-black-disabled-text-color: var(--c-text-light-3);
@@ -695,6 +719,7 @@
 
   --button-text-info-text-color: var(--c-text-info-1);
   --button-text-info-content-color: var(--c-text-info-1);
+  --button-text-info-count-bg-color: var(--c-bg-info-dimm-a2);
   --button-text-info-hover-bg-color: var(--c-bg-info-dimm-a1);
   --button-text-info-active-bg-color: var(--c-bg-info-dimm-a2);
   --button-text-info-disabled-text-color: var(--c-text-info-3);
@@ -702,6 +727,7 @@
 
   --button-text-success-text-color: var(--c-text-success-1);
   --button-text-success-content-color: var(--c-text-success-1);
+  --button-text-success-count-bg-color: var(--c-bg-success-dimm-a2);
   --button-text-success-hover-bg-color: var(--c-bg-success-dimm-a1);
   --button-text-success-active-bg-color: var(--c-bg-success-dimm-a2);
   --button-text-success-disabled-text-color: var(--c-text-success-3);
@@ -709,6 +735,7 @@
 
   --button-text-warning-text-color: var(--c-text-warning-1);
   --button-text-warning-content-color: var(--c-text-warning-1);
+  --button-text-warning-count-bg-color: var(--c-bg-warning-dimm-a2);
   --button-text-warning-hover-bg-color: var(--c-bg-warning-dimm-a1);
   --button-text-warning-active-bg-color: var(--c-bg-warning-dimm-a2);
   --button-text-warning-disabled-text-color: var(--c-text-warning-3);
@@ -716,6 +743,7 @@
 
   --button-text-danger-text-color: var(--c-text-danger-1);
   --button-text-danger-content-color: var(--c-text-danger-1);
+  --button-text-danger-count-bg-color: var(--c-bg-danger-dimm-a2);
   --button-text-danger-hover-bg-color: var(--c-bg-danger-dimm-a1);
   --button-text-danger-active-bg-color: var(--c-bg-danger-dimm-a2);
   --button-text-danger-disabled-text-color: var(--c-text-danger-3);

package/package.json

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