@pithyjs/ui-kit 0.1.0-beta.0

package/dist/sections/cta/CTASection.js

@@ -0,0 +1,130 @@
+/** @codex
+{
+  "id": "pithy.ui-kit.cta-section",
+  "title": "<CTASection> 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 { SEMANTIC_COLORS } from '../../shared/types';
+import { clampHeadingLevel, validateSpacing, applyContainment, generateSectionHeadingId, } from '../../shared/section';
+import { bindReactive, readReactive, hasReactive, } from '../../shared/clickable';
+import { observeEntrance } from '../entrance';
+const CTA_VARIANTS = ['centered', 'inline'];
+/**
+ * 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 function CTASection({ eyebrow, heading, headingLevel: rawLevel = 2, description, color: rawColor = 'primary', variant: rawVariant = 'centered', spacing: rawSpacing = 'lg', id, }) {
+    const validVariant = CTA_VARIANTS.includes(rawVariant);
+    const validColor = SEMANTIC_COLORS.includes(rawColor);
+    if (import.meta.env?.DEV) {
+        if (!validVariant) {
+            console.warn(`[<CTASection>] Invalid variant: "${rawVariant}". Expected "centered" or "inline". Falling back to "centered".`);
+        }
+        if (!validColor) {
+            const valid = SEMANTIC_COLORS.join(', ');
+            console.warn(`[<CTASection>] Invalid color: "${rawColor}". Expected one of: ${valid}. Falling back to "primary".`);
+        }
+    }
+    const variant = validVariant ? rawVariant : 'centered';
+    const color = validColor ? rawColor : 'primary';
+    const spacing = validateSpacing('CTASection', rawSpacing);
+    const level = clampHeadingLevel(rawLevel);
+    const disposers = [];
+    // Capture projected children FIRST and clear context.
+    const { el: childFragment, destroy: destroyChildren } = captureChildren();
+    disposers.push(destroyChildren);
+    // Root section element
+    const section = document.createElement('section');
+    section.classList.add('ui-section', 'ui-cta', PY_CLASS[spacing]);
+    section.setAttribute('data-color', color);
+    if (id)
+        section.id = id;
+    // Inner container with containment
+    const container = document.createElement('div');
+    applyContainment(container);
+    section.appendChild(container);
+    // Create heading — link to section via aria-labelledby
+    const headingId = generateSectionHeadingId('cta', id);
+    const headingComp = Heading({
+        level,
+        align: variant === 'centered' ? 'center' : undefined,
+        text: heading,
+    });
+    const headingEl = headingComp.el;
+    headingEl.id = headingId;
+    section.setAttribute('aria-labelledby', headingId);
+    disposers.push(headingComp.destroy);
+    // Create description
+    let descComp;
+    if (description) {
+        descComp = Text({
+            color: 'text-muted',
+            align: variant === 'centered' ? 'center' : undefined,
+            text: description,
+        });
+        disposers.push(descComp.destroy);
+    }
+    // Text block groups eyebrow + heading + description (Close Friends spacing via SCSS)
+    const textBlock = document.createElement('div');
+    textBlock.classList.add('ui-cta-text-block');
+    // Eyebrow label
+    if (eyebrow) {
+        const eyebrowEl = document.createElement('span');
+        eyebrowEl.classList.add('ui-section-eyebrow');
+        const eyebrowText = eyebrowEl.appendChild(document.createTextNode(''));
+        disposers.push(bindReactive(hasReactive(eyebrow), () => {
+            eyebrowText.nodeValue = readReactive(eyebrow) ?? '';
+        }));
+        textBlock.appendChild(eyebrowEl);
+    }
+    textBlock.appendChild(headingComp.el);
+    if (descComp)
+        textBlock.appendChild(descComp.el);
+    // Actions area
+    const actionsArea = document.createElement('div');
+    actionsArea.classList.add('ui-cta-actions');
+    captureSlot(actionsArea, 'actions');
+    actionsArea.appendChild(childFragment);
+    if (variant === 'inline') {
+        // Inline: text left, buttons right
+        container.classList.add('ui-cta-content');
+        container.setAttribute('data-variant', 'inline');
+        container.appendChild(textBlock);
+        container.appendChild(actionsArea);
+    }
+    else {
+        // Centered (default)
+        container.classList.add('ui-cta-content');
+        container.setAttribute('data-variant', 'centered');
+        container.appendChild(textBlock);
+        container.appendChild(actionsArea);
+    }
+    // Entrance animation
+    disposers.push(observeEntrance(section));
+    return {
+        el: section,
+        destroy: () => {
+            for (const dispose of disposers)
+                dispose();
+            section.replaceChildren();
+        },
+    };
+}
+//# sourceMappingURL=CTASection.js.map

package/dist/sections/cta/CTASection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CTASection.js","sourceRoot":"","sources":["../../../src/sections/cta/CTASection.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,131 @@
+/// CTASection styles
+/// Call-to-action banner with surface background and color theming.
+/// Friendship: heading↔description = Close Friends (sm),
+/// text↔actions = Acquaintances (lg).
+///
+/// @group sections
+
+@use 'sass:map';
+@use '@pithyjs/design-system/a11y/styles/mixins' as a11y;
+@use '@pithyjs/design-system/typography/_generated/tokens' as typo;
+@use '../../shared/tokens' as shared;
+
+// ============================================
+// Base — subtle tinted surface
+// ============================================
+
+.ui-cta {
+  --_cta-color: var(--color-primary);
+
+  background-color: var(--color-surface-variant, var(--color-surface));
+  border: var(--border-width-hairline) solid var(--color-border);
+  box-shadow: var(--shadow-sm);
+  border-radius: var(--radius-md);
+}
+
+// ============================================
+// Color schemes
+// ============================================
+
+@each $scheme in shared.$semantic-colors {
+  .ui-cta[data-color='#{$scheme}'] {
+    --_cta-color: var(--color-#{$scheme});
+  }
+}
+
+// ============================================
+// Centered variant
+// ============================================
+
+.ui-cta-content[data-variant='centered'] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.ui-cta-content[data-variant='centered'] .ui-cta-text-block {
+  max-inline-size: shared.$measure-content;
+}
+
+// CTA headings: slightly larger, tighter, tight tracking
+.ui-cta .ui-heading {
+  font-size: var(--font-size-2xl);
+  line-height: var(--line-height-2xl);
+  letter-spacing: map.get(map.get(typo.$display-sizes, '4'), letter-spacing);
+}
+
+.ui-cta-content[data-variant='centered'] .ui-heading {
+  text-wrap: balance;
+}
+
+// ============================================
+// Inline variant
+// ============================================
+
+.ui-cta-content[data-variant='inline'] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-lg);
+
+  // Cap the row so text + button stay in the user's focal area.
+  // Without this, space-between pushes the button to the far edge
+  // creating a disconnected void on wide viewports.
+  max-inline-size: shared.$measure-content;
+  margin-inline: auto;
+
+  // Text side grows; wraps when container is too narrow for both
+  > .ui-cta-text-block {
+    flex: 1 1 shared.$min-column;
+  }
+
+  // Actions shrink-wrap — don't stretch
+  > .ui-cta-actions {
+    flex: 0 0 auto;
+  }
+}
+
+// ============================================
+// Text block — heading + description
+// ============================================
+
+.ui-cta-text-block {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm); // Heading ↔ description: Close Friends
+}
+
+// Text → actions: Acquaintances (lg)
+.ui-cta-content[data-variant='centered'] .ui-cta-text-block + .ui-cta-actions {
+  margin-block-start: var(--space-lg);
+}
+
+.ui-cta-text-block .ui-text {
+  max-inline-size: shared.$measure-text;
+  font-weight: var(--font-weight-regular);
+}
+
+// ============================================
+// Actions
+// ============================================
+
+.ui-cta-actions {
+  display: flex;
+  flex-direction: row;
+  gap: var(--space-md); // Distinct action paths: Friends
+  flex-wrap: wrap;
+}
+
+// ============================================
+// Forced colors
+// ============================================
+
+@include a11y.forced-colors {
+  .ui-cta {
+    background-color: Canvas; // stylelint-disable-line scale-unlimited/declaration-strict-value -- CSS system color required
+    border-block-start: var(--border-width-thin) solid CanvasText; // stylelint-disable-line scale-unlimited/declaration-strict-value -- CSS system color required
+    border-block-end: var(--border-width-thin) solid CanvasText; // stylelint-disable-line scale-unlimited/declaration-strict-value -- CSS system color required
+  }
+}

package/dist/sections/entrance.d.ts

@@ -0,0 +1,29 @@
+/** @codex { "id": "pithy.ui-kit.section-entrance", "title": "Section Entrance Animations", "category": "runtime" } */
+/** @codexApi {"parent":"pithy.ui-kit.section-entrance","name":"ENTRANCE_CLASSES","stability":"stable","signature":"readonly string[]"} */
+export declare const ENTRANCE_CLASSES: readonly string[];
+/**
+ * Applies scroll-triggered entrance animation to an element.
+ * Uses IntersectionObserver to add `.ui-section-visible` when
+ * the element enters the viewport. Respects prefers-reduced-motion
+ * via CSS (see _section-base.scss).
+ *
+ * Reads the global EntranceConfig to determine animation behavior:
+ * - "none"       → no-op (returns immediately)
+ * - "subtle"     → fade only (adds .ui-section-enter-subtle)
+ * - "standard"   → fade + slide (adds .ui-section-enter)
+ * - "expressive" → fade + slide + scale (adds .ui-section-enter-expressive)
+ *
+ * Stagger is only applied in "standard" and "expressive" presets.
+ *
+ * @returns cleanup function to disconnect the observer
+ */
+/** @codexApi {"parent":"pithy.ui-kit.section-entrance","name":"ObserveEntranceOptions","stability":"stable","signature":"interface ObserveEntranceOptions"} */
+export interface ObserveEntranceOptions {
+    /** Enable staggered entrance for child elements */
+    stagger?: boolean;
+    /** IntersectionObserver threshold (default: 0.15) */
+    threshold?: number;
+}
+/** @codexApi {"parent":"pithy.ui-kit.section-entrance","name":"observeEntrance","stability":"stable","signature":"(el: HTMLElement, options?: { stagger?: boolean; threshold?: number }) => () => void"} */
+export declare function observeEntrance(el: HTMLElement, options?: ObserveEntranceOptions): () => void;
+//# sourceMappingURL=entrance.d.ts.map

