@smicolon/fasla-ui 0.2.4 → 0.4.0

package/registry/ui/radio/radio.tsx

@@ -0,0 +1,208 @@
+import * as React from "react"
+import { cva } from "class-variance-authority"
+import { cn } from "../../../src/lib/utils"
+
+/**
+ * The height of one line of label text, in whichever script is rendering.
+ *
+ * The type ramp publishes `--leading-sm` as a *unitless ratio* (`calc(20 / 14)`),
+ * not a length, so the line box is ratio × font-size. Writing it this way makes
+ * the control direction-aware for free: under `[dir="rtl"]` the ramp re-points
+ * `--leading-sm` at Cairo's 24px leading and the control re-centres itself with
+ * no RTL-specific class. The fallback, English's 20 / 14, is for a project that
+ * does not load the Fasla preset, where `--leading-sm` does not exist.
+ *
+ * The label deliberately has no fixed height. Figma pins its label boxes to
+ * 16/20/24px, which is a defect there — at `sm` a 16px box holds 20px English
+ * and 24px Arabic text — and it must not be mirrored here. The ramp sets the
+ * leading; nothing else does.
+ */
+const LINE_BOX = "h-[calc(var(--leading-sm,calc(20/14))*0.875rem)]"
+
+const radioVariants = cva(
+  "group relative inline-flex cursor-pointer items-start gap-3 has-[:disabled]:pointer-events-none has-[:disabled]:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "",
+        // In Layout the whole card is the target, so hover fills it and focus
+        // rings it. The card ships with no fill, so hover *adds* one.
+        layout:
+          "rounded-md border p-2 transition-colors motion-reduce:transition-none hover:bg-accent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+/**
+ * Control, dot and hover halo per size. The dot is always the control less 8px;
+ * the halo is always the control plus 8px.
+ */
+const sizeClasses = {
+  sm: { control: "size-4", dot: "size-2", halo: "size-6" },
+  md: { control: "size-5", dot: "size-3", halo: "size-7" },
+  lg: { control: "size-6", dot: "size-4", halo: "size-8" },
+}
+
+export interface RadioProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> {
+  /**
+   * Visual treatment. `layout` wraps the control and text in a bordered card.
+   * Declared here rather than inherited from `VariantProps`, which widens every
+   * variant with `| null` and shows a meaningless third option in Storybook.
+   */
+  variant?: "default" | "layout"
+  /** Label text. Without it (or `description`) pass `aria-label` for an accessible name. */
+  label?: string
+  /** Secondary line below the label */
+  description?: string
+  /** Size variant */
+  size?: "sm" | "md" | "lg"
+}
+
+const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
+  (
+    {
+      className,
+      variant = "default",
+      size = "md",
+      label,
+      description,
+      id,
+      "aria-describedby": ariaDescribedBy,
+      ...props
+    },
+    ref
+  ) => {
+    const generatedId = React.useId()
+    const inputId = id || generatedId
+    const descriptionId = `${inputId}-description`
+    const sizes = sizeClasses[size]
+
+    return (
+      <label
+        htmlFor={inputId}
+        className={cn(radioVariants({ variant }), className)}
+      >
+        <input
+          type="radio"
+          ref={ref}
+          id={inputId}
+          className="peer sr-only"
+          aria-describedby={
+            description ? cn(descriptionId, ariaDescribedBy) : ariaDescribedBy
+          }
+          {...props}
+        />
+        {/*
+         * The control sits in a band exactly one line tall and centres itself
+         * in it, so it aligns optically with the *first* line of the label
+         * rather than drifting to the middle of a wrapped block. At `lg` the
+         * 24px control is taller than a 20px English line and overflows the
+         * band by 2px a side — deliberate, and well inside the card's 8px
+         * padding.
+         */}
+        {/*
+         * Focus rings are real elements, exactly as Figma models them — an
+         * ellipse at −2,−2 for Default and a rounded rectangle at −1,−1 for
+         * Layout, rather than a property of the control or the card.
+         *
+         * Each is a *direct sibling of the input*, so a plain
+         * `peer-focus-visible:opacity-100` drives it. That matters beyond
+         * tidiness: `:has()` and arbitrary-variant selectors both resolve in a
+         * browser but are invisible to the pseudo-state renderer the Storybook
+         * states grid uses, so the grid would quietly stop matching the
+         * component. A simple class on a sibling is the one form that survives.
+         */}
+        {variant === "layout" && (
+          <span
+            aria-hidden="true"
+            // −2px, not −1px: an absolutely positioned child is offset from the
+            // *padding* box, which already sits 1px inside the 1px border. −1
+            // would land the ring exactly on the border with no gap at all.
+            className="pointer-events-none absolute -inset-[2px] rounded-[calc(var(--radius)-1px)] opacity-0 ring-2 ring-ring peer-focus-visible:opacity-100"
+          />
+        )}
+        {variant === "default" && (
+          <span
+            aria-hidden="true"
+            className={cn(
+              "pointer-events-none absolute start-0 top-0 flex items-center opacity-0 peer-focus-visible:opacity-100",
+              LINE_BOX
+            )}
+          >
+            <span
+              className={cn(
+                "rounded-full ring-2 ring-ring ring-offset-2",
+                sizes.control
+              )}
+            />
+          </span>
+        )}
+        <span
+          aria-hidden="true"
+          className={cn("relative flex shrink-0 items-center", LINE_BOX)}
+        >
+          {/*
+           * Hover halo — Default only; in Layout the card fills instead. Kept
+           * absolute so it can never affect layout, which is the constraint the
+           * Figma set is built on: every Interaction variant has identical
+           * frame sizes.
+           */}
+          {variant === "default" && (
+            <span
+              className={cn(
+                "pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-accent opacity-0 transition-opacity motion-reduce:transition-none group-hover:opacity-100",
+                sizes.halo
+              )}
+            />
+          )}
+          <span
+            data-slot="control"
+            className={cn(
+              "relative flex shrink-0 items-center justify-center rounded-full border border-input",
+              sizes.control
+            )}
+          >
+            <span
+              className={cn(
+                // Figma paints the dot with theme/primary — the strong neutral
+                // (#0a0a0a light, #fafafa dark). Both apps now declare exactly
+                // that, so `bg-primary` is the honest token again. This read
+                // `bg-foreground` until the token sync, as a workaround for the
+                // docs app having repurposed `--primary` as the brand red.
+                // Figma gives primary and foreground the same value in both
+                // modes, so this is a rename, not a visual change.
+                "scale-0 rounded-full bg-primary transition-transform motion-reduce:transition-none group-has-[:checked]:scale-100",
+                sizes.dot
+              )}
+            />
+          </span>
+        </span>
+        {(label || description) && (
+          <span className="flex min-w-0 flex-col gap-2">
+            {label && (
+              <span className="text-sm font-medium text-foreground">
+                {label}
+              </span>
+            )}
+            {description && (
+              <span
+                id={descriptionId}
+                className="text-sm text-muted-foreground"
+              >
+                {description}
+              </span>
+            )}
+          </span>
+        )}
+      </label>
+    )
+  }
+)
+Radio.displayName = "Radio"
+
+export { Radio, radioVariants }

