@quaffui/quaff 0.1.0-prealpha12 → 0.1.0-prealpha15

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

@@ -1,8 +1,10 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash 587610290cf9d959dd89496d6b94a98e
 export const QIconDocsProps = [
     {
         name: "size",
         type: "QIconSizeOptions",
-        optional: false,
+        optional: true,
         clickableType: true,
         description: 'The size of the icon. Can be specified with CSS units. If no unit is specified, "px" will be used.',
         default: "md",
@@ -10,7 +12,7 @@ export const QIconDocsProps = [
     {
         name: "type",
         type: "QIconTypeOptions",
-        optional: false,
+        optional: true,
         clickableType: true,
         description: "The type of the icon.",
         default: "outlined",
@@ -26,7 +28,7 @@ export const QIconDocsProps = [
     {
         name: "filled",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "Determines whether the icon should be filled.",
         default: "false",
@@ -50,7 +52,7 @@ export const QIconDocsProps = [
     {
         name: "imgAttributes",
         type: "Record<string, any>",
-        optional: false,
+        optional: true,
         clickableType: true,
         description: 'Additional attributes for the image element when using the `img` prop, as for example the "alt" attribute.',
         default: "{}",

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

@@ -1,4 +1,4 @@
-import type { CssValue, NativeProps, QuaffSizes } from "../../utils/types";
+import type { CssValue, NativeProps, QuaffSizes } from "../../utils";
 import type { HTMLAttributes } from "svelte/elements";
 export type QIconSizeOptions = QuaffSizes | CssValue | number;
 export type QIconTypeOptions = "outlined" | "sharp" | "rounded";

package/dist/components/index.d.ts

@@ -5,6 +5,7 @@ import QCardSection from "./card/QCardSection.svelte";
 import QCardActions from "./card/QCardActions.svelte";
 import QCheckbox from "./checkbox/QCheckbox.svelte";
 import QChip from "./chip/QChip.svelte";
+import QCircularProgress from "./progress/QCircularProgress.svelte";
 import QCodeBlock from "./codeBlock/QCodeBlock.svelte";
 import QDialog from "./dialog/QDialog.svelte";
 import QDrawer from "./drawer/QDrawer.svelte";
@@ -28,4 +29,4 @@ 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, QHeader, QIcon, QInput, QSelect, QLayout, QList, QItem, QItemSection, QLinearProgress, QRadio, QRailbar, QSeparator, QTabs, QTab, QTable, QToggle, QToolbar, QToolbarTitle, QTooltip, };
+export { QAvatar, QBtn, QCard, QCardSection, QCardActions, QCheckbox, QChip, QCircularProgress, 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

@@ -5,6 +5,7 @@ import QCardSection from "./card/QCardSection.svelte";
 import QCardActions from "./card/QCardActions.svelte";
 import QCheckbox from "./checkbox/QCheckbox.svelte";
 import QChip from "./chip/QChip.svelte";
+import QCircularProgress from "./progress/QCircularProgress.svelte";
 import QCodeBlock from "./codeBlock/QCodeBlock.svelte";
 import QDialog from "./dialog/QDialog.svelte";
 import QDrawer from "./drawer/QDrawer.svelte";
@@ -28,4 +29,4 @@ 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, QHeader, QIcon, QInput, QSelect, QLayout, QList, QItem, QItemSection, QLinearProgress, QRadio, QRailbar, QSeparator, QTabs, QTab, QTable, QToggle, QToolbar, QToolbarTitle, QTooltip, };
+export { QAvatar, QBtn, QCard, QCardSection, QCardActions, QCheckbox, QChip, QCircularProgress, 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

@@ -1,81 +1,70 @@
-<script>import { createClasses } from "../../utils/props";
-import { textWidth } from "../../utils/fields";
-export let bordered = false, dense = false, disable = false, error = false, errorMessage = void 0, filled = false, hint = void 0, label = void 0, outlined = false, rounded = false, value, userClasses = void 0;
-export { userClasses as class };
-let active = false;
-$:
-  hasBorder = bordered || rounded || outlined;
+<script>let focus = false;
 $:
-  classes = createClasses(
-    [
-      label && "label",
-      active && "active",
-      dense && "dense",
-      $$slots.prepend && "prepend",
-      $$slots.append && "append",
-      hasBorder && "has-border",
-      bordered && "bordered",
-      rounded && "rounded",
-      filled && "filled",
-      error && "error",
-      disable && "disabled"
-    ],
-    {
-      component: "q-input",
-      userClasses
-    }
-  );
-let wrapper = null;
-let inputElement = null;
-$:
-  value && updateInput(inputElement);
-function updateInput(target) {
-  const input = target;
-  if (!wrapper) {
-    throw new Error("unexpected to not have element");
-  }
-  const label2 = wrapper.querySelector("label");
-  const isBorder = hasBorder && !filled;
-  const toActive = document.activeElement === target || input.value || input.querySelector("[selected]");
-  if (toActive) {
-    if (isBorder && label2) {
-      const labelWidth = textWidth(label2, "0.75rem Arial");
-      let width = active ? labelWidth : Math.round(labelWidth / 1.33);
-      width = width / 16;
-      const start = rounded ? 1.25 : 0.75;
-      const end = width + start + 0.5;
-      input.style.clipPath = `polygon(0% 0%, ${start}rem 0%, ${start}rem 0.5rem, ${end}rem 0.5rem, ${end}rem 0%, 100% 0%, 100% 100%, 0% 100%)`;
-    } else
-      input.style.clipPath = "";
-    active = true;
-  } else {
-    active = false;
-    input.style.clipPath = "";
-  }
-}
+  active = value || focus;
+let slotPrependWidth = 0;
+export let dense = false, disable = false, error = false, errorMessage = void 0, filled = false, hint = void 0, label = void 0, outlined = false, rounded = false, value, userClasses = "";
+export { userClasses as class };
 </script>
 
-<div bind:this={wrapper} class={classes} {...$$restProps}>
-  <slot name="prepend" />
+<div
+  class="q-input q-field {userClasses}"
+  class:q-field--default={!outlined && !rounded && !filled}
+  class:q-field--outlined={outlined}
+  class:q-field--rounded={rounded}
+  class:q-field--filled={filled}
+  class:q-field--has-border={outlined || rounded}
+  class:q-field--dense={dense}
+  class:q-field--active={active}
+  class:q-field--focus={focus}
+  class:q-field--label={label}
+  class:q-field--slot-append={$$slots.append}
+  class:q-field--slot-prepend={$$slots.prepend}
+  class:q-field--disable={disable}
+  class:q-field--error={error}
+  style:--slot-prepend-width="{slotPrependWidth}px"
+  {...$$restProps}
+>
+  {#if $$slots.before}
+    <div class="q-field__slot-before">
+      <slot name="before" />
+    </div>
+  {/if}
 
-  <input
-    type="text"
-    on:focus={(e) => updateInput(e.currentTarget)}
-    on:blur={(e) => updateInput(e.currentTarget)}
-    bind:value
-    bind:this={inputElement}
-    tabindex={disable === true ? -1 : 0}
-  />
+  <div class="q-field__inner">
+    <label class="q-field__wrapper">
+      {#if $$slots.prepend}
+        <div class="q-field__slot-prepend" bind:clientWidth={slotPrependWidth}>
+          <slot name="prepend" />
+        </div>
+      {/if}
+      <input
+        class="q-field__input"
+        bind:value
+        placeholder=""
+        on:focus={() => (focus = true)}
+        on:blur={() => (focus = false)}
+        disabled={disable}
+        tabindex={disable === true ? -1 : 0}
+      />
+      <span class="q-field__label">{label}</span>
 
-  <slot name="append" />
+      {#if $$slots.append}
+        <div class="q-field__slot-append">
+          <slot name="append" />
+        </div>
+      {/if}
+    </label>
 
-  {#if label}
-    <!-- svelte-ignore a11y-label-has-associated-control -->
-    <label class="q-input__label {active ? 'q-input__label--active' : ''}">{label}</label>
-  {/if}
-  {#if hint}
-    <span class="q-input__helper">{hint}</span>
-  {:else if error && errorMessage}
-    <span class="q-input__error">{errorMessage}</span>
+    {#if error && errorMessage}
+      <div class="q-field__error">{errorMessage}</div>
+    {:else if hint}
+      <div class="q-field__hint">{hint}</div>
+    {/if}
+  </div>
+
+  {#if $$slots.after}
+    <div class="q-field__slot-after">
+      <slot name="after" />
+    </div>
   {/if}
 </div>

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

@@ -1,9 +1,8 @@
 import { SvelteComponent } from "svelte";
-import type { QInputProps } from "./props";
+import type { QInputProps } from "../input/props";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        bordered?: QInputProps["bordered"];
         dense?: QInputProps["dense"];
         disable?: QInputProps["disable"];
         error?: QInputProps["error"];
@@ -20,8 +19,10 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
+        before: {};
         prepend: {};
         append: {};
+        after: {};
     };
 };
 type QInputProps_ = typeof __propDef.props;

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

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

package/dist/components/input/docs.js

@@ -1,14 +1,8 @@
 export let QInputDocs = {
     name: "QInput",
-    description: "QInput is a form component that allows users to input text. It supports different visual styles such as bordered, filled, outlined, and rounded, and it can also display hint text and custom error messages.",
+    description: "QInput is a form component that allows users to input text. It supports different visual styles such as filled, outlined, and rounded, and it can also display hint text and custom error messages.",
     docs: {
         props: [
-            {
-                name: "bordered",
-                type: "boolean",
-                default: false,
-                description: "Whether the input component has a border.",
-            },
             {
                 name: "disable",
                 type: "boolean",

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

@@ -1,12 +1,6 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash 901937b41d79099a96a3713827911b68
 export const QInputDocsProps = [
-    {
-        name: "bordered",
-        type: "boolean",
-        optional: false,
-        clickableType: false,
-        description: "",
-        default: "",
-    },
     {
         name: "dense",
         type: "boolean",
@@ -18,7 +12,7 @@ export const QInputDocsProps = [
     {
         name: "disable",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -26,7 +20,7 @@ export const QInputDocsProps = [
     {
         name: "error",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -42,7 +36,7 @@ export const QInputDocsProps = [
     {
         name: "filled",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -66,7 +60,7 @@ export const QInputDocsProps = [
     {
         name: "outlined",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -74,7 +68,7 @@ export const QInputDocsProps = [
     {
         name: "rounded",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",

package/dist/components/input/index.scss

@@ -1,3 +1 @@
-.q-input {
-  @include field;
-}
+@import "$css/shared/q-field.scss";

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

@@ -1,7 +1,6 @@
-import type { NativeProps } from "../../utils/types";
+import type { NativeProps } from "../../utils";
 import type { HTMLAttributes } from "svelte/elements";
 export interface QInputProps extends NativeProps, HTMLAttributes<HTMLDivElement> {
-    bordered?: boolean;
     dense?: boolean;
     disable?: boolean;
     error?: boolean;
@@ -14,7 +13,6 @@ export interface QInputProps extends NativeProps, HTMLAttributes<HTMLDivElement>
     value: string;
 }
 export declare const QInputPropsDefaults: {
-    bordered: boolean;
     dense: boolean;
     disable: boolean;
     error: boolean;

package/dist/components/input/props.js

@@ -1,5 +1,4 @@
 export const QInputPropsDefaults = {
-    bordered: false,
     dense: false,
     disable: false,
     error: false,

package/dist/components/layout/QLayout.svelte

@@ -1,10 +1,10 @@
-<script context="module"></script>
-
-<script>import { setContext } from "svelte";
-import { createClasses, createStyles } from "../../utils/props";
-import ContextReseter from "../private/ContextReseter.svelte";
+<script context="module">import { createStyles, createClasses } from "../../utils";
+import { setContext } from "svelte";
 import { writable } from "svelte/store";
-export let view = "hhh lpr fff", headerHeight = "64px", footerHeight = "80px", leftDrawerWidth = "300px", rightDrawerWidth = "300px", leftRailbarWidth = "88px", rightRailbarWidth = "88px", userClasses = void 0, userStyles = void 0;
+import ContextReseter from "../private/ContextReseter.svelte";
+</script>
+
+<script>export let view = "hhh lpr fff", headerHeight = "64px", footerHeight = "80px", leftDrawerWidth = "300px", rightDrawerWidth = "300px", leftRailbarWidth = "88px", rightRailbarWidth = "88px", userClasses = void 0, userStyles = void 0;
 export { userClasses as class, userStyles as style };
 $:
   style = createStyles(

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

@@ -1,4 +1,6 @@
 import { SvelteComponent } from "svelte";
+import type { QLayoutProps } from "./props";
+import type { Readable } from "svelte/store";
 export interface DrawerContext {
     offset: {
         top: boolean;
@@ -19,8 +21,6 @@ export type LayoutContext = Readable<{
     drawerLeft: DrawerContext;
     drawerRight: DrawerContext;
 }>;
-import type { QLayoutProps } from "./props";
-import type { Readable } from "svelte/store";
 declare const __propDef: {
     props: {
         [x: string]: any;

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

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

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

@@ -1,8 +1,10 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash cce7c92a645afcabe17eef05e3f16990
 export const QLayoutDocsProps = [
     {
         name: "view",
         type: "QLayoutViewOptions",
-        optional: false,
+        optional: true,
         clickableType: true,
         description: 'The layout view configuration, which defines how layout components (header, railbars, drawers, footer) should be displayed on screen.\nSee <a href="https://quasar.dev/layout/layout/#understanding-the-view-prop" target="_blank">Quasar\'s explanation on the view prop</a>.',
         default: '"hhh lpr fff"',
@@ -10,7 +12,7 @@ export const QLayoutDocsProps = [
     {
         name: "headerHeight",
         type: "string | number",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: 'The height of the header. Can be specified with CSS units. If no unit is specified, "px" will be used.',
         default: "64px",
@@ -18,7 +20,7 @@ export const QLayoutDocsProps = [
     {
         name: "footerHeight",
         type: "string | number",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: 'The height of the footer. Can be specified with CSS units. If no unit is specified, "px" will be used.',
         default: "80px",
@@ -26,7 +28,7 @@ export const QLayoutDocsProps = [
     {
         name: "leftDrawerWidth",
         type: "string | number",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: 'The width of the left drawer. Can be specified with CSS units. If no unit is specified, "px" will be used.',
         default: "300px",
@@ -34,7 +36,7 @@ export const QLayoutDocsProps = [
     {
         name: "rightDrawerWidth",
         type: "string | number",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: 'The width of the right drawer. Can be specified with CSS units. If no unit is specified, "px" will be used.',
         default: "300px",
@@ -42,7 +44,7 @@ export const QLayoutDocsProps = [
     {
         name: "leftRailbarWidth",
         type: "string | number",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: 'The width of the left railbar. Can be specified with CSS units. If no unit is specified, "px" will be used.',
         default: "88px",
@@ -50,7 +52,7 @@ export const QLayoutDocsProps = [
     {
         name: "rightRailbarWidth",
         type: "string | number",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: 'The width of the right railbar. Can be specified with CSS units. If no unit is specified, "px" will be used.',
         default: "88px",

package/dist/components/layout/index.scss

@@ -175,6 +175,7 @@ $contentSlot: ":not(.q-header, .q-footer, .q-railbar, .q-drawer)";
 
   & .q-list > .q-item.q-link {
     border-radius: 2rem;
+    overflow: hidden;
 
     &::before {
       content: "";
@@ -193,7 +194,7 @@ $contentSlot: ":not(.q-header, .q-footer, .q-railbar, .q-drawer)";
       transition-timing-function: linear;
     }
 
-    &.active {
+    &.q-item--active {
       color: var(--on-secondary-container);
 
       &::before {
@@ -201,11 +202,6 @@ $contentSlot: ":not(.q-header, .q-footer, .q-railbar, .q-drawer)";
         transform: scaleX(1);
       }
     }
-
-    &:hover {
-      background-color: var(--on-surface-variant-2);
-      font-variation-settings: "GRAD" 50;
-    }
   }
 }
 

package/dist/components/layout/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 QLayoutViewOptions = `${"l" | "h"}${"h" | "H"}${"r" | "h"} ${"l" | "L"}${"p"}${"r" | "R"} ${"l" | "f"}${"f" | "F"}${"r" | "f"}`;
 export interface QLayoutProps extends NativeProps, HTMLAttributes<HTMLDivElement> {

package/dist/components/list/QItem.svelte

@@ -1,11 +1,10 @@
-<script>import QSeparator from "../separator/QSeparator.svelte";
-import useRouterLink, { isRouteActive } from "../../composables/use-router-link";
-import { createClasses } from "../../utils/props";
-import { getContext, setContext } from "svelte";
+<script>import { useRouterLink, isRouteActive } from "../../composables";
+import { ripple } from "../../helpers";
 import { Quaff } from "../../stores/Quaff";
+import { setContext, getContext } from "svelte";
 import { writable } from "svelte/store";
-import { ripple } from "../../helpers/ripple";
-export let tag = "div", active = false, clickable = false, dense = false, tabindex = 0, href = void 0, to = void 0, disable = false, activeClass = void 0, replace = false, noRipple = false, userClasses = void 0;
+import { QSeparator } from "../..";
+export let tag = "div", active = false, clickable = false, dense = false, tabindex = 0, href = void 0, to = void 0, disable = false, activeClass = "", replace = false, noRipple = false, userClasses = "";
 export { userClasses as class };
 let hasMultipleLines = writable(false);
 setContext("hasMultipleLines", hasMultipleLines);
@@ -25,27 +24,6 @@ $:
   isClickable = isActionable && !disable;
 $:
   isActive = isRouteActive($Quaff.router, to);
-$:
-  classes = createClasses(
-    [
-      $hasMultipleLines && "multiline",
-      dense && "dense",
-      (isActive || hasLink && active) && activeClass,
-      (isActive || hasLink && active) && "active"
-    ],
-    {
-      component: "q-item",
-      quaffClasses: [linkClasses],
-      userClasses
-    }
-  );
-$:
-  attributes = {
-    class: classes,
-    tabindex: isClickable == true ? Number(tabindex) || 0 : void 0,
-    "aria-disabled": isActionable === true && disable === true ? true : void 0,
-    ...$$restProps
-  };
 </script>
 
 {#if separatorOptions !== undefined}
@@ -53,11 +31,33 @@ $:
 {/if}
 {#if linkAttributes.href !== undefined}
   <!-- svelte-ignore a11y-missing-attribute -->
-  <a use:ripple={{ disable: !isClickable || noRipple }} {...attributes} {...linkAttributes}>
+  <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+  <a
+    use:ripple={{ disable: !isClickable || noRipple }}
+    class="q-item {linkClasses} {userClasses}"
+    class:q-item--active={isActive || (hasLink && active)}
+    class:q-item--multiline={$hasMultipleLines}
+    class:q-item--dense={dense}
+    class:{activeClass}={isActive || (hasLink && active)}
+    tabindex={isClickable ? Number(tabindex) || 0 : -1}
+    aria-disabled={(isActionable && disable) || undefined}
+    {...linkAttributes}
+    {...$$restProps}
+  >
     <slot />
   </a>
 {:else}
-  <svelte:element this={tag} {...attributes}>
+  <svelte:element
+    this={tag}
+    class="q-item {userClasses}"
+    class:q-item--active={isActive || (hasLink && active)}
+    class:q-item--multiline={$hasMultipleLines}
+    class:q-item--dense={dense}
+    class:{activeClass}={isActive || (hasLink && active)}
+    tabindex={isClickable ? Number(tabindex) || 0 : -1}
+    aria-disabled={(isActionable && disable) || undefined}
+    {...$$restProps}
+  >
     <slot />
   </svelte:element>
 {/if}

package/dist/components/list/QItemSection.svelte

@@ -1,6 +1,5 @@
-<script>import { createClasses } from "../../utils/props";
-import { getContext } from "svelte";
-export let type = "content", userClasses = void 0;
+<script>import { getContext } from "svelte";
+export let type = "content", userClasses = "";
 export { userClasses as class };
 $:
   ctx = getContext("hasMultipleLines");
@@ -8,41 +7,39 @@ $:
   if (type === "content") {
     $ctx = $$slots.headline && [$$slots.line1, $$slots.line2, $$slots.line3].filter(Boolean).length >= 2;
   }
-$:
-  classes = createClasses([type], {
-    component: "q-item__section",
-    userClasses
-  });
 </script>
 
-<div class={classes} {...$$restProps}>
+<div
+  class="q-item__section q-item__section--{type} {userClasses}"
+  {...$$restProps}
+>
   {#if type === "content"}
-    {#if [$$slots.headline, $$slots.line2, $$slots.line2, $$slots.line3].every(Boolean) === false}
+    {#if ![$$slots.headline, $$slots.line2, $$slots.line2, $$slots.line3].some(Boolean)}
       <slot />
     {:else}
       {#if $$slots.headline}
-        <div class="body-large on-surface-text">
+        <div class="body-large text-on-surface">
           <slot name="headline" />
         </div>
       {/if}
-      <div class="body-medium on-surface-variant-text">
+      <div class="body-medium text-on-surface-variant">
         {#if $$slots.line1}
           <slot name="line1" />
         {/if}
       </div>
       {#if $$slots.line2}
-        <div class="body-medium on-surface-variant-text">
+        <div class="body-medium text-on-surface-variant">
           <slot name="line2" />
         </div>
       {/if}
       {#if $$slots.line3}
-        <div class="body-medium on-surface-variant-text">
+        <div class="body-medium text-on-surface-variant">
           <slot name="line3" />
         </div>
       {/if}
     {/if}
   {:else if type === "trailingText"}
-    <div class="label-small on-surface-variant-text">
+    <div class="label-small text-on-surface-variant">
       <slot />
     </div>
   {:else}