@cl-light-ds/ui 0.1.0 → 0.2.0

package/src/components/navigation-menu/NavigationMenuContent.astro

@@ -1,37 +1,37 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-interface Props extends HTMLAttributes<"div"> {
-  class?: string;
-  align?: "start" | "center" | "end";
-  alignOffset?: number;
-  side?: "top" | "bottom";
-  sideOffset?: number;
-}
-
-const {
-  class: className = "",
-  align,
-  alignOffset,
-  side,
-  sideOffset = 6,
-  ...rest
-} = Astro.props as Props;
----
-
-<div
-  {...rest}
-  data-slot="navigation-menu-content"
-  data-align={align}
-  data-align-offset={alignOffset}
-  data-side={side}
-  data-side-offset={sideOffset}
-  hidden
-  class={cn(
-    "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:border-border p-2 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:shadow-[0px_1px_1px_0px_rgba(5,23,41,0.06)] group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:duration-300 data-[ending-style]:data-[activation-direction=left]:translate-x-[50%] data-[ending-style]:data-[activation-direction=right]:translate-x-[-50%] data-[starting-style]:data-[activation-direction=left]:translate-x-[-50%] data-[starting-style]:data-[activation-direction=right]:translate-x-[50%] h-full w-auto transition-[opacity,transform,translate] duration-200 ease data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
-    className,
-  )}
->
-  <slot />
-</div>
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"div"> {
+  class?: string;
+  align?: "start" | "center" | "end";
+  alignOffset?: number;
+  side?: "top" | "bottom";
+  sideOffset?: number;
+}
+
+const {
+  class: className = "",
+  align,
+  alignOffset,
+  side,
+  sideOffset = 6,
+  ...rest
+} = Astro.props as Props;
+---
+
+<div
+  {...rest}
+  data-slot="navigation-menu-content"
+  data-align={align}
+  data-align-offset={alignOffset}
+  data-side={side}
+  data-side-offset={sideOffset}
+  hidden
+  class={cn(
+    "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:border-border p-2 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:shadow-[0px_1px_1px_0px_rgba(5,23,41,0.06)] group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:duration-300 data-[ending-style]:data-[activation-direction=left]:translate-x-[50%] data-[ending-style]:data-[activation-direction=right]:translate-x-[-50%] data-[starting-style]:data-[activation-direction=left]:translate-x-[-50%] data-[starting-style]:data-[activation-direction=right]:translate-x-[50%] h-full w-auto transition-[opacity,transform,translate] duration-200 ease data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
+    className,
+  )}
+>
+  <slot />
+</div>

package/src/components/navigation-menu/NavigationMenuIndicator.astro

@@ -1,24 +1,24 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-interface Props extends HTMLAttributes<"div"> {
-  class?: string;
-}
-
-const { class: className = "", ...rest } = Astro.props as Props;
----
-
-<div
-  {...rest}
-  data-slot="navigation-menu-indicator"
-  class={cn(
-    "rounded-md data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in absolute left-0 top-0 z-0 pointer-events-none opacity-0 transition-[translate,width,height,opacity] duration-150 ease data-instant:transition-none data-[state=visible]:opacity-100",
-    "translate-x-(--indicator-left,0px) translate-y-(--indicator-top,0px)",
-    "w-(--indicator-width,0) h-(--indicator-height,0)",
-    className,
-  )}
->
-  <div class="bg-muted/60 ring-border/40 ring-1 absolute inset-0 rounded-[inherit]"></div>
-  <div class="hidden bg-border rounded-tl-sm shadow-md absolute top-full left-1/2 h-2 w-2 -translate-x-1/2 -translate-y-[40%] rotate-45"></div>
-</div>
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"div"> {
+  class?: string;
+}
+
+const { class: className = "", ...rest } = Astro.props as Props;
+---
+
+<div
+  {...rest}
+  data-slot="navigation-menu-indicator"
+  class={cn(
+    "rounded-md data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in absolute left-0 top-0 z-0 pointer-events-none opacity-0 transition-[translate,width,height,opacity] duration-150 ease data-instant:transition-none data-[state=visible]:opacity-100",
+    "translate-x-(--indicator-left,0px) translate-y-(--indicator-top,0px)",
+    "w-(--indicator-width,0) h-(--indicator-height,0)",
+    className,
+  )}
+>
+  <div class="bg-muted/60 ring-border/40 ring-1 absolute inset-0 rounded-[inherit]"></div>
+  <div class="hidden bg-border rounded-tl-sm shadow-md absolute top-full left-1/2 h-2 w-2 -translate-x-1/2 -translate-y-[40%] rotate-45"></div>
+</div>

