@super-ic/web-patterns 0.0.0-oidc-bootstrap.0 → 0.1.9

package/README.md

@@ -1,3 +1,311 @@
 # @super-ic/web-patterns
 
-This prerelease reserves the package name for initial GitHub Actions OIDC trusted-publisher setup. It contains no runtime, exports, or API. Do not use it in production. Real design-system versions are released separately through the trusted GitHub workflow.
+Marketing web patterns built on the SuperIC foundation token layer:
+
+- `CaseStudyCard` (aliased as `CaseStudyCardShell`): the structural case-study
+  card: one whole-card control, a full-bleed 16:10 product-proof band, an
+  identity-first body, and an open/locked access contract.
+- `SURFACE_RADIUS_TOKENS`, `SURFACE_RADIUS_CLASSES`, `nestedSurfaceRadius`: the
+  shared surface-radius scale used to keep nested surfaces concentric.
+- `CaseStudyCardProvenance`, `CaseStudyCardProductAccess`: the **shape** of the
+  presentation metadata a consumer passes in.
+
+The package ships no card records. There is no roster, no slug list and no
+copy in this package: every card's destination, identity mark, product proof,
+headline and result is consumer-owned and passed as props. That is deliberate,
+and it is why the type is exported but the data is not.
+
+## Install
+
+```sh
+npm install @super-ic/web-patterns @super-ic/foundation @super-ic/primitives react react-dom
+```
+
+`@super-ic/foundation` (`^0.2.0`) and `react` (`>=19`) are **peer
+dependencies**. Install them yourself; this package will not pull them in.
+`@super-ic/icon-contracts` is a hard dependency and comes along automatically;
+the card renders its forward chevron through it.
+
+## Three mandatory setup steps
+
+The existing case-study card ships JSX and Tailwind class strings. Its layout
+requires the token and Tailwind steps below. NeighborhoodLanding additionally
+ships its own exported recipe stylesheet, documented below. Skip the
+nucleo bind and `Icon` throws `IconGlyphsNotBoundError` at render.
+
+### 1. Import the token stylesheet once
+
+```ts
+import "@super-ic/foundation/tokens.css";
+```
+
+Import it once at the application root, before anything renders. It defines the
+`:root` layer the card's classes resolve against, including `--radius-card`,
+`--radius-card-frame`, `--elev-card`, `--elev-pill`, `--motion-hover-duration`
+and `--motion-ease-quiet`. Without it the card has square corners, no
+elevation, and no hover transition.
+
+### 2. Import the package Tailwind bridge
+
+Tailwind v4 does not scan `node_modules`, so the utility classes this package
+emits generate no CSS unless the package's built output is scanned. Import
+Tailwind once, then import the public bridge. The bridge scans this package's
+distributed JavaScript and includes the public primitives bridge:
+
+```css
+@import "tailwindcss";
+@import "@super-ic/web-patterns/tailwind.css";
+```
+
+Omit the owning bridge and the card renders as unstyled markup with correct
+semantics.
+
+### 3. Bind Nucleo glyphs once at the application root
+
+The card draws its control chevron through `@super-ic/icon-contracts` `Icon`.
+That component throws `IconGlyphsNotBoundError` unless the consumer evaluates
+the nucleo subpath before the first render:
+
+```ts
+import "@super-ic/icon-contracts/nucleo";
+```
+
+Import it once in a module that runs on both the server and the client. A
+server-only import leaves the client unbound after hydration. The package
+contract test binds this subpath before it renders a card. Product tests should
+do the same, or they will mask a production outage.
+
+## Access contract: `locked` requires `onUnlock`
+
+`access` defaults to `"open"`, which renders an anchor to `href`. Setting
+`access="locked"` renders a single `role="button"` control with
+`aria-haspopup="dialog"` and **no** `href`, so the consumer's own gate decides
+what happens.
+
+That control has to do something, so the component fails closed rather than
+rendering a dead card:
+
+```tsx
+/* Throws: Locked case-study cards require an unlock handler */
+<CaseStudyCard href="/case-studies/example" access="locked" {...rest} />
+```
+
+```tsx
+/* Correct */
+<CaseStudyCard
+  href="/case-studies/example"
+  access="locked"
+  onUnlock={() => setGateOpen(true)}
+  lockedControlRef={gateReturnFocusRef}
+  {...rest}
+/>
+```
+
+The throw happens during render, in development and production alike. Pass
+`lockedControlRef` so focus can return to the card after your dialog closes.
+
+## Framework-native navigation
+
+An open card renders a plain `<a>` by default. To route through a framework
+link, supply `renderOpenControl`. It receives the full set of control props
+(`href`, `className`, the `data-*` slots, `aria-label`, `aria-describedby`) and
+must spread all of them onto whatever it renders:
+
+```tsx
+<CaseStudyCard
+  href="/case-studies/example"
+  renderOpenControl={({ children, ...props }) => <Link {...props}>{children}</Link>}
+  {...rest}
+/>
+```
+
+## Known gap
+
+One token family the card's class names is **not** in
+`@super-ic/foundation/tokens.css` today:
+
+- `--enterprise-bg` / `--enterprise-fg` (via `bg-enterprise-bg` and
+  `text-enterprise-fg`) are excluded from the generated layer on purpose. In
+  the source they are a site-local plate bound to the dark ramp, so emitting
+  them would ship a permanently dark card. See the `@super-ic/foundation` README.
+The public Tailwind bridge supplies the foundation mappings for `border-border`,
+`ring-ring` and `ring-offset-background`. Until the enterprise plate is closed in
+a consumer's own stylesheet, its surface inherits the page background. Everything
+else (geometry, hierarchy, radii, elevation, motion and the whole accessibility
+contract) resolves from the token layer and public bridge.
+
+
+## NeighborhoodLanding (candidate)
+
+Sharing-tab foreground, background and borders change together without a color
+transition. This preserves readable inactive and selected labels during theme
+initialization as well as keyboard selection. Verify both themes at natural phone
+size; a difference between background colors alone does not prove legibility.
+
+`NeighborhoodLanding` is an object-led public community landing recipe. It pairs
+a tangible illustrative example with two ways to participate, a residency and
+joining section, practical disclosures, and legal/help destinations. Its CSS
+belongs to the package; product consumers must not recreate this composition.
+This is a review candidate, not an accepted product or release claim.
+
+```tsx
+import { NeighborhoodLanding, type NeighborhoodLandingProps } from "@super-ic/web-patterns";
+import "@super-ic/foundation/tokens.css";
+import "@super-ic/web-patterns/neighborhood-landing.css";
+// Bind the approved semantic glyph provider at server and client roots.
+import "@super-ic/icon-contracts/nucleo";
+
+const page: NeighborhoodLandingProps = /* product-owned content and routes */;
+<NeighborhoodLanding {...page} />;
+```
+
+The consuming Tailwind v4 entry must compile the public primitive bridge:
+
+```css
+@import "tailwindcss";
+@import "@super-ic/web-patterns/tailwind.css";
+```
+
+The package bridge scans web-patterns and the primitives' built output and
+provides foundation utility mappings and Accordion animations. Recipe layout comes from
+`neighborhood-landing.css`; do not scan a private DS source path. The recipe uses
+public `buttonVariants` on real anchors so navigation retains link semantics,
+plus public Tabs, Accordion and semantic icons. It does not use a button role on
+an anchor or implement replacement keyboard behavior. The recipe's module has a
+client directive because its disclosures and tabs are interactive.
+
+The product supplies brand, media, copy, eligibility, join availability, routes,
+and each claim. `membership.join` is a required discriminated union:
+
+- `available`: one destination with `label` and real `href`, plus a truthful note.
+- `unavailable`: reason/title, explanation and a real help destination. No
+  disabled fake submit button or implicit waitlist is rendered.
+
+`hero.availability` is also required. Keep it consistent with the product's
+actual activation state. An unfinished DS build does not determine production
+membership availability. This component never creates accounts, verifies
+residency, collects email, sends support messages, or claims backend readiness.
+
+`renderLink` may adapt external page destinations to a framework link. Forward
+all received anchor properties, including href, className, children and focus
+behavior. Internal skip, how-it-works and join anchors remain native document
+navigation. The calling application supplies its route implementation and
+back/forward behavior. Do not replace real destinations with `#` or silently
+swallow links. The specimen's dialog destinations are explicitly labeled local
+previews and are not part of this package.
+
+### Contract and proof
+
+- Two participation examples are required, each with a stable unique ID and
+  three real explanatory steps. These are examples, not fabricated posts.
+  Asking/offering copy belongs to the tenant. Keyboard Left/Right selects tabs;
+  Enter/Space operates disclosure triggers. The underlying public primitives
+  own these semantics.
+- Every link has visible text or the brand's accessible name. The main, sharing
+  and membership sections have stable per-instance IDs and programmatic focus
+  targets for native anchor navigation. FAQ questions name their own buttons.
+- Hero media requires src, nonempty alt, intrinsic dimensions and a visible
+  caption. Optional possibility and example media use the public
+  `NeighborhoodLandingMedia` shape. Possibility IDs must be unique. Test failures
+  both before hydration and after handlers attach; neither path may leave a broken
+  image or hide the associated copy and action. These images are
+  informative only, lazy-load outside the hero, use contain presentation, and disappear
+  independently on error; their surrounding copy and actions remain. A new `src` resets
+  that failure state. Media never establishes runtime availability, membership or authority. The consumer retains the rights/provenance record. No supplied media
+  or participation example may imply existing inventory or real demand without
+  evidence. The package contains no photos or tenant records.
+- Layout uses the foundation's type, spacing, surface, action, border, radius
+  and focus roles. The optional tenant accent-quiet role falls back to surface-2
+  for a brand without that role. Width responds to the actual recipe container,
+  not only the viewport. Reduced motion preserves all content and actions.
+- Allowed composition: a page-level landing, with a brand mark, short copy,
+  illustrative photo, two participation explanations and plain-text/linked FAQ
+  answers. Keep links and small paragraphs inside answers, not nested modals,
+  primary actions or another page recipe.
+- Anti-patterns: fake member counts, listings, testimonials or trust scores;
+  blanket safety/insurance claims; public addresses or residency evidence;
+  inactive paid/service modes presented as available; repeated feature-card
+  walls; an application form that the consumer cannot actually submit.
+- Limits: one landing/main landmark per page; exactly two examples and three
+  steps per example; unique IDs within each repeated collection; no invented
+  density modes or loading states. Text can grow without clipping, but long
+  hero copy weakens the first-viewport composition and needs editorial review.
+- Ownership: shared recipe and its browser contract belong to SuperIC DS;
+  resident policy, routes, activation, claims and support belong to the
+  consuming product. The candidate has no automatic promotion path.
+- Migration: replace page-local marketing shells with the public recipe and
+  exported CSS after review. Existing marketing exports remain unchanged; this
+  addition does not retroactively accept their legacy behavior.
+
+Executable requirements in `contracts/neighborhood-landing.json` bind to the
+candidate stories and the actual `neighborhood-landing.browser.test.ts` titles.
+Those bindings are an input to the coordinator's canonical catalog integration,
+not a fabricated accepted-registry record. A file being present is not proof of
+execution. Record the executed report and exact source/package hashes when this
+candidate is integrated; repeat installed-consumer checks on the final graph.
+# Public help and documents
+
+Import `PublicSiteFrame`, `PublicArticle`, `HelpDirectory` and `PublicAvailability`
+from `@super-ic/web-patterns`, with `@super-ic/web-patterns/public-content.css`.
+These are candidate recipes. Compile the public foundation/primitives Tailwind
+bridge and load the tenant's public font sheets at the consumer root.
+
+`PublicSiteFrame` owns the public header, one main landmark, skip link and footer.
+Compose exactly one h1-owning article, help directory or availability boundary.
+Pass real links and preserve normal browser modifier-key behavior in `onNavigate`.
+Navigation IDs must be unique and at most one item is current. Marks use their
+natural aspect ratio at a 100px width; the consumer supplies the actual tenant mark.
+
+`PublicArticle` receives a title, introduction, optional factual date/version label,
+optional notice, stable section slugs, trusted React prose and related routes. Use
+paragraphs, lists, description lists, links and h3 subheadings in section bodies.
+Do not inject raw HTML or another page/main/h1. Section IDs must be unique lowercase
+slugs. The table of contents uses native fragment links and a native disclosure so
+document navigation and all prose remain usable without JavaScript. This native
+document disclosure is intentional; it does not replace application dialogs or
+shadcn form controls. Supplied metadata is not a legal-readiness or acceptance claim.
+Set `anchorId` to a stable lowercase slug when a document needs stable deep links.
+The consumer must keep each supplied `anchorId` unique within the rendered document;
+omitting it retains instance-safe fragment IDs. Article prose supports semantic tables
+with a muted, left-aligned caption and token-bound reading rows.
+
+`HelpDirectory` uses public Input and Button controls. The consumer supplies query,
+search commands and mutually exclusive ready, empty, loading or failed results.
+Ready groups need unique IDs and useful topic links. Keep the query on failure,
+invalidate old results after a newer query/route and never interpret a successful
+search as a support submission. The separate contact action is a real supplied route.
+Set `search.action` for a native GET fallback before hydration, and optionally set
+`search.queryName` when the query parameter is not `q`. Hydrated submission prevents
+the native navigation and calls the controlled search callback.
+
+`PublicAvailability` displays a public-safe closed, restricted, sign-in, unavailable
+or loading projection. The product supplies the reason, permitted recovery links
+and retained intent. Do not infer authorization from query parameters or render an
+old private action during loading. No waitlist, membership or legal document exists
+merely because the recipe renders.
+
+The nine historical `marketing.tsx` values are removed from this candidate public
+API. Their original examples remain privately under `stories/legacy-support/`.
+NeighborhoodLanding replaces MarketingHero/ValueHypothesisBlock/HowItWorksSteps;
+PublicArticle replaces DocumentPage/DocumentSection/DocumentVersionNotice and can
+show a supplied notice; the controlled app-patterns SupportIntake replaces the
+inert SupportIntakeForm/SupportReceivedState. The removal manifest is
+`design-system/retired-web-exports.json` in the authoring repository. Retirement
+does not close the complete product responsibilities or confer acceptance.
+
+`PublicDocumentDialog` is the controlled document reader for policy, privacy and other
+reference content opened from a form. Import `@super-ic/web-patterns/public-content.css`.
+Supply `open`, `onOpenChange`, `title`, `description`, `contentLabel`, `returnLabel` and
+trusted React prose as children. Put h3 headings inside its sections. The viewport
+layout keeps the heading and return action visible while the prose scrolls. It uses
+the public Sheet focus behavior and restores the opener; allow Base UI's scheduled
+focus-guard handoff before asserting the resulting target. Place the consumer's public
+PortalContainerProvider inside the active tenant/theme scope. Opening or closing the
+reader must not accept any consent or submit/clear the form. Document validity,
+publication status and authorization remain product responsibilities.
+
+### Powered by SuperIC
+
+Import `PoweredBySuperIC` from `@super-ic/web-patterns` or its `/powered-by-superic` subpath. The normal `@super-ic/web-patterns/tailwind.css` aggregate includes its styling automatically; the dedicated `@super-ic/web-patterns/powered-by-superic.css` subpath remains available with the shared foundation stylesheet. The exact approved outlined wordmark is provided by the peer package `@super-ic/brand-contracts/superic-logo`.
+
+The neutral attribution preserves `href`, `variant` (`auto`, `light`, `dark`), `size` (`sm`, `md`), `label`, `source`, and `className`. Auto uses the nearest inherited semantic theme without client state or SVG swapping. Sizes preserve 14px/18px logos with 11px/12px labels. The small label is supplementary attribution, not an instruction or form label. Explicit variant secondary text uses the existing readable semantic role. HTTP(S) and root-relative destinations are accepted; referral parameters preserve existing query fields and hashes. External-link target behavior is `_blank` with `noopener noreferrer`.

