@class-kit/vue 0.1.2 → 0.1.4

package/dist/styles/components/password-input.css

@@ -43,43 +43,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 {
@@ -116,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;
@@ -166,16 +159,16 @@
 
 .cc-password-field__eye {
   display: block;
-  height: 23px;
+  height: 22px;
   stroke: currentColor;
   stroke-linecap: round;
   stroke-linejoin: round;
-  stroke-width: 2;
-  width: 23px;
+  stroke-width: 1.55;
+  width: 22px;
 }
 
 .cc-password-field__eye-mask {
-  stroke-width: 2.35;
+  stroke-width: 1.7;
 }
 
 .cc-password-field__toggle-image {
@@ -186,10 +179,15 @@
 }
 
 .cc-password-field__toggle:hover {
-  background: color-mix(in srgb, var(--cc-form-color-accent) 10%, transparent);
+  background: rgba(22, 119, 255, 0);
   color: var(--cc-form-color-accent);
 }
 
+.cc-password-field__toggle:focus {
+  box-shadow: none;
+  outline: none;
+}
+
 .cc-password-field__toggle:focus-visible {
   box-shadow: var(--cc-form-shadow-focus);
   outline: none;
@@ -226,9 +224,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;
 }
@@ -281,9 +279,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/popup.css

@@ -30,6 +30,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);
@@ -106,12 +112,12 @@
 
 .cc-popup[data-contained="true"][data-placement="top"] .cc-popup__panel,
 .cc-popup[data-contained="true"][data-placement="bottom"] .cc-popup__panel {
-  max-height: min(var(--cc-popup-max-size), 100%);
+  max-height: var(--cc-popup-max-size);
 }
 
 .cc-popup[data-contained="true"][data-placement="left"] .cc-popup__panel,
 .cc-popup[data-contained="true"][data-placement="right"] .cc-popup__panel {
-  max-width: min(var(--cc-popup-max-size), 100%);
+  max-width: var(--cc-popup-max-size);
 }
 
 .cc-popup[data-state="enter"] .cc-popup__overlay {

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

@@ -71,8 +71,7 @@
   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
-    color-mix(in srgb, var(--cc-code-preview-background) 84%, transparent);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1);
   display: flex;
   gap: 12px;
   justify-content: space-between;
@@ -96,11 +95,7 @@
 }
 
 .cc-code-preview__lang {
-  background: color-mix(
-    in srgb,
-    var(--cc-code-preview-panel-background) 78%,
-    transparent
-  );
+  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);
@@ -138,11 +133,7 @@
 }
 
 .cc-code-preview__actions button:hover {
-  background: color-mix(
-    in srgb,
-    var(--cc-code-preview-accent-color) 7%,
-    var(--cc-code-preview-background)
-  );
+  background: var(--cc-code-preview-background);
   border-color: var(--cc-code-preview-accent-color);
   color: var(--cc-code-preview-accent-color);
 }
@@ -151,35 +142,34 @@
   transform: translateY(1px);
 }
 
+.cc-code-preview__actions button:focus {
+  outline: none;
+}
+
 .cc-code-preview__actions button:focus-visible {
-  outline: 2px solid
-    color-mix(in srgb, var(--cc-code-preview-accent-color) 28%, transparent);
+  outline: 2px solid rgba(22, 119, 255, 0);
   outline-offset: 2px;
 }
 
 .cc-code-preview__panel {
   background:
-    linear-gradient(
-      180deg,
-      color-mix(in srgb, var(--cc-code-preview-background) 42%, transparent),
-      transparent 36%
-    ),
+    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
-      color-mix(in srgb, var(--cc-code-preview-background) 78%, transparent),
+    inset 0 1px 0 rgba(255, 255, 255, 1),
     var(--cc-code-preview-shadow);
   left: 0;
   margin: 0;
-  max-height: min(420px, calc(100vh - 48px));
+  max-height: calc(100vh - 48px);
   overflow: auto;
   padding: 0;
   position: absolute;
   right: auto;
   top: calc(100% + 10px);
-  width: min(720px, calc(100vw - 48px));
+  max-width: 720px;
+  width: calc(100vw - 48px);
   z-index: 40;
 }
 
@@ -197,7 +187,7 @@
 .cc-code-preview[data-strategy="fixed"] .cc-code-preview__panel,
 .cc-code-preview__panel[data-strategy="fixed"] {
   bottom: auto;
-  max-height: min(420px, calc(100dvh - 20px));
+  max-height: calc(100vh - 20px);
   position: fixed;
   right: auto;
   z-index: 1000;

package/dist/styles/components/radio-group.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;
@@ -297,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

@@ -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;
@@ -256,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);