package/registry/ui/select/select.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
 import { cn } from "../../../src/lib/utils"
 
 export interface SelectOption {
@@ -51,7 +52,7 @@ const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
               ? "border-destructive focus-visible:ring-destructive"
               : "border-input",
             sizeClasses[selectSize],
-            "pr-10",
+            "pe-10",
             className
           )}
           {...props}
@@ -71,19 +72,8 @@ const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
             </option>
           ))}
         </select>
-        <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground">
-          <svg
-            width="16"
-            height="16"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          >
-            <polyline points="6 9 12 15 18 9" />
-          </svg>
+        <div className="pointer-events-none absolute inset-y-0 end-0 flex items-center pe-3 text-muted-foreground">
+          <ChevronDownIcon size={16} strokeWidth={1.5} />
         </div>
       </div>
     )

package/registry/ui/skeleton/index.ts

@@ -2,6 +2,7 @@ export {
   Skeleton,
   SkeletonText,
   SkeletonAvatar,
+  SkeletonListItem,
   SkeletonCard,
   type SkeletonProps,
 } from "./skeleton"

package/registry/ui/skeleton/skeleton.test.tsx

@@ -1,6 +1,13 @@
+import * as React from "react"
 import { describe, it, expect } from "vitest"
 import { render, screen } from "@testing-library/react"
