@quaffui/quaff 0.1.0-prealpha8 → 1.0.0-alpha1

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

@@ -1,52 +1,86 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash 9035e6438a832f2c4d5738500c90c221
 export const QTabsDocsProps = [
     {
-        name: "value",
-        type: "string",
+        isArray: false,
         optional: true,
-        clickableType: false,
-        description: "",
-        default: "",
+        isSnippet: false,
+        name: "value",
+        type: {
+            name: "string",
+            isClickable: false,
+        },
+        description: "Current active tab name. This property is bindable.",
+        default: "undefined",
     },
     {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
         name: "variant",
-        type: "QTabsVariants",
-        optional: false,
-        clickableType: true,
-        description: "",
-        default: "",
+        type: {
+            name: "QTabsVariants",
+            isClickable: true,
+        },
+        description: "Visual style variant of the tabs.",
+        default: '"primary"',
     },
     {
-        name: "round",
-        type: "boolean",
-        optional: false,
-        clickableType: false,
-        description: "",
-        default: "",
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "noSeparator",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
+        description: "Removes the separator line under the tabs (or to the right for vertical tabs).",
+        default: "false",
     },
 ];
+export const QTabsDocsSnippets = [];
 export const QTabDocsProps = [
     {
+        isArray: false,
+        optional: false,
+        isSnippet: false,
         name: "name",
-        type: "string",
-        optional: true,
-        clickableType: false,
-        description: "",
+        type: {
+            name: "string",
+            isClickable: false,
+        },
+        description: "Unique identifier for the tab. Used to match with QTabs' value prop.",
         default: "",
     },
     {
-        name: "to",
-        type: "string",
+        isArray: false,
         optional: true,
-        clickableType: false,
-        description: "",
-        default: "",
+        isSnippet: false,
+        name: "to",
+        type: {
+            name: "string",
+            isClickable: false,
+        },
+        description: "Navigation target URL when the tab is used as a router link.\nWhen provided, the tab will render as an anchor tag.",
+        default: "undefined",
     },
     {
-        name: "icon",
-        type: "string",
+        isArray: false,
         optional: true,
-        clickableType: false,
-        description: "",
-        default: "",
+        isSnippet: false,
+        name: "icon",
+        type: [
+            {
+                name: "MaterialSymbol",
+                isClickable: false,
+            },
+            {
+                name: "Snippet",
+                isClickable: false,
+            },
+        ],
+        description: "Icon to display in the tab. Can be a Material Symbol name or a custom snippet.",
+        default: "undefined",
     },
 ];
+export const QTabDocsSnippets = [];

package/dist/components/tabs/index.scss

