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

package/css/neighborhood-landing.css

@@ -0,0 +1,143 @@
+/* NeighborhoodLanding owns layout, not theme values or application authority. */
+.sic-neighborhood {
+  container: neighborhood / inline-size;
+  background: var(--background);
+  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-neighborhood *, .sic-neighborhood *::before, .sic-neighborhood *::after { box-sizing: border-box; }
+.sic-neighborhood h1, .sic-neighborhood h2, .sic-neighborhood h3, .sic-neighborhood h4, .sic-neighborhood p, .sic-neighborhood figure { margin: 0; }
+.sic-neighborhood a { color: inherit; text-decoration: none; }
+.sic-neighborhood a:focus-visible { outline: 2px solid var(--ring); outline-offset: 4px; border-radius: var(--radius-xs); }
+.sic-neighborhood__width { width: calc(100% - var(--space-unit) * 16); max-width: 90rem; margin-inline: auto; }
+.sic-neighborhood__skip { position: absolute; top: 0; left: 1rem; z-index: 5; transform: translateY(-150%); padding: 1rem; background: var(--background); }
+.sic-neighborhood__skip:focus { transform: translateY(0); }
+.sic-neighborhood__header { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--space-unit) * 8); min-height: 104px; border-bottom: 1px solid var(--border); }
+.sic-neighborhood__brand { display: flex; align-items: center; min-height: 44px; flex-shrink: 0; }
+.sic-neighborhood__brand img, .sic-neighborhood__brand svg { width: 174px; max-height: 48px; object-fit: contain; }
+.sic-neighborhood__nav { display: flex; align-items: center; flex-wrap: wrap; gap: calc(var(--space-unit) * 8); font-size: var(--type-body-small-size); }
+.sic-neighborhood__nav span { display: contents; }
+.sic-neighborhood__nav a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
+.sic-neighborhood__account-link { border: 1px solid var(--border); border-radius: var(--radius-xs); padding-inline: calc(var(--space-unit) * 4); }
+.sic-neighborhood__menu-trigger { display: none; }
+.sic-neighborhood__nav a:hover, .sic-neighborhood__footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
+.sic-neighborhood__main:focus, .sic-neighborhood section:focus { outline: none; }
+.sic-neighborhood section[id] { scroll-margin-block-start: calc(var(--space-unit) * 8); }
+.sic-neighborhood__hero { display: grid; grid-template-columns: 0.9fr 1.1fr; align-items: center; gap: calc(var(--space-unit) * 12); padding-block: calc(var(--space-unit) * 12) calc(var(--space-unit) * 24); }
+.sic-neighborhood__eyebrow { display: block; font-size: var(--type-overline-size); font-weight: var(--type-overline-weight); letter-spacing: var(--type-overline-tracking); line-height: 1.4; color: var(--muted-foreground); }
+.sic-neighborhood h1 { font-family: var(--type-display-large-family); font-size: var(--type-display-large-size); line-height: 1.04; letter-spacing: var(--type-display-large-tracking); font-weight: var(--type-display-large-weight); text-wrap: balance; margin-top: calc(var(--space-unit) * 6); max-width: 9.5em; }
+.sic-neighborhood__intro { margin-top: calc(var(--space-unit) * 6) !important; font-size: var(--type-body-large-size); line-height: var(--type-body-large-line-height); max-width: 33ch; color: var(--muted-foreground); }
+.sic-neighborhood .sic-neighborhood__join-action { min-height: 48px; gap: calc(var(--space-unit) * 3); padding-inline: calc(var(--space-unit) * 6); margin-top: calc(var(--space-unit) * 8); white-space: normal; text-align: center; text-decoration: none; }
+.sic-neighborhood a.sic-neighborhood__join-action { color: var(--primary-foreground); }
+.sic-neighborhood__availability { margin-top: calc(var(--space-unit) * 3) !important; font-size: var(--type-body-small-size); color: var(--muted-foreground); }
+.sic-neighborhood__hero-figure { position: relative; min-width: 0; padding-bottom: calc(var(--space-unit) * 12); }
+.sic-neighborhood__hero-image, .sic-neighborhood__hero-figure > :first-child:not(.sic-neighborhood__example-note) { display: block; width: 100%; aspect-ratio: 1.25; height: auto; object-fit: cover; object-position: 50% 50%; border-radius: var(--radius-card); }
+.sic-neighborhood__hero-media { display: block; width: 100%; aspect-ratio: 21 / 9; overflow: clip; border-radius: var(--radius-card); }
+.sic-neighborhood__hero-media > :where(video,img) { display: block; width: 100%; height: 100%; object-fit: cover; }
+.sic-neighborhood__example-note { position: relative; width: 86%; margin: calc(var(--space-unit) * -12) 0 0 auto; padding: calc(var(--space-unit) * 6) calc(var(--space-unit) * 6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card-inset); }
+.sic-neighborhood__example-note > p { font-family: var(--type-h3-family); font-size: var(--type-h3-size); letter-spacing: var(--type-h3-tracking); line-height: var(--type-h3-line-height); font-weight: 500; margin-block: calc(var(--space-unit) * 2); }
+.sic-neighborhood__example-note > span:last-child { font-size: var(--type-body-small-size); color: var(--muted-foreground); }
+.sic-neighborhood__hero-figure figcaption { position: absolute; bottom: calc(var(--space-unit) * 5); right: 0; text-align: right; font-size: var(--type-caption-size); color: var(--muted-foreground); }
+.sic-neighborhood h2 { font-family: var(--type-display-small-family); font-size: var(--type-display-small-size); line-height: var(--type-display-small-line-height); letter-spacing: var(--type-display-small-tracking); font-weight: var(--type-display-small-weight); text-wrap: balance; }
+.sic-neighborhood__section-intro > .sic-neighborhood__eyebrow + h2 { margin-top: calc(var(--space-unit) * 4); }
+.sic-neighborhood__section-intro > h2 + p { margin-top: calc(var(--space-unit) * 6); max-width: 46ch; color: var(--muted-foreground); }
+.sic-neighborhood__sharing { border-top: 1px solid var(--border); padding-block: calc(var(--space-unit) * 24); }
+.sic-neighborhood__sharing > .sic-neighborhood__section-intro { max-width: 43rem; }
+.sic-neighborhood__sharing > .sic-neighborhood__section-intro > h2 + p { max-width: 56ch; }
+.sic-neighborhood__examples { margin-top: calc(var(--space-unit) * 8); }
+.sic-neighborhood .sic-neighborhood__tabs { display: inline-grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 24rem); max-width: 100%; height: auto; padding: var(--space-unit); border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface-2); }
+/* Theme and selection colors switch together. Interpolating foreground against
+   an already-switched canvas can briefly hide a label during hydration. */
+.sic-neighborhood .sic-neighborhood__tabs [role=tab] { min-height: 44px; padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 6); border-radius: calc(var(--radius-xl) - 5px); white-space: normal; color: var(--muted-foreground); transition: none; }
+.sic-neighborhood .sic-neighborhood__tabs [role=tab][data-active] { background: var(--background); color: var(--foreground); border-color: var(--muted-foreground); box-shadow: none; }
+.sic-neighborhood__example-panel { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--space-unit) * 24); margin-top: calc(var(--space-unit) * 6); min-width: 0; }
+.sic-neighborhood__example-panel[hidden] { display: none; }
+.sic-neighborhood__example-message { --sic-neighborhood-example-radius: var(--radius-card); --sic-neighborhood-example-inset: calc(var(--space-unit) * 4); --sic-neighborhood-example-media-radius: max(0px, calc(var(--sic-neighborhood-example-radius) - var(--sic-neighborhood-example-inset))); background: var(--background); padding: var(--sic-neighborhood-example-inset); border-radius: var(--sic-neighborhood-example-radius); display: flex; flex-direction: column; align-items: start; justify-content: center; min-height: 300px; }
+.sic-neighborhood__example-message h3 { font-family: var(--type-h1-family); font-size: var(--type-h1-size); font-weight: 500; letter-spacing: var(--type-h1-tracking); line-height: var(--type-h1-line-height); margin-top: calc(var(--space-unit) * 6); max-width: 18ch; }
+.sic-neighborhood__example-message > p:last-child { margin-top: calc(var(--space-unit) * 6); font-size: var(--type-body-medium-size); max-width: 36ch; }
+.sic-neighborhood__example-context { color: var(--muted-foreground); margin-top: calc(var(--space-unit) * 3) !important; font-size: var(--type-body-small-size); }
+.sic-neighborhood__steps { list-style: none; padding: 0; margin: 0; display: grid; align-content: center; }
+.sic-neighborhood__steps li { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: calc(var(--space-unit) * 6); padding-block: calc(var(--space-unit) * 6); border-bottom: 1px solid var(--border); }
+.sic-neighborhood__steps li:first-child { padding-top: 0; }
+.sic-neighborhood__steps li:last-child { border: 0; padding-bottom: 0; }
+.sic-neighborhood__step-number { font-family: var(--type-numeric-family); font-size: var(--type-body-small-size); line-height: 1.6; color: var(--muted-foreground); }
+.sic-neighborhood__steps h3 { font-size: var(--type-body-large-size); font-weight: 500; line-height: var(--type-body-large-line-height); }
+.sic-neighborhood__steps p { color: var(--muted-foreground); font-size: var(--type-body-medium-size); margin-top: calc(var(--space-unit) * 2); }
+.sic-neighborhood__quiet { display: flex; gap: calc(var(--space-unit) * 4); align-items: flex-start; margin-top: calc(var(--space-unit) * 8); padding-block: calc(var(--space-unit) * 6); border-top: 1px solid var(--border); }
+.sic-neighborhood__quiet svg { flex-shrink: 0; margin-top: var(--space-unit); }
+.sic-neighborhood__quiet h3 { font-size: var(--type-body-medium-size); font-weight: 500; }
+.sic-neighborhood__quiet p { margin-top: var(--space-unit); color: var(--muted-foreground); max-width: 82ch; font-size: var(--type-body-small-size); }
+.sic-neighborhood__membership { background: var(--brand-accent-quiet, var(--surface-2)); padding-block: calc(var(--space-unit) * 24); }
+.sic-neighborhood__membership-grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--space-unit) * 24); }
+.sic-neighborhood__membership h2 { max-width: 12ch; }
+.sic-neighborhood__join-state { margin-top: calc(var(--space-unit) * 8); padding-top: calc(var(--space-unit) * 6); border-top: 1px solid var(--border); }
+.sic-neighborhood__join-state h3 { font-size: var(--type-body-medium-size); font-weight: 500; }
+.sic-neighborhood__join-state p { font-size: var(--type-body-small-size); color: var(--muted-foreground); margin-top: calc(var(--space-unit) * 2); max-width: 40ch; }
+.sic-neighborhood .sic-neighborhood__join-state .sic-neighborhood__join-action { margin-top: 0; }
+.sic-neighborhood__text-link { display: inline-flex; align-items: center; min-height: 44px; gap: calc(var(--space-unit) * 2); font-size: var(--type-body-small-size); text-decoration: underline !important; text-underline-offset: 4px; margin-top: calc(var(--space-unit) * 3); }
+.sic-neighborhood__residency > h3 { font-size: var(--type-body-small-size); color: var(--muted-foreground); font-weight: 500; }
+.sic-neighborhood__residency ul { margin: calc(var(--space-unit) * 2) 0 0; padding: 0; list-style: none; }
+.sic-neighborhood__residency li { padding-block: calc(var(--space-unit) * 6); border-bottom: 1px solid var(--border); }
+.sic-neighborhood__residency h4 { font-size: var(--type-body-large-size); font-weight: 500; }
+.sic-neighborhood__residency li p { color: var(--muted-foreground); margin-top: calc(var(--space-unit) * 2); font-size: var(--type-body-small-size); }
+.sic-neighborhood__limitation { color: var(--muted-foreground); margin-top: calc(var(--space-unit) * 6) !important; font-size: var(--type-body-small-size); }
+.sic-neighborhood__essentials { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: calc(var(--space-unit) * 24); padding-block: calc(var(--space-unit) * 24); }
+.sic-neighborhood .sic-neighborhood__faq [data-slot=accordion-trigger] { min-height: 64px; padding-block: calc(var(--space-unit) * 6); font-size: var(--type-body-medium-size); font-weight: 500; align-items: center; gap: calc(var(--space-unit) * 6); }
+.sic-neighborhood .sic-neighborhood__faq [data-slot=accordion-content] > div { padding-bottom: calc(var(--space-unit) * 6); padding-right: calc(var(--space-unit) * 8); font-size: var(--type-body-small-size); line-height: var(--type-body-small-line-height); color: var(--muted-foreground); }
+.sic-neighborhood__faq a { display: inline-block; min-height: 44px; padding-block: calc(var(--space-unit) * 3); }
+.sic-neighborhood__footer { border-top: 1px solid var(--border); padding-block: calc(var(--space-unit) * 8); display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--space-unit) * 6); font-size: var(--type-body-small-size); color: var(--muted-foreground); }
+.sic-neighborhood__footer-brand { color: var(--foreground); font-size: var(--type-body-large-size); font-weight: 500; margin-bottom: calc(var(--space-unit) * 4) !important; }
+.sic-neighborhood__footer > div { max-width: 48ch; }
+.sic-neighborhood__footer nav { display: flex; flex-wrap: wrap; gap: 0 calc(var(--space-unit) * 6); align-content: start; justify-content: end; }
+.sic-neighborhood__footer nav a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
+.sic-neighborhood__footer-note { grid-column: 1 / -1; font-size: var(--type-caption-size); }
+@container neighborhood (max-width: 760px) {
+  .sic-neighborhood__width { width: calc(100% - var(--space-unit) * 8); }
+  .sic-neighborhood__header { min-height: 88px; gap: calc(var(--space-unit) * 4); flex-wrap: wrap; padding-block: calc(var(--space-unit) * 4); }
+  .sic-neighborhood__brand img, .sic-neighborhood__brand svg { width: 144px; }
+  .sic-neighborhood__nav--desktop { display: none; }
+  .sic-neighborhood__menu-trigger { display: inline-flex; flex: 0 0 auto; min-width: 44px; min-height: 44px; }
+  .sic-neighborhood__menu-content { display: flex; }
+  .sic-neighborhood__nav--mobile { display: grid; gap: calc(var(--space-unit) * 2); padding: 0 calc(var(--space-unit) * 4) calc(var(--space-unit) * 6); }
+  .sic-neighborhood__nav--mobile a { width: 100%; min-height: 48px; }
+  .sic-neighborhood__hero { grid-template-columns: 1fr; gap: calc(var(--space-unit) * 8); padding-block: calc(var(--space-unit) * 8) calc(var(--space-unit) * 12); }
+  .sic-neighborhood h1 { font-size: clamp(var(--type-h2-size), 9.6cqw, var(--type-display-large-size)); max-width: 100%; }
+  .sic-neighborhood__intro { max-width: 36ch; font-size: var(--type-body-medium-size); }
+  .sic-neighborhood .sic-neighborhood__join-action { margin-top: calc(var(--space-unit) * 6); }
+  .sic-neighborhood__hero-image, .sic-neighborhood__hero-figure > :first-child:not(.sic-neighborhood__example-note) { aspect-ratio: 1.6; }
+  .sic-neighborhood__hero-media { aspect-ratio: 16 / 10; }
+  .sic-neighborhood__hero-figure { padding-bottom: calc(var(--space-unit) * 12); }
+  .sic-neighborhood__example-note { padding: calc(var(--space-unit) * 6); margin-top: calc(var(--space-unit) * -8); width: 89%; }
+  .sic-neighborhood__hero-figure figcaption { font-size: var(--type-caption-size); bottom: 0; max-width: 32ch; }
+  .sic-neighborhood__sharing, .sic-neighborhood__membership, .sic-neighborhood__essentials { padding-block: calc(var(--space-unit) * 12); }
+  .sic-neighborhood__example-panel, .sic-neighborhood__membership-grid, .sic-neighborhood__essentials { grid-template-columns: 1fr; gap: calc(var(--space-unit) * 8); }
+  .sic-neighborhood__example-message { --sic-neighborhood-example-inset: calc(var(--space-unit) * 3); padding: var(--sic-neighborhood-example-inset); min-height: 280px; }
+  .sic-neighborhood__steps li { padding-block: calc(var(--space-unit) * 6); }
+  .sic-neighborhood__membership h2 { max-width: 15ch; }
+  .sic-neighborhood__footer { grid-template-columns: 1fr; padding-block: calc(var(--space-unit) * 8); }
+  .sic-neighborhood__footer nav { justify-content: start; gap: 0 calc(var(--space-unit) * 6); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .sic-neighborhood *, .sic-neighborhood *::before, .sic-neighborhood *::after { animation-duration: 0s !important; transition-duration: 0s !important; scroll-behavior: auto !important; }
+}
+
+/* Original artwork keeps the people, hands and exchange visible at every width. */
+.sic-neighborhood__hero-image[data-fit="contain"] { aspect-ratio: auto; object-fit: contain; }
+
+.sic-neighborhood__possibilities { border-top: 1px solid var(--border); padding-block: calc(var(--space-unit) * 24); }
+.sic-neighborhood__possibilities > ul { list-style: none; padding: 0; margin: calc(var(--space-unit) * 8) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(var(--space-unit) * 8); row-gap: calc(var(--space-unit) * 8); }
+.sic-neighborhood__possibilities li { min-width: 0; }
+.sic-neighborhood__possibility-media { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; border: 1px solid var(--border); border-radius: var(--radius-card); }
+.sic-neighborhood__possibilities li > .sic-neighborhood__eyebrow { margin-top: calc(var(--space-unit) * 4); }
+.sic-neighborhood__possibilities li > h3 { margin-top: calc(var(--space-unit) * 2); 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); }
+.sic-neighborhood__possibilities li > p:last-child { margin-top: calc(var(--space-unit) * 2); color: var(--muted-foreground); }
+.sic-neighborhood__example-media { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; border-radius: var(--sic-neighborhood-example-media-radius); margin-bottom: calc(var(--space-unit) * 6); }
+@container neighborhood (max-width: 760px) { .sic-neighborhood__possibilities { padding-block: calc(var(--space-unit) * 12); } .sic-neighborhood__possibilities > ul { grid-template-columns: 1fr; } }
+
+/* Portal content owns its layout independently of the marketing container. */
+.sic-neighborhood__nav--mobile { display: grid; gap: calc(var(--space-unit) * 2); padding: 0 calc(var(--space-unit) * 4) calc(var(--space-unit) * 6); }
+.sic-neighborhood__nav--mobile a { display: inline-flex; align-items: center; width: 100%; min-height: var(--control-target-min); min-width: var(--control-target-min); }
+@container neighborhood (max-width: 1120px) { .sic-neighborhood__nav--desktop { display: none; } .sic-neighborhood__menu-trigger { display: inline-flex; } }