package/dist/sections/entrance.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"entrance.d.ts","sourceRoot":"","sources":["../../src/sections/entrance.ts"],"names":[],"mappings":"AAAA,sHAAsH;AAatH,0IAA0I;AAC1I,eAAO,MAAM,gBAAgB,EAAE,SAAS,MAAM,EAM7C,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,+JAA+J;AAC/J,MAAM,WAAW,sBAAsB;IACrC,mDAAmD;IACnD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,4MAA4M;AAC5M,wBAAgB,eAAe,CAC7B,EAAE,EAAE,WAAW,EACf,OAAO,CAAC,EAAE,sBAAsB,GAC/B,MAAM,IAAI,CA2DZ"}

package/dist/sections/entrance.js

@@ -0,0 +1,69 @@
+/** @codex { "id": "pithy.ui-kit.section-entrance", "title": "Section Entrance Animations", "category": "runtime" } */
+import { getEntranceConfig } from '../shared/entrance-config';
+const ENTER_CLASS = {
+    subtle: 'ui-section-enter-subtle',
+    expressive: 'ui-section-enter-expressive',
+    standard: 'ui-section-enter',
+};
+const STAGGER_CLASS = 'ui-section-stagger';
+const VISIBLE_CLASS = 'ui-section-visible';
+/** @codexApi {"parent":"pithy.ui-kit.section-entrance","name":"ENTRANCE_CLASSES","stability":"stable","signature":"readonly string[]"} */
+export const ENTRANCE_CLASSES = [
+    ENTER_CLASS.subtle,
+    ENTER_CLASS.expressive,
+    ENTER_CLASS.standard,
+    STAGGER_CLASS,
+    VISIBLE_CLASS,
+];
+/** @codexApi {"parent":"pithy.ui-kit.section-entrance","name":"observeEntrance","stability":"stable","signature":"(el: HTMLElement, options?: { stagger?: boolean; threshold?: number }) => () => void"} */
+export function observeEntrance(el, options) {
+    // SSR guard — no DOM layout or observers in Node.js
+    if (typeof window === 'undefined' ||
+        typeof IntersectionObserver === 'undefined') {
+        return () => { };
+    }
+    const { preset } = getEntranceConfig();
+    // "none" → no entrance animation at all
+    if (preset === 'none') {
+        return () => { };
+    }
+    const threshold = options?.threshold ?? 0.15;
+    // Apply the appropriate enter class based on preset
+    if (preset === 'subtle') {
+        el.classList.add(ENTER_CLASS.subtle);
+    }
+    else if (preset === 'expressive') {
+        el.classList.add(ENTER_CLASS.expressive);
+    }
+    else {
+        el.classList.add(ENTER_CLASS.standard);
+    }
+    // Stagger only in standard and expressive presets
+    if (options?.stagger && preset !== 'subtle') {
+        el.classList.add(STAGGER_CLASS);
+    }
+    let disposed = false;
+    const observer = new IntersectionObserver(entries => {
+        if (disposed)
+            return;
+        for (const entry of entries) {
+            if (entry.isIntersecting) {
+                el.classList.add(VISIBLE_CLASS);
+                observer.disconnect();
+            }
+        }
+    }, { threshold });
+    // Defer observe to next microtask so the element is connected to the DOM
+    // when the observer first checks visibility. This ensures the above-the-fold
+    // fast path works (observer fires asynchronously for already-visible elements).
+    queueMicrotask(() => {
+        if (disposed)
+            return;
+        observer.observe(el);
+    });
+    return () => {
+        disposed = true;
+        observer.disconnect();
+    };
+}
+//# sourceMappingURL=entrance.js.map

