@class-kit/vue 0.1.1 → 0.1.3

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

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

package/dist/styles/components/input.css

@@ -1,28 +1,5 @@
 @import "../base.css";
 
-.cc-field__control,
-.cc-color-picker__panel,
-.cc-verification-code__input,
-.cc-select__menu,
-.cc-virtual-select__menu,
-.cc-date-picker__panel,
-.cc-date-range-picker__panel,
-.cc-calendar,
-.cc-canvas-image,
-.cc-canvas-editor,
-.cc-canvas-editor__toolbar,
-.cc-canvas-editor__card,
-.cc-tilt-card__surface,
-.cc-table,
-.cc-upload,
-.cc-modal__panel,
-.cc-popup__panel,
-.cc-tooltip__content,
-.cc-toast {
-  backdrop-filter: var(--cc-theme-backdrop-filter);
-  -webkit-backdrop-filter: var(--cc-theme-backdrop-filter);
-}
-
 .cc-form {
   display: grid;
   gap: var(--cc-form-gap);
@@ -66,6 +43,33 @@
     box-shadow 120ms ease;
 }
 
+.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;
+}
+
+.cc-field__control[type="search"] {
+  appearance: none;
+}
+
+.cc-field__control[type="number"] {
+  appearance: textfield;
+}
+
 .cc-field__control--clearable {
   padding-right: 38px;
 }
@@ -100,6 +104,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;
@@ -142,9 +151,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;
 }
@@ -197,9 +206,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/live-room.css

@@ -3,17 +3,8 @@
 .cc-novel-reader button,
 .cc-comic-reader button,
 .cc-live-room button {
-  background: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 14%,
-    var(--cc-form-color-surface)
-  );
-  border: 1px solid
-    color-mix(
-      in srgb,
-      var(--cc-form-color-accent) 26%,
-      var(--cc-business-border-color)
-    );
+  background: var(--cc-form-color-surface);
+  border: 1px solid var(--cc-business-border-color);
   border-radius: var(--cc-radius-md);
   color: var(--cc-business-text-color);
   cursor: pointer;
@@ -28,11 +19,7 @@
 .cc-novel-reader button:hover:not(:disabled),
 .cc-comic-reader button:hover:not(:disabled),
 .cc-live-room button:hover {
-  background: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 22%,
-    var(--cc-form-color-surface)
-  );
+  background: var(--cc-form-color-surface);
   transform: translateY(-1px);
 }
 
