@rvx/ui 0.1.26 → 0.1.28

package/dist/theme.module.css

@@ -11,26 +11,26 @@
   --content-row-gap: 1.7142857143rem;
   --content-radius: 0.5714285714rem;
   --content-border: 0.1428571429rem;
-  --content-pad-block-start: 1.4285714286rem;
-  --content-pad-inline-start: 1.4285714286rem;
-  --content-pad-block-end: 1.4285714286rem;
-  --content-pad-inline-end: 1.4285714286rem;
+  --content-pad-block-start: 1.1428571429rem;
+  --content-pad-inline-start: 1.1428571429rem;
+  --content-pad-block-end: 1.1428571429rem;
+  --content-pad-inline-end: 1.1428571429rem;
   --group-column-gap: 1.1428571429rem;
   --group-row-gap: 1.1428571429rem;
-  --group-pad-block-start: 1.4285714286rem;
-  --group-pad-inline-start: 1.4285714286rem;
-  --group-pad-block-end: 1.4285714286rem;
-  --group-pad-inline-end: 1.4285714286rem;
+  --group-pad-block-start: 1.1428571429rem;
+  --group-pad-inline-start: 1.1428571429rem;
+  --group-pad-block-end: 1.1428571429rem;
+  --group-pad-inline-end: 1.1428571429rem;
   --control-column-gap: 0.5714285714rem;
   --control-row-gap: 0.5714285714rem;
   --control-radius: 0.3571428571rem;
   --control-border: 0.1428571429rem;
   --control-disabled: opacity(.5);
-  --control-pad-block-start: 0.5714285714rem;
-  --control-pad-inline-start: 0.7142857143rem;
-  --control-pad-block-end: 0.5714285714rem;
-  --control-pad-inline-end: 0.7142857143rem;
-  --input-padding: 0.2857142857rem;
+  --control-pad-block-start: 0.5rem;
+  --control-pad-inline-start: 0.5714285714rem;
+  --control-pad-block-end: 0.5rem;
+  --control-pad-inline-end: 0.5714285714rem;
+  --input-extension: 0.2857142857rem;
   --separator: 0.0714285714rem;
   --focus-outline-offset: 0.1428571429rem;
   --overflow-safe-area: 0.2857142857rem;
@@ -63,7 +63,7 @@
     --accent: rgb(64, 160, 255);
     --fg: white;
     --focus-outline: var(--control-border) dashed var(--accent);
-    --separator-color: rgb(64, 64, 64);
+    --separator-color: rgb(42, 42, 42);
     --selection-bg: rgba(64, 160, 255, 0.5);
     --overlay-backdrop: rgba(24, 24, 24, 0.8);
     --overlay-bg: var(--bg);
@@ -204,8 +204,8 @@ body {
   line-height: 1;
   cursor: pointer;
   outline: none;
-  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));
+  padding-block: var(--control-pad-block-start) var(--control-pad-block-end);
+  padding-inline: var(--control-pad-inline-start) var(--control-pad-inline-end);
   border-radius: var(--control-radius);
   transition: var(--color-transition) background-color, var(--color-transition) border-color;
 }