package/dist/sections/entrance.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"entrance.js","sourceRoot":"","sources":["../../src/sections/entrance.ts"],"names":[],"mappings":"AAAA,sHAAsH;AAEtH,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAE9D,MAAM,WAAW,GAAG;IAClB,MAAM,EAAE,yBAAyB;IACjC,UAAU,EAAE,6BAA6B;IACzC,QAAQ,EAAE,kBAAkB;CACpB,CAAC;AAEX,MAAM,aAAa,GAAG,oBAAoB,CAAC;AAC3C,MAAM,aAAa,GAAG,oBAAoB,CAAC;AAE3C,0IAA0I;AAC1I,MAAM,CAAC,MAAM,gBAAgB,GAAsB;IACjD,WAAW,CAAC,MAAM;IAClB,WAAW,CAAC,UAAU;IACtB,WAAW,CAAC,QAAQ;IACpB,aAAa;IACb,aAAa;CACd,CAAC;AA0BF,4MAA4M;AAC5M,MAAM,UAAU,eAAe,CAC7B,EAAe,EACf,OAAgC;IAEhC,oDAAoD;IACpD,IACE,OAAO,MAAM,KAAK,WAAW;QAC7B,OAAO,oBAAoB,KAAK,WAAW,EAC3C,CAAC;QACD,OAAO,GAAG,EAAE,GAAE,CAAC,CAAC;IAClB,CAAC;IAED,MAAM,EAAE,MAAM,EAAE,GAAG,iBAAiB,EAAE,CAAC;IAEvC,wCAAwC;IACxC,IAAI,MAAM,KAAK,MAAM,EAAE,CAAC;QACtB,OAAO,GAAG,EAAE,GAAE,CAAC,CAAC;IAClB,CAAC;IAED,MAAM,SAAS,GAAG,OAAO,EAAE,SAAS,IAAI,IAAI,CAAC;IAE7C,oDAAoD;IACpD,IAAI,MAAM,KAAK,QAAQ,EAAE,CAAC;QACxB,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IACvC,CAAC;SAAM,IAAI,MAAM,KAAK,YAAY,EAAE,CAAC;QACnC,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAC3C,CAAC;SAAM,CAAC;QACN,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;IACzC,CAAC;IAED,kDAAkD;IAClD,IAAI,OAAO,EAAE,OAAO,IAAI,MAAM,KAAK,QAAQ,EAAE,CAAC;QAC5C,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAClC,CAAC;IAED,IAAI,QAAQ,GAAG,KAAK,CAAC;IAErB,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CACvC,OAAO,CAAC,EAAE;QACR,IAAI,QAAQ;YAAE,OAAO;QACrB,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE,CAAC;YAC5B,IAAI,KAAK,CAAC,cAAc,EAAE,CAAC;gBACzB,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;gBAChC,QAAQ,CAAC,UAAU,EAAE,CAAC;YACxB,CAAC;QACH,CAAC;IACH,CAAC,EACD,EAAE,SAAS,EAAE,CACd,CAAC;IAEF,yEAAyE;IACzE,6EAA6E;IAC7E,gFAAgF;IAChF,cAAc,CAAC,GAAG,EAAE;QAClB,IAAI,QAAQ;YAAE,OAAO;QACrB,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;IACvB,CAAC,CAAC,CAAC;IAEH,OAAO,GAAG,EAAE;QACV,QAAQ,GAAG,IAAI,CAAC;QAChB,QAAQ,CAAC,UAAU,EAAE,CAAC;IACxB,CAAC,CAAC;AACJ,CAAC"}

