1.0.0-alpha.28

packages/lib/src/App/app-comp.vue

@@ -89,6 +89,7 @@
         variant="outlined"
       />
       <Select placeholder="Select" span multiple :items="['one', 'two']" />
+      <Select placeholder="Select" span :items="['one', 'two']" />
       <div class="flex">
         <Switch />
         <Switch variant="filled" />

packages/lib/src/assets/button.scss

@@ -12,7 +12,7 @@
 .md-chip {
   --size: calc(var(--component-xs) * var(--scale));
 
-  padding-inline: calc(var(--sm) * var(--scale));
+  padding-inline: calc(var(--xs) * var(--scale));
 }
 
 .md-button,

packages/lib/src/assets/input.scss

@@ -48,7 +48,6 @@
     grid-area: input;
     font: inherit;
     width: 100%;
-    min-height: 100%;
     color: currentcolor;
 
     &:focus {
@@ -97,22 +96,26 @@
     transition: all 0.2s;
   }
 
-  &.outlined {
-    border-radius: var(--xxs);
-    box-shadow: 0 0 0 1px inset var(--outline);
+  &[variant='outlined'] {
+    .md-input-wrapper {
+      border-radius: var(--xxs);
+      box-shadow: 0 0 0 1px inset var(--outline);
+    }
 
     &:focus-within .md-input-wrapper {
       box-shadow: 0 0 0 2px inset var(--primary);
     }
   }
 
-  &.outlined &-placeholder {
+  &[variant='outlined'] &-placeholder {
     background: var(--surface);
   }
 
-  &.filled {
-    border-radius: var(--xxs) var(--xxs) 0 0;
-    background: var(--surface-container-highest);
+  &[variant='filled'] {
+    .md-input-wrapper {
+      border-radius: var(--xxs) var(--xxs) 0 0;
+      background: var(--surface-container-highest);
+    }
 
     input {
       padding-top: var(--md);
@@ -123,31 +126,31 @@
     }
   }
 
-  &.filled &-wrapper::before,
-  &.filled &-wrapper::after {
+  &[variant='filled'] &-wrapper::before,
+  &[variant='filled'] &-wrapper::after {
     content: '';
     position: absolute;
     bottom: 0;
     width: 100%;
     height: 2px;
   }
 
-  &.filled &-wrapper::before {
+  &[variant='filled'] &-wrapper::before {
     height: 1px;
     background: var(--on-surface-variant);
   }
 
-  &.filled &-wrapper::after {
+  &[variant='filled'] &-wrapper::after {
     scale: 0 1;
     transition: all 0.2s;
   }
 
-  &.filled &-prefix,
-  &.filled &-suffix {
+  &[variant='filled'] &-prefix,
+  &[variant='filled'] &-suffix {
     padding: var(--md) var(--xs) 0 0;
   }
 
-  &.filled:focus-within &-wrapper::after {
+  &[variant='filled']:focus-within &-wrapper::after {
     background: var(--primary);
     scale: 1 1;
   }
@@ -168,6 +171,7 @@
     width: 100%;
   }
 
+  &[open],
   &:focus-within {
     .md-input-placeholder {
       color: var(--primary);
@@ -188,16 +192,16 @@
     }
   }
 
-  &.filled:focus-within,
-  &.filled:not([empty]) {
+  &[variant='filled']:focus-within,
+  &[variant='filled']:not([empty]) {
     .md-input-placeholder {
       top: var(--xxs);
       font-size: var(--font-sm);
     }
   }
 
-  &.outlined:focus-within,
-  &.outlined:not([empty]) {
+  &[variant='outlined']:focus-within,
+  &[variant='outlined']:not([empty]) {
     .md-input-placeholder {
       left: var(--sm) !important;
       padding-inline: var(--xxs);

packages/lib/src/assets/layout.scss

@@ -18,6 +18,7 @@
   --lg: var(--padding-lg);
   --xl: var(--padding-xl);
   --xxl: var(--padding-xxl);
+  --bottom-offset: 0px;
 
   transform: translate3d(0, 0, 0);
   background: var(--surface);
@@ -33,8 +34,9 @@
   inset: 0;
 
   .md-layout-content {
-    position: absolute;
     inset: 0;
+    position: absolute;
+    bottom: var(--bottom-offset);
   }
 
   &:has(> .md-navbar) {
@@ -67,9 +69,7 @@
     }
 
     &:has(> .md-navbar) {
-      > .md-layout-content {
-        bottom: var(--navbar-size);
-      }
+      --bottom-offset: var(--navbar-size);
     }
   }
 }

packages/lib/src/assets/ripple.scss

@@ -4,7 +4,7 @@
   position: absolute;
   transform: translate(-50%, -50%);
   pointer-events: none;
-  opacity: 0.1;
+  opacity: 0.05;
   scale: 0.1;
   transform-origin: left top;
   background-image: radial-gradient(

packages/lib/src/components/Input/number.vue

@@ -48,8 +48,7 @@
   <div
     class="md-input number"
     @click="input?.focus()"
-    :class="variant ?? 'filled'"
-    :data-placeholder="placeholder"
+    :variant="variant ?? 'filled'"
   >
     <div class="md-input-wrapper">
       <HybridIcon class="md-input-icon left" :icon="leftIcon" />

packages/lib/src/components/Input/text.vue

@@ -50,7 +50,7 @@
   <div
     class="md-input text"
     @click="inputRef?.focus()"
-    :class="variant ?? 'filled'"
+    :variant="variant ?? 'filled'"
     :empty="area.empty || undefined"
   >
     <div class="md-input-wrapper">

packages/lib/src/components/Layout/fab.vue

@@ -4,13 +4,14 @@
   import { keyClick } from '@/utils/dom/events'
   import { rippleEffect } from '@/utils/dom/ripple'
   import { inject, ref } from 'vue'
+
   import HybridIcon from '../Misc/hybrid-icon.vue'
 
   interface FabProperties extends /* @vue-ignore */ ButtonHTMLAttributes {
     icon?: string | Component
   }
 
-  const scrollTop = inject('content-scroll-top', ref(0))
+  const scroll = inject('scroll-container', ref({ x: 0, y: 0 }))
 
   defineProps<FabProperties>()
   defineOptions({ name: 'MdFloatingActionButton' })
@@ -20,7 +21,7 @@
   <button
     class="md-fab"
     tabindex="0"
-    :class="{ 'on-top': scrollTop < 6 }"
+    :class="{ 'on-top': scroll.x < 6 }"
     @pointerdown="rippleEffect"
     @keydown="keyClick"
   >
@@ -33,8 +34,8 @@
 
 <style lang="scss">
   .md-fab {
-    position: absolute;
-    bottom: var(--md);
+    position: fixed;
+    bottom: calc(var(--bottom-offset, 0) + var(--md));
     right: var(--md);
     padding-inline: var(--md);
     height: var(--fab-size);
@@ -60,7 +61,7 @@
       transition: all 0.2s var(--timing-standard);
     }
 
-    &.on-top .md-fab-label {
+    &.on-top &-label {
       opacity: 1;
       padding-left: var(--sm);
       max-width: 300px;

packages/lib/src/components/Layout/layout.vue

@@ -15,10 +15,10 @@
   <ThemeProvider class="md-layout" v-bind="$props">
     <slot name="navbar" />
     <div class="md-layout-content">
-      <slot name="fab" />
       <ScrollContainer>
         <template #header>
           <slot name="header" />
+          <slot name="fab" />
         </template>
         <slot />
       </ScrollContainer>

packages/lib/src/components/Layout/scroll-container.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { onBeforeUnmount, onMounted, provide, ref } from 'vue'
+  import { onMounted, onUnmounted, provide, ref } from 'vue'
 
   interface ScrollPosition {
     x: number
@@ -11,16 +11,12 @@
     (e: 'scroll', value: ScrollPosition): void
   }
 
-  defineOptions({ name: 'MdScrollContainer' })
   const emit = defineEmits<ScrollContainerEmits>()
-
-  const element = ref<HTMLElement>()
+  const root = ref<HTMLElement>()
   const model = defineModel<ScrollPosition>({
     default: () => ({ x: 0, y: 0 })
   })
 
-  provide('scroll-container', model)
-
   function onScroll(event: Event) {
     const target = event.currentTarget as HTMLElement
 
@@ -31,17 +27,15 @@
     emit('change', { x, y })
   }
 
-  onMounted(() => {
-    element.value!.addEventListener('scroll', onScroll)
-  })
+  onMounted(() => root.value?.addEventListener('scroll', onScroll))
+  onUnmounted(() => root.value?.removeEventListener('scroll', onScroll))
 
-  onBeforeUnmount(() => {
-    element.value!.removeEventListener('scroll', onScroll)
-  })
+  provide('scroll-container', model)
+  defineOptions({ name: 'MdScrollContainer' })
 </script>
 
 <template>
-  <div class="md-scroll" ref="element">
+  <div class="md-scroll" ref="root">
     <slot name="header" />
     <slot
       name="wrapper"

packages/lib/src/components/Navigation/navigation-bar.vue

@@ -137,16 +137,16 @@
     }
 
     &-item:hover &-item-icon {
-      background: var(--surface);
+      background: var(--surface-container-highest);
     }
 
     &-item.active {
       .md-navbar-item-icon {
-        color: var(--on-secondary-container);
+        color: var(--on-secondary);
 
         &::before {
           width: var(--size-lg);
-          background: var(--secondary-container);
+          background: var(--secondary);
         }
       }
 

packages/lib/src/components/Select/option-item.vue

@@ -11,8 +11,6 @@
 
 <style lang="scss" scoped>
   .md-select-option-item {
-    cursor: pointer;
-    padding-inline: 1rem;
     user-select: none;
   }
 </style>