@youcan/celeste 0.6.48 → 0.6.50

package/dist/es/progress-bar.js

@@ -1,7 +1,7 @@
 import { defineComponent, useCssVars, computed, openBlock, createElementBlock, toDisplayString, createCommentVNode, createElementVNode, renderSlot, createTextVNode, createVNode, unref, mergeProps, withCtx } from "vue";
 import { useDelegatedProps } from "./use-delegated-props.js";
 import { c as clsx } from "./chunks/clsx.js";
-import { ap as By, aq as Iy } from "./chunks/index.js";
+import { at as By, au as Iy } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _hoisted_1 = ["data-layout"];
 const _hoisted_2 = {

package/dist/es/progress-circle.js

@@ -1,7 +1,7 @@
 import { defineComponent, useCssVars, computed, openBlock, createBlock, unref, mergeProps, withCtx, createVNode, createElementBlock, createElementVNode, renderSlot, createTextVNode, toDisplayString, createCommentVNode } from "vue";
 import { useDelegatedProps } from "./use-delegated-props.js";
 import { c as clsx } from "./chunks/clsx.js";
-import { ap as By, aq as Iy } from "./chunks/index.js";
+import { at as By, au as Iy } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _hoisted_1 = ["width", "height"];
 const _hoisted_2 = ["cx", "cy", "r"];

package/dist/es/radio-group-card.js

@@ -0,0 +1,111 @@
+import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, createElementBlock, normalizeClass, Fragment, createElementVNode, renderSlot, createCommentVNode, createVNode } from "vue";
+import { useDelegatedProps } from "./use-delegated-props.js";
+import { c as clsx } from "./chunks/clsx.js";
+import { X as Oh, l as O } from "./chunks/index.js";
+import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
+const _hoisted_1 = { class: "celeste-radio-card-content" };
+const _hoisted_2 = { role: "presentation" };
+const _hoisted_3 = {
+  role: "presentation",
+  class: "celeste-radio-card-row"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "radio-group-card",
+  props: {
+    for: {},
+    asChild: { type: Boolean },
+    as: {},
+    required: { type: Boolean },
+    disabled: { type: Boolean },
+    class: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const delegatedProps = useDelegatedProps(props, "class");
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Oh), mergeProps(unref(delegatedProps), {
+        "aria-required": _ctx.required,
+        "aria-disabled": _ctx.disabled,
+        class: unref(clsx)("celeste-radio-card", props.class, {
+          "celeste-radio-card-disabled": _ctx.disabled
+        })
+      }), {
+        default: withCtx(() => [
+          _ctx.$slots.image || _ctx.$slots.icon ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            role: "presentation",
+            class: normalizeClass(["celeste-radio-card-preview", [_ctx.$slots.image ? "celeste-radio-card-preview-image" : "celeste-radio-card-preview-icon"]])
+          }, [
+            _ctx.$slots.image ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+              _cache[0] || (_cache[0] = createElementVNode("i", {
+                class: "celeste-radio-card-preview-fallback",
+                "i-celeste-image-circle-fill": ""
+              }, null, -1)),
+              renderSlot(_ctx.$slots, "image", { class: "i-celeste-image-circle-fill?bg" }, void 0, true)
+            ], 64)) : _ctx.$slots.icon ? renderSlot(_ctx.$slots, "icon", { key: 1 }, void 0, true) : createCommentVNode("", true)
+          ], 2)) : createCommentVNode("", true),
+          createElementVNode("div", _hoisted_1, [
+            createElementVNode("div", _hoisted_2, [
+              createElementVNode("div", _hoisted_3, [
+                createVNode(unref(O), {
+                  as: "span",
+                  class: "celeste-radio-card-label"
+                }, {
+                  default: withCtx(() => [
+                    renderSlot(_ctx.$slots, "label", {}, void 0, true)
+                  ]),
+                  _: 3
+                }),
+                _ctx.$slots.sublabel ? (openBlock(), createBlock(unref(O), {
+                  key: 0,
+                  as: "span",
+                  class: "celeste-radio-card-sublabel"
+                }, {
+                  default: withCtx(() => [
+                    renderSlot(_ctx.$slots, "sublabel", {}, void 0, true)
+                  ]),
+                  _: 3
+                })) : createCommentVNode("", true),
+                _ctx.$slots.badge ? (openBlock(), createBlock(unref(O), {
+                  key: 1,
+                  "as-child": "",
+                  class: "celeste-radio-card-badge"
+                }, {
+                  default: withCtx(() => [
+                    renderSlot(_ctx.$slots, "badge", { disabled: _ctx.disabled }, void 0, true)
+                  ]),
+                  _: 3
+                })) : createCommentVNode("", true)
+              ])
+            ]),
+            _ctx.$slots.description ? (openBlock(), createBlock(unref(O), {
+              key: 0,
+              as: "span",
+              class: "celeste-radio-card-description"
+            }, {
+              default: withCtx(() => [
+                renderSlot(_ctx.$slots, "description", {}, void 0, true)
+              ]),
+              _: 3
+            })) : createCommentVNode("", true)
+          ]),
+          createVNode(unref(O), {
+            disabled: _ctx.disabled,
+            "as-child": "",
+            class: "celeste-radio-card-radio"
+          }, {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "default", {}, void 0, true)
+            ]),
+            _: 3
+          }, 8, ["disabled"])
+        ]),
+        _: 3
+      }, 16, ["aria-required", "aria-disabled", "class"]);
+    };
+  }
+});
+const radioGroupCard = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c0db864b"]]);
+export {
+  radioGroupCard as default
+};

