@contentrain/astro-kit 0.32.0 → 0.33.1

package/components/nav/fixtures.json

@@ -77,5 +77,170 @@
         }
       ]
     }
+  },
+  {
+    "name": "ps-flyout",
+    "props": {
+      "id": "fx-nav-ps",
+      "items": [
+        {
+          "label": "Hakkımızda",
+          "href": "/hakkimizda/"
+        },
+        {
+          "label": "Ürünlerimiz",
+          "href": "#",
+          "children": [
+            {
+              "label": "Aracım İçin",
+              "href": "#",
+              "children": [
+                {
+                  "label": "Trafik Sigortası",
+                  "href": "/urunlerimiz/trafik-sigortasi/"
+                },
+                {
+                  "label": "Kasko",
+                  "href": "/urunlerimiz/kasko/"
+                }
+              ]
+            },
+            {
+              "label": "Evim İçin",
+              "href": "#",
+              "children": [
+                {
+                  "label": "Dask",
+                  "href": "/urunlerimiz/dask/"
+                },
+                {
+                  "label": "Konut Sigortası",
+                  "href": "/urunlerimiz/konut-sigortasi/"
+                }
+              ]
+            },
+            {
+              "label": "Sağlığım İçin",
+              "href": "#",
+              "children": [
+                {
+                  "label": "Sağlık Sigortası",
+                  "href": "/urunlerimiz/saglik-sigortasi/"
+                },
+                {
+                  "label": "Tamamlayıcı Sağlık",
+                  "href": "/urunlerimiz/tamamlayici-saglik/"
+                }
+              ]
+            },
+            {
+              "label": "Diğer",
+              "href": "#",
+              "children": [
+                {
+                  "label": "İş Yeri Sigortası",
+                  "href": "/urunlerimiz/is-yeri-sigortasi/"
+                },
+                {
+                  "label": "Seyahat Sigortası",
+                  "href": "/urunlerimiz/seyahat-sigortasi/"
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "label": "Anlaşmalı Sigorta Şirketleri",
+          "href": "/anlasmali-sigorta-sirketleri/"
+        },
+        {
+          "label": "İletişim",
+          "href": "/iletisim/"
+        }
+      ]
+    }
+  },
+  {
+    "name": "ps-mega",
+    "props": {
+      "id": "fx-nav-ps-mega",
+      "menu": "mega",
+      "items": [
+        {
+          "label": "Hakkımızda",
+          "href": "/hakkimizda/"
+        },
+        {
+          "label": "Ürünlerimiz",
+          "href": "#",
+          "children": [
+            {
+              "label": "Aracım İçin",
+              "href": "#",
+              "children": [
+                {
+                  "label": "Trafik Sigortası",
+                  "href": "/urunlerimiz/trafik-sigortasi/"
+                },
+                {
+                  "label": "Kasko",
+                  "href": "/urunlerimiz/kasko/"
+                }
+              ]
+            },
+            {
+              "label": "Evim İçin",
+              "href": "#",
+              "children": [
+                {
+                  "label": "Dask",
+                  "href": "/urunlerimiz/dask/"
+                },
+                {
+                  "label": "Konut Sigortası",
+                  "href": "/urunlerimiz/konut-sigortasi/"
+                }
+              ]
+            },
+            {
+              "label": "Sağlığım İçin",
+              "href": "#",
+              "children": [
+                {
+                  "label": "Sağlık Sigortası",
+                  "href": "/urunlerimiz/saglik-sigortasi/"
+                },
+                {
+                  "label": "Tamamlayıcı Sağlık",
+                  "href": "/urunlerimiz/tamamlayici-saglik/"
+                }
+              ]
+            },
+            {
+              "label": "Diğer",
+              "href": "#",
+              "children": [
+                {
+                  "label": "İş Yeri Sigortası",
+                  "href": "/urunlerimiz/is-yeri-sigortasi/"
+                },
+                {
+                  "label": "Seyahat Sigortası",
+                  "href": "/urunlerimiz/seyahat-sigortasi/"
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "label": "Anlaşmalı Sigorta Şirketleri",
+          "href": "/anlasmali-sigorta-sirketleri/"
+        },
+        {
+          "label": "İletişim",
+          "href": "/iletisim/"
+        }
+      ]
+    }
   }
 ]

package/components/nav/meta.json

@@ -1,10 +1,11 @@
 {
   "id": "nav",
   "name": "Navigation",
-  "description": "Site navigation: an inline list with hover/focus submenus on wide screens and a toggle on narrow ones that opens a native popover drawer or a <details> dropdown. No JavaScript.",
+  "description": "Site navigation: an inline list with hover/focus submenus on wide screens and a toggle on narrow ones that opens a native popover drawer or a <details> dropdown. Submenus nest to any depth; the mega variant draws them as a column panel. Works without JavaScript; a small script (only when a menu has submenus) keeps aria-expanded true and lets Escape close a panel.",
   "category": "chrome",
   "uses": [],
   "shared": [
+    "safe-url.ts",
     "types.ts"
   ],
   "variants": {
@@ -16,6 +17,14 @@
       "default": "popover",
       "description": "Narrow-screen menu: a side drawer (Popover API) or a dropdown under the toggle."
     },
+    "menu": {
+      "options": [
+        "flyout",
+        "mega"
+      ],
+      "default": "flyout",
+      "description": "How a submenu opens on wide screens: a list under the item (flyout) or a wide panel with one column per child and the grandchildren listed under it (mega)."
+    },
     "align": {
       "options": [
         "start",
@@ -107,5 +116,5 @@
       "classic/nav-menu"
     ]
   },
-  "a11y": "A <nav> landmark with a label; the current page carries aria-current. Submenus open on :focus-within as well as hover. The drawer is a native popover: Escape and light dismiss close it and focus returns to the toggle."
+  "a11y": "A <nav> landmark with a label; the current page carries aria-current. Each parent has a button (aria-controls its panel, labelled by the item) that opens the panel on hover and :focus-within; with the small script aria-expanded follows what is open and Escape closes the panel and returns focus to the button, as in the WAI-ARIA disclosure navigation pattern. Tab leaves a panel and closes it; nothing is hidden from crawlers (the panels are in the HTML). The drawer is a native popover: Escape and light dismiss close it and focus returns to the toggle."
 }

package/components/newsletter/Newsletter.astro

@@ -12,6 +12,7 @@ import { tv } from 'tailwind-variants'
 import Section from '../_shared/Section.astro'
 import type { MeasuredStyle } from '../_shared/types'
 import { newsletterForm } from './newsletter'
+import { safeUrl } from '../_shared/safe-url'
 
 const newsletter = tv({
   slots: {
@@ -91,7 +92,7 @@ const formRel: Record<string, string> = newTab ? { rel: 'noopener noreferrer' }
         </div>
       )}
       <div class="flex flex-col gap-2">
-        <form method="post" action={form.action} target={newTab ? '_blank' : undefined} {...formRel} class={s.form()} aria-labelledby={headingId} aria-label={headingId ? undefined : submitLabel}>
+        <form method="post" action={safeUrl(form.action)} target={newTab ? '_blank' : undefined} {...formRel} class={s.form()} aria-labelledby={headingId} aria-label={headingId ? undefined : submitLabel}>
           {askName && form.name && (
             <div class={s.field()}>
               <label for={`${id}-name`} class={s.label()}>{nameLabel}</label>

package/components/newsletter/meta.json

@@ -7,6 +7,7 @@
   "shared": [
     "Section.astro",
     "measured.ts",
+    "safe-url.ts",
     "types.ts"
   ],
   "variants": {

package/components/pagination/Pagination.astro

@@ -3,6 +3,7 @@
 // itself for page 1, `<base>page/<n>/` after — so a migrated archive keeps
 // its page URLs.
 import { tv } from 'tailwind-variants'
+import { safeHref } from '../_shared/safe-url'
 
 const pagination = tv({
   slots: {
@@ -52,7 +53,7 @@ const shown = [...new Set([1, current - 2, current - 1, current, current + 1, cu
 {total > 1 && (
   <nav aria-label={label} data-cr-part="pagination" class={slots.root()}>
     {current > 1
-      ? <a href={href(current - 1)} rel="prev" class:list={[slots.item(), slots.link()]}><span aria-hidden="true" class="inline-block rtl:-scale-x-100">←</span> <span class="max-sm:sr-only">{prevLabel}</span></a>
+      ? <a href={safeHref(href(current - 1))} rel="prev" class:list={[slots.item(), slots.link()]}><span aria-hidden="true" class="inline-block rtl:-scale-x-100">←</span> <span class="max-sm:sr-only">{prevLabel}</span></a>
       : style === 'simple' && <span />}
     {style === 'numbered' && shown.map((page, index) => (
       <>
@@ -60,10 +61,10 @@ const shown = [...new Set([1, current - 2, current - 1, current, current + 1, cu
         {/* Two away from the current page: dropped on phones so the row fits one line. */}
         {page === current
           ? <span aria-current="page" class:list={[slots.item(), slots.current()]}><span class="sr-only">{pageLabel} </span>{page}</span>
-          : <a href={href(page)} class:list={[slots.item(), slots.link(), Math.abs(page - current) === 2 && page !== 1 && page !== total && 'max-md:hidden']}><span class="sr-only">{pageLabel} </span>{page}</a>}
+          : <a href={safeHref(href(page))} class:list={[slots.item(), slots.link(), Math.abs(page - current) === 2 && page !== 1 && page !== total && 'max-md:hidden']}><span class="sr-only">{pageLabel} </span>{page}</a>}
       </>
     ))}
     {style === 'simple' && <span class="text-sm text-ink-muted">{pageLabel} {current} / {total}</span>}
-    {current < total && <a href={href(current + 1)} rel="next" class:list={[slots.item(), slots.link()]}><span class="max-sm:sr-only">{nextLabel}</span> <span aria-hidden="true" class="inline-block rtl:-scale-x-100">→</span></a>}
+    {current < total && <a href={safeHref(href(current + 1))} rel="next" class:list={[slots.item(), slots.link()]}><span class="max-sm:sr-only">{nextLabel}</span> <span aria-hidden="true" class="inline-block rtl:-scale-x-100">→</span></a>}
   </nav>
 )}

package/components/pagination/meta.json

@@ -4,7 +4,7 @@
   "description": "Links between the pages of a post list, at WordPress addresses (<base>page/<n>/).",
   "category": "content",
   "uses": [],
-  "shared": [],
+  "shared": ["safe-url.ts"],
   "variants": {
     "style": { "options": ["numbered", "simple"], "default": "numbered", "description": "Numbered pages with ellipses, or previous/next with 'Page n / m'." },
     "align": { "options": ["start", "center", "end"], "default": "center", "description": "Alignment of the numbered style." }

package/components/post-card/PostCard.astro

@@ -7,6 +7,7 @@
 import { tv } from 'tailwind-variants'
 import KitImage from '../_shared/KitImage.astro'
 import type { ImageInput, LinkInput } from '../_shared/types'
+import { safeHref } from '../_shared/safe-url'
 
 const card = tv({
   slots: {
@@ -79,18 +80,18 @@ const Heading = `h${headingLevel}` as 'h2' | 'h3'
   <div class={slots.body()}>
     {below && category && (
       <p class={slots.meta()}>
-        <a href={category.href} class="relative z-10 no-underline hover:underline">{category.label}</a>
+        <a href={safeHref(category.href)} class="relative z-10 no-underline hover:underline">{category.label}</a>
       </p>
     )}
     {!below && (category || date) && (
       <p class={slots.meta()}>
-        {category && <a href={category.href} class="relative z-10 font-medium text-accent-text no-underline hover:underline">{category.label}</a>}
+        {category && <a href={safeHref(category.href)} class="relative z-10 font-medium text-accent-text no-underline hover:underline">{category.label}</a>}
         {category && date && <span aria-hidden="true">·</span>}
         {date && <time datetime={date.toISOString()}>{shown}</time>}
       </p>
     )}
     <Heading class={slots.title({ class: linkTitle ? 'text-[color:var(--color-link,var(--color-accent))]' : undefined })}>
-      <a href={href} class="text-current no-underline after:absolute after:inset-0 after:content-[''] hover:text-accent-text">{title}</a>
+      <a href={safeHref(href)} class="text-current no-underline after:absolute after:inset-0 after:content-[''] hover:text-accent-text">{title}</a>
     </Heading>
     {below && (author || date) && (
       <p class={slots.meta()}>

package/components/post-card/meta.json

@@ -4,7 +4,7 @@
   "description": "One post in a list (index, archive, related posts): image, category, date, title, excerpt, author. The whole card links to the post.",
   "category": "content",
   "uses": [],
-  "shared": ["KitImage.astro", "types.ts"],
+  "shared": ["KitImage.astro", "safe-url.ts", "types.ts"],
   "variants": {
     "layout": { "options": ["vertical", "horizontal", "minimal"], "default": "vertical", "description": "Image on top, image beside the text, or text only with a divider." },
     "surface": { "options": ["plain", "card"], "default": "plain", "description": "plain: no surface. card: its own background (--color-card), radius and shadow (--shadow-card), the text padded (--spacing-card) and the image flush at the edge, as theme cards are drawn on a tinted page." },

package/components/post-list/PostList.astro

@@ -9,6 +9,7 @@ import { measuredGrid } from '../_shared/measured'
 import type { MeasuredStyle } from '../_shared/types'
 import PostCard from '../post-card/PostCard.astro'
 import type { ImageInput, LinkInput } from '../_shared/types'
+import { safeHref } from '../_shared/safe-url'
 
 export interface PostItem {
   title: string
@@ -93,7 +94,7 @@ const cardLayout = (i: number) => layout === 'compact' ? 'minimal' : layout ===
         <li>
           <PostCard
             title={post.title}
-            href={post.href}
+            href={safeHref(post.href)}
             excerpt={showExcerpt && layout !== 'compact' ? post.excerpt : undefined}
             date={post.date}
             locale={locale}
@@ -109,6 +110,6 @@ const cardLayout = (i: number) => layout === 'compact' ? 'minimal' : layout ===
         </li>
       ))}
     </ul>
-    {moreHref && moreLabel && <p class={s.more()}><a href={moreHref} class="font-medium text-accent-text underline underline-offset-4">{moreLabel}</a></p>}
+    {moreHref && moreLabel && <p class={s.more()}><a href={safeHref(moreHref)} class="font-medium text-accent-text underline underline-offset-4">{moreLabel}</a></p>}
   </Section>
 )}

package/components/post-list/meta.json

@@ -9,6 +9,7 @@
   "shared": [
     "Section.astro",
     "measured.ts",
+    "safe-url.ts",
     "types.ts"
   ],
   "variants": {

package/components/pricing/meta.json

@@ -8,6 +8,7 @@
     "Button.astro",
     "Section.astro",
     "measured.ts",
+    "safe-url.ts",
     "types.ts"
   ],
   "variants": {

package/components/search-box/SearchBox.astro

@@ -0,0 +1,51 @@
+---
+// A search field that sends the visitor to the site's search page (`/search?q=…`, a plain GET form, no JavaScript
+// here: the page itself shows the results). A labelled `role="search"` landmark; the label is visible only to
+// assistive technology unless `labelStyle` shows it.
+import { tv } from 'tailwind-variants'
+import { safeUrl } from '../_shared/safe-url'
+
+const search = tv({
+  slots: {
+    form: 'flex items-center gap-2',
+    label: 'sr-only',
+    input: 'min-w-0 flex-1 rounded-md border border-line bg-surface px-3 text-ink placeholder:text-ink-muted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent',
+    button: 'inline-flex shrink-0 cursor-pointer items-center justify-center rounded-md border border-line bg-surface px-3 font-medium text-ink hover:bg-current/10 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent',
+  },
+  variants: {
+    size: { sm: { input: 'h-9 text-sm', button: 'h-9 text-sm' }, md: { input: 'h-11 text-base', button: 'h-11 text-base' } },
+    width: { auto: { form: 'w-full max-w-xs' }, full: { form: 'w-full' } },
+    // `text`: the button reads "Search"; `icon`: a magnifier with the same name for assistive technology.
+    button: { text: {}, icon: { button: 'px-0 aspect-square' } },
+    labelStyle: { hidden: {}, shown: { form: 'flex-wrap', label: 'not-sr-only basis-full text-sm font-medium' } },
+  },
+  defaultVariants: { size: 'md', width: 'auto', button: 'text', labelStyle: 'hidden' },
+})
+
+interface Props {
+  /** The search page the form sends to (it reads `q`). */
+  action?: string | undefined
+  /** The landmark's and field's accessible name ("Search"). */
+  label?: string | undefined
+  placeholder?: string | undefined
+  /** The button's name ("Search"). */
+  submitLabel?: string | undefined
+  size?: 'sm' | 'md' | undefined
+  width?: 'auto' | 'full' | undefined
+  button?: 'text' | 'icon' | undefined
+  labelStyle?: 'hidden' | 'shown' | undefined
+  id?: string | undefined
+}
+
+const { action = '/search', label = 'Search', placeholder, submitLabel = label, size, width, button, labelStyle, id = 'site-search' } = Astro.props
+const s = search({ size, width, button, labelStyle })
+---
+<form role="search" method="get" action={safeUrl(action)} class={s.form()} data-cr-part="search-box">
+  <label for={`${id}-q`} class={s.label()}>{label}</label>
+  <input id={`${id}-q`} type="search" name="q" placeholder={placeholder} autocomplete="off" enterkeyhint="search" class={s.input()} />
+  <button type="submit" class={s.button()} aria-label={button === 'icon' ? submitLabel : undefined}>
+    {button === 'icon'
+      ? <svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="7" /><path d="m20 20-3.5-3.5" /></svg>
+      : submitLabel}
+  </button>
+</form>

package/components/search-box/fixtures.json

@@ -0,0 +1,31 @@
+[
+  {
+    "name": "default",
+    "props": {
+      "label": "Search",
+      "placeholder": "Search this site",
+      "submitLabel": "Search"
+    }
+  },
+  {
+    "name": "small-icon",
+    "props": {
+      "size": "sm",
+      "button": "icon",
+      "label": "Search",
+      "submitLabel": "Search",
+      "id": "header-search"
+    }
+  },
+  {
+    "name": "full-shown-label",
+    "props": {
+      "width": "full",
+      "labelStyle": "shown",
+      "label": "Search the journal",
+      "placeholder": "Search this site",
+      "submitLabel": "Search",
+      "id": "journal-search"
+    }
+  }
+]

package/components/search-box/meta.json

@@ -0,0 +1,75 @@
+{
+  "id": "search-box",
+  "name": "SearchBox",
+  "description": "A search field that sends the visitor to the site's search page (`/search?q=…`): a plain GET form with a labelled role=search landmark, no JavaScript. For a header slot or inline in a page.",
+  "category": "chrome",
+  "uses": [],
+  "shared": ["safe-url.ts"],
+  "variants": {
+    "size": {
+      "options": [
+        "sm",
+        "md"
+      ],
+      "default": "md",
+      "description": "Field and button height (36 and 44 px)."
+    },
+    "width": {
+      "options": [
+        "auto",
+        "full"
+      ],
+      "default": "auto",
+      "description": "A compact field (up to 20 rem) or the whole column."
+    },
+    "button": {
+      "options": [
+        "text",
+        "icon"
+      ],
+      "default": "text",
+      "description": "The button reads its label, or shows a magnifier named by the same label."
+    },
+    "labelStyle": {
+      "options": [
+        "hidden",
+        "shown"
+      ],
+      "default": "hidden",
+      "description": "The field's label for assistive technology only, or printed above the field."
+    }
+  },
+  "props": {
+    "action": {
+      "type": "url",
+      "default": "/search",
+      "description": "The search page the form sends to; it reads `q`."
+    },
+    "label": {
+      "type": "string",
+      "description": "The landmark's and field's accessible name (ui-strings search.label)."
+    },
+    "placeholder": {
+      "type": "string",
+      "description": "Hint text in the field (ui-strings search.placeholder)."
+    },
+    "submitLabel": {
+      "type": "string",
+      "description": "The button's name (ui-strings search.submit)."
+    },
+    "id": {
+      "type": "string",
+      "default": "site-search",
+      "description": "Prefix of the field's id; set it when two search boxes share a page."
+    }
+  },
+  "slots": {},
+  "js": "none",
+  "dependencies": {},
+  "sources": {
+    "gutenberg": [
+      "core/search"
+    ]
+  },
+  "a11y": "A <form role=\"search\"> with a real <label> for the type=search field (sr-only unless shown); the button has a text or aria-label name; focus rings on both."
+}