@pithyjs/ui-kit 0.1.0-beta.0

package/dist/sections/_section-base.scss

@@ -0,0 +1,204 @@
+/// Shared section base styles
+/// Contains the containment container, eyebrow, entrance animations, and common resets.
+///
+/// @group sections
+
+@use 'sass:map';
+@use '@pithyjs/design-system/a11y/styles/mixins' as a11y;
+@use '@pithyjs/design-system/layout/_generated/tokens' as layout;
+@use '@pithyjs/design-system/typography/_generated/tokens' as typo;
+
+// ============================================
+// Selection color (primary-tinted text selection)
+// ============================================
+
+// All section roots share .ui-section for base styles.
+// Individual section classes (.ui-hero, .ui-cta, etc.) layer on top.
+.ui-section {
+  container-type: inline-size;
+  contain: paint;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  @include a11y.primary-selection;
+}
+
+%content-band {
+  max-inline-size: map.get(layout.$container-breakpoints, 'xl');
+  margin-inline: auto;
+  padding-inline: var(--space-md);
+}
+
+.ui-section-container {
+  @extend %content-band;
+}
+
+.ui-page > :not([data-full-bleed]) {
+  @extend %content-band;
+}
+
+// ============================================
+// Eyebrow label
+// ============================================
+
+.ui-section-eyebrow {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: map.get(typo.$letter-spacings, 'widest');
+  text-transform: uppercase;
+  color: var(--color-primary);
+}
+
+// CTA inherits its section color
+.ui-cta .ui-section-eyebrow {
+  color: var(--_cta-color, var(--color-primary));
+}
+
+// ============================================
+// Entrance animations (scroll-triggered via JS)
+// ============================================
+// Three presets controlled by CSS classes:
+//   .ui-section-enter-subtle     → fade only
+//   .ui-section-enter            → fade + slide up (standard)
+//   .ui-section-enter-expressive → fade + slide up + scale
+
+// -- Subtle: fade only (no translate) ----------------------------------------
+
+.ui-section-enter-subtle {
+  opacity: 0;
+}
+
+.ui-section-enter-subtle.ui-section-visible {
+  opacity: 1;
+}
+
+@include a11y.motion-safe {
+  .ui-section-enter-subtle {
+    transition: opacity var(--motion-duration-normal)
+      var(--motion-easing-standard);
+  }
+}
+
+@include a11y.motion-reduced {
+  .ui-section-enter-subtle {
+    opacity: 1;
+  }
+}
+
+// -- Standard: fade + slide up -----------------------------------------------
+
+.ui-section-enter {
+  opacity: 0;
+  translate: 0 var(--motion-distance-medium);
+}
+
+.ui-section-enter.ui-section-visible {
+  opacity: 1;
+  translate: 0 0;
+}
+
+@include a11y.motion-safe {
+  .ui-section-enter {
+    transition:
+      opacity var(--motion-duration-slow) var(--motion-easing-entrance),
+      translate var(--motion-duration-slow) var(--motion-easing-entrance);
+  }
+}
+
+@include a11y.motion-reduced {
+  .ui-section-enter {
+    opacity: 1;
+    translate: 0 0;
+  }
+}
+
+// -- Expressive: fade + slide up + scale (premium) ---------------------------
+
+.ui-section-enter-expressive {
+  opacity: 0;
+  translate: 0 var(--motion-distance-medium);
+  scale: var(--motion-scale-subtle);
+}
+
+.ui-section-enter-expressive.ui-section-visible {
+  opacity: 1;
+  translate: 0 0;
+  scale: 1;
+}
+
+@include a11y.motion-safe {
+  .ui-section-enter-expressive {
+    transition:
+      opacity var(--motion-duration-deliberate) var(--motion-easing-entrance),
+      translate var(--motion-duration-deliberate) var(--motion-easing-entrance),
+      scale var(--motion-duration-deliberate) var(--motion-easing-emphasized);
+  }
+}
+
+@include a11y.motion-reduced {
+  .ui-section-enter-expressive {
+    opacity: 1;
+    translate: 0 0;
+    scale: 1;
+  }
+}
+
+// ============================================
+// Stagger children (cards, list items)
+// ============================================
+// Applied in standard and expressive presets.
+// Each child delays slightly for a cascade effect.
+
+.ui-section-stagger > * {
+  opacity: 0;
+  translate: 0 var(--motion-distance-subtle);
+}
+
+.ui-section-stagger.ui-section-visible > * {
+  opacity: 1;
+  translate: 0 0;
+}
+
+@include a11y.motion-safe {
+  .ui-section-stagger > * {
+    transition:
+      opacity var(--motion-duration-normal) var(--motion-easing-entrance),
+      translate var(--motion-duration-normal) var(--motion-easing-entrance);
+  }
+
+  // Standard preset: 100ms stagger delay per child (up to 6)
+  @for $i from 1 through 6 {
+    .ui-section-stagger.ui-section-visible > *:nth-child(#{$i}) {
+      transition-delay: #{($i - 1) * 100}ms;
+    }
+  }
+
+  // Expressive preset: 120ms stagger + scale per child
+  [data-entrance='expressive'] .ui-section-stagger > * {
+    scale: var(--motion-scale-subtle);
+    transition:
+      opacity var(--motion-duration-slow) var(--motion-easing-entrance),
+      translate var(--motion-duration-slow) var(--motion-easing-entrance),
+      scale var(--motion-duration-slow) var(--motion-easing-emphasized);
+  }
+
+  [data-entrance='expressive'] .ui-section-stagger.ui-section-visible > * {
+    scale: 1;
+  }
+
+  @for $i from 1 through 6 {
+    [data-entrance='expressive']
+      .ui-section-stagger.ui-section-visible
+      > *:nth-child(#{$i}) {
+      transition-delay: #{($i - 1) * 120}ms;
+    }
+  }
+}
+
+@include a11y.motion-reduced {
+  .ui-section-stagger > * {
+    opacity: 1;
+    translate: 0 0;
+    scale: 1;
+  }
+}

