elbe-ui 1.0.8 → 2.0.0

package/dist/elbe.css

@@ -4,13 +4,6 @@
 */
 @import url("https://fonts.googleapis.com/css2?display=swap&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Calistoga&family=Noto+Color+Emoji");
 :root {
-  --g-size: 1rem;
-  --g-radius: 0.75rem;
-  --g-padding: 1rem;
-  --g-border-width: 0.125rem;
-  --c-context-back: #ffffff;
-  --c-context-front: #000;
-  --c-context-border: #000;
   line-height: 1.3;
   color: #222;
   background-color: #ffffff;
@@ -33,6 +26,7 @@
   font-family: inherit;
   font-weight: inherit;
   border-color: inherit;
+  color: inherit;
 }
 
 body,
@@ -43,592 +37,178 @@ body,
   background-color: white;
 }
 
-.elbe {
-  /* ========= SPACING ========= */
-}
-.elbe .padded,
-.elbe .card,
-.elbe .toast,
-.elbe select,
-.elbe button {
-  padding: var(--g-padding);
-}
-.elbe .padding-none {
-  padding: 0rem;
-}
-.elbe .margined {
-  margin: var(--g-padding);
-}
-.elbe .margined-none {
-  margin: 0rem;
-}
-.elbe {
-  /* ========= ELEMENT_STYLE ========= */
-}
-.elbe .sharp.sharp.sharp {
-  border-radius: 0;
-}
-.elbe .rounded,
-.elbe .card,
-.elbe .toast,
-.elbe select,
-.elbe button {
-  border-radius: var(--g-radius);
-  border-color: inherit;
-}
-.elbe .round {
-  border-radius: 50%;
-}
-.elbe img.round,
-.elbe img.rounded {
-  object-fit: cover;
-}
-.elbe .borderless {
-  border: none;
-}
-.elbe .raised, .elbe .toast {
-  box-shadow: 0 0.1rem 1rem rgba(0, 0, 0, 0.2);
-}
-.elbe .scrollbars-none {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-}
-.elbe .scrollbars-none::-webkit-scrollbar {
-  display: none;
-}
-.elbe .pointer {
-  cursor: pointer;
-}
-.elbe .text-centered {
-  text-align: center;
-}
-.elbe .text-start {
-  text-align: start;
-}
-.elbe .text-end {
-  text-align: end;
-}
-.elbe body:has(dialog[open=""]) {
-  overflow: hidden;
-}
-.elbe .transparent.transparent {
-  background-color: transparent;
-}
-.elbe .disabled {
-  cursor: not-allowed;
-}
-.elbe .plain.disabled {
-  opacity: 0.5;
+#elbe_app *:focus-visible, #elbe_app .elbe-focussink:focus-within, #elbe_dialog *:focus-visible, #elbe_dialog .elbe-focussink:focus-within,
+#elbe_tooltip *:focus-visible,
+#elbe_tooltip .elbe-focussink:focus-within, #elbe_toast *:focus-visible, #elbe_toast .elbe-focussink:focus-within {
+  position: relative;
+  outline: max(2px, 0.15em) solid var(--elbe-context-color-outline);
+  outline-offset: 0;
 }
-.elbe {
-  /* ========= CARD ========= */
+#elbe_app *:focus-visible *:focus-visible:focus-visible, #elbe_app .elbe-focussink:focus-within *:focus-visible:focus-visible, #elbe_dialog *:focus-visible *:focus-visible:focus-visible, #elbe_dialog .elbe-focussink:focus-within *:focus-visible:focus-visible,
+#elbe_tooltip *:focus-visible *:focus-visible:focus-visible,
+#elbe_tooltip .elbe-focussink:focus-within *:focus-visible:focus-visible, #elbe_toast *:focus-visible *:focus-visible:focus-visible, #elbe_toast .elbe-focussink:focus-within *:focus-visible:focus-visible {
+  outline: none !important;
 }
-.elbe .box, .elbe .header, .elbe .base-limited,
-.elbe .card,
-.elbe .toast,
-.elbe select,
-.elbe button {
-  border-style: solid;
-  border-width: var(--g-border-width);
-}
-.elbe {
-  /* ========= UTIL ========= */
+#elbe_app *:active, #elbe_dialog *:active,
+#elbe_tooltip *:active, #elbe_toast *:active {
+  outline: none;
 }
