@rvx/ui 0.1.22 → 0.1.24

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;

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/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

@@ -71,6 +71,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);

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;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;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;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;;;AhBPC;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.24",
 	"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;

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/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/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/theme.scss

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