feat: release design system engine, studio and component contracts

packages/ui/components/PreferenceSwitcher.wrn

@@ -44,51 +44,51 @@ size: string = "default"
   }
 
   view {
-    <div class="wrn-preferences wrn-component--color-{color} wrn-component--size-{size} {compact ? 'wrn-preferences--compact' : ''} {class}" data-wrn-preferences data-icon-only="{iconOnly ? 'true' : 'false'}" data-panel-placement="{panelPlacement}" data-mobile-panel="{mobilePanel}" aria-label="Display and language preferences">
-      <details class="wrn-preferences__menu" name="wrn-preference-menu">
-        <summary aria-label="{themeLabel}" title="{themeLabel}">
+    <div class="wrn-preferences wrn-component--color-{color} wrn-component--size-{size} {compact ? 'wrn-preferences--compact' : ''} {class}" data-wrn-preferences data-icon-only="{iconOnly ? 'true' : 'false'}" data-panel-placement="{panelPlacement}" data-mobile-panel="{mobilePanel}" aria-label="Display and language preferences" data-wrn-owner="PreferenceSwitcher" data-wrn-part="root" data-wrn-component="PreferenceSwitcher" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-compact="{compact}">
+      <div data-wrn-menu data-open="false" class="wrn-preferences__menu" name="wrn-preference-menu" data-wrn-owner="PreferenceSwitcher" data-wrn-part="menu" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-compact="{compact}">
+        <button type="button" data-wrn-menu-toggle aria-expanded="false" aria-label="{themeLabel}" title="{themeLabel}" data-wrn-owner="PreferenceSwitcher" data-wrn-part="trigger" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-compact="{compact}">
           <span class="{themeIcon}" aria-hidden="true"></span>
           {#if !iconOnly && !compact}<span>{themeLabel}</span>{/if}
-        </summary>
-        <div class="wrn-preferences__panel">
+        </button>
+        <div class="wrn-preferences__panel" data-wrn-owner="PreferenceSwitcher" data-wrn-part="panel" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-compact="{compact}">
           <strong>{themeLabel}</strong>
-          <div class="wrn-preferences__options">
-            <button type="button" data-wrn-theme-set="light" @click="choose('theme', 'light')"><span class="icon-[lucide--sun]" aria-hidden="true"></span>Light</button>
-            <button type="button" data-wrn-theme-set="dark" @click="choose('theme', 'dark')"><span class="icon-[lucide--moon]" aria-hidden="true"></span>Dark</button>
+          <div class="wrn-preferences__options" data-wrn-owner="PreferenceSwitcher" data-wrn-part="options" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-compact="{compact}">
+            <button type="button" data-wrn-theme-set="light" @click="choose('theme', 'light')" data-wrn-owner="PreferenceSwitcher" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-compact="{compact}"><span class="icon-[lucide--sun]" aria-hidden="true"></span>Light</button>
+            <button type="button" data-wrn-theme-set="dark" @click="choose('theme', 'dark')" data-wrn-owner="PreferenceSwitcher" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-compact="{compact}"><span class="icon-[lucide--moon]" aria-hidden="true"></span>Dark</button>
           </div>
         </div>
-      </details>
+      </div>
 
-      <details class="wrn-preferences__menu" name="wrn-preference-menu">
-        <summary aria-label="{colorLabel}" title="{colorLabel}">
+      <div data-wrn-menu data-open="false" class="wrn-preferences__menu" name="wrn-preference-menu" data-wrn-owner="PreferenceSwitcher" data-wrn-part="menu" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-compact="{compact}">
+        <button type="button" data-wrn-menu-toggle aria-expanded="false" aria-label="{colorLabel}" title="{colorLabel}" data-wrn-owner="PreferenceSwitcher" data-wrn-part="trigger" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-compact="{compact}">
           <span class="{colorIcon}" aria-hidden="true"></span>
           {#if !iconOnly && !compact}<span>{colorLabel}</span>{/if}
-        </summary>
-        <div class="wrn-preferences__panel wrn-preferences__panel--colors">
+        </button>
+        <div class="wrn-preferences__panel wrn-preferences__panel--colors" data-wrn-owner="PreferenceSwitcher" data-wrn-part="panel" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-compact="{compact}">
           <strong>{colorLabel}</strong>
-          <div class="wrn-preferences__swatches">
+          <div class="wrn-preferences__swatches" data-wrn-owner="PreferenceSwitcher" data-wrn-part="swatches" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-compact="{compact}">
             {#each colors as item}
-              <button type="button" data-wrn-accent-set="{item.value}" aria-label="{item.label}" title="{item.label}" style="--wrn-preference-swatch: {item.hex}" @click="choose('color', item.value)"></button>
+              <button type="button" data-wrn-accent-set="{item.value}" aria-label="{item.label}" title="{item.label}" style="--wrn-preference-swatch: {item.hex}" @click="choose('color', item.value)" data-wrn-owner="PreferenceSwitcher" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-compact="{compact}"></button>
             {/each}
           </div>
         </div>
-      </details>
+      </div>
 
-      <details class="wrn-preferences__menu wrn-preferences__menu--language" name="wrn-preference-menu">
-        <summary aria-label="{languageLabel}" title="{languageLabel}">
+      <div data-wrn-menu data-open="false" class="wrn-preferences__menu wrn-preferences__menu--language" name="wrn-preference-menu" data-wrn-owner="PreferenceSwitcher" data-wrn-part="menu" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-compact="{compact}">
+        <button type="button" data-wrn-menu-toggle aria-expanded="false" aria-label="{languageLabel}" title="{languageLabel}" data-wrn-owner="PreferenceSwitcher" data-wrn-part="trigger" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-compact="{compact}">
           <span class="{languageIcon}" aria-hidden="true"></span>
-          {#if showCurrentLanguage}<span class="wrn-preferences__current-language" aria-hidden="true">EN</span>{/if}
+          {#if showCurrentLanguage}<span class="wrn-preferences__current-language" aria-hidden="true" data-wrn-owner="PreferenceSwitcher" data-wrn-part="currentLanguage" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-compact="{compact}">EN</span>{/if}
           {#if !iconOnly && !compact}<span>{languageLabel}</span>{/if}
-        </summary>
-        <div class="wrn-preferences__panel wrn-preferences__panel--language">
+        </button>
+        <div class="wrn-preferences__panel wrn-preferences__panel--language" data-wrn-owner="PreferenceSwitcher" data-wrn-part="panel" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-compact="{compact}">
           <strong>{languageLabel}</strong>
           {#each languages as item}
-            <button type="button" data-wrn-lang-set="{item.value}" lang="{item.value}" @click="choose('language', item.value)">
+            <button type="button" data-wrn-lang-set="{item.value}" lang="{item.value}" @click="choose('language', item.value)" data-wrn-owner="PreferenceSwitcher" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-compact="{compact}">
               <span>{item.shortLabel}</span>{item.label}
             </button>
           {/each}
         </div>
-      </details>
+      </div>
     </div>
   }
 
@@ -104,7 +104,7 @@ size: string = "default"
       position: relative;
     }
 
-    .wrn-preferences__menu > summary {
+    .wrn-preferences__menu > [data-wrn-menu-toggle] {
       display: inline-flex;
       min-width: 2.25rem;
       min-height: 2.25rem;
@@ -119,18 +119,14 @@ size: string = "default"
       list-style: none;
     }
 
-    .wrn-preferences__menu > summary::-webkit-details-marker {
-      display: none;
-    }
-
-    .wrn-preferences__menu > summary:hover,
-    .wrn-preferences__menu[open] > summary {
+    .wrn-preferences__menu > [data-wrn-menu-toggle]:hover,
+    .wrn-preferences__menu[data-open="true"] > [data-wrn-menu-toggle] {
       color: var(--wrn-color-text);
       border-color: var(--wrn-color-border);
       background: var(--wrn-color-surface);
     }
 
-    .wrn-preferences__menu > summary > span:first-child {
+    .wrn-preferences__menu > [data-wrn-menu-toggle] > span:first-child {
       width: 1rem;
       height: 1rem;
     }
@@ -143,6 +139,8 @@ size: string = "default"
       letter-spacing: 0.02em;
     }
 
+    .wrn-preferences__menu:not([data-open="true"]) > .wrn-preferences__panel { display: none; }
+
     .wrn-preferences__panel {
       position: absolute;
       z-index: 80;