@stanko/ctrls 0.3.4 → 0.4.0

package/dist/ctrls.css

@@ -188,11 +188,13 @@
   --ctrls-bg: oklch(0.99 0.005 var(--ctrls-h) / 0.9);
   --ctrls-text: oklch(0.01 0.2 var(--ctrls-h));
   --ctrls-text-muted: oklch(0.5 0.005 var(--ctrls-h));
+  --ctrls-hover-bg: oklch(0.98 0.03 var(--ctrls-h));
   --ctrls-border: oklch(0.925 0.01 var(--ctrls-h));
   --ctrls-input-border: oklch(0.925 0.01 var(--ctrls-h));
+  --ctrls-hover-border: oklch(0.85 0.075 var(--ctrls-h));
   --ctrls-input-wrapper-bg: white;
   --ctrls-btn-bg: white;
-  --ctrls-btn-hover-bg: oklch(0.95 0.01 var(--ctrls-h) / 0.5);
+  --ctrls-btn-hover-bg: oklch(0.98 0.02 var(--ctrls-h) / 0.5);
   --ctrls-btn-hover-text: var(--ctrls-theme);
   --ctrls-btn-selected-bg: var(--ctrls-theme);
   --ctrls-btn-selected-text: white;
@@ -218,9 +220,9 @@
 
 @media (prefers-color-scheme: dark) {
   .ctrls--system-theme {
-    --ctrls-c: 0.3;
-    --ctrls-theme-oklch: 0.6 calc(var(--ctrls-c) - 0.1) var(--ctrls-h);
-    --ctrls-theme: oklch(0.6 calc(var(--ctrls-c) - 0.1) var(--ctrls-h));
+    --ctrls-c: 0.2;
+    --ctrls-theme-oklch: 0.6 var(--ctrls-c) var(--ctrls-h);
+    --ctrls-theme: oklch(0.6 var(--ctrls-c) var(--ctrls-h));
     --ctrls-gray-50: #e1e1e1;
     --ctrls-gray-100: #d3d3d3;
     --ctrls-gray-200: #b7b7b7;
@@ -231,21 +233,22 @@
     --ctrls-bg: oklch(0.27 0.003 var(--ctrls-h) / 0.9);
     --ctrls-text: oklch(0.95 0.005 var(--ctrls-h));
     --ctrls-text-muted: oklch(0.75 0.005 var(--ctrls-h));
+    --ctrls-hover-bg: oklch(0.23 0.03 var(--ctrls-h));
     --ctrls-border: oklch(0.35 0.01 var(--ctrls-h));
     --ctrls-input-border: transparent;
+    --ctrls-hover-border: oklch(0.5 0.15 var(--ctrls-h));
     --ctrls-input-wrapper-bg: oklch(0.22 0.002 var(--ctrls-h));
     --ctrls-btn-bg: oklch(0.2 0.001 var(--ctrls-h));
+    --ctrls-btn-selected-bg: oklch(0.5 var(--ctrls-c) var(--ctrls-h));
     --ctrls-btn-hover-bg: oklch(0.1 0.001 var(--ctrls-h));
     --ctrls-input-bg: var(--ctrls-input-wrapper-bg);
-    --ctrls-checkbox-checked-hover-bg: oklch(
-      0.45 calc(var(--ctrls-c) - 0.1) var(--ctrls-h)
-    );
+    --ctrls-checkbox-checked-hover-bg: oklch(0.45 var(--ctrls-c) var(--ctrls-h));
   }
 }
 .ctrls--dark-theme {
-  --ctrls-c: 0.3;
-  --ctrls-theme-oklch: 0.6 calc(var(--ctrls-c) - 0.1) var(--ctrls-h);
-  --ctrls-theme: oklch(0.6 calc(var(--ctrls-c) - 0.1) var(--ctrls-h));
+  --ctrls-c: 0.2;
+  --ctrls-theme-oklch: 0.6 var(--ctrls-c) var(--ctrls-h);
+  --ctrls-theme: oklch(0.6 var(--ctrls-c) var(--ctrls-h));
   --ctrls-gray-50: #e1e1e1;
   --ctrls-gray-100: #d3d3d3;
   --ctrls-gray-200: #b7b7b7;
@@ -256,15 +259,16 @@
   --ctrls-bg: oklch(0.27 0.003 var(--ctrls-h) / 0.9);
   --ctrls-text: oklch(0.95 0.005 var(--ctrls-h));
   --ctrls-text-muted: oklch(0.75 0.005 var(--ctrls-h));
+  --ctrls-hover-bg: oklch(0.23 0.03 var(--ctrls-h));
   --ctrls-border: oklch(0.35 0.01 var(--ctrls-h));
   --ctrls-input-border: transparent;
+  --ctrls-hover-border: oklch(0.5 0.15 var(--ctrls-h));
   --ctrls-input-wrapper-bg: oklch(0.22 0.002 var(--ctrls-h));
   --ctrls-btn-bg: oklch(0.2 0.001 var(--ctrls-h));
+  --ctrls-btn-selected-bg: oklch(0.5 var(--ctrls-c) var(--ctrls-h));
   --ctrls-btn-hover-bg: oklch(0.1 0.001 var(--ctrls-h));
   --ctrls-input-bg: var(--ctrls-input-wrapper-bg);
-  --ctrls-checkbox-checked-hover-bg: oklch(
-    0.45 calc(var(--ctrls-c) - 0.1) var(--ctrls-h)
-  );
+  --ctrls-checkbox-checked-hover-bg: oklch(0.45 var(--ctrls-c) var(--ctrls-h));
 }
 
 .ctrls {
@@ -300,31 +304,48 @@
   display: block;
   overflow: visible;
 }