package/dist/sections/contact/ContactSection.d.ts

@@ -0,0 +1,55 @@
+/** @codex
+{
+  "id": "pithy.ui-kit.contact-section",
+  "title": "<ContactSection> Section Template",
+  "category": "feature"
+}
+*/
+import type { SpacingSize } from '@pithyjs/design-system';
+import type { Reactive, ReactiveText } from '../../shared/clickable';
+/** @codexApi {"parent":"pithy.ui-kit.contact-section","name":"ContactInfo","stability":"stable","signature":"interface ContactInfo"} */
+export interface ContactInfo {
+    /** Contact method label (e.g., "Email", "Phone", "Address") */
+    label: string;
+    /** Contact value (e.g., "hello@example.com", "+1 555-0100") */
+    value: string;
+    /** Optional icon name */
+    icon?: string;
+    /** Optional link href (e.g., "mailto:", "tel:") */
+    href?: string;
+}
+/** @codexApi {"parent":"pithy.ui-kit.contact-section","name":"ContactSectionProps","stability":"stable","signature":"interface ContactSectionProps"} */
+export interface ContactSectionProps {
+    /** Section heading (default: "Contact Us") */
+    heading?: ReactiveText;
+    /** Heading level (default: 2) */
+    headingLevel?: number;
+    /** Section description */
+    description?: ReactiveText;
+    /** Contact information items */
+    contacts?: Reactive<ContactInfo[]>;
+    /** Vertical padding (default: "xl") */
+    spacing?: SpacingSize;
+    /** Optional anchor id */
+    id?: string;
+}
+/**
+ * Contact information section with details and form placeholder.
+ *
+ * Displays contact info (email, phone, address) in a semantic
+ * `<address>` element. Children projected into the form area
+ * (for V0.2 forms or external form embed).
+ *
+ * @example
+ * ```html
+ * <ContactSection heading="'Get in Touch'" contacts="contactItems">
+ *   <p>Form coming soon</p>
+ * </ContactSection>
+ * ```
+ */
+/** @codexApi {"parent":"pithy.ui-kit.contact-section","name":"ContactSection","stability":"stable","signature":"(props?: ContactSectionProps) => { el: HTMLElement; destroy: () => void }"} */
+export declare function ContactSection({ heading, headingLevel: rawLevel, description, contacts, spacing: rawSpacing, id, }?: ContactSectionProps): {
+    el: HTMLElement;
+    destroy: () => void;
+};
+//# sourceMappingURL=ContactSection.d.ts.map