package/contracts/contact-section.json

@@ -0,0 +1,23 @@
+{
+  "schema": "superic.component-contract/v1",
+  "id": "contact-section",
+  "status": "candidate",
+  "package": "@super-ic/web-patterns",
+  "export": "ContactSection",
+  "publicImport": "@super-ic/web-patterns/contact-section",
+  "cssImport": "@super-ic/web-patterns/contact-section.css",
+  "origin": {
+    "implementation": "Original implementation of the root functional and layout brief.",
+    "referenceIntake": "design-system/intake/contact2.json",
+    "distributionReview": "pending",
+    "note": "An original implementation does not itself establish redistribution clearance for the referenced vendor material."
+  },
+  "purpose": "A controlled contact introduction and form presentation recipe.",
+  "imports": ["@super-ic/primitives/button", "@super-ic/primitives/input", "@super-ic/primitives/textarea", "@super-ic/primitives/label", "@super-ic/primitives/card"],
+  "consumerOwns": ["copy", "field values", "validation", "submission transport", "approved media"],
+  "recipeOwns": ["responsive composition", "field labels", "state presentation", "focus management"],
+  "states": ["idle", "invalid", "submitting", "success", "failure", "unavailable"],
+  "invalidState": "Consumers supply a new validationId for each completed validation attempt. The recipe focuses the first invalid field when that ID changes, without moving focus for value edits.",
+  "limits": ["No transport is performed.", "No tenant branding or media is supplied.", "The local package candidate exposes a reviewable import; registry publication and accepted consumer integration remain unproven."],
+  "accessibility": ["The section has an instance-safe accessible heading.", "Invalid state focuses the first invalid field for a new validationId.", "Success state receives focus.", "Unavailable state retains supplied contact details.", "Media captions remain meaningful when image loading fails."]
+}

