@pithyjs/ui-kit 0.1.0-beta.0

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

@@ -0,0 +1,140 @@
+/// FeaturesSection styles
+/// Feature grid with card containment, proper spacing relationships.
+/// Friendship: icon↔title = Lovers (xs), title↔description = Close Friends (sm),
+/// header↔grid = 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;
+
+// ============================================
+// Layout
+// ============================================
+
+.ui-features-layout {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-lg); // Header ↔ grid: Acquaintances
+}
+
+// ============================================
+// Section header
+// ============================================
+
+.ui-features-header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: var(--space-sm); // Heading ↔ subheading: Close Friends
+}
+
+.ui-features-header .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);
+  text-wrap: balance;
+}
+
+.ui-features-header .ui-text {
+  max-inline-size: shared.$measure-text;
+}
+
+// ============================================
+// Grid
+// ============================================
+
+.ui-features-grid {
+  display: grid;
+  gap: var(--space-md); // Cards in a grid: Friends
+  // Intrinsically fluid — cards wrap naturally when they can't fit at min-column width
+  grid-template-columns: repeat(auto-fit, minmax(shared.$min-column, 1fr));
+
+  // Fewer columns → wider cards
+  &[data-columns='2'] {
+    grid-template-columns: repeat(
+      auto-fit,
+      minmax(shared.$min-column-wide, 1fr)
+    );
+  }
+}
+
+// ============================================
+// Feature card — containment + subtle surface
+// ============================================
+
+.ui-features-card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs); // Icon ↔ title: Lovers
+  padding-block: var(--space-lg);
+  padding-inline: var(--space-lg);
+  background-color: var(--color-surface-variant, var(--color-surface));
+  border-radius: var(--radius-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),
+      translate var(--motion-duration-normal) var(--motion-easing-standard);
+  }
+
+  &:hover,
+  &:focus-within {
+    box-shadow: var(--shadow-lg);
+    border-color: color-mix(
+      in oklch,
+      var(--color-primary) 30%,
+      var(--color-border)
+    );
+  }
+
+  @include a11y.motion-safe {
+    &:hover,
+    &:focus-within {
+      translate: 0 calc(-1 * var(--motion-distance-subtle));
+    }
+  }
+}
+
+// Icon with tinted pill background
+.ui-features-card .ui-icon {
+  color: var(--color-primary);
+  background-color: color-mix(in oklch, var(--color-primary) 10%, transparent);
+  border-radius: var(--radius-md);
+  padding-block: var(--space-sm);
+  padding-inline: var(--space-sm);
+}
+
+// Title ↔ description: Close Friends (sm)
+.ui-features-card .ui-text {
+  margin-block-start: calc(var(--space-sm) - var(--space-xs));
+}
+
+// ============================================
+// Slot — collapse when empty to avoid flex gap
+// ============================================
+
+.ui-features-layout > [data-slot]:empty {
+  display: none;
+}
+
+// ============================================
+// Forced colors
+// ============================================
+
+@include a11y.forced-colors {
+  .ui-features-card {
+    border: var(--border-width-thin) solid CanvasText; // stylelint-disable-line scale-unlimited/declaration-strict-value -- CSS system color required
+  }
+
+  .ui-features-card:hover,
+  .ui-features-card:focus-within {
+    box-shadow: none;
+  }
+}

package/dist/sections/footer/FooterSection.d.ts