package/dist/es/radio-group-label.js

@@ -0,0 +1,110 @@
+import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, createVNode, renderSlot, createElementVNode, createCommentVNode } from "vue";
+import { useDelegatedProps } from "./use-delegated-props.js";
+import { c as clsx } from "./chunks/clsx.js";
+import { X as Oh, l as O } from "./chunks/index.js";
+import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
+const _hoisted_1 = { role: "presentation" };
+const _hoisted_2 = {
+  role: "presentation",
+  class: "celeste-radio-label-row"
+};
+const _hoisted_3 = {
+  role: "presentation",
+  class: "celeste-radio-label-content"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "radio-group-label",
+  props: {
+    for: {},
+    asChild: { type: Boolean },
+    as: {},
+    required: { type: Boolean },
+    disabled: { type: Boolean },
+    class: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const delegatedProps = useDelegatedProps(props, "class");
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Oh), mergeProps(unref(delegatedProps), {
+        "aria-required": _ctx.required,
+        "aria-disabled": _ctx.disabled,
+        class: unref(clsx)("celeste-radio-label", props.class)
+      }), {
+        default: withCtx(() => [
+          createVNode(unref(O), {
+            "as-child": "",
+            class: "celeste-radio-label-radio"
+          }, {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "default", {}, void 0, true)
+            ]),
+            _: 3
+          }),
+          createElementVNode("div", _hoisted_1, [
+            createElementVNode("div", _hoisted_2, [
+              createElementVNode("div", null, [
+                createVNode(unref(O), {
+                  as: "span",
+                  class: "celeste-radio-label-label"
+                }, {
+                  default: withCtx(() => [
+                    renderSlot(_ctx.$slots, "label", {}, void 0, true)
+                  ]),
+                  _: 3
+                }),
+                _ctx.$slots.sublabel ? (openBlock(), createBlock(unref(O), {
+                  key: 0,
+                  as: "span",
+                  class: "celeste-radio-label-sublabel"
+                }, {
+                  default: withCtx(() => [
+                    renderSlot(_ctx.$slots, "sublabel", {}, void 0, true)
+                  ]),
+                  _: 3
+                })) : createCommentVNode("", true)
+              ]),
+              _ctx.$slots.badge ? (openBlock(), createBlock(unref(O), {
+                key: 0,
+                "as-child": "",
+                class: "celeste-radio-label-badge"
+              }, {
+                default: withCtx(() => [
+                  renderSlot(_ctx.$slots, "badge", {}, void 0, true)
+                ]),
+                _: 3
+              })) : createCommentVNode("", true)
+            ]),
+            createElementVNode("div", _hoisted_3, [
+              _ctx.$slots.description ? (openBlock(), createBlock(unref(O), {
+                key: 0,
+                as: "span",
+                class: "celeste-radio-label-description"
+              }, {
+                default: withCtx(() => [
+                  renderSlot(_ctx.$slots, "description", {}, void 0, true)
+                ]),
+                _: 3
+              })) : createCommentVNode("", true),
+              _ctx.$slots.linkButton ? (openBlock(), createBlock(unref(O), {
+                key: 1,
+                "as-child": "",
+                class: "celeste-radio-label-link-button"
+              }, {
+                default: withCtx(() => [
+                  renderSlot(_ctx.$slots, "linkButton", {}, void 0, true)
+                ]),
+                _: 3
+              })) : createCommentVNode("", true)
+            ])
+          ])
+        ]),
+        _: 3
+      }, 16, ["aria-required", "aria-disabled", "class"]);
+    };
+  }
+});
+const radioGroupLabel = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-32cb773e"]]);
+export {
+  radioGroupLabel as default
+};

