@cl-light-ds/ui 0.1.0

package/README.md

@@ -0,0 +1,45 @@
+# @cl-light-ds/ui
+
+ClickLearn Lightning Design System — a library of Astro UI components.
+
+## Requirements
+
+Your project needs Astro 7+ and Tailwind CSS v4 already set up.
+
+## Install
+
+```bash
+npm install @cl-light-ds/ui
+```
+
+## Usage
+
+Import the design tokens once, e.g. in your root layout:
+
+```astro
+---
+import "@cl-light-ds/ui/globals.css";
+---
+```
+
+Then import components from their individual paths:
+
+```astro
+---
+import { Button } from "@cl-light-ds/ui/components/button";
+---
+
+<Button>Click me</Button>
+```
+
+Tailwind v4 needs to see these component files to extract their classes. Add a `@source` directive pointing at the
+package inside your own global stylesheet:
+
+```css
+@import "tailwindcss";
+@import "@cl-light-ds/ui/globals.css";
+
+@source "../node_modules/@cl-light-ds/ui/src/**/*.{astro,ts}";
+```
+
+(Adjust the relative path to match where your stylesheet lives relative to `node_modules`.)

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@cl-light-ds/ui",
+  "version": "0.1.0",
+  "description": "ClickLearn Lightning Design System — Astro UI component library.",
+  "license": "MIT",
+  "type": "module",
+  "files": [
+    "src"
+  ],
+  "exports": {
+    "./globals.css": "./src/styles/globals.css",
+    "./lib/*": "./src/lib/*.ts",
+    "./components/*": "./src/components/*.ts"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "lint": "eslint . --max-warnings 0"
+  },
+  "peerDependencies": {
+    "astro": "^7.0.6",
+    "tailwindcss": "^4.1.17"
+  },
+  "devDependencies": {
+    "@repo/eslint-config": "*",
+    "@repo/typescript-config": "*",
+    "@types/node": "^22.15.3",
+    "astro": "^7.0.6",
+    "eslint": "^9.34.0",
+    "shadcn": "^4.19.1",
+    "tailwindcss": "^4.1.17",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "^5.9.3"
+  },
+  "dependencies": {
+    "@data-slot/accordion": "^0.2.166",
+    "@data-slot/collapsible": "^0.2.166",
+    "@data-slot/combobox": "^0.2.166",
+    "@data-slot/dialog": "^0.2.166",
+    "@data-slot/dropdown-menu": "^0.2.166",
+    "@data-slot/hover-card": "^0.2.166",
+    "@data-slot/navigation-menu": "^0.2.166",
+    "@data-slot/popover": "^0.2.166",
+    "@data-slot/radio-group": "^0.2.166",
+    "@data-slot/select": "^0.2.166",
+    "@data-slot/slider": "^0.2.166",
+    "@data-slot/switch": "^0.2.166",
+    "@data-slot/tabs": "^0.2.166",
+    "@data-slot/toggle": "^0.2.166",
+    "@data-slot/toggle-group": "^0.2.166",
+    "@data-slot/tooltip": "^0.2.166",
+    "@lucide/astro": "^1.14.0",
+    "bejamas": "^0.4.1",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.6.0"
+  }
+}

package/src/components/accordion/Accordion.astro