package/dist/sections/features/FeaturesSection.d.ts

@@ -0,0 +1,54 @@
+/** @codex
+{
+  "id": "pithy.ui-kit.features-section",
+  "title": "<FeaturesSection> Section Template",
+  "category": "feature"
+}
+*/
+import type { SpacingSize } from '@pithyjs/design-system';
+import { type Reactive, type ReactiveText } from '../../shared/clickable';
+/** @codexApi {"parent":"pithy.ui-kit.features-section","name":"FeatureItem","stability":"stable","signature":"interface FeatureItem"} */
+export interface FeatureItem {
+    /** Icon name (rendered as decorative icon) */
+    icon?: string;
+    /** Feature title */
+    title: string;
+    /** Feature description */
+    description: string;
+}
+/** @codexApi {"parent":"pithy.ui-kit.features-section","name":"FeaturesSectionProps","stability":"stable","signature":"interface FeaturesSectionProps"} */
+export interface FeaturesSectionProps {
+    /** Section heading */
+    heading?: ReactiveText;
+    /** Heading level (default: 2) */
+    headingLevel?: number;
+    /** Section description below heading */
+    subheading?: ReactiveText;
+    /** Feature items to display */
+    items: Reactive<FeatureItem[]>;
+    /** Number of columns (2-4, default: 3) */
+    columns?: number;
+    /** Vertical padding (default: "xl") */
+    spacing?: SpacingSize;
+    /** Optional anchor id */
+    id?: string;
+}
+/**
+ * Feature grid section with icon, heading, and description per item.
+ *
+ * Renders a responsive grid of feature cards. Items are passed as a
+ * typed array prop. Optional section heading and subheading above the grid.
+ * Children projected below the grid for additional content.
+ *
+ * @example
+ * ```html
+ * <FeaturesSection heading="'Features'" items="features">
+ * </FeaturesSection>
+ * ```
+ */
+/** @codexApi {"parent":"pithy.ui-kit.features-section","name":"FeaturesSection","stability":"stable","signature":"(props: FeaturesSectionProps) => { el: HTMLElement; destroy: () => void }"} */
+export declare function FeaturesSection({ heading, headingLevel: rawLevel, subheading, items, columns: rawColumns, spacing: rawSpacing, id, }: FeaturesSectionProps): {
+    el: HTMLElement;
+    destroy: () => void;
+};
+//# sourceMappingURL=FeaturesSection.d.ts.map