package/src/components/navigation-menu/NavigationMenuItem.astro

@@ -1,22 +1,22 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-interface Props extends HTMLAttributes<"li"> {
-  class?: string;
-  value?: string;
-  align?: "start" | "center" | "end";
-}
-
-const { class: className = "", value, align, ...rest } = Astro.props as Props;
----
-
-<li
-  {...rest}
-  data-slot="navigation-menu-item"
-  data-value={value}
-  data-align={align}
-  class={cn("relative z-10", className)}
->
-  <slot />
-</li>
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"li"> {
+  class?: string;
+  value?: string;
+  align?: "start" | "center" | "end";
+}
+
+const { class: className = "", value, align, ...rest } = Astro.props as Props;
+---
+
+<li
+  {...rest}
+  data-slot="navigation-menu-item"
+  data-value={value}
+  data-align={align}
+  class={cn("relative z-10", className)}
+>
+  <slot />
+</li>

package/src/components/navigation-menu/NavigationMenuLink.astro

@@ -1,18 +1,18 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-interface Props extends HTMLAttributes<"a"> {
-  class?: string;
-}
-
-const { class: className = "", ...rest } = Astro.props as Props;
----
-
-<a
-  {...rest}
-  data-slot="navigation-menu-link"
-  class={cn("data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-start gap-4 rounded-lg p-3 text-sm transition-all outline-none focus-visible:ring-3 focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4", className)}
->
-  <slot />
-</a>
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"a"> {
+  class?: string;
+}
+
+const { class: className = "", ...rest } = Astro.props as Props;
+---
+
+<a
+  {...rest}
+  data-slot="navigation-menu-link"
+  class={cn("data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-start gap-4 rounded-lg p-3 text-sm transition-all outline-none focus-visible:ring-3 focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4", className)}
+>
+  <slot />
+</a>

package/src/components/navigation-menu/NavigationMenuList.astro

@@ -1,21 +1,21 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-interface Props extends HTMLAttributes<"ul"> {
-  class?: string;
-}
-
-const { class: className = "", ...rest } = Astro.props as Props;
----
-
-<ul
-  {...rest}
-  data-slot="navigation-menu-list"
-  class={cn(
-    "gap-0 group flex flex-1 list-none items-center justify-center relative",
-    className,
-  )}
->
-  <slot />
-</ul>
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"ul"> {
+  class?: string;
+}
+
+const { class: className = "", ...rest } = Astro.props as Props;
+---
+
+<ul
+  {...rest}
+  data-slot="navigation-menu-list"
+  class={cn(
+    "gap-0 group flex flex-1 list-none items-center justify-center relative",
+    className,
+  )}
+>
+  <slot />
+</ul>

package/src/components/navigation-menu/NavigationMenuPositioner.astro

