@exakt/ui 0.0.55 → 0.0.58

package/dist/module.d.ts

@@ -28,6 +28,6 @@ interface ModuleOptions {
         weight?: number;
     };
 }
-declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 
 export { ModuleOptions, _default as default };

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "exakt-ui",
   "configKey": "exakt",
-  "version": "0.0.55"
+  "version": "0.0.58"
 }

package/dist/module.mjs

@@ -1,4 +1,4 @@
-import { defineNuxtModule, createResolver, addPlugin, extendViteConfig, addImportsSources, addComponentsDir } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, addPlugin, extendViteConfig, addComponentsDir } from '@nuxt/kit';
 import fs from 'fs';
 
 const defaults = {
@@ -31,7 +31,7 @@ const defaults = {
   },
   borderRadius: "8px",
   corePaddingX: "1rem",
-  font: { family: "Roboto, sans-serif", weight: 400 }
+  font: { family: "Open Sans, sans-serif", weight: 400 }
 };
 const module = defineNuxtModule({
   meta: {
@@ -79,20 +79,18 @@ const module = defineNuxtModule({
         css: {
           preprocessorOptions: {
             scss: {
-              additionalData: `@use "sass:color"; @use "sass:map"; @import "${resolver.resolve(
+              api: "modern-compiler",
+              additionalData: `@use "sass:color"; @use "sass:map"; @use "${resolver.resolve(
                 "../node_modules/.cache/exakt-ui/variables.scss"
-              )}";  `
+              )}" as exakt;  `
             }
           }
         }
       });
     });
-    addImportsSources({
-      from: "material-symbols",
-      imports: ["material-symbols"]
-    });
     nuxt.options.css.push(resolver.resolve("./runtime/css/main.scss"));
     nuxt.options.css.push(resolver.resolve("./runtime/css/util.scss"));
+    nuxt.options.css.push("material-symbols");
     nuxt.options.css.push(
       resolver.resolve("../node_modules/.cache/exakt-ui/variables.css")
     );

package/dist/runtime/components/e/alert.vue

@@ -1,13 +1,20 @@
 <template>
-  <div class="flex-center color-red">
+  <div
+    class="flex-center"
+    :class="{ [severityMatrix[severity].class]: true }"
+  >
     <e-icon
-      
       size="19"
       class="mr-2"
     >
-      warning
-    </e-icon><small><slot /></small>
+      {{ severityMatrix[severity].icon }}
+    </e-icon><small>
+      <slot />
+    </small>
   </div>
 </template>
 <script setup lang="ts">
+withDefaults(defineProps<{ severity?: 0 | 1 | 2 }>(), { severity: 2 })
+
+const severityMatrix = { 0: { icon: "info", class: "" }, 1: { icon: "warning", class: "color-yellow" }, 2: { icon: "warning", class: "color-red" } }
 </script>

package/dist/runtime/components/e/app-bars.vue

@@ -93,7 +93,7 @@ const props = withDefaults(
   align-items: stretch;
 }
 
