@nebularstreams/libmui 2.5.40 → 2.5.42

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nebularstreams/libmui",
   "description": "Micro UI based on Mithril",
-  "version": "2.5.40",
+  "version": "2.5.42",
   "type": "module",
   "main": "src/index.js",
   "scripts": {

package/src/app/MainState.js

@@ -1,11 +1,12 @@
-const MAINSTATE = {
-    setTransState: () => {
-        console.warn("MainState: Not Implemented setTransState")
+const
+    MAINSTATE = {
+        setTransState: () => {
+            console.warn("MainState: Not Implemented setTransState")
+        }
     }
-}
 
-function implement(name, func) {
-    Object.assign(MAINSTATE, func);
+function implement(functs) {
+    Object.assign(MAINSTATE, functs);
 }
 
 export default MAINSTATE;

package/src/css/a-measures.css

@@ -2,4 +2,5 @@
     --unitsize-mini: 1.25rem;
     --unitsize-small: 2rem;
     --unitsize: 2.54rem;
-}
+}
+

package/src/css/b-colors.css

@@ -0,0 +1,12 @@
+
+.bg-accent-light {
+    background: var(--accent-light) !important;
+}
+
+.bg-window-lo {
+    background: var(--window-background-lo) !important;
+}
+
+.bg-window-hi {
+    background: var(--window-background-hi) !important;
+}

package/src/css/b-root-semantic-flex.css

@@ -23,6 +23,23 @@
     justify-content: space-evenly;
 }
 
+.flexbreak {
+    margin: 0 !important;
+    padding: 0 !important;
+}
+
+.scrolly {
+    overflow-y: auto !important;
+    overflow-x: hidden;
+    -webkit-overflow-scrolling: touch;
+    -ms-overflow-style: -ms-autohiding-scrollbar;
+    scrollbar-width: none; /* Firefox */
+}
+
+.ohidden {
+    overflow: hidden;
+}
+
 .flex-al-center {
     align-items: center;
 }

package/src/css/b-root-semantic-size.css

@@ -23,6 +23,22 @@
     width: fit-content;
 }
 
+.w-max {
+    width: -webkit-fill-available;
+}
+
+.w-30 {
+    width: 30%;
+}
+
+.font-125 {
+    font-size: 1.25rem;
+}
+
+.font-75 {
+    font-size: 0.75rem;
+}
+
 .unitheight {
     height: var(--unitsize);
     line-height: var(--unitsize);
@@ -39,6 +55,10 @@
 }
 
 
+.unitheight {
+    height: var(--unitsize) !important;
+}
+
 .unitheightsmall {
     height: var(--unitsize-small);
     line-height: var(--unitsize-small);

package/src/css/ui.notifications.css

@@ -0,0 +1,23 @@
+
+#notification-container {
+    position: fixed;
+    z-index: 100000;
+    top: 2.2rem;
+    transform: translateX(-50%);
+    left: 50%;
+    bottom: auto;
+    right: auto;
+}
+
+#notification-container .notification {
+    border-radius: 10rem !important;
+    padding: 1rem;
+    font-size: 1rem;
+    color: var(--accent);
+}
+
+
+#notification-container .notification i {
+    padding: 0 1rem;
+}
+

package/src/css/ui.witharia.css

@@ -0,0 +1,21 @@
+.witharia:before {
+    content: attr(aria-label);
+    display: block;
+    font-variant: all-small-caps;
+    line-height: 100%;
+    font-size: 0.8em;
+    padding-bottom: 0.25rem;
+    color: var(--text-lo);
+}
+
+.witharia.max:before {
+    width: 100%;
+}
+
+.witharia.minilabel:before {
+    text-align: center;
+    border-bottom: solid 1px var(--border-color);
+    border-top: solid 1px var(--border-color);
+    width: 100%;
+    margin-bottom: 0.5rem;
+}

package/src/index.js

@@ -27,7 +27,7 @@ import {CoolContentTicker, CoolGenericTicker, GenericButtonTicker, optionsPrompt
 import EmptyButton from "./widgets/EmptyButton";
 import tainter from "./util/tainter"
 
-import * as MainState from "./app/MainState";
+import MainState, {implement} from "./app/MainState";
 
 import {
     VideoUploadButton,
@@ -45,6 +45,8 @@ import {
 
 import "./style.js"
 
+const MainStateImplement = implement;
+
 export {
     Button,
     ButtonChoiceWidget,
@@ -104,6 +106,7 @@ export {
     startApp,
     tainter,
 
-    MainState
+    MainState,
+    MainStateImplement
 
 }

package/src/style.js

@@ -1,4 +1,5 @@
 import "./css/a-measures.css"
+import "./css/b-colors.css"
 import "./css/b-root.css"
 import "./css/b-root-bootstrap.css"
 import "./css/b-root-bootstrap-ext.css"
@@ -10,6 +11,8 @@ import "./css/cardie.css"
 import "./css/flex.css"
 
 import "./css/ui.popup.css"
+import "./css/ui.witharia.css"
+import "./css/ui.notifications.css"
 
 import "./css/fontawesome/fontawesome.css"
 import "./css/fontawesome/fontawesome-solid.css"

package/src/widgets/css/combo.ellipsis.css

@@ -9,3 +9,21 @@
     overflow: hidden;
     font-variant: all-small-caps;;
 }
+
+.combowidget .icon {
+    width: var(--unitsize);
+    flex-shrink: 0;
+    padding: 0 !important;
+    margin: 0;
+}
+
+.combowidget button {
+    font-size: inherit;
+    padding: 0;
+}
+
+
+.combovalue, .combowidget {
+    overflow: hidden;
+    font-variant: all-small-caps;
+}