@youcan/celeste 0.19.0 → 0.21.0

package/ai/README.md

@@ -1,6 +1,6 @@
 # Celeste agent indexes
 
-Generated from source for `@youcan/celeste@0.19.0`. Do not edit.
+Generated from source for `@youcan/celeste@0.21.0`. 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.19.0",
-  "generatedAt": "2026-10-09T18:24:41.483Z",
+  "version": "0.21.0",
+  "generatedAt": "2026-10-09T20:04:00.780Z",
   "components": {
     "Alert": {
       "name": "Alert",
@@ -1335,6 +1335,10 @@
         }
       ],
       "slots": [
+        {
+          "name": "trigger",
+          "type": "{}"
+        },
         {
           "name": "swatches",
           "type": "{}"
@@ -5207,6 +5211,17 @@
           "required": false,
           "default": "\"Add stop\""
         },
+        {
+          "name": "align",
+          "type": "\"start\" | \"center\" | \"end\"",
+          "values": [
+            "start",
+            "center",
+            "end"
+          ],
+          "required": false,
+          "default": "\"start\""
+        },
         {
           "name": "angleLabel",
           "type": "string",
@@ -5309,6 +5324,18 @@
           "required": false,
           "default": "\"Remove stop\""
         },
+        {
+          "name": "side",
+          "type": "\"top\" | \"right\" | \"bottom\" | \"left\"",
+          "values": [
+            "top",
+            "right",
+            "bottom",
+            "left"
+          ],
+          "required": false,
+          "default": "\"bottom\""
+        },
         {
           "name": "swatches",
           "type": "string[]",

package/ai/icons.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": 1,
-  "version": "0.19.0",
-  "generatedAt": "2026-10-09T18:24:36.461Z",
+  "version": "0.21.0",
+  "generatedAt": "2026-10-09T20:03:57.574Z",
   "prefix": "celeste",
   "icons": [
     {

package/ai/tokens.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": 1,
-  "version": "0.19.0",
-  "generatedAt": "2026-10-09T18:24:36.461Z",
+  "version": "0.21.0",
+  "generatedAt": "2026-10-09T20:03:57.574Z",
   "tokens": [
     {
       "name": "animation-extra-fast",

package/dist/celeste.css

@@ -2757,7 +2757,7 @@ to {
     scale: 0.98;
     opacity: 0;
 }
-}.celeste-gradient-trigger[data-v-3f165d2c] {
+}.celeste-gradient-trigger[data-v-9b399aff] {
   display: flex;
   align-items: center;
   width: 100%;
@@ -2773,33 +2773,33 @@ to {
   cursor: pointer;
   gap: var(--spacing-8);
 }
-.celeste-gradient-trigger[data-v-3f165d2c]:hover {
+.celeste-gradient-trigger[data-v-9b399aff]:hover {
   background: var(--color-bg-weak-50);
 }
-.celeste-gradient-trigger i[data-v-3f165d2c] {
+.celeste-gradient-trigger i[data-v-9b399aff] {
   flex: none;
   width: 16px;
   height: 16px;
   color: var(--color-icon-sub-600);
 }
-.celeste-gradient-swatch[data-v-3f165d2c] {
+.celeste-gradient-swatch[data-v-9b399aff] {
   flex: none;
   width: 24px;
   height: 24px;
   border-radius: var(--radius-full);
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1019607843);
 }
-.celeste-gradient-swatch[data-empty=true][data-v-3f165d2c] {
+.celeste-gradient-swatch[data-empty=true][data-v-9b399aff] {
   background: linear-gradient(135deg, transparent 47%, var(--color-stroke-sub-300) 47% 53%, transparent 53%), var(--color-bg-white-0);
 }
-.celeste-gradient-summary[data-v-3f165d2c] {
+.celeste-gradient-summary[data-v-9b399aff] {
   flex: 1;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.celeste-gradient-picker[data-v-3f165d2c] {
+.celeste-gradient-picker[data-v-9b399aff] {
   display: flex;
   flex-direction: column;
   width: 304px;
@@ -2807,29 +2807,29 @@ to {
   overflow-y: auto;
   overscroll-behavior: contain;
 }
-.celeste-gradient-section[data-v-3f165d2c] {
+.celeste-gradient-section[data-v-9b399aff] {
   display: flex;
   flex-direction: column;
   padding: var(--spacing-16);
   gap: var(--spacing-12);
 }
-.celeste-gradient-fill[data-v-3f165d2c] {
+.celeste-gradient-fill[data-v-9b399aff] {
   position: absolute;
   inset: 0;
   border-radius: inherit;
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1019607843);
   pointer-events: none;
 }
-.celeste-gradient-hint[data-v-3f165d2c] {
+.celeste-gradient-hint[data-v-9b399aff] {
   color: var(--color-text-sub-600);
   font: var(--paragraph-sm);
 }
-.celeste-gradient-presets[data-v-3f165d2c] {
+.celeste-gradient-presets[data-v-9b399aff] {
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   gap: var(--spacing-8);
 }
-.celeste-gradient-preset[data-v-3f165d2c] {
+.celeste-gradient-preset[data-v-9b399aff] {
   aspect-ratio: 1;
   padding: 0;
   transition: box-shadow 200ms ease-out;
@@ -2838,24 +2838,24 @@ to {
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1019607843);
   cursor: pointer;
 }
-.celeste-gradient-preset[data-empty=true][data-v-3f165d2c] {
+.celeste-gradient-preset[data-empty=true][data-v-9b399aff] {
   background: linear-gradient(135deg, transparent 47%, var(--color-stroke-sub-300) 47% 53%, transparent 53%), var(--color-bg-white-0);
 }
-.celeste-gradient-preset[data-v-3f165d2c]:hover, .celeste-gradient-preset[data-v-3f165d2c]:focus-visible {
+.celeste-gradient-preset[data-v-9b399aff]:hover, .celeste-gradient-preset[data-v-9b399aff]:focus-visible {
   outline: none;
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1019607843), 0 0 0 2px var(--color-bg-white-0), 0 0 0 4px var(--color-primary-base);
 }
-.celeste-gradient-preview[data-v-3f165d2c] {
+.celeste-gradient-preview[data-v-9b399aff] {
   position: relative;
   height: 144px;
   border-radius: var(--radius-12);
   background: repeating-conic-gradient(#e5e5e5 0 25%, #fff 0 50%) 0 0/8px 8px;
   touch-action: none;
 }
-.celeste-gradient-preview[data-linear=true][data-v-3f165d2c] {
+.celeste-gradient-preview[data-linear=true][data-v-9b399aff] {
   cursor: grab;
 }
-.celeste-gradient-ring[data-v-3f165d2c] {
+.celeste-gradient-ring[data-v-9b399aff] {
   position: absolute;
   top: calc(50% - 40px);
   left: calc(50% - 40px);
@@ -2866,11 +2866,11 @@ to {
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1019607843);
   pointer-events: none;
 }
-.celeste-gradient-ring span[data-v-3f165d2c] {
+.celeste-gradient-ring span[data-v-9b399aff] {
   position: absolute;
   inset: -2px;
 }
-.celeste-gradient-ring span[data-v-3f165d2c]::after {
+.celeste-gradient-ring span[data-v-9b399aff]::after {
   content: "";
   position: absolute;
   top: -6px;
@@ -2881,12 +2881,12 @@ to {
   background: var(--color-static-white);
   box-shadow: 0 1px 3px rgba(14, 18, 27, 0.2509803922);
 }
-.celeste-gradient-row[data-v-3f165d2c] {
+.celeste-gradient-row[data-v-9b399aff] {
   display: flex;
   align-items: center;
   gap: var(--spacing-8);
 }
-.celeste-gradient-type[data-v-3f165d2c] {
+.celeste-gradient-type[data-v-9b399aff] {
   width: 40px;
   height: 40px;
   padding: var(--spacing-4);
@@ -2895,26 +2895,26 @@ to {
   background: var(--color-bg-white-0);
   cursor: pointer;
 }
-.celeste-gradient-type[data-active=true][data-v-3f165d2c] {
+.celeste-gradient-type[data-active=true][data-v-9b399aff] {
   border-color: var(--color-primary-base);
   box-shadow: 0 0 0 2px var(--color-primary-alpha-10);
 }
-.celeste-gradient-type span[data-v-3f165d2c] {
+.celeste-gradient-type span[data-v-9b399aff] {
   display: block;
   height: 100%;
   border-radius: var(--radius-6);
   background: linear-gradient(var(--color-bg-white-0), var(--color-text-soft-400));
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1019607843);
 }
-.celeste-gradient-type[data-type=radial] span[data-v-3f165d2c] {
+.celeste-gradient-type[data-type=radial] span[data-v-9b399aff] {
   background: radial-gradient(var(--color-bg-white-0), var(--color-text-soft-400));
 }
-.celeste-gradient-number[data-v-3f165d2c] {
+.celeste-gradient-number[data-v-9b399aff] {
   flex: none;
   width: 80px;
   margin-inline-start: auto;
 }
-.celeste-gradient-bar[data-v-3f165d2c] {
+.celeste-gradient-bar[data-v-9b399aff] {
   position: relative;
   height: 24px;
   border-radius: var(--radius-full);
@@ -2922,7 +2922,7 @@ to {
   cursor: copy;
   touch-action: none;
 }
-.celeste-gradient-handle[data-v-3f165d2c] {
+.celeste-gradient-handle[data-v-9b399aff] {
   position: absolute;
   top: calc(50% - 10px);
   width: 20px;
@@ -2935,25 +2935,25 @@ to {
   cursor: grab;
   touch-action: none;
 }
-.celeste-gradient-handle[data-active=true][data-v-3f165d2c] {
+.celeste-gradient-handle[data-active=true][data-v-9b399aff] {
   box-shadow: 0 0 0 2px var(--color-primary-base), 0 1px 3px rgba(14, 18, 27, 0.2509803922);
 }
-.celeste-gradient-handle[data-removing=true][data-v-3f165d2c] {
+.celeste-gradient-handle[data-removing=true][data-v-9b399aff] {
   opacity: 0.3;
 }
-.celeste-gradient-eyebrow[data-v-3f165d2c] {
+.celeste-gradient-eyebrow[data-v-9b399aff] {
   flex: 1;
   color: var(--color-text-soft-400);
   font: var(--subheading-xxs);
   letter-spacing: 0.06em;
   text-transform: uppercase;
 }
-.celeste-gradient-label[data-v-3f165d2c] {
+.celeste-gradient-label[data-v-9b399aff] {
   flex: 1;
   color: var(--color-text-sub-600);
   font: var(--label-xs);
 }
-.celeste-gradient-current[data-v-3f165d2c] {
+.celeste-gradient-current[data-v-9b399aff] {
   position: relative;
   flex: none;
   width: 32px;
@@ -2961,16 +2961,16 @@ to {
   border-radius: var(--radius-8);
   background: repeating-conic-gradient(#e5e5e5 0 25%, #fff 0 50%) 0 0/8px 8px;
 }
-.celeste-gradient-hex[data-v-3f165d2c] {
+.celeste-gradient-hex[data-v-9b399aff] {
   flex: 1;
   min-width: 0;
 }
-.celeste-gradient-color[data-v-3f165d2c] {
+.celeste-gradient-color[data-v-9b399aff] {
   display: flex;
   height: 200px;
   gap: var(--spacing-8);
 }
-.celeste-gradient-area[data-v-3f165d2c] {
+.celeste-gradient-area[data-v-9b399aff] {
   position: relative;
   flex: 1;
   border-radius: var(--radius-10);
@@ -2978,7 +2978,7 @@ to {
   cursor: crosshair;
   touch-action: none;
 }
-.celeste-gradient-slider[data-v-3f165d2c] {
+.celeste-gradient-slider[data-v-9b399aff] {
   position: relative;
   flex: none;
   width: 24px;
@@ -2987,19 +2987,19 @@ to {
   cursor: pointer;
   touch-action: none;
 }
-.celeste-gradient-slider[data-hue=true][data-v-3f165d2c] {
+.celeste-gradient-slider[data-hue=true][data-v-9b399aff] {
   background: linear-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
 }
-.celeste-gradient-slider .celeste-gradient-knob[data-v-3f165d2c] {
+.celeste-gradient-slider .celeste-gradient-knob[data-v-9b399aff] {
   left: 50%;
 }
-.celeste-gradient-area[data-v-3f165d2c]:focus-visible,
-.celeste-gradient-slider[data-v-3f165d2c]:focus-visible,
-.celeste-gradient-handle[data-v-3f165d2c]:focus-visible {
+.celeste-gradient-area[data-v-9b399aff]:focus-visible,
+.celeste-gradient-slider[data-v-9b399aff]:focus-visible,
+.celeste-gradient-handle[data-v-9b399aff]:focus-visible {
   outline: 2px solid var(--color-primary-base);
   outline-offset: 2px;
 }
-.celeste-gradient-knob[data-v-3f165d2c] {
+.celeste-gradient-knob[data-v-9b399aff] {
   position: absolute;
   width: 20px;
   height: 20px;
@@ -3009,17 +3009,17 @@ to {
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1215686275), 0 1px 3px rgba(14, 18, 27, 0.2509803922);
   pointer-events: none;
 }
-.celeste-gradient-used[data-v-3f165d2c] {
+.celeste-gradient-used[data-v-9b399aff] {
   padding-top: var(--spacing-12);
   border-top: 1px solid var(--color-stroke-soft-200);
   gap: var(--spacing-8);
 }
-.celeste-gradient-swatches[data-v-3f165d2c] {
+.celeste-gradient-swatches[data-v-9b399aff] {
   display: flex;
   flex-wrap: wrap;
   gap: var(--spacing-8);
 }
-.celeste-gradient-swatches button[data-v-3f165d2c] {
+.celeste-gradient-swatches button[data-v-9b399aff] {
   width: 28px;
   height: 28px;
   padding: 0;
@@ -3028,15 +3028,15 @@ to {
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1019607843);
   cursor: pointer;
 }
-.celeste-gradient-swatches button[data-v-3f165d2c]:hover, .celeste-gradient-swatches button[data-v-3f165d2c]:focus-visible {
+.celeste-gradient-swatches button[data-v-9b399aff]:hover, .celeste-gradient-swatches button[data-v-9b399aff]:focus-visible {
   outline: none;
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1019607843), 0 0 0 2px var(--color-bg-white-0), 0 0 0 3px var(--color-stroke-sub-300);
 }
-.celeste-gradient-footer[data-v-3f165d2c] {
+.celeste-gradient-footer[data-v-9b399aff] {
   padding: var(--spacing-8);
   border-top: 1px solid var(--color-stroke-soft-200);
 }
-.celeste-gradient-remove[data-v-3f165d2c] {
+.celeste-gradient-remove[data-v-9b399aff] {
   display: flex;
   align-items: center;
   width: 100%;
@@ -3049,11 +3049,11 @@ to {
   cursor: pointer;
   gap: var(--spacing-8);
 }
-.celeste-gradient-remove[data-v-3f165d2c]:hover {
+.celeste-gradient-remove[data-v-9b399aff]:hover {
   background: var(--color-bg-weak-50);
   color: var(--color-text-strong-950);
 }
-.celeste-gradient-remove i[data-v-3f165d2c] {
+.celeste-gradient-remove i[data-v-9b399aff] {
   width: 20px;
   height: 20px;
 }.celeste-select-icon[data-v-c6783f07] {
@@ -3094,24 +3094,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 +3119,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 +3191,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;

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/gradient-picker.cjs

@@ -114,7 +114,9 @@ var gradient_picker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 			"#000000",
 			"#335cff",
 			"#e1116f"
-		] }
+		] },
+		side: { default: "bottom" },
+		align: { default: "start" }
 	},
 	emits: ["update:modelValue"],
 	setup(__props, { emit: __emit }) {
@@ -369,7 +371,8 @@ var gradient_picker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 				}), (0, vue.createVNode)((0, vue.unref)(require_popover_content.popover_content_default), {
 					dismissible: false,
 					"show-tail": false,
-					align: "start",
+					side: __props.side,
+					align: __props.align,
 					onOpenAutoFocus: _cache[5] || (_cache[5] = (0, vue.withModifiers)(() => {}, ["prevent"]))
 				}, {
 					default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", _hoisted_4, [!state.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_5, [(0, vue.createElementVNode)("span", _hoisted_6, (0, vue.toDisplayString)(__props.emptyHint), 1), (0, vue.createElementVNode)("div", _hoisted_7, [(0, vue.createElementVNode)("button", {
@@ -617,7 +620,7 @@ var gradient_picker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 						}, [_cache[12] || (_cache[12] = (0, vue.createElementVNode)("i", { class: "i-celeste-delete-bin-line" }, null, -1)), (0, vue.createTextVNode)(" " + (0, vue.toDisplayString)(__props.removeLabel), 1)])])
 					], 64)) : (0, vue.createCommentVNode)("", true)])]),
 					_: 1
-				})]),
+				}, 8, ["side", "align"])]),
 				_: 1
 			}, 8, ["open"]);
 		};
@@ -625,7 +628,7 @@ var gradient_picker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 });
 //#endregion
 //#region src/components/color-picker/gradient-picker.vue
-var gradient_picker_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(gradient_picker_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-3f165d2c"]]);
+var gradient_picker_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(gradient_picker_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-9b399aff"]]);
 //#endregion
 Object.defineProperty(exports, "gradient_picker_default", {
 	enumerable: true,

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/components/color-picker/gradient-picker.d.ts

@@ -1,3 +1,4 @@
+import { PopoverContentProps } from '../popover';
 export interface GradientPickerProps {
     modelValue?: string;
     placeholder?: string;
@@ -18,6 +19,8 @@ export interface GradientPickerProps {
     removeLabel?: string;
     presets?: string[];
     swatches?: string[];
+    side?: PopoverContentProps['side'];
+    align?: PopoverContentProps['align'];
 }
 export interface GradientPickerEmits {
     'update:modelValue': [value: string];
@@ -29,6 +32,8 @@ declare const __VLS_export: import('vue').DefineComponent<GradientPickerProps, {
 }>, {
     placeholder: string;
     modelValue: string;
+    align: "center" | "start" | "end";
+    side: "bottom" | "left" | "right" | "top";
     swatches: string[];
     emptyHint: string;
     noneLabel: string;

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/gradient-picker.js

@@ -116,7 +116,9 @@ var gradient_picker_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 			"#000000",
 			"#335cff",
 			"#e1116f"
-		] }
+		] },
+		side: { default: "bottom" },
+		align: { default: "start" }
 	},
 	emits: ["update:modelValue"],
 	setup(__props, { emit: __emit }) {
@@ -371,7 +373,8 @@ var gradient_picker_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 				}), createVNode(unref(popover_content_default), {
 					dismissible: false,
 					"show-tail": false,
-					align: "start",
+					side: __props.side,
+					align: __props.align,
 					onOpenAutoFocus: _cache[5] || (_cache[5] = withModifiers(() => {}, ["prevent"]))
 				}, {
 					default: withCtx(() => [createElementVNode("div", _hoisted_4, [!state.value ? (openBlock(), createElementBlock("div", _hoisted_5, [createElementVNode("span", _hoisted_6, toDisplayString(__props.emptyHint), 1), createElementVNode("div", _hoisted_7, [createElementVNode("button", {
@@ -619,11 +622,11 @@ var gradient_picker_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 						}, [_cache[12] || (_cache[12] = createElementVNode("i", { class: "i-celeste-delete-bin-line" }, null, -1)), createTextVNode(" " + toDisplayString(__props.removeLabel), 1)])])
 					], 64)) : createCommentVNode("", true)])]),
 					_: 1
-				})]),
+				}, 8, ["side", "align"])]),
 				_: 1
 			}, 8, ["open"]);
 		};
 	}
-}), [["__scopeId", "data-v-3f165d2c"]]);
+}), [["__scopeId", "data-v-9b399aff"]]);
 //#endregion
 export { gradient_picker_default as t };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@youcan/celeste",
   "type": "module",
-  "version": "0.19.0",
+  "version": "0.21.0",
   "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.19.0",
-    "@youcan/celeste-tokens": "0.19.0"
+    "@youcan/celeste-icons": "0.21.0",
+    "@youcan/celeste-tokens": "0.21.0"
   },
   "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/gradient-picker.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { PopoverContentProps } from '../popover';
 import type { GradientType } from '@/utils/gradient';
 import tinycolor from 'tinycolor2';
 import { computed, reactive, ref, watch } from 'vue';
@@ -28,6 +29,8 @@ export interface GradientPickerProps {
   removeLabel?: string;
   presets?: string[];
   swatches?: string[];
+  side?: PopoverContentProps['side'];
+  align?: PopoverContentProps['align'];
 }
 
 export interface GradientPickerEmits {
@@ -39,6 +42,8 @@ interface State { type: GradientType; angle: number; shape?: string; stops: Stop
 
 const props = withDefaults(defineProps<GradientPickerProps>(), {
   modelValue: '',
+  side: 'bottom',
+  align: 'start',
   placeholder: 'No gradient chosen',
   emptyHint: 'Select a gradient to begin editing',
   noneLabel: 'None',
@@ -326,7 +331,8 @@ const canSip = 'EyeDropper' in window;
     <PopoverContent
       :dismissible="false"
       :show-tail="false"
-      align="start"
+      :side="side"
+      :align="align"
       @open-auto-focus.prevent
     >
       <div class="celeste-gradient-picker">

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/color-picker/stories/gradient-picker.stories.ts

@@ -35,3 +35,14 @@ export const Empty: Story = {
     template: `<div style="display: grid; width: 280px; gap: 8px;"><GradientPicker v-model="gradient" /><code>{{ gradient }}</code></div>`,
   }),
 };
+
+export const Side: Story = {
+  render: () => ({
+    components: { GradientPicker },
+    setup() {
+      const gradient = ref('linear-gradient(135deg, #3B82F6 0%, #EC4899 100%)');
+      return { gradient };
+    },
+    template: `<div style="display: grid; width: 280px; margin: 480px 0 0 360px; gap: 8px;"><GradientPicker v-model="gradient" side="left" /><code>{{ gradient }}</code></div>`,
+  }),
+};