@youcan/celeste 0.6.51 → 0.6.52
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 +46 -41
- package/dist/cjs/checkbox-card.js +1 -1
- package/dist/cjs/radio-group-card.js +1 -1
- package/dist/es/checkbox-card.js +1 -1
- package/dist/es/radio-group-card.js +1 -1
- package/package.json +3 -3
- package/src/components/checkbox/checkbox-card.vue +4 -1
- package/src/components/radio-group/radio-group-card.vue +4 -0
package/dist/celeste.css
CHANGED
|
@@ -1978,13 +1978,12 @@ to {
|
|
|
1978
1978
|
.celeste-button-intent-error:not(:disabled).celeste-button-variant-ghost[data-v-ba4c26eb]:not(:disabled):focus:not(:disabled) {
|
|
1979
1979
|
outline: none;
|
|
1980
1980
|
box-shadow: var(--shadow-buttons-error-focus);
|
|
1981
|
-
}[data-v-
|
|
1981
|
+
}[data-v-6fb023b7] {
|
|
1982
1982
|
box-sizing: border-box;
|
|
1983
1983
|
}
|
|
1984
|
-
.celeste-checkbox-card[data-v-
|
|
1984
|
+
.celeste-checkbox-card[data-v-6fb023b7] {
|
|
1985
1985
|
display: flex;
|
|
1986
1986
|
align-items: flex-start;
|
|
1987
|
-
justify-content: space-between;
|
|
1988
1987
|
padding: var(--spacing-16);
|
|
1989
1988
|
transition: all var(--animation-fast) ease-out;
|
|
1990
1989
|
border: 1px solid var(--color-stroke-soft-200);
|
|
@@ -1995,21 +1994,21 @@ to {
|
|
|
1995
1994
|
font: var(--paragraph-sm);
|
|
1996
1995
|
gap: var(--spacing-14);
|
|
1997
1996
|
}
|
|
1998
|
-
.celeste-checkbox-card[data-v-
|
|
1997
|
+
.celeste-checkbox-card[data-v-6fb023b7]:not(.celeste-checkbox-card-disabled) {
|
|
1999
1998
|
cursor: pointer;
|
|
2000
1999
|
}
|
|
2001
|
-
.celeste-checkbox-card[data-v-
|
|
2000
|
+
.celeste-checkbox-card[data-v-6fb023b7]:has([data-state=checked]):not(.celeste-checkbox-card-disabled) {
|
|
2002
2001
|
border-color: var(--color-primary-base);
|
|
2003
2002
|
box-shadow: none;
|
|
2004
2003
|
}
|
|
2005
|
-
.celeste-checkbox-card[data-v-
|
|
2004
|
+
.celeste-checkbox-card[data-v-6fb023b7]:hover:not(.celeste-checkbox-card-disabled), .celeste-checkbox-card[data-v-6fb023b7]:focus-visible:not(.celeste-checkbox-card-disabled) {
|
|
2006
2005
|
background-color: var(--color-bg-weak-50);
|
|
2007
2006
|
box-shadow: none;
|
|
2008
2007
|
}
|
|
2009
|
-
.celeste-checkbox-card[data-v-
|
|
2008
|
+
.celeste-checkbox-card[data-v-6fb023b7]:hover:not(.celeste-checkbox-card-disabled):not(:has([data-state=checked])), .celeste-checkbox-card[data-v-6fb023b7]:focus-visible:not(.celeste-checkbox-card-disabled):not(:has([data-state=checked])) {
|
|
2010
2009
|
border-color: transparent;
|
|
2011
2010
|
}
|
|
2012
|
-
.celeste-checkbox-card-preview[data-v-
|
|
2011
|
+
.celeste-checkbox-card-preview[data-v-6fb023b7] {
|
|
2013
2012
|
display: flex;
|
|
2014
2013
|
position: relative;
|
|
2015
2014
|
flex-shrink: 0;
|
|
@@ -2023,15 +2022,15 @@ to {
|
|
|
2023
2022
|
background-color: var(--color-bg-white-0);
|
|
2024
2023
|
box-shadow: var(--shadow-regular-xs);
|
|
2025
2024
|
}
|
|
2026
|
-
.celeste-checkbox-card-preview-icon i[data-v-
|
|
2025
|
+
.celeste-checkbox-card-preview-icon i[data-v-6fb023b7] {
|
|
2027
2026
|
width: 20px;
|
|
2028
2027
|
height: 20px;
|
|
2029
2028
|
color: var(--color-icon-sub-600);
|
|
2030
2029
|
}
|
|
2031
|
-
.celeste-checkbox-card-preview-image[data-v-
|
|
2030
|
+
.celeste-checkbox-card-preview-image[data-v-6fb023b7] {
|
|
2032
2031
|
border: none;
|
|
2033
2032
|
}
|
|
2034
|
-
.celeste-checkbox-card-preview-image i[data-v-
|
|
2033
|
+
.celeste-checkbox-card-preview-image i[data-v-6fb023b7] {
|
|
2035
2034
|
position: absolute;
|
|
2036
2035
|
z-index: 0;
|
|
2037
2036
|
top: 50%;
|
|
@@ -2041,21 +2040,21 @@ to {
|
|
|
2041
2040
|
transform: translate(-50%, -50%);
|
|
2042
2041
|
color: var(--color-icon-sub-600);
|
|
2043
2042
|
}
|
|
2044
|
-
.celeste-checkbox-card-preview-image[data-v-
|
|
2043
|
+
.celeste-checkbox-card-preview-image[data-v-6fb023b7] img {
|
|
2045
2044
|
z-index: 1000;
|
|
2046
2045
|
}
|
|
2047
|
-
.celeste-checkbox-card-content[data-v-
|
|
2046
|
+
.celeste-checkbox-card-content[data-v-6fb023b7] {
|
|
2048
2047
|
display: flex;
|
|
2049
2048
|
flex-direction: column;
|
|
2050
2049
|
gap: var(--spacing-4);
|
|
2051
2050
|
}
|
|
2052
|
-
.celeste-checkbox-card-row[data-v-
|
|
2051
|
+
.celeste-checkbox-card-row[data-v-6fb023b7] {
|
|
2053
2052
|
display: flex;
|
|
2054
2053
|
flex-shrink: 1;
|
|
2055
2054
|
align-items: center;
|
|
2056
2055
|
gap: var(--spacing-8);
|
|
2057
2056
|
}
|
|
2058
|
-
.celeste-checkbox-card-label[data-v-
|
|
2057
|
+
.celeste-checkbox-card-label[data-v-6fb023b7] {
|
|
2059
2058
|
flex-shrink: 1;
|
|
2060
2059
|
min-width: 0;
|
|
2061
2060
|
overflow: hidden;
|
|
@@ -2064,7 +2063,7 @@ to {
|
|
|
2064
2063
|
text-overflow: ellipsis;
|
|
2065
2064
|
white-space: nowrap;
|
|
2066
2065
|
}
|
|
2067
|
-
.celeste-checkbox-card-sublabel[data-v-
|
|
2066
|
+
.celeste-checkbox-card-sublabel[data-v-6fb023b7] {
|
|
2068
2067
|
flex-shrink: 1;
|
|
2069
2068
|
min-width: 0;
|
|
2070
2069
|
overflow: hidden;
|
|
@@ -2073,20 +2072,23 @@ to {
|
|
|
2073
2072
|
text-overflow: ellipsis;
|
|
2074
2073
|
white-space: nowrap;
|
|
2075
2074
|
}
|
|
2076
|
-
.celeste-checkbox-card-description[data-v-
|
|
2075
|
+
.celeste-checkbox-card-description[data-v-6fb023b7] {
|
|
2077
2076
|
color: var(--color-text-sub-600);
|
|
2078
2077
|
font: var(--paragraph-xs);
|
|
2079
2078
|
}
|
|
2080
|
-
.celeste-checkbox-card-
|
|
2079
|
+
[data-v-6fb023b7] .celeste-checkbox-card-checkbox {
|
|
2080
|
+
margin-inline-start: auto;
|
|
2081
|
+
}
|
|
2082
|
+
.celeste-checkbox-card-disabled[data-v-6fb023b7] {
|
|
2081
2083
|
cursor: not-allowed;
|
|
2082
2084
|
}
|
|
2083
|
-
.celeste-checkbox-card-disabled .celeste-checkbox-card-label[data-v-
|
|
2085
|
+
.celeste-checkbox-card-disabled .celeste-checkbox-card-label[data-v-6fb023b7] {
|
|
2084
2086
|
color: var(--color-text-sub-600);
|
|
2085
2087
|
}
|
|
2086
|
-
.celeste-checkbox-card-disabled .celeste-checkbox-card-sublabel[data-v-
|
|
2088
|
+
.celeste-checkbox-card-disabled .celeste-checkbox-card-sublabel[data-v-6fb023b7] {
|
|
2087
2089
|
color: var(--color-text-soft-400);
|
|
2088
2090
|
}
|
|
2089
|
-
.celeste-checkbox-card-disabled .celeste-checkbox-card-description[data-v-
|
|
2091
|
+
.celeste-checkbox-card-disabled .celeste-checkbox-card-description[data-v-6fb023b7] {
|
|
2090
2092
|
color: var(--color-text-soft-400);
|
|
2091
2093
|
}.celeste-checkbox-label[data-v-ad0a5759] {
|
|
2092
2094
|
display: flex;
|
|
@@ -4067,10 +4069,10 @@ to {
|
|
|
4067
4069
|
-webkit-user-select: none;
|
|
4068
4070
|
-moz-user-select: none;
|
|
4069
4071
|
user-select: none;
|
|
4070
|
-
}[data-v-
|
|
4072
|
+
}[data-v-5747c91e] {
|
|
4071
4073
|
box-sizing: border-box;
|
|
4072
4074
|
}
|
|
4073
|
-
.celeste-radio-card[data-v-
|
|
4075
|
+
.celeste-radio-card[data-v-5747c91e] {
|
|
4074
4076
|
display: flex;
|
|
4075
4077
|
align-items: flex-start;
|
|
4076
4078
|
padding: var(--spacing-16);
|
|
@@ -4083,21 +4085,21 @@ to {
|
|
|
4083
4085
|
font: var(--paragraph-sm);
|
|
4084
4086
|
gap: var(--spacing-14);
|
|
4085
4087
|
}
|
|
4086
|
-
.celeste-radio-card[data-v-
|
|
4088
|
+
.celeste-radio-card[data-v-5747c91e]:not(.celeste-radio-card-disabled) {
|
|
4087
4089
|
cursor: pointer;
|
|
4088
4090
|
}
|
|
4089
|
-
.celeste-radio-card[data-v-
|
|
4091
|
+
.celeste-radio-card[data-v-5747c91e]:has([data-state=checked]):not(.celeste-radio-card-disabled) {
|
|
4090
4092
|
border-color: var(--color-primary-base);
|
|
4091
4093
|
box-shadow: none;
|
|
4092
4094
|
}
|
|
4093
|
-
.celeste-radio-card[data-v-
|
|
4095
|
+
.celeste-radio-card[data-v-5747c91e]:hover:not(.celeste-radio-card-disabled), .celeste-radio-card[data-v-5747c91e]:focus-visible:not(.celeste-radio-card-disabled) {
|
|
4094
4096
|
background-color: var(--color-bg-weak-50);
|
|
4095
4097
|
box-shadow: none;
|
|
4096
4098
|
}
|
|
4097
|
-
.celeste-radio-card[data-v-
|
|
4099
|
+
.celeste-radio-card[data-v-5747c91e]:hover:not(.celeste-radio-card-disabled):not(:has([data-state=checked])), .celeste-radio-card[data-v-5747c91e]:focus-visible:not(.celeste-radio-card-disabled):not(:has([data-state=checked])) {
|
|
4098
4100
|
border-color: transparent;
|
|
4099
4101
|
}
|
|
4100
|
-
.celeste-radio-card-preview[data-v-
|
|
4102
|
+
.celeste-radio-card-preview[data-v-5747c91e] {
|
|
4101
4103
|
display: flex;
|
|
4102
4104
|
position: relative;
|
|
4103
4105
|
flex-shrink: 0;
|
|
@@ -4111,15 +4113,15 @@ to {
|
|
|
4111
4113
|
background-color: var(--color-bg-white-0);
|
|
4112
4114
|
box-shadow: var(--shadow-regular-xs);
|
|
4113
4115
|
}
|
|
4114
|
-
.celeste-radio-card-preview-icon i[data-v-
|
|
4116
|
+
.celeste-radio-card-preview-icon i[data-v-5747c91e] {
|
|
4115
4117
|
width: 20px;
|
|
4116
4118
|
height: 20px;
|
|
4117
4119
|
color: var(--color-icon-sub-600);
|
|
4118
4120
|
}
|
|
4119
|
-
.celeste-radio-card-preview-image[data-v-
|
|
4121
|
+
.celeste-radio-card-preview-image[data-v-5747c91e] {
|
|
4120
4122
|
border: none;
|
|
4121
4123
|
}
|
|
4122
|
-
.celeste-radio-card-preview-image i[data-v-
|
|
4124
|
+
.celeste-radio-card-preview-image i[data-v-5747c91e] {
|
|
4123
4125
|
position: absolute;
|
|
4124
4126
|
z-index: 0;
|
|
4125
4127
|
top: 50%;
|
|
@@ -4129,21 +4131,21 @@ to {
|
|
|
4129
4131
|
transform: translate(-50%, -50%);
|
|
4130
4132
|
color: var(--color-icon-sub-600);
|
|
4131
4133
|
}
|
|
4132
|
-
.celeste-radio-card-preview-image[data-v-
|
|
4134
|
+
.celeste-radio-card-preview-image[data-v-5747c91e] img {
|
|
4133
4135
|
z-index: 1000;
|
|
4134
4136
|
}
|
|
4135
|
-
.celeste-radio-card-content[data-v-
|
|
4137
|
+
.celeste-radio-card-content[data-v-5747c91e] {
|
|
4136
4138
|
display: flex;
|
|
4137
4139
|
flex-direction: column;
|
|
4138
4140
|
gap: var(--spacing-4);
|
|
4139
4141
|
}
|
|
4140
|
-
.celeste-radio-card-row[data-v-
|
|
4142
|
+
.celeste-radio-card-row[data-v-5747c91e] {
|
|
4141
4143
|
display: flex;
|
|
4142
4144
|
flex-shrink: 1;
|
|
4143
4145
|
align-items: center;
|
|
4144
4146
|
gap: var(--spacing-8);
|
|
4145
4147
|
}
|
|
4146
|
-
.celeste-radio-card-label[data-v-
|
|
4148
|
+
.celeste-radio-card-label[data-v-5747c91e] {
|
|
4147
4149
|
flex-shrink: 1;
|
|
4148
4150
|
min-width: 0;
|
|
4149
4151
|
overflow: hidden;
|
|
@@ -4152,7 +4154,7 @@ to {
|
|
|
4152
4154
|
text-overflow: ellipsis;
|
|
4153
4155
|
white-space: nowrap;
|
|
4154
4156
|
}
|
|
4155
|
-
.celeste-radio-card-sublabel[data-v-
|
|
4157
|
+
.celeste-radio-card-sublabel[data-v-5747c91e] {
|
|
4156
4158
|
flex-shrink: 1;
|
|
4157
4159
|
min-width: 0;
|
|
4158
4160
|
overflow: hidden;
|
|
@@ -4161,20 +4163,23 @@ to {
|
|
|
4161
4163
|
text-overflow: ellipsis;
|
|
4162
4164
|
white-space: nowrap;
|
|
4163
4165
|
}
|
|
4164
|
-
.celeste-radio-card-description[data-v-
|
|
4166
|
+
.celeste-radio-card-description[data-v-5747c91e] {
|
|
4165
4167
|
color: var(--color-text-sub-600);
|
|
4166
4168
|
font: var(--paragraph-xs);
|
|
4167
4169
|
}
|
|
4168
|
-
.celeste-radio-card-
|
|
4170
|
+
[data-v-5747c91e] .celeste-radio-card-radio {
|
|
4171
|
+
margin-inline-start: auto;
|
|
4172
|
+
}
|
|
4173
|
+
.celeste-radio-card-disabled[data-v-5747c91e] {
|
|
4169
4174
|
cursor: not-allowed;
|
|
4170
4175
|
}
|
|
4171
|
-
.celeste-radio-card-disabled .celeste-radio-card-label[data-v-
|
|
4176
|
+
.celeste-radio-card-disabled .celeste-radio-card-label[data-v-5747c91e] {
|
|
4172
4177
|
color: var(--color-text-sub-600);
|
|
4173
4178
|
}
|
|
4174
|
-
.celeste-radio-card-disabled .celeste-radio-card-sublabel[data-v-
|
|
4179
|
+
.celeste-radio-card-disabled .celeste-radio-card-sublabel[data-v-5747c91e] {
|
|
4175
4180
|
color: var(--color-text-soft-400);
|
|
4176
4181
|
}
|
|
4177
|
-
.celeste-radio-card-disabled .celeste-radio-card-description[data-v-
|
|
4182
|
+
.celeste-radio-card-disabled .celeste-radio-card-description[data-v-5747c91e] {
|
|
4178
4183
|
color: var(--color-text-soft-400);
|
|
4179
4184
|
}.celeste-radio-label[data-v-32cb773e] {
|
|
4180
4185
|
display: flex;
|
|
@@ -106,5 +106,5 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
|
|
|
106
106
|
};
|
|
107
107
|
}
|
|
108
108
|
});
|
|
109
|
-
const checkboxCard = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-
|
|
109
|
+
const checkboxCard = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-6fb023b7"]]);
|
|
110
110
|
module.exports = checkboxCard;
|
|
@@ -106,5 +106,5 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
|
|
|
106
106
|
};
|
|
107
107
|
}
|
|
108
108
|
});
|
|
109
|
-
const radioGroupCard = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-
|
|
109
|
+
const radioGroupCard = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-5747c91e"]]);
|
|
110
110
|
module.exports = radioGroupCard;
|
package/dist/es/checkbox-card.js
CHANGED
|
@@ -105,7 +105,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
105
105
|
};
|
|
106
106
|
}
|
|
107
107
|
});
|
|
108
|
-
const checkboxCard = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-
|
|
108
|
+
const checkboxCard = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-6fb023b7"]]);
|
|
109
109
|
export {
|
|
110
110
|
checkboxCard as default
|
|
111
111
|
};
|
|
@@ -105,7 +105,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
105
105
|
};
|
|
106
106
|
}
|
|
107
107
|
});
|
|
108
|
-
const radioGroupCard = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-
|
|
108
|
+
const radioGroupCard = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5747c91e"]]);
|
|
109
109
|
export {
|
|
110
110
|
radioGroupCard as default
|
|
111
111
|
};
|
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.52",
|
|
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.52",
|
|
48
|
+
"@youcan/celeste-tokens": "0.6.52"
|
|
49
49
|
},
|
|
50
50
|
"devDependencies": {
|
|
51
51
|
"@chromatic-com/storybook": "^4.0.0",
|
|
@@ -94,7 +94,6 @@ const delegatedProps = useDelegatedProps(props, 'class');
|
|
|
94
94
|
.celeste-checkbox-card {
|
|
95
95
|
display: flex;
|
|
96
96
|
align-items: flex-start;
|
|
97
|
-
justify-content: space-between;
|
|
98
97
|
padding: var(--spacing-16);
|
|
99
98
|
transition: all var(--animation-fast) ease-out;
|
|
100
99
|
border: 1px solid var(--color-stroke-soft-200);
|
|
@@ -205,6 +204,10 @@ const delegatedProps = useDelegatedProps(props, 'class');
|
|
|
205
204
|
font: var(--paragraph-xs);
|
|
206
205
|
}
|
|
207
206
|
|
|
207
|
+
:deep(.celeste-checkbox-card-checkbox) {
|
|
208
|
+
margin-inline-start: auto;
|
|
209
|
+
}
|
|
210
|
+
|
|
208
211
|
.celeste-checkbox-card-disabled {
|
|
209
212
|
cursor: not-allowed;
|
|
210
213
|
|