package/dist/sections/contact/ContactSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContactSection.d.ts","sourceRoot":"","sources":["../../../src/sections/contact/ContactSection.ts"],"names":[],"mappings":"AAAA;;;;;;EAME;AAGF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAY1D,OAAO,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAKrE,wIAAwI;AACxI,MAAM,WAAW,WAAW;IAC1B,+DAA+D;IAC/D,KAAK,EAAE,MAAM,CAAC;IACd,+DAA+D;IAC/D,KAAK,EAAE,MAAM,CAAC;IACd,yBAAyB;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mDAAmD;IACnD,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,wJAAwJ;AACxJ,MAAM,WAAW,mBAAmB;IAClC,8CAA8C;IAC9C,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,iCAAiC;IACjC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0BAA0B;IAC1B,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,gCAAgC;IAChC,QAAQ,CAAC,EAAE,QAAQ,CAAC,WAAW,EAAE,CAAC,CAAC;IACnC,uCAAuC;IACvC,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,yBAAyB;IACzB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED;;;;;;;;;;;;;GAaG;AACH,+LAA+L;AAC/L,wBAAgB,cAAc,CAAC,EAC7B,OAAsB,EACtB,YAAY,EAAE,QAAY,EAC1B,WAAW,EACX,QAAQ,EACR,OAAO,EAAE,UAAiB,EAC1B,EAAE,GACH,GAAE,mBAAwB,GAAG;IAAE,EAAE,EAAE,WAAW,CAAC;IAAC,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,CAwHrE"}

package/dist/sections/contact/ContactSection.js

@@ -0,0 +1,142 @@
+/** @codex
+{
+  "id": "pithy.ui-kit.contact-section",
+  "title": "<ContactSection> Section Template",
+  "category": "feature"
+}
+*/
+import { captureChildren } from '@pithyjs/core';
+import { Heading } from '../../atoms/content/heading/Heading';
+import { Text } from '../../atoms/content/text/Text';
+import { PY_CLASS } from '../../shared/common';
+import { captureSlot } from '../../shared/slots';
+import { isSafeHref } from '@pithyjs/shared';
+import { clampHeadingLevel, validateSpacing, applyContainment, generateSectionHeadingId, } from '../../shared/section';
+import { reconcileList } from '../../shared/reconcile-list';
+import { createIconSlot } from '../../shared/icon-slot';
+import { observeEntrance } from '../entrance';
+/**
+ * Contact information section with details and form placeholder.
+ *
+ * Displays contact info (email, phone, address) in a semantic
+ * `<address>` element. Children projected into the form area
+ * (for V0.2 forms or external form embed).
+ *
+ * @example
+ * ```html
+ * <ContactSection heading="'Get in Touch'" contacts="contactItems">
+ *   <p>Form coming soon</p>
+ * </ContactSection>
+ * ```
+ */
+/** @codexApi {"parent":"pithy.ui-kit.contact-section","name":"ContactSection","stability":"stable","signature":"(props?: ContactSectionProps) => { el: HTMLElement; destroy: () => void }"} */
+export function ContactSection({ heading = 'Contact Us', headingLevel: rawLevel = 2, description, contacts, spacing: rawSpacing = 'xl', id, } = {}) {
+    const spacing = validateSpacing('ContactSection', rawSpacing, 'xl');
+    const level = clampHeadingLevel(rawLevel);
+    const disposers = [];
+    // Capture projected children FIRST and clear context.
+    const { el: childFragment, destroy: destroyChildren } = captureChildren();
+    disposers.push(destroyChildren);
+    // Root section
+    const section = document.createElement('section');
+    section.classList.add('ui-section', 'ui-contact', PY_CLASS[spacing]);
+    if (id)
+        section.id = id;
+    // Contained wrapper — stack-to-row layout
+    const container = document.createElement('div');
+    applyContainment(container);
+    container.classList.add('ui-contact-layout');
+    section.appendChild(container);
+    // Contact info side
+    const infoSide = document.createElement('div');
+    infoSide.classList.add('ui-contact-info');
+    // Heading — link to section via aria-labelledby
+    const headingId = generateSectionHeadingId('contact', id);
+    const headingComp = Heading({ level, text: heading });
+    const headingEl = headingComp.el;
+    headingEl.id = headingId;
+    section.setAttribute('aria-labelledby', headingId);
+    disposers.push(headingComp.destroy);
+    infoSide.appendChild(headingEl);
+    // Description
+    if (description) {
+        const descComp = Text({ color: 'text-muted', text: description });
+        disposers.push(descComp.destroy);
+        infoSide.appendChild(descComp.el);
+    }
+    const address = document.createElement('address');
+    const list = document.createElement('ul');
+    list.classList.add('u-list-reset', 'u-flex', 'u-vstack', 'u-gap-sm');
+    address.appendChild(list);
+    infoSide.appendChild(address);
+    disposers.push(reconcileList({
+        parent: list,
+        list: contacts ?? [],
+        renderRow: contact => {
+            const li = document.createElement('li');
+            li.classList.add('ui-contact-item');
+            const iconSlot = createIconSlot(li, 'md', () => li.firstChild);
+            let valueEl;
+            let currentIsLink;
+            function renderValue(c) {
+                const isLink = typeof c.href === 'string' && isSafeHref(c.href);
+                if (valueEl && currentIsLink === isLink) {
+                    if (isLink)
+                        valueEl.href = c.href;
+                    valueEl.textContent = c.value;
+                    if (c.label)
+                        valueEl.setAttribute('aria-label', `${c.label}: ${c.value}`);
+                    else
+                        valueEl.removeAttribute('aria-label');
+                    return;
+                }
+                const next = isLink
+                    ? document.createElement('a')
+                    : document.createElement('span');
+                if (isLink) {
+                    next.classList.add('ui-nav-link');
+                    next.href = c.href;
+                }
+                next.textContent = c.value;
+                if (c.label)
+                    next.setAttribute('aria-label', `${c.label}: ${c.value}`);
+                if (valueEl)
+                    li.replaceChild(next, valueEl);
+                else
+                    li.appendChild(next);
+                valueEl = next;
+                currentIsLink = isLink;
+            }
+            iconSlot.set(contact.icon);
+            renderValue(contact);
+            return {
+                el: li,
+                update: next => {
+                    iconSlot.set(next.icon);
+                    renderValue(next);
+                },
+                destroy: () => {
+                    iconSlot.destroy();
+                },
+            };
+        },
+    }));
+    container.appendChild(infoSide);
+    // Form placeholder side — projected children
+    const formSide = document.createElement('div');
+    formSide.classList.add('ui-contact-form');
+    captureSlot(formSide, 'form');
+    formSide.appendChild(childFragment);
+    container.appendChild(formSide);
+    // Entrance animation
+    disposers.push(observeEntrance(section));
+    return {
+        el: section,
+        destroy: () => {
+            for (const dispose of disposers)
+                dispose();
+            section.replaceChildren();
+        },
+    };
+}
+//# sourceMappingURL=ContactSection.js.map