package/contracts/neighborhood-landing.json

@@ -0,0 +1,162 @@
+{
+  "schemaVersion": 1,
+  "kind": "candidate-recipe-binding",
+  "id": "neighborhood-landing",
+  "maturity": "candidate",
+  "owner": "SuperIC DS",
+  "accepted": false,
+  "public": {
+    "imports": {
+      "@super-ic/web-patterns": [
+        "NeighborhoodLanding",
+        "NeighborhoodLandingProps",
+        "NeighborhoodLandingJoin",
+        "NeighborhoodLandingLink",
+        "NeighborhoodLandingExample",
+        "NeighborhoodLandingStep",
+        "NeighborhoodLandingMedia"
+      ]
+    },
+    "css": [
+      "@super-ic/foundation/tokens.css",
+      "@super-ic/primitives/tailwind.css",
+      "@super-ic/web-patterns/neighborhood-landing.css"
+    ],
+    "dependencies": [
+      "@super-ic/primitives/button",
+      "@super-ic/primitives/tabs",
+      "@super-ic/primitives/accordion",
+      "@super-ic/icon-contracts"
+    ]
+  },
+  "source": [
+    "src/neighborhood-landing.tsx",
+    "css/neighborhood-landing.css",
+    "src/public-content.tsx",
+    "css/public-content.css",
+    "src/editorial-image.tsx"
+  ],
+  "tokens": [
+    "--background",
+    "--border",
+    "--brand-accent-quiet",
+    "--foreground",
+    "--muted-foreground",
+    "--primary-foreground",
+    "--radius-card",
+    "--radius-card-inset",
+    "--radius-xl",
+    "--radius-xs",
+    "--ring",
+    "--space-unit",
+    "--surface",
+    "--surface-2",
+    "--type-body-large-line-height",
+    "--type-body-large-size",
+    "--type-body-medium-family",
+    "--type-body-medium-line-height",
+    "--type-body-medium-size",
+    "--type-body-small-line-height",
+    "--type-body-small-size",
+    "--type-caption-size",
+    "--type-display-large-family",
+    "--type-display-large-size",
+    "--type-display-large-tracking",
+    "--type-display-large-weight",
+    "--type-display-small-family",
+    "--type-display-small-line-height",
+    "--type-display-small-size",
+    "--type-display-small-tracking",
+    "--type-display-small-weight",
+    "--type-h1-family",
+    "--type-h1-line-height",
+    "--type-h1-size",
+    "--type-h1-tracking",
+    "--type-h2-size",
+    "--type-h3-family",
+    "--type-h3-line-height",
+    "--type-h3-size",
+    "--type-h3-tracking",
+    "--type-h3-weight",
+    "--type-numeric-family",
+    "--type-overline-size",
+    "--type-overline-tracking",
+    "--type-overline-weight"
+  ],
+  "states": {
+    "membership": [
+      "available",
+      "unavailable"
+    ],
+    "examples": [
+      "first",
+      "second"
+    ],
+    "disclosure": [
+      "open",
+      "closed"
+    ],
+    "density": {
+      "applicable": false,
+      "reason": "One container-responsive editorial composition; no density variants."
+    },
+    "submission": {
+      "applicable": false,
+      "reason": "Consumer-owned route navigation; no form or command in this recipe."
+    },
+    "media": [
+      "omitted",
+      "loaded",
+      "failed",
+      "src-replaced"
+    ]
+  },
+  "stories": [
+    "candidates-neighborhood-landing--sandbrock",
+    "candidates-neighborhood-landing--dark",
+    "candidates-neighborhood-landing--joining-available",
+    "candidates-neighborhood-landing--long-content",
+    "candidates-neighborhood-landing--narrow-container"
+  ],
+  "testFile": "stories/candidates/neighborhood-landing.browser.test.ts",
+  "requirements": [
+    {
+      "id": "LANDING-01",
+      "behavior": "Recognizable object and join action within initial view; correct theme and readable unclipped layout; axe in 375/1280 and light/dark."
+    },
+    {
+      "id": "LANDING-02",
+      "behavior": "Keyboard tabs expose each complete example without simultaneous duplicate content."
+    },
+    {
+      "id": "LANDING-03",
+      "behavior": "Skip and join links move focus to correct sections; closed state contains no application link."
+    },
+    {
+      "id": "LANDING-04",
+      "behavior": "Available join uses actual consumer href; fixture previews destination and restores focus, without claiming account creation."
+    },
+    {
+      "id": "LANDING-05",
+      "behavior": "Disclosure keyboard behavior, correct fee text and distinct privacy/help routes, themed open-state axe."
+    },
+    {
+      "id": "LANDING-06",
+      "behavior": "Long text and nested narrow container reflow; all visible navigation/tab targets reach 44px."
+    },
+    {
+      "id": "LANDING-07",
+      "behavior": "Reduced motion retains content and interaction."
+    },
+    {
+      "id": "LANDING-08",
+      "behavior": "Optional informative hero, possibility, example and article media reserve supplied dimensions; failures both before and after hydration hide only that image and source replacement restores it. Media remains illustrative and creates no availability authority."
+    }
+  ],
+  "proof": {
+    "state": "not-accepted",
+    "execution": "External candidate report required; this file is a binding, not an execution receipt.",
+    "integration": "Coordinator must project into canonical catalog and bind final source/package hashes before acceptance."
+  },
+  "agentGuidance": "README.md#neighborhoodlanding-candidate"
+}

