@quaffui/quaff 0.1.0-prealpha → 0.1.0-prealpha10

package/dist/components/header/QHeader.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+import type { QHeaderProps } from "./props";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        inset?: QHeaderProps["inset"];
+        elevate?: QHeaderProps["elevate"];
+        border?: QHeaderProps["border"];
+        class?: string | undefined;
+        style?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+type QHeaderProps_ = typeof __propDef.props;
+export { QHeaderProps_ as QHeaderProps };
+export type QHeaderEvents = typeof __propDef.events;
+export type QHeaderSlots = typeof __propDef.slots;
+export default class QHeader extends SvelteComponent<QHeaderProps, QHeaderEvents, QHeaderSlots> {
+}

package/dist/components/header/props.d.ts

@@ -0,0 +1,15 @@
+import type { NativeProps } from "../../utils/types";
+export interface QHeaderProps extends NativeProps {
+    /**
+     * @default false
+     */
+    inset?: boolean;
+    /**
+     * @default false
+     */
+    elevate?: boolean;
+    /**
+     * @default false
+     */
+    border?: boolean;
+}

package/dist/components/header/props.js

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

package/dist/components/icon/QIcon.svelte

@@ -1,23 +1,21 @@
-<script>import useSize from "../../composables/use-size";
-import { createClasses, createStyles } from "../../utils/props";
+<script>import { createClasses, createStyles } from "../../utils/props";
 import { isNumber } from "../../utils/types";
-export let size = "md", name = void 0, type = "outlined", fill = false, svg = void 0, img = void 0, imgAttributes = {}, color = void 0, userClasses = void 0, userStyles = void 0;
+import { sizes } from "../../composables/use-size";
+import { useSize } from "../../composables/use-size";
+export let size = "md", name = void 0, type = "outlined", filled = false, svg = void 0, img = void 0, imgAttributes = {}, color = void 0, userClasses = void 0, userStyles = void 0;
 export { userClasses as class, userStyles as style };
 $:
-  sizeStyle = useSize(size) === null ? isNumber(size) ? `${size}px` : size : void 0;
+  sizeObj = useSize(size);
 $:
-  classes = createClasses([
-    "q-icon",
-    `q-icon__${type}`,
-    fill && "fill",
-    useSize(size),
-    color && `${color}-text`,
-    userClasses
-  ]);
+  classes = createClasses([type, filled && "filled", sizeObj.class], {
+    component: "q-icon",
+    userClasses,
+    quaffClasses: [color && `text-${color}`]
+  });
 $:
   style = createStyles(
     {
-      "---size": sizeStyle
+      "--size": sizeObj.style
     },
     userStyles
   );

package/dist/components/icon/QIcon.svelte.d.ts

