Refresh portable blocks and align component contracts

.changeset/block-props-simplification.md

@@ -0,0 +1,15 @@
+---
+"fulldev-ui": minor
+---
+
+Simplify block props and improve block semantics (breaking).
+
+- Blocks drop unused fields and button variants: button styles are fixed in each block. User-facing copy such as screen reader labels, close labels and rating labels is passed in by the caller. Banner1 takes an optional `storageKey` for dismissal instead of a shared hardcoded key. `BannerContainer` gains an optional `closeLabel` and `Sidebar` gains optional `mobileTitle` and `mobileDescription`.
+- `SectionContainer` only sets width, gutter and position. It no longer adds `flex flex-col gap-8`; add the layout classes your content needs, such as `class="flex flex-col gap-8"`.
+- Marquee renders its items once and moves them with Embla and its Auto Scroll plugin. Compose it from `Marquee`, `MarqueeContent` (`reverse` replaces `direction`), `MarqueeItem` and `MarqueeToggle` (`playLabel`, `pauseLabel`). It stays static without an enabled, visible toggle, with reduced motion, or when the items do not fill the row. The `duration`, `gap`, `infinite` and `pauseOnHover` props are removed; set `--marquee-gap` for spacing. Logos2, Reviews4 and Reviews5 take `labels: { play, pause }`.
+- `PriceValue` takes `discountLabel` for the savings badge, keeps a `0` price or compare-at price, and only shows a compare-at price above the price. Pricing1-3, Product1 and Products1-5 take `locale` and `discountLabel`, and every price is `{ value, compareAt?, currency, unit }`. Pricing2 emphasizes plans with `featured` instead of the first plan.
+- Header1-5 render their `buttons` in the mobile menu too and no longer have a default or `mobile` slot. Buttons always show their label and open in the same tab unless they set `target: "_blank"`. The logo takes typed images without `alt`, and Header4 and Header5 menu images are decorative.
+- Features1 and Features4 take `link?: { label, href }` instead of `href` and `linkText`. Services4 and Services5 take a `link` per service instead of `linkLabel`.
+- Contact1-3 render your form from their default slot instead of building one from `form` props. Contact items link their visible text.
+- Sidebar1 takes `currentPath` and native attributes for its root, and `labels.sidebar` names the sidebar while `labels.sidebarToggle` names its trigger.
+- Hero1's badge is optional. Background images in Hero3, Hero4, Hero9-11 and CTA4 are decorative and take no `alt`; social proof avatars no longer take `name`.

astro.config.ts

