@class-kit/vue 0.1.1 → 0.1.3

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

@@ -60,3 +60,199 @@
   width: 100%;
 }
 
+.cc-code-preview {
+  color: var(--cc-code-preview-color);
+  font-family: var(--cc-form-font);
+  position: relative;
+}
+
+.cc-code-preview__bar {
+  align-items: center;
+  background: var(--cc-code-preview-bar-background);
+  border: 1px solid var(--cc-code-preview-border-color);
+  border-radius: var(--cc-radius-lg);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1);
+  display: flex;
+  gap: 12px;
+  justify-content: space-between;
+  min-height: 44px;
+  padding: 8px 10px 8px 14px;
+}
+
+.cc-code-preview__meta {
+  align-items: center;
+  display: inline-flex;
+  gap: 8px;
+  min-width: 0;
+}
+
+.cc-code-preview__title {
+  font-size: 13px;
+  font-weight: 780;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cc-code-preview__lang {
+  background: rgba(255, 255, 255, 1);
+  border: 1px solid var(--cc-code-preview-border-color);
+  border-radius: 999px;
+  color: var(--cc-code-preview-muted-color);
+  font-size: 11px;
+  font-weight: 720;
+  padding: 3px 8px;
+}
+
+.cc-code-preview__actions {
+  display: inline-flex;
+  flex: none;
+  gap: 6px;
+}
+
+.cc-code-preview__actions button {
+  appearance: none;
+  background: var(--cc-code-preview-background);
+  border: 1px solid var(--cc-code-preview-border-color);
+  border-radius: var(--cc-radius-md);
+  color: var(--cc-code-preview-color);
+  cursor: pointer;
+  font: inherit;
+  font-size: 11px;
+  font-weight: 760;
+  height: 30px;
+  padding: 0 10px;
+  transition:
+    background var(--cc-animation-duration, 180ms)
+      var(--cc-animation-easing, ease),
+    border-color var(--cc-animation-duration, 180ms)
+      var(--cc-animation-easing, ease),
+    color var(--cc-animation-duration, 180ms) var(--cc-animation-easing, ease),
+    transform var(--cc-animation-duration, 180ms)
+      var(--cc-animation-easing, ease);
+}
+
+.cc-code-preview__actions button:hover {
+  background: var(--cc-code-preview-background);
+  border-color: var(--cc-code-preview-accent-color);
+  color: var(--cc-code-preview-accent-color);
+}
+
+.cc-code-preview__actions button:active {
+  transform: translateY(1px);
+}
+
+.cc-code-preview__actions button:focus {
+  outline: none;
+}
+
+.cc-code-preview__actions button:focus-visible {
+  outline: 2px solid rgba(22, 119, 255, 0);
+  outline-offset: 2px;
+}
+
+.cc-code-preview__panel {
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0), transparent 36%),
+    var(--cc-code-preview-panel-background);
+  border: 1px solid var(--cc-code-preview-border-color);
+  border-radius: var(--cc-radius-lg);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 1),
+    var(--cc-code-preview-shadow);
+  left: 0;
+  margin: 0;
+  max-height: calc(100vh - 48px);
+  overflow: auto;
+  padding: 0;
+  position: absolute;
+  right: auto;
+  top: calc(100% + 10px);
+  max-width: 720px;
+  width: calc(100vw - 48px);
+  z-index: 40;
+}
+
+.cc-code-preview__panel[data-expanded="false"] {
+  border-color: transparent;
+  box-shadow: none;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.cc-code-preview__transition {
+  width: 100%;
+}
+
+.cc-code-preview[data-strategy="fixed"] .cc-code-preview__panel,
+.cc-code-preview__panel[data-strategy="fixed"] {
+  bottom: auto;
+  max-height: calc(100vh - 20px);
+  position: fixed;
+  right: auto;
+  z-index: 1000;
+}
+
+.cc-code-preview__panel::before {
+  background: var(--cc-code-preview-line-color);
+  content: "";
+  height: 1px;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.cc-code-preview[data-placement="top"] .cc-code-preview__panel {
+  bottom: calc(100% + 10px);
+  top: auto;
+}
+
+.cc-code-preview[data-placement="right"] .cc-code-preview__panel {
+  left: calc(100% + 10px);
+  top: 0;
+}
+
+.cc-code-preview[data-placement="left"] .cc-code-preview__panel {
+  left: auto;
+  right: calc(100% + 10px);
+  top: 0;
+}
+
+.cc-code-preview[data-strategy="fixed"][data-placement="top"]
+  .cc-code-preview__panel,
+.cc-code-preview[data-strategy="fixed"][data-placement="right"]
+  .cc-code-preview__panel,
+.cc-code-preview[data-strategy="fixed"][data-placement="left"]
+  .cc-code-preview__panel,
+.cc-code-preview__panel[data-strategy="fixed"][data-placement="top"],
+.cc-code-preview__panel[data-strategy="fixed"][data-placement="right"],
+.cc-code-preview__panel[data-strategy="fixed"][data-placement="left"] {
+  bottom: auto;
+  right: auto;
+}
+
+.cc-code-preview__panel-content {
+  min-height: 0;
+}
+
+.cc-code-preview__panel pre {
+  margin: 0;
+  padding: 16px;
+}
+
+.cc-code-preview__panel > code {
+  padding: 16px;
+}
+
+.cc-code-preview__panel code {
+  color: var(--cc-code-preview-color);
+  display: block;
+  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
+  font-size: 12px;
+  font-weight: 520;
+  line-height: 1.68;
+  tab-size: 2;
+  white-space: pre;
+}
+

package/dist/styles/components/radio-group.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-field {
   display: grid;
   gap: 6px;
@@ -59,6 +36,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;
 }
@@ -93,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;
@@ -135,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;
 }
@@ -190,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;
@@ -281,14 +290,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;
 }