+.ctrls img {
+  max-width: 100%;
+}
 
-.ctrls__group-title,
-.ctrls__title {
+.ctrls__title,
+.ctrls__group-title {
   background: none;
   border: none;
-  display: block;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   width: 100%;
   font-weight: bold;
   letter-spacing: -0.025em;
-  padding: 0.375rem 0.5rem;
+  padding: 0.25rem 0.5rem;
   cursor: pointer;
   transition: color 300ms, background-color 300ms;
 }
-.ctrls__group-title:focus-visible, .ctrls__group-title:hover,
-.ctrls__title:focus-visible,
-.ctrls__title:hover {
+.ctrls__title:focus-visible, .ctrls__title:hover,
+.ctrls__group-title:focus-visible,
+.ctrls__group-title:hover {
   color: var(--ctrls-theme);
-  background: var(--ctrls-btn-hover-bg);
+  background: var(--ctrls-hover-bg);
+}
+.ctrls__title svg,
+.ctrls__group-title svg {
+  transition: transform 250ms;
+  width: 1rem;
+}
+
+.ctrls__group-title {
+  padding-block: 0.125rem;
+}
+
+.ctrls--hidden .ctrls__title svg,
+.ctrls__group--hidden .ctrls__group-title svg {
+  transform: rotate(180deg);
 }
 
 .ctrls__controls {
-  display: grid;
-  padding-block: 0.5rem;
-  gap: 0.5rem;
   overflow: auto;
+  display: grid;
   scrollbar-width: thin;
   scrollbar-color: var(--ctrls-scrollbar-thumb-bg) transparent;
 }
@@ -333,11 +354,65 @@
   display: none;
 }
 
-.ctrls--hidden .ctrls__title {
-  border-block-end: none;
+.ctrls__group {
+  margin: 0.25rem 0.5rem;
+  border: 1px solid var(--ctrls-border);
+  border-radius: var(--ctrls-radius);
+  overflow: hidden;
+}
+.ctrls__group:only-child {
+  margin: 0.5rem;
+}
+
+.ctrls__group + .ctrls__group {
+  margin-top: 0.5rem;
+}
+
+.ctrls__group .ctrls__control {
+  grid-template-columns: calc(var(--ctrls-label-width) - 0.5rem) minmax(0, 1fr);
+}
+
+.ctrls__group--hidden {
+  padding-block-end: 0;
+}
+
+.ctrls__group--hidden .ctrls__control {
+  display: none;
+}
+
+.ctrls__control {
+  padding: 0.25rem 0.5rem;
+  display: grid;
+  grid-template-columns: var(--ctrls-label-width) minmax(0, 1fr);
+  align-items: center;
+}
+.ctrls__control:only-child {
+  padding: 0.5rem;
+}
+.ctrls__control:hover {
+  background: var(--ctrls-hover-bg);
+}
+.ctrls__control:hover .ctrls__control-label {
+  color: var(--ctrls-theme);
+}
+
+.ctrls__control-label {
+  color: var(--ctrls-text-muted);
+  font-weight: 700;
+  hyphens: auto;
+  padding-right: 0.25rem;
+}
+
+.ctrls__control-value {
+  font-weight: 400;
+  font-size: var(--ctrls-value-font-size);
+}
+
+.ctrls button:focus-visible {
+  outline: 2px solid var(--ctrls-theme);
+  outline-offset: 2px;
 }
 
-/* ----- Buttons ----- */
 .ctrls__btn {
   background: none;
   border: none;
@@ -347,7 +422,7 @@
   justify-content: center;
   gap: 0.25rem;
   border-radius: var(--ctrls-radius);
-  transition: color 300ms, background-color 300ms;
+  transition: color 300ms, border-color 300ms, background-color 300ms;
 }
 .ctrls__btn:focus-visible, .ctrls__btn:hover {
   color: var(--ctrls-btn-hover-text);
@@ -361,6 +436,17 @@
   transition: opacity 300ms;
 }
 
+.ctrls__btn--sm {
+  padding: 0.375rem 0.5rem;
+  background: var(--ctrls-btn-bg);
+  border: 1px solid var(--ctrls-input-border);
+}
+.ctrls__btn--sm:focus-visible, .ctrls__btn--sm:hover {
+  color: var(--ctrls-theme);
+  background: var(--ctrls-btn-hover-bg);
+  border-color: var(--ctrls-hover-border);
+}
+
 .ctrls__btn--lg {
   margin-inline-start: calc(var(--ctrls-label-width) + 0.5rem);
   margin-inline-end: 0.5rem;
@@ -372,8 +458,12 @@
 .ctrls__btn--lg:focus-visible, .ctrls__btn--lg:hover {
   color: var(--ctrls-theme);
   background: var(--ctrls-btn-hover-bg);
+  border-color: var(--ctrls-hover-border);
 }
 
+.ctrls__randomize {
+  margin-block: 0.5rem;
+}
 .ctrls__randomize:focus-visible svg, .ctrls__randomize:hover svg {
   transform: rotate(0.5turn);
 }
@@ -383,58 +473,6 @@
   opacity: 0;
 }
 
-/* ----- Groups ----- */
-.ctrls__group {
-  margin: 0 0.5rem;
-  display: grid;
-  gap: 0.5rem;
-  padding-block-end: 0.5rem;
-  border: 1px solid var(--ctrls-border);
-  border-radius: var(--ctrls-radius);
-}
-
-.ctrls__group .ctrls__control {
-  grid-template-columns: calc(var(--ctrls-label-width) - 0.5rem) minmax(0, 1fr);
-}
-
-.ctrls__group-title {
-  text-align: left;
-}
-
-.ctrls__group--hidden {
-  padding-block-end: 0;
-}
-
-.ctrls__group--hidden .ctrls__control {
-  display: none;
-}
-
-/* ----- Controls ----- */
-.ctrls__control {
-  padding-inline: 0.5rem;
-  display: grid;
-  grid-template-columns: var(--ctrls-label-width) minmax(0, 1fr);
-  align-items: center;
-}
-
-.ctrls__control-label {
-  color: var(--ctrls-text-muted);
-  font-weight: 700;
-  hyphens: auto;
-  padding-right: 0.25rem;
-}
-
-.ctrls__control-value {
-  font-weight: 400;
-  font-size: var(--ctrls-value-font-size);
-}
-
-.ctrls button:focus-visible {
-  outline: 2px solid var(--ctrls-theme);
-  outline-offset: 2px;
-}
-
-/* ----- Boolean ----- */
 .ctrls__control--boolean input {
   opacity: 0;
   pointer-events: none;
@@ -471,6 +509,7 @@ label:hover .ctrls__boolean-input:checked + .ctrls__boolean-checkmark {
 
 label:hover .ctrls__boolean-input:not(:checked) + .ctrls__boolean-checkmark {
   color: var(--ctrls-checkbox-hover-text);
+  border-color: var(--ctrls-hover-border);
 }
 
 .ctrls__boolean-input:focus-visible + .ctrls__boolean-checkmark {
@@ -478,7 +517,6 @@ label:hover .ctrls__boolean-input:not(:checked) + .ctrls__boolean-checkmark {
   outline-offset: 2px;
 }
 
-/* ----- Range -----  */
 .ctrls__range-input {
   width: 100%;
   -webkit-tap-highlight-color: transparent;
@@ -489,7 +527,7 @@ label:hover .ctrls__boolean-input:not(:checked) + .ctrls__boolean-checkmark {
   border-radius: 0;
   flex-basis: calc(50% + var(--dri-thumb-width));
   flex-shrink: 0;
-  height: 1.75rem;
+  height: 1.5rem;
   margin: 0;
   min-width: var(--dri-thumb-width);
   outline: none;
@@ -569,7 +607,6 @@ label:hover .ctrls__boolean-input:not(:checked) + .ctrls__boolean-checkmark {
   border-color: var(--ctrls-range-thumb-hover-border);
 }
 
-/* ----- Dual range -----  */
 .ctrls__control-right .dual-range-input {
   padding-inline-end: calc(var(--dri-thumb-width) * 2);
 }
@@ -579,7 +616,7 @@ label:hover .ctrls__boolean-input:not(:checked) + .ctrls__boolean-checkmark {
 .ctrls__control-right .dual-range-input {
   --dri-track-color: var(--ctrls-range-track-bg);
   --dri-track-filled-color: var(--ctrls-range-track-active-bg);
-  --dri-height: 1.75rem;
+  --dri-height: 1.5rem;
   --dri-thumb-width: 1.25rem;
   --dri-thumb-height: 1rem;
   --dri-thumb-border-radius: var(--ctrls-range-thumb-radius);
@@ -594,7 +631,6 @@ label:hover .ctrls__boolean-input:not(:checked) + .ctrls__boolean-checkmark {
   outline-offset: 2px;
 }
 
-/* ----- Radio -----  */
 .ctrls__control--radio .ctrls__control-right {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
@@ -609,13 +645,14 @@ label:hover .ctrls__boolean-input:not(:checked) + .ctrls__boolean-checkmark {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  transition: color 250ms, background-color 250ms;
+  transition: color 250ms, border-color 250ms, background-color 250ms;
   border-radius: var(--ctrls-radius);
   border: 1px solid var(--ctrls-input-border);
   background: var(--ctrls-btn-bg);
 }
 .ctrls__radio-label:focus-visible, .ctrls__radio-label:hover {
   background: var(--ctrls-btn-hover-bg);
+  border-color: var(--ctrls-hover-border);
   color: var(--ctrls-theme);
 }
 
@@ -637,7 +674,6 @@ label:hover .ctrls__boolean-input:not(:checked) + .ctrls__boolean-checkmark {
   outline-offset: 2px;
 }
 
-/* ----- Seed -----  */
 .ctrls__control--seed .ctrls__control-right {
   display: flex;
   gap: 0.25rem;
@@ -665,7 +701,79 @@ label:hover .ctrls__boolean-input:not(:checked) + .ctrls__boolean-checkmark {
   transform: rotate(0.5turn);
 }
 
-/* ----- Easing -----  */
+.ctrls__file-top {
+  display: flex;
+  gap: 0.25rem;
+}
+
+.ctrls__file-input {
+  opacity: 0;
+  position: absolute;
+  left: -200vw;
+}
+
+.ctrls__file-fake-input {
+  border-radius: var(--ctrls-radius);
+  flex-grow: 1;
+  font-weight: 700;
+  color: var(--ctrls-text-muted);
+  display: grid;
+  place-items: center;
+  line-height: 1;
+}
+.ctrls__file-fake-input span {
+  display: block;
+  font-weight: normal;
+}
+
+.ctrls__file-input:focus-visible + .ctrls__file-fake-input {
+  outline: 2px solid var(--ctrls-theme);
+  outline-offset: 2px;
+}
+
+.ctrls__file-clear {
+  padding: 0 0.375rem;
+  flex-shrink: 0;
+}
+.ctrls__file-clear path {
+  transition: transform 250ms;
+}
+.ctrls__file-clear:hover path:nth-child(2),
+.ctrls__file-clear:hover path:nth-child(3), .ctrls__file-clear:focus-visible path:nth-child(2),
+.ctrls__file-clear:focus-visible path:nth-child(3) {
+  transform-origin: center;
+  transform: translateY(-0.25rem);
+}
+
+.ctrls__file-preview-item {
+  padding: 0.25rem 0.5rem;
+  background: var(--ctrls-btn-bg);
+  border: 1px solid var(--ctrls-input-border);
+  border-radius: var(--ctrls-radius);
+  color: var(--ctrls-text-muted);
+  font-weight: 700;
+  margin-top: 0.25rem;
+  display: grid;
+  place-items: center;
+  text-align: center;
+}
+
+.ctrls__file-image {
+  max-height: 8rem;
+  max-width: 8rem;
+  border-radius: max(2px, var(--ctrls-radius) - 4px);
+  margin-block: 0.25rem;
+  outline-offset: -1px;
+}
+
+.ctrls__file-label {
+  display: block;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  width: 100%;
+}
+
 .ctrls__easing-wrapper {
   padding: 0.5rem;
   border: 1px solid var(--ctrls-input-border);
@@ -727,10 +835,11 @@ label:hover .ctrls__boolean-input:not(:checked) + .ctrls__boolean-checkmark {
   border-radius: var(--ctrls-radius);
   background: var(--ctrls-btn-bg);
   padding: 0.25rem;
-  transition: color 250ms, background-color 250ms;
+  transition: color 250ms, border-color 250ms, background-color 250ms;
 }
 .ctrls__easing-buttons button:focus-visible, .ctrls__easing-buttons button:hover {
   background: var(--ctrls-btn-hover-bg);
+  border-color: var(--ctrls-hover-border);
   color: var(--ctrls-theme);
 }
 

package/dist/ctrls.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../node_modules/@stanko/dual-range-input/dist/index.css","../src/scss/_ctrls.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;;AC3IF;EACE;AAAA;AAAA;EAGA;EACA;EACA;EACA;EACA;EAGA;EACA;EAEA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EAGA;EAGA;EACA;EACA;EAGA;EACA;EAGA;EAGA;EAEA;EACA;EAEA;EACA;EAGA;EAGA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EAGA;EACA;EAEA;EAEA;EACA;EAEA;EAGA;EAEA;EACA;;;AA+CF;EACE;IA3CA;IAEA;IACA;IAGA;IACA;IACA;IACA;IACA;IACA;IAGA;IAGA;IACA;IACA;IAGA;IACA;IAGA;IAGA;IAEA;IAGA;IAGA;AAAA;AAAA;;;AAWF;EAhDE;EAEA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EAGA;EAGA;EACA;EACA;EAGA;EACA;EAGA;EAGA;EAEA;EAGA;EAGA;AAAA;AAAA;;;AAiBF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EAGE;EACA;EACA;;AAGF;AAAA;EAEE;EACA;EACA;;AAGF;EACE;EACA;;;AAIJ;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;;AAGF;AAAA;AAAA;EAEE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;;AAGF;EAEE;;AAGF;EACE;EACA;EACA,YACE;;AAIJ;EACE;;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;;;AAOA;EACE;;AAGF;AAAA;AAAA;EAEE;;;AAKN;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAEA;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;AAEA;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAKJ;EACE;EACA;EACA;;;AAIF;EACE;;;AAIF;EACE;;;AAIF;EACE;EACA;;;AAGF;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAmCJ;EA5BE;EACA;EACA;EACA;EACA;EAEA;;;AA0BF;EAhCE;EACA;EACA;EACA;EACA;EAEA;;;AA8BF;EAtBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAkBA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAKF;EAvDE;EACA;EACA;EACA;EACA;EAEA;;;AAqDF;EA7CE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAwCA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAEA;EAIE;;AAEA;EACE;;AAPJ;EAUE;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;;AAIJ;AAEA;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAEF;EACA;EACA;;AAEA;EAEE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAEA;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;;AAIE;EACE;;;AAKN;AAEA;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;AAEA;AAAA;EAEE;EACA;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;;AAGF;EAEE;EACA;;;AAIJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EAEE;;AAEA;EACE;EACA","file":"ctrls.css"}
+{"version":3,"sourceRoot":"","sources":["../node_modules/@stanko/dual-range-input/dist/index.css","../src/scss/_ctrls.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;;AC3IF;EACE;AAAA;AAAA;EAGA;EACA;EACA;EACA;EACA;EAGA;EACA;EAEA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EAGA;EAGA;EACA;EACA;EACA;EAGA;EACA;EACA;EAGA;EAGA;EAEA;EACA;EAEA;EACA;EAGA;EAGA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EAGA;EACA;EAEA;EAEA;EACA;EAEA;EAGA;EAEA;EACA;;;AAgDF;EACE;IA5CA;IAEA;IACA;IAGA;IACA;IACA;IACA;IACA;IACA;IAGA;IAGA;IACA;IACA;IACA;IAGA;IACA;IACA;IAGA;IAGA;IACA;IAEA;IAGA;IAGA;;;AASF;EAjDE;EAEA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EAGA;EAGA;EACA;EACA;EACA;EAGA;EACA;EACA;EAGA;EAGA;EACA;EAEA;EAGA;EAGA;;;AAeF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EAGE;EACA;EACA;;AAGF;AAAA;EAEE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;;AAIJ;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;;AAGF;AAAA;AAAA;EAEE;EACA;;AAGF;AAAA;EACE;EACA;;;AAIJ;EACE;;;AAKA;AAAA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAKF;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAKF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAEA;EACE;;;AAKN;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;;AAIF;EAEE;;AAGF;EACE;EACA;EACA,YACE;;AAIJ;EACE;;;AAKJ;EACE;EACA;EACA;;AAEA;EAEE;EACA;EACA;;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;;;AAIJ;EACE;;AAIE;EACE;;AAGF;AAAA;AAAA;EAEE;;;AAON;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAKJ;EACE;EACA;EACA;;;AAIF;EACE;;;AAIF;EACE;EACA;;;AAIF;EACE;EACA;;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAmCJ;EA5BE;EACA;EACA;EACA;EACA;EAEA;;;AA0BF;EAhCE;EACA;EACA;EACA;EACA;EAEA;;;AA8BF;EAtBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAkBA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAKF;EAvDE;EACA;EACA;EACA;EACA;EAEA;;;AAqDF;EA7CE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAwCA;EACA;;;AAGF;EACE;EACA;;;AAKF;EAIE;;AAEA;EACE;;AAPJ;EAUE;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;;AAMJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAGF;EACA;EACA;;AAEA;EAEE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAKF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;;AAIE;EACE;;;AAON;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;;AAEA;EACE;;AAKA;AAAA;AAAA;EAEE;EACA;;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAKF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;AAEA;AAAA;EAEE;EACA;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;;AAIF;EAEE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EAEE;;AAEA;EACE;EACA","file":"ctrls.css"}

package/dist/utils/icons.d.ts

@@ -1,3 +1,5 @@
 export declare const checkIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"/></svg>";
 export declare const refreshIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8\"/><path d=\"M21 3v5h-5\"/><path d=\"M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16\"/><path d=\"M8 16H3v5\"/></svg>";
 export declare const diceIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" ry=\"2\" stroke-width=\"2\"/><path d=\"M16 8h.01\"/><path d=\"M8 8h.01\"/><path d=\"M8 16h.01\"/><path d=\"M16 16h.01\"/><path d=\"M12 12h.01\"/></svg>";
+export declare const closeIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6\"/><path d=\"M3 6h18\"/><path d=\"M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\"/></svg>";
+export declare const chevronUpIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m18 15-6-6-6 6\"/></svg>";

package/dist/utils/icons.js

@@ -2,3 +2,5 @@
 export const checkIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>`;
 export const refreshIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/></svg>`;
 export const diceIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2" stroke-width="2"/><path d="M16 8h.01"/><path d="M8 8h.01"/><path d="M8 16h.01"/><path d="M16 16h.01"/><path d="M12 12h.01"/></svg>`;
+export const closeIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>`;
+export const chevronUpIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>`;

package/dist/utils/random.d.ts

@@ -1,2 +1,2 @@
-import type { PRNG } from "../ctrls";
+import type { PRNG } from "../ctrls/types";
 export default function random(min?: number, max?: number, rng?: PRNG | null, decimalPlaces?: number): number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stanko/ctrls",
-  "version": "0.3.4",
+  "version": "0.4.0",
   "type": "module",
   "scripts": {
     "test": "vitest",
@@ -20,13 +20,13 @@
   ],
   "devDependencies": {
     "highlight.js": "^11.11.1",
-    "marked": "^17.0.0",
+    "marked": "^17.0.1",
     "marked-highlight": "^2.2.3",
-    "sass": "^1.94.0",
+    "sass": "^1.94.2",
     "simplex-noise": "^4.0.3",
     "typescript": "~5.9.3",
-    "vite": "^7.2.2",
-    "vitest": "^4.0.10"
+    "vite": "^7.2.4",
+    "vitest": "^4.0.13"
   },
   "dependencies": {
     "@stanko/dual-range-input": "^1.0.1",