@youcan/celeste 0.6.73 → 0.6.75

package/dist/es/sheet-footer.js

@@ -1,4 +1,4 @@
-import { defineComponent, openBlock, createElementBlock, normalizeClass, unref, renderSlot } from "vue";
+import { defineComponent, createElementBlock, openBlock, normalizeClass, unref, renderSlot } from "vue";
 import { c as clsx } from "./chunks/clsx.js";
 /* empty css                                                                    */
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";

package/dist/es/sheet-header.js

@@ -1,4 +1,4 @@
-import { defineComponent, openBlock, createElementBlock, normalizeClass, unref, renderSlot } from "vue";
+import { defineComponent, createElementBlock, openBlock, normalizeClass, unref, renderSlot } from "vue";
 import { c as clsx } from "./chunks/clsx.js";
 /* empty css                                                                    */
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";

package/dist/es/sheet-title.js

@@ -1,6 +1,6 @@
-import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from "vue";
+import { defineComponent, createBlock, openBlock, unref, mergeProps, withCtx, renderSlot } from "vue";
 import { c as clsx } from "./chunks/clsx.js";
-import { aj as Pu } from "./chunks/index.js";
+import { ag as Bu } from "./chunks/index.js";
 import { r as reactiveOmit } from "./chunks/index2.js";
 /* empty css                                                                   */
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
@@ -15,7 +15,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const props = __props;
     const delegatedProps = reactiveOmit(props, "class");
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(Pu), mergeProps({
+      return openBlock(), createBlock(unref(Bu), mergeProps({
         class: unref(clsx)("celeste-sheet-title", props.class)
       }, unref(delegatedProps)), {
         default: withCtx(() => [

package/dist/es/sidebar-group-content.js

@@ -1,4 +1,4 @@
-import { defineComponent, openBlock, createElementBlock, normalizeClass, unref, renderSlot } from "vue";
+import { defineComponent, createElementBlock, openBlock, normalizeClass, unref, renderSlot } from "vue";
 import { c as clsx } from "./chunks/clsx.js";
 /* empty css                                                                             */
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";

package/dist/es/sidebar-trigger.js

@@ -1,4 +1,4 @@
-import { defineComponent, openBlock, createBlock, normalizeClass, unref, withCtx, createElementVNode } from "vue";
+import { defineComponent, createBlock, openBlock, unref, normalizeClass, withCtx, createElementVNode } from "vue";
 import CompactButton from "./compact-button.js";
 import { useSidebar } from "./use-sidebar.js";
 import { c as clsx } from "./chunks/clsx.js";

package/dist/es/social-button.js

@@ -1,6 +1,6 @@
-import { defineComponent, openBlock, createBlock, unref, normalizeClass, withCtx, createElementVNode, createElementBlock, toDisplayString, createCommentVNode } from "vue";
+import { defineComponent, createBlock, openBlock, unref, normalizeClass, withCtx, createElementVNode, createElementBlock, createCommentVNode, toDisplayString } from "vue";
 import { c as clsx } from "./chunks/clsx.js";
-import { f as O } from "./chunks/index.js";
+import { h as O } from "./chunks/index.js";
 /* empty css                                                                     */
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _hoisted_1 = {

package/dist/es/sonner-alert.js

@@ -1,4 +1,4 @@
-import { defineComponent, openBlock, createBlock, unref, mergeProps, createSlots, withCtx, createTextVNode, toDisplayString } from "vue";
+import { defineComponent, createBlock, openBlock, unref, mergeProps, createSlots, withCtx, createTextVNode, toDisplayString } from "vue";
 import Alert from "./alert.js";
 /* empty css                                                                    */
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";

package/dist/es/status-badge.js

@@ -1,4 +1,4 @@
-import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, toDisplayString } from "vue";
+import { defineComponent, computed, createElementBlock, openBlock, normalizeClass, unref, createElementVNode, toDisplayString } from "vue";
 import { c as clsx } from "./chunks/clsx.js";
 /* empty css                                                                    */
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";

package/dist/es/tab-menu-content.js

@@ -1,7 +1,7 @@
-import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from "vue";
+import { defineComponent, createBlock, openBlock, unref, mergeProps, withCtx, renderSlot } from "vue";
 import { useDelegatedProps } from "./use-delegated-props.js";
 import { c as clsx } from "./chunks/clsx.js";
-import { H as bg } from "./chunks/index.js";
+import { A as _g } from "./chunks/index.js";
 /* empty css                                                                        */
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -17,7 +17,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const props = __props;
     const delegatedProps = useDelegatedProps(props, "class");
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(bg), mergeProps({
+      return openBlock(), createBlock(unref(_g), mergeProps({
         class: unref(clsx)("celeste-tab-menu-content", props.class)
       }, unref(delegatedProps)), {
         default: withCtx(() => [

package/dist/es/tab-menu-item.js

@@ -1,7 +1,7 @@
-import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot, createElementBlock, createCommentVNode } from "vue";
+import { defineComponent, createBlock, openBlock, unref, mergeProps, withCtx, renderSlot, createElementBlock, createCommentVNode } from "vue";
 import { useDelegatedProps } from "./use-delegated-props.js";
 import { c as clsx } from "./chunks/clsx.js";
-import { A as At, D as Cg } from "./chunks/index.js";
+import { O as Ot, z as xg } from "./chunks/index.js";
 /* empty css                                                                     */
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _hoisted_1 = {
@@ -20,9 +20,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     const delegatedProps = useDelegatedProps(props, "class");
-    const forwardedProps = At(delegatedProps);
+    const forwardedProps = Ot(delegatedProps);
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(Cg), mergeProps(unref(forwardedProps), {
+      return openBlock(), createBlock(unref(xg), mergeProps(unref(forwardedProps), {
         class: unref(clsx)(
           "celeste-tab-menu-item",
           props.class

package/dist/es/tab-menu-list.js

@@ -1,7 +1,7 @@
-import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from "vue";
+import { defineComponent, createBlock, openBlock, unref, mergeProps, withCtx, renderSlot } from "vue";
 import { useDelegatedProps } from "./use-delegated-props.js";
 import { c as clsx } from "./chunks/clsx.js";
-import { C as gg } from "./chunks/index.js";
+import { y as wg } from "./chunks/index.js";
 /* empty css                                                                     */
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -16,7 +16,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const props = __props;
     const delegatedProps = useDelegatedProps(props, "class");
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(gg), mergeProps(unref(delegatedProps), {
+      return openBlock(), createBlock(unref(wg), mergeProps(unref(delegatedProps), {
         class: unref(clsx)(
           "celeste-tab-menu-list",
           props.class

package/dist/es/tab-menu.js

@@ -1,5 +1,5 @@
-import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from "vue";
-import { x as xe, B as yg } from "./chunks/index.js";
+import { defineComponent, createBlock, openBlock, unref, mergeProps, withCtx, renderSlot } from "vue";
+import { S as Se, x as Cg } from "./chunks/index.js";
 /* empty css                                                                */
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -17,9 +17,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emits = __emit;
-    const forwarded = xe(props, emits);
+    const forwarded = Se(props, emits);
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(yg), mergeProps(unref(forwarded), { class: "celeste-tab-menu-root" }), {
+      return openBlock(), createBlock(unref(Cg), mergeProps(unref(forwarded), { class: "celeste-tab-menu-root" }), {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default", {}, void 0, true)
         ]),

package/dist/es/table-body.js

@@ -1,4 +1,4 @@
-import { defineComponent, openBlock, createElementBlock, normalizeClass, unref, renderSlot } from "vue";
+import { defineComponent, createElementBlock, openBlock, normalizeClass, unref, renderSlot } from "vue";
 import { c as clsx } from "./chunks/clsx.js";
 /* empty css                                                                  */
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";

package/dist/es/table-caption.js

@@ -1,4 +1,4 @@
-import { defineComponent, openBlock, createElementBlock, normalizeClass, unref, renderSlot } from "vue";
+import { defineComponent, createElementBlock, openBlock, normalizeClass, unref, renderSlot } from "vue";
 import { c as clsx } from "./chunks/clsx.js";
 /* empty css                                                                     */
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";

package/dist/es/table-cell.js

@@ -1,4 +1,4 @@
-import { defineComponent, openBlock, createElementBlock, normalizeClass, unref, renderSlot } from "vue";
+import { defineComponent, createElementBlock, openBlock, normalizeClass, unref, renderSlot } from "vue";
 import { c as clsx } from "./chunks/clsx.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/es/table-empty.js

@@ -1,4 +1,4 @@
-import { defineComponent, openBlock, createBlock, unref, withCtx, createVNode, mergeProps, createElementVNode, renderSlot } from "vue";
+import { defineComponent, createBlock, openBlock, unref, withCtx, createVNode, mergeProps, createElementVNode, renderSlot } from "vue";
 import { c as clsx } from "./chunks/clsx.js";
 /* empty css                                                                  */
 /* empty css                                                                     */

package/dist/es/table-footer.js

@@ -1,4 +1,4 @@
-import { defineComponent, openBlock, createElementBlock, normalizeClass, unref, renderSlot } from "vue";
+import { defineComponent, createElementBlock, openBlock, normalizeClass, unref, renderSlot } from "vue";
 import { c as clsx } from "./chunks/clsx.js";
 /* empty css                                                                    */
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";

package/dist/es/table-head.js

@@ -1,4 +1,4 @@
-import { defineComponent, openBlock, createElementBlock, normalizeClass, unref, renderSlot } from "vue";
+import { defineComponent, createElementBlock, openBlock, normalizeClass, unref, renderSlot } from "vue";
 import { c as clsx } from "./chunks/clsx.js";
 /* empty css                                                                  */
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";

package/dist/es/table-header.js

@@ -1,4 +1,4 @@
-import { defineComponent, openBlock, createElementBlock, normalizeClass, unref, renderSlot } from "vue";
+import { defineComponent, createElementBlock, openBlock, normalizeClass, unref, renderSlot } from "vue";
 import { c as clsx } from "./chunks/clsx.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "table-header",

package/dist/es/table-row.js

@@ -1,4 +1,4 @@
-import { defineComponent, openBlock, createElementBlock, Fragment, createElementVNode, normalizeClass, unref, renderSlot } from "vue";
+import { defineComponent, createElementBlock, openBlock, Fragment, createElementVNode, normalizeClass, unref, renderSlot } from "vue";
 import { c as clsx } from "./chunks/clsx.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/es/table.js

@@ -1,4 +1,4 @@
-import { defineComponent, openBlock, createElementBlock, createElementVNode, normalizeClass, unref, renderSlot } from "vue";
+import { defineComponent, createElementBlock, openBlock, createElementVNode, normalizeClass, unref, renderSlot } from "vue";
 import { c as clsx } from "./chunks/clsx.js";
 /* empty css                                                             */
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";

package/dist/es/tag.js

@@ -1,6 +1,6 @@
-import { defineComponent, openBlock, createBlock, unref, normalizeClass, withCtx, renderSlot, createElementBlock, withModifiers, createElementVNode, createCommentVNode } from "vue";
+import { defineComponent, createBlock, openBlock, unref, normalizeClass, withCtx, renderSlot, createElementBlock, createCommentVNode, withModifiers, createElementVNode } from "vue";
 import { c as clsx } from "./chunks/clsx.js";
-import { f as O } from "./chunks/index.js";
+import { h as O } from "./chunks/index.js";
 /* empty css                                                           */
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _hoisted_1 = ["disabled"];

package/dist/es/text-input-affix.js

@@ -1,4 +1,4 @@
-import { defineComponent, openBlock, createElementBlock, mergeProps, unref, renderSlot } from "vue";
+import { defineComponent, createElementBlock, openBlock, mergeProps, unref, renderSlot } from "vue";
 import { useDelegatedProps } from "./use-delegated-props.js";
 import { c as clsx } from "./chunks/clsx.js";
 /* empty css                                                                        */

package/dist/es/text-input-button.js

@@ -1,4 +1,4 @@
-import { defineComponent, openBlock, createBlock, mergeProps, unref, withCtx, renderSlot } from "vue";
+import { defineComponent, createBlock, openBlock, mergeProps, unref, withCtx, renderSlot } from "vue";
 import Button from "./button.js";
 import { useDelegatedProps } from "./use-delegated-props.js";
 import { c as clsx } from "./chunks/clsx.js";

package/dist/es/text-input.js

@@ -1,7 +1,7 @@
-import { defineComponent, mergeModels, computed, useModel, openBlock, createElementBlock, normalizeClass, unref, createVNode, withCtx, renderSlot, withDirectives, createElementVNode, mergeProps, vModelDynamic, createBlock } from "vue";
+import { defineComponent, mergeModels, computed, useModel, createElementBlock, openBlock, normalizeClass, unref, createVNode, withDirectives, withCtx, renderSlot, createElementVNode, mergeProps, vModelDynamic, createBlock } from "vue";
 import { uid } from "./crypto.js";
 import { c as clsx } from "./chunks/clsx.js";
-import { f as O } from "./chunks/index.js";
+import { h as O } from "./chunks/index.js";
 import TextInputButton from "./text-input-button.js";
 /* empty css                                                                  */
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";

package/dist/es/textarea.js

@@ -1,4 +1,4 @@
-import { defineComponent, mergeModels, useModel, openBlock, createElementBlock, normalizeClass, unref, withDirectives, createElementVNode, mergeProps, vModelText, toDisplayString, createCommentVNode } from "vue";
+import { defineComponent, mergeModels, useModel, createElementBlock, openBlock, normalizeClass, unref, withDirectives, createCommentVNode, createElementVNode, mergeProps, vModelText, toDisplayString } from "vue";
 import { c as clsx } from "./chunks/clsx.js";
 /* empty css                                                                */
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";

package/dist/es/tooltip-content.js

@@ -1,8 +1,8 @@
-import { defineComponent, openBlock, createBlock, unref, withCtx, createVNode, mergeProps, createElementBlock, normalizeClass, createCommentVNode, createElementVNode, toDisplayString, renderSlot } from "vue";
+import { defineComponent, createBlock, openBlock, unref, withCtx, createVNode, mergeProps, createElementBlock, createCommentVNode, createElementVNode, normalizeClass, renderSlot, toDisplayString } from "vue";
 import CompactButton from "./compact-button.js";
 import { useDelegatedProps } from "./use-delegated-props.js";
 import { c as clsx } from "./chunks/clsx.js";
-import { x as xe, aI as jg, aJ as Hg, aK as Wg } from "./chunks/index.js";
+import { S as Se, aI as qg, aJ as Ug, aK as Gg } from "./chunks/index.js";
 /* empty css                                                                       */
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _hoisted_1 = { class: "celeste-tooltip-content-box" };
@@ -45,15 +45,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const props = __props;
     const emits = __emit;
     const delegated = useDelegatedProps(props, ["class", "size", "variant", "icon", "title", "description", "dismissible", "onDismiss"]);
-    const forwarded = xe(delegated, emits);
+    const forwarded = Se(delegated, emits);
     function handleDismiss() {
       var _a;
       (_a = props.onDismiss) == null ? void 0 : _a.call(props);
     }
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(jg), { class: "celeste-tooltip-portal" }, {
+      return openBlock(), createBlock(unref(qg), { class: "celeste-tooltip-portal" }, {
         default: withCtx(() => [
-          createVNode(unref(Hg), mergeProps(unref(forwarded), {
+          createVNode(unref(Ug), mergeProps(unref(forwarded), {
             size: _ctx.size,
             variant: _ctx.variant,
             class: unref(clsx)("celeste-tooltip-content", props.class)
@@ -74,7 +74,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 icon: "i-celeste-close-line",
                 onClick: handleDismiss
               })) : createCommentVNode("", true),
-              createVNode(unref(Wg), { "as-child": "" }, {
+              createVNode(unref(Gg), { "as-child": "" }, {
                 default: withCtx(() => _cache[0] || (_cache[0] = [
                   createElementVNode("span", { class: "celeste-tooltip-content-arrow" }, null, -1)
                 ])),
@@ -89,7 +89,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const TooltipContent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-14ac7b61"]]);
+const TooltipContent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-adcfc2c6"]]);
 export {
   TooltipContent as default
 };

package/dist/es/use-sidebar.js

@@ -1,11 +1,11 @@
-import { Q } from "./chunks/index.js";
+import { t as te } from "./chunks/index.js";
 const SIDEBAR_COOKIE_NAME = "sidebar_state";
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 const SIDEBAR_WIDTH = "17rem";
 const SIDEBAR_WIDTH_MOBILE = "18rem";
 const SIDEBAR_WIDTH_ICON = "52px";
 const SIDEBAR_KEYBOARD_SHORTCUT = "b";
-const [useSidebar, provideSidebarContext] = Q("Sidebar");
+const [useSidebar, provideSidebarContext] = te("Sidebar");
 export {
   SIDEBAR_COOKIE_MAX_AGE,
   SIDEBAR_COOKIE_NAME,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@youcan/celeste",
   "type": "module",
-  "version": "0.6.73",
+  "version": "0.6.75",
   "author": "YouCan <tech@youcan.shop>",
   "keywords": [
     "youcan",
@@ -44,8 +44,8 @@
     "radix-vue": "^1.9.17",
     "tinycolor2": "^1.6.0",
     "vue-sonner": "^2.0.9",
-    "@youcan/celeste-tokens": "0.6.73",
-    "@youcan/celeste-icons": "0.6.73"
+    "@youcan/celeste-icons": "0.6.75",
+    "@youcan/celeste-tokens": "0.6.75"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.3",

package/src/components/alert/alert.vue

@@ -197,7 +197,7 @@ $alert-states: ('error' 'feature' 'warning' 'success' 'information');
 .celeste-alert {
   display: flex;
   box-sizing: border-box;
-  align-items: start;
+  align-items: flex-start;
   width: 100%;
 
   &-inner {

package/src/components/badge/badge.vue

@@ -40,7 +40,7 @@ export interface BadgeProps {
   >
     <i v-if="type === 'dot'" class="dot i-celeste-dot" />
     <i v-if="type === 'leading-icon'" :class="icon" />
-    <span v-if="label">{{ label }}</span>
+    <span v-if="label" class="celeste-badge-label">{{ label }}</span>
     <i v-if="type === 'trailing-icon'" :class="icon" />
   </div>
 </template>
@@ -75,6 +75,10 @@ $states: faded, information, warning, error, success, away, feature, verified, h
     height: 16px;
   }
 
+  &-label {
+    flex-shrink: 0;
+  }
+
   &:has(i.dot) {
     gap: 0;
     padding-inline-start: var(--spacing-2);

package/src/components/hint-text/hint-text.vue

@@ -35,7 +35,7 @@ export interface HintTextProps {
 <style lang="scss" scoped>
 .celeste-hint-text {
   display: flex;
-  align-items: start;
+  align-items: flex-start;
   gap: var(--spacing-4);
   color: var(--color-text-sub-600);
   font: var(--paragraph-xs);

package/src/components/scroll-area/scroll-area.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { useDelegatedProps } from '@/composables';
 import clsx from 'clsx';
 import {
   ScrollAreaCorner,
@@ -6,24 +8,36 @@ import {
   type ScrollAreaRootProps,
   ScrollAreaViewport,
 } from 'radix-vue';
-import { computed, type HTMLAttributes } from 'vue';
 import ScrollBar from './scroll-bar.vue';
 
 const props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes['class'] }>();
 
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
-
-  return delegated;
-});
+const delegatedProps = useDelegatedProps(props, 'class');
 </script>
 
 <template>
-  <ScrollAreaRoot v-bind="delegatedProps" :class="clsx('relative overflow-hidden', props.class)">
-    <ScrollAreaViewport class="h-full w-full rounded-[inherit]">
+  <ScrollAreaRoot
+    v-bind="delegatedProps"
+    :class="clsx('celeste-scroll-area', props.class)"
+  >
+    <ScrollAreaViewport class="celeste-scroll-area-viewport">
       <slot />
     </ScrollAreaViewport>
     <ScrollBar />
+    <ScrollBar orientation="horizontal" />
     <ScrollAreaCorner />
   </ScrollAreaRoot>
 </template>
+
+<style scoped lang="scss">
+.celeste-scroll-area {
+  position: relative;
+  overflow: hidden;
+}
+
+:deep(.celeste-scroll-area-viewport) {
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+}
+</style>

package/src/components/scroll-area/scroll-bar.vue

@@ -1,36 +1,52 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { useDelegatedProps } from '@/composables';
 import clsx from 'clsx';
 import { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'radix-vue';
-import { computed, type HTMLAttributes } from 'vue';
 
 const props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes['class'] }>(), {
   orientation: 'vertical',
 });
 
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
-
-  return delegated;
-});
+const delegatedProps = useDelegatedProps(props, 'class');
 </script>
 
 <template>
   <ScrollAreaScrollbar
     v-bind="delegatedProps"
-    :class="
-      clsx('flex touch-none select-none transition-colors',
-           orientation === 'vertical'
-             && 'h-full w-1.5 border-l border-l-transparent p-px',
-           orientation === 'horizontal'
-             && 'h-1.5 flex-col border-t border-t-transparent p-px',
-           props.class)"
+    :class="clsx('celeste-scroll-bar', props.class)"
   >
-    <ScrollAreaThumb class="thumb relative flex-1 rounded-full" />
+    <ScrollAreaThumb class="celeste-scroll-bar-thumb" />
   </ScrollAreaScrollbar>
 </template>
 
-<style scoped>
-.thumb {
-  background-color: var(--color-bg-soft-200);
+<style scoped lang="scss">
+.celeste-scroll-bar {
+  --bar-size: 8px;
+
+  display: flex;
+  user-select: none;
+  touch-action: none;
+
+  &[data-orientation='vertical'] {
+    width: var(--bar-size);
+    height: 100%;
+    padding: var(--spacing-2);
+    border-inline-start: 1px solid transparent;
+  }
+
+  &[data-orientation='horizontal'] {
+    flex-direction: column;
+    height: var(--bar-size);
+    padding: var(--spacing-2);
+    border-block-start: 1px solid transparent;
+  }
+}
+
+.celeste-scroll-bar-thumb {
+  position: relative;
+  flex: 1;
+  border-radius: calc(infinity * 1px);
+  background-color: var(--color-bg-sub-300);
 }
 </style>