@youcan/celeste 0.21.0 → 0.21.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/ai/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # Celeste agent indexes
2
2
 
3
- Generated from source for `@youcan/celeste@0.21.0`. Do not edit.
3
+ Generated from source for `@youcan/celeste@0.21.2`. Do not edit.
4
4
 
5
5
  - `component-registry.json` — every component's props, events, slots, story and usage example, and
6
6
  every exported helper such as `toast`
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "schemaVersion": 1,
3
- "version": "0.21.0",
4
- "generatedAt": "2026-10-09T20:04:00.780Z",
3
+ "version": "0.21.2",
4
+ "generatedAt": "2026-10-14T03:15:16.923Z",
5
5
  "components": {
6
6
  "Alert": {
7
7
  "name": "Alert",
package/ai/icons.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "schemaVersion": 1,
3
- "version": "0.21.0",
4
- "generatedAt": "2026-10-09T20:03:57.574Z",
3
+ "version": "0.21.2",
4
+ "generatedAt": "2026-10-14T03:15:13.071Z",
5
5
  "prefix": "celeste",
6
6
  "icons": [
7
7
  {
package/ai/tokens.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "schemaVersion": 1,
3
- "version": "0.21.0",
4
- "generatedAt": "2026-10-09T20:03:57.574Z",
3
+ "version": "0.21.2",
4
+ "generatedAt": "2026-10-14T03:15:13.071Z",
5
5
  "tokens": [
6
6
  {
7
7
  "name": "animation-extra-fast",
package/dist/celeste.css CHANGED
@@ -2410,7 +2410,7 @@ to {
2410
2410
  .celeste-text-input-button[inline=true][data-v-d9fba798]:hover {
2411
2411
  background-color: transparent !important;
2412
2412
  }/* stylelint-disable no-descending-specificity */
2413
- .celeste-text-input-wrapper[data-v-2139c861] {
2413
+ .celeste-text-input-wrapper[data-v-3af287ef] {
2414
2414
  --celeste-text-input-border-color: var(--color-stroke-soft-200);
2415
2415
  --celeste-text-input-drop-shadow: var(--shadow-regular-xs);
2416
2416
  --celeste-text-input-icon-color: var(--color-text-sub-600);
@@ -2423,6 +2423,7 @@ to {
2423
2423
  align-items: center;
2424
2424
  height: var(--input-height);
2425
2425
  padding-inline: var(--input-padding);
2426
+ overflow: hidden;
2426
2427
  transition: all var(--animation-fast) ease-out;
2427
2428
  border: 1px solid var(--celeste-text-input-border-color);
2428
2429
  border-radius: var(--input-radius);
@@ -2432,120 +2433,121 @@ to {
2432
2433
  font: var(--paragraph-sm);
2433
2434
  gap: var(--input-gap);
2434
2435
  }
2435
- .celeste-text-input-wrapper[size=xs][data-v-2139c861] {
2436
+ .celeste-text-input-wrapper[size=xs][data-v-3af287ef] {
2436
2437
  --input-gap: var(--spacing-6);
2437
2438
  --input-height: 32px;
2438
2439
  --input-radius: var(--radius-8);
2439
2440
  --input-padding: var(--spacing-8);
2440
2441
  --input-affix-padding: var(--spacing-10);
2441
2442
  }
2442
- .celeste-text-input-wrapper[size=sm][data-v-2139c861] {
2443
+ .celeste-text-input-wrapper[size=sm][data-v-3af287ef] {
2443
2444
  --input-gap: var(--spacing-8);
2444
2445
  --input-height: 36px;
2445
2446
  --input-radius: var(--radius-8);
2446
2447
  --input-padding: var(--spacing-10);
2447
2448
  --input-affix-padding: var(--spacing-10);
2448
2449
  }
2449
- .celeste-text-input-wrapper[size=md][data-v-2139c861] {
2450
+ .celeste-text-input-wrapper[size=md][data-v-3af287ef] {
2450
2451
  --input-gap: var(--spacing-8);
2451
2452
  --input-height: 40px;
2452
2453
  --input-radius: var(--radius-10);
2453
2454
  --input-padding: var(--spacing-12);
2454
2455
  --input-affix-padding: var(--spacing-12);
2455
2456
  }
2456
- .celeste-text-input-wrapper[has-error=true][data-v-2139c861] {
2457
+ .celeste-text-input-wrapper[has-error=true][data-v-3af287ef] {
2457
2458
  --celeste-text-input-border-color: var(--color-state-error-base);
2458
2459
  }
2459
- .celeste-text-input-wrapper .celeste-text-input[data-v-2139c861] {
2460
+ .celeste-text-input-wrapper .celeste-text-input[data-v-3af287ef] {
2460
2461
  width: 100%;
2461
2462
  height: 100%;
2462
2463
  padding: 0;
2463
2464
  border: none;
2464
2465
  outline: none;
2465
2466
  background-color: transparent;
2467
+ box-shadow: none;
2466
2468
  color: inherit;
2467
2469
  font: inherit;
2468
2470
  }
2469
- .celeste-text-input-wrapper .celeste-text-input[data-v-2139c861]::-moz-placeholder {
2471
+ .celeste-text-input-wrapper .celeste-text-input[data-v-3af287ef]::-moz-placeholder {
2470
2472
  -moz-transition: color var(--animation-fast) ease-out;
2471
2473
  transition: color var(--animation-fast) ease-out;
2472
2474
  color: var(--celeste-text-input-placeholder-color);
2473
2475
  }
2474
- .celeste-text-input-wrapper .celeste-text-input[data-v-2139c861]::placeholder {
2476
+ .celeste-text-input-wrapper .celeste-text-input[data-v-3af287ef]::placeholder {
2475
2477
  transition: color var(--animation-fast) ease-out;
2476
2478
  color: var(--celeste-text-input-placeholder-color);
2477
2479
  }
2478
- .celeste-text-input-wrapper .celeste-text-input[type=tel][data-v-2139c861] {
2480
+ .celeste-text-input-wrapper .celeste-text-input[type=tel][data-v-3af287ef] {
2479
2481
  direction: ltr;
2480
2482
  text-align: -webkit-match-parent;
2481
2483
  text-align: match-parent;
2482
2484
  }
2483
- .celeste-text-input-wrapper .celeste-text-input[type=search][data-v-2139c861]::-webkit-search-cancel-button {
2485
+ .celeste-text-input-wrapper .celeste-text-input[type=search][data-v-3af287ef]::-webkit-search-cancel-button {
2484
2486
  display: none;
2485
2487
  -webkit-appearance: none;
2486
2488
  appearance: none;
2487
2489
  }
2488
- .celeste-text-input-wrapper .celeste-text-input[type=search][data-v-2139c861]::-webkit-search-decoration {
2490
+ .celeste-text-input-wrapper .celeste-text-input[type=search][data-v-3af287ef]::-webkit-search-decoration {
2489
2491
  display: none;
2490
2492
  -webkit-appearance: none;
2491
2493
  appearance: none;
2492
2494
  }
2493
- .celeste-text-input-wrapper .celeste-text-input[type=date][data-v-2139c861]::-webkit-calendar-picker-indicator {
2495
+ .celeste-text-input-wrapper .celeste-text-input[type=date][data-v-3af287ef]::-webkit-calendar-picker-indicator {
2494
2496
  display: none;
2495
2497
  -webkit-appearance: none;
2496
2498
  appearance: none;
2497
2499
  }
2498
- .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 {
2500
+ .celeste-text-input-wrapper .celeste-text-input[type=date][data-v-3af287ef]::-webkit-clear-button, .celeste-text-input-wrapper .celeste-text-input[type=date][data-v-3af287ef]::-webkit-inner-spin-button {
2499
2501
  display: none;
2500
2502
  -webkit-appearance: none;
2501
2503
  appearance: none;
2502
2504
  }
2503
- .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 {
2505
+ .celeste-text-input-wrapper .celeste-text-input[type=date][data-v-3af287ef]::-ms-clear, .celeste-text-input-wrapper .celeste-text-input[type=date][data-v-3af287ef]::-ms-expand {
2504
2506
  display: none;
2505
2507
  }
2506
- .celeste-text-input-wrapper[data-v-2139c861]:has(.celeste-text-input-leading-node) {
2508
+ .celeste-text-input-wrapper[data-v-3af287ef]:has(.celeste-text-input-leading-node) {
2507
2509
  padding-inline-start: 0;
2508
2510
  }
2509
- .celeste-text-input-wrapper[data-v-2139c861]:has(.celeste-text-input-trailing-node) {
2511
+ .celeste-text-input-wrapper[data-v-3af287ef]:has(.celeste-text-input-trailing-node) {
2510
2512
  padding-inline-end: 0;
2511
2513
  }
2512
- .celeste-text-input-wrapper[data-v-2139c861]:has(.celeste-text-input:-moz-placeholder) {
2514
+ .celeste-text-input-wrapper[data-v-3af287ef]:has(.celeste-text-input:-moz-placeholder) {
2513
2515
  --celeste-text-input-icon-color: var(--color-text-soft-400);
2514
2516
  --celeste-text-input-affix-color: var(--color-text-soft-400);
2515
2517
  }
2516
- .celeste-text-input-wrapper[data-v-2139c861]:has(.celeste-text-input:placeholder-shown) {
2518
+ .celeste-text-input-wrapper[data-v-3af287ef]:has(.celeste-text-input:placeholder-shown) {
2517
2519
  --celeste-text-input-icon-color: var(--color-text-soft-400);
2518
2520
  --celeste-text-input-affix-color: var(--color-text-soft-400);
2519
2521
  }
2520
- .celeste-text-input-wrapper[data-v-2139c861]:hover:not(:has(.celeste-text-input:focus)) {
2522
+ .celeste-text-input-wrapper[data-v-3af287ef]:hover:not(:has(.celeste-text-input:focus)) {
2521
2523
  --celeste-text-input-drop-shadow: none;
2522
2524
  }
2523
- .celeste-text-input-wrapper[data-v-2139c861]:hover:not(:has(.celeste-text-input:focus)):not([has-error=true], :has(.celeste-text-input-node)) {
2525
+ .celeste-text-input-wrapper[data-v-3af287ef]:hover:not(:has(.celeste-text-input:focus)):not([has-error=true], :has(.celeste-text-input-node)) {
2524
2526
  --celeste-text-input-border-color: transparent;
2525
2527
  }
2526
- .celeste-text-input-wrapper[data-v-2139c861]:hover:not(:has(.celeste-text-input:focus)):not(:has(.celeste-text-input-node:hover)) {
2528
+ .celeste-text-input-wrapper[data-v-3af287ef]:hover:not(:has(.celeste-text-input:focus)):not(:has(.celeste-text-input-node:hover)) {
2527
2529
  --celeste-text-input-icon-color: var(--color-text-sub-600);
2528
2530
  --celeste-text-input-placeholder-color: var(--color-text-sub-600);
2529
2531
  background-color: var(--color-bg-weak-50);
2530
2532
  }
2531
- .celeste-text-input-wrapper[data-v-2139c861]:has(.celeste-text-input:focus) {
2533
+ .celeste-text-input-wrapper[data-v-3af287ef]:has(.celeste-text-input:focus) {
2532
2534
  --celeste-text-input-border-color: var(--color-stroke-strong-950);
2533
2535
  --celeste-text-input-drop-shadow: var(--shadow-buttons-important-focus);
2534
2536
  --celeste-text-input-placeholder-color: var(--color-text-sub-600);
2535
2537
  --celeste-text-input-icon-color: var(--color-text-sub-600);
2536
2538
  --celeste-text-input-affix-color: var(--color-text-sub-600);
2537
2539
  }
2538
- .celeste-text-input-wrapper:has(.celeste-text-input:focus)[has-error=true][data-v-2139c861] {
2540
+ .celeste-text-input-wrapper:has(.celeste-text-input:focus)[has-error=true][data-v-3af287ef] {
2539
2541
  --celeste-text-input-border-color: var(--color-state-error-base);
2540
2542
  --celeste-text-input-drop-shadow: var(--shadow-buttons-error-focus);
2541
2543
  }
2542
- .celeste-text-input-wrapper[data-v-2139c861] input:-webkit-autofill {
2544
+ .celeste-text-input-wrapper[data-v-3af287ef] input:-webkit-autofill {
2543
2545
  -webkit-transition: background-color 5000s ease-in-out 0s;
2544
2546
  transition: background-color 5000s ease-in-out 0s;
2545
2547
  -webkit-background-clip: text;
2546
2548
  background-clip: text;
2547
2549
  }
2548
- .celeste-text-input-wrapper[data-v-2139c861]:has(.celeste-text-input:disabled) {
2550
+ .celeste-text-input-wrapper[data-v-3af287ef]:has(.celeste-text-input:disabled) {
2549
2551
  --celeste-text-input-border-color: transparent;
2550
2552
  --celeste-text-input-drop-shadow: none;
2551
2553
  --celeste-text-input-affix-background-color: var(--color-bg-weak-50);
@@ -2557,38 +2559,41 @@ to {
2557
2559
  color: var(--color-text-disabled-300);
2558
2560
  pointer-events: none;
2559
2561
  }
2560
- .celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input[data-v-2139c861]::-moz-placeholder {
2562
+ .celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input[data-v-3af287ef]::-moz-placeholder {
2561
2563
  color: currentcolor;
2562
2564
  }
2563
- .celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input[data-v-2139c861]::placeholder {
2565
+ .celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input[data-v-3af287ef]::placeholder {
2564
2566
  color: currentcolor;
2565
2567
  }
2566
- .celeste-text-input-wrapper .celeste-text-input-icon[data-v-2139c861] {
2568
+ .celeste-text-input-wrapper .celeste-text-input-icon[data-v-3af287ef] {
2567
2569
  flex-shrink: 0;
2568
2570
  width: 20px;
2569
2571
  height: 20px;
2570
2572
  transition: all var(--animation-fast) ease-out;
2571
2573
  color: var(--celeste-text-input-icon-color);
2572
2574
  }
2573
- .celeste-text-input-wrapper[data-v-2139c861] .celeste-text-input-node.celeste-text-input-leading-node,
2574
- .celeste-text-input-wrapper[data-v-2139c861] .celeste-text-input-node.celeste-text-input-trailing-node {
2575
+ .celeste-text-input-wrapper[data-v-3af287ef] .celeste-text-input-node {
2576
+ position: relative;
2575
2577
  height: calc(var(--input-height) - var(--spacing-2));
2576
2578
  }
2577
- .celeste-text-input-wrapper[data-v-2139c861] .celeste-text-input-node.celeste-text-input-leading-node {
2579
+ .celeste-text-input-wrapper[data-v-3af287ef] .celeste-text-input-node::after {
2580
+ content: "";
2581
+ position: absolute;
2582
+ width: 1px;
2583
+ background-color: var(--color-stroke-soft-200);
2584
+ inset-block: 0;
2585
+ }
2586
+ .celeste-text-input-wrapper[data-v-3af287ef] .celeste-text-input-leading-node {
2578
2587
  margin-inline-end: calc(var(--input-padding) - var(--input-gap));
2579
- border-inline-end: 1px solid var(--color-stroke-soft-200);
2580
- border-start-start-radius: var(--input-radius);
2581
- border-start-end-radius: 0;
2582
- border-end-end-radius: 0;
2583
- border-end-start-radius: var(--input-radius);
2584
2588
  }
2585
- .celeste-text-input-wrapper[data-v-2139c861] .celeste-text-input-node.celeste-text-input-trailing-node {
2589
+ .celeste-text-input-wrapper[data-v-3af287ef] .celeste-text-input-leading-node::after {
2590
+ inset-inline-end: 0;
2591
+ }
2592
+ .celeste-text-input-wrapper[data-v-3af287ef] .celeste-text-input-trailing-node {
2586
2593
  margin-inline-start: calc(var(--input-padding) - var(--input-gap));
2587
- border-inline-start: 1px solid var(--color-stroke-soft-200);
2588
- border-start-start-radius: 0;
2589
- border-start-end-radius: var(--input-radius);
2590
- border-end-end-radius: var(--input-radius);
2591
- border-end-start-radius: 0;
2594
+ }
2595
+ .celeste-text-input-wrapper[data-v-3af287ef] .celeste-text-input-trailing-node::after {
2596
+ inset-inline-start: 0;
2592
2597
  }[data-v-cf42d877] .celeste-tooltip-content {
2593
2598
  display: flex;
2594
2599
  position: relative;
@@ -3649,7 +3654,7 @@ to {
3649
3654
  text-transform: uppercase;
3650
3655
  }
3651
3656
 
3652
- .celeste-command-input[data-v-f97ce037] {
3657
+ .celeste-command-input[data-v-e7fad0da] {
3653
3658
  --icon-color: var(--color-icon-soft-400);
3654
3659
  --placeholder-color: var(--color-text-soft-400);
3655
3660
 
@@ -3662,33 +3667,34 @@ to {
3662
3667
  font: var(--paragraph-sm);
3663
3668
  gap: var(--spacing-8);
3664
3669
  }
3665
- .celeste-command-input[data-v-f97ce037]:hover {
3670
+ .celeste-command-input[data-v-e7fad0da]:hover {
3666
3671
  --icon-color: var(--color-icon-sub-600);
3667
3672
  --placeholder-color: var(--color-text-sub-600);
3668
3673
 
3669
3674
  background: var(--color-bg-weak-50);
3670
3675
  }
3671
- .celeste-command-input-primitive[data-v-f97ce037] {
3676
+ .celeste-command-input-primitive[data-v-e7fad0da] {
3672
3677
  width: 100%;
3673
3678
  transition: color var(--animation-normal) ease;
3674
3679
  border: none;
3675
3680
  outline: none;
3676
3681
  background: transparent;
3682
+ box-shadow: none;
3677
3683
  font: inherit;
3678
3684
  }
3679
- .celeste-command-input-icon[data-v-f97ce037] {
3685
+ .celeste-command-input-icon[data-v-e7fad0da] {
3680
3686
  flex-shrink: 0;
3681
3687
  width: 18px;
3682
3688
  height: 18px;
3683
3689
  transition: color var(--animation-normal) ease;
3684
3690
  color: var(--icon-color);
3685
3691
  }
3686
- .celeste-command-input-primitive[data-v-f97ce037]::-moz-placeholder {
3692
+ .celeste-command-input-primitive[data-v-e7fad0da]::-moz-placeholder {
3687
3693
  -moz-transition: color var(--animation-normal) ease;
3688
3694
  transition: color var(--animation-normal) ease;
3689
3695
  color: var(--placeholder-color);
3690
3696
  }
3691
- .celeste-command-input-primitive[data-v-f97ce037]::placeholder {
3697
+ .celeste-command-input-primitive[data-v-e7fad0da]::placeholder {
3692
3698
  transition: color var(--animation-normal) ease;
3693
3699
  color: var(--placeholder-color);
3694
3700
  }
@@ -3833,6 +3839,7 @@ to {
3833
3839
  border: none;
3834
3840
  outline: none;
3835
3841
  background-color: transparent;
3842
+ box-shadow: none;
3836
3843
  color: inherit;
3837
3844
  text-align: center;
3838
3845
  }
@@ -7083,7 +7090,7 @@ to {
7083
7090
  .celeste-tag[aria-disabled=true][data-v-1a6ff455] {
7084
7091
  background-color: var(--color-bg-weak-50);
7085
7092
  color: var(--color-text-disabled-300);
7086
- }.celeste-textarea-wrapper[data-v-0f93b4b8] {
7093
+ }.celeste-textarea-wrapper[data-v-be6ed21c] {
7087
7094
  transition-property: background-color, border-color, box-shadow, text-decoration-color, color;
7088
7095
  transition-duration: var(--animation-fast);
7089
7096
  transition-timing-function: ease-out;
@@ -7101,18 +7108,18 @@ to {
7101
7108
  cursor: text;
7102
7109
  gap: var(--spacing-8);
7103
7110
  }
7104
- .celeste-textarea-wrapper[data-v-0f93b4b8]:hover:not(:focus-within) {
7111
+ .celeste-textarea-wrapper[data-v-be6ed21c]:hover:not(:focus-within) {
7105
7112
  border-color: var(--color-bg-weak-50);
7106
7113
  background: var(--color-bg-weak-50);
7107
7114
  box-shadow: none;
7108
7115
  color: var(--color-text-sub-600);
7109
7116
  }
7110
- .celeste-textarea-wrapper[data-v-0f93b4b8]:focus-within:not([aria-disabled=true]) {
7117
+ .celeste-textarea-wrapper[data-v-be6ed21c]:focus-within:not([aria-disabled=true]) {
7111
7118
  border: 1px solid var(--color-stroke-strong-950);
7112
7119
  outline: none;
7113
7120
  box-shadow: var(--shadow-buttons-important-focus);
7114
7121
  }
7115
- .celeste-textarea-wrapper .celeste-textarea-count[data-v-0f93b4b8] {
7122
+ .celeste-textarea-wrapper .celeste-textarea-count[data-v-be6ed21c] {
7116
7123
  --resize-handle-offset: 16px;
7117
7124
  display: flex;
7118
7125
  position: absolute;
@@ -7121,63 +7128,64 @@ to {
7121
7128
  inset-block-end: var(--spacing);
7122
7129
  inset-inline-end: calc(var(--spacing) + var(--resize-handle-offset));
7123
7130
  }
7124
- .celeste-textarea-wrapper[aria-disabled=true][data-v-0f93b4b8] {
7131
+ .celeste-textarea-wrapper[aria-disabled=true][data-v-be6ed21c] {
7125
7132
  border-color: transparent;
7126
7133
  background: var(--color-bg-weak-50);
7127
7134
  box-shadow: none;
7128
7135
  cursor: not-allowed;
7129
7136
  }
7130
- .celeste-textarea-wrapper[aria-disabled=true] .celeste-textarea-count[data-v-0f93b4b8] {
7137
+ .celeste-textarea-wrapper[aria-disabled=true] .celeste-textarea-count[data-v-be6ed21c] {
7131
7138
  color: var(--color-icon-disabled-300);
7132
7139
  }
7133
- .celeste-textarea-wrapper[error=true][data-v-0f93b4b8] {
7140
+ .celeste-textarea-wrapper[error=true][data-v-be6ed21c] {
7134
7141
  border: 1px solid var(--color-state-error-base);
7135
7142
  }
7136
- .celeste-textarea-wrapper[error=true] .celeste-textarea-count[data-v-0f93b4b8] {
7143
+ .celeste-textarea-wrapper[error=true] .celeste-textarea-count[data-v-be6ed21c] {
7137
7144
  color: var(--color-state-error-base);
7138
7145
  }
7139
- .celeste-textarea-wrapper .celeste-textarea[data-v-0f93b4b8] {
7146
+ .celeste-textarea-wrapper .celeste-textarea[data-v-be6ed21c] {
7140
7147
  transition-property: background-color, border-color, box-shadow, text-decoration-color, color;
7141
7148
  transition-duration: var(--animation-fast);
7142
7149
  transition-timing-function: ease-out;
7143
7150
  width: 100%;
7144
7151
  border: none;
7145
7152
  background: transparent;
7153
+ box-shadow: none;
7146
7154
  color: inherit;
7147
7155
  font-family: inherit;
7148
7156
  font-size: var(--font-size-2);
7149
7157
  resize: vertical;
7150
7158
  }
7151
- .celeste-textarea-wrapper .celeste-textarea[data-v-0f93b4b8]::-moz-placeholder {
7159
+ .celeste-textarea-wrapper .celeste-textarea[data-v-be6ed21c]::-moz-placeholder {
7152
7160
  -moz-transition-property: background-color, border-color, box-shadow, text-decoration-color, color;
7153
7161
  transition-property: background-color, border-color, box-shadow, text-decoration-color, color;
7154
7162
  transition-duration: var(--animation-fast);
7155
7163
  transition-timing-function: ease-out;
7156
7164
  color: var(--color-text-soft-400);
7157
7165
  }
7158
- .celeste-textarea-wrapper .celeste-textarea[data-v-0f93b4b8]::placeholder {
7166
+ .celeste-textarea-wrapper .celeste-textarea[data-v-be6ed21c]::placeholder {
7159
7167
  transition-property: background-color, border-color, box-shadow, text-decoration-color, color;
7160
7168
  transition-duration: var(--animation-fast);
7161
7169
  transition-timing-function: ease-out;
7162
7170
  color: var(--color-text-soft-400);
7163
7171
  }
7164
- .celeste-textarea-wrapper .celeste-textarea[data-v-0f93b4b8]:hover::-moz-placeholder {
7172
+ .celeste-textarea-wrapper .celeste-textarea[data-v-be6ed21c]:hover::-moz-placeholder {
7165
7173
  color: var(--color-text-sub-600);
7166
7174
  }
7167
- .celeste-textarea-wrapper .celeste-textarea[data-v-0f93b4b8]:hover::placeholder {
7175
+ .celeste-textarea-wrapper .celeste-textarea[data-v-be6ed21c]:hover::placeholder {
7168
7176
  color: var(--color-text-sub-600);
7169
7177
  }
7170
- .celeste-textarea-wrapper .celeste-textarea[data-v-0f93b4b8]:focus-visible, .celeste-textarea-wrapper .celeste-textarea[data-v-0f93b4b8]:focus {
7178
+ .celeste-textarea-wrapper .celeste-textarea[data-v-be6ed21c]:focus-visible, .celeste-textarea-wrapper .celeste-textarea[data-v-be6ed21c]:focus {
7171
7179
  outline: none;
7172
7180
  }
7173
- .celeste-textarea-wrapper .celeste-textarea[data-v-0f93b4b8]:disabled {
7181
+ .celeste-textarea-wrapper .celeste-textarea[data-v-be6ed21c]:disabled {
7174
7182
  color: var(--color-text-disabled-300);
7175
7183
  pointer-events: none;
7176
7184
  }
7177
- .celeste-textarea-wrapper .celeste-textarea[data-v-0f93b4b8]:disabled::-moz-placeholder {
7185
+ .celeste-textarea-wrapper .celeste-textarea[data-v-be6ed21c]:disabled::-moz-placeholder {
7178
7186
  color: var(--color-text-disabled-300);
7179
7187
  }
7180
- .celeste-textarea-wrapper .celeste-textarea[data-v-0f93b4b8]:disabled::placeholder {
7188
+ .celeste-textarea-wrapper .celeste-textarea[data-v-be6ed21c]:disabled::placeholder {
7181
7189
  color: var(--color-text-disabled-300);
7182
7190
  }
7183
7191
  .celeste-sidebar-separator {
@@ -110,7 +110,7 @@ var text_input_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, v
110
110
  });
111
111
  //#endregion
112
112
  //#region src/components/text-input/text-input.vue
113
- 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"]]);
113
+ 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-3af287ef"]]);
114
114
  //#endregion
115
115
  Object.defineProperty(exports, "text_input_default", {
116
116
  enumerable: true,
@@ -56,7 +56,7 @@ var textarea_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue
56
56
  });
57
57
  //#endregion
58
58
  //#region src/components/textarea/textarea.vue
59
- 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"]]);
59
+ 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"]]);
60
60
  //#endregion
61
61
  Object.defineProperty(exports, "textarea_default", {
62
62
  enumerable: true,
@@ -46,6 +46,6 @@ var command_input_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0
46
46
  });
47
47
  //#endregion
48
48
  //#region src/components/command/command-input.vue
49
- 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"]]);
49
+ 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"]]);
50
50
  //#endregion
51
51
  module.exports = command_input_default;
@@ -109,6 +109,6 @@ var text_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
109
109
  ], 10, _hoisted_1);
110
110
  };
111
111
  }
112
- }), [["__scopeId", "data-v-2139c861"]]);
112
+ }), [["__scopeId", "data-v-3af287ef"]]);
113
113
  //#endregion
114
114
  export { text_input_default as t };
@@ -55,6 +55,6 @@ var textarea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
55
55
  }), 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);
56
56
  };
57
57
  }
58
- }), [["__scopeId", "data-v-0f93b4b8"]]);
58
+ }), [["__scopeId", "data-v-be6ed21c"]]);
59
59
  //#endregion
60
60
  export { textarea_default as t };
@@ -45,6 +45,6 @@ var command_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
45
45
  }), null, 16, ["class"])]);
46
46
  };
47
47
  }
48
- }), [["__scopeId", "data-v-f97ce037"]]);
48
+ }), [["__scopeId", "data-v-e7fad0da"]]);
49
49
  //#endregion
50
50
  export { command_input_default as default };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@youcan/celeste",
3
3
  "type": "module",
4
- "version": "0.21.0",
4
+ "version": "0.21.2",
5
5
  "author": "YouCan <tech@youcan.shop>",
6
6
  "repository": {
7
7
  "type": "git",
@@ -52,8 +52,8 @@
52
52
  "reka-ui": "~2.10.5",
53
53
  "tinycolor2": "^1.6.0",
54
54
  "vue-sonner": "^2.0.9",
55
- "@youcan/celeste-icons": "0.21.0",
56
- "@youcan/celeste-tokens": "0.21.0"
55
+ "@youcan/celeste-icons": "0.21.2",
56
+ "@youcan/celeste-tokens": "0.21.2"
57
57
  },
58
58
  "devDependencies": {
59
59
  "@chromatic-com/storybook": "^5.3.0",
@@ -61,6 +61,7 @@ const forwardedProps = useForwardProps(delegatedProps);
61
61
  border: none;
62
62
  outline: none;
63
63
  background: transparent;
64
+ box-shadow: none;
64
65
  font: inherit;
65
66
  }
66
67
 
@@ -95,6 +95,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
95
95
  border: none;
96
96
  outline: none;
97
97
  background-color: transparent;
98
+ box-shadow: none;
98
99
  color: inherit;
99
100
  text-align: center;
100
101
  }
@@ -109,6 +109,7 @@ function clearInput() {
109
109
  align-items: center;
110
110
  height: var(--input-height);
111
111
  padding-inline: var(--input-padding);
112
+ overflow: hidden;
112
113
  transition: all var(--animation-fast) ease-out;
113
114
  border: 1px solid var(--celeste-text-input-border-color);
114
115
  border-radius: var(--input-radius);
@@ -153,6 +154,7 @@ function clearInput() {
153
154
  border: none;
154
155
  outline: none;
155
156
  background-color: transparent;
157
+ box-shadow: none;
156
158
  color: inherit;
157
159
  font: inherit;
158
160
 
@@ -277,27 +279,33 @@ function clearInput() {
277
279
  color: var(--celeste-text-input-icon-color);
278
280
  }
279
281
 
280
- :deep(.celeste-text-input-node.celeste-text-input-leading-node),
281
- :deep(.celeste-text-input-node.celeste-text-input-trailing-node) {
282
+ :deep(.celeste-text-input-node) {
283
+ position: relative;
282
284
  height: calc(var(--input-height) - var(--spacing-2));
283
285
  }
284
286
 
285
- :deep(.celeste-text-input-node.celeste-text-input-leading-node) {
287
+ :deep(.celeste-text-input-node)::after {
288
+ content: '';
289
+ position: absolute;
290
+ width: 1px;
291
+ background-color: var(--color-stroke-soft-200);
292
+ inset-block: 0;
293
+ }
294
+
295
+ :deep(.celeste-text-input-leading-node) {
286
296
  margin-inline-end: calc(var(--input-padding) - var(--input-gap));
287
- border-inline-end: 1px solid var(--color-stroke-soft-200);
288
- border-start-start-radius: var(--input-radius);
289
- border-start-end-radius: 0;
290
- border-end-end-radius: 0;
291
- border-end-start-radius: var(--input-radius);
292
297
  }
293
298
 
294
- :deep(.celeste-text-input-node.celeste-text-input-trailing-node) {
299
+ :deep(.celeste-text-input-leading-node)::after {
300
+ inset-inline-end: 0;
301
+ }
302
+
303
+ :deep(.celeste-text-input-trailing-node) {
295
304
  margin-inline-start: calc(var(--input-padding) - var(--input-gap));
296
- border-inline-start: 1px solid var(--color-stroke-soft-200);
297
- border-start-start-radius: 0;
298
- border-start-end-radius: var(--input-radius);
299
- border-end-end-radius: var(--input-radius);
300
- border-end-start-radius: 0;
305
+ }
306
+
307
+ :deep(.celeste-text-input-trailing-node)::after {
308
+ inset-inline-start: 0;
301
309
  }
302
310
  }
303
311
  </style>
@@ -118,6 +118,7 @@ const modelValue = defineModel<string>();
118
118
  width: 100%;
119
119
  border: none;
120
120
  background: transparent;
121
+ box-shadow: none;
121
122
  color: inherit;
122
123
  font-family: inherit;
123
124
  font-size: var(--font-size-2);