@@ -0,0 +1,53 @@
+/** @codex
+{
+  "id": "pithy.ui-kit.footer-section",
+  "title": "<FooterSection> Section Template",
+  "category": "feature"
+}
+*/
+import type { SpacingSize } from '@pithyjs/design-system';
+import { type Reactive, type ReactiveText } from '../../shared/clickable';
+/** @codexApi {"parent":"pithy.ui-kit.footer-section","name":"FooterLinkGroup","stability":"stable","signature":"interface FooterLinkGroup"} */
+export interface FooterLinkGroup {
+    /** Group heading */
+    title: string;
+    /** Links in this group */
+    links: Array<{
+        label: string;
+        href: string;
+    }>;
+}
+/** @codexApi {"parent":"pithy.ui-kit.footer-section","name":"FooterSectionProps","stability":"stable","signature":"interface FooterSectionProps"} */
+export interface FooterSectionProps {
+    /** Navigation link groups */
+    groups?: Reactive<FooterLinkGroup[]>;
+    /** Brand name for copyright line */
+    brandName?: ReactiveText;
+    /** Copyright year — defaults to current year */
+    copyrightYear?: number;
+    /** Heading level for group titles (default: 3) */
+    headingLevel?: number;
+    /** Vertical padding (default: "lg") */
+    spacing?: SpacingSize;
+    /** Optional anchor id */
+    id?: string;
+}
+/**
+ * Page footer with navigation link groups, optional branding,
+ * and copyright. Uses semantic `<footer>` element.
+ *
+ * Children projected between navigation and copyright for
+ * custom content (social icons, newsletter signup, etc.).
+ *
+ * @example
+ * ```html
+ * <FooterSection brandName="'PithyJS'" groups="footerGroups">
+ * </FooterSection>
+ * ```
+ */
+/** @codexApi {"parent":"pithy.ui-kit.footer-section","name":"FooterSection","stability":"stable","signature":"(props?: FooterSectionProps) => { el: HTMLElement; destroy: () => void }"} */
+export declare function FooterSection({ groups, brandName, copyrightYear, headingLevel: rawLevel, spacing: rawSpacing, id, }?: FooterSectionProps): {
+    el: HTMLElement;
+    destroy: () => void;
+};
+//# sourceMappingURL=FooterSection.d.ts.map

package/dist/sections/footer/FooterSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FooterSection.d.ts","sourceRoot":"","sources":["../../../src/sections/footer/FooterSection.ts"],"names":[],"mappings":"AAAA;;;;;;EAME;AAGF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAW1D,OAAO,EAIL,KAAK,QAAQ,EACb,KAAK,YAAY,EAClB,MAAM,wBAAwB,CAAC;AAIhC,+IAA+I;AAC/I,MAAM,WAAW,eAAe;IAC9B,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,0BAA0B;IAC1B,KAAK,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAC/C;AAED,qJAAqJ;AACrJ,MAAM,WAAW,kBAAkB;IACjC,6BAA6B;IAC7B,MAAM,CAAC,EAAE,QAAQ,CAAC,eAAe,EAAE,CAAC,CAAC;IACrC,oCAAoC;IACpC,SAAS,CAAC,EAAE,YAAY,CAAC;IACzB,gDAAgD;IAChD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kDAAkD;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uCAAuC;IACvC,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,yBAAyB;IACzB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED;;;;;;;;;;;;GAYG;AACH,4LAA4L;AAC5L,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,SAAS,EACT,aAAa,EACb,YAAY,EAAE,QAAY,EAC1B,OAAO,EAAE,UAAiB,EAC1B,EAAE,GACH,GAAE,kBAAuB,GAAG;IAAE,EAAE,EAAE,WAAW,CAAC;IAAC,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,CAuIpE"}

package/dist/sections/footer/FooterSection.js