package/contracts/public-content-refinement.json

@@ -0,0 +1,38 @@
+{
+  "schemaVersion": 1,
+  "version": "0.1.6",
+  "status": "candidate-pending-product-proof",
+  "source": "packages/web-patterns/src/public-content.tsx",
+  "imports": [
+    "@super-ic/web-patterns",
+    "@super-ic/web-patterns/public-content.css"
+  ],
+  "contracts": {
+    "PublicArticle": {
+      "anchorId": "Optional lowercase document slug unique within the page; prefix for stable section fragments. Omission uses unique instance IDs.",
+      "sections": "Unique lowercase slugs, trusted semantic prose, optional contextual informative media with alt and dimensions.",
+      "tables": "Native table, caption, scoped row/column headers. Token-bound strokes and responsive wrapping.",
+      "failure": "Failed media is omitted; adjacent copy and links remain available.",
+      "keyboard": "Native disclosure and focusable section targets work without JavaScript.",
+      "links": "Prose, back and related links are explicitly underlined so consumer resets cannot erase their affordance."
+    },
+    "HelpDirectory": {
+      "search": "Controlled draft and committed query belong to product. action provides native GET destination, queryName defaults to q.",
+      "states": [
+        "ready",
+        "empty",
+        "loading",
+        "failed"
+      ],
+      "keyboard": "Visible search label and Enter submission; product preserves input focus and URL/Back/Forward state.",
+      "noJavaScript": "Native GET requires a real route that renders its query. The recipe alone does not implement that route.",
+      "limits": "No fabricated network states for a synchronous local catalog; a help result is not a persisted support case.",
+      "reset": "Optional reset.href renders a real link for empty-state recovery without JavaScript; omission retains controlled onAction button."
+    }
+  },
+  "proof": [
+    "packages/web-patterns/src/public-content.test.tsx",
+    "SBR actual installed-package help/fees proof is tracked separately"
+  ],
+  "acceptance": "Historical receipt hashes are not renewed by this candidate."
+}

