ClintchizandClaude Opus 5
68c7b96a9f
Object props never worked in generated demos, and my two earlier attempts each
traded one failure for another:
- a bare {...} attribute is read by the compiler as an interpolation, so it
parsed JSON as JavaScript and the page 500ed
- parenthesising it compiled, but prop coercion runs JSON.parse on the raw
attribute, so ({...}) threw and every demo rendered empty and silent
- entity-escaping the braces did not help either: the compiler hands the
attribute over without decoding, so JSON.parse still failed
They are now hoisted into page state and bound, which is what the playground
has always done. The state initialiser uses JSON.parse rather than an object
literal because the parser reads a leading brace as the start of a block.
Navbar gains a real profile: a brand, links, a two-column dropdown panel and
calls to action, instead of the generic scaffold samples that made every demo
look identical and showed no dropdown at all.
MegaMenu closed while the pointer travelled to it. The panel sits below the
trigger and that offset belongs to neither element, so crossing it fired
mouseleave on the root. A descendant now covers the gap.
Scrollspy could not be exercised at all: its links pointed at ids that did not
exist on the page. The demo now ships real sections, in page flow because the
runtime observes against the viewport.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2963 lines
60 KiB
CSS
2963 lines
60 KiB
CSS
@import "tailwindcss";
|
|
@plugin "@iconify/tailwind4";
|
|
@source "../**/*.wrn";
|
|
@source "../../../packages/ui/components/*.wrn";
|
|
|
|
:root {
|
|
color-scheme: light dark;
|
|
}
|
|
|
|
html[data-ui-palette="violet"] {
|
|
--wire-color-primary: #7c3aed;
|
|
--wire-color-primary-hover: #6d28d9;
|
|
--wire-color-primary-contrast: #fff;
|
|
--wire-color-secondary: #db2777;
|
|
--wire-color-success: #059669;
|
|
--wire-color-warning: #d97706;
|
|
--wire-color-danger: #dc2626;
|
|
--wire-color-info: #2563eb;
|
|
}
|
|
|
|
html[data-ui-palette="blue"] {
|
|
--wire-color-primary: #2563eb;
|
|
--wire-color-primary-hover: #1d4ed8;
|
|
--wire-color-primary-contrast: #fff;
|
|
--wire-color-secondary: #475569;
|
|
--wire-color-success: #16a34a;
|
|
--wire-color-warning: #d97706;
|
|
--wire-color-danger: #dc2626;
|
|
--wire-color-info: #0284c7;
|
|
}
|
|
|
|
html[data-ui-palette="emerald"] {
|
|
--wire-color-primary: #059669;
|
|
--wire-color-primary-hover: #047857;
|
|
--wire-color-primary-contrast: #fff;
|
|
--wire-color-secondary: #0f766e;
|
|
--wire-color-success: #16a34a;
|
|
--wire-color-warning: #d97706;
|
|
--wire-color-danger: #dc2626;
|
|
--wire-color-info: #0284c7;
|
|
}
|
|
|
|
html[data-ui-palette="rose"] {
|
|
--wire-color-primary: #e11d48;
|
|
--wire-color-primary-hover: #be123c;
|
|
--wire-color-primary-contrast: #fff;
|
|
--wire-color-secondary: #9333ea;
|
|
--wire-color-success: #059669;
|
|
--wire-color-warning: #d97706;
|
|
--wire-color-danger: #dc2626;
|
|
--wire-color-info: #2563eb;
|
|
}
|
|
|
|
html[data-ui-palette="amber"] {
|
|
--wire-color-primary: #d97706;
|
|
--wire-color-primary-hover: #b45309;
|
|
--wire-color-primary-contrast: #fff;
|
|
--wire-color-secondary: #92400e;
|
|
--wire-color-success: #15803d;
|
|
--wire-color-warning: #d97706;
|
|
--wire-color-danger: #dc2626;
|
|
--wire-color-info: #0284c7;
|
|
}
|
|
|
|
html[data-ui-palette="cyan"] {
|
|
--wire-color-primary: #0891b2;
|
|
--wire-color-primary-hover: #0e7490;
|
|
--wire-color-primary-contrast: #fff;
|
|
--wire-color-secondary: #2563eb;
|
|
--wire-color-success: #16a34a;
|
|
--wire-color-warning: #d97706;
|
|
--wire-color-danger: #dc2626;
|
|
--wire-color-info: #0284c7;
|
|
}
|
|
|
|
html[data-ui-palette="slate"] {
|
|
--wire-color-primary: #475569;
|
|
--wire-color-primary-hover: #334155;
|
|
--wire-color-primary-contrast: #fff;
|
|
--wire-color-secondary: #0f172a;
|
|
--wire-color-success: #15803d;
|
|
--wire-color-warning: #b45309;
|
|
--wire-color-danger: #b91c1c;
|
|
--wire-color-info: #0369a1;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
color: var(--wire-color-text);
|
|
background: var(--wire-color-bg);
|
|
font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
|
|
}
|
|
|
|
html[data-ui-font="system"] body {
|
|
font-family: ui-sans-serif, system-ui, sans-serif;
|
|
}
|
|
|
|
html[data-ui-font="serif"] body {
|
|
font-family: Georgia, "Times New Roman", serif;
|
|
}
|
|
|
|
html[data-ui-font="mono"] body {
|
|
font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
|
|
}
|
|
|
|
html[data-ui-scale="compact"] {
|
|
font-size: 14px;
|
|
}
|
|
|
|
html[data-ui-scale="comfortable"] {
|
|
font-size: 17px;
|
|
}
|
|
|
|
html[data-ui-scale="large"] {
|
|
font-size: 19px;
|
|
}
|
|
|
|
html[data-ui-style="soft"] {
|
|
--wire-radius-sm: 0.85rem;
|
|
--wire-radius: 1.35rem;
|
|
--wire-shadow-1: 0 16px 40px color-mix(in srgb, var(--wire-color-primary) 10%, transparent);
|
|
}
|
|
|
|
html[data-ui-style="sharp"] {
|
|
--wire-radius-sm: 0.15rem;
|
|
--wire-radius: 0.25rem;
|
|
--wire-shadow-1: none;
|
|
}
|
|
|
|
html[data-ui-style="glass"] {
|
|
--wire-radius-sm: 0.8rem;
|
|
--wire-radius: 1.1rem;
|
|
--wire-shadow-1: 0 20px 50px color-mix(in srgb, var(--wire-color-primary) 12%, transparent);
|
|
}
|
|
|
|
html[data-ui-style="glass"] :is(.wire-next, .showcase-card, .catalog-card) {
|
|
background: color-mix(in srgb, var(--wire-color-surface) 76%, transparent);
|
|
backdrop-filter: blur(18px);
|
|
}
|
|
|
|
.showcase-shell {
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.showcase-header {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 70;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
padding: 0.75rem clamp(1rem, 3vw, 2.5rem);
|
|
border-bottom: 1px solid var(--wire-color-border);
|
|
background: color-mix(in srgb, var(--wire-color-surface) 92%, transparent);
|
|
backdrop-filter: blur(16px);
|
|
}
|
|
|
|
.showcase-header-start,
|
|
.showcase-header-end {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.9rem;
|
|
}
|
|
|
|
.showcase-brand {
|
|
display: inline-flex;
|
|
flex: 0 0 auto;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
color: var(--wire-color-text);
|
|
font-weight: 800;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.showcase-nav {
|
|
display: flex;
|
|
flex: 1;
|
|
gap: 0.25rem;
|
|
overflow-x: auto;
|
|
scrollbar-width: thin;
|
|
}
|
|
|
|
.showcase-nav a,
|
|
.showcase-theme {
|
|
min-height: 2.5rem;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
white-space: nowrap;
|
|
padding: 0.5rem 0.75rem;
|
|
border: 0;
|
|
border-radius: var(--wire-radius-sm);
|
|
color: var(--wire-color-muted);
|
|
background: transparent;
|
|
font: inherit;
|
|
font-size: 0.82rem;
|
|
font-weight: 700;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.showcase-nav a:hover,
|
|
.showcase-theme:hover {
|
|
color: var(--wire-color-primary);
|
|
background: var(--wire-color-surface-2);
|
|
}
|
|
|
|
.showcase-main {
|
|
width: min(100% - 2rem, 100rem);
|
|
margin-inline: auto;
|
|
padding-block: clamp(2rem, 5vw, 4rem);
|
|
}
|
|
|
|
.docs-shell:has(.page-home, .page-marketplace) .docs-directory {
|
|
display: none;
|
|
}
|
|
|
|
.docs-shell:has(.page-home, .page-marketplace) {
|
|
display: block;
|
|
}
|
|
|
|
.docs-shell:has(.page-home, .page-marketplace) .showcase-main {
|
|
width: min(100% - 2rem, 90rem);
|
|
}
|
|
|
|
.design-panel {
|
|
position: fixed;
|
|
top: 4.75rem;
|
|
right: 1rem;
|
|
z-index: 120;
|
|
display: grid;
|
|
width: min(23rem, calc(100vw - 2rem));
|
|
gap: 1rem;
|
|
padding: 1.25rem;
|
|
border: 1px solid var(--wire-color-border);
|
|
border-radius: var(--wire-radius);
|
|
background: var(--wire-color-surface);
|
|
box-shadow: 0 2rem 5rem rgb(0 0 0 / 25%);
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transform: translateY(-0.75rem);
|
|
transition: 180ms ease;
|
|
}
|
|
|
|
html[data-design-panel-open] .design-panel {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transform: none;
|
|
}
|
|
|
|
.design-panel header,
|
|
.design-panel label {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.design-panel header div {
|
|
display: grid;
|
|
gap: 0.2rem;
|
|
}
|
|
|
|
.design-panel header span {
|
|
color: var(--wire-color-muted);
|
|
font-size: 0.72rem;
|
|
}
|
|
|
|
.design-panel header button,
|
|
.design-reset {
|
|
border: 1px solid var(--wire-color-border);
|
|
border-radius: var(--wire-radius-sm);
|
|
color: var(--wire-color-text);
|
|
background: var(--wire-color-surface-2);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.design-panel header button {
|
|
display: grid;
|
|
width: 2.25rem;
|
|
height: 2.25rem;
|
|
place-items: center;
|
|
}
|
|
|
|
.design-panel label > span {
|
|
font-size: 0.82rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.design-panel select {
|
|
width: 11rem;
|
|
padding: 0.55rem 0.7rem;
|
|
border: 1px solid var(--wire-color-border);
|
|
border-radius: var(--wire-radius-sm);
|
|
color: var(--wire-color-text);
|
|
background: var(--wire-color-bg);
|
|
font: inherit;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.design-reset {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
min-height: 2.6rem;
|
|
font: inherit;
|
|
font-size: 0.8rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.docs-directory-guides > strong {
|
|
display: block;
|
|
padding-inline: 0.5rem;
|
|
color: var(--wire-color-muted);
|
|
font-size: 0.65rem;
|
|
font-weight: 800;
|
|
letter-spacing: 0.09em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.docs-directory-guides small {
|
|
margin-left: 0.35rem;
|
|
padding: 0.1rem 0.35rem;
|
|
border: 1px solid var(--wire-color-success);
|
|
border-radius: 999px;
|
|
color: var(--wire-color-success);
|
|
font-size: 0.58rem;
|
|
}
|
|
|
|
.page-home {
|
|
padding-top: clamp(2rem, 7vw, 6rem);
|
|
}
|
|
|
|
.showcase-hero--home {
|
|
max-width: 62rem;
|
|
margin-inline: auto;
|
|
text-align: center;
|
|
}
|
|
|
|
.showcase-hero--home .showcase-description {
|
|
margin-inline: auto;
|
|
}
|
|
|
|
.home-actions,
|
|
.home-install {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.home-install {
|
|
width: fit-content;
|
|
margin: 0.5rem auto 0;
|
|
padding: 0.7rem 0.8rem;
|
|
border: 1px solid var(--wire-color-border);
|
|
border-radius: var(--wire-radius-sm);
|
|
background: var(--wire-color-surface);
|
|
}
|
|
|
|
.home-install span {
|
|
color: var(--wire-color-primary);
|
|
}
|
|
|
|
.home-install button {
|
|
display: grid;
|
|
border: 0;
|
|
color: var(--wire-color-muted);
|
|
background: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.home-product-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 1rem;
|
|
margin-block: clamp(3rem, 7vw, 6rem);
|
|
}
|
|
|
|
.home-product-grid article {
|
|
display: grid;
|
|
gap: 0.8rem;
|
|
padding: 1.5rem;
|
|
border: 1px solid var(--wire-color-border);
|
|
border-radius: var(--wire-radius);
|
|
background: var(--wire-color-surface);
|
|
}
|
|
|
|
.home-product-grid article > span,
|
|
.home-product-grid a {
|
|
color: var(--wire-color-primary);
|
|
}
|
|
|
|
.home-product-grid p {
|
|
margin: 0;
|
|
color: var(--wire-color-muted);
|
|
}
|
|
|
|
.home-product-grid a {
|
|
font-size: 0.8rem;
|
|
font-weight: 800;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.page-docs {
|
|
max-width: 52rem;
|
|
}
|
|
|
|
.docs-intro {
|
|
padding-bottom: 2rem;
|
|
border-bottom: 1px solid var(--wire-color-border);
|
|
}
|
|
|
|
.docs-intro h1,
|
|
.page-marketplace h1 {
|
|
margin: 0.5rem 0;
|
|
font-size: clamp(2rem, 4vw, 3.5rem);
|
|
letter-spacing: -0.045em;
|
|
}
|
|
|
|
.docs-intro p,
|
|
.page-marketplace > header p,
|
|
.guide-section p {
|
|
color: var(--wire-color-muted);
|
|
}
|
|
|
|
.guide-section {
|
|
padding-block: 2.4rem;
|
|
border-bottom: 1px solid var(--wire-color-border);
|
|
}
|
|
|
|
.guide-section h2 {
|
|
margin: 0 0 0.65rem;
|
|
}
|
|
|
|
.guide-section pre {
|
|
padding: 1rem;
|
|
overflow: auto;
|
|
border: 1px solid var(--wire-color-border);
|
|
border-radius: var(--wire-radius-sm);
|
|
background: var(--wire-color-surface-2);
|
|
}
|
|
|
|
.guide-next {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 1rem;
|
|
padding-top: 2.5rem;
|
|
}
|
|
|
|
.guide-next a {
|
|
padding: 1rem;
|
|
border: 1px solid var(--wire-color-border);
|
|
border-radius: var(--wire-radius-sm);
|
|
color: var(--wire-color-text);
|
|
background: var(--wire-color-surface);
|
|
font-size: 0.82rem;
|
|
font-weight: 800;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.guide-next a:hover {
|
|
border-color: var(--wire-color-primary);
|
|
color: var(--wire-color-primary);
|
|
}
|
|
|
|
.market-tabs {
|
|
display: flex;
|
|
gap: 2rem;
|
|
margin: -1rem 0 4rem;
|
|
padding: 1rem 0;
|
|
overflow-x: auto;
|
|
border-bottom: 1px solid var(--wire-color-border);
|
|
}
|
|
|
|
.market-tabs a {
|
|
flex: 0 0 auto;
|
|
color: var(--wire-color-muted);
|
|
font-size: 0.78rem;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.market-tabs a:first-child {
|
|
color: var(--wire-color-text);
|
|
font-weight: 800;
|
|
}
|
|
|
|
.page-marketplace > header {
|
|
max-width: 48rem;
|
|
margin-bottom: 2.5rem;
|
|
}
|
|
|
|
.market-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 1.4rem;
|
|
}
|
|
|
|
.market-card {
|
|
overflow: hidden;
|
|
border: 1px solid var(--wire-color-border);
|
|
border-radius: var(--wire-radius);
|
|
background: var(--wire-color-surface);
|
|
}
|
|
|
|
.market-preview {
|
|
display: grid;
|
|
min-height: 12rem;
|
|
place-items: center;
|
|
color: var(--wire-color-primary);
|
|
background:
|
|
radial-gradient(
|
|
circle at 50% 100%,
|
|
color-mix(in srgb, var(--wire-color-primary) 25%, transparent),
|
|
transparent 60%
|
|
),
|
|
var(--wire-color-bg);
|
|
}
|
|
|
|
.market-preview div {
|
|
display: grid;
|
|
width: 45%;
|
|
gap: 0.4rem;
|
|
}
|
|
|
|
.market-preview i {
|
|
height: 0.35rem;
|
|
border-radius: 1rem;
|
|
background: var(--wire-color-border);
|
|
}
|
|
|
|
.market-card > div:last-child {
|
|
padding: 1.1rem;
|
|
}
|
|
|
|
.market-card small,
|
|
.template-card small {
|
|
color: var(--wire-color-primary);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.market-card h2 {
|
|
margin: 0.35rem 0;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.market-card p,
|
|
.template-card p {
|
|
color: var(--wire-color-muted);
|
|
font-size: 0.78rem;
|
|
}
|
|
|
|
.market-card a,
|
|
.template-card a {
|
|
color: var(--wire-color-text);
|
|
font-size: 0.75rem;
|
|
font-weight: 800;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.template-list {
|
|
display: grid;
|
|
gap: 2rem;
|
|
}
|
|
|
|
.template-card {
|
|
display: grid;
|
|
grid-template-columns: minmax(16rem, 0.8fr) minmax(24rem, 1.8fr);
|
|
min-height: 20rem;
|
|
gap: 2rem;
|
|
padding: 2rem;
|
|
overflow: hidden;
|
|
border: 1px solid var(--wire-color-border);
|
|
border-radius: var(--wire-radius);
|
|
background: var(--wire-color-surface-2);
|
|
}
|
|
|
|
.template-card h2 {
|
|
margin: 1rem 0 0.5rem;
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.template-scenes {
|
|
position: relative;
|
|
min-height: 16rem;
|
|
}
|
|
|
|
.template-scenes i {
|
|
position: absolute;
|
|
width: 55%;
|
|
height: 85%;
|
|
border: 1px solid var(--wire-color-border);
|
|
border-radius: 0.6rem;
|
|
background:
|
|
linear-gradient(90deg, var(--wire-color-surface) 18%, transparent 18%),
|
|
repeating-linear-gradient(0deg, transparent 0 1.4rem, var(--wire-color-border) 1.45rem 1.5rem),
|
|
var(--wire-color-bg);
|
|
box-shadow: var(--wire-shadow-1);
|
|
}
|
|
|
|
.template-scenes i:nth-child(1) {
|
|
left: 0;
|
|
top: 8%;
|
|
}
|
|
|
|
.template-scenes i:nth-child(2) {
|
|
left: 27%;
|
|
top: 0;
|
|
}
|
|
|
|
.template-scenes i:nth-child(3) {
|
|
right: 0;
|
|
top: 12%;
|
|
}
|
|
|
|
@media (max-width: 980px) {
|
|
.market-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
.template-card {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 700px) {
|
|
.home-product-grid,
|
|
.market-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.showcase-header .docs-search {
|
|
display: none;
|
|
}
|
|
|
|
.market-tabs {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.guide-next {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.showcase-hero {
|
|
display: grid;
|
|
gap: 1rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.showcase-eyebrow {
|
|
color: var(--wire-color-primary);
|
|
font-size: 0.75rem;
|
|
font-weight: 800;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.showcase-title {
|
|
margin: 0;
|
|
font-size: clamp(2rem, 5vw, 4.5rem);
|
|
line-height: 0.98;
|
|
letter-spacing: -0.05em;
|
|
}
|
|
|
|
.showcase-description {
|
|
max-width: 52rem;
|
|
margin: 0;
|
|
color: var(--wire-color-muted);
|
|
font-size: 1.05rem;
|
|
}
|
|
|
|
.showcase-stats,
|
|
.showcase-category-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
|
|
gap: 1rem;
|
|
}
|
|
|
|
.showcase-stat,
|
|
.showcase-category {
|
|
padding: 1.25rem;
|
|
border: 1px solid var(--wire-color-border);
|
|
border-radius: var(--wire-radius);
|
|
color: var(--wire-color-text);
|
|
background: var(--wire-color-surface);
|
|
box-shadow: var(--wire-shadow-1);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.showcase-stat strong {
|
|
display: block;
|
|
color: var(--wire-color-primary);
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.showcase-category:hover {
|
|
border-color: var(--wire-color-primary);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.showcase-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr));
|
|
align-items: start;
|
|
gap: 1.25rem;
|
|
}
|
|
|
|
.showcase-card {
|
|
min-width: 0;
|
|
overflow: clip;
|
|
border: 1px solid var(--wire-color-border);
|
|
border-radius: var(--wire-radius);
|
|
background: var(--wire-color-surface);
|
|
box-shadow: var(--wire-shadow-1);
|
|
}
|
|
|
|
.showcase-card:target {
|
|
outline: 3px solid color-mix(in srgb, var(--wire-color-primary) 40%, transparent);
|
|
outline-offset: 3px;
|
|
}
|
|
|
|
.showcase-card-header {
|
|
display: flex;
|
|
align-items: start;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
padding: 1rem 1.1rem;
|
|
border-bottom: 1px solid var(--wire-color-border);
|
|
background: var(--wire-color-surface-2);
|
|
}
|
|
|
|
.showcase-card-title {
|
|
margin: 0;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.showcase-card-purpose {
|
|
margin: 0.3rem 0 0;
|
|
color: var(--wire-color-muted);
|
|
font-size: 0.78rem;
|
|
}
|
|
|
|
.showcase-card-count {
|
|
flex: 0 0 auto;
|
|
color: var(--wire-color-primary);
|
|
font-size: 0.72rem;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.showcase-stage {
|
|
min-height: 10rem;
|
|
overflow: auto;
|
|
padding: 1.25rem;
|
|
background:
|
|
linear-gradient(var(--wire-color-border) 1px, transparent 1px),
|
|
linear-gradient(90deg, var(--wire-color-border) 1px, transparent 1px), var(--wire-color-bg);
|
|
background-size: 1.5rem 1.5rem;
|
|
}
|
|
|
|
.showcase-instance {
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* Keep overlay/fixed components inspectable inside their card instead of
|
|
covering the complete catalog page. */
|
|
.showcase-stage .fixed,
|
|
.showcase-stage [class*="fixed"] {
|
|
position: relative !important;
|
|
inset: auto !important;
|
|
z-index: auto !important;
|
|
max-height: 24rem;
|
|
}
|
|
|
|
.showcase-stage .min-h-screen {
|
|
min-height: 14rem !important;
|
|
}
|
|
|
|
.showcase-slot {
|
|
padding: 0.75rem;
|
|
border: 1px dashed var(--wire-color-border);
|
|
border-radius: var(--wire-radius-sm);
|
|
color: var(--wire-color-muted);
|
|
background: var(--wire-color-surface-2);
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
.showcase-header {
|
|
align-items: stretch;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.showcase-brand {
|
|
flex: 1;
|
|
}
|
|
|
|
.showcase-nav {
|
|
order: 3;
|
|
flex-basis: 100%;
|
|
}
|
|
|
|
.showcase-main {
|
|
width: min(100% - 1rem, 100rem);
|
|
}
|
|
}
|
|
|
|
/* Documentation shell ----------------------------------------------------- */
|
|
.showcase-header {
|
|
z-index: 100;
|
|
min-height: 4rem;
|
|
justify-content: space-between;
|
|
padding: 0.65rem 1.25rem;
|
|
border-bottom: 1px solid var(--wire-color-border);
|
|
background: color-mix(in srgb, var(--wire-color-bg) 94%, transparent);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.showcase-header-start,
|
|
.showcase-header-end {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.showcase-brand {
|
|
gap: 0.6rem;
|
|
font-size: 0.86rem;
|
|
font-weight: 850;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.showcase-brand-mark {
|
|
display: grid;
|
|
width: 1.8rem;
|
|
height: 1.8rem;
|
|
place-items: center;
|
|
border-radius: 0.5rem;
|
|
color: var(--wire-color-primary-contrast);
|
|
background: var(--wire-color-primary);
|
|
}
|
|
|
|
.showcase-nav {
|
|
gap: 0.15rem;
|
|
}
|
|
|
|
.showcase-nav a {
|
|
padding: 0.48rem 0.6rem;
|
|
border-radius: 0.45rem;
|
|
color: var(--wire-color-muted);
|
|
font-size: 0.76rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.showcase-nav a:hover {
|
|
color: var(--wire-color-text);
|
|
background: var(--wire-color-surface-2);
|
|
}
|
|
|
|
.docs-search {
|
|
display: flex;
|
|
width: min(18rem, 25vw);
|
|
min-height: 2.25rem;
|
|
align-items: center;
|
|
gap: 0.55rem;
|
|
padding: 0.35rem 0.45rem 0.35rem 0.7rem;
|
|
border: 1px solid var(--wire-color-border);
|
|
border-radius: 0.65rem;
|
|
color: var(--wire-color-muted);
|
|
background: var(--wire-color-surface-2);
|
|
}
|
|
|
|
.docs-search input {
|
|
min-width: 0;
|
|
flex: 1;
|
|
border: 0;
|
|
outline: 0;
|
|
color: var(--wire-color-text);
|
|
background: transparent;
|
|
font: inherit;
|
|
font-size: 0.72rem;
|
|
}
|
|
|
|
.docs-search kbd {
|
|
padding: 0.18rem 0.35rem;
|
|
border: 1px solid var(--wire-color-border);
|
|
border-radius: 0.35rem;
|
|
color: var(--wire-color-muted);
|
|
background: var(--wire-color-surface);
|
|
font-size: 0.6rem;
|
|
}
|
|
|
|
.showcase-github,
|
|
.showcase-theme,
|
|
.docs-menu-toggle {
|
|
display: grid;
|
|
width: 2.25rem;
|
|
height: 2.25rem;
|
|
place-items: center;
|
|
padding: 0;
|
|
border: 1px solid transparent;
|
|
border-radius: 0.6rem;
|
|
color: var(--wire-color-muted);
|
|
background: transparent;
|
|
}
|
|
|
|
.showcase-github:hover,
|
|
.showcase-theme:hover,
|
|
.docs-menu-toggle:hover {
|
|
color: var(--wire-color-text);
|
|
border-color: var(--wire-color-border);
|
|
background: var(--wire-color-surface-2);
|
|
}
|
|
|
|
.docs-menu-toggle {
|
|
display: none;
|
|
}
|
|
|
|
.docs-shell {
|
|
display: grid;
|
|
min-height: calc(100vh - 4rem);
|
|
grid-template-columns: 17rem minmax(0, 1fr);
|
|
}
|
|
|
|
.docs-directory {
|
|
position: sticky;
|
|
top: 4rem;
|
|
height: calc(100vh - 4rem);
|
|
overflow: auto;
|
|
padding: 1.5rem 1rem 3rem;
|
|
border-right: 1px solid var(--wire-color-border);
|
|
background: var(--wire-color-bg);
|
|
scrollbar-width: thin;
|
|
}
|
|
|
|
.docs-directory-intro {
|
|
display: grid;
|
|
gap: 0.25rem;
|
|
margin-bottom: 1.5rem;
|
|
padding-inline: 0.45rem;
|
|
}
|
|
|
|
.docs-directory-intro strong {
|
|
font-size: 0.82rem;
|
|
}
|
|
|
|
.docs-directory-intro span {
|
|
color: var(--wire-color-muted);
|
|
font-size: 0.66rem;
|
|
}
|
|
|
|
.docs-directory nav,
|
|
.docs-directory-group,
|
|
.docs-directory-group > div {
|
|
display: grid;
|
|
}
|
|
|
|
.docs-directory nav {
|
|
gap: 1.4rem;
|
|
}
|
|
|
|
.docs-directory-group {
|
|
gap: 0.4rem;
|
|
}
|
|
|
|
.docs-directory-group > div {
|
|
gap: 0.1rem;
|
|
}
|
|
|
|
.docs-directory-heading {
|
|
padding-inline: 0.5rem;
|
|
color: var(--wire-color-muted);
|
|
font-size: 0.65rem;
|
|
font-weight: 800;
|
|
letter-spacing: 0.09em;
|
|
text-decoration: none;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.docs-directory-group > div > a {
|
|
overflow: hidden;
|
|
padding: 0.42rem 0.55rem;
|
|
border-radius: 0.45rem;
|
|
color: var(--wire-color-muted);
|
|
font-size: 0.72rem;
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.docs-directory-group > div > a:hover,
|
|
.docs-directory-group > div > a[aria-current="page"] {
|
|
color: var(--wire-color-text);
|
|
background: var(--wire-color-surface-2);
|
|
}
|
|
|
|
.docs-directory-group > div > a[aria-current="page"] {
|
|
box-shadow: inset 2px 0 var(--wire-color-primary);
|
|
}
|
|
|
|
.docs-directory-empty {
|
|
margin: 1rem 0.5rem;
|
|
color: var(--wire-color-muted);
|
|
font-size: 0.72rem;
|
|
}
|
|
|
|
.showcase-main {
|
|
width: 100%;
|
|
max-width: 100rem;
|
|
margin: 0 auto;
|
|
padding: clamp(1.5rem, 3vw, 3rem);
|
|
}
|
|
|
|
.docs-breadcrumbs {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.detail-hero {
|
|
grid-template-columns: 1fr;
|
|
gap: 1rem;
|
|
margin-bottom: 3rem;
|
|
padding: 0;
|
|
border: 0;
|
|
border-radius: 0;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.detail-hero-copy {
|
|
max-width: 52rem;
|
|
gap: 0.85rem;
|
|
}
|
|
|
|
.detail-hero h1 {
|
|
font-size: clamp(2.4rem, 5vw, 4rem);
|
|
line-height: 1;
|
|
letter-spacing: -0.055em;
|
|
}
|
|
|
|
.detail-hero p {
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.detail-hero-icon {
|
|
display: none;
|
|
}
|
|
|
|
.detail-badges span,
|
|
.category-meta span {
|
|
padding: 0.32rem 0.55rem;
|
|
font-size: 0.64rem;
|
|
}
|
|
|
|
.detail-layout {
|
|
grid-template-columns: minmax(0, 1fr) 11rem;
|
|
gap: clamp(2rem, 4vw, 4rem);
|
|
}
|
|
|
|
.detail-toc {
|
|
padding-left: 0;
|
|
border-left: 0;
|
|
}
|
|
|
|
.detail-toc strong {
|
|
color: var(--wire-color-muted);
|
|
font-size: 0.64rem;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.detail-toc a {
|
|
padding: 0.3rem 0;
|
|
font-size: 0.68rem;
|
|
}
|
|
|
|
.playground-workbench,
|
|
.demo-case,
|
|
.docs-table-wrap {
|
|
border-radius: 0.85rem;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.playground-section {
|
|
margin-bottom: 4rem;
|
|
}
|
|
|
|
.playground-workbench {
|
|
grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr);
|
|
}
|
|
|
|
.demo-case-header {
|
|
padding: 1.15rem 1.25rem;
|
|
}
|
|
|
|
.detail-section-heading h2 {
|
|
letter-spacing: -0.035em;
|
|
}
|
|
|
|
@media (max-width: 1180px) {
|
|
.showcase-nav {
|
|
display: none;
|
|
}
|
|
|
|
.detail-layout {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.detail-aside {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.docs-menu-toggle {
|
|
display: grid;
|
|
}
|
|
|
|
.docs-shell {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.docs-directory {
|
|
position: fixed;
|
|
z-index: 90;
|
|
inset: 4rem auto 0 0;
|
|
width: min(20rem, 86vw);
|
|
height: auto;
|
|
transform: translateX(-105%);
|
|
transition: transform 180ms ease;
|
|
box-shadow: var(--wire-shadow-2);
|
|
}
|
|
|
|
[data-docs-menu-open] .docs-directory {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
.docs-search {
|
|
width: min(15rem, 36vw);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.showcase-header {
|
|
padding-inline: 0.75rem;
|
|
}
|
|
|
|
.showcase-brand {
|
|
font-size: 0;
|
|
}
|
|
|
|
.showcase-brand-mark {
|
|
font-size: initial;
|
|
}
|
|
|
|
.docs-search {
|
|
width: min(12rem, 44vw);
|
|
}
|
|
|
|
.docs-search kbd,
|
|
.showcase-github {
|
|
display: none;
|
|
}
|
|
|
|
.showcase-main {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.playground-workbench {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
scroll-behavior: auto !important;
|
|
transition-duration: 0.01ms !important;
|
|
animation-duration: 0.01ms !important;
|
|
}
|
|
}
|
|
|
|
/* --- Modern documentation experience ----------------------------------- */
|
|
|
|
body {
|
|
background:
|
|
radial-gradient(
|
|
circle at 10% -10%,
|
|
color-mix(in srgb, var(--wire-color-primary) 16%, transparent),
|
|
transparent 32rem
|
|
),
|
|
radial-gradient(
|
|
circle at 92% 8%,
|
|
color-mix(in srgb, var(--wire-color-info) 12%, transparent),
|
|
transparent 28rem
|
|
),
|
|
var(--wire-color-bg);
|
|
}
|
|
|
|
.showcase-header {
|
|
min-height: 4.5rem;
|
|
padding-inline: clamp(1rem, 4vw, 4rem);
|
|
border-color: color-mix(in srgb, var(--wire-color-border) 72%, transparent);
|
|
box-shadow: 0 1px 0 color-mix(in srgb, var(--wire-color-surface) 80%, transparent);
|
|
}
|
|
|
|
.showcase-brand {
|
|
font-size: 0.94rem;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.showcase-main {
|
|
width: min(100% - 2rem, 92rem);
|
|
padding-block: clamp(2.5rem, 6vw, 6rem);
|
|
}
|
|
|
|
.showcase-hero {
|
|
position: relative;
|
|
max-width: 68rem;
|
|
gap: 1.25rem;
|
|
margin-bottom: clamp(3rem, 7vw, 6rem);
|
|
}
|
|
|
|
.showcase-hero--home {
|
|
max-width: 76rem;
|
|
padding-block: clamp(2rem, 6vw, 5rem);
|
|
}
|
|
|
|
.showcase-eyebrow,
|
|
.demo-case-eyebrow,
|
|
.catalog-card-category,
|
|
.detail-section-heading > span,
|
|
.home-section-heading > span {
|
|
display: inline-flex;
|
|
width: max-content;
|
|
align-items: center;
|
|
gap: 0.45rem;
|
|
color: var(--wire-color-primary);
|
|
font-size: 0.72rem;
|
|
font-weight: 850;
|
|
letter-spacing: 0.15em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.showcase-eyebrow::before {
|
|
width: 1.75rem;
|
|
height: 2px;
|
|
border-radius: 999px;
|
|
background: var(--wire-color-primary);
|
|
content: "";
|
|
}
|
|
|
|
.showcase-title {
|
|
max-width: 72rem;
|
|
font-size: clamp(3rem, 8vw, 7.5rem);
|
|
font-weight: 850;
|
|
line-height: 0.9;
|
|
letter-spacing: -0.075em;
|
|
}
|
|
|
|
.showcase-title em {
|
|
color: var(--wire-color-primary);
|
|
font-family: Georgia, "Times New Roman", serif;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.showcase-hero--category .showcase-title {
|
|
font-size: clamp(3.25rem, 7vw, 6.5rem);
|
|
}
|
|
|
|
.showcase-description {
|
|
max-width: 59rem;
|
|
font-size: clamp(1rem, 2vw, 1.25rem);
|
|
line-height: 1.75;
|
|
}
|
|
|
|
.home-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.75rem;
|
|
margin-top: 0.75rem;
|
|
}
|
|
|
|
.home-primary-action,
|
|
.home-secondary-action {
|
|
display: inline-flex;
|
|
min-height: 3.25rem;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.65rem;
|
|
padding: 0.8rem 1.2rem;
|
|
border: 1px solid var(--wire-color-border);
|
|
border-radius: 0.85rem;
|
|
color: var(--wire-color-text);
|
|
background: var(--wire-color-surface);
|
|
font-size: 0.9rem;
|
|
font-weight: 800;
|
|
text-decoration: none;
|
|
box-shadow: var(--wire-shadow-1);
|
|
transition:
|
|
transform 180ms ease,
|
|
box-shadow 180ms ease;
|
|
}
|
|
|
|
.home-primary-action {
|
|
border-color: var(--wire-color-primary);
|
|
color: var(--wire-color-primary-contrast);
|
|
background: var(--wire-color-primary);
|
|
box-shadow: 0 1rem 2.5rem color-mix(in srgb, var(--wire-color-primary) 24%, transparent);
|
|
}
|
|
|
|
.home-primary-action:hover,
|
|
.home-secondary-action:hover {
|
|
transform: translateY(-2px);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.showcase-stats {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 0;
|
|
overflow: hidden;
|
|
margin-bottom: clamp(4rem, 8vw, 7rem);
|
|
border: 1px solid var(--wire-color-border);
|
|
border-radius: 1.5rem;
|
|
background: var(--wire-color-surface);
|
|
box-shadow: var(--wire-shadow-1);
|
|
}
|
|
|
|
.showcase-stat {
|
|
border: 0;
|
|
border-right: 1px solid var(--wire-color-border);
|
|
border-radius: 0;
|
|
padding: clamp(1.25rem, 3vw, 2rem);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.showcase-stat:last-child {
|
|
border-right: 0;
|
|
}
|
|
|
|
.showcase-stat strong {
|
|
font-size: clamp(2rem, 4vw, 3.25rem);
|
|
letter-spacing: -0.06em;
|
|
}
|
|
|
|
.showcase-stat span {
|
|
color: var(--wire-color-muted);
|
|
font-size: 0.8rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.home-categories {
|
|
display: grid;
|
|
gap: 2rem;
|
|
}
|
|
|
|
.home-section-heading,
|
|
.detail-section-heading {
|
|
display: grid;
|
|
max-width: 48rem;
|
|
gap: 0.6rem;
|
|
}
|
|
|
|
.home-section-heading h2,
|
|
.detail-section-heading h2 {
|
|
margin: 0;
|
|
font-size: clamp(2rem, 4vw, 3.5rem);
|
|
line-height: 1;
|
|
letter-spacing: -0.055em;
|
|
}
|
|
|
|
.detail-section-heading p {
|
|
margin: 0;
|
|
color: var(--wire-color-muted);
|
|
}
|
|
|
|
.home-category-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 0.9rem;
|
|
}
|
|
|
|
.home-category {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-columns: auto 1fr auto;
|
|
align-items: center;
|
|
gap: 1.25rem;
|
|
min-height: 8rem;
|
|
overflow: hidden;
|
|
padding: 1.5rem;
|
|
border: 1px solid var(--wire-color-border);
|
|
border-radius: 1.25rem;
|
|
color: var(--wire-color-text);
|
|
background: linear-gradient(
|
|
135deg,
|
|
color-mix(in srgb, var(--wire-color-primary) 7%, var(--wire-color-surface)),
|
|
var(--wire-color-surface)
|
|
);
|
|
text-decoration: none;
|
|
box-shadow: var(--wire-shadow-1);
|
|
transition:
|
|
transform 180ms ease,
|
|
border-color 180ms ease,
|
|
box-shadow 180ms ease;
|
|
}
|
|
|
|
.home-category:hover {
|
|
border-color: color-mix(in srgb, var(--wire-color-primary) 55%, var(--wire-color-border));
|
|
transform: translateY(-3px);
|
|
box-shadow: var(--wire-shadow-2);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.home-category-index {
|
|
color: color-mix(in srgb, var(--wire-color-primary) 65%, var(--wire-color-muted));
|
|
font-family: ui-monospace, monospace;
|
|
font-size: 0.72rem;
|
|
}
|
|
|
|
.home-category strong {
|
|
display: block;
|
|
font-size: 1.2rem;
|
|
letter-spacing: -0.025em;
|
|
}
|
|
|
|
.home-category p {
|
|
margin: 0.3rem 0 0;
|
|
color: var(--wire-color-muted);
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.category-meta,
|
|
.detail-badges {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.category-meta span,
|
|
.detail-badges span {
|
|
padding: 0.42rem 0.7rem;
|
|
border: 1px solid var(--wire-color-border);
|
|
border-radius: 999px;
|
|
color: var(--wire-color-muted);
|
|
background: color-mix(in srgb, var(--wire-color-surface) 82%, transparent);
|
|
font-size: 0.72rem;
|
|
font-weight: 750;
|
|
}
|
|
|
|
.catalog-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
align-items: start;
|
|
gap: 1.25rem;
|
|
}
|
|
|
|
.catalog-card {
|
|
overflow: hidden;
|
|
border: 1px solid var(--wire-color-border);
|
|
border-radius: 1.4rem;
|
|
background: var(--wire-color-surface);
|
|
box-shadow: var(--wire-shadow-1);
|
|
transition:
|
|
transform 200ms ease,
|
|
border-color 200ms ease,
|
|
box-shadow 200ms ease;
|
|
}
|
|
|
|
.catalog-card:hover {
|
|
border-color: color-mix(in srgb, var(--wire-color-primary) 45%, var(--wire-color-border));
|
|
transform: translateY(-4px);
|
|
box-shadow: var(--wire-shadow-2);
|
|
}
|
|
|
|
.catalog-card-preview {
|
|
position: relative;
|
|
display: grid;
|
|
min-height: 18rem;
|
|
place-items: center;
|
|
overflow: hidden;
|
|
padding: 2rem;
|
|
border-bottom: 1px solid var(--wire-color-border);
|
|
color: var(--wire-color-text);
|
|
background:
|
|
radial-gradient(
|
|
circle at 50% 20%,
|
|
color-mix(in srgb, var(--wire-color-primary) 14%, transparent),
|
|
transparent 58%
|
|
),
|
|
linear-gradient(135deg, var(--wire-color-bg), var(--wire-color-surface-2));
|
|
text-decoration: none;
|
|
}
|
|
|
|
.catalog-card-preview::before {
|
|
position: absolute;
|
|
inset: 0;
|
|
opacity: 0.38;
|
|
background-image:
|
|
linear-gradient(var(--wire-color-border) 1px, transparent 1px),
|
|
linear-gradient(90deg, var(--wire-color-border) 1px, transparent 1px);
|
|
background-size: 2rem 2rem;
|
|
mask-image: linear-gradient(to bottom, black, transparent);
|
|
content: "";
|
|
}
|
|
|
|
.catalog-card-stage {
|
|
position: relative;
|
|
z-index: 1;
|
|
width: min(100%, 32rem);
|
|
}
|
|
|
|
.catalog-card-preview .fixed,
|
|
.catalog-card-preview [class*="fixed"] {
|
|
position: relative !important;
|
|
inset: auto !important;
|
|
z-index: auto !important;
|
|
max-height: 16rem;
|
|
}
|
|
|
|
.catalog-card-body {
|
|
display: grid;
|
|
min-height: 13rem;
|
|
align-content: space-between;
|
|
gap: 1.25rem;
|
|
padding: 1.35rem;
|
|
}
|
|
|
|
.catalog-card-body h2 {
|
|
margin: 0.45rem 0 0;
|
|
font-size: 1.25rem;
|
|
letter-spacing: -0.035em;
|
|
}
|
|
|
|
.catalog-card-body p {
|
|
margin: 0.55rem 0 0;
|
|
color: var(--wire-color-muted);
|
|
font-size: 0.83rem;
|
|
line-height: 1.65;
|
|
}
|
|
|
|
.catalog-card-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
padding-top: 1rem;
|
|
border-top: 1px solid var(--wire-color-border);
|
|
font-size: 0.72rem;
|
|
}
|
|
|
|
.catalog-card-footer > span {
|
|
color: var(--wire-color-muted);
|
|
}
|
|
|
|
.catalog-card-footer a {
|
|
color: var(--wire-color-primary);
|
|
font-weight: 800;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.docs-breadcrumbs {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.6rem;
|
|
margin-bottom: 2rem;
|
|
color: var(--wire-color-muted);
|
|
font-size: 0.78rem;
|
|
}
|
|
|
|
.docs-breadcrumbs a {
|
|
color: var(--wire-color-muted);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.docs-breadcrumbs a:hover {
|
|
color: var(--wire-color-primary);
|
|
}
|
|
|
|
.detail-hero {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
align-items: center;
|
|
gap: 3rem;
|
|
margin-bottom: clamp(4rem, 8vw, 7rem);
|
|
padding: clamp(2rem, 5vw, 4.5rem);
|
|
border: 1px solid var(--wire-color-border);
|
|
border-radius: 2rem;
|
|
background:
|
|
radial-gradient(
|
|
circle at 86% 15%,
|
|
color-mix(in srgb, var(--wire-color-primary) 18%, transparent),
|
|
transparent 22rem
|
|
),
|
|
linear-gradient(135deg, var(--wire-color-surface), var(--wire-color-surface-2));
|
|
box-shadow: var(--wire-shadow-2);
|
|
}
|
|
|
|
.detail-hero-copy {
|
|
display: grid;
|
|
max-width: 60rem;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.detail-hero h1 {
|
|
margin: 0;
|
|
font-size: clamp(3rem, 7vw, 6rem);
|
|
line-height: 0.92;
|
|
letter-spacing: -0.07em;
|
|
}
|
|
|
|
.detail-hero p {
|
|
max-width: 50rem;
|
|
margin: 0;
|
|
color: var(--wire-color-muted);
|
|
font-size: 1.05rem;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.detail-hero-icon {
|
|
display: grid;
|
|
width: clamp(6rem, 12vw, 10rem);
|
|
aspect-ratio: 1;
|
|
place-items: center;
|
|
border: 1px solid color-mix(in srgb, var(--wire-color-primary) 30%, var(--wire-color-border));
|
|
border-radius: 2rem;
|
|
color: var(--wire-color-primary);
|
|
background: color-mix(in srgb, var(--wire-color-primary) 10%, var(--wire-color-surface));
|
|
box-shadow:
|
|
inset 0 1px 0 color-mix(in srgb, white 35%, transparent),
|
|
0 2rem 4rem color-mix(in srgb, var(--wire-color-primary) 15%, transparent);
|
|
transform: rotate(3deg);
|
|
}
|
|
|
|
.detail-layout {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 13rem;
|
|
align-items: start;
|
|
gap: clamp(2rem, 5vw, 5rem);
|
|
}
|
|
|
|
.playground-section {
|
|
margin-bottom: clamp(4rem, 8vw, 7rem);
|
|
}
|
|
|
|
.playground-workbench {
|
|
display: grid;
|
|
min-height: 38rem;
|
|
grid-template-columns: minmax(0, 1.25fr) minmax(20rem, 0.75fr);
|
|
overflow: hidden;
|
|
border: 1px solid var(--wire-color-border);
|
|
border-radius: 1.5rem;
|
|
background: var(--wire-color-surface);
|
|
box-shadow: var(--wire-shadow-2);
|
|
}
|
|
|
|
.playground-preview {
|
|
position: relative;
|
|
display: grid;
|
|
min-width: 0;
|
|
grid-template-rows: auto minmax(24rem, 1fr) auto;
|
|
border-right: 1px solid var(--wire-color-border);
|
|
background:
|
|
radial-gradient(
|
|
circle at 50% 18%,
|
|
color-mix(in srgb, var(--wire-color-primary) 14%, transparent),
|
|
transparent 48%
|
|
),
|
|
linear-gradient(145deg, var(--wire-color-bg), var(--wire-color-surface-2));
|
|
}
|
|
|
|
.playground-preview-source {
|
|
display: grid;
|
|
min-height: 24rem;
|
|
place-items: center;
|
|
overflow: auto;
|
|
padding: clamp(1.25rem, 5vw, 4rem);
|
|
transition: opacity 150ms ease;
|
|
}
|
|
|
|
.playground-preview-source > * {
|
|
width: min(100%, 62rem);
|
|
}
|
|
|
|
.playground-preview-source > .wire-action:not(.w-full) {
|
|
width: fit-content;
|
|
}
|
|
|
|
.playground-preview-source .fixed,
|
|
.playground-preview-source [class*="fixed"] {
|
|
position: relative !important;
|
|
inset: auto !important;
|
|
z-index: auto !important;
|
|
max-height: 30rem;
|
|
}
|
|
|
|
.playground-preview-source .min-h-screen {
|
|
min-height: 22rem !important;
|
|
}
|
|
|
|
[data-playground][data-updating="true"] .playground-preview-source {
|
|
opacity: 0.55;
|
|
}
|
|
|
|
.playground-status {
|
|
position: absolute;
|
|
inset-block-start: 0.85rem;
|
|
inset-inline-end: 8rem;
|
|
min-height: 1rem;
|
|
color: var(--wire-color-muted);
|
|
font-size: 0.68rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.playground-code {
|
|
display: grid;
|
|
min-width: 0;
|
|
grid-template-rows: auto 1fr;
|
|
border-top: 1px solid var(--wire-color-border);
|
|
background: color-mix(in srgb, var(--wire-color-bg) 84%, black);
|
|
}
|
|
|
|
.playground-code header {
|
|
display: flex;
|
|
min-height: 2.75rem;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
padding-inline: 1rem;
|
|
border-bottom: 1px solid var(--wire-color-border);
|
|
background: color-mix(in srgb, var(--wire-color-surface) 92%, transparent);
|
|
}
|
|
|
|
.playground-code header > span,
|
|
.playground-code button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.45rem;
|
|
font-size: 0.7rem;
|
|
font-weight: 750;
|
|
}
|
|
|
|
.playground-code header > span {
|
|
color: var(--wire-color-muted);
|
|
}
|
|
|
|
.playground-code button {
|
|
padding: 0.42rem 0.6rem;
|
|
border: 1px solid var(--wire-color-border);
|
|
border-radius: 0.55rem;
|
|
color: var(--wire-color-text);
|
|
background: var(--wire-color-surface);
|
|
font-family: inherit;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.playground-code button:hover {
|
|
color: var(--wire-color-primary);
|
|
border-color: color-mix(in srgb, var(--wire-color-primary) 50%, var(--wire-color-border));
|
|
}
|
|
|
|
.playground-code pre {
|
|
max-width: 100%;
|
|
max-height: 15rem;
|
|
overflow: auto;
|
|
margin: 0;
|
|
padding: 1rem;
|
|
color: var(--wire-color-text);
|
|
font-size: 0.72rem;
|
|
line-height: 1.65;
|
|
white-space: pre;
|
|
}
|
|
|
|
.playground-controls {
|
|
display: grid;
|
|
min-width: 0;
|
|
max-height: 48rem;
|
|
grid-template-rows: auto 1fr;
|
|
background: var(--wire-color-surface);
|
|
}
|
|
|
|
.playground-controls > header {
|
|
display: flex;
|
|
min-height: 4.5rem;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
padding: 0.9rem 1rem;
|
|
border-bottom: 1px solid var(--wire-color-border);
|
|
background: var(--wire-color-surface-2);
|
|
}
|
|
|
|
.playground-controls > header div,
|
|
.playground-field > span,
|
|
.playground-toggle > span {
|
|
display: grid;
|
|
gap: 0.2rem;
|
|
}
|
|
|
|
.playground-controls > header span {
|
|
color: var(--wire-color-primary);
|
|
font-size: 0.68rem;
|
|
font-weight: 800;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.playground-controls > header strong {
|
|
font-size: 0.84rem;
|
|
}
|
|
|
|
.playground-controls > header button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
padding: 0.5rem 0.65rem;
|
|
border: 1px solid var(--wire-color-border);
|
|
border-radius: 0.65rem;
|
|
color: var(--wire-color-text);
|
|
background: var(--wire-color-surface);
|
|
font: inherit;
|
|
font-size: 0.72rem;
|
|
font-weight: 750;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.playground-fields {
|
|
display: grid;
|
|
align-content: start;
|
|
gap: 1rem;
|
|
overflow: auto;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.playground-field,
|
|
.playground-toggle {
|
|
display: grid;
|
|
gap: 0.55rem;
|
|
}
|
|
|
|
.playground-field strong,
|
|
.playground-toggle strong {
|
|
font-size: 0.78rem;
|
|
}
|
|
|
|
.playground-field small,
|
|
.playground-toggle small {
|
|
color: var(--wire-color-muted);
|
|
font-size: 0.65rem;
|
|
}
|
|
|
|
.playground-field input,
|
|
.playground-field textarea,
|
|
.playground-field select {
|
|
width: 100%;
|
|
border: 1px solid var(--wire-color-border);
|
|
border-radius: 0.7rem;
|
|
outline: 0;
|
|
color: var(--wire-color-text);
|
|
background: var(--wire-color-bg);
|
|
font: inherit;
|
|
font-size: 0.76rem;
|
|
}
|
|
|
|
.playground-field input {
|
|
min-height: 2.5rem;
|
|
padding: 0.55rem 0.7rem;
|
|
}
|
|
|
|
.playground-field select {
|
|
min-height: 2.5rem;
|
|
padding: 0.55rem 2rem 0.55rem 0.7rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.playground-field input[type="color"] {
|
|
padding: 0.25rem;
|
|
}
|
|
|
|
.playground-field textarea {
|
|
min-height: 7rem;
|
|
padding: 0.7rem;
|
|
font-family: ui-monospace, monospace;
|
|
line-height: 1.5;
|
|
resize: vertical;
|
|
}
|
|
|
|
.playground-field input:focus,
|
|
.playground-field textarea:focus,
|
|
.playground-field select:focus {
|
|
border-color: var(--wire-color-primary);
|
|
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-color-primary) 15%, transparent);
|
|
}
|
|
|
|
.playground-field [aria-invalid="true"] {
|
|
border-color: var(--wire-color-danger);
|
|
}
|
|
|
|
.playground-field em {
|
|
min-height: 0.8rem;
|
|
color: var(--wire-color-danger);
|
|
font-size: 0.65rem;
|
|
font-style: normal;
|
|
}
|
|
|
|
.playground-toggle {
|
|
position: relative;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.playground-toggle input {
|
|
position: absolute;
|
|
z-index: 1;
|
|
inset-block: 0;
|
|
inset-inline-end: 0;
|
|
width: 2.4rem;
|
|
height: 100%;
|
|
margin: 0;
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.playground-toggle i {
|
|
position: relative;
|
|
width: 2.4rem;
|
|
height: 1.4rem;
|
|
border: 1px solid var(--wire-color-border);
|
|
border-radius: 999px;
|
|
background: var(--wire-color-surface-2);
|
|
transition: background 150ms ease;
|
|
}
|
|
|
|
.playground-toggle i::after {
|
|
position: absolute;
|
|
inset-block-start: 0.19rem;
|
|
inset-inline-start: 0.2rem;
|
|
width: 0.9rem;
|
|
height: 0.9rem;
|
|
border-radius: 50%;
|
|
background: var(--wire-color-muted);
|
|
transition: transform 150ms ease;
|
|
content: "";
|
|
}
|
|
|
|
.playground-toggle input:checked + i {
|
|
background: var(--wire-color-primary);
|
|
}
|
|
|
|
.playground-toggle input:checked + i::after {
|
|
background: var(--wire-color-primary-contrast);
|
|
transform: translateX(1rem);
|
|
}
|
|
|
|
.playground-toggle input:focus-visible + i {
|
|
outline: 2px solid var(--wire-color-primary);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.playground-empty {
|
|
margin: 0;
|
|
color: var(--wire-color-muted);
|
|
font-size: 0.78rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.detail-content,
|
|
.detail-section,
|
|
.demo-list {
|
|
display: grid;
|
|
gap: clamp(2rem, 5vw, 4rem);
|
|
}
|
|
|
|
.detail-section {
|
|
scroll-margin-top: 6rem;
|
|
}
|
|
|
|
.demo-list {
|
|
gap: 2rem;
|
|
}
|
|
|
|
.pin-length-demo {
|
|
display: grid;
|
|
width: 100%;
|
|
align-content: center;
|
|
justify-items: center;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.pin-length-demo .wire-next--pin-input {
|
|
width: fit-content;
|
|
}
|
|
|
|
.pin-length-demo .wire-next__pin-heading {
|
|
display: none;
|
|
}
|
|
|
|
.pin-length-demo .wire-next__pin-cells {
|
|
justify-content: center;
|
|
overflow: visible;
|
|
}
|
|
|
|
.detail-events-grid {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
|
|
overflow: hidden;
|
|
border: 1px solid var(--wire-color-border);
|
|
border-radius: 1.25rem;
|
|
background: var(--wire-color-surface);
|
|
}
|
|
|
|
.detail-events-list {
|
|
display: grid;
|
|
align-content: start;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.detail-events-list > div {
|
|
display: grid;
|
|
gap: 0.3rem;
|
|
padding: 0.85rem;
|
|
border-bottom: 1px solid var(--wire-color-border);
|
|
}
|
|
|
|
.detail-events-list > div:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.detail-events-list code {
|
|
width: fit-content;
|
|
color: var(--wire-color-primary);
|
|
font-size: 0.78rem;
|
|
font-weight: 750;
|
|
}
|
|
|
|
.detail-events-list span {
|
|
color: var(--wire-color-muted);
|
|
font-size: 0.76rem;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
.detail-events-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.demo-case {
|
|
overflow: hidden;
|
|
border: 1px solid var(--wire-color-border);
|
|
border-radius: 1.5rem;
|
|
background: var(--wire-color-surface);
|
|
box-shadow: var(--wire-shadow-1);
|
|
}
|
|
|
|
.demo-case-header {
|
|
display: flex;
|
|
align-items: start;
|
|
justify-content: space-between;
|
|
gap: 2rem;
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.demo-case-header h2 {
|
|
margin: 0.4rem 0 0;
|
|
font-size: 1.4rem;
|
|
letter-spacing: -0.035em;
|
|
}
|
|
|
|
.demo-case-header p {
|
|
max-width: 42rem;
|
|
margin: 0.45rem 0 0;
|
|
color: var(--wire-color-muted);
|
|
font-size: 0.84rem;
|
|
}
|
|
|
|
.demo-case-number {
|
|
color: color-mix(in srgb, var(--wire-color-primary) 45%, var(--wire-color-border));
|
|
font-family: ui-monospace, monospace;
|
|
font-size: 1.6rem;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.demo-workbench {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.08fr) minmax(22rem, 0.92fr);
|
|
border-top: 1px solid var(--wire-color-border);
|
|
}
|
|
|
|
.demo-canvas {
|
|
position: relative;
|
|
min-height: 24rem;
|
|
overflow: auto;
|
|
border-right: 1px solid var(--wire-color-border);
|
|
background:
|
|
radial-gradient(
|
|
circle at 50% 20%,
|
|
color-mix(in srgb, var(--wire-color-primary) 12%, transparent),
|
|
transparent 48%
|
|
),
|
|
var(--wire-color-bg);
|
|
}
|
|
|
|
.demo-canvas--2 {
|
|
background:
|
|
radial-gradient(
|
|
circle at 20% 20%,
|
|
color-mix(in srgb, var(--wire-color-info) 12%, transparent),
|
|
transparent 42%
|
|
),
|
|
var(--wire-color-bg);
|
|
}
|
|
|
|
.demo-canvas--3 {
|
|
background:
|
|
radial-gradient(
|
|
circle at 80% 20%,
|
|
color-mix(in srgb, var(--wire-color-success) 12%, transparent),
|
|
transparent 42%
|
|
),
|
|
var(--wire-color-bg);
|
|
}
|
|
|
|
.demo-browser-chrome {
|
|
display: flex;
|
|
height: 2.75rem;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
padding-inline: 1rem;
|
|
border-bottom: 1px solid var(--wire-color-border);
|
|
background: color-mix(in srgb, var(--wire-color-surface) 92%, transparent);
|
|
}
|
|
|
|
.demo-browser-chrome > span {
|
|
width: 0.62rem;
|
|
height: 0.62rem;
|
|
border-radius: 999px;
|
|
background: var(--wire-color-danger);
|
|
}
|
|
|
|
.demo-browser-chrome > span:nth-child(2) {
|
|
background: var(--wire-color-warning);
|
|
}
|
|
|
|
.demo-browser-chrome > span:nth-child(3) {
|
|
background: var(--wire-color-success);
|
|
}
|
|
|
|
.demo-browser-chrome small {
|
|
margin-left: auto;
|
|
color: var(--wire-color-muted);
|
|
font-size: 0.66rem;
|
|
font-weight: 750;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.demo-render {
|
|
display: grid;
|
|
min-height: 21rem;
|
|
place-items: center;
|
|
padding: clamp(1.25rem, 5vw, 4rem);
|
|
}
|
|
|
|
.demo-render > * {
|
|
width: min(100%, 58rem);
|
|
}
|
|
|
|
.demo-render > .wire-action:not(.w-full) {
|
|
width: fit-content;
|
|
}
|
|
|
|
.demo-validation-form {
|
|
display: grid;
|
|
width: min(100%, 32rem);
|
|
gap: 1rem;
|
|
}
|
|
|
|
.demo-validation-form > .wire-btn {
|
|
width: fit-content;
|
|
}
|
|
|
|
.demo-render .fixed,
|
|
.demo-render [class*="fixed"] {
|
|
position: relative !important;
|
|
inset: auto !important;
|
|
z-index: auto !important;
|
|
max-height: 24rem;
|
|
}
|
|
|
|
.demo-render .min-h-screen {
|
|
min-height: 16rem !important;
|
|
}
|
|
|
|
.showcase-instance--2 {
|
|
max-width: 42rem;
|
|
}
|
|
|
|
.showcase-instance--3 {
|
|
max-width: 58rem;
|
|
}
|
|
|
|
.demo-code {
|
|
display: grid;
|
|
min-width: 0;
|
|
grid-template-rows: auto 1fr;
|
|
background: color-mix(in srgb, var(--wire-color-bg) 82%, black);
|
|
}
|
|
|
|
.demo-code header {
|
|
display: flex;
|
|
min-height: 2.75rem;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
padding-inline: 1rem;
|
|
border-bottom: 1px solid var(--wire-color-border);
|
|
background: color-mix(in srgb, var(--wire-color-surface) 92%, transparent);
|
|
}
|
|
|
|
.demo-code header > span {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
color: var(--wire-color-muted);
|
|
font-size: 0.75rem;
|
|
font-weight: 750;
|
|
}
|
|
|
|
.demo-code header small {
|
|
color: var(--wire-color-primary);
|
|
font-family: ui-monospace, monospace;
|
|
font-size: 0.68rem;
|
|
font-weight: 800;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.demo-code pre {
|
|
max-width: 100%;
|
|
max-height: 24rem;
|
|
overflow: auto;
|
|
margin: 0;
|
|
padding: 1.25rem;
|
|
color: var(--wire-color-text);
|
|
background: transparent;
|
|
font-size: 0.72rem;
|
|
line-height: 1.7;
|
|
white-space: pre;
|
|
}
|
|
|
|
.detail-aside {
|
|
position: sticky;
|
|
top: 6.5rem;
|
|
}
|
|
|
|
.detail-toc {
|
|
display: grid;
|
|
gap: 0.25rem;
|
|
padding-left: 1rem;
|
|
border-left: 1px solid var(--wire-color-border);
|
|
}
|
|
|
|
.detail-toc strong {
|
|
margin-bottom: 0.5rem;
|
|
font-size: 0.76rem;
|
|
}
|
|
|
|
.detail-toc a {
|
|
padding-block: 0.35rem;
|
|
color: var(--wire-color-muted);
|
|
font-size: 0.72rem;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.detail-toc a:hover {
|
|
color: var(--wire-color-primary);
|
|
}
|
|
|
|
.docs-table-wrap {
|
|
overflow: auto;
|
|
border: 1px solid var(--wire-color-border);
|
|
border-radius: 1.25rem;
|
|
background: var(--wire-color-surface);
|
|
box-shadow: var(--wire-shadow-1);
|
|
}
|
|
|
|
.docs-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
text-align: left;
|
|
font-size: 0.78rem;
|
|
}
|
|
|
|
.docs-table th,
|
|
.docs-table td {
|
|
padding: 0.85rem 1rem;
|
|
border-bottom: 1px solid var(--wire-color-border);
|
|
}
|
|
|
|
.docs-table th {
|
|
color: var(--wire-color-muted);
|
|
background: var(--wire-color-surface-2);
|
|
font-size: 0.67rem;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.docs-table tr:last-child td {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.docs-table code {
|
|
padding: 0.18rem 0.38rem;
|
|
border-radius: 0.35rem;
|
|
color: var(--wire-color-primary);
|
|
background: color-mix(in srgb, var(--wire-color-primary) 8%, transparent);
|
|
font-size: 0.72rem;
|
|
}
|
|
|
|
.docs-required {
|
|
color: var(--wire-color-danger);
|
|
font-weight: 800;
|
|
}
|
|
|
|
.docs-empty {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.7rem;
|
|
padding: 1.25rem;
|
|
border: 1px dashed var(--wire-color-border);
|
|
border-radius: 1rem;
|
|
color: var(--wire-color-muted);
|
|
}
|
|
|
|
.detail-pagination {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 1rem;
|
|
margin-top: clamp(4rem, 8vw, 7rem);
|
|
padding-top: 2rem;
|
|
border-top: 1px solid var(--wire-color-border);
|
|
}
|
|
|
|
.detail-pagination a {
|
|
display: grid;
|
|
gap: 0.35rem;
|
|
padding: 1.15rem;
|
|
border: 1px solid var(--wire-color-border);
|
|
border-radius: 1rem;
|
|
color: var(--wire-color-text);
|
|
background: var(--wire-color-surface);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.detail-pagination a:last-child {
|
|
text-align: right;
|
|
}
|
|
|
|
.detail-pagination small {
|
|
color: var(--wire-color-muted);
|
|
font-size: 0.65rem;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
@media (max-width: 960px) {
|
|
.playground-workbench {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.playground-preview {
|
|
border-right: 0;
|
|
border-bottom: 1px solid var(--wire-color-border);
|
|
}
|
|
|
|
.playground-controls {
|
|
max-height: 34rem;
|
|
}
|
|
|
|
.demo-workbench {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.demo-canvas {
|
|
border-right: 0;
|
|
border-bottom: 1px solid var(--wire-color-border);
|
|
}
|
|
|
|
.showcase-stats {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
.showcase-stat:nth-child(2) {
|
|
border-right: 0;
|
|
}
|
|
|
|
.showcase-stat:nth-child(-n + 2) {
|
|
border-bottom: 1px solid var(--wire-color-border);
|
|
}
|
|
|
|
.catalog-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.detail-layout {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.detail-aside {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
.showcase-main {
|
|
width: min(100% - 1rem, 92rem);
|
|
}
|
|
|
|
.showcase-title {
|
|
font-size: clamp(2.8rem, 15vw, 5rem);
|
|
}
|
|
|
|
.home-category-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.detail-hero {
|
|
grid-template-columns: 1fr;
|
|
padding: 1.5rem;
|
|
border-radius: 1.4rem;
|
|
}
|
|
|
|
.detail-hero-icon {
|
|
display: none;
|
|
}
|
|
|
|
.detail-hero h1 {
|
|
font-size: clamp(2.7rem, 14vw, 4.5rem);
|
|
}
|
|
|
|
.demo-case-header {
|
|
padding: 1.15rem;
|
|
}
|
|
|
|
.demo-case-number {
|
|
display: none;
|
|
}
|
|
|
|
.demo-render {
|
|
min-height: 17rem;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.detail-pagination {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
/* Component-specific showcase stages generated from showcase-profiles.mjs. */
|
|
.showcase-visual-panel,
|
|
.showcase-shell-preview,
|
|
.showcase-content-block,
|
|
.showcase-overlay-content,
|
|
.showcase-status-panel,
|
|
.showcase-context-target {
|
|
width: 100%;
|
|
min-width: 0;
|
|
border: 1px solid var(--wire-color-border);
|
|
border-radius: 1.25rem;
|
|
background: color-mix(in srgb, var(--wire-color-surface-raised) 92%, transparent);
|
|
color: var(--wire-color-text);
|
|
}
|
|
|
|
.showcase-visual-panel {
|
|
display: grid;
|
|
place-items: center;
|
|
gap: 0.75rem;
|
|
min-height: 18rem;
|
|
padding: clamp(1.5rem, 4vw, 3rem);
|
|
text-align: center;
|
|
background:
|
|
radial-gradient(
|
|
circle at 80% 10%,
|
|
color-mix(in srgb, var(--wire-color-primary) 22%, transparent),
|
|
transparent 38%
|
|
),
|
|
color-mix(in srgb, var(--wire-color-surface-raised) 94%, transparent);
|
|
}
|
|
|
|
.showcase-visual-panel > span {
|
|
color: var(--wire-color-primary);
|
|
}
|
|
|
|
.showcase-visual-panel strong {
|
|
font-size: clamp(1.1rem, 2vw, 1.45rem);
|
|
}
|
|
|
|
.showcase-visual-panel p,
|
|
.showcase-card-copy,
|
|
.showcase-content-block p,
|
|
.showcase-overlay-content p,
|
|
.showcase-status-panel p {
|
|
margin: 0;
|
|
color: var(--wire-color-muted);
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.showcase-shell-preview {
|
|
display: grid;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.showcase-shell-preview > * {
|
|
padding: 1rem 1.25rem;
|
|
}
|
|
|
|
.showcase-shell-preview header,
|
|
.showcase-shell-preview footer {
|
|
background: color-mix(in srgb, var(--wire-color-primary) 10%, transparent);
|
|
}
|
|
|
|
.showcase-shell-preview main {
|
|
min-height: 9rem;
|
|
}
|
|
|
|
.showcase-inline-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.75rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.showcase-action {
|
|
display: inline-flex;
|
|
min-height: 2.75rem;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
padding: 0.7rem 1rem;
|
|
border: 1px solid var(--wire-color-border);
|
|
border-radius: 0.8rem;
|
|
color: var(--wire-color-text);
|
|
background: color-mix(in srgb, var(--wire-color-surface-raised) 88%, transparent);
|
|
font-size: 0.875rem;
|
|
font-weight: 650;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.showcase-action--primary {
|
|
border-color: color-mix(in srgb, var(--wire-color-primary) 72%, transparent);
|
|
background: var(--wire-color-primary);
|
|
color: var(--wire-color-primary-contrast);
|
|
}
|
|
|
|
.showcase-content-block,
|
|
.showcase-overlay-content,
|
|
.showcase-status-panel,
|
|
.showcase-context-target {
|
|
display: grid;
|
|
gap: 0.75rem;
|
|
padding: 1.25rem;
|
|
}
|
|
|
|
.showcase-grid-items {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
|
|
gap: 0.75rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.showcase-grid-items > * {
|
|
min-width: 0;
|
|
padding: 1rem;
|
|
border: 1px solid var(--wire-color-border);
|
|
border-radius: 0.85rem;
|
|
background: var(--wire-color-surface-raised);
|
|
}
|
|
|
|
.showcase-footer-banner,
|
|
.showcase-footer-legal {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
width: 100%;
|
|
padding: 1rem clamp(1rem, 3vw, 2rem);
|
|
}
|
|
|
|
.showcase-footer-banner {
|
|
background: color-mix(in srgb, var(--wire-color-primary) 12%, var(--wire-color-surface));
|
|
}
|
|
|
|
.showcase-footer-legal {
|
|
color: var(--wire-color-muted);
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.showcase-card-value {
|
|
display: block;
|
|
color: var(--wire-color-primary);
|
|
font-size: clamp(2rem, 5vw, 3.25rem);
|
|
line-height: 1;
|
|
}
|
|
|
|
.showcase-typography {
|
|
display: grid;
|
|
gap: 1rem;
|
|
color: var(--wire-color-text);
|
|
}
|
|
|
|
.showcase-typography :where(h2, h3, p, ul) {
|
|
margin: 0;
|
|
}
|
|
|
|
.showcase-typography ul {
|
|
padding-inline-start: 1.25rem;
|
|
}
|
|
|
|
.playground-event-log {
|
|
display: grid;
|
|
gap: 0.5rem;
|
|
margin: 0 1.25rem 1.25rem;
|
|
padding: 0.9rem 1rem;
|
|
border: 1px solid var(--wire-color-border);
|
|
border-radius: 0.9rem;
|
|
background: color-mix(in srgb, var(--wire-color-surface-raised) 88%, transparent);
|
|
color: var(--wire-color-muted);
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.playground-event-log strong {
|
|
color: var(--wire-color-text);
|
|
}
|
|
|
|
.playground-event-log pre {
|
|
overflow: auto;
|
|
max-height: 12rem;
|
|
margin: 0;
|
|
white-space: pre-wrap;
|
|
color: var(--wire-color-primary);
|
|
}
|
|
|
|
.detail-event-examples {
|
|
display: grid;
|
|
gap: 1rem;
|
|
min-width: 0;
|
|
}
|
|
|
|
/* Full-width components must use the complete preview stage rather than the
|
|
generic compact component cap. This also prevents narrow MetricGrid cards. */
|
|
:is(.demo-render, .playground-preview-source):has(
|
|
[data-ui-component="PublicPageShell"],
|
|
[data-ui-component="AnnouncementBar"],
|
|
[data-ui-component="PageHeader"],
|
|
[data-ui-component="Hero"],
|
|
[data-ui-component="SplitHero"],
|
|
[data-ui-component="Section"],
|
|
[data-ui-component="FeatureGrid"],
|
|
[data-ui-component="MetricGrid"],
|
|
[data-ui-component="StatsBar"],
|
|
[data-ui-component="CTASection"],
|
|
[data-ui-component="Footer"]
|
|
) {
|
|
place-items: stretch;
|
|
align-content: start;
|
|
}
|
|
|
|
:is(.demo-render, .playground-preview-source)
|
|
> *:has(
|
|
[data-ui-component="PublicPageShell"],
|
|
[data-ui-component="AnnouncementBar"],
|
|
[data-ui-component="PageHeader"],
|
|
[data-ui-component="Hero"],
|
|
[data-ui-component="SplitHero"],
|
|
[data-ui-component="Section"],
|
|
[data-ui-component="FeatureGrid"],
|
|
[data-ui-component="MetricGrid"],
|
|
[data-ui-component="StatsBar"],
|
|
[data-ui-component="CTASection"],
|
|
[data-ui-component="Footer"]
|
|
),
|
|
:is(.demo-render, .playground-preview-source)
|
|
> :is(
|
|
[data-ui-component="PublicPageShell"],
|
|
[data-ui-component="AnnouncementBar"],
|
|
[data-ui-component="PageHeader"],
|
|
[data-ui-component="Hero"],
|
|
[data-ui-component="SplitHero"],
|
|
[data-ui-component="Section"],
|
|
[data-ui-component="FeatureGrid"],
|
|
[data-ui-component="MetricGrid"],
|
|
[data-ui-component="StatsBar"],
|
|
[data-ui-component="CTASection"],
|
|
[data-ui-component="Footer"]
|
|
) {
|
|
width: 100%;
|
|
max-width: none;
|
|
min-width: 0;
|
|
}
|
|
|
|
:is(.demo-render, .playground-preview-source)
|
|
:is(
|
|
[data-ui-component="FeatureGrid"],
|
|
[data-ui-component="MetricGrid"],
|
|
[data-ui-component="StatsBar"]
|
|
) {
|
|
width: 100%;
|
|
min-width: 0;
|
|
max-width: none;
|
|
}
|
|
|
|
:is(.demo-render, .playground-preview-source):has(
|
|
[data-ui-component="ContextMenu"],
|
|
[data-ui-component="Dropdown"],
|
|
[data-ui-component="Popover"],
|
|
[data-ui-component="Tooltip"]
|
|
) {
|
|
min-height: 24rem;
|
|
place-items: center;
|
|
overflow: visible;
|
|
}
|
|
|
|
:is(.demo-render, .playground-preview-source):has(
|
|
[data-ui-component="Drawer"],
|
|
[data-ui-component="Modal"]
|
|
) {
|
|
min-height: 30rem;
|
|
place-items: stretch;
|
|
isolation: isolate;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.showcase-inline-actions,
|
|
.showcase-footer-banner,
|
|
.showcase-footer-legal {
|
|
align-items: stretch;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.showcase-action {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
/* Interactive overlay previews -------------------------------------------------
|
|
Overlay components must begin closed and remain usable inside catalog cards,
|
|
detail demos, and the live playground. */
|
|
.catalog-card[data-interactive-preview="true"] {
|
|
overflow: visible;
|
|
}
|
|
|
|
.catalog-card[data-interactive-preview="true"]:hover {
|
|
transform: none;
|
|
}
|
|
|
|
.catalog-card[data-interactive-preview="true"] .catalog-card-preview {
|
|
overflow: visible;
|
|
min-height: 22rem;
|
|
border-radius: 1.4rem 1.4rem 0 0;
|
|
}
|
|
|
|
.catalog-card[data-interactive-preview="true"] .catalog-card-stage {
|
|
display: grid;
|
|
width: min(100%, 34rem);
|
|
justify-items: center;
|
|
gap: 0.85rem;
|
|
}
|
|
|
|
.catalog-interaction-hint,
|
|
.demo-interaction-hint {
|
|
display: inline-flex;
|
|
width: fit-content;
|
|
align-items: center;
|
|
gap: 0.45rem;
|
|
margin: 0;
|
|
padding: 0.42rem 0.65rem;
|
|
color: var(--wire-color-muted);
|
|
background: color-mix(in srgb, var(--wire-color-surface) 88%, transparent);
|
|
border: 1px solid var(--wire-color-border);
|
|
border-radius: 999px;
|
|
font-size: 0.7rem;
|
|
font-weight: 700;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.demo-interaction-hint {
|
|
margin: 1rem auto 0;
|
|
}
|
|
|
|
/* Keep full-screen overlays inside their showcase canvas instead of covering
|
|
the complete documentation application. */
|
|
:is(.catalog-card-preview, .demo-render, .playground-preview-source):has(
|
|
[data-ui-component="Drawer"],
|
|
[data-ui-component="Modal"]
|
|
) {
|
|
position: relative;
|
|
overflow: hidden;
|
|
isolation: isolate;
|
|
}
|
|
|
|
:is(.catalog-card-preview, .demo-render, .playground-preview-source)
|
|
[data-ui-component="Drawer"]
|
|
.wire-drawer__layer,
|
|
:is(.catalog-card-preview, .demo-render, .playground-preview-source)
|
|
[data-ui-component="Modal"]
|
|
.wire-modal__layer {
|
|
position: absolute !important;
|
|
inset: 0 !important;
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
max-height: none !important;
|
|
}
|
|
|
|
:is(.catalog-card-preview, .demo-render, .playground-preview-source):has(
|
|
[data-ui-component="Drawer"],
|
|
[data-ui-component="Modal"]
|
|
)
|
|
.catalog-card-stage {
|
|
position: static;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.catalog-card[data-interactive-preview="true"] .catalog-card-preview {
|
|
min-height: 18rem;
|
|
}
|
|
|
|
.catalog-interaction-hint,
|
|
.demo-interaction-hint {
|
|
border-radius: 0.75rem;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
/*
|
|
* Toaster demo controls. The Toaster is a host with no visible surface of its
|
|
* own, so its showcase demo is a row of buttons that raise real toasts through
|
|
* the runtime `toast()` global.
|
|
*/
|
|
.showcase-toast-demo {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.showcase-toast-demo button {
|
|
appearance: none;
|
|
padding: 0.45rem 0.75rem;
|
|
color: var(--wire-color-text);
|
|
background: var(--wire-color-surface-raised);
|
|
border: 1px solid var(--wire-color-border);
|
|
border-radius: 0.6rem;
|
|
font: inherit;
|
|
font-size: 0.8rem;
|
|
cursor: pointer;
|
|
transition:
|
|
border-color 150ms ease,
|
|
background 150ms ease;
|
|
}
|
|
|
|
.showcase-toast-demo button:hover {
|
|
border-color: color-mix(in srgb, var(--wire-color-primary) 45%, var(--wire-color-border));
|
|
background: var(--wire-color-surface-soft);
|
|
}
|
|
|
|
/*
|
|
* The contained overlay above resolves `inset: 0` against its nearest
|
|
* positioned ancestor. That was the component root itself (position: relative,
|
|
* display: inline-flex), so a Drawer/Modal preview collapsed to the size of
|
|
* its own trigger button -- about 198x41 -- instead of filling the canvas.
|
|
* Making the root static hands the containing block back to the canvas, and
|
|
* the canvas gets enough height for the panel to be worth looking at.
|
|
*/
|
|
:is(.catalog-card-preview, .demo-render, .playground-preview-source)
|
|
:is([data-ui-component="Drawer"], [data-ui-component="Modal"]) {
|
|
position: static;
|
|
}
|
|
|
|
:is(.demo-render, .playground-preview-source):has(
|
|
[data-ui-component="Drawer"],
|
|
[data-ui-component="Modal"]
|
|
) {
|
|
min-height: 22rem;
|
|
}
|
|
|
|
/*
|
|
* Anchored overlays must not be clipped by the demo canvas.
|
|
*
|
|
* .demo-canvas scrolls (overflow: auto) so tall demos stay contained, but that
|
|
* also makes it a clipping context -- and a tooltip or popover that opens
|
|
* ABOVE its trigger was simply cut off at the canvas edge. Full-screen
|
|
* overlays (Modal, Drawer) still get clipped on purpose, by the rule further
|
|
* up: they are meant to stay inside their preview instead of covering the
|
|
* whole documentation app. Anchored ones are small and belong outside it.
|
|
*/
|
|
:is(
|
|
.demo-case,
|
|
.demo-workbench,
|
|
.demo-canvas,
|
|
.playground-workbench,
|
|
.playground-preview,
|
|
.playground-preview-source
|
|
):has(
|
|
[data-ui-component="Tooltip"],
|
|
[data-ui-component="Popover"],
|
|
[data-ui-component="Dropdown"],
|
|
[data-ui-component="ContextMenu"],
|
|
[data-ui-component="MegaMenu"]
|
|
) {
|
|
overflow: visible;
|
|
}
|
|
|
|
/* Room above the trigger so a top-placed overlay has somewhere to go. */
|
|
.demo-canvas:has([data-ui-component="Tooltip"], [data-ui-component="Popover"]) .demo-render {
|
|
padding-block: 5rem;
|
|
}
|
|
|
|
/*
|
|
* Scrollspy demo sections.
|
|
*
|
|
* Real page-flow content on purpose: the runtime observes sections against the
|
|
* viewport, so a table of contents inside a small scrolling box would have
|
|
* nothing to react to and the demo could not be tested at all.
|
|
*/
|
|
.showcase-spy-doc {
|
|
display: grid;
|
|
gap: 0.75rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.showcase-spy-section {
|
|
min-height: 42vh;
|
|
padding: 1rem;
|
|
border: 1px solid var(--wire-color-border);
|
|
border-radius: var(--wire-radius-md);
|
|
background: var(--wire-color-surface-soft);
|
|
scroll-margin-top: 5rem;
|
|
}
|
|
|
|
.showcase-spy-section h3 {
|
|
margin: 0 0 0.4rem;
|
|
font-size: 0.95rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.showcase-spy-section p {
|
|
margin: 0;
|
|
color: var(--wire-color-text-muted);
|
|
font-size: 0.86rem;
|
|
line-height: 1.6;
|
|
}
|