@rvx/ui 0.1.22 → 0.1.25

package/dist/common/theme.d.ts

@@ -21,6 +21,9 @@ export declare const THEME: Context<Theme | undefined>;
  * ```
  */
 export interface Theme {
+    breadcrumbs?: string;
+    breadcrumb_item?: string;
+    breadcrumb_separator?: string;
     button?: string;
     button_default?: string;
     button_primary?: string;
@@ -83,6 +86,7 @@ export interface Theme {
     notification_warning?: string;
     notification_danger?: string;
     page?: string;
+    page_center_block?: string;
     page_scrollbar_comp?: string;
     page_content_col?: string;
     page_content?: string;

package/dist/components/breadcrumbs.d.ts

@@ -0,0 +1,11 @@
+import { ClassValue, Expression, StyleValue } from "rvx";
+import { Action } from "../common/events.js";
+export interface Breadcrumb {
+    label: unknown;
+    action?: Action;
+}
+export declare function Breadcrumbs(props: {
+    items: Expression<Breadcrumb[]>;
+    class?: ClassValue;
+    style?: StyleValue;
+}): unknown;

package/dist/components/breadcrumbs.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "rvx/jsx-runtime";
+import { For, Inject, Show, SVG, XMLNS } from "rvx";
+import { THEME } from "../common/theme.js";
+import { Link } from "./link.js";
+export function Breadcrumbs(props) {
+    const theme = THEME.current;
+    return _jsx("div", { class: [
+            theme?.breadcrumbs,
+            props.class,
+        ], style: props.style, children: _jsx(For, { each: props.items, children: (item, index) => {
+                return _jsxs("div", { class: theme?.breadcrumb_item, children: [_jsx(Show, { when: () => index() !== 0, children: () => _jsx("span", { class: theme?.breadcrumb_separator, children: _jsx(Inject, { context: XMLNS, value: SVG, children: () => _jsx("svg", { viewBox: "0 0 8 16", preserveAspectRatio: "none", children: _jsx("path", { d: "M2,14 L6,2", "stroke-width": "1.75", "stroke-linecap": "round" }) }) }) }) }), item.action
+                            ? _jsx(Link, { action: item.action, children: item.label })
+                            : _jsx("span", { children: item.label })] });
+            } }) });
+}
+//# sourceMappingURL=breadcrumbs.js.map

package/dist/components/breadcrumbs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbs.js","sourceRoot":"","sources":["../../src/components/breadcrumbs.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA0B,GAAG,EAAE,MAAM,EAAE,IAAI,EAAc,GAAG,EAAE,KAAK,EAAE,MAAM,KAAK,CAAC;AAExF,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAOjC,MAAM,UAAU,WAAW,CAAC,KAI3B;IACA,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC;IAC5B,OAAO,cACN,KAAK,EAAE;YACN,KAAK,EAAE,WAAW;YAClB,KAAK,CAAC,KAAK;SACX,EACD,KAAK,EAAE,KAAK,CAAC,KAAK,YAElB,KAAC,GAAG,IAAC,IAAI,EAAE,KAAK,CAAC,KAAK,YACpB,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;gBAChB,OAAO,eAAK,KAAK,EAAE,KAAK,EAAE,eAAe,aACxC,KAAC,IAAI,IAAC,IAAI,EAAE,GAAG,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,YAC7B,GAAG,EAAE,CAAC,eAAM,KAAK,EAAE,KAAK,EAAE,oBAAoB,YAC9C,KAAC,MAAM,IAAC,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,YAChC,GAAG,EAAE,CAAC,cAAK,OAAO,EAAC,UAAU,EAAC,mBAAmB,EAAC,MAAM,YACxD,eAAM,CAAC,EAAC,YAAY,kBAAc,MAAM,oBAAgB,OAAO,GAAG,GAC7D,GACE,GACH,GACD,EACN,IAAI,CAAC,MAAM;4BACX,CAAC,CAAC,KAAC,IAAI,IAAC,MAAM,EAAE,IAAI,CAAC,MAAM,YACzB,IAAI,CAAC,KAAK,GACL;4BACP,CAAC,CAAC,yBACA,IAAI,CAAC,KAAK,GACL,IAEH,CAAC;YACR,CAAC,GACI,GACD,CAAC;AACR,CAAC"}

package/dist/components/page.d.ts

@@ -1,6 +1,7 @@
 import { ClassValue, Expression, StyleValue } from "rvx";
 export declare function Page(props: {
     inlineSize?: Expression<string | undefined>;
+    centerBlock?: Expression<boolean>;
     role?: Expression<string | undefined>;
     id?: Expression<string | undefined>;
     class?: ClassValue;

package/dist/components/page.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "rvx/jsx-runtime";
+import { map } from "rvx";
 import { THEME } from "../common/theme.js";
 import { Column } from "./column.js";
 export function Page(props) {
@@ -6,6 +7,7 @@ export function Page(props) {
     return _jsxs("div", { role: props.role, id: props.id, class: [
             props.class,
             theme?.page,
+            map(props.centerBlock, v => v ? theme?.page_center_block : undefined),
         ], style: [
             props.style,
             {

package/dist/components/page.js.map

@@ -1 +1 @@
-{"version":3,"file":"page.js","sourceRoot":"","sources":["../../src/components/page.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,MAAM,UAAU,IAAI,CAAC,KAOpB;IACA,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC;IAC5B,OAAO,eACN,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,KAAK,EAAE;YACN,KAAK,CAAC,KAAK;YACX,KAAK,EAAE,IAAI;SACX,EACD,KAAK,EAAE;YACN,KAAK,CAAC,KAAK;YACX;gBACC,oBAAoB,EAAE,KAAK,CAAC,UAAU;aACtC;SACD,aAED,cAAK,KAAK,EAAE,KAAK,EAAE,mBAAmB,GAAI,EAC1C,cAAK,KAAK,EAAE,KAAK,EAAE,gBAAgB,YAClC,KAAC,MAAM,IAAC,KAAK,EAAE,KAAK,EAAE,YAAY,YAChC,KAAK,CAAC,QAAQ,GACP,GACJ,IACD,CAAC;AACR,CAAC"}
+{"version":3,"file":"page.js","sourceRoot":"","sources":["../../src/components/page.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA0B,GAAG,EAAc,MAAM,KAAK,CAAC;AAC9D,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,MAAM,UAAU,IAAI,CAAC,KAQpB;IACA,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC;IAC5B,OAAO,eACN,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,KAAK,EAAE;YACN,KAAK,CAAC,KAAK;YACX,KAAK,EAAE,IAAI;YACX,GAAG,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAAC;SACrE,EACD,KAAK,EAAE;YACN,KAAK,CAAC,KAAK;YACX;gBACC,oBAAoB,EAAE,KAAK,CAAC,UAAU;aACtC;SACD,aAED,cAAK,KAAK,EAAE,KAAK,EAAE,mBAAmB,GAAI,EAC1C,cAAK,KAAK,EAAE,KAAK,EAAE,gBAAgB,YAClC,KAAC,MAAM,IAAC,KAAK,EAAE,KAAK,EAAE,YAAY,YAChC,KAAK,CAAC,QAAQ,GACP,GACJ,IACD,CAAC;AACR,CAAC"}

package/dist/index.d.ts

@@ -3,6 +3,7 @@ export * from "./common/events.js";
 export * from "./common/theme.js";
 export * from "./common/types.js";
 export * from "./common/writing-mode.js";
+export * from "./components/breadcrumbs.js";
 export * from "./components/button.js";
 export * from "./components/card.js";
 export * from "./components/checkbox.js";

package/dist/index.js

@@ -3,6 +3,7 @@ export * from "./common/events.js";
 export * from "./common/theme.js";
 export * from "./common/types.js";
 export * from "./common/writing-mode.js";
+export * from "./components/breadcrumbs.js";
 export * from "./components/button.js";
 export * from "./components/card.js";
 export * from "./components/checkbox.js";

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,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,0BAA0B,CAAC;AACzC,cAAc,+BAA+B,CAAC;AAC9C,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,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sBAAsB,CAAC;AACrC,cAAc,kCAAkC,CAAC;AACjD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,0BAA0B,CAAC;AACzC,cAAc,6BAA6B,CAAC;AAC5C,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,0BAA0B,CAAC;AACzC,cAAc,+BAA+B,CAAC;AAC9C,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,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sBAAsB,CAAC;AACrC,cAAc,kCAAkC,CAAC;AACjD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uBAAuB,CAAC"}

package/dist/theme.module.css

@@ -4,6 +4,10 @@
   line-height: 1;
   --accent: rgb(0, 192, 255);
   accent-color: var(--accent);
+  --page-pad-block-start: 2.2857142857rem;
+  --page-pad-inline-start: 2.2857142857rem;
+  --page-pad-block-end: 2.2857142857rem;
+  --page-pad-inline-end: 2.2857142857rem;
   --content-column-gap: 1.7142857143rem;
   --content-row-gap: 1.7142857143rem;
   --content-radius: 0.5714285714rem;
@@ -71,6 +75,42 @@ body {
   background-color: rgba(0, 150, 200, 0.6);
 }
 
+@media (prefers-color-scheme: dark) {
+  :root {
+    --breadcrumb-separator: rgb(120, 120, 120);
+    color-scheme: dark;
+  }
+}
+.breadcrumbs {
+  flex-wrap: wrap;
+  column-gap: var(--control-column-gap);
+  row-gap: var(--control-row-gap);
+}
+
+.breadcrumbs, .breadcrumb_item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  column-gap: var(--control-column-gap);
+  row-gap: var(--control-row-gap);
+}
+
+.breadcrumb_item {
+  line-height: calc(1em + var(--line-gap));
+  margin-block: calc(var(--line-gap) / -2);
+}
+
+.breadcrumb_separator {
+  block-size: calc(1em + var(--line-gap));
+  display: block;
+  position: relative;
+}
+
+.breadcrumb_separator svg {
+  block-size: 100%;
+  stroke: var(--breadcrumb-separator);
+}
+
 @media (prefers-color-scheme: dark) {
   :root {
     --button-default-bg: rgb(64, 64, 64);
@@ -443,7 +483,7 @@ body {
   background-color: var(--dialog-container-bg);
   display: grid;
   grid-template-columns: 1fr minmax(auto, var(--dialog-inline-size)) 1fr;
-  grid-template-rows: 3fr minmax(auto, var(--dialog-block-size)) 4fr;
+  grid-template-rows: 5fr minmax(auto, var(--dialog-block-size)) 7fr;
   overflow: auto;
   transition: opacity var(--layout-transition);
   opacity: 0;
@@ -737,11 +777,24 @@ h6.heading {
 }
 
 .page {
-  margin: 2rem;
+  padding-block: var(--page-pad-block-start) var(--page-pad-block-end);
+  padding-inline: var(--page-pad-inline-start) var(--page-pad-inline-end);
   display: flex;
+  flex-direction: row;
   justify-content: center;
 }
 
+.page_center_block {
+  flex-grow: 1;
+}
+.page_center_block > .page_content_col {
+  display: grid;
+  grid-template-rows: 5fr auto 7fr;
+}
+.page_center_block > .page_content_col > .page_content {
+  grid-row: 2;
+}
+
 .page_scrollbar_comp {
   flex-grow: 1;
   flex-basis: 0;
@@ -751,11 +804,12 @@ h6.heading {
 .page_content_col {
   flex-grow: 1;
   max-inline-size: var(--page-inline-size);
-  flex-basis: calc(var(--page-inline-size) - var(--scrollbar-comp, 0));
+  flex-basis: calc(var(--page-inline-size) - var(--scrollbar-comp, 0px));
 }
 
 .page_content {
-  --scrollbar-size: 0rem;
+  --scrollbar-comp: unset;
+  --page-inline-size: unset;
 }
 
 @media (prefers-color-scheme: dark) {

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/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;EAEA;EACA;EACA;EACA;EACA;ECOA;EACA;EACA;EACA;EDPA;EACA;ECGA;EACA;EACA;EACA;EDHA;EACA;EACA;EACA;EACA;EACA;ECLA;EACA;EACA;EACA;EDKA;EAEA;EAEA;EAEA;EAEA;EACA;EAEA;EACA;EAEA;;;ACrCC;EAFD;IANE;IAAA;IAAA;IAAA;IAUA;;;ADqDH;EACC;EACA;EAEA;;AACA;EALD;IAME;;;;AAIF;EACC;EACA;EACA;EACA;;;AAGD;EACC;;;ACzEC;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;;AAEA;EFYC,eACC;EAED,gBACC;;;AEVF;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;ELAA,eACC;EAED,gBACC;;;AKVF;EACC;;AACA;EACC;;AAGD;ELAA,eACC;EAED,gBACC;;;AKVF;EACC;;AACA;EACC;;AAGD;ELAA,eACC;EAED,gBACC;;;AMvCH;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;EAEA;EACA;;;AAGD;EACC;;AACA;EACC;;;AAIF;EACC;EACA;;AACA;EACC;;;AAIF;EACC;IACC;;;AAIF;EACC;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EP5BC,eACC;EAED,gBACC;;;AO4BH;EACC;EACA;EACA;EACA;;;AAGD;EPvCE,eACC;EAED,gBACC;;;AA3BD;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;;;AZTA;EAFD;IANE;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAUA;;;AaiBH;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EAEA;EbhBC,eACC;EAED,gBACC;EaeF;EACA;;AAGA;EACC;EACA;;AAGD;EAEC;EACA;;AAGD;EACC;EACA;;;AAIF;EACC;EACA;EACA;EACA;;;AbnEC;EAFD;IANE;IAAA;IAAA;IAAA;IAAA;IAAA;IAUA;;;AcSH;EACC;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;;AAEA;EdbC,eACC;EAED,gBACC;;;AceF;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;ACvDF;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;;;AfPC;EAFD;IANE;IAAA;IAAA;IAUA;;;AgBDH;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;EhBnBC,eACC;EAED,gBACC;;;AiBvCH;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;;;AlBAD;EAFD;IANE;IAAA;IAUA;;;AmBJH;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;;;ApBED;EAFD;IANE;IAAA;IAAA;IAAA;IAAA;IAAA;IAUA;;;AqBQH;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;ErBjCE,eACC;EAED,gBACC;;;AA3BD;EAFD;IANE;IAAA;IAAA;IAAA;IAUA;;;AsBEH;EACC;EACA;EACA;EAEA;EAEA;EtBmBC,eACC;EAED,gBACC;EsBrBF;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;EACA;;;AAIF;EACC;;;AC3CD;EACC;;AAEA;EAEC;EACA;EACA;EACA;;;AvBIA;EAFD;IANE;IAUA;;;AwBPH;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/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"}

package/package.json

@@ -12,7 +12,7 @@
 		"rvx"
 	],
 	"license": "MIT",
-	"version": "0.1.22",
+	"version": "0.1.25",
 	"type": "module",
 	"main": "./dist/index.js",
 	"sideEffects": false,

package/src/common/theme.tsx

@@ -23,6 +23,10 @@ export const THEME = new Context<Theme | undefined>(undefined);
  * ```
  */
 export interface Theme {
+	breadcrumbs?: string;
+	breadcrumb_item?: string;
+	breadcrumb_separator?: string;
+
 	button?: string;
 	button_default?: string;
 	button_primary?: string;
@@ -99,6 +103,7 @@ export interface Theme {
 	notification_danger?: string;
 
 	page?: string;
+	page_center_block?: string;
 	page_scrollbar_comp?: string;
 	page_content_col?: string;
 	page_content?: string;

package/src/components/breadcrumbs.tsx

@@ -0,0 +1,48 @@
+import { ClassValue, Expression, For, Inject, Show, StyleValue, SVG, XMLNS } from "rvx";
+import { Action } from "../common/events.js";
+import { THEME } from "../common/theme.js";
+import { Link } from "./link.js";
+
+export interface Breadcrumb {
+	label: unknown;
+	action?: Action;
+}
+
+export function Breadcrumbs(props: {
+	items: Expression<Breadcrumb[]>;
+	class?: ClassValue;
+	style?: StyleValue;
+}) {
+	const theme = THEME.current;
+	return <div
+		class={[
+			theme?.breadcrumbs,
+			props.class,
+		]}
+		style={props.style}
+	>
+		<For each={props.items}>
+			{(item, index) => {
+				return <div class={theme?.breadcrumb_item}>
+					<Show when={() => index() !== 0}>
+						{() => <span class={theme?.breadcrumb_separator}>
+							<Inject context={XMLNS} value={SVG}>
+								{() => <svg viewBox="0 0 8 16" preserveAspectRatio="none">
+									<path d="M2,14 L6,2" stroke-width="1.75" stroke-linecap="round" />
+								</svg>}
+							</Inject>
+						</span>}
+					</Show>
+					{item.action
+						? <Link action={item.action}>
+							{item.label}
+						</Link>
+						: <span>
+							{item.label}
+						</span>
+					}
+				</div>;
+			}}
+		</For>
+	</div>;
+}

package/src/components/page.tsx

@@ -1,9 +1,10 @@
-import { ClassValue, Expression, StyleValue } from "rvx";
+import { ClassValue, Expression, map, StyleValue } from "rvx";
 import { THEME } from "../common/theme.js";
 import { Column } from "./column.js";
 
 export function Page(props: {
 	inlineSize?: Expression<string | undefined>;
+	centerBlock?: Expression<boolean>;
 	role?: Expression<string | undefined>;
 	id?: Expression<string | undefined>;
 	class?: ClassValue;
@@ -17,6 +18,7 @@ export function Page(props: {
 		class={[
 			props.class,
 			theme?.page,
+			map(props.centerBlock, v => v ? theme?.page_center_block : undefined),
 		]}
 		style={[
 			props.style,

package/src/index.tsx

@@ -3,6 +3,7 @@ export * from "./common/events.js";
 export * from "./common/theme.js";
 export * from "./common/types.js";
 export * from "./common/writing-mode.js";
+export * from "./components/breadcrumbs.js";
 export * from "./components/button.js";
 export * from "./components/card.js";
 export * from "./components/checkbox.js";

package/src/theme/base.scss

@@ -15,6 +15,8 @@ $root-size: 14px;
 	--accent: rgb(0, 192, 255);
 	accent-color: var(--accent);
 
+	@include common.define-quad(page-pad, px(32), px(32));
+
 	--content-column-gap: #{px(24)};
 	--content-row-gap: #{px(24)};
 	--content-radius: #{px(8)};

package/src/theme/components/breadcrumbs.scss

@@ -0,0 +1,37 @@
+@use "../common";
+
+@include common.theme((
+	breadcrumb-separator: (
+		dark: rgb(120, 120, 120),
+	),
+));
+
+.breadcrumbs {
+	flex-wrap: wrap;
+	column-gap: var(--control-column-gap);
+	row-gap: var(--control-row-gap);
+}
+
+.breadcrumbs, .breadcrumb_item {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	column-gap: var(--control-column-gap);
+	row-gap: var(--control-row-gap);
+}
+
+.breadcrumb_item {
+	line-height: calc(1em + var(--line-gap));
+	margin-block: calc(var(--line-gap) / -2);
+}
+
+.breadcrumb_separator {
+	block-size: calc(1em + var(--line-gap));
+	display: block;
+	position: relative;
+}
+
+.breadcrumb_separator svg {
+	block-size: 100%;
+	stroke: var(--breadcrumb-separator);
+}

package/src/theme/components/dialog.scss

@@ -23,7 +23,7 @@
 
 	display: grid;
 	grid-template-columns: 1fr minmax(auto, var(--dialog-inline-size)) 1fr;
-	grid-template-rows: 3fr minmax(auto, var(--dialog-block-size)) 4fr;
+	grid-template-rows: 5fr minmax(auto, var(--dialog-block-size)) 7fr;
 
 	overflow: auto;
 

package/src/theme/components/page.scss

@@ -1,10 +1,30 @@
 
 .page {
-	margin: 2rem;
+	padding-block:
+		var(--page-pad-block-start)
+		var(--page-pad-block-end);
+	padding-inline:
+		var(--page-pad-inline-start)
+		var(--page-pad-inline-end);
+
 	display: flex;
+	flex-direction: row;
 	justify-content: center;
 }
 
+.page_center_block {
+	flex-grow: 1;
+
+	& > .page_content_col {
+		display: grid;
+		grid-template-rows: 5fr auto 7fr;
+
+		& > .page_content {
+			grid-row: 2;
+		}
+	}
+}
+
 .page_scrollbar_comp {
 	flex-grow: 1;
 	flex-basis: 0;
@@ -14,9 +34,10 @@
 .page_content_col {
 	flex-grow: 1;
 	max-inline-size: var(--page-inline-size);
-	flex-basis: calc(var(--page-inline-size) - var(--scrollbar-comp, 0));
+	flex-basis: calc(var(--page-inline-size) - var(--scrollbar-comp, 0px));
 }
 
 .page_content {
-	--scrollbar-size: 0rem;
+	--scrollbar-comp: unset;
+	--page-inline-size: unset;
 }

package/src/theme/theme.scss

@@ -1,5 +1,6 @@
 @forward "base";
 
+@forward "components/breadcrumbs";
 @forward "components/button";
 @forward "components/card";
 @forward "components/checkbox";