package/dist/es/scroll-bar.js

@@ -1,6 +1,6 @@
 import { defineComponent, computed, openBlock, createBlock, unref, mergeProps, withCtx, createVNode } from "vue";
 import { c as clsx } from "./chunks/clsx.js";
-import { M as My, V as Vy } from "./chunks/index.js";
+import { U as My, V as Vy } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "scroll-bar",

package/dist/es/segmented-control-item.js

@@ -1,7 +1,7 @@
 import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from "vue";
 import { useDelegatedProps } from "./use-delegated-props.js";
 import { c as clsx } from "./chunks/clsx.js";
-import { J as sv } from "./chunks/index.js";
+import { S as sv } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "segmented-control-item",

package/dist/es/segmented-control.js

@@ -1,7 +1,7 @@
 import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from "vue";
 import { useDelegatedProps } from "./use-delegated-props.js";
 import { c as clsx } from "./chunks/clsx.js";
-import { x as xe, I as lv } from "./chunks/index.js";
+import { x as xe, P as lv } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "segmented-control",

package/dist/es/select-content.js

@@ -1,7 +1,7 @@
 import { defineComponent, openBlock, createBlock, unref, withCtx, createVNode, mergeProps, renderSlot } from "vue";
 import { useDelegatedProps } from "./use-delegated-props.js";
 import { c as clsx } from "./chunks/clsx.js";
-import { x as xe, ar as zy, as as Ky, at as Xy } from "./chunks/index.js";
+import { x as xe, av as zy, aw as Ky, ax as Xy } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "select-content",

package/dist/es/select-item.js

@@ -1,7 +1,7 @@
 import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, createVNode, renderSlot, createElementVNode } from "vue";
 import { useDelegatedProps } from "./use-delegated-props.js";
 import { c as clsx } from "./chunks/clsx.js";
-import { au as jy, av as Yy, aw as Uy } from "./chunks/index.js";
+import { ay as jy, az as Yy, aA as Uy } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "select-item",

package/dist/es/select-trigger.js

@@ -1,7 +1,7 @@
 import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot, createVNode, createElementVNode } from "vue";
 import { useDelegatedProps } from "./use-delegated-props.js";
 import { c as clsx } from "./chunks/clsx.js";
-import { ax as Ly, ay as eg } from "./chunks/index.js";
+import { aB as Ly, aC as eg } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "select-trigger",

package/dist/es/select-value.js

@@ -1,7 +1,7 @@
 import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from "vue";
 import { useDelegatedProps } from "./use-delegated-props.js";
 import { c as clsx } from "./chunks/clsx.js";