@@ -0,0 +1,147 @@
+/** @codex
+{
+  "id": "pithy.ui-kit.footer-section",
+  "title": "<FooterSection> 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, } from '../../shared/section';
+import { bindReactive, readReactive, hasReactive, } from '../../shared/clickable';
+import { reconcileList } from '../../shared/reconcile-list';
+import { observeEntrance } from '../entrance';
+/**
+ * Page footer with navigation link groups, optional branding,
+ * and copyright. Uses semantic `<footer>` element.
+ *
+ * Children projected between navigation and copyright for
+ * custom content (social icons, newsletter signup, etc.).
+ *
+ * @example
+ * ```html
+ * <FooterSection brandName="'PithyJS'" groups="footerGroups">
+ * </FooterSection>
+ * ```
+ */
+/** @codexApi {"parent":"pithy.ui-kit.footer-section","name":"FooterSection","stability":"stable","signature":"(props?: FooterSectionProps) => { el: HTMLElement; destroy: () => void }"} */
+export function FooterSection({ groups, brandName, copyrightYear, headingLevel: rawLevel = 3, spacing: rawSpacing = 'lg', id, } = {}) {
+    const spacing = validateSpacing('FooterSection', rawSpacing);
+    const level = clampHeadingLevel(rawLevel);
+    const disposers = [];
+    // Capture projected children FIRST and clear context.
+    const { el: childFragment, destroy: destroyChildren } = captureChildren();
+    disposers.push(destroyChildren);
+    // Root footer element
+    const footer = document.createElement('footer');
+    footer.classList.add('ui-section', 'ui-footer', PY_CLASS[spacing]);
+    if (id)
+        footer.id = id;
+    // Contained wrapper
+    const container = document.createElement('div');
+    applyContainment(container);
+    container.classList.add('ui-footer-layout');
+    footer.appendChild(container);
+    const nav = document.createElement('nav');
+    nav.setAttribute('aria-label', 'Footer');
+    const grid = document.createElement('div');
+    grid.classList.add('ui-footer-nav-grid');
+    nav.appendChild(grid);
+    container.appendChild(nav);
+    function linksEqual(a, b) {
+        const aa = Array.isArray(a) ? a : [];
+        const bb = Array.isArray(b) ? b : [];
+        if (aa.length !== bb.length)
+            return false;
+        return aa.every((link, i) => link.label === bb[i].label && link.href === bb[i].href);
+    }
+    function renderLinks(list, group) {
+        list.replaceChildren();
+        const safeLinks = Array.isArray(group.links) ? group.links : [];
+        for (const link of safeLinks) {
+            const li = document.createElement('li');
+            if (typeof link.href === 'string' && isSafeHref(link.href)) {
+                const a = document.createElement('a');
+                a.classList.add('ui-nav-link');
+                a.href = link.href;
+                a.textContent = link.label;
+                li.appendChild(a);
+            }
+            else {
+                li.textContent = link.label;
+            }
+            list.appendChild(li);
+        }
+    }
+    disposers.push(reconcileList({
+        parent: grid,
+        list: groups ?? [],
+        renderRow: group => {
+            const col = document.createElement('div');
+            col.classList.add('ui-footer-group');
+            const titleComp = Heading({ level, size: 'xs', weight: 'semibold' });
+            titleComp.el.textContent = group.title;
+            col.appendChild(titleComp.el);
+            const list = document.createElement('ul');
+            list.classList.add('u-list-reset', 'ui-footer-link-list');
+            renderLinks(list, group);
+            col.appendChild(list);
+            let currentLinks = group.links;
+            return {
+                el: col,
+                update: next => {
+                    titleComp.el.textContent = next.title;
+                    if (!linksEqual(currentLinks, next.links)) {
+                        renderLinks(list, next);
+                        currentLinks = next.links;
+                    }
+                },
+                destroy: () => {
+                    titleComp.destroy();
+                },
+            };
+        },
+    }));
+    // Projected children (social icons, newsletter, etc.)
+    // 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);
+    // Divider + copyright
+    const hr = document.createElement('hr');
+    hr.classList.add('ui-footer-divider');
+    container.appendChild(hr);
+    const year = copyrightYear ?? new Date().getFullYear();
+    const copyrightComp = Text({ size: 'sm', color: 'text-muted', as: 'p' });
+    const copyrightEl = copyrightComp.el;
+    copyrightEl.classList.add('ui-footer-copyright');
+    const small = document.createElement('small');
+    const copyrightText = small.appendChild(document.createTextNode(''));
+    disposers.push(bindReactive(hasReactive(brandName), () => {
+        const name = readReactive(brandName);
+        copyrightText.nodeValue = name
+            ? `\u00A9 ${year} ${name}. All rights reserved.`
+            : `\u00A9 ${year}. All rights reserved.`;
+    }));
+    copyrightEl.appendChild(small);
+    disposers.push(copyrightComp.destroy);
+    container.appendChild(copyrightEl);
+    // Entrance animation
+    disposers.push(observeEntrance(footer));
+    return {
+        el: footer,
+        destroy: () => {
+            for (const dispose of disposers)
+                dispose();
+            footer.replaceChildren();
+        },
+    };
+}
+//# sourceMappingURL=FooterSection.js.map

