@cl-light-ds/ui 0.2.0 → 0.4.0

package/src/components/field/FieldContent.astro

@@ -1,20 +1,20 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-interface Props extends HTMLAttributes<"div"> {}
-
-const { class: className = "", ...rest } = Astro.props as Props;
----
-
-<div
-  data-slot="field-content"
-  class={cn(
-    "gap-1",
-    "gap-0.5 group/field-content flex flex-1 flex-col leading-snug",
-    className,
-  )}
-  {...rest}
->
-  <slot />
-</div>
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"div"> {}
+
+const { class: className = "", ...rest } = Astro.props as Props;
+---
+
+<div
+  data-slot="field-content"
+  class={cn(
+    "gap-1",
+    "gap-0.5 group/field-content flex flex-1 flex-col leading-snug",
+    className,
+  )}
+  {...rest}
+>
+  <slot />
+</div>

package/src/components/field/FieldDescription.astro

@@ -1,22 +1,22 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-interface Props extends HTMLAttributes<"p"> {}
-
-const { class: className = "", ...rest } = Astro.props as Props;
----
-
-<p
-  data-slot="field-description"
-  class={cn(
-    "text-muted-foreground text-left text-sm [[data-variant=legend]+&]:-mt-1.5",
-    "leading-normal font-normal group-has-data-horizontal/field:text-balance",
-    "last:mt-0 nth-last-2:-mt-1",
-    "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
-    className,
-  )}
-  {...rest}
->
-  <slot />
-</p>
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"p"> {}
+
+const { class: className = "", ...rest } = Astro.props as Props;
+---
+
+<p
+  data-slot="field-description"
+  class={cn(
+    "text-muted-foreground text-left text-sm [[data-variant=legend]+&]:-mt-1.5",
+    "leading-normal font-normal group-has-data-horizontal/field:text-balance",
+    "last:mt-0 nth-last-2:-mt-1",
+    "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+    className,
+  )}
+  {...rest}
+>
+  <slot />
+</p>

package/src/components/field/FieldError.astro