-.elbe .action {
-  cursor: pointer;
+#elbe_app.dark :focus-visible, #elbe_dialog.dark :focus-visible,
+#elbe_tooltip.dark :focus-visible, #elbe_toast.dark :focus-visible {
+  outline: 0.15rem solid white;
 }
-.elbe .base-limited {
-  max-width: 700px;
+#elbe_app, #elbe_dialog,
+#elbe_tooltip, #elbe_toast {
   width: 100%;
-  margin: 0 auto;
-}
-.elbe {
-  /* ========= MARKUP ========= */
 }
-.elbe i,
-.elbe .i {
-  font-style: italic;
+#elbe_app hr, #elbe_dialog hr,
+#elbe_tooltip hr, #elbe_toast hr {
+  margin: 0;
+  height: 0;
+  width: 100%;
+  border: none;
+  border-top-width: max(var(--elbe-context-geometry-border-width), 1px);
+  border-top-style: solid;
+  border-top-color: var(--elbe-context-color-border);
 }
-.elbe b,
-.elbe .b,
-.elbe .toast,
-.elbe button {
+#elbe_app * b, #elbe_app * strong, #elbe_dialog * b, #elbe_dialog * strong,
+#elbe_tooltip * b,
+#elbe_tooltip * strong, #elbe_toast * b, #elbe_toast * strong {
   font-weight: bold;
 }
