@cl-light-ds/ui 0.2.0 → 0.3.0

package/src/components/date/CHANGELOG.md

@@ -1,18 +1,18 @@
-# Changelog
-
-All notable changes to the `Date` component will be documented in this file.
-
-## 2026-09-09 — Figma alignment (ClickLearn Lightning Design Library, node `2329-6519`)
-
-Unlike Accordion/Combobox/Checkbox, `Date` is not an interactive widget — it's a lightweight, non-interactive date-*formatting* component (renders a plain `<time>`, no sub-components, no behavior library). Figma's "Date" page turned out to be a reference table of six formatting variants (Default, Short, Time, Full, Long, "Long with time") with sample output strings, not a visual widget spec.
-
-### Notes (no missing variants or props found)
-
-- All six variants Figma demos are already fully supported by the existing `format` (`"short" | "time" | "full" | "long"`, default `"long"`) and `includeTime` props — confirmed each one produces the exact same formatted output Figma shows (e.g. `format="full"` → "Friday, June 13, 2025"). No new props were needed.
-- Figma's "Short" sample text ("6/13/2025") doesn't match what `Intl.DateTimeFormat`'s real `dateStyle: "short"` produces ("6/13/25", 2-digit year — the correct standard short-style output). Left the component using the real `Intl` API rather than "fixing" it to match what was evidently a hand-typed mockup value.
-
-### Fixed
-
-- The rendered `<time>` element had **zero** default styling (`class={cn("", className)}` — a literal empty base string). Added `text-sm` plus a text color as the default — first set to `text-muted-foreground` per Figma's reference table (which styled the value text as regular-weight/muted), then corrected to `text-foreground` per your direct call.
-- Updated `@figmaUrl` from the old Bejamas file to the ClickLearn Lightning Design Library link.
-- Polished the demo page (`apps/web/.../_sections/date.astro`) and the component's own JSDoc `@preview`: the row labels ("Default:", "Short:", etc.) were plain unstyled `<div>`s; Figma styles them `text-foreground text-sm font-medium` (bold, dark) — added to both.
+# Changelog
+
+All notable changes to the `Date` component will be documented in this file.
+
+## 2026-09-09 — Figma alignment (ClickLearn Lightning Design Library, node `2329-6519`)
+
+Unlike Accordion/Combobox/Checkbox, `Date` is not an interactive widget — it's a lightweight, non-interactive date-*formatting* component (renders a plain `<time>`, no sub-components, no behavior library). Figma's "Date" page turned out to be a reference table of six formatting variants (Default, Short, Time, Full, Long, "Long with time") with sample output strings, not a visual widget spec.
+
+### Notes (no missing variants or props found)
+
+- All six variants Figma demos are already fully supported by the existing `format` (`"short" | "time" | "full" | "long"`, default `"long"`) and `includeTime` props — confirmed each one produces the exact same formatted output Figma shows (e.g. `format="full"` → "Friday, June 13, 2025"). No new props were needed.
+- Figma's "Short" sample text ("6/13/2025") doesn't match what `Intl.DateTimeFormat`'s real `dateStyle: "short"` produces ("6/13/25", 2-digit year — the correct standard short-style output). Left the component using the real `Intl` API rather than "fixing" it to match what was evidently a hand-typed mockup value.
+
+### Fixed
+
+- The rendered `<time>` element had **zero** default styling (`class={cn("", className)}` — a literal empty base string). Added `text-sm` plus a text color as the default — first set to `text-muted-foreground` per Figma's reference table (which styled the value text as regular-weight/muted), then corrected to `text-foreground` per your direct call.
+- Updated `@figmaUrl` from the old Bejamas file to the ClickLearn Lightning Design Library link.
+- Polished the demo page (`apps/web/.../_sections/date.astro`) and the component's own JSDoc `@preview`: the row labels ("Default:", "Short:", etc.) were plain unstyled `<div>`s; Figma styles them `text-foreground text-sm font-medium` (bold, dark) — added to both.

package/src/components/date/Date.astro