package/dist/sections/features/FeaturesSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeaturesSection.d.ts","sourceRoot":"","sources":["../../../src/sections/features/FeaturesSection.ts"],"names":[],"mappings":"AAAA;;;;;;EAME;AAGF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAW1D,OAAO,EAEL,KAAK,QAAQ,EACb,KAAK,YAAY,EAClB,MAAM,wBAAwB,CAAC;AAKhC,yIAAyI;AACzI,MAAM,WAAW,WAAW;IAC1B,8CAA8C;IAC9C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,0BAA0B;IAC1B,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,2JAA2J;AAC3J,MAAM,WAAW,oBAAoB;IACnC,sBAAsB;IACtB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,iCAAiC;IACjC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wCAAwC;IACxC,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,+BAA+B;IAC/B,KAAK,EAAE,QAAQ,CAAC,WAAW,EAAE,CAAC,CAAC;IAC/B,0CAA0C;IAC1C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uCAAuC;IACvC,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,yBAAyB;IACzB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED;;;;;;;;;;;;GAYG;AACH,iMAAiM;AACjM,wBAAgB,eAAe,CAAC,EAC9B,OAAO,EACP,YAAY,EAAE,QAAY,EAC1B,UAAU,EACV,KAAK,EACL,OAAO,EAAE,UAAc,EACvB,OAAO,EAAE,UAAiB,EAC1B,EAAE,GACH,EAAE,oBAAoB,GAAG;IAAE,EAAE,EAAE,WAAW,CAAC;IAAC,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,CA8HjE"}

package/dist/sections/features/FeaturesSection.js