@@ -1,51 +1,51 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-type ErrorItem = { message?: string } | undefined;
-
-interface Props extends HTMLAttributes<"div"> {
-  errors?: ErrorItem[];
-  forceMount?: boolean;
-}
-
-const {
-  class: className = "",
-  errors = [],
-  forceMount = false,
-  ...rest
-} = Astro.props as Props;
-
-const hasContent = Astro.slots.has("default");
-
-const uniqueMessages = Array.from(
-  new Set(
-    errors
-      .map((error) => error?.message)
-      .filter((message): message is string => Boolean(message)),
-  ),
-);
-
-const shouldRender = forceMount || hasContent || uniqueMessages.length > 0;
----
-
-{
-  shouldRender && (
-    <div
-      role="alert"
-      data-slot="field-error"
-      class={cn("text-destructive text-sm font-normal", className)}
-      {...rest}
-    >
-      {hasContent && <slot />}
-      {!hasContent && uniqueMessages.length === 1 && uniqueMessages[0]}
-      {!hasContent && uniqueMessages.length > 1 && (
-        <ul class="ml-4 flex list-disc flex-col gap-1">
-          {uniqueMessages.map((message) => (
-            <li>{message}</li>
-          ))}
-        </ul>
-      )}
-    </div>
-  )
-}
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+type ErrorItem = { message?: string } | undefined;
+
+interface Props extends HTMLAttributes<"div"> {
+  errors?: ErrorItem[];
+  forceMount?: boolean;
+}
+
+const {
+  class: className = "",
+  errors = [],
+  forceMount = false,
+  ...rest
+} = Astro.props as Props;
+
+const hasContent = Astro.slots.has("default");
+
+const uniqueMessages = Array.from(
+  new Set(
+    errors
+      .map((error) => error?.message)
+      .filter((message): message is string => Boolean(message)),
+  ),
+);
+
+const shouldRender = forceMount || hasContent || uniqueMessages.length > 0;
+---
+
+{
+  shouldRender && (
+    <div
+      role="alert"
+      data-slot="field-error"
+      class={cn("text-destructive text-sm font-normal", className)}
+      {...rest}
+    >
+      {hasContent && <slot />}
+      {!hasContent && uniqueMessages.length === 1 && uniqueMessages[0]}
+      {!hasContent && uniqueMessages.length > 1 && (
+        <ul class="ml-4 flex list-disc flex-col gap-1">
+          {uniqueMessages.map((message) => (
+            <li>{message}</li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}

package/src/components/field/FieldGroup.astro

@@ -1,20 +1,20 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-interface Props extends HTMLAttributes<"div"> {}
-
-const { class: className = "", ...rest } = Astro.props as Props;
----
-
-<div
-  data-slot="field-group"
-  class={cn(
-    "gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4",
-    "group/field-group @container/field-group flex w-full flex-col",
-    className,
-  )}
-  {...rest}
->
-  <slot />
-</div>
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"div"> {}
+
+const { class: className = "", ...rest } = Astro.props as Props;
+---
+
+<div
+  data-slot="field-group"
+  class={cn(
+    "gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4",
+    "group/field-group @container/field-group flex w-full flex-col",
+    className,
+  )}
+  {...rest}
+>
+  <slot />
+</div>

package/src/components/field/FieldLabel.astro

@@ -1,22 +1,22 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import { Label } from "../label";
-
-interface Props extends HTMLAttributes<"label"> {}
-
-const { class: className = "", ...rest } = Astro.props as Props;
----
-
-<Label
-  data-slot="field-label"
-  class={cn(
-    "has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border *:data-[slot=field]:p-3",
-    "group/field-label peer/field-label flex w-fit leading-snug",
-    "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
-    className,
-  )}
-  {...rest}
->
-  <slot />
-</Label>
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import { Label } from "../label";
+
+interface Props extends HTMLAttributes<"label"> {}
+
+const { class: className = "", ...rest } = Astro.props as Props;
+---
+
+<Label
+  data-slot="field-label"
+  class={cn(
+    "has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border *:data-[slot=field]:p-3",
+    "group/field-label peer/field-label flex w-fit leading-snug",
+    "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
+    className,
+  )}
+  {...rest}
+>
+  <slot />
+</Label>

package/src/components/field/FieldLegend.astro

@@ -1,23 +1,23 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-interface Props extends HTMLAttributes<"legend"> {
-  variant?: "legend" | "label";
-}
-
-const {
-  class: className = "",
-  variant = "legend",
-  ...rest
-} = Astro.props as Props;
----
-
-<legend
-  data-slot="field-legend"
-  data-variant={variant}
-  class={cn("mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base", className)}
-  {...rest}
->
-  <slot />
-</legend>
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"legend"> {
+  variant?: "legend" | "label";
+}
+
+const {
+  class: className = "",
+  variant = "legend",
+  ...rest
+} = Astro.props as Props;
+---
+
+<legend
+  data-slot="field-legend"
+  data-variant={variant}
+  class={cn("mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base", className)}
+  {...rest}
+>
+  <slot />
+</legend>

package/src/components/field/FieldSeparator.astro

@@ -1,30 +1,30 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import { Separator } from "../separator";
-
-interface Props extends HTMLAttributes<"div"> {}
-
-const { class: className = "", ...rest } = Astro.props as Props;
-
-const hasContent = Astro.slots.has("default");
----
-
-<div
-  data-slot="field-separator"
-  data-content={hasContent ? "true" : undefined}
-  class={cn("-my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2 relative", className)}
-  {...rest}
->
-  <Separator class="absolute inset-0 top-1/2" />
-  {
-    hasContent && (
-      <span
-        class="text-muted-foreground px-2 relative mx-auto block w-fit bg-background"
-        data-slot="field-separator-content"
-      >
-        <slot />
-      </span>
-    )
-  }
-</div>
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import { Separator } from "../separator";
+
+interface Props extends HTMLAttributes<"div"> {}
+
+const { class: className = "", ...rest } = Astro.props as Props;
+
+const hasContent = Astro.slots.has("default");
+---
+
+<div
+  data-slot="field-separator"
+  data-content={hasContent ? "true" : undefined}
+  class={cn("-my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2 relative", className)}
+  {...rest}
+>
+  <Separator class="absolute inset-0 top-1/2" />
+  {
+    hasContent && (
+      <span
+        class="text-muted-foreground px-2 relative mx-auto block w-fit bg-background"
+        data-slot="field-separator-content"
+      >
+        <slot />
+      </span>
+    )
+  }
+</div>

package/src/components/field/FieldSet.astro

@@ -1,20 +1,20 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-interface Props extends HTMLAttributes<"fieldset"> {}
-
-const { class: className = "", ...rest } = Astro.props as Props;
----
-
-<fieldset
-  data-slot="field-set"
-  class={cn(
-    "gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
-    "gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col",
-    className,
-  )}
-  {...rest}
->
-  <slot />
-</fieldset>
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"fieldset"> {}
+
+const { class: className = "", ...rest } = Astro.props as Props;
+---
+
+<fieldset
+  data-slot="field-set"
+  class={cn(
+    "gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+    "gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col",
+    className,
+  )}
+  {...rest}
+>
+  <slot />
+</fieldset>

package/src/components/field/FieldTitle.astro

@@ -1,20 +1,20 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-interface Props extends HTMLAttributes<"div"> {}
-
-const { class: className = "", ...rest } = Astro.props as Props;
----
-
-<div
-  data-slot="field-title"
-  class={cn(
-    "gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50",
-    "flex w-fit items-center leading-snug",
-    className,
-  )}
-  {...rest}
->
-  <slot />
-</div>
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"div"> {}
+
+const { class: className = "", ...rest } = Astro.props as Props;
+---
+
+<div
+  data-slot="field-title"
+  class={cn(
+    "gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50",
+    "flex w-fit items-center leading-snug",
+    className,
+  )}
+  {...rest}
+>
+  <slot />
+</div>

package/src/components/field/index.ts

@@ -1,10 +1,10 @@
-export { default as Field } from "./Field.astro";
-export { default as FieldContent } from "./FieldContent.astro";
-export { default as FieldDescription } from "./FieldDescription.astro";
-export { default as FieldError } from "./FieldError.astro";
-export { default as FieldGroup } from "./FieldGroup.astro";
-export { default as FieldLabel } from "./FieldLabel.astro";
-export { default as FieldLegend } from "./FieldLegend.astro";
-export { default as FieldSeparator } from "./FieldSeparator.astro";
-export { default as FieldSet } from "./FieldSet.astro";
-export { default as FieldTitle } from "./FieldTitle.astro";
+export { default as Field } from "./Field.astro";
+export { default as FieldContent } from "./FieldContent.astro";
+export { default as FieldDescription } from "./FieldDescription.astro";
+export { default as FieldError } from "./FieldError.astro";
+export { default as FieldGroup } from "./FieldGroup.astro";
+export { default as FieldLabel } from "./FieldLabel.astro";
+export { default as FieldLegend } from "./FieldLegend.astro";
+export { default as FieldSeparator } from "./FieldSeparator.astro";
+export { default as FieldSet } from "./FieldSet.astro";
+export { default as FieldTitle } from "./FieldTitle.astro";

package/src/components/hover-card/CHANGELOG.md

@@ -1,20 +1,20 @@
-# Changelog
-
-All notable changes to the `HoverCard` component family (`HoverCard`, `HoverCardTrigger`, `HoverCardContent`) are documented in this file.
-
-## 2026-09-09 — Figma alignment (ClickLearn Lightning Design Library, node `5455-14770`)
-
-Figma shows three content **Variants** (Default, Simple, Avatar) and two **States** (Default, Focus) for the card surface.
-
-### Fixed
-
-- `HoverCardContent`: added the missing `@figmaUrl` to `HoverCard.astro`'s JSDoc (this component had never had one).
-- `HoverCardContent`: replaced the `ring-1 ring-foreground/10` border approximation with a real `border border-border`, and `shadow-md` → `shadow-lg` — matching Figma's spec'd tokens (`--border` = `#e4e4e7`, and a named `shadow-lg` multi-layer drop shadow), the same category of fix already made to `DialogContent` in the previous pass.
-- `HoverCardContent`: added a focus-visible ring (`has-[:focus-visible]:border-ring has-[:focus-visible]:ring-3 has-[:focus-visible]:ring-ring/50`) to match Figma's "Focus" state (`--ring` = `#5f9de6`), using the same `border-ring` + `ring-3 ring-ring/50` idiom already established for Accordion/Checkbox/Dialog. This activates whenever a keyboard-focusable element inside custom `HoverCardContent` children receives focus — none of the current demos happen to place one, so it isn't visually exercised yet, but the capability is now available.
-- `HoverCardContent`: removed a dead, redundant raw class string that duplicated almost the entire `contentVariants()` class list directly on the rendered div — the same class of bug already fixed in `DialogFooter`/`TooltipContent`. It also silently conflicted on `duration-100` vs. `contentVariants()`'s `duration-150`; since `contentVariants()` came later in the `cn()` call, `150ms` was already winning and `100ms` was fully dead code.
-
-### Notes
-
-- Figma's three content variants (Default/Simple/Avatar) are pure content compositions, not distinct props — the existing headless `HoverCardContent` already supports all three via whatever children are passed in (Preview ≈ Default, "With avatar" ≈ Avatar, "Positioning options"/"Custom timing" ≈ Simple). No new props or sub-components added, matching the same call made for Combobox.
-- Typography (bold title, `text-muted-foreground text-xs` meta line) and sizing (`w-64`, `rounded-lg`, `p-3`, avatar `size-10`) already matched Figma's tokens exactly — no changes needed there.
-- No changes to `HoverCardTrigger` — Figma's Focus frame shows only the card, not trigger-specific styling.
+# Changelog
+
+All notable changes to the `HoverCard` component family (`HoverCard`, `HoverCardTrigger`, `HoverCardContent`) are documented in this file.
+
+## 2026-09-09 — Figma alignment (ClickLearn Lightning Design Library, node `5455-14770`)
+
+Figma shows three content **Variants** (Default, Simple, Avatar) and two **States** (Default, Focus) for the card surface.
+
+### Fixed
+
+- `HoverCardContent`: added the missing `@figmaUrl` to `HoverCard.astro`'s JSDoc (this component had never had one).
+- `HoverCardContent`: replaced the `ring-1 ring-foreground/10` border approximation with a real `border border-border`, and `shadow-md` → `shadow-lg` — matching Figma's spec'd tokens (`--border` = `#e4e4e7`, and a named `shadow-lg` multi-layer drop shadow), the same category of fix already made to `DialogContent` in the previous pass.
+- `HoverCardContent`: added a focus-visible ring (`has-[:focus-visible]:border-ring has-[:focus-visible]:ring-3 has-[:focus-visible]:ring-ring/50`) to match Figma's "Focus" state (`--ring` = `#5f9de6`), using the same `border-ring` + `ring-3 ring-ring/50` idiom already established for Accordion/Checkbox/Dialog. This activates whenever a keyboard-focusable element inside custom `HoverCardContent` children receives focus — none of the current demos happen to place one, so it isn't visually exercised yet, but the capability is now available.
+- `HoverCardContent`: removed a dead, redundant raw class string that duplicated almost the entire `contentVariants()` class list directly on the rendered div — the same class of bug already fixed in `DialogFooter`/`TooltipContent`. It also silently conflicted on `duration-100` vs. `contentVariants()`'s `duration-150`; since `contentVariants()` came later in the `cn()` call, `150ms` was already winning and `100ms` was fully dead code.
+
+### Notes
+
+- Figma's three content variants (Default/Simple/Avatar) are pure content compositions, not distinct props — the existing headless `HoverCardContent` already supports all three via whatever children are passed in (Preview ≈ Default, "With avatar" ≈ Avatar, "Positioning options"/"Custom timing" ≈ Simple). No new props or sub-components added, matching the same call made for Combobox.
+- Typography (bold title, `text-muted-foreground text-xs` meta line) and sizing (`w-64`, `rounded-lg`, `p-3`, avatar `size-10`) already matched Figma's tokens exactly — no changes needed there.
+- No changes to `HoverCardTrigger` — Figma's Focus frame shows only the card, not trigger-specific styling.