@@ -1,44 +1,44 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import NavigationMenuViewport from "./NavigationMenuViewport.astro";
-
-interface Props extends HTMLAttributes<"div"> {
-  class?: string;
-  align?: "start" | "center" | "end";
-  alignOffset?: number;
-  side?: "top" | "bottom";
-  sideOffset?: number;
-}
-
-const {
-  class: className = "",
-  side = "bottom",
-  sideOffset = 8,
-  align = "start",
-  alignOffset = 0,
-  ...rest
-} = Astro.props as Props;
----
-
-<div data-slot="navigation-menu-portal">
-  <div
-    {...rest}
-    data-slot="navigation-menu-positioner"
-    data-side={side}
-    data-side-offset={sideOffset}
-    data-align={align}
-    data-align-offset={alignOffset}
-    class={cn(
-      "transition-[top,left,right,bottom] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) duration-[0.35s] data-instant:transition-none",
-      className,
-    )}
-  >
-    <div
-      data-slot="navigation-menu-popup"
-      class="bg-popover text-popover-foreground border border-border rounded-lg shadow-[0px_1px_1px_0px_rgba(5,23,41,0.06)] transition-all ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:scale-90 data-starting-style:opacity-0 data-[ending-style]:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) transition-[opacity,transform,width,height,scale,translate] duration-[0.35s]"
-    >
-      <NavigationMenuViewport />
-    </div>
-  </div>
-</div>
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import NavigationMenuViewport from "./NavigationMenuViewport.astro";
+
+interface Props extends HTMLAttributes<"div"> {
+  class?: string;
+  align?: "start" | "center" | "end";
+  alignOffset?: number;
+  side?: "top" | "bottom";
+  sideOffset?: number;
+}
+
+const {
+  class: className = "",
+  side = "bottom",
+  sideOffset = 8,
+  align = "start",
+  alignOffset = 0,
+  ...rest
+} = Astro.props as Props;
+---
+
+<div data-slot="navigation-menu-portal">
+  <div
+    {...rest}
+    data-slot="navigation-menu-positioner"
+    data-side={side}
+    data-side-offset={sideOffset}
+    data-align={align}
+    data-align-offset={alignOffset}
+    class={cn(
+      "transition-[top,left,right,bottom] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) duration-[0.35s] data-instant:transition-none",
+      className,
+    )}
+  >
+    <div
+      data-slot="navigation-menu-popup"
+      class="bg-popover text-popover-foreground border border-border rounded-lg shadow-[0px_1px_1px_0px_rgba(5,23,41,0.06)] transition-all ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:scale-90 data-starting-style:opacity-0 data-[ending-style]:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) transition-[opacity,transform,width,height,scale,translate] duration-[0.35s]"
+    >
+      <NavigationMenuViewport />
+    </div>
+  </div>
+</div>

package/src/components/navigation-menu/NavigationMenuTrigger.astro

@@ -1,30 +1,30 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cva } from "class-variance-authority";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-interface Props extends HTMLAttributes<"button"> {
-  class?: string;
-}
-
-export const navigationMenuTriggerStyle = cva(
-  "bg-background text-foreground hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-lg gap-1.5 px-4 py-2.5 text-base font-medium transition-all focus-visible:ring-3 focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-11 w-max items-center justify-center outline-none disabled:pointer-events-none",
-);
-
-const {
-  class: className = "",
-  type = "button",
-  ...rest
-} = Astro.props as Props;
----
-
-<button
-  {...rest}
-  data-slot="navigation-menu-trigger"
-  type={type}
-  class={cn(navigationMenuTriggerStyle(), "group", className)}
->
-  <slot />
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="relative top-px size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180"
-    aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9l6 6l6-6"/></svg>
-</button>
+---
+import type { HTMLAttributes } from "astro/types";
+import { cva } from "class-variance-authority";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"button"> {
+  class?: string;
+}
+
+export const navigationMenuTriggerStyle = cva(
+  "bg-background text-foreground hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-lg gap-1.5 px-4 py-2.5 text-base font-medium transition-all focus-visible:ring-3 focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-11 w-max items-center justify-center outline-none disabled:pointer-events-none",
+);
+
+const {
+  class: className = "",
+  type = "button",
+  ...rest
+} = Astro.props as Props;
+---
+
+<button
+  {...rest}
+  data-slot="navigation-menu-trigger"
+  type={type}
+  class={cn(navigationMenuTriggerStyle(), "group", className)}
+>
+  <slot />
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="relative top-px size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180"
+    aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9l6 6l6-6"/></svg>
+</button>

