shkim4andClaude Opus 5.5
e27385e0f0
- Ship an AI guide in the package (ai/: usage rules, component catalog, design rules, composition patterns) via package.json files. - Add examples A-D that import only public exports: default header, viewer header, feature header, and a consumer-side search extension that reuses SWHeaderInput and the public SW tokens. - Add SW-only checks: docs/API consistency, tarball consumer project (React 19 + TS + Vite typecheck/build) and a browser check (27/27). - No runtime source or public API change; README gains a pointer section. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
37 lines
1.3 KiB
CSS
37 lines
1.3 KiB
CSS
/* Consumer layout for the composed examples (B, C, D). It belongs to the consuming project: it only
|
|
arranges public SW components and reads the public --hm-sw-header-* tokens provided by <SWTheme>.
|
|
It never styles hm-sw-* classes and adds no new design values. */
|
|
.app-sw-bar {
|
|
display: flex;
|
|
align-items: stretch;
|
|
gap: 2px;
|
|
box-sizing: border-box;
|
|
height: var(--hm-sw-header-height);
|
|
padding-bottom: 1px; /* 48px surfaces in the 49px header, like SWHeader */
|
|
background: var(--hm-sw-header-background);
|
|
}
|
|
/* Object (editing) surface, the same tokens as the SWHeader object area. */
|
|
.app-sw-surface {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--hm-sw-header-gap);
|
|
flex: 1 1 0;
|
|
min-width: 0;
|
|
padding: 4px;
|
|
border: 1px solid var(--hm-sw-header-object-border-color);
|
|
border-radius: var(--hm-sw-header-object-radius);
|
|
background: var(--hm-sw-header-object-background);
|
|
}
|
|
/* Window-area surface for print / K / window buttons. */
|
|
.app-sw-window {
|
|
display: flex;
|
|
flex: 0 0 auto;
|
|
background: var(--hm-sw-header-document-background);
|
|
box-shadow: inset 0 0 0 1px var(--hm-sw-header-document-border-color); /* 1px edge without moving the parts */
|
|
}
|
|
/* File well placed first (no home overlap): its own left edge. */
|
|
.app-sw-file-edge {
|
|
display: flex;
|
|
border-left: 1px solid var(--hm-sw-header-document-border-color);
|
|
}
|