@quaffui/quaff 0.1.0-prealpha12 → 0.1.0-prealpha15

package/dist/components/avatar/QAvatar.svelte

@@ -1,44 +1,52 @@
-<script>import { useSize } from "../../composables/use-size";
-import { createClasses, createStyles } from "../../utils/props";
-export let shape = "circle", size = "md", src = void 0, video = false, userClasses = void 0, userStyles = void 0;
+<script>import { useSize } from "../../composables";
+export let shape = "circle", size = "md", src = void 0, video = false, userClasses = "";
 export { userClasses as class };
-export { userStyles as style };
 $:
   sizeObj = useSize(size);
-$:
-  shapeClass = createClasses([
-    shape === "circle" && "circle",
-    shape === "rounded" && "round",
-    shape.includes("top") && "top-round",
-    shape.includes("bottom") && "bottom-round",
-    shape.includes("left") && "left-round",
-    shape.includes("right") && "right-round"
-  ]);
-$:
-  classes = createClasses([shapeClass, sizeObj.class], {
-    component: "q-avatar",
-    userClasses
-  });
-$:
-  style = createStyles(
-    {
-      width: sizeObj.style,
-      height: sizeObj.style
-    },
-    userStyles
-  );
 </script>
 
 {#if video === true}
   <!-- svelte-ignore a11y-media-has-caption -->
-  <video class={classes} {style} autoplay loop playsinline {...$$restProps} on:click>
+  <video
+    class="q-avatar {sizeObj.class ? `q-avatar--${sizeObj.class}` : ''} {userClasses}"
+    class:q-avatar--circle={shape === "circle"}
+    class:q-avatar--round={shape === "rounded"}
+    class:q-avatar--top-round={shape?.includes("top")}
+    class:q-avatar--bottom-round={shape?.includes("bottom")}
+    class:q-avatar--left-round={shape?.includes("left")}
+    class:q-avatar--right-round={shape?.includes("right")}
+    style:width={sizeObj.style}
+    style:height={sizeObj.style}
+    autoplay loop playsinline {...$$restProps} on:click>
     <source {src} type="video/mp4" />
   </video>
 {:else if src !== undefined}
   <!-- svelte-ignore a11y-missing-attribute -->
-  <img class={classes} {style} {src} {...$$restProps} on:click />
+  <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+  <img
+    class="q-avatar {sizeObj.class ? `q-avatar--${sizeObj.class}` : ''} {userClasses}"
+    class:q-avatar--circle={shape === "circle"}
+    class:q-avatar--round={shape === "rounded"}
+    class:q-avatar--top-round={shape?.includes("top")}
+    class:q-avatar--bottom-round={shape?.includes("bottom")}
+    class:q-avatar--left-round={shape?.includes("left")}
+    class:q-avatar--right-round={shape?.includes("right")}
+    style:width={sizeObj.style}
+    style:height={sizeObj.style}
+    {src} {...$$restProps} on:click />
 {:else}
-  <div class={classes} {style} {...$$restProps} on:click>
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <div
+    class="q-avatar {sizeObj.class ? `q-avatar--${sizeObj.class}` : ''} {userClasses}"
+    class:q-avatar--circle={shape === "circle"}
+    class:q-avatar--round={shape === "rounded"}
+    class:q-avatar--top-round={shape?.includes("top")}
+    class:q-avatar--bottom-round={shape?.includes("bottom")}
+    class:q-avatar--left-round={shape?.includes("left")}
+    class:q-avatar--right-round={shape?.includes("right")}
+    style:width={sizeObj.style}
+    style:height={sizeObj.style}
+    {...$$restProps} on:click>
     <slot />
   </div>
 {/if}

package/dist/components/avatar/QAvatar.svelte.d.ts

@@ -8,7 +8,6 @@ declare const __propDef: {
         src?: QAvatarProps["src"];
         video?: QAvatarProps["video"];
         class?: string | null | undefined;
-        style?: string | null | undefined;
     };
     events: {
         click: MouseEvent;

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

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

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

@@ -1,3 +1,5 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash 24254a62ac601e8b6e85a3b74a7b3297
 export const QAvatarDocsProps = [
     {
         name: "shape",

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

@@ -1,4 +1,4 @@
-import type { QuaffSizes, CssValue, NativeProps } from "../../utils/types";
+import type { QuaffSizes, CssValue, NativeProps } from "../../utils";
 import type { HTMLAttributes } from "svelte/elements";
 export type QAvatarShapeOptions = "circle" | "rounded" | "top-round" | "left-round" | "right-round" | "bottom-round" | "top-left-round" | "top-right-round" | "bottom-left-round" | "bottom-right-round";
 export type QAvatarSizeOptions = QuaffSizes | CssValue | number;

package/dist/components/breadcrumbs/QBreadcrumbs.svelte

@@ -1,18 +1,13 @@
-<script>import { createClasses } from "../../utils/props";
+<script>import { createClasses } from "../../utils";
 import { onMount, setContext } from "svelte";
-export let separator = "/", gutter = "sm", activeColor = "primary", separatorColor = "outline", userClasses = void 0;
+export let separator = "/", gutter = "sm", activeColor = "primary", separatorColor = "outline", userClasses = "";
 export { userClasses as class };
 let breadcrumbElement;
 onMount(() => breadcrumbElement.firstChild?.remove());
 setContext("activeColor", activeColor);
 setContext("separator", { type: separator, color: separatorColor, gutter });
-$:
-  classes = createClasses([], {
-    component: "q-breadcrumbs",
-    userClasses
-  });
 </script>
 
-<div class={classes} bind:this={breadcrumbElement}>
+<div class="q-breadcrumbs {userClasses}" bind:this={breadcrumbElement}>
   <slot />
 </div>

package/dist/components/breadcrumbs/QBreadcrumbsEl.svelte

@@ -1,30 +1,18 @@
-<script>import { getContext } from "svelte";
-import QIcon from "../icon/QIcon.svelte";
-import { createClasses } from "../../utils/props";
-import { isRouteActive } from "../../composables/use-router-link";
+<script>import { isRouteActive } from "../../composables";
 import { Quaff } from "../../stores/Quaff";
-export let label = "", icon = void 0, tag = "div", to = void 0, href = void 0, activeClass = "active", userClasses = void 0;
+import { getContext } from "svelte";
+import { QIcon } from "../..";
+export let label = "", icon = void 0, tag = "div", to = void 0, href = void 0, activeClass = "q-breadcrumbs__el--active", userClasses = "";
 export { userClasses as class };
 const activeColor = getContext("activeColor");
 const separator = getContext("separator");
 $:
   isActive = isRouteActive($Quaff.router, href || to);
 $:
-  classes = createClasses([isActive && activeClass], {
-    component: "q-breadcrumbs",
-    element: "el",
-    quaffClasses: [isActive && `${activeColor}-text`],
-    userClasses
-  });
-$:
-  separatorClasses = createClasses([], {
-    component: "q-breadcrumbs",
-    element: "separator",
-    quaffClasses: [`q-px-${separator.gutter}`]
-  });
+  activeClasses = isActive ? `${activeClass} text-${activeColor}` : "";
 </script>
 
-<div class={separatorClasses}>
+<div class="q-breadcrumbs__separator q-px-{separator.gutter}">
   {#if separator.type.startsWith("icon:")}
     <QIcon name={separator.type.replace("icon:", "")} size="1rem" />
   {:else}
@@ -33,7 +21,9 @@ $:
 </div>
 
 {#if href !== undefined || to !== undefined}
-  <a href={href || to} class={classes}>
+  <a href={href || to}
+    class="q-breadcrumb__el {activeClasses} {userClasses}"
+  >
     {#if icon !== undefined}
       <QIcon name={icon} size="1rem" />
     {:else if $$slots.icon}
@@ -45,7 +35,9 @@ $:
     </slot>
   </a>
 {:else}
-  <svelte:element this={tag} class={classes}>
+  <svelte:element this={tag}
+    class="q-breadcrumb__el {activeClasses} {userClasses}"
+  >
     {#if icon !== undefined}
       <QIcon name={icon} size="1rem" />
     {:else if $$slots.icon}

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

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

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

@@ -1,3 +1,5 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash 0e657b47b135caa98d094a90819b9c4e
 export const QBreadcrumbsDocsProps = [
     {
         name: "separator",

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

@@ -1,4 +1,4 @@
-import type { NativeProps } from "../../utils/types";
+import type { NativeProps } from "../../utils";
 import type { HTMLAttributes } from "svelte/elements";
 export type QBreadcrumbsGutterOptions = "none" | "sm" | "md" | "lg";
 export interface QBreadcrumbsProps extends NativeProps, HTMLAttributes<HTMLDivElement> {

package/dist/components/button/QBtn.svelte

@@ -1,11 +1,8 @@
-<script>import { createClasses } from "../../utils/props";
-import { createEventDispatcher, onMount } from "svelte";
-import QIcon from "../icon/QIcon.svelte";
-import QCircularProgress from "../progress/QCircularProgress.svelte";
-import { useSize } from "../../composables/use-size";
-import { isActivationKey } from "../../utils/events";
-import { ripple } from "../../helpers/ripple";
-export let icon = void 0, label = void 0, disable = false, loading = false, unelevated = false, outline = false, round = false, rectangle = false, noRipple = false, flat = false, to = void 0, size = void 0, userClasses = void 0;
+<script>import { useSize } from "../../composables";
+import { ripple } from "../../helpers";
+import { isActivationKey } from "../../utils";
+import { QIcon, QCircularProgress } from "../..";
+export let icon = void 0, label = void 0, disable = false, loading = false, unelevated = false, outline = false, round = false, rectangle = false, noRipple = false, flat = false, to = void 0, size = void 0, userClasses = "";
 export { userClasses as class };
 let qBtn;
 let tag;
@@ -14,20 +11,13 @@ $:
 $:
   sizeObj = useSize(size);
 $:
-  classes = createClasses(
-    [
-      unelevated && "unelevated",
-      rectangle && "rectangle",
-      outline && "outlined",
-      flat && "flat",
-      (!$$slots.default && !label || round) && "round",
-      size !== "md" && sizeObj.class
-    ],
-    {
-      component: "q-btn",
-      userClasses
-    }
-  );
+  sizeClass = sizeObj.class && sizeObj.class !== "md" ? `q-btn--${sizeObj.class}` : "";
+function stopIfDisabled(e) {
+  if (disable) {
+    e.preventDefault();
+    e.stopImmediatePropagation();
+  }
+}
 function onKeyDown(e) {
   if (!isActivationKey(e))
     return;
@@ -39,15 +29,21 @@ function onKeyDown(e) {
 
 <svelte:element
   this={tag}
-  bind:this={qBtn}
   use:ripple={{ disable: noRipple || disable }}
-  role={tag === "a" ? "button" : undefined}
-  href={to}
-  class={classes}
+  bind:this={qBtn}
   aria-disabled={disable || undefined}
+  class="q-btn {sizeClass} {userClasses}"
+  class:q-btn--unelevated={unelevated}
+  class:q-btn--outlined={outline}
+  class:q-btn--flat={flat}
+  class:q-btn--rectangle={rectangle}
+  class:q-btn--round={(!$$slots.default && !label) || round}
+  href={to}
+  role={tag === "a" ? "button" : undefined}
   tabindex={disable ? -1 : 0}
-  on:click
   on:keydown={onKeyDown}
+  on:click={stopIfDisabled}
+  on:click
   {...$$restProps}
 >
   {#if icon && !loading}

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

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

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

@@ -1,3 +1,5 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash 721c97430442b5c05c756e2473f45aeb
 export const QBtnDocsProps = [
     {
         name: "disable",
@@ -55,6 +57,14 @@ export const QBtnDocsProps = [
         description: "Use rectangle design for the button, removing the large border-radius.",
         default: "false",
     },
+    {
+        name: "noRipple",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "Disable the ripple effect for the button.",
+        default: "false",
+    },
     {
         name: "round",
         type: "boolean",
@@ -87,4 +97,12 @@ export const QBtnDocsProps = [
         description: "Size of the button.",
         default: "md",
     },
+    {
+        name: "target",
+        type: 'HTMLAnchorAttributes["target"]',
+        optional: true,
+        clickableType: true,
+        description: 'For "a" (anchor) tag only, apply the target attribute.',
+        default: "undefined",
+    },
 ];

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

@@ -1,4 +1,4 @@
-import type { NativeProps, QuaffSizes } from "../../utils/types";
+import type { NativeProps, QuaffSizes } from "../../utils";
 import type { HTMLAnchorAttributes, HTMLAttributes } from "svelte/elements";
 export type QBtnSizeOptions = Exclude<QuaffSizes, "xs">;
 export interface QBtnProps extends NativeProps, HTMLAttributes<HTMLElement> {

package/dist/components/card/QCard.svelte

@@ -1,18 +1,17 @@
-<script>import { createClasses } from "../../utils/props";
-export let bordered = false, fill = void 0, flat = false, round = false, title = void 0, userClasses = void 0;
+<script>export let bordered = false, fill = void 0, flat = false, round = false, title = void 0, userClasses = "";
 export { userClasses as class };
 const colorOptions = ["primary", "secondary", "tertiary"];
 $:
   color = !fill ? "surface" : colorOptions.includes(fill) ? `${fill}-container` : "surface-variant";
-$:
-  classes = createClasses([bordered && "bordered", flat && "flat", round && "rounded"], {
-    component: "q-card",
-    quaffClasses: [`${color} on-${color}-text`],
-    userClasses
-  });
 </script>
 
-<article class={classes} {...$$restProps}>
+<article 
+  class="q-card {color} {userClasses}"
+  class:q-card--bordered={bordered}
+  class:q-card--flat={flat}
+  class:q-card--rounded={round}
+  {...$$restProps}
+>
   {#if $$slots.title}
     <slot name="title" />
   {:else if title !== undefined}

package/dist/components/card/QCardActions.svelte

@@ -1,18 +1,14 @@
-<script>import useAlign from "../../composables/use-align";
-import { createClasses } from "../../utils/props";
-export let align = void 0, vertical = false, userClasses = void 0;
+<script>import { useAlign } from "../../composables";
+export let align = void 0, vertical = false, userClasses = "";
 export { userClasses as class };
 $:
   alignClass = useAlign(align);
-$:
-  classes = createClasses([vertical && "vertical"], {
-    component: "q-card",
-    element: "actions",
-    quaffClasses: [alignClass],
-    userClasses
-  });
 </script>
 
-<nav class={classes} {...$$restProps}>
+<nav
+  class="q-card__actions {alignClass} {userClasses}"
+  class:q-card__actions--vertical={vertical}
+  {...$$restProps}
+>
   <slot />
 </nav>

package/dist/components/card/QCardSection.svelte

@@ -1,14 +1,12 @@
-<script>import { createClasses } from "../../utils/props";
-export let horizontal = false, userClasses = void 0;
+<script>export let horizontal = false, userClasses = "";
 export { userClasses as class };
-$:
-  classes = createClasses([horizontal && "horizontal"], {
-    component: "q-card",
-    element: "section",
-    userClasses
-  });
 </script>
 
-<div class={classes} {...$$restProps} on:scroll>
+<div
+  class="q-card__section {userClasses}"
+  class:q-card__section--horizontal={horizontal}
+  {...$$restProps} 
+  on:scroll
+  >
   <slot />
 </div>

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

@@ -1,4 +1,4 @@
-import type { QComponentDocs } from "../../utils/types";
+import type { QComponentDocs } from "../../utils";
 export declare let QCardDocs: QComponentDocs;
 export declare let QCardSectionDocs: QComponentDocs;
 export declare let QCardActionsDocs: QComponentDocs;

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

@@ -1,3 +1,5 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash 2ef1416c81c3c5c723220c0c102649eb
 export const QCardDocsProps = [
     {
         name: "bordered",
@@ -54,7 +56,7 @@ export const QCardActionsDocsProps = [
     {
         name: "vertical",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "Lays out the action items vertically.",
         default: "false",

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

@@ -1,5 +1,5 @@
-import type { UseAlignProps } from "../../composables/use-align";
-import type { NativeProps } from "../../utils/types";
+import type { UseAlignProps } from "../../composables";
+import type { NativeProps } from "../../utils";
 import type { HTMLAttributes } from "svelte/elements";
 export type QCardFillColors = "primary" | "secondary" | "tertiary";
 export interface QCardProps extends NativeProps, HTMLAttributes<HTMLElement> {

package/dist/components/checkbox/QCheckbox.svelte

@@ -1,14 +1,12 @@
-<script>import { createClasses } from "../../utils/props";
-export let value = false, label = "", disable = false, userClasses = void 0;
+<script>export let value = false, label = "", disable = false, userClasses = "";
 export { userClasses as class };
-$:
-  classes = createClasses([disable && "disabled"], {
-    component: "q-checkbox",
-    userClasses
-  });
 </script>
 
-<label class={classes} {...$$restProps}>
+<label 
+  class="q-checkbox {userClasses}"
+  class:q-checkbox--disabled={disable}
+  {...$$restProps}
+>
   <input type="checkbox" bind:checked={value} disabled={disable} />
   <span>{label}</span>
 </label>

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

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

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

@@ -1,3 +1,5 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash 9a5ee048cd1eb382844ca517e4e3e645
 export const QCheckboxDocsProps = [
     {
         name: "value",

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

@@ -1,4 +1,4 @@
-import type { NativeProps } from "../../utils/types";
+import type { NativeProps } from "../../utils";
 import type { HTMLAttributes } from "svelte/elements";
 export interface QCheckboxProps extends NativeProps, HTMLAttributes<HTMLLabelElement> {
     /**

package/dist/components/chip/QChip.svelte

@@ -1,51 +1,59 @@
-<script>import { activationHandler } from "../../helpers/activationHandler";
-import { createClasses } from "../../utils/props";
-import { createEventDispatcher } from "svelte";
-import QIcon from "../icon/QIcon.svelte";
-import { useSize } from "../../composables/use-size";
-export let content = void 0, icon = void 0, iconRight = void 0, disable = false, responsive = false, vertical = false, round = false, outlined = false, size = "md", tabindex = void 0, href = void 0, userClasses = void 0;
+<script>import { useSize } from "../../composables";
+import { ripple } from "../../helpers";
+import { isActivationKey } from "../../utils";
+import { QIcon } from "../..";
+export let content = void 0, icon = void 0, iconRight = void 0, disable = false, responsive = false, vertical = false, round = false, outlined = false, noRipple = false, size = "md", tabindex = void 0, href = void 0, userClasses = "";
 export { userClasses as class };
-const emit = createEventDispatcher();
+let qChip;
 $:
   img = icon?.startsWith("img:") ? icon.slice(4) : void 0;
 $:
   imgRight = iconRight?.startsWith("img:") ? iconRight.slice(4) : void 0;
 $:
   sizeObj = useSize(size);
-$:
-  classes = createClasses(
-    [
-      vertical && "vertical",
-      round && "rounded",
-      (outlined || disable) && "bordered",
-      size !== "md" && sizeObj.class
-    ],
-    {
-      component: "q-chip",
-      userClasses
-    }
-  );
-$:
-  imgClass = createClasses([responsive && "responsive"], {
-    component: "q-chip",
-    element: "img"
-  });
 $:
   tab = disable ? -1 : tabindex ?? 0;
+function stopIfDisabled(e) {
+  if (disable) {
+    e.preventDefault();
+    e.stopImmediatePropagation();
+  }
+}
+function onKeyDown(e) {
+  if (!isActivationKey(e))
+    return;
+  e.preventDefault();
+  let click = new MouseEvent("click");
+  qChip.dispatchEvent(click);
+}
 </script>
 
 <a
-  use:activationHandler={{ disable, callback: (e) => emit("activated", e) }}
+  bind:this={qChip}
+  use:ripple={{ disable: noRipple || disable }}
+  aria-disabled={disable || undefined}
+  class="q-chip {sizeObj.class && sizeObj.class !== 'md'
+    ? `q-chip--${sizeObj.class}`
+    : ''} {userClasses}"
+  class:q-chip--vertical={vertical}
+  class:q-chip--rounded={round}
+  class:q-chip--bordered={outlined || disable}
   {href}
-  class={classes}
   tabindex={tab}
+  on:keydown={onKeyDown}
+  on:click={stopIfDisabled}
+  on:click
   {...$$restProps}
-  aria-disabled={disable || undefined}
 >
   {#if $$slots.leading}
     <slot name="leading" />
   {:else if img}
-    <img class={imgClass} src={img} alt="{content || 'Slotted'} chip" />
+    <img
+      class="q-chip__img"
+      class:q-chip__img--responsive={responsive}
+      src={img}
+      alt="{content || 'Slotted'} chip"
+    />
   {:else if icon}
     <QIcon name={icon} class="q-chip__icon" />
   {/if}
@@ -58,7 +66,8 @@ $:
     <slot name="trailing" />
   {:else if imgRight}
     <img
-      class="{imgClass} q-chip__img--trailing"
+      class="q-chip__img q-chip__img--trailing"
+      class:q-chip__img--responsive={responsive}
       src={imgRight}
       alt="{content || 'Slotted'} chip"
     />

package/dist/components/chip/QChip.svelte.d.ts

@@ -11,13 +11,14 @@ declare const __propDef: {
         vertical?: QChipProps["vertical"];
         round?: QChipProps["round"];
         outlined?: QChipProps["outlined"];
+        noRipple?: QChipProps["noRipple"];
         size?: QChipProps["size"];
         tabindex?: QChipProps["tabindex"];
         href?: QChipProps["href"];
         class?: string | null | undefined;
     };
     events: {
-        activated: CustomEvent<any>;
+        click: MouseEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

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

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

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

@@ -1,3 +1,5 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash 64a4b0e1fd969d51711b5f49c74fd317
 export const QChipDocsProps = [
     {
         name: "content",
@@ -63,6 +65,14 @@ export const QChipDocsProps = [
         description: "Use outline design for the chip, adding a border around it.",
         default: "false",
     },
+    {
+        name: "noRipple",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "Disable the ripple effect for the chip.",
+        default: "false",
+    },
     {
         name: "size",
         type: "QChipSizeOptions",

package/dist/components/chip/index.scss

@@ -21,7 +21,6 @@
   cursor: pointer;
   border: none;
 
-  @extend .ripple;
   @extend .no-select;
   @include padding("x", "md");
   @include margin("x");
@@ -77,6 +76,24 @@
       border-color: var(--on-surface);
     }
   }
+
+  &:is(:hover, :focus):not([aria-disabled])::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--on-primary);
+  }
+
+  &:hover:not([aria-disabled])::after {
+    opacity: 0.08;
+  }
+
+  &:focus:not([aria-disabled])::after {
+    opacity: 0.16;
+  }
 }
 
 // QChip icons