@@ -0,0 +1,248 @@
+---
+/**
+ * @component Accordion
+ * @title Accordion
+ * @description Vertically stacked collapsible sections that let users show and hide content panels.
+ * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=133-7547
+ *
+ * @preview
+ *
+ * <Accordion class="w-full max-w-[420px] self-start mt-10" defaultValue="accordion-item-1">
+ *   <AccordionItem value="accordion-item-1">
+ *     <AccordionTrigger icon={List}>
+ *       Is it accessible?
+ *     </AccordionTrigger>
+ *     <AccordionContent>
+ *       Yes. It adheres to WAI-ARIA design patterns.
+ *     </AccordionContent>
+ *   </AccordionItem>
+ *   <AccordionItem value="accordion-item-2">
+ *     <AccordionTrigger badge="New">
+ *       Can I customize the icon?
+ *     </AccordionTrigger>
+ *     <AccordionContent>
+ *       Yes you can.
+ *     </AccordionContent>
+ *   </AccordionItem>
+ * </Accordion>
+ *
+ * <Accordion class="w-full max-w-[420px] self-start mt-10" shape="rounded" defaultValue="accordion-item-1">
+ *   <AccordionItem value="accordion-item-1">
+ *     <AccordionTrigger>
+ *       Is it accessible?
+ *     </AccordionTrigger>
+ *     <AccordionContent>
+ *       Yes. It adheres to WAI-ARIA design patterns.
+ *     </AccordionContent>
+ *   </AccordionItem>
+ *   <AccordionItem value="accordion-item-2" disabled>
+ *     <AccordionTrigger>
+ *       Can I customize the icon?
+ *     </AccordionTrigger>
+ *     <AccordionContent>
+ *       Yes you can.
+ *     </AccordionContent>
+ *   </AccordionItem>
+ * </Accordion>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@bejamas/ui/components/accordion';
+ * ---
+ *
+ * <Accordion class="w-full max-w-[420px] self-start" defaultValue="accordion-item-1">
+ *   <AccordionItem value="accordion-item-1">
+ *     <AccordionTrigger>
+ *       Is it accessible?
+ *     </AccordionTrigger>
+ *     <AccordionContent>
+ *       Yes. It adheres to WAI-ARIA design patterns.
+ *     </AccordionContent>
+ *   </AccordionItem>
+ * </Accordion>
+ * ```
+ *
+ * @api
+ *
+ * ### Events
+ *
+ * The accordion emits custom events that you can listen to:
+ *
+ * | Event | Detail | Description |
+ * |-------|--------|-------------|
+ * | `accordion:change` | `{ value: string[] }` | Fired when expanded items change |
+ *
+ * ```astro nocollapse
+ * <Accordion id="my-accordion">
+ *   <AccordionItem value="item-1">
+ *     <AccordionTrigger>Item 1</AccordionTrigger>
+ *     <AccordionContent>Content 1</AccordionContent>
+ *   </AccordionItem>
+ * </Accordion>
+ * ```
+ *
+ * ```js nocollapse
+ *   const accordion = document.getElementById('my-accordion');
+ *
+ *   accordion.addEventListener('accordion:change', (e) => {
+ *     console.log('Expanded items:', e.detail.value);
+ *   });
+ * ```
+ *
+ * ### Programmatic Control
+ *
+ * You can control the accordion programmatically by dispatching an `accordion:set` event:
+ *
+ * ```js nocollapse
+ * const accordion = document.getElementById('my-accordion');
+ *
+ * // Expand a single item
+ * accordion.dispatchEvent(new CustomEvent('accordion:set', {
+ *   detail: { value: 'item-1' }
+ * }));
+ *
+ * // Expand multiple items (when multiple prop is true)
+ * accordion.dispatchEvent(new CustomEvent('accordion:set', {
+ *   detail: { value: ['item-1', 'item-2'] }
+ * }));
+ * ```
+ *
+ * ### Data Attributes
+ *
+ * The accordion sets these data attributes that you can use for styling or querying state:
+ *
+ * | Attribute | Element | Description |
+ * |-----------|---------|-------------|
+ * | `data-state` | accordion-item | Current state (`open` or `closed`) |
+ * | `data-shape` | accordion | Current shape (`default`, `flush`, or `rounded`) |
+ * | `data-disabled` | accordion-item | Present when the item is disabled |
+ *
+ * @examples
+ *
+ * ### Rounded shape
+ *
+ * <Accordion class="w-full max-w-[420px] self-start" shape="rounded" defaultValue="accordion-item-1">
+ *   <AccordionItem value="accordion-item-1">
+ *     <AccordionTrigger>
+ *       Is it accessible?
+ *     </AccordionTrigger>
+ *     <AccordionContent>
+ *       Yes. It adheres to WAI-ARIA design patterns.
+ *     </AccordionContent>
+ *   </AccordionItem>
+ *   <AccordionItem value="accordion-item-2">
+ *     <AccordionTrigger>
+ *       Can I customize the icon?
+ *     </AccordionTrigger>
+ *     <AccordionContent>
+ *       Yes you can.
+ *     </AccordionContent>
+ *   </AccordionItem>
+ * </Accordion>
+ *
+ * ### Disabled item
+ *
+ * <Accordion class="w-full max-w-[420px] self-start" defaultValue="accordion-item-1">
+ *   <AccordionItem value="accordion-item-1" disabled>
+ *     <AccordionTrigger>
+ *       This item can't be expanded
+ *     </AccordionTrigger>
+ *     <AccordionContent>
+ *       Hidden content.
+ *     </AccordionContent>
+ *   </AccordionItem>
+ * </Accordion>
+ *
+ * ### Multiple choice accordion
+ *
+ * <Accordion class="w-full max-w-[420px] self-start" multiple defaultValue={["accordion-item-1"]}>
+ *   <AccordionItem value="accordion-item-1">
+ *     <AccordionTrigger>
+ *       Is it accessible?
+ *     </AccordionTrigger>
+ *     <AccordionContent>
+ *       Yes. It adheres to WAI-ARIA design patterns.
+ *     </AccordionContent>
+ *   </AccordionItem>
+ *   <AccordionItem value="accordion-item-2">
+ *     <AccordionTrigger>
+ *       Can I customize the icon?
+ *     </AccordionTrigger>
+ *     <AccordionContent>
+ *       Yes you can.
+ *     </AccordionContent>
+ *   </AccordionItem>
+ *   <AccordionItem value="accordion-item-3">
+ *     <AccordionTrigger>
+ *       Can I customize the icon?
+ *     </AccordionTrigger>
+ *     <AccordionContent>
+ *       Yes you can.
+ *     </AccordionContent>
+ *   </AccordionItem>
+ * </Accordion>
+ *
+ */
+
+import { cva } from "class-variance-authority";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+type AccordionShape = "default" | "flush" | "rounded";
+
+interface Props extends HTMLAttributes<"div"> {
+  class?: string;
+  multiple?: boolean;
+  defaultValue?: string | string[];
+  collapsible?: boolean;
+  shape?: AccordionShape;
+}
+
+const {
+  class: className = "",
+  multiple = false,
+  defaultValue,
+  collapsible = true,
+  shape = "default",
+  ...rest
+} = Astro.props as Props;
+
+const rootDefaultValue = Array.isArray(defaultValue)
+  ? JSON.stringify(defaultValue)
+  : defaultValue;
+
+const accordionVariants = cva("group/accordion flex w-full flex-col", {
+  variants: {
+    shape: {
+      default: "gap-0",
+      flush: "gap-0",
+      rounded: "gap-2",
+    },
+  },
+  defaultVariants: {
+    shape: "default",
+  },
+});
+---
+
+<div
+  {...rest}
+  data-slot="accordion"
+  data-multiple={multiple ? "true" : undefined}
+  data-default-value={rootDefaultValue}
+  data-collapsible={collapsible ? undefined : "false"}
+  data-shape={shape}
+  class={cn(accordionVariants({ shape }), className)}
+>
+  <slot />
+</div>
+
+<script>
+  import { createAccordion } from "@data-slot/accordion";
+
+  document.querySelectorAll('[data-slot="accordion"]').forEach((el) => {
+    createAccordion(el);
+  });
+</script>

