@cl-light-ds/ui 0.2.0 → 0.3.0

package/src/components/label/CHANGELOG.md

@@ -1,28 +1,28 @@
-# Changelog
-
-All notable changes to the `Label` component will be documented in this file.
-
-## Date 10th Sep 2026
-## Figma alignment (node 7228-1290, prop table 7423-9892)
-
-### Fixed
-
-- Removed a copy-paste duplicate class string passed twice into `cn()`.
-- Dropped `leading-none` on the label text — it collapsed the line-height to 1, whereas Figma's `text/md/md-medium` style specifies a 20px line-height, which Tailwind's `text-sm` already provides by default.
-- Added explicit `text-foreground` for the default-state text color, matching Figma's `var(--foreground)` token (previously relied on ambient inherited color).
-
-### Added
-
-New props, matching Figma's Props Reference table:
-
-- `supportiveText?: string` — optional secondary text rendered below the label.
-- `showSupportiveText?: boolean` (default `false`) — shows the `supportiveText` line when both this and `supportiveText` are set.
-- `showHintIcon?: boolean` (default `false`) — shows a small `CircleQuestionMark` icon (`@lucide/astro`) beside the label text.
-
-Figma's table documents both new booleans defaulting to `true`, but they default to `false` here: defaulting to `true` would have made a hint icon appear next to every existing `<Label>` in the app that doesn't already opt out, since no current usage passes these props. Opt-in keeps every existing call site (including `Checkbox`'s and `FieldLabel`'s compositions) visually unchanged.
-
-The `label` prop documented in Figma's table was intentionally not added — every caller in this repo supplies label text via `<slot />` (e.g. `FieldLabel.astro`), so the slot remains the sole content API.
-
-The new layout (label text + icon row, supportive text below) only applies when `showHintIcon` or `showSupportiveText`+`supportiveText` are actually used (`hasExtras`); otherwise the label renders with the exact same classes as before (`flex items-center gap-2 ...`), so it doesn't disturb consumers that override the root layout themselves (e.g. the side-by-side custom composition in `Checkbox.astro`'s JSDoc preview).
-
-No explicit `disabled` prop was added — disabled styling continues to come from the existing `group-data-[disabled=true]` / `peer-disabled` CSS hooks tied to a sibling control, unchanged.
+# Changelog
+
+All notable changes to the `Label` component will be documented in this file.
+
+## Date 10th Sep 2026
+## Figma alignment (node 7228-1290, prop table 7423-9892)
+
+### Fixed
+
+- Removed a copy-paste duplicate class string passed twice into `cn()`.
+- Dropped `leading-none` on the label text — it collapsed the line-height to 1, whereas Figma's `text/md/md-medium` style specifies a 20px line-height, which Tailwind's `text-sm` already provides by default.
+- Added explicit `text-foreground` for the default-state text color, matching Figma's `var(--foreground)` token (previously relied on ambient inherited color).
+
+### Added
+
+New props, matching Figma's Props Reference table:
+
+- `supportiveText?: string` — optional secondary text rendered below the label.
+- `showSupportiveText?: boolean` (default `false`) — shows the `supportiveText` line when both this and `supportiveText` are set.
+- `showHintIcon?: boolean` (default `false`) — shows a small `CircleQuestionMark` icon (`@lucide/astro`) beside the label text.
+
+Figma's table documents both new booleans defaulting to `true`, but they default to `false` here: defaulting to `true` would have made a hint icon appear next to every existing `<Label>` in the app that doesn't already opt out, since no current usage passes these props. Opt-in keeps every existing call site (including `Checkbox`'s and `FieldLabel`'s compositions) visually unchanged.
+
+The `label` prop documented in Figma's table was intentionally not added — every caller in this repo supplies label text via `<slot />` (e.g. `FieldLabel.astro`), so the slot remains the sole content API.
+
+The new layout (label text + icon row, supportive text below) only applies when `showHintIcon` or `showSupportiveText`+`supportiveText` are actually used (`hasExtras`); otherwise the label renders with the exact same classes as before (`flex items-center gap-2 ...`), so it doesn't disturb consumers that override the root layout themselves (e.g. the side-by-side custom composition in `Checkbox.astro`'s JSDoc preview).
+
+No explicit `disabled` prop was added — disabled styling continues to come from the existing `group-data-[disabled=true]` / `peer-disabled` CSS hooks tied to a sibling control, unchanged.

