@youcan/celeste 0.20.0 → 0.21.1

package/ai/README.md

@@ -1,6 +1,6 @@
 # Celeste agent indexes
 
-Generated from source for `@youcan/celeste@0.20.0`. Do not edit.
+Generated from source for `@youcan/celeste@0.21.1`. Do not edit.
 
 - `component-registry.json` — every component's props, events, slots, story and usage example, and
   every exported helper such as `toast`

package/ai/component-registry.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": 1,
-  "version": "0.20.0",
-  "generatedAt": "2026-10-09T19:10:43.716Z",
+  "version": "0.21.1",
+  "generatedAt": "2026-10-13T22:26:38.580Z",
   "components": {
     "Alert": {
       "name": "Alert",
@@ -1335,6 +1335,10 @@
         }
       ],
       "slots": [
+        {
+          "name": "trigger",
+          "type": "{}"
+        },
         {
           "name": "swatches",
           "type": "{}"

package/ai/icons.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": 1,
-  "version": "0.20.0",
-  "generatedAt": "2026-10-09T19:10:38.848Z",
+  "version": "0.21.1",
+  "generatedAt": "2026-10-13T22:26:33.824Z",
   "prefix": "celeste",
   "icons": [
     {

package/ai/tokens.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": 1,
-  "version": "0.20.0",
-  "generatedAt": "2026-10-09T19:10:38.848Z",
+  "version": "0.21.1",
+  "generatedAt": "2026-10-13T22:26:33.824Z",
   "tokens": [
     {
       "name": "animation-extra-fast",

package/dist/celeste.css

@@ -2410,7 +2410,7 @@ to {
 .celeste-text-input-button[inline=true][data-v-d9fba798]:hover {
   background-color: transparent !important;
 }/* stylelint-disable no-descending-specificity */
-.celeste-text-input-wrapper[data-v-2139c861] {
+.celeste-text-input-wrapper[data-v-30491f95] {
   --celeste-text-input-border-color: var(--color-stroke-soft-200);
   --celeste-text-input-drop-shadow: var(--shadow-regular-xs);
   --celeste-text-input-icon-color: var(--color-text-sub-600);
@@ -2432,120 +2432,121 @@ to {
   font: var(--paragraph-sm);
   gap: var(--input-gap);
 }
-.celeste-text-input-wrapper[size=xs][data-v-2139c861] {
+.celeste-text-input-wrapper[size=xs][data-v-30491f95] {
   --input-gap: var(--spacing-6);
   --input-height: 32px;
   --input-radius: var(--radius-8);
   --input-padding: var(--spacing-8);
   --input-affix-padding: var(--spacing-10);
 }
-.celeste-text-input-wrapper[size=sm][data-v-2139c861] {
+.celeste-text-input-wrapper[size=sm][data-v-30491f95] {
   --input-gap: var(--spacing-8);
   --input-height: 36px;
   --input-radius: var(--radius-8);
   --input-padding: var(--spacing-10);
   --input-affix-padding: var(--spacing-10);
 }
-.celeste-text-input-wrapper[size=md][data-v-2139c861] {
+.celeste-text-input-wrapper[size=md][data-v-30491f95] {
   --input-gap: var(--spacing-8);
   --input-height: 40px;
   --input-radius: var(--radius-10);
   --input-padding: var(--spacing-12);
   --input-affix-padding: var(--spacing-12);
 }
-.celeste-text-input-wrapper[has-error=true][data-v-2139c861] {
+.celeste-text-input-wrapper[has-error=true][data-v-30491f95] {
   --celeste-text-input-border-color: var(--color-state-error-base);
 }
-.celeste-text-input-wrapper .celeste-text-input[data-v-2139c861] {
+.celeste-text-input-wrapper .celeste-text-input[data-v-30491f95] {
   width: 100%;
   height: 100%;
   padding: 0;
   border: none;
   outline: none;
   background-color: transparent;
+  box-shadow: none;
   color: inherit;
   font: inherit;
 }
-.celeste-text-input-wrapper .celeste-text-input[data-v-2139c861]::-moz-placeholder {
+.celeste-text-input-wrapper .celeste-text-input[data-v-30491f95]::-moz-placeholder {
   -moz-transition: color var(--animation-fast) ease-out;
   transition: color var(--animation-fast) ease-out;
   color: var(--celeste-text-input-placeholder-color);
 }
-.celeste-text-input-wrapper .celeste-text-input[data-v-2139c861]::placeholder {
+.celeste-text-input-wrapper .celeste-text-input[data-v-30491f95]::placeholder {
   transition: color var(--animation-fast) ease-out;
   color: var(--celeste-text-input-placeholder-color);
 }
-.celeste-text-input-wrapper .celeste-text-input[type=tel][data-v-2139c861] {
+.celeste-text-input-wrapper .celeste-text-input[type=tel][data-v-30491f95] {
   direction: ltr;
   text-align: -webkit-match-parent;
   text-align: match-parent;
 }
-.celeste-text-input-wrapper .celeste-text-input[type=search][data-v-2139c861]::-webkit-search-cancel-button {
+.celeste-text-input-wrapper .celeste-text-input[type=search][data-v-30491f95]::-webkit-search-cancel-button {
   display: none;
   -webkit-appearance: none;
           appearance: none;
 }
-.celeste-text-input-wrapper .celeste-text-input[type=search][data-v-2139c861]::-webkit-search-decoration {
+.celeste-text-input-wrapper .celeste-text-input[type=search][data-v-30491f95]::-webkit-search-decoration {
   display: none;
   -webkit-appearance: none;
           appearance: none;
 }
-.celeste-text-input-wrapper .celeste-text-input[type=date][data-v-2139c861]::-webkit-calendar-picker-indicator {
+.celeste-text-input-wrapper .celeste-text-input[type=date][data-v-30491f95]::-webkit-calendar-picker-indicator {
   display: none;
   -webkit-appearance: none;
           appearance: none;
 }
-.celeste-text-input-wrapper .celeste-text-input[type=date][data-v-2139c861]::-webkit-clear-button, .celeste-text-input-wrapper .celeste-text-input[type=date][data-v-2139c861]::-webkit-inner-spin-button {
+.celeste-text-input-wrapper .celeste-text-input[type=date][data-v-30491f95]::-webkit-clear-button, .celeste-text-input-wrapper .celeste-text-input[type=date][data-v-30491f95]::-webkit-inner-spin-button {
   display: none;
   -webkit-appearance: none;
           appearance: none;
 }
-.celeste-text-input-wrapper .celeste-text-input[type=date][data-v-2139c861]::-ms-clear, .celeste-text-input-wrapper .celeste-text-input[type=date][data-v-2139c861]::-ms-expand {
+.celeste-text-input-wrapper .celeste-text-input[type=date][data-v-30491f95]::-ms-clear, .celeste-text-input-wrapper .celeste-text-input[type=date][data-v-30491f95]::-ms-expand {
   display: none;
 }
-.celeste-text-input-wrapper[data-v-2139c861]:has(.celeste-text-input-leading-node) {
+.celeste-text-input-wrapper[data-v-30491f95]:has(.celeste-text-input-leading-node) {
   padding-inline-start: 0;
 }
-.celeste-text-input-wrapper[data-v-2139c861]:has(.celeste-text-input-trailing-node) {
+.celeste-text-input-wrapper[data-v-30491f95]:has(.celeste-text-input-trailing-node) {
   padding-inline-end: 0;
 }
-.celeste-text-input-wrapper[data-v-2139c861]:has(.celeste-text-input:-moz-placeholder) {
+.celeste-text-input-wrapper[data-v-30491f95]:has(.celeste-text-input:-moz-placeholder) {
   --celeste-text-input-icon-color: var(--color-text-soft-400);
   --celeste-text-input-affix-color: var(--color-text-soft-400);
 }
-.celeste-text-input-wrapper[data-v-2139c861]:has(.celeste-text-input:placeholder-shown) {
+.celeste-text-input-wrapper[data-v-30491f95]:has(.celeste-text-input:placeholder-shown) {
   --celeste-text-input-icon-color: var(--color-text-soft-400);
   --celeste-text-input-affix-color: var(--color-text-soft-400);
 }
-.celeste-text-input-wrapper[data-v-2139c861]:hover:not(:has(.celeste-text-input:focus)) {
+.celeste-text-input-wrapper[data-v-30491f95]:hover:not(:has(.celeste-text-input:focus)) {
   --celeste-text-input-drop-shadow: none;
 }
-.celeste-text-input-wrapper[data-v-2139c861]:hover:not(:has(.celeste-text-input:focus)):not([has-error=true], :has(.celeste-text-input-node)) {
+.celeste-text-input-wrapper[data-v-30491f95]:hover:not(:has(.celeste-text-input:focus)):not([has-error=true], :has(.celeste-text-input-node)) {
   --celeste-text-input-border-color: transparent;
 }
-.celeste-text-input-wrapper[data-v-2139c861]:hover:not(:has(.celeste-text-input:focus)):not(:has(.celeste-text-input-node:hover)) {
+.celeste-text-input-wrapper[data-v-30491f95]:hover:not(:has(.celeste-text-input:focus)):not(:has(.celeste-text-input-node:hover)) {
   --celeste-text-input-icon-color: var(--color-text-sub-600);
   --celeste-text-input-placeholder-color: var(--color-text-sub-600);
   background-color: var(--color-bg-weak-50);
 }
-.celeste-text-input-wrapper[data-v-2139c861]:has(.celeste-text-input:focus) {
+.celeste-text-input-wrapper[data-v-30491f95]:has(.celeste-text-input:focus) {
   --celeste-text-input-border-color: var(--color-stroke-strong-950);
   --celeste-text-input-drop-shadow: var(--shadow-buttons-important-focus);
   --celeste-text-input-placeholder-color: var(--color-text-sub-600);
   --celeste-text-input-icon-color: var(--color-text-sub-600);
   --celeste-text-input-affix-color: var(--color-text-sub-600);
 }
-.celeste-text-input-wrapper:has(.celeste-text-input:focus)[has-error=true][data-v-2139c861] {
+.celeste-text-input-wrapper:has(.celeste-text-input:focus)[has-error=true][data-v-30491f95] {
   --celeste-text-input-border-color: var(--color-state-error-base);
   --celeste-text-input-drop-shadow: var(--shadow-buttons-error-focus);
 }
-.celeste-text-input-wrapper[data-v-2139c861] input:-webkit-autofill {
+.celeste-text-input-wrapper[data-v-30491f95] input:-webkit-autofill {
   -webkit-transition: background-color 5000s ease-in-out 0s;
   transition: background-color 5000s ease-in-out 0s;
   -webkit-background-clip: text;
           background-clip: text;
 }
-.celeste-text-input-wrapper[data-v-2139c861]:has(.celeste-text-input:disabled) {
+.celeste-text-input-wrapper[data-v-30491f95]:has(.celeste-text-input:disabled) {
   --celeste-text-input-border-color: transparent;
   --celeste-text-input-drop-shadow: none;
   --celeste-text-input-affix-background-color: var(--color-bg-weak-50);
@@ -2557,24 +2558,24 @@ to {
   color: var(--color-text-disabled-300);
   pointer-events: none;
 }
-.celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input[data-v-2139c861]::-moz-placeholder {
+.celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input[data-v-30491f95]::-moz-placeholder {
   color: currentcolor;
 }
-.celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input[data-v-2139c861]::placeholder {
+.celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input[data-v-30491f95]::placeholder {
   color: currentcolor;
 }
-.celeste-text-input-wrapper .celeste-text-input-icon[data-v-2139c861] {
+.celeste-text-input-wrapper .celeste-text-input-icon[data-v-30491f95] {
   flex-shrink: 0;
   width: 20px;
   height: 20px;
   transition: all var(--animation-fast) ease-out;
   color: var(--celeste-text-input-icon-color);
 }
-.celeste-text-input-wrapper[data-v-2139c861] .celeste-text-input-node.celeste-text-input-leading-node,
-.celeste-text-input-wrapper[data-v-2139c861] .celeste-text-input-node.celeste-text-input-trailing-node {
+.celeste-text-input-wrapper[data-v-30491f95] .celeste-text-input-node.celeste-text-input-leading-node,
+.celeste-text-input-wrapper[data-v-30491f95] .celeste-text-input-node.celeste-text-input-trailing-node {
   height: calc(var(--input-height) - var(--spacing-2));
 }
-.celeste-text-input-wrapper[data-v-2139c861] .celeste-text-input-node.celeste-text-input-leading-node {
+.celeste-text-input-wrapper[data-v-30491f95] .celeste-text-input-node.celeste-text-input-leading-node {
   margin-inline-end: calc(var(--input-padding) - var(--input-gap));
   border-inline-end: 1px solid var(--color-stroke-soft-200);
   border-start-start-radius: var(--input-radius);
@@ -2582,7 +2583,7 @@ to {
   border-end-end-radius: 0;
   border-end-start-radius: var(--input-radius);
 }
-.celeste-text-input-wrapper[data-v-2139c861] .celeste-text-input-node.celeste-text-input-trailing-node {
+.celeste-text-input-wrapper[data-v-30491f95] .celeste-text-input-node.celeste-text-input-trailing-node {
   margin-inline-start: calc(var(--input-padding) - var(--input-gap));
   border-inline-start: 1px solid var(--color-stroke-soft-200);
   border-start-start-radius: 0;
@@ -3094,24 +3095,24 @@ to {
   cursor: pointer;
 }.celeste-color-slider .slider-track[data-v-3ca280fa] {
   background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
-}.celeste-picker-trigger[data-v-d9442cfd] {
+}.celeste-picker-trigger[data-v-bf0ff694] {
   gap: var(--spacing-12);
 }
-.celeste-picker-trigger .celeste-selected-color[data-v-d9442cfd] {
+.celeste-picker-trigger .celeste-selected-color[data-v-bf0ff694] {
   --color-tile-size: 20px;
   display: block;
   width: var(--color-tile-size);
   height: var(--color-tile-size);
   border: 1px solid var(--color-bg-soft-200);
   border-radius: var(--radius-4);
-  background-color: var(--v6500f742);
+  background-color: var(--v819487ba);
 }
-.celeste-color-picker-wrapper[data-v-d9442cfd] {
+.celeste-color-picker-wrapper[data-v-bf0ff694] {
   display: grid;
   box-sizing: border-box;
   width: 272px;
 }
-.celeste-color-picker-wrapper .celeste-color-picker[data-v-d9442cfd] {
+.celeste-color-picker-wrapper .celeste-color-picker[data-v-bf0ff694] {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -3119,71 +3120,71 @@ to {
   padding: var(--spacing-16);
   gap: var(--spacing-12);
 }
-.celeste-color-picker-wrapper .celeste-color-picker[data-v-d9442cfd] > * {
+.celeste-color-picker-wrapper .celeste-color-picker[data-v-bf0ff694] > * {
   box-sizing: border-box;
 }
-.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel[data-v-d9442cfd] {
+.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel[data-v-bf0ff694] {
   display: flex;
   flex-direction: column;
   width: 100%;
   gap: var(--spacing-4);
 }
-.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-selected-color-format[data-v-d9442cfd] {
+.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-selected-color-format[data-v-bf0ff694] {
   text-transform: uppercase;
 }
-.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls[data-v-d9442cfd] {
+.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls[data-v-bf0ff694] {
   display: flex;
   width: 100%;
   height: 32px;
 }
-.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-sip[data-v-d9442cfd] {
+.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-sip[data-v-bf0ff694] {
   border-start-end-radius: 0;
   border-end-end-radius: 0;
 }
-.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-sip[data-v-d9442cfd]:focus-within {
+.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-sip[data-v-bf0ff694]:focus-within {
   z-index: 2;
 }
-.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls[data-v-d9442cfd] > * {
+.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls[data-v-bf0ff694] > * {
   box-sizing: border-box;
   height: 100%;
 }
-.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs[data-v-d9442cfd] {
+.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs[data-v-bf0ff694] {
   display: flex;
 }
-.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs .color-input[data-v-d9442cfd] {
+.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs .color-input[data-v-bf0ff694] {
   margin-inline-start: -1px;
   border-radius: 0;
 }
-.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs .color-input[data-v-d9442cfd]:focus-within {
+.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs .color-input[data-v-bf0ff694]:focus-within {
   z-index: 2;
 }
-.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs .color-input[data-v-d9442cfd]:last-child {
+.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs .color-input[data-v-bf0ff694]:last-child {
   border-start-end-radius: var(--radius-8);
   border-end-end-radius: var(--radius-8);
 }
-.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs .color-input[data-v-d9442cfd]:first-child:nth-last-child(4), .celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs .color-input[data-v-d9442cfd]:first-child:nth-last-child(4) ~ * {
+.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs .color-input[data-v-bf0ff694]:first-child:nth-last-child(4), .celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs .color-input[data-v-bf0ff694]:first-child:nth-last-child(4) ~ * {
   flex: 1;
 }
-.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs .color-input[data-v-d9442cfd]:first-child:nth-last-child(2) {
+.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs .color-input[data-v-bf0ff694]:first-child:nth-last-child(2) {
   flex: 3;
 }
-.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs .color-input[data-v-d9442cfd]:last-child:nth-child(2) {
+.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs .color-input[data-v-bf0ff694]:last-child:nth-child(2) {
   flex: 1;
 }
-.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs:first-child:last-child .color-input[data-v-d9442cfd]:first-child {
+.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs:first-child:last-child .color-input[data-v-bf0ff694]:first-child {
   border-start-start-radius: var(--radius-8);
   border-end-start-radius: var(--radius-8);
 }
-.celeste-color-picker-wrapper .celeste-color-swatches[data-v-d9442cfd] {
+.celeste-color-picker-wrapper .celeste-color-swatches[data-v-bf0ff694] {
   display: flex;
   flex-direction: column;
   padding: var(--radius-16);
   border-block-start: 1px solid var(--color-stroke-soft-200);
 }
-[data-v-d9442cfd] .celeste-color-format {
+[data-v-bf0ff694] .celeste-color-format {
   text-transform: uppercase;
 }
-[data-v-d9442cfd] .celeste-color-thumb {
+[data-v-bf0ff694] .celeste-color-thumb {
   position: absolute;
   width: 12px;
   height: 12px;
@@ -3191,18 +3192,18 @@ to {
   border-radius: 50%;
   box-shadow: 0 0 0 2px var(--color-bg-white-0), var(--shadow-toggle-switch);
 }
-[data-v-d9442cfd] .celeste-color-slider {
+[data-v-bf0ff694] .celeste-color-slider {
   --track-height: 8px;
   width: 100%;
   padding-block: var(--spacing-4);
 }
-[data-v-d9442cfd] .celeste-color-slider .slider-track {
+[data-v-bf0ff694] .celeste-color-slider .slider-track {
   position: relative;
   width: 100%;
   height: var(--track-height);
   border-radius: calc(var(--track-height) / 2);
 }
-[data-v-d9442cfd] .celeste-color-slider .slider-track .celeste-color-thumb {
+[data-v-bf0ff694] .celeste-color-slider .slider-track .celeste-color-thumb {
   top: calc(var(--track-height) / 2);
 }.celeste-dropdown-empty-list[data-v-4423b209] {
   display: flex;
@@ -3649,7 +3650,7 @@ to {
   text-transform: uppercase;
 }
 
-.celeste-command-input[data-v-f97ce037] {
+.celeste-command-input[data-v-e7fad0da] {
   --icon-color: var(--color-icon-soft-400);
   --placeholder-color: var(--color-text-soft-400);
 
@@ -3662,33 +3663,34 @@ to {
   font: var(--paragraph-sm);
   gap: var(--spacing-8);
 }
-.celeste-command-input[data-v-f97ce037]:hover {
+.celeste-command-input[data-v-e7fad0da]:hover {
   --icon-color: var(--color-icon-sub-600);
   --placeholder-color: var(--color-text-sub-600);
 
   background: var(--color-bg-weak-50);
 }
-.celeste-command-input-primitive[data-v-f97ce037] {
+.celeste-command-input-primitive[data-v-e7fad0da] {
   width: 100%;
   transition: color var(--animation-normal) ease;
   border: none;
   outline: none;
   background: transparent;
+  box-shadow: none;
   font: inherit;
 }
-.celeste-command-input-icon[data-v-f97ce037] {
+.celeste-command-input-icon[data-v-e7fad0da] {
   flex-shrink: 0;
   width: 18px;
   height: 18px;
   transition: color var(--animation-normal) ease;
   color: var(--icon-color);
 }
-.celeste-command-input-primitive[data-v-f97ce037]::-moz-placeholder {
+.celeste-command-input-primitive[data-v-e7fad0da]::-moz-placeholder {
   -moz-transition: color var(--animation-normal) ease;
   transition: color var(--animation-normal) ease;
   color: var(--placeholder-color);
 }
-.celeste-command-input-primitive[data-v-f97ce037]::placeholder {
+.celeste-command-input-primitive[data-v-e7fad0da]::placeholder {
   transition: color var(--animation-normal) ease;
   color: var(--placeholder-color);
 }
@@ -3833,6 +3835,7 @@ to {
   border: none;
   outline: none;
   background-color: transparent;
+  box-shadow: none;
   color: inherit;
   text-align: center;
 }
@@ -7083,7 +7086,7 @@ to {
 .celeste-tag[aria-disabled=true][data-v-1a6ff455] {
   background-color: var(--color-bg-weak-50);
   color: var(--color-text-disabled-300);
-}.celeste-textarea-wrapper[data-v-0f93b4b8] {
+}.celeste-textarea-wrapper[data-v-be6ed21c] {
   transition-property: background-color, border-color, box-shadow, text-decoration-color, color;
   transition-duration: var(--animation-fast);
   transition-timing-function: ease-out;
@@ -7101,18 +7104,18 @@ to {
   cursor: text;
   gap: var(--spacing-8);
 }
-.celeste-textarea-wrapper[data-v-0f93b4b8]:hover:not(:focus-within) {
+.celeste-textarea-wrapper[data-v-be6ed21c]:hover:not(:focus-within) {
   border-color: var(--color-bg-weak-50);
   background: var(--color-bg-weak-50);
   box-shadow: none;
   color: var(--color-text-sub-600);
 }
-.celeste-textarea-wrapper[data-v-0f93b4b8]:focus-within:not([aria-disabled=true]) {
+.celeste-textarea-wrapper[data-v-be6ed21c]:focus-within:not([aria-disabled=true]) {
   border: 1px solid var(--color-stroke-strong-950);
   outline: none;
   box-shadow: var(--shadow-buttons-important-focus);
 }
-.celeste-textarea-wrapper .celeste-textarea-count[data-v-0f93b4b8] {
+.celeste-textarea-wrapper .celeste-textarea-count[data-v-be6ed21c] {
   --resize-handle-offset: 16px;
   display: flex;
   position: absolute;
@@ -7121,63 +7124,64 @@ to {
   inset-block-end: var(--spacing);
   inset-inline-end: calc(var(--spacing) + var(--resize-handle-offset));
 }
-.celeste-textarea-wrapper[aria-disabled=true][data-v-0f93b4b8] {
+.celeste-textarea-wrapper[aria-disabled=true][data-v-be6ed21c] {
   border-color: transparent;
   background: var(--color-bg-weak-50);
   box-shadow: none;
   cursor: not-allowed;
 }
-.celeste-textarea-wrapper[aria-disabled=true] .celeste-textarea-count[data-v-0f93b4b8] {
+.celeste-textarea-wrapper[aria-disabled=true] .celeste-textarea-count[data-v-be6ed21c] {
   color: var(--color-icon-disabled-300);
 }
-.celeste-textarea-wrapper[error=true][data-v-0f93b4b8] {
+.celeste-textarea-wrapper[error=true][data-v-be6ed21c] {
   border: 1px solid var(--color-state-error-base);
 }
-.celeste-textarea-wrapper[error=true] .celeste-textarea-count[data-v-0f93b4b8] {
+.celeste-textarea-wrapper[error=true] .celeste-textarea-count[data-v-be6ed21c] {
   color: var(--color-state-error-base);
 }
-.celeste-textarea-wrapper .celeste-textarea[data-v-0f93b4b8] {
+.celeste-textarea-wrapper .celeste-textarea[data-v-be6ed21c] {
   transition-property: background-color, border-color, box-shadow, text-decoration-color, color;
   transition-duration: var(--animation-fast);
   transition-timing-function: ease-out;
   width: 100%;
   border: none;
   background: transparent;
+  box-shadow: none;
   color: inherit;
   font-family: inherit;
   font-size: var(--font-size-2);
   resize: vertical;
 }
-.celeste-textarea-wrapper .celeste-textarea[data-v-0f93b4b8]::-moz-placeholder {
+.celeste-textarea-wrapper .celeste-textarea[data-v-be6ed21c]::-moz-placeholder {
   -moz-transition-property: background-color, border-color, box-shadow, text-decoration-color, color;
   transition-property: background-color, border-color, box-shadow, text-decoration-color, color;
   transition-duration: var(--animation-fast);
   transition-timing-function: ease-out;
   color: var(--color-text-soft-400);
 }
-.celeste-textarea-wrapper .celeste-textarea[data-v-0f93b4b8]::placeholder {
+.celeste-textarea-wrapper .celeste-textarea[data-v-be6ed21c]::placeholder {
   transition-property: background-color, border-color, box-shadow, text-decoration-color, color;
   transition-duration: var(--animation-fast);
   transition-timing-function: ease-out;
   color: var(--color-text-soft-400);
 }
-.celeste-textarea-wrapper .celeste-textarea[data-v-0f93b4b8]:hover::-moz-placeholder {
+.celeste-textarea-wrapper .celeste-textarea[data-v-be6ed21c]:hover::-moz-placeholder {
   color: var(--color-text-sub-600);
 }
-.celeste-textarea-wrapper .celeste-textarea[data-v-0f93b4b8]:hover::placeholder {
+.celeste-textarea-wrapper .celeste-textarea[data-v-be6ed21c]:hover::placeholder {
   color: var(--color-text-sub-600);
 }
-.celeste-textarea-wrapper .celeste-textarea[data-v-0f93b4b8]:focus-visible, .celeste-textarea-wrapper .celeste-textarea[data-v-0f93b4b8]:focus {
+.celeste-textarea-wrapper .celeste-textarea[data-v-be6ed21c]:focus-visible, .celeste-textarea-wrapper .celeste-textarea[data-v-be6ed21c]:focus {
   outline: none;
 }
-.celeste-textarea-wrapper .celeste-textarea[data-v-0f93b4b8]:disabled {
+.celeste-textarea-wrapper .celeste-textarea[data-v-be6ed21c]:disabled {
   color: var(--color-text-disabled-300);
   pointer-events: none;
 }
-.celeste-textarea-wrapper .celeste-textarea[data-v-0f93b4b8]:disabled::-moz-placeholder {
+.celeste-textarea-wrapper .celeste-textarea[data-v-be6ed21c]:disabled::-moz-placeholder {
   color: var(--color-text-disabled-300);
 }
-.celeste-textarea-wrapper .celeste-textarea[data-v-0f93b4b8]:disabled::placeholder {
+.celeste-textarea-wrapper .celeste-textarea[data-v-be6ed21c]:disabled::placeholder {
   color: var(--color-text-disabled-300);
 }
 .celeste-sidebar-separator {

package/dist/cjs/chunks/color-picker.cjs

@@ -54,7 +54,7 @@ var color_picker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0,
 	},
 	emits: ["update:modelValue"],
 	setup(__props, { emit: __emit }) {
-		(0, vue.useCssVars)((_ctx) => ({ "v6500f742": _ctx.modelValue }));
+		(0, vue.useCssVars)((_ctx) => ({ "v819487ba": _ctx.modelValue }));
 		const props = __props;
 		const emit = __emit;
 		const delegatedProps = require_use_delegated_props.useDelegatedProps(props, "class");
@@ -214,15 +214,15 @@ var color_picker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0,
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_popover.popover_default), null, {
 				default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(require_popover_trigger.popover_trigger_default), null, {
-					default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(require_button.button_default), {
+					default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "trigger", {}, () => [(0, vue.createVNode)((0, vue.unref)(require_button.button_default), {
 						class: "celeste-picker-trigger",
 						intent: "neutral",
 						variant: "stroke"
 					}, {
 						default: (0, vue.withCtx)(() => [_cache[53] || (_cache[53] = (0, vue.createElementVNode)("span", { class: "celeste-selected-color" }, null, -1)), (0, vue.createTextVNode)(" " + (0, vue.toDisplayString)(__props.label), 1)]),
 						_: 1
-					})]),
-					_: 1
+					})], true)]),
+					_: 3
 				}), (0, vue.createVNode)((0, vue.unref)(require_popover_content.popover_content_default), { dismissible: false }, {
 					default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", (0, vue.mergeProps)({ class: "celeste-color-picker-wrapper" }, (0, vue.unref)(forwarded)), [(0, vue.createElementVNode)("div", _hoisted_1, [
 						(0, vue.createVNode)((0, vue.unref)(require_color_area.color_area_default), {
@@ -471,7 +471,7 @@ var color_picker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0,
 });
 //#endregion
 //#region src/components/color-picker/color-picker.vue
-var color_picker_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(color_picker_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-d9442cfd"]]);
+var color_picker_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(color_picker_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-bf0ff694"]]);
 //#endregion
 Object.defineProperty(exports, "color_picker_default", {
 	enumerable: true,

package/dist/cjs/chunks/text-input.cjs

@@ -110,7 +110,7 @@ var text_input_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, v
 });
 //#endregion
 //#region src/components/text-input/text-input.vue
-var text_input_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(text_input_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-2139c861"]]);
+var text_input_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(text_input_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-30491f95"]]);
 //#endregion
 Object.defineProperty(exports, "text_input_default", {
 	enumerable: true,

package/dist/cjs/chunks/textarea.cjs

@@ -56,7 +56,7 @@ var textarea_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue
 });
 //#endregion
 //#region src/components/textarea/textarea.vue
-var textarea_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(textarea_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-0f93b4b8"]]);
+var textarea_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(textarea_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-be6ed21c"]]);
 //#endregion
 Object.defineProperty(exports, "textarea_default", {
 	enumerable: true,

package/dist/cjs/command-input.cjs

@@ -46,6 +46,6 @@ var command_input_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0
 });
 //#endregion
 //#region src/components/command/command-input.vue
-var command_input_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(command_input_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-f97ce037"]]);
+var command_input_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(command_input_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-e7fad0da"]]);
 //#endregion
 module.exports = command_input_default;

package/dist/components/color-picker/color-picker.d.ts

@@ -29,9 +29,11 @@ declare global {
         EyeDropper?: EyeDropperConstructor | undefined;
     }
 }
-declare var __VLS_198: {};
+declare var __VLS_14: {}, __VLS_200: {};
 type __VLS_Slots = {} & {
-    swatches?: (props: typeof __VLS_198) => any;
+    trigger?: (props: typeof __VLS_14) => any;
+} & {
+    swatches?: (props: typeof __VLS_200) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<ColorPickerProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;

package/dist/es/chunks/color-picker.js

@@ -56,7 +56,7 @@ var color_picker_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 	},
 	emits: ["update:modelValue"],
 	setup(__props, { emit: __emit }) {
-		useCssVars((_ctx) => ({ "v6500f742": _ctx.modelValue }));
+		useCssVars((_ctx) => ({ "v819487ba": _ctx.modelValue }));
 		const props = __props;
 		const emit = __emit;
 		const delegatedProps = useDelegatedProps(props, "class");
@@ -216,15 +216,15 @@ var color_picker_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(popover_default), null, {
 				default: withCtx(() => [createVNode(unref(popover_trigger_default), null, {
-					default: withCtx(() => [createVNode(unref(button_default), {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "trigger", {}, () => [createVNode(unref(button_default), {
 						class: "celeste-picker-trigger",
 						intent: "neutral",
 						variant: "stroke"
 					}, {
 						default: withCtx(() => [_cache[53] || (_cache[53] = createElementVNode("span", { class: "celeste-selected-color" }, null, -1)), createTextVNode(" " + toDisplayString(__props.label), 1)]),
 						_: 1
-					})]),
-					_: 1
+					})], true)]),
+					_: 3
 				}), createVNode(unref(popover_content_default), { dismissible: false }, {
 					default: withCtx(() => [createElementVNode("div", mergeProps({ class: "celeste-color-picker-wrapper" }, unref(forwarded)), [createElementVNode("div", _hoisted_1, [
 						createVNode(unref(color_area_default), {
@@ -470,6 +470,6 @@ var color_picker_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			});
 		};
 	}
-}), [["__scopeId", "data-v-d9442cfd"]]);
+}), [["__scopeId", "data-v-bf0ff694"]]);
 //#endregion
 export { color_picker_default as t };

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

@@ -109,6 +109,6 @@ var text_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			], 10, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-2139c861"]]);
+}), [["__scopeId", "data-v-30491f95"]]);
 //#endregion
 export { text_input_default as t };

package/dist/es/chunks/textarea.js

@@ -55,6 +55,6 @@ var textarea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			}), null, 16, _hoisted_2), [[vModelText, modelValue.value]]), __props.showCount && Number(__props.maxLength) ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(`${modelValue.value?.length || 0}/${__props.maxLength}`), 1)) : createCommentVNode("", true)], 10, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-0f93b4b8"]]);
+}), [["__scopeId", "data-v-be6ed21c"]]);
 //#endregion
 export { textarea_default as t };

package/dist/es/command-input.js

@@ -45,6 +45,6 @@ var command_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 			}), null, 16, ["class"])]);
 		};
 	}
-}), [["__scopeId", "data-v-f97ce037"]]);
+}), [["__scopeId", "data-v-e7fad0da"]]);
 //#endregion
 export { command_input_default as default };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@youcan/celeste",
   "type": "module",
-  "version": "0.20.0",
+  "version": "0.21.1",
   "author": "YouCan <tech@youcan.shop>",
   "repository": {
     "type": "git",
@@ -52,8 +52,8 @@
     "reka-ui": "~2.10.5",
     "tinycolor2": "^1.6.0",
     "vue-sonner": "^2.0.9",
-    "@youcan/celeste-icons": "0.20.0",
-    "@youcan/celeste-tokens": "0.20.0"
+    "@youcan/celeste-icons": "0.21.1",
+    "@youcan/celeste-tokens": "0.21.1"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^5.3.0",

package/src/components/color-picker/color-picker.vue

@@ -279,14 +279,16 @@ function handleColorValueKeyDown(event: KeyboardEvent, key: ColorKey) {
 <template>
   <Popover>
     <PopoverTrigger>
-      <Button
-        class="celeste-picker-trigger"
-        intent="neutral"
-        variant="stroke"
-      >
-        <span class="celeste-selected-color" />
-        {{ label }}
-      </Button>
+      <slot name="trigger">
+        <Button
+          class="celeste-picker-trigger"
+          intent="neutral"
+          variant="stroke"
+        >
+          <span class="celeste-selected-color" />
+          {{ label }}
+        </Button>
+      </slot>
     </PopoverTrigger>
     <PopoverContent :dismissible="false">
       <div class="celeste-color-picker-wrapper" v-bind="forwarded">

package/src/components/color-picker/stories/color-picker.stories.ts

@@ -114,3 +114,21 @@ export const CustomLabel: Story = {
     `,
   }),
 };
+
+export const CustomTrigger: Story = {
+  args: {},
+  render: (args: Story['args']) => ({
+    components: { ColorPicker },
+    setup() {
+      const color = ref('#E11D48');
+      return { args, color };
+    },
+    template: `
+      <ColorPicker v-model="color" v-bind="args">
+        <template #trigger>
+          <button type="button" :aria-label="color" :style="{ width: '48px', height: '48px', border: 0, borderRadius: '12px', background: color, cursor: 'pointer' }" />
+        </template>
+      </ColorPicker>
+    `,
+  }),
+};

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

@@ -61,6 +61,7 @@ const forwardedProps = useForwardProps(delegatedProps);
   border: none;
   outline: none;
   background: transparent;
+  box-shadow: none;
   font: inherit;
 }
 

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

@@ -95,6 +95,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     border: none;
     outline: none;
     background-color: transparent;
+    box-shadow: none;
     color: inherit;
     text-align: center;
   }

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

@@ -153,6 +153,7 @@ function clearInput() {
     border: none;
     outline: none;
     background-color: transparent;
+    box-shadow: none;
     color: inherit;
     font: inherit;
 

package/src/components/textarea/textarea.vue

@@ -118,6 +118,7 @@ const modelValue = defineModel<string>();
     width: 100%;
     border: none;
     background: transparent;
+    box-shadow: none;
     color: inherit;
     font-family: inherit;
     font-size: var(--font-size-2);