-@media screen and (max-width: ($e-md-screen-breakpoint)) {
+@media screen and (max-width: (exakt.$e-md-screen-breakpoint)) {
   .title-bar {
     display: unset;
     top: 0px;

package/dist/runtime/components/e/avatar.vue

@@ -25,7 +25,7 @@
 const props = withDefaults(defineProps<{
   src?: string;
   size?: number;
-}>(), { size: 120 });
+}>(), { size: 120, src: undefined });
 </script>
 <style lang="scss" scoped>
 .avatar {

package/dist/runtime/components/e/btn.vue

@@ -11,9 +11,9 @@
       block,
       rounded: solid,
       'e-disabled': disabled,
-      'my-2': solid,
       loading,
       fab,
+      compact,
       ...backgroundClass
     }"
   >
@@ -50,6 +50,7 @@ const props = withDefaults(
     active?: boolean;
     inactive?: boolean;
     solid?: boolean;
+    compact?: boolean;
     color?: string;
     background?: string;
     block?: boolean;
@@ -65,6 +66,7 @@ const props = withDefaults(
     solid: true,
     width: undefined,
     justify: "center",
+    compact: false,
     align: "center",
     color: undefined,
   }
@@ -88,13 +90,13 @@ const backgroundColorRgb = computed(() => {
   return parseColor($exakt.parseColor(props.background));
 });
 
-const isRootColor = computed(() => $exakt.rootColors.includes(props.background))
+const isRootColor = computed(() =>  $exakt&&$exakt.rootColors && $exakt.rootColors.includes(props.background))
 const backgroundClass = computed(() => {
   const c: { [key: string]: boolean } = {}
 
-  if(props.background == 'transparent'){
+  if (props.background == 'transparent') {
     c['transparent'] = true;
-  }else if (isRootColor.value) {
+  } else if (isRootColor.value) {
     c["bg-" + props.background] = true
   } else {
     c['custom-color'] = true
@@ -170,9 +172,10 @@ const textColor = computed(() => {
   &.transparent {
     color: var(--e-color-text);
     background: rgba(0, 0, 0, 0);
+
     &:hover {
-       background: rgba(98, 98, 98, 0.15);
-       opacity: 1;
+      background: rgba(98, 98, 98, 0.15);
+      opacity: 1;
     }
   }
 
@@ -190,8 +193,8 @@ const textColor = computed(() => {
   }
 
   &:hover {
-   // background: rgba(98, 98, 98, 0.15);
-   opacity: 0.7;
+    // background: rgba(98, 98, 98, 0.15);
+    opacity: 0.7;
     border: transparent solid 0.1rem;
   }
 
@@ -220,17 +223,30 @@ const textColor = computed(() => {
     background-color: v-bind(backgroundColor);
     color: v-bind(textColor);
 
-   /* &:hover {
+    /* &:hover {
       opacity: 0.9;
     } */
   }
 
   &.solid {
     padding: 0.7rem 0.9rem;
+
+    &.compact {
+      padding: 0.6rem 0.8rem;
+    }
   }
 
   &.active {
     color: var(--e-color-primary);
+
+    &.transparent {
+      background: rgba(var(--e-color-primary-rgb), 0.1);
+
+      &:hover {
+        background: rgba(var(--e-color-primary-rgb),0.075);
+        opacity: 1;
+      }
+    }
   }
 
   &.inactive {
@@ -239,7 +255,7 @@ const textColor = computed(() => {
   }
 }
 
-@media screen and (max-width: $e-md-screen-breakpoint) {
+@media screen and (max-width: exakt.$e-md-screen-breakpoint) {
   .e-btn.fab {
     right: 1rem;
   }

package/dist/runtime/components/e/chip.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="e-chip py-3 px-4 ma-1 d-flex flex-center"
+    class="e-chip py-3 px-4 ma-1 flex-center"
     :class="{ active, 'bg-i-active':active, 'bg-i-inactive':!active }"
     @click="active = !active"
   >
@@ -46,6 +46,7 @@ const active = computed({
     user-select: none;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     cursor: pointer;
+    display: inline-flex;
 
     &>.check {
         display: none;

package/dist/runtime/components/e/container.vue

@@ -30,7 +30,7 @@ withDefaults(
 
   width: 95%;
 
-  @media (max-width: $e-md-screen-breakpoint) {
+  @media (max-width: exakt.$e-md-screen-breakpoint) {
     &.forceFullWidth {
       width: 100%;
     }
@@ -38,15 +38,15 @@ withDefaults(
 
   $padding: 0rem;
 
-  @media (min-width: $e-md-screen-breakpoint) {
+  @media (min-width: exakt.$e-md-screen-breakpoint) {
     width: calc(100% - $padding);
   }
 
-  @media (min-width: $e-lg-screen-breakpoint) {
+  @media (min-width: exakt.$e-lg-screen-breakpoint) {
     width: calc(95% - $padding);
   }
 
-  @media (min-width: $e-xl-screen-breakpoint) {
+  @media (min-width: exakt.$e-xl-screen-breakpoint) {
     width: calc(85% - $padding);
   }
 }

package/dist/runtime/components/e/dialog.vue

@@ -51,7 +51,7 @@ const emit = defineEmits(["update:modelValue"]);
   overflow: clip;
 }
 
-@media (max-width: $e-md-screen-breakpoint) {
+@media (max-width: exakt.$e-md-screen-breakpoint) {
   .dialog {
     width: 100%;
     max-width: 100vw;

package/dist/runtime/components/e/dropdown.vue

@@ -73,7 +73,7 @@ const props = withDefaults(
     position?: { x: number, y: number }
     fixed?:boolean;
   }>(),
-  { center: false, visible: null, paddingY: "", modelValue: undefined }
+  { center: false, visible: null, paddingY: "", modelValue: undefined, position: undefined}
 );
 
 const activator = ref<HTMLDivElement>();
@@ -230,7 +230,7 @@ const onActivatorClick = () => {
   }
 }
 
-@media screen and (max-width: $e-md-screen-breakpoint) {
+@media screen and (max-width: exakt.$e-md-screen-breakpoint) {
   .list {
     position: fixed;
     top: unset;

package/dist/runtime/components/e/focus-sheet.vue

@@ -33,7 +33,7 @@ const emit = defineEmits(["update:modelValue"]);
   }
 }
 
-@media screen and (max-width: $e-md-screen-breakpoint) {
+@media screen and (max-width: exakt.$e-md-screen-breakpoint) {
   .focus-sheet {
     background-color: rgba(var(--e-color-bg-rgb), 0.7);
   }

package/dist/runtime/components/e/iconButton.vue

@@ -8,7 +8,7 @@
   >
     <e-icon
       v-if="icon"
-      
+      :fill="fill"
       :size="size"
     >
       {{ icon }}
@@ -18,8 +18,8 @@
 </template>
 <script setup lang="ts">
 withDefaults(
-  defineProps<{ icon?: string; size?: string; loading?: boolean, type?: "button" | "submit" | "reset" }>(),
-  { size: "21" }
+  defineProps<{ icon?: string; size?: number|`${number}`; loading?: boolean, type?: "button" | "submit" | "reset", fill?: boolean }>(),
+  { size: "21", icon: undefined, type:undefined }
 );
 </script>
 <style scoped>

package/dist/runtime/components/e/input/datetime-local.vue

@@ -0,0 +1,98 @@
+<template>
+  <div>
+    <div
+      v-if="label"
+      class="pb-2"
+    >
+      <label
+        :for="id"
+        class="text-secondary"
+      >{{ label }}</label>
+    </div>
+    <input
+      :id="id"
+      v-model="currentText"
+      type="datetime-local"
+      class="py-3 px-4"
+      :name="name"
+      :required="required"
+      :disabled="disabled"
+    >
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, computed, useId, onMounted } from "#imports";
+
+
+const props = withDefaults(
+    defineProps<{
+        label?: string;
+        name?: string;
+        modelValue?: string;
+        defaultValue?: string;
+        disabled?: boolean;
+        required?: boolean;
+    }>(),
+    {
+        label: "",
+        modelValue: "",
+        name: undefined,
+        defaultValue: undefined
+    }
+);
+
+const id = useId();
+
+const internalText = ref<string | null>(null)
+const emit = defineEmits(["update:modelValue"]);
+
+
+const currentText = computed({
+    get: () => {
+        const setValue = props.modelValue == undefined ? internalText.value : props.modelValue
+
+        if (!setValue || !setValue.length) {
+            return props.defaultValue || ''
+        }
+
+        return setValue
+    },
+    set: (value) => { if (props.modelValue == undefined) { internalText.value = value } else { emit("update:modelValue", value) } },
+});
+
+onMounted(() => {
+    if (props.defaultValue) {
+        currentText.value = props.defaultValue
+    }
+})
+
+
+</script>
+<style lang="scss" scoped>
+
+input[type=datetime-local] {
+    border-radius: var(--e-rounded-border-radius);
+    border: none;
+    outline: var(--e-color-i-outline) solid 0.1rem;
+    background-color: var(--e-color-i-depressed);
+
+    transition: outline ease-in-out 0.15s, background-color ease-in-out 0.15s;
+
+    &:active {
+        background-color: var(--e-color-i-depressed-2) !important;
+        outline: var(--e-color-primary) solid 0.2rem !important;
+    }
+
+    &:focus-within {
+        outline: var(--e-color-primary) solid 0.125rem;
+        //box-shadow: 0 0 0 0.125rem  var(--e-color-primary);
+        background-color: var(--e-color-i-depressed-active);
+    }
+
+}
+
+
+::-webkit-datetime-edit {
+    font-family: var(--e-font-family);
+}
+</style>

package/dist/runtime/components/e/input/text.vue

@@ -1,58 +1,60 @@
 <template>
-  <div
-    v-if="label"
-    class="mb-3 mt-6"
-  >
-    <label :for="id">
-      {{ label }} </label>
-  </div>
-
-  <div
-    class="wrapper fullwidth"
-    :style="inputState.overtakeStyle"
-    :class="{ rounded: rounded == undefined ? solid : rounded, solid }"
-    @click="focus"
-  >
-    <e-icon
-      v-if="icon"
-      class="mr-2"
-      size="19"
-      fill="true"
+  <div>
+    <div
+      v-if="label"
+      class="mb-3 mt-6"
     >
-      {{ icon }}
-    </e-icon>
-    <textarea
-      v-if="type === 'textarea'"
-      ref="input"
-      v-model="currentText"
-      class="input"
-      :name="name"
-      :placeholder="placeholder"
-      autocomplete="off"
-      auto-grow
-      rows="5"
-      @focus="inputState.focused = true"
-      @blur="inputState.focused = false"
-    />
-    <input
-      v-else
-      :id="id"
-      ref="input"
-      v-model="currentText"
-      :disabled="disabled"
-      :type="type"
-      :name="name"
-      :autocomplete="autocomplete"
-      :spellcheck="spellcheck"
-      class="input"
-      :required="required"
-      :placeholder="placeholder"
-      @click.stop=""
-      @focus="inputState.focused = true"
-      @blur="inputState.focused = false"
-      @transitionend="transitionEnd"
+      <label :for="id">
+        {{ label }} </label>
+    </div>
+
+    <div
+      class="wrapper fullwidth"
+      :style="inputState.overtakeStyle"
+      :class="{ rounded: rounded == undefined ? solid : rounded, solid, compact }"
+      @click="focus"
     >
-    <slot />
+      <e-icon
+        v-if="icon"
+        class="mr-2"
+        size="19"
+        fill="true"
+      >
+        {{ icon }}
+      </e-icon>
+      <textarea
+        v-if="type === 'textarea'"
+        ref="input"
+        v-model="currentText"
+        class="input"
+        :name="name"
+        :placeholder="placeholder"
+        autocomplete="off"
+        auto-grow
+        rows="5"
+        @focus="inputState.focused = true"
+        @blur="inputState.focused = false"
+      />
+      <input
+        v-else
+        :id="id"
+        ref="input"
+        v-model="currentText"
+        :disabled="disabled"
+        :type="type"
+        :name="name"
+        :autocomplete="autocomplete"
+        :spellcheck="spellcheck"
+        class="input"
+        :required="required"
+        :placeholder="placeholder"
+        @click.stop=""
+        @focus="inputState.focused = true"
+        @blur="inputState.focused = false"
+        @transitionend="transitionEnd"
+      >
+      <slot />
+    </div>
   </div>
 </template>
 <script setup lang="ts">
@@ -85,11 +87,12 @@ const focus = () => {
   input.value.focus();
 };
 
-const internalText = ref('')
+const internalText = ref<string | null>(null)
+
 
 const currentText = computed({
   get: () => {
-    const setValue = props.modelValue ? props.modelValue : internalText.value
+    const setValue = props.modelValue == undefined ? internalText.value : props.modelValue
 
     if (!setValue || !setValue.length) {
       return props.defaultValue || ''
@@ -97,7 +100,7 @@ const currentText = computed({
 
     return setValue
   },
-  set: (value) => { if (props.modelValue) { emit("update:modelValue", value) } else { internalText.value = value } },
+  set: (value) => { if (props.modelValue == undefined) { internalText.value = value } else { emit("update:modelValue", value) } },
 });
 
 onMounted(() => {
@@ -123,6 +126,8 @@ const props = withDefaults(
     focus?: boolean;
     spellcheck?: boolean;
     height?: string;
+
+    compact?: boolean;
   }>(),
   {
     icon: undefined,
@@ -132,7 +137,11 @@ const props = withDefaults(
     modelValue: "",
     autocomplete: "off",
     height: "unset",
+    compact: false,
     rounded: undefined,
+    placeholder: undefined,
+    name: undefined,
+    defaultValue: undefined
   }
 );
 
@@ -240,10 +249,20 @@ const transitionEnd = () => {
 }
 
 .wrapper.solid {
-  padding: 15px;
+  padding: 0.8rem 1rem;
   background-color: var(--e-color-i-depressed);
+
+  @media screen and (min-width: exakt.$e-md-screen-breakpoint) {
+    &.compact {
+      padding: 0.6rem 0.8rem;
+    }
+  }
 }
 
+
+
+
+
 .fullwidth {
   width: 100%;
 }

package/dist/runtime/components/e/nav/bar.vue

@@ -1,16 +1,6 @@
 <template>
-  <nav
-    class="nav bg-elev e-blur"
-    :class="{ fixed }"
-  >
-    <e-container
-      :no-btn-padding="true"
-      :force-full-width="true"
-    >
-      <div class="nav-content">
-        <slot />
-      </div>
-    </e-container>
+  <nav :class="{ fixed }">
+    <slot />
   </nav>
 </template>
 <script setup lang="ts">
@@ -21,23 +11,39 @@ defineProps<{
 //const colorFromScriptSetup = "green";
 </script>
 <style lang="scss" scoped>
-.nav-content {
-  display: flex;
-  align-items: stretch;
-  height: 100%;
-}
 
-.nav {
-  z-index: 5;
-  height: 3.5rem;
-  box-shadow: 0 0 0 0.06rem rgba(0, 0, 0, 0.12) !important;
 
-  position: sticky;
+nav {
+  z-index: 5;
+  min-height: 3.5rem;
+  border-radius: var(--e-rounded-border-radius);
+  background: var(--e-color-bg);
+  overflow-y: none;
+  display: flex;
+  align-items: center;
+ // position: sticky;
   top: 0;
+  left: 0;
 }
 
-.nav.fixed {
+nav.fixed {
   position: fixed;
   width: 100%;
 }
+
+
+@media screen and (max-width: exakt.$e-md-screen-breakpoint) {
+  nav {
+    position: fixed;
+    bottom: 0;
+    top: unset;
+    border-radius: 0;
+    width: 100%;
+    justify-content: stretch;
+    margin: 0 !important;
+    padding: 0.2rem 0.6rem calc(0.2rem + env(safe-area-inset-bottom)) 0.6rem ;
+    background: var(--e-color-elev);
+  }
+}
+
 </style>

package/dist/runtime/components/e/nav/btn.vue

@@ -1,45 +1,41 @@
 <template>
-  <div class="flex-stretch nav-btn">
-    <e-undecorated-link
-      :to="to"
-      class="flex-stretch fullwidth"
+  <e-undecorated-link
+    :to="to"
+    class="grow-on-mobile"
+  >
+    <e-btn
+      :solid="true"
+      background="transparent"
+      class="nav-btn grow-on-mobile"
+      align="center"
+      :active="active"
     >
-      <e-btn
-        :active="active"
-        class="button fullwidth"
-        :inactive="inactive"
-        :solid="false"
-        background="transparent"
-        :class="{ responsive }"
-      >
-        <div class="content">
-          <div
-            v-if="icon"
-            class="icon-wrapper flex-center"
-            :class="{ 'mr-2': label, 'mx-4': !label }"
+      <div class="content">
+        <div
+          v-if="icon"
+          class="icon-wrapper flex-center mr-2"
+        >
+          <e-icon
+            class="icon"
+            size="20"
+            :fill="active"
           >
-            <e-icon
-              
-              class="icon"
-              :size="size"
-            >
-              {{ icon }}
-            </e-icon>
-            <transition name="fade">
-              <div
-                v-if="alert"
-                class="icon-alert"
-              />
-            </transition>
-          </div>
-          <p v-if="label">
-            {{ label }}
-          </p>
+            {{ icon }}
+          </e-icon>
+          <transition name="fade">
+            <div
+              v-if="alert"
+              class="icon-alert"
+            />
+          </transition>
         </div>
+        <p v-if="label">
+          {{ label }}
+        </p>
         <slot />
-      </e-btn>
-    </e-undecorated-link>
-  </div>
+      </div>
+    </e-btn>
+  </e-undecorated-link>
 </template>
 <script setup lang="ts">
 import { useRoute } from "vue-router";
@@ -50,55 +46,47 @@ const props = withDefaults(
     to?: string;
     label?: string;
     icon?: string;
-    size?: string;
-    responsive?: boolean;
     alert?: boolean;
   }>(),
-  { to: "", label: "", icon: "", responsive: true, size: "20" }
+  { to: "", label: "", icon: "" }
 );
 
 const route = useRoute();
 
-const aspect = computed(() => {
-  if (props.icon) {
-    return "3/2";
-  }
 
-  return "unset";
-});
 
 const active = computed(() => {
   return route && route.path === props.to;
 });
-const inactive = computed(() => {
-  return !active.value && Boolean(props.icon);
-});
+
 </script>
 
 <style scoped lang="scss">
+/*a.router-link-active > .nav-btn {
+  color:var(--e-color-primary) !important;
+  background-color: rgba(var(--e-color-primary-rgb), 0.075);
+}*/
 
-.nav-btn{
-  flex-grow: 1;
-}
-.button:first-child {
-  aspect-ratio: unset;
 
-  .content {
-    display: flex;
 
-    flex-direction: row;
+.content {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-content: center;
+  justify-items: center;
+  align-items: center;
 
-    justify-content: center;
-    align-content: center;
-    justify-items: center;
-    align-items: center;
+  p {
+    margin: 0;
+    padding: 0;
+    white-space: nowrap;
 
-    .icon {
-      font-size: 1.5rem;
-    }
   }
+
 }
 
+
 .icon-wrapper {
   position: relative;
   box-sizing: border-box;
@@ -114,26 +102,31 @@ const inactive = computed(() => {
     border-radius: 100%;
     bottom: 0.1rem;
     right: 0px;
-    background-color: var(--t-color-primary);
-    outline: 0.1rem solid var(--t-elev-2);
+    background-color: var(--e-color-primary);
+    outline: 0.1rem solid var(--e-color-elev);
   }
 }
 
-@media screen and (max-width: $e-md-screen-breakpoint) {
-  .button.responsive {
-    aspect-ratio: v-bind(aspect);
 
-    p {
-      margin: 0px;
-      white-space: nowrap;
-    }
+@media screen and (max-width: exakt.$e-md-screen-breakpoint) {
+
+  .grow-on-mobile {
+    flex-grow: 1;
+    width: 100%;
+  }
 
-    .content {
-      flex-direction: column;
+  p {
+    margin: 0px;
+    white-space: nowrap;
+    font-size: small;
+
+  }
+
+  .content {
+    flex-direction: column;
 
-      .icon-wrapper {
-        margin-right: 0rem;
-      }
+    .icon-wrapper {
+      margin-right: 0rem;
     }
   }
 }

package/dist/runtime/components/e/nav/sidebar.vue

@@ -65,7 +65,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { computed, reactive } from "#imports";
+import { computed } from "#imports";
 const props = withDefaults(
   defineProps<{
     collapsedWidth?: number | string;
@@ -91,9 +91,7 @@ const props = withDefaults(
     nestingLevel: 0,
   }
 );
-const state = reactive({
-  hover: false,
-});
+
 
 const background = computed(() =>
   Number(props.elev) == 1

package/dist/runtime/components/e/nav/titlebar.vue

@@ -1,16 +1,26 @@
 
 
 <template>
-  <div class="titlebar d-flex flex-align-center bg-elev-2">
-    <h4>Title</h4>
-  </div>
+  <header class="d-flex flex-align-center">
+    <h1><slot /></h1>
+  </header>
 </template>
 <style lang="scss" scoped>
-.titlebar{
+header{
     position: sticky;
     top:0;
     left:0;
     height:3.5rem;
-    padding-left: 3.5rem;
+    font-size: 0.75rem;
+}
+
+@media screen and (max-width: exakt.$e-md-screen-breakpoint) {
+  header {
+    position: fixed;
+    font-size: 0.5rem;
+    border-radius: 0;
+    width: 100%;
+    background: var(--e-color-elev);
+  }
 }
 </style>

package/dist/runtime/css/main.scss

@@ -1,3 +1,29 @@
+/* CSS Reset */
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	vertical-align: baseline;
+  box-sizing: border-box;
+}
+
+$margin-step: 0.2rem;
+
+
+
 /* This is very much a hack, but it will have to do for now */
 
 .rounded {
@@ -46,7 +72,7 @@ a {
   :root {
     @each $name, $color in $color-map {
       #{'--e-color-'+$name}: $color;
-      #{'--e-color-'+$name+'-rgb'}: red($color), green($color), blue($color);
+      #{'--e-color-'+$name+'-rgb'}: color.channel($color, "red", $space: rgb), color.channel($color, "green", $space: rgb), color.channel($color, "blue", $space: rgb);
 
     }
   }
@@ -55,12 +81,12 @@ a {
     .bg-#{$name} {
       background: $color;
 
-      @if (color.lightness($color) > 49%) {
-        color: map.get($root-colors-light, "text");
+      @if (color.channel($color, "lightness", $space: hsl) > 49%) {
+        color: map.get(exakt.$root-colors-light, "text");
       }
 
       @else {
-        color: map.get($root-colors-dark, "text");
+        color: map.get(exakt.$root-colors-dark, "text");
       }
     }
 
@@ -70,10 +96,10 @@ a {
   }
 }
 
-@mixin elev($lightness, $light, $color-map) {
+@mixin elev($lightness, $contrast, $light, $color-map) {
 
-  $source: hsl($root-hue, 15%, $lightness);
-  $source-i: color.change($source, $saturation: 20%);
+  $source: hsl(exakt.$root-hue, 8%, $lightness);
+  $source-i: color.change($source, $saturation: 12%);
 
   $full: 0;
   $factor: 1;
@@ -82,6 +108,7 @@ a {
     $full: 100;
     $factor: -1;
   }
+  $color-map: map.set($color-map, "source", $source);
 
   $color-map: map.set($color-map, "i-depressed", color.adjust($source-i, $lightness: -2.5%));
   $color-map: map.set($color-map, "i-depressed-2", color.adjust($source-i, $lightness: -7.5%));
@@ -90,17 +117,18 @@ a {
 
   $color-map: map.set($color-map, "i-inactive", color.adjust($source-i, $lightness: 10%));
   $color-map: map.set($color-map, "i", color.adjust($source-i, $lightness: 20%));
-  $color-map: map.set($color-map, "i-active", color.change(map.get($color-map, "primary"), $lightness: 30%));
+  $color-map: map.set($color-map, "i-active", color.scale(map.get($color-map, "i"), $saturation: 20%));
 
-  $color-map: map.set($color-map, "i-outline", color.change($source-i, $lightness: $full + $factor*30%, $saturation: 20%));
+  $color-map: map.set($color-map, "i-outline", color.change($source-i, $lightness: $full + $factor*30%));
 
-  $color-map: map.set($color-map, "bg", color.adjust($source, $lightness: -2%));
+  $color-map: map.set($color-map, "bg", $source);
   $color-map: map.set($color-map, "fg", color.adjust($source, $lightness: 2%));
 
 
-  $color-map: map.set($color-map, "elev", color.scale($source, $lightness: $lightness));
-  $color-map: map.set($color-map, "elev-2", color.scale($source, $lightness: $lightness));
-  $color-map: map.set($color-map, "elev-3", color.scale($source, $lightness: $lightness));
+  $color-map: map.set($color-map, "elev", color.scale(map.get($color-map, "fg"), $lightness: $lightness*0.25));
+  $color-map: map.set($color-map, "elev-2", color.scale(map.get($color-map, "fg"), $lightness: $lightness*0.5));
+  $color-map: map.set($color-map, "elev-3", color.scale(map.get($color-map, "fg"), $lightness: $lightness));
+
 
 
 
@@ -116,7 +144,7 @@ a {
   color-scheme: light;
 }
 
-@include elev(83%, 1, $root-colors-light);
+@include elev(95%,1, 1, exakt.$root-colors-light);
 
 
 @media (prefers-color-scheme: dark) {
@@ -124,7 +152,7 @@ a {
     color-scheme: dark;
   }
 
-  @include elev(15%, 0, $root-colors-dark);
+  @include elev(8%,1,0, exakt.$root-colors-dark);
 
 
 }

package/dist/runtime/css/util.scss

@@ -158,11 +158,38 @@ body {
   width: 100%;
 }
 
+
+@media screen and (min-width: (exakt.$e-md-screen-breakpoint)) {
+  .md-and-under {
+      display: none !important;
+  
+}
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+@media screen and (max-width: (exakt.$e-md-screen-breakpoint)) {
+  .md-and-over {
+      display: none !important;
+  
+}
+}
+
 .fullsize {
   @extend .fullheight;
   @extend .fullwidth;
 }
 
+.text-left {
+  text-align: left;
+}
+
+.text-right {
+  text-align: right;
+}
+
 .text-center {
   text-align: center;
 }

package/dist/runtime/plugin.d.ts

@@ -1,3 +1,2 @@
-import 'material-symbols';
 declare const _default: any;
 export default _default;

package/dist/runtime/plugin.mjs

@@ -1,5 +1,4 @@
 import { defineNuxtPlugin } from "#app";
-import "material-symbols";
 export default defineNuxtPlugin(() => {
   return {
     provide: {
@@ -34,7 +33,8 @@ export default defineNuxtPlugin(() => {
           }
           return p;
         },
-        rootColors: ["primary", "red", "text", "yellow", "elev"],
+        rootColors: ["primary", "red", "text", "yellow", "elev", "i"],
+        isRootColor: (c) => ["primary", "red", "text", "yellow", "elev", "i"].includes(c),
         /**
          * Generates an alphanumeric ID of a given length.
          */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exakt/ui",
-  "version": "0.0.55",
+  "version": "0.0.58",
   "description": "A UI library for Nuxt.js",
   "license": "MIT",
   "type": "module",
@@ -27,7 +27,6 @@
     "test:watch": "vitest watch"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.2.3",
     "blurhash": "^2.0.5",
     "lodash-es": "^4.17.21",
     "material-symbols": "latest",
@@ -35,8 +34,9 @@
   },
   "devDependencies": {
     "@nuxt/eslint-config": "^0.1.1",
+    "@nuxt/kit": "latest",
     "@nuxt/module-builder": "^0.2.1",
-    "@nuxt/schema": "^3.2.3",
+    "@nuxt/schema": "latest",
     "@nuxt/test-utils": "^3.2.3",
     "@types/lodash": "^4.14.191",
     "@types/lodash-es": "^4.17.9",
@@ -45,7 +45,7 @@
     "eslint": "^8.35.0",
     "eslint-plugin-unused-imports": "^3.0.0",
     "mkdist": "^1.2.0",
-    "nuxt": "^3.12.4",
+    "nuxt": "latest",
     "vitest": "^0.29.2"
   },
   "directories": {