@cosmicdrift/kumiko-headless 0.102.0 → 0.102.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +2 -2
- package/src/apex/css.ts +10 -1
- package/src/apex/index.ts +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cosmicdrift/kumiko-headless",
|
|
3
|
-
"version": "0.102.
|
|
3
|
+
"version": "0.102.2",
|
|
4
4
|
"description": "Headless UI logic for Kumiko — Dispatcher contract, Form-Controller, View-Model, Nav-Resolver. Plattform- und React-frei; jeder Renderer (renderer, renderer-web, renderer-native, …) komponiert darauf.",
|
|
5
5
|
"license": "BUSL-1.1",
|
|
6
6
|
"author": "Marc Frost <marc@cosmicdriftgamestudio.com>",
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
}
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@cosmicdrift/kumiko-framework": "0.102.
|
|
35
|
+
"@cosmicdrift/kumiko-framework": "0.102.2",
|
|
36
36
|
"zod": "^4.4.3"
|
|
37
37
|
},
|
|
38
38
|
"publishConfig": {
|
package/src/apex/css.ts
CHANGED
|
@@ -201,7 +201,8 @@ export const APEX_NAV_MENU_CSS = `
|
|
|
201
201
|
font: inherit; font-size: 0.9375rem; color: var(--fg-muted);
|
|
202
202
|
background: none; border: 0; padding: 0; cursor: pointer; }
|
|
203
203
|
.nav-menu__trigger:hover { color: var(--fg); }
|
|
204
|
-
.nav-menu__chev {
|
|
204
|
+
.nav-menu__chev { display: inline-flex; transition: transform 0.15s; opacity: 0.7; }
|
|
205
|
+
.nav-menu__chev svg { width: 0.95em; height: 0.95em; }
|
|
205
206
|
.nav-menu:hover .nav-menu__chev, .nav-menu:focus-within .nav-menu__chev { transform: rotate(180deg); }
|
|
206
207
|
.nav-menu__panel { position: absolute; top: calc(100% + 0.5rem); left: 0; z-index: 20;
|
|
207
208
|
min-width: 21rem; padding: 0.5rem; background: var(--bg-card); color: var(--fg);
|
|
@@ -226,6 +227,14 @@ export const APEX_NAV_MENU_CSS = `
|
|
|
226
227
|
.nav-menu__more:hover { color: var(--primary-hover); }
|
|
227
228
|
.apex-dark .nav-menu__trigger { color: var(--on-dark-muted); }
|
|
228
229
|
.apex-dark .nav-menu__trigger:hover { color: var(--on-dark); }
|
|
230
|
+
/* The panel is a light popover; its links must NOT inherit the dark-chrome
|
|
231
|
+
nav-link color (.apex-dark .nav-links a, specificity 0,2,1) or a consumer's
|
|
232
|
+
own .nav-links a. Pin both link types with matching specificity (0,2,1) so
|
|
233
|
+
titles + the footer link stay readable in the dark theme. */
|
|
234
|
+
.nav-menu__panel a.nav-menu__item { color: var(--fg); }
|
|
235
|
+
.nav-menu__panel a.nav-menu__item:hover { color: var(--fg); }
|
|
236
|
+
.nav-menu__panel a.nav-menu__more { color: var(--primary); }
|
|
237
|
+
.nav-menu__panel a.nav-menu__more:hover { color: var(--primary-hover); }
|
|
229
238
|
`;
|
|
230
239
|
|
|
231
240
|
export const APEX_STRUCTURAL_CSS =
|
package/src/apex/index.ts
CHANGED
|
@@ -369,7 +369,7 @@ function renderNavMenu(m: ApexNavMenu): string {
|
|
|
369
369
|
m.footer !== undefined
|
|
370
370
|
? `<div class="nav-menu__sep"></div><a class="nav-menu__more" href="${escapeHtml(m.footer.href)}">${escapeHtml(m.footer.label)}</a>`
|
|
371
371
|
: "";
|
|
372
|
-
return `<div class="nav-menu"><button type="button" class="nav-menu__trigger" aria-haspopup="true">${escapeHtml(m.label)}<span class="nav-menu__chev" aria-hidden="true"
|
|
372
|
+
return `<div class="nav-menu"><button type="button" class="nav-menu__trigger" aria-haspopup="true">${escapeHtml(m.label)}<span class="nav-menu__chev" aria-hidden="true">${svgIcon('<path d="m6 9 6 6 6-6"/>')}</span></button><div class="nav-menu__panel">${items}${footer}</div></div>`;
|
|
373
373
|
}
|
|
374
374
|
|
|
375
375
|
function renderNavEntry(entry: ApexNavEntry): string {
|