package/src/components/accordion/AccordionContent.astro

@@ -0,0 +1,26 @@
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {
+  class?: string;
+}
+
+const { class: className = "", ...rest } = Astro.props as Props;
+---
+
+<div
+  {...rest}
+  data-slot="accordion-content"
+  hidden
+  class="data-open:animate-accordion-down data-closed:animate-accordion-up text-muted-foreground text-xs overflow-hidden"
+>
+  <div
+    class={cn(
+      "pr-3 pl-(--accordion-indent,--spacing(3)) pt-1 pb-3 h-(--accordion-panel-height) data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+      className,
+    )}
+  >
+    <slot />
+  </div>
+</div>

package/src/components/accordion/AccordionItem.astro

@@ -0,0 +1,36 @@
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {
+  value: string;
+  class?: string;
+  disabled?: boolean;
+}
+
+const {
+  value,
+  class: className = "",
+  disabled = false,
+  ...rest
+} = Astro.props as Props;
+---
+
+<div
+  {...rest}
+  data-value={value}
+  data-slot="accordion-item"
+  data-disabled={disabled ? "" : undefined}
+  aria-disabled={disabled ? "true" : undefined}
+  class={cn(
+    "group/accordion-item",
+    "[--accordion-indent:--spacing(3)] has-data-[slot=accordion-trigger-lead-icon]:[--accordion-indent:--spacing(9)]",
+    "group-data-[shape=default]/accordion:not-last:border-b group-data-[shape=default]/accordion:border-border",
+    "group-data-[shape=rounded]/accordion:rounded-lg group-data-[shape=rounded]/accordion:border group-data-[shape=rounded]/accordion:border-border group-data-[shape=rounded]/accordion:bg-card",
+    "has-[[data-slot=accordion-trigger]:focus-visible]:relative has-[[data-slot=accordion-trigger]:focus-visible]:z-10 has-[[data-slot=accordion-trigger]:focus-visible]:border has-[[data-slot=accordion-trigger]:focus-visible]:border-ring has-[[data-slot=accordion-trigger]:focus-visible]:ring-3 has-[[data-slot=accordion-trigger]:focus-visible]:ring-ring/50 has-[[data-slot=accordion-trigger]:focus-visible]:bg-card",
+    "data-disabled:opacity-50",
+    className,
+  )}
+>
+  <slot />
+</div>

