@rvx/ui 0.1.7 → 0.1.8

package/dist/theme.module.css

@@ -2,6 +2,8 @@
   font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
   font-size: 0.875rem;
   line-height: 1;
+  --accent: rgb(0, 192, 255);
+  accent-color: var(--accent);
   --content-column-gap: 1.1428571429rem;
   --content-row-gap: 1.1428571429rem;
   --content-radius: 0.5714285714rem;
@@ -12,8 +14,9 @@
   --content-pad-inline-end: 1.4285714286rem;
   --control-column-gap: 0.5714285714rem;
   --control-row-gap: 0.5714285714rem;
-  --control-radius: 0.2857142857rem;
-  --control-border: 0.0714285714rem;
+  --control-radius: 0.3571428571rem;
+  --control-border: 0.1428571429rem;
+  --control-shadow: 0 0 0.2142857143rem rgba(0, 0, 0, .5);
   --control-disabled: opacity(.5);
   --control-pad-block-start: 0.5714285714rem;
   --control-pad-inline-start: 0.7142857143rem;
@@ -24,13 +27,14 @@
   --line-gap: 0.4285714286rem;
   --space-gap: 0.4285714286rem;
   --layout-transition: .15s ease;
+  --color-transition: .1s ease;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --bg: rgb(32, 32, 32);
+    --bg: rgb(36, 36, 36);
     --fg: white;
-    --focus-outline: var(--control-border) dashed rgb(0, 127, 255);
+    --focus-outline: var(--control-border) dashed var(--accent);
     color-scheme: dark;
   }
 }
@@ -53,35 +57,39 @@ body {
 }
 
 ::selection {
-  background-color: rgba(0, 100, 200, 0.7);
+  background-color: rgba(0, 150, 200, 0.6);
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --button-default-bg: rgb(54, 54, 54);
-    --button-default-bg-lit: rgb(72, 72, 72);
+    --button-default-bg: rgb(64, 64, 64);
+    --button-default-bg-hover: rgb(90, 90, 90);
     --button-default-fg: var(--fg);
-    --button-default-border: rgb(80, 80, 80);
-    --button-primary-bg: rgb(0, 100, 200);
-    --button-primary-bg-lit: rgb(0, 128, 255);
-    --button-primary-fg: white;
-    --button-primary-border: rgb(0, 100, 200);
+    --button-primary-bg: rgb(0, 192, 255);
+    --button-primary-bg-hover: rgb(92, 214, 255);
+    --button-primary-fg: black;
+    --button-primary-focus: rgb(200, 241, 255);
     --button-success-bg: rgb(0, 200, 100);
-    --button-success-bg-lit: rgb(0, 242, 121);
+    --button-success-bg-hover: rgb(0, 242, 121);
     --button-success-fg: black;
-    --button-success-border: rgb(0, 200, 100);
-    --button-warning-bg: rgb(255, 200, 0);
-    --button-warning-bg-lit: rgb(255, 224, 122);
+    --button-success-focus: rgb(200, 255, 228);
+    --button-warning-bg: rgb(230, 180, 0);
+    --button-warning-bg-hover: rgb(255, 220, 105);
     --button-warning-fg: black;
-    --button-warning-border: rgb(255, 200, 0);
+    --button-warning-focus: rgb(255, 243, 200);
     --button-danger-bg: rgb(255, 0, 64);
-    --button-danger-bg-lit: rgb(255, 64, 96);
+    --button-danger-bg-hover: rgb(255, 70, 100);
     --button-danger-fg: black;
-    --button-danger-border: rgb(255, 0, 64);
+    --button-danger-focus: rgb(255, 200, 214);
     --button-input-bg: rgb(16, 16, 16);
-    --button-input-bg-lit: rgb(36, 36, 36);
+    --button-input-bg-hover: rgb(60, 60, 60);
+    --button-input-bg-active: rgb(80, 80, 80);
     --button-input-fg: white;
     --button-input-border: rgb(80, 80, 80);
+    --button-text-bg: transparent;
+    --button-text-bg-hover: rgb(80, 80, 80);
+    --button-text-bg-active: rgb(100, 100, 100);
+    --button-text-fg: var(--fg);
     color-scheme: dark;
   }
 }