@@ -38,7 +38,7 @@ export default defineConfig({
     processor: unified(),
     shikiConfig: {
       themes: {
-        light: "github-light",
+        light: "github-light-high-contrast",
         dark: "github-dark-default",
       },
     },

package.json

@@ -62,6 +62,7 @@
     "images": "node scripts/images.ts",
     "ui:add": "node scripts/ui-add.ts",
     "build": "astro build && html-validate dist && linkinator dist",
+    "a11y": "pnpm build && playwright install chromium --only-shell && node scripts/a11y.mjs",
     "registry:build": "pnpm registry:meta && node scripts/registry-adapt.mjs && shadcn build --output node_modules/.cache/fulldev-registry && node scripts/registry-styles.mjs && prettier --write registry.json public/r registry/styles/adapted --log-level warn",
     "registry:check": "pnpm registry:validate && pnpm registry:build && git diff --exit-code -- registry.json public/r registry/styles/adapted",
     "registry:validate": "node scripts/registry-validate.mjs",
@@ -97,6 +98,7 @@
     "class-variance-authority": "^0.7.1",
     "cn": "^0.4.0",
     "embla-carousel": "8.6.0",
+    "embla-carousel-auto-scroll": "8.6.0",
     "lucide-static": "^1.49.0",
     "shadcn": "^4.21.0",
     "simple-icons": "^16.33.0",
@@ -111,6 +113,7 @@
     "@astrojs/markdown-remark": "^7.3.1",
     "@astrojs/mdx": "^8.0.2",
     "@astrojs/sitemap": "^3.7.4",
+    "@axe-core/playwright": "4.13.0",
     "@changesets/changelog-github": "^0.7.0",
     "@changesets/cli": "^2.31.0",
     "@eslint/js": "^10.0.1",
@@ -128,6 +131,7 @@
     "html-validate": "^11.16.1",
     "knip": "^6.39.0",
     "linkinator": "^8.1.0",
+    "playwright": "1.64.0",
     "posthog-js": "1.434.15",
     "prettier": "^3.9.9",
     "prettier-plugin-astro": "^1.1.0",

public/r/article-1.json

@@ -5,13 +5,12 @@
   "description": "Editorial article layouts for long-form stories, interviews, and analysis.",
   "registryDependencies": [
     "@fulldev/avatar",
-    "@fulldev/badge",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/article-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"mx-auto max-w-2xl gap-8\">\n    <div class=\"mx-auto flex w-full max-w-2xl flex-col gap-6\">\n      {badge && (\n        <Badge variant=\"secondary\" class=\"w-fit\">\n          {badge}\n        </Badge>\n      )}\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={author.image} alt={author.name} />\n          <AvatarFallback>{author.initials}</AvatarFallback>\n        </Avatar>\n        <div class=\"flex flex-col\">\n          <p class=\"text-sm font-medium\">{author.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{author.date}</p>\n        </div>\n      </div>\n    </div>\n\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n      widths={[640, 960]}\n      sizes=\"(min-width: 42rem) 42rem, 100vw\"\n    />\n\n    <article class=\"mx-auto flex w-full max-w-2xl flex-col gap-6 text-base leading-8\">\n      <slot />\n    </article>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"max-w-2xl\">\n    <article class=\"flex flex-col gap-8\">\n      <header class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-col gap-4\">\n          <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n            {title}\n          </h1>\n          <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n            {description}\n          </p>\n        </div>\n        <div class=\"flex items-center gap-3\">\n          <Avatar size=\"lg\" aria-hidden=\"true\">\n            <AvatarImage src={author.image} />\n            <AvatarFallback>{author.initials}</AvatarFallback>\n          </Avatar>\n          <div class=\"flex flex-col\">\n            <p class=\"text-sm font-medium\">{author.name}</p>\n            <p class=\"text-muted-foreground text-xs\">{author.date}</p>\n          </div>\n        </div>\n      </header>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 42rem) 42rem, 100vw\"\n        loading=\"eager\"\n        fetchpriority=\"high\"\n      />\n      <div class=\"flex flex-col gap-6 text-base leading-8\">\n        <slot />\n      </div>\n    </article>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],

public/r/article-2.json

@@ -5,13 +5,12 @@
   "description": "Editorial article layouts for long-form stories, interviews, and analysis.",
   "registryDependencies": [
     "@fulldev/avatar",
-    "@fulldev/badge",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/article-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n    readingTime: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"mx-auto max-w-2xl items-center gap-8 text-center\">\n    <div class=\"mx-auto flex w-full max-w-2xl flex-col items-center gap-6\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={author.image} alt={author.name} />\n          <AvatarFallback>{author.initials}</AvatarFallback>\n        </Avatar>\n        <div class=\"flex flex-col text-left\">\n          <p class=\"text-sm font-medium\">\n            {author.name}{\" \"}\n            <span class=\"text-muted-foreground font-normal\">\n              &middot; {author.date}\n            </span>\n          </p>\n          <p class=\"text-muted-foreground text-xs\">{author.readingTime}</p>\n        </div>\n      </div>\n    </div>\n\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n      widths={[640, 960]}\n      sizes=\"(min-width: 42rem) 42rem, 100vw\"\n    />\n\n    <article class=\"mx-auto flex w-full max-w-2xl flex-col gap-6 text-left text-base leading-8\">\n      <slot />\n    </article>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n    readingTime: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"max-w-2xl\">\n    <article class=\"flex flex-col gap-8\">\n      <header class=\"flex flex-col items-center gap-6 text-center\">\n        <div class=\"flex flex-col gap-4\">\n          <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n            {title}\n          </h1>\n          <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n            {description}\n          </p>\n        </div>\n        <div class=\"flex items-center gap-3\">\n          <Avatar size=\"lg\" aria-hidden=\"true\">\n            <AvatarImage src={author.image} />\n            <AvatarFallback>{author.initials}</AvatarFallback>\n          </Avatar>\n          <div class=\"flex flex-col text-left\">\n            <p class=\"text-sm font-medium\">\n              {author.name}{\" \"}\n              <span class=\"text-muted-foreground font-normal\">\n                &middot; {author.date}\n              </span>\n            </p>\n            <p class=\"text-muted-foreground text-xs\">{author.readingTime}</p>\n          </div>\n        </div>\n      </header>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 42rem) 42rem, 100vw\"\n        loading=\"eager\"\n        fetchpriority=\"high\"\n      />\n      <div class=\"flex flex-col gap-6 text-base leading-8\">\n        <slot />\n      </div>\n    </article>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],