package/src/components/accordion/AccordionTrigger.astro

@@ -0,0 +1,118 @@
+---
+import { cva } from "class-variance-authority";
+import { Plus, Minus, ChevronDown, ChevronUp } from "@lucide/astro";
+import type { AstroComponent } from "@lucide/astro";
+import Badge from "../badge/Badge.astro";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+type IndicatorIcon = "plus-minus" | "chevron";
+
+interface Props extends HTMLAttributes<"button"> {
+  class?: string;
+  /** Radix-like: render wrapper so the child can be the interactive element */
+  asChild?: boolean;
+  /** Leading icon rendered before the label (e.g. a lucide-astro icon). */
+  icon?: AstroComponent;
+  /** Optional badge/pill rendered next to the label. */
+  badge?: string | number;
+  disabled?: boolean;
+  /** Style of the built-in expand/collapse indicator. Ignored when a custom `icon` slot is provided. */
+  indicatorIcon?: IndicatorIcon;
+}
+
+const {
+  class: className = "",
+  asChild = false,
+  type = "button",
+  icon,
+  badge,
+  disabled = false,
+  indicatorIcon = "plus-minus",
+  ...rest
+} = Astro.props as Props;
+
+const Icon = icon;
+const hasBadge = badge !== undefined && badge !== null;
+const [CollapsedIndicator, ExpandedIndicator] =
+  indicatorIcon === "chevron" ? [ChevronDown, ChevronUp] : [Plus, Minus];
+
+const triggerVariants = cva(
+  "**:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-md p-3 aria-expanded:pb-1 text-left text-xs font-semibold hover:underline **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between gap-2 transition-all outline-none aria-disabled:pointer-events-none aria-disabled:opacity-50 group-data-disabled/accordion-item:pointer-events-none group-data-disabled/accordion-item:opacity-50",
+);
+---
+
+{
+  asChild ? (
+    <div class="flex">
+      <div
+        data-slot="accordion-trigger"
+        data-as-child
+        class={cn(triggerVariants(), className)}
+      >
+        <slot />
+      </div>
+    </div>
+  ) : (
+    <div class="flex">
+      <button
+        {...rest}
+        type={type}
+        aria-disabled={disabled ? "true" : undefined}
+        data-slot="accordion-trigger"
+        class={cn(triggerVariants(), className)}
+      >
+        <span class="flex flex-1 items-center gap-2">
+          {
+            Icon && (
+              <span
+                data-slot="accordion-trigger-lead-icon"
+                class="text-foreground pointer-events-none size-4 shrink-0"
+              >
+                <Icon class="size-4" />
+              </span>
+            )
+          }
+          <span class="flex items-center gap-1.5">
+            <slot />
+            {
+              hasBadge && (
+                <Badge
+                  data-slot="accordion-trigger-badge"
+                  variant="outline"
+                  shape="pill"
+                  size="sm"
+                >
+                  {badge}
+                </Badge>
+              )
+            }
+          </span>
+        </span>
+        {
+          Astro.slots.has("icon") ? (
+            <span
+              data-slot="accordion-trigger-icon"
+              class="pointer-events-none shrink-0"
+            >
+              <slot name="icon" />
+            </span>
+          ) : (
+            <>
+              <CollapsedIndicator
+                data-slot="accordion-trigger-icon"
+                class="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
+                aria-hidden="true"
+              />
+              <ExpandedIndicator
+                data-slot="accordion-trigger-icon"
+                class="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
+                aria-hidden="true"
+              />
+            </>
+          )
+        }
+      </button>
+    </div>
+  )
+}

package/src/components/accordion/CHANGELOG.md

