@class-kit/vue 0.1.2 → 0.1.3

package/dist/styles/components/upload.css

@@ -36,43 +36,31 @@
     box-shadow 120ms ease;
 }
 
-.cc-field__control:-webkit-autofill,
-.cc-field__control:-webkit-autofill:hover,
-.cc-field__control:-webkit-autofill:focus,
-.cc-chat-textarea__control:-webkit-autofill,
-.cc-chat-textarea__control:-webkit-autofill:hover,
-.cc-chat-textarea__control:-webkit-autofill:focus,
-.cc-canvas-editor__card input:-webkit-autofill,
-.cc-canvas-editor__card input:-webkit-autofill:hover,
-.cc-canvas-editor__card input:-webkit-autofill:focus,
-.cc-canvas-editor__card textarea:-webkit-autofill,
-.cc-canvas-editor__card textarea:-webkit-autofill:hover,
-.cc-canvas-editor__card textarea:-webkit-autofill:focus {
+.cc-field__control:autofill,
+.cc-field__control:autofill:hover,
+.cc-field__control:autofill:focus,
+.cc-chat-textarea__control:autofill,
+.cc-chat-textarea__control:autofill:hover,
+.cc-chat-textarea__control:autofill:focus,
+.cc-canvas-editor__card input:autofill,
+.cc-canvas-editor__card input:autofill:hover,
+.cc-canvas-editor__card input:autofill:focus,
+.cc-canvas-editor__card textarea:autofill,
+.cc-canvas-editor__card textarea:autofill:hover,
+.cc-canvas-editor__card textarea:autofill:focus {
   box-shadow: 0 0 0 1000px var(--cc-form-control-background) inset;
   caret-color: var(--cc-form-color-text);
   transition:
     background-color 9999s ease-out,
     color 9999s ease-out;
-  -webkit-text-fill-color: var(--cc-form-color-text);
 }
 
-.cc-field__control::-ms-clear,
-.cc-field__control::-ms-reveal,
-.cc-field__control::-webkit-search-cancel-button,
-.cc-field__control::-webkit-search-decoration {
-  display: none;
+.cc-field__control[type="search"] {
+  appearance: none;
 }
 
 .cc-field__control[type="number"] {
   appearance: textfield;
-  -moz-appearance: textfield;
-}
-
-.cc-field__control[type="number"]::-webkit-inner-spin-button,
-.cc-field__control[type="number"]::-webkit-outer-spin-button {
-  appearance: none;
-  margin: 0;
-  -webkit-appearance: none;
 }
 
 .cc-field__control--clearable {
@@ -109,6 +97,11 @@
   color: var(--cc-form-color-text);
 }
 
+.cc-field__clear:focus {
+  box-shadow: none;
+  outline: none;
+}
+
 .cc-field__clear:focus-visible {
   box-shadow: var(--cc-form-shadow-focus);
   outline: none;
@@ -151,9 +144,9 @@
 }
 
 .cc-field__control[data-readonly="true"]:focus,
-.cc-field__control[data-readonly="true"]:focus-visible,
+.cc-field__control[data-readonly="true"]:focus,
 .cc-field[data-readonly="true"] .cc-field__control:focus,
-.cc-field[data-readonly="true"] .cc-field__control:focus-visible {
+.cc-field[data-readonly="true"] .cc-field__control:focus {
   border-color: var(--cc-form-readonly-border-color);
   box-shadow: none;
 }
@@ -206,9 +199,9 @@
 }
 
 .cc-field[data-readonly="true"] .cc-select__option:hover:not(:disabled),
-.cc-field[data-readonly="true"] .cc-select__option:focus-visible,
+.cc-field[data-readonly="true"] .cc-select__option:focus,
 .cc-select[data-readonly="true"] .cc-select__option:hover:not(:disabled),
-.cc-select[data-readonly="true"] .cc-select__option:focus-visible {
+.cc-select[data-readonly="true"] .cc-select__option:focus {
   background: transparent;
   color: inherit;
   cursor: default;
@@ -233,8 +226,7 @@
 
 .cc-upload[data-dragging="true"] {
   border-color: var(--cc-form-color-accent);
-  box-shadow: 0 0 0 4px
-    color-mix(in srgb, var(--cc-form-color-accent) 14%, transparent);
+  box-shadow: 0 0 0 4px rgba(22, 119, 255, 0.16);
   transform: translateY(-1px);
 }
 

package/dist/styles/components/verification-code.css

@@ -36,43 +36,31 @@
     box-shadow 120ms ease;
 }
 
-.cc-field__control:-webkit-autofill,
-.cc-field__control:-webkit-autofill:hover,
-.cc-field__control:-webkit-autofill:focus,
-.cc-chat-textarea__control:-webkit-autofill,
-.cc-chat-textarea__control:-webkit-autofill:hover,
-.cc-chat-textarea__control:-webkit-autofill:focus,
-.cc-canvas-editor__card input:-webkit-autofill,
-.cc-canvas-editor__card input:-webkit-autofill:hover,
-.cc-canvas-editor__card input:-webkit-autofill:focus,
-.cc-canvas-editor__card textarea:-webkit-autofill,
-.cc-canvas-editor__card textarea:-webkit-autofill:hover,
-.cc-canvas-editor__card textarea:-webkit-autofill:focus {
+.cc-field__control:autofill,
+.cc-field__control:autofill:hover,
+.cc-field__control:autofill:focus,
+.cc-chat-textarea__control:autofill,
+.cc-chat-textarea__control:autofill:hover,
+.cc-chat-textarea__control:autofill:focus,
+.cc-canvas-editor__card input:autofill,
+.cc-canvas-editor__card input:autofill:hover,
+.cc-canvas-editor__card input:autofill:focus,
+.cc-canvas-editor__card textarea:autofill,
+.cc-canvas-editor__card textarea:autofill:hover,
+.cc-canvas-editor__card textarea:autofill:focus {
   box-shadow: 0 0 0 1000px var(--cc-form-control-background) inset;
   caret-color: var(--cc-form-color-text);
   transition:
     background-color 9999s ease-out,
     color 9999s ease-out;
-  -webkit-text-fill-color: var(--cc-form-color-text);
 }
 
-.cc-field__control::-ms-clear,
-.cc-field__control::-ms-reveal,
-.cc-field__control::-webkit-search-cancel-button,
-.cc-field__control::-webkit-search-decoration {
-  display: none;
+.cc-field__control[type="search"] {
+  appearance: none;
 }
 
 .cc-field__control[type="number"] {
   appearance: textfield;
-  -moz-appearance: textfield;
-}
-
-.cc-field__control[type="number"]::-webkit-inner-spin-button,
-.cc-field__control[type="number"]::-webkit-outer-spin-button {
-  appearance: none;
-  margin: 0;
-  -webkit-appearance: none;
 }
 
 .cc-field__control--clearable {
@@ -109,6 +97,11 @@
   color: var(--cc-form-color-text);
 }
 
+.cc-field__clear:focus {
+  box-shadow: none;
+  outline: none;
+}
+
 .cc-field__clear:focus-visible {
   box-shadow: var(--cc-form-shadow-focus);
   outline: none;
@@ -151,9 +144,9 @@
 }
 
 .cc-field__control[data-readonly="true"]:focus,
-.cc-field__control[data-readonly="true"]:focus-visible,
+.cc-field__control[data-readonly="true"]:focus,
 .cc-field[data-readonly="true"] .cc-field__control:focus,
-.cc-field[data-readonly="true"] .cc-field__control:focus-visible {
+.cc-field[data-readonly="true"] .cc-field__control:focus {
   border-color: var(--cc-form-readonly-border-color);
   box-shadow: none;
 }
@@ -242,9 +235,9 @@
 }
 
 .cc-field[data-readonly="true"] .cc-select__option:hover:not(:disabled),
-.cc-field[data-readonly="true"] .cc-select__option:focus-visible,
+.cc-field[data-readonly="true"] .cc-select__option:focus,
 .cc-select[data-readonly="true"] .cc-select__option:hover:not(:disabled),
-.cc-select[data-readonly="true"] .cc-select__option:focus-visible {
+.cc-select[data-readonly="true"] .cc-select__option:focus {
   background: transparent;
   color: inherit;
   cursor: default;

package/dist/styles/components/video-detail-transition.css

@@ -31,10 +31,18 @@
   transform: translateZ(0);
 }
 
+.cc-video-detail-transition__item::before {
+  content: "";
+  display: block;
+  padding-top: 177.7778%;
+}
+
 .cc-video-detail-transition__item img {
-  aspect-ratio: 9 / 16;
   display: block;
+  height: 100%;
+  inset: 0;
   object-fit: cover;
+  position: absolute;
   width: 100%;
 }
 
@@ -109,14 +117,24 @@
 .cc-video-detail-transition__player {
   background: #000;
   display: block;
+  overflow: hidden;
+  position: relative;
   width: 100%;
 }
 
+.cc-video-detail-transition__player::before {
+  content: "";
+  display: block;
+  padding-top: 56.25%;
+}
+
 .cc-video-detail-transition__video {
-  aspect-ratio: 16 / 9;
   background: #000;
   display: block;
+  height: 100%;
+  inset: 0;
   object-fit: cover;
+  position: absolute;
   width: 100%;
 }
 

package/dist/styles/components/video-player.css

@@ -7,11 +7,6 @@
   width: 100%;
 }
 
-.cc-video-player__video::-webkit-media-controls,
-.cc-video-player__video::-webkit-media-controls-start-playback-button {
-  display: none !important;
-}
-
 .cc-video-player__controls {
   align-items: center;
   background: var(--cc-video-player-controls-background);

package/dist/styles/components/virtual-list.css

@@ -13,7 +13,6 @@
   overflow: auto;
   overscroll-behavior: contain;
   position: relative;
-  scrollbar-gutter: stable;
 }
 
 .cc-virtual-list__content {
@@ -33,7 +32,7 @@
   height: 72px;
   justify-content: center;
   left: 0;
-  opacity: clamp(0, var(--cc-virtual-list-pull-down-progress, 0), 1);
+  opacity: var(--cc-virtual-list-pull-down-progress, 0);
   pointer-events: none;
   position: absolute;
   right: 0;
@@ -60,12 +59,11 @@
       rgba(255, 255, 255, 0.92),
       transparent 48%
     ),
-    color-mix(in srgb, var(--cc-form-color-accent) 16%, transparent);
-  border: 1px solid
-    color-mix(in srgb, var(--cc-form-color-accent) 24%, transparent);
+    rgba(22, 119, 255, 0);
+  border: 1px solid rgba(22, 119, 255, 0);
   border-radius: 999px;
   box-shadow:
-    0 8px 22px color-mix(in srgb, var(--cc-form-color-accent) 18%, transparent),
+    0 8px 22px rgba(22, 119, 255, 0),
     inset 0 0 0 1px rgba(255, 255, 255, 0.42);
   color: var(--cc-form-color-accent);
   display: inline-flex;
@@ -127,10 +125,10 @@
       rgba(255, 255, 255, 0.94),
       transparent 48%
     ),
-    color-mix(in srgb, #24d18b 20%, transparent);
-  border-color: color-mix(in srgb, #24d18b 38%, transparent);
+    rgba(36, 209, 139, 0);
+  border-color: rgba(36, 209, 139, 0);
   box-shadow:
-    0 10px 24px color-mix(in srgb, #24d18b 25%, transparent),
+    0 10px 24px rgba(36, 209, 139, 0),
     inset 0 0 0 1px rgba(255, 255, 255, 0.52);
   color: #12b76a;
   transform: rotate(360deg) scale(1.08);
@@ -177,14 +175,12 @@
   0%,
   100% {
     box-shadow:
-      0 8px 22px
-        color-mix(in srgb, var(--cc-form-color-accent) 18%, transparent),
+      0 8px 22px rgba(22, 119, 255, 0),
       inset 0 0 0 1px rgba(255, 255, 255, 0.42);
   }
   50% {
     box-shadow:
-      0 12px 30px
-        color-mix(in srgb, var(--cc-form-color-accent) 32%, transparent),
+      0 12px 30px rgba(22, 119, 255, 0),
       inset 0 0 0 1px rgba(255, 255, 255, 0.62);
   }
 }

package/dist/styles/components/virtual-select.css

@@ -36,43 +36,31 @@
     box-shadow 120ms ease;
 }
 
-.cc-field__control:-webkit-autofill,
-.cc-field__control:-webkit-autofill:hover,
-.cc-field__control:-webkit-autofill:focus,
-.cc-chat-textarea__control:-webkit-autofill,
-.cc-chat-textarea__control:-webkit-autofill:hover,
-.cc-chat-textarea__control:-webkit-autofill:focus,
-.cc-canvas-editor__card input:-webkit-autofill,
-.cc-canvas-editor__card input:-webkit-autofill:hover,
-.cc-canvas-editor__card input:-webkit-autofill:focus,
-.cc-canvas-editor__card textarea:-webkit-autofill,
-.cc-canvas-editor__card textarea:-webkit-autofill:hover,
-.cc-canvas-editor__card textarea:-webkit-autofill:focus {
+.cc-field__control:autofill,
+.cc-field__control:autofill:hover,
+.cc-field__control:autofill:focus,
+.cc-chat-textarea__control:autofill,
+.cc-chat-textarea__control:autofill:hover,
+.cc-chat-textarea__control:autofill:focus,
+.cc-canvas-editor__card input:autofill,
+.cc-canvas-editor__card input:autofill:hover,
+.cc-canvas-editor__card input:autofill:focus,
+.cc-canvas-editor__card textarea:autofill,
+.cc-canvas-editor__card textarea:autofill:hover,
+.cc-canvas-editor__card textarea:autofill:focus {
   box-shadow: 0 0 0 1000px var(--cc-form-control-background) inset;
   caret-color: var(--cc-form-color-text);
   transition:
     background-color 9999s ease-out,
     color 9999s ease-out;
-  -webkit-text-fill-color: var(--cc-form-color-text);
 }
 
-.cc-field__control::-ms-clear,
-.cc-field__control::-ms-reveal,
-.cc-field__control::-webkit-search-cancel-button,
-.cc-field__control::-webkit-search-decoration {
-  display: none;
+.cc-field__control[type="search"] {
+  appearance: none;
 }
 
 .cc-field__control[type="number"] {
   appearance: textfield;
-  -moz-appearance: textfield;
-}
-
-.cc-field__control[type="number"]::-webkit-inner-spin-button,
-.cc-field__control[type="number"]::-webkit-outer-spin-button {
-  appearance: none;
-  margin: 0;
-  -webkit-appearance: none;
 }
 
 .cc-field__control--clearable {
@@ -109,6 +97,11 @@
   color: var(--cc-form-color-text);
 }
 
+.cc-field__clear:focus {
+  box-shadow: none;
+  outline: none;
+}
+
 .cc-field__clear:focus-visible {
   box-shadow: var(--cc-form-shadow-focus);
   outline: none;
@@ -151,9 +144,9 @@
 }
 
 .cc-field__control[data-readonly="true"]:focus,
-.cc-field__control[data-readonly="true"]:focus-visible,
+.cc-field__control[data-readonly="true"]:focus,
 .cc-field[data-readonly="true"] .cc-field__control:focus,
-.cc-field[data-readonly="true"] .cc-field__control:focus-visible {
+.cc-field[data-readonly="true"] .cc-field__control:focus {
   border-color: var(--cc-form-readonly-border-color);
   box-shadow: none;
 }
@@ -241,6 +234,8 @@
   box-shadow: var(--cc-select-menu-shadow);
   color: var(--cc-select-menu-text-color);
   display: grid;
+  font-size: inherit;
+  font-weight: 400;
   gap: 4px;
   left: 0;
   margin-top: 6px;
@@ -283,7 +278,7 @@
 }
 
 .cc-select__option:hover:not(:disabled),
-.cc-select__option:focus-visible {
+.cc-select__option:focus {
   background: var(--cc-select-option-hover-color);
   outline: none;
 }
@@ -291,13 +286,13 @@
 .cc-select__option[data-selected="true"] {
   background: var(--cc-select-option-selected-color);
   color: var(--cc-select-option-selected-text-color);
-  font-weight: 700;
+  font-weight: 400;
 }
 
 .cc-field[data-readonly="true"] .cc-select__option:hover:not(:disabled),
-.cc-field[data-readonly="true"] .cc-select__option:focus-visible,
+.cc-field[data-readonly="true"] .cc-select__option:focus,
 .cc-select[data-readonly="true"] .cc-select__option:hover:not(:disabled),
-.cc-select[data-readonly="true"] .cc-select__option:focus-visible {
+.cc-select[data-readonly="true"] .cc-select__option:focus {
   background: transparent;
   color: inherit;
   cursor: default;
@@ -365,6 +360,8 @@
   box-shadow: var(--cc-select-menu-shadow);
   color: var(--cc-select-menu-text-color);
   display: grid;
+  font-size: inherit;
+  font-weight: 400;
   gap: 6px;
   left: 0;
   margin-top: 6px;
@@ -409,7 +406,6 @@
   overflow: auto;
   overscroll-behavior: contain;
   position: relative;
-  scrollbar-gutter: stable;
 }
 
 .cc-virtual-select__inner {
@@ -444,7 +440,7 @@
 }
 
 .cc-virtual-select__option:hover:not(:disabled),
-.cc-virtual-select__option:focus-visible {
+.cc-virtual-select__option:focus {
   background: var(--cc-select-option-hover-color);
   outline: none;
 }
@@ -452,13 +448,12 @@
 .cc-virtual-select__option[data-selected="true"] {
   background: var(--cc-select-option-selected-color);
   color: var(--cc-select-option-selected-text-color);
-  font-weight: 700;
+  font-weight: 400;
 }
 
 .cc-virtual-select[data-readonly="true"]
   .cc-virtual-select__option:hover:not(:disabled),
-.cc-virtual-select[data-readonly="true"]
-  .cc-virtual-select__option:focus-visible {
+.cc-virtual-select[data-readonly="true"] .cc-virtual-select__option:focus {
   background: transparent;
   color: inherit;
   cursor: default;
@@ -473,7 +468,8 @@
   align-items: center;
   color: var(--cc-virtual-select-empty-color);
   display: flex;
-  font-size: 13px;
+  font-size: inherit;
+  font-weight: 400;
   justify-content: center;
   min-height: 92px;
 }

package/dist/styles/components/virtual-table.css

@@ -83,14 +83,14 @@
   transform: rotate(45deg) scale(1);
 }
 
-.cc-choice input:focus-visible {
+.cc-choice input:focus {
   border-color: var(--cc-form-color-border-focus);
   box-shadow: var(--cc-form-shadow-focus);
   outline: none;
 }
 
-.cc-choice[data-readonly="true"] input:focus-visible,
-.cc-choice-group[data-readonly="true"] .cc-choice input:focus-visible {
+.cc-choice[data-readonly="true"] input:focus,
+.cc-choice-group[data-readonly="true"] .cc-choice input:focus {
   border-color: var(--cc-form-readonly-border-color);
   box-shadow: none;
 }
@@ -137,7 +137,6 @@
   overflow-y: auto;
   overscroll-behavior: contain;
   position: sticky;
-  scrollbar-width: thin;
   width: 100%;
 }
 
@@ -211,46 +210,25 @@
 }
 
 .cc-table__cell[data-fixed="left"] {
-  border-right-color: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 18%,
-    var(--cc-form-color-divider)
-  );
+  border-right-color: var(--cc-form-color-divider);
 }
 
 .cc-table__cell[data-fixed="right"] {
-  border-left: 1px solid
-    color-mix(
-      in srgb,
-      var(--cc-form-color-accent) 18%,
-      var(--cc-form-color-divider)
-    );
+  border-left: 1px solid var(--cc-form-color-divider);
 }
 
 .cc-table__cell[data-fixed-edge="left"],
 .cc-table__selection[data-fixed-edge="left"] {
   box-shadow:
-    10px 0 18px -14px
-      color-mix(in srgb, var(--cc-form-color-text) 38%, transparent),
-    inset -1px 0 0
-      color-mix(
-        in srgb,
-        var(--cc-form-color-accent) 18%,
-        var(--cc-form-color-divider)
-      );
+    10px 0 18px -14px rgba(15, 23, 42, 0),
+    inset -1px 0 0 var(--cc-form-color-divider);
   z-index: 5;
 }
 
 .cc-table__cell[data-fixed-edge="right"] {
   box-shadow:
-    -10px 0 18px -14px
-      color-mix(in srgb, var(--cc-form-color-text) 38%, transparent),
-    inset 1px 0 0
-      color-mix(
-        in srgb,
-        var(--cc-form-color-accent) 18%,
-        var(--cc-form-color-divider)
-      );
+    -10px 0 18px -14px rgba(15, 23, 42, 0),
+    inset 1px 0 0 var(--cc-form-color-divider);
   z-index: 5;
 }
 
@@ -282,7 +260,7 @@
 }
 
 .cc-table__resize:hover::after {
-  background: color-mix(in srgb, var(--cc-form-color-muted) 18%, transparent);
+  background: rgba(100, 116, 139, 0);
 }
 
 .cc-table__checkbox {
@@ -321,9 +299,7 @@
 }
 
 .cc-table__column-settings > button {
-  -webkit-backdrop-filter: blur(8px);
-  backdrop-filter: blur(8px);
-  background: color-mix(in srgb, var(--cc-form-color-surface) 86%, transparent);
+  background: rgba(255, 255, 255, 1);
   border: 1px solid var(--cc-form-color-border);
   border-radius: var(--cc-radius-md);
   box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
@@ -339,17 +315,14 @@
 }
 
 .cc-table__column-settings > button:hover {
-  border-color: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 52%,
-    var(--cc-form-color-border)
-  );
-  box-shadow: 0 8px 24px
-    color-mix(in srgb, var(--cc-form-color-accent) 12%, transparent);
+  border-color: var(--cc-form-color-accent);
+  box-shadow: 0 8px 24px rgba(22, 119, 255, 0);
   transform: translateY(-1px);
 }
 
 .cc-table__column-menu {
+  font-size: inherit;
+  font-weight: 400;
   min-width: 180px;
   overflow: auto;
   position: fixed;
@@ -391,9 +364,7 @@
 
 .cc-table__loading {
   align-items: center;
-  -webkit-backdrop-filter: blur(6px);
-  backdrop-filter: blur(6px);
-  background: color-mix(in srgb, var(--cc-form-color-surface) 72%, transparent);
+  background: rgba(255, 255, 255, 1);
   display: flex;
   inset: 42px 0 0;
   justify-content: center;

package/dist/styles/components/width-transition.css

@@ -0,0 +1,50 @@
+@import "../base.css";
+
+.cc-width-transition {
+  overflow: hidden;
+  transition:
+    width var(--cc-width-transition-duration, 220ms)
+      var(--cc-width-transition-easing, var(--cc-animation-easing)),
+    grid-template-columns var(--cc-width-transition-duration, 220ms)
+      var(--cc-width-transition-easing, var(--cc-animation-easing)),
+    transform var(--cc-width-transition-duration, 220ms)
+      var(--cc-width-transition-easing, var(--cc-animation-easing)),
+    opacity var(--cc-width-transition-duration, 220ms)
+      var(--cc-width-transition-easing, var(--cc-animation-easing));
+}
+
+.cc-width-transition[data-mode="auto"] {
+  width: 0;
+}
+
+.cc-width-transition[data-mode="auto"][data-expanded="true"] {
+  width: var(--cc-width-transition-width, auto);
+}
+
+.cc-width-transition[data-mode="clip"] {
+  display: grid;
+  grid-template-columns: 0fr;
+}
+
+.cc-width-transition[data-mode="clip"][data-expanded="true"] {
+  grid-template-columns: 1fr;
+}
+
+.cc-width-transition[data-mode="fade"] {
+  opacity: 0;
+  transform: scaleX(0.96);
+  transform-origin: left;
+  width: 0;
+}
+
+.cc-width-transition[data-mode="fade"][data-expanded="true"] {
+  opacity: 1;
+  transform: scaleX(1);
+  width: var(--cc-width-transition-width, auto);
+}
+
+.cc-width-transition__content {
+  min-width: 0;
+  overflow: hidden;
+}
+