@rvx/ui 0.1.7 → 0.1.9

package/dist/index.d.ts

@@ -5,13 +5,14 @@ export * from "./common/trim.js";
 export * from "./common/types.js";
 export * from "./common/writing-mode.js";
 export * from "./components/button.js";
+export * from "./components/card.js";
 export * from "./components/checkbox.js";
 export * from "./components/collapse.js";
 export * from "./components/column.js";
 export * from "./components/control-group.js";
 export * from "./components/dialog.js";
-export * from "./components/dropdown.js";
 export * from "./components/dropdown-input.js";
+export * from "./components/dropdown.js";
 export * from "./components/flex-space.js";
 export * from "./components/heading.js";
 export * from "./components/label.js";
@@ -23,7 +24,7 @@ export * from "./components/popover.js";
 export * from "./components/radio-buttons.js";
 export * from "./components/row.js";
 export * from "./components/scroll-view.js";
-export * from "./components/text.js";
 export * from "./components/text-input.js";
+export * from "./components/text.js";
 export * from "./components/validation.js";
 export * from "./components/value.js";

package/dist/index.js

@@ -5,13 +5,14 @@ export * from "./common/trim.js";
 export * from "./common/types.js";
 export * from "./common/writing-mode.js";
 export * from "./components/button.js";
+export * from "./components/card.js";
 export * from "./components/checkbox.js";
 export * from "./components/collapse.js";
 export * from "./components/column.js";
 export * from "./components/control-group.js";
 export * from "./components/dialog.js";
-export * from "./components/dropdown.js";
 export * from "./components/dropdown-input.js";
+export * from "./components/dropdown.js";
 export * from "./components/flex-space.js";
 export * from "./components/heading.js";
 export * from "./components/label.js";
@@ -23,8 +24,8 @@ export * from "./components/popover.js";
 export * from "./components/radio-buttons.js";
 export * from "./components/row.js";
 export * from "./components/scroll-view.js";
-export * from "./components/text.js";
 export * from "./components/text-input.js";
+export * from "./components/text.js";
 export * from "./components/validation.js";
 export * from "./components/value.js";
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,sBAAsB,CAAC;AACrC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,wBAAwB,CAAC;AACvC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sBAAsB,CAAC;AACrC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uBAAuB,CAAC"}

package/dist/test.d.ts

@@ -1,2 +1,3 @@
 export * from "./common/theme-test.js";
+export * from "./components/checkbox-test.js";
 export * from "./components/collapse-test.js";

package/dist/test.js

@@ -1,3 +1,4 @@
 export * from "./common/theme-test.js";
+export * from "./components/checkbox-test.js";
 export * from "./components/collapse-test.js";
 //# sourceMappingURL=test.js.map

package/dist/test.js.map

