feat: deployable design studio and updated component showcase

app/pages/components/strong-password.wrn

@@ -82,7 +82,7 @@ page StrongPasswordDetail {
         <div class="demo-workbench">
           <div id="strong-password-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            
+
             <div class="demo-render"><StrongPassword label="Live strength meter" name="strong-password-1" value="Northstar!2026" placeholder="Create a strong password" autocomplete="new-password" minLength="8" specialCharactersSet="!@#$%^&amp;*()_+-=[]{}|;:,.&lt;&gt;?" requireLowercase="true" requireUppercase="true" requireNumber="true" requireSpecialCharacter="true" showRequirements="false" presentation="inline" hintText="" disabled="false" readonly="false" required="false" invalid="false" validationMessage="" /></div>
           </div>
           <section class="demo-code" aria-label="Live strength meter usage">
@@ -104,7 +104,7 @@ page StrongPasswordDetail {
         <div class="demo-workbench">
           <div id="strong-password-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            
+
             <div class="demo-render"><StrongPassword label="Requirements and hint text" name="strong-password-2" value="" placeholder="Create a strong password" autocomplete="new-password" minLength="8" specialCharactersSet="!@#$%^&amp;*()_+-=[]{}|;:,.&lt;&gt;?" requireLowercase="true" requireUppercase="true" requireNumber="true" requireSpecialCharacter="true" showRequirements="true" presentation="inline" hintText="Use a unique password you do not use for another account." disabled="false" readonly="false" required="false" invalid="false" validationMessage="" /></div>
           </div>
           <section class="demo-code" aria-label="Requirements and hint text usage">
@@ -125,7 +125,7 @@ page StrongPasswordDetail {
         <div class="demo-workbench">
           <div id="strong-password-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            
+
             <div class="demo-render"><StrongPassword label="Requirements in a popover" name="strong-password-3" value="" placeholder="Create a strong password" autocomplete="new-password" minLength="8" specialCharactersSet="!@#$%^&amp;*()_+-=[]{}|;:,.&lt;&gt;?" requireLowercase="true" requireUppercase="true" requireNumber="true" requireSpecialCharacter="true" showRequirements="true" presentation="popover" hintText="" disabled="false" readonly="false" required="false" invalid="false" validationMessage="" /></div>
           </div>
           <section class="demo-code" aria-label="Requirements in a popover usage">
@@ -146,7 +146,7 @@ page StrongPasswordDetail {
         <div class="demo-workbench">
           <div id="strong-password-demo-4" class="demo-canvas demo-canvas--4">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            
+
             <div class="demo-render"><StrongPassword label="Custom special characters" name="strong-password-4" value="" placeholder="Create a strong password" autocomplete="new-password" minLength="8" specialCharactersSet="@#_-." requireLowercase="true" requireUppercase="true" requireNumber="true" requireSpecialCharacter="true" showRequirements="true" presentation="inline" hintText="" disabled="false" readonly="false" required="false" invalid="false" validationMessage="" /></div>
           </div>
           <section class="demo-code" aria-label="Custom special characters usage">
@@ -167,7 +167,7 @@ page StrongPasswordDetail {
         <div class="demo-workbench">
           <div id="strong-password-demo-5" class="demo-canvas demo-canvas--5">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            
+
             <div class="demo-render"><StrongPassword label="Optional requirements" name="strong-password-5" value="" placeholder="Create a strong password" autocomplete="new-password" minLength="8" specialCharactersSet="!@#$%^&amp;*()_+-=[]{}|;:,.&lt;&gt;?" requireLowercase="true" requireUppercase="true" requireNumber="true" requireSpecialCharacter="false" showRequirements="true" presentation="inline" hintText="" disabled="false" readonly="false" required="false" invalid="false" validationMessage="" /></div>
           </div>
           <section class="demo-code" aria-label="Optional requirements usage">
@@ -188,7 +188,7 @@ page StrongPasswordDetail {
         <div class="demo-workbench">
           <div id="strong-password-demo-6" class="demo-canvas demo-canvas--6">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            
+
             <div class="demo-render"><StrongPassword label="Disabled password strength" name="strong-password-6" value="" placeholder="Create a strong password" autocomplete="new-password" minLength="8" specialCharactersSet="!@#$%^&amp;*()_+-=[]{}|;:,.&lt;&gt;?" requireLowercase="true" requireUppercase="true" requireNumber="true" requireSpecialCharacter="true" showRequirements="true" presentation="inline" hintText="" disabled="true" readonly="false" required="false" invalid="false" validationMessage="" /></div>
           </div>
           <section class="demo-code" aria-label="Disabled password strength usage">