package/dist/sections/contact/ContactSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContactSection.js","sourceRoot":"","sources":["../../../src/sections/contact/ContactSection.ts"],"names":[],"mappings":"AAAA;;;;;;EAME;AAEF,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAEhD,OAAO,EAAE,OAAO,EAAE,MAAM,qCAAqC,CAAC;AAC9D,OAAO,EAAE,IAAI,EAAE,MAAM,+BAA+B,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EACL,iBAAiB,EACjB,eAAe,EACf,gBAAgB,EAChB,wBAAwB,GACzB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AA8B9C;;;;;;;;;;;;;GAaG;AACH,+LAA+L;AAC/L,MAAM,UAAU,cAAc,CAAC,EAC7B,OAAO,GAAG,YAAY,EACtB,YAAY,EAAE,QAAQ,GAAG,CAAC,EAC1B,WAAW,EACX,QAAQ,EACR,OAAO,EAAE,UAAU,GAAG,IAAI,EAC1B,EAAE,MACqB,EAAE;IACzB,MAAM,OAAO,GAAG,eAAe,CAAC,gBAAgB,EAAE,UAAU,EAAE,IAAI,CAAC,CAAC;IACpE,MAAM,KAAK,GAAG,iBAAiB,CAAC,QAAQ,CAAC,CAAC;IAC1C,MAAM,SAAS,GAAsB,EAAE,CAAC;IAExC,sDAAsD;IACtD,MAAM,EAAE,EAAE,EAAE,aAAa,EAAE,OAAO,EAAE,eAAe,EAAE,GAAG,eAAe,EAAE,CAAC;IAC1E,SAAS,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IAEhC,eAAe;IACf,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;IAClD,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,YAAY,EAAE,YAAY,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC;IACrE,IAAI,EAAE;QAAE,OAAO,CAAC,EAAE,GAAG,EAAE,CAAC;IAExB,0CAA0C;IAC1C,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAChD,gBAAgB,CAAC,SAAS,CAAC,CAAC;IAC5B,SAAS,CAAC,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;IAC7C,OAAO,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;IAE/B,oBAAoB;IACpB,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC/C,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAE1C,gDAAgD;IAChD,MAAM,SAAS,GAAG,wBAAwB,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;IAC1D,MAAM,WAAW,GAAG,OAAO,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC;IACtD,MAAM,SAAS,GAAG,WAAW,CAAC,EAAiB,CAAC;IAChD,SAAS,CAAC,EAAE,GAAG,SAAS,CAAC;IACzB,OAAO,CAAC,YAAY,CAAC,iBAAiB,EAAE,SAAS,CAAC,CAAC;IACnD,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IACpC,QAAQ,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;IAEhC,cAAc;IACd,IAAI,WAAW,EAAE,CAAC;QAChB,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC,CAAC;QAClE,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;QACjC,QAAQ,CAAC,WAAW,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;IACpC,CAAC;IAED,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;IAClD,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IAC1C,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,cAAc,EAAE,QAAQ,EAAE,UAAU,EAAE,UAAU,CAAC,CAAC;IACrE,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IAC1B,QAAQ,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IAE9B,SAAS,CAAC,IAAI,CACZ,aAAa,CAAc;QACzB,MAAM,EAAE,IAAI;QACZ,IAAI,EAAE,QAAQ,IAAI,EAAE;QACpB,SAAS,EAAE,OAAO,CAAC,EAAE;YACnB,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;YACxC,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;YAEpC,MAAM,QAAQ,GAAG,cAAc,CAAC,EAAE,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC;YAC/D,IAAI,OAAgC,CAAC;YACrC,IAAI,aAAkC,CAAC;YAEvC,SAAS,WAAW,CAAC,CAAc;gBACjC,MAAM,MAAM,GAAG,OAAO,CAAC,CAAC,IAAI,KAAK,QAAQ,IAAI,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;gBAChE,IAAI,OAAO,IAAI,aAAa,KAAK,MAAM,EAAE,CAAC;oBACxC,IAAI,MAAM;wBAAG,OAA6B,CAAC,IAAI,GAAG,CAAC,CAAC,IAAK,CAAC;oBAC1D,OAAO,CAAC,WAAW,GAAG,CAAC,CAAC,KAAK,CAAC;oBAC9B,IAAI,CAAC,CAAC,KAAK;wBACT,OAAO,CAAC,YAAY,CAAC,YAAY,EAAE,GAAG,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC;;wBAC1D,OAAO,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC;oBAC3C,OAAO;gBACT,CAAC;gBACD,MAAM,IAAI,GAAG,MAAM;oBACjB,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC;oBAC7B,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;gBACnC,IAAI,MAAM,EAAE,CAAC;oBACX,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;oBACjC,IAA0B,CAAC,IAAI,GAAG,CAAC,CAAC,IAAK,CAAC;gBAC7C,CAAC;gBACD,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,KAAK,CAAC;gBAC3B,IAAI,CAAC,CAAC,KAAK;oBACT,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,GAAG,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC;gBAC5D,IAAI,OAAO;oBAAE,EAAE,CAAC,YAAY,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;;oBACvC,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;gBAC1B,OAAO,GAAG,IAAI,CAAC;gBACf,aAAa,GAAG,MAAM,CAAC;YACzB,CAAC;YAED,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;YAC3B,WAAW,CAAC,OAAO,CAAC,CAAC;YAErB,OAAO;gBACL,EAAE,EAAE,EAAE;gBACN,MAAM,EAAE,IAAI,CAAC,EAAE;oBACb,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;oBACxB,WAAW,CAAC,IAAI,CAAC,CAAC;gBACpB,CAAC;gBACD,OAAO,EAAE,GAAG,EAAE;oBACZ,QAAQ,CAAC,OAAO,EAAE,CAAC;gBACrB,CAAC;aACF,CAAC;QACJ,CAAC;KACF,CAAC,CACH,CAAC;IAEF,SAAS,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;IAEhC,6CAA6C;IAC7C,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC/C,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAC1C,WAAW,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;IAC9B,QAAQ,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC;IACpC,SAAS,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;IAEhC,qBAAqB;IACrB,SAAS,CAAC,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC;IAEzC,OAAO;QACL,EAAE,EAAE,OAAO;QACX,OAAO,EAAE,GAAG,EAAE;YACZ,KAAK,MAAM,OAAO,IAAI,SAAS;gBAAE,OAAO,EAAE,CAAC;YAC3C,OAAO,CAAC,eAAe,EAAE,CAAC;QAC5B,CAAC;KACF,CAAC;AACJ,CAAC"}