@@ -1,137 +1,137 @@
----
-import { cn } from "@cl-light-ds/ui/lib/utils";
-/**
- * @component Date
- * @description Formats and displays dates and times in human-readable styles.
- * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=2329-6519
- *
- * @preview
- *
- * <div class="grid grid-cols-2 gap-4">
- *   <div class="text-foreground text-sm font-medium">Default:</div> <Date date="2025-06-13T12:00:00Z" />
- *   <Separator class="col-span-2" />
- *   <div class="text-foreground text-sm font-medium">Short:</div> <Date date="2025-06-13T12:00:00Z" format="short" />
- *   <Separator class="col-span-2" />
- *   <div class="text-foreground text-sm font-medium">Time:</div> <Date date="2025-06-13T12:00:00Z" format="time" />
- *   <Separator class="col-span-2" />
- *   <div class="text-foreground text-sm font-medium">Full:</div> <Date date="2025-06-13T12:00:00Z" format="full" />
- *   <Separator class="col-span-2" />
- *   <div class="text-foreground text-sm font-medium">Long:</div> <Date date="2025-06-13T12:00:00Z" format="long" />
- *   <Separator class="col-span-2" />
- *   <div class="text-foreground text-sm font-medium">Long with time:</div> <Date date="2025-06-13T12:00:00Z" format="long" includeTime />
- * </div>
- *
- * @usage
- *
- * ```astro nocollapse
- * ---
- * import { Date } from '@bejamas/ui/components/date';
- * ---
- *
- * <Date date="2025-06-24T12:00:00Z" />
- * ```
- *
- * @examples
- *
- * ### Custom locale
- *
- * <div class="flex gap-2 flex-col">
- *   <Date date="2025-06-24T12:00:00Z" locale="fr-FR" />
- *   <Date date="2025-06-24T12:00:00Z" locale="de-DE" />
- *   <Date date="2025-06-24T12:00:00Z" locale="es-ES" />
- *   <Date date="2025-06-24T12:00:00Z" locale="pl-PL" />
- * </div>
- */
-const {
-  date,
-  format = "long",
-  includeTime = false,
-  locale = "en-US",
-  class: className = "",
-  ...props
-} = Astro.props;
-
-// Helper: parse date input
-function parseDate(input: string | globalThis.Date | null | undefined) {
-  if (!input) return null;
-  if (input instanceof globalThis.Date) return input;
-  // Try to parse string
-  const d = new globalThis.Date(input);
-  return isNaN(d.getTime()) ? null : d;
-}
-
-const parsedDate = parseDate(date);
-
-// Precompute separate date and time strings to support custom rendering via slot
-let dateText = "";
-let timeText = "";
-let formatted = "";
-let html = "";
-if (parsedDate) {
-  let dateOptions: Intl.DateTimeFormatOptions | undefined;
-  switch (format) {
-    case "short":
-      dateOptions = { dateStyle: "short" };
-      break;
-    case "full":
-      dateOptions = { dateStyle: "full" };
-      break;
-    case "time":
-      dateOptions = undefined;
-      break;
-    case "long":
-    default:
-      dateOptions = { dateStyle: "long" };
-      break;
-  }
-  if (dateOptions) {
-    dateText = new Intl.DateTimeFormat(locale, dateOptions).format(parsedDate);
-  }
-  if (includeTime || format === "time") {
-    timeText = new Intl.DateTimeFormat(locale, { timeStyle: "short" }).format(
-      parsedDate,
-    );
-  }
-  formatted =
-    format === "time"
-      ? timeText
-      : includeTime && timeText
-        ? `${dateText}, ${timeText}`
-        : dateText;
-
-  if (Astro.slots.has("default")) {
-    html = await Astro.slots.render("default", [
-      {
-        date: dateText,
-        time: timeText,
-        formatted,
-        iso: parsedDate.toISOString(),
-        dateObj: parsedDate,
-      },
-    ]);
-  }
-}
----
-
-{
-  parsedDate ? (
-    Astro.slots.has("default") ? (
-      <Fragment set:html={html} />
-    ) : (
-      <time
-        datetime={parsedDate.toISOString()}
-        class={cn("text-foreground text-sm", className)}
-        {...props}
-      >
-        {formatted}
-      </time>
-    )
-  ) : (
-    <span
-      class={cn("text-destructive", className)}
-      {...props}
-    >
-      Invalid date
-    </span>
-  )
-}
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+/**
+ * @component Date
+ * @description Formats and displays dates and times in human-readable styles.
+ * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=2329-6519
+ *
+ * @preview
+ *
+ * <div class="grid grid-cols-2 gap-4">
+ *   <div class="text-foreground text-sm font-medium">Default:</div> <Date date="2025-06-13T12:00:00Z" />
+ *   <Separator class="col-span-2" />
+ *   <div class="text-foreground text-sm font-medium">Short:</div> <Date date="2025-06-13T12:00:00Z" format="short" />
+ *   <Separator class="col-span-2" />
+ *   <div class="text-foreground text-sm font-medium">Time:</div> <Date date="2025-06-13T12:00:00Z" format="time" />
+ *   <Separator class="col-span-2" />
+ *   <div class="text-foreground text-sm font-medium">Full:</div> <Date date="2025-06-13T12:00:00Z" format="full" />
+ *   <Separator class="col-span-2" />
+ *   <div class="text-foreground text-sm font-medium">Long:</div> <Date date="2025-06-13T12:00:00Z" format="long" />
+ *   <Separator class="col-span-2" />
+ *   <div class="text-foreground text-sm font-medium">Long with time:</div> <Date date="2025-06-13T12:00:00Z" format="long" includeTime />
+ * </div>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { Date } from '@bejamas/ui/components/date';
+ * ---
+ *
+ * <Date date="2025-06-24T12:00:00Z" />
+ * ```
+ *
+ * @examples
+ *
+ * ### Custom locale
+ *
+ * <div class="flex gap-2 flex-col">
+ *   <Date date="2025-06-24T12:00:00Z" locale="fr-FR" />
+ *   <Date date="2025-06-24T12:00:00Z" locale="de-DE" />
+ *   <Date date="2025-06-24T12:00:00Z" locale="es-ES" />
+ *   <Date date="2025-06-24T12:00:00Z" locale="pl-PL" />
+ * </div>
+ */
+const {
+  date,
+  format = "long",
+  includeTime = false,
+  locale = "en-US",
+  class: className = "",
+  ...props
+} = Astro.props;
+
+// Helper: parse date input
+function parseDate(input: string | globalThis.Date | null | undefined) {
+  if (!input) return null;
+  if (input instanceof globalThis.Date) return input;
+  // Try to parse string
+  const d = new globalThis.Date(input);
+  return isNaN(d.getTime()) ? null : d;
+}
+
+const parsedDate = parseDate(date);
+
+// Precompute separate date and time strings to support custom rendering via slot
+let dateText = "";
+let timeText = "";
+let formatted = "";
+let html = "";
+if (parsedDate) {
+  let dateOptions: Intl.DateTimeFormatOptions | undefined;
+  switch (format) {
+    case "short":
+      dateOptions = { dateStyle: "short" };
+      break;
+    case "full":
+      dateOptions = { dateStyle: "full" };
+      break;
+    case "time":
+      dateOptions = undefined;
+      break;
+    case "long":
+    default:
+      dateOptions = { dateStyle: "long" };
+      break;
+  }
+  if (dateOptions) {
+    dateText = new Intl.DateTimeFormat(locale, dateOptions).format(parsedDate);
+  }
+  if (includeTime || format === "time") {
+    timeText = new Intl.DateTimeFormat(locale, { timeStyle: "short" }).format(
+      parsedDate,
+    );
+  }
+  formatted =
+    format === "time"
+      ? timeText
+      : includeTime && timeText
+        ? `${dateText}, ${timeText}`
+        : dateText;
+
+  if (Astro.slots.has("default")) {
+    html = await Astro.slots.render("default", [
+      {
+        date: dateText,
+        time: timeText,
+        formatted,
+        iso: parsedDate.toISOString(),
+        dateObj: parsedDate,
+      },
+    ]);
+  }
+}
+---
+
+{
+  parsedDate ? (
+    Astro.slots.has("default") ? (
+      <Fragment set:html={html} />
+    ) : (
+      <time
+        datetime={parsedDate.toISOString()}
+        class={cn("text-foreground text-sm", className)}
+        {...props}
+      >
+        {formatted}
+      </time>
+    )
+  ) : (
+    <span
+      class={cn("text-destructive", className)}
+      {...props}
+    >
+      Invalid date
+    </span>
+  )
+}

