feat: release design system engine, studio and component contracts

packages/ui/components/Navbar.wrn

@@ -157,7 +157,7 @@ size: string = "default"
     }
 
     client function toggleDropdown(event, item) {
-      output[event.currentTarget.open ? "open" : "close"]({
+      output[event.detail.open ? "open" : "close"]({
         source: "menu",
         item: item
       })
@@ -165,22 +165,22 @@ size: string = "default"
   }
 
   view {
-    <header class="wrn-navbar wrn-navbar--width-{maxWidth} wrn-component--color-{color} wrn-component--size-{size} {sticky ? 'wrn-navbar--sticky' : ''} {floating ? 'wrn-navbar--floating' : ''} {class}" style="--wrn-navbar-floating-start: {startFloating};" data-wrn-navbar data-open-on-hover="{openOnHover}" data-floating="{floating ? 'true' : 'false'}" data-collapse-at="{collapseAt}" data-mobile-panel="{mobilePanel}" data-mobile-utilities-position="{mobileUtilitiesPosition}" data-gutter="{gutter}" data-content-gutter="{contentGutter}" data-flush-mobile="{flushMobile ? 'true' : 'false'}">
-      <div class="wrn-navbar__topbar" aria-label="{topbarLabel}">
+    <header class="wrn-navbar wrn-navbar--width-{maxWidth} wrn-component--color-{color} wrn-component--size-{size} {sticky ? 'wrn-navbar--sticky' : ''} {floating ? 'wrn-navbar--floating' : ''} {class}" style="--wrn-navbar-floating-start: {startFloating};" data-wrn-navbar data-open-on-hover="{openOnHover}" data-floating="{floating ? 'true' : 'false'}" data-collapse-at="{collapseAt}" data-mobile-panel="{mobilePanel}" data-mobile-utilities-position="{mobileUtilitiesPosition}" data-gutter="{gutter}" data-content-gutter="{contentGutter}" data-flush-mobile="{flushMobile ? 'true' : 'false'}" data-wrn-owner="Navbar" data-wrn-part="root" data-wrn-component="Navbar" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
+      <div class="wrn-navbar__topbar" aria-label="{topbarLabel}" data-wrn-owner="Navbar" data-wrn-part="topbar" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
         <slot name="topbar" />
       </div>
 
-      <div class="wrn-navbar__main">
+      <div class="wrn-navbar__main" data-wrn-owner="Navbar" data-wrn-part="main" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
         {#if brand.logo || brand.icon || brand.label || brand.description}
-        <a class="wrn-navbar__brand" href="{brand.href || '/'}" aria-label="{brand.ariaLabel || brand.label || label}">
+        <a class="wrn-navbar__brand" href="{brand.href || '/'}" aria-label="{brand.ariaLabel || brand.label || label}" data-wrn-owner="Navbar" data-wrn-part="brand" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
           {#if brand.logo}
-            <img class="wrn-navbar__brand-logo" src="{brand.logo}" alt="{brand.logoAlt || brand.label || ''}" width="{brand.logoWidth || ''}" height="{brand.logoHeight || ''}" />
+            <img class="wrn-navbar__brand-logo" src="{brand.logo}" alt="{brand.logoAlt || brand.label || ''}" width="{brand.logoWidth || ''}" height="{brand.logoHeight || ''}"  data-wrn-owner="Navbar" data-wrn-part="brandLogo" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"/>
           {/if}
           {#if brand.icon}
-            <span class="wrn-navbar__brand-icon {brand.icon}" aria-hidden="true"></span>
+            <span class="wrn-navbar__brand-icon {brand.icon}" aria-hidden="true" data-wrn-owner="Navbar" data-wrn-part="brandIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"></span>
           {/if}
           {#if brand.label || brand.description}
-            <span class="wrn-navbar__brand-copy">
+            <span class="wrn-navbar__brand-copy" data-wrn-owner="Navbar" data-wrn-part="brandCopy" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
               {#if brand.label}<strong data-t="{brand.labelKey || (translationPrefix ? translationPrefix + '.brand' : '')}">{brand.label}</strong>{/if}
               {#if brand.description}<small data-t="{brand.descriptionKey || (translationPrefix ? translationPrefix + '.brand.description' : '')}">{brand.description}</small>{/if}
             </span>
@@ -189,8 +189,8 @@ size: string = "default"
         {/if}
         <slot name="brand" />
 
-        <div class="wrn-navbar__collapse {mobileOpen ? 'is-open' : ''}">
-          <nav class="wrn-navbar__menus" aria-label="{label}" data-wrn-roving="horizontal">
+        <div class="wrn-navbar__collapse {mobileOpen ? 'is-open' : ''}" data-wrn-owner="Navbar" data-wrn-part="collapse" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
+          <nav class="wrn-navbar__menus" aria-label="{label}" data-wrn-roving="horizontal" data-wrn-owner="Navbar" data-wrn-part="menus" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
             {#each items as item}
               {#if itemType(item) === "mega"}
                 <MegaMenu
@@ -214,32 +214,32 @@ size: string = "default"
                   actionIcon="{megaData(item).actionIcon || 'icon-[lucide--arrow-right]'}"
                   footer="{megaData(item).footer || ''}"
                 />
-                <a class="wrn-navbar__menu-link wrn-navbar__mobile-mega-link" data-wrn-roving-item="true" href="{item.href || megaData(item).actionHref || '#'}" target="{item.target || ''}" rel="{item.rel || ''}" aria-current="{isItemActive(item) ? 'page' : 'false'}" @click="selectItem(item, 1, event)">
+                <a class="wrn-navbar__menu-link wrn-navbar__mobile-mega-link" data-wrn-roving-item="true" href="{item.href || megaData(item).actionHref || '#'}" target="{item.target || ''}" rel="{item.rel || ''}" aria-current="{isItemActive(item) ? 'page' : 'false'}" @click="selectItem(item, 1, event)" data-wrn-owner="Navbar" data-wrn-part="menuLink" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
                   {#if item.icon}<span class="{item.icon}" aria-hidden="true"></span>{/if}
                   <span data-t="{translationKey(item, 'label')}">{item.label}</span>
                 </a>
               {:else if itemType(item) === "dropdown"}
-                <details class="wrn-navbar__dropdown wrn-navbar__dropdown--{item.type || 'dropdown'}" name="wrn-navbar-menu" @toggle="toggleDropdown(event, item)">
-                  <summary data-wrn-roving-item="true" aria-current="{isItemActive(item) ? 'page' : 'false'}">
+                <div data-wrn-menu data-open="false" class="wrn-navbar__dropdown wrn-navbar__dropdown--{item.type || 'dropdown'}" name="wrn-navbar-menu" @wrn-menu-toggle="toggleDropdown(event, item)" data-wrn-owner="Navbar" data-wrn-part="dropdown" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
+                  <button type="button" data-wrn-menu-toggle aria-expanded="false" data-wrn-roving-item="true" aria-current="{isItemActive(item) ? 'page' : 'false'}" data-wrn-owner="Navbar" data-wrn-part="trigger" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
                     {#if item.icon}<span class="{item.icon}" aria-hidden="true"></span>{/if}
                     <span data-t="{translationKey(item, 'label')}">{item.label}</span>
-                    <span class="wrn-navbar__chevron" aria-hidden="true"></span>
-                  </summary>
-                  <div class="wrn-navbar__panel wrn-navbar__panel--columns-{item.columns || 1}">
-                    {#if item.description}<p class="wrn-navbar__panel-intro" data-t="{translationKey(item, 'description')}">{item.description}</p>{/if}
+                    <span class="wrn-navbar__chevron" aria-hidden="true" data-wrn-owner="Navbar" data-wrn-part="chevron" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"></span>
+                  </button>
+                  <div class="wrn-navbar__panel wrn-navbar__panel--columns-{item.columns || 1}" data-wrn-owner="Navbar" data-wrn-part="panel" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
+                    {#if item.description}<p class="wrn-navbar__panel-intro" data-t="{translationKey(item, 'description')}" data-wrn-owner="Navbar" data-wrn-part="panelIntro" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{item.description}</p>{/if}
                     {#each dropdownItems(item) as child}
-                      <div class="wrn-navbar__group">
+                      <div class="wrn-navbar__group" data-wrn-owner="Navbar" data-wrn-part="group" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
                         {#if dropdownGroupItems(child).length}
-                          {#if child.label}<strong class="wrn-navbar__group-title" data-t="{translationKey(child, 'label')}">{child.label}</strong>{/if}
+                          {#if child.label}<strong class="wrn-navbar__group-title" data-t="{translationKey(child, 'label')}" data-wrn-owner="Navbar" data-wrn-part="groupTitle" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{child.label}</strong>{/if}
                           {#if child.description}<small data-t="{translationKey(child, 'description')}">{child.description}</small>{/if}
                           {#each dropdownGroupItems(child) as nested}
-                            <a href="{nested.href || '#'}" target="{nested.target || ''}" rel="{nested.rel || ''}" aria-current="{nested.value === active ? 'page' : 'false'}" @click="selectItem(nested, 3, event)">
+                            <a href="{nested.href || '#'}" target="{nested.target || ''}" rel="{nested.rel || ''}" aria-current="{nested.value === active ? 'page' : 'false'}" @click="selectItem(nested, 3, event)" data-wrn-owner="Navbar" data-wrn-part="link" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
                               {#if nested.icon}<span class="{nested.icon}" aria-hidden="true"></span>{/if}
                               <span><strong data-t="{translationKey(nested, 'label')}">{nested.label}</strong>{#if nested.description}<small data-t="{translationKey(nested, 'description')}">{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, event)">
+                          <a href="{child.href || '#'}" target="{child.target || ''}" rel="{child.rel || ''}" aria-current="{child.value === active ? 'page' : 'false'}" @click="selectItem(child, 2, event)" data-wrn-owner="Navbar" data-wrn-part="link" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
                             {#if child.icon}<span class="{child.icon}" aria-hidden="true"></span>{/if}
                             <span><strong data-t="{translationKey(child, 'label')}">{child.label}</strong>{#if child.description}<small data-t="{translationKey(child, 'description')}">{child.description}</small>{/if}</span>
                           </a>
@@ -247,9 +247,9 @@ size: string = "default"
                       </div>
                     {/each}
                   </div>
-                </details>
+                </div>
               {:else}
-                <a class="wrn-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, event)">
+                <a class="wrn-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, event)" data-wrn-owner="Navbar" data-wrn-part="menuLink" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
                   {#if item.icon}<span class="{item.icon}" aria-hidden="true"></span>{/if}
                   <span data-t="{translationKey(item, 'label')}">{item.label}</span>
                 </a>
@@ -257,10 +257,10 @@ size: string = "default"
             {/each}
           </nav>
 
-          <div class="wrn-navbar__actions">
+          <div class="wrn-navbar__actions" data-wrn-owner="Navbar" data-wrn-part="actions" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
             <slot name="actions" />
             {#each actions as item}
-              <a class="wrn-navbar__action wrn-navbar__action--{item.variant || 'link'}" href="{item.href || '#'}" target="{item.target || ''}" rel="{item.rel || ''}" @click="selectAction(item, event)">
+              <a class="wrn-navbar__action wrn-navbar__action--{item.variant || 'link'}" href="{item.href || '#'}" target="{item.target || ''}" rel="{item.rel || ''}" @click="selectAction(item, event)" data-wrn-owner="Navbar" data-wrn-part="action" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
                 {#if item.icon}<span class="{item.icon}" aria-hidden="true"></span>{/if}
                 <span data-t="{translationKey(item, 'label')}">{item.label}</span>
               </a>
@@ -268,9 +268,9 @@ size: string = "default"
           </div>
         </div>
 
-        <div class="wrn-navbar__utilities"><slot name="utilities" /></div>
+        <div class="wrn-navbar__utilities" data-wrn-owner="Navbar" data-wrn-part="utilities" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"><slot name="utilities" /></div>
 
-        <button type="button" class="wrn-navbar__toggle" aria-label="{mobileLabel}" aria-expanded="{mobileOpen}" @click="toggleNavigation(event)">
+        <button type="button" class="wrn-navbar__toggle" aria-label="{mobileLabel}" aria-expanded="{mobileOpen}" @click="toggleNavigation(event)" data-wrn-owner="Navbar" data-wrn-part="toggle" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
           <span aria-hidden="true"></span><span aria-hidden="true"></span><span aria-hidden="true"></span>
         </button>
       </div>
@@ -353,7 +353,7 @@ size: string = "default"
 
     .wrn-navbar__brand,
     .wrn-navbar__menu-link,
-    .wrn-navbar__dropdown summary,
+    .wrn-navbar__dropdown [data-wrn-menu-toggle],
     .wrn-navbar__action,
     .wrn-navbar__panel a {
       color: inherit;
@@ -465,7 +465,7 @@ size: string = "default"
     }
 
     .wrn-navbar__menu-link,
-    .wrn-navbar__dropdown > summary,
+    .wrn-navbar__dropdown > [data-wrn-menu-toggle],
     .wrn-navbar__action {
       display: inline-flex;
       min-height: 2.25rem;
@@ -482,14 +482,14 @@ size: string = "default"
     }
 
     .wrn-navbar__menu-link:hover,
-    .wrn-navbar__dropdown > summary:hover,
+    .wrn-navbar__dropdown > [data-wrn-menu-toggle]:hover,
     .wrn-navbar__mega .wrn-mega__trigger:hover {
       color: var(--wrn-color-text);
       background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
     }
 
     .wrn-navbar__menu-link[aria-current="page"],
-    .wrn-navbar__dropdown > summary[aria-current="page"],
+    .wrn-navbar__dropdown > [data-wrn-menu-toggle][aria-current="page"],
     .wrn-navbar__mega[data-active="true"] .wrn-mega__trigger {
       color: var(--wrn-color-text);
       font-weight: 600;
@@ -498,7 +498,7 @@ size: string = "default"
     }
 
     .wrn-navbar__menu-link[aria-current="page"]:hover,
-    .wrn-navbar__dropdown > summary[aria-current="page"]:hover,
+    .wrn-navbar__dropdown > [data-wrn-menu-toggle][aria-current="page"]:hover,
     .wrn-navbar__mega[data-active="true"] .wrn-mega__trigger:hover {
       color: var(--wrn-color-text);
       background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
@@ -508,14 +508,10 @@ size: string = "default"
       position: relative;
     }
 
-    .wrn-navbar__dropdown > summary {
+    .wrn-navbar__dropdown > [data-wrn-menu-toggle] {
       list-style: none;
     }
 
-    .wrn-navbar__dropdown > summary::-webkit-details-marker {
-      display: none;
-    }
-
     .wrn-navbar__chevron {
       width: 0.45rem;
       height: 0.45rem;
@@ -525,7 +521,7 @@ size: string = "default"
       transition: transform var(--wrn-motion-fast, 150ms) ease;
     }
 
-    .wrn-navbar__dropdown[open] .wrn-navbar__chevron {
+    .wrn-navbar__dropdown[data-open="true"] .wrn-navbar__chevron {
       transform: rotate(225deg) translate(-0.1rem, -0.1rem);
     }
 
@@ -560,14 +556,14 @@ size: string = "default"
       content: "";
     }
 
-    .wrn-navbar__dropdown:not([open]) > .wrn-navbar__panel {
+    .wrn-navbar__dropdown:not([data-open="true"]) > .wrn-navbar__panel {
       display: none;
       opacity: 0;
       transform: translateX(-50%) translateY(-0.5rem) scale(0.98);
     }
 
     @starting-style {
-      .wrn-navbar__dropdown[open] > .wrn-navbar__panel {
+      .wrn-navbar__dropdown[data-open="true"] > .wrn-navbar__panel {
         opacity: 0;
         transform: translateX(-50%) translateY(-0.5rem) scale(0.98);
       }
@@ -768,7 +764,7 @@ size: string = "default"
     .wrn-navbar__mega { display: none; }
     .wrn-navbar__mobile-mega-link { display: flex; }
     .wrn-navbar__menu-link,
-      .wrn-navbar__dropdown > summary,
+      .wrn-navbar__dropdown > [data-wrn-menu-toggle],
       .wrn-navbar__action {
         width: 100%;
       }
@@ -789,8 +785,8 @@ size: string = "default"
         max-width: 100%;
         margin-top: 0.25rem;
       }
-    .wrn-navbar__dropdown:not([open]) > .wrn-navbar__panel,
-      .wrn-navbar__dropdown[open] > .wrn-navbar__panel {
+    .wrn-navbar__dropdown:not([data-open="true"]) > .wrn-navbar__panel,
+      .wrn-navbar__dropdown[data-open="true"] > .wrn-navbar__panel {
         transform: none;
       }
     .wrn-navbar__panel[class*="wrn-navbar__panel--columns-"] {
@@ -828,7 +824,7 @@ size: string = "default"
         flex: none;
         flex-direction: column;
       }
-      .wrn-navbar[data-collapse-at="1100px"] :is(.wrn-navbar__menu-link, .wrn-navbar__dropdown > summary, .wrn-navbar__action) { width: 100%; }
+      .wrn-navbar[data-collapse-at="1100px"] :is(.wrn-navbar__menu-link, .wrn-navbar__dropdown > [data-wrn-menu-toggle], .wrn-navbar__action) { width: 100%; }
       .wrn-navbar[data-collapse-at="1100px"] :is(.wrn-navbar__mega, .wrn-navbar__mega .wrn-mega__trigger) { width: 100%; }
       .wrn-navbar[data-collapse-at="1100px"] .wrn-navbar__mega { display: none; }
       .wrn-navbar[data-collapse-at="1100px"] .wrn-navbar__mobile-mega-link { display: flex; }