@glasshome/ui 1.1.0 → 1.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@glasshome/ui",
-	"version": "1.1.0",
+	"version": "1.1.2",
 	"description": "SolidJS component library for GlassHome, built on Kobalte",
 	"type": "module",
 	"homepage": "https://github.com/glasshome/ui#readme",

package/src/astro/Alert.astro

@@ -1,11 +1,4 @@
 ---
-/**
- * Static tone alert/callout for Astro / SSR pages — the same `ALERT_TONES` table
- * and surface recipe the Solid <Alert> and hub's docs Callout use, rendered as
- * plain HTML with zero JS and the lucide glyph inlined as SVG (no icon runtime).
- * Drop this into `.astro` markup instead of hand-writing a
- * `rounded-lg border border-primary/40 bg-primary/10` note box.
- */
 import {
 	ALERT_CLASS,
 	ALERT_CONTENT_CLASS,
@@ -19,12 +12,19 @@ import {
 	cn,
 	glassToneText,
 } from "@glasshome/ui";
+/**
+ * Static tone alert/callout for Astro / SSR pages — the same `ALERT_TONES` table
+ * and surface recipe the Solid <Alert> and hub's docs Callout use, rendered as
+ * plain HTML with zero JS and the lucide glyph inlined as SVG (no icon runtime).
+ * Drop this into `.astro` markup instead of hand-writing a
+ * `rounded-lg border border-primary/40 bg-primary/10` note box.
+ */
+import type { HTMLAttributes } from "astro/types";
 
-interface Props {
+interface Props extends HTMLAttributes<"div"> {
 	tone?: AlertTone;
 	/** Bold heading line. Optional. */
 	title?: string;
-	class?: string;
 }
 
 const { tone = "info", title, class: className, ...rest } = Astro.props;

package/src/astro/Badge.astro

@@ -1,12 +1,14 @@
 ---
+import type { HTMLTag, Polymorphic } from "astro/types";
 import { BADGE_DEFAULT_TONE, BADGE_TONE_CLASS } from "../lib/badge-tone";
 import { cn } from "../lib/utils";
 
-interface Props {
+// Polymorphic because `as` changes the rendered tag: everything not
+// destructured below is spread onto it, so that tag's attributes must be
+// accepted.
+type Props<Tag extends HTMLTag = "span"> = Polymorphic<{ as: Tag }> & {
 	tone?: string;
-	as?: keyof HTMLElementTagNameMap;
-	class?: string;
-}
+};
 
 const { tone = BADGE_DEFAULT_TONE, as: Tag = "span", class: className, ...rest } = Astro.props;
 ---

package/src/astro/Button.astro

@@ -1,4 +1,7 @@
 ---
+import { buttonVariants, cn } from "@glasshome/ui";
+import type { HTMLAttributes } from "astro/types";
+
 /**
  * Static button/CTA for Astro / SSR pages — the same `buttonVariants` recipe the
  * Solid <Button> uses, rendered as a plain <a>/<button> with zero JS. Drop this
@@ -9,15 +12,16 @@
  * (sizeless: color + shape only) so marketing CTAs supply their own height and
  * padding via `class`, matching how the hub pill tokens are used.
  */
-import { buttonVariants, cn } from "@glasshome/ui";
 
-interface Props {
-	variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
-	size?: "default" | "sm" | "lg" | "icon" | "none";
-	href?: string;
-	type?: "button" | "submit" | "reset";
-	class?: string;
-}
+// Renders <a> when href is set, <button> otherwise. `type` is omitted from the
+// button attributes because this component narrows it to the three form values.
+type Props = Omit<HTMLAttributes<"button">, "type"> &
+	Partial<Pick<HTMLAttributes<"a">, "target" | "rel" | "download">> & {
+		variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
+		size?: "default" | "sm" | "lg" | "icon" | "none";
+		href?: string;
+		type?: "button" | "submit" | "reset";
+	};
 
 const {
 	variant = "default",

package/src/astro/Card.astro

@@ -1,4 +1,5 @@
 ---
+import type { HTMLAttributes } from "astro/types";
 import {
 	CARD_INTERACTIVE,
 	CARD_PADDING,
@@ -8,12 +9,20 @@ import {
 } from "../lib/card-classes";
 import { cn } from "../lib/utils";
 
-interface Props {
+// Everything not destructured below is spread onto the rendered tag, so its
+// attributes must be accepted. Not Polymorphic<>: call sites pick the tag at
+// runtime (`as={href ? "a" : "div"}`), which widens to a union that a generic
+// tag parameter cannot resolve. The div attributes are the base; the handful
+// belonging to the other tags this is used as are named.
+interface Props
+	extends HTMLAttributes<"div">,
+		Partial<Pick<HTMLAttributes<"a">, "href" | "target" | "rel">>,
+		Partial<Pick<HTMLAttributes<"details">, "name" | "open">> {
 	as?: keyof HTMLElementTagNameMap;
 	interactive?: boolean;
 	opaque?: boolean;
 	padding?: CardPadding;
-	class?: string;
+	type?: "button" | "submit" | "reset";
 }
 
 const {

package/src/astro/Carousel.astro

@@ -7,6 +7,7 @@
  * Slides go in the default slot as <CarouselItem>-shaped elements, or pass
  * `count` to have dots rendered for you.
  */
+import type { HTMLAttributes } from "astro/types";
 import {
 	CAROUSEL_DOTS,
 	CAROUSEL_VIEWPORT,
@@ -16,14 +17,16 @@ import {
 } from "../lib/carousel-classes";
 import { cn } from "../lib/utils";
 
-interface Props {
+// Extends div attributes because everything not destructured below is spread
+// onto the root; without it a caller's style/role/aria-* is a type error while
+// still working at runtime.
+interface Props extends HTMLAttributes<"div"> {
 	transition?: CarouselTransition;
 	/** Advance every N ms. Skipped under prefers-reduced-motion. */
 	autoplay?: number;
 	loop?: boolean;
 	/** Slide count; when set, dots are rendered. */
 	count?: number;
-	class?: string;
 }
 
 const {

package/src/astro/Logo.astro

@@ -1,14 +1,4 @@
 ---
-/**
- * The GlassHome lockup for Astro / SSR pages — the same spec the Solid <Logo>
- * renders, as plain HTML with zero JS. Use this instead of hand-building a
- * mark + "GlassHome" + sub-line stack; that is how the lockup ended up in six
- * shapes across the repos.
- *
- * `href` renders the whole lockup as a link. The `sub` slot replaces the
- * sub-brand line for surfaces that animate over it (e.g. hub's launch
- * countdown cross-fade); it inherits nothing, so pass LOGO_SUB_CLASS yourself.
- */
 import {
 	cn,
 	LOGO_DEFAULT_SIZE,
@@ -23,8 +13,23 @@ import {
 	LOGO_SUB_CLASS,
 	type LogoSize,
 } from "@glasshome/ui";
+/**
+ * The GlassHome lockup for Astro / SSR pages — the same spec the Solid <Logo>
+ * renders, as plain HTML with zero JS. Use this instead of hand-building a
+ * mark + "GlassHome" + sub-line stack; that is how the lockup ended up in six
+ * shapes across the repos.
+ *
+ * `href` renders the whole lockup as a link. The `sub` slot replaces the
+ * sub-brand line for surfaces that animate over it (e.g. hub's launch
+ * countdown cross-fade); it inherits nothing, so pass LOGO_SUB_CLASS yourself.
+ */
+import type { HTMLAttributes } from "astro/types";
 
-interface Props {
+// Renders <a> when href is set, <div> otherwise, so the div attributes are the
+// common base and the anchor-only ones a lockup link actually wants are added.
+interface Props
+	extends HTMLAttributes<"div">,
+		Partial<Pick<HTMLAttributes<"a">, "target" | "rel">> {
 	/** Sub-brand line. Defaults to "Dash". */
 	sub?: string;
 	size?: LogoSize;
@@ -32,7 +37,6 @@ interface Props {
 	href?: string;
 	/** Override the mark asset. Both apps serve the default path. */
 	src?: string;
-	class?: string;
 	/** Extra classes for the mark, e.g. a hover transform. */
 	markClass?: string;
 }

package/src/astro/TierBadge.astro

@@ -4,10 +4,11 @@
  * FOUNDER) — the same tier tokens the Solid <TierBadge> uses, rendered as plain
  * HTML with zero JS. One family; only the hi/lo/text triplet changes per tier.
  */
+import type { HTMLAttributes } from "astro/types";
 import { TIER_BADGE_CLASS, tierBadgeStyle } from "../lib/tier-badge";
 import { cn } from "../lib/utils";
 
-interface Props {
+interface Props extends HTMLAttributes<"span"> {
 	/** Gradient high stop (the near end of the diagonal sweep, and by default
 	 *  the far end too). */
 	hi: string;
@@ -19,7 +20,6 @@ interface Props {
 	end?: string;
 	/** Where `lo` sits, in percent. Default: 50. */
 	stop?: number;
-	class?: string;
 }
 
 const { hi, lo, text, end, stop, class: className, ...rest } = Astro.props;