package/src/components/date/index.ts

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

package/src/components/dialog/CHANGELOG.md

@@ -1,39 +1,39 @@
-# Changelog
-
-All notable changes to the `Dialog` component family (`Dialog`, `DialogTrigger`, `DialogContent`, `DialogOverlay`, `DialogHeader`, `DialogFooter`, `DialogTitle`, `DialogDescription`, `DialogClose`) are documented in this file.
-
-## Earlier (commit `c3cec7d`, undocumented at the time)
-
-- `DialogContent`: `rounded-xl` → `rounded-lg` (Figma binds 8px radius).
-- `DialogTitle`: `font-medium` → `font-semibold` (Figma title token is Semi Bold/600).
-- Added `Dialog.stories.ts`/`DialogStory.astro` (astrobook preview scaffolding).
-
-No changelog entry was added at the time — backfilled here for a complete history. Everything else in the family (`Dialog.astro`, `DialogTrigger`, `DialogOverlay`, `DialogHeader`, `DialogFooter`, `DialogDescription`, `DialogClose`, `index.ts`) was untouched since the original Bejamas import until this pass.
-
-## 2026-09-09 — Figma alignment (ClickLearn Lightning Design Library, node `141-6002`)
-
-Figma shows a single "Opened" dialog state (a cookie-consent example: title, description, content slot, and a Close/Save-changes action row), which surfaced several real gaps beyond what `c3cec7d` had already fixed.
-
-### Fixed
-
-- `DialogContent`: panel background `bg-background` → `bg-card` — these are the same color in light mode but genuinely differ in dark mode (`--background` vs `--card`), so this was a real, if currently invisible, mismatch.
-- `DialogContent`: replaced the `ring-1 ring-foreground/10` approximation with an actual `border border-border` **and** `shadow-lg` — Figma's panel has both a visible 1px border and a distinct multi-layer drop shadow (explicitly annotated "shadow-lg" in the design tokens), not a single subtle ring.
-- `DialogContent`: **restructured** to match Figma's two-layer composition — an outer unpadded panel (bg/border/shadow/radius/position/animation only) now wraps an inner `<div class="grid gap-6 p-6 text-sm">` holding the slotted content, with the close button as a sibling of that inner wrapper rather than a child of it. Previously, the close button (`position: absolute`) was a child of the *padded* content div, so `top-4 right-4` was actually offset from the padding edge — i.e. 24px (padding) + 16px (`top-4`/`right-4`) = 40px from the panel's true corner, not the ~15px Figma shows. Now it's positioned relative to the outer unpadded panel, landing close to the corner as intended.
-- `DialogTitle`: was missing an explicit font-size entirely (relied on inherited/browser default) and used `leading-none` (line-height: 1). Figma specifies `text-xl` (20px) with a 24px line-height — added `text-xl leading-6`. Verified computed: `fontSize: 20px`, `lineHeight: 24px`.
-- `DialogClose`: was a bare, completely unstyled `<button>` — no hover state, no focus ring, no consistent sizing — despite every real usage example (`DialogStory.astro`, the storybook docs page, `Dialog.astro`'s own JSDoc) actually using the shared `Button` component for the footer's "Close" action instead. Figma's own close-button layer is literally named "Ghost" (matching `Button`'s `ghost` variant exactly). Rewrote `DialogClose` to render `<Button variant="ghost" size="icon-sm">` internally instead of a bare button, repositioned to `top-2 right-2` (matches the icon-button's own built-in padding placing the glyph near Figma's corner inset). Verified live: 32×32 hit area, correct hover/focus states inherited from `Button`.
-- Docs/examples (`Dialog.astro` JSDoc, `DialogStory.astro`, the storybook page): the footer's "Close" `Button` used `variant="outline"` (visible border) everywhere — but Figma's own layer name for that button is "Ghost" (no border, text-only until hover). Changed all three to `variant="ghost"`. **Reverted in the follow-up below** — the user confirmed the footer's secondary Close action should stay `outline`; the "Ghost" Figma layer name applies to the corner X close icon (`DialogClose`, see above), not this button.
-- `DialogFooter`: removed a dead, redundant `"gap-2"` first argument to `cn()` that was already superseded by `"flex justify-end gap-2"` later in the same call — the same class of bug `c3cec7d` fixed elsewhere (e.g. `TooltipContent`) but missed here.
-- `index.ts`: `DialogOverlay` existed and is used internally by `DialogContent` but was never exported, so consumers couldn't import or reference it by name. Added the export.
-- Updated `@figmaUrl` from the old Bejamas file to the ClickLearn Lightning Design Library link.
-
-### Notes
-
-- `DialogDescription` (`text-muted-foreground text-sm`) already matched Figma exactly — no change needed.
-- `DialogOverlay`'s `bg-black/10` backdrop color was left as-is — Figma's export didn't capture a visible backdrop to diff against, and a raw-black dimming overlay (rather than a theme-aware token) is a common, deliberate convention for modal backdrops regardless of light/dark theme.
-- The underlying `@data-slot/dialog` behavior library supports an `alertDialog` option that isn't exposed as a `Dialog` prop. Not added — Figma's file shows only one dialog variant, with no alert-dialog-specific visual spec to align against.
-- All values are token-based (`--card`, `--border`, `--foreground`, `--muted-foreground`, `--radius-lg`, Tailwind's `shadow-lg`) — no hardcoded arbitrary values introduced.
-
-### Fixed (follow-up)
-
-- Removed a leftover `border-red-800` demo class from the nested-dialog example (`Dialog.astro` JSDoc and the storybook docs page). It was inherited from the original Bejamas import and had been a silent no-op (no border-width utility was present to give it a visible width), but became visible once this pass added a real `border` to `DialogContent` — so it started rendering an unintended red border. The nested dialog now correctly falls back to the standard `border-border` color.
-- User correction: the footer's secondary "Close" `Button` (`Dialog.astro` JSDoc ×2, `DialogStory.astro`, the storybook page ×2) reverted from `variant="ghost"` back to `variant="outline"`. The corner X close icon (`DialogClose.astro`) stays `variant="ghost"`, matching Figma's "Ghost" layer name for that specific icon button — that layer name doesn't extend to the separate footer text button.
+# Changelog
+
+All notable changes to the `Dialog` component family (`Dialog`, `DialogTrigger`, `DialogContent`, `DialogOverlay`, `DialogHeader`, `DialogFooter`, `DialogTitle`, `DialogDescription`, `DialogClose`) are documented in this file.
+
+## Earlier (commit `c3cec7d`, undocumented at the time)
+
+- `DialogContent`: `rounded-xl` → `rounded-lg` (Figma binds 8px radius).
+- `DialogTitle`: `font-medium` → `font-semibold` (Figma title token is Semi Bold/600).
+- Added `Dialog.stories.ts`/`DialogStory.astro` (astrobook preview scaffolding).
+
+No changelog entry was added at the time — backfilled here for a complete history. Everything else in the family (`Dialog.astro`, `DialogTrigger`, `DialogOverlay`, `DialogHeader`, `DialogFooter`, `DialogDescription`, `DialogClose`, `index.ts`) was untouched since the original Bejamas import until this pass.
+
+## 2026-09-09 — Figma alignment (ClickLearn Lightning Design Library, node `141-6002`)
+
+Figma shows a single "Opened" dialog state (a cookie-consent example: title, description, content slot, and a Close/Save-changes action row), which surfaced several real gaps beyond what `c3cec7d` had already fixed.
+
+### Fixed
+
+- `DialogContent`: panel background `bg-background` → `bg-card` — these are the same color in light mode but genuinely differ in dark mode (`--background` vs `--card`), so this was a real, if currently invisible, mismatch.
+- `DialogContent`: replaced the `ring-1 ring-foreground/10` approximation with an actual `border border-border` **and** `shadow-lg` — Figma's panel has both a visible 1px border and a distinct multi-layer drop shadow (explicitly annotated "shadow-lg" in the design tokens), not a single subtle ring.
+- `DialogContent`: **restructured** to match Figma's two-layer composition — an outer unpadded panel (bg/border/shadow/radius/position/animation only) now wraps an inner `<div class="grid gap-6 p-6 text-sm">` holding the slotted content, with the close button as a sibling of that inner wrapper rather than a child of it. Previously, the close button (`position: absolute`) was a child of the *padded* content div, so `top-4 right-4` was actually offset from the padding edge — i.e. 24px (padding) + 16px (`top-4`/`right-4`) = 40px from the panel's true corner, not the ~15px Figma shows. Now it's positioned relative to the outer unpadded panel, landing close to the corner as intended.
+- `DialogTitle`: was missing an explicit font-size entirely (relied on inherited/browser default) and used `leading-none` (line-height: 1). Figma specifies `text-xl` (20px) with a 24px line-height — added `text-xl leading-6`. Verified computed: `fontSize: 20px`, `lineHeight: 24px`.
+- `DialogClose`: was a bare, completely unstyled `<button>` — no hover state, no focus ring, no consistent sizing — despite every real usage example (`DialogStory.astro`, the storybook docs page, `Dialog.astro`'s own JSDoc) actually using the shared `Button` component for the footer's "Close" action instead. Figma's own close-button layer is literally named "Ghost" (matching `Button`'s `ghost` variant exactly). Rewrote `DialogClose` to render `<Button variant="ghost" size="icon-sm">` internally instead of a bare button, repositioned to `top-2 right-2` (matches the icon-button's own built-in padding placing the glyph near Figma's corner inset). Verified live: 32×32 hit area, correct hover/focus states inherited from `Button`.
+- Docs/examples (`Dialog.astro` JSDoc, `DialogStory.astro`, the storybook page): the footer's "Close" `Button` used `variant="outline"` (visible border) everywhere — but Figma's own layer name for that button is "Ghost" (no border, text-only until hover). Changed all three to `variant="ghost"`. **Reverted in the follow-up below** — the user confirmed the footer's secondary Close action should stay `outline`; the "Ghost" Figma layer name applies to the corner X close icon (`DialogClose`, see above), not this button.
+- `DialogFooter`: removed a dead, redundant `"gap-2"` first argument to `cn()` that was already superseded by `"flex justify-end gap-2"` later in the same call — the same class of bug `c3cec7d` fixed elsewhere (e.g. `TooltipContent`) but missed here.
+- `index.ts`: `DialogOverlay` existed and is used internally by `DialogContent` but was never exported, so consumers couldn't import or reference it by name. Added the export.
+- Updated `@figmaUrl` from the old Bejamas file to the ClickLearn Lightning Design Library link.
+
+### Notes
+
+- `DialogDescription` (`text-muted-foreground text-sm`) already matched Figma exactly — no change needed.
+- `DialogOverlay`'s `bg-black/10` backdrop color was left as-is — Figma's export didn't capture a visible backdrop to diff against, and a raw-black dimming overlay (rather than a theme-aware token) is a common, deliberate convention for modal backdrops regardless of light/dark theme.
+- The underlying `@data-slot/dialog` behavior library supports an `alertDialog` option that isn't exposed as a `Dialog` prop. Not added — Figma's file shows only one dialog variant, with no alert-dialog-specific visual spec to align against.
+- All values are token-based (`--card`, `--border`, `--foreground`, `--muted-foreground`, `--radius-lg`, Tailwind's `shadow-lg`) — no hardcoded arbitrary values introduced.
+
+### Fixed (follow-up)
+
+- Removed a leftover `border-red-800` demo class from the nested-dialog example (`Dialog.astro` JSDoc and the storybook docs page). It was inherited from the original Bejamas import and had been a silent no-op (no border-width utility was present to give it a visible width), but became visible once this pass added a real `border` to `DialogContent` — so it started rendering an unintended red border. The nested dialog now correctly falls back to the standard `border-border` color.
+- User correction: the footer's secondary "Close" `Button` (`Dialog.astro` JSDoc ×2, `DialogStory.astro`, the storybook page ×2) reverted from `variant="ghost"` back to `variant="outline"`. The corner X close icon (`DialogClose.astro`) stays `variant="ghost"`, matching Figma's "Ghost" layer name for that specific icon button — that layer name doesn't extend to the separate footer text button.