@@ -1 +1 @@
-{"version":3,"file":"test.js","sourceRoot":"","sources":["../src/test.tsx"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,+BAA+B,CAAC"}
+{"version":3,"file":"test.js","sourceRoot":"","sources":["../src/test.tsx"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,+BAA+B,CAAC"}

package/dist/theme.module.css

@@ -2,18 +2,22 @@
   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;
   --content-border: 0.1428571429rem;
+  --content-shadow: 0 0 1.1428571429rem rgba(0, 0, 0, .2);
   --content-pad-block-start: 1.4285714286rem;
   --content-pad-inline-start: 1.4285714286rem;
   --content-pad-block-end: 1.4285714286rem;
   --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 +28,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 +58,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 +104,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,61 +117,149 @@ 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]), .button_primary:focus-visible:not([disabled]) {
-  background-color: var(--button-primary-bg-lit);
+.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: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]) {
+  background-color: var(--button-success-bg-hover);
 }
-.button_success:hover:not(:active):not([disabled]), .button_success:focus-visible:not([disabled]) {
-  background-color: var(--button-success-bg-lit);
+.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:focus-visible {
+  border-color: var(--button-warning-focus, var(--accent));
 }
-.button_warning:hover:not(:active):not([disabled]), .button_warning:focus-visible:not([disabled]) {
-  background-color: var(--button-warning-bg-lit);
+.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:focus-visible {
+  border-color: var(--button-danger-focus, var(--accent));
 }
-.button_danger:hover:not(:active):not([disabled]), .button_danger:focus-visible:not([disabled]) {
-  background-color: var(--button-danger-bg-lit);
+.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]), .button_input:focus-visible:not([disabled]) {
-  background-color: var(--button-input-bg-lit);
+.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_text:active {
+  background-color: var(--button-text-bg-active, var(--button-text-bg));
 }
 
 .button_input {
   text-align: left;
 }
 
+@media (prefers-color-scheme: dark) {
+  :root {
+    --card-default-border: rgb(72, 72, 72);
+    --card-info-border: rgb(0, 96, 128);
+    --card-success-border: rgb(0, 128, 64);
+    --card-warning-border: rgb(150, 117, 0);
+    --card-danger-border: rgb(160, 0, 40);
+    color-scheme: dark;
+  }
+}
+.card {
+  box-shadow: var(--content-shadow);
+  border-radius: var(--content-radius);
+  padding-block: calc(var(--content-pad-block-start) - var(--content-border)) calc(var(--content-pad-block-end) - var(--content-border));
+  padding-inline: calc(var(--content-pad-inline-start) - var(--content-border)) calc(var(--content-pad-inline-end) - var(--content-border));
+}
+
+.card_default {
+  border: var(--content-border) solid var(--card-default-border);
+}
+
+.card_info {
+  border: var(--content-border) solid var(--card-info-border);
+}
+
+.card_success {
+  border: var(--content-border) solid var(--card-success-border);
+}
+
+.card_warning {
+  border: var(--content-border) solid var(--card-warning-border);
+}
+
+.card_danger {
+  border: var(--content-border) solid var(--card-danger-border);
+}
+
 .checkbox_label {
   display: flex;
   column-gap: var(--control-column-gap);
@@ -248,9 +349,15 @@ body {
 .column > :not(:first-child) {
   margin-block-start: calc((var(--space-above, var(--parent-row-gap)) - var(--parent-row-gap)) * var(--space-scale) + var(--parent-row-gap) * (var(--space-scale) - 1) / 2);
 }
+.column > :first-child {
+  margin-block-start: calc(var(--parent-row-gap) * (var(--space-scale) - 1) / 2);
+}
 .column > :not(:last-child) {
   margin-block-end: calc((var(--space-below, var(--parent-row-gap)) - var(--parent-row-gap)) * var(--space-scale) + var(--parent-row-gap) * (var(--space-scale) - 1) / 2);
 }
+.column > :last-child {
+  margin-block-end: calc(var(--parent-row-gap) * (var(--space-scale) - 1) / 2);
+}
 
 .column_content {
   row-gap: var(--content-row-gap);
@@ -269,7 +376,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 +531,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 +729,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 +743,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/card.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;EACA;ECOA;EACA;EACA;EACA;EDPA;EACA;EACA;EACA;EACA;EACA;ECDA;EACA;EACA;EACA;EDCA;EAEA;EAEA;EACA;EAEA;EACA;;;AC3BC;EAFD;IANE;IAAA;IAAA;IAUA;;;ADwCH;EACC;EACA;EAEA;;AACA;EALD;IAME;;;;AAIF;EACC;EACA;EACA;EACA;;;AAGD;EACC;;;AC5DC;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;;;ADhIC;EAFD;IANE;IAAA;IAAA;IAAA;IAAA;IAUA;;;AEKH;EACC;EACA;EFcC,eACC;EAED,gBACC;;;AEbF;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AC3BF;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;;AAGD;EACC;;AAMD;EACC;;;AAKD;EACC;;AACA;EACC;;;AAHF;EACC;;AACA;EACC;;;AC/BH;EACC;EACA;EAEA;;AACA;EACC;;AAGD;EACC;EACA;;AAED;EACC;EACA;;;ANHA;EAFD;IANE;IAAA;IAAA;IAAA;IAUA;;;AOEH;EACC;EACA;EAEA;EAEA;EACA;EACA;EAEA;;;AAGD;EACC;EACA;EAEA;EACA;EACA;EACA;EPDC,eACC;EAED,gBACC;;;AOCH;EACC;;;AP7BC;EAFD;IANE;IAAA;IAAA;IAAA;IAUA;;;AQEH;EACC;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;ERPC,eACC;EAED,gBACC;;AQMF;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;;;AVxBC;EAFD;IANE;IAUA;;;AWPH;EACC;EACA;EAEA;EACA;EACA;;AAEA;EAEC;EACA;EACA;EACA;;;AXRA;EAFD;IANE;IAUA;;;AYPH;EACC;EACA;EAEA;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;;ACrBF;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;;;AbPC;EAFD;IANE;IAAA;IAAA;IAUA;;;AcDH;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;EdnBC,eACC;EAED,gBACC;;;AevCH;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;;;AhBAD;EAFD;IANE;IAAA;IAUA;;;AiBJH;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;;;AjBpCC;EAFD;IANE;IAAA;IAAA;IAAA;IAUA;;;AkBEH;EACC;EACA;EACA;EAEA;EAEA;ElBmBC,eACC;EAED,gBACC;EkBrBF;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;EACA;;;AAIF;EACC;;;AC1CD;EACC;;AAEA;EAEC;EACA;EACA;EACA;;;AnBIA;EAFD;IANE;IAUA;;;AoBPH;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.9",
 	"type": "module",
 	"main": "./dist/index.js",
 	"sideEffects": false,
@@ -28,6 +28,6 @@
 		"./dist/": "./dist/"
 	},
 	"dependencies": {
-		"rvx": "^16.0.2"
+		"rvx": "^18.6.2"
 	}
 }

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 | undefined>(undefined);
 
 /**
  * A collection of class names that is used as the theme.
@@ -37,6 +37,16 @@ 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;
+
+	card?: string;
+	card_content?: string;
+	card_default?: string;
+	card_info?: string;
+	card_success?: string;
+	card_warning?: string;
+	card_danger?: 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/card.tsx

@@ -0,0 +1,22 @@
+import { Expression, get } from "rvx";
+import { THEME } from "../common/theme.js";
+import { Column } from "./column.js";
+
+export type CardVariant = "default" | "info" | "success" | "warning" | "danger";
+
+export function Card(props: {
+	variant?: Expression<CardVariant | undefined>;
+	children?: unknown;
+}): unknown {
+	const theme = THEME.current;
+	return <div
+		class={[
+			theme?.card,
+			() => theme?.[`card_${get(props.variant) ?? "default"}`],
+		]}
+	>
+		<Column class={theme?.card_content}>
+			{props.children}
+		</Column>
+	</div>;
+}

package/src/components/checkbox-test.tsx

@@ -0,0 +1,35 @@
+import { ENV } from "rvx";
+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 ENV.current.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,