elbe-ui 0.3.1 → 0.4.1

package/README.md

@@ -34,3 +34,15 @@ as of now, this is mainly a personal project for different stuff I built. So thi
 1. increment `version` number in `package.json`
 2. run `bun run build`
 3. run `npm publish`
+
+- [x] contrast (test with WAVE, Axe)
+- [x] dark mode
+- [x] no color based differentiation
+- [x] adjustable text size
+- [x] adjustable UI size
+- [x] responsive design
+- [ ] label fields with `label` tag
+- [ ] add `aria-*` attributes
+- [ ] add `role` attributes
+- [ ] add `tabindex` attributes
+- [ ] force alt text for images

package/dist/elbe.css

@@ -88,17 +88,18 @@ body,
       width: 1.2rem;
     }
   }*/
+  /*@keyframes toast_fadeOut {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }*/
 }
 .elbe .padded,
 .elbe .card,
 .elbe .toast,
-.elbe input[type=text],
-.elbe input[type=number],
-.elbe input[type=password],
-.elbe input[type=email],
-.elbe input[type=date],
-.elbe input[type=time],
-.elbe textarea,
 .elbe select,
 .elbe button {
   padding: var(--g-padding);
@@ -118,13 +119,6 @@ body,
 .elbe .rounded,
 .elbe .card,
 .elbe .toast,
-.elbe input[type=text],
-.elbe input[type=number],
-.elbe input[type=password],
-.elbe input[type=email],
-.elbe input[type=date],
-.elbe input[type=time],
-.elbe textarea,
 .elbe select,
 .elbe button {
   border-radius: var(--g-radius);
@@ -171,16 +165,12 @@ body,
 .elbe .disabled {
   cursor: not-allowed;
 }
+.elbe .plain.disabled {
+  opacity: 0.5;
+}
 .elbe .box, .elbe .header, .elbe .base-limited,
 .elbe .card,
 .elbe .toast,
-.elbe input[type=text],
-.elbe input[type=number],
-.elbe input[type=password],
-.elbe input[type=email],
-.elbe input[type=date],
-.elbe input[type=time],
-.elbe textarea,
 .elbe select,
 .elbe button {
   border-style: solid;
@@ -237,7 +227,7 @@ body,
     transform: rotate(359deg);
   }
 }
-.elbe.high_vis a {
+.elbe.highvis a {
   text-decoration: underline;
 }
 .elbe a {
@@ -394,6 +384,13 @@ body,
 .elbe .bordered.bordered.bordered {
   border: var(--g-border-width) solid var(--c-context-border);
 }
+.elbe .no-scrollbar {
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* Internet Explorer and Edge */
+}
+.elbe .no-scrollbar::-webkit-scrollbar {
+  display: none; /* Safari and Chrome */
+}
 .elbe button {
   justify-content: center;
   padding: 0.25rem 0.75rem;
@@ -460,6 +457,7 @@ body,
 }
 .elbe dialog[open=""] > * {
   display: unset;
+  max-width: 100vw;
 }
 .elbe .expandable {
   max-height: 0px;
@@ -487,35 +485,20 @@ body,
   justify-content: space-between;
   align-items: center;
 }
-.elbe .frosted {
+.elbe .frosted.frosted.frosted.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],
-.elbe input[type=email],
-.elbe input[type=date],
-.elbe input[type=time],
-.elbe textarea {
-  padding: 0 0.75rem;
-  height: 3rem;
-  min-width: 12rem;
-  width: 100%;
-}
-.elbe textarea {
-  height: 6rem;
-  padding: 0.6rem 0.75rem;
-  resize: vertical;
-  min-height: 3rem;
+.elbe .text_field_base:has(:focus) {
+  outline: max(2px, 0.15em) solid var(--c-accent);
 }
-.elbe.high_vis input[type=range]::-webkit-slider-thumb {
+.elbe.highvis 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 {
+.elbe.highvis input[type=range]::-moz-range-thumb {
   border-width: var(--g-border-width);
   border-style: solid;
   border-color: var(--c-context-back);
@@ -525,7 +508,6 @@ body,
   appearance: none;
   width: 100%;
   height: 0.4rem;
-  border-radius: 1rem;
   background-color: var(--c-context-back);
   outline: none;
   -webkit-transition: 0.2s;
@@ -539,7 +521,7 @@ body,
   appearance: none;
   width: 1.5rem;
   height: 1.5rem;
-  border-radius: 1rem;
+  border-radius: var(--g-radius);
   background: var(--c-context-front);
   border: none;
   outline: none;
@@ -548,7 +530,7 @@ body,
 .elbe input[type=range]::-moz-range-thumb {
   width: 1.5rem;
   height: 1.5rem;
-  border-radius: 1rem;
+  border-radius: var(--g-radius);
   background: var(--c-context-front);
   border: none;
   outline: none;
@@ -578,6 +560,9 @@ body,
   transform-origin: center;
   transition: 0.2s all ease-in-out;
 }
+.elbe.reduced_motion input[type=checkbox]::before {
+  transition: none;
+}
 .elbe input[type=checkbox]:checked::before {
   transform: scale(1);
   background-color: var(--c-context-front);
@@ -590,7 +575,7 @@ body,
   cursor: not-allowed;
   border: 0.16em solid var(--c-context-border);
 }
-.elbe.high_vis div[data-type=elbe_progress_bar] > * {
+.elbe.highvis div[data-type=elbe_progress_bar] > * {
   outline-width: var(--g-border-width);
   outline-style: solid;
   outline-color: var(--c-context-back);
@@ -600,17 +585,10 @@ body,
   border-top: var(--g-border-width) solid var(--c-context-border);
   width: 100%;
 }
-.elbe :focus-visible {
-  outline: 0.15rem solid var(--c-accent);
+.elbe button > * {
+  flex-shrink: 0;
 }
-.elbe :active {
-  outline: none;
-}
-.elbe.dark :focus-visible {
-  outline: 0.15rem solid white;
-}
-
-.toast {
+.elbe .toast {
   position: fixed;
   bottom: 1rem;
   right: 1rem;
@@ -618,6 +596,29 @@ body,
   left: 50%;
   width: min(40rem, 90%);
   transform: translateX(-50%);
+  animation: toast_fadeIn 0.2s ease-out;
+}
+.elbe.reduced_motion .toast {
+  animation: none;
+}
+@keyframes toast_fadeIn {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+}
+.elbe :focus-visible {
+  outline: 0.15rem solid var(--c-accent);
+}
+.elbe :active {
+  outline: none;
+}
+.elbe.dark :focus-visible {
+  outline: 0.15rem solid white;
 }
 
 /*# sourceMappingURL=elbe.css.map */

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;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"}
+{"version":3,"sourceRoot":"","sources":["../style/elbe.scss","../style/_base.scss","../style/_flex.scss","../style/_components.scss","../style/_toast.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;AAiEA;AAUA;AAaA;AA8BA;AClHA;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;ACrME;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AH3BF;AAAA;AAAA;AAAA;AAAA;EAEE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAMF;EACE;;AAEF;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;;AAGF;EACE;;AAKF;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;;ACnKJ;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;;AAGF;EACE;EACA;;AAEA;EACE;;AAKJ;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;EACA;;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;;AAgBD;EACE;;AAcA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EAzCF;EACA;EACA;EACA;EACA;EACA;EACA;;AAuCA;EA7CA;EACA;EACA;EACA;EACA;EACA;EACA;;AAmFF;EACE;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;;AAIF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAKF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAGF;EACE;;ACxUF;EAII;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;IACE;IACA;;EAEF;IACE;IACA;;;AJyCJ;EACE;;AAEF;EACG;;AAGH;EACE","file":"elbe.css"}

package/dist/index.d.ts

@@ -3,7 +3,10 @@ export * from "./bit/bit";
 export * from "./bit/ctrl_bit";
 export * from "./service/s_api";
 export * from "./ui/util/confirm_dialog";
+export * from "./ui/util/ctx_toolbar";
+export * from "./ui/util/l10n/l10n";
 export * from "./ui/util/toast";
+export * from "./ui/util/types";
 export * from "./ui/util/util";
 export * from "./ui/components/base/box";
 export * from "./ui/components/base/card";
@@ -13,17 +16,16 @@ 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/app_base";
 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";
 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/input/text/input_field";
 export * from "./ui/components/badge";
 export * from "./ui/components/banner";
 export * from "./ui/components/dialog";
@@ -36,6 +38,7 @@ export * from "./ui/components/text";
 export * from "./ui/components/dev/todo";
 export * from "./ui/theme/seed";
 export * from "./ui/theme/theme";
+export * from "./ui/theme/theme_context";
 declare function None({}: {}): import("preact").JSX.Element;
 export declare const Icons: {
     None: typeof None;

package/dist/index.js

@@ -6,7 +6,10 @@ export * from "./bit/bit";
 export * from "./bit/ctrl_bit";
 export * from "./service/s_api";
 export * from "./ui/util/confirm_dialog";
+export * from "./ui/util/ctx_toolbar";
+export * from "./ui/util/l10n/l10n";
 export * from "./ui/util/toast";
+export * from "./ui/util/types";
 export * from "./ui/util/util";
 export * from "./ui/components/base/box";
 export * from "./ui/components/base/card";
@@ -16,17 +19,16 @@ 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/app_base";
 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";
 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/input/text/input_field";
 export * from "./ui/components/badge";
 export * from "./ui/components/banner";
 export * from "./ui/components/dialog";
@@ -39,6 +41,7 @@ export * from "./ui/components/text";
 export * from "./ui/components/dev/todo";
 export * from "./ui/theme/seed";
 export * from "./ui/theme/theme";
+export * from "./ui/theme/theme_context";
 function None({}) {
     return _jsx("div", { style: { width: "1.5rem", height: "1.5rem" } });
 }

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

@@ -1,6 +1,6 @@
 import React from "preact/compat";
 import type { ElbeColorKinds } from "../theme/colors";
-import type { ElbeChild, ElbeChildren } from "../util/util";
+import type { ElbeChild, ElbeChildren } from "../util/types";
 import type { ElbeProps } from "./base/box";
 export type BadgeProps = {
     count?: number;

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

@@ -1,7 +1,8 @@
 import { ElbeAlertKinds, IconChild } from "../..";
-export declare function KindAlertIcon({ kind }: {
+export declare function KindAlertIcon({ kind, size, }: {
     kind: ElbeAlertKinds;
-}): import("preact").JSX.Element;
+    size?: "body-s" | "body-m" | "body-l";
+}): any;
 export declare function Banner({ kind, manner, title, onDismiss, dismissIcon, children, }: {
     kind: ElbeAlertKinds;
     manner?: "major" | "minor";

package/dist/ui/components/banner.js

@@ -1,16 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
-import { AlertTriangle, CheckCircle2, CircleHelp, InfoIcon, OctagonAlert, XIcon, } from "lucide-react";
+import { AlertTriangleIcon, CheckCircle2Icon, CircleHelpIcon, InfoIcon, OctagonAlertIcon, XIcon, } from "lucide-react";
 import { Align, Card, Column, IconButton, Row, Text, } from "../..";
-export function KindAlertIcon({ kind }) {
+export function KindAlertIcon({ kind, size = "body-m", }) {
+    let icon = CircleHelpIcon;
     if (kind === "info")
-        return _jsx(InfoIcon, {});
+        icon = InfoIcon;
     if (kind === "warning")
-        return _jsx(AlertTriangle, {});
+        icon = AlertTriangleIcon;
     if (kind === "error")
-        return _jsx(OctagonAlert, {});
+        icon = OctagonAlertIcon;
     if (kind === "success")
-        return _jsx(CheckCircle2, {});
-    return _jsx(CircleHelp, {});
+        icon = CheckCircle2Icon;
+    let scale = 1;
+    if (size === "body-s")
+        scale = 0.8;
+    if (size === "body-l")
+        scale = 1.2;
+    return icon({ size: `${scale * 1.5}rem` });
 }
 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

@@ -1,6 +1,6 @@
 import { Component } from "preact";
-import type { ElbeColorModes, ElbeColorSchemes } from "../../theme/colors";
-import type { ElbeChildren } from "../../util/util";
+import { ElbeChildren, ElbeColorModes, ElbeColorSchemes } from "../../..";
+import { AriaRoles } from "./roles";
 export type ElbeProps = {
     id?: string;
     class?: string;
@@ -9,6 +9,7 @@ export type ElbeProps = {
     flex?: boolean | number;
     typeLabel?: string;
     ariaLabel?: string | null;
+    role?: AriaRoles | null;
 };
 export type ActionElbeProps = ElbeProps & {
     ariaLabel: string | null;
@@ -24,11 +25,6 @@ export declare function applyProps(typeLabel: string, p: ElbeProps, classes?: st
         flex?: string | number | null | undefined;
         cssText?: string | null;
         [Symbol.iterator]?: string | number | null | undefined;
-        clipPath?: string | number | null | undefined;
-        filter?: string | number | null | undefined;
-        marker?: string | number | null | undefined;
-        mask?: string | number | null | undefined;
-        font?: string | number | null | undefined;
         border?: string | number | null | undefined;
         accentColor?: string | number | null | undefined;
         alignContent?: string | number | null | undefined;
@@ -135,6 +131,7 @@ export declare function applyProps(typeLabel: string, p: ElbeProps, classes?: st
         caretColor?: string | number | null | undefined;
         clear?: string | number | null | undefined;
         clip?: string | number | null | undefined;
+        clipPath?: string | number | null | undefined;
         clipRule?: string | number | null | undefined;
         color?: string | number | null | undefined;
         colorInterpolation?: string | number | null | undefined;
@@ -176,6 +173,7 @@ export declare function applyProps(typeLabel: string, p: ElbeProps, classes?: st
         fill?: string | number | null | undefined;
         fillOpacity?: string | number | null | undefined;
         fillRule?: string | number | null | undefined;
+        filter?: string | number | null | undefined;
         flexBasis?: string | number | null | undefined;
         flexDirection?: string | number | null | undefined;
         flexFlow?: string | number | null | undefined;
@@ -185,6 +183,7 @@ export declare function applyProps(typeLabel: string, p: ElbeProps, classes?: st
         float?: string | number | null | undefined;
         floodColor?: string | number | null | undefined;
         floodOpacity?: string | number | null | undefined;
+        font?: string | number | null | undefined;
         fontFamily?: string | number | null | undefined;
         fontFeatureSettings?: string | number | null | undefined;
         fontKerning?: string | number | null | undefined;
@@ -265,9 +264,11 @@ export declare function applyProps(typeLabel: string, p: ElbeProps, classes?: st
         marginLeft?: string | number | null | undefined;
         marginRight?: string | number | null | undefined;
         marginTop?: string | number | null | undefined;
+        marker?: string | number | null | undefined;
         markerEnd?: string | number | null | undefined;
         markerMid?: string | number | null | undefined;
         markerStart?: string | number | null | undefined;
+        mask?: string | number | null | undefined;
         maskClip?: string | number | null | undefined;
         maskComposite?: string | number | null | undefined;
         maskImage?: string | number | null | undefined;
@@ -543,11 +544,6 @@ export declare class Box extends Component<ElbeBoxProps & {
             flex?: string | number | null | undefined;
             cssText?: string | null;
             [Symbol.iterator]?: string | number | null | undefined;
-            clipPath?: string | number | null | undefined;
-            filter?: string | number | null | undefined;
-            marker?: string | number | null | undefined;
-            mask?: string | number | null | undefined;
-            font?: string | number | null | undefined;
             border?: string | number | null | undefined;
             accentColor?: string | number | null | undefined;
             alignContent?: string | number | null | undefined;
@@ -654,6 +650,7 @@ export declare class Box extends Component<ElbeBoxProps & {
             caretColor?: string | number | null | undefined;
             clear?: string | number | null | undefined;
             clip?: string | number | null | undefined;
+            clipPath?: string | number | null | undefined;
             clipRule?: string | number | null | undefined;
             color?: string | number | null | undefined;
             colorInterpolation?: string | number | null | undefined;
@@ -695,6 +692,7 @@ export declare class Box extends Component<ElbeBoxProps & {
             fill?: string | number | null | undefined;
             fillOpacity?: string | number | null | undefined;
             fillRule?: string | number | null | undefined;
+            filter?: string | number | null | undefined;
             flexBasis?: string | number | null | undefined;
             flexDirection?: string | number | null | undefined;
             flexFlow?: string | number | null | undefined;
@@ -704,6 +702,7 @@ export declare class Box extends Component<ElbeBoxProps & {
             float?: string | number | null | undefined;
             floodColor?: string | number | null | undefined;
             floodOpacity?: string | number | null | undefined;
+            font?: string | number | null | undefined;
             fontFamily?: string | number | null | undefined;
             fontFeatureSettings?: string | number | null | undefined;
             fontKerning?: string | number | null | undefined;
@@ -784,9 +783,11 @@ export declare class Box extends Component<ElbeBoxProps & {
             marginLeft?: string | number | null | undefined;
             marginRight?: string | number | null | undefined;
             marginTop?: string | number | null | undefined;
+            marker?: string | number | null | undefined;
             markerEnd?: string | number | null | undefined;
             markerMid?: string | number | null | undefined;
             markerStart?: string | number | null | undefined;
+            mask?: string | number | null | undefined;
             maskClip?: string | number | null | undefined;
             maskComposite?: string | number | null | undefined;
             maskImage?: string | number | null | undefined;
@@ -1053,11 +1054,6 @@ export declare class Box extends Component<ElbeBoxProps & {
             flex?: string | number | null | undefined;
             cssText?: string | null;
             [Symbol.iterator]?: string | number | null | undefined;
-            clipPath?: string | number | null | undefined;
-            filter?: string | number | null | undefined;
-            marker?: string | number | null | undefined;
-            mask?: string | number | null | undefined;
-            font?: string | number | null | undefined;
             border?: string | number | null | undefined;
             accentColor?: string | number | null | undefined;
             alignContent?: string | number | null | undefined;
@@ -1164,6 +1160,7 @@ export declare class Box extends Component<ElbeBoxProps & {
             caretColor?: string | number | null | undefined;
             clear?: string | number | null | undefined;
             clip?: string | number | null | undefined;
+            clipPath?: string | number | null | undefined;
             clipRule?: string | number | null | undefined;
             color?: string | number | null | undefined;
             colorInterpolation?: string | number | null | undefined;
@@ -1205,6 +1202,7 @@ export declare class Box extends Component<ElbeBoxProps & {
             fill?: string | number | null | undefined;
             fillOpacity?: string | number | null | undefined;
             fillRule?: string | number | null | undefined;
+            filter?: string | number | null | undefined;
             flexBasis?: string | number | null | undefined;
             flexDirection?: string | number | null | undefined;
             flexFlow?: string | number | null | undefined;
@@ -1214,6 +1212,7 @@ export declare class Box extends Component<ElbeBoxProps & {
             float?: string | number | null | undefined;
             floodColor?: string | number | null | undefined;
             floodOpacity?: string | number | null | undefined;
+            font?: string | number | null | undefined;
             fontFamily?: string | number | null | undefined;
             fontFeatureSettings?: string | number | null | undefined;
             fontKerning?: string | number | null | undefined;
@@ -1294,9 +1293,11 @@ export declare class Box extends Component<ElbeBoxProps & {
             marginLeft?: string | number | null | undefined;
             marginRight?: string | number | null | undefined;
             marginTop?: string | number | null | undefined;
+            marker?: string | number | null | undefined;
             markerEnd?: string | number | null | undefined;
             markerMid?: string | number | null | undefined;
             markerStart?: string | number | null | undefined;
+            mask?: string | number | null | undefined;
             maskClip?: string | number | null | undefined;
             maskComposite?: string | number | null | undefined;
             maskImage?: string | number | null | undefined;
@@ -1563,11 +1564,6 @@ export declare class Box extends Component<ElbeBoxProps & {
             flex?: string | number | null | undefined;
             cssText?: string | null;
             [Symbol.iterator]?: string | number | null | undefined;
-            clipPath?: string | number | null | undefined;
-            filter?: string | number | null | undefined;
-            marker?: string | number | null | undefined;
-            mask?: string | number | null | undefined;
-            font?: string | number | null | undefined;
             border?: string | number | null | undefined;
             accentColor?: string | number | null | undefined;
             alignContent?: string | number | null | undefined;
@@ -1674,6 +1670,7 @@ export declare class Box extends Component<ElbeBoxProps & {
             caretColor?: string | number | null | undefined;
             clear?: string | number | null | undefined;
             clip?: string | number | null | undefined;
+            clipPath?: string | number | null | undefined;
             clipRule?: string | number | null | undefined;
             color?: string | number | null | undefined;
             colorInterpolation?: string | number | null | undefined;
@@ -1715,6 +1712,7 @@ export declare class Box extends Component<ElbeBoxProps & {
             fill?: string | number | null | undefined;
             fillOpacity?: string | number | null | undefined;
             fillRule?: string | number | null | undefined;
+            filter?: string | number | null | undefined;
             flexBasis?: string | number | null | undefined;
             flexDirection?: string | number | null | undefined;
             flexFlow?: string | number | null | undefined;
@@ -1724,6 +1722,7 @@ export declare class Box extends Component<ElbeBoxProps & {
             float?: string | number | null | undefined;
             floodColor?: string | number | null | undefined;
             floodOpacity?: string | number | null | undefined;
+            font?: string | number | null | undefined;
             fontFamily?: string | number | null | undefined;
             fontFeatureSettings?: string | number | null | undefined;
             fontKerning?: string | number | null | undefined;
@@ -1804,9 +1803,11 @@ export declare class Box extends Component<ElbeBoxProps & {
             marginLeft?: string | number | null | undefined;
             marginRight?: string | number | null | undefined;
             marginTop?: string | number | null | undefined;
+            marker?: string | number | null | undefined;
             markerEnd?: string | number | null | undefined;
             markerMid?: string | number | null | undefined;
             markerStart?: string | number | null | undefined;
+            mask?: string | number | null | undefined;
             maskClip?: string | number | null | undefined;
             maskComposite?: string | number | null | undefined;
             maskImage?: string | number | null | undefined;
@@ -2073,11 +2074,6 @@ export declare class Box extends Component<ElbeBoxProps & {
             flex?: string | number | null | undefined;
             cssText?: string | null;
             [Symbol.iterator]?: string | number | null | undefined;
-            clipPath?: string | number | null | undefined;
-            filter?: string | number | null | undefined;
-            marker?: string | number | null | undefined;
-            mask?: string | number | null | undefined;
-            font?: string | number | null | undefined;
             border?: string | number | null | undefined;
             accentColor?: string | number | null | undefined;
             alignContent?: string | number | null | undefined;
@@ -2184,6 +2180,7 @@ export declare class Box extends Component<ElbeBoxProps & {
             caretColor?: string | number | null | undefined;
             clear?: string | number | null | undefined;
             clip?: string | number | null | undefined;
+            clipPath?: string | number | null | undefined;
             clipRule?: string | number | null | undefined;
             color?: string | number | null | undefined;
             colorInterpolation?: string | number | null | undefined;
@@ -2225,6 +2222,7 @@ export declare class Box extends Component<ElbeBoxProps & {
             fill?: string | number | null | undefined;
             fillOpacity?: string | number | null | undefined;
             fillRule?: string | number | null | undefined;
+            filter?: string | number | null | undefined;
             flexBasis?: string | number | null | undefined;
             flexDirection?: string | number | null | undefined;
             flexFlow?: string | number | null | undefined;
@@ -2234,6 +2232,7 @@ export declare class Box extends Component<ElbeBoxProps & {
             float?: string | number | null | undefined;
             floodColor?: string | number | null | undefined;
             floodOpacity?: string | number | null | undefined;
+            font?: string | number | null | undefined;
             fontFamily?: string | number | null | undefined;
             fontFeatureSettings?: string | number | null | undefined;
             fontKerning?: string | number | null | undefined;
@@ -2314,9 +2313,11 @@ export declare class Box extends Component<ElbeBoxProps & {
             marginLeft?: string | number | null | undefined;
             marginRight?: string | number | null | undefined;
             marginTop?: string | number | null | undefined;
+            marker?: string | number | null | undefined;
             markerEnd?: string | number | null | undefined;
             markerMid?: string | number | null | undefined;
             markerStart?: string | number | null | undefined;
+            mask?: string | number | null | undefined;
             maskClip?: string | number | null | undefined;
             maskComposite?: string | number | null | undefined;
             maskImage?: string | number | null | undefined;

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

@@ -1,7 +1,6 @@
-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, frosted, bordered, sharp, children, ...elbe }: {
+import { ElbeChildren, ElbeColorKinds, ElbeColorManners, ElbeColorModes, ElbeColorSchemes, ElbeProps } from "../../..";
+export declare const elevatedShadow = "0 0 15px rgba(0,0,0,.2)";
+export declare function Card({ mode, scheme, kind, manner, padding, margin, onTap, onLongTap, frosted, bordered, elevated, sharp, disabled, overflow, children, ...elbe }: {
     mode?: ElbeColorModes;
     scheme?: ElbeColorSchemes;
     kind?: ElbeColorKinds;
@@ -11,7 +10,10 @@ export declare function Card({ mode, scheme, kind, manner, padding, margin, onTa
     onTap?: () => void;
     onLongTap?: () => void;
     frosted?: boolean;
+    elevated?: boolean;
     bordered?: boolean;
     sharp?: boolean;
+    disabled?: boolean;
+    overflow?: "hidden" | "scroll" | "auto";
     children?: ElbeChildren;
 } & ElbeProps): import("preact").JSX.Element;