@@ -0,0 +1,139 @@
+/** @codex
+{
+  "id": "pithy.ui-kit.features-section",
+  "title": "<FeaturesSection> 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 { clampHeadingLevel, validateSpacing, applyContainment, generateSectionHeadingId, } from '../../shared/section';
+import { readReactive, } from '../../shared/clickable';
+import { reconcileList } from '../../shared/reconcile-list';
+import { createIconSlot } from '../../shared/icon-slot';
+import { observeEntrance } from '../entrance';
+/**
+ * Feature grid section with icon, heading, and description per item.
+ *
+ * Renders a responsive grid of feature cards. Items are passed as a
+ * typed array prop. Optional section heading and subheading above the grid.
+ * Children projected below the grid for additional content.
+ *
+ * @example
+ * ```html
+ * <FeaturesSection heading="'Features'" items="features">
+ * </FeaturesSection>
+ * ```
+ */
+/** @codexApi {"parent":"pithy.ui-kit.features-section","name":"FeaturesSection","stability":"stable","signature":"(props: FeaturesSectionProps) => { el: HTMLElement; destroy: () => void }"} */
+export function FeaturesSection({ heading, headingLevel: rawLevel = 2, subheading, items, columns: rawColumns = 3, spacing: rawSpacing = 'xl', id, }) {
+    if (import.meta.env?.DEV) {
+        const initial = readReactive(items);
+        if (!Array.isArray(initial) || initial.length === 0) {
+            console.warn(`[<FeaturesSection>] items must be a non-empty array.`);
+        }
+    }
+    const spacing = validateSpacing('FeaturesSection', rawSpacing, 'xl');
+    const level = clampHeadingLevel(rawLevel);
+    const columns = Math.max(2, Math.min(4, Math.round(rawColumns || 3)));
+    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-features', PY_CLASS[spacing]);
+    if (id)
+        section.id = id;
+    // Contained wrapper
+    const container = document.createElement('div');
+    applyContainment(container);
+    container.classList.add('ui-features-layout');
+    section.appendChild(container);
+    // Fallback accessible label when no heading is provided
+    if (!heading) {
+        section.setAttribute('aria-label', 'Features');
+    }
+    // Section header (heading + subheading)
+    if (heading || subheading) {
+        const header = document.createElement('div');
+        header.classList.add('ui-features-header');
+        if (heading) {
+            const headingId = generateSectionHeadingId('features', id);
+            const headingComp = Heading({ level, align: 'center', text: heading });
+            const headingEl = headingComp.el;
+            headingEl.id = headingId;
+            section.setAttribute('aria-labelledby', headingId);
+            disposers.push(headingComp.destroy);
+            header.appendChild(headingEl);
+        }
+        if (subheading) {
+            const subComp = Text({
+                color: 'text-muted',
+                align: 'center',
+                text: subheading,
+            });
+            disposers.push(subComp.destroy);
+            header.appendChild(subComp.el);
+        }
+        container.appendChild(header);
+    }
+    // Feature grid — column count drives CSS layout via data-attribute
+    const grid = document.createElement('div');
+    grid.classList.add('ui-features-grid');
+    grid.setAttribute('data-columns', String(columns));
+    container.appendChild(grid);
+    const itemLevel = Math.min(level + 1, 6);
+    disposers.push(reconcileList({
+        parent: grid,
+        list: items,
+        renderRow: item => {
+            const card = document.createElement('div');
+            card.classList.add('ui-features-card');
+            const titleComp = Heading({ level: itemLevel, size: 'lg' });
+            titleComp.el.textContent = item.title;
+            const descComp = Text({ size: 'base', color: 'text-muted' });
+            descComp.el.textContent = item.description;
+            card.appendChild(titleComp.el);
+            card.appendChild(descComp.el);
+            const iconSlot = createIconSlot(card, 'xl', () => titleComp.el);
+            iconSlot.set(item.icon);
+            return {
+                el: card,
+                update: next => {
+                    iconSlot.set(next.icon);
+                    titleComp.el.textContent = next.title;
+                    descComp.el.textContent = next.description;
+                },
+                destroy: () => {
+                    iconSlot.destroy();
+                    titleComp.destroy();
+                    descComp.destroy();
+                },
+            };
+        },
+    }));
+    // Projected children (below grid, e.g. "See all features" link)
+    // Always create the slot so the site builder renderer can project into it.
+    const slotArea = document.createElement('div');
+    captureSlot(slotArea, 'extras');
+    if (childFragment.childNodes.length > 0) {
+        slotArea.appendChild(childFragment);
+    }
+    container.appendChild(slotArea);
+    // Entrance animation — observe section root, stagger grid cards
+    disposers.push(observeEntrance(section));
+    disposers.push(observeEntrance(grid, { stagger: true }));
+    return {
+        el: section,
+        destroy: () => {
+            for (const dispose of disposers)
+                dispose();
+            section.replaceChildren();
+        },
+    };
+}
+//# sourceMappingURL=FeaturesSection.js.map

package/dist/sections/features/FeaturesSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeaturesSection.js","sourceRoot":"","sources":["../../../src/sections/features/FeaturesSection.ts"],"names":[],"mappings":"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"}