@rvx/ui 0.1.25 → 0.1.27

package/dist/theme.module.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../src/theme/base.scss","../src/theme/common.scss","../src/theme/components/breadcrumbs.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/nav-list.scss","../src/theme/components/notifications.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/slider.scss","../src/theme/components/tabs.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;ECaA;EACA;EACA;EACA;EDZA;EACA;EACA;EACA;EACA;ECKA;EACA;EACA;EACA;EDLA;EACA;ECCA;EACA;EACA;EACA;EDDA;EACA;EACA;EACA;EACA;EACA;ECPA;EACA;EACA;EACA;EDOA;EAEA;EAEA;EAEA;EAEA;EACA;EAEA;EACA;EAEA;;;ACvCC;EAFD;IANE;IAAA;IAAA;IAAA;IAUA;;;ADuDH;EACC;EACA;EAEA;;AACA;EALD;IAME;;;;AAIF;EACC;EACA;EACA;EACA;;;AAGD;EACC;;;AC3EC;EAFD;IANE;IAUA;;;ACPH;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;;;ADtBC;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;;;AEgFH;EACC;EACA;EACA;EACA;EAEA;EAEA;EFnEC,eACC;EAED,gBACC;EEkEF;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;;;AFhIC;EAFD;IANE;IAAA;IAAA;IAAA;IAAA;IAUA;;;AGKH;EACC;EACA;;AAEA;EHYC,eACC;EAED,gBACC;;;AGVF;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AC9BF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;EACA;;;AAIF;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;AC3BD;EACC;EACA;EACA;EACA;;;AAGD;EACC,YACC;;;AAKF;EACC;IAAO;;EACP;IAAM;;EACN;IAAM;;EACN;IAAK;;;AAGN;EACC;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;;AAEA;EACC,YACC;;AAIF;EACC;EACA;;;AAIF;EACC;EACA;EACA;EACA;;AAEA;EACC,YACC;;AAKF;EACC;EACA;EACA;;;AC9DF;EACC;EACA;;AAEA;EACC;;AAMD;EACC;;AAGD;EACC;;AAMD;EACC;;;AAKD;EACC;;AACA;EACC;;AAGD;ENAA,eACC;EAED,gBACC;;;AMVF;EACC;;AACA;EACC;;AAGD;ENAA,eACC;EAED,gBACC;;;AMVF;EACC;;AACA;EACC;;AAGD;ENAA,eACC;EAED,gBACC;;;AOvCH;EACC;EACA;EAEA;;AACA;EACC;;AAGD;EACC;EACA;;AAED;EACC;EACA;;;APHA;EAFD;IANE;IAAA;IAAA;IAAA;IAUA;;;AQEH;EACC;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAGD;EACC;;AACA;EACC;;;AAIF;EACC;EACA;;AACA;EACC;;;AAIF;EACC;IACC;;;AAIF;EACC;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;ER5BC,eACC;EAED,gBACC;;;AQ4BH;EACC;EACA;EACA;EACA;;;AAGD;ERvCE,eACC;EAED,gBACC;;;AA3BD;EAFD;IANE;IAAA;IAAA;IAAA;IAUA;;;ASEH;EACC;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;ETPC,eACC;EAED,gBACC;;ASMF;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;;;AXxBC;EAFD;IANE;IAUA;;;AYPH;EACC;EACA;EAEA;EACA;EACA;;AAEA;EAEC;EACA;EACA;EACA;;;AZRA;EAFD;IANE;IAUA;;;AaPH;EACC;EACA;EAEA;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;;AbTA;EAFD;IANE;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAUA;;;AciBH;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EAEA;EdhBC,eACC;EAED,gBACC;EceF;EACA;;AAGA;EACC;EACA;;AAGD;EAEC;EACA;;AAGD;EACC;EACA;;;AAIF;EACC;EACA;EACA;EACA;;;AdnEC;EAFD;IANE;IAAA;IAAA;IAAA;IAAA;IAAA;IAUA;;;AeSH;EACC;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;;AAEA;EfbC,eACC;EAED,gBACC;;;AeeF;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;ACvDF;EACC,eACC;EAED,gBACC;EAGD;EACA;EACA;;;AAGD;EACC;;AAEA;EACC;EACA;;AAEA;EACC;;;AAKH;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;;;AhB5BC;EAFD;IANE;IAAA;IAAA;IAUA;;;AiBDH;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;EjBnBC,eACC;EAED,gBACC;;;AkBvCH;EACC;EACA;EACA;;AAEA;EACC;EACA;;;AAIF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;;AAIF;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;ACjCD;EACC;EACA;EACA;;;AAIA;EACC;EACA;;AACA;EACC;EACA;;;AALF;EACC;EACA;;AACA;EACC;EACA;;;AALF;EACC;EACA;;AACA;EACC;EACA;;;AnBAD;EAFD;IANE;IAAA;IAUA;;;AoBJH;EACC;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;AAAA;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;ACrDD;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAEA;EACC;;;ArBED;EAFD;IANE;IAAA;IAAA;IAAA;IAAA;IAAA;IAUA;;;AsBQH;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EAEA;EACA;EAEA,eACC;EAED,gBACC;EAGD;EACA;EACA;EACA;EAEA;EACA;;AAGA;EAEC;EACA;;AAED;EACC;;;AAIF;EACC;EACA;;;AAGD;EtBjCE,eACC;EAED,gBACC;;;AA3BD;EAFD;IANE;IAAA;IAAA;IAAA;IAUA;;;AuBEH;EACC;EACA;EACA;EAEA;EAEA;EvBmBC,eACC;EAED,gBACC;EuBrBF;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;EACA;;;AAIF;EACC;;;AC3CD;EACC;;AAEA;EAEC;EACA;EACA;EACA;;;AxBIA;EAFD;IANE;IAUA;;;AyBPH;EACC;;;AAGD;EACC;;;ACZD;EACC","file":"theme.module.css"}
+{"version":3,"sourceRoot":"","sources":["../src/theme/base.scss","../src/theme/common.scss","../src/theme/components/breadcrumbs.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/nav-list.scss","../src/theme/components/notifications.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/separated.scss","../src/theme/components/slider.scss","../src/theme/components/tabs.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;ECcA;EACA;EACA;EACA;EDbA;EACA;EACA;EACA;ECOA;EACA;EACA;EACA;EDPA;EACA;ECGA;EACA;EACA;EACA;EDHA;EACA;EACA;EACA;EACA;ECJA;EACA;EACA;EACA;EDIA;EAEA;EAEA;EAEA;EAEA;EACA;EAEA;EACA;EAEA;;;ACtCA;EANE;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;;AAQD;EAFD;IANE;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAUA;;;AD4FH;EACC;EACA;EAEA;;AACA;EALD;IAME;;;;AAIF;EACC;EACA;EACA;EACA;;;AAGD;EACC;;;AClHA;EANE;;AAQD;EAFD;IANE;IAUA;;;ACNH;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;;;ADzBA;EANE;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;;AAQD;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;IAUA;;;AE2GH;EACC;EACA;EACA;EACA;EAEA;EAEA;EF/FA,eACC;EAED,gBACC;EE8FD;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;;;AF7JA;EANE;EAAA;EAAA;EAAA;EAAA;;AAQD;EAFD;IANE;IAAA;IAAA;IAAA;IAAA;IAUA;;;AGUH;EACC;EACA;EACA;;AAEA;EHKA,eACC;EAED,gBACC;;;AGHD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;ACpCF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;EACA;;;AAIF;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;AC3BD;EACC;EACA;EACA;EACA;;;AAGD;EACC,YACC;;;AAKF;EACC;IAAO;;EACP;IAAM;;EACN;IAAM;;EACN;IAAK;;;AAGN;EACC;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;;AAEA;EACC,YACC;;AAIF;EACC;EACA;;;AAIF;EACC;EACA;EACA;EACA;;AAEA;EACC,YACC;;AAKF;EACC;EACA;EACA;;;AC9DF;EACC;EACA;;AAEA;EACC;;AAMD;EACC;;AAGD;EACC;;AAMD;EACC;;;AAKD;EACC;;AACA;EACC;;AAGD;ENDD,eACC;EAED,gBACC;;;AMTD;EACC;;AACA;EACC;;AAGD;ENDD,eACC;EAED,gBACC;;;AMTD;EACC;;AACA;EACC;;AAGD;ENDD,eACC;EAED,gBACC;;;AOtCF;EACC;EACA;EAEA;;AACA;EACC;;AAGD;EACC;EACA;;AAED;EACC;EACA;;;ACdF;EACC;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAGD;EACC;;AACA;EACC;;;AAIF;EACC;EACA;;AACA;EACC;;;AAIF;EACC;IACC;;;AAIF;EACC;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;ERxBC,eACC;EAED,gBACC;;;AA5BD;EANE;;AAQD;EAFD;IANE;IAUA;;;ASNH;EACC;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;ETAA,eACC;EAED,gBACC;ESFD;;AAEA;EACC;;;ACvCF;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;;;AX1BA;EANE;;AAQD;EAFD;IANE;IAUA;;;AYNH;EACC;EACA;EAEA;EACA;EACA;;AAEA;EAEC;EACA;EACA;EACA;;;ACpBF;EACC;EACA;EAEA;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;;AbLD;EANE;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;;AAQD;EAFD;IANE;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAUA;;;Ac0BH;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;Ed3BA,eACC;EAED,gBACC;Ec0BD;;AAGA;EACC;EACA;;AAGD;EAEC;EACA;;AAGD;EACC;EACA;;;AAIF;EACC;EACA;EACA;EACA;;;Ad9EA;EANE;EAAA;EAAA;EAAA;EAAA;;AAQD;EAFD;IANE;IAAA;IAAA;IAAA;IAAA;IAUA;;;AeWH;EACC;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;;AAEA;EfhBA,eACC;EAED,gBACC;;;AekBD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;ACzDF;EACC,eACC;EAED,gBACC;EAGD;EACA;EACA;;;AAGD;EACC;;AAEA;EACC;EACA;;AAEA;EACC;;;AAKH;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;;;ACvCD;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;;AAEA;EjBVA,eACC;EAED,gBACC;;;AkBtCF;EACC;EACA;EACA;;AAEA;EACC;EACA;;;AAIF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;;AAIF;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;AChCD;EACC;EACA;EACA;;;AAIA;EACC;EACA;;AACA;EACC;EACA;;AAGD;EnBkBD,eACC;EAED,gBACC;;;AmB9BD;EACC;EACA;;AACA;EACC;EACA;;AAGD;EnBkBD,eACC;EAED,gBACC;;;AmB9BD;EACC;EACA;;AACA;EACC;EACA;;AAGD;EnBkBD,eACC;EAED,gBACC;;;AA5BD;EANE;EAAA;;AAQD;EAFD;IANE;IAAA;IAUA;;;AoBFH;EACC;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;AAAA;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;ACvDD;EACC;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;;AAEA;EACC;;;AChBF;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAEA;EACC;;;AtBAF;EANE;EAAA;EAAA;EAAA;EAAA;EAAA;;AAQD;EAFD;IANE;IAAA;IAAA;IAAA;IAAA;IAAA;IAUA;;;AuBcH;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EAEA;EACA;EAEA,eACC;EAED,gBACC;EAGD;EACA;EACA;EACA;EAEA;EACA;;AAGA;EAEC;EACA;;AAED;EACC;;;AAIF;EACC;EACA;;;AAGD;EvBxCC,eACC;EAED,gBACC;;;AA5BD;EANE;EAAA;EAAA;EAAA;;AAQD;EAFD;IANE;IAAA;IAAA;IAAA;IAUA;;;AwBMH;EACC;EACA;EACA;EAEA;EAEA;ExBOA,eACC;EAED,gBACC;EwBTD;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;EACA;;;AAIF;EACC;;;AC/CD;EACC;;AAEA;EAEC;EACA;EACA;EACA;;;AzBED;EANE;;AAQD;EAFD;IANE;IAUA;;;A0BNH;EACC;;;AAGD;EACC;;;ACbD;EACC","file":"theme.module.css"}

package/package.json

@@ -12,7 +12,7 @@
 		"rvx"
 	],
 	"license": "MIT",
