elbe-ui 0.2.46 → 0.2.52

package/dist/elbe.css

@@ -112,7 +112,7 @@ body,
 .elbe .margined-none {
   margin: 0rem;
 }
-.elbe .sharp {
+.elbe .sharp.sharp.sharp {
   border-radius: 0;
 }
 .elbe .rounded,
@@ -129,7 +129,6 @@ body,
 .elbe button {
   border-radius: var(--g-radius);
   border-color: inherit;
-  overflow: hidden;
 }
 .elbe .round {
   border-radius: 50%;
@@ -166,7 +165,7 @@ body,
 .elbe body:has(dialog[open=""]) {
   overflow: hidden;
 }
-.elbe .transparent {
+.elbe .transparent.transparent {
   background-color: transparent;
 }
 .elbe .disabled {
@@ -238,6 +237,15 @@ body,
     transform: rotate(359deg);
   }
 }
+.elbe.high_vis a {
+  text-decoration: underline;
+}
+.elbe a {
+  text-decoration: none;
+}
+.elbe a:hover {
+  text-decoration: underline;
+}
 .elbe .column, .elbe dialog,
 .elbe .row,
 .elbe .header,
@@ -354,6 +362,9 @@ body,
   .elbe .row-resp {
     flex-direction: column;
   }
+  .elbe .resp-reversed {
+    flex-direction: column-reverse;
+  }
   .elbe .if-wide {
     display: none;
   }
@@ -380,7 +391,7 @@ body,
 .elbe .borderless {
   border: none;
 }
-.elbe .bordered {
+.elbe .bordered.bordered.bordered {
   border: var(--g-border-width) solid var(--c-context-border);
 }
 .elbe button {
@@ -421,6 +432,11 @@ body,
   min-width: 12rem;
   width: 100%;
 }
+.elbe.dark dialog[open=""] > div {
+  border-width: var(--g-border-width);
+  border-style: solid;
+  border-color: var(--c-context-border);
+}
 .elbe dialog {
   z-index: 100;
   position: fixed;
@@ -460,21 +476,22 @@ body,
   left: 0;
   top: 0;
   display: flex;
-  font-size: larger;
+  font-size: 1.25rem;
   font-weight: 900;
   border-width: 20px;
   border-style: solid;
   border-width: 0 0 2px 0;
-  padding: 0 0.75rem;
-  background-color: color-mix(in srgb, var(--c-context-back) 50%, transparent);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
+  padding: 0 0.5rem;
   z-index: 20;
   box-sizing: border-box;
-  height: 4.5rem;
   justify-content: space-between;
   align-items: center;
 }
+.elbe .frosted {
+  background-color: color-mix(in srgb, var(--c-context-back) 50%, transparent);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+}
 .elbe input[type=text],
 .elbe input[type=number],
 .elbe input[type=password],
@@ -493,6 +510,16 @@ body,
   resize: vertical;
   min-height: 3rem;
 }
+.elbe.high_vis input[type=range]::-webkit-slider-thumb {
+  border-width: var(--g-border-width);
+  border-style: solid;
+  border-color: var(--c-context-back);
+}
+.elbe.high_vis input[type=range]::-moz-range-thumb {
+  border-width: var(--g-border-width);
+  border-style: solid;
+  border-color: var(--c-context-back);
+}
 .elbe input[type=range] {
   -webkit-appearance: none;
   appearance: none;
@@ -532,11 +559,11 @@ body,
   appearance: none;
   margin: 0;
   font: inherit;
-  color: black;
   width: 1.8rem;
   height: 1.8rem;
-  border: 0.16em solid var(--c-context-border);
-  border-radius: 25%;
+  border-width: var(--g-border-width);
+  border-radius: var(--g-radius);
+  border-style: solid;
   transform: translateY(-0.075em);
   display: grid;
   place-content: center;
@@ -551,13 +578,9 @@ body,
   transform-origin: center;
   transition: 0.2s all ease-in-out;
 }
-.elbe input[type=checkbox]:checked {
-  border-color: var(--c-accent);
-  background: color-mix(in srgb, var(--c-accent) 20%, transparent);
-}
 .elbe input[type=checkbox]:checked::before {
   transform: scale(1);
-  background-color: var(--c-accent);
+  background-color: var(--c-context-front);
 }
 .elbe input[type=checkbox]:focus {
   outline: max(2px, 0.15em) solid var(--c-accent);
@@ -567,6 +590,25 @@ body,
   cursor: not-allowed;
   border: 0.16em solid var(--c-context-border);
 }
+.elbe.high_vis div[data-type=elbe_progress_bar] > * {
+  outline-width: var(--g-border-width);
+  outline-style: solid;
+  outline-color: var(--c-context-back);
+}
+.elbe hr {
+  border: none;
+  border-top: var(--g-border-width) solid var(--c-context-border);
+  width: 100%;
+}
+.elbe :focus-visible {
+  outline: 0.15rem solid var(--c-accent);
+}
+.elbe :active {
+  outline: none;
+}
+.elbe.dark :focus-visible {
+  outline: 0.15rem solid white;
+}
 
 .toast {
   position: fixed;

package/dist/elbe.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../style/elbe.scss","../style/_base.scss","../style/_flex.scss","../style/_components.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAOQ;AAMR;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EAGA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;;AAGF;AAAA;AAAA;EAGE;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;;;AAIF;AC3DA;AAoBA;AA6DA;AAUA;AAaA;AA8BA;AC9GA;AAqBA;AAYA;AAkBA;AAqBA;AC2GA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AFzMA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAMF;EACE;;AAEF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEE;EACA;EACA;;AAEF;EACE;;AAGF;AAAA;EAEE;;AAGF;EACE;;AAEF;EACE;;AAGF;EACE;EACA;;AACA;EACE;;AAIJ;EACE;;AAGF;EACE;;AAEF;EACE;;AAEF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAKF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEE;EACA;;AAOF;EACE;;AAGF;EAEE;EACA;EACA;;AAKF;AAAA;EAEE;;AAEF;AAAA;AAAA;AAAA;EAEE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;AAKF;EACE;EACA;EACA;EACA;;AAGF;EACE;IACE;;EAEF;IACE;;;ACpJJ;AAAA;AAAA;AAAA;AAAA;EAGE;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAKF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAKF;EACE;;AAIA;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AAMJ;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAKF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAKF;EACE;IACE;;EAEF;IACE;;;AAIJ;EACE;IACE;;;AAIJ;EACE;;AClHF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAIF;EAIE;EACA;EACA;EACA;EACA;EACA;EACA;AAMA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAJA;EACE;;AAoBJ;EACE;EACA;EACA;;AAGF;EAGE;EACA;EACA;EACA;;AAGF;EAKE;EAEA;EACA;EACA;EACA;EACA;EAEA;EAEA;EAEA;EAEA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;AACA;EACE;;AAKN;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EAGC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACC;EAGD;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAKD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAWE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAaF;EACE;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EA5BF;EACA;EACA;EACA;EACA;EACA;EACA;;AA0BA;EAhCA;EACA;EACA;EACA;EACA;EACA;EACA;;AAsEF;EACE;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;;AAIF;EACE;EACA;;AACA;EACE;EACA;;AAMJ;EACE;EACA;;AAGF;EACE;EACA;;;AHhOF;EAIE;EACA;EACA;EACA;EACA;EACA;EACA","file":"elbe.css"}
+{"version":3,"sourceRoot":"","sources":["../style/elbe.scss","../style/_base.scss","../style/_flex.scss","../style/_components.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAOQ;AAMR;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EAGA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;;AAGF;AAAA;AAAA;EAGE;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;;;AAIF;AC3DA;AAoBA;AA6DA;AAUA;AAaA;AA8BA;AC9GA;AAqBA;AAYA;AAkBA;AAqBA;ACkIA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AFhOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAMF;EACE;;AAEF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEE;EACA;;AAGF;EACE;;AAGF;AAAA;EAEE;;AAGF;EACE;;AAEF;EACE;;AAGF;EACE;EACA;;AACA;EACE;;AAIJ;EACE;;AAGF;EACE;;AAEF;EACE;;AAEF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAKF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEE;EACA;;AAOF;EACE;;AAGF;EAEE;EACA;EACA;;AAKF;AAAA;EAEE;;AAEF;AAAA;AAAA;AAAA;EAEE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;AAKF;EACE;EACA;EACA;EACA;;AAGF;EACE;IACE;;EAEF;IACE;;;AAKJ;EACE;;AAEF;EACE;;AACA;EACE;;AC/JJ;AAAA;AAAA;AAAA;AAAA;EAGE;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAKF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAKF;EACE;;AAIA;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AAMJ;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAKF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAKF;EACE;IACE;;EAGF;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;;AAIJ;EACE;;ACvHF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAIF;EAIE;EACA;EACA;EACA;EACA;EACA;EACA;AAMA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAJA;EACE;;AAoBJ;EACE;EACA;EACA;;AAGF;EAGE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EAKE;EAEA;EACA;EACA;EACA;EACA;EAEA;EAEA;EAEA;EAEA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;AACA;EACE;;AAKN;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EAGC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACC;EAGD;EAEA;EAEA;EACA;;AAGD;EACE;EACD;EACA;;AAKD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAWE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAcA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EA1CF;EACA;EACA;EACA;EACA;EACA;EACA;;AAwCA;EA9CA;EACA;EACA;EACA;EACA;EACA;EACA;;AAoFF;EACE;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;;AAIF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAKF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;AH/PA;EACE;;AAEF;EACG;;AAGH;EACE;;;AAMJ;EAIE;EACA;EACA;EACA;EACA;EACA;EACA","file":"elbe.css"}

package/dist/index.d.ts

@@ -12,7 +12,9 @@ export * from "./ui/components/button/button";
 export * from "./ui/components/button/choose_button";
 export * from "./ui/components/button/icon_button";
 export * from "./ui/components/button/toggle_button";
+export * from "./ui/components/layout/alignment";
 export * from "./ui/components/layout/flex";
+export * from "./ui/components/layout/header";
 export * from "./ui/components/layout/scaffold";
 export * from "./ui/components/layout/scroll";
 export * from "./ui/components/layout/spaced";
@@ -20,13 +22,17 @@ export * from "./ui/components/input/checkbox";
 export * from "./ui/components/input/input_field";
 export * from "./ui/components/input/range";
 export * from "./ui/components/input/select";
+export * from "./ui/components/input/switch";
 export * from "./ui/components/input/text_area";
 export * from "./ui/components/badge";
+export * from "./ui/components/banner";
 export * from "./ui/components/dialog";
 export * from "./ui/components/error_view";
+export * from "./ui/components/progress_bar";
 export * from "./ui/components/spinner";
 export * from "./ui/components/text";
 export * from "./ui/components/dev/todo";
+export * from "./ui/theme/seed";
 export * from "./ui/theme/theme";
 declare function None({}: {}): import("preact").JSX.Element;
 export declare const Icons: {

package/dist/index.js

@@ -15,7 +15,9 @@ export * from "./ui/components/button/button";
 export * from "./ui/components/button/choose_button";
 export * from "./ui/components/button/icon_button";
 export * from "./ui/components/button/toggle_button";
+export * from "./ui/components/layout/alignment";
 export * from "./ui/components/layout/flex";
+export * from "./ui/components/layout/header";
 export * from "./ui/components/layout/scaffold";
 export * from "./ui/components/layout/scroll";
 export * from "./ui/components/layout/spaced";
@@ -23,13 +25,17 @@ export * from "./ui/components/input/checkbox";
 export * from "./ui/components/input/input_field";
 export * from "./ui/components/input/range";
 export * from "./ui/components/input/select";
+export * from "./ui/components/input/switch";
 export * from "./ui/components/input/text_area";
 export * from "./ui/components/badge";
+export * from "./ui/components/banner";
 export * from "./ui/components/dialog";
 export * from "./ui/components/error_view";
+export * from "./ui/components/progress_bar";
 export * from "./ui/components/spinner";
 export * from "./ui/components/text";
 export * from "./ui/components/dev/todo";
+export * from "./ui/theme/seed";
 export * from "./ui/theme/theme";
 function None({}) {
     return _jsx("div", { style: { width: "1.5rem", height: "1.5rem" } });

package/dist/ui/components/banner.d.ts

@@ -0,0 +1,12 @@
+import { ElbeAlertKinds, IconChild } from "../..";
+export declare function KindAlertIcon({ kind }: {
+    kind: ElbeAlertKinds;
+}): import("preact").JSX.Element;
+export declare function Banner({ kind, manner, title, onDismiss, dismissIcon, children, }: {
+    kind: ElbeAlertKinds;
+    manner?: "major" | "minor";
+    title?: string;
+    onDismiss?: () => void;
+    dismissIcon?: IconChild;
+    children?: React.ReactNode;
+}): import("preact").JSX.Element;

package/dist/ui/components/banner.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { AlertTriangle, CheckCircle2, CircleHelp, InfoIcon, OctagonAlert, XIcon, } from "lucide-react";
+import { Align, Card, Column, IconButton, Row, Text, } from "../..";
+export function KindAlertIcon({ kind }) {
+    if (kind === "info")
+        return _jsx(InfoIcon, {});
+    if (kind === "warning")
+        return _jsx(AlertTriangle, {});
+    if (kind === "error")
+        return _jsx(OctagonAlert, {});
+    if (kind === "success")
+        return _jsx(CheckCircle2, {});
+    return _jsx(CircleHelp, {});
+}
+export function Banner({ kind, manner = "major", title, onDismiss, dismissIcon = XIcon, children, }) {
+    return (_jsx(Card, { kind: kind, manner: manner, padding: 0, children: _jsxs(Row, { cross: "start", gap: 0, children: [_jsx(Align, { size: 3, children: _jsx(KindAlertIcon, { kind: kind }) }), _jsxs(Column, { gap: 0.5, class: "flex-1", style: { padding: ".9rem 0", paddingRight: onDismiss ? "0" : "1rem" }, children: [title && _jsx(Text, { bold: true, v: title }), children] }), onDismiss && (_jsx(IconButton, { manner: manner, kind: kind, transparent: manner === "minor", ariaLabel: "close", icon: dismissIcon, onTap: onDismiss }))] }) }));
+}

package/dist/ui/components/base/box.d.ts

@@ -8,8 +8,14 @@ export type ElbeProps = {
     tooltip?: string;
     flex?: boolean | number;
     typeLabel?: string;
+    ariaLabel?: string | null;
 };
-export declare function applyProps(p: ElbeProps, classes?: string | null | (string | false | null | undefined)[], style?: React.CSSProperties): {
+export type ActionElbeProps = ElbeProps & {
+    ariaLabel: string | null;
+};
+export declare function applyProps(typeLabel: string, p: ElbeProps, classes?: string | null | (string | false | null | undefined)[], style?: React.CSSProperties): {
+    "aria-label": string | undefined;
+    ariaLabel: string | null;
     "data-type": string | undefined;
     "data-tooltip"?: string | undefined;
     id: string | undefined;
@@ -527,6 +533,8 @@ export declare class Box extends Component<ElbeBoxProps & {
     scheme: ElbeColorSchemes;
 }> {
     static primary: (p: ElbeBoxProps) => import("preact").VNode<import("preact").ClassAttributes<HTMLElement> & {
+        "aria-label": string | undefined;
+        ariaLabel: string | null;
         "data-type": string | undefined;
         "data-tooltip"?: string | undefined;
         id: string | undefined;
@@ -1035,6 +1043,8 @@ export declare class Box extends Component<ElbeBoxProps & {
         };
     }>;
     static secondary: (p: ElbeBoxProps) => import("preact").VNode<import("preact").ClassAttributes<HTMLElement> & {
+        "aria-label": string | undefined;
+        ariaLabel: string | null;
         "data-type": string | undefined;
         "data-tooltip"?: string | undefined;
         id: string | undefined;
@@ -1543,6 +1553,8 @@ export declare class Box extends Component<ElbeBoxProps & {
         };
     }>;
     static inverse: (p: ElbeBoxProps) => import("preact").VNode<import("preact").ClassAttributes<HTMLElement> & {
+        "aria-label": string | undefined;
+        ariaLabel: string | null;
         "data-type": string | undefined;
         "data-tooltip"?: string | undefined;
         id: string | undefined;
@@ -2051,6 +2063,8 @@ export declare class Box extends Component<ElbeBoxProps & {
         };
     }>;
     render(): import("preact").VNode<import("preact").ClassAttributes<HTMLElement> & {
+        "aria-label": string | undefined;
+        ariaLabel: string | null;
         "data-type": string | undefined;
         "data-tooltip"?: string | undefined;
         id: string | undefined;

package/dist/ui/components/base/box.js

@@ -10,17 +10,17 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { Component, h } from "preact";
-export function applyProps(p, classes, style) {
-    var _a;
+export function applyProps(typeLabel, p, classes, style) {
+    var _a, _b, _c, _d;
     if (Array.isArray(classes)) {
         classes = classes.filter((c) => c).join(" ");
     }
-    return Object.assign(Object.assign({ id: p.id, class: `${classes || ""} ${p.class || ""}`, style: Object.assign(Object.assign(Object.assign({}, (style !== null && style !== void 0 ? style : {})), ((_a = p.style) !== null && _a !== void 0 ? _a : {})), (p.flex ? { flex: p.flex === true ? 1 : p.flex } : {})) }, (p.tooltip ? { ["data-tooltip"]: p.tooltip } : {})), { ["data-type"]: p.typeLabel });
+    return Object.assign(Object.assign({ id: p.id, class: `${classes || ""} ${p.class || ""}`, style: Object.assign(Object.assign(Object.assign({}, (style !== null && style !== void 0 ? style : {})), ((_a = p.style) !== null && _a !== void 0 ? _a : {})), (p.flex ? { flex: p.flex === true ? 1 : p.flex } : {})) }, (p.tooltip ? { ["data-tooltip"]: p.tooltip } : {})), { ["aria-label"]: (_b = p.ariaLabel) !== null && _b !== void 0 ? _b : undefined, ariaLabel: (_c = p.ariaLabel) !== null && _c !== void 0 ? _c : null, ["data-type"]: (_d = p.typeLabel) !== null && _d !== void 0 ? _d : (!!typeLabel ? `elbe_${typeLabel}` : undefined) });
 }
 export class Box extends Component {
     render() {
         const _a = this.props, { scheme, mode, padding, margin, children } = _a, elbe = __rest(_a, ["scheme", "mode", "padding", "margin", "children"]);
-        return h("div", applyProps(elbe, [scheme, mode], Object.assign({ padding: `${padding}rem`, margin: `${margin}rem` }, elbe.style)), children);
+        return h("div", applyProps("box", elbe, [scheme, mode], Object.assign({ padding: `${padding}rem`, margin: `${margin}rem` }, elbe.style)), children);
     }
 }
 Box.primary = (p) => new Box(Object.assign(Object.assign({}, p), { scheme: "primary" })).render();

package/dist/ui/components/base/card.d.ts

@@ -1,7 +1,7 @@
 import type { ElbeColorKinds, ElbeColorManners, ElbeColorModes, ElbeColorSchemes } from "../../theme/colors";
 import type { ElbeChildren } from "../../util/util";
 import { type ElbeProps } from "./box";
-export declare function Card({ mode, scheme, kind, manner, padding, margin, onTap, onLongTap, children, ...elbe }: {
+export declare function Card({ mode, scheme, kind, manner, padding, margin, onTap, onLongTap, frosted, bordered, sharp, children, ...elbe }: {
     mode?: ElbeColorModes;
     scheme?: ElbeColorSchemes;
     kind?: ElbeColorKinds;
@@ -10,5 +10,8 @@ export declare function Card({ mode, scheme, kind, manner, padding, margin, onTa
     margin?: number;
     onTap?: () => void;
     onLongTap?: () => void;
+    frosted?: boolean;
+    bordered?: boolean;
+    sharp?: boolean;
     children?: ElbeChildren;
 } & ElbeProps): import("preact").JSX.Element;

package/dist/ui/components/base/card.js

@@ -12,8 +12,17 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "preact/jsx-runtime";
 import { applyProps } from "./box";
 export function Card(_a) {
-    var { mode, scheme = "primary", kind, manner, padding = 1, margin = 0, onTap, onLongTap, children } = _a, elbe = __rest(_a, ["mode", "scheme", "kind", "manner", "padding", "margin", "onTap", "onLongTap", "children"]);
-    return (_jsx("div", Object.assign({}, applyProps(elbe, ["card", mode, scheme, kind, manner], {
+    var { mode, scheme = "primary", kind, manner, padding = 1, margin = 0, onTap, onLongTap, frosted, bordered, sharp, children } = _a, elbe = __rest(_a, ["mode", "scheme", "kind", "manner", "padding", "margin", "onTap", "onLongTap", "frosted", "bordered", "sharp", "children"]);
+    return (_jsx("div", Object.assign({}, applyProps("card", elbe, [
+        "card",
+        mode,
+        scheme,
+        kind,
+        manner,
+        frosted && "frosted",
+        bordered && "bordered",
+        sharp && "sharp",
+    ], {
         padding: `${padding}rem`,
         margin: `${margin}rem`,
     }), { onClick: onTap, onContextMenu: onLongTap, children: children })));

package/dist/ui/components/base/padded.js

@@ -17,7 +17,7 @@ export class Padded extends React.Component {
         super(props);
     }
     render() {
-        return (_jsx("div", Object.assign({}, applyProps(this.props, [], {
+        return (_jsx("div", Object.assign({}, applyProps("padded", this.props, [], {
             paddingTop: `${this.props.top || 0}rem`,
             paddingRight: `${this.props.right || 0}rem`,
             paddingBottom: `${this.props.bottom || 0}rem`,

package/dist/ui/components/button/button.d.ts

@@ -1,9 +1,10 @@
 import { Component } from "preact";
 import type { ElbeColorKinds, ElbeColorManners } from "../../theme/colors";
-import { type ElbeProps } from "../base/box";
+import { ActionElbeProps } from "../base/box";
 import type { IconChild } from "./icon_button";
-export type ButtonProps = ElbeProps & {
+export type ButtonProps = ActionElbeProps & {
     kind?: ElbeColorKinds;
+    transparent?: boolean;
     onTap?: (e: Event) => void;
 } & {
     icon?: IconChild;

package/dist/ui/components/button/button.js

@@ -24,12 +24,14 @@ Button.flat = (p) => _btn(p, "flat");
 Button.plain = (p) => _btn(p, "plain");
 function _btn(_a, manner) {
     var { kind, onTap, icon, label, children } = _a, elbe = __rest(_a, ["kind", "onTap", "icon", "label", "children"]);
-    return label || icon || children ? (_jsxs("button", Object.assign({}, applyProps(elbe, [
+    return label || icon || children ? (_jsxs("button", Object.assign({}, applyProps("button", elbe, [
         "row",
         "gap-half",
         "main-center",
         kind !== null && kind !== void 0 ? kind : (manner != "plain" && "accent"),
         manner,
         !onTap && "disabled",
-    ]), { disabled: !onTap, onClick: (e) => onTap && onTap(e), children: [typeof icon === "function" ? icon({}) : icon, label && _jsx("span", { children: label }), children] }))) : (_ElbeErr("Button requires either an icon and or a label, or a child"));
+    ], {
+        backgroundColor: elbe.transparent ? "transparent" : null,
+    }), { disabled: !onTap, onClick: (e) => onTap && onTap(e), children: [typeof icon === "function" ? icon({}) : icon, label && _jsx("span", { children: label }), children] }))) : (_ElbeErr("Button requires either an icon and or a label, or a child"));
 }

package/dist/ui/components/button/choose_button.d.ts

@@ -4,6 +4,7 @@ export interface ChooseItem<T> {
     value: T;
     label?: string;
     icon?: IconChild;
+    ariaLabel?: string;
 }
 export declare function ChooseButton<T>({ items, value, onChange, kind, column, }: {
     items: ChooseItem<T>[];

package/dist/ui/components/button/choose_button.js

@@ -3,6 +3,9 @@ import { CheckIcon } from "lucide-react";
 import { Spaced } from "../layout/spaced";
 import { Button } from "./button";
 export function ChooseButton({ items, value, onChange, kind, column = false, }) {
-    return (_jsx("div", { class: `${column ? "column" : "row"} gap-none rounded accent minor card padding-none cross-stretch ${!onChange ? "disabled" : ""}`, style: "background: transparent", children: items.map((e) => (_jsxs(Button, { manner: e.value === value ? "minor" : "flat", kind: kind, onTap: onChange && (() => onChange(e.value)), class: `sharp ${column ? "main-between gap-double" : ""}`, children: [_jsxs("div", { class: "row gap-half", children: [typeof e.icon === "function" ? e.icon({}) : e.icon, e.label && _jsx("span", { children: e.label })] }), column &&
-                    (e.value === value ? _jsx(CheckIcon, {}) : _jsx(Spaced, { amount: 1.5 }))] }))) }));
+    return (_jsx("div", { class: `${column ? "column" : "row"} gap-none rounded accent minor card padding-none cross-stretch ${!onChange ? "disabled" : ""}`, style: "background: transparent; overflow: hidden", children: items.map((e) => {
+            var _a, _b;
+            return (_jsxs(Button, { ariaLabel: (_b = (_a = e.ariaLabel) !== null && _a !== void 0 ? _a : e.label) !== null && _b !== void 0 ? _b : null, manner: e.value === value ? "minor" : "flat", kind: kind, onTap: onChange && (() => onChange(e.value)), class: `sharp ${column ? "main-between gap-double" : ""}`, children: [_jsxs("div", { class: "row gap-half", children: [typeof e.icon === "function" ? e.icon({}) : e.icon, e.label && _jsx("span", { children: e.label })] }), column &&
+                        (e.value === value ? _jsx(CheckIcon, {}) : _jsx(Spaced, { amount: 1.5 }))] }));
+        }) }));
 }

package/dist/ui/components/button/icon_button.d.ts

@@ -1,11 +1,12 @@
 import { Component } from "preact";
-import { type ElbeChild, type ElbeColorKinds, type ElbeColorManners, type ElbeProps } from "../../..";
+import { ActionElbeProps, type ElbeChild, type ElbeColorKinds, type ElbeColorManners } from "../../..";
 export type IconChild = ElbeChild | ((_: any) => ElbeChild);
 export type IconButtonProps = {
     icon?: IconChild;
     kind?: ElbeColorKinds;
+    transparent?: boolean;
     onTap?: (e: Event) => void;
-} & ElbeProps;
+} & ActionElbeProps;
 export declare class IconButton extends Component<IconButtonProps & {
     manner?: ElbeColorManners;
 }> {

package/dist/ui/components/button/icon_button.js

@@ -25,7 +25,7 @@ function _btn(_a, manner) {
     var _b;
     var { icon, onTap } = _a, elbe = __rest(_a, ["icon", "onTap"]);
     if (manner === void 0) { manner = "major"; }
-    return (_jsx("button", Object.assign({}, applyProps(elbe, [
+    return (_jsx("button", Object.assign({}, applyProps("icon_button", elbe, [
         "row",
         "main-center",
         "gap-half",
@@ -33,6 +33,7 @@ function _btn(_a, manner) {
         manner,
         !onTap && "disabled",
     ], {
+        backgroundColor: elbe.transparent ? "transparent" : null,
         border: "none",
         borderRadius: "3rem",
         height: "3rem",

package/dist/ui/components/button/toggle_button.d.ts

@@ -1,5 +1,5 @@
 import type { ElbeColorKinds } from "../../theme/colors";
-import { type ElbeProps } from "../base/box";
+import { ActionElbeProps } from "../base/box";
 import type { IconChild } from "./icon_button";
 export declare function ToggleButton({ value, onChange, label, icon, kind, ...elbe }: {
     value: boolean;
@@ -7,4 +7,4 @@ export declare function ToggleButton({ value, onChange, label, icon, kind, ...el
     kind?: ElbeColorKinds;
     label: string;
     icon?: IconChild;
-} & ElbeProps): import("preact").JSX.Element;
+} & ActionElbeProps): import("preact").JSX.Element;

package/dist/ui/components/button/toggle_button.js

@@ -16,5 +16,5 @@ import { Spaced } from "../layout/spaced";
 import { Button } from "./button";
 export function ToggleButton(_a) {
     var { value, onChange, label, icon, kind } = _a, elbe = __rest(_a, ["value", "onChange", "label", "icon", "kind"]);
-    return (_jsxs(Button, Object.assign({ manner: value ? "minor" : "flat", kind: kind, onTap: onChange && (() => onChange(!value)) }, applyProps(elbe, "main-between", { gap: "1.5rem" }), { children: [_jsxs("div", { class: "row gap-half", children: [typeof icon === "function" ? icon({}) : icon, label && _jsx("span", { children: label })] }), value ? _jsx(CheckIcon, {}) : _jsx(Spaced, { amount: 1.5 })] })));
+    return (_jsxs(Button, Object.assign({ manner: value ? "minor" : "flat", kind: kind, onTap: onChange && (() => onChange(!value)) }, applyProps("toggle_button", elbe, "main-between", { gap: "1.5rem" }), { children: [_jsxs("div", { class: "row gap-half", children: [typeof icon === "function" ? icon({}) : icon, label && _jsx("span", { children: label })] }), value ? _jsx(CheckIcon, {}) : _jsx(Spaced, { amount: 1.5 })] })));
 }

package/dist/ui/components/dev/todo.js

@@ -48,17 +48,17 @@ export var ToDo;
     ToDo.Overlay = Overlay;
     function Inline(_a) {
         var { msg } = _a, elbe = __rest(_a, ["msg"]);
-        return (_jsxs("div", Object.assign({}, applyProps(Object.assign(Object.assign({}, elbe), { typeLabel: "todo" }), [], Object.assign(Object.assign({}, _toDoStyle), { display: "inline" })), { children: [_jsx("b", { children: "ToDo: " }), _jsx("span", { style: { fontWeight: "normal" }, children: msg })] })));
+        return (_jsxs("div", Object.assign({}, applyProps("todo", elbe, [], Object.assign(Object.assign({}, _toDoStyle), { display: "inline" })), { children: [_jsx("b", { children: "ToDo: " }), _jsx("span", { style: { fontWeight: "normal" }, children: msg })] })));
     }
     ToDo.Inline = Inline;
     function Block(_a) {
         var { msg, width, height } = _a, elbe = __rest(_a, ["msg", "width", "height"]);
-        return (_jsx("div", Object.assign({}, applyProps(Object.assign(Object.assign({}, elbe), { typeLabel: "todo" }), [], Object.assign(Object.assign({}, _toDoStyle), { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", width: width ? width + "rem" : "auto", height: height ? height + "rem" : "auto", overflow: "hidden" })), { children: _jsxs("span", { children: [_jsx("b", { children: "ToDo: " }), _jsx("span", { style: { fontWeight: "normal" }, children: msg })] }) })));
+        return (_jsx("div", Object.assign({}, applyProps("todo", elbe, [], Object.assign(Object.assign({}, _toDoStyle), { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", width: width ? width + "rem" : "auto", height: height ? height + "rem" : "auto", overflow: "hidden" })), { children: _jsxs("span", { children: [_jsx("b", { children: "ToDo: " }), _jsx("span", { style: { fontWeight: "normal" }, children: msg })] }) })));
     }
     ToDo.Block = Block;
     function Placeholder(_a) {
         var { width, height } = _a, elbe = __rest(_a, ["width", "height"]);
-        return (_jsx("div", Object.assign({}, applyProps(Object.assign(Object.assign({}, elbe), { typeLabel: "placeholder" }), [], {
+        return (_jsx("div", Object.assign({}, applyProps("placeholder", elbe, [], {
             padding: "0",
             width: width ? width + "rem" : "auto",
             height: height ? height + "rem" : "auto",

package/dist/ui/components/dialog.js

@@ -3,7 +3,7 @@ import { X } from "lucide-react";
 import { IconButton } from "./button/icon_button";
 import { Spaced } from "./layout/spaced";
 export function ElbeDialog({ title, open, onClose, children, _style, }) {
-    return (_jsx("dialog", { onClick: (e) => e.stopPropagation(), open: open, style: "text-align: start" + (_style !== null && _style !== void 0 ? _style : ""), children: _jsxs("div", { class: "primary card plain-opaque padding-none", style: "max-width: 40rem; min-width: 10rem", children: [_jsxs("div", { class: "row cross-center padded main-between", children: [_jsx("div", { class: "body-l b", children: title }), _jsx(IconButton.plain, { icon: X, onTap: (e) => {
+    return (_jsx("dialog", { onClick: (e) => e.stopPropagation(), open: open, style: "text-align: start" + (_style !== null && _style !== void 0 ? _style : ""), children: _jsxs("div", { class: "primary card plain-opaque padding-none", style: "max-width: 40rem; min-width: 10rem", children: [_jsxs("div", { class: "row cross-center padded main-between", children: [_jsx("div", { class: "body-l b", children: title }), _jsx(IconButton.plain, { ariaLabel: "Close", icon: X, onTap: (e) => {
                                 e.stopPropagation();
                                 e.preventDefault();
                                 onClose();

package/dist/ui/components/input/checkbox.d.ts

@@ -1,6 +1,6 @@
-import { type ElbeProps } from "../base/box";
+import { ActionElbeProps } from "../base/box";
 export declare function Checkbox({ value, label, onChange, ...elbe }: {
     value: boolean;
     label?: string;
     onChange?: ((checked: boolean) => void) | null;
-} & ElbeProps): import("preact").JSX.Element;
+} & ActionElbeProps): import("preact").JSX.Element;

package/dist/ui/components/input/checkbox.js

@@ -17,5 +17,7 @@ export function Checkbox(_a) {
             gap: ".75rem",
             filter: onChange ? "" : "grayscale(1)",
             opacity: onChange ? "" : "0.5",
-        }, children: [_jsx("input", Object.assign({ type: "checkbox" }, applyProps(elbe), { disabled: !onChange, checked: value, onChange: (e) => onChange === null || onChange === void 0 ? void 0 : onChange(e.currentTarget.checked) })), label && _jsx("div", { style: "margin-top: -.25rem", children: label })] }));
+        }, children: [_jsx("input", Object.assign({ type: "checkbox" }, applyProps("checkbox", elbe, value ? ["accent major"] : "accent minor", {
+                background: value ? null : "transparent",
+            }), { disabled: !onChange, checked: value, onChange: (e) => onChange === null || onChange === void 0 ? void 0 : onChange(e.currentTarget.checked) })), label && _jsx("div", { style: "margin-top: -.25rem", children: label })] }));
 }

package/dist/ui/components/input/input_field.d.ts

@@ -1,5 +1,5 @@
 import React from "preact/compat";
-import { type ElbeProps } from "../base/box";
+import { ActionElbeProps } from "../base/box";
 import { _TextArea } from "./text_area";
 export type InputFieldProps = {
     label?: string;
@@ -7,7 +7,7 @@ export type InputFieldProps = {
     readonly?: boolean;
     value: string | number;
     onInput?: (value: string) => void;
-} & ElbeProps;
+} & ActionElbeProps;
 export declare class Field extends React.Component<InputFieldProps & {
     type?: "text" | "number" | "password" | "date" | "time" | "email";
 }> {

package/dist/ui/components/input/input_field.js

@@ -22,7 +22,7 @@ export class Field extends React.Component {
                 display: "flex",
                 flexDirection: "column",
                 alignItems: "stretch",
-            }, "data-tooltip": (_a = this.props) === null || _a === void 0 ? void 0 : _a.tooltip, children: _jsx("input", Object.assign({ type: this.props.type }, applyProps(this.props, null, {
+            }, "data-tooltip": (_a = this.props) === null || _a === void 0 ? void 0 : _a.tooltip, children: _jsx("input", Object.assign({ type: this.props.type }, applyProps("text_field", this.props, null, {
                 width: "100%",
             }), { size: 5, label: this.props.label, placeholder: this.props.hint, value: this.props.value, onInput: (e) => this.props.onInput && this.props.onInput(e.currentTarget.value), readonly: this.props.readonly })) }));
     }

package/dist/ui/components/input/range.d.ts

@@ -1,8 +1,8 @@
-import { type ElbeProps } from "../base/box";
+import { ActionElbeProps } from "../base/box";
 export declare function Range({ value, onChange, min, max, step, ...elbe }: {
     value: number;
     min?: number;
     step?: number;
     max?: number;
     onChange?: ((value: number) => void) | null;
-} & ElbeProps): import("preact").JSX.Element;
+} & ActionElbeProps): import("preact").JSX.Element;

package/dist/ui/components/input/range.js

@@ -15,14 +15,14 @@ import { applyProps } from "../base/box";
 import { Card } from "../base/card";
 export function Range(_a) {
     var { value, onChange, min = 0, max = 100, step = 1 } = _a, elbe = __rest(_a, ["value", "onChange", "min", "max", "step"]);
-    return min > max ? (_ElbeErr("Range: max is smaller than min")) : (_jsx(Card, { scheme: "secondary", kind: "accent", manner: "minor", style: {
+    return min > max ? (_ElbeErr("Range: max is smaller than min")) : (_jsx(Card, { ariaLabel: null, scheme: "secondary", kind: "accent", manner: "minor", style: {
             overflow: "unset",
             backgroundColor: "transparent",
             padding: "0",
             margin: "0",
             border: "none",
             width: "100%",
-        }, children: _jsx("input", Object.assign({ type: "range" }, applyProps(elbe, null, {
+        }, children: _jsx("input", Object.assign({ type: "range" }, applyProps("range", elbe, null, {
             filter: onChange ? "" : "grayscale(1)",
             opacity: onChange ? "" : "0.5",
             cursor: onChange ? "pointer" : "not-allowed",