@@ -95,6 +103,10 @@ body {
   padding-block: calc(var(--control-pad-block-start) - var(--control-border)) calc(var(--control-pad-block-end) - var(--control-border));
   padding-inline: calc(var(--control-pad-inline-start) - var(--control-border)) calc(var(--control-pad-inline-end) - var(--control-border));
   border-radius: var(--control-radius);
+  transition: var(--color-transition) background-color, var(--color-transition) border-color;
+}
+.button:not(.button_text) {
+  box-shadow: var(--control-shadow);
 }
 .button[disabled] {
   cursor: default;
@@ -104,55 +116,106 @@ body {
 .button_default {
   background-color: var(--button-default-bg);
   color: var(--button-default-fg);
-  border: var(--control-border) solid var(--button-default-border, transparent);
+  border: var(--button-default-border, transparent) solid var(--control-border);
+}
+.button_default:hover:not(:active):not([disabled]) {
+  background-color: var(--button-default-bg-hover);
+}
+.button_default:focus-visible {
+  border-color: var(--button-default-focus, var(--accent));
 }
-.button_default:hover:not(:active):not([disabled]), .button_default:focus-visible:not([disabled]) {
-  background-color: var(--button-default-bg-lit);
+.button_default:active {
+  background-color: var(--button-default-bg-active, var(--button-default-bg));
 }
 
 .button_primary {
   background-color: var(--button-primary-bg);
   color: var(--button-primary-fg);
-  border: var(--control-border) solid var(--button-primary-border, transparent);
+  border: var(--button-primary-border, transparent) solid var(--control-border);
+}
+.button_primary:hover:not(:active):not([disabled]) {
+  background-color: var(--button-primary-bg-hover);
+}
+.button_primary:focus-visible {
+  border-color: var(--button-primary-focus, var(--accent));
 }
-.button_primary:hover:not(:active):not([disabled]), .button_primary:focus-visible:not([disabled]) {
-  background-color: var(--button-primary-bg-lit);
+.button_primary:active {
+  background-color: var(--button-primary-bg-active, var(--button-primary-bg));
 }
 
 .button_success {
   background-color: var(--button-success-bg);
   color: var(--button-success-fg);
-  border: var(--control-border) solid var(--button-success-border, transparent);
+  border: var(--button-success-border, transparent) solid var(--control-border);
 }
-.button_success:hover:not(:active):not([disabled]), .button_success:focus-visible:not([disabled]) {
-  background-color: var(--button-success-bg-lit);
+.button_success:hover:not(:active):not([disabled]) {
+  background-color: var(--button-success-bg-hover);
+}
+.button_success:focus-visible {
+  border-color: var(--button-success-focus, var(--accent));
+}
+.button_success:active {
+  background-color: var(--button-success-bg-active, var(--button-success-bg));
 }
 
 .button_warning {
   background-color: var(--button-warning-bg);
   color: var(--button-warning-fg);
-  border: var(--control-border) solid var(--button-warning-border, transparent);
+  border: var(--button-warning-border, transparent) solid var(--control-border);
+}
+.button_warning:hover:not(:active):not([disabled]) {
+  background-color: var(--button-warning-bg-hover);
 }
-.button_warning:hover:not(:active):not([disabled]), .button_warning:focus-visible:not([disabled]) {
-  background-color: var(--button-warning-bg-lit);
+.button_warning:focus-visible {
+  border-color: var(--button-warning-focus, var(--accent));
+}
+.button_warning:active {
+  background-color: var(--button-warning-bg-active, var(--button-warning-bg));
 }
 
 .button_danger {
   background-color: var(--button-danger-bg);
   color: var(--button-danger-fg);
-  border: var(--control-border) solid var(--button-danger-border, transparent);
+  border: var(--button-danger-border, transparent) solid var(--control-border);
+}
+.button_danger:hover:not(:active):not([disabled]) {
+  background-color: var(--button-danger-bg-hover);
 }
-.button_danger:hover:not(:active):not([disabled]), .button_danger:focus-visible:not([disabled]) {
-  background-color: var(--button-danger-bg-lit);
+.button_danger:focus-visible {
+  border-color: var(--button-danger-focus, var(--accent));
+}
+.button_danger:active {
+  background-color: var(--button-danger-bg-active, var(--button-danger-bg));
 }
 
 .button_input {
   background-color: var(--button-input-bg);
   color: var(--button-input-fg);
-  border: var(--control-border) solid var(--button-input-border, transparent);
+  border: var(--button-input-border, transparent) solid var(--control-border);
+}
+.button_input:hover:not(:active):not([disabled]) {
+  background-color: var(--button-input-bg-hover);
+}
+.button_input:focus-visible {
+  border-color: var(--button-input-focus, var(--accent));
+}
+.button_input:active {
+  background-color: var(--button-input-bg-active, var(--button-input-bg));
+}
+
+.button_text {
+  background-color: var(--button-text-bg);
+  color: var(--button-text-fg);
+  border: var(--button-text-border, transparent) solid var(--control-border);
+}
+.button_text:hover:not(:active):not([disabled]) {
+  background-color: var(--button-text-bg-hover);
+}
+.button_text:focus-visible {
+  border-color: var(--button-text-focus, var(--accent));
 }
-.button_input:hover:not(:active):not([disabled]), .button_input:focus-visible:not([disabled]) {
-  background-color: var(--button-input-bg-lit);
+.button_text:active {
+  background-color: var(--button-text-bg-active, var(--button-text-bg));
 }
 
 .button_input {
@@ -269,7 +332,10 @@ body {
 .control_group {
   display: flex;
   flex-direction: row;
-  flex-wrap: wrap;
+  box-shadow: var(--control-shadow);
+}
+.control_group * {
+  --control-shadow: none;
 }
 .control_group > :not(:first-child) {
   border-start-start-radius: 0;
@@ -421,7 +487,7 @@ h6.heading {
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --link-fg: rgb(64, 160, 255);
+    --link-fg: rgb(64, 208, 255);
     color-scheme: dark;
   }
 }
@@ -619,7 +685,7 @@ h6.heading {
     --text-input-bg: rgb(16, 16, 16);
     --text-input-fg: white;
     --text-input-border: rgb(80, 80, 80);
-    --text-input-border-lit: rgb(0, 128, 255);
+    --text-input-border-lit: var(--accent);
     color-scheme: dark;
   }
 }
@@ -633,6 +699,7 @@ h6.heading {
   padding-inline: var(--control-pad-inline-start) var(--control-pad-inline-end);
   border: var(--control-border) solid var(--text-input-border);
   border-radius: var(--control-radius);
+  box-shadow: var(--control-shadow);
   background-color: var(--text-input-bg);
   color: var(--text-input-fg);
 }

package/dist/theme.module.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../src/theme/base.scss","../src/theme/common.scss","../src/theme/components/button.scss","../src/theme/components/checkbox.scss","../src/theme/components/collapse.scss","../src/theme/components/column.scss","../src/theme/components/control-group.scss","../src/theme/components/dialog.scss","../src/theme/components/dropdown.scss","../src/theme/components/flex-space.scss","../src/theme/components/heading.scss","../src/theme/components/label.scss","../src/theme/components/link.scss","../src/theme/components/page.scss","../src/theme/components/popover.scss","../src/theme/components/radio-buttons.scss","../src/theme/components/row.scss","../src/theme/components/scroll-view.scss","../src/theme/components/text-input.scss","../src/theme/components/text.scss","../src/theme/components/validation.scss","../src/theme/components/value.scss"],"names":[],"mappings":"AASA;EACC;EACA;EACA;EAEA;EACA;EACA;EACA;ECWA;EACA;EACA;EACA;EDXA;EACA;EACA;EACA;EACA;ECIA;EACA;EACA;EACA;EDJA;EAEA;EAEA;EACA;EAEA;;;ACrBC;EAFD;IANE;IAAA;IAAA;IAUA;;;ADkCH;EACC;EACA;EAEA;;AACA;EALD;IAME;;;;AAIF;EACC;EACA;EACA;EACA;;;AAGD;EACC;;;ACtDC;EAFD;IANE;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAUA;;;ACmEH;EACC;EACA;EACA;EACA;EAEA;EAEA;EDtDC,eACC;EAED,gBACC;ECqDF;;AAEA;EACC;EACA;;;AAKD;EACC;EACA;EACA;;AACA;EAEC;;;AANF;EACC;EACA;EACA;;AACA;EAEC;;;AANF;EACC;EACA;EACA;;AACA;EAEC;;;AANF;EACC;EACA;EACA;;AACA;EAEC;;;AANF;EACC;EACA;EACA;;AACA;EAEC;;;AANF;EACC;EACA;EACA;;AACA;EAEC;;;AAKH;EACC;;;ACjHD;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;EACA;;;AAIF;EACC;EACA;EACA;;;ACtBD;EACC;EACA;EACA;;;AAGD;EACC,YACC;;;AAIF;EACC;IAAO;;EACP;IAAM;;EACN;IAAM;;EACN;IAAK;;;AAGN;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;;AAEA;EACC,YACC;;AAIF;EACC;EACA;;;AAIF;EACC;EACA;EACA;EACA;;AAEA;EACC,YACC;;AAKF;EACC;EACA;EACA;;;AC5DF;EACC;EACA;;AAEA;EACC;;AAMD;EACC;;;AAQD;EACC;;AACA;EACC;;;AAHF;EACC;;AACA;EACC;;;ACvBH;EACC;EACA;EACA;;AACA;EACC;EACA;;AAED;EACC;EACA;;;ALEA;EAFD;IANE;IAAA;IAAA;IAAA;IAUA;;;AMEH;EACC;EACA;EAEA;EAEA;EACA;EACA;EAEA;;;AAGD;EACC;EACA;EAEA;EACA;EACA;EACA;ENDC,eACC;EAED,gBACC;;;AMCH;EACC;;;AN7BC;EAFD;IANE;IAAA;IAAA;IAAA;IAUA;;;AOEH;EACC;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;EPPC,eACC;EAED,gBACC;;AOMF;EACC;;;AC9CF;EACC;EACA;EACA;;;ACHD;EACC;EACA;;AAEA;EAEC;EACA;EACA;EACA;;;AAIF;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;AAAA;AAAA;EAGC;EACA;EACA;;;ATxBC;EAFD;IANE;IAUA;;;AUPH;EACC;EACA;EAEA;EACA;EACA;;AAEA;EAEC;EACA;EACA;EACA;;;AVRA;EAFD;IANE;IAUA;;;AWPH;EACC;EACA;EAEA;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;;ACrBF;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;;;AZPC;EAFD;IANE;IAAA;IAAA;IAUA;;;AaDH;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EAEA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EbnBC,eACC;EAED,gBACC;;;AcvCH;EACC;EACA;EACA;;AAEA;EACC;EACA;;;AAIF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;;AAIF;EACC;EACA;EACA;;;AC5BD;EACC;EACA;EACA;;;AAIA;EACC;EACA;;AACA;EACC;EACA;;;AALF;EACC;EACA;;AACA;EACC;EACA;;;AfAD;EAFD;IANE;IAAA;IAUA;;;AgBJH;EACC;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;AAAA;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AhBpCC;EAFD;IANE;IAAA;IAAA;IAAA;IAUA;;;AiBEH;EACC;EACA;EACA;EAEA;EAEA;EjBmBC,eACC;EAED,gBACC;EiBrBF;EACA;EAEA;EACA;;AAEA;EACC;;AAGD;EACC;EACA;;;AAIF;EACC;;;AC1CD;EACC;;AAEA;EAEC;EACA;EACA;EACA;;;AlBIA;EAFD;IANE;IAUA;;;AmBPH;EACC;;;AAGD;EACC;;;ACZD;EACC","file":"theme.module.css"}
+{"version":3,"sourceRoot":"","sources":["../src/theme/base.scss","../src/theme/common.scss","../src/theme/components/button.scss","../src/theme/components/checkbox.scss","../src/theme/components/collapse.scss","../src/theme/components/column.scss","../src/theme/components/control-group.scss","../src/theme/components/dialog.scss","../src/theme/components/dropdown.scss","../src/theme/components/flex-space.scss","../src/theme/components/heading.scss","../src/theme/components/label.scss","../src/theme/components/link.scss","../src/theme/components/page.scss","../src/theme/components/popover.scss","../src/theme/components/radio-buttons.scss","../src/theme/components/row.scss","../src/theme/components/scroll-view.scss","../src/theme/components/text-input.scss","../src/theme/components/text.scss","../src/theme/components/validation.scss","../src/theme/components/value.scss"],"names":[],"mappings":"AASA;EACC;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;ECQA;EACA;EACA;EACA;EDRA;EACA;EACA;EACA;EACA;EACA;ECAA;EACA;EACA;EACA;EDAA;EAEA;EAEA;EACA;EAEA;EACA;;;AC1BC;EAFD;IANE;IAAA;IAAA;IAUA;;;ADuCH;EACC;EACA;EAEA;;AACA;EALD;IAME;;;;AAIF;EACC;EACA;EACA;EACA;;;AAGD;EACC;;;AC3DC;EAFD;IANE;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAUA;;;ACgFH;EACC;EACA;EACA;EACA;EAEA;EAEA;EDnEC,eACC;EAED,gBACC;ECkEF;EACA;;AAGA;EACC;;AAGD;EACC;EACA;;;AAKD;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;;AAdF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;;AAdF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;;AAdF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;;AAdF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;;AAdF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;;AAdF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;;AAKH;EACC;;;AC5ID;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;EACA;;;AAIF;EACC;EACA;EACA;;;ACtBD;EACC;EACA;EACA;;;AAGD;EACC,YACC;;;AAIF;EACC;IAAO;;EACP;IAAM;;EACN;IAAM;;EACN;IAAK;;;AAGN;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;;AAEA;EACC,YACC;;AAIF;EACC;EACA;;;AAIF;EACC;EACA;EACA;EACA;;AAEA;EACC,YACC;;AAKF;EACC;EACA;EACA;;;AC5DF;EACC;EACA;;AAEA;EACC;;AAMD;EACC;;;AAQD;EACC;;AACA;EACC;;;AAHF;EACC;;AACA;EACC;;;ACvBH;EACC;EACA;EAEA;;AACA;EACC;;AAGD;EACC;EACA;;AAED;EACC;EACA;;;ALHA;EAFD;IANE;IAAA;IAAA;IAAA;IAUA;;;AMEH;EACC;EACA;EAEA;EAEA;EACA;EACA;EAEA;;;AAGD;EACC;EACA;EAEA;EACA;EACA;EACA;ENDC,eACC;EAED,gBACC;;;AMCH;EACC;;;AN7BC;EAFD;IANE;IAAA;IAAA;IAAA;IAUA;;;AOEH;EACC;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;EPPC,eACC;EAED,gBACC;;AOMF;EACC;;;AC9CF;EACC;EACA;EACA;;;ACHD;EACC;EACA;;AAEA;EAEC;EACA;EACA;EACA;;;AAIF;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;AAAA;AAAA;EAGC;EACA;EACA;;;ATxBC;EAFD;IANE;IAUA;;;AUPH;EACC;EACA;EAEA;EACA;EACA;;AAEA;EAEC;EACA;EACA;EACA;;;AVRA;EAFD;IANE;IAUA;;;AWPH;EACC;EACA;EAEA;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;;ACrBF;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;;;AZPC;EAFD;IANE;IAAA;IAAA;IAUA;;;AaDH;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EAEA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EbnBC,eACC;EAED,gBACC;;;AcvCH;EACC;EACA;EACA;;AAEA;EACC;EACA;;;AAIF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;;AAIF;EACC;EACA;EACA;;;AC5BD;EACC;EACA;EACA;;;AAIA;EACC;EACA;;AACA;EACC;EACA;;;AALF;EACC;EACA;;AACA;EACC;EACA;;;AfAD;EAFD;IANE;IAAA;IAUA;;;AgBJH;EACC;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;AAAA;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AhBpCC;EAFD;IANE;IAAA;IAAA;IAAA;IAUA;;;AiBEH;EACC;EACA;EACA;EAEA;EAEA;EjBmBC,eACC;EAED,gBACC;EiBrBF;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;EACA;;;AAIF;EACC;;;AC1CD;EACC;;AAEA;EAEC;EACA;EACA;EACA;;;AlBIA;EAFD;IANE;IAUA;;;AmBPH;EACC;;;AAGD;EACC;;;ACZD;EACC","file":"theme.module.css"}

package/package.json

@@ -12,7 +12,7 @@
 		"rvx"
 	],
 	"license": "MIT",
-	"version": "0.1.7",
+	"version": "0.1.8",
 	"type": "module",
 	"main": "./dist/index.js",
 	"sideEffects": false,
@@ -28,6 +28,6 @@
 		"./dist/": "./dist/"
 	},
 	"dependencies": {
-		"rvx": "^16.0.2"
+		"rvx": "^18.0.1"
 	}
 }

package/src/common/theme-test.tsx

@@ -1,5 +1,3 @@
-import { extract } from "rvx";
-
 import { THEME, Theme } from "./theme.js";
 
 /**
@@ -8,7 +6,7 @@ import { THEME, Theme } from "./theme.js";
  * @throws An error if the current theme doesn't support the specified key.
  */
 export function themeClass(key: keyof Theme): string {
-	const theme = extract(THEME);
+	const theme = THEME.current;
 	if (!theme) {
 		throw new Error("theme is not available in the current context");
 	}

package/src/common/theme.tsx

@@ -1,6 +1,6 @@
-import { ContextKey } from "rvx";
+import { Context } from "rvx";
 
-export const THEME = Symbol.for("rvx-ui:theme") as ContextKey<Theme>;
+export const THEME = new Context<Theme>();
 
 /**
  * A collection of class names that is used as the theme.
@@ -37,6 +37,8 @@ export interface Theme {
 	button_warning?: string;
 	/** Additional class for buttons with the "input" variant */
 	button_input?: string;
+	/** Additional class for buttons with the "text" variant */
+	button_text?: string;
 
 	/** Class for all checkbox containing labels */
 	checkbox_label?: string;

package/src/components/button.tsx

@@ -1,12 +1,11 @@
-import { ClassValue, Expression, extract, get, optionalString, StyleValue } from "rvx";
+import { ClassValue, Expression, get, optionalString, StyleValue } from "rvx";
 import { isPending } from "rvx/async";
-
 import { Action, handleActionEvent, keyFor } from "../common/events.js";
 import { THEME } from "../common/theme.js";
 import { Validator } from "./validation.js";
 
 export type ButtonType = "button" | "submit" | "reset" | "menu";
-export type ButtonVariant = "default" | "primary" | "success" | "danger" | "warning" | "input";
+export type ButtonVariant = "default" | "primary" | "success" | "danger" | "warning" | "input" | "text";
 
 export function Button(props: {
 	/**
@@ -50,7 +49,7 @@ export function Button(props: {
 
 	children?: unknown;
 }): unknown {
-	const theme = extract(THEME);
+	const theme = THEME.current;
 	const disabled = () => isPending() || get(props.disabled);
 
 	function action(event: Event) {

package/src/components/checkbox-test.tsx

@@ -0,0 +1,34 @@
+import { themeClass } from "../common/theme-test.js";
+
+function assertCheckbox(checkbox: Element): asserts checkbox is HTMLElement {
+	if (!checkbox.matches(`.${themeClass("checkbox_label")}`)) {
+		throw new Error("checkbox must be a checkbox root element.");
+	}
+}
+
+function getInput(checkbox: HTMLElement): HTMLInputElement {
+	return checkbox.querySelector("input")!;
+}
+
+export function isCheckboxChecked(checkbox: Element): boolean | undefined {
+	assertCheckbox(checkbox);
+	const input = getInput(checkbox);
+	return input.indeterminate ? undefined : input.checked;
+}
+
+export function toggleCheckbox(checkbox: Element, checked?: boolean): void {
+	assertCheckbox(checkbox);
+	const input = getInput(checkbox);
+	if (input.disabled) {
+		return;
+	}
+	checked ??= !input.checked;
+	input.indeterminate = false;
+	input.checked = checked;
+	input.dispatchEvent(new CustomEvent("input"));
+}
+
+export function getCheckboxContent(checkbox: Element): HTMLElement {
+	assertCheckbox(checkbox);
+	return checkbox.querySelector(`.${themeClass("checkbox_content")}`) as HTMLElement;
+}

package/src/components/checkbox.tsx

@@ -1,5 +1,6 @@
-import { ClassValue, Expression, extract, get, optionalString, Signal, string, StyleValue, uniqueId, watch } from "rvx";
+import { ClassValue, Expression, get, optionalString, Signal, string, StyleValue, watch } from "rvx";
 import { isPending } from "rvx/async";
+import { uniqueId } from "rvx/id";
 
 import { THEME } from "../common/theme.js";
 import { Text } from "./text.js";
@@ -16,7 +17,7 @@ export function Checkbox(props: {
 	children?: unknown;
 }): unknown {
 	const id = uniqueId();
-	const theme = extract(THEME);
+	const theme = THEME.current;
 
 	const disabled = props.checked instanceof Signal
 		? () => isPending() || get(props.disabled)
@@ -41,11 +42,8 @@ export function Checkbox(props: {
 	/> as HTMLInputElement;
 
 	watch(props.checked, checked => {
-		if (checked === undefined) {
-			input.indeterminate = true;
-		} else {
-			input.checked = checked;
-		}
+		input.indeterminate = checked === undefined;
+		input.checked = checked === true;
 	});
 
 	return <label

package/src/components/collapse.tsx

@@ -1,5 +1,5 @@
-import { ClassValue, Event, Expression, extract, get, map, optionalString, sig, StyleValue, teardown } from "rvx";
-
+import { ClassValue, Expression, get, map, optionalString, sig, StyleValue, teardown } from "rvx";
+import { Event } from "rvx/event";
 import { THEME } from "../common/theme.js";
 import { AriaLive, AriaRelevant } from "../common/types.js";
 
@@ -14,7 +14,7 @@ export function Collapse(props: {
 	"aria-relevant"?: Expression<AriaRelevant | undefined>;
 	"aria-atomic"?: Expression<boolean | undefined>;
 }): unknown {
-	const theme = extract(THEME);
+	const theme = THEME.current;
 	const visible = map(props.visible, v => v ?? false);
 	const alert = sig(false);
 	const size = sig<number | undefined>(undefined);

package/src/components/column.tsx

@@ -1,5 +1,4 @@
-import { ClassValue, Expression, extract, map, StyleValue } from "rvx";
-
+import { ClassValue, Expression, map, StyleValue } from "rvx";
 import { THEME } from "../common/theme.js";
 import { SizeContext } from "../common/types.js";
 
@@ -13,7 +12,7 @@ export function Column(props: {
 	id?: Expression<string | undefined>;
 	children?: unknown;
 }): unknown {
-	const theme = extract(THEME);
+	const theme = THEME.current;
 	return <div
 		class={[
 			theme?.column,

package/src/components/control-group.tsx

@@ -1,5 +1,4 @@
-import { ClassValue, Expression, extract, StyleValue } from "rvx";
-
+import { ClassValue, Expression, StyleValue } from "rvx";
 import { THEME } from "../common/theme.js";
 
 export function ControlGroup(props: {
@@ -8,7 +7,7 @@ export function ControlGroup(props: {
 	id?: Expression<string | undefined>;
 	children?: unknown;
 }): unknown {
-	const theme = extract(THEME);
+	const theme = THEME.current;
 	return <div
 		class={[
 			theme?.control_group,

package/src/components/dialog.tsx

@@ -1,6 +1,6 @@
-import { captureSelf, ClassValue, Expression, extract, map, mount, StyleValue, uniqueId } from "rvx";
+import { captureSelf, ClassValue, Expression, map, mount, StyleValue } from "rvx";
 import { TASKS, Tasks } from "rvx/async";
-
+import { uniqueId } from "rvx/id";
 import { FlexSpace, Heading, Row, Text, THEME } from "../index.js";
 import { LAYER, Layer } from "./layer.js";
 
@@ -23,24 +23,25 @@ export function showDialog<T = void>(init: DialogInit<T>, options?: DialogOption
 			mount(
 				document.body,
 				<Layer modal>
-					{ctx => {
-						ctx.set(TASKS, new Tasks());
-						const dialog: Dialog<T> = {
-							resolve(value) {
-								dispose();
-								resolve(value);
-							},
-							reject(reason) {
-								dispose();
-								reject(reason);
-							},
-						};
-						if (options?.cancellable ?? true) {
-							extract(LAYER)?.useHotkey("escape", () => {
-								dialog.reject(new DialogAbortError());
-							});
-						}
-						return init(dialog);
+					{() => {
+						return TASKS.inject(new Tasks(), () => {
+							const dialog: Dialog<T> = {
+								resolve(value) {
+									dispose();
+									resolve(value);
+								},
+								reject(reason) {
+									dispose();
+									reject(reason);
+								},
+							};
+							if (options?.cancellable ?? true) {
+								LAYER.current!.useHotkey("escape", () => {
+									dialog.reject(new DialogAbortError());
+								});
+							}
+							return init(dialog);
+						});
 					}}
 				</Layer>
 			);
@@ -66,7 +67,7 @@ export function DialogBody(props: {
 	"aria-labelledby"?: Expression<string | undefined>;
 	"aria-describedby"?: Expression<string | undefined>;
 }): unknown {
-	const theme = extract(THEME);
+	const theme = THEME.current;
 
 	let titleId: string | undefined;
 	let descriptionId: string | undefined;
@@ -116,7 +117,7 @@ export function DialogFooter(props: {
 	links?: unknown;
 	children?: unknown;
 }): unknown {
-	const theme = extract(THEME);
+	const theme = THEME.current;
 	return <Row
 		size="control"
 		class={[

package/src/components/dropdown-input.tsx

@@ -1,5 +1,4 @@
 import { ClassValue, Expression, get, map, Signal, StyleValue } from "rvx";
-
 import { Button, ButtonVariant } from "./button.js";
 import { Dropdown, DropdownItem } from "./dropdown.js";
 import { PopoutAlignment, PopoutPlacement } from "./popout.js";

package/src/components/dropdown.tsx

@@ -1,5 +1,5 @@
-import { ClassValue, Expression, extract, For, get, map, memo, optionalString, render, sig, StyleValue, uniqueId, View, watch } from "rvx";
-
+import { ClassValue, Expression, For, get, map, memo, optionalString, render, sig, StyleValue, View, watch } from "rvx";
+import { uniqueId } from "rvx/id";
 import { Action, createPassiveActionEvent, handleActionEvent, keyFor, startDelayedHoverOnMouseenter } from "../common/events.js";
 import { THEME } from "../common/theme.js";
 import { LAYER } from "./layer.js";
@@ -89,8 +89,8 @@ export function createDropdown(props: {
 		alignment: map(props.alignment, v => v ?? "start"),
 		foreignEvents: props.foreignEvents,
 		content: ({ popout, placement }) => {
-			const theme = extract(THEME);
-			const layer = extract(LAYER)!;
+			const theme = THEME.current;
+			const layer = LAYER.current!;
 
 			const activeItem = sig<DropdownItem | undefined>(undefined);
 			const instances = new WeakMap<DropdownItem, {

package/src/components/flex-space.tsx

@@ -1,11 +1,10 @@
-import { Expression, extract, get } from "rvx";
-
+import { Expression, get } from "rvx";
 import { THEME } from "../common/theme.js";
 
 export function FlexSpace(props: {
 	grow?: Expression<number | undefined>;
 }): unknown {
-	const theme = extract(THEME);
+	const theme = THEME.current;
 	return <div
 		class={theme?.flex_space}
 		style={{

package/src/components/heading.tsx

@@ -1,5 +1,4 @@
-import { ClassValue, createElement, Expression, extract, StyleValue } from "rvx";
-
+import { ClassValue, createElement, Expression, StyleValue } from "rvx";
 import { THEME } from "../common/theme.js";
 
 export type HeadingLevel = "1" | "2" | "3" | "4" | "5" | "6";
@@ -11,7 +10,7 @@ export function Heading(props: {
 	id?: Expression<string | undefined>;
 	children?: unknown;
 }): unknown {
-	const theme = extract(THEME);
+	const theme = THEME.current;
 	return createElement(`h${props.level}`, {
 		class: [
 			theme?.heading,
@@ -21,3 +20,11 @@ export function Heading(props: {
 		id: props.id,
 	}, props.children);
 }
+
+/**
+ * Get the next nested heading level.
+ */
+export function getNestedHeadingLevel(level: HeadingLevel): HeadingLevel {
+	const l = Number(level) + 1;
+	return l > 6 ? "6" : String(l) as HeadingLevel;
+}

package/src/components/label.tsx

@@ -1,6 +1,7 @@
-import { ClassValue, Expression, extract, StyleValue, uniqueId } from "rvx";
+import { ClassValue, Expression, StyleValue } from "rvx";
 
 import { THEME } from "../common/theme.js";
+import { uniqueId } from "rvx/id";
 
 export function Label(props: {
 	class?: ClassValue;
@@ -9,7 +10,7 @@ export function Label(props: {
 	id?: Expression<string | undefined>;
 	children?: unknown;
 }): unknown {
-	const theme = extract(THEME);
+	const theme = THEME.current;
 	return <label
 		class={[
 			theme?.label,