package/css/powered-by-superic.css

@@ -0,0 +1,33 @@
+/* Neutral attribution only. Theme roles inherit at the nearest explicit scope. */
+.sic-powered-by-superic {
+  --powered-by-ink: var(--foreground);
+  --powered-by-label: var(--muted-foreground);
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+  gap: var(--space-unit);
+  min-block-size: var(--control-target-min);
+  min-inline-size: var(--control-target-min);
+  font-family: var(--font-body, var(--font-sans));
+  font-size: var(--type-micro-size);
+  font-weight: var(--type-button-weight);
+  letter-spacing: 0.02em;
+  color: var(--powered-by-label);
+  text-decoration: none;
+  transition: color var(--motion-hover-duration) var(--motion-ease-quiet);
+}
+.sic-powered-by-superic[data-size="md"] {
+  gap: var(--space-unit);
+  font-size: var(--type-caption-size);
+}
+.sic-powered-by-superic[data-variant="light"] {
+  --powered-by-ink: var(--light-content-primary);
+  --powered-by-label: var(--light-content-secondary);
+}
+.sic-powered-by-superic[data-variant="dark"] {
+  --powered-by-ink: var(--dark-content-primary);
+  --powered-by-label: var(--dark-content-secondary);
+}
+.sic-powered-by-superic:hover { color: var(--powered-by-ink); }
+.sic-powered-by-superic:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
+@media (prefers-reduced-motion: reduce) { .sic-powered-by-superic { transition: none; } }

