@sarimarcus/content-sites-ui 0.4.0 → 0.5.0

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 All packages in the platform release in lockstep; entries are per release version.
 
+## 0.5.0 (2026-09-29)
+
+- Stable release of 0.5.0-rc.0, unchanged: adopted on all three sites with every page identical outside class attributes and every class change a declared brand→role pair; screenshots unchanged (SLA-2821).
+
+## 0.5.0-rc.0 (2026-09-29)
+
+- `./primitives`: `ArrowLabel`, `SectionDivider` and `LinkArrow` (`color` is a theme role: `primary`, `secondary`, `accent`, `onImage`; external hrefs open in a new tab unless `target`/`rel` are given) (SLA-2821).
+
 ## 0.4.0 (2026-09-29)
 
 - Stable release of 0.4.0-rc.0, unchanged: adopted on all three sites with every page identical through the class-alias oracle and screenshots unchanged (SLA-2821).

package/README.md

@@ -11,7 +11,7 @@ text arrives through props and slots.
 ## Primitives
 
 ```ts
-import { Icon, Badge, Chip, PILL_BASE, isBadgeLength, PRICE_LABEL_MAX } from '@sarimarcus/content-sites-ui/primitives';
+import { Icon, Badge, Chip, ArrowLabel, SectionDivider, LinkArrow, PILL_BASE, isBadgeLength, PRICE_LABEL_MAX } from '@sarimarcus/content-sites-ui/primitives';
 ```
 
 - `Icon`: any Lucide icon by kebab-case name.
@@ -22,6 +22,13 @@ import { Icon, Badge, Chip, PILL_BASE, isBadgeLength, PRICE_LABEL_MAX } from '@s
   focus colour (`primary` (default), `secondary`, `accent`, `neutral`). `active` emits `data-active="true"|"false"`
   only when set; scripts must write `dataset.active = 'true'|'false'`, never add or remove the attribute. Other
   attributes pass through last, so markers such as `data-section-link` reach the element.
+- `ArrowLabel`: a label followed by an arrow that shifts right on `group-hover`. It carries no colour: the caller's
+  `class` sets it; `arrowClass` sizes the arrow (default `h-4 w-4`).
+- `SectionDivider`: a break between sections. `variant` is `dots` (default), `line`, or `quote` (with `quote` and
+  an optional `source`).
+- `LinkArrow`: a text link with a trailing arrow. `color` is `primary` (default), `secondary`, `accent` or `onImage`;
+  `size` is `sm` (default) or `base`. An `http(s)` href opens in a new tab with `rel="noopener noreferrer"`; an
+  explicit `target` (`_blank` or `_self`) or `rel` overrides that. Attributes render as `href target rel class`.
 - `PILL_BASE`: the shared pill geometry. `isBadgeLength`, `BADGE_MAX_CHARS`, `PRICE_LABEL_MAX`: the label-length
   limits a call site branches on (pill or prose); a price-range schema `.max()` must equal `PRICE_LABEL_MAX`.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sarimarcus/content-sites-ui",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Universal Astro UI components, layout shell and design tokens shared by the content sites.",
   "type": "module",
   "license": "MIT",
@@ -42,6 +42,6 @@
     "@lucide/astro": "^1.23.0",
     "astro": "^7.0.6",
     "tailwindcss": "^4.1.18",
-    "@sarimarcus/content-sites-core": "0.4.0"
+    "@sarimarcus/content-sites-core": "0.5.0"
   }
 }

package/src/primitives/ArrowLabel.astro

@@ -0,0 +1,24 @@
+---
+interface Props {
+  class?: string;
+  arrowClass?: string;
+}
+
+const { class: className = '', arrowClass = 'h-4 w-4' } = Astro.props;
+---
+<span class:list={['inline-flex items-center gap-2', className]}>
+  <slot />
+  <svg
+    class:list={[arrowClass, 'shrink-0 transition-transform group-hover:translate-x-1']}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    <path d="M5 12h14" />
+    <path d="m12 5 7 7-7 7" />
+  </svg>
+</span>