package/dist/styles/components/rating.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-field {
   display: grid;
   gap: 6px;
@@ -59,6 +36,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;
 }
@@ -93,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;
@@ -135,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;
 }
@@ -190,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;
@@ -240,6 +249,11 @@
   color: var(--cc-rating-star-active-color);
 }
 
+.cc-rating__star:focus {
+  box-shadow: none;
+  outline: none;
+}
+
 .cc-rating__star:focus-visible {
   border-radius: var(--cc-radius-sm);
   box-shadow: var(--cc-form-shadow-focus);

package/dist/styles/components/select.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-field {
   display: grid;
   gap: 6px;
@@ -59,6 +36,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;
 }
@@ -93,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;
@@ -135,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;
 }
@@ -225,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;
@@ -267,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;
 }
@@ -275,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;

package/dist/styles/components/signature.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-field {
   display: grid;
   gap: 6px;
@@ -59,6 +36,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;
 }
@@ -93,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;
@@ -135,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;
 }
@@ -190,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;
@@ -219,9 +228,8 @@
   user-select: none;
 }
 
-.cc-signature__canvas:focus-visible {
-  outline: 2px solid
-    color-mix(in srgb, var(--cc-form-color-accent) 45%, transparent);
+.cc-signature__canvas:focus {
+  outline: 2px solid rgba(22, 119, 255, 0);
   outline-offset: 2px;
 }
 
@@ -270,11 +278,7 @@
 
 .cc-signature__action:hover:not(:disabled) {
   background: var(--cc-signature-action-hover-bg);
-  border-color: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 42%,
-    var(--cc-signature-border-color)
-  );
+  border-color: var(--cc-signature-border-color);
   transform: translateY(-1px);
 }
 

package/dist/styles/components/skeleton.css

@@ -21,7 +21,7 @@
 }
 
 .cc-skeleton__mask {
-  background: color-mix(in srgb, var(--cc-form-color-muted) 16%, transparent);
+  background: rgba(100, 116, 139, 0);
   border-radius: var(--cc-skeleton-radius, inherit);
   inset: 0;
   overflow: hidden;
@@ -33,15 +33,15 @@
   animation: cc-lazy-image-skeleton 1.2s ease-in-out infinite;
   background: linear-gradient(
     90deg,
-    color-mix(in srgb, var(--cc-form-color-muted) 12%, transparent),
-    color-mix(in srgb, var(--cc-form-color-accent) 14%, transparent),
-    color-mix(in srgb, var(--cc-form-color-muted) 12%, transparent)
+    rgba(100, 116, 139, 0),
+    rgba(22, 119, 255, 0),
+    rgba(100, 116, 139, 0)
   );
   background-size: 220% 100%;
 }
 
 .cc-skeleton[data-overlay="false"] > span {
-  background: color-mix(in srgb, var(--cc-form-color-muted) 16%, transparent);
+  background: rgba(100, 116, 139, 0);
   border-radius: var(--cc-radius-pill);
   display: block;
   height: 14px;
@@ -52,9 +52,9 @@
   animation: cc-lazy-image-skeleton 1.2s ease-in-out infinite;
   background: linear-gradient(
     90deg,
-    color-mix(in srgb, var(--cc-form-color-muted) 12%, transparent),
-    color-mix(in srgb, var(--cc-form-color-accent) 14%, transparent),
-    color-mix(in srgb, var(--cc-form-color-muted) 12%, transparent)
+    rgba(100, 116, 139, 0),
+    rgba(22, 119, 255, 0),
+    rgba(100, 116, 139, 0)
   );
   background-size: 220% 100%;
 }