-	"version": "0.1.25",
+	"version": "0.1.27",
 	"type": "module",
 	"main": "./dist/index.js",
 	"sideEffects": false,
@@ -28,6 +28,6 @@
 		"./dist/": "./dist/"
 	},
 	"peerDependencies": {
-		"rvx": "^22.4.2"
+		"rvx": "^22.4.3"
 	}
 }

package/src/common/theme.tsx

@@ -38,7 +38,6 @@ export interface Theme {
 
 	card?: string;
 	card_raw?: string;
-	card_content?: string;
 	card_default?: string;
 	card_info?: string;
 	card_success?: string;
@@ -109,6 +108,7 @@ export interface Theme {
 	page_content?: string;
 
 	popover?: string;
+	popover_raw?: string;
 	popover_spike_area?: string;
 	popover_scroll_area?: string;
 	popover_spike?: string;
@@ -121,6 +121,7 @@ export interface Theme {
 	radio_button_content?: string;
 
 	row?: string;
+	row_padded?: string;
 	row_content?: string;
 	row_group?: string;
 	row_control?: string;
@@ -132,6 +133,9 @@ export interface Theme {
 	scroll_view_indicator_end?: string;
 	scroll_view_indicator_visible?: string;
 
+	separated_column?: string;
+	separated_row?: string;
+
 	slider_host?: string;
 
 	tab_handle?: string;

package/src/components/card.tsx

@@ -25,7 +25,7 @@ export function Card(props: {
 	>
 		{props.raw
 			? props.children
-			: <Column class={theme?.card_content} size={map(props.size, s => s ?? "group")}>
+			: <Column size={map(props.size, s => s ?? "group")}>
 				{props.children}
 			</Column>
 		}

package/src/components/column.tsx

@@ -7,11 +7,11 @@ import { SizeContext } from "../common/types.js";
  */
 export function Column(props: {
 	size?: Expression<SizeContext | undefined>;
+	padded?: Expression<boolean | undefined>;
 	class?: ClassValue;
 	style?: StyleValue;
 	id?: Expression<string | undefined>;
 	children?: unknown;
-	padded?: boolean;
 }): unknown {
 	const theme = THEME.current;
 	return <div

package/src/components/dialog.tsx

@@ -1,9 +1,9 @@
 import { $, captureSelf, ClassValue, Context, Emitter, Event, Expression, map, render, StyleValue, teardown, uniqueId } from "rvx";
 import { TASKS, Tasks, useMicrotask } from "rvx/async";
-import { FlexSpace, Heading, Row, ScrollView, Text, THEME } from "../index.js";
+import { Column, FlexSpace, Group, Heading, Row, Separated, Text, THEME } from "../index.js";
 import { LAYER, Layer } from "./layer.js";
 
-export class DialogAbortError extends Error {}
+export class DialogAbortError extends Error { }
 
 export interface Dialog<T> {
 	resolve: (value: T) => void;
@@ -110,16 +110,10 @@ export function DialogBody(props: {
 		aria-labelledby={map(props["aria-labelledby"], v => v ?? titleId)}
 		aria-describedby={map(props["aria-describedby"], v => v ?? descriptionId)}
 	>
-		<div
-			class={[
-				theme?.column,
-				theme?.column_content,
-				theme?.dialog_body,
-			]}
-		>
-			{head}
+		<Separated class={theme?.dialog_body}>
+			{head.length > 0 ? <Group padded>{head}</Group> : undefined}
 			{props.children}
-		</div>
+		</Separated>
 	</div> as HTMLElement;
 
 	useMicrotask(() => {
@@ -142,13 +136,8 @@ export function DialogBody(props: {
 	return body;
 }
 
-export function DialogScrollView(props: {
-	children?: unknown;
-}) {
-	const theme = THEME.current;
-	return <ScrollView class={theme?.dialog_scroll_view} contentClass={theme?.dialog_scroll_view_content}>
-		{props.children}
-	</ScrollView>;
+export function DialogContent(props: Omit<Parameters<typeof Column>[0], "padded" | "size">) {
+	return Column({ ...props, padded: true });
 }
 
 export function DialogFooter(props: {
@@ -158,21 +147,22 @@ export function DialogFooter(props: {
 	children?: unknown;
 }): unknown {
 	const theme = THEME.current;
-	return <Row
-		size="control"
-		class={[
-			theme?.dialog_footer,
-			props.class,
-		]}
-		style={props.style}
-		align="center"
-	>
-		<Row size="control">
-			{props.links}
-		</Row>
-		<FlexSpace />
-		<Row size="control">
-			{props.children}
+	return <Group padded>
+		<Row
+			class={[
+				theme?.dialog_footer,
+				props.class,
+			]}
+			style={props.style}
+			align="center"
+		>
+			<Row size="control">
+				{props.links}
+			</Row>
+			<FlexSpace />
+			<Row size="control">
+				{props.children}
+			</Row>
 		</Row>
-	</Row>;
+	</Group>
 }

package/src/components/popover.tsx

@@ -67,6 +67,7 @@ export function createPopover(props: {
 	id?: string;
 	class?: ClassValue;
 	style?: StyleValue;
+	raw?: Expression<boolean | undefined>;
 	"aria-label"?: Expression<string | undefined>;
 	"aria-labelledby"?: Expression<string | undefined>;
 	"aria-describedby"?: Expression<string | undefined>;
@@ -126,6 +127,7 @@ export function createPopover(props: {
 				theme?.column,
 				theme?.column_content,
 				theme?.popover_content,
+				map(props.raw, raw => raw ? theme?.popover_raw : undefined),
 			]}>
 				{props.content({ popout })}
 			</div> as HTMLElement;
@@ -190,6 +192,8 @@ export function Popover(props: {
 	/** Style for the popover. */
 	style?: StyleValue;
 
+	raw?: Expression<boolean | undefined>;
+
 	/** The popover content component. */
 	children: PopoverContent;
 
@@ -270,6 +274,7 @@ export function Popover(props: {
 		role: props.role,
 		class: props.class,
 		style: props.style,
+		raw: props.raw,
 
 		"aria-label": props["aria-label"],
 		"aria-labelledby": () => (get(props["aria-label"]) === undefined

package/src/components/row.tsx

@@ -1,4 +1,4 @@
-import { ClassValue, Expression, get, StyleValue } from "rvx";
+import { ClassValue, Expression, get, map, StyleValue } from "rvx";
 import { THEME } from "../common/theme.js";
 import { SizeContext } from "../common/types.js";
 
@@ -6,16 +6,20 @@ export type RowAlignment = "top" | "center" | "bottom";
 
 export function Row(props: {
 	size?: Expression<SizeContext | undefined>;
+	padded?: Expression<boolean | undefined>;
 	align?: Expression<RowAlignment | undefined>;
 	class?: ClassValue;
 	style?: StyleValue;
+	id?: Expression<string | undefined>;
 	children?: unknown;
 }): unknown {
 	const theme = THEME.current;
 	return <div
+		id={props.id}
 		class={[
 			theme?.row,
 			() => theme?.[`row_${get(props.size) ?? "control"}`],
+			map(props.padded, padded => padded ? theme?.row_padded : undefined),
 			props.class,
 		]}
 		style={[

package/src/components/separated.tsx

@@ -0,0 +1,22 @@
+import { ClassValue, Expression, map, StyleValue } from "rvx";
+import { THEME } from "../common/theme.js";
+
+export function Separated(props: {
+	class?: ClassValue;
+	style?: StyleValue;
+	id?: Expression<string | undefined>;
+	children?: unknown;
+	row?: Expression<boolean | undefined>;
+}) {
+	const theme = THEME.current;
+	return <div
+		class={[
+			props.class,
+			map(props.row, row => row ? theme?.separated_row : theme?.separated_column),
+		]}
+		style={props.style}
+		id={props.id}
+	>
+		{props.children}
+	</div>;
+}

package/src/index.tsx

@@ -26,6 +26,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/separated.js";
 export * from "./components/slider.js";
 export * from "./components/tabs.js";
 export * from "./components/text-input.js";

package/src/theme/base.scss

@@ -12,7 +12,6 @@ $root-size: 14px;
 	font-size: #{math.div(1rem, 16px) * $root-size};
 	line-height: 1;
 
-	--accent: rgb(0, 192, 255);
 	accent-color: var(--accent);
 
 	@include common.define-quad(page-pad, px(32), px(32));
@@ -21,22 +20,20 @@ $root-size: 14px;
 	--content-row-gap: #{px(24)};
 	--content-radius: #{px(8)};
 	--content-border: #{px(2)};
-	--content-shadow: 0 0 #{px(16)} rgba(0, 0, 0, .2);
-	@include common.define-quad(content-pad, px(20), px(20));
+	@include common.define-quad(content-pad, px(16), px(16));
 
 	--group-column-gap: #{px(16)};
 	--group-row-gap: #{px(16)};
-	@include common.define-quad(group-pad, px(20), px(20));
+	@include common.define-quad(group-pad, px(16), px(16));
 
 	--control-column-gap: #{px(8)};
 	--control-row-gap: #{px(8)};
 	--control-radius: #{px(5)};
 	--control-border: #{px(2)};
-	--control-shadow: 0 0 #{px(3)} rgba(0, 0, 0, .5);
 	--control-disabled: opacity(.5);
-	@include common.define-quad(control-pad, px(8), px(10));
+	@include common.define-quad(control-pad, px(7), px(8));
 
-	--input-padding: #{px(4)};
+	--input-extension: #{px(4)};
 
 	--separator: #{px(1)};
 
@@ -55,16 +52,56 @@ $root-size: 14px;
 
 @include common.theme((
 	bg: (
-		dark: rgb(36, 36, 36),
+		dark: rgb(24, 24, 24),
+		light: rgb(245, 245, 245),
+	),
+	bg-alt: (
+		dark: rgb(32, 32, 32),
+		light: rgb(255, 255, 255),
+	),
+	accent: (
+		dark: rgb(64, 160, 255),
+		light: rgb(0, 127, 255),
 	),
 	fg: (
 		dark: white,
+		light: black,
 	),
 	focus-outline: (
 		dark: var(--control-border) dashed var(--accent),
+		light: var(--control-border) dashed var(--accent),
 	),
 	separator-color: (
 		dark: rgb(64, 64, 64),
+		light: rgb(220, 220, 220),
+	),
+	selection-bg: (
+		dark: rgba(64, 160, 255, 0.5),
+		light: rgba(0, 127, 255, 0.3),
+	),
+	overlay-backdrop: (
+		dark: rgba(24, 24, 24, .8),
+		light: rgba(245, 245, 245, .7),
+	),
+	overlay-bg: (
+		dark: var(--bg),
+		light: var(--bg),
+	),
+	overlay-border: (
+		dark: rgb(48, 48, 48),
+		light: rgb(216, 216, 216),
+	),
+	overlay-shadow: (
+		dark: 0 0 #{px(12)} rgba(0, 0, 0, .3),
+		light: 0 0 #{px(12)} rgba(128, 128, 128, .2),
+	),
+	content-shadow: (
+		dark: 0 0 #{px(12)} rgba(0, 0, 0, .3),
+		light: 0 0 #{px(12)} rgba(128, 128, 128, .2),
+	),
+	control-shadow: (
+		dark: 0 0 #{px(3)} rgba(0, 0, 0, 0.5),
+		light: 0 0 #{px(2)} rgba(128, 128, 128, .2),
 	),
 ));
 
@@ -86,5 +123,5 @@ body {
 }
 
 ::selection {
-	background-color: rgba(0, 150, 200, .6);
+	background-color: var(--selection-bg);
 }

package/src/theme/common.scss

@@ -32,20 +32,11 @@
 	--#{$name}-inline-end: #{$inline-end};
 }
 
-@mixin padding($name, $subtract: null) {
-	@if $subtract {
-		padding-block:
-			calc(var(--#{$name}-block-start) - $subtract)
-			calc(var(--#{$name}-block-end) - $subtract);
-		padding-inline:
-			calc(var(--#{$name}-inline-start) - $subtract)
-			calc(var(--#{$name}-inline-end) - $subtract);
-	} @else {
-		padding-block:
-			var(--#{$name}-block-start)
-			var(--#{$name}-block-end);
-		padding-inline:
-			var(--#{$name}-inline-start)
-			var(--#{$name}-inline-end);
-	}
+@mixin padding($name) {
+	padding-block:
+		var(--#{$name}-block-start)
+		var(--#{$name}-block-end);
+	padding-inline:
+		var(--#{$name}-inline-start)
+		var(--#{$name}-inline-end);
 }

package/src/theme/components/breadcrumbs.scss

@@ -3,6 +3,7 @@
 @include common.theme((
 	breadcrumb-separator: (
 		dark: rgb(120, 120, 120),
+		light: rgb(180, 180, 180),
 	),
 ));
 

package/src/theme/components/button.scss

@@ -2,94 +2,121 @@
 
 @include common.theme((
 	button-default-bg: (
-		dark: rgb(64, 64, 64),
+		dark: rgb(72, 72, 72),
+		light: rgb(92, 92, 92),
 	),
 	button-default-bg-hover: (
-		dark: rgb(90, 90, 90),
+		dark: rgb(100, 100, 100),
+		light: rgb(128, 128, 128),
 	),
 	button-default-fg: (
-		dark: var(--fg),
+		dark: white,
+		light: white,
+	),
+	button-default-focus: (
+		light: rgb(100, 178, 255),
 	),
 
 	button-primary-bg: (
-		dark: rgb(0, 192, 255),
+		dark: rgb(64, 160, 255),
+		light: rgb(0, 127, 255),
 	),
 	button-primary-bg-hover: (
-		dark: rgb(92, 214, 255),
+		dark: rgb(112, 184, 255),
+		light: rgb(64, 160, 255),
 	),
 	button-primary-fg: (
 		dark: black,
+		light: white,
 	),
 	button-primary-focus: (
 		dark: rgb(200, 241, 255),
+		light: rgb(0, 56, 112),
 	),
 
 	button-success-bg: (
-		dark: rgb(0, 200, 100),
+		dark: rgb(64, 255, 64),
+		light: rgb(0, 255, 0),
 	),
 	button-success-bg-hover: (
-		dark: rgb(0, 242, 121),
+		dark: rgb(160, 255, 160),
+		light: rgb(130, 255, 130),
 	),
 	button-success-fg: (
 		dark: black,
+		light: black,
 	),
 	button-success-focus: (
-		dark: rgb(200, 255, 228),
+		dark: rgb(224, 255, 224),
+		light: rgb(0, 160, 0),
 	),
 
 	button-warning-bg: (
-		dark: rgb(230, 180, 0),
+		dark: rgb(255, 200, 0),
+		light: rgb(255, 200, 0),
 	),
 	button-warning-bg-hover: (
-		dark: rgb(255, 220, 105),
+		dark: rgb(255, 224, 112),
+		light: rgb(255, 224, 112),
 	),
 	button-warning-fg: (
 		dark: black,
+		light: black,
 	),
 	button-warning-focus: (
 		dark: rgb(255, 243, 200),
+		light: rgb(150, 117, 0),
 	),
 
 	button-danger-bg: (
-		dark: rgb(255, 0, 64),
+		dark: rgb(255, 40, 40),
+		light: rgb(255, 0, 0),
 	),
 	button-danger-bg-hover: (
-		dark: rgb(255, 70, 100),
+		dark: rgb(255, 100, 100),
+		light: rgb(255, 80, 80),
 	),
 	button-danger-fg: (
-		dark: black,
+		dark: white,
+		light: white,
 	),
 	button-danger-focus: (
 		dark: rgb(255, 200, 214),
+		light: rgb(112, 0, 0),
 	),
 
 	button-input-bg: (
-		dark: rgb(16, 16, 16),
+		dark: rgb(48, 48, 48),
+		light: rgb(250, 250, 250),
 	),
 	button-input-bg-hover: (
-		dark: rgb(40, 40, 40),
-	),
-	button-input-bg-active: (
-		dark: rgb(60, 60, 60),
+		dark: rgb(64, 64, 64),
+		light: rgb(230, 230, 230),
 	),
 	button-input-fg: (
 		dark: white,
+		light: black,
 	),
 	button-input-border: (
-		dark: rgb(0, 0, 0),
+		dark: transparent,
+		light: rgb(220, 220, 220),
 	),
 
 	button-text-bg: (
 		dark: transparent,
+		light: transparent,
 	),
 	button-text-bg-hover: (
-		dark: rgb(80, 80, 80),
+		dark: rgb(48, 48, 48),
+		light: rgb(230, 230, 230),
 	),
 	button-text-bg-active: (
-		dark: rgb(100, 100, 100),
+		dark: rgb(64, 64, 64),
+		light: rgb(240, 240, 240),
 	),
 	button-text-fg: (
 		dark: var(--fg),
+		light: var(--fg),
 	),
 ));
 
@@ -102,7 +129,7 @@
 	cursor: pointer;
 
 	outline: none;
-	@include common.padding(control-pad, var(--control-border));
+	@include common.padding(control-pad);
 
 	border-radius: var(--control-radius);
 	transition: var(--color-transition) background-color,

package/src/theme/components/card.scss

@@ -2,28 +2,34 @@
 
 @include common.theme((
 	card-default-border: (
-		dark: rgb(72, 72, 72),
+		dark: rgb(36, 36, 36),
+		light: rgb(216, 216, 216),
 	),
 	card-info-border: (
-		dark: rgb(0, 192, 255),
+		dark: rgb(64, 160, 255),
+		light: rgb(0, 127, 255),
 	),
 	card-success-border: (
-		dark: rgb(0, 255, 128),
+		dark: rgb(64, 255, 64),
+		light: rgb(0, 255, 0),
 	),
 	card-warning-border: (
 		dark: rgb(255, 200, 0),
+		light: rgb(255, 200, 0),
 	),
 	card-danger-border: (
-		dark: rgb(255, 0, 64),
+		dark: rgb(255, 64, 64),
+		light: rgb(255, 0, 0),
 	),
 ));
 
 .card {
 	box-shadow: var(--content-shadow);
 	border-radius: var(--content-radius);
+	background-color: var(--bg-alt);
 
 	&:not(.card_raw) {
-		@include common.padding(content-pad, var(--content-border));
+		@include common.padding(content-pad);
 	}
 }
 

package/src/theme/components/checkbox.scss

@@ -19,8 +19,8 @@
 }
 
 .checkbox_padding {
-	padding: var(--input-padding);
-	margin: calc(var(--input-padding) * -1);
+	padding: var(--input-extension);
+	margin: calc(var(--input-extension) * -1);
 }
 
 .checkbox_input {

package/src/theme/components/column.scss

@@ -35,7 +35,7 @@
 		}
 
 		&.column_padded {
-			@include common.padding(#{$size}-pad, var(--content-border));
+			@include common.padding(#{$size}-pad);
 		}
 	}
 }