package/dist/sections/footer/FooterSection.js.map

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

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

@@ -0,0 +1,131 @@
+/// FooterSection styles
+/// Footer with navigation grid, divider, and copyright.
+/// Friendship: group title↔links = Close Friends (sm),
+/// sibling links = Lovers (xs), nav↔copyright = 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
+// ============================================
+
+.ui-footer {
+  border-block-start: var(--border-width-hairline) solid var(--color-border);
+}
+
+// ============================================
+// Layout
+// ============================================
+
+.ui-footer-layout {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-lg); // Nav ↔ divider ↔ copyright: Acquaintances
+}
+
+// ============================================
+// Navigation grid
+// ============================================
+
+.ui-footer-nav-grid {
+  display: grid;
+  gap: var(--space-lg);
+  // Intrinsically fluid — columns collapse naturally when container is too narrow
+  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
+}
+
+// ============================================
+// Link group
+// ============================================
+
+.ui-footer-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm); // Title ↔ link list: Close Friends
+}
+
+// Group titles as mini-eyebrows (size: "xs" set in TS)
+.ui-footer-group .ui-heading {
+  letter-spacing: map.get(typo.$letter-spacings, 'wider');
+  text-transform: uppercase;
+}
+
+.ui-footer-link-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs); // Sibling links: Lovers
+}
+
+// ============================================
+// Link styling
+// ============================================
+
+// Footer links — use .ui-nav-link class (added in FooterSection.ts).
+// Override color to muted text (was the default before consolidation)
+// and use compact font-size for footer layout.
+.ui-footer .ui-nav-link {
+  --_nav-color: var(--color-text-muted);
+  font-size: var(--font-size-sm);
+}
+
+// ============================================
+// Slot — collapse when empty to avoid flex gap
+// ============================================
+
+.ui-footer-layout > [data-slot]:empty {
+  display: none;
+}
+
+// Collapse the nav when there are no groups — avoids an empty landmark and a stray flex gap.
+.ui-footer nav:has(> .ui-footer-nav-grid:empty) {
+  display: none;
+}
+
+// ============================================
+// Divider
+// ============================================
+
+// NOTE: `to right` is physical; CSS logical gradient directions are not yet supported.
+// The gradient is symmetric so RTL rendering is visually identical.
+.ui-footer-divider {
+  border: none;
+  block-size: var(--border-width-hairline);
+  background: linear-gradient(
+    to right,
+    transparent,
+    var(--color-border) 20%,
+    var(--color-border) 80%,
+    transparent
+  );
+}
+
+// ============================================
+// Copyright
+// ============================================
+
+.ui-footer-copyright {
+  text-align: center;
+  letter-spacing: map.get(typo.$letter-spacings, 'wide');
+}
+
+// ============================================
+// Forced colors
+// ============================================
+
+@include a11y.forced-colors {
+  .ui-footer {
+    border-block-start-color: CanvasText;
+  }
+
+  // Link color handled by .ui-nav-link's own forced-colors block.
+
+  .ui-footer-divider {
+    background: none;
+    border-block-start: var(--border-width-hairline) solid CanvasText; // stylelint-disable-line scale-unlimited/declaration-strict-value -- CSS system color required
+  }
+}

package/dist/sections/hero/HeroSection.d.ts

