ClintchizandClaude Opus 5
7a2b58652a
Bumps all 47 packages, the root manifest and the VS Code extension to 0.8.6, and rebuilds the editor compiler, language server and extension bundles that embed the version. The release carries the output delivery fix: camelCase outputs now reach parent bindings, and 18 components emit through output.* instead of hand-built CustomEvents. See the 0.8.6 migration entry for what changes for consumers. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
580 lines
17 KiB
Plaintext
580 lines
17 KiB
Plaintext
component Navbar {
|
|
outputs {
|
|
toggle(payload: { open: boolean })
|
|
open(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
|
|
close(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
|
|
select(payload: { item: string | number | boolean | null | object; value: string | number | boolean; level: string })
|
|
action(payload: { item: string | number | boolean | null | object; value: string | number | boolean })
|
|
}
|
|
|
|
props {
|
|
size: string = "default"
|
|
color: string = "primary"
|
|
label: string = "Primary navigation"
|
|
topbarLabel: string = "Utility navigation"
|
|
brand: Record<string, unknown> = {}
|
|
items: unknown[] = []
|
|
actions: unknown[] = []
|
|
active: string = ""
|
|
sticky: boolean = false
|
|
openOnHover: boolean = false
|
|
maxWidth: string = "full"
|
|
mobileLabel: string = "Toggle navigation"
|
|
class: string = ""
|
|
}
|
|
|
|
state mobileOpen: boolean = false
|
|
|
|
functions {
|
|
client function toggleNavigation() {
|
|
mobileOpen = !mobileOpen
|
|
output.toggle({ open: mobileOpen })
|
|
output[mobileOpen ? "open" : "close"]({ source: "mobile" })
|
|
}
|
|
|
|
client function selectItem(item, level) {
|
|
mobileOpen = false
|
|
output.select({ item: item, value: item.value || "", level: level })
|
|
}
|
|
|
|
client function selectAction(item) {
|
|
mobileOpen = false
|
|
output.action({ item: item, value: item.value || "" })
|
|
}
|
|
|
|
shared function isItemActive(item) {
|
|
if (!item) return false
|
|
if (item.value && item.value === active) return true
|
|
if (!item.children || !item.children.length) return false
|
|
return item.children.some(function (child) {
|
|
return isItemActive(child)
|
|
})
|
|
}
|
|
|
|
client function toggleDropdown(event, item) {
|
|
output[event.currentTarget.open ? "open" : "close"]({
|
|
source: "menu",
|
|
item: item
|
|
})
|
|
}
|
|
}
|
|
|
|
view {
|
|
<header class="wire-navbar wire-navbar--width-{maxWidth} wire-next--color-{color} wire-next--size-{size} {sticky ? 'wire-navbar--sticky' : ''} {class}" data-wrn-navbar data-open-on-hover="{openOnHover}">
|
|
<div class="wire-navbar__topbar" aria-label="{topbarLabel}">
|
|
<slot name="topbar" />
|
|
</div>
|
|
|
|
<div class="wire-navbar__main">
|
|
<a class="wire-navbar__brand" href="{brand.href || '/'}" aria-label="{brand.ariaLabel || brand.label || label}">
|
|
{#if brand.logo}
|
|
<img class="wire-navbar__brand-logo" src="{brand.logo}" alt="{brand.logoAlt || brand.label || ''}" width="{brand.logoWidth || ''}" height="{brand.logoHeight || ''}" />
|
|
{/if}
|
|
{#if brand.icon}
|
|
<span class="wire-navbar__brand-icon {brand.icon}" aria-hidden="true"></span>
|
|
{/if}
|
|
{#if brand.label || brand.description}
|
|
<span class="wire-navbar__brand-copy">
|
|
{#if brand.label}<strong>{brand.label}</strong>{/if}
|
|
{#if brand.description}<small>{brand.description}</small>{/if}
|
|
</span>
|
|
{/if}
|
|
</a>
|
|
|
|
<button type="button" class="wire-navbar__toggle" aria-label="{mobileLabel}" aria-expanded="{mobileOpen}" @click="toggleNavigation()">
|
|
<span aria-hidden="true"></span><span aria-hidden="true"></span><span aria-hidden="true"></span>
|
|
</button>
|
|
|
|
<div class="wire-navbar__collapse {mobileOpen ? 'is-open' : ''}">
|
|
<nav class="wire-navbar__menus" aria-label="{label}" data-wrn-roving="horizontal">
|
|
{#each items as item}
|
|
{#if item.children && item.children.length}
|
|
<details class="wire-navbar__dropdown wire-navbar__dropdown--{item.type || 'dropdown'}" name="wire-navbar-menu" @toggle="toggleDropdown(event, item)">
|
|
<summary data-wrn-roving-item="true" aria-current="{isItemActive(item) ? 'page' : 'false'}">
|
|
{#if item.icon}<span class="{item.icon}" aria-hidden="true"></span>{/if}
|
|
<span>{item.label}</span>
|
|
<span class="wire-navbar__chevron" aria-hidden="true"></span>
|
|
</summary>
|
|
<div class="wire-navbar__panel wire-navbar__panel--columns-{item.columns || 1}">
|
|
{#if item.description}<p class="wire-navbar__panel-intro">{item.description}</p>{/if}
|
|
{#each item.children as child}
|
|
<div class="wire-navbar__group">
|
|
{#if child.children && child.children.length}
|
|
{#if child.label}<strong class="wire-navbar__group-title">{child.label}</strong>{/if}
|
|
{#if child.description}<small>{child.description}</small>{/if}
|
|
{#each child.children as nested}
|
|
<a href="{nested.href || '#'}" target="{nested.target || ''}" rel="{nested.rel || ''}" aria-current="{nested.value === active ? 'page' : 'false'}" @click="selectItem(nested, 3)">
|
|
{#if nested.icon}<span class="{nested.icon}" aria-hidden="true"></span>{/if}
|
|
<span><strong>{nested.label}</strong>{#if nested.description}<small>{nested.description}</small>{/if}</span>
|
|
</a>
|
|
{/each}
|
|
{:else}
|
|
<a href="{child.href || '#'}" target="{child.target || ''}" rel="{child.rel || ''}" aria-current="{child.value === active ? 'page' : 'false'}" @click="selectItem(child, 2)">
|
|
{#if child.icon}<span class="{child.icon}" aria-hidden="true"></span>{/if}
|
|
<span><strong>{child.label}</strong>{#if child.description}<small>{child.description}</small>{/if}</span>
|
|
</a>
|
|
{/if}
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</details>
|
|
{:else}
|
|
<a class="wire-navbar__menu-link" data-wrn-roving-item="true" href="{item.href || '#'}" target="{item.target || ''}" rel="{item.rel || ''}" aria-current="{item.value === active ? 'page' : 'false'}" @click="selectItem(item, 1)">
|
|
{#if item.icon}<span class="{item.icon}" aria-hidden="true"></span>{/if}
|
|
<span>{item.label}</span>
|
|
</a>
|
|
{/if}
|
|
{/each}
|
|
</nav>
|
|
|
|
<div class="wire-navbar__actions">
|
|
{#each actions as item}
|
|
<a class="wire-navbar__action wire-navbar__action--{item.variant || 'link'}" href="{item.href || '#'}" target="{item.target || ''}" rel="{item.rel || ''}" @click="selectAction(item)">
|
|
{#if item.icon}<span class="{item.icon}" aria-hidden="true"></span>{/if}
|
|
<span>{item.label}</span>
|
|
</a>
|
|
{/each}
|
|
<slot name="actions" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
}
|
|
|
|
style {
|
|
/* Full application navigation */
|
|
.wire-navbar {
|
|
position: relative;
|
|
z-index: 40;
|
|
width: 100%;
|
|
color: var(--wire-color-text);
|
|
background: color-mix(in srgb, var(--wire-color-surface) 96%, transparent);
|
|
border-bottom: 1px solid var(--wire-color-border);
|
|
}
|
|
|
|
.wire-navbar--sticky {
|
|
position: sticky;
|
|
top: 0;
|
|
backdrop-filter: blur(16px);
|
|
}
|
|
|
|
.wire-navbar__topbar:empty,
|
|
.wire-navbar__topbar:not(:has(*)) {
|
|
display: none;
|
|
}
|
|
|
|
.wire-navbar__topbar:not(:empty) {
|
|
display: flex;
|
|
min-height: 2.25rem;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
padding: 0.35rem clamp(1rem, 4vw, 3rem);
|
|
color: var(--wire-color-muted);
|
|
background: var(--wire-color-surface-2);
|
|
border-bottom: 1px solid var(--wire-color-border);
|
|
font-size: 0.75rem;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.wire-navbar__main {
|
|
display: flex;
|
|
min-height: 4.25rem;
|
|
width: min(100%, 90rem);
|
|
margin-inline: auto;
|
|
padding: 0.75rem clamp(1rem, 4vw, 3rem);
|
|
align-items: center;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.wire-navbar--width-full .wire-navbar__main {
|
|
width: 100%;
|
|
max-width: none;
|
|
}
|
|
|
|
.wire-navbar--width-compact .wire-navbar__main {
|
|
width: min(86%, 80rem);
|
|
}
|
|
|
|
.wire-navbar__brand,
|
|
.wire-navbar__menu-link,
|
|
.wire-navbar__dropdown summary,
|
|
.wire-navbar__action,
|
|
.wire-navbar__panel a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.wire-navbar__brand {
|
|
display: inline-flex;
|
|
min-width: 0;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.wire-navbar__brand-logo {
|
|
display: block;
|
|
width: auto;
|
|
max-width: 11rem;
|
|
height: 2.5rem;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.wire-navbar__brand-icon {
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
color: var(--wire-component-color, var(--wire-color-primary));
|
|
}
|
|
|
|
.wire-navbar__brand-copy {
|
|
display: grid;
|
|
min-width: 0;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.wire-navbar__brand-copy strong {
|
|
font-size: 0.9rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.wire-navbar__brand-copy small {
|
|
margin-top: 0.2rem;
|
|
color: var(--wire-color-muted);
|
|
font-size: 0.6875rem;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.wire-navbar__collapse,
|
|
.wire-navbar__menus,
|
|
.wire-navbar__actions {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.wire-navbar__collapse {
|
|
min-width: 0;
|
|
flex: 1;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.wire-navbar__menus {
|
|
justify-content: center;
|
|
flex: 1;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.wire-navbar__actions {
|
|
justify-content: flex-end;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.wire-navbar__menu-link,
|
|
.wire-navbar__dropdown > summary,
|
|
.wire-navbar__action {
|
|
display: inline-flex;
|
|
min-height: 2.75rem;
|
|
padding: 0.65rem 0.8rem;
|
|
align-items: center;
|
|
gap: 0.45rem;
|
|
border-radius: 0.65rem;
|
|
cursor: pointer;
|
|
font-size: 0.8125rem;
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.wire-navbar__menu-link:hover,
|
|
.wire-navbar__dropdown > summary:hover {
|
|
color: var(--wire-color-text);
|
|
background: var(--wire-color-surface-2);
|
|
}
|
|
|
|
.wire-navbar__menu-link[aria-current="page"],
|
|
.wire-navbar__dropdown > summary[aria-current="page"] {
|
|
color: var(--wire-component-color, var(--wire-color-primary));
|
|
font-weight: 600;
|
|
background: color-mix(
|
|
in srgb,
|
|
var(--wire-component-color, var(--wire-color-primary)) 12%,
|
|
transparent
|
|
);
|
|
box-shadow: inset 0 -2px 0 var(--wire-component-color, var(--wire-color-primary));
|
|
}
|
|
|
|
.wire-navbar__menu-link[aria-current="page"]:hover,
|
|
.wire-navbar__dropdown > summary[aria-current="page"]:hover {
|
|
color: var(--wire-component-color, var(--wire-color-primary));
|
|
background: color-mix(
|
|
in srgb,
|
|
var(--wire-component-color, var(--wire-color-primary)) 16%,
|
|
transparent
|
|
);
|
|
}
|
|
|
|
.wire-navbar__dropdown {
|
|
position: relative;
|
|
}
|
|
|
|
.wire-navbar__dropdown > summary {
|
|
list-style: none;
|
|
}
|
|
|
|
.wire-navbar__dropdown > summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
.wire-navbar__chevron {
|
|
width: 0.45rem;
|
|
height: 0.45rem;
|
|
border-right: 1.5px solid currentColor;
|
|
border-bottom: 1.5px solid currentColor;
|
|
transform: rotate(45deg) translateY(-0.15rem);
|
|
transition: transform var(--wire-motion-fast, 150ms) ease;
|
|
}
|
|
|
|
.wire-navbar__dropdown[open] .wire-navbar__chevron {
|
|
transform: rotate(225deg) translate(-0.1rem, -0.1rem);
|
|
}
|
|
|
|
.wire-navbar__panel {
|
|
position: absolute;
|
|
top: calc(100% + 0.55rem);
|
|
left: 50%;
|
|
display: grid;
|
|
width: max-content;
|
|
min-width: 15rem;
|
|
max-width: min(90vw, 64rem);
|
|
padding: 0.65rem;
|
|
gap: 0.45rem;
|
|
border: 1px solid var(--wire-color-border);
|
|
border-radius: 0.9rem;
|
|
color: var(--wire-color-text);
|
|
background: var(--wire-color-surface);
|
|
box-shadow: 0 18px 48px rgb(15 23 42 / 0.16);
|
|
opacity: 1;
|
|
transform: translateX(-50%) translateY(0) scale(1);
|
|
transform-origin: top center;
|
|
transition:
|
|
opacity 180ms ease,
|
|
transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
|
|
display 180ms allow-discrete;
|
|
}
|
|
|
|
.wire-navbar__panel::before {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 100%;
|
|
left: 0;
|
|
height: 0.65rem;
|
|
content: "";
|
|
}
|
|
|
|
.wire-navbar__dropdown:not([open]) > .wire-navbar__panel {
|
|
display: none;
|
|
opacity: 0;
|
|
transform: translateX(-50%) translateY(-0.5rem) scale(0.98);
|
|
}
|
|
|
|
@starting-style {
|
|
.wire-navbar__dropdown[open] > .wire-navbar__panel {
|
|
opacity: 0;
|
|
transform: translateX(-50%) translateY(-0.5rem) scale(0.98);
|
|
}
|
|
}
|
|
|
|
.wire-navbar__dropdown--mega {
|
|
position: static;
|
|
}
|
|
|
|
.wire-navbar__dropdown--mega .wire-navbar__panel {
|
|
right: auto;
|
|
left: 50%;
|
|
width: min(calc(100vw - 2rem), 64rem);
|
|
}
|
|
|
|
.wire-navbar__panel--columns-2 {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.wire-navbar__panel--columns-3 {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
|
|
.wire-navbar__panel--columns-4 {
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
}
|
|
|
|
.wire-navbar__panel-intro {
|
|
grid-column: 1 / -1;
|
|
margin: 0;
|
|
padding: 0.5rem 0.65rem;
|
|
color: var(--wire-color-muted);
|
|
font-size: 0.8125rem;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.wire-navbar__group {
|
|
display: grid;
|
|
align-content: start;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.wire-navbar__group-title {
|
|
padding: 0.55rem 0.65rem 0.25rem;
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.wire-navbar__group > small {
|
|
padding: 0 0.65rem 0.4rem;
|
|
color: var(--wire-color-muted);
|
|
font-size: 0.7rem;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.wire-navbar__panel a {
|
|
display: flex;
|
|
min-height: 2.75rem;
|
|
padding: 0.65rem;
|
|
align-items: flex-start;
|
|
gap: 0.65rem;
|
|
border-radius: 0.6rem;
|
|
font-size: 0.8rem;
|
|
font-weight: 450;
|
|
}
|
|
|
|
.wire-navbar__panel a:hover {
|
|
background: var(--wire-color-surface-2);
|
|
}
|
|
|
|
.wire-navbar__panel a span:last-child {
|
|
display: grid;
|
|
gap: 0.15rem;
|
|
}
|
|
|
|
.wire-navbar__panel a strong {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.wire-navbar__panel a small {
|
|
color: var(--wire-color-muted);
|
|
font-size: 0.7rem;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.wire-navbar__action {
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
.wire-navbar__action--primary {
|
|
color: var(--wire-color-on-primary, #fff);
|
|
background: var(--wire-component-color, var(--wire-color-primary));
|
|
font-weight: 600;
|
|
}
|
|
|
|
.wire-navbar__action--outline {
|
|
border-color: var(--wire-color-border);
|
|
}
|
|
|
|
.wire-navbar__toggle {
|
|
display: none;
|
|
width: 2.75rem;
|
|
height: 2.75rem;
|
|
margin-left: auto;
|
|
padding: 0.65rem;
|
|
border: 1px solid var(--wire-color-border);
|
|
border-radius: 0.65rem;
|
|
color: inherit;
|
|
background: var(--wire-color-surface);
|
|
}
|
|
|
|
.wire-navbar__toggle span {
|
|
display: block;
|
|
height: 2px;
|
|
margin: 0.25rem 0;
|
|
background: currentColor;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.wire-navbar--width-compact .wire-navbar__main {
|
|
width: 100%;
|
|
}
|
|
.wire-navbar__toggle {
|
|
display: block;
|
|
}
|
|
.wire-navbar__collapse {
|
|
position: absolute;
|
|
top: 100%;
|
|
right: 0;
|
|
left: 0;
|
|
display: none;
|
|
padding: 0.75rem 1rem 1rem;
|
|
align-items: stretch;
|
|
flex-direction: column;
|
|
background: var(--wire-color-surface);
|
|
border-bottom: 1px solid var(--wire-color-border);
|
|
box-shadow: 0 16px 32px rgb(15 23 42 / 0.12);
|
|
max-height: calc(100dvh - 4rem);
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
overscroll-behavior: contain;
|
|
}
|
|
.wire-navbar__collapse.is-open {
|
|
display: flex;
|
|
}
|
|
.wire-navbar__menus,
|
|
.wire-navbar__actions {
|
|
width: 100%;
|
|
align-items: stretch;
|
|
flex-direction: column;
|
|
}
|
|
.wire-navbar__menu-link,
|
|
.wire-navbar__dropdown > summary,
|
|
.wire-navbar__action {
|
|
width: 100%;
|
|
}
|
|
.wire-navbar__panel,
|
|
.wire-navbar__dropdown--mega .wire-navbar__panel {
|
|
position: static;
|
|
width: 100%;
|
|
max-width: none;
|
|
margin-top: 0.25rem;
|
|
box-shadow: none;
|
|
transform: none;
|
|
overflow: hidden;
|
|
animation: wire-navbar-mobile-panel 180ms ease both;
|
|
}
|
|
.wire-navbar__dropdown:not([open]) > .wire-navbar__panel,
|
|
.wire-navbar__dropdown[open] > .wire-navbar__panel {
|
|
transform: none;
|
|
}
|
|
.wire-navbar__panel[class*="wire-navbar__panel--columns-"] {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.wire-navbar__panel::before {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.wire-navbar__brand-copy small {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@keyframes wire-navbar-mobile-panel {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-0.35rem);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
}
|
|
}
|