package/css/public-content.css

@@ -0,0 +1,187 @@
+/* Public reading and recovery surfaces. Product copy and authority are supplied. */
+.sic-public { container: public-site / inline-size; position: relative; background: var(--background); 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-public *, .sic-public *::before, .sic-public *::after { box-sizing: border-box; }
+.sic-public :where(h1,h2,h3,p,ul,ol,dl,figure) { margin: 0; }
+.sic-public a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
+.sic-public :where(a,summary):focus-visible { outline: 2px solid var(--ring); outline-offset: 4px; border-radius: var(--radius-xs); }
+.sic-public__width { width: min(calc(100% - 4rem), 69rem); margin-inline: auto; }
+.sic-public__width--marketing { width: min(calc(100% - 4rem), 90rem); }
+.sic-public__skip { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); clip-path: inset(50%); white-space: nowrap; }
+.sic-public__skip:focus-visible { z-index: 10; top: 1rem; left: 1rem; width: auto; height: auto; margin: 0; padding: 1rem; overflow: visible; clip: auto; clip-path: none; background: var(--background); }
+.sic-public__header { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; min-height: 6rem; border-bottom: 1px solid var(--border); }
+.sic-public__brand { display: inline-flex; align-items: center; flex: 0 0 auto; min-height: 44px; }
+/* Consumer brand assets may have mutually exclusive theme visibility. */
+.sic-public__brand :where(img,svg) { width: 100px; height: auto; }
+.sic-public__header nav { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1.5rem; }
+.sic-public__header nav a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; text-decoration: none; font-size: var(--type-body-small-size); }
+.sic-public__menu-trigger { display: none; }
+.sic-public__header a[aria-current=page] { text-decoration: underline; font-weight: 600; }
+.sic-public__main { min-height: 55dvh; padding-block: 3rem 6rem; outline: none; }
+.sic-public :where(h1,h2,h3) { font-family: var(--type-h1-family); text-wrap: balance; }
+.sic-public h1 { font-size: var(--type-display-small-size); font-weight: var(--type-display-small-weight); line-height: var(--type-display-small-line-height); letter-spacing: var(--type-display-small-tracking); }
+.sic-public 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-public h3 { font-size: var(--type-h3-size); line-height: var(--type-h3-line-height); font-weight: var(--type-h3-weight); }
+.sic-public__page-heading { max-width: 48rem; }
+.sic-public__intro { margin-top: 1rem !important; color: var(--muted-foreground); max-width: 62ch; font-size: var(--type-body-large-size); line-height: var(--type-body-large-line-height); }
+.sic-public__back { margin-bottom: 1rem !important; font-size: var(--type-body-small-size); }
+.sic-public__back a { display: inline-flex; min-height: 44px; align-items: center; }
+.sic-public__metadata { margin-top: 1rem !important; color: var(--muted-foreground); font-size: var(--type-body-small-size); }
+.sic-public__footer { border-top: 1px solid var(--border); padding-block: 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 3rem; color: var(--muted-foreground); font-size: var(--type-body-small-size); }
+.sic-public__footer-brand { color: var(--foreground); font-weight: 600; margin-bottom: .75rem !important; }
+.sic-public__footer nav { display: flex; flex-wrap: wrap; gap: 0 1.5rem; justify-content: end; align-content: start; }
+.sic-public__footer nav a { display: inline-flex; min-height: 44px; min-width: 44px; align-items: center; }
+.sic-public__footer-note { grid-column: 1 / -1; font-size: var(--type-caption-size); }
+.sic-public-article__layout { display: grid; grid-template-columns: minmax(0,1fr) 14rem; gap: 3rem; margin-top: 3rem; }
+.sic-public-article__contents { grid-column: 2; grid-row: 1; align-self: start; position: sticky; top: 1.5rem; }
+.sic-public-article__contents summary { cursor: pointer; min-height: 44px; display: list-item; font-weight: 600; font-size: var(--type-body-small-size); padding-block: .5rem; }
+.sic-public-article__contents nav { display: grid; padding-top: .25rem; }
+.sic-public-article__contents a { display: flex; align-items: center; min-height: 44px; padding-block: .5rem; color: var(--muted-foreground); font-size: var(--type-body-small-size); text-decoration: none; }
+.sic-public-article__contents a:hover { color: var(--foreground); text-decoration: underline; }
+.sic-public-article__body { min-width: 0; grid-column: 1; grid-row: 1; }
+.sic-public-article__body > section { margin-top: 3rem; scroll-margin-top: 2rem; outline: none; }
+.sic-public-article__body > section:first-child { margin-top: 0; }
+.sic-public__prose { margin-top: 1rem; max-width: 68ch; }
+.sic-public__prose a, .sic-public__back a, .sic-public__related a { text-decoration-line: underline; }
+.sic-public__prose > * + * { margin-top: 1rem; }
+.sic-public__prose :where(ul,ol) { padding-left: 1.5rem; }
+.sic-public__prose li + li { margin-top: .75rem; }
+.sic-public__prose h3 { margin-top: 2rem; }
+.sic-public__prose table { width: 100%; border-collapse: collapse; }
+.sic-public__prose caption { margin-bottom: calc(var(--space-unit) * 4); color: var(--muted-foreground); text-align: left; }
+.sic-public__prose :where(th,td) { padding: calc(var(--space-unit) * 4); border-bottom: 1px solid var(--border); vertical-align: top; text-align: left; }
+.sic-public__prose th { font-weight: 500; }
+.sic-public__prose dl > div { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 1rem; padding-block: 1rem; border-bottom: 1px solid var(--border); }
+.sic-public__prose dd { margin: 0; }
+.sic-public__notice { border-inline-start: 3px solid var(--border); padding: .25rem 1rem; }
+.sic-public__notice h2 { font-size: var(--type-body-medium-size); line-height: var(--type-body-medium-line-height); font-weight: 600; }
+.sic-public__notice p { margin-top: .5rem; color: var(--muted-foreground); }
+.sic-public__notice a { display: inline-flex; min-height: 44px; align-items: center; margin-top: .5rem; }
+.sic-public__related { border-top: 1px solid var(--border); padding-top: 2rem; }
+.sic-public__related ul { list-style: none; padding: .5rem 0 0; }
+.sic-public__related a { display: inline-flex; align-items: center; min-height: 44px; }
+.sic-public-help__search { max-width: 43rem; margin-top: 2rem; }
+.sic-public-help__search label { display: block; font-size: var(--type-body-small-size); font-weight: 600; margin-bottom: .5rem; }
+.sic-public-help__search > div { display: flex; align-items: stretch; gap: .75rem; }
+.sic-public-help__search [data-slot=input] { min-width: 0; min-height: 48px; flex: 1; }
+.sic-public-help__search [data-slot=button] { min-height: 48px; flex-shrink: 0; }
+.sic-public-help__results { margin-top: 2rem; }
+.sic-public-help__groups { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 3rem; margin-top: 2rem; }
+.sic-public-help__groups h2 { font-size: var(--type-h3-size); }
+.sic-public-help__groups ul { list-style: none; padding: .75rem 0 0; }
+.sic-public-help__groups li { border-bottom: 1px solid var(--border); padding-bottom: 1rem; }
+.sic-public-help__groups li + li { margin-top: .5rem; }
+.sic-public-help__groups li a { display: flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: none; }
+.sic-public-help__groups li a:hover { text-decoration: underline; }
+.sic-public-help__groups li p { font-size: var(--type-body-small-size); color: var(--muted-foreground); }
+.sic-public-help__empty { max-width: 42rem; padding-block: 1rem; }
+.sic-public-help__empty > * + * { margin-top: 1rem; }
+.sic-public-help__empty a { min-height: 44px; white-space: normal; text-decoration: none; }
+.sic-public-help__contact { border-top: 1px solid var(--border); margin-top: 3rem; padding-top: 2rem; display: flex; justify-content: space-between; align-items: center; gap: 2rem; }
+.sic-public-help__contact h2 { font-size: var(--type-h3-size); }
+.sic-public-help__contact p { margin-top: .5rem; color: var(--muted-foreground); }
+.sic-public-help__contact a { flex-shrink: 0; }
+.sic-public :where(.sic-public-help__contact a,.sic-public__actions a) { min-height: 44px; white-space: normal; text-decoration: none; }
+.sic-public-availability { max-width: 44rem; padding-block: 2rem 3rem; }
+.sic-public-availability > p { margin-top: 1rem; }
+.sic-public__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 1.5rem; margin-top: 2rem; }
+.sic-public__actions a { display: inline-flex; align-items: center; }
+.sic-public__actions a:not(.sic-public__primary) { text-decoration: underline; }
+.sic-public a.sic-public__primary { color: var(--primary-foreground); }
+@container public-site (max-width: 760px) {
+  .sic-public__width { width: calc(100% - 2rem); }
+  .sic-public__header { min-height: 5rem; gap: .75rem; flex-wrap: wrap; padding-block: .75rem; }
+  .sic-public__nav--desktop { display: none !important; }
+  .sic-public__menu-trigger { display: inline-flex; min-width: 44px; min-height: 44px; }
+  .sic-public__menu-content { display: flex; }
+  .sic-public__nav--mobile { display: grid !important; gap: .25rem; padding: 0 1rem 1.5rem; }
+  .sic-public__nav--mobile a { width: 100%; min-height: 48px; }
+  .sic-public__main { padding-block: 2rem 3rem; }
+  .sic-public h1 { font-size: var(--type-h1-size); line-height: var(--type-h1-line-height); letter-spacing: var(--type-h1-tracking); }
+  .sic-public h2 { font-size: var(--type-h3-size); line-height: var(--type-h3-line-height); }
+  .sic-public__intro { font-size: var(--type-body-medium-size); }
+  .sic-public-article__layout { display: flex; flex-direction: column; gap: 2rem; margin-top: 1.5rem; }
+  .sic-public-article__contents { position: static; align-self: stretch; border-block: 1px solid var(--border); padding-block: .25rem; }
+  .sic-public-article__contents nav { grid-template-columns: 1fr 1fr; gap: .25rem 1rem; padding-bottom: .75rem; }
+  .sic-public-article__body > section { margin-top: 2rem; }
+  .sic-public-help__groups { grid-template-columns: 1fr; gap: 2rem; }
+  .sic-public-help__contact { align-items: start; flex-direction: column; gap: 1rem; }
+  .sic-public__footer { grid-template-columns: 1fr; gap: 1.5rem; }
+  .sic-public__footer nav { justify-content: start; }
+  .sic-public-availability { padding-block: 1rem 2rem; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .sic-public *, .sic-public *::before, .sic-public *::after { scroll-behavior: auto !important; animation-duration: 0s !important; transition-duration: 0s !important; }
+}
+
+/* A document reader keeps its heading and return action visible while text scrolls. */
+.sic-public-document-dialog[data-slot="sheet-content"] {
+  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;
+  block-size: min(48rem, calc(100dvh - 16px));
+  max-block-size: calc(100dvh - 16px);
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  gap: 0;
+  overflow: clip;
+  border-start-start-radius: var(--radius-xl);
+  border-start-end-radius: var(--radius-xl);
+}
+.sic-public-document-dialog[data-slot="sheet-content"] [data-slot="sheet-header"] {
+  min-block-size: 76px;
+  padding-inline-end: 96px;
+  border-block-end: 1px solid var(--border);
+  justify-content: center;
+}
+.sic-public-document-dialog[data-slot="sheet-content"] [data-slot="sheet-footer"] {
+  margin: 0;
+  border-block-start: 1px solid var(--border);
+}
+.sic-public-document-dialog[data-slot="sheet-content"] button {
+  min-block-size: 44px;
+  min-inline-size: 44px;
+}
+.sic-public-document-dialog__body {
+  display: grid;
+  align-content: start;
+  min-block-size: 0;
+  overflow: auto;
+  gap: 1rem;
+  padding: 1rem;
+  scroll-padding-block: 1rem;
+  outline-offset: -3px;
+}
+.sic-public-document-dialog__body section {
+  display: grid;
+  gap: 0.25rem;
+}
+@media (min-width: 768px) {
+  .sic-public-document-dialog[data-slot="sheet-content"] {
+    inline-size: min(48rem, calc(100% - 48px));
+    margin-inline: auto;
+  }
+}
+
+.sic-public-document-dialog__body :where(h3,p,ul,ol) { margin: 0; }
+.sic-public-document-dialog__body 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); }
+.sic-public-document-dialog__body section { gap: .75rem; }
+.sic-public-document-dialog__body a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
+.sic-public-document-dialog__body :where(ul,ol) { padding-inline-start: 1.25rem; }
+
+.sic-public-article__media { display: block; max-width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; border-radius: var(--radius-card); margin-top: calc(var(--space-unit) * 6); }
+.sic-public-article[data-presentation=marketing] .sic-public-article__layout { display: block; margin-top: calc(var(--space-unit) * 12); }
+.sic-public-article[data-presentation=marketing] .sic-public-article__body > section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: calc(var(--space-unit) * 12); margin-top: calc(var(--space-unit) * 24); }
+.sic-public-article[data-presentation=marketing] .sic-public-article__body > section:nth-child(even) .sic-public-article__section-copy { order: 2; }
+.sic-public-article[data-presentation=marketing] .sic-public-article__media { width: 100%; max-width: none; margin: 0; aspect-ratio: 16 / 10; object-fit: cover; }
+.sic-public-article[data-presentation=marketing] .sic-public__prose { max-width: 58ch; }
+@container public-site (max-width: 760px) {
+  .sic-public__width--marketing { width: calc(100% - 2rem); }
+  .sic-public-article[data-presentation=marketing] .sic-public-article__layout { margin-top: 2rem; }
+  .sic-public-article[data-presentation=marketing] .sic-public-article__body > section { grid-template-columns: 1fr; gap: 1.5rem; margin-top: 3rem; }
+  .sic-public-article[data-presentation=marketing] .sic-public-article__body > section:nth-child(even) .sic-public-article__section-copy { order: initial; }
+}
+
+/* Sheet is portalled outside the page container. */
+.sic-public__nav--mobile { display: grid; gap: calc(var(--space-unit) * 2); padding: 0 calc(var(--space-unit) * 4) calc(var(--space-unit) * 6); }
+.sic-public__nav--mobile a { display: inline-flex; align-items: center; min-height: var(--control-target-min); min-width: var(--control-target-min); }