@@ -0,0 +1,66 @@
+/** @codex
+{
+  "id": "pithy.ui-kit.hero-section",
+  "title": "<HeroSection> Section Template",
+  "category": "feature"
+}
+*/
+import type { SpacingSize } from '@pithyjs/design-system';
+import { type ReactiveText } from '../../shared/clickable';
+declare const HERO_VARIANTS: readonly ["centered", "split"];
+type HeroVariant = (typeof HERO_VARIANTS)[number];
+interface HeroSectionBaseProps {
+    /** Layout variant (default: "centered") */
+    variant?: HeroVariant;
+    /** Small label above heading (e.g. "NEW", "INTRODUCING") */
+    eyebrow?: ReactiveText;
+    /** Primary heading text */
+    heading: ReactiveText;
+    /** Heading level for semantic correctness (default: 1) */
+    headingLevel?: number;
+    /** Subheading / description text */
+    subheading?: ReactiveText;
+    /** Vertical padding (default: "xl") */
+    spacing?: SpacingSize;
+    /** Optional anchor id */
+    id?: string;
+}
+interface HeroSectionWithImage extends HeroSectionBaseProps {
+    /** Image source for split variant */
+    imageSrc: ReactiveText;
+    /** Image alt text — required when imageSrc is provided */
+    imageAlt: ReactiveText;
+    /** Image width for CLS prevention */
+    imageWidth?: number;
+    /** Image height for CLS prevention */
+    imageHeight?: number;
+}
+interface HeroSectionWithoutImage extends HeroSectionBaseProps {
+    imageSrc?: undefined;
+    imageAlt?: undefined;
+    imageWidth?: undefined;
+    imageHeight?: undefined;
+}
+/** @codexApi {"parent":"pithy.ui-kit.hero-section","name":"HeroSectionProps","stability":"stable","signature":"interface HeroSectionProps"} */
+export type HeroSectionProps = HeroSectionWithImage | HeroSectionWithoutImage;
+/**
+ * Hero section with heading, subtext, and CTA area.
+ *
+ * Two variants: "centered" (stacked, text-centered) and "split"
+ * (image + text side by side). Children are projected into the
+ * actions area for CTA buttons.
+ *
+ * @example
+ * ```html
+ * <HeroSection heading="'Welcome'" subheading="'Build faster'">
+ *   <Button color="'primary'">Get Started</Button>
+ * </HeroSection>
+ * ```
+ */
+/** @codexApi {"parent":"pithy.ui-kit.hero-section","name":"HeroSection","stability":"stable","signature":"(props: HeroSectionProps) => { el: HTMLElement; destroy: () => void }"} */
+export declare function HeroSection({ variant: rawVariant, eyebrow, heading, headingLevel: rawLevel, subheading, imageSrc, imageAlt, imageWidth, imageHeight, spacing: rawSpacing, id, }: HeroSectionProps): {
+    el: HTMLElement;
+    destroy: () => void;
+};
+export {};
+//# sourceMappingURL=HeroSection.d.ts.map

package/dist/sections/hero/HeroSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeroSection.d.ts","sourceRoot":"","sources":["../../../src/sections/hero/HeroSection.ts"],"names":[],"mappings":"AAAA;;;;;;EAME;AAGF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAY1D,OAAO,EAIL,KAAK,YAAY,EAClB,MAAM,wBAAwB,CAAC;AAGhC,QAAA,MAAM,aAAa,gCAAiC,CAAC;AACrD,KAAK,WAAW,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAElD,UAAU,oBAAoB;IAC5B,2CAA2C;IAC3C,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,2BAA2B;IAC3B,OAAO,EAAE,YAAY,CAAC;IACtB,0DAA0D;IAC1D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oCAAoC;IACpC,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,uCAAuC;IACvC,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,yBAAyB;IACzB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,UAAU,oBAAqB,SAAQ,oBAAoB;IACzD,qCAAqC;IACrC,QAAQ,EAAE,YAAY,CAAC;IACvB,0DAA0D;IAC1D,QAAQ,EAAE,YAAY,CAAC;IACvB,qCAAqC;IACrC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,sCAAsC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,UAAU,uBAAwB,SAAQ,oBAAoB;IAC5D,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AAED,+IAA+I;AAC/I,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GAAG,uBAAuB,CAAC;AAE9E;;;;;;;;;;;;;GAaG;AACH,qLAAqL;AACrL,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EAAE,UAAuB,EAChC,OAAO,EACP,OAAO,EACP,YAAY,EAAE,QAAY,EAC1B,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,WAAW,EACX,OAAO,EAAE,UAAiB,EAC1B,EAAE,GACH,EAAE,gBAAgB,GAAG;IAAE,EAAE,EAAE,WAAW,CAAC;IAAC,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,CAmJ7D"}