package/dist/sections/contact/contact-section.scss

@@ -0,0 +1,142 @@
+/// ContactSection styles
+/// Two-column layout with contact info and form/content area.
+/// Friendship: heading↔description = Close Friends (sm),
+/// contact items = Close Friends (sm), icon↔value = Lovers (xs).
+///
+/// @group sections
+
+@use '@pithyjs/design-system/a11y/styles/mixins' as a11y;
+@use '../../shared/tokens' as shared;
+@use '../../shared/mixins' as shared-mix;
+
+// ============================================
+// Layout
+// ============================================
+
+.ui-contact-layout {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-xl); // Info ↔ form: Strangers (side-by-side)
+  align-items: start;
+
+  // Centre wrapped children whose width is capped by fluid-center-child
+  @include shared-mix.fluid-center-parent;
+}
+
+// ============================================
+// Info side
+// ============================================
+
+.ui-contact-info {
+  flex: 1 1 shared.$min-column;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm); // Heading ↔ description: Close Friends
+
+  // Cap width so parent's justify-content: center kicks in when wrapped
+  @include shared-mix.fluid-center-child;
+}
+
+// Heading/description → contact list: Friends (same info column, divider provides visual break)
+// margin creates space above divider, padding creates space below it
+// Collapse the address when there are no contacts — avoids an empty landmark, the divider, and dead space.
+.ui-contact-info address:has(> ul:empty) {
+  display: none;
+}
+
+.ui-contact-info address {
+  margin-block-start: var(--space-md);
+  padding-block-start: var(--space-md);
+  font-style: normal; // Reset <address> default italic
+  position: relative;
+
+  // Gradient divider — same pattern as footer
+  // NOTE: `to right` is physical; CSS logical gradient directions are not yet supported.
+  // The gradient is symmetric so RTL rendering is visually identical.
+  &::before {
+    content: '';
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline: 0;
+    block-size: var(--border-width-hairline);
+    background: linear-gradient(
+      to right,
+      transparent,
+      var(--color-border) 20%,
+      var(--color-border) 80%,
+      transparent
+    );
+  }
+}
+
+// Contact item row
+.ui-contact-item {
+  display: flex;
+  flex-direction: row;
+  gap: var(--space-xs); // Icon ↔ value: Lovers
+  align-items: center;
+
+  // Centre icon+text only when parent stacks (inherits container from fluid-center-parent)
+  @container (max-width: #{shared.$min-column * 2 + 4rem}) {
+    justify-content: center;
+  }
+
+  // Icon transitions with link color on hover — only when item has a link
+  &:has(a):hover .ui-icon {
+    color: var(--color-primary);
+  }
+
+  @include a11y.motion-safe {
+    .ui-icon {
+      transition: var(--motion-transition-color);
+    }
+  }
+}
+
+// Contact links — use .ui-nav-link class (added in ContactSection.ts).
+// Override base color to text (was the default before consolidation);
+// hover/active remain primary via .ui-nav-link defaults.
+.ui-contact-info .ui-nav-link {
+  --_nav-color: var(--color-text);
+}
+
+// ============================================
+// Form/content side
+// ============================================
+
+.ui-contact-form {
+  flex: 1 1 shared.$min-column-wide;
+  background-color: var(--color-surface-variant, var(--color-surface));
+  border-radius: var(--radius-lg);
+  padding-block: var(--space-lg);
+  padding-inline: var(--space-lg);
+  border: var(--border-width-hairline) solid var(--color-border);
+  box-shadow: var(--shadow-xs);
+
+  @include a11y.motion-safe {
+    transition:
+      var(--motion-transition-shadow), var(--motion-transition-border);
+  }
+
+  &:hover,
+  &:focus-within {
+    box-shadow: var(--shadow-md);
+    border-color: color-mix(
+      in oklch,
+      var(--color-primary) 20%,
+      var(--color-border)
+    );
+  }
+}
+
+// ============================================
+// Forced colors
+// ============================================
+
+// Forced colors — link styling handled by .ui-nav-link's own forced-colors block.
+// Icon color override for high contrast:
+@include a11y.forced-colors {
+  .ui-contact-item:has(a):hover .ui-icon {
+    color: LinkText; // stylelint-disable-line scale-unlimited/declaration-strict-value -- CSS system color required
+  }
+}