-import { az as Qy } from "./chunks/index.js";
+import { aD as Qy } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "select-value",

package/dist/es/social-button.js

@@ -1,6 +1,6 @@
 import { defineComponent, openBlock, createBlock, unref, normalizeClass, withCtx, createElementVNode, createElementBlock, toDisplayString, createCommentVNode } from "vue";
 import { c as clsx } from "./chunks/clsx.js";
-import { g as O } from "./chunks/index.js";
+import { l 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/tab-menu-content.js

@@ -1,7 +1,7 @@
 import { defineComponent, openBlock, createBlock, 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 { M as bg } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "tab-menu-content",

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

@@ -1,7 +1,7 @@
 import { defineComponent, openBlock, createBlock, 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, E as Cg } from "./chunks/index.js";
+import { A as At, L as Cg } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _hoisted_1 = {
   key: 0,

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

@@ -1,7 +1,7 @@
 import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from "vue";
 import { useDelegatedProps } from "./use-delegated-props.js";
 import { c as clsx } from "./chunks/clsx.js";
-import { D as gg } from "./chunks/index.js";
+import { J as gg } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "tab-menu-list",

package/dist/es/tab-menu.js

@@ -1,5 +1,5 @@
 import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from "vue";
-import { x as xe, C as yg } from "./chunks/index.js";
+import { x as xe, I as yg } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "tab-menu",

package/dist/es/tag.js

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

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 { uid } from "./crypto.js";
 import { c as clsx } from "./chunks/clsx.js";
-import { g as O } from "./chunks/index.js";
+import { l as O } from "./chunks/index.js";
 import TextInputButton from "./text-input-button.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _hoisted_1 = ["for", "size", "has-error"];

package/dist/es/tooltip.js

@@ -1,7 +1,7 @@
 import { defineComponent, ref, openBlock, createBlock, unref, withCtx, createVNode, mergeProps, renderSlot, createElementBlock, normalizeClass, createCommentVNode, createElementVNode, toDisplayString } from "vue";
 import CompactButton from "./compact-button.js";
 import { c as clsx } from "./chunks/clsx.js";
-import { x as xe, aA as Lg, aB as zg, aC as Kg, aD as jg, aE as Hg, aF as Wg } from "./chunks/index.js";
+import { x as xe, aE as Lg, aF as zg, aG as Kg, aH as jg, aI as Hg, aJ as Wg } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _hoisted_1 = { class: "celeste-tooltip-content-box" };
 const _hoisted_2 = {

package/package.json

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

package/src/components/counter-input/counter-input.vue

@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { useDelegatedProps } from '@/composables/use-delegated-props';
+import clsx from 'clsx';
+import { NumberFieldDecrement, NumberFieldIncrement, NumberFieldInput, NumberFieldRoot, type NumberFieldRootEmits, type NumberFieldRootProps, useForwardPropsEmits } from 'radix-vue';
+import CompactButton from '../button/compact-button.vue';
+
+const props = withDefaults(
+  defineProps<NumberFieldRootProps & {
+    class?: HTMLAttributes['class'];
+    size?: 'xs' | 'sm' | 'md';
+    hasError?: boolean;
+  }>(),
+  {
+    size: 'md',
+    defaultValue: 0,
+    hasError: false,
+  },
+);
+const emits = defineEmits<NumberFieldRootEmits>();
+
+const delegatedProps = useDelegatedProps(props, 'class');
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <NumberFieldRoot
+    v-bind="forwarded"
+    :has-error="hasError"
+    :class="clsx('celeste-counter-input-wrapper', props.class)"
+  >
+    <NumberFieldDecrement as-child class="celeste-counter-input-decrement">
+      <CompactButton variant="ghost" icon="i-celeste-subtract-line" />
+    </NumberFieldDecrement>
+    <NumberFieldInput class="celeste-counter-input" />
+    <NumberFieldIncrement as-child class="celeste-counter-input-increment">
+      <CompactButton variant="ghost" icon="i-celeste-add-line" />
+    </NumberFieldIncrement>
+  </NumberFieldRoot>
+</template>
+
+<style lang="scss">
+.celeste-counter-input-wrapper {
+  --celeste-counter-input-bg-color: var(--color-bg-white-0);
+  --celeste-counter-input-text-color: var(--color-text-strong-950);
+  --celeste-counter-input-drop-shadow: var(--shadow-regular-xs);
+  --celeste-counter-input-outline-color: transparent;
+  --celeste-counter-input-border-color: var(--color-stroke-soft-200);
+
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: var(--celeste-counter-input-height);
+  padding-inline: var(--celeste-counter-input-gap);
+  transition: all var(--animation-fast) ease-out;
+  border: 1px solid var(--celeste-counter-input-border-color);
+  border-radius: var(--celeste-counter-input-radius);
+  outline: 2px solid var(--celeste-counter-input-outline-color);
+  outline-offset: 2px;
+  background-color: var(--celeste-counter-input-bg-color);
+  box-shadow: var(--celeste-counter-input-drop-shadow);
+  color: var(--celeste-counter-input-text-color);
+  font: var(--paragraph-sm);
+  gap: var(--celeste-counter-input-gap);
+
+  &[size='xs'] {
+    --celeste-counter-input-gap: var(--spacing-4);
+    --celeste-counter-input-height: 30px;
+    --celeste-counter-input-radius: var(--radius-8);
+    --celeste-counter-input-padding: calc(var(--spacing-8) - var(--spacing-2));
+  }
+
+  &[size='sm'] {
+    --celeste-counter-input-gap: var(--spacing-6);
+    --celeste-counter-input-height: 34px;
+    --celeste-counter-input-radius: var(--radius-8);
+    --celeste-counter-input-padding: var(--spacing-8);
+  }
+
+  &[size='md'] {
+    --celeste-counter-input-gap: var(--spacing-8);
+    --celeste-counter-input-height: 38px;
+    --celeste-counter-input-radius: var(--radius-10);
+    --celeste-counter-input-padding: var(--spacing-8);
+  }
+
+  &[has-error='true'] {
+    --celeste-counter-input-border-color: var(--color-state-error-base);
+  }
+
+  & > .celeste-counter-input {
+    flex: 2;
+    height: 100%;
+    border: none;
+    outline: none;
+    background-color: transparent;
+    color: inherit;
+    text-align: center;
+  }
+
+  .celeste-counter-input-decrement:active,
+  .celeste-counter-input-increment:active {
+    background-color: var(--color-bg-weak-50);
+    color: var(--color-icon-strong-950);
+  }
+
+  &:has(.celeste-counter-input:focus) {
+    --celeste-counter-input-outline-color: var(--color-stroke-soft-200);
+    --celeste-counter-input-border-color: var(--color-stroke-strong-950);
+
+    &[has-error='true'] {
+      --celeste-counter-input-border-color: var(--color-state-error-base);
+      --celeste-counter-input-outline-color: var(--color-state-error-lighter);
+    }
+  }
+
+  &:has(.celeste-counter-input:disabled) {
+    --celeste-counter-input-bg-color: var(--color-bg-weak-50);
+    --celeste-counter-input-text-color: var(--color-text-disabled-300);
+    --celeste-counter-input-drop-shadow: none;
+    --celeste-counter-input-border-color: transparent;
+
+    pointer-events: none;
+  }
+
+  &:has(.celeste-counter-input:hover:not(:focus, :disabled)) {
+    --celeste-counter-input-border-color: transparent;
+    --celeste-counter-input-bg-color: var(--color-bg-weak-50);
+  }
+}
+</style>

package/src/components/counter-input/index.ts

@@ -0,0 +1,2 @@
+export * from './counter-input.vue';
+export { default as CounterInput } from './counter-input.vue';