@contentrain/astro-kit 0.14.0 → 0.15.0

package/components/announcement/Announcement.astro

@@ -15,7 +15,7 @@ const announcement = tv({
     root: 'relative text-sm not-open:hidden',
     bar: 'mx-auto flex max-w-page items-center justify-center gap-x-3 px-10 py-2 text-center',
     link: 'font-semibold underline decoration-current/40 underline-offset-4 hover:decoration-current',
-    close: 'absolute inset-y-0 right-2 flex cursor-pointer list-none items-center px-2 [&::-webkit-details-marker]:hidden',
+    close: 'absolute inset-y-0 end-2 flex cursor-pointer list-none items-center px-2 [&::-webkit-details-marker]:hidden',
   },
   variants: {
     tone: {

package/components/card-grid/CardGrid.astro

@@ -25,7 +25,7 @@ const grid = tv({
       bordered: { card: 'border border-line p-6', media: '-mx-6 -mt-6 mb-2 rounded-b-none' },
       elevated: { card: 'bg-surface p-6 text-ink shadow-md ring-1 ring-line/60', media: '-mx-6 -mt-6 mb-2 rounded-b-none' },
     },
-    align: { start: { card: 'text-left' }, center: { card: 'items-center text-center' } },
+    align: { start: { card: 'text-start' }, center: { card: 'items-center text-center' } },
   },
   defaultVariants: { columns: '3', style: 'plain', align: 'start' },
 })

package/components/consent/Consent.astro

@@ -20,7 +20,7 @@ const consent = tv({
   variants: {
     position: {
       bottom: { root: 'inset-x-0 bottom-0 border-x-0 border-b-0 sm:flex sm:items-center sm:justify-between sm:gap-6', actions: 'sm:mt-0 sm:shrink-0' },
-      corner: { root: 'inset-x-4 bottom-4 rounded-lg sm:left-auto sm:max-w-sm' },
+      corner: { root: 'inset-x-4 bottom-4 rounded-lg sm:start-auto sm:max-w-sm' },
     },
   },
   defaultVariants: { position: 'bottom' },

package/components/faq/Faq.astro

@@ -26,7 +26,7 @@ const faq = tv({
       lines: { list: 'divide-y divide-line border-y border-line' },
       cards: { list: 'gap-3', item: 'rounded-card border border-line px-5', summary: 'py-5' },
       // WordPress's details block: the browser's own disclosure triangle, no rules or box.
-      plain: { list: 'gap-2', summary: 'list-item list-[revert] py-1 text-[length:var(--text-body,1rem)] [font-weight:inherit] [&::-webkit-details-marker]:inline', marker: 'hidden', answer: 'pt-2 pl-5' },
+      plain: { list: 'gap-2', summary: 'list-item list-[revert] py-1 text-[length:var(--text-body,1rem)] [font-weight:inherit] [&::-webkit-details-marker]:inline', marker: 'hidden', answer: 'pt-2 ps-5' },
     },
     tone: { default: {}, muted: { item: 'bg-surface' }, inverse: { answer: 'prose-invert' }, accent: { answer: 'prose-invert' } },
     // heading: the question as a small heading. bold: body size in bold, as accordion and toggle titles often are.

package/components/header/Header.astro

@@ -17,7 +17,7 @@ const header = tv({
     layout: {
       split: { inner: 'justify-between' },
       centered: { inner: 'flex-col gap-3 md:gap-4' },
-      'brand-left': { inner: 'justify-start [&>nav]:ml-10' },
+      'brand-left': { inner: 'justify-start [&>nav]:ms-10' },
     },
     tone: {
       default: { root: 'border-b border-line bg-surface text-ink' },
@@ -74,7 +74,7 @@ const wrap = tagline ? 'flex-wrap md:flex-nowrap' : undefined
           {showName && <span>{siteName}</span>}
         </a>
       )}
-    <div class:list={['flex items-center gap-4', layout === 'centered' ? 'justify-center' : 'ml-auto']}>
+    <div class:list={['flex items-center gap-4', layout === 'centered' ? 'justify-center' : 'ms-auto']}>
       <Nav items={items} label={navLabel} menuLabel={menuLabel} closeLabel={closeLabel} part="nav-header" color={linkNav ? 'link' : 'current'} align={layout === 'centered' ? 'center' : 'end'} />
       {action && <Button action={action} size="sm" class="hidden md:inline-flex" />}
     </div>

package/components/nav/Nav.astro

@@ -15,7 +15,7 @@ const nav = tv({
   },
   variants: {
     // Submenus open towards the page: leftwards under an end-aligned menu.
-    align: { start: { list: 'justify-start', sub: 'left-0' }, end: { list: 'justify-end', sub: 'right-0' }, center: { list: 'justify-center', sub: 'left-0' } },
+    align: { start: { list: 'justify-start', sub: 'start-0' }, end: { list: 'justify-end', sub: 'end-0' }, center: { list: 'justify-center', sub: 'start-0' } },
     density: { compact: { list: 'gap-5 text-sm' }, comfortable: { list: 'gap-8 text-base' } },
     // current: the surrounding text, dimmed until hovered. link: the site's link colour at full strength, as themes that
     // colour every link draw their menu; the toggle keeps the surrounding text.
@@ -74,8 +74,8 @@ const drawer = `${id}-drawer`
             <svg aria-hidden="true" viewBox="0 0 24 24" class="size-5" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 6h16M4 12h16M4 18h16" /></svg>
             {menuLabel}
           </button>
-          <div id={drawer} popover class="m-0 ml-auto h-dvh max-h-none w-80 max-w-[85vw] border-l border-line bg-surface p-6 text-ink shadow-xl backdrop:bg-ink/40">
-            <button type="button" popovertarget={drawer} popovertargetaction="hide" class="mb-6 ml-auto flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium hover:bg-surface-muted">
+          <div id={drawer} popover class="m-0 ms-auto h-dvh max-h-none w-80 max-w-[85vw] border-s border-line bg-surface p-6 text-ink shadow-xl backdrop:bg-ink/40">
+            <button type="button" popovertarget={drawer} popovertargetaction="hide" class="mb-6 ms-auto flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium hover:bg-surface-muted">
               <svg aria-hidden="true" viewBox="0 0 24 24" class="size-5" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 6l12 12M18 6L6 18" /></svg>
               {closeLabel}
             </button>
@@ -84,7 +84,7 @@ const drawer = `${id}-drawer`
                 <li>
                   <a href={item.href} aria-current={item.href === current ? 'page' : undefined} class="block rounded-md px-3 py-2 text-ink no-underline hover:bg-surface-muted aria-[current=page]:font-semibold">{item.label}</a>
                   {item.children && item.children.length > 0 && (
-                    <ul class="ml-3 border-l border-line pl-3">
+                    <ul class="ms-3 border-s border-line ps-3">
                       {item.children.map(child => <li><a href={child.href} class="block rounded-md px-3 py-1.5 text-sm text-ink-muted no-underline hover:text-ink">{child.label}</a></li>)}
                     </ul>
                   )}
@@ -100,7 +100,7 @@ const drawer = `${id}-drawer`
             <svg aria-hidden="true" viewBox="0 0 24 24" class="size-5" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 6h16M4 12h16M4 18h16" /></svg>
             {menuLabel}
           </summary>
-          <ul class="absolute right-0 z-30 mt-2 flex w-64 flex-col gap-1 rounded-lg border border-line bg-surface p-3 text-ink shadow-lg">
+          <ul class="absolute end-0 z-30 mt-2 flex w-64 flex-col gap-1 rounded-lg border border-line bg-surface p-3 text-ink shadow-lg">
             {items.flatMap(item => [item, ...(item.children ?? [])]).map(item => (
               <li><a href={item.href} aria-current={item.href === current ? 'page' : undefined} class="block rounded-md px-3 py-2 text-sm text-ink no-underline hover:bg-surface-muted">{item.label}</a></li>
             ))}

package/components/newsletter/Newsletter.astro

@@ -99,7 +99,7 @@ const formRel: Record<string, string> = newTab ? { rel: 'noopener noreferrer' }
             <input id={`${id}-email`} name={form.email} type="email" required autocomplete="email" inputmode="email" class={s.input()} />
           </div>
           {form.hidden.map(field => (
-            <div aria-hidden="true" class="absolute -left-[5000px]"><input type="text" name={field.name} value={field.value} tabindex="-1" autocomplete="off" /></div>
+            <div aria-hidden="true" class="absolute -start-[5000px]"><input type="text" name={field.name} value={field.value} tabindex="-1" autocomplete="off" /></div>
           ))}
           <button type="submit" class={s.submit()}>{submitLabel}</button>
         </form>

package/components/pagination/Pagination.astro

@@ -52,7 +52,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">←</span> <span class="max-sm:sr-only">{prevLabel}</span></a>
+      ? <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>
       : style === 'simple' && <span />}
     {style === 'numbered' && shown.map((page, index) => (
       <>
@@ -64,6 +64,6 @@ const shown = [...new Set([1, current - 2, current - 1, current, current + 1, cu
       </>
     ))}
     {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">→</span></a>}
+    {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>}
   </nav>
 )}

package/components/pricing/Pricing.astro

@@ -15,13 +15,13 @@ const pricing = tv({
     intro: 'text-lg opacity-80',
     list: 'grid items-stretch gap-6 sm:grid-cols-2',
     plan: 'relative flex flex-col gap-5 rounded-card border border-line bg-surface p-6 text-ink md:p-8',
-    badge: 'absolute -top-3 left-6 rounded-full bg-accent px-3 py-1 text-xs font-semibold text-accent-ink',
+    badge: 'absolute -top-3 start-6 rounded-full bg-accent px-3 py-1 text-xs font-semibold text-accent-ink',
     name: 'text-lg [font-weight:var(--font-weight-heading,600)]',
     price: 'flex items-baseline gap-1',
     amount: 'text-4xl [font-weight:var(--font-weight-heading,700)] tracking-tight',
     period: 'text-sm opacity-75',
     description: 'text-pretty opacity-80',
-    features: 'prose-site prose max-w-none text-current prose-ul:pl-5 prose-li:my-1',
+    features: 'prose-site prose max-w-none text-current prose-ul:ps-5 prose-li:my-1',
     action: 'mt-auto pt-2',
   },
   variants: {

package/components/slider/Slider.astro

@@ -95,11 +95,11 @@ const arrow = 'absolute top-1/2 z-10 hidden size-11 -translate-y-1/2 items-cente
   </div>
   {slides.length > 1 && (
     <>
-      <button type="button" class:list={[arrow, 'left-6 md:left-10']} aria-label={prevLabel} data-prev>
-        <svg aria-hidden="true" viewBox="0 0 24 24" class="size-5" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6" /></svg>
+      <button type="button" class:list={[arrow, 'start-6 md:start-10']} aria-label={prevLabel} data-prev>
+        <svg aria-hidden="true" viewBox="0 0 24 24" class="size-5 rtl:-scale-x-100" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6" /></svg>
       </button>
-      <button type="button" class:list={[arrow, 'right-6 md:right-10']} aria-label={nextLabel} data-next>
-        <svg aria-hidden="true" viewBox="0 0 24 24" class="size-5" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 6l6 6-6 6" /></svg>
+      <button type="button" class:list={[arrow, 'end-6 md:end-10']} aria-label={nextLabel} data-next>
+        <svg aria-hidden="true" viewBox="0 0 24 24" class="size-5 rtl:-scale-x-100" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 6l6 6-6 6" /></svg>
       </button>
       <div class="mt-4 hidden justify-center group-data-[ready]:flex" data-dots></div>
     </>
@@ -115,7 +115,9 @@ const arrow = 'absolute top-1/2 z-10 hidden size-11 -translate-y-1/2 items-cente
     root.dataset.ready = ''
     // Reduced motion: slides change instantly instead of gliding.
     const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches
-    const embla = EmblaCarousel(viewport, { loop: root.dataset.loop !== undefined, align: 'start', containScroll: 'trimSnaps', duration: reduce ? 0 : 25 })
+    // A right-to-left page runs the row from the right: the first slide at the start edge, "next" towards the end.
+    const direction = getComputedStyle(root).direction === 'rtl' ? 'rtl' : 'ltr'
+    const embla = EmblaCarousel(viewport, { loop: root.dataset.loop !== undefined, align: 'start', containScroll: 'trimSnaps', duration: reduce ? 0 : 25, direction })
     const prev = root.querySelector<HTMLButtonElement>('[data-prev]')
     const next = root.querySelector<HTMLButtonElement>('[data-next]')
     const dots = root.querySelector<HTMLElement>('[data-dots]')

package/components/steps/Steps.astro

@@ -32,7 +32,7 @@ const steps = tv({
         step: "before:flex before:size-10 before:shrink-0 before:items-center before:justify-center before:rounded-full before:bg-accent before:font-semibold before:text-accent-ink before:content-[counter(kit-step)]",
         badge: 'flex h-10 min-w-10 items-center justify-center self-start rounded-full bg-accent px-2 font-semibold text-accent-ink',
       },
-      plain: { step: 'border-l-2 border-accent pl-4', badge: 'font-semibold tabular-nums' },
+      plain: { step: 'border-s-2 border-accent ps-4', badge: 'font-semibold tabular-nums' },
     },
   },
   defaultVariants: { layout: 'list', style: 'numbered' },

package/components/tabs/Tabs.astro

@@ -28,12 +28,12 @@ const tabs = tv({
     },
     orientation: {
       horizontal: { list: 'overflow-x-auto' },
-      vertical: { root: 'md:data-[ready]:flex-row md:data-[ready]:items-start md:data-[ready]:gap-10', list: 'md:w-56 md:shrink-0 md:flex-col', trigger: 'text-left' },
+      vertical: { root: 'md:data-[ready]:flex-row md:data-[ready]:items-start md:data-[ready]:gap-10', list: 'md:w-56 md:shrink-0 md:flex-col', trigger: 'text-start' },
     },
     tone: { default: {}, muted: {}, inverse: { panel: 'prose-invert' }, accent: { panel: 'prose-invert', trigger: 'opacity-100' } },
   },
   compoundVariants: [
-    { style: 'underline', orientation: 'vertical', class: { list: 'md:border-b-0 md:border-l', trigger: 'md:mb-0 md:-ml-px md:border-b-0 md:border-l-2' } },
+    { style: 'underline', orientation: 'vertical', class: { list: 'md:border-b-0 md:border-s', trigger: 'md:mb-0 md:-ms-px md:border-b-0 md:border-s-2' } },
   ],
   defaultVariants: { style: 'underline', orientation: 'horizontal', tone: 'default' },
 })

package/components/testimonial/Testimonial.astro

@@ -71,7 +71,7 @@ const quoted = (text: string) => /^\s*["'“‘„«‹「『]/.test(text)
           <blockquote class={s.quote()}><p class:list={[!quoted(item.quote) && "before:content-[open-quote] after:content-[close-quote]"]}>{item.quote}</p></blockquote>
           <figcaption class={s.person()}>
             {imageOf(item.avatar, item.avatarAlt) && <KitImage image={imageOf(item.avatar, item.avatarAlt)!} sizes="48px" class="size-12 shrink-0 rounded-full object-cover" />}
-            <span class="flex flex-col text-left">
+            <span class="flex flex-col text-start">
               <span class={s.name()}>{item.name}</span>
               {item.role && <span class={s.role()}>{item.role}</span>}
             </span>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentrain/astro-kit",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "license": "MIT",
   "description": "Copy-in Astro components for Contentrain sites (shadcn model): typed props, tailwind-variants, zero JavaScript by default — with a machine-readable catalog",
   "type": "module",