package/src/components/label/Label.astro

@@ -1,97 +1,97 @@
----
-/**
- * @component Label
- * @title Label
- * @description A text label for form controls.
- * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=7228-1290
- *
- * @preview
- *
- * <div class="flex items-center space-x-2">
- *   <Checkbox id="terms" />
- *   <Label for="terms">Accept terms and conditions</Label>
- * </div>
- *
- * @usage
- *
- * ```astro nocollapse
- * ---
- * import { Label } from '@bejamas/ui/components/label';
- * ---
- *
- * <Label for="terms">Accept terms and conditions</Label>
- * ```
- *
- * @examples
- *
- * ### With supportive text
- *
- * <Label for="first-name" supportiveText="Enter your legal first name" showSupportiveText>
- *   First Name
- * </Label>
- *
- * ### With hint icon
- *
- * <Label for="corporate-id" showHintIcon>Corporate ID</Label>
- *
- * ### With hint icon and supportive text
- *
- * <Label
- *   for="corporate-id-2"
- *   showHintIcon
- *   supportiveText="Contact admin to enable"
- *   showSupportiveText
- * >
- *   Corporate ID
- * </Label>
- */
-
-import { CircleQuestionMark } from "@lucide/astro";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import type { HTMLAttributes } from "astro/types";
-
-interface Props extends HTMLAttributes<"label"> {
-  class?: string;
-  supportiveText?: string;
-  showSupportiveText?: boolean;
-  showHintIcon?: boolean;
-}
-
-const {
-  class: className = "",
-  supportiveText,
-  showSupportiveText = false,
-  showHintIcon = false,
-  ...props
-} = Astro.props as Props;
-
-const hasSupportiveText = showSupportiveText && !!supportiveText;
-const hasExtras = showHintIcon || hasSupportiveText;
----
-
-<label
-  data-slot="label"
-  class={cn(
-    "flex items-center gap-2 text-sm font-medium text-foreground select-none",
-    "group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed",
-    hasExtras && "flex-col items-start gap-1",
-    className,
-  )}
-  {...props}
->
-  {hasExtras ? (
-    <span data-slot="label-text" class="flex items-center gap-2">
-      <slot />
-      {showHintIcon && (
-        <CircleQuestionMark data-slot="label-hint-icon" class="size-3.5 shrink-0 text-muted-foreground" aria-hidden="true" />
-      )}
-    </span>
-  ) : (
-    <slot />
-  )}
-  {hasSupportiveText && (
-    <span data-slot="label-supportive-text" class="text-xs font-medium text-muted-foreground">
-      {supportiveText}
-    </span>
-  )}
-</label>
+---
+/**
+ * @component Label
+ * @title Label
+ * @description A text label for form controls.
+ * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=7228-1290
+ *
+ * @preview
+ *
+ * <div class="flex items-center space-x-2">
+ *   <Checkbox id="terms" />
+ *   <Label for="terms">Accept terms and conditions</Label>
+ * </div>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { Label } from '@bejamas/ui/components/label';
+ * ---
+ *
+ * <Label for="terms">Accept terms and conditions</Label>
+ * ```
+ *
+ * @examples
+ *
+ * ### With supportive text
+ *
+ * <Label for="first-name" supportiveText="Enter your legal first name" showSupportiveText>
+ *   First Name
+ * </Label>
+ *
+ * ### With hint icon
+ *
+ * <Label for="corporate-id" showHintIcon>Corporate ID</Label>
+ *
+ * ### With hint icon and supportive text
+ *
+ * <Label
+ *   for="corporate-id-2"
+ *   showHintIcon
+ *   supportiveText="Contact admin to enable"
+ *   showSupportiveText
+ * >
+ *   Corporate ID
+ * </Label>
+ */
+
+import { CircleQuestionMark } from "@lucide/astro";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"label"> {
+  class?: string;
+  supportiveText?: string;
+  showSupportiveText?: boolean;
+  showHintIcon?: boolean;
+}
+
+const {
+  class: className = "",
+  supportiveText,
+  showSupportiveText = false,
+  showHintIcon = false,
+  ...props
+} = Astro.props as Props;
+
+const hasSupportiveText = showSupportiveText && !!supportiveText;
+const hasExtras = showHintIcon || hasSupportiveText;
+---
+
+<label
+  data-slot="label"
+  class={cn(
+    "flex items-center gap-2 text-sm font-medium text-foreground select-none",
+    "group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed",
+    hasExtras && "flex-col items-start gap-1",
+    className,
+  )}
+  {...props}
+>
+  {hasExtras ? (
+    <span data-slot="label-text" class="flex items-center gap-2">
+      <slot />
+      {showHintIcon && (
+        <CircleQuestionMark data-slot="label-hint-icon" class="size-3.5 shrink-0 text-muted-foreground" aria-hidden="true" />
+      )}
+    </span>
+  ) : (
+    <slot />
+  )}
+  {hasSupportiveText && (
+    <span data-slot="label-supportive-text" class="text-xs font-medium text-muted-foreground">
+      {supportiveText}
+    </span>
+  )}
+</label>

