elbe-ui 0.2.52 → 0.4.0

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,6 +3,7 @@ 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/toast";
 export * from "./ui/util/util";
 export * from "./ui/components/base/box";
@@ -13,27 +14,29 @@ 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";
 export * from "./ui/components/error_view";
+export * from "./ui/components/footer";
+export * from "./ui/components/link";
 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";
+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,6 +6,7 @@ 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/toast";
 export * from "./ui/util/util";
 export * from "./ui/components/base/box";
@@ -16,27 +17,29 @@ 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";
 export * from "./ui/components/error_view";
+export * from "./ui/components/footer";
+export * from "./ui/components/link";
 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";
+export * from "./ui/theme/theme_context";
 function None({}) {
     return _jsx("div", { style: { width: "1.5rem", height: "1.5rem" } });
 }

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,7 @@
 import { Component } from "preact";
 import type { ElbeColorModes, ElbeColorSchemes } from "../../theme/colors";
 import type { ElbeChildren } from "../../util/util";
+import { AriaRoles } from "./roles";
 export type ElbeProps = {
     id?: string;
     class?: string;
@@ -9,6 +10,7 @@ export type ElbeProps = {
     flex?: boolean | number;
     typeLabel?: string;
     ariaLabel?: string | null;
+    role?: AriaRoles | null;
 };
 export type ActionElbeProps = ElbeProps & {
     ariaLabel: string | null;
@@ -29,6 +31,7 @@ export declare function applyProps(typeLabel: string, p: ElbeProps, classes?: st
         marker?: string | number | null | undefined;
         mask?: string | number | null | undefined;
         font?: string | number | null | undefined;
+        resize?: string | number | null | undefined;
         border?: string | number | null | undefined;
         accentColor?: string | number | null | undefined;
         alignContent?: string | number | null | undefined;
@@ -342,7 +345,6 @@ export declare function applyProps(typeLabel: string, p: ElbeProps, classes?: st
         printColorAdjust?: string | number | null | undefined;
         quotes?: string | number | null | undefined;
         r?: string | number | null | undefined;
-        resize?: string | number | null | undefined;
         right?: string | number | null | undefined;
         rotate?: string | number | null | undefined;
         rowGap?: string | number | null | undefined;
@@ -548,6 +550,7 @@ export declare class Box extends Component<ElbeBoxProps & {
             marker?: string | number | null | undefined;
             mask?: string | number | null | undefined;
             font?: string | number | null | undefined;
+            resize?: string | number | null | undefined;
             border?: string | number | null | undefined;
             accentColor?: string | number | null | undefined;
             alignContent?: string | number | null | undefined;
@@ -861,7 +864,6 @@ export declare class Box extends Component<ElbeBoxProps & {
             printColorAdjust?: string | number | null | undefined;
             quotes?: string | number | null | undefined;
             r?: string | number | null | undefined;
-            resize?: string | number | null | undefined;
             right?: string | number | null | undefined;
             rotate?: string | number | null | undefined;
             rowGap?: string | number | null | undefined;
@@ -1058,6 +1060,7 @@ export declare class Box extends Component<ElbeBoxProps & {
             marker?: string | number | null | undefined;
             mask?: string | number | null | undefined;
             font?: string | number | null | undefined;
+            resize?: string | number | null | undefined;
             border?: string | number | null | undefined;
             accentColor?: string | number | null | undefined;
             alignContent?: string | number | null | undefined;
@@ -1371,7 +1374,6 @@ export declare class Box extends Component<ElbeBoxProps & {
             printColorAdjust?: string | number | null | undefined;
             quotes?: string | number | null | undefined;
             r?: string | number | null | undefined;
-            resize?: string | number | null | undefined;
             right?: string | number | null | undefined;
             rotate?: string | number | null | undefined;
             rowGap?: string | number | null | undefined;
@@ -1568,6 +1570,7 @@ export declare class Box extends Component<ElbeBoxProps & {
             marker?: string | number | null | undefined;
             mask?: string | number | null | undefined;
             font?: string | number | null | undefined;
+            resize?: string | number | null | undefined;
             border?: string | number | null | undefined;
             accentColor?: string | number | null | undefined;
             alignContent?: string | number | null | undefined;
@@ -1881,7 +1884,6 @@ export declare class Box extends Component<ElbeBoxProps & {
             printColorAdjust?: string | number | null | undefined;
             quotes?: string | number | null | undefined;
             r?: string | number | null | undefined;
-            resize?: string | number | null | undefined;
             right?: string | number | null | undefined;
             rotate?: string | number | null | undefined;
             rowGap?: string | number | null | undefined;
@@ -2078,6 +2080,7 @@ export declare class Box extends Component<ElbeBoxProps & {
             marker?: string | number | null | undefined;
             mask?: string | number | null | undefined;
             font?: string | number | null | undefined;
+            resize?: string | number | null | undefined;
             border?: string | number | null | undefined;
             accentColor?: string | number | null | undefined;
             alignContent?: string | number | null | undefined;
@@ -2391,7 +2394,6 @@ export declare class Box extends Component<ElbeBoxProps & {
             printColorAdjust?: string | number | null | undefined;
             quotes?: string | number | null | undefined;
             r?: string | number | null | undefined;
-            resize?: string | number | null | undefined;
             right?: string | number | null | undefined;
             rotate?: string | number | null | undefined;
             rowGap?: string | number | null | undefined;

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

@@ -1,7 +1,8 @@
 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 }: {
+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 +12,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;

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

@@ -11,8 +11,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "preact/jsx-runtime";
 import { applyProps } from "./box";
+export const elevatedShadow = "0 0 15px rgba(0,0,0,.2)";
 export function Card(_a) {
-    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"]);
+    var { mode, scheme = "primary", kind, manner, padding = 1, margin = 0, onTap, onLongTap, frosted, bordered, elevated, sharp, disabled, overflow, children } = _a, elbe = __rest(_a, ["mode", "scheme", "kind", "manner", "padding", "margin", "onTap", "onLongTap", "frosted", "bordered", "elevated", "sharp", "disabled", "overflow", "children"]);
     return (_jsx("div", Object.assign({}, applyProps("card", elbe, [
         "card",
         mode,
@@ -22,8 +23,11 @@ export function Card(_a) {
         frosted && "frosted",
         bordered && "bordered",
         sharp && "sharp",
+        disabled && "disabled",
     ], {
         padding: `${padding}rem`,
         margin: `${margin}rem`,
+        overflow: overflow,
+        boxShadow: elevated ? elevatedShadow : undefined,
     }), { onClick: onTap, onContextMenu: onLongTap, children: children })));
 }

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

@@ -0,0 +1 @@
+export type AriaRoles = "alert" | "alertdialog" | "application" | "article" | "banner" | "button" | "cell" | "checkbox" | "columnheader" | "combobox" | "complementary" | "contentinfo" | "definition" | "dialog" | "directory" | "document" | "feed" | "figure" | "form" | "grid" | "gridcell" | "group" | "heading" | "img" | "link" | "list" | "listbox" | "listitem" | "log" | "main" | "marquee" | "math" | "menu" | "menubar" | "menuitem" | "menuitemcheckbox" | "menuitemradio" | "navigation" | "none" | "note" | "option" | "presentation" | "progressbar" | "radio" | "radiogroup" | "region" | "row" | "rowgroup" | "rowheader" | "scrollbar" | "search" | "searchbox" | "separator" | "slider" | "spinbutton" | "status" | "switch" | "tab" | "table" | "tablist" | "tabpanel" | "term" | "textbox" | "timer" | "toolbar" | "tooltip" | "tree" | "treegrid" | "treeitem";

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

@@ -0,0 +1 @@
+export {};

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

@@ -5,6 +5,7 @@ import type { IconChild } from "./icon_button";
 export type ButtonProps = ActionElbeProps & {
     kind?: ElbeColorKinds;
     transparent?: boolean;
+    contentAlign?: "start" | "center" | "end";
     onTap?: (e: Event) => void;
 } & {
     icon?: IconChild;

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

@@ -11,6 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
 import { Component } from "preact";
+import { useToolbar } from "../../util/ctx_toolbar";
 import { _ElbeErr } from "../../util/error_view";
 import { applyProps } from "../base/box";
 export class Button extends Component {
@@ -23,15 +24,22 @@ Button.minor = (p) => _btn(p, "minor");
 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("button", elbe, [
+    var _b;
+    var { kind, onTap, icon, label, children, contentAlign } = _a, elbe = __rest(_a, ["kind", "onTap", "icon", "label", "children", "contentAlign"]);
+    const toolbarCtx = useToolbar();
+    return label || icon || children ? (_jsxs("button", Object.assign({}, applyProps("button", Object.assign(Object.assign({ role: "button" }, elbe), { flex: (toolbarCtx === null || toolbarCtx === void 0 ? void 0 : toolbarCtx.isInOverflow) ? 1 : elbe.flex }), [
         "row",
         "gap-half",
-        "main-center",
         kind !== null && kind !== void 0 ? kind : (manner != "plain" && "accent"),
         manner,
         !onTap && "disabled",
     ], {
+        overflow: "hidden",
+        justifyContent: contentAlign !== null && contentAlign !== void 0 ? contentAlign : ((toolbarCtx === null || toolbarCtx === void 0 ? void 0 : toolbarCtx.isInOverflow) ? "start" : "center"),
         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"));
+    }), { title: (_b = elbe.ariaLabel) !== null && _b !== void 0 ? _b : label, disabled: !onTap, onClick: (e) => onTap && onTap(e), children: [typeof icon === "function" ? icon({}) : icon, !(toolbarCtx === null || toolbarCtx === void 0 ? void 0 : toolbarCtx.isInToolbar) && label && (_jsx("div", { style: {
+                    whiteSpace: "nowrap",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                }, children: label })), children] }))) : (_ElbeErr("Button requires either an icon and or a label, or a child"));
 }

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

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
 import { CheckIcon } from "lucide-react";
+import { Card } from "../base/card";
 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; overflow: hidden", children: items.map((e) => {
+    return (_jsx(Card, { kind: "accent", manner: "major", padding: 0, overflow: "hidden", role: "radiogroup", disabled: !onChange, class: `${column ? "column" : "row"} gap-none`, 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 &&
+            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 ? "major" : "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

@@ -16,3 +16,6 @@ export declare class IconButton extends Component<IconButtonProps & {
     static plain: (p: IconButtonProps) => import("preact").JSX.Element;
     render(): import("preact").JSX.Element;
 }
+export declare function _IconChild(p: {
+    icon: IconChild | null;
+}): any;

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

@@ -22,7 +22,7 @@ IconButton.minor = (p) => _btn(p, "minor");
 IconButton.flat = (p) => _btn(p, "flat");
 IconButton.plain = (p) => _btn(p, "plain");
 function _btn(_a, manner) {
-    var _b;
+    var _b, _c;
     var { icon, onTap } = _a, elbe = __rest(_a, ["icon", "onTap"]);
     if (manner === void 0) { manner = "major"; }
     return (_jsx("button", Object.assign({}, applyProps("icon_button", elbe, [
@@ -38,5 +38,12 @@ function _btn(_a, manner) {
         borderRadius: "3rem",
         height: "3rem",
         width: "3rem",
-    }), { onClick: (e) => onTap && onTap(e), children: typeof icon === "function" ? icon({}) : icon })));
+    }), { title: (_c = elbe.ariaLabel) !== null && _c !== void 0 ? _c : undefined, onClick: (e) => onTap && onTap(e), children: _jsx(_IconChild, { icon: icon }) })));
+}
+export function _IconChild(p) {
+    if (!p.icon)
+        return null;
+    if (typeof p.icon === "function")
+        return p.icon({});
+    return p.icon;
 }

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

@@ -11,10 +11,16 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
 import { CheckIcon } from "lucide-react";
+import { useThemeConfig } from "../../theme/theme_context";
 import { applyProps } from "../base/box";
+import { Padded } from "../base/padded";
 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("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 })] })));
+    const tConfig = useThemeConfig();
+    return (_jsxs(Button, Object.assign({ manner: value ? "major" : "flat", kind: kind, onTap: onChange && (() => onChange(!value)) }, applyProps("toggle_button", elbe, "main-between"), { children: [_jsxs("div", { class: "row gap-none", children: [typeof icon === "function" ? icon({}) : icon, icon && _jsx(Spaced, { width: 0.5 }), label && _jsx("span", { children: label })] }), _jsx("div", { style: {
+                    transition: tConfig.reducedMotion ? null : "width 0.2s ease-in-out",
+                    width: value ? "2.5rem" : "0rem",
+                }, children: value && (_jsx(Padded, { class: "centered", left: 1, children: _jsx(CheckIcon, {}) })) })] })));
 }