@pathscale/ui 2.1.1 → 2.2.0

package/dist/components/auth-submit-button/AuthSubmitButton.recipe.js

@@ -0,0 +1,23 @@
+import { recipe } from "../../lib/layouts/index.js";
+const authSubmitButton = recipe({
+    component: "auth-submit-button",
+    element: "button",
+    slots: {
+        root: {
+            base: "auth-submit-button"
+        }
+    },
+    _layouts: {
+        slots: {
+            root: {
+                base: "auth-submit-button",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            root: 0
+        }
+    }
+});
+export { authSubmitButton };

package/dist/components/auth-submit-button/index.d.ts

@@ -1 +1,2 @@
-export { default as AuthSubmitButton, type AuthSubmitButtonProps } from "./AuthSubmitButton";
+export { AuthSubmitButtonLayout as default, AuthSubmitButtonLayout as AuthSubmitButton, } from "./AuthSubmitButton.generated";
+export type { AuthSubmitButtonProps } from "./AuthSubmitButton.generated";

package/dist/components/auth-submit-button/index.js

@@ -1 +1 @@
-export { default as AuthSubmitButton } from "./AuthSubmitButton.js";
+export { AuthSubmitButtonLayout as AuthSubmitButton, AuthSubmitButtonLayout as default } from "./AuthSubmitButton.generated.js";

package/dist/components/avatar/Avatar.css

@@ -9,7 +9,7 @@
     align-items: center;
     justify-content: center;
     overflow: hidden;
-    border-radius: 9999px;
+    border-radius: var(--radius-pill, 9999px);
     width: 2.5rem;
     height: 2.5rem;
     background-color: var(--color-base-200);
@@ -70,25 +70,10 @@
   /* -------------------------------------------------------------------------------------------------
    * Fallback color modifiers
    * -----------------------------------------------------------------------------------------------*/
-  .avatar__fallback--default {
-    color: var(--color-base-content);
-  }
 
-  .avatar__fallback--accent {
-    color: var(--color-accent);
-  }
 
-  .avatar__fallback--success {
-    color: var(--color-success);
-  }
 
-  .avatar__fallback--warning {
-    color: var(--color-warning);
-  }
 
-  .avatar__fallback--danger {
-    color: var(--color-error);
-  }
 
   /* -------------------------------------------------------------------------------------------------
    * Variant: soft
@@ -121,4 +106,36 @@
     background-color: var(--color-base-200);
     color: var(--color-base-content);
   }
+
+  .avatar__fallback--flavor-neutral {
+    color: var(--color-base-content);
+  }
+
+  .avatar__fallback--flavor-primary {
+    color: var(--color-primary);
+  }
+
+  .avatar__fallback--flavor-secondary {
+    color: var(--color-secondary);
+  }
+
+  .avatar__fallback--flavor-accent {
+    color: var(--color-accent);
+  }
+
+  .avatar__fallback--flavor-destructive {
+    color: var(--color-error);
+  }
+
+  .avatar__fallback--flavor-success {
+    color: var(--color-success);
+  }
+
+  .avatar__fallback--flavor-warning {
+    color: var(--color-warning);
+  }
+
+  .avatar__fallback--flavor-info {
+    color: var(--color-info);
+  }
 }

package/dist/components/avatar/Avatar.generated.d.ts

@@ -1,18 +1,17 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./Avatar.css";
 import { type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
+import type { UIBaseProps, Flavor } from "../vocabulary";
 export type AvatarSize = "sm" | "md" | "lg";
-export type AvatarColor = "default" | "accent" | "success" | "warning" | "danger";
 export type AvatarVariant = "default" | "soft";
-export type AvatarRootProps = Omit<JSX.HTMLAttributes<HTMLSpanElement>, "children"> & IComponentBaseProps & {
+export type AvatarRootProps = Omit<JSX.HTMLAttributes<HTMLSpanElement>, "children"> & UIBaseProps & {
     children: JSX.Element;
     size?: AvatarSize;
-    color?: AvatarColor;
+    flavor?: Flavor;
     variant?: AvatarVariant;
 };
-export type AvatarImageProps = Omit<JSX.ImgHTMLAttributes<HTMLImageElement>, "children"> & IComponentBaseProps;
-export type AvatarFallbackProps = Omit<JSX.HTMLAttributes<HTMLSpanElement>, "children"> & IComponentBaseProps & {
+export type AvatarImageProps = Omit<JSX.ImgHTMLAttributes<HTMLImageElement>, "children"> & UIBaseProps;
+export type AvatarFallbackProps = Omit<JSX.HTMLAttributes<HTMLSpanElement>, "children"> & UIBaseProps & {
     children?: JSX.Element;
     delayMs?: number;
 };

package/dist/components/avatar/Avatar.generated.js

@@ -15,20 +15,19 @@ const __solidLayoutAvatarRoot = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "size",
-        "color",
+        "flavor",
         "variant",
         "dataTheme",
         "style"
     ]);
     const [imageLoaded, setImageLoaded] = createSignal(false);
     const size = ()=>local.size ?? "md";
-    const color = ()=>local.color ?? "default";
+    const flavor = ()=>local.flavor ?? "neutral";
     const variant = ()=>local.variant ?? "default";
     const ctx = {
         size,
-        color,
+        flavor,
         variant,
         imageLoaded,
         setImageLoaded
@@ -38,7 +37,7 @@ const __solidLayoutAvatarRoot = (_stable, p)=>{
         get children () {
             var _el$ = _tmpl$();
             spread(_el$, mergeProps(others, ()=>({
-                    class: twMerge(CLASSES.base, CLASSES.size[size()], CLASSES.variant[variant()], local.class, local.className)
+                    class: twMerge(CLASSES.base, CLASSES.size[size()], CLASSES.variant[variant()], local.class)
                 }), {
                 "data-slot": "avatar-root",
                 get ["data-theme"] () {
@@ -61,7 +60,6 @@ const AvatarRoot = defineComponent({
 const __solidLayoutAvatarImage = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "class",
-        "className",
         "dataTheme",
         "style",
         "src",
@@ -88,7 +86,7 @@ const __solidLayoutAvatarImage = (_stable, p)=>{
                 return local.alt;
             }
         }, ()=>({
-                class: twMerge(CLASSES.slot.image, local.class, local.className)
+                class: twMerge(CLASSES.slot.image, local.class)
             }), {
             "data-slot": "avatar-image",
             get style () {
@@ -109,7 +107,6 @@ const __solidLayoutAvatarFallback = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "style",
         "delayMs"
@@ -129,7 +126,7 @@ const __solidLayoutAvatarFallback = (_stable, p)=>{
         get children () {
             var _el$3 = _tmpl$();
             spread(_el$3, mergeProps(others, ()=>({
-                    class: twMerge(CLASSES.slot.fallback, CLASSES.color[ctx.color()], local.class, local.className)
+                    class: twMerge(CLASSES.slot.fallback, CLASSES.flavor[ctx.flavor()] ?? `avatar__fallback--flavor-${ctx.flavor()}`, local.class)
                 }), {
                 "data-slot": "avatar-fallback",
                 get ["data-theme"] () {

package/dist/components/avatar/Avatar.recipe.d.ts

@@ -13,12 +13,15 @@ export declare const CLASSES: {
         readonly default: "";
         readonly soft: "avatar--soft";
     };
-    readonly color: {
-        readonly default: "avatar__fallback--default";
-        readonly accent: "avatar__fallback--accent";
-        readonly success: "avatar__fallback--success";
-        readonly warning: "avatar__fallback--warning";
-        readonly danger: "avatar__fallback--danger";
+    readonly flavor: {
+        readonly neutral: "avatar__fallback--flavor-neutral";
+        readonly primary: "avatar__fallback--flavor-primary";
+        readonly secondary: "avatar__fallback--flavor-secondary";
+        readonly accent: "avatar__fallback--flavor-accent";
+        readonly destructive: "avatar__fallback--flavor-destructive";
+        readonly success: "avatar__fallback--flavor-success";
+        readonly warning: "avatar__fallback--flavor-warning";
+        readonly info: "avatar__fallback--flavor-info";
     };
     readonly group: {
         readonly base: "avatar-group";

package/dist/components/avatar/Avatar.recipe.js

@@ -14,12 +14,15 @@ const CLASSES = {
         default: "",
         soft: "avatar--soft"
     },
-    color: {
-        default: "avatar__fallback--default",
-        accent: "avatar__fallback--accent",
-        success: "avatar__fallback--success",
-        warning: "avatar__fallback--warning",
-        danger: "avatar__fallback--danger"
+    flavor: {
+        neutral: "avatar__fallback--flavor-neutral",
+        primary: "avatar__fallback--flavor-primary",
+        secondary: "avatar__fallback--flavor-secondary",
+        accent: "avatar__fallback--flavor-accent",
+        destructive: "avatar__fallback--flavor-destructive",
+        success: "avatar__fallback--flavor-success",
+        warning: "avatar__fallback--flavor-warning",
+        info: "avatar__fallback--flavor-info"
     },
     group: {
         base: "avatar-group",

package/dist/components/avatar/AvatarGroup.generated.d.ts

@@ -1,14 +1,13 @@
 import { type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
+import type { UIBaseProps } from "../vocabulary";
 type ElementType = keyof JSX.IntrinsicElements;
 type AvatarGroupBaseProps = {
     /** Custom container tag */
     as?: ElementType;
     /** Extra classes */
     class?: string;
-    className?: string;
     children: JSX.Element[];
-} & IComponentBaseProps;
+} & UIBaseProps;
 type PropsOf<E extends ElementType> = JSX.IntrinsicElements[E];
 export type AvatarGroupProps<E extends ElementType = "div"> = Omit<PropsOf<E>, keyof AvatarGroupBaseProps> & AvatarGroupBaseProps;
 declare const _default: <E extends ElementType = "div">(props: AvatarGroupProps<E>) => JSX.Element;