@@ -1,11 +1,11 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 import type { QIconProps } from "./props";
 declare const __propDef: {
     props: {
         size?: import("./props").QIconSizeOptions | undefined;
         name?: QIconProps["name"];
         type?: import("./props").QIconTypeOptions | undefined;
-        fill?: boolean | undefined;
+        filled?: boolean | undefined;
         svg?: QIconProps["svg"];
         img?: QIconProps["img"];
         imgAttributes?: Record<string, any> | undefined;
@@ -20,9 +20,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export type QIconProps = typeof __propDef.props;
+type QIconProps_ = typeof __propDef.props;
+export { QIconProps_ as QIconProps };
 export type QIconEvents = typeof __propDef.events;
 export type QIconSlots = typeof __propDef.slots;
-export default class QIcon extends SvelteComponentTyped<QIconProps, QIconEvents, QIconSlots> {
+export default class QIcon extends SvelteComponent<QIconProps, QIconEvents, QIconSlots> {
 }
-export {};

package/dist/components/icon/docs.d.ts

@@ -1,2 +1,2 @@
-import type { QComponentDocs } from "$utils/types";
+import type { QComponentDocs } from "../../utils/types";
 export declare let QIconDocs: QComponentDocs;

package/dist/components/icon/docs.props.js

@@ -24,7 +24,7 @@ export const QIconDocsProps = [
         default: "undefined",
     },
     {
-        name: "fill",
+        name: "filled",
         type: "boolean",
         optional: false,
         clickableType: false,

package/dist/components/icon/index.scss

@@ -1,18 +1,75 @@
-$icon-font: "Material Symbols Outlined";
-
 .q-icon {
+  --font: "Material Symbols Outlined";
+  --size: 1.5rem;
   overflow: visible;
-  font-family: $icon-font;
+  font-family: var(--font);
+  font-weight: normal;
+  font-style: normal;
+  font-size: var(--size);
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  font-feature-settings: "liga";
+  -webkit-font-smoothing: antialiased;
+  vertical-align: middle;
+  text-align: center;
+  overflow: hidden;
+  width: var(--size);
+  min-width: var(--size);
+  height: var(--size);
+  min-height: var(--size);
+  box-sizing: content-box;
+  line-height: normal;
 
   &--outlined {
-    $icon-font: "Material Symbols Outlined";
+    --font: "Material Symbols Outlined";
   }
 
   &--rounded {
-    $icon-font: "Material Symbols Rounded";
+    --font: "Material Symbols Rounded";
   }
 
   &--sharp {
-    $icon-font: "Material Symbols Sharp";
+    --font: "Material Symbols Sharp";
+  }
+
+  &--xs {
+    --size: 1rem;
+  }
+
+  &--sm {
+    --size: 1.25rem;
+  }
+
+  &--lg {
+    --size: 1.75rem;
+  }
+
+  &--xl {
+    --size: 2rem;
+  }
+
+  > :is(img, svg) {
+    width: 100%;
+    height: 100%;
+    background-size: 100%;
+    border-radius: inherit;
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding: inherit;
+  }
+
+  &.filled
+  // we might need these selectors later:
+  // a.row:is(:hover, :focus) > i,
+  // .transparent:is(:hover, :focus) > i
+  {
+    font-variation-settings: "FILL" 1;
   }
 }

package/dist/components/icon/props.d.ts

@@ -1,5 +1,5 @@
-import type { NativeProps } from "../../utils/types";
-export type QIconSizeOptions = "xs" | "sm" | "md" | "lg" | "xl" | string | number;
+import type { CssValue, NativeProps, QuaffSizes } from "../../utils/types";
+export type QIconSizeOptions = QuaffSizes | CssValue | number;
 export type QIconTypeOptions = "outlined" | "sharp" | "rounded";
 export interface QIconProps extends NativeProps {
     /**
@@ -21,7 +21,7 @@ export interface QIconProps extends NativeProps {
      * Determines whether the icon should be filled.
      * @default false
      */
-    fill: boolean;
+    filled: boolean;
     /**
      * The SVG content for the icon.
      * @default undefined

package/dist/components/index.d.ts

@@ -9,6 +9,7 @@ import QCodeBlock from "./codeBlock/QCodeBlock.svelte";
 import QDialog from "./dialog/QDialog.svelte";
 import QDrawer from "./drawer/QDrawer.svelte";
 import QFooter from "./footer/QFooter.svelte";
+import QHeader from "./header/QHeader.svelte";
 import QIcon from "./icon/QIcon.svelte";
 import QInput from "./input/QInput.svelte";
 import QSelect from "./select/QSelect.svelte";
@@ -25,5 +26,6 @@ import QTab from "./tabs/QTab.svelte";
 import QTable from "./table/QTable.svelte";
 import QToggle from "./toggle/QToggle.svelte";
 import QToolbar from "./toolbar/QToolbar.svelte";
+import QToolbarTitle from "./toolbar/QToolbarTitle.svelte";
 import QTooltip from "./tooltip/QTooltip.svelte";
-export { QAvatar, QBtn, QCard, QCardSection, QCardActions, QCheckbox, QChip, QCodeBlock, QDialog, QDrawer, QFooter, QIcon, QInput, QSelect, QLayout, QList, QItem, QItemSection, QLinearProgress, QRadio, QRailbar, QSeparator, QTabs, QTab, QTable, QToggle, QToolbar, QTooltip, };
+export { QAvatar, QBtn, QCard, QCardSection, QCardActions, QCheckbox, QChip, QCodeBlock, QDialog, QDrawer, QFooter, QHeader, QIcon, QInput, QSelect, QLayout, QList, QItem, QItemSection, QLinearProgress, QRadio, QRailbar, QSeparator, QTabs, QTab, QTable, QToggle, QToolbar, QToolbarTitle, QTooltip, };

package/dist/components/index.js

@@ -9,6 +9,7 @@ import QCodeBlock from "./codeBlock/QCodeBlock.svelte";
 import QDialog from "./dialog/QDialog.svelte";
 import QDrawer from "./drawer/QDrawer.svelte";
 import QFooter from "./footer/QFooter.svelte";
+import QHeader from "./header/QHeader.svelte";
 import QIcon from "./icon/QIcon.svelte";
 import QInput from "./input/QInput.svelte";
 import QSelect from "./select/QSelect.svelte";
@@ -25,5 +26,6 @@ import QTab from "./tabs/QTab.svelte";
 import QTable from "./table/QTable.svelte";
 import QToggle from "./toggle/QToggle.svelte";
 import QToolbar from "./toolbar/QToolbar.svelte";
+import QToolbarTitle from "./toolbar/QToolbarTitle.svelte";
 import QTooltip from "./tooltip/QTooltip.svelte";
-export { QAvatar, QBtn, QCard, QCardSection, QCardActions, QCheckbox, QChip, QCodeBlock, QDialog, QDrawer, QFooter, QIcon, QInput, QSelect, QLayout, QList, QItem, QItemSection, QLinearProgress, QRadio, QRailbar, QSeparator, QTabs, QTab, QTable, QToggle, QToolbar, QTooltip, };
+export { QAvatar, QBtn, QCard, QCardSection, QCardActions, QCheckbox, QChip, QCodeBlock, QDialog, QDrawer, QFooter, QHeader, QIcon, QInput, QSelect, QLayout, QList, QItem, QItemSection, QLinearProgress, QRadio, QRailbar, QSeparator, QTabs, QTab, QTable, QToggle, QToolbar, QToolbarTitle, QTooltip, };

package/dist/components/input/QInput.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 import type { QInputProps } from "./props";
 declare const __propDef: {
     props: {
@@ -24,9 +24,9 @@ declare const __propDef: {
         append: {};
     };
 };
-export type QInputProps = typeof __propDef.props;
+type QInputProps_ = typeof __propDef.props;
+export { QInputProps_ as QInputProps };
 export type QInputEvents = typeof __propDef.events;
 export type QInputSlots = typeof __propDef.slots;
-export default class QInput extends SvelteComponentTyped<QInputProps, QInputEvents, QInputSlots> {
+export default class QInput extends SvelteComponent<QInputProps, QInputEvents, QInputSlots> {
 }
-export {};

package/dist/components/input/docs.d.ts

@@ -1,2 +1,2 @@
-import type { QComponentDocs } from "$utils/types";
+import type { QComponentDocs } from "../../utils/types";
 export declare let QInputDocs: QComponentDocs;

package/dist/components/input/props.d.ts

@@ -1,4 +1,4 @@
-import type { NativeProps } from "$utils/types";
+import type { NativeProps } from "../../utils/types";
 export interface QInputProps extends NativeProps {
     bordered: boolean;
     dense?: boolean;

package/dist/components/layout/QLayout.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 export interface DrawerContext {
     offset: {
         top: boolean;
@@ -49,9 +49,9 @@ declare const __propDef: {
         content: {};
     };
 };
-export type QLayoutProps = typeof __propDef.props;
+type QLayoutProps_ = typeof __propDef.props;
+export { QLayoutProps_ as QLayoutProps };
 export type QLayoutEvents = typeof __propDef.events;
 export type QLayoutSlots = typeof __propDef.slots;
-export default class QLayout extends SvelteComponentTyped<QLayoutProps, QLayoutEvents, QLayoutSlots> {
+export default class QLayout extends SvelteComponent<QLayoutProps, QLayoutEvents, QLayoutSlots> {
 }
-export {};

package/dist/components/layout/docs.d.ts

@@ -1,2 +1,2 @@
-import type { QComponentDocs } from "$utils/types";
+import type { QComponentDocs } from "../../utils/types";
 export declare let QLayoutDocs: QComponentDocs;

package/dist/components/layout/index.scss

@@ -9,6 +9,8 @@
   --right-drawer-width: 300px;
 }
 
+$contentSlot: ":not(.q-header, .q-footer, .q-railbar, .q-drawer)";
+
 .q-layout {
   position: relative;
   width: 100%;
@@ -17,7 +19,7 @@
   min-height: 100%;
   overflow: hidden;
 
-  & > :not(.q-header, .q-footer, .q-railbar, .q-drawer) {
+  & > #{$contentSlot} {
     height: 100%;
     overflow: auto;
     transition: padding var(--speed3);
@@ -35,18 +37,18 @@
   min-height: unset;
   border-radius: 0;
 
-  & > nav {
-    height: 100%;
-    min-height: unset;
-  }
-
-  &.fixed {
+  &--fixed {
     position: fixed;
 
     &::before {
       margin: 0;
     }
   }
+
+  & > nav {
+    height: 100%;
+    min-height: unset;
+  }
 }
 
 .q-layout > .q-footer {
@@ -60,12 +62,7 @@
   min-height: unset;
   border-radius: 0;
 
-  & > nav {
-    height: 100%;
-    min-height: unset;
-  }
-
-  &.fixed {
+  &--fixed {
     position: fixed;
 
     &::before {
@@ -73,7 +70,12 @@
     }
   }
 
-  & ~ :not(.q-header, .q-footer, .q-railbar, .q-drawer) {
+  & > nav {
+    height: 100%;
+    min-height: unset;
+  }
+
+  & ~ #{$contentSlot} {
     padding-bottom: var(--footer-height);
   }
 }
@@ -89,28 +91,28 @@
   overflow: auto;
   transition: all var(--speed3);
 
-  &.above {
+  &--above {
     z-index: 105;
   }
 
-  &.fixed {
+  &--fixed {
     position: fixed;
   }
 
-  &.left {
+  &--left {
     left: 0px;
     width: var(--left-railbar-width);
 
-    &.bordered {
+    &.q-railbar--bordered {
       border-right: 0.0625rem solid var(--outline);
     }
   }
 
-  &.right {
+  &--right {
     right: 0px;
     width: var(--right-railbar-width);
 
-    &.bordered {
+    &.q-railbar--bordered {
       border-left: 0.0625rem solid var(--outline);
     }
   }
@@ -140,35 +142,29 @@
       background-color: var(--secondary-container);
       color: var(--on-secondary-container);
       padding: 0 1rem;
-      font-variation-settings: "FILL" 1, "wght" 400, "opsz" 24;
+      font-variation-settings:
+        "FILL" 1,
+        "wght" 400,
+        "opsz" 24;
     }
   }
 }
 
 .q-layout > .q-drawer {
-  //TODO Problems with z-index between multiple layouts
   z-index: 101;
   border-radius: 0;
 
-  &.above {
+  &--above {
     z-index: 104;
   }
 
-  &.border-radius {
-    &__left {
-      &--top {
-        border-top-left-radius: 16px;
-      }
-      &--bottom {
-        border-bottom-left-radius: 16px;
-      }
-    }
-    &__right {
-      &--top {
-        border-top-right-radius: 16px;
-      }
-      &--bottom {
-        border-bottom-right-radius: 16px;
+  $horizontal: "left", "right";
+  $vertical: "top", "bottom";
+
+  @each $vPos in $vertical {
+    @each $hPos in $horizontal {
+      &--#{$vPos}-#{$hPos}-radius {
+        border-#{$vPos}-#{$hPos}-radius: 16px;
       }
     }
   }
@@ -242,33 +238,35 @@ $elements: (
 
 // Offset for content
 .q-layout {
-  & > .q-header ~ :not(.q-header, .q-footer, .q-drawer, .q-railbar) {
+  & > .q-header ~ #{$contentSlot} {
     padding-top: var(--header-height);
   }
-  & > .q-footer ~ :not(.q-header, .q-footer, .q-drawer, .q-railbar) {
+  & > .q-footer ~ #{$contentSlot} {
     padding-bottom: var(--footer-height);
   }
-  & > .q-drawer.active.left:not(.overlay) ~ :not(.q-header, .q-footer, .q-drawer, .q-railbar) {
+
+  & > .q-drawer.q-drawer--active.q-drawer--left:not(.q-drawer--overlay) ~ #{$contentSlot} {
     padding-left: $L_Drawer;
   }
-  & > .q-drawer.active.right:not(.overlay) ~ :not(.q-header, .q-footer, .q-drawer, .q-railbar) {
+  & > .q-drawer.q-drawer--active.q-drawer--right:not(.q-drawer--overlay) ~ #{$contentSlot} {
     padding-right: $R_Drawer;
   }
-  & > .q-railbar.left:not([style="display: none"]) {
-    & ~ :not(.q-header, .q-footer, .q-drawer, .q-railbar) {
+
+  & > .q-railbar.q-railbar--left:not([style="display: none"]) {
+    & ~ #{$contentSlot} {
       padding-left: $L_Railbar;
     }
 
-    & ~ .q-drawer.active.left:not(.overlay) ~ :not(.q-header, .q-footer, .q-drawer, .q-railbar) {
+    & ~ .q-drawer.q-drawer--active.q-drawer--left:not(.q-drawer--overlay) ~ #{$contentSlot} {
       padding-left: $L_Full;
     }
   }
-  & > .q-railbar.right:not([style="display: none"]) {
-    & ~ :not(.q-header, .q-footer, .q-drawer, .q-railbar) {
+  & > .q-railbar.q-railbar--right:not([style="display: none"]) {
+    & ~ #{$contentSlot} {
       padding-right: $R_Railbar;
     }
 
-    & ~ .q-drawer.active.right:not(.overlay) ~ :not(.q-header, .q-footer, .q-drawer, .q-railbar) {
+    & ~ .q-drawer.q-drawer--active.q-drawer--right:not(.q-drawer--overlay) ~ #{$contentSlot} {
       padding-right: $R_Full;
     }
   }
@@ -277,31 +275,48 @@ $elements: (
 // Inline offset for header, footer and drawers
 .q-layout {
   @each $pos, $el in $elements {
-    & > .q-railbar.left:not([style="display: none"]) {
-      &:not(.offset-#{$pos}) ~ .q-#{$el},
-      & ~ .q-drawer.left {
+    & > .q-railbar.q-railbar--left:not([style="display: none"]) {
+      &:not(.q-railbar--offset-#{$pos}) ~ .q-#{$el},
+      & ~ .q-drawer.q-drawer--left {
         left: $L_Railbar;
       }
 
-      & ~ .q-drawer.active.left:not(.offset-#{$pos}, .overlay) ~ .q-#{$el} {
+      &
+        ~ .q-drawer.q-drawer--active.q-drawer--left:not(
+          .q-drawer--offset-#{$pos},
+          .q-drawer--overlay
+        )
+        ~ .q-#{$el} {
         left: $L_Full;
       }
     }
-    & > .q-railbar.right:not([style="display: none"]) {
-      &:not(.offset-#{$pos}) ~ .q-#{$el},
-      & ~ .q-drawer.right {
+    & > .q-railbar.q-railbar--right:not([style="display: none"]) {
+      &:not(.q-railbar--offset-#{$pos}) ~ .q-#{$el},
+      & ~ .q-drawer.q-drawer--right {
         right: $R_Railbar;
       }
 
-      & ~ .q-drawer.active.right:not(.offset-#{$pos}, .overlay) ~ .q-#{$el} {
+      &
+        ~ .q-drawer.q-drawer--active.q-drawer--right:not(
+          .q-drawer--offset-#{$pos},
+          .q-drawer--overlay
+        )
+        ~ .q-#{$el} {
         right: $R_Full;
       }
     }
 
-    & > .q-drawer.active.left:not(.offset-#{$pos}, .overlay) ~ .q-#{$el} {
+    &
+      > .q-drawer.q-drawer--active.q-drawer--left:not(.q-drawer--offset-#{$pos}, .q-drawer--overlay)
+      ~ .q-#{$el} {
       left: $L_Drawer;
     }
-    & > .q-drawer.active.right:not(.offset-#{$pos}, .overlay) ~ .q-#{$el} {
+    &
+      > .q-drawer.q-drawer--active.q-drawer--right:not(
+        .q-drawer--offset-#{$pos},
+        .q-drawer--overlay
+      )
+      ~ .q-#{$el} {
       right: $R_Drawer;
     }
   }
@@ -310,40 +325,40 @@ $elements: (
 // Width for header and footer
 .q-layout {
   @each $pos, $el in $elements {
-    & > .q-railbar.left:not(.offset-#{$pos}, [style="display: none"]) {
+    & > .q-railbar.q-railbar--left:not(.q-railbar--offset-#{$pos}, [style="display: none"]) {
       // Left railbar
       & ~ .q-#{$el} {
         width: without($L_Railbar);
       }
 
-      & ~ .q-drawer.active:not(.offset-#{$pos}, .overlay) {
+      & ~ .q-drawer.q-drawer--active:not(.q-drawer--offset-#{$pos}, .q-drawer--overlay) {
         @include include-drawers(without($L_Railbar), $pos, $el);
       }
 
-      & ~ .q-railbar.right:not(.offset-#{$pos}, [style="display: none"]) {
+      & ~ .q-railbar.q-railbar--right:not(.q-railbar--offset-#{$pos}, [style="display: none"]) {
         // Left railbar + Right railbar
         & ~ .q-#{$el} {
           width: without($LR_Railbar);
         }
 
-        & ~ .q-drawer.active:not(.offset-#{$pos}, .overlay) {
+        & ~ .q-drawer.q-drawer--active:not(.q-drawer--offset-#{$pos}, .q-drawer--overlay) {
           @include include-drawers(without($LR_Railbar), $pos, $el);
         }
       }
     }
 
-    & > .q-railbar.right:not(.offset-#{$pos}, [style="display: none"]) {
+    & > .q-railbar.q-railbar--right:not(.q-railbar--offset-#{$pos}, [style="display: none"]) {
       // Right railbar
       & ~ .q-#{$el} {
         width: without($R_Railbar);
       }
 
-      & ~ .q-drawer.active:not(.offset-#{$pos}, .overlay) {
+      & ~ .q-drawer.q-drawer--active:not(.q-drawer--offset-#{$pos}, .q-drawer--overlay) {
         @include include-drawers(without($R_Railbar), $pos, $el);
       }
     }
 
-    & > .q-drawer.active:not(.offset-#{$pos}, .overlay) {
+    & > .q-drawer.q-drawer--active:not(.q-drawer--offset-#{$pos}, .q-drawer--overlay) {
       @include include-drawers(100%, $pos, $el);
     }
   }
@@ -351,19 +366,21 @@ $elements: (
 
 // Height for railbars and drawers
 .q-layout {
-  & > .q-railbar,
-  & > .q-drawer {
-    &.offset-top.offset-bottom {
-      height: calc(100% - var(--header-height) - var(--footer-height));
+  $drawerTypes: ".q-railbar", ".q-drawer";
+
+  @each $drawerType in $drawerTypes {
+    & > #{$drawerType} {
+      &#{$drawerType}--offset-top#{$drawerType}--offset-bottom {
+        height: calc(100% - var(--header-height) - var(--footer-height));
+      }
     }
-  }
 
-  @each $pos, $el in $elements {
-    & > .q-railbar,
-    & > .q-drawer {
-      &.offset-#{$pos} {
-        #{$pos}: var(--#{$el}-height);
-        height: calc(100% - var(--#{$el}-height));
+    @each $pos, $el in $elements {
+      & > #{$drawerType} {
+        &#{$drawerType}--offset-#{$pos} {
+          #{$pos}: var(--#{$el}-height);
+          height: calc(100% - var(--#{$el}-height));
+        }
       }
     }
   }

package/dist/components/list/QItem.svelte

@@ -26,7 +26,7 @@ $:
   isActive = isRouteActive($Quaff.router, to);
 $:
   classes = createClasses([
-    "q-item flex middle-align",
+    "q-item flex items-center",
     $hasMultiplLines && "multiline",
     dense && "dense",
     hasLink && active && "q-item--active",