@@ -1,3 +1,5 @@
+@use "$css/mixins";
+
 .q-tabs {
   position: relative;
   display: flex;
@@ -6,70 +8,111 @@
   max-width: 100%;
   overflow: auto;
   scroll-behavior: smooth;
+  border-radius: 0;
+  border-bottom: solid 0.0625rem var(--outline-4);
   &::-webkit-scrollbar {
     display: none;
   }
 
   & > .q-tab {
+    position: relative;
     box-sizing: border-box;
-    height: 48px;
+    min-height: 3rem;
     min-width: max-content;
     display: flex;
     align-items: center;
     justify-content: center;
     flex: 1;
-    background-color: unset;
+    background-color: var(--surface);
+    color: var(--on-surface);
     border-radius: 0;
     gap: 0;
+    overflow: hidden;
+    @include mixins.padding("x-md");
+
+    & .q-tab__icon {
+      margin-right: 0.25rem;
+    }
+
+    &--active {
+      color: var(--primary);
+    }
 
-    & > .q-icon {
-      margin-right: 8px;
+    &:is(:hover, :focus):not([aria-disabled])::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: var(--on-surface);
+      border-radius: none;
+      overflow: hidden;
     }
 
-    &:is(:hover, :focus)::after {
-      background-image: radial-gradient(circle, var(--on-surface-variant-2) 1%, transparent 1%);
+    &:hover:not([aria-disabled])::after {
+      opacity: 0.08;
+    }
+
+    &:focus:not([aria-disabled])::after {
+      opacity: 0.16;
     }
   }
 
-  &.vertical-tabs {
+  &.q-tabs--vertical {
     flex-direction: column;
-    min-height: calc(var(--tab-count) * 48px);
     width: fit-content;
     align-items: stretch;
+    border-bottom: unset;
+    border-right: solid 0.0625rem var(--outline-4);
+
+    & > .q-tab {
+      @include mixins.padding("x-md");
+    }
 
     &::after {
-      top: var(--indicator-position);
-      right: 0;
-      bottom: auto;
       left: auto;
-      width: 2px;
-      height: var(--indicator-size);
+      right: 0;
+      top: 0;
+      bottom: 0;
+
+      width: 0.125rem;
+      height: 100%;
+
+      transform-origin: top;
+
+      scale: 1 var(--indicator-size, 0);
+      translate: 0 var(--indicator-position, 0);
     }
   }
 
   &::after {
     content: "";
     position: absolute;
-    top: auto;
-    right: auto;
+    left: 0;
+    right: 0;
     bottom: 0;
-    left: var(--indicator-position);
-    width: var(--indicator-size);
-    height: 2px;
+
+    width: 100%;
+    height: 0.125rem;
+
     border-radius: 0;
     background: var(--primary);
-    transition: all 0.3s cubic-bezier(0.77, 0, 0.18, 1);
-    opacity: 0;
-  }
 
-  &:not(.hidden-indicator)::after {
-    opacity: 1;
+    transform-origin: left;
+    transition:
+      scale 0.2s cubic-bezier(0.25, 0.92, 0.33, 1),
+      translate 0.2s cubic-bezier(0.25, 0.92, 0.33, 1);
+
+    scale: var(--indicator-size, 0) 1;
+    translate: var(--indicator-position, 0) 0;
   }
 
-  &.small-indicator::after {
-    left: var(--indicator-position);
-    transform: translateX(-50%);
-    height: 3px;
-    border-radius: 3px 3px 0px 0px;
+  &.q-tabs--primary::after {
+    translate: var(--indicator-position, 0) 0;
+    scale: var(--indicator-size, 0) 1;
+
+    height: 0.1875rem;
+    border-radius: 0.25rem 0.25rem 0px 0px;
   }
 }

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

@@ -1,14 +1,43 @@
-import { type NativeProps } from "../../utils/types";
+import type { MaterialSymbol } from "material-symbols";
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
 export type QTabsVariants = "primary" | "secondary" | "vertical";
-export interface QTabsProps extends NativeProps {
+export interface QTabsProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * Current active tab name. This property is bindable.
+     *
+     * @default undefined
+     */
     value?: string;
-    variant: QTabsVariants;
-    round: boolean;
+    /**
+     * Visual style variant of the tabs.
+     *
+     * @default "primary"
+     */
+    variant?: QTabsVariants;
+    /**
+     * Removes the separator line under the tabs (or to the right for vertical tabs).
+     *
+     * @default false
+     */
+    noSeparator?: boolean;
 }
-export declare const QTabsPropsDefaults: QTabsProps;
-export interface QTabProps extends NativeProps {
-    name?: string;
+export interface QTabProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * Unique identifier for the tab. Used to match with QTabs' value prop.
+     */
+    name: string;
+    /**
+     * Navigation target URL when the tab is used as a router link.
+     * When provided, the tab will render as an anchor tag.
+     *
+     * @default undefined
+     */
     to?: string;
-    icon?: string;
+    /**
+     * Icon to display in the tab. Can be a Material Symbol name or a custom snippet.
+     *
+     * @default undefined
+     */
+    icon?: MaterialSymbol | Snippet;
 }
-export declare const QTabPropsDefaults: QTabProps;

package/dist/components/tabs/props.js

@@ -1,13 +1 @@
-import { NativePropsDefaults } from "../../utils/types";
-export const QTabsPropsDefaults = {
-    value: undefined,
-    variant: "primary",
-    round: false,
-    ...NativePropsDefaults,
-};
-export const QTabPropsDefaults = {
-    name: undefined,
-    to: undefined,
-    icon: undefined,
-    ...NativePropsDefaults,
-};
+export {};

package/dist/components/toolbar/QToolbar.scss

@@ -0,0 +1,36 @@
+@use "$css/mixins";
+@use "$css/variables";
+
+.q-toolbar {
+  @include mixins.toolbarDisplay;
+
+  width: 100%;
+  height: var(--toolbar-height);
+  padding: 0 1rem;
+  transition: all variables.$speed3;
+  background-color: var(--surface);
+
+  &--inset {
+    padding-left: 3.625rem;
+  }
+
+  &--elevated {
+    @include mixins.elevate(1, "bottom");
+  }
+
+  &--bordered {
+    @include mixins.border($position: "bottom");
+  }
+}
+
+.q-toolbar-title {
+  display: flex;
+  flex: auto;
+  font-size: 1.75rem;
+  font-weight: 400;
+  justify-content: center;
+
+  &--shrink {
+    flex: unset;
+  }
+}

package/dist/components/toolbar/QToolbar.svelte

@@ -1,40 +1,28 @@
-<script>import { createClasses, createStyles } from "../../utils/props";
-import { getContext } from "svelte";
-import { isNumber } from "../../utils/types";
-import { useSize } from "../../composables/use-size";
-export let inset = false, height = "64px", userClasses = void 0, userStyles = void 0;
-export { userClasses as class, userStyles as style };
-let ctx = getContext("layout");
-$:
-  classes = createClasses([
-    $ctx?.header && "q-header",
-    "q-toolbar",
-    "surface",
-    $ctx?.header?.fixed && "fixed",
-    inset && "q-toolbar--inset",
-    userClasses
-  ]);
-$:
-  heightStyle = $ctx && useSize(height).style;
-$:
-  if ($ctx?.header !== void 0) {
-    if (userStyles?.includes("display: none")) {
-      $ctx.header.display = false;
-    } else {
-      $ctx.header.display = true;
-    }
-  }
-$:
-  style = createStyles(
-    {
-      "--header-height": heightStyle
-    },
-    userStyles
-  );
+<script lang="ts">
+  import type { QToolbarProps } from "./props";
+
+  let {
+    inset = false,
+    border = false,
+    elevate = false,
+    height = 64,
+    children,
+    ...props
+  }: QToolbarProps = $props();
 </script>
 
-<header class={classes} role="toolbar" {...$$restProps} {style}>
-  <nav>
-    <slot />
-  </nav>
-</header>
+<nav
+  {...props}
+  class={[
+    "q-toolbar",
+    props.class,
+    inset && "q-toolbar--inset",
+    elevate && "q-toolbar--elevated",
+    border && "q-toolbar--bordered",
+  ]}
+  role="toolbar"
+  style:--toolbar-height="{height}px"
+  data-quaff
+>
+  {@render children?.()}
+</nav>

package/dist/components/toolbar/QToolbar.svelte.d.ts

@@ -1,23 +1,14 @@
-import { SvelteComponent } from "svelte";
-import type { QToolbarProps } from "./props";
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {
-        [x: string]: any;
-        inset?: boolean | undefined;
-        height?: number | `${number}px` | `${number}%` | `${number}em` | `${number}ex` | `${number}ch` | `${number}rem` | `${number}vw` | `${number}vh` | `${number}vmin` | `${number}vmax` | undefined;
-        class?: string | undefined;
-        style?: string | undefined;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
 type QToolbarProps_ = typeof __propDef.props;
 export { QToolbarProps_ as QToolbarProps };
 export type QToolbarEvents = typeof __propDef.events;
 export type QToolbarSlots = typeof __propDef.slots;
-export default class QToolbar extends SvelteComponent<QToolbarProps, QToolbarEvents, QToolbarSlots> {
+export default class QToolbar extends SvelteComponentTyped<QToolbarProps_, QToolbarEvents, QToolbarSlots> {
 }

package/dist/components/toolbar/QToolbarTitle.svelte

@@ -1,10 +1,13 @@
-<script>import { createClasses } from "../../utils/props";
-export let shrink = false, userClasses = void 0, userStyles = void 0;
-export { userClasses as class, userStyles as style };
-$:
-  classes = createClasses([shrink && "shrink", userClasses], { component: "q-toolbar-title" });
+<script lang="ts">
+  import type { QToolbarTitleProps } from "./props";
+
+  let { shrink = false, children, ...props }: QToolbarTitleProps = $props();
 </script>
 
-<div class={classes} {...$$restProps} style={userStyles}>
-  <slot />
+<div
+  {...props}
+  class={["q-toolbar-title", props.class, shrink && "q-toolbar-title--shrink"]}
+  data-quaff
+>
+  {@render children?.()}
 </div>

package/dist/components/toolbar/QToolbarTitle.svelte.d.ts

@@ -1,22 +1,14 @@
-import { SvelteComponent } from "svelte";
-import type { QToolbarTitleProps } from "./props";
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {
-        [x: string]: any;
-        shrink?: boolean | undefined;
-        class?: string | undefined;
-        style?: string | undefined;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
 type QToolbarTitleProps_ = typeof __propDef.props;
 export { QToolbarTitleProps_ as QToolbarTitleProps };
 export type QToolbarTitleEvents = typeof __propDef.events;
 export type QToolbarTitleSlots = typeof __propDef.slots;
-export default class QToolbarTitle extends SvelteComponent<QToolbarTitleProps, QToolbarTitleEvents, QToolbarTitleSlots> {
+export default class QToolbarTitle extends SvelteComponentTyped<QToolbarTitleProps_, QToolbarTitleEvents, QToolbarTitleSlots> {
 }

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

@@ -1,2 +1,3 @@
-import type { QComponentDocs } from "../../utils/types";
-export declare let QToolbarDocs: QComponentDocs;
+import type { QComponentDocs } from "../../utils";
+export declare const QToolbarDocs: QComponentDocs;
+export declare const QToolbarTitleDocs: QComponentDocs;

package/dist/components/toolbar/docs.js

@@ -1,10 +1,20 @@
-import { QToolbarDocsProps } from "./docs.props";
-export let QToolbarDocs = {
+import { QToolbarDocsProps, QToolbarDocsSnippets, QToolbarTitleDocsProps, QToolbarTitleDocsSnippets, } from "./docs.props";
+export const QToolbarDocs = {
     name: "QToolbar",
     description: "The Toolbar component is used to hold common actions and controls, often located at the top of an application or view.",
     docs: {
         props: QToolbarDocsProps,
-        slots: [],
+        snippets: QToolbarDocsSnippets,
+        methods: [],
+        events: [],
+    },
+};
+export const QToolbarTitleDocs = {
+    name: "QToolbar",
+    description: "The Toolbar component is used to hold common actions and controls, often located at the top of an application or view.",
+    docs: {
+        props: QToolbarTitleDocsProps,
+        snippets: QToolbarTitleDocsSnippets,
         methods: [],
         events: [],
     },

package/dist/components/toolbar/docs.props.d.ts

@@ -1,16 +1,5 @@
-export declare const QToolbarDocsProps: {
-    name: string;
-    type: string;
-    optional: boolean;
-    clickableType: boolean;
-    description: string;
-    default: string;
-}[];
-export declare const QToolbarTitleDocsProps: {
-    name: string;
-    type: string;
-    optional: boolean;
-    clickableType: boolean;
-    description: string;
-    default: string;
-}[];
+import { ParsedProp, ParsedSnippet } from "../../../../docgen/props/parseInterface";
+export declare const QToolbarDocsProps: ParsedProp[];
+export declare const QToolbarDocsSnippets: ParsedSnippet[];
+export declare const QToolbarTitleDocsProps: ParsedProp[];
+export declare const QToolbarTitleDocsSnippets: ParsedSnippet[];

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

@@ -1,28 +1,68 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash 67c0dae9e280c40d9a44ca7c9d52fc6f
 export const QToolbarDocsProps = [
     {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
         name: "inset",
-        type: "boolean",
-        optional: false,
-        clickableType: false,
-        description: "",
-        default: "",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
+        description: "Adds horizontal padding to the toolbar content.",
+        default: "false",
     },
     {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "border",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
+        description: "Adds a border to the toolbar to separate it from the main content.",
+        default: "false",
+    },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "elevate",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
+        description: "Adds a shadow to the toolbar to make it appear elevated.",
+        default: "false",
+    },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
         name: "height",
-        type: "string | number",
-        optional: false,
-        clickableType: false,
-        description: "",
-        default: "",
+        type: {
+            name: "number",
+            isClickable: false,
+        },
+        description: "Height of the toolbar in pixels.",
+        default: "64",
     },
 ];
+export const QToolbarDocsSnippets = [];
 export const QToolbarTitleDocsProps = [
     {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
         name: "shrink",
-        type: "boolean",
-        optional: false,
-        clickableType: false,
-        description: "",
-        default: "",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
+        description: "Allows the title to shrink when there isn't enough space in the toolbar.",
+        default: "false",
     },
 ];
+export const QToolbarTitleDocsSnippets = [];