@@ -349,8 +349,8 @@ body {
   background-color: var(--bg-alt);
 }
 .card:not(.card_raw) {
-  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));
+  padding-block: var(--content-pad-block-start) var(--content-pad-block-end);
+  padding-inline: var(--content-pad-inline-start) var(--content-pad-inline-end);
 }
 
 .card_default {
@@ -390,8 +390,8 @@ body {
 }
 
 .checkbox_padding {
-  padding: var(--input-padding);
-  margin: calc(var(--input-padding) * -1);
+  padding: var(--input-extension);
+  margin: calc(var(--input-extension) * -1);
 }
 
 .checkbox_input {
@@ -486,8 +486,8 @@ body {
   --parent-row-gap: var(--content-row-gap);
 }
 .column_content.column_padded {
-  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));
+  padding-block: var(--content-pad-block-start) var(--content-pad-block-end);
+  padding-inline: var(--content-pad-inline-start) var(--content-pad-inline-end);
 }
 
 .column_group {
@@ -497,8 +497,8 @@ body {
   --parent-row-gap: var(--group-row-gap);
 }
 .column_group.column_padded {
-  padding-block: calc(var(--group-pad-block-start) - var(--content-border)) calc(var(--group-pad-block-end) - var(--content-border));
-  padding-inline: calc(var(--group-pad-inline-start) - var(--content-border)) calc(var(--group-pad-inline-end) - var(--content-border));
+  padding-block: var(--group-pad-block-start) var(--group-pad-block-end);
+  padding-inline: var(--group-pad-inline-start) var(--group-pad-inline-end);
 }
 
 .column_control {
@@ -508,8 +508,8 @@ body {
   --parent-row-gap: var(--control-row-gap);
 }
 .column_control.column_padded {
-  padding-block: calc(var(--control-pad-block-start) - var(--content-border)) calc(var(--control-pad-block-end) - var(--content-border));
-  padding-inline: calc(var(--control-pad-inline-start) - var(--content-border)) calc(var(--control-pad-inline-end) - var(--content-border));
+  padding-block: var(--control-pad-block-start) var(--control-pad-block-end);
+  padding-inline: var(--control-pad-inline-start) var(--control-pad-inline-end);
 }
 
 .control_group {
@@ -570,8 +570,6 @@ body {
   box-shadow: var(--overlay-shadow);
   border-radius: var(--content-radius);
   border: var(--content-border) solid var(--overlay-border);
-  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));
 }
 
 .dialog_scroll_view {
@@ -582,8 +580,8 @@ body {
 }
 
 .dialog_scroll_view_content {
-  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));
+  padding-block: var(--content-pad-block-start) var(--content-pad-block-end);
+  padding-inline: var(--content-pad-inline-start) var(--content-pad-inline-end);
 }
 
 :root {
@@ -621,8 +619,9 @@ body {
 
 .dropdown_item {
   cursor: pointer;
-  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));
+  padding-block: var(--control-pad-block-start) var(--control-pad-block-end);
+  padding-inline: var(--control-pad-inline-start) var(--control-pad-inline-end);
+  border: transparent solid var(--control-border);
 }
 .dropdown_item.dropdown_item_active {
   background-color: var(--dropdown-item-active-bg);
@@ -750,11 +749,11 @@ h6.heading {
   background-color: var(--nav-list-item-bg);
   color: var(--nav-list-item-fg);
   border: var(--nav-list-item-border) solid var(--control-border);
+  border-radius: var(--control-radius);
   cursor: pointer;
   outline: none;
-  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);
+  padding-block: var(--control-pad-block-start) var(--control-pad-block-end);
+  padding-inline: var(--control-pad-inline-start) var(--control-pad-inline-end);
   transition: var(--color-transition) background-color, var(--color-transition) border-color;
 }
 .nav_list_item[disabled] {
@@ -818,8 +817,8 @@ h6.heading {
   background-color: var(--bg);
 }
 .notification:not(.notification_raw) {
-  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));
+  padding-block: var(--content-pad-block-start) var(--content-pad-block-end);
+  padding-inline: var(--content-pad-inline-start) var(--content-pad-inline-end);
 }
 
 .notification_default {
@@ -918,8 +917,10 @@ h6.heading {
 .popover_content {
   border-radius: var(--content-radius);
   border: var(--content-border) solid var(--overlay-border);
-  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));
+}
+.popover_content:not(.popover_raw) {
+  padding-block: var(--content-pad-block-start) var(--content-pad-block-end);
+  padding-inline: var(--content-pad-inline-start) var(--content-pad-inline-end);
 }
 
 .radio_buttons {
@@ -945,8 +946,8 @@ h6.heading {
 }
 
 .radio_button_padding {
-  padding: var(--input-padding);
-  margin: calc(var(--input-padding) * -1);
+  padding: var(--input-extension);
+  margin: calc(var(--input-extension) * -1);
 }
 
 .radio_button_input {
@@ -969,6 +970,10 @@ h6.heading {
   --parent-column-gap: var(--content-column-gap);
   --parent-row-gap: var(--content-row-gap);
 }
+.row_content.row_padded {
+  padding-block: var(--content-pad-block-start) var(--content-pad-block-end);
+  padding-inline: var(--content-pad-inline-start) var(--content-pad-inline-end);
+}
 
 .row_group {
   column-gap: var(--group-column-gap);
@@ -978,6 +983,10 @@ h6.heading {
   --parent-column-gap: var(--group-column-gap);
   --parent-row-gap: var(--group-row-gap);
 }
+.row_group.row_padded {
+  padding-block: var(--group-pad-block-start) var(--group-pad-block-end);
+  padding-inline: var(--group-pad-inline-start) var(--group-pad-inline-end);
+}
 
 .row_control {
   column-gap: var(--control-column-gap);
@@ -987,6 +996,10 @@ h6.heading {
   --parent-column-gap: var(--control-column-gap);
   --parent-row-gap: var(--control-row-gap);
 }
+.row_control.row_padded {
+  padding-block: var(--control-pad-block-start) var(--control-pad-block-end);
+  padding-inline: var(--control-pad-inline-start) var(--control-pad-inline-end);
+}
 
 :root {
   --scroll-view-indicator-size: 2rem;
@@ -1045,6 +1058,28 @@ h6.heading {
   opacity: 1;
 }
 
+.separated_column {
+  display: flex;
+  flex-direction: column;
+}
+.separated_column > * {
+  overflow: hidden;
+}
+.separated_column > :not(.has_separator) + :not(.has_separator) {
+  border-block-start: calc(var(--separator) * var(--space-scale)) solid var(--separator-color);
+}
+
+.separated_row {
+  display: flex;
+  flex-direction: row;
+}
+.separated_row > * {
+  overflow: hidden;
+}
+.separated_row > :not(.has_separator) + :not(.has_separator) {
+  border-inline-start: calc(var(--separator) * var(--space-scale)) solid var(--separator-color);
+}
+
 .slider_host {
   display: flex;
   flex-direction: column;
@@ -1083,6 +1118,10 @@ h6.heading {
   border-bottom: var(--separator) solid var(--separator-color);
 }
 
+.tab_list_padded {
+  padding-inline: calc(var(--content-pad-inline-start) - var(--control-pad-inline-start)) calc(var(--content-pad-inline-end) - var(--control-pad-inline-end));
+}
+
 .tab_handle {
   font-family: inherit;
   font-size: inherit;
@@ -1090,8 +1129,8 @@ h6.heading {
   line-height: 1;
   cursor: pointer;
   outline: none;
-  padding-block: var(--control-pad-block-start) calc(var(--control-pad-block-end) - var(--control-border));
-  padding-inline: var(--control-pad-inline-start) var(--control-pad-inline-end);
+  padding-block: calc(var(--control-pad-block-start) + var(--control-border)) var(--control-pad-block-end);
+  padding-inline: calc(var(--control-pad-inline-start) + var(--control-border)) calc(var(--control-pad-inline-end) + var(--control-border));
   background-color: transparent;
   color: var(--tab-handle-fg);
   border: none;
@@ -1112,9 +1151,15 @@ h6.heading {
   color: var(--tab-handle-fg-current);
 }
 
+.tab_panel {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+}
+
 .tab_panel_padded {
-  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));
+  padding-block: var(--content-pad-block-start) var(--content-pad-block-end);
+  padding-inline: var(--content-pad-inline-start) var(--content-pad-inline-end);
 }
 
 :root {
@@ -1156,7 +1201,7 @@ h6.heading {
 }
 
 input.text_input {
-  block-size: calc(var(--control-pad-block-start) + 1em + var(--control-pad-block-end));
+  block-size: calc(var(--control-pad-block-start) + 1em + var(--control-pad-block-end) + var(--control-border) * 2);
 }
 
 .text {

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;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;EF9FC,eACC;EAED,gBACC;EE6FF;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;EHMC,eACC;EAED,gBACC;;;AGJF;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;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;;;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;ERbC,eACC;EAED,gBACC;;;AQaH;EACC;EACA;EACA;EACA;;;AAGD;ERxBE,eACC;EAED,gBACC;;;AA7BF;EANE;;AAQD;EAFD;IANE;IAUA;;;ASNH;EACC;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;ETCC,eACC;EAED,gBACC;;ASFF;EACC;;;ACtCF;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;EAEA;EAEA;EdzBC,eACC;EAED,gBACC;EcwBF;EACA;;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;EffC,eACC;EAED,gBACC;;;AeiBF;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;EjBPC,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;;;AnBFF;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;EACA;;AAEA;EACC;;;ArBAF;EANE;EAAA;EAAA;EAAA;EAAA;EAAA;;AAQD;EAFD;IANE;IAAA;IAAA;IAAA;IAAA;IAAA;IAUA;;;AsBcH;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;EtBvCE,eACC;EAED,gBACC;;;AA7BF;EANE;EAAA;EAAA;EAAA;;AAQD;EAFD;IANE;IAAA;IAAA;IAAA;IAUA;;;AuBMH;EACC;EACA;EACA;EAEA;EAEA;EvBeC,eACC;EAED,gBACC;EuBjBF;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;EACA;;;AAIF;EACC;;;AC/CD;EACC;;AAEA;EAEC;EACA;EACA;EACA;;;AxBED;EANE;;AAQD;EAFD;IANE;IAUA;;;AyBNH;EACC;;;AAGD;EACC;;;ACbD;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;;AAEA;EACC;;AAED;EACC;;;AAIF;EACC;EACA;;AAEA;EACC;;AAED;EACC;;;ACpBF;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,gBACC;;;AAIF;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;EACC;EACA;EACA;;;AAGD;EvBpDC,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.26",
+	"version": "0.1.28",
 	"type": "module",
 	"main": "./dist/index.js",
 	"sideEffects": false,

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,10 @@ export interface Theme {
 	scroll_view_indicator_end?: string;
 	scroll_view_indicator_visible?: string;
 
+	separated_column?: string;
+	separated_row?: string;
+	has_separator?: string;
+
 	slider_host?: string;
 
 	tab_handle?: string;
@@ -139,7 +144,6 @@ export interface Theme {
 	tab_list?: string;
 	tab_list_padded?: string;
 	tab_panel?: string;
-	tab_panel_padded?: string;
 
 	text_input?: 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/scroll-view.tsx

@@ -3,6 +3,8 @@ import { debounceEvent } from "../common/events.js";
 import { THEME } from "../common/theme.js";
 import { axisEquals, DOWN, getBlockStart, getSize, RIGHT, UP, WritingMode } from "../common/writing-mode.js";
 
+const DEBOUNCE_DELAY = 100;
+
 export function ScrollView(props: {
 	class?: ClassValue;
 	style?: StyleValue;
@@ -50,7 +52,7 @@ export function ScrollView(props: {
 				overflow: () => vertical.value ? "hidden auto" : "auto hidden",
 			}
 		]}
-		on:scroll={[debounceEvent(100, () => updateIndicators()), { passive: true }]}
+		on:scroll={[debounceEvent(DEBOUNCE_DELAY, () => updateIndicators()), { passive: true }]}
 		tabindex="0"
 	>
 		{content}
@@ -79,14 +81,15 @@ export function ScrollView(props: {
 		]} />
 	</div> as HTMLElement;
 
-	const rootObserver = new ResizeObserver(() => {
+	const rootObserver = new ResizeObserver(debounceEvent(DEBOUNCE_DELAY, () => {
 		const blockStart = getBlockStart(getComputedStyle(root).writingMode as WritingMode || "horizontal-tb");
 		vertical.value ??= axisEquals(blockStart, UP);
 		updateIndicators(blockStart);
-	});
+	}));
 	rootObserver.observe(root);
 	teardown(() => rootObserver.disconnect());
 
+	const intersectUpdateIndicators = debounceEvent(DEBOUNCE_DELAY, updateIndicators);
 	const contentObserver = new IntersectionObserver(() => {
 		const rootRect = root.getBoundingClientRect();
 		const contentRect = content.getBoundingClientRect();
@@ -95,7 +98,7 @@ export function ScrollView(props: {
 		const dir = isVertical ? RIGHT : UP;
 		scrollbarComp.value = Math.max(0, getSize(rootRect, dir) - getSize(contentRect, dir));
 		vertical.value ??= isVertical;
-		updateIndicators(blockStart);
+		intersectUpdateIndicators(blockStart);
 	}, { root, rootMargin: "0px 0px 0px 0px", threshold: 1 });
 	contentObserver.observe(content);
 	teardown(() => contentObserver.disconnect());

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>;
+}