package/css/case-study-card.css

@@ -0,0 +1,29 @@
+/* The public presentation marker is emitted by CaseStudyCard.  These rules
+   deliberately affect only the recovered SuperIC presentation. */
+[data-card-presentation="superic"] [data-slot="case-study-card-surface"] {
+  font-family: var(--font-superic-case-study, "Inter Display"), "Inter Display", ui-sans-serif, system-ui, sans-serif;
+}
+
+[data-card-presentation="superic"] [data-slot="case-study-card-identity"],
+[data-card-presentation="superic"] [data-slot="case-study-card-headline"],
+[data-card-presentation="superic"] [data-slot="case-study-card-control-label"] {
+  color: var(--enterprise-fg);
+  font-family: var(--font-superic-case-study, "Inter Display"), "Inter Display", ui-sans-serif, system-ui, sans-serif;
+}
+
+[data-card-presentation="superic"] [data-slot="case-study-card-relationship"] {
+  color: var(--enterprise-muted);
+  font-family: var(--font-superic-case-study, "Inter Display"), "Inter Display", ui-sans-serif, system-ui, sans-serif;
+}
+
+[data-card-presentation="superic"] [data-slot="case-study-card-result"] {
+  color: var(--enterprise-subtle);
+  font-family: var(--font-superic-case-study, "Inter Display"), "Inter Display", ui-sans-serif, system-ui, sans-serif;
+}
+
+/* Consumer Tailwind `font-sans` and `font-mono` utilities otherwise reset
+   coded-art typography to the tenant defaults. */
+[data-card-presentation="superic"] [data-slot="case-study-card-art"] .font-sans,
+[data-card-presentation="superic"] [data-slot="case-study-card-art"] .font-mono {
+  font-family: var(--font-superic-case-study, "Inter Display"), "Inter Display", ui-sans-serif, system-ui, sans-serif;
+}