package/css/tailwind.css

@@ -0,0 +1,6 @@
+@import "@super-ic/primitives/tailwind.css";
+@import "./contact-section.css";
+@import "./powered-by-superic.css";
+@import "./case-study-card.css";
+
+@source "../dist";

package/dist/case-study-card-types.d.ts

@@ -0,0 +1,16 @@
+/** CaseStudyCard presentation shape. The package ships no card records or slug roster. */
+export type CaseStudyCardProductAccess = "public" | "gated" | "partially-gated";
+/** Consumer-owned slug. The package does not publish a roster or taxonomy. */
+export type LiveCaseStudyCardSlug = string;
+export type CaseStudyCardProvenance = {
+    slug: string;
+    identity: string;
+    wordmark: string | null;
+    relationshipLabel?: string;
+    productAccess: CaseStudyCardProductAccess;
+    headline: string;
+    result: string;
+    artworkAlt: string;
+    sourceAssets: readonly [string, ...string[]];
+    reference?: true;
+};

package/dist/case-study-card-types.js

@@ -0,0 +1 @@
+export {};

package/dist/case-study-card.d.ts

@@ -0,0 +1,66 @@
+import { type ReactNode, type Ref } from "react";
+export type CaseStudyCardAccess = "open" | "locked";
+export type CaseStudyCardDensity = "standard" | "compact";
+export type CaseStudyCardIdentityKind = "text" | "wordmark";
+export type CaseStudyCardPresentation = "tenant" | "superic";
+export type CaseStudyCardOpenControlProps = {
+    href: string;
+    className: string;
+    "data-slot": "case-study-card";
+    "data-access": "open";
+    "data-density": CaseStudyCardDensity;
+    "data-card-presentation": CaseStudyCardPresentation;
+    "data-case-study-card"?: string | undefined;
+    "aria-label": string;
+    "aria-describedby": string;
+    children: ReactNode;
+};
+/**
+ * Structural case-study card API. Consumer adapters own destination, identity,
+ * source-backed approved artwork, claims, and access handling. Typed consumer
+ * registries and their art checks preserve each owner-approved composition. The shared pattern owns geometry, hierarchy, focus treatment,
+ * and one whole-card control.
+ */
+export type CaseStudyCardProps = {
+    href: string;
+    /** Used in the one interactive control name. */
+    accessibleName: string;
+    /** Consumer-supplied identity mark or plain product name. */
+    identity: ReactNode;
+    /** Keeps text identities visually distinct from approved product wordmarks. */
+    identityKind?: CaseStudyCardIdentityKind;
+    /** Plain-language relationship, such as a product within a parent brand. */
+    relationshipLabel?: string | undefined;
+    headline: string;
+    result: string;
+    /** Owner-approved artwork from the consumer art registry.
+     * Consumer adapters enforce provenance and preserve the approved visual baseline;
+     * ReactNode preserves that content without letting the shell infer visual truth.
+     * Changing the shell or adopting DS controls never authorizes replacing artwork. */
+    media: ReactNode;
+    /** Consumer-localized visible action text. English fallback is retained. */
+    actionLabel?: string | undefined;
+    /** Consumer-localized whole interactive control name. Overrides the legacy name wrapper. */
+    actionAriaLabel?: string | undefined;
+    /** Consumer-localized final screen-reader action sentence. */
+    actionDescription?: string | undefined;
+    access?: CaseStudyCardAccess;
+    density?: CaseStudyCardDensity;
+    /** Scopes the recovered SuperIC surface and typography treatment to this card. */
+    presentation?: CaseStudyCardPresentation;
+    onUnlock?: () => void;
+    /** Lets a production adapter provide framework-native navigation. */
+    renderOpenControl?: (props: CaseStudyCardOpenControlProps) => ReactNode;
+    /** Optional consumer trace id for page-level verification. */
+    caseStudyId?: string | undefined;
+    /** Consumer-owned ref for returning focus after a locked access dialog closes. */
+    lockedControlRef?: Ref<HTMLDivElement>;
+    className?: string;
+};
+/**
+ * The package shell deliberately has no knowledge of Next.js, GateModal, or a
+ * consumer registry. That keeps every card shell deterministic and lets a
+ * production adapter provide the single navigation and access-flow boundary.
+ */
+export declare function CaseStudyCard({ href, accessibleName, identity, identityKind, relationshipLabel, headline, result, media, actionLabel, actionAriaLabel, actionDescription, access, density, presentation, onUnlock, renderOpenControl, caseStudyId, lockedControlRef, className, }: CaseStudyCardProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
+export declare const CaseStudyCardShell: typeof CaseStudyCard;

package/dist/case-study-card.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { Icon } from "@super-ic/icon-contracts";
+import { SURFACE_RADIUS_CLASSES } from "./surface-radius.js";
+const controlClassName = `group block min-h-[44px] w-full ${SURFACE_RADIUS_CLASSES.card} text-left outline-none transition-transform duration-[var(--motion-hover-duration,220ms)] ease-[var(--motion-ease-quiet,ease-out)] hover:-translate-y-0.5 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background motion-reduce:hover:[translate:0_0] motion-reduce:transition-none`;
+function asSentence(value) {
+    const trimmed = value.trim().replace(/\.{2,}$/u, ".");
+    return /[.!?]$/u.test(trimmed) ? trimmed : `${trimmed}.`;
+}
+function CardBody({ accessibleName, identity, identityKind, relationshipLabel, headline, result, media, access, density, descriptionId, actionLabel, actionDescription, }) {
+    const compact = density === "compact";
+    const isTextIdentity = identityKind === "text";
+    /* One edge law: elevation is the shadow; the dark ramp separates the
+       card from the ground, so no hairline doubles the edge. Shadow and
+       the link's lift share the quiet-motion pair so the hover reads as
+       one movement. */
+    return (_jsxs("div", { className: `flex h-full flex-col overflow-hidden ${SURFACE_RADIUS_CLASSES.card} bg-enterprise-bg text-enterprise-fg shadow-[var(--elev-card)] transition-shadow duration-[var(--motion-hover-duration,220ms)] ease-[var(--motion-ease-quiet,ease-out)] group-hover:shadow-[var(--elev-pill)] motion-reduce:transition-none`, "data-slot": "case-study-card-surface", children: [_jsx("div", { className: `aspect-[16/10] w-full shrink-0 overflow-hidden ${SURFACE_RADIUS_CLASSES.cardFrameTop} border-b border-border`, "data-slot": "case-study-card-art", "data-case-study-slot": "art-frame", children: _jsx("div", { className: "size-full overflow-hidden [&_img]:block [&_img]:size-full [&_img]:object-contain", children: media }) }), _jsxs("div", { className: compact
+                    ? "flex min-h-48 flex-1 flex-col gap-3 p-5"
+                    : "flex flex-1 flex-col gap-4 p-5 sm:p-6", "data-slot": "case-study-card-body", children: [_jsx("div", { className: compact
+                            ? isTextIdentity
+                                ? "min-h-6 text-xl font-semibold leading-none tracking-tight text-enterprise-fg"
+                                : "flex min-h-7 items-center overflow-hidden text-sm font-semibold text-enterprise-fg [&_[data-slot=case-study-card-wordmark]]:max-h-7 [&_[data-slot=case-study-card-wordmark]]:max-w-40"
+                            : isTextIdentity
+                                ? "min-h-9 text-3xl font-semibold leading-none tracking-tight text-enterprise-fg"
+                                : "flex min-h-10 items-center overflow-hidden text-base font-semibold text-enterprise-fg [&_[data-slot=case-study-card-wordmark]]:max-h-10 [&_[data-slot=case-study-card-wordmark]]:max-w-48", "data-slot": "case-study-card-identity", "data-case-study-slot": "logo", "data-identity-kind": identityKind, "data-logo-slot-position": "body-start", "data-logo-slot-size": compact ? "compact" : "standard", children: identity }), relationshipLabel ? (_jsx("p", { className: compact
+                            ? "text-xs font-medium tracking-[0.04em] text-[var(--enterprise-muted)]"
+                            : "text-xs font-medium tracking-[0.04em] text-[var(--enterprise-muted)] md:text-sm xl:text-base", "data-slot": "case-study-card-relationship", "data-case-study-slot": "eyebrow", children: relationshipLabel })) : null, _jsx("h2", { className: compact
+                            ? "text-lg font-semibold leading-snug tracking-tight text-enterprise-fg"
+                            : "text-xl font-semibold leading-[1.12] tracking-tight text-enterprise-fg md:text-2xl xl:text-3xl", "data-slot": "case-study-card-headline", "data-case-study-slot": "headline", children: headline }), _jsx("p", { className: compact
+                            ? "text-sm leading-6 text-[var(--enterprise-subtle)]"
+                            : "text-base leading-7 text-[var(--enterprise-subtle)] md:text-lg md:leading-8 xl:text-xl xl:leading-9", "data-slot": "case-study-card-result", "data-case-study-slot": "proof-line", children: result }), _jsxs("span", { className: compact
+                            ? "mt-auto inline-flex items-center gap-2 pt-1 text-sm font-medium text-enterprise-fg underline-offset-4 group-hover:underline"
+                            : "mt-auto inline-flex items-center gap-2 pt-1 text-sm font-medium text-enterprise-fg underline-offset-4 group-hover:underline md:text-base", "data-slot": "case-study-card-control-label", "data-case-study-slot": "cta", children: [actionLabel ?? (access === "locked" ? "Unlock case study" : "View case study"), _jsx(Icon, { name: "navigation.forward", decorative: true, size: 16 })] })] }), _jsxs("span", { id: descriptionId, className: "sr-only", children: [relationshipLabel ? `${asSentence(relationshipLabel)} ` : "", asSentence(headline), " ", asSentence(result), " ", actionDescription ?? (access === "locked" ? "Access requires an unlock request." : "Opens the case study.")] })] }));
+}
+/**
+ * The package shell deliberately has no knowledge of Next.js, GateModal, or a
+ * consumer registry. That keeps every card shell deterministic and lets a
+ * production adapter provide the single navigation and access-flow boundary.
+ */
+export function CaseStudyCard({ href, accessibleName, identity, identityKind = "text", relationshipLabel, headline, result, media, actionLabel, actionAriaLabel, actionDescription, access = "open", density = "standard", presentation = "tenant", onUnlock, renderOpenControl, caseStudyId, lockedControlRef, className, }) {
+    const descriptionId = useId();
+    const content = (_jsx(CardBody, { accessibleName: accessibleName, identity: identity, identityKind: identityKind, relationshipLabel: relationshipLabel, headline: headline, result: result, media: media, actionLabel: actionLabel, actionDescription: actionDescription, access: access, density: density, descriptionId: descriptionId }));
+    if (access === "locked") {
+        if (!onUnlock) {
+            throw new Error("Locked case-study cards require an unlock handler");
+        }
+        const unlock = onUnlock;
+        const onKeyDown = (event) => {
+            if (event.key !== "Enter" && event.key !== " ")
+                return;
+            event.preventDefault();
+            unlock();
+        };
+        return (_jsx("div", { ref: lockedControlRef, role: "button", tabIndex: 0, className: `${controlClassName} ${className ?? ""}`, "data-slot": "case-study-card", "data-access": "locked", "data-density": density, "data-card-presentation": presentation, "data-case-study-card": caseStudyId, "aria-label": actionAriaLabel ?? `Unlock ${accessibleName} case study`, "aria-describedby": descriptionId, "aria-haspopup": "dialog", onClick: unlock, onKeyDown: onKeyDown, children: content }));
+    }
+    if (renderOpenControl) {
+        return renderOpenControl({
+            href,
+            className: `${controlClassName} ${className ?? ""}`,
+            "data-slot": "case-study-card",
+            "data-access": "open",
+            "data-density": density,
+            "data-card-presentation": presentation,
+            "data-case-study-card": caseStudyId,
+            "aria-label": actionAriaLabel ?? `View ${accessibleName} case study`,
+            "aria-describedby": descriptionId,
+            children: content,
+        });
+    }
+    return (_jsx("a", { className: `${controlClassName} ${className ?? ""}`, "data-slot": "case-study-card", "data-access": "open", "data-density": density, "data-card-presentation": presentation, "data-case-study-card": caseStudyId, href: href, "aria-label": actionAriaLabel ?? `View ${accessibleName} case study`, "aria-describedby": descriptionId, children: content }));
+}
+export const CaseStudyCardShell = CaseStudyCard;

package/dist/contact-form.d.ts

@@ -0,0 +1,56 @@
+import { type ReactNode } from "react";
+export type ContactSectionField = {
+    name: string;
+    label: string;
+    kind: "text" | "email" | "tel" | "textarea";
+    required?: boolean;
+    autoComplete?: string;
+    hint?: string;
+    placeholder?: string;
+    maxLength?: number;
+    rows?: number;
+};
+export type ContactSectionState = {
+    kind: "idle";
+} | {
+    kind: "invalid";
+    validationId: string | number;
+    message: string;
+    errors: Record<string, string>;
+} | {
+    kind: "submitting";
+    message: string;
+} | {
+    kind: "success";
+    title: string;
+    message: string;
+} | {
+    kind: "failure";
+    message: string;
+} | {
+    kind: "unavailable";
+    message: string;
+};
+export type ContactFormProps = {
+    formTitle: string;
+    formDescription?: string;
+    headingLevel?: 2 | 3;
+    fields: readonly ContactSectionField[];
+    values: Record<string, string>;
+    state: ContactSectionState;
+    submitLabel: string;
+    submittingLabel: string;
+    onValueChange: (name: string, value: string) => void;
+    onSubmit: () => void;
+    reset?: {
+        label: string;
+        onAction: () => void;
+    };
+    honeypot?: {
+        name: string;
+        label: string;
+    };
+    notice?: ReactNode;
+};
+/** Shared contact behavior; consumers own content, validation and transport. */
+export declare function ContactForm({ formTitle, formDescription, headingLevel, fields, values, state, submitLabel, submittingLabel, onValueChange, onSubmit, reset, honeypot, notice, }: ContactFormProps): import("react").JSX.Element;