@@ -74,7 +61,6 @@
 
 .cc-live-room__host {
   align-items: center;
-  backdrop-filter: blur(12px);
   background: rgba(0, 0, 0, 0.34);
   border: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: var(--cc-radius-pill);
@@ -134,7 +120,6 @@
 .cc-live-room__actions button,
 .cc-live-room__input button {
   align-items: center;
-  backdrop-filter: blur(12px);
   background: rgba(0, 0, 0, 0.34);
   border-color: rgba(255, 255, 255, 0.18);
   border-radius: var(--cc-radius-pill);
@@ -184,7 +169,8 @@
   display: grid;
   gap: 10px;
   left: 16px;
-  max-width: min(420px, calc(100% - 104px));
+  max-width: 420px;
+  width: calc(100% - 104px);
   width: 48%;
 }
 

package/dist/styles/components/loading.css

@@ -1,5 +1,49 @@
 @import "../base.css";
 
+.cc-loading.cc-chat-virtual-list__top-loading {
+  align-items: center;
+  background: rgba(255, 255, 255, 1);
+  border: 1px solid rgba(100, 116, 139, 1);
+  border-radius: 999px;
+  box-shadow: var(--cc-shadow-sm);
+  color: var(--cc-form-color-accent);
+  display: inline-flex;
+  font-size: 12px;
+  font-weight: 600;
+  gap: 8px;
+  left: 50%;
+  line-height: 1;
+  max-width: calc(100% - 32px);
+  opacity: 0;
+  padding: 8px 12px;
+  pointer-events: none;
+  position: absolute;
+  top: 10px;
+  transform: translate3d(-50%, -8px, 0);
+  transition:
+    opacity 160ms ease,
+    transform 160ms ease;
+  white-space: nowrap;
+  z-index: 2;
+}
+
+.cc-loading.cc-chat-virtual-list__top-loading[data-active="true"] {
+  opacity: 1;
+  transform: translate3d(-50%, 0, 0);
+}
+
+.cc-loading.cc-chat-virtual-list__top-loading .cc-loading__bolt {
+  filter: drop-shadow(0 4px 8px rgba(22, 119, 255, 0));
+  height: 16px;
+  width: 16px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+.cc-loading.cc-chat-virtual-list__top-loading {
+    transition-duration: 1ms;
+  }
+}
+
 .cc-loading,
 .cc-empty {
   align-items: center;
@@ -28,9 +72,7 @@
 .cc-loading__bolt {
   animation: cc-loading-bolt-pulse 880ms var(--cc-animation-easing) infinite;
   display: block;
-  filter: drop-shadow(
-    0 5px 9px color-mix(in srgb, var(--cc-form-color-accent) 26%, transparent)
-  );
+  filter: drop-shadow(0 5px 9px rgba(22, 119, 255, 0));
   height: 22px;
   overflow: visible;
   transform-origin: 50% 56%;
@@ -39,25 +81,25 @@
 
 .cc-loading__bolt-shadow {
   animation: cc-loading-bolt-shadow 880ms var(--cc-animation-easing) infinite;
-  fill: color-mix(in srgb, var(--cc-form-color-muted) 18%, transparent);
+  fill: rgba(100, 116, 139, 0);
   transform-origin: 51px 74px;
 }
 
 .cc-loading__bolt-side {
-  fill: color-mix(in srgb, var(--cc-form-color-accent) 52%, #3b1c8f);
+  fill: var(--cc-form-color-accent);
   transform: translate(6px, 5px);
 }
 
 .cc-loading__bolt-face {
-  fill: color-mix(in srgb, var(--cc-form-color-accent) 82%, #ffd84d);
-  stroke: color-mix(in srgb, var(--cc-form-color-accent) 46%, #ffffff);
+  fill: var(--cc-form-color-accent);
+  stroke: #ffffff;
   stroke-linejoin: round;
   stroke-width: 2;
 }
 
 .cc-loading__bolt-highlight {
   animation: cc-loading-bolt-glint 880ms var(--cc-animation-easing) infinite;
-  fill: color-mix(in srgb, #ffffff 44%, transparent);
+  fill: rgba(255, 255, 255, 0);
 }
 
 @keyframes cc-loading-bolt-pulse {

package/dist/styles/components/marquee.css

@@ -36,6 +36,10 @@
   cursor: pointer;
 }
 
+.cc-marquee__item[data-clickable="true"]:focus {
+  outline: none;
+}
+
 .cc-marquee__item[data-clickable="true"]:focus-visible {
   border-radius: var(--cc-radius-sm);
   outline: 2px solid var(--cc-marquee-focus-outline-color);

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

@@ -13,7 +13,6 @@
   overflow: auto;
   overscroll-behavior: contain;
   position: relative;
-  scrollbar-gutter: stable;
 }
 
 .cc-masonry-virtual-list__inner {

package/dist/styles/components/menu.css

@@ -0,0 +1,286 @@
+@import "../base.css";
+
+.cc-menu {
+  background: var(--cc-menu-background);
+  border: 1px solid var(--cc-menu-border-color);
+  border-radius: var(--cc-radius-lg);
+  box-sizing: border-box;
+  box-shadow: var(--cc-menu-shadow);
+  color: var(--cc-menu-text-color);
+  display: flex;
+  flex-direction: column;
+  font-family: var(--cc-form-font);
+  gap: 8px;
+  max-height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  padding: 8px;
+  transition:
+    width var(--cc-animation-duration) var(--cc-animation-easing),
+    border-color var(--cc-animation-duration) var(--cc-animation-easing),
+    box-shadow var(--cc-animation-duration) var(--cc-animation-easing);
+  width: var(--cc-menu-width);
+}
+
+.cc-menu *,
+.cc-menu *::before,
+.cc-menu *::after {
+  box-sizing: border-box;
+}
+
+.cc-menu[data-collapsed="true"] {
+  align-items: center;
+  gap: 4px;
+  padding: 6px;
+  width: var(--cc-menu-collapsed-width);
+}
+
+.cc-menu__collapse,
+.cc-menu__button {
+  align-items: center;
+  appearance: none;
+  background: transparent;
+  border: 0;
+  border-radius: var(--cc-radius-md);
+  color: inherit;
+  cursor: pointer;
+  display: inline-flex;
+  font: inherit;
+  min-width: 0;
+  outline: none;
+  transition:
+    background-color var(--cc-animation-duration) var(--cc-animation-easing),
+    color var(--cc-animation-duration) var(--cc-animation-easing),
+    box-shadow var(--cc-animation-duration) var(--cc-animation-easing);
+}
+
+.cc-menu__collapse {
+  border-radius: var(--cc-radius-pill);
+  color: var(--cc-menu-muted-color);
+  height: var(--cc-menu-collapsed-item-size);
+  justify-content: center;
+  margin-left: auto;
+  width: var(--cc-menu-collapsed-item-size);
+}
+
+.cc-menu__collapse > .cc-icon {
+  height: 16px;
+  stroke-width: 2.2;
+  width: 16px;
+}
+
+.cc-menu__collapse:hover,
+.cc-menu__button:hover {
+  background: var(--cc-menu-item-hover-background);
+  color: var(--cc-menu-text-color);
+}
+
+.cc-menu__collapse:focus,
+.cc-menu__button:focus {
+  box-shadow: none;
+  outline: none;
+}
+
+.cc-menu__collapse:focus-visible,
+.cc-menu__button:focus-visible {
+  box-shadow: var(--cc-menu-focus-shadow);
+}
+
+.cc-menu__list {
+  display: grid;
+  gap: 4px;
+  list-style: none;
+  margin: 0;
+  min-height: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: 0;
+  width: 100%;
+}
+
+.cc-menu__list--child {
+  border-left: 1px solid rgba(100, 116, 139, 1);
+  gap: 2px;
+  margin-left: calc(var(--cc-menu-icon-size) / 2);
+  margin-top: 0;
+  overflow: visible;
+  padding-left: 10px;
+}
+
+.cc-menu__transition {
+  width: 100%;
+}
+
+.cc-menu__transition-content {
+  min-height: 0;
+}
+
+.cc-menu__item {
+  min-width: 0;
+}
+
+.cc-menu__button {
+  gap: 10px;
+  color: var(--cc-menu-item-color);
+  min-height: var(--cc-menu-item-height);
+  padding: 0 10px;
+  position: relative;
+  text-align: left;
+  width: 100%;
+}
+
+.cc-menu__button::before {
+  background: var(--cc-menu-item-active-border-color);
+  border-radius: 999px;
+  content: "";
+  height: 18px;
+  left: 2px;
+  opacity: 0;
+  position: absolute;
+  transition: opacity var(--cc-animation-duration) var(--cc-animation-easing);
+  width: 3px;
+}
+
+.cc-menu__item[data-active="true"] > .cc-menu__button {
+  background: var(--cc-menu-item-active-background);
+  color: var(--cc-menu-item-active-color);
+  font-weight: 700;
+}
+
+.cc-menu__item[data-active="true"] > .cc-menu__button::before {
+  opacity: 1;
+}
+
+.cc-menu__item[data-disabled="true"] {
+  opacity: var(--cc-form-disabled-opacity);
+  pointer-events: none;
+}
+
+.cc-menu__icon {
+  align-items: center;
+  border-radius: var(--cc-menu-icon-radius);
+  color: var(--cc-menu-item-icon-color);
+  display: inline-flex;
+  flex: 0 0 var(--cc-menu-icon-size);
+  font-size: 13px;
+  font-weight: 800;
+  height: var(--cc-menu-icon-size);
+  justify-content: center;
+  line-height: 1;
+  overflow: hidden;
+  width: var(--cc-menu-icon-size);
+}
+
+.cc-menu__icon svg,
+.cc-menu__icon img {
+  border-radius: inherit;
+  display: block;
+  height: var(--cc-menu-icon-inner-size);
+  max-height: 100%;
+  max-width: 100%;
+  object-fit: cover;
+  width: var(--cc-menu-icon-inner-size);
+}
+
+.cc-menu__item[data-active="true"] > .cc-menu__button .cc-menu__icon {
+  color: var(--cc-menu-item-active-icon-color);
+}
+
+.cc-menu__label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cc-menu__arrow {
+  color: var(--cc-menu-item-muted-color);
+  flex: 0 0 14px;
+  font-size: 14px;
+  height: 14px;
+  transition: transform var(--cc-animation-duration) var(--cc-animation-easing);
+  width: 14px;
+}
+
+.cc-menu__item[data-expanded="true"] > .cc-menu__button .cc-menu__arrow {
+  transform: rotate(180deg);
+}
+
+.cc-menu__item[data-level="1"] > .cc-menu__button {
+  color: var(--cc-menu-item-muted-color);
+  font-size: 13px;
+  font-weight: 560;
+  min-height: 36px;
+}
+
+.cc-menu__item[data-level="2"] > .cc-menu__button,
+.cc-menu__item[data-level="3"] > .cc-menu__button {
+  color: var(--cc-menu-item-muted-color);
+  font-size: 12.5px;
+  min-height: 34px;
+}
+
+.cc-menu__item[data-level="1"] > .cc-menu__button::before,
+.cc-menu__item[data-level="2"] > .cc-menu__button::before,
+.cc-menu__item[data-level="3"] > .cc-menu__button::before {
+  height: 14px;
+}
+
+.cc-menu[data-collapsed="true"] .cc-menu__collapse {
+  margin-left: 0;
+}
+
+.cc-menu[data-collapsed="true"] > .cc-menu__list {
+  gap: 2px;
+}
+
+.cc-menu[data-collapsed="true"] .cc-menu__button {
+  height: var(--cc-menu-collapsed-item-size);
+  justify-content: center;
+  padding: 0;
+  width: var(--cc-menu-collapsed-item-size);
+}
+
+.cc-menu[data-collapsed="true"] .cc-menu__icon {
+  flex-basis: var(--cc-menu-icon-size);
+  height: var(--cc-menu-icon-size);
+  width: var(--cc-menu-icon-size);
+}
+
+.cc-menu[data-collapsed="true"] .cc-menu__label,
+.cc-menu[data-collapsed="true"] .cc-menu__arrow {
+  display: none;
+}
+
+@media (max-width: 640px) {
+.cc-menu {
+    --cc-menu-width: calc(100vw - 24px);
+    --cc-menu-collapsed-width: 56px;
+    --cc-menu-collapsed-item-size: 44px;
+    --cc-menu-icon-size: 24px;
+    --cc-menu-item-height: 38px;
+    border-radius: var(--cc-radius-md);
+    gap: 6px;
+    padding: 6px;
+  }
+
+.cc-menu__list {
+    gap: 3px;
+    max-height: 70vh;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    padding-right: 2px;
+  }
+
+.cc-menu__button {
+    gap: 8px;
+    padding: 0 10px;
+  }
+
+.cc-menu__list--child {
+    margin-left: 12px;
+    padding-left: 8px;
+  }
+}
+

package/dist/styles/components/modal.css

@@ -1,28 +1,5 @@
 @import "../base.css";
 
-.cc-field__control,
-.cc-color-picker__panel,
-.cc-verification-code__input,
-.cc-select__menu,
-.cc-virtual-select__menu,
-.cc-date-picker__panel,
-.cc-date-range-picker__panel,
-.cc-calendar,
-.cc-canvas-image,
-.cc-canvas-editor,
-.cc-canvas-editor__toolbar,
-.cc-canvas-editor__card,
-.cc-tilt-card__surface,
-.cc-table,
-.cc-upload,
-.cc-modal__panel,
-.cc-popup__panel,
-.cc-tooltip__content,
-.cc-toast {
-  backdrop-filter: var(--cc-theme-backdrop-filter);
-  -webkit-backdrop-filter: var(--cc-theme-backdrop-filter);
-}
-
 .cc-modal {
   inset: 0;
   overflow: visible;
@@ -52,7 +29,8 @@
   box-shadow: var(--cc-modal-shadow);
   color: var(--cc-modal-color);
   left: 50%;
-  max-width: min(520px, calc(100vw - 32px));
+  max-width: 520px;
+  width: calc(100vw - 32px);
   position: absolute;
   top: 50%;
   transform: translate(-50%, -50%);
@@ -135,6 +113,12 @@
   color: var(--cc-form-color-text);
 }
 
+.cc-modal__close:focus,
+.cc-popup__close:focus {
+  box-shadow: none;
+  outline: none;
+}
+
 .cc-modal__close:focus-visible,
 .cc-popup__close:focus-visible {
   box-shadow: var(--cc-form-shadow-focus);
@@ -151,6 +135,8 @@
   .cc-popup__overlay,
   .cc-popup__panel,
   .cc-tooltip__content,
+  .cc-orbital-sphere__stage,
+  .cc-orbital-sphere__item,
   .cc-tilt-card,
   .cc-tilt-card__surface,
   .cc-tilt-card__glare,

package/dist/styles/components/multi-column-picker.css

@@ -5,6 +5,8 @@
   border-radius: var(--cc-radius-lg);
   color: var(--cc-form-color-text);
   display: grid;
+  font-size: inherit;
+  font-weight: 400;
   grid-auto-columns: 1fr;
   grid-auto-flow: column;
   max-width: 100%;
@@ -44,7 +46,7 @@
 
 .cc-picker__option[data-selected="true"] {
   color: var(--cc-picker-active-color);
-  font-weight: 760;
+  font-weight: 400;
 }
 
 .cc-picker__option:not([data-selected="true"]) {
@@ -63,7 +65,7 @@
   background: linear-gradient(
     180deg,
     var(--cc-picker-mask-background),
-    color-mix(in srgb, var(--cc-picker-mask-background) 72%, transparent),
+    rgba(255, 255, 255, 1),
     transparent
   );
   height: calc(var(--cc-picker-option-height) * 2);
@@ -74,7 +76,7 @@
   background: linear-gradient(
     0deg,
     var(--cc-picker-mask-background),
-    color-mix(in srgb, var(--cc-picker-mask-background) 72%, transparent),
+    rgba(255, 255, 255, 1),
     transparent
   );
   bottom: 0;