@youcan/celeste 0.6.65 → 0.6.66
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/dist/celeste.css
CHANGED
|
@@ -2387,7 +2387,7 @@ to {
|
|
|
2387
2387
|
.celeste-text-input-button[inline=true][data-v-00ed5aef]:hover {
|
|
2388
2388
|
background-color: transparent !important;
|
|
2389
2389
|
}/* stylelint-disable no-descending-specificity */
|
|
2390
|
-
.celeste-text-input-wrapper[data-v-
|
|
2390
|
+
.celeste-text-input-wrapper[data-v-c60663fe] {
|
|
2391
2391
|
--celeste-text-input-border-color: var(--color-stroke-soft-200);
|
|
2392
2392
|
--celeste-text-input-drop-shadow: var(--shadow-regular-xs);
|
|
2393
2393
|
--celeste-text-input-icon-color: var(--color-text-soft-400);
|
|
@@ -2410,28 +2410,28 @@ to {
|
|
|
2410
2410
|
font: var(--paragraph-sm);
|
|
2411
2411
|
gap: var(--input-gap);
|
|
2412
2412
|
}
|
|
2413
|
-
.celeste-text-input-wrapper[size=xs][data-v-
|
|
2413
|
+
.celeste-text-input-wrapper[size=xs][data-v-c60663fe] {
|
|
2414
2414
|
--input-gap: 8px;
|
|
2415
2415
|
--input-height: 32px;
|
|
2416
2416
|
--input-radius: var(--radius-8);
|
|
2417
2417
|
--input-padding: calc(var(--spacing-8) - var(--spacing-2));
|
|
2418
2418
|
}
|
|
2419
|
-
.celeste-text-input-wrapper[size=sm][data-v-
|
|
2419
|
+
.celeste-text-input-wrapper[size=sm][data-v-c60663fe] {
|
|
2420
2420
|
--input-gap: 6px;
|
|
2421
2421
|
--input-height: 36px;
|
|
2422
2422
|
--input-radius: var(--radius-8);
|
|
2423
2423
|
--input-padding: var(--spacing-8);
|
|
2424
2424
|
}
|
|
2425
|
-
.celeste-text-input-wrapper[size=md][data-v-
|
|
2425
|
+
.celeste-text-input-wrapper[size=md][data-v-c60663fe] {
|
|
2426
2426
|
--input-gap: 6px;
|
|
2427
2427
|
--input-height: 40px;
|
|
2428
2428
|
--input-radius: var(--radius-10);
|
|
2429
2429
|
--input-padding: var(--spacing-10);
|
|
2430
2430
|
}
|
|
2431
|
-
.celeste-text-input-wrapper[has-error=true][data-v-
|
|
2431
|
+
.celeste-text-input-wrapper[has-error=true][data-v-c60663fe] {
|
|
2432
2432
|
--celeste-text-input-border-color: var(--color-state-error-base);
|
|
2433
2433
|
}
|
|
2434
|
-
.celeste-text-input-wrapper .celeste-text-input[data-v-
|
|
2434
|
+
.celeste-text-input-wrapper .celeste-text-input[data-v-c60663fe] {
|
|
2435
2435
|
width: 100%;
|
|
2436
2436
|
height: 100%;
|
|
2437
2437
|
padding: 0;
|
|
@@ -2441,52 +2441,49 @@ to {
|
|
|
2441
2441
|
color: inherit;
|
|
2442
2442
|
font: inherit;
|
|
2443
2443
|
}
|
|
2444
|
-
.celeste-text-input-wrapper .celeste-text-input[data-v-
|
|
2444
|
+
.celeste-text-input-wrapper .celeste-text-input[data-v-c60663fe]::-moz-placeholder {
|
|
2445
2445
|
-moz-transition: color var(--animation-fast) ease-out;
|
|
2446
2446
|
transition: color var(--animation-fast) ease-out;
|
|
2447
2447
|
color: var(--celeste-text-input-placeholder-color);
|
|
2448
2448
|
}
|
|
2449
|
-
.celeste-text-input-wrapper .celeste-text-input[data-v-
|
|
2449
|
+
.celeste-text-input-wrapper .celeste-text-input[data-v-c60663fe]::placeholder {
|
|
2450
2450
|
transition: color var(--animation-fast) ease-out;
|
|
2451
2451
|
color: var(--celeste-text-input-placeholder-color);
|
|
2452
2452
|
}
|
|
2453
|
-
.celeste-text-input-wrapper .celeste-text-input[type=search][data-v-
|
|
2453
|
+
.celeste-text-input-wrapper .celeste-text-input[type=search][data-v-c60663fe]::-webkit-search-cancel-button {
|
|
2454
2454
|
display: none;
|
|
2455
2455
|
-webkit-appearance: none;
|
|
2456
2456
|
appearance: none;
|
|
2457
2457
|
}
|
|
2458
|
-
.celeste-text-input-wrapper .celeste-text-input[type=search][data-v-
|
|
2458
|
+
.celeste-text-input-wrapper .celeste-text-input[type=search][data-v-c60663fe]::-webkit-search-decoration {
|
|
2459
2459
|
display: none;
|
|
2460
2460
|
-webkit-appearance: none;
|
|
2461
2461
|
appearance: none;
|
|
2462
2462
|
}
|
|
2463
|
-
.celeste-text-input-wrapper[data-v-
|
|
2463
|
+
.celeste-text-input-wrapper[data-v-c60663fe]:has(.celeste-text-input-leading-node) {
|
|
2464
2464
|
padding-inline-start: 0;
|
|
2465
2465
|
}
|
|
2466
|
-
.celeste-text-input-wrapper[data-v-
|
|
2466
|
+
.celeste-text-input-wrapper[data-v-c60663fe]:has(.celeste-text-input-trailing-node) {
|
|
2467
2467
|
padding-inline-end: 0;
|
|
2468
2468
|
}
|
|
2469
|
-
.celeste-text-input-wrapper[data-v-
|
|
2469
|
+
.celeste-text-input-wrapper[data-v-c60663fe]:has(.celeste-text-input:focus) {
|
|
2470
2470
|
--celeste-text-input-border-color: var(--color-stroke-strong-950);
|
|
2471
2471
|
--celeste-text-input-placeholder-color: var(--color-text-sub-600);
|
|
2472
2472
|
--celeste-text-input-icon-color: var(--color-text-sub-600);
|
|
2473
2473
|
--celeste-text-input-affix-color: var(--color-text-sub-600);
|
|
2474
2474
|
outline-color: var(--color-stroke-soft-200);
|
|
2475
2475
|
}
|
|
2476
|
-
.celeste-text-input-wrapper:has(.celeste-text-input:focus)[has-error=true][data-v-
|
|
2476
|
+
.celeste-text-input-wrapper:has(.celeste-text-input:focus)[has-error=true][data-v-c60663fe] {
|
|
2477
2477
|
--celeste-text-input-border-color: var(--color-state-error-base);
|
|
2478
2478
|
outline-color: var(--color-state-error-lighter);
|
|
2479
2479
|
}
|
|
2480
|
-
.celeste-text-input-wrapper
|
|
2481
|
-
.celeste-text-input-wrapper input[data-v-89cd60b5]:-webkit-autofill:hover,
|
|
2482
|
-
.celeste-text-input-wrapper input[data-v-89cd60b5]:-webkit-autofill:focus,
|
|
2483
|
-
.celeste-text-input-wrapper input[data-v-89cd60b5]:-webkit-autofill:active {
|
|
2480
|
+
.celeste-text-input-wrapper[data-v-c60663fe] input:-webkit-autofill {
|
|
2484
2481
|
-webkit-transition: background-color 5000s ease-in-out 0s;
|
|
2485
2482
|
transition: background-color 5000s ease-in-out 0s;
|
|
2486
2483
|
-webkit-background-clip: text;
|
|
2487
2484
|
background-clip: text;
|
|
2488
2485
|
}
|
|
2489
|
-
.celeste-text-input-wrapper[data-v-
|
|
2486
|
+
.celeste-text-input-wrapper[data-v-c60663fe]:has(.celeste-text-input:disabled) {
|
|
2490
2487
|
--celeste-text-input-border-color: transparent;
|
|
2491
2488
|
--celeste-text-input-drop-shadow: none;
|
|
2492
2489
|
--celeste-text-input-affix-background-color: var(--color-bg-weak-50);
|
|
@@ -2498,56 +2495,56 @@ to {
|
|
|
2498
2495
|
color: var(--color-text-disabled-300);
|
|
2499
2496
|
pointer-events: none;
|
|
2500
2497
|
}
|
|
2501
|
-
.celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input[data-v-
|
|
2498
|
+
.celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input[data-v-c60663fe]::-moz-placeholder {
|
|
2502
2499
|
color: currentcolor;
|
|
2503
2500
|
}
|
|
2504
|
-
.celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input[data-v-
|
|
2501
|
+
.celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input[data-v-c60663fe]::placeholder {
|
|
2505
2502
|
color: currentcolor;
|
|
2506
2503
|
}
|
|
2507
|
-
.celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input-clear-button[data-v-
|
|
2504
|
+
.celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input-clear-button[data-v-c60663fe] {
|
|
2508
2505
|
color: var(--color-text-disabled-300);
|
|
2509
2506
|
pointer-events: none;
|
|
2510
2507
|
}
|
|
2511
|
-
.celeste-text-input-wrapper[data-v-
|
|
2508
|
+
.celeste-text-input-wrapper[data-v-c60663fe]:has(.celeste-text-input:hover:not(:focus, :disabled)):not(:has(.celeste-text-input-node)) {
|
|
2512
2509
|
--celeste-text-input-border-color: transparent;
|
|
2513
2510
|
}
|
|
2514
|
-
.celeste-text-input-wrapper[data-v-
|
|
2511
|
+
.celeste-text-input-wrapper[data-v-c60663fe]:has(.celeste-text-input:hover:not(:focus, :disabled)):not(:has(.celeste-text-input-node:hover)) {
|
|
2515
2512
|
--celeste-text-input-icon-color: var(--color-text-sub-600);
|
|
2516
2513
|
--celeste-text-input-placeholder-color: var(--color-text-sub-600);
|
|
2517
2514
|
background-color: var(--color-bg-weak-50);
|
|
2518
2515
|
}
|
|
2519
|
-
.celeste-text-input-wrapper .celeste-text-input-icon[data-v-
|
|
2516
|
+
.celeste-text-input-wrapper .celeste-text-input-icon[data-v-c60663fe] {
|
|
2520
2517
|
flex-shrink: 0;
|
|
2521
2518
|
width: 20px;
|
|
2522
2519
|
height: 20px;
|
|
2523
2520
|
transition: all var(--animation-fast) ease-out;
|
|
2524
2521
|
color: var(--celeste-text-input-icon-color);
|
|
2525
2522
|
}
|
|
2526
|
-
.celeste-text-input-wrapper[data-v-
|
|
2527
|
-
.celeste-text-input-wrapper[data-v-
|
|
2523
|
+
.celeste-text-input-wrapper[data-v-c60663fe] .celeste-text-input-node.celeste-text-input-leading-node,
|
|
2524
|
+
.celeste-text-input-wrapper[data-v-c60663fe] .celeste-text-input-node.celeste-text-input-trailing-node {
|
|
2528
2525
|
height: calc(var(--input-height) - var(--spacing-2)) !important;
|
|
2529
2526
|
}
|
|
2530
|
-
[dir=ltr] .celeste-text-input-wrapper[data-v-
|
|
2527
|
+
[dir=ltr] .celeste-text-input-wrapper[data-v-c60663fe] .celeste-text-input-node.celeste-text-input-leading-node {
|
|
2531
2528
|
border-right: 1px solid var(--color-stroke-soft-200) !important;
|
|
2532
2529
|
border-radius: var(--input-radius) 0 0 var(--input-radius) !important;
|
|
2533
2530
|
}
|
|
2534
|
-
[dir=ltr] .celeste-text-input-wrapper[data-v-
|
|
2531
|
+
[dir=ltr] .celeste-text-input-wrapper[data-v-c60663fe] .celeste-text-input-node.celeste-text-input-trailing-node {
|
|
2535
2532
|
border-left: 1px solid var(--color-stroke-soft-200) !important;
|
|
2536
2533
|
border-radius: 0 var(--input-radius) var(--input-radius) 0 !important;
|
|
2537
2534
|
}
|
|
2538
|
-
[dir=rtl] .celeste-text-input-wrapper[data-v-
|
|
2535
|
+
[dir=rtl] .celeste-text-input-wrapper[data-v-c60663fe] .celeste-text-input-node.celeste-text-input-leading-node {
|
|
2539
2536
|
border-left: 1px solid var(--color-stroke-soft-200) !important;
|
|
2540
2537
|
border-radius: 0 var(--input-radius) var(--input-radius) 0 !important;
|
|
2541
2538
|
}
|
|
2542
|
-
[dir=rtl] .celeste-text-input-wrapper[data-v-
|
|
2539
|
+
[dir=rtl] .celeste-text-input-wrapper[data-v-c60663fe] .celeste-text-input-node.celeste-text-input-trailing-node {
|
|
2543
2540
|
border-right: 1px solid var(--color-stroke-soft-200) !important;
|
|
2544
2541
|
border-radius: var(--input-radius) 0 0 var(--input-radius) !important;
|
|
2545
2542
|
}
|
|
2546
|
-
.celeste-text-input-wrapper[data-v-
|
|
2543
|
+
.celeste-text-input-wrapper[data-v-c60663fe] .celeste-text-input-node.celeste-text-input-leading-node {
|
|
2547
2544
|
border-right: 1px solid var(--color-stroke-soft-200) !important;
|
|
2548
2545
|
border-radius: var(--input-radius) 0 0 var(--input-radius) !important;
|
|
2549
2546
|
}
|
|
2550
|
-
.celeste-text-input-wrapper[data-v-
|
|
2547
|
+
.celeste-text-input-wrapper[data-v-c60663fe] .celeste-text-input-node.celeste-text-input-trailing-node {
|
|
2551
2548
|
border-left: 1px solid var(--color-stroke-soft-200) !important;
|
|
2552
2549
|
border-radius: 0 var(--input-radius) var(--input-radius) 0 !important;
|
|
2553
2550
|
}.celeste-color-swatch[data-v-e0b25a98] {
|
package/dist/cjs/text-input.js
CHANGED
|
@@ -116,5 +116,5 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
|
|
|
116
116
|
};
|
|
117
117
|
}
|
|
118
118
|
});
|
|
119
|
-
const TextInput = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-
|
|
119
|
+
const TextInput = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-c60663fe"]]);
|
|
120
120
|
module.exports = TextInput;
|
package/dist/es/text-input.js
CHANGED
|
@@ -115,7 +115,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
115
115
|
};
|
|
116
116
|
}
|
|
117
117
|
});
|
|
118
|
-
const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-
|
|
118
|
+
const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c60663fe"]]);
|
|
119
119
|
export {
|
|
120
120
|
TextInput as default
|
|
121
121
|
};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@youcan/celeste",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.6.
|
|
4
|
+
"version": "0.6.66",
|
|
5
5
|
"author": "YouCan <tech@youcan.shop>",
|
|
6
6
|
"keywords": [
|
|
7
7
|
"youcan",
|
|
@@ -44,8 +44,8 @@
|
|
|
44
44
|
"radix-vue": "^1.9.12",
|
|
45
45
|
"tinycolor2": "^1.6.0",
|
|
46
46
|
"vue-sonner": "^2.0.2",
|
|
47
|
-
"@youcan/celeste-icons": "0.6.
|
|
48
|
-
"@youcan/celeste-tokens": "0.6.
|
|
47
|
+
"@youcan/celeste-icons": "0.6.66",
|
|
48
|
+
"@youcan/celeste-tokens": "0.6.66"
|
|
49
49
|
},
|
|
50
50
|
"devDependencies": {
|
|
51
51
|
"@chromatic-com/storybook": "^4.1.1",
|
|
@@ -195,10 +195,12 @@ export interface TextInputProps extends /* @vue-ignore */ InputHTMLAttributes {
|
|
|
195
195
|
}
|
|
196
196
|
}
|
|
197
197
|
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
198
|
+
:deep(
|
|
199
|
+
input:-webkit-autofill,
|
|
200
|
+
input:-webkit-autofill:hover,
|
|
201
|
+
input:-webkit-autofill:focus,
|
|
202
|
+
input:-webkit-autofill:active
|
|
203
|
+
) {
|
|
202
204
|
transition: background-color 5000s ease-in-out 0s;
|
|
203
205
|
background-clip: text;
|
|
204
206
|
}
|