@@ -0,0 +1,41 @@
+# Changelog
+
+All notable changes to the `Accordion` component family (`Accordion`, `AccordionItem`, `AccordionTrigger`, `AccordionContent`) are documented in this file.
+
+## 2026-09-08 — Figma alignment (ClickLearn Lightning Design Library, node `133-7547`)
+
+Aligned the component visually and functionally with Figma, while preserving the existing 4-part structure and all pre-existing props.
+
+### Added
+
+- `Accordion`: `shape` prop (`"default" | "flush" | "rounded"`) — `default` keeps the bottom-border divider list, `flush` removes dividers entirely, `rounded` renders each item as its own bordered, rounded card with an 8px gap between items.
+- `AccordionItem`: `disabled` prop.
+- `AccordionTrigger`:
+  - `icon` — leading icon rendered before the label (e.g. a lucide-astro icon component).
+  - `badge` — optional pill (now backed by the shared `Badge` component: `variant="outline" shape="pill" size="sm"`) rendered next to the label.
+  - `disabled` prop.
+  - `indicatorIcon` (`"plus-minus" | "chevron"`, default `"plus-minus"`) — style of the built-in expand/collapse indicator.
+
+### Changed
+
+- `AccordionTrigger`: replaced the hardcoded chevron up/down indicator with a Plus/Minus swap by default (matches Figma; chevron still available via `indicatorIcon="chevron"`).
+- `AccordionTrigger`: padding `py-4` → `p-3`; bottom padding reduces to `pb-1` when expanded, tightening the header-to-body gap.
+- `AccordionTrigger` / `AccordionContent`: label and caption text size `text-sm` → `text-xs` (12px), matching Figma's actual type token (this design system's `text-sm` utility is 14px).
+- `AccordionContent`: caption color now explicit `text-muted-foreground` (previously inherited the default dark foreground color).
+- `AccordionContent`: horizontal padding now `pr-3 pl-(--accordion-indent, --spacing(3))` — a shared `--accordion-indent` CSS variable (set on `AccordionItem`, `--spacing(3)` by default, `--spacing(9)` when the trigger has a lead icon) so the body text aligns under the label, not under the lead icon.
+- `AccordionContent`: `pb-4` → `pb-3` (12px); `pt-0` → `pt-1` (4px) — combined with the trigger's `aria-expanded:pb-1`, the header-to-body gap is 8px total.
+- `AccordionItem`: shape-driven classes for border/radius/background (`default` → `border-b`, `rounded` → `border` + `rounded-lg` + `bg-card`, `flush` → none).
+- Focus ring moved from the trigger button to `AccordionItem` (via `has-[[data-slot=accordion-trigger]:focus-visible]:*`), so a focused item's ring wraps the whole box — including the expanded caption — not just the header row. Reverted an interim change that used `focus:` (any pointer/click focus); it is `focus-visible:` only, so a mouse click does not show the ring.
+- Fixed the malformed `@figmaUrl` JSDoc (previously two concatenated URLs) to the correct single ClickLearn Lightning Design Library link.
+
+### Fixed
+
+- Lead icon color: was `text-muted-foreground` (gray); Figma's actual asset is `text-foreground` (dark, matching the label).
+- Lead icon size: the `<svg>` was rendering at its native 24px inside a 20px (later 16px) wrapper span, because the size class was only applied to the wrapper, not the icon itself — silently eating into the icon-to-label gap. Fixed by passing the size class directly to the icon component.
+- Badge text picked up the trigger's `hover:underline` (text-decoration propagates to inline descendants). Added `no-underline` — currently not present after switching the badge to the shared `Badge` component with no `class` override, so this regressed; needs revisiting if the badge should stay non-underlined on hover.
+
+### Notes
+
+- `shape` lives only on the `Accordion` root (cascades to all items uniformly) — Figma's "Nested" demo renders identically to "Rounded", so it isn't a distinct shape value.
+- `disabled`, `badge`, and the `flush` shape value have no dedicated demo frame in the Figma file; they were implemented using the design system's existing muted/border tokens rather than a pixel-exact spec.
+- All spacing values are token-based (Tailwind's `--spacing` scale) or reference `globals.css` color tokens — no hardcoded arbitrary pixel/rem/hex values remain in the four component files.

package/src/components/accordion/index.ts

@@ -0,0 +1,4 @@
+export { default as Accordion } from "./Accordion.astro";
+export { default as AccordionItem } from "./AccordionItem.astro";
+export { default as AccordionTrigger } from "./AccordionTrigger.astro";
+export { default as AccordionContent } from "./AccordionContent.astro";