-.elbe .u {
-  text-decoration: underline;
-}
-.elbe .ni {
-  font-style: normal;
-}
-.elbe .nb {
-  font-weight: normal;
-}
-.elbe .nu {
-  text-decoration: none;
-}
-.elbe .striked {
-  text-decoration: line-through;
-}
-.elbe .code {
-  font-family: monospace;
-  white-space: pre-wrap;
-}
-.elbe {
-  /* ========= ANIMATIONS ========= */
-}
-.elbe .rotate {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  animation: rotation 1.5s infinite linear;
-}
-@keyframes rotation {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(359deg);
-  }
-}
-.elbe.highvis a {
-  text-decoration: underline;
-}
-.elbe a {
-  text-decoration: none;
-}
-.elbe a:hover {
-  text-decoration: underline;
-}
-.elbe .column, .elbe dialog,
-.elbe .row,
-.elbe .header,
-.elbe button,
-.elbe .row-resp {
-  display: flex;
-  justify-content: start;
-  align-items: stretch;
-  gap: 1rem;
-}
-.elbe .column, .elbe dialog {
-  flex-direction: column;
-}
-.elbe .row, .elbe .header, .elbe button {
-  flex-direction: row;
-  align-items: center;
-}
-.elbe .centered {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.elbe {
-  /* ========== GAP =========== */
-}
-.elbe .gap-none {
-  gap: 0;
-}
-.elbe .gap-quarter {
-  gap: 0.25rem;
-}
-.elbe .gap-half {
-  gap: 0.5rem;
-}
-.elbe .gap-one {
-  gap: 1rem;
-}
-.elbe .gap-double {
-  gap: 2rem;
-}
-.elbe .gap-triple {
-  gap: 3rem;
-}
-.elbe {
-  /* ========== EXPAND =========== */
-}
-.elbe .flex-none {
-  flex: 0 0 auto;
-}
-.elbe .flex-1 {
-  flex: 1 1 0%;
-}
-.elbe .flex-2 {
-  flex: 2 2 0%;
-}
-.elbe .flex-3 {
-  flex: 3 3 0%;
-}
-.elbe .flex-4 {
-  flex: 4 4 0%;
-}
-.elbe .flex-5 {
-  flex: 5 5 0%;
-}
-.elbe .flex-6 {
-  flex: 6 6 0%;
-}
-.elbe .flex-7 {
-  flex: 7 7 0%;
-}
-.elbe .flex-8 {
-  flex: 8 8 0%;
-}
-.elbe .flex-9 {
-  flex: 9 9 0%;
-}
-.elbe .flex-10 {
-  flex: 10 10 0%;
-}
-.elbe .flex-11 {
-  flex: 11 11 0%;
-}
-.elbe .flex-12 {
-  flex: 12 12 0%;
-}
-.elbe {
-  /* ========== ALIGN =========== */
-}
-.elbe .cross-start {
-  align-items: flex-start;
-}
-.elbe .cross-center, .elbe dialog {
-  align-items: center;
-}
-.elbe .cross-end {
-  align-items: flex-end;
-}
-.elbe .cross-stretch {
-  align-items: stretch;
-}
-.elbe .cross-baseline {
-  align-items: baseline;
-}
-.elbe {
-  /* ========== JUSTIFY =========== */
-}
-.elbe .main-start {
-  justify-content: flex-start;
-}
-.elbe .main-center, .elbe dialog {
-  justify-content: center;
-}
-.elbe .main-end {
-  justify-content: flex-end;
-}
-.elbe .main-between {
-  justify-content: space-between;
-}
-.elbe .main-around {
-  justify-content: space-around;
-}
-.elbe .main-evenly {
-  justify-content: space-evenly;
-}
-.elbe {
-  /* ========== RESPONSIVE =========== */
-}
-@media (max-width: 700px) {
-  .elbe .row-resp {
-    flex-direction: column;
-  }
-  .elbe .resp-reversed {
-    flex-direction: column-reverse;
-  }
-  .elbe .if-wide {
-    display: none;
-  }
-}
-@media (min-width: 700px) {
-  .elbe .if-narrow {
-    display: none;
-  }
-}
-.elbe .wrap {
-  flex-wrap: wrap;
-}
-.elbe .c_from_context, .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 {
-  background-color: var(--c-context-back);
-  color: var(--c-context-front);
-  border: var(--g-border-width) solid var(--c-context-border);
-}
-.elbe .borderless {
-  border: none;
-}
-.elbe .bordered.bordered.bordered.bordered.bordered {
-  border: var(--g-border-width) solid var(--c-context-border);
+#elbe_app * i, #elbe_app * em, #elbe_dialog * i, #elbe_dialog * em,
+#elbe_tooltip * i,
+#elbe_tooltip * em, #elbe_toast * i, #elbe_toast * em {
+  font-style: italic;
 }
-.elbe .no-scrollbar {
+
+.elbe_no-scrollbar {
   scrollbar-width: none; /* Firefox */
   -ms-overflow-style: none; /* Internet Explorer and Edge */
 }
-.elbe .no-scrollbar::-webkit-scrollbar {
+.elbe_no-scrollbar::-webkit-scrollbar {
   display: none; /* Safari and Chrome */
 }
-.elbe button {
-  justify-content: center;
-  padding: 0.25rem 0.75rem;
-  gap: 0.5rem;
-  min-height: 3rem;
-  cursor: pointer;
-  color: inherit;
-  background-color: inherit;
+
+.elbe_scrollbars-hidden {
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* Internet Explorer and Edge */
 }
-.elbe button:not(.dummy_class_001) {
-  border: none;
+.elbe_scrollbars-hidden::-webkit-scrollbar {
+  display: none; /* Safari and Chrome */
 }
-.elbe button {
-  /*& > .lucide {
-    & + div {
-      text-align: center;
-      flex: 1;
-      text-align: center;
-    }
-  }
 
-  &.text-left {
-    text-align: left;
-    div {
-      margin-left: 0.25rem;
-      text-align: left;
-    }
-  }*/
-}
-.elbe .icon {
-  aspect-ratio: 1;
-  border-radius: 25%;
-  object-fit: cover;
-}
-.elbe select {
-  padding: 0 0.75rem;
-  height: 3rem;
-  min-width: 12rem;
-  width: 100%;
+.elbe_colored {
+  color: var(--elbe-context-color-front);
+  background-color: var(--elbe-context-color-back);
+  border-color: var(--elbe-context-color-border);
 }
-.elbe.dark dialog[open=""] > div {
-  border-width: var(--g-border-width);
-  border-style: solid;
-  border-color: var(--c-context-border);
+
+input[type=checkbox] {
+  -webkit-appearance: none;
+  appearance: none;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
-.elbe .elbe_dialog_base.elbe_dialog_base.elbe_dialog_base {
-  transform: scale(0.95);
-  opacity: 0;
-  transition: opacity 0.3s, transform 0.3s ease-in-out;
+
+input[type=checkbox]::after {
+  content: "";
+  width: 0.95rem;
+  height: 0.75rem;
+  clip-path: polygon(10% 41%, 37% 75%, 91% 0, 100% 13%, 38% 100%, 0 55%);
+  transform: scale(0);
+  transform-origin: center;
+  transition: 0.2s all ease-in-out;
+  background-color: var(--elbe-context-color-front);
+  z-index: 1;
 }
-.elbe dialog {
-  z-index: 100;
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  border: none;
-  pointer-events: none;
-  background-color: transparent;
-  backdrop-filter: blur(0px) brightness(1);
-  transition: backdrop-filter 0.3s ease-in-out;
-  /*& > *:not(.elbe_dialog_base) {
-    display: none;
-  }*/
-}
-.elbe dialog[open=""] {
-  backdrop-filter: blur(5px) brightness(0.7);
-  pointer-events: all;
-}
-.elbe dialog[open=""] > * {
-  display: unset;
-  max-width: 100vw;
-}
-.elbe dialog[open=""] .elbe_dialog_base.elbe_dialog_base.elbe_dialog_base {
-  opacity: 1;
+
+input[type=checkbox]:checked::after {
   transform: scale(1);
 }
-.elbe .expandable {
-  max-height: 0px;
-  transition: max-height 0.25s ease-out;
-  overflow: hidden;
-}
-.elbe .expandable:has(*) {
-  max-height: 500px;
-  transition: max-height 0.25s ease-in;
-}
-.elbe .header {
-  width: 100%;
-  position: fixed;
-  left: 0;
-  top: 0;
-  display: flex;
-  font-size: 1.25rem;
-  font-weight: 900;
-  border-width: 20px;
-  border-style: solid;
-  border-width: 0 0 2px 0;
-  padding: 0 0.5rem;
-  z-index: 20;
-  box-sizing: border-box;
-  justify-content: space-between;
-  align-items: center;
-}
-.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_tooltip {
+  animation: elbe_tooltip_fadein 0.15s ease-in-out forwards;
 }
-.elbe .text_field_base:has(:focus) {
-  outline: max(2px, 0.15em) solid var(--c-accent);
+
+@keyframes elbe_tooltip_fadein {
+  from {
+    opacity: 0;
+    scale: 0.95;
+  }
+  to {
+    opacity: 1;
+    scale: 1;
+  }
 }
-.elbe.highvis input[type=range]::-webkit-slider-thumb {
-  border-width: var(--g-border-width);
+input[type=range]::-webkit-slider-thumb {
+  border-width: var(--elbe-context-geometry-border-width);
   border-style: solid;
-  border-color: var(--c-context-back);
+  border-color: var(--elbe-context-color-back);
 }
-.elbe.highvis input[type=range]::-moz-range-thumb {
-  border-width: var(--g-border-width);
+input[type=range]::-moz-range-thumb {
+  border-width: var(--elbe-context-geometry-border-width);
   border-style: solid;
-  border-color: var(--c-context-back);
+  border-color: var(--elbe-context-color-back);
 }
-.elbe input[type=range] {
+
+input[type=range] {
   -webkit-appearance: none;
   appearance: none;
   width: 100%;
   height: 0.4rem;
-  background-color: var(--c-context-back);
+  background-color: var(--elbe-context-color-back);
   outline: none;
   -webkit-transition: 0.2s;
   transition: background-color 0.2s;
 }
-.elbe input[type=range]:hover {
-  background-color: var(--c-context-back);
+input[type=range]:hover {
+  background-color: var(--elbe-context-color-back);
 }
-.elbe input[type=range]::-webkit-slider-thumb {
+input[type=range]::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
-  width: 1.5rem;
-  height: 1.5rem;
-  border-radius: var(--g-radius);
-  background: var(--c-context-front);
-  border: none;
+  width: 1rem;
+  height: 1rem;
+  border-radius: var(--elbe-context-geometry-border-radius);
+  background-color: var(--elbe-range-dot-back);
+  border: 0.25rem solid var(--elbe-range-dot-border);
   outline: none;
   cursor: pointer;
 }
-.elbe input[type=range]::-moz-range-thumb {
-  width: 1.5rem;
-  height: 1.5rem;
-  border-radius: var(--g-radius);
-  background: var(--c-context-front);
-  border: none;
+input[type=range]::-moz-range-thumb {
+  width: 1rem;
+  height: 1rem;
+  border-radius: var(--elbe-context-geometry-border-radius);
+  background-color: var(--elbe-range-dot-back);
+  border: 0.25rem solid var(--elbe-range-dot-border);
   outline: none;
   cursor: pointer;
 }
-.elbe {
-  /*input[type="range"] {
-    -webkit-appearance: none;
-    appearance: none;
-    background: green;
-    cursor: pointer;
-    width: 15rem;
-
-    &::-moz-range-track{
-      background-color: var(--c-context-border);
-      border-radius: 100px;
-      border: none;
-      height: 0.5rem;
-    }
 
-    &::-webkit-slider-runnable-track
-    {
-      border-radius: 100px;
-      border: none;
-      height: 0.5rem;
-    }
-
-    &::-webkit-slider-thumb
-    {
-
-      border: none;
-      -webkit-appearance: none; // Override default look
-      appearance: none;
-      margin-top: -6px;
-      border-radius: 100px;
-      height: 1.2rem;
-      width: 1.2rem;
-    }
-  }*/
-}
-.elbe input[type=checkbox] {
-  -webkit-appearance: none;
-  appearance: none;
-  margin: 0;
-  font: inherit;
-  width: 1.8rem;
-  height: 1.8rem;
-  border-width: var(--g-border-width);
-  border-radius: var(--g-radius);
-  border-style: solid;
-  transform: translateY(-0.075em);
-  display: grid;
-  place-content: center;
-  outline: none;
+.toast-animated {
+  animation: toast-animated_fadein 0.2s ease-out;
 }
-.elbe input[type=checkbox]::before {
-  content: "";
-  width: 0.95rem;
-  height: 0.75rem;
-  clip-path: polygon(10% 41%, 37% 75%, 91% 0, 100% 13%, 38% 100%, 0 55%);
-  transform: scale(0);
-  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);
-}
-.elbe input[type=checkbox]:focus {
-  outline: max(2px, 0.15em) solid var(--c-accent);
-  outline-offset: 0;
-}
-.elbe input[type=checkbox]:not(:checked):disabled {
-  cursor: not-allowed;
-  border: 0.16em solid var(--c-context-border);
-}
-.elbe.highvis 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 button > * {
-  flex-shrink: 0;
-}
-.elbe ._elbe_tooltip {
-  position: fixed;
-  background-color: black;
-  color: white;
-  padding: 0.25rem 0.5rem;
-  border-radius: 0.25rem;
-  font-size: 1rem;
-  white-space: nowrap;
-  z-index: 101;
-  pointer-events: none;
-}
-@keyframes _tt_show {
-  100% {
+
+@keyframes toast-animated_fadein {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
     opacity: 1;
+    transform: translateY(0);
   }
 }
-.elbe .toast {
+.toast {
+  background-color: black;
+  color: white;
+  border-radius: 0.5rem;
+  padding: 1rem;
+  box-shadow: 0px 0px 1rem -0.5rem black;
+  font-weight: bold;
   position: fixed;
   bottom: 1rem;
   right: 1rem;
@@ -638,9 +218,7 @@ body,
   transform: translateX(-50%);
   animation: toast_fadeIn 0.2s ease-out;
 }
-.elbe.reduced_motion .toast {
-  animation: none;
-}
+
 @keyframes toast_fadeIn {
   from {
     opacity: 0;
@@ -651,27 +229,37 @@ body,
     transform: translateX(-50%) translateY(0);
   }
 }
-.elbe {
-  /*@keyframes toast_fadeOut {
-    from {
-      opacity: 1;
-    }
-    to {
-      opacity: 0;
-    }
-  }*/
+/* AnimatedDialog.css */
+.elbe_dialog-base {
+  animation: elbe_dialog-fadeIn 0.3s;
 }
-.elbe :focus-visible {
-  outline: 0.15rem solid var(--c-accent);
+
+.elbe_dialog-base dialog {
+  animation: elbe_dialog-scaleIn 0.3s;
 }
-.elbe :active {
-  outline: none;
+
+@keyframes elbe_dialog-fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
-.elbe.dark :focus-visible {
-  outline: 0.15rem solid white;
+@keyframes elbe_dialog-scaleIn {
+  from {
+    transform: scale(0.8);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
 }
-.elbe {
-  width: 100vw;
+._color_from_context {
+  background-color: var(--c-context-back);
+  color: var(--c-context-front);
+  border: var(--g-border-width) solid var(--c-context-border);
 }
 
 ._elbe_tooltip {