@dogsbay/ui 0.2.0-beta.121 → 0.2.0-beta.123

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dogsbay/ui",
-  "version": "0.2.0-beta.121",
+  "version": "0.2.0-beta.123",
   "description": "Accessible UI components for Astro, inspired by Base UI and shadcn",
   "type": "module",
   "exports": {
@@ -22,9 +22,9 @@
     "katex": "^0.16.47",
     "maplibre-gl": "^5.24.0",
     "shiki": "^4.3.1",
-    "@dogsbay/elements": "0.2.0-beta.121",
-    "@dogsbay/icons": "0.2.0-beta.121",
-    "@dogsbay/primitives": "0.2.0-beta.121"
+    "@dogsbay/elements": "0.2.0-beta.123",
+    "@dogsbay/icons": "0.2.0-beta.123",
+    "@dogsbay/primitives": "0.2.0-beta.123"
   },
   "files": [
     "src",

package/src/alert/CollapsibleAlert.astro

@@ -81,9 +81,12 @@ interface Props {
   /** Whether the details starts open */
   open?: boolean;
   class?: string;
+  /** id, data-*, aria-*: passed to the <details> (an `id` is a link target) */
+  [key: string]: unknown;
 }
 
-const { variant = "note", title, open = false, class: className } = Astro.props;
+// `icon` is accepted (the serializer passes it) but not drawn: the variant sets the icon
+const { variant = "note", title, open = false, class: className, icon: _icon, ...rest } = Astro.props;
 const v = variant || "note";
 
 // `plain` is chrome — a disclosure, nothing more. No role at all:
@@ -104,6 +107,7 @@ const icon = contentVariants.has(v) ? icons[v] : null;
   class:list={[wrapper({ variant, class: className }), "group/collapsible"]}
   data-variant={variant}
   open={open}
+  {...rest}
 >
   <summary class:list={[
     "flex cursor-pointer items-center gap-2 px-4 py-3 text-sm font-semibold select-none",

package/src/badge/variants.ts

@@ -32,6 +32,8 @@ export type BadgeVariant = keyof typeof BADGE_VARIANTS;
 
 /** The class list for a variant; an unknown variant gets the base classes only. */
 export function badgeClass(variant: string | undefined): string {
-  const v = BADGE_VARIANTS[(variant ?? "default") as BadgeVariant];
+  // Own keys only: `toString` or `__proto__` must not read Object.prototype
+  const key = variant ?? "default";
+  const v = Object.prototype.hasOwnProperty.call(BADGE_VARIANTS, key) ? BADGE_VARIANTS[key as BadgeVariant] : undefined;
   return v ? `${BADGE_BASE} ${v}` : BADGE_BASE;
 }

package/src/details-sheet/DetailsSheet.astro

@@ -0,0 +1,28 @@
+---
+/**
+ * DetailsSheet — wraps a CollapsibleAlert (a <details>) so it opens as a
+ * side sheet. The markup stays a working <details>: with no script the
+ * content is a normal collapsible block. `<db-details-sheet>` (from
+ * @dogsbay/elements) moves the body into a native modal <dialog> on the right
+ * while it is open.
+ *
+ * Usage:
+ *   <DetailsSheet>
+ *     <CollapsibleAlert title="Advanced options">…</CollapsibleAlert>
+ *   </DetailsSheet>
+ */
+interface Props {
+  /** The close button's accessible name */
+  closeLabel?: string;
+}
+
+const { closeLabel = "Close" } = Astro.props;
+---
+
+<db-details-sheet close-label={closeLabel}>
+  <slot />
+</db-details-sheet>
+
+<script>
+  import "@dogsbay/elements/db-details-sheet";
+</script>

package/src/details-sheet/index.ts

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

package/src/link-card/LinkCard.astro

@@ -3,7 +3,8 @@ import { tv } from "tailwind-variants";
 import Icon from "../icon/Icon.astro";
 
 const linkCard = tv({
-  base: "group flex flex-col gap-1 rounded-lg border bg-card p-4 text-card-foreground shadow-sm transition-colors hover:bg-accent/50",
+  // not-prose: the page's link underline would otherwise run under every line of the card
+  base: "not-prose group flex flex-col gap-1 rounded-lg border bg-card p-4 text-card-foreground no-underline shadow-sm transition-colors hover:bg-accent/50",
 });
 
 const linkCardTitle = tv({

package/src/youtube/YouTube.astro

@@ -55,10 +55,10 @@ const embedUrl = `https://${domain}/embed/${id}?autoplay=1${params ? "&" + param
   tabindex="0"
   aria-label={`Play: ${title}`}
 >
-  {/* Thumbnail */}
+  {/* Thumbnail: decorative, the button's label already says "Play: <title>" (axe image-redundant-alt) */}
   <img
     src={posterUrl}
-    alt={title}
+    alt=""
     loading="lazy"
     class="absolute inset-0 h-full w-full object-cover transition-opacity duration-300 group-hover/yt:opacity-80"
   />