margo-ui 1.2.3 → 1.3.0

package/README.md

@@ -1,8 +1,8 @@
 # margo-ui
 
-A small React UI kit built on Tailwind CSS v4 design tokens..
+A small React UI kit built on Tailwind CSS v4 design tokens, themeable through plain CSS custom properties.
 
-The package is published as TypeScript source: your bundler compiles it, exactly as it already has to scan it for Tailwind classes.
+Documentation: [dev.robertoattanasio.com/margo-ui](https://dev.robertoattanasio.com/margo-ui)
 
 ## Install
 
@@ -10,8 +10,6 @@ The package is published as TypeScript source: your bundler compiles it, exactly
 npm install margo-ui
 ```
 
-## Getting started
-
 ```css
 /* your entry stylesheet */
 @import "tailwindcss";
@@ -20,6 +18,24 @@ npm install margo-ui
 @import "margo-ui/css";
 ```
 
+Order matters: `tailwindcss` first, the kit after, your own overrides last. The font imports are optional.
+
+## Built with
+
+React 19, Tailwind CSS v4, TypeScript. [react-renderable](https://www.npmjs.com/package/react-renderable) for polymorphic rendering, clsx and tailwind-merge for class resolution, react-icons for the few built-in glyphs. Nunito and Bebas Neue are bundled as self-hosted woff2.
+
+The package is published as TypeScript source: your bundler compiles it, exactly as it already has to scan it for Tailwind classes.
+
+## Approach
+
+- **Tokens first.** Colours, type and elevation are `--margo-` custom properties, mirrored into Tailwind's theme: redeclaring them themes the kit. Per-instance overrides go through `className`, merged over the defaults.
+- **CSS first.** Effects live on pseudo-elements; JavaScript only writes coordinates. Most components hold no state.
+- **Polymorphic.** `as` chooses the rendered element, and the remaining props are typed against it.
+- **Composed, not configured.** Components expose parts to mount rather than booleans to set.
+- **The consumer owns the layout.** Components style themselves and never their position.
+
+Conventions for contributing: [RULE.md](./RULE.md).
+
 ## License
 
 Code: [MIT](./LICENSE).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "margo-ui",
-  "version": "1.2.3",
+  "version": "1.3.0",
   "description": "A small React UI kit built on Tailwind CSS v4 design tokens, themeable through plain CSS custom properties.",
   "keywords": [
     "react",
@@ -12,6 +12,15 @@
   ],
   "license": "MIT",
   "author": "Roberto Attanasio",
+  "homepage": "https://dev.robertoattanasio.com/margo-ui",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/robertoattanasio/dev.robertoattanasio.com.git",
+    "directory": "lib/margo-ui"
+  },
+  "bugs": {
+    "url": "https://github.com/robertoattanasio/dev.robertoattanasio.com/issues"
+  },
   "type": "module",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -42,6 +51,7 @@
   },
   "dependencies": {
     "clsx": "^2.1.1",
+    "react-icons": "^5.7.0",
     "react-renderable": "^1.0.4",
     "tailwind-merge": "^3.6.0"
   },

package/src/components/button/button.tsx

@@ -39,7 +39,7 @@ export const Button = <T extends ElementType = "button">({
     <Ripple>
       <Tag
         {...Tag.forward<T>(rest, "button")}
-        data-open={open}
+        data-margo-open={open}
         onClick={handleClick}
         className={cn(
           buttonBaseClassName,
@@ -52,11 +52,11 @@ export const Button = <T extends ElementType = "button">({
   );
 };
 
-Button.Icon = ({ icon, className = null }: ButtonIconProps) => (
+Button.Icon = ({ icon, className }: ButtonIconProps) => (
   <span className={cn(buttonIconClassName, className)}>{icon}</span>
 );
 
-Button.Label = ({ label, className = null }: ButtonLabelProps) => (
+Button.Label = ({ label, className }: ButtonLabelProps) => (
   <span className={cn(buttonLabelClassName, className)}>{label}</span>
 );
 
@@ -66,7 +66,7 @@ Button.IconLabel = ({
   gap = "0.5rem",
   reverse = false,
   side = "end",
-  className = null,
+  className,
 }: ButtonIconLabelProps) => (
   <span
     style={{ "--button-gap": gap } as CSSProperties}

package/src/components/button/style.ts

@@ -17,11 +17,11 @@ export const buttonGridClassName =
 
 export const buttonGridForwardClassName = `grid-cols-[1rem_0fr] group-hover/button:grid-cols-[1rem_1fr] group-hover/button:gap-(--button-gap)
 group-focus-visible/button:grid-cols-[1rem_1fr] group-focus-visible/button:gap-(--button-gap)
-group-data-[open=true]/button:grid-cols-[1rem_1fr] group-data-[open=true]/button:gap-(--button-gap)`;
+group-data-[margo-open=true]/button:grid-cols-[1rem_1fr] group-data-[margo-open=true]/button:gap-(--button-gap)`;
 
 export const buttonGridReverseClassName = `grid-cols-[auto_0rem] group-hover/button:grid-cols-[auto_1rem] group-hover/button:gap-(--button-gap)
 group-focus-visible/button:grid-cols-[auto_1rem] group-focus-visible/button:gap-(--button-gap)
-group-data-[open=true]/button:grid-cols-[auto_1rem] group-data-[open=true]/button:gap-(--button-gap)`;
+group-data-[margo-open=true]/button:grid-cols-[auto_1rem] group-data-[margo-open=true]/button:gap-(--button-gap)`;
 
 export const buttonSlotClassName = `min-w-0 overflow-hidden opacity-0 transition-opacity duration-[180ms] ease-in
-group-hover/button:opacity-100 group-focus-visible/button:opacity-100 group-data-[open=true]/button:opacity-100`;
+group-hover/button:opacity-100 group-focus-visible/button:opacity-100 group-data-[margo-open=true]/button:opacity-100`;

package/src/components/button/type.ts

@@ -15,12 +15,12 @@ export type ButtonProps<T extends ElementType = "button"> = TagProps<T, ButtonOw
 
 export type ButtonIconProps = {
   icon: ReactNode;
-  className?: string | null;
+  className?: string;
 };
 
 export type ButtonLabelProps = {
   label: string;
-  className?: string | null;
+  className?: string;
 };
 
 export type ButtonIconLabelProps = {
@@ -29,5 +29,5 @@ export type ButtonIconLabelProps = {
   gap?: string;
   reverse?: boolean;
   side?: ButtonIconLabelSide;
-  className?: string | null;
+  className?: string;
 };

package/src/components/button_micro/button_micro.tsx

@@ -0,0 +1,37 @@
+import { Tag } from "react-renderable";
+
+import { cn } from "../../utils/cn/cn.js";
+import { buttonMicroActiveClassName, buttonMicroBaseClassName, buttonMicroSurfaceClassName } from "./style.js";
+
+import type { ElementType, MouseEvent } from "react";
+import type { ButtonMicroProps } from "./type.js";
+
+export const ButtonMicro = <T extends ElementType = "button">({
+  active = false,
+  onClickBlur,
+  onClick,
+  className,
+  ...rest
+}: ButtonMicroProps<T>) => {
+  const handleClick = (event: MouseEvent<HTMLElement>) => {
+    onClick?.(event);
+    if (typeof onClickBlur === "function") {
+      const target = event.currentTarget;
+      onClickBlur(event);
+      setTimeout(() => target.blur(), 150);
+    }
+  };
+
+  return (
+    <Tag
+      {...Tag.forward<T>(rest, "button")}
+      data-margo-active={active}
+      onClick={handleClick}
+      className={cn(
+        buttonMicroBaseClassName,
+        active ? buttonMicroActiveClassName : buttonMicroSurfaceClassName,
+        className,
+      )}
+    />
+  );
+};

package/src/components/button_micro/style.ts

@@ -0,0 +1,6 @@
+export const buttonMicroBaseClassName = `w-fit text-xs underline underline-offset-2 outline-none
+focus-visible:text-on-main`;
+
+export const buttonMicroSurfaceClassName = "text-medium hover:text-on-main";
+
+export const buttonMicroActiveClassName = "text-primary-darken";

package/src/components/button_micro/type.ts

@@ -0,0 +1,10 @@
+import type { TagProps } from "react-renderable";
+import type { ElementType, MouseEventHandler } from "react";
+
+export type ButtonMicroOwnProps = {
+  active?: boolean;
+  onClick?: MouseEventHandler<HTMLElement>;
+  onClickBlur?: MouseEventHandler<HTMLElement>;
+};
+
+export type ButtonMicroProps<T extends ElementType = "button"> = TagProps<T, ButtonMicroOwnProps>;

package/src/components/dialog/dialog.tsx

@@ -0,0 +1,25 @@
+import { Tag } from "react-renderable";
+
+import { cn } from "../../utils/cn/cn.js";
+import { dialogBaseClassName, dialogBodyClassName, dialogFooterClassName } from "./style.js";
+
+import type { ElementType } from "react";
+import type { DialogBodyProps, DialogFooterProps, DialogProps } from "./type.js";
+
+export const Dialog = <T extends ElementType = "div">({ className, children, ...rest }: DialogProps<T>) => (
+  <Tag {...Tag.forward<T>(rest)} className={cn(dialogBaseClassName, className)}>
+    {children}
+  </Tag>
+);
+
+Dialog.Body = <T extends ElementType = "div">({ className, children, ...rest }: DialogBodyProps<T>) => (
+  <Tag {...Tag.forward<T>(rest)} className={cn(dialogBodyClassName, className)}>
+    {children}
+  </Tag>
+);
+
+Dialog.Footer = <T extends ElementType = "div">({ className, children, ...rest }: DialogFooterProps<T>) => (
+  <Tag {...Tag.forward<T>(rest)} className={cn(dialogFooterClassName, className)}>
+    {children}
+  </Tag>
+);

package/src/components/dialog/style.ts

@@ -0,0 +1,6 @@
+export const dialogBaseClassName = `flex m-4 max-h-[calc(100%-2rem)] w-[calc(100%-2rem)] flex-col overflow-hidden
+rounded-lg border-2 border-border bg-main text-on-main shadow-sm`;
+
+export const dialogBodyClassName = "min-h-0 flex-1 overflow-y-auto px-5 py-4 text-sm";
+
+export const dialogFooterClassName = "flex items-center justify-end gap-2 border-t-2 border-border px-5 py-4";

package/src/components/dialog/type.ts

@@ -0,0 +1,8 @@
+import type { TagProps } from "react-renderable";
+import type { ElementType } from "react";
+
+export type DialogProps<T extends ElementType = "div"> = TagProps<T>;
+
+export type DialogBodyProps<T extends ElementType = "div"> = TagProps<T>;
+
+export type DialogFooterProps<T extends ElementType = "div"> = TagProps<T>;

package/src/components/header/header.tsx

@@ -0,0 +1,36 @@
+import { Tag } from "react-renderable";
+
+import { cn } from "../../utils/cn/cn.js";
+import {
+  headerBaseClassName,
+  headerLeadingClassName,
+  headerTitleClassName,
+  headerTrailingClassName,
+} from "./style.js";
+
+import type { ElementType } from "react";
+import type { HeaderLeadingProps, HeaderProps, HeaderTitleProps, HeaderTrailingProps } from "./type.js";
+
+export const Header = <T extends ElementType = "header">({ className, children, ...rest }: HeaderProps<T>) => (
+  <Tag {...Tag.forward<T>(rest, "header")} className={cn(headerBaseClassName, className)}>
+    {children}
+  </Tag>
+);
+
+Header.Leading = ({ children, className }: HeaderLeadingProps) => (
+  <span data-margo-header-slot={true} className={cn(headerLeadingClassName, className)}>
+    {children}
+  </span>
+);
+
+Header.Title = ({ title, id, className }: HeaderTitleProps) => (
+  <span data-margo-header-slot={true} id={id} className={cn(headerTitleClassName, className)}>
+    {title}
+  </span>
+);
+
+Header.Trailing = ({ children, className }: HeaderTrailingProps) => (
+  <span data-margo-header-slot={true} className={cn(headerTrailingClassName, className)}>
+    {children}
+  </span>
+);

package/src/components/header/style.ts

@@ -0,0 +1,8 @@
+export const headerBaseClassName = "flex w-full items-center gap-3 px-5 py-4 shadow-sm";
+
+export const headerLeadingClassName = "flex shrink-0 items-center gap-2";
+
+export const headerTitleClassName = "min-w-0 flex-1 line-clamp-2 text-md font-semibold text-on-main";
+
+export const headerTrailingClassName = `ml-auto flex shrink-0 items-center gap-2
+[[data-margo-header-slot]+&]:ml-0`;

package/src/components/header/type.ts

@@ -0,0 +1,20 @@
+import type { TagProps } from "react-renderable";
+import type { ElementType, ReactNode } from "react";
+
+export type HeaderProps<T extends ElementType = "header"> = TagProps<T>;
+
+export type HeaderLeadingProps = {
+  children?: ReactNode;
+  className?: string;
+};
+
+export type HeaderTitleProps = {
+  title: ReactNode;
+  id?: string;
+  className?: string;
+};
+
+export type HeaderTrailingProps = {
+  children?: ReactNode;
+  className?: string;
+};

package/src/components/item/item.tsx

@@ -0,0 +1,57 @@
+import { MdChevronRight } from "react-icons/md";
+
+import { Tag } from "react-renderable";
+
+import { cn } from "../../utils/cn/cn.js";
+import {
+  itemActiveClassName,
+  itemBaseClassName,
+  itemIconClassName,
+  itemLabelClassName,
+  itemSurfaceClassName,
+} from "./style.js";
+
+import type { ElementType, MouseEvent } from "react";
+import { Ripple } from "../../hoc/ripple/ripple.js";
+import type { ItemIconProps, ItemLabelProps, ItemProps } from "./type.js";
+
+export const Item = <T extends ElementType = "div">({
+  active = false,
+  onClickBlur,
+  onClick,
+  className,
+  children,
+  ...rest
+}: ItemProps<T>) => {
+  const handleClick = (event: MouseEvent<HTMLElement>) => {
+    onClick?.(event);
+    if (typeof onClickBlur === "function") {
+      const target = event.currentTarget;
+      onClickBlur(event);
+      setTimeout(() => target.blur(), 150);
+    }
+  };
+
+  return (
+    <Ripple>
+      <Tag
+        {...Tag.forward<T>(rest)}
+        data-margo-active={active}
+        onClick={handleClick}
+        className={cn(itemBaseClassName, active ? itemActiveClassName : itemSurfaceClassName, className)}
+      >
+        {children}
+      </Tag>
+    </Ripple>
+  );
+};
+
+Item.Icon = ({ icon = <MdChevronRight className="text-md translate-x-1" />, className }: ItemIconProps) => (
+  <span data-margo-item-slot={true} className={cn(itemIconClassName, className)}>
+    {icon}
+  </span>
+);
+
+Item.Label = ({ label, className }: ItemLabelProps) => (
+  <span className={cn(itemLabelClassName, className)}>{label}</span>
+);

package/src/components/item/style.ts

@@ -0,0 +1,13 @@
+export const itemBaseClassName = `group/item flex w-full items-center gap-1 rounded-lg border-2 px-3 py-2 text-on-main
+text-sm focus-visible:margo-border-gradient-primary focus-visible:outline
+focus-visible:outline-offset-1 focus-visible:outline-on-main`;
+
+export const itemSurfaceClassName = `border-transparent text-medium hover:border-border hover:text-on-main
+hover:shadow-item focus-visible:shadow-item`;
+
+export const itemActiveClassName = "margo-border-gradient-primary text-on-main shadow-item";
+
+export const itemIconClassName = `ml-auto flex size-4 shrink-0 items-center justify-center first:ml-0
+[[data-margo-item-slot]+&]:ml-0`;
+
+export const itemLabelClassName = "min-w-0 truncate text-left";

package/src/components/item/type.ts

@@ -0,0 +1,20 @@
+import type { TagProps } from "react-renderable";
+import type { ElementType, MouseEventHandler, ReactNode } from "react";
+
+export type ItemOwnProps = {
+  active?: boolean;
+  onClick?: MouseEventHandler<HTMLElement>;
+  onClickBlur?: MouseEventHandler<HTMLElement>;
+};
+
+export type ItemProps<T extends ElementType = "div"> = TagProps<T, ItemOwnProps>;
+
+export type ItemIconProps = {
+  icon?: ReactNode;
+  className?: string;
+};
+
+export type ItemLabelProps = {
+  label: ReactNode;
+  className?: string;
+};

package/src/components/layer/layer.css

@@ -0,0 +1,51 @@
+.margo-layer {
+  position: fixed;
+  inset: 0;
+  z-index: var(--margo-layer-z-index);
+  transition:
+    visibility var(--margo-layer-duration) var(--margo-layer-easing),
+    overlay var(--margo-layer-duration) var(--margo-layer-easing) allow-discrete,
+    display var(--margo-layer-duration) var(--margo-layer-easing) allow-discrete;
+}
+
+.margo-layer:not([open]) {
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.margo-layer > *:not([data-margo-travel]) {
+  opacity: 0;
+  transition: opacity var(--margo-layer-duration) var(--margo-layer-easing);
+}
+
+.margo-layer[open] > *:not([data-margo-travel]) {
+  opacity: 1;
+}
+
+@starting-style {
+  .margo-layer[open] > *:not([data-margo-travel]) {
+    opacity: 0;
+  }
+}
+
+.margo-layer::backdrop {
+  opacity: 0;
+  transition:
+    opacity var(--margo-layer-duration) var(--margo-layer-easing),
+    overlay var(--margo-layer-duration) var(--margo-layer-easing) allow-discrete,
+    display var(--margo-layer-duration) var(--margo-layer-easing) allow-discrete;
+}
+
+.margo-layer[open]::backdrop {
+  opacity: 1;
+}
+
+@starting-style {
+  .margo-layer[open]::backdrop {
+    opacity: 0;
+  }
+}
+
+html:has(.margo-layer[open]) {
+  overflow: clip;
+}

package/src/components/layer/layer.tsx

@@ -0,0 +1,44 @@
+import { useEffect, useRef } from "react";
+
+import { cn } from "../../utils/cn/cn.js";
+import { layerBaseClassName } from "./style.js";
+
+import type { MouseEvent, SyntheticEvent } from "react";
+import type { LayerProps } from "./type.js";
+
+import "./layer.css";
+
+export const Layer = ({ open = false, onClose, dismissible = true, className, children, ...rest }: LayerProps) => {
+  const layerRef = useRef<HTMLDialogElement>(null);
+
+  useEffect(() => {
+    const layer = layerRef.current;
+
+    if (!layer) return;
+    if (open && !layer.open) layer.showModal();
+    if (!open && layer.open) layer.close();
+  }, [open]);
+
+  const handleClick = (event: MouseEvent<HTMLDialogElement>) => {
+    if (!dismissible || event.target !== event.currentTarget) return;
+
+    onClose?.();
+  };
+
+  const handleCancel = (event: SyntheticEvent<HTMLDialogElement>) => {
+    event.preventDefault();
+    onClose?.();
+  };
+
+  return (
+    <dialog
+      {...rest}
+      ref={layerRef}
+      onCancel={handleCancel}
+      onClick={handleClick}
+      className={cn(layerBaseClassName, className)}
+    >
+      {children}
+    </dialog>
+  );
+};

package/src/components/layer/style.ts

@@ -0,0 +1,2 @@
+export const layerBaseClassName = `margo-layer m-0 grid h-dvh max-h-none w-dvw max-w-none place-items-center
+overflow-clip bg-transparent p-0 text-on-main outline-none backdrop:bg-black/50 backdrop:backdrop-blur-xs`;

package/src/components/layer/type.ts

@@ -0,0 +1,8 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+
+export type LayerProps = Omit<ComponentPropsWithoutRef<"dialog">, "onClose" | "open"> & {
+  open?: boolean;
+  onClose?: () => void;
+  dismissible?: boolean;
+  children?: ReactNode;
+};

package/src/components/navigation_bar/navigation_bar.css

@@ -0,0 +1,21 @@
+.margo-navigation-bar {
+  position: relative;
+  height: 100%;
+  width: var(--margo-navigation-bar-progress, 0%);
+  background: var(--margo-navigation-bar-fill);
+  transition: width 200ms ease-out;
+}
+
+.margo-navigation-bar::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%;
+  width: 6.25rem;
+  transform: rotate(3deg) translateY(-0.25rem);
+  opacity: 0.9;
+  box-shadow:
+    0 0 10px var(--margo-color-primary),
+    0 0 5px var(--margo-color-primary);
+}

package/src/components/navigation_bar/navigation_bar.tsx

@@ -0,0 +1,70 @@
+import { useEffect, useRef, useState } from "react";
+
+import { Tag } from "react-renderable";
+
+import { cn } from "../../utils/cn/cn.js";
+import { navigationBarBaseClassName, navigationBarDefaultFill, navigationBarTrackClassName } from "./style.js";
+
+import type { CSSProperties, ElementType } from "react";
+import type { NavigationBarProps } from "./type.js";
+
+import "./navigation_bar.css";
+
+const TRICKLE_MS = 200;
+const TRICKLE_CEILING = 90;
+const TRICKLE_RATIO = 0.12;
+const START_PROGRESS = 8;
+const HOLD_MS = 300;
+const FADE_MS = 400;
+
+export const NavigationBar = <T extends ElementType = "div">({
+  loading = false,
+  fill = navigationBarDefaultFill,
+  className,
+  ...rest
+}: NavigationBarProps<T>) => {
+  const [progress, setProgress] = useState(0);
+  const [isVisible, setIsVisible] = useState(false);
+  const timeoutRef = useRef<number | undefined>(undefined);
+  const resetRef = useRef<number | undefined>(undefined);
+
+  useEffect(() => {
+    if (loading) {
+      window.clearTimeout(timeoutRef.current);
+      window.clearTimeout(resetRef.current);
+      setIsVisible(true);
+      setProgress(START_PROGRESS);
+
+      const interval = window.setInterval(
+        () => setProgress((current) => current + (TRICKLE_CEILING - current) * TRICKLE_RATIO),
+        TRICKLE_MS,
+      );
+
+      return () => window.clearInterval(interval);
+    }
+
+    setProgress((current) => (current > 0 ? 100 : 0));
+
+    timeoutRef.current = window.setTimeout(() => setIsVisible(false), HOLD_MS);
+    resetRef.current = window.setTimeout(() => setProgress(0), HOLD_MS + FADE_MS);
+
+    return () => {
+      window.clearTimeout(timeoutRef.current);
+      window.clearTimeout(resetRef.current);
+    };
+  }, [loading]);
+
+  return (
+    <Tag
+      {...Tag.forward<T>(rest)}
+      role="progressbar"
+      aria-hidden={!isVisible}
+      style={
+        { "--margo-navigation-bar-fill": fill, "--margo-navigation-bar-progress": `${progress}%` } as CSSProperties
+      }
+      className={cn(navigationBarBaseClassName, isVisible ? "opacity-100" : "opacity-0", className)}
+    >
+      <div className={navigationBarTrackClassName} />
+    </Tag>
+  );
+};

package/src/components/navigation_bar/style.ts

@@ -0,0 +1,6 @@
+export const navigationBarDefaultFill = "linear-gradient(to right, var(--margo-color-primary-darken), var(--margo-color-primary))";
+
+export const navigationBarBaseClassName =
+  "fixed inset-x-0 top-0 z-max h-0.5 pointer-events-none transition-opacity duration-200 ease-out";
+
+export const navigationBarTrackClassName = "margo-navigation-bar";

package/src/components/navigation_bar/type.ts

@@ -0,0 +1,9 @@
+import type { TagProps } from "react-renderable";
+import type { ElementType } from "react";
+
+export type NavigationBarOwnProps = {
+  loading?: boolean;
+  fill?: string;
+};
+
+export type NavigationBarProps<T extends ElementType = "div"> = TagProps<T, NavigationBarOwnProps>;

package/src/components/progress_bar/progress_bar.css

@@ -2,21 +2,18 @@
   content: "";
   position: absolute;
   inset: 0;
-  background: var(
-    --margo-progress-bar-fill,
-    linear-gradient(to right, var(--color-primary-darken), var(--color-primary))
-  );
+  background: var(--margo-progress-bar-fill);
 }
 
-.margo-progress-bar[data-mode="determinate"]::before {
+.margo-progress-bar[data-margo-mode="determinate"]::before {
   clip-path: inset(0 calc(100% - var(--margo-progress-bar-value, 0%)) 0 0);
 }
 
-.margo-progress-bar[data-mode="determinate"][data-animate="true"]::before {
+.margo-progress-bar[data-margo-mode="determinate"][data-margo-animate="true"]::before {
   transition: clip-path 300ms ease-out;
 }
 
-.margo-progress-bar[data-mode="indeterminate"]::before {
+.margo-progress-bar[data-margo-mode="indeterminate"]::before {
   inset: 0 auto 0 0;
   width: 50%;
   animation: margo-progress-bar-indeterminate 800ms ease-in-out infinite;