@youcan/celeste 0.6.6 → 0.6.8

package/dist/celeste.css

@@ -58,7 +58,9 @@
   display: flex;
   position: relative;
   align-items: center;
-  user-select: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
   touch-action: none;
 }
 .celeste-slider .celeste-slider-track {
@@ -115,26 +117,23 @@
   font: var(--paragraph-sm);
   cursor: pointer;
   gap: var(--spacing-8);
-i {
+}
+.celeste-dropdown-menu-sub-trigger i {
     color: var(--color-icon-sub-600);
-&:dir(rtl) {
-      transform: rotate(180deg);
 }
+:is(.celeste-dropdown-menu-sub-trigger i):dir(rtl) {
+      transform: rotate(180deg);
 }
-&:focus-visible,
-  &:not([data-disabled]):hover,
-  &[data-state='open'],
-  &[data-highlighted] {
+.celeste-dropdown-menu-sub-trigger:focus-visible,.celeste-dropdown-menu-sub-trigger:not([data-disabled]):hover,.celeste-dropdown-menu-sub-trigger[data-state='open'],.celeste-dropdown-menu-sub-trigger[data-highlighted] {
     outline: none;
     background: var(--color-bg-weak-50);
 }
-&[data-disabled] {
+.celeste-dropdown-menu-sub-trigger[data-disabled] {
     color: var(--color-text-disabled-300);
     cursor: auto;
-:deep(i) {
-      color: var(--color-text-disabled-300);
-}
 }
+.celeste-dropdown-menu-sub-trigger[data-disabled] :deep(i) {
+      color: var(--color-text-disabled-300);
 }
 .celeste-dropdown-menu-sub-content {
   --dropdown-width: 100%;
@@ -493,6 +492,7 @@ to {
   --action-font: var(--label-sm);
 }
 .celeste-alert--lg[data-v-a07f0877] {
+  height: -moz-fit-content;
   height: fit-content;
   padding: 14px;
   gap: var(--spacing-12);
@@ -756,7 +756,9 @@ to {
   border: 1px solid transparent;
   border-radius: var(--radius-full);
   pointer-events: none;
-  user-select: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
   gap: 2px;
 }
 .celeste-badge i.dot[data-v-f6cc59c9] {
@@ -976,7 +978,9 @@ to {
   border-radius: var(--radius-6);
   font: var(--label-xs);
   pointer-events: none;
-  user-select: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
   gap: 4px;
 }
 .celeste-badge i.dot[data-v-21007019] {
@@ -1729,6 +1733,7 @@ to {
   display: flex;
   align-items: center;
   justify-content: center;
+  height: -moz-fit-content;
   height: fit-content;
   color: var(--color-icon-sub-600);
 }
@@ -1841,6 +1846,7 @@ to {
   display: flex;
   box-sizing: border-box;
   align-items: center;
+  width: -moz-fit-content;
   width: fit-content;
   height: var(--input-height);
   padding-inline: calc(var(--input-padding) + var(--spacing-2)) var(--input-padding);
@@ -1886,6 +1892,11 @@ to {
   color: inherit;
   font: inherit;
 }
+.celeste-text-input-wrapper .celeste-text-input[data-v-a28be4ca]::-moz-placeholder {
+  -moz-transition: color var(--animation-fast) ease-out;
+  transition: color var(--animation-fast) ease-out;
+  color: var(--color-text-soft-400);
+}
 .celeste-text-input-wrapper .celeste-text-input[data-v-a28be4ca]::placeholder {
   transition: color var(--animation-fast) ease-out;
   color: var(--color-text-soft-400);
@@ -1905,6 +1916,9 @@ to {
   color: var(--color-text-disabled-300);
   pointer-events: none;
 }
+.celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input[data-v-a28be4ca]::-moz-placeholder {
+  color: currentcolor;
+}
 .celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input[data-v-a28be4ca]::placeholder {
   color: currentcolor;
 }
@@ -1946,12 +1960,21 @@ to {
 .celeste-text-input-wrapper[data-v-a28be4ca]:has(.celeste-text-input:hover:not(:focus, :disabled)):has(.celeste-text-input-button:not(:hover), .celeste-text-input-affix:not(:hover)) {
   background-color: var(--color-bg-weak-50);
 }
+.celeste-text-input-wrapper:has(.celeste-text-input:hover:not(:focus, :disabled)):not(:has(.celeste-text-input-button:hover)) .celeste-text-input[data-v-a28be4ca]::-moz-placeholder {
+  color: var(--color-text-sub-600);
+}
 .celeste-text-input-wrapper:has(.celeste-text-input:hover:not(:focus, :disabled)):not(:has(.celeste-text-input-button:hover)) .celeste-text-input[data-v-a28be4ca]::placeholder {
   color: var(--color-text-sub-600);
 }
+.celeste-text-input-wrapper[data-v-a28be4ca]:has(.celeste-text-input:-moz-placeholder:not(:disabled)) {
+  /* stylelint-disable-next-line no-descending-specificity */
+}
 .celeste-text-input-wrapper[data-v-a28be4ca]:has(.celeste-text-input:placeholder-shown:not(:disabled)) {
   /* stylelint-disable-next-line no-descending-specificity */
 }
+.celeste-text-input-wrapper[data-v-a28be4ca]:has(.celeste-text-input:-moz-placeholder:not(:disabled)) .celeste-text-input-icon, .celeste-text-input-wrapper[data-v-a28be4ca]:has(.celeste-text-input:-moz-placeholder:not(:disabled)) .celeste-text-input-affix {
+  color: var(--color-text-soft-400);
+}
 .celeste-text-input-wrapper[data-v-a28be4ca]:has(.celeste-text-input:placeholder-shown:not(:disabled)) .celeste-text-input-icon, .celeste-text-input-wrapper[data-v-a28be4ca]:has(.celeste-text-input:placeholder-shown:not(:disabled)) .celeste-text-input-affix {
   color: var(--color-text-soft-400);
 }[data-v-2cc18da8] {
@@ -1970,6 +1993,7 @@ to {
   display: flex;
   position: relative;
   flex-direction: column;
+  width: -moz-fit-content;
   width: fit-content;
   padding-top: var(--spacing-4);
   gap: var(--spacing-10);
@@ -2064,6 +2088,7 @@ to {
   color: var(--color-text-strong-950);
 }
 .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger.celeste-dropdown-anchor-trigger-type-compact[data-v-2cc18da8] {
+  width: -moz-fit-content;
   width: fit-content;
   border: none;
   background: transparent;
@@ -2079,6 +2104,7 @@ to {
   color: var(--color-icon-strong-950);
 }
 .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger.celeste-dropdown-anchor-trigger-type-compact-input[data-v-2cc18da8] {
+  width: -moz-fit-content;
   width: fit-content;
   border: none;
   border-radius: var(--radius-0);
@@ -2091,6 +2117,7 @@ to {
   box-shadow: none;
 }
 .celeste-dropdown-wrapper .celeste-dropdown-anchor-trigger.celeste-dropdown-anchor-trigger-type-inline[data-v-2cc18da8] {
+  width: -moz-fit-content;
   width: fit-content;
   gap: var(--spacing-4);
 }
@@ -2219,7 +2246,8 @@ to {
   display: flex;
   align-items: center;
   justify-content: center;
-  object-fit: cover;
+  -o-object-fit: cover;
+     object-fit: cover;
   border-radius: var(--radius-full);
 }.celeste-dropdown-menu-group[data-v-87c13894] {
   display: flex;
@@ -2252,6 +2280,7 @@ to {
   flex-direction: column;
   justify-content: center;
   gap: var(--spacing-4);
+  width: -moz-fit-content;
   width: fit-content;
   max-width: 400px;
   overflow: hidden;
@@ -2289,6 +2318,7 @@ to {
   align-items: center;
   justify-content: center;
   max-width: 50%;
+  height: -moz-fit-content;
   height: fit-content;
   color: var(--color-icon-sub-600);
 }
@@ -2602,7 +2632,8 @@ to {
   position: fixed;
   z-index: 50;
   background: var(--color-overlay-overlay);
-  backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(5px);
+          backdrop-filter: blur(5px);
   inset: 0;
 }
 .celeste-modal-content[data-v-bdcae06b] {
@@ -2831,11 +2862,11 @@ to {
     opacity: 0;
 }
 }.celeste-popover-trigger[data-v-2664c4cb] {
+  width: -moz-fit-content;
   width: fit-content;
   cursor: pointer;
 }
-.celeste-segmented-control-item {
-&[data-v-4fd077ad] {
+.celeste-segmented-control-item[data-v-4fd077ad] {
   display: flex;
   align-items: center;
   gap: var(--spacing-6);
@@ -2850,24 +2881,24 @@ to {
   font: var(--label-sm);
   cursor: pointer;
 }
-&[data-state='on'][data-v-4fd077ad] {
+.celeste-segmented-control-item[data-state='on'][data-v-4fd077ad] {
     background-color: var(--color-bg-white-0);
     box-shadow: var(--shadow-toggle-switch);
     color: var(--color-text-strong-950);
     pointer-events: none;
 }
-&[data-state='off'][data-v-4fd077ad]:hover {
+.celeste-segmented-control-item[data-state='off'][data-v-4fd077ad]:hover {
     color: var(--color-text-sub-600);
 }
-&[data-v-4fd077ad]:disabled {
+.celeste-segmented-control-item[data-v-4fd077ad]:disabled {
     color: var(--color-text-disabled-300);
     pointer-events: none;
-    user-select: none;
-}
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
 }
 
-.celeste-segmented-control {
-&[data-v-8bb8e7a4] {
+.celeste-segmented-control[data-v-8bb8e7a4] {
   display: flex;
   gap: var(--spacing-4);
   align-items: center;
@@ -2876,10 +2907,9 @@ to {
   border-radius: var(--radius-10);
   background-color: var(--color-bg-weak-50);
 }
-&[data-orientation='vertical'][data-v-8bb8e7a4] {
+.celeste-segmented-control[data-orientation='vertical'][data-v-8bb8e7a4] {
     flex-direction: column;
 }
-}
 [data-v-69b8512e] .celeste-select-content {
   z-index: 50;
   max-height: var(--radix-select-content-available-height);
@@ -2955,7 +2985,9 @@ to {
 .celeste-select-item[data-disabled][data-v-48e92b74] {
   color: var(--color-text-disabled-300);
   pointer-events: none;
-  user-select: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
 }
 .celeste-select-item[data-disabled][data-v-48e92b74] i {
   color: var(--color-icon-disabled-300);
@@ -3003,10 +3035,13 @@ to {
   height: 40px;
 }
 .celeste-select-trigger[variant=compact][data-v-039f6664] {
+  width: -moz-fit-content;
   width: fit-content;
 }
 .celeste-select-trigger[variant=inline][data-v-039f6664] {
+  width: -moz-fit-content;
   width: fit-content;
+  height: -moz-fit-content;
   height: fit-content;
   padding: var(--spacing-0);
   border-radius: 0;
@@ -3076,14 +3111,11 @@ to {
   flex-shrink: 0;
   color: var(--color-icon-sub-600);
 }
-.celeste-tab-menu-content {
-&[data-orientation='vertical'][data-v-85c57bdc] {
+.celeste-tab-menu-content[data-orientation='vertical'][data-v-85c57bdc] {
     flex: 1;
 }
-}
 
-.celeste-tab-menu-item {
-&[data-v-ca8f5a83] {
+.celeste-tab-menu-item[data-v-ca8f5a83] {
   --animation-function: cubic-bezier(0, 0, 0.2, 1);
 
   display: inline-flex;
@@ -3099,20 +3131,19 @@ to {
   cursor: pointer;
   gap: var(--spacing-6);
 }
-&[data-v-ca8f5a83] i {
+.celeste-tab-menu-item[data-v-ca8f5a83] i {
     width: 20px;
     height: 20px;
 }
-&[data-v-ca8f5a83]:focus {
+.celeste-tab-menu-item[data-v-ca8f5a83]:focus {
     outline: none;
 }
-&[data-orientation='horizontal'] {
-&[data-v-ca8f5a83] {
+.celeste-tab-menu-item[data-orientation='horizontal'][data-v-ca8f5a83] {
     position: relative;
     padding-block: var(--spacing-14);
     padding-inline: var(--spacing-0);
 }
-&[data-v-ca8f5a83]::after {
+.celeste-tab-menu-item[data-orientation='horizontal'][data-v-ca8f5a83]::after {
       content: '';
       display: block;
       position: absolute;
@@ -3123,30 +3154,25 @@ to {
       transition: all var(--animation-fast) var(--animation-function);
       background-color: transparent;
 }
-}
-&[data-orientation='vertical'][data-state='active'][data-v-ca8f5a83] {
+.celeste-tab-menu-item[data-orientation='vertical'][data-state='active'][data-v-ca8f5a83] {
     background-color: var(--color-bg-weak-50);
 }
-&[data-orientation='horizontal'][data-state='active'] {
-&[data-v-ca8f5a83] {
+.celeste-tab-menu-item[data-orientation='horizontal'][data-state='active'][data-v-ca8f5a83] {
     background-color: var(--color-bg-white-0);
 }
-&[data-v-ca8f5a83]::after {
+.celeste-tab-menu-item[data-orientation='horizontal'][data-state='active'][data-v-ca8f5a83]::after {
       background-color: var(--color-primary-base);
 }
-}
-&[data-state='active'] {
-&[data-v-ca8f5a83] i {
+.celeste-tab-menu-item[data-state='active'][data-v-ca8f5a83] i {
       color: var(--color-primary-base);
 }
-span[data-v-ca8f5a83] {
+.celeste-tab-menu-item[data-state='active'] span[data-v-ca8f5a83] {
       color: var(--color-text-strong-950);
 }
-}
-&[data-state='inactive'][data-v-ca8f5a83] {
+.celeste-tab-menu-item[data-state='inactive'][data-v-ca8f5a83] {
     background-color: var(--color-bg-white-0);
 }
-.celeste-tab-menu-item-label[data-v-ca8f5a83] {
+.celeste-tab-menu-item .celeste-tab-menu-item-label[data-v-ca8f5a83] {
     flex: 1;
     overflow: hidden;
     font-size: var(--font-size-2);
@@ -3154,10 +3180,8 @@ span[data-v-ca8f5a83] {
     text-overflow: ellipsis;
     white-space: nowrap;
 }
-}
 
-.celeste-tab-menu-list {
-&[data-v-9877f1df] {
+.celeste-tab-menu-list[data-v-9877f1df] {
   display: flex;
   align-items: center;
   justify-content: flex-start;
@@ -3165,28 +3189,25 @@ span[data-v-ca8f5a83] {
   padding: var(--spacing-10);
   gap: var(--spacing-8);
 }
-&[data-orientation='horizontal'][data-v-9877f1df] {
+.celeste-tab-menu-list[data-orientation='horizontal'][data-v-9877f1df] {
     flex-direction: row;
     padding: var(--spacing-0);
     border-block: 1px solid var(--color-stroke-soft-200);
     gap: var(--spacing-16);
 }
-&[data-orientation='vertical'][data-v-9877f1df] {
+.celeste-tab-menu-list[data-orientation='vertical'][data-v-9877f1df] {
     flex-direction: column;
 }
-}
 
-.celeste-tab-menu-root {
-&[data-v-b5afb6cc] {
+.celeste-tab-menu-root[data-v-b5afb6cc] {
   display: flex;
 }
-&[data-orientation='vertical'][data-v-b5afb6cc] {
+.celeste-tab-menu-root[data-orientation='vertical'][data-v-b5afb6cc] {
     flex-direction: row;
 }
-&[data-orientation='horizontal'][data-v-b5afb6cc] {
+.celeste-tab-menu-root[data-orientation='horizontal'][data-v-b5afb6cc] {
     flex-direction: column;
 }
-}
 .celeste-text-input-affix[data-v-a78ff6e3] {
   display: flex;
   align-items: center;
@@ -3207,7 +3228,9 @@ span[data-v-ca8f5a83] {
   background-color: var(--color-bg-white-0);
 }
 .celeste-text-input-affix[askbd=true][data-v-a78ff6e3] {
+  width: -moz-fit-content;
   width: fit-content;
+  height: -moz-fit-content;
   height: fit-content;
   padding: var(--spacing-2) calc(var(--spacing-8) - var(--spacing-2));
   border: 1px solid var(--color-stroke-soft-200);
@@ -3311,12 +3334,22 @@ span[data-v-ca8f5a83] {
   font-size: var(--font-size-2);
   resize: vertical;
 }
+.celeste-textarea-wrapper .celeste-textarea[data-v-76864cee]::-moz-placeholder {
+  -moz-transition-property: background-color, border-color, box-shadow, text-decoration-color, color;
+  transition-property: background-color, border-color, box-shadow, text-decoration-color, color;
+  transition-duration: var(--animation-fast);
+  transition-timing-function: ease-out;
+  color: var(--color-text-soft-400);
+}
 .celeste-textarea-wrapper .celeste-textarea[data-v-76864cee]::placeholder {
   transition-property: background-color, border-color, box-shadow, text-decoration-color, color;
   transition-duration: var(--animation-fast);
   transition-timing-function: ease-out;
   color: var(--color-text-soft-400);
 }
+.celeste-textarea-wrapper .celeste-textarea[data-v-76864cee]:hover::-moz-placeholder {
+  color: var(--color-text-sub-600);
+}
 .celeste-textarea-wrapper .celeste-textarea[data-v-76864cee]:hover::placeholder {
   color: var(--color-text-sub-600);
 }
@@ -3327,6 +3360,9 @@ span[data-v-ca8f5a83] {
   color: var(--color-text-disabled-300);
   pointer-events: none;
 }
+.celeste-textarea-wrapper .celeste-textarea[data-v-76864cee]:disabled::-moz-placeholder {
+  color: var(--color-text-disabled-300);
+}
 .celeste-textarea-wrapper .celeste-textarea[data-v-76864cee]:disabled::placeholder {
   color: var(--color-text-disabled-300);
 }
@@ -3403,6 +3439,11 @@ span[data-v-ca8f5a83] {
   transition: color var(--animation-normal) ease;
   color: var(--icon-color);
 }
+.celeste-command-input-primitive[data-v-0407a5d5]::-moz-placeholder {
+  -moz-transition: color var(--animation-normal) ease;
+  transition: color var(--animation-normal) ease;
+  color: var(--placeholder-color);
+}
 .celeste-command-input-primitive[data-v-0407a5d5]::placeholder {
   transition: color var(--animation-normal) ease;
   color: var(--placeholder-color);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@youcan/celeste",
   "type": "module",
-  "version": "0.6.6",
+  "version": "0.6.8",
   "author": "YouCan <tech@youcan.shop>",
   "keywords": [
     "youcan",
@@ -12,7 +12,8 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/es/index.js",
       "require": "./dist/cjs/index.cjs"
-    }
+    },
+    "./assets/celeste.css": "./dist/celeste.css"
   },
   "main": "./dist/cjs/index.cjs",
   "module": "./dist/es/index.js",
@@ -31,8 +32,8 @@
     "clsx": "^2.1.1",
     "radix-vue": "^1.9.12",
     "tinycolor2": "^1.6.0",
-    "@youcan/celeste-icons": "0.6.6",
-    "@youcan/celeste-tokens": "0.6.6"
+    "@youcan/celeste-icons": "0.6.8",
+    "@youcan/celeste-tokens": "0.6.8"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.0.0",
@@ -48,10 +49,13 @@
     "@vue/compiler-core": "^3.5.17",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.7.0",
+    "autoprefixer": "^10.4.21",
     "chromatic": "^11.22.1",
     "eslint-plugin-storybook": "9.0.17",
     "glob": "^11.0.3",
     "jsdom": "^25.0.1",
+    "postcss": "^8.5.6",
+    "postcss-nesting": "^13.0.2",
     "rimraf": "^6.0.1",
     "sass": "^1.83.1",
     "storybook": "^9.0.17",