package/css/contact-section.css

@@ -0,0 +1,39 @@
+.sic-contact-section { container: contact-section / inline-size; width: min(calc(100% - 2rem), 72rem); margin-inline: auto; color: var(--foreground); font-family: var(--type-body-medium-family); font-size: var(--type-body-medium-size); line-height: var(--type-body-medium-line-height); overflow-wrap: anywhere; }
+.sic-contact-section *, .sic-contact-section *::before, .sic-contact-section *::after { box-sizing: border-box; }
+.sic-contact-section :where(h1,h2,h3,p,dl,dd,figure) { margin: 0; }
+.sic-contact-section :where(h1,h2,h3) { font-family: var(--type-h1-family); text-wrap: balance; }
+.sic-contact-section h1 { font-size: var(--type-display-small-size); line-height: var(--type-display-small-line-height); font-weight: var(--type-display-small-weight); letter-spacing: var(--type-display-small-tracking); }
+.sic-contact-section h2 { font-size: var(--type-h2-size); line-height: var(--type-h2-line-height); font-weight: var(--type-h2-weight); letter-spacing: var(--type-h2-tracking); }
+.sic-contact-section h3 { font-size: var(--type-h3-size); line-height: var(--type-h3-line-height); font-weight: var(--type-h3-weight); }
+.sic-contact-section a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
+.sic-contact-section :where(a,button,input,textarea):focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
+.sic-contact-section__layout { display: grid; gap: calc(var(--space-unit) * 8); max-inline-size: 72rem; }
+.sic-contact-section__introduction { display: grid; align-content: start; gap: 1rem; min-inline-size: 0; }
+.sic-contact-section__eyebrow { color: var(--brand-accent-strong, var(--foreground)); font-family: var(--type-overline-family); font-size: var(--type-overline-size); font-weight: var(--type-overline-weight); letter-spacing: var(--type-overline-tracking); line-height: var(--type-overline-line-height); text-transform: uppercase; }
+.sic-contact-section__description { max-inline-size: 62ch; color: var(--muted-foreground); font-size: var(--type-body-large-size); line-height: var(--type-body-large-line-height); }
+.sic-contact-section__media { max-inline-size: 20rem; margin-top: .5rem; }
+.sic-contact-section__media img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 3 / 2; object-fit: contain; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--muted); }
+.sic-contact-section__media figcaption { margin-top: .5rem; color: var(--muted-foreground); font-size: var(--type-caption-size); }
+.sic-contact-section__details { display: grid; gap: .75rem; margin-top: 1rem; color: var(--muted-foreground); font-size: var(--type-body-small-size); }
+.sic-contact-section__details > div { display: grid; gap: .25rem; }
+.sic-contact-section__details dt { color: var(--foreground); font-weight: 600; }
+.sic-contact-section__details dd { overflow-wrap: anywhere; }
+.sic-contact-section__details a, .sic-contact-section__hint a { align-items: center; display: inline-flex; min-block-size: var(--control-target-min); min-inline-size: var(--control-target-min); }
+.sic-contact-section__card { border-color: var(--border); background: var(--card); box-shadow: none; }
+.sic-contact-section__form, .sic-contact-section__success { display: grid; gap: calc(var(--space-unit) * 6); }
+.sic-contact-section__form fieldset { display: grid; gap: 1rem; min-inline-size: 0; margin: 0; padding: 0; border: 0; }
+.sic-contact-section__field { display: grid; gap: .5rem; min-inline-size: 0; }
+.sic-contact-section__field [data-slot=input], .sic-contact-section__field [data-slot=textarea] { min-block-size: 44px; }
+.sic-contact-section__field [data-slot=textarea] { min-block-size: 8rem; resize: vertical; }
+.sic-contact-section__hint { color: var(--muted-foreground); font-size: var(--type-caption-size); }
+.sic-contact-section__error, .sic-contact-section__message { color: var(--destructive); font-size: var(--type-body-small-size); }
+.sic-contact-section__form [role=status] { color: var(--muted-foreground); }
+.sic-contact-section__form [data-slot=button], .sic-contact-section__success [data-slot=button] { min-block-size: 44px; white-space: normal; justify-content: center; }
+.sic-contact-section__success:focus-visible { outline: 2px solid var(--ring); outline-offset: 4px; border-radius: var(--radius-card); }
+@container contact-section (min-width: 48rem) { .sic-contact-section__layout { grid-template-columns: minmax(0, 1fr) minmax(20rem, .9fr); gap: calc(var(--space-unit) * 12); align-items: start; } }
+@container contact-section (max-width: 47.99rem) { .sic-contact-section h1 { font-size: var(--type-h1-size); line-height: var(--type-h1-line-height); letter-spacing: var(--type-h1-tracking); } .sic-contact-section h2 { font-size: var(--type-h3-size); line-height: var(--type-h3-line-height); } .sic-contact-section__description { font-size: var(--type-body-medium-size); } .sic-contact-section__media { max-inline-size: 12rem; } }
+
+.sic-contact-form { min-inline-size: 0; color: var(--foreground); font-family: var(--type-body-medium-family); font-size: var(--type-body-medium-size); line-height: var(--type-body-medium-line-height); overflow-wrap: anywhere; }
+.sic-contact-form :where(a,button,input,textarea):focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
+.sic-contact-form :where(h2,h3,p) { margin: 0; }
+.sic-contact-form :where(h2,h3) { font-family: var(--type-h3-family); font-size: var(--type-h3-size); line-height: var(--type-h3-line-height); font-weight: var(--type-h3-weight); text-wrap: balance; }