slexkit 0.3.0 → 0.3.2

package/dist/slexkit.css

@@ -904,52 +904,6 @@ color-scheme: dark;
   box-sizing: border-box;
 }
 
-body[data-mobile-nav-open] {
-  overflow: hidden;
-  overscroll-behavior: contain;
-}
-
-#mobileNav {
-  --mobile-nav-backdrop-opacity: 0;
-  --mobile-nav-panel-translate: -100%;
-  pointer-events: none;
-}
-
-#mobileNav[data-open="true"] {
-  --mobile-nav-backdrop-opacity: 1;
-  --mobile-nav-panel-translate: 0px;
-  pointer-events: auto;
-}
-
-#mobileNav [data-mobile-nav-backdrop] {
-  opacity: var(--mobile-nav-backdrop-opacity);
-  touch-action: pan-y;
-  transition: opacity 180ms ease;
-}
-
-#mobileNav [data-mobile-nav-panel] {
-  transform: translateX(var(--mobile-nav-panel-translate));
-  touch-action: pan-y;
-  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
-  will-change: transform;
-}
-
-#mobileNav[data-dragging="true"] [data-mobile-nav-backdrop],
-#mobileNav[data-dragging="true"] [data-mobile-nav-panel] {
-  transition: none;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  #mobileNav [data-mobile-nav-backdrop],
-  #mobileNav [data-mobile-nav-panel] {
-    transition: none;
-  }
-}
-
-.slexkit-for-wrapper {
-  display: contents;
-}
-
 .slexkit-source-toolbar {
   display: flex;
   align-items: center;
@@ -1846,7 +1800,6 @@ body[data-mobile-nav-open] {
   overflow: hidden;
   clip: rect(0 0 0 0);
   white-space: nowrap;
-  clip-path: inset(50%);
 }
 
 .slex-playground-error {
@@ -2365,7 +2318,7 @@ body[data-mobile-nav-open] {
   display: block;
 }
 
-.slex-stat-character[data-stat-change] {
+.slex-stat-character[data-stat-kind="digit"][data-stat-change] {
   overflow: hidden;
 }
 
@@ -3210,53 +3163,62 @@ body[data-mobile-nav-open] {
 .slex-slider {
   box-sizing: border-box;
   width: 100%;
-  height: 0.5rem;
+  height: 1rem;
+  padding: 0;
+  border: 0;
   border-radius: 999px;
   -webkit-appearance: none;
   appearance: none;
-  background: linear-gradient(
-    to right,
-    var(--primary) 0%,
-    var(--primary) var(--slex-slider-progress, 0%),
-    var(--secondary) var(--slex-slider-progress, 0%),
-    var(--secondary) 100%
-  );
+  background: transparent;
   accent-color: var(--primary);
   cursor: pointer;
+  overflow: visible;
   transition: box-shadow 150ms ease, filter 150ms ease;
 }
 
-.slex-slider:hover {
-  box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary) 8%, transparent);
-}
-
-.slex-slider:active {
-  box-shadow: 0 0 0 5px color-mix(in oklab, var(--primary) 12%, transparent);
-}
-
 .slex-slider:focus-visible {
   outline: 2px solid var(--ring);
   outline-offset: 4px;
 }
 
 .slex-slider::-webkit-slider-thumb {
+  box-sizing: border-box;
   width: 1rem;
   height: 1rem;
+  margin-top: -0.25rem;
   border: 2px solid var(--primary);
   border-radius: 999px;
-  background: var(--background) !important;
+  background-color: var(--background);
+  background-clip: padding-box;
   box-shadow: 0 1px 2px color-mix(in oklab, var(--foreground) 14%, transparent);
   -webkit-appearance: none;
   appearance: none;
   transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease, transform 120ms ease;
 }
 
+.slex-slider::-webkit-slider-runnable-track {
+  box-sizing: border-box;
+  width: 100%;
+  height: 0.5rem;
+  border: 0;
+  border-radius: 999px;
+  background: linear-gradient(
+    to right,
+    var(--primary) 0%,
+    var(--primary) var(--slex-slider-progress, 0%),
+    var(--secondary) var(--slex-slider-progress, 0%),
+    var(--secondary) 100%
+  );
+}
+
 .slex-slider::-moz-range-thumb {
+  box-sizing: border-box;
   width: 1rem;
   height: 1rem;
   border: 2px solid var(--primary);
   border-radius: 999px;
-  background: var(--background) !important;
+  background-color: var(--background);
+  background-clip: padding-box;
   box-shadow: 0 1px 2px color-mix(in oklab, var(--foreground) 14%, transparent);
   transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease, transform 120ms ease;
 }
@@ -3409,12 +3371,12 @@ body[data-mobile-nav-open] {
   opacity: 0.55;
 }
 
-.slex-switch:has(.slex-switch-input:disabled) {
+.slex-switch[data-disabled="true"] {
   cursor: not-allowed;
 }
 
-.slex-switch:has(.slex-switch-input:disabled):hover .slex-switch-control,
-.slex-switch:has(.slex-switch-input:disabled):hover .slex-switch-control::after {
+.slex-switch[data-disabled="true"]:hover .slex-switch-control,
+.slex-switch[data-disabled="true"]:hover .slex-switch-control::after {
   box-shadow: none;
 }
 
@@ -3467,16 +3429,18 @@ body[data-mobile-nav-open] {
   border: 1px solid var(--input);
   border-radius: var(--radius);
   background: var(--background);
+  background-clip: padding-box;
   color: var(--foreground);
   font-family: inherit;
   font-size: 0.875rem;
   line-height: 1.5;
   outline: none;
+  -webkit-appearance: none;
+  appearance: none;
   transition: border-color 150ms ease, box-shadow 150ms ease;
 }
 
-.slex-input-control[data-has-unit="true"] .slex-input,
-.slex-input-control[data-has-controls="true"] .slex-input {
+.slex-input-control[data-has-unit="true"] .slex-input {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
@@ -3500,79 +3464,16 @@ body[data-mobile-nav-open] {
   transition: border-color 150ms ease, box-shadow 150ms ease;
 }
 
-.slex-input-control[data-has-controls="true"] .slex-input-unit {
-  border-radius: 0;
-}
-
-.slex-input-controls {
-  box-sizing: border-box;
-  display: inline-grid;
-  grid-template-rows: repeat(2, minmax(0, 1fr));
-  align-items: stretch;
-  flex: 0 0 auto;
-  width: 1.875rem;
-  min-width: 1.875rem;
-  min-height: 2.5625rem;
-  overflow: hidden;
-  border: 1px solid var(--input);
-  border-left: 0;
-  border-radius: 0 var(--radius) var(--radius) 0;
-  background: var(--background);
-  transition: border-color 150ms ease, box-shadow 150ms ease;
-}
-
-.slex-input-step {
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  min-width: 0;
-  min-height: 0;
-  padding: 0;
-  border: 0;
-  border-top: 1px solid var(--input);
-  border-radius: 0;
-  background: transparent;
-  color: var(--foreground);
-  font: inherit;
-  font-size: 0.75rem;
-  font-weight: 600;
-  line-height: 1;
-  cursor: pointer;
-  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
-}
-
-.slex-input-step:first-child {
-  border-top: 0;
-}
-
-.slex-input-step:last-child {
-  border-radius: 0;
-}
-
-.slex-input-step:hover:not(:disabled) {
-  background: color-mix(in oklab, var(--muted) 52%, var(--background));
-}
-
-.slex-input-step:focus-visible {
-  z-index: 1;
-  outline: none;
-  background: color-mix(in oklab, var(--muted) 58%, var(--background));
-  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ring) 34%, transparent);
-}
-
-.slex-input-step:disabled {
-  opacity: 0.45;
-  cursor: not-allowed;
-}
-
 .slex-input::placeholder {
   color: var(--muted-foreground);
 }
 
 .slex-input:focus {
   border-color: var(--ring);
+  box-shadow: 0 0 0 2px color-mix(in oklab, var(--ring) 18%, transparent);
+}
+
+.slex-input-control[data-has-unit="true"] .slex-input:focus {
   box-shadow: none;
 }
 
@@ -3597,6 +3498,10 @@ body[data-mobile-nav-open] {
 
 .slex-input-field[data-invalid="true"] .slex-input:focus {
   border-color: var(--destructive);
+  box-shadow: 0 0 0 2px color-mix(in oklab, var(--destructive) 18%, transparent);
+}
+
+.slex-input-field[data-invalid="true"] .slex-input-control[data-has-unit="true"] .slex-input:focus {
   box-shadow: none;
 }
 
@@ -3604,13 +3509,12 @@ body[data-mobile-nav-open] {
   box-shadow: 0 0 0 2px color-mix(in oklab, var(--ring) 16%, transparent);
 }
 
-.slex-input-control:focus-within .slex-input,
-.slex-input-control:focus-within .slex-input-unit,
-.slex-input-control:focus-within .slex-input-controls {
-  border-color: var(--ring);
+.slex-input-control:not([data-has-unit]):focus-within {
+  box-shadow: none;
 }
 
-.slex-input-control:focus-within .slex-input-step {
+.slex-input-control:focus-within .slex-input,
+.slex-input-control:focus-within .slex-input-unit {
   border-color: var(--ring);
 }
 
@@ -3619,22 +3523,16 @@ body[data-mobile-nav-open] {
   color: color-mix(in oklab, var(--destructive) 84%, var(--muted-foreground));
 }
 
-.slex-input-field[data-invalid="true"] .slex-input-step {
-  border-color: color-mix(in oklab, var(--destructive) 72%, var(--input));
-}
-
-.slex-input-field[data-invalid="true"] .slex-input-controls {
-  border-color: color-mix(in oklab, var(--destructive) 72%, var(--input));
-}
-
 .slex-input-field[data-invalid="true"] .slex-input-control:focus-within {
   box-shadow: 0 0 0 2px color-mix(in oklab, var(--destructive) 18%, transparent);
 }
 
+.slex-input-field[data-invalid="true"] .slex-input-control:not([data-has-unit]):focus-within {
+  box-shadow: none;
+}
+
 .slex-input-field[data-invalid="true"] .slex-input-control:focus-within .slex-input,
-.slex-input-field[data-invalid="true"] .slex-input-control:focus-within .slex-input-unit,
-.slex-input-field[data-invalid="true"] .slex-input-control:focus-within .slex-input-controls,
-.slex-input-field[data-invalid="true"] .slex-input-control:focus-within .slex-input-step {
+.slex-input-field[data-invalid="true"] .slex-input-control:focus-within .slex-input-unit {
   border-color: var(--destructive);
 }
 
@@ -3648,11 +3546,6 @@ body[data-mobile-nav-open] {
   cursor: not-allowed;
 }
 
-.slex-input[disabled] ~ .slex-input-controls,
-.slex-input[readonly] ~ .slex-input-controls {
-  opacity: 0.6;
-}
-
 .slex-input-description {
   color: var(--muted-foreground);
   font-size: 0.75rem;
@@ -3780,7 +3673,6 @@ body[data-mobile-nav-open] {
   border: 0;
   overflow: hidden;
   clip: rect(0 0 0 0);
-  clip-path: inset(50%);
   white-space: nowrap;
 }
 
@@ -3839,11 +3731,6 @@ body[data-mobile-nav-open] {
   color: var(--accent-foreground);
 }
 
-.slex-select-menu:has(.slex-select-option:hover) .slex-select-option--active:not(:hover) {
-  background: transparent;
-  color: var(--popover-foreground, var(--foreground));
-}
-
 .slex-select-option--selected {
   font-weight: 500;
 }
@@ -4282,8 +4169,8 @@ body[data-mobile-nav-open] {
   transform: none;
 }
 
-.slex-checkbox-field:has(.slex-checkbox:disabled),
-.slex-radio-field:has(.slex-radio:disabled) {
+.slex-checkbox-field[data-disabled="true"],
+.slex-radio-field[data-disabled="true"] {
   cursor: not-allowed;
   opacity: 0.65;
 }