Refresh UI components and showcase; release updated framework packages

packages/ui/components/Modal.wrn

@@ -18,6 +18,7 @@ component Modal {
     placement: string = "center"
     color: string = "primary"
     variant: string = "default"
+    showHeader: boolean = true
     showClose: boolean = true
     closeLabel: string = "Close modal"
     closeOnBackdrop: boolean = true
@@ -98,7 +99,7 @@ component Modal {
     <div
       {...attrs}
       data-ui-component="Modal"
-      data-open='{isOpen() ? "true" : "false"}'
+      data-open='{(open || visible) ? "true" : "false"}'
       data-size='{size}'
       data-placement='{placement}'
       data-color='{color}'
@@ -107,6 +108,7 @@ component Modal {
       data-scroll='{scrollBehavior}'
       data-destructive='{destructive ? "true" : "false"}'
       class='wrn-modal {class}'
+      @click="if (event.target.closest('[data-modal-close]')) { hideModal('custom-button', event) }"
       @wrnexus:modal:close='hideModal("api", event)'
     >
       {#if triggerLabel}
@@ -114,7 +116,7 @@ component Modal {
           type="button"
           class="wrn-modal__trigger"
           aria-haspopup="dialog"
-          aria-expanded='{isOpen() ? "true" : "false"}'
+          aria-expanded='{(open || visible) ? "true" : "false"}'
           @click='showModal(event)'
         >
           {#if triggerIcon}
@@ -140,7 +142,7 @@ component Modal {
 
       <div
         class="wrn-modal__layer"
-        data-show="isOpen()"
+        data-show="(open || visible)"
         role="presentation"
         @keydown='handleKeydown(event)'
       >
@@ -159,7 +161,7 @@ component Modal {
           aria-label='{label || title}'
           tabindex="-1"
         >
-          <header
+          {#if showHeader}<header
             class="wrn-modal__header"
           >
             <div
@@ -212,7 +214,7 @@ component Modal {
                 </svg>
               </button>
             {/if}
-          </header>
+          </header>{/if}
 
           <div
             class="wrn-modal__body"
@@ -343,12 +345,12 @@ component Modal {
 
     .wrn-modal__trigger {
       appearance: none;
-      min-height: 2.55rem;
+      min-height: var(--wrn-control-height);
       padding: 0.65rem 1rem;
       color: var(--modal-contrast);
       background: var(--modal-accent);
       border: 0;
-      border-radius: 0.8rem;
+      border-radius: var(--wrn-radius-sm);
       font: inherit;
       font-size: 0.85rem;
       font-weight: 650;
@@ -431,18 +433,10 @@ component Modal {
       width: min(32rem, calc(100vw - 2rem));
       max-height: min(88vh, 52rem);
       color: var(--wrn-color-text);
-      background:
-      radial-gradient(
-      circle at 100% 0%,
-      color-mix(in srgb, var(--modal-accent) 9%, transparent),
-      transparent 34%
-      ),
-      var(--wrn-color-surface-raised);
-      border: 1px solid color-mix(in srgb, var(--modal-accent) 18%, var(--wrn-color-border));
-      border-radius: 1.35rem;
-      box-shadow:
-      0 1px 0 color-mix(in srgb, white 5%, transparent) inset,
-      0 40px 110px color-mix(in srgb, black 38%, transparent);
+      background: var(--wrn-color-surface-raised);
+      border: 1px solid var(--wrn-color-border);
+      border-radius: var(--wrn-radius-lg);
+      box-shadow: var(--wrn-shadow-lg);
       overflow: hidden;
       opacity: 0;
       transform: scale(0.96) translateY(10px);
@@ -502,7 +496,7 @@ component Modal {
       align-items: flex-start;
       justify-content: space-between;
       gap: 1rem;
-      padding: 1.4rem 1.4rem 1.15rem;
+      padding: 1.25rem;
       border-bottom: 1px solid var(--wrn-color-border);
     }
 
@@ -631,7 +625,7 @@ component Modal {
     .wrn-modal__body {
       flex: 1 1 auto;
       min-height: 0;
-      padding: 1.4rem;
+      padding: 1.25rem;
       color: var(--wrn-color-text);
     }
 
@@ -659,7 +653,7 @@ component Modal {
       align-items: center;
       justify-content: space-between;
       gap: 1rem;
-      padding: 1rem 1.4rem 1.4rem;
+      padding: 1rem 1.25rem;
       border-top: 1px solid var(--wrn-color-border);
     }
 
@@ -681,9 +675,9 @@ component Modal {
       align-items: center;
       justify-content: center;
       gap: 0.5rem;
-      min-height: 2.55rem;
+      min-height: var(--wrn-control-height, 2.5rem);
       padding: 0.65rem 1rem;
-      border-radius: 0.78rem;
+      border-radius: var(--wrn-radius-sm);
       font: inherit;
       font-size: 0.83rem;
       font-weight: 650;