package/dist/sections/cta/CTASection.d.ts

@@ -0,0 +1,52 @@
+/** @codex
+{
+  "id": "pithy.ui-kit.cta-section",
+  "title": "<CTASection> Section Template",
+  "category": "feature"
+}
+*/
+import type { SpacingSize } from '@pithyjs/design-system';
+import { type SemanticColor } from '../../shared/types';
+import { type ReactiveText } from '../../shared/clickable';
+declare const CTA_VARIANTS: readonly ["centered", "inline"];
+type CTAVariant = (typeof CTA_VARIANTS)[number];
+/** @codexApi {"parent":"pithy.ui-kit.cta-section","name":"CTASectionProps","stability":"stable","signature":"interface CTASectionProps"} */
+export interface CTASectionProps {
+    /** Small label above heading (e.g. "LIMITED TIME", "NEW") */
+    eyebrow?: ReactiveText;
+    /** CTA heading text */
+    heading: ReactiveText;
+    /** Heading level (default: 2) */
+    headingLevel?: number;
+    /** Supporting description */
+    description?: ReactiveText;
+    /** Color scheme for theming (default: "primary") */
+    color?: SemanticColor;
+    /** Layout variant (default: "centered") */
+    variant?: CTAVariant;
+    /** Vertical padding (default: "lg") */
+    spacing?: SpacingSize;
+    /** Optional anchor id */
+    id?: string;
+}
+/**
+ * Call-to-action banner section with heading, description, and action buttons.
+ *
+ * Two variants: "centered" (stacked, text-centered) and "inline"
+ * (text and buttons side by side). Color prop sets a `data-color`
+ * attribute for theming. Children projected as CTA buttons.
+ *
+ * @example
+ * ```html
+ * <CTASection heading="'Ready to start?'" description="'Join thousands of developers'">
+ *   <Button color="'primary'">Sign Up Free</Button>
+ * </CTASection>
+ * ```
+ */
+/** @codexApi {"parent":"pithy.ui-kit.cta-section","name":"CTASection","stability":"stable","signature":"(props: CTASectionProps) => { el: HTMLElement; destroy: () => void }"} */
+export declare function CTASection({ eyebrow, heading, headingLevel: rawLevel, description, color: rawColor, variant: rawVariant, spacing: rawSpacing, id, }: CTASectionProps): {
+    el: HTMLElement;
+    destroy: () => void;
+};
+export {};
+//# sourceMappingURL=CTASection.d.ts.map