package/src/components/navigation-menu/NavigationMenuViewport.astro

@@ -1,19 +1,19 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-interface Props extends HTMLAttributes<"div"> {
-  class?: string;
-}
-
-const { class: className = "", ...rest } = Astro.props as Props;
----
-
-<div
-  {...rest}
-  data-slot="navigation-menu-viewport"
-  class={cn(
-    "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:zoom-out-90 data-open:zoom-in-90 border border-border rounded-lg shadow-[0px_1px_1px_0px_rgba(5,23,41,0.06)] duration-100 relative size-full overflow-hidden",
-    className,
-  )}
-></div>
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"div"> {
+  class?: string;
+}
+
+const { class: className = "", ...rest } = Astro.props as Props;
+---
+
+<div
+  {...rest}
+  data-slot="navigation-menu-viewport"
+  class={cn(
+    "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:zoom-out-90 data-open:zoom-in-90 border border-border rounded-lg shadow-[0px_1px_1px_0px_rgba(5,23,41,0.06)] duration-100 relative size-full overflow-hidden",
+    className,
+  )}
+></div>

package/src/components/popover/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
-All notable changes to the `Popover` component will be documented in this file.
+All notable changes to the `Popover` component family (`Popover`, `PopoverTrigger`, `PopoverContent`, `PopoverHeader`, `PopoverTitle`, `PopoverDescription`, `PopoverClose`) are documented in this file.
 
-## Unreleased
+## 2026-09-18 — Figma alignment (ClickLearn Lightning Design Library, node `5548-11795`)
+
+Figma documents Popover across two pages: Items (the trigger button's Default/Hover/Pressed/Focus/Disabled states) and the expanded popover (12 Side × Alignment combinations, all sharing the same panel styling).
+
+### Fixed
+
+- Added the missing `@figmaUrl` (this component never had one).
+- `PopoverContent`: replaced the `ring-1 ring-foreground/10` border approximation with a real `border border-border`, and `shadow-md` → `shadow-lg` — matching Figma's tokens (`border` = `#e4e4e7`, a named `shadow-lg`), same category of fix already made to `DialogContent`/`HoverCardContent`.
+- `PopoverContent`: removed a dead, redundant raw class string duplicating most of `contentVariants()` — same class of bug already fixed on `HoverCardContent`. It also carried two genuinely dead selectors, `data-[side=inline-start]:...`/`data-[side=inline-end]:...`, which the underlying `@data-slot/popover` behavior library never actually sets (confirmed by checking its source — it only ever sets physical `top`/`bottom`/`left`/`right`, matching the component's own `side` prop type). Also removed the dead `rounded-md` (a later `rounded-lg` always won anyway) and a `duration-100`/`duration-150` conflict (150ms was already winning).
+- `PopoverHeader`: `gap-1` (4px) → `gap-0.5` (2px) between `PopoverTitle`/`PopoverDescription`, matching Figma's measured 2px gap.
+- `PopoverTrigger`: now defaults to `variant="outline"` instead of inheriting `Button`'s own `default` (solid primary) variant — Figma's Default trigger state is a bordered/light button, matching outline exactly, and every existing usage example already passed `variant="outline"` explicitly. Visually a no-op for existing usages; makes new usages match the documented default without needing to repeat the prop.
+
+### Notes
+
+- The trigger's Hover/Pressed/Focus/Disabled states are entirely `Button`'s own responsibility (`PopoverTrigger` just renders a `Button`) — already verified correct in earlier passes, no changes needed here.
+- `bg-popover`/`text-popover-foreground`, `p-4`, and `rounded-lg` already matched Figma's tokens exactly.