-import { Skeleton, SkeletonText, SkeletonAvatar, SkeletonCard } from "./skeleton"
+import {
+  Skeleton,
+  SkeletonText,
+  SkeletonAvatar,
+  SkeletonListItem,
+  SkeletonCard,
+} from "./skeleton"
 
 describe("Skeleton", () => {
   it("renders with default props", () => {
@@ -8,19 +15,26 @@ describe("Skeleton", () => {
     expect(screen.getByTestId("skeleton")).toBeInTheDocument()
   })
 
-  it("renders with animation by default", () => {
+  it("uses the secondary token, as Figma does", () => {
     render(<Skeleton data-testid="skeleton" />)
-    expect(screen.getByTestId("skeleton")).toHaveClass("animate-pulse")
+    expect(screen.getByTestId("skeleton")).toHaveClass("bg-secondary")
+  })
+
+  it("pulses by default, only when motion is allowed", () => {
+    render(<Skeleton data-testid="skeleton" />)
+    const skeleton = screen.getByTestId("skeleton")
+    expect(skeleton).toHaveClass("motion-safe:animate-pulse")
+    expect(skeleton).not.toHaveClass("animate-pulse")
   })
 
   it("can disable animation", () => {
     render(<Skeleton animate={false} data-testid="skeleton" />)
-    expect(screen.getByTestId("skeleton")).not.toHaveClass("animate-pulse")
+    expect(screen.getByTestId("skeleton")).not.toHaveClass("motion-safe:animate-pulse")
   })
 
-  it("renders with default variant (rounded-md)", () => {
+  it("renders with default variant (4px radius)", () => {
     render(<Skeleton data-testid="skeleton" />)
-    expect(screen.getByTestId("skeleton")).toHaveClass("rounded-md")
+    expect(screen.getByTestId("skeleton")).toHaveClass("rounded")
   })
 
   it("renders with circular variant", () => {
@@ -37,13 +51,31 @@ describe("Skeleton", () => {
     render(<Skeleton className="h-10 w-20" data-testid="skeleton" />)
     expect(screen.getByTestId("skeleton")).toHaveClass("h-10", "w-20")
   })
+
+  it("lets className override the radius", () => {
+    render(<Skeleton className="rounded-lg" data-testid="skeleton" />)
+    const skeleton = screen.getByTestId("skeleton")
+    expect(skeleton).toHaveClass("rounded-lg")
+    expect(skeleton).not.toHaveClass("rounded")
+  })
+
+  it("is hidden from assistive technology", () => {
+    render(<Skeleton data-testid="skeleton" />)
+    expect(screen.getByTestId("skeleton")).toHaveAttribute("aria-hidden", "true")
+  })
+
+  it("forwards a ref to the element", () => {
+    const ref = React.createRef<HTMLDivElement>()
+    render(<Skeleton ref={ref} data-testid="skeleton" />)
+    expect(ref.current).toBe(screen.getByTestId("skeleton"))
+  })
 })
 
 describe("SkeletonText", () => {
-  it("renders with default 3 lines", () => {
+  it("renders 2 lines by default, as Figma does", () => {
     render(<SkeletonText data-testid="skeleton-text" />)
     const container = screen.getByTestId("skeleton-text")
-    expect(container.children).toHaveLength(3)
+    expect(container.children).toHaveLength(2)
   })
 
   it("renders with specified number of lines", () => {
@@ -52,18 +84,39 @@ describe("SkeletonText", () => {
     expect(container.children).toHaveLength(5)
   })
 
-  it("last line is shorter when multiple lines", () => {
+  it("makes every line a full-width 16px bar", () => {
     render(<SkeletonText lines={3} data-testid="skeleton-text" />)
-    const container = screen.getByTestId("skeleton-text")
-    const lastLine = container.children[2]
-    expect(lastLine).toHaveClass("w-4/5")
+    const lines = Array.from(screen.getByTestId("skeleton-text").children)
+    for (const line of lines) expect(line).toHaveClass("h-4", "w-full")
+  })
+
+  it("stacks lines 8px apart", () => {
+    render(<SkeletonText data-testid="skeleton-text" />)
+    expect(screen.getByTestId("skeleton-text")).toHaveClass("flex", "flex-col", "gap-2")
   })
 
-  it("single line is full width", () => {
-    render(<SkeletonText lines={1} data-testid="skeleton-text" />)
+  it("passes animate to every line", () => {
+    render(<SkeletonText animate={false} data-testid="skeleton-text" />)
+    const lines = Array.from(screen.getByTestId("skeleton-text").children)
+    for (const line of lines) expect(line).not.toHaveClass("motion-safe:animate-pulse")
+  })
+
+  it("keeps animate and variant off the DOM", () => {
+    render(<SkeletonText animate variant="circular" data-testid="skeleton-text" />)
     const container = screen.getByTestId("skeleton-text")
-    const line = container.children[0]
-    expect(line).toHaveClass("w-full")
+    expect(container).not.toHaveAttribute("animate")
+    expect(container).not.toHaveAttribute("variant")
+  })
+
+  it("keeps variant off the DOM in the list item and card too", () => {
+    render(
+      <>
+        <SkeletonListItem variant="circular" data-testid="list-item" />
+        <SkeletonCard variant="circular" data-testid="card" />
+      </>
+    )
+    expect(screen.getByTestId("list-item")).not.toHaveAttribute("variant")
+    expect(screen.getByTestId("card")).not.toHaveAttribute("variant")
   })
 })
 
@@ -73,32 +126,63 @@ describe("SkeletonAvatar", () => {
     expect(screen.getByTestId("skeleton-avatar")).toHaveClass("rounded-full")
   })
 
-  it("renders with default size", () => {
+  it("renders at 48px by default", () => {
     render(<SkeletonAvatar data-testid="skeleton-avatar" />)
-    expect(screen.getByTestId("skeleton-avatar")).toHaveClass("h-10", "w-10")
+    expect(screen.getByTestId("skeleton-avatar")).toHaveClass("h-12", "w-12")
   })
 
   it("accepts custom className to override size", () => {
     render(<SkeletonAvatar className="h-16 w-16" data-testid="skeleton-avatar" />)
-    expect(screen.getByTestId("skeleton-avatar")).toHaveClass("h-16", "w-16")
+    const avatar = screen.getByTestId("skeleton-avatar")
+    expect(avatar).toHaveClass("h-16", "w-16")
+    expect(avatar).not.toHaveClass("h-12", "w-12")
+  })
+})
+
+describe("SkeletonListItem", () => {
+  it("puts the avatar first, then the lines, 16px apart", () => {
+    render(<SkeletonListItem data-testid="skeleton-list-item" />)
+    const row = screen.getByTestId("skeleton-list-item")
+    expect(row).toHaveClass("flex", "items-center", "gap-4")
+    expect(row.children[0]).toHaveClass("rounded-full", "h-12", "w-12")
+    expect(row.children[1]!.children).toHaveLength(2)
+  })
+
+  it("accepts lines", () => {
+    render(<SkeletonListItem lines={3} data-testid="skeleton-list-item" />)
+    expect(screen.getByTestId("skeleton-list-item").children[1]!.children).toHaveLength(3)
+  })
+
+  it("passes animate to every block", () => {
+    const { container } = render(<SkeletonListItem animate={false} />)
+    expect(container.querySelectorAll('[data-slot="skeleton"]')).toHaveLength(3)
+    expect(container.querySelectorAll(".motion-safe\\:animate-pulse")).toHaveLength(0)
+  })
+
+  it("is hidden from assistive technology", () => {
+    render(<SkeletonListItem data-testid="skeleton-list-item" />)
+    expect(screen.getByTestId("skeleton-list-item")).toHaveAttribute("aria-hidden", "true")
   })
 })
 
 describe("SkeletonCard", () => {
-  it("renders a card container", () => {
+  it("has no card surface of its own", () => {
     render(<SkeletonCard data-testid="skeleton-card" />)
-    expect(screen.getByTestId("skeleton-card")).toHaveClass("rounded-xl", "border", "bg-card", "shadow")
+    const card = screen.getByTestId("skeleton-card")
+    expect(card).toHaveClass("flex", "flex-col", "gap-4")
+    expect(card).not.toHaveClass("border", "bg-card", "shadow")
   })
 
-  it("contains an avatar skeleton", () => {
-    const { container } = render(<SkeletonCard />)
-    const avatars = container.querySelectorAll(".rounded-full")
-    expect(avatars.length).toBeGreaterThan(0)
+  it("puts a 122px media block above 2 lines", () => {
+    render(<SkeletonCard data-testid="skeleton-card" />)
+    const card = screen.getByTestId("skeleton-card")
+    expect(card.children[0]).toHaveClass("h-[122px]", "w-full", "rounded")
+    expect(card.children[1]!.children).toHaveLength(2)
   })
 
-  it("contains text skeletons", () => {
-    const { container } = render(<SkeletonCard />)
-    const skeletons = container.querySelectorAll(".animate-pulse")
-    expect(skeletons.length).toBeGreaterThan(0)
+  it("passes animate to every block", () => {
+    const { container } = render(<SkeletonCard animate={false} />)
+    expect(container.querySelectorAll('[data-slot="skeleton"]')).toHaveLength(3)
+    expect(container.querySelectorAll(".motion-safe\\:animate-pulse")).toHaveLength(0)
   })
 })

package/registry/ui/skeleton/skeleton.tsx

@@ -1,6 +1,26 @@
 import * as React from "react"
 import { cn } from "../../../src/lib/utils"
 
+/**
+ * Skeleton — a loading placeholder that stands in for content until it arrives.
+ *
+ * Matches the Figma set (Skeleton, `15120:8056`):
+ * - every block is `secondary`, the token Figma binds (`theme/secondary`),
+ *   solid rather than a tint, so it reads the same on any surface;
+ * - bars are 16px tall with a 4px radius, stacked 8px apart;
+ * - the list item puts a 48px circle 16px before its lines;
+ * - the card puts a 122px media block 16px above its lines.
+ *
+ * Blocks are decorative, so each is `aria-hidden`. Announce loading on the
+ * region that is loading instead, with `aria-busy="true"`.
+ *
+ * The pulse is Tailwind's built-in `animate-pulse`, behind `motion-safe:`, so
+ * it stops when the user has asked for reduced motion.
+ *
+ * Every composition lays out with flex and logical order only, so in RTL the
+ * circle moves to the inline start (the right) with no `rtl:` overrides.
+ */
+
 export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
   /** The shape of the skeleton */
   variant?: "default" | "circular" | "rectangular"
@@ -8,18 +28,20 @@ export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
   animate?: boolean
 }
 
-function Skeleton({
-  className,
-  variant = "default",
-  animate = true,
-  ...props
-}: SkeletonProps) {
-  return (
+/**
+ * A single block. A drop-in replacement for shadcn's Skeleton: size it with
+ * `className`, such as `h-4 w-48`.
+ */
+const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(
+  ({ className, variant = "default", animate = true, ...props }, ref) => (
     <div
+      ref={ref}
+      data-slot="skeleton"
+      aria-hidden="true"
       className={cn(
-        "bg-primary/10",
-        animate && "animate-pulse",
-        variant === "default" && "rounded-md",
+        "bg-secondary",
+        animate && "motion-safe:animate-pulse",
+        variant === "default" && "rounded",
         variant === "circular" && "rounded-full",
         variant === "rectangular" && "rounded-none",
         className
@@ -27,62 +49,100 @@ function Skeleton({
       {...props}
     />
   )
+)
+Skeleton.displayName = "Skeleton"
+
+/** Props for the compositions: `animate` reaches every block inside. */
+type SkeletonGroupProps = SkeletonProps & {
+  /** Number of text lines */
+  lines?: number
+}
+
+/**
+ * A group has no shape of its own, so `variant` is taken out of its props and
+ * never reaches the DOM. The parameter's rest pattern makes the copy.
+ */
+function withoutVariant({ ...props }: SkeletonProps): React.HTMLAttributes<HTMLDivElement> {
+  delete props.variant
+  return props
 }
 
-/** Pre-built skeleton for text lines */
+/** Pre-built skeleton for text lines. Every line is full width, as in Figma. */
 function SkeletonText({
   className,
-  lines = 3,
+  lines = 2,
+  animate = true,
   ...props
-}: SkeletonProps & { lines?: number }) {
+}: SkeletonGroupProps) {
   return (
-    <div className={cn("space-y-2", className)} {...props}>
+    <div
+      data-slot="skeleton-text"
+      aria-hidden="true"
+      className={cn("flex flex-col gap-2", className)}
+      {...withoutVariant(props)}
+    >
       {Array.from({ length: lines }).map((_, i) => (
-        <Skeleton
-          key={i}
-          className={cn(
-            "h-4",
-            i === lines - 1 && lines > 1 ? "w-4/5" : "w-full"
-          )}
-        />
+        <Skeleton key={i} animate={animate} className="h-4 w-full" />
       ))}
     </div>
   )
 }
 
-/** Pre-built skeleton for avatars */
+/** Pre-built skeleton for avatars: a 48px circle. */
 function SkeletonAvatar({ className, ...props }: SkeletonProps) {
   return (
     <Skeleton
       variant="circular"
-      className={cn("h-10 w-10", className)}
+      className={cn("h-12 w-12 shrink-0", className)}
       {...props}
     />
   )
 }
 
-/** Pre-built skeleton for cards */
-function SkeletonCard({ className, ...props }: SkeletonProps) {
+/**
+ * Pre-built skeleton for a list row: an avatar at the inline start, then text
+ * lines filling the rest. For lists, comments and profile rows.
+ */
+function SkeletonListItem({
+  className,
+  lines = 2,
+  animate = true,
+  ...props
+}: SkeletonGroupProps) {
+  return (
+    <div
+      data-slot="skeleton-list-item"
+      aria-hidden="true"
+      className={cn("flex items-center gap-4", className)}
+      {...withoutVariant(props)}
+    >
+      <SkeletonAvatar animate={animate} />
+      <SkeletonText lines={lines} animate={animate} className="min-w-0 flex-1" />
+    </div>
+  )
+}
+
+/**
+ * Pre-built skeleton for cards: a media block above text lines. It has no
+ * border or background of its own, so it can sit inside a real Card.
+ */
+function SkeletonCard({
+  className,
+  lines = 2,
+  animate = true,
+  ...props
+}: SkeletonGroupProps) {
   return (
     <div
-      className={cn(
-        "rounded-xl border bg-card p-6 shadow",
-        className
-      )}
-      {...props}
+      data-slot="skeleton-card"
+      aria-hidden="true"
+      className={cn("flex flex-col gap-4", className)}
+      {...withoutVariant(props)}
     >
-      <div className="flex items-center space-x-4">
-        <SkeletonAvatar />
-        <div className="space-y-2 flex-1">
-          <Skeleton className="h-4 w-1/2" />
-          <Skeleton className="h-3 w-1/4" />
-        </div>
-      </div>
-      <div className="mt-4">
-        <SkeletonText lines={3} />
-      </div>
+      <Skeleton animate={animate} className="h-[122px] w-full" />
+      <SkeletonText lines={lines} animate={animate} />
     </div>
   )
 }
 
-export { Skeleton, SkeletonText, SkeletonAvatar, SkeletonCard }
+export { Skeleton, SkeletonText, SkeletonAvatar, SkeletonListItem, SkeletonCard }

package/registry/ui/status-indicator/index.ts

@@ -0,0 +1,6 @@
+export {
+  StatusIndicator,
+  statusIndicatorVariants,
+  STATUS_LABELS,
+  type StatusIndicatorProps,
+} from "./status-indicator"