@quaffui/quaff 1.0.0-beta3 → 1.0.0-beta5

package/dist/components/breadcrumbs/QBreadcrumbs.scss

@@ -1,10 +1,14 @@
 .q-breadcrumbs {
-  display: flex;
-  align-items: center;
-  justify-content: center;
   width: fit-content;
 
-  & > .q-breadcrumbs__separator:first-child {
-    display: none;
+  &__list {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    margin: 0;
+    padding: 0;
+
+    list-style: none;
   }
 }

package/dist/components/breadcrumbs/QBreadcrumbs.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { setContext, untrack } from "svelte";
+  import { onMount, setContext } from "svelte";
   import { QBreadcrumbsCtxName } from "../../utils";
   import type { QBreadcrumbsProps } from "./props";
 
@@ -12,25 +12,26 @@
     ...props
   }: QBreadcrumbsProps = $props();
 
-  let breadrumbElement: HTMLDivElement;
+  let breadcrumbList: HTMLOListElement;
 
-  $effect(() => {
-    untrack(() => breadrumbElement.firstChild?.remove());
+  onMount(() => {
+    breadcrumbList
+      .querySelector(".q-breadcrumbs__separator:first-child")
+      ?.remove();
   });
 
-  setContext(QBreadcrumbsCtxName.activeColor, activeColor);
-  setContext(QBreadcrumbsCtxName.separator, {
-    type: separator,
-    color: separatorColor,
-    gutter,
-  });
+  setContext(QBreadcrumbsCtxName.separator, { type: separator, gutter });
 </script>
 
-<div
-  bind:this={breadrumbElement}
+<nav
   {...props}
   class={["q-breadcrumbs", props.class]}
+  aria-label="Breadcrumbs"
   data-quaff
+  style:--q-separator-color="var(--{separatorColor}, {separatorColor})"
+  style:--q-active-color="var(--{activeColor}, {activeColor})"
 >
-  {@render children?.()}
-</div>
+  <ol bind:this={breadcrumbList} class="q-breadcrumbs__list">
+    {@render children?.()}
+  </ol>
+</nav>

package/dist/components/breadcrumbs/QBreadcrumbsEl.scss

@@ -1,10 +1,29 @@
 @use "$css/mixins";
 
-.q-breadcrumbs__el {
+.q-breadcrumbs__item {
   display: flex;
   align-items: center;
 
-  & > .q-icon {
-    @include mixins.margin("r-sm");
+  color: var(--q-breadcrumbs-color, currentColor);
+
+  &:has(> a):hover .q-breadcrumbs__label {
+    text-decoration: underline;
+    text-decoration-color: currentColor;
+
+    &__item:first-child > .q-breadcrumbs__separator {
+      display: none;
+    }
+  }
+
+  .q-breadcrumbs__separator {
+    color: var(--q-separator-color, currentColor);
+  }
+
+  .q-breadcrumbs__el {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    text-decoration: none;
+    color: inherit;
   }
 }

package/dist/components/breadcrumbs/QBreadcrumbsEl.svelte

@@ -1,33 +1,27 @@
 <script lang="ts">
-  import { getContext, type Snippet } from "svelte";
+  import { getContext } from "svelte";
   import { QIcon } from "../..";
   import { isRouteActive, QBreadcrumbsCtxName } from "../../utils";
   import type { MaterialSymbol } from "material-symbols";
-  import type { QBreadcrumbsElProps } from "./props";
+  import type { QBreadcrumbsElProps, QBreadcrumbsProps } from "./props";
 
   let {
     activeClass = "active",
     href,
     label = "",
     icon,
-    tag = "div",
+    tag = "span",
     to,
     children = fallback,
     ...props
   }: QBreadcrumbsElProps = $props();
 
-  const activeColor = getContext<string>(QBreadcrumbsCtxName.activeColor);
   const separator = getContext<{
-    type: `icon:${MaterialSymbol}` | Snippet;
-    color: string;
-    gutter: string;
+    type: QBreadcrumbsProps["separator"];
+    gutter: QBreadcrumbsProps["gutter"];
   }>(QBreadcrumbsCtxName.separator);
 
-  const classesIfActive = $derived(
-    isRouteActive(href || to)
-      ? `${activeClass} text-${activeColor}`
-      : undefined,
-  );
+  const isActive = $derived(isRouteActive(href || to));
 </script>
 
 {#snippet fallback()}
@@ -39,38 +33,53 @@
     {#if typeof icon === "string"}
       <QIcon name={icon} size="1rem" />
     {:else}
-      {@render icon()}
+      <span class="q-icon">
+        {@render icon()}
+      </span>
     {/if}
   {/if}
 
-  {@render children()}
+  <span class="q-breadcrumbs__label">
+    {@render children()}
+  </span>
 {/snippet}
 
-<div
+<li
   {...props}
-  class={["q-breadcrumbs__separator", `q-px-${separator.gutter}`, props.class]}
-  data-quaff
+  class={["q-breadcrumbs__item", props.class]}
+  style:--q-breadcrumbs-color={isActive ? "var(--q-active-color)" : undefined}
 >
-  {#if typeof separator.type === "string"}
-    {#if separator.type.startsWith("icon:")}
-      <QIcon
-        name={separator.type.replace("icon:", "") as MaterialSymbol}
-        size="1rem"
-      />
+  <span
+    class={["q-breadcrumbs__separator", `q-px-${separator.gutter}`]}
+    aria-hidden="true"
+  >
+    {#if typeof separator.type === "string"}
+      {#if separator.type.startsWith("icon:")}
+        <QIcon name={separator.type.slice(5) as MaterialSymbol} size="1rem" />
+      {:else}
+        {separator.type}
+      {/if}
     {:else}
-      {separator.type}
+      {@render separator.type?.()}
     {/if}
+  </span>
+
+  {#if href || to}
+    <a
+      href={href || to}
+      class={["q-breadcrumbs__el", isActive && activeClass]}
+      aria-current={isActive ? "page" : undefined}
+      data-quaff
+    >
+      {@render breadcrumbEl()}
+    </a>
   {:else}
-    {@render separator.type()}
+    <svelte:element
+      this={tag}
+      class={["q-breadcrumbs__el", isActive && activeClass]}
+      data-quaff
+    >
+      {@render breadcrumbEl()}
+    </svelte:element>
   {/if}
-</div>
-
-{#if href !== undefined || to !== undefined}
-  <a href={href || to} class={["q-breadcrumbs__el", classesIfActive]}>
-    {@render breadcrumbEl()}
-  </a>
-{:else}
-  <svelte:element this={tag} class={["q-breadcrumbs__el", classesIfActive]}>
-    {@render breadcrumbEl()}
-  </svelte:element>
-{/if}
+</li>

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

@@ -1,5 +1,5 @@
 // AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
-// @quaffHash 66c85971b241303d63478c8c8bca6aa0
+// @quaffHash ba78678fbdfaa1cac758b50914ab69b7
 export const QBreadcrumbsDocsProps = [
     {
         isArray: false,
@@ -32,11 +32,7 @@ export const QBreadcrumbsDocsProps = [
         name: "separator",
         type: [
             {
-                name: "string",
-                isClickable: false,
-            },
-            {
-                name: "`icon:${MaterialSymbol}`",
+                name: "Q.StringWithSuggestions<`icon:${MaterialSymbol}`>",
                 isClickable: false,
             },
             {
@@ -126,7 +122,7 @@ export const QBreadcrumbsElDocsProps = [
             isClickable: false,
         },
         description: "Tag to use for the breadcrumb element.",
-        default: '"div"',
+        default: '"span"',
     },
     {
         isArray: false,

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

@@ -2,7 +2,7 @@ import type { MaterialSymbol } from "material-symbols";
 import type { Snippet } from "svelte";
 import type { HTMLAttributes } from "svelte/elements";
 export type QBreadcrumbsGutterOptions = Exclude<Q.Size, "xs" | "xl">;
-export interface QBreadcrumbsProps extends HTMLAttributes<HTMLDivElement> {
+export interface QBreadcrumbsProps extends HTMLAttributes<HTMLElement> {
     /**
      * Color to use for the active breadcrumb element. See <link to colors docs> to see what colors can be used.
      * @default "primary"
@@ -17,14 +17,14 @@ export interface QBreadcrumbsProps extends HTMLAttributes<HTMLDivElement> {
      * Separator to use between the breadcrumb elements. To use an icon, prefix with "icon:" followed by the name of the icon.
      * @default "/"
      */
-    separator?: string | `icon:${MaterialSymbol}` | Snippet;
+    separator?: Q.StringWithSuggestions<`icon:${MaterialSymbol}`> | Snippet;
     /**
      * Color to use for the separators. See <link to colors docs> to see what colors can be used.
      * @default "outline"
      */
     separatorColor?: string;
 }
-export interface QBreadcrumbsElProps extends HTMLAttributes<HTMLElement> {
+export interface QBreadcrumbsElProps extends HTMLAttributes<HTMLLIElement> {
     /**
      * Class to apply to the breadcrumb element when the route is active.
      * @default "active"
@@ -47,7 +47,7 @@ export interface QBreadcrumbsElProps extends HTMLAttributes<HTMLElement> {
     href?: string;
     /**
      * Tag to use for the breadcrumb element.
-     * @default "div"
+     * @default "span"
      */
     tag?: string;
     /**

package/dist/components/button/QBtn.svelte

@@ -10,6 +10,7 @@
   let {
     disabled = false,
     variant,
+    color,
     filled = false,
     tonal = false,
     outlined = false,
@@ -25,17 +26,18 @@
     unelevated = false,
     size = "md",
     target,
+    tag,
     onclick,
     children,
     ...props
   }: QBtnProps = $props();
 
-  let qBtn: HTMLButtonElement | HTMLAnchorElement;
+  let qBtn: HTMLElement;
   let qBtnLabel: HTMLSpanElement;
 
   type QBtnMouseEvent = QEvent<MouseEvent, typeof qBtn>;
 
-  const tag = $derived(to ? "a" : "button");
+  const computedTag = $derived(to ? "a" : tag || "button");
   const qSize = $derived(useSize(size, "q-btn"));
 
   const src = $derived(extractImgSrc(icon));
@@ -57,11 +59,15 @@
     variant || boolVariant || "elevated",
   );
 
-  const color = $derived.by(() => {
+  const computedColor = $derived.by(() => {
     if (disabled) {
       return undefined;
     }
 
+    if (color) {
+      return color;
+    }
+
     if (finalVariant === "filled") {
       return "on-primary";
     }
@@ -73,7 +79,7 @@
     return "primary";
   });
 
-  const colorVar = $derived(color && `var(--${color})`);
+  const colorVar = $derived(computedColor && `var(--${computedColor})`);
 
   const rippleColorVar = $derived(
     rippleColor ? `var(--${rippleColor}, ${rippleColor})` : colorVar,
@@ -118,7 +124,7 @@
 </script>
 
 <svelte:element
-  this={tag}
+  this={computedTag}
   bind:this={qBtn}
   use:ripple={{
     disabled: noRipple || disabled,
@@ -138,9 +144,9 @@
   style:--ripple-color={colorVar}
   {target}
   href={to}
-  role={tag === "a" ? "button" : undefined}
+  role={computedTag === "a" ? "button" : undefined}
   aria-disabled={disabled || undefined}
-  tabindex={disabled ? -1 : 0}
+  tabindex={disabled ? -1 : props.tabindex || 0}
   {onkeydown}
   onclick={stopIfDisabled}
   data-quaff

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

@@ -1,5 +1,5 @@
 // AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
-// @quaffHash 0be24e79cccd1bb68f94fa2bcb3fd8ff
+// @quaffHash 7a471ce6ecf43b530f7b11bbb7dcabc9
 export const QBtnDocsProps = [
     {
         isArray: false,
@@ -13,6 +13,18 @@ export const QBtnDocsProps = [
         description: "Puts the button in a disabled state, making it unclickable.",
         default: "false",
     },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "color",
+        type: {
+            name: "string",
+            isClickable: false,
+        },
+        description: "Sets the color of the button. If a color is specified, it overwrites all other color variants defined with boolean attributes.",
+        default: "",
+    },
     {
         isArray: false,
         optional: true,
@@ -23,7 +35,7 @@ export const QBtnDocsProps = [
             isClickable: true,
         },
         description: "Choose the variant for the button. If a variant is specified, it overwrites all other variants defined with boolean attributes. If no variant is specified using this prop or boolean props, the `elevated` variant will be used.",
-        default: "undefined",
+        default: "",
     },
     {
         isArray: false,
@@ -211,13 +223,25 @@ export const QBtnDocsProps = [
         description: 'For "a" (anchor) tag only, apply the target attribute.',
         default: "undefined",
     },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "tag",
+        type: {
+            name: "keyof HTMLElementTagNameMap",
+            isClickable: false,
+        },
+        description: "The tag to use for the button. If not specified, a button element will be used or, if `to` is specified, an anchor tag will be used.",
+        default: "",
+    },
     {
         isArray: false,
         optional: true,
         isSnippet: false,
         name: "onclick",
         type: {
-            name: "MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>",
+            name: "MouseEventHandler<HTMLElement>",
             isClickable: false,
         },
         description: "This event is emitted when the button is clicked.",

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

@@ -8,9 +8,12 @@ export interface QBtnProps extends HTMLAttributes<HTMLButtonElement> {
      * @default false
      */
     disabled?: boolean;
+    /**
+     * Sets the color of the button. If a color is specified, it overwrites all other color variants defined with boolean attributes.
+     */
+    color?: string;
     /**
      * Choose the variant for the button. If a variant is specified, it overwrites all other variants defined with boolean attributes. If no variant is specified using this prop or boolean props, the `elevated` variant will be used.
-     * @default undefined
      */
     variant?: QBtnVariantOptions;
     /**
@@ -88,9 +91,13 @@ export interface QBtnProps extends HTMLAttributes<HTMLButtonElement> {
      * @default undefined
      */
     target?: HTMLAnchorAttributes["target"];
+    /**
+     * The tag to use for the button. If not specified, a button element will be used or, if `to` is specified, an anchor tag will be used.
+     */
+    tag?: keyof HTMLElementTagNameMap;
     /**
      * This event is emitted when the button is clicked.
      * @default undefined
      */
-    onclick?: MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
+    onclick?: MouseEventHandler<HTMLElement>;
 }

package/dist/components/expansion-item/QExpansionItem.scss

@@ -0,0 +1,46 @@
+@use "$css/mixins";
+@use "$css/variables";
+
+.q-expansion-item {
+  width: 100%;
+  padding: 0;
+
+  &[aria-disabled] :is(.q-item__section, .q-item__section *) {
+    color: unset;
+  }
+
+  & summary::marker,
+  & summary::-webkit-details-marker {
+    display: none;
+    content: "";
+  }
+
+  &::details-content {
+    transition: content-visibility var(--duration) allow-discrete;
+  }
+
+  &__toggle-icon {
+    margin: 0;
+    z-index: 1;
+
+    &:is(.q-btn) {
+      margin-right: -0.5rem;
+    }
+
+    &:not(.q-btn),
+    &.q-btn .q-icon {
+      transition: rotate var(--duration);
+    }
+
+    &--rotate:not(.q-btn),
+    &--rotate.q-btn .q-icon {
+      rotate: 180deg;
+    }
+  }
+
+  &__content {
+    @include mixins.padding("x-md", "y-sm");
+    width: 100%;
+    overflow: hidden;
+  }
+}