package/dist/components/avatar/AvatarGroup.generated.js

@@ -24,11 +24,10 @@ const __solidLayoutAvatarGroup = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "as",
         "class",
-        "className",
         "children"
     ]);
     const Tag = local.as || "div";
-    const classes = ()=>twMerge(CLASSES.group.base, CLASSES.group.overlap, local.class, local.className);
+    const classes = ()=>twMerge(CLASSES.group.base, CLASSES.group.overlap, local.class);
     const ariaLabel = `Group of ${local.children.length} avatar photos`;
     if (VoidElementList.includes(Tag)) return createComponent(Dynamic, mergeProps({
         component: Tag

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

@@ -1 +1 @@
-export { default, AvatarRoot, AvatarImage, AvatarFallback, type AvatarSize, type AvatarColor, type AvatarVariant, type AvatarRootProps, type AvatarImageProps, type AvatarFallbackProps, } from "./Avatar.generated";
+export { default, AvatarRoot, AvatarImage, AvatarFallback, type AvatarSize, type AvatarVariant, type AvatarRootProps, type AvatarImageProps, type AvatarFallbackProps, } from "./Avatar.generated";

package/dist/components/badge/Badge.css

@@ -13,13 +13,16 @@
     font-size: 0.75rem;
     line-height: 1.34;
 
-    --badge-bg: var(--color-default);
-    --badge-fg: var(--color-default-foreground);
-    --badge-border: var(--color-background);
+    --badge-accent: var(--color-default);
+    --badge-accent-fg: var(--color-default-foreground);
+
+    --badge-bg: var(--badge-accent);
+    --badge-fg: var(--badge-accent-fg);
+    --badge-border: transparent;
 
     background-color: var(--badge-bg);
     color: var(--badge-fg);
-    border: 1px solid var(--badge-border);
+    border: var(--border, 1px) solid var(--badge-border);
   }
 
   .badge__label {
@@ -52,36 +55,94 @@
     line-height: 1.34;
   }
 
-  .badge--accent {
-    --badge-fg: var(--color-accent);
+  /* -----------------------------------------------------------------------
+   * Flavour writes the accent, variant spends it.
+   *
+   * This was fifteen compound rules, one per variant-and-colour pair, which is
+   * why adding primary, secondary and info to the colour list would have meant
+   * writing nine more. One custom property collapses it: eight flavour rules
+   * and three variant rules cover the same twenty-four combinations.
+   * --------------------------------------------------------------------- */
+  .badge--flavor-neutral {
+    --badge-accent: var(--color-default);
+    --badge-accent-fg: var(--color-default-foreground);
+    --badge-accent-soft: var(--color-default);
+  }
+
+  .badge--flavor-primary {
+    --badge-accent: var(--color-primary);
+    --badge-accent-fg: var(--color-primary-content);
+  }
+
+  .badge--flavor-secondary {
+    --badge-accent: var(--color-secondary);
+    --badge-accent-fg: var(--color-secondary-content);
+  }
+
+  .badge--flavor-accent {
+    --badge-accent: var(--color-accent);
+    --badge-accent-fg: var(--color-accent-foreground);
+    --badge-accent-soft: var(--color-accent-soft);
+  }
+
+  .badge--flavor-destructive {
+    --badge-accent: var(--color-danger);
+    --badge-accent-fg: var(--color-danger-foreground);
+    --badge-accent-soft: var(--color-danger-soft);
   }
 
-  .badge--default {
-    --badge-fg: var(--color-default-foreground);
+  .badge--flavor-success {
+    --badge-accent: var(--color-success);
+    --badge-accent-fg: var(--color-success-foreground);
+    --badge-accent-soft: var(--color-success-soft);
   }
 
-  .badge--success {
-    --badge-fg: var(--color-success);
+  .badge--flavor-warning {
+    --badge-accent: var(--color-warning);
+    --badge-accent-fg: var(--color-warning-foreground);
+    --badge-accent-soft: var(--color-warning-soft);
   }
 
-  .badge--warning {
-    --badge-fg: var(--color-warning);
+  .badge--flavor-info {
+    --badge-accent: var(--color-info);
+    --badge-accent-fg: var(--color-info-content);
   }
 
-  .badge--danger {
-    --badge-fg: var(--color-danger);
+  .badge--variant-solid {
+    --badge-bg: var(--badge-accent);
+    --badge-fg: var(--badge-accent-fg);
+    --badge-border: transparent;
   }
 
-  .badge--primary {
-    /* Compound variants handle tokens */
+  /* Falls back to a mix when the theme ships no soft token for a flavour. */
+  .badge--variant-soft {
+    --badge-bg: var(
+      --badge-accent-soft,
+      color-mix(in oklab, var(--badge-accent), var(--color-base-100) 86%)
+    );
+    --badge-fg: var(--badge-accent);
+    --badge-border: transparent;
   }
 
-  .badge--secondary {
-    /* Base behavior */
+  .badge--variant-outline {
+    --badge-bg: transparent;
+    --badge-fg: var(--badge-accent);
+    --badge-border: var(--badge-accent);
   }
 
-  .badge--soft {
-    /* Compound variants handle tokens */
+  .badge--loading {
+    opacity: 0.7;
+  }
+  .badge--error,
+  .badge--invalid {
+    --badge-accent: var(--color-error);
+    --badge-accent-fg: var(--color-error-content);
+  }
+  .badge--disabled {
+    opacity: 0.55;
+  }
+  .badge--hidden {
+    display: none;
   }
 
   .badge--top-right {
@@ -112,53 +173,4 @@
     transform: translate(-25%, 25%);
   }
 
-  .badge--primary.badge--accent {
-    --badge-bg: var(--color-accent);
-    --badge-fg: var(--color-accent-foreground);
-  }
-
-  .badge--primary.badge--default {
-    --badge-bg: var(--color-default);
-    --badge-fg: var(--color-default-foreground);
-  }
-
-  .badge--primary.badge--success {
-    --badge-bg: var(--color-success);
-    --badge-fg: var(--color-success-foreground);
-  }
-
-  .badge--primary.badge--warning {
-    --badge-bg: var(--color-warning);
-    --badge-fg: var(--color-warning-foreground);
-  }
-
-  .badge--primary.badge--danger {
-    --badge-bg: var(--color-danger);
-    --badge-fg: var(--color-danger-foreground);
-  }
-
-  .badge--soft.badge--accent {
-    --badge-bg: var(--color-accent-soft);
-    --badge-fg: var(--color-accent-soft-foreground);
-  }
-
-  .badge--soft.badge--default {
-    --badge-bg: var(--color-default);
-    --badge-fg: var(--color-default-foreground);
-  }
-
-  .badge--soft.badge--success {
-    --badge-bg: var(--color-success-soft);
-    --badge-fg: var(--color-success-soft-foreground);
-  }
-
-  .badge--soft.badge--warning {
-    --badge-bg: var(--color-warning-soft);
-    --badge-fg: var(--color-warning-soft-foreground);
-  }
-
-  .badge--soft.badge--danger {
-    --badge-bg: var(--color-danger-soft);
-    --badge-fg: var(--color-danger-soft-foreground);
-  }
 }

package/dist/components/badge/Badge.generated.d.ts

@@ -1,20 +1,20 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import { type JSX } from "solid-js";
 import "./Badge.css";
+import { type Flavor, type State, type Variant } from "../vocabulary";
 interface BadgeAnchorProps extends JSX.HTMLAttributes<HTMLSpanElement> {
     class?: string;
     children: JSX.Element;
 }
 declare const BadgeAnchor: __LayoutComponent<BadgeAnchorProps>;
-type BadgeColor = "default" | "accent" | "success" | "warning" | "danger";
-type BadgeVariant = "primary" | "secondary" | "soft";
 type BadgeSize = "sm" | "md" | "lg";
 type BadgePlacement = "top-right" | "top-left" | "bottom-right" | "bottom-left";
 interface BadgeRootProps extends Omit<JSX.HTMLAttributes<HTMLSpanElement>, "color"> {
     class?: string;
     children?: JSX.Element;
-    color?: BadgeColor;
-    variant?: BadgeVariant;
+    flavor?: Flavor;
+    variant?: Extract<Variant, "solid" | "soft" | "outline">;
+    state?: State;
     size?: BadgeSize;
     placement?: BadgePlacement;
 }

package/dist/components/badge/Badge.generated.js

@@ -5,6 +5,7 @@ import { splitProps } from "solid-js";
 import { twMerge } from "tailwind-merge";
 import "./Badge.css";
 import { CLASSES, componentRecipe } from "./Badge.recipe.js";
+import { resolveState } from "../vocabulary.js";
 var _tmpl$ = /*#__PURE__*/ template("<span>");
 const __solidLayoutBadgeAnchor = (_stable, p)=>{
     const [local, others] = splitProps(p, [
@@ -31,17 +32,20 @@ const __solidLayoutBadgeRoot = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "color",
+        "flavor",
         "variant",
+        "state",
         "size",
         "placement"
     ]);
     const classes = ()=>{
         const size = local.size ?? "md";
-        const color = local.color ?? "default";
-        const variant = local.variant ?? "primary";
+        const flavor = local.flavor ?? "neutral";
+        const flavorClass = CLASSES.flavor[flavor] ?? `badge--flavor-${flavor}`;
+        const variant = local.variant ?? "solid";
+        const state = resolveState(local.state);
         const placement = local.placement ?? "top-right";
-        return twMerge(clsx(CLASSES.base, CLASSES.size[size], CLASSES.color[color], CLASSES.variant[variant], CLASSES.placement[placement], local.class));
+        return twMerge(clsx(CLASSES.base, CLASSES.size[size], flavorClass, CLASSES.variant[variant], CLASSES.state[state], CLASSES.placement[placement], local.class));
     };
     const badgeChildren = ()=>{
         const c = local.children;

package/dist/components/badge/Badge.recipe.d.ts

@@ -9,17 +9,28 @@ export declare const CLASSES: {
         readonly md: "badge--md";
         readonly lg: "badge--lg";
     };
-    readonly color: {
-        readonly default: "badge--default";
-        readonly accent: "badge--accent";
-        readonly success: "badge--success";
-        readonly warning: "badge--warning";
-        readonly danger: "badge--danger";
+    readonly flavor: {
+        readonly neutral: "badge--flavor-neutral";
+        readonly primary: "badge--flavor-primary";
+        readonly secondary: "badge--flavor-secondary";
+        readonly accent: "badge--flavor-accent";
+        readonly destructive: "badge--flavor-destructive";
+        readonly success: "badge--flavor-success";
+        readonly warning: "badge--flavor-warning";
+        readonly info: "badge--flavor-info";
     };
     readonly variant: {
-        readonly primary: "badge--primary";
-        readonly secondary: "badge--secondary";
-        readonly soft: "badge--soft";
+        readonly solid: "badge--variant-solid";
+        readonly soft: "badge--variant-soft";
+        readonly outline: "badge--variant-outline";
+    };
+    readonly state: {
+        readonly default: "";
+        readonly loading: "badge--loading";
+        readonly error: "badge--error";
+        readonly invalid: "badge--invalid";
+        readonly disabled: "badge--disabled";
+        readonly hidden: "badge--hidden";
     };
     readonly placement: {
         readonly "top-right": "badge--top-right";

package/dist/components/badge/Badge.recipe.js

@@ -10,17 +10,28 @@ const CLASSES = {
         md: "badge--md",
         lg: "badge--lg"
     },
-    color: {
-        default: "badge--default",
-        accent: "badge--accent",
-        success: "badge--success",
-        warning: "badge--warning",
-        danger: "badge--danger"
+    flavor: {
+        neutral: "badge--flavor-neutral",
+        primary: "badge--flavor-primary",
+        secondary: "badge--flavor-secondary",
+        accent: "badge--flavor-accent",
+        destructive: "badge--flavor-destructive",
+        success: "badge--flavor-success",
+        warning: "badge--flavor-warning",
+        info: "badge--flavor-info"
     },
     variant: {
-        primary: "badge--primary",
-        secondary: "badge--secondary",
-        soft: "badge--soft"
+        solid: "badge--variant-solid",
+        soft: "badge--variant-soft",
+        outline: "badge--variant-outline"
+    },
+    state: {
+        default: "",
+        loading: "badge--loading",
+        error: "badge--error",
+        invalid: "badge--invalid",
+        disabled: "badge--disabled",
+        hidden: "badge--hidden"
     },
     placement: {
         "top-right": "badge--top-right",

package/dist/components/{breadcrumbs/Breadcrumbs.css → breadcrumb/Breadcrumb.css}

@@ -2,7 +2,7 @@
   /* -------------------------------------------------------------------------------------------------
    * Root
    * -----------------------------------------------------------------------------------------------*/
-  .breadcrumbs {
+  .breadcrumb {
     display: flex;
     align-items: center;
   }
@@ -10,7 +10,7 @@
   /* -------------------------------------------------------------------------------------------------
    * Item
    * -----------------------------------------------------------------------------------------------*/
-  .breadcrumbs__item {
+  .breadcrumb__item {
     display: flex;
     flex-shrink: 0;
     align-items: center;
@@ -22,7 +22,7 @@
   /* -------------------------------------------------------------------------------------------------
    * Link
    * -----------------------------------------------------------------------------------------------*/
-  .breadcrumbs__link {
+  .breadcrumb__link {
     position: relative;
     padding: 0 0.125rem;
     font-size: 0.875rem;
@@ -32,24 +32,24 @@
     text-decoration: none;
   }
 
-  a.breadcrumbs__link:hover {
+  a.breadcrumb__link:hover {
     text-decoration: underline;
   }
 
-  .breadcrumbs__link[data-current="true"] {
+  .breadcrumb__link[data-current="true"] {
     color: var(--color-base-content);
   }
 
-  a.breadcrumbs__link:focus-visible {
-    outline: 2px solid var(--color-accent);
-    outline-offset: 2px;
+  a.breadcrumb__link:focus-visible {
+    outline: var(--focus-ring-width, 2px) solid var(--color-accent);
+    outline-offset: var(--focus-ring-offset, 2px);
     border-radius: var(--radius-field, 0.25rem);
   }
 
   /* -------------------------------------------------------------------------------------------------
    * Separator
    * -----------------------------------------------------------------------------------------------*/
-  .breadcrumbs__separator {
+  .breadcrumb__separator {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -57,7 +57,7 @@
     margin: 0 0.125rem;
   }
 
-  [dir="rtl"] .breadcrumbs__separator {
+  [dir="rtl"] .breadcrumb__separator {
     transform: rotate(180deg);
   }
 }