package/dist/sections/cta/CTASection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CTASection.d.ts","sourceRoot":"","sources":["../../../src/sections/cta/CTASection.ts"],"names":[],"mappings":"AAAA;;;;;;EAME;AAGF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAK1D,OAAO,EAAmB,KAAK,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAOzE,OAAO,EAIL,KAAK,YAAY,EAClB,MAAM,wBAAwB,CAAC;AAGhC,QAAA,MAAM,YAAY,iCAAkC,CAAC;AACrD,KAAK,UAAU,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AAEhD,4IAA4I;AAC5I,MAAM,WAAW,eAAe;IAC9B,6DAA6D;IAC7D,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,uBAAuB;IACvB,OAAO,EAAE,YAAY,CAAC;IACtB,iCAAiC;IACjC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6BAA6B;IAC7B,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,oDAAoD;IACpD,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB,uCAAuC;IACvC,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,yBAAyB;IACzB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED;;;;;;;;;;;;;GAaG;AACH,kLAAkL;AAClL,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,OAAO,EACP,YAAY,EAAE,QAAY,EAC1B,WAAW,EACX,KAAK,EAAE,QAAoB,EAC3B,OAAO,EAAE,UAAuB,EAChC,OAAO,EAAE,UAAiB,EAC1B,EAAE,GACH,EAAE,eAAe,GAAG;IAAE,EAAE,EAAE,WAAW,CAAC;IAAC,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,CAkH5D"}