package/src/primitives/LinkArrow.astro

@@ -0,0 +1,50 @@
+---
+interface Props {
+  href: string;
+  size?: 'sm' | 'base';
+  color?: 'primary' | 'secondary' | 'accent' | 'onImage';
+  /** Overrides the http(s) detection: '_blank' on any href, '_self' to keep an off-site link in the tab. */
+  target?: '_blank' | '_self';
+  /** Defaults to 'noopener noreferrer' whenever the link opens a new tab. */
+  rel?: string;
+  class?: string;
+}
+const { href, size = 'sm', color = 'primary', target: targetProp, rel: relProp, class: className = '' } = Astro.props;
+
+const isExternal = href.startsWith('http://') || href.startsWith('https://');
+const target = targetProp ?? (isExternal ? '_blank' : undefined);
+const rel = relProp ?? (target === '_blank' ? 'noopener noreferrer' : undefined);
+
+const sizeClass = size === 'base' ? 'text-base font-medium' : 'text-sm font-medium';
+const colorClass = {
+  primary: 'text-primary hover:text-primary-strong',
+  secondary: 'text-secondary hover:text-secondary-strong',
+  accent: 'text-accent-strong hover:text-accent',
+  onImage: 'text-overlay-foreground/90 hover:text-overlay-foreground',
+}[color];
+---
+<a
+  href={href}
+  target={target}
+  rel={rel}
+  class:list={[
+    "group inline-flex items-center gap-2 transition-colors",
+    sizeClass,
+    colorClass,
+    className
+  ]}
+>
+  <slot />
+  <svg
+    class="w-4 h-4 transition-transform group-hover:translate-x-1"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    <path d="M5 12h14" /><path d="m12 5 7 7-7 7" />
+  </svg>
+</a>

package/src/primitives/SectionDivider.astro

@@ -0,0 +1,43 @@
+---
+// Rhythm breaker between content sections: dots (the default), a thin rule, or a pull quote.
+interface Props {
+  variant?: 'dots' | 'line' | 'quote';
+  quote?: string;
+  source?: string;
+  class?: string;
+}
+
+const {
+  variant = 'dots',
+  quote,
+  source,
+  class: className = '',
+} = Astro.props;
+---
+
+{variant === 'dots' && (
+  <div class:list={['flex items-center justify-center gap-2 py-8', className]} aria-hidden="true">
+    <span class="w-1.5 h-1.5 rounded-full bg-primary/40"></span>
+    <span class="w-1.5 h-1.5 rounded-full bg-accent/50"></span>
+    <span class="w-1.5 h-1.5 rounded-full bg-primary/40"></span>
+  </div>
+)}
+
+{variant === 'line' && (
+  <div class:list={['py-8', className]} aria-hidden="true">
+    <hr class="border-0 h-px bg-gradient-to-r from-transparent via-border to-transparent" />
+  </div>
+)}
+
+{variant === 'quote' && quote && (
+  <figure class:list={['py-10 px-6 sm:px-10 my-8 border border-primary/40 bg-primary/5 rounded-xl', className]}>
+    <blockquote class="text-lg sm:text-xl italic text-foreground/80 leading-relaxed font-display">
+      &ldquo;{quote}&rdquo;
+    </blockquote>
+    {source && (
+      <figcaption class="mt-3 text-sm text-muted-foreground">
+        &mdash; {source}
+      </figcaption>
+    )}
+  </figure>
+)}

package/src/primitives/index.ts

@@ -2,5 +2,8 @@
 export { default as Icon } from './Icon.astro';
 export { default as Badge } from './Badge.astro';
 export { default as Chip } from './Chip.astro';
+export { default as ArrowLabel } from './ArrowLabel.astro';
+export { default as SectionDivider } from './SectionDivider.astro';
+export { default as LinkArrow } from './LinkArrow.astro';
 export { PILL_BASE } from './pillRecipe';
 export { BADGE_MAX_CHARS, PRICE_LABEL_MAX, isBadgeLength } from './badgeText';