margo-ui 5.2.0 → 6.1.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "margo-ui",
-  "version": "5.2.0",
-  "description": "React UI kit built on Tailwind CSS v4 design tokens, themeable through plain CSS custom properties.",
+  "version": "6.1.0",
+  "description": "margo-ui is a React component kit built on Tailwind CSS v4, with compound components and overridable CSS tokens.",
   "keywords": [
     "react",
     "ui",

package/src/components/blockquote/style.ts

@@ -1 +1 @@
-export const blockquoteBaseClassName = "border-l-margo border-primary-darken py-0.5 pl-4 flex items-center";
+export const blockquoteBaseClassName = "border-l-margo border-primary-darken py-0.5 pl-4 flex flex-col justify-center";

package/src/components/button/button.tsx

@@ -23,19 +23,15 @@ export const Button = <T extends ElementType = "button">({
   disabled = false,
   active = false,
   open = false,
-  onClickBlur,
   className,
   onClick,
   ...rest
 }: ButtonProps<T>) => {
+  const isNativeButton = (rest.as ?? "button") === "button";
+
   const handleClick = (event: MouseEvent<HTMLElement>) => {
-    if (disabled) return;
+    if (disabled) return event.preventDefault();
     onClick?.(event);
-    if (typeof onClickBlur === "function") {
-      const target = event.currentTarget;
-      onClickBlur(event);
-      setTimeout(() => target.blur(), 150);
-    }
   };
 
   return (
@@ -44,9 +40,10 @@ export const Button = <T extends ElementType = "button">({
         {...Tag.forward<T>(rest, "button")}
         data-margo-open={open}
         data-margo-disabled={disabled}
-        aria-disabled={disabled || undefined}
-        data-active={active || undefined}
-        inert={disabled || !clickable || undefined}
+        data-margo-active={active}
+        disabled={(isNativeButton && disabled) || undefined}
+        aria-disabled={(!isNativeButton && disabled) || undefined}
+        inert={!clickable || undefined}
         onClick={handleClick}
         className={cn(
           buttonBaseClassName,
@@ -59,12 +56,12 @@ export const Button = <T extends ElementType = "button">({
   );
 };
 
-Button.Icon = ({ icon, className }: ButtonIconProps) => (
-  <span className={cn(buttonIconClassName, className)}>{icon}</span>
+Button.Icon = ({ children, className }: ButtonIconProps) => (
+  <span className={cn(buttonIconClassName, className)}>{children}</span>
 );
 
-Button.Label = ({ label, className }: ButtonLabelProps) => (
-  <span className={cn(buttonLabelClassName, className)}>{label}</span>
+Button.Label = ({ children, className }: ButtonLabelProps) => (
+  <span className={cn(buttonLabelClassName, className)}>{children}</span>
 );
 
 Button.IconLabel = ({
@@ -72,14 +69,14 @@ Button.IconLabel = ({
   label,
   gap = "0.5rem",
   reverse = false,
-  side = "end",
+  direction = "right",
   className,
 }: ButtonIconLabelProps) => (
   <span
     style={{ "--margo-button-gap": gap } as CSSProperties}
     className={cn(
       buttonGridClassName,
-      side === "start" && "[direction:rtl]",
+      direction === "left" && "[direction:rtl]",
       reverse ? buttonGridReverseClassName : buttonGridForwardClassName,
       className,
     )}

package/src/components/button/style.ts

@@ -7,7 +7,7 @@ export const buttonSurfaceClassName = "border-border";
 
 export const buttonActiveClassName = "border-primary shadow-button";
 
-export const buttonDisabledClassName = "opacity-40";
+export const buttonDisabledClassName = "pointer-events-none opacity-40";
 
 export const buttonIconClassName =
   "relative z-10 flex size-4 min-w-0 shrink-0 items-center justify-center [direction:ltr]";

package/src/components/button/type.ts

@@ -1,7 +1,7 @@
 import type { TagProps } from "react-renderable";
 import type { ElementType, MouseEventHandler, ReactNode } from "react";
 
-export type ButtonIconLabelSide = "start" | "end";
+export type ButtonIconLabelDirection = "left" | "right";
 
 export type ButtonOwnProps = {
   clickable?: boolean;
@@ -9,18 +9,17 @@ export type ButtonOwnProps = {
   active?: boolean;
   open?: boolean;
   onClick?: MouseEventHandler<HTMLElement>;
-  onClickBlur?: MouseEventHandler<HTMLElement>;
 };
 
 export type ButtonProps<T extends ElementType = "button"> = TagProps<T, ButtonOwnProps>;
 
 export type ButtonIconProps = {
-  icon: ReactNode;
+  children: ReactNode;
   className?: string;
 };
 
 export type ButtonLabelProps = {
-  label: string;
+  children: ReactNode;
   className?: string;
 };
 
@@ -29,6 +28,6 @@ export type ButtonIconLabelProps = {
   label: ReactNode;
   gap?: string;
   reverse?: boolean;
-  side?: ButtonIconLabelSide;
+  direction?: ButtonIconLabelDirection;
   className?: string;
 };

package/src/components/button_micro/button_micro.tsx

@@ -3,35 +3,21 @@ 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 { ElementType } 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,
-      )}
-    />
-  );
-};
+}: ButtonMicroProps<T>) => (
+  <Tag
+    {...Tag.forward<T>(rest, "button")}
+    data-margo-active={active}
+    className={cn(
+      buttonMicroBaseClassName,
+      active ? buttonMicroActiveClassName : buttonMicroSurfaceClassName,
+      className,
+    )}
+  />
+);

package/src/components/button_micro/type.ts

@@ -1,10 +1,8 @@
 import type { TagProps } from "react-renderable";
-import type { ElementType, MouseEventHandler } from "react";
+import type { ElementType } 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/callout/callout.tsx

@@ -0,0 +1,15 @@
+import { Tag } from "react-renderable";
+
+import { cn } from "../../utils/cn/cn.js";
+import { calloutBaseClassName, calloutTitleClassName } from "./style.js";
+
+import type { ElementType } from "react";
+import type { CalloutProps, CalloutTitleProps } from "./type.js";
+
+export const Callout = <T extends ElementType = "aside">({ className, ...rest }: CalloutProps<T>) => (
+  <Tag {...Tag.forward<T>(rest, "aside")} className={cn(calloutBaseClassName, className)} />
+);
+
+Callout.Title = ({ children, className }: CalloutTitleProps) => (
+  <span className={cn(calloutTitleClassName, className)}>{children}</span>
+);

package/src/components/callout/style.ts

@@ -0,0 +1,3 @@
+export const calloutBaseClassName = "rounded-margo-base border-l-margo border-primary bg-low px-4 py-3 text-on-main";
+
+export const calloutTitleClassName = "block mb-1.5 text-mc uppercase tracking-widest text-primary";

package/src/components/callout/type.ts

@@ -0,0 +1,9 @@
+import type { TagProps } from "react-renderable";
+import type { ElementType, ReactNode } from "react";
+
+export type CalloutProps<T extends ElementType = "aside"> = TagProps<T>;
+
+export type CalloutTitleProps = {
+  children: ReactNode;
+  className?: string;
+};

package/src/components/card/style.ts

@@ -1,4 +1,4 @@
 export const cardBaseClassName = "rounded-margo-base border-margo border-border bg-main p-5 text-on-main shadow-card";
 
-export const cardFocusClassName = `focus:border-primary focus-visible:outline focus-visible:outline-offset-1
+export const cardFocusClassName = `focus-visible:border-primary focus-visible:outline focus-visible:outline-offset-1
 focus-visible:outline-on-main`;

package/src/components/chip/chip.tsx

@@ -7,7 +7,7 @@ import type { ElementType } from "react";
 import type { ChipProps } from "./type.js";
 
 export const Chip = <T extends ElementType = "div">({ active = false, className, children, ...rest }: ChipProps<T>) => (
-  <Tag {...Tag.forward<T>(rest)} className={cn(chipBaseClassName, className, active && chipActiveClassName)}>
+  <Tag {...Tag.forward<T>(rest)} className={cn(chipBaseClassName, active && chipActiveClassName, className)}>
     {children}
   </Tag>
 );

package/src/components/code/code.tsx

@@ -6,11 +6,13 @@ import { codeBaseClassName, codeFilledClassName } from "./style.js";
 import type { ElementType } from "react";
 import type { CodeProps } from "./type.js";
 
-export const Code = <T extends ElementType = "code">({ filled = false, className, children, ...rest }: CodeProps<T>) => (
-  <Tag
-    {...Tag.forward<T>(rest, "code")}
-    className={cn(codeBaseClassName, filled && codeFilledClassName, className)}
-  >
+export const Code = <T extends ElementType = "code">({
+  filled = false,
+  className,
+  children,
+  ...rest
+}: CodeProps<T>) => (
+  <Tag {...Tag.forward<T>(rest, "code")} className={cn(codeBaseClassName, filled && codeFilledClassName, className)}>
     {children}
   </Tag>
 );

package/src/components/header/header.tsx

@@ -1,12 +1,7 @@
 import { Tag } from "react-renderable";
 
 import { cn } from "../../utils/cn/cn.js";
-import {
-  headerBaseClassName,
-  headerLeadingClassName,
-  headerTitleClassName,
-  headerTrailingClassName,
-} from "./style.js";
+import { headerBaseClassName, headerLeadingClassName, headerTitleClassName, headerTrailingClassName } from "./style.js";
 
 import type { ElementType } from "react";
 import type { HeaderLeadingProps, HeaderProps, HeaderTitleProps, HeaderTrailingProps } from "./type.js";
@@ -23,9 +18,9 @@ Header.Leading = ({ children, className }: HeaderLeadingProps) => (
   </span>
 );
 
-Header.Title = ({ title, id, className }: HeaderTitleProps) => (
+Header.Title = ({ children, id, className }: HeaderTitleProps) => (
   <span data-margo-header-slot={true} id={id} className={cn(headerTitleClassName, className)}>
-    {title}
+    {children}
   </span>
 );
 

package/src/components/header/type.ts

@@ -9,7 +9,7 @@ export type HeaderLeadingProps = {
 };
 
 export type HeaderTitleProps = {
-  title: ReactNode;
+  children: ReactNode;
   id?: string;
   className?: string;
 };

package/src/components/input/input.tsx

@@ -22,9 +22,9 @@ export const Input = <T extends ElementType = "div">({
   />
 );
 
-Input.Icon = ({ icon = <MdSearch className="text-md" />, className }: InputIconProps) => (
+Input.Icon = ({ children = <MdSearch className="text-md" />, className }: InputIconProps) => (
   <span data-margo-input-slot={true} className={cn(inputIconClassName, className)}>
-    {icon}
+    {children}
   </span>
 );
 

package/src/components/input/type.ts

@@ -9,7 +9,7 @@ export type InputOwnProps = {
 export type InputProps<T extends ElementType = "div"> = TagProps<T, InputOwnProps>;
 
 export type InputIconProps = {
-  icon?: ReactNode;
+  children?: ReactNode;
   className?: string;
 };
 

package/src/components/item/item.tsx

@@ -20,20 +20,16 @@ export const Item = <T extends ElementType = "button">({
   clickable = true,
   disabled = false,
   active = false,
-  onClickBlur,
   onClick,
   className,
   children,
   ...rest
 }: ItemProps<T>) => {
+  const isNativeButton = (rest.as ?? "button") === "button";
+
   const handleClick = (event: MouseEvent<HTMLElement>) => {
-    if (disabled) return;
+    if (disabled) return event.preventDefault();
     onClick?.(event);
-    if (typeof onClickBlur === "function") {
-      const target = event.currentTarget;
-      onClickBlur(event);
-      setTimeout(() => target.blur(), 150);
-    }
   };
 
   return (
@@ -42,8 +38,9 @@ export const Item = <T extends ElementType = "button">({
         {...Tag.forward<T>(rest, "button")}
         data-margo-active={active}
         data-margo-disabled={disabled}
-        aria-disabled={disabled || undefined}
-        inert={disabled || !clickable || undefined}
+        disabled={(isNativeButton && disabled) || undefined}
+        aria-disabled={(!isNativeButton && disabled) || undefined}
+        inert={!clickable || undefined}
         onClick={handleClick}
         className={cn(
           itemBaseClassName,
@@ -58,12 +55,12 @@ export const Item = <T extends ElementType = "button">({
   );
 };
 
-Item.Icon = ({ icon = <MdChevronRight className="text-md translate-x-1" />, className }: ItemIconProps) => (
+Item.Icon = ({ children = <MdChevronRight className="text-md translate-x-1" />, className }: ItemIconProps) => (
   <span data-margo-item-slot={true} className={cn(itemIconClassName, className)}>
-    {icon}
+    {children}
   </span>
 );
 
-Item.Label = ({ label, className }: ItemLabelProps) => (
-  <span className={cn(itemLabelClassName, className)}>{label}</span>
+Item.Label = ({ children, className }: ItemLabelProps) => (
+  <span className={cn(itemLabelClassName, className)}>{children}</span>
 );

package/src/components/item/style.ts

@@ -8,7 +8,7 @@ hover:shadow-item focus-visible:shadow-item`;
 
 export const itemActiveClassName = "border-primary";
 
-export const itemDisabledClassName = "opacity-40";
+export const itemDisabledClassName = "pointer-events-none opacity-40";
 
 export const itemIconClassName = `ml-auto flex size-4 shrink-0 items-center justify-center first:ml-0
 [[data-margo-item-slot]+&]:ml-0`;

package/src/components/item/type.ts

@@ -6,17 +6,16 @@ export type ItemOwnProps = {
   disabled?: boolean;
   active?: boolean;
   onClick?: MouseEventHandler<HTMLElement>;
-  onClickBlur?: MouseEventHandler<HTMLElement>;
 };
 
 export type ItemProps<T extends ElementType = "button"> = TagProps<T, ItemOwnProps>;
 
 export type ItemIconProps = {
-  icon?: ReactNode;
+  children?: ReactNode;
   className?: string;
 };
 
 export type ItemLabelProps = {
-  label: ReactNode;
+  children: ReactNode;
   className?: string;
 };

package/src/components/label/label.tsx

@@ -1,15 +1,20 @@
 import { Tag } from "react-renderable";
 
 import { cn } from "../../utils/cn/cn.js";
-import { labelBaseClassName, labelDisabledClassName } from "./style.js";
+import { labelBaseClassName, labelDisabledClassName, labelSpacedClassName } from "./style.js";
 
 import type { ElementType } from "react";
 import type { LabelProps } from "./type.js";
 
-export const Label = <T extends ElementType = "label">({ disabled = false, className, ...rest }: LabelProps<T>) => (
+export const Label = <T extends ElementType = "label">({
+  disabled = false,
+  spaced = false,
+  className,
+  ...rest
+}: LabelProps<T>) => (
   <Tag
     {...Tag.forward<T>(rest, "label")}
     data-margo-disabled={disabled}
-    className={cn(labelBaseClassName, disabled && labelDisabledClassName, className)}
+    className={cn(labelBaseClassName, spaced && labelSpacedClassName, disabled && labelDisabledClassName, className)}
   />
 );

package/src/components/label/style.ts

@@ -1,3 +1,5 @@
-export const labelBaseClassName = "block text-mc uppercase tracking-widest text-medium truncate pl-3 mb-1";
+export const labelBaseClassName = "block text-mc uppercase tracking-widest text-medium truncate";
+
+export const labelSpacedClassName = "pl-3.5 mb-1";
 
 export const labelDisabledClassName = "opacity-40";

package/src/components/label/type.ts

@@ -3,6 +3,7 @@ import type { ElementType } from "react";
 
 export type LabelOwnProps = {
   disabled?: boolean;
+  spaced?: boolean;
 };
 
 export type LabelProps<T extends ElementType = "label"> = TagProps<T, LabelOwnProps>;

package/src/components/layer/layer.tsx

@@ -52,6 +52,20 @@ export const Layer = ({ open = false, onClose, dismissible = true, className, ch
     };
   }, [open]);
 
+  useEffect(() => {
+    if (!open || dismissible) return;
+
+    const controller = new AbortController();
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") event.preventDefault();
+    };
+
+    document.addEventListener("keydown", handleKeyDown, { capture: true, signal: controller.signal });
+
+    return () => controller.abort();
+  }, [dismissible, open]);
+
   const handleClick = (event: MouseEvent<HTMLDialogElement>) => {
     if (!dismissible || event.target !== event.currentTarget) return;
 
@@ -60,7 +74,7 @@ export const Layer = ({ open = false, onClose, dismissible = true, className, ch
 
   const handleCancel = (event: SyntheticEvent<HTMLDialogElement>) => {
     event.preventDefault();
-    onClose?.();
+    if (dismissible) onClose?.();
   };
 
   return (

package/src/components/popover/popover.tsx

@@ -8,7 +8,7 @@ import {
   popoverBaseClassName,
   popoverBodyClassName,
   popoverOriginClassName,
-  popoverPositionClassName,
+  popoverPlacementClassName,
 } from "./style.js";
 
 import type { ElementType } from "react";
@@ -20,7 +20,7 @@ export const Popover = ({
   open = false,
   onClose,
   dismissible = true,
-  position = "down",
+  placement = "bottom",
   align = "center",
   className,
   children,
@@ -90,8 +90,8 @@ export const Popover = ({
       data-margo-open={open}
       className={cn(
         popoverBaseClassName,
-        popoverPositionClassName[position][align],
-        popoverOriginClassName[position],
+        popoverPlacementClassName[placement][align],
+        popoverOriginClassName[placement],
         className,
       )}
     >

package/src/components/popover/style.ts

@@ -1,4 +1,4 @@
-import type { PopoverAlign, PopoverPosition } from "./type.js";
+import type { PopoverAlign, PopoverPlacement } from "./type.js";
 
 export const popoverAnchorClassName = "relative inline-block size-fit";
 
@@ -8,13 +8,13 @@ overflow-clip rounded-margo-base border-margo border-border bg-main text-on-main
 export const popoverBodyClassName = `flex min-h-0 max-h-56 flex-col gap-1
 overflow-y-auto overscroll-contain w-64 p-2 text-sm`;
 
-export const popoverPositionClassName: Record<PopoverPosition, Record<PopoverAlign, string>> = {
-  up: {
+export const popoverPlacementClassName: Record<PopoverPlacement, Record<PopoverAlign, string>> = {
+  top: {
     start: "bottom-full left-0 my-1",
     center: "bottom-full left-1/2 my-1 -translate-x-1/2",
     end: "right-0 bottom-full my-1",
   },
-  down: {
+  bottom: {
     start: "top-full left-0 my-1",
     center: "top-full left-1/2 my-1 -translate-x-1/2",
     end: "top-full right-0 my-1",
@@ -31,9 +31,9 @@ export const popoverPositionClassName: Record<PopoverPosition, Record<PopoverAli
   },
 };
 
-export const popoverOriginClassName: Record<PopoverPosition, string> = {
-  up: "origin-bottom",
-  down: "origin-top",
+export const popoverOriginClassName: Record<PopoverPlacement, string> = {
+  top: "origin-bottom",
+  bottom: "origin-top",
   left: "origin-right",
   right: "origin-left",
 };

package/src/components/popover/type.ts

@@ -1,7 +1,7 @@
 import type { TagProps } from "react-renderable";
 import type { ComponentPropsWithoutRef, ElementType, ReactNode } from "react";
 
-export type PopoverPosition = "up" | "down" | "left" | "right";
+export type PopoverPlacement = "top" | "right" | "bottom" | "left";
 
 export type PopoverAlign = "start" | "center" | "end";
 
@@ -9,7 +9,7 @@ export type PopoverProps = ComponentPropsWithoutRef<"div"> & {
   open?: boolean;
   onClose?: () => void;
   dismissible?: boolean;
-  position?: PopoverPosition;
+  placement?: PopoverPlacement;
   align?: PopoverAlign;
   children?: ReactNode;
 };

package/src/components/progress_bar/style.ts

@@ -1,3 +1,4 @@
-export const progressBarDefaultFill = "linear-gradient(to right, var(--margo-color-primary-darken), var(--margo-color-primary))";
+export const progressBarDefaultFill =
+  "linear-gradient(to right, var(--margo-color-primary-darken), var(--margo-color-primary))";
 
 export const progressBarBaseClassName = "margo-progress-bar relative h-0.5 overflow-hidden";

package/src/components/sheet/sheet.css

@@ -2,19 +2,19 @@
   transition: translate var(--margo-layer-duration) var(--margo-layer-easing);
 }
 
-.margo-sheet[data-margo-side="start"] {
+.margo-sheet[data-margo-placement="left"] {
   translate: -100% 0;
 }
 
-.margo-sheet[data-margo-side="end"] {
+.margo-sheet[data-margo-placement="right"] {
   translate: 100% 0;
 }
 
-.margo-sheet[data-margo-side="top"] {
+.margo-sheet[data-margo-placement="top"] {
   translate: 0 -100%;
 }
 
-.margo-sheet[data-margo-side="bottom"] {
+.margo-sheet[data-margo-placement="bottom"] {
   translate: 0 100%;
 }
 
@@ -23,19 +23,19 @@ dialog[open] .margo-sheet {
 }
 
 @starting-style {
-  dialog[open] .margo-sheet[data-margo-side="start"] {
+  dialog[open] .margo-sheet[data-margo-placement="left"] {
     translate: -100% 0;
   }
 
-  dialog[open] .margo-sheet[data-margo-side="end"] {
+  dialog[open] .margo-sheet[data-margo-placement="right"] {
     translate: 100% 0;
   }
 
-  dialog[open] .margo-sheet[data-margo-side="top"] {
+  dialog[open] .margo-sheet[data-margo-placement="top"] {
     translate: 0 -100%;
   }
 
-  dialog[open] .margo-sheet[data-margo-side="bottom"] {
+  dialog[open] .margo-sheet[data-margo-placement="bottom"] {
     translate: 0 100%;
   }
 }

package/src/components/sheet/sheet.tsx

@@ -1,19 +1,24 @@
 import { Tag } from "react-renderable";
 
 import { cn } from "../../utils/cn/cn.js";
-import { sheetBaseClassName, sheetBodyClassName, sheetFooterClassName, sheetSideClassName } from "./style.js";
+import { sheetBaseClassName, sheetBodyClassName, sheetFooterClassName, sheetPlacementClassName } from "./style.js";
 
 import type { ElementType } from "react";
 import type { SheetBodyProps, SheetFooterProps, SheetProps } from "./type.js";
 
 import "./sheet.css";
 
-export const Sheet = <T extends ElementType = "div">({ side = "end", className, children, ...rest }: SheetProps<T>) => (
+export const Sheet = <T extends ElementType = "div">({
+  placement = "right",
+  className,
+  children,
+  ...rest
+}: SheetProps<T>) => (
   <Tag
     {...Tag.forward<T>(rest)}
-    data-margo-side={side}
+    data-margo-placement={placement}
     data-margo-travel={true}
-    className={cn(sheetBaseClassName, sheetSideClassName[side], className)}
+    className={cn(sheetBaseClassName, sheetPlacementClassName[placement], className)}
   >
     {children}
   </Tag>

package/src/components/sheet/style.ts

@@ -1,10 +1,10 @@
-import type { SheetSide } from "./type.js";
+import type { SheetPlacement } from "./type.js";
 
 export const sheetBaseClassName = "margo-sheet flex flex-col overflow-hidden border-border bg-main text-on-main";
 
-export const sheetSideClassName: Record<SheetSide, string> = {
-  start: "h-full w-[85%] max-w-[26rem] justify-self-start self-stretch border-r-margo",
-  end: "h-full w-[85%] max-w-[26rem] justify-self-end self-stretch border-l-margo",
+export const sheetPlacementClassName: Record<SheetPlacement, string> = {
+  left: "h-full w-[85%] max-w-[26rem] justify-self-start self-stretch border-r-margo",
+  right: "h-full w-[85%] max-w-[26rem] justify-self-end self-stretch border-l-margo",
   top: "h-auto max-h-[40%] w-full self-start justify-self-stretch border-b-margo",
   bottom: "h-auto max-h-[40%] w-full self-end justify-self-stretch border-t-margo",
 };

package/src/components/sheet/type.ts

@@ -1,10 +1,10 @@
 import type { TagProps } from "react-renderable";
 import type { ElementType } from "react";
 
-export type SheetSide = "start" | "end" | "top" | "bottom";
+export type SheetPlacement = "top" | "right" | "bottom" | "left";
 
 export type SheetOwnProps = {
-  side?: SheetSide;
+  placement?: SheetPlacement;
 };
 
 export type SheetProps<T extends ElementType = "div"> = TagProps<T, SheetOwnProps>;

package/src/components/slider/slider.css

@@ -0,0 +1,73 @@
+.margo-slider {
+  appearance: none;
+
+  --margo-slider-track: var(--margo-color-border);
+  --margo-slider-fill: var(--margo-color-primary);
+  --margo-slider-thumb: var(--margo-color-primary);
+  --margo-slider-thumb-border: var(--margo-color-primary-darken);
+  --margo-slider-thumb-size: 1rem;
+  --margo-slider-track-size: 0.375rem;
+}
+
+.margo-slider::-webkit-slider-runnable-track {
+  block-size: var(--margo-slider-track-size);
+  border-radius: 9999px;
+  background: linear-gradient(
+    to right,
+    var(--margo-slider-fill) var(--margo-slider-value, 0%),
+    var(--margo-slider-track) var(--margo-slider-value, 0%)
+  );
+}
+
+.margo-slider::-moz-range-track {
+  block-size: var(--margo-slider-track-size);
+  border-radius: 9999px;
+  background: var(--margo-slider-track);
+}
+
+.margo-slider::-moz-range-progress {
+  block-size: var(--margo-slider-track-size);
+  border-radius: 9999px;
+  background: var(--margo-slider-fill);
+}
+
+.margo-slider::-webkit-slider-thumb {
+  appearance: none;
+  inline-size: var(--margo-slider-thumb-size);
+  block-size: var(--margo-slider-thumb-size);
+  margin-block-start: calc((var(--margo-slider-track-size) - var(--margo-slider-thumb-size)) / 2);
+  border: var(--margo-border) solid var(--margo-slider-thumb-border);
+  border-radius: 9999px;
+  background-color: var(--margo-slider-thumb);
+  box-shadow: var(--margo-shadow-button);
+  transition: scale 120ms ease-out;
+}
+
+.margo-slider::-moz-range-thumb {
+  inline-size: var(--margo-slider-thumb-size);
+  block-size: var(--margo-slider-thumb-size);
+  box-sizing: border-box;
+  border: var(--margo-border) solid var(--margo-slider-thumb-border);
+  border-radius: 9999px;
+  background-color: var(--margo-slider-thumb);
+  box-shadow: var(--margo-shadow-button);
+  transition: scale 120ms ease-out;
+}
+
+.margo-slider:enabled:active::-webkit-slider-thumb {
+  scale: 0.92;
+}
+
+.margo-slider:enabled:active::-moz-range-thumb {
+  scale: 0.92;
+}
+
+.margo-slider:focus-visible::-webkit-slider-thumb {
+  outline: var(--margo-border) solid var(--margo-color-on-main);
+  outline-offset: 1px;
+}
+
+.margo-slider:focus-visible::-moz-range-thumb {
+  outline: var(--margo-border) solid var(--margo-color-on-main);
+  outline-offset: 1px;
+}

package/src/components/slider/slider.tsx

@@ -0,0 +1,44 @@
+import { cn } from "../../utils/cn/cn.js";
+import { sliderBaseClassName } from "./style.js";
+
+import type { ChangeEvent, CSSProperties } from "react";
+import type { SliderProps } from "./type.js";
+
+import "./slider.css";
+
+const sliderPercent = (value: number, min: number, max: number) =>
+  max > min ? `${((Math.min(max, Math.max(min, value)) - min) / (max - min)) * 100}%` : "0%";
+
+export const Slider = ({
+  min = 0,
+  max = 100,
+  value,
+  defaultValue,
+  style,
+  className,
+  onChange,
+  ...rest
+}: SliderProps) => {
+  const current = Number(value ?? defaultValue ?? (Number(min) + Number(max)) / 2);
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const input = event.currentTarget;
+
+    input.style.setProperty("--margo-slider-value", sliderPercent(input.valueAsNumber, Number(min), Number(max)));
+    onChange?.(event);
+  };
+
+  return (
+    <input
+      {...rest}
+      type="range"
+      min={min}
+      max={max}
+      value={value}
+      defaultValue={defaultValue}
+      onChange={handleChange}
+      style={{ ...style, "--margo-slider-value": sliderPercent(current, Number(min), Number(max)) } as CSSProperties}
+      className={cn(sliderBaseClassName, className)}
+    />
+  );
+};

package/src/components/slider/style.ts

@@ -0,0 +1,2 @@
+export const sliderBaseClassName = `margo-slider h-5 w-full flex-none cursor-pointer bg-transparent text-on-main outline-none
+select-none disabled:cursor-auto disabled:opacity-40`;

package/src/components/slider/type.ts

@@ -0,0 +1,3 @@
+import type { ComponentPropsWithRef } from "react";
+
+export type SliderProps = Omit<ComponentPropsWithRef<"input">, "type">;

package/src/components/table/style.ts

@@ -1,4 +1,5 @@
-export const tableWrapperClassName = "w-full overflow-x-auto overscroll-x-none rounded-margo-base border-margo border-border";
+export const tableWrapperClassName =
+  "w-full overflow-x-auto overscroll-x-none rounded-margo-base border-margo border-border";
 
 export const tableBaseClassName = "w-full border-collapse text-xs text-on-main";
 

package/src/components/text_area/style.ts

@@ -0,0 +1,10 @@
+export const textAreaBaseClassName = `group/text-area flex w-full cursor-text items-stretch rounded-margo-base
+border-margo border-transparent bg-low text-sm text-medium
+hover:border-on-main hover:text-on-main hover:shadow-item
+focus-within:border-primary focus-within:text-on-main
+has-[textarea:disabled]:pointer-events-none has-[textarea:disabled]:cursor-auto has-[textarea:disabled]:opacity-40`;
+
+export const textAreaActiveClassName = "border-primary";
+
+export const textAreaTextClassName = `min-w-0 flex-1 resize-none border-none bg-transparent px-3 py-2 text-left
+text-on-main outline-none placeholder:text-medium disabled:cursor-auto`;

package/src/components/text_area/text_area.tsx

@@ -0,0 +1,25 @@
+import { Tag } from "react-renderable";
+
+import { cn } from "../../utils/cn/cn.js";
+import { textAreaActiveClassName, textAreaBaseClassName, textAreaTextClassName } from "./style.js";
+
+import type { ElementType } from "react";
+import type { TextAreaProps, TextAreaTextProps } from "./type.js";
+
+export const TextArea = <T extends ElementType = "div">({
+  active = false,
+  clickable = true,
+  className,
+  ...rest
+}: TextAreaProps<T>) => (
+  <Tag
+    {...Tag.forward<T>(rest, "div")}
+    data-margo-active={active}
+    inert={!clickable || undefined}
+    className={cn(textAreaBaseClassName, active && textAreaActiveClassName, className)}
+  />
+);
+
+TextArea.Text = ({ rows = 4, className, ...rest }: TextAreaTextProps) => (
+  <textarea {...rest} rows={rows} className={cn(textAreaTextClassName, className)} />
+);

package/src/components/text_area/type.ts

@@ -0,0 +1,11 @@
+import type { TagProps } from "react-renderable";
+import type { ComponentPropsWithoutRef, ElementType } from "react";
+
+export type TextAreaOwnProps = {
+  active?: boolean;
+  clickable?: boolean;
+};
+
+export type TextAreaProps<T extends ElementType = "div"> = TagProps<T, TextAreaOwnProps>;
+
+export type TextAreaTextProps = ComponentPropsWithoutRef<"textarea">;

package/src/components/tooltip/style.ts

@@ -1,17 +1,17 @@
-import type { TooltipPosition } from "./type.js";
+import type { TooltipPlacement } from "./type.js";
 
-export const tooltipAnchorClassName = "group relative inline-block size-fit";
+export const tooltipAnchorClassName = "group/tooltip relative inline-block size-fit";
 
 export const tooltipBubbleClassName = `pointer-events-none absolute z-10 rounded-margo-xs bg-on-main px-2 py-0.5 text-xs text-main lowercase
 whitespace-nowrap opacity-0`;
 
 export const tooltipTransitionClassName = "transition-opacity duration-[250ms] ease-in-out";
 
-export const tooltipVisibleClassName = "group-hover:opacity-100 group-focus-within:opacity-100";
+export const tooltipVisibleClassName = "group-hover/tooltip:opacity-100 group-focus-within/tooltip:opacity-100";
 
-export const tooltipPositionClassName: Record<TooltipPosition, string> = {
-  up: "bottom-[120%] left-1/2 -translate-x-1/2",
-  down: "top-[120%] left-1/2 -translate-x-1/2",
+export const tooltipPlacementClassName: Record<TooltipPlacement, string> = {
+  top: "bottom-[120%] left-1/2 -translate-x-1/2",
+  bottom: "top-[120%] left-1/2 -translate-x-1/2",
   left: "top-1/2 right-[calc(100%+0.5rem)] -translate-y-1/2",
   right: "top-1/2 left-[calc(100%+0.5rem)] -translate-y-1/2",
 };

package/src/components/tooltip/tooltip.tsx

@@ -6,7 +6,7 @@ import { cn } from "../../utils/cn/cn.js";
 import {
   tooltipAnchorClassName,
   tooltipBubbleClassName,
-  tooltipPositionClassName,
+  tooltipPlacementClassName,
   tooltipTransitionClassName,
   tooltipVisibleClassName,
 } from "./style.js";
@@ -20,7 +20,7 @@ export const Tooltip = <T extends ElementType = "div">({
   className,
   id,
   content,
-  position = "down",
+  placement = "bottom",
   ...rest
 }: TooltipProps<T>) => {
   const contentRef = useRef<ReactNode>(null);
@@ -40,7 +40,7 @@ export const Tooltip = <T extends ElementType = "div">({
           tooltipBubbleClassName,
           tooltipTransitionClassName,
           isFilled && tooltipVisibleClassName,
-          tooltipPositionClassName[position],
+          tooltipPlacementClassName[placement],
         )}
       >
         {contentRef.current}

package/src/components/tooltip/type.ts

@@ -1,13 +1,13 @@
 import type { TagProps } from "react-renderable";
 import type { ElementType, ReactNode } from "react";
 
-export type TooltipPosition = "up" | "down" | "left" | "right";
+export type TooltipPlacement = "top" | "right" | "bottom" | "left";
 
 export type TooltipOwnProps = {
   label?: string;
   id?: string;
   content?: ReactNode;
-  position?: TooltipPosition;
+  placement?: TooltipPlacement;
   children?: ReactNode;
 };
 

package/src/css/base.css

@@ -5,10 +5,6 @@
     box-sizing: border-box;
   }
 
-  canvas {
-    width: 100% !important;
-  }
-
   li {
     list-style: none;
   }
@@ -22,16 +18,6 @@
     text-align: left;
   }
 
-  ::-webkit-scrollbar {
-    display: none;
-    -webkit-appearance: none;
-  }
-
-  ::-webkit-scrollbar-button {
-    display: none;
-    -webkit-appearance: none;
-  }
-
   input::-webkit-outer-spin-button,
   input::-webkit-inner-spin-button {
     -webkit-appearance: none;

package/src/css/theme.css

@@ -31,8 +31,7 @@
   --shadow-item: var(--margo-shadow-item);
   --shadow-chip: var(--margo-shadow-chip);
 
-  /* Durations */
-  --duration-layer: var(--margo-layer-duration);
+  /* Easings */
   --ease-layer: var(--margo-layer-easing);
 
   /* Layers */

package/src/hoc/background_glow/background_glow.css

@@ -7,7 +7,8 @@
   opacity: 0;
   border-radius: inherit;
   background: radial-gradient(
-    var(--margo-background-glow-size, 480px) circle at var(--margo-background-glow-x, 50%) var(--margo-background-glow-y, 50%),
+    var(--margo-background-glow-size, 480px) circle at var(--margo-background-glow-x, 50%)
+      var(--margo-background-glow-y, 50%),
     var(--color-primary),
     transparent 70%
   );
@@ -30,13 +31,10 @@
 
 @media (hover: hover) and (pointer: fine) {
   .margo-background-glow:hover::before {
-    opacity: var(--margo-background-glow-opacity, 0.1);
+    opacity: var(--margo-background-glow-opacity, 0.2);
   }
 
   .margo-background-glow:hover::after {
     opacity: var(--margo-background-glow-noise-opacity, 0.04);
   }
 }
-
-
-

package/src/hoc/border_glow/border_glow.tsx

@@ -1,14 +1,14 @@
 import { cloneElement } from "react";
 
 import { cn } from "../../utils/cn/cn.js";
-import { borderGlowBaseClassName, borderGlowPositionClassName } from "./style.js";
+import { borderGlowBaseClassName, borderGlowPlacementClassName } from "./style.js";
 
 import type { PointerEvent } from "react";
 import type { BorderGlowProps } from "./type.js";
 
 import "./border_glow.css";
 
-export const BorderGlow = ({ children, position = "all", tolerance = 1 }: BorderGlowProps) => {
+export const BorderGlow = ({ children, placement = "all", tolerance = 1 }: BorderGlowProps) => {
   const handlePointerMove = (event: PointerEvent<HTMLElement>) => {
     if (event.pointerType !== "mouse") return children.props.onPointerMove?.(event);
 
@@ -18,14 +18,17 @@ export const BorderGlow = ({ children, position = "all", tolerance = 1 }: Border
     const size = Math.max(bounds.width, bounds.height) * Math.min(Math.max(tolerance, 0), 1);
 
     event.currentTarget.style.setProperty("--margo-border-glow-size", `${size}px`);
-    event.currentTarget.style.setProperty("--margo-border-glow-x", `${position === "right" ? bounds.width - x : x}px`);
-    event.currentTarget.style.setProperty("--margo-border-glow-y", `${position === "down" ? bounds.height - y : y}px`);
+    event.currentTarget.style.setProperty("--margo-border-glow-x", `${placement === "right" ? bounds.width - x : x}px`);
+    event.currentTarget.style.setProperty(
+      "--margo-border-glow-y",
+      `${placement === "bottom" ? bounds.height - y : y}px`,
+    );
 
     children.props.onPointerMove?.(event);
   };
 
   return cloneElement(children, {
-    className: cn(borderGlowBaseClassName, borderGlowPositionClassName[position], children.props.className),
+    className: cn(borderGlowBaseClassName, borderGlowPlacementClassName[placement], children.props.className),
     onPointerMove: handlePointerMove,
   });
 };

package/src/hoc/border_glow/style.ts

@@ -1,10 +1,10 @@
-import type { BorderGlowPosition } from "./type.js";
+import type { BorderGlowPlacement } from "./type.js";
 
 export const borderGlowBaseClassName = "relative isolate margo-border-glow";
 
-export const borderGlowPositionClassName: Record<BorderGlowPosition, string> = {
-  up: "margo-border-glow--edge-top",
-  down: "margo-border-glow--edge-bottom",
+export const borderGlowPlacementClassName: Record<BorderGlowPlacement, string> = {
+  top: "margo-border-glow--edge-top",
+  bottom: "margo-border-glow--edge-bottom",
   left: "margo-border-glow--edge-left",
   right: "margo-border-glow--edge-right",
   all: "margo-border-glow--ring",

package/src/hoc/border_glow/type.ts

@@ -1,6 +1,6 @@
 import type { PointerEventHandler, ReactElement } from "react";
 
-export type BorderGlowPosition = "up" | "down" | "left" | "right" | "all";
+export type BorderGlowPlacement = "top" | "right" | "bottom" | "left" | "all";
 
 export type BorderGlowChildProps = {
   className?: string;
@@ -9,6 +9,6 @@ export type BorderGlowChildProps = {
 
 export type BorderGlowProps = {
   children: ReactElement<BorderGlowChildProps>;
-  position?: BorderGlowPosition;
+  placement?: BorderGlowPlacement;
   tolerance?: number;
 };

package/src/hoc/pointer_holder/pointer_holder.tsx

@@ -9,7 +9,11 @@ const readKey = (target: EventTarget | null, attribute: string) => {
   return holder?.getAttribute(attribute) ?? null;
 };
 
-export const PointerHolder = ({ children, attribute = "data-margo-pointer-holder", disabled = false }: PointerHolderProps) => {
+export const PointerHolder = ({
+  children,
+  attribute = "data-margo-pointer-holder",
+  disabled = false,
+}: PointerHolderProps) => {
   const [keys, setKeys] = useState<string[]>([]);
 
   const hold = (target: EventTarget | null) => {

package/src/hoc/pointer_holder/type.ts

@@ -1,12 +1,10 @@
-import type { FocusEventHandler, PointerEventHandler, ReactElement } from "react";
+import type { PointerEventHandler, ReactElement } from "react";
 
 export type PointerHolderApi = {
   keys: string[];
 };
 
 export type PointerHolderChildProps = {
-  onBlur?: FocusEventHandler<HTMLElement>;
-  onFocus?: FocusEventHandler<HTMLElement>;
   onPointerLeave?: PointerEventHandler<HTMLElement>;
   onPointerOver?: PointerEventHandler<HTMLElement>;
 };

package/src/index.ts

@@ -1,6 +1,7 @@
 export { Blockquote } from "./components/blockquote/blockquote.js";
 export { Button } from "./components/button/button.js";
 export { ButtonMicro } from "./components/button_micro/button_micro.js";
+export { Callout } from "./components/callout/callout.js";
 export { Card } from "./components/card/card.js";
 export { Checkbox } from "./components/checkbox/checkbox.js";
 export { Chip } from "./components/chip/chip.js";
@@ -17,6 +18,8 @@ export { Table } from "./components/table/table.js";
 export { Toggle } from "./components/toggle/toggle.js";
 export { Select } from "./components/select/select.js";
 export { Sheet } from "./components/sheet/sheet.js";
+export { Slider } from "./components/slider/slider.js";
+export { TextArea } from "./components/text_area/text_area.js";
 export { Spinner } from "./components/spinner/spinner.js";
 export { Tooltip } from "./components/tooltip/tooltip.js";
 
@@ -39,12 +42,13 @@ export type { BlockquoteProps } from "./components/blockquote/type.js";
 
 export type {
   ButtonIconLabelProps,
-  ButtonIconLabelSide,
+  ButtonIconLabelDirection,
   ButtonIconProps,
   ButtonLabelProps,
   ButtonProps,
 } from "./components/button/type.js";
 export type { ButtonMicroProps } from "./components/button_micro/type.js";
+export type { CalloutProps, CalloutTitleProps } from "./components/callout/type.js";
 export type { CardProps } from "./components/card/type.js";
 export type { CheckboxProps } from "./components/checkbox/type.js";
 export type { ChipProps } from "./components/chip/type.js";
@@ -60,7 +64,13 @@ export type { LabelOwnProps, LabelProps } from "./components/label/type.js";
 export type { LayerProps } from "./components/layer/type.js";
 export type { InputIconProps, InputProps, InputTextProps } from "./components/input/type.js";
 export type { ItemIconProps, ItemLabelProps, ItemProps } from "./components/item/type.js";
-export type { PopoverAlign, PopoverAnchorProps, PopoverBodyProps, PopoverPosition, PopoverProps } from "./components/popover/type.js";
+export type {
+  PopoverAlign,
+  PopoverAnchorProps,
+  PopoverBodyProps,
+  PopoverPlacement,
+  PopoverProps,
+} from "./components/popover/type.js";
 export type { ProgressBarMode, ProgressBarProps } from "./components/progress_bar/type.js";
 export type {
   TableBodyProps,
@@ -71,13 +81,15 @@ export type {
   TableRowProps,
 } from "./components/table/type.js";
 export type { SelectOwnProps, SelectProps } from "./components/select/type.js";
-export type { SheetBodyProps, SheetFooterProps, SheetProps, SheetSide } from "./components/sheet/type.js";
+export type { SheetBodyProps, SheetFooterProps, SheetPlacement, SheetProps } from "./components/sheet/type.js";
+export type { SliderProps } from "./components/slider/type.js";
 export type { SpinnerProps } from "./components/spinner/type.js";
+export type { TextAreaOwnProps, TextAreaProps, TextAreaTextProps } from "./components/text_area/type.js";
 export type { ToggleProps } from "./components/toggle/type.js";
-export type { TooltipPosition, TooltipProps } from "./components/tooltip/type.js";
+export type { TooltipPlacement, TooltipProps } from "./components/tooltip/type.js";
 
 export type { BackgroundGlowProps } from "./hoc/background_glow/type.js";
-export type { BorderGlowPosition, BorderGlowProps } from "./hoc/border_glow/type.js";
+export type { BorderGlowPlacement, BorderGlowProps } from "./hoc/border_glow/type.js";
 export type { PointerHolderProps } from "./hoc/pointer_holder/type.js";
 export type { MaskGradientXProps } from "./hoc/mask_gradient_x/type.js";
 export type { MaskGradientYProps } from "./hoc/mask_gradient_y/type.js";

package/src/utils/cn/cn.ts

@@ -9,6 +9,9 @@ const isColumnLine = (value: string) => value === "full" || value === "content"
 
 const isMargoRadiusStep = (value: string) => /^margo-(mc|xs|sm|base)$/.test(value);
 
+const MARGO_LEADING_STEPS = ["mc", "xs", "sm", "md", "lg", "base", "xl", "2xl"];
+const MARGO_SHADOWS = ["card", "button", "item", "chip"];
+
 const BORDER_SIDES = ["", "x", "y", "s", "e", "t", "r", "b", "l"] as const;
 const RADIUS_CORNERS = ["", "s", "e", "t", "r", "b", "l", "ss", "se", "ee", "es", "tl", "tr", "br", "bl"] as const;
 
@@ -40,9 +43,16 @@ type MargoClassGroupIds =
   | "margo-padding";
 
 const twMerge = extendTailwindMerge<MargoClassGroupIds>({
+  override: {
+    conflictingClassGroups: {
+      "font-size": [],
+    },
+  },
   extend: {
     classGroups: {
       "font-size": ["text-mc"],
+      leading: [{ leading: MARGO_LEADING_STEPS }],
+      shadow: [{ shadow: MARGO_SHADOWS }],
       ...borderWidthGroups,
       ...radiusGroups,
       "margo-col": [{ "margo-col": [isColumnLine] }],