package/src/components/label/index.ts

@@ -1,2 +1,2 @@
-export { default as Label } from "./Label.astro";
-
+export { default as Label } from "./Label.astro";
+

package/src/components/link-group/CHANGELOG.md

@@ -1,75 +1,75 @@
-# Changelog
-
-All notable changes to the `LinkGroup` component will be documented in this file.
-
-## Date 10th Sep 2026
-## Figma alignment (node 2329-7942, item node 2166-5713)
-
-`LinkGroup`/`LinkGroupItem`/`LinkGroupList`/`LinkGroupTitle` had not yet gone through a Figma alignment
-pass — `@figmaUrl` still pointed at the old Bejamas source file, and most typography/padding/state classes
-were either missing entirely or on the wrong scale.
-
-### Variants
-
-- Added an `orientation` prop to `LinkGroupList` (`"vertical" | "horizontal"`, default `"vertical"`) via a
-  new `link-group-list-variants.ts` (`cva`), matching Figma's `Orientation=Vertical/Horizontal` variant
-  property on the "Link Group" component — previously the list was hardcoded to a vertical `flex-col` with
-  no way to render Figma's Horizontal variant at all.
-
-### Sizing & Spacing
-
-- **`LinkGroupList`:** `gap-1` (4px) → `gap-2` (8px) — Figma's list uses `spacing/2` (8px) between items, not 4px.
-- **`LinkGroupItem`:** the slotted `<a>` had no font-size, weight, line-height, padding, or radius at all —
-  added `text-sm font-medium leading-5` (Figma's `text/md/md-medium`, 14px/500/20px), `p-0.5 rounded-lg`
-  (Figma's `padding/p-0.5` = 2px, `radius/rounded-lg` = 8px).
-- **`LinkGroupTitle`:** `text-lg` (18px) → `text-base` (16px) to match Figma's heading size; `text-current` →
-  `text-foreground` for explicit token binding instead of relying on inherited color.
-- **Fixed a real spacing bug:** `LinkGroupTitle` had its own `mb-2` (8px) *on top of* `LinkGroup`'s wrapper
-  `gap-2` (8px) between title and list, doubling the heading-to-list gap to 16px instead of Figma's single
-  8px gap. Removed `mb-2` — `LinkGroup`'s flex `gap-2` now does this alone.
-- `LinkGroup`'s wrapper gained `items-start` (was implicit `stretch`), matching Figma's root container and
-  preventing the title/list from stretching to an unintended width.
-
-### States
-
-- `LinkGroupItem`'s `<a>` kept its existing `hover:underline` (Default: no underline, Hover: underline, no
-  color/background change — already matched Figma exactly).
-- Added `focus-visible:ring-2 focus-visible:ring-chart-1` (plus `outline-hidden`) — **not** documented in
-  Figma, which only shows Default/Hover for this component, but added for keyboard-accessibility parity
-  with every other interactive component in this library (Button/Input/DropdownMenuItem all have an explicit
-  focus-visible ring). See "Flagged for the designer" below.
-
-### Tokens (`globals.css`)
-
-- No new tokens needed — `radius-lg` and `muted-foreground`/`foreground` already existed and match Figma's
-  values exactly (`muted-foreground` = `#71717a`, `foreground` = `#09090b` in light mode). `p-0.5`, `gap-2`,
-  `text-sm`, `leading-5` all come from Tailwind's default scale, which happens to line up 1:1 with Figma's
-  `padding/spacing/font-size` variables here.
-
-### Storybook & Docs
-
-- Added `@figmaUrl`/`@component` JSDoc to `LinkGroupItem.astro` (didn't have one before) and repointed
-  `LinkGroup.astro`'s `@figmaUrl` from the old Bejamas file to the ClickLearn Lightning Design Library.
-  Added a "Horizontal orientation" example to `LinkGroup.astro`'s JSDoc.
-- `apps/web/src/pages/storybook/_sections/link-group.astro`: added an `orientation="horizontal"` preview and
-  an `orientation` row to the `LinkGroupList` props table.
-
-### Not changed
-
-- Kept the existing "style the slotted `<a>` via `[&_a]:` selectors" approach on `LinkGroupItem` rather than
-  refactoring to a polymorphic `as="a"` component (like `Button`) — this was a visual alignment pass, not an
-  architecture change. Worth a future discussion if consumers want a self-rendering anchor.
-- Did not add a `linkGroupLabel` boolean prop (Figma has one to toggle the heading) — Astro's `<slot>`
-  presence already handles "heading shown only if provided" for free; a boolean prop would be redundant here.
-
-### Flagged for the designer / engineering (not addressed in this pass)
-
-- The "Component / Link Group / Orientation" usage-example page in Figma shows a divider line under the
-  "Link group name" heading in its Vertical sample, but the actual master component (the one with the real
-  `Orientation` variant property) has no divider — heading, 8px gap, list. Followed the master component;
-  worth cleaning up the usage-example frame in Figma so it doesn't raise the same question next time.
-- The Link component in Figma only documents Default/Hover states — no Focus state. Added a focus-visible
-  ring anyway for accessibility (see "States" above); worth adding an explicit documented Focus variant to
-  the Figma component so future passes don't have to guess the treatment.
-
-## Unreleased
+# Changelog
+
+All notable changes to the `LinkGroup` component will be documented in this file.
+
+## Date 10th Sep 2026
+## Figma alignment (node 2329-7942, item node 2166-5713)
+
+`LinkGroup`/`LinkGroupItem`/`LinkGroupList`/`LinkGroupTitle` had not yet gone through a Figma alignment
+pass — `@figmaUrl` still pointed at the old Bejamas source file, and most typography/padding/state classes
+were either missing entirely or on the wrong scale.
+
+### Variants
+
+- Added an `orientation` prop to `LinkGroupList` (`"vertical" | "horizontal"`, default `"vertical"`) via a
+  new `link-group-list-variants.ts` (`cva`), matching Figma's `Orientation=Vertical/Horizontal` variant
+  property on the "Link Group" component — previously the list was hardcoded to a vertical `flex-col` with
+  no way to render Figma's Horizontal variant at all.
+
+### Sizing & Spacing
+
+- **`LinkGroupList`:** `gap-1` (4px) → `gap-2` (8px) — Figma's list uses `spacing/2` (8px) between items, not 4px.
+- **`LinkGroupItem`:** the slotted `<a>` had no font-size, weight, line-height, padding, or radius at all —
+  added `text-sm font-medium leading-5` (Figma's `text/md/md-medium`, 14px/500/20px), `p-0.5 rounded-lg`
+  (Figma's `padding/p-0.5` = 2px, `radius/rounded-lg` = 8px).
+- **`LinkGroupTitle`:** `text-lg` (18px) → `text-base` (16px) to match Figma's heading size; `text-current` →
+  `text-foreground` for explicit token binding instead of relying on inherited color.
+- **Fixed a real spacing bug:** `LinkGroupTitle` had its own `mb-2` (8px) *on top of* `LinkGroup`'s wrapper
+  `gap-2` (8px) between title and list, doubling the heading-to-list gap to 16px instead of Figma's single
+  8px gap. Removed `mb-2` — `LinkGroup`'s flex `gap-2` now does this alone.
+- `LinkGroup`'s wrapper gained `items-start` (was implicit `stretch`), matching Figma's root container and
+  preventing the title/list from stretching to an unintended width.
+
+### States
+
+- `LinkGroupItem`'s `<a>` kept its existing `hover:underline` (Default: no underline, Hover: underline, no
+  color/background change — already matched Figma exactly).
+- Added `focus-visible:ring-2 focus-visible:ring-chart-1` (plus `outline-hidden`) — **not** documented in
+  Figma, which only shows Default/Hover for this component, but added for keyboard-accessibility parity
+  with every other interactive component in this library (Button/Input/DropdownMenuItem all have an explicit
+  focus-visible ring). See "Flagged for the designer" below.
+
+### Tokens (`globals.css`)
+
+- No new tokens needed — `radius-lg` and `muted-foreground`/`foreground` already existed and match Figma's
+  values exactly (`muted-foreground` = `#71717a`, `foreground` = `#09090b` in light mode). `p-0.5`, `gap-2`,
+  `text-sm`, `leading-5` all come from Tailwind's default scale, which happens to line up 1:1 with Figma's
+  `padding/spacing/font-size` variables here.
+
+### Storybook & Docs
+
+- Added `@figmaUrl`/`@component` JSDoc to `LinkGroupItem.astro` (didn't have one before) and repointed
+  `LinkGroup.astro`'s `@figmaUrl` from the old Bejamas file to the ClickLearn Lightning Design Library.
+  Added a "Horizontal orientation" example to `LinkGroup.astro`'s JSDoc.
+- `apps/web/src/pages/storybook/_sections/link-group.astro`: added an `orientation="horizontal"` preview and
+  an `orientation` row to the `LinkGroupList` props table.
+
+### Not changed
+
+- Kept the existing "style the slotted `<a>` via `[&_a]:` selectors" approach on `LinkGroupItem` rather than
+  refactoring to a polymorphic `as="a"` component (like `Button`) — this was a visual alignment pass, not an
+  architecture change. Worth a future discussion if consumers want a self-rendering anchor.
+- Did not add a `linkGroupLabel` boolean prop (Figma has one to toggle the heading) — Astro's `<slot>`
+  presence already handles "heading shown only if provided" for free; a boolean prop would be redundant here.
+
+### Flagged for the designer / engineering (not addressed in this pass)
+
+- The "Component / Link Group / Orientation" usage-example page in Figma shows a divider line under the
+  "Link group name" heading in its Vertical sample, but the actual master component (the one with the real
+  `Orientation` variant property) has no divider — heading, 8px gap, list. Followed the master component;
+  worth cleaning up the usage-example frame in Figma so it doesn't raise the same question next time.
+- The Link component in Figma only documents Default/Hover states — no Focus state. Added a focus-visible
+  ring anyway for accessibility (see "States" above); worth adding an explicit documented Focus variant to
+  the Figma component so future passes don't have to guess the treatment.
+
+## Unreleased

package/src/components/link-group/LinkGroup.astro

@@ -1,67 +1,67 @@
----
-/**
- * @component LinkGroup
- * @title Link Group
- * @description A group of related links with optional title for navigation or footer sections.
- * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=2329-7942
- *
- * @preview
- *
- * <LinkGroup>
- *   <LinkGroupTitle>Company</LinkGroupTitle>
- *   <LinkGroupList>
- *     <LinkGroupItem><a href="/">Home</a></LinkGroupItem>
- *     <LinkGroupItem><a href="#">About</a></LinkGroupItem>
- *   </LinkGroupList>
- * </LinkGroup>
- *
- * @usage
- *
- * ```astro nocollapse
- * ---
- * import { LinkGroup, LinkGroupTitle, LinkGroupList, LinkGroupItem } from '@bejamas/ui/components/link-group';
- * ---
- *
- * <LinkGroup>
- *   <LinkGroupTitle>Company</LinkGroupTitle>
- *   <LinkGroupList>
- *     <LinkGroupItem><a href="/">Home</a></LinkGroupItem>
- *   </LinkGroupList>
- * </LinkGroup>
- * ```
- *
- * @examples
- *
- * ### Horizontal orientation
- *
- * <LinkGroup>
- *   <LinkGroupTitle>Company</LinkGroupTitle>
- *   <LinkGroupList orientation="horizontal">
- *     <LinkGroupItem><a href="/">Home</a></LinkGroupItem>
- *     <LinkGroupItem><a href="#">About</a></LinkGroupItem>
- *     <LinkGroupItem><a href="#">Careers</a></LinkGroupItem>
- *   </LinkGroupList>
- * </LinkGroup>
- */
-
-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="link-group"
-  class={cn("", "flex flex-col items-start gap-2", className)}
->
-  <slot />
-</div>
-
+---
+/**
+ * @component LinkGroup
+ * @title Link Group
+ * @description A group of related links with optional title for navigation or footer sections.
+ * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=2329-7942
+ *
+ * @preview
+ *
+ * <LinkGroup>
+ *   <LinkGroupTitle>Company</LinkGroupTitle>
+ *   <LinkGroupList>
+ *     <LinkGroupItem><a href="/">Home</a></LinkGroupItem>
+ *     <LinkGroupItem><a href="#">About</a></LinkGroupItem>
+ *   </LinkGroupList>
+ * </LinkGroup>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { LinkGroup, LinkGroupTitle, LinkGroupList, LinkGroupItem } from '@bejamas/ui/components/link-group';
+ * ---
+ *
+ * <LinkGroup>
+ *   <LinkGroupTitle>Company</LinkGroupTitle>
+ *   <LinkGroupList>
+ *     <LinkGroupItem><a href="/">Home</a></LinkGroupItem>
+ *   </LinkGroupList>
+ * </LinkGroup>
+ * ```
+ *
+ * @examples
+ *
+ * ### Horizontal orientation
+ *
+ * <LinkGroup>
+ *   <LinkGroupTitle>Company</LinkGroupTitle>
+ *   <LinkGroupList orientation="horizontal">
+ *     <LinkGroupItem><a href="/">Home</a></LinkGroupItem>
+ *     <LinkGroupItem><a href="#">About</a></LinkGroupItem>
+ *     <LinkGroupItem><a href="#">Careers</a></LinkGroupItem>
+ *   </LinkGroupList>
+ * </LinkGroup>
+ */
+
+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="link-group"
+  class={cn("", "flex flex-col items-start gap-2", className)}
+>
+  <slot />
+</div>
+

package/src/components/link-group/LinkGroupItem.astro

@@ -1,32 +1,32 @@
----
-/**
- * @component LinkGroupItem
- * @title Link Group Item
- * @description A single link row inside a LinkGroupList, styling a slotted `<a>` with the group's link typography and states.
- * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=2166-5713
- */
-
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import type { HTMLAttributes } from "astro/types";
-
-interface Props extends HTMLAttributes<"li"> {
-  class?: string;
-}
-
-const {
-  class: className = "",
-  ...rest
-} = Astro.props as Props;
----
-
-<li
-  {...rest}
-  data-slot="link-group-item"
-  class={cn(
-    "[&_a]:inline-flex [&_a]:items-center [&_a]:rounded-lg [&_a]:p-0.5 [&_a]:text-sm [&_a]:font-medium [&_a]:leading-5 [&_a]:text-muted-foreground [&_a]:transition-colors [&_a]:underline-offset-4 [&_a:hover]:underline [&_a]:outline-hidden [&_a:focus-visible]:ring-2 [&_a:focus-visible]:ring-chart-1",
-    className,
-  )}
->
-  <slot />
-</li>
-
+---
+/**
+ * @component LinkGroupItem
+ * @title Link Group Item
+ * @description A single link row inside a LinkGroupList, styling a slotted `<a>` with the group's link typography and states.
+ * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=2166-5713
+ */
+
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"li"> {
+  class?: string;
+}
+
+const {
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+---
+
+<li
+  {...rest}
+  data-slot="link-group-item"
+  class={cn(
+    "[&_a]:inline-flex [&_a]:items-center [&_a]:rounded-lg [&_a]:p-0.5 [&_a]:text-sm [&_a]:font-medium [&_a]:leading-5 [&_a]:text-muted-foreground [&_a]:transition-colors [&_a]:underline-offset-4 [&_a:hover]:underline [&_a]:outline-hidden [&_a:focus-visible]:ring-2 [&_a:focus-visible]:ring-chart-1",
+    className,
+  )}
+>
+  <slot />
+</li>
+